/* Generated by tools/sync-options-styles.mjs. Edit the assessment styles in index.html. */

/* Same system as /recovery: Sora display, Hanken body, #eef2fb ground, glass cards. */
:root{--disp:"Sora",sans-serif;--coral:#e8452f;--blue-deep:#0d3b8f}
/* Backdrop brought over from /recovery: its .nh gradient stack, plus the perspective grid and
   the vignette that sit over it. Fixed here rather than scoped to a hero section, since this
   page is one continuous column. */
body{background:
  radial-gradient(120% 90% at 72% 12%,#ffffff 0%,rgba(255,255,255,0) 46%),
  radial-gradient(130% 100% at 50% 118%,#cdddf5 0%,rgba(205,221,245,0) 55%),
  linear-gradient(160deg,#eff4fc,#d3e0f4);
  background-attachment:fixed;color:var(--text);font-family:var(--body)}
.hp-grid{position:fixed;inset:32% -30% -10% -30%;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(21,94,239,.09) 0 1px,transparent 1px 92px),
    repeating-linear-gradient(0deg,rgba(21,94,239,.09) 0 1px,transparent 1px 92px);
  transform:perspective(900px) rotateX(64deg);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 82%);
  mask-image:linear-gradient(180deg,#000,transparent 82%)}
.hp-vig{position:fixed;inset:0;z-index:5;pointer-events:none;
  box-shadow:inset 0 0 220px rgba(13,24,48,.12),inset 0 -120px 160px rgba(13,24,48,.08)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(46% 40% at 10% 6%,rgba(24,139,246,.13),transparent),
  radial-gradient(44% 40% at 92% 18%,rgba(109,94,252,.13),transparent),
  radial-gradient(52% 46% at 84% 97%,rgba(232,69,47,.08),transparent),
  radial-gradient(46% 42% at 10% 88%,rgba(23,160,106,.08),transparent)}
.ck-wrap{position:relative;z-index:2;max-width:660px;margin:0 auto;padding:clamp(22px,5vw,44px) clamp(18px,5vw,28px) 56px;transition:max-width .25s ease}
.ck-wrap.wide{max-width:1180px}

/* ===== front door: the Linktree photo and the promise ===== */
.hp-brand{position:relative;z-index:3;display:flex;justify-content:flex-start;
  padding:clamp(18px,3vw,30px) 0 0 clamp(20px,10.2vw,140px);margin:0}
/* On a phone it goes back to a normal gutter: two inches in on a 375px screen is most of
   the screen. */
@media(max-width:600px){.hp-brand{padding-left:clamp(18px,5vw,28px)}}
.hp-head{text-align:center;margin:0 0 clamp(22px,4vw,32px)}
.hp-eye{display:flex;justify-content:center;align-items:center;gap:10px;
  font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-deep);margin:0 0 18px;line-height:1.5}
.hp-eye::before,.hp-eye::after{content:"";flex:none;width:20px;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-deep))}
.hp-eye::after{background:linear-gradient(90deg,var(--blue-deep),transparent)}
.hp-eye>span{min-width:0}
/* The photo sits on the side, as it did on the linktree. It is a cutout with a real alpha
   channel, so the page's own tinted ground runs behind him instead of the studio white the
   original JPEG carried, which was painting the right half of the page flat white.
   The cutout is trimmed to his bounding box (597x1063), so cover overshoots and takes his head
   off, while contain caps him at viewport height. Sized taller than the viewport and anchored to
   the top instead: his head stays, his feet run off the bottom edge, and he reads bigger than the
   linktree did rather than merely matching it. No mask or opacity, since there is no background
   left to blend away. */
/* Anchored to the bottom right rather than the top. The headline is 1046px wide and centred, so
   its right edge sits at centre+523; the figure's left edge sits at viewport-576. Those two only
   clear horizontally past a 2198px viewport, so sliding him right cannot fix the collision at any
   real screen size. Starting him below the headline's band does. */
/* Desktop: the figure IS the old fixed side panel, and the image fills it, so the composition
   is unchanged from the approved one. The caption is absolutely placed back where the byline
   was, under the promise, because on this breakpoint it is not part of the photo. */
/* The height is CAPPED, and the cap is derived rather than guessed.
 *
 * The figure is contain-fitted and anchored bottom right, so the drawn image is as wide as
 * its own aspect allows: 597/1063 = 0.5616 of its height. Its left edge therefore sits at
 * viewportWidth - height*0.5616. The quiz card is 660px wide and centred, so the card's right
 * edge is at 50vw + 330px. Keeping him clear of it, with a 30px gutter, means:
 *
 *     50vw - 360px >= height * 0.5616      ->      height <= (50vw - 360px) * 1.78
 *
 * At 70% of viewport height that inequality fails above roughly 1200px tall, which is exactly
 * where he used to grow into the option column.
 *
 * The headline is the other constraint, and on a SHORT wide screen it is the binding one. It is
 * wider than the card and centred, so he cannot clear it sideways at any real width; the
 * original composition clears it by starting him below its band instead. He is anchored to the
 * bottom, so that is a height cap too. At 1366x768 the headline wraps taller and its text runs
 * to y=263, so 100vh - 270px starts him at 270 and the two boxes do not touch. 270 is chosen
 * rather than a rounder number so the term ties with 70vh at exactly 900px tall and does not
 * bind there: at 1440x900 he is still 630px, the approved size, to the pixel.
 *
 * Four terms, smallest wins. An absolute 820px ceiling stops him scaling forever on a very large
 * display. At 1440x900 the binding term is still 70vh, so the approved composition is unchanged. */
/* Bigger, and pushed off the right edge. The cap is what keeps him from reaching the 660px
   content column: the third term is the free space to the right of that column, converted from
   width to height by the cutout's aspect. Running him 7vw past the edge hands that term 7vw of
   extra room, which is where the size comes from. The last term still holds him below the
   header band so he never sits behind the headline.

   He passes behind the headline's last line and reaches the quiz card's outer margin, and that
   is deliberate. Dropped to z-index 0, the same layer as the perspective grid, so he is part of
   the backdrop rather than an object sitting on it, and held at half opacity so the headline
   reads cleanly where the two cross. The 270px in the third term keeps his left edge off the
   answer buttons, which end 263px either side of centre. */
/* ONE rule at every width. There is no desktop figure and a phone figure any more, because
   two rules meant a boundary, and at that boundary he went from 880px tall and bottom-anchored
   to 193px, then jumped to 766px and flipped to top-anchored, all in one pixel of resize.

   What made that necessary was clearance: his height used to be derived from the free space
   beside the 660px content column, so narrowing the window starved him. At 11% on the backdrop
   layer he has nothing to clear, so height comes from the viewport HEIGHT instead and stops
   collapsing as the window narrows. The 88vw term is the only width input left, and it only
   matters on a phone, where his own width would otherwise exceed the screen.

   The push interpolates rather than switching: 143px in at 375px wide, easing to 57px by
   1440px, clamped at both ends. That is the line that used to be a jump. */
.hp-figure{position:fixed;z-index:0;top:14px;right:clamp(-143px, calc((100vw - 375px) * 0.0808 - 143px), 0px);
  left:auto;bottom:auto;margin:0;pointer-events:none;opacity:.11;
  /* Width and height are the SAME three terms, one scaled by the cutout's 0.5617 aspect, so
     whichever term binds it binds both and the box keeps his proportions. width:auto looked
     equivalent and was not: an auto width inside an auto-width box has nothing to resolve
     against, and the browser settled on 172px against a 587px height, squeezing him. */
  width:min(calc((100vh - 20px) * 0.5617), 88vw, 674px);
  height:min(calc(100vh - 20px), calc(88vw * 1.78), 1200px);
  -webkit-mask-image:linear-gradient(180deg,#000 0 62%,transparent 94%);
  mask-image:linear-gradient(180deg,#000 0 62%,transparent 94%)}
.hp-hero{width:100%;height:100%;object-fit:contain;object-position:right top}
/* The pill from /recovery, brought over as it was: mono, letter-spaced, glassy, with the
   live green dot pulsing beside it. It replaces the eyebrow that used to sit here, which
   said the same thing about the same person in different words. Two audience callouts
   stacked on top of each other is one too many. */
.nh-kick{display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;letter-spacing:.14em;
  color:#5f6f8c;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);
  border-radius:999px;padding:11px 20px;box-shadow:0 10px 30px -18px rgba(13,40,90,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap}
.nh-kick .lp{flex:none;width:8px;height:8px;border-radius:50%;background:#12b981;
  box-shadow:0 0 0 4px rgba(18,185,129,.18);animation:nhlp 2s ease-in-out infinite}
@keyframes nhlp{50%{box-shadow:0 0 0 8px rgba(18,185,129,0)}}
@media(max-width:600px){.nh-kick{font-size:9.5px;letter-spacing:.05em;gap:7px;padding:8px 13px}}
@media(prefers-reduced-motion:reduce){.nh-kick .lp{animation:none}}

.hp-badge{display:inline-flex;align-items:center;gap:9px;margin:0;
  font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.hp-badge .dot{display:inline-flex;align-items:center;width:auto;height:26px;
  animation:hpbeat 2.4s ease-in-out infinite}
.hp-badge .dot svg{height:26px;width:auto;display:block;
  filter:drop-shadow(0 2px 4px rgba(64,78,104,.26))}
/* Same size and measure as the headline on /recovery: its .nh-h1 plus that page's inline
   override, copied rather than approximated. */
.hp-hook{font-family:var(--disp);font-weight:800;font-size:clamp(40px,5.6vw,68px);line-height:1.08;
  letter-spacing:-.035em;color:#0d1830;margin:12px auto 0;max-width:20ch;text-wrap:balance}
.hp-hook .g{color:#155eef}
/* One line, but capped at just over the sentence's real rendered width (656px) so it centres
   tight instead of spreading across the block the H1 needs. */
.hp-promise{font-family:var(--disp);font-weight:600;font-size:clamp(14.5px,1.9vw,16.5px);line-height:1.5;
  color:var(--blue-deep);margin:14px auto 0;max-width:62ch;text-wrap:balance}
/* The card column is capped at 660px, which is narrower than that sentence. The header block
   alone breaks out of it so the subheader sits on one line; the card is untouched. Below this
   width there is no room for one line, so it wraps normally. */
/* Centred with a margin, not a transform. The photo figure lives inside this header now, and a
   transform on an ancestor becomes the containing block for a position:fixed descendant, which
   silently shrank the figure and lifted it off the bottom of the viewport. The margin does the
   same centring with nothing for the fixed panel to attach to. */
@media(min-width:1000px){
  .hp-head{width:min(96vw,1120px);margin-left:calc(50% - min(48vw,560px))}
}
@media(max-width:999px){
  .hp-promise{max-width:44ch}
}
.hp-name{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.04em;color:#6a7690;margin:14px 0 0}
@keyframes hpspin{to{transform:rotate(360deg)}}
@keyframes hpbeat{0%,100%{opacity:1}50%{opacity:.78}}

/* Float. Deliberately NOT /recovery's coreFloat: that one carries a 1%/2%/3% jitter which, on an
   infinite loop, twitches every cycle and reads as a rendering glitch rather than a settle.
   Two stops only, so the motion is a clean rise and fall. The lift is sold by the shadow moving
   with it, tight and dark at rest, wide and soft at the top, the way a real raised object casts.
   Only one card is ever visible, so animating the shadow costs one element's paint. */
.ck-card{background:linear-gradient(162deg,rgba(255,255,255,.9),rgba(255,255,255,.6));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.85);border-radius:20px;padding:clamp(24px,5vw,38px);
  box-shadow:0 34px 74px -46px rgba(24,60,140,.55),inset 0 1px 0 rgba(255,255,255,.95);
  will-change:auto;animation:none}
#scr-quiz:not(.assessment-started){will-change:transform;animation:cardFloat 9s ease-in-out infinite}
@keyframes cardFloat{
  0%,100%{transform:translate3d(0,0,0);
    box-shadow:0 26px 54px -36px rgba(24,60,140,.62),inset 0 1px 0 rgba(255,255,255,.95)}
  50%{transform:translate3d(0,-10px,0);
    box-shadow:0 46px 92px -46px rgba(24,60,140,.42),inset 0 1px 0 rgba(255,255,255,.95)}
}
.ck-eyebrow{font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#155eef;margin:0 0 14px}
.ck-h2{font-family:var(--disp);font-weight:700;font-size:clamp(19px,3.2vw,25px);line-height:1.28;letter-spacing:-.02em;color:var(--text);margin:0 0 20px}
/* One word inside a statement, lifted. The statement text itself is never edited. */
.ck-h2 .hl{color:#155eef}
.ck-p{font-size:16px;line-height:1.64;color:var(--muted);margin:0 0 15px}
.ck-p.soft{color:var(--faint);font-size:14.5px}
.ck-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;
  font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.3;color:#fff;text-align:center;
  background:linear-gradient(100deg,#155eef,#188bf6);border:0;border-radius:14px;padding:17px 26px;
  cursor:pointer;box-shadow:0 20px 45px -18px rgba(21,94,239,.75);transition:transform .12s,box-shadow .25s}
.ck-btn:hover{transform:translateY(-1px)}
/* The same shine the Recovery CTA runs. Declaration copied from .btn in site.css so the two
   buttons stay identical, and btnShine itself already lives in that stylesheet. */
#btn-bundle,#btn-bundle0,.ck-btn.shine{overflow:hidden}
#btn-bundle::after,#btn-bundle0::after,.ck-btn.shine::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.15) 35%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.15) 65%,transparent 100%);transform:skewX(-22deg);pointer-events:none;animation:btnShine 2.4s cubic-bezier(.4,0,.2,1) infinite}
#btn-bundle:hover::after,#btn-bundle0:hover::after,.ck-btn.shine:hover::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#btn-bundle::after,#btn-bundle0::after,.ck-btn.shine::after{animation:none;display:none}}
.ck-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.ck-btn:focus-visible{outline:3px solid #155eef;outline-offset:3px}
.ck-ghost{background:none;border:0;font-family:var(--disp);font-weight:600;font-size:14.5px;color:#6a7690;cursor:pointer;padding:12px 4px}
.ck-ghost:hover{color:#155eef}
.ck-ghost:focus-visible{outline:2px solid #155eef;outline-offset:3px;border-radius:8px}
/* progress */
.ck-lede b{font-weight:inherit}
.ck-lede{font-family:var(--disp);font-weight:600;font-size:clamp(14.5px,1.9vw,16.5px);
  line-height:1.5;color:var(--muted);text-align:center;margin:0 0 16px}
.ck-prog{display:flex;align-items:center;gap:10px;margin:0 0 22px}
.ck-bar{flex:1;height:6px;border-radius:99px;background:rgba(20,34,64,.10);overflow:hidden}
.ck-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#155eef,#188bf6);transition:width .35s cubic-bezier(.2,.8,.2,1)}
.ck-step{font-family:var(--disp);font-size:12.5px;font-weight:600;color:#6a7690;font-variant-numeric:tabular-nums;white-space:nowrap}
/* options */
.ck-fs{border:0;padding:0;margin:0 0 8px}
.ck-fs legend{padding:0}
.ck-opt{display:block;position:relative;margin:0 0 9px}
.ck-opt input{position:absolute;opacity:0;width:1px;height:1px}
.ck-opt span{display:block;background:#f7f9fc;border:1.5px solid rgba(20,34,64,.14);border-radius:13px;
  padding:15px 18px;font-family:var(--disp);font-weight:600;font-size:15.5px;line-height:1.4;color:var(--text);cursor:pointer;
  transition:border-color .18s,background .18s,box-shadow .18s}
.ck-opt span:hover{border-color:rgba(21,94,239,.45);background:#fff}
.ck-opt input:checked + span{border-color:#155eef;background:#fff;box-shadow:0 0 0 4px rgba(24,139,246,.14)}
.ck-opt input:focus-visible + span{outline:3px solid #155eef;outline-offset:2px}
.ck-otherlab{display:block;font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#8391ad;margin:14px 0 7px}
.ck-otherfld{width:100%;background:#f7f9fc;border:1.5px solid rgba(20,34,64,.16);border-radius:11px;
  height:52px;padding:0 15px;font-family:var(--body);font-size:15.5px;color:var(--text)}
.ck-otherfld:focus{outline:none;border-color:#188bf6;box-shadow:0 0 0 4px rgba(24,139,246,.14);background:#fff}
.ck-nav{display:flex;align-items:center;gap:14px;margin-top:20px}
.ck-nav .ck-btn{flex:1}
/* form */
.ck-field{margin:0 0 14px}
.ck-field label{display:block;font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8391ad;margin:0 0 7px}
.ck-field input{width:100%;background:#f7f9fc;border:1.5px solid rgba(20,34,64,.16);border-radius:11px;
  height:54px;padding:0 15px;font-family:var(--body);font-size:15.5px;color:var(--text);transition:border-color .2s,box-shadow .2s,background .2s}
.ck-field input:focus{outline:none;border-color:#188bf6;box-shadow:0 0 0 4px rgba(24,139,246,.14);background:#fff}
.ck-field input.bad{border-color:#e43b2c}
.ck-why{font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:normal;
  text-transform:none;color:var(--faint)}
.ck-opt-tag{font-family:var(--body);font-weight:500;font-size:11.5px;letter-spacing:.02em;
  text-transform:none;color:#8a93a6;margin-left:6px}
.rx-decline{margin:18px 0 0;text-align:center}
.rx-decline-say{margin:0 0 4px;font-size:15.5px;line-height:1.5;color:var(--faint)}
.rx-decline-go{display:inline-block;font-size:15.5px;font-weight:700;color:var(--blue-deep);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rx-guide{margin:26px 0 0;padding:22px 20px;background:#f5f8fd;border-radius:14px}
.rx-guide-open{margin:0 0 10px;font-weight:700;font-size:17px}
.rx-guide-why,.rx-guide-gets,.rx-guide-not,.rx-guide-step{margin:0 0 12px;line-height:1.6}
.rx-guide-not{color:var(--faint)}
.rx-guide-name{margin:18px 0 8px;font-size:18px}
.rx-guide-price{margin:8px 0 0;text-align:center;color:var(--faint);font-size:14.5px}
.rx-guide-back{display:block;margin:14px 0 0;text-align:center;font-size:14.5px;color:var(--faint)}
.ck-hint{font-size:13px;line-height:1.5;color:var(--faint);margin:7px 0 0}
.ck-hint a{color:var(--blue-deep);font-weight:600}
/* This sits inside .ck-field, whose `label` rule is built for the uppercase field captions
   (EMAIL, FIRST NAME, PHONE). A consent sentence is not a caption, so every part of that rule
   is undone here: it has to read as the sentence the person is agreeing to. */
.ck-field.bad > label:first-child{color:#e0483a}
.ck-field.bad .ck-consent input{outline:2px solid #e0483a;outline-offset:2px}
.ck-field label.ck-consent{display:flex;gap:9px;align-items:flex-start;margin:10px 0 0;
  cursor:pointer;font-family:inherit;font-size:13px;font-weight:400;letter-spacing:normal;
  text-transform:none;line-height:1.5;color:var(--faint)}
.ck-consent input{flex:0 0 auto;width:17px;height:17px;margin:1px 0 0;accent-color:var(--blue-deep)}
.ck-err{display:none;background:#fdeceb;border:1px solid #f3c9c4;color:#9b1c13;border-radius:11px;padding:12px 14px;font-size:14.5px;line-height:1.5;margin-top:12px}
/* result */
.ck-stage{font-family:var(--disp);font-weight:700;font-size:clamp(25px,4.3vw,34px);line-height:1.18;letter-spacing:-.028em;color:var(--text);margin:0 0 20px}

/* ===== the result, laid out as a funnel page =========================================
   The quiz lives inside a 660px column. The result does not: it breaks out to its own
   wider container so the alternating cards have somewhere to alternate. Every block of
   copy is one card in a two-column row, sides swapping down the page, which is what
   gives it a rhythm instead of one long scroll of paragraphs. Sides are assigned at
   render time, not in the markup, because the nervous-system card only exists for three
   of the five stages and hard-coding sides would break the alternation for the other two. */
/* The result screen is a page, not a card. It keeps the .ck-card class the quiz screens use,
   so everything that class brings has to come back off here, the float animation included:
   keyframes beat normal declarations, so box-shadow:none alone left the whole page bobbing. */
#scr-result{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;
  box-shadow:none;padding:0;border-radius:0;animation:none;will-change:auto}
/* NO TOP PADDING. .ck-wrap already pads the top of every screen, 22px on a phone and 44px on
   desktop, and this added a second helping on top of it: 50px of gap under the brand mark on a
   phone, 116px on desktop. That was room for the brand badge this page used to open with,
   which is gone. One container pads the top now, the same one that pads the quiz. */
.rx-page{width:100%;max-width:1120px;margin:0 auto;padding:0 0 40px}
/* The same mark the front door carries, so the result reads as the same place. */
/* The header. Sized for a sentence, not for a two-word title: the line it replaced was "Here
   Are Your Results." at up to 78px, and eighteen words at that size is a wall. Balanced so it
   never breaks to a widowed last word. */
.rx-head{font-family:var(--disp);font-weight:800;font-size:clamp(34px,4.8vw,58px);
  line-height:1.06;letter-spacing:-.035em;color:var(--text);text-align:center;
  max-width:15ch;margin:0 auto clamp(20px,2.8vw,32px);text-wrap:balance}
.rx-head .g{color:#155eef}
@media(min-width:700px){.rx-head{max-width:19ch}}

/* The stage ladder. Black, because the stage name inside the card already carries the one
   colour on this screen and a second coloured thing would compete with it. The reader's own
   stage is the only one at full strength; the rest fade back so the eye lands on theirs first
   and still sees the road it sits on. */
.rx-ladder{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(10px,2vw,20px);margin:0 0 clamp(16px,2.4vw,24px);padding:0;
  font-family:var(--disp);font-weight:700;font-size:clamp(9.5px,1.15vw,11.5px);
  letter-spacing:.15em;text-transform:uppercase;line-height:1.5}
.rx-ladder b{font-weight:700;color:rgba(17,26,48,.3)}
.rx-ladder b.on{color:var(--text)}
.result-score{max-width:820px;margin:-8px auto 24px;--score-progress:0%;
  --score-gradient:linear-gradient(90deg,#155eef 0%,#16337f 40%,#6b2fbf 57%,#c2610c 73%,#c1271a 100%)}
.score-track{position:relative;height:12px;border-radius:999px;isolation:isolate}
.score-track::before,.score-fill{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--score-gradient)}
.score-track::before{opacity:.18}
.score-fill{clip-path:inset(0 calc(100% - var(--score-progress)) 0 0 round 999px)}
.score-marker{position:absolute;left:var(--score-progress);top:50%;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--score-color,#155eef);transform:translate(-50%,-50%);box-shadow:0 2px 8px #111a3026}
.score-marker::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--score-color,#155eef);opacity:var(--pulse-opacity,0);pointer-events:none}
@media(prefers-reduced-motion:reduce){.score-marker::after{opacity:0}}
.score-caption{text-align:center;font-size:14px;color:var(--muted);margin:10px 0 0;font-variant-numeric:tabular-nums}
.score-caption strong{color:var(--text)}
/* NO SEPARATOR CHARACTER. A dot drawn before each item rides along when the row wraps, so on a
   375px screen the second line opened with a stray dot. Any separator that belongs to an item
   has that problem; the gap belongs to the layout and cannot wrap onto a line of its own. The
   letterspacing is what keeps five words from reading as one. */
/* ONE CENTRED COLUMN.
   This page used to run a two-column rhythm: cards alternated edges down the page and a figure
   stood in whichever cell the card was not using. That is gone. There is no side to pick, no
   empty half to fill and no figure to fill it with, so the grid is gone with it and the rows
   are a plain centred stack. The generous gap between rows is the one thing the old grid did
   that still matters, so it stays: each beat has to read as its own beat. */
.rx-row{display:block;max-width:820px;margin:0 auto clamp(40px,6vw,72px)}
.rx-row > .rx-card{max-width:none;margin:0}
/* The single assessment card needs one footer gap, not the old multi-card spacing stack. */
#scr-result .rx-row{margin-bottom:0}
#scr-result .rx-page{padding-bottom:0}
.ck-wrap:has(> #scr-result:not([hidden])){padding-bottom:24px}
#rMailed{margin:20px auto 0}
/* .center and .full used to mean "take no side in the alternation". With one column that is
   simply what a row is, so all that survives is this card's own centring and padding. */
.rx-row.center > .rx-card{text-align:center;
  padding:clamp(34px,5vw,64px) clamp(26px,4vw,56px)}
/* The section label sits above the product name, which is the real headline of this card. */
/* Same treatment as every other card heading, so "What's next" reads as a peer of
   "You're in Overdrive." rather than a label. */
.rx-kicker{font-family:var(--disp);font-weight:700;font-size:clamp(30px,3.9vw,42px);line-height:1.14;
  letter-spacing:-.025em;color:var(--text);text-transform:none;margin:0 0 clamp(16px,1.8vw,24px)}
.rx-row.center > .rx-card > .rx-left > #oPitch{font-size:clamp(16.5px,1.6vw,19px);line-height:1.62}
/* The product name keeps the card-heading treatment it had before it moved: same face,
   same weight, same dark ink. It is a name, not a label. */
.rx-name{font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.6vw,27px);line-height:1.22;
  letter-spacing:-.025em;color:var(--text);margin:30px 0 14px}
/* Every asset gets a green tick: these are things the buyer already owns the moment they
   buy, so they read as ticked off, not as bullets in a spec list. Same green as the pill. */
/* The mark beside each bundle item. Drawn, full stop. It used to be a stroke held at a full
   dashoffset that an IntersectionObserver revealed, which meant a buyer saw six bare list
   items any time that observer did not run, and nothing threw. It is the offer's proof list.
   It does not get to depend on anything firing. */
#oIncludes li{position:relative;padding-left:26px}
#oIncludes .tk{position:absolute;left:0;top:2px;width:18px;height:18px;display:block}
#oIncludes .tk svg{width:100%;height:100%;display:block;shape-rendering:geometricPrecision}
/* The offer block reads left inside the centred card. */
.rx-left{text-align:left;max-width:620px;margin:0 auto}
.rx-row.center .rx-first{text-align:left;max-width:620px;margin-left:auto;margin-right:auto;padding:26px 28px}
.rx-row.center .rx-first strong{font-size:clamp(18px,1.9vw,22px)}
/* The offer's button used to be sized on its own here, bigger than the one that closes the
   stage card. Two buttons for one product should not be two different buttons, so the only
   thing this rule still does is centre it; the size comes from .ck-btn like the first one. */
.rx-row.center .ck-btn{max-width:420px;margin-left:auto;margin-right:auto}
/* Results and recovery cards remain stationary. */
.rx-card{background:linear-gradient(162deg,rgba(255,255,255,.94),rgba(255,255,255,.72));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:clamp(22px,3vw,32px);
  box-shadow:0 18px 44px -30px rgba(13,40,90,.42);
  will-change:auto;animation:none;transform:none}
@media(prefers-reduced-motion:reduce){.rx-card{animation:none}}
/* Section headings inside a card. The stage name is an h2 in a card too, and this rule used to
   claim it: ".rx-card > h2" outranks ".rx-stagename" on specificity, so the stage rendered at
   21px, the size of an ordinary subhead, and the big treatment below was written but never once
   drawn. Excluded by name rather than fought with a longer selector, so the stage name keeps its
   own size no matter where on the page it ends up living. */
.rx-card > h2:not(.rx-stagename){font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.6vw,27px);line-height:1.22;
  letter-spacing:-.025em;color:var(--text);margin:0 0 16px;text-wrap:balance}
.rx-card .ck-p:last-child{margin-bottom:0}
.rx-full{max-width:760px;margin:0 auto clamp(18px,3vw,30px)}
.rx-break{display:flex;align-items:center;justify-content:center;gap:12px;margin:clamp(4px,.6vw,8px) 0 clamp(24px,3vw,34px)}
.rx-break:before,.rx-break:after{content:"";flex:none;width:24px;height:1px;background:rgba(20,34,64,.18)}
.rx-break span{font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#8391ad;white-space:nowrap}
.rx-hook{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.4vw,50px);line-height:1.08;
  letter-spacing:-.032em;color:var(--text);text-align:center;margin:0 0 18px;text-wrap:balance}
/* The prescription runs the full measure. Balanced wrapping kept it to about half the
   width of the page, which read as a narrow pull-quote instead of a statement. */
/* Card on a card. The outer plate is quiet and deep so it reads as ground, the inner one is
   lifted off it with real light: brighter face, a hairline rim, and a shadow with enough throw
   that you can see the gap between the two. The sentence lives on the raised one. */
.rx-plate{padding:clamp(20px,2.6vw,30px);
  background:linear-gradient(168deg,#fff,rgba(255,255,255,.9))}
.rx-lift{position:relative;border-radius:16px;padding:clamp(30px,4.4vw,54px) clamp(24px,4vw,52px);
  background:linear-gradient(162deg,rgba(233,239,252,.92),rgba(246,249,255,.74));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 26px 50px -26px rgba(13,40,90,.34), 0 2px 0 rgba(255,255,255,.9) inset}
#oPrescription{text-wrap:wrap;max-width:none;margin:0}
#oPrescription .g{color:#155eef}
/* The stage name carries its own colour, and the five read as an escalation rather than five
   arbitrary swatches: blue, navy, purple, dark orange, red. Overdrive keeps brand blue because
   it is the stage where nothing has gone wrong yet. The default stays blue so an unknown stage
   can never render an unstyled name. */
#rTitle .g{color:#155eef}
#rTitle .g.s-overdrive{color:#155eef}
#rTitle .g.s-friction {color:#16337F}
#rTitle .g.s-strain   {color:#6B2FBF}
#rTitle .g.s-survival {color:#C2610C}
#rTitle .g.s-shutdown {color:#C1271A}
/* THE STAGE CARD OPENS THE PAGE.
   A small static label, then the one word they answered 21 questions to get, at a size nothing
   else on the page competes with. The label carries no information and is sized accordingly:
   everything that changes between readers is in the name under it. */
.rx-eyebrow{font-family:var(--disp);font-weight:700;font-size:clamp(11px,1.3vw,12.5px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.rx-stagename{font-family:var(--disp);font-weight:800;font-size:clamp(38px,5.6vw,62px);
  line-height:1;letter-spacing:-.04em;margin:0 0 15px}
/* Sevyn's line. Display weight so it reads as part of the verdict rather than as the start of
   the body copy, which is the paragraph directly beneath it. */
.rx-recog{font-family:var(--disp);font-weight:700;font-size:clamp(18px,2.2vw,22px);
  line-height:1.32;letter-spacing:-.018em;color:var(--text);margin:0 0 20px;text-wrap:balance}
/* Assessment opening lines use the full available width before wrapping. */
#oRecognition{text-wrap:wrap}
/* The first ask, closing the same card. The rule above it is what separates a verdict from a
   request; without it the button reads as one more paragraph of the diagnosis. */
.rx-ask{margin-top:clamp(22px,3vw,30px);padding-top:clamp(20px,2.6vw,26px);
  border-top:1px solid rgba(20,34,64,.12)}
.rx-ask-line{font-family:var(--disp);font-weight:700;font-size:clamp(17px,2.1vw,21px);
  line-height:1.34;letter-spacing:-.018em;color:var(--text);margin:0 0 16px;text-wrap:balance}
.rx-ask-note{font-size:13.5px;color:var(--muted);margin:11px 0 0;text-align:center}
/* Mel's beats. The label runs into its own paragraph rather than sitting on a line of its
   own, which is how he wrote them and what keeps four labelled beats from reading as four
   separate sections stacked up before the button. */
.rx-beat b{font-family:var(--disp);font-weight:700;color:var(--text)}
#btn-bundle0{display:block;text-align:center}

/* THE CHECKOUT POPUP. A sheet from the bottom on a phone, a centred card on desktop, because
   a thumb reaches the bottom of a phone and a cursor does not. */
.ck-modal{border:0;padding:0;background:#fff;color:var(--text);overflow:hidden;
  width:min(560px,100%);max-height:88vh;height:auto;border-radius:20px;
  box-shadow:0 40px 90px -40px rgba(9,16,34,.6)}
.ck-modal::backdrop{background:rgba(9,16,34,.55);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px)}
.ck-modal-frame{display:block;width:100%;height:min(88vh,760px);border:0}
.ck-modal-x{position:absolute;top:10px;right:12px;z-index:2;width:34px;height:34px;border:0;
  border-radius:50%;background:rgba(17,26,48,.07);color:var(--muted);font-size:21px;
  line-height:1;cursor:pointer;font-family:inherit}
.rx-sub{font-family:var(--disp);font-weight:600;font-size:clamp(16px,2.1vw,19px);line-height:1.48;
  color:var(--blue-deep);text-align:center;margin:0 auto clamp(26px,4vw,40px);max-width:52ch;text-wrap:balance}
.rx-out{list-style:none;margin:0;padding:0}
.rx-out li{position:relative;padding:0 0 0 30px;margin:0 0 13px;font-size:15.5px;line-height:1.58;color:var(--muted)}
.rx-out li:last-child{margin-bottom:0}
.rx-out li:before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;
  background:#155eef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat}
/* The cost cards carry a ring so they read as the warning on the page rather than as another
   card with a warm tint. The ring is an OUTLINE, not a box-shadow: cardFloat animates
   box-shadow and a keyframe beats a normal declaration, so a shadow ring would be overwritten
   on every frame of the float. */
.rx-card.cost{position:relative;border-color:#e8a99d;
  background:linear-gradient(162deg,#fff8f6,#fff5f3);
  outline:2px solid #C1271A;outline-offset:0}

/* A light that arrives, runs the ring, and leaves. Not a loop: it holds dark for most of the
   cycle, which is what makes the run register as an event rather than as decoration you stop
   seeing.

   A conic gradient holds one bright arc and is transparent everywhere else, and the angle it
   starts FROM is what animates, so the arc walks the perimeter. Two masks subtract the middle
   and leave only a 2px band, which is what turns a filled rectangle into a ring. Opacity rides
   the same keyframes as the angle so the fade in and out cannot drift out of step with the
   travel, which is what two separate animations would eventually do.

   Registering --beam with @property is what makes the angle interpolate at all: to the
   animation engine an unregistered custom property is a string, and it would jump from one
   keyframe to the next with nothing in between. */
@property --beam{syntax:"<angle>";initial-value:0deg;inherits:false}
.rx-card.cost::after{
  content:"";position:absolute;inset:-2px;border-radius:22px;padding:2px;pointer-events:none;
  opacity:0;
  background:conic-gradient(from var(--beam),
    transparent 0 70%,
    rgba(255,168,140,.5) 78%,
    #fff1ec 85%,
    rgba(255,168,140,.5) 92%,
    transparent 98% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  filter:drop-shadow(0 0 5px rgba(255,120,86,.85));
  animation:beamSweep 5.6s cubic-bezier(.42,0,.3,1) infinite}
@keyframes beamSweep{
  0%,3%   {--beam:340deg;opacity:0}
  9%      {--beam:20deg; opacity:1}
  40%     {--beam:300deg;opacity:1}
  48%     {--beam:352deg;opacity:0}
  100%    {--beam:352deg;opacity:0}}

/* And the card blooms while the light is on it. Sits behind the card's own background, so all
   that shows is the halo past its edges. The card already carries cardFloat, whose keyframes
   own box-shadow, so this cannot be a shadow on the card itself. */
.rx-card.cost::before{
  content:"";position:absolute;inset:-16px;border-radius:34px;pointer-events:none;z-index:-1;
  background:radial-gradient(62% 62% at 50% 50%,rgba(193,39,26,.26),transparent 72%);
  opacity:0;animation:costBloom 5.6s ease-in-out infinite}
@keyframes costBloom{
  0%,4%   {opacity:0;transform:scale(.96)}
  16%     {opacity:1;transform:scale(1)}
  40%     {opacity:.9;transform:scale(1)}
  54%,100%{opacity:0;transform:scale(.98)}}

@media(prefers-reduced-motion:reduce){
  .rx-card.cost::after,.rx-card.cost::before{animation:none;opacity:0}}
.rx-card.cost > h2{color:#8a2318}
/* A label inside a card, for a second beat that belongs to the same thought. */
.rx-in{margin:22px 0 11px;padding-top:18px;border-top:1px solid rgba(20,34,64,.12)}
.rx-card.cost .rx-in{color:#8a2318;border-top-color:#f0cdc6}
.rx-card.cost .ck-p{color:#5c3a33}
/* LONGHAND. Both rules for this box used the `margin` shorthand, `margin:0` here and
   `margin:0 auto` in the centred variant, and between them they zeroed the top margin twice
   over. The box sat flush against the paragraph above it with a measured 0px gap: a tinted
   panel touching body copy, which reads as one run-on block rather than a call-out. The
   shorthand is what did it, so only the sides that are meant to change are named. */
.rx-first{background:#eef2fb;border-radius:14px;padding:18px 20px;margin-top:24px}
.rx-first strong{display:block;font-family:var(--disp);font-size:17px;line-height:1.35;color:var(--text);margin:0 0 8px}
.rx-buy{max-width:560px;margin:clamp(10px,2vw,20px) auto 0;text-align:center}
/* The second ask belongs to the card above it, not to the page rhythm, so the card drops its
   own bottom margin and the two sit close. Sibling margins collapse to the larger, which is
   why the row has to give its up rather than the button asking for less. */
.rx-price{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-top:1px solid rgba(20,34,64,.12);border-bottom:1px solid rgba(20,34,64,.12);
  padding:16px 0;margin:0 0 20px}
.rx-price .rx-what{font-family:var(--disp);font-weight:700;font-size:16.5px;color:var(--text)}
.rx-price .rx-amt{font-family:var(--disp);font-weight:800;font-size:34px;letter-spacing:-.03em;color:var(--text)}
.rx-under{font-size:13.5px;line-height:1.55;color:var(--faint);margin:10px 0 0}
@media(max-width:820px){
}

.ck-sec{font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#155eef;margin:30px 0 12px}
.ck-signals{list-style:none;margin:0;padding:18px 20px;background:#f7f9fc;border:1px solid rgba(20,34,64,.10);border-radius:14px}
.ck-signals li{margin:0;padding:7px 0;font-size:15.5px;line-height:1.55;color:var(--text)}
.ck-signals li + li{border-top:1px solid rgba(20,34,64,.07)}
.ck-next{margin-top:32px;padding-top:26px;border-top:1px solid rgba(20,34,64,.10)}
.ck-offer{margin:18px 0 4px;padding:20px 22px;background:#f7f9fc;border:1px solid rgba(20,34,64,.10);border-radius:14px}
/* The story bridge. No card, no border: it reads as a person talking, not another panel.
   The rule on the left is the only mark, so it separates without competing with the offer. */
.ck-story{margin:16px 0 2px;padding:2px 0 2px 16px;border-left:2px solid rgba(21,94,239,.28)}
.ck-story .ck-p{color:var(--muted);font-size:15.5px;line-height:1.65;margin:0 0 10px}
.ck-story .ck-p:last-child{margin-bottom:0}
/* The product's own name heads the contents list. Left, with the list under it, because it
   reads as a label for what follows rather than as a centred banner.

   LONGHAND, NOT `margin`. The shorthand sets all four sides, so `margin:0 0 18px` here silently
   zeroed the 30px of top space .ck-sec gives every label on this page and jammed this one
   against the paragraph above it. Naming the one side that changes is the only way an override
   like this cannot take something with it. The same trap ate .rx-bundle's margin before it. */
#oName{text-align:center;margin-bottom:18px}
.ck-includes{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.ck-includes li{font-size:15px;line-height:1.5;color:var(--text)}
.ck-includes b{font-family:var(--disp);font-weight:700;display:block}
.ck-includes span{color:var(--muted);font-size:14.5px}
.ck-foot{max-width:660px;margin:0 auto;padding:0 clamp(18px,5vw,28px) 44px;position:relative;z-index:2}
.ck-foot p{font-size:12.5px;line-height:1.65;color:#8391ad;margin:0}
[hidden]{display:none!important}
/* The byline goes on a phone. The figure needs no breakpoint of its own now. */
@media(max-width:700px){
  .hp-name{display:none}
}
@media(max-width:560px){
  /* The checkout popup is a bottom sheet on a phone, because a thumb reaches the bottom of a
     phone and a cursor does not. margin-top:auto pins it to one edge without giving up
     showModal, which is where the focus trap and the inert page behind it come from.

     In THIS block, not a second @media of its own: one place decides what a phone is here, and
     a competing query is how the byline rule stopped being found. */
  .ck-modal{width:100%;max-width:none;max-height:92vh;border-radius:20px 20px 0 0;
    margin:auto auto 0;padding-bottom:env(safe-area-inset-bottom)}
  .ck-modal-frame{height:min(92vh,100svh)}
  .hp-eye{font-size:9.5px;letter-spacing:.1em;gap:7px}
  .hp-eye::before,.hp-eye::after{width:12px}
  .ck-opt span{font-size:15px;padding:14px 16px}
  .ck-nav{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .ck-bar i,.ck-btn{transition:none}
  .hp-ring .spin,.hp-badge .dot,.ck-card,#scr-quiz:not(.assessment-started){animation:none}
}

#rAskWrap .rx-beat + .rx-beat{margin-top:32px}
#rAskWrap .rx-beat + .rx-beat-more{margin-top:14px}
/* A hidden beat is still a sibling. The first VISIBLE beat must not inherit the gap meant for a
   second one, or a stage with no headed copy yet opens on 32px of nothing. */
#rAskWrap .rx-beat[hidden] + .rx-beat{margin-top:0}
/* "What it will cost you:" is three one-word bullets. The label is the beat's <b>, alone on its
   line because the list is a block. Each word is heavier and darker than the prose around it so
   the three losses land as three hits, not as a sentence. */
#rAskWrap .rx-cost-list{list-style:none;margin:10px 0 0;padding:0}
#rAskWrap .rx-cost-list li{position:relative;padding:0 0 0 22px;margin:0 0 7px;font-size:17px;font-weight:700;line-height:1.35;color:var(--text)}
#rAskWrap .rx-cost-list li:last-child{margin-bottom:0}
#rAskWrap .rx-cost-list li:before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;border-radius:50%;background:currentColor}
.signal-choice{display:block;margin-top:10px;font-size:14px;font-weight:500}
.signal-choice em{display:inline-block;font-style:normal;background:#eaf1ff;color:#155eef;border:1px solid #cbdcff;border-radius:999px;padding:4px 12px;margin-left:6px}
.result-closing{margin-top:26px;font-weight:600}
.result-portrait{opacity:.075}