/*
 * Clu — useclu.com marketing site
 * Design tokens: docs/design/CLU_DESIGN.md v2.1, Appendix A (values copied verbatim).
 * Layout/spacing: docs/design/CLU_HANDOFF.md v1.7 §2, §4.
 * Plain CSS, no build step, no framework.
 */

/* ---- self-hosted type (docs/design/CLU_DESIGN.md "Two typefaces"; files from tools/fonts/, Latin subset) ---- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
}
/* Second-pass fix (site-only - this axis pinning does not exist in the app's own tools/fonts/, which never uses
   display-tier sizes per CLU_HANDOFF §2: "not to leak into the app"): tools/fonts/README.md pins the body
   instance's optical-size axis to opsz=14, but the source variable font's OWN default for that axis is opsz=96
   (its max - confirmed against the upstream TTF, sha256 413e7357... matching tools/fonts/README.md exactly), a
   "display" optical size with tighter, sharper proportions. Pinning every size to the opsz=14 "text" instance
   was rendering every headline noticeably wider than Figma.
   NOTE, and a real trap: every docs/design/*.reference.tsx export (home, home mobile, privacy, terms) states
   `fontVariationSettings: '"opsz" 14, "wdth" 100'` on literally every text layer, including the 104px hero - that
   reads as if Figma's source is opsz=14 throughout, and a first pass at this fix took it at face value and
   reverted to a single opsz=14 family. That was wrong: it's Figma's dev-mode code-export boilerplate, not what
   the canvas actually rasterizes - re-measuring docs/design/site/home.desktop.light.244-3.png directly (real
   pixel bounds of the text, background-color-distance thresholded, both the single-pixel grey edge-artifact
   column at x=951 and the orb graphic excluded from the scan) gives the true rendered width at 1440: "You know
   where they left." = 1055.8px, "Every click, counted." = 608.1px. Rendering the SAME strings at opsz=14 gives
   1192.5px (+12.9%) and 664.7px (+9.3%) - opsz=96 gives 1054.8px (-0.1%) and 589.6px (-3.0%) - opsz=96 is the
   one that actually matches the screenshot Figma produced, whatever its code export claims. A second, opsz=96
   instance (same subsetting pipeline, same Latin range, same wght 400-800/wdth 100 - see
   site/fonts/bricolage-grotesque-display-latin.woff2) is used ONLY on display-tier text (hero, problem-band,
   section titles, page h1s - CLU_HANDOFF §2's own "Display tier" list); body/UI text keeps the original opsz=14
   instance untouched, since nothing indicated THAT was ever wrong. */
@font-face {
  font-family: "Bricolage Grotesque Display";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-display-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

/* ---- tokens: light (default) ---- */
:root {
  /* the opsz=96 "display" instance, for headline-tier text only - see the comment on its @font-face rule above
     for why body/UI text keeps the original (opsz=14) "Bricolage Grotesque" family instead. */
  --font-display: "Bricolage Grotesque Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --surface-page:#F8F7F4; --surface-card:#FFFFFF; --surface-raised:#FFFFFF; --surface-soft:#E8ECFA;
  --text-primary:#10142B; --text-muted:#5F6673; --text-on-primary:#FFFFFF;
  --text-placeholder:#8B93A5; --text-disabled:#A9AFBC;
  --border-hairline:#E3E1DA; --border-strong:#1B2A6B; --border-focus:#1B2A6B;
  --brand-primary:#1B2A6B; --brand-primary-hover:#16225A;
  --accent-saffron:#FFB020; --accent-saffron-quiet:#FFB020; --accent-coral:#FF6B4A;
  --status-supported:#2F5BEA; --status-testable:#7B61D9; --status-research:#5F6673;
  --state-running:#B9770E; --state-complete:#2F7D5B; --state-failed:#D64545;
  --elevation-1:0 16px 40px rgba(27,42,107,.12);
  --tag-tint:12%;
  /* the problem band and video cards stay this exact navy in BOTH themes (CLU_HANDOFF §4, §11) */
  --band-navy:#1B2A6B;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page:#0D1424; --surface-card:#141C30; --surface-raised:#1C2540; --surface-soft:#19233D;
    --text-primary:#E8ECF5; --text-muted:#A2ADC4; --text-on-primary:#0D1424;
    --text-placeholder:#8892AC; --text-disabled:#7B86A3;
    --border-hairline:#2E3A57; --border-strong:#667499; --border-focus:#7BA6F5;
    --brand-primary:#5B8DEF; --brand-primary-hover:#7BA6F5;
    --accent-saffron:#FFB020; --accent-saffron-quiet:#E9A835; --accent-coral:#FF8A6B;
    --status-supported:#7CB0FF; --status-testable:#A98CFF; --status-research:#98A3BC;
    --state-running:#E0A33A; --state-complete:#4FB783; --state-failed:#FF8A6B;
    --elevation-1:none;
    --tag-tint:14%;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface-page:#0D1424; --surface-card:#141C30; --surface-raised:#1C2540; --surface-soft:#19233D;
  --text-primary:#E8ECF5; --text-muted:#A2ADC4; --text-on-primary:#0D1424;
  --text-placeholder:#8892AC; --text-disabled:#7B86A3;
  --border-hairline:#2E3A57; --border-strong:#667499; --border-focus:#7BA6F5;
  --brand-primary:#5B8DEF; --brand-primary-hover:#7BA6F5;
  --accent-saffron:#FFB020; --accent-saffron-quiet:#E9A835; --accent-coral:#FF8A6B;
  --status-supported:#7CB0FF; --status-testable:#A98CFF; --status-research:#98A3BC;
  --state-running:#E0A33A; --state-complete:#4FB783; --state-failed:#FF8A6B;
  --elevation-1:none;
  --tag-tint:14%;
  color-scheme: dark;
}

/* ---- reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ---- layout shell ---- */
/* content width 1200 + side gutters 120 (CLU_HANDOFF §2) = 1440 total: max-width must include the
   gutters themselves, or box-sizing:border-box eats them out of the 1200 and starves the content
   to 960px instead (caught via the Addendum 4 screenshot pass - the hero heading was wrapping to
   4 lines instead of 2 because of exactly this). */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 120px; }
main { display: block; }
section { padding: 160px 0; }
section.tight { padding: 0; }

@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  section { padding: 88px 0; }
}

/* ---- header ---- */
.site-header {
  position: relative;
  z-index: 40;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-hairline);
}
.site-header .wrap {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
}
/* PART B5: the wordmark is an inline SVG (currentColor path + a fixed #FFB020 dot), so it follows this
   token and needs no second/dark image file - light #1B2A6B, dark #5B8DEF, same as every other brand-primary use. */
.site-header .logo { flex-shrink: 0; display: flex; align-items: center; color: var(--brand-primary); }
.site-header .logo svg { width: 42.566px; height: 24px; }
.site-header .spacer { flex: 1 0 0; }
.site-header nav.primary-nav { display: flex; align-items: center; gap: 28px; }
.site-header nav.primary-nav a {
  font-size: 15px; font-weight: 500; text-decoration: none; color: var(--text-primary);
  white-space: nowrap;
}
.site-header nav.primary-nav a:hover { color: var(--brand-primary); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: -0.075px;
  border-radius: 10px; padding: 11px 18px; text-decoration: none; border: none; cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
  white-space: nowrap;
}
.btn-primary { background: var(--brand-primary); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--brand-primary-hover); }
.btn-outline { background: transparent; color: var(--brand-primary); border: 1.5px solid var(--brand-primary); padding: 9.5px 16.5px; }
.btn-outline:hover { background: var(--surface-soft); }
.btn-block { width: 100%; }
.btn[aria-disabled="true"] {
  background: none; color: var(--text-disabled); border: 1px solid var(--border-hairline); cursor: default;
}
.header-try-free { padding: 11px 18px; }

/* hamburger (mobile only) */
.hamburger {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border-radius: 10px; border: none; background: none; padding: 0; cursor: pointer;
}
.hamburger span { display: block; width: 20px; height: 1.75px; border-radius: 1px; background: var(--text-primary); }
@media (max-width: 900px) {
  .site-header .wrap { height: 70px; gap: 8px; }
  .site-header nav.primary-nav a:not(.header-signin-mobile) { display: none; }
  .header-signin-mobile { display: none !important; }
  .hamburger { display: flex; }
}

/* ---- theme toggle (CLU_DESIGN "The theme toggle" / CLU_HANDOFF §3) ---- */
.theme-toggle {
  position: relative;
  width: 64px; height: 36px; padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--border-hairline);
  background: var(--surface-card);
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center;
}
:root[data-theme="dark"] .theme-toggle, :root:not([data-theme="light"]) .theme-toggle { background: var(--surface-raised); }
.theme-toggle .knob {
  position: absolute; top: 4px; left: 4px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-primary);
  display: flex; align-items: center; justify-content: center;
  transition: transform 160ms ease-out, background-color 160ms ease-out;
}
.theme-toggle[aria-checked="true"] .knob { transform: translateX(28px); }
.theme-toggle .knob svg { position: absolute; width: 15px; height: 15px; color: var(--text-on-primary); }
.theme-toggle .track-icon { position: absolute; width: 15px; height: 15px; color: var(--text-muted); }
.theme-toggle .track-icon.sun { left: 8px; }
.theme-toggle .track-icon.moon { right: 8px; }
.theme-toggle:hover .knob { background: var(--brand-primary-hover); }
.theme-toggle .knob .icon-moon { display: none; }
.theme-toggle[aria-checked="true"] .knob .icon-sun { display: none; }
.theme-toggle[aria-checked="true"] .knob .icon-moon { display: block; }

/* ---- mobile nav panel ---- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 50;
  background: var(--surface-page);
  display: none;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 160ms ease-out;
}
.mobile-nav.is-open { display: flex; transform: translateY(0); }
.mobile-nav .mn-header {
  height: 70px; display: flex; align-items: center; gap: 8px; padding: 0 20px;
  border-bottom: 1px solid var(--border-hairline);
}
.mobile-nav .mn-header .logo { color: var(--brand-primary); }
.mobile-nav .mn-header .logo svg { width: 39.019px; height: 22px; }
.mobile-nav .mn-header .spacer { flex: 1 0 0; }
.mobile-nav .mn-header .btn-primary { padding: 12px 18px; }
.mn-close {
  width: 44px; height: 44px; border-radius: 10px; border: none; background: none; cursor: pointer;
  position: relative;
}
.mn-close::before, .mn-close::after {
  content: ""; position: absolute; left: 12px; top: 21px; width: 20px; height: 1.75px; background: var(--text-primary);
}
.mn-close::before { transform: rotate(45deg); }
.mn-close::after { transform: rotate(-45deg); }
.mobile-nav .mn-rows { padding: 24px 20px; display: flex; flex-direction: column; }
.mobile-nav .mn-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 0; border-bottom: 1px solid var(--border-hairline); text-decoration: none; color: var(--text-primary);
}
.mobile-nav .mn-row .mn-row-text { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav .mn-row .mn-row-title { font-size: 20px; font-weight: 600; }
.mobile-nav .mn-row .mn-row-sub { font-size: 14px; color: var(--text-muted); }
.mobile-nav .mn-row .mn-row-arrow { font-size: 20px; color: var(--text-muted); flex-shrink: 0; }
.mobile-nav .mn-pinned { margin-top: auto; padding: 20px; border-top: 1px solid var(--border-hairline); }
.mobile-nav .mn-pinned .mn-pinned-note { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 12px; }

/* ---- footer ---- */
.site-footer {
  background: var(--surface-card);
  border-top: 1px solid var(--border-hairline);
}
.site-footer .wrap {
  padding-top: 40px; padding-bottom: 40px;
  display: flex; gap: 40px; align-items: flex-start;
}
.site-footer .f-brand { flex: 1 0 0; display: flex; flex-direction: column; gap: 10px; color: var(--brand-primary); }
.site-footer .f-brand svg { width: 42.566px; height: 24px; }
.site-footer .f-tagline { font-size: 14px; color: var(--text-muted); }
.site-footer .f-copyright { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.44px; color: var(--text-muted); }
.site-footer .f-col { display: flex; flex-direction: column; gap: 10px; white-space: nowrap; }
.site-footer .f-col-title { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.8px; color: var(--text-muted); }
.site-footer .f-col a { font-size: 14px; color: var(--text-primary); text-decoration: none; }
.site-footer .f-col a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .site-footer .wrap { flex-direction: column; padding: 32px 20px; gap: 20px; }
}

/* ---- hidden-until-real (rule 2: hide, don't reword) ---- */
.hidden-until-real { display: none !important; }

/* ---- home: hero ---- */
.hero .wrap { display: flex; flex-direction: column; gap: 40px; padding-top: 168px; padding-bottom: 168px; }
.hero h1 {
  margin: 0; font-weight: 600; font-size: 104px; line-height: 108px; letter-spacing: -4.16px; font-family: var(--font-display);
}
.hero h1 .dot-line { display: inline-flex; align-items: baseline; gap: 14px; }
.hero h1 .dot-line img { width: 26px; height: 26px; align-self: center; }
.hero .hero-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hero .hero-sub { font-weight: 400; font-size: 22px; line-height: 32px; letter-spacing: -0.11px; color: var(--text-muted); margin: 0; }
.hero .hero-actions { display: flex; align-items: center; gap: 20px; }
.hero .hero-actions .btn-primary { padding: 16px 28px; border-radius: 12px; font-size: 17px; }
.hero .watch-link { font-weight: 500; font-size: 16px; color: var(--text-primary); text-decoration: none; }
@media (max-width: 900px) {
  .hero .wrap { padding-top: 88px; padding-bottom: 88px; gap: 28px; }
  .hero h1 { font-size: 34px; line-height: 38px; letter-spacing: -1.02px; }
  .hero h1 .dot-line img { width: 12px; height: 12px; }
  .hero .hero-row { flex-direction: column; align-items: stretch; }
  .hero .hero-actions { flex-direction: column; gap: 14px; }
  .hero .hero-actions .btn-primary { width: 100%; }
  .hero .watch-link { text-align: center; }
}

/* ---- problem band (stays #1B2A6B in both themes) ---- */
.problem-band { background: var(--band-navy); }
.problem-band .wrap { display: flex; flex-direction: column; gap: 56px; }
.problem-band .pb-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.problem-band .pb-lines { font-weight: 600; font-size: 72px; line-height: 80px; letter-spacing: -2.16px; font-family: var(--font-display); }
.problem-band .pb-lines p { margin: 0; }
.problem-band .pb-lines .l1 { color: rgba(255,255,255,.45); }
.problem-band .pb-lines .l2 { color: rgba(255,255,255,.7); }
.problem-band .pb-lines .l3 { color: #fff; }
.problem-band .pb-caption-row { display: flex; align-items: center; gap: 24px; }
.problem-band .pb-caption-rule { height: 1px; width: 80px; background: rgba(255,255,255,.3); }
.problem-band .pb-caption {
  font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 13px; letter-spacing: 1.3px;
  color: rgba(255,255,255,.75); margin: 0;
}
/* PART B8: Figma is final, superseding CLU_HANDOFF §7's "marketing pill" spec - no fill, no border, no label,
   the orb stands alone on the band. Desktop: 216px, vertically centred, to the right of the three lines
   (home.desktop.244-3.reference.tsx, node 256:747/256:749). Mobile: 106px, under the lines and above the
   caption (home.mobile.246-72.reference.tsx, node 256:840/256:841). */
.solving-orb { display: block; flex-shrink: 0; }
@media (max-width: 900px) {
  .problem-band .pb-lines { font-size: 34px; line-height: 40px; letter-spacing: -0.68px; }
  .problem-band .pb-top { flex-direction: column; align-items: flex-start; gap: 32px; }
}

/* ---- for whom ---- */
.for-whom .wrap { display: flex; flex-direction: column; gap: 48px; }
.for-whom .fw-rows { display: flex; flex-direction: column; }
.for-whom .fw-row {
  display: flex; align-items: baseline; gap: 24px; padding: 36px 0; border-top: 1px solid var(--border-hairline);
  font-weight: 600; font-size: 56px; line-height: 62px; letter-spacing: -1.4px; font-family: var(--font-display);
}
.for-whom .fw-row:first-child { border-top: none; }
.for-whom .fw-row .subject { width: 520px; flex-shrink: 0; }
.for-whom .fw-row .predicate { flex: 1 0 0; font-weight: 400; color: var(--text-muted); }
@media (max-width: 900px) {
  .for-whom .fw-row { flex-direction: column; gap: 2px; padding: 22px 0; font-size: 28px; line-height: 33px; letter-spacing: -0.42px; }
  .for-whom .fw-row .subject { width: auto; }
}

/* ---- where we come in ---- */
.where-in { background: var(--surface-card); }
.where-in .wrap { display: flex; flex-direction: column; align-items: center; gap: 64px; text-align: center; }
.where-in h2 { font-weight: 600; font-size: 64px; line-height: 70px; letter-spacing: -1.92px; margin: 20px 0 0; font-family: var(--font-display); }
.finding-demo {
  width: 100%; max-width: 860px; text-align: left;
  background: var(--surface-page); border: 1px solid var(--border-hairline); border-radius: 24px; padding: 40px 44px;
  display: flex; flex-direction: column; gap: 22px;
}
.finding-demo .fd-meta { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.88px; color: var(--text-muted); display: flex; gap: 10px; }
.finding-demo .fd-headline { font-weight: 600; font-size: 30px; line-height: 38px; letter-spacing: -0.36px; margin: 0; }
/* PART B1 (CLU_DESIGN "The Highlight"): light is a 16px Saffron bar behind the LOWER HALF of the phrase, like a
   highlighter on a printout - not a full-height block - positioned under the baseline via a bottom-aligned
   background rather than a solid background-color; dark changes form to a 3px Saffron rule under the text. */
.finding-demo .fd-headline mark {
  background-color: transparent;
  background-image: linear-gradient(var(--accent-saffron), var(--accent-saffron));
  background-repeat: no-repeat;
  background-size: 100% 16px;
  background-position: 0 88%;
  color: var(--text-primary);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
:root[data-theme="dark"] .finding-demo .fd-headline mark {
  background-image: none;
  box-shadow: inset 0 -3px 0 0 var(--accent-saffron);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .finding-demo .fd-headline mark {
    background-image: none;
    box-shadow: inset 0 -3px 0 0 var(--accent-saffron);
  }
}
.finding-demo .fd-stat { display: flex; align-items: baseline; gap: 10px; }
.finding-demo .fd-stat .n { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 44px; letter-spacing: -0.88px; color: var(--brand-primary); }
.finding-demo .fd-stat .d { font-size: 16px; color: var(--text-muted); }
.finding-demo .fd-rows { display: flex; flex-direction: column; }
.finding-demo .fd-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border-hairline); }
.finding-demo .fd-row:first-child { border-top: none; }
.finding-demo .fd-row p { margin: 0; font-size: 17px; }
.fd-tag {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.44px; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.fd-tag.research { background: rgba(95,102,115,var(--tag-tint)); color: var(--status-research); }
.fd-tag.testable { background: rgba(123,97,217,var(--tag-tint)); color: var(--status-testable); }
.fd-tag.no-data { border: 1px dashed var(--text-muted); color: var(--text-muted); }
.where-in .one-line { display: flex; gap: 16px; font-weight: 500; font-size: 20px; letter-spacing: -0.1px; }
.where-in .one-line .muted { color: var(--text-muted); }
@media (max-width: 900px) {
  .where-in h2 { font-size: 32px; line-height: 37px; letter-spacing: -0.576px; }
  .finding-demo { padding: 22px 20px; border-radius: 18px; }
  .finding-demo .fd-headline { font-size: 20px; line-height: 26px; letter-spacing: -0.16px; }
  .finding-demo .fd-stat .n { font-size: 32px; }
  .where-in .one-line { flex-direction: column; gap: 4px; font-size: 16px; }
}

/* ---- the file ---- */
.the-file .wrap { display: flex; flex-direction: column; gap: 48px; }
.the-file .tf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.the-file h2 { font-weight: 600; font-size: 56px; line-height: 62px; letter-spacing: -1.4px; margin: 0; font-family: var(--font-display); }
.tf-shapes { display: flex; gap: 20px; align-items: stretch; }
.shape-card {
  flex: 1 0 0; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.shape-card .sc-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.88px; color: var(--brand-primary); }
.shape-card h3 { font-weight: 600; font-size: 22px; letter-spacing: -0.11px; margin: 0; }
.shape-card p.sc-desc { font-size: 14px; line-height: 21px; color: var(--text-muted); margin: 0; }
.sc-table { border: 1px solid var(--border-hairline); border-radius: 10px; overflow: hidden; }
.sc-table .sc-thead, .sc-table .sc-row { display: flex; padding: 9px 14px; gap: 4px; }
.sc-table .sc-thead { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.6px; color: var(--text-muted); border-bottom: 1px solid var(--border-hairline); }
.sc-table .sc-row { font-size: 13px; border-top: 1px solid var(--border-hairline); }
.sc-table .sc-row:first-of-type { border-top: none; }
.sc-table .sc-thead span, .sc-table .sc-row span { flex: 1 0 0; }
.sc-sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--text-muted); }
.sc-chip { background: var(--surface-page); border: 1px solid var(--border-hairline); border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 500; color: var(--text-primary); }
.the-file .tf-note { font-size: 18px; color: var(--text-muted); margin: 0; }
@media (max-width: 900px) {
  .the-file h2 { font-size: 30px; line-height: 35px; letter-spacing: -0.45px; }
  .the-file .tf-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tf-shapes { flex-direction: column; }
}

/* ---- in their words (video rail) — hidden until real, see rule 2 ---- */
.in-their-words { background: var(--surface-page); }
.itw-title { font-weight: 600; font-size: 56px; letter-spacing: -1.4px; margin: 0; font-family: var(--font-display); }

/* ---- pricing (shared between home strip and /pricing page) ---- */
.pricing-strip { background: var(--surface-card); } /* Figma node 244:223: bg-white, not the cream page surface */
.pricing-strip .wrap { display: flex; flex-direction: column; gap: 56px; }
.pricing-strip h2 { font-weight: 600; font-size: 104px; line-height: 108px; letter-spacing: -4.16px; margin: 0; font-family: var(--font-display); }
.pricing-strip .ps-sub { font-size: 22px; line-height: 32px; letter-spacing: -0.11px; color: var(--text-muted); margin: 0; }
/* Second-pass fix, Figma node 244:223 ("pricing v2"): name/price/description/button were run together with no
   gap ("Pro$0") - .plan-name and .plan-price had widths set, but only as if they were DIRECT children of
   .plan-row; they actually sat inside a .plan-name-price wrapper that had no desktop layout of its own (that
   wrapper's flex pairing was scoped to the mobile media query only), so the two just flowed as plain inline
   text with no gap. Rebuilt as a 4-column grid, positioned to the frame's own x-coordinates at 1440 (120/412/
   664/1320 design-px -> 0/292/544/1200 local, inside the 120px gutter .wrap already applies): name 292px wide,
   price 252px wide, description flexible, button auto-width flush against the row's right edge.
   .plan-name-price is `display:contents` at this width, so its two children (name, price) become direct grid
   items in columns 1-2 without an extra wrapper box - the SAME markup pairs them inline instead at mobile. */
.plan-rows { display: flex; flex-direction: column; border-top: 1px solid var(--border-hairline); }
.plan-row {
  /* Figma pricing v2 exact columns: name x=120 (row's own left edge, via .wrap's 120px inset), price x=412
     (120+292), description x=664 (412+252), button flush right at 1320. The deltas are already baked into
     the column widths (292, 252) - an extra column-gap on top of that double-counts the spacing and pushes
     every column past its real x (price landed at 436, description at 712). Gap must be 0. */
  display: grid; grid-template-columns: 292px 252px 1fr auto; column-gap: 0; align-items: center;
  min-height: 102px; padding: 0; border-bottom: 1px solid var(--border-hairline);
}
.plan-name-price { display: contents; }
/* Go-live tweak: this is body/UI-tier text (22px), not a display-tier heading, so it takes the plain Bricolage
   Grotesque family (opsz=14) like .plan-card h2 does for the same "Pro"/"Plus"/"Enterprise" names on the
   Pricing page - it had picked up var(--font-display) by mistake, inconsistent with that sibling component. */
.plan-row .plan-name { font-weight: 600; font-size: 22px; letter-spacing: -0.44px; }
.plan-row .plan-price { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 22px; letter-spacing: -0.22px; }
.plan-row .plan-desc { font-size: 15px; line-height: 22px; color: var(--text-muted); margin: 0; }
.plan-row .btn { flex-shrink: 0; }
.ps-note { font-size: 15px; color: var(--text-muted); margin: 0; }
@media (max-width: 900px) {
  .pricing-strip h2 { font-size: 56px; line-height: 60px; letter-spacing: -1.68px; }
  .plan-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 22px 0; min-height: 0; border-bottom: 1px solid var(--border-hairline); }
  .plan-row .plan-name-price { display: flex; justify-content: space-between; align-items: baseline; }
  .plan-row .plan-name { font-size: 22px; letter-spacing: -0.44px; }
  .plan-row .plan-price { font-size: 16px; letter-spacing: -0.08px; }
  .plan-row .btn { width: 100%; }
}

/* ---- pricing page cards (own layout, see docs/design/CLU_HANDOFF.md §4 Pricing page) ---- */
.pricing-page h1 { font-weight: 600; font-size: 46px; letter-spacing: -0.92px; margin: 0 0 48px; font-family: var(--font-display); }
.plan-cards { display: flex; gap: 20px; align-items: stretch; }
.plan-card {
  flex: 1 0 0; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 20px; padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.plan-card.is-highlight { border: 1.5px solid var(--border-strong); }
/* PART B3: a 28px slot every card reserves, whether or not it actually has a chip, so name/description/price/
   button/note line up across all three cards - only Plus's slot is ever non-empty. */
.plan-card .pc-chip-slot { height: 28px; }
.plan-card .pc-chip {
  display: inline-flex; align-items: center; background: var(--accent-saffron); color: var(--text-on-primary);
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.44px;
  padding: 5px 12px; border-radius: 999px; height: 100%;
}
.plan-card h2 { font-weight: 600; font-size: 24px; margin: 0; height: 30px; }
/* Second-pass fix: min-height alone let a genuinely longer description (Enterprise's, the only one that wraps
   to 2 lines instead of 1) push that card's box a few px taller than the other two, which then threw off
   everything below it - including the button - by that same few px. Every slot before the button is now a
   FIXED height (not a floor), generous enough for the longest real copy, so the button's own y is identical
   across all three cards regardless of how much a given card's text actually wraps. */
.plan-card .pc-desc { font-size: 15px; line-height: 21px; color: var(--text-muted); margin: 0; height: 42px; overflow: hidden; }
/* Bricolage Grotesque SemiBold, not mono - "Talk to us" (Enterprise) is a smaller size (.pc-price-small) so it
   reads as a phrase, not a number, while still filling the same vertical slot as the two real prices. */
.plan-card .pc-price { font-weight: 600; font-size: 52px; line-height: 58px; letter-spacing: -1.56px; margin: 0; height: 58px; font-family: var(--font-display); }
.plan-card .pc-price.pc-price-small { font-size: 38px; line-height: 46px; letter-spacing: -1.14px; height: 58px; display: flex; align-items: center; }
.plan-card .pc-detail { font-size: 15px; line-height: 21px; color: var(--text-muted); margin: 0; height: 42px; overflow: hidden; }
.plan-card .btn { margin-top: auto; }
/* Second-pass fix, part 2: the note sits AFTER the button in the same flex column, so its height was still
   free to vary (Enterprise's note is the only one that wraps to 2 lines) - with align-items:stretch making
   every card the same overall height, that extra note height was eating into the auto-margin *above* the
   button instead, pulling Enterprise's button 18-19px higher than Pro/Plus. Same fix as pc-desc/pc-detail:
   a fixed 2-line slot (not a floor) so every card's post-button content takes identically as much room. */
.plan-card .pc-note { font-size: 13px; line-height: 19.5px; color: var(--text-muted); margin: 8px 0 0; height: 39px; overflow: hidden; }
@media (max-width: 900px) {
  .plan-cards { flex-direction: column; }
}

/* ---- how it works ---- */
.hiw-intro { font-size: 22px; line-height: 32px; color: var(--text-muted); max-width: 66ch; margin: 24px 0 0; }
/* PART B4: two columns per docs/design/site/how-it-works.desktop.light.244-610.png - a fixed-width left column
   (mono number above the name) and a wider body column, gap 48; FAQ mirrors it with a narrower question column. */
.hiw-steps { display: flex; flex-direction: column; margin-top: 48px; }
.hiw-step { display: flex; gap: 48px; padding: 32px 0; border-top: 1px solid var(--border-hairline); }
.hiw-step:first-child { border-top: none; }
.hiw-step .step-left { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.hiw-step .step-n { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 14px; color: var(--brand-primary); }
.hiw-step h3 { font-weight: 600; font-size: 28px; margin: 0; }
.hiw-step .step-body { flex: 1 0 0; font-size: 17px; line-height: 27px; color: var(--text-muted); margin: 0; }
.faq-band { background: var(--surface-soft); }
.faq-band h2 { font-weight: 600; font-size: 40px; letter-spacing: -0.8px; margin: 8px 0 0; font-family: var(--font-display); }
.faq-list { margin-top: 40px; display: flex; flex-direction: column; }
.faq-item { display: flex; gap: 32px; padding: 24px 0; border-top: 1px solid var(--border-hairline); }
.faq-item:first-child { border-top: none; }
.faq-item .faq-q { font-weight: 600; font-size: 20px; margin: 0; width: 340px; flex-shrink: 0; }
.faq-item .faq-a { flex: 1 0 0; font-size: 16px; line-height: 26px; color: var(--text-muted); margin: 0; }
@media (max-width: 900px) {
  .hiw-step { flex-direction: column; gap: 8px; }
  .hiw-step .step-left { width: auto; }
  .faq-item { flex-direction: column; gap: 8px; }
  .faq-item .faq-q { width: auto; }
}
.hiw-close { text-align: center; background: var(--surface-card); }
.hiw-title, .hiw-close h2 { font-weight: 600; font-size: 48px; letter-spacing: -0.96px; margin: 0; font-family: var(--font-display); }
.hiw-close p { font-size: 18px; color: var(--text-muted); max-width: 60ch; margin: 16px auto 32px; }
.hiw-close .close-actions { display: flex; gap: 16px; justify-content: center; }
@media (max-width: 900px) {
  .hiw-close .close-actions { flex-direction: column; }
}

/* ---- 404 ---- */
.page-404 { min-height: 60vh; display: flex; align-items: center; }
.page-404 .wrap { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page-404 h1 { font-weight: 600; font-size: 48px; letter-spacing: -0.96px; margin: 0; font-family: var(--font-display); }
.page-404 p { font-size: 18px; color: var(--text-muted); max-width: 50ch; margin: 0 0 16px; }
.page-404 .actions { display: flex; gap: 16px; }
@media (max-width: 900px) { .page-404 .actions { flex-direction: column; width: 100%; } }

/* ---- legal pages (privacy / terms) ---- */
.legal-head { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.legal-head .updated { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 12px; letter-spacing: 0.96px; color: var(--text-muted); }
/* -1.2px, not the generic -2%/-0.96px banded value: docs/design/legal/privacy.desktop.244-912.reference.tsx's own
   "Privacy Policy" title is measured tracking-[-1.2px] at this exact size - the real source wins over the table. */
.legal-head h1 { font-weight: 600; font-size: 48px; line-height: 56px; letter-spacing: -1.2px; margin: 0; font-family: var(--font-display); }
.legal-head .legal-intro { font-size: 18px; line-height: 28px; color: var(--text-muted); margin: 0; }
.legal-cards { display: flex; gap: 12px; max-width: 820px; margin-top: 40px; }
.legal-card { flex: 1 0 0; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 12px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.legal-card .lc-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.88px; color: var(--text-muted); }
.legal-card .lc-title { font-weight: 600; font-size: 20px; letter-spacing: -0.2px; margin: 0; }
.legal-card .lc-body { font-size: 14px; color: var(--text-muted); margin: 0; }
.legal-layout { display: flex; gap: 120px; align-items: flex-start; padding: 80px 0 96px; }
.legal-toc {
  width: 260px; flex-shrink: 0; position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: 6px;
}
.legal-toc .toc-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.88px; color: var(--text-muted); margin-bottom: 4px; }
.legal-toc a {
  display: flex; gap: 10px; padding: 5px 0 5px 14px; border-left: 1px solid var(--border-hairline);
  font-size: 14px; color: var(--text-muted); text-decoration: none;
}
.legal-toc a .toc-n { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--text-muted); }
.legal-toc a.is-active { border-left: 2px solid var(--brand-primary); color: var(--text-primary); font-weight: 500; }
.legal-toc a.is-active .toc-n { color: var(--text-muted); }
.legal-main { flex: 1 0 0; max-width: 820px; display: flex; flex-direction: column; gap: 40px; }
/* a plain <section> tag reused for TOC-anchoring; override the page-level `section{padding:160px 0}`
   rule fully (only padding-top was overridden before, leaving a stray 160px padding-bottom under
   every legal section - caught via the Addendum 4 screenshot pass). */
.legal-section { padding: 12px 0 0; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 96px; }
.legal-section .ls-head { display: flex; gap: 12px; align-items: baseline; }
.legal-section .ls-head .ls-n { font-family: "IBM Plex Mono", monospace; font-size: 14px; color: var(--text-muted); }
.legal-section h2 { font-weight: 600; font-size: 24px; letter-spacing: -0.24px; margin: 0; }
.legal-section p { font-size: 16px; line-height: 26px; margin: 0; }
.legal-section .ls-list { display: flex; flex-direction: column; gap: 10px; }
.legal-section .ls-list .ls-item { display: flex; gap: 12px; font-size: 16px; line-height: 26px; }
.legal-section .ls-list .ls-item .bullet { color: var(--text-muted); flex-shrink: 0; }
.legal-section .ls-steps .ls-step { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border-hairline); font-size: 16px; line-height: 26px; }
.legal-section .ls-steps .ls-step:first-child { border-top: none; }
.legal-section .ls-steps .ls-step .step-n { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--brand-primary); width: 28px; flex-shrink: 0; }
.legal-section .ls-detail-row { display: flex; gap: 24px; padding: 12px 0; border-top: 1px solid var(--border-hairline); }
.legal-section .ls-detail-row:first-child { border-top: none; }
.legal-section .ls-detail-row .ls-detail-label { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.88px; color: var(--text-muted); width: 200px; flex-shrink: 0; }
.toc-disclosure { display: none; }
@media (max-width: 900px) {
  .legal-layout { flex-direction: column; gap: 0; padding: 24px 0 48px; }
  .legal-toc { display: none; }
  .toc-disclosure {
    display: block; border: 1px solid var(--border-hairline); border-radius: 12px; margin-bottom: 24px; background: var(--surface-card);
  }
  .toc-disclosure summary {
    cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 500; font-size: 14px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .toc-disclosure summary::-webkit-details-marker { display: none; }
  .toc-disclosure summary::after { content: "▾"; color: var(--text-muted); }
  .toc-disclosure[open] summary::after { content: "▴"; }
  .toc-disclosure .toc-list { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 2px; }
  .toc-disclosure a { padding: 8px 0; font-size: 14px; color: var(--text-muted); text-decoration: none; border-top: 1px solid var(--border-hairline); }
  .toc-disclosure a:first-child { border-top: none; }
  .legal-head h1 { font-size: 32px; line-height: 38px; }
  .legal-cards { flex-direction: column; }
}

/* ---- no-JS fallback for the theme toggle icon set is inline SVG per-page, not here ---- */