/* Clinical Edge flagship, pass 3: the hire stage in #agents ("Orbit recruit", Barry's pick B). Script: js/agents.js.
   Markup: .ags > .ags__pin > three canvases (dust, ring, fx), .ags__head (H3 and the approval line), .ags__orbit (the
   clinic mark and five seat buttons), .ags__nodes (the five agent nodes), .ags__cards (five .agc cards, each with a
   live draft .smp) and .ags__pay (the seal tag, the payoff line, the question and the invest picks).

   html.motion: the pin is sticky and js/agents.js places every element from the scroll position (CSS variables --x,
   --y, --w, transforms, opacity and the blade's clip-path). Nothing here animates on its own: no idle motion.
   html.rm (reduced motion, Pause motion, the static fallback, no JS): the same DOM as one composed screen. The lit
   ring and the payoff on top, the five agents as compact cards under them. */

.ags{position:relative}
.ags__dust,.ags__ring,.ags__fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.ags__orbit{pointer-events:none}

/* ================= Motion: one pinned stage ================= */
html.motion .ags{height:540vh} /* js sets the exact length */
html.motion .ags__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
html.motion .ags__pin::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(1100px 760px at 26% 60%,rgba(22,64,122,.42),rgba(22,64,122,0) 70%)}
html.motion .ags__dust{z-index:0}
html.motion .ags__ring{z-index:1}
html.motion .ags__pay{position:absolute;left:var(--x,0);top:0;width:var(--w,auto);z-index:2;transform-origin:0 0} /* golive-02: placed by transform (js), so the payoff never shifts layout */
html.motion .ags__cards{position:absolute;inset:0;z-index:3;pointer-events:none}
html.motion .ags__fx{z-index:4}
html.motion .ags__orbit{position:absolute;inset:0;z-index:5}
html.motion .ags__nodes{position:absolute;inset:0;z-index:6;pointer-events:none}
html.motion .ags__head{position:absolute;left:var(--x,24px);top:var(--y,96px);width:var(--w,auto);z-index:7}
html.motion .agc{position:absolute;left:var(--x,0);top:var(--y,0);width:var(--w,560px);opacity:0;transform-origin:50% 0}
html.motion .ags__pay .invest{pointer-events:none}
html.motion .ags__pay.is-live .invest{pointer-events:auto}

/* ---------- Head ---------- */
.ags__title{margin:0;font:500 40px/1.08 var(--f-disp);letter-spacing:-.015em;color:#fff;text-wrap:balance}
.ags__title em{display:block;font-style:italic;font-weight:400;color:var(--champ)}
.ags__hud{display:flex;align-items:center;gap:10px;margin:14px 0 0;font:500 15.5px/1.35 var(--f-ui);color:var(--on-navy-hi)}
.ags__hud svg{flex:none;width:24px;height:24px;padding:5px;border-radius:50%;border:1px solid rgba(216,190,126,.6);fill:none;stroke:var(--champ);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- The clinic mark at the orbit's center ---------- */
.ags__mark{position:absolute;z-index:2;left:0;top:0;width:var(--mk0,var(--mk,100px));height:var(--mk0,var(--mk,100px))} /* golive-02: a fixed box (--mk0); js scales it */
.ags__disc{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.ags__glow{position:absolute;left:50%;top:50%;width:260%;height:260%;margin:-130% 0 0 -130%;border-radius:50%;background:radial-gradient(circle,rgba(233,210,154,.42) 0%,rgba(216,190,126,.12) 32%,rgba(216,190,126,0) 64%);opacity:var(--mg,.25)}
.ags__clinic{position:absolute;left:50%;top:100%;transform:translate(-50%,10px);transform-origin:50% 0;max-width:160px;overflow:hidden;text-overflow:ellipsis;font:600 13px/1.2 var(--f-ui);letter-spacing:.02em;color:var(--on-navy-hi);white-space:nowrap}

/* ---------- Seats: the five places on the orbit, and the replay buttons ---------- */
.ags__seat{position:absolute;z-index:3;left:0;top:0;width:var(--sd,46px);height:var(--sd,46px);margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.ags__ph{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;border:1.5px dashed rgba(216,190,126,.5);background:rgba(8,24,48,.82);color:rgba(216,190,126,.72);transition:border-color 300ms ease,box-shadow 300ms ease}
.ags__ph svg{width:46%;height:46%}
.ags__seat.is-active .ags__ph{border-style:solid;border-color:var(--champ);box-shadow:0 0 0 5px rgba(216,190,126,.12),0 0 22px rgba(216,190,126,.35)}
.ags__sn{position:absolute;left:50%;top:50%;font:500 13px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--champ);white-space:nowrap;pointer-events:none}
.ags__seat:focus-visible{outline:3px solid var(--champ);outline-offset:5px;border-radius:50%}
@media (hover:hover) and (pointer:fine){.ags__seat:hover .ags__ph{border-color:var(--champ)}}

/* ---------- Nodes: the agents themselves ---------- */
.ags__node{position:absolute;left:0;top:0;width:var(--nd,104px);height:var(--nd,104px);border-radius:50%;display:grid;place-items:center;color:var(--champ);background:radial-gradient(circle at 34% 28%,#21497F 0%,#10305B 46%,#0A1F3E 100%);border:1.5px solid rgba(216,190,126,.85);opacity:0}
.ags__node::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;box-shadow:0 0 0 7px rgba(216,190,126,.08),0 0 46px rgba(216,190,126,.34),inset 0 1px 0 rgba(255,255,255,.14);opacity:var(--gl,1)}
.ags__node::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#F3DFA8 0%,#D4AF5E 48%,#A9883F 100%);box-shadow:0 0 0 6px rgba(216,190,126,.16),0 0 54px rgba(233,210,154,.6);opacity:var(--on,0)}
.ags__node svg{position:relative;z-index:1;width:46%;height:46%;overflow:visible}
.ags__node.is-on{color:var(--navy)}

/* ---------- Cards: the double bezel, cut open by the blade ---------- */
.agc__shell{padding:6px;border-radius:24px;background:rgba(255,255,255,.035);border:1px solid rgba(216,190,126,.24)}
.agc__core{position:relative;border-radius:18px;padding:22px 26px 20px var(--pl,78px);background:linear-gradient(165deg,#12305A 0%,#0C2346 55%,#0A1D3B 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 34px 70px rgba(2,9,22,.5)}
/* the bigger gold tag: solid gold, navy mono caps, the 58 degree cut end */
.agc__tag,.ags__seal{display:inline-flex;align-items:center;height:34px;margin:0;padding:0 34px 0 14px;background:var(--gold);color:var(--navy);font:600 16px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;-webkit-clip-path:polygon(0 0,100% 0,calc(100% - 21px) 100%,0 100%);clip-path:polygon(0 0,100% 0,calc(100% - 21px) 100%,0 100%)}
.agc__name{margin:12px 0 6px;font:500 64px/1 var(--f-disp);letter-spacing:-.02em;color:#fff}
.agc__name .ch{display:inline-block}
.agc__line{margin:0 0 16px;max-width:30em;font:500 20px/1.35 var(--f-ui);color:var(--on-navy-hi);text-wrap:pretty}
.agc__cost{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:16px 0 0}
.agc__lab{width:100%;font:600 14px/1.2 var(--f-ui);letter-spacing:.01em;color:var(--body-navy)}
.agc__cost b{font:500 28px/1 var(--f-disp);color:var(--champ);font-variant-numeric:lining-nums}
.agc__cost .chip{align-self:center}

/* ---------- Live drafts: a small working sample of each agent's output ---------- */
.smp{position:relative;height:var(--smp-h,196px);display:flex;flex-direction:column;border-radius:14px;background:rgba(3,12,28,.55);border:1px solid rgba(255,255,255,.09);overflow:hidden}
.smp__bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin:0;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.07);font:500 13px/1.1 var(--f-ui);color:var(--fine-navy)}
.smp__kind{white-space:nowrap}
.smp__st{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--fine-navy)}
.smp__st i{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor}
.smp__st b{font-weight:600}
.smp__st .st-b{display:none}
.smp.is-done .smp__st{color:var(--champ)}
.smp.is-done .smp__st i{background:var(--champ);border-color:var(--champ)}
.smp.is-done .smp__st .st-a{display:none}
.smp.is-done .smp__st .st-b{display:inline}
.smp__body{position:relative;flex:1;min-height:0;padding:12px}
.caret{display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-.15em;background:currentColor;opacity:0}
.is-typing>.caret,.is-typing .caret{opacity:.9}

/* Pixel: the flyer, then its post and story sizes */
.fly{position:absolute;margin:0;border-radius:6px;background:var(--paper);overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.fly--main{left:12px;top:12px;bottom:12px;width:calc(35% - 8px);max-width:170px;display:flex;flex-direction:column;padding:8px}
.fly__top{margin:0;display:flex;align-items:center;gap:5px;font:600 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.fly__dot{width:9px;height:9px;border-radius:50%;background:var(--navy);box-shadow:inset -3px 0 0 var(--gold)}
.fly__img{position:relative;flex:1;min-height:14px;margin-top:6px;border-radius:3px;background:linear-gradient(150deg,#1A3E70,#0A1E3A);overflow:hidden}
.fly__sun{position:absolute;right:16%;top:18%;width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#F3DFA8,#C9A85C 60%,rgba(201,168,92,0) 72%)}
.fly__blade{position:absolute;left:30%;top:-30%;width:9%;height:170%;background:linear-gradient(var(--gold-hi),var(--gold));transform:rotate(32deg);opacity:.9}
.fly__h{margin:6px 0 0;font:600 15px/1.08 var(--f-disp);color:var(--navy)}
.fly__s{margin:3px 0 0;font:400 11px/1.3 var(--f-ui);color:var(--slate)}
.fly__btn{align-self:flex-start;margin-top:6px;padding:3px 7px;border-radius:3px;background:var(--gold);color:var(--navy);font:700 10.5px/1.2 var(--f-ui)}
.fly--sq{left:min(calc(35% + 18px),194px);top:12px;width:min(calc(29% - 8px),124px);aspect-ratio:1;padding:6px;display:flex;flex-direction:column}
.fly--sq .fly__img,.fly--st .fly__img{margin-top:0}
.fly--sq .fly__h,.fly--st .fly__h{margin:4px 0 0;font-size:12px}
.fly--st{left:min(calc(64% + 24px),332px);top:12px;width:min(calc(17% - 4px),76px);aspect-ratio:9/16;padding:5px;display:flex;flex-direction:column}

/* Reel: the vertical video, its caption typing, the edit tracks */
.smp--reel .smp__body{display:flex;gap:16px}
.vid{position:relative;flex:none;height:100%;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:linear-gradient(170deg,#24538F 0%,#12345F 45%,#081A35 100%);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.vid__glow{position:absolute;left:50%;top:30%;width:70%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(243,223,168,.55),rgba(216,190,126,0) 66%)}
.vid__cap{position:absolute;left:7px;right:7px;bottom:14px;margin:0;font:700 12px/1.2 var(--f-ui);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.vid__prog{position:absolute;left:7px;right:7px;bottom:6px;height:2px;border-radius:1px;background:rgba(255,255,255,.25)}
.vid__prog b{position:absolute;inset:0;border-radius:1px;background:#E9D29A;transform-origin:left;transform:scaleX(0)}
.tl{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding-top:2px}
.tl__lab{margin:0;font:500 13px/1 var(--f-mono);letter-spacing:.06em;color:var(--fine-navy)}
.tl__t{margin-left:6px;color:var(--champ)}
.tl__track{position:relative;height:38px;border-radius:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);overflow:hidden}
.tl__track--b{height:22px}
.clip{position:absolute;top:4px;bottom:4px;border-radius:4px}
.clip.c1{left:2%;width:33%;background:linear-gradient(90deg,#2A5A97,#1B467C)}
.clip.c2{left:36%;width:27%;background:linear-gradient(90deg,#B9974B,#9C7E3B)}
.clip.c3{left:64%;width:34%;background:linear-gradient(90deg,#3B6BA6,#22508A)}
.clip.c4{left:2%;width:58%;background:rgba(216,190,126,.32)}
.clip.c5{left:62%;width:36%;background:rgba(216,190,126,.22)}
.tl__head{position:absolute;top:0;bottom:0;left:0;width:2px;background:#E9D29A;box-shadow:0 0 8px rgba(233,210,154,.8)}

/* Scout: the query, the results, the clinic's own page written for AI answers */
.srch{display:flex;align-items:center;gap:8px;height:32px;margin:0;padding:0 12px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font:500 14px/1 var(--f-ui);color:var(--on-navy-hi)}
.srch svg{flex:none;width:15px;height:15px;color:var(--on-navy-dim)}
.res{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:5px}
.res__row{display:flex;align-items:center;gap:10px;height:var(--rh,26px);padding:0 10px;border-radius:7px;border:1px solid transparent;font:400 14px/1 var(--f-ui);color:var(--on-navy)}
.res__row>i{flex:none;width:8px;height:8px;border-radius:50%;background:rgba(169,180,194,.5)}
.res__row--you{color:#fff;font-weight:600}
.res__row--you>i{background:var(--champ)}
.res__row--you.is-lit{border-color:rgba(216,190,126,.6);background:rgba(185,151,75,.14)}
.aeo{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;background:rgba(216,190,126,.18);font:600 13px/1 var(--f-ui);color:#E9D29A;white-space:nowrap;opacity:0}
.aeo svg{width:11px;height:11px;fill:#E9D29A}

/* Closer: the ad and its headline variants */
.smp--closer .smp__body{display:flex;gap:16px}
.ads{position:relative;flex:1;min-width:0;max-width:320px}
.ad{position:absolute;left:0;top:0;right:12px;bottom:0;border-radius:9px}
.ad--ghost{background:rgba(247,244,238,.12);border:1px solid rgba(247,244,238,.18);transform-origin:20% 100%}
.ad--ghost span{position:absolute;right:9px;top:7px;font:500 12px/1 var(--f-mono);color:rgba(247,244,238,.6)}
.ad--main{background:var(--paper);padding:10px 12px;display:flex;flex-direction:column;box-shadow:0 12px 26px rgba(0,0,0,.38)}
.ad__sp{margin:0;display:flex;align-items:center;gap:6px;font:600 12px/1 var(--f-ui);color:var(--navy)}
.ad__sp i{width:14px;height:14px;border-radius:50%;background:var(--navy);box-shadow:inset -4px 0 0 var(--gold)}
.ad__sp span{font-weight:400;color:#5F6B78}
.ad__h{margin:9px 0 0;min-height:2.24em;font:600 19px/1.12 var(--f-disp);color:var(--navy)}
.ad__b{margin:4px 0 0;font:400 13px/1.35 var(--f-ui);color:var(--slate)}
.ad__cta{align-self:flex-start;margin-top:auto;padding:5px 10px;border-radius:5px;background:var(--navy);color:var(--paper);font:700 12px/1.2 var(--f-ui)}
.var{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:0;padding-top:2px}
.var__l{font:500 13px/1 var(--f-mono);letter-spacing:.04em;color:var(--fine-navy)}
.var b{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.16);font:600 13px/1 var(--f-mono);color:var(--on-navy)}
.var b.on{border-color:var(--champ);background:rgba(185,151,75,.2);color:#E9D29A}

/* Ink: the subject line, then the body fills */
.em{display:flex;flex-direction:column;height:100%}
.em__row{display:flex;align-items:center;gap:10px;margin:0;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08);font:400 14px/1.2 var(--f-ui);color:var(--on-navy)}
.em__k{flex:none;width:64px;font:500 13px/1 var(--f-mono);letter-spacing:.04em;color:var(--fine-navy)}
.em__row--s{font:600 15px/1.25 var(--f-ui);color:#fff}
.em__subj{min-width:0}
.em__body{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.em__body i{position:relative;display:block;height:7px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.em__body i::after{content:"";position:absolute;inset:0;border-radius:3px;background:rgba(216,190,126,.6);transform-origin:left;transform:scaleX(var(--f,0))}
.em__body i:nth-child(2){width:94%}.em__body i:nth-child(3){width:88%}.em__body i:nth-child(4){width:62%}

/* ---------- The payoff ---------- */
.ags__ceil{margin:18px 0 0;font:400 30px/1.25 var(--f-disp);color:var(--on-navy-hi);text-wrap:balance}
.ags__amt{font-weight:500;color:var(--champ);font-variant-numeric:tabular-nums lining-nums}
.ags__ceil .chip{margin-left:4px;vertical-align:.3em}
.ags__bar{position:relative;display:block;max-width:460px;height:4px;margin-top:14px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.ags__bar b{position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,var(--gold),#E9D29A);transform-origin:left;transform:scaleX(var(--p,1))}
.ags__q{margin:22px 0 0;font:italic 500 68px/1.02 var(--f-disp);letter-spacing:-.018em;color:var(--champ);text-wrap:balance}
.ags__q .w{display:inline-block}
.ags__pay .invest{margin-top:22px}
.ags__pay .invest__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:560px}
.ags__pay .invest__chips button{min-height:48px;padding:6px 10px;border-radius:10px;border:1px solid rgba(216,190,126,.5);background:rgba(255,255,255,.03);color:var(--on-navy-hi);font:600 16px/1.15 var(--f-ui);cursor:pointer;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 160ms var(--ease-out)}
.ags__pay .invest__chips button:active{transform:scale(.97)}
.ags__pay .invest__chips button[aria-pressed="true"]{background:var(--champ);border-color:var(--champ);color:var(--navy)}
@media (hover:hover) and (pointer:fine){.ags__pay .invest__chips button:not([aria-pressed="true"]):hover{border-color:var(--champ)}}
.ags__pay .invest__out{margin:12px 0 0;min-height:1.4em;font:400 15px/1.4 var(--f-ui);color:var(--body-navy);transition:color 300ms ease}
.ags__pay .invest__out.is-on{color:#fff}
.ags__src{margin:14px 0 0;max-width:34em;font:400 13px/1.45 var(--f-ui);color:var(--fine-navy)}
.ags__hint{margin:10px 0 0;font:500 13px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--champ)}

/* ---------- Size steps (motion) ---------- */
@media (max-height:800px) and (min-width:761px){
  .ags__title{font-size:36px}
  .ags__hud{margin-top:10px;font-size:15px}
  .agc__name{font-size:56px;margin:10px 0 4px}
  .agc__line{font-size:18.5px;margin-bottom:14px}
  .agc__cost{margin-top:14px}
  .agc__cost b{font-size:25px}
  .ags__ceil{font-size:26px;margin-top:14px}
  .ags__q{font-size:56px;margin-top:16px}
  .ags__pay .invest{margin-top:16px}
  .ags__pay .invest__chips button{min-height:44px;font-size:15px}
  .srch{height:28px}
  .res{--rh:23px;margin-top:7px;gap:4px}
  .res__row:nth-child(3){display:none} /* short screens: two nearby results are enough */
  .vid{min-width:76px}
  .fly__s{display:none} /* short screens: the flyer keeps its picture, headline and button */
  .em__row{padding:5px 0}
  .em__body{gap:7px;margin-top:10px}
}
@media (max-width:760px){
  .ags__title{font-size:24px;line-height:1.12}
  .ags__hud{gap:8px;margin-top:8px;font-size:13.5px}
  .ags__hud svg{width:20px;height:20px;padding:4px}
  .ags__clinic{font-size:12px;transform:translate(-50%,7px);max-width:120px}
  .ags__sn{font-size:12px;letter-spacing:.1em}
  .agc__shell{border-radius:20px;padding:5px}
  .agc__core{border-radius:15px;padding:calc(var(--nd,64px) / 2 + 10px) 16px 14px}
  .agc__tag,.ags__seal{height:30px;padding:0 28px 0 12px;font-size:14px;letter-spacing:.08em;-webkit-clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%);clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%)}
  .agc__name{font-size:40px;margin:8px 0 4px}
  .agc__line{font-size:16.5px;margin-bottom:12px}
  .agc__cost{margin-top:12px;gap:4px 10px}
  .agc__lab{font-size:15px}
  .agc__cost b{font-size:23px}
  .smp__bar{padding:7px 10px;font-size:12px;gap:3px 10px;flex-direction:column;align-items:flex-start} /* golive-02: always two rows, so Drafting to Ready never changes the body's height */
  .smp__body{padding:10px}
  .fly--main{left:10px;top:10px;bottom:10px;width:calc(38% - 8px);padding:7px}
  .fly__h{font-size:13px}
  .fly__s{display:none}
  .fly--sq{left:calc(38% + 12px);top:10px;width:calc(29% - 8px);padding:5px}
  .fly--st{left:calc(67% + 16px);top:10px;width:calc(19% - 6px);padding:4px}
  .fly--sq .fly__h,.fly--st .fly__h{font-size:9.5px}
  .smp--reel .smp__body{gap:12px}
  .tl{gap:8px}
  .tl__lab{font-size:12px}
  .tl__track{height:30px}
  .tl__track--b{height:18px}
  .vid{min-width:70px} /* short phones squeeze the 9:16 frame; keep "questions" whole */
  .vid__cap{left:6px;right:6px;font-size:11px}
  .srch{height:28px;font-size:13px}
  .res{--rh:23px;margin-top:7px;gap:4px}
  .res__row{font-size:13px;gap:8px;padding:0 8px}
  .res__row:nth-child(3){display:none}
  .aeo{font-size:12px;padding:3px 6px}
  .ad__h{font-size:16px}
  .ad__sp{font-size:11px}
  .ad__b{font-size:12px}
  .ad__cta{font-size:11px}
  .var__l{font-size:12px}
  .var b{width:28px;height:28px;font-size:12px}
  .em__row{padding:5px 0;font-size:13px}
  .em__row--s{font-size:13.5px}
  .em__k{width:56px;font-size:12px}
  .em__body{gap:6px;margin-top:9px}
  .em__body i{height:6px}
  .em__body i:nth-child(4){display:none}
  .ags__ceil{font-size:21px;margin-top:12px}
  .ags__ceil .chip{vertical-align:.15em}
  .ags__bar{margin-top:10px}
  .ags__q{font-size:38px;margin-top:12px}
  .ags__pay .invest{margin-top:14px}
  .ags__pay .invest__chips{gap:7px}
  .ags__pay .invest__chips button{min-height:46px;padding:4px 6px;font-size:13.5px}
  .ags__pay .invest__out{margin-top:9px;font-size:13.5px}
  .ags__src{margin-top:10px;font-size:12.5px}
  .ags__hint{margin-top:8px;font-size:12px}
}

/* short phones (Safari with its toolbars showing, about 390x664): cut rows rather than shrink the type, so each draft
   still shows its one clear output inside the card */
@media (max-width:760px) and (max-height:759px){
  .res__row:nth-child(2){display:none} /* one nearby result, then the clinic's own page */
  .ad__b{display:none}
  .ad__h{margin-top:7px}
  .var__l{display:none} /* the A B C picker reads with the B and C drafts behind the ad */
  .var{gap:6px}
  .em__body{margin-top:6px}
  .em__body i:nth-child(3){display:none}
  .em__row{padding:3px 0}
}

/* ================= Static: reduced motion, Pause motion, the static fallback ================= */
html.rm .ags{padding:calc(var(--nav-h) + 14px) 0 8px} /* the top clears the fixed nav, so Pause mid-stage (which lands the stage at the top) never hides the heading */
html.rm .ags__pin{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"head pay" "orbit pay" "cards cards";column-gap:56px;row-gap:18px;align-items:center}
html.rm .ags__dust,html.rm .ags__fx{display:none}
html.rm .ags__head{grid-area:head;position:relative;z-index:2;align-self:end}
html.rm .ags__orbit{grid-area:orbit;position:relative;z-index:3;width:100%;max-width:340px;justify-self:center;aspect-ratio:1/1}
html.rm .ags__ring{z-index:1} /* js/agents.js sizes it to twice the orbit box, so the glow is never cut off */
html.rm .agents{overflow-x:clip} /* pass-3 calc step: on phones that doubled canvas ran past the right edge (390x844 rendered 485px wide in Chromium and scrolled sideways in WebKit); clip at the page edge only */
html.rm .ags__nodes{position:absolute;inset:0;z-index:4;pointer-events:none}
html.rm .ags__node{opacity:1;--on:1;--gl:0}
html.rm .ags__node:not([style]){display:none} /* before js/agents.js places them */
html.rm .ags__glow{opacity:1}
html.rm .ags__pay{grid-area:pay;position:relative;z-index:2;align-self:center}
html.rm .ags__hint{display:none}
html.rm .ags__cards{grid-area:cards;position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:6px}
html.rm .agc{transition:none}
html.rm .agc__shell{height:100%;border-radius:18px;padding:4px}
html.rm .agc__core{height:100%;padding:14px 16px 14px;border-radius:14px;display:flex;flex-direction:column}
html.rm .agc__tag{align-self:flex-start;height:26px;padding:0 22px 0 10px;font-size:12.5px;letter-spacing:.06em;-webkit-clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
html.rm .agc__name{font-size:30px;margin:10px 0 4px}
html.rm .agc__line{font-size:14.5px;line-height:1.4;font-weight:400;color:var(--body-navy);margin:0}
html.rm .smp{display:none}
html.rm .agc__cost{margin-top:auto;padding-top:10px;gap:4px 8px;align-items:center}
html.rm .agc__lab{font-size:14px}
html.rm .agc__cost b{font-size:19px}
html.rm .agc__cost .chip{padding:4px 8px;font-size:12.5px}
html.rm .agc .agc__shell{transition:border-color 300ms ease,box-shadow 300ms ease}
html.rm .agc.is-flash .agc__shell{border-color:var(--champ);box-shadow:0 0 0 3px rgba(216,190,126,.28)}
html.rm .ags__seat .ags__ph{border-style:solid}
html.rm .ags__q{font-size:clamp(44px,4.4vw,60px)}
html.rm .ags__ceil{margin-top:14px}
@media (max-height:800px) and (min-width:761px){
  html.rm .ags{padding-top:calc(var(--nav-h) + 8px)}
  html.rm .ags__pin{row-gap:10px}
  html.rm .ags__orbit{max-width:270px}
  html.rm .ags__ceil{font-size:24px}
  html.rm .ags__q{font-size:46px;margin-top:12px}
  html.rm .ags__pay .invest{margin-top:14px}
  html.rm .ags__pay .invest__chips button{min-height:42px;font-size:15px}
  html.rm .agc__core{padding:11px 13px}
  html.rm .agc__name{font-size:25px;margin:8px 0 2px}
  html.rm .agc__line{font-size:13.5px}
}
@media (max-width:1080px) and (min-width:761px){
  html.rm .ags__cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  html.rm .ags{padding:calc(var(--nav-h) + 12px) 0 8px}
  html.rm .ags__pin{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "orbit" "pay" "cards";row-gap:22px}
  html.rm .ags__orbit{max-width:290px}
  html.rm .ags__cards{grid-template-columns:minmax(0,1fr);gap:10px}
  html.rm .agc__core{padding:13px 14px 12px}
  html.rm .agc__name{font-size:26px;margin:8px 0 2px}
  html.rm .agc__line{font-size:14.5px}
  html.rm .ags__q{font-size:38px}
}

/* pass 3 fixer, copy-10: the compact static cards drop the repeated "Typical cost it covers" label; the range and the
   Estimate chip stay, and the payoff and source lines carry the meaning */
/* Barry (2026-10-10): "Estimated savings" stays visible on every card, larger and brighter, including phones */
/* interaction-12: each seat keeps its size and gets a thumb-size hit area */
.ags__seat::before{content:"";position:absolute;inset:-8px;border-radius:50%}
/* design-13: one hint, worded for the pointer in use (app.css switches .hint--fine and .hint--touch) */
/* golive QA (2026-10-10): the longer ranges ("$2,000 to $10,000 a month") no longer share a phone line with the Estimate
   chip. Wrapped under the range, the chip made a third row, and js/agents.js shrank every draft by 27px to fit it
   (390x844: the flyer and ad buttons were cut off). Phones in motion put the chip on the label's row instead, so the
   cost block keeps its two rows. */
@media (max-width:760px){
  html:not(.rm) .agc__cost{margin-top:7px;align-items:center}
  html:not(.rm) .agc__lab{width:auto;flex:1 1 auto}
  html:not(.rm) .agc__cost .chip{order:1;padding:4px 8px;font-size:12.5px}
  html:not(.rm) .agc__cost b{order:2;flex:0 0 100%}
}