/* ============================================================
   TRADEWER — public site
   Cinematic video hero, Segoe UI display type.
   ============================================================ */

:root {
  --bg:          #0a0810;
  --bg-2:        #0d0a14;
  --card:        #131020;
  --card-2:      #17132a;
  --line:        rgba(255, 255, 255, .07);
  --line-2:      rgba(168, 85, 247, .22);

  --purple:      #a855f7;
  --purple-2:    #8b5cf6;
  --purple-deep: #6d28d9;
  --purple-soft: rgba(139, 92, 246, .10);

  --gold:        #fbbf24;
  --pos:         #34d399;

  --text:        #ffffff;
  --text-2:      #b8b4c8;
  --text-3:      #77738a;

  /* Display face for headings. Named for its role, not its classification —
     it was a serif (Cormorant Garamond) until the customer reviewed the
     Segoe UI trial on webtrial.php and approved the switch.

     Segoe UI ships with Windows. The fallbacks cover macOS/iOS
     (-apple-system, BlinkMacSystemFont), Android (Roboto) and Linux, none of
     which have Segoe — without them those visitors would fall through to the
     generic sans and see something different again. No webfont is downloaded
     for headings now; every face in this stack is already on the device. */
  --display: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
             Roboto, system-ui, Arial, sans-serif;
  --sans:  'Inter', -apple-system, 'Segoe UI', system-ui, Arial, sans-serif;

  --radius:    14px;
  --radius-lg: 20px;
  --maxw:      1180px;
  --header-h:  78px;
  /* Height once the bar goes solid. A token rather than a literal because
     js/main.js needs this exact value to work out where a scroll should
     land — and it cannot measure it, since .header-inner transitions its
     height and would report the old one. */
  --header-h-solid: 66px;

  /* Signature easing — a soft overshoot-free "settle" curve. Every
     transition below uses it so motion across the page feels like one
     system rather than a dozen unrelated timings. */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* ---- Warm accent layer -------------------------------------
     A bronze/amber tint laid *over* the cool purple base. Used as
     low-opacity radial glows at section tops and as the fill of
     content cards, which is what gives those areas their yellowish
     cast without changing any of the purple brand colour above. */
  --warm-glow:     138, 90, 43;   /* bronze — section glows */
  --warm-card-top: 27, 23, 16;    /* card gradient, top stop */
  --warm-card-bot: 18, 16, 11;    /* card gradient, bottom stop */
  --warm-feature:  58, 42, 20;    /* warmer fill for highlighted cards */

  /* Sampled from the supplied equity chart (assets/graph.png), whose own
     background is a flat #040413 across its whole border. The panel behind
     it used to be --bg-2 (#0d0a14), which is lighter and warmer, so the
     image sat inside a visible rectangle instead of blending into the card.
     Re-sample this if the chart is ever replaced with a differently
     exported image. */
  --track-chart-bg: #040413;

  /* Payment marks are shown in one warm tone rather than each brand's own
     colours: nine different corporate blues and oranges fought with the
     purple palette, and the row reads as a set this way. */
  --pay-mark:    #e2cda3;
  --pay-mark-hi: #f5e6c8;
  --pay-label:   #9a8a6d;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 28px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---------- shared display type ---------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.005em;
  color: #fff;
}
.display em {
  font-style: italic;
  color: var(--purple);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 20px;
}

.section-head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .display { font-size: clamp(2.2rem, 5.2vw, 3.9rem); }
.section-sub {
  font-size: 15px;
  color: var(--text-2);
  margin-top: 18px;
}

/* ---------- image placeholders ---------- */
.img-ph {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  border: 1px dashed rgba(168, 85, 247, .35);
  border-radius: 12px;
  background: rgba(139, 92, 246, .04);
  color: rgba(196, 181, 253, .7);
  font-size: 11px; line-height: 1.5; letter-spacing: .03em;
}
.img-ph b { font-weight: 500; color: rgba(216, 180, 254, .9); }
.img-ph--round { border-radius: 50%; font-size: 9px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6em;
  padding: 15px 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease),
              border-color .4s var(--ease), color .4s var(--ease);
}
.btn .icon { font-size: 1.15em; stroke-width: 1.8; transition: transform .4s var(--ease); }
/* Arrow icons drift forward on hover — the one piece of motion that
   reads as "this goes somewhere" rather than just "this is hoverable". */
.btn:hover .icon { transform: translateX(4px); }

.btn--primary {
  background: var(--purple-2);
  color: #fff;
  box-shadow: 0 8px 28px -10px rgba(139, 92, 246, .8);
}
.btn--primary:hover {
  background: var(--purple);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -10px rgba(168, 85, 247, .95);
}

.btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .18);
  color: var(--text);
}
.btn--outline:hover { border-color: var(--purple); color: #fff; }

/* Header CTA — an outlined pill that reads as purple text at rest and
   inverts to a solid fill on hover. */
.btn--pill {
  background: transparent;
  border-color: var(--purple-deep);
  color: var(--purple);
  padding: 12px 26px;
  font-weight: 600;
}
.btn--pill:hover {
  background: var(--purple-deep);
  border-color: var(--purple-deep);
  color: #fff;
}

.btn--sm { padding: 11px 22px; font-size: 10.5px; }

/* ============================================================
   HEADER  — transparent over the video, solid once scrolled
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease),
              backdrop-filter .5s var(--ease);
}
.site-header.is-solid {
  background: rgba(10, 8, 16, .88);
  /* saturate() lifts the purple sitting behind the blur so the bar reads
     as tinted glass rather than flat grey. */
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}

/* The header is the one part of the page that ignores --maxw. Everything
   else is a reading column and wants to stay narrow; the bar is furniture,
   and the design pins the logo to the left edge and the CTA to the right
   with the nav floating between them. Constraining it to 1180px instead
   bunched all three into the middle third of a wide screen. */
.site-header .container {
  max-width: none;
  padding-inline: clamp(20px, 3.3vw, 64px);
}

.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 30px;
  transition: height .5s var(--ease);
}
/* The bar tightens slightly once it goes solid. */
.site-header.is-solid .header-inner { height: var(--header-h-solid); }

.brand { display: inline-flex; align-items: center; gap: 20px; }
/* The logo file carries its own transparent padding, so it's set a little
   larger than the old inline mark to end up optically the same size. */
.brand-logo {
  width: auto; height: 42px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(168, 85, 247, .28));
}
.brand-name {
  font-family: var(--sans);
  font-size: 20px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  /* letter-spacing adds a trailing gap after the final letter; pulling it
     back keeps the optical gap to the nav even. */
  margin-right: -.26em;
}

/* margin-left:auto (rather than margin-inline:auto) pushes the links to
   sit next to the actions on the right instead of centred — the brand
   gets the whole left side, and everything interactive groups right. */
.nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.nav-link {
  position: relative;
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-2);
  padding: 6px 0;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav-link:hover, .nav-link.is-active { color: var(--purple); }
.nav-link.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--purple);
}

/* No margin-left:auto here on desktop. Setting it on both this and .nav
   makes flexbox split the slack BETWEEN them, which strands the nav in the
   middle of the bar instead of letting it sit against the actions on the
   right. .nav owns the auto margin; below 960px the nav is display:none and
   this picks it up instead (see the max-width:960px block). */
.header-actions { display: flex; align-items: center; gap: 22px; }

/* EN / DE inline toggle */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.lang-opt {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--text-3);
  cursor: pointer;
  transition: color .2s ease;
}
.lang-opt:hover { color: var(--text-2); }
.lang-opt.is-active { color: var(--purple); }
.lang-sep { color: var(--text-3); opacity: .5; }

.nav-toggle {
  display: none;
  background: transparent; border: 0;
  color: #fff; font-size: 22px;
  cursor: pointer;
  width: 40px; height: 40px;
  place-items: center;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 18px 28px 28px;
  background: rgba(10, 8, 16, .98);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.mobile-nav[hidden] { display: none; }
.mobile-link {
  padding: 15px 2px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-2);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.mobile-link:hover { color: #fff; }
.mobile-lang { display: flex; gap: 10px; padding: 20px 0 4px; }
.mobile-lang-btn {
  flex: 1; padding: 12px 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  font: inherit; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
}
.mobile-lang-btn.is-active { border-color: var(--purple); color: #fff; }
.mobile-cta { margin-top: 14px; }

/* ============================================================
   VIDEO HERO
   ============================================================ */
.video-hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: #0a0810;
}
.video-hero__media,
.video-hero__media video,
.video-hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* keeps the overlaid nav readable over bright footage */
.video-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,8,16,.55) 0%, transparent 22%, transparent 62%, rgba(10,8,16,.95) 100%);
  pointer-events: none;
}
.video-hero__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(124,58,237,.22), transparent 62%),
    linear-gradient(160deg, #16102a 0%, #0a0810 60%);
  color: var(--text-3);
  font-size: 12.5px; letter-spacing: .1em;
  padding: 24px;
}
.video-hero__placeholder b { display: block; color: rgba(216,180,254,.85); font-weight: 500; margin-top: 8px; }

/* Only pulled in from 961px up, where the copy lands on the footage. Kept
   separate from __scrim so the top fade that keeps the header legible stays
   put while this one fades in. */
.video-hero__side {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s var(--ease);
}

/* ---- replay ----
   The video plays once, so there has to be a way back to it. Hidden until
   it ends: offering "replay" over footage that is still playing is noise. */
.hero-replay {
  position: absolute;
  top: calc(var(--header-h) + 20px);
  right: clamp(20px, 3.3vw, 64px);
  z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px;
  border: 1px solid var(--purple-deep);
  border-radius: 999px;
  background: rgba(10, 8, 16, .5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--purple);
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  /* visibility rather than pointer-events alone: it also takes the button
     out of the tab order while it is invisible. */
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s .5s,
              background .3s var(--ease), color .3s var(--ease);
}
.hero-replay .icon { font-size: 15px; }
.hero-replay:hover { background: var(--purple-deep); color: #fff; }
.hero-stack.is-ended .hero-replay {
  opacity: 1; visibility: visible;
  transition: opacity .5s var(--ease), visibility 0s,
              background .3s var(--ease), color .3s var(--ease);
}

.scroll-cue {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: grid; place-items: center;
  width: 34px; height: 52px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: rgba(255,255,255,.7);
  animation: cue-float 2.4s ease-in-out infinite;
}
.scroll-cue .icon { font-size: 16px; }
@keyframes cue-float {
  0%, 100% { transform: translate(-50%, 0); opacity: .75; }
  50%      { transform: translate(-50%, 7px); opacity: 1; }
}

/* ============================================================
   HERO COPY

   Two layouts from one block of markup:
     < 961px  the panel sits below the video, always visible
     >= 961px it is laid over the footage on the left and held
              back until the video ends (see the media query near
              the responsive rules)
   .hero-stack is the shared positioning context for both.
   ============================================================ */
.hero-stack { position: relative; }

.hero {
  position: relative;
  /* Was clamp(80px, 10vw, 130px). The copy sat a long way down the page on
     a phone — a whole thumb-scroll after the video before the headline. */
  padding: clamp(38px, 6vw, 62px) 0 clamp(60px, 7vw, 90px);
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  top: 30%; right: -8%;
  width: min(60vw, 720px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(124,58,237,.16) 0%, transparent 68%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 660px; }

.hero-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin-bottom: 30px;
}
.hero-title em { font-style: italic; color: var(--purple); display: block; }

.hero-sub {
  font-size: 16px;
  color: var(--text-2);
  max-width: 440px;
  margin-bottom: 34px;
}

.trust-card {
  display: inline-flex; align-items: center; gap: 15px;
  padding: 15px 26px 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .015);
  margin-bottom: 38px;
}
.trust-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  color: var(--purple);
  font-size: 21px;
}
.trust-text { display: flex; flex-direction: column; }
.trust-title { font-size: 14px; font-weight: 500; color: #fff; }
.trust-sub { font-size: 12.5px; color: var(--text-3); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 42px; }

.social-proof { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatars { display: flex; }
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -12px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--purple-2), var(--purple-deep));
  color: #fff;
  font-size: 12px; font-weight: 500;
  object-fit: cover;
}
.avatar:first-child { margin-left: 0; }
.proof-text { display: flex; flex-direction: column; gap: 3px; }
.stars { display: inline-flex; gap: 2px; color: var(--gold); font-size: 13px; }
.proof-label { font-size: 12.5px; color: var(--text-3); }

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats {
  border-block: 1px solid var(--line);
  padding: clamp(34px, 4vw, 52px) 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-value {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 8px;
}
.stat-value.is-accent { color: var(--purple); }
.stat-label {
  font-size: 9.5px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: clamp(72px, 9vw, 130px) 0; }
.section--alt { background: var(--bg-2); }

/* A hairline between consecutive sections. Applied as a top border on every
   section after the first, so there's never a stray line above the hero or
   a doubled-up one where two sections meet. */
.section + .section,
.section + .section--alt,
.section--alt + .section { border-top: 1px solid var(--line); }
section[id] { scroll-margin-top: calc(var(--header-h) + 10px); }

/* ---- Warm section glows ----------------------------------------
   A wide, very low-opacity bronze radial sitting on top of the base
   background. It never becomes a visible "blob" — at 13–20% alpha
   over a near-black page it just warms one corner of the section. */
#pricing {
  background:
    radial-gradient(120% 70% at 50% 58%, rgba(var(--warm-glow), .13), transparent 62%),
    var(--bg-2);
}
#about {
  background:
    radial-gradient(100% 85% at 90% 0%, rgba(var(--warm-glow), .18), transparent 58%),
    var(--bg);
}
#faq {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(var(--warm-glow), .10), transparent 60%),
    var(--bg-2);
}

/* ---------- feature cards ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  padding: 34px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(var(--warm-card-top), .50), rgba(var(--warm-card-bot), .30));
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.feature-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.feature-icon {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  border: 1px solid var(--line-2);
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 19px;
  margin-bottom: 24px;
}
.feature-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.45rem;
  margin-bottom: 10px;
}
.feature-text { font-size: 13.5px; color: var(--text-2); }

/* ============================================================
   PRICING
   ============================================================ */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 880px; margin-inline: auto;
}
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 42px 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(var(--warm-card-top), .60), rgba(var(--warm-card-bot), .40));
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.plan:hover { transform: translateY(-4px); border-color: var(--line-2); }
.plan--featured {
  border-color: var(--purple-deep);
  background: linear-gradient(180deg, rgba(var(--warm-feature), .55), rgba(var(--warm-card-bot), .50));
  box-shadow: 0 30px 70px -40px rgba(139, 92, 246, .9);
}
.plan-badge {
  position: absolute; top: 22px; right: 22px;
  background: var(--purple-2);
  color: #fff;
  font-size: 8.5px; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 4px;
}
.plan-desc { font-size: 12.5px; color: var(--text-3); margin-bottom: 28px; }

.plan-price {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--display);
  margin-bottom: 10px;
}
.plan-amount {
  font-size: clamp(3rem, 6vw, 4.2rem);
  font-weight: 400;
  line-height: 1;
  color: var(--purple);
}
.plan-cur { font-size: 2.4rem; font-weight: 400; color: var(--purple); }
.plan-period { font-family: var(--sans); font-size: 14px; color: var(--text-2); margin-left: 4px; align-self: flex-end; margin-bottom: 8px; }
.plan-tax {
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 30px;
  line-height: 1.7;
}

.plan-features { display: flex; flex-direction: column; gap: 13px; margin-bottom: 36px; flex: 1; }
.plan-features li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px; color: var(--text-2);
}
.plan-features li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--purple);
}
.plan-cta { width: 100%; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.carousel { position: relative; display: flex; align-items: center; gap: 18px; }
.carousel-viewport { overflow: hidden; flex: 1; }
.carousel-track { display: flex; gap: 22px; transition: transform .55s cubic-bezier(.4,0,.2,1); }

.t-card {
  flex: 0 0 calc((100% - 44px) / 3);
  display: flex; flex-direction: column;
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(var(--warm-card-top), .50), rgba(var(--warm-card-bot), .35));
  min-height: 310px;
}
.t-stars { display: inline-flex; gap: 2px; color: var(--gold); font-size: 13px; margin-bottom: 18px; }
.t-title {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 14px;
  line-height: 1.5;
}
.t-quote {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-2);
  flex: 1;
  overflow: hidden;
}
.t-author { display: flex; align-items: center; gap: 13px; margin-top: 24px; }
.t-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--purple-2), var(--purple-deep));
  color: #fff; font-size: 12px; font-weight: 500;
  object-fit: cover;
  flex-shrink: 0;
}
.t-name { font-size: 13.5px; font-weight: 400; color: #fff; }
.t-meta { font-size: 11px; color: var(--text-3); }

.carousel-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  font-size: 17px;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.carousel-btn:hover { border-color: var(--purple); color: #fff; }
.carousel-btn:disabled { opacity: .25; cursor: default; }

.carousel-hint {
  text-align: center;
  margin-top: 26px;
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3);
}

.trustpilot-cta {
  display: flex; justify-content: center;
  margin-top: 26px;
}
.trustpilot-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-2);
  transition: border-color .25s ease, color .25s ease;
}
.trustpilot-btn:hover { border-color: var(--pos); color: #fff; }
.trustpilot-btn .tp-star { color: #00b67a; font-size: 15px; }
.trustpilot-btn b { color: #fff; font-weight: 500; }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  max-width: 900px; margin-inline: auto;
}
.compare-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.compare-table th, .compare-table td { padding: 19px 26px; text-align: left; }
.compare-table thead th {
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .012);
}
.compare-table thead th:not(:first-child) { text-align: center; }
.compare-table thead th.is-premium { color: var(--purple); background: var(--purple-soft); }
.compare-table tbody th {
  font-size: 13.5px; font-weight: 300;
  color: var(--text-2);
}
.compare-table tbody td { text-align: center; }
.compare-table tbody td.is-premium { background: rgba(139, 92, 246, .05); }
.compare-table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, .04); }
.compare-table tbody tr:last-child { border-bottom: 0; }
.compare-table .tick { color: var(--purple); font-size: 15px; stroke-width: 2; }
.compare-table .dash { color: var(--text-3); }

/* ============================================================
   PERFORMANCE / TRACK RECORD
   ============================================================ */
.track-box {
  display: grid;
  grid-template-columns: minmax(0, 400px) 1fr;
  gap: 40px;
  align-items: center;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(var(--warm-card-top), .50), rgba(var(--warm-card-bot), .30));
}
/* Grid items default to min-width:auto, which would size this track to the
   figures' full min-content width and stop .track-figures from ever scrolling. */
.track-box > * { min-width: 0; }
.track-chart {
  position: relative;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--track-chart-bg);
  overflow: hidden;
  display: grid; place-items: center;
  padding: 26px;
  text-align: center;
}
.track-chart img { width: 100%; height: 100%; object-fit: contain; }
.track-chart-empty { display: grid; place-items: center; gap: 18px; }
.track-chart-note { font-size: 12px; color: var(--text-3); max-width: 240px; line-height: 1.6; }
.track-add {
  display: grid; place-items: center;
  width: 54px; height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--purple);
  font-size: 17px;
  margin-inline: auto;
}

.track-figures { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; }

/* Slim, on-brand scrollbar for the two horizontal scrollers on the page.
   Firefox uses the standard properties; WebKit/Blink needs the pseudo-elements. */
.track-figures,
.table-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, .5) rgba(255, 255, 255, .05);
}
.track-figures::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar { height: 6px; }
.track-figures::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .05);
  border-radius: 999px;
}
.track-figures::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--purple-2), var(--purple));
  border-radius: 999px;
}
.track-figures::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, var(--purple), #c084fc);
}
.track-fig {
  flex: 1 0 auto;
  min-width: 132px;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--warm-card-top), .40);
  text-align: center;
}
.track-fig-value {
  display: block;
  font-family: var(--display);
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.2;
}
.track-fig-value.is-soon {
  font-family: var(--sans);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
}
.track-fig-value.is-pos { color: var(--pos); }
.track-fig-label {
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.6;
}
.track-swipe {
  text-align: center; margin-top: 16px;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3);
}
.track-note { text-align: center; font-size: 12.5px; color: var(--text-3); margin-top: 26px; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.step {
  padding: 30px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--warm-card-top), .35);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.step:hover { border-color: var(--line-2); transform: translateY(-3px); }
.step-num {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--purple);
  margin-bottom: 22px;
  letter-spacing: .06em;
}
.step-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 10px;
}
.step-text { font-size: 12.5px; color: var(--text-3); line-height: 1.65; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.about-card {
  position: relative;
  padding: 42px 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(var(--warm-card-top), .58), rgba(var(--warm-card-bot), .34));
  overflow: hidden;
}
/* Second column runs warmer with a purple edge, so the pair reads as a
   default card and a highlighted one rather than two identical blocks. */
.about-card:nth-child(2) {
  background: linear-gradient(180deg, rgba(var(--warm-feature), .40), rgba(var(--warm-card-bot), .38));
  border-color: var(--line-2);
}
.about-card::after {
  content: attr(data-num);
  position: absolute;
  top: 24px; right: 30px;
  font-family: var(--display);
  font-size: 4.6rem;
  line-height: 1;
  color: rgba(255, 255, 255, .035);
  pointer-events: none;
}
.about-card-title {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.85rem;
  margin-bottom: 24px;
}
.about-card-title::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--purple);
  flex-shrink: 0;
}
.about-text { font-size: 13.5px; color: var(--text-2); margin-bottom: 16px; line-height: 1.75; }
.about-text:last-child { margin-bottom: 0; }

.about-checklist {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin-top: 22px;
}
.about-checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2);
  line-height: 1.55;
}
.about-checklist .icon { color: var(--purple); font-size: 14px; margin-top: 2px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; max-width: 1000px; margin-inline: auto; }
.faq-col { display: flex; flex-direction: column; gap: 16px; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--warm-card-top), .35);
  transition: border-color .3s var(--ease);
}
.faq-item[open] { border-color: var(--line-2); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-plus {
  position: relative;
  width: 13px; height: 13px;
  flex-shrink: 0;
}
.faq-plus::before, .faq-plus::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: var(--purple);
  transition: transform .3s ease, opacity .3s ease;
}
.faq-plus::before { width: 13px; height: 1px; transform: translate(-50%, -50%); }
.faq-plus::after  { width: 1px; height: 13px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a { padding: 0 26px 24px; font-size: 13.5px; color: var(--text-2); line-height: 1.75; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-card {
  max-width: 640px; margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
}
.contact-row {
  display: flex; align-items: center; gap: 18px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  transition: background .25s ease;
}
.contact-row:last-child { border-bottom: 0; }
.contact-row:hover { background: rgba(139, 92, 246, .05); }
.contact-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--line-2);
  color: var(--purple);
  font-size: 19px;
}
.contact-text { display: flex; flex-direction: column; flex: 1; line-height: 1.5; }
.contact-text b { font-size: 14px; font-weight: 500; }
.contact-text span { font-size: 12.5px; color: var(--text-3); }
.contact-go { font-size: 17px; color: var(--text-3); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding-top: clamp(56px, 6vw, 82px);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr .8fr .9fr .9fr 1.5fr;
  gap: 40px 30px;
  padding-bottom: 52px;
}
.footer-logo {
  font-family: var(--sans);
  font-size: 17px; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-tagline { font-size: 12.5px; color: var(--text-3); max-width: 230px; margin-bottom: 24px; line-height: 1.7; }
.footer-socials { display: flex; gap: 14px; }
.footer-socials a {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 15px;
  transition: border-color .25s ease, color .25s ease;
}
.footer-socials a:hover { border-color: var(--purple); color: var(--purple); }

.footer-col h4 {
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 20px;
}
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a {
  font-size: 13px; color: var(--text-2);
  transition: color .25s ease;
}
.footer-links a:hover { color: #fff; }

.pay-note { font-size: 12px; color: var(--text-3); margin-bottom: 14px; }
.pay-stripe-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 20px;
}
.pay-stripe-cta:hover { color: #fff; }
.pay-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pay-logo {
  display: grid; place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 58px;
  padding: 11px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .028);
  text-align: center;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.pay-logo:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .05); }

/* The marks are single-path glyphs, so they inherit the tile's colour.
   .icon sets fill:none/stroke:currentColor for the line-art sprite — the
   exact opposite of what a filled logo needs, hence the explicit reset. */
/* Fixed height, width derived from the cropped viewBox — so a wide wordmark
   (Visa) and a narrow monogram (Klarna) sit at matching cap height. */
.pay-mark {
  height: 15px;
  /* width comes from the inline aspect-ratio (see PAY_MARK_RATIO) */
  width: auto;
  max-width: 100%;
  fill: currentColor;
  stroke: none;
  color: var(--pay-mark);
  transition: color .3s var(--ease);
}
.pay-logo:hover .pay-mark { color: var(--pay-mark-hi); }

/* Uploaded artwork (Admin -> Payments) overrides the built-in mark. It keeps
   its own colours, so no currentColor treatment applies. */
.pay-mark-img { max-height: 22px; width: auto; object-fit: contain; }

.pay-logo-name {
  font-size: 8.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--pay-label);
  line-height: 1;
  white-space: nowrap;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 26px 0 34px;
  display: flex; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: 11.5px; color: var(--text-3); }
.footer-risk { max-width: 520px; text-align: right; line-height: 1.7; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.has-js .reveal {
  opacity: 0;
  transform: translateY(34px);
  /* Transform runs slightly longer than opacity so elements finish
     settling just after they finish appearing. */
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  will-change: opacity, transform;
}
.has-js .reveal.is-visible { opacity: 1; transform: none; }

/* Directional variants — set data-reveal="left|right" to slide in
   horizontally instead of up. */
.has-js .reveal[data-reveal="left"]  { transform: translateX(-42px); }
.has-js .reveal[data-reveal="right"] { transform: translateX(42px); }
.has-js .reveal[data-reveal="left"].is-visible,
.has-js .reveal[data-reveal="right"].is-visible { transform: none; }

.reveal-d1, .reveal[data-delay="1"] { transition-delay: .1s; }
.reveal-d2, .reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }

/* staff notice while maintenance mode is on.
   The header is fixed, so the bar sits above it and everything
   below shifts down by exactly its height. */
.admin-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 201;
  /* Grows with its content instead of being pinned to 40px — on a narrow
     screen the message wraps to two or three lines, and a fixed height
     made it spill over the header below. */
  min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  background: var(--purple-2);
  color: #fff;
  font-size: 12.5px; line-height: 1.45; text-align: center;
  padding: 9px 16px;
}
.admin-bar a { text-decoration: underline; font-weight: 500; white-space: nowrap; }

/* --admin-bar-h is measured by js/main.js once the bar has laid out, so
   everything below it shifts by however tall it actually became. The 40px
   fallback covers the moment before that runs. */
.has-admin-bar .site-header { top: var(--admin-bar-h, 40px); }
.has-admin-bar .video-hero {
  margin-top: var(--admin-bar-h, 40px);
  height: calc(100vh - var(--admin-bar-h, 40px));
}

@media (max-width: 620px) {
  .admin-bar { font-size: 11.5px; padding: 8px 14px; }
}

/* ============================================================
   ACCOUNT PAGES (signup / login / dashboard / password reset)
   ============================================================ */
.acct-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: calc(var(--header-h) + 24px) 24px 24px; }
.acct-card {
  width: 100%; max-width: 440px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 40px);
}
.acct-card--wide { max-width: 640px; }
.acct-brand { font-size: 17px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 6px; }
.acct-sub { color: var(--text-3); font-size: 13.5px; margin-bottom: 26px; line-height: 1.6; }
.acct-field { margin-bottom: 16px; }
.acct-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.acct-input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font: inherit; font-size: 14px; padding: 11px 13px;
}
.acct-input:focus { outline: none; border-color: var(--purple); }
.acct-alert { padding: 11px 15px; border-radius: 10px; font-size: 13.5px; margin-bottom: 18px; border: 1px solid; line-height: 1.5; }
.acct-alert--err { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.35); color: #fca5a5; }
.acct-alert--ok  { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.35); color: #6ee7b7; }

.acct-foot { margin-top: 22px; text-align: center; font-size: 13px; color: var(--text-3); }
.acct-foot a { color: var(--purple); }
.acct-hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.acct-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.acct-card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.acct-card-sub { font-size: 13px; color: var(--text-3); margin-bottom: 18px; }
.acct-stack { display: flex; flex-direction: column; gap: 22px; }

/* Consent checkboxes on the checkout page. Deliberately roomy — these are
   the legally meaningful clicks on the site, not fine print to skim past. */
.acct-check {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--warm-card-top), .35);
  font-size: 12.5px; line-height: 1.6; color: var(--text-2);
  cursor: pointer;
  transition: border-color .3s var(--ease);
}
.acct-check:hover { border-color: var(--line-2); }
.acct-check input {
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 1px;
  accent-color: var(--purple);
  cursor: pointer;
}
.acct-check a { color: var(--purple); text-decoration: underline; }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-wrap { padding: calc(var(--header-h) + 60px) 0 100px; }
.legal-inner { max-width: 780px; }
.legal-title { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 26px; }
.legal-lead { color: var(--text-2); margin-bottom: 28px; }
.legal-note {
  padding: 12px 16px;
  margin-bottom: 28px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: rgba(var(--warm-card-top), .4);
  font-size: 12.5px; color: var(--text-2);
}
/* Long statutory text — generous measure and leading, because these get
   read properly rather than skimmed. */
.legal-body { font-size: 14.5px; line-height: 1.85; color: var(--text-2); }
.legal-body p { margin-bottom: 18px; }
.legal-h {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--text);
  margin: 34px 0 12px;
}
.legal-body > .legal-h:first-child { margin-top: 0; }

.legal-nav {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 50px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.legal-nav a {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-2);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.legal-nav a:hover { border-color: var(--purple); color: var(--purple); }

/* ============================================================
   COOKIE CONSENT BAR
   ============================================================ */
.cookie-bar {
  position: fixed;
  left: 50%; bottom: 22px;
  z-index: 300;                 /* above the header (100) and mobile nav */
  width: min(880px, calc(100vw - 32px));
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 26px;
  padding: 18px 20px 18px 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  /* Same warm gradient as the plan/testimonial cards, but at high opacity —
     this floats over the video hero, so it has to stay readable rather than
     let footage show through. The blur behind it keeps the glassy feel. */
  background: linear-gradient(180deg, rgba(var(--warm-card-top), .96), rgba(var(--warm-card-bot), .94));
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 26px 70px -24px rgba(0, 0, 0, .95);
  /* Starts just below its resting spot and slides up when .is-open lands. */
  transform: translate(-50%, calc(100% + 32px));
  opacity: 0;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}
.cookie-bar.is-open { transform: translate(-50%, 0); opacity: 1; }
.cookie-bar[hidden] { display: none; }

.cookie-bar__text {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}
.cookie-bar__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cookie-bar__actions .btn { padding: 12px 24px; }

@media (max-width: 620px) {
  .cookie-bar {
    flex-direction: column; align-items: stretch;
    padding: 20px;
    border-radius: 18px;
    text-align: center;
  }
  .cookie-bar__actions { justify-content: center; }
  .cookie-bar__actions .btn { flex: 1; padding: 12px 14px; }
}

/* Someone who prefers reduced motion still gets the bar, just without
   the slide — it simply appears. */
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { transform: translate(-50%, 0); opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 961px) { .mobile-nav { display: none; } }

/* ============================================================
   HERO — desktop overlay

   The copy is lifted out of the flow and laid over the video on
   the left, so the whole hero is one screen instead of two. It
   stays hidden until the video ends; js/main.js puts .is-ended on
   .hero-stack and guarantees it lands even if the video never
   plays (blocked autoplay, decode error, reduced motion), because
   copy that never appears is far worse than copy that appears early.
   ============================================================ */
@media (min-width: 961px) {
  .hero-stack .hero {
    position: absolute; inset: 0;
    display: flex; align-items: center;
    /* Centred, then pushed down by half this — the copy sat a touch high
       against the frame with the header above it. */
    padding: 90px 0 0;
    /* The panel spans the whole video; only the copy itself should
       swallow clicks, or it would block the replay button. */
    pointer-events: none;
  }
  /* Out of the centred reading column and onto the same left margin the
     header uses, so the headline lines up with the logo above it rather
     than starting 100px further in. */
  .hero-stack .hero .container {
    max-width: none;
    padding-inline: clamp(20px, 3.3vw, 64px);
    pointer-events: none;
  }
  .hero-stack .hero .hero-inner { pointer-events: auto; }
  /* The ambient purple glow belongs to the standalone panel; over the
     footage it just muddies the picture. */
  .hero-stack .hero .hero-glow { display: none; }

  /* Gated on the video ending rather than on scroll. The extra class in
     the selector outruns `.has-js .reveal.is-visible`, which the scroll
     observer would otherwise use to show this the instant the page loads. */
  .has-js .hero-stack .hero .hero-inner.reveal {
    opacity: 0; transform: translateY(34px);
  }
  .has-js .hero-stack.is-ended .hero .hero-inner.reveal {
    opacity: 1; transform: none;
  }

  .hero-stack .video-hero__side {
    background: linear-gradient(90deg,
      rgba(10, 8, 16, .93) 0%, rgba(10, 8, 16, .78) 30%,
      rgba(10, 8, 16, .35) 52%, transparent 70%);
  }
  .hero-stack.is-ended .video-hero__side { opacity: 1; }

  /* The cue deliberately stays put and stays live once the copy is up: it
     clears the copy (which ends well above it) and it is the only affordance
     telling a visitor there is more page below.

     It used to be hidden here with `opacity: 0; pointer-events: none`. That
     was broken — .scroll-cue runs the cue-float keyframes, which animate
     opacity, and an animation outranks a normal declaration. The opacity was
     ignored while the pointer-events took effect, leaving a cue that looked
     completely normal and silently swallowed every click. */

  /* Only up here does the cue land on the consent bar: the video is full
     height, so the cue sits at the bottom of the viewport, and the bar is
     fixed there at z-index 300 — directly on top of it. Below 961px the
     video is barely half the screen and the cue is nowhere near the bar,
     so it must NOT be moved there. Rather than fight a dialog for stacking
     order, step the cue above it until a choice has been made. */
  .cookie-open .scroll-cue {
    bottom: calc(34px + var(--cookie-bar-h, 90px) + 16px);
    transition: bottom .4s var(--ease);
  }
}

/* Between the mobile breakpoint and ~1200px the right-aligned nav plus the
   actions run out of room. Tighten the gaps rather than let anything wrap. */
@media (max-width: 1200px) and (min-width: 961px) {
  .nav { gap: 22px; }
  .header-actions { gap: 16px; }
  .nav-link { font-size: 10px; letter-spacing: .14em; }
  .btn--pill { padding: 11px 18px; font-size: 10.5px; }
  /* The wide-tracked wordmark is the first thing to give up room here —
     it costs ~215px and the nav needs it more than the branding does. */
  .brand { gap: 13px; }
  .brand-logo { height: 36px; }
  .brand-name { font-size: 16px; letter-spacing: .2em; margin-right: -.2em; }
}

@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col--pay { grid-column: span 3; }
  .pay-logos { grid-template-columns: repeat(5, 1fr); max-width: 460px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  /* Below the overlay breakpoint the copy sits under the video, so a
     full-height video pushed the headline an entire screen down. Just over
     half the viewport puts the eyebrow and headline in view on landing. */
  .video-hero { height: 56vh; min-height: 320px; }
  .nav { display: none; }
  /* .nav carried the auto margin on desktop; with it gone, the actions have
     to push themselves right or the hamburger sits beside the logo. */
  .header-actions { margin-left: auto; }
  .nav-toggle { display: grid; }
  .header-actions .btn { display: none; }
  .header-actions .nav-link { display: none; }
  .features { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .track-box { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 18px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-risk { text-align: center; }
}

@media (max-width: 760px) {
  .t-card { flex-basis: calc((100% - 22px) / 2); }
  .faq-cols { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-col--pay { grid-column: span 2; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .about-checklist { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .container { padding-inline: 20px; }
  /* Below this the wordmark and the hamburger are the only two things in
     the bar, so the wordmark can keep its weight but not its full tracking. */
  .brand { gap: 12px; }
  .brand-logo { height: 34px; }
  .brand-name { font-size: 15px; letter-spacing: .18em; margin-right: -.18em; }
  .video-hero { height: 52vh; min-height: 300px; }
  .plans { grid-template-columns: 1fr; max-width: 420px; }
  .t-card { flex-basis: 100%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
  .plan { padding: 34px 26px; }
}

@media (max-width: 440px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-col--pay { grid-column: span 1; }
  .pay-logos { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}