/* ============================================================
   Bytamic · MS365 Security Landing
   Theme: dark, locked (brand: bytamic.com / support.bytamic.com)
   Accent: #a9ed02 (single accent, locked page-wide)
   Type: Poppins (display/body) + JetBrains Mono (numbers, labels)
   Radius system: pills/buttons = 999px · inputs = 10px ·
   cards = SHARP with a 26px cut corner + lime scan segment (.card-sig)
   Brand signature: .num-light — monumental mono digits with a lime
   light beam passing through the glyphs.
   ============================================================ */

:root {
  --bg: #070707;
  --bg-2: #0c0c0f;
  --bg-3: #111114;
  --bg-3-rgb: 17, 17, 20;  /* --bg-3, for scrims that need their own alpha */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f4f2;
  --muted: #9d9da2;
  --muted-2: #8a8a92; /* AA on #070707/#0c0c0f for small text */
  --accent: #a9ed02;
  --accent-soft: rgba(169, 237, 2, 0.08);
  --accent-line: rgba(169, 237, 2, 0.28);
  --radius-card: 0px;
  --radius-input: 10px;
  --font-sans: "Poppins", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #0a0a0a; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

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

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}
.container--narrow { max-width: 800px; }

/* Off-screen for the eye, present for everything else: the accessibility tree,
   the document outline, the crawler. For text the design deliberately does not
   paint but the page still has to state. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Type ---------- */

.h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.18;
  max-width: 21ch;
}

.section-sub {
  margin-top: 16px;
  color: var(--muted);
  max-width: 58ch;
  font-size: 1.03rem;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

/* ---------- Section grid (subtle infinite grid, brightens near the cursor) ----------
   Canvas injected by app.js on hover-capable devices only. Sits behind content,
   edge-faded so it never fights the copy. */
[data-grid] { position: relative; isolation: isolate; }
[data-grid] > .container { position: relative; z-index: 1; }
.sectiongrid {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(135% 130% at 50% 38%, #000 42%, transparent 100%);
          mask-image: radial-gradient(135% 130% at 50% 38%, #000 42%, transparent 100%);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.18s ease, background-color 0.18s ease,
              border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--accent);
  color: #0a0a0a;
}
.btn--primary:hover { filter: brightness(1.06); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--accent-line);
  background: rgba(255, 255, 255, 0.04);
}

.btn--nav { padding: 11px 20px; font-size: 0.88rem; }

/* ---------- Card signature ----------
   Sharp body, one cut corner (security-tag notch), lime scan segment
   on the top edge. THE way Bytamic presents a card. */

.card-sig {
  position: relative;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.card-sig::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--accent);
  opacity: 0.9;
  z-index: 1;
}

/* ---------- Nav ---------- */

/* The nav is sticky over the hero, so the lamp's glow slides underneath it. A
   scrim that simply stops at the nav's bottom edge cuts that light in half: it
   measured a 118-point jump in luminance across a single pixel row — the light
   ends rather than fades, and the whole thing reads as artwork shoved under a
   black rectangle. The 1px border was the other half of that seam.

   So the scrim carries on past the nav and fades out (see ::after), and the
   border is gone. The trick that makes it invisible everywhere else: the scrim
   is the page's own background colour, so over plain --bg it changes nothing at
   all. It only shows where there is light to soften. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  --nav-fade: 64px;
  background: rgba(7, 7, 7, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* The scrim's continuation: starts at exactly the alpha the nav ends on, so
   there is no step at the seam, then ramps to nothing. The backdrop blur still
   stops at the nav's edge, but blurring an already-smooth glow returns roughly
   the same glow — that boundary has nothing to reveal. */
.nav::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--nav-fade);
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(7, 7, 7, 0.82) 0%,
    rgba(7, 7, 7, 0.52) 34%,
    rgba(7, 7, 7, 0.2) 64%,
    rgba(7, 7, 7, 0) 100%);
}

.nav__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
  height: 68px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.nav__logo img { height: 38px; width: auto; }

.nav__links {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  margin-right: auto;
}
.nav__links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav__links a:hover { color: var(--text); }

.nav__controls {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  margin-left: auto;
}

/* Region segmented control */
.seg {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg__btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.seg__btn:hover { color: var(--text); }
.seg__btn.is-active {
  background: var(--accent);
  color: #0a0a0a;
}

/* Language toggle */
.lang { display: inline-flex; align-items: center; gap: 6px; }
.lang__btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  transition: color 0.15s ease;
}
.lang__btn:hover { color: var(--text); }
.lang__btn.is-active { color: var(--text); }
.lang__sep { color: var(--muted-2); font-size: 0.75rem; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6.5vh, 80px) clamp(64px, 9vh, 110px);
  /* own stacking context so the layer order below is authoritative:
     bg (0) < webgl (1) < content (3) */
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* the lamp is the hero's light now — keep only the faint drifting grid */
  mask-image: radial-gradient(1200px 700px at 50% 0%, rgba(0,0,0,0.4), transparent 80%);
  -webkit-mask-image: radial-gradient(1200px 700px at 50% 0%, rgba(0,0,0,0.4), transparent 80%);
}

/* The technical grid drifts slowly and endlessly to the left; the loop moves
   exactly one 72px tile, so it reads as continuous motion with no seam.
   Transform-only (compositor), one extra tile of headroom on the right. */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0 -72px 0 0;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: gridDrift 10s linear infinite;
  will-change: transform;
}

@keyframes gridDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-72px); }
}

/* WebGL hero layer: transparent canvas between the CSS grid and the content.
   Fades in only once the R3F scene has rendered its first frame (data-ready). */
.hero__webgl {
  position: absolute;
  inset: 0;
  /* negative z inside the isolated .hero context: a below-layer composites
     reliably BEHIND the content, sidestepping the hardware-layer-on-top quirk
     that a z-index >= 0 canvas suffers next to promoted DOM. */
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__webgl[data-ready="1"] { opacity: 1; }
.hero__webgl canvas { display: block; }

/* One centred column under the lamp, reading top-down: number → context →
   status. The deadline number is the single dominant of this view; nothing else
   is painted here that could fight it for the eye. */
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.hero__sub {
  margin-top: 22px;
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 46ch;
}

.hero__ctas {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- The lamp: a beam of light that ignites the deadline ----------
   Vanilla port of the Aceternity "Lamp" (conic fans + filament + glow),
   recoloured to Schutzlimone. The beam is aimed at the counter below it: the
   number is what the light is for. */
.hero-lamp {
  position: relative;
  isolation: isolate;
  text-align: center;
  width: 100%;
  max-width: 54rem;
  margin-inline: auto;
  padding-top: clamp(232px, 31vh, 312px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-lamp > .eyebrow,
.hero-lamp > .hero__sub,
.hero-lamp > .hero__ctas { position: relative; z-index: 2; }
.hero-lamp > .eyebrow { color: var(--accent); }
.hero-lamp .hero__sub { margin-inline: auto; text-align: center; max-width: 42ch; }
.hero-lamp .hero__ctas { justify-content: center; }

.lamp {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(118%, 52rem);
  height: clamp(340px, 44vh, 440px);
  z-index: 0;
  pointer-events: none;
  transform: translateX(-50%);
  animation: lampIn 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  --line-y: 36%;
}
/* The clip belongs to the fans, not to the whole lamp.
   It used to sit on .lamp, and it was cutting the halo: blur(64px) actually
   reaches about 1.5x its radius (~96px), so the halo's light wanted to climb to
   y~107 while the box stopped at y~127 — the glow was sliced off flat and the
   whole lamp read as a rectangle pasted under the header.
   The fans genuinely do need clipping: each cone is wider than the lamp and its
   occluders are solid --bg panels, so unclipping everything just trades the
   sliced glow for those panels painting over the hero's grid (measured: ~6.9k
   pixels darkened outside the box). This box matches the old one exactly —
   inset:0 on the same parent, so the cones' % offsets resolve identically — and
   the halo, core and filament now sit outside it and fade out on their own. */
.lamp__fans {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
@keyframes lampIn {
  from { opacity: 0; transform: translateX(-50%) scaleX(0.62); }
  to   { opacity: 1; transform: translateX(-50%) scaleX(1); }
}

/* two conic fans forming the downward V of light */
.lamp__cone {
  position: absolute;
  top: var(--line-y);
  height: 15rem;
  width: 30rem;
  max-width: 66%;
}
.lamp__cone--l {
  right: 50%;
  background: conic-gradient(from 70deg at center top, rgba(169, 237, 2, 0.55), transparent 16%, transparent);
}
.lamp__cone--r {
  left: 50%;
  background: conic-gradient(from 290deg at center top, transparent, transparent 84%, rgba(169, 237, 2, 0.55));
}
/* base-coloured panels, masked to fade — they carve the fan's soft edges */
.lamp__occl { position: absolute; background: var(--bg); }
.lamp__occl--b {
  left: 0; bottom: 0; width: 100%; height: 10rem;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
          mask-image: linear-gradient(to top, #000, transparent);
}
.lamp__cone--l .lamp__occl--l {
  left: 0; bottom: 0; width: 10rem; height: 100%;
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
          mask-image: linear-gradient(to right, #000, transparent);
}
.lamp__cone--r .lamp__occl--r {
  right: 0; bottom: 0; width: 10rem; height: 100%;
  -webkit-mask-image: linear-gradient(to left, #000, transparent);
          mask-image: linear-gradient(to left, #000, transparent);
}

/* the glow around the filament */
.lamp__halo {
  position: absolute;
  top: var(--line-y); left: 50%;
  width: 27rem; max-width: 82%; height: 8rem;
  transform: translate(-50%, -52%);
  border-radius: 999px;
  background: rgba(169, 237, 2, 0.5);
  filter: blur(64px);
  opacity: 0.62;
}
.lamp__core {
  position: absolute;
  top: var(--line-y); left: 50%;
  width: 15rem; max-width: 56%; height: 7rem;
  transform: translate(-50%, -46%);
  border-radius: 999px;
  background: #cbff58;
  filter: blur(34px);
  opacity: 0.7;
}
/* the bright filament */
.lamp__line {
  position: absolute;
  top: var(--line-y); left: 50%;
  width: 30rem; max-width: 80%; height: 2.5px;
  transform: translate(-50%, -1px);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(169, 237, 2, 0.9) 20%, #e6ff8f 50%, rgba(169, 237, 2, 0.9) 80%, transparent);
  box-shadow: 0 0 22px 2px rgba(169, 237, 2, 0.65);
}

@media (prefers-reduced-motion: reduce) {
  .lamp { animation: none; opacity: 1; transform: translateX(-50%); }
}

/* ---------- Brand signature: the illuminated number ----------
   Monumental mono digits, lime-stroked, with a beam of light passing
   through the glyphs. Used by the hero deadline, € 10 Mio., 10-25 %. */

.num-light {
  font-family: var(--font-mono);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(169, 237, 2, 0.38);
  background:
    linear-gradient(105deg, transparent 32%, rgba(228, 255, 132, 0.95) 50%, transparent 68%) no-repeat,
    linear-gradient(rgba(169, 237, 2, 0.13), rgba(169, 237, 2, 0.13));
  background-size: 55% 100%, 100% 100%;
  background-position: -80% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: numSweep 8.5s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}

@keyframes numSweep {
  0%, 14%  { background-position: -80% 0, 0 0; }
  56%, 100% { background-position: 190% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .num-light {
    animation: none;
    background-position: 50% 0, 0 0; /* beam parked mid-glyph */
  }
}

/* The counter: number -> context -> status, centred under the lamp */
.hero__counter {
  position: relative;
  z-index: 1;              /* above .lamp — its opaque occlusion panels must not dim the number */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 30rem;
  margin-top: 0;
}

.hero__counter-num {
  font-size: clamp(7.5rem, 13vw, 12rem);
  letter-spacing: -0.055em;
  line-height: 0.82;
  /* solid white under the lamp — override the .num-light lime stroke + sweep */
  background: none;
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
  animation: none;
}
body[data-region="ch"] .hero__counter-num { font-size: clamp(5.5rem, 8.8vw, 8.2rem); }

.hero__counter-label {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Regulatory status card: the base of the instrument */
.clock {
  width: 100%;
  margin-top: 22px;
  background: linear-gradient(180deg, rgba(17, 17, 20, 0.96), rgba(12, 12, 15, 0.96));
  border: 1px solid var(--line-strong);
  padding: clamp(20px, 2.2vw, 26px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.clock__rows { border-top: none; }
.clock__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 13px;
}
.clock__row + .clock__row { border-top: 1px solid var(--line); }
.clock__row-name {
  font-size: 0.83rem;
  color: var(--muted);
}

.badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  white-space: nowrap;
}
.badge--live {
  border-color: var(--accent-line);
  color: var(--accent);
  background: var(--accent-soft);
}

.clock__foot {
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--muted-2);
  line-height: 1.6;
}
.clock__foot strong { color: var(--text); font-family: var(--font-mono); font-weight: 600; }

/* ---------- Timeline (vertical, scroll-lit rail) ---------- */

.timeline {
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  padding-block: clamp(56px, 9vh, 120px);
}

.timeline__title {
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: clamp(20px, 4vh, 44px);
  max-width: 24ch;
}

/* Deadlines on the left, the globe holding position on the right.
   align-items:start is deliberate: with the default stretch the feed's height
   would be coupled to the globe, which corrupts the beam's progress denominator
   and over-extends the rail. No overflow:hidden anywhere here either — it would
   kill the sticky columns and clip the beam's glow. */
.timeline__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.timeline__feed { position: relative; min-width: 0; }

/* base rail: a faint vertical line, faded to nothing at both ends */
.timeline__rail {
  position: absolute;
  left: 21px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%, var(--line-strong) 8%, var(--line-strong) 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  z-index: 0;
}

/* lit beam: grows top->down with scroll progress (height + opacity set in JS) */
.timeline__beam {
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 2px;
  height: 0;
  opacity: 0;
  border-radius: 2px;
  background: linear-gradient(to top,
    var(--accent) 0%, var(--accent) 8%, rgba(169, 237, 2, 0.32) 48%, transparent 100%);
  box-shadow: 0 0 10px rgba(169, 237, 2, 0.45);
  will-change: height;
}
/* glowing leading edge at the beam tip */
.timeline__beam::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 3px rgba(169, 237, 2, 0.65);
}

.timeline__items { list-style: none; position: relative; z-index: 1; }

.tl-item {
  display: flex;
  gap: clamp(20px, 4vw, 44px);
  padding-top: clamp(40px, 9vh, 124px);
}
.tl-item:first-child { padding-top: clamp(10px, 2vh, 28px); }

/* left column: sticky date + station marker */
.tl-item__aside {
  position: sticky;
  top: clamp(96px, 14vh, 150px);
  align-self: flex-start;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 30px);
  flex: none;
  width: clamp(150px, 24vw, 320px);
}

.tl-item__marker {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);          /* opaque: masks the rail passing behind */
}
.tl-item__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.tl-item.is-past .tl-item__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(169, 237, 2, 0.5);
}
.tl-item.tl-item--today .tl-item__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(169, 237, 2, 0.16), 0 0 14px rgba(169, 237, 2, 0.65);
}

.tl-item__date {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.tl-item__date--big {
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.tl-item.is-past .tl-item__date--big { color: var(--text); }
.tl-item.tl-item--today .tl-item__date--big { color: var(--accent); }
.tl-item__date--inline { display: none; }   /* shown on mobile only */

/* right column: the event */
.tl-item__body {
  flex: 1;
  min-width: 0;
  padding-top: 9px;
}
.tl-item__label {
  display: block;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 34ch;
  line-height: 1.32;
}
.tl-item__note {
  display: block;
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.6;
}

/* ---------- The regulatory globe (cobe island) ----------
   Square by contract: cobe scales marker quads by height/width, so a non-square
   canvas would draw the pins as ellipses. Holds position while the deadlines
   scroll past; the entry in focus lights its country. */
.timeline__globe {
  position: sticky;
  top: clamp(96px, 16vh, 168px);
  aspect-ratio: 1;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}
.timeline__globe[data-ready="1"] { opacity: 1; }
.timeline__globe[data-webgl="off"] { display: none; }
#globeCanvas { width: 100%; height: 100%; display: block; }

/* label layer — inset over the same box as the canvas (cobe wraps the canvas in
   its own position:relative div, which fills this box, so projected px line up) */
.globe__pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.globe__pin {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(7, 7, 7, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
  will-change: transform;
}
.globe__pin[data-active] {
  color: var(--accent);
  border-color: var(--accent-line);
  background: rgba(169, 237, 2, 0.1);
}

/* ---------- Stakes ---------- */

.stakes { padding-block: clamp(80px, 12vh, 140px); }

.stakes__grid {
  margin-top: clamp(40px, 6vh, 64px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.stakes__big { position: sticky; top: 120px; }

.stakes__amount {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(3.2rem, 8.4vw, 6.6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}
/* CH amount ("CHF 250'000") is longer than the EU one; scale to fit the column */
body[data-region="ch"] .stakes__amount {
  font-size: clamp(2.3rem, 4.9vw, 4.1rem);
  letter-spacing: -0.03em;
}
.stakes__amount-cap {
  display: block;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 38ch;
  line-height: 1.65;
}

.stakes__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 40px);
}

.fact { border-top: 1px solid var(--line); padding-top: 20px; }
.fact__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.fact__body {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ---------- Relief / Good news ---------- */

.relief {
  padding-block: clamp(80px, 12vh, 140px);
  background: var(--bg-2);
  border-block: 1px solid var(--line);
}

.compare {
  margin-top: clamp(40px, 6vh, 60px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.compare__col {
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 36px);
}
.compare__col--before {
  border: 1px solid var(--line);
  background: var(--bg);
}
.compare__col--after {
  border: 1px solid var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), rgba(169, 237, 2, 0.03));
}

.compare__head {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.compare__col--before .compare__head { color: var(--muted-2); }
.compare__col--after .compare__head { color: var(--accent); }

.compare__list { list-style: none; display: grid; gap: 16px; }
.compare__list li {
  display: flex;
  gap: 12px;
  font-size: 0.94rem;
  line-height: 1.6;
}
.compare__col--before .compare__list li { color: var(--muted); }

.compare__mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: 2px;
}
.compare__mark--x {
  border: 1px solid var(--line-strong);
  color: var(--muted-2);
}
.compare__mark--ok {
  background: var(--accent);
  color: #0a0a0a;
}

.savings {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg);
  padding: clamp(24px, 3.5vw, 40px);
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.savings__stat {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent);
  white-space: nowrap;
  line-height: 1;
}
.savings__text {
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 52ch;
}

/* Inline text CTA (after the savings band) */
.link-cta-row { margin-top: 28px; }
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--accent);
  text-decoration: none;
}
.link-cta::after {
  content: "→";
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.link-cta:hover::after { transform: translateX(4px); }

/* ---------- Modules (bento) ---------- */

.modules { padding-block: clamp(80px, 12vh, 140px); }

.modules__grid {
  margin-top: clamp(40px, 6vh, 60px);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: auto auto auto;
  gap: 18px;
}

.mod {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg-2);
  padding: clamp(24px, 3vw, 34px);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mod:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.mod--featured {
  grid-row: 1 / 3;
  border-color: var(--accent-line);
  background:
    radial-gradient(600px 420px at 15% 0%, var(--accent-soft), transparent 70%),
    var(--bg-2);
  justify-content: flex-end;
  min-height: 380px;
}
.mod--featured:hover { border-color: var(--accent); }

.mod:nth-child(4) {
  grid-column: 1 / 3;
  flex-direction: row;
  align-items: baseline;
  gap: clamp(20px, 3vw, 40px);
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255, 255, 255, 0.017) 14px 15px),
    var(--bg-2);
}
.mod:nth-child(4) .mod__body { margin-top: 0; }

.mod__tag {
  position: absolute;
  top: 24px;
  left: clamp(24px, 3vw, 34px);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  background: rgba(7, 7, 7, 0.5);
  padding: 6px 12px;
  border-radius: 999px;
}

.mod__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: 0.1em;
}

.mod__title {
  margin-top: 10px;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.mod--featured .mod__title { font-size: clamp(1.3rem, 2.2vw, 1.65rem); max-width: 18ch; }

.mod__body {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 52ch;
}

/* ---------- Process ---------- */

.process {
  padding-block: clamp(80px, 12vh, 140px);
  background: var(--bg-2);
  border-block: 1px solid var(--line);
}

.phases {
  margin-top: clamp(44px, 6vh, 64px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  counter-reset: phase;
}

.phase {
  border-top: 2px solid var(--line-strong);
  padding-top: 22px;
  position: relative;
}
.phase::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 42px;
  height: 2px;
  background: var(--accent);
}

.phase__week {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.phase__title {
  margin-top: 10px;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.phase__body {
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--muted);
}
.phase__effort {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 10px;
}

.deliverables {
  margin-top: clamp(48px, 7vh, 72px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg);
  padding: clamp(24px, 3.5vw, 40px);
}
.deliverables__head {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.deliverables__grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
}
.deliverables__grid li {
  position: relative;
  padding-left: 30px;
  font-size: 0.93rem;
  color: var(--muted);
  line-height: 1.6;
}
.deliverables__grid li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.deliverables__cta {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.deliverables__cta-note {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------- Why ---------- */

.why {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 12vh, 140px);
}
/* soft brand gradient field behind the bento (subtle, lime only) */
.why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 8% 0%, rgba(169, 237, 2, 0.07), transparent 60%),
    radial-gradient(60% 60% at 100% 100%, rgba(169, 237, 2, 0.05), transparent 62%);
}
.why > .container { position: relative; z-index: 1; }

.why__grid {
  margin-top: clamp(36px, 5vh, 56px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.5vw, 20px);
  counter-reset: why;
}

/* bento sizing: wide-left / narrow-right, then narrow-left / wide-right */
.why__item:nth-child(1) { grid-column: span 2; }
.why__item:nth-child(4) { grid-column: span 2; }

.why__item {
  position: relative;
  counter-increment: why;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(24px, 2.3vw, 36px);
  background: var(--bg-3);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
/* Copy sits above the gradient mesh; the mesh itself opts out (z-index 0). */
.why__item > :not(.agrad) { position: relative; z-index: 1; }
.why__item::after {
  content: counter(why, decimal-leading-zero);
  position: absolute;
  top: clamp(18px, 2vw, 26px);
  right: clamp(18px, 2vw, 26px);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--muted-2);
}
.why__item:hover {
  border-color: var(--accent-line);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

/* ---------- animated gradient mesh (the bento's light) ----------
   A port of the "animated gradient" treatment: several oversized colour
   blobs per card, drifting out of phase, so the light in a card is never
   quite the same twice. Two deliberate departures from the original:

   - Radial-gradients instead of solid SVG circles under a blur filter.
     Identical read, but a filter pass over ~12 large layers repaints on
     every scroll frame, and this section sits mid-page. Gradients composite.
   - Geometry is a tuned table, not Math.random() per mount. Random blobs
     re-roll the composition on every reload, which is unreviewable and can
     deal a bad hand (all three blobs stacked in one corner). Drift keeps the
     organic feel; placement stays art-directed.

   Blobs carry their own hue via --blob (r,g,b) so app.js can hand each card
   a palette. Hues stay inside the lime family — see initWhyGradient(). */
.agrad {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* isolate so the blobs screen against each other and nothing else — without
     it they blend with whatever the card happens to sit on, and the card's
     :hover transform would silently change the blend by creating a stacking
     context only while hovered */
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
/* The blur lives on its own layer, INSIDE the clip but without clipping of its
   own. Blurring the clipped result instead would feather the cut edge and ring
   every card in a dark vignette; this way blobs blur first and the card edge
   stays a clean cut. It is also the step that turns three circles into one
   mesh — without it they read as three spots. */
.agrad__field {
  position: absolute;
  inset: 0;
  filter: blur(34px);
}
.agrad__blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  /* --blob-o is the blob's own weight (set per blob in JS); --agrad-gain dims
     the whole mesh per breakpoint. They are separate because the narrower the
     card, the more of it is text — see the gain overrides below. */
  opacity: calc(var(--blob-o, 0.4) * var(--agrad-gain, 1));
  /* Screen, not normal alpha. The original rides on a light background, where
     a 30%-alpha circle reads as a clean pastel. Over #111114 that same maths
     lands on dirty olive (0.22 lime over near-black ≈ #324114), and the whole
     section goes muddy. Screening makes overlaps add light instead of
     occluding, which is what actually reads as a gradient mesh on black. */
  mix-blend-mode: screen;
  background: radial-gradient(closest-side,
    rgba(var(--blob), 0.9) 0%,
    rgba(var(--blob), 0.45) 46%,
    rgba(var(--blob), 0) 74%);
  animation: agradDrift var(--blob-dur, 24s) cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
  animation-delay: var(--blob-delay, 0s);
  will-change: transform;
}
/* Peak-tamer, not a blackout. Measured: a blob drifting under a paragraph hits
   2.4:1 against the old #9d9da2 body colour, where AA wants 4.5:1 — and a veil
   heavy enough to rescue that colour erases the mesh entirely. There is no
   opacity that satisfies both, so the body copy went up to full --text instead
   (see .why__item p). This only knocks the brightest peaks off the reading
   zone and leans the light toward the open right-hand side of each card. */
.agrad__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(101deg,
      rgba(var(--bg-3-rgb), 0.42) 0%,
      rgba(var(--bg-3-rgb), 0.3) 38%,
      rgba(var(--bg-3-rgb), 0.08) 72%,
      rgba(var(--bg-3-rgb), 0) 100%);
}
/* Same five-stop wander as the original, driven by per-blob --tx/--ty. */
@keyframes agradDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(calc(100% * var(--tx-1)), calc(100% * var(--ty-1)), 0); }
  40% { transform: translate3d(calc(100% * var(--tx-2)), calc(100% * var(--ty-2)), 0); }
  60% { transform: translate3d(calc(100% * var(--tx-3)), calc(100% * var(--ty-3)), 0); }
  80% { transform: translate3d(calc(100% * var(--tx-4)), calc(100% * var(--ty-4)), 0); }
}
/* Reduced motion keeps the colour, drops the wander — the blobs are laid out
   to read as a composition standing still, not as an animation mid-pause. */
@media (prefers-reduced-motion: reduce) {
  .agrad__blob { animation: none; }
}

/* On a wide card the copy occupies the left and the light has the right-hand
   side to itself. As the grid collapses, the text spreads until it covers the
   whole card and every blob is behind a word — measured at 390px, an ungained
   blob put pure lime under white text at 1.29:1. So the mesh gives way as the
   card narrows: it is still the same light, turned down to where the copy
   stays legible on top of it. */
@media (max-width: 920px) {
  .agrad { --agrad-gain: 0.85; }
}
@media (max-width: 680px) {
  .agrad { --agrad-gain: 0.75; }
  /* single column: the copy fills the card, so the veil stops leaning left
     and simply holds a floor under all of it */
  .agrad__veil {
    background: linear-gradient(101deg,
      rgba(var(--bg-3-rgb), 0.5) 0%,
      rgba(var(--bg-3-rgb), 0.44) 50%,
      rgba(var(--bg-3-rgb), 0.34) 100%);
  }
}

.why__item h3 {
  font-size: clamp(1.08rem, 1.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.why__item--lead h3 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); }
/* Full-strength ink, not --muted like every other section's body copy. These
   cards are lit surfaces now: --muted (#9d9da2) measured 2.4:1 against a lime
   blob drifting behind it, and no veil rescues it without erasing the mesh.
   The reference component makes the same trade for the same reason (its cards
   run text-foreground / text-foreground-80 over the gradient, not a muted
   tone). Size and weight still carry the hierarchy against the h3. */
.why__item p {
  margin-top: 12px;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.62;
  max-width: 48ch;
}

/* ---------- FAQ ---------- */

.faq {
  padding-block: clamp(72px, 10vh, 120px);
  background: var(--bg-2);
  border-block: 1px solid var(--line);
}

.faq__list { margin-top: clamp(28px, 4vh, 44px); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }

.faq__icon {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--muted);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease;
}
.faq__icon::before {
  width: 14px; height: 1.5px;
  transform: translate(-50%, -50%);
}
.faq__icon::after {
  width: 1.5px; height: 14px;
  transform: translate(-50%, -50%);
}
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after { background: var(--accent); }

.faq__item > p {
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 64ch;
  padding-bottom: 24px;
}

/* ---------- Final CTA ---------- */

.cta {
  position: relative;
  padding-block: clamp(88px, 13vh, 150px);
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 500px at 22% 30%, rgba(169, 237, 2, 0.05), transparent 65%);
}

.cta__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.cta__h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.14;
  max-width: 16ch;
}
.cta__sub {
  margin-top: 18px;
  color: var(--muted);
  font-size: 1.03rem;
  max-width: 46ch;
}

.steps {
  margin-top: 40px;
  list-style: none;
  display: grid;
  gap: 0;
}
.step {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__label { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.step__meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

.cta__risk {
  margin-top: 28px;
  padding-left: 18px;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 46ch;
}

/* ---------- Form ---------- */

.form {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3.2vw, 38px);
  display: grid;
  gap: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.form__field { display: grid; gap: 7px; }

.form__field label,
.form__consent label {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
}
.form__opt { color: var(--muted-2); font-weight: 400; }

/* Honeypot: kept out of sight and out of the tab order, but still a real, focusable
   field in the DOM — display:none is the one thing the cheap bots do check for. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__field input,
.form__field textarea {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-input);
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
  resize: vertical;
}
.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(169, 237, 2, 0.14);
}
.form__field input[aria-invalid="true"],
.form__field textarea[aria-invalid="true"] {
  border-color: #f87171;
}

.form__error {
  display: none;
  font-size: 0.78rem;
  color: #f87171;
}
.form__error.is-visible { display: block; }

.form__consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.form__consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
  cursor: pointer;
}
.form__consent label {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.55;
  cursor: pointer;
}
/* This link is the legal basis for everything the form sets in motion, so it has
   to read as a link and not as more small print: full-strength text against the
   muted label around it. Clicking it does not tick the box — a label's activation
   behaviour skips interactive descendants. */
.form__consent label a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--muted-2);
  text-underline-offset: 2px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.form__consent label a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.form__submit { width: 100%; margin-top: 4px; }
.form__submit[disabled] { opacity: 0.6; cursor: wait; transform: none; }

.form__note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-align: center;
  margin-top: -4px;
}

.form__status {
  display: none;
  font-size: 0.88rem;
  line-height: 1.6;
}
.form__status.is-ok { display: block; color: var(--accent); }
.form__status.is-err { display: block; color: #f87171; }
.form__status a { color: inherit; }

/* Success state replaces the form */
.form--done .form__field,
.form--done .form__consent,
.form--done .form__submit,
.form--done .form__note,
.form--done .form__error { display: none; }
.form--done { align-content: center; min-height: 320px; text-align: center; }
.form--done .form__status.is-ok { font-size: 1.05rem; }

/* ---------- Mobile sticky CTA ---------- */

.mobile-cta {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 40;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-cta .btn { width: 100%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.mobile-cta[data-visible] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

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

.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(40px, 6vh, 64px);
  background: var(--bg);
}

.footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.footer__brand img { height: 26px; width: auto; }
.footer__brand p {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.footer__links {
  display: flex;
  gap: clamp(16px, 3vw, 36px);
  justify-content: center;
  flex-wrap: wrap;
}
.footer__links a {
  font-size: 0.86rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer__links a:hover { color: var(--accent); }

.footer__legal {
  font-size: 0.76rem;
  color: var(--muted-2);
  max-width: 34ch;
  line-height: 1.6;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
  .nav__links { gap: 12px; }
  .nav__inner { gap: 16px; }

  .hero__inner { grid-template-columns: 1fr; gap: 52px; }
  .hero__counter { margin-top: 0; max-width: 27rem; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
}

@media (max-width: 920px) {
  .stakes__grid { grid-template-columns: 1fr; gap: 48px; }
  .stakes__big { position: static; }

  .cta__grid { grid-template-columns: 1fr; gap: 48px; }

  .phases { grid-template-columns: 1fr 1fr; }

  .modules__grid { grid-template-columns: 1fr; }
  .mod--featured { grid-row: auto; min-height: 0; }
  .mod__tag {
    position: static;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 16px;
  }
  .mod:nth-child(4) { grid-column: auto; flex-direction: column; }
  .mod:nth-child(4) .mod__body { margin-top: 12px; }

  /* bento to 2 columns: the two wide cards go full-width, the two narrow pair up */
  .why__grid { grid-template-columns: 1fr 1fr; }
}

/* Matches small() in src/globe.js — keep the two in sync. */
@media (max-width: 900px) {
  /* Globe moves above the deadlines and holds the top of the section while they
     scroll under it. The date pins give up their stickiness here: two sticky
     layers competing for the same strip under the nav just fight each other. */
  .timeline__layout { grid-template-columns: 1fr; gap: clamp(20px, 4vh, 32px); }
  .timeline__globe {
    order: -1;
    justify-self: center;
    width: min(62vw, 240px);
    top: clamp(78px, 11vh, 96px);
  }
  .tl-item__aside { position: static; }
}

@media (max-width: 680px) {
  .nav__inner { gap: 12px; }
  .btn--nav { display: none; }
  .nav__logo img { height: 32px; }

  .hero { padding-block: 48px 64px; }
  .hero__ctas .btn { width: 100%; }
  .hero__counter { max-width: none; width: 100%; }
  .hero__counter-num { font-size: clamp(6rem, 26vw, 8.5rem); }
  body[data-region="ch"] .hero__counter-num { font-size: clamp(4.4rem, 19vw, 6.4rem); }

  .compare { grid-template-columns: 1fr; }
  .savings { flex-direction: column; align-items: flex-start; gap: 16px; }

  .stakes__facts { grid-template-columns: 1fr; }
  .stakes__amount { font-size: clamp(2.6rem, 14vw, 3.6rem); }
  .card-sig { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }

  .phases { grid-template-columns: 1fr; }
  .deliverables__grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .why__item:nth-child(1), .why__item:nth-child(4) { grid-column: auto; }

  /* timeline collapses: date moves inline above the event, marker stays as the rail station */
  .tl-item { gap: clamp(14px, 4vw, 22px); padding-top: clamp(34px, 8vh, 64px); }
  .tl-item__aside { width: auto; gap: 0; top: clamp(84px, 12vh, 116px); }
  .tl-item__date--big { display: none; }
  .tl-item__date--inline {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .tl-item.is-past .tl-item__date--inline { color: var(--text); }
  .tl-item.tl-item--today .tl-item__date--inline { color: var(--accent); }

  .mobile-cta { display: block; }

  .footer__inner { grid-template-columns: 1fr; text-align: left; }
  .footer__links { justify-content: flex-start; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}