/* Lloyd's prototype stylesheet, scoped to the flow container.
   Every selector is anchored to .web-signup because stylesheet_link_tag :app serves EVERY file
   in app/assets/stylesheets on EVERY page: unscoped, this file's :root block overrode the app's
   --font-* tokens site-wide. Keep new rules anchored. Regenerate scoping, do not hand-edit.
   RonanRx mock: tokens lifted from the live portal pages */
.web-signup{
  --bg:#edf6f9; --bg-alt:#e3ebee; --paper:#fff; --ink:#00434a; --muted:#3f6b70;
  --line:#d0dde2; --brand:#006d77; --brand-hover:#00434a; --brand-soft:#dcecef;
  --sage:#83c5be; --brand-ink:#fff; --alert:#a94e4e; --gold:#b08d57;
  --r:13px; --maxw:540px;
  --font-sans:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-serif:"Newsreader","Source Serif 4",Georgia,serif;
  --font-script:"Dancing Script",cursive;
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
.web-signup *, .web-signup *::before, .web-signup *::after{box-sizing:border-box}
.web-signup{margin:0;padding:0}
.web-signup{
  background:var(--bg); color:var(--ink); font-family:var(--font-sans);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.web-signup h1,.web-signup h2,.web-signup h3{margin:0 0 .5em}
.web-signup h1{font-family:var(--font-sans); font-weight:750; letter-spacing:-.025em; line-height:1.1}
.web-signup a{color:var(--brand)}
.web-signup img{max-width:100%; display:block}
.web-signup button{font:inherit; cursor:pointer}
.web-signup :focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
.web-signup .product-page [hidden]{display:none !important}

/* ---------- chrome: exactly two bars ----------
   Top: wordmark, price, progress. Bottom: trust marks and the primary action.
   Nothing else gets to be persistent. */
/* The product page has its own header; the flow uses .tbar below. */
.web-signup .hdr{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 18px; background:var(--paper); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40}
.web-signup .pill{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:11.5px; color:var(--muted); background:var(--bg-alt);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px}
.web-signup .dot{width:6px; height:6px; border-radius:50%; background:var(--sage)}

.web-signup .tbar{width:100%; background:var(--paper); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40}
/* Wider than the content column on purpose. With Back added, four items will not fit in 540
   and the rail collapsed to a stub while the rocket ran into the counter. Back now hangs to the
   left of where the content starts, which is how the reference reads. */
.web-signup .tb-row{max-width:700px; margin:0 auto; display:flex; align-items:center;
  gap:14px; padding:13px 18px}
/* Back sits first in the header row, left of the wordmark. It used to be a link above the
   content, which cost a whole band of vertical space on every screen that had one. */
.web-signup .tb-back{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  background:var(--brand-soft); border:0; border-radius:10px; padding:8px 13px 8px 11px;
  font-size:14px; font-weight:600; color:var(--brand); line-height:1;
  transition:background .15s}
.web-signup .tb-back svg{width:15px; height:15px; flex:none}
.web-signup .tb-back:hover{background:#cbe1e6}
.web-signup .tb-back.is-off{visibility:hidden; pointer-events:none}
.web-signup .tb-back:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.web-signup .wordmark{font-weight:800; letter-spacing:.04em; font-size:23px; color:var(--ink);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  line-height:1}
.web-signup .wordmark .rx{background:var(--ink); color:#fff; font-size:12px; padding:3px 6px;
  border-radius:5px; letter-spacing:.06em}

.web-signup .wrap{max-width:var(--maxw); margin:0 auto; padding:22px 18px 40px}
.web-signup .wrap.has-bar{padding-bottom:calc(124px + var(--consent-band-h,0px))}
.web-signup .wrap.wide{max-width:720px}

/* ---------- bottom bar ---------- */
.web-signup .botbar{position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:rgba(255,255,255,.95); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:11px 0 calc(11px + env(safe-area-inset-bottom))}
/* The group is centred on the page; inside it the action sits left and the marks sit right.
   Relative, because the treatment request rides on top of the bar as a bump anchored to it. */
.web-signup .bb-in{position:relative; max-width:var(--maxw); margin:0 auto; padding:0 18px; display:flex;
  align-items:center; gap:20px}
/* The action takes every pixel the marks leave, which is most of the bar now that they stack. */
.web-signup .bb-act{flex:1 1 auto; min-width:0}
.web-signup .bb-act .btn{margin:0; width:100%; min-height:56px; font-size:17px}
/* Stacked, and the BLOCK sits right while its contents stay left-aligned. Right-justifying the
   two lines individually left the lock and the shield at different x, because the labels are
   different lengths. */
.web-signup .bb-trust{display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  flex:0 0 auto; margin-left:auto}
.web-signup .bb-mark{display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  color:var(--muted); white-space:nowrap; line-height:1}
.web-signup .bb-mark svg{width:13px; height:13px; flex:none; color:var(--sage)}
@media(max-width:719px){
  .web-signup .bb-in{flex-direction:column; align-items:stretch; gap:11px}
  .web-signup .bb-act{flex:none}
  .web-signup .bb-trust{flex-direction:row; flex-wrap:wrap; align-items:center;
    justify-content:center; max-width:100%; margin:0 auto; gap:14px}
  .web-signup .bb-mark{font-size:11px}
  /* The bar stacks into two rows on a phone, so it needs more clearance. */
  .web-signup .wrap.has-bar{padding-bottom:calc(172px + var(--consent-band-h,0px))}
}

/* ---------- cards ---------- */
.web-signup .card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; position:relative; overflow:hidden;
}
.web-signup .card.accent::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--sage))}
.web-signup .card + .card{margin-top:14px}

.web-signup .row{display:flex; align-items:center; gap:13px; padding:13px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg-alt)}
.web-signup .ico{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand),var(--ink));color:#fff}
.web-signup .ico svg{width:22px;height:22px}
.web-signup .t{font-weight:650;font-size:15px;color:var(--ink)}
.web-signup .sub{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}

/* ---------- buttons ---------- */
.web-signup .btn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  text-decoration:none; box-sizing:border-box;
  min-height:52px; padding:14px 20px; border:0; border-radius:var(--r);
  background:var(--brand); color:#fff; font-weight:650; font-size:16px;
  transition:background .15s;
}
.web-signup .btn:hover{background:var(--brand-hover)}
.web-signup .btn[disabled]{opacity:.4; cursor:not-allowed}
.web-signup .btn.grad{background:linear-gradient(160deg,#0f6a72,#02343a); box-shadow:0 3px 14px rgba(0,52,58,.24)}
.web-signup .btn.grad:hover{background:linear-gradient(160deg,#0c5c63,#022b30)}
.web-signup .btn.ghost{background:transparent; color:var(--brand); border:1px solid var(--line)}
.web-signup .btn.quiet{background:var(--paper); color:var(--brand); border:1.5px solid var(--sage)}
.web-signup .btn.quiet:hover{background:var(--brand-soft); border-color:var(--brand)}
.web-signup .btn.ghost:hover{background:var(--brand-soft)}
.web-signup .btn.sm{min-height:40px; padding:8px 14px; font-size:14px; width:auto}
.web-signup .btn.noall{min-height:46px; font-size:15px}
.web-signup .btn.noall[data-on="1"]{background:var(--brand-soft); border-color:var(--sage);
  color:var(--brand); font-weight:750}
.web-signup .linkbtn{background:none;border:0;color:var(--brand);text-decoration:underline;
  padding:8px 0;font-size:14.5px}

/* ---------- forms ---------- */
.web-signup label.fld{display:block; margin-bottom:14px}
/* `display:block` beats the hidden attribute's UA rule, so it has to be restated. */
.web-signup label.fld[hidden]{display:none}
.web-signup label.fld > span{display:block; font-size:13.5px; font-weight:600; color:var(--muted);
  margin-bottom:6px}
.web-signup input[type=text],.web-signup input[type=tel],.web-signup input[type=email],.web-signup input[type=number],.web-signup input[type=date],.web-signup select,.web-signup textarea{
  width:100%; min-height:48px; padding:11px 13px; font:inherit; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
}
.web-signup input:focus,.web-signup select:focus,.web-signup textarea:focus{outline:2px solid var(--brand); outline-offset:1px}
.web-signup .hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.web-signup .unit{font-size:14px;color:var(--muted);font-weight:600;flex:0 0 auto;min-width:20px}
.web-signup .err{font-size:13px;color:var(--alert);margin-top:6px;font-weight:600}
.web-signup .verify-feedback{margin:-4px 0 14px;color:var(--brand);font-weight:600}
.web-signup .verify-feedback.is-error{color:var(--alert)}
.web-signup .verify-resend{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;
  gap:0 5px;margin:10px 0 -8px;color:var(--muted);font-size:14.5px;line-height:1.5}
.web-signup .verify-resend-button{padding:8px 0;border:0;background:none;color:var(--brand);
  font-weight:650;text-decoration:underline;text-underline-offset:3px}
.web-signup .verify-resend-button:hover{color:var(--brand-hover)}
.web-signup .verify-resend-button:disabled{color:var(--muted);cursor:not-allowed;opacity:.78;
  text-decoration:none}
.web-signup .verify-resend-count{font-variant-numeric:tabular-nums}

/* ---------- blood pressure: the dial is the control ----------
   No slider. The face is draggable and the number field is for anyone who already knows their
   reading, so there are two ways in rather than three. */
.web-signup .bp-row{display:flex; gap:20px; align-items:center}
.web-signup .bp-row + .bp-row{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
/* Focus recolours the rim instead of drawing an outline. An outline box cannot trace a D: below
   its widest point a border-radius corner runs straight while the face curves back in, so the
   ring bowed away from the dial at the bottom. user-select is off because a drag across the face
   otherwise selects the tick labels and the copy beside them. */
.web-signup .bp-dialwrap{flex:0 0 192px; cursor:grab; touch-action:none;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent}
.web-signup .bp-dialwrap:active{cursor:grabbing}
.web-signup .bp-dialwrap:focus{outline:none}
.web-signup .bp-dialwrap:focus-visible .bp-rim{fill:var(--brand)}
.web-signup .bp-dial{width:192px; height:auto; display:block; pointer-events:none;
  user-select:none; -webkit-user-select:none}
.web-signup .bp-dial .bp-rim{transition:fill .15s ease}
.web-signup .bp-ctl{flex:1 1 auto; min-width:0}
.web-signup .bp-lab{display:block; font-size:14px; font-weight:650; color:var(--ink); margin-bottom:9px}
.web-signup .bp-num{display:flex; align-items:center; gap:10px}
.web-signup .bp-num input{width:112px; min-height:58px; padding:8px 12px; font-size:32px; font-weight:750;
  letter-spacing:-.02em; text-align:center; color:var(--ink); font-variant-numeric:tabular-nums}
.web-signup .bp-num input::-webkit-outer-spin-button,
.web-signup .bp-num input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.web-signup .bp-num span{font-size:13px; color:var(--muted)}
.web-signup .bp-hint{display:block; margin-top:11px; font-size:12.5px; color:var(--muted)}
.web-signup .bp-range{display:block; margin-top:3px; font-size:11.5px; color:var(--sage);
  font-variant-numeric:tabular-nums}
.web-signup .bp-skip{margin-top:12px; align-items:flex-start}
.web-signup .bp-skip .box{margin-top:2px}
.web-signup .bp-skips{display:block; font-size:12.5px; font-weight:400; color:var(--muted); margin-top:2px}
@media(max-width:639px){
  .web-signup .bp-row{gap:15px}
  .web-signup .bp-dialwrap{flex:0 0 140px}
  .web-signup .bp-dial{width:140px}
  .web-signup .bp-num input{width:96px; min-height:52px; font-size:27px}
}

/* choice list */
.web-signup .choices{display:grid; gap:10px; margin:0; padding:0; border:0}
.web-signup .choice{
  display:flex; align-items:center; gap:12px; padding:15px 16px; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  width:100%; color:var(--ink); text-align:left; -webkit-appearance:none; appearance:none;
  font-size:15.5px; font-weight:550; transition:border-color .12s, background .12s;
}
.web-signup .choice:hover{border-color:var(--sage); background:var(--brand-soft)}
.web-signup .choice input{position:absolute; opacity:0; pointer-events:none}
.web-signup .choice .box{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);
  flex:none;display:grid;place-items:center;transition:.12s}
.web-signup .choice.multi .box{border-radius:6px}
.web-signup .knum{flex:none; width:23px; height:23px; border-radius:6px; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--muted);
  background:var(--bg-alt); border:1px solid var(--line); transition:.12s}
.web-signup .choice:hover .knum{border-color:var(--sage); color:var(--brand)}
.web-signup .choice[data-on="1"] .knum{background:var(--brand); border-color:var(--brand); color:#fff}
.web-signup .ktick{margin-left:auto; color:var(--brand); font-weight:800; font-size:15px}
.web-signup .choice.kflash{border-color:var(--brand); background:var(--brand-soft)}
/* arrow-key cursor: reads as "this one is under the pointer", distinct from selected */
.web-signup .choice.cursor{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.web-signup .choice.cursor .knum{border-color:var(--brand); color:var(--brand)}
.web-signup .choice[data-on="1"]{border-color:var(--brand); background:var(--brand-soft)}
.web-signup .choice[data-on="1"] .box{border-color:var(--brand); background:var(--brand)}
.web-signup .choice[data-on="1"] .box::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff}
.web-signup .choice.multi[data-on="1"] .box::after{border-radius:1px;width:10px;height:6px;background:none;
  border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg);margin-top:-3px}

/* ---------- progress, inside the top bar ---------- */
/* Segments live in their own track that takes whatever the rocket leaves. Sized as percentages
   of .rail-inner they summed to 100% and pushed the rocket out over the label. */
.web-signup .rail-inner{flex:1; min-width:64px; display:flex; align-items:center}
.web-signup .rail-track{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:3px}
.web-signup .seg{height:4px; border-radius:999px; background:var(--line); position:relative;
  overflow:hidden; min-width:3px; transition:flex .4s cubic-bezier(.4,0,.2,1)}
.web-signup .seg > i{position:absolute; inset:0 auto 0 0; background:var(--brand); border-radius:999px;
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.web-signup .seg.full > i{background:var(--sage)}
/* The bar is the picture and the count is the claim, so the count carries the weight. */
.web-signup .rail-label{flex:0 0 auto; font-size:12.5px; font-weight:500; color:var(--muted);
  white-space:nowrap; margin-left:2px}
.web-signup .rail-label b{font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums;
  font-size:13.5px}
.web-signup .rail-done{font-weight:700; color:var(--brand)}
/* 12px, not 5. The rocket is drawn on a diagonal with its tail in the lower left of its own box,
   so at 5px the track ran into the tail and read as a collision. */
.web-signup .rail-goal{flex:0 0 auto; width:18px; height:18px; margin-left:12px; color:var(--sage);
  transition:color .35s ease}
.web-signup .rail-goal svg{width:100%; height:100%; display:block}
.web-signup .rail-goal .rk-exhaust{opacity:0; transition:opacity .3s ease}
.web-signup .rail-goal.near{color:var(--brand)}
.web-signup .rail-goal.near .rk-exhaust{opacity:1}
@media(max-width:620px){
  .web-signup .tb-row{flex-wrap:wrap; gap:8px 12px; padding:11px 18px}
  .web-signup .wordmark{font-size:20px}
  .web-signup .rail-inner{order:3; flex:1 0 100%}
  .web-signup .rail-label{order:2; margin-left:auto}
}

/* ---------- price: a status line, not a price tag ----------
   Two earlier passes both failed for the same reason: a stacked label over a display number
   is the anatomy of a price tag, and a price tag parked in the corner reads as a cart
   subtotal. So the price stops being display type. One line, all Geist, sized below both the
   question headline and the proof stat so it competes with neither. No fill, no chip, and no
   rule (the proof card's own top border sits 24px under it and two rules that close together
   read as noise). Tabular figures because the number swings 234 / 78 / 117 and proportional
   digits make the line jump when the coupon lands. */
.web-signup .ptag{position:relative}
/* Two stacked rows split by a rule: what was chosen, then what it costs. Nothing else. The
   vial, the approval line and the security line all came out, so the card says one thing per
   row and the money is the only coloured thing in it. */
/* ---------- header nav ----------
   Same structure and behaviour as the ronanrx.com marketing nav: a data-collapsed attribute on
   the list drives visibility, the button mirrors it in aria-expanded, and Escape closes. It
   differs on one point deliberately: the live site shows five inline links on desktop and only
   falls back to the hamburger under 768px, whereas here the hamburger holds the nav at every
   width, so this page keeps the bare wordmark-and-menu header. */
.web-signup .hdr{position:relative; flex-wrap:wrap}
.web-signup .nav-toggle{display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; background:transparent; border:1px solid var(--line);
  border-radius:8px; cursor:pointer; flex:0 0 auto}
.web-signup .nav-toggle:hover{background:var(--bg-alt)}
.web-signup .nav-bars{display:flex; flex-direction:column; gap:4px; width:16px}
.web-signup .nav-bars span{display:block; height:2px; border-radius:2px; background:var(--ink)}
.web-signup .nav-primary{display:none; list-style:none; margin:0; padding:6px 0 4px; flex:1 0 100%;
  order:9; border-top:1px solid var(--line)}
.web-signup .nav-primary[data-collapsed="false"]{display:block}
.web-signup .nav-primary a{display:block; padding:12px 2px; font-size:15px; font-weight:550;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.web-signup .nav-primary a:hover{color:var(--brand)}
.web-signup .nav-primary li:last-child a{border-bottom:0}
.web-signup .nav-signin{display:inline-flex !important; align-items:center; gap:8px; margin-top:10px;
  padding:9px 15px !important; background:var(--ink); color:#fff !important;
  border-radius:8px; font-size:13.5px}
.web-signup .nav-signin:hover{background:var(--brand); color:#fff !important}
.web-signup .nav-signin svg{width:15px; height:15px; flex:0 0 auto}
/* The live site only ever opens this panel on a phone, where full-bleed is right. Held open at
   desktop width the same list stretches a link across the whole viewport, so above the phone
   breakpoint it becomes a card anchored under the button instead. */
@media(min-width:640px){
  .web-signup .nav-primary[data-collapsed="false"]{position:absolute; right:18px; top:100%; width:236px;
    flex:none; padding:8px 16px 14px; background:var(--paper); border:1px solid var(--line);
    border-top:0; border-radius:0 0 12px 12px; box-shadow:0 14px 34px rgba(0,67,74,.13)}
}

/* ---------- product page ---------- */
.web-signup .hero{padding:34px 18px 8px; max-width:720px; margin:0 auto}
.web-signup .hero h1{font-size:clamp(30px,7.2vw,44px); margin-bottom:11px}
.web-signup .deck{font-size:16px; color:var(--muted); line-height:1.5; margin:0 0 20px}
.web-signup .review{display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--muted)}
.web-signup .review .av{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--bg-alt);border:1px solid var(--line)}

.web-signup .pcard{max-width:720px; margin:26px auto 0; padding:0 18px}
.web-signup .pcard .inner{background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:22px; position:relative; overflow:hidden}
.web-signup .pcard .inner::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--sage))}
.web-signup .bignum{font-family:var(--font-sans); font-size:46px; font-weight:600; line-height:1;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.web-signup .bignum del{font-size:30px}
.web-signup .per{font-family:var(--font-sans); font-size:15px; color:var(--muted); font-weight:500}
.web-signup .plines{margin:20px 0 4px; border-top:1px solid var(--line)}
.web-signup .plines .pline{border-bottom:1px solid var(--line); color:var(--ink)}
.web-signup .plines .pline .lbl{color:var(--muted)}
.web-signup .plines .pline.total{border-bottom:0}
.web-signup .coupon{display:flex; gap:9px; margin:18px 0 16px}
.web-signup .coupon input{flex:1; text-transform:uppercase; font-family:var(--font-mono); font-size:14px;
  letter-spacing:.06em}
.web-signup .applied{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--brand-soft); border:1px solid var(--sage); border-radius:10px;
  padding:11px 14px; font-size:14px; font-weight:600; color:var(--ink); margin:18px 0 16px}
.web-signup .flash{animation:flash .5s ease}
@keyframes flash{0%{background:#fff}35%{background:#fff8e1}100%{background:#fff}}

.web-signup .trust{display:grid; gap:9px; margin-top:16px; font-size:13px; color:var(--muted)}
.web-signup .trust div{display:flex; align-items:center; gap:9px}
.web-signup .trust b{color:var(--ink); font-weight:650}

/* ---------- PDP: media left, buy box right ---------- */
.web-signup .pdp{max-width:1040px; margin:14px auto 0; padding:0 18px; display:grid;
  grid-template-columns:1fr; gap:26px; align-items:start}
.web-signup .pdp-media{display:flex; flex-direction:column; min-width:0}
@media(min-width:900px){
  .web-signup .pdp{grid-template-columns:minmax(0,1fr) 430px; gap:44px; margin-top:30px;
    align-items:stretch}
  .web-signup .pdp-media .frame{flex:1 1 auto; aspect-ratio:auto; min-height:420px}
}

.web-signup .frame{background:var(--paper); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; aspect-ratio:1/1}
.web-signup .frame{position:relative}
.web-signup .frame video,.web-signup .frame img{width:100%; height:100%; object-fit:cover; display:block;
  background:#0d1c1f}

/* stage arrows, AG1 style */
.web-signup .navarrow{position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px;
  border-radius:50%; border:0; background:rgba(255,255,255,.93); color:var(--ink);
  display:grid; place-items:center; box-shadow:0 2px 10px rgba(0,26,29,.22);
  transition:background .15s, transform .15s}
.web-signup .navarrow svg{width:18px; height:18px}
.web-signup .navarrow:hover{background:#fff; transform:translateY(-50%) scale(1.06)}
.web-signup .navarrow.prev{left:12px}
.web-signup .navarrow.next{right:12px}
.web-signup .navarrow[hidden]{display:none}
.web-signup .frame [hidden]{display:none}

/* alternating full-bleed bands */
.web-signup .band{width:100%}
.web-signup .band.dark{background:var(--ink); color:#c5dee1; padding:14px 0 40px; margin-top:40px}
.web-signup .band.dark .sect h2{color:#fff}
.web-signup .band.dark .sect p,.web-signup .band.dark .sect li,.web-signup .band.dark .sect ul{color:#bcd8dc}
.web-signup .band.dark .sect .fine{color:#8fb4b8}
.web-signup .band.dark table.lad th{color:#8fb4b8}
.web-signup .band.dark table.lad td{color:#dbeaec; border-bottom-color:rgba(255,255,255,.14)}
.web-signup .band.dark table.lad th{border-bottom-color:rgba(255,255,255,.14)}
.web-signup .band.dark details.faq{border-bottom-color:rgba(255,255,255,.14)}
.web-signup .band.dark details.faq summary{color:#fff}
.web-signup .band.dark details.faq p{color:#bcd8dc}
.web-signup .band.dark .note{background:rgba(131,197,190,.13); border-color:rgba(131,197,190,.34); color:#d6ecea}
.web-signup .band.dark ol{color:#bcd8dc}
.web-signup .band.dark ol b{color:#fff}
.web-signup .band.dark .sect b{color:#fff}
.web-signup .band.light{padding:14px 0 40px; margin-top:40px}

/* AG1-style thumb strip */
.web-signup .thumbs{display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin-top:10px;
  flex:0 0 auto}
.web-signup .thumb{position:relative; padding:0; border:1.5px solid var(--line); border-radius:9px;
  overflow:hidden; background:#0d1c1f; aspect-ratio:1/1; cursor:pointer; transition:border-color .15s}
.web-signup .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.web-signup .thumb:hover{border-color:var(--sage)}
.web-signup .thumb[data-on="1"]{border-color:var(--brand); border-width:2px}
.web-signup .thumb .play{position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,26,29,.34); color:#fff}
.web-signup .thumb .play svg{width:17px; height:17px}
@media(max-width:620px){ .web-signup .thumbs{grid-template-columns:repeat(4,1fr)} }

.web-signup .pdp-media .cap{font-size:12.5px; color:var(--muted); margin:11px 2px 0; line-height:1.5}

.web-signup .buybox{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px 22px}
.web-signup .buybox h1{font-size:clamp(30px,6vw,40px); margin:0 0 14px; line-height:1.06}
.web-signup .buybox h1.one-line{max-width:7ch}
@media(max-width:460px){ .web-signup .buybox h1.one-line{max-width:none; font-size:30px} }
.web-signup .bb-desc{font-size:15px; color:#22565c; line-height:1.55; margin:0; text-wrap:pretty}

/* two badges, side by side */
.web-signup .bb-badges{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0}
.web-signup .bdg{display:flex; align-items:center; gap:10px; min-width:0}
.web-signup .bdg-ico{flex:0 0 38px; width:38px; height:38px; border-radius:50%; background:var(--brand-soft);
  display:flex; align-items:center; justify-content:center; line-height:0}
.web-signup .bdg-ico svg{width:22px; height:22px; fill:var(--brand); stroke:none; display:block}
.web-signup .bdg-ico.flag svg{width:21px; height:21px}
.web-signup .bdg b{display:block; font-size:13.5px; font-weight:700; line-height:1.25; color:var(--ink);
  white-space:nowrap}
.web-signup .bdg > div > span{display:block; font-size:12px; color:var(--muted); margin-top:2px;
  line-height:1.35; white-space:nowrap}
@media(max-width:430px){ .web-signup .bb-badges{grid-template-columns:1fr; gap:14px} }

/* receipt */
.web-signup .rcpt{margin:20px 0}
.web-signup .rcpt-row{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:7px 0; font-size:14.5px}
.web-signup .rcpt-row .lb{color:var(--muted)}
.web-signup .rcpt-row .amt{font-variant-numeric:tabular-nums; white-space:nowrap}
.web-signup .rcpt-row.total{border-top:1px solid var(--line); margin-top:9px; padding-top:14px}
.web-signup .rcpt-row.total .lb{color:var(--ink); font-weight:650; font-size:15px}
.web-signup .rcpt-row.total .amt{font-size:38px; font-weight:800; letter-spacing:-.032em; line-height:1}
.web-signup .rcpt-then{font-size:12.5px; color:var(--muted); margin:8px 0 0; text-align:right}
.web-signup .rcpt del{color:#8fb4b8; margin-right:8px; font-weight:400}
.web-signup .rcpt-row.total del{font-size:20px; letter-spacing:-.01em; vertical-align:middle}
.web-signup .strike{position:relative; display:inline-block; color:#8fb4b8; margin-right:8px;
  font-weight:400; font-size:20px; letter-spacing:-.01em; vertical-align:middle}
.web-signup .strike::after{content:""; position:absolute; left:-1px; right:-1px; top:52%; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left center}
.web-signup .strike.draw::after{animation:strike .34s cubic-bezier(.4,0,.2,1) .1s forwards}
.web-signup .strike.done::after{transform:scaleX(1)}
@keyframes strike{to{transform:scaleX(1)}}
.web-signup .rcpt-row.total .amt .n{display:inline-block; font-variant-numeric:tabular-nums}
.web-signup .offpill.pop{animation:pop .42s cubic-bezier(.34,1.56,.64,1) .28s both}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.web-signup .ftop.slide{animation:slidein .38s cubic-bezier(.4,0,.2,1) both}
@keyframes slidein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.web-signup #burst{position:fixed; inset:0; pointer-events:none; z-index:80}
@media(prefers-reduced-motion:reduce){
  .web-signup .strike.draw::after{animation:none; transform:scaleX(1)}
  .web-signup .offpill.pop,.web-signup .ftop.slide{animation:none}
}
.web-signup .offpill{display:inline-block; margin-left:9px; background:#e2f2ea; color:#166b4a;
  border:1px solid #bfe0d0; border-radius:999px; padding:3px 9px; font-size:10.5px;
  font-weight:800; letter-spacing:.04em; vertical-align:2px; text-transform:none}
.web-signup .rcpt .free{color:#166b4a; font-weight:650}

.web-signup .ftop{background:#e2f2ea; color:#166b4a; border-bottom:1px solid #cbe5d8;
  margin:-24px -22px 20px; padding:11px 22px; border-radius:15px 15px 0 0;
  font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  text-align:center; display:flex; align-items:center; justify-content:center; gap:8px}
.web-signup .ftop svg{width:15px; height:15px; flex:none}

/* kit panel */
.web-signup .bb-incl{padding:17px 0 18px; margin-bottom:20px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.web-signup .incl{font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin:0 0 13px 50px}
.web-signup .oi{width:20px; height:20px; flex:none; color:var(--brand); display:inline-grid; place-items:center}
.web-signup .oi svg{width:20px; height:20px}
.web-signup .feats{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; padding-left:50px}
.web-signup .feats div{display:flex; align-items:center; gap:10px; font-size:13.5px}
.web-signup .kit-icon{flex:0 0 auto; width:21px; height:21px; color:var(--brand); fill:none;
  stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}

.web-signup .bb-links{display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:16px; font-size:13.5px}
.web-signup .bb-links button,.web-signup .bb-links a{background:none; border:0; padding:2px 0; color:var(--brand);
  font-weight:600; font-size:13.5px; text-decoration:none; font-family:inherit}
.web-signup .bb-links button:hover,.web-signup .bb-links a:hover{text-decoration:underline}
.web-signup .bb-links .sep{display:none}
.web-signup .bb-links .cv{width:13px; height:13px; margin-left:5px; vertical-align:-1px;
  transition:transform .2s}
.web-signup .bb-links button[aria-expanded="true"] .cv{transform:rotate(180deg)}

.web-signup .promo-form{display:flex; align-items:stretch; gap:9px; margin:10px 0 12px}
.web-signup .promo-form input{flex:1 1 auto; min-width:0; height:50px; padding:0 14px;
  border-radius:10px; text-transform:uppercase; font-family:var(--font-mono); font-size:14px;
  letter-spacing:.06em}
.web-signup .promo-form input::placeholder{letter-spacing:.06em; color:var(--muted); opacity:.7}
.web-signup .promo-form .btn{flex:0 0 auto; width:auto; height:50px; min-height:0;
  padding:0 24px; border-radius:10px; font-size:15px}

.web-signup .bb-note{font-size:12.5px; color:var(--muted); line-height:1.55; margin:18px 0 0}
.web-signup .paywith{margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.web-signup .paywith[hidden]{display:none}

.web-signup .pline-hr{border:0; border-top:1px solid var(--line); margin:20px 0 14px}
.web-signup .legal{font-size:12.5px; color:var(--muted); line-height:1.55; margin:0 0 9px}
.web-signup .legal b{color:var(--ink); font-weight:700}

/* card brands */
.web-signup .cards{display:flex; gap:7px; align-items:center; justify-content:center;
  margin:0 0 8px; flex-wrap:nowrap}
.web-signup .cbrand{flex:0 0 auto; height:26px; border:1px solid var(--line); border-radius:5px;
  background:var(--paper); display:inline-flex; align-items:center; justify-content:center;
  padding:0 9px; font-size:10px; font-weight:800; line-height:1; white-space:nowrap}
.web-signup .cbrand.visa{color:#1a1f71; font-style:italic; font-size:12px; letter-spacing:-.03em}
.web-signup .cbrand.amex{background:#016fd0; border-color:#016fd0; color:#fff; font-size:9px}
.web-signup .cbrand.dsc{color:#4d4d4d; font-size:8.5px}
.web-signup .cbrand.mc{padding:0 10px}
.web-signup .cbrand.mc i{width:13px; height:13px; border-radius:50%; display:block}
.web-signup .cbrand.mc i:first-child{background:#eb001b}
.web-signup .cbrand.mc i:last-child{background:#f79e1b; margin-left:-4px; mix-blend-mode:multiply}
.web-signup .powered{font-size:11.5px; color:var(--muted); margin:0; text-align:center}
.web-signup .powered b{color:#635bff; font-weight:800; font-size:12.5px; letter-spacing:-.01em}

/* ---------- homepage-style assurance strip ---------- */
.web-signup .assure{display:grid; grid-template-columns:1fr; gap:14px; margin:0; padding:0}
.web-signup .assure.two{display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:20px;
  border-top:1px solid var(--line); padding-top:19px}
.web-signup .assure.two > div{flex:0 1 auto}
.web-signup .assure.two span{white-space:nowrap}
@media(max-width:520px){ .web-signup .assure.two{grid-template-columns:1fr; gap:14px} }
.web-signup .assure > div{display:flex; align-items:flex-start; gap:12px}
.web-signup .assure .ai{flex:0 0 24px; width:24px; height:24px; color:var(--brand)}
.web-signup .assure .ai svg{width:24px; height:24px; display:block}
.web-signup .assure b{display:block; font-size:14px; font-weight:650; color:var(--ink); line-height:1.3}
.web-signup .assure span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4}


/* ---------- product page long form ---------- */
.web-signup .sect{max-width:720px; margin:0 auto; padding:34px 18px 0}
.web-signup .sect h2{font-family:var(--font-sans); font-size:22px; font-weight:750; letter-spacing:-.02em;
  margin-bottom:11px}
.web-signup .sect p{margin:0 0 14px; color:#22565c}
.web-signup .sect ul{margin:0 0 14px; padding-left:20px; color:#22565c}
.web-signup .sect li{margin-bottom:7px}
.web-signup .rule{max-width:720px;margin:34px auto 0;padding:0 18px}
.web-signup .rule hr{border:0;border-top:1px solid var(--line)}

.web-signup table.lad{width:100%; border-collapse:collapse; font-size:14.5px; margin:6px 0 14px}
.web-signup table.lad th,.web-signup table.lad td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line)}
.web-signup table.lad th{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.web-signup table.lad td:last-child,.web-signup table.lad th:last-child{text-align:right; font-variant-numeric:tabular-nums}

.web-signup details.faq{border-bottom:1px solid var(--line); padding:14px 0}
.web-signup details.faq summary{cursor:pointer; font-weight:650; font-size:15.5px; list-style:none}
.web-signup details.faq summary::-webkit-details-marker{display:none}
.web-signup details.faq summary::after{content:"+"; float:right; color:var(--brand); font-size:20px; line-height:1}
.web-signup details.faq[open] summary::after{content:"\2212"}
.web-signup details.faq p{margin:11px 0 2px; font-size:14.5px}

.web-signup .sticky-cta{position:fixed; left:0; right:0; bottom:var(--consent-band-h,0px); z-index:50; padding:10px 18px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .25s ease; visibility:hidden}
.web-signup .sticky-cta[data-show="1"]{transform:none; visibility:visible}
.web-signup .sticky-cta .in{max-width:720px; margin:0 auto; display:flex; align-items:center; gap:14px}
.web-signup .sticky-cta .px{font-weight:700; white-space:nowrap; font-size:16px}
.web-signup .sticky-cta .btn{flex:1; min-height:46px; font-size:15px}

.web-signup .fine{font-size:12.5px; color:var(--muted); line-height:1.5}
.web-signup .foot{background:var(--ink); color:#c5dee1; margin-top:44px; padding:30px 18px 40px;
  font-size:12.5px; line-height:1.6}
.web-signup .foot .in{max-width:720px;margin:0 auto}
.web-signup .foot b{color:#fff}

/* ---------- flow ---------- */
.web-signup .qh{font-family:var(--font-sans); font-size:clamp(23px,5.6vw,29px); font-weight:750;
  letter-spacing:-.022em; line-height:1.2; margin:4px 0 8px}
.web-signup .qsub{color:var(--muted); font-size:15px; margin:0 0 20px}
.web-signup .note{background:var(--brand-soft); border:1px solid var(--sage); border-radius:11px;
  padding:14px 15px; font-size:14px; color:#164d52; line-height:1.5}
/* ---------- proof rail: one supporting fact beside each question ---------- */
/* One centred column at every width. There is no gutter any more: the treatment request moved
   to the bottom bar and the proof point moved under the question, so nothing wants a second
   column and the content just centres on the page. */
.web-signup .wrap.two{ display:flex; flex-direction:column }
/* The proof runs above the question box, under the back link. */
.web-signup .wrap.two > .prail{ order:2 }
.web-signup .wrap.two > .qbox{ order:3; min-width:0 }
/* Question, sub-line and answers as one object. The option rows inside stay white and rely on
   their borders to separate, which is how the reference does it. */
.web-signup .qbox{ background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:24px 22px }
.web-signup .qbox > .qh{ margin-bottom:8px }
/* A white panel on a white box only separates by its border, which reads as mush on the form
   screens. Nested panels take the page tone instead. Option rows stay white, as in the
   reference: they are a list, not a panel. */
.web-signup .qbox .card{ background:var(--bg) }
.web-signup .qbox > .qsub{ margin-bottom:20px }

/* ---------- proof point: badge, stat beside its headline, optional chart, sourced footer -----
   Sits below the question on the page background, not in a white card. It is supporting
   evidence, so it should read as something you can drop to rather than a second panel
   competing with the question. A rule above it does the separating that the card used to do,
   and --fpad goes to zero so every line shares the question's own left edge. */
/* Touch screens have no hover reveal, so the proof is fully readable by default. Devices that
   can actually hover may dim the supporting material until it is engaged. */
.web-signup .prail{ margin:2px 0 24px; opacity:1; transition:opacity .3s ease }
@media(hover:hover) and (pointer:fine){
  .web-signup .prail{ opacity:.66 }
  .web-signup .prail:hover, .web-signup .prail:focus-within{ opacity:1 }
}
.web-signup .prf{ --fpad:0; background:none; border:0; border-radius:0; padding:0 }
/* Sage, not brand. The title is large enough to out-shout a 29px question if it also carries
   the darker teal, and the question is what the screen is actually asking. */
.web-signup .prf-stat{ font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--sage);
  margin:0; padding:0 }
.web-signup .prf-h{ font-weight:750; line-height:1; color:var(--sage); margin:0; padding:0 }
.web-signup .prf-b{ font-size:12.5px; line-height:1.5; color:var(--muted); margin:0;
  padding:11px var(--fpad) 0 }
/* Centred, not baseline-aligned. Against a two-line heading a baseline puts the number in the
   top band and leaves the second line dangling 18px below it; the two blocks are within 4px
   of the same height, so centring makes them read as one row. The negative margin is an
   optical correction: the box is already flush at the text edge, but the leading digit's side
   bearing makes the number look inset next to the paragraph below. */
/* Text column on the left, visual beside it on the right, centred on each other. Stacked full
   width the block ran close to 300px tall, which is a lot of page for a footnote. */
.web-signup .prf-cols{ display:flex; align-items:center; gap:26px }
.web-signup .prf-txt{ flex:1 1 300px; min-width:0 }
.web-signup .prf-vizcol{ flex:0 1 150px; min-width:0 }
.web-signup .prf-vizcol .prf-viz, .web-signup .prf-vizcol .prf-figs{ padding:0 }

/* The figure, then the claim taking whatever is left of the text column. */
.web-signup .prf-head{ display:flex; align-items:center; flex-wrap:wrap; gap:0 14px; padding:0 var(--fpad) }
.web-signup .prf-head .prf-stat{ font-size:44px; margin:0 0 0 -3px; padding:0; flex:none;
  letter-spacing:-.045em; line-height:.95 }
/* Word-shaped stats: "Dose change", "Since 2000", "Watch it". At the numeric size they eat the
   whole row, so they take a size that still reads as the lead without crowding the claim. */
.web-signup .prf-head .prf-stat.is-word{ font-size:26px; letter-spacing:-.02em; line-height:1.05;
  margin-left:-1px; max-width:46% }
.web-signup .prf-head .prf-h{ margin:0; padding:0; flex:1 1 150px; min-width:0; font-size:20px;
  font-weight:750; letter-spacing:-.022em; line-height:1.08 }
.web-signup .prf-head .prf-h.is-mid{ font-size:17px; line-height:1.15 }
.web-signup .prf-head .prf-h.is-long{ font-size:15px; line-height:1.25 }
.web-signup .prail.is-quote{ opacity:1 }
.web-signup .prf-quote{ margin:11px 0 0; font-size:21px; font-weight:750;
  letter-spacing:-.02em; line-height:1.2; color:var(--brand) }
.web-signup .prail.is-quote .prf-b{ padding-top:9px }
@media(max-width:639px){
  /* Both bases have to be cleared: in column direction those px values become HEIGHTS. */
  .web-signup .prf-cols{ flex-direction:column; align-items:stretch; gap:14px }
  .web-signup .prf-txt, .web-signup .prf-vizcol{ flex:none; width:100% }
  .web-signup .prf-vizcol .prf-icon,
  .web-signup .prf-vizcol .prf-plate,
  .web-signup .prf-vizcol .prf-figs{
    width:100%;
    margin-inline:auto;
  }
  .web-signup .prf-head .prf-stat{ font-size:38px }
  .web-signup .prf-head .prf-h{ font-size:18px }
}
/* The footer is the citation and nothing else: label and citation on the card's one left edge,
   and the whole block is the link when the proof carries a url. */
/* The publisher's wordmark sitting at the end of the paragraph, on the text baseline. */
.web-signup .prf-mark{ display:inline-block; vertical-align:-1px; margin-left:3px; color:var(--muted);
  transition:color .14s }
.web-signup .prf-mark svg{ height:12px; width:auto; display:block }
.web-signup .prf-mark:hover{ color:var(--brand) }
.web-signup .prf-mark:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px }


@media(min-width:900px){
  /* On a dense screen the proof tightens its vertical rhythm rather than shedding content. */
  .web-signup .prail.tight .prf-b{ font-size:12.5px }
}

/* Chrome above the fold shares the two-column shell so the price bar, the progress
   rail and the question column all start on the same left edge. */
/* The two-column widening that used to live here is gone. Every band now caps at --maxw, so
   the wordmark, the question, the proof point and the button all share one centred column. */

/* The label under a custom icon: the timepoint or ratio the drawing is about. */
.web-signup .prf-icon-cap{ margin-top:9px; text-align:center; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.11em; text-transform:uppercase; font-weight:600; color:var(--brand) }

/* Proof figures use one semantic shape per claim: literal ratios, fixed-scale shares,
   measured comparison bars, schedules, or a card-specific icon. */
.web-signup .prf-figs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
  align-items:end; justify-items:center; padding:2px var(--fpad); max-width:150px }
.web-signup .prf-figs.is-five{ grid-template-columns:repeat(5, 1fr) }
.web-signup .prf-figs .fig{ width:100%; max-width:26px; min-width:0; color:#c2d4da; display:block }
.web-signup .prf-figs .fig.on{ color:var(--brand) }
.web-signup .prf-figs svg{ width:100%; height:auto; display:block }
.web-signup .prf-viz{ padding:15px var(--fpad) 0; display:flex; flex-direction:column; gap:8px }
.web-signup .vz-row{ display:flex; align-items:center; gap:8px }
.web-signup .vz-lab{ flex:0 0 62px; font-size:10px; line-height:1.25; color:var(--muted) }
.web-signup .vz-bar{ flex:1 1 0; min-width:0; height:9px; border-radius:999px; background:var(--bg-alt) }
.web-signup .prf-viz.is-share .vz-bar{ position:relative }
.web-signup .prf-viz.is-share .vz-bar::after{ content:""; position:absolute; inset:0;
  border-radius:999px; pointer-events:none; background:repeating-linear-gradient(90deg,
    transparent 0 calc(25% - 1.5px), rgba(255,255,255,.75) calc(25% - 1.5px) 25%) }
.web-signup .vz-bar i{ display:block; height:100%; border-radius:999px; background:#cfdde1;
  transition:width .5s cubic-bezier(.4,0,.2,1) }
.web-signup .vz-row.is-on .vz-bar i{ background:var(--brand) }
.web-signup .vz-val{ flex:0 0 auto; min-width:34px; text-align:right; font-size:11px;
  font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums }
.web-signup .vz-row.is-on .vz-val{ color:var(--ink) }
.web-signup .vz-cap{ font-size:10px; line-height:1.4; color:var(--muted); margin-top:1px }
.web-signup .prf-viz.is-steps{ gap:0 }
.web-signup .vz-step{ position:relative; padding:0 0 13px 17px }
.web-signup .vz-step::before{ content:""; position:absolute; left:0; top:3px; width:7px; height:7px;
  border-radius:50%; background:var(--sage) }
.web-signup .vz-step:first-of-type::before{ background:var(--brand) }
.web-signup .vz-step::after{ content:""; position:absolute; left:3px; top:11px; bottom:0; width:1px;
  background:var(--line) }
.web-signup .vz-step:has(+ .vz-cap){ padding-bottom:2px }
.web-signup .vz-step:has(+ .vz-cap)::after{ display:none }
.web-signup .vz-when{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--brand); line-height:1 }
.web-signup .vz-what{ display:block; font-size:12px; line-height:1.4; color:var(--ink); margin-top:3px }
.web-signup .prf-viz.is-steps .vz-cap{ margin-top:9px }

/* The one measured figure in body copy, set above the prose around it. */
.web-signup .prf-b b{ color:var(--ink); font-weight:650 }

/* ---------- attribution marks ---------- */

/* The FDA outline closes up below 16px: its thinnest feature measures ~1.4px at 12. Nature
   Medicine is the widest mark in the set, so it runs at 14, enough that "medicine" still
   resolves and small enough not to dominate the line it rides on. */
.web-signup .prf-mark[data-h="14"] svg{ height:14px }
.web-signup .prf-mark[data-h="16"] svg{ height:16px }

/* The text mark, for the ten publishers that ship no usable vector at any size. Same slot, same
   size, same colour and same link affordance as a logo, which is what stops the deck reading as
   half-finished. 3px rather than 7px for the same reason as .prf-mark: a wider margin also
   indents the mark when it wraps onto its own line. */
.web-signup .prf-mark-txt{ display:inline-block; vertical-align:baseline; margin-left:3px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; color:var(--muted); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid var(--line); padding-bottom:1px; transition:color .14s }
.web-signup .prf-mark-txt:hover{ color:var(--brand); border-bottom-color:currentColor }
.web-signup .prf-mark-txt:focus-visible{ outline:2px solid var(--brand); outline-offset:3px }

/* The disclosure sits under the paragraph rather than inside it, so the mark is what ends the
   sentence. Block, so it does not depend on where the text happens to wrap. */
.web-signup .prf-cav{ display:block; margin-top:6px; font-size:10.5px; line-height:1.4; color:var(--muted) }

/* Custom icons share the pictogram's 150px ceiling, so a drawing and a chart occupy the same
   column footprint. */
.web-signup .prf-plate, .web-signup .prf-icon{ max-width:150px }
.web-signup .prf-plate svg, .web-signup .prf-icon svg{ width:100%; height:auto; display:block }

/* ---------- start screen ---------- */
.web-signup .st-why{background:var(--bg); border-radius:var(--r); padding:15px 17px; margin:0 0 26px}
.web-signup .st-why b{display:block; font-weight:650; font-size:15px; margin:0 0 3px}
.web-signup .st-why span{color:var(--muted); font-size:14px; line-height:1.5}
.web-signup .st-sh{font-weight:700; font-size:16px; letter-spacing:-.01em; margin:0 0 10px}
.web-signup .st-price{margin:0 0 26px}
.web-signup .st-price .prow{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line)}
.web-signup .st-price .l{font-size:14.5px; color:var(--muted)}
.web-signup .st-price .v{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}
.web-signup .st-price .v s{color:var(--muted); font-weight:500}
.web-signup .st-price .tot{border-bottom:0; padding-top:15px}
.web-signup .st-price .tot .l{font-size:16.5px; font-weight:700; color:var(--ink)}
.web-signup .st-price .tot .v{font-size:27px; font-weight:750; letter-spacing:-.02em}
.web-signup .st-price .pnote{color:var(--muted); font-size:12.5px; margin:2px 0 0}
.web-signup .st-steps{margin:0 0 20px}
.web-signup .st-step{display:flex; gap:14px; align-items:flex-start; padding:12px 0}
.web-signup .st-step + .st-step{border-top:1px solid var(--line)}
.web-signup .st-step .step-n{flex:none; width:19px; font-family:var(--font-mono); font-size:13px; font-weight:600;
  color:var(--muted); padding-top:1px}
.web-signup .st-step .step-b{flex:1; min-width:0}
.web-signup .st-step .step-t{font-weight:650; font-size:15px; line-height:1.3}
.web-signup .st-step .step-s{color:var(--muted); font-size:13.5px; line-height:1.45; margin-top:3px}
.web-signup .st-step .step-m{flex:none; font-size:12.5px; color:var(--muted); padding-top:2px;
  white-space:nowrap}
.web-signup .st-note{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13.5px;
  margin:0 0 14px}
.web-signup .st-note svg{flex:none; width:15px; height:15px; color:var(--sage)}

/* Server-rendered port: the option rows are real checkboxes/radios, so selection state comes
   from :checked rather than the prototype's data-on attribute. Same look, no script. */
.web-signup .choice:has(input:checked){border-color:var(--brand); background:var(--brand-soft)}
.web-signup .choice:has(input:checked) .box{border-color:var(--brand); background:var(--brand)}
.web-signup .choice:has(input:checked) .box::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff}
.web-signup .choice.multi:has(input:checked) .box::after{border-radius:1px;width:10px;height:6px;background:none;
  border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-2px)}
.web-signup .choice:has(input:checked) .knum{background:var(--brand); border-color:var(--brand); color:#fff}
.web-signup .choice:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}

/* Six prototype safety questions, each with one combined Yes/No answer. */
.web-signup .sc-intro{margin:0 0 18px}
.web-signup .sc-list{display:grid; gap:10px}
.web-signup .sc-card{padding:16px}
.web-signup .sc-card-row{display:flex; gap:10px}
.web-signup .sc-num{flex:none; padding-top:2px; color:var(--sage); font-family:var(--font-mono);
  font-size:13px; font-weight:800}
.web-signup .sc-card-body{flex:1; min-width:0}
.web-signup .sc-title{font-family:var(--font-sans); font-size:15.5px; font-weight:600;
  line-height:1.4; letter-spacing:0; margin:0}
.web-signup .sc-why{margin:6px 0 0}
.web-signup .sc-q{border:0; padding:0; margin:12px 0 0; min-width:0}
.web-signup .sc-yn{display:flex; justify-content:flex-end; gap:9px}
.web-signup .sc-opt{position:relative; display:inline-flex; align-items:center; min-width:70px;
  justify-content:center; padding:9px 15px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); color:var(--ink); cursor:pointer; font-size:14px; font-weight:600}
.web-signup .sc-opt:hover{border-color:var(--sage); background:var(--brand-soft)}
.web-signup .sc-opt input{position:absolute; opacity:0; pointer-events:none}
.web-signup .sc-opt:has(input:checked){background:var(--brand); border-color:var(--brand); color:#fff}
.web-signup .sc-opt[data-on="1"]{background:var(--brand); border-color:var(--brand); color:#fff}
.web-signup .sc-opt:focus-within{outline:2px solid var(--brand); outline-offset:2px}

/* Midpoint payoff mirrors the prototype with personalized goal math and four concrete tasks. */
.web-signup .vd-prog{margin:0 0 18px}
.web-signup .qbox:has(.vd-prog) > .qh{white-space:pre-line}
.web-signup .vd-prog-lab{font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.web-signup .vd-bar{height:8px; border-radius:999px; background:var(--bg-alt); overflow:hidden}
.web-signup .vd-bar i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--sage))}
.web-signup .vd-goal{display:flex; align-items:center; gap:16px; padding:18px}
.web-signup .vd-goal-ico{flex:0 0 58px; width:58px; height:58px; border-radius:50%;
  background:var(--brand-soft); display:grid; place-items:center; color:var(--brand)}
.web-signup .vd-goal-ico svg{width:30px; height:30px}
.web-signup .vd-goal-body{flex:1; min-width:0}
.web-signup .vd-goal-label{margin:0 0 4px}
.web-signup .vd-nums{font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
  line-height:1.15; font-variant-numeric:tabular-nums}
.web-signup .vd-nums b{font-weight:800}
.web-signup .vd-arrow{color:var(--sage); margin:0 4px}
.web-signup .vd-togo{font-size:13px; color:var(--muted); margin-top:3px}
.web-signup .vd-left-label{margin:22px 0 10px}
.web-signup .nx-row{display:flex; align-items:center; gap:13px; padding:13px 2px;
  border-bottom:1px solid var(--line)}
.web-signup .nx-row:last-child{border-bottom:0}
.web-signup .nx-ico{flex:0 0 38px; width:38px; height:38px; border-radius:11px;
  background:var(--brand-soft); display:grid; place-items:center; color:var(--brand)}
.web-signup .nx-ico svg{width:20px; height:20px}
.web-signup .nx-body{flex:1; min-width:0; display:block}
.web-signup .nx-t{display:block; font-size:14.5px; font-weight:650; color:var(--ink)}
.web-signup .nx-s{display:block; font-size:12.5px; color:var(--muted); line-height:1.4; margin-top:2px}
.web-signup .nx-go{flex:0 0 auto; color:var(--sage); font-size:22px; line-height:1}
@media(max-width:639px){
  .web-signup .vd-goal{gap:13px; padding:15px}
  .web-signup .vd-goal-ico{flex:0 0 48px; width:48px; height:48px}
  .web-signup .vd-goal-ico svg{width:25px; height:25px}
  .web-signup .vd-nums{font-size:22px}
}

/* Cookie-consent band. The markup is injected site-wide by ConsentScriptInjector and its rules
   live in public/css/style.css, which this flow does not load; restated here on Lloyd's tokens
   so the band is not an unstyled slab under the action bar. */
.web-signup .consent-band{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--paper);
  border-top:1px solid var(--line); padding:14px 20px calc(14px + env(safe-area-inset-bottom))}
.web-signup .consent-band__inner{display:flex; align-items:center; justify-content:space-between; gap:18px;
  max-width:var(--maxw); margin:0 auto}
.web-signup .consent-band__copy{flex:1 1 auto; margin:0; color:var(--muted); font-size:12.5px; line-height:1.5}
.web-signup .consent-band__copy a{color:var(--brand)}
.web-signup .consent-band__actions{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.web-signup .consent-band .button{border-radius:999px; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); font:inherit; font-size:13px; font-weight:600; padding:8px 16px; cursor:pointer}
.web-signup .consent-band .button--primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
/* The band overlays the action bar, so lift the bar clear of it while it is showing. */
.web-signup .botbar{bottom:var(--consent-band-h,0px)}
@media (max-width:560px){
  .web-signup .consent-band__inner{flex-direction:column; align-items:stretch; gap:10px}
  .web-signup .consent-band__actions{justify-content:flex-end}
}

.web-signup .prescription-steps{padding-left:20px; color:#22565c}
.web-signup .prescription-steps li{margin-bottom:11px}
.web-signup .prescription-steps li:last-child{margin-bottom:0}

/* Package 3: early identity capture, confirmation, BMI and serviceability leaves. */
.web-signup .drop{display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  padding:32px 20px; border:2px dashed var(--line); border-radius:var(--r);
  background:var(--paper); color:var(--muted); text-align:center;
  transition:border-color .15s, background .15s, color .15s}
.web-signup .drop:hover,.web-signup .drop[data-over="1"]{border-color:var(--sage);
  background:var(--brand-soft); color:var(--brand)}
.web-signup .drop:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.web-signup .drop svg{width:30px; height:30px; margin-bottom:3px}
.web-signup .drop-t{font-size:15.5px; font-weight:650; color:var(--ink)}
.web-signup .drop:hover .drop-t,.web-signup .drop[data-over="1"] .drop-t{color:var(--brand)}
.web-signup .drop-s{font-size:13px}
.web-signup .drop-s u{color:var(--brand); font-weight:600; text-underline-offset:2px}
.web-signup .drop-file{max-width:100%; overflow-wrap:anywhere; font-size:12px; color:var(--brand)}
.web-signup .drop-file[hidden]{display:none}
.web-signup .id-file-input{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.web-signup .id-processing{position:relative; min-height:178px; overflow:hidden; display:grid;
  place-items:center; padding:17px 20px 14px; border:1.5px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,#f8fbfc 0%,var(--bg) 100%)}
.web-signup .id-processing[hidden]{display:none}
.web-signup .id-processing::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(131,197,190,.18),transparent 55%)}
.web-signup .id-document{position:relative; width:194px; height:104px; overflow:hidden;
  border:1px solid #b9d1d6; border-radius:12px; background:var(--paper);
  box-shadow:0 7px 18px rgba(0,67,74,.08)}
.web-signup .id-document-head{height:18px; background:var(--brand-soft); border-bottom:1px solid #c9dfe3}
.web-signup .id-document-body{display:flex; gap:12px; padding:12px}
.web-signup .id-document-photo{position:relative; flex:0 0 48px; height:59px; overflow:hidden;
  border-radius:8px; background:#e6f0f2}
.web-signup .id-document-photo::before{content:""; position:absolute; top:10px; left:15px;
  width:18px; height:18px; border-radius:50%; background:#9abdc1}
.web-signup .id-document-photo::after{content:""; position:absolute; left:8px; bottom:-8px;
  width:32px; height:32px; border-radius:50% 50% 0 0; background:#9abdc1}
.web-signup .id-document-lines{flex:1; padding-top:3px}
.web-signup .id-document-lines i{display:block; height:5px; margin-bottom:8px; border-radius:999px;
  background:#d7e5e8}
.web-signup .id-document-lines i:nth-child(1){width:86%; background:#a7c8cc}
.web-signup .id-document-lines i:nth-child(2){width:64%}
.web-signup .id-document-lines i:nth-child(3){width:93%}
.web-signup .id-document-lines i:nth-child(4){width:72%}
.web-signup .id-scan-beam{position:absolute; z-index:2; left:0; right:0; top:22%; height:3px;
  background:var(--brand); box-shadow:0 0 0 1px rgba(131,197,190,.18),0 0 13px 4px rgba(0,109,119,.28);
  animation:id-scan-beam 1.8s ease-in-out infinite alternate}
.web-signup .id-scan-beam::before{content:""; position:absolute; inset:-13px 0 3px;
  background:linear-gradient(180deg,transparent,rgba(131,197,190,.13))}
.web-signup .id-scan-status{position:relative; display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:9px; color:var(--ink); font-size:13px; font-weight:650}
.web-signup .id-scan-pulse{position:relative; width:8px; height:8px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 4px rgba(0,109,119,.12);
  animation:id-scan-pulse 1.2s ease-in-out infinite alternate}
.web-signup .id-processing[data-complete="true"] .id-scan-beam{display:none}
.web-signup .id-processing[data-complete="true"] .id-scan-pulse{width:18px; height:18px;
  box-shadow:none; animation:none}
.web-signup .id-processing[data-complete="true"] .id-scan-pulse::after{content:""; position:absolute;
  left:5px; top:3px; width:6px; height:9px; border:2px solid #fff; border-top:0; border-left:0;
  transform:rotate(45deg)}
.web-signup .id-benefits{margin-top:16px}
.web-signup .id-benefits .t{margin-bottom:12px}
.web-signup .id-benefits .feats{padding-left:0}
.web-signup .id-benefit{min-width:0; padding:5px 7px; border-radius:9px;
  transition:color .25s ease,background .25s ease,opacity .25s ease,box-shadow .25s ease}
.web-signup .id-benefit > span:last-child{min-width:0}
.web-signup .id-benefit-icon{flex:0 0 21px; width:21px; height:21px; display:grid; place-items:center;
  border-radius:50%; color:var(--brand)}
.web-signup .id-benefit-icon .kit-icon{width:21px; height:21px}
.web-signup .id-benefit[data-progress-state="pending"]{color:var(--muted); opacity:.52}
.web-signup .id-benefit[data-progress-state="pending"] .id-benefit-icon{border:1.5px solid #a6bdc1}
.web-signup .id-benefit[data-progress-state="pending"] .kit-icon,
.web-signup .id-benefit[data-progress-state="active"] .kit-icon{display:none}
.web-signup .id-benefit[data-progress-state="active"]{color:var(--ink); background:rgba(255,255,255,.8);
  box-shadow:0 0 0 1px rgba(131,197,190,.55); font-weight:650}
.web-signup .id-benefit[data-progress-state="active"] .id-benefit-icon{border:2px solid rgba(0,109,119,.22);
  border-top-color:var(--brand); animation:id-benefit-spin .8s linear infinite}
.web-signup .id-benefit[data-progress-state="complete"]{color:var(--ink)}
.web-signup .id-benefit[data-progress-state="complete"] .id-benefit-icon{background:var(--brand); color:#fff}
.web-signup .id-benefit[data-progress-state="complete"] .kit-icon{width:14px; height:14px; color:#fff; stroke-width:2.5}
.web-signup .id-benefit[data-progress-state="complete"] circle{display:none}
.web-signup .id-progress-note{display:flex; align-items:center; justify-content:center; gap:7px;
  margin:14px 0 0; color:var(--muted); font-size:12.5px}
.web-signup .id-progress-note[hidden]{display:none}
.web-signup .id-progress-note svg{width:14px; height:14px; flex:none; color:var(--brand)}
.web-signup .id-picker-action{display:flex; align-items:center; justify-content:center; margin:0;
  min-height:56px; font-size:17px; cursor:pointer}
.web-signup .id-disclosure{margin:12px 0 0}
.web-signup .id-upload-status{min-height:1.5em; margin:10px 0 0; color:var(--muted); font-size:13px}
.web-signup .id-upload-status.is-visually-hidden{position:absolute; width:1px; height:1px; min-height:0;
  margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap}
.web-signup .wrap.has-bar:has([data-id-upload-busy="true"]){padding-bottom:40px}

@keyframes id-scan-beam{from{top:22%}to{top:76%}}
@keyframes id-scan-pulse{from{opacity:.65}to{opacity:1}}
@keyframes id-benefit-spin{to{transform:rotate(360deg)}}

@media(max-width:359px){
  .web-signup .id-benefits .feats{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .web-signup .id-scan-beam,.web-signup .id-scan-pulse,
  .web-signup .id-benefit[data-progress-state="active"] .id-benefit-icon{animation:none}
  .web-signup .id-benefit{transition:none}
  .web-signup .id-scan-beam{top:50%}
}

.web-signup .alert{display:flex; gap:13px; align-items:flex-start; background:#fdf2f2;
  border:1px solid #f0d6d6; border-radius:12px; padding:15px 16px}
.web-signup .alert-ico{flex:none; width:26px; height:26px; border-radius:50%; border:2px solid #c0504f;
  display:grid; place-items:center; color:#c0504f; margin-top:1px}
.web-signup .alert-ico svg{width:13px; height:13px}
.web-signup .alert b{display:block; font-size:14.5px; color:#a33f3e; margin-bottom:4px}
.web-signup .alert span{display:block; font-size:13.5px; color:#7d3a3a; line-height:1.5}
.web-signup .okrow{display:flex; gap:13px; align-items:flex-start; margin-top:16px}
.web-signup .okrow-ico{flex:none; width:26px; height:26px; border-radius:50%; border:2px solid var(--ink);
  display:grid; place-items:center; color:var(--ink); margin-top:1px}
.web-signup .okrow-ico svg{width:13px; height:13px}
.web-signup .okrow div{font-size:14.5px; line-height:1.5; color:var(--ink)}
.web-signup .okrow div span{display:block; color:var(--muted)}
.web-signup .tm-contact{display:flex; align-items:center; gap:11px; color:var(--ink)}
.web-signup .tm-contact svg{width:20px; height:20px; flex:none; color:var(--ink)}
.web-signup .tm-contact span{font-size:13.5px; line-height:1.4}
.web-signup .tm-contact b{font-weight:650}
.web-signup .id-attempt-count{margin:16px 0 10px}
.web-signup .id-type-instead{margin-top:10px}
.web-signup .id-type-instead + form{margin-top:10px}
.web-signup .id-support-copy{font-size:16px; font-weight:650; margin:16px 0 0}
.web-signup .id-support-card{margin-top:20px; padding:15px 16px}

.web-signup .prov{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--brand); background:var(--brand-soft);
  border-radius:999px; padding:3px 8px; margin-left:8px; vertical-align:middle}
.web-signup .prov.edited{color:#7a5c22; background:#f5ead6}
.web-signup .confirm-height{min-width:0; margin:0; padding:0; border:0}
.web-signup .confirm-height legend{width:100%; margin-bottom:6px; font-size:13.5px;
  font-weight:600; color:var(--muted)}
.web-signup .height-fields{display:flex; align-items:center; gap:8px}
.web-signup .height-fields input{flex:1 1 0; min-width:0}
.web-signup .confirm-note,.web-signup .confirm-error{margin-top:14px}
.web-signup .warn{background:#fbf1f1; border:1px solid #e3c7c7; border-radius:11px;
  padding:14px 15px; font-size:14px; color:#7d3a3a; line-height:1.5}

.web-signup .bmi-value{display:block; margin:12px 0 4px; color:var(--ink);
  font-size:50px; font-weight:800; letter-spacing:-.03em; line-height:1}
.web-signup .bmipill{display:inline-block; background:#f5ead6; color:#7a5c22;
  border:1px solid #e2cfa8; font-size:11px; font-weight:800; letter-spacing:.1em;
  padding:4px 9px; border-radius:999px}
.web-signup .gauge{margin:8px 0 4px}
.web-signup .gtrack{height:11px; border-radius:999px;
  background:linear-gradient(90deg,#dfe9ec 0%,#dfe9ec 22%,var(--sage) 22%,var(--sage) 85%,#e8d7d7 85%);
  position:relative}
.web-signup .gthumb{position:absolute; top:50%; width:20px; height:20px; border-radius:50%;
  background:var(--ink); border:3px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.28);
  transform:translate(-50%,-50%); transition:left .6s cubic-bezier(.4,0,.2,1)}
.web-signup .gscale{display:flex; justify-content:space-between; margin-top:7px;
  color:var(--muted); font-size:11px}
.web-signup .bmi-range{margin:16px 0 0; font-size:16px}
.web-signup .bmi-detail{margin:10px 0 0; color:var(--muted); font-size:14.5px}
.web-signup .microbox{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.web-signup .microbox[hidden]{display:none}
.web-signup .microbox-h{margin-bottom:7px; color:var(--brand); font-size:10.5px;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase}
.web-signup .microbox-b{color:var(--muted); font-size:13.5px; line-height:1.55}
.web-signup .projection-card{margin-top:14px}
.web-signup .projection-card[hidden]{display:none}
.web-signup .trial-pill{background:#e2f2ea; color:#166b4a; border-color:#bfe0d0}
.web-signup .projection-lead{margin:12px 0 2px; color:var(--muted); font-size:15px}
.web-signup .projection-weight{overflow-wrap:anywhere; margin:2px 0; font-size:38px;
  font-weight:800; letter-spacing:-.03em; line-height:1.05}
.web-signup .projection-detail{margin:0 0 12px; color:var(--muted); font-size:15px}
.web-signup .projchart{display:block; width:100%; height:auto; overflow:visible}
.web-signup .projx{display:flex; justify-content:space-between; margin-top:6px;
  color:var(--muted); font-size:11px}
.web-signup .srcline{margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line);
  color:var(--muted); font-size:11px; line-height:1.45}
.web-signup .bmi-disclosure{margin:14px 0 0}

@media(max-width:420px){
  .web-signup .projection-weight{font-size:32px}
}

@media(max-width:639px){
  .web-signup:has(.web-async-photo-form) main{padding-bottom:104px}
  .web-signup .web-async-photo-form{position:fixed; z-index:45; right:0; bottom:0; left:0;
    margin:0; padding:12px 18px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--line);
    background:rgba(255,255,255,.96); box-shadow:0 -8px 24px rgba(0,67,74,.08); backdrop-filter:blur(10px)}
  .web-signup .web-async-photo-form .cmpl-btn{max-width:524px; margin:0 auto}
}

/* ---------- care-tail terminal screens ---------- */
.web-signup-terminal{background:var(--bg)}
.web-signup-terminal main{justify-content:flex-start; padding-top:clamp(32px,7vh,76px)}

/* The booked terminal follows prototype screen 19 exactly: the normal flow header and a
   single 504px question box containing the terminal hierarchy. */
.web-signup.web-signup-booked-terminal main{padding-top:0}
.web-signup.web-signup-booked-terminal main > .w-full{width:100%; max-width:540px; padding:22px 18px 40px}
.web-signup .booked-terminal .tm-badge{display:grid; width:64px; height:64px; margin:0 auto 18px;
  place-items:center; border-radius:50%; background:var(--brand); color:#fff}
.web-signup .booked-terminal .tm-badge svg{width:30px; height:30px}
.web-signup .booked-terminal .tm-h{margin:0 0 8px; color:var(--ink); text-align:center;
  font-family:var(--font-sans); font-size:32px; font-weight:750; letter-spacing:-.03em;
  line-height:1.1; text-wrap:balance}
.web-signup .booked-terminal .tm-sub{margin:0 0 22px; color:var(--muted); text-align:center;
  font-size:15px; line-height:1.5}
.web-signup .booked-terminal .irow{display:flex; align-items:flex-start; gap:13px}
.web-signup .booked-terminal .irow + .irow{margin-top:15px}
.web-signup .booked-terminal .irow-ico{display:grid; width:32px; height:32px; flex:none;
  place-items:center; border-radius:9px; background:var(--brand-soft); color:var(--brand)}
.web-signup .booked-terminal .irow-ico svg{width:16px; height:16px}
.web-signup .booked-terminal .irow-t{display:block; color:var(--ink); font-size:14.5px;
  font-weight:650; line-height:1.3}
.web-signup .booked-terminal .irow-s{margin-top:2px; color:var(--muted); font-size:13px; line-height:1.45}
.web-signup .booked-terminal .booked-next-card{margin-top:12px}
.web-signup .booked-terminal .booked-next-heading{margin:0 0 14px}
.web-signup .booked-terminal .btnrow{display:flex; gap:10px; margin-top:16px}
.web-signup .booked-terminal .btnrow .btn{margin:0}
.web-signup .booked-terminal .btn svg{width:16px; height:16px; flex:none}
.web-signup .booked-terminal .booked-dashboard-action{margin-top:10px}
.web-signup .booked-terminal .tm-foot{display:flex; align-items:center; justify-content:center;
  gap:7px; margin:16px 0 0; color:var(--muted); font-size:12.5px}
.web-signup .booked-terminal .tm-foot svg{width:14px; height:14px; flex:none; color:var(--sage)}

.web-signup .care-terminal{width:100%; border:1px solid var(--line); border-radius:18px;
  background:var(--paper); padding:clamp(24px,5vw,40px); color:var(--ink); box-shadow:0 18px 48px rgba(0,67,74,.08)}
.web-signup .care-terminal-seal{display:grid; width:72px; height:72px; margin:0 auto 20px;
  place-items:center; border:1px solid var(--sage); border-radius:50%; background:var(--brand-soft)}
.web-signup .care-terminal-seal svg{width:44px; height:44px; fill:none; stroke:var(--brand);
  stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.web-signup .care-terminal-kicker{margin:0 0 8px; color:var(--brand); text-align:center;
  font-family:var(--font-mono); font-size:11px; font-weight:750; letter-spacing:.1em; text-transform:uppercase}
.web-signup .care-terminal h1{margin:0; text-align:center; font-family:var(--font-display);
  font-size:clamp(34px,7vw,46px); font-weight:600; letter-spacing:-.025em; line-height:1.05}
.web-signup .care-terminal-doctor{margin:18px 0 0; text-align:center; font-size:18px; font-weight:750}
.web-signup .care-terminal-time,.web-signup .care-terminal-summary{max-width:36ch; margin:7px auto 0;
  color:var(--muted); text-align:center; font-size:15px; line-height:1.55}
.web-signup .care-terminal-steps{display:grid; gap:1px; margin:28px 0 0; overflow:hidden;
  border:1px solid var(--line); border-radius:13px; background:var(--line)}
.web-signup .care-terminal-steps article{background:var(--paper); padding:16px 18px}
.web-signup .care-terminal-steps h2{margin:0 0 4px; font-size:14px; font-weight:750}
.web-signup .care-terminal-steps p{margin:0; color:var(--muted); font-size:13px; line-height:1.5}
.web-signup .care-terminal-actions{display:grid; gap:10px; margin-top:22px}
.web-signup .care-terminal-primary,.web-signup .care-terminal-secondary{display:flex; min-height:48px;
  align-items:center; justify-content:center; border-radius:10px; padding:11px 16px; text-align:center;
  font-size:14px; font-weight:750; text-decoration:none}
.web-signup .care-terminal-primary{border:1px solid var(--brand); background:var(--brand); color:#fff}
.web-signup .care-terminal-secondary{border:1px solid var(--line); background:var(--paper); color:var(--ink)}
.web-signup .care-terminal-primary:focus-visible,.web-signup .care-terminal-secondary:focus-visible{
  outline:3px solid var(--sage); outline-offset:2px}
@media(min-width:560px){
  .web-signup .care-terminal-actions{grid-template-columns:1fr 1fr}
  .web-signup .care-terminal-actions .care-terminal-primary{grid-column:1 / -1}
}