/* ============================================================================
   Fexo CRM — marketing site
   ============================================================================
   fexocrm.com. Public, indexed, static. The CRM itself is app.fexocrm.com.

   THE ONE RULE, inherited from docs/ui/tokens.css: no rule below writes a hex
   value. Every colour resolves through a token. The token block is a verbatim
   copy of docs/ui/tokens.css — that file is the source of truth, and if a token
   changes there it must be re-copied here. It is duplicated rather than linked
   because this site is a standalone container with no build step and no shared
   volume back to docs/.

   Two extra tokens exist only here (--sky-1, --sky-2) for the ambient
   background wash, mirroring the ones login-preview.html defines for the same
   purpose. They are defined per theme alongside the rest.
   ========================================================================= */

/* ══ RESET ═══════════════════════════════════════════════════════════════ */

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

/* ══ TOKENS — from docs/ui/tokens.css ════════════════════════════════════ */

:root {
  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   21px;
  --text-2xl:  26px;
  --text-3xl:  32px;

  --weight-normal: 400;
  --weight-med:    500;
  --weight-semi:   600;
  --weight-bold:   650;

  /* ── Spacing (4px base) ─────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius:      9px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 999px;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* Marketing-only easing: a long, soft settle for scroll reveals. The token
     file has no equivalent because the app UI never needs a curve this slow. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 280ms;

  /* ── Z-index scale ──────────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Layout (marketing only) ────────────────────────────────────────── */
  --shell:     1180px;
  --shell-pad: var(--sp-6);
  --header-h:  64px;
}

/* ── THEME: slate — Slate & Sapphire (DEFAULT) ───────────────────────── */
:root,
:root[data-theme="slate"] {
  color-scheme: dark;

  --ground:       #0b1120;
  --panel:        #131c31;
  --panel-raised: #1a2440;
  --panel-hover:  #1e2a4a;

  --edge:        #2a3859;
  --edge-soft:   #1e2a45;
  --edge-strong: #3a4a72;

  --accent:          #2563eb;
  --accent-bright:   #4f8cff;
  --accent-hover:    #3b7aff;
  --accent-contrast: #ffffff;
  --accent-subtle:   rgba(37, 99, 235, .13);
  --accent-glow:     rgba(79, 140, 255, .22);

  --ink:       #eef2f9;
  --ink-dim:   #a8b4cb;
  --ink-faint: #7d8ba5;
  --ink-mute:  #5b6883;

  --success:        #10b981;
  --success-subtle: rgba(16, 185, 129, .13);
  --warning:        #f59e0b;
  --warning-subtle: rgba(245, 158, 11, .13);
  --danger:         #ef4444;
  --danger-subtle:  rgba(239, 68, 68, .13);
  --info:           #4f8cff;
  --info-subtle:    rgba(79, 140, 255, .13);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow:    0 4px 14px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .48);

  --field:       #0b1120;
  --field-edge:  #2a3859;
  --field-focus: #4f8cff;

  --sky-1: rgba(37, 99, 235, .20);
  --sky-2: rgba(79, 140, 255, .13);
}

/* ── THEME: midnight — Midnight & Gold ───────────────────────────────── */
:root[data-theme="midnight"] {
  color-scheme: dark;

  --ground:       #0d1117;
  --panel:        #161b22;
  --panel-raised: #1c232d;
  --panel-hover:  #212a35;

  --edge:        #2b333d;
  --edge-soft:   #21272f;
  --edge-strong: #3d4753;

  --accent:          #c9a227;
  --accent-bright:   #e3bd4d;
  --accent-hover:    #d9b03a;
  --accent-contrast: #1a1400;
  --accent-subtle:   rgba(201, 162, 39, .14);
  --accent-glow:     rgba(227, 189, 77, .22);

  --ink:       #f0f3f7;
  --ink-dim:   #a9b1ba;
  --ink-faint: #7d8590;
  --ink-mute:  #5c646d;

  --success:        #3fb950;
  --success-subtle: rgba(63, 185, 80, .14);
  --warning:        #d29922;
  --warning-subtle: rgba(210, 153, 34, .14);
  --danger:         #f85149;
  --danger-subtle:  rgba(248, 81, 73, .14);
  --info:           #58a6ff;
  --info-subtle:    rgba(88, 166, 255, .14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow:    0 4px 14px rgba(0, 0, 0, .4);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);

  --field:       #0d1117;
  --field-edge:  #2b333d;
  --field-focus: #c9a227;

  --sky-1: rgba(201, 162, 39, .16);
  --sky-2: rgba(227, 189, 77, .09);
}

/* ── THEME: emerald — Deep Emerald ───────────────────────────────────── */
:root[data-theme="emerald"] {
  color-scheme: dark;

  --ground:       #07130f;
  --panel:        #0d1f19;
  --panel-raised: #133026;
  --panel-hover:  #17382c;

  --edge:        #21493b;
  --edge-soft:   #16362b;
  --edge-strong: #2d6350;

  --accent:          #0f9d63;
  --accent-bright:   #14c47c;
  --accent-hover:    #12b071;
  --accent-contrast: #02150d;
  --accent-subtle:   rgba(15, 157, 99, .14);
  --accent-glow:     rgba(20, 196, 124, .22);

  --ink:       #eaf5f0;
  --ink-dim:   #9ec2b2;
  --ink-faint: #6f9585;
  --ink-mute:  #517061;

  --success:        #14c47c;
  --success-subtle: rgba(20, 196, 124, .14);
  --warning:        #eab308;
  --warning-subtle: rgba(234, 179, 8, .14);
  --danger:         #f26060;
  --danger-subtle:  rgba(242, 96, 96, .14);
  --info:           #38bdf8;
  --info-subtle:    rgba(56, 189, 248, .14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow:    0 4px 14px rgba(0, 0, 0, .38);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .5);

  --field:       #07130f;
  --field-edge:  #21493b;
  --field-focus: #14c47c;

  --sky-1: rgba(15, 157, 99, .18);
  --sky-2: rgba(20, 196, 124, .11);
}

/* ── THEME: daylight — light mode ────────────────────────────────────── */
:root[data-theme="daylight"] {
  color-scheme: light;

  --ground:       #f6f8fc;
  --panel:        #ffffff;
  --panel-raised: #ffffff;
  --panel-hover:  #eff3fa;

  --edge:        #d8e0ee;
  --edge-soft:   #e8edf6;
  --edge-strong: #b9c6dd;

  --accent:          #1d4ed8;
  --accent-bright:   #2563eb;
  --accent-hover:    #1a45c0;
  --accent-contrast: #ffffff;
  --accent-subtle:   rgba(37, 99, 235, .09);
  --accent-glow:     rgba(37, 99, 235, .16);

  --ink:       #101828;
  --ink-dim:   #475467;
  --ink-faint: #667085;
  --ink-mute:  #98a2b3;

  --success:        #067647;
  --success-subtle: rgba(6, 118, 71, .09);
  --warning:        #b54708;
  --warning-subtle: rgba(181, 71, 8, .09);
  --danger:         #b42318;
  --danger-subtle:  rgba(180, 35, 24, .09);
  --info:           #175cd3;
  --info-subtle:    rgba(23, 92, 211, .09);

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow:    0 4px 12px rgba(16, 24, 40, .08);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, .12);

  --field:       #ffffff;
  --field-edge:  #d8e0ee;
  --field-focus: #2563eb;

  --sky-1: rgba(37, 99, 235, .11);
  --sky-2: rgba(79, 140, 255, .07);
}

/* ══ BASE ════════════════════════════════════════════════════════════════ */

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

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background var(--dur-slow) var(--ease),
              color var(--dur-slow) var(--ease);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--accent-subtle); color: var(--ink); }

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

/* Skip link — keyboard users land on it first, invisible until focused. */
.skip {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  z-index: var(--z-toast);
  transform: translateY(-200%);
  background: var(--accent);
  color: var(--accent-contrast);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip:focus { transform: translateY(0); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* ══ TYPE ════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4 { letter-spacing: -.028em; line-height: 1.15; font-weight: var(--weight-semi); }

.h-display {
  font-size: clamp(32px, 5.4vw, 54px);
  letter-spacing: -.035em;
  line-height: 1.08;
  text-wrap: balance;
}
.h-section {
  font-size: clamp(25px, 3.4vw, 36px);
  letter-spacing: -.032em;
  line-height: 1.16;
  text-wrap: balance;
}
.h-sub {
  font-size: var(--text-xl);
  letter-spacing: -.024em;
}

/* The accent gradient on a headline fragment — used sparingly, once per view. */
.grad {
  background: linear-gradient(115deg, var(--accent-bright), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  color: var(--ink-dim);
  font-size: var(--text-lg);
  line-height: 1.65;
  max-width: 58ch;
  text-wrap: pretty;
}
.muted   { color: var(--ink-dim); }
.faint   { color: var(--ink-faint); }
.mono    { font-family: var(--font-mono); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent-bright);
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
}
.eyebrow.plain {
  background: none; border: none; padding: 0;
  color: var(--ink-faint);
}

/* ══ BUTTONS ═════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              filter var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; fill: none; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: var(--accent-contrast);
  box-shadow: 0 3px 14px var(--accent-glow);
}
.btn-primary:hover { filter: brightness(1.07); box-shadow: 0 6px 22px var(--accent-glow); }
.btn-primary svg { transition: transform var(--dur) var(--ease); }
.btn-primary:hover svg { transform: translateX(2px); }

.btn-ghost {
  background: var(--panel);
  border-color: var(--edge);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--panel-hover); border-color: var(--edge-strong); }

.btn-quiet { background: none; color: var(--ink-dim); padding-inline: var(--sp-3); }
.btn-quiet:hover { color: var(--ink); background: var(--panel-hover); }

.btn-lg { padding: var(--sp-4) var(--sp-8); font-size: var(--text-md); }
.btn-sm { padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ══ BRAND ═══════════════════════════════════════════════════════════════ */

.brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: var(--ink);
  flex-shrink: 0;
}
.mark {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--text-md);
  color: var(--accent-contrast);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.wordmark {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -.025em;
}
.wordmark span { color: var(--accent-bright); }

/* ══ HEADER ══════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
}
/* Scrolled state is set by JS — the bar stays transparent over the hero and
   frosts once content passes under it. */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--edge-soft);
}
.site-header .shell {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-5);
}

.nav { display: none; align-items: center; gap: var(--sp-1); margin-left: var(--sp-4); }
@media (min-width: 900px) { .nav { display: flex; } }
.nav a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--weight-med);
  color: var(--ink-dim);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--panel-hover); }
.nav a[aria-current="page"] { color: var(--ink); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.header-actions .btn-quiet { display: none; }
@media (min-width: 900px) { .header-actions .btn-quiet { display: inline-flex; } }

/* Mobile menu toggle */
.burger {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  background: var(--panel); border: 1px solid var(--edge);
  border-radius: var(--radius); color: var(--ink);
  cursor: pointer;
}
@media (min-width: 900px) { .burger { display: none; } }
.burger svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; }
.burger .x { display: none; }
.burger[aria-expanded="true"] .bars { display: none; }
.burger[aria-expanded="true"] .x { display: block; }

.mobile-nav {
  display: none;
  border-bottom: 1px solid var(--edge-soft);
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mobile-nav.is-open { display: block; }
@media (min-width: 900px) { .mobile-nav, .mobile-nav.is-open { display: none; } }
.mobile-nav ul { list-style: none; padding: var(--sp-3) 0 var(--sp-5); }
.mobile-nav a {
  display: block;
  padding: var(--sp-3) var(--sp-1);
  font-size: var(--text-md);
  font-weight: var(--weight-med);
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--edge-soft);
}
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { color: var(--ink); }
.mobile-nav .btn { width: 100%; margin-top: var(--sp-4); }

/* ══ SECTION RHYTHM ══════════════════════════════════════════════════════ */

.section { padding-block: clamp(var(--sp-16), 9vw, 104px); }
.section-tight { padding-block: clamp(var(--sp-12), 6vw, var(--sp-16)); }

.section-head {
  display: flex; flex-direction: column; gap: var(--sp-4);
  max-width: 62ch; margin-bottom: var(--sp-12);
}
.section-head.centred { margin-inline: auto; text-align: center; align-items: center; }

.rule { height: 1px; background: var(--edge-soft); border: 0; }

/* ══ AMBIENT BACKDROP ════════════════════════════════════════════════════ */
/* Two slow blurred orbs, same device as login-preview.html. Purely decorative,
   pointer-events off, and the animation drops entirely under reduced motion. */

.sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sky::before, .sky::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); }
.sky::before {
  width: 620px; height: 620px; top: -240px; left: -180px;
  background: var(--sky-1);
  animation: sky1 28s var(--ease) infinite alternate;
}
.sky::after {
  width: 520px; height: 520px; bottom: -200px; right: -140px;
  background: var(--sky-2);
  animation: sky2 34s var(--ease) infinite alternate;
}
@keyframes sky1 { to { transform: translate(80px, 60px) scale(1.14); } }
@keyframes sky2 { to { transform: translate(-70px, -50px) scale(1.1); } }

/* ══ HERO ════════════════════════════════════════════════════════════════ */

.hero { position: relative; overflow: hidden; padding-block: clamp(var(--sp-12), 8vw, 88px) clamp(var(--sp-16), 9vw, 96px); }
.hero .shell { position: relative; z-index: 2; }
.hero-grid { display: grid; gap: clamp(var(--sp-10), 6vw, 72px); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.02fr .98fr; } }

.hero-copy { display: flex; flex-direction: column; gap: var(--sp-6); align-items: flex-start; }
.hero-copy .lede { font-size: clamp(var(--text-md), 1.5vw, var(--text-lg)); }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  font-size: var(--text-sm); color: var(--ink-faint);
}
.hero-meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero-meta svg { width: 14px; height: 14px; stroke: var(--success); stroke-width: 2.4; fill: none; }

/* ══ THE WATERMARK DEMO CARD ═════════════════════════════════════════════ */
/* The hero centrepiece: a batch of listing photos moving through the actual
   pipeline — upload, watermark sweep, portal-ready. Shows the signature action
   rather than describing it. Same construction as login-preview.html so the two
   surfaces read as one product. */

.demo {
  position: relative;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: var(--sp-4);
}

.demo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.demo-ref { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); letter-spacing: .04em; }
.demo-title { font-size: var(--text-base); font-weight: var(--weight-semi); letter-spacing: -.01em; margin-top: 2px; }
.demo-live {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 10px; font-weight: var(--weight-semi);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--success); background: var(--success-subtle);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-full);
  white-space: nowrap;
}
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--success); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }

.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); }
.shot {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--edge-soft);
  background: linear-gradient(150deg, var(--panel-raised), var(--panel));
}
/* Abstract suggestion of a room — a floor line and a window. Deliberately not a
   literal photo: that would date the design and weigh the page down. */
.shot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.shot::after {
  content: ""; position: absolute; top: 22%; left: 24%; width: 30%; height: 32%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent-bright) 22%, transparent);
}
.wm {
  position: absolute; right: 4px; bottom: 3px;
  width: 13px; height: 13px; border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  display: grid; place-items: center;
  font-size: 7px; font-weight: 700; color: var(--accent-contrast);
  opacity: 0; transform: scale(.4);
  animation: stamp 9s var(--ease-out) infinite;
}
@keyframes stamp {
  0%, 6%    { opacity: 0;   transform: scale(.4) rotate(-18deg); }
  13%, 72%  { opacity: .95; transform: scale(1) rotate(0); }
  80%, 100% { opacity: 0;   transform: scale(.9) rotate(0); }
}
.sweep {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(105deg, transparent 38%,
              color-mix(in srgb, var(--accent-bright) 26%, transparent) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: sweep 9s var(--ease) infinite;
}
@keyframes sweep { 0%, 4% { transform: translateX(-130%); } 16%, 100% { transform: translateX(130%); } }

.bar { height: 3px; border-radius: 2px; background: var(--edge-soft); overflow: hidden; }
.bar i {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  width: 0; animation: fill 9s var(--ease) infinite;
}
@keyframes fill { 0%, 5% { width: 0; } 55% { width: 100%; } 92%, 100% { width: 100%; } }

.steps { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.step {
  font-size: 10.5px; color: var(--ink-mute);
  display: flex; align-items: center; gap: var(--sp-1);
  transition: color var(--dur) var(--ease);
}
.step i {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--edge-strong);
  display: grid; place-items: center;
}
.step svg { width: 7px; height: 7px; stroke: var(--accent-contrast); stroke-width: 3; fill: none; opacity: 0; }
.step.s1     { animation: lit 9s var(--ease) infinite; }
.step.s2     { animation: lit 9s var(--ease) infinite .9s; }
.step.s3     { animation: lit 9s var(--ease) infinite 1.8s; }
.step.s1 i   { animation: litRing 9s var(--ease) infinite; }
.step.s2 i   { animation: litRing 9s var(--ease) infinite .9s; }
.step.s3 i   { animation: litRing 9s var(--ease) infinite 1.8s; }
.step.s1 svg { animation: litTick 9s var(--ease) infinite; }
.step.s2 svg { animation: litTick 9s var(--ease) infinite .9s; }
.step.s3 svg { animation: litTick 9s var(--ease) infinite 1.8s; }
@keyframes lit { 0%, 8% { color: var(--ink-mute); } 14%, 88% { color: var(--ink-dim); } 96%, 100% { color: var(--ink-mute); } }
@keyframes litRing {
  0%, 8%    { border-color: var(--edge-strong); background: transparent; }
  14%, 88%  { border-color: var(--accent); background: var(--accent); }
  96%, 100% { border-color: var(--edge-strong); background: transparent; }
}
@keyframes litTick { 0%, 10% { opacity: 0; } 16%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* The privacy note under the strip — EXIF stripping is the detail brokers do
   not know they need, so it gets its own line rather than a bullet elsewhere. */
.demo-note {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  border-top: 1px solid var(--edge-soft);
  padding-top: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  line-height: 1.55;
}
.demo-note svg { width: 13px; height: 13px; stroke: var(--success); stroke-width: 2; fill: none; flex-shrink: 0; margin-top: 2px; }

/* ══ STAT BAND ═══════════════════════════════════════════════════════════ */

.stats {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat b {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat span { font-size: var(--text-sm); color: var(--ink-faint); }

/* ══ CARDS ═══════════════════════════════════════════════════════════════ */

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); }
                             .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover {
  border-color: var(--edge);
  background: var(--panel-raised);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.card h3 { font-size: var(--text-lg); letter-spacing: -.022em; }
.card p  { color: var(--ink-dim); font-size: var(--text-base); line-height: 1.65; }

/* Feature icon tile */
.icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent-bright);
}
.icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }

/* Numbered index on a feature card */
.index {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-mute); letter-spacing: .06em;
}

/* ══ FEATURE ROWS (features.html) ════════════════════════════════════════ */

.feature-row {
  display: grid; gap: clamp(var(--sp-8), 5vw, 64px);
  align-items: center;
  padding-block: clamp(var(--sp-12), 6vw, 76px);
  border-top: 1px solid var(--edge-soft);
}
.feature-row:first-of-type { border-top: 0; }
@media (min-width: 940px) {
  .feature-row { grid-template-columns: 1fr 1fr; }
  /* Alternate the visual side so the page does not become a single column of
     text with pictures stapled to the right. */
  .feature-row:nth-child(even) .feature-visual { order: -1; }
}
.feature-copy { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.feature-copy h2 { font-size: clamp(var(--text-2xl), 2.6vw, var(--text-3xl)); letter-spacing: -.03em; }
.feature-copy > p { color: var(--ink-dim); font-size: var(--text-md); line-height: 1.7; max-width: 52ch; }

.checks { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.checks li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--text-base); color: var(--ink-dim); line-height: 1.6;
}
.checks svg {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px;
  stroke: var(--accent-bright); stroke-width: 2.4; fill: none;
}
.checks b { color: var(--ink); font-weight: var(--weight-semi); }

/* ══ MOCK PANELS ═════════════════════════════════════════════════════════ */
/* Abstract representations of each tool's output — a document, a form, a set of
   fields. Built from tokens and boxes rather than screenshots, so they never go
   stale against the real UI and cost nothing to load. */

.mock {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.mock-bar { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--edge-soft); }
.mock-bar .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--edge-strong); }
.mock-bar .label { margin-left: var(--sp-2); font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); letter-spacing: .05em; }

/* Document body: a masthead block, a few rule lines, a total row. */
.doc { display: flex; flex-direction: column; gap: var(--sp-3); }
.doc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.doc-logo {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  display: grid; place-items: center;
  color: var(--accent-contrast); font-weight: 700; font-size: var(--text-base);
}
.doc-kind { text-align: right; }
.doc-kind b { display: block; font-size: var(--text-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.doc-kind span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); }

.lines { display: flex; flex-direction: column; gap: var(--sp-2); }
.line { height: 7px; border-radius: 3px; background: var(--edge-soft); }
.line.w90 { width: 90%; } .line.w75 { width: 75%; } .line.w60 { width: 60%; }
.line.w45 { width: 45%; } .line.w30 { width: 30%; }
.line.accent { background: color-mix(in srgb, var(--accent) 42%, transparent); }

.doc-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.doc-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--edge-soft);
  font-size: var(--text-sm); color: var(--ink-faint);
}
.doc-row .v { font-family: var(--font-mono); color: var(--ink-dim); }
.doc-total {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--sp-3);
  font-size: var(--text-base); font-weight: var(--weight-semi);
}
.doc-total .v { font-family: var(--font-mono); color: var(--accent-bright); }

/* Tag row — portal chips for the listing writer */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
  font-size: var(--text-xs); color: var(--ink-dim);
  background: var(--panel-raised); border: 1px solid var(--edge-soft);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
  white-space: nowrap;
}
.tag.on { color: var(--accent-bright); background: var(--accent-subtle); border-color: color-mix(in srgb, var(--accent) 26%, transparent); }

/* ══ STEPS (how it works) ════════════════════════════════════════════════ */

.flow { display: grid; gap: var(--sp-5); counter-reset: flow; }
@media (min-width: 860px) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow-step {
  position: relative;
  padding: var(--sp-6);
  background: var(--panel);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.flow-step::before {
  counter-increment: flow;
  content: counter(flow, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--accent-bright);
  letter-spacing: .06em;
}
.flow-step h3 { font-size: var(--text-md); letter-spacing: -.02em; }
.flow-step p  { color: var(--ink-dim); font-size: var(--text-base); line-height: 1.65; }

/* ══ COMPARISON / POSITIONING SPLIT ══════════════════════════════════════ */

.split { display: grid; gap: var(--sp-5); }
@media (min-width: 800px) { .split { grid-template-columns: repeat(2, 1fr); } }
.split-card {
  padding: var(--sp-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--edge-soft);
  background: var(--panel);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.split-card.is-ours {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel));
}
.split-card h3 { font-size: var(--text-md); letter-spacing: -.02em; }
.split-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.split-list li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--text-base); line-height: 1.6; color: var(--ink-dim);
}
.split-list svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; stroke-width: 2.2; fill: none; }
.split-list .before svg { stroke: var(--ink-mute); }
.split-list .after svg  { stroke: var(--accent-bright); }
.time {
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm);
  white-space: nowrap; margin-left: auto;
}
.time.slow { color: var(--warning); background: var(--warning-subtle); }
.time.fast { color: var(--success); background: var(--success-subtle); }

/* ══ PRICING ═════════════════════════════════════════════════════════════ */

.tiers { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 820px)  { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-5);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tier:hover { border-color: var(--edge); transform: translateY(-2px); }
.tier.is-featured {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel));
  box-shadow: var(--shadow);
}
.tier-flag {
  position: absolute; top: calc(var(--sp-3) * -1); left: 50%; transform: translateX(-50%);
  font-size: var(--text-xs); font-weight: var(--weight-semi);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-contrast);
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: 0 3px 12px var(--accent-glow);
}
.tier-name { font-size: var(--text-lg); letter-spacing: -.022em; }
.tier-for  { font-size: var(--text-sm); color: var(--ink-faint); margin-top: var(--sp-1); }

.price { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.price .amount {
  font-size: var(--text-3xl); font-weight: var(--weight-bold);
  letter-spacing: -.04em; line-height: 1;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.price .per { font-size: var(--text-sm); color: var(--ink-mute); }

/* Placeholder pricing marker. Prices are NOT set — this styling exists so the
   unset state is unmistakable on the page rather than reading as a real figure. */
.price-tbc {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: var(--weight-semi);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--warning); background: var(--warning-subtle);
  border: 1px dashed color-mix(in srgb, var(--warning) 42%, transparent);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
}
.tier-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.tier-list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--text-base); color: var(--ink-dim); line-height: 1.55; }
.tier-list svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; stroke: var(--accent-bright); stroke-width: 2.4; fill: none; }
.tier-list li.off { color: var(--ink-mute); }
.tier-list li.off svg { stroke: var(--ink-mute); }

.notice {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--warning-subtle);
  border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--text-base); line-height: 1.6; color: var(--ink-dim);
}
.notice svg { width: 17px; height: 17px; stroke: var(--warning); stroke-width: 2; fill: none; flex-shrink: 0; margin-top: 2px; }
.notice b { color: var(--ink); font-weight: var(--weight-semi); }

/* ══ FAQ ═════════════════════════════════════════════════════════════════ */

.faq { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 800px; margin-inline: auto; }
.faq details {
  background: var(--panel);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.faq details[open] { border-color: var(--edge); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--text-md); font-weight: var(--weight-semi);
  letter-spacing: -.015em;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  transition: background var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--panel-hover); }
.faq summary::after {
  content: ""; flex-shrink: 0;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq .answer { padding: 0 var(--sp-6) var(--sp-5); color: var(--ink-dim); line-height: 1.7; }
.faq .answer p + p { margin-top: var(--sp-3); }

/* ══ CTA BAND ════════════════════════════════════════════════════════════ */

.cta {
  position: relative; overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: clamp(var(--sp-10), 6vw, 72px) var(--sp-6);
  text-align: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel));
}
.cta > * { position: relative; z-index: 2; }
.cta h2 { margin-bottom: var(--sp-4); }
.cta p { color: var(--ink-dim); font-size: var(--text-md); max-width: 54ch; margin: 0 auto var(--sp-8); line-height: 1.65; }
.cta .btn-row { justify-content: center; }

/* ══ FORM ════════════════════════════════════════════════════════════════ */

.form-grid { display: grid; gap: clamp(var(--sp-8), 5vw, 64px); align-items: start; }
@media (min-width: 940px) { .form-grid { grid-template-columns: 1.05fr .95fr; } }

.form-card {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  box-shadow: var(--shadow);
}
form { display: flex; flex-direction: column; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field-pair { display: grid; gap: var(--sp-5); }
@media (min-width: 620px) { .field-pair { grid-template-columns: repeat(2, 1fr); } }

label {
  font-size: var(--text-xs); font-weight: var(--weight-semi);
  letter-spacing: .075em; text-transform: uppercase; color: var(--ink-faint);
}
label .req { color: var(--accent-bright); }

input, select, textarea {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--field-edge);
  border-radius: var(--radius);
  padding: var(--sp-3);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { resize: vertical; min-height: 128px; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--ink-mute); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3.5px var(--accent-subtle);
}
select {
  appearance: none; cursor: pointer;
  /* Chevron drawn with borders on the wrapper instead of a background image —
     an inline SVG data URI cannot take a token colour, and a hex here would
     break the one rule. */
  padding-right: var(--sp-10);
}
.select-wrap { position: relative; display: flex; flex-direction: column; }
.select-wrap::after {
  content: ""; position: absolute; right: var(--sp-4); top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.hint { font-size: var(--text-sm); color: var(--ink-mute); line-height: 1.5; }

.consent { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.consent input {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
  padding: 0; accent-color: var(--accent); cursor: pointer;
}
.consent span { font-size: var(--text-sm); color: var(--ink-dim); line-height: 1.55; text-transform: none; letter-spacing: normal; font-weight: var(--weight-normal); }

.form-status {
  display: none; gap: var(--sp-3); align-items: flex-start;
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm); line-height: 1.55;
}
.form-status.is-shown { display: flex; }
.form-status.info { background: var(--info-subtle); border: 1px solid color-mix(in srgb, var(--info) 32%, transparent); color: var(--ink-dim); }
.form-status.bad  { background: var(--danger-subtle); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--ink-dim); }
.form-status svg { width: 15px; height: 15px; stroke-width: 2; fill: none; flex-shrink: 0; margin-top: 2px; }
.form-status.info svg { stroke: var(--info); }
.form-status.bad svg  { stroke: var(--danger); }
.form-status b { color: var(--ink); font-weight: var(--weight-semi); }

/* Contact details column */
.contact-aside { display: flex; flex-direction: column; gap: var(--sp-5); }
.contact-item {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5);
  background: var(--panel);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-md);
}
.contact-item h3 { font-size: var(--text-base); margin-bottom: var(--sp-1); letter-spacing: -.015em; }
.contact-item p, .contact-item a { font-size: var(--text-base); color: var(--ink-dim); line-height: 1.6; text-decoration: none; }
.contact-item a:hover { color: var(--accent-bright); text-decoration: underline; }

/* ══ 404 ═════════════════════════════════════════════════════════════════ */

.notfound {
  position: relative; overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  display: grid; place-items: center;
  padding-block: var(--sp-16);
  text-align: center;
}
.notfound .shell { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.notfound .code {
  font-family: var(--font-mono);
  font-size: clamp(64px, 16vw, 132px);
  font-weight: 700; line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(150deg, var(--accent-bright), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .92;
}
.notfound p { color: var(--ink-dim); font-size: var(--text-md); max-width: 46ch; line-height: 1.65; }
.notfound-links {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  justify-content: center;
  margin-top: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--edge-soft);
  width: 100%; max-width: 520px;
  font-size: var(--text-sm);
}
.notfound-links a { color: var(--ink-faint); text-decoration: none; }
.notfound-links a:hover { color: var(--accent-bright); text-decoration: underline; }

/* ══ PAGE HEAD (inner pages) ═════════════════════════════════════════════ */

.page-head {
  position: relative; overflow: hidden;
  padding-block: clamp(var(--sp-12), 7vw, 84px) clamp(var(--sp-8), 5vw, var(--sp-16));
  border-bottom: 1px solid var(--edge-soft);
}
.page-head .shell { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }

/* ══ FOOTER ══════════════════════════════════════════════════════════════ */

.site-footer {
  border-top: 1px solid var(--edge-soft);
  padding-block: var(--sp-12) var(--sp-8);
  margin-top: var(--sp-8);
}
.footer-grid {
  display: grid; gap: var(--sp-8);
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-10);
}
@media (min-width: 700px)  { .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.7fr repeat(3, 1fr); } }

.footer-brand { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 34ch; }
.footer-brand p { font-size: var(--text-sm); color: var(--ink-faint); line-height: 1.7; }

.footer-col h4 {
  font-size: var(--text-xs); font-weight: var(--weight-semi);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a {
  font-size: var(--text-base); color: var(--ink-dim); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--accent-bright); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  align-items: center; justify-content: space-between;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--edge-soft);
  font-size: var(--text-sm); color: var(--ink-mute);
}
.footer-bottom p { line-height: 1.6; }

/* Theme switcher in the footer — the app ships four themes, so the marketing
   site demonstrates them rather than describing them. */
.theme-picker { display: flex; align-items: center; gap: var(--sp-2); }
.theme-picker .label { font-size: var(--text-xs); color: var(--ink-mute); letter-spacing: .04em; }
.swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; padding: 0;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.swatch:hover { transform: scale(1.13); }
.swatch[aria-pressed="true"] { border-color: var(--ink); }
/* The only hex values on this site, and they are unavoidable: a swatch must
   paint a theme it is NOT currently in, so it cannot read that theme's tokens.
   Each is a literal copy of --panel and --accent from the theme it selects. */
.sw-slate    { background: linear-gradient(135deg, #131c31 46%, #2563eb 46%); }
.sw-midnight { background: linear-gradient(135deg, #161b22 46%, #c9a227 46%); }
.sw-emerald  { background: linear-gradient(135deg, #0d1f19 46%, #0f9d63 46%); }
.sw-daylight { background: linear-gradient(135deg, #ffffff 46%, #1d4ed8 46%); }

/* ══ SCROLL REVEAL ═══════════════════════════════════════════════════════ */
/* Elements marked [data-reveal] start displaced and are released by an
   IntersectionObserver adding .is-in. The `no-js`/no-observer path leaves them
   visible: the initial hidden state is applied by JS (html.reveal-ready), so
   content is never trapped invisible if the script fails. */

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .72s var(--ease-out), transform .72s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ══ REDUCED MOTION ══════════════════════════════════════════════════════ */
/* Every animation on this site is decorative. Under reduced motion they are
   removed outright rather than shortened, and the states they animate towards
   are pinned to their finished values so nothing is left mid-transition. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
  .bar i { width: 100%; }
  .wm    { opacity: .95; transform: none; }
  .step  { color: var(--ink-dim); }
  .step i { border-color: var(--accent); background: var(--accent); }
  .step svg { opacity: 1; }
  .sweep { opacity: 0; }
}

/* ══ PRINT ═══════════════════════════════════════════════════════════════ */

@media print {
  /* Force the daylight palette regardless of the theme on screen — printing a
     dark theme wastes a cartridge and reads badly. Rather than hardcoding white
     and black (which would break the one rule), the daylight token values are
     re-declared here, so a change to that theme carries into print too. */
  :root, :root[data-theme] {
    color-scheme: light;
    --ground: #f6f8fc; --panel: #ffffff; --panel-raised: #ffffff; --panel-hover: #eff3fa;
    --edge: #d8e0ee; --edge-soft: #e8edf6; --edge-strong: #b9c6dd;
    --accent: #1d4ed8; --accent-bright: #2563eb; --accent-hover: #1a45c0;
    --accent-contrast: #ffffff; --accent-subtle: rgba(37, 99, 235, .09);
    --accent-glow: rgba(37, 99, 235, .16);
    --ink: #101828; --ink-dim: #475467; --ink-faint: #667085; --ink-mute: #98a2b3;
    --shadow-sm: none; --shadow: none; --shadow-lg: none;
  }

  .site-header, .mobile-nav, .sky, .cta, .theme-picker, .skip { display: none !important; }

  body { background: var(--panel); color: var(--ink); }

  /* Cards and mocks flatten to outlines — filled panels print as grey slabs. */
  .card, .tier, .mock, .demo, .split-card, .flow-step, .contact-item, .form-card {
    background: none !important;
    box-shadow: none !important;
    border-color: var(--edge-strong) !important;
    break-inside: avoid;
  }

  /* An href is invisible on paper; print the destination after the link text. */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; color: var(--ink-faint); }

  .faq details { break-inside: avoid; }
  .faq details > .answer { display: block; }   /* print answers even when collapsed */
}