:root{
    --ink:#1d1f20;
    --ink-soft:#5d5d60;
    --paper:#f2f2f3;
    --raised:#e9e9ea;
    --card:#ffffff;
    --verified:#5980a6;
    --verified-ink:#416180;
    --wash:#eef6ff;
    --denied:#8c4133;
    --denied-wash:#f1e4e1;
    --line:#d3d4d4;
    --gold:#8a6c22;
    --gold-strong:#6f571b;
    --badge-bg:#eef6ff;
    --badge-line:#b5d9fd;
    --ink-block:#1d2d3d;
    --radius:0px;
    --shadow-sm:0 1px 2px rgba(43,43,45,.14);
    --shadow-md:0 3px 10px rgba(43,43,45,.16);
    --maxw:1120px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
  body{
    font-family:"Barlow",system-ui,sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    font-size:16px;
  }
  h1,h2,h3{font-family:"Barlow Condensed","Barlow",system-ui,sans-serif;font-weight:600;line-height:1.12;letter-spacing:-0.015em;
    /* balance wrapped headings: without this the browser fills line 1 and drops
       whatever is left onto line 2, which is how "answer them." ended up alone
       with half a line of empty space beside it. Ignored by browsers that do not
       support it, so it degrades to today's behaviour. */
    text-wrap:balance}
  a{color:var(--verified-ink);text-decoration-thickness:1.5px;text-underline-offset:3px}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  svg{display:block}

  .skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--card);padding:12px 18px;z-index:100;border-radius:2px}
  .skip:focus{left:0}
  a:focus-visible{outline:3px solid var(--verified);outline-offset:3px;border-radius:2px}

  header{position:sticky;top:0;z-index:50;background:rgba(242,242,243,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  /* the brand must never shrink. Without a flex basis it collapsed under a
     wide nav and its text ran UNDER the first link — the wordmark and
     "Who runs this" printed on top of each other. */
  .bar{display:flex;align-items:center;justify-content:space-between;height:74px;gap:26px}
  .brand{flex:0 0 auto}
  .brand{display:flex;align-items:center;gap:11px;font-family:"Barlow Condensed",sans-serif;font-size:25px;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-0.02em}
  .seal-mark{width:30px;height:30px;flex:0 0 auto}
  /* one line, never wrapped. A wrapped nav is what pushed the bar to two
     rows and broke the 74px height. The gap tightens before anything wraps,
     and below 900px the links give way to the pill alone. */
  nav.main .nav-links{display:flex;gap:26px;align-items:center;flex-wrap:nowrap;white-space:nowrap}
  @media (max-width:1180px){nav.main .nav-links{gap:18px}nav.main a{font-size:14.5px}}
  @media (max-width:1010px){nav.main .nav-links{gap:13px}nav.main a{font-size:13.5px}}
  nav.main a{color:var(--ink);text-decoration:none;font-weight:500;font-size:15.5px}
  nav.main a:hover{color:var(--verified-ink)}
  @media (max-width:900px){nav.main .nav-links a:not(.nav-cta){display:none}}

  /* SECTION EYEBROW. Accent-700, not the old warm brand's red: red now means
     only "denied" on this page, and colour that means two things means neither. */
  .label{font-family:"Barlow",sans-serif;font-weight:700;font-size:12.5px;
    letter-spacing:.09em;text-transform:uppercase;color:var(--verified-ink);
    display:block;margin-bottom:18px}
  /* the rule sits ABOVE the text, not beside it. Inline, it pushed every label
     41px right of the heading under it (30px rule + 11px gap, measured). */
  .label::before{content:"";display:block;width:30px;height:2px;
    background:var(--verified);border-radius:0;margin-bottom:10px}
  .label.center{justify-content:center}

  /* HERO */
  .hero{padding:54px 0 60px}
  /* proof card — the signature */
  .proof{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-md)}
  /* .blueprint marks are drawn outside the border, so this box must not clip. */
  .proof.blueprint{overflow:visible}
  .proof-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);background:var(--card)}
  .tag{font-family:"Barlow",sans-serif;font-weight:600;font-size:.8125rem;color:var(--ink-soft)}
  .proof-head .tag.ver{color:var(--verified-ink);display:inline-flex;align-items:center;gap:7px}
  .proof-head .tag.ver svg{width:16px;height:16px}
  .tag.illus{color:var(--gold-strong);display:inline-flex;align-items:center;gap:7px}
  .tag.illus svg{width:16px;height:16px;flex:0 0 auto}
  .proof-body{padding:22px 20px 24px}
  .denied-row{display:flex;gap:11px;align-items:flex-start;padding-bottom:18px;margin-bottom:18px;border-bottom:1px dashed var(--line)}
  .pill{font-family:"Barlow",sans-serif;font-size:11px;font-weight:600;
    padding:4px 9px;border-radius:2px;flex:0 0 auto;margin-top:2px}
  .pill.deny{background:var(--denied-wash);color:var(--denied)}
  .denied-row p{color:var(--ink-soft);font-size:15.5px}
  .claim{font-size:16.5px;font-weight:500;margin-bottom:14px}
  .source{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--verified);border-radius:2px;padding:14px 15px}
  .source .quote{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.65;color:var(--ink)}
  .hl{box-shadow:inset 0 -2px 0 rgba(43,78,56,.45);padding:1px 1px;border-radius:2px}
  .source .cite{display:flex;align-items:center;gap:8px;margin-top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--verified-ink)}
  .source .cite svg{width:17px;height:17px;flex:0 0 auto}
  /* the layers under one claim: the rule, then the plan, then the records that
     prove it. Same tokens as .source — this is another row of the same card,
     not a new design. */
  .source + .source{margin-top:10px}
  .source.plan{border-left-color:var(--ink-soft)}
  .source.plan .cite{color:var(--ink-soft)}
  .records{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
  .records .label-sm{font-family:"Barlow",sans-serif;font-size:11px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px}
  .records ul{list-style:none;display:grid;gap:7px}
  .records li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--ink)}
  .records li svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px}
  .records .label-sm.gap{color:var(--gold-strong)}
  .records li.gap{color:var(--ink-soft)}
  .records li .ask{color:var(--gold-strong);font-weight:600}
  /* the precedence line: which rule governs, stated rather than implied */
  .precedence{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding-top:12px;
    border-top:1px dashed var(--line);font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
  .precedence svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--verified)}
  .precedence b{color:var(--ink);font-weight:600}

  /* ONE column. The proof card now lives in its own section, so a two-column
     grid left column 2 empty and squeezed the headline into half the width.
     NO max-width here: this element is <div class="wrap hero-grid">, so a
     max-width on .hero-grid overrides .wrap's 1120px, and because .wrap is
     margin:0 auto the narrower box gets CENTRED. That indented the hero 110px
     right of every other section. Measured: hero .wrap left=161 while header
     and #proof both left=51. Constrain the measure on the text, not the wrap. */
  .hero-grid{display:grid;grid-template-columns:1fr;gap:40px}
  h1.hero-h{font-size:clamp(2.05rem,4.4vw,3.3rem);font-weight:600;line-height:1.06}
  h1.hero-h .proofword{color:var(--verified-ink)}
  .hero .lead{font-size:1.24rem;color:var(--ink-soft);margin:22px 0 0;max-width:44ch}
  .synopsis{margin-top:24px;max-width:52ch;background:var(--card);border:1px solid var(--line);
    border-left:3px solid var(--verified);border-radius:2px;padding:18px 20px;font-size:1.02rem;color:var(--ink)}
  .synopsis strong{color:var(--verified-ink);font-weight:700}
  .fineprint{margin-top:22px;font-size:15px;color:var(--ink-soft);display:flex;align-items:flex-start;gap:10px;max-width:44ch}
  .fineprint svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;color:var(--verified-ink)}


  /* hero coverage line + CTA row (Change 1/2) */
  .coverage{margin-top:18px;font-family:"Barlow",sans-serif;font-size:15.5px;font-weight:600;
    letter-spacing:.01em;color:var(--verified-ink)}
  .hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
  .hero-seg{font-size:14.5px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
  .hero-seg:hover{color:var(--verified-ink)}

  /* the three beats (Change 3) */
  .beats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px}
  @media (max-width:860px){.beats{grid-template-columns:1fr}}
  .beat{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--verified);
    border-radius:2px;padding:18px 20px}
  .beat-k{font-family:"Barlow",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--verified-ink);margin-bottom:8px}
  .beat-v{font-size:15.5px;line-height:1.6;color:var(--ink)}
  .beat-note{font-size:14.5px;line-height:1.65;color:var(--ink-soft);max-width:70ch;margin-bottom:26px}
  .proof-wrap{max-width:620px}

  /* tabbed examples. The tab row and the card are both CENTRED on the page;
     the text inside the card stays left aligned. */

  /* tabbed examples. The tab row and the card are both CENTRED on the page;
     the text inside the card stays left aligned. */

  /* tabbed examples. The tab row and the card are both CENTRED on the page;
     the text inside the card stays left aligned. */

  /* tabbed examples. The tab row and the card are both CENTRED on the page;
     the text inside the card stays left aligned. */
  /* an author display rule beats the UA stylesheet's [hidden]{display:none},
     so without this every panel paints at once even though .hidden is true. */
  .beat-note{font-size:14.5px;line-height:1.65;color:var(--ink-soft);max-width:70ch;margin:26px auto 0;text-align:center}

  /* tabbed examples. The tab row and the card are both CENTRED on the page;
     the text inside the card stays left aligned. */
  /* an author display rule beats the UA stylesheet's [hidden]{display:none},
     so without this every panel paints at once even though .hidden is true. */

  /* tabbed examples. The tab row and the card are both CENTRED on the page;
     the text inside the card stays left aligned. */
  /* an author display rule beats the UA stylesheet's [hidden]{display:none},
     so without this every panel paints at once even though .hidden is true. */

  /* tabbed examples. The tab row and the card are both CENTRED on the page;
     the text inside the card stays left aligned. */
  /* an author display rule beats the UA stylesheet's [hidden]{display:none},
     so without this every panel paints at once even though .hidden is true. */

  /* tabbed examples. The tab row and the card are both CENTRED on the page;
     the text inside the card stays left aligned. */
  /* an author display rule beats the UA stylesheet's [hidden]{display:none},
     so without this every panel paints at once even though .hidden is true. */

  /* tabbed examples. The tab row and the card are both CENTRED on the page;
     the text inside the card stays left aligned. */
  /* an author display rule beats the UA stylesheet's [hidden]{display:none},
     so without this every panel paints at once even though .hidden is true. */

  /* tabbed examples. The tab row and the card are both CENTRED on the page;
     the text inside the card stays left aligned. */
  /* an author display rule beats the UA stylesheet's [hidden]{display:none},
     so without this every panel paints at once even though .hidden is true. */

  /* tabbed examples. The tab row and the card are both CENTRED on the page;
     the text inside the card stays left aligned. */
  .tabs{margin-top:8px}
  .tablist{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:24px}
  .tab{font-family:"Barlow",sans-serif;font-size:14.5px;font-weight:600;color:var(--ink-soft);
    background:transparent;border:1px solid var(--line);border-radius:2px;padding:9px 18px;cursor:pointer}
  .tab:hover{color:var(--verified-ink);border-color:var(--badge-line)}
  .tab[aria-selected="true"]{background:var(--verified-ink);border-color:var(--verified-ink);color:var(--card)}
  .tab:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

  /* SECOND HERO — the film. One frame, centred, same border language as the
     proof card. The video never autoplays: it has a voice, and a page that
     starts talking uninvited is hostile. Poster + controls, viewer's choice. */
  .film-frame{max-width:860px;margin:34px auto 0;border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;background:#000}
  .film-frame video{display:block;width:100%;height:auto}
  .panel{display:flex;justify-content:center}
  /* an author display rule beats the UA stylesheet's [hidden]{display:none},
     so without this every panel paints at once even though .hidden is true. */
  .panel[hidden]{display:none}
  .panel .proof{max-width:660px;width:100%}
  .pk{font-family:"Barlow",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--verified-ink);margin:0 0 10px}
  .proof-body .pk:not(:first-child){margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
  .proof-foot{font-size:14.5px;line-height:1.65;color:var(--ink-soft);max-width:70ch;
    margin:26px auto 0;text-align:center;padding-top:18px;border-top:1px dashed var(--line)}
  .proof-foot strong{color:var(--ink);font-weight:600}
  .records li.gap b{color:var(--ink);font-weight:600}
  .why{display:block;margin-top:4px;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
  .nextup{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
  .nextup-h{font-family:"Barlow",sans-serif;font-size:13px;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;color:var(--verified-ink);margin-bottom:7px}
  .nextup.blocked .nextup-h{color:var(--denied)}
  .nextup-b{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
  .records .label-sm.none{color:var(--denied)}
  .none-note{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
  .beat-note{font-size:14.5px;line-height:1.65;color:var(--ink-soft);max-width:70ch;margin:14px auto 0;text-align:center}

  /* institutions call-out. A raised pill in the bar and a bordered button
     beside the primary CTA: both carry a shadow so they read as something to
     press, not another underlined link in a row of them. */
  .nav-cta{font-weight:700;color:var(--verified-ink) !important;border:1px solid var(--badge-line);
    background:var(--badge-bg);border-radius:2px;padding:7px 15px;text-decoration:none;
    box-shadow:0 2px 5px rgba(30,42,58,.13),0 1px 0 rgba(255,255,255,.7) inset;transition:box-shadow .16s ease,transform .16s ease}
  .nav-cta:hover{background:var(--wash);border-color:var(--verified);
    box-shadow:0 4px 10px rgba(30,42,58,.18),0 1px 0 rgba(255,255,255,.7) inset;transform:translateY(-1px)}
  .nav-cta:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .ghost-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
    background:var(--card);color:var(--verified-ink);border:1.5px solid var(--verified);
    border-radius:2px;padding:14px 24px;font-family:"Barlow",sans-serif;font-weight:700;
    font-size:15.5px;text-decoration:none;
    box-shadow:0 3px 9px rgba(30,42,58,.15),0 1px 0 rgba(255,255,255,.8) inset;
    transition:box-shadow .16s ease,transform .16s ease,background .16s ease}
  .ghost-btn svg{width:17px;height:17px}
  .ghost-btn:hover{background:var(--wash);box-shadow:0 6px 16px rgba(30,42,58,.2);transform:translateY(-1px)}
  .ghost-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  @media (prefers-reduced-motion: reduce){.nav-cta,.ghost-btn{transition:none}
    .nav-cta:hover,.ghost-btn:hover{transform:none}}
  @media (max-width:760px){.nav-cta{padding:6px 12px;font-size:13px}}

  /* blueprint frame — the registration marks that sit just outside a box in
     this design system. Drawn with pseudo-elements on injected .corner spans;
     purely decorative, so they are aria-hidden and add no reading order. */
  .blueprint{position:relative}
  .blueprint>.corner{position:absolute;width:11px;height:11px;pointer-events:none;
    color:color-mix(in srgb, var(--ink) 55%, transparent)}
  .blueprint>.corner::before,.blueprint>.corner::after{content:"";position:absolute;background:currentColor}
  .blueprint>.corner::before{left:5px;top:0;width:1px;height:100%}
  .blueprint>.corner::after{top:5px;left:0;width:100%;height:1px}
  .blueprint>.corner.tl{top:-6px;left:-6px}
  .blueprint>.corner.tr{top:-6px;right:-6px}
  .blueprint>.corner.bl{bottom:-6px;left:-6px}
  .blueprint>.corner.br{bottom:-6px;right:-6px}

  /* governance row under a proof card. The digest is a real SHA-256 over the
     record above it — citation, quoted passage, verbatim status, reviewer —
     computed at build time and reproducible. No invented hex is printed. */
  .gov-row{display:flex;align-items:center;gap:10px;padding:13px 20px;border-top:1px solid var(--line);
    background:var(--card);font-size:13.5px;color:var(--ink-soft);flex-wrap:wrap}
  .gov-row svg{width:18px;height:18px;flex:0 0 auto;color:var(--verified-ink)}
  .gov-hash{color:var(--verified-ink);font-weight:500}

  /* generic section — more breathing room */
  section.band{padding:96px 0}
  h2.band-h{font-size:clamp(1.9rem,3.3vw,2.55rem);font-weight:600;line-height:1.08;text-wrap:pretty}
  .band-lead{font-size:1.14rem;color:var(--ink-soft);max-width:none;margin-top:20px}

  /* programs strip — the mechanisms Dearbh covers, beyond private insurance */
  .programs{margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
  .programs-lead{font-size:1.1rem;color:var(--ink);max-width:66ch;margin-bottom:22px}
  .program-chips{display:flex;flex-wrap:wrap;gap:10px}
  .program-chips span{font-family:"Barlow",sans-serif;font-weight:600;font-size:14px;color:var(--verified-ink);
    background:var(--wash);border:1px solid var(--line);border-radius:2px;padding:8px 16px}
  .programs-note{margin-top:16px;font-size:14px;color:var(--ink-soft);max-width:66ch}

  /* heading column beside a content column */
  .split{display:grid;grid-template-columns:minmax(250px,560px) 1fr;gap:56px;align-items:start}
  @media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}}

  /* STORY / founder */
  .about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;margin-top:34px}
  @media (max-width:860px){.about-grid{grid-template-columns:1fr;gap:32px}}
  .about-grid.nophoto{grid-template-columns:1fr;max-width:70ch}
  .founder-photo{border-radius:var(--radius);border:1px solid var(--line);background:var(--wash);
    aspect-ratio:3/2;overflow:hidden;position:relative;position:sticky;top:100px}
  @media (max-width:860px){.founder-photo{position:static}}
  .founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
  .about-copy p{font-size:1.12rem;color:var(--ink);margin-bottom:18px}
  .about-copy .lead-serif{font-family:"Barlow Condensed",sans-serif;font-weight:500;font-size:1.5rem;line-height:1.28;color:var(--ink);margin-bottom:22px}
  .pullquote{background:var(--badge-bg);border:1px solid var(--badge-line);border-radius:var(--radius);
    padding:24px 24px;margin-top:8px;font-family:"Barlow Condensed",sans-serif;font-size:1.24rem;line-height:1.32;color:var(--ink)}
  .tools-credit{margin-top:18px;font-size:.95rem;color:var(--ink-soft)}
  .tools-credit a{color:var(--verified-ink);font-weight:600}

  /* WHO — four audience cards */
  .who{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
  @media (max-width:900px){.who{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.who{grid-template-columns:1fr}}
  .who .card{padding:26px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);box-shadow:0 1px 0 rgba(30,42,58,.03)}
  .who .card svg{width:28px;height:28px;color:var(--verified-ink);stroke-width:1.5;margin:0 auto 14px}
  .who h3{font-size:1.18rem;margin-bottom:8px}
  .who p{color:var(--ink-soft);font-size:14.5px}

  /* PROBLEM — icon grid */
  /* step + point cards. Same box as .who .card: one card format on the page,
     so a reader learns it once. Left aligned like everything else. */
  .diffcols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
  @media (max-width:860px){.diffcols{grid-template-columns:1fr}}
  .dcol{padding:26px 22px;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--raised);box-shadow:0 1px 0 rgba(30,42,58,.03)}
  .dcol svg{width:28px;height:28px;color:var(--verified-ink);stroke-width:1.5;margin:0 auto 14px}

  .icongrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  @media (max-width:640px){.icongrid{grid-template-columns:repeat(2,1fr)}}
  .icard{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);padding:22px 16px;text-align:center;box-shadow:0 1px 0 rgba(30,42,58,.03)}
  .icard svg{width:30px;height:30px;margin:0 auto 12px;color:var(--verified-ink);stroke-width:1.5}
  .icard span{font-size:14px;font-weight:500;line-height:1.35;display:block}

  /* HOW — numbered flow */
  .howhead{text-align:left;max-width:none;margin:0}
  .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
  @media (max-width:1000px){.flow{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:600px){.flow{grid-template-columns:1fr}}
  .flow-step{padding:26px 22px;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--raised);box-shadow:0 1px 0 rgba(30,42,58,.03);text-align:left}
  /* the number and its icon sit CENTRED in the card; the heading and body
     below stay left aligned like every other card on the page. */
  .flow-top{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
  .flow-num{width:36px;height:36px;flex:0 0 auto;border-radius:50%;border:2px solid var(--verified);
    display:flex;align-items:center;justify-content:center;font-family:"Barlow",sans-serif;font-weight:700;font-size:15px;color:var(--verified-ink)}
  .flow-top svg{width:30px;height:30px;color:var(--ink);stroke-width:1.5}
  .flow-step h3{font-size:1.14rem;margin-bottom:9px}
  .flow-step p{color:var(--ink-soft);font-size:14.5px}
  .flow-arrow{display:none}   /* no arrows between boxed cards */
  .flow-arrow svg{width:26px;height:26px;stroke-width:1.6}


  /* DIFFERENCE — four icon columns */
  .diffcols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  @media (max-width:860px){.diffcols{grid-template-columns:repeat(2,1fr);gap:24px}}
  @media (max-width:520px){.diffcols{grid-template-columns:1fr}}
  .dcol h3{font-size:1.1rem;margin-bottom:9px}
  .dcol p{color:var(--ink-soft);font-size:14.5px}

  /* PRICING */
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
  @media (max-width:820px){.tiers{grid-template-columns:1fr}}
  .tier{border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);padding:30px 26px;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(30,42,58,.03)}
  .tier .thead{display:flex;align-items:center;gap:11px;margin-bottom:16px}
  .tier .thead svg{width:24px;height:24px;color:var(--verified-ink);stroke-width:1.5}
  .tier .name{font-family:"Barlow",sans-serif;font-weight:600;font-size:.8125rem;color:var(--ink-soft)}
  .tier .soon{font-family:"Barlow Condensed",sans-serif;font-size:1.75rem;font-weight:500;margin-bottom:6px;color:var(--ink)}
  .tier .price{font-family:"Barlow Condensed",sans-serif;font-size:1.75rem;font-weight:500;margin-bottom:6px;color:var(--ink)}
  .tier .price .per{font-family:"Barlow",sans-serif;font-size:14px;font-weight:500;color:var(--ink-soft)}
  .tier .desc{color:var(--ink-soft);font-size:15px;margin-bottom:22px}
  .tier ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  .tier li{font-size:15px;display:flex;gap:9px;align-items:flex-start;color:var(--ink)}
  .tier li svg{width:16px;height:16px;margin-top:3px;flex:0 0 auto;color:var(--verified)}

  /* CLOSING BAND */
  .final{background:var(--verified-ink);color:var(--card);border-radius:2px;padding:36px 40px;
    display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:space-between}
  .final .seal{width:44px;height:44px;flex:0 0 auto}
  .final .ftext{flex:1 1 320px}
  .final h2{color:var(--card);font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:6px}
  .final p{color:var(--wash);font-size:1.1rem}
  .soon-btn{flex:0 0 auto;background:var(--card);color:var(--verified-ink);font-family:"Barlow",sans-serif;
    font-weight:600;font-size:15px;padding:14px 26px;border-radius:2px}

  /* footer */
  footer{padding:44px 0 60px;border-top:1px solid var(--line);margin-top:20px}
  .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
  .foot .brand{font-size:19px}
  .foot .say{font-family:"Barlow Condensed",sans-serif;font-style:italic;font-size:13.5px;color:var(--ink-soft)}
  .foot nav{display:flex;gap:24px;flex-wrap:wrap}
  .foot nav a{color:var(--ink-soft);text-decoration:none;font-size:14.5px;font-weight:500}
  .foot nav a:hover{color:var(--verified-ink)}
  /* not-a-law-firm disclaimer — full width beneath the footer row */
  .disclaimer{flex:1 1 100%;order:99;margin-top:8px;padding-top:16px;border-top:1px solid var(--line);
    font-size:13px;line-height:1.6;color:var(--ink-soft);max-width:70ch}
  .roadmap{flex:1 1 100%;order:100;margin-top:10px;font-size:13px;line-height:1.6;
    color:var(--ink-soft);max-width:70ch}
  .roadmap-h{font-family:"Barlow",sans-serif;font-weight:600;color:var(--verified-ink);margin:0}
  .roadmap ul{list-style:none;padding:0;margin:2px 0 0}

  /* alternating section grounds: cream / white down the page */
  main > section:nth-child(odd){background:var(--paper)}
  main > section:nth-child(even){background:var(--card)}

  /* hero callout — the top-of-page ask, same tokens as everything else */
  .callout{margin-top:26px;background:var(--wash);border:1px solid var(--badge-line);
    border-radius:2px;padding:18px 20px;display:flex;align-items:center;gap:18px;
    flex-wrap:wrap;justify-content:space-between;max-width:600px}
  .callout-h{font-family:"Barlow",sans-serif;font-weight:600;font-size:15.5px;color:var(--ink)}
  .callout-p{font-size:14.5px;color:var(--ink-soft);margin-top:3px}
  .callout-btn{flex:0 0 auto;background:var(--verified-ink);color:var(--card);
    font-family:"Barlow",sans-serif;font-weight:600;font-size:14.5px;
    padding:11px 20px;border-radius:2px;text-decoration:none;white-space:nowrap}
  .callout-btn:hover{background:var(--verified)}
  .callout-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

  /* waiting list — same tokens as the rest of the page; no new palette */
  .wl{background:var(--raised);border:1px solid var(--line);border-radius:2px;
    padding:38px 40px;max-width:760px;margin:0 auto}
  .wl h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:10px}
  .wl .lede{color:var(--ink-soft);font-size:1.05rem;line-height:1.65;max-width:56ch;margin-bottom:26px}
  .wl-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media (max-width:640px){.wl{padding:28px 22px}.wl-grid{grid-template-columns:1fr}}
  .wl-field{display:flex;flex-direction:column;gap:7px}
  .wl-field.full{grid-column:1/-1}
  .wl label{font-family:"Barlow",sans-serif;font-size:13.5px;font-weight:600;color:var(--ink)}
  .wl .hint{font-weight:400;color:var(--ink-soft)}
  .wl input[type=text],.wl input[type=email],.wl select{
    font-family:"Barlow",sans-serif;font-size:15.5px;color:var(--ink);background:var(--card);
    border:1px solid var(--line);border-radius:2px;padding:12px 13px;width:100%}
  .wl input:focus-visible,.wl select:focus-visible,.wl button:focus-visible,.wl input[type=checkbox]:focus-visible{
    outline:3px solid var(--gold);outline-offset:2px}
  .wl .check{display:flex;gap:11px;align-items:flex-start;grid-column:1/-1}
  .wl .check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--verified)}
  .wl .check label{font-weight:400;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
  .wl .check label b{color:var(--ink);font-weight:600}
  .wl-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
  .wl button{background:var(--verified-ink);color:var(--card);font-family:"Barlow",sans-serif;
    font-weight:600;font-size:15.5px;padding:14px 30px;border:0;border-radius:2px;cursor:pointer}
  .wl button:hover{background:var(--verified)}
  .wl button[disabled]{opacity:.6;cursor:progress}
  .wl-msg{font-family:"Barlow",sans-serif;font-size:14.5px;line-height:1.5}
  .wl-msg.err{color:var(--denied)}
  .wl-msg.ok{color:var(--verified-ink);font-weight:600}
  .wl .privacy-note{margin-top:18px;font-size:13.5px;color:var(--ink-soft);line-height:1.6}
  .wl .privacy-note a{color:var(--verified-ink)}
  a.soon-btn{text-decoration:none}
  a.soon-btn:hover{background:var(--wash)}

  /* reveal */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}