/* ============================================================
   MarketStarter — redesign staging · "THE LIVE SYSTEM"
   One accent (Growth-Signal Green) on a near-black / warm-paper
   stage. Bricolage Grotesque display · Geist body · Geist Mono data.
   Base CSS = fully static & complete. Motion states are applied
   from JS only (html.fx), so the page survives any CDN failure.
   ============================================================ */

:root {
  /* color */
  --green: #00C26E;
  --green-deep: #008A4E;
  --green-hover: #00A35C;
  --green-bright: #2FD888;
  --green-text-light: #007944;   /* small green text on light bg (AA) */
  --mint-tint: #D6F5E4;
  --mint-wash: #ECFAF2;
  --navy: #0E1116;
  --ink-deep: #1A1E25;
  --ink-strong: #2A2F37;
  --ink-muted-strong: #454A53;
  --ink-muted: #6B6F77;
  --ink-faint: #9A9CA1;
  --line: #C7C6C1;
  --border: #E7E5DF;
  --surface-subtle: #F1EFEA;
  --paper: #F8F7F4;
  --surface: #FDFCFA;
  --on-dark: #E9ECEF;
  --on-dark-muted: #A7ACB4;
  --on-dark-faint: #7D828B;
  --cta-ink: #051A10;

  /* type */
  --f-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --f-body: "Geist", system-ui, -apple-system, sans-serif;
  --f-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --container: 1180px;
  --pad: clamp(20px, 4.5vw, 44px);
  --sect: clamp(96px, 13vw, 176px);
  --r-md: 10px;
  --r-xl: 16px;
  --r-2xl: 22px;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --dur: 220ms;
}

/* ---------- Greek-language pages ----------
   Bricolage Grotesque, Geist and Geist Mono ship NO `greek` subset — verified
   against the Google Fonts API (latin, latin-ext, cyrillic, cyrillic-ext,
   vietnamese, symbols2 only; &subset=greek returns nothing). Without this
   override every Greek character falls back to system-ui PER GLYPH, so a line
   like "Απόρρητο και cookies" renders in TWO typefaces at once.
   Manrope + Noto Sans Mono both carry full Greek and are already the pair used
   on the Greek-language client sites in this repo. The matching <link> lives in
   the head of each /el/ page — swap both together or neither.
   html[lang="el"] (0,1,1) outranks :root (0,1,0), so the tokens win.
   ⚠️ This block lived in TWO copies (legal.css + article.css) until 2026-08-06.
   Neither was loaded by the service pages, so the first Greek service page had
   nowhere to inherit it from. It now lives here, in the one stylesheet every
   page loads, and the two copies are deleted. Do not reintroduce a local copy:
   a third divergent copy is how the two got out of step in the first place. */
html[lang="el"] {
  --f-display: "Manrope", system-ui, sans-serif;
  --f-body: "Manrope", system-ui, -apple-system, sans-serif;
  --f-mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Manrope runs a little lighter than Bricolage at display sizes — nudge the
   headline weights back so a Greek page carries the same visual authority. */
html[lang="el"] h1,
html[lang="el"] h2,
html[lang="el"] h3 { font-weight: 800; letter-spacing: -0.025em; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Browser smooth-scroll ONLY when Lenis is not driving the scroll —
   both at once makes the browser re-smooth Lenis' frames (rubber-banding). */
@media (prefers-reduced-motion: no-preference) { html.js:not(.lenis) { scroll-behavior: smooth; } }
html.lenis { scroll-behavior: auto !important; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: inline-block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
code { font-family: var(--f-mono); font-size: 0.88em; background: var(--surface-subtle); padding: 1px 6px; border-radius: 6px; }
::selection { background: var(--green); color: var(--cta-ink); }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
[data-theme="light"] :focus-visible { outline-color: var(--green-deep); }

.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--pad); }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 300;
  background: var(--navy); color: var(--paper);
  padding: 10px 16px; border-radius: var(--r-md); text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: 12px; }

/* mono data voice — labels only, never prose */
.mono-label {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------- chrome (visible only when FX boots) ---------- */
.grain, .thread { display: none; }
html.fx .grain {
  display: block; position: fixed; inset: -60px; z-index: 120; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035; /* no blend mode — a full-screen blended layer forces recompositing every scrolled frame */
}
html.fx .thread {
  display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 2px; z-index: 110; pointer-events: none;
}
html.fx .thread-fill {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(to bottom, var(--green), var(--green-bright));
  transform-origin: top; transform: scaleY(0);
}
html.fx .thread-fill, html.fx .act-num, html.fx .close-logo { will-change: transform; }
.edge-readout {
  display: none;
  position: fixed; left: 18px; bottom: 148px; z-index: 60;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
  writing-mode: vertical-rl; transform: rotate(180deg);
  pointer-events: none;
}
@media (min-width: 1280px) { .edge-readout { display: block; } }

/* ---------- nav ---------- */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 200;
}
html.js .nav { position: fixed; }
.nav-inner {
  max-width: calc(var(--container) + 40px); margin: 0 auto;
  padding: 16px var(--pad);
  display: flex; align-items: center; gap: 28px;
  transition: background var(--dur) var(--ease);
}
html.js .nav[data-mode="light"] {
  background: rgba(248, 247, 244, 0.88);
  -webkit-backdrop-filter: saturate(150%) blur(7px);
  backdrop-filter: saturate(150%) blur(7px);
  box-shadow: 0 1px 0 rgba(14, 17, 22, 0.07);
}
html.js .nav[data-mode="dark"] {
  background: rgba(14, 17, 22, 0.55);
  -webkit-backdrop-filter: saturate(140%) blur(7px);
  backdrop-filter: saturate(140%) blur(7px);
}
.nav-logo { display: inline-flex; align-items: center; margin-right: auto; }
.nav-logo img { height: 21px; width: auto; }
.nav .logo-dark { display: none; }
.nav[data-mode="light"] .logo-dark { display: block; }
.nav[data-mode="light"] .logo-light { display: none; }

.nav-links { display: flex; gap: 26px; }
.nav-links a {
  text-decoration: none; font-size: 14px; font-weight: 500;
  color: var(--on-dark-muted);
  transition: color var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--on-dark); }
.nav[data-mode="light"] .nav-links a { color: var(--ink-muted-strong); }
.nav[data-mode="light"] .nav-links a:hover { color: var(--navy); }
@media (max-width: 780px) { .nav-links { display: none; } }

/* ---------- language switch (nav) ----------
   Lives in .nav-inner and NOT inside .nav-links, deliberately: .nav-links is
   display:none below 780px, and a language switch that vanishes on a phone is
   missing exactly where it is most needed.
   It is rendered ONLY on pages that actually have a counterpart in the other
   language. A switch that 404s, or that dumps the reader on an unrelated page,
   is worse than no switch — so it appears per page rather than site-wide, and
   the label names the language you would GET, not the one you are on. */
.nav-lang {
  flex: none; white-space: nowrap; text-decoration: none;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-dark-muted);
  border: 1px solid rgba(233, 236, 239, 0.22);
  border-radius: 999px; padding: 5px 10px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-lang:hover { color: var(--on-dark); border-color: rgba(233, 236, 239, 0.5); }
.nav[data-mode="light"] .nav-lang { color: var(--ink-muted-strong); border-color: var(--line); }
.nav[data-mode="light"] .nav-lang:hover { color: var(--navy); border-color: var(--ink-muted); }
/* Below 780px the .nav-links row is gone, so the bar is logo + switch + CTA.
   Measured: adding the switch at the stock 28px gap left the CTA 123px, which
   wrapped "Book a call" onto two lines and grew the bar from 78px to 102px —
   on the English pages too, so this was the switch's cost and not Greek text.
   Tightening the gap and the pill pays for it; nowrap on the nav CTA only
   (never .btn globally, where a long hero label is allowed to wrap). */
@media (max-width: 780px) {
  .nav-inner { gap: 16px; }
  .nav-lang { padding: 4px 8px; font-size: 10.5px; letter-spacing: 0.06em; }
  .nav .btn { white-space: nowrap; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: var(--r-md);
  font-weight: 600; font-size: 15px; text-decoration: none;
  border: 0; cursor: pointer;
  transition: background var(--dur) var(--ease), translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  will-change: transform;
}
.btn-primary { background: var(--green); color: var(--cta-ink); }
.btn-primary:hover { background: var(--green-hover); translate: 0 -2px; box-shadow: 0 10px 30px -10px rgba(0, 194, 110, 0.55); }
.btn-ghost { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(233, 236, 239, 0.28); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px rgba(233, 236, 239, 0.55); translate: 0 -2px; }
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-xl { padding: 18px 38px; font-size: 18px; border-radius: 12px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 78% 18%, rgba(0, 194, 110, 0.075), transparent 62%),
    radial-gradient(800px 500px at 12% 88%, rgba(0, 194, 110, 0.05), transparent 60%),
    var(--navy);
  color: var(--on-dark);
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: clip;
}
#field { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-inner { position: relative; z-index: 2; padding-top: 108px; padding-bottom: 96px; }

.hero-eyebrow { color: var(--on-dark-muted); margin-bottom: 30px; }

.hero-h1 {
  font-size: clamp(42px, 7.4vw, 96px);
  line-height: 1.03;
  font-weight: 750;
  font-variation-settings: "opsz" 96;
  color: var(--paper);
  letter-spacing: -0.025em;
  max-width: 12em;
}
.hl { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hl-in { display: block; }
.hero-h1 .idx {
  font-family: var(--f-mono); font-weight: 400; font-size: 0.22em;
  letter-spacing: 0.1em; color: var(--green-bright);
  margin-right: 1.6em; top: -1.9em;
}
.sig { color: var(--green); }

.hero-sub {
  max-width: 620px; margin-top: 34px;
  font-size: clamp(16px, 1.6vw, 18px); line-height: 1.65;
  color: var(--on-dark-muted);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero-status {
  display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 54px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.11em;
  color: var(--on-dark-muted);
}
.hero-status li { display: inline-flex; align-items: center; gap: 9px; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 0 rgba(47, 216, 136, 0.5);
  flex: none;
}
html.fx .hero-status .dot { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 216, 136, 0.45); }
  70% { box-shadow: 0 0 0 9px rgba(47, 216, 136, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 216, 136, 0); }
}

.hero-hint {
  position: absolute; left: 50%; bottom: 26px; z-index: 2;
  width: 1px; height: 52px; overflow: hidden;
  background: rgba(233, 236, 239, 0.14);
}
.hero-hint span { display: block; width: 100%; height: 18px; background: var(--green-bright); }
html.fx .hero-hint span { animation: hint 2s var(--ease) infinite; }
@keyframes hint { 0% { translate: 0 -20px; } 60%, 100% { translate: 0 56px; } }

/* ---------- marquee ---------- */
.marquee {
  background: var(--navy); color: var(--on-dark-muted);
  border-top: 1px solid rgba(233, 236, 239, 0.08);
  padding: 17px 0; overflow: hidden; white-space: nowrap;
}
.marquee-track {
  display: inline-flex; align-items: center; gap: 34px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase;
  width: max-content;
}
.marquee-track i { color: var(--green); font-style: normal; font-size: 8px; }
html.fx .marquee-track { animation: marquee 30s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- acts (shared) ---------- */
.act { position: relative; padding-block: var(--sect); overflow: clip; }
.act--voice, .act--aeo { background: var(--paper); }
.act--auto { background: var(--navy); color: var(--on-dark); }

.act-num {
  position: absolute; top: clamp(8px, 3vw, 36px); right: clamp(-10px, 1vw, 40px);
  font-family: var(--f-display); font-weight: 800; line-height: 1;
  font-size: clamp(140px, 24vw, 340px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(14, 17, 22, 0.10);
  user-select: none; pointer-events: none;
}
.act--auto .act-num { -webkit-text-stroke: 1px rgba(233, 236, 239, 0.09); }

.act-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
  position: relative; z-index: 2;
}
.act-grid--flip .act-copy { order: 2; }
.act-grid--flip .act-scene { order: 1; }
@media (max-width: 960px) {
  .act-grid { grid-template-columns: 1fr; }
  .act-grid--flip .act-copy { order: 1; }
  .act-grid--flip .act-scene { order: 2; }
}

.act-scene { position: sticky; top: 100px; }
@media (max-width: 960px) { .act-scene { position: static; } }

.act-label { color: var(--green-text-light); margin-bottom: 26px; }
.act-label b { font-weight: 500; color: var(--navy); background: var(--mint-tint); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.act--auto .act-label { color: var(--green-bright); }

.act h2 {
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.06;
  font-weight: 720;
  font-variation-settings: "opsz" 80;
  letter-spacing: -0.022em;
  max-width: 13em;
}
.act h2 em, .close h2 em {
  font-style: normal;
  background-image: linear-gradient(to top, var(--green) 0, var(--green) 0.14em, transparent 0.14em);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-bottom: 0.04em;
}
.act--auto h2 { color: var(--paper); }

.hook {
  margin-top: 30px;
  font-family: var(--f-display);
  font-weight: 550;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.4;
  color: var(--ink-strong);
  border-left: 3px solid var(--green);
  padding-left: 18px;
  max-width: 30em;
}
.act--auto .hook { color: var(--on-dark); }

.body-copy { margin-top: 24px; max-width: 34em; color: var(--ink-muted-strong); }
.act--auto .body-copy { color: var(--on-dark-muted); }

.stat-row { display: flex; flex-wrap: wrap; gap: 14px 42px; margin-top: 36px; }
.stat-row b {
  display: block; font-family: var(--f-display); font-weight: 750;
  font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; color: var(--navy);
}
.stat-row span { display: block; font-size: 13px; color: var(--ink-muted); max-width: 15em; margin-top: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.chips li {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px;
  color: var(--ink-strong);
  box-shadow: inset 0 0 0 1px var(--line);
}
.chips--dark li { color: var(--on-dark-muted); box-shadow: inset 0 0 0 1px rgba(233, 236, 239, 0.2); }
.chips--center { justify-content: center; }

.act-link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 40px;
  font-weight: 600; font-size: 16px; color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--green);
  padding-bottom: 5px;
  transition: gap var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.act-link:hover { gap: 16px; border-color: var(--green-hover); }
.act-link--dark { color: var(--paper); }
.act-cta-row { text-align: center; margin-top: 46px; }

/* ---------- price signal ----------
   The one line every service page is allowed to carry about money.
   Prices themselves live only inside articles (decision 2026-07-28);
   the page keeps the pointer so a visitor never hits a dead end on
   "what does this cost", and so the article and the page cite each
   other — which is what makes an assistant connect the two.
   Deliberately quieter than .act-link: it is a reassurance, not the
   page's call to action. */
.cost-link {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 18px;
  font-size: 15px; font-weight: 500;
  color: var(--ink-muted-strong);
  text-decoration: none;
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.cost-link b {
  font-weight: 600; color: var(--navy);
  border-bottom: 1px solid var(--green);
  padding-bottom: 2px;
}
.cost-link i { font-style: normal; color: var(--green-text-light); transition: transform var(--dur) var(--ease); }
.cost-link:hover { gap: 12px; color: var(--navy); }
.cost-link:hover b { border-color: var(--green-hover); }
.cost-link--dark { color: var(--on-dark-muted); }
.cost-link--dark b { color: var(--paper); }
.cost-link--dark i { color: var(--green-bright); }
.cost-link--dark:hover { color: var(--paper); }
/* centred follow-up row — sits under an .act-cta-row, so it needs a much
   smaller top margin than one of its own */
.cost-row { text-align: center; margin-top: 20px; }

/* ---------- ACT 01 · phone scene ---------- */
.phone {
  background: var(--navy); color: var(--on-dark);
  border-radius: var(--r-2xl);
  padding: 26px 26px 20px;
  box-shadow: 0 32px 80px -28px rgba(14, 17, 22, 0.45), 0 0 0 1px rgba(14, 17, 22, 0.9);
  max-width: 520px; margin-inline: auto;
}
.phone-head { position: relative; min-height: 22px; }
.call-state { display: flex; align-items: center; gap: 10px; color: var(--on-dark-muted); }
.call-state--live { position: absolute; inset: 0; align-items: center; }
html:not(.fx) .call-state--incoming { display: none; } /* static page shows the completed call */
.ring-dot, .live-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ring-dot { background: var(--green-bright); }
html.fx .ring-dot { animation: pulse 1.1s var(--ease) infinite; }
.live-dot { background: var(--green); }
.call-timer { margin-left: auto; color: var(--on-dark-faint); }

.wave {
  display: flex; align-items: center; gap: 3px;
  height: 44px; margin: 20px 0 4px;
}
.wave span {
  flex: 1; height: calc(38px * var(--s, .6)); border-radius: 2px;
  background: rgba(0, 194, 110, 0.32);
  transform: scaleY(0.22); transform-origin: center;
}
html:not(.fx) .wave span { transform: scaleY(var(--s, .6)); background: rgba(0, 194, 110, 0.4); }
html.fx .wave.on span { animation: waveb 0.9s ease-in-out calc(var(--d, 0s) - 0.6s) infinite alternate; }
@keyframes waveb {
  from { transform: scaleY(0.16); }
  to { transform: scaleY(1); background: rgba(47, 216, 136, 0.75); }
}

.call-lines { display: grid; gap: 14px; margin-top: 18px; }
.call-line { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; }
.call-line .who { color: var(--on-dark-faint); padding-top: 12px; font-size: 10px; }
.call-line .bubble {
  background: var(--ink-deep);
  border: 1px solid rgba(233, 236, 239, 0.07);
  border-radius: 12px; padding: 10px 14px;
}
.call-line.from-caller .bubble { background: rgba(0, 194, 110, 0.10); border-color: rgba(0, 194, 110, 0.22); }
.call-line .t { font-size: 14.5px; line-height: 1.5; color: var(--on-dark); min-height: 1.4em; }
.call-line .t-sub { display: block; margin-top: 5px; font-size: 11.5px; color: var(--on-dark-faint); }
.t.typing::after {
  content: ""; display: inline-block; width: 2px; height: 1em;
  background: var(--green-bright); margin-left: 2px; vertical-align: -0.15em;
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.call-results { display: grid; gap: 9px; margin-top: 20px; }
.call-result {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0, 194, 110, 0.08);
  border: 1px solid rgba(0, 194, 110, 0.25);
  border-radius: 10px; padding: 10px 14px;
  font-size: 13px; color: var(--on-dark);
}
.call-result svg { color: var(--green-bright); flex: none; }
.call-result .ok {
  margin-left: auto; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--green-bright); font-weight: 500;
}
.phone-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(233, 236, 239, 0.08);
  color: var(--on-dark-faint);
}
.phone-foot .mono-label { font-size: 9.5px; }
.replay {
  display: none;
  align-items: center; gap: 7px;
  background: transparent; color: var(--on-dark-muted);
  border: 1px solid rgba(233, 236, 239, 0.2); border-radius: 999px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 6px 13px; cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.replay:hover { color: var(--green-bright); border-color: rgba(47, 216, 136, 0.5); }
html.fx .replay { display: inline-flex; }

/* ---------- ACT 02 · flow scene ---------- */
.act-copy--center { text-align: center; max-width: 760px; margin-inline: auto; }
.act-copy--center .hook { margin-inline: auto; border-left: 0; padding-left: 0; }
.act-copy--center .hook::before { content: ""; display: block; width: 44px; height: 3px; background: var(--green); margin: 0 auto 16px; }
.act-copy--center .body-copy { margin-inline: auto; }

.flow { margin-top: clamp(40px, 6vw, 72px); position: relative; z-index: 2; }
.flow-svg { display: block; width: 100%; height: auto; max-width: 940px; margin-inline: auto; }
.wire { stroke: #2A2F37; stroke-width: 1.5; }
.pulse { stroke: var(--green-bright); stroke-width: 2; opacity: 0; }
html:not(.fx) .pulse { opacity: 0; }
.node rect { fill: var(--ink-deep); stroke: rgba(233, 236, 239, 0.13); stroke-width: 1; }
.node--ai rect { stroke: rgba(0, 194, 110, 0.45); }
.n-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.2px; fill: var(--green-bright); }
.n-title { font-family: var(--f-body); font-size: 14.5px; font-weight: 600; fill: var(--paper); }
.n-sub { font-family: var(--f-mono); font-size: 10.5px; fill: var(--on-dark-faint); }

.flow-list { display: none; }
@media (max-width: 720px) {
  .flow-svg { display: none; }
  .flow-list {
    display: grid; gap: 0; max-width: 420px; margin-inline: auto;
    border-left: 2px solid rgba(0, 194, 110, 0.4);
  }
  .flow-list li { position: relative; padding: 12px 0 12px 24px; color: var(--on-dark); font-size: 14.5px; }
  .flow-list li::before {
    content: ""; position: absolute; left: -6px; top: 20px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--navy); border: 2px solid var(--green);
  }
  .fl-k { display: block; color: var(--green-bright); font-size: 10px; margin-bottom: 3px; }
}

.flow-stat {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 16px;
  margin-top: clamp(28px, 4vw, 44px); text-align: center;
}
.stat-big {
  font-family: var(--f-display); font-weight: 780; letter-spacing: -0.02em;
  font-size: clamp(38px, 5vw, 58px); color: var(--green-bright); line-height: 1;
}
.flow-stat > span { color: var(--on-dark-muted); font-size: 14.5px; max-width: 34em; }

/* ---------- ACT 03 · answer scene ---------- */
.answer {
  background: var(--surface);
  border-radius: var(--r-2xl);
  box-shadow: 0 32px 80px -30px rgba(14, 17, 22, 0.28), 0 0 0 1px var(--border);
  max-width: 520px; margin-inline: auto;
  overflow: hidden;
}
.answer-head {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}
.answer-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.answer-head .tabs {
  margin-left: 14px; display: flex; gap: 6px; align-items: center;
  /* narrow screens: pills never squash or wrap — the strip scrolls instead */
  min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.answer-head .tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  /* --ink-muted is 4.39:1 on --surface-subtle behind it: under AA at 10px.
     Same miss, same fix as the 2026-08-07 sweep — --ink-muted-strong is 7.75:1. */
  font-weight: 500; color: var(--ink-muted-strong);
  padding: 7px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; line-height: 1;
  white-space: nowrap; flex: none;
}
.tab.is-on { background: var(--navy); color: var(--paper); }

.answer-body { padding: 24px 24px 20px; }
.ask {
  background: var(--surface-subtle);
  border-radius: 12px; padding: 11px 15px;
  font-size: 14.5px; font-weight: 500; color: var(--navy);
  width: fit-content; max-width: 100%;
}
.ask .t { min-height: 1.4em; display: inline; }
.ask .t.typing::after {
  content: ""; display: inline-block; width: 2px; height: 1em;
  background: var(--green-deep); margin-left: 2px; vertical-align: -0.15em;
  animation: caret 0.9s steps(1) infinite;
}
.thinking { display: none; gap: 5px; margin: 16px 2px 0; }
html.fx .thinking { display: flex; }
.thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
html.fx .thinking.on i { animation: think 1s ease-in-out calc(var(--i, 0) * 0.15s) infinite; }
.thinking i:nth-child(2) { --i: 1; }
.thinking i:nth-child(3) { --i: 2; }
@keyframes think { 40% { translate: 0 -4px; opacity: .5; } }

.ans { margin-top: 16px; font-size: 15px; line-height: 1.7; color: var(--ink-strong); min-height: 4.5em; }
.ans strong { color: var(--navy); font-weight: 600; }
.cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 3px;
  border-radius: 6px;
  background: var(--mint-tint); color: var(--green-text-light);
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  vertical-align: 0.2em; line-height: 1;
}
.sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.sources .mono-label { color: var(--ink-muted); font-size: 9.5px; margin-right: 4px; }
.src {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--ink-strong);
  background: var(--paper); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px;
}
.src i {
  font-style: normal; width: 14px; height: 14px; border-radius: 5px;
  background: var(--mint-tint); color: var(--green-text-light);
  display: inline-flex; align-items: center; justify-content: center; font-size: 9px;
}
.answer-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 15px 24px 18px;
  border-top: 1px solid var(--border);
}
.answer-foot .mono-label { color: var(--ink-muted); font-size: 9.5px; }
.engines { display: flex; flex-wrap: wrap; gap: 7px; }
.engine {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-muted); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 11px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.engine .dot { width: 6px; height: 6px; background: var(--line); box-shadow: none; }
.engine.lit { color: var(--navy); border-color: rgba(0, 194, 110, 0.5); }
.engine.lit .dot { background: var(--green); }
html:not(.fx) .engine { color: var(--navy); border-color: rgba(0, 194, 110, 0.5); }
html:not(.fx) .engine .dot { background: var(--green); }

.radar { margin-top: 30px; }
.radar .mono-label { color: var(--ink-muted); }
.spark { display: block; width: min(260px, 100%); height: auto; margin-top: 10px; }
.spark-line { stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spark-dot { fill: var(--green); }

/* ---------- more services ---------- */
.more { background: var(--surface-subtle); padding-block: clamp(80px, 10vw, 140px); }
.more .act-label { margin-bottom: 30px; }
.menu { border-top: 1px solid var(--line); max-width: 860px; }
.menu li { border-bottom: 1px solid var(--line); }
.menu a {
  display: grid; grid-template-columns: 240px 1fr auto; gap: 20px; align-items: center;
  padding: 20px 6px; text-decoration: none;
  transition: background var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.menu a:hover { background: rgba(0, 194, 110, 0.05); translate: 4px 0; }
.menu b { font-family: var(--f-display); font-weight: 650; font-size: 19px; letter-spacing: -0.01em; }
.menu .m-num {
  font-family: var(--f-mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.09em; color: var(--green-text-light);
  margin-right: 10px; vertical-align: 0.14em;
}
.menu span { color: var(--ink-muted); font-size: 14.5px; }
.menu svg { color: var(--green-deep); }
@media (max-width: 720px) {
  .menu a { grid-template-columns: 1fr auto; }
  .menu span { grid-column: 1 / -1; }
  .menu svg { grid-row: 1; grid-column: 2; } /* keep the arrow beside the name — auto-placement drops it under the description */
}

.proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: 26px 48px;
  margin-top: clamp(48px, 6vw, 72px);
}
.proof-line { max-width: 34em; color: var(--ink-muted-strong); font-size: 15.5px; }
.proof-line b { color: var(--navy); font-weight: 600; }
.proof-badges { display: flex; align-items: center; gap: 22px; }
.proof-badges img { height: 56px; width: auto; }

/* ---------- how it starts ---------- */
.how { background: var(--paper); padding-block: clamp(80px, 10vw, 140px); }
.how .act-label { margin-bottom: 34px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; max-width: 460px; } }
.steps li { border-top: 2px solid var(--navy); padding-top: 18px; position: relative; }
.step-n { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--green-text-light); }
.steps h3 { font-size: 21px; font-weight: 680; margin-top: 10px; letter-spacing: -0.015em; }
.steps p { margin-top: 8px; color: var(--ink-muted-strong); font-size: 14.5px; line-height: 1.6; }

/* ---------- closing act ---------- */
.close {
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(0, 194, 110, 0.07), transparent 60%),
    var(--navy);
  color: var(--on-dark);
  padding-top: clamp(110px, 15vw, 200px);
  overflow: clip;
  position: relative;
}
.close-inner { text-align: center; }
.close-logo { width: min(76vw, 780px); height: auto; opacity: 0.97; }
.close h2 {
  margin-top: clamp(40px, 6vw, 72px);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 730;
  letter-spacing: -0.022em;
  color: var(--paper);
}
.close-sub { margin-top: 16px; color: var(--on-dark-muted); font-size: 17px; }
.close-cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.close-mail { color: var(--on-dark-muted); font-size: 14.5px; text-decoration: none; border-bottom: 1px solid rgba(233, 236, 239, 0.25); padding-bottom: 2px; transition: color var(--dur) var(--ease); }
.close-mail:hover { color: var(--green-bright); }

.footer { margin-top: clamp(80px, 10vw, 140px); border-top: 1px solid rgba(233, 236, 239, 0.09); }
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px;
  padding-block: 26px;
  font-size: 13px; color: var(--on-dark-faint);
}
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.footer-inner nav a { color: var(--on-dark-muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.footer-inner nav a:hover { color: var(--green-bright); }
/* "Cookie settings" opens the consent manager (L3). It is a <button>, not a
   link, so it stays inert and harmless until CookieYes exists — but it must
   look exactly like its neighbours on every page, hence this lives here in
   the root stylesheet and not in legal.css. */
.footer-inner nav .cky-banner-element {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--on-dark-muted);
  transition: color var(--dur) var(--ease);
}
.footer-inner nav .cky-banner-element:hover { color: var(--green-bright); }
.footer-sig { width: 100%; color: var(--on-dark-faint); font-size: 9.5px; }
@media (min-width: 900px) { .footer-sig { width: auto; } }

/* ---------- print / static ---------- */
@media print {
  .grain, .thread, .hero-hint, .edge-readout, #field { display: none !important; }
  .nav { position: absolute; }
}

/* ---------- a11y utilities (C8) ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[tabindex="-1"]:focus { outline: none; }

/* ============================================================
   L3 · CookieYes consent banner — LIVE SYSTEM dark theme
   ------------------------------------------------------------
   The banner renders into the LIGHT DOM (no shadow root, no
   iframe), so these rules reach it. CookieYes injects its own
   <style id="cky-style"> LAST into <head> at runtime, and writes
   colours as inline style attributes from JS, so source order and
   specificity can never win: every colour needs !important. That
   is deliberate here, not sloppiness.

   Colours are written as var(--token, #literal) so this block
   still renders correctly if a token is ever renamed.

   ⚠️ These selectors are from CookieYes' shipped runtime, not
   from our own markup — they cannot be verified in preview
   (CookieYes validates the hostname and refuses to render off
   the registered domain). Every rule is additive and independent:
   a selector that matches nothing leaves one element on its light
   default, which is visible and fixable in one line. Nothing here
   can collapse a layout. Re-check against the real banner in QA
   step Q9 before publishing.
   ============================================================ */

/* --- notice bar ------------------------------------------------ */
.cky-consent-container .cky-consent-bar {
  background-color: var(--navy, #0E1116) !important;
  border: 1px solid rgba(233, 236, 239, 0.14) !important;
  border-radius: var(--r-md, 10px) !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7) !important;
}
.cky-title { color: var(--on-dark, #E9ECEF) !important; }
.cky-notice-des,
.cky-notice-des p,
.cky-notice-des span { color: var(--on-dark-muted, #A7ACB4) !important; }
.cky-notice-des a,
a.cky-policy { color: var(--green-bright, #2FD888) !important; }

/* --- buttons ---------------------------------------------------
   Accept and Reject MUST be visually identical: same size, weight
   and contrast, same number of clicks. That is a legal requirement
   (HDPA point Γ7 / EDPB cookie-banner taskforce), not a taste call.
   Only "Customise" is allowed to read as secondary. Do not restyle
   accept to be more prominent. ---------------------------------- */
.cky-btn {
  font-family: var(--f-body, "Geist", system-ui, sans-serif) !important;
  border-radius: var(--r-md, 10px) !important;
  padding: 11px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border: 0 !important;
  transition: none !important;
}
.cky-btn.cky-btn-accept,
.cky-btn.cky-btn-reject,
.cky-btn.cky-btn-preferences {
  background-color: var(--on-dark, #E9ECEF) !important;
  color: var(--navy, #0E1116) !important;
  box-shadow: none !important;
}
/* Equality has to survive HOVER too. Our rules above pin the resting and focus
   states, but if the vendor stylesheet defines an asymmetric hover (accept
   emphasised, reject flat) the "same prominence" test breaks the moment the
   pointer moves. Pin all three to one treatment so it cannot. */
.cky-btn.cky-btn-accept:hover,
.cky-btn.cky-btn-reject:hover,
.cky-btn.cky-btn-preferences:hover {
  background-color: var(--surface, #FDFCFA) !important;
  color: var(--navy, #0E1116) !important;
  box-shadow: none !important;
}
.cky-btn.cky-btn-customize {
  background-color: transparent !important;
  color: var(--on-dark, #E9ECEF) !important;
  /* 0.45, not the site's usual 0.28: this outline is the only visual
     affordance on the sole route to per-category control, so it has
     to clear the 3:1 UI boundary threshold. */
  box-shadow: inset 0 0 0 1px rgba(233, 236, 239, 0.45) !important;
}

/* --- preference centre ----------------------------------------
   Setting `color` here also re-tints CookieYes' hairlines and the
   accordion chevron: it draws both with border-color: inherit. --- */
.cky-preference-center {
  background-color: var(--navy, #0E1116) !important;
  color: var(--on-dark, #E9ECEF) !important;
  border: 1px solid rgba(233, 236, 239, 0.14) !important;
}
.cky-preference-title,
.cky-preference-content-wrapper,
.cky-accordion-header-des,
.cky-accordion-btn,
.cky-accordion-header .cky-accordion-btn {
  color: var(--on-dark, #E9ECEF) !important;
}
/* The category rows and the close control are <button>s. Setting only
   `color` on them leaves a light UA/vendor button face behind pale text,
   i.e. invisible labels. Forcing the background transparent is correct
   whether or not CookieYes' own stylesheet already does it. */
.cky-accordion-btn,
.cky-btn-close {
  background: transparent !important;
  border: 0 !important;
}
.cky-preference-content-wrapper,
.cky-accordion-header-des { color: var(--on-dark-muted, #A7ACB4) !important; }
.cky-overlay { background: #000 !important; opacity: 0.6 !important; }

/* --- GOTCHA: the scroll fade above the button row is a hardcoded
   WHITE gradient, in both the stylesheet and an inline attribute.
   Left alone it is a bright smear across a dark modal. ---------- */
.cky-footer-shadow {
  background: linear-gradient(180deg,
              rgba(14, 17, 22, 0) 0%,
              var(--navy, #0E1116) 100%) !important;
}

/* --- GOTCHA: "Always Active" is coloured with the literal CSS
   keyword `green`, which is nearly unreadable on dark. ---------- */
.cky-always-active { color: var(--green-bright, #2FD888) !important; }

/* --- GOTCHA: close / revisit glyphs are remote <img>s, so they
   take no fill — they have to be inverted. -------------------- */
.cky-btn-close img,
.cky-btn-revisit img { filter: invert(1) !important; }

/* --- GOTCHA: the toggle background is written INLINE by JS on
   every change, so both states need !important. ---------------- */
/* 3:1 minimum for a UI component boundary (WCAG 1.4.11). The old
   rgba(...,0.22) measured 1.7:1 against the panel; --on-dark-faint
   gives 4.9:1 and still reads clearly as "off" next to the green. */
.cky-switch input[type="checkbox"] {
  background-color: var(--on-dark-faint, #7D828B) !important;
}
.cky-switch input[type="checkbox"]:checked {
  background-color: var(--green, #00C26E) !important;
}
.cky-switch input[type="checkbox"]:before {
  background-color: var(--navy, #0E1116) !important;
}

/* --- GOTCHA: the cookie audit table ships light-grey. ---------- */
.cky-audit-table {
  background-color: var(--ink-deep, #1A1E25) !important;
  color: var(--on-dark, #E9ECEF) !important;
  border-color: rgba(233, 236, 239, 0.14) !important;
}

/* --- branding strip: re-tinted, NOT hidden. Removing CookieYes
   branding is an Ultimate-plan entitlement, so hiding it with CSS
   on the free plan is a terms question, not a styling one. ------ */
[data-cky-tag="detail-powered-by"],
[data-cky-tag="powered-by"] {
  background-color: transparent !important;
  color: var(--on-dark-faint, #7D828B) !important;
}

/* --- our own reset leaks into the banner ----------------------
   styles.css sets `p, ul, ol, figure { margin: 0 }` globally, and
   the banner is in the light DOM, so it inherits that. CookieYes
   only zeroes margin-top and relies on the UA default bottom
   margin, so multi-paragraph text collapses into one block. ----- */
.cky-notice-des p,
.cky-preference-content-wrapper p,
.cky-accordion-header-des p { margin-bottom: 0.75em; }
.cky-notice-des p:last-child,
.cky-preference-content-wrapper p:last-child,
.cky-accordion-header-des p:last-child { margin-bottom: 0; }

/* --- motion contract -------------------------------------------
   CookieYes animates the modal with `transition: all 1s ease` and
   ships no prefers-reduced-motion rule anywhere. This site gates
   ALL motion behind html.fx and kills it in ?static. ------------- */
@media (prefers-reduced-motion: reduce) {
  .cky-modal, .cky-modal.cky-modal-open,
  .cky-consent-container, .cky-btn { transition: none !important; }
}
html.static .cky-modal,
html.static .cky-modal.cky-modal-open,
html.static .cky-consent-container { transition: none !important; }

/* --- keyboard focus must stay visible on the dark bar ----------
   Scoped to the VENDOR banner only. `.cky-banner-element` is our own
   footer/inline button and must NOT be listed here: it also appears
   inside the light-themed policy prose, where the global rule at the
   top of this file correctly swaps the ring to --green-deep. An
   !important ring here would override that and drop it to 1.7:1. */
.cky-consent-container .cky-btn:focus-visible,
.cky-modal .cky-btn:focus-visible,
.cky-switch input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--green-bright, #2FD888) !important;
  outline-offset: 2px !important;
}

/* --- mobile: the banner must not bury the form's submit -------- */
@media (max-width: 640px) {
  body:has(.cky-consent-container:not(.cky-hide)) .act--form { padding-bottom: 220px; }
}