/* ---------- 0908 self-hosted fonts (were Google Fonts; preloaded from the template) ---------- */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/instrument-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* =============================================================================
   FinePrint — site design system  (build 0827 "depth")
   ide8 language: paper / sand / deep navy, Instrument Serif display,
   Instrument Sans UI, amber accent, teal working colour.
   Shared by every page. Zero framework. One small js file (js/site.js).

   HARD RULES carried forward from canon:
   · green / yellow / red are matter-risk colours. Amber is the brand accent and
     may decorate — EXCEPT inside .counsel bands, which stay amber-free so
     Yellow reads semantically.
   · .mj artwork is ink+watercolour on white and is multiplied into the band, so
     it must only ever sit on a light band (paper / white / sand).
   · every prefers-reduced-motion override must MATCH the specificity of the
     rule that set the animation, or the animation wins the cascade.
   ========================================================================== */
/* =============================================================================
   FinePrint - site design system (build 0918 "counsel")
   Rebuilt for the Website-Copy pass: the proven ide8 core (tokens, type,
   buttons, nav, grids, cards, ledger, steps, levels, pricing, faq, forms,
   footer) carried over from the 0827 system verbatim, plus one new layer at
   the end for the components this copy needed. The animated figures from the
   0909-0917 passes are deliberately NOT here; no page in this build calls one.

   HARD RULES carried forward from canon:
   - green / yellow / red are matter-risk colours. Amber is the brand accent
     and may decorate - never inside a band that shows a review lane.
   - .mj artwork is ink+watercolour on white, multiplied into the band, so it
     may only sit on a light band (paper / white / sand).
   - every prefers-reduced-motion override must MATCH the specificity of the
     rule that set the animation, or the animation wins the cascade.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --paper:#FCFBF9; --paper-2:#FFFFFF; --sand:#F5F2EC; --sand-2:#EFEBE2;
  --deep:#0C1A24; --deep-2:#12242F; --deep-3:#1B333F; --ink:#101E28;
  --grey-1:#33454F; --grey-2:#566873; --grey-3:#7E8F99; --grey-4:#AFBDC5;
  --line:#E4E8E9; --line-soft:#EFF1F0; --line-dark:rgba(236,237,234,.16);
  --amber:#F59E0B; --amber-deep:#C77C05; --amber-wash:#FFF2D9;
  --teal:#17627A; --teal-deep:#10495B; --teal-wash:#E2EFF3;
  --cream:#F2EDE3; --mist:#BCC9D2; --teal-lt:#8FC1D4;
  --lv-green:#2F7A4D; --lv-yellow:#B45309; --lv-yellow-dot:#D97706; --lv-red:#C0392B;
  --display:'Instrument Serif',ui-serif,Georgia,serif;
  --body:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --maxw:1240px; --pad:clamp(20px,5vw,64px); --sec:clamp(64px,9vw,132px);
  --r-media:24px; --r-chip:999px;
  --navh:74px;
}
@media (max-width:1080px){ :root{--navh:64px} }
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16.5px;line-height:1.65;font-variant-ligatures:common-ligatures}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
img,svg{max-width:100%}
table{border-collapse:collapse;width:100%}
::selection{background:var(--amber-wash);color:var(--ink)}
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{
  outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}
.btn:focus-visible{border-radius:var(--r-chip)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-n{max-width:900px;margin-inline:auto;padding-inline:var(--pad)}
.band{padding-block:var(--sec)}
.band-tight{padding-block:clamp(46px,6vw,80px)}
.band-paper{background:var(--paper)}
.band-white{background:var(--paper-2)}
.band-sand{background:var(--sand)}
.band-line{border-top:1px solid var(--line)}
.band-deep{background:
  radial-gradient(120% 100% at 86% 0%, rgba(23,98,122,.26), transparent 56%),
  radial-gradient(90% 80% at 6% 100%, rgba(245,158,11,.09), transparent 55%),
  var(--deep)}
section[id]{scroll-margin-top:calc(var(--navh) + 14px)}

/* ---------- type ---------- */
h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,72px);
  line-height:1.04;letter-spacing:-.01em;color:var(--ink);max-width:13ch;text-wrap:balance}
h2{font-family:var(--display);font-weight:400;font-size:clamp(29px,4.4vw,50px);
  line-height:1.08;letter-spacing:-.005em;color:var(--ink);max-width:26ch;text-wrap:balance}
h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.1vw,26px);
  line-height:1.2;color:var(--ink)}
h1 em,h2 em,h3 em{font-style:italic}
.deck{font-size:clamp(17.5px,1.6vw,20px);line-height:1.62;color:var(--grey-1);
  max-width:62ch;margin-top:20px}
.body-l{font-size:17px;line-height:1.72;color:var(--grey-1);max-width:58ch;margin-top:22px}
.body-l + .body-l{margin-top:20px}
.lede{font-size:clamp(17.5px,1.7vw,20.5px);line-height:1.6;color:var(--grey-1);
  max-width:46ch;margin-top:24px}
.kick{display:inline-flex;align-items:center;gap:11px;font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
.kick::before{content:"";width:24px;height:2.5px;background:var(--amber);border-radius:2px}
.kick-dark{color:var(--teal-lt)}
.secdash{display:block;width:30px;height:3px;border-radius:2px;background:var(--amber);margin-bottom:24px}

.h-dark{color:var(--cream)}
.deck-dark{color:var(--grey-4)}
.small{font-size:13.8px;line-height:1.7;color:var(--grey-2)}

.pull{font-family:var(--display);font-size:clamp(23px,2.8vw,33px);line-height:1.36;
  color:var(--ink);max-width:24ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-chip);
  padding:15px 27px;font-family:var(--body);font-size:15.5px;font-weight:600;line-height:1;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .22s ease,border-color .22s ease,color .22s ease}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--deep);color:var(--paper)}
.btn-primary:hover{background:var(--teal-deep)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep)}
.btn-light{background:var(--cream);color:var(--deep)}
.btn-light:hover{background:#FFFFFF}
.btn-out-dark{border-color:rgba(236,237,234,.4);color:var(--cream)}
.btn-out-dark:hover{border-color:var(--cream);background:rgba(236,237,234,.08)}
.btn-sm{padding:11px 20px;font-size:14px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px}
.tlink{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;
  color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(23,98,122,.32);
  padding-bottom:2px;transition:border-color .2s ease,color .2s ease}
.tlink:hover{color:var(--teal-deep);border-bottom-color:var(--teal)}
.tlink .arr{transition:transform .25s ease}
.tlink:hover .arr{transform:translateX(3px)}

/* ---------- nav ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--deep);color:var(--paper);
  padding:12px 20px;border-radius:0 0 12px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}
.nav{position:sticky;top:0;z-index:60;background:rgba(252,251,249,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:10px 20px;padding-block:13px}
.brand{display:block;margin-right:auto;flex:none}
.brand svg{display:block;height:25px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links > a,.nav-drop > summary{display:inline-flex;align-items:center;gap:6px;
  font-size:14.5px;font-weight:500;color:var(--grey-1);text-decoration:none;white-space:nowrap;
  padding:8px 12px;border-radius:10px;cursor:pointer;list-style:none;
  transition:background .18s ease,color .18s ease}
.nav-drop > summary::-webkit-details-marker{display:none}
.nav-links > a:hover,.nav-drop > summary:hover{color:var(--ink);background:rgba(16,30,40,.05)}
.nav-links > a[aria-current="page"],.nav-drop[data-current] > summary{color:var(--ink);font-weight:600}
.nav-links > a[aria-current="page"]{position:relative}
.nav-links > a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;
  bottom:2px;height:2px;border-radius:2px;background:var(--amber)}
.nav-drop{position:relative}
.nav-caret{width:9px;height:9px;flex:none;transition:transform .2s ease}
.nav-drop[open] .nav-caret{transform:rotate(180deg)}
.nav-drop[open] > summary{background:rgba(16,30,40,.05);color:var(--ink)}
.nav-menu{position:absolute;top:calc(100% + 10px);left:-6px;z-index:70;min-width:322px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 22px 48px -18px rgba(12,26,36,.28),0 2px 6px rgba(12,26,36,.06);
  padding:10px;animation:navpop .16s ease both}
@keyframes navpop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.nav-menu a{display:grid;grid-template-columns:auto 1fr;gap:2px 13px;text-decoration:none;
  padding:11px 13px;border-radius:12px;transition:background .16s ease}
.nav-menu a:hover{background:var(--sand)}
.nav-menu .nm-ico{grid-row:1 / span 2;width:19px;height:19px;margin-top:3px;color:var(--teal);flex:none}
.nav-menu .nm-hero{width:20px;height:20px;margin-top:2px}  /* the two hero marks (brand 07-product-icons/hero, −small cut) */
.nav-menu .nm-t{font-size:14.8px;font-weight:600;color:var(--ink);line-height:1.3}
.nav-menu .nm-d{font-size:13.2px;color:var(--grey-2);line-height:1.45}
.nav-menu .nm-sep{margin:8px 13px 6px;font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grey-3)}
.nav-cta{flex:none;display:flex;align-items:center;gap:10px}
.nav-cta .btn-ghost{border-color:var(--grey-4);color:var(--grey-1)}
.nav-cta .btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep)}
.nav-toggle{display:none}
@media (max-width:1080px){
  .nav-in{gap:12px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
    border:1px solid var(--line);border-radius:12px;background:var(--paper-2);cursor:pointer}
  .nav-toggle svg{width:18px;height:18px;color:var(--ink)}
  .nav-links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:2px;background:var(--paper-2);border-bottom:1px solid var(--line);
    padding:10px var(--pad) 22px;max-height:calc(100vh - var(--navh));overflow-y:auto;
    box-shadow:0 24px 40px -22px rgba(12,26,36,.32)}
  .nav.is-open .nav-links{display:flex}
  .nav-links > a,.nav-drop > summary{padding:13px 8px;font-size:16px;border-radius:10px}
  .nav-links > a[aria-current="page"]::after{left:8px;right:auto;width:24px;bottom:8px}
  .nav-drop > summary{justify-content:space-between}
  .nav-menu{position:static;min-width:0;border:none;box-shadow:none;padding:2px 0 10px 8px;
    background:transparent;border-left:2px solid var(--line);margin-left:8px;animation:none}
  .nav-cta{display:none}
  .nav-links .nav-cta-m{display:flex;gap:10px;margin-top:14px;justify-content:center}
  .nav-links .nav-cta-m .btn{flex:1;justify-content:center}
}
@media (min-width:1081px){ .nav-links .nav-cta-m{display:none} }

/* ---------- generic grids ---------- */
.duo{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5vw,80px);align-items:center}
.duo-t{align-items:start}

/* The collapse below uses !important on purpose. Pages set column ratios with
   inline styles (`style="grid-template-columns:1.06fr .94fr"`), and an inline
   declaration outranks a media query — without this, a two-column band would
   stay two columns on a phone. Nothing else here is !important. */
@media (max-width:900px){
  .duo{grid-template-columns:1fr !important;gap:40px}
}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(38px,5vw,64px)}

.card{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;
  padding:30px 28px 34px;display:flex;flex-direction:column}
.band-white .card{background:var(--paper)}
.card h3{font-size:clamp(20px,1.9vw,24px)}
.card p{margin-top:13px;font-size:15.4px;line-height:1.66;color:var(--grey-2)}

@media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr) !important} }
@media (max-width:640px){ .cards{grid-template-columns:1fr !important;gap:13px} }
@media (max-width:820px){
}

/* ---------- page hero (secondary pages) ---------- */
.phero{padding-block:clamp(46px,6vw,86px) clamp(44px,6vw,78px);border-bottom:1px solid var(--line)}
.phero-deep{border-bottom:none}
.phero h1{max-width:17ch;font-size:clamp(38px,5.4vw,64px)}
.phero .lede{max-width:56ch}
.crumbs{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;
  color:var(--grey-2);margin-bottom:22px}
.crumbs a{text-decoration:none;color:var(--grey-2)}
.crumbs a:hover{color:var(--ink)}
.crumbs-dark{color:var(--mist)}
.crumbs-dark a{color:var(--teal-lt)}
.crumbs-dark a:hover{color:var(--cream)}

/* ---------- in-page contents rail ---------- */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.toc a{font-size:13.4px;font-weight:600;text-decoration:none;color:var(--grey-1);
  border:1px solid var(--line);background:var(--paper-2);border-radius:var(--r-chip);
  padding:8px 15px;transition:border-color .18s ease,color .18s ease}
.toc a:hover{border-color:var(--grey-4);color:var(--ink)}

/* ---------- walkthrough steps (how it works) ---------- */
/* Walkthrough steps stack rather than sit side by side. These figures are
   1400px-wide product screenshots: in a 40%-width column the UI type renders
   at about five pixels and the picture stops being evidence. Full column
   width is the point of the page. */
.steps{margin-top:clamp(44px,5.6vw,72px);display:grid;gap:clamp(52px,6.4vw,92px)}
.step{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,38px)}
.step-copy{max-width:66ch}
.step-copy h3{font-family:var(--display);font-size:clamp(24px,2.7vw,33px);line-height:1.16}
.step-copy p{margin-top:15px;font-size:16.3px;line-height:1.72;color:var(--grey-1);max-width:62ch}
.step-copy p + p{margin-top:14px}

.shot{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);
  background:var(--paper-2);box-shadow:0 30px 60px -34px rgba(12,26,36,.45)}
.shot-fig figcaption{margin-top:12px;font-size:13.2px;line-height:1.6;color:var(--grey-3)}
@media (max-width:900px){
  .step{gap:24px}
}

/* ---------- judgment levels (NO amber inside .counsel) ---------- */
.levels{margin-top:clamp(32px,4.4vw,50px);border-bottom:1px solid var(--line)}
.level{display:grid;grid-template-columns:36px 1fr;gap:16px;border-top:1px solid var(--line);
  padding:clamp(26px,3.4vw,40px) 0}
.lv-dot{width:15px;height:15px;border-radius:50%;margin-top:9px}
.lv-green .lv-dot{background:var(--lv-green)}
.lv-yellow .lv-dot{background:var(--lv-yellow-dot)}
.lv-red .lv-dot{background:var(--lv-red)}
.level h3{font-size:clamp(22px,2.2vw,27px)}
.level p{margin-top:11px;font-size:16px;line-height:1.68;color:var(--grey-1);max-width:68ch}
.wg{color:var(--lv-green)}
.wy{color:var(--lv-yellow)}
.wr{color:var(--lv-red)}
@media (max-width:600px){ .level{grid-template-columns:26px 1fr;gap:12px} }

/* ---------- checklist ---------- */
.checks{display:grid;gap:13px;margin-top:26px}
/* block layout, not grid: these list items carry mixed inline content (<b>, bare
   text, links) and a grid would promote every one of them to its own track */
.checks li{position:relative;padding-left:32px;font-size:15.6px;
  line-height:1.62;color:var(--grey-1)}
.checks li::before{content:"";position:absolute;left:0;top:5px;width:17px;height:17px;
  border-radius:50%;background:var(--teal-wash);
  box-shadow:inset 0 0 0 1px rgba(23,98,122,.3)}
.checks b{color:var(--ink);font-weight:600}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line); /* 0907: four plans */
  border-bottom:1px solid var(--line);margin-top:clamp(36px,4.6vw,56px)}
.plan{position:relative;padding:32px 24px 38px;border-left:1px solid var(--line)}
.plan:first-child{border-left:none}
.p-name{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.p-price{margin-top:16px;display:flex;align-items:baseline;gap:3px}
.p-num{font-family:var(--display);font-size:clamp(29px,2.6vw,37px);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.p-per{font-size:14px;color:var(--grey-2)}
.p-stage{margin-top:12px;font-family:var(--display);font-style:italic;font-size:17px;
  line-height:1.4;color:var(--grey-1)}
.p-inc{margin-top:14px;font-size:14.5px;line-height:1.62;color:var(--grey-2)}
.plan-founder{background:linear-gradient(180deg,var(--amber-wash),rgba(255,242,217,.28))}
.plan-founder::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--amber)}
.plan-founder .p-num{font-size:clamp(36px,3.2vw,45px)}
.plan-founder .p-name{color:var(--amber-deep)}

@media (max-width:1060px){
  .plans{grid-template-columns:1fr !important;border-bottom:none}
  .plan{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name price" "stage price" "inc inc";
    gap:0 24px;border-left:none;border-bottom:1px solid var(--line);padding:24px 18px 28px}
  .p-name{grid-area:name}
  .p-price{grid-area:price;align-self:start;justify-self:end;margin-top:0}
  .p-stage{grid-area:stage;margin-top:8px}
  .p-inc{grid-area:inc;margin-top:12px;max-width:56ch}
}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(34px,4.4vw,52px);border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:flex;align-items:baseline;justify-content:space-between;gap:22px;
  padding:22px 0;cursor:pointer;list-style:none;font-family:var(--display);
  font-size:clamp(19px,1.9vw,23px);line-height:1.3;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-size:22px;font-weight:400;
  color:var(--grey-3);flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 24px;font-size:15.8px;line-height:1.72;color:var(--grey-1);max-width:70ch}
.faq p + p{padding-top:0;margin-top:-8px;padding-bottom:24px}

/* ---------- closing CTA band ---------- */

.close-h{font-size:clamp(33px,5.4vw,60px);max-width:19ch}

/* ---------- footer ---------- */
.foot{background:var(--deep);padding-block:clamp(54px,6.4vw,80px) clamp(30px,4vw,44px)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr));
  gap:40px clamp(26px,4vw,58px)}
.f-brand svg{display:block;height:25px;width:auto}
.f-mission{margin-top:20px;font-size:15px;line-height:1.7;color:var(--grey-4);max-width:36ch}
.f-col h3{font-family:var(--body);font-size:11.6px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(236,237,234,.5);margin-bottom:16px}
.f-col li + li{margin-top:11px}
.f-col a{font-size:14.6px;color:var(--grey-4);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.f-col a:hover{color:var(--cream);border-bottom-color:rgba(236,237,234,.4)}
.foot-rule{height:1px;background:var(--line-dark);margin-block:clamp(40px,5vw,58px) 26px}
.foot-bot{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px clamp(30px,5vw,64px);
  align-items:start}
.f-boundary{font-size:13.6px;line-height:1.72;color:var(--grey-4);max-width:74ch}
.f-boundary b{color:var(--mist);font-weight:600}
.f-meta{justify-self:end;text-align:right;font-size:13.4px;line-height:1.8;color:var(--grey-4)}
.f-meta .f-pow{color:var(--mist)}
@media (max-width:1000px){
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-brand-col{grid-column:1 / -1}
}
@media (max-width:600px){
  .foot-top{grid-template-columns:1fr;gap:32px}
  .foot-bot{grid-template-columns:1fr}
  .f-meta{justify-self:start;text-align:left}
}

/* ---------- paragraph stacking ----------
   The reset zeroes every <p> margin, which is right for single-paragraph
   components and wrong the moment a component holds two. These are the
   containers that actually carry running prose. .faq keeps its own rule. */
.card p + p,
.level p + p,
.note p + p,
.checks li p + p,
.f-boundary + p{margin-top:14px}

/* ---------- misc helpers ---------- */
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:clamp(38px,5vw,62px)}

.note{margin-top:26px;padding:18px 22px;border-radius:16px;background:var(--sand);
  border:1px solid var(--line);font-size:14.8px;line-height:1.68;color:var(--grey-1)}
.band-sand .note{background:var(--paper-2)}
.note b{color:var(--ink)}

/* ---------- forms: sign up · book a demo ---------------------------------
   Two pages carry a real form (signup.html, book-demo.html). Nothing posts
   anywhere yet — the markup is complete and correct, the `action` is left for
   the application to wire. Two-up rows are a GRID change, never a width change
   on the control: every input is 100% of its track, so the collapse at 700px
   is one line and nothing overflows. No inline column ratios are used on
   .fgrid, so unlike .duo/.trio this collapse needs no !important.
   ------------------------------------------------------------------------ */
.formcard{background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-media);padding:clamp(24px,3.2vw,38px)}
.band-white .formcard{background:var(--paper)}
.formcard h3{font-size:clamp(20px,2vw,25px)}
.formcard > p{margin-top:11px;font-size:15.2px;line-height:1.65;color:var(--grey-2);max-width:48ch}

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:17px 20px;margin-top:26px}
.fgrid .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:13.2px;font-weight:600;color:var(--grey-1)}
.field .req{color:var(--amber-deep)}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);
  font-size:15.4px;line-height:1.5;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  transition:border-color .18s ease,box-shadow .18s ease}
.band-white .field input,.band-white .field select,.band-white .field textarea{background:var(--paper-2)}
.field textarea{min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--grey-4)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-wash)}
/* native select chrome is the one control that will not take the ide8 look, so
   it is replaced with a drawn caret; padding-right keeps text off the caret */
.field select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237E8F99' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px}
.field .hint{font-size:12.7px;line-height:1.5;color:var(--grey-3)}

.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:26px}
.fine{margin-top:16px;font-size:12.9px;line-height:1.62;color:var(--grey-3);max-width:56ch}
.fine a{color:var(--teal)}
/* Netlify honeypot: present in the DOM for bots, gone for people. Not
   display:none — some bots skip those; off-screen still gets filled. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* single sign-on row — the three identity providers a founder already has */

/* numbered rail — "what happens after you press the button" */
.nums{counter-reset:num;list-style:none;margin-top:26px;border-bottom:1px solid var(--line)}
.nums li{counter-increment:num;position:relative;padding:16px 0 16px 46px;
  border-top:1px solid var(--line);font-size:15.3px;line-height:1.62;color:var(--grey-1)}
.nums li::before{content:counter(num);position:absolute;left:0;top:17px;width:27px;height:27px;
  border-radius:50%;background:var(--sand);color:var(--grey-2);font-size:12.6px;
  font-weight:700;display:grid;place-items:center}
.nums li b{color:var(--ink);font-weight:600}

@media (max-width:700px){
  .fgrid{grid-template-columns:1fr}
}

/* ---------- 0829 review pass additions --------------------------------------
   Four small component families added for the launch-readiness review:
   the collapsible endpoint catalogue (+ its filter), the legal-page prose
   block (privacy / terms), footer legal links, and the slim footer used on
   the conversion pages (book-demo, thanks).
   ------------------------------------------------------------------------- */

/* collapsible endpoint category — a <details> holding one category's table */

/* the catalogue filter — one input, wired by js/site.js; the catalogue works
   without it (details open by hand), so JS off degrades to collapsible */

/* legal prose — privacy & terms. Running text with real lists and dates. */
.legal{margin-top:clamp(30px,4vw,46px)}
.legal h2{font-size:clamp(23px,2.6vw,30px);margin-top:clamp(34px,4.4vw,50px)}
.legal h2:first-child{margin-top:0}
.legal p{margin-top:14px;font-size:15.8px;line-height:1.74;color:var(--grey-1);max-width:70ch}
.legal ul{margin-top:12px;padding-left:0;display:grid;gap:9px}
.legal ul li{position:relative;padding-left:24px;font-size:15.4px;line-height:1.68;
  color:var(--grey-1);max-width:68ch}
.legal ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--grey-4)}
.legal b{color:var(--ink);font-weight:600}
.legal a{color:var(--teal)}
.legal-date{font-size:13.6px;color:var(--grey-3);margin-top:14px}

/* footer legal links + the slim footer for conversion pages */
.f-meta a.f-leg{color:var(--grey-4);text-decoration:none;
  border-bottom:1px solid rgba(236,237,234,.28)}
.f-meta a.f-leg:hover{color:var(--cream);border-bottom-color:var(--cream)}
.foot-slim{padding-block:clamp(30px,4vw,44px)}

/* a matter-risk dot inside a plain card (homepage judgment cards) */
.card .lv-dot{margin:0 0 16px}

/* ---------- 0830 repositioning pass ------------------------------------------
   The three segment pages (startups · mid-market · enterprise) and the AI
   Counsel page each carry a run of named workflows — "what it runs for you",
   stated as mechanism. It is the one component the three-segment IA needed
   that the 0827 vocabulary didn't already have; everything else on those
   pages is composed from .stages, .stats, .levels, .checks, .spec and .faq.

   A workflow row is a hairline-separated band: a short verb in the left rail,
   then the heading, the mechanism, and a link into the page that owns the
   detail. Same geometry as .level, deliberately kept a separate family so the
   judgment lanes and their reserved colours are never borrowed for marketing.
   ------------------------------------------------------------------------- */
.wfs{margin-top:clamp(34px,4.6vw,54px);border-bottom:1px solid var(--line)}
/* 144px, not 112: the labels are uppercased and letter-spaced, so the widest
   two-word label in use ("Front door") measures 131px. Every one-word label
   sits on one line, and a single wrapping rail reads as a mistake rather than
   a choice — so the rail is sized for two words with headroom. */
.wf{display:grid;grid-template-columns:144px 1fr;gap:14px clamp(24px,3.4vw,46px);
  border-top:1px solid var(--line);padding:clamp(26px,3.4vw,40px) 0}
.wf-m{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-deep);padding-top:8px}
.wf h2,.wf h3{font-size:clamp(21px,2.1vw,26px)}
.wf p{margin-top:12px;font-size:16px;line-height:1.68;color:var(--grey-1);max-width:68ch}
.wf p + p{margin-top:12px}
.wf .tlink{display:inline-block;margin-top:16px}

/* the rail label sits above the heading on narrow screens — !important because
   pages set .wf column ratios inline, exactly as .duo does above */
@media (max-width:760px){
  .wf{grid-template-columns:1fr !important;gap:7px}
  .wf-m{padding-top:0}
}

/* the segment router (home §3) reuses .stages, but its cards carry a segment
   name rather than a stage number, and the price line is a plain footnote */


/* ==== layer-10-base.css ==== */
/* =============================================================================
   0918 layer — the components the Website-Copy pass needed and the 0827
   vocabulary did not already have. Everything above this line is the core
   system, unchanged. Nothing here redefines a core class; the few core
   overrides that exist are grouped at the end and each says why.
   ========================================================================== */

/* ---------- hero: the photograph ------------------------------------------
   The founders photograph carries the homepage hero, dimmed to near-black so
   Instrument Serif at 72px stays legible over a warm frame. Recorded rule
   from the 0916 pass: dim with near-black, NOT the brand navy — navy over a
   warm photo turns the skin tones green. One object-position at every desktop
   width; the crop moves only on phones, where the subjects would be cut.
   ------------------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;background:var(--deep);overflow:hidden}
.hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  object-position:72% 34%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(104deg,rgba(6,12,17,.93) 0%,rgba(6,12,17,.86) 40%,rgba(6,12,17,.52) 74%,rgba(6,12,17,.44) 100%),
  linear-gradient(180deg,rgba(6,12,17,.5) 0%,transparent 26%,transparent 62%,rgba(6,12,17,.6) 100%)}
.hero-in{padding-block:clamp(74px,10vw,132px) clamp(66px,8.4vw,112px);max-width:42rem}
.hero h1{color:var(--cream);max-width:15ch;font-size:clamp(42px,6.4vw,76px)}
.hero .deck{color:#D6DCE0;max-width:52ch}
.hero .cta-row{margin-top:32px}
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  margin-top:clamp(40px,5.4vw,60px);padding-top:22px;border-top:1px solid var(--line-dark)}
.hero-proof li{display:inline-flex;align-items:center;gap:10px;font-size:13.6px;
  font-weight:600;letter-spacing:.02em;color:var(--mist)}
.hero-proof li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none}
@media (max-width:900px){
  .hero-img{object-position:66% 30%}
  .hero::before{background:
    linear-gradient(180deg,rgba(6,12,17,.86) 0%,rgba(6,12,17,.8) 46%,rgba(6,12,17,.9) 100%)}
  .hero-in{max-width:none}
}

/* ---------- task router ----------------------------------------------------
   "Start with the work in front of you" — three doors, each a whole clickable
   card. The <a> is the card so the hit area is the card, not the last line.
   ------------------------------------------------------------------------- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(38px,5vw,60px)}
.door{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line);
  border-radius:20px;padding:28px 26px 30px;text-decoration:none;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.band-white .door{background:var(--paper)}
.door:hover{border-color:var(--grey-4);transform:translateY(-2px);
  box-shadow:0 20px 40px -28px rgba(12,26,36,.42)}
.door-ico{width:26px;height:26px;color:var(--teal);margin-bottom:18px}
.door h3{font-size:clamp(20px,1.9vw,23px)}
.door p{margin-top:12px;font-size:15.2px;line-height:1.66;color:var(--grey-2);flex:1}
.door-go{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:14.6px;
  font-weight:600;color:var(--teal)}
.door-go .arr{transition:transform .25s ease}
.door:hover .door-go .arr{transform:translateX(4px)}
@media (max-width:1000px){ .doors{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .doors{grid-template-columns:1fr;gap:13px} }

/* ---------- the worked example -------------------------------------------
   A narrated matter: request, then four beats down a hairline rail, then the
   record. The rail is a real border on the list, not a pseudo-element, so it
   ends exactly at the last beat's dot.
   ------------------------------------------------------------------------- */
.matter-q{font-family:var(--display);font-size:clamp(20px,2.1vw,25px);line-height:1.4;
  color:var(--ink)}
.matter-q::before,.matter-q::after{content:"\201C";font-style:normal}
.matter-q::after{content:"\201D"}
/* an <ol>, because the beats happen in order — but the core reset only zeroes
   <ul> markers, so the counter is turned off here rather than in the reset */

/* ---------- status keys (Legal Room) ---------- */
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(34px,4.4vw,52px)}
.key{border-top:2px solid var(--line);padding-top:18px}
.key-t{display:flex;align-items:center;gap:9px;font-size:15.6px;font-weight:700;color:var(--ink)}
.key-t::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--grey-4);flex:none}
.key-meets .key-t::before{background:var(--lv-green)}
.key-exception .key-t::before{background:var(--lv-yellow-dot)}
.key-open .key-t::before{background:var(--lv-red)}
.key p{margin-top:11px;font-size:14.8px;line-height:1.62;color:var(--grey-2)}
@media (max-width:900px){ .keys{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .keys{grid-template-columns:1fr;gap:13px} }

/* ---------- workflow areas (the eight specialist areas) ---------- */
.areas{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,4.4vw,56px);
  margin-top:clamp(34px,4.6vw,54px);border-top:1px solid var(--line)}
.area{border-bottom:1px solid var(--line);padding:26px 0}
.area h3{font-size:clamp(20px,1.9vw,23px)}
.area p{margin-top:11px;font-size:15.4px;line-height:1.66;color:var(--grey-2);max-width:48ch}
@media (max-width:820px){ .areas{grid-template-columns:1fr} }

/* ---------- routing cards (contact) ---------- */
.routes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:clamp(34px,4.4vw,52px)}
.route{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;
  padding:26px 26px 28px;display:flex;flex-direction:column}
.band-white .route{background:var(--paper)}
.route h3{font-size:clamp(19px,1.8vw,22px)}
.route p{margin-top:11px;font-size:15.2px;line-height:1.64;color:var(--grey-2);flex:1}
.route .tlink,.route .btn{margin-top:20px;align-self:flex-start}
@media (max-width:760px){ .routes{grid-template-columns:1fr;gap:13px} }

/* ---------- the team ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(26px,4vw,52px);
  margin-top:clamp(32px,4.2vw,48px);border-top:1px solid var(--line)}
.team li{border-bottom:1px solid var(--line);padding:20px 0}
.team .t-name{font-family:var(--display);font-size:clamp(21px,2vw,25px);line-height:1.2;color:var(--ink)}
.team .t-role{margin-top:6px;font-size:13.2px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey-2)}
@media (max-width:820px){ .team{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .team{grid-template-columns:1fr} }

/* ---------- the application form: three steps -----------------------------
   One document, three fieldsets, no JS wizard. Every question is in the DOM
   and in the tab order at all times, so the form still submits with scripting
   off and a screen reader reads it as one continuous form. js/site.js adds
   the step-by-step affordance on top when it can.
   ------------------------------------------------------------------------- */
.fstep{border:1px solid var(--line);border-radius:var(--r-media);background:var(--paper-2);
  padding:clamp(22px,3vw,34px);margin:0 0 16px}
.band-white .fstep{background:var(--paper)}
.fstep > legend{padding:0;display:flex;align-items:center;gap:12px;font-size:12.4px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.fstep > legend b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;
  background:var(--deep);color:var(--paper);font-size:12.4px;font-weight:700;letter-spacing:0}
.fstep-h{margin-top:18px;font-family:var(--display);font-size:clamp(22px,2.2vw,27px);line-height:1.22;
  color:var(--ink)}
.fstep-h + p{margin-top:11px;font-size:15.2px;line-height:1.65;color:var(--grey-2);max-width:52ch}

/* a question whose answer is a set of radio chips */
.choice{display:flex;flex-direction:column;gap:9px;min-width:0}
.choice > .q{font-size:13.2px;font-weight:600;color:var(--grey-1)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:inline-flex;align-items:center;font-size:14.4px;line-height:1;
  color:var(--grey-1);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-chip);padding:11px 17px;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease}
.band-white .chips label{background:var(--paper-2)}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label:hover{border-color:var(--grey-4)}
.chips input:checked + span{color:var(--paper)}
.chips label:has(input:checked){background:var(--deep);border-color:var(--deep);color:var(--paper)}
.chips input:focus-visible + span{outline:3px solid var(--teal);outline-offset:5px;border-radius:4px}
/* .hint is scoped to .field in the core sheet, and a chip question is a
   .choice — so it needs the same rule or the helper line reads as body copy */
.choice .hint{font-size:12.7px;line-height:1.5;color:var(--grey-3)}

/* an opt-in / acknowledgement row */
.optin{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:20px;
  font-size:14.4px;line-height:1.6;color:var(--grey-1)}
.optin input{width:18px;height:18px;margin-top:2px;accent-color:var(--teal)}
.optin a{color:var(--teal)}

/* the summary rail on step three */
.review-rail{margin-top:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.review-rail div{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:6px 20px;
  padding:14px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.55}
.review-rail div:first-child{border-top:none}
.review-rail dt{font-weight:600;color:var(--grey-2)}
.review-rail dd{color:var(--ink);min-width:0;overflow-wrap:anywhere}
.review-rail a{font-size:13.6px;font-weight:600;color:var(--teal);text-decoration:none;white-space:nowrap}
@media (max-width:620px){
  .review-rail div{grid-template-columns:1fr auto}
  .review-rail dt{grid-column:1 / -1}
}

/* ---------- the short homepage application ---------- */
.applycard{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-media);
  padding:clamp(24px,3.2vw,36px);box-shadow:0 30px 60px -40px rgba(12,26,36,.5)}
.applycard .kick{margin-bottom:16px}
.applycard h2{font-size:clamp(25px,2.6vw,32px);max-width:20ch}
.applycard > p{margin-top:12px;font-size:15.4px;line-height:1.65;color:var(--grey-2);max-width:46ch}

/* ---------- confirmation page ---------- */
.confirm{max-width:60ch}
.confirm-mark{width:52px;height:52px;border-radius:50%;background:var(--teal-wash);
  display:grid;place-items:center;color:var(--teal-deep);margin-bottom:26px}
.confirm-mark svg{width:26px;height:26px}

/* ---------- 404 ---------- */
.nf{padding-block:clamp(80px,12vw,160px);text-align:left}
.nf-code{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--grey-3)}

/* ---------- the scope note --------------------------------------------------
   This copy scopes almost every claim, and a scope note that reads as fine
   print gets skipped. It is set as a hairline aside with an amber rule: the
   same weight as a .step-note, one level quieter than body copy.
   ------------------------------------------------------------------------- */
.scope{margin-top:clamp(28px,3.4vw,40px);padding-left:18px;border-left:2px solid var(--amber);
  font-size:14.6px;line-height:1.68;color:var(--grey-2);max-width:62ch}
.scope-dark{color:var(--mist)}
.scope b{color:var(--ink);font-weight:600}
.scope-dark b{color:var(--cream)}

/* ---------- pricing: a CTA inside each plan ---------------------------------
   The 0907 ladder was a comparison table with the buttons underneath it. This
   copy gives every plan its own button, so the plan becomes a column with a
   foot — and the foot has to sit on the same baseline across the row, hence
   the flex column and the auto margin. */
.plan{display:flex;flex-direction:column}
/* The plan column is ~210px at the widest, so a two-word label fits and
   "Discuss your requirements" does not. The button therefore wraps on
   purpose: centred, with a real line-height, and a min-height so a one-line
   and a two-line pill still sit on the same baseline across the row. */
.p-cta{margin-top:auto;padding-top:24px}
.p-cta .btn{width:100%;justify-content:center;text-align:center;
  padding:12px 16px;font-size:14.4px;line-height:1.32;min-height:46px}
.p-note{margin-top:12px;font-size:13.2px;line-height:1.6;color:var(--grey-3)}

/* ---------- core overrides, with reasons ---------------------------------- */
/* Five plans on /pricing, not the 0907 four: Launchpad joined the ladder. At
   five columns a $1,000 price wraps inside the 24px plan padding, so the
   ladder goes 3-up before the core's own 1-up collapse at 1060 takes over. */
.plans-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1240px){
  .plans-5{grid-template-columns:repeat(3,1fr)}
  .plans-5 .plan:nth-child(3n+1){border-left:none}
  .plans-5 .plan:nth-child(n+4){border-top:1px solid var(--line)}
}
/* the core's stacked-plan layout is a grid with named areas, so the button
   needs an area of its own or it lands on top of the price */
@media (max-width:1060px){
  .plans-5 .plan{display:grid;grid-template-areas:"name price" "stage price" "inc inc" "cta cta"}
  .plans-5 .plan:nth-child(n+4){border-top:none}
  .p-cta{grid-area:cta;margin-top:0;padding-top:18px}
  .p-cta .btn{width:auto}
}

/* The footer's fifth column is gone in this IA (four link groups, not five),
   so the brand column gets the room instead of a dangling empty track. */
.foot-top{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
@media (max-width:1000px){ .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .foot-top{grid-template-columns:1fr} }

/* ---------- nav utility links (this IA adds "For lawyers" and "Sign in") ----
   They sit after the primary links with a hairline before them, so they read
   as a separate register from the four navigation items. On the phone menu
   they become a plain row above the button. */
.nav-util{display:flex;align-items:center;gap:4px;margin-left:10px;padding-left:14px;
  border-left:1px solid var(--line)}
.nav-ul{font-size:14.5px;font-weight:500;color:var(--grey-2);text-decoration:none;
  white-space:nowrap;padding:8px 12px;border-radius:10px;
  transition:background .18s ease,color .18s ease}
.nav-ul:hover{color:var(--ink);background:rgba(16,30,40,.05)}
@media (max-width:1080px){
  .nav-util{margin-left:0;padding-left:0;border-left:none;border-top:1px solid var(--line);
    margin-top:10px;padding-top:10px;gap:0;flex-direction:column;align-items:stretch}
  .nav-ul{padding:13px 8px;font-size:16px}
}

/* ---------- footer: the positioning line under the wordmark ---------- */
.f-tag{margin-top:18px;font-family:var(--display);font-size:19px;line-height:1.3;color:var(--cream)}
.f-brand-col .f-mission{margin-top:12px}
.f-ide8{font-size:14px;color:var(--grey-4)}
.f-ide8 a{color:var(--mist);border-bottom:1px solid rgba(188,201,210,.4);text-decoration:none}
.f-ide8 a:hover{color:var(--cream)}

/* ---------- .counsel — the canon marker, and the rule it enforces -----------
   Green / yellow / red are matter-risk colours. A band that shows the three
   review lanes must therefore be free of the amber brand accent, or the
   yellow lane stops reading as a status and starts reading as decoration.
   The class is a marker AND the enforcement: it removes the two amber
   decorations (.secdash and .kick's rule) from anything inside it. */
.counsel .secdash,.counsel .kick::before{background:var(--grey-4)}
.counsel .scope{border-left-color:var(--grey-4)}

/* ---------- the closing band ------------------------------------------------
   Every page ends the same way: one serif line, at most one paragraph, and
   the buttons. The 0827 version was a two-column "pick a path" block; this
   copy asks for one route per page, so the band is a single measured column
   and the heading gets the width the old layout spent on the second path. */
.cta-band{max-width:62ch}
.cta-band > .deck,.cta-band > .lede{max-width:56ch}
.cta-band .cta-row{margin-top:clamp(30px,4vw,40px)}
.cta-band .scope{max-width:56ch}


/* ==== layer-12-firewall.css ==== */
/* =============================================================================
   layer-12-firewall — 0924 shared Legal Firewall components
   The v18 deck's angle: FinePrint prepares, lawyers review, the Legal Firewall
   checks. These are the pieces every page reuses so the Firewall reads the same
   wherever it appears: the announcement bar, the top-level nav item, the status
   pills, the Firewall log card, the gate chips and the outcome legend.

   Status colours (deck + Phase 0 demo):
     Held          amber   — an authorized person must decide
     Passed        green   — the action meets the rule
     With a lawyer teal    — a lawyer must answer the open question
     Decided       ink     — the owner decided
     Opened        grey    — the owner has seen the entry
   Amber here is a STATUS, so keep .fw-* out of .counsel bands (review lanes),
   exactly as core.css asks for the brand accent.
   ========================================================================== */

/* ---------- announcement bar (sitewide, above the sticky nav) ---------- */
.fw-bar{background:var(--deep);color:var(--cream);font-size:13.5px;line-height:1.4;
  border-bottom:1px solid rgba(245,158,11,.35)}
.fw-bar-in{display:flex;align-items:center;justify-content:center;gap:10px 14px;
  padding-block:9px;flex-wrap:wrap;text-align:center}
.fw-bar-tag{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--deep);background:var(--amber);border-radius:4px;padding:3px 7px}
.fw-bar-t{margin:0;color:var(--mist)}
.fw-bar-a{flex:none;color:var(--cream);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(245,158,11,.6);padding-bottom:1px}
.fw-bar-a:hover{border-color:var(--amber)}
.fw-bar-a:focus-visible{outline:2px solid var(--teal-lt);outline-offset:3px}
@media (max-width:720px){
  .fw-bar{font-size:12.8px}
  .fw-bar-in{display:block;text-align:left;padding-block:8px}
  .fw-bar-tag,.fw-bar-t{display:inline}
  .fw-bar-tag{margin-right:6px;vertical-align:1px}
  .fw-bar-a{margin-left:4px;white-space:nowrap}
}

/* ---------- top-level nav item ---------- */
.nav-links > a.nav-fw{color:var(--ink);font-weight:600}
.nav-fw-i{display:inline-block;width:14px;height:12px;flex:none;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 0 5px/58% 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 10px/100% 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 70% 0/2px 100% no-repeat}

/* ---------- status pills ---------- */
.fw-st{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.04em;line-height:1;padding:6px 10px 6px 9px;border-radius:999px;
  white-space:nowrap;border:1px solid transparent}
.fw-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.fw-st-held{color:#8A5300;background:var(--amber-wash);border-color:rgba(245,158,11,.55)}
.fw-st-passed{color:var(--lv-green);background:#E6F2EA;border-color:rgba(47,122,77,.35)}
.fw-st-lawyer{color:var(--teal-deep);background:var(--teal-wash);border-color:rgba(23,98,122,.35)}
.fw-st-decided{color:var(--ink);background:var(--sand-2);border-color:var(--line)}
.fw-st-opened{color:var(--grey-2);background:var(--paper-2);border-color:var(--line)}
/* on dark bands */
.fw-dark .fw-st-held{color:#FFD48A;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.5)}
.fw-dark .fw-st-passed{color:#9AD7AE;background:rgba(47,122,77,.18);border-color:rgba(154,215,174,.35)}
.fw-dark .fw-st-lawyer{color:var(--teal-lt);background:rgba(143,193,212,.12);border-color:rgba(143,193,212,.35)}
.fw-dark .fw-st-decided{color:var(--cream);background:rgba(236,237,234,.08);border-color:var(--line-dark)}
.fw-dark .fw-st-opened{color:var(--mist);background:transparent;border-color:var(--line-dark)}

/* ---------- the Firewall log card ----------
   <article class="fw-card">
     <header class="fw-card-h"><span class="fw-card-k">Legal Firewall · Say</span><span class="fw-st fw-st-held">Held</span></header>
     <p class="fw-card-t">…</p>  <p class="fw-card-b">…</p>  <p class="fw-card-f">…</p>
   </article>                                                              */
.fw-card{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:14px;padding:18px 20px 18px;box-shadow:0 18px 40px -24px rgba(12,26,36,.35)}
.fw-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.fw-card-k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2)}
.fw-card-t{margin:0;font-family:var(--display);font-size:clamp(21px,1.9vw,25px);line-height:1.18;color:var(--ink)}
.fw-card-b{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--grey-1)}
.fw-card-f{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--line);font-size:13.5px;
  font-weight:600;color:var(--ink)}
.fw-card-c{margin:10px 0 0;font-size:12px;color:var(--grey-3)}
.fw-card.is-passed{border-left-color:var(--lv-green)}
.fw-card.is-lawyer{border-left-color:var(--teal)}
.fw-dark .fw-card{background:var(--deep-2);border-color:var(--line-dark);border-left-color:var(--amber);
  box-shadow:0 24px 50px -26px rgba(0,0,0,.6)}
.fw-dark .fw-card.is-passed{border-left-color:#9AD7AE}
.fw-dark .fw-card.is-lawyer{border-left-color:var(--teal-lt)}
.fw-dark .fw-card-t{color:var(--cream)}
.fw-dark .fw-card-b{color:var(--mist)}
.fw-dark .fw-card-k,.fw-dark .fw-card-c{color:var(--grey-4)}
.fw-dark .fw-card-f{color:var(--cream);border-top-color:var(--line-dark)}

/* ---------- the four gates as chips ---------- */
.fw-gates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.fw-gate{border:1px solid var(--line);border-radius:14px;padding:16px 16px 18px;background:var(--paper-2)}
.fw-gate-k{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  color:var(--teal-deep);border:1px solid rgba(23,98,122,.35);border-radius:6px;padding:3px 7px;margin-bottom:10px}
.fw-gate-t{display:block;font-weight:600;font-size:15px;color:var(--ink);line-height:1.35}
.fw-gate-d{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--grey-2)}
.fw-dark .fw-gate{background:rgba(236,237,234,.03);border-color:var(--line-dark)}
.fw-dark .fw-gate-k{color:var(--teal-lt);border-color:rgba(143,193,212,.4)}
.fw-dark .fw-gate-t{color:var(--cream)}
.fw-dark .fw-gate-d{color:var(--mist)}
@media (max-width:900px){ .fw-gates{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .fw-gates{grid-template-columns:1fr} }

/* ---------- outcome legend (Passed / Held / With a lawyer) ---------- */
.fw-outcomes{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:0;padding:0}
.fw-outcomes li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--grey-1)}
.fw-dark .fw-outcomes li{color:var(--mist)}

/* ---------- in-development tag, used beside Firewall headings ---------- */
.fw-dev{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey-2)}
.fw-dev::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.fw-dark .fw-dev{color:var(--grey-4)}

/* ---------- product component icon (brand kit 07) ---------- */
.fw-ico{display:block;width:40px;height:40px;flex:none}

/* ---------- 0925: the Solutions menu carries two groups (.nm-col): two columns ---------- */
.nm-col{min-width:0}
@media (min-width:1081px){
  .nav-menu.nav-menu-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 6px;min-width:640px}
}


/* ==== layer-13-v19.css ==== */
/* =============================================================================
   layer-13-v19 — the v19 deck's visual register, as shared site utilities
   (CG's FinePrint-Investors-CL-0924-v19-Design). What carries over from the deck:
   · serif headlines with ONE amber italic phrase (<em>) — the deck's signature
   · dark navy stages lit by warm amber photography (static/img/v19/)
   · small amber uppercase kicks, no dash
   · thin-ruled navy cards with amber brand icons
   · a dashed amber frame for the "what goes wrong" moment
   Builders use these; page layers own layout.
   ========================================================================== */

:root{ --amber-ink:#9A5B06; --amber-soft:#F2B84B; --navy-card:rgba(236,237,234,.035); }

/* ---------- the amber italic phrase ---------- */
h1 em,h2 em,h3 em,.v-em{font-family:var(--display);font-style:italic;font-weight:400;color:var(--amber-ink)}
.v-dark h1 em,.v-dark h2 em,.v-dark h3 em,.v-dark .v-em,
.band-deep h1 em,.band-deep h2 em,.band-deep h3 em,
.fw-dark h1 em,.fw-dark h2 em,.fw-dark h3 em,
.hero h1 em{color:var(--amber-soft)}

/* ---------- dark stage ---------- */
.v-dark{background:var(--deep);color:var(--mist)}
.v-dark h1,.v-dark h2,.v-dark h3,.v-dark h4{color:var(--cream)}
.v-dark p{color:var(--mist)}
.v-dark a:not(.btn){color:var(--cream)}
.v-dark .scope{color:var(--grey-4)}
.v-dark .scope b{color:var(--cream)}
.v-dark-2{background:var(--deep-2)}

/* the deck's kick: amber caps, no dash */
.v-kick{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-ink);margin:0 0 16px}
.v-dark .v-kick,.band-deep .v-kick,.fw-dark .v-kick{color:var(--amber)}

/* ---------- photograph plates ----------
   <figure class="v-photo"><img …></figure>  a cropped, lit plate with a soft edge
   <section class="v-bleed" style="--img:url(/img/v19/city-grid.jpg)">  a full-bleed
   photographic band; content sits on a gradient so type always has contrast.     */
.v-photo{position:relative;margin:0;border-radius:var(--r-media);overflow:hidden;background:var(--deep)}
.v-photo img{display:block;width:100%;height:100%;object-fit:cover}
.v-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(236,237,234,.08);border-radius:inherit}
.v-photo-fade::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--deep) 0%,rgba(12,26,36,0) 38%)}
.v-bleed{position:relative;isolation:isolate;background:var(--deep)}
.v-bleed::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img) center/cover no-repeat}
.v-bleed::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(12,26,36,.96) 0%,rgba(12,26,36,.86) 45%,rgba(12,26,36,.45) 100%)}
@media (max-width:900px){
  .v-bleed::after{background:linear-gradient(180deg,rgba(12,26,36,.78) 0%,rgba(12,26,36,.94) 60%)}
}

/* ---------- navy card + amber icon ---------- */
.v-card{background:var(--navy-card);border:1px solid var(--line-dark);border-radius:14px;padding:24px 22px 24px}
.v-card h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,27px);line-height:1.15;color:var(--cream)}
.v-card p{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--mist)}
.v-card .fw-ico{width:44px;height:44px;margin-bottom:20px}
.v-card-lit{border-color:rgba(245,158,11,.55);box-shadow:inset 0 0 0 1px rgba(245,158,11,.12)}

/* ---------- the dashed amber frame ---------- */
.v-dash{border:1.5px dashed rgba(245,158,11,.7);border-radius:6px}

/* ---------- big figures (prices, counts the copy allows) ---------- */
.v-num{font-family:var(--display);font-weight:400;font-size:clamp(40px,4.6vw,64px);line-height:1;color:var(--cream);letter-spacing:-.01em}
.v-num-lit{color:var(--amber-soft)}


/* ==== layer-15-nav.css ==== */
/* =============================================================================
   0919 navigation fit
   ---------------------------------------------------------------------------
   The bar carries four navigation items (Legal Solutions · Product · Why
   FinePrint · Company), two utility links, and a primary button whose label the
   copy fixes at 213px. Measured against the 1081px desktop breakpoint, that is
   ~1163px of content in a 1081px viewport: the button is clipped off the right
   edge and every page scrolls sideways.

   The gap is the utility pair, not the navigation. Between the desktop
   breakpoint and 1200 they step out of the bar, which leaves navigation plus
   the call to action with room to spare; above 1200 everything fits and they
   return. Both links remain in the phone menu and in the footer at every width,
   so nothing is unreachable at any size.

   Verified at 1081 / 1100 / 1150 / 1200 / 1280 / 1440 / 1600: no overflow, and
   the button's right edge inside the viewport at all of them.
   ========================================================================== */

@media (min-width:1081px) and (max-width:1199.98px){
  .nav-links .nav-util{display:none}
  /* The header's own gutters stop tracking 5vw at these widths. Full-width
     sections still use --pad, so the page's rhythm is untouched. */
  .nav .wrap.nav-in{padding-inline:36px}
}


/* ==== layer-16-picons-0926.css ==== */
/* 0926 design pass — product icons (brand 07-product-icons + hero/). Snippets: qa-0926/design-pass/ICONS-0926.md.
   Inline SVG, viewBox cropped to the 96×96 live area, class picon. Size only here; colour lives in the SVG. */
.picon{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle;overflow:visible}
.picon.picon-md{width:28px;height:28px}
.picon.picon-lg{width:48px;height:48px}
.picon.picon-xl{width:72px;height:72px}
@media (max-width:640px){.picon.picon-xl{width:56px;height:56px}}


/* ==== layer-20-home.css ==== */
/* =============================================================================
   layer-20-home — the homepage and /how-it-works.
   Prefix: .h2x-   Owner: the home/how-it-works pass.

   Everything here is a small extension of an existing component. Nothing
   redefines a core class or a layer-10 class outright; where a core value is
   overridden the selector is scoped to a .h2x- container and says why.
   ========================================================================== */

/* ---------- hero ------------------------------------------------------------
   Moved out. The homepage hero was rebuilt in the 0919 pass and now owns a
   file of its own: static/css/layer-22-hero.css (.hx-). The four measure
   tweaks that lived here (.h2x-hero) are superseded by it, and the class is
   gone from the markup.
   ------------------------------------------------------------------------- */

/* ---------- the worked example: the founder's question ----------------------
   0924: removed with the section (.h2x-ask / .h2x-ask-foot). The homepage's
   worked example is now the hiring request, styled in layer-26-home-0924.css.
   ------------------------------------------------------------------------- */

/* ---------- the AnswerLoop chain (dark band) --------------------------------
   Drawn in markup rather than as one SVG on purpose: the labels are real text
   at a real size, so the figure is still legible at 360px, where a 1100-unit
   viewBox would render them at about four pixels.
   ------------------------------------------------------------------------- */
/* the dark band's second column: one substantive note, given a panel so the
   column does not read as leftover space beside the headline */
.h2x-pd{margin-top:6px;padding:clamp(22px,2.6vw,28px);border-radius:20px;
  background:rgba(236,237,234,.045);border:1px solid var(--line-dark);
  font-size:16.2px;line-height:1.72;color:var(--mist);max-width:46ch}

/* 0920d — the five-card chain (.h2x-loop / .h2x-chain / .h2x-node* /
   .h2x-back) is gone from #expertise, replaced by the `la` circuit figure,
   and its rules went with it: check.py reports an unused component class as
   a warning and this sheet had six. The chain restated the band's own deck
   paragraph word for word; nothing it drew is unsaid now. Recover it from
   git if it is ever wanted back. */

/* ---------- /how-it-works: the five stages ----------------------------------
   A numbered ledger, not a card set. .step is a one-column grid in the core
   sheet because a step usually carries a full-width screenshot under its
   copy; these five carry none, so the track is re-cut as numeral + prose and
   the generous inter-step gap becomes a hairline.
   ------------------------------------------------------------------------- */
/* no heading sits above these five, so the component's own top margin would
   sit on top of the band's padding and open a dead 200px */
.h2x-stages{margin-top:0;gap:0;border-top:1px solid var(--line)}
.h2x-stages .step{grid-template-columns:clamp(58px,7vw,104px) minmax(0,1fr);
  gap:4px clamp(18px,3vw,40px);border-bottom:1px solid var(--line);
  padding:clamp(30px,4vw,48px) 0;scroll-margin-top:calc(var(--navh) + 14px)}
.h2x-num{font-family:var(--display);font-size:clamp(30px,4.2vw,52px);line-height:1;
  color:var(--grey-4);font-variant-numeric:tabular-nums}
.h2x-stages .step-copy h2{font-family:var(--display);font-weight:400;
  font-size:clamp(23px,2.5vw,31px);line-height:1.16;letter-spacing:-.005em;max-width:24ch}
.h2x-stages .step-copy p{margin-top:14px}
@media (max-width:640px){
  .h2x-stages .step{grid-template-columns:minmax(0,1fr);gap:10px}
  .h2x-num{font-size:26px}
}

/* ---------- /how-it-works: the contract walkthrough --------------------------
   Five hand-offs. The numeral's ring says who is acting — the founder, the
   product, or the review process — so the reader can see the shape of the
   walkthrough before reading a word of it. The band is .counsel, so the
   review row's yellow is the only status colour in it.
   ------------------------------------------------------------------------- */
.h2x-hand{list-style:none;margin-top:clamp(32px,4.2vw,48px);border-top:1px solid var(--line)}
.h2x-hand > li{display:grid;grid-template-columns:44px minmax(0,1fr);
  gap:0 clamp(18px,2.6vw,34px);border-bottom:1px solid var(--line);
  padding:clamp(26px,3.4vw,40px) 0}
.h2x-hn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  margin-top:3px;font-size:13.4px;font-weight:700;color:var(--grey-1);
  background:var(--paper-2);box-shadow:inset 0 0 0 2px var(--grey-4)}
.h2x-fp .h2x-hn{color:var(--teal-deep);box-shadow:inset 0 0 0 2px var(--teal)}
.h2x-rev .h2x-hn{color:var(--lv-yellow);box-shadow:inset 0 0 0 2px var(--lv-yellow-dot)}
.h2x-hand h3{font-size:clamp(20px,2.1vw,26px)}
.h2x-hand p{margin-top:11px;font-size:16.2px;line-height:1.7;color:var(--grey-1);max-width:62ch}
.h2x-hand .h2x-tag{display:inline-block;margin-top:12px;font-size:11.6px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lv-yellow)}
.h2x-hand .shot-fig{margin-top:22px}
@media (max-width:560px){
  .h2x-hand > li{grid-template-columns:34px minmax(0,1fr);gap:0 16px}
  .h2x-hn{width:30px;height:30px;font-size:12.4px}
}

/* ---------- the short homepage application ----------------------------------
   Two answers, then the real form. It must never read as a finished
   application, so the button says "Start my application" and the helper line
   under it says where the visitor is going next.
   ------------------------------------------------------------------------- */
.h2x-short .fgrid{grid-template-columns:1fr}
.h2x-short .form-actions{margin-top:22px}
.h2x-short .form-actions .btn{width:100%;justify-content:center}
@media (min-width:520px){
  .h2x-short .form-actions .btn{width:auto}
}

/* ---------- 0926: the short form asks one thing — which product ----------
   Two choice cards (Legal AI Counsel / FineShield) with the Product-menu
   hero icons. The radio sits invisibly over its card; the card shows state. */
.h2x-need{border:0;padding:0;margin:26px 0 0;display:grid;gap:12px}
.h2x-opt{position:relative;display:grid;grid-template-columns:36px 1fr;column-gap:14px;row-gap:3px;
  align-items:start;padding:16px 18px;background:#fff;border:1.5px solid var(--line);border-radius:14px;
  cursor:pointer;transition:border-color .15s,box-shadow .15s}
.h2x-opt:hover{border-color:var(--grey-4)}
.h2x-opt input{position:absolute;opacity:0;width:1px;height:1px}
.h2x-ico{grid-row:1 / span 2;width:36px;height:36px;margin-top:2px}
.h2x-opt-t{font-weight:600;font-size:16.5px;line-height:1.3;color:var(--ink)}
.h2x-opt-d{font-size:14.2px;line-height:1.5;color:var(--grey-2)}
.h2x-opt:has(input:checked){border-color:var(--teal);box-shadow:0 0 0 3px rgba(23,98,122,.16)}
.h2x-opt:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.h2x-need + .fgrid{margin-top:18px}


/* ==== layer-22-hero.css ==== */
/* =============================================================================
   layer-22-hero — the homepage hero.  Prefix: .hx-   Owner: the 0919 hero pass.

   Replaces the plain left-aligned stack that sat here (headline, ragged serif
   sub-line, paragraph, buttons, offer line, proof row). Three things changed:

   1. THE BRAND LINE IS THE SECOND SUBJECT, NOT A CAPTION. "Trusted Legal AI
      Counsel. At the price of software." now sits on its own warm-paper plate
      in front of the photograph, in navy on cream — the only inverted surface
      in the hero, so the eye cannot miss it. The headline still leads on
      SCALE (serif, up to 62px); the plate leads on CONTRAST. That is the
      intended weighting: the problem is read first, the promise is the thing
      you look AT.
   2. The offer line is gone at the founder's direction. Deleted, not hidden.
   3. The stack became a composition: a headline column and a plate column
      over a full-width proof rule. Both display lines are broken where the
      sense breaks, not where the column runs out.

   Carried over from the 0916 photograph pass, and not to be re-litigated:
   · the dim is NEAR-BLACK (8,7,6), never the brand navy — navy over a warm
     golden frame greys the light out and the photograph stops being one;
   · ONE object-position at every desktop width. An earlier build had a second
     framing below a breakpoint and the frame slid sideways on one pixel of
     resize;
   · where type needs margin, LIGHTEN THE INK, don't darken the scrim.
     Darkening buys legibility by deleting the picture.

   Nothing here animates, so there is no motion to override.
   ========================================================================== */

/* ---------- the section ----------------------------------------------------
   layer-10 caps .hero-in at 42rem for a single column. The hero is two
   columns now, so it takes the site measure back.
   ------------------------------------------------------------------------- */
.hx-hero .hero-in{
  max-width:var(--maxw);
  padding-block:clamp(66px,8.6vw,118px) clamp(58px,7.2vw,96px);
}

/* The photograph. 44% puts the two subjects just left of the column gap, so
   the headline column runs over the dark chair-back and wall, the gap falls
   between the faces and the plate, and the window light stays on the right
   margin above and below the plate — the only places on that row where the
   frame can still be seen past an opaque panel. */
.hx-hero .hero-img{object-position:44% 44%}

/* The scrim, in two layers. The across layer does the work: heaviest under
   the headline column, releasing towards the window so the frame keeps a lit
   side. The down layer only protects the top edge (under the light site nav)
   and the bottom edge (under the proof rule, which spans the full width and
   crosses the lit table top). */
.hx-hero::before{
  background:
    linear-gradient(180deg,
      rgba(8,7,6,.44) 0%,
      rgba(8,7,6,.12) 22%,
      rgba(8,7,6,.10) 52%,
      rgba(8,7,6,.50) 88%,
      rgba(8,7,6,.62) 100%),
    linear-gradient(101deg,
      rgba(8,7,6,.88) 0%,
      rgba(8,7,6,.82) 30%,
      rgba(8,7,6,.62) 50%,
      rgba(8,7,6,.34) 72%,
      rgba(8,7,6,.18) 100%);
}

/* ---------- the composition ------------------------------------------------
   Source order is the phone order: headline, plate, paragraph, buttons,
   proof. On desktop the plate lifts out into its own column and the proof row
   spans both, so the hero reads as two blocks standing on one rule.
   ------------------------------------------------------------------------- */
.hx-grid{display:grid}

@media (min-width:1001px){
  .hx-grid{
    grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr);
    column-gap:clamp(40px,4.6vw,72px);
    grid-template-areas:
      "head  head"
      "deck  plate"
      "cta   plate"
      "proof proof";
    align-items:start;
  }
  .hx-grid > h1{grid-area:head}
  /* 0924: the "plate" area now holds the Firewall card (.hn-hcard, placed
     in layer-26-home-0924.css); the brand-line plate is gone */
  .hx-grid > .deck{grid-area:deck}
  .hx-grid > .cta-row{grid-area:cta}
  .hx-grid > .hero-proof{grid-area:proof}
}

/* ---------- the headline ---------------------------------------------------
   Two lines, broken after "need", at EVERY width, because that is where the
   sentence turns: the setup, then the thing you do not need. Left to the
   column the break lands mid-phrase ("Your startup doesn't / need big law firm
   bills.") — a short first line and a split verb. The forced first line is
   25 characters and measures 271px at the smallest size the clamp gives, so it
   fits a 360px screen with room to spare.

   The spans are NOT set nowrap. A span that outgrew its column would push the
   whole page sideways; a three-line rag is a better failure than a horizontal
   scrollbar.
   ------------------------------------------------------------------------- */
.hx-hero h1{
  color:var(--cream);
  max-width:none;
  font-size:clamp(34px,4.55vw,62px);
  line-height:1.03;
  letter-spacing:-.012em;
  text-shadow:0 1px 34px rgba(0,0,0,.5);
}
.hx-l{display:block}

.hx-hero .deck{
  color:#DCE2E6;
  max-width:46ch;
  margin-top:clamp(20px,2.2vw,26px);
  text-shadow:0 1px 26px rgba(0,0,0,.55);
}
.hx-hero .cta-row{margin-top:clamp(28px,3vw,36px)}

/* ---------- the plate ------------------------------------------------------
   0924: removed. The brand line it printed ("The efficiency of software…") is
   gone from the copy; the Firewall log card took its place and is styled in
   layer-26-home-0924.css (.hn-hcard).
   ------------------------------------------------------------------------- */

/* ---------- the focus ring on a photograph ---------------------------------
   core's ring is 3px of --teal, which is sized for a control on paper. Both
   hero buttons stand on the dimmed frame instead, and the ring sits OUTSIDE
   them (offset 3px), so it is judged against the photograph, not the button.
   Measured over the real button boxes at 1280: teal against that region is
   2.91:1 mean and 2.19:1 at its worst pixel — under the 3:1 a focus indicator
   needs. --teal-lt is the same hue lightened, and clears it by a wide margin
   on every part of the frame the buttons can sit on.

   Scoped to .hx-hero. core.css is untouched; every other page keeps its ring.
   ------------------------------------------------------------------------- */
.hx-hero .btn:focus-visible{outline-color:var(--teal-lt)}

/* ---------- the base rule --------------------------------------------------
   The proof row is the hero's floor: one hairline across the whole measure,
   under both columns.
   ------------------------------------------------------------------------- */
.hx-hero .hero-proof{
  gap:12px clamp(22px,2.6vw,38px);
  margin-top:clamp(42px,5vw,62px);
  padding-top:22px;
  color:var(--cream);
}
.hx-hero .hero-proof li{color:#CBD7DE}

/* ---------- stacked --------------------------------------------------------
   Below 1000px the plate goes under the headline — the two halves of the
   positioning stay adjacent, which is the whole reason the plate exists — and
   the paragraph and buttons follow. The plate is capped so it does not stretch
   into a banner on a tablet.
   ------------------------------------------------------------------------- */
@media (max-width:1000px){
  .hx-hero .deck{max-width:54ch}

  /* A 2.13:1 frame cropped to fill a tall narrow hero shows a sliver — at
     360px it is one face filling the screen, and the paragraph and buttons end
     up on lit skin. So the photograph stops being a background and becomes a
     masthead: it holds the top of the hero behind the headline and dissolves
     into the solid dim the rest of the hero stands on. The dissolve resolves
     to opaque (8,7,6) exactly where the image ends, so there is no band edge
     and no second colour to match. One band height, one continuous curve —
     never a step at a single pixel of resize. */
  .hx-hero{--hx-band:clamp(300px,calc(40vw + 190px),520px)}
  .hx-hero .hero-img{height:var(--hx-band);bottom:auto}
  .hx-hero::before{
    background:linear-gradient(180deg,
      rgba(8,7,6,.74) 0,
      rgba(8,7,6,.54) calc(var(--hx-band) * .30),
      rgba(8,7,6,.66) calc(var(--hx-band) * .72),
      rgba(8,7,6,.97) calc(var(--hx-band) * .96),
      rgba(8,7,6,1)   var(--hx-band));
  }
}
/* The one place the crop moves. On a phone the masthead is nearly square and
   44% would hold a corner of the room; 53% brings the two subjects and the
   window edge into the strip, which is the only part of the frame a phone
   ever sees. */
@media (max-width:640px){
  .hx-hero .hero-img{object-position:53% 42%}
}
/* The homepage film (2026-09-25) has its two people left of centre, so on a
   phone its crop sits at 42%, which keeps both faces in the strip. */
@media (max-width:640px){
  .hx-hero video.hero-img{object-position:42% 50%}
}


/* ==== layer-25-stages.css ==== */
/* =============================================================================
   layer-25-stages — "Where is your startup right now?", the homepage stage
   picker.  Prefix: .st-   Owner: the 0919 stage-section pass (v3).

   Four numbered pill tabs over one dark panel; one stage visible at a time.
   The structure and the RHYTHM are Startup Factory's ("Where are you in your
   startup journey?"); the materials are this site's.

   v3 rebuilds the panel's proportions against a measurement of theirs at
   1440 (panel 1216 wide by 628 tall, 40px padding, headline 30px, body 16px,
   strip type 12px, chips 10px). v1 set the panel at page scale, so every
   element shouted; v3 sets it one register down, so the panel recedes and
   the headline leads. The panel is now three stacked blocks, not a split:

       .st-top     full width — tag, headline, one-line sub, the step chain
       ───────     a hairline
       .st-split   7 / 5 — the checklist and one photograph
       .st-strip   full width — You bring | FinePrint adds | You leave with

   Putting the top block and the strip across the full width is what buys the
   height back: the headline no longer sits in a 565px well, the chain fits
   one row, and the strip's three cells get 320px each instead of 180, so the
   "You bring" paragraph sets in four lines rather than seven.

   FinePrint's own materials: the panel is the band's one dark mass (--deep),
   the headline is Instrument Serif in cream, teal appears only on the step
   chain (the working colour marks the path), and the tabs are paper pills
   whose active state inverts to navy with a cream number disc.

   The band is .counsel: every product capture in it shows the Green / Yellow
   / Red lane legend, so no UI element here is amber — the "You leave with"
   cell, which the spec wanted to flag in amber, is lifted with a cream wash
   instead.  (The four photographs are monochrome with warm practical lamps;
   a lamp in a photograph is not a review lane.)

   All four panels are in the document. Without site.js they stack, and the
   tabs are in-page links to each; the script adds `hidden` to three of them.
   ========================================================================== */

/* ---------- the head ------------------------------------------------------ */
.st-head{max-width:64ch}
.st-head .kick{margin-bottom:18px}

/* ---------- the tabs -------------------------------------------------------
   Real tabs (role=tablist / tab), drawn as numbered pills. Idle: paper, a
   hairline, a sand disc with the number in grey, and a small line icon for
   the stage. Active: navy, with the disc in cream and the icon in teal. The
   rail wraps between 760 and 1040 and becomes a scroll rail on a phone.
   ------------------------------------------------------------------------- */
.st-tabs{position:relative;display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(26px,3.2vw,38px)}
.st-tab{display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;
  border-radius:var(--r-chip);background:var(--paper-2);border:1px solid var(--line);
  color:var(--grey-1);text-decoration:none;font-size:14.6px;font-weight:600;line-height:1.2;
  white-space:nowrap;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease}
.st-n{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--sand);color:var(--grey-3);font-size:12px;font-weight:700;
  letter-spacing:.05em;font-variant-numeric:tabular-nums;
  transition:background .18s ease,color .18s ease}
.st-i{display:inline-flex;flex:none;width:15px;height:15px;color:var(--grey-3);
  transition:color .18s ease}
.st-i svg{width:100%;height:100%}
.st-tab:hover{transform:translateY(-1px);border-color:var(--grey-4);color:var(--ink)}
.st-tab:hover .st-n{color:var(--grey-1)}
.st-tab[aria-selected="true"]{background:var(--deep);border-color:var(--deep);color:var(--cream)}
.st-tab[aria-selected="true"] .st-n{background:var(--cream);color:var(--deep)}
.st-tab[aria-selected="true"] .st-i{color:var(--teal-lt)}
.st-tab:focus-visible{border-radius:var(--r-chip)}
/* autoplay (site.js §10): a hairline fills along the foot of the active
   pill over the 3 s a stage holds once its .7 s slide ends; its animationend opens the next stage. Held while
   the section is off screen or under the pointer. */
.st-tab{position:relative;overflow:hidden}
.st-tabs.is-auto .st-tab.is-run::after{content:"";position:absolute;left:18px;right:18px;bottom:0;
  height:2px;border-radius:2px;background:var(--teal-lt);transform-origin:left center;
  animation:st-prog 3s linear .7s both}
.st-tabs.is-held .st-tab.is-run::after,
.st-tabs.is-away .st-tab.is-run::after{animation-play-state:paused}
@keyframes st-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .st-tab{transition:none}
  .st-tab:hover{transform:none}
}

/* ---------- the panel ------------------------------------------------------
   One navy plate. `hidden` has to be restated for the stacked-panel case:
   the UA's [hidden]{display:none} loses to any author display declaration.
   ------------------------------------------------------------------------- */
.st-panels{margin-top:16px}
.st-panel{display:block;
  background:radial-gradient(90% 70% at 100% 0%,rgba(23,98,122,.2),transparent 62%),var(--deep);
  border-radius:24px;padding:clamp(22px,2.8vw,40px);
  scroll-margin-top:calc(var(--navh) + 14px)}
.st-panel[hidden]{display:none}
/* the incoming panel fades up over 180ms; the override below matches the
   specificity of this rule (0,2,0), per canon rule 3 */
/* With site.js the panels stack in one grid cell and slide (§10): the
   active one sits at 0, the others wait off the right edge (or the left,
   .is-left). visibility trails the slide out so the leaving panel stays
   painted until it is gone; .is-park moves a panel with no transition. */
.st-panels.is-slide{display:grid;overflow:hidden;border-radius:24px}
.st-panels.is-slide > .st-panel{grid-area:1/1;transform:translate3d(100%,0,0);visibility:hidden;
  transition:transform .7s cubic-bezier(.65,0,.35,1),visibility 0s linear .7s}
.st-panels.is-slide > .st-panel.is-left{transform:translate3d(-100%,0,0)}
.st-panels.is-slide > .st-panel.is-on{transform:none;visibility:visible;
  transition:transform .7s cubic-bezier(.65,0,.35,1),visibility 0s}
.st-panels.is-slide > .st-panel.is-park{transition:none}
@media (prefers-reduced-motion: reduce){
  .st-panels.is-slide > .st-panel,
  .st-panels.is-slide > .st-panel.is-on{transition:none}
}

/* ---------- the top block (full width) ------------------------------------ */
.st-tag{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;
  border:1px solid var(--line-dark);border-radius:var(--r-chip);
  font-size:10.8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.st-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mist);opacity:.7}
.st-top h3{margin-top:13px;color:var(--cream);font-size:clamp(23px,2.2vw,32px);
  line-height:1.14;letter-spacing:-.005em;max-width:42ch;text-wrap:balance}
.st-sub{margin-top:9px;font-size:15px;line-height:1.55;color:var(--grey-4);max-width:76ch;text-wrap:balance}

/* the path through the stage: hairline chips joined by thin arrows, one row.
   The dot is the only teal in the panel, and the chip text sits in --mist so
   the chain reads as an aside to the headline rather than a second headline.
   The arrow is drawn in the gap before each chip after the first, so a
   wrapped row starts with an arrow — which reads as "continued". */
.st-chain{display:flex;flex-wrap:wrap;align-items:center;gap:7px 0;margin-top:19px;
  list-style:none}
.st-chain li{position:relative;display:inline-flex;align-items:center;gap:7px;
  font-size:11.6px;font-weight:600;line-height:1.2;color:var(--mist);
  border:1px solid var(--line-dark);border-radius:var(--r-chip);padding:5px 11px 5px 9px;
  background:rgba(236,237,234,.03)}
.st-chain li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--teal-lt)}
.st-chain li + li{margin-left:20px}
.st-chain li + li::after{content:"\2192";position:absolute;right:calc(100% + 5px);top:50%;
  transform:translateY(-50%);font-size:11.5px;line-height:1;color:var(--grey-3)}

/* ---------- the split: the work, and one photograph ----------------------- */
.st-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(22px,2.4vw,32px);align-items:stretch;
  margin-top:24px;padding-top:25px;border-top:1px solid var(--line-dark)}
.st-work{min-width:0;display:flex;flex-direction:column;align-items:flex-start}

/* the checklist: two columns, a check disc and one item each. Grid rows keep
   the two boxes on a row the same height — v1's disagreed. The disc and the
   tick are pseudo-elements, so no hex sneaks in via a data URI. */
.st-lab{font-size:10.8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey-3)}
.st-checks{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px;width:100%}
.st-checks li{position:relative;padding:9px 12px 9px 34px;
  border:1px solid var(--line-dark);border-radius:11px;background:rgba(236,237,234,.04);
  font-size:13.2px;line-height:1.45;color:var(--cream)}
.st-checks li::before{content:"";position:absolute;left:11px;top:10px;width:15px;height:15px;
  border-radius:50%;background:rgba(236,237,234,.09);
  box-shadow:inset 0 0 0 1px rgba(236,237,234,.38)}
.st-checks li::after{content:"";position:absolute;left:16px;top:13.5px;width:3.4px;height:6.6px;
  border-right:1.6px solid var(--cream);border-bottom:1.6px solid var(--cream);
  transform:rotate(45deg)}

/* the second way forward. The primary CTA rides the photograph; this one
   closes the checklist, which is what it opens. */
.st-door{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  margin-top:auto;font-size:13.4px;font-weight:600;color:var(--cream);text-decoration:none;
  padding:18px 0 2px;border-bottom:1px solid rgba(242,237,227,.34);
  transition:border-color .2s ease}
.st-door:hover{border-bottom-color:var(--cream)}
.st-door .arr{transition:transform .25s ease}
.st-door:hover .arr{transform:translateX(3px)}

/* the photograph fills its column, with the stage bar floating over its
   lower edge — one object where v1 had a screenshot, a caption and a card. */
.st-media{position:relative;min-width:0;min-height:260px;overflow:hidden;
  border-radius:16px;border:1px solid var(--line-dark);background:var(--deep-2);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.7)}
.st-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-bar{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;
  gap:10px;padding:8px 9px;border-radius:13px;border:1px solid var(--line-dark);
  background:rgba(12,26,36,.84);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.st-bar-i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;
  background:rgba(236,237,234,.1);color:var(--cream)}
.st-bar-i svg{width:14px;height:14px}
.st-bar-t{min-width:0;flex:1 1 auto}
.st-bar-k{display:block;font-size:9.6px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-4)}
.st-bar-n{display:block;font-family:var(--display);font-size:15px;line-height:1.2;
  color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-go{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;
  border-radius:var(--r-chip);background:var(--cream);color:var(--deep);
  font-size:12px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;
  transition:background .2s ease}
.st-go:hover{background:var(--paper-2)}
.st-go span{transition:transform .25s ease}
.st-go:hover span{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){
  .st-door:hover .arr{transform:none}
  .st-go:hover span{transform:none}
}

/* ---------- the strip (full width) -----------------------------------------
   You bring | FinePrint adds | You leave with. One box, three cells,
   hairlines between them; the middle one is a chip cloud. The outcome cell
   is lifted with a cream wash — the accent this .counsel band is allowed.
   Across the full plate each cell gets ~320px, so the type can drop to the
   panel's small register and still set in four lines.
   ------------------------------------------------------------------------- */
.st-strip{display:grid;grid-template-columns:1.06fr 1.02fr .92fr;margin-top:26px;
  border:1px solid var(--line-dark);border-radius:16px;overflow:hidden;
  background:rgba(236,237,234,.03)}
.st-cell{min-width:0;padding:15px 18px 17px}
.st-cell + .st-cell{border-left:1px solid var(--line-dark)}
.st-cell h4{display:flex;align-items:center;gap:7px;font-family:var(--body);font-size:12.4px;
  font-weight:700;letter-spacing:.01em;line-height:1.2;color:var(--cream)}
.st-cell h4 svg{flex:none;width:14px;height:14px;color:var(--mist)}
.st-cell p{margin-top:7px;font-size:12.9px;line-height:1.62;color:var(--grey-4)}
.st-adds{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;list-style:none}
.st-adds li{font-size:11.2px;font-weight:600;line-height:1.2;color:var(--cream);
  background:rgba(236,237,234,.08);border:1px solid var(--line-dark);
  border-radius:var(--r-chip);padding:4px 9px}
.st-leave{background:rgba(242,237,227,.07)}
.st-leave h4 svg{color:var(--cream)}
.st-leave p{color:var(--mist)}

/* the scoping line under the strip on the stages that carry one. layer-10
   sizes .scope for a paper column; on the plate it takes the plate's width. */
.st-panel > .scope{margin-top:17px;max-width:none;font-size:13.2px;line-height:1.6}

/* the focus ring on navy: core's 3px --teal ring is judged against the plate
   here, where it falls under 3:1 — the same finding as the hero. */
.st-panel a:focus-visible{outline-color:var(--teal-lt)}

/* ---------- the foot ------------------------------------------------------ */
.st-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;
  margin-top:clamp(22px,2.6vw,30px);font-size:15.4px;line-height:1.6;color:var(--grey-2)}

/* ---------- 760–1040: one column, the photograph above the checklist ------ */
@media (max-width:1040px){
  .st-split{grid-template-columns:1fr;gap:22px}
  .st-media{order:-1;min-height:0;aspect-ratio:2.8 / 1}
  .st-door{margin-top:18px;padding-top:0}
}

/* ---------- phones: the tab rail scrolls; everything else stacks ---------- */
@media (max-width:760px){
  .st-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    margin-inline:calc(-1 * var(--pad));padding:2px var(--pad) 8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .st-tabs::-webkit-scrollbar{display:none}
  .st-tab{flex:none;scroll-snap-align:start}
  .st-panels{margin-top:12px}
  .st-panels.is-slide{border-radius:18px}
  .st-panel{border-radius:18px;padding:20px 16px 22px}
  .st-top h3{font-size:clamp(22px,6vw,27px)}
  .st-chain li + li{margin-left:18px}
  .st-checks{grid-template-columns:1fr;gap:8px}
  .st-media{aspect-ratio:16 / 11}
  .st-bar{flex-wrap:wrap;gap:9px}
  .st-bar-t{flex:1 1 60%}
  .st-go{flex:1 1 100%;justify-content:center;padding:10px 12px}
  .st-strip{grid-template-columns:1fr}
  .st-cell + .st-cell{border-left:none;border-top:1px solid var(--line-dark)}
}


/* ==== layer-26-home-0924.css ==== */
/* =============================================================================
   layer-26-home-0924 — retired in the 0924b v19 pass.
   The homepage's 0924 components (.hn-) were rebuilt in the v19 register and
   now live in layer-27-home-v19.css (.hv-). Nothing is defined here, so
   check.py has nothing unused to report. Recover the .hn- rules from git if
   they are ever wanted back.
   ========================================================================== */


/* ==== layer-27-home-v19.css ==== */
/* =============================================================================
   layer-27-home-v19 — the homepage in the v19 deck's register.
   Prefix: .hv-   Owner: 0924b builder A (pages/index.html only).

   The page follows CG's v19 deck, slide for slide: 01 hero · 02 the founder's
   problem · 03 the next promise · 04 how it works · 07 the refund · 09 what
   the Firewall checks · 05 hiring · 06 the Legal Room · 10 expertise · 11 what
   the next task learns · (stage picker) · 13 formation first · 17 the close.
   Dark stages lit by the v19 photographs alternate with paper and sand bands.
   Shared utilities (.v-*) are in layer-13; Firewall components (.fw-*) in
   layer-12 are placed, never redrawn. .counsel bands (#example, #stages) stay
   amber-free.
   ========================================================================== */

/* ---------- shared -------------------------------------------------------- */
.hv-h2{font-size:clamp(30px,3.7vw,50px);line-height:1.08;letter-spacing:-.01em;max-width:24ch}
.band-deep .hv-h2{color:var(--cream)}
.hv-head{margin-bottom:clamp(34px,4.2vw,56px)}
.hv-head .deck{margin-top:18px;max-width:56ch}
.hv-lede{margin-top:20px;max-width:52ch}
.hv-n{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--grey-3);
  font-variant-numeric:tabular-nums}
.hv-lbl{font-family:var(--mono);font-size:10.8px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-4)}
.hv-lbl-a{margin-top:16px;color:var(--amber)}
.hv-ico-s{width:22px;height:22px}

/* ---------- 01 hero ---------------------------------------------------------
   layer-22 owns the grid and the scrim; this adds the deck's three icon lines
   and places the Held card in the "plate" area.                              */
.hx-hero h1{font-size:clamp(40px,5.6vw,80px);line-height:1}
.hx-hero h1 em{display:inline-block;padding-right:.06em}
.hv-hl{list-style:none;padding:0;display:grid;gap:14px}
.hv-hl li{display:flex;align-items:center;gap:16px;color:#DCE2E6;line-height:1.4}
.hv-hl img{width:34px;height:34px;flex:none;border-radius:8px;background:rgba(12,26,36,.7);
  box-shadow:inset 0 0 0 1px rgba(236,237,234,.12)}
.hv-hl-fw{color:var(--cream)}
.fw-card.hv-hcard{padding:clamp(20px,2vw,26px) clamp(20px,2.1vw,28px) clamp(20px,2vw,24px);
  border-radius:18px;border-left-width:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.24),0 34px 72px -28px rgba(0,0,0,.76)}
.hv-hcard-k{display:flex;align-items:center;gap:10px}
.hv-hcard .fw-card-t{font-size:clamp(23px,2.1vw,29px);line-height:1.16}
.hv-hcard .fw-card-f{font-size:14.5px}
@media (min-width:1001px){ .hv-hcard{grid-area:plate;margin-top:clamp(20px,2.2vw,26px)} }
@media (max-width:1000px){ .hv-hcard{max-width:30rem;margin-top:clamp(26px,4vw,36px)} }

/* ---------- 02 the founder's problem (paper) -------------------------------- */
.hv-prob-g{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(30px,5vw,80px);
  align-items:center}
.hv-prob-ph{aspect-ratio:4/5;max-height:640px;box-shadow:0 40px 80px -46px rgba(12,26,36,.7)}
.hv-prob-ph img{object-position:50% 40%}
.hv-qs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:clamp(30px,3.6vw,44px)}
.hv-qs li{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:20px 18px 22px}
.hv-ring{display:block;width:16px;height:16px;border-radius:50%;border:2px solid var(--amber);
  box-shadow:inset 0 0 0 3px var(--paper-2),inset 0 0 0 8px var(--amber);margin-bottom:16px}
.hv-qs h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,26px);line-height:1.1}
.hv-qs p{margin-top:8px;font-size:14.8px;line-height:1.55;color:var(--grey-1)}
@media (max-width:900px){
  .hv-prob-g{grid-template-columns:1fr}
  .hv-prob-ph{aspect-ratio:16/10;max-height:none}
}
@media (max-width:640px){ .hv-qs{grid-template-columns:1fr} }

/* ---------- 03 the next promise (dark) -------------------------------------
   Four actions wired into one arrow, which lands inside the dashed amber
   frame: the action happens → Legal finds out later.                          */
.hv-dev{margin-top:16px}
.hv-flow{display:grid;grid-template-columns:minmax(0,.85fr) 70px minmax(0,1.25fr);align-items:center}
.hv-acts{list-style:none;padding:0;display:grid;gap:12px;position:relative}
.hv-acts li{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid var(--line-dark);border-radius:10px;background:rgba(236,237,234,.035);
  font-size:15.5px;line-height:1.4;color:var(--cream)}
.hv-acts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none}
.hv-acts li::after{content:"";position:absolute;left:100%;top:50%;width:30px;height:1px;background:rgba(236,237,234,.3)}
.hv-acts::after{content:"";position:absolute;left:calc(100% + 30px);width:1px;background:rgba(236,237,234,.3);
  top:calc((100% - 36px) / 8);bottom:calc((100% - 36px) / 8)}
.hv-wire{position:relative;align-self:center;height:1px;margin-left:30px;background:var(--amber)}
.hv-wire::after,.hv-arrow::after{content:"";position:absolute;right:-1px;top:50%;width:8px;height:8px;
  border-top:1.5px solid var(--amber);border-right:1.5px solid var(--amber);transform:translateY(-50%) rotate(45deg)}
.hv-frame{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(260px,24vw,340px);
  padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;justify-content:center}
.hv-frame-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.55}
.hv-frame::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,26,36,.55),rgba(12,26,36,.35) 50%,rgba(12,26,36,.7))}
.hv-frame-k{position:absolute;top:16px;left:20px;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.hv-frame-row{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:center}
.hv-box{padding:18px 20px;border-radius:10px;border:1px solid rgba(236,237,234,.22);background:rgba(12,26,36,.82);
  font-family:var(--display);font-size:clamp(22px,2.2vw,30px);line-height:1.12;color:var(--cream)}
.v-dark p.hv-box,.band-deep p.hv-box{color:var(--cream)}
.band-deep p.hv-box-lit{color:var(--amber-soft)}
.hv-box-lit{font-style:italic;border-color:rgba(245,158,11,.75);background:rgba(58,36,6,.86)}
.hv-arrow{position:relative;height:1px;margin:0 8px;background:var(--amber)}
.hv-with{display:flex;align-items:center;gap:20px;margin-top:clamp(28px,3.4vw,44px);background:rgba(245,158,11,.06)}
.v-card.hv-with .fw-ico{margin:0}
.hv-with-k{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.band-deep p.hv-with-k{color:#FFD48A}
.band-deep p.hv-with-t{margin-top:6px;font-family:var(--display);font-size:clamp(21px,2.1vw,28px);line-height:1.22;
  color:var(--cream)}
@media (max-width:900px){
  .hv-flow{grid-template-columns:1fr}
  .hv-acts li::after,.hv-acts::after{display:none}
  .hv-wire{justify-self:center;width:1px;height:44px;margin:0}
  .hv-wire::after{right:auto;top:auto;left:50%;bottom:-1px;transform:translateX(-50%) rotate(135deg)}
}
@media (max-width:560px){
  .hv-frame-row{grid-template-columns:1fr}
  .hv-arrow{justify-self:center;width:1px;height:30px;margin:0}
  .hv-arrow::after{right:auto;top:auto;left:50%;bottom:-1px;transform:translateX(-50%) rotate(135deg)}
  .hv-frame{padding-top:48px}
}

/* ---------- 04 how FinePrint works (sand, navy cards) ------------------------ */
.hv-h2s{font-size:clamp(28px,3.4vw,44px);max-width:30ch}
.hv-h2s .hv-hs{display:block}
.hv-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.v-card.hv-card{background:var(--deep);padding:clamp(22px,2.4vw,30px);box-shadow:0 30px 60px -40px rgba(12,26,36,.7)}
.hv-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.v-card .hv-card-top .fw-ico{margin:0}
.hv-card-p{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.v-card p.hv-card-p{margin-top:0;font-size:11.5px;color:var(--amber)}
.hv-card h3{margin-top:10px}
.hv-strip{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:18px;
  margin-top:clamp(14px,1.8vw,22px);padding:20px 24px;border-radius:14px;background:var(--deep)}
.hv-strip-img{position:absolute;right:0;top:0;z-index:-2;width:48%;height:100%;object-fit:cover;opacity:.7}
.hv-strip::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--deep) 52%,rgba(12,26,36,.3) 100%)}
.hv-strip .fw-ico{width:38px;height:38px}
.hv-strip p{font-family:var(--display);font-size:clamp(19px,1.8vw,23px);line-height:1.3;color:var(--cream)}
.hv-strip .hv-card-p{display:inline;margin-right:10px;font-family:var(--body);color:var(--amber)}
.hv-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;
  margin-top:clamp(24px,3vw,34px)}
.hv-foot .scope{margin-top:0}
@media (max-width:900px){
  .hv-cards{grid-template-columns:1fr}
  .hv-strip-img{width:100%;opacity:.35}
  .hv-strip .hv-card-p{display:block;margin:0 0 4px}
}

/* ---------- 05 example: the refund (dark) ----------------------------------- */
.hv-ex{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4.4vw,72px);align-items:center}
.hv-fig{margin-top:clamp(28px,3.4vw,44px);font-size:17px;line-height:1.6;max-width:36ch}
.band-deep .hv-fig{color:var(--mist)}
.hv-num{display:block;margin-bottom:14px;font-size:clamp(56px,7vw,100px)}
.hv-cap{margin-top:22px;font-size:12.5px;letter-spacing:.02em}
.band-deep .hv-cap{color:var(--grey-4)}
.hv-win{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;border:1px solid var(--line-dark);
  background:var(--deep-2)}
.hv-win-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.7}
.hv-win::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,rgba(12,26,36,.5),rgba(12,26,36,.82) 70%)}
.hv-thread{padding:clamp(20px,2.8vw,36px);display:grid;gap:14px}
.hv-msg{max-width:30rem;border-radius:14px;padding:14px 18px;background:rgba(21,40,54,.9);border:1px solid var(--line-dark)}
.band-deep .hv-msg-t{margin-top:6px;font-family:var(--display);font-style:italic;font-size:clamp(19px,1.7vw,22px);
  line-height:1.3;color:var(--cream)}
.hv-msg-draft{justify-self:end;text-align:right;border:1.5px dashed rgba(245,158,11,.6)}
.fw-dark .fw-card.hv-held{margin-top:6px;border:1.5px solid rgba(245,158,11,.8);border-radius:14px;
  background:rgba(22,18,10,.92);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.hv-held .fw-card-h{align-items:flex-start}
.hv-held .fw-card-t{font-family:var(--body);font-weight:700;font-size:17px;line-height:1.35}
.band-deep .hv-sugg{margin-top:4px;font-family:var(--display);font-style:italic;font-size:clamp(19px,1.7vw,22px);
  line-height:1.3;color:var(--cream)}
.band-deep .hv-esc{margin-top:4px;font-size:14.5px;color:var(--cream)}
@media (max-width:900px){ .hv-ex{grid-template-columns:1fr} }

/* the one motion on the page: the Held pill settles as the card scrolls in */
@keyframes hv-pop{0%{opacity:0;transform:scale(.82)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .hv-held .hv-reveal{animation:hv-pop linear both;animation-timeline:view();animation-range:entry 40% cover 30%}
  }
}

/* ---------- 06 what the Firewall checks (dark, the gate diagram) ------------- */
.hv-chk{border-top:1px solid var(--line-dark)}
.hv-chk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px clamp(30px,5vw,80px);
  align-items:end;margin-bottom:clamp(34px,4.4vw,56px)}
.hv-chk-ph{aspect-ratio:16/7}
.hv-chk-ph img{object-position:50% 60%}
.hv-net{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.95fr);
  column-gap:clamp(34px,4vw,60px);align-items:stretch}
.hv-gates,.hv-outs{list-style:none;padding:0;display:grid;gap:12px}
.hv-gates li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  grid-template-areas:"d chip";gap:18px;align-items:center}
.hv-gates .fw-gate-d{grid-area:d;margin:0;font-size:14.5px}
.hv-chip{grid-area:chip;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line-dark);background:rgba(236,237,234,.04)}
.hv-chip .fw-gate-k{flex:none;text-transform:uppercase;min-width:48px;text-align:center;color:var(--amber);border-color:rgba(245,158,11,.6)}
.fw-dark .hv-chip .fw-gate-k{color:var(--amber);border-color:rgba(245,158,11,.6)}
.hv-chip .fw-gate-t{font-weight:500;font-size:14.5px}
.hv-gates li::after,.hv-outs li::before{content:"";position:absolute;top:50%;height:1px;
  width:clamp(34px,4vw,60px);background:rgba(236,237,234,.3)}
.hv-gates li::after{left:100%}
.hv-outs li::before{right:100%}
.hv-node{display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,2.2vw,28px);
  border:1.5px solid var(--amber);border-radius:14px;background:rgba(22,18,10,.9);
  box-shadow:0 0 0 6px rgba(245,158,11,.06)}
.hv-node .fw-ico{width:46px;height:46px;margin-bottom:14px}
.band-deep .hv-node-t{font-family:var(--display);font-size:clamp(24px,2.3vw,30px);line-height:1.1;color:var(--cream)}
.band-deep .hv-node-k{margin-top:14px;font-size:12.5px;color:var(--grey-4)}
.hv-node-l{list-style:none;padding:0;margin-top:8px;display:grid;gap:4px;font-size:15.5px;color:var(--cream)}
.hv-outs li{position:relative;display:grid;gap:8px;align-content:center;justify-items:start;padding:14px 16px;
  border:1px solid var(--line-dark);border-radius:10px;background:rgba(236,237,234,.04);font-size:14.5px;
  line-height:1.45;color:var(--mist)}
.hv-logged{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 40px;align-items:center;
  margin-top:clamp(28px,3.4vw,40px)}
.band-deep .hv-logged-b{font-size:16px;line-height:1.6;color:var(--mist);max-width:56ch}
.band-deep .hv-logged-t{display:flex;align-items:center;gap:10px;font-family:var(--display);font-style:italic;
  font-size:clamp(19px,1.8vw,22px);color:var(--grey-4)}
@media (max-width:1000px){
  .hv-net{grid-template-columns:1fr;row-gap:36px}
  .hv-gates li::after,.hv-outs li::before{display:none}
  .hv-node{position:relative}
  .hv-node::before,.hv-node::after{content:"";position:absolute;left:50%;width:1px;height:36px;background:rgba(236,237,234,.3)}
  .hv-node::before{bottom:100%}
  .hv-node::after{top:100%}
}
@media (max-width:760px){
  .hv-chk-head{grid-template-columns:1fr}
  .hv-gates li{grid-template-columns:1fr;grid-template-areas:"chip" "d";gap:8px}
}

/* ---------- 07 example: hiring (paper, .counsel — no amber) ------------------ */
.hv-hire-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,4.4vw,72px);align-items:center}
.hv-hire .hv-h2{max-width:none;font-size:clamp(28px,3vw,42px)}
.hv-steps{list-style:none;padding:0;margin-top:clamp(24px,3vw,34px);border-top:1px solid var(--line)}
.hv-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.hv-steps .hv-n{padding-top:5px}
.hv-steps h3{font-size:clamp(19px,1.7vw,22px)}
.hv-steps p{margin-top:6px;font-size:15.2px;line-height:1.6;color:var(--grey-1)}
.hv-steps .hv-quote{font-family:var(--display);font-style:italic;font-size:clamp(19px,1.7vw,22px);line-height:1.3;color:var(--ink)}
.hv-room-note{display:flex;align-items:center;gap:12px;margin-top:18px}
.hv-room-note p{font-size:15px;color:var(--grey-1)}
.hv-screen-f{padding:clamp(6px,.9vw,12px);border-radius:20px;background:var(--deep);
  box-shadow:0 40px 80px -44px rgba(12,26,36,.6)}
.hv-screen-f img{display:block;width:100%;height:auto;border-radius:12px}
.hv-screen figcaption{margin-top:12px;font-size:13.2px;color:var(--grey-3)}
@media (max-width:900px){ .hv-hire-g{grid-template-columns:1fr} }

/* ---------- 08 the Legal Room (dark, two screens overlapped on paper-fan) ----- */
.hv-room-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,4.4vw,72px);align-items:center}
.hv-room-c .deck{margin-top:20px}
.hv-stack{position:relative;margin:0;aspect-ratio:1.18;border-radius:var(--r-media);overflow:hidden}
.hv-stack-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hv-stack img.hv-stack-a,.hv-stack img.hv-stack-b{position:absolute;height:auto;border-radius:8px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.75),0 0 0 1px rgba(236,237,234,.14)}
.hv-stack-a{left:5%;top:8%;width:80%}
.hv-stack-b{right:5%;bottom:9%;width:74%}
@media (max-width:900px){ .hv-room-g{grid-template-columns:1fr} }

/* ---------- 09 legal expertise (white) -------------------------------------- */
.hv-exp-g{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(30px,4.4vw,72px);
  align-items:center;margin-bottom:clamp(40px,5vw,64px)}
.hv-exp .h2x-pd{margin-top:22px;background:var(--paper-2);border-color:var(--line);color:var(--grey-1)}
.hv-exp-ph{aspect-ratio:3/4;max-height:560px}
.hv-exp-ph img{object-position:50% 30%}
@media (max-width:900px){
  .hv-exp-g{grid-template-columns:1fr}
  .hv-exp-ph{aspect-ratio:16/10}
}

/* ---------- 10 what the next task learns (dark) ----------------------------- */
.hv-learn-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:24px clamp(30px,5vw,80px);
  align-items:end;margin-bottom:clamp(30px,4vw,50px)}
.hv-learn-ph{aspect-ratio:16/8}
.hv-lanes{display:grid;gap:14px}
.hv-lane{display:grid;grid-template-columns:minmax(220px,.36fr) minmax(0,1fr);gap:18px clamp(24px,3.4vw,48px);align-items:center}
.hv-lane-h{display:flex;gap:16px;align-items:flex-start}
.v-card .hv-lane-h .fw-ico{width:38px;height:38px;margin:0}
.hv-lane-h h3{font-size:clamp(21px,1.9vw,25px)}
.v-card .hv-lane-h p{margin-top:6px}
.hv-lflow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,36px)}
.hv-lflow li{position:relative;display:flex;flex-direction:column;gap:10px;font-size:15.5px;line-height:1.4;color:var(--cream)}
.hv-lflow li + li::before{content:"";position:absolute;top:13px;right:calc(100% + 6px);
  width:calc(100% + clamp(22px,2.6vw,36px) - 44px);height:1px;background:rgba(245,158,11,.5)}
.hv-dot{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--amber);
  font-family:var(--mono);font-size:11.5px;color:var(--amber)}
@media (max-width:900px){
  .hv-learn-head,.hv-lane{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hv-lflow{grid-template-columns:1fr;gap:14px}
  .hv-lflow li{flex-direction:row;align-items:center}
  .hv-lflow li + li::before{display:none}
}

/* ---------- 12 formation first (sand, navy price cards) ----------------------- */
.hv-plans-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,4.4vw,72px);align-items:center}
.hv-buy{margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.hv-buy div{padding:16px 0;border-bottom:1px solid var(--line)}
.hv-buy dt{font-weight:700;font-size:15.5px;color:var(--ink)}
.hv-buy dd{margin:4px 0 0;font-size:15.2px;line-height:1.55;color:var(--grey-1)}
.hv-tlink{display:inline-block;margin-top:22px}
.hv-plans-ph{aspect-ratio:16/8}
.hv-prices{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.hv-prices .v-card{background:var(--deep);padding:20px 18px}
.hv-price{display:block;font-size:clamp(32px,3vw,44px)}
.hv-per{display:block;margin-top:12px;font-size:13px;line-height:1.4;color:var(--mist)}
.v-card-lit .hv-per{color:var(--cream)}
@media (max-width:900px){ .hv-plans-g{grid-template-columns:1fr} }
@media (max-width:480px){ .hv-prices{grid-template-columns:1fr} }

/* ---------- 13 the close (doorway-fire bleed) --------------------------------- */
.hv-close{--img:url(/img/v19/doorway-fire.jpg);color:var(--mist)}
.hv-close::before{background-position:78% 30%}
.hv-close-g{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,4.4vw,72px);align-items:center}
.hv-close .deck{margin-top:20px}
@media (max-width:900px){ .hv-close-g{grid-template-columns:1fr} }
/* the close is not .v-dark (that would recolour the white application card),
   so its kick and italic phrase take the dark-stage colours here */
.hv-close .v-kick{color:var(--amber)}
.hv-close h2.close-h em{color:var(--amber-soft)}

/* =============================================================================
   0924c — the founder's positioning hero: "FinePrint — Trusted, Secure Legal AI
   Infrastructure" over three pillars (Faster · Lower cost · Safer). The Held
   card keeps its place beside the headline; the pillars stand on one rule
   across the full width, the Safer pillar lit amber (the Firewall).
   ========================================================================== */
.hv-h1-brand{display:block;font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);text-shadow:none;margin-bottom:18px}
.hv-hero3 .hero-in{padding-bottom:clamp(40px,5vw,64px)}
@media (min-width:1001px){
  .hx-grid.hv-g3{grid-template-areas:
      "head    plate"
      "cta     plate"
      "pillars pillars";
    align-items:end}
  .hv-g3 > .hv-hcard{margin-top:0;align-self:end}
  .hv-g3 > .cta-row{margin-top:clamp(26px,2.6vw,34px)}
  .hv-g3 > .hv-pillars{grid-area:pillars}
}
.hv-pillars{list-style:none;padding:0;margin:clamp(40px,5vw,64px) 0 0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);
  border-top:1px solid var(--line-dark);padding-top:clamp(24px,2.6vw,32px)}
.hv-pillars li{background:rgba(12,26,36,.62);border:1px solid var(--line-dark);border-radius:14px;
  padding:20px 22px 22px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hv-pillars li.hv-pl-fw{border-color:rgba(245,158,11,.55);box-shadow:inset 0 0 0 1px rgba(245,158,11,.12)}
.hv-pl-k{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.hv-pl-k img{width:28px;height:28px;flex:none}
.hv-pl-k .fw-dev{margin-left:auto;color:var(--grey-4);letter-spacing:.12em;font-size:10.5px}
.hv-pl-t{font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.15;color:var(--cream)}
.hv-pl-b{margin-top:10px;font-size:14.8px;line-height:1.6;color:#D2DAE0}
@media (max-width:1000px){
  .hv-pillars{grid-template-columns:1fr}
  .hv-g3 > .cta-row{margin-top:26px}
}


/* ==== layer-28-home-0925.css ==== */
/* =============================================================================
   layer-28-home-0925 — the homepage on the v24 deck's angle, written as a web page.
   Prefix: .h5-   Owner: 0925 (pages/index.html only).
   0925c (founder, 2026-09-24): no announcement bar, no brand line in the hero, no
   hedging captions, no pricing band; the channel quotes, the $90,000 reply and the
   redline example are ONE FineShield section (#fineshield), told as a story.
   Builds on layer-13 (.v-*), layer-12 (.fw-*) and layer-27 (.hv-*).
   ========================================================================== */

.h5-wide{max-width:40ch}
.h5-deck-w{max-width:68ch}
.h5-p{margin-top:16px;max-width:56ch;font-size:16.5px;line-height:1.65;color:var(--grey-1)}

/* ---------- hero: the deck's cover, nothing else ---------------------------- */
.h5-hero .hero-in{padding-block:clamp(72px,10vw,150px) clamp(64px,8vw,120px)}
@media (min-width:1001px){
  .h5-hero .hx-grid.h5-g{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "sub" "cta";max-width:760px}
  .h5-hero .hx-grid > .h5-sub{grid-area:sub}
}
.h5-hero h1{font-size:clamp(44px,6.4vw,92px);line-height:.98}
.h5-sub{margin-top:22px;max-width:34ch;font-size:clamp(18px,1.7vw,23px);line-height:1.5;color:#D2DAE0}
.h5-sub b{color:var(--cream);font-weight:600}
.h5-g > .cta-row{margin-top:clamp(28px,3vw,40px)}

/* ---------- FineShield: one story (deep) -------------------------------------- */
.h5-fs-head{max-width:880px}
.h5-fs .h5-fs-lede{margin-top:22px;max-width:64ch;color:#D2DAE0}
.h5-strip{margin-top:clamp(30px,3.6vw,48px);aspect-ratio:2172/329;border-radius:14px;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.h5-case{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4.4vw,72px);align-items:center;
  margin-top:clamp(56px,7vw,96px)}
.h5-case h3,.h5-fix h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.2vw,44px);line-height:1.06;color:var(--cream)}
.h5-case-t p{margin-top:16px;max-width:48ch;font-size:16.5px;line-height:1.65;color:var(--mist)}
.h5-case-t p + p{color:var(--cream)}
.h5-shot{margin:0}
.h5-shot img{display:block;width:100%;height:auto;border-radius:14px}
.h5-shot-l img{box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.h5-fix{margin-top:clamp(56px,7vw,96px);max-width:760px}
.h5-fix p{margin-top:14px;font-size:16.5px;line-height:1.65;color:var(--mist)}
.h5-shot-d{margin-top:clamp(24px,3vw,36px);padding:clamp(6px,.8vw,10px);border-radius:20px;background:var(--deep-2);
  border:1px solid var(--line-dark);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.h5-shot-d img{border-radius:12px}
.h5-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,36px);
  margin-top:clamp(28px,3.4vw,44px)}
.h5-steps li{padding-top:18px;border-top:1px solid var(--line-dark)}
.h5-step-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--amber);color:var(--amber);font-size:13px;font-weight:700}
.h5-steps h4{margin-top:14px;font-family:var(--body);font-size:17px;font-weight:700;color:var(--cream)}
.h5-steps p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--mist)}
.h5-ch{display:flex;align-items:center;gap:18px;margin-top:clamp(36px,4vw,52px);padding:20px 24px;border-radius:14px;
  background:rgba(12,26,36,.6);border:1px solid var(--line-dark)}
.h5-ch .fw-ico{width:36px;height:36px}
.h5-ch p{font-size:16px;line-height:1.6;color:var(--cream)}
.h5-fs .cta-row{margin-top:clamp(26px,3vw,36px)}
@media (max-width:900px){ .h5-case{grid-template-columns:1fr} .h5-steps{grid-template-columns:1fr} }

/* ---------- two products, two cards (sand) — 0925l, after Harvey's "One Platform" --------
   Planned work (Legal AI Counsel, cool deep green-slate) beside unexpected moments (FineShield,
   warm olive with amber). Grain is SVG feTurbulence in data URIs: a speckle layer masked by a
   low-frequency "cloud" noise, plus a fine uniform grain. The product screen rises out of the
   card's lower half and is cropped by its bottom and right edges. */
.h5-two-head{max-width:920px;margin:0 auto clamp(40px,5vw,68px);text-align:center}
.h5-two-head .hv-h2{max-width:none;margin-inline:auto}
.h5-two-head .deck{max-width:760px;text-wrap:balance;margin:20px auto 0;font-size:clamp(16.5px,1.45vw,19px)}
.h5-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.h5-two-c{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;border-radius:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 40px 70px -46px rgba(12,26,36,.75)}
.h5-two-c::before,.h5-two-c::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.h5-two-c::before{mask-size:900px 700px,100% 100%;-webkit-mask-size:900px 700px,100% 100%;
  mask-composite:intersect;-webkit-mask-composite:source-in;mask-repeat:repeat,no-repeat;-webkit-mask-repeat:repeat,no-repeat}
.h5-two-c::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");opacity:.18;mix-blend-mode:overlay}
.h5-two-counsel{background:radial-gradient(90% 70% at 88% 18%,#2B3E3C 0%,rgba(43,62,60,0) 70%),linear-gradient(160deg,#1A2B2C 0%,#101D20 60%,#0C171A 100%)}
.h5-two-counsel::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.66 0 0 0 0 0.76 0 0 0 0 0.73 2.6 0 0 0 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4.2 0 0 0 -1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),radial-gradient(70% 62% at 100% 18%,#000 25%,rgba(0,0,0,.3) 65%,transparent 100%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4.2 0 0 0 -1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),radial-gradient(70% 62% at 100% 18%,#000 25%,rgba(0,0,0,.3) 65%,transparent 100%)}
.h5-two-shield{background:radial-gradient(90% 70% at 88% 18%,#4A4128 0%,rgba(74,65,40,0) 70%),linear-gradient(160deg,#34301F 0%,#221F15 60%,#17150E 100%)}
.h5-two-shield::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.84 0 0 0 0 0.74 0 0 0 0 0.5 2.6 0 0 0 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='5' seed='23'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4.2 0 0 0 -1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),radial-gradient(70% 62% at 100% 18%,#000 25%,rgba(0,0,0,.3) 65%,transparent 100%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='5' seed='23'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4.2 0 0 0 -1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),radial-gradient(70% 62% at 100% 18%,#000 25%,rgba(0,0,0,.3) 65%,transparent 100%)}
.h5-two-b{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:clamp(28px,3vw,42px) clamp(24px,3vw,42px) 0}
.h5-two-b h3{margin-top:12px;font-family:var(--display);font-weight:400;font-size:clamp(34px,3.3vw,46px);line-height:1.04;
  letter-spacing:-.005em;color:var(--cream);text-shadow:0 1px 18px rgba(0,0,0,.35)}
.h5-two-t{margin-top:14px;max-width:40ch;font-size:15.5px;line-height:1.6;color:#D6DDE0;margin-bottom:26px}
.h5-two-shield .h5-two-t{color:#E4DDCC}
.h5-two-btn{margin-top:auto;padding:11px 18px;font-size:14px;border-radius:6px;background:rgba(0,0,0,.18)}
.h5-two-shield .h5-two-btn{border-color:rgba(245,158,11,.55)}
.h5-two-shield .h5-two-btn:hover{border-color:var(--amber);background:rgba(245,158,11,.1)}
.h5-two-shot{margin-top:clamp(30px,3.4vw,46px);height:clamp(230px,21vw,300px);padding-left:10%}
.h5-two-shot img{display:block;width:118%;max-width:none;height:calc(100% + 30px);object-fit:cover;object-position:0 0;
  border-radius:8px 0 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08)}
/* the Ask screen's request bubble sits at the right, so this one is cropped less */
.h5-two-counsel .h5-two-shot img{width:104%}
@media (max-width:820px){
  .h5-two{grid-template-columns:1fr}
  .h5-two-shot{height:clamp(200px,52vw,280px);padding-left:8%}
  .h5-two-shot img{width:140%}
  .h5-two-counsel .h5-two-shot img{width:118%}
}

/* ---------- one Legal AI Counsel, checked by lawyers (deep) ------------------ */
.h5-sys{margin:0}
.h5-sys img{display:block;width:100%;height:auto;border-radius:20px;border:1px solid var(--line-dark)}
.band-deep a.h5-tlink-d{margin-top:22px;color:var(--cream);border-bottom-color:rgba(236,237,234,.4)}

/* ---------- for legal teams (deep-2) ----------------------------------------- */
.h5-ent-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4.6vw,76px);align-items:start}
.h5-ent-h{font-size:clamp(28px,3vw,42px);max-width:22ch}
.h5-ent-g .deck{margin-top:18px}
.h5-map{margin:0;display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);align-items:center;
  padding:clamp(20px,2.2vw,28px);border-radius:18px;background:#071118;border:1px solid var(--line-dark)}
.h5-map-c{display:flex;flex-direction:column;gap:12px;height:100%;justify-content:flex-start}
.h5-map-k{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-4)}
.h5-map-ch{list-style:none;padding:0;display:grid;gap:8px}
.h5-chip{display:block;padding:10px 12px;border-radius:10px;background:var(--deep-2);border:1px solid var(--line-dark);
  font-family:var(--mono);font-size:12px;color:var(--mist)}
.h5-map-n{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;
  padding:18px 10px;border-radius:14px;background:var(--deep-2);border:1px solid var(--line-dark)}
.h5-map-lit{border-color:var(--amber);box-shadow:inset 0 0 0 1px rgba(245,158,11,.2)}
.h5-map-n .fw-ico{width:44px;height:44px}
.h5-map-t{font-family:var(--display);font-size:clamp(20px,1.8vw,24px);line-height:1.05;color:var(--cream)}
.h5-map-s{font-size:12px;color:var(--grey-4)}
.h5-map-a{height:2px;background:var(--teal-lt);position:relative;margin-top:24px}
.h5-map-a::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--teal-lt);border-right:0}
.v-card.h5-ctrl{margin-top:clamp(16px,2vw,22px)}
.h5-ctrl p{margin-top:0;font-size:15.5px;color:var(--cream)}
.h5-ent-g .cta-row{margin-top:clamp(20px,2.4vw,28px)}
@media (max-width:1000px){ .h5-ent-g{grid-template-columns:1fr} }
@media (max-width:560px){
  .h5-map{grid-template-columns:1fr;gap:10px}
  .h5-map-a{width:2px;height:22px;margin:0 auto}
  .h5-map-a::after{right:-4px;top:auto;bottom:-1px;border:5px solid transparent;border-top:7px solid var(--teal-lt);border-bottom:0}
}

/* ---------- close: the empty chair ------------------------------------------ */
.h5-close{--img:url(/img/v24/close-chair.jpg)}
.h5-close::before{background-position:70% 40%}

/* ---------- phones ------------------------------------------------------------ */
@media (max-width:600px){
  /* the redline capture is a wide screen: on a phone it scrolls sideways inside its frame at a readable size */
  .h5-shot-d{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .h5-shot-d img{width:760px;max-width:none}
  .h5-ch{align-items:flex-start}
}

/* ---------- 0925f: the stage picker — FineShield in every stage ------------ */
.st-checks li.h5-st-fs{grid-column:1 / -1;background:#2A2208;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(245,158,11,.6)}
.st-checks li.h5-st-fs::before{border-color:var(--amber)}
.st-checks li.h5-st-fs b{font-weight:700;color:var(--amber)}
.st-adds li.h5-st-fs{color:var(--amber);box-shadow:inset 0 0 0 1px rgba(245,158,11,.6)}
.h5-hero .h5-sub{max-width:52ch;font-size:clamp(17px,1.45vw,20px);line-height:1.55}

/* ---------- 0925m: one counsel, two ways, one shared base (#platform, sand) --------------
   Structure made visible: the two ways (Legal AI Counsel, teal; FineShield, amber) are the
   primary tiles; hairlines from each converge into one deep plate they both stand on (Legal
   Room + FinePrint LM/AnswerLoop). The lines are a stretched SVG (non-scaling strokes); a short
   pulse runs down them only when the reader allows motion. */
.h5-pl-head{max-width:920px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.h5-pl-head .hv-h2{max-width:none;margin-inline:auto;text-wrap:balance}
.h5-pl-head .deck{max-width:720px;text-wrap:balance;margin:20px auto 0;font-size:clamp(16.5px,1.45vw,19px)}
.h5-pl{--pl-c:var(--teal);--pl-s:var(--amber-deep)}
.h5-pl-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.h5-pl-way{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(28px,3.2vw,46px) clamp(24px,3.2vw,46px) clamp(30px,3.4vw,48px);border-radius:10px;background:var(--paper-2);
  border:1px solid rgba(16,30,40,.08);box-shadow:0 1px 0 rgba(16,30,40,.04),0 34px 60px -48px rgba(12,26,36,.45)}
.h5-pl-way::before{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.h5-pl-counsel::before{background:var(--pl-c)}
.h5-pl-way::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 100% 0%,var(--teal-wash) 0%,rgba(226,239,243,0) 72%)}
.h5-pl-shield::before{background:var(--pl-s)}
.h5-pl-shield::after{background:radial-gradient(70% 60% at 100% 0%,var(--amber-wash) 0%,rgba(255,242,217,0) 72%)}
.h5-pl-ico{display:block;width:52px;height:52px}
.h5-pl-k{margin-top:22px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.h5-pl-shield .h5-pl-k{color:var(--amber-ink)}
.h5-pl h3{margin-top:10px;font-family:var(--display);font-weight:400;font-size:clamp(34px,3.2vw,46px);line-height:1.04;
  letter-spacing:-.01em;color:var(--ink)}
.h5-pl h3 a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .25s ease}
.h5-pl h3 a:hover,.h5-pl h3 a:focus-visible{background-size:100% 1px}
.h5-pl-t{margin-top:14px;max-width:44ch;font-size:16px;line-height:1.62;color:var(--grey-1)}

/* the join: two hairlines converge on the plate's centre */
.h5-pl-join{position:relative;height:clamp(56px,6vw,84px)}
.h5-pl-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.h5-pl-ln,.h5-pl-run{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.h5-pl-ln.h5-pl-ln-c{stroke:var(--pl-c);opacity:.55}
.h5-pl-ln.h5-pl-ln-s{stroke:var(--pl-s);opacity:.6}
.h5-pl-run{display:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:9 91;stroke-dashoffset:100}
.h5-pl-run.h5-pl-ln-c{stroke:var(--pl-c)}
.h5-pl-run.h5-pl-ln-s{stroke:var(--pl-s)}
.h5-pl-join::before,.h5-pl-join::after{content:"";position:absolute;top:-4px;width:7px;height:7px;border-radius:50%;
  transform:translateX(-50%)}
.h5-pl-join::before{left:25%;background:var(--pl-c)}
.h5-pl-join::after{left:75%;background:var(--pl-s)}
@media (prefers-reduced-motion: no-preference){
  .h5-pl-run{display:inline;animation:h5-pl-run 3.6s cubic-bezier(.45,0,.55,1) infinite}
  .h5-pl-run.h5-pl-ln-s{animation-delay:1.8s}
}
@keyframes h5-pl-run{0%{stroke-dashoffset:100;opacity:0}12%{opacity:1}70%{opacity:1}100%{stroke-dashoffset:9;opacity:0}}

/* the shared base: one deep plate, two foundations */
.h5-pl-base{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-radius:14px;background:radial-gradient(38% 70% at 50% 0%,rgba(143,193,212,.14) 0%,rgba(143,193,212,0) 70%),
  linear-gradient(170deg,var(--deep-2) 0%,var(--deep) 70%);box-shadow:0 40px 70px -46px rgba(12,26,36,.7)}
.h5-pl-base::before{content:"";position:absolute;left:50%;top:0;bottom:clamp(28px,3.2vw,44px);width:1px;background:var(--line-dark)}
.h5-pl-base::after{content:"";position:absolute;left:50%;top:-6px;width:13px;height:13px;border-radius:50%;
  transform:translateX(-50%);background:var(--cream);box-shadow:0 0 0 4px rgba(242,237,227,.14),0 0 18px 2px rgba(143,193,212,.35)}
.h5-pl-found{padding:clamp(30px,3.4vw,48px) clamp(24px,3.4vw,50px) clamp(30px,3.4vw,46px)}
.h5-pl-icos{display:flex;gap:10px}
.h5-pl-icos img{display:block;width:40px;height:40px}
.h5-pl-found .h5-pl-k{margin-top:20px;color:var(--teal-lt)}
.h5-pl-found h3{font-size:clamp(28px,2.5vw,36px);color:var(--cream)}
.h5-pl-found .h5-pl-t{max-width:46ch;font-size:15.5px;color:var(--mist)}

@media (max-width:820px){
  .h5-pl-ways,.h5-pl-base{grid-template-columns:1fr}
  .h5-pl-join{width:min(52%,220px);margin-inline:auto;height:56px}
  .h5-pl-base::before{display:none}
  .h5-pl-found + .h5-pl-found{border-top:1px solid var(--line-dark)}
}

/* 0925n: #how lost its H2 to #platform; the deck opens the band */
#how .h5-how-head .deck{margin-top:0}

/* ---------- 0925o: the signature product moment (#moment, white) -----------------------
   Section 04 of the founder's 0925 copy. One held email, the three steps pinned to it: amber
   pins (FineShield's colour) sit on the promise, the clause and the three choices, and the
   legend below carries the same numbers. The screen is moment-held.jpg / moment-held-m.jpg,
   rendered from the 0924 redline mock without its own badges or leader lines
   (qa-0925/product-moment/render.mjs); pin positions are % of that render, so they hold at
   every width. The quoted sentence is struck in amber; where the browser has scroll-driven
   animations and the reader allows motion, the strike draws as the line scrolls in. */
.h5-pm-h{max-width:18ch}
.h5-pm-stage{margin:clamp(30px,3.6vw,48px) 0 0;padding:clamp(22px,3vw,44px) clamp(14px,2.2vw,32px) clamp(14px,2vw,26px);
  border-radius:16px;background:var(--sand);border:1px solid rgba(16,30,40,.06);
  box-shadow:0 1px 0 rgba(16,30,40,.03),0 50px 90px -60px rgba(12,26,36,.45)}
.h5-pm-top{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.6vw,20px);
  padding:0 clamp(8px,1.4vw,18px) clamp(18px,2.2vw,28px)}
.h5-pm-label{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 11px;border-radius:var(--r-chip);
  background:var(--amber-wash);border:1px solid rgba(199,124,5,.28);color:var(--amber-ink);
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.h5-pm-label::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.h5-pm-q{display:block;font-family:var(--display);font-weight:400;font-size:clamp(32px,4.4vw,64px);line-height:1.08;
  letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.h5-pm-q s{text-decoration:none;background:linear-gradient(var(--amber),var(--amber)) 0 58%/100% .055em no-repeat}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .h5-pm-q s{animation:h5-pm-strike linear both;animation-timeline:view();animation-range:entry 90% cover 42%}
  }
}
@keyframes h5-pm-strike{from{background-size:0 .055em}to{background-size:100% .055em}}

.h5-pm-shot{position:relative}
.h5-pm-shot img{display:block;width:100%;height:auto}
.h5-pm-shot{--p1x:53.09%;--p1y:57.06%;--p2x:63.48%;--p2y:29.82%;--p3x:63.48%;--p3y:71.4%}
.h5-pm-pin,.h5-pm-n{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--amber);color:var(--deep);font-family:var(--body);font-weight:700;line-height:1}
.h5-pm-pin{position:absolute;width:30px;height:30px;font-size:14px;transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px var(--paper-2),0 0 0 9px rgba(245,158,11,.18),0 8px 18px -6px rgba(12,26,36,.45);
  transition:transform .25s ease,box-shadow .25s ease}
.h5-pm-p1{left:var(--p1x);top:var(--p1y)}
.h5-pm-p2{left:var(--p2x);top:var(--p2y)}
.h5-pm-p3{left:var(--p3x);top:var(--p3y)}

.h5-pm-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,40px);margin-top:clamp(30px,3.4vw,44px)}
.h5-pm-steps li{padding-top:20px;border-top:1px solid var(--line)}
.h5-pm-n{width:30px;height:30px;font-size:14px}
.h5-pm-steps h3{margin-top:16px;font-family:var(--display);font-weight:400;font-size:clamp(24px,2.1vw,30px);line-height:1.1;color:var(--ink)}
.h5-pm-steps p{margin-top:10px;max-width:36ch;text-wrap:pretty;font-size:16px;line-height:1.6;color:var(--grey-1)}
.h5-pm-cta{margin-top:clamp(30px,3.4vw,44px)}
/* the legend and the pins answer each other */
.h5-pm:has(.h5-pm-s1:hover) .h5-pm-p1,.h5-pm:has(.h5-pm-s2:hover) .h5-pm-p2,.h5-pm:has(.h5-pm-s3:hover) .h5-pm-p3{
  transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 3px var(--paper-2),0 0 0 12px rgba(245,158,11,.3),0 8px 18px -6px rgba(12,26,36,.45)}
@media (prefers-reduced-motion: reduce){ .h5-pm-pin{transition:none} }

@media (max-width:820px){
  .h5-pm-shot{--p1x:5.63%;--p1y:31.53%;--p2x:5.63%;--p2y:70.9%;--p3x:5.63%;--p3y:93.91%}
  .h5-pm-pin{width:24px;height:24px;font-size:12px;
    box-shadow:0 0 0 2px var(--paper-2),0 0 0 6px rgba(245,158,11,.2),0 6px 14px -6px rgba(12,26,36,.45)}
  .h5-pm-label{font-size:10.5px;letter-spacing:.1em;padding:6px 11px 6px 10px}
  .h5-pm-steps{grid-template-columns:1fr;gap:0}
  .h5-pm-steps li{display:grid;grid-template-columns:30px 1fr;column-gap:16px;padding:18px 0 20px}
  .h5-pm-n{grid-row:span 2}
  .h5-pm-steps h3{margin-top:2px}
  .h5-pm-steps p{margin-top:6px}
}
/* one screen per layout: the wide render beside the legend, the stacked render on phones
   (two <img>s, not <picture>, because build.py copies images it finds in src attributes) */
.h5-pm-shot .h5-pm-m{display:none}
@media (max-width:820px){ .h5-pm-shot .h5-pm-d{display:none} .h5-pm-shot .h5-pm-m{display:block} }


/* ==== layer-30-offer.css ==== */
/* =============================================================================
   0919 layer 30 — the offer pages: /pricing, /launchpad, /signup, /thanks.
   Everything here is prefixed .of- and used by those four pages only. The two
   exceptions are documented at the end: a grid-area patch to .plans-5's
   stacked layout (the plan column gained two children this pass) and an
   is-bad state on the existing .field / .choice form wrappers.
   ========================================================================== */

/* ---------- multi-column checklists ----------------------------------------
   The copy enumerates in running sentences ("contract work, hiring and
   contractor paperwork, formation tasks, and company-record work"). Split
   into a .checks list those read as a scannable set rather than a clause
   chain, and at three or four items a single column leaves a long empty
   right-hand side. Column count is the only thing these two add.
   ------------------------------------------------------------------------- */
.of-2{grid-template-columns:repeat(2,1fr);gap:13px clamp(26px,4vw,56px)}
@media (max-width:620px){ .of-2{grid-template-columns:1fr} }

/* ---------- the pricing ladder, V2 -----------------------------------------
   The V2 offer is: every paid plan carries the same core workflows, and the
   plans differ by monthly credit allowance and review priority. So the credit
   line is promoted out of the paragraph into its own rule-topped block — it
   is the one number that changes across the row, and it has to be readable in
   a glance down the ladder. The inclusions underneath are deliberately set
   quieter and identical in shape, so sameness is visible as a pattern.
   ------------------------------------------------------------------------- */
.of-cred{margin-top:16px;padding-top:15px;border-top:1px solid var(--line);
  font-size:15.6px;font-weight:700;line-height:1.35;color:var(--teal-deep);
  font-variant-numeric:tabular-nums}
.of-cred span{display:block;margin-bottom:6px;font-size:11.4px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey-3)}
.plan-founder .of-cred{border-top-color:rgba(199,124,5,.28)}

.of-inc{margin-top:15px;display:grid;gap:9px}
.of-inc li{position:relative;padding-left:19px;font-size:14.4px;line-height:1.56;
  color:var(--grey-2)}
.of-inc li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--grey-4)}

/* ---------- form messages ---------------------------------------------------
   The approved copy writes a message for every field and one summary line for
   the form. They are rendered where the reader is: under the control that is
   wrong, and once above the buttons. Red here is a state, not decoration —
   nothing in these pages shows a review lane, so the canon colours are free.
   ------------------------------------------------------------------------- */
.of-msg{font-size:12.8px;line-height:1.5;color:var(--lv-red)}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:var(--lv-red)}
.choice.is-bad .chips label{border-color:var(--lv-red)}
.of-sum{margin-top:22px;padding:13px 18px;border-left:3px solid var(--lv-red);
  border-radius:0 12px 12px 0;background:var(--sand);
  font-size:14.8px;line-height:1.6;color:var(--ink)}
.band-white .of-sum{background:var(--paper)}
/* the working / sending state of the same line — an is- state class so
   the QA pass does not read a JS-applied rule as dead CSS */
.of-sum.is-working{border-left-color:var(--teal)}

/* The approved microcopy marks a required field with the word "Required", not
   an asterisk — it is set as a quiet uppercase marker so a label carrying it
   still reads as one line of label. Its own class, not an override of the
   core .req, because other pages' forms belong to other agents. */
.of-req{margin-left:3px;font-size:11.2px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber-deep)}

/* ---------- the confirmation headline ---------------------------------------
   The approved confirmation heading is a two-clause sentence. The core h1
   measure is 13ch, tuned for a three-word hero line; at that width this one
   sets as six short lines. Its own class rather than an override, so nothing
   else moves. */
.of-conf-h{max-width:24ch;font-size:clamp(34px,4.6vw,52px)}

/* ---------- the paid-plan variant of the application -----------------------
   /signup?plan=founder|startup|growth is the same document, re-titled. The
   plan the visitor chose is echoed as one line so the request is unambiguous
   before it is sent.
   ------------------------------------------------------------------------- */
.of-plan{margin-top:24px;display:inline-block;padding:13px 20px;border-radius:14px;
  background:var(--paper-2);border:1px solid var(--line);
  font-size:15px;font-weight:600;line-height:1.5;color:var(--ink)}
.band-white .of-plan{background:var(--paper)}

/* ---------- stacked plan columns, patched for the two new children ---------
   layer-10 gives .plans-5 .plan a named-area grid below 1060px. Two children
   were added to the paid columns this pass, and an unplaced child in a fully
   named grid lands in an implicit row AFTER the button. Both get an area.
   The paid columns carry .of-inc and the other two carry .p-inc, never both,
   so the shared "inc" area cannot collide.
   ------------------------------------------------------------------------- */
@media (max-width:1060px){
  .plans-5 .plan{grid-template-areas:"name price" "stage price" "cred cred" "inc inc" "cta cta"}
  .plans-5 .of-cred{grid-area:cred;margin-top:14px}
  .plans-5 .of-inc{grid-area:inc;margin-top:12px;max-width:56ch}
}

/* Five columns and a four-word price unit ("per company per month"): the core
   price row is a nowrap flex, which at this column width squeezes the unit
   against the figure. Scoped to the five-plan ladder so nothing else moves. */
.plans-5 .p-price{flex-wrap:wrap}

/* ---------- give `hidden` its meaning back --------------------------------
   `[hidden]{display:none}` is a UA rule, so ANY author display declaration
   outranks it. Three of the components the variant switch and the wizard
   toggle carry one — the eyebrow (inline-flex), the buttons (inline-flex)
   and the plan pill (inline-block) — and without this they stay on screen
   with the attribute set. Listed explicitly rather than globally, so this
   layer cannot change how another page uses the attribute. */
.kick[hidden],.v-kick[hidden],.btn[hidden],.of-plan[hidden]{display:none}

/* =============================================================================
   0924b — the v19 register on the offer pages (deck slide 13).
   The pricing ladder is now navy cards on a dark stage: a big serif price
   (.v-num), the Startup plan lit in amber (.v-card-lit), Launchpad as one wide
   card across the top because it is the way in, not a rung. Same words, same
   prices, same CTAs. .of-tier* is the ladder; .of-incl the paid-plan line.
   ========================================================================== */
.of-incl{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:4px}
.of-incl li{display:inline-flex;align-items:baseline;gap:11px;font-size:15.4px;line-height:1.5;color:var(--mist)}
.of-incl li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--amber);transform:translateY(-2px)}
.of-incl b{color:var(--cream);font-weight:600}

.of-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.of-tier{display:flex;flex-direction:column;padding:28px 24px 26px}
.v-card .of-t-name{margin-top:0;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-4)}
.v-card-lit .of-t-name{color:var(--amber)}
.v-card .v-num{font-size:clamp(44px,4.4vw,62px);line-height:1;color:var(--cream)}
.v-card .v-num-lit{color:var(--amber-soft)}
.of-tier .v-num{margin-top:22px}
.v-card .of-t-per{margin-top:12px;font-size:14px;color:var(--mist)}
.v-card .of-t-stage{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-dark);
  font-size:15px;line-height:1.58;color:#D6DCE0}
.v-card .of-cred{margin-top:18px;font-size:15.6px;font-weight:700;line-height:1.35;border-top-color:var(--line-dark);color:var(--cream)}
.of-tier .of-cred span{color:var(--grey-4)}
.v-card-lit .of-cred{color:var(--amber-soft)}
.of-tier .of-inc li{color:var(--mist);font-size:14.2px}
.of-tier .of-inc li::before{background:var(--amber)}
.of-tier .p-cta{padding-top:26px}
.v-card .p-note{margin-top:12px;font-size:13.2px;color:var(--grey-4)}
.v-card-lit{background:rgba(245,158,11,.06)}

/* Launchpad: one wide card, three columns — the offer, the words, the button */
.of-lp{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,.9fr);
  gap:clamp(22px,3vw,44px);align-items:center;margin-top:clamp(30px,3.6vw,44px);padding:30px 30px}
.of-lp .v-num{margin-top:14px}
.of-lp .p-cta{margin-top:0;padding-top:0;grid-area:auto}
.v-card .of-lp-t{margin-top:0;font-size:15.4px;line-height:1.62;color:#D6DCE0}
.v-card .of-lp-t + .of-lp-t{margin-top:10px}
.v-card .of-lp-t b{color:var(--cream);font-weight:600}

@media (max-width:1100px){ .of-tiers{grid-template-columns:repeat(2,1fr)} }
@media (max-width:860px){ .of-lp{grid-template-columns:1fr;gap:18px} }
@media (max-width:620px){ .of-tiers{grid-template-columns:1fr} }


/* ==== layer-40-work.css ==== */
/* =============================================================================
   0919 layer 40 — the four task pages (contracts · hiring · company records ·
   legal workflows). Everything here is prefixed .wk-.

   These four pages share a shape on purpose: a founder moving between them
   should feel the same promise. What must NOT be shared is the centrepiece —
   each page gets one component drawn from what actually differs about that
   task, and each of those components lives here:

     .wk-hand       contracts   — the handoff to a lawyer, drawn as a rail
     .wk-facts      hiring      — the input set that drives the work
     .wk-esc        hiring      — what changes the review required
     .wk-rec        records     — a record view where ABSENCE is visible
     .wk-asks       workflows   — areas you may ASK about, quieted so they
                                  cannot be misread as shipping workflows
     .wk-scopeline  shared      — a scope note the page must not bury

   Canon: green / yellow / red are matter-risk colours. The two components that
   use them (.wk-hand, .wk-esc) sit inside .counsel bands, which strip amber, so
   Yellow reads as a status. .wk-rec's statuses likewise.
   ========================================================================== */

/* ---------- contracts: where lawyer judgment enters ------------------------
   Three legs of one rail, the middle leg drawn in the review colour. The leg
   IS the coloured rule — no dot to align against the band background, so the
   component drops into any band without a background-matched halo.
   ------------------------------------------------------------------------- */
.wk-hand{margin-top:clamp(34px,4.4vw,52px)}
.wk-hand-rail{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(18px,3vw,40px)}
.wk-stop{border-top:3px solid var(--teal);padding:20px 0 4px}
.wk-stop-lawyer{border-top-color:var(--lv-yellow-dot)}
.wk-stop-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey-2)}
.wk-stop-lawyer .wk-stop-k{color:var(--lv-yellow)}
.wk-stop-t{margin-top:11px;font-family:var(--display);font-size:clamp(19px,1.9vw,23px);
  line-height:1.28;color:var(--ink);max-width:22ch}
/* the held state: the sentence that says the step waits, set as a held row */
.wk-hand-hold{margin-top:clamp(26px,3.2vw,36px);padding:18px 22px;border-radius:16px;
  background:var(--paper-2);border:1px solid var(--line);
  border-left:3px solid var(--lv-yellow-dot);
  font-size:15.4px;line-height:1.68;color:var(--grey-1);max-width:66ch}
.wk-hand-hold b{color:var(--ink);font-weight:600}
@media (max-width:760px){
  .wk-hand-rail{grid-template-columns:1fr;gap:0}
  .wk-stop{padding:16px 0 20px}
  .wk-stop-t{max-width:none}
}

/* ---------- hiring: the facts that change the work -------------------------
   Not a list of benefits — an intake sheet. Each cell is a labelled field with
   its value line still empty, because these are the six things the founder
   supplies before anything downstream can be decided. The 1px gaps are the
   grid background showing through, so the block reads as one ruled form.
   ------------------------------------------------------------------------- */
.wk-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:clamp(36px,4.6vw,56px);background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden}
.wk-fact{background:var(--paper-2);padding:22px 22px 26px}
.band-white .wk-fact{background:var(--paper)}
.wk-fact-l{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey-2)}
.wk-fact-v{display:block;margin-top:16px;height:10px;border-bottom:1.5px dashed var(--grey-4)}
@media (max-width:860px){ .wk-facts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .wk-facts{grid-template-columns:1fr} }

/* ---------- hiring: what changes the review required -----------------------
   The escalation, stated honestly: four named triggers on one side, the one
   consequence on the other, in the review colour. No promise about what the
   review concludes — only that the review required changes.
   ------------------------------------------------------------------------- */
.wk-esc{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(16px,3vw,34px);align-items:center;margin-top:clamp(34px,4.4vw,52px)}
.wk-trigs{display:grid;gap:9px}
.wk-trig{font-size:15.4px;line-height:1.5;color:var(--grey-1);background:var(--paper-2);
  border:1px solid var(--line);border-radius:12px;padding:13px 17px}
.band-white .wk-trig{background:var(--paper)}
.wk-esc-arr{width:34px;height:20px;color:var(--grey-4);flex:none}
.wk-esc-out{background:var(--paper-2);border:1px solid var(--line);
  border-left:3px solid var(--lv-yellow-dot);border-radius:14px;padding:20px 22px;
  font-family:var(--display);font-size:clamp(20px,2vw,24px);line-height:1.3;color:var(--ink)}
.band-white .wk-esc-out{background:var(--paper)}
@media (max-width:760px){
  .wk-esc{grid-template-columns:1fr;gap:14px;justify-items:start}
  .wk-esc-arr{transform:rotate(90deg)}
  .wk-esc-out{width:100%}
}

/* ---------- company records: absence is visible ----------------------------
   The whole point of the page. A green checklist that simply omits what it
   never saw is a lie of layout; a missing record therefore keeps its row and
   is drawn HOLLOW — dashed, unfilled, labelled "Marked missing" — so the eye
   lands on the hole rather than skipping it.
   ------------------------------------------------------------------------- */
.wk-rec{display:grid;gap:10px;margin-top:clamp(32px,4.2vw,48px)}
.wk-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 22px;align-items:center;
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.wk-row-missing{background:transparent;border-style:dashed;border-color:var(--grey-4)}
.wk-doc{font-size:16px;font-weight:600;line-height:1.4;color:var(--ink)}
.wk-row-missing .wk-doc{font-weight:500;color:var(--grey-2)}
.wk-st{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:13.2px;font-weight:600;color:var(--grey-1)}
.wk-st::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--grey-4);flex:none}
.wk-st-present::before{background:var(--lv-green)}
.wk-st-watch::before{background:var(--lv-yellow-dot)}
.wk-st-missing::before{background:transparent;box-shadow:inset 0 0 0 2px var(--lv-red)}
@media (max-width:520px){
  .wk-row{grid-template-columns:1fr}
}

/* ---------- legal workflows: areas you may ask about -----------------------
   These are NOT offered workflows — the copy says they may require a different
   workflow or specialist counsel. So they are deliberately drawn one register
   quieter than every other list on the site: dashed rules, no link, no arrow,
   no card. An index of things to ask about, which is what they are.
   ------------------------------------------------------------------------- */
.areas.wk-asks{grid-template-columns:1fr;border-top-style:dashed;
  margin-top:clamp(18px,2.2vw,30px)}
.areas.wk-asks .area{border-bottom-style:dashed;padding:20px 0}
.areas.wk-asks .area h3{font-size:clamp(18px,1.6vw,20px);font-family:var(--body);
  font-weight:600;letter-spacing:-.005em;color:var(--grey-1)}

/* ---------- a scope note the page must not bury ----------------------------
   .scope is the right weight for an aside under a claim. Twice in this set the
   scope line IS the point — what a record check does not do, and what the
   catalog does not promise — and an aside would bury it. Same amber rule, but
   at display size and given the room of a heading.
   ------------------------------------------------------------------------- */
.wk-scopeline{margin-top:clamp(30px,3.6vw,44px);padding-top:22px;border-top:2px solid var(--amber);
  font-family:var(--display);font-size:clamp(20px,2.2vw,26px);line-height:1.36;
  color:var(--ink);max-width:40ch}


/* ==== layer-50-segments.css ==== */
/* =============================================================================
   layer-50 — the four segment pages, as one ladder
   /solo-founders · /startups · /mid-market · /enterprise

   The four pages are the same company at four sizes, so the components
   escalate with the reader rather than repeating:

     solo        a two-way branch and one boundary panel — softest geometry,
                 rounded, generous, nothing numbered
     startups    a numbered spine — the milestones arrive in order
     growing     a hairline chain of four positions — a team's queue, read
                 left to right, plus the positions they work from
     legal teams numbered governance rows and a measurement frame set on the
                 deep band — the most structured surface on the site

   Everything here is prefixed .sg-. Nothing redefines a core class.
   ========================================================================== */

/* an inline link inside running copy — the core sheet only colours links
   inside .legal prose, and these pages link a phrase mid-sentence */
.sg-il{color:var(--teal);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(23,98,122,.42);
  transition:color .18s ease,text-decoration-color .18s ease}
.sg-il:hover{color:var(--teal-deep);text-decoration-color:var(--teal)}

/* ---------- solo: the boundary ---------------------------------------------
   "You make the business decisions" is reassurance, not fine print, so it is
   a raised panel with two named sides and a rule between them: what FinePrint
   does on one side, what the founder keeps on the other. Teal is the working
   colour, amber marks the founder's side.
   ------------------------------------------------------------------------- */
.sg-bound{margin-top:clamp(30px,4vw,46px);background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-media);padding:clamp(28px,4vw,52px);
  box-shadow:0 34px 64px -46px rgba(12,26,36,.45)}
.band-white .sg-bound{background:var(--paper)}
.sg-sides{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px)}
.sg-side + .sg-side{padding-left:clamp(22px,3vw,40px);border-left:1px solid var(--line)}
.sg-side-t{display:flex;align-items:center;gap:10px;font-size:12.2px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.sg-side-t::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal);flex:none}
.sg-side-you .sg-side-t::before{background:var(--amber)}
.sg-side p{margin-top:15px;font-size:16.6px;line-height:1.72;color:var(--grey-1)}
@media (max-width:760px){
  .sg-sides{grid-template-columns:1fr;gap:24px}
  .sg-side + .sg-side{padding-left:0;border-left:none;border-top:1px solid var(--line);padding-top:24px}
}

/* ---------- legal teams: the permitted perimeter ---------------------------
   The data boundary is an agreement about what is inside it, so it is drawn
   as a dashed enclosure holding the five things the copy names. Dashed, not
   solid: it is agreed per engagement, not a product feature.
   ------------------------------------------------------------------------- */
.sg-perim{margin-top:clamp(22px,2.8vw,30px);border:1.5px dashed var(--grey-4);
  border-radius:18px;padding:20px 22px 24px;max-width:62ch}
.sg-perim-t{font-size:11.8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey-2)}
.sg-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sg-tags li{font-size:14.2px;font-weight:600;color:var(--grey-1);background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-chip);padding:9px 16px}

/* ---------- legal teams: the measurement frame -----------------------------
   Five measures, compared against an agreed baseline. There are no customers
   and no results, so the frame carries the measures and nothing else: no
   figures, no deltas, no empty slots that read as results withheld.
   ------------------------------------------------------------------------- */
.sg-meas{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(13px,1.8vw,20px);
  margin-top:clamp(30px,3.8vw,44px)}
.sg-m{border-top:2px solid var(--line-dark);padding-top:16px}
.sg-m-i{font-family:var(--mono);font-size:11.4px;letter-spacing:.14em;color:var(--teal-lt)}
.sg-m-t{margin-top:9px;font-size:15.6px;font-weight:600;line-height:1.4;color:var(--cream)}
.sg-after{margin-top:clamp(26px,3.2vw,36px);font-family:var(--display);
  font-size:clamp(21px,2.3vw,27px);line-height:1.34;color:var(--cream);max-width:30ch;
  text-wrap:balance}
@media (max-width:1000px){ .sg-meas{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .sg-meas{grid-template-columns:repeat(2,1fr)} }
@media (max-width:400px){ .sg-meas{grid-template-columns:1fr} }


/* ==== layer-56-segments-0924.css ==== */
/* =============================================================================
   layer-56 — 0924 Legal Firewall bands on the segment and work pages
   /enterprise (the 0924 bands on /contracts · /hiring · /startups · /mid-market
   moved to layer-57 in 0924b; what remains here is /enterprise's)

   The shared pieces (.fw-card, .fw-st, .fw-gates, .fw-dev, .fw-ico) live in
   layer-12 and are used as they are. This layer only lays them out:
     - one dark "Firewall" band per work page (.sx-dk), where the log card or
       the policy console sits beside the copy;
     - a quieter light treatment on the two company-size pages, marked with
       the product icon and the in-development tag.
   Everything here is prefixed .sx-. Nothing redefines a core or .fw- class;
   the only reach into them is colour on the dark band.
   ========================================================================== */

/* ---------- the dark Firewall band ---------------------------------------- */
.sx-dk{background:
  radial-gradient(90% 90% at 92% 8%, rgba(245,158,11,.10), transparent 55%),
  radial-gradient(80% 80% at 4% 100%, rgba(23,98,122,.24), transparent 58%),
  var(--deep)}
/* /enterprise follows a deep hero, so its band is set a shade apart with a
   hairline, to read as a second surface rather than a longer hero */
.sx-dk-2{background:
  radial-gradient(90% 90% at 92% 8%, rgba(245,158,11,.09), transparent 55%),
  var(--deep-2);border-top:1px solid var(--line-dark)}
.sx-dk .body-l{color:var(--mist)}
.sx-dk .tlink{color:var(--cream);border-bottom-color:rgba(245,158,11,.6)}
.sx-dk .tlink:hover{color:#FFFFFF;border-bottom-color:var(--amber)}
.sx-dk .shot{border-color:var(--line-dark);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.sx-dk .shot-fig figcaption{color:var(--grey-4)}

/* the mark above a Firewall heading: product icon + eyebrow or dev tag */
.sx-mark{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px}
.sx-mark .fw-ico{width:34px;height:34px}

/* copy beside a card or a screen */
.sx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,5vw,80px);align-items:center}
.sx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;margin-top:clamp(28px,3.4vw,40px)}
.sx-foot .scope{margin-top:0}
@media (max-width:900px){
  .sx-split{grid-template-columns:minmax(0,1fr);gap:40px}
}

/* ---------- /enterprise: the four rule-setting steps ----------------------- */
.sx-rules{list-style:none;margin:clamp(28px,3.4vw,40px) 0 0;padding:0;display:grid;gap:0}
.sx-rule{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;
  padding:18px 0;border-top:1px solid var(--line-dark)}
.sx-rule:last-child{border-bottom:1px solid var(--line-dark)}
.sx-rule-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--amber);
  padding-top:4px}
.sx-rule-t{margin:0;font-size:16.5px;font-weight:600;line-height:1.4;color:var(--cream)}
.sx-rule-d{margin:5px 0 0;font-size:15.6px;line-height:1.6;color:var(--mist)}
/* the policy console is a tall capture; cap it so the column stays a column */
.sx-console{max-width:600px;justify-self:end;width:100%}
@media (max-width:900px){ .sx-console{justify-self:start} }

/* the icon already leads the eyebrow, so its amber dash would be a second mark */
.sx-mark .kick::before{display:none}


/* ==== layer-57-solutions-v19.css ==== */
/* =============================================================================
   layer-57 — the Legal Solutions and segment pages in the v19 deck register
   /contracts · /hiring · /legal-readiness · /agents · /solo-founders ·
   /startups · /mid-market            (0924b, builder D)

   Uses the shared v19 utilities in layer-13 (.v-dark .v-kick .v-photo .v-card
   .v-dash .v-bleed) and the Firewall parts in layer-12. This layer adds only:
     .sv-hero    a dark photographic page hero (full-bleed photo on the right,
                 a strip above the copy on phones)
     .sv-img-*   which v19 photograph a hero uses
     .sv-frame   a product screen framed on navy
     .sv-tile    a navy card that sits on a LIGHT band
     .sv-ring    the amber ring that numbers a step
     .sv-flow    rule → action → decision (slide 22)
     .sv-*       small layout helpers, listed where they are defined
   Everything is prefixed .sv-. Nothing redefines a core, .v- or .fw- class.
   ========================================================================== */

/* ---------- the photographic hero ----------------------------------------
   The plate is a real <img> (build.py ships only images a page's src= names,
   so a CSS background would not be deployed): full-bleed on the right at
   desktop, a strip above the copy on phones, always under a gradient.      */
.sv-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);
  display:flex;align-items:center;min-height:clamp(520px,44vw,660px);
  padding-block:clamp(72px,8vw,120px) clamp(64px,7vw,104px)}
.sv-hero > .wrap{width:100%}
.sv-hero-img{position:absolute;z-index:-2;top:0;bottom:0;right:0;left:36%;
  width:64%;height:100%;object-fit:cover;object-position:50% 50%}
.sv-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--deep) 0%,var(--deep) 36%,rgba(12,26,36,.72) 50%,
    rgba(12,26,36,.26) 76%,rgba(12,26,36,.1) 100%)}
.sv-hero-in{max-width:600px}
.sv-hero h1{max-width:15ch;font-size:clamp(40px,5.2vw,66px);line-height:1.04;color:var(--cream)}
.sv-hero .lede{max-width:52ch;margin-top:24px}
.sv-hero .pull{margin-top:22px;color:var(--cream);max-width:26ch}
.sv-hero .crumbs{margin-bottom:28px}
.sv-hero .cta-row{margin-top:34px}
/* portrait and square plates: hold the lit part of the frame in view */
.sv-hero-img.sv-pos-hi{object-position:50% 30%}

@media (max-width:900px){
  .sv-hero{display:block;min-height:0;padding-top:clamp(230px,56vw,340px)}
  .sv-hero-img{left:0;width:100%;bottom:auto;height:clamp(300px,74vw,440px)}
  .sv-hero::after{background:linear-gradient(180deg,rgba(12,26,36,.18) 0,
    rgba(12,26,36,.55) clamp(150px,40vw,250px),var(--deep) clamp(290px,72vw,430px))}
}

/* ---------- a product screen framed on navy ------------------------------- */
.sv-frame{margin:clamp(34px,4.4vw,56px) 0 0;background:var(--deep);border-radius:20px;
  padding:clamp(12px,2.2vw,30px);box-shadow:0 40px 80px -52px rgba(12,26,36,.7)}
.sv-frame .shot{border-color:var(--line-dark);border-radius:10px}
.sv-frame figcaption{margin-top:14px;font-size:13.2px;line-height:1.6;color:var(--grey-4)}
.v-dark .sv-frame{background:var(--deep-2);border:1px solid var(--line-dark);box-shadow:none}
.sv-frame-tight{margin-top:0}

/* ---------- a navy card on a light band ------------------------------------ */
.sv-tile{background:var(--deep);border:1px solid var(--deep-3);border-radius:16px;
  padding:clamp(24px,2.6vw,34px) clamp(22px,2.4vw,30px) clamp(26px,2.8vw,36px);color:var(--mist)}
.sv-tile h2,.sv-tile h3{color:var(--cream);font-weight:400}
.sv-tile p{color:var(--mist)}
.sv-tile h2 em,.sv-tile h3 em{color:var(--amber-soft)}

/* ---------- the numbered ring ---------------------------------------------- */
.sv-ring{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--amber);color:var(--amber-soft);font-family:var(--display);
  font-size:17px;line-height:1;flex:none}
/* inside a .counsel band amber is a status, so the ring goes to the working colour */
.counsel .sv-ring{border-color:var(--teal-lt);color:var(--teal-lt)}

/* ---------- a row of numbered navy cards ----------------------------------- */
.sv-steps{list-style:none;margin:clamp(30px,3.8vw,48px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.sv-steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sv-steps .v-card,.sv-steps .sv-tile{display:flex;flex-direction:column;gap:18px}
.sv-steps h2,.sv-steps h3{margin:0}
.sv-steps p{margin:0}
.sv-steps .v-card h3{font-size:clamp(21px,1.9vw,25px)}
.sv-steps .sv-tile h2{font-size:clamp(23px,2.2vw,29px);line-height:1.15}
.sv-steps .sv-tile p{font-size:15.6px;line-height:1.66}
.sv-ask{font-family:var(--display);font-style:italic;font-size:clamp(19px,1.7vw,22px);line-height:1.4;
  color:var(--cream)}
.v-dark .sv-steps .v-card p.sv-ask{color:var(--cream)}
@media (max-width:1000px){ .sv-steps-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){ .sv-steps{grid-template-columns:minmax(0,1fr)} .sv-steps.sv-steps-4{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- split: copy beside a plate, a card or a screen ------------------ */
.sv-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,5vw,80px);align-items:center}
.sv-split-w{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.sv-split .v-photo{aspect-ratio:16/10}
.sv-split .v-photo-tall{aspect-ratio:4/5;max-height:560px}
@media (max-width:900px){
  .sv-split,.sv-split-w{grid-template-columns:minmax(0,1fr);gap:36px}
}

/* ---------- head of a dark band: mark + heading + body --------------------- */
.sv-mark{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-bottom:18px}
.sv-mark .fw-ico{width:36px;height:36px}
.sv-mark .v-kick{margin:0}
.sv-lead{max-width:60ch;margin-top:20px}
.v-dark .body-l{color:var(--mist)}
.v-dark .tlink{color:var(--cream);border-bottom-color:rgba(245,158,11,.6)}
.v-dark .tlink:hover{color:#FFFFFF;border-bottom-color:var(--amber)}
.sv-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;margin-top:clamp(28px,3.4vw,40px)}
.sv-foot .scope{margin-top:0}
.sv-room{display:flex;align-items:center;gap:14px;margin-top:clamp(24px,3vw,34px);
  font-weight:600;color:var(--cream)}
.sv-room .fw-ico{width:34px;height:34px}
.v-dark p.sv-room{color:var(--cream)}

/* ---------- /contracts: rule → action → decision (slide 22) ---------------- */
.sv-flow{list-style:none;margin:clamp(34px,4.4vw,56px) 0 0;padding:0;display:grid;
  grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr);align-items:stretch}
.sv-flow .v-card{display:flex;flex-direction:column}
.sv-flow .v-card h3{padding-bottom:16px;border-bottom:1px solid var(--line-dark)}
.sv-flow .v-card-lit h3{color:var(--amber-soft)}
.sv-flow .fw-st{align-self:flex-start;margin-top:18px}
.sv-arrow{display:grid;place-items:center;color:var(--amber)}
.sv-arrow svg{width:30px;height:14px}
.sv-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 0}
.sv-term{border:1px solid var(--line-dark);border-radius:10px;padding:10px 12px 11px}
.sv-term dt{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grey-4);line-height:1.35}
.sv-term dd{margin:5px 0 0;font-family:var(--display);font-size:24px;line-height:1.1;color:var(--cream)}
.sv-flow .v-card .v-num{margin-top:20px;font-size:clamp(40px,4.2vw,58px);line-height:1;color:var(--cream)}
.v-dark .sv-flow .v-card p.sv-cap{margin-top:auto;padding-top:18px;font-size:13px;color:var(--grey-4)}
@media (max-width:960px){
  .sv-flow{grid-template-columns:minmax(0,1fr);gap:0}
  .sv-arrow{height:40px}
  .sv-arrow svg{transform:rotate(90deg)}
}

/* ---------- /hiring: the dashed frame around the held offer ---------------- */
.sv-dash{padding:clamp(16px,2.4vw,28px)}
.sv-dash-k{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber)}
.v-dark p.sv-dash-k{color:var(--amber)}

/* the example band shows the review lanes, so it is a .counsel band: its
   italic phrase and kick stay cream / teal rather than amber */
.v-dark.counsel h2 em{color:var(--cream)}
.v-dark.counsel .v-kick{color:var(--teal-lt)}

/* ---------- solo founders: the fork as two navy tiles ----------------------- */
.sv-fork{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(30px,3.8vw,48px)}
.sv-fork .sv-tile h3{font-size:clamp(23px,2.2vw,29px);line-height:1.15;margin-top:18px}
.sv-fork .sv-tile p{margin-top:14px;font-size:15.8px;line-height:1.68}
.sv-path{font-family:var(--mono);font-size:11.8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-soft)}
@media (max-width:760px){ .sv-fork{grid-template-columns:1fr;gap:13px} }

/* ---------- agents: the four doors as navy tiles --------------------------- */
.sv-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sv-door{display:flex;flex-direction:column;text-decoration:none;transition:border-color .18s ease,transform .18s ease}
.sv-door:hover{border-color:rgba(245,158,11,.55);transform:translateY(-2px)}
.sv-door:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sv-door-ico{width:40px;height:40px;color:var(--amber);margin-bottom:22px}
.sv-door h2{font-size:clamp(23px,2.2vw,29px);line-height:1.15}
.sv-door p{margin-top:12px;font-size:15.6px;line-height:1.66;max-width:46ch}
.sv-door-go{margin-top:auto;padding-top:22px;font-size:14.5px;font-weight:600;color:var(--cream)}
.sv-door-go .arr{color:var(--amber)}
@media (prefers-reduced-motion:reduce){ .sv-door,.sv-door:hover{transition:none;transform:none} }
@media (max-width:640px){ .sv-doors{grid-template-columns:1fr} }

/* ---------- /mid-market: the four gates beside the copy -------------------- */
.fw-gates.sv-gates{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sv-gates .fw-gate{padding:22px 20px 24px}
@media (max-width:520px){ .fw-gates.sv-gates{grid-template-columns:1fr} }

/* two dark bands in a row: a hairline so the second reads as a new surface */
.sv-seam{border-top:1px solid var(--line-dark)}
/* a square plate beside copy */
.sv-split .sv-photo-sq{aspect-ratio:1/1;max-width:520px;justify-self:end;width:100%}
@media (max-width:900px){ .sv-split .sv-photo-sq{justify-self:start;max-width:420px} }


/* ==== layer-58-enterprise-v19.css ==== */
/* =============================================================================
   layer-58-enterprise-v19 — 0924b, builder B
   /enterprise in the v19 deck register, plus three small pieces that
   /legal-firewall shares with it (slide 15 "Counsel sets the rules"):
     .ev-ph      a photograph set behind one side of a dark band, faded into navy
     .ev-ring    numbered steps on amber rings joined by a thin rule
     .ev-crop    a demo capture cropped to its 1140px column and framed on navy
   Enterprise no longer uses the .sx- classes (layer-56); it keeps the .sg-
   hooks of layer-50 for the boundary tags and the measures, and every property
   that matters is re-set here so that file can change without moving this page.
   ========================================================================== */

/* ---------- photo stage ---------- */
.ev-stage{position:relative;isolation:isolate;overflow:hidden}
.ev-stage>.wrap{position:relative;z-index:1}
.ev-ph{position:absolute;top:0;bottom:0;right:0;width:52%;z-index:0;margin:0;pointer-events:none}
.ev-ph img{display:block;width:100%;height:100%;object-fit:cover;opacity:.72}
.ev-ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--deep) 0%,rgba(12,26,36,.55) 34%,rgba(12,26,36,.2) 100%),
             linear-gradient(0deg,rgba(12,26,36,.7) 0%,rgba(12,26,36,0) 30%)}
.v-dark-2 .ev-ph::after{background:linear-gradient(90deg,var(--deep-2) 0%,rgba(18,36,47,.55) 34%,rgba(18,36,47,.2) 100%),
             linear-gradient(0deg,rgba(18,36,47,.7) 0%,rgba(18,36,47,0) 30%)}
.ev-ph-top{bottom:auto;height:min(46%,420px);width:42%}
.ev-ph-top::after{background:linear-gradient(90deg,var(--deep) 0%,rgba(12,26,36,.35) 40%,rgba(12,26,36,.1) 100%),
             linear-gradient(0deg,var(--deep) 0%,rgba(12,26,36,0) 55%)}
@media (max-width:900px){
  .ev-ph,.ev-ph-top{width:100%;height:auto;bottom:0}
  .ev-ph img{opacity:.3}
  .ev-ph::after,.v-dark-2 .ev-ph::after,.ev-ph-top::after{background:linear-gradient(180deg,rgba(12,26,36,.55) 0%,rgba(12,26,36,.92) 70%)}
}

/* ---------- amber-ring steps (deck slide 15) ---------- */
.ev-ring{list-style:none;margin:clamp(28px,3.4vw,40px) 0 0;padding:0;display:grid;gap:0}
.ev-ring-i{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 14px;
  padding:0 0 26px;border:0}
.ev-ring-i:last-child{padding-bottom:0}
.ev-ring-i::before{content:"";position:absolute;left:9px;top:24px;bottom:-2px;width:1px;background:rgba(245,158,11,.35)}
.ev-ring-i:last-child::before{display:none}
.ev-ring-n{display:block;width:20px;height:20px;border-radius:50%;border:2px solid var(--amber);margin-top:3px;
  font-size:0;line-height:0;color:transparent;letter-spacing:0;padding:0;background:transparent}
.ev-ring-i:last-child .ev-ring-n{background:var(--amber)}
.ev-ring-t{margin:0;font-size:17.5px;font-weight:600;line-height:1.4;color:var(--cream)}
.ev-ring-d{margin:5px 0 0;font-size:15.6px;line-height:1.6;color:var(--mist)}

/* ---------- a demo capture framed on navy ---------- */
.ev-screen{margin:0;min-width:0}
.ev-crop{overflow:hidden;border-radius:10px;border:1px solid var(--line-dark);background:var(--sand);
  box-shadow:0 40px 80px -36px rgba(0,0,0,.75)}
.ev-crop img{display:block;width:126.32%;max-width:none;height:auto;margin-left:-13.16%;border:0;border-radius:0;box-shadow:none}
.ev-screen figcaption{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--grey-4)}

/* ---------- /enterprise ---------- */
/* hero */
.ev-hero{padding-block:clamp(64px,8vw,120px) clamp(64px,8vw,116px)}
.ev-hero h1{max-width:15ch;font-size:clamp(40px,5.2vw,68px);line-height:1.04;letter-spacing:-.015em;margin-top:26px}
.ev-hero .lede{max-width:52ch;margin-top:26px;color:var(--mist)}
.ev-hero .cta-row{margin-top:34px}
.ev-hero .ev-ph{width:50%}
.ev-hero .ev-ph img{object-position:50% 40%}

/* Counsel sets the rules */
.ev-counsel{padding-block:clamp(72px,9vw,128px)}
.ev-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,88px);align-items:center}
.ev-mark{display:flex;align-items:center;gap:14px}
.ev-mark .fw-ico{width:38px;height:38px}
.ev-mark .v-kick{margin:0}
.ev-counsel h2{margin-top:26px;font-size:clamp(34px,3.6vw,52px);line-height:1.08;max-width:20ch}
.ev-counsel .deck{margin-top:22px;max-width:40ch;color:var(--mist)}
.ev-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;margin-top:clamp(36px,4vw,52px);
  padding-top:22px;border-top:1px solid var(--line-dark)}
.ev-foot .scope{margin:0}
.ev-foot .tlink{color:var(--cream);border-bottom-color:rgba(245,158,11,.6)}
.ev-foot .tlink:hover{color:#FFFFFF;border-bottom-color:var(--amber)}

/* the engagement and the controls: one light reading band */
.ev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,26px);margin-top:clamp(34px,4vw,52px)}
.ev-item{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:clamp(24px,2.6vw,34px)}
.ev-item-m{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-ink);margin-bottom:18px}
.ev-item p{margin-top:14px;font-size:16px;line-height:1.7;color:var(--grey-1)}
.ev-item .scope{margin-top:16px}
.ev-item .tlink{margin-top:18px}
.ev-read-rule{margin:clamp(40px,5vw,60px) 0 0;border:0;border-top:1px solid rgba(16,30,40,.14)}
/* the agreed-before list keeps its layer-50 hooks; re-set here */
.ev-item .sg-perim{margin-top:20px;padding:16px 18px;border:1px dashed rgba(199,124,5,.55);border-radius:10px;background:var(--paper)}
.ev-item .sg-perim-t{margin:0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2)}
.ev-item .sg-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0}
.ev-item .sg-tags li{font-size:13.5px;font-weight:600;color:var(--ink);background:var(--sand);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px}

/* Measure before expanding */
.ev-measure{padding-block:clamp(72px,9vw,128px)}
.ev-measure h2{margin-top:6px;font-size:clamp(36px,4.2vw,56px);line-height:1.06;max-width:20ch}
.ev-measure .deck{margin-top:22px;max-width:46ch;color:var(--mist)}
.ev-measure .sg-meas{list-style:none;margin:clamp(36px,4.4vw,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:none}
.ev-measure .sg-m{background:rgba(12,26,36,.78);border:1px solid var(--line-dark);border-radius:14px;padding:20px 18px 22px;
  display:block;border-top-width:1px}
.ev-measure .sg-m-i{display:block;font-family:var(--display);font-size:38px;line-height:1;color:var(--amber-soft)}
.ev-measure .sg-m-t{margin:18px 0 0;font-size:15.5px;font-weight:600;line-height:1.35;color:var(--cream)}
.ev-measure .sg-after{margin:28px 0 0;font-family:var(--display);font-size:clamp(22px,2.2vw,28px);line-height:1.25;color:var(--cream)}
.ev-measure .cta-row{margin-top:30px}
.ev-measure .ev-ph img{object-position:50% 60%}

@media (max-width:1000px){
  .ev-measure .sg-meas{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .ev-split{grid-template-columns:minmax(0,1fr);gap:40px}
  .ev-hero .ev-ph{width:100%}
}
@media (max-width:640px){
  .ev-grid{grid-template-columns:minmax(0,1fr)}
  .ev-measure .sg-meas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-hero .btn{width:100%;justify-content:center}
}
.ev-kick-2{margin-top:clamp(28px,3.4vw,40px)}
.ev-read .ev-grid{margin-top:20px}
.ev-item h2{font-size:clamp(26px,2.5vw,34px);line-height:1.12;max-width:18ch}


/* ==== layer-59-solutions-0925.css ==== */
/* =============================================================================
   layer-59-solutions-0925 — the Solutions pages on the homepage's footing
   /startups · /mid-market · /solo-founders · /contracts · /hiring ·
   /legal-readiness · /agents                                   (0925, group C)

   The founder's rules for the 0925 homepage apply here: web prose in short
   paragraphs, headings that are plain sentences, no hedging lines. So this
   layer is mostly a reading column beside a picture:
     .sl5-g      text beside a figure (screen, photo or record list)
     .sl5-p      a body paragraph in that column
     .sl5-steps  "what FinePrint does, step by step" — numbered sentences
     .sl5-tasks  a short list of task pages, each a sentence and a link
     .sl5-fs     the FineShield band (redline capture from the homepage)
     .sl5-cat    the /agents catalogue, grouped by area
   Reuses .sv-hero (layer-57), .hv-h2 / .hv-screen (layer-27), .h5-shot (layer-28),
   .v-photo / .v-kick (layer-13), .fw-card (layer-12), .wk-rec (layer-40).
   Every class here starts with .sl5-.
   ========================================================================== */

/* ---------- text beside a figure ------------------------------------------ */
.sl5-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4.6vw,76px);align-items:center}
.sl5-g-top{align-items:start}
.sl5-g-wide{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.sl5-g-wl{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.sl5-g-flip > :first-child{order:2}
.sl5-g .v-photo{aspect-ratio:4/3}
.sl5-g .hv-screen{margin:0}
@media (max-width:960px){
  .sl5-g,.sl5-g-wide,.sl5-g-wl{grid-template-columns:minmax(0,1fr)}
  .sl5-g-flip > :first-child{order:0}
}

.sl5-p{margin-top:16px;max-width:60ch;font-size:17px;line-height:1.7;color:var(--grey-1)}
.hv-h2 + .sl5-p{margin-top:22px}
.v-dark .sl5-p,.band-deep .sl5-p{color:var(--mist)}
.sl5-g .cta-row,.sl5-head .cta-row{margin-top:clamp(24px,3vw,32px)}
.sl5-head{max-width:860px;margin-bottom:clamp(30px,4vw,52px)}

/* ---------- step by step, in sentences ------------------------------------ */
.sl5-steps{list-style:none;padding:0;counter-reset:sl5;display:grid;gap:0;margin-top:clamp(22px,2.6vw,30px)}
.sl5-steps li{counter-increment:sl5;display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;
  padding:18px 0;border-top:1px solid var(--line)}
.sl5-steps li:last-child{border-bottom:1px solid var(--line)}
.sl5-steps li::before{content:counter(sl5);display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;border:1.5px solid var(--amber);color:var(--amber-ink);
  font-size:13px;font-weight:700;margin-top:1px}
.sl5-steps p{font-size:16.5px;line-height:1.65;color:var(--grey-1)}
.sl5-steps b{color:var(--ink);font-weight:600}

/* ---------- task pages listed on a segment page --------------------------- */
.sl5-tasks{list-style:none;padding:0;display:grid;gap:12px}
.sl5-task{display:block;padding:20px 22px 20px;border-radius:14px;background:var(--paper-2);border:1px solid var(--line);
  text-decoration:none;transition:border-color .18s ease}
.sl5-task:hover{border-color:var(--amber)}
.sl5-task h3{font-size:clamp(20px,1.8vw,23px);line-height:1.2}
.sl5-task p{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--grey-1)}
.sl5-task .arr{color:var(--amber-ink)}
@media (prefers-reduced-motion:reduce){ .sl5-task{transition:none} }

/* ---------- the FineShield band -------------------------------------------- */
.sl5-fs .sl5-head .sl5-p{max-width:66ch}
.sl5-fs .h5-shot-d{margin-top:0}
.sl5-fs-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(26px,3vw,36px)}
.sl5-fs-foot .sl5-p{margin-top:0;max-width:62ch;color:var(--cream)}
.sl5-fs .fw-card{max-width:560px}
.sl5-mark{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sl5-mark .fw-ico{width:34px;height:34px}
.sl5-mark .v-kick{margin:0}

/* ---------- /agents: the catalogue ------------------------------------------ */
.sl5-cat{display:grid;gap:0;border-top:1px solid var(--line)}
.sl5-area{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,64px);
  padding:clamp(30px,3.6vw,46px) 0;border-bottom:1px solid var(--line)}
.sl5-area h2{font-size:clamp(26px,2.8vw,36px);line-height:1.1;max-width:18ch}
.sl5-area .sl5-p{margin-top:14px;font-size:16px;max-width:48ch}
.sl5-n{display:block;margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink)}
.sl5-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:18px}
.sl5-work{list-style:none;padding:0;columns:2;column-gap:28px;align-self:start}
.sl5-work li{break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.45;color:var(--ink)}
@media (max-width:900px){ .sl5-area{grid-template-columns:minmax(0,1fr)} }
@media (max-width:520px){ .sl5-work{columns:1} }

/* ---------- /legal-readiness: the record after the check (uses .wk-rec) ---- */
.sl5-rec{margin:0;padding:clamp(18px,2.2vw,28px);border-radius:18px;background:var(--paper);border:1px solid var(--line)}
.sl5-rec .wk-rec{margin-top:16px}
.sl5-rec-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2)}


/* ==== layer-60-why.css ==== */
/* =============================================================================
   layer 60 — "Why FinePrint": the six reason-to-believe pages
   (fineprint-lm · answerloop · trust-score · legal-room · security · counsel)

   These pages are read by a sceptic: a founder who has been burned, or a lawyer
   checking whether this is serious. Precision is the aesthetic, so this layer
   adds drawings of real mechanisms and nothing decorative:

     · .wy2-split   the two-corpus figure — the company's record and the shared
                    training corpus as two separate bodies of material, with the
                    only path between them running through a gate. Used on
                    /fineprint-lm and /security, which make the same claim.
     · .wy2-stop    the one sentence /fineprint-lm must not let a reader skim
                    past ("One correction does not immediately change the live
                    model.").
     · .alx-      /answerloop, AnswerLoop's front door: the lawyer invitation
                    on the left of the hero and the sign-in / sign-up card on
                    its right, over one light band that says what AnswerLoop is.
     · .wy2-contact the two contact addresses at the foot of /security, set for
                    a deep band (.small is grey-2 and would fail contrast there).

   Prefix: .wy2-  (.wy in core.css is the yellow matter-risk word colour and is
   not ours). No animation is introduced here, so there is no reduced-motion
   override to match.
   ========================================================================== */

/* ---------- figures shared by this layer ---------------------------------- */
.wy2-fig{margin-top:clamp(34px,4.6vw,54px)}
.wy2-fig > figcaption{margin-top:20px;font-size:15px;line-height:1.68;
  color:var(--grey-2);max-width:64ch}

/* ---------- the two-corpus figure ------------------------------------------
   Three tracks: a body of material, the gate, a body of material. The gate is
   the only thing between them and it is drawn as a gate — dashed edge, the
   conditions listed inside it, one direction of travel. At 860px the three
   tracks stack and the arrow turns to point down the page.
   ------------------------------------------------------------------------- */
.wy2-split{display:grid;grid-template-columns:1fr minmax(190px,248px) 1fr;
  gap:clamp(14px,2vw,24px);align-items:stretch}
.wy2-body{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;
  padding:26px 24px 28px;display:flex;flex-direction:column}
.band-white .wy2-body{background:var(--paper)}
.wy2-body .kick{margin-bottom:18px}
.wy2-body .small{margin-top:auto;padding-top:20px;max-width:34ch}

.wy2-chips{display:flex;flex-wrap:wrap;gap:8px}
.wy2-chips li{font-size:13.6px;line-height:1.25;color:var(--grey-1);
  background:var(--sand);border-radius:var(--r-chip);padding:8px 14px}
.band-sand .wy2-chips li{background:var(--sand-2)}

.wy2-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:24px 16px;border-radius:20px;
  border:1px dashed var(--grey-4)}
.wy2-gate-k{font-size:11.8px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-deep)}
.wy2-gate-steps{display:grid;gap:8px;width:100%}
.wy2-gate-steps li{font-size:13.8px;line-height:1.45;color:var(--grey-1);
  background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px}
.band-white .wy2-gate-steps li{background:var(--paper)}
.wy2-arrow{display:block;width:100%;max-width:118px;height:auto;color:var(--grey-3)}

@media (max-width:860px){
  .wy2-split{grid-template-columns:1fr}
  /* rotating a 118×24 box leaves its own height at 24px, so the margin here
     replaces the 58px the rotated arrow actually occupies */
  .wy2-arrow{max-width:58px;margin:22px auto;transform:rotate(90deg)}
}

/* ---------- the sentence that must not be skimmed ---------- */
.wy2-stop{margin-top:clamp(22px,3vw,32px);padding:24px 26px;border-radius:18px;
  background:var(--sand);border:1px solid var(--line);font-family:var(--display);
  font-size:clamp(20px,2.1vw,25px);line-height:1.34;color:var(--ink);max-width:32ch}
.band-sand .wy2-stop{background:var(--paper-2)}

/* =============================================================================
   0920 · /answerloop is AnswerLoop's front door
   -----------------------------------------------------------------------------
   The founder's instruction: this page is "the login and description page for
   AnswerLoop", with the sign-in / sign-up box on the right of the hero. So the
   hero is a two-column split — the description on the left, a light card on the
   deep band to its right — and the ring figure and the "Keep individual review
   visible" section are gone.

   The card has two faces and no JavaScript. `#signup` is hidden by default and
   revealed by :target, and because it precedes `#signin` in the DOM it can hide
   it with a sibling combinator. That means /answerloop#signup opens on the
   application and /answerloop or /answerloop#signin opens on sign-in — the two
   anchors the platform has always linked (server/util.js landingCard). The tab
   states use :has(), which only decorates: with no :has() both tabs simply
   render alike and every control still works.

   The sign-in form posts cross-site to answerloop.fineprintlm.ai/signin. That
   door is open by design, not by accident — server/auth.js authorises POST
   /signin from exactly this origin (landingPostAllowed), and the site's CSP
   already allows `form-action https://answerloop.fineprintlm.ai`. There is no
   password handling here: the field goes straight to the platform.
   ========================================================================== */
.alx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(348px,404px);
  gap:clamp(34px,4.4vw,62px);align-items:start}
.alx-hero h1{max-width:16ch}
.alx-hero .lede{max-width:50ch}
.alx-hero .scope{max-width:54ch}

 /* the three lines under the description, on the light band below the hero */
.alx-points{list-style:none;margin:clamp(26px,3.2vw,34px) 0 0;padding:0;
  display:grid;gap:11px}
.alx-points li{position:relative;padding-left:26px;font-size:15.8px;
  line-height:1.55;color:var(--grey-1)}
.alx-points li::before{content:"";position:absolute;left:0;top:.62em;
  width:11px;height:2px;background:var(--teal)}

.alx-cust{margin-top:clamp(26px,3vw,32px);display:flex;flex-wrap:wrap;
  align-items:center;gap:8px 12px}
.alx-cust-k{font-size:11.8px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--teal)}

/* ---------- the card ---------- */
.alx-card{background:var(--paper-2);border:1px solid var(--line);border-radius:22px;
  padding:clamp(24px,2.5vw,30px);box-shadow:0 34px 70px -40px rgba(4,12,18,.75);
  scroll-margin-top:calc(var(--navh) + 20px)}
.alx-mark{margin:0 0 16px;font-family:var(--display);font-size:20px;
  line-height:1;color:var(--teal)}
.alx-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;
  background:var(--sand);border-radius:var(--r-chip)}
.alx-tab{padding:9px 10px;border-radius:var(--r-chip);text-align:center;
  font-size:14.4px;font-weight:600;color:var(--grey-2);text-decoration:none;
  transition:background .2s ease,color .2s ease}
.alx-tab:hover{color:var(--ink)}
.alx-card:has(#signin) .alx-tab-in,
.alx-card:has(#signup:target) .alx-tab-up{background:var(--paper-2);color:var(--ink);
  box-shadow:0 2px 8px -4px rgba(12,26,36,.5)}
.alx-card:has(#signup:target) .alx-tab-in{background:none;color:var(--grey-2);
  box-shadow:none}

.alx-face{padding-top:clamp(20px,2.2vw,26px);
  /* the :target jump lands on the face, so its scroll margin has to clear the
     sticky nav AND the card's own head (mark + tabs) — otherwise switching to
     Sign up scrolls the tabs you just used off the top of the window. */
  scroll-margin-top:calc(var(--navh) + 176px)}
#signup.alx-face{display:none}
#signup.alx-face:target{display:block}
#signup.alx-face:target ~ #signin.alx-face{display:none}

.alx-h{margin:0;font-family:var(--display);font-size:clamp(23px,2.3vw,28px);
  line-height:1.16;font-weight:400;color:var(--ink)}
.alx-sub{margin:10px 0 0;font-size:14.6px;line-height:1.62;color:var(--grey-2)}
.alx-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.alx-list li{position:relative;padding-left:22px;font-size:14.4px;line-height:1.55;
  color:var(--grey-1)}
.alx-list li::before{content:"";position:absolute;left:0;top:.6em;width:9px;
  height:2px;background:var(--teal)}

.alx-form{display:grid;gap:14px;margin-top:20px}
.alx-go{width:100%;justify-content:center;margin-top:20px}
.alx-form .alx-go{margin-top:4px}
.alx-alt{margin:16px 0 0;font-size:13.6px;line-height:1.6;color:var(--grey-2)}
.alx-alt .tlink{font-size:13.6px}
.alx-sep{padding:0 3px;color:var(--grey-4)}

@media (max-width:1080px){
  .alx-grid{grid-template-columns:minmax(0,1fr) minmax(318px,364px);
    gap:clamp(26px,3vw,40px)}
}
@media (max-width:900px){
  .alx-grid{grid-template-columns:1fr}
  .alx-card{max-width:520px}
  .alx-hero h1,.alx-hero .lede{max-width:none}
}

/* ---------- contact addresses on a deep band ---------- */
.wy2-contact{margin-top:clamp(26px,3.2vw,34px);font-size:15px;line-height:1.9;
  color:var(--mist)}
.wy2-contact a{color:var(--cream);text-decoration:none;
  border-bottom:1px solid rgba(236,237,234,.38)}
.wy2-contact a:hover{border-bottom-color:var(--cream)}

/* ---------- two scoped corrections, with reasons --------------------------- */
/* /trust-score has no group heading for the three lanes in the approved copy,
   so each lane carries the section's <h2> instead of an <h3>. Core sizes the
   lane heading through `.level h3`; this is the same size for the h2 form. */
.levels h2{font-size:clamp(22px,2.2vw,27px);line-height:1.2;max-width:30ch}
/* `.level p` (class + element) outranks `.scope` (class), so a scoping aside
   inside a lane loses its treatment. Restored here at matching specificity. */
.level .scope{margin-top:16px;font-size:14.6px;line-height:1.68;color:var(--grey-2)}


/* ==== layer-61-product-0925a.css ==== */
/* =============================================================================
   layer-61-product-0925a — Product I pages on the homepage's footing:
   /how-it-works /counsel /legal-room /security.   Prefix: .pa5-
   0925 (founder, 2026-09-24): "update all other pages" the way the homepage was
   rebuilt — web prose in short paragraphs, plain-sentence headings, no hedging
   captions, fewer sections. Builds on layer-67 (.pv-hero .pv-ic .pv-panel
   .pv-toc), layer-27 (.hv-h2) and layer-20 (.h2x-hand); figures (wf-, lc-) are
   placed, never redrawn.
   ========================================================================== */

/* ---------- prose ------------------------------------------------------------ */
.pa5-head{max-width:860px}
.pa5-head .hv-h2{max-width:28ch}
.pa5-lede{margin-top:20px;max-width:62ch;font-size:clamp(17px,1.4vw,19.5px);line-height:1.6;color:var(--grey-1)}
.pa5-p{margin-top:16px;max-width:60ch;font-size:16.5px;line-height:1.7;color:var(--grey-1)}
.pa5-lede + .pa5-p{margin-top:18px}
.pa5-q{font-family:var(--display);font-style:italic;font-size:1.08em;color:var(--ink)}
.pa5-dark .pa5-lede,.pa5-dark .pa5-p{color:var(--mist)}
.pa5-dark .pa5-q{color:var(--cream)}
.pa5-dark .hv-h2{color:var(--cream)}
.pa5-dark .hv-h2 em{color:var(--amber-soft)}
.pa5-kick{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.pa5-kick .v-kick{margin:0}
.pa5-sec .cta-row{margin-top:clamp(24px,2.8vw,34px)}
.pa5-sec .tlink{margin-top:22px}

/* ---------- text beside a product screen ------------------------------------- */
.pa5-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,4.6vw,76px);align-items:center}
.pa5-split + .pa5-split{margin-top:clamp(64px,8vw,112px)}
.pa5-split .hv-h2{font-size:clamp(28px,3vw,42px);max-width:22ch}
.pa5-flip > .pa5-shot{order:-1}
.pa5-shot{margin:0;padding:clamp(6px,.9vw,12px);border-radius:20px;background:var(--deep);
  box-shadow:0 40px 80px -46px rgba(12,26,36,.7)}
.pa5-shot img{display:block;width:100%;height:auto;border-radius:12px}
.pa5-dark .pa5-shot{background:var(--deep-2);border:1px solid var(--line-dark);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
@media (max-width:900px){
  .pa5-split{grid-template-columns:minmax(0,1fr)}
  .pa5-flip > .pa5-shot{order:0}
}

/* ---------- /how-it-works: the four steps ------------------------------------ */
.pa5-steps{list-style:none;padding:0;margin-top:clamp(40px,5vw,64px)}
.pa5-step{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:clamp(12px,2vw,28px);
  padding-block:clamp(48px,6vw,84px);border-top:1px solid var(--line)}
.pa5-step:first-child{border-top:none;padding-top:0}
.pa5-step:last-child{padding-bottom:0}
.pa5-n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--amber);color:var(--amber-deep);font-family:var(--display);font-size:22px;line-height:1}
.pa5-step .pa5-split .hv-h2{margin-top:0}
.pa5-step-fig{grid-column:2;margin-top:clamp(36px,4.4vw,56px)}
@media (max-width:640px){
  .pa5-step{grid-template-columns:minmax(0,1fr)}
  .pa5-n{margin-bottom:18px}
  .pa5-step-fig{grid-column:1}
}

/* ---------- a FineShield story on a dark band -------------------------------- */
.pa5-fs .pa5-shot{margin-top:clamp(30px,3.6vw,48px)}
.pa5-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(26px,3vw,40px)}
.pa5-cols .pa5-p{margin-top:0}
@media (max-width:820px){ .pa5-cols{grid-template-columns:minmax(0,1fr)} }

/* ---------- /how-it-works: the contract, told in five sentences --------------- */
.pa5-hand .h2x-hand h3{font-family:var(--body);font-size:17px;font-weight:700;letter-spacing:0}

/* ---------- links to the parts ----------------------------------------------- */
.pa5-parts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,34px)}
.pa5-parts a{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;
  border:1px solid var(--line-dark);background:rgba(12,26,36,.55);color:var(--cream);font-size:14.5px;font-weight:600;text-decoration:none}
.pa5-parts a:hover{border-color:rgba(236,237,234,.42)}
.pa5-parts img{width:28px;height:28px;display:block}

/* ---------- /legal-room: the four statuses as sentences ---------------------- */
.pa5-keys.keys{margin-top:clamp(28px,3.4vw,40px)}
@media (max-width:900px){ .pa5-keys.keys{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .pa5-keys.keys{grid-template-columns:minmax(0,1fr)} }

/* the FineShield log entries beside their explanation */
.pa5-log{display:grid;gap:12px}

/* ---------- a light closing band --------------------------------------------- */
.pa5-close .hv-h2{max-width:32ch}
.pa5-close .pa5-lede{max-width:58ch}

.pa5-sep .wy2-fig{margin-top:clamp(30px,3.6vw,46px)}
.pa5-excerpt{max-width:600px;justify-self:end}
.pv-panel .pa5-kick .v-kick{color:var(--amber)}
@media (max-width:900px){ .pa5-excerpt{justify-self:start} }
.pa5-h3{font-family:var(--body);font-size:17px;font-weight:700;line-height:1.35;color:var(--ink)}
.pa5-h3 + .pa5-p{margin-top:10px}
@media (min-width:901px){ .pa5-step .pa5-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)} }


/* ==== layer-62-product-0925b.css ==== */
/* =============================================================================
   layer-62-product-0925b — Product II pages on the homepage's footing (0925).
   Prefix: .pb5-   Owner: 0925 Product II (fineprint-lm, answerloop, trust-score).
   Web prose, not slide fragments: one argument per page, no hedging captions.
   Builds on core (.levels, .pd-chain), layer-13 (.v-*), layer-27 (.hv-*),
   layer-60 (.alx-*) and layer-67 (.pv-*). Loaded before layer-66/67, so rules
   that must beat them carry a second class.
   ========================================================================== */

/* ---------- heroes ------------------------------------------------------------ */
.pv-hero h1.pb5-h1{max-width:17ch;font-size:clamp(38px,5vw,64px);line-height:1.04}
.alx-hero h1.pb5-alh1{max-width:17ch;font-size:clamp(38px,4.5vw,60px);line-height:1.04}
.alx-hero .pb5-alsub{margin-top:18px;max-width:50ch;font-size:15.5px;line-height:1.6;color:var(--cream)}

/* ---------- section heads and prose ------------------------------------------- */
.pb5-head{max-width:860px;margin-bottom:clamp(30px,3.8vw,48px)}
.pb5-head .hv-h2{max-width:26ch}
.pb5-p{margin-top:16px;max-width:64ch;font-size:16.5px;line-height:1.68;color:var(--grey-1)}
.v-dark .pb5-led{margin-top:20px;max-width:60ch;color:var(--mist)}
.pb5-narrow{max-width:860px}
.pb5-narrow .hv-h2{max-width:26ch}
.pb5-narrow .body-l{max-width:64ch}
.pb5-narrow .cta-row{margin-top:26px;gap:12px 28px}
.pb5-h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.12;color:var(--ink)}
.v-dark .pb5-h3{color:var(--cream)}

/* ---------- step chains (a sentence per step, so smaller than the deck's) ----- */
.pd-chain.pb5-chain{margin-top:6px}
.pb5-chain .pd-chain-t{font-size:clamp(18px,1.6vw,21px);line-height:1.35}
.pb5-note{margin-top:20px;max-width:52ch;font-size:15.5px;line-height:1.62}
.v-dark p.pb5-note{color:var(--mist)}
.pb5-note + .tlink{margin-top:20px}
.pv-al-grid .pb5-h3 + .pd-chain{margin-top:18px}

/* ---------- FinePrint LM: why it matters ------------------------------------- */

.pb5-list{list-style:none;padding:0;margin-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
.pb5-list li{padding:16px 0 16px 22px;border-bottom:1px solid var(--line);position:relative;
  font-size:16px;line-height:1.62;color:var(--grey-1)}
.pb5-list li::before{content:"";position:absolute;left:0;top:24px;width:10px;height:2px;background:var(--amber)}
.pb5-list b{color:var(--ink);font-weight:700}

/* ---------- closes ------------------------------------------------------------- */
.band-deep p.pb5-offer{margin-top:18px;font-size:14px;color:var(--grey-4)}

/* ---------- AnswerLoop: the review screen ------------------------------------- */
.pb5-shot{margin:0;padding:clamp(6px,.8vw,10px);border-radius:20px;background:var(--deep);
  border:1px solid var(--line-dark);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.pb5-shot img{display:block;width:100%;height:auto;border-radius:12px}
.pv-al-grid.pb5-al{margin-top:clamp(40px,5vw,64px)}
.pb5-al .pb5-h3 + .body-l{margin-top:14px}

/* ---------- trust and review: the three paths -------------------------------- */
.levels.pb5-levels{margin-top:0}
.pb5-levels .level h3{max-width:46ch;line-height:1.22}
.pb5-levels .level h3 b{font-family:var(--display);font-weight:400}

/* ---------- trust and review: what the company sees -------------------------- */
.pb5-see{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4.4vw,68px);align-items:start}
.pb5-see + .pb5-see{margin-top:clamp(44px,5.6vw,76px)}
.pb5-see-t p{margin-top:14px;max-width:48ch;font-size:16.5px;line-height:1.68;color:var(--grey-1)}
.pb5-see-f{margin:0}

@media (max-width:900px){
  .pb5-see{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  /* the product screens are wide: on a phone they scroll sideways at a readable size */
  .pb5-shot{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pb5-shot img{width:720px;max-width:none}
  .pb5-see-f .hv-screen-f{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pb5-see-f .hv-screen-f img{width:640px;max-width:none}
  .pv-hero h1.pb5-h1{font-size:clamp(34px,9vw,44px)}
}

/* a list beside a picture starts level with it */
.pb5-see .pb5-list{margin-top:0}


/* ==== layer-63-fineshield-0925.css ==== */
/* =============================================================================
   layer-63-fineshield-0925 — /fineshield and /enterprise on the homepage's footing.
   Prefix: .fs5-   Owner: 0925 (pages/fineshield.html, pages/enterprise.html). 0927: /fineshield adds css/page/fs7.css.
   Web prose, not slide fragments: the FineShield page is the full version of the
   homepage's #fineshield story, the enterprise page the full version of #legal-teams.
   Reuses layer-28 (.h5-case, .h5-fix, .h5-shot, .h5-steps, .h5-map, .h5-sys, .h5-ent-g),
   layer-27 (.hv-h2, .hv-head), layer-13 (.v-photo, .v-bleed, .v-kick), layer-12 (.fw-card, .fw-st).
   ========================================================================== */

/* ---------- hero: one wide column over the photograph ------------------------ */
.fs5-hero .hero-in.fs5-hero-in{max-width:var(--maxw)}
.fs5-hero h1{max-width:20ch;font-size:clamp(40px,5.6vw,78px);line-height:1}
.fs5-hero .deck{margin-top:24px;max-width:60ch;color:#D6DCE0}
.fs5-hero .crumbs{margin-bottom:26px}
.fs5-hero-e .hero-img{object-position:50% 70%}
.fs5-mark{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.fs5-mark .fw-ico{width:34px;height:34px;flex:none}
.fs5-mark .v-kick{margin:0}

/* ---------- prose: short paragraphs a reader follows ------------------------- */
.fs5-prose > p{margin-top:16px;max-width:62ch;font-size:17px;line-height:1.7;color:var(--grey-1)}
.fs5-prose > h2 + p{margin-top:24px}
.fs5-prose > h3{margin-top:clamp(30px,3.4vw,42px);font-family:var(--display);font-weight:400;
  font-size:clamp(25px,2.4vw,32px);line-height:1.1;color:var(--ink)}
.fs5-prose > h3:first-child{margin-top:0}
.fs5-prose-d > p{color:var(--mist)}
.fs5-prose-d > h3{color:var(--cream)}

.fs5-cols{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,88px);align-items:start}
.fs5-cols .fs5-prose > p:first-child{margin-top:6px}
.fs5-strip{margin-top:clamp(36px,4.4vw,60px);aspect-ratio:2172/329;border-radius:14px;
  box-shadow:0 30px 60px -40px rgba(12,26,36,.6)}

/* ---------- the $90,000 reply: the homepage story, tighter under its H2 ------ */
.h5-case.fs5-case{margin-top:clamp(28px,3.4vw,48px)}

/* ---------- three channels (sand) --------------------------------------------- */
.fs5-ch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.fs5-ch-c{padding:clamp(22px,2.4vw,32px);border-radius:18px;background:var(--paper-2);border:1px solid var(--line);
  box-shadow:0 24px 50px -40px rgba(12,26,36,.45)}
.fs5-ch-c h3{margin-top:18px;font-family:var(--display);font-weight:400;font-size:clamp(24px,2.1vw,29px);line-height:1.12;color:var(--ink)}
.fs5-ch-c > p:last-child{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--grey-1)}

/* ---------- what it checks, who decides (deep) -------------------------------- */
.fs5-h2w{max-width:30ch}
.fs5-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,80px)}
.fs5-two > div{padding-top:24px;border-top:1px solid var(--line-dark)}

/* ---------- connect + what it keeps (white) ----------------------------------- */
.fs5-conn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.fs5-shot{margin:0}
.fs5-shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 40px 80px -48px rgba(12,26,36,.55)}

/* ---------- FAQ -------------------------------------------------------------- */
.fs5-faq-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start}
.faq.fs5-faq{margin-top:0}
.fs5-faq a{color:var(--teal-deep)}

/* ---------- close (photograph, dark) ----------------------------------------- */
.fs5-close{--img:url(/img/v19/notebook-lamp.jpg);color:var(--mist)}
.fs5-close::before{background-position:70% 50%}
.fs5-close-e{--img:url(/img/v19/storefront.jpg)}
.fs5-close .close-h{margin-top:4px;max-width:22ch}
.fs5-close-d{margin-top:20px;max-width:56ch}

/* ---------- enterprise: text beside a picture --------------------------------- */
.fs5-media{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,84px);align-items:center}
.fs5-media.fs5-media-r{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.fs5-ph{aspect-ratio:1/1;box-shadow:0 40px 80px -48px rgba(12,26,36,.7)}
.fs5-ph.fs5-ph-t{aspect-ratio:4/5}

/* ---------- enterprise: the rules that already exist (sand) ------------------ */
.fs5-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin:0}
.fs5-dl > div{padding-top:20px;border-top:2px solid var(--ink)}
.fs5-dl dt{font-family:var(--display);font-size:clamp(24px,2.2vw,30px);line-height:1.1;color:var(--ink)}
.fs5-dl dd{margin:12px 0 0;font-size:15.8px;line-height:1.68;color:var(--grey-1)}
.fs5-note{margin-top:clamp(36px,4.4vw,56px);max-width:58ch;padding-left:20px;border-left:3px solid var(--amber);
  font-family:var(--display);font-size:clamp(21px,2vw,27px);line-height:1.3;color:var(--ink)}

/* ---------- enterprise: FineShield in the channels (deep) --------------------- */
.h5-map.fs5-map{margin-top:clamp(6px,1vw,14px)}
.fs5-redline{margin-top:clamp(40px,5vw,68px)}

/* ---------- enterprise: the log, drawn in HTML (white) ------------------------ */
.fs5-log{display:grid;gap:12px;padding:clamp(18px,2vw,26px);border-radius:20px;background:var(--deep);
  border:1px solid var(--deep-3);box-shadow:0 40px 80px -48px rgba(12,26,36,.7)}
.fs5-log-k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-4)}
.fs5-log .fw-card{padding:16px 18px}
.fs5-log .fw-card-t{font-size:clamp(19px,1.6vw,22px)}

/* ---------- enterprise: how a legal team starts (paper) ----------------------- */
.fs5-start-d{margin-top:20px;max-width:46ch}
.tlink.fs5-tl{margin-top:26px}
.fs5-steps{list-style:none;padding:0;margin:0;border-bottom:1px solid var(--line)}
.fs5-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:24px 0;border-top:1px solid var(--line)}
.fs5-step-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--amber-deep);color:var(--amber-ink);font-size:14px;font-weight:700}
.fs5-steps h3{font-family:var(--display);font-weight:400;font-size:clamp(23px,2vw,27px);line-height:1.12;color:var(--ink)}
.fs5-steps p{margin-top:8px;max-width:58ch;font-size:15.8px;line-height:1.65;color:var(--grey-1)}

/* ---------- narrower screens ------------------------------------------------- */
@media (max-width:1000px){
  .fs5-cols,.fs5-conn,.fs5-faq-g,.fs5-media,.fs5-media.fs5-media-r{grid-template-columns:1fr}
  .fs5-ch,.fs5-dl{grid-template-columns:1fr}
  .fs5-ph{max-width:560px}
}
@media (max-width:760px){
  .fs5-two{grid-template-columns:1fr}
  .fs5-hero h1{font-size:clamp(36px,9.4vw,52px)}
  .fs5-ph.fs5-ph-t{aspect-ratio:4/3}
}

/* ---------- 0926: CG's page copy (hero second line, quotes, three lines, captions) ---------- */
.fs5-hero .deck.fs5-deck2{margin-top:14px;color:var(--cream)}
.fs5-prose > p.fs5-quotes{font-family:var(--display);font-size:clamp(22px,2vw,27px);line-height:1.3;color:var(--ink)}
.h5-steps.fs5-lines{margin-top:clamp(36px,4.4vw,56px)}
.h5-steps.fs5-lines p{font-size:16.5px;color:var(--cream)}
.fs5-cap{margin-top:12px;padding:0 4px 4px;font-size:14px;line-height:1.5;color:var(--mist)}
.fs5-ch-c > h3:first-child{margin-top:0}
.h5-fs .h5-steps h3{margin-top:14px;font-family:var(--body);font-size:17px;font-weight:700;line-height:1.3;color:var(--cream)}
.h5-fs .h5-steps.fs5-lines h3{margin-top:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}

/* 0927: the 0926b FineShield Live rules (two-card overview, #live meeting panel and meeting steps, #insider band)
   were removed with that copy; /fineshield is now CG's 01 page and its additions live in css/page/fs7.css. */
.fs5-steps h4{font-family:var(--body);font-weight:700;font-size:17px;line-height:1.3;color:var(--ink)}


/* ==== layer-66-product-0924.css ==== */
/* =============================================================================
   layer-66-product-0924 — the 0924 additions to the product pages
   /how-it-works  step 6 (the Firewall check) + the five-part product row
   /counsel       "Actions follow their approvals"
   /legal-room    the record read before drafting + the Firewall log band
   /answerloop    "What the next task learns"
   Prefix .pd-. Shared Firewall pieces (.fw-card, .fw-st-*, .fw-dev, .fw-ico)
   come from layer-12 and are not redrawn here.
   ========================================================================== */

/* ---------- /how-it-works: step 6, the Firewall check ----------------------
   A sixth row of the same .h2x-stages rail (same numeral column, same heading
   scale), set as a deep panel so the Firewall reads as its own product while
   staying in the page's numbered flow. A short dashed rule runs from step 5's
   numeral into the 6. */
.h2x-stages .step.pd-six{--pd-in:clamp(16px,2vw,28px);position:relative;
  margin:clamp(34px,4vw,52px) calc(-1 * var(--pd-in)) 0;border-bottom:none;
  padding:clamp(30px,4vw,52px) var(--pd-in);
  border-radius:var(--r-media);color:var(--mist);
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(23,98,122,.30), transparent 60%),
    radial-gradient(70% 70% at 0% 100%, rgba(245,158,11,.08), transparent 60%),
    var(--deep)}
/* the numeral column starts where steps 1-5 start, so the dashed rule drops
   straight from the 5 into the 6 */
.pd-six::before{content:"";position:absolute;left:calc(var(--pd-in) + 11px);
  top:calc(-1 * clamp(34px,4vw,52px));height:clamp(34px,4vw,52px);border-left:2px dashed var(--grey-4)}
.h2x-num.pd-six-n{color:var(--amber)}
.pd-six-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,4vw,56px);align-items:start}
.pd-six-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.h2x-stages .pd-six-copy p{color:var(--mist)}
.h2x-stages .pd-six-copy .scope{color:var(--mist);font-size:14.6px}
.pd-six-copy .tlink{margin-top:26px}
.pd-tlink-dark{color:var(--teal-lt);border-bottom-color:rgba(143,193,212,.4)}
.pd-tlink-dark:hover{color:var(--cream);border-bottom-color:var(--cream)}
.pd-six-ex{display:grid;gap:14px;align-content:start}
.pd-six-cap{font-size:12.5px;line-height:1.5;color:var(--grey-3)}
.fw-dark .pd-six-cap{color:var(--grey-4)}
@media (max-width:1000px){
  .pd-six-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .h2x-stages .step.pd-six{--pd-in:20px;grid-template-columns:minmax(0,1fr);margin-inline:0;
    padding:26px var(--pd-in) 28px;border-radius:18px}
}

/* /how-it-works: the five parts moved to layer-67 (.pv-parts, v19 navy cards). */

/* ---------- /counsel: actions follow their approvals ---------- */
.pd-follow{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.pd-follow-icons{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:6px}
.pd-follow-line{display:block;width:0;height:54px;border-left:2px dashed var(--grey-4)}
@media (max-width:640px){
  .pd-follow{grid-template-columns:minmax(0,1fr);gap:22px}
  .pd-follow-icons{flex-direction:row;justify-content:flex-start;padding-top:0}
  .pd-follow-line{width:48px;height:0;border-left:none;border-top:2px dashed var(--grey-4)}
}

/* ---------- /legal-room: the record read before drafting ---------- */
.pd-read-copy .body-l:first-child{margin-top:8px}

/* ---------- /legal-room: the Firewall log ---------- */
.pd-log-copy h2{margin-top:4px}
.pd-stack{display:grid;gap:14px}
.pd-stack .fw-card:nth-child(2){margin-left:clamp(0px,2.4vw,28px)}
.pd-stack .fw-card:nth-child(3){margin-left:clamp(0px,4.8vw,56px)}
@media (max-width:900px){
  .pd-stack .fw-card:nth-child(2),.pd-stack .fw-card:nth-child(3){margin-left:0}
}

/* ---------- /answerloop: what the next task learns ---------- */
.pd-chain{list-style:none;border-bottom:1px solid var(--line);margin-top:8px}
.pd-chain li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;
  padding:18px 0;border-top:1px solid var(--line)}
.pd-chain-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--deep);color:var(--cream);font-family:var(--display);font-size:19px;line-height:1}
.pd-chain-t{font-family:var(--display);font-size:clamp(21px,2vw,25px);line-height:1.22;color:var(--ink)}
.pd-pay{margin-top:24px;font-size:16.5px;line-height:1.6;font-weight:600;color:var(--ink);max-width:48ch}

/* override of a layer-12 cascade gap: `.fw-dark .fw-card` resets the left rule
   to amber and outranks `.fw-card.is-passed` / `.is-lawyer`, so on a dark band
   every card read as Held. Restore the status colour there. */
.fw-dark .fw-card.is-passed{border-left-color:#5FAF7C}
.fw-dark .fw-card.is-lawyer{border-left-color:var(--teal-lt)}

/* /security: the in-development tag inside a .wf row (.wf p would set it at 16px) */
.wf p.fw-dev{display:flex;font-size:11.5px;line-height:1.4;margin-top:16px}


/* ==== layer-67-product-v19.css ==== */
/* =============================================================================
   layer-67-product-v19 — the seven product pages in CG's v19 deck register
   (/how-it-works /counsel /legal-room /answerloop /fineprint-lm /trust-score
   /security). Builds on the shared utilities in layer-13-v19 (.v-dark .v-bleed
   .v-kick .v-card h2 em); this file only lays them out for these pages.
   Prefix .pv-.

   · .pv-hero      the dark photographic hero. It is a .v-bleed band, so the
                   photograph sits behind a left-to-right navy gradient and the
                   type always has contrast. On phones the photograph becomes a
                   strip at the top of the band and the type starts below it.
   · .pv-bg-*      which v19 photograph a .v-bleed band carries (check.py
                   prefers a class to an inline style).
   · .pv-ic        a product's amber-on-navy brand icon in its navy disc, as on
                   the deck's component slide.
   · .pv-screen    a real product screen framed on navy.
   · .pv-panel     a navy panel set on a light band — dark weight without two
                   dark bands meeting.
   · .pv-parts     /how-it-works: the five parts as navy cards (deck slide 18).
   · .pv-amr       /answerloop: "Agree. Modify. Rework." (deck slide 21).
   No animation is introduced here.
   ========================================================================== */

/* ---------- photographs ---------- */
.pv-bg-paper-stack{--img:url(/img/v19/paper-stack.jpg)}
.pv-bg-desk-monitor{--img:url(/img/v19/desk-monitor.jpg)}
.pv-bg-paper-fan{--img:url(/img/v19/paper-fan.jpg)}
.pv-bg-lawyer-reading{--img:url(/img/v19/lawyer-reading.jpg)}
.pv-bg-city-grid{--img:url(/img/v19/city-grid-2.jpg)}
.pv-bg-notebook-lamp{--img:url(/img/v19/notebook-lamp.jpg)}
.pv-bg-loft-night{--img:url(/img/v19/loft-night.jpg)}

/* ---------- the hero ---------- */
.pv-hero{padding-block:clamp(70px,8.4vw,128px) clamp(64px,7.6vw,112px);border-bottom:none}
.pv-hero::before{background-position:var(--pv-pos,right center)}
.pv-hero::after{background:linear-gradient(90deg,rgba(12,26,36,.97) 0%,rgba(12,26,36,.88) 38%,rgba(12,26,36,.34) 78%,rgba(12,26,36,.2) 100%)}
.pv-hero h1{max-width:15ch;font-size:clamp(40px,5.6vw,70px);line-height:1.04;color:var(--cream)}
.pv-hero .lede{max-width:52ch;color:var(--mist)}
.pv-hero .crumbs{margin-bottom:clamp(26px,3vw,40px)}
.pv-hero .crumbs a{color:var(--teal-lt)}
.pv-hero .crumbs a:hover{color:var(--cream)}
.pv-hero-copy{max-width:640px}
.pv-hero-head{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.pv-hero-head .v-kick{margin:0}
.pv-hero .scope{max-width:56ch}

/* two-column hero: copy + a product screen (/legal-room) */
.pv-hero-duo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,4.4vw,64px);align-items:center}
.pv-hero-duo .pv-hero-copy{max-width:none}
.pv-hero-duo h1{max-width:14ch}

/* per-photo crops */
.pv-hero.pv-bg-paper-stack{--pv-pos:right 30%}
.pv-hero.pv-bg-desk-monitor{--pv-pos:right 40%}
.pv-hero.pv-bg-notebook-lamp{--pv-pos:right 35%}
.pv-hero.pv-bg-loft-night{--pv-pos:center 60%}
.pv-hero.pv-bg-city-grid{--pv-pos:center 70%}
.pv-hero.pv-bg-paper-fan{--pv-pos:left 60%}
/* the portrait lawyer photograph sits in the middle of the /answerloop hero,
   between the invitation and the sign-in card */
.pv-hero.pv-bg-lawyer-reading::before{left:auto;right:0;width:min(62%,900px);
  background-size:cover;background-position:center 28%}
.pv-hero.pv-bg-lawyer-reading::after{background:
  linear-gradient(90deg,rgba(12,26,36,.97) 0%,rgba(12,26,36,.9) 42%,rgba(12,26,36,.42) 64%,rgba(12,26,36,.62) 100%)}

@media (max-width:900px){
  .pv-hero{padding-top:clamp(200px,50vw,300px)}
  .pv-hero::before{bottom:auto;height:clamp(250px,62vw,360px)}
  .pv-hero::after,
  .pv-hero.pv-bg-lawyer-reading::after{background:linear-gradient(180deg,
    rgba(12,26,36,.18) 0,rgba(12,26,36,.5) clamp(130px,32vw,190px),var(--deep) clamp(250px,62vw,360px))}
  .pv-hero.pv-bg-lawyer-reading::before{left:0;width:auto;background-position:center 26%}
  .pv-hero-duo{grid-template-columns:minmax(0,1fr)}
  .pv-hero h1{max-width:none}
}

/* ---------- brand icon on its navy disc ---------- */
.pv-ic{display:grid;place-items:center;flex:none;width:72px;height:72px;border-radius:50%;
  background:#08141C;box-shadow:inset 0 0 0 1px var(--line-dark)}
.pv-ic img{display:block;width:44px;height:44px}
.pv-ic-s{width:60px;height:60px}
.pv-ic-s img{width:36px;height:36px}

/* ---------- a product screen framed on navy ---------- */
.pv-screen{margin:clamp(30px,4vw,48px) 0 0;padding:clamp(12px,2vw,26px);border-radius:var(--r-media);
  background:
    radial-gradient(80% 90% at 100% 0%,rgba(245,158,11,.10),transparent 60%),
    var(--deep)}
.pv-screen .shot{border-color:rgba(236,237,234,.14);box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
.pv-screen figcaption{margin-top:14px;font-size:13.2px;line-height:1.6;color:var(--mist)}
.pv-hero .pv-screen{margin:0;padding:clamp(10px,1.2vw,14px);background:rgba(8,20,28,.72);
  box-shadow:inset 0 0 0 1px var(--line-dark)}

/* ---------- a navy panel on a light band ---------- */
.pv-panel{position:relative;overflow:hidden;border-radius:var(--r-media);
  padding:clamp(28px,4vw,56px);background:var(--deep);color:var(--mist)}
.pv-panel h2{color:var(--cream)}
.pv-panel h2 em{color:var(--amber-soft)}
.pv-panel .body-l{color:var(--mist)}
.pv-panel .fw-dev{margin-top:18px}

/* ---------- the dark-band headline block ---------- */
.pv-head{max-width:760px}
.pv-head .lede{margin-top:18px}
.v-dark .pv-head .lede{color:var(--mist)}
.pv-sub{margin-top:14px;font-family:var(--display);font-size:clamp(22px,2.2vw,28px);line-height:1.2;color:var(--mist)}

/* ---------- /how-it-works: the five parts (deck slide 18) ---------- */
.pv-parts{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;
  margin-top:clamp(34px,4.4vw,56px)}
.pv-part{display:flex;flex-direction:column;align-items:flex-start;height:100%;text-decoration:none;
  padding:26px 22px 22px;transition:border-color .2s ease,background-color .2s ease}
.pv-part .pv-ic{width:84px;height:84px}
.pv-part .pv-ic img{width:52px;height:52px}
.v-card.pv-part h3{margin-top:22px;font-size:clamp(22px,1.9vw,27px)}
.pv-part-rule{display:block;width:34px;height:0;margin-top:20px;border-top:1px solid var(--line-dark)}
.v-card.pv-part p{margin-top:16px}
.pv-part .fw-dev{margin-top:14px}
.pv-part-go{margin-top:auto;padding-top:18px;font-weight:600;color:var(--amber);transition:transform .25s ease}
.pv-part:hover{border-color:rgba(236,237,234,.34);background-color:rgba(236,237,234,.06)}
.pv-part:hover .pv-part-go{transform:translateX(4px)}
.pv-part:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .pv-part:hover .pv-part-go{transform:none}
}
@media (max-width:1100px){ .pv-parts{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .pv-parts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){
  .pv-parts{grid-template-columns:minmax(0,1fr);gap:10px}
  .pv-part{display:grid;grid-template-columns:60px minmax(0,1fr);column-gap:18px;padding:20px 20px 16px}
  .pv-part > *{grid-column:2}
  .pv-part > .pv-ic{grid-column:1;grid-row:1 / span 5}
  .pv-part .pv-ic{width:60px;height:60px}
  .pv-part .pv-ic img{width:38px;height:38px}
  .v-card.pv-part h3{margin-top:4px}
  .pv-part-rule{margin-top:12px}
  .v-card.pv-part p{margin-top:10px}
  .pv-part-go{padding-top:8px}
}

/* ---------- /how-it-works: step 6 in the v19 look ----------
   Flat navy, a thin rule, the city-grid photograph lit at the right edge,
   amber caps kick. Overrides the teal-lit panel of layer-66. */
.h2x-stages .step.pd-six.pv-six{
  background:
    linear-gradient(90deg,var(--deep) 0%,rgba(12,26,36,.97) 46%,rgba(12,26,36,.84) 100%),
    url(/img/v19/city-grid-2.jpg) right 60% / cover no-repeat,
    var(--deep);
  box-shadow:inset 0 0 0 1px var(--line-dark)}
.pv-six .pd-six-top{gap:16px}
.h2x-stages .pd-six-copy p.v-kick{margin:0;font-size:12px;line-height:1.4;color:var(--amber)}
.pv-six .pd-six-copy h2{margin-top:4px}

/* ---------- /answerloop ---------- */
.pv-amr{margin-top:clamp(26px,3vw,36px);font-family:var(--display);font-size:clamp(34px,3.8vw,50px);
  line-height:1.05;color:var(--cream)}
.pv-amr em{font-style:italic;color:var(--amber-soft)}
.v-dark .pd-chain{border-bottom-color:var(--line-dark)}
.v-dark .pd-chain li{border-top-color:var(--line-dark)}
.v-dark .pd-chain-n{background:transparent;color:var(--amber);box-shadow:inset 0 0 0 1.5px var(--amber)}
.v-dark .pd-chain-t{color:var(--cream)}
.v-dark .pd-pay{color:var(--cream)}
.pv-al-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,5vw,72px);align-items:start}
.pv-al-grid .pv-screen{background:var(--deep-2);box-shadow:inset 0 0 0 1px var(--line-dark)}
.pv-screen.pv-screen-top{margin:0 0 clamp(26px,3vw,36px)}
.pv-al-grid .body-l{color:var(--mist)}
.pv-al-grid h2{margin-top:4px}
.pv-al-grid .pd-chain{margin-top:18px}
.pv-al-grid .scope{margin-top:20px}
@media (max-width:900px){ .pv-al-grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- navy cards holding a section's h2 (/fineprint-lm) ---------- */
.pv-cards{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pv-cards .v-card{padding:clamp(26px,3vw,40px)}
.pv-cards h2{font-size:clamp(26px,2.6vw,36px);line-height:1.12;max-width:18ch}
.pv-cards p{margin-top:16px;font-size:16px;line-height:1.66;color:var(--mist);max-width:52ch}
.pv-cards .v-kick{margin-bottom:22px}
.pv-cards .tlink{margin-top:22px;color:var(--teal-lt);border-bottom-color:rgba(143,193,212,.4)}
.pv-cards .tlink:hover{color:var(--cream);border-bottom-color:var(--cream)}
@media (max-width:820px){ .pv-cards{grid-template-columns:minmax(0,1fr)} }

/* ---------- /counsel: the three requests on navy ---------- */
.pv-asks{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:clamp(28px,3.4vw,40px)}
.pv-asks .v-card{display:flex;align-items:flex-end;min-height:168px;background:
  radial-gradient(90% 90% at 100% 0%,rgba(245,158,11,.09),transparent 62%),var(--deep);border-color:var(--deep)}
.pv-asks p{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(22px,2.1vw,27px);
  line-height:1.2;color:var(--cream)}
@media (max-width:760px){
  .pv-asks{grid-template-columns:minmax(0,1fr);gap:10px}
  .pv-asks .v-card{min-height:0}
}

/* ---------- /counsel: actions follow their approvals, on a navy panel ---------- */
.pv-panel .pd-follow-line{border-color:rgba(245,158,11,.6)}
.pv-panel .pd-follow-icons{gap:14px}

/* ---------- /security: the Legal Firewall row as a navy panel ---------- */
.wf.pv-wf-fw{margin-block:10px;padding:clamp(24px,3vw,36px);border-radius:18px;background:var(--deep);
  border-top:none;box-shadow:inset 0 0 0 1px var(--line-dark)}
.wf.pv-wf-fw .wf-m{color:var(--amber)}
.wf.pv-wf-fw h2{color:var(--cream)}
.wf.pv-wf-fw p{color:var(--mist)}
.wf.pv-wf-fw .tlink{color:var(--teal-lt);border-bottom-color:rgba(143,193,212,.4)}
.wf.pv-wf-fw .tlink:hover{color:var(--cream);border-bottom-color:var(--cream)}
.wf.pv-wf-fw + .wf{border-top:none}
@media (min-width:761px){
  .wf.pv-wf-fw{margin-inline:-28px;padding-inline:28px}
}

/* ---------- /how-it-works: the contents rail on the dark hero ---------- */
.pv-toc{margin-top:clamp(40px,5vw,64px);max-width:760px}
.pv-toc a{color:var(--mist);background:rgba(12,26,36,.55);border-color:var(--line-dark)}
.pv-toc a:hover{color:var(--cream);border-color:rgba(236,237,234,.4)}

/* /answerloop: the sign-in card is a light card on the dark hero. .v-dark
   recolours every h2, p and link inside the band for a dark ground, so the
   card's own colours are restored here. The form itself is untouched. */
.v-dark .alx-card .alx-h{color:var(--ink)}
.v-dark .alx-card .alx-sub,
.v-dark .alx-card .alx-alt{color:var(--grey-2)}
.v-dark .alx-card .alx-mark{color:var(--teal)}
.v-dark .alx-card .alx-tab{color:var(--grey-2)}
.v-dark .alx-card .alx-tab:hover{color:var(--ink)}
.v-dark .alx-card .tlink{color:var(--teal)}
.v-dark .alx-card .tlink:hover{color:var(--teal-deep)}


/* ==== layer-70-company.css ==== */
/* =============================================================================
   layer-70-company — about · partners · contact · 404

   Four pages of running prose and one form. Almost everything they need was
   already in the system (.phero, .team, .routes, .formcard, .cards, .scope,
   .nf), so this layer is small and deliberately so: six components, each one
   asked for by a specific line of the approved copy.

   Prefix: .co-
   ========================================================================== */

/* ---------- the company-page headline measure -------------------------------
   These three headlines are sentences, not slogans — 33 to 65 characters with
   a full stop on the end. The core's .phero h1 caps at 17ch, which sets the
   longest of them ("Legal work should be within reach of the company you are
   building.") in four short lines that read as a stack rather than a sentence.
   21ch puts it in three and keeps the right-hand white space the hero wants.
   Written as h1.co-h1, not .co-h1: `.phero h1` is (0,1,1) and would otherwise
   win the cascade over a bare class. */
h1.co-h1{max-width:21ch}

/* ---------- about: the three moments ----------------------------------------
   "A customer is waiting. A contractor is ready to start. An investor has
   asked for documents." Three sentences the copy states in a row, each one a
   different founder in a different week. Set as three hairline-topped serif
   lines they become the argument of the section instead of a clause inside a
   paragraph — the words are untouched, the enumeration is just made visible.
   ------------------------------------------------------------------------- */
.co-triad{display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(24px,3.6vw,48px);margin-top:clamp(30px,3.8vw,44px)}
.co-triad li{border-top:2px solid var(--line);padding-top:16px;
  font-family:var(--display);font-size:clamp(20px,2vw,24px);line-height:1.26;
  color:var(--ink)}
@media (max-width:760px){
  .co-triad{grid-template-columns:1fr}
  .co-triad li{padding:14px 0}
}

/* ---------- about: the three parts of the service ---------------------------
   One .card each, carrying its whole sentence in display type — the sentence
   opens with the product's name, so it is its own heading and nothing has to
   be invented to label it. The link is pinned to the foot of the card so the
   three of them sit on one baseline whatever the sentence lengths do.
   Both rules are .card-scoped on purpose: .card p is (0,1,1), so a bare
   .co-say would lose the cascade to it. */
.card .co-say{margin-top:0;font-family:var(--display);
  font-size:clamp(20px,1.95vw,23px);line-height:1.3;color:var(--ink)}
.card .co-go{margin-top:auto;padding-top:22px}

/* ---------- contact: the secure-intake instruction --------------------------
   "A general description is enough. We will arrange secure intake if the next
   step needs documents or confidential matter details." That is a safety
   instruction about what not to paste into a public form, so it takes the lead
   position beside the form at reading size in the working colour — not a .hint
   under the field, where it would be 12.7px grey and skipped by exactly the
   people it is written for. It is also the first thing the page says once the
   two columns stack, so on a phone it is read before the form is reached.
   ------------------------------------------------------------------------- */
.co-helper{margin-top:26px;padding:20px 22px;border-radius:16px;
  background:var(--teal-wash);color:var(--teal-deep);
  font-size:16.6px;line-height:1.7;max-width:46ch}


/* ==== layer-75-company-v19.css ==== */
/* =============================================================================
   layer-75-company-v19 — the 0924b v19 pass for the offer, company, form and
   policy pages (pricing · launchpad · signup · thanks · about · contact · 404 ·
   privacy · terms · cookies).  Prefix: .cv-
   The dark photo hero is layer-10's .hero (+ .hero-img, near-black dim, not
   navy) made shorter and page-shaped; everything else here is how the v19
   register sits on these particular pages. Builds on layer-13 (.v-*).
   ========================================================================== */

/* ---------- the dark photo hero strip -------------------------------------- */
.cv-hero .hero-in{padding-block:clamp(60px,8vw,116px) clamp(56px,7vw,100px);max-width:47rem}
.cv-hero h1{max-width:18ch;font-size:clamp(38px,5.4vw,66px)}
.cv-hero h1.co-h1{max-width:21ch}
.cv-hero .lede{color:#D6DCE0;max-width:54ch}
.cv-hero .scope{color:var(--mist)}
.cv-hero .scope b{color:var(--cream)}
.cv-hero .crumbs{margin-bottom:26px}
.cv-hero .v-kick{margin-bottom:18px}
.cv-hero .cta-row{margin-top:32px}
/* the shorter strip: forms and policy pages, where the page below is the point */
.cv-strip .hero-in{padding-block:clamp(48px,6vw,88px) clamp(44px,5.4vw,78px)}
.cv-strip h1{font-size:clamp(36px,4.8vw,58px)}
.cv-hero .legal-date{color:var(--mist)}
.cv-hero .legal-date b{color:var(--cream)}

/* crops, per photograph (desktop; the phone crop is layer-10's) */
.cv-pos-mid{object-position:50% 50%}
.cv-pos-right{object-position:80% 50%}

/* full-bleed photo bands. Not layer-13's .v-bleed: build.py ships only the
   images an HTML src= names, so a CSS --img:url() photo 404s in the build.
   The same look from layer-10's .hero with a real <img>. */
.cv-close .cta-band{max-width:var(--maxw)}

/* a text link on a dark stage */
.tlink.cv-tl{color:var(--amber-soft);border-bottom-color:rgba(242,184,75,.4)}
.tlink.cv-tl:hover{color:var(--cream);border-bottom-color:var(--cream)}

/* ---------- product screens framed on navy --------------------------------- */
.cv-frame{margin-top:clamp(34px,4.4vw,52px);padding:clamp(10px,1.4vw,18px);
  border:1px solid var(--line-dark);border-radius:20px;background:rgba(236,237,234,.03)}
.cv-frame .shot{border-color:rgba(236,237,234,.12)}
.v-dark .shot-fig figcaption{color:var(--grey-4)}

/* ---------- light content lifted onto a card over the dark hero ------------ */
.cv-lift{position:relative;z-index:1;margin-top:clamp(-64px,-5vw,-36px)}
.cv-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-media);
  padding:clamp(24px,3.6vw,46px);box-shadow:0 30px 60px -44px rgba(12,26,36,.55)}
.cv-under{padding-block:0 var(--sec)}
.cv-under.band-sand .cv-card{background:var(--paper-2)}

/* ---------- about: the three parts of the service as v19 cards ------------ */
.cv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(32px,4vw,48px)}
.cv-cards .v-card{display:flex;flex-direction:column}
.cv-cards .v-card .co-say{margin-top:0;font-family:var(--display);font-size:clamp(20px,1.9vw,23px);
  line-height:1.3;color:var(--cream)}
.cv-cards .v-card .co-go{margin-top:auto;padding-top:22px}
@media (max-width:860px){ .cv-cards{grid-template-columns:1fr} }

/* text beside a photograph on a dark stage */
.cv-duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);align-items:center}
.cv-duo .v-photo{aspect-ratio:1/1}
@media (max-width:860px){
  .cv-duo{grid-template-columns:1fr}
  .cv-duo .v-photo{aspect-ratio:4/3}
}

/* ---------- contact: the routes as navy cards ------------------------------ */
.v-dark .route{background:var(--navy-card);border-color:var(--line-dark)}
.v-dark .route h3{color:var(--cream)}

/* ---------- 404 on a dark stage -------------------------------------------- */
.cv-nf .hero-in{padding-block:clamp(90px,13vw,180px)}
.cv-nf .nf-code{color:var(--amber)}
.cv-nf .hero-img{object-position:62% 40%}

/* body copy on the dark stages these pages use */
.v-dark .body-l{color:var(--mist)}
.v-dark .body-l b{color:var(--cream);font-weight:600}
/* a strip whose next band's content is lifted up over its foot */
.cv-lifted .hero-in{padding-bottom:clamp(96px,11vw,150px)}
/* the confirmation mark on the dark strip, and the first line of a lifted card */
.cv-mark{background:rgba(245,158,11,.14);color:var(--amber-soft)}
.cv-card .cv-first{margin-top:0}
.cv-card.confirm{max-width:none}
.cv-card h2{font-size:clamp(26px,3.2vw,38px)}
/* policy pages: the contents rail moves from the dark strip onto the paper */
.cv-toc{margin-top:0;padding-bottom:clamp(26px,3vw,36px);border-bottom:1px solid var(--line)}
.cv-hero .v-kick{color:var(--amber)}
.cv-hero h1.of-conf-h{max-width:24ch}
/* signup: the form's two steps sit inside one lifted card, so a step's
   legend never lands on the dark strip; the card is the step's frame now */
.cv-card .fstep{border:0;border-radius:0;background:none;padding:0;margin:0}
.cv-card .fstep:not([hidden]) + .fstep:not([hidden]){margin-top:clamp(30px,4vw,44px);padding-top:clamp(26px,3.4vw,38px);border-top:1px solid var(--line)}


/* ==== layer-77-offer-0925.css ==== */
/* =============================================================================
   layer-77-offer-0925 — the offer and company pages on the homepage's footing
   (pricing · launchpad · signup · about · contact · thanks · 404).
   Prefix: .of5-   Owner: 0925 offer/company group.
   The founder (2026-09-24): web prose, not slide fragments; no hedging lines;
   pricing carries the plans in full now that the homepage does not.
   Builds on layer-13 (.v-*), layer-27 (.hv-*), layer-30 (.of-*) and layer-75 (.cv-*).
   ========================================================================== */

/* hero headlines that are whole sentences: wider measure, a step smaller */
.cv-hero h1.of5-h1{max-width:22ch;font-size:clamp(36px,4.8vw,60px);line-height:1.04}
.of5-deck{max-width:68ch}

/* ---------- pricing: the plan line under the credits -------------------------- */
.v-card .of5-inc{margin-top:14px;font-size:14.4px;line-height:1.56;color:var(--mist)}

/* ---------- pricing: how credits work ---------------------------------------- */
.of5-cr{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,4.4vw,72px);align-items:start}
.of5-cr .hv-h2{max-width:16ch}
.body-l.of5-first{margin-top:0}
.of5-shot{margin-top:clamp(36px,4.4vw,60px)}
@media (max-width:900px){
  .of5-cr{grid-template-columns:1fr;gap:0}
  .body-l.of5-first{margin-top:20px}
  .of5-cr .hv-h2{max-width:24ch}
}

/* ---------- launchpad: who it is for, beside how to begin -------------------- */
.duo.of5-duo{grid-template-columns:1.1fr .9fr}
.of5-duo .hv-h2{font-size:clamp(28px,3.2vw,42px)}
.of5-h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1.1;color:var(--ink)}

/* ---------- about: the four parts, each a short paragraph -------------------- */
.of5-parts{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.of5-parts .v-card{display:flex;flex-direction:column;padding:28px 26px}
.of5-parts .v-card p{margin-bottom:22px;font-size:15.2px;line-height:1.62}
.of5-parts .tlink{margin-top:auto;align-self:flex-start}
@media (max-width:760px){ .of5-parts{grid-template-columns:1fr} }

/* ---------- 404: three direct links under the buttons ------------------------ */
.of5-nf{margin-top:28px;font-size:15.5px;line-height:1.7;color:var(--mist)}
.of5-nf .tlink{font-size:15.5px}

/* 0925e: the slim footer lost its boundary line (founder, 2026-09-25); the copyright block keeps its place at the right edge */
.foot-slim .foot-bot{grid-template-columns:1fr}


/* ==== layer-80-legal.css ==== */
/* =============================================================================
   layer-80 — the policy pages (privacy · terms · cookies)
   ---------------------------------------------------------------------------
   These pages are built almost entirely from the existing prose system:
   .phero + .crumbs + .lede for the head, .toc for the contents rail, and
   .legal / .legal-date for the body. Three additions only, because the design
   job here is legibility, not expression.
   ========================================================================== */

/* --- citable sections -------------------------------------------------------
   Each clause heading is an anchor target, so it needs the same clearance from
   the sticky nav that core.css gives section[id]; that rule matches sections
   only, and these targets are headings inside one. The "#" is the affordance
   that tells a reader the heading can be cited — quiet until the heading is
   hovered or the link itself is focused, always visible where there is no
   hover (touch), never a decoration competing with the clause. */
.legal h2[id]{scroll-margin-top:calc(var(--navh) + 20px)}
.lg-anchor{margin-left:.4em;font-family:var(--body);font-size:.55em;font-weight:600;
  color:var(--grey-4);text-decoration:none;vertical-align:.18em;
  opacity:0;transition:opacity .16s ease,color .16s ease}
.legal h2:hover .lg-anchor,.lg-anchor:focus-visible{opacity:1}
.lg-anchor:hover{color:var(--teal)}
@media (hover:none){ .lg-anchor{opacity:1} }
/* --- the attorney-client boundary -------------------------------------------
   The most consequential passage on the site. It gets a rule and a tint so it
   cannot be skimmed past — deliberately not the display serif of .pull, which
   would read as a marketing quotation rather than a term you are agreeing to. */
.lg-note{max-width:70ch;margin-top:22px;padding:20px 24px;background:var(--sand);
  border-left:3px solid var(--ink);border-radius:0 14px 14px 0}
.lg-note p{margin-top:0;font-size:16.2px;line-height:1.7;max-width:none}


/* ==== layer-95-figures.css ==== */
/* =============================================================================
   The figure frames (0919)
   ---------------------------------------------------------------------------
   The four drawings restored here — the workflow figure, the animated
   FinePrint LM constellation, the /fineprint-lm constellation and the Legal
   Room banner — each ship their own self-contained stylesheet, served only to
   the page that draws them. Nothing in this file styles the figures
   themselves: it only gives them a frame, a measure and a caption.

   THE 1:1 RULE. Every figure is drawn at a fixed viewBox and its type is sized
   for that width. Rendered at any other width the whole drawing scales, and
   13.5px endpoint slugs stop landing on the pixel grid — which is what made an
   earlier pass look soft. So each frame is capped at the figure's own drawn
   width and centred, rather than stretched to the 1112px column:

     wf    1112 x 576   (drawn for the 1112 content column)
     lmh   1110 x 720   (the plate has a 1px border, so its box is 1110)
     lm    1032 x 940
     la    1112 x 472   (the LM/AnswerLoop circuit, /answerloop)
     lc    1112 x 556   (one matter round the loop, /how-it-works)

   Below those widths the figures scale down, which is correct — they carry a
   separate phone layer and switch to it themselves.
   ========================================================================== */

.fg{margin:34px 0 0;padding:0}
.fg > div{margin-inline:auto}
.fg-wf  > div{max-width:1112px}
.fg-lmh > div{max-width:1110px}
.fg-lm  > div{max-width:1032px}
.fg-la  > div{max-width:1112px}
.fg-lc  > div{max-width:1112px}

.fg-cap{margin:18px auto 0;max-width:72ch;text-align:center;
  font-size:14.4px;line-height:1.6;color:var(--grey-2)}
.band-deep .fg-cap{color:var(--mist)}

@media (max-width:760px){
  .fg{margin-top:24px}
  .fg-cap{margin-top:14px;font-size:13.6px;text-align:left}
}

/* ---------- the Legal Room banner ----------------------------------------
   Full-bleed between the hero and the first band: the founder's vitrine image,
   which is a photograph of a room and wants the whole width rather than a
   measure. It is decorative — the page says everything it says — so it carries
   an empty alt and is hidden from assistive tech.

   The file is cropped to 1774 x 435 (4.08:1). The original carried the line
   "Your legal documents, kept compliant automatically." across its left half,
   which contradicts /legal-readiness — a scoped record check does not certify a
   company as compliant — so the band the text sat in was cropped away. Keeping
   the full width kept this geometry; the alternative crop was square and the
   band could not have used it. */
.fg-band{margin:0;padding:0;line-height:0;background:var(--deep)}
.fg-banner{display:block;width:100%;height:auto;max-height:430px;object-fit:cover;
  object-position:center}

@media (max-width:760px){
  /* At phone widths the strip's own aspect would render it 88px tall, which
     reads as a rule rather than a picture. A fixed window and a crop toward the
     vitrine keep the documents in frame. */
  .fg-banner{height:168px;max-height:none;object-position:78% center}
}


/* ==== layer-96-chrome-0926.css ==== */
/* =============================================================================
   layer-96-chrome-0926 — design pass 0926, chrome agent
   ---------------------------------------------------------------------------
   The navigation (desktop dropdowns + phone menu), the two footers, and the
   shared components every page uses. Loads after every earlier layer and
   BEFORE the page agents' layers (97–99b) and page stylesheets, so a page
   that needs something different still wins with its own body[data-page] rule.
   Notes and before/after pairs: qa-0926/design-pass/chrome/.
   ========================================================================== */

/* ---------- 0. the bar's height IS --navh ----------------------------------
   core said 74 px (desktop) / 64 px (≤1080) while the bar measured 67 / 71, so
   sticky headings and scroll-margins that use the variable landed under the
   bar on phones. The bar now takes its height from the variable (border
   included), and the variable is set to what the bar already was. */
:root{--navh:68px}
@media (max-width:1080px){ :root{--navh:70px} }
.nav-in{min-height:calc(var(--navh) - 1px);padding-block:0}

/* ---------- 1. nav: the five product marks and the menu icon system --------
   The five products carry their brand marks (.picon small cut, 20 px); every
   other item keeps a generic line icon, now neutral grey at 18 px so there is
   one accent colour in the menus — the amber inside the marks. The mark's
   centre sits on the title's cap-height centre (title line box 19.2 px). */
.nav-menu a{column-gap:14px}
.nav-menu .picon.nm-ico{width:20px;height:20px;margin-top:0}
.nav-menu .nm-ico:not(.picon){width:18px;height:18px;margin:1px 1px 0;color:var(--grey-2);
  transition:color .16s ease}
.nav-menu a:hover .nm-ico:not(.picon){color:var(--teal)}
/* section labels were grey-3 on white (3.4:1); grey-2 passes AA */
.nav-menu .nm-sep{color:var(--grey-2)}

/* the page you are on, inside its menu */
:is(body[data-page="counsel"] .nav-menu a[href="/counsel"],
    body[data-page="fineshield"] .nav-menu a[href="/fineshield"],
    body[data-page="fineprint-lm"] .nav-menu a[href="/fineprint-lm"],
    body[data-page="answerloop"] .nav-menu a[href="/answerloop"],
    body[data-page="legal-room"] .nav-menu a[href="/legal-room"],
    body[data-page="platform"] .nav-menu a[href="/platform"],
    body[data-page="how-it-works"] .nav-menu a[href="/how-it-works"],
    body[data-page="trust-score"] .nav-menu a[href="/trust-score"],
    body[data-page="security"] .nav-menu a[href="/security"],
    body[data-page="startups"] .nav-menu a[href="/startups"],
    body[data-page="mid-market"] .nav-menu a[href="/mid-market"],
    body[data-page="enterprise"] .nav-menu a[href="/enterprise"],
    body[data-page="solo-founders"] .nav-menu a[href="/solo-founders"],
    body[data-page="contracts"] .nav-menu a[href="/contracts"],
    body[data-page="hiring"] .nav-menu a[href="/hiring"],
    body[data-page="legal-readiness"] .nav-menu a[href="/legal-readiness"],
    body[data-page="agents"] .nav-menu a[href="/agents"],
    body[data-page="about"] .nav-menu a[href="/about"],
    body[data-page="contact"] .nav-menu a[href="/contact"]){background:var(--sand)}

/* ---------- 2. desktop dropdowns ---------------------------------------------
   · Every menu is centred under its trigger. Left-anchored, the two-column
     Solutions menu ran 80–150 px off the right edge at 1081–1199 px.
   · Product is two columns: the five products, then "More" on a sand panel, so
     the supporting pages read as secondary and the menu is 430 px tall instead
     of 720 (it no longer runs past the fold on a 768 px-tall laptop).
   · A menu taller than the window scrolls inside itself. */
@media (min-width:1081px){
  .nav-menu{left:50%;translate:-50% 0;max-height:calc(100vh - var(--navh) - 20px);
    overflow-y:auto;overscroll-behavior:contain}
  .nav-menu.nm-prod{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:0 8px;width:668px;min-width:0}
  .nm-prod .nm-main{min-width:0}
  .nm-prod .nm-more{background:var(--sand);border-radius:12px;padding:2px 0 4px}
  .nm-prod .nm-more a:hover{background:var(--sand-2)}
  .nm-prod .nm-more .nm-sep{margin-top:14px}
  .nm-prod .nm-more .nm-t{font-size:14.2px}
  :is(body[data-page="how-it-works"] .nm-more a[href="/how-it-works"],
      body[data-page="trust-score"] .nm-more a[href="/trust-score"],
      body[data-page="security"] .nm-more a[href="/security"]){background:var(--sand-2)}
}

/* ---------- 3. the phone / tablet menu (≤1080) ------------------------------
   Full-height panel under the bar (height = viewport − the bar, measured from
   the bar itself, so no magic number), page scroll locked behind it, one
   hairline between top-level rows, 56 px rows, and the button pinned to the
   bottom of the panel so it is reachable with every section open. The toggle
   is 44 px and turns into a close mark while the menu is open. */
@media (max-width:1080px){
  .nav-toggle{width:44px;height:44px;color:var(--ink)}
  .nav-toggle .nt-close{display:none}
  .nav.is-open .nav-toggle .nt-open{display:none}
  .nav.is-open .nav-toggle .nt-close{display:block}
  .nav.is-open .nav-toggle{background:var(--sand);border-color:var(--sand-2)}
  html:has(.nav.is-open){overflow:hidden}

  .nav-links{height:calc(100vh - 100%);height:calc(100dvh - 100%);max-height:none;
    padding:4px var(--pad) 0;gap:0;overscroll-behavior:contain;box-shadow:none;
    border-top:1px solid var(--line)}
  .nav-links > *{flex-shrink:0}
  .nav-links > .nav-drop,.nav-links > a{border-bottom:1px solid var(--line-soft)}
  .nav-links > a,.nav-drop > summary{display:flex;align-items:center;width:100%;min-height:56px;
    padding:0 4px;font-size:17px;color:var(--ink);border-radius:0}
  .nav-links > a:hover,.nav-drop > summary:hover,.nav-drop[open] > summary{background:transparent}
  .nav-links > a[aria-current="page"]::after{left:4px;bottom:12px}
  .nav-caret{width:12px;height:12px;color:var(--grey-2)}

  .nav-menu{padding:0 0 14px;margin:0;border-left:none}
  .nav-menu a{padding:11px 8px;gap:3px 14px}
  .nav-menu .nm-t{font-size:16px}
  .nav-menu .nm-d{font-size:14.2px;line-height:1.48}
  .nav-menu .picon.nm-ico{margin-top:1px}
  .nav-menu .nm-ico:not(.picon){margin-top:2px}
  .nav-menu .nm-sep{margin:14px 8px 4px}

  .nav-util{border-top:none;margin-top:0;padding-top:0}
  .nav-ul{display:flex;align-items:center;min-height:56px;padding:0 4px;font-size:17px;border-radius:0}
  .nav-ul:hover{background:transparent}

  .nav-links .nav-cta-m{position:sticky;bottom:0;z-index:1;margin:auto calc(-1 * var(--pad)) 0;
    padding:14px var(--pad) max(14px, env(safe-area-inset-bottom));
    background:var(--paper-2);border-top:1px solid var(--line)}
  .nav-links .nav-cta-m .btn{min-height:50px;font-size:16px}
}
/* tablet: the two-group menus keep their two columns */
@media (min-width:640px) and (max-width:1080px){
  .nav-menu.nm-prod,.nav-menu.nav-menu-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
}

/* ---------- 4. footer ------------------------------------------------------- */
/* Product column: the five products first, in the menu's order, each with its
   mark (dark cut, 18 px); FineShield Live hangs under FineShield at the text
   edge; a gap, then the supporting pages. */
.foot .picon.f-ico{width:18px;height:18px}
.f-col a.f-pl{display:inline-flex;align-items:center;gap:10px;border-bottom:none}
.f-pl span{border-bottom:1px solid transparent;transition:border-color .18s ease}
.f-pl:hover span{border-bottom-color:rgba(236,237,234,.4)}
.f-col-prod li{display:flex;align-items:center;min-height:27px}   /* same 38 px pitch as the other columns */
.f-col-prod .f-sub a{margin-left:28px}
.f-col-prod .f-brk{margin-top:26px}

/* the copyright line sat at the end of the first of two grid tracks — mid-page
   at 1440 and 768. One track now: copyright left, legal links right, and the
   trailing separator before the hidden "Cookie settings" button goes with it. */
.foot-bot{grid-template-columns:minmax(0,1fr)}
.f-meta{justify-self:stretch;text-align:left;display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:2px 28px}
.f-cs:has(> [hidden]){display:none}
.f-copy{min-width:0}
.f-legs{white-space:nowrap}

@media (max-width:1000px){
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .f-brand-col{grid-column:1 / -1}
  /* touch rows: 44 px per link instead of a 19 px line */
  .f-col h3{margin-bottom:6px}
  .f-col li + li{margin-top:0}
  .f-col ul a{display:inline-flex;align-items:center;min-height:44px}
  .f-col-prod .f-brk{margin-top:14px}
  /* legal links: a 44 px hit area without moving their underline off the text */
  .f-meta a.f-leg{position:relative}
  .f-meta a.f-leg::before{content:"";position:absolute;inset:-13px -5px}
}
@media (max-width:600px){
  /* two columns instead of one 1400 px list: Solutions + Company on the left,
     Product on the right */
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
  .foot-top > .f-col:nth-child(2){grid-column:1;grid-row:2}
  .foot-top > .f-col-prod{grid-column:2;grid-row:2 / span 2}
  .foot-top > .f-col:nth-child(4){grid-column:1;grid-row:3}
  .f-col ul a{font-size:14.8px}
  .f-meta{flex-direction:column;gap:0}
}

/* ---------- 5. shared components ------------------------------------------- */
/* close band: the .wrap.cta-band pattern (12 pages) was a 62ch column centred
   in the page, its left edge 280 px in from every other section at 1440.
   It now sits on the page grid; each child keeps its own measure. */
.wrap.cta-band{max-width:var(--maxw)}
:where(.wrap.cta-band) > *{max-width:62ch}

/* forms: 16 px controls (iOS zooms the page into anything smaller), 48 px
   control height, AA helper text, and the "Required" marker in the darker
   amber the v19 layer already defines (amber-deep on white is 3.3:1). */
.field input,.field select,.field textarea{font-size:16px}
.field input,.field select{min-height:48px}
.field .hint,.choice .hint,.fine{color:var(--grey-2)}
.of-req{color:var(--amber-ink)}

/* small grey-3 text is 3.3:1 on white/paper; grey-2 (5.8:1) on light grounds.
   Dark grounds keep their own, lighter rules (.cv-hero .legal-date, .v-card
   .p-note), which out-rank these; figure captions in dark bands keep grey-3,
   which passes on navy. */
.shot-fig figcaption,.hv-screen figcaption,.legal-date,.p-note{color:var(--grey-2)}
:is(.v-dark,.band-deep,.fw-dark,.hero) .hv-screen figcaption{color:var(--grey-3)}

/* focus: the teal ring disappears on navy; amber on every dark surface */
:is(.band-deep,.v-dark,.fw-dark,.hero,.foot) :is(a,button,summary,.btn):focus-visible{outline-color:var(--amber)}
/* a field in focus reads as a 2 px teal edge plus the wash (the wash alone was
   nearly invisible on white) */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);
  box-shadow:0 0 0 1px var(--teal),0 0 0 5px var(--teal-wash)}

/* pricing's stacked-plan rule in layer-10 (≤1060) put every .p-cta in a named
   grid area and shrank its button, unscoped; any grid card without a "cta" area
   grew an implicit column. Only the legacy five-plan ladder keeps it. */
@media (max-width:1060px){
  .p-cta{grid-area:auto}
  .p-cta .btn{width:100%}
  .plans-5 .p-cta{grid-area:cta}
  .plans-5 .p-cta .btn{width:auto}
}

/* v19 section heads: 30 px on phones sat under 32–34 px card titles. Same
   curve the homepage uses (32 px at 390, 36 px from 440 up to 820). */
@media (max-width:820px){
  .hv-h2{font-size:clamp(30px,8.2vw,36px)}
}

/* shared figures (layer-95): between 441 and 860 px they draw their phone
   layout (≤440 px wide), so the frame hugs it instead of spreading a plate
   across the column — the homepage's fix, for every page that draws one */
@media (max-width:860px){
  .fg-la > .la-fig,.fg-lmh > .lmh-fig,.fg-wf > .wf-fig{max-width:440px}
  .fg-lc > .lc-fig{max-width:420px}
}

@media (max-width:760px){
  /* 44 px targets for the controls people tap */
  .btn{min-height:44px}
  .toc a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
  .tlink{position:relative}
  .tlink::before{content:"";position:absolute;inset:-10px -4px}
  /* breadcrumbs: same look, a 44 px hit area */
  .crumbs a{position:relative}
  .crumbs a::before{content:"";position:absolute;inset:-12px -6px}
  .optin input{width:22px;height:22px;margin-top:1px}
}
@media (max-width:760px),(pointer:coarse){
  .chips label{min-height:44px}
}
@media (max-width:620px){
  /* an in-page contents rail is one row that scrolls sideways, bleeding to the
     screen edges (the privacy/terms pattern), not a 330 px wall of chips */
  .toc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--pad));padding:2px var(--pad) 4px;scroll-padding-inline:var(--pad)}
  .toc::-webkit-scrollbar{display:none}
  .toc a{flex:none;white-space:nowrap}
}
@media (max-width:560px){
  /* buttons: one full-width button per line instead of a ragged stack of
     pills of three different widths; text links in the same row keep their size */
  .cta-row{gap:12px}
  .cta-row > .btn,.form-actions > .btn{flex:1 1 100%;justify-content:center;min-height:50px;
    padding-inline:20px;text-align:center;line-height:1.25}
}
@media (max-width:640px){
  /* body copy in the shared components reaches 16 px on phones */
  .card p,.door p,.faq p,.legal p,.legal ul li,.checks li,.nums li{font-size:16px}
}


/* ==== layer-97-home-0926.css ==== */
/* =============================================================================
   layer-97-home-0926 — design pass 0926 (mobile + desktop): the homepage and /how-it-works.
   Owner: the home agent (qa-0926/design-pass/home/NOTES.md). Copy and section order untouched.
   Every rule is scoped with body[data-page="index"] / body[data-page="how-it-works"]; the .hm-
   classes exist only on those two pages. Generated figures (la, lmh, wf, lc, chf) are never
   edited: only their frames are sized here.
   ========================================================================== */

/* ---------- product marks (ICONS-0926) ----------------------------------------
   .hm-mark: a section kicker led by the product's mark — the lockup /fineshield uses (.fs5-mark),
   without the navy disc the old /how-it-works head sat its icon in (rule 3: no filled containers). */
.hm-mark{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.hm-mark .v-kick{margin:0}
.hm-ico40{width:40px;height:40px}
.hm-card-ico{display:block}
body[data-page="index"] .h5-two-b .hm-card-ico + h3{margin-top:18px}
body[data-page="index"] .h5-pl-way .h5-pl-ico{width:48px;height:48px}
body[data-page="index"] .h5-pl-icos{gap:12px}
body[data-page="how-it-works"] .pa5-parts .picon{flex:none}

/* ---------- one screen per layout ---------------------------------------------
   The whole app window from 641px; on a phone, the app's working pane (static/img/d26/home/, cut
   from the same captures), which sets the type at about twice the size. Two <img>s, not <picture>:
   build.py ships only images named in a src attribute. */
body:is([data-page="index"],[data-page="how-it-works"]) .hm-m{display:none}
@media (max-width:640px){
  body:is([data-page="index"],[data-page="how-it-works"]) .hm-d{display:none}
  body:is([data-page="index"],[data-page="how-it-works"]) .hm-m{display:block}
}

/* =============================================================================
   HOMEPAGE
   ========================================================================== */

/* #fineshield: the summary box lost the retired Legal Firewall rail (the mark now leads the head) */
body[data-page="index"] .h5-ch{display:block;max-width:880px;padding:clamp(20px,2.4vw,26px) clamp(20px,2.6vw,30px)}

/* the Launchpad close: "conversation" no longer stands on a line of its own. 19ch was narrower than
   the column; "Legal AI Counsel" stays on one line; beside the form (901px+) core's balance picked the
   stranded word as the narrowest four-line set, so there the lines fill greedily instead. */
body[data-page="index"] .hv-close .close-h{max-width:22ch}
@media (min-width:901px){ body[data-page="index"] .hv-close .close-h{text-wrap:wrap} }
body[data-page="index"] .hv-close .close-h em{white-space:nowrap}

/* #expertise, 440–860px: the two figures draw their phone layout (≤440px wide) — the frame now
   hugs it instead of spreading a shadowed white plate across the column */
@media (max-width:860px){
  body[data-page="index"] .fg-la > .la-fig,
  body[data-page="index"] .fg-lmh > .lmh-fig{max-width:440px}
}

/* ---------- tablet and phone: hierarchy ------------------------------------ */
@media (max-width:820px){
  /* section heads lead the cards under them (they were 30px over 34px card titles) */
  body[data-page="index"] .hv-h2,
  body[data-page="index"] .hv-hire .hv-h2,
  body[data-page="index"] .st-head h2{font-size:clamp(30px,8.2vw,36px)}
  body[data-page="index"] .h5-two-b h3,
  body[data-page="index"] .h5-pl-way h3{font-size:clamp(27px,7vw,32px)}
  body[data-page="index"] .h5-pl-found h3{font-size:clamp(25px,6.4vw,28px)}
}

/* ---------- phones ------------------------------------------------------------ */
@media (max-width:640px){
  /* body copy at 16px */
  body[data-page="index"] .h5-two-t,
  body[data-page="index"] .h5-pl-t,
  body[data-page="index"] .h5-pl-found .h5-pl-t,
  body[data-page="index"] .h5-steps p{font-size:16px}
  body[data-page="index"] .h5-two-t{margin-bottom:24px}
  /* the card buttons (layer-96 gives every .btn its 44px target) */
  body[data-page="index"] .h5-two-btn{font-size:15px}
  body[data-page="index"] .h5-two-shot{margin-top:28px}
  body[data-page="index"] .h5-pl-way .h5-pl-ico{width:40px;height:40px}
  /* the channels strip: three subjects cut from the same photographs, at 2x the height */
  body[data-page="index"] .h5-strip{aspect-ratio:1010/329;border-radius:12px}
  /* the tiles' linked titles: a 44px target without moving the type */
  body[data-page="index"] .h5-pl h3 a{position:relative}
  body[data-page="index"] .h5-pl h3 a::after{content:"";position:absolute;inset:-6px -4px}
  /* the Launchpad options read at 15px */
  body[data-page="index"] .h2x-opt-d{font-size:15px}
}

/* ---------- the stage picker on a phone ---------------------------------------
   layer-25 sets the panel "one register down" (12–13px) for a 1216px plate; on a 358px plate
   that is 11–13px body copy. The reading text goes to 16px, the labels to 11.5–12.5px, and the
   in-panel links get 44px targets (the foot's .tlink has one from layer-96). */
@media (max-width:760px){
  body[data-page="index"] .st-sub{font-size:16px}
  body[data-page="index"] .st-tag,
  body[data-page="index"] .st-lab{font-size:11.5px}
  body[data-page="index"] .st-chain li{font-size:12.5px}
  body[data-page="index"] .st-checks li{padding:11px 14px 11px 38px;font-size:16px;line-height:1.45}
  body[data-page="index"] .st-checks li::before{left:12px;top:14px}
  body[data-page="index"] .st-checks li::after{left:17px;top:17.5px}
  body[data-page="index"] .st-door{position:relative;font-size:15px}
  body[data-page="index"] .st-door::before{content:"";position:absolute;inset:-4px -6px -12px}
  body[data-page="index"] .st-bar-k{font-size:10.5px}
  body[data-page="index"] .st-bar-n{font-size:16px}
  body[data-page="index"] .st-go{min-height:44px;font-size:14px}
  body[data-page="index"] .st-cell{padding:16px 16px 18px}
  body[data-page="index"] .st-cell h4{font-size:13.5px}
  body[data-page="index"] .st-cell p{font-size:16px;line-height:1.6}
  body[data-page="index"] .st-adds li{font-size:12.5px;padding:5px 10px}
}

/* =============================================================================
   /how-it-works
   ========================================================================== */

/* the four steps: a step title sits a register below the section head (it was 42px under 50px) */
body[data-page="how-it-works"] .pa5-step .pa5-split .hv-h2{font-size:clamp(26px,2.5vw,34px);max-width:20ch}

/* 440–860px: the wf and lc figures draw their phone layout — the frame hugs it */
@media (max-width:860px){
  body[data-page="how-it-works"] .fg-wf > .wf-fig{max-width:440px}
  body[data-page="how-it-works"] .fg-lc > .lc-fig{max-width:420px}
}

@media (max-width:640px){
  /* the held email, stacked render: a lighter frame so the page does not read as a second card */
  body[data-page="how-it-works"] .pa5-fs .pa5-shot{padding:6px;border-radius:16px}
  body[data-page="how-it-works"] .pa5-fs .pa5-shot img{border-radius:11px}
}

/* the contract walkthrough on a phone: the two screens use the whole column, not the text's indent */
@media (max-width:560px){
  body[data-page="how-it-works"] .h2x-hand .shot-fig{margin-left:-50px}
}

/* lead, 0926: stage-picker tab numbers were grey-3 on sand (2.99:1) — grey-2 is 5.2:1. Selected/hover states keep their own colours (higher specificity). */
body[data-page="index"] .st-n{color:var(--grey-2)}


/* ==== layer-98-product-0926.css ==== */
/* =============================================================================
   layer-98-product-0926 — design pass 0926, the product pages
   (/counsel /fineshield /fineprint-lm /answerloop /legal-room /trust-score /security).
   Owner: product agent. Prefix .pl- for the few new hooks; everything page-specific
   is scoped with body[data-page="…"] so nothing leaks onto another group's pages.
   Notes: qa-0926/design-pass/product/NOTES.md

   Phone crops: build.py ships img/ only from src=, poster= and url(), not from
   srcset=, so the <picture> crops added in this pass are named here to ship:
   url(/img/d26/product/counsel-ask-m.jpg)  url(/img/d26/product/counsel-record-m.jpg)
   url(/img/d26/product/counsel-fineshield-m.jpg)  url(/img/d26/product/fineshield-policy-m.jpg)
   ========================================================================== */

/* ---------- 1. the product lockup: mark + eyebrow, one design on all five product heroes ----------
   48px standard cut (light cut on the paper /legal-room hero, dark cut on the navy heroes),
   no disc behind it (brand rule: no filled containers), the eyebrow keeps its page colour. */
.pl-lock{display:flex;align-items:center;gap:16px;margin:0 0 26px}
.pl-lock .v-kick,.pl-lock .kick{margin:0}
.pl-lock .kick::before{display:none}
.pv-hero-head.pl-lock,.fs5-mark.pl-lock{gap:16px;margin-bottom:26px}
body[data-page="legal-room"] .lr-hero .pl-lock{margin:0}
body[data-page="legal-room"] .lr-hero .pl-lock + h1{margin-top:26px}

/* a product as the subject of a section head or a card: 28px small cut beside its eyebrow */
.pl-sec{display:flex;align-items:center;gap:12px}
.pa5-kick.pl-sec,.fs5-mark.pl-sec{gap:12px;margin-bottom:18px}
.pl-card{display:block;margin-bottom:18px}
/* /legal-room: the FineShield use card keeps its heading on the row's line; the mark sits in the corner */
body[data-page="legal-room"] .lr-use-link .pl-card{position:absolute;top:clamp(24px,2.3vw,34px);right:clamp(24px,2.3vw,34px);margin:0}
body[data-page="legal-room"] .lr-use-link h3{padding-right:40px}
/* the /legal-room eyebrow matches the other four lockups' eyebrow (12px, 700, .16em); it keeps its grey on paper */
body[data-page="legal-room"] .lr-hero .pl-lock .kick{font-size:12px;font-weight:700;letter-spacing:.16em}

/* ---------- 2. one hero scale for the navy product heroes ----------
   Before: 70 / 78 / 64 / 60 / 64 / 70 px at 1440 and 35–40 px on a phone. Now one fluid size:
   38 px at 390, 47 px at 768, 64 px from 1440. (/legal-room keeps its approved 100 px paper hero.) */
body:is([data-page="counsel"],[data-page="fineprint-lm"],[data-page="trust-score"],[data-page="security"]) .pv-hero h1,
body[data-page="answerloop"] .alx-hero h1,
body[data-page="fineshield"] .fs5-hero h1{
  font-size:clamp(34px,calc(28.3px + 2.48vw),64px);line-height:1.04;max-width:17ch;text-wrap:balance}
body[data-page="fineshield"] .fs5-hero .deck{max-width:52ch}

/* ---------- 3. closes: aligned to the page grid, one heading size ----------
   The navy closes sat in a centred 62ch column with left-set text, so their left edge
   floated 280px in from every other section at 1440. They now start on the page's left edge. */
body:is([data-page="fineprint-lm"],[data-page="trust-score"],[data-page="security"]) .band-deep > .wrap.cta-band{max-width:var(--maxw)}
body:is([data-page="fineprint-lm"],[data-page="trust-score"],[data-page="security"]) .cta-band > .deck{max-width:56ch}
/* the paper closes (/counsel, and /answerloop, whose close followed two navy bands) use the navy closes' heading size */
body:is([data-page="counsel"],[data-page="answerloop"]) .pa5-close .hv-h2{font-size:clamp(33px,5.4vw,60px);line-height:1.08}
body:is([data-page="counsel"],[data-page="answerloop"]) .pa5-close .hv-h2,
body:is([data-page="fineprint-lm"],[data-page="trust-score"],[data-page="security"],[data-page="fineshield"]) .close-h{max-width:22ch;text-wrap:balance}
body:is([data-page="counsel"],[data-page="answerloop"]) .pa5-close .pa5-lede{max-width:56ch}

/* ---------- 4. product screens ---------- */
.pa5-shot picture,.fs5-shot picture{display:block}
/* the lawyer-review screen has no legible phone crop (every line runs the full card), so on a
   phone it scrolls sideways at a readable size — the same treatment /trust-score gives it */
@media (max-width:600px){
  body[data-page="counsel"] .pa5-shot.pl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  body[data-page="counsel"] .pa5-shot.pl-scroll img{width:640px;max-width:none}
}

/* ---------- 5. figures on a tablet ----------
   Below 861px the lm- and la- figures switch to their stacked 360-wide drawing, capped at 440px,
   but the figure box (and its shadow) stayed full width: a white card with a narrow navy
   figure inside it. Cap the box at the drawing. */
@media (max-width:980px){
  body[data-page="fineprint-lm"] .fg-lm > .lm-fig,
  body[data-page="answerloop"] .fg-la > .la-fig{max-width:440px}
}

/* ---------- 6. /fineshield on a tablet: short cards and steps side by side ---------- */
@media (min-width:700px) and (max-width:1000px){
  body[data-page="fineshield"] .fs5-ch{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-page="fineshield"] .fs5-ch.fs5-ch-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:700px) and (max-width:900px){
  body[data-page="fineshield"] .h5-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- 7. /trust-score: two short sections set as one two-column band ---------- */
.pl-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,96px);align-items:start}
@media (max-width:860px){
  .pl-duo{grid-template-columns:minmax(0,1fr);gap:0}
  .pl-duo > * + *{margin-top:clamp(48px,8vw,64px);padding-top:clamp(48px,8vw,64px);border-top:1px solid var(--line)}
}

/* lead, 0926: the gate kicker was amber-deep at 11.8px on white (3.33:1) — the site's --lv-yellow is 5.0:1 and reads as the same amber family. */
body[data-page="security"] .wy2-gate-k{color:var(--lv-yellow)}


/* ==== layer-99a-solutions-0926.css ==== */
/* =============================================================================
   layer-99a-solutions-0926 — 0926 design pass, Solutions group (agent: solutions)
   /startups /mid-market /solo-founders /contracts /hiring /legal-readiness /agents
   and /enterprise ("For legal teams").

   These eight pages were built by different passes (layer-57 .sv-, layer-59 .sl5-,
   layer-63 .fs5-) and had drifted. This layer makes them one family, without
   touching a word:
     hero      dark photo hero, copy on the left. On phones and tablets the photo
               sits BEHIND the copy (the homepage's and /fineshield's treatment),
               so the H1 and the button are on the first screen; /enterprise takes
               the same H1 scale and hero height as the seven .sv-hero pages.
     heads     .hv-h2 everywhere; a product that is the subject of a section gets
               its mark above the H2 (.s26-mark / .sl5-mark, small cut at 32 px).
     FineShield one band on every page: the dark FineShield surface, mark + kicker,
               H2, paragraph, figure when the page has one, light button.
     close     one close on the seven: paper, on the page grid (it was a centred
               62ch block aligned to nothing); on desktop the heading sits left and
               the offer + buttons right, on the same two columns as the rows above.
               /enterprise keeps its photographic close (shared with /fineshield).
     phones    product screens scroll sideways inside their frame at a readable
               size; /agents pins each area's name under the nav while its list scrolls.
   Every rule is scoped with body[data-page=…]. Page groups:
     S7 = the seven .sv-hero pages   S8 = S7 + enterprise
   ========================================================================== */

/* ---------- product marks in section heads (ICONS-0926.md) ------------------
   Small cut at 32 px (the largest the small cut allows); a lone mark sits above
   an H2 that names the product, the FineShield mark sits beside its kicker.   */
body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents],[data-page=enterprise]) .picon.s26-mk{width:32px;height:32px}
body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-mark{gap:14px;margin-bottom:20px}
body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .s26-mark{display:flex}

/* ---------- hero ---------------------------------------------------------------- */
/* the lede on the photograph: the brighter grey the homepage and /enterprise heroes use */
body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sv-hero .lede{color:#D6DCE0}

/* /enterprise: the same H1 scale, measure and hero height as the seven .sv-hero pages */
body[data-page=enterprise] .fs5-hero h1{font-size:clamp(40px,5.2vw,66px);line-height:1.04;max-width:17ch}
body[data-page=enterprise] .fs5-hero .deck{max-width:56ch}
@media (min-width:901px){
  body[data-page=enterprise] .fs5-hero .hero-in.fs5-hero-in{display:flex;flex-direction:column;justify-content:center;
    min-height:clamp(520px,44vw,660px);padding-block:clamp(72px,8vw,120px) clamp(64px,7vw,104px)}
}

@media (max-width:900px){
  /* the photograph goes behind the copy instead of a 300–440 px strip above it */
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sv-hero{
    padding-top:clamp(56px,11vw,96px);padding-bottom:clamp(56px,11vw,88px)}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sv-hero-img{
    top:0;bottom:0;left:0;width:100%;height:100%}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sv-hero::after{
    background:linear-gradient(180deg,rgba(6,12,17,.8) 0%,rgba(6,12,17,.72) 42%,rgba(6,12,17,.9) 100%)}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sv-hero-in{max-width:640px}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sv-hero h1{
    font-size:clamp(38px,6.6vw,56px);max-width:17ch}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sv-hero .crumbs{margin-bottom:22px}
  body[data-page=enterprise] .fs5-hero .hero-in{padding-block:clamp(56px,11vw,96px) clamp(56px,11vw,88px)}
  body[data-page=enterprise] .fs5-hero::before{background:linear-gradient(180deg,rgba(6,12,17,.8) 0%,rgba(6,12,17,.72) 42%,rgba(6,12,17,.9) 100%)}
  body[data-page=enterprise] .fs5-hero .crumbs{margin-bottom:22px}
  body[data-page=enterprise] .fs5-hero h1{font-size:clamp(38px,6.6vw,56px)}
}
@media (max-width:760px){
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents],[data-page=enterprise]) :is(.sv-hero,.fs5-hero) h1{
    font-size:clamp(36px,9.4vw,52px)}
}

/* ---------- text beside a picture, when it stacks -------------------------------
   Stacked, a 4:3 or square decorative photograph ran the full column width and
   out-weighed the copy (≈690 × 520 at 768). Wide and short instead.           */
@media (max-width:960px){
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-g .v-photo{aspect-ratio:16/9}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-g .v-photo img{object-position:50% 35%}
}
@media (max-width:1000px){
  body[data-page=enterprise] .fs5-ph,body[data-page=enterprise] .fs5-ph.fs5-ph-t{max-width:none;aspect-ratio:16/9}
  body[data-page=enterprise] .fs5-ph img{object-position:50% 35%}
  /* the copy leads on a phone, as on the other seven pages; the photograph is decorative */
  body[data-page=enterprise] .fs5-media-r > .fs5-ph{order:2}
}
@media (max-width:560px){
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-g .v-photo,
  body[data-page=enterprise] .fs5-ph,body[data-page=enterprise] .fs5-ph.fs5-ph-t{aspect-ratio:3/2}
}

/* ---------- /startups: the four task cards on a tablet ----------------------------- */
body[data-page=startups] .sl5-task{height:100%}
@media (min-width:600px) and (max-width:960px){
  body[data-page=startups] .sl5-tasks{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- the FineShield band ---------------------------------------------------- */
/* a head with nothing under it (solo-founders, legal-readiness, agents) must not carry the gap a figure needs */
body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-fs .sl5-head:last-child{margin-bottom:0}
body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-fs .sl5-head .cta-row{margin-top:clamp(26px,3vw,36px)}
/* the band's own button row (.sl5-fs-foot) behaves like every .cta-row on a phone (layer-96) */
@media (max-width:560px){
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-fs-foot{gap:12px}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-fs-foot > .btn{flex:1 1 100%;justify-content:center;min-height:50px}
}
/* a FineShield band with no figure (solo-founders, legal-readiness, agents) splits like the close:
   mark and H2 on the left, the paragraph and the button on the right, so the band is not half empty */
@media (min-width:1001px){
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-fs .sl5-head:last-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(30px,4.6vw,76px);max-width:none;align-items:start}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-fs .sl5-head:last-child > .sl5-mark{grid-column:1;grid-row:1}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-fs .sl5-head:last-child > .hv-h2{grid-column:1;grid-row:2 / span 2}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-fs .sl5-head:last-child > .sl5-p{grid-column:2;grid-row:2;margin-top:8px}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .sl5-fs .sl5-head:last-child > .cta-row{grid-column:2;grid-row:3}
}

/* ---------- the close ------------------------------------------------------------- */
/* one close on the seven pages: paper, on the page grid's left edge */
body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .cta-band{max-width:var(--maxw)}
body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .cta-band > .deck{max-width:56ch;margin-top:22px}
@media (min-width:1001px){
  /* desktop: the heading on the left, the offer and the buttons on the right, top-aligned */
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .cta-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(30px,4.6vw,76px);align-items:start}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .cta-band > .close-h{grid-column:1;grid-row:1 / span 2}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .cta-band > .deck{grid-column:2;grid-row:1;margin-top:12px}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .cta-band > .cta-row{grid-column:2;grid-row:2}
}
/* /enterprise keeps its photographic close; same measure as the other seven */
body[data-page=enterprise] .fs5-close .close-h{max-width:19ch}
body[data-page=enterprise] .fs5-close-d{max-width:56ch;margin-top:22px}

/* ---------- /agents: a 101-item catalogue that scans ------------------------------ */
/* each area opens on a 2 px ink rule (the rule /enterprise's three definitions use), not a hairline
   under a hairline */
body[data-page=agents] .sl5-cat{border-top:0}
body[data-page=agents] .sl5-area{border-bottom:0;border-top:2px solid var(--ink)}
@media (min-width:901px){
  /* the area's name and description stay in view while its list scrolls past */
  body[data-page=agents] .sl5-area > div:first-child{position:sticky;top:calc(var(--navh) + 28px);align-self:start}
}
@media (max-width:900px){
  /* phones and tablets: the area's name pins under the nav while its list scrolls */
  body[data-page=agents] .sl5-area{gap:0}
  body[data-page=agents] .sl5-area > div:first-child{display:contents}
  body[data-page=agents] .sl5-area h2{position:sticky;top:var(--navh);z-index:2;max-width:none;
    margin-inline:calc(-1 * var(--pad));padding:12px var(--pad) 12px;background:var(--paper);box-shadow:0 1px 0 var(--line)}
  body[data-page=agents] .sl5-area .sl5-n{margin-bottom:0}
  body[data-page=agents] .sl5-area .sl5-p{margin-top:6px}
  body[data-page=agents] .sl5-work{margin-top:18px}
}

/* ---------- phones: body copy at 16 px (text-link tap targets: layer-96, chrome) ---- */
@media (max-width:600px){
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) :is(.sl5-task p,.sl5-work li){font-size:16px}
  body[data-page=enterprise] :is(.fs5-dl dd,.fs5-steps p){font-size:16px}
}

/* ---------- phones: product screens you can read -------------------------------
   The app captures are 1600 px wide at 1x; squeezed into a 350 px column their text is
   about 3 px. On a phone the screen keeps its navy frame and scrolls sideways inside
   it at a readable size — the same treatment the FineShield redline already has here. */
@media (max-width:600px){
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .hv-screen-f{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .hv-screen-f img{width:880px;max-width:none}
  body:is([data-page=startups],[data-page=mid-market],[data-page=solo-founders],[data-page=contracts],[data-page=hiring],[data-page=legal-readiness],[data-page=agents]) .hv-screen-f img:is([src$="ask-classf.jpg"],[src$="room-overview.jpg"]){width:660px}
}


/* ==== layer-99b-company-0926.css ==== */
/* =============================================================================
   layer-99b — the company pages, 0926 design pass (mobile + desktop)
   pricing · launchpad · signup · thanks · about · contact · 404 · privacy ·
   terms · cookies. Owner: the company design agent. Notes and before/after
   pairs: qa-0926/design-pass/company/.

   Every rule is scoped with body[data-page="…"], so nothing here reaches
   another group's pages. The shared form and button components are corrected
   page-scoped only, and listed "For chrome" in the notes.

   Phone crop: build.py copies img/ only from src=, poster= and url(), not from
   srcset=, so the <picture> crop on /pricing is named here to ship with the
   deploy:  url(/img/d26/co/hire-plan-m.jpg)
   ========================================================================== */


/* ---------- product screens: legible at every width -------------------------
   A 1600px app capture shown at phone width is 5px text. Tablets get a
   tighter crop of the working area (the <picture> source on /pricing; the
   launchpad image is that crop at every width), and phones scroll the crop
   sideways at a size that can be read, as the homepage and product pages do. */
body:is([data-page="pricing"],[data-page="launchpad"]) .co-shot picture{display:block}
body:is([data-page="pricing"],[data-page="launchpad"]) .co-shot figcaption{color:var(--grey-2)}
@media (max-width:620px){
  body:is([data-page="pricing"],[data-page="launchpad"]) .co-shot .hv-screen-f{
    overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:thin;border-radius:16px}
  body:is([data-page="pricing"],[data-page="launchpad"]) .co-shot .hv-screen-f img{width:640px;max-width:none;border-radius:10px}
}


/* =============================================================================
   PRICING
   ========================================================================== */

/* The four plans share one set of rows (subgrid), so the price, the stage
   line, the monthly credits and the button sit level across the row at 4-up
   and at 2-up. Enterprise has no credits line: its longer description spans
   those rows instead of leaving a hole. */
@media (min-width:621px){
  body[data-page="pricing"] .of-tiers{row-gap:18px}
  body[data-page="pricing"] .of-tier{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:0}
  body[data-page="pricing"] .of-tier > .of-t-name{grid-row:1}
  body[data-page="pricing"] .of-tier > .v-num{grid-row:2}
  body[data-page="pricing"] .of-tier > .of-t-per{grid-row:3}
  body[data-page="pricing"] .of-tier > .of-t-stage{grid-row:4}
  body[data-page="pricing"] .of-tier > .of-cred{grid-row:5}
  body[data-page="pricing"] .of-tier > .of5-inc{grid-row:6}
  body[data-page="pricing"] .of-tier > .p-cta{grid-area:auto;grid-row:7;align-self:end}
  body[data-page="pricing"] .of-tier:last-child > .of-t-stage{grid-row:4 / 7}
}
/* the core's stacked-plan rule (<=1060px) puts .p-cta in a named area these
   cards do not have, which opened an implicit second column */
body[data-page="pricing"] .of-tier > .p-cta{grid-area:auto}
@media (min-width:621px){ body[data-page="pricing"] .of-tier > .p-cta{grid-row:7} }
/* one button shape in every plan, at every width (the core's stacked-plan
   rule shrank them to their label below 1060px) */
body[data-page="pricing"] .of-tier .p-cta .btn,
body[data-page="pricing"] .of-lp .p-cta .btn{width:100%;justify-content:center}

/* Launchpad card between tablet and desktop: the offer beside its words,
   the button and its note on one line underneath — not three stacked blocks */
@media (min-width:621px) and (max-width:860px){
  body[data-page="pricing"] .of-lp{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:start;gap:22px 28px}
  body[data-page="pricing"] .of-lp .p-cta{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
    padding-top:20px;border-top:1px solid var(--line-dark)}
  body[data-page="pricing"] .of-lp .p-cta .btn{width:auto}
  body[data-page="pricing"] .of-lp .p-note{margin-top:0}
}

/* Phones: the price and its unit on one line, reading text at 16px, full
   width buttons. The ladder is ~370px shorter and loses nothing. */
@media (max-width:620px){
  body[data-page="pricing"] .of-lp{padding:24px 22px}
  body[data-page="pricing"] .of-tiers{gap:14px}
  body[data-page="pricing"] .of-tier{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px;padding:24px 22px}
  body[data-page="pricing"] .of-tier > *{flex:0 0 100%}
  body[data-page="pricing"] .of-tier > .v-num{flex:0 0 auto;margin-top:14px;font-size:48px}
  body[data-page="pricing"] .of-tier > .of-t-per{flex:1 1 0;min-width:0;margin-top:0}
  body[data-page="pricing"] .of-tier .of-t-stage{margin-top:18px;padding-top:16px}
  body[data-page="pricing"] .v-card .of-t-stage,
  body[data-page="pricing"] .v-card .of-lp-t{font-size:16px}
  body[data-page="pricing"] .v-card .of5-inc{font-size:15.5px}
  body[data-page="pricing"] .v-card .of-t-per{font-size:14.5px}
  body[data-page="pricing"] .of-tier .p-cta{padding-top:22px}
  body[data-page="pricing"] .of-tier .p-cta .btn,
  body[data-page="pricing"] .of-lp .p-cta .btn{min-height:48px;font-size:15px}
}


/* =============================================================================
   LAUNCHPAD
   ========================================================================== */
body[data-page="launchpad"] .hv-hire-g{align-items:center}
body[data-page="launchpad"] .hv-hire-g > *{min-width:0}
@media (max-width:900px){ body[data-page="launchpad"] .hv-hire-g{grid-template-columns:minmax(0,1fr)} }
@media (max-width:620px){
  body[data-page="launchpad"] .nums li{font-size:16px}
}


/* =============================================================================
   ABOUT
   ========================================================================== */

/* the product marks on the four "made of" cards (ICONS-0926, standard · dark,
   48px); the FinePrint LM and AnswerLoop card carries both, side by side */
body[data-page="about"] .co-mark{display:flex;gap:14px;margin-bottom:22px}
body[data-page="about"] .of5-parts .v-card h3{margin-top:0}

/* "FinePrint is an Ide8 company": on the page's left edge and column grid,
   the heading beside its line, as the pricing credits band does — not a
   centred narrow column in a page that is otherwise left-aligned */
body[data-page="about"] .co-split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(24px,4.4vw,72px);align-items:start}
body[data-page="about"] .co-split .hv-h2{max-width:16ch}
body[data-page="about"] .co-split .body-l{margin-top:0}
body[data-page="about"] .co-split .cta-row{margin-top:22px}
@media (min-width:861px){ body[data-page="about"] .co-split > div{padding-top:10px} }
@media (max-width:860px){
  body[data-page="about"] .co-split{grid-template-columns:1fr;gap:0}
  body[data-page="about"] .co-split .body-l{margin-top:18px}
  body[data-page="about"] .co-split .hv-h2{max-width:24ch}
}
@media (max-width:620px){
  body[data-page="about"] .of5-parts .v-card{padding:24px 22px}
  body[data-page="about"] .of5-parts .v-card p{font-size:16px}
}

/* a stacked photograph under the close should not outweigh the close */
@media (min-width:621px) and (max-width:860px){
  body:is([data-page="about"],[data-page="launchpad"]) .cv-duo .v-photo{aspect-ratio:16/9}
}


/* =============================================================================
   FORMS — signup and contact (live backend: markup untouched, design only)
   ========================================================================== */

/* 16px controls, so iOS Safari does not zoom the page on focus */
body:is([data-page="signup"],[data-page="contact"]) .field input,
body:is([data-page="signup"],[data-page="contact"]) .field select,
body:is([data-page="signup"],[data-page="contact"]) .field textarea{font-size:16px;min-height:48px}
body:is([data-page="signup"],[data-page="contact"]) .field textarea{min-height:120px}
body:is([data-page="signup"],[data-page="contact"]) .field label,
body:is([data-page="signup"],[data-page="contact"]) .choice > .q{font-size:14px}

/* focus reads as a 2px teal edge plus the wash, not a 1px colour change */
body:is([data-page="signup"],[data-page="contact"]) .field input:focus,
body:is([data-page="signup"],[data-page="contact"]) .field select:focus,
body:is([data-page="signup"],[data-page="contact"]) .field textarea:focus{
  border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 0 5px var(--teal-wash)}
/* an error is a 2px red edge and a message that can be read */
body:is([data-page="signup"],[data-page="contact"]) .field.is-bad input,
body:is([data-page="signup"],[data-page="contact"]) .field.is-bad select,
body:is([data-page="signup"],[data-page="contact"]) .field.is-bad textarea{box-shadow:0 0 0 1px var(--lv-red)}
body:is([data-page="signup"],[data-page="contact"]) .of-msg{font-size:13.6px;font-weight:600}

/* small print that carries instructions passes AA (grey-3 is 3.3:1 on white) */
body:is([data-page="signup"],[data-page="contact"]) .field .hint,
body:is([data-page="signup"],[data-page="contact"]) .choice .hint,
body:is([data-page="signup"],[data-page="contact"]) .fine{color:var(--grey-2)}
body:is([data-page="signup"],[data-page="contact"]) .field .hint{font-size:13.4px}
/* "Required": amber-deep is 3.3:1 at 11px; the deeper amber token is 5:1 */
body[data-page="signup"] .of-req{color:var(--lv-yellow)}

@media (max-width:700px){
  /* chips are tap targets */
  body[data-page="signup"] .chips{gap:10px}
  body[data-page="signup"] .chips label{min-height:44px;padding:12px 18px;font-size:15.5px}
  body[data-page="signup"] .review-rail a{display:inline-block;padding:10px 0 10px 14px;margin:-10px 0}
}
@media (max-width:620px){
  /* the form gets the width, and its primary button spans it */
  body[data-page="signup"] .cv-card{padding:26px 20px 24px}
  body[data-page="contact"] .formcard{padding:26px 20px 22px}
  /* Back keeps its place before the primary (DOM and tab order), on its own
     line; the primary takes the full width under it, where the thumb is */
  body:is([data-page="signup"],[data-page="contact"]) .form-actions{gap:12px}
  body:is([data-page="signup"],[data-page="contact"]) .form-actions .btn{min-height:50px;justify-content:center;text-align:center;line-height:1.3;
    padding-inline:18px;font-size:15px}
  body:is([data-page="signup"],[data-page="contact"]) .form-actions .btn-primary{flex:1 1 100%}
  body:is([data-page="signup"],[data-page="contact"]) .form-actions .btn-ghost{flex:0 0 auto;min-width:112px}
  body[data-page="contact"] form > .fine{margin-top:8px}
  body[data-page="contact"] form > .fine a{display:inline-block;padding-block:12px;line-height:20px}
}


/* =============================================================================
   CONTACT
   ========================================================================== */
/* the secure-intake line and the addresses are one column, one width */
body[data-page="contact"] .co-helper{max-width:none}
@media (max-width:620px){
  body[data-page="contact"] .route{padding:24px 22px}
  body[data-page="contact"] .route p{font-size:16px}
  body[data-page="contact"] .route .btn{align-self:stretch;justify-content:center;min-height:46px}
}


/* =============================================================================
   THANKS
   ========================================================================== */
@media (max-width:620px){
  body[data-page="thanks"] .cv-card{padding:26px 20px 24px}
  body[data-page="thanks"] .cv-card .cta-row{gap:10px}
  body[data-page="thanks"] .cv-card .cta-row .btn{width:100%;justify-content:center;text-align:center;
    line-height:1.3;min-height:50px;padding-inline:20px}
}


/* =============================================================================
   404 — the dark stage fills the window; the code reads as the site's kicker
   ========================================================================== */
body[data-page="404"]{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
body[data-page="404"] main{flex:1 0 auto;display:flex;flex-direction:column}
body[data-page="404"] .cv-nf{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}
body[data-page="404"] .cv-nf > .wrap{width:100%}
body[data-page="404"] .cv-nf .nf-code{margin-bottom:18px;font-family:var(--body);font-size:12px;font-weight:700;
  letter-spacing:.16em;line-height:1.3}
@media (max-width:620px){
  body[data-page="404"] .cv-nf .hero-in{padding-block:64px 72px}
}


/* =============================================================================
   PRIVACY · TERMS · COOKIES — reading pages
   A 65–75 character measure, headings that break only when they must, and
   the contents as a sticky rail beside the text on wide screens, a single
   scrolling row on phones. The words are untouched.
   ========================================================================== */
body:is([data-page="privacy"],[data-page="terms"],[data-page="cookies"]) .band-white{padding-top:clamp(40px,5.4vw,76px)}
body:is([data-page="privacy"],[data-page="terms"],[data-page="cookies"]) .legal h2{max-width:none;text-wrap:pretty;
  font-size:clamp(24px,2.5vw,30px);line-height:1.15;margin-top:clamp(40px,4.6vw,56px)}
body:is([data-page="privacy"],[data-page="terms"],[data-page="cookies"]) .legal h2:first-child{margin-top:0}
body[data-page="cookies"] .legal{margin-top:0}
body:is([data-page="privacy"],[data-page="terms"],[data-page="cookies"]) .legal p{font-size:16.5px;line-height:1.72;max-width:34em}
body:is([data-page="privacy"],[data-page="terms"],[data-page="cookies"]) .legal .lg-note{max-width:calc(34em + 48px)}
body:is([data-page="privacy"],[data-page="terms"],[data-page="cookies"]) .legal .lg-note p{font-size:16.5px}

@media (min-width:1024px){
  /* one wider column for the strip and the text, so the rail and the H1
     share a left edge */
  body:is([data-page="privacy"],[data-page="terms"],[data-page="cookies"]) .cv-hero .wrap-n,
  body:is([data-page="privacy"],[data-page="terms"],[data-page="cookies"]) .band-white > .wrap-n{max-width:960px}
  body:is([data-page="privacy"],[data-page="terms"],[data-page="cookies"]) .legal p{font-size:17px}
  body:is([data-page="privacy"],[data-page="terms"]) .band-white > .wrap-n{display:grid;
    grid-template-columns:200px minmax(0,1fr);gap:0 clamp(48px,5vw,72px);align-items:start}
  body:is([data-page="privacy"],[data-page="terms"]) .legal{margin-top:0}
  body:is([data-page="privacy"],[data-page="terms"]) .cv-toc{position:sticky;top:calc(var(--navh) + 28px);
    flex-direction:column;flex-wrap:nowrap;gap:0;padding:0;border:0;border-left:1px solid var(--line)}
  body:is([data-page="privacy"],[data-page="terms"]) .cv-toc a{margin-left:-1px;padding:7px 0 7px 16px;
    border:0;border-left:2px solid transparent;border-radius:0;background:none;
    font-size:14px;font-weight:500;line-height:1.4;color:var(--grey-2)}
  body:is([data-page="privacy"],[data-page="terms"]) .cv-toc a:hover{color:var(--ink);border-left-color:var(--amber)}
  body:is([data-page="privacy"],[data-page="terms"]) .cv-toc a:focus-visible{border-radius:4px}
}
@media (max-width:620px){
  /* the contents as one row that scrolls, bleeding to the screen edges */
  body:is([data-page="privacy"],[data-page="terms"]) .cv-toc{flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(-1 * var(--pad));padding:2px var(--pad) 22px;scroll-padding-inline:var(--pad)}
  body:is([data-page="privacy"],[data-page="terms"]) .cv-toc::-webkit-scrollbar{display:none}
  body:is([data-page="privacy"],[data-page="terms"]) .cv-toc a{flex:none;white-space:nowrap;
    min-height:44px;display:inline-flex;align-items:center;font-size:14px}
  body:is([data-page="privacy"],[data-page="terms"],[data-page="cookies"]) .legal h2{font-size:25px}
}