/* ============================================================
   Estura — marketing stylesheet  (v3 · mobile-first rebuild)
   One source of truth for tokens + components. Every page uses
   these classes; pages carry NO layout CSS of their own.

   Responsive strategy (why this one doesn't break):
     • MOBILE-FIRST — base rules target the phone; min-width media
       queries only ADD at larger sizes. Nothing is "undone".
     • Intrinsic grids — card rows use
       repeat(auto-fit, minmax(min(100%, N), 1fr)) so they reflow
       on their own; almost no per-breakpoint column juggling.
     • Fluid type & spacing via clamp() — scales, never jumps.
     • No fixed heights on anything that holds flowing content.
     • Selectors are scoped (e.g. `header nav`, never bare `nav`).

   Aesthetic mirrors the desktop app (src/renderer/src/index.css):
   Inter throughout, one emerald accent, crisp hairline borders,
   near-white cards on a calm canvas, light-default (dark via toggle).
   Geist Mono only for tabular figures. NO gradients / glow / emoji.
   ============================================================ */

/* ---- Self-hosted fonts (no CDN — matches the privacy stance) ---- */
@font-face {
  font-family: "Inter Variable";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono Variable";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/geist-mono-variable.woff2") format("woff2");
}

/* ============================================================
   Tokens — LIGHT is the base :root; DARK via [data-theme="dark"].
   Values mirror the app 1:1 so site + product read as one system.
   ============================================================ */
:root {
  --paper-0: #FFFFFF;   /* elevated / floating   (app --bg-elevated) */
  --paper-1: #FCFCFD;   /* card                  (app --bg-surface)  */
  --paper-2: #EDEEF1;   /* page canvas           (app --bg-base)     */
  --paper-3: #EAEBEF;   /* inset / well          (app --bg-inset)    */
  --line-1:  #E5E7EC;   /* hairline border       (app --border)      */
  --line-2:  #C6CBD5;   /* strong control border (app --border-strong) */
  --edge-hi: transparent;

  --text-hi:  #16181E;
  --text-med: #4A515E;
  --text-lo:  #5B6270;

  --brand:        #059669;
  --brand-hover:  #047857;
  --brand-strong: #047857;
  --brand-fg:     #FFFFFF;
  --brand-subtle: #E7F4EC;

  --danger:  #DC2626;
  --warning: #B45309;

  /* legacy aliases (kept so component rules read naturally) */
  --hover: #EAEBEF;   /* hover/thead/keycap tint — darkens in light, LIGHTENS in dark */
  --bg: var(--paper-2); --surface: var(--paper-1); --elevated: var(--paper-0);
  --inset: var(--paper-3); --surface-2: var(--hover);
  --border: var(--line-1); --border-strong: var(--line-2);
  --text: var(--text-hi); --text-2: var(--text-med); --text-3: var(--text-lo);

  --font-body: "Inter Variable", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-body);
  --font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* One tight radius language, matching the app's 10px base — no mix of
     very-round and square. Pills reserved for genuine dots only. */
  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-pill: 999px;
  --r-ctl: 10px; --r-card: 10px;

  /* Crisp + flat like the app: hairline borders carry structure, shadows
     are a whisper. Nothing glossy. */
  --shadow-sm: 0 1px 2px rgb(20 22 30 / .05), 0 1px 3px -1px rgb(20 22 30 / .04);
  --shadow: 0 1px 2px rgb(20 22 30 / .05), 0 6px 16px -12px rgb(20 22 30 / .12);
  --shadow-lg: 0 1px 2px rgb(20 22 30 / .05), 0 14px 30px -20px rgb(20 22 30 / .14);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fast: cubic-bezier(0.4, 0, 0.2, 1);

  --wrap: 1140px;
  --header-h: 60px;
}

:root[data-theme="dark"] {
  /* A monotonic, cool, genuinely-layered dark scale: near-black canvas, cards/menus each
     step up ~+8 so they read above the ground, the inset well recesses BELOW the base, and
     text-lo is lifted to clear WCAG AA. Elevation comes from the lighter surfaces + a .06
     top-edge highlight (no glow). */
  --paper-2: #0D0E11; --paper-1: #15171B; --paper-0: #1D1F25; --paper-3: #090A0C;
  --line-1: #2B2E36; --line-2: #3C4049; --edge-hi: rgb(255 255 255 / .06);
  --hover: #202329;   /* hover LIGHTENS in dark, a touch above the card */

  --text-hi: #ECEEF2; --text-med: #A6ACB8; --text-lo: #949BA8;

  --brand: #10B981; --brand-hover: #34D399; --brand-strong: #34D399;
  --brand-fg: #05140E; --brand-subtle: #10261D;
  --danger: #F26D74; --warning: #FBBF24;

  /* With cards now lighter than the ground, these soft black shadows finally register. */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --shadow: 0 2px 6px rgb(0 0 0 / .45), 0 14px 30px -14px rgb(0 0 0 / .62);
  --shadow-lg: 0 4px 12px rgb(0 0 0 / .5), 0 30px 60px -22px rgb(0 0 0 / .72);
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "cv05", "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* belt-and-suspenders against any stray wide child */
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Container — fluid gutter, never overflows */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); }
.text-link { color: var(--brand-strong); font-weight: 600; }
.text-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  display: inline-flex; align-items: center; background: var(--brand); color: var(--brand-fg);
  font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: var(--r-ctl);
}
.skip-link:focus { left: 16px; top: 12px; }

/* ============================================================
   Section rhythm + headings (fluid)
   ============================================================ */
.section { padding-block: clamp(52px, 9vw, 104px); }
.section.tight { padding-block: clamp(40px, 6vw, 72px); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.022em; line-height: 1.1; text-wrap: balance; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-strong);
}
.eyebrow::before { content: ""; width: 16px; height: 1px; background: currentColor; opacity: .55; }

.section-head { max-width: 40ch; margin-inline: auto; margin-bottom: clamp(32px, 5vw, 52px); text-align: center; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { font-size: clamp(27px, 5vw, 40px); margin-bottom: 12px; }
.section-head p { color: var(--text-2); font-size: clamp(16px, 2.2vw, 18px); text-wrap: pretty; }
.section-cta { display: flex; justify-content: center; margin-top: clamp(32px, 5vw, 48px); }

/* Interior page header — bold oversized headline (matches the home hero's weight). */
.page-head { padding-top: clamp(52px, 9vw, 96px); padding-bottom: clamp(8px, 2vw, 16px); text-align: center; position: relative; isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: 0 0 auto; height: 360px; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(var(--border) 1px, transparent 1.4px); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 82%); mask-image: linear-gradient(180deg, #000, transparent 82%); }
.page-head .eyebrow { margin-bottom: 16px; }
.page-head h1 { font-size: clamp(34px, 7vw, 60px); letter-spacing: -.038em; line-height: 1.04; margin-inline: auto; max-width: 18ch; margin-bottom: 16px; }
.page-head p { color: var(--text-2); font-size: clamp(16px, 2.4vw, 19.5px); max-width: 60ch; margin-inline: auto; text-wrap: pretty; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px; line-height: 1;
  padding: 12px 20px; border-radius: var(--r-ctl); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: background .15s var(--ease-fast), border-color .15s var(--ease-fast), transform .12s var(--ease-fast), color .15s var(--ease-fast);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 1px 2px rgb(6 78 59 / .16); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-secondary, .btn-ghost, .btn-outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover, .btn-ghost:hover, .btn-outline:hover { background: var(--surface-2); border-color: var(--text-3); }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-sm { padding: 9px 15px; font-size: 14px; }

/* ============================================================
   Wordmark + badges
   ============================================================ */
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; letter-spacing: -.028em; font-size: 18px; }
/* Brand mark — the Estura "e", masked so it inherits the theme-aware --brand color. */
.dot { width: 20px; height: 20px; flex: none; background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Cpath d='M0 25L25 0L225 0L250 25L250 118.75L225 150L131.25 150L100 125L100 100L195 100L200 95L200 55L195 50L55 50L50 55L50 195L55 200L250 200L250 225L225 250L25 250L0 225L0 25Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Cpath d='M0 25L25 0L225 0L250 25L250 118.75L225 150L131.25 150L100 125L100 100L195 100L200 95L200 55L195 50L55 50L50 55L50 195L55 200L250 200L250 225L225 250L25 250L0 225L0 25Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  padding: 6px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); color: var(--text-2); background: var(--surface);
}
.badge .live { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
.badge-brand { color: var(--brand-strong); background: var(--brand-subtle); border-color: transparent; }

/* ============================================================
   Header / nav — mobile-first (hamburger); links appear ≥860px
   ============================================================ */
header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.3) blur(10px); -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease-fast), background .2s var(--ease-fast);
}
header.scrolled { border-bottom-color: var(--border); box-shadow: 0 6px 24px -18px rgb(20 22 30 / .28); }
header nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: var(--header-h); }
.nav-links { display: none; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--r-ctl); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-subscribe { display: none; }  /* header Subscribe shows ≥560px */

/* Mobile menu (details/summary) */
.nav-menu { position: relative; }
.nav-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-ctl); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary svg { width: 20px; height: 20px; }
.nav-menu[open] > summary { background: var(--surface-2); }
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: min(78vw, 260px);
  background: var(--elevated); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 8px; display: grid; gap: 2px; z-index: 60;
}
.nav-menu-panel a { padding: 12px 12px; border-radius: var(--r-ctl); color: var(--text-2); font-size: 15px; font-weight: 500; }
.nav-menu-panel a:hover, .nav-menu-panel a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.nav-menu-panel .divider { height: 1px; background: var(--border); margin: 6px 4px; }
.nav-menu-panel .btn { margin-top: 4px; }

@media (min-width: 560px) { .nav-subscribe { display: inline-flex; } }
@media (min-width: 860px) {
  .nav-links { display: flex; align-items: center; gap: 6px; }
  .nav-links a { position: relative; color: var(--text-2); font-size: 14.5px; font-weight: 500; padding: 7px 11px; transition: color .15s var(--ease-fast); }
  .nav-links a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: center; transition: transform .24s var(--ease); }
  .nav-links a:hover { color: var(--text); }
  .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
  .nav-links a[aria-current="page"] { color: var(--text); font-weight: 600; }
  .nav-menu { display: none; }
}

/* ============================================================
   Hero — single column on mobile, split ≥900px
   ============================================================ */
.hero { padding-top: clamp(36px, 7vw, 72px); padding-bottom: clamp(40px, 7vw, 72px); }
.hero-grid { display: grid; gap: clamp(32px, 6vw, 56px); align-items: center; }
.hero-copy { text-align: center; }
.hero-copy .eyebrow { margin-bottom: 18px; }
.hero-copy h1 { font-size: clamp(34px, 8vw, 60px); letter-spacing: -.038em; line-height: 1.03; margin-inline: auto; max-width: 15ch; }
.hero-copy h1 .accent { color: var(--brand); }
.hero-copy .lede { font-size: clamp(16.5px, 2.6vw, 20px); color: var(--text-2); margin: clamp(18px, 3vw, 24px) auto 0; max-width: 54ch; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(24px, 4vw, 32px); }
.cta-row .btn { flex: 1 1 auto; min-width: 0; }
.cta-note { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; margin-top: 18px; font-size: 13.5px; color: var(--text-3); }
.cta-note .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }

@media (min-width: 560px) { .cta-row .btn { flex: 0 0 auto; } }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.02fr 1.1fr; }
  .hero-copy { text-align: left; }
  .hero-copy h1, .hero-copy .lede { margin-inline: 0; }
  .hero-copy .eyebrow { justify-content: flex-start; }
  .cta-row, .cta-note { justify-content: flex-start; }
}

/* ============================================================
   Screenshot frame (.shot) — a clean app "window".
   Real 1440-wide captures crop to a readable region on phones
   (object-fit) and show in full on wider screens.
   ============================================================ */
.shot {
  border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge-hi); overflow: hidden;
}
.shot img { width: 100%; height: auto; }
/* Mobile crop: show the most legible slice instead of a tiny whole-desktop thumbnail */
.shot img[data-shot] { height: clamp(300px, 92vw, 440px); object-fit: cover; object-position: 0 0; }
.shot img[data-shot="pos"] { object-position: 100% 0; }
@media (min-width: 760px) { .shot img[data-shot] { height: auto; object-fit: fill; } }

.shot-link { display: block; position: relative; }
.shot-link .shot { transition: transform .2s var(--ease), border-color .2s var(--ease); }
.shot-link:hover .shot { transform: translateY(-3px); border-color: var(--border-strong); }
.shot-caption { display: flex; justify-content: center; margin-top: 12px; font-size: 13px; color: var(--text-3); }

/* ============================================================
   Generic card + auto-reflowing grids
   ============================================================ */
.card {
  border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi); padding: clamp(20px, 3vw, 26px);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 38%, var(--border)); box-shadow: var(--shadow); }
.grid { display: grid; gap: clamp(14px, 2vw, 18px); }
/* the workhorse: fills the row, wraps on its own, never overflows */
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Feature card */
.feat { transition: border-color .15s, transform .15s var(--ease); }
.feat:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.feat .ic { color: var(--brand); margin-bottom: 14px; }
.feat .ic svg { width: 22px; height: 22px; }
.feat h3 { font-size: 16.5px; letter-spacing: -.01em; margin-bottom: 6px; }
.feat p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }

/* Trust strip */
.trust { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; grid-template-columns: 1fr; }
.trust-item { display: flex; align-items: center; gap: 13px; padding: 18px 20px; border-top: 1px solid var(--border); }
.trust-item:first-child { border-top: none; }
.trust-item svg { width: 22px; height: 22px; color: var(--text-2); flex: none; }
.trust-item .t1 { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.trust-item .t2 { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
@media (min-width: 620px) { .trust { grid-template-columns: 1fr 1fr; } .trust-item:nth-child(2) { border-top: none; } .trust-item:nth-child(odd) { border-inline-start: none; } .trust-item:nth-child(even) { border-inline-start: 1px solid var(--border); } }
@media (min-width: 940px) { .trust { grid-template-columns: repeat(4, 1fr); } .trust-item { border-top: none; border-inline-start: 1px solid var(--border); } .trust-item:first-child { border-inline-start: none; } .trust-item:nth-child(even) { border-inline-start: 1px solid var(--border); } }

/* ============================================================
   Showcase — alternating screenshot + copy
   ============================================================ */
.showcase { display: grid; gap: clamp(44px, 8vw, 80px); }
.showcase-row { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
.showcase-copy .eyebrow { margin-bottom: 14px; }
.showcase-copy h3 { font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.025em; margin-bottom: 12px; }
.showcase-copy > p { color: var(--text-2); font-size: 16px; line-height: 1.6; margin-bottom: 16px; text-wrap: pretty; }
.checklist { list-style: none; padding: 0; display: grid; gap: 11px; }
.checklist li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: var(--text); }
.checklist li svg { flex: none; width: 18px; height: 18px; color: var(--brand); margin-top: 2px; }
@media (min-width: 880px) {
  .showcase-row { grid-template-columns: 1fr 1fr; }
  .showcase-row.flip .showcase-media { order: 2; }
}

/* ============================================================
   Steps (numbered) — auto grid
   ============================================================ */
.steps { display: grid; gap: clamp(14px, 2vw, 18px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: step; }
.step { counter-increment: step; }
.step .num {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border-strong);
  color: var(--brand-strong); background: var(--surface); display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 15px; margin-bottom: 14px;
}
.step .num::before { content: counter(step); }
.step h3 { font-size: 17px; letter-spacing: -.01em; margin-bottom: 7px; }
.step p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.step .k { font-family: var(--font-mono); font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }

/* ============================================================
   Pricing card
   ============================================================ */
.price-wrap { display: flex; justify-content: center; }
.price { width: 100%; max-width: 460px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); padding: clamp(24px, 4vw, 34px); position: relative; }
.price .tag { position: absolute; top: 22px; right: 22px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-strong); background: var(--brand-subtle); padding: 5px 10px; border-radius: var(--r-sm); }
.price .plan { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.price .amt { font-family: var(--font-display); font-size: clamp(44px, 11vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.price .amt small { font-size: 17px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.price .per { font-size: 14px; color: var(--text-2); margin-bottom: 20px; }
.price .checklist { margin-bottom: 24px; }
.price .btn { width: 100%; }
.price .fineprint { margin-top: 16px; font-size: 13px; color: var(--text-3); text-align: center; text-wrap: pretty; }

/* ============================================================
   FAQ (disclosure)
   ============================================================ */
.faq { max-width: 760px; margin-inline: auto; display: grid; gap: 12px; }
details.qa { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
details.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary .chev { flex: none; width: 20px; height: 20px; color: var(--text-3); transition: transform .2s; }
details.qa[open] summary .chev { transform: rotate(180deg); color: var(--brand); }
details.qa .ans { padding: 0 20px 20px; color: var(--text-2); font-size: 15px; line-height: 1.6; }
details.qa .ans a { color: var(--brand-strong); font-weight: 600; }

/* ============================================================
   Chip nav (in-page jump links / filters) — wraps freely
   ============================================================ */
.chipnav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--text-2);
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-ctl); padding: 8px 14px;
  transition: color .15s, border-color .15s, background .15s;
}
.chip:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.chip .n { display: grid; place-items: center; width: 21px; height: 21px; flex: none; border-radius: 6px; background: var(--brand-subtle); color: var(--brand-strong); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ============================================================
   Tables (spec / comparison)
   ============================================================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); }
table.table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
table.table th, table.table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--border); }
table.table thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); }
table.table tbody tr:last-child td { border-bottom: none; }
table.table td.num, table.table th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
table.table td.yes { color: var(--brand-strong); font-weight: 600; }
table.table td.no { color: var(--text-3); }

/* ============================================================
   Prose (legal + long-form)
   ============================================================ */
.prose { max-width: 720px; margin-inline: auto; color: var(--text-2); font-size: 16px; line-height: 1.7; }
.prose h2 { color: var(--text); font-size: 22px; margin: 36px 0 12px; }
.prose h3 { color: var(--text); font-size: 17px; font-weight: 700; margin: 26px 0 8px; }
.prose p, .prose ul, .prose ol { margin-bottom: 16px; text-wrap: pretty; }
.prose ul, .prose ol { padding-inline-start: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--brand-strong); font-weight: 600; }
.prose a:hover { text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text); font-weight: 700; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
.prose .lastupdated { font-size: 13.5px; color: var(--text-3); }

/* Info callout */
.note {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 22px;
  border: 1px solid var(--border); border-inline-start: 3px solid var(--brand); background: var(--surface);
  border-radius: var(--r-ctl); padding: 14px 16px; font-size: 14px; color: var(--text-2); line-height: 1.6; text-wrap: pretty;
}
.note svg { flex: none; width: 17px; height: 17px; color: var(--brand); margin-top: 1px; }
.note strong { color: var(--text); font-weight: 700; }
.note a { color: var(--brand-strong); font-weight: 600; }

/* ============================================================
   Form controls
   ============================================================ */
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.input, .textarea, .select {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-ctl); padding: 12px 14px;
  transition: border-color .15s, background .15s;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--brand); }
.textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: 13px; color: var(--text-3); }

/* ============================================================
   Closing CTA band
   ============================================================ */
.cta-band-inner { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); padding: clamp(32px, 6vw, 56px) clamp(22px, 5vw, 44px); text-align: center; }
.cta-band-inner h2 { font-size: clamp(25px, 4.5vw, 38px); margin-bottom: 12px; }
.cta-band-inner p { color: var(--text-2); font-size: clamp(16px, 2.2vw, 17px); max-width: 52ch; margin: 0 auto 24px; text-wrap: pretty; }
.cta-band-inner .cta-row { justify-content: center; }

/* ============================================================
   Footer
   ============================================================ */
footer { border-top: 1px solid var(--border); padding-block: clamp(44px, 6vw, 60px); }
.foot-top { display: grid; gap: 30px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.foot-brand { max-width: 340px; }
.foot-brand p { color: var(--text-2); font-size: 14px; margin-top: 12px; }
.foot-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--text-2); }
a.foot-status:hover { color: var(--text); }
.foot-status .live { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.foot-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 28px; }
.foot-col h4 { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.foot-col a { display: block; color: var(--text-2); font-size: 14px; margin-bottom: 10px; transition: color .15s; }
.foot-col a:hover { color: var(--text); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 22px; color: var(--text-3); font-size: 13.5px; }
.foot-bottom a { color: var(--text-2); }
.foot-bottom a:hover { color: var(--text); }
@media (min-width: 760px) { .foot-top { grid-template-columns: 1.2fr 2fr; gap: 48px; } }

/* ============================================================
   Motion — reveal on scroll (progressive; content visible w/o JS)
   ============================================================ */
.reveal { opacity: 1; }
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); will-change: opacity, transform; }
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js .reveal[style*="--i"] { transition-delay: calc(var(--i) * 55ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   Revamp design language (shared across every page) — bold hero, framed shots,
   big-number differentiators, price band, steps. Reusable .hx-* components.
   ============================================================================ */
.hx-hero { position: relative; padding-top: clamp(40px, 8vw, 92px); padding-bottom: clamp(28px, 5vw, 44px); text-align: center; overflow: hidden; }
.hx-hero::before { content: ""; position: absolute; inset: -20% 0 auto 0; height: 460px; z-index: 0;
  background: radial-gradient(60% 100% at 50% 0, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%); pointer-events: none; }
.hx-hero > * { position: relative; z-index: 1; }
.hx-hero .badge { margin-bottom: 22px; }
.hx-h1 { font-size: clamp(38px, 8.2vw, 74px); line-height: 1.02; letter-spacing: -.042em; font-weight: 800; max-width: 16ch; margin-inline: auto; text-wrap: balance; }
.hx-h1 .accent { color: var(--brand); }
.hx-lede { font-size: clamp(17px, 2.5vw, 21px); line-height: 1.55; color: var(--text-2); max-width: 58ch; margin: clamp(20px, 3vw, 26px) auto 0; text-wrap: pretty; }
.hx-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(26px, 4vw, 34px); }
.hx-cta .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .hx-cta .btn { flex: 0 0 auto; } }
.hx-note { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; align-items: center; margin-top: 18px; font-size: 13.5px; color: var(--text-3); }
.hx-note .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }

.hx-frame { max-width: 980px; margin: clamp(34px, 6vw, 56px) auto 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.hx-frame.narrow { max-width: 760px; }
.hx-frame-bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid var(--border); }
.hx-frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); flex: none; }
.hx-frame img { display: block; width: 100%; height: auto; }

.hx-why { display: grid; gap: clamp(14px, 2vw, 20px); grid-template-columns: 1fr; }
@media (min-width: 620px) { .hx-why { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .hx-why.four { grid-template-columns: repeat(4, 1fr); } .hx-why.three { grid-template-columns: repeat(3, 1fr); } }
.hx-why .card { padding: clamp(20px, 3vw, 28px); }
.hx-why .big { font-size: clamp(30px, 4.4vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--text); }
.hx-why .big.em { color: var(--brand); }
.hx-why h3 { font-size: 15px; font-weight: 700; margin: 14px 0 6px; }
.hx-why p { color: var(--text-2); font-size: 14.5px; line-height: 1.55; }

.hx-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: clamp(24px, 3vw, 32px); }
.hx-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: var(--r-pill); padding: 8px 15px; font-size: 14px; font-weight: 600; }

.hx-price { background: var(--brand-subtle); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 18px; padding: clamp(30px, 5vw, 48px); text-align: center; }
.hx-price .amt { font-size: clamp(46px, 8vw, 68px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--text); }
.hx-price .amt small { font-size: .34em; font-weight: 700; color: var(--text-2); letter-spacing: 0; }
.hx-price .sub { color: var(--text-2); font-size: clamp(15px, 2vw, 17px); margin-top: 14px; }
.hx-price .row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

.hx-steps { display: grid; gap: clamp(16px, 2.4vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .hx-steps { grid-template-columns: repeat(3, 1fr); } }
.hx-step .n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-subtle); color: var(--brand-strong); font-weight: 800; font-size: 15px; }
.hx-step h3 { font-size: 17px; font-weight: 700; margin: 15px 0 6px; }
.hx-step p { color: var(--text-2); font-size: 15px; line-height: 1.55; }

.hx-close { text-align: center; }
.hx-close h2 { font-size: clamp(28px, 5.5vw, 44px); letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
.hx-close p { color: var(--text-2); font-size: clamp(16px, 2.2vw, 18px); margin: 14px auto 0; max-width: 46ch; }

/* Lift the shared page-heads + screenshots so every page matches the home's boldness. */
.page-head h1 { font-weight: 800; letter-spacing: -.038em; }
.section-head h2 { font-weight: 800; letter-spacing: -.03em; }
.shot { box-shadow: var(--shadow-lg); }

/* ============================================================
   Elevation pass — depth on scroll, hover lift, visible focus.
   Shared, so every page gains it at once. Motion is guarded by
   the prefers-reduced-motion block above.
   ============================================================ */
:root[data-theme="dark"] header.scrolled { box-shadow: 0 12px 30px -20px rgb(0 0 0 / .6); }

/* Primary CTA: gentle lift + on-brand shadow on hover, press on active */
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 9px 22px -10px color-mix(in srgb, var(--brand) 60%, transparent); }
.btn-primary:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14); }
.btn-secondary:hover, .btn-ghost:hover, .btn-outline:hover { transform: translateY(-1px); }

/* Differentiator cards + chips lift toward the pointer */
.hx-why .card { transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.hx-why .card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.hx-chip { transition: color .15s, border-color .15s, background .15s, transform .15s var(--ease); }
.hx-chip:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); transform: translateY(-1px); }

/* Keyboard focus — visible, on-brand, consistent across every control */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, .chip:focus-visible, .hx-chip:focus-visible, .theme-toggle:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-ctl);
}
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }

/* ---- Product-screenshot lightbox (click a screenshot to zoom in) ------ */
img[data-shot] { cursor: zoom-in; }
a img[data-shot] { cursor: pointer; }   /* shots inside a link (the demo) keep link behaviour */
.lb-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: clamp(14px, 4vw, 48px);
  background: rgba(6, 8, 12, .8);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .18s ease;
}
.lb-overlay.is-open { opacity: 1; }
.lb-figure {
  position: relative; margin: 0; line-height: 0;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .65);
  transform: scale(.985); transition: transform .18s ease;
}
.lb-overlay.is-open .lb-figure { transform: none; }
.lb-figure img { display: block; width: auto; height: auto; max-width: min(1500px, 94vw); max-height: 90vh; border-radius: 13px; }
.lb-close {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--text); font: 600 22px/1 system-ui, -apple-system, sans-serif; cursor: pointer;
}
.lb-close:hover { background: var(--surface); }
@media (prefers-reduced-motion: reduce) { .lb-overlay, .lb-figure { transition: none; } }