/* KegelPro quiz funnel — styles layered on top of site/style.css.
   Same palette, same rules: no imports, no fonts, no external requests.
   Most text uses the base palette; safety answers have theme-specific red
   text checked for contrast against their tinted backgrounds. */

/* The UA rule for [hidden] is `display: none` at author-origin-beating
   specificity of exactly one attribute selector, so ANY class rule that sets
   display (.btn, .store-badge, .opt-body …) silently defeats it. This funnel
   toggles `hidden` on buttons and on whole page regions, so it needs the
   override to be unconditional. Without it, the Continue button appears on
   single-select questions. */
[hidden] { display: none !important; }

/* ------------------------------------------------------ lander variants -- */
/* Variant C ships with a fallback headline behind a config toggle (§9,
   blueprint open item 3). Both headlines are in the HTML and CSS picks one,
   set by assets/config.js in <head> before first paint, so there is no flash
   and no layout work on the main thread. */

[data-hl='primary'] .hl-fallback,
[data-hl='fallback'] .hl-primary { display: none; }

/* -------------------------------------------------------------- trust ---- */

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--text-2);
}
.trust-row li {
  position: relative;
  padding-inline-start: 20px;
}
.trust-row li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.cta-note {
  color: var(--text-2);
  font-size: 0.94rem;
  margin: 14px 0 0;
  max-width: 52ch;
}

.btn-lead {
  width: auto;
  min-width: 260px;
  padding: 16px 30px;
  font-size: 1.05rem;
  margin-top: 30px;
}

/* --------------------------------------------------------------- quiz ---- */

#quiz[hidden] { display: none; }

.quiz-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 26px 20px 72px;
}

/* progress ---------------------------------------------------------------- */

.progress {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 30px;
}

.progress-sections {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.progress-sections li {
  flex: var(--weight, 1) 1 0;
  min-width: 0;
}
/* display:block is load-bearing: these are <span>s, and height does not apply
   to an inline box — the track renders at line-height instead of 5px. */
.progress-track {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-raised);
  overflow: hidden;
}
.progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 260ms ease;
}
.progress-name {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: var(--steel);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.progress-sections li[data-active='true'] .progress-name { color: var(--text-2); }

.progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.86rem;
  color: var(--text-2);
}

.back-btn {
  background: none;
  border: 0;
  padding: 6px 2px;
  margin: 0;
  font: inherit;
  font-size: 0.86rem;
  color: var(--text-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.back-btn:hover { color: var(--text); }
.back-btn[hidden] { display: none; }

/* questions --------------------------------------------------------------- */

.q-card { animation: q-in 200ms ease both; }

@keyframes q-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.q-card fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.q-card legend {
  display: block;
  padding: 0;
  font-size: clamp(1.35rem, 4.4vw, 1.7rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
}

.q-sub {
  color: var(--text-2);
  font-size: 0.97rem;
  margin: 12px 0 24px;
  max-width: 52ch;
}

.options { display: grid; gap: 10px; margin: 0 0 8px; }

/* The real input stays in the accessibility tree and is what the keyboard
   drives; the label is the paint surface. */
.opt { position: relative; display: block; }
.opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.opt-body {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease;
}
.opt-body:hover { border-color: var(--hairline); }
.opt input:checked + .opt-body {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.opt input:focus-visible + .opt-body {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.opt-mark {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--hairline);
  border-radius: 50%;
  position: relative;
}
.opt--multi .opt-mark { border-radius: 5px; }
.opt input:checked + .opt-body .opt-mark {
  border-color: var(--accent);
  background: var(--accent);
}
/* PHYSICAL ON PURPOSE. This is the tick glyph inside a fixed 20px box, not
   layout: it is a shape, and a shape is not mirrored by writing direction any
   more than a digit is. Switching it to inset-inline-start would flip the tick
   to the far edge of its own box on RTL pages and centre it worse, for no
   gain. Everything around it is logical; this one is a considered exception. */
.opt input:checked + .opt-body .opt-mark::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.opt-text { min-width: 0; }
.opt-label { display: block; font-weight: 600; color: var(--text); line-height: 1.35; }
.opt-detail {
  display: block;
  color: var(--text-2);
  font-size: 0.87rem;
  margin-top: 3px;
  line-height: 1.4;
}

.q-continue { margin-top: 20px; }

/* Safety conditions are text, never answer controls. */
.safety-conditions {
  --safety-red: #ff827a;
  margin: 0 0 14px;
  padding-inline-start: 24px;
  color: var(--safety-red);
  line-height: 1.45;
}
.safety-conditions li { margin: 0 0 8px; }
.safety-explainer { margin: 0 0 22px; color: var(--text-2); line-height: 1.45; }
.opt--safety-none .opt-body { border-color: var(--accent); background: var(--accent-dim); }
.opt--safety-any { --safety-answer-red: #ff827a; --safety-answer-bg: rgba(229, 84, 75, 0.13); }
.opt--safety-any .opt-body,
.opt--safety-any input:checked + .opt-body {
  border-color: var(--safety-answer-red);
  background: var(--safety-answer-bg);
}
.opt--safety-any .opt-label { color: var(--safety-answer-red); }
.opt--safety-any input:focus-visible + .opt-body { outline-color: var(--safety-answer-red); }
.opt--safety-any input:checked + .opt-body .opt-mark { border-color: var(--safety-answer-red); background: var(--safety-answer-red); }
body[data-theme='light'] .safety-conditions { --safety-red: #a52f29; }
body[data-theme='light'] .opt--safety-any { --safety-answer-red: #a52f29; --safety-answer-bg: #fff0ee; }

/* interludes -------------------------------------------------------------- */

.interlude {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 32px 28px;
  animation: q-in 220ms ease both;
}
.interlude h2 { font-size: clamp(1.3rem, 4vw, 1.65rem); }
.interlude p { color: var(--text-2); }
.interlude p:last-of-type { margin-bottom: 0; }

.interlude--privacy { border-color: var(--accent); }

.strands { margin: 0 0 8px; padding: 0; list-style: none; }
.strands li {
  padding: 13px 0;
  border-top: 1px solid var(--stroke);
  color: var(--text-2);
  font-size: 0.96rem;
  line-height: 1.55;
}
.strands li:first-child { border-top: 0; padding-top: 0; }
.grade {
  display: inline-block;
  font-weight: 700;
  color: var(--text);
  margin-inline-end: 6px;
}

.sources-note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--stroke);
  font-size: 0.8rem;
  color: var(--steel);
  line-height: 1.5;
}
.sources-note a { color: var(--text-2); }

/* reveal ------------------------------------------------------------------ */

.reveal { padding-top: 8px; }
.reveal h2 { margin-bottom: 26px; }

.reveal-lines { margin: 0; padding: 0; list-style: none; }
.reveal-lines li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--stroke);
  color: var(--text-2);
  opacity: 0;
  animation: line-in 260ms ease forwards;
}
.reveal-lines li[data-kind='final'] {
  color: var(--text);
  font-weight: 650;
  font-size: 1.1rem;
  border-bottom: 0;
}
.reveal-num {
  flex: none;
  width: 22px;
  color: var(--steel);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

@keyframes line-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.reveal-cards { margin-top: 28px; min-height: 92px; }
.reveal-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  animation: q-in 220ms ease both;
}
.reveal-card p { margin: 0; color: var(--text); font-size: 0.97rem; }
.reveal-card cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 0.79rem;
  color: var(--steel);
}

/* result ------------------------------------------------------------------ */

.result { padding-top: 6px; }

.level-badge {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 26px 24px;
  text-align: center;
}
.level-badge .level-n {
  display: block;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.15;
}
.level-badge .level-meta {
  display: block;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 0.96rem;
}

.micro-disclaimer {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--steel);
  text-align: center;
}
.result-card > .micro-disclaimer { text-align: start; }
/* Start-aligned legal notes on the checkout and success pages. A class, not a
   style="" attribute: the /q/* CSP has no 'unsafe-inline' for styles. */
.micro-disclaimer.micro-disclaimer--start { text-align: start; }

/* The numbered bibliography on /q/sources/ (and its ar/pl twins). Moved here
   from an inline <style> block the /q/* CSP refused. padding-inline-start is
   identical to padding-left in an LTR page and mirrors in RTL. */
.cites { margin: 0 0 34px; padding-inline-start: 26px; }
.cites li { color: var(--text-2); font-size: 0.92rem; line-height: 1.6; margin-bottom: 14px; }
.cites li em { color: var(--text); font-style: italic; }
.cites a { word-break: break-all; font-size: 0.86rem; }

.result-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 24px 22px;
  margin-top: 18px;
}
.result-card h3 {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.result-card p { color: var(--text-2); font-size: 0.96rem; }
.result-card p:last-child { margin-bottom: 0; }

.result-card--gate {
  border-color: var(--danger);
}
.result-card--gate h3 { color: var(--text); }

/* Objection card (audit §D): four facts, .checklist's existing dot-list
   styling (site/style.css) does the bullets; this only trims the last item's
   bottom margin so it does not add extra space inside the card padding,
   matching the .result-card p:last-child pattern above. Tokens only, so it
   renders correctly in both the dark default and body[data-theme='light']. */
.objection-card ul { margin: 0; }
.objection-card li:last-child { margin-bottom: 0; }

.math-lines { margin: 0 0 14px; padding: 0; list-style: none; }
.math-lines li {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--stroke);
  color: var(--text-2);
  font-size: 0.94rem;
}
.math-lines li:last-child { border-bottom: 0; color: var(--text); font-weight: 600; }

.session-block { margin: 0 0 18px; }
.session-block:last-child { margin-bottom: 0; }
.session-block h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 650;
}
.session-block ul { margin: 0; padding-inline-start: 20px; color: var(--text-2); font-size: 0.93rem; }
.session-block li { margin-bottom: 4px; }

/* the ladder -------------------------------------------------------------- */

.ladder-figure { margin: 0; }
.ladder-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.ladder-dates { margin: 18px 0 0; padding: 0; list-style: none; }
.ladder-dates li {
  padding: 11px 0;
  border-top: 1px solid var(--stroke);
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.5;
}
.ladder-dates strong { color: var(--text); font-weight: 650; }
.est {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--steel);
  border-radius: 4px;
  padding: 1px 6px;
  margin-inline-start: 6px;
  vertical-align: 1px;
}

.ladder-rules { margin: 16px 0 0; padding: 0; list-style: none; }
.ladder-rules li {
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 7px;
  padding-inline-start: 16px;
  position: relative;
}
.ladder-rules li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hairline);
}

.free-card {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.free-card h3 { color: var(--text); }
.free-card p { color: var(--text); }

.result-utils {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 20px 0 0;
  font-size: 0.9rem;
}
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { text-decoration-thickness: 2px; }

/* edit-an-answer picker --------------------------------------------------- */

.edit-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.edit-list button {
  width: 100%;
  text-align: start;
  background: var(--surface-raised);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text-2);
  cursor: pointer;
}
.edit-list button:hover { border-color: var(--hairline); color: var(--text); }
.edit-list b { color: var(--text); font-weight: 600; }

/* email gate -------------------------------------------------------------- */

.gate:not(body) {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 28px 24px;
  margin-top: 26px;
}
.gate h3 { font-size: clamp(1.15rem, 3.6vw, 1.4rem); }
.gate > p { color: var(--text-2); font-size: 0.96rem; }

/* The required headline and its one-line lede (slice 2). The gate is its own
   SCREEN now rather than a card at the foot of the result, so it opens with
   an h2 at question-title weight — the same visual rank every other screen
   in the sequence opens with. `.gate-lede` is a different object on the
   lander pages; these two names are deliberately not it. */
.plan-gate-h2 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 4.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.gate > .plan-gate-lede {
  margin: 0 0 22px;
  color: var(--text-2);
  font-size: 1.02rem;
  line-height: 1.5;
}

/* The inline field error, next to the box it is about. Used by the first-name
   field when the worker answers `invalid_first_name` (400 from a web source,
   422 from an account gate — the client keys on the code, not the status). */
.field-error {
  margin: 6px 0 0;
  color: var(--danger);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* THE SKIP LINK, restored 2026-09-27 for the EMAIL_GATE_MODE A/B test
   (config.js, quiz.js#GATE_MODE). Rendered only in 'skippable' mode, under
   the submit button. A real, visible, full-width control — body-legible
   type, never grey-on-grey, never behind a scroll, never worded as a loss —
   not the ".btn" primary style, so the required submit stays the obviously
   preferred action. */
.skip-gate {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px 18px;
  text-align: center;
  background: none;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.skip-gate:hover { border-color: var(--hairline); }

/* handoff ----------------------------------------------------------------- */

.handoff { margin-top: 26px; }
.handoff .badge-row { margin-top: 22px; }

/* pricing / checkout ------------------------------------------------------ */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 24px 0 0;
}

/* There is exactly one plan, so this is a summary card and not a chooser:
   no radio, nothing pre-selected, no "recommended" badge, nothing greyed.
   (blueprint §6.1) The card is not interactive — the button below it is the
   only control — so it carries no pointer cursor and no hover state. */
.plan { position: relative; display: block; }
.plan-body {
  height: 100%;
  padding: 20px 18px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
}
.plan-body--only { border-color: var(--accent); background: var(--accent-dim); }
.plan-name { display: block; font-weight: 650; color: var(--text); }
.plan-price {
  display: block;
  margin-top: 8px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.plan-sub { display: block; margin-top: 5px; color: var(--text-2); font-size: 0.87rem; }
.plan-flag {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
}

/* The price, the cadence and the real charge date live ON the button itself
   and again in the block under it, not in a footer and not in a tooltip.
   (§6.1, goldmine CM-4) */
.buy-block { margin-top: 26px; }
/* The label carries "then $13.99 on 18 September 2026", so it wraps to two
   lines on a narrow phone. Give it leading and balanced wrapping rather than
   shortening the label. */
#ck-buy {
  line-height: 1.35;
  text-wrap: balance;
}
.buy-terms {
  margin: 12px 0 0;
  padding: 14px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
}
.buy-terms strong { font-weight: 650; }

.cancel-row {
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.55;
}
.cancel-row strong { color: var(--text); }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--surface-raised);
  color: var(--text-2);
  font-size: 0.78rem;
  margin: 0 0 6px;
  margin-inline-end: 6px;
}

/* reduced motion ---------------------------------------------------------- */
/* The base sheet already kills all animation under this query. Reveal lines
   are opacity:0 until animated, so they need an explicit override or they
   would never appear at all — the reduced-motion user sees all four lines at
   once, which is the §8.5 requirement. */

@media (prefers-reduced-motion: reduce) {
  .reveal-lines li,
  .q-card,
  .interlude,
  .reveal-card,
  .loader-lines li { opacity: 1 !important; transform: none !important; }
  .progress-fill { transition: none !important; }
  .exercise-pacer-dot { transition: none !important; }
}

/* ------------------------------------------------------------------ rtl -- */
/* Everything above is already direction-agnostic: the physical left/right
   properties this funnel used were rewritten as logical ones, which compute to
   the identical physical property in an `ltr` document. So this block is not
   "the RTL stylesheet" — it is the short list of things logical properties
   cannot fix, and every rule in it is scoped to [dir='rtl'] and therefore
   provably inert on the English pages. */

/* 1. THE CHART DOES NOT MIRROR.
      Time runs left to right, level 1 at the bottom, the line rises to the
      right — the same as in the app and the same as every chart this reader
      meets in a browser. The funnel's whole point is the honest date that
      arrives AFTER the program ends, and a mirrored time axis is the one way to
      make that read as arriving before it. Forcing `direction: ltr` on the SVG
      also keeps `text-anchor: start|end` meaning left|right, so a single set of
      coordinates serves both locales. Arabic labels still shape and order
      correctly inside their own runs; the mixed Arabic-plus-digits labels carry
      an RLM guard in the string bundle. */
[dir='rtl'] .ladder-svg { direction: ltr; }

/* 2. NO TRACKING ON ARABIC TEXT.
      Arabic is a joined script. Positive letter-spacing pulls the joins apart
      and renders it as disconnected letters; negative tracking crushes them.
      Both are wrong in a way that reads as "this page was not made for you",
      which is precisely the impression a first-mover in an unlocalised category
      cannot afford. Latin runs inside these elements (KegelPro, NHS, App Store)
      lose their tracking too, which is the correct trade. */
[dir='rtl'] h1,
[dir='rtl'] h2,
[dir='rtl'] h3,
[dir='rtl'] .brand,
[dir='rtl'] .eyebrow,
[dir='rtl'] .q-card legend,
[dir='rtl'] .level-badge .level-n,
[dir='rtl'] .progress-name,
[dir='rtl'] .est,
[dir='rtl'] .plan-price,
/* `.store-badge .badge-top` used to end this list. It was the "Download on
   the" line of the hand-drawn badges, which are gone — the real badges are
   artwork now, and artwork has no tracking to normalise. */
[dir='rtl'] .plan-flag { letter-spacing: normal; }

/* 3. A LITTLE MORE LEADING.
      Arabic ascenders, descenders and dots occupy more vertical space than
      Latin at the same size, and the system Arabic faces (SF Arabic on
      Apple platforms, Segoe UI on Windows, Noto Naskh on Android) all read
      tight at 1.6. This is the only typographic tuning the RTL pages get. */
[dir='rtl'] body { line-height: 1.75; }

/* 4. LTR ISLANDS.
      An email address, an access token and a price are Latin/numeric objects
      that must not be reordered by the surrounding paragraph. quiz.js and
      checkout.js set dir="ltr" on the elements themselves; this makes them sit
      correctly in their RTL containers. */
[dir='rtl'] input[dir='ltr'],
[dir='rtl'] .pill[dir='ltr'] { text-align: start; }
/* The plan card's name, price and sub-line are English in every locale (they
   come from config.js). dir="ltr" fixes their internal order; text-align:right
   keeps the card visually flush with the rest of the RTL page. */
[dir='rtl'] .plan-body [dir='ltr'] { text-align: right; }

/* small ------------------------------------------------------------------- */

@media (max-width: 560px) {
  .quiz-shell { padding: 18px 16px 56px; }
  .interlude, .gate:not(body) { padding: 24px 18px; }
  .result-card { padding: 20px 17px; }
  .progress-name { font-size: 0.6rem; }
  .btn-lead { width: 100%; min-width: 0; }
}

/* ======================================================= light funnel ==== */
/* The four PAID landers (and the quiz they open into) run light and warm.
   Every scaled competitor in this category is white with warm photography;
   dark reads "tech", light reads "health". /q/control/ (organic, indexable)
   and the Learn library stay dark. Tokens only — no component in this file
   or style.css hard-codes a colour, so the flip is a cascade, not a rewrite.

   Contrast, checked against --bg (#FAFAF7):
     --text   #0E1113  19.4:1  AAA
     --text-2 #4A5560   7.4:1  AAA
     --ink    #0E1113  (button fill, white text)  19.4:1  AAA
   The brand green (#2FD97B) is 1.9:1 on white and is therefore NEVER text or
   a button fill on the light theme — decoration only (dots, ring, wash). */

body[data-theme='light'] {
  --bg: #fafaf7;
  --surface: #ffffff;
  --surface-raised: #f2f4f7;
  --stroke: #e3e7eb;
  --hairline: #c9d0d6;
  --accent-dim: rgba(47, 217, 123, 0.16);
  --steel: #6b7780;
  --text: #0e1113;
  --text-2: #4a5560;
  --ink: #0e1113;
  /* Brand green as TEXT needs a darker green on white: #126b3f is 6.27:1 on
     --bg. Used by the ladder chart's band labels (assets/quiz.js); on the dark
     theme the token is unset and the chart falls back to the brand green. */
  --accent-text: #126b3f;
  color-scheme: light;
}

body[data-theme='light'] .btn {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}
body[data-theme='light'] .btn:disabled {
  color: var(--text-2);
  background: var(--surface-raised);
  border-color: var(--stroke);
}
body[data-theme='light'] .hero::before { display: none; }
body[data-theme='light'] .site-header,
body[data-theme='light'] .site-footer { background: var(--surface); }

/* ------------------------------------------------------------- gate ---- */
/* Screen 1 of a paid lander: headline, photo grid, one question, five taps.
   Nothing to read before the first tap. The long copy that used to sit here
   is still on the page — below the gate, for the man who scrolls — but it no
   longer stands between the visitor and the quiz. */

.gate .hero {
  padding: 28px 0 40px;
  border-bottom: 0;
  text-align: center;
}
.gate .hero .wrap { max-width: 640px; }
/* The eyebrow is brand green, which is decoration-only on the light theme
   (1.9:1 on white). The gate has no room for a second line of anything
   before the headline anyway; the string still ships on the dark landers. */
.gate .eyebrow { display: none; }
.gate h1 {
  font-size: clamp(1.75rem, 6.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 4px auto 18px;
  max-width: 16ch;
}

/* Photo grid: two rows of 4:5 tiles, the second row offset by half a tile so
   the eye reads it as a wall, not a table. Each row is duplicated once and
   slides slowly so the wall feels alive on a phone. Overflow is clipped by the
   .wall itself, so the page never scrolls horizontally. */
.wall {
  position: relative;
  overflow: hidden;
  margin: 0 -20px 30px;
  padding: 2px 0;
  pointer-events: none;
  user-select: none;
}
.wall-row {
  display: flex;
  gap: 8px;
  width: max-content;
  margin-bottom: 8px;
  animation: wall-slide 48s linear infinite;
}
.wall-row:last-child { margin-bottom: 0; animation-duration: 56s; animation-direction: reverse; }
.wall-row--offset { margin-inline-start: -52px; }
.tile {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-raised);
}
.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Placeholder tiles, shipped only until site/img/funnel/manifest.json exists.
   Warm neutrals, no faces, no fake anything. */
.tile--ph { background: linear-gradient(160deg, #eef1f4, #dfe5ea); }
.tile--ph:nth-child(3n)   { background: linear-gradient(160deg, #f3ede4, #e7dccb); }
.tile--ph:nth-child(3n+1) { background: linear-gradient(160deg, #e9f0ee, #d6e3dd); }
@keyframes wall-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
[dir='rtl'] .wall-row { animation-direction: reverse; }
[dir='rtl'] .wall-row:last-child { animation-direction: normal; }
@media (prefers-reduced-motion: reduce) {
  .wall-row { animation: none; }
}
@media (min-width: 720px) {
  .tile { width: 140px; }
  .wall { margin-inline: 0; border-radius: 20px; }
  .wall-row--offset { margin-inline-start: -74px; }
}

/* The one question. */
.gate-q {
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 4.8vw, 1.7rem);
  font-weight: 700;
  line-height: 1.2;
}
.gate-note {
  margin: 0 0 18px;
  color: var(--text-2);
  font-size: 0.94rem;
}
.age-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  text-align: start;
}
.age-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.age-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 12px 10px 12px 14px;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap; /* Polish labels are ~20% longer than English; a
                          label that wraps inside a 58px button reads as two
                          answers. Sized so "Od 50 do 59" fits a half-width
                          column at 375px with room to spare. */
  color: var(--text);
  background: var(--surface-raised);
  border: 1.5px solid var(--stroke);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
}
.age-btn:hover  { border-color: var(--text); }
.age-btn:active { transform: scale(0.985); }
.age-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.age-btn .chev {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--stroke);
  display: inline-grid;
  place-items: center;
  color: var(--text);
}
.age-btn .chev svg { display: block; }
[dir='rtl'] .age-btn .chev svg { transform: scaleX(-1); }

.gate .trust-row {
  justify-content: center;
  margin-top: 6px;
  font-size: 0.86rem;
}
.gate .cta-note { margin: 0 auto; max-width: 40ch; text-align: center; }

/* The former hero copy, now the first thing under the gate. */
.gate-lede {
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 1.05rem;
}

/* ================================================= CRO slice 3 ========= */
/* marketing/funnel/cro-slice-3-spec.md. Non-gated result only. Tokens only
   throughout, so every rule below renders correctly in both the dark
   default and body[data-theme='light'] with no theme-scoped duplicate.
   .card, .checklist, .badge-row, .store-badge, .fig, .fig--shots and
   .shot-strip are the shared classes from site/style.css (already loaded on
   every quiz page) — reused here, not restyled. */

/* headline (§1) ------------------------------------------------------------ */

.result-h1 {
  margin: 0 0 8px;
  font-size: clamp(1.55rem, 5.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}
.result-sub {
  margin: 0 0 18px;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.5;
  max-width: var(--measure);
}

/* The pain-point mirror line. Body weight, full text colour and a rule on the
   leading edge — it is the one sentence on this page written back in the
   visitor's own words, and it has to read as a statement rather than as a
   caption. `border-inline-start` rather than `border-left` so the rule stays
   on the reading edge in the Arabic build. */
.result-pain {
  margin: -8px 0 18px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--accent, currentColor);
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.5;
  max-width: var(--measure);
}

/* plan summary card (§2) ---------------------------------------------------- */

.plan-summary,
.pricing {
  margin-top: 18px;
}

.plan-photo {
  display: block;
  width: 100%;
  /* The <img> carries width/height attributes for layout stability, and a
     presentational height beats aspect-ratio unless height is auto. Without
     this line the photo rendered at its attribute height (1500px) — a
     255x1500 strip on a phone. Measured, not theorised. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px; /* rounded like .tile, per §2 */
  margin: 0 0 18px;
  background: var(--surface-raised);
}
.plan-summary h2 { margin: 0 0 14px; }
.plan-summary .checklist { margin-bottom: 18px; }
.plan-summary .checklist li:last-child { margin-bottom: 0; }
.summary-free {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  font-size: 0.97rem;
}

/* ≥720px: photo left column ~40%, text right — the grid areas keep the
   photo spanning every row without a fragile `grid-row: 1 / -1` guess at
   the implicit row count. */
@media (min-width: 720px) {
  .plan-summary {
    display: grid;
    grid-template-columns: minmax(180px, 40%) 1fr;
    grid-template-areas:
      'photo heading'
      'photo list'
      'photo badges'
      'photo free';
    column-gap: 28px;
    align-items: start;
    /* Rows pack to the top: if the photo column is taller than the text, the
       text must not be spread out to match it. */
    align-content: start;
  }
  /* The photo keeps its own 4:5 box whatever the row span computes to. Without
     these two lines a taller card stretched it to the column height and
     object-fit cropped it into a ~1:3 strip. */
  .plan-summary .plan-photo { grid-area: photo; margin: 0; align-self: start; height: auto; }
  .plan-summary h2 { grid-area: heading; }
  .plan-summary .checklist { grid-area: list; margin-bottom: 0; }
  .plan-summary .badge-row { grid-area: badges; }
  .summary-free { grid-area: free; }
}

/* pricing card (§4) ---------------------------------------------------------- */
/* No heading — a footer to the free card, not a new offer, so it gets no
   extra rule beyond closing the gap .sources-note leaves for a sibling. */
.pricing .sources-note { margin: 0; }

/* sticky bar (§6) ------------------------------------------------------------ */

.sticky-cta {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  max-height: 56px;
  padding-inline: 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--stroke);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta span {
  flex: 1 1 auto;
  min-width: 0; /* lets a flex child actually shrink so ellipsis can apply */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
}
/* Compact: the official badge artwork (site/style.css `.store-badge-img`) in a
   56px bar. The badge stays at its 40px minimum height — the thing that gives
   is the clear space, which Apple allows to drop from one quarter to one tenth
   of the badge height "when the badge is placed on advertising with very
   limited layout space", which a 56px sticky bar is
   (https://developer.apple.com/app-store/marketing/guidelines/). 40px badge +
   2x4px clear space = 48px inside a 56px bar.

   Google's file bakes its clear space in at one quarter, so its canvas cannot
   be trimmed the same way without cropping the artwork. 48px of canvas is a
   38.6px badge — still over Google's 28px minimum and never shown next to the
   Apple badge here, since this bar renders exactly one. The label above
   truncates before either of them does (§6). */
.sticky-cta .store-badge-img { flex: none; }
.sticky-cta .store-badge-img img { height: 48px; }
.sticky-cta .store-badge-img--apple img { height: 40px; margin: 4px; }

/* quiz v3 only (marketing/funnel/quiz-v3-spec.md) ------------------------- */

/* R1–R4 reaction lines (§11): a short echo, prepended to the next screen's
   header, never a screen or a tap of its own. */
.q-reaction {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--stroke);
  color: var(--text-2);
  font-size: 0.92rem;
}

/* S9 find_it_now: a silent visual pacer, squeeze → hold → release, no sound
   and no vibration (§5) — the dot's size and colour are the only cue. */
.exercise-pacer {
  display: flex;
  justify-content: center;
  padding: 28px 0 12px;
}
.exercise-pacer-dot {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  transform: scale(0.7);
  transition: transform 3s ease, opacity 3s ease;
}
.exercise-pacer-dot.is-hold { opacity: 0.85; transform: scale(1); }
.exercise-pacer-dot.is-release { opacity: 0.35; transform: scale(0.7); transition-duration: 3s; }
.exercise-pacer-label {
  text-align: center;
  color: var(--text-2);
  font-size: 0.9rem;
  margin: 4px 0 18px;
}
.exercise-skip { display: block; margin: 0 auto; }
/* Short flow: the second, "test in the app" exit sits under the first, with a
   tap target of its own (44px) so the two links are never one mis-tap apart. */
.exercise-skip--app { margin-top: 12px; min-height: 44px; }

/* S13 building_plan: named lines, resolving in sequence — no spinner, no
   progress percentage (§7). Shares the reveal's line-in animation. */
.loader-lines { margin: 18px 0 0; padding: 0; list-style: none; }
.loader-lines li {
  padding: 10px 0;
  border-bottom: 1px solid var(--stroke);
  color: var(--text);
  opacity: 0;
  animation: line-in 260ms ease forwards;
}

/* S14 teaser: one literal echo and a single CTA into the gate (§8). */
.teaser-card p { font-size: 1.02rem; }

/* Mobile polish: the page's .gate marker is not the email form card. */
body.gate { background: var(--bg); }
.site-header .wrap { gap: 4px 16px; padding-block: 8px; }
.site-header .brand, .site-nav a, .footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}
.site-nav { flex-wrap: wrap; gap: 4px 16px; }
.site-header, .site-footer, .quiz-shell {
  padding-inline-start: max(0px, env(safe-area-inset-left));
  padding-inline-end: max(0px, env(safe-area-inset-right));
}
.quiz-shell {
  padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
.back-btn, .text-btn, .result-utils button, .result-utils a {
  min-height: 44px;
  min-width: 44px;
  padding-block: 10px;
}
body[data-theme='light'] #quiz a:not(.btn),
body[data-theme='light'] .link-btn { color: var(--accent-text); }
.sources-note a, .gate .consent a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}
.progress { margin-bottom: 24px; padding-block: 8px 12px; }
.q-card legend, .plan-gate-h2 { font-size: clamp(1.5rem, 5.6vw, 1.85rem); line-height: 1.25; }
.q-sub { line-height: 1.6; }
.opt-body { min-height: 56px; padding: 16px; }
.opt-label, .age-btn, .plan-name, .plan-price { overflow-wrap: anywhere; }
.opt-text { flex: 1; }
.q-continue { width: 100%; min-height: 52px; }
.gate:not(body) { box-shadow: 0 12px 40px #00000006; }
.gate input[type='text'], .gate input[type='email'] {
  min-height: 52px;
  font-size: max(16px, 1rem);
  scroll-margin-block: 100px;
}
.gate .consent { min-height: 44px; }
.gate form .btn { width: 100%; min-height: 52px; white-space: normal; }
/* The short intake puts the consented form immediately after its promise.
   Keep the longer course explanation readable below the action. */
.gate--compact form { margin-block-start: 16px; }
.gate--compact > h3 { margin-block-start: 28px; }
.gate--compact .consent label { cursor: pointer; }
.gate--compact input { scroll-margin-block: 24px; }
.plans { grid-template-columns: minmax(0, 1fr); }
.handoff, .result-card, .buy-terms, .cancel-row { overflow-wrap: anywhere; }

body.gate .hero { padding: 24px 0 32px; }
body.gate h1 { max-width: 21ch; font-size: clamp(1.75rem, 6.4vw, 2.6rem); line-height: 1.16; text-wrap: balance; }
body.gate .wall { margin: 0 auto 24px; max-width: 720px; }
/* A calm, static portrait strip: the same photos, no moving first impression. */
body.gate .wall-row { animation: none; }
body.gate .wall-row--offset { margin-inline-start: -48px; }
body.gate .tile { width: 88px; border-radius: 12px; }
body.gate .gate-q { margin-bottom: 8px; }
body.gate .gate-note { max-width: 36ch; margin: 0 auto 18px; line-height: 1.5; }
body.gate .age-grid { gap: 10px; }
body.gate .age-btn {
  min-height: 56px;
  padding: 12px 14px;
  gap: 8px;
  white-space: normal;
  text-align: start;
  line-height: 1.35;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 2px 8px #00000004;
}
body.gate .age-btn:hover { border-color: var(--accent-text, var(--accent)); background: var(--accent-dim); }
body.gate .cta-note { margin-inline: auto; }
body.gate .section { border-top: 1px solid var(--stroke); }

@media (max-width: 560px) {
  .site-header .wrap { justify-content: center; padding-inline: 16px; gap: 4px 8px; }
  .site-nav { justify-content: center; font-size: .8125rem; gap: 4px 10px; }
  .site-nav a { min-width: 44px; justify-content: center; }
  .site-header .brand { margin-inline-end: auto; }
  .quiz-shell { padding-top: 12px; }
  .gate:not(body) { margin-top: 12px; padding: 24px 20px; }
  .level-badge { padding: 20px; }
  .plan-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px;
    grid-template-areas: 'badges badges' 'heading photo' 'list list' 'free free';
    gap: 16px;
    padding: 20px 16px;
  }
  .plan-summary .badge-row { grid-area: badges; margin: 0; gap: 8px; }
  .plan-summary .plan-photo { grid-area: photo; width: 80px; height: 100px; margin: 0; }
  .plan-summary h2 { grid-area: heading; align-self: center; margin: 0; }
  .plan-summary .checklist { grid-area: list; margin: 0; }
  .plan-summary .summary-free { grid-area: free; }
  body.gate .hero .wrap { padding-inline: 20px; }
  body.gate .wall { margin-bottom: 20px; }
  body.gate .tile { width: 72px; }
  body.gate .wall-row { gap: 8px; }
  body.gate .wall-row:last-child { display: none; }
  body.gate .hero { padding-top: 20px; }
  body.gate .trust-row { gap: 10px 18px; }
  .sticky-cta {
    top: auto;
    bottom: 0;
    height: auto;
    max-height: none;
    min-height: 64px;
    padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border-top: 1px solid var(--stroke);
    border-bottom: 0;
    transform: translateY(6px);
    box-shadow: 0 -4px 24px #0000000a;
  }
  .sticky-cta.is-visible { transform: none; }
  body:has(.sticky-cta) .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  body:has(.kp-consent:not([hidden])) .sticky-cta { visibility: hidden; }
  body:has(input[type='email']:focus, input[type='text']:focus) .progress { position: static; }
}
@media (min-width: 720px) {
  body.gate .tile { width: 140px; }
  body.gate .wall-row--offset { margin-inline-start: -74px; }
}
@media (prefers-reduced-motion: reduce) {
  .q-card, .interlude, .gate:not(body), .sticky-cta { animation: none; transition: none; }
}

/* ------------------------------------------------ quiz-landing-v2 ------ */
/* 2026-10-04. Paid traffic is ~99% phones, mostly in-app browsers whose
   viewport is shorter than the device. Screen 1 must show the question and
   every answer above the consent bar without scrolling. */

/* The lander's own step counter: same words the quiz's counter uses. */
.gate-step {
  margin: 0 0 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-2);
}
/* The tapped age shows as chosen at once, even while the deck loads. */
body.gate .age-btn.is-chosen {
  border-color: var(--accent-text, var(--accent));
  background: var(--accent-dim);
}

@media (max-width: 560px) {
  body.gate .site-header .wrap { min-height: 56px; padding-block: 6px; }
  /* Question first, photos after it. The wall is decorative and lazy: on a
     phone it costs no request until it is near the viewport, and its second
     row (display:none here) is never fetched. Tiles carry width/height and
     a fixed aspect ratio, so moving the strip shifts nothing (CLS 0). */
  body.gate .hero { display: flex; flex-direction: column; padding: 16px 0 24px; }
  body.gate .hero > .wall { order: 1; width: 100%; margin: 24px 0 0; }
  body.gate h1 { font-size: 1.6rem; margin: 0 auto 14px; }
  body.gate .gate-q { margin-bottom: 6px; }
  body.gate .gate-note { margin-bottom: 14px; font-size: 0.9rem; }
  body.gate .age-grid { margin-bottom: 18px; }
}

/* Lighter safety screen. Same seven conditions, same explainer, same two
   answers and gate (tools/test-safety-parity.mjs); only the weight changes.
   The list is read-only text, so it reads as a compact card, not as a wall
   of red; the clear path is the dominant, first button. */
.q-card--safety legend { font-size: clamp(1.3rem, 5vw, 1.6rem); }
.q-card--safety .q-sub { margin: 6px 0 10px; line-height: 1.45; }
.q-card--safety .safety-conditions {
  margin: 0 0 10px;
  padding: 10px 14px;
  padding-inline-start: 30px;
  background: var(--surface-raised);
  border-radius: 12px;
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.3;
}
.q-card--safety .safety-conditions li { margin: 0 0 4px; }
.q-card--safety .safety-conditions li:last-child { margin-bottom: 0; }
.q-card--safety .safety-conditions li::marker { color: var(--safety-red); }
.q-card--safety .safety-explainer { margin: 0 0 14px; font-size: 0.88rem; }
.q-card--safety .opt-mark { display: none; }
.q-card--safety .opt-body { justify-content: center; align-items: center; text-align: center; min-height: 54px; padding: 14px 16px; }
.q-card--safety .opt--safety-none .opt-body,
.q-card--safety .opt--safety-none input:checked + .opt-body {
  background: var(--accent);
  border-color: var(--accent);
}
.q-card--safety .opt--safety-none .opt-label { color: var(--bg); font-weight: 700; font-size: 1.02rem; }
body[data-theme='light'] .q-card--safety .opt--safety-none .opt-body,
body[data-theme='light'] .q-card--safety .opt--safety-none input:checked + .opt-body {
  background: var(--ink);
  border-color: var(--ink);
}
body[data-theme='light'] .q-card--safety .opt--safety-none .opt-label { color: #fff; }
.q-card--safety .opt--safety-none input:focus-visible + .opt-body { outline-color: var(--accent); }
/* The other answer stays red-labelled and fully tappable, but secondary:
   no fill until chosen (the existing checked rule then applies). */
.q-card--safety .opt--safety-any .opt-body { min-height: 48px; background: var(--surface); border-color: var(--hairline); }
.q-card--safety .opt--safety-any .opt-label { font-weight: 600; font-size: 0.95rem; }
.safety-privacy { margin: 10px 0 0; font-size: 0.84rem; color: var(--text-2); text-align: center; }