/* ==========================================================================
   CIRCA · site design system v5 — "instrument, editorial"
   Evolves v4: same achromatic ladder (7 → 22 %), same single amber accent
   (hsl 40 95 % 55 %), same logo. What changes is the voice:
   · Geist (sans) carries large editorial display type
   · Geist Mono is reserved for the instrument — labels, data, controls, nav
   · a 12-column grid made visible with hairline guides
   · motion is scroll-led and masked: things rise and settle into place.
   Nothing rotates, nothing bounces. Green appears only as a status signal.
   Layers: reset → tokens → base → components → chrome → pages → motion
   ========================================================================== */

@layer reset, tokens, base, components, chrome, pages, motion;

/* ─────────────── RESET ─────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, svg, canvas, video { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  [hidden] { display: none !important; }
  table { border-collapse: collapse; }
}

/* ─────────────── TOKENS ─────────────── */
@layer tokens {
  :root {
    color-scheme: dark;

    /* Neutrals — the circa.ai ladder, no hue */
    --bg:        hsl(0 0% 7%);
    --bg-2:      hsl(0 0% 8.5%);
    --bg-3:      hsl(0 0% 5.5%);
    --surface:   hsl(0 0% 10%);
    --surface-2: hsl(0 0% 12%);
    --surface-3: hsl(0 0% 15%);
    --surface-4: hsl(0 0% 18%);
    --line:      hsl(0 0% 100% / 0.07);
    --line-2:    hsl(0 0% 100% / 0.11);
    --line-3:    hsl(0 0% 100% / 0.18);
    --guide:     hsl(0 0% 100% / 0.035);

    --text:   hsl(0 0% 98%);
    --text-2: hsl(0 0% 75%);
    --text-3: hsl(0 0% 55%);
    --text-4: hsl(0 0% 53%);   /* the floor for readable text: 5.2:1 on --bg, 4.9:1 on --surface, 4.6:1 on --surface-2 (was 50%, which fell to 4.2:1 inside cards and tables) */

    /* Accent — Circa amber */
    --amber:     hsl(40 95% 55%);
    --amber-90:  hsl(40 95% 55% / 0.9);
    --amber-25:  hsl(40 95% 55% / 0.25);
    --amber-15:  hsl(40 95% 55% / 0.15);
    --amber-08:  hsl(40 95% 55% / 0.08);
    --amber-04:  hsl(40 95% 55% / 0.04);

    /* Product colours — only inside product visuals (graph nodes, selection) */
    --node:   #44507e;
    --select: #3c88e0;

    /* Status only */
    --ok: hsl(150 70% 45%);

    --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --f-sans: "Geist", "Inter", system-ui, -apple-system, sans-serif;

    /* Type scale — display sizes track the viewport */
    --fs-display: clamp(3.1rem, 0.6rem + 8.6vw, 10.75rem);
    --fs-h1:      clamp(2.7rem, 1rem + 5.4vw, 7rem);
    --fs-h1-half: clamp(2.5rem, 1.2rem + 3.6vw, 5.25rem);
    --fs-h2:      clamp(2.1rem, 1.1rem + 3vw, 4.5rem);
    --fs-h3:      clamp(1.25rem, 1.05rem + .5vw, 1.6rem);
    --fs-lede:    clamp(1.08rem, 1rem + .35vw, 1.3rem);
    --fs-stat:    clamp(2.6rem, 1.5rem + 3.4vw, 5rem);

    --r-xs: 3px; --r-sm: 5px; --r-md: 7px; --r-lg: 10px; --r-xl: 14px; --r-full: 999px;

    --ease: cubic-bezier(.16, 1, .3, 1);      /* expo-out: settles, never overshoots */
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur: 260ms;
    --wrap: 1360px;
    --gutter: clamp(16px, 4vw, 48px);
    --col-gap: clamp(16px, 2vw, 32px);
    --header-h: 72px;
  }
}

/* ─────────────── BASE ─────────────── */
@layer base {
  html { scroll-padding-top: calc(var(--header-h) + 24px); background: var(--bg); }   /* dark from the first frame and in overscroll, never the browser's white canvas */
  html:not(.lenis) { scroll-behavior: smooth; }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-stopped { overflow: clip; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  body {
    background: var(--bg); color: var(--text-2);
    font: 400 16px/1.6 var(--f-sans);
    -webkit-font-smoothing: antialiased; overflow-x: clip;
    font-feature-settings: "ss01", "cv11";
  }
  ::selection { background: var(--amber); color: var(--bg); }
  :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: var(--r-sm); }

  h1, h2, h3, h4 { color: var(--text); text-wrap: balance; }
  p, li, dd { text-wrap: pretty; }
  em { font-style: normal; color: var(--amber); }
  b, strong { font-weight: 550; color: var(--text); }

  .display, .h1, .h2, .h3, .h4 { font-family: var(--f-sans); font-weight: 500; }
  .display { font-size: var(--fs-display); line-height: .9; letter-spacing: -0.058em; }
  .h1 { font-size: var(--fs-h1); line-height: .94; letter-spacing: -0.052em; }
  .h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.045em; }
  .h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.03em; }
  .h4 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.02em; }
  .lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--text-2); max-width: 54ch; letter-spacing: -.01em; }
  .muted { color: var(--text-3); }
  .small { font-size: 14px; }
  .mono { font-family: var(--f-mono); letter-spacing: -0.02em; }
  .kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber);
    &::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--amber); }
  }

  .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
  .skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--amber); color: var(--bg); padding: 8px 14px; border-radius: var(--r-md); }
  .skip:focus { top: 12px; }

  /* Section index: every content section numbers itself (01, 02 …) in the kicker */
  main { counter-reset: sec; }
  .section { counter-increment: sec; }
}

/* ─────────────── COMPONENTS ─────────────── */
@layer components {
  .ic { width: 18px; height: 18px; flex: none; }
  c-icon { display: contents; }

  /* Buttons — mono caps, a label that rolls on hover (text-shadow twin, no extra copy) */
  .btn {
    --h: 44px;
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: var(--h); padding-inline: 20px; border-radius: var(--r-md);
    font: 500 11.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur);
    & .ic { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
    &:hover .ic { transform: translateX(3px); }
  }
  .btn-sm { --h: 34px; padding-inline: 14px; font-size: 10.5px; }
  .btn-lg { --h: 56px; padding-inline: 30px; font-size: 12px; }
  .btn-primary { background: var(--amber); color: var(--bg); &:hover { background: hsl(42 100% 68%); } }
  .btn-inverse { background: var(--text); color: var(--bg); &:hover { background: hsl(0 0% 88%); } }
  .btn-soft { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-3); &:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .3); } }
  .btn-quiet { color: var(--text-2); &:hover { color: var(--text); background: var(--surface-2); } }

  .link {
    display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.2 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text);
    background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; padding-bottom: 3px;
    transition: color var(--dur), background-size 500ms var(--ease);
    & .ic { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); }
    &:hover { color: var(--amber); background-size: 100% 1px; & .ic { transform: translateX(3px); } }
  }
  .lede .link, p .link { text-transform: none; letter-spacing: -.01em; font-size: .85em; }
  .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; &.center { justify-content: center; } }

  .tag {
    display: inline-flex; align-items: center; height: 20px; padding-inline: 7px; border-radius: var(--r-xs); vertical-align: middle;
    font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-3);
    &.amber { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-25); background: var(--amber-08); }
    &.ok { color: var(--ok); box-shadow: inset 0 0 0 1px hsl(150 70% 45% / .3); }
  }
  .chip {
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
    height: 32px; padding-inline: 14px; border-radius: var(--r-full); font: 500 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
    box-shadow: inset 0 0 0 1px var(--line-2); transition: all var(--dur) var(--ease);
    &:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-3); }
    &.on, &[aria-pressed="true"] { color: var(--bg); background: var(--text); box-shadow: none; }
  }

  .tile {
    display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
    color: var(--text-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
    transition: color var(--dur), box-shadow var(--dur), background var(--dur);
    &.lg { width: 52px; height: 52px; & .ic { width: 22px; height: 22px; } }
    &.sm { width: 28px; height: 28px; border-radius: var(--r-sm); & .ic { width: 14px; height: 14px; } }
  }
  :is(a, .card):hover > .tile, :is(a, .card):hover .top > .tile { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-25); background: var(--amber-08); }

  .card {
    --mx: 50%; --my: 0%;
    position: relative; isolation: isolate; border-radius: var(--r-lg); background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--dur) var(--ease), background var(--dur);
    &::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
      background: radial-gradient(480px circle at var(--mx) var(--my), hsl(40 95% 55% / .06), transparent 45%); opacity: 0; transition: opacity 400ms var(--ease); }
  }
  a.card:hover, .card.lift:hover { box-shadow: inset 0 0 0 1px var(--line-3); &::before { opacity: 1; } }
  .pad { padding: clamp(22px, 3vw, 36px); }

  /* Features — an editorial ruled grid, not a wall of cards */
  .grid:has(> .feature) { gap: 0; counter-reset: feat; border-top: 1px solid var(--line-2); }
  .feature {
    counter-increment: feat;
    display: flex; flex-direction: column; gap: 14px; padding: 36px 32px 44px;
    background: transparent; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--line-2);
    background-image: linear-gradient(var(--amber) 0 0); background-size: 0 1px; background-position: 0 0; background-repeat: no-repeat;
    transition: background-size 700ms var(--ease);
    &::after { content: counter(feat, decimal-leading-zero); position: absolute; top: 38px; right: 32px; font: 500 11px var(--f-mono); color: var(--text-4); letter-spacing: .06em; }
    & .tile { margin-bottom: 18px; }
    & .h4 { font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); letter-spacing: -.03em; }
    & p { color: var(--text-3); font-size: 15px; max-width: 34ch; }
    &:hover { background-size: 100% 1px; & .tile { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-25); background: var(--amber-08); } }
  }
  .g3 > .feature { &:not(:nth-child(3n+1)) { box-shadow: -1px 0 0 var(--line); } }
  .g3 > .feature:nth-child(3n+1)::after { right: 32px; }

  .section { padding-block: clamp(96px, 12vw, 180px); position: relative; }
  .section.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
  .section.tight { padding-block: clamp(48px, 6vw, 80px); }

  /* Section head — kicker in the left margin column, statement on the right */
  .section-head {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--col-gap); row-gap: 22px; align-items: start;
    margin-bottom: clamp(48px, 6vw, 96px);
    & > * { grid-column: 2; }
    & > .kicker { grid-column: 1; grid-row: 1 / span 4; padding-top: .55em; }
    & .h2 { max-width: 20ch; }
    & .lede { max-width: 58ch; }
    &.center { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 900px; margin-inline: auto;
      & > * { grid-column: 1; } & > .kicker { grid-row: auto; padding-top: 0; } }
    &.row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; & > div { display: grid; gap: 16px; max-width: 720px; } }
  }
  .section .section-head > .kicker::before, .section .section-head.center > .kicker::before {
    content: counter(sec, decimal-leading-zero); width: auto; height: auto; background: none;
    color: var(--amber); padding-right: 10px; margin-right: 2px; box-shadow: 1px 0 0 var(--line-3);
  }
  .section .section-head > .kicker { color: var(--text-3); }

  .grid { display: grid; gap: 14px; }
  .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 7vw, 120px); align-items: center;
    &.rev > :first-child { order: 2; }
    & .copy { display: grid; gap: 24px; justify-items: start; } }

  /* Hero backdrop — the circa.ai square grid + one amber pool of light */
  .gridbg { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
  .gridbg::before { content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(hsl(0 0% 100% / .03) 1px, transparent 1px), linear-gradient(90deg, hsl(0 0% 100% / .03) 1px, transparent 1px);
    background-size: 40px 40px; background-position: center top;
    mask: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%); }
  .gridbg::after { content: ""; position: absolute; left: 50%; top: -38%; width: min(1400px, 140vw); aspect-ratio: 1.8; translate: -50% var(--pool-y, 0);
    background: radial-gradient(closest-side, hsl(40 95% 55% / .11), hsl(40 95% 55% / .03) 55%, transparent); }

  .checks { display: grid; gap: 0; border-top: 1px solid var(--line);
    & li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--text-2); }
    & li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: var(--r-xs);
      background: var(--amber-15) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7B32A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center/11px no-repeat; } }

  /* Steps — big numerals on a ruled line; a scroll scene can light them in turn */
  .steps { display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--line-2);
    & li { --p: 0; counter-increment: step; position: relative; display: grid; gap: 12px; align-content: start; padding: 36px 32px 48px; }
    & li + li { box-shadow: -1px 0 0 var(--line); }
    & li::before { content: counter(step, decimal-leading-zero); font: 500 clamp(3.4rem, 2rem + 4vw, 6.5rem)/.85 var(--f-sans); letter-spacing: -.07em; color: var(--surface-4); margin-bottom: 28px; transition: color 600ms var(--ease); }
    & li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--amber); transform-origin: left; transform: scaleX(var(--p)); }
    & li:hover::before, & li.on::before { color: var(--text); }
    & li.on::before { color: var(--amber); }
    @media (prefers-reduced-motion: reduce) { & li::before, & li:hover::before { color: var(--amber); transition: none; } & li::after { transform: none; } }
    & .h3 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.7rem); }
    & p { color: var(--text-3); font-size: 15px; max-width: 36ch; } }

  .stats { display: flex; flex-wrap: wrap; gap: 24px clamp(40px, 6vw, 88px);
    & dt { font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
    & dd { font: 500 var(--fs-stat)/.9 var(--f-sans); color: var(--text); margin-top: 14px; letter-spacing: -.06em; font-variant-numeric: tabular-nums; } }

  .faq { display: grid; max-width: 980px; margin-inline: auto; border-top: 1px solid var(--line-2);
    & details { border-bottom: 1px solid var(--line-2); }
    & summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 2px; cursor: pointer; list-style: none;
      font: 500 clamp(1.05rem, .95rem + .45vw, 1.35rem)/1.3 var(--f-sans); letter-spacing: -.025em; color: var(--text); transition: color var(--dur); }
    & summary:hover { color: var(--amber); }
    & summary::-webkit-details-marker { display: none; }
    & summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-3);
      background: linear-gradient(currentColor 0 0) center / 10px 1.5px no-repeat, linear-gradient(currentColor 0 0) center / 1.5px 10px no-repeat;
      color: var(--text-2); transition: transform 500ms var(--ease), background-color var(--dur); }
    & details[open] summary::after { transform: rotate(45deg); color: var(--bg); background-color: var(--amber); box-shadow: none; }
    & details > div { padding: 0 2px 30px; color: var(--text-3); font-size: 16px; max-width: 68ch; }
    & details > div { overflow: hidden; } }
  @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

  .form { display: grid; gap: 18px; }
  .form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .field { display: grid; gap: 8px;
    & label { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
    & input, & select, & textarea { width: 100%; padding: 14px 16px; border-radius: var(--r-md); border: 0; background: var(--bg); font-size: 16px; color: var(--text);
      box-shadow: inset 0 0 0 1px var(--line-2); outline: 0; transition: box-shadow var(--dur); }
    & select { appearance: none; background: var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round'><path d='M3 4.5l3 3 3-3'/></svg>") right 14px center / 12px no-repeat; }
    & textarea { min-height: 140px; resize: vertical; }
    & :is(input, select, textarea):focus { box-shadow: inset 0 0 0 1px var(--amber), 0 0 0 4px var(--amber-15); } }
  .form-ok { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px hsl(150 70% 45% / .3); color: var(--ok); font: 500 13px var(--f-mono); }
  .form-err { padding: 12px 14px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px hsl(0 80% 60% / .35); color: hsl(0 85% 72%); font: 500 13px var(--f-mono);
    & a { text-decoration: underline; } }
  .btn:disabled { opacity: .55; cursor: progress; }   /* while a form is sending */
  .btn-primary:disabled:hover { background: var(--amber); }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  /* Visually hidden, still read by screen readers (state words in charts and tables, "opens in a new tab") */
  .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* Cookie banner (js/consent.js). Rough draft; OPEN (2026-11-02): design is Min's call.
     Accept and Decline look the same on purpose: declining must be as easy as accepting. */
  /* Draft 2 (2026-11-02): modeled on the app's sign-in panel, square corners and outline buttons. */
  .consent { position: fixed; z-index: 60; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(400px, calc(100vw - 32px));
    background: hsl(225 4% 18.5%); border: 1px solid hsl(0 0% 100% / .12); box-shadow: 0 16px 48px hsl(0 0% 0% / .55);
    & .consent-head { display: flex; align-items: center; height: 48px; padding-inline: 16px; border-bottom: 1px solid hsl(0 0% 100% / .12);
      font-size: 14px; font-weight: 500; color: hsl(0 0% 100% / .9); }
    & .consent-body { display: grid; gap: 14px; padding: 16px; }
    & p { margin: 0; font-size: 12.5px; line-height: 1.55; color: hsl(0 0% 100% / .65); }
    & p a { color: hsl(0 0% 100% / .85); text-decoration: underline; text-underline-offset: 2px; }
    & p a:hover { color: var(--amber); }
    & .consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    & .consent-actions button { height: 38px; padding-inline: 14px; text-align: left; font-size: 14px; color: hsl(0 0% 100% / .7);
      background: hsl(225 6% 13.5%); border: 1px solid hsl(0 0% 100% / .12); cursor: pointer; transition: background var(--dur), color var(--dur);
      &:hover, &:focus-visible { background: var(--amber); color: var(--bg); border-color: var(--amber); outline: 0; } } }

  .crumbs { display: flex; flex-wrap: wrap; gap: 10px; font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-4);
    & a:hover { color: var(--text); } & span[aria-hidden] { opacity: .5; } }

  /* Product windows — flat, precise, with the instrument's corner brackets */
  .mock { position: relative; z-index: 1; border-radius: var(--r-lg); overflow: hidden; text-align: left; background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2), 0 60px 120px -50px hsl(0 0% 0% / .9), 0 0 0 1px hsl(0 0% 0% / .4); }
  .mock-bar { display: flex; align-items: center; gap: 6px; height: 40px; padding-inline: 16px; border-bottom: 1px solid var(--line); background: var(--bg-2);
    & i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-4); }
    & i:first-child { background: var(--amber); }
    & span { margin-left: 12px; font: 500 10.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } }
  .mock-body { padding: 18px; display: grid; gap: 12px; }
  .tbl { display: grid; font-size: 13px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
  .m-row { display: grid; grid-template-columns: 1fr 1.2fr 88px; gap: 12px; align-items: center; padding: 11px 12px; border-top: 1px solid var(--line);
    & > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    & > span:first-child { color: var(--text); }
    & > span:nth-child(2) { color: var(--text-3); }
    & > span small { display: block; margin-top: 2px; font: 500 11px var(--f-mono); color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    &.head { border-top: 0; background: var(--bg-2); padding-block: 9px; font: 500 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); & > span { color: inherit !important; } }
    &.sel { background: var(--amber-08); box-shadow: inset 2px 0 0 var(--amber); }
    &.sel > span:nth-child(2), &.sel > span small { color: var(--text-2); } }   /* the amber tint lifts the background: the grey lines brighten to keep 4.5:1 */
  .conf { display: flex; align-items: center; gap: 8px;
    & i { flex: 1; height: 3px; border-radius: 2px; background: var(--surface-4); position: relative; overflow: hidden; }
    & i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v)); background: var(--ok); animation: grow 1.4s var(--ease) both; }
    & b { font: 500 11px var(--f-mono); width: 20px; text-align: right; color: var(--text-2); }
    &.low i::after { background: var(--amber); } &.low b { color: var(--amber); } }
  .conf.plain i::after { background: var(--text-3); }   /* a share, not a confidence score: neutral, no green (the publisher sales report) */

  /* Editorial cards for listings */
  .post { display: flex; flex-direction: column; gap: 12px; padding: 0 0 26px; background: none; box-shadow: none; border-radius: 0;
    & .art { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 8px; transition: box-shadow var(--dur); }
    & .art::before { transition: transform 1.2s var(--ease); }
    & .meta { font: 500 10.5px var(--f-mono); color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; }
    & h3 { font-size: clamp(1.15rem, 1rem + .45vw, 1.45rem); letter-spacing: -.03em; line-height: 1.2; transition: color var(--dur); }
    & p { font-size: 14px; color: var(--text-3); }
    &::before { display: none; } }
  a.post:hover { box-shadow: none; & h3 { color: var(--amber); } & .art { box-shadow: inset 0 0 0 1px var(--line-3); } & .art::before { transform: scale(1.08); } }
  /* Generative covers — monochrome line art, one amber point */
  .art::before, .art::after { content: ""; position: absolute; }
  .art.m1::before { inset: 0; background: repeating-radial-gradient(circle at 30% 70%, transparent 0 16px, hsl(0 0% 100% / .06) 16px 17px); }
  .art.m1::after, .art.m3::after { width: 6px; height: 6px; background: var(--amber); }
  .art.m1::after { left: calc(30% - 3px); top: calc(70% - 3px); }
  .art.m2::before { inset: 0; background: repeating-linear-gradient(90deg, transparent 0 20px, hsl(0 0% 100% / .045) 20px 21px), repeating-linear-gradient(0deg, transparent 0 20px, hsl(0 0% 100% / .045) 20px 21px); }
  .art.m2::after { left: 10%; right: 10%; top: 20%; bottom: 20%; border-bottom: 1px solid var(--amber); clip-path: polygon(0 100%, 0 70%, 15% 55%, 30% 65%, 45% 35%, 60% 45%, 75% 15%, 100% 5%, 100% 100%); background: linear-gradient(var(--amber-15), transparent); }
  .art.m3::before { inset: 0; margin: auto; width: 46%; aspect-ratio: 1; height: auto; border-radius: 50%; box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .12), 0 0 0 24px hsl(0 0% 100% / .02), 0 0 0 25px hsl(0 0% 100% / .07); }
  .art.m3::after { inset: 0; margin: auto; }
  .art.m4::before { inset: 22%; background: linear-gradient(90deg, hsl(0 0% 100% / .1) 1px, transparent 1px) 0 0 / 25% 100%, linear-gradient(hsl(0 0% 100% / .1) 1px, transparent 1px) 0 0 / 100% 33.3%; box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .1); }
  .art.m4::after { left: calc(47% - 3px); top: calc(55% - 3px); width: 6px; height: 6px; background: var(--amber); }
  .art.m5::before { inset: 0; background: radial-gradient(circle, hsl(0 0% 100% / .18) 1px, transparent 1.5px) 0 0 / 16px 16px; mask: radial-gradient(circle at 50% 50%, #000, transparent 70%); }
  .art.m5::after { left: 58%; top: 40%; width: 6px; height: 6px; background: var(--amber); box-shadow: 0 0 0 6px var(--amber-15); }
  .art.m6::before { inset: 24% 20%; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
  .art.m6::after { left: 26%; right: 44%; top: 34%; height: 5px; background: var(--amber); box-shadow: 0 14px 0 hsl(0 0% 100% / .1), 0 28px 0 hsl(0 0% 100% / .1); }

  .note { font: 500 11px var(--f-mono); color: var(--text-4); letter-spacing: -.01em; }

  /* Publisher marquee (decorative echo of the publisher list) */
  .marquee { overflow: hidden; border-block: 1px solid var(--line); margin-bottom: clamp(40px, 5vw, 72px); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite;
    & span { display: inline-flex; align-items: center; gap: clamp(28px, 4vw, 64px); padding: 26px clamp(14px, 2vw, 32px); font: 500 clamp(1.6rem, 1rem + 2.4vw, 3.4rem)/1 var(--f-sans); letter-spacing: -.05em; color: var(--text-3); white-space: nowrap; }
    & span::after { content: ""; width: 10px; height: 10px; background: var(--amber); } }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}

/* ─────────────── CHROME ─────────────── */
@layer chrome {
  .hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); transition: background 400ms var(--ease), box-shadow 400ms var(--ease), translate 600ms var(--ease);
    &[data-scrolled], &:has(.mega.open) { background: hsl(0 0% 7% / .72); backdrop-filter: blur(22px) saturate(1.4); box-shadow: inset 0 -1px 0 var(--line); }
    &[data-hidden]:not(:has(.mega.open)):not(:focus-within) { translate: 0 -100%; } }
  .hdr-bar { height: 100%; width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
  .brand { justify-self: start; display: block; & img { height: 22px; width: auto; } }
  /* the logo and the Changelog tag are one left-aligned group, so the three-part grid still centres the nav exactly where it was */
  .hdr-left { justify-self: start; display: flex; align-items: center; gap: 12px; min-width: 0; }
  .hdr-tag { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-full); border: 1px dashed hsl(40 95% 55% / .4);
    font: 500 10px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: hsl(40 95% 55% / .8);
    transition: color var(--dur), background var(--dur), border-color var(--dur);
    &:hover, &:focus-visible, &[aria-current] { color: var(--amber); border-color: var(--amber); background: var(--amber-08); } }
  .hdr-left .brand { flex: none; }   /* the logo never shrinks for the tag */
  @media (max-width: 372px) { .hdr-tag { display: none; } }   /* from 373px logo + tag fit their column: 20px or more to "Start free" (the bar's gap); narrower, the logo would have to shrink */
  .nav ul { display: flex; gap: 2px; }
  .nav-trigger, .nav-link {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding-inline: 13px; border-radius: var(--r-full);
    font: 500 11.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); transition: color var(--dur), background var(--dur);
    &:hover, &[aria-expanded="true"] { color: var(--text); background: var(--surface-2); }
    &[aria-current], &[data-current] { color: var(--amber); } }
  .chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: .6; transition: transform var(--dur) var(--ease);
    [aria-expanded="true"] > & { transform: rotate(180deg); } }
  .hdr-actions { justify-self: end; display: flex; gap: 6px; align-items: center; }
  .hdr-actions .btn { --h: 38px; }
  .burger { display: none; width: 40px; height: 40px; border-radius: var(--r-full); box-shadow: inset 0 0 0 1px var(--line-2); place-content: center; gap: 5px;
    & span { display: block; width: 16px; height: 1.5px; background: var(--text); } }
  .scroll-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--amber); transform-origin: left; transform: scaleX(var(--sp, 0)); pointer-events: none; }

  .mega { --x: 0px; --w: 600px; --h: 300px; position: absolute; top: calc(100% - 4px); left: 0; width: 100%; height: 0; pointer-events: none; }
  .mega-bg { position: absolute; top: 0; left: var(--x); width: var(--w); height: var(--h); border-radius: var(--r-xl);
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -20px hsl(0 0% 0% / .85);   /* solid: a nested backdrop-filter inside the blurred header renders see-through in Firefox */
    opacity: 0; transform: translateY(-6px); transition: left 420ms var(--ease), width 420ms var(--ease), height 420ms var(--ease), opacity 200ms, transform 300ms var(--ease);
    .mega.open & { opacity: 1; transform: none; pointer-events: auto; } }
  .mega.no-anim .mega-bg { transition: opacity 200ms, transform 300ms var(--ease); }
  .mm-panel { position: absolute; top: 0; left: var(--x); padding: 10px; width: max-content;
    opacity: 0; visibility: hidden; transform: translateX(calc(var(--dir, 0) * 24px));
    transition: opacity 220ms var(--ease), transform 420ms var(--ease), left 420ms var(--ease), visibility 0s 420ms;
    &.active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 60ms, 0s, 0s, 0s; } }
  .mega.no-anim .mm-panel { transition: opacity 220ms var(--ease), visibility 0s; }
  .mm-layout { display: grid; gap: 10px; &.with-aside { grid-template-columns: auto 250px; } }
  .mm-items { display: grid; grid-template-columns: repeat(2, 280px); gap: 2px; .two & { grid-template-columns: repeat(var(--cols, 2), 250px); } .with-aside & { grid-template-columns: 320px; } }
  .mm-item { display: flex; gap: 14px; align-items: flex-start; padding: 13px; border-radius: var(--r-lg); transition: background var(--dur);
    & b { display: flex; align-items: center; gap: 8px; font: 500 15px var(--f-sans); letter-spacing: -.02em; margin-bottom: 4px; }
    & .mm-txt > span { display: block; font-size: 13px; line-height: 1.45; color: var(--text-3); }
    &:hover, &[aria-current] { background: var(--surface-2); & .tile { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-25); background: var(--amber-08); } } }
  .two .mm-item { flex-direction: column; padding: 18px; & .tile { margin-bottom: 8px; } }
  .mm-foot { display: flex; justify-content: space-between; align-items: center; margin: 4px; padding: 12px 14px; border-top: 1px solid var(--line);
    font: 500 12px var(--f-mono); color: var(--text-3);
    & .ic { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
    &:hover { color: var(--text); & .ic { transform: translateX(3px); color: var(--amber); } } }
  .mm-aside { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line);
    & .kicker { font-size: 10px; } }
  .mm-note { margin-top: auto; font-size: 12px; color: var(--text-3); }
  .mm-post { transition: background var(--dur); & b { font: 500 15px/1.35 var(--f-sans); letter-spacing: -.02em; } &:hover { background: var(--surface-2); } }
  .mm-art { height: 96px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line);
    background: radial-gradient(circle at 70% 45%, var(--amber) 0 2px, var(--amber-15) 3px, transparent 26px), repeating-linear-gradient(90deg, hsl(0 0% 100% / .05) 0 1px, transparent 1px 14px), var(--bg); }

  .mnav { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; padding: 0 var(--gutter) 24px; margin: 0;
    background: var(--bg); color: var(--text); flex-direction: column; opacity: 0;
    transition: opacity 300ms var(--ease), overlay 300ms allow-discrete, display 300ms allow-discrete;
    &:popover-open { display: flex; opacity: 1; @starting-style { opacity: 0; } } }
  .mn-head { height: var(--header-h); flex: none; display: flex; align-items: center; justify-content: space-between; }
  .mn-close { width: 40px; height: 40px; border-radius: var(--r-full); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); }
  .mn-body { flex: 1; overflow: hidden auto; padding-top: 12px;
    & details, & .mn-link { border-bottom: 1px solid var(--line); }
    & > * { animation: mn-in 700ms var(--ease) both; }
    & > :nth-child(2) { animation-delay: 40ms; } & > :nth-child(3) { animation-delay: 80ms; } & > :nth-child(4) { animation-delay: 120ms; } & > :nth-child(5) { animation-delay: 160ms; } & > :nth-child(6) { animation-delay: 200ms; }
    & summary, & .mn-link { display: flex; justify-content: space-between; align-items: center; padding: 20px 2px; font: 500 clamp(1.9rem, 1.2rem + 3vw, 2.6rem)/1 var(--f-sans); letter-spacing: -.05em; cursor: pointer; list-style: none; }
    & summary::-webkit-details-marker { display: none; }
    & summary::after { content: "+"; font: 400 22px/1 var(--f-mono); color: var(--text-3); transition: transform var(--dur) var(--ease); }
    & details[open] summary::after { transform: rotate(45deg); color: var(--amber); }
    & details a { display: flex; align-items: center; gap: 12px; padding: 9px 2px; font: 500 15px var(--f-sans); color: var(--text-2); }
    & details[open] { padding-bottom: 16px; } }
  .mn-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 16px; }

  /* Closing band — full-bleed, the largest type on the page after the hero */
  .cta-band { padding: 0; }
  .cta-band > .wrap { width: 100%; }
  .cta-card { position: relative; overflow: hidden; isolation: isolate; padding: clamp(96px, 12vw, 190px) var(--gutter) clamp(96px, 11vw, 170px);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px;
    background: var(--bg-3); border-top: 1px solid var(--line);
    & .h2 { font-size: var(--fs-h1); line-height: .95; letter-spacing: -.055em; max-width: 15ch; }
    & .lede { max-width: 46ch; color: var(--text-3); } & .actions { margin-top: 14px; } }
  .cta-card::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: linear-gradient(hsl(0 0% 100% / .03) 1px, transparent 1px), linear-gradient(90deg, hsl(0 0% 100% / .03) 1px, transparent 1px);
    background-size: 40px 40px; background-position: center top;
    mask: radial-gradient(ellipse 70% 90% at 50% 100%, #000, transparent); }
  .cta-card::after { content: ""; position: absolute; left: 50%; bottom: -55%; z-index: -1; width: min(1500px, 160vw); aspect-ratio: 2; translate: -50% var(--glow-y, 0);
    background: radial-gradient(closest-side, hsl(40 95% 55% / .16), hsl(40 95% 55% / .04) 55%, transparent); }
  .cta-mark { width: 44px; height: auto; margin-bottom: 8px; }

  .ftr { position: relative; overflow: hidden; padding-top: clamp(64px, 8vw, 110px); border-top: 1px solid var(--line); background: var(--bg-3); }
  .ftr-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--col-gap); }
  .ftr-brand { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; & > p { color: var(--text-3); font-size: 15px; max-width: 32ch; } }
  .news { display: grid; gap: 10px; width: 100%; max-width: 380px; margin-top: 16px;
    & label { font: 500 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
    & div { display: flex; gap: 6px; padding: 5px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-2); }
    & input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding-left: 10px; font-size: 14px; }
    & div:focus-within { box-shadow: inset 0 0 0 1px var(--amber); } }
  .ftr-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
    & h4 { font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
    & div { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
    & a { font-size: 14px; color: var(--text-2); transition: color var(--dur); & .tag { margin-left: 6px; } }
    & a:hover { color: var(--amber); } }
  .ftr-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(56px, 7vw, 96px); padding: 22px 0; border-top: 1px solid var(--line); font: 500 11px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-4);
    & :is(a, .ftr-link):hover { color: var(--text); } }
  .ftr-legal { display: flex; gap: 22px; }
  /* A button among the legal links ("Cookie settings"), styled exactly like its <a> siblings */
  .ftr-link { padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; text-align: inherit; color: inherit; }
  .ftr-status { display: inline-flex; align-items: center; gap: 8px; & i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px hsl(150 70% 45% / .15); } }
}

/* ─────────────── PAGES ─────────────── */
@layer pages {
  .phero { position: relative; padding: calc(var(--header-h) + clamp(72px, 11vw, 170px)) 0 clamp(80px, 9vw, 140px); overflow: clip; isolation: isolate; border-bottom: 1px solid var(--line); }
  .phero-inner { display: grid; gap: 26px; justify-items: start; max-width: 1180px;
    & .lede { max-width: 50ch; }
    &.center { margin-inline: auto; text-align: center; justify-items: center; & .h1 { max-width: 16ch; } } }
  .phero-inner .crumbs { margin-bottom: 8px; }
  .phero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 100px); align-items: center;
    & .h1 { font-size: var(--fs-h1-half); } }

  /* ── Home hero ── */
  .home-hero { padding-bottom: 0; border-bottom: 0; padding-top: calc(var(--header-h) + clamp(56px, 8vw, 120px)); }
  .hero-top { display: grid; gap: clamp(48px, 6vw, 96px); }
  .hero-copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; align-items: end;
    & > .display { grid-column: 1 / -1; max-width: 13ch; }
    & > .lede { grid-column: 1 / span 5; align-self: start; margin-top: 12px; }
    & > .actions { grid-column: 6 / span 4; align-self: start; margin-top: 12px !important; }
    & > .stats { grid-column: 10 / span 3; align-self: start; justify-self: end; margin-top: 12px !important; gap: 28px 40px; } }
  .hero-copy .stats dd { font-size: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); }

  /* Intent switcher — three chapters, one stage */
  .intent { margin-top: clamp(110px, 13vw, 200px); }
  .intent-q { font: 500 var(--fs-h2)/1 var(--f-sans); letter-spacing: -.05em; color: var(--text); margin-bottom: clamp(32px, 4vw, 56px); }
  .intent-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
  .intent-thumb { --tx: 0px; --tw: 0px; --th: 0px; --ty: 0px;
    position: absolute; left: 0; top: 0; width: var(--tw); height: var(--th); translate: var(--tx) var(--ty);
    background: linear-gradient(var(--amber-08), transparent 70%); box-shadow: inset 0 2px 0 var(--amber);
    transition: translate 600ms var(--ease), width 600ms var(--ease), height 600ms var(--ease); }
  .intent-btn { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 6px; align-items: baseline; padding: 30px 28px 34px; text-align: left;
    & + & { box-shadow: -1px 0 0 var(--line); }
    & .k { grid-row: span 2; font: 500 clamp(2rem, 1.4rem + 1.6vw, 3.2rem)/.9 var(--f-sans); letter-spacing: -.06em; color: hsl(0 0% 38%); transition: color 500ms var(--ease); }   /* ghost numerals, but 3:1 on --bg (large text); --surface-4 was 1.4:1 */
    & .t { font: 500 clamp(1.05rem, .95rem + .45vw, 1.35rem)/1.25 var(--f-sans); letter-spacing: -.03em; color: var(--text-2); transition: color var(--dur); }
    & .s { font: 500 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); }
    &:hover .t { color: var(--text); } &:hover .k { color: var(--text-4); }
    &[aria-selected="true"] { & .t { color: var(--text); } & .k { color: var(--amber); } & .s { color: var(--text-3); } } }
  .stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); align-items: center; padding-block: clamp(56px, 6vw, 96px) clamp(110px, 12vw, 180px); }
  .stage-copy { view-transition-name: stage-copy; display: grid;
    & > [data-for] { grid-area: 1 / 1; display: grid; gap: 22px; justify-items: start; }
    & .h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); }
    & p { max-width: 46ch; } & .actions { margin-top: 10px; } }
  .stage-view { view-transition-name: stage-view; }
  .stage-view .mock { display: grid; grid-template-rows: auto 1fr; & > .mock-bar { grid-row: 1; } & > [data-for] { grid-row: 2; grid-column: 1; } }
  [data-off] { visibility: hidden; pointer-events: none; }
  .sv-body { min-height: 380px; }
  .ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; font: 500 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
    & li { display: inline-flex; align-items: center; gap: 8px; } & li::before { content: ""; width: 5px; height: 5px; background: var(--amber); } }
  .lib-q-mini { display: flex; align-items: center; gap: 10px; height: 44px; padding-inline: 12px; border-radius: var(--r-md); background: var(--bg); box-shadow: inset 0 0 0 1px var(--amber); font: 500 13px var(--f-mono); color: var(--text);
    & .ic { width: 15px; height: 15px; color: var(--text-3); } & .caret { width: 1.5px; height: 16px; background: var(--amber); margin-left: -6px; animation: blink 1s steps(1) infinite; } }
  .lib-rows { display: grid; font-size: 13px;
    & li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 11px 4px; border-top: 1px solid var(--line); }
    & li b { font-weight: 500; } & li span { font: 500 11px var(--f-mono); color: var(--text-4); grid-column: 1; }
    & li .p { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 500 12.5px var(--f-mono); color: var(--text); } }
  .sources { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 40px;
    & p { font: 500 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
    & .list { display: flex; flex-wrap: wrap; gap: 12px 40px; }
    & span { font: 500 15px/1 var(--f-mono); color: var(--text-3); letter-spacing: -.03em; transition: color var(--dur); }
    & a:hover span { color: var(--text); } }

  .sol { display: grid; gap: 14px; padding: 30px; align-content: start; min-height: 240px;
    & p { color: var(--text-3); font-size: 15px; } & .link { margin-top: auto; padding-top: 10px; justify-self: start; }
    & .tile { margin-bottom: 18px; }
    &:hover .h3, &:hover .h4 { color: var(--amber); } & :is(.h3, .h4) { transition: color var(--dur); } }

  /* Pricing */
  /* Plans: three statements as ruled rows (no cards). Phone: stacked. 760-1099: statement left, list right. 1100 up: 12 columns, statement / list / figure and action. */
  .plans { --plan-suf: 66px; color: var(--text-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
  .plans :where(p, ul, li, h2) { margin: 0; padding: 0; }
  .plan { display: grid; grid-template-columns: minmax(0, 1fr); padding: 32px 0; }
  .plan + .plan { border-top: 1px solid var(--line-2); }
  .plan-kick { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; margin-bottom: 14px; font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
  .plan-label { color: var(--text); }
  .plan-tag { color: var(--text-3); }
  .plan-dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
  .plan-lead { font: 500 var(--fs-h3)/1.2 var(--f-sans); letter-spacing: -.03em; color: var(--text); text-wrap: wrap; }
  .plan-amount { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; }
  .plan-amount b { font: 500 var(--fs-h2)/1 var(--f-sans); letter-spacing: -.045em; color: var(--text); white-space: nowrap; }
  .plan-amount b.plan-amount-accent { color: var(--amber); }
  .plan-amount span { width: var(--plan-suf); color: var(--text-3); font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
  .plan-body { max-width: 48ch; margin-top: 14px; color: var(--text-2); }
  .plan-list { margin-top: 22px; }
  .plan-list li { padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
  .plan-list li:first-child { border-top: 0; padding-top: 0; }
  /* the action is the site's quiet arrow link; padding and negative margin make a 44px tap target without moving the text */
  .plans a.plan-act { justify-self: start; margin-top: 8px; padding: 14px 0; margin-block: 8px -14px; min-height: 44px; box-sizing: border-box; background-origin: content-box; background-position: 0 calc(100% + 3px); }
  .plans a.plan-act::after { content: ""; flex: none; width: 13px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat; transition: transform var(--dur) var(--ease); }
  .plans a.plan-act:hover::after { transform: translateX(3px); }
  @media (min-width: 760px) {
    .plan { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto) 1fr; column-gap: var(--col-gap); padding: 44px 0; align-items: start; }
    .plan-kick { grid-column: 1; grid-row: 1; margin-bottom: 0; }
    .plan-lead { grid-column: 1; grid-row: 2; margin-top: 14px; }
    .plan-amount { grid-column: 1; grid-row: 3; justify-self: start; }
    .plan-body { grid-column: 1; grid-row: 4; }
    .plans a.plan-act { grid-column: 1; grid-row: 5; }
    .plan-list { grid-column: 2; grid-row: 1 / 7; margin-top: 0; }
  }
  @media (min-width: 1100px) {
    .plan { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; }
    .plan-kick { grid-column: 1 / 6; }
    .plan-lead { grid-column: 1 / 6; align-self: baseline; margin-top: 0; }
    .plan-amount { grid-column: 10 / 13; grid-row: 2; justify-self: end; align-self: baseline; margin-top: 0; }
    .plan-body { grid-column: 1 / 6; grid-row: 3; margin-top: 12px; }
    .plan-list { grid-column: 6 / 10; grid-row: 1 / 4; }
    .plans a.plan-act { grid-column: 10 / 13; grid-row: 3; justify-self: end; align-self: start; margin-top: 2px; }
    /* a row without a figure (Enterprise): the heading keeps the offset the numerals give it in the other rows, and the action takes the figure's place on the heading line */
    .plan-solo .plan-lead { margin-top: calc(var(--fs-h2) * .84 - var(--fs-h3) * .94); }
    .plan-solo a.plan-act { grid-row: 2; align-self: baseline; margin-top: 0; }
  }
  .phero-inner.center .h1-three { max-width: none; }
  .compare { width: 100%; font-size: 14.5px;
    & th, & td { padding: 16px 24px; text-align: left; border-bottom: 1px solid var(--line); }
    & thead th { font: 500 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); }
    & tbody th { font: 500 15px var(--f-sans); letter-spacing: -.02em; color: var(--text); }
    & td { color: var(--text-2); } & tr:last-child > * { border-bottom: 0; }
    & tbody tr { transition: background var(--dur); } & tbody tr:hover { background: var(--surface-2); }
    & .y { color: var(--ok); } & .n { color: var(--text-4); } }
  .table-wrap { position: relative; overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }   /* relative: hidden screen-reader labels (.vh) stay inside the scroll box instead of widening the page */

  .lib { padding: 16px; display: grid; gap: 14px; }
  .lib-filters { display: flex; flex-wrap: wrap; gap: 6px; }

  .pubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .pub { display: grid; gap: 10px; padding: 26px; align-content: start;
    & h3 { font: 500 22px/1.15 var(--f-sans); letter-spacing: -.04em; margin-top: 6px; }
    & p { color: var(--text-3); font-size: 14px; }
    & .row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--text-3); }
    &.dashed { background: transparent; box-shadow: none; border: 1px dashed var(--line-3); } }
  .facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
    & div { padding: 26px 26px 28px; display: grid; gap: 12px; } & div + div { box-shadow: -1px 0 0 var(--line); }
    & dt { font: 500 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
    & dd { font: 500 clamp(1.1rem, .95rem + .55vw, 1.5rem)/1.2 var(--f-sans); letter-spacing: -.03em; color: var(--text); } }

  .timeline { display: grid; max-width: 1040px; margin-inline: auto; position: relative;
    &::before { content: ""; position: absolute; left: 180px; top: 8px; bottom: 8px; width: 1px; background: var(--line-2); }
    & article { display: grid; grid-template-columns: 180px 1fr; gap: 48px; padding-bottom: 72px; position: relative; }
    & article::before { content: ""; position: absolute; left: 177px; top: 8px; width: 7px; height: 7px; background: var(--amber); box-shadow: 0 0 0 5px var(--bg); }
    & time { font: 500 clamp(1.4rem, 1rem + 1vw, 2rem)/1 var(--f-sans); letter-spacing: -.05em; color: var(--text-3); }
    & .entry { display: grid; gap: 14px; padding-left: 8px; justify-items: start; }
    & .entry .h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2.2rem); letter-spacing: -.04em; }
    & .entry p, & .entry li { color: var(--text-2); font-size: 16px; }
    & .entry ul { display: grid; gap: 8px; padding-left: 18px; list-style: square; & li::marker { color: var(--amber); } } }

  .people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .person { display: grid; gap: 4px; padding: 10px 10px 18px;
    & .ph { aspect-ratio: 1; border-radius: var(--r-md); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 10px; display: grid; place-items: center; color: var(--text-4); font: 500 22px var(--f-mono); }
    & b { padding-inline: 6px; font: 500 15px var(--f-sans); letter-spacing: -.02em; } & span { padding-inline: 6px; font-size: 13.5px; color: var(--text-3); } }
  .jobs { display: grid; border-top: 1px solid var(--line-2); }
  .job { display: grid; grid-template-columns: 1fr 180px 160px auto; gap: 24px; align-items: center; padding: 30px 8px; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none; box-shadow: none; transition: background var(--dur), padding 500ms var(--ease);
    & b { font: 500 clamp(1.2rem, 1rem + .8vw, 1.9rem) var(--f-sans); letter-spacing: -.04em; transition: color var(--dur); } & span { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
    & .ic { width: 18px; height: 18px; color: var(--text-3); transition: transform var(--dur) var(--ease); }
    &::before { display: none; }
    &:hover { background: var(--surface); padding-inline: 20px; box-shadow: none; & b { color: var(--amber); } & .ic { transform: translateX(4px); color: var(--amber); } } }

  .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
  .contact-grid .h1 { font-size: var(--fs-h1-half); }
  .contact-list { display: grid; gap: 10px;
    & > a, & > div { display: flex; gap: 18px; align-items: center; padding: 22px; }
    & b { display: block; font: 500 17px var(--f-sans); letter-spacing: -.02em; margin-bottom: 2px; } & span { font-size: 14px; color: var(--text-3); } }

  .doc-search { display: flex; align-items: center; gap: 12px; height: 60px; width: min(100%, 680px); padding-inline: 20px; border-radius: var(--r-full); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
    & input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 15px var(--f-sans); letter-spacing: -.01em; }
    & .ic { color: var(--text-3); }
    &:focus-within { box-shadow: inset 0 0 0 1px var(--amber), 0 0 0 4px var(--amber-15); } }

  /* Gesserit hero fallback (shown only when JavaScript is off): the app's flat tiles and plain wires, nothing moves.
     Two drawings: a wide one (1 unit = 1px at the hero's width, so text is 12px and 14px) and a two-column one for phones. */
  .ges-graph { display: block; width: 100%; height: auto; padding: 16px; box-sizing: border-box; background: #131415; }
  .ges-graph.ges-wide { max-height: 204px; }
  .ges-graph.ges-narrow { display: none; max-height: 174px; }
  @media (max-width: 640px) { .ges-graph.ges-wide { display: none; } .ges-graph.ges-narrow { display: block; } }

  /* Data: anatomy — the record stays put while the explanations scroll past */
  .anatomy { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
  .anatomy > .record { position: sticky; top: calc(var(--header-h) + 32px); }
  .record { font-size: 13.5px;
    & .rec-h { padding: 20px 20px 18px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
    & .rec-h b { font: 500 22px var(--f-sans); letter-spacing: -.04em; color: var(--text); }
    & dl { display: grid; }
    & dl div { display: grid; grid-template-columns: 26px 150px 1fr; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); align-items: baseline; transition: background 400ms var(--ease); }
    & dl div:last-child { border-bottom: 0; }
    & dt { font: 500 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
    & dd { color: var(--text); font-family: var(--f-mono); letter-spacing: -.02em; font-size: 12.5px; }
    & .pin { font: 500 10.5px var(--f-mono); color: var(--amber); width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--amber-25); transition: background 400ms, color 400ms; } }
  .anno { display: grid; gap: 0; counter-reset: a; border-top: 1px solid var(--line-2);
    & li { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding: clamp(26px, 3vw, 44px) 2px; border-bottom: 1px solid var(--line-2); transition: background 400ms var(--ease), opacity 400ms; }
    & li::before { counter-increment: a; content: counter(a); font: 500 10.5px var(--f-mono); color: var(--amber); width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--amber-25); transition: background 400ms, color 400ms; }
    & b { display: block; font: 500 clamp(1.1rem, 1rem + .4vw, 1.35rem) var(--f-sans); letter-spacing: -.03em; margin-bottom: 6px; }
    & p { font-size: 15px; color: var(--text-3); max-width: 44ch; } }
  .record [data-pin], .anno [data-pin] { cursor: default; }
  .record div.hl, .anno li.hl { background: var(--amber-08); }
  .record div.hl .pin, .anno li.hl::before { background: var(--amber); color: var(--bg); }

  @media (max-width: 1080px) {
    .nav, .hide-md { display: none; }
    .burger { display: grid; }
    .hdr-bar { grid-template-columns: 1fr auto; }
    .stage { grid-template-columns: 1fr; }
    .hero-copy { & > .lede { grid-column: 1 / span 7; } & > .actions { grid-column: 8 / span 5; justify-self: end; } & > .stats { grid-column: 1 / -1; justify-self: start; } }
    .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split, .phero-split, .contact-grid { grid-template-columns: 1fr; }
    .split.rev > :first-child { order: 0; }
    .steps.g4 li { &:nth-child(3) { box-shadow: none; } &:nth-child(n+3) { border-top: 1px solid var(--line); } }
    .pubs, .people { grid-template-columns: repeat(2, 1fr); }
    .facts { grid-template-columns: 1fr 1fr; & div:nth-child(3) { box-shadow: 0 -1px 0 var(--line); } & div:nth-child(4) { box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); } }
    .anatomy { grid-template-columns: 1fr; } .anatomy > .record { position: static; }
    .ftr-top { grid-template-columns: 1fr; gap: 56px; }
    .ftr-cols { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
    .job { grid-template-columns: 1fr auto auto auto; }
  }
  @media (max-width: 760px) {
    .section-head { grid-template-columns: 1fr; & > * { grid-column: 1; } & > .kicker { grid-row: auto; padding-top: 0; } }
    .g2, .g3, .g4, .pubs { grid-template-columns: 1fr; }
    .g3 > .feature, .g3 > .feature:not(:nth-child(3n+1)) { box-shadow: none; }
    .g3 > .feature::after { right: 0; }
    .steps li, .steps li:first-child { box-shadow: none !important; } .steps li + li { border-top: 1px solid var(--line); }
    .steps li::before { margin-bottom: 18px; }
    .hero-copy { & > .lede, & > .actions, & > .stats { grid-column: 1 / -1; justify-self: start; } & > .actions { margin-top: 0 !important; } }
    .intent-track { grid-template-columns: 1fr; }
    .intent-btn { padding: 22px 4px; } .intent-btn + .intent-btn { box-shadow: 0 -1px 0 var(--line); }
    .sv-body { min-height: 0; }
    .m-row { grid-template-columns: 1fr 72px; & > span:nth-child(2) { display: none; } }
    .facts { grid-template-columns: 1fr; & div, & div:nth-child(n) { box-shadow: 0 -1px 0 var(--line) !important; } & div:first-child { box-shadow: none !important; } }
    .job { grid-template-columns: 1fr auto; & span:nth-of-type(2) { display: none; } & span:nth-of-type(1) { display: none; } }
    .timeline { &::before { left: 3px; } & article { grid-template-columns: 1fr; gap: 12px; padding-left: 30px; padding-bottom: 52px; } & article::before { left: 0; } }
    .ftr-cols { grid-template-columns: 1fr 1fr; }
    .form .row2 { grid-template-columns: 1fr; }
    .hdr-actions .btn-primary { --h: 36px; padding-inline: 14px; }
    .mn-actions .btn { --h: 50px; padding-inline: 12px; }
  }
  @media (max-width: 480px) {
    .actions .btn-lg { flex: 1 1 100%; }
  }
}

/* ─────────────── MOTION ─────────────── */
@layer motion {
  @keyframes grow { from { transform: scaleX(0); } }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
  @keyframes blink { 50% { opacity: 0; } }
  @keyframes reveal { from { opacity: 0; transform: translateY(32px); } }
  @keyframes marquee { to { transform: translateX(-50%); } }
  @keyframes flow { to { stroke-dashoffset: -14; } }
  @keyframes mn-in { from { opacity: 0; transform: translateY(24px); } }

  /* No-JS / no-GSAP fallback: CSS scroll-driven reveals. motion.js takes over when it runs. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      html:not(.has-motion) .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    }
  }
  /* Until motion.js has staged the intro, keep the hero still (a timeout in <head> lifts this if JS fails) */
  .motion-pending .phero > .wrap { opacity: 0; }

  /* SplitText line masks */
  /* Room for ascenders and descenders (g, y, p) inside each line mask; negative margins keep the layout identical */
  /* Adjacent block margins collapse (only the larger negative one applies), so the whole
     compensation sits on one side between lines; the ends get exactly their own padding back. */
  :has(> .split-line) { padding-block: .1em .26em; margin-block: -.36em 0; }
  :has(> .split-line):first-child { margin-top: -.1em; }
  :has(> .split-line):last-child { margin-bottom: -.26em; }

  /* Page-to-page and intent-switch transitions */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 160ms ease-in both vt-fade-out; }
  ::view-transition-new(root) { animation: 320ms var(--ease) both vt-fade-in; }
  ::view-transition-old(stage-copy), ::view-transition-old(stage-view) { animation: 180ms ease-in both vt-fade-out; }
  ::view-transition-new(stage-copy) { animation: 420ms var(--ease) 60ms both vt-up; }
  ::view-transition-new(stage-view) { animation: 480ms var(--ease) 40ms both vt-up; }
  @keyframes vt-fade-out { to { opacity: 0; } }
  @keyframes vt-fade-in { from { opacity: 0; } }
  @keyframes vt-up { from { opacity: 0; transform: translateY(14px); } }
  .hdr { view-transition-name: site-header; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .marquee-track { animation: none; }
  }
}



/* ─────────────── HOME HERO v2: centred statement, product below ─────────────── */
@layer pages {
  .home-hero { padding-top: calc(var(--header-h) + clamp(48px, 7vw, 104px)); }
  .hero-top { gap: clamp(48px, 6vw, 88px); }
  .hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; max-width: 980px; margin-inline: auto;
    & > * { align-self: center !important; justify-self: auto !important; }
    & > .display { font-size: clamp(2.8rem, 1rem + 5.4vw, 6.6rem); line-height: .94; max-width: 14ch; }
    & > .lede { max-width: 52ch; margin-top: 4px; }
    & > .actions { display: grid; grid-template-columns: 1fr 1fr; justify-content: center; margin-top: 8px !important; }   /* both CTAs the same width */
    & > .stats { justify-content: center; justify-self: auto; margin-top: 18px !important; gap: 0;
      & > div { padding-inline: clamp(24px, 4vw, 48px); } & > div + div { box-shadow: -1px 0 0 var(--line); } } }
  .hero-copy .stats dd { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem); }
  /* Buttons and stats share one width and centre line: the stat divider sits exactly under the gap between the buttons */
  .hero-copy > .actions, .hero-copy > .stats { width: min(100%, 460px); }
  .hero-copy > .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    & > div { padding-inline: 12px !important; text-align: center; }
    & > div + div { box-shadow: -1px 0 0 var(--line); } }
  @media (max-width: 760px) { .hero-copy > .actions { grid-template-columns: 1fr; width: 100%; } .hero-copy > .stats > div { padding-inline: 20px; } }

  /* Intent auto-advance: a progress line runs along the active tab */
  .intent-thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--text); opacity: .55; transform-origin: left; transform: scaleX(0); }
  .intent-track.ticking .intent-thumb::after { animation: intent-tick 5s linear forwards; }
  @keyframes intent-tick { to { transform: scaleX(1); } }
}


/* ─────────────── LEGIBILITY OVER THE 3D FIELD + macOS window chrome ─────────────── */
@layer pages {
  /* Frosted glass: the particle field stays visible but softened behind text */
  /* Open, ruled layout as before — the blur has no edges, so it reads as haze, not a box */
  .intent-track { background: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  /* Panel swap: the new panel rises in (no View Transition snapshot, so live blur and the 3D field stay put) */
  .stage-copy, .stage-view { view-transition-name: none; }
  .stage [data-for]:not([data-off]) { animation: vt-up 520ms var(--ease) both; }
  .stage-view [data-for]:not([data-off]) { animation-duration: 600ms; }
  .stage-copy { position: relative; isolation: isolate; }
  .stage-copy::before { content: ""; position: absolute; inset: -56px -64px; z-index: -1; pointer-events: none;
    background: hsl(0 0% 7% / .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    -webkit-mask: radial-gradient(closest-side, #000 62%, transparent); mask: radial-gradient(closest-side, #000 62%, transparent); }

  /* Tab titles sit just under the numerals */
  .intent-btn { align-items: center; row-gap: 8px;
    & .k { font-size: clamp(2.4rem, 1.6rem + 2vw, 3.8rem); min-width: 1.25em; }
    & .t { font-size: clamp(1.25rem, .95rem + .9vw, 1.85rem); line-height: 1.05; letter-spacing: -.045em; } }

  /* macOS traffic lights on every product window */
  .mock-bar i:nth-child(1) { background: #ff5f57; }
  .mock-bar i:nth-child(2) { background: #febc2e; }
  .mock-bar i:nth-child(3) { background: #28c840; }
}


/* ─────────────── GLASS OVER THE 3D FIELD · WINDOW OUTLINES · HERO SPACING ─────────────── */
@layer pages {
  /* Soft frosted backing behind ruled feature grids and FAQ lists */
  .grid:has(> .feature), .faq {
    background: hsl(0 0% 7% / .22);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .faq details.closing summary::after { transform: none; color: var(--text-2); background-color: transparent; box-shadow: inset 0 0 0 1px var(--line-3); }
  .faq { padding-inline: clamp(12px, 2vw, 28px); border-top: 0; border-radius: var(--r-lg); }

  /* macOS windows: the outline runs around the title bar too (an inset shadow sits under the bar's own fill) */
  .mock { box-shadow: 0 60px 120px -50px hsl(0 0% 0% / .9), 0 0 0 1px hsl(0 0% 0% / .4); }
  .mock::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line-2); pointer-events: none; z-index: 3; }
  .mock-bar { border-bottom-color: var(--line-2); }

  /* Listing pages: breathing room between the hero's bottom rule and the first block */
  .phero + .section[style*="padding-top"] { padding-top: clamp(56px, 6vw, 96px) !important; }
}


/* Headlines that animate line-by-line use plain wrapping from the first paint.
   SplitText wraps words in inline elements; Firefox stops balancing those, so balanced
   breaks would differ during the animation and jump when the split is reverted. */
@layer pages {
  :is(.motion-pending, .has-motion) :is(.phero h1, .section-head .h2, .cta-card .h2, .intent-q) { text-wrap: wrap; }
}


/* Outlines as real borders on boxes whose first row has its own fill (table header, finder bar,
   code-tab bar): an inset box-shadow is painted under children's backgrounds and disappears there. */
@layer pages {
  .table-wrap { box-shadow: none; border: 1px solid var(--line); }
  .finder { box-shadow: 0 60px 140px -50px hsl(0 0% 0% / .95); border: 1px solid var(--line-2); }
  .calc { box-shadow: none; border: 1px solid var(--line); }
}


/* Section heads: one column (label → headline → intro), no auto-numbering anywhere */
@layer pages {
  .section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 980px; }
  .section-head > * { grid-column: auto; grid-row: auto; }
  .section-head > .kicker { padding-top: 0; }
  .section-head.center { align-items: center; margin-inline: auto; }
  .section .section-head > .kicker, .section .section-head.center > .kicker { color: var(--amber); }
  .section .section-head > .kicker::before, .section .section-head.center > .kicker::before {
    content: ""; width: 6px; height: 6px; background: var(--amber); padding: 0; margin: 0; box-shadow: none; }
  .feature::after { content: none; }
}


/* ─────────────── RULED GRIDS: one shared cell recipe ───────────────
   Features, steps, quality gate, stats bands, key facts, and the anatomy list are all
   the same component: hairline-ruled cells on the 3D field. Same padding on every cell (no flush-left
   first column), same frosted backing, same amber accent. */
@layer pages {
  :root { --cell-px: clamp(20px, 2.4vw, 32px); --cell-py: clamp(26px, 3vw, 40px); }
  .feature, .steps li, .gate > *, .lstats > div, .facts > div, .anno li { padding-inline: var(--cell-px); }
  .feature, .steps li, .gate > * { padding-block: var(--cell-py); }
  .lstats > div, .facts > div { padding-block: clamp(22px, 2.6vw, 30px); }
  .anno li { padding-block: clamp(24px, 2.8vw, 40px); }
  .grid:has(> .feature), .steps, .gate, .lstats, .facts, .anno {
    background: hsl(0 0% 7% / .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .steps { gap: 0; }
  .gate-out { border-radius: 0; }
}


/* API · developers: spec checklist as a ruled grid, pricing as a full-width band */
@layer pages {
  .spec-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden;
    border-block: 1px solid var(--line-2); background: hsl(0 0% 7% / .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    & li { display: flex; flex-direction: column; gap: 18px; padding: var(--cell-py) var(--cell-px); font-size: 15.5px; line-height: 1.45; color: var(--text);
      box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
    & li::before { content: ""; width: 22px; height: 22px; border-radius: var(--r-xs);
      background: var(--amber-15) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7B32A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center/13px no-repeat; } }
  .price-band { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 980px;
    margin-top: clamp(96px, 11vw, 168px);
    & > div { display: contents; }
    & .h2 { color: var(--text); max-width: 20ch; }
    & .lede { color: var(--text-2); max-width: 58ch; }
    & .actions { margin-top: 10px; } }
  @media (max-width: 1080px) { .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 760px) { .spec-grid { grid-template-columns: 1fr; & li { flex-direction: row; align-items: center; padding-block: 18px; } & li::before { flex: none; } } }
}


/* ─────────────── VERTICAL RHYTHM: equal top and bottom padding everywhere ─────────────── */
@layer pages {
  :root { --sec-py: clamp(96px, 12vw, 180px); --hero-py: clamp(80px, 10vw, 150px); }
  .section { padding-block: var(--sec-py); }
  .section.tight { padding-block: clamp(48px, 6vw, 80px); }
  .phero + .section[style*="padding-top"] { padding-top: var(--sec-py) !important; }
  .phero { padding: calc(var(--header-h) + var(--hero-py)) 0 var(--hero-py); }
  .cta-card { padding-block: var(--sec-py); }
}


/* Back-to-top button */
@layer chrome {
  .to-top { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 40;
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    color: var(--text); background: hsl(0 0% 10% / .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px var(--line-3), 0 12px 32px -12px hsl(0 0% 0% / .8);
    opacity: 0; visibility: hidden; translate: 0 12px;
    transition: opacity 300ms var(--ease), translate 400ms var(--ease), visibility 0s 400ms, background var(--dur), color var(--dur), box-shadow var(--dur);
    & .ic { width: 18px; height: 18px; rotate: -90deg; }
    &[data-on] { opacity: 1; visibility: visible; translate: none; transition-delay: 0s; }
    &:hover { color: var(--bg); background: var(--amber); box-shadow: none; } }
  .mnav:popover-open ~ .to-top, body:has(.mnav:popover-open) .to-top { opacity: 0; visibility: hidden; }
}

/* ─────────────── 3D BACKDROP (js/scene/backdrop.js) ─────────────── */
@layer chrome {
  .backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease); }
  .backdrop.on { opacity: 1; }
  .backdrop canvas { display: block; width: 100%; height: 100%; }
  main, .ftr, site-footer { position: relative; z-index: 1; }
  /* Let the field show through section bands; product windows stay solid */
  .section.alt { background: hsl(0 0% 8.5% / .5); }
  .cta-card { background: linear-gradient(hsl(0 0% 5.5% / 0), hsl(0 0% 5.5% / .65)); }
}
/* While the field runs, it draws the frost on these panels itself (backdrop.js GLASS list, keep the two in sync):
   a CSS backdrop blur over a live canvas has to be recomputed on every frame. The tint stays.
   .stage-copy::before only ever showed its tint (its blur had nothing to sample, see backdrop.js), so it just drops the blur. */
@layer pages {
  html.glass-gl :is(.grid:has(> .feature), .faq, .steps, .gate, .lstats, .facts, .anno, .spec-grid, .intent-track),
  html.glass-gl .stage-copy::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ─────────────── DATA COMPONENTS (rendered from js/library.js) ─────────────── */
@layer pages {
  library-stats, library-table, region-bars, dataset-facts, quality-gate, en15804-list, reel-scope { display: block; }

  /* Headline numbers band */
  .lstats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); text-align: left; margin-top: clamp(24px, 3vw, 40px);
    & > div { padding: 28px 24px 30px; display: grid; gap: 10px; align-content: start; }
    & > div + div { box-shadow: -1px 0 0 var(--line); }
    & dt { font: 500 10.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
    & dd { font: 500 clamp(2.2rem, 1.5rem + 2vw, 3.6rem)/.95 var(--f-sans); letter-spacing: -.06em; color: var(--text); font-variant-numeric: tabular-nums; }
    & span { font-size: 13.5px; color: var(--text-4); }
    & dd span { display: block; margin-top: 10px; font: 400 13.5px/1.6 var(--f-sans); letter-spacing: normal; font-variant-numeric: normal; } }

  /* Comparison table */
  .dtable { width: 100%; font-size: 13.5px; min-width: 860px;
    & th, & td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
    & thead th { font: 500 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); white-space: nowrap; position: sticky; top: 0; }
    & thead th.num { color: var(--text-3); font-family: var(--f-mono); }
    & thead th button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; display: inline-flex; gap: 6px; }
    & thead th button:hover { color: var(--text); }
    & .num { text-align: right; font-family: var(--f-mono); letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
    & td.num small, & td small { display: block; font: 500 10.5px var(--f-mono); color: var(--text-4); letter-spacing: 0; margin-top: 2px; }
    & td { color: var(--text-2); }
    & .c-name { min-width: 200px; }
    & .c-name a { font-family: var(--f-sans); letter-spacing: -.02em; font-size: 15px; }
    & .c-name b { font-weight: 500; transition: color var(--dur); }
    & .c-name a:hover b { color: var(--amber); }
    & .v { color: var(--text-3); }
    & .var { font: 500 10px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 2px 5px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--line-2); margin-left: 4px; white-space: nowrap; }
    & .c-methods, & .c-systemModel { font-size: 13px; }
    & tbody tr { transition: background var(--dur); }
    & tbody tr:hover { background: var(--surface-2); }
    & tbody tr[data-status="Coming soon"] td:not(.c-access) { opacity: .6; }
    & tr:last-child > * { border-bottom: 0; }
    & td.c-access { white-space: nowrap; & small { margin-top: 6px; } }
    &.compact { min-width: 0; }
    &.matrix { min-width: 700px; & .c { text-align: center; } }
    &:not(.compact):not(.credits):not(.matrix) { min-width: 1080px; }
    &.credits { min-width: 520px;
      & thead th small { display: block; font-size: 10.5px; letter-spacing: .06em; color: var(--text-4); margin-top: 3px; text-transform: none; }
      & td { vertical-align: middle; padding-block: 20px; }
      & .c-name b { font: 500 16px var(--f-sans); color: var(--text); }
      & .cr { font-size: 15px; } } }
  .dnote { margin-top: 14px; }
  library-table .lib-filters { margin-bottom: 18px; }
  .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-3);
    &.on { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-15); } }
  .matrix tbody tr:hover td, .matrix .col-hl { background: var(--surface-2); }
  .matrix thead th.col-hl { color: var(--amber); }

  /* A table wider than its box (phones, narrow windows): tableCue() in library.js sets data-scroll.
     The first column stays put, a hairline marks it once the rest slides under, and the far edge fades
     while columns wait off-screen. The scroller takes keyboard focus; arrow keys scroll it. */
  .table-wrap[data-scroll] .dtable :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  .table-wrap[data-scroll] .dtable thead th:first-child { z-index: 2; background: var(--bg-2); }
  .table-wrap[data-scroll] .dtable tbody tr:hover > :first-child { background: var(--surface-2); }
  .table-wrap[data-scroll~="moved"] .dtable :is(th, td):first-child { box-shadow: 1px 0 0 var(--line-3); }
  .table-wrap[data-scroll~="more"] { -webkit-mask: linear-gradient(to left, transparent, #000 var(--fade, 64px)); mask: linear-gradient(to left, transparent, #000 var(--fade, 64px)); }
  .table-wrap[data-scroll]:focus-visible { -webkit-mask: none; mask: none; outline-offset: 2px; border-radius: var(--r-lg); }
  @media (max-width: 760px) {
    /* sizes here never depend on data-scroll, so fitting and scrolling can't flip each other */
    .dtable.credits .c-name { min-width: 0; }
    /* the credit table has two price columns: on phones it narrows to fit them (headers wrap), and only
       scrolls, with the cue above, on the very narrowest screens */
    .dtable.credits { min-width: 0;
      & thead th { white-space: normal; }
      & :is(th, td) { padding-inline: 8px; }
      & :is(th, td):first-child { padding-left: 14px; }
      & :is(th, td):last-child { padding-right: 14px; }
      & .c-name b { font-size: 15px; }
      & .cr { font-size: 13.5px; } }
  }

  /* Region bars */
  .rbars { display: grid; gap: 10px; align-content: start; height: 100%; padding: 26px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .rb-h { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font: 500 15px var(--f-sans); letter-spacing: -.02em;
    & span { color: var(--text-4); font: 500 11px var(--f-mono); } }
  .rb { display: grid; grid-template-columns: 64px 1fr 56px 48px; gap: 12px; align-items: center; font: 500 12px var(--f-mono); }
  .rb-k { color: var(--text); }
  .rb-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden;
    & i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--text-3); transform-origin: left; animation: grow 1.4s var(--ease) both; } }
  .rb:first-of-type .rb-bar i { background: var(--amber); }
  .rb-n { text-align: right; color: var(--text-2); } .rb-p { text-align: right; color: var(--text-4); }
  .rb-other { & .rb-k, & .rb-n { color: var(--text-3); } & .rb-bar i { background: var(--surface-4); } }

  /* Quality gate — runnable */
  .gate { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
  .gate-step, .gate-out { --p: 1; position: relative; display: grid; gap: 10px; align-content: start; padding: 28px 24px 32px; transition: background 400ms var(--ease);
    & b { font: 500 clamp(1.05rem, .95rem + .35vw, 1.3rem) var(--f-sans); letter-spacing: -.03em; }
    & p { font-size: 14px; color: var(--text-3); } }
  .gate > * + * { box-shadow: -1px 0 0 var(--line); }
  .gs-n { font: 500 11px var(--f-mono); color: var(--text-4); }
  .gs-c { font: 500 11px var(--f-mono); color: var(--amber); letter-spacing: .06em; text-transform: uppercase; }
  .gate-step .gs-bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--amber); transform-origin: left; transform: scaleX(var(--p)); transition: transform 80ms linear; }
  .gate-step.on { background: var(--surface); & .gs-n { color: var(--amber); } }
  .gate-step.done .gs-c { color: var(--ok); }
  .gate-out { background: var(--amber-04); & .gs-c { color: var(--ok); } &.done { background: hsl(150 70% 45% / .08); } }
  .gate-ctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; & .btn[disabled] { opacity: .5; cursor: progress; } }

  /* Indicator list & scope list */
  .ilist { display: grid; border-top: 1px solid var(--line-2);
    & div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 15px 2px; border-bottom: 1px solid var(--line); }
    & dt { font: 500 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
    & dd { font: 500 14px var(--f-mono); color: var(--text); letter-spacing: -.02em; } }
  .scope { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
    & li { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 500 14px var(--f-sans); color: var(--text); letter-spacing: -.02em; }
    & li::before { content: ""; width: 6px; height: 6px; background: var(--amber); flex: none; } }

  /* Publisher cards with their numbers */
  publisher-grid, cost-calc, credit-table { display: block; }
  .pubgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .pubc { display: flex; flex-direction: column; gap: 12px; padding: 28px; cursor: pointer; min-height: 340px;
    & .pc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
    /* Publisher logos in one color (white), so six brands read as one set on the dark cards.
       Our publishing agreements cover logo use. OPEN (2026-11-02): a vector Building Transparency logo is requested; design is Min's call. */
    & .pc-logo { display: flex; align-items: center; height: 52px; }
    & .pc-logo img { display: block; width: auto; height: auto; max-height: 52px; max-width: 170px; filter: brightness(0) invert(1); opacity: .88; }
    & h3 { font: 500 clamp(1.5rem, 1.2rem + .9vw, 2.1rem)/1.05 var(--f-sans); letter-spacing: -.05em; }
    & p { font-size: 14.5px; color: var(--text-3); }
    & .link { margin-top: 6px; }
    &:hover, &:focus-visible { box-shadow: inset 0 0 0 1px var(--line-3); &::before { opacity: 1; } & .tile { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-25); background: var(--amber-08); } & .link { color: var(--amber); background-size: 100% 1px; } }
    &.soon { & h3, & .pc-m dd { color: var(--text-2); } } }
  .pc-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px;
    & dt { font: 500 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); }
    & dd { font: 500 15px/1.25 var(--f-sans); letter-spacing: -.03em; color: var(--text); margin-top: 6px; font-variant-numeric: tabular-nums; } }

  /* Cost calculator */
  .calc { display: grid; grid-template-columns: 1.2fr 1fr; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
  .calc-in { display: grid; gap: 26px; padding: clamp(24px, 3vw, 40px); }
  .calc-out { display: grid; gap: 16px; align-content: start; padding: clamp(24px, 3vw, 40px); background: var(--bg-2); box-shadow: -1px 0 0 var(--line); }
  .rng { display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; align-items: center;
    & .rl { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
    & output { font: 500 17px var(--f-sans); color: var(--text); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
    & input { --p: .5; grid-column: 1 / -1; appearance: none; -webkit-appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
    & input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--amber) calc(var(--p) * 100%), var(--surface-4) 0); }
    & input::-moz-range-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--amber) calc(var(--p) * 100%), var(--surface-4) 0); }
    & input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 5px var(--surface); transition: transform var(--dur) var(--ease); }
    & input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 5px var(--surface); }
    & input:hover::-webkit-slider-thumb { transform: scale(1.15); }
    & input:focus-visible { outline: none; } & input:focus-visible::-webkit-slider-thumb { background: var(--amber); } }
  .calc-total { display: flex; align-items: baseline; gap: 10px; & b { font: 500 clamp(3rem, 2rem + 3vw, 5rem)/1 var(--f-sans); letter-spacing: -.07em; color: var(--amber); font-variant-numeric: tabular-nums; } & span { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } }
  .calc-dl { display: grid; border-top: 1px solid var(--line);
    & div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    & dt { font-size: 14px; color: var(--text-3); } & dd { font: 500 14px var(--f-mono); color: var(--text); } }
  .presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -12px; }

  /* Monte Carlo */
  .mc { display: grid; gap: 14px; padding: 20px; }
  .mc canvas { width: 100%; height: 220px; }
  .mc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; & .btn[disabled] { opacity: .5; } }
  .mc-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); padding-top: 14px;
    & dt { font: 500 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); }
    & dd { font: 500 22px var(--f-sans); letter-spacing: -.04em; color: var(--text); margin-top: 6px; font-variant-numeric: tabular-nums; }
    & div:nth-child(2) dd { color: var(--amber); } }

  /* Alia review picker */
  .opt { width: 100%; text-align: left; cursor: pointer; transition: background var(--dur);
    &:hover { background: var(--surface-2); }
    &.sel { background: var(--amber-08); box-shadow: inset 2px 0 0 var(--amber); } }

  /* Credits & open-in-app */
  .cr { font: 500 13px var(--f-mono); color: var(--amber); letter-spacing: -.02em; white-space: nowrap; }
  /* Price — the one display for what data costs (priceHTML in library.js): credits in amber, dollars beside in a
     readable grey, "Free" in text colour, "—" when the data type isn't sold. Stacks in number columns and finder tiles. */
  .price { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; font: 500 13px var(--f-mono); letter-spacing: -.02em;
    & b { font-weight: 500; color: var(--amber); }
    & small { font-size: 11px; letter-spacing: 0; color: var(--text-3); }
    &.free b { color: var(--text); }
    &.na { color: var(--text-4); } }
  .pricepair { display: grid; gap: 5px; justify-items: start;
    & > span { display: flex; align-items: baseline; gap: 10px; }
    & i { min-width: 70px; font: 500 10px var(--f-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } }
  .facts .price { font-size: 15px; }
  /* "Free" is a price, not a status — no green */
  .cr.free, .lib-rows .p.free, .f-price b.free { color: var(--text); }

  /* Library finder (search → preview → open in app) */
  .finder { display: grid; gap: 0; text-align: left; border-radius: var(--r-xl); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 60px 140px -50px hsl(0 0% 0% / .95); overflow: hidden; }
  .f-bar { display: flex; align-items: center; gap: 14px; height: 76px; padding-inline: 26px; background: var(--surface); border-bottom: 1px solid var(--line);
    & > .ic { width: 22px; height: 22px; color: var(--amber); }
    & input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 500 clamp(1.05rem, .95rem + .45vw, 1.35rem) var(--f-sans); letter-spacing: -.03em; color: var(--text); }
    & input::placeholder { color: var(--text-4); }
    & select { height: 38px; padding: 0 32px 0 14px; border: 0; border-radius: var(--r-full); background: var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round'><path d='M3 4.5l3 3 3-3'/></svg>") right 12px center / 12px no-repeat;
      appearance: none; font: 500 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; }
    & select:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--amber); }
    & kbd { font: 500 11px var(--f-mono); color: var(--text-4); padding: 4px 8px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--line-2); }
    &:focus-within { box-shadow: inset 0 -1px 0 var(--amber); } }
  .f-sugg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 26px; border-bottom: 1px solid var(--line);
    & span { font: 500 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); margin-right: 6px; }
    & button { height: 28px; padding-inline: 12px; border-radius: var(--r-full); font: 500 12px var(--f-mono); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: color var(--dur), box-shadow var(--dur); }
    & button:hover { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-25); } }
  .f-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); min-height: 650px; }   /* 650: tall enough for the placeholders and for the tallest results seen, so the widget keeps its size while loading */
  .f-list { padding: 10px; align-content: start; display: grid; gap: 2px;
    & li { display: grid; gap: 4px; padding: 13px 16px; border-radius: var(--r-md); cursor: pointer; box-shadow: inset 2px 0 0 transparent; transition: background var(--dur); animation: rise .4s var(--ease) both; }
    & li[aria-selected="true"] { background: var(--surface-2); }
    & .fl-n { font-size: 15px; color: var(--text); letter-spacing: -.01em; & mark { background: none; color: var(--amber); } }
    & .fl-m { font: 500 11px var(--f-mono); color: var(--text-4); } }
  .f-prev { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--surface); border-left: 1px solid var(--line);
    & .kicker { font-size: 10px; }
    & .f-name { font: 500 clamp(1.3rem, 1.1rem + .6vw, 1.7rem)/1.15 var(--f-sans); letter-spacing: -.04em; color: var(--text); }
    & .btn { align-self: flex-start; margin-top: 4px; & .ic { width: 13px; height: 13px; } }
    & .note { margin-top: auto; } }
  .f-dl { display: grid; border-top: 1px solid var(--line);
    & div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
    & dt { font: 500 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
    & dd { font: 500 12.5px var(--f-mono); color: var(--text-2); text-align: right; } }
  .f-price { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    & div { display: grid; gap: 6px; padding: 14px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
    & span { font: 500 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
    & b { font: 500 18px var(--f-sans); letter-spacing: -.03em; color: var(--amber); } }
  .f-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 26px; border-top: 1px solid var(--line); background: var(--surface); }
  .phero .finder { max-width: 1160px; margin-inline: auto; }
  .f-foot .note:empty::before { content: "\a0"; }   /* an empty count keeps its line, so the widget does not change height */

  /* Finder loading states. site.js sets data-state on .finder: idle, loading-first (placeholder rows),
     loading-more (old results stay, dimmed, with a moving line), ready, empty, error. */
  .f-results { position: relative; min-width: 0; }
  .f-line { position: absolute; inset: 0 0 auto 0; z-index: 1; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity var(--dur);
    &::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; background: var(--amber); animation: f-run 1.3s var(--ease-in-out) infinite; } }
  .f-list { transition: opacity var(--dur); }
  [data-state="loading-more"] { & .f-list { opacity: .5; pointer-events: none; } & .f-line { opacity: 1; } }
  /* Placeholder bar: --line is the height of the text line it stands for, --bar the visible bar inside it */
  .sk { --line: 17px; --bar: 9px; display: block; box-sizing: content-box; max-width: 100%; height: var(--bar); border-block: calc((var(--line) - var(--bar)) / 2) solid transparent; border-radius: var(--r-xs); background-color: var(--surface-3); background-clip: padding-box;
    background-image: linear-gradient(100deg, transparent 30%, hsl(0 0% 100% / .06) 50%, transparent 70%); background-size: 300% 100%; background-position: 100% 0; animation: f-shimmer 2.6s linear infinite; }
  .f-list li.f-sk { cursor: default; animation: none; min-height: 68px; align-content: start;
    & .sk:first-child { --line: 24px; --bar: 13px; } & .sk:last-child { --line: 14px; --bar: 8px; } }
  .f-prev {
    & .f-name .sk { --line: 1.15em; --bar: .7em; }
    & .f-dl dd:has(.sk) { flex: 1; & .sk { margin-left: auto; } }
    & .f-price b.sk { --line: 23px; --bar: 13px; width: 52%; }
    & .note .sk { --line: 14px; --bar: 8px; }
    & .sk-btn { align-self: flex-start; height: 44px; width: 156px; margin-top: 4px; border: 0; border-radius: var(--r-md); background-clip: border-box; }
    & .sk-link { --line: 17px; width: 132px; } }
  @keyframes f-shimmer { to { background-position: 0 0; } }
  @keyframes f-run { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
  @media (prefers-reduced-motion: reduce) {
    .sk { animation: none; }
    .f-line::after { animation: none; width: 100%; }
  }

  @media (max-width: 1080px) {
    .gate { grid-template-columns: 1fr 1fr; & > :nth-child(odd):not(:first-child) { box-shadow: 0 -1px 0 var(--line); } & > :nth-child(even) { box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); } & > :nth-child(2) { box-shadow: -1px 0 0 var(--line); } & .gate-out { grid-column: 1 / -1; } }
    .pubgrid { grid-template-columns: repeat(2, 1fr); }
    .calc { grid-template-columns: 1fr; } .calc-out { box-shadow: 0 -1px 0 var(--line); }
  }
  @media (max-width: 860px) {
    .f-body { grid-template-columns: 1fr; min-height: 0; }
    .f-results { min-height: 800px; } .f-prev { min-height: 670px; } .f-list li.f-sk { min-height: 95px; }   /* stacked: room for 8 rows that wrap to two lines, as the phone shows them */
    .f-prev { border-left: 0; border-top: 1px solid var(--line); }
    .f-bar { flex-wrap: wrap; height: auto; padding-block: 16px; row-gap: 10px; & input { flex-basis: calc(100% - 40px); height: 34px; } & select { flex: 1; } & kbd { display: none; } }
  }
  @media (max-width: 760px) {
    .lstats { grid-auto-flow: row; grid-template-columns: 1fr 1fr; & > div { box-shadow: 0 -1px 0 var(--line) !important; } & > div:nth-child(-n+2) { box-shadow: none !important; } & > div:nth-child(2n) { box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line) !important; } & > div:nth-child(2) { box-shadow: -1px 0 0 var(--line) !important; } }
    .gate { grid-template-columns: 1fr; & > * { box-shadow: 0 -1px 0 var(--line) !important; } & > :first-child { box-shadow: none !important; } }
    .scope { grid-template-columns: 1fr; }
    .ilist div { grid-template-columns: 1fr; gap: 4px; }
    .record dl div { grid-template-columns: 26px 1fr; & dd { grid-column: 2; } }
    .rb { grid-template-columns: 56px 1fr 48px; & .rb-p { display: none; } }
    .pubgrid { grid-template-columns: 1fr; }
    .calc-in, .calc-out { padding: 22px; }
    .pubc { min-height: 0; }
  }
}

/* ─────────────── ELEVATION: one subtle shadow for every floating box ───────────────
   Window mocks, the production-graph frame, finder, code tabs, tables, calculator, region bars
   and cards all lift by the same small amount. Ruled grids stay flat (they are lines, not boxes).
   Kept last so it wins over the per-component shadows above. */
@layer pages {
  /* Seen from straight above: no offset, an even soft glow on all four sides */
  :root { --lift: 0 0 0 0 transparent; }   /* no elevation: floating boxes sit flat on the page */
  .mock, .finder, .table-wrap, .calc { box-shadow: var(--lift); }
  /* Product-page hero pictures (Library, Alia) are frameless: the same content, no window chrome */
  .mock.bare { background: none; box-shadow: none; border: 0; border-radius: 0; overflow: visible; }
  .mock.bare::after { content: none; }
  .mock.bare > .mock-body { padding: 0; }
  .rbars { box-shadow: inset 0 0 0 1px var(--line), var(--lift); }
  .card:not(.feature):not(.post):not(.job) { box-shadow: inset 0 0 0 1px var(--line), var(--lift); }
  a.card:not(.feature):not(.post):not(.job):hover, .pubc:hover, .pubc:focus-visible { box-shadow: inset 0 0 0 1px var(--line-3), var(--lift); }
  .card.pub.dashed { box-shadow: none; }
}

/* Secondary buttons: frosted, so the label stays readable over the 3D field */
@layer components {
  .btn-soft { background: hsl(0 0% 7% / .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    &:hover { background: hsl(0 0% 14% / .7); } }
}

/* Header surface on its own layer so it fades smoothly (backdrop-filter itself doesn't interpolate) */
@layer chrome {
  .hdr, .hdr[data-scrolled], .hdr:has(.mega.open) { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: hsl(0 0% 7% / .72); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
    box-shadow: inset 0 -1px 0 var(--line); opacity: 0; transition: opacity 450ms var(--ease); }
  .hdr[data-scrolled]::before, .hdr:has(.mega.open)::before { opacity: 1; }
}

@layer pages {
  /* Cost curve: annual licenses vs. pay as you go (chart colors validated for the dark surface: CVD dE 25.8) */
  .cc { --s-c: #c58409; --s-t: #6b8ce0; display: grid; gap: 22px; padding: 28px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .cc-top { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
  .cc .seg { display: flex; gap: 6px; }
  .cc-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--text-2);
    & span { display: inline-flex; align-items: center; gap: 8px; } & i { width: 16px; height: 2px; } & .c { background: var(--s-c); }
    & .t { background: repeating-linear-gradient(90deg, var(--s-t) 0 5px, transparent 5px 9px); } }
  .cc-chart { position: relative; min-width: 0;
    & svg { display: block; width: 100%; height: auto; overflow: visible; }
    & .gl { stroke: var(--line); } & .bl { stroke: var(--line-3); } & .ax { fill: var(--text-3); font: 11px var(--f-mono); }
    & .tl { fill: none; stroke: var(--s-t); stroke-width: 2; stroke-dasharray: 6 5; stroke-linejoin: round; }
    & .cl { fill: none; stroke: var(--s-c); stroke-width: 2; stroke-linejoin: round; } & .ca { fill: var(--s-c); opacity: .12; }
    & .td { fill: var(--s-t); stroke: var(--surface); stroke-width: 2; } & .cd { fill: var(--s-c); stroke: var(--surface); stroke-width: 2; }
    & .lb { fill: var(--text); font: 600 13px var(--f-sans); } & .ls { fill: var(--text-2); font: 12px var(--f-sans); } & .xh { stroke: var(--line-3); } }
  .cc-tip { position: absolute; top: 12px; min-width: 200px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-3); font-size: 12.5px; pointer-events: none;
    & b { display: block; margin-bottom: 6px; font: 500 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
    & div { display: flex; justify-content: space-between; gap: 16px; color: var(--text-2); } & strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } }
  .cc-h { font: 500 11.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
  .cc-team { display: grid; grid-template-columns: auto 1fr 1fr; gap: 16px 32px; align-items: center; padding-block: 18px; border-block: 1px solid var(--line); }
  .cc-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .cc-side { display: grid; gap: 20px; align-content: start; min-width: 0; padding: 22px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line);
    & header { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
    & header .cc-h { display: inline-flex; align-items: center; gap: 8px; }
    & header .cc-h::before { content: ""; width: 14px; height: 2px; }
    &.c header .cc-h::before { background: var(--s-c); } &.t header .cc-h::before { background: repeating-linear-gradient(90deg, var(--s-t) 0 5px, transparent 5px 9px); }
    & header b { font: 500 clamp(1.8rem, 1.3rem + 1.4vw, 2.4rem)/1 var(--f-mono); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
    &.c header b { color: var(--amber); } &.t header b { color: var(--text); }
    & .cc-sub { font-size: 13px; color: var(--text-3); } }
  .cc-opt { display: grid; gap: 10px; } .cc-opt .presets { margin-top: 0; }
  .cc .rl { font: 500 12.5px var(--f-mono); color: var(--text-2); }
  .cc-fine { margin: 0; font-size: 13px; color: var(--text-3); }
  @media (max-width: 900px) { .cc-team, .cc-sides { grid-template-columns: 1fr; } .cc { padding: 20px; } .cc-side { padding: 18px; } }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE LOOK. Rules that set the site's look: amber only where it carries meaning, calmer markers and
   section rhythm. Scoped to html:root, which always matches and gives each rule one extra class of weight over the base rules above.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 3. Amber only where it means something --------------------------------- */
/* emphasis outside the main title inherits the heading colour */
html:root :is(h2, h3, h4, .h2, .h3):not(h1) em { color: inherit; }
html:root h1 em { color: var(--amber); }
/* ...except the closing band, whose phrase stays amber */
html:root .cta-card :is(h2, .h2) em { color: var(--amber); }

/* ticks and check icons */
html:root .checks li::before,
html:root .spec-grid li::before {
  background: var(--surface-3) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfbfbf' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center / 70% no-repeat; }
html:root .ticks li::before { background: var(--text-2); }

/* small furniture */
html:root .dot.on { background: var(--text); box-shadow: 0 0 0 3px var(--line-2); }
html:root .scroll-bar { background: var(--line-3); }
html:root .marquee-track span::after { background: var(--text-3); }
html:root .note b { color: var(--text-2) !important; }   /* "Coming soon" sets amber inline */

/* the cost chart uses the token, not its own #c58409 */
html:root .cc { --s-c: var(--amber); }

/* 5. Calmer section rhythm ------------------------------------------------ */
html:root { --sec-py: clamp(72px, 9vw, 136px); }
html:root .section-head { margin-bottom: clamp(40px, 5vw, 72px); }
html:root .section.compact { --sec-py: clamp(56px, 6vw, 88px); padding-block: clamp(56px, 6vw, 88px); }
html:root .section.compact .section-head { margin-bottom: clamp(32px, 4vw, 56px); }

/* FAQ: kicker, heading and list are centred on every page (same as .section-head.center) */
html:root #faq .section-head { align-items: center; margin-inline: auto; text-align: center; }
/* ═══ end of calm look ═══ */


/* ═══ publisher strip (change 6): <publisher-strip>, one static row under the hero on /api/ and /solutions/publishers/ ═══ */
publisher-strip { display: block; border-bottom: 1px solid var(--line); }
.pstrip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; padding-block: 22px; }
.pstrip > a { font: 500 15px/1.3 var(--f-sans); color: var(--text-2); text-decoration: none; transition: color var(--dur, 200ms); }
.pstrip > a:hover { color: var(--text); }
.pstrip > .pstrip-slot { padding: 6px 12px; border: 1px dashed var(--line-3); border-radius: var(--r-md); }
/* the row needs ~1000px: below that, names in 3 columns and the slot full width under them */
@media (max-width: 1000px) {
  .pstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; }
  .pstrip > .pstrip-slot { grid-column: 1 / -1; text-align: center; margin-top: 10px; }
}
@media (max-width: 700px) {
  .pstrip { grid-template-columns: 1fr 1fr; gap: 4px 20px; }
  .pstrip > a:not(.pstrip-slot) { padding-block: 6px; }
}
/* ═══ end of publisher strip ═══ */


/* ═══════════════════════════════════════════════════════════════════════════
   APP LOOK. How the product's own screens look (circa-apps origin/dev, packages/shell: circa-ui tokens, GraphPage, Table).
   Every picture of the product on this site is drawn in it. Nothing outside an ".app-pic" changes.

   Use it for a new picture:
     1. Put class "app-pic" on the picture's root (the window body, or any box). Add "app-grid" for the app's dot-grid canvas.
     2. Draw with the tokens below (var(--app-*)). The root already sets the app's type (12px/16px for captions, 14px/20px body),
        square corners, no shadows, and resets the site's own text styles inside it. Round shapes (graph handles) say so: .round.
     3. Put the picture's own rules in a block like "picture: model graph" below, scoped under .app-pic.
     4. Teammate pointers: AppPic.cursor(name, colour, x, y) in js/hero/concepts.js gives the markup; the look is .ap-cur here.
   The root is also a container (inline size), so a picture can pick its layout from its own width: @container (min-width: ...).

   Unlayered on purpose: it must win over the site's layered rules (.mock-body padding and the like) inside the picture.
   Font: the app uses Inter. The site loads Geist, so --app-font is the site's own stack; point it at "Inter" first once Inter is loaded.
   Colours: blue is for hover and selection only, yellow only for primary actions and the selected tool, so a picture draws neither
   unless it shows those states. Values are the app's, in the same hex.
   ═══════════════════════════════════════════════════════════════════════════ */
.app-pic {
  /* surfaces and lines */
  --app-bg: #131415;                 /* page and canvas */
  --app-surface: #202124;            /* tab bar, tooltips */
  --app-panel: #1A1B1D;              /* a panel on the page */
  --app-header: #212223;             /* a table's header row */
  --app-border: #FFFFFF1F;
  /* text */
  --app-text: #FFFFFFE5;
  --app-muted: #FFFFFFA6;
  --app-subtle: #FFFFFF73;
  --app-text-on-yellow: #000000E5;
  /* blue: hover and selection */
  --app-ring: #3F8AE2;
  --app-selection: #4B96FF4D;        /* selected table row (reads about #243B5B on the page) */
  --app-hover-outline: #FFFFFF73;    /* thin light outline on a hovered row */
  /* lists and tables */
  --app-stripe: #18191A;             /* every second row */
  --app-field: #323336;              /* flat search field */
  /* yellow: the sales line; green: a figure going up */
  --app-primary: #FFC80F;
  --app-primary-text: #FEE484;       /* yellow as text (hover of a primary button, matched text) */
  --app-success: #00B1A0;
  --app-success-text: #74DBD3;
  --app-warning: #F99B2E;
  --app-warning-text: #FCC88C;
  /* graph */
  --app-node: #394C81;               /* process tile */
  --app-node-neutral: #262626;       /* material tile */
  --app-edge: #646464;               /* wires and handles */
  --app-grid: #5A5B5B;               /* canvas dots */
  /* teammate colours (not blue) */
  --app-red: #E6194B; --app-orange: #F58232; --app-yellow: #FFE119; --app-green: #3CB44B;
  --app-teal: #AAFFC3; --app-lblue: #41D7F5; --app-dblue: #4164D7; --app-violet: #911EB4;
  /* type */
  --app-font: var(--f-sans);

  position: relative; display: block; overflow: hidden; padding: 0; container-type: inline-size;
  background-color: var(--app-bg); color: var(--app-text);
  font: 400 14px/20px var(--app-font); font-feature-settings: normal; font-variant-numeric: normal; font-synthesis: none;
  letter-spacing: 0; text-transform: none; text-align: left; text-wrap: nowrap; -webkit-font-smoothing: antialiased;
}
.app-pic *, .app-pic *::before, .app-pic *::after { box-sizing: border-box; border-radius: 0; }
.app-pic .round { border-radius: 50%; }                  /* only avatars and graph handles are round */
.app-pic svg { display: block; flex: none; max-width: none; }
/* the app's canvas: flat page colour, sparse dots (2px, 48px apart) */
.app-pic.app-grid {
  background-image: radial-gradient(circle at 1px 1px, var(--app-grid) 0, var(--app-grid) .8px, transparent 1.3px);
  background-size: 48px 48px; background-position: 20px 14px;
}

/* teammate pointer: the app's own arrow (SvgCollabCursor.tsx) plus a square name tag. Position it: left/top = the arrow's tip.
   Colour classes: red orange yellow green teal lblue dblue violet. Tag text is black, white on red, dblue and violet. */
.app-pic .ap-cur { --c: var(--app-red); --t: var(--app-text-on-yellow); position: absolute; z-index: 5; width: 25px; height: 25px; margin: -2px 0 0 -2px; pointer-events: none; }
.app-pic .ap-cur svg { position: absolute; left: 0; top: 0; width: 25px; height: 25px; fill: var(--app-bg); stroke: var(--c); stroke-width: 2; stroke-linejoin: round; overflow: visible; }
.app-pic .ap-tag { position: absolute; left: 17px; top: 20px; display: block; height: 16px; padding: 0 4px; background: var(--c); color: var(--t); font: 500 12px/16px var(--app-font); white-space: nowrap; }
.app-pic .ap-cur.red { --c: var(--app-red); --t: #fff; } .app-pic .ap-cur.orange { --c: var(--app-orange); } .app-pic .ap-cur.yellow { --c: var(--app-yellow); }
.app-pic .ap-cur.green { --c: var(--app-green); } .app-pic .ap-cur.teal { --c: var(--app-teal); } .app-pic .ap-cur.lblue { --c: var(--app-lblue); }
.app-pic .ap-cur.dblue { --c: var(--app-dblue); --t: #fff; } .app-pic .ap-cur.violet { --c: var(--app-violet); --t: #fff; }

/* ── model graph: every Gesserit graph on the site, drawn by appGraph in js/hero/concepts.js (HeroKit.appGraph) ──
   A tile is the app's node: 144 x 32 (--tw sets the width, never under 96), 8px padding, one line of 12/16 text. Handles are 11px.
   appGraph centres the graph in its box and picks the arrangement (phone option) from the box's size. Nothing animates. */
.app-pic .ag-graph { position: absolute; user-select: none; -webkit-user-select: none; }
.app-pic .ag-graph.ag-flow { position: relative; margin-inline: auto; }   /* appGraph place "flow": in the page's flow, centred sideways */
.app-pic .ag-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.app-pic .ag-wires path { fill: none; stroke: var(--app-edge); stroke-width: 1; }
.app-pic .ag-t { position: absolute; z-index: 1; width: var(--tw, 144px); height: 32px; margin: 0; padding: 8px; border: 0; appearance: none; display: flex; align-items: center; justify-content: center;
  font: 400 12px/16px var(--app-font); color: var(--app-text); text-align: center; }   /* a <button> when the graph is interactive */
.app-pic .ag-t.m { background: var(--app-node-neutral); }
.app-pic .ag-t.p { background: var(--app-node); }
.app-pic .ag-n { display: block; min-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
/* name and region are ONE centred line inside .ag-n: "PCB, 6-layer (CN)", the region in the dimmer text colour */
.app-pic .ag-r { color: var(--app-muted); }
/* outline at rest: 1px over the tile's edge, one pixel past the bottom and right, so stacked tiles share a line */
.app-pic .ag-t::before { content: ""; position: absolute; left: 0; top: 0; right: -1px; bottom: -1px; border: 1px solid var(--o, var(--app-border)); pointer-events: none; }
/* a tile a teammate has selected: 1px in their colour (appGraph sets --o on the tile) */
/* hover and selected look the same: a 2px blue frame straddling the edge, and the tile's dot turns blue */
.app-pic .ag-t::after { content: ""; position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; border: 2px solid var(--app-ring); opacity: 0; pointer-events: none; z-index: 1; }
.app-pic .ag-i .ag-t { cursor: pointer; }
.app-pic .ag-t:focus { outline: 0; }
.app-pic .ag-graph:not(.ag-nh) .ag-t:hover, .app-pic .ag-t.is-sel, .app-pic .ag-t:focus-visible { z-index: 3; }
.app-pic .ag-graph:not(.ag-nh) .ag-t:hover::after, .app-pic .ag-t.is-sel::after, .app-pic .ag-t:focus-visible::after { opacity: 1; }
/* handles: 11px circles centred on the tile's edge. Materials: right, filled grey. Processes: left, hollow with a grey ring */
.app-pic .ag-h { position: absolute; top: 11px; width: 11px; height: 11px; border: 1px solid var(--app-edge); border-radius: 50%; z-index: 2; pointer-events: none; }
.app-pic .ag-t.m .ag-h { right: -6px; background: var(--app-edge); }
.app-pic .ag-t.p .ag-h { left: -5px; background: var(--app-bg); }
.app-pic .ag-graph:not(.ag-nh) .ag-t.m:hover .ag-h, .app-pic .ag-t.m.is-sel .ag-h, .app-pic .ag-t.m:focus-visible .ag-h { background: var(--app-ring); border-color: var(--app-ring); }
.app-pic .ag-graph:not(.ag-nh) .ag-t.p:hover .ag-h, .app-pic .ag-t.p.is-sel .ag-h, .app-pic .ag-t.p:focus-visible .ag-h { border-color: var(--app-ring); }
/* the window keeps the height the old picture gave it, so the other two tabs look as they did */
@media (min-width: 761px) { .sv-body[data-model-graph] { min-height: 448.39px; } }

/* ───────────────────────────────────────────────────────────────────────────
   SHARED PARTS for any picture in the app look (Rule 2: the picture keeps its composition and takes only the app's look).
   A builder adds class "app-pic" to the picture's root and gets all of this with the site's own markup; picture-specific rules go in a
   small block of their own below, scoped under the picture. Everything is scoped under .app-pic, so nothing else on the site changes.
   (Generalised from the home panels "I need LCA data" and "I publish LCA data", which keep looking exactly as before.)

   search field   <div class="lib-q-mini"><c-icon name="search"></c-icon><span>text</span><span class="caret"></span></div>
   results line   <p class="note"><span>1,284 results</span><a class="link" href="#">Open all in Circa</a></p>
   list rows      <ul class="lib-rows"><li><b>name</b><span>small line</span><span class="p">1 credit</span></li> ...</ul>
                  zebra, hover = thin light outline, selected row: class "sel" (or is-sel, aria-selected="true"); the price may have class "free"
   table          <div class="tbl"><div class="m-row head"><span>..</span>..</div><div class="m-row"><span>..</span><span>..</span><span><div class="conf"><i style="--v:.9"></i><b>90</b></div></span></div> ..</div>
                  set the columns on .m-row (grid-template-columns); "head" = an existing header row, "sel" = selected row, class "no-cols" on .tbl
                  = no column lines, .conf.low = warning tone, <small> under a first cell = the 12px small line
   figure tile    <div class="card"><span class="l">label</span><b>value</b><span class="d">change</span></div>
   tabs           <div class="ap-tabs"><button class="is-on">One</button><button>Two</button></div>   (selected: .is-on or aria-selected="true")
   buttons        <button class="ap-btn primary">Label</button>   .ap-btn = secondary, .primary = yellow, .lg = 36px
   avatar         <span class="ap-av green">MK</span>             colours: red orange yellow green teal lblue dblue violet
   teammate       AppPic.cursor(name, colour, x, y) in js/hero/concepts.js (HeroKit.AppPic), look = .ap-cur above
   ─────────────────────────────────────────────────────────────────────────── */
/* search field: flat, no amber outline, no rounding */
.app-pic .lib-q-mini { gap: 0; height: 49px; padding: 0 16px; background: var(--app-field); box-shadow: none; font: 400 14px/20px var(--app-font); letter-spacing: 0; color: var(--app-text); }
.app-pic .lib-q-mini .ic { width: 16px; height: 16px; margin-right: 12px; color: var(--app-muted); }
.app-pic .lib-q-mini .caret { width: 1px; height: 18px; margin-left: 1px; background: var(--app-text); }   /* still blinks, as before */
/* results line */
.app-pic .note { align-items: center; height: 20px; margin: 12px 0 8px; padding: 0 16px; font: 400 14px/20px var(--app-font); letter-spacing: 0; text-transform: none; color: var(--app-subtle); }
.app-pic .note .link { display: inline; padding: 0; background: none; font: 400 14px/20px var(--app-font) !important; letter-spacing: 0; text-transform: none; color: var(--app-muted);
  text-decoration: underline; text-underline-offset: 2px; transition: none; }
.app-pic .note .link:hover, .app-pic .note .link:focus-visible { color: var(--app-text); }
/* list rows: 56px, no lines, every second row a little darker, a thin light outline on hover */
.app-pic .lib-rows { display: block; }
.app-pic .lib-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 0 16px; height: 56px; padding: 0 16px; border-top: 0; font-size: 14px; color: var(--app-muted); }
.app-pic .lib-rows li:nth-child(even) { background: var(--app-stripe); }
.app-pic .lib-rows li:hover { outline: 1px solid var(--app-hover-outline); outline-offset: -1px; }
.app-pic .lib-rows li b { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px/20px var(--app-font); color: var(--app-text); }
.app-pic .lib-rows li span { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 12px/16px var(--app-font); letter-spacing: 0; color: var(--app-subtle); }
.app-pic .lib-rows li:hover span { color: var(--app-muted); }
.app-pic .lib-rows li .p { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font: 400 14px/20px var(--app-font); font-variant-numeric: tabular-nums; color: var(--app-muted); }
.app-pic .lib-rows li .p.free { color: var(--app-subtle); }
.app-pic .lib-rows li:hover .p { color: var(--app-text); }
.app-pic .lib-rows li:hover .p.free { color: var(--app-muted); }
/* the selected row: the app's blue tint over the zebra */
.app-pic .lib-rows li:is(.sel, .is-sel, [aria-selected="true"]) { background: linear-gradient(var(--app-selection), var(--app-selection)), var(--app-stripe); }
.app-pic .lib-rows li:is(.sel, .is-sel, [aria-selected="true"]) span { color: var(--app-muted); }
.app-pic .lib-rows li:is(.sel, .is-sel, [aria-selected="true"]) .p { color: var(--app-text); }
.app-pic .lib-rows li:is(.sel, .is-sel, [aria-selected="true"]) .p.free { color: var(--app-muted); }

/* table: square, 14px, column lines (not with .no-cols), no row lines, zebra, flat header, hover outline, selected = blue tint without a bar */
.app-pic .tbl { display: grid; font: 400 14px/20px var(--app-font); box-shadow: none; overflow: hidden; }
.app-pic .tbl .m-row { gap: 0; align-items: stretch; min-height: 36px; padding: 0; border-top: 0; background-color: transparent; box-shadow: none; color: var(--app-muted); }
.app-pic .tbl .m-row > span { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px/20px var(--app-font); letter-spacing: 0; color: var(--app-muted); }
.app-pic .tbl .m-row > span:first-child { padding-left: 16px; color: var(--app-text); }
.app-pic .tbl .m-row > span:last-child { padding-right: 16px; }
.app-pic .tbl .m-row > span:nth-child(2) { color: var(--app-muted); }
.app-pic .tbl:not(.no-cols) .m-row > span + span { border-left: 1px solid var(--app-border); }
.app-pic .tbl .m-row > span small { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; font: 400 12px/16px var(--app-font); letter-spacing: 0; color: var(--app-subtle); }
.app-pic .tbl:not(:has(> .head)) > .m-row:nth-child(even), .app-pic .tbl:has(> .head) > .m-row:not(.head):nth-child(odd) { background-color: var(--app-stripe); }
.app-pic .tbl .m-row.head { min-height: 36px; padding: 0; background-color: var(--app-header); }
.app-pic .tbl .m-row.head > span { font: 400 12px/16px var(--app-font); letter-spacing: 0; text-transform: none; color: var(--app-subtle); }
.app-pic .tbl .m-row:not(.head):hover { outline: 1px solid var(--app-hover-outline); outline-offset: -1px; }
.app-pic .tbl .m-row.sel { background-image: linear-gradient(var(--app-selection), var(--app-selection)); box-shadow: none; }
.app-pic .tbl .m-row.sel > span:nth-child(2), .app-pic .tbl .m-row.sel > span small { color: var(--app-muted); }
/* confidence or share bar: a thin square bar in a neutral light tone; low = the warning tone */
.app-pic .conf { gap: 8px; width: 100%; }
.app-pic .conf i { height: 4px; background: var(--app-border); }
.app-pic .conf i::after { background: var(--app-muted); }
.app-pic .conf b { width: auto; min-width: 24px; font: 400 12px/16px var(--app-font); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--app-muted); }
.app-pic .conf.low i::after { background: var(--app-warning); }
.app-pic .conf.low b { color: var(--app-warning-text); }

/* figure tile: square, 1px border, no shadow, 12px label over a 14px value */
.app-pic .card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px; border: 1px solid var(--app-border); background: none; box-shadow: none; transition: none; }
.app-pic .card::before { content: none; }
.app-pic .card .l { overflow: hidden; text-overflow: ellipsis; font: 400 12px/16px var(--app-font); letter-spacing: 0; text-transform: none; color: var(--app-muted); }
.app-pic .card b { font: 500 14px/20px var(--app-font); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--app-text); }
.app-pic .card .d { font: 400 12px/16px var(--app-font); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--app-success); }

/* small underline tabs: 14px, a 1px line under the row, the selected one white with a 2px yellow underline */
.app-pic .ap-tabs { display: flex; align-items: stretch; padding: 0 8px; border-bottom: 1px solid var(--app-border); }
.app-pic .ap-tabs > * { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px; border: 0; background: none; white-space: nowrap; cursor: pointer;
  font: 400 14px/20px var(--app-font); letter-spacing: 0; text-transform: none; color: var(--app-muted); }
.app-pic .ap-tabs > :hover, .app-pic .ap-tabs > :focus-visible { color: var(--app-text); }
.app-pic .ap-tabs > :focus-visible { outline: 2px solid var(--app-ring); outline-offset: -2px; }
.app-pic .ap-tabs > :is(.is-on, [aria-selected="true"]) { color: var(--app-text); }
.app-pic .ap-tabs > :is(.is-on, [aria-selected="true"])::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--app-primary); }

/* buttons: small (28px, 12px text), square. Secondary by default, .primary = the app's yellow, .lg = 36px / 14px */
.app-pic .ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 28px; margin: 0; padding: 0 8px; flex: none; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--app-border); background: #FFFFFF1F; color: var(--app-text); font: 400 12px/16px var(--app-font); letter-spacing: 0; text-transform: none; text-decoration: none; transition: none; }
.app-pic .ap-btn:hover { background: #FFFFFF3D; }
.app-pic .ap-btn:focus-visible { outline: 2px solid var(--app-ring); outline-offset: 1px; }
.app-pic .ap-btn.lg { height: 36px; padding: 0 16px; font-size: 14px; line-height: 20px; }
.app-pic .ap-btn.primary { border-color: transparent; background: var(--app-primary); color: var(--app-text-on-yellow); }
.app-pic .ap-btn.primary:hover { border-color: var(--app-primary); background: var(--app-bg); color: var(--app-primary-text); }

/* avatar: 28px round, a teammate colour, 12px initials (white on the three dark colours, as on the name tags, for contrast) */
.app-pic .ap-av { --c: var(--app-red); --t: var(--app-text-on-yellow); display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c); color: var(--t); font: 500 12px/16px var(--app-font); letter-spacing: 0; text-transform: uppercase; }
.app-pic .ap-av.red { --c: var(--app-red); --t: #fff; } .app-pic .ap-av.orange { --c: var(--app-orange); } .app-pic .ap-av.yellow { --c: var(--app-yellow); }
.app-pic .ap-av.green { --c: var(--app-green); } .app-pic .ap-av.teal { --c: var(--app-teal); } .app-pic .ap-av.lblue { --c: var(--app-lblue); }
.app-pic .ap-av.dblue { --c: var(--app-dblue); --t: #fff; } .app-pic .ap-av.violet { --c: var(--app-violet); --t: #fff; }

/* ─── picture: library search (class pic-search): the home "I need LCA data" panel AND the Library page hero ───
   Level 1 app look for this picture, approved by Min 2026-11-12. Both pictures carry the same markup (js/hero/concepts.js libWindow
   copies index.html) and the same rules, these ones, so they cannot drift. The look itself is the shared parts above; what stays here
   is the padding, the selected second result row and the blinking caret (static when motion is reduced). */
.app-pic.pic-search {
  padding: 18px 18px 0;
  /* the second result row is selected */
  & .lib-rows li:nth-child(2) { background: linear-gradient(var(--app-selection), var(--app-selection)), var(--app-stripe); }
  & .lib-rows li:nth-child(2) span { color: var(--app-muted); }
  & .lib-rows li:nth-child(2) .p { color: var(--app-text); }
  & .lib-rows li:nth-child(2) .p.free { color: var(--app-muted); }
  @media (prefers-reduced-motion: reduce) { & .lib-q-mini .caret { animation: none; } }
}
@media (max-width: 480px) { .app-pic.pic-search { padding: 12px 12px 0; } }
/* ─── picture: Library page hero (bare search and results, js/hero/concepts.js libWindow) ───
   Same content and look as the home "I need LCA data" panel, with no window bar. The block gets the app's canvas colour and a 1px
   outline so it sits on the page. The second row is selected by the shared rule (.pic-search). The rest is the shared parts. */
.phero .mock.bare > .mock-body.app-pic { padding: 18px 18px 0; background: var(--app-bg); border: 1px solid var(--app-border); }
@media (max-width: 480px) { .phero .mock.bare > .mock-body.app-pic { padding: 12px 12px 0; } }
/* one stacked page: the window keeps the 419px body the old picture gave it, so the stage does not get shorter */
@media (max-width: 760px) { .stage-view .app-pic[data-for="license"], .stage-view .app-pic[data-for="publish"] { min-height: 419px; } }
/* ─── picture: Publishers page hero, the sales report (solutions/publishers/index.html, .mock.pub-sales window) ───
   Level 1 app look: same two figure tiles and four dataset rows as before, same words and numbers. The window frame (.mock and its bar) is
   untouched. Shared parts do the work (.card, .tbl, .conf). The two growth figures are yellow (--app-primary-text), chosen by Min. The home
   panel "I publish LCA data" shows this same picture (see the spread rule after this block). */
.mock-body.app-pic.pub-sales {
  display: flex; flex-direction: column; gap: 16px; padding: 16px 0 0; background: var(--app-bg);
  & > .grid { display: grid; flex: none; gap: 16px; padding: 0 16px; }
  & .card .d { color: var(--app-primary-text); }
  & .tbl .m-row { grid-template-columns: minmax(0, 1fr) 150px 160px; }
  /* the share bar cell is a row (the shared cell is a column) */
  & .tbl .m-row > .conf { flex-direction: row; align-items: center; justify-content: flex-start; }
  & .tbl .m-row > .conf i { flex: 1 1 auto; min-width: 24px; }
  @media (prefers-reduced-motion: reduce) { & .conf i::after { animation: none; } }   /* the one-time grow-in is skipped */
}
@media (max-width: 520px) {
  .mock-body.app-pic.pub-sales { gap: 12px; padding-top: 12px;
    & > .grid { gap: 12px; padding: 0 12px; }
    & .card { padding: 12px; }
    /* the license counts stay (no words dropped): under the name in small text, the share bar keeps its own column */
    & .tbl .m-row { grid-template-columns: minmax(0, 1fr) 112px; }
    & .tbl .m-row > span:nth-child(1) { grid-row: 1; grid-column: 1; padding-bottom: 0; }
    & .tbl .m-row > span:nth-child(2) { display: block; grid-row: 2; grid-column: 1; padding: 0 8px 8px 16px; font-size: 12px; line-height: 16px; color: var(--app-subtle); border-left: 0; }
    & .tbl .m-row:hover > span:nth-child(2) { color: var(--app-muted); }
    & .tbl .m-row > .conf { grid-row: 1 / span 2; grid-column: 2; }
  }
}
/* the home panel "I publish LCA data" shows this same picture (same markup, same .pub-sales rules above), only taller: the table takes the
   spare height and its four rows share it equally, so the picture stays calm and balanced, with no empty band. Words and parts unchanged. */
.stage-view .mock-body.app-pic.pub-sales { & .tbl { flex: 1 1 auto; grid-auto-rows: 1fr; } }
@media (min-width: 521px) { .stage-view .mock-body.app-pic.pub-sales { gap: 24px; padding-top: 24px; & > .grid { gap: 24px; } } }
/* ─── picture: Alia page, hero table and review panel (alia/index.html) ───
   Level 1 app look: same rows, words and numbers as before. The header row stays. The selected row is the app's blue tint, the low
   score (72) is drawn in the warning colour because it is a status. The bar keeps its one-time grow-in. The table parts are the shared ones;
   what stays here is the column sizes, the confidence cell (a row, not a column), the two lines under the table and the review footer. */
.phero .mock.bare > .mock-body.app-pic, #review .mock-body.app-pic {
  & .tbl .m-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) 128px; }
  & .tbl .m-row > .conf { flex-direction: row; align-items: center; justify-content: flex-start; width: auto; }
  & .tbl .m-row > .conf i { flex: 1 1 auto; min-width: 24px; }
  & .tbl .m-row > .conf b { flex: none; text-align: right; }
  /* the selected row is the same blue on every row (laid on the canvas colour, so a zebra row does not make it lighter) */
  & .tbl .m-row.sel { background-image: linear-gradient(var(--app-selection), var(--app-selection)), linear-gradient(var(--app-bg), var(--app-bg)); }
  /* the dataset cell is a plain block so a long name ends in an ellipsis (a flex cell would cut it hard) */
  & .tbl .m-row:not(.head) > span:nth-child(2):not(.conf) { display: block; }
}
.phero .mock.bare > .mock-body.app-pic:has(> .tbl) {
  gap: 0;
  & > p { margin: 0; padding: 0 16px; height: auto; white-space: normal; text-wrap: pretty; font: 400 14px/20px var(--app-font); letter-spacing: 0; color: var(--app-subtle); }
  & > p.small { padding-top: 12px; color: var(--app-muted); }
  & > p.small b { font-weight: 500; color: var(--app-text); }
  & > p.note { padding-top: 4px; padding-bottom: 16px; font-size: 12px; line-height: 16px; }
}
/* review panel: the row is a button (click picks it), so it is reset to the table look and gets a visible keyboard ring */
#review .mock-body.app-pic {
  gap: 0; padding: 18px;
  & .tbl .m-row { grid-template-columns: minmax(0, 1fr) 160px 128px; }
  /* one line per cell: plain blocks, so a long candidate ends in an ellipsis and the 36px row stays centred */
  & .tbl .m-row:not(.head) > span:not(.conf) { display: block; padding-block: 8px; }
  & .tbl .m-row.opt { width: 100%; margin: 0; border: 0; border-radius: 0; text-align: left; cursor: pointer; transition: none; font: inherit; color: inherit; appearance: none; }
  & .tbl .m-row.opt:focus { outline: 0; }
  & .tbl .m-row.opt:focus-visible { outline: 2px solid var(--app-ring); outline-offset: -2px; z-index: 1; }
  & .tbl .m-row.opt:not(.sel):hover { background-color: transparent; }
  & .tbl .m-row.opt.sel > span:nth-child(2) { color: var(--app-muted); }
  & .rv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: auto; margin: 12px 0 0; padding: 0 16px; white-space: normal; }
  & .rv-foot [data-sel] { color: var(--app-text); }
  & .rv-go { flex: none; white-space: nowrap; color: var(--app-primary-text); }
}
/* phone: the middle column goes, as before; the review's candidate may wrap so NMC811, NMC622 and LFP stay readable */
@media (max-width: 760px) {
  .phero .mock.bare > .mock-body.app-pic, #review .mock-body.app-pic {
    & .tbl .m-row { grid-template-columns: minmax(0, 1fr) 112px; }
    & .tbl .m-row > span:nth-child(2):not(.conf) { display: none; }
    & .tbl .m-row:not(.head) > span:nth-child(2):not(.conf) { display: none; }
  }
  #review .mock-body.app-pic { padding: 12px;
    & .tbl .m-row > span:first-child { white-space: normal; overflow: visible; }
  }
}
/* ─── picture: API page hero, the code tabs (api/index.html, .codetabs). Looks only; every character of the code stays. ───
   A square panel like the app's developer panels, the app's underline tabs, calm code colours. Code stays monospace. */
.app-pic.codetabs { background: var(--app-bg); border: 1px solid var(--app-border); box-shadow: none; }   /* same canvas and outline as the other product pictures */
.app-pic.codetabs .ct-bar { background: none; }
.app-pic.codetabs .ct-bar .ep { margin: 0 0 0 auto; padding: 8px; align-self: center; cursor: default; color: var(--app-muted); font: 400 12px/16px var(--app-font); }
.app-pic.codetabs .ct-bar .ep:hover { color: var(--app-muted); }
.app-pic.codetabs .code { margin: 0; padding: 20px 24px; overflow-x: auto; white-space: pre; background: none; box-shadow: none;
  font: 400 12px/20px var(--f-mono); letter-spacing: 0; color: var(--app-muted); tab-size: 2;
  scrollbar-width: thin; scrollbar-color: #FFFFFF2E transparent; }
.app-pic.codetabs .code::-webkit-scrollbar { height: 8px; }
.app-pic.codetabs .code::-webkit-scrollbar-track { background: transparent; }
.app-pic.codetabs .code::-webkit-scrollbar-thumb { background: #FFFFFF2E; border-radius: 0; }
.app-pic.codetabs .code .c { color: var(--app-subtle); }
.app-pic.codetabs .code .s { color: var(--app-success-text); }
.app-pic.codetabs .code .k { color: var(--app-text); }
.app-pic.codetabs .code .p { color: #C8A5FF; }
.app-pic.codetabs .code .n { color: var(--app-primary-text); }
@media (max-width: 760px) { .app-pic.codetabs .ct-bar .ep { display: none; } .app-pic.codetabs .code { padding: 16px; } }
/* ═══ end of app look ═══ */
/* ─── product pictures: rounded outer box (Min: "the product graphic canvas also should be rounded to fit every other graphic") ───
   The four product hero pictures (Gesserit graph, Library search, Alia table, API code tabs) are bare boxes with a 1px outline. Their outer box
   gets the same corner as the window frame every other picture sits in (.mock = var(--r-lg)). Only this outer box is rounded; everything inside
   keeps square corners. overflow: hidden clips the inside to the rounded padding edge, so the outline follows the curve with no double line. */
.phero :is(.mock.bare > .mock-body.app-pic, .app-pic.codetabs, hero-concept.pc-pic) { border-radius: var(--r-lg); overflow: hidden; }

/* ═══ Contact pop-up (js/site.js "Contact pop-up"): a native <dialog> over the dimmed page ═══ */
@layer chrome {
  .cf {
    position: fixed; inset: 0; margin: auto; width: min(560px, 100vw - 32px); max-width: none; max-height: calc(100dvh - 48px);
    padding: 0; border: 0; border-radius: var(--r-xl); overflow: hidden auto; overscroll-behavior: contain;
    background: var(--surface); color: var(--text-2);
    box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -20px hsl(0 0% 0% / .85);   /* same depth as the mega menu */
    opacity: 0; translate: 0 10px;
    transition: opacity 200ms var(--ease), translate 200ms var(--ease), overlay 200ms allow-discrete, display 200ms allow-discrete;
    &[open] { opacity: 1; translate: 0 0; @starting-style { opacity: 0; translate: 0 10px; } }
    &::backdrop { background: hsl(0 0% 0% / .62); opacity: 0; transition: opacity 200ms var(--ease), overlay 200ms allow-discrete, display 200ms allow-discrete; }
    &[open]::backdrop { opacity: 1; @starting-style { opacity: 0; } }
  }
  /* the page behind stays put: Lenis is stopped in JS, this locks native scrolling (and keeps the scrollbar's space) */
  html:has(dialog.cf[open]) { overflow: hidden; scrollbar-gutter: stable; }
  html:has(dialog.cf[open]) body { overflow: hidden; }
  .cf-bar { position: sticky; top: 0; z-index: 2; height: 0; display: flex; justify-content: flex-end; align-items: flex-start; }
  .cf-x { margin: 14px 14px 0 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); color: var(--text-2); background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2); transition: color var(--dur), background var(--dur), box-shadow var(--dur);
    &:hover { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-3); }
    & .ic { width: 16px; height: 16px; } }
  .cf-in { padding: clamp(22px, 3vw, 36px); }
  .cf-h { margin: 0; padding-right: 48px; font: 500 clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem)/1.05 var(--f-sans); letter-spacing: -.045em; color: var(--text); outline: 0; }
  .cf-lede { margin: 14px 0 26px; font-size: 16px; line-height: 1.55; letter-spacing: -.01em; color: var(--text-2); }
  .cf-lede[hidden] ~ .cf-slot { margin-top: 26px; }   /* a kind with no lede (the changelog sign-up): the same space under the heading */
  form[data-form]:focus, .cf .form-ok:focus { outline: 0; }   /* focus moved here by script (sending, thanks): a ring on a non-control is noise */
  .cf-done { display: none; }
  .cf-form.is-sent { & > :not(.form-ok, .cf-done) { display: none; } & .cf-done { display: inline-flex; justify-self: start; } }
  @media (min-width: 760px) { .cf::backdrop { backdrop-filter: blur(3px); } }
  @media (max-width: 759px) {
    /* a full-screen sheet: the cross sits in a bar that stays at the top while the form scrolls */
    .cf { inset: 0; width: 100%; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; translate: 0 16px; scroll-padding-top: calc(56px + 16px + env(safe-area-inset-top, 0px)); }
    .cf-bar { height: calc(56px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); align-items: center; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
    .cf-x { margin: 0 8px 0 0; width: 44px; height: 44px; }
    .cf-in { padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px)); }
    .cf-h { padding-right: 0; }
    .cf .form .row2 { grid-template-columns: 1fr; }
    .cf .field :is(input, select) { min-height: 52px; }
    .cf .btn { --h: 56px; }
    .cf-form.is-sent .cf-done { justify-self: stretch; }
  }
  @media (prefers-reduced-motion: reduce) { .cf, .cf::backdrop { transition: none; } }
}
/* the heading's emphasised word keeps the amber the page headline has (the calm-look rule above turns h2 emphasis grey) */
html:root dialog.cf .cf-h em { color: var(--amber); }