/* Roof-Rank components — named per the approved design system.
   Depth is a hairline border + one background step (ground -> card -> inset
   -> nested). No shadows. No gradients besides the two background layers
   and the two named radial glows below. Hover raises the border to 50%
   primary; only chips and menu items change fill. No transforms besides
   the -3px card lift. */

/* ===== Buttons & links ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-control);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid transparent;
  /* Every .btn so far was an <a>, which has no UA background by default.
     The wizard's Back button is the first real <button>, and <button>
     elements get a system "buttonface" gray fill unless CSS clears it —
     that gray box on the dark theme is what read as unreadable/ugly. */
  background: none;
}
.btn--primary { background: var(--color-active); border-color: var(--border-primary); color: var(--color-ink); }
.btn--primary:hover { border-color: rgba(var(--color-primary-rgb), 0.7); color: var(--color-ink); }
.btn--secondary { border-color: var(--border-hairline); color: var(--color-muted); }
.btn--secondary:hover { color: var(--color-ink); }
/* .btn sets its own display, which otherwise beats the UA [hidden] rule
   at equal specificity — needed for the wizard's Back button. */
.btn[hidden] { display: none; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ===== Site header ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--color-ground-rgb), 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid;
  border-image: linear-gradient(to right, transparent, rgba(var(--color-primary-rgb), 0.3), transparent) 1;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 16px var(--page-gutter);
}
.site-header__logo {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  flex: none;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--color-muted);
}
.site-nav__item { position: relative; padding: 18px 0; margin: -18px 0; }
.site-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
}
.site-nav__item:hover .site-nav__trigger,
.site-nav__trigger:focus-visible { color: var(--color-ink); }
.site-nav__link { color: var(--color-muted); }
.site-nav__link:hover { color: var(--color-ink); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 230px;
  background: var(--color-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-nested);
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.6);
}
/* Desktop only (see the min-width pair to this in the nav media-query
   block below): a mouse can hover, and a real :focus-within is reliable
   there. Touch has neither — mobile browsers apply :hover as a "sticky"
   state after a tap that doesn't reliably clear when a different item
   is tapped next, which let two dropdowns end up open at once. Mobile
   uses an explicit radio-driven accordion instead (below). */
@media (min-width: 861px) {
  .site-nav__item:hover .nav-dropdown,
  .site-nav__item:focus-within .nav-dropdown { display: flex; }
}
.nav-dropdown a { padding: 9px 12px; border-radius: 9px; font-size: 0.86rem; color: var(--color-ink); }
.nav-dropdown a:hover { background: var(--color-active); }

.nav-toggle, .site-nav__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-toggle-label {
  display: none;
  margin-left: auto;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-control);
  color: var(--color-ink);
  cursor: pointer;
  flex: none;
}
.nav-toggle-label:hover { background: var(--color-active); }

/* Kept in the DOM for crawlers/schema context, not shown to visitors —
   visible breadcrumbs tested worse for conversion than a tight header-to-
   content gap. Visually-hidden, not display:none, so assistive tech and
   crawlers still read it. */
.breadcrumb {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== Section shell ===== */

.section { padding: 78px 0; }
.section--compact-top { padding: 20px 0 78px; }
.section--trust { padding: 34px 0; }
.section--centered-text { text-align: center; }
.section-head__heading { margin-top: 14px; max-width: 720px; }
.section-head__heading--centered { margin: 14px auto 0; max-width: 700px; text-align: center; }
.section-head__sub { margin-top: 14px; }
.section-head__sub--centered { margin: 14px auto 0; text-align: center; }
.section--lifted { background: linear-gradient(to bottom, var(--color-card) 0%, var(--color-card) 80%, transparent 100%); }

/* ===== Outcome cards (case-study results) =====
   The prototype puts these in a bento arrangement whenever one card's
   figure runs long: card 1 wide, card 2 narrow beside it, card 3 full
   width underneath. We use that same 4/2/6-of-6 split on every case
   study rather than only the ones the prototype's length check happens
   to trigger, so the four results pages read as one consistent system
   instead of three plain grids and one lopsided one. */

.outcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--grid-gap); margin-top: 30px; align-items: stretch; }
.outcome-grid--bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.outcome-grid--bento .outcome-card:nth-child(1) { grid-column: 1 / span 4; }
.outcome-grid--bento .outcome-card:nth-child(2) { grid-column: 5 / span 2; }
.outcome-grid--bento .outcome-card:nth-child(3) { grid-column: 1 / span 6; }
.outcome-card { background: var(--color-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; }
.outcome-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.outcome-card__num { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; color: var(--color-caption); }
.outcome-card__source { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-faint); text-align: right; }
.outcome-card__stat-row { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.outcome-card__icon { flex: none; width: 64px; height: 64px; }
.outcome-card__stat { font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.04; color: var(--color-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.outcome-card__stat--md { font-size: clamp(1.6rem, 2.8vw, 2.05rem); }
.outcome-card__stat--sm { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.outcome-card__title { font-weight: 600; font-size: 1.02rem; margin: 18px 0 0; color: var(--color-elevated-text); }
.outcome-card__body { color: var(--color-muted); font-size: 0.9rem; line-height: 1.6; margin: 8px 0 0; }
.outcome-note { font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-faint); margin-top: 16px; }

/* ===== Picks grid (hub case-study bento, 2 up / 2 down) ===== */

.picks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: 28px; align-items: stretch; }
.picks-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Guide cluster bento: 6 or 7 spoke cards on a 6-col track, spans lifted
   verbatim from the prototype's GSPAN table so the asymmetric rhythm
   (3+3 / 2+2+2 / 3+3 for seven; 4+2 / 2+4 / 3+3 for six) survives. */
.picks-grid--bento6, .picks-grid--bento7 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.picks-grid--bento6 > :nth-child(1) { grid-column: 1 / span 4; }
.picks-grid--bento6 > :nth-child(2) { grid-column: 5 / span 2; }
.picks-grid--bento6 > :nth-child(3) { grid-column: 1 / span 2; }
.picks-grid--bento6 > :nth-child(4) { grid-column: 3 / span 4; }
.picks-grid--bento6 > :nth-child(5) { grid-column: 1 / span 3; }
.picks-grid--bento6 > :nth-child(6) { grid-column: 4 / span 3; }
.picks-grid--bento7 > :nth-child(1) { grid-column: 1 / span 3; }
.picks-grid--bento7 > :nth-child(2) { grid-column: 4 / span 3; }
.picks-grid--bento7 > :nth-child(3) { grid-column: 1 / span 2; }
.picks-grid--bento7 > :nth-child(4) { grid-column: 3 / span 2; }
.picks-grid--bento7 > :nth-child(5) { grid-column: 5 / span 2; }
.picks-grid--bento7 > :nth-child(6) { grid-column: 1 / span 3; }
.picks-grid--bento7 > :nth-child(7) { grid-column: 4 / span 3; }

/* ===== Hero ===== */

.hero { position: relative; padding: 30px 0 34px; }
.hero--compact { padding: 18px 0 6px; }
.hero__inner { position: relative; max-width: 1056px; margin: 0 auto; text-align: center; padding: 28px 0 8px; }
/* Width (wide/big H1 vs page-title H1) and padding (compact vs full hero)
   are independent controls in the source and stack as separate modifiers.
   Top value only — kept deliberately small (with the breadcrumb now hidden,
   this is the entire header-to-content gap) so content reads immediately
   under the sticky header on every page. Bottom padding and everything
   below the hero is untouched. */
.hero__inner--narrow { max-width: 760px; }
.hero__inner--compact { padding: 18px 0 4px; }
.hero__eyebrow { justify-content: center; align-items: flex-start; text-align: left; }
.hero__title { margin-top: 20px; }
.hero__sub { margin: 16px auto 0; }
.hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

.hero__gfx-simple { margin: 38px auto 0; max-width: 300px; display: flex; align-items: center; gap: 12px; }
.hero__gfx-simple-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--border-primary)); }
.hero__gfx-simple-line--end { background: linear-gradient(to right, var(--border-primary), transparent); }
.hero__gfx-simple-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); flex: none; animation: rr-pulse 2.4s ease-in-out infinite; }

.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
  flex: none;
}
.hero__eyebrow .eyebrow-dot { margin-top: 4px; }
/* justify-content alone only centers the dot+label inside the box; the
   box itself is inline-flex, so it still sits at its normal left flow
   position unless it's also made a centered block. */
.eyebrow-mono--centered { justify-content: center; width: fit-content; margin: 0 auto; }

/* ===== Trust strip ===== */

.trust-strip { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.trust-strip__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-faint); text-align: center; }
.trust-strip__viewport {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.trust-strip__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: rr-marquee 26s linear infinite;
}
@keyframes rr-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
.trust-strip__chip {
  flex: none;
  padding: 11px 18px;
  border: 1px solid var(--border-hairline-soft);
  border-radius: var(--radius-nested);
  background: var(--color-card);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--color-muted);
  white-space: nowrap;
}

/* ===== Card shell shared by bento + listable ===== */

.card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--border-primary); }
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(480px 220px at 12% -8%, rgba(var(--color-primary-rgb), 0.18), transparent 60%);
  pointer-events: none;
}
.card > * { position: relative; }

.icon-badge {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 28% 20%, rgba(var(--color-primary-rgb), 0.4), rgba(var(--color-primary-rgb), 0.08) 65%, transparent 100%), var(--color-nested);
  border: 1px solid var(--border-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--color-primary);
}
.icon-badge svg { width: 26px; height: 26px; }

.bento-grid { display: flex; flex-wrap: wrap; gap: var(--grid-gap); margin-top: 34px; align-items: stretch; }
.bento-card { flex: 1 1 min(100%, 340px); min-height: 320px; }
.bento-card--wide { flex: 1.4 1 min(100%, 460px); }
.bento-card__title { margin-top: 18px; }
.bento-card__body { margin-top: 10px; }
.bento-card__foot { margin-top: auto; padding-top: 24px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--color-nested);
  border: 1px solid var(--border-hairline-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--color-muted);
}

.listable-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--grid-gap); margin-top: 34px; align-items: stretch; }
.listable-card { text-decoration: none; }
.listable-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 18px; }
.listable-card__title { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--color-ink); }
.listable-card__meta { font-family: var(--font-mono); font-size: 0.64rem; color: var(--color-primary); white-space: nowrap; }
.listable-card__body { flex: 1 1 auto; margin: 10px 0 20px; }
.listable-card--noicon .listable-card__head { margin-top: 0; }
.listable-card__link {
  position: relative;
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ===== Pick cards (case-study picks) ===== */

.pick-card { display: flex; flex-direction: column; text-decoration: none; }
.pick-card__meta { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-caption); }
.pick-card__title { font-weight: 600; font-size: 1.12rem; margin: 12px 0 0; color: var(--color-elevated-text); }
.pick-card__body { color: var(--color-muted); font-size: 0.9rem; line-height: 1.6; margin: 10px 0 0; }
.pick-preview { margin-top: auto; padding-top: 20px; }
.pick-preview__box { border: 1px solid var(--border-hairline-soft); border-radius: var(--radius-nested); background: var(--color-inset); padding: 14px; display: flex; flex-direction: column; gap: 9px; }
/* The graphic (.mini-preview) already carries margin-top:auto to push
   itself to the card's bottom, so the link right under it uses a plain
   top margin rather than competing for the same auto space. */
.pick-card__link { margin-top: 18px; font-size: 0.86rem; font-weight: 500; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; }

.mini-preview {
  position: relative;
  margin-top: auto;
  border: 1px solid var(--border-hairline-soft);
  border-radius: var(--radius-inset);
  background: var(--color-nested);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  min-height: 130px;
}
/* Prototype-sourced graphic blocks paste raw inline styles into .mini-preview;
   these two rules stop their grid/header rows from overflowing at narrow widths. */
.mini-preview [style*="grid-template-columns"] > * {
  min-width: 0;
}
@media (max-width: 380px) {
  .mini-preview [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
.mini-preview > div[style*="letter-spacing:0.14em;color:#6E7686"] {
  flex-wrap: wrap;
  row-gap: 3px;
}
.mini-preview__head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.14em; color: var(--color-caption);
}
.mini-preview__head-rule { flex: 1; min-width: 6px; height: 1px; background: var(--border-hairline-soft); }
.mini-preview__head-tag { color: var(--color-primary); white-space: nowrap; }
.mini-preview__rows { display: flex; flex-direction: column; gap: 6px; }
.mini-preview__row { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 0.5rem; line-height: 1.5; }
.mini-preview__row-k { color: var(--color-faint); }
.mini-preview__row-rule { flex: 1; border-bottom: 1px dotted var(--border-hairline-soft); }
.mini-preview__row-v { color: var(--color-muted); }
.mini-preview__row--lead .mini-preview__row-k,
.mini-preview__row--lead .mini-preview__row-v { color: var(--color-primary); }
.mini-preview__row--lead .mini-preview__row-v { color: var(--color-ink); }
.mini-preview__foot { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.12em; color: var(--color-primary); }
.mini-preview__divider { height: 1px; background: var(--border-hairline-soft); }
.mini-preview__pills { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mini-preview__pill { padding: 4px 7px; border-radius: 6px; background: var(--color-active); border: 1px solid var(--border-primary); color: var(--color-ink); font-family: var(--font-mono); font-size: 0.48rem; white-space: nowrap; }
.mini-preview__pill--muted { background: none; border-color: var(--border-hairline-soft); color: var(--color-muted); }
.mini-preview__check-row { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.5rem; min-width: 0; }
.mini-preview__check-row > span:last-child { min-width: 0; overflow-wrap: break-word; }
.mini-preview__check-row--on { color: var(--color-elevated-text); }
.mini-preview__check-row--off { color: var(--color-caption); }
.mini-preview__check-icon { flex: none; }
.mini-preview__check-box { flex: none; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--border-hairline-soft); }
.mini-preview__bar-track { position: relative; flex: 1; height: 5px; border-radius: 3px; background: rgba(var(--color-primary-rgb), 0.1); overflow: hidden; }
.mini-preview__bar-fill { display: block; height: 100%; border-radius: 3px; background: rgba(var(--color-primary-rgb), 0.28); }
.mini-preview__bar-fill--full { background: var(--color-primary); }
.mini-preview__stat-line { display: flex; align-items: center; gap: 7px; }
.mini-preview__stat-line-label { width: 52px; flex: none; font-family: var(--font-mono); font-size: 0.48rem; color: var(--color-muted); }
.mini-preview__stat-line-val { width: 44px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 0.48rem; color: var(--color-muted); }
.mini-preview__struck { color: var(--color-faint); text-decoration: line-through; text-decoration-color: rgba(var(--color-primary-rgb), 0.4); }
.mini-preview__spark { display: flex; align-items: flex-end; gap: 14px; }
.mini-preview__spark-col { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.mini-preview__spark-num { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-caption); }
.mini-preview__spark-num--bright { color: var(--color-ink); }
.mini-preview__spark-bars { display: flex; gap: 1.5px; }
.mini-preview__spark-bar { width: 3px; height: 14px; background: rgba(var(--color-primary-rgb), 0.18); }
.mini-preview__spark-bar--bright { background: var(--color-primary); }
.mini-preview__spark-arrow { font-family: var(--font-mono); font-size: 0.6rem; color: var(--color-caption); padding-bottom: 4px; }
/* ===== Resource previews (FAQ accordion mock, glossary term chips) ===== */

.resource-preview-faq {
  position: relative;
  margin-top: auto;
  border: 1px solid var(--border-hairline-soft);
  border-radius: var(--radius-inset);
  background: var(--color-nested);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  height: 126px;
}
.resource-preview-faq__row { display: flex; align-items: center; gap: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--border-hairline-soft); }
.resource-preview-faq__row:last-child { border-bottom: none; padding-bottom: 0; }
.resource-preview-faq__bar { height: 5px; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.45); }
.resource-preview-faq__marker { font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-primary); }
.resource-preview-faq__marker--closed { color: var(--color-faint); }
.resource-preview-faq__lines { display: flex; flex-direction: column; gap: 5px; padding-bottom: 6px; }
.resource-preview-faq__line { height: 4px; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.14); }

.resource-preview-terms {
  position: relative;
  margin-top: auto;
  border: 1px solid var(--border-hairline-soft);
  border-radius: var(--radius-inset);
  background: var(--color-nested);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  min-height: 130px;
}
.resource-preview-terms__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.resource-preview-terms__chip { padding: 6px 9px; border-radius: 7px; border: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.52rem; color: var(--color-muted); }
.resource-preview-terms__chip--lead { background: var(--color-active); border-color: var(--border-primary-soft); color: var(--color-primary); }
.resource-preview-terms__foot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.12em; color: var(--color-caption); }

/* ===== Who this is for (fit) ===== */

.fit-panel {
  margin-top: 40px;
  border: 1px solid var(--border-hairline);
  border-radius: 22px;
  background: var(--color-card);
  overflow: hidden;
  text-align: left;
}
.fit-panel__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.fit-panel__col { padding: 28px 30px; display: flex; flex-direction: column; gap: 16px; }
.fit-panel__col--not { border-left: 1px solid var(--border-hairline-soft); background: var(--color-recessed); }
.fit-panel__col-head { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--color-primary); }
.fit-panel__col--not .fit-panel__col-head { color: var(--color-caption); }
.fit-panel__col-head-rule { flex: 1; height: 1px; background: var(--border-hairline-soft); }
.fit-panel__item { display: flex; gap: 11px; align-items: flex-start; }
.fit-panel__item-mark {
  flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 5px;
  background: var(--color-active); border: 1px solid var(--border-primary);
  display: flex; align-items: center; justify-content: center;
}
.fit-panel__item-mark--not { background: none; border-color: var(--border-hairline); }
.fit-panel__item-text { font-size: 0.95rem; line-height: 1.6; color: var(--color-subject); }
.fit-panel__item-text--not { color: var(--color-muted); }
.fit-panel__note { padding: 14px 30px; border-top: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--color-caption); }

/* ===== Letter / long-form prose card ===== */

.letter-card { position: relative; max-width: 760px; margin: 0 auto; }
.letter-card__layer {
  position: absolute; left: 22px; right: 22px; top: 14px; bottom: -14px;
  border-radius: var(--radius-card); background: var(--color-card);
  border: 1px solid var(--border-hairline-soft); opacity: 0.55;
}
.letter-card__layer--1 { left: 11px; right: 11px; top: 7px; bottom: -7px; opacity: 0.8; }
.letter-card__sheet {
  position: relative; background: var(--color-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card); padding: 64px 62px 54px;
}
.letter-card__block { margin-bottom: 22px; }
.letter-card__h { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.3; margin: 36px 0 14px; }
.letter-card__block:first-child .letter-card__h { margin-top: 0; }
/* #B9C0CC is a deliberate one-off from the approved prototype, not one of the
   seven ramp colors: dense multi-paragraph prose reads better a step brighter
   than --color-subject without going all the way to --color-ink. */
.letter-card__p { color: #B9C0CC; font-size: 1.02rem; line-height: 1.75; margin: 0; }
.letter-card__link { color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(var(--color-primary-rgb), 0.55); text-underline-offset: 3px; }
.letter-card__link:hover { color: var(--color-primary); }
.letter-card__list { display: flex; flex-direction: column; gap: 2px; margin-top: 22px; }
.letter-card__list-item { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--border-hairline-soft); }
.letter-card__list-n { flex: none; font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-primary); padding-top: 4px; }
.letter-card__list-title { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
.letter-card__list-body { color: var(--color-muted); font-size: 0.96rem; line-height: 1.7; margin: 8px 0 0; }
.letter-card__sign { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--border-hairline-soft); display: flex; align-items: center; gap: 14px; }
.letter-card__sign-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--color-active); border: 1px solid var(--border-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-primary);
}
.letter-card__sign-info { display: flex; flex-direction: column; gap: 3px; }
.letter-card__sign-name { font-weight: 600; font-size: 0.95rem; }
.letter-card__sign-role { color: var(--color-faint); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ===== Before / after panels ===== */

.before-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: var(--grid-gap); margin-top: 30px; align-items: stretch; }
.before-panel { background: var(--color-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; }
.before-panel__head { display: flex; align-items: center; gap: 10px; }
.before-panel__stamp { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-subject); background: var(--color-active); border: 1px solid var(--border-primary-soft); border-radius: var(--radius-pill); padding: 5px 10px; }
.before-panel__tag { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-caption); }
.before-panel__title { font-weight: 600; font-size: 1.12rem; margin: 14px 0 0; color: var(--color-elevated-text); }
.before-panel__body { color: var(--color-muted); font-size: 0.9rem; line-height: 1.6; margin: 10px 0 0; }
.before-panel__mock { margin-top: 22px; border-radius: var(--radius-nested); padding: 16px 14px; }
.before-panel__mock--before { border: 1px solid var(--border-hairline-soft); background: var(--color-recessed); }
.before-panel__mock--after { border: 1px solid var(--border-primary-soft); background: var(--color-inset); }
.before-panel__mock svg { display: block; width: 100%; height: auto; }
.before-panel__rows { margin-top: 18px; display: flex; flex-direction: column; gap: 1px; border-top: 1px solid var(--border-hairline-soft); }
.before-panel__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border-hairline-soft); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--color-caption); }
.before-panel__row-v { color: var(--color-subject); font-size: 0.72rem; text-align: right; }
.before-note { font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-faint); margin-top: 16px; }

/* ===== Market context (pricing ladder) ===== */

.market-card { background: var(--color-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: 26px; display: flex; flex-direction: column; }
.market-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.market-card__title { font-weight: 600; font-size: 1.12rem; margin: 0; color: var(--color-elevated-text); }
.market-card__note { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-caption); }
.market-card__body { color: var(--color-muted); font-size: 0.9rem; line-height: 1.6; margin: 22px 0 0; max-width: 640px; }
.market-ladder { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.market-ladder__row { display: grid; grid-template-columns: minmax(100px, 150px) 1fr auto; align-items: center; gap: 16px; }
.market-ladder__k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-caption); }
.market-ladder__track { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.04); display: block; }
.market-ladder__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.market-ladder__v { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-subject); white-space: nowrap; }
.market-gap-items { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.market-gap-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-hairline-soft); border-radius: var(--radius-inset); background: var(--color-inset); }
.market-gap-item span:last-child { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-subject); }
.market-job { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.market-job__row-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-caption); }
.market-job__row-head span:last-child { color: var(--color-elevated-text); font-size: 0.86rem; }
.market-job__bar { margin-top: 8px; height: 10px; border-radius: 5px; }
.market-job__bar--track { background: rgba(255, 255, 255, 0.04); }
.market-job__bar-fill { height: 10px; border-radius: 5px; background: var(--color-caption); }

/* ===== Pricing tiers ===== */

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--grid-gap); margin-top: 34px; }
.pricing-tier { background: var(--color-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: 30px; display: flex; flex-direction: column; }
.pricing-tier__tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); }
.pricing-tier__name { font-weight: 700; font-size: 1.4rem; letter-spacing: -0.015em; margin: 14px 0 0; }
.pricing-tier__price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 16px; }
/* Fluid, not fixed: "$15K-$50K+" alone is wider than a phone-width card
   at the fixed 2.3rem the shorter "$2,500" fits fine at — same shrinking-
   container-vs-fixed-size failure mode as the hero H1, fixed the same way. */
.pricing-tier__price { font-weight: 700; font-size: clamp(1.6rem, 9vw, 2.3rem); letter-spacing: -0.03em; }
.pricing-tier__unit { color: var(--color-faint); font-family: var(--font-mono); font-size: 0.66rem; overflow-wrap: break-word; min-width: 0; }
.pricing-tier__body { color: var(--color-muted); font-size: 0.94rem; line-height: 1.6; margin: 14px 0 0; white-space: pre-line; }
.pricing-tier__features { display: flex; flex-direction: column; gap: 11px; margin: 24px 0 0; }
.pricing-tier__feature { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9rem; color: var(--color-muted); }
.pricing-tier__feature svg { flex: none; margin-top: 2px; }
.pricing-tier__cta { margin-top: 28px; width: 100%; }
.pricing-note { font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-faint); margin-top: 16px; text-align: center; }

/* ===== Schematic (mechanism diagram) ===== */

.schematic-panel {
  margin-top: 40px;
  border: 1px solid var(--border-hairline);
  border-radius: 22px;
  background: var(--color-card);
  padding: 30px 24px 26px;
  text-align: left;
  overflow: hidden;
}
.schematic-rail { position: relative; }
.schematic-rail__gates { position: absolute; z-index: 2; top: 17px; left: 0; right: 0; height: 0; pointer-events: none; }
.schematic-rail__gate {
  position: absolute; top: 0; transform: translate(-50%, -50%);
  padding: 0 9px; background: var(--color-card);
  font-family: var(--font-mono); font-size: 0.53rem; letter-spacing: 0.12em; color: var(--color-faint); white-space: nowrap;
}
.schematic-rail__marker {
  position: absolute; top: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: var(--color-ink);
  box-shadow: 0 0 0 5px rgba(var(--color-primary-rgb), 0.18), 0 0 18px 3px rgba(var(--color-primary-rgb), 0.35);
  animation: rr-run4 13s cubic-bezier(.6,0,.35,1) infinite;
}
.schematic-nodes { position: relative; display: flex; align-items: stretch; gap: 0; }
.schematic-node {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  padding: 0 18px 14px; border-left: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px;
  animation: rr-st 13s ease-in-out infinite;
}
.schematic-node:first-child { border-left: none; }
.schematic-node__spine { position: relative; height: 34px; flex: none; }
.schematic-node__spine-line { position: absolute; top: 17px; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.09); }
.schematic-node:first-child .schematic-node__spine-line { left: 50%; }
.schematic-node:last-child .schematic-node__spine-line { right: 50%; }
.schematic-node__spine-ring { position: absolute; top: 11px; left: 50%; margin-left: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-card); border: 1px solid var(--border-primary-strong); }
.schematic-node__spine-dot { position: absolute; top: 14px; left: 50%; margin-left: -3px; width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--color-primary-rgb), 0.55); animation: rr-d 13s ease-in-out infinite; }
.schematic-node__head { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.schematic-node__icon {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-primary-strong);
}
.schematic-node__idx { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--color-faint); }
.schematic-node__label { margin-top: 12px; font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; }
.schematic-node__caption { margin-top: 7px; color: var(--color-faint); font-family: var(--font-mono); font-size: 0.6rem; line-height: 1.6; letter-spacing: 0.04em; }
.schematic-node__detail { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-hairline-soft); }
.schematic-checks { display: flex; flex-direction: column; gap: 7px; }
.schematic-checks__item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; background: var(--color-nested); font-size: 0.68rem; color: var(--color-subject); }
.schematic-checks__item svg { flex: none; }
.schematic-node:nth-child(1) { animation-delay: 0s; }
.schematic-node:nth-child(1) .schematic-node__spine-dot { animation-delay: 0s; }
.schematic-node:nth-child(2) { animation-delay: 3.25s; }
.schematic-node:nth-child(2) .schematic-node__spine-dot { animation-delay: 3.25s; }
.schematic-node:nth-child(3) { animation-delay: 6.5s; }
.schematic-node:nth-child(3) .schematic-node__spine-dot { animation-delay: 6.5s; }
.schematic-node:nth-child(4) { animation-delay: 9.75s; }
.schematic-node:nth-child(4) .schematic-node__spine-dot { animation-delay: 9.75s; }

/* ===== Proof / props cards (bottom-fade panel) ===== */

.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--grid-gap); margin-top: 34px; }
/* A 3-card props section (measurement framework, close-rate proof) is a
   2-up/1-down bento in the prototype, not three equal columns: cards 1
   and 2 share a row, card 3 spans full width underneath. */
.proof-grid--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proof-grid--bento .proof-card:nth-child(3) { grid-column: 1 / -1; }
.proof-card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: 40px 32px 64px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: 460px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
}
/* The tall, centered, bottom-fade shell above is right for the two
   close-rate proof cards (a big ring/badge floating in open space) but
   wrong for the measurement-framework cards: their graphic is a full
   info panel (rows of text), not an icon, so centering it in a 330px
   column with 460px of empty vertical space just wastes the card. This
   modifier flattens the shell back to the same left-aligned, content-
   height card shape as .outcome-card and .pick-card — same 24px
   padding, same title/body margins — and lets the panel fill the full
   card width instead of floating in the middle of it. */
.proof-card--framework {
  padding: 24px;
  min-height: 0;
  align-items: stretch;
  text-align: left;
  -webkit-mask-image: none;
  mask-image: none;
}
.proof-card--framework .proof-card__visual {
  max-width: none;
  min-height: 0;
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
}
.proof-card--framework .proof-card__visual > * { width: 100%; }
.proof-card--framework .proof-card__title { margin-top: 18px; }
.proof-card--framework .proof-card__body { margin-top: 8px; }
.proof-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 260px at 50% -12%, rgba(var(--color-primary-rgb), 0.18), transparent 62%);
}
.proof-card > * { position: relative; }
.proof-card__title { margin-top: 28px; }
.proof-card__body { margin-top: 12px; }
.proof-card__visual { width: 100%; max-width: 330px; min-height: 202px; display: flex; justify-content: center; align-items: flex-start; padding: 0 0 30px; }

/* ===== Process steps ===== */

.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--grid-gap); margin-top: 34px; }
.process-step { padding-top: 22px; border-top: 1px solid; border-image: linear-gradient(to right, rgba(var(--color-primary-rgb), 0.3), transparent) 1; }
.process-step__n { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--color-primary); }
.process-step__title { margin-top: 12px; }
.process-step__body { margin-top: 10px; }

/* ===== Testimonials ===== */

.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--grid-gap); margin-top: 30px; width: 100%; }
.testimonial-card { border: 1px solid var(--border-hairline-soft); border-radius: var(--radius-nested); padding: 26px; background: var(--color-card); display: flex; flex-direction: column; gap: 12px; }
.testimonial-card__tag { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.testimonial-card__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 11px; }
.testimonial-card__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-active); border: 1px solid var(--border-primary-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-primary);
}
.testimonial-card__name { font-size: 0.86rem; color: var(--color-elevated-text); font-weight: 600; }
.testimonial-card__market { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-faint); }

/* ===== Compare table ===== */

.compare-table { position: relative; margin-top: 30px; border: 1px solid var(--border-hairline); border-radius: 18px; overflow: hidden; background: var(--color-card); }
.compare-table__head { display: grid; grid-template-columns: 1.25fr 1fr 1fr; background: var(--color-nested); border-bottom: 1px solid var(--border-hairline-soft); }
.compare-table__head-cell { padding: 15px 22px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-caption); }
.compare-table__head-cell--mine { display: flex; align-items: center; gap: 8px; color: var(--color-ink); background: rgba(var(--color-primary-rgb), 0.09); border-left: 1px solid var(--border-primary-soft); border-right: 1px solid var(--border-primary-soft); }
.compare-table__row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; border-top: 1px solid var(--border-hairline-soft); }
.compare-table__cell { padding: 16px 22px; display: flex; gap: 11px; align-items: baseline; }
.compare-table__cell-n { flex: none; font-family: var(--font-mono); font-size: 0.6rem; color: var(--color-caption); }
.compare-table__cell-label { font-size: 0.9rem; font-weight: 500; line-height: 1.5; }
.compare-table__cell--mine, .compare-table__cell--other { align-items: flex-start; gap: 9px; font-size: 0.88rem; line-height: 1.55; }
.compare-table__cell--mine { color: var(--color-ink); background: rgba(var(--color-primary-rgb), 0.06); border-left: 1px solid var(--border-primary-soft); border-right: 1px solid var(--border-primary-soft); }
.compare-table__cell--other { color: var(--color-muted); }
.compare-table__mark { flex: none; display: flex; align-items: center; justify-content: center; width: 13px; height: 1.55em; }
.compare-table__mark-dash { display: block; width: 11px; height: 1.5px; border-radius: 1px; background: var(--color-caption); }
.compare-table__cell-tag { display: none; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; margin-bottom: 4px; }
.compare-note { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--color-faint); margin-top: 14px; }

/* ===== FAQ accordion ===== */

.accordion { margin-top: 28px; border-top: 1px solid var(--border-hairline-soft); width: 100%; max-width: 860px; }
.accordion-item { border-bottom: 1px solid var(--border-hairline-soft); }
.accordion-item__summary { padding: 20px 0; display: flex; justify-content: space-between; gap: 18px; font-weight: 500; font-size: 1rem; }
.accordion-item__marker { color: var(--color-primary); font-family: var(--font-mono); font-size: 0.9rem; }
.accordion-item[open] .accordion-item__marker { transform: rotate(45deg); display: inline-block; }
.accordion-item__answer { color: var(--color-muted); font-size: 0.94rem; line-height: 1.65; margin: 0 0 22px; max-width: 760px; }

/* ===== CTA band ===== */

.cta-band {
  border: 1px solid var(--border-hairline);
  border-radius: 24px;
  background: var(--color-card);
  padding: 56px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 300px at 50% -20%, rgba(var(--color-primary-rgb), 0.18), transparent 62%);
}
.cta-band > * { position: relative; }
.cta-band__heading { max-width: 660px; margin: 0 auto; }
.cta-band__sub { max-width: 560px; margin: 16px auto 0; }
.cta-band__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ===== 404 page ===== */

.notfound { padding: 80px 32px 88px; text-align: center; }
.notfound__eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--color-primary); }
.notfound__glyph { margin: 26px auto 0; width: 120px; }
.notfound__glyph svg { display: block; width: 100%; height: auto; }
.notfound__h2 { font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.4rem); letter-spacing: -0.025em; margin: 30px auto 0; max-width: 560px; text-wrap: balance; color: var(--color-ink); }
.notfound__p { color: var(--color-muted); font-size: 1rem; line-height: 1.65; margin: 16px auto 0; max-width: 480px; text-wrap: pretty; }
.notfound__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 12px; max-width: 760px; margin: 40px auto 0; text-align: left; }
.notfound-card { position: relative; border: 1px solid var(--border-hairline-soft); border-radius: 14px; background: var(--color-inset); padding: 20px; display: flex; flex-direction: column; min-height: 158px; transition: border-color 0.2s ease; }
.notfound-card:hover { border-color: var(--border-primary-strong); }
.notfound-card--primary { border-color: var(--border-primary); background: #1A2028; }
.notfound-card--primary:hover { border-color: var(--border-primary-soft); }
.notfound-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notfound-card__meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em; color: var(--color-muted); }
.notfound-card--primary .notfound-card__meta { color: var(--color-primary); }
.notfound-card__icon { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--color-active); border: 1px solid var(--border-hairline-soft); display: flex; align-items: center; justify-content: center; }
.notfound-card--primary .notfound-card__icon { border-color: var(--border-primary); }
.notfound-card__title { font-size: 1rem; font-weight: 600; margin-top: 14px; color: var(--color-ink); letter-spacing: -0.015em; text-wrap: balance; }
.notfound-card__body { font-size: 0.84rem; line-height: 1.55; color: var(--color-muted); margin: 8px 0 0; text-wrap: pretty; }
.notfound-card--primary .notfound-card__body { color: var(--color-subject); }
.notfound-card__path { margin-top: auto; padding-top: 16px; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; color: var(--color-muted); }

/* ===== Application form =====
   The markup is one real, native, submittable form — every fieldset,
   radio, checkbox and textarea always present and working with zero JS.
   /assets/js/apply-wizard.js is a deliberate, explicit exception to the
   site's zero-JS default (requested for this page only): it progressively
   enhances this same markup into the prototype's paginated step-through,
   with a chip nav, a progress bar, per-step completion gating, and an
   inline success screen on submit. With JS disabled every step just
   stays visible and the form posts normally — nothing here depends on
   the script running. */

.apply-form { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 34px; }
.apply-step { background: var(--color-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: 40px; margin: 0; }
.apply-step__key { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--color-primary); padding: 0; }
.apply-step__h2 { font-weight: 700; font-size: 1.4rem; letter-spacing: -0.015em; margin: 12px 0 0; }
.apply-step__sub { color: var(--color-muted); font-size: 0.94rem; line-height: 1.65; margin: 10px 0 0; max-width: 620px; }
.apply-step__fields { margin-top: 32px; display: flex; flex-direction: column; gap: 30px; }

/* Wizard (JS-active) mode: the prototype's live wizard state has no card
   wrapper around the question stack — it sits flat on the page background.
   .apply-step keeps its card treatment as the no-JS fallback's visual
   grouping (six fieldsets stacked on one page need that separation); once
   apply-wizard.js takes over and adds .is-wizard, only one step is ever
   visible at a time, so the card is redundant and wrong per the prototype. */
.apply-form.is-wizard .apply-step { background: none; border: none; border-radius: 0; padding: 0; }
.apply-form.is-wizard .apply-step__key { display: none; }
.apply-form.is-wizard .apply-step__h2 { margin-top: 34px; }

.form-field { border: none; margin: 0; padding: 0; }
.form-field__label { display: block; font-weight: 600; font-size: 0.98rem; color: var(--color-elevated-text); }
.form-field__hint { display: block; margin-top: 6px; color: var(--color-faint); font-size: 0.82rem; line-height: 1.5; }
.form-field__hint-accent { color: var(--color-subject); font-weight: 600; }
.form-field__control { margin-top: 12px; }

.form-input, .form-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--color-nested); border: 1px solid var(--border-hairline); border-radius: var(--radius-control);
  padding: 12px 14px; font-family: var(--font-body); font-size: 0.94rem; color: var(--color-ink);
}
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--border-primary-strong); }
.form-textarea { min-height: 110px; resize: vertical; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-faint); }

.form-options { display: flex; flex-wrap: wrap; gap: 8px; }
.form-option {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-control);
  background: var(--color-nested); font-size: 0.9rem; color: var(--color-subject); cursor: pointer;
}
/* The checkbox/radio itself is visually hidden — the pill's own border
   and fill (below) carry the selected state, so a visible dot next to
   text this short just eats space for no added information. Kept in
   the DOM as a true zero-size, off-screen control (not display:none)
   so it stays tabbable and toggles on label click like any checkbox. */
.form-option input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.form-option:has(input:checked) {
  border-color: rgba(var(--color-subject-rgb), 0.85);
  background: rgba(var(--color-primary-rgb), 0.16);
  box-shadow: inset 0 0 0 1px rgba(var(--color-subject-rgb), 0.5);
  color: var(--color-ink);
}
.form-option:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.apply-callout {
  margin-top: 30px; border-left: 2px solid rgba(var(--color-primary-rgb), 0.55);
  background: var(--color-ground); border-radius: 0 var(--radius-nested) var(--radius-nested) 0;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
}
.apply-callout__label { font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-muted); letter-spacing: 0.14em; }
.apply-callout__p { color: var(--color-subject); font-size: 0.94rem; line-height: 1.7; margin: 0; }
.apply-callout__p--muted { color: var(--color-muted); }

/* ===== Wizard chrome (apply-wizard.js) =====
   Hidden by default in the markup — JS un-hides this chrome and hides the
   fieldsets it doesn't need, so a no-JS visitor never sees an empty shell.
   Author rules beat the UA [hidden] rule at equal specificity, so each
   toggled element needs its own [hidden] override below. */

.wizard-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.wizard-chip {
  min-width: 0; text-align: left; padding: 9px 8px; border-radius: 8px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); background: transparent;
  border: 1px solid var(--border-hairline-soft); color: var(--color-faint); cursor: default;
}
.wizard-chip__num { font-size: 0.58rem; letter-spacing: 0.1em; color: inherit; }
.wizard-chip__name { font-size: 0.54rem; letter-spacing: 0.06em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-chip--done { border-color: rgba(var(--color-primary-rgb), 0.28); color: var(--color-muted); }
.wizard-chip--done .wizard-chip__num { color: var(--color-primary); }
.wizard-chip--current { cursor: pointer; background: rgba(var(--color-primary-rgb), 0.14); border-color: rgba(var(--color-primary-rgb), 0.5); color: var(--color-ink); }
.wizard-chip--current .wizard-chip__num { color: var(--color-ink); }
.wizard-chip:not(:disabled):hover { border-color: rgba(var(--color-primary-rgb), 0.45); }
.wizard-chip:disabled { cursor: default; }

.wizard-progress { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-muted); letter-spacing: 0.14em; }
.wizard-progress__pct { color: var(--color-subject); }
.wizard-progress-track { margin-top: 10px; height: 4px; border-radius: 2px; background: rgba(var(--color-primary-rgb), 0.12); overflow: hidden; }
.wizard-progress-fill { height: 100%; border-radius: 2px; background: var(--color-subject); transition: width 0.3s ease; }

.wizard-nag { border: 1px solid rgba(var(--color-subject-rgb), 0.4); border-radius: var(--radius-control); background: var(--color-nested); padding: 12px 15px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--color-elevated-text); }

.wizard-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wizard-nav__spacer { flex: 1; }
.wizard-nav__count { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--color-muted); }
.wizard-nav__count--complete { color: var(--color-primary); }

.wizard-bar[hidden], .wizard-nag[hidden], .wizard-nav[hidden], .apply-step[hidden] { display: none; }

.reassure-banner {
  max-width: 640px; margin: 0 auto; display: flex; gap: 14px; align-items: flex-start;
  padding: 22px 24px; border: 1px solid var(--border-hairline-soft); border-radius: var(--radius-nested);
  background: var(--color-card);
}
.reassure-banner svg { flex: none; margin-top: 2px; }
.reassure-banner p { color: var(--color-muted); font-size: 0.92rem; line-height: 1.65; margin: 0; }

/* ===== Site footer ===== */

.site-footer { margin-top: 40px; border-top: 1px solid; border-image: linear-gradient(to right, transparent, rgba(var(--color-primary-rgb), 0.3), transparent) 1; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 34px; padding: 56px var(--page-gutter) 40px; }
.site-footer__brand { min-width: min(100%, 220px); }
.site-footer__brand-tag { margin-top: 14px; max-width: 260px; color: var(--color-muted); font-size: 0.88rem; line-height: 1.6; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 0.86rem; }
.site-footer__col-title { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-faint); }
.site-footer__col a { color: var(--color-muted); }
.site-footer__col a:hover { color: var(--color-ink); }
.site-footer__legal { padding: 0 var(--page-gutter) 44px; font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-faint); }

/* ================================================================
   STRUCTURAL BREAKPOINTS — the one deliberate exception to "no media
   queries." Every size and gap on the site is fluid (clamp/min/
   auto-fit) and needs no breakpoint at all. These two components are
   different in kind: they are a fixed navigation ROW and a fixed
   4-up DIAGRAM, and no fluid technique changes a layout's shape,
   only its size. Below the point where either stops fitting, they
   switch shape once. Nothing else on the site has a media query.
   ================================================================ */

@media (max-width: 860px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--color-card);
    border-bottom: 1px solid var(--border-hairline);
    padding: 10px var(--page-gutter) 18px;
    margin-left: 0;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-toggle-label { display: flex; }
  .site-nav__item, .site-nav__link { padding: 12px 0; margin: 0; width: 100%; }
  .site-nav__link { display: block; }
  .site-nav__trigger { width: 100%; padding: 12px 0; }

  /* Mobile dropdown: a plain indented list under its parent, not a
     floating card — no fill, no border, no shadow. Shown only when its
     own radio is checked (not on hover/focus-within, see above), and
     since every trigger's radio shares one name="mobile-nav" group,
     checking a new one un-checks whichever was open before — an
     accordion with no JS. */
  .nav-dropdown {
    display: none;
    position: static;
    margin: 0 0 2px 14px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
  }
  .site-nav__radio:checked ~ .nav-dropdown { display: flex; }
  .nav-dropdown a { padding: 8px 10px; }

  /* The 4/2/6 outcome split and the 2-up/2-down picks grid both need a
     wide row to divide up. The narrow "5 / span 2" outcome column in
     particular has no room left for a 64px icon plus an eight-character
     stat like "14 hours" once the row itself drops under about 800px —
     collapse both bento grids to one plain column here, same width this
     header switches to its mobile menu at, rather than let that column
     get squeezed. */
  .outcome-grid--bento { grid-template-columns: 1fr; }
  .outcome-grid--bento .outcome-card:nth-child(1),
  .outcome-grid--bento .outcome-card:nth-child(2),
  .outcome-grid--bento .outcome-card:nth-child(3) { grid-column: 1 / -1; }
  .picks-grid { grid-template-columns: 1fr; }
  .picks-grid--bento6 > *, .picks-grid--bento7 > *, .picks-grid--3col > * { grid-column: 1 / -1 !important; }
  .proof-grid--bento { grid-template-columns: 1fr; }
  .proof-grid--bento .proof-card:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .schematic-rail__gates { display: none; }
  .schematic-nodes { flex-direction: column; }
  .schematic-node {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 0 20px;
  }
  .schematic-node:first-child { border-top: none; padding-top: 0; }
  .schematic-node__spine, .schematic-node__spine-line, .schematic-node__spine-ring, .schematic-node__spine-dot { display: none; }

  /* A centred paragraph reads worse the narrower it wraps. Every section
     that centres its header/body on desktop switches to a left-aligned
     read here — this is the one alignment rule on the site with a
     breakpoint, because "centred" is a layout mode, not a fluid size. */
  .hero__inner { text-align: left; }
  .hero__eyebrow { justify-content: flex-start; font-size: 0.62rem; letter-spacing: 0.1em; }
  .hero__eyebrow .eyebrow-dot { margin-top: 3px; }
  .hero__sub { margin-left: 0; margin-right: 0; }
  .hero__actions { justify-content: flex-start; }
  .section--centered-text { text-align: left; }
  .eyebrow-mono--centered { justify-content: flex-start; width: auto; margin: 0; }
  .container--centered-col { align-items: flex-start; }
  .section-head__heading--centered,
  .section-head__sub--centered { text-align: left; margin-left: 0; margin-right: 0; }

  /* The sheet's fixed 62px side padding eats most of a phone-width card;
     the layered background sheets behind it use fixed inset offsets, not
     padding, so they're untouched and still peek out correctly at any size. */
  .letter-card__sheet { padding: 40px 24px 32px; }

  /* Six chip labels ("01 THE BUSINESS", "02 THE NUMBERS"...) in a fixed
     6-column grid have no room to breathe under ~350px per chip on a
     phone — names truncate to ellipsis and the row reads as noise. The
     step label + progress bar above already carry the same information
     in a format that scales down cleanly, so the chip nav just hides. */
  .wizard-chips { display: none; }

  /* On a long six-step form, the step/percent readout is the only
     progress cue left once the chip nav hides above — pin it under the
     sticky site header (69px tall at this width) so it survives
     scrolling through a step's fields instead of scrolling away with
     step 1 and never being seen again. */
  .wizard-bar {
    position: sticky;
    top: 69px;
    z-index: 40;
    margin: 0 calc(-1 * var(--page-gutter));
    padding: 14px var(--page-gutter) 16px;
    background: rgba(var(--color-ground-rgb), 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-hairline);
  }

  /* Back / count / Next side-by-side in one row is what forced Next
     step down to a squeezed auto-width button — stack them instead:
     a compact Back on its own row (left-aligned, not stretched — it's
     the secondary action), the count centered under it, then a
     full-width primary Next last, each with room to breathe. */
  .wizard-nav { flex-direction: column; align-items: stretch; }
  .wizard-nav__spacer { display: none; }
  .wizard-nav__count { text-align: center; }
  [data-wizard-back] { align-self: flex-start; width: 33%; }
  [data-wizard-next] { width: 100%; }

  /* Three columns (criterion / us / them) at 1.25fr:1fr:1fr have no
     room once the table itself is phone-width — the header row and
     each data row collapse to a single stacked column instead, and
     the "Roof-Rank" / other-party label that the header row supplied
     moves inline above each answer via .compare-table__cell-tag,
     which is otherwise hidden (the header already says it). */
  .compare-table__head { display: none; }
  .compare-table__row { grid-template-columns: 1fr; border-top: 2px solid var(--border-hairline); }
  .compare-table__row:first-child { border-top: none; }
  .compare-table__cell { padding: 14px 18px; background: var(--color-nested); }
  .compare-table__cell--mine, .compare-table__cell--other {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border-hairline-soft);
    flex-wrap: wrap;
  }

  /* The tag and the check/dash mark used to share the same flex row as
     the description text, so a two-word tag like "Roof-Rank" had no
     room and wrapped to "ROOF-/RANK" while the mark sat pinned to its
     first line only — a misaligned mess. Forcing the tag onto its own
     full-width line (flex-basis 100%) puts the mark back on a single
     baseline with the text that follows it. */
  .compare-table__cell-tag { display: block; flex: 0 0 100%; margin-bottom: 2px; }

  /* Without a basis, the answer text sizes to its own max-content width
     for the line-wrap decision — a long answer like "$2,500 audit /
     $15,000 to $50,000+ rebuild" then doesn't fit next to the 13px
     check mark at all, so the whole span drops to its own line and
     strands the mark alone above it. Letting it shrink onto the mark's
     line instead keeps mark and text on one baseline for every answer,
     short or long. */
  .compare-table__cell--mine > span:last-child,
  .compare-table__cell--other > span:last-child { flex: 1 1 160px; min-width: 0; }
}

@media (max-width: 480px) {
  /* A long title fighting a nowrap meta badge for space in the same row
     is what broke "Ninety-six pages, then thirty-four" into six
     fragments on a narrow card — same root cause as the hero H1, a
     rigid sibling squeezing text below its comfortable wrap width.
     Stack them so the title gets the full card width back. */
  .listable-card__head { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Same fixed-floor-vs-shrinking-container pattern as the H1 and the
     card-head fix above: a 100-150px label column plus a nowrap value
     stops fitting once the ladder row itself is inside a narrow bento
     card rather than a full-width one. Tighten both on the narrowest
     phones rather than let the row force the card wider than its box. */
  .market-ladder__row { grid-template-columns: minmax(72px, 150px) 1fr auto; gap: 10px; }

  /* The 258px card floor that keeps the 404 grid's cards readable on
     tablet overflows the container itself below ~400px, since the page
     gutter eats into the available width faster than the floor shrinks. */
  .notfound__grid { grid-template-columns: 1fr; }

  /* A 64px icon plus a clamp() stat that floors at 1.9rem stops leaving
     room for a figure like "-$4,100/mo" once the card itself is the
     full (narrow) viewport width rather than one third of a wide row.
     Shrink both together here instead of letting the row spill past
     the card's padding. */
  .outcome-card__icon { width: 48px; height: 48px; }
  .outcome-card__stat-row { gap: 12px; }
  .outcome-card__stat { font-size: clamp(1.4rem, 7vw, 1.9rem); white-space: normal; }
}