/* =====================================================================
   Ask Moiz, v3 "Kinetic Bento"
   Yellow cover, black and white bands, chunky pressable tiles.
   Brand tokens from Ask Moiz Design System (colors_and_type.css).
   ===================================================================== */

/* Arial sized to Montserrat's metrics, so the swap to the web font does not reflow the hero */
@font-face {
  font-family: "Montserrat Fallback"; src: local("Arial"), local("ArialMT");
  size-adjust: 112.83%; ascent-override: 85.79%; descent-override: 22.25%; line-gap-override: 0%;
}

:root {
  /* brand core */
  --y: #ffcc24;
  --y-600: #f0bd14;
  --y-100: #fff4cc;
  --ink: #0a0a0a;
  --ink-2: #1a1a1a;
  --ink-3: #262626;
  --paper: #fafafa;
  --n100: #f4f4f4;
  --n200: #e9e9e9;
  --n300: #d4d4d4;
  --n400: #a3a3a3;
  --n500: #737373;
  --n600: #525252;
  --n700: #404040;
  --n800: #262626;
  --n900: #171717;
  --ok: #16a34a;
  --err: #dc2626;

  /* type */
  --font: "Montserrat", "Montserrat Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --script: "Caveat", "Segoe Script", cursive;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SFMono-Regular", Menlo, monospace;
  --t-h2: clamp(32px, 1.6vw + 24px, 48px);
  --t-h3: clamp(22px, 0.57vw + 19.8px, 28px);
  --t-h4: clamp(18px, 0.19vw + 17.3px, 20px);
  --t-lead: clamp(17px, 0.28vw + 16px, 20px);
  --t-body: clamp(16px, 0.1vw + 15.6px, 17px);

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --spring-soft: linear(0, 0.098, 0.306, 0.531, 0.726, 0.871, 0.965, 1.018, 1.042, 1.046, 1.04, 1.03, 1.02, 1.011, 1.005, 1.001, 0.999, 0.998, 0.998, 0.998, 0.999, 0.999, 1, 1, 1);
  --spring-pop: linear(0, 0.135, 0.417, 0.708, 0.933, 1.067, 1.122, 1.121, 1.091, 1.053, 1.02, 0.998, 0.987, 0.984, 0.987, 0.991, 0.996, 0.999, 1.001, 1.002, 1.002, 1.001, 1.001, 1, 1);

  /* layout */
  --gutter: 16px;
  --r-tile: 20px;
  --r-in: 16px;
  --r-btn: 12px;
  --pad: 20px;
  --sec: 64px;
  --gap: 12px;
  --focus: var(--ink);
  --halo: var(--y);   /* band between the element and its ink focus ring on light grounds */
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --spring-soft: var(--ease-out); --spring-pop: var(--ease-out); }
}
@media (min-width: 768px) {
  :root { --gutter: 24px; --r-tile: 24px; --pad: 24px; --sec: 88px; --gap: 16px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; --pad: 32px; --sec: 104px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 64px; --sec: 120px; }
}
@media (min-width: 1440px) {
  :root { --gutter: 80px; --sec: 128px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px;
  scrollbar-color: var(--ink) var(--n100);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* the fixed mobile CTA bar must never cover the focused element (WCAG 2.4.11) */
@media (max-width: 767px) {
  html { scroll-padding-bottom: 104px; }
}
/* no page scroll behind an open modal */
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, textarea { caret-color: var(--ink); }
::selection { background: var(--y); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--halo); }
strong, b { font-weight: 700; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; z-index: 200; left: 12px; top: -80px;
  padding: 12px 18px; background: var(--y); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-btn);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

.i {
  display: inline-block; flex: none; width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.i--fill { fill: currentColor; stroke: none; }

.wrap { width: min(1280px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--sec); }

/* ---------- type ---------- */
.h1 {
  font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; text-transform: uppercase;
  font-size: clamp(34px, 5vw, 70px);
}
.h2 {
  font-size: var(--t-h2); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em;
  text-transform: uppercase; text-wrap: balance; max-width: 22ch;
}
.h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.h4 { font-size: var(--t-h4); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.lead { margin-top: 16px; font-size: var(--t-lead); line-height: 1.5; color: var(--n600); max-width: 60ch; text-wrap: pretty; }
p { text-wrap: pretty; }
.mono {
  display: block; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--n600);
}
.mono--light { color: var(--n400); }
.num { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.num--y { color: var(--y); }
.script { font-family: var(--script); font-weight: 700; line-height: 1.1; }

/* ---------- buttons: static ink layer, moving face ---------- */
.btn {
  position: relative; isolation: isolate; display: inline-flex; vertical-align: middle;
  border: 0; padding: 0; background: none; border-radius: var(--r-btn);
  color: var(--ink); text-decoration: none; font-weight: 600;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  --bh: 48px; --bp: 22px; --bf: 16px; --face: #fff; --fg: var(--ink);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--ink); transform: translate(4px, 4px);
}
.btn__face {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: var(--bh); padding: 0 var(--bp);
  border: 2px solid var(--ink); border-radius: inherit;
  background: var(--face); color: var(--fg);
  font-size: var(--bf); line-height: 1.15; letter-spacing: -0.005em; text-align: center;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.btn__arrow { transition: transform 160ms var(--ease-out); }
.btn--lg { --bh: 56px; --bp: 26px; --bf: 17px; }
.btn--md { --bh: 48px; --bp: 22px; }
.btn--sm { --bh: 44px; --bp: 16px; --bf: 15px; }
.btn--sun { --face: var(--y); }
.btn--white { --face: #fff; }
.btn--ink { --face: var(--ink); --fg: #fff; }
.btn--ink::before { display: none; }
.btn--block { display: flex; width: 100%; }
.btn--icon .btn__face { width: 44px; min-height: 44px; padding: 0; }
.btn--icon .i { width: 22px; height: 22px; }
@media (min-width: 480px) {
  .btn__face { white-space: nowrap; }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__face { transform: translate(-2px, -2px); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
  .btn--ink:hover .btn__face { transform: translateY(-2px); background: var(--ink-2); }
}
.btn:active .btn__face { transform: translate(3px, 3px) scale(0.97); transition-duration: 100ms; }
.btn--ink:active .btn__face { transform: scale(0.97); }
.btn[disabled], .btn[aria-busy="true"] { pointer-events: none; }

/* header CTA: ink on the cover, sun once you scroll. The swap is instant: a black-to-yellow fade passes through olive. */
.btn--swap { --face: var(--ink); --fg: #fff; }
.btn--swap .btn__face { transition: transform 160ms var(--ease-out); }
.btn--swap::before { opacity: 0; }
.hdr.is-scrolled .btn--swap { --face: var(--y); --fg: var(--ink); }
.hdr.is-scrolled .btn--swap::before { opacity: 1; }

/* text links: thick yellow underline */
.link {
  display: inline; padding: 11px 0; border: 0; background: none;
  font-weight: 600; line-height: 1.6; color: inherit; text-align: left;
  text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 3px; text-underline-offset: 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
a.link { display: inline-block; padding-block: 11px; }
.link__end { white-space: nowrap; }
.tile--ink .link, .case .link, .how .link { text-decoration-color: var(--y); }
.link .i { width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; transition: transform 160ms var(--ease-out); }
.link .i--fill { margin: 0 8px 0 0; }
button.link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; }
button.link .i { margin: 0; }
.link--ink { text-decoration-color: var(--ink); }
.link--quiet { text-decoration: none; color: var(--n600); font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .link:hover .i:last-child { transform: translateX(3px); }
  .link--quiet:hover { color: var(--ink); }
}

/* ---------- tiles ---------- */
.bento { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.tile { position: relative; border-radius: var(--r-tile); padding: var(--pad); overflow: hidden; }
.tile--sun { background: var(--y); --focus: var(--ink); }
.tile--ink { background: var(--ink); color: #fff; --focus: var(--y); --halo: transparent; }
.tile--paper { background: var(--n100); }
.tile--card { background: #fff; border: 2px solid var(--ink); }
.tile__note { font-size: 12px; font-weight: 600; opacity: 0.8; }
.tile--ink .tile__note { color: var(--n400); opacity: 1; }

/* pressable tile: the face lifts off a static layer */
.press {
  position: relative; isolation: isolate; display: block;
  border-radius: var(--r-tile); color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.press::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--ink); transform: translate(6px, 6px);
}
.press > .tile { display: flex; flex-direction: column; height: 100%; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .press:hover > .tile { transform: translate(-2px, -2px); }
}
.press:active > .tile { transform: translate(3px, 3px) scale(0.985); transition-duration: 100ms; }

/* stickers and chips */
.sticker {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
  background: #fff; color: var(--ink);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(var(--rot, 0deg));
}
.sticker--sun { background: var(--y); }
.sticker--ink { background: var(--ink); color: #fff; box-shadow: 3px 3px 0 var(--y); }
@media (min-width: 768px) { .sticker { font-size: 13px; } }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 600; line-height: 1.3;
}
.chip--sun { background: var(--y); }
.chip--dark { background: transparent; border-color: #fff; color: #fff; }
.strike {
  display: inline-flex; align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: var(--n100); color: var(--n600); font-size: 13px; font-weight: 600;
  text-decoration: line-through; text-decoration-thickness: 2px;
}

/* placeholders: clearly not real content */
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: var(--paper); border: 2px dashed var(--n400); text-align: center;
}
.ph__label { font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--n600); max-width: 46ch; }
.ph--dark { background: var(--n900); border-color: var(--n600); }
.ph--dark .ph__label { color: var(--n400); }
.ph-inline {
  font-family: var(--mono); font-size: 0.78em; padding: 2px 6px; border-radius: 6px;
  background: var(--n100); color: var(--n600); border: 1px dashed var(--n400);
}

/* ticks */
.ticks { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.tick {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -1px;
  border-radius: 50%; background: var(--y); color: var(--ink);
}
.tick .i { width: 15px; height: 15px; stroke-width: 3; }
.ticks--x .tick { background: transparent; border: 2px solid #fff; color: #fff; }
.ticks--x .tick .i { width: 13px; height: 13px; }
.ticks--sm { gap: 8px; margin-top: 12px; font-size: 15px; }
.ticks--sm .tick { width: 22px; height: 22px; }
.ticks--sm .tick .i { width: 13px; height: 13px; }

/* Style A marks */
.blob { position: absolute; pointer-events: none; fill: var(--ink-2); height: auto; }
.blob--tl { top: 0; left: 0; }
.blob--tr { top: 0; right: 0; transform: scaleX(-1); }
.sparkle { position: absolute; width: 22px; height: 22px; fill: var(--ink); pointer-events: none; }

/* flat illustration palette (4 colours, ink strokes, one hard shadow) */
.art-white { fill: #fffefe; stroke: var(--ink); stroke-width: 2.5; }
.art-yellow { fill: var(--y); stroke: var(--ink); stroke-width: 2.5; }
.art-grey { fill: var(--n200); stroke: var(--ink); stroke-width: 2.5; }
.art-ink { fill: var(--ink); }
.art-dark { fill: var(--ink-2); }
.art-dot { fill: var(--ink); }
.art-shadow { fill: var(--n700); }
.art-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.art-line--thick { stroke-width: 4; }
.art-line--thin { stroke-width: 2; }

/* =====================================================================
   F0 Header
   ===================================================================== */
.hdr {
  position: fixed; z-index: 50; top: 12px; left: 12px; right: 12px; margin-inline: auto; max-width: 1280px;
  height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 8px;
  background: #fff; border: 2px solid var(--ink); border-radius: 16px;
}
.hdr__logo { display: flex; align-items: center; border-radius: 10px; }
.hdr__lockup { display: none; height: 28px; width: auto; }
.hdr__tile { width: 44px; height: 44px; border-radius: 10px; }
.hdr__nav { display: none; }
.hdr__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-right: 4px; }
.hdr__cta .btn__face { padding: 0 14px; }
@media (max-width: 767px) {
  .hdr.is-scrolled .hdr__cta, .hdr.is-scrolled .hdr__actions > [data-wa] { display: none; }
}
@media (min-width: 768px) {
  .hdr { padding: 0 10px 0 18px; }
  .hdr__lockup { display: block; }
  .hdr__tile { display: none; }
}
@media (min-width: 1024px) {
  .hdr { height: 64px; padding: 0 12px 0 20px; }
  .hdr__nav { display: block; margin-left: auto; }
  .hdr__nav ul { list-style: none; padding: 0; display: flex; gap: 26px; }
  .hdr__nav a {
    position: relative; display: block; padding: 10px 0;
    font-size: 15px; font-weight: 600; text-decoration: none;
  }
  .hdr__nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; border-radius: 2px;
    background: var(--y); transform: scaleX(0); transform-origin: left;
    transition: transform 180ms var(--ease-out);
  }
  .hdr__nav a[aria-current="true"]::after { transform: scaleX(1); }
  .hdr__actions { margin-left: 28px; }
  .hdr__menu { display: none; }
  .hdr__cta .btn__face { padding: 0 18px; }
}
@media (hover: hover) and (pointer: fine) {
  .hdr__nav a:hover::after { transform: scaleX(1); }
}

/* mobile menu, a Style A slide */
.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
  border: 0; background: var(--y); color: var(--ink); --focus: var(--ink); overflow: hidden auto;
}
.menu[open] { display: flex; flex-direction: column; }
.menu::backdrop { background: transparent; }
.menu .blob { width: 300px; }
.menu__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.menu__mark { width: 44px; height: 44px; border-radius: 10px; }
.menu__nav { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; padding-block: 32px; }
.menu__nav ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.menu__nav a {
  display: block; padding: 4px 0; font-size: clamp(34px, 10vw, 44px); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.03em; text-transform: uppercase; text-decoration: none;
}
.menu__foot { position: relative; z-index: 1; display: grid; gap: 12px; }
.menu__trust { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.menu__trust .i { width: 18px; height: 18px; }
.menu .sparkle--br { right: 22px; bottom: 150px; }

/* =====================================================================
   F1 Hero bento
   ===================================================================== */
.hero {
  position: relative; overflow: clip; background: var(--y); --focus: var(--ink);
  padding: 100px 0 108px;
}
.hero__blob { width: 150px; }
@media (min-width: 768px) { .hero__blob { width: clamp(240px, 30vw, 460px); top: -34px; left: -64px; } }
.hero__grid {
  position: relative; display: grid; gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero__copy { grid-column: 1 / -1; container-type: inline-size; padding-bottom: 20px; }
.hero .h1 { font-size: clamp(34px, 10.5cqi, 74px); }
.h1__line { display: block; }
.hl {
  display: inline-block; margin: 0.05em 0 0.07em -0.12em; padding: 0.06em 0.12em 0.03em;
  background: var(--ink); color: var(--y); line-height: 0.95; border-radius: 4px;
}
.hero__sub { margin-top: 20px; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-3); max-width: 38ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px 20px; margin-top: 28px; }
.hero__trust { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-3); max-width: 44ch; }
.hero__trust .i { width: 18px; height: 18px; margin-top: 1px; }
@media (max-width: 559px) {
  .hero__ctas .btn, .final .hero__ctas .btn { display: flex; width: 100%; }
  .hero__ctas { gap: 14px; }
}

.hero__portrait { grid-column: 1 / -1; height: 380px; padding: 0; overflow: visible; }
.hero__frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.hero__disc {
  position: absolute; left: 50%; top: 52%; width: min(80%, 320px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--y);
}
.hero__cutout {
  position: absolute; left: 50%; bottom: 0; height: 97%; width: auto; max-width: none;
  transform: translateX(-50%);
}

/* the rotating 12+ YEARS sticker */
.years { position: absolute; z-index: 6; width: 88px; height: 88px; top: -22px; right: 14px; }
.years__ring { width: 100%; height: 100%; animation: spin 24s linear infinite; }
.years__disc { fill: var(--ink); }
.years__line { fill: none; stroke: #fff; stroke-width: 2; }
.years__text { fill: #fff; font-family: var(--font); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; }
.years__num {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--y); font-size: 24px; font-weight: 800; letter-spacing: -0.03em;
}
@media (hover: hover) and (pointer: fine) { .years:hover .years__ring { animation-play-state: paused; } }

.hero__roas { grid-column: 1; min-height: 184px; container-type: inline-size; }
.roas { justify-content: space-between; gap: 10px; padding: 16px; }
.roas__foot { display: flex; flex-direction: column; gap: 6px; }
.roas__num { font-size: clamp(34px, 31cqi, 64px); letter-spacing: -0.045em; }
.roas__line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 13px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.roas__line .i { width: 14px; height: 14px; }
.roas__more { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--n200); font-size: 13px; font-weight: 700; }
.roas__more .i { width: 16px; height: 16px; transition: transform 160ms var(--ease-out); }
/* spend vs conversion value, drawn to scale (27,091 : 195,105); only where the tile spans two rows */
.roas__viz { display: none; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; }
.roas__k { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n600); }
.roas__track { display: block; min-width: 0; }
.roas__bar {
  display: block; height: 12px; width: calc(var(--w) * 100%); min-width: 12px;
  border: 2px solid var(--ink); border-radius: 4px; transform-origin: left;
}
.roas__bar--ink { background: var(--ink); }
.roas__bar--sun { background: var(--y); }
@media (hover: hover) and (pointer: fine) { .press:hover .roas__more .i { transform: translateX(3px); } }

/* conversions: one metric, one chart (bars 1 : 2.66, drawn to scale), one label */
.hero__bars { grid-column: 2; min-height: 184px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px; container-type: inline-size; }
.bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.bars__num { font-size: clamp(26px, 20cqi, 44px); letter-spacing: -0.035em; }
.bars__cols { display: flex; align-items: flex-end; gap: 8px; }
.bars__col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bars__col i {
  display: block; width: 36px; border: 2px solid var(--ink); border-radius: 6px 6px 0 0;
  transform-origin: bottom;
}
.bars__col--before i { height: 34px; background: var(--ink); }
.bars__col--after i { height: 90px; background: var(--y); }
.bars__col b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  /* 173px tile: the chart sits above the numeral instead of beside it */
  .bars { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
  .bars__cols { align-self: flex-end; }
  .bars__col i { width: 30px; }
  .bars__col--before i { height: 26px; }
  .bars__col--after i { height: 69px; }
}

.hero__chat { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.chat__head { display: flex; align-items: center; gap: 10px; }
.chat__avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); }
.chat__who { display: flex; flex-direction: column; line-height: 1.25; }
.chat__who b { font-size: 14px; }
.chat__who span { font-size: 12px; font-weight: 600; color: var(--n600); }
.chat__wa { margin-left: auto; width: 22px; height: 22px; }
.chat__body { display: flex; flex-direction: column; gap: 8px; }
.chat__slot { position: relative; max-width: 88%; }
.chat__slot--in { align-self: flex-end; }
.chat__slot--out { align-self: flex-start; }
.bubble { font-size: 13px; font-weight: 600; line-height: 1.4; padding: 8px 12px; border-radius: 14px; }
.bubble--in { background: var(--n100); border-bottom-right-radius: 4px; transform-origin: bottom right; }
.bubble--out { background: var(--y); border: 2px solid var(--ink); border-bottom-left-radius: 4px; transform-origin: bottom left; }
.typing {
  position: absolute; top: 0; right: 0; display: inline-flex; gap: 4px; padding: 11px 12px;
  border-radius: 14px; background: var(--n100); opacity: 0; pointer-events: none;
}
.typing--out { right: auto; left: 0; background: var(--y); border: 2px solid var(--ink); padding: 9px 12px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: dot 900ms ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 150ms; }
.typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.hero__sparkle { right: var(--gutter); bottom: 84px; }

@media (max-width: 767px) {
  /* phones: promise, then proof, then the portrait; the chat promise already sits in the trust line */
  .hero__copy { order: -2; }
  .hero__roas, .hero__bars { order: -1; }
  .hero__portrait { height: 260px; }
  .hero__chat { display: none; }
  .years { width: 80px; height: 80px; top: 14px; right: 14px; }
}
@media (min-width: 768px) {
  .hero { padding: 108px 0 120px; }
  .hero__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto minmax(228px, auto) minmax(228px, auto) auto; }
  .hero__copy { grid-row: 1; padding-bottom: 28px; }
  .hero__portrait { grid-column: 1 / 4; grid-row: 2 / 4; height: auto; }
  .hero__roas { grid-column: 4 / 7; grid-row: 2; min-height: 0; }
  .hero__bars { grid-column: 4 / 7; grid-row: 3; min-height: 0; }
  .hero__chat { grid-column: 1 / 7; grid-row: 4; }
  .years { width: 104px; height: 104px; top: -30px; right: auto; left: -18px; }
  .years__num { font-size: 29px; }
}
@media (min-width: 1200px) {
  .hero {
    min-height: min(100dvh, 920px); display: flex; align-items: center;
    padding: 132px 0 120px;
  }
  .hero__grid {
    width: min(1280px, 100% - 2 * var(--gutter));
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, clamp(118px, 10.4vw, 150px)) repeat(2, minmax(clamp(118px, 10.4vw, 150px), auto));
  }
  .hero__copy { grid-column: 1 / 7; grid-row: 1 / 5; align-self: center; padding: 0 8px 0 0; }
  .hero__ctas { gap: 16px 14px; }
  .hero__ctas .btn--lg { --bp: 22px; }
  .hero__portrait { grid-column: 7 / 10; grid-row: 1 / 4; }
  .hero__cutout { height: 92%; }
  .hero__disc { width: 86%; }
  .hero__roas { grid-column: 10 / 13; grid-row: 1 / 3; }
  .hero__bars { grid-column: 10 / 13; grid-row: 3; padding: 14px 16px; gap: 4px; }
  .roas__num { font-size: clamp(34px, 30cqi, 76px); }
  .roas__viz { display: grid; }
  .hero__chat { grid-column: 7 / 13; grid-row: 4; }
  .years { width: 112px; height: 112px; top: -52px; left: -52px; }
  .years__num { font-size: 32px; }
  .bars__col i { width: 28px; }
  .bars__col--before i { height: 27px; }
  .bars__col--after i { height: 72px; }
  .roas { padding: 18px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero { padding-top: 120px; }
  .hero .h1 { font-size: clamp(34px, 9cqi, 84px); }
}

/* =====================================================================
   F2 Ribbons (the page's only marquee)
   ===================================================================== */
.ribbons { position: relative; z-index: 5; height: 200px; margin-top: -56px; overflow-x: clip; }
.ribbon {
  position: absolute; left: -10vw; width: 120vw; display: flex; align-items: center; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ribbon--logos { z-index: 2; top: 20px; height: 62px; background: var(--ink); transform: rotate(-3deg); }
.ribbon--skills {
  z-index: 1; top: 120px; height: 54px; background: #fff; border-block: 2px solid var(--ink); transform: rotate(2.5deg);
}
/* each set holds the list twice, so one set is wider than the widest ribbon (120vw at 1920 = 2304px) */
.ribbon__track { display: flex; width: max-content; animation: marquee 96s linear infinite; }
.ribbon--skills .ribbon__track { animation-duration: 120s; animation-direction: reverse; }
.ribbon__set { list-style: none; padding: 0 48px 0 0; margin: 0; display: flex; align-items: center; gap: 48px; }
.ribbon--logos img { height: 24px; width: auto; max-width: none; }
.ribbon--logos li:nth-child(11n+1) img, .ribbon--logos li:nth-child(11n+6) img, .ribbon--logos li:nth-child(11n+7) img { height: 32px; }
.ribbon--skills .ribbon__set { gap: 20px; padding-right: 20px; }
.ribbon--skills li {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: 15px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase;
}
.ribbon--skills li img, .ribbon__i { width: 22px; height: 22px; }
.ribbon__i { stroke-width: 2.25; }
.ribbon__sep svg { width: 14px; height: 14px; fill: var(--y); stroke: var(--ink); stroke-width: 1.5; overflow: visible; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* sits on the white ground below ribbon B, at the left where the band is highest */
.pause {
  position: absolute; z-index: 6; left: var(--gutter); bottom: -26px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 2px solid #fff; background: var(--ink); color: #fff;
  box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink);
  transition: transform 160ms var(--ease-out);
}
.pause:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.pause .i { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.pause__r { display: none; }
html.motion-paused .pause__p { display: none; }
html.motion-paused .pause__r { display: block; }
.pause:active { transform: scale(0.94); }

html.motion-paused .ribbon__track,
html.motion-paused .years__ring,
html.motion-paused .typing i,
.ribbons.is-off .ribbon__track,
.hero.is-off .years__ring { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .ribbon:hover .ribbon__track { animation-play-state: paused; }
}
@media (min-width: 768px) {
  .ribbons { height: 230px; margin-top: -64px; }
  .ribbon--logos { top: 30px; height: 76px; }
  .ribbon--skills { top: 150px; height: 64px; }
  .ribbon__set { gap: 72px; padding-right: 72px; }
  .ribbon--logos img { height: 30px; }
  .ribbon--logos li:nth-child(11n+1) img, .ribbon--logos li:nth-child(11n+6) img, .ribbon--logos li:nth-child(11n+7) img { height: 40px; }
  .ribbon--skills .ribbon__set { gap: 28px; padding-right: 28px; }
  .ribbon--skills li { font-size: 18px; }
  .ribbon--skills li img, .ribbon__i { width: 24px; height: 24px; }
  .pause { bottom: -18px; }
}
/* reduced motion: the logo band becomes a static, wrapped strip so every client is visible */
@media (prefers-reduced-motion: reduce) {
  .ribbons { height: auto; margin-top: 0; padding: 28px 0 36px; overflow: hidden; }
  .ribbon { position: relative; top: auto; }
  .ribbon--logos { left: 0; width: 100%; height: auto; transform: none; -webkit-mask-image: none; mask-image: none; }
  .ribbon--logos .ribbon__track { width: 100%; }
  .ribbon--logos .ribbon__set:first-child { flex: 1; flex-wrap: wrap; justify-content: center; gap: 20px 36px; padding: 22px var(--gutter); }
  .ribbon--logos .ribbon__set[aria-hidden="true"], .ribbon--logos .ribbon__dup { display: none; }
  .ribbon--skills { margin-top: 20px; }
  .pause { display: none; }
}

/* =====================================================================
   F3 Track record
   ===================================================================== */
.stats { padding: 48px 0 var(--sec); }
.stats .tile { container-type: inline-size; }
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat .num { font-size: clamp(34px, 26cqi, 56px); }
.stat__label { font-size: 16px; font-weight: 600; line-height: 1.3; }
.stats__a { grid-column: 1 / -1; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; }
.stats__a .num { font-size: clamp(56px, 27cqi, 120px); letter-spacing: -0.045em; line-height: 0.92; }
.stats__a .stat__label { font-size: clamp(17px, 0.3vw + 15.6px, 20px); }
.stats__art { position: absolute; right: 16px; bottom: 12px; width: 150px; }
.stats__b { grid-column: 1; }
.stats__c { grid-column: 2; }
.stats__b, .stats__c { display: flex; flex-direction: column; justify-content: flex-end; }
.stats__c .stat__label { color: #fff; }
.stats__d { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.stats__budget { font-size: clamp(22px, 0.9vw + 17px, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.stats__budget strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.stats__small { color: var(--n600); font-size: 15px; }
@media (min-width: 768px) {
  .stats__a { grid-column: 1 / -1; min-height: 300px; }
  .stats__art { width: 210px; right: 24px; bottom: 16px; }
  .stats__b { grid-column: 1 / 4; }
  .stats__c { grid-column: 4 / 7; }
}
@media (min-width: 1024px) {
  .stats { padding-top: 64px; }
  .stats__a { grid-column: 1 / 6; grid-row: 1 / 3; min-height: 420px; }
  .stats__art { width: 280px; right: 28px; bottom: 24px; }
  .stats__b { grid-column: 6 / 9; grid-row: 1; min-height: 200px; }
  .stats__c { grid-column: 9 / 13; grid-row: 1; }
  .stats__d { grid-column: 6 / 13; grid-row: 2; justify-content: center; }
  .stat__label { font-size: 17px; }
}

/* =====================================================================
   F4 Case study (black)
   ===================================================================== */
.case { background: var(--ink); color: #fff; --focus: var(--y); --halo: transparent; padding-block: var(--sec); }
.case__h { max-width: none; }
.case .lead { color: var(--n300); }
.case .ph-inline { background: var(--n900); color: var(--n400); border-color: var(--n600); }
.case__grid { margin-top: 48px; }
.case__grid > .tile { grid-column: 1 / -1; }
.case__roas {
  background: var(--ink-2); min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.case__sticker { position: absolute; top: 20px; right: 20px; }
.case__num { font-size: clamp(112px, 8.38vw + 79.3px, 200px); color: var(--y); letter-spacing: -0.05em; line-height: 0.88; margin-top: 12px; }
.case__cap { color: var(--n300); max-width: 38ch; }
.case__bars { color: var(--ink); display: flex; flex-direction: column; gap: 20px; }
.hbar { display: grid; gap: 18px; }
.hbar__row { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: baseline; }
.hbar__label { font-size: 15px; font-weight: 600; }
.hbar__val { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hbar__bar {
  grid-column: 1 / -1; display: block; height: 30px; width: calc(var(--w) * 100%); min-width: 26px;
  border: 2px solid var(--ink); border-radius: 6px; transform-origin: left;
}
.hbar__bar--ink { background: var(--ink); }
.hbar__bar--sun { background: var(--y); }
.case__facts { background: var(--ink-3); }
.facts { list-style: none; padding: 0; margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.facts li { display: flex; flex-direction: column; gap: 6px; }
.facts .num { font-size: clamp(26px, 1.4vw + 16px, 36px); }
.facts span { font-size: 13px; font-weight: 600; color: var(--n300); line-height: 1.3; }
.case__cta { color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; }
.case__ask { font-size: clamp(22px, 0.9vw + 17px, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; max-width: 18ch; }
.case__gets { display: none; margin-top: 0; }
.case__gets li { font-size: 16px; font-weight: 600; line-height: 1.4; text-wrap: balance; }
.case__cta .tick { background: var(--ink); color: var(--y); }
.case__go { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.case__trust { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-3); max-width: 46ch; }
.case__trust .i { flex: none; width: 18px; height: 18px; margin-top: 1px; }
@media (min-width: 768px) { .case__gets { display: grid; } }
.case__shot { margin: 0; padding: 12px; background: var(--ink-2); display: flex; flex-direction: column; gap: 12px; }
.case__shot img { width: 100%; border-radius: 12px; }
.case__shot figcaption { padding: 0 6px 4px; font-size: 13px; line-height: 1.45; color: var(--n300); font-variant-numeric: tabular-nums; }
/* phones: the screenshot below already shows these totals */
@media (max-width: 767px) { .case__facts { display: none; } }
@media (min-width: 768px) {
  .case__roas { grid-column: 1 / -1; min-height: 340px; }
  .case__grid > .case__bars { grid-column: 1 / 4; }
  .case__grid > .case__facts { grid-column: 4 / 7; }
  .case__grid > .case__cta { grid-column: 4 / 7; grid-row: 3; }
  .case__grid > .case__shot { grid-column: 1 / 4; grid-row: 3; }
}
@media (min-width: 1024px) {
  .case__grid > .case__roas { grid-column: 1 / 8; grid-row: 1 / 3; min-height: 440px; }
  .case__grid > .case__bars { grid-column: 8 / 13; grid-row: 1; }
  .case__grid > .case__facts { grid-column: 8 / 13; grid-row: 2; }
  .case__grid > .case__shot { grid-column: 1 / 8; grid-row: 3; }
  .case__grid > .case__cta { grid-column: 8 / 13; grid-row: 3; }
  .case__sticker { top: 28px; right: 28px; }
}

/* =====================================================================
   F5 Calculator
   ===================================================================== */
.calc__tile {
  margin-top: 48px; display: grid; gap: 28px;
  grid-template-areas: "in" "out" "note" "cta";
  padding: 22px 20px 24px; background: var(--y); --focus: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-tile); box-shadow: 8px 8px 0 var(--ink);
}
.ladder + .calc { padding-top: 0; }   /* two white bands in a row: one gap, not two */
.calc__in { grid-area: in; }
.calc__out { grid-area: out; }
.calc__note { grid-area: note; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--ink); max-width: 62ch; }
.calc__ctas { grid-area: cta; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.calc__label { display: block; font-size: 14px; font-weight: 700; }
.calc__value { margin: 10px 0 18px; font-size: clamp(32px, 1.6vw + 26px, 48px); letter-spacing: -0.035em; }
.calc__value small { margin-left: 8px; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.calc__result { margin-top: 10px; font-size: clamp(28px, 2.4vw, 40px); letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.calc__lo, .calc__to { white-space: nowrap; }
.range__ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-3); }

.range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0;
  background: transparent; cursor: pointer; --p: 36.36%;
}
.range:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 12px; }
.range::-webkit-slider-runnable-track {
  box-sizing: border-box; height: 14px; border: 2px solid var(--ink); border-radius: 999px;
  background: linear-gradient(90deg, var(--ink) var(--p), #fff var(--p));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 32px; height: 32px; margin-top: -11px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transition: transform 120ms var(--ease-out);
}
.range:active::-webkit-slider-thumb { transform: scale(1.1); }
.range::-moz-range-track { height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; }
.range::-moz-range-progress { height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); }
.range::-moz-range-thumb {
  box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}

.xbars { display: grid; gap: 10px; margin-top: 20px; }
.xbar { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; }
.xbar__track { display: block; height: 16px; }
.xbar__fill {
  display: block; height: 100%; border-radius: 4px; background: var(--ink);
  transform-origin: left; transition: transform 120ms var(--ease-out);
}
.xbar__v { min-width: 9ch; text-align: right; font-size: 15px; letter-spacing: -0.01em; }
.be__field + .be__field { margin-top: 22px; }
.be__big { margin: 8px 0 12px; font-size: clamp(56px, 3vw + 40px, 84px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.be__cpa { margin: 0; max-width: 34ch; font-size: 17px; font-weight: 600; line-height: 1.45; }
.be__meter { position: relative; margin-top: 30px; overflow-x: clip; }
.be__scale { position: relative; height: 22px; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--ink); }
.be__loss {
  position: absolute; inset: 0; background: #fff;
  transform-origin: left; transition: transform 240ms var(--ease-out);
}
.be__pin {
  position: absolute; top: -9px; bottom: -9px; left: 0; width: 100%; pointer-events: none;
  transition: transform 240ms var(--ease-out);
}
.be__pin::before { content: ""; position: absolute; top: 0; bottom: 0; left: -2px; width: 4px; border-radius: 2px; background: var(--ink); }
.be__ends { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; font-weight: 700; }
.be__hand { margin: 10px 0 0; font-family: var(--script); font-size: 26px; line-height: 1.1; }
@media (prefers-reduced-motion: reduce) { .be__loss, .be__pin { transition: none; } }
@media (min-width: 1024px) {
  .calc__tile {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; row-gap: 24px;
    grid-template-areas: "in out" "note out" "cta out"; grid-template-rows: auto auto 1fr; padding: 44px 48px;
  }
  .calc__out { align-self: start; }
  .calc__ctas { align-self: start; }
}

/* =====================================================================
   F6 Find your fit
   ===================================================================== */
.fit { background: var(--n100); }
.fit__head { display: block; }
.fit__head .h2 { max-width: 14ch; }
.fit__note { display: inline-block; margin-top: 10px; font-size: 22px; color: var(--ink-3); transform: rotate(-3deg); transform-origin: left; }
.fit__grid { margin-top: 48px; display: grid; gap: 20px; }
.fit__side { display: grid; gap: 16px; align-content: start; }
.fit__for .ticks li, .fit__not .ticks li { font-size: 16px; line-height: 1.45; }
.quiz { order: -1; }
@media (min-width: 768px) {
  .fit__side { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .fit__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .fit__side { grid-column: 1 / 5; grid-template-columns: 1fr; }
  .quiz { grid-column: 5 / 13; order: 0; }
  .fit__note { font-size: 24px; }
}

.quiz {
  display: flex; flex-direction: column; padding: 20px;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r-tile); box-shadow: 8px 8px 0 var(--ink);
  margin-right: 8px;
}
@media (min-width: 768px) { .quiz { padding: 36px 40px 40px; } }
.quiz__top { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.quiz__progress { display: flex; gap: 6px; }
.quiz__progress i {
  position: relative; display: block; width: 40px; height: 10px; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff;
}
.quiz__progress i::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out);
}
.quiz__progress i.is-done::after { transform: scaleX(1); }
.quiz__count { font-size: 14px; font-weight: 600; color: var(--n600); }
.quiz__back {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px;
  border: 0; background: none; font-weight: 600; font-size: 15px; border-radius: 10px;
}
.quiz__back .i { width: 18px; height: 18px; }
.quiz__stage { position: relative; flex: 1; margin-top: 22px; display: grid; }
.quiz__step { border: 0; padding: 0; margin: 0 0 32px; min-width: 0; }
.quiz__q { padding: 0; margin-bottom: 20px; font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.quiz__q:focus { outline: none; }
.quiz__q:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.js .quiz__step, .js .quiz__result { grid-area: 1 / 1; margin: 0; }
.js .quiz__step:not(.is-current) { visibility: hidden; opacity: 0; pointer-events: none; }
/* full width (below 1024px) the card follows the current question: the others leave the flow, and JS eases the height */
@media (max-width: 1023px) {
  .js .quiz__step:not(.is-current), .js .quiz__result:not(.is-current), .js .quiz__stage > .is-leaving { position: absolute; inset: 0 0 auto; }
}
/* beside the side column the card is as tall as that column: the question sits in the middle of it */
@media (min-width: 1024px) {
  .js .quiz__stage { align-items: center; }
  /* the result is the tallest state and fills the stage from the top, so it can leave the flow at once on Back */
  .js .quiz__stage > .quiz__result.is-leaving { position: absolute; inset: 0 0 auto; }
}
/* while JS eases the height: the flex basis must not override it, and the step that is leaving is clipped to it */
.quiz__stage.is-sizing { flex: none; overflow-x: visible; overflow-y: clip; overflow-clip-margin: 8px; }
.opts { display: grid; gap: 14px 16px; }
@media (min-width: 560px) { .opts--2 { grid-template-columns: 1fr 1fr; } .opt--wide { grid-column: 1 / -1; } }
.opt {
  position: relative; isolation: isolate; display: flex; border: 0; padding: 0; background: none;
  border-radius: var(--r-in); text-align: left; margin: 0 4px 4px 0;
}
.opt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--ink); transform: translate(4px, 4px);
}
.opt__face {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px;
  border: 2px solid var(--ink); border-radius: inherit; background: #fff;
  font-size: 17px; font-weight: 600; line-height: 1.3;
  transition: transform 160ms var(--ease-out), background-color 120ms ease;
}
.opt__face > .i:first-child { color: var(--ink); }
.opt__ok { margin-left: auto; opacity: 0; transform: scale(0.6); transition: opacity 120ms ease, transform 160ms var(--ease-out); stroke-width: 3; }
.opt[aria-pressed="true"] .opt__face { background: var(--y); }
.opt[aria-pressed="true"] .opt__ok { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .opt:hover .opt__face { transform: translate(-2px, -2px); }
}
.opt:active .opt__face { transform: translate(3px, 3px) scale(0.97); transition-duration: 100ms; }

.quiz__result { display: flex; flex-direction: column; align-items: flex-start; }
.quiz__result:focus { outline: none; }
.result__who { display: flex; align-items: center; gap: 12px; }
.result__avatar { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ink); }
.result__pick { font-size: 14px; font-weight: 600; color: var(--n600); }
.result__title { margin-top: 16px; }
.result__price { margin-top: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.result__why { margin-top: 10px; max-width: 52ch; color: var(--ink-3); }
.result__ctas { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.quiz__nojs { margin-top: 16px; font-weight: 600; }

/* =====================================================================
   F7 Offer ladder
   ===================================================================== */
.stairs { list-style: none; margin-top: 56px; padding: 0; display: grid; gap: 40px 16px; }
.offer {
  position: relative; container-type: inline-size;
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 20px 20px; background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-tile); box-shadow: 6px 6px 0 var(--ink);
  margin-right: 6px;
}
.offer--sun { background: var(--y); --focus: var(--ink); }
.offer--ink { background: var(--ink); color: #fff; --focus: var(--y); --halo: transparent; }
.offer__sticker { position: absolute; top: -17px; left: 16px; }
.offer__name { font-size: var(--t-h4); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.offer__for { font-size: 14px; font-weight: 600; color: var(--n600); line-height: 1.35; margin-top: -6px; }
.offer--sun .offer__for { color: var(--ink-3); }
.offer--ink .offer__for { color: var(--n300); }
.offer__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 4px; }
.offer__price .cur { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.offer__price .num { font-size: clamp(28px, 17cqi, 40px); letter-spacing: -0.035em; }
.offer__price small { font-size: 14px; font-weight: 600; }
.offer__price--quote .num { font-size: clamp(26px, 13cqi, 34px); line-height: 1.05; }
.offer__list { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; }
.offer__list li { position: relative; padding-left: 26px; }
.offer__list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.offer--sun .offer__list li::before {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcc24' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.offer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.offer__guarantee { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; }
.offer__guarantee .i { width: 16px; height: 16px; stroke-width: 3; }
.offer__band { background: var(--n100); border-radius: 12px; padding: 14px; }
.offer__cta { margin-top: auto; }
.offer__cta .btn__face { white-space: nowrap; }
.offer .chip { align-self: flex-start; font-size: 13px; }
.offer.is-fit { box-shadow: 9px 9px 0 var(--ink); }
.fit-sticker { position: absolute; top: -17px; right: 14px; display: inline-flex; gap: 6px; }
.fit-sticker .i { width: 14px; height: 14px; stroke-width: 3.5; }
/* proof at the decision point */
.ladder__proof { margin-top: 48px; display: grid; gap: 12px; }
.lquote { margin: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 18px 20px; background: var(--n100); border-radius: var(--r-in); }
.lquote__av { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; filter: grayscale(1); }
.lquote blockquote { margin: 0; }
.lquote blockquote p { font-size: 16px; font-weight: 600; line-height: 1.45; }
.lquote figcaption { font-size: 14px; line-height: 1.35; }
.lquote figcaption span { color: var(--n600); }
.ladder__trust { font-size: 14px; font-weight: 600; color: var(--n600); }
@media (min-width: 768px) {
  .ladder__proof { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ladder__trust { grid-column: 1 / -1; }
}
.ladder__next { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 4px 32px; }
.ladder__next .i--fill { width: 18px; height: 18px; }
@media (max-width: 767px) {
  .offer:not(.offer--3) .offer__extra { display: none; }
}
@media (min-width: 768px) {
  .stairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 22px; }
  .offer--5 { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: start; }
  .offer--5 > * { grid-column: 1; }
  .offer--5 .offer__band, .offer--5 .offer__cta { grid-column: 2; }
  .offer--5 .offer__band { grid-row: 1 / 4; }
  .offer--5 .offer__cta { grid-row: 4; margin-top: 12px; }
}
/* The staircase needs 240px+ columns, so it starts at 1360. Tops step up 32px per card; bottoms share the floor line. */
@media (min-width: 1360px) {
  .stairs {
    grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch;
    padding-bottom: 14px; border-bottom: 2px solid var(--ink);
  }
  .offer { padding: 30px 16px 16px; gap: 10px; }
  .offer--5 { grid-column: auto; display: flex; }
  .offer--5 .offer__cta { margin-top: auto; }
  .offer--1 { margin-top: 128px; }
  .offer--2 { margin-top: 96px; }
  .offer--3 { margin-top: 64px; }
  .offer--4 { margin-top: 32px; }
  .offer__list { font-size: 14px; gap: 6px; }
  .offer__cta { --bp: 10px; --bf: 15px; }
}

/* =====================================================================
   F8 How it works (black). Default: vertical stack
   ===================================================================== */
.how { background: var(--ink); color: #fff; --focus: var(--y); --halo: transparent; padding-block: var(--sec); }
.how__sticky { width: min(1280px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.how__track { display: grid; gap: 16px; }
.how__intro { margin-bottom: 24px; }
.how__intro .lead { color: var(--n300); }
.how__step {
  position: relative; display: grid; gap: 16px; align-items: center;
  padding: 24px 20px 24px 88px; border-radius: var(--r-tile); background: var(--ink-2);
}
.how__step::after {
  content: ""; position: absolute; left: 43px; top: 84px; bottom: -18px; border-left: 2px dashed var(--y);
}
.how__n {
  position: absolute; left: 16px; top: 22px; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%; background: var(--y); color: var(--ink);
  border: 2px solid var(--ink); font-size: 20px;
}
.how__text p { margin-top: 8px; color: var(--n300); max-width: 42ch; }
.how__art { width: 150px; }
.how__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; color: var(--ink); }
.how__ask { font-size: clamp(24px, 1.2vw + 18px, 32px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; text-transform: uppercase; text-wrap: balance; }
.how__progress { display: none; }
@media (min-width: 600px) {
  .how__step { grid-template-columns: minmax(0, 1fr) auto; }
  .how__art { width: 170px; }
}

/* Desktop: pinned horizontal pan, driven by a CSS view timeline (no JS, no scroll listeners) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* inset 0: without it the timeline takes the root scroll-padding (96px) and the pan starts before the pin */
    .how { height: calc(100vh + 128vw); padding: 0; view-timeline-name: --how; view-timeline-inset: 0px; }
    .how__sticky {
      position: sticky; top: 0; height: 100vh; width: 100%; margin: 0; overflow: clip;
      display: flex; flex-direction: column; justify-content: center; container-type: inline-size;
    }
    .how__track {
      display: flex; align-items: center; gap: 2vw; width: max-content; padding: 48px 4vw 0;
      animation: pan linear both; animation-timeline: --how; animation-range: contain 0% contain 100%;
    }
    .how__intro { width: 36vw; margin: 0; padding-right: 2vw; }
    .how__intro .h2 { font-size: clamp(40px, 3.3vw, 52px); }
    .how__step {
      width: 46vw; height: min(58vh, 540px); padding: 44px 48px; align-items: stretch;
      grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
    }
    .how__step::after { display: none; }
    .how__n {
      position: static; grid-column: 1; grid-row: 1; width: auto; height: auto; display: block;
      background: none; border: 0; border-radius: 0; color: var(--y);
      font-size: min(160px, 17vh); line-height: 0.8; letter-spacing: -0.05em;
    }
    .how__art { grid-column: 2; grid-row: 1; width: min(220px, 15vw); align-self: start; }
    .how__text { grid-column: 1 / -1; grid-row: 2; align-self: end; }
    .how__text .h3 { font-size: clamp(28px, 2.4vw, 40px); }
    .how__text p { font-size: 18px; }
    .how__cta { width: 30vw; height: min(58vh, 540px); padding: 48px; justify-content: flex-end; }
    .how .reveal { opacity: 1 !important; transform: none !important; }
    .how__progress {
      display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ink-3);
    }
    .how__progress i {
      display: block; height: 100%; background: var(--y); transform-origin: left;
      animation: grow linear both; animation-timeline: --how; animation-range: contain 0% contain 100%;
    }
    /* the numeral of the step in front lifts into place, scroll-linked (linear, it follows the scroll) */
    .how__step .how__n { animation: numIn linear both; animation-timeline: --how; }
    .how__step:nth-child(2) .how__n { animation-range: contain 2% contain 22%; }
    .how__step:nth-child(3) .how__n { animation-range: contain 30% contain 50%; }
    .how__step:nth-child(4) .how__n { animation-range: contain 58% contain 78%; }
  }
}
@keyframes pan { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100cqw)); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes numIn { from { opacity: 0.25; transform: translateY(24px); } }

/* =====================================================================
   F9 About
   ===================================================================== */
.about__grid > * { grid-column: 1 / -1; }
.about__photo { min-height: 380px; padding: 0; }
.about__blob { width: 78%; }
.about__disc {
  position: absolute; left: 50%; top: 36%; width: min(82%, 280px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--y);
}
.about__cutout { position: absolute; left: 50%; bottom: 0; height: 94%; width: auto; max-width: none; transform: translateX(-50%); }
.about__text { padding: 12px 0 8px; overflow: visible; }
.about__text .h2 { max-width: 18ch; }
.about__body { margin-top: 24px; display: grid; gap: 16px; max-width: 62ch; color: var(--ink-3); }
.about__sign { display: flex; align-items: center; gap: 16px; margin: 24px 0 6px; }
.about__sign img { height: 24px; width: auto; }
.about__sign .script { font-size: 30px; transform: rotate(-4deg); }
.about__results { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 40px; }
.stat--sm .num { font-size: clamp(44px, 2.6vw + 22px, 60px); }
.stat--sm .stat__label { color: #fff; }
.about__results .tile__note { flex-basis: 100%; }
.about__tools { display: flex; flex-direction: column; }
.tools { list-style: none; padding: 0; margin-top: 16px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tools li { aspect-ratio: 1; display: grid; place-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 12px; }
.tools img { width: 58%; height: auto; }
.tools__cap { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
@media (min-width: 768px) {
  .about__photo { grid-column: 1 / 4; grid-row: 1 / 3; min-height: 460px; }
  .about__text { grid-column: 4 / 7; grid-row: 1 / 3; padding: 8px 0 8px 12px; }
  .about__results { grid-column: 1 / 4; }
  .about__tools { grid-column: 4 / 7; }
}
@media (min-width: 1024px) {
  .about__photo { grid-column: 1 / 5; grid-row: 1 / 4; min-height: 640px; }
  .about__text { grid-column: 5 / 13; grid-row: 1 / 3; padding: 8px 0 24px 32px; }
  .about__results { grid-column: 5 / 9; grid-row: 3; }
  .about__tools { grid-column: 9 / 13; grid-row: 3; }
  .tools { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* =====================================================================
   F10 Testimonials
   ===================================================================== */
.voices { background: var(--n100); }
.voices .tile--paper { background: #fff; }
.voices img:not(.voice__logo) { filter: grayscale(1); }
.voices__grid {
  margin: 48px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 12px;
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.voice { flex: 0 0 86%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; margin: 0; }
.voice blockquote { margin: 0; }
.voice blockquote p { font-size: 16px; line-height: 1.5; }
.voice__by { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.voice__by b { font-size: 16px; }
.voice__by span { font-size: 14px; color: var(--n600); }
.voice__by--row { flex-direction: row; align-items: center; gap: 12px; margin-top: auto; }
.voice__by--row > span { display: flex; flex-direction: column; gap: 2px; }
.voice__by--row > span span { font-size: 14px; }
.voice__av { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; }
.voice__av--logo { border-radius: 12px; background: #fff; object-fit: contain; padding: 3px; }
.voice .chip { align-self: flex-start; min-height: 28px; padding: 2px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.voice--lead { padding: 28px 24px; }
.voice--lead blockquote p { font-size: clamp(19px, 0.5vw + 15px, 22px); font-weight: 600; line-height: 1.42; }
.voice--lead .voice__by { order: 1; margin-top: auto; }
.voice--lead .voice__logo { order: 2; margin-top: 0; }
.voice--lead .voice__by span { color: var(--n300); }
.voice__mark { width: 44px; height: auto; fill: var(--y); }
.voice__logo { width: 150px; height: auto; opacity: 0.9; }
.voice__photo { display: none; }
.voice--students .students { display: grid; gap: 18px; }
.students__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.student { margin: 0; }
.student blockquote { margin: 0; }
.students blockquote p { font-size: 15px; }
.student figcaption { margin-top: 6px; font-size: 13px; font-weight: 700; }
.stars { display: inline-flex; gap: 2px; }
.stars .i { width: 18px; height: 18px; fill: var(--y); stroke: var(--ink); stroke-width: 1.5; }
.voice--ph { justify-content: center; }
.ph__thumbs { display: flex; gap: 8px; }
.ph__thumbs img { width: 56px; height: 100px; object-fit: cover; border-radius: 10px; filter: grayscale(1); opacity: 0.85; }
.voices__next { margin-top: 32px; }
@media (min-width: 768px) {
  .voices__grid {
    margin: 48px 0 0; padding: 0; overflow: visible; scroll-snap-type: none;
    display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .voice { flex: none; }
  .voice--lead, .voice--b, .voice--students, .voice--ph { grid-column: 1 / -1; }
  .voice:nth-child(3) { grid-column: 1 / 4; }
  .voice:nth-child(4) { grid-column: 4 / 7; }
  .voice--students .students { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voice--lead { padding: 36px 40px; min-height: 380px; }
  .voice--lead blockquote, .voice--lead .voice__by, .voice--lead .voice__mark { max-width: 64%; }
  .voice__photo {
    display: block; position: absolute; right: 0; bottom: 0; height: 88%; width: auto; max-width: 42%;
    object-fit: contain; object-position: bottom right;
  }
  .voice__logo { position: relative; z-index: 1; }
}
@media (min-width: 1024px) {
  .voices__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .voice--lead { grid-column: 1 / 7; grid-row: 1 / 3; min-height: 480px; }
  .voice--b { grid-column: 7 / 13; grid-row: 1; }
  .voice:nth-child(3) { grid-column: 7 / 10; grid-row: 2; }
  .voice:nth-child(4) { grid-column: 10 / 13; grid-row: 2; }
  .voice--students { grid-column: 1 / 9; grid-row: 3; }
  .voice--ph { grid-column: 9 / 13; grid-row: 3; }
  .voice--lead blockquote, .voice--lead .voice__by { max-width: 62%; }
}

/* =====================================================================
   F11 Not ready yet
   ===================================================================== */
.later__grid { margin-top: 48px; display: grid; gap: var(--gap); }
.webinar { padding: 0; display: grid; }
.webinar__copy { padding: 24px 20px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.webinar__copy p { color: var(--n300); max-width: 46ch; }
.webinar__sticker { margin-bottom: 4px; }
.webinar__photo { order: -1; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; padding: 10px 10px 0; border-radius: 22px; }
.news { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.news > p { color: var(--n600); max-width: 44ch; }
.mini { width: 100%; }
.mini__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.mini__row .field__input { flex: 1 1 160px; min-width: 0; }
.mini__row .btn { flex: none; margin-right: 4px; }
.mini .field__err { margin-top: 8px; }
.mini__ok { display: flex; align-items: center; gap: 8px; min-height: 52px; font-weight: 700; }
.mini__ok:empty, .mini .field__err:empty { display: none; }
.mini__ok:focus { outline: none; }
.mini__ok a { color: inherit; }
@media (max-width: 479px) {
  .mini__row { flex-direction: column; }
  .mini__row .field__input { flex: none; }
  .mini__row .btn { width: calc(100% - 4px); }
}
@media (min-width: 768px) {
  .webinar__copy { padding: 36px; }
}
@media (min-width: 1024px) {
  .later__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .webinar { grid-column: 1 / 8; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .webinar__photo { order: 0; height: 100%; aspect-ratio: auto; padding: 12px; border-radius: 28px; }
  .news { grid-column: 8 / 13; padding: 36px; justify-content: center; }
}

/* =====================================================================
   F12 FAQ
   ===================================================================== */
.faq__grid { margin-top: 48px; display: grid; gap: 20px; align-items: start; }
.faq__side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.faq__portrait { display: none; }
.faq__ask { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.faq__small { font-size: 14px; color: var(--n400); font-weight: 600; }
.faq__list { display: grid; gap: 12px; }
.qa { border: 2px solid var(--ink); border-radius: var(--r-in); background: #fff; transition: box-shadow 0ms; }
.qa[open] { box-shadow: 4px 4px 0 var(--ink); }
.qa summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 18px; border-radius: 14px; cursor: pointer;
  font-size: 17px; font-weight: 700; line-height: 1.35;
  transition: background-color 150ms ease;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__icon { width: 24px; height: 24px; transition: transform 200ms var(--ease-out); }
.qa[open] .qa__icon { transform: rotate(45deg); }
.qa__a { padding: 0 18px 20px; color: var(--ink-3); max-width: 68ch; }
.qa__a a { font-weight: 600; text-decoration-color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.qa[open] .qa__a { animation: qaIn 180ms var(--ease-out); }
@keyframes qaIn { from { opacity: 0; transform: translateY(-4px); } }
@media (hover: hover) and (pointer: fine) { .qa summary:hover { background: var(--paper); } }
/* progressive: the answer's height bridges open/close where the browser can interpolate to auto */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    .qa::details-content { height: 0; overflow: clip; transition: height 220ms var(--ease-out), content-visibility 220ms allow-discrete; }
    .qa[open]::details-content { height: auto; }
  }
}
@media (min-width: 768px) { .qa summary { font-size: 18px; padding: 18px 22px; } .qa__a { padding: 0 22px 22px; } }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .faq__side { grid-column: 1 / 5; position: sticky; top: 96px; padding: 0 28px 28px; }
  .faq__list { grid-column: 5 / 13; }
  .faq__portrait { display: block; position: relative; width: calc(100% + 56px); height: 280px; margin: 0 -28px 8px; overflow: hidden; }
  .faq__disc { position: absolute; left: 50%; top: 58%; width: 220px; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--y); }
  /* the source is cut straight across the forearms: feather that edge into the ink */
  .faq__portrait img {
    position: absolute; left: 50%; bottom: 0; height: 96%; width: auto; max-width: none; transform: translateX(-46%);
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
  }
}

/* =====================================================================
   F13 Final CTA, the closing slide
   ===================================================================== */
.final { position: relative; overflow: clip; background: var(--y); --focus: var(--ink); padding: var(--sec) 0 0; }
.final__blob { width: 140px; }
@media (min-width: 768px) { .final__blob { width: clamp(200px, 26vw, 400px); } }
.final__grid { position: relative; display: grid; gap: 28px; }
.final__copy { position: relative; z-index: 1; }
.final__h { font-size: clamp(38px, 2.9vw + 26px, 72px); max-width: 13ch; }
.final__sub { margin-top: 20px; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-3); max-width: 46ch; }
.final__stickers { list-style: none; padding: 0; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 16px; max-width: 620px; }
.final__stickers .sticker { white-space: normal; height: auto; min-height: 32px; padding: 6px 14px; }
.signature { display: flex; align-items: center; gap: 16px; margin-top: 40px; }
.signature img { height: 22px; width: auto; }
.signature i { display: block; width: 120px; height: 1.5px; background: var(--ink); }
.final__sparkle { right: var(--gutter); bottom: 32px; z-index: 2; }
@media (min-width: 1024px) { .final__sparkle { right: auto; left: 52%; bottom: 72px; } }
/* the look-away cutout stands on the section floor: its lower 38% (where the source crops the arms) sits below the edge.
   Mirrored so he looks toward the headline and the button. */
.final__photo { position: relative; height: 300px; margin-inline: calc(-1 * var(--gutter)); overflow: hidden; }
.final__cutout {
  position: absolute; left: 50%; top: 0; height: calc(300px / 0.62); width: auto; max-width: none;
  transform: translateX(-50%) scaleX(-1);
}
@media (min-width: 768px) {
  .final__photo { height: 400px; }
  .final__cutout { height: calc(400px / 0.62); }
}
@media (min-width: 1024px) {
  .final { padding-bottom: var(--sec); }
  .final__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .final__copy { grid-column: 1; }
  .final__photo {
    position: absolute; top: calc(-1 * var(--sec)); bottom: calc(-1 * var(--sec));
    right: calc(-1 * max(var(--gutter), (100vw - 1280px) / 2)); width: 50%;
    height: auto; margin: 0; overflow: visible; pointer-events: none;
  }
  .final__cutout {
    --h: clamp(600px, 62vw, 900px);
    top: auto; left: auto; right: 0; bottom: calc(var(--h) * -0.39); height: var(--h);
    transform: scaleX(-1);
  }
}

/* =====================================================================
   F14 Footer
   ===================================================================== */
.foot { background: var(--ink); color: #fff; --focus: var(--y); --halo: transparent; border-top: 6px solid var(--y); padding: 64px 0 28px; }
.foot__top { display: grid; gap: 40px; }
.foot__logo { height: 28px; width: auto; }
.foot p { color: var(--n400); font-size: 15px; }
.foot__brand { display: grid; gap: 14px; align-content: start; }
.foot__brand > p:first-of-type { margin-top: 6px; max-width: 34ch; }
.foot__loc { display: flex; align-items: center; gap: 8px; }
.foot__loc .i { width: 18px; height: 18px; color: var(--y); }
.foot a { color: #fff; text-decoration: none; }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.foot__h { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n400); margin-bottom: 8px; }
.foot__cols ul { list-style: none; padding: 0; }
.foot__cols a { display: inline-block; min-width: 44px; padding: 11px 0; font-weight: 600; font-size: 15px; }
.foot__loc a { display: inline-block; padding: 11px 0; }
.foot__news .mini { margin-top: 4px; }
.mini--dark .field__input { border-color: var(--n700); }
.mini--dark .field__err { color: #fca5a5; }
.mini--dark .mini__ok { color: var(--y); }
.socials { list-style: none; padding: 0; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
  display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid #fff; border-radius: 12px;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.foot__bottom {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--n800);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
}
.foot__bottom p { font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
  .foot__cols a:hover, .foot__loc a:hover { text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .socials a:hover { background: var(--y); color: var(--ink); border-color: var(--y); }
}
@media (min-width: 768px) {
  .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .foot { padding-top: 80px; }
  .foot__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1.3fr); gap: 48px; }
}

/* =====================================================================
   Forms
   ===================================================================== */
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field__label { font-size: 14px; font-weight: 600; }
.field__input {
  display: block; width: 100%; height: 52px; padding: 0 14px;
  border: 2px solid var(--n500); border-radius: var(--r-btn); background: #fff; color: var(--ink);
  font-size: 16px; font-weight: 500; line-height: 1.4;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field__input::placeholder { color: var(--n500); opacity: 1; }
textarea.field__input { height: auto; min-height: 112px; padding: 12px 14px; resize: vertical; }
select.field__input {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}
@media (hover: hover) and (pointer: fine) { .field__input:hover { border-color: var(--n700); } }
.field__input:focus, .field__input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--y); }
.apply__note { margin-top: -4px; padding: 12px 14px; border-radius: var(--r-btn); background: var(--y-100); font-size: 14px; line-height: 1.45; }
.apply__note a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mini--dark .field__input:focus { border-color: var(--y); box-shadow: 0 0 0 3px rgba(255, 204, 36, 0.45); }
.field__input[aria-invalid="true"] { border-color: var(--err); }
.field__hint { font-size: 13px; color: var(--n600); }
.field__err { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--err); }
.field__err[hidden] { display: none; }
.field__err .i { width: 16px; height: 16px; }
.check { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font-size: 15px; line-height: 1.45; cursor: pointer; }
.check input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.check__box {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px;
  border: 2px solid var(--ink); border-radius: 6px; background: #fff;
}
.check__box .i { width: 16px; height: 16px; stroke-width: 3.5; opacity: 0; }
.check input:checked + .check__box { background: var(--y); }
.check input:checked + .check__box .i { opacity: 1; }
.check input:focus-visible + .check__box { outline: 3px solid var(--ink); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   Application dialog (centred card on desktop, bottom sheet on mobile)
   ===================================================================== */
.apply {
  width: min(640px, 92vw); max-width: none; max-height: 90dvh; padding: 0; margin: auto;
  border: 2px solid var(--ink); border-radius: 24px; background: #fff; color: var(--ink);
  box-shadow: 8px 8px 0 var(--ink); overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(0.98);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.apply.is-open { opacity: 1; transform: none; }
.apply.is-closing { transition-duration: 180ms; }
.apply::backdrop { background: rgba(10, 10, 10, 0.6); opacity: 0; transition: opacity 240ms var(--ease-out); }
.apply.is-open::backdrop { opacity: 1; }
.apply__form { display: flex; flex-direction: column; max-height: calc(90dvh - 4px); }
.apply__head { flex: none; background: var(--y); --focus: var(--ink); padding: 18px 20px 16px; border-bottom: 2px solid var(--ink); }
.apply__grab { display: none; }
.apply__title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.apply__title { font-size: clamp(22px, 2vw + 14px, 28px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; text-transform: uppercase; }
.apply__offer {
  display: inline-flex; margin-top: 10px; padding: 5px 12px; border-radius: 999px;
  background: #fff; border: 2px solid var(--ink); font-size: 13px; font-weight: 700;
}
.apply__steps { list-style: none; padding: 0; margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.apply__steps li { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.apply__steps i { position: relative; display: block; height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.apply__steps i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out); }
.apply__steps li.is-done i::after, .apply__steps li.is-current i::after { transform: scaleX(1); }
.apply__steps li.is-current { color: var(--ink); font-weight: 700; }
.apply__body { flex: 1 1 auto; overflow-y: auto; padding: 22px 20px 8px; overscroll-behavior: contain; }
.apply__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.apply__summary, .apply__error {
  margin-bottom: 16px; padding: 12px 14px; border: 2px solid var(--err); border-radius: var(--r-btn);
  color: var(--err); font-size: 14px; font-weight: 600;
}
.apply__summary:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.apply__error a { color: var(--ink); font-weight: 700; }
.apply__nav { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px 6px; border-top: 1px solid var(--n200); }
.apply__next { margin-left: auto; }
.apply__nav .btn { margin-right: 4px; margin-bottom: 4px; }
.apply__submit[aria-busy="true"] .btn__face { background: var(--n200); }
.spinner { display: none; width: 16px; height: 16px; border: 2.5px solid var(--ink); border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
.apply__submit[aria-busy="true"] .spinner { display: inline-block; }
.apply__trust { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 20px 18px; font-size: 13px; font-weight: 600; color: var(--n600); }
.apply__trust .i { width: 16px; height: 16px; }
@media (min-width: 768px) {
  .apply__head { padding: 22px 28px 18px; }
  .apply__body { padding: 26px 28px 8px; }
  .apply__nav { padding: 16px 28px 6px; }
  .apply__trust { padding: 6px 28px 22px; }
}
@media (max-width: 767px) {
  .apply {
    width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; border-bottom: 0;
    box-shadow: none; opacity: 1; transform: translateY(100%);
    transition: transform 300ms var(--ease-drawer);
  }
  .apply.is-open { transform: none; }
  .apply.is-closing { transition: transform 220ms var(--ease-out); }
  .apply__form { max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom); }
  .apply__grab { display: block; width: 40px; height: 4px; margin: -6px auto 12px; border-radius: 999px; background: var(--ink); opacity: 0.35; }
}

/* =====================================================================
   Persistent conversion UI
   ===================================================================== */
.bar, .wa-float { display: none; }
@media (max-width: 767px) {
  .js .bar {
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; gap: 10px; padding: 8px 14px 14px 8px;
    background: #fff; border: 2px solid var(--ink); border-radius: 16px;
    transform: translateY(calc(100% + 40px)); visibility: hidden;
    transition: transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .js .bar.is-on { transform: none; visibility: visible; transition: transform 280ms var(--ease-drawer), visibility 0s; }
  .bar__wa .btn__face { width: 52px; min-height: 52px; }
  .bar__book { flex: 1; --bh: 52px; }
  .bar__book .btn__face { white-space: nowrap; }
}
@media (min-width: 768px) {
  .js .wa-float {
    position: fixed; z-index: 60; right: 24px; bottom: 24px; display: block; isolation: isolate;
    width: 56px; height: 56px; border-radius: 50%; color: #fff; text-decoration: none;
    opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none; visibility: hidden;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .js .wa-float.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; }
  .wa-float::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--ink); transform: translate(4px, 4px); }
  .wa-float__face {
    display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
    background: var(--ink); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #fff;
    transition: transform 160ms var(--ease-out);
  }
  .wa-float__face .i { width: 26px; height: 26px; }
  .wa-float__tip {
    position: absolute; right: calc(100% + 14px); top: 50%; white-space: nowrap;
    padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink);
    font-size: 13px; font-weight: 700;
    opacity: 0; transform: translateY(-50%) scale(0.97); transform-origin: right center;
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
  }
  .wa-float:focus-visible .wa-float__tip { opacity: 1; transform: translateY(-50%); }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .wa-float:hover .wa-float__face { transform: translate(-2px, -2px); }
  .wa-float:hover .wa-float__tip { opacity: 1; transform: translateY(-50%); transition-delay: 150ms; }
}

.exit {
  position: fixed; z-index: 70; left: 24px; bottom: 24px; width: 360px;
  padding: 30px 24px 18px; background: #fff; border: 2px solid var(--ink); border-radius: 20px;
  box-shadow: 6px 6px 0 var(--ink);
  opacity: 0; transform: translateY(24px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.exit.is-on { opacity: 1; transform: none; transition: opacity 280ms var(--ease-drawer), transform 280ms var(--ease-drawer); }
.exit[hidden] { display: none; }
.exit__sticker { position: absolute; top: -17px; left: 20px; }
.exit__x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; }
.exit p { margin-top: 8px; font-size: 15px; color: var(--ink-3); }
.exit__ctas { margin-top: 16px; display: flex; align-items: center; gap: 16px; }
.exit__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: 6px 0 16px; border: 2px solid var(--ink); border-radius: 12px; }
.exit:has(.exit__photo) .exit__x { top: 14px; right: 14px; background: #fff; border: 2px solid var(--ink); width: 40px; height: 40px; z-index: 1; }

/* =====================================================================
   Motion: entrances and reveals (only with JS and motion allowed)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-enter] { animation: tileIn 320ms var(--ease-out) both; }
  /* the portrait holds the LCP image: it rises but never fades (an opacity-0 image does not count as painted) */
  .js .hero__portrait[data-enter] { animation-name: tileRise; }
  .js [data-enter="1"] { animation-delay: 80ms; }
  .js [data-enter="2"] { animation-delay: 140ms; }
  .js [data-enter="3"] { animation-delay: 200ms; }
  .js [data-enter="4"] { animation-delay: 260ms; }
  .js .years { animation: stickerIn 320ms var(--spring-pop) 380ms both; }
  /* hero micro-stories start when their tile is 60% on screen (JS adds .is-armed, then .is-live) */
  .js .hero__bars.is-armed .bars__col i { transform: scaleY(0); }
  .js .hero__bars.is-live .bars__col i { transform: none; transition: transform 480ms var(--ease-out); }
  .js .hero__bars.is-live .bars__col--after i { transition-delay: 60ms; }
  .js .hero__roas.is-armed .roas__bar { transform: scaleX(0); }
  .js .hero__roas.is-live .roas__bar { transform: none; transition: transform 560ms var(--ease-out) 140ms; }
  .js .hero__roas.is-live .roas__bar--sun { transition-delay: 200ms; }

  .js .reveal {
    opacity: 0; transform: translateY(var(--ry, 14px));
    transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
  /* testimonials: on phones the swipe row reveals once (cards outside the row count as off-screen); on grids each card reveals */
  @media (max-width: 767px) {
    .js .voices__grid .reveal { opacity: 1; transform: none; transition: none; }
  }
  @media (min-width: 768px) {
    .js .voices__grid.reveal { opacity: 1; transform: none; transition: none; }
  }

  .js .case__bars .hbar__bar { transform: scaleX(0); transition: transform 600ms var(--ease-out); }
  .js .case__bars .hbar__row + .hbar__row .hbar__bar { transition-duration: 700ms; transition-delay: 120ms; }
  .js .case__bars.is-in .hbar__bar { transform: none; }

  .js .stairs .offer__sticker { opacity: 0; }
  /* below the staircase breakpoint each card reveals on its own as it enters */
  @media (max-width: 1359px) {
    .js .stairs .offer {
      opacity: 0; transform: translateY(24px);
      transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); transition-delay: var(--d, 0ms);
    }
    .js .stairs .offer.is-in { opacity: 1; transform: none; }
    .js .stairs .offer.is-in .offer__sticker { animation: pop 300ms var(--spring-pop) 240ms both; }
  }
  /* the staircase builds itself: each card rises out of the floor line, left to right */
  @media (min-width: 1360px) {
    .js .stairs .offer { clip-path: inset(100% -28px -28px -28px); transition: clip-path 420ms var(--ease-out); }
    .js .stairs.is-in .offer { clip-path: inset(-28px); }
    .js .stairs.is-in .offer--2 { transition-delay: 70ms; }
    .js .stairs.is-in .offer--3 { transition-delay: 140ms; }
    .js .stairs.is-in .offer--4 { transition-delay: 210ms; }
    .js .stairs.is-in .offer--5 { transition-delay: 280ms; }
    .js .stairs.is-in .offer__sticker { animation: pop 300ms var(--spring-pop) 380ms both; }
    .js .stairs.is-in .offer--4 .offer__sticker { animation-delay: 450ms; }
  }
  .js .fit-sticker { opacity: 0; }
  .js .fit-sticker.is-pop { animation: pop 320ms var(--spring-pop) both; }

  .js .webinar .webinar__sticker { opacity: 0; }
  .js .webinar.is-in .webinar__sticker { animation: pop 300ms var(--spring-pop) 240ms both; }
  .js .final .final__blob { transform: translate(40px, -40px) scaleX(-1); opacity: 0; transition: transform 500ms var(--ease-out), opacity 500ms var(--ease-out); }
  .js .final.is-in .final__blob { transform: scaleX(-1); opacity: 1; }
  .js .final .final__cutout { translate: 0 24px; transition: translate 420ms var(--ease-out); }
  .js .final.is-in .final__cutout { translate: 0 0; }
  .js .final .pop { opacity: 0; }
  .js .final.is-in .pop { animation: pop 300ms var(--spring-pop) 200ms both; }
  .js .final.is-in .pop:nth-child(2) { animation-delay: 260ms; }
  .js .final.is-in .pop:nth-child(3) { animation-delay: 320ms; }

  .js .chat.is-armed .bubble { opacity: 0; transform: scale(0.95); }
  .chat .bubble { transition: opacity 220ms var(--ease-out), transform 220ms var(--spring-soft); }
  .typing { transition: opacity 150ms ease; }
  .chat.t1 .chat__slot--in .typing, .chat.t2 .chat__slot--out .typing { opacity: 1; }
  .js .chat.s1 .chat__slot--in .bubble, .js .chat.s2 .chat__slot--out .bubble { opacity: 1; transform: none; }
}
/* typing dots only run while they are showing */
.typing i { animation-play-state: paused; }
.chat.t1 .chat__slot--in .typing i, .chat.t2 .chat__slot--out .typing i { animation-play-state: running; }
html.motion-paused .typing i { animation-play-state: paused !important; }
@keyframes tileIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes tileRise { from { transform: translateY(16px) scale(0.98); } }
@keyframes stickerIn { from { opacity: 0; transform: scale(0.6) rotate(-30deg); } }
@keyframes pop { from { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0.6); } to { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); } }
@keyframes menuIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes busyPulse { 50% { opacity: 0.3; } }

/* menu open/close */
@media (prefers-reduced-motion: no-preference) {
  .menu { clip-path: circle(0 at calc(100% - 44px) 42px); transition: clip-path 320ms var(--ease-out); }
  .menu.is-open { clip-path: circle(150% at calc(100% - 44px) 42px); }
  .menu.is-closing { transition-duration: 220ms; }
  .menu.is-open .menu__nav li { animation: menuIn 320ms var(--ease-out) both; }
  .menu.is-open .menu__nav li:nth-child(1) { animation-delay: 80ms; }
  .menu.is-open .menu__nav li:nth-child(2) { animation-delay: 120ms; }
  .menu.is-open .menu__nav li:nth-child(3) { animation-delay: 160ms; }
  .menu.is-open .menu__nav li:nth-child(4) { animation-delay: 200ms; }
  .menu.is-open .menu__nav li:nth-child(5) { animation-delay: 240ms; }
}

/* reduced motion: final states, colour feedback only */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
  .years__ring, .ribbon__track { animation: none !important; }
  .typing { display: none; }
  .btn:active .btn__face, .opt:active .opt__face { transform: none; background: var(--y-600); }
  .btn:hover .btn__face, .press:hover > .tile, .opt:hover .opt__face { transform: none !important; }
  .apply { transition: opacity 150ms ease !important; transform: none !important; }
  .apply:not(.is-open) { opacity: 0; }
  /* progress feedback stays: a slow opacity pulse instead of a spin */
  .apply__submit[aria-busy="true"] .spinner { border-right-color: var(--ink); animation: busyPulse 900ms ease-in-out infinite !important; }
}

/* Windows High Contrast (dark): the black lockups would vanish on black */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .hdr__lockup, .about__sign img, .signature img { filter: invert(1); }
}

/* =====================================================================
   thank-you.html
   ===================================================================== */
.ty-home { display: none; }
@media (min-width: 560px) { .ty-home { display: inline-flex; } }
.ty-hero { position: relative; overflow: clip; background: var(--y); --focus: var(--ink); padding-top: 112px; }
.ty-hero__blob { width: clamp(120px, 15vw, 230px); }
[data-page="thanks"] .hdr__actions { margin-left: auto; }
.ty-hero__grid { position: relative; display: grid; gap: 24px; }
.ty-hero__copy { padding-bottom: 8px; container-type: inline-size; }
.ty-stamp { gap: 6px; }
.ty-stamp .i { width: 14px; height: 14px; stroke-width: 3.5; }
.ty-h1 { margin-top: 24px; font-size: clamp(32px, 8.4cqi, 64px); line-height: 1; text-wrap: balance; max-width: 16ch; }
.ty-sub { margin-top: 20px; font-size: var(--t-lead); color: var(--ink-3); max-width: 46ch; }
.ty-note { margin-top: 16px; padding: 10px 14px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; font-weight: 600; max-width: 46ch; }
.ty-hero__photo { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 300px; }
.ty-hero__disc { position: absolute; left: 50%; top: 10%; width: min(76%, 300px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--ink); }
.ty-hero__photo img { position: relative; width: min(66%, 250px); }
.ty-hero__sparkle { right: var(--gutter); bottom: 28px; }
.ty-steps { list-style: none; padding: 0; margin-top: 40px; }
.ty-step { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; }
.ty-step p { color: var(--n600); }
.ty-step.tile--ink p { color: var(--n300); }
.ty-step__n { font-size: 44px; }
.ty-cal { margin-top: var(--gap); min-height: 220px; }
.ty-cal__icon { width: 32px; height: 32px; color: var(--n600); }
.ty-cal__frame { display: block; width: 100%; height: 680px; border: 2px solid var(--ink); border-radius: var(--r-tile); background: #fff; }
.ty-more { background: var(--paper); }
.ty-more__grid { margin-top: 40px; }
.ty-more__grid > .tile { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ty-more__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.ty-more__price .cur { font-weight: 700; }
.ty-more__price .num { font-size: 56px; letter-spacing: -0.04em; }
.ty-more__webinar p { color: var(--n300); }
.ty-more .btn__face { white-space: nowrap; }
.ty-more__label { color: var(--ink-3); }
.ty-hero:not(.is-handoff) [data-show="handoff"], .ty-hero.is-handoff [data-show="done"] { display: none !important; }
.ty-prep .ticks li { color: var(--n300); }
.ty-prep .tick { background: var(--y); }
/* call and bundle leads: the prep list leads, and the free webinar stays on offer as a slim white strip under it */
.ty-more__grid > .ty-more__webinar.is-secondary { grid-column: 1 / -1; background: #fff; color: var(--ink); border: 2px solid var(--ink); --focus: var(--ink); --halo: var(--y); }
.ty-more__webinar.is-secondary > .h3 { font-size: var(--t-h4); line-height: 1.25; }
.ty-more__webinar.is-secondary > p { color: var(--n600); }
@media (min-width: 768px) {
  .ty-more__grid > .ty-more__webinar.is-secondary {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tag title cta" "tag text cta";
    align-items: center; gap: 4px 24px;
  }
  .ty-more__webinar.is-secondary > .sticker { grid-area: tag; }
  .ty-more__webinar.is-secondary > .h3 { grid-area: title; align-self: end; }
  .ty-more__webinar.is-secondary > p { grid-area: text; align-self: start; }
  .ty-more__webinar.is-secondary > .btn { grid-area: cta; }
}
.ty-hero.is-handoff .ty-h1 { max-width: 18ch; }
@media (max-width: 479px) { .ty-more .btn { display: flex; width: calc(100% - 4px); } }
.ty-foot { padding-top: 0; }
.ty-foot .foot__bottom { margin-top: 0; padding: 28px 0 8px; border-top: 0; align-items: center; }
@media (min-width: 768px) {
  .ty-hero { padding-top: 124px; }
  .ty-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .ty-hero__copy { padding-bottom: var(--sec); align-self: center; }
  .ty-hero__photo { min-height: 460px; }
  .ty-hero__photo img { width: min(90%, 380px); }
  .ty-step { grid-column: span 2; }
  .ty-more__grid > .tile { grid-column: span 3; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .ty-stamp { animation: stamp 320ms var(--spring-pop) 120ms both; }
}
@keyframes stamp { from { opacity: 0; transform: scale(1.15) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(-4deg); } }
@media (min-width: 1024px) {
  .ty-step { grid-column: span 4; }
  .ty-more__grid > .tile { grid-column: span 6; }
}

/* =====================================================================
   Complete site: Services dropdown (header), services in the mobile menu,
   footer Services column, done-for-you Google Ads link
   ===================================================================== */

/* header dropdown: the nav only shows from 1024px, so this only ever renders there */
.dd { position: relative; }
.dd__btn {
  position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 10px 0;
  border: 0; background: none; color: inherit; font-size: 15px; font-weight: 600; line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}
.dd__btn::after {
  content: ""; position: absolute; left: 0; right: 22px; bottom: 4px; height: 3px; border-radius: 2px;
  background: var(--y); transform: scaleX(0); transform-origin: left;
  transition: transform 180ms var(--ease-out);
}
.dd__btn[aria-expanded="true"]::after { transform: scaleX(1); }
.dd__chev { width: 18px; height: 18px; stroke-width: 2.5; transition: transform 200ms var(--ease-out); }
.dd__btn[aria-expanded="true"] .dd__chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .dd__btn:hover::after { transform: scaleX(1); }
}

.dd__panel {
  position: absolute; z-index: 5; top: calc(100% + 13px); left: -18px; width: 336px;
  padding: 8px; background: #fff; color: var(--ink); --focus: var(--ink); --halo: var(--y);
  border: 2px solid var(--ink); border-radius: var(--r-in); box-shadow: 6px 6px 0 var(--ink);
  transform-origin: 40px 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.97);
  transition: opacity 140ms ease, transform 160ms var(--ease-out), visibility 0s linear 160ms;
}
.dd.is-open .dd__panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 160ms ease, transform 240ms var(--spring-soft), visibility 0s;
}
/* no JS: the panel still opens on hover and keyboard focus */
html:not(.js) .dd:hover .dd__panel,
html:not(.js) .dd:focus-within .dd__panel { opacity: 1; visibility: visible; transform: none; transition: none; }

.hdr__nav .dd__list { display: grid; gap: 2px; list-style: none; padding: 0; }
.hdr__nav .dd__link {
  display: grid; gap: 1px; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  text-decoration: none; transition: background-color 140ms ease;
}
.hdr__nav .dd__link::after, .hdr__nav .dd__all::after { content: none; }
.dd__name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.dd__meta { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--n600); }
.hdr__nav .dd__all {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; margin-top: 6px; padding: 10px 12px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
}
.dd__all .i { width: 18px; height: 18px; transition: transform 160ms var(--ease-out); }
.dd__panel :focus-visible { outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .hdr__nav .dd__link:hover { background: var(--y); }
  .hdr__nav .dd__link:hover .dd__meta { color: var(--ink-3); }
  .dd__all:hover .i { transform: translateX(3px); }
}

/* mobile menu: big links, then a compact services grid */
.menu__nav { flex-direction: column; align-items: stretch; justify-content: center; gap: 28px; }
.menu__svc { display: grid; gap: 10px; }
.menu__h { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.menu__nav .menu__svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.menu__nav .menu__svc-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 100%;
  min-height: 48px; padding: 8px 12px; background: #fff; border: 2px solid var(--ink); border-radius: 12px;
  font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none;
}
.menu__nav .menu__svc-all { grid-column: 1 / -1; }
.menu__nav .menu__svc-all a { background: var(--ink); color: #fff; }
.menu__svc-all .i { width: 18px; height: 18px; }

/* footer: four link columns; brand and newsletter share the left column on desktop */
@media (min-width: 768px) {
  .foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 40px 64px; }
  .foot__brand { grid-column: 1; grid-row: 1; }
  .foot__cols { grid-column: 2; grid-row: 1 / span 2; }
  .foot__news { grid-column: 1; grid-row: 2; }
}

/* done-for-you card: the Google Ads page, under the main CTA */
.offer__band .offer__alt { margin-top: 6px; padding-bottom: 4px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .dd__panel, .dd.is-open .dd__panel { transform: none; }
  .dd__panel { transition: opacity 120ms ease, visibility 0s linear 120ms; }
  .dd.is-open .dd__panel { transition: opacity 120ms ease, visibility 0s; }
  .dd__chev, .dd__btn::after { transition: none; }
}

/* =====================================================================
   Round 4: arrow + plus motif, video testimonials, discovery-call note,
   student login, endpoint thank-you promise. Same tokens, same devices:
   ink strokes on yellow, yellow on ink, pressable tiles, stickers.
   (This block is identical in assets/css/site.css and services/assets/css/site.css.)
   ===================================================================== */

/* ---------- motif: the looping arrow and the square plus (Moiz's LinkedIn banner) ---------- */
.motif { position: absolute; z-index: 0; pointer-events: none; overflow: visible; color: var(--ink); height: auto; }
.motif--arrow { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.motif--plus { fill: currentColor; }
.motif--sun { color: var(--y); }
.motif--white { color: #fff; }
.motif__p { transform-box: fill-box; transform-origin: 50% 50%; }
/* draw-in: only with JS and motion allowed; everyone else gets the finished mark */
@media (prefers-reduced-motion: no-preference) {
  .js .motif__line { stroke-dasharray: 1 1; stroke-dashoffset: 1.002; transition: stroke-dashoffset 1450ms cubic-bezier(0.33, 1, 0.68, 1); }
  .js .motif.is-drawn .motif__line { stroke-dashoffset: 0; }
  .js .motif__head { opacity: 0; transform: translate(-10px, 5px); transition: opacity 200ms ease-out 1180ms, transform 280ms var(--ease-out) 1180ms; }
  .js .motif.is-drawn .motif__head { opacity: 1; transform: none; }
  .js .motif--plus .motif__p { opacity: 0; transform: scale(0.9) rotate(-45deg); transition: opacity 260ms ease-out, transform 400ms var(--ease-out); }
  .js .motif--plus.is-drawn .motif__p { opacity: 1; transform: none; }
  /* a few px of drift while the mark crosses the viewport (scroll-driven, no listeners) */
  @supports (animation-timeline: view()) {
    .motif--drift { animation: motifDrift linear both; animation-timeline: view(); }
  }
}
@keyframes motifDrift { from { translate: 0 6px; } to { translate: 0 -6px; } }

/* homepage hero: the arrow leaves the copy and rises toward the portrait; the plus sits above, like the banner */
.hero__copy { position: relative; }
.hero__copy > :not(.motif) { position: relative; z-index: 1; }
.hero__arrow, .hero__plus { display: none; }
@media (min-width: 1024px) {
  .hero__arrow { display: block; left: 35%; top: calc(100% + 4px); width: min(400px, 62%); }
  .hero__plus { display: block; left: 76%; top: -58px; width: 30px; }
}
/* the case band: yellow on ink, rising out of "27,091 in. 195,105 out." */
.case > .wrap { position: relative; }
.case__arrow { display: none; }
@media (min-width: 1024px) {
  .case__arrow { display: block; right: 3%; top: -28px; width: min(380px, 30%); }
}
/* the closing slide: from the signature line toward Moiz */
.final__copy { position: relative; }
.final__copy > :not(.motif) { position: relative; z-index: 1; }
.final__arrow, .final__plus { display: none; }
@media (min-width: 1024px) {
  .final__arrow { display: block; left: 44%; bottom: -34px; width: min(330px, 54%); }
  .final__plus { display: block; left: 84%; top: -30px; width: 26px; }
}

/* soft secondary ask under the closing CTAs (homepage) */
.final__soft { margin-top: 14px; font-size: 15px; }
.final__soft .link { padding-block: 8px; }

/* ---------- quiet "Student login" links ---------- */
.hdr__login {
  display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px;
  font-size: 14px; font-weight: 600; color: var(--n700); text-decoration: none; white-space: nowrap;
}
.hdr__login .i { width: 16px; height: 16px; }
@media (min-width: 1180px) { .hdr__login { display: inline-flex; } }
@media (hover: hover) and (pointer: fine) { .hdr__login:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--y); } }
.menu__login { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.menu__login .i { width: 18px; height: 18px; }

/* ---------- video testimonials: left-to-right marquee of 9:16 tiles ---------- */
.vt { margin-top: 64px; }
.vt__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.vt__h { flex: 1 1 0; min-width: 0; max-width: 22ch; }
.vt__head { flex-wrap: nowrap; }
.vt__head .pause { position: relative; left: auto; bottom: auto; flex: none; margin: 0 6px 6px 0; }
.vt__viewport {
  position: relative; margin-top: 28px; overflow: hidden; padding: 6px 0 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.vt__track { display: flex; width: max-content; animation: vtLtr 72s linear infinite; will-change: transform; }
@keyframes vtLtr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.vt__set { list-style: none; margin: 0; padding: 0 16px 0 0; display: flex; gap: 16px; align-items: stretch; }
.vt__item { flex: none; width: 180px; display: flex; }
@media (min-width: 768px) { .vt__item { width: 236px; } .vt__set { gap: 20px; padding-right: 20px; } }
.vt__viewport:hover .vt__track,
.vt__viewport:focus-within .vt__track,
.vt.is-off .vt__track,
html.motion-paused .vt__track,
html.vt-modal-open .vt__track { animation-play-state: paused; }
.vt__card { flex: 1; margin: 0 6px 6px 0; }
.vt__card::before { transform: translate(5px, 5px); }
.vt__tile { gap: 12px; padding: 8px 8px 14px; }
.vt__media {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: calc(var(--r-tile) - 8px); background: var(--ink);
}
.vt__media img, .vt__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt__media img { filter: grayscale(1); transition: filter 200ms ease; }
.vt__preview { opacity: 0; transition: opacity 220ms var(--ease-out); }
.vt__media.is-previewing .vt__preview { opacity: 1; }
.vt__play {
  position: absolute; z-index: 2; left: 10px; bottom: 10px; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--y); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transition: transform 160ms var(--ease-out);
}
.vt__play .i { width: 18px; height: 18px; margin-left: 3px; fill: currentColor; stroke: none; }
.vt__body { display: flex; flex-direction: column; gap: 10px; padding: 0 6px; }
.vt__quote { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; color: var(--ink); }
.vt__by { display: flex; flex-direction: column; gap: 2px; margin-top: auto; line-height: 1.3; }
.vt__by b { font-size: 15px; }
.vt__by span { font-size: 13px; color: var(--n600); }
.vt__by .ph-inline { font-size: 11px; }
@media (hover: hover) and (pointer: fine) {
  .vt__card:hover .vt__media img { filter: none; }
  .vt__card:hover .vt__play { transform: scale(1.06); }
}
.vt__card:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.vt__note { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--n600); }
/* reduced motion: no movement, a plain swipeable row (the duplicate set goes away) */
@media (prefers-reduced-motion: reduce) {
  .vt__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
  .vt__track { animation: none; transform: none; }
  .vt__set[aria-hidden="true"] { display: none; }
  .vt__item { scroll-snap-align: start; }
  .vt__head .pause { display: none; }
}
/* two cards side by side, no motion (academy reviews) */
.vt-pair { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vt-pair .vt__item { width: auto; }
.vt-pair .vt__quote { font-size: 14px; }

/* the player: a centred ink card, the video at 9:16 */
.vtm {
  width: min(440px, 92vw); max-width: none; max-height: 94dvh; padding: 0; margin: auto;
  border: 2px solid var(--ink); border-radius: 24px; background: var(--ink); color: #fff; --focus: var(--y);
  box-shadow: 8px 8px 0 var(--y); overflow: hidden;
  opacity: 0; transform: scale(0.96);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.vtm.is-open { opacity: 1; transform: none; }
.vtm.is-closing { transition-duration: 160ms; }
.vtm::backdrop { background: rgba(10, 10, 10, 0.72); opacity: 0; transition: opacity 220ms var(--ease-out); }
.vtm.is-open::backdrop { opacity: 1; }
.vtm__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; }
.vtm__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }
.vtm__who b { font-size: 16px; }
.vtm__who span { font-size: 13px; color: var(--n300); }
.vtm__stage { background: #000; }
.vtm__stage video { display: block; width: 100%; height: auto; max-height: min(72dvh, 760px); aspect-ratio: 9 / 16; object-fit: contain; background: #000; }
.vtm__quote { padding: 14px 18px 18px; font-size: 15px; font-weight: 600; line-height: 1.45; color: #fff; }
.vtm__quote::before { content: "\201C"; color: var(--y); }
.vtm__quote::after { content: "\201D"; color: var(--y); }
.vtm__quote:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .vtm, .vtm::backdrop { transition: opacity 120ms ease; transform: none; } }

/* ---------- heads-up note (discovery call disclaimer): a pinned card, not small print ---------- */
.note {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  margin-top: 22px; padding: 22px 20px 18px; max-width: 560px;
  background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-in);
  box-shadow: 4px 4px 0 var(--ink); --focus: var(--ink);
}
.note__tag { position: absolute; top: -16px; left: 16px; }
.note__i { flex: none; width: 24px; height: 24px; margin-top: 2px; }
.note__body { display: grid; gap: 6px; font-size: 16px; line-height: 1.5; }
.note__body p { font-weight: 600; }
.note__body strong { font-weight: 800; }
.note .link { padding-block: 4px; font-weight: 700; }
.note--sun { background: var(--y); }

/* ---------- endpoint thank-you promise (calls, applications, course) ---------- */
.ty-promise {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 14px;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 3px 3px 0 var(--ink);
  font-size: 15px; font-weight: 700; line-height: 1.3;
}
.ty-promise .i { flex: none; width: 18px; height: 18px; }

/* ---------- student login page ---------- */
.login { position: relative; overflow: clip; min-height: 100dvh; background: var(--y); --focus: var(--ink); padding: 112px 0 72px; }
.login__blob { width: 150px; }
@media (min-width: 768px) { .login__blob { width: clamp(240px, 28vw, 420px); top: -34px; left: -64px; } }
.login__grid { position: relative; display: grid; gap: var(--gap); }
.login__copy { position: relative; }
.login__copy > :not(.motif) { position: relative; z-index: 1; }
.login__h1 { font-size: clamp(34px, 2.4vw + 20px, 56px); line-height: 0.95; text-wrap: balance; }
body[data-page="login"] .hdr__actions { margin-left: auto; }
.login__sub { margin-top: 18px; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-3); max-width: 42ch; }
.login__card { display: flex; flex-direction: column; gap: 16px; align-self: start; }
.login__card .btn { align-self: stretch; }
.login__ph { font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--n600); padding: 10px 12px; border: 1px dashed var(--n400); border-radius: 10px; background: var(--paper); }
.login__off .btn__face { background: var(--n200); color: var(--n600); border-color: var(--n400); cursor: not-allowed; }
.login__off::before { background: var(--n400); }
.login__links { display: grid; gap: 2px; }
.login__help { display: flex; align-items: flex-start; gap: 8px; padding-top: 14px; border-top: 1px solid var(--n200); font-size: 15px; font-weight: 600; line-height: 1.45; }
.login__help .i { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.login__help a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.login__arrow, .login__plus { display: none; }
@media (min-width: 1024px) {
  .login__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 48px; }
  .login__arrow { display: block; left: 30%; top: calc(100% + 18px); width: min(360px, 60%); }
  .login__plus { display: block; left: 70%; top: -54px; width: 28px; }
}

/* the student-video placeholder became the video marquee: the student reviews tile takes the full row */
@media (min-width: 1024px) { .voice--students { grid-column: 1 / -1; } }

/* Round 4 additions */
.motif--arrow { stroke-width: 7; }
@media (min-width: 768px) { .hdr__login--svc { display: inline-flex; } }
.aca-ty__login { margin-top: 18px; font-size: 15px; font-weight: 600; }
.aca-ty__login .link { padding-block: 6px; }
.login__off-link { color: var(--n600); text-decoration-color: var(--n400); cursor: not-allowed; }
.login__legal { display: flex; gap: 16px; }
.login__legal a { color: inherit; }
.final__arrow { left: 46%; }
@media (max-width: 1199px) { .hero__plus { display: none; } }

/* =====================================================================
   Round 6: one site header everywhere, the legal row in every footer,
   the "Cookie settings" note. (Identical in assets/css/site.css and
   services/assets/css/site.css.)
   ===================================================================== */

/* where you are: the current service in the dropdown and the mobile menu, the current page in the nav */
.hdr__nav .dd__link[aria-current="page"] { background: var(--y-100); box-shadow: inset 3px 0 0 var(--ink); }
.hdr__nav .dd__link[aria-current="page"] .dd__meta { color: var(--ink-3); }
.menu__nav .menu__svc-list a[aria-current="page"] { background: var(--ink); color: var(--y); }
@media (min-width: 1024px) {
  .hdr__nav a[aria-current="page"]::after { transform: scaleX(1); }
}
/* step and thank-you pages have no bottom bar: their header WhatsApp stays on phones after the scroll */
@media (max-width: 767px) {
  .hdr.is-scrolled .hdr__actions > .hdr__wa--keep { display: inline-flex; }
}

/* the legal row: one component in every footer (full, slim and step) */
.foot-legal {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--n800);
  display: grid; gap: 6px 48px; align-items: start;
}
.foot-legal__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; min-width: 0; }
.foot-legal__h {
  flex: none; margin: 0 6px 0 0; font-size: 12px; font-weight: 700; line-height: 44px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--n400);
}
.foot-legal__list { list-style: none; padding: 0; margin: 0; display: contents; }
.foot .foot-legal__list a, .foot-legal__btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  font-size: 14px; font-weight: 600; line-height: 1.3; color: #fff; text-decoration: none; white-space: nowrap;
  text-decoration-color: var(--y); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.foot .foot-legal__list a[aria-current="page"] { color: var(--y); }
.foot-legal__btn { gap: 6px; cursor: pointer; }
.foot-legal__btn .i { width: 16px; height: 16px; color: var(--y); }
@media (hover: hover) and (pointer: fine) {
  .foot .foot-legal__list a:hover, .foot-legal__btn:hover { text-decoration-line: underline; }
}
@media (min-width: 1024px) { .foot-legal { grid-template-columns: auto minmax(0, 1fr); } }
.foot-legal + .foot__bottom { margin-top: 10px; padding-top: 14px; }
.foot--step .foot-legal { margin-top: 0; padding-top: 0; border-top: 0; }
.foot--step .foot-legal + .foot__bottom { border-top: 1px solid var(--n800); }

/* "Cookie settings": a short note until a consent banner is installed (clearly labelled as such) */
.cookie-note {
  width: min(460px, calc(100vw - 32px)); max-width: none; padding: 20px 22px 22px; margin: auto;
  border: 2px solid var(--ink); border-radius: var(--r-tile); background: #fff; color: var(--ink);
  box-shadow: 8px 8px 0 var(--ink); --focus: var(--ink);
  opacity: 0; transform: translateY(8px) scale(0.98);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.cookie-note.is-open { opacity: 1; transform: none; }
.cookie-note.is-closing { transition-duration: 140ms; }
.cookie-note::backdrop { background: rgba(10, 10, 10, 0.55); opacity: 0; transition: opacity 200ms var(--ease-out); }
.cookie-note.is-open::backdrop { opacity: 1; }
.cookie-note__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cookie-note__h { font-size: var(--t-h4); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; }
.cookie-note__x {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -8px 0 0;
  border: 2px solid var(--ink); border-radius: 12px; background: #fff;
}
.cookie-note__x .i { width: 20px; height: 20px; }
.cookie-note p { font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.cookie-note__ph { margin-top: 12px; }
.cookie-note__ph .ph-inline { display: inline; line-height: 1.8; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cookie-note__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 16px; }
@media (hover: hover) and (pointer: fine) { .cookie-note__x:hover { background: var(--y); } }
.cookie-note__x:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) { .cookie-note, .cookie-note::backdrop { transform: none; transition: opacity 120ms ease; } }

/* Round 7: calendar slots on thank-you pages before a booking link is set (no placeholder styling) */
.fx-cal__h { font-size: 17px; font-weight: 800; line-height: 1.3; }

/* =====================================================================
   Round 7: Results across markets and platforms (homepage #results, managed ads #results)
   A bento of real dashboards: label chip, platform mark, the headline number (count-up via data-count),
   a supporting line, the period, and a dialog with the screenshot (assets/js/results.js).
   Phones: a horizontal scroll-snap row. 768: two columns. 1100: four, the lead card 2 x 2.
   ===================================================================== */
.rx__head .lead { margin-top: 14px; max-width: 58ch; }
.rx-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.rx-filter[hidden] { display: none; }
.rx-filter__b {
  min-height: 40px; padding: 6px 16px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 700; transition: background-color 140ms ease, color 140ms ease, transform 160ms var(--ease-out);
}
.rx-filter__b[aria-pressed="true"] { background: var(--ink); color: var(--y); }
.rx-filter__b:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .rx-filter__b[aria-pressed="false"]:hover { background: var(--y-100); } }

.rx-grid { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: var(--gap); }
.rx-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 18px 18px; min-width: 0; }
.rx-card[hidden] { display: none; }
.rx-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; width: 100%; }
.rx-chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 3px 11px; border: 2px solid var(--ink); border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.2;
}
.tile--ink .rx-chip { background: var(--y); border-color: var(--y); }
.rx-plat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; line-height: 1.2; }
.rx-plat small { font-weight: 600; opacity: 0.75; }
.rx-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff; border: 1.5px solid var(--n200); overflow: hidden; flex: none; }
.rx-mark img { width: 20px; height: 20px; object-fit: contain; }
.rx-mark--svg { background: var(--ink); border-color: var(--ink); color: #fff; }
.rx-mark--svg .i { width: 15px; height: 15px; }
.rx-card__h { margin-top: 6px; font-size: clamp(26px, 0.9vw + 19px, 32px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.rx-num { font-variant-numeric: tabular-nums; }
.rx-card__unit { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.tile--ink .rx-num { color: var(--y); }
.rx-card__sub { font-size: 14px; font-weight: 600; line-height: 1.45; max-width: 40ch; }
.rx-card__when { font-size: 13px; font-weight: 600; color: var(--n600); }
.tile--ink .rx-card__sub { color: var(--n200); }
.tile--ink .rx-card__when { color: var(--n400); }
.tile--sun .rx-card__when { color: var(--ink-3); }
.rx-card__go { margin-top: auto; padding-top: 8px; }
.rx-card__go .btn__face { white-space: nowrap; }
/* the lead card shows its dashboard right in the tile */
.rx-shot {
  display: block; width: 100%; margin: 6px 0 4px; padding: 6px; border: 0; border-radius: 14px; background: #fff; cursor: zoom-in;
  transition: transform 200ms var(--ease-out);
}
.rx-shot img { display: block; width: 100%; height: auto; border-radius: 9px; }
.rx-shot:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .rx-shot:hover { transform: rotate(-0.6deg) translateY(-2px); } }
.rx--lead .rx-card__h { font-size: clamp(34px, 2.2vw + 20px, 58px); }
.rx-foot { margin-top: 22px; font-size: 13px; line-height: 1.5; color: var(--n600); max-width: 76ch; }
.rx-foot a { color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rx-more { display: grid; gap: 4px; margin-top: 18px; }
.rx-more .rx-foot { margin-top: 0; }

/* phones: one swipeable row, a card and a bit of the next in view */
@media (max-width: 767px) {
  .rx-grid {
    grid-auto-flow: column; grid-auto-columns: minmax(268px, 84%); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px;
    scrollbar-width: thin;
  }
  .rx-card { scroll-snap-align: start; margin-right: 6px; }
}
@media (min-width: 768px) {
  .rx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 18px 16px; }
  .rx-card { margin-right: 6px; padding: 24px 22px 22px; }
  .rx--lead, .rx--wide { grid-column: span 2; }
}
@media (min-width: 1100px) {
  .rx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rx--lead { grid-column: span 2; grid-row: span 2; }
  .rx--wide { grid-column: span 2; }
  .rx-grid[data-filter]:not([data-filter="all"]) .rx--lead { grid-row: auto; }
}
.rx-grid--4 .rx-card { grid-column: auto; grid-row: auto; }

/* the dashboard viewer */
.rx-dlg {
  width: min(1160px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0;
  border: 2px solid var(--ink); border-radius: var(--r-tile); background: #fff; color: var(--ink);
  box-shadow: 8px 8px 0 var(--ink); overflow: auto; overscroll-behavior: contain;
}
.rx-dlg::backdrop { background: rgb(10 10 10 / 0.72); }
.rx-dlg__head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 12px 12px 20px; background: #fff; border-bottom: 2px solid var(--ink);
}
.rx-dlg__h { font-size: 16px; font-weight: 800; line-height: 1.3; }
.rx-dlg__body { display: grid; gap: 14px; padding: 16px; }
.rx-dlg__fig { margin: 0; }
.rx-dlg__fig img { display: block; width: 100%; height: auto; border: 1px solid var(--n200); border-radius: 10px; }
.rx-dlg__note { padding: 0 20px 18px; font-size: 13px; font-weight: 600; color: var(--n600); }
@media (prefers-reduced-motion: no-preference) {
  .rx-dlg[open] { animation: rxIn 240ms var(--ease-out); }
  .rx-dlg[open]::backdrop { animation: rxFade 200ms ease; }
}
@keyframes rxIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes rxFade { from { opacity: 0; } to { opacity: 1; } }