/* Clinical Edge flagship: chapter 01 sections, the calculator (chapter 02), chapter 03 (the expander under the hire stage, one library),
   then Membership, questions and close, the form and the footer (v7 chunk 5). Navy, gold and paper only. */

/* =====================================================================
   Chapter 01 (v7 chunk 2): #launch, the resource drawer, #qcf, #compliance.
   Each paper ground carries one navy instrument (the library slab, the certificate scanner); #qcf is navy.
   Pre-animation states are gated on .is-armed, which sections.js adds only when motion runs, so a page
   without JS, with reduced motion or paused shows the finished frame.
   ===================================================================== */

/* ---------- #launch: the proof chip (inside the question slide, css/kq.css) ---------- */
.launch{padding-bottom:128px}
.launch .h3 em{color:var(--gold-disp)}
.cred{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:30px 0 0}
.cred__who{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 14px 7px 8px;border-radius:10px;background:var(--white);border:1px solid rgba(117,88,25,.32);font:500 14px/1.25 var(--f-ui);color:var(--slate)}
.cred__who b{font-weight:600;color:var(--navy)}
.cred__seal{width:24px;height:24px;flex:none}
.cred__line{margin:0;max-width:44ch;text-wrap:pretty;font-size:15px;line-height:1.5;color:var(--slate)}

/* ---------- #launch: the 70+ library slab ---------- */
.depth{position:relative;margin-top:48px;padding:40px 52px 24px;border-radius:var(--r-panel);background:radial-gradient(1200px 640px at 6% -8%,#18427A 0%,#0E2A52 38%,#0A1E3A 78%);color:var(--on-navy);box-shadow:0 60px 120px -50px rgba(10,30,58,.7);isolation:isolate;overflow:hidden}
.depth::before{content:"";position:absolute;right:11%;top:-90px;width:1px;height:300px;background:linear-gradient(180deg,transparent,rgba(212,175,94,.5),transparent);transform:rotate(32deg);z-index:-1;pointer-events:none}
.depth :focus-visible{outline-color:var(--champ)}
.depth__head{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:20px 56px;padding-bottom:18px}
.depth__count{margin:0;display:flex;flex-direction:column;gap:14px}
.depth__num{display:flex;align-items:flex-start;font:500 clamp(96px,9vw,140px)/.8 var(--f-disp);letter-spacing:-.045em;color:var(--champ);font-variant-numeric:lining-nums tabular-nums}
.depth__n{display:inline-block;min-width:1.12em}
.depth__plus{margin:.03em 0 0 .03em;font-size:.48em;line-height:1;color:var(--gold-hi);transform-origin:30% 60%;transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.depth__unit{font:400 clamp(24px,2.3vw,32px)/1.1 var(--f-disp);color:#fff}
.depth__unit em{font-style:italic;color:var(--champ)}
.depth__chip{position:absolute;top:0;right:0}
.band--paper .depth .chip{color:var(--champ);border-color:rgba(216,190,126,.45);background:rgba(10,30,58,.4)}
.lf{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:4px}
.lf button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.03);font:500 var(--fs-ctl)/1 var(--f-ui);color:var(--on-navy-hi);cursor:pointer;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 160ms var(--ease-out)}
.lf button:active{transform:scale(.97)}
@media (hover:hover){.lf button:not([aria-pressed="true"]):hover{border-color:rgba(216,190,126,.6)}}
.lf button[aria-pressed="true"]{background:var(--champ);border-color:var(--champ);color:var(--navy)}

/* the wall: 8 columns, every tile placed (--ga); phones and tablets use --gm on 2 columns */
/* r1: rows are 86px so a two-line name plus the controlled evidence-tier label (often two lines) clear the foot */
/* pass 3 copy: the card category line was cut (the filter row and the card color name it), so the rows are 8px shorter */
/* screen map fix (pass 3): 70px rows and a tighter head bring the slab to one screen (numeral, chips and wall together) */
.wall{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(6,70px) auto;grid-auto-rows:70px;gap:8px}
.wall > *{grid-area:var(--ga)}
.stk,.cell,.wall__tail{transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out),border-color 220ms ease,background-color 220ms ease,box-shadow 260ms ease,filter 300ms ease}
.stk{position:relative;display:flex;flex-direction:column;min-width:0;padding:15px 16px 14px;border-radius:12px;background:linear-gradient(165deg,#14345F 0%,#0D2547 72%);border:1px solid rgba(216,190,126,.22)}
@media (hover:hover){.stk:hover{border-color:rgba(216,190,126,.55)}}
.stk__cat{margin:0;font:500 var(--fs-tag)/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--champ)}
.stk__name{margin:8px 0 0;font:500 21px/1.12 var(--f-disp);letter-spacing:-.01em}
.stk__name:first-child{margin-top:0}
.depth .stk__name{color:#fff}
.stk .tier{margin:9px 0 0;font:500 13.5px/1.3 var(--f-ui);letter-spacing:0;text-transform:none;white-space:normal;color:var(--on-navy);align-items:flex-start}
.stk .tier i{flex:none;margin-top:.42em} /* the tier pill sits on the first line when the controlled label wraps */
.stk__foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.stk .cset{letter-spacing:.09em;border-color:rgba(216,190,126,.5);color:var(--champ);background:rgba(216,190,126,.07)}
.stk .cset--edu{border-style:solid}
.stk__open{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 11px;border-radius:8px;border:1px solid rgba(216,190,126,.5);background:transparent;font:600 13px/1 var(--f-ui);color:var(--on-navy-hi);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color 180ms ease,color 180ms ease,transform 160ms var(--ease-out)}
.stk__open::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
@media (hover:hover){.stk__open:hover{background:var(--champ);color:var(--navy)}}
.stk__open:active{transform:scale(.97)}
/* the Quantum Cell Factors card: wide, gold-ruled, a burst of cell factors in the corner */
.stk--bio{padding:18px 22px 16px;background:linear-gradient(118deg,rgba(185,151,75,.24) 0%,rgba(185,151,75,0) 52%),linear-gradient(165deg,#14345F 0%,#0D2547 72%);border-color:rgba(212,175,94,.55)}
.stk--bio::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;border-radius:12px 12px 0 0;background:linear-gradient(90deg,var(--gold-hi),var(--champ) 55%,rgba(216,190,126,0))}
.stk--bio::after{content:"";position:absolute;right:18%;top:38%;width:4px;height:4px;border-radius:50%;background:#F1E3B8;box-shadow:16px -10px 0 -1px rgba(241,227,184,.8),34px 4px 0 0 rgba(216,190,126,.7),26px 22px 0 -1px rgba(241,227,184,.55),50px -18px 0 -1px rgba(216,190,126,.5),58px 14px 0 0 rgba(241,227,184,.45),76px -4px 0 -1px rgba(216,190,126,.35),-12px 16px 0 -1px rgba(241,227,184,.6),8px 32px 0 -1px rgba(216,190,126,.4),88px 20px 0 -1px rgba(241,227,184,.25),0 0 14px 4px rgba(212,175,94,.35);pointer-events:none}
.stk--bio .stk__name{font-size:30px;margin-top:10px}
.cell{position:relative;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid rgba(216,190,126,.12);overflow:hidden}
.cell::before{content:attr(data-k);position:absolute;left:11px;top:11px;font:500 var(--fs-code)/1 var(--f-mono);letter-spacing:.12em;color:rgba(216,190,126,.86)}
.cell::after{content:"";position:absolute;left:10px;right:34%;bottom:13px;height:3px;border-radius:2px;background:rgba(247,244,238,.14);box-shadow:0 -9px 0 rgba(247,244,238,.08)}
.wall__tail{margin:0;display:flex;align-items:center;padding:0 22px;border-radius:12px;border:1px dashed rgba(216,190,126,.42);background:rgba(216,190,126,.05);font:italic 400 21px/1.2 var(--f-disp);color:var(--champ)}
/* filters: the hits light, the rest steps back */
.wall.is-filtered > .stk:not(.is-hit),.wall.is-filtered > .cell:not(.is-hit){opacity:.3;filter:saturate(.3)}
.wall .cell.is-hit{background:rgba(212,175,94,.16);border-color:rgba(233,210,154,.65)}
.wall .cell.is-hit::before{color:#F1E3B8}
.wall .stk.is-hit{border-color:var(--champ);box-shadow:0 0 0 1px var(--champ),0 18px 40px -18px rgba(212,175,94,.45)}
/* r1: a category with no named card on the page (Cognitive): the named cards stay readable, its cells light, and the
   gold tail carries the answer */
.wall.is-filtered.is-empty > .stk{opacity:.55;filter:saturate(.6)}
.wall.is-empty .wall__tail{border-style:solid;border-color:var(--champ);background:rgba(216,190,126,.12);color:#F1E3B8}
/* the spill: tiles wait, then fill outward from the numeral in rings (--d is set per tile by distance) */
.motion .depth.is-armed:not(.is-filled) .wall > *{opacity:0;transform:translate3d(0,8px,0) scale(.98)}
.motion .depth.is-filled:not(.is-settled) .wall > *{transition-delay:var(--d,0ms)}
/* r1: keyboard focus entering the filters or the wall settles every tile at once (sections.js adds .is-quick) */
.depth.is-quick .wall > *{transition-duration:120ms;transition-delay:0ms}
.motion .depth.is-armed:not(.is-counted) .depth__plus{opacity:0;transform:scale(.6)}
.depth.is-counted .depth__plus{animation:ce-glint 760ms var(--ease-out)}
@keyframes ce-glint{0%{text-shadow:0 0 0 rgba(243,223,166,0)}30%{text-shadow:0 0 26px rgba(243,223,166,.95),0 0 2px rgba(255,248,230,.9)}100%{text-shadow:0 0 0 rgba(243,223,166,0)}}
/* screen map fix (pass 3): the note sits under the slab on the paper, so the slab itself fits one screen */
.depth__note{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--fine-paper)}

/* ---------- #launch: three classrooms ---------- */

/* ---------- The resource drawer ---------- */
.drawer{position:fixed;inset:0;z-index:70}
.drawer__scrim{position:absolute;inset:0;background:rgba(7,22,48,.64);opacity:0;transition:opacity 240ms var(--ease-out)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(520px,100%);display:flex;flex-direction:column;background:var(--paper);color:var(--slate);box-shadow:-40px 0 90px -30px rgba(7,22,48,.65);transform:translateX(104%);transition:transform 220ms var(--ease-out);outline:none}
.drawer.is-open .drawer__panel{transform:none;transition:transform 420ms var(--ease-emph)}
.drawer__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px 28px 18px;border-bottom:1px solid var(--line)}
.drawer__clinic{margin:0;font:500 var(--fs-tag)/1.2 var(--f-mono);letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--gold-ink)}
.drawer__title{margin:8px 0 0;font:500 28px/1.1 var(--f-disp);letter-spacing:-.015em;color:var(--navy)}
.drawer__close{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--white);font:600 14px/1 var(--f-ui);color:var(--navy);cursor:pointer;transition:border-color 180ms ease,transform 160ms var(--ease-out)}
.drawer__close::before{content:"";width:10px;height:10px;background:linear-gradient(45deg,transparent 44%,currentColor 44%,currentColor 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,currentColor 44%,currentColor 56%,transparent 56%)}
@media (hover:hover){.drawer__close:hover{border-color:var(--gold-line)}}
.drawer__close:active{transform:scale(.97)}
.drawer__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 28px 26px}
.drawer__meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.drawer__stamp{font:500 var(--fs-tag)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:999px;border:1px solid var(--line);color:var(--slate-2);transition:color 300ms ease,border-color 300ms ease,background-color 300ms ease}
.drawer__stamp.is-done{border-color:var(--gold-line);color:var(--gold-ink);background:rgba(185,151,75,.1)}
.parts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.psec{padding:13px 14px 12px;border-radius:12px;background:var(--white);border:1px solid var(--line);outline:none;transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out),border-color 300ms ease,box-shadow 300ms ease}
.psec h3{margin:0;font:600 14px/1.25 var(--f-ui);letter-spacing:0;color:var(--navy)}
.psec p{margin:5px 0 9px;font-size:13px;line-height:1.45;color:var(--slate)}
.psec dl{margin:0;display:grid;gap:6px}
.psec dl div{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.psec dt{color:var(--slate-2)}
.psec dd{margin:0;flex:none;text-align:right;font-weight:600;color:var(--navy)}
.psec .cset{white-space:nowrap;font-size:12.5px;letter-spacing:.06em;padding:4px 8px}
.drawer.is-building .psec:not(.is-in){opacity:0;transform:translate3d(0,8px,0)}
.drawer.is-building .psec.is-in{transition-delay:var(--d,0ms)}
.psec.is-flash{border-color:var(--gold-line);box-shadow:0 0 0 3px rgba(185,151,75,.22)}
.pupd{margin-top:16px;padding:16px 16px 14px;border-radius:12px;border:1px solid rgba(117,88,25,.3);background:rgba(185,151,75,.06);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
.drawer.is-building .pupd:not(.is-in){opacity:0;transform:translate3d(0,8px,0)}
.pupd__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0}
.pupd__head b{font:600 14px/1.2 var(--f-ui);color:var(--navy)}
.pupd__t{margin:8px 0 12px;font-size:14px;line-height:1.5;color:var(--slate)}
.drawer__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px 22px;border-top:1px solid var(--line);background:var(--paper)}
.drawer__foot p{margin:0;max-width:27ch;font-size:13px;line-height:1.45;color:var(--fine-paper)}

/* ---------- #qcf: the signal-anatomy stage ---------- */
/* overflow:clip, not hidden: hidden would break the sticky pin below */
.qcf{overflow:clip}
/* screen map fix (pass 3): desktops pin the copy and the stage on one screen for 80vh while scroll steps the four
   modes (20vh each), so each mode plays with its H2, canvas and caption in view (js/sections.js #qcf) */
@media (min-width:1081px){
  html.motion #qcf{height:calc(100vh + 80vh);padding:0}
  html.motion #qcf .qcf__grid{position:sticky;top:0;height:100vh;padding-top:var(--nav-h);align-content:center}
}
.qcf__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.qcf__copy .h2{max-width:14ch}
.qcf__copy .fine{margin-top:28px}
.qcf__link{display:inline-block;margin-top:14px;font:600 16px/1.3 var(--f-ui);color:var(--champ);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transition:color 180ms ease}
@media (hover:hover){.qcf__link:hover{color:#fff}}
.qcf__stage{position:relative;margin:0;border-radius:var(--r-panel);background:#0B2040;border:1px solid rgba(216,190,126,.22);overflow:hidden;box-shadow:0 50px 100px -40px rgba(0,0,0,.7)}
.qcf__viz{position:relative;height:min(58vh,560px);min-height:380px}
.qcf__viz canvas{position:absolute;inset:0;width:100%;height:100%}
.qcf__chip{position:absolute;top:14px;right:14px;z-index:1}
.qcf__lbl{position:absolute;top:18px;margin:0;display:grid;gap:5px;pointer-events:none;transition:opacity 400ms ease,visibility 0s}
.qcf__lbl b{font:500 21px/1.1 var(--f-disp);color:#fff}
.qcf__lbl span{text-wrap:balance;font:500 var(--fs-tag)/1.3 var(--f-mono);letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--champ)}
.qcf__lbl--c,.qcf__lbl--a{left:22px}
.qcf__lbl--b{left:calc(50% + 22px)}
.qcf__lbl--a,.qcf__lbl--b{max-width:calc(50% - 44px)} /* notes-1: the larger sublabels stay inside their half in compare mode */
.qcf__viz.is-stacked .qcf__lbl--a,.qcf__viz.is-stacked .qcf__lbl--b{max-width:calc(100% - 44px)}
.qcf__viz.is-stacked .qcf__lbl--b{left:22px;top:calc(50% + 10px)}
.qcf__viz[data-m="compare"] .qcf__lbl--c,.qcf__viz:not([data-m="compare"]) .qcf__lbl--a,.qcf__viz:not([data-m="compare"]) .qcf__lbl--b{opacity:0;visibility:hidden;transition:opacity 300ms ease,visibility 0s 300ms}
.qcf__ctrl{padding:16px 22px 18px;border-top:1px solid rgba(255,255,255,.1)}
.qcf__seg{position:relative;padding-bottom:14px}
.qcf__track{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:rgba(216,190,126,.16);overflow:hidden;transition:opacity 300ms ease}
.qcf__track i{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--champ));transform-origin:left;transform:scaleX(var(--qt,0))}
.qcf.is-manual .qcf__track,.rm .qcf__track{opacity:0}
.qcf__cap{margin:12px 0 0;min-height:3.1em;font-size:15px;line-height:1.55;color:var(--body-navy)}

/* ---------- #compliance ---------- */
/* pass 3 copy: with the shorter sub and element lines, the head joins the left column above the four elements and the
   COA spans both rows on the right, so the H2, the four elements and the certificate share one screen (1280x720 up) */
.comp__head{grid-area:head;max-width:860px;margin:0}
.comp__head .h2{max-width:20ch}
.comp__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head coa" "els coa";column-gap:56px;row-gap:40px;align-items:start}
.comp__grid > .els{grid-area:els}
.comp__grid > .coa{grid-area:coa;align-self:center}
.els{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:44px 36px}
.el{position:relative;padding-top:20px;border-top:1px solid var(--line)}
.el::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:2px;background:var(--gold)}
.el__t{margin:0;font:500 23px/1.2 var(--f-disp);letter-spacing:-.01em;color:var(--navy)}
.el__t em{font-style:italic;font-weight:400;color:var(--gold-disp)}
.el p{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--slate)}

/* the certificate scanner: a navy instrument holding the certificate */
.coa{position:relative;padding:26px 26px 22px;border-radius:var(--r-panel);background:radial-gradient(760px 420px at 100% 0%,#16407A 0%,#0D2547 52%,#0A1E3A 100%);color:var(--on-navy);box-shadow:0 50px 100px -45px rgba(10,30,58,.75)}
.coa :focus-visible{outline-color:var(--champ)}
.coa__sheet{position:relative;padding:20px 22px 22px;border-radius:10px;background:#FFFDF8;color:var(--navy);box-shadow:0 24px 44px -20px rgba(0,0,0,.6)}
.coa__top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.coa__title{margin:0;font:500 22px/1.15 var(--f-disp);color:var(--navy)}
.coa__body{display:grid;grid-template-columns:128px minmax(0,1fr);gap:24px;padding-top:18px}
.coa__left{display:grid;gap:16px;justify-items:start;align-content:start}
.coa__qr{position:relative;width:128px;aspect-ratio:1;padding:8px;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--navy);overflow:hidden;transition:border-color 400ms ease,box-shadow 400ms ease}
.coa__qr svg{width:100%;height:100%;fill:currentColor}
.coa.s-stamp .coa__qr{border-color:var(--gold-line);box-shadow:0 0 0 3px rgba(185,151,75,.2)}
.coa__blade{position:absolute;top:-35%;left:0;width:3px;height:170%;border-radius:2px;background:linear-gradient(180deg,rgba(212,175,94,0),#E9D29A 35%,#FFF6DC 50%,#E9D29A 65%,rgba(212,175,94,0));box-shadow:0 0 12px 2px rgba(212,175,94,.65);opacity:0;transform:translateX(-24px) rotate(32deg);pointer-events:none}
.coa.s-scan:not(.s-done) .coa__blade{animation:ce-blade 900ms cubic-bezier(.23,1,.32,1) both}
.coa__blade::before{content:"";position:absolute;top:0;bottom:0;right:3px;width:34px;background:linear-gradient(90deg,rgba(212,175,94,0),rgba(233,210,154,.42));pointer-events:none}
@keyframes ce-blade{0%{opacity:0;transform:translateX(-24px) rotate(32deg)}12%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(152px) rotate(32deg)}}
.coa__stamp{margin:0;white-space:nowrap;padding:7px 10px 6px;border:2px solid var(--gold-ink);border-radius:6px;font:600 var(--fs-tag)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);transform:rotate(-6deg);transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.coa__rows{margin:0;display:grid;align-content:start}
.coa__rows div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px dotted #D6CDB9;transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
.coa__rows div:first-child{padding-top:2px}
.coa__rows dt{font-size:14px;color:var(--slate-2)}
.coa__rows dd{margin:0;text-align:right;font:500 13px/1.2 var(--f-mono);color:var(--navy)}
.coa__rail{position:relative;margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px}
.coa__rlabel{margin:0;font:500 14.5px/1.3 var(--f-ui);color:var(--on-navy-hi)}
.coa__replay{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:var(--r-ctl);border:1px solid rgba(216,190,126,.45);background:transparent;font:600 13px/1 var(--f-ui);color:var(--on-navy-hi);cursor:pointer;transition:border-color 180ms ease,background-color 180ms ease,transform 160ms var(--ease-out)}
.coa__replay svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.coa__replay:hover{border-color:var(--champ);background:rgba(216,190,126,.08)}}
.coa__replay:active{transform:scale(.97)}
.coa__dots{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 5px}
.coa__dot{position:relative;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.coa__dot::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--gold-hi);border:1.5px solid var(--gold-hi);box-sizing:border-box;transition:background-color 220ms var(--ease-out),border-color 220ms ease,transform 220ms var(--ease-out),box-shadow 220ms ease}
.coa__dot:hover::before,.coa__dot.is-active::before{transform:scale(1.3);box-shadow:0 0 0 4px rgba(216,190,126,.2)}
.coa__dot:focus-visible{outline-offset:0}
.coa__pop{position:absolute;z-index:2;left:0;top:0;width:max-content;max-width:min(320px,100%);margin:0;padding:11px 13px;border-radius:10px;background:#FFFDF8;color:var(--slate);font-size:13.5px;line-height:1.45;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);transform:translateY(calc(-100% - 10px));pointer-events:auto}
.coa__pop b{color:var(--navy);font-weight:600}
.coa__pop::after{content:"";position:absolute;left:var(--ax,20px);bottom:-5px;width:10px;height:10px;margin-left:-5px;background:#FFFDF8;transform:rotate(45deg)}
/* the scan sequence (pre states only while armed) */
.motion .coa.is-armed:not(.s-rows) .coa__rows div{opacity:.14;transform:translate3d(0,6px,0)}
.motion .coa.is-armed:not(.s-stamp) .coa__stamp{opacity:0;transform:rotate(-6deg) scale(1.08)}
.motion .coa.is-armed:not(.s-dots) .coa__dot::before{background:transparent;border-color:rgba(216,190,126,.6)}
.coa.s-dots:not(.s-done) .coa__dot::before{transition-delay:calc(var(--i,0) * 60ms)}
.coa.no-tr *,.coa.no-tr *::before{transition:none!important;animation:none!important}
/* screen map fix (pass 3): on the page the scan is scrubbed by scroll, so each dot lights as its stretch is reached */
.motion .coa.is-armed.is-scrub .coa__dot.is-lit::before{background:var(--gold-hi);border-color:var(--gold-hi)}

/* one quiet row: the format toggle, then two expanders */
.comp__row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px;align-items:center;margin-top:80px}
.fmt{display:flex;align-items:center;gap:22px}
.vial{width:62px;flex:none}
.vial svg{width:100%;height:auto;overflow:visible}
.vial__cap{fill:var(--gold)}
.vial__crimp{fill:#B9B2A3}
.vial__glass{fill:rgba(255,255,255,.75)}
.vial__line{fill:none;stroke:var(--navy);stroke-width:3.5;stroke-opacity:.55}
.vial__cake{fill:#EFE7D6;stroke:rgba(10,30,58,.28);stroke-width:2.5;transform-origin:80px 220px;transition:opacity 600ms ease,transform 800ms var(--ease-out)}
.vial__liq{fill:url(#vial-sol);transition:transform 900ms var(--ease-out),opacity 500ms ease}
.vial[data-f="lyo"] .vial__liq{transform:translateY(96px);opacity:0}
.vial[data-f="sol"] .vial__cake{opacity:0;transform:scale(.6) translateY(14px)}
.vial__label{fill:var(--white);stroke:rgba(10,30,58,.22);stroke-width:2.5}
.seg--paper button{border-color:var(--line);background:var(--white);color:var(--slate)}
@media (hover:hover){.seg--paper button:not([aria-pressed="true"]):hover{border-color:var(--gold-line)}}
.seg--paper button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.fmt__cap{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--slate);text-wrap:pretty}
.xps{display:grid;border-top:1px solid var(--line)}
.xp__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 4px;border:0;border-bottom:1px solid var(--line);background:none;font:500 20px/1.25 var(--f-disp);color:var(--navy);text-align:left;cursor:pointer;transition:color 180ms ease}
.xp__btn::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--gold-ink),var(--gold-ink)) center/14px 2px no-repeat,linear-gradient(var(--gold-ink),var(--gold-ink)) center/2px 14px no-repeat;transition:transform 260ms var(--ease-out)}
.xp__btn[aria-expanded="true"]::after{transform:rotate(45deg)}
@media (hover:hover){.xp__btn:hover{color:var(--gold-ink)}}
.xp__body{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows 320ms var(--ease-out),opacity 320ms ease,visibility 0s 320ms}
.xp__body.is-open{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows 320ms var(--ease-out),opacity 320ms ease,visibility 0s}
.xp__in{min-height:0;overflow:hidden}
html:not(.js) #xp-resp-body{grid-template-rows:1fr;opacity:1;visibility:visible}
html:not(.js) #xp-tests,html:not(.js) #xp-tests-body{display:none}
/* the 15-test explorer */
.tp{padding:36px 0 8px}
.tp__h{margin:0 0 20px;font:500 clamp(24px,2.2vw,30px)/1.15 var(--f-disp);color:var(--navy)}
.tp__body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:stretch}
.tp__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-content:start}
.tp__grid button{display:grid;gap:4px;align-content:start;min-height:72px;padding:11px 12px 12px;border-radius:12px;border:1px solid var(--line);background:var(--white);font:inherit;text-align:left;color:var(--slate);cursor:pointer;transition:border-color 200ms ease,background-color 200ms ease,transform 160ms var(--ease-out)}
.tp__grid button:active{transform:scale(.97)}
@media (hover:hover){.tp__grid button:not([aria-selected="true"]):hover{border-color:var(--gold-line)}}
.tp__grid b{font:600 13.5px/1.2 var(--f-ui);color:var(--navy)}
.tp__grid small{font-size:12.5px;line-height:1.3;color:var(--slate-2)}
.tp__grid button[aria-selected="true"]{background:var(--navy);border-color:var(--navy)}
.tp__grid button[aria-selected="true"] b{color:#fff}
.tp__grid button[aria-selected="true"] small{color:var(--on-navy)}
.tp__panel{padding:24px 24px 22px;border-radius:var(--r-panel);background:var(--navy);color:var(--on-navy);min-height:300px}
.tp__tag{display:inline-block;margin:0;padding:5px 11px;border-radius:999px;border:1px solid rgba(216,190,126,.5);font:500 var(--fs-tag)/1.2 var(--f-mono);letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--champ)}
.tp__pt{margin:14px 0 0;font:500 clamp(26px,2.4vw,34px)/1.05 var(--f-disp);letter-spacing:-.015em;color:#fff}
.tp__kv{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.tp__kv h5{margin:0;font:500 var(--fs-tag)/1.2 var(--f-mono);letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--champ)}
.tp__kv p{margin:7px 0 0;font-size:14.5px;line-height:1.55;color:var(--on-navy-hi)}
.tp-fade{animation:ce-tp 320ms var(--ease-out) both}
@keyframes ce-tp{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
.resp{grid-template-columns:1fr 1fr;gap:12px 48px;padding:30px 0 8px;margin:0}
.resp li{color:var(--slate)}
.comp__close{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:56px}
.comp__close .fine{margin:0;max-width:56ch}

/* ---------- Chapter 01 responsive ---------- */
@media (max-width:1180px){
  .depth{padding:36px 40px 22px}
  .stk__name{font-size:19px}
  .stk .cset{font-size:12px;letter-spacing:.06em;padding:5px 8px}
}
/* screen map fix (pass 3): short desktops (1280x720): the slab still fits one screen */
@media (min-width:1081px) and (max-height:820px){
  .depth{margin-top:32px;padding:30px 40px 18px}
  .depth__head{padding-bottom:16px}
  .depth__num{font-size:clamp(88px,8vw,112px)}
  .wall{grid-template-rows:repeat(6,56px) auto;grid-auto-rows:56px;gap:6px}
  .stk{padding:10px 12px 9px}
  .stk__name{font-size:18px}
  .stk .tier{margin-top:5px;font-size:12.5px}
  .stk__foot{padding-top:6px}
  .stk__open{min-height:28px}
  .stk--bio{padding:12px 18px 10px}
  .stk--bio .stk__name{font-size:26px;margin-top:6px}
}
@media (max-width:1080px){
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(92px,auto);gap:8px}
  .wall > *{grid-area:var(--gm)}
  .wall > .teach{grid-area:13/1/14/3}
  .wall > .cell:not(.cell--m){display:none}
  .qcf__grid,.comp__grid,.comp__row{grid-template-columns:1fr}
  .qcf__grid{gap:36px}
  .qcf__stage{order:-1}
  /* screen map fix (pass 3): the certificate follows its H2, so the head and the proof share one screen; the four
     elements come after */
  .comp__grid{grid-template-areas:"head" "coa" "els";gap:48px}
  .comp__row{gap:28px}
  .tp__body{grid-template-columns:1fr}
}
@media (max-width:760px){
  .launch{padding-bottom:88px}
  .cred{margin-top:22px;gap:10px}
  .cred__who{font-size:13px}
  .cred__line{font-size:14px}
  .depth{margin-top:36px;padding:30px 16px 18px;border-radius:14px}
  .depth__head{grid-template-columns:1fr;gap:22px;padding-bottom:22px}
  .depth__num{font-size:104px}
  .depth__unit{font-size:24px}
  .lf{gap:6px}
  .lf button{min-height:38px;padding:0 13px;font-size:var(--fs-ctl)}
}
/* r1: phones: the eight filters are one scrolling row, so the slab opens on the number and the cards */
@media (max-width:640px){
  #lf{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:3px 16px 6px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
  #lf::-webkit-scrollbar{display:none}
  #lf button{scroll-snap-align:start;scroll-margin-left:16px;flex:none}
  #lf::after{content:"";flex:0 0 28px}
}
@media (max-width:760px){
  .wall{grid-auto-rows:minmax(86px,auto);gap:6px}
  .stk{padding:12px 12px 11px}
  .stk__cat{font-size:12px;letter-spacing:.04em;line-height:1.3;text-wrap:balance}
  .stk .cset{font-size:12px;letter-spacing:.05em;padding:4px 7px}
  .stk__name{font-size:18px;margin-top:6px}
  .stk .tier{font-size:12.5px;margin-top:7px}
  .stk__foot{flex-direction:column;align-items:flex-start;gap:7px;padding-top:8px}
  .stk--bio{padding:14px 14px 12px}
  .stk--bio .stk__name{font-size:24px}
  .stk--bio .stk__foot{flex-direction:row;flex-wrap:wrap;align-items:center}
  .stk--bio::after{right:10%;top:30%}
  .wall__tail{padding:0 16px;font-size:18px}
  .depth__note{margin-top:12px;font-size:12.5px}
  .drawer__panel{top:auto;left:0;width:100%;height:88vh;height:88dvh;border-radius:18px 18px 0 0;transform:translateY(104%)}
  .drawer__head{padding:20px 18px 14px}
  .drawer__title{font-size:23px}
  .drawer__scroll{padding:14px 18px 20px}
  .parts{grid-template-columns:1fr}
  .drawer__foot{padding:14px 18px calc(16px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch;gap:12px}
  .drawer__foot p{max-width:none}
  .drawer__foot .btn{width:100%}
  /* screen map fix (pass 3): phones read the H2, then the stage, then the fine print and link; with motion the block
     pins for 80svh so each mode plays with the H2 and its caption on screen */
  .qcf__viz{height:30svh;min-height:230px;max-height:300px}
  .qcf__copy{display:contents}
  .qcf__copy > .pain,.qcf__copy > .h2,.qcf__copy > .sub{order:0}
  .qcf__grid > .qcf__stage{order:1}
  .qcf__copy > .fine,.qcf__copy > .qcf__link{order:2}
  .qcf__grid{display:flex;flex-direction:column;gap:18px}
  .qcf__grid > .qcf__stage,.qcf__copy > .pain,.qcf__copy > .h2,.qcf__copy > .sub,.qcf__copy > .fine{margin:0}
  .qcf__copy > .qcf__link{align-self:flex-start;margin:-4px 0 0}
  html.motion #qcf{height:calc(100svh + 80svh);padding-top:0;padding-bottom:0}
  html.motion #qcf .qcf__grid{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));justify-content:center;gap:12px}
  .qcf__lbl b{font-size:18px}
  .qcf__lbl--c,.qcf__lbl--a,.qcf__lbl--b{left:16px}
  .qcf__viz.is-stacked .qcf__lbl--b{left:16px}
  .qcf__ctrl{padding:14px 14px 16px}
  .qcf__seg button{padding:9px 12px;font-size:var(--fs-ctl)}
  .qcf__cap{font-size:14.5px}
  #compliance{padding-bottom:40px} /* screen map fix (pass 3): a shorter tail before the chapter 02 question */
  .comp__grid{row-gap:24px}
  .comp__grid > .els{margin-top:16px}
  .els{grid-template-columns:1fr;gap:28px}
  .el__t{font-size:21px}
  .el p{font-size:15.5px}
  .coa{padding:16px 14px 16px;border-radius:14px}
  .coa__sheet{padding:16px 14px 16px}
  .coa__title{font-size:19px}
  .coa__body{grid-template-columns:104px minmax(0,1fr);gap:14px}
  .coa__qr{width:104px;padding:6px}
  .coa__stamp{font-size:12px;padding:6px 6px 5px;letter-spacing:.06em}
  .coa__rows div{flex-direction:column;align-items:flex-start;gap:3px;padding:7px 0}
  .coa__rows dt{font-size:13px}
  .coa__rows dd{text-align:left;font-size:13px}
  .coa__rail{grid-template-columns:1fr;margin-top:16px}
  .coa__replay{justify-self:start;grid-row:3}
  .coa__dots{display:grid;grid-template-columns:repeat(8,26px);justify-content:space-between;gap:6px 0}
  .comp__row{margin-top:56px}
  .xp__btn{font-size:18px;min-height:58px}
  .tp{padding-top:26px}
  .tp__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .tp__grid button{min-height:0;padding:10px 9px}
  .tp__grid small{display:none}
  .tp__grid b{font-size:12.5px}
  .tp__panel{padding:20px 16px;min-height:0}
  .tp__kv{grid-template-columns:1fr;gap:12px}
  .resp{grid-template-columns:1fr}
  .comp__close{margin-top:40px}
  .comp__close .btn{width:100%}
}
/* short phones (700px tall or less): the pinned QCF screen drops the sub (the H2 says it) and a little canvas, so it
   still fits under the nav (screen map fixes, pass 3) */
@media (max-width:760px) and (max-height:700px){
  html.motion #qcf .qcf__copy > .sub{display:none}
  .qcf__viz{height:26svh;min-height:170px}
}

/* ---------------- #app: the revenue calculator, one round gauge, three inputs (v7 pass 3) ----------------
   One instrument, one screen. The ring is the hero: one big monthly figure in whole thousands, the year under it, one
   quiet split line, the Estimate chip in the ring's opening. Three inputs a clinic owner reads at a glance: patients on
   a peptide program, the monthly program fee (the Clinical, Premium and Concierge product lines are presets that glide
   the fee), and cash treatments a month at a stated average. Desktop: gauge left, inputs right. Phone: gauge on top,
   inputs under it. Head, gauge, inputs and fine print share one screen at 1440x900, 1280x720 and 390x844.

   The ring: 260 degrees, open at the bottom. The filled sweep is the monthly total on a soft scale
   (total / (total + $9K)), so it answers every input and never pins; inside the sweep the split is exact: gold is the
   peptide program, ivory the cash treatments. Ticks light as the head passes. The stream from the phone lands on the
   ring's start point (#rg-crown) and the arc sweeps from there. */
.calc{width:min(var(--wrap),100% - 2 * var(--gut));margin:clamp(110px,14vh,150px) auto 0;padding-left:var(--app-l,0px);scroll-margin-top:calc(var(--nav-h) + 16px)}
.calc__head{display:flex;flex-direction:column;gap:6px;margin:0 0 clamp(18px,3vh,30px)}
.calc__head .calc__title{margin:0;font:500 clamp(28px,3vw,42px)/1.1 var(--f-disp);letter-spacing:-.015em;color:#fff;text-wrap:balance} /* design-04: the gauge scene's real headline, at the chapter H2 scale */
.calc__head .calc__title em{font-style:italic;font-weight:400;color:var(--champ)}

.rg{--rg-ring:clamp(300px,min(32vw,50vh),440px);--rg-fig:clamp(62px,calc(var(--rg-ring) * .23),100px);
  --k1a:var(--gold);--k1b:var(--gold-hi);
  position:relative;display:grid;grid-template-columns:calc(var(--rg-ring) + 32px) minmax(0,500px);grid-template-areas:"out in";
  justify-content:center;align-items:center;gap:0 clamp(44px,6vw,104px);margin:0;
  padding:clamp(24px,4.2vh,46px) clamp(26px,3.6vw,56px);border-radius:24px;border:1px solid var(--line-navy);
  background:linear-gradient(180deg,rgba(7,22,48,.46),rgba(7,22,48,.88) 72%,#071630);
  box-shadow:0 30px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05)}
.rg::after{content:"";position:absolute;inset:6px;border-radius:19px;border:1px solid rgba(216,190,126,.1);pointer-events:none}

/* ---- the gauge ---- */
.rg__out{grid-area:out;position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.rg__out::before{content:"";position:absolute;left:50%;top:40%;width:128%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(22,64,122,.72),rgba(22,64,122,0));transform:translate(-50%,-50%);pointer-events:none}
.rg__gauge{position:relative;width:var(--rg-ring);aspect-ratio:320/262;flex:none}
.rg__gauge::before{content:"";position:absolute;left:50%;top:59.5%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(212,175,94,.26),rgba(212,175,94,0));transform:translate(-50%,-50%) scale(.85);opacity:0;pointer-events:none}
.rg__gauge svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* the stream from the phone lands here, on the ring's start point (field.js relays [data-dot-from="#phone"] onto it) */
.rg__crown{position:absolute;left:19.36%;top:90.95%;width:2px;height:2px;margin:-1px 0 0 -1px;pointer-events:none}
.rg__crown::before{content:"";position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,205,.95),rgba(243,223,166,.35) 45%,rgba(243,223,166,0));opacity:0;transform:scale(.4)}
.rg__track,.rg__arc{fill:none;stroke-width:15}
.rg__track{stroke:rgba(255,255,255,.08);stroke-linecap:round}
.rg__arc--prog{stroke:url(#rg-gold);stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(212,175,94,.45));transition:filter 300ms ease}
.rg__ticks line{stroke:rgba(216,190,126,.2);stroke-width:1.3;stroke-linecap:round;transition:stroke 240ms ease}
.rg__ticks line.on{stroke:rgba(243,223,166,.95);stroke-width:1.7}
.rg__head{fill:#FFF7E2;filter:drop-shadow(0 0 6px rgba(243,223,166,.95))}
/* the one big figure, inside the ring */
.rg__total{position:absolute;left:12%;right:12%;top:58%;z-index:1;margin:0;display:flex;flex-direction:column;align-items:center;gap:calc(var(--rg-ring) * .02);text-align:center;transform:translateY(-50%);pointer-events:none}
.rg__about,.rg__per{font:500 clamp(14px,calc(var(--rg-ring) * .045),18px)/1 var(--f-ui);color:var(--on-navy-hi)}
.rg__total b{display:block;font:500 var(--rg-fig)/.9 var(--f-disp);letter-spacing:-.03em;color:#fff;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.rg__total b[data-len="5"]{font-size:calc(var(--rg-fig) * .86)}
.rg__total b[data-len="6"],.rg__total b[data-len="7"]{font-size:calc(var(--rg-fig) * .7)}
.rg.is-under .rg__total b{font-size:calc(var(--rg-fig) * .5);letter-spacing:-.01em}
/* the Estimate chip is the gauge's name plate, in the ring's opening */
.rg__chip{position:absolute;left:50%;top:90.95%;z-index:1;transform:translate(-50%,-50%);gap:8px;padding:7px 13px 7px 11px;font-size:14px;border-color:rgba(216,190,126,.62);background:rgba(7,22,48,.92);box-shadow:0 6px 18px rgba(0,0,0,.3)}


/* ---- the three inputs ---- */
.rg__in{grid-area:in;display:flex;flex-direction:column;gap:clamp(20px,3.4vh,32px);min-width:0}
.rg__cap{display:flex;align-items:center;gap:10px;margin:0 0 -4px;font:500 var(--fs-tag)/1 var(--f-mono);letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--champ)}
.rg__cap::before{content:"";flex:none;width:2px;height:12px;border-radius:1px;background:currentColor;transform:rotate(32deg)}
.rg__row{--ka:var(--k1a);--kb:var(--k1b);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 14px}
.rg__row label{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-width:0;font:500 16px/1.25 var(--f-ui);color:var(--on-navy-hi)}
.rg__at{font-size:14px;font-weight:400;color:var(--fine-navy);white-space:nowrap}
.rg__row output{min-width:4ch;text-align:right;font:600 18px/1 var(--f-mono);color:var(--champ);font-variant-numeric:tabular-nums}
.rg__row input{grid-column:1/-1}

/* big, touch-friendly sliders: a 36px hit row, an 8px track filled in the input's key color, a 28px thumb */
.rg input[type=range]{display:block;width:100%;height:36px;margin:0;background:transparent}
.rg input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--ka) 0,var(--kb) var(--fill,0%),rgba(255,255,255,.13) var(--fill,0%))}
.rg input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#FFF5DC,var(--champ) 72%);border:4px solid var(--navy);box-shadow:0 0 0 1.5px var(--kb),0 6px 14px rgba(0,0,0,.45);transition:transform 160ms var(--ease-out),box-shadow 200ms ease}
.rg input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 0 0 1.5px var(--kb),0 0 0 9px rgba(216,190,126,.16),0 6px 14px rgba(0,0,0,.45)}
.rg input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:rgba(255,255,255,.13)}
.rg input[type=range]::-moz-range-progress{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--ka),var(--kb))}
.rg input[type=range]::-moz-range-thumb{box-sizing:border-box;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#FFF5DC,var(--champ) 72%);border:4px solid var(--navy);box-shadow:0 0 0 1.5px var(--kb),0 6px 14px rgba(0,0,0,.45)}
.rg input[type=range]:focus-visible{outline:2px solid var(--champ);outline-offset:3px;border-radius:12px}

.rg__fine{margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--fine-navy);text-wrap:pretty}

/* the input a visitor just moved: its arc and its split figure glow for a beat */
.rg[data-hot="prog"] .rg__arc--prog{filter:drop-shadow(0 0 14px rgba(243,223,166,.95))}

/* motion: before the stream lands the ring is empty and the figures wait; on landing the start point flares, the arc
   sweeps and the figures count up. No JS, reduced motion, Pause motion and the static fallback never get .is-armed. */
.rg.is-armed .rg__total{opacity:0;transition:opacity 360ms var(--ease-out)}
.rg.is-armed.is-live .rg__total{opacity:1}
.rg.is-armed .rg__head{opacity:0;transition:opacity 240ms ease}
.rg.is-armed.is-live .rg__head{opacity:1}
.rg.is-hit .rg__crown::before{animation:rgSpark 900ms var(--ease-out)}
.rg.is-hit .rg__gauge::before{animation:rgGlow 1600ms var(--ease-out) 200ms}
@keyframes rgSpark{0%{opacity:0;transform:scale(.4)}22%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@keyframes rgGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
.rm .rg__arc,.rm .rg__ticks line{transition:none}

/* short desktop screens (1280x720 and similar): one notch tighter */
@media (min-width:761px) and (max-height:800px){
  .calc__head .calc__title{font-size:clamp(30px,2.7vw,36px)}
  .rg__in{gap:clamp(16px,2.8vh,24px)}
}
/* tablets: same two columns, a smaller ring */
@media (min-width:761px) and (max-width:959px){
  .rg{--rg-ring:clamp(240px,34vw,300px);gap:0 32px;padding:28px 24px}
}

/* phones: the gauge on top, the three inputs under it */
@media (max-width:760px){
  .calc{padding-left:0;margin-top:88px}
  .calc__head{gap:4px;margin-bottom:14px}
  .calc__head .calc__title{font-size:28px;line-height:1.1}
  .rg{--rg-ring:min(56vw,220px);--rg-fig:52px;grid-template-columns:minmax(0,1fr);grid-template-areas:"out" "in";gap:0;padding:16px 16px 16px;border-radius:20px}
  .rg::after{inset:5px;border-radius:15px}
  .rg__out{padding-bottom:14px}
  .rg__out::before{top:46%;width:118%}
  .rg__about,.rg__per{font-size:14px}
  .rg__chip{gap:7px;padding:6px 11px 6px 10px;font-size:13px}
  .rg__crown::before{width:36px;height:36px;margin:-18px 0 0 -18px}
  .rg__in{gap:13px;padding-top:15px;border-top:1px solid var(--glass-line)}
  .rg__cap{margin:0 0 -3px}
  .rg__row{row-gap:6px;column-gap:10px}
  .rg__row label{gap:3px 8px;font-size:15px}
  .rg__at{font-size:12.5px}
  .rg__row output{font-size:16.5px}
  .rg input[type=range]{height:32px}
  .rg__fine{margin:0;font-size:12.5px;line-height:1.4}
}
/* short phones (390x664 Safari with toolbars, 360x740 and similar): a smaller ring and one notch tighter */
@media (max-width:760px) and (max-height:780px){
  .calc__head{margin-bottom:12px}
  .calc__head .calc__title{font-size:26px}
  .rg{--rg-ring:min(46vw,184px);--rg-fig:44px;padding:14px}
  .rg__out{padding-bottom:11px}
  .rg__in{gap:9px;padding-top:13px}
  .rg input[type=range]{height:30px}
}

/* the close of chapter 02 */
.app__close{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:88px} /* notes-1: the stack's HUD rule is the divider now */
.app__outcome{margin:0;font:500 clamp(28px,3vw,42px)/1.1 var(--f-disp);letter-spacing:-.015em;color:#fff;text-wrap:balance}
.app__outcome em{font-style:italic;font-weight:400;color:var(--champ)}
.app__offer{flex:1 1 520px;max-width:760px}
.app__offer-sub{margin:12px 0 0;font:400 18px/1.5 var(--f-ui);color:var(--body-navy)}

@media (max-width:760px){
  .app__close{flex-direction:column;align-items:stretch;margin-top:64px}
  .app__offer{flex:none}
  .app__offer-sub{font-size:16px}
  .app__close .btn{width:100%}
}

/* The guide band (#path) and its plan were removed in v7 chunk 1. */

/* =====================================================================
   Chapter 03 (v7 chunk 4): #agents (its hire stage is in css/agents.css, pass 3) and #connected (one library, the reunion).
   Pre-animation states are gated on html.motion plus a class the scripts add (.is-armed), so a page without JS,
   with reduced motion or paused shows the finished frame.
   ===================================================================== */

/* ---------- #agents ----------
   The hire stage lives in css/agents.css (pass 3). Here: the "Also included" expander under it. */
/* screen map fix (pass 3): a tighter foot, so "Also included" is not left alone in navy before One library */
.agents{padding-bottom:48px}

/* the "Also included" expander */
.agents__foot{display:grid;gap:26px;margin-top:40px}
/* The "What this means for your clinic" stacks (.gain) were cut in pass 3 (COPY-V7-3): one idea per screen. */
.incl{border-top:1px solid var(--glass-line);border-bottom:1px solid var(--glass-line)}
.incl summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:8px 0;cursor:pointer;list-style:none;font:600 15.5px/1.35 var(--f-ui);color:#fff}
.incl summary::-webkit-details-marker{display:none}
.incl summary i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid rgba(216,190,126,.5)}
.incl summary i::before,.incl summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;border-radius:1px;background:var(--champ);transition:transform 260ms var(--ease-out)}
.incl summary i::after{transform:rotate(90deg)}
.incl[open] summary i::after{transform:rotate(0deg)}
@media (hover:hover){.incl summary:hover i{border-color:var(--champ)}}
.incl__body{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;padding:2px 0 24px}
.incl__body p{margin:0;font-size:15px;line-height:1.55;color:var(--body-navy)}
.incl__body b{font-weight:600;color:#fff}
html.motion .incl[open] .incl__body{animation:inclIn 360ms var(--ease-out)}
@keyframes inclIn{from{opacity:0;transform:translate3d(0,-6px,0)}}

/* ---------- #connected: one library under everything (the deepest navy) ---------- */
.band--navy.loop{background:radial-gradient(760px 520px at 24% 64%,rgba(18,52,95,.5),rgba(7,22,48,0) 70%),linear-gradient(180deg,var(--navy) 0,var(--navy-deep) 260px)}
html.is-field .band--navy.loop{background:transparent}
html.is-field .band--navy.loop::before{background:radial-gradient(760px 520px at 24% 64%,rgba(18,52,95,.5),rgba(7,22,48,0) 70%),linear-gradient(180deg,var(--navy) 0,var(--navy-deep) 260px)}
.band--navy.loop{padding-top:72px}
.loop__head{max-width:780px}
.loop__head .sub{max-width:56ch}
/* screen map fix (pass 3): the map follows the head closely (24px) so the H2 and the whole map share one screen */
.loop__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:start;margin-top:24px}
.loop__head .loop__status{margin-top:16px}

/* the diagram: three nodes over one core. The field's particles form the pillar shapes inside the rings;
   the line-art glyphs stand in when the field is off. */
.loop__map{position:relative;margin:0;width:100%;max-width:520px;aspect-ratio:400/360;justify-self:center}
.loop__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.loop__svg path{fill:none;stroke-linecap:round}
.loop__base path{stroke:rgba(216,190,126,.24);stroke-width:1}
.loop__base path:not([data-l]){stroke-dasharray:2 6}
.loop__draw path{stroke:var(--champ);stroke-width:1.6;stroke-dasharray:1 1;stroke-dashoffset:0}
.loop__run path{stroke:#FFF1CC;stroke-width:3;stroke-dasharray:.12 2;stroke-dashoffset:.12;opacity:0}
html.motion .loop.is-armed .loop__draw path{stroke-dashoffset:1}
html.motion .loop.is-armed.is-joined .loop__draw path{stroke-dashoffset:0;transition:stroke-dashoffset 780ms var(--ease-out)}
html.motion .loop.is-armed.is-joined .loop__draw path[data-l="1"]{transition-delay:120ms}
html.motion .loop.is-armed.is-joined .loop__draw path[data-l="2"]{transition-delay:240ms}
.lnode{--ls:90px;position:absolute;left:var(--x);top:var(--y);width:var(--ls);height:var(--ls);transform:translate(-50%,-50%);margin:0;padding:0;border:0;border-radius:50%;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lnode--core{--ls:110px;cursor:default}
.lnode__ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(216,190,126,.6);background:radial-gradient(circle,rgba(216,190,126,.1) 0%,rgba(216,190,126,0) 66%);transition:border-color 300ms ease,box-shadow 400ms var(--ease-out),opacity 500ms ease}
.lnode--core .lnode__ring{border-style:dashed;background:radial-gradient(circle,rgba(216,190,126,.24),rgba(216,190,126,0) 64%);box-shadow:0 0 50px rgba(216,190,126,.18)}
.lnode.is-on .lnode__ring{border-color:var(--champ);box-shadow:0 0 0 5px rgba(216,190,126,.12),0 0 30px rgba(216,190,126,.3)}
@media (hover:hover){button.lnode:hover .lnode__ring{border-color:var(--champ);box-shadow:0 0 0 5px rgba(216,190,126,.12),0 0 30px rgba(216,190,126,.3)}}
.lnode:focus-visible{outline:none}
.lnode:focus-visible .lnode__ring{outline:2px solid var(--champ);outline-offset:5px}
.lnode__glyph{position:absolute;left:50%;top:50%;width:64%;height:64%;transform:translate(-50%,-50%);fill:none;stroke:var(--champ);stroke-width:1.4;stroke-linecap:round;overflow:visible}
.lnode__glyph .f{fill:var(--champ);stroke:none}
html.is-field .lnode__glyph{opacity:0}
.lnode__mark{position:absolute;left:50%;top:50%;width:38%;height:38%;transform:translate(-50%,-50%)}
.lnode__lbl{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;font:600 15px/1.2 var(--f-ui);color:#fff}
.lnode--a .lnode__lbl{top:auto;bottom:calc(100% + 10px)}
.lnode__n{font:var(--fw-num) 14px/1 var(--f-mono);letter-spacing:var(--ls-num);color:var(--champ)}
.lnode--core .lnode__lbl{top:calc(100% + 8px);font:italic 400 20px/1.2 var(--f-disp);color:var(--champ)}
/* before the reunion (motion only) the rings wait at half strength */
html.motion .loop.is-armed:not(.is-joined) .lnode__ring{opacity:.5}
/* design-r1-06: at 1100px and up the reunion takes the larger column; rings and shapes grow (field.js sizes the
   particle shapes from the ring width) */
@media (min-width:1100px){
  .loop__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 48px}
  /* the map's height is capped to the screen left under the head (about 330px with the nav), so head and map fit */
  .loop__map{max-width:min(680px,calc((100vh - 330px) * 400 / 360))}
  .lnode{--ls:140px}
  .lnode--core{--ls:168px}
  .lnode__lbl{font-size:16px}
  .lnode--core .lnode__lbl{font-size:22px}
}
@media (min-width:1100px) and (max-height:820px){
  .lnode{--ls:112px}
  .lnode--core{--ls:136px}
  .lnode__lbl{font-size:15px}
  .lnode--core .lnode__lbl{font-size:20px}
}

/* the demo: three tabs, one panel visible */
.loop__demo{position:relative;border-radius:var(--r-panel);background:linear-gradient(180deg,#0D2547,#0A1E3A);border:1px solid var(--line-navy);box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden}
.loop__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:16px 20px;border-bottom:1px solid var(--glass-line)}
.loop__tabs{grid-column:auto}
.loop__tabs button{min-height:38px}
.loop__tabs button[aria-selected="true"]{background:var(--champ);color:var(--navy);border-color:var(--champ)}
.lp{padding:18px 20px 22px}
.lp__intro{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--body-navy)}
.lp__fine{margin:14px 0 0;font-size:13px;line-height:1.45;color:var(--fine-navy)}
.lp__ctrl{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.lp__lbl{display:block;font-size:var(--fs-lbl);font-weight:600;color:var(--on-navy-hi)}
.ask{border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--glass-line);padding:12px}
.ask__log{display:flex;flex-direction:column;gap:9px;max-height:min(420px,56vh);overflow-y:auto;padding-right:4px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--marine) transparent}
/* the replayed answer keeps its height while it types, so the chips below never jump */
.amsg.is-replay{position:relative;color:transparent}
.amsg.is-replay > *{visibility:hidden}
.amsg.is-replay.typing::after{position:absolute;left:12px;top:14px}
.amsg--bot.is-new{animation:ansIn 380ms var(--ease-out)}
@keyframes ansIn{from{opacity:.4}to{opacity:1}}
.amsg.is-new .cite span{animation:citeIn 420ms var(--ease-out) both}
.amsg.is-new .cite span:nth-child(2){animation-delay:70ms}
.amsg.is-new .cite span:nth-child(3){animation-delay:140ms}
@keyframes citeIn{from{opacity:0;transform:translate3d(0,4px,0)}to{opacity:1;transform:none}}
.amsg{max-width:92%;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.5}
.amsg--bot{background:rgba(255,255,255,.07);color:var(--on-navy-hi);border-bottom-left-radius:4px;align-self:flex-start}
.amsg--me{background:var(--champ);color:var(--navy);border-bottom-right-radius:4px;align-self:flex-end}
.amsg--refuse{border:1px dashed rgba(216,190,126,.6);background:rgba(216,190,126,.06)}
.amsg.typing::after{content:"";display:inline-block;width:26px;height:8px;background:radial-gradient(circle,var(--champ) 2px,transparent 2.5px) 0 50%/9px 8px repeat-x;animation:typing 900ms steps(3) infinite}
@keyframes typing{from{width:0}to{width:27px}}
.amsg ul{margin:8px 0 0;padding:0 0 0 18px}
.amsg li{margin:3px 0}
.amsg .cite{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.amsg .cite span{font:500 12.5px/1 var(--f-ui);padding:6px 9px;border-radius:6px;border:1px solid var(--line-navy);color:var(--champ)}
.ask__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.ask__chips button{font:500 13px/1.3 var(--f-ui);text-align:left;padding:8px 11px;border-radius:10px;border:1px solid var(--glass-line);background:transparent;color:var(--on-navy-hi);cursor:pointer;transition:border-color 180ms ease,background-color 180ms ease}
@media (hover:hover){.ask__chips button:not(:disabled):hover{border-color:var(--champ);background:rgba(216,190,126,.08)}}
.ask__chips button:disabled{opacity:.5;cursor:default}
.ask__form{display:flex;gap:8px;margin-top:10px}
.ask__form input{flex:1;min-width:0;min-height:40px;padding:0 12px;border-radius:var(--r-ctl);border:1px solid rgba(216,190,126,.35);background:rgba(10,30,58,.6);color:var(--on-navy-hi);font:500 14px/1.2 var(--f-ui)}
.ask__form input::placeholder{color:var(--fine-navy)}
.ask__form input:focus-visible{outline:2px solid var(--champ);outline-offset:1px;border-radius:var(--r-ctl)}
.queue{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.queue li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 13px;border-radius:10px;border:1px solid var(--glass-line);background:rgba(255,255,255,.03);transition:opacity 360ms var(--ease-out),transform 460ms var(--ease-out),border-color 300ms ease}
html.motion .queue.is-armed li{opacity:.35;transform:translate3d(0,6px,0)}
html.motion .queue.is-armed li.is-in{opacity:1;transform:none}
.queue li > i{width:10px;height:10px;border-radius:50%;border:1px solid var(--champ)}
.queue li.is-ok > i,.queue li.queue__ev > i{background:var(--champ)}
.queue li.is-ok{border-color:var(--line-navy)}
.queue b{display:block;color:#fff;font-size:14px;font-weight:600}
.queue div span{display:block;margin-top:2px;color:var(--body-navy);font-size:13px;line-height:1.4}
.queue em{font:500 12.5px/1.25 var(--f-ui);font-style:normal;color:var(--fine-navy);text-align:right;max-width:132px}
.queue li.is-ok em{color:var(--champ)}
.loop__demo select{width:100%;min-height:42px;padding:0 12px;border-radius:var(--r-ctl);border:1px solid rgba(216,190,126,.35);background:rgba(10,30,58,.6);color:var(--on-navy-hi);font:500 14px/1.2 var(--f-ui);margin-top:6px}
.loop__demo select:focus-visible{outline:2px solid var(--champ);outline-offset:1px}
.mk{list-style:none;margin:12px 0;padding:0;display:grid;gap:7px}
.mk li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13.5px;color:var(--body-navy);transition:opacity 300ms ease}
html.motion .mk.is-armed li{opacity:.4}
html.motion .mk.is-armed li.is-in{opacity:1}
.mk li > i{width:9px;height:9px;border-radius:50%;border:1px solid var(--champ)}
.mk li.is-in > i{background:var(--champ)}
.mk__v{font:500 13px/1.25 var(--f-ui);color:var(--champ);text-align:right;max-width:58%}
/* the clinician-set pill was drawn for paper; on navy it takes the champagne ink */
.loop .cset{color:var(--champ);border-color:rgba(216,190,126,.55);background:rgba(216,190,126,.08)}
.post--mk p{margin:0;color:var(--on-navy-hi);font-size:14px;line-height:1.5;min-height:4.5em}
.post--mk.is-ok{border-color:var(--champ)}

/* the close of chapter 03 */
.loop__close{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:72px;padding-top:34px;border-top:1px solid var(--glass-line)}
.loop__fine{margin:0;max-width:62ch;font-size:15px;line-height:1.5;color:var(--fine-navy)}

/* ---------- Chapter 03 responsive ---------- */
/* tablets and phones: the one-library map stacks under its tabs */
@media (max-width:1080px){
  .loop__grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .loop__map{max-width:460px}
}
@media (max-width:760px){
  .agents{padding-bottom:40px}
  .agents__foot{gap:18px;margin-top:28px}
  .incl summary{font-size:15px}
  .incl__body{grid-template-columns:1fr;gap:12px}
  .band--navy.loop{padding-top:72px}
  .loop__grid{margin-top:28px;gap:24px}
  /* screen map fix (pass 3): a smaller map so the map and the demo's answer share a screen */
  .loop__map{max-width:300px;margin-inline:auto}
  .ask__log{max-height:30svh}
  .lnode{--ls:76px}
  .lnode--core{--ls:92px}
  .lnode__lbl{top:calc(100% + 7px);gap:5px;font-size:13.5px}
  .lnode--a .lnode__lbl{bottom:calc(100% + 7px)}
  .lnode__n{font-size:12.5px}
  .lnode--core .lnode__lbl{top:calc(100% + 6px);font-size:17px}
  .loop__bar{padding:14px}
  .lp{padding:16px 14px 18px}
  .ask__form input,.loop__demo select{font-size:16px}
  .queue em{max-width:96px}
  .loop__close{flex-direction:column;align-items:stretch;margin-top:44px;padding-top:28px}
  .loop__close .btn{width:100%}
}

/* =====================================================================
   v7 chunk 5: Membership (#pricing), questions and close (#book), the inquiry form, the footer.
   #pricing is paper with one navy instrument (the Premier card); #book is navy with the reformed mark above the form.
   The Premier pre-states are gated on .is-armed, which main.js adds only when motion runs, so no JS, reduced motion,
   Pause motion and the static fallback all show the assembled card.
   ===================================================================== */

/* ---------- #pricing ---------- */
.pricing{padding:120px 0 128px}
.pricing__top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin:0 0 56px}
.pricing__head{max-width:780px;margin:0}
.pricing__cta{flex:none}
@media (max-width:1080px){.pricing__top{flex-direction:column;align-items:flex-start}}
@media (max-width:760px){.pricing__top{align-items:stretch}.pricing__cta{width:100%;text-align:center}}
.pricing__head .sub{margin-top:18px}
.plans{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:stretch}
.plans__side{display:flex;flex-direction:column;gap:24px}
.plans__side .plan{flex:1 1 auto}
.plan{position:relative;display:flex;flex-direction:column;border-radius:var(--r-panel)}
.plan__foot{margin-top:auto;padding-top:28px;display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap}
.plan__price{margin:0;font:600 14px/1.35 var(--f-ui);color:var(--gold-ink)}

/* The Premier card: navy on paper. A wordless gold top rule (r1: the label repeated the H2), then the numerals hang in
   a 40px gutter, the same device as the hero H1 and the chapter H2s. */
.prem{--ease-quart:cubic-bezier(.25,1,.5,1);padding:36px 44px 38px 72px;color:var(--body-navy);background:radial-gradient(640px 380px at 100% 0%,rgba(22,64,122,.5),rgba(22,64,122,0) 70%),linear-gradient(180deg,#0D2547,#0A1E3A 72%);box-shadow:0 44px 70px -36px rgba(10,30,58,.62)}
.prem :focus-visible{outline-color:var(--champ)}
.prem__rule{display:flex;margin:0 0 26px}
.prem__rule::after{content:"";flex:1;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--gold-hi),var(--gold) 55%,rgba(185,151,75,.12))}
.band--paper .prem__name{font-size:clamp(32px,2.8vw,40px);line-height:1.05;letter-spacing:-.02em;color:#fff} /* beats .band--paper h3 */
.prem__for{margin:10px 0 0;font:italic 400 21px/1.3 var(--f-disp);color:var(--champ)}
.prem__lead{margin:18px 0 0;font:400 clamp(24px,2.1vw,28px)/1.2 var(--f-disp);letter-spacing:-.012em;color:#fff}
.prem__lead em{font-style:italic;color:var(--champ)}
.prem__rows{list-style:none;margin:14px 0 0;padding:0}
.prow{position:relative;padding:18px 0}
.prow + .prow{border-top:1px solid rgba(216,190,126,.18)}
.prow__n{position:absolute;left:-46px;top:25px;font:var(--fw-num) var(--fs-num)/1 var(--f-mono);letter-spacing:var(--ls-num);color:var(--champ)}
.prow p{margin:0;max-width:54ch;font-size:15.5px;line-height:1.55;color:var(--body-navy)}
.prow__h{display:block;margin:0 0 5px;font:500 23px/1.2 var(--f-disp);letter-spacing:-.01em;color:#fff}
.prow__d{display:block}
.prem__plus{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--body-navy)}
.prem .plan__price{color:var(--champ)}
.prem .plan__foot .btn{min-height:52px;padding:0 26px}

/* the Premier stack assembles (motion only): rows ghost until the swarm lands, then ignite 01, 02, 03 */
html.motion .prem.is-armed .prow{opacity:.3;transform:translate3d(0,6px,0);transition:opacity 360ms var(--ease-quart),transform 360ms var(--ease-quart)}
html.motion .prem.is-armed .prow.is-lit{opacity:1;transform:none}
html.motion .prem.is-armed .prow__n{color:rgba(216,190,126,.45)}
html.motion .prem.is-armed .prow.is-lit .prow__n{animation:ce-num-ignite 1100ms var(--ease-out) both}
html.motion .prem.is-armed .prem__rule::after{clip-path:inset(0 100% 0 0);transition:clip-path 600ms var(--ease-out)}
html.motion .prem.is-armed.is-built .prem__rule::after{clip-path:inset(0)}
html.motion .prem.is-armed .prem__for{opacity:.55;transition:opacity 500ms var(--ease-out)}
html.motion .prem.is-armed.is-built .prem__for{opacity:1}
html.motion .prem.is-armed.is-built.has-name .prem__for .js-clinic{animation:ce-name-glow 1400ms var(--ease-out) both}
@keyframes ce-num-ignite{0%{color:#FFF6DC;text-shadow:0 0 18px rgba(255,236,190,.95),0 0 3px #FFFFFF}100%{color:var(--champ);text-shadow:0 0 10px rgba(243,223,166,.32)}}
@keyframes ce-name-glow{0%{text-shadow:0 0 0 rgba(243,223,166,0)}35%{text-shadow:0 0 28px rgba(255,240,205,.95),0 0 2px #FFF6E0}100%{text-shadow:0 0 18px rgba(243,223,166,.45)}}

/* Membership access and Free preview: white on paper, border only */
.plan--light{padding:30px 32px 28px;background:var(--white);border:1px solid var(--line)}
.plan__name{font-size:26px;line-height:1.15;color:var(--navy)}
.plan__lead{margin:6px 0 0;font-size:15.5px;line-height:1.5;color:var(--slate)}
.plan__list{margin:18px 0 0;gap:9px}
.plan__list li{font-size:15px;line-height:1.5;color:var(--slate)}
.plan__fine{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--fine-paper)}
.plan--light .plan__foot{flex-direction:column;align-items:stretch;gap:12px;padding-top:24px}
.plan--light .plan__foot .btn{width:100%}
.plan-link{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:rgba(138,109,47,.6);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color 160ms ease}
@media (hover:hover){.plan-link:hover{text-decoration-color:var(--navy)}}
/* pass 3 copy: short desktops (1280x720, 1366x768) hold the three plan cards on one screen */
@media (min-width:1081px) and (max-height:800px){
  .pricing__top{margin-bottom:28px} /* screen map fix (pass 3): the H2 and the Premier card share one screen */
  .prem{padding-top:28px;padding-bottom:28px}
  .prem__rule{margin-bottom:20px}
  .prow{padding:13px 0}
  .prow__n{top:20px}
  .plan__foot{padding-top:20px}
  .plans__side{gap:18px}
  .plan--light{padding:24px 28px 22px}
  .plan__list{margin-top:12px}
  .plan--light .plan__foot{padding-top:16px;gap:10px}
  .plan__fine{margin-top:10px}
}

/* who does what: the two halves of the mark with the gold blade between them */
.keep{display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);align-items:center;margin:84px 0 0}
.keep__half{margin:0;font:400 clamp(22px,2vw,28px)/1.32 var(--f-disp);letter-spacing:-.012em;color:var(--navy);text-wrap:balance}
.keep__half:first-child{text-align:right}
.keep__half em{font-style:italic;color:var(--gold-disp)}
.keep__blade{justify-self:center;width:2px;height:108px;border-radius:1px;background:linear-gradient(180deg,rgba(185,151,75,0),var(--gold) 22%,var(--gold) 78%,rgba(185,151,75,0));transform:rotate(32deg)}

/* ---------- #book: questions and close (navy) ----------
   Desktop: words left (pain, H2, line, then the six questions), the mark and the form card right. The mark slot sits
   at the top of the right column, about 22vh from the section top; main.js times the reform from the slot. */
.close{position:relative;padding:120px 0 136px}
.close__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 480px;grid-template-areas:"head side" "faq side";grid-template-rows:auto 1fr;column-gap:clamp(48px,7vw,104px);align-items:start}
.close__grid>*{position:relative;z-index:1}
.close__head{grid-area:head;padding-top:44px}
.close__head .h2 em{display:block}
.close__head .sub{max-width:46ch}
.close__side{grid-area:side}
.close__faq{grid-area:faq;margin-top:64px;max-width:640px}

.close__crest{position:relative;display:grid;justify-items:center;margin:0 0 18px;padding-bottom:40px}
.close__slot{position:relative;width:min(240px,58vw);aspect-ratio:1}
/* golive-r1-02: the glow is a gradient behind the mark, not a drop-shadow filter (in WebKit, with motion off, that
   filter painted a 72px transparent square at the top-left of the viewport). filter:none also beats the navy
   drop-shadow style.css gives the static marks; the second gradient layer draws that navy halo instead. It leaves
   with the static mark. */
.mark-static--close{position:relative;width:100%;height:100%;overflow:visible;filter:none}
.close__slot::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(closest-side,rgba(216,190,126,.2),rgba(216,190,126,0)),radial-gradient(closest-side,rgba(22,64,122,.6) 58%,rgba(22,64,122,0));pointer-events:none;transition:opacity 700ms ease}
.is-field .close__slot .mark-static,.is-field .close__slot::before{opacity:0}
/* on a live success only: the clinic name glows under the mark (space reserved, so nothing moves) */
.close__glow{position:absolute;left:0;right:0;bottom:2px;margin:0;text-align:center;opacity:0;transform:translateY(6px);transition:opacity 600ms var(--ease-out),transform 700ms var(--ease-out)}
.close__name{font:italic 400 23px/1.3 var(--f-disp);color:var(--champ);text-shadow:0 0 18px rgba(243,223,166,.45)}
.close.is-sent .close__glow{opacity:1;transform:none}
.close.is-sent .close__name{animation:ce-name-glow 1600ms var(--ease-out) 300ms both}

.close__card{position:relative;padding:32px 32px 26px;border-radius:var(--r-panel);background:rgba(12,34,66,.8);border:1px solid rgba(216,190,126,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.close__alt{display:inline-block;margin-top:18px;font:600 15px/1.35 var(--f-ui);color:var(--champ);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media (hover:hover){.close__alt:hover{color:#fff}}

/* the form (production's Netlify form clinical-edge-lead) */
.form{display:grid;gap:16px;margin:0}
.form__hp{display:none}
.form__row{display:grid;gap:7px}
.form label{font:600 var(--fs-lbl)/1.3 var(--f-ui);color:var(--on-navy-hi)}
.form input:not([type=checkbox]),.form select{width:100%;min-height:48px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid rgba(216,190,126,.34);background-color:rgba(7,22,48,.62);color:var(--on-navy-hi);font:500 16px/1.2 var(--f-ui);transition:border-color 160ms ease,background-color 160ms ease}
.form select{-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23D8BE7E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
.form select:invalid{color:var(--fine-navy)}
.form select option{color:#E8EDF4;background:#0D2547}
@media (hover:hover){.form input:not([type=checkbox]):hover,.form select:hover{border-color:rgba(216,190,126,.6)}}
.form input:not([type=checkbox]):focus,.form select:focus{border-color:var(--champ);background-color:rgba(7,22,48,.82)}
.form input:not([type=checkbox]):focus-visible,.form select:focus-visible{outline:2px solid var(--champ);outline-offset:2px;border-radius:var(--r-ctl)}
.form [aria-invalid="true"]{border-color:#E9A98F}
.form .consent{display:flex;align-items:flex-start;gap:12px;font:400 14px/1.5 var(--f-ui);color:var(--body-navy);cursor:pointer}
.consent input{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border-radius:5px;border:1.5px solid rgba(216,190,126,.6);background:rgba(7,22,48,.62) center/12px 10px no-repeat;cursor:pointer;transition:background-color 160ms ease,border-color 160ms ease}
.consent input:checked{background-color:var(--gold);border-color:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.4 3.3L11 1.5' fill='none' stroke='%230A1E3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.consent input:focus-visible{outline:2px solid var(--champ);outline-offset:3px;border-radius:5px}
.form__go{min-height:52px;margin-top:4px;font-size:16px}
.form__msg{margin:0;font-size:14px;line-height:1.5;color:var(--champ)}
.form__msg[data-state="error"]{color:#F2C3AE}
.form__msg[data-state="preview"]{color:var(--on-navy-hi)}
.form__fine{margin:0;font-size:13px;line-height:1.5;color:var(--fine-navy)}
.form__fine a{color:var(--on-navy-hi);text-decoration-thickness:1px;text-underline-offset:3px}

/* the six questions */
.faq__head{margin:0 0 14px;font-size:clamp(24px,2.2vw,30px);line-height:1.15;color:#fff}
.faq{border-top:1px solid rgba(216,190,126,.22)}
.faq details{border-bottom:1px solid rgba(216,190,126,.22)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:18px 44px 18px 0;font:400 19px/1.35 var(--f-disp);color:#fff;transition:color 160ms ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;margin-top:-6px;background:linear-gradient(var(--champ),var(--champ)) center/12px 1.5px no-repeat,linear-gradient(var(--champ),var(--champ)) center/1.5px 12px no-repeat;transition:transform 240ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline-offset:2px}
@media (hover:hover){.faq summary:hover{color:var(--champ)}}
.faq details p{margin:0 0 22px;max-width:60ch;font-size:16px;line-height:1.6;color:var(--body-navy)}
/* where the browser can animate to auto height, answers open over 260ms; elsewhere they open at once */
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height 260ms var(--ease-out),content-visibility 260ms allow-discrete}
  .faq details[open]::details-content{height:auto}
}

/* ---------- Footer ---------- */
.foot{background:var(--navy-deep);color:var(--fine-navy);padding:56px 0 40px;border-top:1px solid rgba(216,190,126,.14)}
.foot__inner{display:grid;gap:22px}
.foot__top{display:flex;align-items:center;justify-content:space-between;gap:12px 40px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand--foot .brand__mark{width:28px;height:28px}
.brand--foot .brand__word{font-size:18px}
.foot__req{margin:0;max-width:64ch;font-size:14px;line-height:1.55;color:var(--on-navy-hi)}
.foot__labels{margin:8px 0 0;max-width:86ch;font-size:13px;line-height:1.55;color:var(--fine-navy)}
.foot__base{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 40px;flex-wrap:wrap}
.foot__links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;margin:0;padding:0;list-style:none}
.foot__links a{display:inline-block;padding:10px 0;font-size:14px;color:var(--on-navy-hi);text-decoration:underline;text-decoration-color:rgba(216,190,126,.5);text-decoration-thickness:1px;text-underline-offset:4px}
@media (hover:hover){.foot__links a:hover{color:#fff;text-decoration-color:var(--champ)}}
.foot__copy{margin:0;font-size:13px;line-height:1.55;color:var(--fine-navy);white-space:nowrap}
/* without JavaScript nothing moves and the toggles cannot work, so the nav and footer "Pause motion" buttons step aside */
html:not(.js) .motion-toggle{display:none}

/* ---------- Tablets and phones ---------- */
@media (max-width:1080px){
  .plans{grid-template-columns:minmax(0,1fr)}
  .plans__side{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .close__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "side" "faq";grid-template-rows:none;max-width:620px}
  .close__head{padding-top:0}
  .close__side{margin-top:36px}
}
@media (max-width:760px){
  .pricing{padding:72px 0 80px}
  .pricing__top{margin-bottom:32px}
  .plans{gap:16px}
  .plans__side{grid-template-columns:minmax(0,1fr);gap:16px}
  .prem{padding:26px 20px 26px 46px}
  .prem__rule{margin-bottom:18px}
  .prem__for{font-size:19px}
  .prow{padding:14px 0}
  .prow__n{left:-32px;top:21px}
  .prow__h{font-size:20px}
  .prow p{font-size:15px}
  .prow__d{display:none} /* screen map fix (pass 3): phones show the three spine lines only; the details are on the launch call */
  .prem .plan__foot{flex-direction:column;align-items:stretch;padding-top:22px}
  .prem .plan__foot .btn{width:100%}
  .plan--light{padding:24px 20px 22px}
  .keep{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:44px}
  .keep__half:first-child{text-align:left}
  .keep__blade{justify-self:start;height:40px;margin-left:14px}
  .close{padding:72px 0 84px}
  .close__side{margin-top:28px}
  .close__slot{width:min(184px,50vw)}
  .close__crest{padding-bottom:36px}
  .close__card{padding:24px 18px 22px}
  .close__faq{margin-top:48px}
  .faq summary{padding:16px 40px 16px 0;font-size:18px}
  .foot{padding:44px 0 32px}
  .foot__top{flex-direction:column;align-items:flex-start;gap:10px}
  .foot__base{flex-direction:column;align-items:flex-start}
}

/* ================= pass 3 fixer ================= */
/* design-06: the three classrooms, always visible, as the library slab's bottom row (desktop: the full width of row 7;
   the four ghost cells it replaced moved out, and the gold tail took the 2x2 block at the right of rows 5 and 6) */
.wall > .teach{grid-area:7/1/8/9}
@media (min-width:1081px){.wall > .cell--m{display:none}}
.teach{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,3fr);align-items:center;gap:12px 28px;padding:16px 22px;border-radius:12px;border:1px solid rgba(216,190,126,.24);background:linear-gradient(100deg,rgba(216,190,126,.08),rgba(255,255,255,.02) 60%);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
.teach__h{margin:0;font:500 21px/1.12 var(--f-disp);letter-spacing:-.01em;color:#fff}
.teach__h em{display:block;font-style:italic;font-weight:400;color:var(--champ)}
.teach__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 26px;margin:0;padding:0;list-style:none}
.teach__list li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px 9px;margin:0;min-width:0}
.teach__g{width:20px;height:20px;fill:none;stroke:var(--champ);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.teach__list b{font:600 14px/1.2 var(--f-ui);color:var(--champ)}
.teach__list span{grid-column:1/-1;font:400 14px/1.4 var(--f-ui);color:var(--on-navy);text-wrap:pretty}
@media (min-width:1081px) and (max-height:820px){
  .depth{padding:22px 40px 14px}
  .depth__head{padding-bottom:12px}
  .teach{padding:12px 18px}
  .teach__h{font-size:19px}
  .teach__list span{font-size:13.5px;line-height:1.35}
}
/* design-02: phones show four cards in a 2x2 (sections.js marks them .is-pick: the first four, or a filter's own
   matches) plus the QCF card, the tail and the classrooms, so the numeral, the chips and the wall share one screen.
   The cards drop their Clinician-set chip here (the drawer still shows it) so each stays two short rows. */
@media (max-width:760px){
  .depth{padding:22px 14px 14px}
  .depth__head{gap:16px;padding-bottom:16px}
  .depth__count{flex-direction:row;align-items:flex-end;gap:14px}
  .depth__num{font-size:92px}
  .depth__unit{font-size:21px;line-height:1.12;padding-bottom:4px;max-width:8.5em}
  .wall{grid-auto-rows:auto;gap:6px}
  .wall > .cell{display:none}
  .wall > .stk:not(.stk--bio){display:none;grid-area:auto}
  .wall > .stk.is-pick{display:flex}
  html:not(.js) .wall > article.stk:nth-of-type(-n+4){display:flex}
  .wall > .stk--bio{grid-area:3/1/4/3}
  .wall > .wall__tail{grid-area:4/1/5/3;min-height:48px;padding:10px 16px}
  .wall > .teach{grid-area:5/1/6/3}
  .stk{padding:11px 12px 10px}
  .stk:not(.stk--bio) .cset{display:none}
  .stk__foot{flex-direction:row;align-items:center;padding-top:8px}
  .stk .tier{margin-top:5px}
  .stk--bio .stk__name{font-size:22px;margin-top:4px}
  .teach{grid-template-columns:1fr;gap:10px;padding:14px 14px}
  .teach__h{font-size:19px}
  .teach__h em{display:inline}
  .teach__list{grid-template-columns:1fr;gap:9px}
  .teach__list li{grid-template-columns:20px 92px minmax(0,1fr);align-items:start;gap:0 8px}
  .teach__list b{font-size:13px;line-height:1.35}
  .teach__list span{grid-column:auto;font-size:13.5px;line-height:1.35}
}
@media (max-width:760px) and (max-height:700px){
  .depth__num{font-size:80px}
  .stk .tier{font-size:12px}
  .stk--bio{padding:11px 12px 10px}
}
.motion .depth.is-armed:not(.is-filled) .wall > .teach{opacity:0;transform:translate3d(0,8px,0)}
.motion .depth.is-filled:not(.is-settled) .wall > .teach{transition-delay:var(--d,0ms)}

/* copy-01, design-14: the owner phrase never breaks at its hyphen */
.nw{white-space:nowrap}

/* interaction-07: on desktop the certificate popover opens below the dot row, clear of "Replay the scan" */
.coa__pop--below{transform:none}
.coa__pop--below::after{top:-5px;bottom:auto}
/* interaction-12: the 15 test dots keep their size and get a thumb-size hit area */
.coa__dot{position:relative}
.coa__dot::before{content:"";position:absolute;inset:-9px}

/* golive-05: a failed live submission reads as an error, not in success gold; "Sending..." reads neutral */
#leadform[data-submission-state="failed"] .form__msg{color:#F2C3AE}
#leadform[data-submission-state="pending"] .form__msg{color:var(--on-navy-hi)}

/* design-08: the library demo at rest is one question, its answer and two sources; "Ask your own question" opens the
   privacy note, the sample questions and the input */
.ask__more{display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:38px;padding:0 14px;border-radius:10px;border:1px solid rgba(216,190,126,.45);background:transparent;font:600 13.5px/1 var(--f-ui);color:var(--on-navy-hi);cursor:pointer;transition:border-color 180ms ease,background-color 180ms ease}
.ask__more::before{content:"";width:9px;height:9px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
@media (hover:hover){.ask__more:hover{border-color:var(--champ);background:rgba(216,190,126,.08)}}
.ask:not(.is-open) .ask__note,.ask:not(.is-open) .ask__chips,.ask:not(.is-open) .ask__form{display:none}
.ask.is-open .ask__more{display:none}
.loop__grid{align-items:start}
@media (min-width:1100px){.loop__demo{align-self:start}}

/* design-09, copy-07 (pass 3 fixer): the Membership H2 and the Premier call to action share one screen. "Built for"
   shows only once the visitor typed a clinic name; the lead line is cut; the implementation note is fine print under
   the price; short screens drop the pain line and the row details, as phones already do. */
.prem:not(.has-name) .prem__for{display:none}
.plan__price .prem__plus{display:block;margin:4px 0 0;max-width:30ch;font:400 13px/1.45 var(--f-ui);color:var(--body-navy)}
/* the founding-clinic line (Barry, 2026-10-10): once, in the Premier price block; no badge, number, date or countdown */
.plan__price .prem__limit{display:block;margin:6px 0 0;font:600 13px/1.45 var(--f-ui);color:var(--champ)}
@media (min-width:1081px){.pricing__top{margin-bottom:28px}.pricing__head .sub{margin-top:12px}}
@media (min-width:761px) and (max-height:820px){
  .pricing__head .pain{display:none}
  .prow__d{display:none}
  .prow{padding:12px 0}
  .prow__n{top:17px}
}
/* the Premier card no longer stretches to the side column, so its call to action sits right under its three rows */
@media (min-width:761px){.plans{align-items:start}}
/* design-06: the classroom heading is white on the slab (the paper band's h3 rule would turn it navy) */
.band--paper .depth .teach__h{color:#fff}
/* design-02: phones keep the numeral and its unit stacked, clear of the Illustrative chip */
@media (max-width:760px){
  .depth__count{flex-direction:column;align-items:flex-start;gap:8px}
  .depth__num{font-size:88px}
  .depth__unit{max-width:none;padding-bottom:0}
}
/* design-08: a tighter head and demo, so the H2, the map and the demo's answer share one screen */
@media (min-width:761px){
  .loop__head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:18px}
  .loop__head > .pain,.loop__head > .sub{grid-column:1/-1}
  .loop__head .loop__status{margin-top:0;justify-self:start}
  .loop__head .sub{margin-top:12px}
}
.loop__demo .lp{padding:14px 18px 16px}
.loop__demo .loop__bar{padding:14px 18px}
.ask{padding:0;border:0;background:none}
.amsg{line-height:1.45}
.amsg .cite{gap:5px;margin-top:8px}
.amsg .cite span{padding:5px 8px;font-size:12px}
.amsg ul{margin-top:6px}
.amsg li{margin:2px 0}
/* design-08, phones: the resting answer is never cut by the log's scroll box, and the three tabs keep one row */
.ask:not(.is-open) .ask__log{max-height:none;overflow:visible}
@media (max-width:760px){
  .loop__tabs{flex-wrap:nowrap}
  .loop__tabs button{padding:0 10px;font-size:13px;white-space:nowrap}
}

/* ================= final pass (2026-10-10): sourcing reframe, the proof block, prices, the free-call line ================= */
/* #compliance element 4 (oversight and consent) is a supporting point now: the same grid cell, a quieter title */
.el--support .el__t{font-size:21px;color:var(--slate)}
.el--support .el__t em{color:var(--gold-ink)}
.el--support::before{background:var(--line)}
/* "FDA-registered", "GMP-certified" and "pharma-grade" never break (the [data-claim="facility"] span; keep .nw on any hyphenated swap) */
[data-claim="facility"] .nw{white-space:nowrap}

/* #proof: who reviews the protocols. Paper, one figure: the quote is the moment, the seal beside it stays quiet (navy
   hairline halves, the gold blade). The seal is the field's anchor here: the swarm settles inside its outline, and
   when it lands the blade glints once (sections.js adds .is-lit; motion only). Desktop: quote left, seal right.
   Phones: the seal sits small above the provenance line. One screen at 1440x900, 1280x720 and 390x844. */
.proof{padding:24px 0 136px}
.proof__fig{position:relative;margin:0;padding-top:96px;border-top:1px solid var(--line);display:grid;
  grid-template-columns:minmax(0,1fr) clamp(240px,26vw,344px);grid-template-areas:"prov seal" "q seal" "cap seal";
  column-gap:clamp(56px,7vw,112px);align-items:start}
.proof__fig::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:2px;background:var(--gold)}
.proof__seal{grid-area:seal;align-self:center;position:relative;width:100%;aspect-ratio:1}
.proof__mark{display:block;width:100%;height:100%;overflow:visible}
.proof__half{fill:none;stroke:var(--navy);stroke-opacity:.5;stroke-width:1.5;vector-effect:non-scaling-stroke}
.proof__blade{fill:var(--gold-logo)}
.proof__glow{fill:#FFE7AE;opacity:0}
.proof__seal.is-lit .proof__glow{animation:ce-proof-glint 1400ms var(--ease-out) both}
@keyframes ce-proof-glint{0%{opacity:0}22%{opacity:.95}100%{opacity:0}}
.proof__prov{grid-area:prov;margin:0;max-width:48ch;font:500 16px/1.45 var(--f-ui);color:var(--slate);text-wrap:balance}
.proof__q{grid-area:q;margin:22px 0 0;padding:0}
.proof__q p{margin:0;max-width:24ch;font:italic 400 clamp(36px,3.7vw,54px)/1.14 var(--f-disp);letter-spacing:-.018em;color:var(--navy);text-wrap:pretty;hanging-punctuation:first}
.proof__cap{grid-area:cap;margin:36px 0 0;display:grid;justify-items:start;gap:16px}
.proof__who{margin:0;font:400 15.5px/1.5 var(--f-ui);color:var(--slate)}
.proof__name{display:block;margin-bottom:2px;font:600 17px/1.35 var(--f-ui);color:var(--navy)}
.proof__sep:not(.proof__sep--2){display:none}
.proof__sep{color:var(--gold-ink)}
/* the draft chip: dashed like In development, paper colors; it wraps on phones */
.chip--draft{border-style:dashed}
@media (max-width:1080px){
  .proof{padding:16px 0 112px}
  .proof__fig{padding-top:72px;grid-template-columns:minmax(0,1fr) clamp(180px,24vw,240px);column-gap:48px}
  .proof__q p{font-size:clamp(32px,4.4vw,44px)}
}
@media (max-width:760px){
  .proof{padding:8px 0 64px}
  .proof__fig{padding-top:44px;grid-template-columns:minmax(0,1fr);grid-template-areas:"seal" "prov" "q" "cap"}
  .proof__seal{align-self:start;width:104px;margin:0 0 20px}
  .proof__prov{font-size:15px}
  .proof__q{margin-top:16px}
  .proof__q p{font-size:clamp(26px,7.4vw,31px);line-height:1.17;letter-spacing:-.012em}
  .proof__cap{margin-top:26px;gap:14px}
  .proof__who{font-size:14.5px}
  .proof__name{font-size:16px}
  .proof__role{display:block}
  .proof__sep{display:none}
  .chip--draft{white-space:normal;line-height:1.35;text-align:left}
}
/* short desktops (1280x720): the figure tightens so quote, attribution and chip share the screen under the nav */
@media (min-width:1081px) and (max-height:820px){
  .proof__fig{padding-top:72px;grid-template-columns:minmax(0,1fr) clamp(220px,22vw,300px)}
  .proof__q p{font-size:clamp(34px,3.5vw,48px)}
  .proof__cap{margin-top:28px}
}

/* #pricing: Membership access shows its public from-price, "$149" takes the price weight; Free matches it */
.plan__amt{font:500 28px/1 var(--f-disp);letter-spacing:-.01em;color:var(--navy);font-variant-numeric:lining-nums}
.plan__price--from{display:flex;align-items:baseline;gap:7px;font:500 15px/1.2 var(--f-ui);color:var(--slate);flex-wrap:wrap}
.plan__yr{flex:1 0 100%;margin-top:4px;font:500 13.5px/1.35 var(--f-ui);color:var(--slate)}
/* short desktops: the side column keeps its 643px of 648 at 1280x720 (the larger price sits in the old line height) */
@media (min-width:1081px) and (max-height:800px){.plan__amt{font-size:24px;line-height:.8}.plan__price--from{line-height:1}}

/* #book: the free-call line above the button (hidden on the Free preview path, main.js syncTier) */
.form__assure{margin:2px 0 0;font:400 16px/1.5 var(--f-ui);color:var(--body-navy);text-wrap:pretty}
.form__assure b{font-weight:600;color:var(--on-navy-hi)}
/* short desktops (1280x720): the card tightens so the privacy line and the free-preview link stay above the fold */
@media (min-width:1081px) and (max-height:820px){.close__card{padding:24px 28px 20px}.form{gap:11px}.form input:not([type=checkbox]),.form select{min-height:44px}.close__alt{margin-top:12px}}