/* ==========================================================================
   Funnel — the bridge and checkout screens.

   Structure borrowed from the reference funnel: one job per screen, nothing
   competing for the eye, the next action always obvious. The look is the
   site's own — cream, cobalt, generous space. A dark-and-gold treatment reads
   as an infomarketer, which is the opposite of what this practice sells.

   Loads after quiz.css and reuses its tokens.
   ========================================================================== */

/* style.css sets `body { overflow-x: hidden }`, which turns body into a scroll
   container and stops position:sticky from pinning to the viewport. `clip`
   prevents horizontal scrolling exactly as `hidden` does but creates no scroll
   container, so the action bar works.

   This overrides only on the pages that load funnel.css. The approved
   stylesheet is not touched. Browsers without overflow:clip ignore the
   declaration, keep `hidden`, and simply get a non-sticky button — the page
   still works, it just does not follow you down. */
body { overflow-x: clip; }

.funnel {
  padding-block: clamp(40px, 6vw, 78px) clamp(64px, 8vw, 110px);
}
.shell--narrow { max-width: 720px; }

/* ------------------------------------------------------------------ head */
.funnel__head { margin-bottom: clamp(30px, 4vw, 44px); }

.funnel__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.funnel__eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--accent);
}

.funnel h1 {
  font-size: clamp(1.85rem, 1.4rem + 2vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 16px;
}
.funnel__lede {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.14rem);
  color: var(--ink-soft, var(--muted));
  max-width: 58ch;
  margin: 0;
}

/* ----------------------------------------------------------------- video */
.funnel__video { margin: clamp(28px, 4vw, 40px) 0; }
.funnel__ratio {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--line);
}
.funnel__ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------- f-steps
   Numbered because the order is real: you cannot reach step 3 before step 2.
   The number is not decoration, it is the constraint made visible.

   NOTE ON THE NAME: this was called `steps`, which collided with the homepage Approach
   timeline in style.css — that sets six columns above 900px, so these four
   rows silently laid themselves out sideways on desktop while looking correct
   on mobile (where style.css forces one column). Every class in this file now
   carries an f- prefix so a name in the approved stylesheet cannot reach in
   here again. */
.f-steps {
  list-style: none;
  margin: clamp(30px, 4vw, 44px) 0;
  padding: 0;
  display: grid;
  /* Stated outright rather than left to the grid default, so nothing loaded
     earlier can turn these rows into columns. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
.f-steps__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.f-steps__item:last-child { border-bottom: 1px solid var(--line); }
.f-steps__item > * { min-width: 0; }

.f-steps__n {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--line-firm, rgba(17,17,17,.22));
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.f-steps__item h2 {
  font-size: 1.04rem;
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 4px 0 5px;
}
.f-steps__item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
  max-width: 56ch;
}

.f-steps__item.is-done .f-steps__n {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 0;                       /* the tick replaces the digit */
}
.f-steps__item.is-done .f-steps__n::after {
  content: "";
  width: 10px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.f-steps__item.is-done h2 { color: var(--muted); }

.f-steps__item.is-current .f-steps__n {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(40, 87, 255, .12);
}
.f-steps__item.is-current h2 { color: var(--ink); }

/* ------------------------------------------------------------- refund box */
.f-refundbox {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  padding: clamp(20px, 3vw, 28px);
  margin: clamp(28px, 4vw, 40px) 0;
}
.f-refundbox h2 {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}
.f-refundbox__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.f-refundbox__list li {
  position: relative;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.55;
}
.f-refundbox__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--accent);
}
.f-refundbox__list strong { color: var(--ink); font-weight: 500; }
.f-refundbox__note {
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: var(--muted-2, var(--muted));
}

/* --------------------------------------------------------------- pay card */
.f-paycard {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
  margin-bottom: clamp(22px, 3vw, 30px);
}
.f-paycard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.f-paycard__row:last-child { border-bottom: 0; }
.f-paycard__row strong {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.f-paycard__row--muted {
  color: var(--muted);
  font-size: 0.94rem;
  background: rgba(17, 17, 17, .015);
}

/* ------------------------------------------------------------------ terms */
.f-terms {
  margin-bottom: clamp(22px, 3vw, 30px);
}
.f-terms h2 {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.f-terms ul {
  margin: 0;
  padding-left: 1.15em;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.f-terms li strong { color: var(--ink); font-weight: 500; }
.f-terms__links {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--muted-2, var(--muted));
}

/* ------------------------------------------------------------------ agree */
.f-agree {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft, var(--ink));
}
.f-agree:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(40,87,255,.13); }
.f-agree input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--accent); }

/* ---------------------------------------------------------------- actions
   The primary action follows the reader down the page. On a long screen —
   four steps, a refund box, five terms — the button would otherwise sit far
   below the fold and the page would read as having no next move.

   Sticky, not fixed: it is a child of the content column, so it stops at the
   end of that column instead of hovering over the footer forever. */
.funnel__actions {
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin-top: clamp(24px, 3vw, 32px);
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
  /* Solid, not a gradient. A gradient across the whole bar leaves its upper
     half translucent, and page text then shows through beside the button —
     which reads as a rendering fault rather than as a floating action. */
  background: var(--bg);
}
/* The fade lives ABOVE the bar instead, so content dissolves into it rather
   than being cut off by a hard edge. */
.funnel__actions::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 34px;
  background: linear-gradient(to bottom, rgba(247, 247, 244, 0), var(--bg));
  pointer-events: none;
}
.funnel__actions .btn { width: 100%; justify-content: center; }

/* Everything needed to act, in one row. On checkout the terms checkbox lives
   in here too: a disabled Pay button whose precondition has scrolled out of
   sight reads as a broken page. */
.funnel__bar { display: grid; gap: 10px; }

/* Inside the bar the checkbox drops its card. As a standalone block the
   border and padding were right; pinned above the fold they make the bar tall
   enough to eat a quarter of a phone screen. */
.funnel__bar .f-agree {
  border: 0;
  background: none;
  padding: 0;
  box-shadow: none;
  font-size: 0.88rem;
  line-height: 1.45;
  gap: 9px;
}
.funnel__bar .f-agree input { margin-top: 1px; }

.funnel__reassure {
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: var(--muted-2, var(--muted));
  text-align: center;
}

.funnel__bail {
  margin-top: clamp(30px, 4vw, 42px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--muted);
}

/* ------------------------------------------------------------- test badge */
.f-testbadge {
  display: block;
  padding: 11px 16px;
  margin-bottom: 22px;
  border: 1px dashed rgba(142, 47, 19, .4);
  border-radius: 8px;
  background: rgba(142, 47, 19, .05);
  color: #8E2F13;
  font-size: 0.9rem;
}

@media (min-width: 720px) {
  /* Checkbox left, button right, on one line. */
  .funnel__bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .funnel__bar .btn { width: auto; min-width: 240px; }
  .funnel__actions .btn { width: auto; min-width: 280px; }
  .funnel__reassure { text-align: left; }
}

@media (max-width: 560px) {
  .f-steps__item { grid-template-columns: 30px minmax(0, 1fr); gap: 0 14px; }
  .f-paycard__row { padding: 14px 16px; }
  /* The bar holds three things on the smallest screens — consent, the button
     and the trust line — so every pixel it does not need is a pixel of the
     page someone can still read behind it. */
  .funnel__actions { padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .funnel__bar { gap: 8px; }
  .funnel__reassure { margin-top: 8px; font-size: 0.8rem; line-height: 1.35; }
}

/* Someone who has switched motion off should not get a bar that slides. */
@media (prefers-reduced-motion: reduce) {
  .funnel__actions { transition: none; }
}

/* ------------------------------------------------------------------ prose
   Policy pages. Long-form reading, so the measure is tight and the headings
   are quiet — nobody skims a refund policy for the typography. */
.f-prose { max-width: 66ch; }
.f-prose h2 {
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: clamp(30px, 4vw, 42px) 0 12px;
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line);
}
.f-prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.f-prose p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.65;
}
.f-prose ul {
  margin: 0 0 16px;
  padding-left: 1.15em;
  display: grid;
  gap: 10px;
  color: var(--muted);
  line-height: 1.6;
}
.f-prose strong { color: var(--ink); font-weight: 500; }
.f-prose a { color: var(--accent); text-underline-offset: 3px; }

/* A disabled action must look disabled. The Pay button starts disabled until
   the terms box is ticked, and a full-strength cobalt button that ignores
   clicks reads as a broken page rather than as a precondition. */
.funnel__actions .btn[disabled],
.funnel__actions .btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
  filter: saturate(.6);
}

/* The global reset strips list markers; the terms genuinely read better as a
   list, so they get their own. */
.f-terms ul { list-style: none; padding-left: 0; }
.f-terms ul li { position: relative; padding-left: 19px; }
.f-terms ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  background: var(--muted-2, var(--muted));
}
.f-prose ul { list-style: none; padding-left: 0; }
.f-prose ul li { position: relative; padding-left: 20px; }
.f-prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 6px; height: 6px;
  background: var(--accent);
}