/* Commas & Chaos design system, extracted from the approved homepage E-proofread.html (9 Sep 2026).
   Cobalt #1F3FBF on paper #F2F1EC, Libre Caslon Text + Hanken Grotesk, pen-line marks. Load this on every page. */

/* ==========================================================================
   E. THE PROOFREAD PAGE
   Design variant, 9 September 2026. Built once, from MERGED-PLAN.md, with the
   reviewer's five changes. Not live.

   A clinic website she has proofread in blue pen. Cobalt field first screen and
   last, paper between. One pen line, caret to comma. Fourteen drawn marks.
   Libre Caslon Text and Hanken Grotesk. Nothing under 13px.
   ========================================================================== */

:root{
  --pen:#1F3FBF; --paper:#F2F1EC; --paper-2:#C9D3F5; --sheet:#FFFFFF;
  --ink:#1B2340; --muted:#5B6478; --hair:#D3D2CB; --flag:#B8322C;
  --dsp:'Libre Caslon Text',Georgia,'Times New Roman',serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --nav-h:65px; --nav-clear:56px; --max:1140px;
  --mo-out:cubic-bezier(.23,1,.32,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;accent-color:var(--pen);caret-color:var(--pen)}
::selection{background:var(--pen);color:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:var(--dsp);font-weight:400;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,1.5rem + 5.2vw,5.5rem);line-height:1.02}
h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.5rem);line-height:1.08}
h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);line-height:1.2}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--pen);text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--pen);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(24px,5vw,72px);position:relative;z-index:2}
.col{max-width:34em}
.small{font-size:.9375rem}
.cap{font-size:.8125rem;color:var(--muted);line-height:1.5}
.lbl{font-size:.8125rem;font-weight:500;letter-spacing:.04em}
i.em{font-style:italic}
.tab-num{font-variant-numeric:tabular-nums}

/* --- All drawn marks share one stroke ------------------------------------ */
.mk,.mk *{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mk text{fill:currentColor;stroke:none;font:500 13px var(--body)}
.ann{position:relative;display:inline-block;white-space:nowrap}
.ann>svg{position:absolute;pointer-events:none;overflow:visible}

/* Draw on scroll. Any .draw path gets its length normalised and revealed. */
/* pathLength="1" normalises the dash to the whole path, but only if the stroke
   scales with the path, so non-scaling-stroke is switched off on drawn paths. */
.draw{vector-effect:none;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--mo-out)}
.hero .ann-u>svg .draw{stroke-width:2.2}
.in .draw,.draw.in{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.draw{stroke-dashoffset:0;transition:none}}
html.nojs .draw{stroke-dashoffset:0}

/* --- Sections and the thread -------------------------------------------- */
section{position:relative}
.field{background:var(--pen);color:var(--paper)}
.field h1,.field h2,.field h3{color:var(--paper)}
.field .cap,.field .muted{color:var(--paper-2)}
.field a{color:var(--paper)}
.gut{position:absolute;top:0;bottom:0;width:60px;pointer-events:none;color:var(--pen);z-index:1}
.gut.l{left:calc(6% - 30px)}
.gut.r{right:calc(6% - 30px)}
.field .gut{color:var(--paper)}
.gut svg{width:100%;height:100%;display:block}
.gap{position:relative;height:clamp(240px,34vw,520px);pointer-events:none}
.gap>svg.cross{position:absolute;inset:0;width:100%;height:100%;color:var(--pen)}
.gap .fig{position:absolute;color:var(--pen);z-index:1}
.gap.field>svg.cross,.gap.field .fig{color:var(--paper)}
.gap .pen{left:57.4%;top:94.4%;width:78px;height:104px;transform:translate(-6.5px,-97.5px) scaleX(-1) rotate(10deg);transform-origin:6.5px 97.5px}
.gap .pen .draw{transition-delay:1000ms;transition-duration:700ms}
@media(max-width:640px){
  .gut.l,.gut.r{left:-20px;right:auto}
  .gap{height:clamp(120px,26vw,200px)}
  .gap .fig{display:none}
}

/* --- Buttons ------------------------------------------------------------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 28px;
  font-family:var(--body);font-size:.9375rem;font-weight:500;border-radius:100px;border:1px solid currentColor;
  text-decoration:none;cursor:pointer;background:transparent;color:inherit;
  transition:background-color .16s var(--mo-out),color .16s var(--mo-out),transform .14s var(--mo-out)}
.pill:active{transform:scale(.97)}
.pill.solid{background:var(--paper);color:var(--pen);border-color:var(--paper)}
.pill.pen{background:var(--pen);color:var(--paper);border-color:var(--pen)}
.pill.line-pen{color:var(--pen);border-color:var(--pen)}
@media(hover:hover) and (pointer:fine){
  .field .pill:not(.solid):hover{background:var(--paper);color:var(--pen)}
  .pill.solid:hover{background:#fff}
  .pill.pen:hover{background:#1836A6}
  .pill.line-pen:hover{background:var(--pen);color:var(--paper)}
}
.pill .wa{width:16px;height:16px;fill:#25D366}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.acts.mid{justify-content:center}

/* --- Nav overrides for this page. body.hp scope; other pages untouched. -- */
body.hp nav.top-nav.nv2{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .2s,border-color .2s}
body.hp nav.top-nav.nv2.nav-scrolled{background:rgba(242,241,236,.94);border-bottom-color:var(--hair);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:none}
body.hp .nv2-logo-mark path{fill:var(--paper)}
body.hp .nav-scrolled .nv2-logo-mark path{fill:var(--pen)}
body.hp .nv2-logo-name{font-family:var(--dsp);font-weight:400;font-style:normal;letter-spacing:-.01em;color:var(--paper)}
body.hp .nav-scrolled .nv2-logo-name{color:var(--ink)}
body.hp .nv2-logo-tag,body.hp .nv2-logo-tag .nv2-at{font-family:var(--body);color:var(--paper-2);font-size:12px;letter-spacing:.01em;line-height:1.1}
body.hp .nv2-logo-mark{width:20px;height:29px}
body.hp .nv2-logo-name{font-size:20px}
body.hp .nv2-logo-words{gap:5px}
body.hp .nav-scrolled .nv2-logo-tag,body.hp .nav-scrolled .nv2-logo-tag .nv2-at{color:var(--muted)}
body.hp .nv2-menu a:not(.nv2-btn){font-family:var(--body);color:var(--paper)}
body.hp .nv2-menu a:not(.nv2-btn):hover,body.hp .nv2-menu a.nv2-on:not(.nv2-btn){color:#fff}
body.hp .nav-scrolled .nv2-menu a:not(.nv2-btn){color:var(--muted)}
body.hp .nav-scrolled .nv2-menu a:not(.nv2-btn):hover,body.hp .nav-scrolled .nv2-menu a.nv2-on:not(.nv2-btn){color:var(--ink)}
body.hp a.nv2-btn{background:var(--paper);color:var(--pen);border-radius:100px;font-family:var(--body)}
body.hp a.nv2-btn:hover{background:#fff;color:var(--pen)}
body.hp .nav-scrolled a.nv2-btn{background:var(--pen);color:var(--paper)}
body.hp .nv2-toggle span{background:var(--paper)}
body.hp .nav-scrolled .nv2-toggle span{background:var(--ink)}
body.hp .nv2-dd-menu,body.hp ul.nv2-menu.nv2-open{background:var(--paper);border-color:var(--hair)}
body.hp .nv2-dd-menu::before{border-bottom-color:var(--paper)}
body.hp a.nv2-dd-item{color:var(--ink);font-family:var(--body)}
body.hp a.nv2-dd-item:hover{background:rgba(31,63,191,.06);color:var(--pen)}
body.hp .nv2-dd-num,body.hp a.nv2-dd-hot{color:var(--pen)}
body.hp .nv2-dd-sep{background:var(--hair)}
body.hp .nv2-skip{background:var(--ink);color:var(--paper)}
@media(max-width:768px){
  body.hp ul.nv2-menu.nv2-open{background:var(--paper)}
  body.hp ul.nv2-menu.nv2-open a:not(.nv2-btn){color:var(--ink)}
  body.hp ul.nv2-menu.nv2-open a.nv2-btn{background:var(--pen);color:var(--paper)}
}

/* --- Footer overrides. Same scope. ------------------------------------- */
body.hp footer.site-footer.ft2{background:var(--pen);border-top:1px solid rgba(242,241,236,.25);color:var(--paper)}
body.hp footer.ft2 .ft2-brand-name{font-family:var(--dsp);font-weight:400;font-style:normal;color:var(--paper)}
body.hp footer.ft2 .ft2-tag,body.hp footer.ft2 .ft2-h,body.hp footer.ft2 .ft2-bottom span{color:var(--paper-2);font-family:var(--body)}
body.hp footer.ft2 .ft2-h{font-weight:500;letter-spacing:.04em;text-transform:none;font-size:.8125rem}
body.hp footer.ft2 .ft2-col a{color:var(--paper);font-family:var(--body)}
body.hp footer.ft2 .ft2-col a:hover{color:#fff}
body.hp footer.ft2 details.ft2-drop>summary::after{color:var(--paper-2)}
body.hp footer.ft2 .ft2-bottom{border-top-color:rgba(242,241,236,.25)}

/* --- 1. Hero ------------------------------------------------------------- */
.hero{position:relative;min-height:calc(100svh - var(--nav-h,65px));display:flex;align-items:safe center;text-align:center;
  padding-top:calc(var(--nav-h,65px) + var(--nav-clear,56px));padding-bottom:clamp(64px,8vw,120px)}
.hero .wrap{width:100%}
.hero-copy{max-width:54rem;margin-inline:auto}
.hero h1{max-width:19ch;margin-inline:auto;font-size:clamp(2.5rem,1rem + 4.6vw,4.75rem)}
.hero h1 .nw{white-space:nowrap}
.hero h1 .role{display:block;font-family:var(--body);font-size:.8125rem;font-weight:500;letter-spacing:.04em;color:var(--paper-2);margin-bottom:26px}
.hero .capsule{max-width:36em;margin:30px auto 0;color:var(--paper-2);font-size:clamp(1rem,.95rem + .25vw,1.125rem)}
.hero .capsule b{color:var(--paper);font-weight:500}
.hero .priceline{margin:22px auto 0;font-size:.9375rem;color:var(--paper)}
.caret{display:block;width:72px;height:74px;margin:6px auto 2px;color:var(--paper)}
.hero .ann-o>svg{left:-10%;width:120%;top:-.22em;height:1.5em}
.hero .ann-u>svg{left:-2%;width:104%;bottom:-.45em;height:.5em}
.hero h1 s{text-decoration:none;color:var(--paper-2);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M2 21 C 40 18, 80 19, 120 20 C 160 21, 200 22, 238 18' fill='none' stroke='%23F2F1EC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left 54%/240px 0;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 420ms var(--eo) 900ms}
.hero.in h1 s,.nojs .hero h1 s{background-size:240px 1em}
/* She stands at the right edge of the field, feet on the section's floor, the
   way Opening Line places its drawn figures. A figure, not a headshot block. */
.hero-fig{position:absolute;right:clamp(24px,7vw,110px);bottom:0;height:min(64%,560px);z-index:1;pointer-events:none}
.hero-fig img{height:100%;width:auto;display:block}
.steth-sm{display:block;width:72px;height:auto;color:var(--pen);margin:18px 0 0}
.hero .steth{position:absolute;left:clamp(24px,7vw,120px);bottom:clamp(40px,7vw,110px);width:clamp(90px,9vw,150px);height:auto;color:var(--paper);z-index:1}
@media(max-width:1180px){.hero-fig{height:min(52%,420px)}}
@media(max-width:820px){
  .hero{display:block;padding-bottom:0}
  .hero-fig{position:static;height:auto;display:flex;justify-content:center;margin-top:28px}
  .hero-fig img{height:300px;width:auto}
  .hero .steth{display:none}
}
/* --- 2. The problem ------------------------------------------------------ */
.pad{padding-block:clamp(56px,7vw,110px)}
.two{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,6vw,90px);align-items:start}
@media(max-width:820px){.two,.two.even,.two.writer,.close .two{grid-template-columns:1fr;gap:34px}}
.tabs{position:relative;height:640px}
.tabs .desk{position:absolute;left:0;top:400px;width:min(100%,240px);height:auto;color:var(--pen)}
.tab{position:absolute;left:0;width:min(100%,300px);background:var(--paper);color:var(--pen);padding:44px 22px 22px;transform-origin:50% 100%}
.tab>svg.frame{position:absolute;inset:0;width:100%;height:100%;color:var(--pen)}
.tab ul{position:relative;margin:0;padding:0;list-style:none;font-size:.8125rem;line-height:1.7;color:var(--ink)}
.tab:nth-child(1){top:0;transform:rotate(-3deg)}
.tab:nth-child(2){top:70px;transform:rotate(0)}
.tab:nth-child(3){top:140px;transform:rotate(3deg)}
@media(min-width:821px){.tabs{position:sticky;top:calc(var(--nav-h,65px) + 40px)}}
@media(max-width:820px){.tabs{height:auto;display:grid;gap:14px}.tabs .tab{position:relative;top:auto;transform:none;width:min(100%,320px)}.tabs .desk{position:static;width:200px;margin-top:6px}}
.clock{display:inline-block;width:1.6em;height:1.6em;vertical-align:-.4em;margin-right:.25em;color:var(--pen)}

/* --- 3. The turn and the writing ----------------------------------------- */
.centre{text-align:center}
.centre .col{margin-inline:auto}
.struck{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px) clamp(28px,5vw,72px);max-width:880px;margin:44px auto 0;text-align:left}
.struck>div{position:relative}
.struck .lbl{color:var(--flag);display:block;margin-bottom:8px}
.struck .t{font-family:var(--dsp);font-size:clamp(1.15rem,1rem + .9vw,1.5rem);line-height:1.35;display:inline;padding:0 .08em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M2 21 C 40 18, 80 19, 120 20 C 160 21, 200 22, 238 18' fill='none' stroke='%231F3FBF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left 56%/240px 1em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
@media(max-width:400px){.struck{grid-template-columns:1fr}}
.stillyours{font-family:var(--dsp);font-size:clamp(1.375rem,1.1rem + 1.2vw,1.9rem);margin:0 auto;max-width:22ch;position:relative;padding-top:56px}
.stillyours>svg.arrow{position:absolute;left:calc(50% - 150px);top:-6px;width:140px;height:60px;color:var(--pen)}
.sheet{background:var(--sheet);border:1px solid var(--hair);padding:clamp(28px,4.5vw,56px);margin-top:44px;text-align:left}
.sheet .cmp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
@media(max-width:820px){.sheet .cmp{grid-template-columns:1fr;gap:32px}}
.sheet .hd{font-size:.8125rem;font-weight:500;letter-spacing:.04em;color:var(--muted);padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--hair)}
.sheet .after .hd{color:var(--pen)}
.sheet .before p{color:var(--muted)}
.del{position:relative;display:inline-block}
.del>svg{position:absolute;left:-4%;width:108%;top:-.35em;height:1.6em;color:var(--pen)}

/* --- 4. Report and price ------------------------------------------------- */
.two.even{grid-template-columns:6fr 6fr}
.doc{background:var(--sheet);border:1px solid var(--hair);padding:30px 28px 32px;max-width:400px;margin-left:auto}
@media(max-width:820px){.doc{margin-left:0;max-width:100%}}
.doc .score{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.doc .n{font-family:var(--dsp);font-size:clamp(2.5rem,1.8rem + 2.8vw,4rem);line-height:1;color:var(--pen)}
.doc .verdict{font-family:var(--dsp);font-style:italic;font-size:1.05rem;line-height:1.4;margin:14px 0 22px;color:var(--ink)}
.bars{display:grid;gap:12px}
.bar b{display:flex;justify-content:space-between;font-weight:400;font-size:.9375rem;margin-bottom:6px}
.bar b i{font-style:normal;font-weight:500;color:var(--pen);position:relative;display:inline-block;min-width:2ch;text-align:right}
.bar .trk{height:3px;background:var(--hair)}
.bar .fill{height:100%;background:var(--pen)}
.bar.low b i{color:var(--flag)}
.bar.low .fill{background:var(--flag)}
.ring>svg{position:absolute;left:-16px;top:-12px;width:52px;height:42px;color:var(--pen)}
.rows{margin-top:48px;border-top:1px solid var(--hair)}
.rows>div{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr);gap:clamp(18px,4vw,52px);align-items:start;padding:30px 0;border-bottom:1px solid var(--hair)}
.rows .fig-p{font-family:var(--dsp);font-size:clamp(2.5rem,1.8rem + 2.8vw,4rem);line-height:1;color:var(--pen);white-space:nowrap;padding-right:clamp(8px,2vw,24px)}
.rows h3{margin-top:4px}
.rows .lbl{color:var(--muted);display:block;margin-bottom:6px}
.rows .r-acts{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.rows .r-acts .pill{min-height:44px;padding:0 22px}
@media(max-width:820px){.rows>div{grid-template-columns:1fr;gap:12px}}

/* --- 5. The writer ------------------------------------------------------- */
.two.writer{grid-template-columns:7fr 5fr}
.portrait{position:relative;max-width:480px;margin-left:auto}
.portrait img{width:100%;height:auto;display:block;border:1px solid var(--hair)}
.portrait>svg{position:absolute;right:-18px;top:-22px;width:60px;height:80px;color:var(--pen);transform:scaleX(-1)}
@media(max-width:820px){.portrait{margin:0;max-width:320px}.two.writer>div:last-child{order:-1}}
.clocks{display:block;width:min(100%,300px);height:auto;margin:22px 0 0;color:var(--pen)}
.creds{margin:26px 0 0;padding:0;list-style:none;font-size:.9375rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 0}
.creds li+li::before{content:"\00B7";margin:0 10px;color:var(--hair)}
.qs{margin-top:clamp(44px,5vw,72px);max-width:34em;border-top:1px solid var(--hair)}
.qs>div{padding:24px 0;border-bottom:1px solid var(--hair)}
.qs h3{margin-bottom:10px}
.qs p{color:var(--muted)}

/* --- 6. The close -------------------------------------------------------- */
.close .two{grid-template-columns:5fr 7fr;align-items:start}
.form label{display:block;font-size:.8125rem;font-weight:500;letter-spacing:.04em;color:var(--paper-2);margin:22px 0 6px}
.form label:first-child{margin-top:0}
.form input,.form textarea{width:100%;min-height:44px;padding:8px 0;background:transparent;border:0;border-bottom:1px solid rgba(242,241,236,.4);
  color:var(--paper);font-family:var(--body);font-size:1rem;border-radius:0;transition:border-color .16s}
.form textarea{min-height:96px;resize:vertical;line-height:1.5}
.form input:focus,.form textarea:focus{border-bottom-color:var(--paper);outline:none}
.form .acts{margin-top:28px;align-items:center}
.form .cap{margin-top:18px}
.close-right{position:relative;padding-left:clamp(0px,4vw,60px)}
.form .form-h{font-family:var(--dsp);font-weight:400;font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);line-height:1.15;letter-spacing:-.01em;margin:0 0 26px;color:var(--paper)}
.close-right .laugh{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(16px,3vw,36px);align-items:end;margin-top:30px}
.close-right .laugh img{width:100%;height:auto;display:block}
.close-right .laugh .reveal{display:block}
@media(max-width:820px){.close-right .laugh{grid-template-columns:1fr}.close-right .laugh img{width:min(100%,260px)}}
.close-right svg.comma{display:block;width:120px;height:140px;color:var(--paper);margin:0 0 20px}
.wordmark-wrap{overflow:clip;margin-top:clamp(64px,8vw,120px);padding-inline:2.4vw}
.wordmark{font-family:var(--dsp);font-weight:400;font-size:min(11.6vw,10.5rem);line-height:1;letter-spacing:-.02em;
  color:var(--paper);margin:0;white-space:nowrap;text-align:center}
@media(max-width:640px){.wordmark{font-size:11vw}}
/* Source order matters: the per-section grid shapes above out-rank the collapse
   rule in the layout block, so the collapse is restated here, last. */
@media(max-width:820px){.two,.two.even,.two.writer,.close .two{grid-template-columns:1fr;gap:34px}}
/* ==== Motion. Emil's floor: ease-out entrances, custom curves, nothing over
   300ms for UI, transform and opacity only, reduced motion honoured. ======= */
:root{--eo:cubic-bezier(.23,1,.32,1);--eio:cubic-bezier(.77,0,.175,1)}
.rise{opacity:0;transform:translateY(10px);transition:opacity 320ms var(--eo),transform 320ms var(--eo);transition-delay:calc(var(--i,0) * 55ms)}
.in .rise,.rise.in{opacity:1;transform:none}
.reveal{clip-path:inset(0 0 100% 0);transition:clip-path 640ms var(--eo) 120ms}
.in .reveal{clip-path:inset(0 0 0 0)}
/* the three tabs fan out one after the other */
.tab{opacity:0;transform:translateY(18px) rotate(0);transition:opacity 380ms var(--eo),transform 420ms var(--eo);transition-delay:calc(var(--i,0) * 70ms)}
.in .tab:nth-child(1){opacity:1;transform:rotate(-3deg)}
.in .tab:nth-child(2){opacity:1;transform:rotate(0)}
.in .tab:nth-child(3){opacity:1;transform:rotate(3deg)}
/* struck items: the word greys as the stroke lands */
.struck .t{color:var(--ink);background-size:240px 0;transition:color 360ms var(--eo),background-size 360ms var(--eo);transition-delay:calc(var(--i,0) * 90ms + 200ms)}
.in .struck .t{color:var(--muted);background-size:240px 1em}
/* scorecard bars fill left to right, one after another; the ring lands last */
.doc .fill{transform:scaleX(0);transform-origin:left center;transition:transform 700ms var(--eo);transition-delay:calc(var(--i,0) * 80ms + 150ms)}
.in .doc .fill{transform:scaleX(1)}
.doc .ring .draw{transition-delay:700ms}
/* the desk lamp glows once the figure has drawn */
.glow{opacity:0;transition:opacity 400ms var(--eo) 1300ms}
.in .glow{opacity:.6;animation:glow 2.6s var(--eio) 1.8s infinite alternate}
@keyframes glow{from{opacity:.35}to{opacity:.8}}
/* the speech loop pops after the figures finish drawing */
.pop{opacity:0;transform:scale(.92);transform-origin:60% 80%;transition:opacity 220ms var(--eo) 1000ms,transform 220ms var(--eo) 1000ms}
.in .pop{opacity:1;transform:scale(1)}
/* hover states, pointer only */
@media(hover:hover) and (pointer:fine){
  .doc{transition:transform 220ms var(--eo)}
  .doc:hover{transform:translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){
  .rise{transform:none;transition:opacity 200ms ease}
  .reveal{clip-path:none;transition:none}
  .tab{transform:none;transition:opacity 200ms ease}
  .in .tab:nth-child(1),.in .tab:nth-child(3){transform:none}
  .struck .t{background-size:240px 1em;transition:none}
  .doc .fill{transform:none;transition:none}
  .glow{opacity:.6;animation:none;transition:none}
  .pop{transform:none;opacity:1;transition:none}
}

/* ==== v5 additions ======================================================= */
.gap{height:clamp(180px,22vw,320px)}
.cliff{font-family:var(--dsp);font-style:italic;font-size:clamp(1.15rem,1.6vw,1.45rem);color:var(--pen);margin:34px 0 0;display:flex;align-items:center;gap:14px;line-height:1.3}
.cliff.centre{justify-content:center}
.cliff-arr{width:22px;height:34px;flex:none;color:var(--pen)}
.field .cliff,.field .cliff-arr{color:var(--paper)}
/* the marked-up paragraph: struck phrases with a pen label in the margin */
.marked p{line-height:1.9}
.mx{position:relative;display:inline;white-space:normal}
.mx s{text-decoration:none;color:var(--muted);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M2 21 C 40 18, 80 19, 120 20 C 160 21, 200 22, 238 18' fill='none' stroke='%23B8322C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left 56%/240px 0;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 360ms var(--eo),color 360ms var(--eo);transition-delay:calc(var(--i,0) * 220ms + 300ms)}
.in .mx s{background-size:240px 1em;color:var(--muted)}
.mx em{display:inline-block;font-family:var(--body);font-style:normal;font-size:.75rem;font-weight:500;letter-spacing:.03em;color:var(--flag);
  border:1px solid var(--flag);border-radius:100px;padding:1px 8px;margin:0 6px 0 4px;vertical-align:middle;transform:rotate(-2deg);
  opacity:0;transition:opacity 260ms var(--eo);transition-delay:calc(var(--i,0) * 220ms + 560ms)}
.in .mx em{opacity:1}
/* GhostRank */
.faq .lbl-certs{color:var(--pen)!important}
.h2-sm{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.1rem)!important;line-height:1.12}
.hl{color:var(--ink);padding:.02em .14em;margin:0 -.14em;background-image:linear-gradient(100deg,rgba(31,63,191,0) 2%,rgba(31,63,191,.2) 6%,rgba(31,63,191,.2) 94%,rgba(31,63,191,0) 98%);background-repeat:no-repeat;background-size:0% 78%;background-position:0 62%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 640ms var(--eo) 520ms}
.in .hl,.nojs .hl{background-size:100% 78%}
.lbl-ghost{font-size:.8125rem;font-weight:500;letter-spacing:.04em;color:var(--pen);margin:0 0 14px;display:inline-flex;align-items:center;gap:8px}
.lbl-ghost::before{content:"";width:9px;height:9px;background:var(--pen);border-radius:50%;display:inline-block}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);margin-top:36px}
.three h3{font-size:1.15rem;margin:12px 0 6px}
.three p{font-size:.9rem;color:var(--muted);margin:0}
.ico{width:44px;height:44px;color:var(--pen);display:block}
@media(max-width:820px){.three{grid-template-columns:1fr;gap:22px}}
.reader{display:block;width:min(100%,240px);height:auto;color:var(--pen);margin:28px 0 0 auto}
/* section CTAs, FAQ */
.sec-cta{margin-top:32px}
.pill.pen:hover{background:var(--ink);border-color:var(--ink)}
:root{interpolate-size:allow-keywords}
.faqs{max-width:760px;margin:44px auto 0;text-align:left;border-top:1px solid var(--hair)}
.qa{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--dsp);font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.3;color:var(--ink);min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary svg{flex:none;width:18px;height:18px;color:var(--pen);transition:transform 200ms var(--eo)}
.qa[open] summary svg{transform:rotate(45deg)}
.qa::details-content{display:block;height:0;overflow:clip;opacity:0;transition:height 240ms var(--eo),opacity 200ms var(--eo),content-visibility 240ms allow-discrete}
.qa[open]::details-content{height:auto;opacity:1}
.qa .a p{margin:0 0 22px;color:var(--muted);font-size:1rem;line-height:1.65;max-width:62ch}
@media(prefers-reduced-motion:reduce){.qa::details-content,.qa summary svg{transition:none}}

/* GhostRank product window */
.doc.app{padding:0;max-width:540px;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.14)}
.app-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--hair);background:#F7F6F1}
.app-bar i{width:10px;height:10px;border-radius:50%;background:var(--hair);display:block}
.app-bar .app-title{font-family:var(--body);font-size:12px;color:var(--muted);margin-left:auto;margin-right:auto;letter-spacing:.01em}
.app-run{height:2px;background:var(--hair)}
.app-run i{display:block;height:100%;background:var(--pen);transform:scaleX(0);transform-origin:left center;transition:transform 1100ms linear 100ms}
.in .app-run i{transform:scaleX(1)}
.app-body{padding:22px 24px 20px}
.doc.app .score .cap b{font-weight:600;color:var(--ink)}
.flags{margin-top:18px;border-top:1px solid var(--hair)}
.flag{display:grid;grid-template-columns:5.2em minmax(0,1fr) auto;gap:6px 12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--hair);font-size:.875rem;opacity:0;transform:translateY(6px);transition:opacity 320ms var(--eo),transform 320ms var(--eo);transition-delay:calc(1150ms + var(--i,0) * 130ms)}
.in .flag{opacity:1;transform:none}
.flag .sev{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--flag);padding-top:3px}
.flag .sev.med{color:var(--muted)}
.flag b{display:block;font-weight:500;color:var(--ink);line-height:1.35}
.flag div>span{display:block;color:var(--muted);font-size:.8125rem;margin-top:3px;line-height:1.4}
.flag .fix{font-size:12px;color:var(--pen);border:1px solid var(--pen);border-radius:999px;padding:3px 9px;white-space:nowrap;line-height:1.3}
@media(max-width:480px){.flag{grid-template-columns:5.2em minmax(0,1fr)}.flag .fix{grid-column:2;justify-self:start}}
.stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.stats span{font-size:.8125rem;border:1px solid var(--hair);border-radius:999px;padding:6px 12px;color:var(--ink);line-height:1.3}
.stats span b{color:var(--pen);font-weight:600}

/* Certs band */
.faq .lbl-certs{color:var(--pen)}
.certs .lbl-certs,.hire .lbl-certs,.faq .lbl-certs{font-size:.8125rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-2);margin:0 0 16px}
.certs .fig.grad{position:absolute;left:clamp(24px,9vw,150px);bottom:48px;width:150px;height:auto;color:var(--paper);z-index:1}
.certs .fig.grad .draw{transition-delay:calc(var(--k,0) * 0ms + 600ms)}
@media(max-width:1100px){.certs .fig.grad{display:none}}
.ledger{margin:52px auto 0;max-width:1040px;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,72px);text-align:left;border-top:1px solid rgba(242,241,236,.28)}
.cred{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(242,241,236,.28)}
.cred .logo{width:100px;height:52px;background:var(--paper);border-radius:8px;display:flex;align-items:center;justify-content:center;padding:8px 10px}
.cred img{height:100%;max-height:30px;width:auto;max-width:100%;object-fit:contain;display:block}
.cred b{display:block;font-family:var(--dsp);font-weight:400;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.2;color:var(--paper)}
.cred em{display:block;font-style:normal;font-size:.8125rem;color:var(--paper-2);margin-top:4px;line-height:1.4}
.cred .yr{font-family:var(--body);font-size:.8125rem;color:var(--paper-2);letter-spacing:.04em;white-space:nowrap}
@media(max-width:820px){.ledger{grid-template-columns:1fr}}
@media(max-width:480px){.cred{grid-template-columns:76px minmax(0,1fr) auto;gap:12px;padding:18px 0}.cred .logo{width:76px;height:44px;padding:6px 8px}.cred img{max-height:26px}}
.gut.paper{color:var(--paper)}
/* Your move */
.hire h2.big{font-size:clamp(3.2rem,1.5rem + 8vw,8.5rem);line-height:.95;letter-spacing:-.02em}
.pill.xl{min-height:60px;padding:0 40px;font-size:1.05rem}
.pill .arr{width:26px;height:13px;color:currentColor}
.pill .arr path{stroke:currentColor;stroke-width:2}
.pill.xl .arr,.hero .pill .arr{animation:nudge 1.4s var(--eio) infinite alternate}
@keyframes nudge{from{transform:translateX(0)}to{transform:translateX(6px)}}
@media(hover:hover) and (pointer:fine){.pill.xl:hover .arr{animation-duration:.5s}}
@media(prefers-reduced-motion:reduce){.pill.xl .arr,.hero .pill .arr{animation:none}.mx s,.hero h1 s{background-size:240px 1em}.flag{opacity:1;transform:none;transition:none}.app-run i{transform:none;transition:none}.hl{background-size:100% 78%;transition:none}.mx em{opacity:1}}

/* footer disclaimer (owner, 9 Sep) */
body.hp footer.ft2 .ft2-disc{margin-top:14px;font-size:12px;line-height:1.55;color:var(--paper-2);max-width:270px}
body.hp footer.ft2 .ft2-disc a{color:var(--paper-2);text-decoration:underline;text-underline-offset:2px}

/* forms: say which fields matter before the browser has to refuse the submit (10 Sep 2026) */
.form label:has(+ input[required], + textarea[required])::after{content:" (required)";color:var(--muted);font-weight:400;font-size:.92em;letter-spacing:0}
.field .form label:has(+ input[required], + textarea[required])::after{color:var(--paper-2)}

/* Wide screens (10 Sep 2026): the gutters and crossings hold a 1600px band, so the loops keep their shape on a 2000px monitor instead of flattening. */
@media(min-width:1600px){
  .gut.l{left:calc(50% - 734px)}
  .gut.r{right:calc(50% - 734px)}
  .gap>svg.cross{inset:auto;top:0;bottom:0;left:calc(50% - 800px);width:1600px;height:100%}
  .gap .pen{left:calc(50% + 118px)}
  .gap.endl .pen{left:calc(50% - 118px)}
}