/* ===========================================================
   Plumb — shared design system
   Extracted from the homepage so every page inherits one palette,
   one type stack, one chapter system. Page-specific rules live in
   the page's own <style> block, never here.
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    /* ── CHAPTER PALETTE ─────────────────────────────────────────
       One rule governs it: no mid-tone grounds. A warm mid-tone and a warm
       accent sit at the same luminance, so amber dies on anything between
       light and dark (1.1:1 on the old ochre). Every ground is therefore
       either near-white or near-black, and the accent has a light-ground
       form and a dark-ground form.
         ivory   #FAFAF8  the calm opening
         paper   #FFFFFF  the reveal, brighter than ivory so it snaps
         tobacco #241A13  weight, warm and chromatic
         ink     #14120F  resolve, neutral near-black
       Measured: amber-deep 4.9:1 on ivory, amber-lift 8.0:1 on tobacco. */
    --ivory:   #FAFAF8;
    --paper:   #FFFFFF;
    --tobacco: #241A13;
    --ink-bg:  #14120F;

    --accent: #c4850c;        /* fills, marks, buttons */
    --accent-deep: #946507;   /* accent as text on light grounds */
    --accent-lift: #E0A93B;   /* accent as text on dark grounds */
    --accent-light: #d99a22;
    --accent-tint: rgba(196, 133, 12, 0.07);
    --accent-tint-2: #fef3dc;
    --ink: #1a1a18;
    --body: #4a463f;
    --muted: #6f6b62;
    --line: #e8e6e1;
    --line-soft: #f0eeea;
    --bg: #FAFAF8;
    --bg-soft: #F5F3EE;
    --amber-cream: #FBF3E3;
    --card: #ffffff;
    --dark: #111110;
    --green: #2a9d5c;
    --red: #c0392b;

    /* Radii and elevation stay as they are: those belong to the layout. */
    --r: 16px;
    --r-lg: 24px;
    --r-pill: 48px;

    --display: 'Instrument Serif', Georgia, serif;
    --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --lift: 0 1px 2px rgba(26,26,24,.04), 0 8px 24px rgba(26,26,24,.05);
    --lift-2: 0 2px 4px rgba(26,26,24,.05), 0 18px 48px rgba(26,26,24,.09);
    --gutter: 40px;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--body);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--accent-tint-2); color: var(--ink); }
  * { scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid #fff; border-radius: 6px; }

  .vh { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }

  h1, h2 { font-family: var(--display); color: var(--ink); font-weight: 400; }
  h3 { font-family: var(--sans); color: var(--ink); }
  h1 {
    font-size: clamp(44px, 5.6vw, 74px);
    line-height: 1.06;
    /* Plumb's display face tracks negative. The reference's positive tracking
       belonged to its geometric sans and does not survive the swap. */
    letter-spacing: -0.025em;
    color: var(--ink);
    max-width: 15ch;
  }
  h1 em, h2 em { font-style: italic; color: var(--accent-deep); }
  h2 {
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    max-width: 22ch;
    text-wrap: balance;
  }
  h3 { font-size: 20px; font-weight: 500; line-height: 1.32; letter-spacing: -0.01em; }

  .lede { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
  .eyebrow {
    font-family: var(--mono); font-size: 12px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  }

  section { padding: 100px 0; }

  /* ── CHAPTER BANDS ───────────────────────────────────────────
     Each chapter is a real full-width block with its own ground, not a tint
     over a shared canvas. Large rounded tops let the previous chapter show
     through at the corners, so the page reads as scenes stacking rather than
     one continuous field changing temperature.
       ivory   hero
       tan     the problem and the control gap
       light   the products reveal
       dark    the adoption case and the close
     ─────────────────────────────────────────────────────────── */
  .band { border-radius: 46px 46px 0 0; position: relative; }
  .band > section { padding: 160px 0 150px; }
  .band > section + section { padding-top: 0; }
  .band > section:last-child { padding-bottom: 175px; }

  .band-problem { background: var(--tobacco); }
  .band-light   { background: var(--paper); }
  .band-dark    { background: var(--ink-bg); }

  /* The weight chapter runs dark, which is the only place the amber accent
     survives at full strength. White cards land at 17:1 against it, so the
     product surfaces read as lit panels rather than tinted paper. */
  .band-problem h2, .band-problem h3 { color: rgba(255,255,255,.95); }
  .band-problem h2 em { color: var(--accent-lift); }
  .band-problem .eyebrow { color: var(--accent-lift); }
  .band-problem .lede,
  .band-problem .acc-body p,
  .band-problem .stack-list li { color: rgba(255,255,255,.68); }
  .band-problem .acc-title { color: rgba(255,255,255,.55); }
  .band-problem .acc-item[data-active="true"] .acc-title { color: rgba(255,255,255,.95); }
  .band-problem .acc-num { color: rgba(255,255,255,.42); }
  .band-problem .acc-item[data-active="true"] .acc-num { color: var(--accent-lift); }
  .band-problem .acc-item,
  .band-problem .stack-list,
  .band-problem .stack-list li { border-color: rgba(255,255,255,0.13); }
  .band-problem .stack-list li.close { color: rgba(255,255,255,.95); }
  .band-problem .acc-head:hover .acc-title { color: rgba(255,255,255,.8); }

  /* The dark chapter carries its own type colours. */
  .band-dark h2, .band-dark h3 { color: rgba(255,255,255,.95); }
  .band-dark h2 em { color: var(--accent-lift); }
  .band-dark .eyebrow { color: var(--accent-lift); }
  .band-dark .lede { color: rgba(255,255,255,.68); }
  .band-dark .prose p { color: rgba(255,255,255,.66); }
  .band-dark .prose p strong { color: rgba(255,255,255,.94); }
  .band-dark .cta {
    background: transparent; padding: 0; border-radius: 0;
  }
  .band-dark .cta p { color: rgba(255,255,255,.66); }

  /* ── Announcement ─────────────────────────────────────────── */
  .banner {
    background: var(--dark); color: #fff;
    font-size: 14px; text-align: center;
    padding: 11px 20px;
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  }
  .banner a {
    color: #fff; font-weight: 500; text-decoration: none;
    border: 1px solid rgba(255,255,255,.34); border-radius: var(--r-pill);
    padding: 3px 13px; font-size: 13px;
  }
  .banner a:hover { background: rgba(255,255,255,.1); }

  /* ── Nav ──────────────────────────────────────────────────── */
  .nav-hold { position: sticky; top: 0; z-index: 90; padding: 12px 0; }
  nav {
    max-width: 1160px; margin: 0 auto;
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    box-shadow: var(--lift);
    height: 60px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px 0 24px;
  }
  .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
  .brand-mark { height: 26px; width: auto; flex-shrink: 0; }
  .brand-name {
    font-family: var(--mono); font-size: 16px; font-weight: 500;
    letter-spacing: -0.02em; color: var(--ink);
  }
  .brand-tag {
    font-family: var(--mono); font-size: 11px; color: var(--muted);
    letter-spacing: 0.04em; position: relative; top: -1px;
  }
  .brand-tag::before { content: '\00b7'; margin-right: 9px; color: var(--line); }
  .nav-links { display: flex; align-items: center; gap: 4px; }
  .nav-links > a, .drop > button {
    font-family: var(--sans); font-size: 15px; font-weight: 400; color: var(--body);
    background: none; border: 0; padding: 9px 13px; border-radius: 8px;
    cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  }
  .nav-links > a:hover, .drop > button:hover { background: var(--bg-soft); color: var(--ink); }
  .drop { position: relative; }
  .drop svg { width: 10px; height: 10px; transition: transform .25s var(--ease); }
  .drop[data-open="true"] svg { transform: rotate(180deg); }
  .drop-menu {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 300px; background: #fff;
    border: 1px solid var(--line-soft); border-radius: var(--r);
    box-shadow: var(--lift-2); padding: 8px;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  .drop[data-open="true"] .drop-menu { opacity: 1; transform: none; pointer-events: auto; }
  .drop-menu a { display: block; padding: 11px 13px; border-radius: 9px; text-decoration: none; }
  .drop-menu a:hover { background: var(--bg-soft); }
  .drop-menu b { display: block; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); }
  .drop-menu span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
  .globe { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--body); }
  .globe:hover { background: var(--bg-soft); }
  .globe svg { width: 19px; height: 19px; }

  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-size: 16px; font-weight: 600;
    background: var(--accent); color: #fff;
    border: 0; border-radius: var(--r-pill);
    padding: 8px 8px 8px 20px; text-decoration: none; cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    white-space: nowrap;
  }
  .btn:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(196,133,12,.26); }
  .btn i {
    display: grid; place-items: center; width: 28px; height: 28px;
    border-radius: 50%; background: rgba(255,255,255,.2); font-style: normal; font-size: 13px;
  }
  .btn.ghost { background: none; color: var(--accent); padding-left: 0; }
  .btn.ghost i { background: var(--accent-tint); color: var(--accent); }
  .btn.ghost:hover { background: none; box-shadow: none; }

  /* ── Hero ─────────────────────────────────────────────────── */
  /* The whole page is set left. Nothing on this homepage is centred: the
     rhythm comes from the split and stacked layouts, not from the axis. */
  .hero { padding: 64px 0 40px; }
  .hero h1 { max-width: 17ch; }

  .hero-form {
    display: flex; align-items: center; gap: 8px;
    max-width: 470px; margin-top: 32px;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 6px 6px 6px 8px;
    transition: border-color .2s, box-shadow .2s;
  }
  .hero-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
  .hero-form input {
    flex: 1; min-width: 0; border: 0; background: none; padding: 11px 14px;
    font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  }
  .hero-form input:focus { outline: none; }
  .hero-form input::placeholder { color: #9A9AA6; }
  .hero-form button { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; padding: 10px 10px 10px 18px; }

  /* ── PRODUCT SCREEN ──
     A real capture, framed rather than faked. Cropped at the foot so the app
     reads as continuing below the fold. */
  /* ── PRODUCT SCREEN ──
     Lives inside the tobacco chapter. A paper-white capture on that ground
     reads as a lit panel, which it never did against ivory. */
  .screen-section { padding-top: 40px; }
  .stage { margin: 26px 0 0; }
  .shot {
    display: block; width: 100%; height: auto;
    max-height: 660px; object-fit: cover; object-position: top center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3);
  }
  .stage-lead {
    max-width: 62ch;
    padding-left: 18px;
    border-left: 2px solid var(--accent-lift);
  }
  .stage-lead .eyebrow { display: block; margin-bottom: 9px; color: var(--accent-lift); }
  .stage-lead p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.72); }
  .stage-lead strong { color: rgba(255,255,255,.95); font-weight: 500; }
  .stage-note {
    margin: 16px 0 0; color: rgba(255,255,255,.5);
    font-size: 13.5px; line-height: 1.6; max-width: 58ch;
  }

  /* Plain list and prose for the sections that carry no product visual. */
  .stack-list { max-width: 720px; margin: 34px 0 0; border-top: 1px solid var(--line); }
  .stack-list li { list-style: none; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--muted); }
  .stack-list li.close {
    border-bottom: 0; padding-top: 26px; color: var(--ink);
    font-family: var(--display); font-size: 26px; font-weight: 400; line-height: 1.32; letter-spacing: -0.015em;
  }
  .prose { max-width: 620px; margin: 26px 0 0; }
  .prose p { font-size: 16.5px; line-height: 1.72; color: var(--muted); }
  .prose p + p { margin-top: 16px; }
  .prose p strong { color: var(--ink); font-weight: 500; }

  /* ── Sticky accordion + scrolling column ──────────────────── */
  .split { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 0 64px; align-items: start; }
  .rail { position: sticky; top: 96px; padding: 40px 0; }
  .acc { border-top: 1px solid var(--line); margin-top: 28px; }
  .acc-item { border-bottom: 1px solid var(--line); }
  .acc-head {
    width: 100%; display: flex; align-items: center; gap: 13px;
    background: none; border: 0; padding: 18px 0; cursor: pointer; text-align: left;
  }
  .acc-num { font-family: var(--mono); font-size: 12px; color: var(--muted); }
  .acc-title { font-family: var(--sans); font-size: 18px; font-weight: 500; color: var(--muted); transition: color .3s; }
  .acc-item[data-active="true"] .acc-title { color: var(--ink); }
  .acc-item[data-active="true"] .acc-num { color: var(--accent); }
  .acc-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .35s; }
  .acc-body > div { overflow: hidden; }
  .acc-item[data-active="true"] .acc-body { grid-template-rows: 1fr; opacity: 1; }
  .acc-body p { font-size: 15px; line-height: 1.65; color: var(--muted); padding-bottom: 20px; max-width: 42ch; }
  .acc-body a { color: var(--accent); font-weight: 500; text-decoration: none; }

  .flow-panel { min-height: 84vh; display: flex; flex-direction: column; justify-content: center; padding: 34px 0; }
  .flow-card {
    background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
    box-shadow: var(--lift); overflow: hidden; transition: opacity .45s;
  }
  .flow-panel[data-active="false"] .flow-card { opacity: .45; }
  .flow-top {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 20px; background: var(--bg-soft); border-bottom: 1px solid var(--line-soft);
    font-family: var(--mono); font-size: 12px; color: var(--muted);
  }
  .flow-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
  .flow-body { padding: 30px 32px 34px; }
  .flow-body p { font-size: 17px; line-height: 1.7; color: var(--ink); }
  /* ── FINDINGS ARE NAMED, NEVER BADGED ──
     Say what happened. These are labels with room for a phrase, not chips
     sized for a four-word taxonomy. A finding may be grouped into a family
     for navigation; the label you read stays the movement that occurred.
     Use .on-dark only where the label sits directly on a dark ground, not
     when it sits on a light card that happens to be inside a dark chapter. */
  .finding-label {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 6px;
    color: #7a5206;
    background: #fdf1d8;
    border: 1px solid #f0dcae;
  }
  .finding-label.held    { color: #1d6f41; background: #e6f4ec; border-color: #c6e5d3; }
  .finding-label.omitted { color: #1c5a83; background: #e6f1f8; border-color: #c5dcea; }
  .finding-label.outside { color: #92291d; background: #fbe7e4; border-color: #f0cdc7; }

  .finding-label.on-dark         { color: #EFC46F; background: rgba(224,169,59,.16); border-color: rgba(224,169,59,.32); }
  .finding-label.on-dark.held    { color: #86D4A6; background: rgba(90,190,135,.14); border-color: rgba(90,190,135,.3); }
  .finding-label.on-dark.omitted { color: #9CC7E4; background: rgba(90,150,200,.14); border-color: rgba(90,150,200,.3); }
  .finding-label.on-dark.outside { color: #F0A79D; background: rgba(192,57,43,.18); border-color: rgba(192,57,43,.34); }

  /* ── Sticky card stack ────────────────────────────────────── */
  .stack-title { position: sticky; top: 84px; padding-bottom: 26px; }
  .stack { display: flex; flex-direction: column; gap: 20px; }
  .scard {
    position: sticky; /* Clears the two-line sticky title above, and steps far enough that each
       covered card still shows its own label. */
    top: calc(212px + var(--i) * 64px);
    display: grid; grid-template-columns: 300px minmax(0,1fr);
    background: #fff; border: 1px solid var(--line-soft);
    border-radius: var(--r); overflow: hidden;
    box-shadow: 0 -10px 26px rgba(37,37,42,.05), var(--lift-2);
  }
  .scard-side { background: var(--accent-tint); padding: 28px 26px; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; }
  .scard-side .eyebrow { color: var(--accent); }
  .scard-side p { font-size: 14px; color: var(--body); line-height: 1.6; }
  .scard-main { padding: 28px 30px; }
  .scard-main h3 { margin-bottom: 12px; }
  .scard-main > p { font-size: 15px; color: var(--muted); line-height: 1.68; max-width: 52ch; }

  /* ── CTA + footer ─────────────────────────────────────────── */
  /* ── Components shared by the homepage and both product pages ── */
  .band-amber { background: var(--amber-cream); }
  .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
  .vocab { display: flex; flex-wrap: wrap; gap: 8px; max-width: 940px; }
  .rail-turn {
    margin-top: 20px; font-family: var(--display); font-size: 23px; line-height: 1.35;
    color: rgba(255,255,255,.95);
  }
  .rail-turn em { font-style: italic; color: var(--accent-lift); }

  /* One statement, its source, and what changed. Readable with no prior
     context — a cropped screenshot of an unseen interface is not. */
  .changed {
    margin-top: 40px; max-width: 780px; background: var(--paper);
    border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    box-shadow: 0 30px 70px -46px rgba(26,26,24,.5);
  }
  .ch-row { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 20px;
    padding: 22px 26px; border-bottom: 1px solid var(--line-soft); align-items: start; }
  .ch-row.ai { background: #FDF8EE; }
  .ch-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--muted); padding-top: 5px; }
  .ch-text { font-family: var(--display); font-size: 19px; line-height: 1.5; color: var(--ink); }
  .ch-text strong { font-weight: 400; box-shadow: inset 0 -0.6em 0 var(--accent-tint-2); }
  .ch-found { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 16px; padding: 20px 26px; }
  .ch-found p { font-size: 14.5px; line-height: 1.6; color: var(--body); flex: 1 1 320px; }

  /* .lede strong should read as emphasis, not as a heading. */
  .lede strong { color: var(--ink); font-weight: 500; }
  /* On a dark band that ink is invisible. */
  .band-problem .lede strong,
  .band-dark .lede strong { color: #fff; }

  /* The plain-language failure, above the movement it is called. */
  .flow-say { font-family: var(--display); font-size: 26px; line-height: 1.3; color: var(--ink); margin-bottom: 18px; }
  @media (max-width: 700px) { .flow-say { font-size: 21px; } }

  /* The line under an h1 that carries the promise. */
  .hero-sub {
    margin-top: 22px; font-family: var(--display); font-size: 27px; line-height: 1.28;
    letter-spacing: -.015em; color: var(--ink); max-width: 26ch;
  }
  @media (max-width: 900px) { .hero-sub { font-size: 23px; max-width: none; } }

  /* The full movement vocabulary, set as type rather than as chips. */
  .v-list.vocab-full { margin-top: 32px; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px 30px; }
  /* Boundary's names run longer than Analysis's, so three columns. */
  .v-list.vocab-wide { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px 34px; }
  @media (max-width: 1000px) { .v-list.vocab-full { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 1000px) { .v-list.vocab-wide { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 600px)  { .v-list.vocab-wide { grid-template-columns: 1fr; } }
  @media (max-width: 600px)  { .v-list.vocab-full { grid-template-columns: 1fr; } }

  /* The named jobs. Term and definition on one line, so someone
     scanning for "audit trail" can see which line was that answer. */
  .jobs { margin-top: 44px; border-top: 1px solid var(--line); max-width: 1000px; }
  .job {
    display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 36px;
    padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start;
  }
  .job h3 {
    font-family: var(--display); font-size: 25px; font-weight: 400;
    line-height: 1.2; color: var(--ink);
  }
  .job p { font-size: 16px; line-height: 1.65; color: var(--ink); }
  .job .job-more { margin-top: 9px; font-size: 15px; color: var(--body); }
  @media (max-width: 820px) {
    .job { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
    .job h3 { font-size: 22px; }
  }

  /* ── Section overlap ──────────────────────────────────────────
     Each block rides up over the one before it, so the seam between
     sections is a layer arriving rather than a join. Scoped to the
     homepage: the product pages keep their flat joins. */
  #main.overlap > .band,
  #main.overlap > section:not(.hero) {
    position: relative;
    margin-top: -58px;
    border-radius: 46px 46px 0 0;
    box-shadow: 0 -26px 54px -26px rgba(26,26,24,.30);
  }
  /* A block that rides over another has to be opaque. */
  #main.overlap > section:not(.hero) { background: var(--bg); }
  /* The overlap has to eat trailing space, not the content above it. */
  #main.overlap > *:not(:last-child) { padding-bottom: 58px; }
  /* The hero sets its own trailing space; the ID rule above would replace it. */
  #main.overlap > .hero { padding-bottom: 98px; }
  /* Later blocks paint over earlier ones. */
  #main.overlap > *:nth-child(2) { z-index: 1; }
  #main.overlap > *:nth-child(3) { z-index: 2; }
  #main.overlap > *:nth-child(4) { z-index: 3; }
  #main.overlap > *:nth-child(5) { z-index: 4; }
  #main.overlap > *:nth-child(6) { z-index: 5; }
  #main.overlap > *:nth-child(7) { z-index: 6; }

  @media (max-width: 700px) {
    #main.overlap > .band,
    #main.overlap > section:not(.hero) { margin-top: -34px; border-radius: 30px 30px 0 0; }
    #main.overlap > *:not(:last-child) { padding-bottom: 34px; }
  }

  /* ── Pinned pane ──────────────────────────────────────────────
     The whole section holds still while its contents change, the way
     Cresta's does: a tall wrapper, one sticky child, cross-fade inside. */
  .pin-wrap { position: relative; height: calc(660px + var(--steps) * 640px); }
  .pin {
    position: sticky; top: 94px; min-height: 640px;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 70px; align-items: center;
  }

  .pin-copy { align-self: center; }
  .pin-list { list-style: none; margin: 30px 0 0; padding: 0; }
  .pin-list li {
    position: relative; display: flex; gap: 16px; align-items: baseline;
    padding: 13px 0 13px 20px; font-size: 17px; line-height: 1.4;
    color: rgba(255,255,255,.48);
    transition: color .3s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .pin-list li::before {
    content: ''; position: absolute; left: 0; top: 50%; margin-top: -8px;
    width: 2px; height: 16px; border-radius: 2px; background: var(--accent-lift);
    opacity: 0; transform: scaleY(.4);
    transition: opacity .3s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .pin-list li[data-active="true"] { color: #fff; transform: translateX(4px); }
  .pin-list li[data-active="true"]::before { opacity: 1; transform: scaleY(1); }
  .pl-n { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.5); }
  .pin-list li[data-active="true"] .pl-n { color: var(--accent-lift); }

  .pin-stage { position: relative; min-height: 300px; }
  .pin-panel {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scale(1.02);
    opacity: 0; pointer-events: none;
    transition: opacity .52s cubic-bezier(.2,.7,.2,1), transform .72s cubic-bezier(.2,.7,.2,1);
  }
  .pin-panel[data-active="true"] { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }

  @media (max-width: 900px) {
    .pin-wrap { height: auto; }
    .pin { position: static; grid-template-columns: 1fr; gap: 34px; min-height: 0; }
    .pin-stage { min-height: 0; display: grid; gap: 14px; }
    .pin-panel { position: static; transform: none !important; opacity: 1 !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pin-wrap { height: auto; }
    .pin { position: static; }
    .pin-stage { min-height: 0; display: grid; gap: 14px; }
    .pin-panel { position: static; transform: none !important; opacity: 1 !important; }
  }

  /* The bind the reader is already in. */
  .bind {
    margin-top: 30px; font-family: var(--display); font-size: 30px; line-height: 1.3;
    color: rgba(255,255,255,.96); max-width: 22ch;
  }
  @media (max-width: 700px) { .bind { font-size: 24px; } }

  /* What having the layer changes for the business. */
  .gains { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 38px; margin-top: 44px; }
  .gains > div { padding-top: 24px; border-top: 2px solid var(--accent); }
  .gains h3 { font-family: var(--display); font-size: 23px; font-weight: 400; line-height: 1.25; color: var(--ink); }
  .gains p { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--body); }
  @media (max-width: 900px) { .gains { grid-template-columns: 1fr; gap: 26px; } }

  /* A flag versus an answer, shown rather than asserted. */
  .verdict {
    display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 60px;
    margin-top: 46px; align-items: start;
  }
  .v-flat { position: relative; }

  .v-tag {
    display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); padding-bottom: 16px;
    border-bottom: 1px solid var(--line); margin-bottom: 22px;
  }
  .v-word {
    font-family: var(--display); font-size: 58px; line-height: 1; letter-spacing: -.02em;
    color: #97928A;
  }
  .v-real .v-tag { color: var(--accent-deep); border-bottom-color: rgba(196,133,12,.32); }
  .v-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 34px; }
  .v-list b {
    font-family: var(--display); font-size: 21px; font-weight: 400; line-height: 1.25;
    color: var(--ink); padding-left: 16px; position: relative;
  }
  .v-list b::before {
    content: ''; position: absolute; left: 0; top: .55em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  }
  .v-list b.held::before { background: #2a9d5c; }

  @media (max-width: 860px) {
    .verdict { grid-template-columns: 1fr; gap: 34px; }
    .v-word { font-size: 46px; }
    .v-list { grid-template-columns: 1fr; gap: 12px; }
  }

  /* The diagram now sits on the light ground, as a dark device. */
  .layer-panel {
    background: var(--ink-bg); border-radius: 22px; padding: 54px 46px 46px;
    margin-top: 44px; box-shadow: 0 50px 110px -60px rgba(26,26,24,.6);
  }
  @media (max-width: 700px) { .layer-panel { padding: 34px 22px 30px; border-radius: 16px; } }

  /* ── The source integrity layer ───────────────────────────── */
  .layer { position: relative; margin-top: 54px; }
  .layer-note {
    position: absolute; right: 0; top: 10px; width: 96px;
    font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.38); line-height: 1.8; text-align: left;
  }
  .layer-src { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 12px; padding-right: 124px; }
  .lsrc {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px; padding: 14px 8px 12px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
  }
  .lsrc svg { width: 19px; height: 19px; color: rgba(255,255,255,.72); }
  .lsrc span { font-size: 11.5px; color: rgba(255,255,255,.72); line-height: 1.3; overflow-wrap: anywhere; }

  .layer-flow { display: block; width: 100%; height: 86px; padding-right: 124px; box-sizing: border-box; }

  .layer-bar {
    position: relative; margin-right: 124px; border-radius: 12px;
    padding: 22px 30px; display: flex; align-items: baseline; justify-content: center; gap: 26px;
    background: linear-gradient(90deg, rgba(224,169,59,.16), rgba(224,169,59,.30) 50%, rgba(224,169,59,.16));
    border: 1px solid rgba(224,169,59,.42);
    box-shadow: 0 0 70px rgba(224,169,59,.28), inset 0 1px 0 rgba(255,255,255,.16);
  }
  .layer-name { font-family: var(--display); font-size: 30px; letter-spacing: -.01em; color: #fff; }
  .layer-tag {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: rgba(255,255,255,.72);
  }

  .layer-drop { display: block; width: 100%; height: 40px; padding-right: 124px; box-sizing: border-box; }
  .layer-out { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; margin-right: 124px; text-align: center; }
  .layer-out span {
    display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--accent-lift);
  }
  .layer-out p { margin-top: 9px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.62); }

  @media (max-width: 900px) {
    .layer-note { display: none; }
    .layer-src { grid-template-columns: repeat(3, minmax(0,1fr)); padding-right: 0; gap: 9px; }
    .lsrc { padding: 12px 5px 10px; }
    .lsrc span { font-size: 10.5px; }
    .layer-flow { display: none; }
    .layer-bar { margin: 30px 0 0; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
    .layer-drop { display: none; }
    .layer-out { grid-template-columns: 1fr; gap: 22px; margin: 30px 0 0; text-align: left; }
  }

  /* The two products, side by side. */
  .prod-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; margin-top: 40px; }
  .prod {
    background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
    padding: 38px 34px; display: flex; flex-direction: column;
    box-shadow: 0 30px 70px -50px rgba(26,26,24,.45);
  }
  .prod-for {
    display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted);
  }
  .prod h3 { font-family: var(--display); font-size: 27px; font-weight: 400; color: var(--ink);
    margin: 18px 0 18px; line-height: 1.22; }
  .prod-when { font-family: var(--display); font-size: 18.5px; line-height: 1.45; color: var(--ink); }
  .prod p { font-size: 15.5px; line-height: 1.7; color: var(--body); margin-bottom: 12px; }
  .prod .prod-so {
    margin: 6px 0 28px; padding-top: 16px; border-top: 1px solid var(--line);
    font-size: 15px; line-height: 1.6; color: var(--ink); font-weight: 500;
  }
  .prod .btn { align-self: flex-start; margin-top: auto; }

  @media (max-width: 860px) {
    .two-things, .prod-grid { grid-template-columns: 1fr; }
    .prod { padding: 30px 24px; }
  }

  /* The situation a product is for, above the description of it. */
  .scard-when { font-family: var(--display); font-size: 19px; line-height: 1.45;
    color: var(--ink); margin-bottom: 12px; }

  @media (max-width: 640px) {
    .ch-row { grid-template-columns: 1fr; gap: 8px; }
    .ch-tag { padding-top: 0; }
    .ch-text { font-size: 17px; }
  }

  /* Card link out to a product page. */
  .card-link {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
    font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--accent-deep); text-decoration: none;
  }
  .card-link i {
    font-style: normal; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent-tint-2); transition: transform .25s;
  }
  .card-link:hover i { transform: translateX(3px); }

  .cta {
    background: var(--dark); color: #fff; border-radius: var(--r-lg);
    padding: 72px 56px;
  }
  .cta h2 { color: #fff; max-width: 20ch; margin: 0 0 18px; }
  .cta p { color: rgba(255,255,255,.62); max-width: 46ch; margin: 0 0 34px; font-size: 17px; line-height: 1.6; }
  footer { background: var(--ink-bg); padding: 66px 0 40px; }
  .foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 40px; }
  .foot-grid h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; }
  .foot-grid a { display: block; font-size: 14.5px; color: rgba(255,255,255,.72); text-decoration: none; padding: 5px 0; }
  .foot-grid a:hover { color: var(--accent-lift); }
  .foot-base { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,.45); }

  @media (max-width: 1000px) {
    .split { grid-template-columns: 1fr; gap: 24px; }
    .rail { position: static; padding: 0 0 24px; }
    .acc { display: none; }
    .flow-panel { min-height: 0; padding: 0 0 30px; }
    .flow-panel[data-active="false"] .flow-card { opacity: 1; }
    .scard { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    :root { --gutter: 20px; }
    section { padding: 64px 0; }
    /* A 46px radius and 140px of band padding are desktop proportions. */
    .band { border-radius: 26px 26px 0 0; }
    .band > section { padding: 76px 0 70px; }
    .band > section:last-child { padding-bottom: 84px; }
    nav { border-radius: var(--r); padding: 0 8px 0 16px; }
    .nav-links > a { display: none; }
    .globe { display: none; }
    /* Products is the only route to Analysis and Boundary on a phone.
       Hiding it left the footer as the sole path. */
    .drop { display: block; }
    .drop > button { font-size: 14px; padding: 8px 10px; }
    /* Products needs the room the tagline was using: with both, the
       nav row measured 383px inside a 373px pill and clipped the CTA. */
    .brand-tag { display: none; }
    .drop-menu { right: auto; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 232px; }
    .drop[data-open="true"] .drop-menu { transform: translateX(-50%) translateY(0); }
    .hero-form { flex-wrap: wrap; border-radius: var(--r); }
    .hero-form input { flex-basis: 100%; }
    .hero-form button { width: 100%; justify-content: center; }
    .cta { padding: 52px 26px; }
    .scard { position: static; }
    .stack-title { position: static; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .scard, .rail, .stack-title { position: static; }
    .acc { display: block; }
    .acc-body { grid-template-rows: 1fr; opacity: 1; transition: none; }
    .flow-panel { min-height: 0; }
    .flow-panel[data-active="false"] .flow-card { opacity: 1; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .15s !important; }
  }

  /* ══ ARTICLE PAGES ══════════════════════════════════════════
     Long-form pages built on the .art column. Additive: no page that
     predates this uses the .art namespace, so nothing else is affected.
     ══════════════════════════════════════════════════════════ */
  /* The accent at full strength measures 3.0:1 on ivory. This page is new,
     so it opens at --accent-deep and meets AA without waiting on the
     site-wide token decision. */
  .art .eyebrow, .hero .eyebrow { color: var(--accent-deep); }

  /* The answer sits alone, before any argument for it. Someone who reads one
     word should get the right one. */
  .answer {
    font-family: var(--display); font-size: clamp(52px, 7vw, 86px);
    line-height: 1; letter-spacing: -.03em; color: var(--accent-deep);
    margin: 34px 0 22px;
  }

  /* ── Readable column ──────────────────────────────────────── */
  /* Left edge shared with the hero and every other band on the site.
     A centred measure reads as a different page. */
  .art { max-width: 680px; margin: 0; }
  .art > h2 {
    font-size: clamp(27px, 3.1vw, 35px); line-height: 1.16; max-width: 24ch;
    margin: 78px 0 0; scroll-margin-top: 110px;
  }
  .art > h2:first-child { margin-top: 0; }
  .art h3 {
    font-size: 19px; margin: 42px 0 0; scroll-margin-top: 110px;
  }
  .art p {
    font-size: 17.5px; line-height: 1.74; color: var(--body); margin-top: 18px;
  }
  .art p strong { color: var(--ink); font-weight: 500; }
  /* :not(.btn) matters: the button paints its own white on amber, and a blanket
     link colour here turns it amber on amber. */
  .art a:not(.btn) { color: var(--accent-deep); text-decoration: underline;
           text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .art a:not(.btn):hover { text-decoration-thickness: 2px; }
  .art hr {
    border: 0; border-top: 1px solid var(--line); margin: 72px 0 0;
  }

  /* Source and output specimens. Amber rule marks a quoted source, ink rule
     marks what AI returned, so the pair reads without a caption. */
  .spec {
    margin-top: 22px; padding: 18px 24px; background: var(--card);
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: 0 var(--r) var(--r) 0;
    font-size: 17px; line-height: 1.62; color: var(--ink);
  }
  .spec.out { border-left-color: var(--ink); }
  .spec-tag {
    display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 9px;
  }
  .spec b { font-weight: 600; color: var(--accent-deep); }
  .spec.out b { color: var(--ink); }

  /* ── The movement table ───────────────────────────────────── */
  /* Three columns of prose need more than the reading measure. Break the
     table out of the 680px column, bounded by the gutter on small screens. */
  .tw {
    overflow-x: auto; margin-top: 26px; -webkit-overflow-scrolling: touch;
    width: 880px; max-width: calc(100vw - 2 * var(--gutter));
  }
  .art table {
    width: 100%; min-width: 580px; border-collapse: collapse;
    font-size: 15px; line-height: 1.5;
  }
  .art th {
    font-family: var(--mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
    text-align: left; padding: 0 16px 11px 0; border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  .art td {
    padding: 15px 16px 15px 0; border-bottom: 1px solid var(--line-soft);
    color: var(--body); vertical-align: top;
  }
  .art td:last-child { color: var(--ink); font-weight: 500; padding-right: 0; }
  .art td b { color: var(--ink); font-weight: 600; }

  /* ── The two tests, side by side ──────────────────────────── */
  .tests { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
  .test {
    padding: 26px 26px 28px; border: 1px solid var(--line);
    border-radius: var(--r); background: var(--card);
  }
  .test .eyebrow { display: block; margin-bottom: 12px; color: var(--accent-deep); }
  .test p {
    margin: 0; font-family: var(--display); font-size: 21px; line-height: 1.34;
    letter-spacing: -.015em; color: var(--ink);
  }
  .test span {
    display: block; margin-top: 13px; font-family: var(--sans); font-size: 14.5px;
    line-height: 1.6; color: var(--muted);
  }
  @media (max-width: 620px) { .tests { grid-template-columns: 1fr; } }

  /* ── FAQ ──────────────────────────────────────────────────── */
  .faq { border-top: 1px solid var(--line); margin-top: 30px; }
  .faq > div { border-bottom: 1px solid var(--line); padding: 26px 0; }
  .faq h3 { margin: 0; font-size: 18px; }
  .faq p { margin-top: 10px; font-size: 16.5px; }

  /* ── Sources ──────────────────────────────────────────────── */
  .srcs { margin-top: 26px; }
  .srcs li {
    list-style: none; padding: 18px 0; border-bottom: 1px solid var(--line-soft);
    font-size: 15.5px; line-height: 1.62; color: var(--body);
  }
  .srcs li:first-child { border-top: 1px solid var(--line); }

  /* ── Close ────────────────────────────────────────────────── */
  .band-dark .art h2, .band-dark .art p strong { color: #fff; }
  .band-dark .art p { color: rgba(255,255,255,.68); }
  .band-dark .art .eyebrow { color: var(--accent-lift); }
  .close-line {
    font-family: var(--display); font-size: clamp(25px, 3vw, 34px);
    line-height: 1.28; letter-spacing: -.02em; color: #fff;
    max-width: 24ch; margin-top: 30px;
  }
  .close-cta { margin-top: 34px; }

  @media (max-width: 720px) {
    .art > h2 { margin-top: 58px; }
    .art p { font-size: 16.5px; }
  }

  /* Below the breakpoint the third column falls off-screen, and "what changed"
     is the column the row exists for. Stack each row into a labelled block so
     nothing important sits behind a sideways scroll. */
  @media (max-width: 620px) {
    .tw { overflow-x: visible; width: 100%; }
    .art table { min-width: 0; }
    .art thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .art tr {
      display: block; padding: 20px 0; border-bottom: 1px solid var(--line);
    }
    .art tr:first-child { border-top: 1px solid var(--line); }
    .art td {
      display: block; padding: 0; border: 0;
    }
    .art td + td { margin-top: 11px; }
    .art td::before {
      content: attr(data-l); display: block;
      font-family: var(--mono); font-size: 10px; font-weight: 500;
      letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
      margin-bottom: 4px;
    }
    .art td:last-child { padding-right: 0; }
  }