/* ==========================================================================
   Merkcoco — dark studio theme
   One committed dark theme: every colour is painted from these tokens so the
   page never borrows the host's light ground.
   ========================================================================== */

/* Arial scaled to Poppins's metrics, so text keeps its size when Poppins arrives. Without it the
   swap repainted the opening headline larger and Google counted that late repaint as the LCP
   (~2.0s → ~3.7s on a mid phone). Values as generated by next/font for Poppins. */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%; size-adjust: 112.16%;
}
/* The same for the bold gradient highlights. Without it the browser fakes bold on the face above,
   which is narrower than Poppins Bold, so the hero line grew when the font arrived and phones
   re-timed LCP to that late repaint (~2.0s → ~3.7s, v50 to v54). Arial Bold scaled to Poppins
   Bold's measured width on the site's own copy (1.0663×, rounded up to 1.09 so the swap to
   Poppins never makes the line bigger, which would count as a new LCP), with Poppins' vertical metrics
   (ascent 1.05, descent 0.35, gap 0.1) divided by that scale. */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
  font-weight: 700 900;
  ascent-override: 96.33%; descent-override: 32.11%; line-gap-override: 9.17%; size-adjust: 109%;
}

:root {
  /* Colour */
  --bg:            #0A0A0A;   /* page ground — near-black, not pure #000, so shadows still read */
  --bg-raised:     #121212;   /* cards, the questionnaire panel */
  --bg-raised-2:   #1A1A1A;   /* inputs, choices inside cards */
  --line:          rgba(255, 255, 255, 0.10);
  --line-strong:   rgba(255, 255, 255, 0.22);
  --fg:            #FFFFFF;
  --fg-2:          rgba(255, 255, 255, 0.72);   /* 11.6:1 on --bg */
  --fg-3:          rgba(255, 255, 255, 0.54);   /*  6.6:1 on --bg — hints, meta */
  /* Brand gradient: purple → orange, sampled from assets/brand/gradient-source.png.
     Along its diagonal: #9900CD (solid to ~33%) · #B21A99 (50%) · #D33A59 (70%) · #FF6501.
     Contrast facts that shape how it's used:
       white text on it:   #9900CD 6.5 · #B21A99 6.0 · #D33A59 4.65 · #FF6501 2.95 (fails)
       purple on the dark ground: 3.05 (fine for shapes, too low for small text)
     So each job gets its own variant: */
  --purple:      #9900CD;
  --orange:      #FF6501;
  /* Exactly as supplied: decorative fills with no text (bars, dots, rails, radio dots). */
  --grad:        linear-gradient(135deg, #9900CD 0%, #9900CD 33%, #FF6501 100%);
  --grad-v:      linear-gradient(180deg, #9900CD 0%, #FF6501 100%);
  /* Primary buttons, left → right. Orange eases into red across the arrow-disc area (0–60px, in
     px so it's the same on every button width), then slowly into purple under the label. The
     label starts at 56px, so it only ever sits on red → purple: ≥ 4.75:1 for button widths
     110–300px. An earlier version squeezed red → orange into the last few % at the edge, which
     left a hard orange crescent around the disc.
     Interpolated in OKLab (even, no muddy band) where supported; sRGB fallback first. */
  --grad-button-srgb: linear-gradient(to right, #FF6501 0px, #E34A3A 30px, #CD3566 60px, #9900CD 100%);
  --grad-button: linear-gradient(in oklab to right, #FF6501 0px, #E34A3A 30px, #CD3566 60px, #9900CD 100%);
  /* Fills that carry white text with no disc (step numbers, menu CTA, skip link): stops at
     #D33A59, so every point is ≥ 4.65:1. */
  --grad-safe:   linear-gradient(135deg, #9900CD 0%, #B21A99 55%, #D33A59 100%);
  /* Small text/icons on the dark ground: lighter tints of both ends (≥ 6.9:1 on --bg). */
  --grad-text:   linear-gradient(90deg, #C77DFF 0%, #FF7A33 100%);
  --accent:      #C77DFF;   /* solid stand-in where a gradient can't go: focus rings, outlines (7:1) */
  --accent-ink:  #FFFFFF;   /* text ON gradient fills */
  --accent-soft: rgba(153, 0, 205, 0.18);
  /* Hover lift: a neutral shadow. A coloured glow spilled purple/orange past the button edge. */
  --accent-lift: 0 12px 24px -14px rgba(0, 0, 0, 0.9);
  --danger:        #FF8A7A;   /* error text — 8.3:1 on --bg-raised */

  /* Type */
  --font: "Poppins", "Poppins Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs:      0.75rem;
  --fs-sm:      0.875rem;
  --fs-base:    1rem;
  --fs-lg:      1.125rem;
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --fs-h2:      clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
  --fs-h1:      clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
  --fs-display: 19.2vw;     /* the wordmark: sized so "Merkcoco" spans the viewport edge to edge */
  --lh-tight:   1.08;
  --lh-body:    1.6;
  --tracking-display: -0.055em;
  --tracking-head:    -0.025em;
  --tracking-label:   0.14em;

  /* Shape */
  --r-pill: 999px;
  --r-card: 28px;
  --r-md:   18px;
  --r-sm:   12px;

  /* Space & motion */
  --gutter: clamp(16px, 4vw, 48px);
  --maxw:   1320px;
  --section-y: clamp(96px, 12vw, 180px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 30px 80px -30px rgba(0, 0, 0, 0.8);

  color-scheme: dark;
}

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
/* No `scroll-behavior: smooth` here: ScrollTrigger jumps the scroll position to measure the pin on
   every refresh (window resize, zoom, returning to the tab). Smooth scrolling animated those jumps,
   so it measured the wrong position and the sequence slid down leaving a black gap. In-page
   links scroll smoothly through main.js instead. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--purple); color: #fff; }   /* selection can't take a gradient */

/* Gradient text for small accents on the dark ground. */
.step__kicker, .q-num, .btn__arrow, .paths__count {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skiplink {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--grad-safe); color: var(--accent-ink); font-weight: 500;
  transform: translateY(-160%);
}
.skiplink:focus { transform: none; }

/* ───────── Shared components ───────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--fg-3);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }

.h2 {
  font-size: var(--fs-h2); line-height: 1.02; font-weight: 500;
  letter-spacing: var(--tracking-head);
  text-wrap: balance;
}
.lede { font-size: var(--fs-lg); color: var(--fg-2); max-width: 44ch; font-weight: 300; }

.badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 12px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: var(--fs-xs); color: var(--fg-2);
}
.badge__dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--grad);
}
.badge__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--grad);
  animation: ping 2.2s var(--ease-out) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3); opacity: 0; } }

/* Buttons — all pills. Primary carries the white arrow disc from the reference. */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 6px 24px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background-color .25s, border-color .25s, color .25s, box-shadow .25s, transform .25s var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--primary {
  padding: 6px 26px 6px 6px; color: var(--accent-ink);
  /* "border-box": size the gradient to the outer edge. By default it's sized to the padding box
     and tiles into the 1px transparent border, so each edge showed a sliver of the OPPOSITE end
     (purple on the left edge, orange on the right). */
  background: var(--grad-button-srgb) border-box;   /* fallback for browsers without "in oklab" */
  background: var(--grad-button) border-box;
}
/* Hover lifts rather than brightening (a lighter fill would drop the white label below 4.5:1)
   and uses a neutral shadow so no colour spills past the edge. */
.btn--primary:hover { box-shadow: var(--accent-lift); transform: translateY(-1px); }
.btn--primary:active { transform: scale(0.98); }
.btn__icon {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: var(--fg); color: var(--purple);   /* purple rocket on the white disc: 6.5:1 */
  transition: transform .35s var(--ease-out);
}
.btn__icon svg { width: 18px; height: 18px; }
/* The rocket in the button disc: it idles with a little bob and a flickering flame; on hover (or
   keyboard focus) it blasts off out of the top right of the disc and loops back in from the
   bottom left, ready to go again. The disc clips it (overflow: hidden). */
.btn__rocket { width: 20px; height: 20px; }
.btn__rocket .rk { transform-box: fill-box; transform-origin: center; animation: rk-bob 2.6s ease-in-out infinite; }
.btn__rocket .rk-flame { fill: #FF6501; stroke: #FF6501; stroke-width: 1.2; transform-box: fill-box; transform-origin: 100% 0; animation: rk-flicker .16s ease-in-out infinite alternate; }
.btn--primary:hover .btn__rocket .rk, .btn--primary:focus-visible .btn__rocket .rk { animation: rk-launch .9s cubic-bezier(.55, 0, .25, 1) both; }
.btn--primary:hover .btn__rocket .rk-flame, .btn--primary:focus-visible .btn__rocket .rk-flame { animation-duration: .08s; }
@keyframes rk-bob { 0%, 100% { transform: translate(-.6px, .6px) rotate(-3deg); } 50% { transform: translate(.6px, -.6px) rotate(3deg); } }
@keyframes rk-flicker { from { transform: scale(.75); opacity: .85; } to { transform: scale(1.15); opacity: 1; } }
@keyframes rk-launch {
  0% { transform: none; }
  15% { transform: translate(-2px, 2px) scale(.95); }           /* crouch */
  38% { transform: translate(20px, -20px); }                    /* out the top right */
  39% { transform: translate(-20px, 20px); opacity: 0; }        /* round the back */
  42% { opacity: 1; }
  82% { transform: translate(1.5px, -1.5px); }                  /* slight overshoot */
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn__rocket .rk, .btn__rocket .rk-flame { animation: none !important; }
}
.btn--ghost { border-color: var(--line-strong); color: var(--fg); background: transparent; }
.btn--ghost:hover { border-color: var(--fg); }
.btn__arrow { display: inline-block; transition: transform .3s var(--ease-out); }
.btn--ghost:hover .btn__arrow { transform: translateX(3px); }
.btn--ghost:hover .btn__arrow--back { transform: translateX(-3px); }
.btn--small {
  min-height: 40px; padding: 6px 18px; font-size: var(--fs-sm);
  border-color: var(--line-strong); background: transparent; color: var(--fg-2);
}
.btn--small:hover { color: var(--fg); border-color: var(--fg); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ───────── Nav: floating pill ───────── */
.nav { position: fixed; top: clamp(12px, 2vw, 24px); left: var(--gutter); z-index: 50; }
.nav__pill {
  display: flex; align-items: center; gap: 20px;
  padding: 8px 8px 8px 18px; border-radius: var(--r-pill);
  background: rgba(30, 30, 30, 0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.nav__brand { display: flex; align-items: center; gap: 12px; color: var(--fg); }
/* Logo from assets/brand (traced from the supplied artwork), painted in currentColor via masks. */
.nav__mark, .nav__wordmark {
  display: block; background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.nav__mark { --logo: url("../assets/brand/mark.svg?v=85"); width: 38px; height: 23px; }          /* 597:355 */
.nav__wordmark { --logo: url("../assets/brand/wordmark.svg?v=85"); width: 92px; height: 15px; }   /* 755:117 */
.nav__toggle {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
}
.nav__toggle:hover { background: rgba(255, 255, 255, 0.08); }
.nav__burger, .nav__burger::before {
  display: block; width: 18px; height: 1.5px; background: var(--fg);
  transition: transform .3s var(--ease-out);
}
.nav__burger { position: relative; transform: translateY(-3px); }
.nav__burger::before { content: ""; position: absolute; top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__burger { transform: translateY(0) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger::before { transform: translateY(-6px) rotate(-90deg); }
.nav__menu {
  display: grid; gap: 4px; margin-top: 8px; padding: 8px; min-width: 220px;
  border-radius: var(--r-md);
  background: rgba(22, 22, 22, 0.92); border: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nav__menu[hidden] { display: none; }
.nav__menu a { padding: 10px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--fg-2); }
.nav__menu a:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); }
.nav__menu .nav__menu-cta { background: var(--grad-safe); color: var(--accent-ink); font-weight: 500; }
.nav__menu .nav__menu-cta:hover { background: var(--grad-safe); color: var(--accent-ink); box-shadow: var(--accent-lift); }

/* ───────── Scroll-driven journey ───────── */
.journey { position: relative; background: var(--bg); }
.journey__pin {
  position: relative; height: 100vh; height: 100lvh; overflow: hidden;
  /* Poster until the canvas has drawn: the opening frame, so first paint matches frame 1.
     This section opens the page, so it's what the visitor sees first. */
  background: var(--bg) url("../frames/frame_0001.webp?v=85") center / cover no-repeat;
  /* Same file the canvas loads first (AVIF where supported), so it's only downloaded once. */
  background-image: image-set(url("../frames/frame_0001.avif?v=85") type("image/avif"), url("../frames/frame_0001.webp?v=85") type("image/webp"));
}
.journey__canvas { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.journey__canvas.is-ready { visibility: visible; }
/* Top: a light shade behind the nav only. The page opens here, so a black band would read as a gap.
   Bottom: bleeds into the next section and keeps captions ≥ 7:1. */
.journey__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 16%, rgba(10,10,10,0) 55%, rgba(10,10,10,.85) 88%, var(--bg) 100%),
    linear-gradient(to right, rgba(10,10,10,.55), rgba(10,10,10,0) 60%);
}
.journey__captions {
  position: absolute; left: 0; right: 0; bottom: clamp(56px, 10vh, 120px);
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: grid;
}
.journey__caption { grid-area: 1 / 1; display: grid; gap: 14px; justify-items: start; width: fit-content; max-width: min(640px, 100%); align-self: end; }
/* The captions share one grid cell, and GSAP (from a CDN, so late on a first visit) is what hides
   the second and third. Until it does, keep them hidden here, or all three paint on top of each
   other on first load. GSAP's inline autoAlpha overrides this when it shows them; the static
   layout (reduced motion, GSAP blocked) shows them all as a list. */
.js .journey:not(.journey--static) .journey__caption:not(:first-child) { opacity: 0; visibility: hidden; }
/* The closing caption's two buttons. The outline one sits on the artwork, so it gets a dark glass
   fill to stay readable over bright frames. */
.journey__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.journey__deal { background: rgba(10, 10, 10, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, .35); }
.journey__deal:hover { border-color: var(--fg); }
.journey__line {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem); line-height: 1.02; font-weight: 500;
  letter-spacing: var(--tracking-head); text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}
/* Each caption is as wide as its headline (the line breaks are fixed in the markup), and the line
   underneath fills exactly that width, so both edges line up with the heading. contain:
   inline-size stops the long paragraph from widening the caption itself. */
.journey__sub { color: var(--fg-2); font-weight: 300; justify-self: stretch; contain: inline-size; }
.journey__caption > .eyebrow { justify-self: stretch; contain: inline-size; white-space: nowrap; }   /* same: the small line above doesn't set the width either */
.journey .eyebrow { color: var(--fg-2); }
.journey__progress {
  position: absolute; right: var(--gutter); top: 50%; width: 2px; height: 120px;
  transform: translateY(-50%); background: rgba(255,255,255,.18); border-radius: 2px; overflow: hidden;
}
.journey__progress span { position: absolute; inset: 0; background: var(--grad-v); transform: scaleY(0); transform-origin: top; }
.journey__loader {
  position: absolute; top: clamp(80px, 12vh, 120px); right: var(--gutter);
  padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(10,10,10,.6); border: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--fg-2);
  transition: opacity .5s;
}
.journey__loader.is-done { opacity: 0; }

/* Soundtrack toggle: a pill in the nav row, top-right, styled like the nav. */
.journey__sound {
  position: absolute; z-index: 3; top: clamp(12px, 2vw, 24px); right: var(--gutter);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 18px 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--fg);
  background: rgba(30, 30, 30, 0.72);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.journey__sound[hidden] { display: none; }
.journey__sound:hover { border-color: var(--line-strong); }
.journey__sound svg { width: 20px; height: 20px; flex: none; }
.journey__sound-on { display: none; }
/* On: gradient ring (padding-box/border-box trick keeps the pill radius) and a lilac icon.
   The inner fill MUST be opaque: a translucent one let the gradient show through and tint the
   whole pill. */
.journey__sound[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(#181818, #181818) padding-box, var(--grad) border-box;
}
.journey__sound[aria-pressed="true"] svg { color: var(--accent); }
.journey__sound[aria-pressed="true"] .journey__sound-on { display: inline; }
.journey__sound[aria-pressed="true"] .journey__sound-off { display: none; }
.journey__sound.is-loading { cursor: progress; opacity: .7; }

/* Without JS, or with reduced motion: no pin, captions stacked as a readable list. */
html:not(.js) .journey__caption,
.journey--static .journey__caption { grid-area: auto; }
html:not(.js) .journey__captions,
.journey--static .journey__captions { gap: 48px; }
html:not(.js) .journey__pin,
.journey--static .journey__pin { height: auto; min-height: 100vh; padding-block: 30vh 12vh; display: flex; align-items: flex-end; }
html:not(.js) .journey__captions,
.journey--static .journey__captions { position: relative; bottom: auto; }
html:not(.js) .journey__progress, html:not(.js) .journey__loader,
.journey--static .journey__progress { display: none; }
.journey--static .journey__scrim { background: linear-gradient(to bottom, var(--bg), rgba(10,10,10,.35) 25%, rgba(10,10,10,.9) 80%, var(--bg)); }

/* ───────── Process ───────── */
.process__head { position: sticky; top: 120px; display: grid; gap: 24px; justify-items: start; }

.step__body {
  display: grid; gap: 14px; padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-card); background: var(--bg-raised); border: 1px solid var(--line);
  color: var(--fg-2); font-weight: 300;
}
.step__kicker { font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; justify-self: start; }
.step__title { font-size: var(--fs-h3); line-height: 1.2; font-weight: 500; color: var(--fg); letter-spacing: -0.01em; }
.step__value { padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.step__value strong, .paths strong { color: var(--fg); font-weight: 500; }
.step__value strong { display: block; margin-bottom: 2px; }   /* "Why it matters" sits on its own line (no colon in the copy) */
.paths { display: grid; gap: 10px; }
.paths__item {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  padding: 14px; border-radius: var(--r-md); background: var(--bg-raised-2); font-size: var(--fs-sm);
}
.paths__count {
  position: relative;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-weight: 500;   /* gradient number via the .grad text rule above */
}
/* Gradient ring: the element's own background is busy clipping the number, so the ring is a
   masked pseudo-element. */
.paths__count::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}


/* ───────── Questionnaire ───────── */
.start { background: linear-gradient(to bottom, var(--bg), #0F0D0C); }
.start__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
.start__head { position: sticky; top: 120px; display: grid; gap: 24px; }
.start__notes { display: grid; gap: 10px; font-size: var(--fs-sm); color: var(--fg-2); }
.start__notes li { display: flex; gap: 12px; align-items: center; }
.start__notes li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.5L13 6.5' fill='none' stroke='url(%23g)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23C77DFF'/%3E%3Cstop offset='1' stop-color='%23FF7A33'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") center/100% no-repeat;
}
@media (max-width: 900px) {
  .start__grid { grid-template-columns: 1fr; }
  .start__head { position: static; }
}

.q-card {
  border-radius: var(--r-card); background: var(--bg-raised); border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 4vw, 48px);
}
.q-form { display: grid; gap: 32px; }
/* After sending, the form is hidden and the thank you shows; display: grid would otherwise override [hidden]. */
.q-form[hidden], .bf-form[hidden] { display: none; }

.q-progress { display: grid; gap: 12px; }
.q-progress__label { font-size: var(--fs-xs); color: var(--fg-3); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.q-progress__bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.q-progress__bar span { display: block; height: 100%; width: calc(100% / 6); background: linear-gradient(90deg, var(--purple), var(--orange)); border-radius: inherit; transition: width .5s var(--ease-out); }
.q-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.q-steps button {
  padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--line);   /* 7 pills fit one row in the 545px card */
  background: transparent; font-size: var(--fs-xs); color: var(--fg-3); cursor: pointer;
}
.q-steps button:not([disabled]):hover { color: var(--fg); border-color: var(--line-strong); }
.q-steps button[aria-current="step"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.q-steps button.is-done { color: var(--fg-2); border-color: var(--line-strong); }
.q-steps button[disabled] { cursor: default; opacity: .6; }
html:not(.js) .q-progress, html:not(.js) [data-q-next], html:not(.js) [data-q-back], html:not(.js) [data-q-add-url] { display: none; }
@media (max-width: 560px) { .q-steps { display: none; } }

.q-step { display: grid; gap: 28px; }
.js .q-step:not(.is-current) { display: none; }
.js .q-step.is-current { animation: step-in .45s var(--ease-out); }
.js .q-step.is-current.is-back { animation-name: step-in-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-24px); } }
html:not(.js) .q-step + .q-step { padding-top: 32px; border-top: 1px solid var(--line); }

.q-field { display: grid; gap: 14px; border: 0; margin: 0; padding: 0; min-width: 0; }
.q-title {
  display: flex; gap: 14px; align-items: baseline; padding: 0; margin-bottom: 4px;
  font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; color: var(--fg);
}
.q-title:focus { outline: none; }
.q-num { flex: none; font-size: var(--fs-sm); font-weight: 500; }
.q-label { font-size: var(--fs-sm); font-weight: 500; color: var(--fg); }
.q-optional { font-weight: 300; color: var(--fg-3); font-size: 0.85em; }
.q-hint { font-size: var(--fs-sm); color: var(--fg-3); font-weight: 300; margin-top: -4px; }
.q-error { font-size: var(--fs-sm); color: var(--danger); display: flex; gap: 8px; align-items: center; }
.q-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: var(--bg); font-size: 11px; font-weight: 600; }
.q-error[hidden] { display: none; }

.q-input {
  width: 100%; min-height: 52px; padding: 14px 20px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: var(--bg-raised-2); color: var(--fg);
  transition: border-color .2s, box-shadow .2s;
}
.q-input::placeholder { color: rgba(255,255,255,.34); }
.q-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 48px; font: inherit; color: var(--fg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFB48A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center; }
.q-select option { background: #1b1b1c; color: #f2f2f2; }
.q-select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFB48A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(var(--bg-raised-2), var(--bg-raised-2)), var(--grad); background-origin: padding-box, padding-box, border-box; background-clip: padding-box, padding-box, border-box; background-repeat: no-repeat; background-position: right 20px center, 0 0, 0 0; }
.q-input:hover { border-color: rgba(255,255,255,.34); }
.q-input:focus {
  outline: none; border-color: transparent; box-shadow: 0 0 0 4px var(--accent-soft);
  background: linear-gradient(var(--bg-raised-2), var(--bg-raised-2)) padding-box, var(--grad) border-box;
}
.q-reveal .q-input:focus { background: linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box, var(--grad) border-box; }
.q-input[aria-invalid="true"] { border-color: var(--danger); }
.q-textarea { border-radius: var(--r-md); resize: vertical; min-height: 140px; line-height: 1.55; }
textarea.q-textarea[rows="3"] { min-height: 96px; }
.q-meta { display: flex; justify-content: space-between; gap: 16px; }
.q-count { margin-left: auto; font-size: var(--fs-xs); color: var(--fg-3); }

.q-choices { display: grid; gap: 10px; }
.q-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 420px) { .q-choices--2 { grid-template-columns: 1fr; } }
.q-choice {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 12px 20px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--bg-raised-2);
  cursor: pointer; transition: border-color .2s, background-color .2s;
}
.q-choice:hover { border-color: rgba(255,255,255,.4); }
.q-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q-choice__dot {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  transition: border-color .2s;
}
.q-choice__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--grad); transform: scale(0); transition: transform .25s var(--ease-out); }
.q-choice:has(input:checked) {
  border-color: transparent;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box,
              linear-gradient(var(--bg-raised-2), var(--bg-raised-2)) padding-box,
              var(--grad) border-box;
}
.q-choice:has(input:checked) .q-choice__dot { border-color: var(--accent); }
.q-choice:has(input:checked) .q-choice__dot::after { transform: scale(1); }
/* Checkbox variant (multiple answers): rounded square that fills with the safe gradient and a white tick. */
.q-choice__dot--box { border-radius: 6px; }
.q-choice__dot--box::after {
  width: 5px; height: 10px; border-radius: 0; background: none;
  border: solid #fff; border-width: 0 2px 2px 0; margin-top: -2px;
  transform: rotate(45deg) scale(0);
}
.q-choice:has(input:checked) .q-choice__dot--box { border-color: transparent; background: var(--grad-safe) border-box; }
.q-choice:has(input:checked) .q-choice__dot--box::after { transform: rotate(45deg) scale(1); }
.q-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.q-field:has([aria-invalid="true"]) .q-choice { border-color: rgba(255, 138, 122, .6); }

.q-reveal { display: grid; gap: 10px; padding: 20px; border-radius: var(--r-md); background: var(--bg-raised-2); border: 1px dashed var(--line-strong); }
.q-reveal[hidden] { display: none; }
html:not(.js) .q-reveal[hidden] { display: grid; }
.q-reveal .q-input { background: var(--bg-raised); }

.q-urls { display: grid; gap: 10px; }
.q-url { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; }
.q-url .q-error { grid-column: 1 / -1; }
.q-url__remove {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; color: var(--fg-2); cursor: pointer; font-size: 20px; line-height: 1;
}
.q-url__remove:hover { color: var(--fg); border-color: var(--fg); }
[data-q-add-url] { justify-self: start; }

/* Honeypot: off-screen rather than display:none, which some bots detect and skip. */
.q-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.q-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.q-row > div { display: grid; gap: 10px; align-content: start; }
@media (max-width: 560px) { .q-row { grid-template-columns: 1fr; } }

.q-nav { display: flex; gap: 12px; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line); }
.q-nav [data-q-next], .q-nav [data-q-submit] { margin-left: auto; }
.js .q-nav [data-q-submit]:not(.is-visible) { display: none; }
.q-nav [hidden] { display: none; }
.q-form[aria-busy="true"] [data-q-submit] { opacity: .7; pointer-events: none; }

.q-done { display: grid; gap: 18px; justify-items: start; padding-block: 24px; color: var(--fg-2); }
.q-done[hidden] { display: none; }
.q-done__mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--grad-safe); color: var(--accent-ink); font-size: 28px; }
.q-done__title { font-size: var(--fs-h2); line-height: 1.05; font-weight: 500; color: var(--fg); letter-spacing: var(--tracking-head); }
.q-done__title:focus { outline: none; }
.q-done__demo { padding: 12px 16px; border-radius: var(--r-sm); border: 1px dashed var(--accent); font-size: var(--fs-sm); }
.q-done__demo code { color: var(--accent); }

/* ───────── Footer (v67) ─────────
   Brand, tagline and socials; Explore and Ground control lists; then the legal line. A horizon glow
   along the top with a satellite crossing it, and the wordmark huge and faint behind the bottom. */
.footer {
  position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(56px, 7vw, 96px) 28px;
  font-size: var(--fs-sm); color: var(--fg-3);
  background: radial-gradient(70% 55% at 50% 0%, rgba(153, 0, 205, .13), transparent 70%), var(--bg);
}
/* The floating WhatsApp button (fixed, bottom right) would cover the footer links at the very
   bottom of the page, so the footer leaves room under them for it: its height plus its offset. */
body:has(.wa-chat) .footer { padding-bottom: calc(28px + 58px + clamp(16px, 2.5vw, 28px)); }
.footer__horizon { position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(199, 125, 255, .75) 25%, rgba(255, 122, 51, .75) 75%, transparent); }
.footer__horizon i { position: absolute; top: -2px; left: 0; width: 140px; height: 5px; border-radius: 99px; background: radial-gradient(closest-side, #fff, rgba(255, 180, 138, .55) 45%, transparent); animation: footer-sat 11s linear infinite; }
@keyframes footer-sat { from { transform: translateX(-160px); } to { transform: translateX(100vw); } }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 64px); }
.footer__brand { display: grid; gap: 22px; align-content: start; justify-items: start; }
.footer__logo { display: flex; align-items: center; gap: 12px; color: var(--fg); }
.footer__logo .nav__mark { width: 46px; height: 28px; }
.footer__logo .nav__wordmark { width: 112px; height: 18px; }
.footer__tag { max-width: 24rem; margin: 0; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height: 1.45; font-weight: 300; color: var(--fg-2); }
.footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer__social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--fg);
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03);
  transition: transform .3s var(--ease-out), border-color .3s, background .3s, box-shadow .3s;
}
.footer__social svg { width: 19px; height: 19px; }
.footer__social a:hover, .footer__social a:focus-visible { transform: translateY(-3px) rotate(-6deg); border-color: transparent; background: var(--grad-button); box-shadow: var(--accent-lift); }
.footer__social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.footer__h { margin: 0 0 18px; font: 500 .6875rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.footer__col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
/* Links underline with the gradient, drawn left to right on hover. */
.footer__col ul a {
  padding-bottom: 2px; color: var(--fg); text-decoration: none;
  background: linear-gradient(90deg, #C77DFF, #FF7A33) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease-out);
}
.footer__col ul a:hover, .footer__col ul a:focus-visible { background-size: 100% 1px; }
.footer__col a[aria-current="page"] { color: #FFB48A; }
.footer__col li > span, .footer__note { color: var(--fg-3); }
.footer__note { margin-left: 4px; font-size: var(--fs-xs); }
.footer__start {
  display: inline-flex; gap: 8px; margin-top: 24px; font-size: 1.0625rem; font-weight: 600;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer__start span { transition: transform .3s var(--ease-out); }
.footer__start:hover span { transform: translateX(4px); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.footer__legal a, .footer__up { color: var(--fg-2); }
.footer__legal a:hover, .footer__up:hover { color: var(--fg); }
.footer__legal a[aria-current="page"] { color: #FFB48A; }
.footer__up { margin-left: auto; }
.footer__wordmark {
  position: absolute; z-index: -1; left: 50%; bottom: -1.4vw; width: min(1500px, 112vw); aspect-ratio: 755 / 117; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, rgba(199, 125, 255, .1), rgba(255, 122, 51, .08));
  -webkit-mask: url("../assets/brand/wordmark.svg?v=85") center / contain no-repeat; mask: url("../assets/brand/wordmark.svg?v=85") center / contain no-repeat;
}
@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__up { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .footer__horizon i { display: none; } }

/* ───────── Motion: reveals are gated on .js, and everything stops under reduced motion ───────── */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ───────── Legal pages (privacy.html, terms.html) ─────────
   Long reading text: a narrow measure, generous leading, and underlined links so they read
   as links without colour alone. */
.legal { padding-block: clamp(120px, 14vw, 180px) var(--section-y); }
.legal__inner { max-width: 46rem; }
.legal__head { display: grid; gap: 18px; padding-bottom: 32px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.legal__title { font-size: var(--fs-h1); line-height: 1.05; font-weight: 500; letter-spacing: var(--tracking-head); }
.legal__meta { font-size: var(--fs-sm); color: var(--fg-3); }
.legal__toc { display: grid; gap: 10px; padding: 24px; margin-bottom: 48px; border-radius: var(--r-md); background: var(--bg-raised); border: 1px solid var(--line); font-size: var(--fs-sm); }
.legal__toc p { color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--fs-xs); }
.legal__toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.legal__toc a { color: var(--fg-2); }
.legal__toc a:hover { color: var(--fg); }
.legal__body { color: var(--fg-2); font-weight: 300; line-height: 1.75; }
.legal__body section { scroll-margin-top: 110px; }
.legal__body section + section { margin-top: 48px; }
.legal__body h2 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; color: var(--fg); letter-spacing: -0.01em; margin-bottom: 14px; }
.legal__body h3 { font-size: var(--fs-base); font-weight: 500; color: var(--fg); margin: 24px 0 8px; }
.legal__body p + p, .legal__body p + ul, .legal__body ul + p, .legal__body dl + p, .legal__body p + dl { margin-top: 14px; }
.legal__body ul { padding-left: 1.2em; display: grid; gap: 8px; list-style: disc; }
.legal__body li::marker { color: var(--accent); }
.legal__body strong { color: var(--fg); font-weight: 500; }
.legal__body a, .legal__link { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.legal__body a:hover, .legal__link:hover { text-decoration-thickness: 2px; }
.legal__details { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 10px 24px; padding: 24px; border-radius: var(--r-md); background: var(--bg-raised); border: 1px solid var(--line); }
.legal__details dt { color: var(--fg-3); font-size: var(--fs-sm); }
.legal__details dd { margin: 0; color: var(--fg); }
@media (max-width: 560px) { .legal__details { grid-template-columns: 1fr; gap: 2px; } .legal__details dd + dt { margin-top: 12px; } }
/* Details still to be supplied by the business. release.mjs warns while any remain. */
.todo { padding: 0 4px; border-radius: 4px; background: rgba(255, 122, 51, .16); outline: 1px dashed #FF7A33; color: #FFB48A; }

/* ───────── Black Friday page (black-friday.html) ───────── */
.bf-hero { padding-block: clamp(120px, 14vw, 170px) clamp(64px, 8vw, 110px);
  background: radial-gradient(60% 60% at 80% 30%, rgba(153,0,205,.20), transparent 70%),
              radial-gradient(40% 50% at 95% 80%, rgba(255,101,1,.12), transparent 70%), var(--bg); }
.bf-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.bf-hero__copy { display: grid; gap: 26px; justify-items: start; }
.bf-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--r-pill);
  background: linear-gradient(#181818, #181818) padding-box, var(--grad) border-box; border: 1px solid transparent;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.bf-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.bf-hero__title { font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); line-height: 1; font-weight: 500; letter-spacing: var(--tracking-head); }
.bf-price { display: inline-block; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bf-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bf-countdown { display: grid; gap: 10px; }
.bf-countdown__label { font-size: var(--fs-sm); color: var(--fg-3); }
.bf-countdown__units { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bf-countdown__units[hidden] { display: none; }
.bf-countdown__units li { display: grid; justify-items: center; min-width: 72px; padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-raised); border: 1px solid var(--line); }
.bf-countdown__units b { font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.bf-countdown__units span { font-size: var(--fs-xs); color: var(--fg-3); }

/* Live preview: the example page in a scaled iframe (1366px wide design, shown at ~40%). */
.bf-preview { margin: 0; display: grid; gap: 14px; }
.bf-preview__chrome { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-radius: var(--r-md) var(--r-md) 0 0; background: #1E1E1E; border: 1px solid var(--line); border-bottom: 0; }
.bf-preview__chrome span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.bf-preview__chrome em { margin-left: 12px; padding: 3px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.06); font-style: normal; font-size: var(--fs-xs); color: var(--fg-3); }
.bf-preview__screen { --w: 1366px; position: relative; aspect-ratio: 16 / 11; overflow: hidden; border: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); background: #fff; }
.bf-preview__screen iframe { position: absolute; top: 0; left: 0; width: var(--w); height: calc(var(--w) * 11 / 16); border: 0; pointer-events: none; transform-origin: 0 0; transform: scale(var(--s, .4)); }   /* --s set by black-friday.js */
.bf-preview figcaption { grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: var(--fs-sm); color: var(--fg-3); }
/* Clicking anywhere on the picture opens the example: a link laid over the chrome and screen rows. */
.bf-preview { position: relative; }
.bf-preview__chrome { grid-row: 1; grid-column: 1; }
.bf-preview__screen { grid-row: 2; grid-column: 1; transition: box-shadow .3s, border-color .3s; }
.bf-preview__hit { grid-row: 1 / 3; grid-column: 1; z-index: 2; display: grid; place-items: center; border-radius: var(--r-md); cursor: pointer; }
.bf-preview__hint {
  padding: 10px 20px; border-radius: var(--r-pill); background: rgba(16,16,16,.9); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: var(--fs-sm); font-weight: 500; box-shadow: 0 16px 40px -12px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .3s var(--ease-out);
}
.bf-preview__hit:hover .bf-preview__hint { opacity: 1; transform: none; }
.bf-preview:has(.bf-preview__hit:hover) .bf-preview__screen { border-color: rgba(199,125,255,.55); box-shadow: 0 24px 60px -24px rgba(153,0,205,.55); }
/* The caption's button: a gradient ring with an opaque inner fill (edge rule 2). */
.bf-preview__open {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 22px; border-radius: var(--r-pill);
  border: 2px solid transparent; color: var(--fg); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  background: linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box, var(--grad-button) border-box;
  transition: box-shadow .25s, transform .25s var(--ease-out);
}
.bf-preview__open:hover { box-shadow: var(--accent-lift); transform: translateY(-1px); }
.bf-preview__open:hover .btn__arrow, .bf-preview:has(.bf-preview__hit:hover) .bf-preview__open .btn__arrow { transform: translateX(3px); }
.bf-preview__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Touch screens have no hover, so the hint sits in the corner all the time. */
@media (hover: none) {
  .bf-preview__hit { place-items: end; padding: 12px; }
  .bf-preview__hint { opacity: 1; transform: none; padding: 8px 14px; font-size: var(--fs-xs); }
}
@media (max-width: 900px) { .bf-hero__grid { grid-template-columns: 1fr; } }

.bf-head { display: grid; gap: 18px; justify-items: start; max-width: 40rem; margin-bottom: clamp(36px, 5vw, 64px); }
.bf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bf-grid li { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: var(--r-md); background: var(--bg-raised); border: 1px solid var(--line); }
/* Icons on the "What you get" cards: one inline SVG each, stroked with a shared gradient
   (#bf-ig, which slowly turns). Three layers of motion, all off for reduced motion:
   1. draw in: when the grid scrolls into view, every .d stroke draws itself (pathLength 1),
      staggered by the card index --i (black-friday.js adds data-draw, then is-in);
   2. take turns: each icon has its own small action in the first ~15% of a shared 8s cycle,
      offset by --i, so the actions ripple across the grid one after another;
   3. hover: the card lifts and black-friday.js jumps that icon to the start of its action. */
.bf-icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 16px;
  border: 1px solid transparent;
  background: radial-gradient(80% 80% at 30% 20%, rgba(199,125,255,.20), transparent 70%) padding-box,
              radial-gradient(80% 80% at 80% 100%, rgba(255,122,51,.14), transparent 70%) padding-box,
              linear-gradient(#171717, #171717) padding-box,
              linear-gradient(135deg, rgba(199,125,255,.55), rgba(255,122,51,.55)) border-box;
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.bf-icon svg { width: 28px; height: 28px; overflow: visible; }
.bf-icon-defs { position: absolute; width: 0; height: 0; }
.bf-grid li { transition: border-color .3s, transform .4s var(--ease-out); }
.bf-grid li:hover { border-color: rgba(199,125,255,.35); transform: translateY(-3px); }
.bf-grid li:hover .bf-icon { transform: rotate(-6deg) scale(1.08); box-shadow: 0 14px 30px -14px rgba(153,0,205,.7); }
.bf-icon circle:not(.d), .bf-icon .ic-shadow { fill: url(#bf-ig); stroke: none; }
.bf-icon .ic-shadow { opacity: .35; }
.bf-icon .ic-spark { stroke-width: 1.4; }

/* 1. draw in */
.bf-grid[data-draw] .d { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out) calc(var(--i) * 70ms); }
.bf-grid[data-draw] .bf-icon circle:not(.d), .bf-grid[data-draw] .ic-shadow, .bf-grid[data-draw] .ic-spark { opacity: 0; transition: opacity .5s calc(var(--i) * 70ms + .7s); }
.bf-grid[data-draw].is-in .d { stroke-dashoffset: 0; }
.bf-grid[data-draw].is-in .bf-icon circle:not(.d), .bf-grid[data-draw].is-in .ic-spark { opacity: 1; }
.bf-grid[data-draw].is-in .ic-shadow { opacity: .35; }

/* 2. take turns: every moving part shares the 8s cycle, offset by its card and its own --d */
.bf-icon [class*="ic-"] { transform-box: fill-box; transform-origin: center; }
.bf-grid.is-in .bf-icon [class*="ic-"]:not(.ic-bars):not(.ic-shadow) {
  animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
  animation-delay: calc(1.6s + var(--i) * .66s + var(--d, 0s));
}
.bf-grid.is-in .ic-bar    { animation-name: ic-bar; transform-origin: left center; }
.bf-grid.is-in .ic-dot    { animation-name: ic-pop; }
.bf-grid.is-in .ic-hop    { animation-name: ic-hop; }
.bf-grid.is-in .ic-zoom   { animation-name: ic-zoom; }
.bf-grid.is-in .ic-lines  { animation-name: ic-lines; }
.bf-grid.is-in .ic-ring   { animation-name: ic-ring; }
.bf-grid.is-in .ic-waves  { animation-name: ic-waves; transform-origin: left bottom; }
.bf-grid.is-in .ic-drop   { animation-name: ic-drop; transform-origin: center bottom; }
.bf-grid.is-in .ic-shadow { animation: ic-shadow 8s ease-in-out calc(1.6s + var(--i) * .66s) infinite; }
.bf-grid.is-in .ic-sun    { animation-name: ic-sun; }
.bf-grid.is-in .ic-star   { animation-name: ic-star; }
.bf-grid.is-in .ic-spark  { animation-name: ic-spark; }
.bf-grid.is-in .ic-search { animation-name: ic-search; }
.bf-grid.is-in .ic-type   { animation-name: ic-type; }
.bf-grid.is-in .ic-turn   { animation-name: ic-turn; }
.bf-grid.is-in .ic-launch { animation-name: ic-launch; }
.bf-grid.is-in .ic-flame  { animation-name: ic-flame; transform-origin: right top; }
@keyframes ic-bar    { 0%, 14%, 100% { transform: none; } 4% { transform: scaleX(0); } }
@keyframes ic-pop    { 0%, 9%, 100% { transform: none; } 4% { transform: scale(1.9); } }
@keyframes ic-hop    { 0%, 13%, 100% { transform: none; } 4% { transform: translateY(-4px) rotate(8deg); } 8% { transform: translateY(1px); } 10.5% { transform: translateY(-1px); } }
@keyframes ic-zoom   { 0%, 14%, 100% { transform: none; } 3% { transform: translateX(-4px) rotate(-8deg); } 8% { transform: translateX(2px) rotate(4deg); } 11% { transform: translateX(-1px); } }
@keyframes ic-lines  { 0%, 12%, 100% { opacity: 1; transform: none; } 3% { opacity: 0; transform: translateX(3px); } 7% { opacity: 1; transform: translateX(-2px); } }
@keyframes ic-ring   { 0%, 14%, 100% { transform: none; } 2%, 6%, 10% { transform: rotate(-14deg); } 4%, 8%, 12% { transform: rotate(12deg); } }
@keyframes ic-waves  { 0%, 14%, 100% { opacity: 1; transform: none; } 3%, 9% { opacity: .2; transform: scale(.7); } 6%, 12% { opacity: 1; transform: scale(1.1); } }
@keyframes ic-drop   { 0%, 14%, 100% { transform: none; } 4% { transform: translateY(-6px); } 8% { transform: translateY(0) scale(1.08, .9); } 10.5% { transform: translateY(-2px); } }
@keyframes ic-shadow { 0%, 14%, 100% { transform: none; opacity: .35; } 4% { transform: scale(.5); opacity: .15; } 8% { transform: scale(1.2); opacity: .5; } }
@keyframes ic-sun    { 0%, 14%, 100% { transform: none; } 6% { transform: translate(-2px, -2.5px) scale(1.25); } }
@keyframes ic-star   { 0% { transform: none; } 12% { transform: rotate(144deg) scale(1.15); } 14%, 100% { transform: rotate(144deg); } }   /* 144° is two star points, so the loop back to 0 is seamless */
@keyframes ic-spark  { 0%, 14%, 100% { opacity: .5; transform: none; } 6% { opacity: 1; transform: scale(1.6) rotate(45deg); } }
@keyframes ic-search { 0%, 15%, 100% { transform: none; } 3% { transform: translate(-2px, 1px) rotate(-8deg); } 6.5% { transform: translate(1px, -2px) rotate(6deg); } 10% { transform: translate(2px, 1.5px); } 13% { transform: translate(-1px, 0); } }
@keyframes ic-type   { 0%, 9%, 100% { transform: none; } 3% { transform: translateY(-3px); } 6% { transform: translateY(.5px); } }
@keyframes ic-turn   { 0% { transform: none; } 16%, 100% { transform: rotate(720deg); } }
@keyframes ic-launch { 0%, 100% { transform: none; opacity: 1; } 2%, 6% { transform: translate(-.6px, .6px); } 4%, 8% { transform: translate(.6px, -.6px); } 11% { transform: translate(9px, -9px); opacity: 0; } 11.5% { transform: translate(-9px, 9px); opacity: 0; } 15% { transform: none; opacity: 1; } }
@keyframes ic-flame  { 0%, 100% { transform: none; } 2%, 6%, 9% { transform: scale(1.35); } 4%, 8% { transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) {
  .bf-grid[data-draw] .d { stroke-dashoffset: 0; transition: none; }
  .bf-grid .bf-icon [class*="ic-"] { animation: none !important; }
  .bf-grid li, .bf-icon { transition: none; }
}
.bf-grid h3 { font-size: var(--fs-base); font-weight: 500; }
.bf-grid p { font-size: var(--fs-sm); color: var(--fg-2); font-weight: 300; }

.bf-steps { background: linear-gradient(to bottom, var(--bg), #0F0D0C, var(--bg)); }
.bf-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.bf-steps__list li { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--r-card); background: var(--bg-raised); border: 1px solid var(--line); }
.bf-steps__num { font-size: var(--fs-sm); font-weight: 500; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; justify-self: start; }
.bf-steps__list h3 { font-size: var(--fs-h3); font-weight: 500; }
.bf-steps__list p { color: var(--fg-2); font-weight: 300; font-size: var(--fs-sm); }
@media (max-width: 800px) { .bf-steps__list { grid-template-columns: 1fr; } }

.bf-faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.bf-faq__list { display: grid; gap: 10px; }
.bf-faq__list details { border-radius: var(--r-md); background: var(--bg-raised); border: 1px solid var(--line); }
.bf-faq__list summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 500; cursor: pointer; list-style: none; }
.bf-faq__list summary::-webkit-details-marker { display: none; }
.bf-faq__list summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--accent); transition: transform .2s; }
.bf-faq__list details[open] summary::after { transform: rotate(45deg); }
.bf-faq__list details p { padding: 0 22px 20px; color: var(--fg-2); font-weight: 300; font-size: var(--fs-sm); line-height: 1.7; }
@media (max-width: 900px) { .bf-faq__grid { grid-template-columns: 1fr; } }

.bf-claim { background: linear-gradient(to bottom, var(--bg), #0F0D0C); }
.bf-form { display: grid; gap: 22px; }
.bf-form .q-row > div, .bf-form > div:not(.q-honey):not(.q-row) { display: grid; gap: 10px; align-content: start; }
.bf-form__submit { justify-self: end; }
.q-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .q-choices--3 { grid-template-columns: 1fr; } }
.bf-form[aria-busy="true"] .bf-form__submit { opacity: .7; pointer-events: none; }

/* Black Friday link in the home page nav menu */
.nav__menu .nav__menu-deal { color: var(--fg); }
.nav__menu .nav__menu-deal::after { content: "R3 500"; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); }

/* ───────── Black Friday on the home page (from v21) ───────── */
.deal { padding-bottom: 0; }
.deal__card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  padding: clamp(24px, 4.5vw, 56px); border-radius: var(--r-card); border: 1px solid transparent;
  /* Gradient ring: opaque inner fill first (edge rule 2), then the brand gradient on the border box. */
  background: radial-gradient(70% 90% at 100% 0%, rgba(153,0,205,.16), transparent 70%) padding-box,
              linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
              var(--grad) border-box;
}
.deal__copy { display: grid; gap: 24px; justify-items: start; }
.deal__title { font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); }
.deal__list { gap: 12px; }
@media (max-width: 900px) { .deal__card { grid-template-columns: 1fr; } }
/* Laptop-height screens: the card (≈ 940px at full size) is tightened so the whole of it fits in
   one view below the menu, which is where "Launch Black Friday" and the menu's R3 500 pill land it
   (main.js, [data-jump-fit]). Spacing and sizes shrink in three steps by screen height (≤ 1000px,
   ≤ 800px, ≤ 700px); from 800px down the two small helper lines in the visual are hidden. Check with scratchpad deal-jump at real browser
   sizes (e.g. 1366×657, 1280×720, 1536×730, 1440×789). */
@media (min-width: 901px) and (max-height: 1000px) {
  .deal__card { padding: 32px 44px; gap: 44px; align-items: center; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .deal__copy { gap: 14px; }
  .deal__title { font-size: clamp(2rem, 1rem + 2.1vw, 3rem); }
  .deal__copy .lede { font-size: var(--fs-base); max-width: none; }
  .deal__list { gap: 6px; }
  .deal__card .bf-countdown { grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 14px; }
  .deal__card .bf-countdown__label { max-width: 15ch; }
  .deal__card .bf-countdown__units li { min-width: 58px; padding: 6px 10px; }
  .deal__card .bf-countdown__units b { font-size: 1.2rem; }
  .deal__visual { gap: 18px; }
  .deal__visual .bf-preview { gap: 10px; width: min(100%, 480px); justify-self: center; }
  .deal__visual .bf-preview__screen { aspect-ratio: 16 / 10; }
  .deal__visual .bf-preview figcaption { flex-wrap: nowrap; font-size: var(--fs-xs); }
  .deal__visual .bf-preview__open { white-space: nowrap; flex: none; min-height: 40px; padding: 4px 18px; }
  .deal__visual .niches__title { flex-wrap: nowrap; font-size: var(--fs-xs); }
  .deal__visual .niches__title span { white-space: nowrap; }
  .deal__visual .niches { gap: 8px; }
  .deal__visual .niche__btn { width: 96px; gap: 6px; }
  .deal__visual .niche__btn img { width: 96px; height: 128px; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .deal__card { padding: 24px 40px; }
  .deal__copy { gap: 10px; }
  .deal__title { font-size: clamp(2rem, 1rem + 1.8vw, 2.5rem); }
  .deal__copy .lede { font-size: var(--fs-sm); }
  .deal__list { gap: 3px; font-size: .8125rem; }
  .deal__visual { gap: 12px; }
  .deal__visual .bf-preview { width: min(100%, 400px); }
  .deal__visual .niche__btn { width: 92px; }
  .deal__visual .niche__btn img { width: 92px; height: 104px; }
  /* The name may run 4px past the picture on each side, so "Nails and beauty" fits without an ellipsis. */
  .deal__visual .niche__name { margin-inline: -4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .6875rem; }
  /* The two small helper lines go on these short screens; the button and the zoom cursor say it. */
  .deal__visual .bf-preview figcaption > span, .deal__visual .niches__title span { display: none; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .deal__card { padding: 20px 36px; }
  .deal__copy { gap: 8px; }
  .deal__title { font-size: clamp(1.8rem, 1rem + 1.5vw, 2.2rem); }
  .deal__card .btn { min-height: 44px; }
  .deal__card .btn__icon { width: 34px; height: 34px; }
  .deal__card .bf-countdown__units li { min-width: 52px; padding: 4px 8px; }
  .deal__card .bf-countdown__units b { font-size: 1.05rem; }
  .deal__visual .bf-preview { width: min(100%, 340px); }
  .deal__visual .niche__btn { width: 84px; }
  .deal__visual .niche__btn img { width: 84px; height: 90px; }
}

/* Nav tag */
.nav__deal {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; margin-left: -10px; border-radius: var(--r-pill);
  border: 1px solid transparent; background: linear-gradient(#1C1C1C, #1C1C1C) padding-box, var(--grad) border-box;
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; color: var(--fg);
  transition: box-shadow .25s, transform .25s;
}
.nav__deal:hover { box-shadow: var(--accent-lift); transform: translateY(-1px); }
.nav__deal-short { display: none; }
@media (max-width: 520px) { .nav__deal-long { display: none; } .nav__deal-short { display: inline; } }
@media (max-width: 400px) { .nav__deal { padding: 4px 10px; margin-left: -14px; } .nav__pill { gap: 16px; } }
@media (max-width: 359px) { .nav__deal { display: none; } }
/* Phones: the nav pill (with the deal tag) spans most of the top edge, so Sound and the loader
   move down below it instead of sitting underneath. */
@media (max-width: 600px) {
  .journey__sound { top: 80px; }
  .journey__loader { top: 138px; }
}

/* ───────── Client website checklist (checklist.html) ───────── */
.ck { padding-block: clamp(110px, 13vw, 160px) var(--section-y); }
.ck__inner { max-width: 50rem; }
.ck__head { display: grid; gap: 20px; justify-items: start; margin-bottom: 32px; }
.ck-progress {
  position: sticky; top: 12px; z-index: 40; display: grid; gap: 10px; margin-bottom: 28px; padding: 16px 20px;
  border-radius: var(--r-md); background: rgba(22, 22, 22, .92); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.ck-progress[hidden] { display: none; }
.ck-progress__text { font-size: var(--fs-sm); color: var(--fg-2); }
.ck-progress__text strong { color: var(--fg); font-weight: 600; }
.ck-progress__saved { color: var(--fg-3); }
/* The floating nav pill sits top-left; on phones the sticky bar goes below it. */
@media (max-width: 700px) { .ck-progress { top: 78px; } }

.ck-form { display: grid; gap: 18px; }
.ck-form[hidden] { display: none; }
.ck-section { display: grid; gap: 20px; padding: clamp(20px, 4vw, 36px); border-radius: var(--r-card); background: var(--bg-raised); border: 1px solid var(--line); scroll-margin-top: 140px; }
.ck-section > div:not(.q-row):not(.ck-reviews):not(.ck-tip):not(.ck-design__actions), .ck-section .q-row > div { display: grid; gap: 10px; align-content: start; }
.ck-section__head { display: flex; align-items: flex-start; gap: 16px; }
.ck-section__head h2 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.ck-section__head p { color: var(--fg-3); font-size: var(--fs-sm); font-weight: 300; margin-top: 4px; }
.ck-section__num { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grad-safe) border-box; color: #fff; font-weight: 600; font-size: var(--fs-sm); }
.ck-section__done { margin-left: auto; flex: none; padding: 4px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 600; }
.ck-section__done[hidden] { display: none; }
.ck-section .q-choice__text small { display: block; color: var(--fg-3); font-weight: 300; font-size: var(--fs-xs); margin-top: 2px; }
.ck-section .q-choices .q-choice { border-radius: var(--r-md); }     /* two line answers read better as rounded cards than pills */
.ck-inline-choice { border-radius: var(--r-md); }

.ck-services { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ck-service { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.ck-service__num { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 12px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: var(--fs-xs); color: var(--fg-2); }
.ck-service__fields { display: grid; gap: 8px; }
.ck-service__row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
@media (max-width: 560px) { .ck-service__row { grid-template-columns: 1fr; } }
[data-ck-add-service] { justify-self: start; }
[data-ck-add-service][hidden] { display: none; }

.ck-reviews { display: grid; gap: 14px; }
.ck-review { display: grid; gap: 8px; }
.ck-tip { padding: 14px 18px; border-radius: var(--r-md); background: var(--bg-raised-2); border: 1px dashed var(--line-strong); font-size: var(--fs-sm); color: var(--fg-2); font-weight: 300; }
.ck-tip strong { color: var(--fg); font-weight: 500; }

.ck-section--send { background: linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box, var(--grad) border-box; border-color: transparent; }
.ck-send { display: flex; justify-content: flex-end; }
.ck-form[aria-busy="true"] .ck-send .btn { opacity: .7; pointer-events: none; }
.ck-done { display: grid; gap: 20px; justify-items: start; }
.ck-done[hidden] { display: none; }

/* Checklist: optional design tool card (links to example-one-page.html#build) */
.ck-design { background: linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box, var(--grad) border-box; border-color: transparent; }
.ck-section__num--star { font-size: 1rem; }
.ck-section > .ck-design__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ck-design__status { padding: 12px 16px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--fg); font-size: var(--fs-sm); line-height: 1.7; }
.ck-design__status[hidden] { display: none; }
.ck-design__swatch { display: inline-block; width: 16px; height: 16px; margin: 0 2px -3px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255,255,255,.4); }

/* ───────── WhatsApp chat button (every Merkcoco page except the example) ─────────
   Same treatment as .btn--primary: the purple→orange button gradient (orange end behind the white
   disc, so the white label keeps ≥ 4.75:1), sized to the border box (edge rule 1), a neutral lift
   on hover and no coloured glow (edge rule 3). Purple WhatsApp mark on the white disc, like the
   primary buttons' arrow. On phones it shrinks to the disc inside a gradient ring. */
.wa-chat {
  position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px); z-index: 45;
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 22px 6px 6px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--grad-button-srgb) border-box;
  background: var(--grad-button) border-box;
  color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .9);
  transition: box-shadow .25s, transform .25s var(--ease-out);
}
.wa-chat:hover { box-shadow: var(--accent-lift), 0 16px 32px -18px rgba(0, 0, 0, .9); transform: translateY(-2px); }
.wa-chat:active { transform: scale(.98); }
.wa-chat:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.wa-chat__disc {
  position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--fg); color: var(--purple);   /* purple mark on the white disc, like the arrow: 6.5:1 */
  transition: transform .35s var(--ease-out);
}
.wa-chat__disc svg { width: 22px; height: 22px; }
.wa-chat:hover .wa-chat__disc { transform: rotate(-12deg) scale(1.05); }
/* A soft ring ripples out from the disc a few times after the page settles, then stops. */
.wa-chat__disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7);
  opacity: 0; animation: wa-ring 2.4s var(--ease-out) 2.5s 3;
}
@keyframes wa-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@media (max-width: 600px) {
  .wa-chat { padding: 6px; gap: 0; }
  .wa-chat__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wa-chat__disc { width: 44px; height: 44px; }
  .wa-chat__disc svg { width: 24px; height: 24px; }
}
/* It steps aside while a form is on screen, so it never covers Next or Claim my spot (main.js). */
.wa-chat { transition: box-shadow .25s, transform .25s var(--ease-out), opacity .25s, visibility .25s; }
.wa-chat.is-away { opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; }
@media print { .wa-chat { display: none; } }

/* ───────── Niche ideas strip (home page Black Friday card) ───────── */
.deal__visual { display: grid; gap: 28px; min-width: 0; }
.niches { display: grid; gap: 12px; min-width: 0; }
.niches__title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--fg); }
.niches__title span { font-size: var(--fs-xs); font-weight: 400; color: var(--fg-3); }
.niches__viewport {
  overflow: hidden; padding-block: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.niches__track { display: flex; gap: 12px; width: max-content; margin: 0; padding: 0; list-style: none; animation: niches-scroll 45s linear infinite; }
/* The list is doubled; move by exactly one copy (half the track plus half a gap) for a seamless loop. */
@keyframes niches-scroll { to { transform: translateX(calc(-50% - 6px)); } }
.niches.is-paused .niches__track, .niches__viewport:hover .niches__track { animation-play-state: paused; }
.niche__btn {
  display: grid; gap: 8px; width: 132px; padding: 0; border: 0; background: none; cursor: zoom-in;
  color: var(--fg-2); font: inherit; text-align: left;
}
.niche__btn img {
  display: block; width: 132px; height: 176px; object-fit: cover; object-position: top; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-raised-2);
  transition: transform .3s var(--ease-out), border-color .3s;
}
.niche__btn:hover img, .niche__btn:focus-visible img { transform: translateY(-3px) scale(1.04); border-color: var(--line-strong); }
.niche__btn:focus-visible { outline: none; }
.niche__btn:focus-visible img { outline: 2px solid var(--accent); outline-offset: 3px; }
.niche__name { font-size: var(--fs-xs); }

/* The pop-out: a fixed layer above everything, grown from the hovered design. */
.niche-pop {
  position: fixed; z-index: 90; margin: 0; pointer-events: none; opacity: 0;
  transform: scale(.4); transform-origin: var(--ox, 50%) var(--oy, 100%);
  transition: opacity .2s ease, transform .3s var(--ease-out);
}
.niche-pop.is-on { opacity: 1; transform: none; }
.niche-pop img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 18px;
  border: 1px solid var(--line-strong); background: #111; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9);
}
.niche-pop figcaption {
  width: fit-content; margin: 10px auto 0; padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(16, 16, 16, .92); border: 1px solid var(--line-strong); font-size: var(--fs-sm); font-weight: 500; color: var(--fg);
}

/* Reduced motion: no auto scroll; the strip becomes a row you can swipe or scroll. */
@media (prefers-reduced-motion: reduce) {
  .niches__track { animation: none; }
  .niches__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .niches__track li[aria-hidden="true"] { display: none; }
}

/* ── Highlight words (.hl) ───────────────────────────────────────────────
   Bold words in the brand gradient that slowly flows through them (plus the R3 500 price). The
   gradient runs purple, orange, purple across twice the word's width and repeats, so sliding it
   by exactly that width (200%) loops without a seam. Both ends are the light text tints
   (≥ 6.9:1 on the dark ground).
   Each word pops in (rise, overshoot, settle, the same bf-pop as R3 500) the first time it
   arrives: main.js adds data-hl and then is-lit as it scrolls into view; in the hero,
   scroll-sequence.js lights a caption's words as the caption comes in. They are inline-block so
   they can scale, and a word followed by punctuation sits in a .nw (no wrap) span with it, so a
   comma or full stop never wraps onto its own line. */
.hl, .bf-price {
  background: linear-gradient(90deg, #C77DFF 0%, #FF7A33 50%, #C77DFF 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: hl-flow 7s linear infinite;
}
.hl { display: inline-block; font-weight: 700; }
.bf-price { font-weight: 700; }
/* background-clip: text only paints inside the box, and a tight heading line-height ends the box
   above the descenders, which cut off the tail of g, p and y. Extra padding gives the gradient
   room (top too, for tall letters); the negative margins keep the layout exactly where it was. */
.hl, .bf-price { padding: .2em .04em; margin: -.2em -.04em; }
.nw { white-space: nowrap; }
@keyframes hl-flow { to { background-position: 200% 0; } }
.hl[data-hl]:not(.is-lit) { opacity: 0; }
.hl.is-lit { animation: bf-pop .7s cubic-bezier(.34, 1.56, .64, 1) .15s both, hl-flow 7s linear infinite; }
/* A transparent fill lets text-shadow show through the letters, so the hero words use a filter
   shadow instead of the caption's text-shadow. */
.journey__line .hl { text-shadow: none; filter: drop-shadow(0 2px 16px rgba(0, 0, 0, .55)); }
@media (prefers-reduced-motion: reduce) {
  .hl, .bf-price, .hl.is-lit { animation: none; }
  .hl[data-hl]:not(.is-lit) { opacity: 1; }
}

/* ── Price drop: R7 000 crossed out, then R3 500 ─────────────────────────
   Black Friday hero and the homepage deal card. Without JS (or with reduced motion) the final
   state shows: R7 000 struck through and dimmed, R3 500 and the saving visible. With JS the start
   state holds until main.js adds is-on as the price scrolls into view, which runs
   1. a grey strike drawing across R7 000, 2. R7 000 dimming, 3. R3 500 popping in,
   4. the saving badge (rand and percentage) popping in. */
.bf-deal { display: inline; white-space: nowrap; }
.bf-was {
  position: relative; display: inline-block; margin-right: .12em; vertical-align: .32em;
  font-size: .56em; font-weight: 400; color: var(--fg-3); text-decoration: none;
}
.bf-was::after {
  content: ""; position: absolute; left: -6%; right: -6%; top: 50%; height: .1em; margin-top: -.05em; border-radius: 99px;
  background: rgba(255, 255, 255, .62); transform-origin: left center;
}
.bf-save {
  display: inline-block; margin-top: -8px; padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid transparent; font-size: var(--fs-sm); color: var(--fg-2);
  background: linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box, var(--grad-button) border-box;
}
/* "once off" sits after the price like a unit: small, quiet, at the price's middle. */
.bf-once { display: inline-block; vertical-align: .55em; margin-left: .1em; font-size: max(.26em, .75rem); font-weight: 500; letter-spacing: .02em; color: var(--fg-2); }
.bf-save span { white-space: nowrap; font-weight: 700; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Start state, before the price is in view. Gated on the early .js class (set in <head>), so the
   final state never flashes before main.js runs. */
@media (prefers-reduced-motion: no-preference) {
  .js .bf-deal:not(.is-on) .bf-was { color: var(--fg); }
  .js .bf-deal:not(.is-on) .bf-was::after { transform: scaleX(0); }
  .js .bf-deal:not(.is-on) .bf-price, .js .bf-deal:not(.is-on) .bf-once { opacity: 0; }
  .js .bf-save:not(.is-on) { opacity: 0; transform: scale(.6); }
}
/* The sequence */
.bf-deal.is-on .bf-was { animation: bf-dim .5s ease .85s both; }
.bf-deal.is-on .bf-was::after { animation: bf-strike .55s cubic-bezier(.65, 0, .35, 1) .3s both; }
.bf-deal.is-on .bf-price { animation: bf-pop .7s cubic-bezier(.34, 1.56, .64, 1) 1s both, hl-flow 7s linear infinite; }
.bf-deal.is-on .bf-once { animation: bf-pop .6s cubic-bezier(.34, 1.56, .64, 1) 1.3s both; }
.bf-save.is-on { animation: bf-pop .6s cubic-bezier(.34, 1.56, .64, 1) 1.6s both; }
@keyframes bf-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bf-dim { from { color: var(--fg); } to { color: var(--fg-3); } }
@keyframes bf-pop { from { opacity: 0; transform: translateY(.25em) scale(.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bf-deal.is-on .bf-was, .bf-deal.is-on .bf-was::after, .bf-deal.is-on .bf-price, .bf-deal.is-on .bf-once, .bf-save.is-on { animation: none; }
}

/* ── Direction banner (homepage, after the Black Friday card) ──────────────
   Full width, edge to edge, with the copy over the scene. The clip covers the section; the top
   and bottom fade into the page and a scrim darkens the right side behind the copy. When main.js
   starts the clip it adds is-on: the astronaut pulls in from the right, and the copy appears as
   he clears it (line one 2.15s, "A lot more direction." pops 2.45s, paragraph 2.75s); his boots
   leave the left edge at 3.9s and the clip holds on the empty sky. is-static (reduced motion,
   autoplay refused) shows a still of him mid journey and the copy at once.
   Phones: the section is taller than the clip, so it crops to the middle of the frame, which he
   still crosses; the copy sits at the bottom over a darker fade. */
.direction {
  position: relative; display: grid; align-items: center; overflow: hidden; isolation: isolate;
  /* 21:9 of the viewport width, within limits. (aspect-ratio + min-height would turn the min-height
     into a min-width of 1213px and push the banner off the side on tablets.) */
  margin-top: clamp(56px, 7vw, 110px); height: clamp(520px, 42.86vw, 90vh);
  background: #120a22;   /* the clip's own deep purple, so nothing flashes black while it loads */
}
.direction__media { position: absolute; inset: 0; z-index: -1; }
.direction__video, .direction__still img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.direction__still { display: none; }
.direction.is-static .direction__still { display: block; }
.direction.is-static .direction__video { display: none; }
.direction__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(10, 10, 10, 0) 14%, rgba(10, 10, 10, 0) 86%, var(--bg) 100%),
    linear-gradient(90deg, rgba(10, 6, 20, 0) 38%, rgba(10, 6, 20, .55) 60%, rgba(10, 6, 20, .82) 100%);
}
.direction__inner { display: grid; justify-items: end; }
.direction__copy { display: grid; gap: 20px; width: min(46%, 580px); container-type: inline-size; }
/* Two lines, always: each line keeps to one row, and the size follows the copy column's width
   (cqi), since the bold gradient line is about 10.4em wide. White at the site's heading weight
   (500); only the gradient line is bold, like the other highlights. */
.direction__title { font-size: clamp(2rem, 1.1rem + 2.4vw, 3.75rem); font-size: min(3.75rem, 9.6cqi); line-height: 1.05; font-weight: 500; letter-spacing: var(--tracking-head); text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.direction__title .hl { text-shadow: none; filter: drop-shadow(0 2px 16px rgba(0, 0, 0, .45)); }
.direction__line { display: block; white-space: nowrap; }
.direction__text { max-width: 44ch; font-size: var(--fs-lg); line-height: 1.6; color: rgba(255, 255, 255, .86); }
@media (max-width: 1023px) {
  .direction__copy { width: min(58%, 520px); }
}
@media (max-width: 759px) {
  .direction { height: auto; min-height: 640px; align-items: end; }
  .direction__video, .direction__still img { object-position: 50% 42%; }
  .direction__media::after {
    background: linear-gradient(180deg, var(--bg) 0%, rgba(10, 10, 10, 0) 10%, rgba(10, 6, 20, 0) 34%, rgba(10, 6, 20, .78) 62%, var(--bg) 100%);
  }
  .direction__inner { justify-items: start; padding-bottom: 40px; }
  .direction__copy { width: 100%; }   /* a definite width: the title sizes from it (cqi) */
}
/* Start state, gated on the early .js class so nothing flashes; main.js adds is-on or is-static. */
@media (prefers-reduced-motion: no-preference) {
  .js .direction:not(.is-on):not(.is-static) .direction__line,
  .js .direction:not(.is-on):not(.is-static) .direction__text { opacity: 0; }
}
.direction.is-on .direction__line:first-child { animation: dir-rise .8s var(--ease-out) 2.15s both; }
.direction.is-on .direction__line:last-child { animation: bf-pop .8s cubic-bezier(.34, 1.56, .64, 1) 2.45s both; }
.direction.is-on .direction__text { animation: dir-rise .8s var(--ease-out) 2.75s both; }
@keyframes dir-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .direction.is-on .direction__line, .direction.is-on .direction__text { animation: none; }
}

/* ───────── Process as a mission flight path ─────────
   Layout: mission control (the section head plus the HUD) on the left, the flight on the right.
   The flight is a lane on the left of the cards: an SVG trajectory (a faint dotted track, and the
   burn, drawn up to the rocket), the rocket, and one planet per step. js/process.js builds the
   path from where the planets actually sit and moves the rocket level with the reading line.
   States set by the script: .is-ready on the section (start dimmed), .is-reached on a step once the
   rocket passes its planet, .is-docked on a step the first time (its card lights up for good),
   .is-done on the HUD at the end. Without JS, or with reduced motion, everything shows lit. */

.mission { --lane: 168px; --station: 88px; --lane-x: 84px; }
.mission__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.mission .process__head { position: static; }
.mission__side { display: grid; gap: 40px; align-content: start; align-self: stretch; }

/* ── Mission control ── */
.hud {
  position: sticky; top: 112px; display: grid; gap: 18px; padding: 24px 26px 26px;
  border-radius: var(--r-card); border: 1px solid transparent;
  background: radial-gradient(120% 90% at 0% 0%, rgba(153, 0, 205, .18), transparent 60%) padding-box,
              linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
              linear-gradient(140deg, rgba(199, 125, 255, .45), rgba(255, 122, 51, .35) 60%, rgba(255, 255, 255, .06)) border-box;
  box-shadow: 0 30px 80px -40px rgba(153, 0, 205, .55);
}
.hud__top { display: flex; justify-content: space-between; align-items: center; font: 500 .6875rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.hud__live { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-2); }
.hud__live i { width: 7px; height: 7px; border-radius: 50%; background: #FF7A33; box-shadow: 0 0 0 0 rgba(255, 122, 51, .6); animation: hud-live 1.6s ease-out infinite; }
@keyframes hud-live { to { box-shadow: 0 0 0 9px rgba(255, 122, 51, 0); } }

.hud__main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; }
/* The countdown: a reel of 5 4 3 2 1 0 that rolls one place per step. */
.hud__count { height: 1em; overflow: hidden; font-size: clamp(4.5rem, 3rem + 3.6vw, 7rem); line-height: 1; font-weight: 700; letter-spacing: -.04em; }
.hud__reel { display: grid; transition: transform .7s cubic-bezier(.34, 1.4, .64, 1); }
.hud__reel span {
  height: 1em; display: block;
  background: linear-gradient(180deg, #C77DFF, #FF7A33); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hud__text { display: grid; gap: 6px; }
.hud__caption { font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-3); }
.hud__phase { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 500; line-height: 1.2; color: var(--fg); }
.hud__phase.is-swap { animation: hud-swap .5s var(--ease-out); }
@keyframes hud-swap { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.hud__segments { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.hud__segments li { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.hud__segments i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #C77DFF, #FF7A33); border-radius: inherit; }

.hud__readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.hud__readouts div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.hud__readouts dt { font: 500 .625rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.hud__readouts dd { margin: 4px 0 0; font: 500 1rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--fg); font-variant-numeric: tabular-nums; }

.hud__cta { justify-self: start; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease-out), visibility 0s .6s; }
.hud.is-done .hud__cta { opacity: 1; visibility: visible; transform: none; transition: opacity .5s, transform .6s var(--ease-out); }
.hud.is-done .hud__live i { background: #C77DFF; }

/* ── The flight ── */
.mission__flight { position: relative; }
.mission__path { position: absolute; left: 0; top: 0; width: var(--lane); height: 100%; overflow: visible; pointer-events: none; }
.mission__track { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 9; }
.mission__burn { fill: none; stroke: url(#burn); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 122, 51, .55)); }
.mission__list { position: relative; display: grid; gap: clamp(48px, 6vw, 88px); margin: 0; padding: 0 0 0 var(--lane); list-style: none; }

.mission__rocket {
  position: absolute; left: 0; top: 0; z-index: 3; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  pointer-events: none; will-change: transform; opacity: 0;
}
.mission.is-ready .mission__rocket { opacity: 1; }
.mission__rocket svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(199, 125, 255, .35)); }
.mr-hull { fill: #F4F1FA; stroke: #F4F1FA; stroke-width: .6; stroke-linejoin: round; }
.mr-fins { fill: none; stroke: #C77DFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mr-window { fill: #9900CD; }
.mr-flame { fill: #FF7A33; stroke: #FFB27A; stroke-width: .8; transform-box: fill-box; transform-origin: 100% 0; animation: mr-flicker .12s ease-in-out infinite alternate; }
.mission.is-fast .mr-flame { animation-duration: .06s; }
/* Cleared for launch: the rocket, parked past the last planet, glows and its flame roars. */
.mission.is-launched .mission__rocket svg { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(255, 122, 51, .75)); }
.mission.is-launched .mr-flame { animation: mr-roar .1s ease-in-out infinite alternate; }
@keyframes mr-roar { from { transform: scale(1.4); } to { transform: scale(1.9); } }
@keyframes mr-flicker { from { transform: scale(.8); opacity: .85; } to { transform: scale(1.25); opacity: 1; } }

/* ── Planets ── */
.mstep { position: relative; }
.mstep__station {
  position: absolute; top: 6px; left: calc(var(--lane-x) - var(--lane) - var(--station) / 2);
  width: var(--station); height: var(--station); z-index: 2;
}
.planet { width: 100%; height: 100%; overflow: visible; }
.pl-orbit { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1; stroke-dasharray: 2 4; transform-origin: center; }
.pl-glow { fill: rgba(199, 125, 255, 0); transition: fill .6s; }
.pl-body { fill: #232027; stroke: rgba(255, 255, 255, .16); stroke-width: 1; transition: fill .6s, stroke .6s; }
.pl-sweep { fill: rgba(255, 255, 255, .12); }
.pl-dot { fill: rgba(255, 255, 255, .25); }
.pl-lines ellipse, .pl-ring ellipse { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; }
.pl-cross path, .pl-rays { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.6; stroke-linecap: round; }
.pl-moon { fill: rgba(255, 255, 255, .3); }
.pl-spin { transform-origin: 0 0; transform-box: view-box; }

/* Reached: the planet catches the light. */
.mstep.is-reached .pl-body { fill: url(#pl-grad); stroke: rgba(255, 255, 255, .5); }
.mstep.is-reached .pl-glow { fill: rgba(199, 125, 255, .18); }
.mstep.is-reached .pl-orbit { stroke: rgba(255, 122, 51, .55); animation: pl-orbit 14s linear infinite; }
.mstep.is-reached .pl-sweep { fill: rgba(255, 255, 255, .45); }
.mstep.is-reached .pl-dot, .mstep.is-reached .pl-moon { fill: #fff; }
.mstep.is-reached .pl-lines ellipse, .mstep.is-reached .pl-ring ellipse { stroke: rgba(255, 255, 255, .7); }
.mstep.is-reached .pl-cross path, .mstep.is-reached .pl-rays { stroke: #FF7A33; }
.mstep.is-reached .pl-spin--sweep { animation: pl-spin 2.4s linear infinite; }
.mstep.is-reached .pl-spin--moon { animation: pl-spin 5s linear infinite; }
.mstep.is-reached .pl-spin--rays { animation: pl-spin 18s linear infinite; }
.mstep.is-reached .pl-cross { animation: pl-lock .9s var(--ease-out) both; }
.mstep.is-arriving .mstep__station { animation: pl-arrive .9s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pl-orbit { to { transform: rotate(360deg); } }
@keyframes pl-spin { to { transform: rotate(360deg); } }
@keyframes pl-lock { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
@keyframes pl-arrive { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* ── Cards: in shadow until the rocket arrives, then docked for good ── */
.mstep__card { position: relative; overflow: hidden; transition: border-color .6s, box-shadow .6s, opacity .7s, transform .8s var(--ease-out), filter .7s; }
.mission.is-ready .mstep:not(.is-docked) .mstep__card { opacity: .32; transform: translateX(18px); filter: saturate(.2); }
.mstep.is-reached .mstep__card { border-color: rgba(199, 125, 255, .35); box-shadow: 0 24px 60px -36px rgba(153, 0, 205, .7); }
/* The docking scan: a soft line of light runs down the card once, as it lights up. */
.mstep__card::after {
  content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(199, 125, 255, .14) 60%, rgba(255, 122, 51, .22) 96%, transparent);
}
.mstep.is-docking .mstep__card::after { animation: m-scan 1.1s ease-out; }
@keyframes m-scan { 0% { top: -30%; opacity: 1; } 100% { top: 110%; opacity: 1; } }

/* ── Tablet and phone: one column; mission control becomes a slim bar that stays in view ── */
@media (max-width: 1023px) {
  .mission__grid { grid-template-columns: 1fr; }
  .mission__side { height: auto; display: contents; }
  .mission .process__head { margin-bottom: 8px; }
  .hud {
    top: 84px; z-index: 6; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 16px; padding: 12px 18px;
    background: rgba(18, 18, 18, .88) padding-box, linear-gradient(140deg, rgba(199, 125, 255, .45), rgba(255, 122, 51, .35)) border-box;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); margin-bottom: 8px;
  }
  .hud__top, .hud__readouts { display: none; }
  .hud__main { grid-column: 1 / -1; gap: 14px; }
  .hud__count { font-size: 2.6rem; }
  .hud__phase { font-size: 1rem; }
  .hud__segments { grid-column: 1 / -1; }
  .hud__cta { display: none; }
  .mission { --lane: 68px; --station: 52px; --lane-x: 30px; }
  .mstep__station { top: 16px; }
  .mission__rocket { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
}
@media (max-width: 1023px) and (min-width: 600px) { .mission { --lane: 112px; --station: 68px; --lane-x: 54px; } }

/* Reduced motion: everything lit, no rocket, no countdown. */
@media (prefers-reduced-motion: reduce) {
  .mission__rocket, .hud { display: none; }
  .hud__reel, .mstep__card, .hud__cta { transition: none; }
  .pl-orbit, .pl-spin, .pl-cross, .hud__live i, .mr-flame { animation: none !important; }
}

/* ───────── Offers: choose your altitude ─────────
   Three cards that climb from left to right on wide screens (launch pad, low orbit, deep space).
   A dotted trajectory runs up through the altitude markers above them; js/offers.js builds it from
   where the markers sit and, when the section comes into view, draws the burn along it with a
   rocket at its tip, which then parks top right. Each card has a small animated scene, which
   quickens on hover. States: .is-in on the section (flight starts) and on each card (it rises in), .is-landed when
   the rocket has finished. Reduced motion: everything in place, nothing moving. */

.offers { --rise: 72px; overflow: hidden; }
.offers__head { display: grid; gap: 20px; justify-items: start; max-width: 720px; margin-bottom: clamp(48px, 6vw, 80px); }
.offers__stage { position: relative; }
.offers__list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px); align-items: start; margin: 0; padding: 0; list-style: none; }
.offer { display: grid; gap: 14px; }
/* The climb: each card starts a step higher than the one before. */
.offer--entry { margin-top: calc(var(--rise) * 2); }
.offer--core { margin-top: var(--rise); }

/* Altitude marker above each card: a dot on the trajectory and a mission control readout. */
/* A solid chip, so the trajectory passes neatly behind it. */
.offer__alt { position: relative; z-index: 1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px 7px 8px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line); font: 500 .6875rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.offer__alt span { color: var(--fg-2); }
.offer__alt i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid rgba(255, 255, 255, .25); transition: border-color .5s, box-shadow .5s, background-color .5s; }
.offers.is-landed .offer__alt i, .offer.is-passed .offer__alt i { background: #FF7A33; border-color: #FFD2B3; box-shadow: 0 0 0 5px rgba(255, 122, 51, .18), 0 0 18px rgba(255, 122, 51, .6); }

/* ── Cards ── */
.offer__card {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; isolation: isolate;
  border-radius: var(--r-card); border: 1px solid var(--line); background: var(--bg-raised);
  transition: transform .5s var(--ease-out), box-shadow .5s, border-color .5s;
}
/* A gradient edge that fades in on hover (always on for the featured card). */
.offer__card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(199, 125, 255, .9), rgba(255, 122, 51, .7) 55%, rgba(255, 255, 255, .08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s;
}
.offer__card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -40px rgba(153, 0, 205, .65); border-color: transparent; }
.offer__card:hover::before { opacity: 1; }

.offer--core .offer__card { border-color: transparent; box-shadow: 0 40px 90px -40px rgba(153, 0, 205, .7); background: radial-gradient(120% 70% at 50% 0%, rgba(153, 0, 205, .16), transparent 60%), var(--bg-raised); }
.offer--core .offer__card::before { opacity: 1; }

.offer__scene { position: relative; height: 150px; background: radial-gradient(120% 120% at 50% 110%, rgba(153, 0, 205, .28), transparent 60%), linear-gradient(180deg, #0B0812, #120C1C); }
.offer__scene::after { content: ""; position: absolute; inset: auto 0 0; height: 40px; background: linear-gradient(180deg, transparent, var(--bg-raised)); }
.offer--core .offer__scene::after { background: linear-gradient(180deg, transparent, #160E1E); }
.offer__scene svg { display: block; width: 100%; height: 100%; }

.offer__body { display: grid; gap: 14px; align-content: start; padding: 22px clamp(22px, 2.4vw, 32px) clamp(26px, 2.6vw, 34px); color: var(--fg-2); font-weight: 300; }
.offer__tier { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; justify-self: start;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offer__title { font-size: clamp(1.35rem, 1.05rem + .9vw, 1.75rem); line-height: 1.15; font-weight: 500; color: var(--fg); letter-spacing: -.01em; }
.offer__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.offer__amount { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--fg); }
.offer__amount--grad { background: linear-gradient(90deg, #C77DFF 0%, #FF7A33 50%, #C77DFF 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hl-flow 7s linear infinite; padding: .1em 0; margin: -.1em 0; }
.offer__amount--text { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; }
.offer__from, .offer__unit { font-size: var(--fs-sm); color: var(--fg-3); font-weight: 400; }
.offer__note { display: flex; align-items: center; gap: 10px; margin: -4px 0 0; font-size: var(--fs-xs); color: var(--fg-3); }
.offer__note s { text-decoration-color: rgba(255, 255, 255, .55); }
.offer__flag { padding: 3px 10px; border-radius: var(--r-pill); font-weight: 600; letter-spacing: .04em; color: var(--fg); background: linear-gradient(#1A1A1A, #1A1A1A) padding-box, var(--grad-button) border-box; border: 1px solid transparent; }
.offer__desc { font-size: var(--fs-sm); line-height: 1.6; }
.offer__cta { justify-self: start; margin-top: 6px; }

/* ── Scenes ── */
.sc-star { fill: #fff; opacity: .5; }
.sc-star--tw { animation: sc-twinkle 3.2s ease-in-out var(--d) infinite; }
@keyframes sc-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* Entry: rocket on the pad */
.sc-ground { fill: #1D1426; }
.sc-tower { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 2; stroke-linecap: round; }
.sc-smoke circle { fill: rgba(255, 255, 255, .14); transform-box: fill-box; transform-origin: center; animation: sc-puff 2.6s ease-in-out infinite; }
.sc-smoke circle:nth-child(2) { animation-delay: .5s; } .sc-smoke circle:nth-child(3) { animation-delay: 1s; } .sc-smoke circle:nth-child(4) { animation-delay: 1.4s; } .sc-smoke circle:nth-child(5) { animation-delay: .25s; }
@keyframes sc-puff { 0%, 100% { transform: scale(.85); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }
.sc-lift { transition: transform 1.2s cubic-bezier(.5, 0, .2, 1); }
.offer__card:hover .sc-lift { transform: translateY(-16px); }
.sr-hull { fill: #F4F1FA; stroke: #F4F1FA; stroke-width: .6; stroke-linejoin: round; }
.sr-fins { fill: none; stroke: #C77DFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-window { fill: #9900CD; }
.sr-flame { fill: #FF7A33; stroke: #FFB27A; stroke-width: .8; transform-box: fill-box; transform-origin: 100% 0; animation: sr-flicker .12s ease-in-out infinite alternate; }
.offer__card:hover .sr-flame { animation-name: sr-roar; }
@keyframes sr-flicker { from { transform: scale(.75); opacity: .85; } to { transform: scale(1.15); opacity: 1; } }
@keyframes sr-roar { from { transform: scale(1.3); } to { transform: scale(1.9); } }

/* Core: planet with a satellite in orbit */
.sc-orbit { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 3 5; }
.sc-planet-glow { fill: rgba(199, 125, 255, .16); }
.sc-planet { fill: url(#offers-planet); }
.sc-band { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2; stroke-linecap: round; }
.sc-ring { fill: none; stroke: rgba(255, 210, 179, .75); stroke-width: 2.5; }
.sc-sat rect { fill: #F4F1FA; } .sc-sat path { stroke: #C77DFF; stroke-width: 2.5; }

/* Advanced: a spiral galaxy */
.sc-core-glow { fill: url(#offers-glow); }
.sc-galaxy { transform-origin: 160px 70px; animation: sc-spin 40s linear infinite; }
.offer__card:hover .sc-galaxy { animation-duration: 8s; }
.sc-arm { fill: none; stroke: url(#offers-arm); stroke-width: 6; stroke-linecap: round; opacity: .85; }
.sc-arm--b { opacity: .6; } .sc-arm--c { stroke-width: 3; opacity: .7; }
.sc-core { fill: #FFE6D4; filter: drop-shadow(0 0 8px #FF7A33); }
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* ── The trajectory and its rocket (wide screens only) ── */
.offers__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.offers__track { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 9; }
.offers__burn { fill: none; stroke: url(#offers-burn); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 122, 51, .55)); }
.offers__rocket { position: absolute; left: 0; top: 0; z-index: 2; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; opacity: 0; transition: opacity .4s; }
.offers.is-in .offers__rocket { opacity: 1; }
.offers__rocket svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(199, 125, 255, .4)); }
.offers.is-landed .offers__rocket svg { animation: or-bob 2.8s ease-in-out infinite; }
@keyframes or-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -4px); } }

/* ── Arrival: cards rise in one after another ── */
.js .offer:not(.is-in) { opacity: 0; transform: translateY(40px); }
.offer { transition: opacity .8s ease, transform 1s var(--ease-out); transition-delay: calc(var(--i) * .18s + .1s); }
@media (max-width: 1023px) { .offer { transition-delay: .05s; } }   /* one at a time as each arrives */

/* ── Tablet and phone: one column, no climb, no flight ── */
@media (max-width: 1023px) {
  .offers__list { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .offer--entry, .offer--core { margin-top: 0; }
  .offers__path, .offers__rocket { display: none; }
  .offer__alt i { background: #FF7A33; border-color: #FFD2B3; }
}
@media (prefers-reduced-motion: reduce) {
  .offer, .offer__card, .sc-lift { transition: none; }
  .sc-star--tw, .sc-smoke circle, .sr-flame, .sc-galaxy, .offers__rocket svg, .offer__amount--grad { animation: none !important; }
}

/* ── Offers: what's included and flight time (v66) ── */
.offer__eta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 12px 14px;
  border-radius: var(--r-md); background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--fg); font-weight: 500;
}
.offer__eta span { font: 500 .6875rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.offer__incl { display: grid; gap: 9px; margin: 2px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); line-height: 1.45; color: var(--fg-2); }
.offer__incl li { position: relative; padding-left: 26px; }
/* A gradient tick, masked from a small check mark. */
.offer__incl li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, #C77DFF, #FF7A33);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.offer__incl li::after { content: ""; position: absolute; left: 0; top: .12em; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(199, 125, 255, .35); }
.offer__incl strong { color: var(--fg); font-weight: 500; }
/* The rows line up across the three cards on wide screens: the description gets a steady height. */
@media (min-width: 1024px) { .offer__desc { min-height: 4.8em; } }

/* ── Homepage FAQ (v66): the Black Friday accordion (.bf-faq) with a sticky heading on wide screens ── */
.home-faq .bf-faq__grid { align-items: start; }
.home-faq__head { position: sticky; top: 110px; margin-bottom: 0; }
.home-faq__head .lede { max-width: 30rem; }
.home-faq__ask { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.home-faq .bf-faq__list summary { align-items: center; transition: color .2s; }
.home-faq .bf-faq__list summary:hover { color: #FFB48A; }
.home-faq .bf-faq__list details { transition: border-color .3s, background-color .3s; }
.home-faq .bf-faq__list details[open] { border-color: rgba(199, 125, 255, .35); background: linear-gradient(180deg, rgba(153, 0, 205, .08), transparent 70%), var(--bg-raised); }
.home-faq .bf-faq__list details p + p { margin-top: -8px; }
@media (max-width: 900px) { .home-faq__head { position: static; margin-bottom: 8px; } }

/* ── Scroll hint (v66): under the first hero caption, so it leaves with it. A small mouse whose
   wheel dot drops, then rises again. Hidden when the hero is a static page (no scroll sequence). ── */
.journey__hint {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; justify-self: start;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-2); white-space: nowrap;
}
.journey__hint-icon { position: relative; flex: none; width: 18px; height: 28px; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 10px; }
.journey__hint-icon::after {
  content: ""; position: absolute; left: 50%; top: 5px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px;
  background: linear-gradient(#C77DFF, #FF7A33); animation: hint-wheel 1.8s var(--ease-out) infinite;
}
@keyframes hint-wheel { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { opacity: 0; } }
html:not(.js) .journey__hint, .journey--static .journey__hint { display: none; }
@media (prefers-reduced-motion: reduce) { .journey__hint-icon::after { animation: none; transform: translateY(4px); } }


/* ── Recent missions (v66): live client sites. Each card is the laptop screen in a browser frame with
   the phone view tucked in front of its bottom right corner; the whole card links to the live site. ── */
/* It follows the offers (whose cards already end in generous space) and runs straight into the
   direction banner, like the Black Friday card used to. */
.work { padding-top: clamp(16px, 2vw, 32px); padding-bottom: 0; }
.work__head { display: grid; gap: 20px; justify-items: start; max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.work__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(24px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.work__card { display: grid; gap: 28px; height: 100%; color: inherit; text-decoration: none; }
.work__shots { position: relative; padding: 0 7% 9% 0; }
.work__browser {
  overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-raised);
  box-shadow: 0 40px 80px -48px rgba(153, 0, 205, .55);
  transition: transform .6s var(--ease-out), box-shadow .6s, border-color .6s;
}
.work__bar { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #161616; }
.work__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.work__bar span { margin-left: 10px; padding: 3px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); font-size: .75rem; color: var(--fg-3); }
.work__browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease-out); }
.work__phone {
  position: absolute; right: 0; bottom: 0; width: 24%; overflow: hidden; border-radius: 18px; border: 5px solid #1C1C1C;
  background: #000; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .6s var(--ease-out);
}
.work__phone img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 760; object-fit: cover; object-position: top; }
.work__meta { display: grid; gap: 8px; justify-items: start; align-content: start; }
.work__live { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 500 .6875rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.work__live i { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: work-live 2.4s ease-out infinite; }
@keyframes work-live { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } }
.work__name { font-size: clamp(1.35rem, 1.05rem + .9vw, 1.75rem); line-height: 1.15; font-weight: 500; color: var(--fg); letter-spacing: -.01em; }
.work__what { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.work__desc { margin: 4px 0 0; max-width: 34rem; color: var(--fg-2); font-weight: 300; font-size: var(--fs-sm); line-height: 1.6; }
.work__visit { display: inline-flex; gap: 8px; margin-top: 8px; font-weight: 500; color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.work__card:hover .work__browser, .work__card:focus-visible .work__browser { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 48px 90px -44px rgba(153, 0, 205, .75); }
.work__card:hover .work__browser img { transform: scale(1.03); }
.work__card:hover .work__phone, .work__card:focus-visible .work__phone { transform: translateY(-14px) rotate(-2deg); }
.work__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: var(--r-md); }
@media (prefers-reduced-motion: reduce) {
  .work__live i { animation: none; }
  .work__browser, .work__browser img, .work__phone { transition: none; }
}

/* ── Aftercare (v67): the Steady orbit care plan. Copy and price left; a mission console right with
   the site as a planet, a satellite keeping watch (SMIL, paused for reduced motion in main.js) and
   the plan's inclusions as systems whose lights come on one by one when the console reveals. ── */
.care__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.care__copy { display: grid; gap: 22px; justify-items: start; }
.care__price { display: grid; gap: 8px; width: 100%; max-width: 30rem; padding-top: 22px; border-top: 1px solid var(--line); }
.care__plan { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; justify-self: start;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.care__amount { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.care__figure { font-size: clamp(2.6rem, 1.9rem + 2vw, 3.6rem); line-height: 1; font-weight: 700; letter-spacing: -.03em; padding: .1em 0; margin: -.1em 0;
  background: linear-gradient(90deg, #C77DFF 0%, #FF7A33 50%, #C77DFF 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hl-flow 7s linear infinite; }
.care__unit, .care__terms { color: var(--fg-3); font-size: var(--fs-sm); }
.care__terms { margin: 0; }
.care__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 6px; }
.care__more { font-weight: 500; color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }

.care__console {
  display: grid; gap: 16px; padding: 24px 26px 22px; border-radius: var(--r-card); border: 1px solid transparent;
  background: radial-gradient(120% 90% at 100% 0%, rgba(153, 0, 205, .2), transparent 60%) padding-box,
              linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
              linear-gradient(140deg, rgba(199, 125, 255, .45), rgba(255, 122, 51, .35) 60%, rgba(255, 255, 255, .06)) border-box;
  box-shadow: 0 30px 80px -40px rgba(153, 0, 205, .55);
}
.care__top { display: flex; justify-content: space-between; align-items: center; margin: 0; font: 500 .6875rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.care__status { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-2); }
.care__status i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; animation: work-live 2.4s ease-out infinite; }
.care__scene svg { display: block; width: 100%; height: auto; }
.care__orbit { fill: none; stroke: rgba(255, 255, 255, .24); stroke-width: 1.2; stroke-dasharray: 3 5; }
.care__band { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 2; stroke-linecap: round; }
.care__sat rect { fill: #EDE6F5; }
.care__sat path { stroke: #C77DFF; stroke-width: 2.6; }
.care__beam { fill: #FF7A33; animation: care-beam 1.6s ease-in-out infinite; }
@keyframes care-beam { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.care__label { font: 500 8px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .24em; fill: rgba(255, 255, 255, .45); }
.care__sys { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.care__sys li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--fg-2); }
.care__sys i { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 10px rgba(61, 220, 132, .55); transition: background-color .4s, box-shadow .4s; transition-delay: calc(var(--i) * .14s + .3s); }
.care__sys b { font: 500 .75rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); text-align: right; transition: opacity .4s; transition-delay: calc(var(--i) * .14s + .3s); }
/* Before the console has revealed, the systems are off; with no JS or reduced motion they're simply on. */
.js .care__console[data-reveal]:not(.is-in) .care__sys i { background: rgba(255, 255, 255, .16); box-shadow: none; }
.js .care__console[data-reveal]:not(.is-in) .care__sys b { opacity: .2; }
.care__foot { margin: 0; font-size: var(--fs-xs); color: var(--fg-3); }
@media (max-width: 900px) { .care__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .care__console { padding: 20px 18px 18px; }
  .care__sys li { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; }
  .care__sys b { grid-column: 2; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .care__beam, .care__status i, .care__figure { animation: none; } }

/* ── Sound effects (v68, js/sfx.js): the speaker button in the nav pill. Shown only where sfx.js runs
   (mouse and trackpad devices); the icon shows waves when on and a cross when off. */
.nav__sfx {
  display: grid; place-items: center; width: 40px; height: 40px; margin-left: -12px; border-radius: 50%;
  border: 0; background: transparent; color: var(--fg); cursor: pointer; transition: background-color .2s;
}
.nav__sfx[hidden] { display: none; }
/* No room in the pill on narrow windows (phones never show it: no hover). */
@media (max-width: 600px) { .nav__sfx { display: none; } }
.nav__sfx:hover { background: rgba(255, 255, 255, 0.08); }
.nav__sfx:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav__sfx svg { width: 20px; height: 20px; }
.nav__sfx-on, .nav__sfx-off { transition: opacity .2s; }
.nav__sfx[aria-pressed="true"] .nav__sfx-off, .nav__sfx[aria-pressed="false"] .nav__sfx-on { opacity: 0; }
.nav__sfx[aria-pressed="true"] .nav__sfx-on path { animation: sfx-wave 1.6s ease-in-out infinite; }
.nav__sfx[aria-pressed="true"] .nav__sfx-on path + path { animation-delay: .2s; }
@keyframes sfx-wave { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .nav__sfx-on path { animation: none !important; } }

/* ── Speed (v73): sections below the first screen are only drawn when they come near the screen.
   A phone was drawing the whole long page before its first paint (2.4s on a slow connection,
   1.7s with this). contain-intrinsic-size holds each section's rough height until it has been
   drawn once ("auto" then remembers the real one). html.cv-off draws everything: main.js sets it
   before an in-page jump, and the inline head script when the page opens on an #anchor, so jumps
   always measure real heights. ── */
.offers, .work, .direction, .deal, .process, .care, .home-faq, .start, .footer { content-visibility: auto; }
.offers { contain-intrinsic-size: auto 1400px; }
.work { contain-intrinsic-size: auto 1250px; }
.direction { contain-intrinsic-size: auto 600px; }
.deal { contain-intrinsic-size: auto 800px; }
.process { contain-intrinsic-size: auto 2650px; }
.care { contain-intrinsic-size: auto 1000px; }
.home-faq { contain-intrinsic-size: auto 1050px; }
.start { contain-intrinsic-size: auto 850px; }
.footer { contain-intrinsic-size: auto 500px; }
@media (max-width: 760px) {
  .offers { contain-intrinsic-size: auto 2100px; }
  .work { contain-intrinsic-size: auto 1400px; }
  .direction { contain-intrinsic-size: auto 640px; }
  .deal { contain-intrinsic-size: auto 1850px; }
  .process { contain-intrinsic-size: auto 3600px; }
  .care { contain-intrinsic-size: auto 1500px; }
  .home-faq { contain-intrinsic-size: auto 1300px; }
  .start { contain-intrinsic-size: auto 1050px; }
  .footer { contain-intrinsic-size: auto 900px; }
}
html.cv-off :is(.offers, .work, .direction, .deal, .process, .care, .home-faq, .start, .footer) { content-visibility: visible; }

/* Accept and sign (accept.html) */
.accept__card { margin: 0 0 28px; padding: 22px 24px; border-radius: 20px; background: var(--bg-raised); border: 1px solid var(--line-strong); }
.accept__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 24px; margin: 0 0 14px; }
.accept__facts dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3, rgba(255,255,255,.55)); }
.accept__facts dd { margin: 4px 0 0; font-size: 18px; font-weight: 600; }
.accept__form { display: grid; gap: 18px; max-width: 720px; }
.accept__form > .btn { justify-self: start; }
.accept__sign { font-style: italic; font-size: 20px; }
.accept__agree { display: flex; gap: 12px; align-items: flex-start; line-height: 1.55; }
.accept__agree input { width: 20px; height: 20px; margin-top: 3px; accent-color: #FF6501; flex-shrink: 0; }
.accept__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.accept__missing { padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--bg-raised); }
.accept__done { padding: 24px; border-radius: 20px; background: var(--bg-raised); border: 1px solid var(--line-strong); }
.accept__done h2 { margin-top: 0; }