/* ==========================================================================
   Seb Futures — core stylesheet

   Charcoal + neon purple. The background is a lifted charcoal rather than
   pure black, and depth comes from neon glows in the accent colour.

   ONE purple, hue 254, and light. Being light it reads straight onto the
   near-black page as text (11.8:1) — but anything sitting ON it must be dark:
     --purple      #cabbfb  L86  fills, marks, glows, and text.
     --purple-deep #a58cf8  L76  the deeper end of every gradient.
     --purple-ink  #16111f       text on a purple fill. White there is
                                 1.75:1 and must never be used.
   Never hard-code a purple hex outside this block. The rgba(202, 187, 251)
   values below are the purple at partial alpha.
   Titles and key figures are lavender; body copy is a light gray so long-form
   reading stays comfortable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Charcoal — lifted off pure black so surfaces can stack */
  --bg:            #030305;
  --bg-elev:       #101015;  /* unused while section banding is off */
  --surface:       #101015;
  --surface-2:     #17171e;
  --border:        #23232d;
  --border-soft:   #191921;
  --paper-deep:    #060609;  /* unused: the footer sits on --bg now */

  /* Lavender */
  --purple:        #cabbfb;  /* fills, marks, glow, and text */
  --purple-bright: #cabbfb;  /* same colour; kept so existing rules resolve */
  --purple-deep:   #a58cf8;  /* gradient ends — same hue, one step down */
  --purple-ink:    #16111f;  /* text ON a purple fill: 10.2:1. White is 1.8:1 */
  --purple-soft:   rgba(202, 187, 251, 0.14);
  --purple-line:   rgba(202, 187, 251, 0.38);
  --purple-ring:   rgba(202, 187, 251, 0.36);
  --purple-glow:   rgba(202, 187, 251, 0.45);

  /* Order-flow colours */
  --blue:          #4d84ff;
  --red:           #ff5c78;
  --red-ink:       #ff7a90;
  --green:         #2fd4b4;
  --green-ink:     #4fe3c6;

  /* Ink */
  --text:          #f4f4f8;
  --text-mid:      #c8c8d8;
  --text-dim:      #9a9ab0;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* One typeface across the whole site. The old --font-mono is gone; if you
     ever want tabular figures again, use font-variant-numeric, not a second
     family. */

  --radius:    16px;
  --radius-sm: 11px;
  --radius-lg: 24px;

  /* On charcoal a shadow reads as depth, a glow reads as light */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow:    0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);

  --glow-sm:   0 0 12px rgba(202, 187, 251, 0.5);
  --glow-md:   0 0 22px rgba(202, 187, 251, 0.6);
  --glow-lg:   0 0 42px rgba(202, 187, 251, 0.55);

  /* The neon "lit" look on type */
  --glow-text: 0 0 18px rgba(202, 187, 251, 0.55), 0 0 38px rgba(202, 187, 251, 0.35);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

}

/* --------------------------------------------------------------------------
   1c. The ground

   A faint square grid, fixed so it does not slide under the content, plus a
   vignette that darkens the edges and a single soft purple bloom behind the
   hero. Everything here is one or two percent of white — enough that the page
   is not a flat black rectangle, not enough to compete with the type.
   -------------------------------------------------------------------------- */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 76px 76px;
  /* Fades the grid out top and bottom so it never crosses the headline */
  -webkit-mask-image: radial-gradient(ellipse 120% 85% at 50% 32%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 120% 85% at 50% 32%, #000 30%, transparent 78%);
}

body::after {
  background:
    radial-gradient(ellipse 60% 42% at 50% 8%, rgba(202, 187, 251, 0.10), transparent 70%),
    radial-gradient(ellipse 100% 60% at 50% 0%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

/* Everything real sits above the ground */
.promo, .nav, main, footer { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* [hidden] is only display:none in the UA sheet, so any author `display`
   silently defeats it. This keeps the attribute authoritative. */
[hidden] { display: none !important; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text-mid);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection {
  background: var(--purple);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--purple-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Typography
   Titles carry the neon. h1/h2 also glow; h3 does not, so the hierarchy
   still reads when a page has a dozen card headings.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  line-height: 1.12;
  letter-spacing: -0.032em;
  font-weight: 800;
  color: var(--purple-bright);
}

h1, h2 { text-shadow: var(--glow-text); }

h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.85rem); }
h3 { font-size: clamp(1.12rem, 1.9vw, 1.32rem); letter-spacing: -0.02em; }

p { color: var(--text-mid); }

.lede {
  font-size: clamp(1.04rem, 1.6vw, 1.2rem);
  font-weight: 500;
  color: var(--text);
  max-width: 62ch;
}

.mono { font-variant-numeric: tabular-nums; }

.up   { color: var(--green-ink); }
.down { color: var(--red-ink); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 24px;
}

.container--narrow { max-width: 820px; }

.section { padding-block: clamp(68px, 9vw, 116px); }
.section--tight { padding-block: clamp(52px, 6vw, 78px); }

/* Section banding is off: the whole page sits on one flat --bg. The class is
   still on the markup, so restoring the alternating bands is this rule alone:
     background: var(--bg-elev);
     border-block: 1px solid var(--border-soft);
   Cards keep their own --surface fill, which is what separates content now. */
.section--alt { background: transparent; }

.section__head {
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head p { margin-top: 16px; }

/* Split heading — plain lead word, neon payoff, echoing the hero title */
.h2--split { color: var(--text); text-shadow: none; }
.h2--split em {
  font-style: normal;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
}

/* Eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
  padding: 0;
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: var(--glow-sm);
}

/* Kept as a positioning context; the ambient glows it isolated are gone. */
.glow-bg { position: relative; isolation: isolate; }

/* --------------------------------------------------------------------------
   6. Navigation — floating bubble with a neon ring
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px 24px 0;
}

/* A capsule floating over the page, only as wide as its contents. */
.nav__bubble {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 9px 9px 20px;
  background: rgba(16, 16, 22, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 38px -12px rgba(0, 0, 0, 0.9);
  transition: background 0.3s, border-color 0.3s;
}

.nav.is-stuck .nav__bubble {
  background: rgba(12, 12, 17, 0.94);
  border-color: rgba(255, 255, 255, 0.1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: 0.97rem;
  letter-spacing: -0.02em;
  color: var(--text);
  flex-shrink: 0;
}

/* The wordmark, same split as the hero: SEB in the brand purple, FUTURES
   in white. No mark beside it -- the word is the logo. */
.brand__text { color: #fff; white-space: nowrap; font-weight: 800; }
.brand__text span { color: var(--purple); }

/* The hairline between wordmark and links, as in the reference */
.nav__rule {
  width: 1px;
  height: 22px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* The CTA now sits outside .nav__links, at the capsule's right end */
.nav__cta {
  flex-shrink: 0;
  gap: 6px;
  padding: 10px 18px;
  font-size: 0.85rem;
  border-radius: 999px;
}

.nav__cta svg { width: 15px; height: 15px; }

.nav__links > a {
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-mid);
  transition: color 0.18s, background 0.18s, text-shadow 0.18s;
}

.nav__links > a:hover {
  color: var(--purple-bright);
  background: var(--purple-soft);
}

.nav__links > a.active {
  color: var(--purple-bright);
  font-weight: 600;
  background: var(--purple-soft);
  text-shadow: var(--glow-text);
}

.nav__links > a.nav__cta {
  color: var(--purple-ink);
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  box-shadow: var(--glow-sm);
  margin-left: 4px;
}

.nav__links > a.nav__cta:hover {
  color: var(--purple-ink);
  box-shadow: var(--glow-md);
}

/* Highlighted nav item — a slow neon pulse ringing the link so the
   giveaway reads as the standout action without shouting. */
.nav__links > a.nav__hl {
  color: var(--purple-bright);
  font-weight: 600;
  background: var(--purple-soft);
  animation: nav-hl 2.6s ease-in-out infinite;
}

@keyframes nav-hl {
  0%, 100% {
    box-shadow: 0 0 0 1px var(--purple-line), 0 0 9px rgba(202, 187, 251, 0.3);
    text-shadow: 0 0 10px rgba(202, 187, 251, 0.3);
  }
  50% {
    box-shadow: 0 0 0 1px var(--purple), 0 0 22px 2px rgba(202, 187, 251, 0.75);
    text-shadow: var(--glow-text);
  }
}

/* Hold the pulse while the pointer is on it, so it is easy to read */
.nav__links > a.nav__hl:hover { animation-play-state: paused; }

/* Right column — socials */
.nav__social {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}

.nav__social a {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--text);
  transition: color 0.2s, background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}

.nav__social a:hover {
  color: var(--purple-ink);
  background: var(--purple);
  transform: translateY(-2px);
  box-shadow: var(--glow-md);
}

.nav__social svg { width: 17px; height: 17px; }

.nav__toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--purple-soft);
  border: 1px solid var(--purple-line);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.nav__toggle span {
  display: block;
  width: 16px;
  height: 1.7px;
  background: var(--purple-bright);
  border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.18s;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.18s var(--ease), background 0.18s, border-color 0.18s, box-shadow 0.25s, color 0.18s;
}

/* Inline SVGs carry no intrinsic size, so inside a flex row they collapse */
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Dark ink on the lavender fill — the reverse of the old neon. White on
   #cabbfb is 1.75:1; --purple-ink is 10.2:1 on it and 6.5:1 on the gradient's
   deeper end. Never put white text on a purple fill. */
.btn--primary {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: var(--purple-ink);
  box-shadow: var(--glow-md), 0 4px 14px rgba(0, 0, 0, 0.45);
}

.btn--primary:hover {
  box-shadow: var(--glow-lg), 0 8px 22px rgba(0, 0, 0, 0.5);
}

.btn--ghost {
  border-color: var(--purple-line);
  color: var(--purple-bright);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--purple);
  background: var(--purple-soft);
  box-shadow: var(--glow-sm);
}

/* Discord blurple — white text clears 4.6:1 on it */
.btn--discord {
  background: #5865f2;
  color: #fff;
  box-shadow: 0 0 20px rgba(88, 101, 242, 0.45), 0 4px 14px rgba(0, 0, 0, 0.45);
}

.btn--discord:hover {
  background: #4752c4;
  box-shadow: 0 0 32px rgba(88, 101, 242, 0.6), 0 8px 22px rgba(0, 0, 0, 0.5);
}

.btn--light {
  background: var(--text);
  color: #141419;
}

.btn--light:hover { background: #fff; }

.btn--sm { padding: 9px 17px; font-size: 0.85rem; }
.btn--lg { padding: 17px 36px; font-size: 1.02rem; border-radius: 999px; }
.btn--lg svg { width: 21px; height: 21px; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   7b. Head card

   Centres and constrains each page's title block. No border or panel fill —
   readability now comes from the darker page ground, which puts the title at
   8.2:1 on its own.
   -------------------------------------------------------------------------- */
.head-card {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(8px, 2vw, 20px);
}

.head-card--hero { max-width: 780px; }

.head-card .lede { margin-inline: auto; }
.head-card .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(56px, 11vw, 132px) 0;
  text-align: center;
  overflow: hidden;
}

/* The wordmark. Flat colour rather than the gradient the sentence used to
   carry: a gradient reads as a treatment applied to a phrase, and this is a
   name, so it should be one solid weight. */
.hero__title {
  font-size: clamp(2.5rem, 7.4vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-bottom: 20px;
  color: #ffffff;
  text-shadow: none;
  white-space: nowrap;
}

.hero__title span { color: var(--purple); }

.hero__sub {
  max-width: 44ch;
  margin: 0 auto 34px;
  font-size: clamp(1.02rem, 1.55vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-mid);
}

/* The framed server screenshot under the fold. Tall on purpose: the
   reference crops it at the viewport edge rather than showing all of it. */
.hero__shot {
  margin: clamp(46px, 7vw, 86px) auto 0;
  max-width: 1010px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  border-bottom: 0;
  overflow: hidden;
  background: rgba(14, 14, 20, 0.8);
  box-shadow: 0 -2px 60px -12px rgba(202, 187, 251, 0.22),
              0 -30px 80px -40px rgba(0, 0, 0, 0.9);
}

.hero__shot img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Discord panel

   A replica of the real server, not an embed. Three columns: server rail,
   channel sidebar, message pane. The channel buttons are ordinary tabs, so
   initTabs() drives them and arrow-key navigation comes free.
   -------------------------------------------------------------------------- */
.dui {
  display: grid;
  grid-template-columns: 62px 232px minmax(0, 1fr);
  height: clamp(390px, 56vw, 612px);
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.4;
  background: #131318;
  color: #d5d6db;
}

.dui__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding-top: 13px;
  background: #0a0a0d;
}

.dui__rail-server {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--purple);
  color: var(--purple-ink);
  font-weight: 800;
  font-size: 0.92rem;
}

.dui__rail-sep { width: 20px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
.dui__rail-dot { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); }

.dui__side { background: #17171c; display: flex; flex-direction: column; min-height: 0; }

.dui__servername {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.86rem;
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
}

/* The list is longer than the panel, exactly as it is in the app */
.dui .dui__channels {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 8px;
  min-height: 0;
  overflow: hidden;
}

.dui__group {
  padding: 13px 8px 4px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b8c95;
}

.dui .dui__channel {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: #8b8c95;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}

.dui .dui__channel:hover { background: rgba(255, 255, 255, 0.04); color: #d5d6db; }

.dui .dui__channel[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: none;
}

.dui__hash  { color: #72737c; font-weight: 400; }
.dui__bar   { color: #4d4e56; }
.dui__emoji { font-size: 0.86em; line-height: 1; }
.dui__cname { overflow: hidden; text-overflow: ellipsis; }
.dui__lock  { margin-left: auto; display: flex; opacity: 0.55; }
.dui__lock svg { width: 11px; height: 11px; }

.dui__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.dui__top {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 46px;
  padding: 0 16px;
  flex-shrink: 0;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.dui__topname { margin-right: 4px; }

.dui__presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 500;
  color: #9a9ba3;
  white-space: nowrap;
}

.dui__presence-more { display: inline; }
.dui__presence i { width: 7px; height: 7px; border-radius: 50%; background: #2fd4b4; }
.dui__presence-sep { color: #5c5d65; }

/* Anchored to the bottom like a real channel; the oldest line fades out of
   the top rather than being chopped mid-glyph. */
.dui__feed {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8%);
}

.dui__msg { display: flex; gap: 12px; padding: 5px 0; }

.dui__msg--mention {
  background: rgba(250, 166, 26, 0.07);
  box-shadow: inset 2px 0 0 #faa61a;
  margin-inline: -16px;
  padding-inline: 16px;
}

.dui__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.dui__avatar--a   { background: #b4544e; }
.dui__avatar--b   { background: #4e6fb4; }
.dui__avatar--c   { background: #5a5f6b; }
.dui__avatar--seb { background: var(--purple); color: var(--purple-ink); }

.dui__meta { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.dui__author { font-weight: 600; color: #f2f3f5; }
.dui__author--red  { color: #ed6a5e; }
.dui__author--gold { color: #f0b232; }

.dui__app {
  position: relative;
  top: -1px;
  padding: 1px 4px;
  border-radius: 3px;
  background: #5865f2;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.dui__meta time { font-size: 0.68rem; color: #85868f; }
.dui__text { color: #d5d6db; }

.dui__text b {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(88, 101, 242, 0.3);
  color: #c9cdfb;
  font-weight: 500;
}

.dui__reply {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
  font-size: 0.73rem;
  color: #85868f;
}

/* The elbow Discord draws from a reply up to its parent */
.dui__reply::before {
  content: "";
  width: 13px;
  height: 7px;
  flex-shrink: 0;
  border-left: 2px solid #4d4e56;
  border-top: 2px solid #4d4e56;
  border-top-left-radius: 5px;
  transform: translateY(3px);
}

.dui__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 6px;
  font-size: 0.66rem;
  font-weight: 600;
  color: #85868f;
}

.dui__divider::before,
.dui__divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.07); }

.dui .dui__shot {
  display: block;
  width: min(100%, 280px);
  height: auto;
  margin-top: 6px;
  border-radius: 7px;
}

.dui__react {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(88, 101, 242, 0.16);
  border: 1px solid rgba(88, 101, 242, 0.5);
  font-size: 0.72rem;
  font-weight: 600;
  color: #c9cdfb;
}

.dui__feed--locked {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  mask-image: none;
  -webkit-mask-image: none;
}

.dui__lock-mark { color: var(--purple); opacity: 1; }
.dui__lock-mark svg { width: 28px; height: 28px; }
.dui__lock-title { font-weight: 700; color: #fff; }
.dui__lock-copy { color: #9a9ba3; margin-bottom: 4px; }

.dui__compose {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  margin: 10px 16px 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #1e1f25;
  color: #909199;   /* 4.5:1 on the compose bar */
  font-size: 0.8rem;
}

.dui__plus {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #b5bac1;
  color: #1e1f25;
  font-weight: 700;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   The panel on a phone

   The phone gets the desktop panel, not a rearranged one: same server rail,
   same vertical channel list, same header, same compose bar. It is laid out
   at a fixed design size and then scaled down as a single piece, so every
   padding, radius and avatar shrinks by the same factor and the composition
   is preserved exactly.

   The tracks are narrower than desktop's 62/232, and the design width is set
   by the header, which cannot wrap: the widest channel, #announcements, needs
   334px of feed before "32 online - 309 members" starts being clipped. That
   is also why the breakpoint is 700 and not 620 -- the native layout fits
   the panel down to 620, but its feed drops under 334px at about 690, so the
   header would clip on the longer channels in between. 56/196 leaves the
   longest channel name un-ellipsised with a little slack.

   initDuiScale() sets --dui-k from the wrapper's width. The aspect-ratio
   reserves the right box before it runs, so the page never jumps, and the
   max-width means the panel stops growing at its design size rather than
   being scaled up past it.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .hero__shot {
    position: relative;
    max-width: 592px;
    margin-inline: auto;
    aspect-ratio: 592 / 600;
  }

  .dui {
    position: absolute;
    top: 0;
    left: 0;
    width: 592px;
    height: 600px;
    grid-template-columns: 56px 196px minmax(0, 1fr);
    transform: scale(var(--dui-k, 1));
    transform-origin: top left;
  }
}

.hero__shot-inner {
  display: grid;
  place-items: center;
  min-height: clamp(220px, 34vw, 400px);
  background:
    linear-gradient(180deg, rgba(202, 187, 251, 0.05), transparent 60%),
    repeating-linear-gradient(-45deg,
      rgba(255, 255, 255, 0.018) 0 12px, transparent 12px 24px);
}

.hero__shot-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Bold, white — sits between the title and the lede */
.hero__kicker {
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 14px;
}

.hero .lede { margin-bottom: 32px; }

/* --------------------------------------------------------------------------
   8a. Typing animation

   The animated word is aria-hidden and a static .sr-only list carries the
   same content, so a screen reader hears the words once instead of being
   interrupted on every keystroke.
   -------------------------------------------------------------------------- */
/* The typed word changes length, which moves the line's wrap point and pops
   the paragraph between two and three lines, shoving the page up and down on
   a loop. The reserved width lives on the SLOT, not on the word: the slot
   holds the line at a constant length while the word, caret and full stop sit
   flush left inside it, so the stop travels with the last letter instead of
   parking at a fixed offset. Measured: "Funded Accounts" is the longest at
   11.6ch — raise this if a longer word is added to data-typer. */
.typer-slot {
  display: inline-block;
  white-space: nowrap;
}

.typer {
  color: var(--purple-bright);
  font-weight: 700;
  text-shadow: var(--glow-text);
  white-space: nowrap;
}


.typer__caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.14em;
  background: var(--purple-bright);
  box-shadow: var(--glow-sm);
  animation: caret-blink 1.05s steps(1) infinite;
}

@keyframes caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* The full stop belongs to the sentence, not the typed word */
.typer__stop {
  color: var(--text);
  font-weight: 500;
  text-shadow: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Testimonial wall — three vertical marquees

   Same trick as the promo bar used, turned 90 degrees: each track holds
   its set twice and travels exactly -50%, so the second copy lands where the
   first began and there is no seam. The middle column runs the other way,
   which stops the three reading as one sliding block.
   -------------------------------------------------------------------------- */
.tcols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  height: clamp(460px, 62vw, 680px);
  overflow: hidden;
  padding-inline: clamp(16px, 4vw, 40px);
  max-width: 1240px;
  margin-inline: auto;
  /* the wall fades out rather than being cut at top and bottom */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}

.tcol { overflow: hidden; }

.tcol__track {
  display: flex;
  flex-direction: column;
  gap: 18px;
  will-change: transform;
}

.tcol__track--up   { animation: tscroll-up 66s linear infinite; }
.tcol__track--down { animation: tscroll-down 72s linear infinite; }

@keyframes tscroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@keyframes tscroll-down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

.tcol__track img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   Whop panel — rides in the middle column with the screenshots

   Whop's own red, not the site purple, for the same reason the Discord
   button stays blurple: it has to read as Whop.
   -------------------------------------------------------------------------- */
.whop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 20px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse 120% 70% at 50% 118%, #e8402b 0%, rgba(232, 64, 43, 0.35) 42%, transparent 72%),
    #0e0e13;
}

/* 1.2rem, not 1.05rem: white on Whop's red is 4.04:1, which clears AA for
   large text but not for small, and bold text only counts as large from
   18.66px. At 1.05rem this sat 1.9px under that line. */
.whop__brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.whop__mark { width: 26px; height: 16px; color: #ff4d2d; flex-shrink: 0; }

.whop__score {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.whop__star { color: #e8402b; font-size: 2rem; }
.whop__count { font-size: 0.84rem; color: var(--text-dim); }

/* Stands in until there is a real score — never a made-up one */
.whop__soon {
  margin: 10px 0 2px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.whop__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 11px 20px;
  border-radius: 999px;
  background: #fff;
  color: #14141a;
  font-size: 0.85rem;
  font-weight: 700;
  transition: transform 0.18s var(--ease), box-shadow 0.2s;
}

.whop__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); }
.whop__btn .whop__mark { width: 21px; height: 13px; }
.whop__btn span { font-weight: 800; }

.quotes__more { margin-top: 30px; }

/* --------------------------------------------------------------------------
   Testimonial wall (testimonials.html)

   Columns rather than grid, so cards of different lengths pack without
   leaving the ragged gaps a row-based grid would. Overrides the carousel's
   fixed card width.
   -------------------------------------------------------------------------- */
.quote-wall {
  column-width: 330px;
  column-gap: 20px;
}

.quote-wall .quote,
.quote-wall .shot {
  width: auto;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   Screenshot testimonial

   The image is the testimonial, so it is never cropped — width/height on the
   <img> reserve the right box while it loads, which stops the column layout
   reflowing under the reader.
   -------------------------------------------------------------------------- */
.shot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}


.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot__who {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-top: 1px solid var(--border-soft);
}

.shot__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--purple-soft);
  border: 1px solid var(--purple-line);
  color: var(--purple-bright);
  font-size: 0.76rem;
  font-weight: 700;
}

.shot__name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}

/* Results disclaimer under the wall */
.wall-note {
  margin-top: 26px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-dim);
  text-align: center;
}

.back-row { margin-bottom: 22px; }
.back-row--end { margin: 34px 0 0; text-align: center; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-mid);
  transition: color 0.18s;
}

.back-link:hover { color: var(--purple-bright); }
.back-link svg { width: 17px; height: 17px; }
.back-row--end .btn svg { width: 17px; height: 17px; }

/* Three-up variant for the highlight row */
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --------------------------------------------------------------------------
   9. Stat strip
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  /* auto-fit, so the row adapts to however many .stat blocks exist
     (home has 3, Discord has 4) instead of leaving an empty column */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

/* No panel, no border — each figure stands on the page as its own mark */
.stat { padding: 10px 10px; text-align: center; }

.stat__num {
  font-size: clamp(2.6rem, 5vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
  line-height: 1.1;
}

.stat__label {
  margin-top: 10px;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-mid);
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s;
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--purple-line);
  box-shadow: var(--glow-md), var(--shadow-lg);
}

.card__icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--purple-soft);
  border: 1px solid var(--purple-line);
  color: var(--purple-bright);
  margin-bottom: 18px;
}

.card__icon svg { width: 19px; height: 19px; }

.card h3 { margin-bottom: 9px; }
.card p { font-size: 0.925rem; }

/* Numbered step cards */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  counter-reset: step;
}

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  transition: transform 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s;
}

.step:hover {
  transform: translateY(-5px);
  border-color: var(--purple-line);
  box-shadow: var(--glow-md), var(--shadow-lg);
}

.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
  margin-bottom: 14px;
}

.step h3 { margin-bottom: 8px; }
.step p { font-size: 0.9rem; }

/* Feature list with checkmarks */
.check-list { display: grid; gap: 13px; }

.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--text-mid);
}

.check-list li::before {
  content: "";
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  border-radius: 50%;
  background-color: var(--purple-soft);
  border: 1px solid var(--purple-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b06ff7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

.check-list li b { color: var(--text); font-weight: 600; }

/* Split layout */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 62px);
  align-items: center;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
}

.panel--light {
  background: var(--text);
  border-color: var(--text);
}

.panel--light h3 { color: #141419; text-shadow: none; }
.panel--light p { color: #4a4d57; }

/* --------------------------------------------------------------------------
   10b. Pricing tiers
   -------------------------------------------------------------------------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 20px;
}

.tier {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  transition: transform 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s;
}

.tier:hover {
  transform: translateY(-4px);
  border-color: var(--purple-line);
  box-shadow: var(--glow-sm), var(--shadow);
}

/* The middle tier carries the eye */
.tier--featured {
  border-color: var(--purple-line);
  box-shadow: var(--glow-md), var(--shadow-lg);
}

.tier__badge {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple-ink);
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 20px;
  box-shadow: 0 0 14px rgba(202, 187, 251, 0.45);
}

/* Scaling from the left edge keeps it anchored to the card, and transform
   costs no layout, so the tier heading below never shifts. */
.tier__badge--pulse {
  transform-origin: left center;
  animation: tier-zoom 2.6s var(--ease) infinite;
}

@keyframes tier-zoom {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 14px rgba(202, 187, 251, 0.45); }
  50%      { transform: scale(1.16); box-shadow: 0 0 26px rgba(202, 187, 251, 0.8); }
}

.tier__name {
  font-size: clamp(1.16rem, 2vw, 1.3rem);
  margin-bottom: 14px;
}

.tier__sub {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  text-shadow: none;
}

.tier__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  min-height: 52px;
}

.tier__was {
  font-size: 1rem;
  color: var(--text-dim);
  text-decoration: line-through;
}

.tier__amount {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
}

/* Wordy tiers get a readable size instead of the big numeral */
.tier__amount--text {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.tier__per {
  font-size: 0.86rem;
  color: var(--text-dim);
}

.tier__note {
  font-size: 0.84rem;
  color: var(--text-dim);
  margin-top: 14px;
}

.tier__list { margin: 18px 0 28px; }

/* Buttons line up across cards regardless of list length */
.tier .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   Locked tiers

   The paid plans are taped off until they exist. The cover fills the card so
   nothing behind it is clickable, and their Get Access control is a <span>
   rather than an <a>, so nothing behind it is tabbable either. Removing
   .tier--locked and the .tier__lock element opens a tier back up.
   -------------------------------------------------------------------------- */
.tier--locked {
  position: relative;
  overflow: hidden;
}

/* No lift, and no pulsing badge shimmering away under the cover */
.tier--locked:hover { transform: none; }
.tier--locked .tier__badge--pulse { animation: none; }

.tier__lock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  cursor: not-allowed;
  background: rgba(8, 8, 12, 0.74);
  -webkit-backdrop-filter: blur(3px) saturate(0.45);
  backdrop-filter: blur(3px) saturate(0.45);
}

/* Slung across the card. Hazard stripes ride the band's edges so it reads as
   cordoned off while the label itself stays on a flat, legible ground. */
.tier__tape {
  position: relative;
  width: 132%;
  padding: 15px 12px;
  transform: rotate(-8deg);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
  background: rgba(12, 12, 17, 0.97);
  box-shadow: 0 0 30px rgba(202, 187, 251, 0.35), 0 10px 30px rgba(0, 0, 0, 0.6);
}

.tier__tape::before,
.tier__tape::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(-45deg,
    var(--purple) 0 7px, rgba(202, 187, 251, 0.16) 7px 14px);
}

.tier__tape::before { top: 0; }
.tier__tape::after  { bottom: 0; }

/* Any button rendered as a disabled span */
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Discord channel list
   -------------------------------------------------------------------------- */
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
}

.channel {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s var(--ease);
}

.channel:hover {
  border-color: var(--purple-line);
  box-shadow: var(--glow-sm);
  transform: translateY(-3px);
}

.channel__hash {
  font-size: 1.05rem;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
  line-height: 1.4;
  flex-shrink: 0;
}

.channel__name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 3px;
}

.channel__desc {
  font-size: 0.84rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Schedule rows */
.schedule { display: grid; gap: 2px; }

.schedule__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-soft);
}

.schedule__row:last-child { border-bottom: 0; }

.schedule__time {
  font-size: 0.8rem;
  color: var(--purple-bright);
  letter-spacing: 0.01em;
}

.schedule__title { font-weight: 600; font-size: 0.95rem; color: var(--text); margin-bottom: 3px; }
.schedule__desc { font-size: 0.86rem; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   12. FAQ accordion
   -------------------------------------------------------------------------- */
.faq-group {
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 26px 10px;
}

.faq-group__title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 18px 0 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
}

.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item:last-child { border-bottom: 0; }

.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 0;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  transition: color 0.18s, text-shadow 0.18s;
}

.faq-item__q:hover,
.faq-item.is-open .faq-item__q {
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
}

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--purple-soft);
  border: 1px solid var(--purple-line);
  transition: background 0.22s, box-shadow 0.22s;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.6px;
  background: var(--purple-bright);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), background 0.22s;
}

.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-item.is-open .faq-item__icon {
  background: var(--purple);
  box-shadow: var(--glow-sm);
}

.faq-item.is-open .faq-item__icon::before,
.faq-item.is-open .faq-item__icon::after { background: #fff; }
.faq-item.is-open .faq-item__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-item__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.36s var(--ease);
}

.faq-item__a > div {
  padding: 0 46px 24px 0;
  font-size: 0.94rem;
  color: var(--text-mid);
}

.faq-item__a p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   13. Giveaways
   -------------------------------------------------------------------------- */
.giveaway {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--purple-line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 46px);
  overflow: hidden;
  box-shadow: var(--glow-md), var(--shadow-lg);
}

.giveaway::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 90% at 8% 0%, rgba(202, 187, 251, 0.26), transparent 62%);
  pointer-events: none;
}

.giveaway > * { position: relative; }

.giveaway__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-ink);
  background: rgba(47, 212, 180, 0.12);
  border: 1px solid rgba(47, 212, 180, 0.3);
  border-radius: 100px;
  padding: 5px 13px;
  margin-bottom: 20px;
}

.giveaway__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(47, 212, 180, 0.45); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 5px rgba(47, 212, 180, 0); }
}

.giveaway__prize {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 14px;
}

.giveaway__prize span {
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
}

.giveaway__body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

/* Countdown */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.countdown__cell {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px 8px;
  text-align: center;
}

.countdown__val {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 600;
  color: var(--purple-bright);
  text-shadow: var(--glow-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown__unit {
  margin-top: 7px;
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.countdown__label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
  text-align: center;
}

/* Winners table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

thead th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  white-space: nowrap;
}

tbody td {
  padding: 16px 20px;
  font-size: 0.9rem;
  color: var(--text-mid);
  border-bottom: 1px solid var(--border-soft);
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--purple-soft); }

td.winner { color: var(--text); font-weight: 600; }
td.prize { color: var(--purple-bright); font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Closing CTA — the arc

   A very wide, very tall box with only its top two corners rounded (the
   slash syntax gives them a vertical radius equal to the full height, which
   is what turns a rectangle into a dome). Only the crown of that dome sits
   inside the section; everything below is clipped, so the rim reads as a
   horizon. A mask fades the rim out at both ends instead of letting it end
   abruptly at the viewport edge.
   -------------------------------------------------------------------------- */
.cta {
  /* shared so the arc can be positioned from them rather than guessed at */
  --cta-pad:  clamp(78px, 11vw, 142px);
  --cta-mark: clamp(54px, 6vw, 68px);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--cta-pad) clamp(54px, 7vw, 92px);
  text-align: center;
}

.cta__arc {
  position: absolute;
  z-index: -1;
  left: 50%;
  /* the crown lands on the middle of the mark, so the tile straddles the rim */
  top: calc(var(--cta-pad) + var(--cta-mark) / 2);
  width: 190%;
  height: 1400px;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 1px solid rgba(202, 187, 251, 0.62);
  background:
    radial-gradient(ellipse 30% 22% at 50% 0%, rgba(202, 187, 251, 0.26), transparent 72%),
    linear-gradient(180deg, rgba(202, 187, 251, 0.075), transparent 30%);
  box-shadow: 0 -6px 90px -10px rgba(202, 187, 251, 0.5);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
}

/* Sits on the crown of the arc */
.cta__mark {
  display: grid;
  place-items: center;
  width: var(--cta-mark);
  height: var(--cta-mark);
  margin: 0 auto clamp(26px, 4vw, 44px);
  border-radius: clamp(16px, 2vw, 21px);
  background: linear-gradient(170deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: var(--purple-ink);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 800;
  box-shadow: 0 0 34px rgba(202, 187, 251, 0.45), 0 10px 26px rgba(0, 0, 0, 0.6);
}

.cta__title {
  font-size: clamp(1.95rem, 4.4vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #ffffff 22%, #9d9daa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.cta__sub {
  max-width: 64ch;
  margin: 0 auto clamp(26px, 3.4vw, 38px);
  font-size: clamp(0.98rem, 1.45vw, 1.1rem);
  color: var(--text-mid);
}

/* --------------------------------------------------------------------------
   15. Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-block: clamp(40px, 5vw, 66px) clamp(34px, 4vw, 52px);
  overflow: hidden;
}

.page-head h1 { margin-bottom: 18px; }
.page-head .lede { margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   15b. Tabs + giveaway entry panel
   -------------------------------------------------------------------------- */
.page-head--center { text-align: center; }
.page-head--center .lede { margin-inline: auto; }

.tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(26px, 4vw, 38px);
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
}

.tab {
  padding: 10px 30px;
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-mid);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, box-shadow 0.25s;
}

.tab:hover { color: var(--purple-bright); }

.tab[aria-selected="true"] {
  color: var(--purple-ink);
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  box-shadow: var(--glow-sm);
}

.tab-panel[hidden] { display: none; }

.entry-panel { text-align: center; }

.entry-lead {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.35;
  margin-bottom: 26px;
}

.entry-actions {
  display: grid;
  gap: 12px;
  max-width: 420px;
  margin-inline: auto;
}

.entry-note {
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.entry-note a {
  color: var(--purple-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Rules stay left-aligned even though the entry panel above is centred */
#rules .check-list { text-align: left; }

@media (max-width: 460px) {
  .tab { padding: 10px 20px; font-size: 0.86rem; }
}

/* --------------------------------------------------------------------------
   16. Disclaimer + footer
   -------------------------------------------------------------------------- */
.disclaimer {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
}

.disclaimer h4 {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--purple-bright);
  margin-bottom: 10px;
}

.disclaimer p { font-size: 0.84rem; line-height: 1.7; color: var(--text-mid); }

/* --------------------------------------------------------------------------
   Footer

   Two rows separated by a hairline, as in the reference: brand and links,
   then the copyright with the socials and the risk disclosure. No border on
   the footer itself — the arc above already marks the boundary.
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bg);
  padding-block: 0 26px;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.brand--sm { font-size: 0.95rem; gap: 9px; }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 26px;
}

.footer__nav a {
  font-size: 0.86rem;
  color: var(--text-mid);
  transition: color 0.18s;
}

.footer__nav a:hover { color: var(--purple-bright); }

.footer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer__copy { font-size: 0.78rem; color: var(--text-dim); }

.footer__end {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.socials { display: flex; gap: 7px; }

.socials a {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-mid);
  transition: color 0.2s, background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s;
}

.socials a:hover {
  color: var(--purple-ink);
  background: var(--purple);
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: var(--glow-sm);
}

.socials svg { width: 14px; height: 14px; }

.footer__risk { font-size: 0.78rem; color: var(--text-dim); max-width: 74ch; }

.footer__risk summary {
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s;
}

.footer__risk summary::-webkit-details-marker { display: none; }
.footer__risk summary:hover { color: var(--purple-bright); }
.footer__risk summary strong { font-weight: 500; }

.footer__risk p {
  margin-top: 9px;
  font-size: 0.74rem;
  line-height: 1.65;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   About — copy left, video right
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}

.about__copy h2 { margin-bottom: 18px; }
.about__copy p + p { margin-top: 14px; }
.about__copy p { font-size: 0.95rem; }

.about__media { min-width: 0; }

/* 16:9 frame. The real embed inherits these dimensions, so whatever goes in
   needs no sizing of its own. */
.vidbox {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--purple-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--glow-sm), var(--shadow-lg);
}

.vidbox::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(202, 187, 251, 0.16), transparent 70%);
  pointer-events: none;
}

.vidbox > * { position: relative; }

.vidbox iframe,
.vidbox video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vidbox__play {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--purple-soft);
  border: 1px solid var(--purple-line);
  color: var(--purple-bright);
  box-shadow: var(--glow-md);
}

.vidbox__play svg { width: 26px; height: 26px; margin-left: 3px; }

.vidbox__label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Discount cards

   All firms shown at once rather than a carousel. Each card is a column:
   branded banner, name, tagline, click-to-copy code, video slot.
   -------------------------------------------------------------------------- */
.deals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}

.deal {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0 18px 18px;
  overflow: hidden;
  transition: transform 0.28s var(--ease), border-color 0.28s, box-shadow 0.28s;
}

.deal:hover {
  transform: translateY(-4px);
  border-color: var(--purple-line);
  box-shadow: var(--glow-sm), var(--shadow);
}

/* Full-bleed banner. The gradient stands in for the firm's own artwork;
   swapping in a real image means adding background-image to the modifier. */
.deal__banner {
  display: grid;
  place-items: center;
  margin: 0 -18px 0;
  min-height: 168px;
  padding: 20px;
  position: relative;
  text-decoration: none;
  /* fades the art into the card rather than ending on a hard edge */
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}

.deal__word {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

/* Each firm's own colour, so the cards read as three different brands */
.deal__banner--alpha {
  background:
    radial-gradient(ellipse 80% 70% at 50% 110%, rgba(34, 197, 94, 0.5), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(34, 197, 94, 0.16), transparent 70%),
    #07130c;
}

.deal__banner--fundednext {
  background:
    radial-gradient(ellipse 80% 70% at 50% 110%, rgba(79, 92, 234, 0.55), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(120, 90, 240, 0.2), transparent 70%),
    #0a0c1e;
}

.deal__banner--topone {
  background:
    radial-gradient(ellipse 80% 70% at 50% 110%, rgba(202, 187, 251, 0.42), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(202, 187, 251, 0.14), transparent 70%),
    #100d18;
}

.deal__name {
  margin-top: 2px;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  text-shadow: none;
}

.deal__tag {
  margin: 8px 0 18px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-mid);
  text-align: center;
}

.deal__coderow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding: 7px 7px 7px 16px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.deal__codelabel { font-size: 0.87rem; font-weight: 600; color: var(--text); }

.deal__code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: var(--purple-ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: var(--glow-sm);
  transition: box-shadow 0.2s, transform 0.18s var(--ease);
}

.deal__code:hover { box-shadow: var(--glow-md); transform: translateY(-1px); }
.deal__code svg { width: 15px; height: 15px; }

/* The tick swaps in for the copy glyph for a moment after a successful copy */
.deal__done { display: none; }
.deal__code.is-copied .deal__copy { display: none; }
.deal__code.is-copied .deal__done { display: inline-flex; }

.deal__code--tbc {
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0;
  cursor: default;
  box-shadow: none;
}

.deal__code--tbc:hover { transform: none; box-shadow: none; }

/* Sits at the bottom of every card regardless of tagline length */
.deal__video {
  margin-top: auto;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(202, 187, 251, 0.05), transparent 65%),
    var(--surface-2);
}

.deal__video img,
.deal__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.deal__play {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--purple-soft);
  border: 1px solid var(--purple-line);
  color: var(--purple-bright);
}

.deal__play svg { width: 17px; height: 17px; margin-left: 2px; }

.deal__video figcaption {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Poster page (rejection-block-checklist.html)
   -------------------------------------------------------------------------- */
.section--top { padding-block: 0 clamp(56px, 8vw, 96px); }

.poster {
  max-width: 560px;
  margin-inline: auto;
  border: 1px solid var(--purple-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--glow-md), var(--shadow-lg);
  line-height: 0;              /* no descender gap under the image */
}

.poster img {
  width: 100%;
  height: auto;
  transition: transform 0.4s var(--ease);
}

.poster:hover img { transform: scale(1.015); }

.poster__actions { margin-top: 28px; }
.poster__actions .btn svg { width: 17px; height: 17px; }

.poster__note {
  margin: 22px auto 0;
  max-width: 56ch;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Email gate (rejection-block-checklist.html)

   Stays on one row on a desktop and stacks on a phone, where a side-by-side
   input and button leave the input too narrow to read a typed address.
   -------------------------------------------------------------------------- */
.gate {
  max-width: 460px;
  margin-inline: auto;
  text-align: center;
}

.gate__label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* Stacked rather than side by side: at the 460px the form is capped to,
   two inputs on a row leave each too narrow to read a typed address. */
.gate__fields {
  display: grid;
  gap: 10px;
}

.gate__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 16px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--purple-line);
  border-radius: 12px;
}

.gate__input::placeholder { color: var(--text-dim); }

.gate__input:focus-visible {
  outline: 2px solid var(--purple-bright);
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.06);
}

/* Chrome paints its own red ring on :invalid as you type, before you have
   finished; the form validates on submit instead. */
.gate__input:invalid { box-shadow: none; }

.gate__submit { width: 100%; margin-top: 10px; }

/* Off-screen rather than display:none -- a bot reading the DOM skips a
   hidden field but happily fills one that is merely positioned away. */
.gate__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.gate__suggest {
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--text-mid);
}

.gate__fix {
  font: inherit;
  font-weight: 700;
  color: var(--purple-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gate__error {
  margin-top: 12px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #ff9d92;
}

.gate__note {
  margin: 14px auto 0;
  max-width: 44ch;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-dim);
}


/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .nav__links > a { padding: 8px 12px; font-size: 0.875rem; }
  .nav__bubble { gap: 12px; }
}

@media (max-width: 960px) {
  .giveaway__body { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {

  /* Bubble collapses to brand | socials | burger, links become a dropdown */
  .nav__bubble {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 8px 16px;
  }

  .nav__social { margin-left: auto; }

  .nav__links {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    background: rgba(24, 24, 30, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    box-shadow:
      0 0 0 1px var(--purple-ring),
      0 0 26px 2px rgba(202, 187, 251, 0.38),
      0 12px 30px -6px rgba(0, 0, 0, 0.75);
    transform: translateY(-10px) scale(0.98);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s, transform 0.28s var(--ease), visibility 0.24s;
  }

  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__links > a { padding: 12px 16px; font-size: 0.96rem; text-align: left; }

  .nav__toggle { display: flex; }

  .schedule__row { grid-template-columns: 1fr; gap: 5px; }
  .btn-row .btn { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  .container { padding-inline: 18px; }
  .countdown { grid-template-columns: repeat(2, 1fr); }
  .faq-group { padding-inline: 18px; }
  .faq-item__a > div { padding-right: 8px; }
  .brand__text { font-size: 0.9rem; }
}

/* --------------------------------------------------------------------------
   18b. Phones

   Everything here lives inside a max-width query, so the desktop layout is
   untouched. The goal is the same design at phone scale rather than a
   different one: the desktop rhythm is built for a 1080px column and simply
   scaling it down leaves a page that is mostly empty space, so the vertical
   padding, card padding and type sizes all come down together. Nothing is
   hidden and no screenshot is cropped — only the spacing around them.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* --- vertical rhythm: the single biggest win on scroll length ---------- */
  .section        { padding-block: 40px; }
  .section--tight { padding-block: 26px; }
  .section__head  { margin-bottom: 22px; }
  .section__head p { margin-top: 9px; }
  .hero           { padding-block: 34px 0; }
  .page-head      { padding-block: 22px 18px; }
  .container      { padding-inline: 16px; }

  /* Everything on the page is centred, so the about block is too — left-rag
     copy beside centred headings was the one thing out of step. */
  .about__copy  { text-align: center; }
  .about__copy .eyebrow { justify-content: center; }

  /* The longest heading on the site. A step down is what keeps it to two
     lines instead of three at phone width. */
  .about__copy h2 { font-size: 1.27rem; }


  /* Two lines of a stat label next to one line of another sat unevenly */
  .stats { align-items: start; }

  /* --- type scale -------------------------------------------------------
     A phone is a third the width of the desktop column, so the desktop
     heading ratios (h2 is 3.1x body, h1 4.4x) cannot survive intact: an h2
     at 3x body would be 500px wide on a 358px screen. The scale below works
     from both ends instead — headings pushed to the largest size that still
     fits the longest real title on the site, body copy eased down a step —
     which restores the hierarchy without wrapping every heading.

       h3 1.43x body  (desktop 1.43x — exact)
       h2 2.00x body  (desktop 3.08x)
       h1 2.11x body  (desktop 4.43x)
       hero 2.69x     (desktop 4.97x)
     --------------------------------------------------------------------- */
  h1            { font-size: 1.85rem; }
  h2            { font-size: 1.5rem; }
  h3            { font-size: 1.25rem; }

  /* Two of the longer h2s still cannot fit one line; balance splits them
     evenly rather than leaving one orphan word. */
  h1, h2, .lede { text-wrap: balance; }
  .hero__title  { font-size: 2.35rem; margin-bottom: 14px; }
  .hero__sub    { font-size: 1rem; margin-bottom: 26px; }
  .lede         { font-size: 0.98rem; }
  .hero .lede   { margin-bottom: 22px; }

  .eyebrow      { font-size: 0.64rem; padding: 5px 12px; margin-bottom: 12px; }

  /* Body copy down a step, which is the other half of the ratio */
  .card p, .faq-item__a p, .check-list li,
  .tier__note, .footer__nav a { font-size: 0.875rem; }

  /* Two short lines beat one wrapping awkwardly mid-phrase */
  .h2--split em { display: block; }

  /* --- buttons: full width, so the tap target is the whole row ---------- */
  .btn            { padding: 12px 20px; font-size: 0.9rem; }
  .btn--lg        { padding: 14px 22px; font-size: 0.94rem; }
  .btn-row        { gap: 10px; }
  .btn-row .btn   { flex: 1 1 100%; }

  /* --- stats: keep all three on one row; stacked they ate a whole screen - */
  .stats       { grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 6px; }
  .stat        { padding: 14px 0; }
  .stat__num   { font-size: 1.56rem; letter-spacing: -0.045em; }
  .stat__label { font-size: 0.74rem; line-height: 1.3; margin-top: 5px; }

  /* --- cards ------------------------------------------------------------- */
  .card-grid   { gap: 12px; }
  .card        { padding: 20px 18px; }
  .card__icon  { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 13px; }

  /* --- pricing ----------------------------------------------------------- */
  .tiers            { gap: 14px; }
  .tier             { padding: 24px 20px 22px; }
  .tier__badge      { font-size: 0.62rem; padding: 5px 12px; margin-bottom: 14px; }
  .tier__name       { margin-bottom: 10px; }
  .tier__price      { min-height: 0; margin-bottom: 4px; }
  .tier__list       { margin: 14px 0 22px; gap: 10px; }
  .check-list li    { gap: 10px; }
  .tier__tape       { font-size: 0.72rem; letter-spacing: 0.16em; padding: 12px 8px; }

  /* --- FAQ --------------------------------------------------------------- */
  .faq-group    { padding-inline: 18px; margin-bottom: 14px; }
  .faq-item__q  { padding: 16px 0; font-size: 1rem; gap: 14px; }

  /* A 190%-wide ellipse over a 390px viewport is a tight dome; widening it
     against the same height flattens the curve back to a horizon. */
  .cta__arc { width: 330%; height: 1500px; }

  /* --- about: copy above the video ---------------------------------------- */
  .about        { grid-template-columns: 1fr; gap: 24px; }
  .about__copy p { font-size: 0.875rem; }
  .vidbox__play { width: 52px; height: 52px; }
  .vidbox__play svg { width: 22px; height: 22px; }

  /* Three columns at 390px gives ~110px cards — unreadable. Two, taller. */
  .tcols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; height: clamp(420px, 105vw, 540px); }
  .tcol__track { gap: 12px; }
  .tcol:last-child { display: none; }

  .cta__title { font-size: 1.85rem; }
  .cta__sub   { font-size: 0.96rem; }


  /* --- testimonials ------------------------------------------------------ */
  .quotes__more   { margin-top: 24px; }
  .quote-wall     { column-gap: 14px; }
  .quote-wall .shot { margin-bottom: 14px; }
  .shot__who      { padding: 10px 13px; }
  .shot__avatar   { width: 26px; height: 26px; font-size: 0.7rem; }
  .shot__name     { font-size: 0.8rem; }

  /* --- closing CTA + footer ---------------------------------------------- */
  .footer         { padding-block: 24px 20px; }
  .footer__bar    { justify-content: center; text-align: center; gap: 12px; }
  .footer__nav    { gap: 6px 16px; }
  .footer__foot   { justify-content: center; text-align: center; margin-top: 14px; }
  .disclaimer     { padding: 16px 18px; }
  .disclaimer p   { font-size: 0.8rem; }

  /* --- top bar ----------------------------------------------------------- */
  .nav__bubble      { gap: 10px; padding: 8px 8px 8px 14px; width: 100%; }
  .brand            { margin-right: auto; }
  .nav__rule        { display: none; }
  .nav__cta         { padding: 9px 14px; font-size: 0.8rem; }
  .brand__text      { font-size: 0.82rem; }
  .nav__social      { gap: 2px; }
  .nav__social a    { width: 30px; height: 30px; border-radius: 9px; }
  .nav__social svg  { width: 16px; height: 16px; }
  .nav__toggle      { width: 32px; height: 32px; border-radius: 9px; }
  .nav__links       { padding: 10px; border-radius: 16px; top: calc(100% + 9px); }
  .nav__links > a   { padding: 11px 14px; font-size: 0.92rem; }
}

/* Small phones — 360px and below */
@media (max-width: 380px) {
  .hero__title { font-size: 2.05rem; }
  h1           { font-size: 1.65rem; }
  h2           { font-size: 1.36rem; }
  h3           { font-size: 1.16rem; }
  .lede        { font-size: 0.94rem; }
  .card p, .faq-item__a p, .check-list li { font-size: 0.85rem; }
  .about__copy h2 { font-size: 1.18rem; }
  .brand__text { font-size: 0.78rem; }
  .stat__num   { font-size: 1.42rem; }
  .stat__label { font-size: 0.68rem; }
  .stat        { padding: 12px 1px; }
  .container   { padding-inline: 14px; }
}

/* Narrower than this, the sentence fits on one line for the short words but
   wraps for the long ones, which brings back the vertical jump the typing
   animation used to cause. Dropping the word onto its own line makes it two
   lines for every word, so the height is constant again. Measured: 375px and
   up is stable on one line, 360px and below is not. */
@media (max-width: 374px) {
  .hero .lede .typer-slot { display: block; }
}

/* --------------------------------------------------------------------------
   19. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }

  /* The wall stops rather than crawling */
  .tcol__track { animation: none !important; transform: none !important; }
  .tcols { height: auto; max-height: 560px; }

  /* Caret sits solid; initTyper() also skips the animation entirely */
  .typer__caret { animation: none !important; opacity: 1; }

  .tier__badge--pulse {
    animation: none !important;
    transform: scale(1.16);
    box-shadow: 0 0 26px rgba(202, 187, 251, 0.8);
  }

  /* Hold the highlighted nav item lit rather than frozen mid-pulse */
  .nav__links > a.nav__hl {
    animation: none !important;
    box-shadow: 0 0 0 1px var(--purple), 0 0 14px rgba(202, 187, 251, 0.5);
    text-shadow: var(--glow-text);
  }

}