/* Stamped HR — design system
   ==================================================================
   Concept: the site is itself a well-kept record.

   From GOV.UK: black on white, plain language, hard rules, left-aligned,
   big readable body text, no decoration that isn't load-bearing, and a focus
   state you cannot miss.

   Modernised: editorial type (Inter variable + Instrument Serif), a document
   structure with numbered sections and hairline rules, and motion that
   reveals structure rather than performing.

   Cascade discipline: no layers here, so overrides settle by specificity then
   source order. Append at the END. Verify the COMPUTED value in the browser,
   not the rule you wrote.
   ================================================================== */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/inter-var.woff2) format('woff2');
}
@font-face{
  font-family:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/instrument-serif.woff2) format('woff2');
}

:root{
  /* paper and ink */
  --paper:#FFFFFF;
  --paper-2:#F4F4F1;          /* warm document paper for banded sections */
  --paper-3:#ECECE7;
  --ink:#0A0A0A;
  --ink-2:#4A4E52;
  --ink-3:#626A6F;         /* 5.5:1 on paper, 5.0:1 on paper-2, 4.7:1 on paper-3.
                              #767B7F read 4.28:1 and failed at every size it was
                              used at - captions, labels, eyebrows, footer links. */
  --rule:#0A0A0A;             /* structural rules are ink, not grey */
  --hair:#DCDCD6;

  /* green: meaning, never decoration */
  --green:#12B76A;
  --green-ink:#046C3E;
  --green-wash:#E9FAF1;

  --warn:#B45309; --warn-wash:#FDF3E3;
  --risk:#B42318; --risk-wash:#FDECEA;

  --focus:#12B76A;

  --measure:34em;
  --gut:24px;
  --maxw:1240px;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --e-out:cubic-bezier(.22,1,.36,1);
}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:19px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0 0 .5em; font-weight:620; letter-spacing:-.025em; line-height:1.08}
h1{font-size:clamp(2.6rem,6.4vw,5.1rem); letter-spacing:-.04em; font-weight:640}
h2{font-size:clamp(1.9rem,3.8vw,3rem); letter-spacing:-.032em}
h3{font-size:1.18rem; letter-spacing:-.015em; font-weight:620; line-height:1.25}
h4{font-size:1rem; letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em; padding-left:1.25em}
li{margin-bottom:.4em}
strong{font-weight:640}
img{max-width:100%; height:auto; display:block}

/* an editorial serif, used sparingly and always deliberately */
.ser{font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-.005em}

/* GOV.UK keeps links unmistakable: an in-text link is always underlined. The
   hover changes colour and underline thickness, nothing else (LOOK block). */
a{color:var(--ink); text-decoration:none}

/* Focus you cannot miss — GOV.UK's most copied idea, in our colours. */
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff;
  padding:14px 20px; font-weight:600}
.skip:focus{left:0}

.tbc{color:var(--ink-3); font-style:italic}
/* Read by assistive technology, painted for nobody. Used for the new-tab
   warning on outbound links, where a visible note beside every gov.uk link
   would be forty pieces of noise. Not display:none, which removes it from
   the accessibility tree as well as the page. */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap}
.num,.tbl,.mock,.stat-v,.k-v,.price-v{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.measure{max-width:var(--measure)}

/* ---------------- motion ----------------
   Text is never hidden waiting for a scroll. The fade-and-rise reveals, the
   headline rise, the self-drawing rule, the weight "settle" and the reading
   progress bar were removed in the LOOK pass (2026-10-15): the scroll-linked
   ones left whatever sat at the bottom of the screen half transparent, and
   ignored prefers-reduced-motion because the @supports rules out-specified
   it. Motion is kept only in the four product figures (FIGURES THAT MOVE). */
.rise,.rise > span{display:block}
.drawline,.prog{display:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ---------------- header ---------------- */
.hdr{position:sticky; top:0; z-index:100; background:var(--paper);
  border-bottom:1px solid var(--hair)}
.hdr::before{content:""; display:block; height:6px; background:var(--ink)}
.hdr-in{display:flex; align-items:center; gap:28px; min-height:72px}
.logo{display:inline-flex; align-items:center; gap:.65em; font-weight:800; font-size:1.2rem;
  letter-spacing:-.02em}
/* the app's mark: a ring in the one colour that means "done" */
.logo-mark{width:24px; height:24px; border-radius:50%; border:3px solid #00E68C; flex:0 0 auto;
  box-sizing:border-box}
.nav{margin-left:auto}
.nav > ul{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav a,.nav-b{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px 12px;
  font:inherit; font-size:.88rem; font-weight:520; letter-spacing:-.01em; color:var(--ink-2);
  background:none; border:0; cursor:pointer; position:relative}
.nav a::after,.nav-b::after{content:""; position:absolute; left:12px; right:12px; bottom:6px;
  height:1.5px; background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--e-out)}
.nav a:hover::after,.nav-b:hover::after{transform:scaleX(1); transform-origin:left}
.nav a:hover,.nav-b:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); font-weight:620}
.chev{transition:transform .3s var(--e-out)}
.has-menu.open .chev{transform:rotate(180deg)}
.has-menu{position:relative}
.menu{position:absolute; top:calc(100% + 10px); left:-8px; min-width:360px; padding:0;
  background:var(--paper); border:1.5px solid var(--ink); opacity:0; visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .22s var(--e-out), transform .22s var(--e-out), visibility .22s;
  box-shadow:9px 9px 0 -1px rgba(10,10,10,.08)}
.has-menu.open .menu{opacity:1; visibility:visible; transform:none}
.menu ul{list-style:none; margin:0; padding:0}
.menu li{margin:0}
.menu li + li{border-top:1px solid var(--hair)}
.menu a{display:block; padding:13px 16px}
.menu a::after{display:none}
.menu a:hover{background:var(--paper-2)}
.mi-t{display:block; font-weight:600; color:var(--ink); font-size:.94rem; letter-spacing:-.015em}
.mi-d{display:block; font-size:.82rem; color:var(--ink-3); line-height:1.4; margin-top:2px}
.hdr-cta .btn{min-height:42px; padding:10px 18px; font-size:.87rem}
.burger{display:none; width:44px; height:44px; border:0; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0}
.burger span{display:block; height:2px; width:24px; background:var(--ink); margin:0 auto;
  transition:transform .3s var(--e-out), opacity .2s}
.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{border-top:1px solid var(--hair); background:var(--paper); padding:8px 0 28px;
  max-height:calc(100vh - 78px); overflow-y:auto}
.mnav h3{font-size:.79rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3);
  margin:22px 0 2px; font-weight:620}
.mnav ul{list-style:none; margin:0; padding:0}
.mnav li{margin:0}
.mnav a{display:flex; align-items:center; min-height:52px; border-bottom:1px solid var(--hair);
  font-weight:540; font-size:1.02rem; color:var(--ink)}
/* `.mnav a` (0,1,1) beat `.btn` (0,1,0) and painted the drawer's call to
   action ink on ink — an invisible button on all 39 pages. Two classes take it
   back without out-specifying `.mgroup a` and `.mflat a` further down. */
.mnav .btn{margin-top:24px; color:#fff; min-height:58px; border-bottom-width:1.5px}
/* ...and then that fix did the same thing again to the OTHER button. The rule
   above assumes a solid `.btn`, whose background is ink; the drawer's second
   call to action is `.btn-ghost`, whose background is transparent. At (0,2,0)
   it out-specified `.btn-ghost`'s own colour and painted white text on the
   white drawer — 1.00:1, invisible, on all 39 pages. Same specificity as the
   rule above and placed after it, so it wins on order. Hover keeps the text
   colour on both: no fill slides behind it any more. */
.mnav .btn-ghost{color:var(--ink)}
@media (max-width:1100px){
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
  .hdr-in{justify-content:space-between; gap:12px}
}
@media (min-width:1101px){ .mnav{display:none} }

/* ---------------- buttons ---------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:48px;
  padding:13px 24px; font:inherit; font-size:.95rem; font-weight:580; letter-spacing:-.01em;
  border:1.5px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer;
  position:relative}
.btn > span{position:relative; z-index:1}
/* The green panel that slid up behind every button on hover (and the ink one
   behind the outline button) is gone: hover is LOOK's one rule. */
.btn-ghost{background:transparent; color:var(--ink)}
.btn-lg{min-height:58px; padding:16px 30px; font-size:1.02rem}
.btn-block{display:flex; width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.btn[disabled]{opacity:.42; cursor:not-allowed}

/* ---------------- document structure ----------------
   Sections are numbered like clauses. The number is the ornament. */
.sec{padding:clamp(64px,8vw,118px) 0; border-top:1px solid var(--hair); position:relative}
.sec.tone{background:var(--paper-2)}
.sec.solid{background:var(--ink); color:#fff; border-top-color:var(--ink)}
.sec.solid h2,.sec.solid h3{color:#fff}
.sec.solid .lede,.sec.solid p{color:rgba(255,255,255,.74)}
.sec-head{display:grid; grid-template-columns:5.5rem 1fr; gap:0 28px;
  margin-bottom:clamp(34px,5vw,60px)}
.sec-n{font-size:.81rem; font-weight:640; letter-spacing:.08em; color:var(--ink-3);
  padding-top:.8em; font-variant-numeric:tabular-nums}
.sec.solid .sec-n{color:rgba(255,255,255,.5)}
.sec-head h2{margin:0; max-width:18ch}
.sec-head .lede{grid-column:2; margin:.9em 0 0; max-width:var(--measure)}
.sec-body{grid-column:2}
.lede{font-size:clamp(1.06rem,1.6vw,1.22rem); line-height:1.5; color:var(--ink-2);
  letter-spacing:-.012em}
.eyebrow{font-size:.79rem; font-weight:640; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 1.2em; display:flex; align-items:center; gap:.7em}
.eyebrow::before{content:""; width:22px; height:1.5px; background:var(--green)}
@media (max-width:760px){
  .sec-head{grid-template-columns:1fr; gap:0}
  .sec-head .lede,.sec-body{grid-column:1}
  .sec-n{padding-top:0; margin-bottom:1.1em}
}

/* ---------------- hero ---------------- */
.hero{padding:clamp(52px,7vw,110px) 0 clamp(46px,6vw,84px)}
.hero-in{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(32px,5vw,68px);
  align-items:center}
.hero h1{margin-bottom:.3em}
.hero .lede{max-width:30em; font-size:clamp(1.08rem,1.7vw,1.3rem)}
.hero-rule{margin:36px 0 0}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 34px; margin-top:28px; padding-top:22px;
  border-top:1px solid var(--hair)}
.hero-meta p{margin:0; font-size:.85rem; color:var(--ink-3)}
.hero-meta strong{color:var(--ink); font-weight:620}
@media (max-width:920px){ .hero-in{grid-template-columns:1fr} .hero-aside{order:2} }

.phero{padding:clamp(40px,5vw,76px) 0 clamp(30px,4vw,52px)}
.phero h1{font-size:clamp(2.2rem,5vw,3.9rem)}
.phero .lede{max-width:var(--measure); margin-top:.6em}
.crumb{display:flex; align-items:center; gap:10px; font-size:.81rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:26px; font-weight:580}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}

/* ---------------- grids and cards ---------------- */
.grid{display:grid; gap:0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .grid-2,.grid-3{grid-template-columns:1fr} }

/* Cards separated by rules, not boxes — a document, not a dashboard. */
.card{display:block; padding:30px 28px 28px; border-top:2px solid var(--rule); position:relative;
  overflow:hidden; color:var(--ink)}
.card + .card{border-left:1px solid var(--hair)}
@media (max-width:960px){ .card:nth-child(3n+1){border-left:0} }
@media (max-width:680px){ .card + .card{border-left:0} }
.card h3{margin-bottom:.4em}
.card p{color:var(--ink-2); font-size:.94rem; margin-bottom:1.3em; max-width:32ch}
.card-cta{font-size:.83rem; font-weight:620; letter-spacing:.02em; display:inline-flex;
  align-items:center; gap:.5em}
.card-cta::after{content:"\2192"; transition:transform .38s var(--e-out)}
.card::after{content:""; position:absolute; top:-2px; left:0; right:0; height:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--e-out)}
.card:hover::after{transform:scaleX(1)}
.card:hover .card-cta::after{transform:translateX(5px)}

.feat{padding:28px 26px 26px 0}
.feat + .feat{border-left:1px solid var(--hair); padding-left:26px}
@media (max-width:680px){ .feat + .feat{border-left:0; border-top:1px solid var(--hair)} }
.feat h3{margin-bottom:.45em}
.feat p{color:var(--ink-2); font-size:.94rem; margin:0}
.sec.solid .feat + .feat{border-color:rgba(255,255,255,.22)}

/* ---------------- numbered steps ---------------- */
.steps{list-style:none; margin:0; padding:0}
.step{display:grid; grid-template-columns:4.5rem 1fr; gap:0 24px; padding:30px 0;
  border-top:1px solid var(--hair); align-items:start; margin:0}
.step:last-child{border-bottom:1px solid var(--hair)}
.step-n{font-size:.81rem; font-weight:640; color:var(--ink-3); padding-top:.4em;
  font-variant-numeric:tabular-nums}
.step h3{margin-bottom:.3em}
.step p{margin:0; color:var(--ink-2); font-size:.96rem; max-width:var(--measure)}
.sec.solid .step{border-color:rgba(255,255,255,.2)}
@media (max-width:620px){
  .step{grid-template-columns:1fr}
  .step-n{padding-top:0; margin-bottom:.5em}
}

/* ---------------- meaningful lists ---------------- */
.cklist{list-style:none; margin:0; padding:0; max-width:var(--measure)}
.ck{position:relative; padding:14px 0 14px 38px; border-top:1px solid var(--hair);
  color:var(--ink-2); font-size:.98rem; margin:0}
.ck:last-child{border-bottom:1px solid var(--hair)}
.ck::before{position:absolute; left:6px; top:14px; font-weight:700}
.ck-ok::before{content:"\2713"; color:var(--green-ink)}
.ck-risk::before{content:"\2715"; color:var(--risk)}
.ck-warn::before{content:"!"; color:var(--warn)}
.sec.solid .ck{border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.8)}
.sec.solid .ck-ok::before{color:var(--green)}
.sec.solid .ck-risk::before{color:#FF8A80}

/* ---------------- tables ---------------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:.94rem; min-width:520px}
.tbl caption{text-align:left; padding:0 0 14px; color:var(--ink-3); font-size:.84rem}
.tbl th,.tbl td{padding:17px 20px 17px 0; text-align:left; border-bottom:1px solid var(--hair);
  vertical-align:top}
.tbl thead th{border-bottom:2px solid var(--rule); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-3); font-weight:640; padding-bottom:12px}
.tbl td:first-child{font-weight:580; width:30%}
.tbl td:last-child{color:var(--ink-2)}
/* 520px against a 312px column is a sideways scroller on eleven tables across
   ten pages, with the second column cut mid-sentence. The harness exempts
   `.tbl-wrap` from the overflow check, so nothing ever said so. Below the
   phone breakpoint the table wraps instead of scrolling. */
@media (max-width:620px){
  .tbl{min-width:0; font-size:.90rem}
  .tbl th,.tbl td{padding:13px 12px 13px 0}
  .tbl td:first-child{width:34%}
  .tbl thead th{letter-spacing:.06em}
}

/* ---------------- faq ---------------- */
.faqs{max-width:var(--measure); border-top:1px solid var(--hair)}
.faq{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer; padding:22px 44px 22px 0; font-weight:580; font-size:1.04rem;
  letter-spacing:-.015em; list-style:none; position:relative; transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green-ink)}
.faq summary::after{content:""; position:absolute; right:8px; top:calc(50% - 1px); width:13px;
  height:1.5px; background:currentColor}
.faq summary::before{content:""; position:absolute; right:8px; top:calc(50% - 1px); width:13px;
  height:1.5px; background:currentColor; transform:rotate(90deg);
  transition:transform .3s var(--e-out)}
.faq[open] summary::before{transform:rotate(0)}
.faq-a{padding:0 0 24px; color:var(--ink-2); font-size:.98rem; max-width:var(--measure)}
.faq-a p:last-child{margin-bottom:0}

/* ---------------- statement band ---------------- */
.band{background:var(--ink); color:#fff; padding:clamp(70px,9vw,128px) 0}
.band h2{color:#fff; max-width:16ch; font-size:clamp(2rem,4.4vw,3.4rem)}
.band .lede{color:rgba(255,255,255,.72); max-width:var(--measure)}
.band .btn{background:#fff; color:var(--ink); border-color:#fff}
.band .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}

/* ---------------- stats ---------------- */
.stats{border-top:2px solid var(--rule)}
.stat{padding:30px 26px 26px 0}
.stat + .stat{border-left:1px solid var(--hair); padding-left:26px}
@media (max-width:680px){
  .stat + .stat{border-left:0; border-top:1px solid var(--hair); padding-left:0}
}
.stat-v{font-size:clamp(2.6rem,5vw,4rem); font-weight:600; letter-spacing:-.045em;
  margin:0 0 .15em; line-height:1}
.stat-l{margin:0 0 .9em; color:var(--ink); font-size:1rem; max-width:22ch; letter-spacing:-.01em}
.stat-s{margin:0; font-size:.80rem; color:var(--ink-3); line-height:1.45; max-width:30ch}

/* ---------------- prose ---------------- */
.prose{max-width:var(--measure)}
.prose h2{margin-top:1.9em; font-size:clamp(1.4rem,2.4vw,1.9rem)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-2)}
.prose > p:first-of-type{font-size:1.08rem; color:var(--ink)}

.note{margin:34px 0; padding:22px 26px; border-left:3px solid var(--ink); background:var(--paper-2);
  max-width:var(--measure)}
.note p{margin:0; font-size:.94rem; color:var(--ink-2)}
.note-warn{border-left-color:var(--warn); background:var(--warn-wash)}
.note-risk{border-left-color:var(--risk); background:var(--risk-wash)}

/* ---------------- ticker ---------------- */
.ticker{border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); overflow:hidden;
  padding:15px 0}
.ticker-in{display:flex; width:max-content; animation:slide 52s linear infinite}
.ticker-in span{padding:0 24px; font-size:.81rem; letter-spacing:.01em; color:var(--ink-3);
  white-space:nowrap; display:inline-flex; align-items:center; gap:.7em}
.ticker-in span::before{content:""; width:4px; height:4px; background:var(--green); flex:0 0 auto}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .ticker-in{animation:none} }

/* ---------------- product preview ---------------- */
.mock{border:1.5px solid var(--ink); background:var(--paper)}
.mock-bar{display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--ink); font-size:.79rem}
.mock-dot{width:7px; height:7px; background:var(--green); flex:0 0 auto}
.mock-ttl{font-weight:620}
.mock-site{margin-left:auto; color:var(--ink-3); font-size:.79rem; letter-spacing:.06em;
  text-transform:uppercase}
.mock-body{padding:18px 16px}
.mock-kpis{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--hair);
  margin-bottom:16px}
.mock-kpis > div{padding:14px}
.mock-kpis > div + div{border-left:1px solid var(--hair)}
.k-v{margin:0; font-size:1.8rem; font-weight:600; letter-spacing:-.04em; line-height:1}
.k-v span{font-size:.92rem; font-weight:560}
.k-warn{color:var(--warn)} .k-risk{color:var(--risk)}
.k-l{margin:.4em 0 0; font-size:.79rem; color:var(--ink-3)}
.mock-tbl{width:100%; border-collapse:collapse; font-size:.86rem}
.mock-tbl td{padding:12px 0; border-bottom:1px solid var(--hair)}
.mock-tbl tr:last-child td{border-bottom:0}
.mock-tbl td:last-child{text-align:right}
/* The mock is a picture of the real screen, and the real screen has column
   headers. Quiet, because the rows are the content. */
.mock-tbl th{padding:0 0 9px; text-align:left; font-weight:600; font-size:.80rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  border-bottom:1px solid var(--line-2)}
.mock-tbl th:last-child{text-align:right}
.mock .dim{color:var(--ink-3)}
.chip{display:inline-flex; align-items:center; padding:3px 9px; font-size:.78rem; font-weight:620;
  letter-spacing:.02em; border:1px solid currentColor}
.chip-ok{color:var(--green-ink); background:var(--green-wash)}
.chip-warn{color:var(--warn); background:var(--warn-wash)}
.chip-risk{color:var(--risk); background:var(--risk-wash)}
.chip:empty{width:8px; height:8px; padding:0; border:0}
.chip-ok:empty{background:var(--green)}
.chip-warn:empty{background:var(--warn)}
.chip-risk:empty{background:var(--risk)}
.pk{list-style:none; margin:0; padding:0}
.pk li{display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--hair); font-size:.88rem; margin:0}
.pk li:last-child{border-bottom:0}
.pk-n{flex:1}
.pk-d{color:var(--ink-3); font-size:.79rem}
.pk-foot{margin:16px 0 0; font-size:.79rem; color:var(--ink-3); border-top:1px solid var(--ink);
  padding-top:12px}

/* ---------------- form ---------------- */
.form{max-width:32em}
.fld{margin:0 0 24px}
.fld label{display:block; font-weight:580; font-size:.96rem; margin-bottom:6px}
.fh{display:block; font-size:.85rem; color:var(--ink-3); margin-bottom:8px}
.fld input,.fld textarea{width:100%; font:inherit; font-size:1rem; padding:13px 14px;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink); border-radius:0}
.fld input:focus,.fld textarea:focus{outline:3px solid var(--focus); outline-offset:0}
.fld input[disabled],.fld textarea[disabled]{border-color:var(--hair); background:var(--paper-2)}
.form-off{max-width:32em; margin-top:18px; padding:18px 22px; border-left:3px solid var(--warn);
  background:var(--warn-wash); font-size:.91rem; color:var(--ink-2)}
.form-priv{font-size:.83rem; color:var(--ink-3); margin-top:18px; max-width:32em}
/* Off-screen, not display:none - a bot that skips CSS entirely still finds
   and fills a field that simply is not rendered; one moved off-screen still
   looks fillable to it, which is the point. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-sent,.form-err{max-width:32em; margin-bottom:22px; padding:16px 20px; border-radius:10px}
.form-sent{border-left:3px solid var(--green-ink); background:var(--green-wash); color:var(--ink-2)}
.form-err{border-left:3px solid var(--warn); background:var(--warn-wash); color:var(--ink-2)}
/* the direct-contact route, shown in place of the form while there is no
   endpoint to post to */
.form-lead{font-size:1.12rem; line-height:1.5; margin:0 0 10px}
.form-lead .mail{font-weight:640}
.mail{color:var(--ink); text-underline-offset:3px}

/* ---------------- footer ---------------- */
.ftr{border-top:6px solid var(--ink); background:var(--paper); padding:62px 0 40px}
.ftr-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:34px}
.ftr-col h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-3);
  margin:0 0 14px; font-weight:640}
.ftr-col ul{list-style:none; margin:0; padding:0}
.ftr-col li{margin:0}
.ftr-col a{display:flex; align-items:center; min-height:44px; color:var(--ink-2); font-size:.91rem}
.ftr-col a:hover{color:var(--ink)}
.ftr-legal{margin-top:50px; padding-top:28px; border-top:1px solid var(--hair)}
.ftr-co,.ftr-note{font-size:.81rem; color:var(--ink-3); max-width:62em; margin:0 0 .9em;
  line-height:1.5}
.ftr-min{list-style:none; display:flex; flex-wrap:wrap; gap:0 18px; margin:18px 0; padding:0}
.ftr-min li{margin:0}
/* A short word is a narrow target however tall it is: "Terms" measured 39px
   across. The padding carries the width; the gap gives it back. */
.ftr-min a{display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  min-width:44px; padding:0 4px; font-size:.83rem; color:var(--ink-2)}
.ftr-cp{font-size:.81rem; color:var(--ink-3); margin:0}
.tel{color:var(--ink-2)}
@media (max-width:1100px){ .ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:860px){ .ftr-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .ftr-grid{grid-template-columns:1fr; gap:24px} }

/* ---------------- consent ---------------- */
.cc{position:fixed; left:0; right:0; bottom:0; z-index:140; background:var(--ink); color:#fff;
  border-top:2px solid var(--green)}
.cc-in{max-width:var(--maxw); margin:0 auto; padding:20px var(--gut); display:flex;
  align-items:center; gap:24px; flex-wrap:wrap}
.cc h2{font-size:.98rem; margin:0; color:#fff}
.cc p{font-size:.87rem; color:rgba(255,255,255,.72); margin:0; flex:1; min-width:16em}
.cc-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.cc .btn{min-height:42px; padding:10px 18px; font-size:.86rem; background:#fff; color:var(--ink);
  border-color:#fff}
.cc .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.cc-link{font-size:.83rem; color:rgba(255,255,255,.8); text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.4); text-underline-offset:3px}
.cc-link:hover{color:#fff; text-decoration-color:#fff}

/* Visible after the visitor has moved past the page proposition. It is kept
   separate from the consent banner so fixed controls never overlap. */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:120; background:var(--ink);
  border-top:2px solid var(--green); color:#fff; box-shadow:0 -10px 28px rgba(10,10,10,.13)}
.sticky-cta-in{min-height:72px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-top:12px; padding-bottom:12px}
.sticky-cta p{display:flex; align-items:baseline; flex-wrap:wrap; gap:0 8px; margin:0;
  color:rgba(255,255,255,.76)}
.sticky-cta p span{display:block; width:100%; color:rgba(255,255,255,.62); font-size:.66rem;
  font-weight:680; letter-spacing:.12em; text-transform:uppercase}
.sticky-cta p strong{color:#fff; font-size:1.1rem; font-weight:700; letter-spacing:-.02em}
.sticky-cta p em{font-size:.88rem; font-style:normal}
.sticky-cta .btn{min-height:44px; padding:10px 18px; background:var(--green); border-color:var(--green);
  color:var(--ink); white-space:nowrap}
@media (max-width:620px){
  .sticky-cta-in{min-height:68px; gap:12px; padding-top:9px; padding-bottom:9px}
  .sticky-cta p{flex:1; min-width:0; font-size:.78rem; line-height:1.25}
  .sticky-cta p span{margin:0 0 3px; font-size:0}
  .sticky-cta p span::after{content:"COMPLIANCE RECORD"; font-size:.59rem; letter-spacing:.1em}
  .sticky-cta p strong{font-size:1rem}
  .sticky-cta p em{width:100%; font-size:.72rem}
  .sticky-cta .btn{flex:0 0 auto; min-height:42px; padding:10px 13px; font-size:.84rem}
}

/* ---------------- overrides (append below, never edit above) ---------------- */

/* ---------------- editorial serif, extended ----------------
   The serif carries the voice: statements, figures and quotations. It never
   appears in navigation, labels, tables or anything a person has to scan. */
.ser-r{font-family:var(--serif); font-weight:400; font-style:normal; letter-spacing:-.005em}

/* Figures set in the serif read as published rather than dashboarded. */
.stat-v{font-family:var(--serif); font-weight:400; font-style:normal;
  font-size:clamp(3rem,6vw,4.8rem); letter-spacing:-.02em}

/* A quotation pulled out of the argument. */
.pull{margin:44px 0; padding:0 0 0 28px; border-left:2px solid var(--green);
  max-width:30em}
.pull p{font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.25; letter-spacing:-.015em;
  color:var(--ink); margin:0}
.pull cite{display:block; margin-top:14px; font-family:var(--sans); font-style:normal;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600}
.sec.solid .pull p,.band .pull p{color:#fff}
.sec.solid .pull cite{color:rgba(255,255,255,.55)}

/* The statement band takes the serif for its second clause. */
.band h2 .ser{display:block; margin-top:.06em}

/* ---------------- legal clauses ----------------
   Numbered and anchored, because a notice you cannot cite is a notice nobody
   can review properly. */
.clauses{border-top:1px solid var(--hair)}
.clause{display:grid; grid-template-columns:4.5rem 1fr; gap:0 24px; padding:34px 0;
  border-bottom:1px solid var(--hair); scroll-margin-top:100px}
.cl-n{font-size:.81rem; font-weight:640; letter-spacing:.08em; color:var(--ink-3); margin:0;
  padding-top:.45em; font-variant-numeric:tabular-nums}
.cl-body{max-width:var(--measure)}
.cl-body h2{font-size:clamp(1.25rem,2.2vw,1.65rem); margin-bottom:.6em}
.cl-body p,.cl-body li{color:var(--ink-2); font-size:.99rem}
.cl-body p:last-child,.cl-body ul:last-child{margin-bottom:0}
.cl-link{background-image:none; color:var(--ink)}
.cl-link:hover{color:var(--green-ink)}
.clause:target .cl-n{color:var(--green-ink)}
@media (max-width:620px){
  .clause{grid-template-columns:1fr}
  .cl-n{padding-top:0; margin-bottom:.6em}
}

/* Touch targets. Measured at 375px: footer column links sat at 40px and the
   consent buttons at 43px, both under the 44px minimum for a thumb. The
   footer row gap drops to compensate so the column does not grow. */
@media (max-width:860px){
  .ftr-col a{min-height:46px}
  .ftr-col ul{margin-top:-4px}
}
.cc .btn{min-height:44px}

/* SCROLL-DRIVEN MOTION (reveals, weight settle) removed in the LOOK pass; see the motion note at the top. */

/* ------------------------------------------------------ view transitions
   Cross-document, so moving between pages animates instead of blanking.
   The header and the page title are named, so they persist across the change
   rather than being torn down and rebuilt. */
@view-transition{ navigation:auto }
.hdr{view-transition-name:site-header}
.ftr{view-transition-name:site-footer}
::view-transition-old(root){animation:vt-out .26s var(--e-out) both}
::view-transition-new(root){animation:vt-in .34s var(--e-out) both}
@keyframes vt-out{to{opacity:0; transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0; transform:translateY(12px)}}

/* ==================================================================
   PINNED SEQUENCE
   A figure that stays while its steps scroll past. The steps are the
   argument; the figure illustrates whichever one you are reading.
   ================================================================== */
.scrolly{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px);
  align-items:start}
.scrolly-steps{margin:0; padding:0; list-style:none}
.scrolly-step{padding:clamp(28px,7vh,64px) 0; border-top:1px solid var(--hair);
  opacity:.34; transition:opacity .45s var(--e-out)}
.scrolly-step:first-child{border-top:0}
.scrolly-step.now{opacity:1}
.scrolly-step .st-n{font-size:.80rem; font-weight:640; letter-spacing:.09em; color:var(--ink-3);
  display:block; margin-bottom:.9em; font-variant-numeric:tabular-nums}
.scrolly-step.now .st-n{color:var(--green-ink)}
.scrolly-step h3{font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-.028em; margin-bottom:.4em}
.scrolly-step p{color:var(--ink-2); margin:0; max-width:30em}
.scrolly-stage{position:sticky; top:96px; height:min(72vh,540px); display:flex; align-items:center}
.scrolly-stage .mock{width:100%}

/* frames inside the figure: each becomes real as its step arrives */
.frame{opacity:0; transform:translateY(8px); transition:opacity .5s var(--e-out),
  transform .5s var(--e-out)}
.frame.on{opacity:1; transform:none}
.frame-rows .fr{display:flex; align-items:center; gap:12px; padding:13px 0;
  border-bottom:1px solid var(--hair); font-size:.88rem;
  transition:opacity .45s var(--e-out), transform .45s var(--e-out)}
.frame-rows .fr:last-child{border-bottom:0}
/* Pending only once app.js has taken the figure over (it sets data-active):
   hidden by default, the rows were invisible with scripts off. Dimmed rather
   than hidden, like the steps beside them, so the record still reads if the
   observer never reports. */
.frame-rows[data-active] .fr:not(.on){opacity:.28; transform:translateX(-8px)}
.fr-k{color:var(--ink-3); min-width:9.5em; font-size:.8rem; letter-spacing:.02em}
.fr-v{font-weight:560}
.fr-v.stamp{position:relative}
.fr-v.stamp::after{content:"\2713"; color:var(--green-ink); margin-left:.5em;
  display:inline-block; transform:scale(0); transition:transform .4s var(--e-out) .15s}
.fr.on .fr-v.stamp::after{transform:scale(1)}

/* Below the pin breakpoint there is no room to pin the figure beside its
   steps, so each step carries its own record line instead - plain content,
   not a reveal, so it is visible the moment its step is. The pinned mock is
   dropped entirely rather than left sitting above the steps: one is the
   record building line by line, not a figure and then a separate list. */
.fr-mobile{display:none}
@media (max-width:900px){
  .scrolly{grid-template-columns:1fr}
  .scrolly-stage{display:none}
  .scrolly-step{opacity:1}
  .fr-mobile{display:flex; align-items:center; gap:12px; margin-top:16px;
    padding:11px 14px; border:1px solid var(--hair); font-size:.85rem;
    background:var(--paper-2)}
  .fr-mobile .fr-k{color:var(--ink-3); min-width:9.5em; font-size:.78rem; letter-spacing:.02em}
  .fr-mobile .fr-v{font-weight:560}
  .fr-mobile .fr-v.stamp::after{content:"\2713"; color:var(--green-ink); margin-left:.5em}
}
@media (prefers-reduced-motion: reduce){
  .scrolly-step,.frame,.frame-rows .fr{opacity:1; transform:none; transition:none}
  .fr-v.stamp::after{transform:scale(1)}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* card spotlight (a pointer-tracked green wash) removed in the LOOK pass */

/* ==================================================================
   THE SPINE
   One column structure for the whole site: a narrow margin column that
   carries clause numbers, and the text column everything else starts in.

   This block exists because .sec-body carried `grid-column:2` while its
   parent was display:block - so headings sat 116px to the right of their
   own content on every section. Measured, not noticed.
   ================================================================== */
:root{ --margin-col:5.5rem; --spine-gap:28px; }

.sec > .wrap{
  display:grid;
  grid-template-columns:var(--margin-col) minmax(0,1fr);
  gap:0 var(--spine-gap);
}
/* the head's children join the section grid directly, so the number, the
   heading and the body below all share one set of column edges */
.sec-head{display:contents}
.sec-n{grid-column:1; margin:0}
.sec-head > div{grid-column:2}
.sec-head .lede{grid-column:2; margin:.9em 0 0}
.sec-body{grid-column:2; margin-top:clamp(34px,5vw,60px)}
.sec-head:empty + .sec-body,
.sec > .wrap > .sec-body:first-child{margin-top:0}

/* the page head starts in the same text column, so the eye follows one edge
   from the first headline to the last footnote */
.phero > .wrap,.hero > .wrap.hero-in{
  display:grid;
  grid-template-columns:var(--margin-col) minmax(0,1fr);
  gap:0 var(--spine-gap);
}
.phero > .wrap > *{grid-column:2}
.hero > .wrap.hero-in{grid-template-columns:var(--margin-col) 1.06fr .94fr;
  gap:0 clamp(28px,4vw,56px)}
.hero-copy{grid-column:2}
.hero-aside{grid-column:3}

/* clauses already carry their own number column - align it to the spine */
.clauses{grid-column:2}
.clause{grid-template-columns:var(--margin-col) minmax(0,1fr); gap:0 var(--spine-gap)}
.step{grid-template-columns:var(--margin-col) minmax(0,1fr); gap:0 var(--spine-gap)}

@media (max-width:920px){
  .hero > .wrap.hero-in{grid-template-columns:1fr; gap:34px}
  .hero-copy,.hero-aside{grid-column:1}
}
@media (max-width:760px){
  .sec > .wrap,.phero > .wrap{grid-template-columns:1fr; gap:0}
  .sec-n{grid-column:1; margin-bottom:1.1em}
  .sec-head > div,.sec-head .lede,.sec-body,.phero > .wrap > *,.clauses{grid-column:1}
  .clause,.step{grid-template-columns:1fr}
}

/* One column-gap applies to every gap in a grid, so the hero's wider aside gap
   was also pushing its text 24px off the spine. Spine gap for the grid; the
   breathing room between copy and figure comes from padding instead. */
.hero > .wrap.hero-in{gap:0 var(--spine-gap)}
.hero-copy{padding-right:clamp(0px,3.4vw,52px)}

/* ==================================================================
   HEADER
   Three states: a phase banner that can be dismissed, a full header at rest,
   and a condensed one once you are reading. The condense is what stops a
   sticky bar feeling like furniture.
   ================================================================== */
.ann{background:var(--ink); color:#fff; font-size:.85rem}
.ann-in{display:flex; align-items:center; gap:16px; min-height:46px; padding-top:7px;
  padding-bottom:7px}
.ann-tag{font-size:.66rem; font-weight:680; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:var(--green); padding:4px 8px; flex:0 0 auto}
.ann p{margin:0; color:rgba(255,255,255,.82); line-height:1.4}
.ann-cta{color:#fff; font-weight:580; white-space:nowrap;
  background-image:linear-gradient(var(--green),var(--green)); background-size:100% 1.5px}
.ann-cta:hover{color:var(--green); background-size:100% 2px}
.ann-cta::after{content:" \2192"}
.ann-x{margin-left:auto; flex:0 0 auto; width:34px; height:34px; border:0; background:none;
  color:rgba(255,255,255,.55); font-size:1.3rem; line-height:1; cursor:pointer}
.ann-x:hover{color:#fff}
.ann[hidden]{display:none}
@media (max-width:760px){
  .ann-in{flex-wrap:wrap; gap:8px 12px; padding:10px 0 12px}
  .ann-x{position:absolute; right:14px; top:6px}
  .ann{position:relative}
}

/* the ink rule at the top is the site's edge; it collapses once you scroll */
.hdr::before{transition:height .32s var(--e-out)}
.hdr-in{transition:min-height .32s var(--e-out)}
.hdr{transition:box-shadow .32s var(--e-out), border-color .32s var(--e-out)}
.hdr.scrolled::before{height:0}
.hdr.scrolled .hdr-in{min-height:58px}
.hdr.scrolled{border-bottom-color:var(--ink); box-shadow:0 1px 0 rgba(10,10,10,.06)}
.hdr.scrolled .logo{font-size:.98rem}
.logo{transition:font-size .32s var(--e-out)}

/* nav rhythm: labels sit closer, the CTA carries an arrow that moves */
.nav > ul{gap:2px}
.nav a,.nav-b{font-size:.875rem; padding:8px 14px; letter-spacing:-.008em}
.hdr-cta .btn{gap:.4em}
.btn-ar{position:relative; z-index:1}

/* a considered panel rather than a dropdown list */
.menu{min-width:430px; left:-10px}
.menu::before{content:attr(data-label); display:block; padding:14px 18px 10px;
  font-size:.66rem; font-weight:680; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); border-bottom:1px solid var(--hair)}
.menu a{padding:14px 18px; display:grid; grid-template-columns:1fr auto; gap:0 14px;
  align-items:center}
.menu a::before{content:"\2192"; grid-column:2; grid-row:1 / span 2; color:var(--ink-3);
  opacity:0; transform:translateX(-6px); transition:opacity .3s var(--e-out),
  transform .3s var(--e-out)}
.menu a:hover::before{opacity:1; transform:none; color:var(--green-ink)}
.mi-t,.mi-d{grid-column:1}

/* The spine collapses at one width for the whole site (760px). The hero's
   figure drops below its copy earlier (920px) because two text columns plus a
   figure is too much at that size - but the margin column stays until 760,
   so the hero and the sections never disagree about where text begins. */
@media (max-width:920px) and (min-width:761px){
  .hero > .wrap.hero-in{grid-template-columns:var(--margin-col) minmax(0,1fr)}
  .hero-copy{grid-column:2; padding-right:0}
  .hero-aside{grid-column:2; margin-top:34px}
}
@media (max-width:760px){
  .hero > .wrap.hero-in{grid-template-columns:minmax(0,1fr); gap:30px}
  .hero-copy,.hero-aside{grid-column:1; min-width:0; padding-right:0}
}

/* `1fr` is min-content-floored, so a 520px table inside a scroll wrapper still
   blew the page to 544px at 375px wide. minmax(0,1fr) lets the wrapper do its
   job. Measured, not guessed. */
@media (max-width:920px) and (min-width:761px){
  .hero > .wrap.hero-in{grid-template-columns:var(--margin-col) minmax(0,1fr)}
}
@media (max-width:760px){
  .sec > .wrap,.phero > .wrap,.hero > .wrap.hero-in,
  .clause,.step,.scrolly{grid-template-columns:minmax(0,1fr)}
}
.tbl-wrap{max-width:100%}

/* Banner controls are links and buttons in their own right, so they need a
   thumb-sized target like everything else. */
.ann-cta{display:inline-flex; align-items:center; min-height:44px}
.ann-x{width:44px; height:44px}
@media (max-width:760px){
  .ann-in{padding-right:48px}
}

/* The CSS property is authoritative and the meta is only a hint, so declare it
   here too. Without this the browser's automatic dark mode inverts the whole
   site - which it did, and the meta did not stop it because "light only" is
   not a valid keyword order. It is "only light". */
:root{color-scheme:only light}

/* ==================================================================
   HERO PROPORTION
   Measured at 1366x768: the h1 was 540px tall and the call to action sat
   300px below the fold. The headline was sized against the viewport (6.4vw)
   while living in a ~550px column, so it wrapped to six lines.

   Type scales to the column it occupies, not to the window.
   ================================================================== */
.hero{padding:clamp(34px,4vw,60px) 0 clamp(40px,4.5vw,68px)}
.hero > .wrap.hero-in{align-items:start}
.hero h1{font-size:clamp(2.1rem,3.4vw,3.35rem); letter-spacing:-.035em; line-height:1.06}
.hero .lede{font-size:clamp(1.02rem,1.35vw,1.16rem); max-width:26em}
.hero .btn-row{margin-top:26px}
.hero-rule{margin-top:28px}
.hero-meta{margin-top:22px; padding-top:18px}
.hero-meta p{font-size:.8rem}

/* the figure sits level with the headline rather than centred against it */
.hero-aside{padding-top:6px}

/* interior heads get the same treatment - they had the same fault */
.phero h1{font-size:clamp(2rem,3.8vw,3.4rem); line-height:1.06}
.phero{padding:clamp(30px,3.4vw,52px) 0 clamp(24px,2.6vw,38px)}

/* section headings were sized for a full-width column too */
h2{font-size:clamp(1.7rem,2.9vw,2.5rem)}
.band h2{font-size:clamp(1.8rem,3.4vw,2.9rem)}

/* A two-column split needs real room. At 768 the booking form and its
   explanation were still side by side at ~350px each, which is a column for
   neither. They separate at 900 now. */
@media (max-width:900px){
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .grid-2 > * + *{margin-top:34px}
}

/* ---------------- status chips, standardised ----------------
   Chips were sizing to their own text, so a column of them came out ragged:
   "Complete", "2 due" and "1 expired" each a different width. A status column
   is a column - one width, centred, with the chips sharing a right edge. */
.chip{min-width:96px; justify-content:center; text-align:center; padding:5px 10px;
  letter-spacing:.01em}
.chip:empty{min-width:0}
.mock-tbl td:last-child{width:118px; padding-left:12px}
.mock-tbl td:first-child{width:38%}
.pk li .chip{flex:0 0 auto}

/* the figures row: equal columns, baseline-aligned, same label treatment */
.mock-kpis > div{display:flex; flex-direction:column; justify-content:flex-start}
.k-v{display:flex; align-items:baseline; gap:1px; min-height:1em}
.k-l{min-height:2.2em}

/* the pinned sequence rows use the same column rhythm as the table above them */
.frame-rows .fr{display:grid; grid-template-columns:9.5em minmax(0,1fr); gap:0 12px;
  align-items:baseline}
.fr-k{min-width:0}

/* Grid children must be allowed to shrink or long prose runs under its
   neighbour, which is what put body text beneath the figure on the homepage.
   `1fr` alone is floored at min-content. */
.grid > *{min-width:0}
.grid-2,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .grid-2{grid-template-columns:minmax(0,1fr)} }
@media (max-width:680px){ .grid-3{grid-template-columns:minmax(0,1fr)} }

/* A sticky header eats the top of anything you jump to, and it was clipping
   section headings on scroll. */
.sec,.clause,h1,h2,h3,[id]{scroll-margin-top:110px}

/* A fixed chip width standardises a column on a real screen and strangles it
   on a 320px one, where "Acknowledged" no longer fits. Below the phone
   breakpoint the chip sizes to its text again. */
@media (max-width:420px){
  .chip{min-width:0}
  .mock-tbl td:last-child{width:auto}
  .frame-rows .fr{grid-template-columns:minmax(0,1fr) auto}
  .fr-k{font-size:.80rem}
}

/* ---------------- the booking form ----------------
   Fields were 68px slabs and the aside was set at section-heading size, so the
   page read as two competing columns rather than a form with a note beside it. */
.form-wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,4vw,64px); align-items:start}
@media (max-width:900px){ .form-wrap{grid-template-columns:minmax(0,1fr)} }

.form{max-width:none}
.fld{margin:0 0 20px}
.fld label{font-size:.93rem; margin-bottom:5px; font-weight:600}
.fh{font-size:.82rem; margin-bottom:7px; line-height:1.4}
.fld input{height:50px; padding:0 14px; font-size:.98rem; border-width:1.5px}
.fld textarea{padding:12px 14px; font-size:.98rem; border-width:1.5px; line-height:1.5}
.fld input:hover:not([disabled]),.fld textarea:hover:not([disabled]){border-color:var(--green-ink)}
.fld input[disabled],.fld textarea[disabled]{
  border-style:dashed; border-color:var(--line-2); background:var(--paper-2); cursor:not-allowed}

/* the note beside the form is a note, not a rival section */
.form-aside{border-left:1px solid var(--hair); padding-left:clamp(20px,2.4vw,36px)}
@media (max-width:900px){
  .form-aside{border-left:0; border-top:1px solid var(--hair); padding-left:0; padding-top:30px}
}
.form-aside h2{font-size:1.02rem; letter-spacing:-.012em; margin:0 0 14px; font-weight:640}
.form-aside h2 + ul{margin-bottom:30px}
.form-aside ul{list-style:none; margin:0 0 26px; padding:0}
.form-aside li{position:relative; padding:11px 0 11px 26px; border-top:1px solid var(--hair);
  font-size:.93rem; color:var(--ink-2); margin:0; line-height:1.45}
.form-aside li:last-child{border-bottom:1px solid var(--hair)}
.form-aside li::before{content:""; position:absolute; left:2px; top:19px; width:9px; height:1.5px;
  background:var(--green)}
.form-aside .no li::before{background:var(--risk); width:9px; height:1.5px}

/* ==================================================================
   THE RECORD WALL
   The scope of the product, shown as it fills. This is the section the
   product is sold on, so it is the one that moves.
   ================================================================== */
.wall{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(24px,3vw,52px); align-items:start}
.wall-head{position:sticky; top:104px}
.wall-count{font-family:var(--serif); font-size:clamp(3.4rem,7vw,5.6rem); line-height:1;
  margin:0; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.wall-of{color:var(--ink-3); font-size:.42em}
.wall-lab{margin:.5em 0 0; font-size:.88rem; color:var(--ink-2); max-width:14em}
.wall-cap{margin:1.4em 0 0; font-size:.8rem; color:var(--ink-3); max-width:16em;
  padding-top:1em; border-top:1px solid var(--hair)}
.wall-grid{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--hair);
  border:1px solid var(--hair)}
.tile{margin:0; background:var(--paper); padding:16px 16px 15px; position:relative;
  display:grid; grid-template-columns:18px minmax(0,1fr); gap:0 11px; align-items:start;
  transition:opacity .45s var(--e-out)}
.tile-n{font-weight:600; font-size:.93rem; letter-spacing:-.012em; line-height:1.3}
.tile-s{grid-column:2; font-size:.79rem; color:var(--ink-3); line-height:1.4; margin-top:3px}
@media (max-width:860px){
  .wall{grid-template-columns:minmax(0,1fr)}
  /* The counter is the point of the section - `position:relative` let it
     scroll away in one flick, above 18 single-column tiles it no longer had
     any relationship to. Kept sticky, just shallower and row-flowed so it
     does not eat the viewport on a phone. */
  .wall-head{position:sticky; top:78px; z-index:2; display:flex; align-items:baseline;
    gap:16px; flex-wrap:wrap; background:var(--paper); padding-bottom:10px;
    border-bottom:1px solid var(--hair)}
  .wall-count{font-size:2.4rem}
  .wall-cap{border-top:0; padding-top:0; margin:0; flex-basis:100%}
}
@media (max-width:560px){ .wall-grid{grid-template-columns:minmax(0,1fr)} }


/* A statement between two sections gets its own tighter rhythm - it should
   breathe, not sit in the sum of both neighbours' padding. */
.sec.tight{padding:clamp(26px,3vw,46px) 0; border-top:0}
.sec.tight .pull{margin:0}
.sec.tight .note{margin:0}

/* ---------------- official sources ----------------
   Outbound links to the guidance we describe. A compliance site that does not
   let you go and check it is asking for trust it has not earned. */
.sources{border-top:2px solid var(--rule); padding-top:26px; margin-top:44px;
  max-width:var(--measure)}
.sources h2{font-size:.79rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3);
  margin:0 0 6px; font-weight:640}
.sources ul{list-style:none; margin:0; padding:0}
.sources li{padding:16px 0; border-bottom:1px solid var(--hair); margin:0;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 14px}
.sources li > a{font-weight:580; font-size:1rem; letter-spacing:-.012em; grid-column:1}
.sources li > a::after{content:" \2197"; color:var(--ink-3); font-size:.85em}
.src-pub{grid-column:2; grid-row:1; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding-top:.25em; white-space:nowrap}
.src-what{grid-column:1 / -1; font-size:.86rem; color:var(--ink-2); line-height:1.45}
.src-note{margin:16px 0 0; font-size:.78rem; color:var(--ink-3)}

/* The statement band carried its own .wrap and so ignored the spine, starting
   its heading ~175px left of every other heading on the page. It uses the same
   column structure as everything else now. */
.band > .wrap{display:grid; grid-template-columns:var(--margin-col) minmax(0,1fr);
  gap:0 var(--spine-gap)}
.band > .wrap > *{grid-column:2}
@media (max-width:760px){
  .band > .wrap{grid-template-columns:minmax(0,1fr)}
  .band > .wrap > *{grid-column:1}
}

/* A prose heading inside a two-column block was rendering at section-heading
   size and competing with the section it sits in. */
.grid .prose h2,.sec-body .grid h2{font-size:clamp(1.25rem,1.9vw,1.6rem); margin-top:0}
.grid .prose > p:first-of-type{font-size:1rem}

/* ---------------- related pages ----------------
   Editorial links between pages. Navigation is not internal linking. */
.related h2{font-size:.79rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3);
  margin:0 0 4px; font-weight:640}
.related ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--hair)}
.related li{margin:0; padding:15px 0; border-bottom:1px solid var(--hair);
  display:grid; grid-template-columns:minmax(0,15em) minmax(0,1fr); gap:2px 20px;
  align-items:baseline}
.related li > a{font-weight:580; font-size:1rem; letter-spacing:-.012em}
.related li > span{color:var(--ink-2); font-size:.9rem; line-height:1.45}
@media (max-width:620px){ .related li{grid-template-columns:minmax(0,1fr)} }

/* ---------------- layout stability ----------------
   font-display:swap paints in a fallback first, and if that fallback's metrics
   differ the text reflows when Inter arrives - which is cumulative layout
   shift, and Core Web Vitals counts it. A metric-matched fallback keeps the
   two renderings the same size. */
@font-face{
  font-family:'Inter fallback';
  src:local('Arial');
  size-adjust:107%;
  ascent-override:90%;
  descent-override:22%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Serif fallback';
  src:local('Times New Roman');
  size-adjust:112%;
  ascent-override:88%;
  descent-override:24%;
  line-gap-override:0%;
}
:root{
  --sans:'Inter','Inter fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'Instrument Serif','Serif fallback',Georgia,'Times New Roman',serif;
}

/* ---------------- content grids need a gutter ----------------
   .grid is gap:0 because card rows separate themselves with rules. Where prose
   sits beside a figure there is no rule, so the text ran straight into the edge
   of the card with nothing between them. Content splits declare themselves. */
.grid-split{column-gap:clamp(26px,3.4vw,56px); row-gap:34px; align-items:start}
.grid-split > *{min-width:0}
@media (max-width:900px){ .grid-split{row-gap:30px} }

/* The card divider used nth-child(3n+1), which is only correct while there are
   three columns. At the two-column breakpoint the wrong cards lost their rule,
   leaving pairs with neither a divider nor a gutter. */
@media (max-width:960px) and (min-width:681px){
  .card{border-left:1px solid var(--hair)}
  .card:nth-child(2n+1){border-left:0}
}
@media (max-width:680px){
  .card,.card + .card{border-left:0}
}

/* The previous block lost to the earlier `.card:nth-child(3n+1)` rule, which is
   more specific than a bare `.card`. Same specificity, later in the file. */
@media (max-width:960px) and (min-width:681px){
  .card:nth-child(3n+1){border-left:1px solid var(--hair)}
  .card:nth-child(2n+1){border-left:0}
}

/* ---------------- the audit pack, as an artefact ----------------
   It was a list of six rows with a coloured square doing all the work. A pack
   is a document: it has a score, a clause reference per line, and a footer. */
.mock-pack .pk-sum{display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-bottom:1px solid var(--hair); background:var(--paper-2)}
.pk-score{margin:0; font-size:.86rem; color:var(--ink-2); white-space:nowrap}
.pk-score strong{font-size:1.1rem; font-weight:660; color:var(--ink)}
.pk-meter{display:flex; gap:3px; flex:1; min-width:60px}
.pk-meter i{height:5px; flex:1; background:var(--green)}
.pk-meter i.off{background:var(--risk)}
.pk-gap{margin:0; font-size:.80rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--risk); white-space:nowrap; font-weight:620}

.mock-pack .pk{padding:0}
.pk-row{display:grid; grid-template-columns:3.1rem minmax(0,1fr) auto; gap:0 12px;
  align-items:baseline; padding:13px 16px; border-bottom:1px solid var(--hair); margin:0}
.pk-row:last-child{border-bottom:0}
.pk-ref{font-size:.79rem; font-weight:660; color:var(--ink-3); letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.pk-name{display:block; font-size:.92rem; font-weight:580; letter-spacing:-.012em}
.pk-note{display:block; font-size:.81rem; color:var(--ink-3); line-height:1.35; margin-top:2px}
.pk-val{font-size:.82rem; font-weight:580; color:var(--ink-2); white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pk-risk{background:var(--risk-wash)}
.pk-risk .pk-ref{color:var(--risk)}
.pk-risk .pk-val{color:var(--risk); font-weight:640}
.pk-risk .pk-note{color:var(--risk)}
.mock-pack .pk-foot{display:flex; justify-content:space-between; gap:12px; padding:12px 16px;
  border-top:1px solid var(--ink); font-size:.80rem; color:var(--ink-3)}
.pk-foot-note{color:var(--ink-2)}
@media (max-width:420px){
  .pk-row{grid-template-columns:2.6rem minmax(0,1fr); gap:0 10px}
  .pk-val{grid-column:2; margin-top:3px}
}

/* `.pk li` (0,1,1) was still winning over `.pk-row` (0,1,0), so the rows stayed
   flex and the values never reached the right edge. Match the specificity. */
.pk li.pk-row{display:grid; grid-template-columns:3.1rem minmax(0,1fr) auto; gap:0 12px;
  align-items:baseline; padding:13px 16px}
.pk li.pk-row .pk-val{text-align:right}
@media (max-width:420px){
  .pk li.pk-row{grid-template-columns:2.6rem minmax(0,1fr)}
}

/* ---------------- record wall density ----------------
   Seventeen tiles in two columns is nine rows and roughly 970px: on a laptop
   the section that sells the product cannot be seen without scrolling through
   it. Three columns brings it to six rows, and the tiles carry less padding. */
@media (min-width:1100px){
  .wall{grid-template-columns:minmax(0,13rem) minmax(0,1fr)}
  .wall-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1600px){
  .wall-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.tile-n{font-size:.86rem; line-height:1.25}
.tile-s{font-size:.735rem; line-height:1.35; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.wall-count{font-size:clamp(2.8rem,5vw,4.4rem)}
.wall-lab{font-size:.84rem}
.wall-cap{font-size:.81rem; margin-top:1.1em; padding-top:.9em}

/* ---------------- navigation at scale ----------------
   Groups grew to six items. A single-column dropdown became 660px tall and the
   phone drawer became a 1,000px scroll. Both now adapt to how many links a
   group actually has. */

/* desktop: wide groups become two columns and lose a little padding */
.menu-2{width:min(620px,calc(100vw - 32px)); min-width:0}
.menu-2 ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
.menu-2 li + li{border-top:0}
.menu-2 li{border-top:1px solid var(--hair)}
.menu-2 li:nth-child(-n+2){border-top:0}
.menu-2 li:nth-child(odd){border-right:1px solid var(--hair)}
.menu a{padding:12px 16px}
.menu{max-height:min(74vh, 620px); overflow-y:auto}
.mi-d{font-size:.79rem}

/* phone: collapsible groups, closed by default */
.mgroup{border-bottom:1px solid var(--hair)}
.mgroup summary{display:flex; align-items:center; gap:10px; min-height:56px; cursor:pointer;
  font-weight:600; font-size:1.02rem; letter-spacing:-.015em; list-style:none; position:relative;
  padding-right:34px}
.mgroup summary::-webkit-details-marker{display:none}
.mcount{font-size:.78rem; font-weight:640; color:var(--ink-3); background:var(--paper-2);
  padding:2px 7px; border-radius:999px}
.mgroup summary::after,.mgroup summary::before{content:""; position:absolute; right:6px;
  top:calc(50% - .75px); width:13px; height:1.5px; background:var(--ink); transition:transform .3s var(--e-out)}
.mgroup summary::before{transform:rotate(90deg)}
.mgroup[open] summary::before{transform:rotate(0)}
.mgroup ul{list-style:none; margin:0 0 10px; padding:0}
.mgroup li{margin:0}
.mgroup a{display:block; min-height:0; padding:11px 0 11px 14px; border-bottom:0;
  border-left:2px solid var(--hair); font-weight:520; font-size:.97rem}
.mgroup a:hover{border-left-color:var(--green)}
.mgroup .md{display:block; font-size:.79rem; color:var(--ink-3); font-weight:450; margin-top:1px}
.mflat{list-style:none; margin:14px 0 0; padding:0}
.mflat li{margin:0}
.mflat a{display:flex; align-items:center; min-height:52px; border-bottom:1px solid var(--hair);
  font-weight:580; font-size:1.02rem}

/* A no-JS fallback for the same problem: the last groups in the bar are the
   ones that overflow, so they anchor to their right edge by default. */
.nav > ul > .has-menu:nth-last-child(n+1):nth-last-child(-n+4) .menu{left:auto; right:-10px}
.menu{max-width:calc(100vw - 32px)}

/* ---------------- large screens ----------------
   The container was fixed at 1240px and the body at 19px, so a 2560px display
   showed a narrow column of small text floating in white. Nothing was broken,
   which is exactly why measuring only for defects never caught it: the page
   has to grow with the screen, not merely survive it. */
@media (min-width:1500px){
  :root{ --maxw:1380px; --margin-col:6rem; --gut:32px; }
  body{font-size:19.5px}
}
@media (min-width:1800px){
  :root{ --maxw:1520px; --margin-col:7rem; --gut:40px; }
  body{font-size:20.5px}
  .hero h1{font-size:3.6rem}
  .phero h1{font-size:3.5rem}
}
@media (min-width:2200px){
  :root{ --maxw:1680px; --margin-col:8rem; }
  body{font-size:21.5px}
  .hero h1{font-size:4rem}
}

/* ---------------------------------------------------------------- print
   A compliance manager prints the pricing page, or saves it as a PDF, and
   takes it to a director. That is a real path to a sale, so it has to work.

   The first rule is the one that matters. Every reveal starts at opacity 0
   and is brought in when it scrolls into view, so printing a page the reader
   has not scrolled through produced holes where the content should be - ten
   missing blocks out of thirty-six on one page. Print gets everything. */
@media print{
  *,*::before,*::after{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
    filter:none !important;
    clip-path:none !important;
    /* Background fills are ink somebody pays for, and a dark band prints as
       a solid black rectangle with white text on it. */
    background:transparent !important;
    color:#000 !important;
    box-shadow:none !important;
  }

  /* Navigation cannot be used on paper, and a sticky header repeats. */
  .hdr,.ann,.burger,.mnav,.skip,.ticker,.related,.crumb,.btn-row,.btn,
  .ftr-grid,.enquiry,.form-wrap{display:none !important}

  html,body{font-size:11pt; background:#fff !important}
  main{max-width:none}
  .wrap{max-width:none; padding:0}

  /* Keep the legal identity: Companies Act s.82 means the registered office
     travels with the document, and whoever picks this up needs to know who
     wrote it. */
  .ftr,.ftr-legal,.ftr-co{display:block !important; border-top:1px solid #000;
    padding-top:8pt; margin-top:12pt; font-size:9pt}

  /* On paper a link's text is all you get, so the address has to be printed.
     Internal links are resolved against the live site rather than left as a
     bare path that means nothing off-screen. */
  a[href^="http"]::after{content:" <" attr(href) ">"; font-size:8.5pt; word-break:break-all}
  a[href^="/"]::after{content:" <stampedhr.com" attr(href) ">"; font-size:8.5pt}
  .vh{display:none !important}

  /* The spine's margin column is a screen device. On A4 it throws away a
     third of the page and leaves the text in a narrow ribbon, so the
     numbering sits tight against the text instead. */
  :root{--margin-col:2.4rem; --spine-gap:12px; --maxw:none}
  .hero > .wrap.hero-in{grid-template-columns:var(--margin-col) minmax(0,1fr)}
  .grid,.grid-split{display:block}
  .grid > * + *{margin-top:10pt}

  h1,h2,h3{break-after:avoid-page; page-break-after:avoid}
  .card,.mock,.tbl,table,figure,li,.faq{break-inside:avoid-page; page-break-inside:avoid}
  .sec{break-inside:auto; padding:0 0 14pt}

  /* Rules and borders still have to be visible once backgrounds are gone. */
  .tbl th,.tbl td,.mock-tbl th,.mock-tbl td{border-color:#000 !important}
  .mock{border:1px solid #000 !important}
}

/* ==================================================================
   FIGURES THAT MOVE
   Four figures carry the product's argument - coverage, the worker record,
   the eighteen record types, the audit pack - so those four are where the
   site spends its motion. Everything else stays still.

   Contract (see ukc/figures.py): every rule below with no `.live` / `.js`
   qualifier is the FINISHED state, which is what renders with no script.
   The empty starting state only exists behind `.js [data-anim]:not(.in)`,
   `[data-anim].live:not(.in)` or `.wall.live .tile:not(.on)`, and app.js
   is the only thing that sets those classes. Text in a starting state is
   dimmed, never invisible, as on the wall and the pinned steps: a tab in the
   background delivers no scroll events, and a figure waiting on one must
   still read.
   ================================================================== */
.ico{width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.14em;
  overflow:visible}
/* Two-tone icons (ukc/icons.py) are retuned per context through these;
   the markup alone already draws them correctly. */
.ico .f{fill-opacity:var(--ic-fo,.18)}
.ico .a{fill:var(--ic-a,currentColor)}
.ico .k{fill:var(--ic-k,var(--paper))}
.ico .w{stroke:var(--ic-k,var(--paper))}

/* One motion vocabulary for all four figures. Things arrive by moving, not
   by fading, and a thing that becomes a record is STAMPED: pressed in
   over-size and off-square, overshooting, settling at a hand-set angle.
   It is the product's name, and it reads at a normal scrolling speed where
   an opacity change from .3 to 1 did not. Fast - about half a second - so
   it registers without making anyone wait for it. */
/* The first frame is dimmed, not invisible: an animation does not start
   until a frame is drawn, so in a background tab it holds this frame, and
   the figure contract is that a starting state still reads. */
@keyframes stamp{
  0%  {transform:scale(1.6) rotate(-10deg); opacity:.3}
  45% {transform:scale(.9) rotate(var(--r,0deg)); opacity:1}
  72% {transform:scale(1.05) rotate(var(--r,0deg))}
  100%{transform:scale(1) rotate(var(--r,0deg)); opacity:1}
}
@keyframes ink{
  0%  {box-shadow:0 0 0 0 rgba(18,183,106,.4)}
  100%{box-shadow:0 0 0 10px rgba(18,183,106,0)}
}
@keyframes ink-risk{
  0%  {box-shadow:0 0 0 0 rgba(180,35,24,.45)}
  100%{box-shadow:0 0 0 12px rgba(180,35,24,0)}
}
@keyframes shake{
  0%,100%{transform:none}
  20%{transform:translateX(-4px) rotate(-4deg)}
  45%{transform:translateX(3px) rotate(3deg)}
  70%{transform:translateX(-2px)}
}
@keyframes tick{
  0%  {transform:translateY(-.1em) scale(1.08); color:var(--green-ink)}
  100%{transform:none}
}
/* A chip sits flush with its column's right edge, so it is pressed
   straight, from that edge: a tilted corner would cross the card's border. */
@keyframes press{
  0%  {transform:scale(1.45); opacity:.3}
  50% {transform:scale(.94); opacity:1}
  75% {transform:scale(1.03)}
  100%{transform:none; opacity:1}
}
@keyframes pop{
  0%  {transform:scale(.7)}
  60% {transform:scale(1.12)}
  100%{transform:none}
}
:root{--press:cubic-bezier(.3,.7,.3,1)}

/* ---- the eighteen record types
   Each plate is set a degree or two off square, as a hand-held stamp is.
   A pattern of five against a grid of three never lines up into a visible
   repeat. Before it is held, a plate is an empty dashed slot. */
.tile{padding:14px 14px 13px; grid-template-columns:46px minmax(0,1fr); gap:0 13px;
  transition:opacity .5s var(--e-out)}
/* The tile itself stays put: the grid draws its rules with a background
   showing through 1px gaps, and a tile moved off its cell opened a grey band. */
.tile-n,.tile-s{transition:transform .6s var(--e-out), opacity .5s var(--e-out)}
.tile-ic{grid-row:1 / span 2; position:relative; width:46px; height:46px; display:grid;
  place-items:center; background:var(--green-wash); color:var(--green-ink);
  --ic-a:var(--green); --ic-k:var(--green-wash); font-size:28px;
  border:1.5px solid transparent; border-radius:3px; transform:rotate(var(--r,0deg));
  transition:background-color .3s var(--e-out), border-color .3s var(--e-out),
             color .3s var(--e-out), transform .35s var(--e-out)}
.tile:nth-child(5n+1) .tile-ic{--r:-2deg}
.tile:nth-child(5n+2) .tile-ic{--r:1.5deg}
.tile:nth-child(5n+3) .tile-ic{--r:-.5deg}
.tile:nth-child(5n+4) .tile-ic{--r:2deg}
.tile:nth-child(5n) .tile-ic{--r:-1.25deg}
/* Dim the words, not the tile: a translucent tile let the grid's rule colour
   through and read as a grey, disabled block. */
.wall.live .tile{opacity:1}
.wall.live .tile:not(.on) .tile-n,.wall.live .tile:not(.on) .tile-s{opacity:.4;
  transform:translateY(10px)}
.wall.live .tile:not(.on) .tile-ic{background:transparent; border-color:var(--hair);
  border-style:dashed; color:var(--ink-3); --ic-a:var(--hair); --ic-k:var(--paper); --ic-fo:.05}
.wall.live .tile.on .tile-ic{animation:stamp .55s var(--press) backwards, ink .7s ease-out .22s}
.wall.live .tile.on:nth-child(3n+2),.wall.live .tile.on:nth-child(3n+2) .tile-n,
.wall.live .tile.on:nth-child(3n+2) .tile-s{transition-delay:.08s}
.wall.live .tile.on:nth-child(3n),.wall.live .tile.on:nth-child(3n) .tile-n,
.wall.live .tile.on:nth-child(3n) .tile-s{transition-delay:.16s}
.wall.live .tile.on:nth-child(3n+2) .tile-ic{animation-delay:.08s,.3s}
.wall.live .tile.on:nth-child(3n) .tile-ic{animation-delay:.16s,.38s}
[data-wall-n]{display:inline-block}
[data-wall-n].tick{animation:tick .45s var(--e-out)}

/* ---- evidence coverage: the bar and the count run together, the rows
   rise in, and each status is stamped - the expired one last, with a ring */
.k-v .k-num{font-size:inherit; font-weight:inherit}
.k-bar{display:block; width:100%; height:5px; margin:.55em 0 0}
.k-bar-bg{fill:var(--hair)}
.k-bar-fill{fill:var(--green); transform-box:fill-box; transform-origin:left center;
  transition:transform 1.3s cubic-bezier(.33,1,.68,1) .3s}
.k-held .k-l{min-height:0; margin-top:.5em}
.k-l{display:flex; align-items:flex-start; gap:5px}
.ico-k{font-size:13px; margin-top:.1em}
.k-warn + .k-l .ico-k{color:var(--warn)}
.k-risk + .k-l .ico-k{color:var(--risk)}
.chip{gap:5px}
.ico-chip{font-size:12px; stroke-width:2.1}

/* ---- the audit pack: five clauses land in rhythm, each stamped held and
   filling its segment of the meter. Then a beat, and the gap arrives on
   its own: the row slides in, its red sweeps across, the mark is stamped
   and shakes, the meter's last segment flags. The gap is the point of the
   figure, so it is the one thing that gets its own moment. */
.pk-meter i{height:6px; transform-origin:left center; transition:transform .45s var(--e-out)}
.pk-meter i:nth-child(1){transition-delay:.4s}
.pk-meter i:nth-child(2){transition-delay:.56s}
.pk-meter i:nth-child(3){transition-delay:.72s}
.pk-meter i:nth-child(4){transition-delay:.88s}
.pk-meter i:nth-child(5){transition-delay:1.04s}
.pk-meter i.off{transition-delay:1.7s}
.js .mock-pack.in .pk-meter i.off,.mock-pack.live.in .pk-meter i.off{
  animation:gap-flag .7s var(--e-out) 2.1s 2}
@keyframes gap-flag{50%{box-shadow:0 0 0 4px rgba(180,35,24,.28)}}
.pk-gap{display:inline-flex; align-items:center; gap:5px; transition:opacity .3s var(--e-out) 2s}
.js .mock-pack.in .pk-gap,.mock-pack.live.in .pk-gap{animation:pop .45s var(--e-out) 2s backwards}
.ico-gap{font-size:13px; stroke-width:2}
.pk-val{display:inline-flex; align-items:center; justify-content:flex-end; gap:7px}
.ico-pk{font-size:17px; color:var(--green-ink); --ic-a:currentColor}
.pk-risk .ico-pk{color:var(--risk)}
.mock-pack .pk-row{transition:opacity .5s var(--e-out), transform .6s var(--e-out)}
.mock-pack .pk-row:nth-child(1){transition-delay:.3s}
.mock-pack .pk-row:nth-child(2){transition-delay:.46s}
.mock-pack .pk-row:nth-child(3){transition-delay:.62s}
.mock-pack .pk-row:nth-child(4){transition-delay:.78s}
.mock-pack .pk-row:nth-child(5){transition-delay:.94s}
.mock-pack .pk-row.pk-risk{transition-delay:1.5s}
.js .mock-pack.in .ico-pk,.mock-pack.live.in .ico-pk{animation:stamp .45s var(--press) backwards}
.js .mock-pack.in .pk-row:nth-child(1) .ico-pk,.mock-pack.live.in .pk-row:nth-child(1) .ico-pk{animation-delay:.5s}
.js .mock-pack.in .pk-row:nth-child(2) .ico-pk,.mock-pack.live.in .pk-row:nth-child(2) .ico-pk{animation-delay:.66s}
.js .mock-pack.in .pk-row:nth-child(3) .ico-pk,.mock-pack.live.in .pk-row:nth-child(3) .ico-pk{animation-delay:.82s}
.js .mock-pack.in .pk-row:nth-child(4) .ico-pk,.mock-pack.live.in .pk-row:nth-child(4) .ico-pk{animation-delay:.98s}
.js .mock-pack.in .pk-row:nth-child(5) .ico-pk,.mock-pack.live.in .pk-row:nth-child(5) .ico-pk{animation-delay:1.14s}
.js .mock-pack.in .pk-risk .ico-pk,.mock-pack.live.in .pk-risk .ico-pk{
  animation:stamp .5s var(--press) 1.9s backwards, shake .45s ease-in-out 2.4s}
/* the gap row's red is drawn, not painted, so it can sweep in */
.pk li.pk-risk{background:none; position:relative; isolation:isolate}
.pk-risk::before,.pk-risk::after{content:""; position:absolute; z-index:-1; pointer-events:none}
.pk-risk::before{inset:0; background:var(--risk-wash); transform-origin:left center;
  transition:transform .6s var(--e-out) 1.6s}
.pk-risk::after{left:0; top:0; bottom:0; width:3px; background:var(--risk);
  transform-origin:top center; transition:transform .35s var(--e-out) 1.55s}
.js .mock-pack[data-anim]:not(.in) .pk-meter i,
.mock-pack[data-anim].live:not(.in) .pk-meter i{transform:scaleX(0)}
.js .mock-pack[data-anim]:not(.in) .pk-row,
.mock-pack[data-anim].live:not(.in) .pk-row{opacity:.12; transform:translateX(-22px)}
.js .mock-pack[data-anim]:not(.in) .pk-risk::before,
.mock-pack[data-anim].live:not(.in) .pk-risk::before{transform:scaleX(0)}
.js .mock-pack[data-anim]:not(.in) .pk-risk::after,
.mock-pack[data-anim].live:not(.in) .pk-risk::after{transform:scaleY(0)}
.js .mock-pack[data-anim]:not(.in) .pk-gap,
.mock-pack[data-anim].live:not(.in) .pk-gap{opacity:.3}

/* The gap label gained an icon and no longer fits beside the meter on a
   phone; the meter takes its own line under the score instead. */
@media (max-width:420px){
  .pk-val{justify-content:flex-start}
  .mock-pack .pk-sum{flex-wrap:wrap; row-gap:10px}
  .pk-meter{order:3; flex-basis:100%}
  .pk-gap{margin-left:auto}
  /* four columns at 320px leave no room for the mark; the colour and the
     words still carry the status */
  .mock-tbl td:nth-child(4) .ico-chip{display:none}
}

/* ---- the worker record: each line's record type on its own small plate,
   grey until the step reaches it, stamped as it becomes the current line */
.fr-k{display:inline-flex; align-items:center; gap:10px}
.fr-ic{display:inline-grid; place-items:center; flex:none; width:28px; height:28px;
  border-radius:3px; background:var(--green-wash); color:var(--green-ink);
  --ic-a:var(--green); --ic-k:var(--green-wash);
  transition:background-color .35s var(--e-out), color .35s var(--e-out)}
.ico-fr{font-size:18px}
.frame-rows[data-active] .fr:not(.on) .fr-ic{background:var(--paper-2); color:var(--ink-3);
  --ic-a:var(--hair); --ic-k:var(--paper-2); --ic-fo:.08}
.frame-rows[data-active] .fr.now .fr-ic{animation:stamp .5s var(--press) backwards,
  ink .7s ease-out .2s}
.frame-rows .fr{grid-template-columns:12.5em minmax(0,1fr)}
@media (max-width:420px){ .frame-rows .fr{grid-template-columns:minmax(0,1fr) auto} }

/* The global reduced-motion rule shortens durations but keeps delays, and a
   `backwards` stamp holds its invisible first frame through its delay - so
   every entrance here is switched off by name, not by shortening. */
@media (prefers-reduced-motion: reduce){
  .tile-ic,.chip,.ico-pk,.pk-gap,.pk-meter i,.fr-ic,[data-wall-n]{animation:none !important}
  .tile,.tile-ic,.tile-n,.tile-s,.mock-cov tbody tr,.mock-pack .pk-row,.pk-meter i,.pk-gap,.k-bar-fill,
  .pk-risk::before,.pk-risk::after,.fr-ic{transition:none !important}
  .tile:hover .tile-ic{transform:rotate(var(--r,0deg))}
}

/* ---------------- trust strip ----------------
   Dark band, green only as the label. Five statements of what is built. */
.trust{background:var(--ink); color:#fff; padding:clamp(34px,5vw,56px) 0}
.trust-h{margin:0 0 22px; color:var(--green); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; font-family:inherit}
.trust-net{display:block; width:100%; height:auto; margin:0 0 4px; overflow:visible}
.tn-line{fill:none; stroke:rgba(255,255,255,.34); stroke-width:1.2; vector-effect:non-scaling-stroke;
  stroke-dasharray:.02 .018; animation:tn-flow 5s linear infinite}
.tn-node{fill:var(--ink); stroke:var(--green); stroke-width:2; vector-effect:non-scaling-stroke;
  animation:tn-pulse 3.2s ease-in-out infinite; animation-delay:calc(var(--d) * -.6s)}
.tn-hub{fill:var(--green)}
.tn-label{fill:#fff; font-size:13px; font-weight:650; letter-spacing:.01em}
@keyframes tn-flow{to{stroke-dashoffset:-.038}}
@keyframes tn-pulse{50%{fill:rgba(18,183,106,.45)}}
@media (max-width:1100px){ .trust-net{display:none} }
@media (prefers-reduced-motion: reduce){ .tn-line,.tn-node{animation:none} }
.trust ul{list-style:none; margin:0; padding:0; display:grid; gap:0;
  grid-template-columns:repeat(5,minmax(0,1fr))}
.trust li{margin:0; padding:12px 20px 0 0; border-top:0;
  display:flex; flex-direction:column; gap:8px}
.trust li + li{padding-left:20px}
.trust li strong{font-size:1rem; font-weight:680; letter-spacing:-.01em}
.trust li span{font-size:.86rem; line-height:1.5; color:rgba(255,255,255,.78)}
.trust-more{margin:26px 0 0; font-size:.95rem}
.trust-more a{color:#fff; text-decoration:underline; text-decoration-color:var(--green);
  text-underline-offset:4px}
@media (max-width:1100px){
  .trust ul{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px}
  .trust li,.trust li + li{padding:18px 0 22px}
}
@media (max-width:620px){ .trust ul{grid-template-columns:minmax(0,1fr)} }

/* footer links used to slide 16px right with a green dot on hover: a layout
   shift on every pass of the pointer. Removed in the LOOK pass. */

/* ---------------- triad: evidence, context, history ---------------- */
.tri{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px; padding-top:8px; padding-bottom:clamp(40px,6vw,72px)}
.tri-col{border-top:2px solid var(--ink); padding-top:18px}
.tri-n{display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em; color:var(--green-ink,#0B7A47)}
.tri-col .tri-h{display:block; margin:.35em 0 .25em; font-weight:700; font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-.02em}
.tri-col p{margin:0 0 18px; color:var(--ink-2); max-width:30ch}
.tri-col ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.tri-col li{margin:0; padding:6px 12px 6px 10px; border:1px solid var(--hair); background:var(--paper-2);
  font-size:.86rem; display:flex; align-items:center; gap:8px}
.tri-col li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green); flex:0 0 auto}
@media (max-width:820px){ .tri{grid-template-columns:minmax(0,1fr); gap:30px 0} }

/* the network replaces the columns on a wide screen; the columns stay as the
   phone layout and as the readable list */
.rnet{display:none; width:100%; height:auto; max-width:1240px; margin:0 auto; overflow:visible}
.rn-e,.rn-x{fill:none; vector-effect:non-scaling-stroke}
.rn-e{stroke:var(--ink-3); stroke-width:1.1; stroke-opacity:.55; stroke-dasharray:.03 .02;
  animation:tn-flow 6s linear infinite}
.rn-e1{stroke-opacity:.9; stroke-width:1.6; stroke-dasharray:none; animation:none}
.rn-x{stroke:var(--green); stroke-width:1; stroke-opacity:.4; stroke-dasharray:3 5; animation:rn-x 9s linear infinite}
@keyframes rn-x{to{stroke-dashoffset:-64}}
.rn-n{fill:var(--green); stroke:var(--green); stroke-width:2; vector-effect:non-scaling-stroke;
  animation:rn-p 3.6s ease-in-out infinite; animation-delay:calc(var(--d) * -.45s)}
@keyframes rn-p{50%{fill-opacity:.45}}
.rn-h{fill:var(--ink); stroke:var(--green); stroke-width:3; vector-effect:non-scaling-stroke}
.rn-c{fill:var(--green)}
.rn-t{fill:var(--ink); font-size:15px; font-weight:560}
.rn-ht{fill:var(--ink); font-size:20px; font-weight:700; letter-spacing:-.01em}
.rn-ct{fill:var(--ink); font-size:16px; font-weight:700}
.rn-t,.rn-ht,.rn-ct{paint-order:stroke; stroke:var(--paper); stroke-width:6px; stroke-linejoin:round}
@media (min-width:821px){
  .rnet{display:block}
  .tri{display:none}
}
@media (prefers-reduced-motion: reduce){ .rn-e,.rn-x,.rn-n{animation:none} }

.rn3{max-width:780px}
.rn3 .rn-t{font-size:22px} .rn3 .rn-ht{font-size:25px} .rn3 .rn-ct{font-size:21px}
/* evidence flowing in: items to their group, groups to the record */
.rn-pk{fill:var(--green); offset-rotate:0deg; opacity:0; animation:rn-go 3.2s linear infinite}
.rn-pk2{fill:var(--ink); animation-duration:3.2s}
@keyframes rn-go{0%{offset-distance:0%; opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{offset-distance:100%; opacity:0}}
.rn-ring{fill:none; stroke:var(--green); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center;
  animation:rn-ring 3.6s ease-out infinite}
.rn-ring2{animation-delay:-1.8s}
@keyframes rn-ring{0%{transform:scale(1); opacity:.7} 100%{transform:scale(2.6); opacity:0}}
@media (prefers-reduced-motion: reduce){ .rn-pk,.rn-ring{display:none} }

/* ==================================================================
   RHYTHM (docs/specs/2026-10-15-website-length.md, 1b decisions 2, 3, 5, 7)
   Last on purpose: the sheet above is a stack of corrections, and this block
   states the final scale in one place. Spacing is multiples of 8px.
     type    headline 40, section heading 28, body 17, caption 14
     space   section 64 (phone 40), heading-to-content 32 (phone 24)
     line    prose is held to 65ch, never wider
   Copy and markup are untouched; this only changes how much air there is.
   ================================================================== */
:root{ --unit:8px; --sec-pad:64px; --sec-gap:32px; --prose:65ch;
  --t-head:clamp(2rem,3.1vw,2.5rem); --t-sec:clamp(1.5rem,2.2vw,1.75rem);
  --t-body:17px; --t-cap:.875rem }
@media (max-width:760px){ :root{ --sec-pad:40px; --sec-gap:24px } }

body{font-size:var(--t-body); line-height:1.55}
h1,.hero h1,.phero h1{font-size:var(--t-head); line-height:1.1}
h2,.band h2{font-size:var(--t-sec); line-height:1.15}
h3{font-size:1.125rem}
.lede,.hero .lede{font-size:1.125rem; line-height:1.5}
.sec-head .lede{margin-top:calc(var(--unit) * .75)}
.card h3,.feat h3,.step h3{margin-bottom:calc(var(--unit) * .5)}

/* sections: one padding, one gap under the heading */
.sec,.band{padding-top:var(--sec-pad); padding-bottom:var(--sec-pad)}
.sec.tight{padding-top:calc(var(--unit) * 4); padding-bottom:calc(var(--unit) * 4)}
.sec-body{margin-top:var(--sec-gap)}
.sec-head:empty + .sec-body,
.sec > .wrap > .sec-body:first-child{margin-top:0}
.hero{padding-top:calc(var(--unit) * 5); padding-bottom:calc(var(--unit) * 6)}
.phero{padding-top:calc(var(--unit) * 4); padding-bottom:calc(var(--unit) * 4)}
.crumb{margin-bottom:calc(var(--unit) * 2)}
.hero .btn-row{margin-top:calc(var(--unit) * 3)}
.hero-rule{margin-top:calc(var(--unit) * 3)}
.tri{padding-bottom:calc(var(--unit) * 6)}
.scrolly-step{padding-top:calc(var(--unit) * 4); padding-bottom:calc(var(--unit) * 4)}

/* space is the divider: vertical rules between columns go and a real column
   gap replaces them (the layout audit measures gaps between boxes, so padding
   would not count) */
.grid:not(.grid-split){column-gap:calc(var(--unit) * 4)}
.card{padding:calc(var(--unit) * 3) 0 calc(var(--unit) * 2.5)}
.card + .card{border-left:0}
.feat{padding:calc(var(--unit) * 2.5) 0}
.feat + .feat{border-left:0; padding-left:0}
@media (max-width:680px){ .feat + .feat{border-top:0} }
.card p,.feat p,.step p{font-size:1rem}
.step{padding-top:calc(var(--unit) * 2.5); padding-bottom:calc(var(--unit) * 2.5)}
.ck{padding-top:calc(var(--unit) * 1.25); padding-bottom:calc(var(--unit) * 1.25); font-size:1rem}
.ck::before{top:calc(var(--unit) * 1.25)}
.faq summary{padding-top:calc(var(--unit) * 2); padding-bottom:calc(var(--unit) * 2); font-size:1.0625rem}
.faq-a{padding-bottom:calc(var(--unit) * 2.5); font-size:1rem}
.tbl{font-size:1rem}
.tbl th,.tbl td{padding-top:calc(var(--unit) * 1.5); padding-bottom:calc(var(--unit) * 1.5)}

/* reading column: prose never runs wider than 65 characters */
.prose p,.prose li,.sec-body > p,.sec-body > ul,.sec-body > ol,.clause p,.clause li{max-width:var(--prose)}
p{margin-bottom:calc(var(--unit) * 2)}
ul,ol{margin-bottom:calc(var(--unit) * 2)}
li{margin-bottom:calc(var(--unit) * .5)}

/* captions: one small size, readable */
.eyebrow,.sec-n,.crumb,.step-n,.hero-meta p,.wall-cap,.wall-lab,.card-cta,.tbl caption,
.tbl thead th,.tile-s{font-size:var(--t-cap)}

/* footer: the link columns were 44px-tall rows on every device; the 44px
   target is a touch rule, so a pointer device gets compact rows */
.ftr{padding-top:calc(var(--unit) * 6); padding-bottom:calc(var(--unit) * 4)}
.ftr-legal{margin-top:calc(var(--unit) * 4); padding-top:calc(var(--unit) * 3)}
@media (hover:hover) and (min-width:761px){ .ftr-col a{min-height:32px} }
.sec-head h2{max-width:26ch}

/* phone: two footer columns instead of one 2,400px ladder; 40px rows still
   clear the 24px minimum target size with room to spare */
@media (max-width:760px){
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(var(--unit) * 3) calc(var(--unit) * 2)}
  .ftr-col a{min-height:40px}
  .ftr-col ul{margin-top:0}
}

/* the remaining headings that carried their own large clamp() onto the scale:
   anything below the section heading is a sub-heading, 20-24px */
.scrolly-step h3,.tri-col .tri-h,.cl-body h2,.prose h2,.grid .prose h2,.sec-body .grid h2{
  font-size:clamp(1.25rem,1.7vw,1.4rem)}
.scrolly-step{padding-top:calc(var(--unit) * 3); padding-bottom:calc(var(--unit) * 3)}
.scrolly-stage{height:min(60vh,460px)}
.scrolly{gap:clamp(24px,4vw,56px)}
.prose h2{margin-top:calc(var(--unit) * 4)}
.wall-count{font-size:clamp(2.4rem,4vw,3.4rem)}
.stat-v{font-size:clamp(2.2rem,3.6vw,3rem)}
.btn{min-height:44px}
.btn-lg{min-height:52px; padding-top:12px; padding-bottom:12px}
.tri{gap:0 32px; padding-bottom:calc(var(--unit) * 4)}
@media (max-width:820px){ .tri{gap:calc(var(--unit) * 3) 0} }

/* product figures: a picture is never taller than the text beside it, so the
   illustrated tables and packs carry less padding per row */
.mock-bar{padding:10px 16px}
.mock-body{padding:calc(var(--unit) * 1.5) 16px}
.mock-kpis > div{padding:10px 14px}
.mock-tbl td{padding-top:8px; padding-bottom:8px}
.pk li{padding-top:8px; padding-bottom:8px}
.pk-row{padding-top:9px; padding-bottom:9px}
.mock-pack .pk-sum{padding-top:10px; padding-bottom:10px}
.pk-foot{margin-top:calc(var(--unit) * 1.5)}

/* link lists (official sources, related pages): rows are 8px-unit tight and
   carry the one caption size */
body{line-height:1.5}
.sources{margin-top:calc(var(--unit) * 4); padding-top:calc(var(--unit) * 2)}
.sources li{padding-top:calc(var(--unit) * 1.25); padding-bottom:calc(var(--unit) * 1.25)}
.related li{padding-top:calc(var(--unit) * 1.25); padding-bottom:calc(var(--unit) * 1.25)}
.src-pub,.src-what,.src-note,.related li > span,.sources h2,.related h2{font-size:var(--t-cap)}
.src-note{margin-top:calc(var(--unit) * 2)}

@media (min-width:1600px){ :root{ --t-body:18px } }

/* ==================================================================
   HOME REBUILD (slice 2): rows of three and five, and a hero that is no
   taller than ~560px. Only used by the home page today; written as
   components (steps-row, tiles, mock-compact) so the next page can reuse them.
   ================================================================== */
.steps-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:calc(var(--unit) * 4)}
.steps-row .step{display:block; grid-template-columns:none; border-top:2px solid var(--rule); border-bottom:0; padding:calc(var(--unit) * 2.5) 0 0}
.steps-row .step:last-child{border-bottom:0}
.steps-row .step-n{display:block; padding:0; margin-bottom:calc(var(--unit) * 1)}
.steps-row .step p{max-width:34ch}
@media (max-width:760px){
  .steps-row{grid-template-columns:minmax(0,1fr)}
  .steps-row .step{padding-top:calc(var(--unit) * 2); padding-bottom:calc(var(--unit) * 1)}
}

.tiles{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); column-gap:calc(var(--unit) * 3)}
.tile{display:block; padding:calc(var(--unit) * 2) 0; border-top:2px solid var(--rule); background-image:none}
.tile strong{display:block; font-size:1.0625rem; margin-bottom:calc(var(--unit) * .5)}
.tile span{display:block; color:var(--ink-2); font-size:1rem; line-height:1.4}
.tile:hover strong{text-decoration:underline}
.tiles-more{margin:calc(var(--unit) * 3) 0 0}
@media (max-width:960px){ .tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:calc(var(--unit) * 2)}
  .tile span{font-size:.9375rem}
}

/* the home hero: one button, the picture level with the text and never taller */
.hero-meta{margin-top:calc(var(--unit) * 2); padding-top:calc(var(--unit) * 2)}
.hero-meta p{margin-bottom:calc(var(--unit) * 1)}
.mock-compact .pk-note{display:none}
.mock-compact .pk li.pk-row{padding-top:calc(var(--unit) * 1); padding-bottom:calc(var(--unit) * 1)}
@media (min-width:921px){
  .hero{padding-top:calc(var(--unit) * 4); padding-bottom:calc(var(--unit) * 4)}
  .hero .btn-row{margin-top:calc(var(--unit) * 2.5)}
  .hero-rule{display:none}
}
@media (max-width:760px){
  /* on a phone the picture is a second screen of the same idea: keep the first
     screen for the promise and the button, and drop the footer line of the figure */
  .mock-compact .pk-foot{display:none}
}
.band{padding-top:calc(var(--unit) * 8); padding-bottom:calc(var(--unit) * 8)}
@media (max-width:760px){ .band{padding-top:calc(var(--unit) * 5); padding-bottom:calc(var(--unit) * 5)} }
.sec-body > ol.steps-row{max-width:none}
.sec-head > p:empty{display:none}
@media (max-width:760px){
  .mock-compact .pk li.pk-row{padding-top:calc(var(--unit) * .75); padding-bottom:calc(var(--unit) * .75)}
  .hero-meta{margin-top:calc(var(--unit) * 1)}
}

@media (max-width:760px){
  /* phone: the hero figure keeps its first row, its last held row and the gap,
     so the picture still says "five of six, one gap" without a 475px ladder */
  .mock-compact .pk-row:nth-child(2),.mock-compact .pk-row:nth-child(3),
  .mock-compact .pk-row:nth-child(4){display:none}
  .sec,.band{padding-top:calc(var(--unit) * 4); padding-bottom:calc(var(--unit) * 4)}
  .sec-body .feat{padding-top:calc(var(--unit) * 1.5); padding-bottom:calc(var(--unit) * 1.5)}
  .tile{padding:calc(var(--unit) * 1.5) 0}
  .hero{padding-bottom:calc(var(--unit) * 3)}
}
@media (max-width:760px){
  .steps-row .step-n{display:inline; margin:0 calc(var(--unit) * 1) 0 0}
  .steps-row .step > div{display:inline}
  .steps-row .step h3{display:inline}
  .steps-row .step p{margin-top:calc(var(--unit) * .5)}
}
@media (max-width:760px){
  .hero-copy > .eyebrow{display:none}
  .hero{padding-top:calc(var(--unit) * 3)}
}

/* ==================================================================
   SLICE 3: shared components for product, compliance and reference pages
   (rows of four, a contents list, one labelled disclosure, and related pages
   with official sources as one block). Used by every page, owned by none.
   ================================================================== */
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){ .grid-4{grid-template-columns:minmax(0,1fr)} }
.steps-row{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.steps-row[style*="--n:4"] .step p{max-width:none}
@media (max-width:960px){ .steps-row[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .steps-row,.steps-row[style*="--n:4"]{grid-template-columns:minmax(0,1fr)} }

.more{border-top:1px solid var(--hair); margin-top:calc(var(--unit) * 2)}
.more > summary{cursor:pointer; list-style:none; padding:calc(var(--unit) * 1.5) 0; font-weight:580; position:relative; padding-right:32px}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:"+"; position:absolute; right:4px; top:calc(var(--unit) * 1.25); font-weight:400; font-size:1.25rem; line-height:1.2}
.more[open] > summary::after{content:"‘2"}
.more > summary:hover{color:var(--green-ink)}
.more-body{padding-bottom:calc(var(--unit) * 2)}
.more-body > :last-child{margin-bottom:0}

.toc-sec{padding-top:calc(var(--unit) * 2); padding-bottom:0; border-top:0}
.toc h2{font-size:var(--t-cap); font-weight:640; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 calc(var(--unit) * 1)}
.toc ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:calc(var(--unit) * .5) calc(var(--unit) * 3)}
.toc li{margin:0}
.toc a{font-size:1rem}
@media (max-width:760px){ .toc ol{flex-direction:column; gap:0} .toc a{display:block; padding:calc(var(--unit) * .75) 0} }

.footlinks{display:grid; grid-template-columns:minmax(0,1fr); gap:calc(var(--unit) * 3) calc(var(--unit) * 6)}
.footlinks.fl-two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .footlinks.fl-two{grid-template-columns:minmax(0,1fr)} }
.footlinks h2{font-size:var(--t-cap); font-weight:640; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 calc(var(--unit) * 1)}
.footlinks ul{list-style:none; margin:0; padding:0}
.footlinks li{margin:0; padding:calc(var(--unit) * 1) 0; border-top:1px solid var(--hair); font-size:1rem}
.footlinks li > span{display:block; color:var(--ink-2); font-size:var(--t-cap)}
.footlinks .src-pub{font-weight:600; color:var(--ink)}
.footlinks .src-note{margin:calc(var(--unit) * 1) 0 0; color:var(--ink-3); font-size:var(--t-cap)}
@media (min-width:901px){ .footlinks:not(.fl-two) ul{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); column-gap:calc(var(--unit) * 4)} }
.sec .note{margin:0}
.footlinks.fl-two + .src-note,.sec-body > .src-note{margin-top:calc(var(--unit) * 2); color:var(--ink-3); font-size:var(--t-cap)}
/* tighter page furniture for every inner page: one-line closing heading, a
   section padding of six units, a lede as wide as the reading column */
:root{ --sec-pad:48px }
@media (max-width:760px){ :root{ --sec-pad:40px } }
.sec.tight{padding-top:calc(var(--unit) * 3); padding-bottom:calc(var(--unit) * 3)}
.band{padding-top:calc(var(--unit) * 6); padding-bottom:calc(var(--unit) * 6)}
.band h2{max-width:none}
.band .lede{max-width:var(--prose)}
.phero .lede{max-width:var(--prose)}
@media (max-width:760px){ .band{padding-top:calc(var(--unit) * 4); padding-bottom:calc(var(--unit) * 4)} }
/* footer: the two legal statements side by side on a wide screen, and the
   legal links as a compact row (a pointer needs no 44px target) */
@media (min-width:901px){
  .ftr-legal{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:calc(var(--unit) * 6)}
  .ftr-co,.ftr-note{margin:0; max-width:none}
  .ftr-min,.ftr-cp{grid-column:1 / -1}
  .ftr-min{margin:calc(var(--unit) * 2) 0 calc(var(--unit) * 1)}
}
@media (hover:hover) and (min-width:761px){ .ftr-min a{min-height:32px} }
@media (max-width:760px){ .toc ol{flex-direction:row; flex-wrap:wrap; gap:0 calc(var(--unit) * 2)} .toc a{display:inline; padding:0; font-size:.9375rem} .toc li{margin:0 0 calc(var(--unit) * .5)} }
/* phone: the notice is one line (the tag and the link; the sentence is on the page it links to), and the footer links run as wrapped rows
   instead of two tall columns */
@media (max-width:760px){
  .ann-in{flex-wrap:nowrap; gap:calc(var(--unit) * 1.5); padding:0 48px 0 0; min-height:44px}
  .ann p{display:none}
  .ann-cta{min-height:44px; font-size:.9375rem}
  .ann-x{top:0}
  .ftr-grid{grid-template-columns:minmax(0,1fr); gap:calc(var(--unit) * 2) 0}
  .ftr-col ul{display:flex; flex-wrap:wrap; gap:0 calc(var(--unit) * 2)}
  .ftr-col a{min-height:36px; padding-left:0 !important}
  .ftr-col a::before{display:none}
  .ftr-col h3{padding-bottom:calc(var(--unit) * 1); margin-bottom:0}
}
.sub-h{margin:calc(var(--unit) * 4) 0 calc(var(--unit) * 1)}
.sub-h + .faqs{margin-bottom:calc(var(--unit) * 3)}
/* ==================================================================
   SLICE 5: reference pages. Long text runs in two columns on a wide
   screen (reading order is unchanged: down the first column, then the
   second); related pages and official sources everywhere become rows
   instead of tall lists.
   ================================================================== */
@media (min-width:1100px){
  .clauses{columns:2; column-gap:calc(var(--unit) * 8)}
  .clause{display:block; break-inside:avoid; padding:calc(var(--unit) * 2.5) 0}
  .clause .cl-n{margin-bottom:calc(var(--unit) * .5)}
  .clause .cl-body{max-width:none}
  .prose-2{columns:2; column-gap:calc(var(--unit) * 8); max-width:none}
  .prose-2 h2{margin-top:calc(var(--unit) * 3); break-after:avoid}
  .prose-2 h2:first-child{margin-top:0}
  .prose-2 p,.prose-2 li{max-width:none}
  .prose-2 ul{break-inside:avoid}
}
@media (min-width:901px){
  .related ul{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); column-gap:calc(var(--unit) * 4)}
  .related li{display:block}
  .related li > span{display:block}
  .sources ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:calc(var(--unit) * 6)}
}
.price-trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(var(--unit) * 4)}
.price-trio > *{min-width:0}
@media (max-width:960px){ .price-trio{grid-template-columns:minmax(0,1fr)} }
.price-trio.price-duo{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:960px){ .price-trio.price-duo{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){ .phero .eyebrow{display:none} }
@media (max-width:760px){ .ftr-min a{min-height:36px} .ftr-min{margin:calc(var(--unit) * 1) 0} .ftr-legal{margin-top:calc(var(--unit) * 2); padding-top:calc(var(--unit) * 2)} .ftr{padding-top:calc(var(--unit) * 4)} }
@media (max-width:760px){
  .clause{padding:calc(var(--unit) * 2) 0}
  .cl-n{margin-bottom:calc(var(--unit) * .25)}
  .cl-body h2{margin-bottom:calc(var(--unit) * 1)}
  .cl-body p,.cl-body li{font-size:1rem; line-height:1.45}
}
.price-trio caption{white-space:normal; text-align:left; padding-bottom:calc(var(--unit) * 1)}

/* ==================================================================
   SLICE 6: the remaining pages. A note that follows a row or a list gets
   the same gap as everything else; related pages and official sources sit
   side by side with the sources in two columns, so five links are three
   rows, not five.
   ================================================================== */
.sec-body > .after{margin-top:calc(var(--unit) * 3)}
.sec-body > .after > .more:first-child{margin-top:0}
@media (min-width:901px){
  .footlinks.fl-rel{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .footlinks.fl-rel .fl-src ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:calc(var(--unit) * 4)}
}
.feat h4,.more-body h4{font-size:var(--t-cap); font-weight:640; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:calc(var(--unit) * 2) 0 calc(var(--unit) * .5)}
.more-body .cklist .ck{font-size:.9375rem; padding-top:calc(var(--unit) * .75); padding-bottom:calc(var(--unit) * .75)}
.more-body .cklist .ck::before{top:calc(var(--unit) * .75)}

/* Questions folded into one closed line (faq_fold): one line of height, not a screen of answers. */
.sec-body > .after.after-q{margin-top:calc(var(--unit) * 2)}
.after-q > .more{margin-top:0}
.after-q .more-body{padding-bottom:0}
.after-q .faqs{margin-bottom:0}

/* ==================================================================
   LOOK (2026-10-15): one visual system, stated last so it is the final word.
   The account holder: "looks cramped and plain", "inner pages cluttered",
   "weird hover states". Length stays short; the room comes from hierarchy
   and from removing noise, not from more copy.

   type     h1 52/44 (home/inner), h2 34, h3 19, body 17 (18 from 1600px),
            lede 19, caption 14. Weights 680 / 650 / 600 / 400.
   space    8px unit. Section 64-96px (phone 48). Heading block to content
            40px. Inside an idea 8-16px.
   surface  white and a warm off-white (--paper-2) alternate per section,
            decided by the build (components.alternate_surfaces). Cards are
            white, 1px hairline, 12px radius, equal height in their row.
   colour   ink is the action (filled buttons); green is emphasis (kickers,
            numbers, ticks, the focus ring). Nothing else is coloured.
   hover    one rule, 150ms ease: links change colour and underline
            thickness; buttons darken and lift 1px; linked cards change
            border colour. No scaling, sliding, spotlights or layout shift.
            Nothing essential is hover-only. Reduced motion removes the lift.
   focus    3px green-ink ring, 2px offset (white-on-dark: bright green).
   ================================================================== */
:root{
  --paper-2:#F7F7F3; --hair:#E3E3DD; --hair-2:#C9CBC5; --line-2:var(--hair);
  --radius:12px; --radius-s:8px;
  --ease:cubic-bezier(.2,0,0,1); --t:150ms;
  --sec-pad:clamp(64px,6.25vw,96px); --sec-gap:40px;
  --t-h1:clamp(2.4rem,3.7vw,3.25rem); --t-h1-in:clamp(2.05rem,3.1vw,2.75rem);
  --t-h2:clamp(1.65rem,2.3vw,2.125rem); --t-lede:1.1875rem; --t-cap:.875rem;
  --shadow-card:0 1px 2px rgba(10,10,10,.04);
  --shadow-pop:0 2px 6px rgba(10,10,10,.05),0 16px 40px -12px rgba(10,10,10,.18);
}
@media (max-width:760px){ :root{ --sec-pad:44px; --sec-gap:24px; --t-lede:1.0625rem } }

body{font-size:17px; line-height:1.6}
@media (min-width:1600px){ body{font-size:18px} }
h1,h2,h3{color:var(--ink)}
h1,.hero h1{font-size:var(--t-h1); font-weight:680; letter-spacing:-.035em; line-height:1.08}
.phero h1{font-size:var(--t-h1-in); font-weight:680; letter-spacing:-.03em; line-height:1.1}
h2,.band h2{font-size:var(--t-h2); font-weight:650; letter-spacing:-.025em; line-height:1.15}
h3{font-size:1.1875rem; font-weight:600; letter-spacing:-.012em; line-height:1.3}
.lede,.hero .lede,.phero .lede,.sec-head .lede{font-size:var(--t-lede); line-height:1.55;
  color:var(--ink-2); letter-spacing:-.008em; max-width:60ch}
.ser{font-weight:400}

/* ---- kickers: a quiet green label above a heading, never a decoration */
.eyebrow{display:block; margin:0 0 12px; font-size:.8125rem; font-weight:650;
  letter-spacing:.09em; text-transform:uppercase; color:var(--green-ink); padding:0}
.eyebrow::before{display:none}
/* Section numbers sat in a margin column of their own. Without that column a
   lone "02" above a heading is noise (and doubled up with numbered steps
   inside the section), so it is not shown; legal clauses keep theirs. */
.sec-n{display:none}

/* ---- links: in text, always underlined; hover is colour and thickness */
a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em;
  text-decoration-color:rgba(10,10,10,.32);
  transition:color var(--t) var(--ease), text-decoration-color var(--t) var(--ease)}
a:hover{color:var(--green-ink); text-decoration-color:currentColor; text-decoration-thickness:2px}
.btn,.nav a,.menu a,.mnav a,.logo,.card,.tiles > .tile,.ftr a,.crumb a,.skip,.cl-link,
.toc a,.footlinks a,.related a,.sources li > a,.ann-cta,.tri-col a,.wall a{text-decoration:none}

/* ---- focus you cannot miss, on every surface */
:focus-visible{outline:3px solid var(--green-ink); outline-offset:2px}
.band :focus-visible,.cc :focus-visible,.sticky-cta :focus-visible,.sec.solid :focus-visible,
.trust :focus-visible{outline-color:var(--green)}
.fld input:focus,.fld textarea:focus{outline:3px solid var(--green-ink); outline-offset:1px}

/* ---- the notice: one calm line under nothing, above the header */
.ann{background:var(--green-wash); color:var(--ink); font-size:.875rem;
  border-bottom:1px solid rgba(4,108,62,.14)}
.ann-in{min-height:44px; padding-top:0; padding-bottom:0; gap:14px; flex-wrap:nowrap}
.ann-tag{background:var(--green-ink); color:#fff; border-radius:4px; font-size:.6875rem;
  padding:3px 7px; letter-spacing:.1em}
.ann p{display:none; color:var(--ink-2); min-width:0; line-height:1.4}
.ann-text{color:var(--ink-2); text-decoration-color:rgba(10,10,10,.25)}
.ann-text::after{content:" \2192"; color:var(--green-ink)}
.ann-text:hover{color:var(--green-ink)}
@media (min-width:1101px){
  .ann p{display:block}
  .ann-in > .ann-cta{display:none}
}
.ann-cta{color:var(--green-ink); font-weight:600; background-image:none;
  text-decoration:underline; text-decoration-color:rgba(4,108,62,.4); text-underline-offset:.22em}
.ann-cta:hover{color:var(--ink); text-decoration-color:currentColor; text-decoration-thickness:2px}
.ann-x{color:var(--ink-3)}
.ann-x:hover{color:var(--ink)}

/* ---- header: no ink bar, no shrinking type; a hairline and a soft shadow
   once the page scrolls under it */
.hdr::before{display:none}
.hdr{border-bottom:1px solid var(--hair)}
.hdr-in{min-height:68px}
.hdr.scrolled .hdr-in{min-height:60px}
.hdr.scrolled{border-bottom-color:var(--hair); box-shadow:0 6px 20px -12px rgba(10,10,10,.18)}
.hdr.scrolled .logo,.logo{font-size:1.125rem}
.nav > ul{gap:2px}
.nav a,.nav-b{font-size:.9375rem; font-weight:520; color:var(--ink-2); padding:8px 12px;
  min-height:40px; border-radius:var(--radius-s);
  transition:color var(--t) var(--ease), background-color var(--t) var(--ease)}
.nav a::after,.nav-b::after{display:none}
.nav a:hover,.nav-b:hover,.has-menu.open .nav-b{color:var(--ink); background:var(--paper-2)}
.nav a[aria-current="page"],.nav-b[aria-current="true"]{color:var(--ink); font-weight:600;
  box-shadow:inset 0 -2px 0 var(--green)}
.chev{transition:transform var(--t) var(--ease)}

/* dropdowns: a soft panel, an 8px bridge so the pointer never falls through
   the gap, a hover tint per row and nothing that moves */
.menu{top:calc(100% + 8px); padding:8px; border:1px solid var(--hair);
  border-radius:14px; box-shadow:var(--shadow-pop); transform:translateY(-4px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t)}
.has-menu.open .menu{transform:none}
.menu::after{content:""; position:absolute; left:0; right:0; top:-10px; height:10px}
.menu::before{padding:6px 12px 8px; border-bottom:0; font-size:.75rem; letter-spacing:.09em;
  color:var(--ink-3)}
.menu li,.menu li + li,.menu-2 li,.menu-2 li:nth-child(odd){border:0}
.menu-2 ul{gap:2px 8px}
.menu a{display:block; padding:10px 12px; border-radius:var(--radius-s);
  transition:background-color var(--t) var(--ease)}
.menu a::before{display:none}
.menu a:hover{background:var(--paper-2)}
.menu a:hover .mi-t{color:var(--green-ink)}
.mi-t{font-size:.9375rem; font-weight:600; transition:color var(--t) var(--ease)}
.mi-d{font-size:.8125rem; color:var(--ink-3); margin-top:2px}

/* ---- buttons: ink is the action. Darken and lift one pixel; that is all. */
.btn{border-radius:10px; min-height:44px; padding:10px 20px; font-size:.9375rem;
  font-weight:600; border-width:1.5px; overflow:visible;
  transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease),
             color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.btn::before{display:none}
.btn:hover{background:#2B2F33; border-color:#2B2F33; color:#fff; transform:translateY(-1px);
  box-shadow:0 6px 14px -6px rgba(10,10,10,.35)}
.btn:active{transform:none; box-shadow:none}
.btn-lg{min-height:52px; padding:13px 26px; font-size:1rem}
.btn-ghost,.mnav .btn-ghost{background:transparent; color:var(--ink); border-color:var(--hair-2)}
.btn-ghost:hover,.mnav .btn-ghost:hover{background:var(--paper-2); color:var(--ink);
  border-color:var(--ink); box-shadow:none}
.band .btn,.cc .btn{background:#fff; color:var(--ink); border-color:#fff}
.band .btn:hover,.cc .btn:hover{background:#E9EAE4; border-color:#E9EAE4; color:var(--ink)}
.band .btn-ghost,.cc .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.band .btn-ghost:hover,.cc .btn-ghost:hover{background:rgba(255,255,255,.08); color:#fff; border-color:#fff}
.sticky-cta .btn:hover{background:#0FA460; border-color:#0FA460; color:var(--ink)}
.btn[disabled]:hover{transform:none; box-shadow:none; background:var(--ink); border-color:var(--ink)}
@media (min-width:1101px){ .hdr-cta{display:flex; gap:8px} }
.hdr-cta .btn{min-height:40px; padding:8px 16px; font-size:.9rem}
.btn-row{margin-top:32px; gap:12px}
@media (prefers-reduced-motion: reduce){ .btn:hover{transform:none} }

/* ---- one column edge for the whole site. The 5.5rem margin column existed
   for clause numbers; on every other section it pushed text 116px in from the
   logo and left a blank gutter. Numbers are now kickers above the heading. */
.sec > .wrap,.phero > .wrap,.band > .wrap{display:block}
.sec-head{display:block; margin:0}
.sec-head > div{max-width:none}
.sec-head h2{max-width:28ch; margin:0}
.sec-head .lede{margin:12px 0 0}
.sec-body{margin-top:var(--sec-gap)}
.sec-head:empty + .sec-body,.sec > .wrap > .sec-body:first-child{margin-top:0}
.hero > .wrap.hero-in{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:0 clamp(40px,5vw,80px); align-items:center}
.hero-copy{grid-column:1; padding-right:0}
.hero-aside{grid-column:2; padding-top:0}
@media (max-width:920px){
  .hero > .wrap.hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-copy,.hero-aside{grid-column:1}
  .hero-aside{margin-top:40px}
}

/* ---- sections: space is the divider, surfaces alternate */
.sec{border-top:0; padding-top:var(--sec-pad); padding-bottom:var(--sec-pad)}
.sec.tone{background:var(--paper-2)}
/* a tight block (a note, the related links, the contents list) belongs to the
   section above it: that section gives back most of its bottom padding */
.sec:has(+ .sec.tight){padding-bottom:40px}
.sec.tight{padding-top:0; padding-bottom:var(--sec-pad); border-top:0}
.sec.tight:has(+ .sec.tight){padding-bottom:32px}
.sec.tight:last-child,.sec.tight:has(+ .band){padding-bottom:var(--sec-pad)}

/* ---- page heads: inner pages open on a tinted band, so the first screen
   reads as "this page is about X" before any content starts */
.phero{background:var(--paper-2); padding-top:clamp(40px,4.5vw,64px);
  padding-bottom:clamp(40px,4.5vw,64px); border-bottom:0}
.phero:has(+ .toc-sec){padding-bottom:28px}
.phero h1{margin:0 0 .35em; max-width:24ch}
.phero .lede{margin-top:0}
.phero .btn-row{margin-top:28px}
.crumb{text-transform:none; letter-spacing:0; font-size:.875rem; font-weight:500;
  color:var(--ink-3); margin:0 0 20px; gap:8px}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--ink); text-decoration:underline}
.toc-sec{padding-top:0; padding-bottom:40px}
.hero{padding-top:clamp(48px,5vw,80px); padding-bottom:clamp(56px,6vw,96px)}
.hero h1{margin:0 0 .4em}
.hero .btn-row{margin-top:32px}
.hero-meta{margin-top:32px; padding-top:20px; border-top:1px solid var(--hair); gap:8px 32px}
.hero-meta p{font-size:.875rem; color:var(--ink-3); line-height:1.5; margin:0}

/* ---- cards: one style, equal height in a row */
.grid:not(.grid-split),.grid-4{gap:24px}
.feat,.card,.tiles > .tile,.steps-row .step,.price-trio > *{background:var(--paper);
  border:1px solid var(--hair); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:24px; height:100%; overflow:visible; position:relative}
.feat + .feat,.card + .card{border-left:1px solid var(--hair); padding-left:24px}
@media (max-width:960px) and (min-width:681px){
  .card,.card:nth-child(3n+1),.card:nth-child(2n+1){border-left:1px solid var(--hair)}
}
@media (max-width:680px){
  .card,.card + .card,.feat + .feat{border:1px solid var(--hair)}
}
.feat h3,.card h3,.steps-row .step h3{margin:0 0 8px}
.feat p,.card p,.steps-row .step p{font-size:1rem; line-height:1.55; color:var(--ink-2);
  margin:0; max-width:none}
.card{display:flex; flex-direction:column}
.card p{margin-bottom:16px}
.card-cta{margin-top:auto; color:var(--green-ink); font-size:.875rem; font-weight:600}
.card::after{display:none}
.card-cta::after{transition:none}
.sec.solid .feat{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); box-shadow:none}
.sec.solid .feat p{color:rgba(255,255,255,.76)}
/* a linked card: the border is the hover, the arrow is always visible */
a.card,.tiles > .tile{transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease)}
a.card:hover,.tiles > .tile:hover{border-color:#9EA39D; box-shadow:0 6px 18px -10px rgba(10,10,10,.18);
  color:var(--ink)}

/* the industries row: five linked cards, each with a visible way in */
.tiles{gap:16px}
.tiles > .tile{display:flex; flex-direction:column; padding:20px; border-top:1px solid var(--hair);
  color:var(--ink)}
.tiles > .tile strong{font-size:1.0625rem; font-weight:600; margin-bottom:4px; text-decoration:none}
.tiles > .tile span{color:var(--ink-2); font-size:.9375rem; line-height:1.5; flex:1}
.tiles > .tile::after{content:"\2192"; margin-top:12px; color:var(--green-ink); font-weight:600}
.tiles > .tile:hover strong{text-decoration:none; color:var(--green-ink)}
.tiles-more{margin-top:24px; color:var(--ink-2)}
@media (max-width:760px){ .tiles{gap:12px} .tiles > .tile{padding:16px} }

/* steps: numbered badges, not hairline rows */
.steps-row{gap:24px}
.steps-row .step{border-top:1px solid var(--hair); padding:24px}
.step-n,.steps-row .step-n{display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; background:var(--green-wash); color:var(--green-ink);
  font-size:.8125rem; font-weight:700; letter-spacing:0; padding:0; margin:0 0 16px}
.steps:not(.steps-row) .step{grid-template-columns:48px minmax(0,1fr); gap:0 16px;
  border-top:1px solid var(--hair); padding:20px 0}
.steps:not(.steps-row) .step-n{margin:0}
@media (max-width:760px){
  .steps-row .step{padding:20px}
  .steps-row .step-n{display:inline-flex; margin:0 0 12px}
  .steps-row .step > div,.steps-row .step h3{display:block}
}

/* ---- product figures: a real screen, sized beside its text */
.mock{border:1px solid var(--hair); border-radius:14px; background:var(--paper);
  box-shadow:var(--shadow-pop); overflow:hidden}
.mock-bar{background:var(--paper-2); border-bottom:1px solid var(--hair)}
.mock-pack .pk-sum{background:var(--paper)}
.mock-pack .pk-foot,.pk-foot{border-top:1px solid var(--hair)}
.mock-kpis{border-radius:var(--radius-s)}
.hero-aside .eyebrow{color:var(--ink-3)}

/* ---- notes: a quiet aside, not a grey slab */
.note{background:var(--paper); border:1px solid var(--hair);
  border-radius:var(--radius); padding:16px 20px; max-width:var(--prose)}
.sec:not(.tone) .note{background:var(--paper-2)}
.note p{font-size:.9375rem; color:var(--ink-2); line-height:1.55}
.note-warn,.sec:not(.tone) .note-warn{background:var(--warn-wash); border-color:rgba(180,83,9,.22);
}
.note-risk,.sec:not(.tone) .note-risk{background:var(--risk-wash); border-color:rgba(180,35,24,.22);
}

/* ---- disclosures: questions and secondary detail as one tidy row each */
.more{border:1px solid var(--hair); border-radius:var(--radius); background:var(--paper);
  margin-top:16px}
.more + .more,.after > .more + .more{margin-top:12px}
.more > summary{padding:14px 52px 14px 20px; font-weight:600; font-size:1rem; border-radius:var(--radius);
  transition:color var(--t) var(--ease)}
.more > summary::after,.more[open] > summary::after,.faq summary::after{content:""; position:absolute;
  right:22px; top:50%; width:8px; height:8px; margin-top:-6px; background:none;
  border-right:1.75px solid currentColor; border-bottom:1.75px solid currentColor;
  transform:rotate(45deg); transition:transform var(--t) var(--ease)}
.more[open] > summary::after,.faq[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.more > summary:hover,.faq summary:hover{color:var(--green-ink)}
.more-body{padding:0 20px 16px}
.more .faqs{border-top:1px solid var(--hair)}
.faqs{border-top:1px solid var(--hair); max-width:var(--prose)}
.faq summary{padding:16px 44px 16px 0; font-size:1.0625rem; font-weight:600;
  transition:color var(--t) var(--ease)}
.faq summary::before{display:none}
.faq summary::after{right:8px}
.faq-a{color:var(--ink-2); font-size:1rem; padding:0 0 20px}
.more .faq:last-child{border-bottom:0}

/* ---- contents list: chips, secondary navigation that stays quiet */
.toc h2,.footlinks h2,.related h2,.sources h2{font-size:.8125rem; font-weight:650;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px}
.toc ol{gap:8px}
.toc a,.toc a:hover{display:inline-flex; align-items:center; min-height:34px; padding:4px 14px;
  border:1px solid var(--hair-2); border-radius:999px; background:var(--paper); font-size:.875rem;
  font-weight:520; color:var(--ink-2); transition:border-color var(--t) var(--ease), color var(--t) var(--ease)}
.toc a:hover{border-color:var(--ink); color:var(--ink)}
@media (max-width:760px){
  .toc ol{gap:8px}
  .toc li{margin:0}
  .toc a,.toc a:hover{display:inline-flex; padding:4px 12px; font-size:.875rem}
}

/* ---- related pages and official sources: an index at the foot of the page */
.footlinks,.related{border-top:1px solid var(--hair); padding-top:32px}
.footlinks{gap:24px 64px}
.footlinks li,.related li{border-top:0; padding:8px 0}
.footlinks li > a,.related li > a,.sources li > a{font-weight:600; color:var(--ink); font-size:1rem}
.footlinks li > a:hover,.related li > a:hover,.sources li > a:hover{color:var(--green-ink);
  text-decoration:underline; text-decoration-thickness:2px}
.footlinks .fl-col:not(.fl-src) li > a::after{content:" \2192"; color:var(--green-ink)}
.footlinks li > span,.related li > span{font-size:.875rem; color:var(--ink-3); line-height:1.45;
  margin-top:2px}
.footlinks .src-pub{font-size:.75rem; letter-spacing:.06em; color:var(--ink-2); font-weight:650}
.footlinks .src-note,.src-note{font-size:.8125rem; color:var(--ink-3); margin-top:12px}
.sources{border-top:1px solid var(--hair); padding-top:24px}

/* ---- tables and stats: hairlines, not ink rules */
.tbl thead th{border-bottom:1px solid var(--hair-2); color:var(--ink-3); font-size:.8125rem}
.tbl th,.tbl td{border-bottom-color:var(--hair)}
.stats{border-top:1px solid var(--hair)}
.price-trio .tbl{min-width:0}
.price-trio .tbl-wrap{overflow:visible}
.clauses{border-top:0}
.clause{border-bottom:1px solid var(--hair)}
.cl-n{color:var(--green-ink)}

/* ---- the closing band */
.band{padding-top:var(--sec-pad); padding-bottom:var(--sec-pad)}
.band h2{max-width:24ch}
.band .lede{color:rgba(255,255,255,.74); margin-top:12px}

/* ---- forms: softer fields, the same focus ring */
.fld input,.fld textarea{border:1.5px solid #7B8085; border-radius:var(--radius-s);
  transition:border-color var(--t) var(--ease)}
.fld input:hover:not([disabled]),.fld textarea:hover:not([disabled]){border-color:var(--ink)}
.form-aside{border-left:1px solid var(--hair)}

/* ---- footer: a tidy index on the off-white, no heavy ink rule */
.ftr{background:var(--paper-2); border-top:1px solid var(--hair); padding-top:64px; padding-bottom:40px}
.ftr-grid{gap:32px; grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .ftr-grid{grid-template-columns:minmax(0,1fr)} }
.ftr-col li + li{margin-top:2px}
.ftr-col h3{font-size:.8125rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); border-bottom:0; padding-bottom:0; margin:0 0 8px}
.ftr-col a,.ftr-min a{color:var(--ink-2); font-size:.9375rem; line-height:1.35;
  transition:color var(--t) var(--ease)}
.ftr-col a:hover,.ftr-min a:hover,.ftr-cp a:hover{color:var(--ink); text-decoration:underline;
  text-decoration-thickness:1px; text-decoration-color:currentColor}
@media (hover:hover) and (min-width:761px){ .ftr-col a{min-height:34px} }
.ftr-legal{border-top:1px solid var(--hair); margin-top:48px; padding-top:28px}
.ftr-co,.ftr-note,.ftr-cp{font-size:.8125rem; color:var(--ink-3)}
@media (max-width:760px){ .ftr{padding-top:40px} .ftr-legal{margin-top:24px} }

/* the mobile drawer follows the same rules */
.mgroup summary::after,.mgroup summary::before{transition:transform var(--t) var(--ease)}
.mnav .btn{border-radius:10px}
/* phone: the same cards, tighter, so a phone is not a ladder of boxes */
@media (max-width:760px){
  .grid:not(.grid-split),.grid-4,.steps-row,.tiles{gap:12px}
  .feat,.card,.tiles > .tile,.steps-row .step,.price-trio > *{padding:16px 18px}
  .feat + .feat,.card + .card{padding-left:18px}
  .steps-row .step-n{width:28px; height:28px; margin-bottom:10px}
  .tiles > .tile::after{margin-top:8px}
  .hero{padding-top:28px; padding-bottom:44px}
  .hero-aside{margin-top:32px}
  .hero-meta{margin-top:20px; padding-top:14px}
  .phero{padding-top:28px; padding-bottom:32px}
  .crumb{margin-bottom:12px}
  .sec:has(+ .sec.tight){padding-bottom:28px}
}
@media (max-width:760px){
  h1,.hero h1{font-size:2.125rem; letter-spacing:-.03em}
  .phero h1{font-size:1.875rem}
}
.band h2{max-width:34ch}
.price-trio .tbl td:first-child{width:auto}
.price-trio .tbl td,.price-trio .tbl th{padding-right:12px}
.band + .sec.tight{padding-top:48px}
/* length: the room above stays, the furniture gives some back */
:root{ --sec-pad:clamp(60px,5.8vw,92px); --sec-gap:36px }
@media (max-width:760px){ :root{ --sec-pad:40px; --sec-gap:24px } }
.ftr{padding-top:56px; padding-bottom:32px}
@media (hover:hover) and (min-width:761px){ .ftr-col a{min-height:30px} }
.ftr-legal{margin-top:36px; padding-top:24px}
.phero{padding-top:clamp(36px,4vw,56px); padding-bottom:clamp(36px,4vw,56px)}
@media (max-width:760px){ .ftr{padding-top:36px} .ftr-col a{min-height:34px} }
@media (max-width:760px){
  .ftr-grid{gap:16px}
  .ftr-col h3{margin-bottom:2px}
  .ftr-col a{min-height:32px; font-size:.9rem}
  .ftr-legal{margin-top:20px; padding-top:16px}
  .ftr-co,.ftr-note{margin-bottom:8px}
}
@media (min-width:1101px){ .sec{padding-top:clamp(60px,5.6vw,92px); padding-bottom:clamp(60px,5.6vw,92px)} }

/* The fixed conversion bar sits over the last footer row at the bottom of the
   page. app.js publishes the bar's real height (it differs by breakpoint and
   wraps on phones) only while the bar is showing, so a page without it, or
   with it dismissed, gets no gap. */
body{padding-bottom:var(--cta-h,0px)}
@media print{ body{padding-bottom:0 !important} }
/* A phone user taps these; the density passes above sized them for a mouse. */
@media (pointer:coarse){ .ftr-min a{min-height:44px} }