@font-face{font-family:"Geist";font-weight:300 600;font-display:swap;src:url(/fonts/geist-latin.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400 500;font-display:swap;src:url(/fonts/geist-mono-latin.woff2) format("woff2")}
/* ---------- fallback fonts sized to Geist, so text does not move when Geist arrives ---------- */
@font-face{font-family:"Geist Fallback";font-weight:400;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");size-adjust:102.7%;ascent-override:97.86%;descent-override:28.72%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";font-weight:500;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");size-adjust:105.1%;ascent-override:95.62%;descent-override:28.07%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";font-weight:600 700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");size-adjust:99.3%;ascent-override:101.21%;descent-override:29.71%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback Android";font-weight:400;src:local("Roboto"),local("Roboto-Regular");size-adjust:103.9%;ascent-override:96.73%;descent-override:28.39%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback Android";font-weight:500;src:local("Roboto"),local("Roboto-Regular");size-adjust:105.5%;ascent-override:95.26%;descent-override:27.96%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback Android";font-weight:600 700;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:106%;ascent-override:94.81%;descent-override:27.83%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  --paper:#FFFFFF; --sheet:#FFFFFF; --ink:#14151A; --ink-2:#43464E; --ink-3:#5E6169;
  --line:#DCDDE3; --line-2:#C6C8D0; --night:#0E0F13; --night-2:#B6B9C2;
  --blue:#047857; --blue-d:#065F46; --blue-50:#EBF1F9;
  --green:#17704A; --green-50:#E6F2EC; --green-lt:#5BD39B;
  --amber:#8A5300; --amber-50:#F8ECD3; --dot-amber:#D98A1F; --thr-night:#8FB0E6;
  --sans:"Geist","Geist Fallback","Geist Fallback Android",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,"Courier New",monospace;
  --gut:clamp(16px,4vw,56px);
  --wrap:min(1320px,100% - 2*var(--gut));
  --fs-h1:clamp(2.75rem,6.6vw,6.5rem);
  --fs-h2:clamp(2rem,4.4vw,4.25rem);
  --fs-h3:clamp(1.3125rem,1.9vw,1.75rem);
  --fs-lede:clamp(1.125rem,1.45vw,1.375rem);
  --sec:clamp(72px,11vw,168px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:clamp(1.0625rem,.3vw + 1rem,1.125rem);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{position:relative;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img,svg,video{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{width:var(--wrap);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:12px 16px;border-radius:8px}
.skip:focus{top:12px}
.eyebrow{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.h2{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.04em;line-height:1;text-wrap:balance}
.h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.lede{font-size:var(--fs-lede);line-height:1.45;color:var(--ink-2);max-width:38em;text-wrap:pretty}
.sec{padding-block:var(--sec)}
.sec--sheet{background:var(--sheet)}
.rule{border-top:1px solid var(--line)}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-weight:500;font-size:1rem;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.btn svg{width:18px;height:18px;transition:transform .18s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.98)}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-d)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#000}
.btn--ghost{border-color:var(--line-2);background:transparent}
.btn--ghost:hover{border-color:var(--ink)}
.link{display:inline-flex;align-items:center;gap:.45em;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.link svg{width:16px;height:16px;transition:transform .18s var(--ease)}
.link:hover svg{transform:translateX(3px)}
.chip{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.chip--blue{background:var(--blue-50);border-color:transparent;color:var(--blue-d)}
.chip--amber{background:var(--amber-50);border-color:transparent;color:var(--amber)}
.chip--ink{background:var(--ink);border-color:transparent;color:#fff}

/* ---------- movement between pages (enhancement only). Where the browser supports cross-document view transitions, the old page
   fades and the new one rises a little, and the header stays in place. Other browsers load the page as usual. ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .hdr{view-transition-name:hdr}
  ::view-transition-old(root){animation:vt-out .16s ease both}
  ::view-transition-new(root){animation:vt-in .36s var(--ease) both}
  ::view-transition-group(hdr){animation-duration:.2s}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background-color .25s,border-color .25s;border-bottom:1px solid transparent}
.hdr.is-stuck{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:32px;height:72px}
.logo{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);flex:none}
.logo svg{height:28px;width:auto}
.nav{display:flex;gap:4px;margin-right:auto}
.nav a{padding:10px 12px;border-radius:8px;text-decoration:none;font-size:.9375rem;font-weight:500;color:var(--ink-2);transition:color .15s,background-color .15s}
.nav a:hover{color:var(--ink);background:rgba(20,21,26,.06)}
.hdr__act{display:flex;align-items:center;gap:8px}
.hdr__login{padding:10px 12px;text-decoration:none;font-size:.9375rem;font-weight:500;color:var(--ink-2)}
.hdr__login:hover{color:var(--ink)}
.hdr .btn{min-height:44px;padding:0 18px;font-size:.9375rem}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:999px;background:transparent;cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:20px;height:20px}
.menu{border:0;padding:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;background:var(--paper);color:var(--ink)}
.menu::backdrop{background:rgba(14,15,19,.4)}
.menu__in{display:flex;flex-direction:column;gap:8px;padding:16px var(--gut) 32px;min-height:100%}
.menu__top{display:flex;justify-content:space-between;align-items:center;height:56px;margin-bottom:16px}
.menu a.m{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;text-decoration:none}
.menu .btn{margin-top:auto;justify-content:center;min-height:56px}
@media (max-width:1040px){.nav,.hdr__login{display:none}.burger{display:inline-flex}.hdr__in{gap:12px;height:64px}.hdr__act{margin-left:auto}}
@media (max-width:374px){.hdr__in{gap:8px}.hdr__act{gap:6px}.logo svg{height:22px}.hdr .btn{padding:0 10px;font-size:.875rem}}


/* ---------- scan form and assurances (same as the homepage) ---------- */
.scan{margin-top:clamp(24px,2.6vw,40px);max-width:620px}
.scan__box{display:flex;align-items:center;gap:8px;background:var(--sheet);border:1px solid var(--line-2);border-radius:999px;padding:6px 6px 6px 24px;transition:border-color .18s,box-shadow .18s}
.scan__box:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(5,150,105,.14)}
.scan__box input{flex:1;min-width:0;height:52px;border:0;background:transparent;font-size:1.125rem;outline:0}
.scan__box input::placeholder{color:#6B6E77}
.scan__box .btn{min-height:52px;padding:0 22px}
.scan__note{margin-top:12px;font-size:.875rem;color:var(--ink-2)}
.assure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,5.5vw,80px);border-top:1px solid var(--line)}
.assure li{padding:20px 24px 0 0;font-size:.9375rem;color:var(--ink-2)}
.assure li+li{padding-left:24px;border-left:1px solid var(--line)}
.assure b{display:block;color:var(--ink);font-weight:600}
@media (max-width:640px){
  .scan__box{flex-wrap:wrap;border-radius:20px;padding:6px}
  .scan__box input{flex:1 1 100%;padding:0 16px}
  .scan__box .btn{flex:1 1 100%;justify-content:center}
  .assure{grid-template-columns:1fr}
  .assure li{padding:16px 0}
  .assure li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
}
/* ---------- the receipt (signature component) ---------- */
.slip{position:relative;width:min(100%,400px);filter:drop-shadow(0 28px 36px rgba(20,21,26,.16)) drop-shadow(0 2px 3px rgba(20,21,26,.08))}
.slip__paper{position:relative;background:var(--sheet);color:var(--ink);font-family:var(--mono);font-size:.8125rem;line-height:1.5;padding:26px 22px 22px 50px}
.slip__paper::before,.slip__paper::after{content:"";position:absolute;left:0;right:0;height:9px;background-size:12px 9px;background-repeat:repeat-x}
.slip__paper::before{top:-9px;background-image:linear-gradient(45deg,var(--sheet) 33%,transparent 34%),linear-gradient(-45deg,var(--sheet) 33%,transparent 34%)}
.slip__paper::after{bottom:-9px;background-image:linear-gradient(135deg,var(--sheet) 33%,transparent 34%),linear-gradient(-135deg,var(--sheet) 33%,transparent 34%)}
.slip--tilt{transform:rotate(1.6deg);transform-origin:50% 0;transition:transform .5s var(--ease)}
.hero__slip:hover .slip--tilt{transform:rotate(0deg)}
.slip--stack::before{content:"";position:absolute;inset:14px -10px -4px 12px;background:#E9EAEE;transform:rotate(-4deg);z-index:-1}
.slip__bar{height:30px;margin-top:14px;opacity:.9;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 9px,var(--ink) 9px 12px,transparent 12px 14px,var(--ink) 14px 15px,transparent 15px 20px,var(--ink) 20px 23px,transparent 23px 25px)}
.slip__no{display:flex;justify-content:space-between;margin-top:6px;font-size:.6875rem;letter-spacing:.14em;color:var(--ink-3)}
.slip__head{display:flex;justify-content:space-between;gap:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.slip__head span:last-child{color:var(--ink-3)}
.slip__title{font-family:var(--sans);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-top:10px}
.slip dl{margin-top:16px}
.slip .row{position:relative;display:grid;grid-template-columns:7.5ch minmax(0,1fr);column-gap:12px;padding:11px 0;border-top:1px dashed var(--line-2)}
/* the proof line: a ledger margin rail. Blue while deciding and doing, green only from verification on. */
.slip__top{position:relative}
.slip__top::after,.slip .row::after{content:"";position:absolute;left:-24px;width:2px;background:var(--blue)}
.slip__top::after{top:-26px;bottom:-33px}
.slip .row::after{top:20px;bottom:-16px}
.slip .row:last-child::after{display:none}
.slip .row::before{content:"";position:absolute;left:-28px;top:14px;width:10px;height:10px;border-radius:50%;border:2px solid var(--blue);background:var(--sheet);z-index:1}
.slip .row[data-s="wait"]::before{background:var(--dot-amber);border-color:var(--dot-amber)}
.slip .row[data-s="ver"]::before{background:var(--green);border-color:var(--green)}
.slip .row[data-s="after"]::before{border-color:var(--green)}
.slip .row[data-s="ver"]::after,.slip .row[data-s="after"]::after{background:var(--green)}
.slip .row[data-s="todo"]::before{border-color:var(--line-2)}
.slip .row[data-s="todo"]::after,.slip [data-view="yours"] .slip__top::after{background:var(--line-2)}
.slip dt{color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;padding-top:1px}
.slip dd{font-family:var(--sans);font-size:.9375rem;line-height:1.4}
.slip dd small{display:block;font-family:var(--mono);font-size:.75rem;color:var(--ink-3);margin-top:3px}
.slip del{color:var(--ink-3)}
.slip ins{text-decoration:none;background:var(--blue-50);color:var(--blue-d);padding:1px 4px;border-radius:3px}
.slip .todo{color:var(--ink-3)}
.stamp{display:inline-block;font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border:1.5px solid currentColor;border-radius:4px;transform:rotate(-2deg)}
.stamp--amber{color:var(--amber);background:var(--amber-50)}
.stamp--blue{color:var(--blue-d);background:var(--blue-50)}
.stamp--green{color:var(--green);background:var(--green-50)}
.slip__foot{margin-top:4px;padding-top:12px;border-top:1px dashed var(--line-2);font-size:.75rem;color:var(--ink-3)}
.slip [hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .slip--print .slip__paper{animation:print .9s var(--ease) .15s both}
  @keyframes print{from{clip-path:inset(-10px 0 100% 0);transform:translateY(-14px)}to{clip-path:inset(-10px 0 -10px 0);transform:none}}
  .h1 em{animation:pen .7s var(--ease) .5s both}
  @keyframes pen{from{background-size:0 .06em}to{background-size:100% .06em}}
}


/* ---------- scroll reveal: enhancement only ---------- */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 18%}@keyframes rv{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}}}
/* ---------- product scenes: four cropped moments of one example (Northfield Interiors, pricing page title).
   Built as live HTML in the product's own visual language so they stay sharp and light. Each sits in a media slot
   and can be swapped for real footage. Sizes are in em so the whole scene scales with its frame. ---------- */
.pn{background:var(--sheet);border:1px solid var(--line);border-radius:1em;padding:1.25em 1.35em;display:grid;gap:.9em;align-content:start}
.pl{display:inline-flex;align-items:center;gap:.4em;padding:.2em .7em;border-radius:99em;font-size:.8em;font-weight:500;white-space:nowrap;justify-self:start}
.pl--est{background:var(--blue-50);color:var(--blue-d)}
/* amber is only for an open human decision. "Early signal" is a classification, so it is neutral. */
.pl--wait{background:var(--amber-50);color:var(--amber)}
.pl--early{color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.pl--early::before,.pl--wait::before{content:"";width:.42em;height:.42em;border-radius:50%;border:1.5px solid currentColor}
.pl--fact,.pl--plain{background:#E9E9EE;color:var(--ink-2)}
.pl--inf{border:1px solid var(--line-2);color:var(--ink-2)}
.pl--ver{background:var(--green-50);color:var(--green);font-weight:600}
.bt{display:flex;justify-content:center;align-items:center;gap:.5em;height:2.75em;padding:0 1.2em;border-radius:.65em;font-weight:500;font-size:.94em;white-space:nowrap}
.bt--pri{background:var(--blue);color:#fff}
.bt--sec{border:1px solid var(--line-2);background:var(--sheet)}
.bt--txt{color:var(--blue);height:2em}
.serp{border:1px solid var(--line);border-radius:.8em;padding:.8em 1em;background:var(--sheet)}
.serp i{display:block;font-style:normal;font-size:.78em;color:var(--ink-3)}
.serp b{display:block;font-weight:400;font-size:1.12em;line-height:1.3;color:#1A0DAB}
.serp p{font-size:.8em;color:var(--ink-2);margin-top:.15em}
.serp--after{background:var(--blue-50);border-color:#B7CBEC}
.serp mark{background:rgba(5,150,105,.14);color:inherit;border-radius:.2em;padding:0 .1em}

/* step reveals. Without script, or with reduced motion, every scene simply shows its finished state. */

/* 1. Find: three opportunities, one becomes the next step */
.opps{display:grid;gap:.55em}
.opp{display:grid;gap:.35em;padding:.85em 1em;border:1px solid var(--line);border-radius:.8em;background:var(--sheet);transition:opacity .5s var(--ease),border-color .4s,box-shadow .4s,transform .5s var(--ease)}
.opp b{font-weight:600;font-size:.95em;line-height:1.3}
.opp--rest{border-style:dashed;background:transparent;color:var(--ink-2);font-size:.88em}
.flag{display:inline-flex;align-items:center;gap:.5em;font-size:.8em;font-weight:500;color:var(--blue-d)}
.flag::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--blue)}
.ev{display:grid}
.ev li{display:grid;grid-template-columns:5.2em minmax(0,1fr);column-gap:.9em;align-items:start;padding:.6em 0;border-top:1px solid var(--line);font-size:.92em}
.ev .pl{justify-self:stretch;justify-content:center}

/* 2. Approve: the exact change and the one human decision. Amber marks the point of authority, nothing else. */
.chg{display:grid;gap:.6em}
.chg .k{font-size:.8em;color:var(--ink-2)}
.chg .k--after{color:var(--blue-d);font-weight:500}
.dec{position:relative;transition:box-shadow .5s var(--ease),border-color .5s var(--ease)}
.dec__btns{display:grid;gap:.5em}
.dec__done{display:none;gap:.5em}
.dec__note{font-size:.8em;color:var(--ink-2)}
/* the decision and its result share the same rows, so approving never changes the panel's height */
/* every part of the decision panel sits in the one column: the approved state shares the rows of the waiting state, and without this the grid grew a second column (defect in v7.9 and v7.9.1) */
/* the status pill is amber only while the decision is open; once approved it reads "Approved" in blue */

/* 3. Do: only the approved change, shown as it happens. Execution stays blue: done is not the same as verified. */
.tl{position:relative;display:grid;gap:1em;padding-left:1.9em}
.tl::before{content:"";position:absolute;left:.4em;top:.5em;bottom:.5em;width:2px;background:var(--line-2)}
.tl li{position:relative;font-size:.94em}
.tl li b{display:block;font-weight:600}
.tl li::before{content:"";position:absolute;left:-1.9em;top:.18em;width:.95em;height:.95em;border-radius:50%;border:2px solid var(--line-2);background:var(--sheet);transition:background-color .4s,border-color .4s,box-shadow .4s}
.tl li.done::before{background:var(--blue);border-color:var(--blue)}
.tl li.now::before{border-color:var(--blue);box-shadow:0 0 0 .28em rgba(5,150,105,.15)}
.tl .bar{height:.3em;margin-top:.5em;border-radius:1em;background:var(--line);overflow:hidden;max-width:14em}
.tl .bar i{display:block;height:100%;background:var(--blue);transform-origin:0 50%}

/* 4. Prove: the live page is read back; green appears only when it matches. What followed stays separate and makes no causal claim. */
.chk{position:relative;overflow:hidden}
.chk__row{display:grid;gap:.15em;padding:.6em 0;border-top:1px solid var(--line);font-size:.92em}
.chk__row small{font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;font-size:.72em}
.chk__url{font-family:var(--mono);font-size:.78em;color:var(--ink-2);overflow-wrap:anywhere}
.out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6em}
.out div{border:1px solid var(--line);border-radius:.7em;padding:.7em .85em}
.out strong{display:block;white-space:nowrap;font-size:1.3em;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.out strong span{color:var(--ink-3);font-weight:400}
.caus{font-size:.8em;color:var(--ink-2)}

/* narrow frames (phones, tablets, small laptops): the scene stacks and keeps a readable type size */


/* ---------- control and coverage ---------- */
.ctrl__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:56px}
.ctrl__a{grid-column:1 / span 6}
.ctrl__b{grid-column:8 / -1}
.modes{margin-top:36px;display:grid}
.modes li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:4px;padding:22px 0;border-top:1px solid var(--line-2)}
.modes li:last-child{border-bottom:1px solid var(--line-2)}
.modes h3{font-size:1.375rem;font-weight:600;letter-spacing:-.02em}
.modes p{grid-column:1 / -1;color:var(--ink-2);font-size:1rem}
.modes .chip{grid-row:1;grid-column:2;align-self:center}
.cover h3{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--ink-2)}
.cover ul{margin-top:20px}
.cover li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-weight:500}
.cover li:last-child{border-bottom:1px solid var(--line)}
.cover__note{margin-top:16px;font-size:.875rem;color:var(--ink-2)}
@media (max-width:960px){.ctrl__a,.ctrl__b{grid-column:1 / -1}}


/* ---------- faq ---------- */
.faq__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.faq__grid .h2{grid-column:1 / span 4;font-size:clamp(2rem,3.6vw,3.5rem)}
.faq__list{grid-column:6 / -1}
.faq details{border-top:1px solid var(--line-2)}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font-size:clamp(1.125rem,1.5vw,1.375rem);font-weight:600;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--ink),var(--ink)) center / 100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center / 2px 100% no-repeat;transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary{transition:color .18s var(--ease),padding-left .25s var(--ease)}
@media (hover:hover){.faq summary:hover{color:var(--blue);padding-left:6px}.faq summary:hover::after{background:linear-gradient(var(--blue),var(--blue)) center / 100% 2px no-repeat,linear-gradient(var(--blue),var(--blue)) center / 2px 100% no-repeat}}
/* an answer opens and closes smoothly where the browser can animate to its natural height */
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion:no-preference){
    .faq details{interpolate-size:allow-keywords}
    .faq details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .35s var(--ease),opacity .3s var(--ease),content-visibility .35s allow-discrete}
    .faq details[open]::details-content{block-size:auto;opacity:1}
  }
}
.faq details p{padding:0 48px 24px 0;color:var(--ink-2);max-width:40em}
@media (max-width:860px){.faq__grid .h2,.faq__list{grid-column:1 / -1}.faq__list{margin-top:32px}}


/* ---------- closing call to action ---------- */
.end{background:var(--blue);color:#fff;padding-block:clamp(88px,12vw,184px);text-align:center}
.end .h2{font-size:clamp(2.5rem,6.4vw,6rem);letter-spacing:-.05em;line-height:.94;max-width:14em;margin-inline:auto}
.end .scan{margin:clamp(32px,4vw,56px) auto 0}
.end .scan__box{border-color:transparent;color:var(--ink)}
.end .scan__box:focus-within{box-shadow:0 0 0 4px rgba(255,255,255,.35)}
.end .scan__note{color:#DCE6F6}
.end ::selection{background:#fff;color:var(--blue)}
.end :focus-visible{outline-color:#fff}


/* ---------- footer ---------- */
.ftr{background:var(--paper);padding-block:clamp(56px,7vw,96px) 32px}
.ftr__grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(5,minmax(0,1fr));gap:40px 20px}
.ftr__brand p{margin-top:16px;color:var(--ink-2);max-width:16em}
.ftr h2{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--ink-3)}
.ftr ul{margin-top:14px;display:grid;gap:4px}
.ftr li a{display:inline-block;padding:5px 0;text-decoration:none;font-size:.9375rem;color:var(--ink-2)}
.ftr li a:hover{color:var(--ink);text-decoration:underline}
.ftr__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-3)}
.ftr__base a{padding:4px 0}
@media (max-width:1040px){.ftr__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ftr__brand{grid-column:1 / -1}}
@media (max-width:640px){.ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==========================================================================
   INNER-PAGE SYSTEM (built on homepage v7.8). The homepage is the cinematic page.
   Inner pages stay calmer than the homepage. Their signature is the ledger: the Growth Receipt's margin rail, used as page layout.
   A page's main product object may have one semantic moment that shows a real change of state. Two mechanisms carry it and no others:
     play once        a figure plays its stages once, in order, when the reader reaches it ([data-seq])
     reader-following a large object or figure rests in the window (CSS position:sticky) and takes the state of the place
                      being read ([data-follow], positions marked [data-at])
   Motion must explain the product, settle into a readable still, respect reduced motion, and use these two mechanisms.
   No scroll hijacking, no smooth-scroll library, no WebGL, no per-page scripts. A specimen that only shows a label does not move.
   ========================================================================== */
.nav a[aria-current="page"]{color:var(--ink)}
.ftr li a[aria-current="page"]{color:var(--ink)}
.menu a.m[aria-current="page"]{color:var(--blue)}

/* Responsive system v1.2, FROZEN. Three breakpoints, used the same way by every inner-page component:
     up to 719px    phone and small tablet: one-column storytelling
     720 to 859px   tablet portrait: stacked page head, vertical step index, copy and exhibit side by side
     860 to 1040px  large tablet and small laptop: split page head, horizontal step rail, copy and exhibit side by side
     above 1040px   desktop: full ledger with the sticky key column
   Components shared with the homepage (header, scan form, control and coverage, FAQ, footer) keep their own content-driven widths. */

/* ---------- page head: breadcrumb, h1, answer-first lede, facts ---------- */
.ph{padding-top:calc(72px + clamp(36px,5.5vw,88px));padding-bottom:clamp(40px,5vw,72px)}
.crumb ol{display:flex;flex-wrap:wrap;gap:.6em;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.crumb li+li::before{content:"/";margin-right:.6em;color:var(--ink-3)}
.crumb a{text-decoration:none;display:inline-block;padding-block:6px}
.crumb li{padding-block:6px}.crumb li:has(a){padding-block:0}
.crumb a:hover{text-decoration:underline}
.h1in{font-size:clamp(2.5rem,5.8vw,5.5rem);font-weight:600;letter-spacing:-.045em;line-height:.98;margin-top:16px;max-width:13.5em;text-wrap:balance}
.ph__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;margin-top:clamp(28px,3.4vw,56px);align-items:start}
.ph__lede{grid-column:1 / span 7}
.ph__lede .lede{color:var(--ink)}
.ph__act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(24px,2.6vw,36px)}
.ph__facts{grid-column:9 / -1;font-size:.9375rem}
.facts div{display:grid;grid-template-columns:9.5ch minmax(0,1fr);column-gap:16px;padding:11px 0;border-top:1px dashed var(--line-2)}
.facts div:last-child{border-bottom:1px dashed var(--line-2)}
.facts dt{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:.2em}
.facts dd{color:var(--ink)}
.ph__more{margin-top:clamp(32px,4vw,56px);max-width:34em;font-size:.9375rem}
.ph__slip{grid-column:8 / -1;display:flex;justify-content:flex-end;container-type:inline-size}
.ph__slip > .xb{flex:1;min-width:0}
.ph__grid:has(.ph__slip) .ph__lede{grid-column:1 / span 6}
@media (min-width:860px) and (max-width:1040px){.ph__slip{grid-column:7 / -1}}
@media (max-width:1040px){.ph__slip .stamp{font-size:.6875rem;letter-spacing:.06em;padding:5px 8px}}
@media (max-width:859px){.ph__lede,.ph__facts,.ph__slip,.ph__grid:has(.ph__slip) .ph__lede{grid-column:1 / -1}.ph__slip{justify-content:flex-start}.ph{padding-top:calc(64px + 32px)}}

/* ---------- the loop strip: every step at a glance, and the in-page index.
   Four stage names sit over seven steps at every width. A horizontal rail from 860px, a vertical one below. ---------- */
.loop{margin-top:clamp(48px,6vw,96px)}
.loop ol{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));padding-top:32px}
.loop li{position:relative;padding-top:26px}
.loop li::after{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:var(--blue)}
.loop li:last-child::after{right:auto;width:5px}
.loop li[data-s="ver"]::after,.loop li[data-s="after"]::after{background:var(--green)}
.loop__stage{position:absolute;left:0;top:-32px;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.loop a{position:relative;display:block;padding:0 12px 4px 0;text-decoration:none;min-height:44px}
.loop a::before{content:"";position:absolute;left:0;top:-26px;width:10px;height:10px;border-radius:50%;border:2px solid var(--blue);background:var(--paper);z-index:1}
.loop li[data-s="wait"] a::before{background:var(--dot-amber);border-color:var(--dot-amber)}
.loop li[data-s="ver"] a::before{background:var(--green);border-color:var(--green)}
.loop li[data-s="after"] a::before{border-color:var(--green)}
.loop a span{display:block;font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.loop a b{display:block;font-weight:600;letter-spacing:-.015em;font-size:clamp(.9375rem,1.25vw,1.125rem);line-height:1.25;margin-top:2px}
.loop a small{display:block;font-size:.8125rem;color:var(--ink-2);margin-top:2px}
.loop li[data-s="wait"] a small{color:var(--amber);font-weight:500}
.loop a:hover b{text-decoration:underline;text-underline-offset:.18em}
@media (max-width:859px){
  .loop ol{grid-template-columns:1fr;padding-top:0}
  .loop li{padding:0 0 0 26px}
  .loop li[data-stage]{padding-top:14px}
  .loop li:first-child{padding-top:0}
  .loop__stage{position:static;display:block;height:24px;line-height:24px}
  .loop li::after{left:4px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .loop li:first-child::after{top:42px}
  .loop li:last-child::after{bottom:auto;width:2px;height:20px}
  /* the rail stays blue down to the Verify node and is green from there on */
  .loop li[data-s="ver"]::after{background:linear-gradient(var(--blue),var(--blue)) 0 0 / 100% 56px no-repeat,var(--green)}
  .loop a{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;align-items:baseline;column-gap:8px;padding:9px 0;min-height:44px}
  .loop a::before{left:-26px;top:14px}
  .loop a b{margin:0;font-size:1.0625rem}
  /* only the human step names its owner here; six repeats of "Tractionora" add nothing */
  .loop a small{display:none;margin:0}
  .loop li[data-s="wait"] a small{display:block}
}

/* ---------- section head used on inner pages ---------- */
.sh{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:16px;align-items:end;margin-bottom:clamp(24px,3vw,48px)}
.sh .h2{grid-column:1 / span 8;font-size:clamp(2rem,3.8vw,3.5rem)}
.sh p{grid-column:9 / -1;color:var(--ink-2);font-size:1rem}
@media (max-width:859px){.sh .h2,.sh p{grid-column:1 / -1}}

/* ---------- the ledger: one row per step, with the receipt's margin rail down the left edge.
   Blue while finding and doing, amber at the human decision, green only from verification on. ---------- */
.led__row{position:relative;padding-left:32px}
.led__row::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:var(--blue)}
.led__row:first-child::after{top:calc(var(--led-pad) + 18px)}
.led__row::before{content:"";position:absolute;left:0;top:calc(var(--led-pad) + 14px);width:10px;height:10px;border-radius:50%;border:2px solid var(--blue);background:var(--sheet);z-index:1}
.led__row[data-s="wait"]::before{background:var(--dot-amber);border-color:var(--dot-amber)}
.led__row[data-s="ver"]::before{background:var(--green);border-color:var(--green)}
.led__row[data-s="after"]::before{border-color:var(--green)}
.led__row[data-s="ver"]::after{background:linear-gradient(var(--blue),var(--blue)) 0 0 / 100% calc(var(--led-pad) + 18px) no-repeat,var(--green)}
.led__row[data-s="after"]::after{background:var(--green)}
.led__row[data-s="after"][data-turn]::after{background:linear-gradient(var(--blue),var(--blue)) 0 0 / 100% calc(var(--led-pad) + 18px) no-repeat,var(--green)}
.led{--led-pad:clamp(36px,4.6vw,72px)}
.led__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px;align-items:start;padding-block:var(--led-pad);border-top:1px solid var(--line)}
.led__row:last-child .led__in{border-bottom:1px solid var(--line)}
.led__k{grid-column:1 / span 2;align-self:stretch}
.led__k > div{position:sticky;top:104px;display:grid;gap:14px;justify-items:start}
.led__n{font-family:var(--mono);font-size:clamp(2rem,3vw,2.75rem);line-height:1;letter-spacing:-.04em}
.led__you{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.led__body{grid-column:3 / span 5}
.led__h{font-size:clamp(1.75rem,2.7vw,2.5rem);font-weight:600;letter-spacing:-.035em;line-height:1.05}
.led__q{margin-top:14px;font-size:var(--fs-lede);line-height:1.35;font-weight:500;letter-spacing:-.01em;max-width:30em}
.led__p{margin-top:16px;color:var(--ink-2);max-width:34em;text-wrap:pretty}
.who{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;max-width:34em}
.who div{padding-top:12px;border-top:1px solid var(--line-2)}
.who dt{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.who dd{margin-top:4px;font-size:.9375rem;line-height:1.45}
/* amber marks the approval and nothing else, so "You" is amber only on the approval row */
.led__row[data-s="wait"] .who div[data-you] dt{color:var(--amber)}
/* what this step writes on the Growth Receipt */
.rline{margin-top:24px;max-width:34em}
.rline > span{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.rline dl{background:var(--paper);padding:2px 16px}
.rline dl div{display:grid;grid-template-columns:8.5ch minmax(0,1fr);column-gap:12px;padding:11px 0}
.rline dl div+div{border-top:1px dashed var(--line-2)}
.rline dt{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:.15em}
.rline dd{font-size:.9375rem;line-height:1.4}
.rline dd small{display:block;font-family:var(--mono);font-size:.75rem;color:var(--ink-3);margin-top:3px}
.rline del{color:var(--ink-3)}
.rline ins{text-decoration:none;background:var(--blue-50);color:var(--blue-d);padding:1px 4px;border-radius:3px}
.rline--none p{color:var(--ink-3);font-size:.9375rem}
/* a stamp stays on one line wherever it fits (it may use a little of the right padding) and wraps only when its column is too narrow */
.rline{container-type:inline-size}
.rline .stamp{margin-right:-10px}
.fin .stamp,.ph__slip .stamp{margin-right:-14px}
@media (max-width:859px){.rline dl{padding-inline:12px}}
/* the stamp takes its compact size whenever its own receipt line is narrow, whatever the screen width */
@container (max-width:460px){.rline dl div{grid-template-columns:7.5ch minmax(0,1fr)}.rline .stamp{font-size:.6875rem;letter-spacing:.06em;padding:5px 8px}}
@media (max-width:1040px){.fin .stamp{font-size:.6875rem;letter-spacing:.06em;padding:5px 8px}}
.led__fig{grid-column:8 / -1}
@media (max-width:1040px){
  .led__k{grid-column:1 / -1}
  .led__k > div{position:static;display:flex;align-items:center;gap:14px}
  .led__body{grid-column:1 / span 6}.led__fig{grid-column:7 / -1}
}
@media (min-width:720px) and (max-width:1040px){.who{grid-template-columns:1fr;row-gap:14px}}
@media (max-width:719px){
  .led__row{padding-left:26px}
  .led__body,.led__fig{grid-column:1 / -1}
  .led__in{row-gap:20px}
}
@media (max-width:480px){.who{grid-template-columns:1fr;row-gap:14px}}

/* ---------- exhibits: one static product state per step, in the product's own visual language.
   Each sits in a media slot and can be swapped for a real screenshot. ---------- */
.xb{border-radius:16px;border:1px solid var(--line);background:var(--paper);padding:14px;font-size:14px;line-height:1.45;display:grid;gap:10px;color:var(--ink)}
.xb__bar{display:flex;justify-content:space-between;align-items:center;gap:1em;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:0 2px}
.xb__ex{padding:.3em .8em;border:1px dashed var(--line-2);border-radius:99em;color:var(--ink-2);white-space:nowrap}
.xb small{display:block;font-size:.82em;color:var(--ink-3);font-weight:400}
.xb h4{margin:0;font-size:1.2em;font-weight:600;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.xb .lab{font-size:.84em;font-weight:600}
.xb .lab small{font-weight:400;margin-top:.15em}
.xb .dec{border-color:var(--dot-amber);box-shadow:0 0 0 .28em rgba(217,138,31,.16)}
.xb .opp--sel{border-color:var(--blue);box-shadow:0 0 0 .22em rgba(5,150,105,.13)}
.xb .kv{display:grid}
.xb .outs{display:flex;flex-wrap:wrap;gap:.4em}
.xb .pl--on{background:var(--ink);color:#fff}
.led__fig{min-width:0;container-type:inline-size}
.xb > *{min-width:0}
@container (max-width:420px){.xb{font-size:13.5px;padding:10px}.xb__bar > span:first-child{display:none}.xb__bar{justify-content:flex-end}.xb__ex{white-space:normal;text-align:right;border-radius:12px}}

/* ---------- the finished receipt ---------- */
.fin__grid,.duo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px;align-items:start}
.fin__copy,.duo__copy{grid-column:1 / span 6;padding-top:clamp(0px,3vw,48px)}
.duo__copy .who{margin-top:28px}
.duo__fig{grid-column:8 / -1;min-width:0;container-type:inline-size}
.fin__copy .lede{margin-top:20px}
.fin__copy .link{margin-top:28px}
.fin__slip{grid-column:8 / -1;display:flex;justify-content:center}
/* in the split band below desktop the receipt takes six columns, so it is never narrower than on a phone */
@media (min-width:860px) and (max-width:1040px){.fin__slip{grid-column:7 / -1;justify-content:flex-end}.duo__fig{grid-column:7 / -1}}
@media (max-width:859px){.fin__copy,.fin__slip,.duo__copy,.duo__fig{grid-column:1 / -1}.fin__slip{justify-content:flex-start}}

/* ---------- control: what stays with you ---------- */
.ctrl .assure{margin-top:0;margin-bottom:clamp(48px,6vw,88px);border-top:0}
.ctrl .assure li{padding-top:0}

/* ---------- next page ---------- */
.next{border-top:1px solid var(--line);background:var(--sheet)}
.next a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding-block:clamp(32px,4vw,56px);text-decoration:none}
.next span{grid-column:1 / span 2;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.next b{grid-column:3 / span 8;font-size:clamp(1.5rem,3vw,2.75rem);font-weight:600;letter-spacing:-.035em;line-height:1.08}
.next b small{display:block;font-size:1rem;font-weight:400;letter-spacing:0;color:var(--ink-2);margin-top:8px;line-height:1.45}
.next svg{grid-column:12;justify-self:end;width:clamp(28px,3vw,44px);height:auto;transition:transform .2s var(--ease)}
.next a:hover svg{transform:translateX(6px)}
@media (max-width:719px){.next a{grid-template-columns:minmax(0,1fr) auto;column-gap:16px}.next span,.next b{grid-column:1}.next span{margin-bottom:8px}.next svg{grid-column:2;grid-row:1 / span 2;width:28px}}

/* ---------- receipt lines shown as an exhibit: each state a line can be in ---------- */
.led__fig .rline{margin-top:0;max-width:none}
.led__fig .rline + .rline,.led__fig .rline + .xb,.led__fig .xb + .rline{margin-top:20px}
.outs{display:flex;flex-wrap:wrap;gap:.4em;margin-top:10px;font-size:.875rem}
.outs .pl--on{background:var(--ink);color:#fff}

/* ---------- what a receipt can and cannot say ---------- */
.say{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:32px}
.say div{padding-top:16px;border-top:1px solid var(--line-2)}
.say dt{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.say dd{margin-top:12px}
.say dd b{display:block;font-size:clamp(1.375rem,2.4vw,2.125rem);font-weight:600;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
.say dd span{display:block;margin-top:12px;color:var(--ink-2);max-width:30em}
.say + .assure{margin-top:clamp(40px,5vw,72px)}
@media (max-width:719px){.say{grid-template-columns:1fr}}

/* ---------- colour key: what each colour is allowed to mean ---------- */
.key li{display:grid;grid-template-columns:28px 7.5em minmax(0,1fr);column-gap:16px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line)}
.key li:last-child{border-bottom:1px solid var(--line)}
.key i{width:12px;height:12px;border-radius:50%;align-self:center;background:var(--blue)}
.key li[data-c="amber"] i{background:var(--dot-amber)}
.key li[data-c="green"] i{background:var(--green)}
.key li[data-c="grey"] i{background:var(--line-2)}
.key b{font-weight:600}
.key span{color:var(--ink-2)}
@media (max-width:719px){.key li{grid-template-columns:28px minmax(0,1fr);row-gap:2px}.key span{grid-column:2}}

/* ---------- published receipts: the table for real, permissioned receipts. Not shown until the first one exists. ---------- */
.pub{width:100%;border-collapse:collapse;text-align:left}
.pub th{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--ink-3);padding:0 16px 12px 0;border-bottom:1px solid var(--line-2)}
.pub td{padding:22px 0;border-bottom:1px dashed var(--line-2);color:var(--ink-2)}
.pub + .link{margin-top:28px}
.sh + .link{margin-top:0}
@media (max-width:719px){.pub th:nth-child(n+3){display:none}}

/* ---------- the mission card: one Growth Mission shown as an object, in whichever state it is in.
   Built from the product vocabulary (.xb, .pn, .tl, .pl, .bt). Swap-ready, like every exhibit. ---------- */
.mis{font-size:14.5px;gap:12px}
.mis__top{display:grid;gap:.5em;padding:4px 4px 0}
.mis__t{font-size:1.3em;font-weight:600;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.mis .tl{gap:.85em}
.mis .tl li.wait::before{background:var(--dot-amber);border-color:var(--dot-amber);box-shadow:0 0 0 .28em rgba(217,138,31,.16)}
.mis .tl li.wait b{color:var(--amber)}
.mis .tl li.ver::before{background:var(--green);border-color:var(--green)}
.mis .tl li.ver b{color:var(--green)}
.mis__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:2px 4px 2px}
.mis__foot .bt{height:2.6em}
@container (max-width:420px){.mis{font-size:13.5px}.mis__foot .bt{flex:1 1 100%}}

/* ---------- what a mission holds: six parts, each with the example beside it ---------- */
.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:clamp(28px,3.4vw,48px)}
.parts > div{padding-top:16px;border-top:1px solid var(--line-2);display:grid;grid-template-rows:auto auto 1fr;align-content:start}
.parts dt{display:flex;gap:.9em;align-items:baseline;font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.parts dt .chip{margin-left:auto;align-self:center}
.parts dt span:not(.chip){font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.06em;color:var(--ink-3)}
.parts dd{margin-top:8px;color:var(--ink-2);max-width:30em}
.parts dd.eg{align-self:end;margin-top:16px;padding:12px 14px;background:var(--sheet);border:1px solid var(--line);border-radius:10px;font-size:.9375rem;line-height:1.4;color:var(--ink)}
.parts dd.eg small{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.parts del{color:var(--ink-3)}
.parts ins{text-decoration:none;background:var(--blue-50);color:var(--blue-d);padding:1px 4px;border-radius:3px}
@media (max-width:1040px){.parts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:719px){.parts{grid-template-columns:1fr}}

/* ---------- Solutions: row link, facts that jump to a row, and a list inside an exhibit ---------- */
.led__go{margin-top:24px}
.led__note{margin-top:12px;font-size:.875rem;color:var(--ink-2)}
.facts dt a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.facts dt a:hover{color:var(--ink);text-decoration-color:currentColor}
.parts dd.go{align-self:end;margin-top:16px;color:var(--ink)}
.mis__top small{font-size:.9em}
.rows{display:grid}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:6px;align-items:center;padding:.8em 0;border-top:1px solid var(--line)}
.rows li:first-child{border-top:0;padding-top:0}
.rows li:last-child{padding-bottom:0}
.rows b{display:block;font-weight:600;line-height:1.3}
.rows small{margin-top:.15em}
@container (max-width:420px){.rows li{grid-template-columns:minmax(0,1fr)}.rows .pl{justify-self:start}}

/* ---------- page head with the scan form ---------- */
.ph__lede .scan{margin-top:clamp(24px,2.6vw,36px);max-width:560px}

/* ---------- the scan result (signature object of the Opportunity Scan page) ---------- */
.res{font-size:14.5px;gap:12px}
.res .unk{display:grid}
.res .unk li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:.6em 0;border-top:1px solid var(--line);font-size:.92em}
.res .unk li span{flex:none;font-family:var(--mono);font-size:.74em;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
@container (max-width:420px){.res{font-size:13.5px}.res .unk li{display:grid;gap:2px}}

/* ---------- the compression: many observations, a few Opportunities, one place to start.
   Three stages side by side from 860px, stacked below. This is the finished state; the motion is in "signature moments" below. ---------- */
.fun{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.15fr);column-gap:clamp(40px,5vw,72px);align-items:start}
.fun__s{position:relative}
.fun__s + .fun__s::before{content:"";position:absolute;left:calc(clamp(40px,5vw,72px) * -.5 - 5px);top:clamp(1.5rem,3vw,2.75rem);width:10px;height:10px;border-top:2px solid var(--line-2);border-right:2px solid var(--line-2);transform:rotate(45deg)}
.fun__n{font-size:clamp(3.25rem,6.4vw,5.75rem);font-weight:600;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}
.fun__l{margin-top:10px;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);min-height:2.6em}
.fun__body{margin-top:20px;font-size:14.5px;line-height:1.45}
.fun__cells{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;max-width:300px}
.fun__cells i{aspect-ratio:1;border-radius:2px;background:var(--line)}
.fun__cells i.k{background:var(--blue)}
.fun .opps{gap:8px}
.fun .opp small{font-size:.82em;color:var(--ink-3)}
.fun .opp--sel{border-color:var(--blue);box-shadow:0 0 0 .22em rgba(5,150,105,.13)}
.fun figcaption,.pair figcaption{grid-column:1 / -1;margin-top:clamp(28px,3vw,44px);padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem;color:var(--ink-2);max-width:none}
@media (max-width:859px){
  .fun{grid-template-columns:1fr;row-gap:44px}
  .fun__s + .fun__s::before{left:4px;top:-27px;transform:rotate(135deg)}
  .fun__l{min-height:0}
}

/* Wide screens: the three stages are a field, a shortlist and a decision, and their weight grows in that order.
   The numbers share a baseline, the 87 cells fill their column, and the place to start is the largest object on the row. */
@media (min-width:1041px){
  .fun{--n3:clamp(6.5rem,9.6vw,9rem);grid-template-columns:minmax(0,.86fr) minmax(0,1fr) minmax(0,1.32fr);grid-template-rows:auto auto 1fr;column-gap:clamp(48px,5vw,84px)}
  .fun__s{display:grid;grid-row:1 / span 3;grid-template-rows:subgrid}
  .fun__n{align-self:end}
  .fun__s--all .fun__n{font-size:clamp(3.5rem,5.2vw,4.75rem);font-weight:500;color:var(--ink-2)}
  .fun__s--few .fun__n{font-size:clamp(4.75rem,7vw,6.5rem)}
  .fun__s--one .fun__n{font-size:var(--n3)}
  .fun__s + .fun__s::before{top:calc(var(--n3) * .48);left:calc(clamp(48px,5vw,84px) * -.5 - 6px);width:12px;height:12px}
  .fun__l{min-height:0}
  .fun__body{margin-top:24px}
  .fun__cells{max-width:none;gap:6px}
  .fun__cells i{border-radius:3px}
  .fun__s--few .fun__body{font-size:15.5px}
  .fun__s--few .opps{gap:10px}
  .fun__s--one .fun__body{font-size:clamp(17px,1.4vw,20px)}
  .fun__s--one .opp{gap:.6em;padding:1.35em 1.45em 1.3em;border-radius:1em;border-color:var(--blue);box-shadow:0 0 0 .2em rgba(5,150,105,.13),0 30px 44px -30px rgba(20,21,26,.34)}
  .fun__s--one .opp b{font-size:1.16em;letter-spacing:-.015em;line-height:1.25}
  .fun__s--one .opp small{font-size:.86em;line-height:1.45;color:var(--ink-2)}
  .fun__s--one .flag{font-size:.78em}
}

/* ---------- signature moments (motion). Enhancement only.
   The page script arms a figure ([data-seq]) with .is-anim. Each stage ([data-stage]) then gets .on and, where it has a second beat, .on2,
   once and in order, when it is on screen. The figure collects .s1, .s2, ... as stages start and ends with .is-done.
   Only opacity, transform, colour and shadow change, so nothing moves the layout.
   Without script, without motion allowed, or in print, none of these rules apply and the finished state shows. ---------- */
.fun{position:relative}
.fly{position:absolute;z-index:2;width:10px;height:10px;border-radius:2px;background:var(--blue);pointer-events:none;transition:transform .64s var(--ease),opacity .22s linear .46s}
@media screen and (prefers-reduced-motion:no-preference){
  /* a stage's number, label and arrow stay quiet until the stage starts */
  .is-anim [data-stage] .fun__n,.is-anim [data-stage] .fun__l,.is-anim [data-stage] .pair__k,.is-anim [data-stage]::before{transition:opacity .5s var(--ease)}
  .is-anim [data-stage]:not(.on) .fun__n,.is-anim [data-stage]:not(.on) .fun__l,.is-anim [data-stage]:not(.on) .pair__k{opacity:.22}
  .is-anim [data-stage]:not(.on)::before{opacity:.2}

  /* 87: every observation arrives, then most fall back, the related ones group, and three stand for the groups */
  .fun.is-anim .fun__cells i{opacity:0;transform:scale(.3);background:var(--ink-3);transition:opacity .3s var(--ease) calc(var(--i) * 9ms),transform .3s var(--ease) calc(var(--i) * 9ms),background-color .55s var(--ease),box-shadow .4s var(--ease)}
  .fun.is-anim .on .fun__cells i{opacity:1;transform:none}
  .fun.is-anim .on2 .fun__cells i{background:var(--line);transition-delay:0s}
  .fun.is-anim .on2 .fun__cells i.g{background:rgba(5,150,105,.32)}
  .fun.is-anim .on2 .fun__cells i.k{background:var(--blue);box-shadow:0 0 0 3px rgba(5,150,105,.16)}
  .fun.is-anim.s2 .on2 .fun__cells i.g{background:var(--line)}
  .fun.is-anim.s2 .on2 .fun__cells i.k{box-shadow:none}

  /* 3: the Opportunities arrive where the marks land; then one is chosen and the others step back */
  .fun.is-anim .opp{opacity:0;transform:translateY(.8em);transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
  .fun.is-anim .fun__s--few.on .opp{opacity:1;transform:none;transition-delay:.5s}
  .fun.is-anim .fun__s--few.on .opp:nth-child(2){transition-delay:.64s}
  .fun.is-anim .fun__s--few.on .opp:nth-child(3){transition-delay:.78s}
  .fun.is-anim .fun__s--few.on2 .opp:first-child{border-color:var(--blue);box-shadow:0 0 0 .22em rgba(5,150,105,.13);transition-delay:0s}
  .fun.is-anim .fun__s--few.on2 .opp:not(:first-child){opacity:.5;transform:scale(.97);transition-delay:0s}
  .fun.is-anim.is-done .fun__s--few.on2 .opp:first-child{border-color:var(--line);box-shadow:none}
  .fun.is-anim.is-done .fun__s--few.on2 .opp:not(:first-child){opacity:1;transform:none}

  /* 1: the place to start, then its reason, then its label */
  .fun.is-anim .fun__s--one.on .opp{opacity:1;transform:none;transition-delay:.5s}
  .fun.is-anim .fun__s--one .opp > *{opacity:0;transition:opacity .45s var(--ease)}
  .fun.is-anim .fun__s--one.on .opp > *{opacity:1;transition-delay:.7s}
  .fun.is-anim .fun__s--one.on .opp > small{transition-delay:1s}
  .fun.is-anim .fun__s--one.on .opp > .pl{transition-delay:1.3s}

  /* the same Opportunity, with data connected: the finding, then its evidence line by line, then the strength label it has earned */
  .pair.is-anim [data-stage] .xb{opacity:0;transform:translateY(1em);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .pair.is-anim .on .xb{opacity:1;transform:none;transition-delay:.25s}
  .pair.is-anim [data-stage] .ev li{opacity:0;transform:translateY(.6em);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .pair.is-anim .on .ev li{opacity:1;transform:none;transition-delay:.95s}
  .pair.is-anim .on .ev li:nth-child(2){transition-delay:1.45s}
  .pair.is-anim .on .ev li:nth-child(3){transition-delay:1.95s}
  .pair.is-anim [data-stage] .mis__top .pl{opacity:0;transform:scale(.88);transform-origin:0 50%;transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .pair.is-anim .on .mis__top .pl{opacity:1;transform:none;transition-delay:2.5s}
  .pair.is-anim [data-stage] .mis__foot{opacity:0;transition:opacity .5s var(--ease)}
  .pair.is-anim .on .mis__foot{opacity:1;transition-delay:2.9s}
  /* the unknown on the left is the thing the data answers */
  .pair.is-anim.s1 .is-unk{animation:unk 1.5s var(--ease) 1}
  @keyframes unk{0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}30%{box-shadow:0 0 0 .32em rgba(5,150,105,.2)}}
}

/* ---------- a figure the reader plays by scrolling (.scene, Opportunity Scan). Built like the homepage's "87 to 3" scene.
   A long sequence on a clock gets scrolled past. Here the figure comes to rest in the window (position:sticky) and the reader's scroll
   plays it: 87 observations fade to the 3 that matter, the three Opportunities arrive, one is chosen and becomes the place to start.
   The page script sets --p (0 to 1) from the scroll position, writes the large number, and sets .s-few and .s-one at the second and
   third stage. Everything else is CSS on those. Scrolling back plays it backwards, and nothing is on a clock.
   .is-live is set only where script and motion are available and the figure fits the window. Otherwise the three stages are shown
   side by side (or stacked) and play once, as before. One composition serves phone and desktop: number, label, one stage. ---------- */
.fun__big{display:none}
@media screen{
  .scene.is-live{position:relative}
  .scene.is-live > .scene__pin{position:sticky;top:var(--pin,88px)}
  .scene.is-live::after{content:"";display:block;height:160vh}
  /* where the heading cannot stay in view it would sit half under the header for the whole scene, so it steps back once the figure is at rest */
  .scene.is-short .sh{opacity:calc(1 - var(--p,0) * 14)}

  /* --f: observations to Opportunities.  --c: each Opportunity arriving.  --g: the choice.  --h: the place to start taking over. */
  .scene.is-live .fun{--f:clamp(0,calc((var(--p,0) - .12) / .24),1);--g:clamp(0,calc((var(--p,0) - .62) / .16),1);--h:clamp(0,calc((var(--p,0) - .68) / .14),1);
    animation:none;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;row-gap:0;align-items:end}
  .scene.is-live .fun__s{display:contents}
  .scene.is-live .fun__s::before{content:none}
  /* the three numbers stay in the page for assistive technology; the large number on screen is drawn by the script */
  .scene.is-live .fun__n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .scene.is-live .fun__big{display:block;grid-column:1;grid-row:1;font-style:normal;font-size:clamp(4.5rem,24vw,6rem);font-weight:600;letter-spacing:-.07em;line-height:.8;font-variant-numeric:tabular-nums;margin-left:-.04em;min-width:1.15em}
  .scene.is-live .fun__l{grid-column:2;grid-row:1;margin:0 0 .3em;min-height:2.6em;opacity:0;transition:opacity .3s var(--ease)}
  /* while the number is counting down it has no label: a half-way number is not a finding */
  .scene.is-live .fun__s--all .fun__l{opacity:calc(1 - var(--f) * 2.5);transition:none}
  .scene.is-live.s-few:not(.s-one) .fun__s--few .fun__l,.scene.is-live.s-one .fun__s--one .fun__l{opacity:1}
  .scene.is-live .fun__body{grid-column:1 / -1;grid-row:2;margin-top:16px;align-self:start;min-width:0;font-size:14.5px}
  /* stage 1: the field */
  .scene.is-live .fun__cells{grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;max-width:none}
  .scene.is-live .fun__cells i{aspect-ratio:1;border-radius:3px;background:var(--ink);opacity:calc((1 - var(--f) * .9) * (1 - var(--g)))}
  .scene.is-live .fun__cells i.g{background:color-mix(in srgb,var(--ink),var(--blue) calc(var(--f) * 100%));opacity:calc((1 - var(--f) * .64) * (1 - var(--g)))}
  .scene.is-live .fun__cells i.k{background:color-mix(in srgb,var(--ink),var(--blue) calc(var(--f) * 100%));opacity:calc(1 - var(--g))}
  /* stage 2: the shortlist arrives over the field. Stage 3: one is chosen, and the place to start takes its position. */
  .scene.is-live .fun .opps{gap:8px}
  .scene.is-live .fun__s--few .opps{padding-bottom:var(--dy,0px)}
  .scene.is-live .fun__s--few .opp{--c:clamp(0,calc((var(--p,0) - .3 - var(--n,0) * .05) / .12),1);opacity:var(--c);transform:translateY(calc((1 - var(--c)) * 30px));box-shadow:0 18px 40px -26px rgba(20,21,26,.35)}
  .scene.is-live .fun__s--few .opp:nth-child(2){--n:1}
  .scene.is-live .fun__s--few .opp:nth-child(3){--n:2}
  .scene.is-live .fun__s--few .opp:first-child{border-color:color-mix(in srgb,var(--line),var(--blue) calc(var(--g) * 100%));box-shadow:0 0 0 .22em rgb(5 150 105 / calc(var(--g) * .13)),0 18px 40px -26px rgba(20,21,26,.35)}
  .scene.is-live .fun__s--few .opp:first-child > *{opacity:calc(1 - var(--h) * 3)}
  .scene.is-live .fun__s--few .opp:not(:first-child){opacity:calc(var(--c) * (1 - var(--g) * .5));transform:translateY(calc((1 - var(--c)) * 30px + var(--dy,0px) * var(--h)))}
  .scene.is-live .fun__s--one{pointer-events:none}
  /* the place to start unrolls over the chosen Opportunity like a sheet, so the two are never read through each other */
  .scene.is-live .fun__s--one .opp{clip-path:inset(calc(-14px * var(--h)) -14px calc((1 - var(--h)) * 100%) -14px)}
  .scene.is-live .fun figcaption{grid-column:1 / -1;grid-row:3;margin-top:18px;padding-top:12px;font-size:.8125rem}
}
/* tablets: a wider, flatter field */
@media screen and (min-width:600px) and (max-width:859px){
  .scene.is-live .fun__cells{grid-template-columns:repeat(15,minmax(0,1fr));gap:6px}
  .scene.is-live .fun__cells i{aspect-ratio:3 / 2;border-radius:4px}
  .scene.is-live .fun__body{font-size:15.5px}
}
/* phones: the two Opportunities not chosen step right back, so the place to start has the stage */
@media screen and (max-width:599px){
  .scene.is-live .fun__s--few .opps{padding-bottom:0}
  .scene.is-live .fun__s--few .opp:not(:first-child){opacity:calc(var(--c) * (1 - var(--h)));transform:translateY(calc((1 - var(--c)) * 30px))}
}
/* wide screens: the number on the left, the stage on the right, as on the homepage */
@media screen and (min-width:860px){
  .scene.is-live .fun{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto auto auto;column-gap:clamp(32px,4vw,64px);align-items:center}
  .scene.is-live .fun__big{grid-row:1;align-self:end;font-size:min(clamp(7rem,19vw,17rem),34vh)}
  .scene.is-live .fun__l{grid-column:1;grid-row:2;align-self:start;margin:18px 0 0;min-height:0;font-size:.8125rem}
  .scene.is-live .fun__body{grid-column:2;grid-row:1 / span 2;margin-top:0;align-self:start;font-size:clamp(15px,1.2vw,17px)}
  .scene.is-live .fun__s--all .fun__body{align-self:center}
  .scene.is-live .fun__cells{grid-template-columns:repeat(15,minmax(0,1fr));gap:clamp(4px,.5vw,7px)}
  .scene.is-live .fun__cells i{aspect-ratio:3 / 2;border-radius:4px}
  .scene.is-live .fun .opps{gap:10px;padding-inline:clamp(0px,3vw,48px)}
  .scene.is-live .fun__s--one .fun__body{font-size:clamp(17px,1.4vw,20px)}
  .scene.is-live .fun figcaption{margin-top:clamp(20px,3vh,36px);padding-top:14px;font-size:.9375rem}
}

/* ---------- feature object (second composition mode, added in the design-elevation phase).
   The ordinary ledger row stays the editorial row. Where the product object is the story, a section becomes a feature object:
   on wide screens a large object stays in view (position:sticky) while the reader moves through the steps beside it, and its
   state is the step being read. Narrower or shorter screens keep the ordinary ledger and nothing is pinned.
   Markup: .fo[data-follow] > .fo__flow (the rows, each [data-at]) + .fo__obj > .fo__pin (the object).
   The page script adds .is-live, .at-N (the current step) and .is-1 ... .is-N (every step reached) to .fo,
   and .is-on / .is-now to the rows. Without script or without motion allowed the object simply shows its finished state. ---------- */
.fo{--led-pad:clamp(36px,4.6vw,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.fo__flow{grid-column:1 / -1;min-width:0}
.fo__obj[data-desk]{display:none}
.fo .slip .stamp{margin-right:-14px}
/* How it works keeps a single receipt: after the steps on smaller screens, beside them on wide ones.
   On smaller screens the closing copy and the receipt sit on a paper band, as the old "finished receipt" section did. */
.sec--flush{padding-bottom:0}
.fo--close > .fo__flow{padding-bottom:var(--sec)}
.fo--close > .fo__end,.fo--close > .fo__obj{grid-row:2;position:relative;z-index:1;padding-block:var(--sec)}
.fo--close > .fo__end{padding-top:calc(var(--sec) + clamp(0px,3vw,48px))}
.fo--close::after{content:"";grid-column:1 / -1;grid-row:2;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
@media (max-width:859px){
  .fo--close > .fo__end{padding-bottom:0}
  .fo--close > .fo__obj{grid-row:3;padding-top:48px}
  .fo--close::after{grid-row:2 / span 2}
}

@media screen and (min-width:1041px) and (min-height:540px){
  .sec--flush{padding-bottom:var(--sec)}
  .fo--close > .fo__flow{padding-bottom:0}
  .fo--close::after{display:none}
  .fo--75 > .fo__flow,.fo--75 > .fo__end{grid-column:1 / span 7}
  .fo--75 > .fo__obj{grid-column:8 / -1}
  .fo--66 > .fo__flow{grid-column:1 / span 6}
  .fo--66 > .fo__obj{grid-column:7 / -1}
  .mo .fo--57 > .fo__flow{grid-column:1 / span 5}
  .fo--57 > .fo__obj{grid-column:6 / -1}
  .fo > .fo__obj,.fo > .fo__obj[data-desk]{display:block;grid-row:1 / span 2;padding:var(--led-pad) 0 0;min-width:0}
  .fo--close > .fo__end{grid-row:2;display:grid;padding:clamp(24px,3vw,48px) 0 0 144px}
  .fo__pin{position:sticky;top:88px;display:flex;justify-content:center}
  /* rows inside a feature object: number, then copy, with any specimen under the copy */
  :is(.fo:not(.fo--swap),.mo .fo--swap) .led__in{grid-template-columns:88px minmax(0,1fr)}
  :is(.fo:not(.fo--swap),.mo .fo--swap) .led__k{grid-column:1}
  :is(.fo:not(.fo--swap),.mo .fo--swap) :is(.led__body,.led__fig){grid-column:2}
  .fo--receipt .led__body .rline:not(.rline--none){display:none}
  /* rows whose key holds a longer chip */
  .mo .fo--keyw .led__in{grid-template-columns:136px minmax(0,1fr)}
  /* an object that replaces the exhibits in its rows (.fo--swap) can only do so where its states can be shown one after another.
     .mo is set in the head when script and motion are both available. Without it the rows keep their own exhibits and nothing is pinned. */
  html:not(.mo) .fo--swap > .fo__obj[data-desk]{display:none}
  .mo .fo--swap .led__fig{display:none}
  .mo .fo--swap .led__in{min-height:min(78vh,720px);align-content:start}

  /* the receipt at feature scale. --u is the paper's base type size and every measure of the slip follows it.
     It grows with the window but never so far that the whole receipt cannot be seen at once (height) or wraps badly (width). */
  .fo .slip{--u:clamp(11px,min(calc((100vh - 104px) / var(--un,48)),var(--uw,1.15vw)),17px);width:min(100%,calc(var(--u) * 34))}
  .fo--66{--uw:1.36vw}
  .fo .slip__paper{font-size:var(--u);padding:calc(var(--u) * 1.9) calc(var(--u) * 1.7) calc(var(--u) * 1.6) calc(var(--u) * 3.85)}
  .fo .slip__title{font-size:calc(var(--u) * 1.54);margin-top:calc(var(--u) * .7)}
  .fo .slip dl{margin-top:calc(var(--u) * 1.1)}
  .fo .slip .row{padding:calc(var(--u) * .8) 0;column-gap:calc(var(--u) * .92)}
  .fo .slip dt{font-size:max(10.5px,calc(var(--u) * .923))}
  .fo .slip dd{font-size:calc(var(--u) * 1.154)}
  .fo .slip dd small,.fo .slip__foot{font-size:max(11px,calc(var(--u) * .923))}
  .fo .slip__foot{margin-top:0;padding-top:calc(var(--u) * .8)}
  .fo .slip .stamp{font-size:max(10.5px,calc(var(--u) * .923));padding:calc(var(--u) * .4) calc(var(--u) * .77)}
  .fo .slip__no{font-size:calc(var(--u) * .846)}
  .fo .slip__bar{height:calc(var(--u) * 2);margin-top:calc(var(--u) * .9)}
  .fo .slip__top::after,.fo .slip .row::after{left:calc(var(--u) * -1.85)}
  .fo .slip .row::before{left:calc(var(--u) * -1.85 - 4px);top:calc(var(--u) * .8 + 4px)}
  .fo .slip__top::after{top:calc(var(--u) * -2);bottom:calc(var(--u) * -2.2)}
  .fo .slip .row::after{top:calc(var(--u) * .8 + 9px);bottom:calc(var(--u) * -.8 - 5px)}
  /* exhibits under the copy read a little larger beside a large object */
  .fo:not(.fo--swap) .led__fig .xb{font-size:15.5px}
  /* the closing statement gets room, so the finished object is still beside it */
  .fo--close > .fo__end{min-height:min(70vh,640px);align-content:center}
  .fo__end .link{justify-self:start}
  .fo--lines .rline--same{display:none}
  /* ordinary laptop windows are 620 to 800px tall. There the pinned object is compact so that all of it is in view:
     the receipt drops its barcode and tightens its lines, the Mission tightens its spacing. Tall windows get the full object. */
  .fo .slip__bar,.fo .slip__no{display:none}
  .fo .slip__paper{padding-top:calc(var(--u) * 1.5);padding-bottom:calc(var(--u) * 1.3)}
  .fo .slip .row{padding:calc(var(--u) * .62) 0}
  .fo .slip .row::before{top:calc(var(--u) * .62 + 4px)}
  .fo .slip .row::after{top:calc(var(--u) * .62 + 9px);bottom:calc(var(--u) * -.62 - 5px)}
  .fo .mis--live{font-size:clamp(14px,min(1.2vw,calc((100vh - 104px) / 37.6)),17.5px);gap:.75em;padding:.95em}
  .fo .mis--live .mis__a{gap:.75em}
  .fo .mis--live .tl{gap:.78em}
  .fo .mis--live .mis__kept{margin-top:0;padding-top:.8em}
  .fo .mis--live .mis__kept small{display:none}
}
/* short laptop windows (540 to 629px tall, for example a 1080p laptop at 150% scaling with the browser's own bars):
   the pinned object keeps its place and takes its tightest form. Below 540px the ordinary ledger is used. */
@media screen and (min-width:1041px) and (min-height:540px) and (max-height:629px){
  .fo__pin{top:80px}
  .fo .slip{--u:clamp(9.2px,min(calc((100vh - 96px) / var(--un,47.2)),var(--uw,1.15vw)),17px)}
  .fo .slip__paper{padding-top:calc(var(--u) * 1.3);padding-bottom:calc(var(--u) * 1.1)}
  .fo .slip .row{padding:calc(var(--u) * .5) 0;grid-template-columns:9ch minmax(0,1fr)}
  .fo .slip{width:min(100%,calc(var(--u) * 35.5))}
  .fo .slip .row::before{top:calc(var(--u) * .5 + 4px)}
  .fo .slip .row::after{top:calc(var(--u) * .5 + 9px);bottom:calc(var(--u) * -.5 - 5px)}
  .fo .slip dt{font-size:max(10px,calc(var(--u) * .923))}
  .fo .slip dd small,.fo .slip__foot{font-size:max(10.5px,calc(var(--u) * .923))}
  .fo .mis--live{font-size:clamp(11.9px,min(1.2vw,calc((100vh - 96px) / 38)),17.5px);gap:.62em;padding:.85em}
  .fo .mis--live small{font-size:max(10.4px,.82em)}
  .fo .mis--live .mis__a{gap:.62em}
  .fo .mis--live .tl{gap:.66em}
  .fo .mis--live .mis__kept{padding-top:.65em}
  .mo .fo--swap .led__in{min-height:92vh}
  .fo .swap .swap__s .xb{font-size:clamp(11.6px,min(1.12vw,calc((100vh - 150px) / 34)),16.5px)}
  .fo .swap + .swap__cap{margin-top:10px}
}
@media screen and (min-width:1041px) and (min-height:840px){
  .fo__pin{top:104px}
  .fo .slip{--un:55.5}
  .fo .slip__bar{display:block}
  .fo .slip__no{display:flex}
  .fo .slip__paper{padding-top:calc(var(--u) * 1.9);padding-bottom:calc(var(--u) * 1.6)}
  .fo .slip .row{padding:calc(var(--u) * .8) 0}
  .fo .slip .row::before{top:calc(var(--u) * .8 + 4px)}
  .fo .slip .row::after{top:calc(var(--u) * .8 + 9px);bottom:calc(var(--u) * -.8 - 5px)}
  .fo .mis--live{font-size:clamp(15px,1.2vw,17.5px);gap:.9em;padding:1.1em}
  .fo .mis--live .mis__a{gap:.9em}
  .fo .mis--live .tl{gap:1.05em}
  .fo .mis--live .mis__kept{margin-top:.4em;padding-top:1em}
  .fo .mis--live .mis__kept small{display:block}
}

/* ---------- interaction layer (inner pages). Small, quiet responses on the things a reader can act on or is reading.
   Hover rules sit behind (hover:hover) so a touch screen never gets a stuck state. ---------- */
/* the ledger rail is drawn by the reader: each row's line grows and its node fills as the row is read (CSS scroll timeline, no script).
   A pinned feature object does this from the page script instead, so it is left out here. */
@supports (animation-timeline:view()){
  @media screen and (prefers-reduced-motion:no-preference){
    .led__row::after{transform-origin:50% 0;animation:ledrail linear both;animation-timeline:view(block 0% 42%);animation-range:entry 0% exit 0%}
    .led__row::before{animation:lednode linear both;animation-timeline:view(block 0% 42%);animation-range:entry 0% entry 60px}
    @keyframes ledrail{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    @keyframes lednode{from{background:var(--sheet);border-color:var(--line-2);box-shadow:none}}
    .fo.is-live .led__row::after,.fo.is-live .led__row::before{animation:none}
  }
}
/* the next-page band: the sheet darkens from the left and the arrow leads */
.next a{position:relative;isolation:isolate}
.next a::before{content:"";position:absolute;inset:0 calc(var(--gut) * -1);z-index:-1;background:var(--paper);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.next b{transition:transform .35s var(--ease)}
@media (hover:hover){
  .next a:hover::before{transform:scaleX(1)}
  .next a:hover b{transform:translateX(8px)}
  .next a:hover svg{transform:translateX(10px)}
  .loop a::before{transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
  .loop a:hover::before{background:var(--blue);box-shadow:0 0 0 4px rgba(5,150,105,.15)}
  .loop li[data-s="wait"] a:hover::before{background:var(--dot-amber);box-shadow:0 0 0 4px rgba(217,138,31,.2)}
  .loop li[data-s="ver"] a:hover::before,.loop li[data-s="after"] a:hover::before{background:var(--green);box-shadow:0 0 0 4px rgba(23,112,74,.16)}
  .plan,.team{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
  .plan:hover,.team:hover{transform:translateY(-3px);border-color:var(--ink-3);box-shadow:0 26px 44px -30px rgba(20,21,26,.4)}
  .plan--rec:hover{border-color:var(--ink)}
  .facts dt a{transition:color .15s var(--ease)}
  /* comparison table: the row and the plan under the pointer are picked out */
  .cmp tbody tr:not(.cmp__g):not(.cmp__base):hover > *{background:var(--paper)}
  .cmp td,.cmp tbody th,.cmp thead th{transition:background-color .15s var(--ease),color .15s var(--ease)}
  .cmp:has(td:nth-child(2):hover) tbody tr:not(.cmp__g):not(.cmp__base) td:nth-child(2),
  .cmp:has(td:nth-child(3):hover) tbody tr:not(.cmp__g):not(.cmp__base) td:nth-child(3),
  .cmp:has(td:nth-child(4):hover) tbody tr:not(.cmp__g):not(.cmp__base) td:nth-child(4),
  .cmp:has(td:nth-child(5):hover) tbody tr:not(.cmp__g):not(.cmp__base) td:nth-child(5){background:var(--paper)}
}
/* comparison table: the plan names stay in view while the rows are read */
@media (min-width:720px){.cmp thead th{position:sticky;top:72px;z-index:2;background:var(--sheet);padding-top:14px}}
@media (min-width:720px) and (max-width:1040px){.cmp thead th{top:64px}}
/* the plan ladder builds once: each plan's bars fill in turn, so the order of the four steps is seen and not only read */
@media screen and (prefers-reduced-motion:no-preference){
  .plans.is-anim .plan__meter i.on{transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--ease)}
  .plans.is-anim .plan.on .plan__meter i.on{transform:none}
  .plans.is-anim .plan.on .plan__meter i.on:nth-child(2){transition-delay:.07s}
  .plans.is-anim .plan.on .plan__meter i.on:nth-child(3){transition-delay:.14s}
  .plans.is-anim .plan.on .plan__meter i.on:nth-child(4){transition-delay:.21s}
}

/* ---------- the evidence bench (Methodology): one finding, and a switch for the evidence behind it.
   Two states share one place (.bench__stk), so nothing moves when the state changes. With the switch off the finding is Preliminary;
   with Search Console on, its facts arrive and then the label they earn. Without script the stronger state is shown as a plain example. ---------- */
.bench{display:block}
.ph__slip.bench > .xb{flex:none;width:100%}
.bench figcaption{margin-top:12px;font-size:.875rem;color:var(--ink-2)}
.bench__src{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bench__k{grid-column:1 / -1;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:0 2px}
.bench__on,.bench__sw{position:relative;display:grid;gap:.1em;align-content:start;text-align:left;margin:0;padding:.75em 3.4em .8em .95em;border:1px solid var(--line);border-radius:.8em;background:var(--sheet);font:inherit;font-weight:600;font-size:.94em;line-height:1.3;color:var(--ink)}
.bench__on small,.bench__sw small{font-weight:400}
.bench__on::after{content:"";position:absolute;right:1.15em;top:.95em;width:.42em;height:.78em;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(42deg)}
.bench__sw{cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.bench__sw:hover{border-color:var(--blue)}
.bench__sw i{position:absolute;right:.8em;top:.8em;width:2.3em;height:1.34em;border-radius:1em;background:var(--line-2);transition:background-color .25s var(--ease)}
.bench__sw i::after{content:"";position:absolute;left:.17em;top:.17em;width:1em;height:1em;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(20,21,26,.3);transition:transform .25s var(--ease)}
.bench__sw[aria-checked="true"]{border-color:var(--blue);background:var(--blue-50)}
.bench__sw[aria-checked="true"] i{background:var(--blue)}
.bench__sw[aria-checked="true"] i::after{transform:translateX(.96em)}
.bench__stk{display:grid}
.bench__s{grid-area:1 / 1;display:grid;gap:10px;align-content:start;min-width:0}
html:not(.js) .bench__src,html:not(.js) .bench__s--a,html:not(.js) .bench figcaption{display:none}
.js .bench:not(.is-b) .bench__s--b,.js .bench.is-b .bench__s--a{visibility:hidden;opacity:0}
@media print{.bench__src,.bench__s--a,.bench figcaption{display:none}.bench .bench__s--b{visibility:visible !important;opacity:1 !important}}
@media screen and (prefers-reduced-motion:no-preference){
  .js .bench__s{transition:opacity .25s var(--ease),visibility 0s .25s}
  .js .bench.is-b .bench__s--b,.js .bench:not(.is-b) .bench__s--a{transition:opacity .35s var(--ease) .15s,visibility 0s}
  /* the stronger state arrives in the order it is earned: the finding, each fact, then the label */
  .js .bench .bench__s--b .ev li{opacity:0;transform:translateY(.6em)}
  .js .bench .bench__s--b .mis__top .pl{opacity:0;transform:scale(.86);transform-origin:0 50%}
  .js .bench.is-b .bench__s--b .ev li{opacity:1;transform:none;transition:opacity .45s var(--ease) .35s,transform .45s var(--ease) .35s}
  .js .bench.is-b .bench__s--b .ev li:nth-child(2){transition-delay:.7s}
  .js .bench.is-b .bench__s--b .ev li:nth-child(3){transition-delay:1.05s}
  .js .bench.is-b .bench__s--b .mis__top .pl{opacity:1;transform:none;transition:opacity .35s var(--ease) 1.5s,transform .35s var(--ease) 1.5s}
  /* until it has been used once, the switch asks to be pressed */
  .js .bench:not(.is-used) .bench__sw i{animation:nudge 2.4s var(--ease) 1.2s 3}
  @keyframes nudge{0%,60%,100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}30%{box-shadow:0 0 0 .5em rgba(5,150,105,.16)}}
}
@container (max-width:420px){.bench__src{grid-template-columns:1fr}}

/* ---------- specimens that play once (.xb[data-seq]): the evidence arrives first, and the label it has earned arrives after it.
   Used where a small exhibit explains a rule. Short, once, and the finished state is the state without motion. ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  .xb.is-anim [data-stage] :is(.ev,.rows) > li{opacity:0;transform:translateY(.6em);transition:opacity .45s var(--ease) calc(var(--i,0) * .26s),transform .45s var(--ease) calc(var(--i,0) * .26s)}
  .xb.is-anim .on :is(.ev,.rows) > li{opacity:1;transform:none}
  .xb.is-anim [data-stage] :is(.ev,.rows) > li > .pl{opacity:0;transform:scale(.84);transition:opacity .3s var(--ease) calc(var(--i,0) * .26s + .42s),transform .3s var(--ease) calc(var(--i,0) * .26s + .42s)}
  .xb.is-anim .on :is(.ev,.rows) > li > .pl{opacity:1;transform:none}
  .xb.is-anim .on :is(.ev,.rows) > li > .pl--ver{animation:stampin .42s var(--ease) calc(var(--i,0) * .26s + .42s) backwards}
  /* a result: the numbers, then the outcome that was recorded */
  .xb.is-anim [data-stage] > p,.xb.is-anim [data-stage] > .outs{opacity:0;transform:translateY(.5em);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .xb.is-anim .on > p{opacity:1;transform:none}
  .xb.is-anim .on > .outs{opacity:1;transform:none;transition-delay:.4s}
  .xb.is-anim [data-stage] .outs .pl--on{transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
  .xb.is-anim [data-stage]:not(.on2) .outs .pl--on{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}
}

/* ---------- three views of one change (.swap, Solutions). In a swap section the pinned object is a stack of the rows' own exhibits.
   The view shown is the one for the row being read, and the change that runs through all three is ringed in each.
   Wide screens with script and motion only; otherwise each row keeps its own exhibit. ---------- */
.swap{display:grid;width:min(100%,600px)}
.swap__s{grid-area:1 / 1;align-self:center;min-width:0}
.swap__s .xb{font-size:clamp(13px,min(1.12vw,calc((100vh - 150px) / 35)),16.5px);gap:.85em;padding:1em}
.swap__s:not(.swap__s--1){visibility:hidden;opacity:0}
.swap__cap{margin-top:16px;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.fo__pin:has(> .swap){flex-direction:column;align-items:center}
.swap .is-same,.swap .swap__s--1 .serp--after{position:relative}
@media screen and (prefers-reduced-motion:no-preference){
  .fo.is-live .swap__s{visibility:hidden;opacity:0;transform:translateY(18px) scale(.985);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .fo.is-live.is-back .swap__s{transform:translateY(-18px) scale(.985)}
  .fo.is-live:is(.at-0,.at-1) .swap__s--1,.fo.is-live.at-2 .swap__s--2,.fo.is-live.at-3 .swap__s--3{visibility:visible;opacity:1;transform:none;transition:opacity .5s var(--ease) .2s,transform .6s var(--ease) .2s,visibility 0s}
  /* the same change in the agency's list and in the fractional lead's history */
  .swap .is-same::after{content:"";position:absolute;inset:-.1em -.7em;border-radius:.7em;border:1.5px solid var(--blue);box-shadow:0 0 0 .22em rgba(5,150,105,.13);opacity:0;transform:scale(.97);transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
  .fo.is-live.at-2 .swap__s--2 .is-same::after,.fo.is-live.at-3 .swap__s--3 .is-same::after{opacity:1;transform:none;transition-delay:.85s}
}

/* ---------- the printed receipt (narrow screens). Same idea as the homepage: the paper moves with the page and is only visible
   above a print head that stays at the bottom of the window. Set on a container with data-print; the page script adds .is-print. ---------- */
.printer{display:none}
@media screen and (max-width:1040px),screen and (max-height:539px){
  .is-print{width:100%}
  .is-print .slip__paper{clip-path:inset(-10px -24px calc(100% - var(--edge,-12px)) -24px)}
  .is-print > .printer{display:flex;align-items:flex-start;position:sticky;bottom:0;z-index:4;height:var(--ph,140px);margin:0 calc(var(--gut) * -1);padding:20px var(--gut) 0;background:var(--paper);font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  .printer::before{content:"";position:absolute;left:8px;right:8px;top:-3px;height:6px;border-radius:3px;background:var(--ink);box-shadow:0 10px 18px rgba(20,21,26,.18)}
}

/* ---------- the docked receipt: where nothing can be pinned (phones, tablets, windows under 540px tall) a slim strip of the same
   receipt rests at the bottom edge of the window while the steps are read, and shows the line the reader has reached.
   CSS position:sticky inside the feature object, driven by the same reader-following classes (.is-w, .is-r). No extra script.
   Shown only where script and motion are available (.mo) and the browser supports :has(); otherwise it does not exist. ---------- */
.dock{display:none}
@supports selector(:has(a)){
@media screen and (max-width:1040px),screen and (max-height:539px){
  .mo .fo:has(> .dock) > .fo__flow{padding-bottom:88px}
  .mo .fo--close:has(> .dock) > .fo__flow{padding-bottom:var(--sec)}
  .fo.is-dock > .fo__flow{grid-row:1}
  .fo.is-dock > .dock{display:block;grid-column:1 / -1;grid-row:1;align-self:end;justify-self:end;position:sticky;bottom:0;z-index:30;width:min(100%,440px);padding-bottom:env(safe-area-inset-bottom,0px);pointer-events:none;filter:drop-shadow(0 -8px 22px rgba(20,21,26,.16)) drop-shadow(0 -1px 2px rgba(20,21,26,.1))}
  .dock__paper{position:relative;background:var(--sheet);padding:11px 14px 13px 16px;display:grid;gap:7px}
  .dock__paper::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px;background:linear-gradient(45deg,var(--sheet) 33%,transparent 34%) 0 0 / 12px 9px repeat-x,linear-gradient(-45deg,var(--sheet) 33%,transparent 34%) 0 0 / 12px 9px repeat-x}
  .dock__top{display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  .dock__rail{display:flex;align-items:center;margin:0}
  .dock__rail li{position:relative;width:10px;height:10px;border-radius:50%;border:2px solid var(--line-2);background:var(--sheet);margin-left:14px;transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
  .dock__rail li:first-child{margin-left:0}
  .dock__rail li + li::before{content:"";position:absolute;right:100%;top:2px;width:14px;height:2px;margin-right:2px;background:var(--line-2);transition:background-color .3s var(--ease)}
  .dock__rail li.is-w{border-color:var(--blue)}
  .dock__rail li.is-w::before{background:var(--blue)}
  .dock__rail li.is-cur{box-shadow:0 0 0 4px rgba(5,150,105,.15)}
  .dock__rail li.is-w[data-open="amber"]:not(.is-r){background:var(--dot-amber);border-color:var(--dot-amber);box-shadow:0 0 0 4px rgba(217,138,31,.2)}
  .dock__rail li.is-w[data-open="blue"]:not(.is-r){background:var(--blue)}
  .dock__rail li.is-r[data-s="ver"]{background:var(--green);border-color:var(--green)}
  .dock__rail li.is-r[data-s="ver"].is-cur{box-shadow:0 0 0 4px rgba(23,112,74,.16)}
  .dock__rail li.is-w[data-s="after"]{border-color:var(--green)}
  .dock__rail li.is-w[data-s="after"]::before{background:var(--green)}
  /* one line at a time: the newest written line. A new line feeds up from below, as paper does. */
  .dock__line{display:grid;overflow:hidden;height:26px}
  .dock__line p{grid-area:1 / 1;display:flex;align-items:center;gap:12px;min-width:0;height:26px;font-size:.9375rem;line-height:1.2;opacity:0;transform:translateY(26px);transition:opacity .3s var(--ease),transform .45s var(--ease)}
  .dock__line p.is-w{opacity:1;transform:none}
  .dock__line p.is-w:has(~ p.is-w){opacity:0;transform:translateY(-26px)}
  /* where several lines are written at one step (.fo--cur, Trust), the strip shows the line that step is about */
  .fo.fo--cur .dock .dock__line p.is-w{opacity:0;transform:translateY(-26px)}
  .fo.fo--cur .dock .dock__line p.is-cur,.fo.fo--cur.at-0 .dock .dock__line p[data-first]{opacity:1;transform:none}
  .fo.fo--cur .dock .dock__line p.is-cur:has(~ p.is-cur){opacity:0;transform:translateY(-26px)}
  .dock__line b{flex:none;width:9.4ch;font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  .dock__line p > span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dock__line [data-first] span{color:var(--ink-3)}
  .dock__line .is-wait{display:none}
  .dock__line p:not(.is-r) > .is-wait{display:block}
  .dock__line p:not(.is-r) > .is-res{display:none}
  .dock__line .stamp{font-style:normal;font-size:.6875rem;letter-spacing:.07em;padding:4px 8px;transform:rotate(-1.2deg);white-space:nowrap}
  .dock__line del{color:var(--ink-3)}
  .dock__line ins{text-decoration:none;background:var(--blue-50);color:var(--blue-d);padding:1px 4px;border-radius:3px}
}
@media screen and (max-width:719px){.fo.is-dock > .dock{width:100%}}
}

/* ---------- one Mission object, three states (Growth Missions).
   Elements marked .st1, .st2 or .st3 belong to a state and share one place (.stk). The finished state is Completed.
   On wide screens the object stays in view and takes the state of the row being read. ---------- */
.mis--live{width:min(100%,640px);font-size:clamp(15px,1.2vw,17.5px);gap:.9em;padding:1.1em}
.mis--live .stk{display:grid}
.mis--live .stk > *{grid-area:1 / 1;min-width:0}
.mis--live .st{visibility:hidden;opacity:0}
.mis--live .st3{visibility:visible;opacity:1}
.mis--live .mis__b{align-content:start}
.mis--live .mis__a{display:grid;gap:.9em;align-content:start}
.mis--live .tl{gap:1.05em}
.mis--live .tl small .stk{display:inline-grid}
.mis--live .mis__kept{display:grid;gap:.5em;margin-top:.4em;padding-top:1em;border-top:1px solid var(--line)}
.mis--live .mis__kept .lab{margin:0}
@media screen and (prefers-reduced-motion:no-preference){
  .fo.is-live .mis--live .st{visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility 0s .3s}
  .fo.is-live.at-0 .mis--live .st1,.fo.is-live.at-1 .mis--live .st1,.fo.is-live.at-2 .mis--live .st2,.fo.is-live.at-3 .mis--live .st3{visibility:visible;opacity:1;transition:opacity .5s var(--ease) .22s,visibility 0s}
  /* arriving at "In progress". First the approval itself: the button is pressed, the amber gate resolves and the label turns blue.
     Then the work: approval is recorded, the change is published, the live-site check earns the green, and measuring starts. */
  .fo.is-live:not(.is-back).at-2 .mis--live .st1{animation:st1out 1.2s linear both}
  .fo.is-live:not(.is-back).at-2 .mis--live .pl.st1,.fo.is-live:not(.is-back).at-2 .mis--live .xb__ex.st1{animation:st1out .72s linear both}
  .fo.is-live:not(.is-back).at-2 .mis--live .st2{animation:st2in .5s var(--ease) 1.1s backwards}
  .fo.is-live:not(.is-back).at-2 .mis--live .pl.st2,.fo.is-live:not(.is-back).at-2 .mis--live .xb__ex.st2{animation-delay:.6s}
  .fo.is-live:not(.is-back).at-2 .mis--live .st1 .bt--pri{animation:press .5s var(--ease) .12s}
  .fo.is-live:not(.is-back).at-2 .mis--live .st1 .bt--sec,.fo.is-live:not(.is-back).at-2 .mis--live .st1 .bt--txt{animation:dimout .35s var(--ease) .3s forwards}
  .fo.is-live:not(.is-back).at-2 .mis--live .st1 .dec{animation:decok .4s var(--ease) .5s forwards}
  @keyframes st1out{0%,74%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
  @keyframes st2in{from{opacity:0}}
  @keyframes press{45%{transform:scale(.975);filter:brightness(.78)}}
  @keyframes dimout{to{opacity:.3}}
  @keyframes decok{to{border-color:var(--line);box-shadow:none}}
  .fo.is-live:not(.is-back).at-2 .mis--live .tl li{animation:tlin .5s var(--ease) calc(1.5s + var(--i) * .7s) backwards}
  .fo.is-live:not(.is-back).at-2 .mis--live .tl li::before{animation:dotin .4s var(--ease) calc(1.65s + var(--i) * .7s) backwards}
  .fo.is-live:not(.is-back).at-2 .mis--live .tl li b{animation:inkin .4s var(--ease) calc(1.65s + var(--i) * .7s) backwards}
  /* arriving at "Completed": measuring ends, the outcome is recorded, and the receipt is issued last */
  .fo.is-live:not(.is-back).at-3 .mis--live .tl__m::before{animation:dotin .5s var(--ease) .3s backwards}
  .fo.is-live:not(.is-back).at-3 .mis--live .mis__foot .pl{animation:st2in .45s var(--ease) .9s backwards}
  .fo.is-live:not(.is-back).at-3 .mis--live .mis__foot .bt{animation:stampin .45s var(--ease) 1.5s backwards}
  @keyframes tlin{from{opacity:0;transform:translateY(.5em)}}
  @keyframes dotin{from{background:var(--sheet);border-color:var(--line-2);box-shadow:none}}
  @keyframes inkin{from{color:var(--ink)}}
  /* the measuring step: current while in progress, done when completed */
  .fo.is-live.at-2 .mis--live .tl__m::before{background:var(--sheet);border-color:var(--blue);box-shadow:0 0 0 .28em rgba(5,150,105,.15)}
}

/* a line can hold two states in one place: the open state and the resolved one. The finished state shows the resolved one. */
.slip dd.two{display:grid}
.slip dd.two > *{grid-area:1 / 1}
.slip .is-wait{display:none}
.slip .is-res{display:block}

@media screen and (prefers-reduced-motion:no-preference){
  /* the page rail progresses with the reader */
  .fo.is-live .led__row::before{transition:background-color .35s var(--ease),border-color .35s var(--ease)}
  .fo.is-live .led__row::after{transition:background .5s var(--ease)}
  .fo.is-live .led__row:not(.is-on):not(.is-now)::before{background:var(--sheet);border-color:var(--line-2)}
  .fo.is-live .led__row:not(.is-on)::after{background:var(--line-2)}

  /* the live receipt. The page script marks each line: .is-w once it is written, .is-r once its open state has resolved, .is-cur while it is the line being read.
     A line that has not been written yet keeps its label, faint, and an empty value; its rail is grey. */
  .fo.is-live .slip .row > dt{transition:opacity .4s var(--ease),color .3s var(--ease)}
  .fo.is-live .slip .row > dd{clip-path:inset(0 0 0 0);transition:clip-path .8s var(--ease),opacity .25s var(--ease)}
  .fo.is-live .slip .row::before{transition:background-color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
  .fo.is-live .slip .row::after,.fo.is-live .slip__top::after{transition:background-color .5s var(--ease)}
  .fo.is-live .slip__title,.fo.is-live .slip__foot,.fo.is-live .slip__bar,.fo.is-live .slip__no{transition:opacity .6s var(--ease)}
  .fo.is-live .slip .row:not(.is-w) > dt{opacity:.36}
  .fo.is-live .slip .row:not(.is-w) > dd{clip-path:inset(0 100% 0 0);opacity:0}
  .fo.is-live .slip .row:not(.is-w)::before{background:var(--sheet);border-color:var(--line-2);box-shadow:none}
  .fo.is-live .slip .row:not(.is-w)::after,.fo.is-live .slip__top:not(.is-w)::after{background:var(--line-2)}
  .fo.is-live .slip__foot:not(.is-w),.fo.is-live .slip__bar:not(.is-w),.fo.is-live .slip__no:not(.is-w){opacity:0}
  .fo.is-live .slip__top:not(.is-w) .slip__title{opacity:.3}
  /* the line being read */
  .fo.is-live .slip .row.is-cur > dt{color:var(--ink);font-weight:500}
  .fo.is-live .slip .row.is-cur::before{background:var(--blue);box-shadow:0 0 0 5px rgba(5,150,105,.15)}
  .fo.is-live .slip .row.is-cur[data-s="ver"]::before,.fo.is-live .slip .row.is-cur[data-s="after"]::before{background:var(--green);box-shadow:0 0 0 5px rgba(23,112,74,.16)}
  /* a line with an open state shows it until the reader moves on to the part of the row that resolves it.
     Nothing here runs on a clock: the open state holds for as long as the reader stays on it, and returns if the reader goes back. */
  .fo.is-live .slip .is-wait{display:block;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s .25s}
  .fo.is-live .slip .is-res{transition:opacity .4s var(--ease) .15s,transform .4s var(--ease) .15s}
  .fo.is-live .slip .row.is-w:not(.is-r) .is-wait{opacity:1;visibility:visible;transition:opacity .4s var(--ease) .3s,visibility 0s}
  .fo.is-live .slip .row:not(.is-r) .is-res{opacity:0;visibility:hidden;transform:translateY(.45em);transition:opacity .2s var(--ease),transform 0s .2s,visibility 0s .2s}
  .fo.is-live:not(.is-back) .slip .row.is-r .is-wait + .is-res .stamp{animation:stampin .42s var(--ease) .2s backwards}
  .fo.is-live .slip .row.is-w:not(.is-r)[data-open="amber"]::before{background:var(--dot-amber);border-color:var(--dot-amber);box-shadow:0 0 0 5px rgba(217,138,31,.2)}
  .fo.is-live .slip .row.is-w:not(.is-r)[data-open="blue"]::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 5px rgba(5,150,105,.15)}
  .fo.is-live .slip .row.is-w:not(.is-r)[data-open="blue"]::after{background:var(--line-2)}
  @keyframes stampin{from{opacity:0;transform:scale(1.5) rotate(-9deg)}60%{opacity:1;transform:scale(.96) rotate(-2deg)}to{opacity:1;transform:rotate(-2deg)}}
}

/* ---------- smaller screens: nothing is pinned, so each specimen plays once when the reader reaches it ([data-seq="narrow"]).
   A receipt line is written, a Mission card runs through its steps, and the finished receipt gathers its lines. ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  .rline.is-anim [data-stage] dd{clip-path:inset(0 100% 0 0)}
  .rline.is-anim [data-stage] dt{opacity:.36}
  .rline.is-anim [data-stage].on dd{clip-path:inset(0 0 0 0);transition:clip-path .85s var(--ease)}
  .rline.is-anim [data-stage].on dt{opacity:1;transition:opacity .4s var(--ease)}
  .rline.is-anim [data-stage].on div + div dd,.rline.is-anim [data-stage].on div + div dt{transition-delay:.55s}
  .rline.is-anim [data-stage].on .stamp{animation:stampin .42s var(--ease) .4s backwards}

  .slip.is-anim [data-stage] .row > dd{clip-path:inset(0 100% 0 0)}
  .slip.is-anim [data-stage] .row > dt{opacity:.36}
  .slip.is-anim [data-stage].on .row > dd{clip-path:inset(0 0 0 0);transition:clip-path .7s var(--ease) calc(var(--i) * .34s)}
  .slip.is-anim [data-stage].on .row > dt{opacity:1;transition:opacity .4s var(--ease) calc(var(--i) * .34s)}
  .slip.is-anim [data-stage].on .stamp{animation:stampin .42s var(--ease) 1.5s backwards}

  .led__fig.is-anim [data-stage] .tl li{opacity:0;transform:translateY(.5em)}
  .led__fig.is-anim [data-stage].on .tl li{opacity:1;transform:none;transition:opacity .45s var(--ease) calc(.25s + var(--i) * .5s),transform .45s var(--ease) calc(.25s + var(--i) * .5s)}
  .led__fig.is-anim [data-stage].on .tl li::before{animation:dotin .4s var(--ease) calc(.4s + var(--i) * .5s) backwards}
  .led__fig.is-anim [data-stage] .dec,.led__fig.is-anim [data-stage] .mis__foot{opacity:0}
  .led__fig.is-anim [data-stage].on .dec{opacity:1;transition:opacity .5s var(--ease) .7s}
  .led__fig.is-anim [data-stage].on .mis__foot{opacity:1;transition:opacity .5s var(--ease) 2.3s}
}

/* ---------- the same Opportunity before and after evidence is connected ---------- */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,72px);align-items:start;position:relative}
.pair > div{position:relative;min-width:0;container-type:inline-size}
.pair > div + div::before{content:"";position:absolute;left:calc(clamp(40px,5vw,72px) * -.5 - 5px);top:64px;width:10px;height:10px;border-top:2px solid var(--line-2);border-right:2px solid var(--line-2);transform:rotate(45deg)}
.pair__k{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.pair + .link{margin-top:32px}
@media (max-width:859px){
  .pair{grid-template-columns:1fr;row-gap:52px}
  .pair > div + div::before{left:4px;top:-31px;transform:rotate(135deg)}
}

/* ---------- pricing: plan cards. Four steps from a free first look to governed execution.
   Four across on desktop, two by two from 720 to 1040px, stacked below. No prices until they are approved. ---------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;align-content:start;padding:24px 22px 22px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.plan--rec{border-color:var(--ink);background:var(--sheet);box-shadow:0 24px 40px -28px rgba(20,21,26,.35)}
.plan h3 .chip{letter-spacing:.04em;font-weight:400}
.plan__step{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.plan__meter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:12px}
.plan__meter i{height:4px;border-radius:2px;background:var(--line-2)}
.plan__meter i.on{background:var(--blue)}
.plan h3{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:8px 12px;margin-top:22px;font-size:clamp(1.75rem,2.4vw,2.25rem);font-weight:600;letter-spacing:-.035em;line-height:1}
.plan__q{margin-top:10px;font-size:1.0625rem;font-weight:500;line-height:1.35;letter-spacing:-.01em}
.plan ul{margin-top:18px;display:grid;gap:0;align-content:start}
.plan li{padding:11px 0;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.4;color:var(--ink-2)}
.plan__price{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;color:var(--ink-2)}
.plan__price b{display:block;font-family:var(--sans);font-size:1.375rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.plan .btn{margin-top:16px;justify-content:center;white-space:normal;text-align:center}
.plans__note{margin-top:20px;font-size:.875rem;color:var(--ink-2)}
@media (max-width:1040px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:719px){.plans{grid-template-columns:1fr}}

/* ---------- pricing: comparison table. A real table from 720px; below that each row stacks with the plan names beside the values. ---------- */
.cmp{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}
.cmp col.cmp__k{width:34%}
.cmp thead th{padding:0 16px 14px 0;font-size:1.125rem;font-weight:600;letter-spacing:-.02em;border-bottom:1px solid var(--ink)}
.cmp thead th:first-child{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cmp tbody th{padding:16px 24px 16px 0;font-weight:500;border-bottom:1px solid var(--line);vertical-align:top}
.cmp tbody th small{display:block;font-weight:400;font-size:.875rem;color:var(--ink-2);margin-top:2px}
.cmp td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top;font-size:.9375rem}
.cmp td.is{color:var(--ink)}
.cmp tr.cmp__g th{padding-top:36px;padding-bottom:10px;font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.cmp tr.cmp__base th,.cmp tr.cmp__base td{background:var(--paper);border-bottom:0;padding-left:16px}
.cmp tr.cmp__base th{border-radius:10px 0 0 10px}
.cmp tr.cmp__base td:last-child{border-radius:0 10px 10px 0}
.cmp + .plans__note{max-width:60em}
@media (max-width:719px){
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block}
  .cmp colgroup,.cmp thead{display:none}
  .cmp tbody tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .cmp tbody tr:not(.cmp__g){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:8px}
  .cmp tbody th{grid-column:1 / -1;padding:0 0 4px;border:0}
  .cmp td{padding:0;border:0}
  .cmp td::before{content:attr(data-plan);display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  .cmp tr.cmp__g{padding:24px 0 8px;border-bottom:1px solid var(--line-2)}
  .cmp tr.cmp__g th{padding:0;border:0}
  .cmp tr.cmp__base{background:var(--paper);border-radius:10px;padding:14px;border-bottom:0}
  .cmp tr.cmp__base th,.cmp tr.cmp__base td{background:transparent;padding-left:0}
}

/* ---------- pricing: Agency and Enterprise, kept apart from the four plans ---------- */
.teams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.team{display:grid;align-content:start;padding:28px 28px 26px;border:1px solid var(--line);border-radius:18px;background:var(--sheet)}
.team .eyebrow{color:var(--ink-3)}
.team h3{margin-top:10px;font-size:clamp(1.5rem,2.2vw,2rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.team p{margin-top:12px;color:var(--ink-2);max-width:32em}
.team .link{margin-top:22px;justify-self:start}
@media (max-width:719px){.teams{grid-template-columns:1fr}}

/* ==========================================================================
   v2.5: Trust, Contact, the legal documents and the 404 page.
   ========================================================================== */
.note{margin-top:24px;font-size:.9375rem;color:var(--ink-2);max-width:44em}

/* ---------- authority, stage by stage (Trust). Four stages on one rail with the approval gate between Prepare and Publish.
   Same colour rule as every rail on the site: blue while reading and doing, amber at the human decision, green only at verification. ---------- */
.auth{margin-top:clamp(48px,6vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(190px,.66fr) minmax(0,1fr) minmax(0,1fr)}
.auth > li{position:relative;border-top:6px solid rgb(31 95 214 / 20%);padding:30px 24px 0 0;--rail:var(--ln-blue)}
.auth > li::after{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:var(--rail)}
.auth > li::before{content:"";position:absolute;left:0;top:-12px;width:18px;height:18px;border-radius:50%;background:var(--rail);z-index:1}
.auth > li[data-s="ver"]::after{right:auto;width:9px}
.auth__n{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.auth h3{font-size:clamp(1.5rem,2.2vw,2.125rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin-top:6px}
.auth h3 small{display:block;font-size:.9375rem;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--ink-2);margin-top:6px}
.auth dl{margin-top:22px;display:grid;row-gap:14px}
.auth dl div{padding-top:12px;border-top:1px solid var(--line)}
.auth dt{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.auth dd{margin-top:4px;font-size:.9375rem;line-height:1.45}
.auth dl div.no dd{color:var(--ink-2)}
.auth > .auth__gate{background:none;padding:30px 18px 24px;display:grid;align-content:start;justify-items:start;row-gap:14px;}
.auth > .auth__gate::before{top:-14px;width:22px;height:22px;border:0;background:var(--sheet);box-shadow:inset 0 0 0 5px var(--rail),0 0 0 3px var(--sheet),0 0 0 5px var(--ink)}
.auth__gate p{font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.auth__gate .stamp{white-space:nowrap}
.auth > .auth__gate + li{padding-left:24px}
.auth > .auth__gate + li::before{left:-9px}
.auth__gate .auth__n{color:var(--ink)}
@media (max-width:1040px){
  .auth{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .auth > .auth__gate + li{padding-left:0}
  .auth > .auth__gate + li::before{left:0}
  .auth > .auth__gate{grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:center;padding:26px 20px 22px}
  .auth > .auth__gate .auth__n{grid-column:1 / -1}
}
@media (max-width:619px){
  .auth{grid-template-columns:1fr;row-gap:0}
  .auth > li,.auth > .auth__gate + li{border-top:0;border-left:6px solid rgb(31 95 214 / 20%);padding:0 0 32px 28px}
  .auth > li::after{left:-6px;right:auto;top:0;bottom:0;width:6px;height:auto}
  .auth > li::before,.auth > .auth__gate + li::before{left:-12px;top:0}
  .auth > li:last-child{padding-bottom:0}
  .auth > li[data-s="ver"]::after{width:6px;bottom:auto;height:14px}
  .auth > .auth__gate{grid-template-columns:1fr;padding:0 0 32px 28px;margin:0;background:none;box-shadow:none}
  .auth > .auth__gate::before{top:0;left:-14px}
}
/* plays once: the rail is drawn stage by stage and stops at the gate before it goes on */
@media screen and (prefers-reduced-motion:no-preference){
  .auth.is-anim > li > *{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .auth.is-anim > li.on > *{opacity:1;transform:none}
  .auth.is-anim > li::after{transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
  .auth.is-anim > li.on::after{transform:none}
  .auth.is-anim > li::before{transform:scale(0);transition:transform .3s var(--ease)}
  .auth.is-anim > li.on::before{transform:none}
  .auth.is-anim > .auth__gate .stamp{transform:rotate(-2deg) scale(1.3);opacity:0;transition:opacity .25s var(--ease) .3s,transform .4s var(--ease) .3s}
  .auth.is-anim > .auth__gate.on .stamp{transform:rotate(-2deg);opacity:1}
  @media (max-width:619px){.auth.is-anim > li::after{transform:scaleY(0);transform-origin:50% 0}.auth.is-anim > li.on::after{transform:none}}
}

/* ---------- where each item stands (Trust). A plain list: the item and its state. States are information, so they are neutral. ---------- */
.stt li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.stt li:last-child{border-bottom:1px solid var(--line)}
.stt b{font-weight:600;font-size:clamp(1.0625rem,1.4vw,1.25rem);letter-spacing:-.015em}
.stt b a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--line-2)}
.stt b a:hover{text-decoration-color:currentColor}
.stt .chip{background:var(--sheet)}
@media (max-width:480px){.stt li{grid-template-columns:1fr;row-gap:8px;justify-items:start}}

/* ---------- document links: the written policies, as a set ---------- */
.docs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.docs a{display:grid;row-gap:6px;align-content:start;height:100%;padding:18px 18px 20px;background:var(--sheet);border:1px solid var(--line);border-radius:12px;text-decoration:none;transition:border-color .2s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.sec--sheet .docs a,.lend .docs a{background:var(--paper);border-color:transparent}
.docs b{font-weight:600;letter-spacing:-.015em;line-height:1.25}
.docs small{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.docs a[aria-current]{border-color:var(--ink);background:var(--sheet)}
@media (hover:hover){.docs a:hover{border-color:var(--ink-3);transform:translateY(-2px);box-shadow:0 18px 30px -24px rgba(20,21,26,.4)}}
@media (max-width:1040px){.docs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.docs{grid-template-columns:1fr}}
.docs + .link,.stt + .note + .link{margin-top:28px}

/* ---------- Contact: the form and what to expect ---------- */
.cgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px;align-items:start}
.cf{grid-column:1 / span 7;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.cf .full{grid-column:1 / -1}
.cf label{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.cf label small{font:inherit;color:var(--ink-3);text-transform:none;letter-spacing:.02em}
.cf input,.cf select,.cf textarea{display:block;width:100%;min-height:52px;padding:12px 16px;font:inherit;font-size:1.0625rem;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:12px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease)}
.cf textarea{min-height:168px;resize:vertical;line-height:1.5}
.cf select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2314151A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
.cf :is(input,select,textarea):hover{border-color:var(--ink-3)}
.cf :is(input,select,textarea):focus{outline:0;border-color:var(--blue);background-color:var(--sheet);box-shadow:0 0 0 4px rgba(5,150,105,.14)}
.cf__send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.cf__note{font-size:.875rem;color:var(--ink-2);max-width:36em}
.cf__note a,.expect a{color:var(--blue);text-underline-offset:3px}
.cf__status{font-size:.9375rem;padding:12px 16px;border-radius:10px;background:var(--paper)}
.cf__status[hidden]{display:none}
.expect{grid-column:9 / -1}
.expect h2{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.expect li{padding:16px 0;border-top:1px dashed var(--line-2);font-size:.9375rem;color:var(--ink-2)}
.expect ul{margin-top:12px}
.expect li:last-child{border-bottom:1px dashed var(--line-2)}
.expect b{display:block;color:var(--ink);font-weight:600}
@media (max-width:1040px){.cf{grid-column:1 / span 8}.expect{grid-column:9 / -1}}
@media (max-width:859px){.cf,.expect{grid-column:1 / -1}}
@media (max-width:480px){.cf{grid-template-columns:1fr}.cf .btn{width:100%;justify-content:center}}

/* ---------- legal documents. The page head carries the document's own record on a slip (status, version, date).
   The body is a contents rail beside the text on wide screens; on smaller screens the contents sit above the text and
   a slim bar at the bottom of the window names the section being read. ---------- */
.ph--doc{padding-bottom:clamp(32px,4vw,56px)}
.ph--doc .h1in{max-width:15em}
.ph--doc .eyebrow{margin-bottom:12px}
.slip--doc .slip__title{font-size:1.125rem}
.slip--doc .row,.slip--nf .row{grid-template-columns:9.5ch minmax(0,1fr)}
.slip--doc .tbd{background:none;padding:0}
.notice{background:var(--sheet);border-block:1px solid var(--line)}
.notice p{padding-block:18px;font-size:.9375rem;color:var(--ink-2);max-width:64em}
.notice b{color:var(--amber);font-weight:600}
.tbd{font-family:var(--mono);font-size:.875em;color:var(--ink-2);background:var(--paper);border-bottom:1px dashed var(--ink-3);padding:1px 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ldoc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;align-items:start}
.toc{grid-column:1 / span 3;position:sticky;top:104px;max-height:calc(100vh - 128px);overflow:auto;scrollbar-width:thin}
.toc summary{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);list-style:none;pointer-events:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary small{font:inherit;display:none}
.toc ol{position:relative;margin-top:14px;border-left:2px solid var(--line)}
.toc a{display:grid;grid-template-columns:2.2ch minmax(0,1fr);column-gap:10px;align-items:baseline;padding:7px 8px 7px 16px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--ink-2);font-size:.9375rem;line-height:1.35;transition:color .15s var(--ease),border-color .15s var(--ease)}
.toc a span{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.toc a:hover{color:var(--ink)}
.toc a.is-cur{color:var(--ink);border-left-color:var(--ink);font-weight:500}
.prose{grid-column:5 / span 7;min-width:0}
@media (min-width:1041px){.prose:has(.dtab){grid-column:5 / -1}}
.dtab .tbd{background:none;padding:0}
.dtab td:first-child .tbd{font-weight:400}
.prose > section{padding-block:clamp(28px,3.4vw,48px);border-top:1px solid var(--line);scroll-margin-top:72px}
.prose > section:first-child{padding-top:0;border-top:0}
.prose h2{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:600;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
.prose h2 span{display:block;font-family:var(--mono);font-size:.8125rem;font-weight:400;letter-spacing:.08em;color:var(--ink-3);margin-bottom:10px}
.prose p,.prose ul{margin-top:16px;max-width:38em;text-wrap:pretty}
.prose li{position:relative;padding-left:22px;margin-top:10px}
.prose li::before{content:"";position:absolute;left:0;top:.74em;width:10px;height:2px;background:var(--ink-3)}
.prose b{font-weight:600}
.prose a{color:var(--blue);text-underline-offset:3px}
.prose a:hover{color:var(--blue-d)}
.need{margin-top:20px;max-width:38em;padding:14px 16px 16px;background:var(--amber-50);border-left:3px solid var(--dot-amber);border-radius:0 10px 10px 0;font-size:.9375rem;line-height:1.5}
.prose .need b{display:block;font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
/* the table of providers: a real table where there is room, one card per provider where there is not */
.dtab{width:100%;margin-top:20px;border-collapse:collapse;text-align:left;font-size:.9375rem}
.dtab th{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 16px 10px 0;border-bottom:1px solid var(--line-2);vertical-align:bottom}
.dtab td{padding:16px 16px 16px 0;border-bottom:1px dashed var(--line-2);vertical-align:top;line-height:1.45}
.dtab td:first-child{font-weight:600}
.dtab td small{display:block;font-family:var(--mono);font-size:.75rem;font-weight:400;color:var(--ink-3);margin-top:3px}
.prose > section:has(.dtab){container-type:inline-size}
@container (max-width:680px){
  .dtab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .dtab,.dtab tbody,.dtab tr,.dtab td{display:block}
  .dtab tr{padding:16px 0;border-bottom:1px solid var(--line-2)}
  .dtab td{position:relative;padding:5px 0 5px 10.5ch;border:0}
  .dtab td::before{content:attr(data-l);position:absolute;left:0;top:.62em;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
  .dtab td:first-child{padding-left:0;font-size:1.0625rem;padding-bottom:8px}
  .dtab td:first-child::before{display:none}
}
/* cookie preferences */
.prefs{margin-top:20px;max-width:38em;border-top:1px solid var(--line-2)}
.pref{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-2)}
.pref b{display:block}
.pref span{display:block;font-size:.9375rem;color:var(--ink-2);margin-top:2px}
.sw{position:relative;flex:none;width:52px;height:30px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.sw::before{content:"";position:absolute;inset:-8px}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--sheet);box-shadow:0 1px 3px rgba(20,21,26,.3);transition:transform .22s var(--ease)}
.sw[aria-checked="true"]{background:var(--ink);border-color:var(--ink)}
.sw[aria-checked="true"]::after{transform:translateX(22px)}
.sw:disabled{cursor:not-allowed;opacity:.55}
html:not(.js) .sw:not(:disabled){opacity:.55}
.prefs__act{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.prefs__saved{margin-top:14px;font-size:.9375rem;color:var(--ink-2);min-height:1.5em}
/* the end of a document: the other documents in the set */
.lend{background:var(--sheet);border-top:1px solid var(--line);padding-block:clamp(48px,6vw,88px)}
.lend h2{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}
/* the reading bar (smaller screens) */
.docbar{display:none}
@media (max-width:1040px){
  .toc{grid-column:1 / -1;position:static;max-height:none;overflow:visible;padding:0 20px;background:var(--sheet);border-radius:12px;scroll-margin-top:80px}
  .toc summary{pointer-events:auto;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;color:var(--ink-2)}
  .toc summary small{display:inline;color:var(--ink-3);margin-left:auto}
  .toc summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--ink),var(--ink)) center / 100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center / 2px 100% no-repeat;transition:transform .2s var(--ease)}
  .toc details[open] summary::after{transform:rotate(45deg)}
  .toc details[open]{padding-bottom:12px}
  .toc ol{columns:2;column-gap:24px;border-left:0;margin-top:0}
  .toc li{break-inside:avoid}
  .toc a{margin-left:0;padding:8px 0;border-left:0;min-height:44px;align-items:center}
  .toc a.is-cur{font-weight:400;color:var(--ink-2)}
  .prose{grid-column:1 / -1}
  .js .docbar{grid-column:1 / -1;position:sticky;bottom:0;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) env(safe-area-inset-bottom,0px);min-height:52px;background:var(--ink);color:#fff;font-size:.9375rem;transform:translateY(110%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s}
  .js .docbar.is-on{transform:none;visibility:visible;transition:transform .35s var(--ease)}
  .docbar__n{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--night-2)}
  .docbar__t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
  .docbar a{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#fff;padding:14px 0 14px 12px;min-height:44px;display:flex;align-items:center}
  .docbar i{position:absolute;left:0;top:0;width:100%;height:2px;background:var(--thr-night);transform-origin:0 50%;transform:scaleX(0)}
}
@media (max-width:619px){.toc ol{columns:1}}
@supports (animation-timeline:view()){
  .ldoc{view-timeline:--ldoc block}
  .docbar i{animation:docp linear both;animation-timeline:--ldoc;animation-range:contain 0% contain 100%}
  @keyframes docp{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @media (min-width:1041px){
    .toc ol::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--line-2);transform-origin:50% 0;animation:docq linear both;animation-timeline:--ldoc;animation-range:contain 0% contain 100%}
    @keyframes docq{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  }
}

/* ---------- 404 ---------- */
.nf__links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(24px,2.6vw,36px);align-items:center}
.slip--nf dd{overflow-wrap:anywhere}

/* a feature object whose rows are short (.fo--dwell, Trust): on wide screens each row is given room, so each state of the
   pinned object stays in view long enough to be read */
@media screen and (min-width:1041px) and (min-height:540px){
  .mo .fo--dwell .led__in{min-height:min(42vh,380px);align-content:start}
  /* room after the last row, so the object is still whole while that row is read */
  .mo .fo--dwell.is-live > .fo__flow{padding-bottom:min(34vh,300px)}
}

/* =====================================================================
   Growth Lines on the shell pages (pricing, trust, how it works, legal). Parent: DESIGN.md.
   Open columns under a 2px ink rule instead of boxed cards; no side stripes; a plan's depth is a short Mission line.
   ===================================================================== */
html body :is(.plan,.team){padding:22px 0 0;border:0;border-block-start:var(--rule);border-radius:0;background:none;box-shadow:none}
html body .plan--rec{border-block-start-width:6px;padding-block-start:18px}
@media (prefers-reduced-motion:no-preference){html body :is(.plan,.team):hover{transform:none;box-shadow:none}}
html body .plans{column-gap:clamp(20px,2.4vw,36px)}
/* the line, then the plan name, then its stage as a meta line */
html body .plan__meter{order:-2;position:relative;display:grid;gap:0;margin:2px 0 6px;padding-inline-end:16px}
html body .plan h3{order:-1;margin-top:14px}
html body .plan__meter i{position:relative;block-size:6px;border-radius:0;background:rgb(31 95 214 / 20%)}
html body .plan__meter i:first-child{border-start-start-radius:3px;border-end-start-radius:3px}
html body .plan__meter i.on{background:var(--ln-blue)}
html body .plan__meter i::after{content:"";position:absolute;inset-inline-end:-8px;inset-block-start:-5px;inline-size:16px;block-size:16px;border-radius:50%;background:var(--sheet);box-shadow:inset 0 0 0 3px rgb(31 95 214 / 45%);z-index:1}
html body .plan__meter i.on::after{background:var(--ln-blue);box-shadow:none}
html body .plan__step{margin-top:8px}
html body .team h3{margin-top:0}
html body .team__q{margin-top:6px;font-size:1.125rem;font-weight:600;line-height:1.35;color:var(--ink)}
/* status lines and drafting notes: no coloured stripe; the word carries the meaning */
html body .cf__status{border:0;border-block:1px solid var(--line);border-radius:0;padding-inline:0}
html body .need{border:0;border-block:1px solid var(--line);border-radius:0;background:none;padding-inline:0}
html body .prose .need b{font-family:var(--sans);font-size:.8125rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
html body .plan__price{font-family:var(--sans);font-size:.875rem;letter-spacing:0;border-block-start-color:var(--line)}
html body .plan__price b{font-weight:800}