:root{
  --paper:#F6F7F4; --surface:#FFFFFF; /* also the text colour on teal and on ink */ --ink:#16211F; --ink-2:#3B4744; --muted:#66716E;
  --line:#D9DDD9; --line-strong:#B9C0BC; --line-hover:#9AA39F;
  --teal:#0E5E58; --teal-ink:#0A4743; --teal-soft:#E3EFED; --teal-press:#D3E4E1;
  --marker:#FFE45C; --marker-ink:#6B5A00; --marker-hover:#FFEE8C; --marker-press:#F3D94B;
  --alert:#A9381F; --alert-soft:#F8E6E1;
  /* caution: the yellow mid band of the scorecard dial. 3.1:1 on white (the marker itself is 1.2:1), still yellow, not orange */
  --caution:#B08F00;
  /* tints on white: table head, disabled field, pill, and the demo's foot */
  --paper-2:#F0F2EF; --surface-2:#FAFBF9;
  /* text on the two ink panels (.capture, .gate): 14.5:1, 10.5:1, 6.6:1 on ink; the rule between list rows; the two status colours (10.7:1, 9.7:1) */
  --on-ink:#EEF1EE; --on-ink-2:#C8D0CC; --on-ink-muted:#9AA6A1; --on-ink-line:#33403C; --on-ink-ok:#8EE0C8; --on-ink-err:#FFB4A2;
  --max:1120px; --measure:62ch;
  --radius:6px;
  /* motion: one ease-out curve, three durations. dur-1 colour/border/press, dur-2 small enter (fade, slide), dur-3 layout open (fold, bar, sweep) */
  --ease:cubic-bezier(.2,.7,.2,1); --dur-1:.14s; --dur-2:.2s; --dur-3:.3s;
  /* spacing scale (8px base) */
  --s-2:16px; --s-3:24px; --s-4:32px; --s-6:48px; --s-8:64px;
  /* small type scale under the 17px body: 15px / 14px / 13px (rem is 16px) */
  --t-sm:.9375rem; --t-xs:.875rem; --t-2xs:.8125rem;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
/* 56px cap: in the 548px hero column the headline sets in four lines (64px ran to five and outweighed the demo) */
h1{font-size:clamp(2.4rem,5.2vw,3.5rem);text-wrap:balance}
h2{font-size:clamp(1.9rem,3.4vw,2.6rem);text-wrap:pretty}
h3{font-size:1.35rem;line-height:1.2;text-wrap:pretty}
/* the lead paragraphs and the play titles set like headings: no single word on the last line ("...what I work / on." at 390px, "...your staff this / week." at 768px) */
.lede,.kicker,.plays b{text-wrap:pretty}
p{margin:0 0 1em;max-width:var(--measure)}
a{color:var(--teal-ink);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-1) var(--ease)}
/* hover rules sit behind (hover:hover): a finger tap on a phone must not leave a stuck hover. :active carries the touch feedback. */
@media (hover:hover){a:hover{color:var(--teal);text-decoration-thickness:2px}}
a:active{color:var(--ink)}
/* two-tone focus ring: the marker alone is 1.2:1 against the paper, so a 2px ink ring sits inside it (ink vs paper 15:1, marker vs ink 13:1) */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,.tblscroll:focus-visible{outline:3px solid var(--marker);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
/* a focused field scrolls in below the sticky bar (64px desktop, 56px phone) with its label (about 30px above it) still visible */
input,button{scroll-margin-top:112px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--surface);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.fine{color:var(--muted);font-size:var(--t-xs)}
/* anchor targets land below the 64px sticky bar, with the section's top rule still visible */
section[id]{scroll-margin-top:72px}
/* a link whose URL is still a placeholder says so, instead of a dead click */
.notlive{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:6px}
.capture .notlive{color:var(--on-ink-2)}
/* the footer note is a full sentence on its own line under the links: inline after "Email" it floated 20 to 30px away from its link and, at 390px, dropped to a line of its own that read as a stray parenthesis */
footer .notlive{flex:0 0 100%;margin:0}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:20;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
/* once the page has scrolled the bar floats over content: a firmer rule and a short, soft shadow (this and the demo card's shadow are ink at alpha) */
.top.scrolled{border-color:var(--line-strong);box-shadow:0 6px 16px -12px rgba(22,33,31,.28)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{font-family:var(--serif);font-size:1.2rem;color:var(--ink);text-decoration:none;font-weight:500}
@media (hover:hover){.brand:hover{color:var(--teal-ink);text-decoration:none}}
.brand span{color:var(--muted);font-family:var(--sans);font-size:var(--t-xs);font-weight:400;margin-left:10px}
.nav{display:flex;gap:22px;align-items:center}
.nav a{font-size:var(--t-sm);text-decoration:none;color:var(--ink-2);white-space:nowrap}
@media (hover:hover){.nav a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px}.nav a.btn:hover{color:var(--surface);text-decoration:none}}
.nav a:active{color:var(--teal-ink)}
.nav a.btn{color:var(--surface)}
@media (max-width:960px){.brand span{display:none}}
@media (max-width:760px){.nav a:not(.btn){display:none}}
/* phone section row (index only): shows the three anchor links the bar hides */
.subnav{display:none}
@media (max-width:760px){
  /* the three pills (368px with the short "Weekend costs" label) fit a 390px screen with 20px gutters; the long desktop label ran to 415px and cut the third pill at the edge. Narrower screens scroll the row, the end gutter scrolls with it */
  .subnav{display:flex;gap:8px;overflow-x:auto;padding:10px 20px;border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:20px}
  .subnav::-webkit-scrollbar{display:none}
  .subnav a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;font-size:var(--t-2xs);color:var(--ink-2);text-decoration:none;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
  @media (hover:hover){.subnav a:hover{color:var(--ink);border-color:var(--line-hover)}}
  .subnav a:active{background:var(--teal-soft);color:var(--teal-ink);border-color:var(--teal)}
}
/* under 384px the third pill would sit 4px past the edge: wrap to a second row rather than show a sliver */
@media (max-width:383px){.subnav{flex-wrap:wrap}}

/* buttons */
/* box-shadow is not in the transition list anywhere: a focus ring lands at once, in step with its outline */
.btn{display:inline-block;background:var(--teal);color:var(--surface);font-weight:600;padding:11.5px 18.5px;border-radius:var(--radius);text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-size:1rem;font-family:var(--sans);line-height:1.2;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
@media (hover:hover){
  .btn:hover{background:var(--teal-ink);color:var(--surface)}
  .btn.ghost:hover{background:var(--teal-soft);color:var(--teal-ink);border-color:var(--teal-ink)}
}
.btn:active{background:var(--teal-ink);color:var(--surface);transform:translateY(1px);box-shadow:inset 0 2px 0 rgba(0,0,0,.18)}
.btn.ghost{background:transparent;color:var(--teal-ink);border-color:var(--teal)}
.btn.ghost:active{background:var(--teal-press);color:var(--teal-ink);box-shadow:none}
.btn.small{padding:7.5px 12.5px;font-size:var(--t-sm)}
/* only the two submit buttons disable, while a send is in flight */
.btn:disabled,.btn:disabled:hover,.btn:disabled:active{opacity:.6;cursor:not-allowed;background:var(--teal);transform:none;box-shadow:none}

/* hero */
.hero{padding:72px 0 var(--s-8);border-top:0}
/* 548px text column: the two CTA buttons (272 + 14 + 247 = 533px) sit on one line; the demo keeps 476px */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1{margin-bottom:.4em}
.lede{font-size:1.2rem;color:var(--ink-2);max-width:32ch}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:var(--s-3) 0 var(--s-2)}
.hero .fine{font-size:var(--t-sm);max-width:44ch}
/* stacked hero reads as a story: headline, lede, the demo (the proof), then the CTA. The text column dissolves so its children can be ordered around the demo. */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:0}
  .hero .wrap > div:first-child{display:contents}
  .hero h1{order:1}.hero .lede{order:2}.hero .demo{order:3;margin-top:4px}.hero .cta{order:4}.hero .fine{order:5}
  .hero .demo-cap{margin-bottom:8px}
  .hero{padding:44px 0 40px}
}

/* chart note demo */
.demo{position:relative}
.note{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 1px 0 var(--line), 0 18px 40px -28px rgba(22,33,31,.35);font-size:1rem}
.note-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);color:var(--muted);font-size:var(--t-xs)}
.note-bar b{color:var(--ink-2);font-weight:600}
.note-body{padding:18px 18px 16px;min-height:170px;line-height:1.6}
/* the highlighter: a flat marker-coloured image (a two-stop gradient of one colour) drawn from the left edge.
   Its width goes 0 to 100%, so the sweep carries across a line break the way a pen would. */
.note-body .phi{border-radius:2px;padding:0 2px;background:linear-gradient(var(--marker),var(--marker)) 0 0/0% 100% no-repeat;transition:background-size var(--dur-3) var(--ease)}
.note-body .phi.hi{background-size:100% 100%}
/* the blackout is a stamp, not a fade: the shorthand drops the image and the colour lands at once */
.note-body .phi.redact{background:var(--ink);color:var(--ink)}
/* the pasted block lands in one go; a 140ms fade takes the edge off the pop */
.note-body .pasted{animation:paste-in var(--dur-1) var(--ease)}
@keyframes paste-in{from{opacity:0}}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--ink);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(2) infinite}
.demo.static .caret{display:none}
@keyframes blink{to{visibility:hidden}}
.note-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--radius) var(--radius)}
.tally{font-weight:600;color:var(--alert);font-size:var(--t-sm);min-height:1.4em}
.tally.zero{color:var(--muted);font-weight:400}
.replay{background:none;border:0;color:var(--teal-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;font-size:var(--t-xs);padding:0;font-family:var(--sans);transition:color var(--dur-1) var(--ease)}
@media (hover:hover){.replay:hover{color:var(--teal);text-decoration-thickness:2px}}
.replay:active{color:var(--ink)}
.demo-cap{color:var(--muted);font-size:var(--t-xs);margin:10px 4px 0;max-width:100%}

/* generic sections */
section{padding:var(--s-8) 0;border-top:1px solid var(--line)}
section.tight{padding:var(--s-6) 0}
.wrap > h2{margin-bottom:var(--s-4)}
.wrap > h3{margin-top:var(--s-6)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s-6);align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr;gap:20px}}
.two > h2{margin:3px 0 0}
.wrap > .two{margin-bottom:var(--s-4)}
ul.plain{list-style:none;padding:0;margin:0 0 1em}
ul.plain li{padding:10px 0;border-top:1px solid var(--line);max-width:var(--measure)}
ul.plain li:last-child{border-bottom:1px solid var(--line)}
.two ul.plain > li:first-child{border-top:0;padding-top:0}
.kicker{font-family:var(--serif);font-size:1.35rem;line-height:1.45;color:var(--ink-2);max-width:40ch;margin-bottom:1em}

/* who */
.who dl{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;margin:0;max-width:var(--measure)}
.who dt{font-weight:600;color:var(--ink-2)}
.who dd{margin:0}

/* inputs (shared) */
.calc input[type=number],.form input[type=email],.form input[type=text]{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--ink);transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
@media (hover:hover){.calc input[type=number]:hover,.form input[type=email]:hover,.form input[type=text]:hover{border-color:var(--line-hover)}}
.calc input[type=number]:focus,.form input[type=email]:focus,.form input[type=text]:focus{border-color:var(--teal);outline:3px solid var(--marker);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
.form input[aria-invalid="true"]{border-color:var(--alert);box-shadow:0 0 0 1px var(--alert)}
/* an invalid field keeps saying so while it has focus: the marker outline stays, the inner ring turns red (alert vs marker 4.4:1, alert vs white 7.4:1) */
.form input[aria-invalid="true"]:focus{border-color:var(--alert);box-shadow:0 0 0 2px var(--alert)}
.calc input[type=number]:disabled,.form input:disabled{background:var(--paper-2);color:var(--ink-2);cursor:not-allowed}

/* calculator */
.calc{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:var(--s-4);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-4)}
@media (max-width:820px){.calc{grid-template-columns:1fr;padding:20px}}
.calc .fields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-content:start}
@media (max-width:560px){.calc .fields{grid-template-columns:1fr}}
.calc label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--ink-2);margin:0 0 6px;align-self:end}
.calc .field{margin-bottom:var(--s-2);display:grid;grid-row:span 3;grid-template-rows:subgrid}
.calc .field small{display:block;font-weight:400;font-size:var(--t-xs);color:var(--muted);margin-top:4px}
.calc output{display:block}
.result{border-left:3px solid var(--marker);padding-left:20px}
.result .big{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3rem);line-height:1;margin:6px 0 4px;font-variant-numeric:tabular-nums}
/* a changed figure settles into place: teal for a beat, 2px drop */
.result .big.tick{animation:tick var(--dur-3) var(--ease)}
@keyframes tick{from{color:var(--teal);transform:translateY(-2px)}}
.result .lbl{color:var(--ink-2);font-weight:600;margin-bottom:18px}
.result .math{font-size:var(--t-sm);color:var(--muted);line-height:1.5}
.result .math span{display:block;margin-bottom:6px}
.result hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* offer */
.offer{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:var(--s-4);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-6)}
@media (max-width:820px){.offer{grid-template-columns:1fr;padding:22px;gap:28px}.offer ul.plain{margin-bottom:0}}
.price{font-family:var(--serif);font-size:2.4rem;line-height:1;margin:0 0 4px;font-variant-numeric:tabular-nums}
.price small{font-family:var(--sans);font-size:1rem;color:var(--muted);display:block;margin-top:6px}
/* the second price (multi-site) sets at the tier-price size */
.price + .price{margin-top:14px;font-size:1.8rem}
.offer ul.plain li{padding:8px 0}
.offer-cta{margin-top:14px}
.guarantee{background:var(--teal-soft);border-radius:var(--radius);padding:20px 24px;margin-top:18px}
.guarantee p{margin:0;font-size:var(--t-sm);max-width:100%}
.guarantee b{display:block;margin-bottom:4px}

/* findings sample table */
.tblwrap{position:relative;overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius);margin:12px 0 8px;background:var(--surface)}
.tblscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* right-edge fade: the one gradient on the site. Shows only where the table scrolls; the script clears it at the end of the scroll. */
.tblwrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;pointer-events:none;border-radius:0 var(--radius) var(--radius) 0;background:linear-gradient(to right,transparent,var(--surface) 80%);display:none;transition:opacity var(--dur-1) var(--ease)}
.scrollhint{display:none;font-size:var(--t-xs);color:var(--muted);margin:0 0 -2px}
@media (max-width:760px){
  .tblwrap::after{display:block}
  /* fades out over the last pixel of scroll instead of vanishing on the frame the class lands */
  .tblwrap.at-end::after{opacity:0}
  .scrollhint{display:block}
}
.tbl{width:100%;min-width:680px;border-collapse:collapse;font-size:var(--t-sm);margin:0;background:var(--surface)}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;transition:background-color var(--dur-1) var(--ease)}
/* the row under the pointer reads as one row across five columns; the header keeps its own tint */
@media (hover:hover){.tbl tbody tr:hover td{background:var(--paper)}}
.tbl th{font-weight:600;color:var(--ink-2);background:var(--paper-2)}
.tbl td:first-child{min-width:280px}
/* the money column reads as a column: right-aligned, tabular digits, header included */
.tbl th.num,.tbl td.num{text-align:right;white-space:nowrap} /* "Annual value" broke into two lines at 768px and made the header row twice as tall */
.tbl td.num{font-variant-numeric:tabular-nums}
.tbl tr:has(+ tr.total) td{border-bottom:0}
.tbl tr.total td{font-weight:600;border-top:2px solid var(--line-strong);border-bottom:0}
.tbl tbody tr:last-child td{border-bottom:0}
.pill{display:inline-block;font-size:var(--t-2xs);padding:2px 8px;border-radius:999px;background:var(--paper-2);color:var(--ink-2)}
.pill.phi{background:var(--alert-soft);color:var(--alert)}
.pill.agg{background:var(--marker);color:var(--marker-ink)}
.samplenote{font-size:var(--t-xs);color:var(--muted);margin-top:8px}

/* steps (a real sequence) */
.steps{list-style:none;padding:0;margin:0;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:20px}}
.steps li{counter-increment:s;padding-top:14px;border-top:2px solid var(--ink)}
.steps li::before{content:counter(s);font-family:var(--serif);font-size:2rem;line-height:1;display:block;margin-bottom:10px}
.steps h3{font-size:1.2rem}
.steps p{font-size:var(--t-sm);color:var(--ink-2)}

/* plays */
.plays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px var(--s-6);max-width:100%}
@media (max-width:820px){.plays{grid-template-columns:1fr}}
.plays div{padding:14px 0;border-top:1px solid var(--line)}
.plays b{display:block;margin-bottom:2px}
.plays p{font-size:var(--t-sm);color:var(--ink-2);margin:0}
.plays .tag{font-size:var(--t-xs);color:var(--muted)}

/* tiers */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-top:8px}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:var(--s-3)}
.tier.mid{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.tier h3{font-size:1.2rem;margin-bottom:2px}
.tier .price{font-size:1.8rem;margin:8px 0 2px}
.tier .price small{margin-top:2px}
.tier ul{padding-left:18px;margin:12px 0 0;font-size:var(--t-sm);color:var(--ink-2)}
.tier li{margin-bottom:6px}

/* compliance */
.arch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
@media (max-width:820px){.arch{grid-template-columns:1fr}}
.arch div{border-top:2px solid var(--teal);padding-top:14px}
.arch h3{font-size:1.2rem}
.arch p{font-size:var(--t-sm);color:var(--ink-2)}
.arch + p{margin-top:var(--s-4)}

/* about */
/* "Why a clinic owner should listen / to me" left two words on the second line at 1440px; balance splits it after "owner" */
.about h2{text-wrap:balance}

/* faq */
details{border-top:1px solid var(--line);max-width:var(--measure)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:16px 0;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;transition:color var(--dur-1) var(--ease)}
summary::-webkit-details-marker{display:none}
/* fixed 1em box so "+" and "–" do not shift the row on toggle; the 26px line (17px × 1.55) centres the glyph on the first line of the question */
summary::after{content:"+";font-family:var(--serif);font-size:1.35rem;line-height:26px;flex:none;width:1em;text-align:right;color:var(--muted);transition:color var(--dur-1) var(--ease)}
@media (hover:hover){summary:hover,summary:hover::after{color:var(--teal-ink)}}
summary:active,summary:active::after{color:var(--teal)}
details[open] summary::after{content:"–";color:var(--ink)}
details p{margin:0;padding:0 0 20px;color:var(--ink-2)}
/* the answer fades up as it opens; closing is instant (details has no close transition without script) */
details[open] > p{animation:fade-up var(--dur-2) var(--ease) backwards}

/* capture (index) and gate (scorecard): the two ink panels share text tints, the marker button and the status colours */
.capture,.gate{background:var(--ink);color:var(--on-ink)}
.capture{border-top:0}
.capture h2,.capture p,.gate h3{color:var(--on-ink)}
/* "Start with the / three-minute risk score" at 390px and 1440px. The compound is held together by a nowrap span in the HTML; with pretty that left "score" alone on line two at 1440px, balance does not */
.capture h2{text-wrap:balance}
.capture .lede,.gate p{color:var(--on-ink-2)}
.capture a{color:var(--surface)}
@media (hover:hover){.capture a:hover{color:var(--surface);text-decoration-color:var(--marker)}}
.capture a:active{color:var(--marker)}
.capture .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s-6);align-items:center}
@media (max-width:820px){.capture .wrap{grid-template-columns:1fr;gap:36px}.capture ul.plain{margin-bottom:0}}
.capture .btn,.gate .btn{background:var(--marker);color:var(--ink)}
@media (hover:hover){.capture .btn:hover,.gate .btn:hover{background:var(--marker-hover);color:var(--ink)}}
.capture .btn:active,.gate .btn:active{background:var(--marker-press);color:var(--ink)}
.capture .btn:disabled,.capture .btn:disabled:hover,.capture .btn:disabled:active,.gate .btn:disabled,.gate .btn:disabled:hover,.gate .btn:disabled:active{background:var(--marker)}
.capture .btn:focus-visible,.gate .btn:focus-visible{outline-color:var(--surface)}
.capture ul.plain li{border-color:var(--on-ink-line)}

/* footer */
footer{padding:36px 0 48px;color:var(--muted);font-size:var(--t-xs)}
footer p{max-width:70ch}
footer nav{display:flex;gap:18px;flex-wrap:wrap}

/* form */
.form{display:grid;gap:10px;max-width:420px}
.form .legend{font-weight:600;margin:0 0 4px}
/* visible label above each field; the placeholder, where kept, shows the format only */
.form .f{display:grid;gap:6px}
.form label{font-size:var(--t-xs);font-weight:600;line-height:1.3}
.form input[type=email],.form input[type=text]{padding:12px 14px}
/* empty, the line takes no room: height 0 and a -10px margin cancels the grid gap. It stays in the accessibility tree (not display:none), so the role="status" announcement still fires when the first message lands. A message opens over 200ms (dur-2) instead of landing in a reserved 35px gap. */
.status{font-size:var(--t-sm);margin:4px 0 0;max-height:6em;overflow:hidden;text-wrap:pretty;transition:max-height var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease),margin var(--dur-2) var(--ease)}
.status:empty{max-height:0;opacity:0;margin:-10px 0 0}
/* two-column capture: the form is centred against the text column, so a message floats under the button instead of re-centring the fields */
@media (min-width:821px){.capture .form{position:relative}.capture .status{position:absolute;top:100%;left:0;right:0;margin-top:10px}}
/* three states that read differently at a glance: busy breathes, sent and failed are bold and coloured */
.status.busy{animation:breathe 1.1s ease-in-out infinite}
.status.ok,.status.err{font-weight:600;animation:fade-up var(--dur-2) var(--ease)}
.status.ok{color:var(--on-ink-ok)}
.status.err{color:var(--on-ink-err)}
@keyframes breathe{50%{opacity:.55}}
@keyframes fade-up{from{opacity:0;transform:translateY(3px)}}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* evidence list */
.evidence li{padding:14px 0}
.evidence li span{display:block;color:var(--muted);font-size:var(--t-xs);margin-top:4px}

/* ---------- phones and tablets (touch first) ---------- */
/* 44px hit areas for the bar, inline text links and text buttons, without moving the text */
@media (max-width:1024px){
  .brand,.nav a{display:inline-flex;align-items:center;min-height:44px}
  .nav .btn.small{padding:12px 16px;font-size:var(--t-sm)}
  .replay{padding:14px 8px;margin:-14px -8px}
  .capture ul.plain li{padding:12px 0}
  .capture ul.plain a{display:inline-block;padding:12px 0;margin:-12px 0}
  /* "Email" is 36px of text: 6px of hit area each side makes every link at least 44px wide, 12px clear of its neighbour.
     The padding lives on the links and the nav pulls the block back, so wrapped rows never overlap (8px row gap). */
  footer nav{gap:8px 24px;margin:-12px -6px;align-items:center}
  footer nav a{display:inline-block;padding:12px 6px;margin:0}
  footer .notlive{padding:0 6px} /* lines up with the link text inside the pulled-back nav */
}
@media (max-width:900px){.note-body{min-height:120px}}
@media (max-width:760px){.top .wrap{height:56px}}
@media (max-width:560px){
  section{padding:var(--s-6) 0}
  section.tight{padding:40px 0}
  .hero{padding:36px 0 40px}
  h1{font-size:2.2rem;line-height:1.08}
  .hero .cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:20px}
  .hero .cta .btn{text-align:center;padding:13px 18px}
  .note-bar{flex-wrap:wrap;gap:2px 12px}
  .calc .field{margin-bottom:20px}
  .result{border-left:0;padding-left:0;border-top:3px solid var(--marker);padding-top:18px}
  .offer .btn{display:block;text-align:center}
  .tbl td:first-child{min-width:0;width:230px}
  /* the term sits above its definition: a 215px second column at 390px broke every line at four words */
  .who dl{grid-template-columns:1fr;gap:0}
  .who dt{margin-top:12px}.who dt:first-of-type{margin-top:0}
  .who dd{margin-top:2px}
  .tier{padding:20px}
}

/* ---------- reduced motion: every animation and transition on the site collapses to its end state ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0s !important}
}