/* =========================================================
   VP+ EDITOR ACCESS PASS — funnel styles (v2 finish pass)

   Design language mirrors aiclippingagency.com: a lighter
   #202124-family canvas, Geist type, embossed capsules,
   glossy layered cards with inset highlights, one accent
   tint per section, white checkout inputs on a purple panel.
   Palette stays VP+ (cyan primary, sky blue for money, violet
   secondary) with gold/blue/coral as section support colors.
   Every coloured fill is a gradient — never a flat wash.
   Mobile-first; a single centered column at every viewport.
   ========================================================= */

:root {
  /* Canvas — lighter charcoal family like the reference. */
  --bg:        hsl(228 7% 12%);          /* ~#1c1d22 */
  --bg-deep:   hsl(230 9% 8%);
  --bg-strip:  hsl(228 8% 10%);
  --card:      hsl(228 7% 16%);
  --card-2:    hsl(228 7% 18%);
  --border:    hsl(0 0% 100% / .09);
  --border-2:  hsl(215 25% 70% / .24);

  --fg:        hsl(0 0% 100%);
  --muted:     hsl(228 9% 74%);
  --dim:       hsl(228 6% 56%);

  /* VP+ palette + section support colors. The old green ("mint") is
     retired: money, success, live status and every check mark now read
     from the --sky ramp, the same blue family as the checkout button. */
  --accent:    hsl(180 74% 63%);
  --accent-2:  hsl(180 80% 76%);
  --sky-1:     hsl(187 94% 78%);
  --sky:       hsl(196 92% 62%);
  --sky-2:     hsl(206 94% 52%);
  --violet:    hsl(258 90% 78%);
  --blue:      hsl(212 94% 72%);
  --gold:      hsl(43 96% 62%);
  --coral:     hsl(0 78% 64%);
  --star:      hsl(51 100% 55%);

  /* Gradient system — nothing coloured is a flat fill. Every ramp runs
     light -> base -> deep so a surface reads lit from the top, the same
     way the checkout button does. --grad-*-txt variants are the ones
     clipped to text; they hold a tighter range so small type stays
     legible. */
  --grad-sky:      linear-gradient(180deg, var(--sky-1), var(--sky) 52%, var(--sky-2));
  --grad-sky-txt:  linear-gradient(174deg, var(--sky-1) 4%, var(--sky) 50%, var(--sky-2) 98%);
  --grad-sky-soft: linear-gradient(174deg, var(--sky-1) 10%, var(--sky) 92%);
  --grad-cyan:     linear-gradient(180deg, var(--accent-2), var(--accent) 52%, hsl(188 78% 44%));
  --grad-cyan-txt: linear-gradient(174deg, var(--accent-2) 6%, var(--accent) 54%, hsl(190 82% 50%) 98%);
  --grad-violet:   linear-gradient(180deg, hsl(258 96% 87%), var(--violet) 52%, hsl(258 74% 62%));
  --grad-gold:     linear-gradient(180deg, hsl(45 98% 76%), var(--gold) 52%, hsl(37 92% 50%));
  --grad-coral:    linear-gradient(180deg, hsl(3 90% 76%), var(--coral) 52%, hsl(356 72% 52%));
  --grad-coral-txt: linear-gradient(174deg, hsl(6 96% 76%) 4%, var(--coral) 50%, hsl(353 78% 50%) 98%);
  --grad-star:     linear-gradient(180deg, hsl(51 100% 68%), var(--star) 55%, hsl(44 96% 46%));

  /* Navy product-UI panels (marketplace / stats recreations) */
  --navy:      hsl(225 42% 10%);
  --navy-2:    hsl(224 40% 14%);
  --navy-line: hsl(224 30% 24%);
  --navy-num:  hsl(212 92% 76%);

  /* Depth recipe — measured off the reference. Every card, pill and
     panel sits inside a crisp 2px near-black ring (that's the
     "sticker" pop), with a light inset top line and a 145deg
     three-stop surface gradient. */
  --ring-c:    hsl(232 16% 3%);
  --gloss:     linear-gradient(180deg, hsl(0 0% 100% / .06), hsl(0 0% 100% / 0) 45%);
  --emb:       0 0 0 2px var(--ring-c), inset 0 1px 0 hsl(0 0% 100% / .1);
  --emb-pill:  0 0 0 2px var(--ring-c), inset 0 1px 0 hsl(0 0% 100% / .26), inset 0 -7px 12px hsl(0 0% 0% / .18);
  --lift:      0 16px 38px -20px hsl(0 0% 0% / .85);
  --card-grad: linear-gradient(145deg, hsl(240 4% 18% / .96), hsl(240 6% 11% / .98) 52%, hsl(240 5% 14% / .96));
  --panel-line: hsl(215 20% 65% / .24);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;

  --wrap: 640px;
  --pad: 20px;

  --font: 'Geist', 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont,
          'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --pixel: 'Geist Pixel', 'Geist Mono', ui-monospace, monospace;
}

/* Geist Pixel Square (SIL OFL) — the reference's label face, self-hosted. */
@font-face {
  font-family: 'Geist Pixel';
  src: url('media/fonts/geist-pixel-square.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
a, button, summary, select, input { touch-action: manipulation; }
:focus-visible { outline: 2px solid hsl(180 74% 63% / .75); outline-offset: 2px; }
::selection { background: hsl(180 74% 63% / .3); }

body {
  margin: 0;
  background:
    radial-gradient(circle at 18% 0%, hsl(258 85% 65% / .12), transparent 34%),
    radial-gradient(circle at 82% 0%, hsl(180 74% 63% / .08), transparent 36%),
    linear-gradient(hsl(228 6% 13%) 0%, hsl(230 5% 15%) 52%, hsl(228 6% 13%) 100%);
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong, b { font-weight: 700; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  padding: .7rem 1rem; border-radius: 0 0 var(--r-sm) 0;
  background: var(--grad-cyan); color: hsl(228 9% 10%); font-weight: 700; font-size: .85rem;
}
.skip:focus { left: 0; }

/* Shared text helpers */
.accent { color: var(--accent); }
.money  { color: var(--sky); }
.u {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--sky);
  text-decoration-skip-ink: none;
}
.u--money { text-decoration-color: var(--sky); }
.dead {
  color: var(--coral);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* Gradient type. Coloured copy is painted with the palette ramp clipped
   to the glyphs instead of a flat fill, so it reads the same way the
   checkout button does. Two rules keep it safe:
   1. Only text-only elements are listed — an element holding an inline
      SVG would lose the icon, because currentColor resolves to the
      transparent fill. Children that carry their own colour opt back
      out at the bottom.
   2. Everything sits behind @supports, and each selector keeps its flat
      `color` elsewhere in the sheet as the fallback.
   Large copy takes the full ramp; small copy takes the tighter -soft /
   two-stop ramps so the glyphs stay legible at 11-12px. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .money,
  .price__new b,
  .statpill b,
  .jcard__price,
  .jpost__price,
  .fit__head--yes,
  .included li.included__guarantee p strong {
    background-image: var(--grad-sky-txt);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .top__subs,
  .story__subs,
  .truth__label {
    background-image: var(--grad-sky-soft);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .accent {
    background-image: var(--grad-cyan-txt);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .stars span {
    background-image: var(--grad-star);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Red copy. .dead is underlined, and a clipped gradient leaves
     text-decoration-color resolving to the transparent fill, so the rule
     below sets that colour explicitly or the rule under DEAD disappears. */
  .dead,
  .fit__head--no {
    background-image: var(--grad-coral-txt);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .dead { text-decoration-color: var(--coral); }

  /* Deliberately NOT clipped: .vsl__label, .price__off and
     .kicker-pill--coral each paint their own background (a scrim, a
     tinted pill, the purple capsule). background-clip would clip THAT
     to the glyphs and the text would vanish, so they keep a flat colour
     over their existing gradient fills. */

  /* Opt-outs: children inside gradient type that keep their own colour. */
  .jcard__price i,
  .stars b,
  .vsl__label .eq {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}

.h2 {
  text-align: center;
  font-size: clamp(1.42rem, 5.9vw, 1.95rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.lede {
  margin-top: .85rem;
  text-align: center;
  color: var(--muted);
  font-size: .94rem;
  text-wrap: pretty;
}
.lede strong { color: var(--fg); }

/* Kicker capsules — the reference's chrome: purple gradient-border
   pill (light top -> dark bottom), dark 2px ring, inner shading,
   pixel-face label. Variants change only the label color. */
.kicker-pill {
  width: fit-content;
  margin: 0 auto 1rem;
  display: flex; align-items: center; gap: .45rem;
  padding: .48rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(hsl(255 30% 21%), hsl(254 35% 15%)) padding-box,
    linear-gradient(hsl(268 100% 82%), hsl(262 43% 54%) 48%, hsl(260 36% 10%)) border-box;
  box-shadow: var(--emb-pill);
  font-family: var(--pixel);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
.kicker-pill--cyan   { color: var(--accent); }
.kicker-pill--violet { color: var(--violet); }
.kicker-pill--sky   { color: var(--sky); }
.kicker-pill--coral  { color: var(--coral); }
.kicker-pill--gold   { color: var(--gold); }
.kicker-pill--blue   { color: var(--blue); }
.kicker-pill--sky svg { color: var(--sky); }

/* Scroll reveal — only when JS is on (html.js). */
html.js [data-rv] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
html.js [data-rv].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-rv] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   1 — HEADER
   ========================================================= */
.top {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, hsl(228 8% 14%), hsl(228 8% 12%));
  box-shadow: 0 1px 0 hsl(0 0% 100% / .04) inset;
}
.top__inner {
  max-width: calc(var(--wrap) + var(--pad) * 2);
  margin-inline: auto;
  padding: .85rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.top__logo { height: 24px; width: auto; }
.top__profile { display: flex; align-items: center; gap: .6rem; }
.top__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from 210deg, var(--accent), var(--violet), var(--sky), var(--accent)) border-box;
}
.top__who { display: flex; flex-direction: column; line-height: 1.3; }
.top__name {
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 700; font-size: .95rem;
  white-space: nowrap;
}
.top__verified { width: 15px; height: 15px; color: hsl(203 89% 53%); flex-shrink: 0; }
.top__subs { font-size: .74rem; font-weight: 600; color: var(--sky); white-space: nowrap; }

/* =========================================================
   2 — HERO
   ========================================================= */
.hero {
  padding: clamp(1.9rem, 6vw, 3rem) 0 1.8rem;
  text-align: center;
  background:
    radial-gradient(90% 60% at 50% 0%, hsl(230 10% 8% / .8), transparent 70%),
    radial-gradient(70% 40% at 50% 100%, hsl(180 74% 63% / .05), transparent 70%);
}
.hero__badges {
  display: flex; justify-content: center; align-items: center;
  gap: .5rem; flex-wrap: wrap; margin-bottom: 1.15rem;
}
.hero__badges { gap: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .46rem .85rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(hsl(228 8% 22%), hsl(228 9% 13%)) padding-box,
    linear-gradient(hsl(0 0% 100% / .5), hsl(228 8% 30%) 48%, hsl(230 10% 6%)) border-box;
  box-shadow: var(--emb-pill);
  font-family: var(--pixel);
  font-size: .66rem; font-weight: 400; letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 480px) {
  .chip { font-size: .72rem; padding: .5rem 1rem; }
}
.chip--new { color: var(--fg); position: relative; z-index: 1; }
.chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad-sky);
  box-shadow: 0 0 8px var(--sky), inset 0 -1px 1px hsl(0 0% 0% / .3);
}
/* Fused to the NEW chip, like the reference. */
.chip--plain {
  margin-left: -8px;
  padding-left: 1.15rem;
  color: var(--violet);
  background:
    linear-gradient(hsl(255 30% 21%), hsl(254 35% 15%)) padding-box,
    linear-gradient(hsl(268 100% 82%), hsl(262 43% 54%) 48%, hsl(260 36% 10%)) border-box;
}

.hero__title {
  font-size: clamp(1.3rem, 5.6vw, 1.85rem);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.hero__title em { font-style: italic; }
.hero__lede {
  margin: 1.05rem auto 0;
  max-width: 30rem;
  font-size: .97rem;
  color: var(--dim);
  text-wrap: pretty;
}
.hero__lede strong { display: block; color: var(--muted); font-size: .95rem; margin-bottom: .3rem; }
.hero__lede em { font-style: italic; }

/* ---------- VSL ---------- */
.vsl { margin-top: 1.5rem; }
.vsl__frame {
  position: relative;
  width: min(100%, 400px);
  margin-inline: auto;
  aspect-ratio: 5 / 8;
  border-radius: 34px;
  border: 1px solid hsl(215 25% 70% / .28);
  background: linear-gradient(145deg, hsl(240 4% 17%), hsl(240 6% 9%) 52%, hsl(240 5% 13%));
  overflow: hidden;
  box-shadow:
    0 0 0 2px var(--ring-c),
    inset 0 1px 0 hsl(0 0% 100% / .12),
    0 0 44px hsl(258 85% 66% / .1),
    0 34px 80px -32px hsl(0 0% 0% / .95),
    0 0 70px -34px hsl(180 74% 63% / .45);
}
.vsl__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}
.vsl__label {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1rem 1.55rem;
  background: linear-gradient(180deg, hsl(0 0% 0% / .72), transparent);
  font-family: var(--pixel);
  font-size: .72rem; font-weight: 400; letter-spacing: .04em;
  color: var(--sky);
  pointer-events: none;
}
.eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 13px; }
.eq i {
  width: 3px; border-radius: 2px;
  background: var(--grad-sky);
  animation: eqb 1.1s ease-in-out infinite;
}
.eq i:nth-child(1) { height: 55%; animation-delay: 0s; }
.eq i:nth-child(2) { height: 100%; animation-delay: -.35s; }
.eq i:nth-child(3) { height: 70%; animation-delay: -.7s; }
.eq i:nth-child(4) { height: 90%; animation-delay: -.5s; }
@keyframes eqb { 50% { transform: scaleY(.35); } }
@media (prefers-reduced-motion: reduce) { .eq i { animation: none; } }

.vsl__unmute {
  position: absolute; inset: 0; margin: auto; z-index: 3;
  width: fit-content; height: fit-content;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .95rem 1.4rem 1.05rem;
  border: 2px solid var(--sky);
  border-radius: 14px;
  background: linear-gradient(180deg, hsl(202 48% 10% / .8), hsl(208 52% 5% / .84));
  color: var(--sky);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 0 4px hsl(196 92% 62% / .15), 0 18px 50px -18px hsl(0 0% 0% / .9);
}
.vsl__unmute-line { font-size: .76rem; font-weight: 700; }
.vsl__unmute svg { width: 30px; height: 30px; }
.vsl__unmute-cta { font-size: .86rem; font-weight: 800; letter-spacing: .04em; }

.vsl__play {
  position: absolute; inset: 0; margin: auto; z-index: 3;
  width: 74px; height: 74px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: hsl(228 9% 10%);
  box-shadow:
    inset 0 2px 0 hsl(0 0% 100% / .5),
    0 0 0 8px hsl(180 74% 63% / .2),
    0 12px 44px -6px hsl(180 74% 63% / .6);
}
.vsl__play svg { width: 30px; height: 30px; margin-left: 3px; }

/* =========================================================
   3 — REAL EDITORS. REAL EARNINGS.
   ========================================================= */
.proof { padding: 2.6rem 0 1rem; }
.proof__head {
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .1em;
  margin-bottom: 1.2rem;
}
.proof__grid { display: grid; gap: .9rem; }

.tcard {
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--gloss), var(--card-grad);
  box-shadow: var(--emb), var(--lift);
  padding: 1.05rem 1.1rem 1.15rem;
}
.tcard__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: .65rem;
}
.tcard__badge {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .38rem .75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(hsl(255 30% 21%), hsl(254 35% 15%)) padding-box,
    linear-gradient(hsl(268 100% 82%), hsl(262 43% 54%) 48%, hsl(260 36% 10%)) border-box;
  box-shadow: var(--emb-pill), 0 0 16px -6px hsl(258 90% 78% / .45);
  color: var(--violet);
  font-family: var(--pixel);
  font-size: .64rem; font-weight: 400; letter-spacing: .03em;
  white-space: nowrap;
}
.tcard__badge svg { width: 13px; height: 13px; filter: drop-shadow(0 0 4px hsl(258 90% 78% / .6)); }
.tcard__person { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.tcard__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid hsl(0 0% 100% / .18);
  box-shadow: 0 4px 10px -4px hsl(0 0% 0% / .7);
}
.tcard__who { display: flex; flex-direction: column; line-height: 1.25; text-align: left; min-width: 0; }
.tcard__who strong { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard__who span { font-size: .7rem; color: var(--dim); }

.stars { display: inline-flex; align-items: center; gap: .45rem; }
.stars span { color: var(--star); font-size: .9rem; letter-spacing: .14em; text-shadow: 0 0 12px hsl(51 100% 55% / .35); }
.stars b { font-size: .78rem; color: var(--muted); }
.stars--gold span { font-size: 1rem; }

.tcard__quote {
  margin-top: .55rem;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.42;
  text-align: left;
  text-wrap: pretty;
}
.tcard__chips { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.tcard__chips span {
  padding: .3rem .65rem;
  border-radius: 999px;
  background: linear-gradient(180deg, hsl(0 0% 0% / .2), hsl(0 0% 0% / .34));
  border: 1px solid hsl(0 0% 100% / .07);
  box-shadow: inset 0 1.5px 3px hsl(0 0% 0% / .45), 0 1px 0 hsl(0 0% 100% / .05);
  font-size: .68rem; font-weight: 600; color: var(--muted);
}
.tcard--solo { margin-top: 1rem; }

@media (min-width: 900px) {
  .proof .wrap { max-width: 1080px; }
  .proof__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   4 — OFFER
   ========================================================= */
.offer { padding: 2.6rem 0 0; }
.offer__title {
  text-align: center;
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -.015em;
}
.offer__sub {
  margin-top: .5rem;
  text-align: center;
  color: var(--muted);
  font-size: .94rem;
}
.offer__sub strong { color: var(--fg); }

/* Marketplace recreation (also used inside #what) */
.market {
  margin-top: 1.4rem;
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  background: var(--gloss), linear-gradient(180deg, var(--navy-2), var(--navy));
  box-shadow: var(--emb), var(--lift);
  overflow: hidden;
}
.market__bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid hsl(224 30% 20%);
  font-size: .7rem; font-weight: 600; letter-spacing: .08em;
  color: hsl(220 30% 74%);
}
.market__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad-sky);
  box-shadow: 0 0 8px var(--sky);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .45; } }
.market__img {
  display: block;
  width: 100%; height: auto;
}

/* The offer panel — one elevated container, reference-style. */
.offer-panel {
  margin-top: 1.6rem;
  padding: 1.45rem 1.2rem 1.5rem;
  border: 1px solid var(--panel-line);
  border-radius: 28px;
  background: linear-gradient(145deg, hsl(240 4% 19% / .96), hsl(240 6% 10% / .98) 52%, hsl(240 5% 14% / .96));
  box-shadow:
    var(--emb),
    0 0 34px hsl(180 74% 63% / .08),
    0 0 54px hsl(258 85% 66% / .07),
    0 24px 70px hsl(0 0% 0% / .34);
}
.panel-pill {
  width: fit-content;
  margin: 0 auto 1.1rem;
  display: flex; align-items: center; gap: .45rem;
  padding: .48rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(hsl(255 30% 21%), hsl(254 35% 15%)) padding-box,
    linear-gradient(hsl(268 100% 82%), hsl(262 43% 54%) 48%, hsl(260 36% 10%)) border-box;
  box-shadow: var(--emb-pill);
  font-family: var(--pixel);
  font-size: .72rem; font-weight: 400; letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--violet);
}
.panel-pill svg { width: 15px; height: 15px; color: var(--sky); }

.included { display: grid; }
.included li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .85rem 0;
  border-bottom: 1px dashed hsl(0 0% 100% / .13);
}
.included li:last-of-type { border-bottom: 0; }
.included__check {
  --c: var(--sky);
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(130% 130% at 50% 16%, color-mix(in srgb, var(--c) 28%, transparent), transparent 60%),
    linear-gradient(180deg, hsl(228 11% 14%), hsl(231 13% 8%));
  border: 1.5px solid color-mix(in srgb, var(--c) 70%, hsl(228 10% 22%));
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .2),
    0 0 10px -2px color-mix(in srgb, var(--c) 55%, transparent);
  color: color-mix(in srgb, var(--c) 86%, white);
  margin-top: .1rem;
}
.included__check svg { width: 11px; height: 11px; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 70%, transparent)); }
.included li p { font-size: .88rem; color: var(--muted); line-height: 1.5; text-align: left; }
.included li p strong { color: var(--fg); }
.included li.included__guarantee p strong { color: var(--sky); }
.included__check--shield svg { width: 14px; height: 14px; }
.included__check--violet { --c: var(--violet); }
.included__check--blue   { --c: var(--blue); }
.included__check--gold   { --c: var(--gold); }

.price {
  margin: 1.2rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px dashed hsl(0 0% 100% / .13);
  display: flex; align-items: baseline; justify-content: center;
  gap: .7rem; flex-wrap: wrap;
}
.price__old { color: var(--dim); text-decoration: line-through; font-size: 1.1rem; font-weight: 600; }
.price__new { font-size: 1.3rem; font-weight: 700; }
.price__new b { color: var(--sky); font-size: 2rem; font-weight: 800; text-shadow: 0 0 24px hsl(196 92% 62% / .35); }
.price__off {
  align-self: center;
  padding: .32rem .7rem;
  border-radius: 999px;
  background: var(--gloss), linear-gradient(180deg, hsl(196 92% 62% / .18), hsl(206 90% 55% / .06)), var(--card);
  border: 1px solid hsl(196 92% 62% / .4);
  box-shadow: var(--emb);
  color: var(--sky);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
}

/* =========================================================
   5 — CHECKOUT
   ========================================================= */
.checkout { position: relative; padding: 1.9rem 0 2.4rem; }
.checkout::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  background-image:
    linear-gradient(to right, hsl(258 60% 60% / .13) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(258 60% 60% / .13) 1px, transparent 1px);
  background-size: 34px 34px;
  /* Fades out at the bottom as well as the top, or the grid stops in a
     hard line where the section ends. */
  -webkit-mask-image: linear-gradient(to top, transparent, black 40%, transparent);
  mask-image: linear-gradient(to top, transparent, black 40%, transparent);
  pointer-events: none;
}
.checkout .wrap { position: relative; z-index: 1; }
.checkout__panel {
  border-radius: 28px;
  border: 1px solid hsl(258 45% 55% / .45);
  background:
    radial-gradient(120% 90% at 50% 0%, hsl(258 42% 22% / .9), transparent 62%),
    linear-gradient(145deg, hsl(257 28% 16% / .97), hsl(256 30% 10% / .98) 52%, hsl(256 26% 13% / .97));
  box-shadow:
    var(--emb),
    0 0 44px hsl(258 85% 60% / .14),
    0 0 34px hsl(180 74% 63% / .06),
    0 30px 90px -40px hsl(258 60% 45% / .5),
    0 24px 70px hsl(0 0% 0% / .34);
  padding: 1.55rem 1.2rem 1.45rem;
  text-align: center;
}
.checkout__ready {
  font-size: .72rem; font-weight: 700; letter-spacing: .2em;
  color: var(--violet);
}
.checkout__step {
  margin-top: .45rem;
  font-size: 1.1rem; font-weight: 800; letter-spacing: .02em;
  color: var(--violet);
}
.checkout__step span { color: var(--fg); }
.checkout__form { margin-top: 1.15rem; display: grid; gap: .75rem; }

.field { display: block; }
.field__label {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* White inputs on the purple panel — measured: 48px, 14px/600. */
.field__input {
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  border-radius: 14px;
  border: 1px solid hsl(220 14% 88%);
  background: #fff;
  color: hsl(228 30% 10%);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.field__input::placeholder { color: hsl(228 8% 55%); font-weight: 500; }
.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px hsl(180 74% 63% / .35);
}
.field__input[aria-invalid="true"] { border-color: var(--coral); box-shadow: 0 0 0 3px hsl(0 78% 64% / .3); }
.field__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555a66' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 16px;
  padding-right: 2.7rem;
}

.checkout__consent {
  display: flex; gap: .6rem; align-items: flex-start;
  text-align: left;
  font-size: .72rem; color: hsl(258 20% 72%); line-height: 1.45;
  padding: .2rem .1rem;
}
.checkout__consent input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px; height: 18px; margin-top: .12rem;
  border-radius: 5px;
  background: #fff;
  box-shadow: inset 0 -1px 0 hsl(0 0% 0% / .12);
  display: grid; place-items: center;
  cursor: pointer;
}
.checkout__consent input::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2.4px solid hsl(228 10% 13%);
  border-bottom: 2.4px solid hsl(228 10% 13%);
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
}
.checkout__consent input:checked { background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.checkout__consent input:checked::after { opacity: 1; }
.checkout__error {
  font-size: .8rem; font-weight: 600; color: hsl(0 90% 78%);
  text-align: left;
}

/* CTA button — ported 1:1 from the reference (bottom-lit gradient,
   2px dark ring, bright inset top line, dual glow halo), in cyan. */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  min-height: 56px;
  padding: 0 1.5rem;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(hsl(184 62% 42%) 0%, var(--accent) 52%, hsl(176 90% 84%) 100%);
  color: hsl(195 50% 5%);
  font-weight: 900;
  font-size: clamp(.8rem, 3.9vw, .96rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 0 0 2px var(--ring-c),
    inset 0 1px 0 hsl(177 95% 88% / .95),
    inset 0 -1px 0 hsl(0 0% 100% / .18),
    0 16px 38px hsl(180 74% 63% / .18),
    0 10px 30px hsl(190 60% 18% / .2);
  transition: transform .15s ease, filter .15s ease;
}
.btn-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-cta:active { transform: translateY(1px); filter: brightness(.97); }
.btn-cta svg { width: 17px; height: 17px; flex-shrink: 0; }
.checkout__submit { width: 100%; margin-top: .35rem; padding-inline: 1rem; }

.gpill {
  margin: 1.05rem auto 0;
  width: fit-content;
  max-width: 100%;
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: linear-gradient(hsl(228 7% 17%), hsl(228 8% 12%));
  box-shadow: var(--emb-pill);
  font-size: .76rem; font-weight: 600; color: hsl(220 15% 83%);
}
.gpill svg { width: 15px; height: 15px; color: var(--violet); flex-shrink: 0; filter: drop-shadow(0 0 5px hsl(258 90% 78% / .6)); }
.checkout__panel .gpill {
  border-color: hsl(258 60% 65% / .4);
  background: linear-gradient(hsl(258 32% 22%), hsl(257 34% 15%));
  color: hsl(258 25% 85%);
}

.trust { margin-top: .95rem; }
.trust__line { font-size: .8rem; font-weight: 600; color: var(--violet); }
.trust__line--violet { color: var(--violet); }
.trust__row {
  margin-top: .55rem;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
}
.trust__avatars { display: inline-flex; }
.trust__avatars img {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid hsl(258 30% 20%);
  object-fit: cover;
}
.trust__avatars img + img { margin-left: -9px; }
.cta__block .trust__avatars img { border-color: var(--card); }

/* ---------- STEP 2 — payment, same panel language as step 1 ----------
   White cards on the purple panel, mirroring the reference. Step 2 is
   [hidden] until step 1 validates; revealing it just drops the
   attribute, so the entrance animation runs off .checkout__panel--pay
   rather than the [data-rv] observer (which never fires on a
   display:none node). */
.checkout__panel--pay { margin-top: 1rem; animation: payIn .32s ease both; }
@keyframes payIn { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .checkout__panel--pay { animation: none; }
}

/* Preview ribbon — only shown while Stripe is unconnected. */
.paydemo {
  display: flex; align-items: flex-start; gap: .55rem;
  margin-top: .9rem;
  padding: .65rem .85rem;
  border: 1px solid hsl(43 80% 55% / .4);
  border-radius: 14px;
  background: linear-gradient(hsl(43 46% 20% / .85), hsl(40 48% 13% / .9));
  text-align: left;
  font-size: .74rem; line-height: 1.45; color: hsl(43 60% 84%);
}
.paydemo svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: .12rem; color: var(--gold); }
.paydemo b { color: hsl(43 92% 76%); }

/* Contact summary + Edit */
.paysum {
  margin-top: 1.05rem;
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem .9rem;
  border-radius: 16px;
  border: 1px solid hsl(220 14% 88%);
  background: #fff;
  text-align: left;
}
.paysum__who { min-width: 0; flex: 1; }
.paysum__who strong {
  display: block;
  font-size: .95rem; font-weight: 800; color: hsl(228 30% 10%);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.paysum__who > span {
  display: block;
  margin-top: .1rem;
  font-size: .76rem; font-weight: 500; color: hsl(228 9% 45%);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.paysum__edit {
  flex-shrink: 0;
  min-height: 38px;
  padding: 0 1.05rem;
  border-radius: 999px;
  border: 1px solid hsl(220 14% 86%);
  background: linear-gradient(#fff, hsl(220 16% 96%));
  color: hsl(228 30% 12%);
  font-size: .8rem; font-weight: 700;
  box-shadow: 0 1px 2px hsl(228 20% 10% / .08);
  transition: filter .15s ease, transform .15s ease;
}
.paysum__edit:hover { filter: brightness(.97); }
.paysum__edit:active { transform: translateY(1px); }

/* Promo code */
.promo {
  margin-top: .7rem;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .55rem .5rem .5rem;
  border-radius: 16px;
  border: 1px solid hsl(220 14% 88%);
  background: #fff;
}
.promo__input {
  flex: 1; min-width: 0;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-transform: uppercase;
}
.promo__input::placeholder { text-transform: none; }
.promo__input:focus { box-shadow: none; border-color: transparent; }
.promo__apply {
  flex-shrink: 0;
  min-height: 38px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid hsl(220 14% 86%);
  background: linear-gradient(#fff, hsl(220 16% 96%));
  color: hsl(228 30% 12%);
  font-size: .78rem; font-weight: 700;
}
.promo__apply:disabled { opacity: .55; cursor: default; }
.promo__note {
  margin-top: .45rem;
  text-align: left;
  font-size: .74rem; font-weight: 600; line-height: 1.4;
  color: hsl(258 20% 76%);
}
.promo__note--ok { color: var(--sky-1); }
.promo__note--bad { color: hsl(0 90% 78%); }

/* Payment box */
.paybox {
  margin-top: .7rem;
  padding: .9rem .85rem 1rem;
  border-radius: 16px;
  border: 1px solid hsl(220 14% 88%);
  background: #fff;
  text-align: left;
}
.paybox__secure {
  display: flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 700; color: hsl(206 80% 34%);
}
.paybox__secure svg { width: 15px; height: 15px; flex-shrink: 0; }
.paybox__express:not([hidden]) { margin-bottom: .85rem; }
/* Stripe's Element brings its own padding; only the placeholder above
   it needs the gap. */
.paybox__placeholder .paytabs { margin-top: .85rem; }

/* Placeholder card form — inert until Stripe is wired in. */
.paytabs { margin-top: .85rem; display: flex; gap: .55rem; }
.paytabs__tab {
  flex: 1;
  display: flex; align-items: center; gap: .45rem;
  padding: .7rem .75rem;
  border-radius: 12px;
  border: 1.5px solid hsl(220 14% 88%);
  font-size: .82rem; font-weight: 700; color: hsl(228 20% 30%);
}
.paytabs__tab svg { width: 17px; height: 17px; flex-shrink: 0; color: hsl(228 10% 52%); }
.paytabs__tab.is-on {
  border-color: var(--violet);
  box-shadow: 0 0 0 1px var(--violet);
}
.paytabs__tab.is-on svg { color: var(--violet); }

.payfield { display: block; margin-top: .8rem; }
.payfield__label {
  display: block;
  margin-bottom: .3rem;
  font-size: .8rem; font-weight: 700; color: hsl(228 28% 14%);
}
.payfield__wrap { position: relative; display: block; }
.payfield__wrap .field__input { padding-right: 6.2rem; }
.payrow { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.payrow .payfield__wrap .field__input { padding-right: 3.2rem; }
.payrow > .payfield:first-child .payfield__wrap .field__input { padding-right: 1rem; }
.field__input:disabled {
  background: hsl(220 16% 98%);
  color: hsl(228 8% 55%);
  cursor: default;
}
.paybrands {
  position: absolute; top: 50%; right: .6rem;
  transform: translateY(-50%);
  display: flex; gap: .25rem;
  pointer-events: none;
}
.paybrands svg { width: 26px; height: 16.2px; border-radius: 3px; }

/* On the narrowest phones the card-number placeholder and the brand
   marks want the same pixels. Drop the third mark rather than let the
   two collide. (Placeholder state only — the live Stripe Element
   handles its own brand row.) */
@media (max-width: 379px) {
  .paybrands svg:nth-child(3) { display: none; }
  .payfield__wrap .field__input { padding-right: 4.6rem; }
  .payrow .payfield__wrap .field__input { padding-right: 3rem; }
}

/* Busy state on the pay button (Stripe round-trip). */
.btn-cta[disabled] { opacity: .62; cursor: default; }
.btn-cta[disabled]:hover { transform: none; filter: none; }
.btn-cta.is-busy > svg:first-child {
  border: 2.4px solid hsl(195 50% 5% / .3);
  border-top-color: hsl(195 50% 5%);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn-cta.is-busy > svg:first-child > * { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-cta.is-busy > svg:first-child { animation-duration: 2s; }
}

.trust__approved {
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  color: hsl(258 22% 78%);
}

@media (min-width: 480px) {
  .checkout__panel--pay { padding-inline: 1.5rem; }
}

/* =========================================================
   6 — LIVE JOBS RAIL
   Real Find Jobs listings as a marquee of cards; the edges fade out
   with a mask so cards peek in from either side. script.js animates
   each card on its own (see there for why) and adds .is-live. Without
   it the row is a plain swipeable strip.
   ========================================================= */
.jobrail {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
}
.jobrail__label {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 0 0 .9rem;
  font-family: var(--mono);
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: hsl(220 30% 74%);
}
.jobrail__viewport {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.jobrail__viewport::-webkit-scrollbar { display: none; }
/* Live, the cards are display only: nothing scrolls, and a tap must
   never pause or select anything (on touch, :hover sticks after one). */
.jobrail__viewport.is-live {
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
/* The bottom padding is room for the cards' drop shadow, which the
   viewport would otherwise cut off in a hard line. */
.jobrail__track {
  display: flex; gap: 14px;
  width: max-content;
  padding: 4px 7px 30px;
}

.jpost {
  flex-shrink: 0;
  width: 284px;
  display: flex; flex-direction: column; gap: .55rem;
  padding: .95rem 1rem 1rem;
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  background: var(--gloss), linear-gradient(180deg, var(--navy-2), var(--navy));
  box-shadow: var(--emb), var(--lift);
  text-align: left;
}
.jpost__head { display: flex; align-items: flex-start; gap: .5rem; }
.jpost__title {
  flex: 1; min-width: 0;
  font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.3em);
}
.jpost__match {
  flex-shrink: 0;
  padding: .1rem .45rem;
  border: 1px solid hsl(212 80% 60% / .45);
  border-radius: 999px;
  background: hsl(212 80% 50% / .12);
  font-size: .6rem; font-weight: 600; color: var(--blue);
  white-space: nowrap;
}
.jpost__meta, .jpost__tags {
  display: flex; align-items: center; gap: .35rem;
  white-space: nowrap; overflow: hidden;
}
.jpost__meta {
  font-size: .68rem; color: var(--dim); gap: .55rem;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
          mask-image: linear-gradient(90deg, #000 85%, transparent);
}
/* Exactly two rows of chips (each row ~21px + the gap): enough height
   that row two keeps its bottom border, too little for a third row to
   peek in. */
.jpost__tags { flex-wrap: wrap; align-content: flex-start; height: 3.1rem; }
.jpost__meta > span { display: inline-flex; align-items: center; gap: .25rem; }
.jpost__meta svg, .jpost__tags svg { width: 11px; height: 11px; flex-shrink: 0; }
.jpost__who { color: var(--muted); }
.jpost__av {
  width: 15px; height: 15px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: linear-gradient(180deg, hsl(var(--h) 70% 66%), hsl(var(--h) 62% 44%));
  font-style: normal; font-size: .5rem; font-weight: 700; color: #fff;
}
.jpost__tags span {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .14rem .5rem;
  border: 1px solid hsl(0 0% 100% / .12);
  border-radius: 999px;
  font-size: .6rem; color: var(--muted);
}
.jpost__tags .jpost__tag--paid {
  border-color: hsl(43 90% 58% / .6);
  color: var(--gold);
  font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 0 6px -2px hsl(43 96% 62% / .5);
}
.jpost__desc {
  font-size: .72rem; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(3 * 1.45em);
}
.jpost__foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.jpost__price { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: var(--sky); }
/* "/month" rides smaller so a retainer's price still fits beside Apply. */
.jpost__price small { font-size: .56em; font-weight: 600; letter-spacing: 0; }
.jpost__apply {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-width: 108px;
  padding: .5rem .9rem;
  border-radius: 9px;
  background: linear-gradient(180deg, hsl(208 92% 70%), hsl(210 88% 58%));
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .3), 0 6px 16px -8px hsl(210 90% 55% / .8);
  font-size: .75rem; font-weight: 600; color: #fff;
}
.jpost__apply svg { width: 12px; height: 12px; }

@media (min-width: 768px) {
  .jpost { width: 320px; }
}

/* =========================================================
   7 — WHAT IS THIS?
   ========================================================= */
.what { padding: 3rem 0 .6rem; }
.wstep { margin-top: 1.9rem; }
.wstep > .irow { margin-top: 0; margin-bottom: .9rem; }

/* Icon caption rows (also the selling-point rows) */
.irow {
  margin-top: .9rem;
  display: flex; align-items: center; gap: .95rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--border-2);
  border-radius: 22px;
  background: var(--gloss), var(--card-grad);
  box-shadow: var(--emb), var(--lift);
  text-align: left;
}

/* "Coin" icons — dark centre, bright colored ring, glowing glyph.
   The reference look. Variants only change --c. */
.irow__icon, .bcard__icon, .gcard__shield {
  --c: var(--accent);
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(130% 130% at 50% 16%, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%),
    linear-gradient(180deg, hsl(228 11% 14%), hsl(231 13% 8%));
  border: 2px solid color-mix(in srgb, var(--c) 72%, hsl(228 10% 22%));
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .22),
    inset 0 -7px 14px -7px color-mix(in srgb, var(--c) 50%, transparent),
    0 0 18px -3px color-mix(in srgb, var(--c) 60%, transparent);
  color: color-mix(in srgb, var(--c) 86%, white);
}
.irow__icon svg, .bcard__icon svg, .gcard__shield svg {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 75%, transparent));
}
.irow__icon { width: 47px; height: 47px; }
.irow__icon svg { width: 21px; height: 21px; }
.irow__icon--sky,   .bcard__icon--sky   { --c: var(--sky); }
.irow__icon--gold,   .bcard__icon--gold   { --c: var(--gold); }
.irow__icon--blue,   .bcard__icon--blue   { --c: var(--blue); }
.irow__icon--violet, .bcard__icon--violet { --c: var(--violet); }

.irow p { font-size: .89rem; color: var(--muted); line-height: 1.5; }
.irow p strong { color: var(--fg); }

/* Generic recreated-screenshot panel */
.shot {
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  background: var(--gloss), linear-gradient(180deg, var(--navy-2), var(--navy));
  box-shadow: var(--emb), var(--lift);
  overflow: hidden;
}

/* Ads-manager capture — the real screenshot framed in the site's panel
   so a light-UI image lands intentionally on the dark canvas. The bar
   above it carries the live dot the recreation used to. */
.shot-ads { margin: 0; }
.shot-ads__bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid hsl(224 30% 20%);
  font-size: .7rem; font-weight: 600; letter-spacing: .08em;
  color: hsl(220 30% 74%);
}
.shot-ads__img {
  display: block;
  width: 100%; height: auto;
}
/* All-time value card */
.shot-alltime { padding: 1.4rem 1.25rem 1.5rem; text-align: left; }
.shot-alltime__label { font-size: .68rem; font-weight: 700; letter-spacing: .22em; color: hsl(220 25% 55%); }
.shot-alltime__value {
  margin-top: .35rem;
  font-family: var(--mono);
  font-size: clamp(2.3rem, 10.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--navy-num);
  line-height: 1.05;
  text-shadow: 0 0 30px hsl(212 92% 76% / .35);
}
.shot-alltime__sub { margin-top: .4rem; font-size: .8rem; color: hsl(220 30% 66%); }

/* New-clients chart card */
.shot-chart { padding: 1.15rem 1.25rem 0; }
.shot-chart__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem;
}
.shot-chart__head p { font-size: .86rem; font-weight: 700; }
.shot-chart__range {
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid hsl(224 30% 24%);
  background: linear-gradient(180deg, hsl(224 38% 19%), hsl(226 40% 13%));
  box-shadow: var(--emb);
  font-size: .66rem; font-weight: 600; color: hsl(220 30% 70%);
}
.shot-chart__num {
  margin-top: .55rem;
  display: flex; align-items: baseline; gap: .6rem;
  text-align: left;
}
.shot-chart__num b { font-size: 2.25rem; font-weight: 800; line-height: 1; }
.shot-chart__trend {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; color: var(--sky);
}
.shot-chart__trend svg { width: 14px; height: 14px; }
.shot-chart__line {
  width: 100%; height: auto;
  margin-top: .5rem;
  color: var(--sky);
  overflow: visible;
}
.shot-chart__grid line { stroke: hsl(220 30% 70% / .14); stroke-width: .7; }
.shot-chart__axis text {
  fill: hsl(220 25% 58%);
  font-family: var(--font);
  font-size: 7.5px;
  font-weight: 600;
}

/* =========================================================
   8 — CTA BLOCKS
   ========================================================= */
.cta { padding: 2.2rem 0; }
.cta__block { text-align: center; }
.cta__block .btn-cta { width: min(100%, 400px); }
.cta__title {
  font-size: clamp(1.3rem, 5.4vw, 1.7rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin-bottom: 1.2rem;
  text-wrap: balance;
}
.cta__block--inline { margin-top: 1.6rem; }

/* =========================================================
   9 — NEW JOBS, DAILY!
   ========================================================= */
.jobs { padding: 2.8rem 0 .8rem; }

/* Discord job alert — a portrait capture, so it is capped and centred
   rather than stretched across the column. */
.jobalert {
  margin: 1.5rem auto 0;
  max-width: 23rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--emb), var(--lift);
}
.jobalert img { display: block; width: 100%; height: auto; }

/* =========================================================
   10 — THIS IS NOT A COURSE
   ========================================================= */
.notacourse { padding: 2.8rem 0 .6rem; }
.points { margin-top: 1.3rem; display: grid; gap: .7rem; }
.points .irow { margin-top: 0; }

/* =========================================================
   11 — THE TRUTH
   ========================================================= */
.truth {
  padding: 3rem 0 .6rem;
  background: radial-gradient(70% 40% at 50% 0%, hsl(0 78% 64% / .05), transparent 70%);
}
.truth__icons {
  margin-top: 1.4rem;
  display: flex; align-items: center; justify-content: center; gap: .85rem;
}
/* Fanned like the story photos: outer badges tilt away, middle sits
   upright and slightly proud. */
.xicon--ig { transform: rotate(-12deg) translateY(5px); }
.xicon--x  { transform: rotate(12deg) translateY(5px); }
.xicon--gmail { transform: rotate(-2deg) scale(1.08); z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .xicon--ig, .xicon--x, .xicon--gmail { transform: none; }
}
.xicon {
  position: relative;
  width: 66px; height: 66px;
  display: grid; place-items: center;
  border: 1px solid hsl(0 0% 100% / .22);
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 50% 0%, hsl(0 0% 100% / .1), transparent 55%),
    linear-gradient(180deg, hsl(228 8% 22%), hsl(228 8% 14%));
  box-shadow: var(--emb), var(--lift);
  color: hsl(228 10% 72%);
}
.xicon svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 3px hsl(0 0% 0% / .55)); }
/* Optical sizing: the Gmail mark is wide but short inside its 24x24 box
   and the X glyph nearly fills its own, so neither matches Instagram at
   the same declared size. */
.xicon--gmail svg { width: 35px; height: 35px; }
.xicon--x svg { width: 26px; height: 26px; }

.truth__body {
  margin: 1.3rem auto 0;
  max-width: 30rem;
  text-align: center;
  color: var(--muted);
  font-size: .94rem;
}
.truth__body strong { color: var(--fg); }
.truth__but {
  margin: 1.2rem auto 0;
  text-align: center;
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.4;
}
.truth__label {
  margin: 1.8rem 0 .9rem;
  text-align: center;
  font-family: var(--pixel);
  font-size: .74rem; font-weight: 400; letter-spacing: .04em;
  color: var(--sky);
}
.truth__pills { display: grid; gap: .6rem; max-width: 30rem; margin-inline: auto; }
.truth__pills li {
  padding: .85rem 1.15rem;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--gloss), var(--card-grad);
  box-shadow: var(--emb), 0 10px 24px -16px hsl(0 0% 0% / .8);
  text-align: center;
  font-size: .9rem; font-weight: 600; color: var(--muted);
}
.truth__pills li strong { color: var(--fg); }
.truth__pills-key {
  border-color: hsl(180 74% 63% / .55);
  background: var(--gloss), linear-gradient(180deg, hsl(180 74% 63% / .12), hsl(180 74% 63% / .04)), var(--card);
  box-shadow: var(--emb), 0 0 24px -8px hsl(180 74% 63% / .45), 0 10px 24px -16px hsl(0 0% 0% / .8);
  color: var(--fg);
}
.truth__pills-key strong { color: var(--accent); }

/* =========================================================
   13 — WHAT'S INCLUDED (EXPANDED)
   ========================================================= */
.included-x {
  padding: 3rem 0 .6rem;
  background: radial-gradient(70% 30% at 50% 0%, hsl(196 92% 62% / .05), transparent 70%);
}

.statpills {
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
.statpill {
  padding: .95rem .6rem 1rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--gloss), var(--card-grad);
  box-shadow: var(--emb), var(--lift);
  text-align: center;
}
.statpill b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.1rem, 5.2vw, 1.45rem);
  font-weight: 800;
  letter-spacing: .01em;
  text-shadow: 0 0 20px hsl(196 92% 62% / .35);
}
.statpill > span {
  display: block;
  margin-top: .35rem;
  font-family: var(--pixel);
  font-size: .62rem; font-weight: 400; letter-spacing: .04em;
  color: var(--dim);
}

/* VP+ product bundle artwork */
.bundle-visual {
  width: min(100%, 560px);
  margin: 1.5rem auto 1rem;
}
.bundle-visual__image { display: block; width: 100%; height: auto; }
.bundle-visual--compact { width: min(100%, 400px); margin: 0 auto 1.3rem; }

.included-x__title {
  margin: .4rem 0 1rem;
  text-align: center;
  font-size: clamp(1.35rem, 5.6vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.015em;
}

.bcards { display: grid; gap: .8rem; }
.bcard {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: .95rem;
  padding: 1.05rem 1.1rem 1.15rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--gloss), var(--card-grad);
  box-shadow: var(--emb), var(--lift);
  text-align: left;
}
.bcard__content { min-width: 0; }
.bcard__icon {
  width: 46px; height: 46px;
  border: 1px solid color-mix(in srgb, var(--c) 85%, black);
  background:
    radial-gradient(110% 100% at 50% 0%, color-mix(in srgb, var(--c) 17%, transparent), transparent 75%),
    linear-gradient(180deg, #101211, #060708);
  box-shadow:
    0 0 0 2px #08090a,
    inset 0 1px 0 color-mix(in srgb, var(--c) 30%, transparent),
    0 0 12px -5px color-mix(in srgb, var(--c) 35%, transparent);
  color: var(--c);
}
.bcard__icon svg { width: 21px; height: 21px; filter: none; }
.bcard__icon--lime   { --c: #b7f52a; }
.bcard__icon--cyan   { --c: #20c9ff; }
.bcard__icon--gold   { --c: #f6cf37; }
.bcard__icon--violet { --c: #bf7bff; }
.bcard__icon--orange { --c: #ff982d; }
.bcard__icon--pink   { --c: #f05cac; }
.bcard__icon--blue   { --c: #69a8ff; }
.bcard__icon--yellow { --c: #f5e546; }
.bcard__content h3 {
  margin-bottom: .3rem;
  font-size: 1rem; font-weight: 800; letter-spacing: -.015em;
  line-height: 1.3;
}
.bcard p { font-size: 1rem; color: hsl(215 18% 68%); line-height: 1.5; }
@media (max-width: 420px) {
  .bcard { grid-template-columns: 42px minmax(0, 1fr); gap: .8rem; padding: 1rem .9rem; }
  .bcard__icon { width: 42px; height: 42px; }
  .bcard__content h3, .bcard p { font-size: .94rem; }
}
.bcard p strong { color: var(--fg); }
.bcard p em { font-style: italic; color: var(--fg); }
.bcard--guarantee {
  border-color: hsl(196 92% 62% / .5);
  background:
    var(--gloss),
    radial-gradient(120% 100% at 50% 0%, hsl(196 92% 62% / .12), transparent 60%),
    linear-gradient(180deg, var(--card-2), var(--card));
}

/* =========================================================
   14 — WHY I'M DOING THIS
   ========================================================= */
.story { padding: 3rem 0 .6rem; }
/* Profile chip — avatar beside the name block, the whole group centred,
   the way a social profile header reads. */
.story__chip {
  display: flex; align-items: center; justify-content: center;
  gap: .9rem;
  margin-bottom: 1.1rem;
}
.story__who {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .1rem;
  text-align: left;
  min-width: 0;
}
.story__avatar {
  flex-shrink: 0;
  width: 76px; height: 76px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from 210deg, var(--accent), var(--violet), var(--sky), var(--accent)) border-box;
}
.story__name {
  display: inline-flex; align-items: center; gap: .32rem;
  font-weight: 700; font-size: 1.18rem; line-height: 1.25;
}
.story__name .top__verified { width: 16px; height: 16px; }
.story__brand { height: 15px; width: auto; margin: .16rem 0 .1rem; opacity: .85; }
.story__subs { font-size: .82rem; font-weight: 600; color: var(--sky); }

/* Fanned photo trio. The middle frame is taller and upright at the
   front; the outer two are rotated and nudged down so the group reads
   as an arc. Source order puts the middle last so it paints on top
   without relying on z-index alone. */
.fan {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fan__item {
  margin: 0;
  flex: 0 0 auto;
  width: 37%;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid hsl(0 0% 100% / .14);
  background: hsl(228 8% 10%);
  box-shadow: 0 0 0 2px var(--ring-c), 0 22px 44px -20px hsl(0 0% 0% / .95);
}
.fan__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fan__item--l { transform: rotate(-8deg) translateY(14px); margin-right: -7%; }
.fan__item--r { transform: rotate(8deg) translateY(14px); margin-left: -7%; order: 3; }
.fan__item--m {
  width: 40%;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  order: 2;
  position: relative; z-index: 3;
  box-shadow: 0 0 0 2px var(--ring-c), 0 28px 56px -22px hsl(0 0% 0% / .98);
}
@media (prefers-reduced-motion: reduce) {
  .fan__item--l, .fan__item--r { transform: none; }
}
.story__text {
  margin: 1.4rem auto 0;
  max-width: 32rem;
  display: grid; gap: .95rem;
  text-align: center;
  font-size: .94rem;
  color: var(--muted);
}
.story__text strong { color: var(--fg); }

.story__proof { margin-top: 1.5rem; display: grid; gap: .8rem; }

.chat {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--gloss), var(--card-grad);
  box-shadow: var(--emb), var(--lift);
  text-align: left;
}
.chat__avatar {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover;
}
.chat__avatar--init {
  display: grid; place-items: center;
  background:
    radial-gradient(130% 130% at 50% 16%, color-mix(in srgb, var(--av, #5cb1ff) 30%, transparent), transparent 62%),
    linear-gradient(180deg, hsl(228 11% 14%), hsl(231 13% 8%));
  border: 1.5px solid color-mix(in srgb, var(--av, #5cb1ff) 65%, hsl(228 10% 22%));
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .2),
    0 0 10px -2px color-mix(in srgb, var(--av, #5cb1ff) 55%, transparent);
  color: color-mix(in srgb, var(--av, #5cb1ff) 85%, white);
  font-size: .92rem; font-weight: 800;
}
.chat__body { min-width: 0; }
.chat__meta strong { font-size: .86rem; }
.chat__meta span { margin-left: .5rem; font-size: .66rem; color: var(--dim); }
.chat__msg { margin-top: .2rem; font-size: .9rem; color: hsl(228 10% 84%); line-height: 1.45; }
.chat__mention {
  padding: .06rem .35rem;
  border-radius: 5px;
  background: linear-gradient(180deg, hsl(258 90% 82% / .26), hsl(258 82% 70% / .12));
  color: var(--violet);
  font-weight: 600;
  white-space: nowrap;
}

/* =========================================================
   16 — WHO THIS IS (AND ISN'T) FOR
   ========================================================= */
.fit { padding: 3rem 0 .6rem; }
.fit__card {
  margin-top: 1rem;
  padding: 1.2rem 1.15rem 1.25rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-2);
  background: var(--gloss), var(--card-grad);
  box-shadow: var(--emb), var(--lift);
  text-align: left;
}
.fit__card--yes { border-color: hsl(196 92% 62% / .45); }
.fit__card--no { border-color: hsl(0 78% 64% / .4); }
.fit__head {
  font-size: .8rem; font-weight: 800; letter-spacing: .14em;
  margin-bottom: .85rem;
}
.fit__head--yes { color: var(--sky); }
.fit__head--no { color: var(--coral); }
.fit__card ul { display: grid; gap: .7rem; }
.fit__card li {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .89rem; color: var(--muted); line-height: 1.5;
}
.fit__mark {
  --c: var(--sky);
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  margin-top: .1rem;
  background:
    radial-gradient(130% 130% at 50% 16%, color-mix(in srgb, var(--c) 28%, transparent), transparent 60%),
    linear-gradient(180deg, hsl(228 11% 14%), hsl(231 13% 8%));
  border: 1.5px solid color-mix(in srgb, var(--c) 70%, hsl(228 10% 22%));
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .2),
    0 0 10px -2px color-mix(in srgb, var(--c) 55%, transparent);
  color: color-mix(in srgb, var(--c) 86%, white);
}
.fit__mark svg { width: 11px; height: 11px; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 70%, transparent)); }
.fit__mark--no { --c: var(--coral); }

/* =========================================================
   17 — THE GUARANTEE
   ========================================================= */
.guarantee { padding: 2.6rem 0 .4rem; }
.gcard {
  padding: 1.9rem 1.25rem 1.8rem;
  border-radius: 28px;
  border: 1px solid hsl(197 82% 62% / .4);
  background:
    radial-gradient(110% 80% at 50% 0%, hsl(196 92% 62% / .13), transparent 60%),
    linear-gradient(145deg, hsl(240 4% 19% / .96), hsl(240 6% 10% / .98) 52%, hsl(240 5% 14% / .96));
  box-shadow:
    var(--emb),
    0 0 44px hsl(196 92% 62% / .12),
    0 30px 80px -35px hsl(196 92% 62% / .35),
    0 24px 70px hsl(0 0% 0% / .34);
  text-align: center;
}
.gcard__shield {
  --c: var(--sky);
  display: inline-grid;
  width: 58px; height: 58px;
  margin-bottom: 1rem;
}
.gcard__shield svg { width: 27px; height: 27px; }
.gcard__title {
  font-size: clamp(1.4rem, 5.9vw, 1.85rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.01em;
}
.gcard p {
  margin: 1rem auto 0;
  max-width: 30rem;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.55;
}
.gcard p strong { color: var(--fg); }

/* =========================================================
   18 — WHY THIS WORKS RIGHT NOW
   ========================================================= */
.whynow {
  padding: 3rem 0 .6rem;
  background: radial-gradient(70% 30% at 50% 0%, hsl(212 94% 72% / .05), transparent 70%);
}
.whynow__closer {
  margin-top: 1.4rem;
  text-align: center;
  font-size: .98rem;
  color: var(--muted);
  line-height: 1.5;
}
.whynow__closer strong { color: var(--fg); font-size: 1.1rem; }

/* =========================================================
   19 — FAQ
   ========================================================= */
.faq { padding: 3rem 0 .6rem; }
.faq__list { margin-top: .4rem; display: grid; gap: .6rem; }
.faq__item {
  border: 1px solid var(--border-2);
  border-radius: 15px;
  background: var(--gloss), var(--card-grad);
  box-shadow: var(--emb), 0 10px 24px -16px hsl(0 0% 0% / .8);
  overflow: hidden;
}
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  font-size: .92rem; font-weight: 700;
  list-style: none;
  text-align: left;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__plus { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.faq__plus::before, .faq__plus::after {
  content: "";
  position: absolute;
  background: var(--grad-cyan);
  border-radius: 2px;
  box-shadow: 0 0 8px hsl(180 74% 63% / .5);
  transition: transform .2s ease;
}
.faq__plus::before { left: 0; right: 0; top: 8px; height: 2.4px; }
.faq__plus::after { top: 0; bottom: 0; left: 8px; width: 2.4px; }
.faq__item[open] .faq__plus::after { transform: scaleY(0); }
.faq__a { padding: 0 1.1rem 1.05rem; text-align: left; }
.faq__a p { font-size: .88rem; color: var(--muted); line-height: 1.55; }

/* =========================================================
   20 — FINAL OFFER CARD
   ========================================================= */
.finalcard {
  position: relative;
  padding: 2.6rem 0 3rem;
}
.finalcard::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background-image:
    linear-gradient(to right, hsl(180 74% 63% / .1) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(180 74% 63% / .1) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to top, black, transparent);
  mask-image: linear-gradient(to top, black, transparent);
  pointer-events: none;
}
.finalcard .wrap { position: relative; z-index: 1; }
.fcard {
  padding: 1.8rem 1.25rem 1.6rem;
  border-radius: 28px;
  border: 1px solid var(--panel-line);
  background:
    radial-gradient(110% 70% at 50% 0%, hsl(180 74% 63% / .12), transparent 60%),
    linear-gradient(145deg, hsl(240 4% 19% / .96), hsl(240 6% 10% / .98) 52%, hsl(240 5% 14% / .96));
  box-shadow:
    var(--emb),
    0 0 44px hsl(180 74% 63% / .12),
    0 0 54px hsl(258 85% 66% / .07),
    0 30px 80px -35px hsl(180 74% 63% / .3),
    0 24px 70px hsl(0 0% 0% / .34);
  text-align: center;
}
.fcard__title {
  font-size: clamp(1.4rem, 5.9vw, 1.85rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.01em;
}
.fcard__sub { margin-top: .5rem; font-size: .94rem; color: var(--muted); }
.fcard .btn-cta { width: min(100%, 400px); margin-top: 1.2rem; }

/* =========================================================
   21 — FOOTER
   ========================================================= */
.footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, hsl(228 8% 11%), hsl(230 9% 8%));
  padding: 2.2rem 0 2.6rem;
  text-align: center;
}
.footer__logo { height: 20px; width: auto; margin-inline: auto; opacity: .95; }
.footer__tag {
  margin: .9rem auto 0;
  max-width: 30rem;
  font-size: .82rem; color: var(--muted);
}
.footer__links {
  margin-top: 1rem;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .4rem 1.4rem;
  font-size: .8rem; font-weight: 600;
}
.footer__links a { color: var(--muted); }
.footer__links a:hover { color: var(--fg); }
.footer__legal, .footer__disclaimer {
  margin: 1rem auto 0;
  max-width: 34rem;
  font-size: .7rem; color: var(--dim); line-height: 1.5;
}
.footer__copy { margin-top: 1.1rem; font-size: .74rem; color: var(--dim); }

/* =========================================================
   22 — THANK YOU (thanks.html)

   Where a successful payment lands. Mobile-first like the rest of the
   funnel; success reads from the --sky ramp, never green.
   ========================================================= */
.ty { padding: 1.6rem 0 2.2rem; position: relative; }
.ty::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 240px;
  background-image:
    linear-gradient(to right, hsl(196 70% 60% / .1) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(196 70% 60% / .1) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
  pointer-events: none;
}
.ty .wrap { position: relative; z-index: 1; }

.ty__seal {
  width: 74px; height: 74px;
  margin: 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-sky);
  color: hsl(205 60% 8%);
  box-shadow:
    0 0 0 2px var(--ring-c),
    inset 0 2px 0 hsl(0 0% 100% / .5),
    0 0 0 9px hsl(196 92% 62% / .14),
    0 16px 46px -10px hsl(196 92% 62% / .55);
  animation: sealIn .45s cubic-bezier(.2, .9, .3, 1.3) both;
}
.ty__seal svg { width: 36px; height: 36px; }
@keyframes sealIn { from { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .ty__seal { animation: none; } }

.ty__title {
  margin-top: 1rem;
  text-align: center;
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 900; line-height: 1.08; letter-spacing: -.02em;
}
.ty__title b { color: var(--sky); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .ty__title b {
    background: var(--grad-sky-txt);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.ty__sub {
  margin: .7rem auto 0;
  max-width: 30rem;
  text-align: center;
  font-size: .96rem; color: var(--muted); line-height: 1.55;
}
.ty__sub strong { color: var(--fg); }

/* Receipt line */
.tyorder {
  margin: 1.15rem auto 0;
  max-width: 30rem;
  padding: .9rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--panel-line);
  background: var(--card-grad);
  box-shadow: var(--emb);
}
.tyorder__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .84rem;
}
.tyorder__row + .tyorder__row { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.tyorder__k { color: var(--dim); }
.tyorder__v { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.tyorder__v--paid { color: var(--sky); }

/* Welcome video — sized off its own aspect so a vertical or a
   landscape cut both sit correctly on a phone. */
.tyvid { margin-top: 1.6rem; }
.tyvid__head {
  text-align: center;
  font-size: 1.05rem; font-weight: 800; letter-spacing: .01em;
}
.tyvid__note { margin-top: .3rem; text-align: center; font-size: .82rem; color: var(--dim); }
.tyvid__frame {
  position: relative;
  margin: .9rem auto 0;
  width: min(100%, 460px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid hsl(215 25% 70% / .28);
  background: #000;
  box-shadow:
    0 0 0 2px var(--ring-c),
    inset 0 1px 0 hsl(0 0% 100% / .12),
    0 0 44px hsl(196 92% 62% / .1),
    0 28px 70px -30px hsl(0 0% 0% / .95);
}
.tyvid__video {
  width: 100%;
  max-height: 72vh;
  height: auto;
  object-fit: contain;
  background: #000;
}
.tyvid__unmute {
  position: absolute; inset: 0; margin: auto; z-index: 3;
  width: fit-content; height: fit-content;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .9rem 1.3rem 1rem;
  border: 2px solid var(--sky);
  border-radius: 14px;
  background: linear-gradient(180deg, hsl(202 48% 10% / .82), hsl(208 52% 5% / .86));
  color: var(--sky);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 0 4px hsl(196 92% 62% / .15), 0 18px 50px -18px hsl(0 0% 0% / .9);
}
.tyvid__unmute svg { width: 28px; height: 28px; }
.tyvid__unmute-cta { font-size: .84rem; font-weight: 800; letter-spacing: .04em; }

/* What happens now */
.tysteps { margin-top: 1.7rem; display: grid; gap: .7rem; }
.tystep {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .95rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--panel-line);
  background: var(--card-grad);
  box-shadow: var(--emb);
  text-align: left;
}
.tystep__n {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-violet);
  color: hsl(258 60% 12%);
  font-size: .8rem; font-weight: 900;
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .45);
}
.tystep p { font-size: .88rem; line-height: 1.5; color: var(--muted); }
.tystep strong { display: block; color: var(--fg); font-size: .94rem; margin-bottom: .1rem; }

/* Join the Discord. The only thing on this page that actually hands
   something over, so it gets a card rather than another line in the
   step list. The glyph is painted from the same violet ramp as the
   step numbers instead of Discord's own blurple — the page has one
   colour system and a brand fill would sit outside it. */
.tydisc {
  margin: 1.2rem auto 0;
  max-width: 30rem;
  padding: 1.05rem 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid var(--panel-line);
  background: var(--card-grad);
  box-shadow: var(--emb);
  text-align: left;
}
.tydisc__head { display: flex; gap: .8rem; align-items: flex-start; }
.tydisc__glyph {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--grad-violet);
  color: hsl(258 60% 12%);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .45);
}
.tydisc__glyph svg { width: 21px; height: 21px; }
.tydisc__title { font-size: .98rem; font-weight: 800; color: var(--fg); }
.tydisc__note { margin-top: .16rem; font-size: .85rem; line-height: 1.5; color: var(--muted); }
.tydisc .btn-cta { width: 100%; margin-top: .95rem; }
.tydisc__done {
  margin-top: .95rem;
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .75rem;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: hsl(0 0% 100% / .03);
}
.tydisc__avatar {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--card-2);
}
.tydisc__who { display: grid; min-width: 0; }
.tydisc__who strong { font-size: .9rem; color: var(--fg); overflow-wrap: anywhere; }
.tydisc__role { font-size: .78rem; font-weight: 600; color: var(--sky); }
.tydisc__err { margin-top: .7rem; font-size: .82rem; line-height: 1.5; color: hsl(0 90% 82%); }

/* The join and the marketplace are a sequence, not two equal choices —
   this is the word that says so. It only exists when the card above it
   does, and it pulls the marketplace button up under itself. */
.tythen {
  margin-top: .8rem;
  text-align: center;
  font-size: .78rem; font-style: italic;
  color: var(--dim);
}
.tythen:not([hidden]) + .ty__actions { margin-top: .55rem; }

.ty__actions { margin-top: 1.5rem; display: grid; gap: .65rem; justify-items: center; }
.ty__actions .btn-cta { width: min(100%, 400px); }
.ty__help {
  margin-top: 1.4rem;
  text-align: center;
  font-size: .82rem; color: var(--dim); line-height: 1.6;
}
.ty__help a { color: var(--sky); font-weight: 600; }

/* Payment-did-not-complete state */
.tyfail {
  margin: 1.2rem auto 0;
  max-width: 32rem;
  padding: 1.2rem 1.1rem;
  border-radius: 20px;
  border: 1px solid hsl(0 60% 55% / .45);
  background: linear-gradient(145deg, hsl(0 28% 17% / .95), hsl(0 30% 10% / .97));
  box-shadow: var(--emb);
  text-align: center;
}
.tyfail__title { font-size: 1.2rem; font-weight: 800; color: hsl(0 90% 82%); }
.tyfail p { margin-top: .5rem; font-size: .88rem; color: hsl(0 20% 82%); line-height: 1.55; }
.tyfail .btn-cta { margin-top: 1rem; width: min(100%, 340px); }

@media (min-width: 480px) {
  .ty { padding-top: 2.2rem; }
  .tysteps { gap: .8rem; }
}