/* ===========================================================================
   Deep Report storefront (/mmr-checker) - "dossier" redesign
   Recreates design_handoff_aussyelo_redesign/"MMR Checker.dc.html" (storefront) and
   "Checker Flow.dc.html" (the 4-step checker) in the report's design language.

   Scope + tokens: every rule is namespaced under #dr-sf, which also carries .drx, so the
   tokens/fonts/base/leak-guard in deep-report-v2.css are in scope and the storefront and the
   report it sells are literally the same design system. Nothing here re-declares a token and
   nothing here is theme-forked: light mode falls out of the .drx token flip on its own, which
   is why the old file's ~90 lines of html:not([data-theme=dark]) patches are gone.

   The prototypes are inline-styled; those values are translated to the dr-sf-* class names the
   markup and deep-report-buy.js already use, so the state machine, the Stripe Payment Element
   and every DOM hook are untouched. Prototype values are literal - see the .dc.html source.
=========================================================================== */

#dr-sf {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}
#dr-sf .dr-sf-wrap {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* #buy (the fold: H1 + checker) is now FIRST in the markup itself - see the comment on the
   section in DeepReport.razor. The old `order:-1` that faked this visually is gone, because
   DOM order is what AI crawlers and anything else linearising the page actually read. */

/* The site nav is sticky (~69px) and would cover whatever scrollIntoView aligns to the top. */
#dr-sf #sample, #dr-sf #buy, #dr-sf #inside, #dr-sf #faq { scroll-margin-top: 90px; }

/* ---- utilities (kept: the markup and buy JS both use them) ---- */
#dr-sf .dr-sf-mono { font-family: 'IBM Plex Mono', monospace; }
#dr-sf .dr-sf-dim { color: var(--text2); }
#dr-sf .dr-sf-faint { color: var(--mut); }
#dr-sf .dr-sf-em { color: var(--teal); }
#dr-sf .dr-sf-gd { color: var(--gold); }
#dr-sf .dr-sf-center-txt { text-align: center; }
#dr-sf .dr-sf-w100 { width: 100%; }
#dr-sf .dr-sf-mt14 { margin-top: 14px; }
#dr-sf .dr-sf-mt22 { margin-top: 22px; }
/* State class toggled by deep-report-buy.js. Important so it beats any
   element's own display rule regardless of specificity or source order. */
#dr-sf .dr-sf-hide { display: none !important; }

/* ===========================================================================
   Typography
=========================================================================== */
#dr-sf .dr-sf-kicker {
  display: block;
  font: 500 13px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
#dr-sf .dr-sf-h1 {
  margin: 16px 0 0;
  font: 700 clamp(38px, 4.6vw, 56px)/1.05 'Space Grotesk', sans-serif;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: pretty;
}
/* Two visual tiers inside the single H1 (see DeepReport.razor hero comment):
   .dr-sf-h1-q renders at the h1's own display size, .dr-sf-h1-tag demotes the
   checker line to a muted tagline without moving it out of the h1 element. */
#dr-sf .dr-sf-h1-q { display: block; }
#dr-sf .dr-sf-h1-tag {
  display: block;
  margin-top: 12px;
  font: 500 clamp(17px, 1.7vw, 21px)/1.45 'IBM Plex Sans', sans-serif;
  letter-spacing: 0;
  color: var(--text2);
}
#dr-sf .dr-sf-h1-tag-em { color: var(--text); font-weight: 700; }
#dr-sf .dr-sf-h2 {
  margin: 14px 0 0;
  font: 700 clamp(28px, 3.4vw, 40px)/1.15 'Space Grotesk', sans-serif;
  letter-spacing: -.015em;
  color: var(--text);
  text-wrap: pretty;
}
#dr-sf .dr-sf-sect { padding: 72px 0; border-top: 1px solid var(--line); }
#dr-sf .dr-sf-secthead { max-width: 64ch; }
#dr-sf .dr-sf-sectsub {
  margin: 14px 0 0;
  font: 400 18px/1.75 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  text-wrap: pretty;
}

/* ===========================================================================
   Buttons
   Gold fill + near-black ink in both themes (--gold-ink); hover inverts to --text,
   which is the prototype's style-hover on every gold CTA.
=========================================================================== */
#dr-sf .dr-sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--gold-fill);
  color: var(--gold-ink);
  font: 600 17px/1 'Space Grotesk', sans-serif;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
#dr-sf .dr-sf-btn:hover { background: var(--text); color: var(--bg); }
#dr-sf .dr-sf-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

#dr-sf .dr-sf-btn2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: transparent;
  color: var(--text2);
  font: 600 15.5px/1 'Space Grotesk', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
#dr-sf .dr-sf-btn2:hover { border-color: var(--mut); color: var(--text); }
#dr-sf .dr-sf-btn2:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* The site's global `[data-theme] strong` rule targets bare <strong> and so out-ranks the
   button's INHERITED ink - a <strong> label inside a gold button would render near-white on
   the gold fill. Pin both button types' text children back to the button's own colour. */
#dr-sf .dr-sf-btn strong, #dr-sf .dr-sf-btn span,
#dr-sf .dr-sf-btn2 strong, #dr-sf .dr-sf-btn2 span { color: inherit; }

/* ===========================================================================
   FOLD: heading + sell copy + the checker
=========================================================================== */
#dr-sf #buy.dr-sf-sect { padding-top: 44px; border-top: 0; }
#dr-sf .dr-sf-buywrap {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-areas: "head check" "copy check";
  /* Row one stays intrinsic: the expanding checker fills row two and must not push the
     left-hand copy down. */
  grid-template-rows: max-content minmax(0, 1fr);
  column-gap: 56px;
  row-gap: 14px;
  align-items: start;
}
#dr-sf .dr-sf-fold-head { grid-area: head; }
/* start, not center: row two is whatever the checker leaves over, so centering here put a gap
   above the copy that was leftover-space/2 rather than a chosen value - it matched no other
   spacing in the fold and split the pitch with a hole. Packed to the top, the left column reads
   as one thought and the slack collects at the bottom of the column where a ragged edge reads
   as normal. */
#dr-sf .dr-sf-fold-copy { grid-area: copy; align-self: start; }
#dr-sf .dr-sf-buywrap > .dr-sf-herocheck {
  grid-area: check;
  align-self: start;
  display: flex;
  flex-direction: column;
}
#dr-sf .dr-sf-fold-head .dr-sf-h1 { margin-top: 14px; }
#dr-sf .dr-sf-herosub {
  max-width: 52ch;
  margin: 18px 0 0;
  font: 400 19px/1.7 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  text-wrap: pretty;
}

/* Sell copy: three "not this" lines + one payoff. */
#dr-sf .dr-sf-hook { display: flex; flex-direction: column; gap: 8px; max-width: 56ch; margin: 4px 0 0; }
#dr-sf .dr-sf-hookline {
  position: relative;
  margin: 0;
  padding-left: 20px;
  /* 15.5px, matching the report's own body prose: these three lines carry the whole argument, and
     setting the pitch smaller than the product it sells had the setup whispering. The muted colour
     stays - dim problem lines are what make the bright .dr-sf-hookwin answer below them land. */
  font: 400 18px/1.6 'IBM Plex Sans', sans-serif;
  color: var(--mut);
}
#dr-sf .dr-sf-hookline::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 10px;
  height: 1px;
  background: var(--line2);
}
#dr-sf .dr-sf-hookwin {
  position: relative;
  margin: 8px 0 0;
  padding-left: 20px;
  font: 600 18.5px/1.55 'Space Grotesk', sans-serif;
  letter-spacing: -.01em;
  color: var(--text);
}
#dr-sf .dr-sf-hookwin::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  bottom: .3em;
  width: 2px;
  border-radius: 2px;
  background: var(--gold);
}
#dr-sf .dr-sf-hookwin strong { color: var(--gold); white-space: nowrap; }
#dr-sf .dr-sf-cred {
  margin: 20px 0 0;
  font: 400 15px/1.6 'IBM Plex Sans', sans-serif;
  color: var(--mut);
}
#dr-sf .dr-sf-cred strong { color: var(--text); font-weight: 600; }
#dr-sf .dr-sf-herolink { margin: 14px 0 0; font: 400 15px/1.6 'IBM Plex Sans', sans-serif; }
#dr-sf .dr-sf-herolink a { color: var(--gold); font-weight: 500; }
#dr-sf .dr-sf-herolink a:hover { color: var(--text); }

/* Product-proof preview for the full sample report. All figures shown here are also stated in
   the surrounding page/report; the visual treatment adds hierarchy without inventing data. */
#dr-sf .dr-sf-samplemini {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: 18px 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--gold) 52%, var(--line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--teal) 13%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in oklab, var(--gold) 8%, var(--bg2)), var(--bg2) 52%);
  color: inherit;
  box-shadow: 0 8px 22px color-mix(in oklab, #000 20%, transparent), inset 0 1px color-mix(in oklab, #fff 5%, transparent);
  isolation: isolate;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#dr-sf .dr-sf-samplemini::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0 58%, var(--teal) 58% 100%);
}
#dr-sf .dr-sf-samplemini > span { position: relative; z-index: 1; }
#dr-sf .dr-sf-samplemini:hover {
  border-color: var(--gold);
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in oklab, #000 24%, transparent), 0 0 0 1px color-mix(in oklab, var(--gold) 12%, transparent);
}
#dr-sf .dr-sf-samplemini:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#dr-sf .dr-sf-samplemini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 0;
}
#dr-sf .dr-sf-samplemini-badge,
#dr-sf .dr-sf-samplemini-rank {
  display: inline-flex;
  align-items: center;
  font: 600 10.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#dr-sf .dr-sf-samplemini-badge {
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid color-mix(in oklab, var(--gold) 42%, var(--line));
  border-radius: 999px;
  background: color-mix(in oklab, var(--gold) 11%, var(--bg2));
  color: var(--gold);
}
#dr-sf .dr-sf-samplemini-badge > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 13%, transparent);
}
#dr-sf .dr-sf-samplemini-rank { color: var(--mut); }
#dr-sf .dr-sf-samplemini-title {
  display: block;
  padding: 13px 20px 0;
  font: 650 20px/1.3 'Space Grotesk', sans-serif;
  letter-spacing: -.015em;
  color: var(--text);
  text-wrap: pretty;
}
#dr-sf .dr-sf-samplemini-proofs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 20px 0;
}
#dr-sf .dr-sf-samplemini-proof {
  display: flex;
  min-width: 0;
  min-height: 132px;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg3) 74%, transparent);
}
#dr-sf .dr-sf-samplemini-proof small {
  font: 500 10.5px/1.35 'IBM Plex Mono', monospace;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--text2);
}
#dr-sf .dr-sf-samplemini-proof strong {
  display: flex;
  min-height: 35px;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 7px;
  font: 650 17px/1.1 'Space Grotesk', sans-serif;
  letter-spacing: -.01em;
  color: var(--text);
}
#dr-sf .dr-sf-samplemini-proof strong em {
  display: block;
  margin-top: 3px;
  font: 600 10px/1.2 'IBM Plex Mono', monospace;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--text2);
}
#dr-sf .dr-sf-samplemini-proof > span {
  display: block;
  margin-top: 8px;
  font: 400 11.5px/1.42 'IBM Plex Sans', sans-serif;
  color: var(--mut);
  text-wrap: pretty;
}
#dr-sf .dr-sf-samplemini-proof--queue { border-color: color-mix(in oklab, var(--win) 28%, var(--line)); }
#dr-sf .dr-sf-samplemini-proof--queue strong { color: var(--win); }
#dr-sf .dr-sf-samplemini-proof--mmr { border-color: color-mix(in oklab, var(--teal) 30%, var(--line)); }
#dr-sf .dr-sf-samplemini-proof--mmr strong { color: var(--teal); }
#dr-sf .dr-sf-samplemini-proof--season { border-color: color-mix(in oklab, var(--gold) 34%, var(--line)); }
#dr-sf .dr-sf-samplemini-proof--season strong { color: var(--gold); }
#dr-sf .dr-sf-samplemini-scope {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 10px 20px 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in oklab, var(--bg3) 55%, transparent);
}
#dr-sf .dr-sf-samplemini-scope > span {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  text-align: left;
}
#dr-sf .dr-sf-samplemini-scope > span + span { border-left: 1px solid var(--line); }
#dr-sf .dr-sf-samplemini-scope strong {
  flex: none;
  font: 650 19px/1 'Space Grotesk', sans-serif;
  letter-spacing: -.025em;
  color: var(--gold);
}
#dr-sf .dr-sf-samplemini-scope small {
  max-width: 84px;
  font: 500 10.5px/1.25 'IBM Plex Mono', monospace;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--text2);
}
#dr-sf .dr-sf-samplemini-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg3) 58%, transparent);
}
#dr-sf .dr-sf-samplemini-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 999px;
  background: var(--gold-fill);
  font: 650 12px/1 'Space Grotesk', sans-serif;
  letter-spacing: .01em;
  color: var(--gold-ink);
}
#dr-sf .dr-sf-samplemini-cta > span { color: inherit; transition: transform .18s ease; }
#dr-sf .dr-sf-samplemini:hover .dr-sf-samplemini-cta > span { transform: translateX(3px); }
#dr-sf .dr-sf-samplemini-note {
  font: 500 11px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--text2);
}

/* Live check ticker under the checker. */
#dr-sf .dr-sf-livestats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font: 500 12.5px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  color: var(--mut);
}
#dr-sf .dr-sf-livestat { display: inline-flex; align-items: center; gap: 7px; }
#dr-sf .dr-sf-livestat b { color: var(--text); font-weight: 600; }
#dr-sf .dr-sf-livesep { width: 1px; height: 12px; background: var(--line2); }
#dr-sf .dr-sf-livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--win);
}
#dr-sf .dr-sf-liveflame { flex: none; transform-origin: 50% 90%; }

/* ===========================================================================
   THE CHECKER WIDGET (Checker Flow.dc.html, all four screens)
   One card holding every state; deep-report-buy.js swaps .dr-sf-hide.
=========================================================================== */
#dr-sf .dr-sf-buywidget {
  min-height: 360px;
  scroll-margin-top: 82px;
  padding: 36px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--bg2);
}
#dr-sf #dr-sf-st-free-result { scroll-margin-top: 82px; }

/* ---- stepper (CHECK / YOUR MMR / REPORT) ---- */
#dr-sf .dr-sf-dots { display: flex; gap: 10px; align-items: center; }
#dr-sf .dr-sf-dot { height: 3px; flex: 1; border-radius: 999px; background: var(--line2); }
#dr-sf .dr-sf-dot.dr-sf-on { background: var(--gold); }
#dr-sf .dr-sf-dotlabs {
  display: flex;
  gap: 10px;
  margin: 9px 0 24px;
  font: 600 11.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
  color: var(--mut);
}
#dr-sf .dr-sf-dotlabs span { flex: 1; }

/* ---- SCREEN 1 - free check form ---- */
#dr-sf .dr-sf-freeintro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}
#dr-sf .dr-sf-freeintro strong {
  font: 700 26px/1.2 'Space Grotesk', sans-serif;
  letter-spacing: -.015em;
  color: var(--text);
}
#dr-sf .dr-sf-freeintro > span:last-child {
  font: 400 16.5px/1.7 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  text-wrap: pretty;
}
#dr-sf .dr-sf-freechip {
  display: inline-flex;
  padding: 6px 11px;
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
  border-radius: 999px;
  color: var(--gold);
  font: 600 11px/1 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
}
#dr-sf .dr-sf-flab {
  display: block;
  margin-bottom: 6px;
  font: 500 11.5px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
}
#dr-sf .dr-sf-finput {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: 500 17px/1.4 'IBM Plex Sans', sans-serif;
  outline: none;
}
/* !important is required, not lazy: a sitewide rule in site.css paints EVERY focused input with
   `border-color:#0cd9d9 !important` plus a 4px cyan glow (`input:focus`, so it reaches in here and
   out-ranks an un-important rule whatever its specificity). That is the old palette's cyan in a
   gold design, and a glow in a design whose depth is background steps and 1px borders only.
   The prototype's focus state is exactly this: a border colour change, nothing else. */
#dr-sf .dr-sf-finput:focus {
  border-color: var(--gold) !important;
  box-shadow: none !important;
}
#dr-sf select.dr-sf-finput {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 46px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 1px), calc(100% - 15px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* The native dropdown list is painted by the OS, not by these tokens - tell it which way
   round the theme is so the options are not black-on-black. */
#dr-sf select.dr-sf-finput { color-scheme: dark; }
html:not([data-theme=dark]) #dr-sf select.dr-sf-finput { color-scheme: light; }

#dr-sf .dr-sf-freefine {
  margin: 11px 0 0;
  font: 400 12.5px/1.6 'IBM Plex Sans', sans-serif;
  color: var(--mut);
  text-align: center;
  text-wrap: pretty;
}
#dr-sf .dr-sf-discordline {
  margin: 7px 0 0;
  font: 400 12.5px/1.6 'IBM Plex Sans', sans-serif;
  color: var(--mut);
  text-align: center;
}
#dr-sf .dr-sf-discordline a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}
#dr-sf .dr-sf-discordline a:hover { text-decoration: underline; }
#dr-sf .dr-sf-paidtoggle, #dr-sf .dr-sf-checkanother {
  width: 100%;
  margin-top: 12px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: 600 15px/1.4 'IBM Plex Sans', sans-serif;
  cursor: pointer;
}
#dr-sf .dr-sf-paidtoggle:hover, #dr-sf .dr-sf-checkanother:hover { color: var(--text); }
/* "Check another Riot ID" is an exit path on the result screen - findable, not the most
   clickable thing on the card. */
#dr-sf .dr-sf-checkanother { color: var(--mut); font-weight: 400; }
#dr-sf .dr-sf-device-memory {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font: 400 12.5px/1.5 'IBM Plex Sans', sans-serif;
  color: var(--mut);
}
#dr-sf .dr-sf-device-memory::before { content: '\2713'; color: var(--win); }
#dr-sf .dr-sf-device-memory button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mut);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
#dr-sf .dr-sf-device-memory button:hover { color: var(--text); }
#dr-sf .dr-sf-device-memory--paid { justify-content: flex-start; margin-top: 7px; }
#dr-sf .dr-sf-device-memory--result { margin: 13px 0 0; }

/* ---- FREE RESULT AS THE REPORT HEADER ----
   Deliberately mirrors the paid report's own header so the free result reads as the product
   with pieces missing, rather than a marketing page about the product. Locked panels use a
   hatched fill, not a blur over fake digits: nothing is fabricated, and the real values are
   never sent to the browser to begin with. */
#dr-sf .dr-sf-rh {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 26px;
  align-items: start;
}
#dr-sf .dr-sf-rh-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font: 500 11px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .15em;
  color: var(--gold);
  text-transform: uppercase;
}
#dr-sf .dr-sf-rh-eyebrow #dr-sf-free-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mut);
  letter-spacing: .08em;
}
#dr-sf .dr-sf-rh-name {
  font: 500 40px/1.05 'Space Grotesk', sans-serif;
  letter-spacing: -.025em;
  color: var(--text);
  margin: 14px 0 0;
}
#dr-sf .dr-sf-rh-name .dr-sf-rh-tag { color: var(--mut); }
#dr-sf .dr-sf-rh-sub {
  font: 400 13.5px/1.65 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  margin: 14px 0 16px;
  max-width: 44ch;
}
#dr-sf .dr-sf-rh-pills { display: flex; gap: 9px; flex-wrap: wrap; }
#dr-sf .dr-sf-rh-pill {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  font: 500 13px/1.3 'IBM Plex Sans', sans-serif;
  color: var(--text);
}
#dr-sf .dr-sf-rh-pill small {
  font: 400 11.5px/1.3 'IBM Plex Mono', monospace;
  color: var(--mut);
  margin-left: 6px;
  letter-spacing: .04em;
}
#dr-sf .dr-sf-rh-pill--window { color: var(--loss); }

#dr-sf .dr-sf-rh-card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}
#dr-sf .dr-sf-rh-rank { display: flex; align-items: center; gap: 12px; }
#dr-sf .dr-sf-rh-badge {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 7px;
  background: color-mix(in oklab, var(--teal) 16%, var(--bg3));
  border: 1px solid color-mix(in oklab, var(--teal) 34%, var(--line));
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
#dr-sf .dr-sf-rh-badge i {
  transform: rotate(-45deg);
  font: 500 12px/1 'IBM Plex Mono', monospace;
  font-style: normal;
  color: var(--dr-rank, var(--teal));
}
/* --dr-rank is set per-result by renderReportHeader from the League tier; the teal fallback
   covers the pre-result state and any unmapped tier. */
#dr-sf .dr-sf-rh-badge {
  background: color-mix(in oklab, var(--dr-rank, var(--teal)) 16%, var(--bg3));
  border-color: color-mix(in oklab, var(--dr-rank, var(--teal)) 34%, var(--line));
}
#dr-sf .dr-sf-rh-rankcopy { display: flex; flex-direction: column; gap: 2px; }
#dr-sf .dr-sf-rh-rankcopy strong { font: 500 19px/1.2 'Space Grotesk', sans-serif; color: var(--dr-rank, var(--teal)); }
#dr-sf .dr-sf-rh-rankcopy small {
  font: 500 10.5px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  color: var(--mut);
  text-transform: uppercase;
}
#dr-sf .dr-sf-rh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
#dr-sf .dr-sf-rh-lab {
  display: block;
  font: 500 10.5px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  color: var(--mut);
  text-transform: uppercase;
}
#dr-sf .dr-sf-rh-num {
  display: block;
  font: 500 30px/1 'Space Grotesk', sans-serif;
  color: var(--dr-rank, var(--text));
  margin-top: 3px;
}
#dr-sf .dr-sf-rh-lockedlab {
  display: block;
  font: 400 10.5px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .04em;
  color: var(--mut);
  margin-top: 5px;
}
/* Same slot as the locked caption but no lock and a touch brighter, so the "yours" column
   reads as present where the "rank" column reads as withheld. */
#dr-sf .dr-sf-rh-donelab {
  display: block;
  font: 400 10.5px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .04em;
  color: var(--text2);
  margin-top: 5px;
}
#dr-sf .dr-sf-rh-lockedlab::before {
  content: '\1F512';
  font-size: 9px;
  margin-right: 5px;
  opacity: .8;
}
/* Frosted-glass lock. The blur is over a bullet mask rendered in ::before, never over a real
   or fabricated value - the actual figures are never sent to the client, so there is nothing
   to leak and nothing to catch us inventing. The look reads as "a number is under here",
   which is true: the paid report fills these in. */
#dr-sf .dr-sf-rh-locked {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: color-mix(in oklab, var(--line) 40%, var(--bg3));
  overflow: hidden;
}
#dr-sf .dr-sf-rh-locked::before {
  content: '\2022\2022\2022\2022';
  filter: blur(3.5px);
  opacity: .5;
  color: var(--text2);
  letter-spacing: .18em;
  user-select: none;
  pointer-events: none;
}
#dr-sf .dr-sf-rh-locked--num { height: 30px; margin-top: 3px; font: 500 22px/1 'Space Grotesk', sans-serif; }
/* Redacted hidden MMR (launch-storefront structure, 2026-07): same blurred-dot treatment as
   the other locked slots but teal, so the "yours, computed" column still reads warmer than
   the grey "rank" column beside it. The gold tag below sits in the old caption's slot. */
#dr-sf .dr-sf-rh-locked--mmr::before { color: var(--teal); opacity: .72; }
#dr-sf .dr-sf-rh-redact {
  display: block;
  font: 500 9.5px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  color: var(--gold);
  margin-top: 6px;
}
#dr-sf .dr-sf-rh-locked--bar { height: 7px; border-radius: 999px; }
#dr-sf .dr-sf-rh-locked--bar::before { content: ''; }
#dr-sf .dr-sf-rh-locked--tile { height: 24px; font: 500 13px/1 'Space Grotesk', sans-serif; }
/* On hover the frosted panels warm toward gold and show a faint inset ring, so they read as
   "unlock these" rather than dead decoration. Cursor stays default - they are not links; the
   tier cards below are the action. */
#dr-sf .dr-sf-rh-locked {
  transition: background .16s ease, box-shadow .16s ease;
}
#dr-sf .dr-sf-rh-card:hover .dr-sf-rh-locked {
  background: color-mix(in oklab, var(--gold) 12%, var(--bg3));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 26%, transparent);
}
#dr-sf .dr-sf-rh-card:hover .dr-sf-rh-locked::before { opacity: .62; }
/* After the generic hover rules so the teal variant wins the tie on source order. */
#dr-sf .dr-sf-rh-card:hover .dr-sf-rh-locked--mmr {
  background: color-mix(in oklab, var(--teal) 12%, var(--bg3));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--teal) 26%, transparent);
}
#dr-sf .dr-sf-rh-card:hover .dr-sf-rh-locked--mmr::before { opacity: .85; }
#dr-sf .dr-sf-rh-bar { margin-top: 18px; }
#dr-sf .dr-sf-rh-barlabs { display: flex; justify-content: space-between; gap: 12px; }
#dr-sf .dr-sf-rh-barlabs .dr-sf-rh-lockedlab { margin-top: 8px; }
#dr-sf .dr-sf-rh-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
#dr-sf .dr-sf-rh-tile { display: block; text-align: center; }
#dr-sf .dr-sf-rh-tile small {
  display: block;
  font: 500 10px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  color: var(--mut);
  margin-top: 6px;
}

/* One line, no box. It sits between the result and the price, where a bordered panel would
   read as another thing to get past rather than a reason to keep going. */
#dr-sf .dr-sf-rh-inside {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
/* Restrained on purpose: gold label, teal separators, brighter item text. Two accents that
   already carry meaning on this page - gold is the product, teal is the live-data signal -
   rather than colouring each item differently, which would turn a supporting line into a
   competitor for the price below it. */
#dr-sf .dr-sf-rh-insidelab {
  font: 500 10px/1.6 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  color: var(--gold);
  flex: none;
}
#dr-sf .dr-sf-rh-insideitems {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 0;
  font: 400 12px/1.5 'IBM Plex Sans', sans-serif;
  color: var(--text);
}
#dr-sf .dr-sf-rh-insideitems > span { white-space: nowrap; }
#dr-sf .dr-sf-rh-insideitems > span + span::before {
  content: '·';
  color: var(--teal);
  margin: 0 9px;
}

#dr-sf .dr-sf-rh-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
#dr-sf .dr-sf-result-hook {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--teal) 34%, var(--line));
  border-radius: 10px;
  background: color-mix(in oklab, var(--teal) 7%, var(--bg2));
}
#dr-sf .dr-sf-result-hook-label { font: 600 10px/1.4 'IBM Plex Mono', monospace; letter-spacing: .13em; color: var(--teal); }
#dr-sf .dr-sf-result-hook strong { font: 600 17px/1.3 'Space Grotesk', sans-serif; color: var(--text); }
#dr-sf .dr-sf-result-hook > span:last-child { font: 400 13px/1.55 'IBM Plex Sans', sans-serif; color: var(--text2); }
#dr-sf .dr-sf-rh-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
#dr-sf .dr-sf-rh-opt:hover { border-color: var(--line2); }
#dr-sf .dr-sf-rh-opt--deep { border: 2px solid var(--gold); padding: 15px; }
#dr-sf .dr-sf-rh-optflag {
  position: absolute;
  top: -9px;
  left: 15px;
  background: var(--gold);
  color: #2a1e05;
  font: 500 10px/1.6 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 5px;
}
#dr-sf .dr-sf-rh-optrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
#dr-sf .dr-sf-rh-optrow strong { font: 500 15px/1.2 'Space Grotesk', sans-serif; color: var(--text); }
#dr-sf .dr-sf-rh-optprice { font: 500 15px/1.2 'Space Grotesk', sans-serif; color: var(--text2); }
#dr-sf .dr-sf-rh-opt--deep .dr-sf-rh-optprice { color: var(--gold); }
#dr-sf .dr-sf-rh-optdesc { font: 400 12.5px/1.6 'IBM Plex Sans', sans-serif; color: var(--text2); }
#dr-sf .dr-sf-rh-optcta {
  margin-top: auto;
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  font: 400 13.5px/1.3 'IBM Plex Sans', sans-serif;
  color: var(--text);
}
#dr-sf .dr-sf-rh-optcta--go { background: var(--gold); border-color: var(--gold); color: #2a1e05; font-weight: 500; }
#dr-sf .dr-sf-rh-choose--single { grid-template-columns: 1fr; }
#dr-sf .dr-sf-rh-downsell {
  border: 0;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  padding: 3px 8px;
  font: 500 12.5px/1.5 'IBM Plex Sans', sans-serif;
  text-decoration: underline;
  text-decoration-color: var(--line2);
  text-underline-offset: 3px;
}
#dr-sf .dr-sf-rh-downsell:hover { color: var(--text); text-decoration-color: var(--text2); }

#dr-sf .dr-sf-note {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklab, var(--teal) 35%, var(--line));
  border-radius: 8px;
  background: color-mix(in oklab, var(--teal) 7%, var(--bg2));
  color: var(--text2);
  font: 500 12.5px/1.5 'IBM Plex Sans', sans-serif;
}
#dr-sf .dr-sf-rh-trust {
  text-align: center;
  font: 500 10.5px/1.6 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  color: var(--mut);
  margin-top: 14px;
  text-transform: uppercase;
}

/* Personalized question experiment on the free result. It is intentionally one contained
   decision surface: problem switches and the preview disclosure are controls, while the solid
   gold button is the only commercial CTA. */
#dr-sf .dr-sf-question {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid color-mix(in oklab, var(--teal) 36%, var(--line));
  border-radius: 14px;
  background: color-mix(in oklab, var(--teal) 6%, var(--bg2));
}
#dr-sf .dr-sf-question-kicker {
  font: 600 10px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
  color: var(--teal);
}
#dr-sf .dr-sf-question h3 {
  margin: -2px 0 0;
  font: 650 22px/1.25 'Space Grotesk', sans-serif;
  letter-spacing: -.015em;
  color: var(--text);
  text-wrap: balance;
}
#dr-sf .dr-sf-question > p {
  margin: -4px 0 1px;
  font: 400 13.5px/1.55 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  text-wrap: pretty;
}
#dr-sf .dr-sf-question-options {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
#dr-sf .dr-sf-question-options button {
  padding: 8px 11px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text2);
  font: 500 12px/1.2 'IBM Plex Sans', sans-serif;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
#dr-sf .dr-sf-question-options button:hover { border-color: var(--teal); color: var(--text); }
#dr-sf .dr-sf-question-options button[aria-pressed="true"] {
  border-color: var(--teal);
  background: color-mix(in oklab, var(--teal) 12%, var(--bg));
  color: var(--text);
}
#dr-sf .dr-sf-question-preview-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font: 600 13px/1.35 'IBM Plex Sans', sans-serif;
  text-align: left;
  cursor: pointer;
}
#dr-sf .dr-sf-question-preview-toggle:hover { border-color: var(--line2); }
#dr-sf .dr-sf-question-preview-toggle > span:last-child {
  color: var(--teal);
  font: 500 20px/1 'Space Grotesk', sans-serif;
}
#dr-sf .dr-sf-question-preview { display: flex; flex-direction: column; gap: 7px; }
#dr-sf .dr-sf-question-preview.dr-sf-hide { display: none; }
#dr-sf .dr-sf-question-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg2);
}
#dr-sf .dr-sf-question-row-num {
  color: var(--mut);
  font: 500 10px/1 'IBM Plex Mono', monospace;
}
#dr-sf .dr-sf-question-row > span:nth-child(2) { min-width: 0; }
#dr-sf .dr-sf-question-row strong {
  display: block;
  color: var(--text);
  font: 600 13.5px/1.35 'Space Grotesk', sans-serif;
}
#dr-sf .dr-sf-question-row small {
  display: block;
  margin-top: 2px;
  color: var(--mut);
  font: 400 12px/1.45 'IBM Plex Sans', sans-serif;
}
#dr-sf .dr-sf-question-row > b {
  padding: 5px 7px;
  border: 1px solid color-mix(in oklab, var(--gold) 35%, var(--line));
  border-radius: 5px;
  color: var(--gold);
  font: 500 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  white-space: nowrap;
}
#dr-sf .dr-sf-question-cta {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: var(--gold);
  color: #2a1e05;
  font: 650 17px/1.25 'Space Grotesk', sans-serif;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}
#dr-sf .dr-sf-question-cta:hover { filter: brightness(1.04); transform: translateY(-1px); }
#dr-sf .dr-sf-question-trust {
  color: var(--mut);
  font: 500 10.5px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}
#dr-sf .dr-sf-question button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #dr-sf .dr-sf-question-options button,
  #dr-sf .dr-sf-question-cta { transition: none; }
  #dr-sf .dr-sf-question-cta:hover { transform: none; }
}

/* 900, not 760: the right-hand card needs ~340px before its two-column MMR grid starts
   crushing, and the left column needs ~380px before the name wraps mid-word. Between those
   widths the side-by-side layout is technically intact but visibly cramped. */
@media (max-width: 900px) {
  #dr-sf .dr-sf-rh { grid-template-columns: 1fr; gap: 18px; }
  #dr-sf .dr-sf-rh-name { font-size: 32px; }
}
@media (max-width: 620px) {
  #dr-sf .dr-sf-rh-name { font-size: 27px; }
  #dr-sf .dr-sf-rh-choose { grid-template-columns: 1fr; }
  #dr-sf .dr-sf-rh-tiles { gap: 7px; }
  #dr-sf .dr-sf-question { padding: 16px; }
  #dr-sf .dr-sf-question h3 { font-size: 20px; }
  #dr-sf .dr-sf-question-options button { flex: 1 1 calc(50% - 7px); }
  #dr-sf .dr-sf-question-row { grid-template-columns: auto minmax(0, 1fr); }
  #dr-sf .dr-sf-question-row > b { display: none; }
}

/* Collapsed tier summary on the checkout step. The full picker is one click away. */
#dr-sf .dr-sf-tiersum {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
}
#dr-sf .dr-sf-tiersum-lab {
  font: 500 10px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  color: var(--mut);
}
#dr-sf .dr-sf-tiersum strong { font: 500 14.5px/1.3 'Space Grotesk', sans-serif; color: var(--text); }
#dr-sf .dr-sf-tiersum-price { font-size: 14.5px; color: var(--gold); }
#dr-sf .dr-sf-tiersum button {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mut);
  font: 400 12.5px/1.5 'IBM Plex Sans', sans-serif;
  text-decoration: underline;
  cursor: pointer;
}
#dr-sf .dr-sf-tiersum button:hover { color: var(--text); }

/* ---- Giveaway code (collapsed by default, under the email field) ---- */
#dr-sf .dr-sf-gift { margin-top: 12px; }
#dr-sf .dr-sf-giftlink {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mut);
  font: 400 12.5px/1.5 'IBM Plex Sans', sans-serif;
  text-decoration: underline;
  cursor: pointer;
}
#dr-sf .dr-sf-giftlink:hover { color: var(--text); }
#dr-sf .dr-sf-giftrow { margin-top: 10px; }
#dr-sf .dr-sf-giftrow .dr-sf-finput { text-transform: uppercase; letter-spacing: .04em; }
#dr-sf .dr-sf-giftnote {
  margin: 7px 0 0;
  font: 400 12px/1.5 'IBM Plex Sans', sans-serif;
  color: var(--mut);
}
#dr-sf .dr-sf-gift--armed .dr-sf-giftlink { color: var(--win); text-decoration: none; }

/* ---- SCREEN 2 - the free MMR result ---- */
#dr-sf .dr-sf-diagnostic-result { display: flex; flex-direction: column; gap: 12px; }
#dr-sf .dr-sf-freeresulthead {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#dr-sf .dr-sf-freeresulthead strong { font: 700 20px/1 'Space Grotesk', sans-serif; color: var(--text); }
#dr-sf #dr-sf-free-updated {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  color: var(--mut);
}
#dr-sf .dr-sf-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--win); }

#dr-sf .dr-sf-diagnostic-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--bg2);
  text-align: center;
}
#dr-sf .dr-sf-mmrlabel {
  font: 500 12px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  color: var(--teal);
}
#dr-sf .dr-sf-diagnostic-number {
  display: flex;
  align-items: baseline;
  margin: 2px 0;
  color: var(--text);
  font: 700 48px/1 'Space Grotesk', sans-serif;
}
#dr-sf .dr-sf-diagnostic-number small { font-size: 20.5px; color: var(--mut); margin-left: 6px; }
#dr-sf .dr-sf-diagnostic-badge {
  font: 400 15px/1.5 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}
#dr-sf .dr-sf-diagnostic-badge strong { color: var(--text); }
#dr-sf .dr-sf-diagnostic-badge small { color: var(--text2); font-size: 15px; }
/* Proof the check read their real games, without leaking a paid verdict. */
#dr-sf .dr-sf-diagnostic-source {
  font: 500 10.5px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
}

#dr-sf .dr-sf-mismatch-alert {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg2);
}
#dr-sf .dr-sf-mismatch-icon {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  font: 700 17px/1 'Space Grotesk', sans-serif;
}
#dr-sf .dr-sf-mismatch-alert > div { min-width: 0; }
#dr-sf .dr-sf-mismatch-alert strong {
  display: block;
  margin-bottom: 2px;
  font: 600 15.5px/1.35 'Space Grotesk', sans-serif;
  color: var(--text);
}
#dr-sf .dr-sf-mismatch-alert div span {
  font: 400 13.5px/1.55 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}
/* An aligned result is the teal "that is the interesting part" case, not a gold warning. */
#dr-sf .dr-sf-mismatch-alert.is-aligned .dr-sf-mismatch-icon { border-color: var(--teal); color: var(--teal); }

#dr-sf .dr-sf-findings-head { margin-top: 2px; }
#dr-sf .dr-sf-findings-head > div span {
  display: block;
  margin-bottom: 4px;
  font: 500 12px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
  color: var(--gold);
}
#dr-sf .dr-sf-findings-head > div strong {
  font: 700 20px/1.25 'Space Grotesk', sans-serif;
  letter-spacing: -.01em;
  color: var(--text);
}

/* The three locked questions. */
#dr-sf .dr-sf-value-lock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg2);
}
#dr-sf .dr-sf-finding-index {
  flex: none;
  font: 600 12px/1 'IBM Plex Mono', monospace;
  color: var(--mut);
}
#dr-sf .dr-sf-finding-icon { flex: none; display: inline-flex; color: var(--teal); }
#dr-sf .dr-sf-finding-icon svg { width: 15px; height: 15px; }
#dr-sf .dr-sf-value-lock--deep .dr-sf-finding-icon { color: var(--gold); }
#dr-sf .dr-sf-value-lock > div { flex: 1; min-width: 0; }
#dr-sf .dr-sf-value-lock > div strong {
  display: block;
  font: 600 13.5px/1.35 'Space Grotesk', sans-serif;
  color: var(--text);
}
#dr-sf .dr-sf-value-lock > div p {
  margin: 0;
  font: 400 12px/1.45 'IBM Plex Sans', sans-serif;
  color: var(--mut);
}
#dr-sf .dr-sf-finding-state {
  flex: none;
  padding: 5px 9px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  font: 500 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  color: var(--mut);
}
#dr-sf .dr-sf-value-lock--deep .dr-sf-finding-state {
  border-color: color-mix(in oklab, var(--gold) 45%, transparent);
  color: var(--gold);
}

/* The recommendation panel. */
#dr-sf .dr-sf-diagnostic-offer {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 20px;
  border: 1px solid var(--gold);
  border-radius: 18px;
  background: color-mix(in oklab, var(--gold) 7%, var(--bg2));
  text-align: center;
}
#dr-sf .dr-sf-offer-kicker {
  align-self: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gold-fill);
  color: var(--gold-ink);
  font: 600 10.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
}
#dr-sf .dr-sf-diagnostic-offer h3 {
  margin: 0;
  font: 700 20.5px/1.25 'Space Grotesk', sans-serif;
  letter-spacing: -.015em;
  color: var(--text);
}
#dr-sf .dr-sf-diagnostic-offer > p {
  margin: 0;
  font: 400 13.5px/1.6 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  text-wrap: pretty;
}
/* Value anchor, inside the offer panel and directly above the CTA.
   Deliberately quiet: the panel is already gold-tinted and the CTA below is a solid gold fill, so
   a third gold element here would compete with the button instead of setting it up. The two
   comparisons stay muted and only our own price is lifted to --gold. */
#dr-sf .dr-sf-anchorrow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}
#dr-sf .dr-sf-anchoritem {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 10px 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg2);
  font: 500 10px/1.35 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mut);
  text-align: center;
}
#dr-sf .dr-sf-anchoritem b {
  font: 700 17px/1 'Space Grotesk', sans-serif;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--text2);
}
#dr-sf .dr-sf-anchoritem b span { font-size: 11px; font-weight: 500; color: var(--mut); }

/* Price lead: the number is the decision, so it gets the display treatment (the design's "big
   stat number" role, 700 34px) and the button underneath is left as a pure action. The mono
   qualifier rides the baseline beside it rather than sitting under it, so the pair reads as one
   line and the anchor row above lands as its set-up. */
#dr-sf .dr-sf-pricelead {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
#dr-sf .dr-sf-pricebig {
  font: 700 34px/1 'Space Grotesk', sans-serif;
  letter-spacing: -.02em;
  color: var(--gold);
}
#dr-sf .dr-sf-pricequal {
  font: 500 11px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}

#dr-sf .dr-sf-diagnostic-cta {
  width: 100%;
  gap: 10px;
  padding: 16px;
  /* A restrained top-down sheen. The design system forbids shadows (depth comes from background
     steps and 1px borders), so this is a gradient rather than the glow it is modelled on - it
     lifts the button off the gold-tinted panel without introducing a new depth cue. */
  background: linear-gradient(180deg, color-mix(in oklab, var(--gold-fill) 88%, #fff), var(--gold-fill));
}
#dr-sf .dr-sf-diagnostic-cta strong { font: 600 18.5px/1.2 'Space Grotesk', sans-serif; }
/* Inherits the button's own type; only the motion is its own. */
#dr-sf .dr-sf-cta-arrow {
  /* Hover-only motion, which is the one kind of animation this design allows. */
  transition: transform .18s ease;
}
#dr-sf .dr-sf-diagnostic-cta:hover .dr-sf-cta-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  #dr-sf .dr-sf-cta-arrow { transition: none; }
  #dr-sf .dr-sf-diagnostic-cta:hover .dr-sf-cta-arrow { transform: none; }
  #dr-sf .dr-sf-samplemini,
  #dr-sf .dr-sf-samplemini-cta > span { transition: none; }
  #dr-sf .dr-sf-samplemini:hover,
  #dr-sf .dr-sf-samplemini:hover .dr-sf-samplemini-cta > span { transform: none; }
}
#dr-sf .dr-sf-offer-trust {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font: 500 10.5px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
}
#dr-sf .dr-sf-offer-trust span + span::before { content: '\00b7'; margin-right: 12px; }
#dr-sf .dr-sf-sample-link { color: var(--teal); font: 600 13.5px/1.4 'IBM Plex Sans', sans-serif; }
#dr-sf .dr-sf-sample-link:hover { color: var(--text); }

/* The secondary choice, inside the decision. Divided from the primary by a hairline so it reads
   as "or this" rather than as more of the same pitch. */
#dr-sf .dr-sf-offer-alt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--gold) 20%, var(--line));
}

/* The downsell is a real alternative, but must not read as a second primary CTA: text-weight
   only, no fill, and the gold stays on the price alone. */
#dr-sf .dr-sf-snapshot-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--text2);
  font: 400 13.5px/1.6 'IBM Plex Sans', sans-serif;
  cursor: pointer;
}
#dr-sf .dr-sf-snapshot-fallback strong { color: var(--gold); font-weight: 600; }
#dr-sf .dr-sf-snapshot-fallback:hover strong { color: var(--text); }

/* Result tail: the exits, on one line, muted. */
#dr-sf .dr-sf-resulttail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
#dr-sf .dr-sf-resulttail .dr-sf-checkanother {
  width: auto;
  margin: 0;
  padding: 0;
  font: 400 13px/1.5 'IBM Plex Sans', sans-serif;
  color: var(--mut);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#dr-sf .dr-sf-resulttail .dr-sf-checkanother:hover { color: var(--text); }
#dr-sf .dr-sf-tailsep { width: 1px; height: 10px; background: var(--line2); }
#dr-sf .dr-sf-tailmem {
  font: 400 13px/1.5 'IBM Plex Sans', sans-serif;
  color: var(--mut);
}
#dr-sf .dr-sf-tailmem button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mut);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#dr-sf .dr-sf-tailmem button:hover { color: var(--text); }

/* ---- SCREEN 3 - checkout ---- */
#dr-sf #dr-sf-paid-details { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
#dr-sf .dr-sf-checkouthead {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
#dr-sf .dr-sf-checkouthead > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
#dr-sf .dr-sf-checkouthead strong {
  font: 700 21.5px/1.2 'Space Grotesk', sans-serif;
  letter-spacing: -.015em;
  color: var(--text);
}
#dr-sf .dr-sf-checkouthead > div > span:last-child {
  font: 400 15.5px/1.5 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}
#dr-sf .dr-sf-checkouthead b { color: var(--gold); }
#dr-sf .dr-sf-checkouthead button {
  flex: none;
  padding: 9px 14px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text2);
  font: 500 13px/1 'IBM Plex Sans', sans-serif;
  cursor: pointer;
}
#dr-sf .dr-sf-checkouthead button:hover { border-color: var(--mut); color: var(--text); }

#dr-sf .dr-sf-chooseguide {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  font: 400 13.5px/1.55 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}
#dr-sf .dr-sf-chooseguide > strong { color: var(--teal); font-weight: 600; margin-right: 4px; }
#dr-sf .dr-sf-chooseguide b { color: var(--text); }

/* Tier selector. */
#dr-sf .dr-sf-tierpick {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
#dr-sf .dr-sf-tierpick > legend { width: 100%; padding: 0; margin-bottom: 8px; }
#dr-sf .dr-sf-tiergrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#dr-sf .dr-sf-tiercard {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text2);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease;
}
#dr-sf .dr-sf-tiercard:hover { border-color: var(--mut); }
#dr-sf .dr-sf-tiercard[data-report-tier="deep"]:hover { border-color: var(--gold); }
#dr-sf .dr-sf-tiercard.selected { border-color: var(--gold); }
#dr-sf .dr-sf-tiercard.selected .dr-sf-tierprice { color: var(--gold); }
#dr-sf .dr-sf-tiercard.selected::after {
  content: '\2713';
  position: absolute;
  top: 19px;
  right: 18px;
  color: var(--gold);
  font: 600 12px/1 'IBM Plex Mono', monospace;
}
#dr-sf .dr-sf-tierbest {
  position: absolute;
  top: -9px;
  left: 18px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--gold-fill);
  color: var(--gold-ink);
  font: 600 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
}
#dr-sf .dr-sf-tierrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-right: 22px;
}
#dr-sf .dr-sf-tierrow strong { font: 600 16.5px/1.3 'Space Grotesk', sans-serif; color: var(--text); }
#dr-sf .dr-sf-tierprice {
  font: 700 16.5px/1 'Space Grotesk', sans-serif;
  color: var(--text);
  white-space: nowrap;
}
#dr-sf .dr-sf-tierdesc { font: 400 13px/1.45 'IBM Plex Sans', sans-serif; color: var(--text2); }
#dr-sf .dr-sf-tierchoice { display: flex; flex-direction: column; gap: 3px; }
#dr-sf .dr-sf-tierchoice b {
  font: 500 10px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}
#dr-sf .dr-sf-tierchoice span { font: 400 12.5px/1.5 'IBM Plex Sans', sans-serif; color: var(--text2); }/* Stripe / one-time reassurance chips. */
#dr-sf .dr-sf-prepaytrust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
#dr-sf .dr-sf-prepayitem {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  font: 400 13px/1.45 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}
#dr-sf .dr-sf-prepayitem strong { color: var(--text); font-weight: 600; }
#dr-sf .dr-sf-prepayitem svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#dr-sf .dr-sf-prepay1x { flex: none; color: var(--text); font-weight: 600; }

#dr-sf .dr-sf-buylegal {
  margin: 12px 0 0;
  font: 400 12px/1.7 'IBM Plex Sans', sans-serif;
  color: var(--mut);
  text-align: center;
  text-wrap: pretty;
}
#dr-sf .dr-sf-buylegal a { color: var(--gold); }
#dr-sf .dr-sf-buylegal a:hover { color: var(--text); }

/* ---- SCREEN 4 - in-page payment (Stripe Payment Element mounts in #dr-sf-payel) ---- */
#dr-sf .dr-sf-payhead { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
#dr-sf .dr-sf-paylock {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 10px;
  color: var(--gold);
}
#dr-sf .dr-sf-paylock svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#dr-sf .dr-sf-payheadcopy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#dr-sf .dr-sf-payeyebrow {
  font: 500 11px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
  color: var(--gold);
}
#dr-sf .dr-sf-payheadcopy strong {
  font: 700 21px/1.2 'Space Grotesk', sans-serif;
  letter-spacing: -.01em;
  color: var(--text);
}
#dr-sf .dr-sf-stripebadge {
  flex: none;
  white-space: nowrap;
  font: 400 13px/1.4 'IBM Plex Sans', sans-serif;
  color: var(--mut);
}
#dr-sf .dr-sf-stripebadge strong { color: var(--text); font-weight: 600; }

#dr-sf .dr-sf-paysummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
#dr-sf .dr-sf-payorder { min-width: 0; display: flex; flex-direction: column; }
#dr-sf .dr-sf-payorder > strong { font: 600 16.5px/1.4 'Space Grotesk', sans-serif; color: var(--text); }
#dr-sf .dr-sf-paywho {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 12.5px/1.6 'IBM Plex Mono', monospace;
  color: var(--mut);
}
#dr-sf .dr-sf-paytotal {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font: 500 10.5px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}
#dr-sf .dr-sf-payprice {
  font: 700 22px/1.1 'Space Grotesk', sans-serif;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gold);
  white-space: nowrap;
}
#dr-sf .dr-sf-paytotal small { font: 500 10.5px/1.4 'IBM Plex Mono', monospace; color: var(--mut); }

#dr-sf .dr-sf-payassurance,
#dr-sf .dr-sf-paydelivery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font: 400 13px/1.5 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}
#dr-sf .dr-sf-payassurance { margin-bottom: 20px; }
#dr-sf .dr-sf-paydelivery { margin-top: 16px; }
#dr-sf .dr-sf-payassurance > span,
#dr-sf .dr-sf-paydelivery > span { display: flex; align-items: flex-start; gap: 8px; }
#dr-sf .dr-sf-tick {
  width: 6px;
  height: 6px;
  flex: none;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--win);
}
#dr-sf #dr-sf-payel { min-height: 220px; }

#dr-sf .dr-sf-paysecurity {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 18px;
  border: 1px solid color-mix(in oklab, var(--win) 30%, var(--line));
  border-radius: 12px;
  background: color-mix(in oklab, var(--win) 7%, var(--bg));
  font: 400 13.5px/1.6 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}
#dr-sf .dr-sf-paysecurity svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: var(--win);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#dr-sf .dr-sf-paysecurity span { display: flex; flex-direction: column; gap: 2px; }
#dr-sf .dr-sf-paysecurity strong { color: var(--win); font-weight: 600; }
#dr-sf .dr-sf-paylegal {
  margin: 12px 0 0;
  font: 400 12px/1.6 'IBM Plex Sans', sans-serif;
  color: var(--mut);
  text-align: center;
}
#dr-sf .dr-sf-paylegal a { color: var(--gold); }
#dr-sf .dr-sf-paylegal a:hover { color: var(--text); }

/* ---- widget: error / spinner / paused / rebuy ---- */
#dr-sf .dr-sf-err {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--loss) 40%, transparent);
  border-radius: 10px;
  background: color-mix(in oklab, var(--loss) 10%, transparent);
  color: var(--text);
  font: 400 15px/1.5 'IBM Plex Sans', sans-serif;
}
#dr-sf .dr-sf-spin {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid var(--line2);
  border-top-color: var(--gold);
  animation: dr-sf-spin 1s linear infinite;
}
@keyframes dr-sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #dr-sf .dr-sf-spin { animation: none; } }
#dr-sf .dr-sf-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 260px;
  text-align: center;
}
#dr-sf .dr-sf-paused-title { font: 700 21px/1.3 'Space Grotesk', sans-serif; color: var(--text); }
#dr-sf .dr-sf-rebuyt { margin-top: 6px; font: 700 21px/1.3 'Space Grotesk', sans-serif; color: var(--text); }
#dr-sf .dr-sf-rebuymsg { margin: 10px 0 6px; font: 400 16px/1.7 'IBM Plex Sans', sans-serif; color: var(--text2); }

/* ---- stepper state ----
   deep-report-buy.js already drives the bars: it adds .dr-sf-on to dot 2 / dot 3 as the visitor
   advances, so the last lit bar is the current step and any lit bar before it is done. That is
   the whole state machine - these rules only paint it, and the JS needs no new hooks.
   The labels key off the widget classes the JS sets for the same transitions. */
#dr-sf .dr-sf-dot.dr-sf-on:has(~ .dr-sf-dot.dr-sf-on) {
  background: color-mix(in oklab, var(--gold) 55%, var(--line));
}
#dr-sf .dr-sf-buywidget.dr-sf-result-active .dr-sf-dotlabs span:nth-child(2),
#dr-sf .dr-sf-buywidget.dr-sf-paid-active .dr-sf-dotlabs span:nth-child(3) { color: var(--gold); }
#dr-sf .dr-sf-buywidget.dr-sf-result-active .dr-sf-dotlabs span:first-child,
#dr-sf .dr-sf-buywidget.dr-sf-paid-active .dr-sf-dotlabs span:first-child,
#dr-sf .dr-sf-buywidget.dr-sf-paid-active .dr-sf-dotlabs span:nth-child(2) { color: var(--text2); }
/* NBSP, not a plain space: a trailing space in content is collapsed away and the tick
   would render jammed against the label ("_CHECK"). */
#dr-sf .dr-sf-buywidget.dr-sf-result-active .dr-sf-dotlabs span:first-child::before,
#dr-sf .dr-sf-buywidget.dr-sf-paid-active .dr-sf-dotlabs span:first-child::before,
#dr-sf .dr-sf-buywidget.dr-sf-paid-active .dr-sf-dotlabs span:nth-child(2)::before { content: '\2713\00a0'; }

/* ===========================================================================
   Focused flow
   From the moment the free result lands, the storefront IS the checker flow: the prototype's
   Checker Flow screens 2-4 are each a standalone min(640px) column with no side copy, so the
   two-column fold collapses to that same centred column for the rest of the funnel.

   This starts one step earlier than it used to. The left column sells the FREE CHECK ("you do
   not know why it will not move"), and once the number is on screen that pitch is spent - the
   result card does its own selling with the locked rows and the offer panel. Leaving it there
   only stranded ~600px of dead space beside a ~1100px-tall result card.

   Two triggers, one behaviour: deep-report-buy.js puts .dr-sf-result-active on the widget for
   screen 2 and body.dr-payment-active for screens 3-4 (they are mutually exclusive - the JS
   drops result-active when the paid step opens), so :has() lets the result screen reuse this
   without needing a new JS hook.
=========================================================================== */
body.dr-payment-active #dr-sf #buy.dr-sf-sect,
#dr-sf #buy.dr-sf-sect:has(.dr-sf-result-active) { padding-top: 24px; }
body.dr-payment-active #dr-sf .dr-sf-buywrap,
#dr-sf .dr-sf-buywrap:has(.dr-sf-result-active) { display: block; max-width: 640px; margin: 0 auto; }
body.dr-payment-active #dr-sf .dr-sf-fold-head,
body.dr-payment-active #dr-sf .dr-sf-fold-copy,
body.dr-payment-active #dr-sf .dr-sf-trustrow,
body.dr-payment-active #dr-sf .dr-sf-livestats,
body.dr-payment-active #dr-sf .dr-sf-mcta,
body.dr-payment-active .chatbot-container,
#dr-sf .dr-sf-buywrap:has(.dr-sf-result-active) .dr-sf-fold-head,
#dr-sf .dr-sf-buywrap:has(.dr-sf-result-active) .dr-sf-fold-copy,
/* The ticker sells the free check too - it says nothing once the check is done. */
#dr-sf .dr-sf-buywrap:has(.dr-sf-result-active) .dr-sf-livestats { display: none !important; }
body.dr-payment-active #dr-sf .dr-sf-herocheck,
#dr-sf .dr-sf-buywrap:has(.dr-sf-result-active) .dr-sf-herocheck { width: 100%; }
/* The result screen is a card of its own (hero, alerts, offer panel), so the widget shell
   would be a box drawn around a stack of boxes. Screens 3-4 keep the shell. */
#dr-sf .dr-sf-buywidget.dr-sf-result-active { padding: 0; border: 0; background: none; min-height: 0; }
#dr-sf .dr-sf-buywidget.dr-sf-result-active .dr-sf-dots { margin-top: 0; }
#dr-sf .dr-sf-buywidget.dr-sf-result-active .dr-sf-dotlabs { margin-bottom: 14px; }
#dr-sf .dr-sf-buywidget.dr-sf-result-active .dr-sf-freefine { margin-top: 6px; font-size: 12px; }

/* Screens 3-4 are a focused 640px column, so the widget can afford less air than the fold's
   two-column card needs. */
#dr-sf .dr-sf-buywidget.dr-sf-paid-active { min-height: 0; padding: 26px 28px; }
#dr-sf .dr-sf-buywidget.dr-sf-paid-active .dr-sf-dotlabs { margin-bottom: 18px; }
#dr-sf .dr-sf-buywidget.dr-sf-paid-active #dr-sf-go { margin-top: 16px; }
#dr-sf .dr-sf-buywidget.dr-sf-paid-active .dr-sf-buylegal { margin-top: 10px; font-size: 11.5px; }
#dr-sf .dr-sf-buywidget.dr-sf-paid-active #dr-sf-st-input > .dr-sf-freeintro,
#dr-sf .dr-sf-buywidget.dr-sf-paid-active #dr-sf-st-input > .dr-sf-flab,
#dr-sf .dr-sf-buywidget.dr-sf-paid-active #dr-sf-st-input > #dr-sf-riotid,
#dr-sf .dr-sf-buywidget.dr-sf-paid-active #dr-sf-st-input > .dr-sf-mt14,
#dr-sf .dr-sf-buywidget.dr-sf-paid-active #dr-sf-st-input > #dr-sf-free-go,
#dr-sf .dr-sf-buywidget.dr-sf-paid-active #dr-sf-st-input > .dr-sf-freefine,
#dr-sf .dr-sf-buywidget.dr-sf-paid-active #dr-sf-st-input > .dr-sf-paidtoggle,
#dr-sf .dr-sf-buywidget.dr-sf-paid-active #dr-sf-st-input > .dr-sf-device-memory,
#dr-sf .dr-sf-buywidget.dr-sf-paid-active .dr-sf-faint { display: none !important; }
#dr-sf .dr-sf-buywidget.dr-sf-paid-active #dr-sf-paid-details { margin: 0; padding: 0; border: 0; }

/* ===========================================================================
   WHAT'S INSIDE
=========================================================================== */
#dr-sf .dr-sf-inside { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }
#dr-sf .dr-sf-insidecard {
  display: flex;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg2);
  transition: border-color .18s ease;
}
#dr-sf .dr-sf-insidecard:hover { border-color: var(--line2); }
#dr-sf .dr-sf-insidenum { flex: none; font: 600 15px/1.7 'IBM Plex Mono', monospace; color: var(--gold); }
#dr-sf .dr-sf-insidet { font: 600 18px/1.3 'Space Grotesk', sans-serif; color: var(--text); }
#dr-sf .dr-sf-insided { flex: 1; font: 400 15.5px/1.65 'IBM Plex Sans', sans-serif; color: var(--text2); }
#dr-sf .dr-sf-insidestat {
  font: 500 11.5px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal);
}
#dr-sf .dr-sf-insidecard > div { display: flex; flex-direction: column; gap: 6px; flex: 1; }
#dr-sf .dr-sf-insidestat.dr-sf-scope { color: var(--gold); }

/* ===========================================================================
   SAMPLE / THE WARRANTY
=========================================================================== */
#dr-sf .dr-sf-sampleband {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 56px;
  margin-top: 72px;
  padding-top: 72px;
  border-top: 1px solid var(--line);
}
#dr-sf .dr-sf-sb-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
#dr-sf .dr-sf-warranty {
  font: 500 13px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
#dr-sf .dr-sf-sampleband h3 {
  margin: 0;
  font: 700 clamp(26px, 3vw, 36px)/1.18 'Space Grotesk', sans-serif;
  letter-spacing: -.015em;
  color: var(--text);
}
#dr-sf .dr-sf-sampleband p {
  margin: 0;
  font: 400 18px/1.75 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  text-wrap: pretty;
}
/* The warranty CTA is the outline button in the prototype, not the gold one. */
#dr-sf .dr-sf-sb-txt > .dr-sf-btn {
  padding: 14px 22px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 600 15.5px/1 'Space Grotesk', sans-serif;
}
#dr-sf .dr-sf-sb-txt > .dr-sf-btn:hover { border-color: var(--gold); background: transparent; color: var(--gold); }

/* The real report slice. */
#dr-sf .dr-sf-samplecard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--bg2);
  transition: border-color .18s ease;
}
#dr-sf .dr-sf-samplecard:hover { border-color: var(--gold); }
#dr-sf .dr-sf-sc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#dr-sf .dr-sf-cardk {
  font: 500 11.5px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
}
#dr-sf .dr-sf-sc-tag {
  padding: 5px 10px;
  border: 1px solid color-mix(in oklab, var(--teal) 40%, transparent);
  border-radius: 999px;
  font: 500 11px/1 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  color: var(--teal);
  white-space: nowrap;
}
#dr-sf .dr-sf-sc-duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
#dr-sf .dr-sf-sc-side { display: flex; flex-direction: column; gap: 3px; }
#dr-sf .dr-sf-sc-side:last-child { align-items: flex-end; text-align: right; }
#dr-sf .dr-sf-sc-sidek {
  font: 500 11px/1.8 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  color: var(--mut);
}
#dr-sf .dr-sf-sc-big { font: 700 36px/1 'Space Grotesk', sans-serif; color: var(--text); }
#dr-sf .dr-sf-sc-side:last-child .dr-sf-sc-big { color: var(--text2); }
#dr-sf .dr-sf-sc-sidetier {
  font: 500 11px/1.8 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  color: var(--gold);
}
#dr-sf .dr-sf-sc-side:last-child .dr-sf-sc-sidetier { color: var(--mut); }
#dr-sf .dr-sf-sc-sidelab { font: 400 11px/1.4 'IBM Plex Sans', sans-serif; color: var(--mut); }
#dr-sf .dr-sf-sc-delta {
  width: 54px;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line2);
  border-radius: 50%;
}
#dr-sf .dr-sf-sc-deltav { font: 700 16px/1 'Space Grotesk', sans-serif; color: var(--gold); }
#dr-sf .dr-sf-sc-deltak {
  font: 500 9.5px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  color: var(--mut);
}
#dr-sf .dr-sf-sc-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#dr-sf .dr-sf-sc-status {
  padding: 5px 10px;
  border: 1px solid color-mix(in oklab, var(--win) 40%, transparent);
  border-radius: 999px;
  font: 500 11px/1 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--win);
  white-space: nowrap;
}
#dr-sf .dr-sf-sc-status-warn {
  border-color: color-mix(in oklab, var(--loss) 40%, transparent);
  color: var(--loss);
}
#dr-sf .dr-sf-sc-sub {
  font: 500 11px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
}
#dr-sf .dr-sf-sc-lpline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font: 500 11px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
}
#dr-sf .dr-sf-sc-lpgood { color: var(--win); }
#dr-sf .dr-sf-sc-lpbad { color: var(--loss); }
#dr-sf .dr-sf-sc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
#dr-sf .dr-sf-sc-tile { display: flex; flex-direction: column; gap: 4px; }
#dr-sf .dr-sf-sc-tval { font: 700 21px/1 'Space Grotesk', sans-serif; color: var(--text); }
#dr-sf .dr-sf-sc-tlab {
  font: 500 10.5px/1.7 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mut);
}
#dr-sf .dr-sf-sc-career { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#dr-sf .dr-sf-sc-peak {
  padding: 5px 9px;
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  border-radius: 999px;
  font: 500 10.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  color: var(--gold);
}
#dr-sf .dr-sf-sc-badge {
  padding: 5px 9px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  font: 500 10.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  color: var(--text2);
}

/* Champion-choice bars inside the sample card. */
#dr-sf .dr-sf-sc-cliff {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
/* Columns size to the caption under each bar ("Lux - 116 season"), not the 34px
   track itself - a fixed width spilled into the gap at any type scale, and the
   caption unwraps as the column grows, so max-content is the only stable answer. */
#dr-sf .dr-sf-cliffbars { display: grid; grid-template-columns: max-content max-content 1fr; gap: 14px; align-items: end; }
#dr-sf .dr-sf-cliffcol { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#dr-sf .dr-sf-clifftrack {
  position: relative;
  display: block;
  width: 34px;
  height: 74px;
  border-radius: 6px;
  background: var(--bg3);
  overflow: hidden;
}
#dr-sf .dr-sf-clifffill { position: absolute; left: 0; right: 0; bottom: 0; display: block; border-radius: 6px 6px 0 0; }
#dr-sf .dr-sf-cliffgood { background: var(--win); }
#dr-sf .dr-sf-cliffbad { background: var(--loss); }
#dr-sf .dr-sf-cliffv { font: 700 17px/1 'Space Grotesk', sans-serif; color: var(--win); }
#dr-sf .dr-sf-cliffvbad { color: var(--loss); }
#dr-sf .dr-sf-clifflab {
  font: 500 10.5px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .04em;
  color: var(--mut);
  white-space: nowrap;
}
#dr-sf .dr-sf-cliffnote {
  align-self: center;
  font: 400 13.5px/1.6 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}

/* Report snippets (loser's queue + the roast). */
#dr-sf .dr-sf-sb-snips { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#dr-sf .dr-sf-snip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg2);
}
#dr-sf .dr-sf-snip-tag {
  padding: 5px 10px;
  border-radius: 999px;
  font: 500 11px/1 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  white-space: nowrap;
}
#dr-sf .dr-sf-snip-clear {
  border: 1px solid color-mix(in oklab, var(--win) 40%, transparent);
  color: var(--win);
}
#dr-sf .dr-sf-snip-gold {
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
  color: var(--gold);
}
#dr-sf .dr-sf-snip-quote {
  margin: 0;
  font: 600 17px/1.55 'Space Grotesk', sans-serif;
  letter-spacing: -.01em;
  color: var(--text);
  text-wrap: pretty;
}
#dr-sf .dr-sf-snip-stats { display: flex; flex-wrap: wrap; gap: 7px; }
#dr-sf .dr-sf-snip-note {
  margin: 0;
  font: 400 13.5px/1.7 'IBM Plex Sans', sans-serif;
  font-style: italic;
  color: var(--mut);
}
/* The roast snippet is the prototype's gold-tinted teaser panel. */
#dr-sf .dr-sf-sb-snips .dr-sf-snip:last-child {
  border-color: color-mix(in oklab, var(--gold) 45%, transparent);
  background: color-mix(in oklab, var(--gold) 7%, var(--bg2));
}

/* ===========================================================================
   WHY PAY (stats site / coach / this)
=========================================================================== */
#dr-sf .dr-sf-vs-sect { padding: 44px 0; border-top: 1px solid var(--line); }
#dr-sf .dr-sf-vs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#dr-sf .dr-sf-vs-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg2);
}
#dr-sf .dr-sf-vs-us {
  border-color: var(--gold);
  background: color-mix(in oklab, var(--gold) 8%, var(--bg2));
}
#dr-sf .dr-sf-vs-k {
  display: block;
  font: 500 11.5px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
}
#dr-sf .dr-sf-vs-kus { color: var(--gold); }
#dr-sf .dr-sf-vs-p { margin: 0; font: 400 16px/1.7 'IBM Plex Sans', sans-serif; color: var(--text2); }

/* ===========================================================================
   TRUST ROW (the four guarantees)
=========================================================================== */
#dr-sf .dr-sf-trustrow { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
#dr-sf .dr-sf-buypoints { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
#dr-sf .dr-sf-buypoint {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg2);
  /* 14px, up from 13: this is multi-line prose in a card, not a label. The strong below moves with
     it so the heading still outsizes its own body. */
  font: 400 16px/1.65 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}
#dr-sf .dr-sf-buypoint strong {
  display: block;
  margin-bottom: 6px;
  font: 600 17px/1.4 'Space Grotesk', sans-serif;
  color: var(--text);
}
#dr-sf .dr-sf-bpico { font: 700 21px/1 'Space Grotesk', sans-serif; color: var(--gold); }
/* Sentence-case sans at 12.5px, not 11px letter-spaced mono uppercase. The auto-refund is the
   strongest risk-reversal on the page, and mono-uppercase-at-11px is the site's label voice: it
   read as a legal disclaimer to scroll past. The source text was already sentence case; only
   text-transform was shouting it. Mono uppercase stays the voice for actual labels and chips. */
#dr-sf .dr-sf-refund {
  margin-top: 26px;
  font: 400 13.5px/1.6 'IBM Plex Sans', sans-serif;
  letter-spacing: normal;
  color: var(--mut);
  text-align: center;
}

/* ===========================================================================
   FOLLOW-UP LOOP
=========================================================================== */
#dr-sf .dr-sf-loopsect { padding: 72px 0; border-top: 1px solid var(--line); }
#dr-sf .dr-sf-loopband {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
#dr-sf .dr-sf-loopcopy { display: flex; flex-direction: column; gap: 18px; }
#dr-sf .dr-sf-looph {
  margin: 0;
  font: 700 clamp(26px, 3vw, 36px)/1.18 'Space Grotesk', sans-serif;
  letter-spacing: -.015em;
  color: var(--text);
}
#dr-sf .dr-sf-loopp {
  margin: 0;
  font: 400 18px/1.75 'IBM Plex Sans', sans-serif;
  color: var(--text2);
  text-wrap: pretty;
}
#dr-sf .dr-sf-loopfine {
  margin: 0;
  font: 400 15px/1.7 'IBM Plex Sans', sans-serif;
  font-style: italic;
  color: var(--mut);
}
#dr-sf .dr-sf-loopdemo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--bg2);
}
#dr-sf .dr-sf-loopline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font: 400 15.5px/1.4 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}
#dr-sf .dr-sf-loopline:last-child { border-bottom: 0; padding-bottom: 0; }
#dr-sf .dr-sf-loopdelta { font: 600 16px/1 'IBM Plex Mono', monospace; color: var(--text); white-space: nowrap; }
/* before -> after: neutral start, muted arrow, green only on the improved value */
#dr-sf .dr-sf-loopfrom { color: var(--text); }
#dr-sf .dr-sf-looparrow { color: var(--mut); }
#dr-sf .dr-sf-loopto { color: var(--win); }

/* ===========================================================================
   FAQ (accordion: one open at a time; deep-report-buy.js toggles .dr-sf-faqopen)

   Progressive enhancement, deliberately: the answers are OPEN by default and only collapse once
   the buy JS has marked the section .dr-sf-faq-js. Collapsing them from plain CSS would mean that
   if deep-report-buy.js 404s or throws, all 13 answers are unopenable with no fallback - and it
   would put the long-tail SEO copy behind JS for no reason. Cursor/+ affordances are likewise
   only shown once they actually do something.
=========================================================================== */
#dr-sf .dr-sf-faqsect { padding: 72px 0; border-top: 1px solid var(--line); }
#dr-sf .dr-sf-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 36px;
}
#dr-sf .dr-sf-faqcard {
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg2);
  transition: border-color .18s ease;
}
#dr-sf .dr-sf-faq-js .dr-sf-faqcard { cursor: pointer; }
#dr-sf .dr-sf-faq-js .dr-sf-faqcard:hover { border-color: var(--line2); }
#dr-sf .dr-sf-faqq {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  font: 600 16.5px/1.45 'Space Grotesk', sans-serif;
  color: var(--text);
}
#dr-sf .dr-sf-faq-js .dr-sf-faqq::after {
  content: '+';
  flex: none;
  font: 600 18.5px/1 'IBM Plex Mono', monospace;
  color: var(--gold);
}
#dr-sf .dr-sf-faq-js .dr-sf-faqcard.dr-sf-faqopen .dr-sf-faqq::after { content: '\2212'; }
#dr-sf .dr-sf-faqa {
  margin: 12px 0 0;
  font: 400 15.5px/1.7 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}
#dr-sf .dr-sf-faq-js .dr-sf-faqa { display: none; }
#dr-sf .dr-sf-faq-js .dr-sf-faqcard.dr-sf-faqopen .dr-sf-faqa { display: block; }

/* ===========================================================================
   LEGAL
=========================================================================== */
#dr-sf .dr-sf-legal {
  margin-top: 0;
  padding: 36px 0 56px;
  border-top: 1px solid var(--line);
  text-align: center;
}
#dr-sf .dr-sf-legal-label {
  margin-bottom: 12px;
  font: 500 11px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .18em;
  color: var(--mut);
}
#dr-sf .dr-sf-legal-body {
  max-width: 110ch;
  margin: 0 auto;
  font: 400 11.5px/1.7 'IBM Plex Sans', sans-serif;
  color: var(--mut);
  text-align: left;
}

/* Abandonment survey. The card deliberately has no gold sales CTA: it is a research prompt,
   and every answer has equal visual weight so the styling does not steer the response. */
#dr-sf .dr-sf-exit-survey {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 20px;
  background: rgba(5, 5, 7, .72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
#dr-sf .dr-sf-exit-survey.dr-sf-hide { display: none; }
#dr-sf .dr-sf-exit-survey-card {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 28px;
  border: 1px solid var(--line2);
  border-radius: 16px;
  background: var(--bg2);
  color: var(--text);
}
#dr-sf .dr-sf-exit-survey-close {
  position: absolute;
  top: 12px;
  right: 13px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mut);
  font: 400 25px/1 'IBM Plex Sans', sans-serif;
  cursor: pointer;
}
#dr-sf .dr-sf-exit-survey-close:hover { background: var(--bg); color: var(--text); }
#dr-sf .dr-sf-exit-survey-kicker {
  display: block;
  margin: 0 42px 8px 0;
  color: var(--teal);
  font: 600 10px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
}
#dr-sf .dr-sf-exit-survey h2 {
  max-width: 470px;
  margin: 0;
  color: var(--text);
  font: 650 23px/1.28 'Space Grotesk', sans-serif;
  letter-spacing: -.015em;
  text-wrap: balance;
}
#dr-sf .dr-sf-exit-survey-card > p {
  margin: 8px 0 18px;
  color: var(--mut);
  font: 400 13px/1.5 'IBM Plex Sans', sans-serif;
}
#dr-sf .dr-sf-exit-survey-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
#dr-sf .dr-sf-exit-survey-options button {
  min-height: 50px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text2);
  font: 500 13px/1.35 'IBM Plex Sans', sans-serif;
  text-align: left;
  cursor: pointer;
}
#dr-sf .dr-sf-exit-survey-options button:hover {
  border-color: var(--teal);
  color: var(--text);
}
#dr-sf .dr-sf-exit-survey button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
#dr-sf .dr-sf-exit-survey-thanks {
  padding: 28px 10px;
  color: var(--teal);
  font: 650 20px/1.3 'Space Grotesk', sans-serif;
  text-align: center;
}
/* Snapshot downsell, shown in place of the thank-you when the answer was the price. */
#dr-sf .dr-sf-exit-survey-downsell { padding: 6px 0 0; text-align: left; }
#dr-sf .dr-sf-exit-survey-downsell.dr-sf-hide { display: none; }
#dr-sf .dr-sf-exit-survey-downsell strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font: 650 19px/1.3 'Space Grotesk', sans-serif;
}
#dr-sf .dr-sf-exit-survey-downsell p {
  margin: 0 0 16px;
  color: var(--mut);
  font: 400 13px/1.55 'IBM Plex Sans', sans-serif;
}
@media (max-width: 560px) {
  #dr-sf .dr-sf-exit-survey { padding: 12px; }
  #dr-sf .dr-sf-exit-survey-card { padding: 24px 18px; }
  #dr-sf .dr-sf-exit-survey h2 { font-size: 21px; }
  #dr-sf .dr-sf-exit-survey-options { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Sticky mobile CTA (desktop: never; mobile: buy JS toggles [hidden])
=========================================================================== */
#dr-sf .dr-sf-mcta { display: none; }
@media (max-width: 720px) {
  #dr-sf .dr-sf-mcta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9980;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  #dr-sf .dr-sf-mcta[hidden] { display: none; }
  #dr-sf .dr-sf-mcta-price {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 500 12.5px/1.4 'IBM Plex Mono', monospace;
    color: var(--text2);
  }
  #dr-sf .dr-sf-mcta-btn {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(60%, 220px);
    padding: 11px 16px;
    font-size: 16px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 420px) {
  /* The status sentence competes with the actual action on the narrowest phones. */
  #dr-sf .dr-sf-mcta { gap: 0; padding-left: 12px; padding-right: 12px; }
  #dr-sf .dr-sf-mcta-price { display: none; }
  #dr-sf .dr-sf-mcta-btn { flex: 1 1 auto; width: 100%; max-width: none; }
}

/* ===========================================================================
   Responsive
   The prototypes are desktop-first at 1180px with no breakpoints of their own; per the
   handoff, multi-column grids collapse below ~900px and touch targets stay >=44px.
=========================================================================== */
@media (max-width: 900px) {
  #dr-sf .dr-sf-sect,
  #dr-sf .dr-sf-vs-sect,
  #dr-sf .dr-sf-loopsect,
  #dr-sf .dr-sf-faqsect { padding: 48px 0; }
  /* Mobile fold: heading, then the checker, then the longer sell copy. */
  #dr-sf .dr-sf-buywrap {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, max-content);
    grid-template-areas: "head" "check" "copy";
    gap: 24px;
  }
  #dr-sf #buy.dr-sf-sect { padding-top: 28px; }
  #dr-sf .dr-sf-buywidget { padding: 24px; }
  #dr-sf .dr-sf-inside { grid-template-columns: 1fr; }
  #dr-sf .dr-sf-sampleband { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; padding-top: 48px; }
  #dr-sf .dr-sf-sb-snips { grid-template-columns: 1fr; }
  #dr-sf .dr-sf-vs { grid-template-columns: 1fr; }
  #dr-sf .dr-sf-loopband { grid-template-columns: 1fr; gap: 32px; }
  #dr-sf .dr-sf-buypoints { grid-template-columns: repeat(2, 1fr); }
  #dr-sf .dr-sf-trustrow { margin-top: 40px; padding-top: 40px; }
  #dr-sf .dr-sf-faq { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #dr-sf #buy.dr-sf-sect { padding-top: 18px; }
  #dr-sf .dr-sf-buywrap { gap: 16px; }
  #dr-sf .dr-sf-buywidget { padding: 20px; }
  #dr-sf .dr-sf-fold-head .dr-sf-kicker { font-size: 9.5px; line-height: 1.35; letter-spacing: .11em; }
  #dr-sf .dr-sf-fold-head .dr-sf-h1 { margin-top: 7px; }
  #dr-sf .dr-sf-herosub { margin-top: 8px; font-size: 15.5px; line-height: 1.48; }
  #dr-sf .dr-sf-freeintro { padding: 11px 12px; }
  #dr-sf .dr-sf-freeintro > span:last-child { display: none; }
  #dr-sf .dr-sf-buypoints { grid-template-columns: 1fr; }
  #dr-sf .dr-sf-tiergrid { grid-template-columns: 1fr; }  #dr-sf .dr-sf-prepaytrust,
  #dr-sf .dr-sf-payassurance,
  #dr-sf .dr-sf-paydelivery { grid-template-columns: 1fr; }
  #dr-sf .dr-sf-diagnostic-number { font-size: 44px; }
  #dr-sf .dr-sf-diagnostic-offer { padding: 24px 20px; }
  #dr-sf .dr-sf-sc-tiles { grid-template-columns: 1fr; }
  /* Flex, not grid, at this width: the note spans the full row, and as a grid
     item its max-content would drag the two max-content bar columns wide enough
     to burst the card. As a flex line it just wraps underneath. */
  #dr-sf .dr-sf-cliffbars { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
  #dr-sf .dr-sf-cliffnote { flex: 1 0 100%; }
  /* The stat tag is the one string long enough to need permission to break. */
  #dr-sf .dr-sf-sc-top { flex-wrap: wrap; }
  #dr-sf .dr-sf-sc-tag { white-space: normal; }
  #dr-sf .dr-sf-value-lock { flex-wrap: wrap; }
  #dr-sf .dr-sf-value-lock > div { flex: 1 0 60%; }
  /* A long Riot ID at the h1's clamp floor would drag the page wider than the viewport. */
  #dr-sf .dr-sf-h1 { font-size: clamp(28px, 8vw, 38px); overflow-wrap: anywhere; }
  #dr-sf .dr-sf-samplemini-top { padding: 17px 16px 0; }
  #dr-sf .dr-sf-samplemini-title { padding: 13px 16px 0; font-size: 19px; }
  #dr-sf .dr-sf-samplemini-proofs { grid-template-columns: 1fr; padding: 15px 16px 0; }
  #dr-sf .dr-sf-samplemini-proof { min-height: 0; }
  #dr-sf .dr-sf-samplemini-scope { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 16px 16px; }
  #dr-sf .dr-sf-samplemini-scope > span { min-height: 68px; flex-direction: column; gap: 5px; text-align: center; }
  #dr-sf .dr-sf-samplemini-scope small { max-width: none; text-align: center; }
  #dr-sf .dr-sf-samplemini-foot { flex-direction: column; align-items: stretch; padding: 13px 16px; }
  #dr-sf .dr-sf-samplemini-cta { min-height: 42px; }
  #dr-sf .dr-sf-samplemini-note { text-align: center; }
}


/* ===========================================================================
   NEON RESKIN (2026-07-23) - the launch page's blueprint palette on the
   dossier layout. Layout, spacing and type are untouched: this block only
   remaps the .drx tokens inside #dr-sf and adds the launch page's glow
   treatments. Dark theme only - light mode keeps the dossier gold. Delete
   this whole block to restore the gold/graphite storefront.
   Palette source: mmr-dashboard-blueprint.min.css + deep-report-launchtest.css
   (navy #0a0e1a gradient, emerald #00ff7f CTAs, cyan #00d4ff accents,
   amber redaction tag). =================================================== */
html[data-theme=dark] #dr-sf.drx {
  --bg:#0a0e1a; --bg2:#0d1420; --bg3:#121a2a;
  --line:#ffffff14; --line2:#ffffff26;
  --text:#ffffff; --text2:#ffffffb3; --mut:#ffffff80;
  --teal:#00d4ff; --win:#00ff7f; --loss:#ff4444;
  /* Accent split, launch-style: cyan carries kickers/links/prices (accent
     text), emerald carries the buttons. Ink on emerald is deep navy. */
  --gold:#00d4ff;
  --gold-fill:#00ff7f;
  --gold-ink:#04121f;
  /* Literal, not var(): root paint on the token-declaring element goes stale
     on theme class swaps otherwise (same trap deep-report-v2.css documents). */
  background:linear-gradient(135deg,#0a0e1a 0%,#1a1f2e 100%);
}
/* The question CTA hardcoded its ink for the gold fill; on emerald it takes
   the same navy ink as the primary buttons. */
html[data-theme=dark] #dr-sf .dr-sf-question-cta { color:#04121f; }
/* Launch CTA glow: emerald halo on the two buy buttons. Shadows only - no
   geometry change. */
html[data-theme=dark] #dr-sf .dr-sf-btn:not(.dr-sf-btn2),
html[data-theme=dark] #dr-sf .dr-sf-question-cta {
  box-shadow:0 0 24px #00ff7f3d, 0 4px 14px #00000080;
}
html[data-theme=dark] #dr-sf .dr-sf-btn:not(.dr-sf-btn2):hover,
html[data-theme=dark] #dr-sf .dr-sf-question-cta:hover {
  box-shadow:0 0 34px #00ff7f59, 0 4px 16px #00000090;
}
/* The redaction tag stays amber like the launch card - cyan would drown it
   next to the cyan locked dots it sits under. */
html[data-theme=dark] #dr-sf .dr-sf-rh-redact { color:#fbbf24; }