/* ============================================================
   Tauxmix — "Neon Nightlife"
   Deep-navy canvas, one neon-green accent sampled from the mark.
   en-CA / fr-CA, left-to-right only. Logical properties throughout.

   Featured surfaces (.hero-right, .form-card.solo, .cap.feat, .gcard.mid,
   .cta-band, .calc-results__final) are "neon-lit" navy panels: a 1px tube
   edge with an inner and outer glow. Nothing on the page goes light — the
   contrast comes from the glow, not from inverting the surface.
   ============================================================ */

:root {
  /* base — deep navy night */
  --tm-bg: #050b1a;
  --tm-bg-2: #08132a;
  --tm-navy-1: #0b1a36;
  --tm-navy-2: #10244a;
  --tm-navy-3: #163063;

  /* accent — the logo neon, sampled from images/logo.jpg (#0bf88d) */
  --tm-neon: #0bf88d;
  --tm-neon-hi: #7dffc0;
  --tm-neon-deep: #0a8f5c;
  --tm-on-neon: #04121f;
  --tm-grad: linear-gradient(135deg, #7dffc0 0%, #0bf88d 50%, #0a8f5c 100%);
  --tm-panel: linear-gradient(155deg, #10244a 0%, #0b1a36 55%, #08132a 100%);

  /* text on navy. --tm-dim is the floor: 4.9:1 on --tm-navy-2, the
     brightest surface it ever sits on. */
  --tm-tx: rgba(226, 236, 255, .78);
  --tm-tx-strong: #f2f6ff;
  --tm-muted: #a8b8d8;
  --tm-dim: #8299c4;
  --tm-down: #ff7a95;

  /* lines / glass */
  --tm-line: rgba(140, 170, 255, .14);
  --tm-line-soft: rgba(140, 170, 255, .08);
  --tm-glass: rgba(140, 170, 255, .035);
  --tm-glass-2: rgba(140, 170, 255, .06);
  --tm-neon-line: rgba(11, 248, 141, .55);

  /* radii */
  --tmr-sm: 10px;
  --tmr-md: 16px;
  --tmr-lg: 24px;
  --tmr-xl: 32px;
  --tmr-pill: 9999px;

  /* shadow / glow */
  --tms-sh: 0 30px 80px -30px rgba(0, 0, 0, .85);
  --tms-glow: 0 0 40px -8px rgba(11, 248, 141, .5);
  --tms-tube: 0 0 0 1px rgba(11, 248, 141, .06), 0 0 30px -6px rgba(11, 248, 141, .38), inset 0 0 34px -12px rgba(11, 248, 141, .3);

  /* fonts */
  --tmf-disp: 'Syne', 'Segoe UI', sans-serif;
  --tmf-body: 'DM Sans', 'Segoe UI', sans-serif;
  --tmf-mono: 'JetBrains Mono', ui-monospace, monospace;

  --tm-mw: 1240px;
  --tm-nav-h: 74px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--tmf-body);
  background: var(--tm-bg);
  color: var(--tm-tx);
  line-height: 1.7;
  padding-block-start: var(--tm-nav-h);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ---- night sky: spotlight blooms ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(70% 55% at 88% -8%, rgba(11, 248, 141, .14), transparent 60%),
    radial-gradient(60% 50% at 6% 6%, rgba(46, 96, 255, .17), transparent 65%),
    radial-gradient(90% 60% at 50% 115%, rgba(11, 248, 141, .08), transparent 60%),
    linear-gradient(180deg, #08132a 0%, #050b1a 45%, #040915 100%);
}
/* ---- dance floor: a perspective neon grid fading up from the bottom ---- */
body::after {
  content: "";
  position: fixed;
  inset-inline-start: -30%;
  inset-block-end: 0;
  width: 160%;
  height: 42vh;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 248, 141, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 248, 141, .10) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(420px) rotateX(64deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 80%);
  mask-image: linear-gradient(to top, #000 0%, transparent 80%);
  opacity: .45;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--tm-mw); margin-inline: auto; padding-inline: 24px; }

/* a11y helpers */
.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;
}
.skip-link {
  position: absolute; inset-block-start: -60px; inset-inline-start: 16px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 0 0 var(--tmr-sm) var(--tmr-sm);
  background: var(--tm-neon); color: var(--tm-on-neon);
  font-family: var(--tmf-disp); font-weight: 700; font-size: .9rem;
  transition: inset-block-start .2s;
}
.skip-link:focus { inset-block-start: 0; }
:focus-visible { outline: 2px solid var(--tm-neon-hi); outline-offset: 3px; }

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--tmf-disp);
  color: var(--tm-tx-strong);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.display {
  font-family: var(--tmf-disp);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--tm-tx-strong);
}
/* Syne widens as it gets heavier; past 700 a headline line roughly doubles
   in length, so emphasis stops at 700. */
.display b { font-weight: 700; }
/* The neon sign: emphasis is a glowing tube of the brand green. */
.display .hi {
  font-weight: 600;
  color: var(--tm-neon-hi);
  text-shadow:
    0 0 6px rgba(11, 248, 141, .55),
    0 0 22px rgba(11, 248, 141, .35),
    0 0 52px rgba(11, 248, 141, .2);
}
h1.display { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2.display { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

/* One-shot "sign switching on" flicker: on load for the hero, on reveal for
   section heads. */
@keyframes tmFlicker {
  0% { opacity: .2; text-shadow: none; }
  6% { opacity: 1; }
  8% { opacity: .35; text-shadow: none; }
  12% { opacity: 1; }
  15% { opacity: .5; text-shadow: none; }
  22%, 100% { opacity: 1; }
}
.hero .display .hi { animation: tmFlicker 1.6s .35s both; }
.tm-rise.on .display .hi { animation: tmFlicker 1.6s .15s both; }

.eyebrow {
  font-family: var(--tmf-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tm-muted);
}
/* Small neon tag */
.eyebrow.acc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border: 1px solid rgba(11, 248, 141, .42);
  border-radius: var(--tmr-pill);
  background: rgba(11, 248, 141, .07);
  box-shadow: 0 0 16px -5px rgba(11, 248, 141, .6);
  color: var(--tm-neon-hi);
}
.eyebrow.acc::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tm-neon);
  box-shadow: 0 0 8px var(--tm-neon);
}

.lede { color: var(--tm-muted); font-size: 1.04rem; max-width: 50ch; }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--tmf-disp);
  font-weight: 600;
  font-size: .92rem;
  padding: 13px 26px;
  border-radius: var(--tmr-pill);
  border: 1px solid transparent;
  transition: transform .25s, box-shadow .25s, background .25s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--tm-neon); color: var(--tm-on-neon); font-weight: 700; box-shadow: var(--tms-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 60px -4px rgba(11, 248, 141, .75); }
.btn-ghost {
  background: var(--tm-glass-2);
  color: var(--tm-tx-strong);
  border-color: var(--tm-neon-line);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(11, 248, 141, .12); box-shadow: var(--tms-glow); }

section { position: relative; }
.sect { padding-block: 84px; }
.sect-head { max-width: 680px; margin-inline: auto; margin-block-end: 46px; text-align: center; }
.sect-head .eyebrow { margin-block-end: 16px; }
.sect-head p { color: var(--tm-muted); margin-block-start: 14px; }

/* ---- neon-lit panel: the single featured surface ---- */
.hero-right,
.form-card.solo,
.cap.feat,
.gcard.mid,
.cta-band {
  background: var(--tm-panel);
  border: 1px solid var(--tm-neon-line);
  box-shadow: var(--tms-tube), var(--tms-sh);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--tm-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(5, 11, 26, .74);
  backdrop-filter: blur(18px);
  border-block-end: 1px solid var(--tm-line-soft);
}
.nav::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11, 248, 141, .55), transparent);
}
.nav-in {
  width: 100%;
  max-width: var(--tm-mw);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Brand: one word, one colour, one weight. Never split "Tauxmix". */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--tmf-disp);
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--tm-tx-strong);
  letter-spacing: -.005em;
}
/* The mark is wider than tall (113x96 file); height drives, width follows. */
.brand img { height: 32px; width: auto; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(11, 248, 141, .55)); }
.brand-name { white-space: nowrap; }

.menu { display: flex; align-items: center; gap: 24px; list-style: none; }
.menu a { font-size: .88rem; color: var(--tm-muted); transition: color .2s, text-shadow .2s; }
.menu a:hover, .menu a.on { color: var(--tm-tx-strong); text-shadow: 0 0 14px rgba(11, 248, 141, .55); }
.menu .btn { padding: 9px 20px; font-size: .84rem; }
.menu a.btn-primary { color: var(--tm-on-neon); text-shadow: none; }
/* EN/FR toggle: a small neon tag, so a visitor the browser-language
   detector sent to the other tree can always see the way back. */
.menu a.lang-link {
  font-family: var(--tmf-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--tm-neon-hi);
  padding: 5px 10px;
  border: 1px solid var(--tm-neon-line);
  border-radius: var(--tmr-pill);
  background: rgba(11, 248, 141, .06);
}
.menu a.lang-link:hover { background: rgba(11, 248, 141, .14); text-shadow: none; box-shadow: 0 0 14px -4px rgba(11, 248, 141, .6); }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.burger span { width: 22px; height: 1.6px; background: var(--tm-tx-strong); border-radius: 2px; transition: .3s; }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-block: 1px solid var(--tm-line-soft);
  background: rgba(8, 19, 42, .55);
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track { display: inline-flex; gap: 46px; padding-block: 12px; will-change: transform; }
.tk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--tmf-mono);
  font-size: .74rem;
  color: var(--tm-muted);
}
.tk b { color: var(--tm-tx-strong); font-weight: 500; }
.tk .px { color: var(--tm-tx); }
.tk .up { color: var(--tm-neon-hi); }
.tk .down { color: var(--tm-down); }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tm-neon);
  box-shadow: 0 0 10px var(--tm-neon);
  animation: tmPulse 1.8s ease-in-out infinite;
}
@keyframes tmPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   HERO — navy stage | neon-lit form
   ============================================================ */
.hero { padding-block: 56px 60px; }
.hero-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: var(--tmr-xl);
  overflow: hidden;
  border: 1px solid var(--tm-line);
  box-shadow: var(--tms-sh), 0 0 80px -30px rgba(11, 248, 141, .35);
  position: relative;
}
.hero-left {
  background:
    radial-gradient(110% 110% at 0% 0%, rgba(46, 96, 255, .18), transparent 60%),
    radial-gradient(90% 90% at 100% 100%, rgba(11, 248, 141, .10), transparent 60%),
    linear-gradient(150deg, var(--tm-navy-2), var(--tm-navy-1) 70%, var(--tm-bg-2));
  padding: 54px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--tmf-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tm-neon-hi);
  padding: 7px 14px;
  border: 1px solid rgba(11, 248, 141, .4);
  border-radius: var(--tmr-pill);
  background: rgba(11, 248, 141, .08);
  box-shadow: 0 0 18px -6px rgba(11, 248, 141, .6);
  margin-block-end: 24px;
}
.hero-chip svg { width: 13px; height: 13px; }
.hero h1 { margin-block-end: 20px; }
.hero-left .lede { margin-block-end: 32px; font-size: 1.06rem; }

.stat-rows { display: flex; flex-direction: column; }
.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-block-start: 1px solid var(--tm-line-soft);
}
.stat-row:last-child { border-block-end: 1px solid var(--tm-line-soft); }
.stat-row .val {
  font-family: var(--tmf-disp);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--tm-tx-strong);
}
.stat-row .lbl {
  font-family: var(--tmf-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tm-dim);
  text-align: end;
}

/* hero right — the neon-lit form panel (inside the hero frame, so the tube
   is drawn on the inner edge only) */
.hero-right {
  border: none;
  border-inline-start: 1px solid var(--tm-neon-line);
  box-shadow: inset 0 0 44px -14px rgba(11, 248, 141, .32);
  padding: 40px 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(11, 248, 141, .09) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  pointer-events: none;
}
.hero-right > * { position: relative; }

/* ---- registration form (on the neon-lit panel) ---- */
.form-card h2 { font-weight: 700; font-size: 1.3rem; color: var(--tm-tx-strong); }
.form-card .note {
  font-family: var(--tmf-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tm-neon-hi);
  margin-block: 5px 16px;
}
.reg input[type="text"],
.reg input[type="email"],
.reg input[type="tel"] {
  width: 100%;
  background: rgba(4, 10, 24, .72);
  border: 1px solid rgba(140, 170, 255, .24);
  border-radius: var(--tmr-sm);
  padding: 12px 14px;
  color: var(--tm-tx-strong);
  font-family: var(--tmf-body);
  font-size: .94rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.reg input::placeholder { color: var(--tm-dim); opacity: 1; }
.reg input:focus { border-color: var(--tm-neon); box-shadow: 0 0 0 3px rgba(11, 248, 141, .2), 0 0 18px -4px rgba(11, 248, 141, .6); }
.reg form > div { margin-block-end: 10px; }

/* ---- phone field (intl-tel-input v25) ----------------------------------
   The library pins its country selector absolutely and writes
   telInput.style.paddingLeft from JS after measuring it. Its stylesheet
   loads async, so that measurement can run before the CSS lands and is never
   redone. Lay the widget out as a flex row instead, with the selector as a
   real item, so nothing depends on the measured padding. The field chrome
   moves from the input to .iti so selector and digits read as one control.

   The library stylesheet loads AFTER this one, so every override here carries
   one extra class (.reg / body) to win on specificity, not on order. */
.reg .iti,
body .iti--container {
  --iti-border-color: rgba(140, 170, 255, .2);
  --iti-dialcode-color: var(--tm-dim);
  --iti-dropdown-bg: #0b1a36;
  --iti-arrow-color: var(--tm-muted);
  --iti-hover-color: rgba(11, 248, 141, .12);
}
.reg .iti {
  width: 100%;
  display: flex;
  align-items: stretch;
  background: rgba(4, 10, 24, .72);
  border: 1px solid rgba(140, 170, 255, .24);
  border-radius: var(--tmr-sm);
  transition: border-color .2s, box-shadow .2s;
}
.reg .iti:focus-within { border-color: var(--tm-neon); box-shadow: 0 0 0 3px rgba(11, 248, 141, .2), 0 0 18px -4px rgba(11, 248, 141, .6); }

.reg .iti__country-container {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  border-inline-end: 1px solid rgba(140, 170, 255, .18);
}
.reg .iti__selected-dial-code { color: var(--tm-tx-strong); }

/* !important is load-bearing: it overrides the inline padding-left the
   library writes on init and on every country change. */
.reg .iti > input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  padding-inline: 14px !important;
}
.reg .iti > input[type="tel"]:focus { box-shadow: none; }

.reg .iti__dropdown-content,
body .iti--container .iti__dropdown-content {
  background: #0b1a36;
  color: var(--tm-tx-strong);
  border: 1px solid var(--tm-neon-line);
  border-radius: var(--tmr-sm);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8), 0 0 24px -8px rgba(11, 248, 141, .4);
}
.reg .iti__search-input,
body .iti--container .iti__search-input {
  background: #08132a;
  color: var(--tm-tx-strong);
  border: none;
  border-block-end: 1px solid var(--tm-line);
  padding: 10px 12px;
}
.reg .iti__search-input::placeholder,
body .iti--container .iti__search-input::placeholder { color: var(--tm-dim); }
.reg .iti__country.iti__highlight,
body .iti--container .iti__country.iti__highlight { background: rgba(11, 248, 141, .14); }
.reg .iti__dial-code,
body .iti--container .iti__dial-code { color: var(--tm-dim); }

/* Digits are LTR in every locale. */
#phone { direction: ltr; text-align: left; }

.phone-error {
  display: none;
  margin-block-start: 6px;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--tm-down);
}
.phone-error.on { display: block; }

#submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--tmr-sm);
  background: var(--tm-neon);
  color: var(--tm-on-neon);
  font-family: var(--tmf-disp);
  font-size: 1rem;
  font-weight: 700;
  margin-block-start: 4px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 0 30px -8px rgba(11, 248, 141, .7);
}
#submit-btn:hover { transform: translateY(-2px); box-shadow: 0 0 46px -6px rgba(11, 248, 141, .85); }
.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--tm-muted);
  margin-block-start: 14px;
}
.form-tip svg { width: 16px; height: 16px; color: var(--tm-neon); flex-shrink: 0; }

.form-card .trust { margin-block-start: 22px; border-block-start: 1px solid var(--tm-line); }
.trust-item { display: flex; align-items: center; gap: 13px; padding-block: 14px; border-block-end: 1px solid var(--tm-line); }
.trust-item:last-child { border-block-end: none; }
.trust-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(11, 248, 141, .09);
  border: 1px solid rgba(11, 248, 141, .3);
}
.trust-ico svg { width: 18px; height: 18px; color: var(--tm-neon); }
.trust-item b { display: block; font-family: var(--tmf-disp); font-weight: 700; font-size: .94rem; color: var(--tm-tx-strong); line-height: 1.4; }
.trust-item span { font-size: .78rem; color: var(--tm-muted); }

/* ============================================================
   VOICES (text testimonials)
   ============================================================ */
.voices-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voice {
  display: flex;
  flex-direction: column;
  border-radius: var(--tmr-lg);
  border: 1px solid var(--tm-line);
  background: linear-gradient(180deg, var(--tm-glass-2), var(--tm-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.voice:hover { transform: translateY(-5px); border-color: var(--tm-neon-line); box-shadow: 0 0 34px -10px rgba(11, 248, 141, .45); }
.voice::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tm-neon), transparent);
  box-shadow: 0 0 12px var(--tm-neon);
  opacity: .7;
}
.voice-mark { width: 34px; height: 34px; color: var(--tm-neon); opacity: .45; margin-block-end: 14px; }
.voice-mark svg { width: 100%; height: 100%; }
.voice .stars { margin-block-end: 14px; }
.voice-qt {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--tm-tx-strong);
  flex: 1;
  margin-block-end: 20px;
}
.voice-who { display: flex; align-items: center; gap: 13px; padding-block-start: 18px; border-block-start: 1px solid var(--tm-line-soft); }
.voice-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--tmf-disp); font-weight: 700; font-size: .84rem;
  color: var(--tm-on-neon); background: var(--tm-grad);
  box-shadow: 0 0 16px -4px rgba(11, 248, 141, .6);
}
.voice-name { font-family: var(--tmf-disp); font-weight: 700; font-size: .96rem; color: var(--tm-tx-strong); }
.voice-loc { font-family: var(--tmf-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-neon-hi); }

.stars { display: flex; gap: 3px; }
.stars svg { width: 15px; height: 15px; color: var(--tm-neon); filter: drop-shadow(0 0 4px rgba(11, 248, 141, .6)); }

/* ============================================================
   SPLIT (image + copy)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--tmr-xl);
  overflow: hidden;
  border: 1px solid var(--tm-line);
  box-shadow: var(--tms-sh);
}
.split-media { position: relative; min-height: 380px; overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 40%, rgba(5, 11, 26, .45));
  pointer-events: none;
}
.split-copy {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(11, 248, 141, .08), transparent 60%),
    linear-gradient(160deg, var(--tm-navy-2), var(--tm-navy-1));
}
.split-copy .eyebrow { margin-block-end: 16px; }
.split-copy h2 { margin-block-end: 18px; }
.split-copy p { color: var(--tm-muted); margin-block-end: 14px; }
.split-copy p:last-child { margin-block-end: 0; }
.split.reverse .split-media { order: 2; }

/* ============================================================
   CAPABILITY CARDS
   ============================================================ */
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cap {
  border-radius: var(--tmr-lg);
  border: 1px solid var(--tm-line);
  background: linear-gradient(180deg, var(--tm-glass-2), var(--tm-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.cap:hover { transform: translateY(-4px); border-color: var(--tm-neon-line); box-shadow: 0 0 34px -10px rgba(11, 248, 141, .45); }
.cap.feat:hover { box-shadow: var(--tms-tube), 0 0 50px -10px rgba(11, 248, 141, .55); }
.cap-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(11, 248, 141, .3);
  background: rgba(11, 248, 141, .09);
  margin-block-end: 18px;
  box-shadow: 0 0 18px -8px rgba(11, 248, 141, .7);
}
.cap-ico svg { width: 22px; height: 22px; color: var(--tm-neon-hi); }
.cap h3 { font-size: 1.1rem; font-weight: 700; margin-block-end: 10px; }
.cap p { color: var(--tm-muted); font-size: .93rem; line-height: 1.75; }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--tm-line);
  border-radius: var(--tmr-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--tm-glass-2), var(--tm-glass));
}
.metric { padding: 34px 26px; text-align: center; border-inline-end: 1px solid var(--tm-line-soft); }
.metric:last-child { border-inline-end: none; }
.metric .val {
  font-family: var(--tmf-disp);
  font-weight: 600;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  color: var(--tm-tx-strong);
}
.metric .val b { font-weight: 600; color: var(--tm-neon-hi); text-shadow: 0 0 18px rgba(11, 248, 141, .5); }
.metric .lbl { font-family: var(--tmf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tm-dim); margin-block-start: 8px; }

.agg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block-end: 30px; }
.agg { border: 1px solid var(--tm-line); border-radius: var(--tmr-md); padding: 26px 24px; background: var(--tm-glass); }
.agg .v { font-family: var(--tmf-disp); font-weight: 600; font-size: 2.1rem; color: var(--tm-tx-strong); }
.agg .v b { color: var(--tm-neon-hi); font-weight: 600; text-shadow: 0 0 18px rgba(11, 248, 141, .5); }
.agg .l { color: var(--tm-muted); font-size: .9rem; margin-block-start: 6px; }

/* ============================================================
   STEPS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.step {
  border: 1px solid var(--tm-line);
  border-radius: var(--tmr-lg);
  padding: 28px 26px;
  background: linear-gradient(180deg, var(--tm-glass-2), var(--tm-glass));
  position: relative;
}
.step-dot {
  position: absolute;
  inset-block-start: 28px;
  inset-inline-end: 26px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--tm-neon); box-shadow: 0 0 14px var(--tm-neon), 0 0 30px rgba(11, 248, 141, .5);
}
.step .num { font-family: var(--tmf-mono); font-size: .72rem; letter-spacing: .1em; color: var(--tm-neon-hi); }
.step h3 { font-size: 1.06rem; font-weight: 700; margin-block: 8px; }
.step p { color: var(--tm-muted); font-size: .92rem; }

/* ============================================================
   RESULTS CAROUSEL
   ============================================================ */
.carousel { position: relative; }
/* Vertical padding gives the neon glow of .gcard.mid room before the
   viewport's overflow clip. */
.carousel-viewport { overflow: hidden; padding-block: 18px; margin-block: -18px; }
.carousel-track { display: flex; gap: 20px; transition: transform .5s cubic-bezier(.6, .05, .1, 1); }
.gcard {
  flex: 0 0 calc((100% - 40px) / 3);
  border-radius: var(--tmr-lg);
  border: 1px solid var(--tm-line);
  background: linear-gradient(180deg, var(--tm-glass-2), var(--tm-glass));
  padding: 30px 28px;
  transition: border-color .3s, transform .3s;
}
.gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 16px; }
.gbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--tmf-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tm-neon-hi);
  padding: 5px 10px;
  border-radius: var(--tmr-pill);
  border: 1px solid rgba(11, 248, 141, .3);
  background: rgba(11, 248, 141, .09);
}
.gbadge svg { width: 11px; height: 11px; }
.gcard .tagline { font-family: var(--tmf-mono); font-size: .64rem; color: var(--tm-dim); }
.gsum { font-family: var(--tmf-disp); font-weight: 600; font-size: 2.4rem; color: var(--tm-tx-strong); }
.gcard.mid .gsum { text-shadow: 0 0 22px rgba(11, 248, 141, .35); }
.gper { font-family: var(--tmf-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-neon-hi); margin-block-end: 14px; }
.gspark { width: 100%; height: 40px; display: block; margin-block-end: 16px; overflow: visible; }
.gspark .ln { fill: none; stroke: var(--tm-neon); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(11, 248, 141, .8)); }
.gqt { font-size: .93rem; color: var(--tm-muted); line-height: 1.75; margin-block-end: 18px; }
.gwho { display: flex; align-items: center; gap: 12px; }
.gav {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--tmf-disp); font-weight: 700; font-size: .82rem;
  color: var(--tm-on-neon); background: var(--tm-grad);
}
.gnm { font-family: var(--tmf-disp); font-weight: 700; font-size: .94rem; color: var(--tm-tx-strong); }
.gcity { font-family: var(--tmf-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tm-dim); }

.gcta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-block-start: 20px;
  padding: 12px 20px;
  font-family: var(--tmf-disp); font-weight: 700; font-size: .9rem;
  border-radius: var(--tmr-pill);
  border: 1px solid var(--tm-neon-line);
  background: rgba(11, 248, 141, .08);
  color: var(--tm-neon-hi);
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
}
.gcta svg { width: 15px; height: 15px; }
.gcta:hover { transform: translateY(-2px); background: var(--tm-neon); color: var(--tm-on-neon); box-shadow: var(--tms-glow); }
.gcard.mid .gcta { background: var(--tm-neon); color: var(--tm-on-neon); box-shadow: var(--tms-glow); }

.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-block-start: 32px; }
.cbtn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tm-glass-2);
  border: 1px solid var(--tm-line);
  color: var(--tm-tx-strong);
  transition: .25s;
}
.cbtn:hover { border-color: var(--tm-neon); background: rgba(11, 248, 141, .14); box-shadow: var(--tms-glow); }
.cbtn svg { width: 18px; height: 18px; }
.dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tm-line); border: none; transition: .25s; padding: 0; }
.dot.on { width: 26px; border-radius: var(--tmr-pill); background: var(--tm-neon); box-shadow: 0 0 10px var(--tm-neon); }

.disclaimer { font-size: .78rem; color: var(--tm-dim); text-align: center; max-width: 760px; margin-inline: auto; margin-block-start: 30px; line-height: 1.8; }

/* ============================================================
   CTA
   ============================================================ */
.cta-band {
  border-radius: var(--tmr-xl);
  padding: 64px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(11, 248, 141, .1) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { margin-block-end: 14px; }
.cta-band p { color: var(--tm-muted); margin-inline: auto; margin-block-end: 28px; max-width: 50ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-block-start: 1px solid var(--tm-line-soft); padding-block-start: 68px; margin-block-start: 40px; background: rgba(5, 11, 26, .55); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand .brand { margin-block-end: 16px; }
.footer-brand p { color: var(--tm-muted); font-size: .9rem; max-width: 38ch; }
.footer-col h2 { font-family: var(--tmf-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tm-dim); font-weight: 500; margin-block-end: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--tm-muted); font-size: .9rem; transition: color .2s; }
.footer-col a:hover { color: var(--tm-neon-hi); }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-block-start: 1px solid var(--tm-line-soft);
  margin-block-start: 48px; padding-block: 22px;
  font-size: .82rem; color: var(--tm-dim);
}
.footer-bar .lnk { display: flex; gap: 20px; }
.footer-bar a:hover { color: var(--tm-neon-hi); }

.risk { background: rgba(4, 9, 21, .8); border-block-start: 1px solid var(--tm-line-soft); padding-block: 22px; }
.risk p { font-size: .78rem; color: var(--tm-dim); line-height: 1.8; max-width: var(--tm-mw); }

/* ============================================================
   REVEAL
   ============================================================ */
.tm-rise { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.tm-rise.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tm-rise { opacity: 1; transform: none; transition: none; }
  .hero .display .hi, .tm-rise.on .display .hi, .dot-live { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   INNER PAGE COMPONENTS
   ============================================================ */
.page-head { text-align: center; max-width: 800px; margin-inline: auto; padding-block: 20px 8px; }
.page-head .eyebrow { margin-block-end: 16px; }
.page-head p { color: var(--tm-muted); margin-inline: auto; margin-block-start: 16px; max-width: 62ch; }
.page-head .updated { font-family: var(--tmf-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-dim); margin-block-start: 14px; }

/* Capped at the photos' intrinsic 800px width so the image fills the frame
   exactly. Height-agnostic: the 800x447 chart sits beside the 800x800 photos
   without either being stretched. */
.media-frame { max-width: 800px; margin-inline: auto; border-radius: var(--tmr-xl); overflow: hidden; border: 1px solid var(--tm-line); box-shadow: var(--tms-sh), 0 0 60px -24px rgba(11, 248, 141, .35); position: relative; }
.media-frame img { width: 100%; height: auto; }
.media-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 50%, rgba(5, 11, 26, .35)); pointer-events: none; }

.city-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.city-chip { font-family: var(--tmf-mono); font-size: .74rem; letter-spacing: .06em; color: var(--tm-tx-strong); padding: 9px 20px; border-radius: var(--tmr-pill); border: 1px solid var(--tm-neon-line); background: rgba(11, 248, 141, .06); box-shadow: 0 0 16px -6px rgba(11, 248, 141, .5); }

.cap.team { text-align: center; }
.cap.team .role { font-family: var(--tmf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tm-neon-hi); display: block; margin-block-end: 10px; }
.cap.team .av {
  width: 58px; height: 58px; border-radius: 50%;
  margin-inline: auto; margin-block-end: 16px;
  display: grid; place-items: center;
  font-family: var(--tmf-disp); font-weight: 700; color: var(--tm-on-neon);
  background: var(--tm-grad); box-shadow: var(--tms-glow);
}

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.post { display: flex; flex-direction: column; border-radius: var(--tmr-lg); border: 1px solid var(--tm-line); background: linear-gradient(180deg, var(--tm-glass-2), var(--tm-glass)); padding: 28px 26px; transition: transform .3s, border-color .3s, box-shadow .3s; }
.post:hover { transform: translateY(-4px); border-color: var(--tm-neon-line); box-shadow: 0 0 34px -10px rgba(11, 248, 141, .45); }
.post-tag { align-self: flex-start; font-family: var(--tmf-mono); font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--tmr-pill); margin-block-end: 14px; border: 1px solid var(--tm-line); }
.post-tag.ai { color: #b9c8ff; background: rgba(46, 96, 255, .12); border-color: rgba(120, 150, 255, .35); }
.post-tag.crypto { color: var(--tm-neon-hi); background: rgba(11, 248, 141, .09); border-color: rgba(11, 248, 141, .3); }
.post h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.4; margin-block-end: 10px; }
.post p { color: var(--tm-muted); font-size: .93rem; line-height: 1.75; flex: 1; }
.post-meta { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--tm-line-soft); font-family: var(--tmf-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tm-dim); }

/* FAQ accordion — WAI-ARIA APG pattern: the button lives INSIDE the heading. */
.faq-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--tm-line); border-radius: var(--tmr-md); background: linear-gradient(180deg, var(--tm-glass-2), var(--tm-glass)); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq-item:hover, .faq-item.open { border-color: var(--tm-neon-line); }
.faq-item.open { box-shadow: 0 0 30px -12px rgba(11, 248, 141, .5); }
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: 0; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%;
  padding: 20px 24px;
  background: none; border: none;
  font-family: var(--tmf-disp); font-size: 1.02rem; font-weight: 600;
  color: var(--tm-tx-strong);
  text-align: start;
  line-height: 1.5;
}
.faq-q:focus-visible { outline: 2px solid var(--tm-neon-hi); outline-offset: -3px; }
.faq-q svg { width: 18px; height: 18px; color: var(--tm-neon); flex-shrink: 0; transition: transform .3s; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-item.open .faq-a { max-height: 520px; }
.faq-a p { padding: 0 24px 20px; color: var(--tm-muted); font-size: .95rem; line-height: 1.85; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.info-col { display: flex; flex-direction: column; gap: 20px; }
.info-media { border-radius: var(--tmr-lg); overflow: hidden; border: 1px solid var(--tm-line); box-shadow: var(--tms-sh); }
.info-row { display: flex; align-items: flex-start; gap: 14px; }
.info-ico { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(11, 248, 141, .3); background: rgba(11, 248, 141, .09); }
.info-ico svg { width: 20px; height: 20px; color: var(--tm-neon-hi); }
.info-row h3 { font-size: 1rem; font-weight: 700; margin-block-end: 3px; }
.info-row p { color: var(--tm-muted); font-size: .92rem; }
.info-row a:hover { color: var(--tm-neon-hi); }
.info-col > p { color: var(--tm-muted); }
.reg-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.reg-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--tm-muted); font-size: .96rem; }
.reg-list svg { width: 20px; height: 20px; color: var(--tm-neon); flex-shrink: 0; margin-block-start: 3px; filter: drop-shadow(0 0 4px rgba(11, 248, 141, .6)); }

/* No overflow:hidden here — it would clip the country dropdown, which is
   absolutely positioned inside the form. The dot layer takes the corner
   radius itself instead. */
.form-card.solo {
  border-radius: var(--tmr-lg);
  color: var(--tm-tx);
  padding: 36px 34px;
  position: relative;
}
.form-card.solo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(11, 248, 141, .09) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%);
  pointer-events: none;
}
.form-card.solo > * { position: relative; }

.legal { max-width: 840px; margin-inline: auto; }
.legal h2 { font-family: var(--tmf-disp); font-size: 1.24rem; font-weight: 700; color: var(--tm-tx-strong); margin-block: 34px 12px; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { color: var(--tm-muted); font-size: .96rem; line-height: 1.9; margin-block-end: 12px; }
.legal ul { color: var(--tm-muted); font-size: .96rem; line-height: 1.9; margin-block-end: 12px; margin-inline-start: 20px; }
.legal a { color: var(--tm-neon-hi); }

/* standalone centred notice (thanks / 404) */
.notice { max-width: 620px; margin-inline: auto; text-align: center; padding-block: 60px; }
.notice .ico { width: 76px; height: 76px; margin-inline: auto; margin-block-end: 26px; display: grid; place-items: center; border-radius: 22px; background: rgba(11, 248, 141, .09); border: 1px solid var(--tm-neon-line); box-shadow: var(--tms-tube); }
.notice .ico svg { width: 34px; height: 34px; color: var(--tm-neon-hi); }
.notice p { color: var(--tm-muted); margin-block-start: 16px; }
.notice .btn { margin-block-start: 30px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .menu { gap: 18px; }
  .menu a { font-size: .84rem; }
}

@media (max-width: 960px) {
  .hero-panel { grid-template-columns: 1fr; }
  .hero-left { padding: 44px 34px; }
  .hero-right { border-inline-start: none; border-block-start: 1px solid var(--tm-neon-line); }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media { min-height: 260px; }
  .voices-row { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .caps-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-inline-end: none; }
  .metric:nth-child(1), .metric:nth-child(2) { border-block-end: 1px solid var(--tm-line-soft); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .agg-row { grid-template-columns: 1fr; }
  .gcard { flex: 0 0 calc((100% - 20px) / 2); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .blog-grid { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
}

/* The full nav (7 links + EN/FR toggle + CTA) needs ~980px in French;
   collapse earlier than the content breakpoints. */
@media (max-width: 1020px) {
  :root { --tm-nav-h: 66px; }
  .menu { display: none; }
  .burger { display: flex; }
  .nav.open .menu {
    display: flex;
    position: absolute;
    inset-block-start: var(--tm-nav-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 24px;
    background: rgba(5, 11, 26, .97);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--tm-neon-line);
  }
  .nav.open .menu a { padding-block: 10px; font-size: .98rem; }
  .nav.open .menu .btn { justify-content: center; margin-block-start: 8px; }
  .nav.open .menu a.lang-link { align-self: flex-start; padding: 6px 14px; margin-block: 4px; font-size: .78rem; }
}

@media (max-width: 680px) {
  .sect { padding-block: 60px; }
  .hero { padding-block: 32px 40px; }
  .hero-left { padding: 38px 24px; }
  .hero-right { padding: 30px 24px; }
  .caps-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-inline-end: none; border-block-end: 1px solid var(--tm-line-soft); }
  .metric:last-child { border-block-end: none; }
  .steps { grid-template-columns: 1fr; }
  .gcard { flex: 0 0 100%; }
  .split-copy { padding: 38px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bar { flex-direction: column; gap: 12px; text-align: center; }
  .cta-band { padding: 48px 24px; }
  .form-card.solo { padding: 30px 22px; }
  .stat-row { flex-wrap: wrap; }
}