/* Clinical Edge flagship: chapter 02 (the clinic app and the revenue calculator). Loaded after style.css. Product UI inside the device is Archivo; marketing chrome stays Newsreader. */

/* Registered so the whole app re-skins as one smooth colour interpolation. The initial values are the resting
   palette (Navy and gold), which is what no JS, reduced motion and the static fallback show. */
@property --p { syntax: '<color>'; inherits: true; initial-value: #0A1E3A; }
@property --a { syntax: '<color>'; inherits: true; initial-value: #C9A85C; }

/* Hero headline and fly-through act sizing moved to style.css in v7 chunk 1. */

/* Pillar 1 (knowledge), the protocol viewer, library, sourcing and launch-gate rules were removed in v7 chunk 2; chapter 01 lives in sections.css. */

/* =====================================================================
   Chapter 02 #app (v7 chunk 3): the question slide opener (kq.css), the pinned app stage (config, phone, approvals console), and
   the revenue calculator. Pre-animation states are gated on .is-armed, which app.js and sections.js add only when
   motion runs, so no JS, reduced motion, Pause motion and the static fallback all show the finished frame.
   The stage content shares one left edge with the page wrap (plus the old numeral gutter).
   ===================================================================== */
.app{position:relative;padding:120px 0 120px;background:transparent;--app-l:clamp(0px,4vw,48px)}
/* pass 3 (COPY-V7-3): the stage H3 over the pinned phone was cut (the 02 tag says it); the phone is the anchor. */

.app__track{position:relative}
.app__pin{position:relative;padding:40px var(--gut) 24px}
/* the pin runs only in motion (html.motion), so no JS, reduced motion and the static fallback get a plain block */
html.motion .app__track{height:calc(5 * 55vh + 100vh)}
html.motion .app__pin{position:sticky;top:0;height:100vh;min-height:640px;display:flex;align-items:center;padding:calc(var(--nav-h) + 18px) var(--gut) 22px;overflow:hidden}
.app__grid{position:relative;width:min(var(--wrap),100%);margin:0 auto;padding-left:var(--app-l);display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr) minmax(250px,300px);gap:40px;align-items:center}
.app__side{display:grid;gap:26px;align-content:center;min-width:0}

/* Moment captions: all five sit in one cell, the current one shows. The outgoing caption leaves first. */
.app__caps{display:grid}
.app__cap{grid-area:1/1;opacity:0;visibility:hidden;transform:translate3d(0,10px,0);filter:blur(4px);transition:opacity 240ms var(--ease-out),transform 360ms var(--ease-out),filter 240ms ease,visibility 0s linear 360ms}
.app__cap.is-on{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity 360ms var(--ease-out) 90ms,transform 560ms var(--ease-out) 90ms,filter 360ms ease 90ms,visibility 0s}
.app__ct{margin:0;font:500 clamp(28px,2.4vw,36px)/1.08 var(--f-disp);letter-spacing:-.015em;color:#fff;text-wrap:balance}
.app__cb{margin:10px 0 0;font-size:17px;line-height:1.5;color:var(--body-navy);max-width:36ch;text-wrap:pretty}

/* Brand config: name and colors */
.cfg{display:grid;gap:16px;padding:20px 20px 18px;border-radius:14px;background:rgba(7,22,48,.66);border:1px solid var(--line-navy);box-shadow:0 22px 50px rgba(0,0,0,.24);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cfg__fields{display:grid;gap:14px}
.cfg__name,.cfg__col{display:grid;gap:8px;min-width:0}
.cfg__lbl{font:600 var(--fs-lbl)/1 var(--f-ui);color:var(--fine-navy)}
#cfg-name{width:100%;min-height:46px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid rgba(216,190,126,.42);background:rgba(10,30,58,.8);color:#fff;font:500 16px/1.2 var(--f-ui);caret-color:var(--champ);transition:border-color 160ms ease,box-shadow 160ms ease}
#cfg-name::placeholder{color:var(--fine-navy);opacity:1}
#cfg-name:focus{outline:2px solid var(--champ);outline-offset:2px;border-color:var(--champ)}
#cfg-name::selection{background:var(--gold);color:var(--navy)}
.cfg__sw{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.swatch{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:0;padding:0;cursor:pointer;background:linear-gradient(122deg,var(--sp) 50%,var(--sa) 50%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:transform 180ms var(--ease-out),box-shadow 220ms var(--ease-out)}
.swatch:active{transform:scale(.92)}
@media (hover:hover){.swatch:hover{transform:scale(1.08)}}
.swatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--champ)}
.swatch:focus-visible{outline:2px solid var(--champ);outline-offset:5px}
.sw-custom{position:relative;flex:none;width:30px;height:30px;margin-left:4px;border-radius:50%;cursor:pointer;background:conic-gradient(from 210deg,#C9A85C,#B4532F,#7A2840,#5B3F8C,#1D5C8A,#2D6A4F,#C9A85C);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);transition:transform 180ms var(--ease-out)}
.sw-custom::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--navy)}
.sw-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.sw-custom:focus-within{outline:2px solid var(--champ);outline-offset:5px}
.sw-custom.is-on{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--champ)}
@media (hover:hover){.sw-custom:hover{transform:scale(1.08)}}
.cfg__note{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;line-height:1.4;color:var(--fine-navy)}
.cfg__note svg{flex:none;width:13px;height:13px;fill:none;stroke:var(--champ);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}

/* Stepper: five segments; the current one fills with scroll through its moment (--f, set by app.js) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.steps li{min-width:0}
.steps button{width:100%;display:grid;gap:10px;align-content:start;padding:8px 0 4px;border:0;background:none;text-align:left;cursor:pointer;color:var(--fine-navy);font:500 13px/1.25 var(--f-ui);border-radius:4px;transition:color 200ms ease}
.steps__bar{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.steps__bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--champ));transform-origin:left;transform:scaleX(var(--f,0))}
.steps button[aria-current="step"]{color:#fff}
.steps button[aria-current="step"] .steps__bar i{--f:1}
.steps button:active{transform:scale(.97)}
@media (hover:hover){.steps button:not([aria-current]):hover{color:var(--on-navy-hi)}}
.steps button:focus-visible{outline-offset:4px}

/* The device column */
.app__device{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px;perspective:1500px;z-index:2;min-width:0}
.app__model{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 10px;margin:0;max-width:46ch;font-size:13px;line-height:1.45;color:var(--fine-navy);text-align:center}
/* the name locks in: one gold bloom behind the phone, an echo of the hero's lock pulse */
.phone-wrap::before{content:"";position:absolute;left:-28%;right:-28%;top:-8%;bottom:-8%;border-radius:50%;background:radial-gradient(closest-side,rgba(212,175,94,.34),rgba(212,175,94,0) 72%);opacity:0;transform:translateZ(-90px) scale(.9);pointer-events:none}
.phone-wrap.is-lock::before{animation:phoneLock 1200ms var(--ease-out)}
@keyframes phoneLock{0%{opacity:0;transform:translateZ(-90px) scale(.9)}30%{opacity:1}100%{opacity:0;transform:translateZ(-90px) scale(1.06)}}
/* blank template (motion only, before a name exists): the name reads as a grey bar */
.phone.is-blank .js-name,.phone.is-blank .js-mono{color:transparent!important;background:#DADEE3;border-radius:.3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.phone.is-blank .wel__logo .mono{background:#DADEE3;box-shadow:none}

/* The approvals console (desktop). In motion it waits in a quiet state from the first moment; the request lights it at moment 4. */
.console{position:relative;z-index:2;align-self:start;margin-top:clamp(24px,13vh,150px);padding:22px 22px 20px;border-radius:16px;background:rgba(7,22,48,.8);border:1px solid var(--line-navy);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.console__h{margin:0;font:500 var(--fs-hud)/1.35 var(--f-mono);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--champ)}
.console__clinic{margin:10px 0 0;font:500 23px/1.15 var(--f-disp);letter-spacing:-.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.console__slot{display:grid;margin-top:18px}
.console__slot > *{grid-area:1/1}
.console__empty{display:none;margin:0;place-items:center;padding:14px;border-radius:12px;border:1px dashed rgba(216,190,126,.34);font:500 14px/1.4 var(--f-ui);color:var(--fine-navy);text-align:center;pointer-events:none;transition:opacity 300ms var(--ease-out)}
.creq{position:relative;z-index:1;display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;padding:13px 12px;border-radius:12px;background:rgba(216,190,126,.08);border:1px solid rgba(216,190,126,.55);transition:border-color 500ms ease,background-color 500ms ease}
.creq__ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(216,190,126,.16);color:var(--champ);transition:background-color 400ms ease,color 400ms ease}
.creq__ico svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity 240ms ease,transform 360ms var(--ease-out)}
.creq__ok{opacity:0;transform:scale(.5)}
.creq__body{min-width:0}
.creq__t{margin:0;font:600 15px/1.3 var(--f-ui);color:#fff}
.creq__d{margin:3px 0 0;font-size:13.5px;line-height:1.4;color:var(--fine-navy)}
.creq__st{display:grid;justify-items:start;margin:12px 0 0}
.creq__st span{grid-area:1/1;padding:5px 8px;border-radius:6px;font:600 12.5px/1.2 var(--f-ui);white-space:nowrap;transition:opacity 260ms ease,visibility 0s}
.creq__wait{border:1px solid rgba(216,190,126,.5);color:var(--champ)}
.creq__done{background:var(--champ);color:var(--navy);opacity:0;visibility:hidden}
.creq__act{display:grid;grid-template-rows:1fr;transition:grid-template-rows 420ms var(--ease-emph)}
.creq__act > div{min-height:0;overflow:hidden;padding:0 8px 12px;margin:0 -8px -12px}
.creq__btn{margin-top:12px;min-height:40px;padding:0 20px;border-radius:var(--r-ctl);border:0;background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:var(--navy);font:600 14px/1 var(--f-ui);cursor:pointer;box-shadow:0 8px 20px rgba(185,151,75,.28);transition:transform 160ms var(--ease-out),box-shadow 200ms ease,opacity 220ms ease}
.creq__btn:active{transform:scale(.97)}
@media (hover:hover){.creq__btn:hover{box-shadow:0 12px 26px rgba(185,151,75,.4)}}
.console__foot{margin:16px 0 0;font-size:13px;line-height:1.45;color:var(--fine-navy)}
.app.is-ok .creq{border-color:var(--glass-line);background:rgba(255,255,255,.04)}
.app.is-ok .creq__ico{background:var(--champ);color:var(--navy)}
.app.is-ok .creq__in{opacity:0;transform:scale(.5)}
.app.is-ok .creq__ok{opacity:1;transform:none}
.app.is-ok .creq__wait{opacity:0;visibility:hidden;transition:opacity 200ms ease,visibility 0s linear 200ms}
.app.is-ok .creq__done{opacity:1;visibility:visible}
.app.is-ok .creq__act{grid-template-rows:0fr}
.app.is-ok .creq__btn{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 160ms ease,visibility 0s linear 420ms}
/* motion: the console rests quiet (no orders yet), lights when the request lands (moment 4), and dims again if the visitor scrolls back */
/* screen map fix (pass 3): at rest it collapses to its title and one line ("Waiting for the first order"), then the
   request row opens it (grid rows 0fr to 1fr) as it lands, so no dead panel sits beside the phone for four moments */
.app.is-armed .console{opacity:.7;transition:opacity 420ms var(--ease-out)}
.app.is-armed .console__slot{grid-template-rows:auto 0fr;transition:grid-template-rows 560ms var(--ease-emph)}
.app.is-armed .console__slot > *{grid-area:auto}
.app.is-armed .console__req{min-height:0;overflow:hidden;margin:-4px;padding:4px}
.app.is-armed .console__empty{display:block;min-height:0;overflow:hidden;padding:0;border:0;border-radius:0;text-align:left;font-size:14px}
.app.is-armed.is-console .console__slot{grid-template-rows:0fr 1fr}
.app.is-armed.is-console .console__empty{opacity:0}
.app.is-armed .creq{opacity:0;visibility:hidden;transform:translate3d(20px,0,0);transition:opacity 360ms var(--ease-out),transform 560ms var(--ease-emph),border-color 500ms ease,background-color 500ms ease,visibility 0s linear 360ms}
.app.is-armed.is-console .console{opacity:1}
.app.is-armed.is-console .creq{opacity:1;visibility:visible;transform:none;transition:opacity 360ms var(--ease-out) 180ms,transform 560ms var(--ease-emph) 180ms,border-color 500ms ease,background-color 500ms ease,visibility 0s linear 180ms}

/* The approvals toast (phones and tablets): the console's job, over the phone */
.ctoast{display:none}

/* ---------- The phone (DOM, a CSS 3D device over the field) ---------- */
.phone-wrap{--pw:min(330px,calc((100vh - 236px) * .4839));--rx:4deg;--ry:-12deg;--gx:30%;position:relative;width:var(--pw);transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));will-change:transform}
.phone{position:relative;width:var(--pw);aspect-ratio:300/620;border-radius:calc(var(--pw) * .165);padding:calc(var(--pw) * .03);font-size:calc(var(--pw) / 24);background:linear-gradient(var(--ang,140deg),#4a505b 0%,#16191e 22%,#5a616c 46%,#121418 70%,#3a3f48 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 calc(var(--pw) * .012) #0b0c0f,0 60px 100px -30px rgba(0,0,0,.7),0 30px 50px -20px rgba(0,0,0,.45),0 0 90px rgba(212,175,94,.10)}
.phone__frame i{position:absolute;width:calc(var(--pw) * .012);border-radius:2px;background:linear-gradient(90deg,#2a2e35,#5c636e)}
.phone__frame .btn-a{left:calc(var(--pw) * -.008);top:18%;height:5%}
.phone__frame .btn-b{left:calc(var(--pw) * -.008);top:27%;height:9%}
.phone__frame .btn-c{left:calc(var(--pw) * -.008);top:38%;height:9%}
.phone__frame .btn-d{right:calc(var(--pw) * -.008);top:30%;height:14%}
.screen{position:relative;width:100%;height:100%;border-radius:calc(var(--pw) * .135);overflow:hidden;background:#F7F6F3;color:#1C2330;font-family:var(--f-ui);isolation:isolate;transition:--p 900ms var(--ease-out),--a 900ms var(--ease-out)}
.glass{position:absolute;inset:calc(var(--pw) * .03);border-radius:calc(var(--pw) * .135);pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 24%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 66%,rgba(255,255,255,.07) 80%,rgba(255,255,255,0) 100%);background-size:220% 220%;background-position:var(--gx) 50%;mix-blend-mode:screen;z-index:5}
.phone-shadow{position:absolute;left:12%;right:12%;bottom:-38px;height:40px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));filter:blur(6px);transform:translateZ(-60px)}

/* Status bar, stack, tabs */
.sb{position:absolute;inset:0 0 auto;height:3.7em;display:flex;align-items:center;justify-content:space-between;padding:0 2.1em 0 2.4em;z-index:4;font-weight:650;font-size:1em;color:#121821;transition:color 400ms ease}
.sb__t{font-size:1.05em;letter-spacing:-.01em}
.island{position:absolute;left:50%;top:.85em;width:7.6em;height:2.2em;margin-left:-3.8em;border-radius:2em;background:#05060a}
.sb__i{display:flex;gap:.35em;align-items:center}
.sb__i svg{height:.85em;width:auto;fill:currentColor}
.screen.sb-light .sb{color:#fff}
.stack{position:absolute;inset:0;z-index:1}
.scr{position:absolute;inset:0;padding:3.9em 1.25em 5.8em;overflow:hidden;background:#F7F6F3;transform:translate3d(100%,0,0);transition:transform 560ms var(--ease-emph),opacity 420ms var(--ease-out),filter 420ms ease;will-change:transform}
.scr.is-prev{transform:translate3d(-30%,0,0);opacity:0;filter:brightness(.9)}
.scr.is-cur{transform:none;opacity:1}
.scr--welcome{transform:scale(1.06);opacity:0}
.scr--welcome.is-prev{transform:scale(.96);opacity:0}
.scr--welcome.is-cur{transform:none;opacity:1}
.tabs{position:absolute;left:0;right:0;bottom:0;height:5.4em;display:grid;grid-template-columns:repeat(4,1fr);align-items:start;padding:.75em .6em 0;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(20,28,40,.06);z-index:3;transition:transform 480ms var(--ease-emph)}
.tabs span{display:flex;flex-direction:column;align-items:center;gap:.3em;font-size:.68em;font-weight:600;color:#8A93A0;transition:color 300ms ease}
.tabs svg{width:2.2em;height:2.2em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.tabs span.on{color:var(--pt)}
.phone.no-tabs .tabs{transform:translateY(105%)}
.homebar{position:absolute;left:50%;bottom:.55em;width:9.4em;height:.36em;margin-left:-4.7em;border-radius:1em;background:rgba(15,20,28,.35);z-index:4;transition:background-color 400ms ease}
.screen.sb-light .homebar{background:rgba(255,255,255,.7)}
.sweep{position:absolute;inset:-30%;z-index:6;pointer-events:none;background:linear-gradient(122deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-110%);opacity:0}
.screen.reskin .sweep{animation:sweep 1000ms var(--ease-out)}
@keyframes sweep{0%{transform:translateX(-110%);opacity:1}100%{transform:translateX(110%);opacity:1}}

/* Shared app atoms (Archivo, clinic colours) */
.mono{display:grid;place-items:center;border-radius:1.1em;background:var(--p);color:var(--pi);font-weight:700;letter-spacing:.02em}
.mono--sm{width:2.6em;height:2.6em;border-radius:.8em;font-size:.86em}
.mono--xs{width:2.4em;height:2.4em;border-radius:.6em;font-size:.72em;flex:none}
.ah{display:flex;align-items:center;gap:.7em;padding:.5em 0 .8em}
.ah__t{display:grid;min-width:0}
.ah__t b{font-size:.98em;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#121821}
.ah__t small{font-size:.7em;color:#6B7480;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah--plain{padding:.7em 0 1em}
.ah--plain .ah__t b{font-size:1.35em}
.ah--plain .ah__t small{font-size:.76em}
.ah__bell{margin-left:auto;width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ah__bell svg{width:1.3em;height:1.3em;fill:none;stroke:#3A4350;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.abtn{display:inline-flex;align-items:center;justify-content:center;padding:.55em 1em;border-radius:2em;background:var(--p);color:var(--pi);font-size:.72em;font-weight:700;white-space:nowrap;transition:background-color 300ms ease,color 300ms ease}
.abtn--solid{display:flex;width:100%;padding:1em;font-size:.9em;border-radius:1em;margin-top:auto}
.abtn--sm{margin-left:auto;font-size:.66em;padding:.5em .95em}

/* S0 Welcome */
.scr--welcome{display:flex;flex-direction:column;align-items:flex-start;padding:5.4em 1.6em 2.4em;background:#fff}
.wel__glow{position:absolute;inset:-20% -30% auto;height:60%;background:radial-gradient(closest-side,color-mix(in oklab,var(--a) 40%,transparent),transparent);filter:blur(10px);pointer-events:none}
.wel__logo{position:relative}
.wel__logo .mono{width:4.2em;height:4.2em;font-size:1.25em;box-shadow:0 .6em 1.6em -.4em color-mix(in oklab,var(--p) 60%,transparent)}
.wel__hi{position:relative;margin:1.6em 0 0;font-size:.8em;color:#6B7480}
.wel__name{position:relative;margin:.15em 0 0;font-family:var(--f-disp);font-size:1.95em;font-weight:500;line-height:1.08;letter-spacing:-.015em;color:#121821;word-break:break-word}
.wel__tag{position:relative;margin:.3em 0 0;font-size:.78em;color:var(--pt);font-weight:600}
.wel__steps{position:relative;list-style:none;margin:1.8em 0 1.4em;padding:0;display:grid;gap:1.15em}
.wel__steps li{display:flex;gap:.8em;align-items:center}
.wel__steps i{flex:none;width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.72em;font-weight:700;color:var(--pt);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--a) 70%,#fff)}
.wel__steps b{display:block;font-size:.82em;color:#121821}
.scr--welcome.is-cur .wel__steps li{animation:rise 600ms var(--ease-emph) both}
.scr--welcome.is-cur .wel__steps li:nth-child(2){animation-delay:120ms}
.scr--welcome.is-cur .wel__steps li:nth-child(3){animation-delay:240ms}
@keyframes rise{from{opacity:0;transform:translateY(.8em)}to{opacity:1;transform:none}}

/* S1 Catalog rows (also the cart) */
.prod__i{display:flex;align-items:center;gap:.7em;padding:.65em .7em;border-radius:1em;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.prod__i b{display:block;font-size:.8em;color:#121821}
.prod__i small{display:block;font-size:.62em;color:#7A838F}
.prod__ico{flex:none;width:2.3em;height:2.3em;border-radius:.75em;background:color-mix(in oklab,var(--a) 26%,#fff);position:relative}
.prod__ico::after{content:"";position:absolute;inset:30%;border-radius:50%;border:2px solid var(--p)}
.prod__ico.p2::after{border-radius:.25em;transform:rotate(45deg)}
.prod__ico.p3::after{border-radius:0;border-width:0 0 2px 0;inset:30% 22%;box-shadow:0 -.35em 0 -.05em var(--p)}
.scr.is-cur .prod__i{animation:rise 520ms var(--ease-emph) both}
.scr.is-cur .prod__i:nth-child(2){animation-delay:90ms}
.scr.is-cur .prod__i:nth-child(3){animation-delay:180ms}

/* S6 Rewards */
.rcard{position:relative;overflow:hidden;padding:1.1em;border-radius:1.25em;background:linear-gradient(150deg,var(--p),color-mix(in oklab,var(--p) 70%,#000));color:var(--pi)}
.rcard__top{display:flex;justify-content:space-between;align-items:center;gap:.5em}
.rcard__tier{font-size:.6em;font-weight:700;padding:.35em .7em;border-radius:2em;background:rgba(255,255,255,.18)}
.rcard__lbl{font-size:.62em;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcard__pts{margin:.4em 0 0;font-size:2.6em;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.rcard__bar{margin-top:.8em;height:.45em;border-radius:1em;background:rgba(255,255,255,.22);overflow:hidden}
.rcard__bar i{display:block;height:100%;width:62%;border-radius:1em;background:var(--a);transform-origin:left;transform:scaleX(.3);transition:transform 1200ms var(--ease-emph) 200ms}
.scr.is-cur .rcard__bar i{transform:scaleX(1)}
.rcard__next{margin:.5em 0 0;font-size:.62em;opacity:.85}
.rcard__burst{position:absolute;right:1.2em;top:2.6em;width:3em;height:3em;pointer-events:none}
.rcard__burst::before,.rcard__burst::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#F3D58C 0 8%,transparent 9%) 0 0/1em 1em;opacity:0}
.scr.is-cur .rcard__burst::before{animation:burst 1100ms var(--ease-out) 700ms}
.scr.is-cur .rcard__burst::after{animation:burst 1100ms var(--ease-out) 850ms;transform:rotate(45deg)}
@keyframes burst{0%{opacity:0;transform:scale(.2)}30%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
.perks{display:grid;gap:.5em;margin-top:1.1em}
.perk{display:flex;align-items:center;gap:.7em;padding:.6em .7em;border-radius:1em;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.perk b{display:block;font-size:.76em;color:#121821}
.perk small{display:block;font-size:.6em;color:#7A838F}
.perk__ico{flex:none;width:2.2em;height:2.2em;border-radius:50%;background:color-mix(in oklab,var(--a) 24%,#fff);position:relative}
.perk__ico::after{content:"";position:absolute;inset:32%;border-radius:50%;background:var(--p)}
.perk__ico.k2::after{border-radius:.15em;transform:rotate(45deg)}
.perk__ico.k3::after{inset:34% 22%;border-radius:1em}

/* Status timeline (S5) */
.tline{list-style:none;margin:1em 0 0;padding:0;display:grid;gap:.85em}
.tline li{position:relative;display:flex;gap:.7em;align-items:flex-start}
.tline li + li::before{content:"";position:absolute;left:.55em;top:-.85em;height:.85em;width:2px;background:#E1E4E8}
.tline i{flex:none;width:1.2em;height:1.2em;border-radius:50%;box-shadow:inset 0 0 0 2px #D2D7DD;margin-top:.1em}
.tline li.d i{background:var(--p);box-shadow:none}
.tline li.a i{background:#fff;box-shadow:inset 0 0 0 3px var(--a)}
.scr.is-cur .tline li.a i{animation:ping 1.6s var(--ease-out) infinite}
@keyframes ping{0%{box-shadow:inset 0 0 0 3px var(--a),0 0 0 0 color-mix(in oklab,var(--a) 50%,transparent)}100%{box-shadow:inset 0 0 0 3px var(--a),0 0 0 .7em transparent}}
.tline b{display:block;font-size:.74em;color:#121821}
.tline small{display:block;font-size:.62em;color:#7A838F;line-height:1.35}

/* v7 chunk 4: the unused agents rules (.sw__txt, .out, .approve, .duo--navy, the draft keyframes) were deleted. Chapter 03 lives in sections.css. */

/* v7 chunk 5: the old tiers rules (.tiers, .tier-card, .band__head--center, .note--center, .ticks--paper) were replaced by
   the #pricing rules at the end of sections.css. */

/* ---------- Pain line: the clinic's frustration, said plainly before the answer ---------- */
/* The base .pain component (type scale, navy and paper colors, hero and card sizes) moved to style.css in v7 chunk 1. */

/* Shared clinician-set pill (chapter 01 wall and drawer, the phone). */
.cset{display:inline-block;white-space:nowrap;font:500 var(--fs-tag)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px dashed var(--gold-line);color:var(--gold-ink);background:rgba(185,151,75,.07)}
/* Pop keyframes used by the phone's paid ring and rewards unlock (kept when the launch gate was removed in v7 chunk 2). */
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ---------- Agents: role subtitles ---------- */
.out .hud .role{margin-left:6px;text-transform:none;letter-spacing:0;font-family:var(--f-ui);font-size:12px;color:var(--on-navy-dim)}

/* ---------- In-phone: ordering flow ---------- */
.screen button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.screen button:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.screen .abtn{background:var(--p);color:var(--pi)}
.screen .abtn--solid{padding:1.05em 1em;font-size:.9em;font-weight:700;border-radius:1em}
.seg2{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:.25em;border-radius:1em;background:#ECEDEF;margin:.2em 0 .8em}
.seg2 button{position:relative;z-index:1;padding:.6em .3em;font-size:.66em;font-weight:700;color:#5D6672;transition:color 260ms ease}
.seg2 button.on{color:#121821}
.seg2__thumb{position:absolute;left:.25em;top:.25em;bottom:.25em;width:calc(50% - .25em);border-radius:.8em;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);transition:transform 380ms var(--ease-emph)}
.seg2.is-tx .seg2__thumb{transform:translateX(100%)}
.cat{display:grid;gap:.45em}
.cat:not([hidden]){animation:catIn 380ms var(--ease-out)}
@keyframes catIn{from{opacity:0;transform:translateX(.8em)}to{opacity:1;transform:none}}
button.prod__i{width:100%;text-align:left;box-shadow:0 0 0 1.5px color-mix(in oklab,var(--a) 60%,#fff),0 1px 2px rgba(0,0,0,.05);transition:transform 160ms var(--ease-out)}
button.prod__i:active{transform:scale(.97)}
.price{margin-left:auto;font-size:.76em;font-weight:700;color:#121821;font-variant-numeric:tabular-nums}
.rxok{color:var(--pt)!important;font-weight:700}
.samp{margin:.7em 0 0;font-size:.58em;color:#6B7480;text-align:center;letter-spacing:.02em}
.samp--l{text-align:left;margin:.4em 0 0}
.prod__ico.p4::after{border-radius:.2em}
.prod__ico.t1::after{inset:26% 34%;border-radius:1em .2em 1em .2em}
.prod__ico.t2::after{inset:30%;border-radius:50% 50% .2em .2em}
.prod__ico.t3::after{inset:28%;border-radius:50%;border-style:dashed}
.ah--back{padding:.4em 0 .6em}
.back{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.back svg{width:1em;height:1em;fill:none;stroke:#3A4350;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pd__art{position:relative;height:6.6em;border-radius:1.2em;overflow:hidden;background:linear-gradient(140deg,var(--p),color-mix(in oklab,var(--p) 50%,var(--a)));color:var(--pi)}
.pd__art svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;opacity:.3}
.pd__art--tx{background:linear-gradient(140deg,color-mix(in oklab,var(--a) 70%,#fff),var(--p))}
.pd__ico{position:absolute;left:1em;bottom:1em;width:2.8em;height:2.8em;background:#fff}
.pd__name{margin:.7em 0 0;font-size:1.4em;font-weight:700;letter-spacing:-.02em;color:#121821}
.rxbadge{display:inline-flex;align-items:center;gap:.4em;margin:.4em 0 0;padding:.4em .7em;border-radius:2em;background:color-mix(in oklab,var(--a) 20%,#fff);color:var(--pt);font-size:.64em;font-weight:700}
.rxbadge svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pd__s{margin:.6em 0 0;font-size:.68em;line-height:1.45;color:#5D6672}
.pd__rows{margin:.8em 0 0;display:grid;gap:.1em}
.pd__rows div{display:flex;justify-content:space-between;align-items:center;gap:.6em;padding:.5em 0;border-top:1px solid #E7E9EC;font-size:.7em}
.pd__rows dt{color:#6B7480}
.pd__rows dd{margin:0;font-weight:700;color:#121821;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.cset--app{font-size:.82em;border-color:color-mix(in oklab,var(--p) 50%,#fff);color:var(--pt);background:color-mix(in oklab,var(--a) 10%,#fff)}
.pd__lbl{margin:.8em 0 .4em;font-size:.66em;font-weight:700;color:#121821}
.times{display:flex;gap:.4em}
.times span{flex:1;text-align:center;padding:.6em 0;border-radius:.8em;background:#fff;font-size:.64em;font-weight:600;color:#4A5360;box-shadow:inset 0 0 0 1px #E3E6EA;transition:background-color 300ms ease,color 300ms ease,box-shadow 300ms ease,transform 200ms var(--ease-out)}
.times span.tpick-on{background:var(--p);color:var(--pi);box-shadow:none;transform:scale(1.04)}
.abtn--cta{position:absolute;left:1.25em;right:1.25em;bottom:1.7em;width:auto;overflow:hidden;transition:transform 160ms var(--ease-out),background-color 300ms ease}
.abtn--cta .lbl-a,.abtn--cta .lbl-b{display:inline-flex;align-items:center;gap:.4em;transition:transform 380ms var(--ease-emph),opacity 260ms ease}
.abtn--cta .lbl-b{position:absolute;inset:0;justify-content:center;transform:translateY(110%);opacity:0}
.abtn--cta .lbl-b svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.abtn--cta.is-press{transform:scale(.96)}
.abtn--cta.is-done .lbl-a{transform:translateY(-110%);opacity:0}
.abtn--cta.is-done .lbl-b{transform:none;opacity:1}
/* checkout */
.cart{display:grid;gap:.45em}
.cart__i{display:flex;align-items:center;gap:.7em;padding:.65em .7em;border-radius:1em;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.cart__i b{display:block;font-size:.78em;color:#121821}
.cart__i small{display:block;font-size:.6em;color:#7A838F}
.cart__i > span:last-child{margin-left:auto;font-size:.76em;font-weight:700;color:#121821}
.pick{display:flex;align-items:center;gap:.7em;margin-top:.7em;padding:.7em;border-radius:1em;background:color-mix(in oklab,var(--p) 8%,#fff);box-shadow:inset 0 0 0 1.5px var(--p)}
.pick i{flex:none;width:1.2em;height:1.2em;border-radius:50%;box-shadow:inset 0 0 0 .35em var(--p)}
.pick b{display:block;font-size:.74em;color:#121821}
.pick small{display:block;font-size:.6em;color:#6B7480}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:.9em;padding-top:.7em;border-top:1px solid #E3E6EA;font-size:.8em;color:#4A5360}
.tot b{font-size:1.35em;color:#121821;font-variant-numeric:tabular-nums}
.abtn--pay{position:absolute;left:1.25em;right:1.25em;bottom:6.3em;width:auto;transition:transform 160ms var(--ease-out),opacity 300ms ease}
.abtn--pay:active{transform:scale(.96)}
.sent{position:absolute;inset:3.9em 1.25em 5.8em;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5em;background:#F7F6F3;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity 420ms var(--ease-out),transform 520ms var(--ease-emph)}
.sent__ico{display:grid;place-items:center;width:4em;height:4em;border-radius:50%;background:var(--p);box-shadow:0 .8em 1.6em -.6em color-mix(in oklab,var(--p) 70%,transparent)}
.sent__ico svg{width:2em;height:2em;fill:none;stroke:var(--pi);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 500ms var(--ease-out) 250ms}
.sent b{font-size:1.05em;color:#121821;letter-spacing:-.01em}
.sent small{font-size:.66em;line-height:1.45;color:#5D6672;max-width:22em}
.scr--co.is-sent .sent{opacity:1;transform:none}
.scr--co.is-sent .sent__ico svg{stroke-dashoffset:0}
.sheet{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;background:rgba(10,14,20,0);pointer-events:none;transition:background-color 320ms ease}
.sheet__card{width:100%;padding:.6em 1.2em 2.2em;border-radius:1.6em 1.6em 0 0;background:#fff;box-shadow:0 -1em 2em -1em rgba(0,0,0,.3);transform:translateY(105%);transition:transform 520ms var(--ease-emph)}
.scr--co.is-sheet .sheet{background:rgba(10,14,20,.38)}
.scr--co.is-sheet .sheet__card{transform:none}
.sheet__grab{display:block;width:3em;height:.32em;margin:0 auto .8em;border-radius:1em;background:#D7DBE0}
.sheet__top{display:flex;align-items:center;gap:.6em;padding-bottom:.7em;border-bottom:1px solid #EEF0F2}
.sheet__top b{font-size:.84em;color:#121821;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet__x{margin-left:auto;font-size:.64em;color:var(--pt);font-weight:600}
.sheet__row{display:flex;justify-content:space-between;gap:.6em;padding:.6em 0;border-bottom:1px solid #EEF0F2;font-size:.68em;color:#6B7480}
.sheet__row b{color:#121821}
.sheet__row--t{font-size:.76em}
.sheet__row--t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet__row--t b{font-size:1.15em}
.sheet__confirm{display:flex;flex-direction:column;align-items:center;gap:.4em;padding-top:1em}
.ring{width:3.4em;height:3.4em}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:#E7E9EC;stroke-width:2.5}
.ring__fg{fill:none;stroke:var(--p);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:107;stroke-dashoffset:107}
.ring__ok{fill:none;stroke:var(--p);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transform:rotate(90deg);transform-origin:20px 20px}
.scr--co.is-paying .ring__fg{stroke-dashoffset:0;transition:stroke-dashoffset 900ms cubic-bezier(.65,0,.35,1)}
.scr--co.is-paid .ring__ok{stroke-dashoffset:0;transition:stroke-dashoffset 360ms var(--ease-out)}
.scr--co.is-paid .ring{animation:pop 420ms var(--ease-out)}
.sheet__msg{font-size:.66em;font-weight:600;color:#4A5360}
/* approval status */
.ready{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35em;padding:1.3em 1em;border-radius:1.25em;background:linear-gradient(150deg,var(--p),color-mix(in oklab,var(--p) 70%,#000));color:var(--pi)}
.ready__ico{display:grid;place-items:center;width:3em;height:3em;border-radius:50%;background:rgba(255,255,255,.18);transform:scale(.6);opacity:0;transition:transform 520ms cubic-bezier(.2,1.3,.35,1) 900ms,opacity 300ms ease 900ms}
.ready__ico svg{width:1.6em;height:1.6em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ready b{font-size:1.2em;letter-spacing:-.01em}
.ready small{font-size:.64em;opacity:.85}
.scr.is-play .ready__ico{transform:none;opacity:1}
.tline--st{margin-top:1.4em;padding:0 .3em;gap:1.05em}
.tline--st li{align-items:center}
.tline--st i{margin-top:0}
.tline--st li + li::before{top:-1.05em;height:1.05em}
.tline--st li.d2 i,.tline--st li.d3 i{background:#fff;box-shadow:inset 0 0 0 2px #D2D7DD;transition:background-color 300ms ease,box-shadow 300ms ease}
.scr.is-play .tline--st li.d2 i{background:var(--p);box-shadow:none;transition-delay:300ms}
.scr.is-play .tline--st li.d3 i{background:var(--p);box-shadow:none;transition-delay:900ms}
.tline--st li.d2,.tline--st li.d3{opacity:.5;transition:opacity 300ms ease}
.scr.is-play .tline--st li.d2{opacity:1;transition-delay:300ms}
.scr.is-play .tline--st li.d3{opacity:1;transition-delay:900ms}
/* loyalty */
.scr[data-s="6"] .rcard__bar i{width:100%;transform:scaleX(.9);transition:transform 1000ms var(--ease-emph)}
.scr[data-s="6"].is-unlock .rcard__bar i{transform:scaleX(1)}
.scr[data-s="6"] .rcard__burst::before,.scr[data-s="6"] .rcard__burst::after{animation:none}
.scr[data-s="6"].is-unlock .rcard__burst::before{animation:burst 1100ms var(--ease-out)}
.scr[data-s="6"].is-unlock .rcard__burst::after{animation:burst 1100ms var(--ease-out) 150ms}
.pfly{position:absolute;left:50%;top:21em;z-index:3;padding:.4em .8em;border-radius:2em;background:var(--a);color:#10151C;font-size:.8em;font-weight:800;box-shadow:0 .6em 1.4em -.5em rgba(0,0,0,.35);transform:translate(-50%,0) scale(.6);opacity:0;pointer-events:none}
.scr.is-play .pfly{animation:pfly 1100ms var(--ease-emph) both}
@keyframes pfly{0%{opacity:0;transform:translate(-50%,0) scale(.6)}25%{opacity:1;transform:translate(-50%,-.8em) scale(1.08)}100%{opacity:0;transform:translate(10%,-10em) scale(.5)}}
.perk--unlock .u-b{display:none}
.scr.is-unlock .perk--unlock .u-a{display:none}
.scr.is-unlock .perk--unlock .u-b{display:inline}
.scr.is-unlock .perk--unlock small.u-b{display:block;color:var(--pt);font-weight:700}
.abtn--lock{background:transparent!important;color:#8A93A0!important;box-shadow:inset 0 0 0 1px #D7DBE0}
.scr.is-unlock .abtn--lock{background:var(--p)!important;color:var(--pi)!important;box-shadow:none;animation:pop 420ms var(--ease-out)}
.scr.is-unlock .perk--unlock{box-shadow:0 0 0 1.5px var(--a),0 1px 2px rgba(0,0,0,.05)}

.rm .sent,.rm .sheet__card{transition:none}
.scr{pointer-events:none}.scr.is-cur{pointer-events:auto}
.phone.sheet-open .tabs{transform:translateY(105%)}

/* ---------- In-phone additions (v7 chunk 3) ---------- */
.prod__i--rx.is-tap{transform:scale(.97);background:color-mix(in oklab,var(--a) 20%,#fff)}
.sheet__msg{transition:opacity 220ms ease}
.scr--co.is-paying .sheet__msg{opacity:0}

/* ---------- Chapter 02: tablets and phones ---------- */
@media (max-width:1180px){
  .app__grid{grid-template-columns:minmax(280px,340px) minmax(0,1fr) minmax(230px,260px);gap:28px}
  /* notes-1: the narrower console keeps its larger labels on one line (heading) or lets the status chip wrap cleanly */
  .console__h{letter-spacing:.08em}
  .creq__st span{white-space:normal}
}
@media (max-width:1080px){
  .app__grid{grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:36px}
  .console{display:none}
  .ctoast{position:absolute;left:50%;bottom:15%;z-index:6;display:flex;align-items:center;gap:9px;width:max-content;max-width:calc(var(--pw) * .94);padding:10px 13px;border-radius:12px;background:rgba(7,22,48,.92);border:1px solid rgba(216,190,126,.55);box-shadow:0 16px 34px rgba(0,0,0,.42);color:var(--on-navy-hi);font:500 12.5px/1.3 var(--f-ui);transform:translate3d(-50%,0,70px);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .ctoast__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--champ);box-shadow:0 0 0 3px rgba(216,190,126,.22)}
  .ctoast__txt{display:grid}
  .ctoast__txt > span{grid-area:1/1;transition:opacity 240ms ease,visibility 0s}
  .ctoast__ok{opacity:0;visibility:hidden;font-weight:600;color:var(--champ)}
  .app.is-ok .ctoast__wait{opacity:0;visibility:hidden}
  .app.is-ok .ctoast__ok{opacity:1;visibility:visible}
  .app.is-armed .ctoast{opacity:0;visibility:hidden;transform:translate3d(-50%,14px,70px);transition:opacity 300ms var(--ease-out),transform 460ms var(--ease-emph),visibility 0s linear 460ms}
  .app.is-armed.is-console .ctoast{opacity:1;visibility:visible;transform:translate3d(-50%,0,70px);transition:opacity 360ms var(--ease-out),transform 520ms var(--ease-emph),visibility 0s}
}
@media (max-width:760px){
  .app{padding:80px 0 40px} /* screen map fix (pass 3): a shorter tail before the chapter 03 question */
  .app__pin{padding:40px var(--gut) 16px}
  html.motion .app__track{height:calc(5 * 55svh + 100svh)}
  html.motion .app__pin{height:100svh;min-height:600px;padding:calc(var(--nav-h) + 12px) var(--gut) 14px;align-items:stretch}
  /* design-07 (pass 3 fixer): the caption that says what the phone is doing reads right under the phone, before the form
     chrome; the "Modeled on a live clinic app" line moves under the config strip. The device column dissolves into the
     grid so its two parts can sit apart (phones never tilt, so it needs no perspective here). */
  .app__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"device" "caps" "cfg" "model" "steps";gap:12px;padding-left:0;align-items:start}
  html.motion .app__grid{grid-template-rows:minmax(0,1fr) auto auto auto auto;height:100%}
  .app__side{display:contents}
  .app__device{display:contents}
  .phone-wrap{grid-area:device;align-self:center;justify-self:center}
  .app__model{grid-area:model;justify-self:center}
  .phone-wrap{--pw:clamp(160px,calc((100svh - 394px) * .4839),232px);--rx:0deg;--ry:0deg}
  .phone-shadow{bottom:-20px;height:24px}
  .app__model{font-size:12.5px;gap:6px 8px;max-width:36ch}
  .app__model .chip{padding:5px 8px;font-size:12.5px}
  .cfg{grid-area:cfg;gap:6px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .cfg__fields{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
  .cfg__lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  #cfg-name{min-height:42px;padding:0 12px}
  .cfg__sw{flex-wrap:nowrap;gap:6px}
  .swatch{width:24px;height:24px}
  .swatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--navy),0 0 0 3.5px var(--champ)}
  .sw-custom{display:none}
  .cfg__note{justify-content:center;font-size:12.5px}
  .steps{grid-area:steps;display:flex;align-items:center;gap:4px}
  .steps li{flex:1 1 0}
  .steps button{width:100%;min-height:44px;gap:0;padding:0 3px;align-content:center}
  .steps__bar{width:100%;height:4px}
  .steps::after{content:attr(data-n);content:attr(data-n) / "";flex:none;margin-left:8px;font:500 13px/1 var(--f-mono);letter-spacing:.06em;color:var(--fine-navy);font-variant-numeric:tabular-nums}
  .steps__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .app__caps{grid-area:caps;text-align:center;margin-top:4px}
  .app__ct{font-size:22px}
  .app__cb{margin:6px auto 0;font-size:14.5px;line-height:1.45;max-width:34ch}
  .ctoast{bottom:13%;font-size:11.5px;padding:9px 11px}
}
@media (max-width:760px) and (max-height:700px){
  .cfg__note{font-size:12px}
  .cfg__note svg{width:12px;height:12px}
  .app__model > span:not(.chip){display:none}
}

/* ---------- Chapter 02: no JS, reduced motion, Pause motion, static fallback (the finished frame) ---------- */
html:not(.motion) .phone-wrap{--rx:0deg;--ry:0deg}
.rm .app__cap{transition:none}
@media (max-width:1080px){
  html:not(.motion) .ctoast{position:relative;left:auto;bottom:auto;margin:16px auto 0;transform:none}
}
@media (max-width:760px){
  html:not(.motion) .phone-wrap{--pw:236px}
}
.rm .scr,.rm .scr--welcome{transform:none;opacity:0;transition:none}
.rm .scr.is-cur{opacity:1}

/* ---------- pass 3 fixer ---------- */
/* design-12: the status chip swaps in sequence (the waiting line out in 120ms, the approval in over 160ms after it),
   never both strings at once */
.app.is-ok .creq__wait{transition:opacity 120ms ease,visibility 0s linear 120ms}
.app.is-ok .creq__done{transition:opacity 160ms ease 120ms,visibility 0s linear 120ms}
@media (max-width:1080px){
  .app.is-ok .ctoast__wait{transition:opacity 120ms ease,visibility 0s linear 120ms}
  .app.is-ok .ctoast__ok{transition:opacity 160ms ease 120ms,visibility 0s linear 120ms}
}
/* interaction-05: the visitor approves. A one-time gold pulse on Approve when the request lands, and a hint. */
.creq__act > div{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.creq__hint{margin-top:12px;font:500 12.5px/1.2 var(--f-ui);color:var(--champ);opacity:0;transition:opacity 300ms ease}
.app.is-ask .creq__hint{opacity:1;transition-delay:700ms}
.hint--fine{display:none}
@media (hover:hover) and (pointer:fine){.hint--fine{display:inline}.hint--touch{display:none}}
@keyframes ce-approve-pulse{0%{box-shadow:0 0 0 0 rgba(233,210,154,.75),0 8px 20px rgba(185,151,75,.28)}100%{box-shadow:0 0 0 14px rgba(233,210,154,0),0 8px 20px rgba(185,151,75,.28)}}
.app.is-ask .creq__btn,.app.is-ask .ctoast__btn{animation:ce-approve-pulse 900ms var(--ease-out) 600ms 2 both}
.ctoast__btn{display:none}
@media (max-width:1080px){
  .ctoast{flex-wrap:wrap;row-gap:8px}
  .ctoast__txt{flex:1 1 0;min-width:0}
  .ctoast__btn{display:block;flex:1 0 100%;min-height:36px;padding:0 14px;border-radius:9px;border:0;background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:var(--navy);font:600 13px/1 var(--f-ui);cursor:pointer;box-shadow:0 8px 20px rgba(185,151,75,.28)}
  .ctoast__btn:focus-visible{outline:2px solid var(--champ);outline-offset:3px}
  .app.is-ok .ctoast__btn{display:none}
}
/* interaction-12: the swatches keep their size and get a larger hit area (34px on phones, 40px on desktop); on phones
   neighbours overlap by 4px, which keeps the name field wide enough for its placeholder */
.swatch::before{content:"";position:absolute;inset:-5px;border-radius:50%}