.guide-page { background: var(--white); }

.guide-page .site-header { position: relative; }

.guide-hero {
  background: var(--harbor-700);
  color: var(--white);
  padding: clamp(64px, 8vw, 112px) 0 clamp(72px, 9vw, 124px);
}

.guide-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 30px;
  color: oklch(0.85 0.025 230);
  font-size: var(--type-meta);
  font-weight: 700;
}

.guide-breadcrumbs a { text-underline-offset: 3px; }
.guide-breadcrumbs span[aria-current="page"] { color: var(--calibration); }

.guide-hero h1 {
  max-width: 13ch;
  margin-bottom: 26px;
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 5.4rem);
  font-variation-settings: "wdth" 108;
  font-weight: 850;
  letter-spacing: -0.038em;
  line-height: 0.96;
}

.guide-hero-lede {
  max-width: 66ch;
  margin-bottom: 32px;
  color: oklch(0.92 0.02 230);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.65;
}

.guide-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.guide-meta { margin: 26px 0 0; color: oklch(0.82 0.025 230); font-size: var(--type-meta); }

.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: clamp(52px, 8vw, 110px);
  padding-block: clamp(70px, 9vw, 128px);
}

.guide-article { min-width: 0; }
.guide-article > :first-child { margin-top: 0; }

.guide-section {
  max-width: 760px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

.guide-section:first-child { padding-top: 0; border-top: 0; }

.guide-section h2 {
  max-width: 16ch;
  margin-bottom: 20px;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-variation-settings: "wdth" 103;
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1;
}

.guide-section h3 {
  margin: 32px 0 10px;
  font-family: var(--display);
  font-size: var(--type-subhead);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.guide-section p,
.guide-section li { max-width: 70ch; }

.guide-section p { color: var(--muted); }
.guide-section strong { color: var(--ink); }
.guide-section a { color: var(--harbor-700); text-underline-offset: 3px; }
.guide-section p code { overflow-wrap: anywhere; word-break: break-word; }

.guide-section ul,
.guide-section ol { margin: 20px 0 0; padding-left: 22px; }
.guide-section li { margin-bottom: 11px; color: var(--muted); }
.guide-section li::marker { color: var(--harbor-600); font-weight: 800; }

.guide-code {
  margin: 24px 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--harbor-950);
  color: var(--white);
}

.guide-code-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid oklch(0.7 0.03 230 / 0.2);
  background: oklch(0.23 0.06 230);
  color: oklch(0.82 0.025 230);
  font-size: var(--type-meta);
  font-weight: 700;
}

.guide-code pre { margin: 0; overflow-x: auto; padding: 24px; }
.guide-code code {
  font-family: var(--mono);
  font-size: clamp(0.8rem, 1.2vw, 0.86rem);
  font-variant-ligatures: none;
  line-height: 1.75;
}

.guide-note {
  margin: 26px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.guide-note strong { display: block; margin-bottom: 5px; font-family: var(--display); font-weight: 850; }
.guide-note p { margin: 0; color: var(--muted); font-size: var(--type-support); }

.guide-client-index {
  margin: 28px 0;
  border-block: 1px solid var(--line);
}

.guide-client-path {
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) minmax(280px, 1fr);
  gap: 18px 32px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.guide-client-path:first-child { border-top: 0; }
.guide-client-name { min-width: 0; }
.guide-client-name h3 { margin: 0 0 8px; font-size: clamp(1.2rem, 2vw, 1.45rem); }
.guide-client-name p { margin: 0; font-size: var(--type-compact); line-height: 1.5; }
.guide-client-name code,
.guide-client-path dd code { overflow-wrap: anywhere; color: var(--harbor-900); font-family: var(--mono); font-size: var(--type-meta); }
.guide-client-path dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; }
.guide-client-path dt { margin-bottom: 6px; color: var(--harbor-900); font-size: var(--type-label); font-weight: 780; }
.guide-client-path dd { margin: 0; color: var(--muted); font-size: var(--type-compact); line-height: 1.5; }
.guide-client-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.guide-client-actions a { font-size: var(--type-compact); font-weight: 780; }

.guide-package {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 26px 0 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.guide-package img { display: block; border-radius: var(--radius-sm); }
.guide-package strong { display: block; margin-bottom: 4px; font-family: var(--display); font-size: var(--type-subhead); }
.guide-package span { color: var(--muted); font-size: var(--type-compact); }
.guide-package .button { white-space: nowrap; }
.guide-checksum { margin: 0 0 26px; overflow-wrap: anywhere; font-size: var(--type-meta); }
.guide-checksum strong { margin-right: 6px; }
.guide-checksum code { color: var(--harbor-900); font-family: var(--mono); }

.guide-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin: 28px 0;
}

.guide-flow-node {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.guide-flow-node strong { display: block; margin-bottom: 5px; font-family: var(--display); font-weight: 850; }
.guide-flow-node span { display: block; color: var(--muted); font-size: var(--type-compact); line-height: 1.5; }
.guide-flow-node code { overflow-wrap: anywhere; color: var(--harbor-900); font-family: var(--mono); font-size: var(--type-meta); }
.guide-flow-arrow { align-self: center; color: var(--harbor-600); font-family: var(--display); font-size: 1.45rem; font-weight: 900; }

.thumbnail-pipeline {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) auto minmax(190px, 1.15fr) auto minmax(0, 0.9fr);
  gap: 14px;
  align-items: center;
  margin: 30px 0;
  padding: clamp(20px, 4vw, 32px);
  border-radius: var(--radius-md);
  background: var(--harbor-950);
  color: var(--white);
}

.thumbnail-stage { min-width: 0; }
.thumbnail-stage-label { display: block; margin-bottom: 9px; color: oklch(0.79 0.025 230); font-size: var(--type-meta); font-weight: 780; }
.thumbnail-url { overflow: hidden; color: var(--white); font-family: var(--mono); font-size: var(--type-meta); text-overflow: ellipsis; white-space: nowrap; }
.thumbnail-arrow { color: var(--calibration); font-family: var(--display); font-size: 1.45rem; font-weight: 900; }
.thumbnail-stage-capture strong { display: block; margin-top: 10px; color: var(--white); font-size: var(--type-meta); }
.thumbnail-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid oklch(0.8 0.03 230 / 0.55); border-radius: var(--radius-sm); background: var(--surface); }
.thumbnail-chrome { display: block; height: 15%; border-bottom: 1px solid var(--line); background: var(--surface-deep); }
.thumbnail-chrome::before { content: ""; display: block; width: 5px; height: 5px; margin: 7px 0 0 9px; border-radius: 50%; background: var(--harbor-600); box-shadow: 10px 0 0 var(--calibration), 20px 0 0 var(--signal-red); }
.thumbnail-page-line { display: block; width: 52%; height: 7%; margin: 7% 0 0 8%; background: var(--harbor-700); }
.thumbnail-page-line-wide { width: 72%; height: 11%; }
.thumbnail-page-block { display: block; width: 84%; height: 30%; margin: 8% 0 0 8%; background: var(--surface-deep); }
.thumbnail-sizes { display: flex; flex-wrap: wrap; gap: 7px; }
.thumbnail-sizes span { padding: 7px 9px; border: 1px solid oklch(0.72 0.03 230 / 0.42); border-radius: var(--radius-sm); color: var(--white); font-family: var(--mono); font-size: var(--type-meta); }
.thumbnail-pipeline figcaption { grid-column: 1 / -1; margin-top: 8px; color: oklch(0.83 0.025 230); font-size: var(--type-meta); line-height: 1.5; }

.guide-section .thumbnail-cadence { margin: 26px 0; padding: 0; border-block: 1px solid var(--line); list-style: none; }
.guide-section .thumbnail-cadence li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; max-width: none; margin: 0; padding: 18px 0; border-top: 1px solid var(--line); }
.guide-section .thumbnail-cadence li:first-child { border-top: 0; }
.thumbnail-cadence strong { color: var(--harbor-900); font-family: var(--display); font-size: var(--type-support); font-weight: 850; }
.thumbnail-cadence span { color: var(--muted); font-size: var(--type-support); line-height: 1.55; }

.guide-table-wrap { margin: 26px 0; overflow-x: auto; }
.guide-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.guide-table th,
.guide-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.guide-table th { color: var(--harbor-900); font-size: var(--type-label); }
.guide-table td { color: var(--muted); font-size: var(--type-support); }
.guide-table code { color: var(--harbor-900); font-family: var(--mono); font-size: var(--type-meta); }

.guide-toc { align-self: start; position: sticky; top: 28px; }
.guide-toc strong { display: block; margin-bottom: 14px; font-family: var(--display); font-size: var(--type-body); font-weight: 850; }
.guide-toc ol { list-style: none; margin: 0; padding: 0; }
.guide-toc li { border-top: 1px solid var(--line); }
.guide-toc a { display: block; padding: 11px 0; color: var(--muted); font-size: var(--type-compact); text-decoration: none; }
.guide-toc a:hover { color: var(--harbor-700); }

.guide-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  margin-top: 22px;
  padding: clamp(28px, 5vw, 44px);
  border-radius: var(--radius-md);
  background: var(--harbor-700);
  color: var(--white);
}

.guide-next h2 {
  max-width: 13ch;
  margin-bottom: 10px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1;
}
.guide-next p { max-width: 55ch; margin: 0; color: oklch(0.88 0.02 230); }
.guide-next .button { white-space: nowrap; }

.guide-comparison .guide-section { padding-block: 40px; }
.guide-comparison .guide-section:first-child { padding-top: 0; }

.guide-migration .migration-map td:first-child {
  width: 27%;
  color: var(--harbor-900);
  font-weight: 700;
}

.guide-kicker,
.guide-choice-label {
  color: var(--harbor-700);
  font-size: var(--type-label);
  font-weight: 780;
  line-height: 1.2;
}

.guide-kicker { margin-bottom: 12px; }

.guide-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
}

.guide-choice {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.guide-choice-hosted { border-top: 6px solid var(--calibration); background: var(--surface); }
.guide-choice:not(.guide-choice-hosted) { border-top: 6px solid var(--harbor-700); }
.guide-choice-label { margin-bottom: 8px; }

.guide-choice h3 {
  margin: 0 0 24px;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 850;
  line-height: 1.05;
}

.security-path {
  margin: 28px 0 20px;
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-md);
  background: var(--harbor-950);
  color: var(--white);
}

.security-path figcaption {
  margin-bottom: 22px;
  color: var(--calibration);
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 850;
}

.security-path ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-section .security-path li {
  position: relative;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0 20px 0 0;
}

.guide-section .security-path li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 22px;
  right: 6px;
  color: var(--calibration);
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 850;
}

.security-path li > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--type-support);
  font-weight: 850;
  line-height: 1.1;
}

.security-path li > small {
  display: block;
  color: var(--code-muted);
  font-size: var(--type-meta);
  line-height: 1.45;
}

.security-path-note { color: var(--muted); font-size: var(--type-support); }

.security-rejection-table td:first-child {
  width: 25%;
  color: var(--harbor-900);
  font-weight: 700;
}

.security-ownership {
  margin: 28px 0;
  border-block: 1px solid var(--line);
}

.security-ownership > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.security-ownership > div:first-child { border-top: 0; }
.security-ownership dt { color: var(--harbor-900); font-weight: 780; }
.security-ownership dd { margin: 0; color: var(--muted); line-height: 1.55; }

.guide-section .security-tests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 28px 0;
  padding: 0;
  border-block: 1px solid var(--line);
  list-style: none;
}

.guide-section .security-tests li {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  max-width: none;
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.guide-section .security-tests li:nth-child(-n + 2) { border-top: 0; }
.security-tests strong { color: var(--harbor-900); font-size: var(--type-support); }
.security-tests span { color: var(--muted); font-size: var(--type-support); line-height: 1.5; }

@media (max-width: 900px) {
  .security-path ol { grid-template-columns: 1fr; }
  .guide-section .security-path li { padding: 0 0 28px; }
  .guide-section .security-path li:last-child { padding-bottom: 0; }
  .guide-section .security-path li:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: 7px; left: 4px; }
}

@media (max-width: 680px) {
  .security-ownership > div { grid-template-columns: 1fr; gap: 6px; }
  .guide-section .security-tests { grid-template-columns: 1fr; }
  .guide-section .security-tests li:nth-child(2) { border-top: 1px solid var(--line); }
  .guide-section .security-tests li { grid-template-columns: 1fr; gap: 6px; }
}

.guide-choice dl { margin: 0; }
.guide-choice dl div { padding: 18px 0; border-top: 1px solid var(--line); }
.guide-choice dt { margin-bottom: 8px; color: var(--harbor-900); font-size: var(--type-label); font-weight: 780; }
.guide-choice dd { margin: 0; color: var(--muted); font-size: var(--type-body); line-height: 1.55; }

.guide-compare-table td { font-size: var(--type-body); }
.guide-scroll-hint { display: none; margin-top: -12px; font-size: var(--type-meta); }

.lazy-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  margin: 28px 0 22px;
}

.lazy-proof {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.lazy-proof-off { border-top: 6px solid var(--signal-red); }
.lazy-proof-on { border-top: 6px solid var(--calibration); }

.lazy-proof-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
}

.lazy-proof-head strong {
  font-family: var(--display);
  font-size: var(--type-support);
  font-weight: 850;
}

.lazy-proof-head span {
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: 780;
}

.lazy-proof a {
  display: block;
  border-block: 1px solid var(--line);
  background: var(--harbor-950);
}

.lazy-proof a:focus-visible { outline-offset: -4px; }
.lazy-proof img { display: block; width: 100%; height: auto; }

.lazy-proof figcaption {
  padding: 14px 16px 16px;
  color: var(--muted);
  font-size: var(--type-meta);
  line-height: 1.55;
}

.lazy-proof figcaption code,
.lazy-proof-note code {
  overflow-wrap: anywhere;
  color: var(--harbor-900);
  font-family: var(--mono);
}

.guide-section .lazy-proof-note {
  margin-top: 0;
  font-size: var(--type-support);
}

@media (max-width: 880px) {
  .guide-layout { grid-template-columns: 1fr; }
  .guide-toc { display: none; }
  .guide-next { grid-template-columns: 1fr; }
  .guide-next .button { justify-self: start; }
}

@media (max-width: 620px) {
  .guide-client-path { grid-template-columns: 1fr; }
  .guide-client-path dl { grid-template-columns: 1fr; }
  .guide-client-actions { grid-column: 1; }
  .guide-choice-grid { grid-template-columns: 1fr; }
  .lazy-proof-grid { grid-template-columns: 1fr; }
  .guide-scroll-hint { display: block; }
  .guide-package { grid-template-columns: auto minmax(0, 1fr); }
  .guide-package .button { grid-column: 1 / -1; width: 100%; }
  .guide-flow { grid-template-columns: 1fr; }
  .guide-flow-arrow { justify-self: center; line-height: 1; transform: rotate(90deg); }
  .thumbnail-pipeline { grid-template-columns: 1fr; }
  .thumbnail-arrow { justify-self: center; line-height: 1; transform: rotate(90deg); }
  .thumbnail-stage { width: 100%; }
  .thumbnail-frame { max-width: 300px; }
  .guide-section .thumbnail-cadence li { grid-template-columns: 1fr; gap: 5px; }
}

@media (max-width: 480px) {
  .guide-hero h1 { font-size: clamp(2.65rem, 13vw, 4.1rem); }
  .guide-archestra .guide-hero h1 { font-size: clamp(2.35rem, 11vw, 3.6rem); }
  .guide-migration .guide-hero h1 { font-size: clamp(2.05rem, 8.5vw, 3.4rem); }
  .guide-actions { flex-direction: column; }
  .guide-actions .button { width: 100%; }
  .guide-code pre { padding: 18px; }
  .guide-next { padding: 24px 20px; }
  .guide-next .button { width: 100%; }
}