/* ============================================================================
   Ocean Green — marketing site
   Reuses the app's design tokens (development_v3/crates/agency-app/styles/tokens.css,
   plan.md §13.0) so the site and the product feel like one system. Dark-first,
   blue accent, SF system fonts, 8pt grid. Extended here with a marketing-only
   "ocean-green" brand gradient (honours the brand name) and landing-scale type.
   No external fonts/CDN — privacy-friendly (GDPR/DSGVO), no third-party calls.
   ========================================================================== */

/* ---- Tokens (mirrored from the app + marketing extensions) --------------- */
:root {
  /* Spacing — 8pt grid */
  --space-1: 2px;  --space-2: 4px;  --space-3: 8px;  --space-4: 12px;
  --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px;
  --space-9: 40px; --space-10: 48px; --space-12: 64px; --space-14: 80px;
  --space-16: 96px; --space-20: 128px;
  /* Radii */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px;
  --radius-xl: 28px; --radius-pill: 999px;
  /* Type */
  --font-text: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", monospace;
  --fs-caption: 12px; --fs-footnote: 13px; --fs-subhead: 15px; --fs-body: 17px;
  --fs-title3: 20px; --fs-title2: 22px; --fs-title1: 28px; --fs-large: 34px;
  --fs-display: clamp(38px, 6vw, 68px); --fs-hero-sub: clamp(17px, 2.2vw, 22px);
  --fs-section: clamp(28px, 4vw, 44px);
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5;
  /* Colour — dark theme (app default) */
  --c-bg-0: #0a0b0d; --c-bg-1: #121419; --c-bg-2: #1a1d24; --c-surface: #1f232b;
  --c-separator: #2a2f39; --c-text: #f2f4f8; --c-text-2: #aab2c0; --c-text-3: #8b95a5;
  --c-accent: #5b8cff; --c-pos: #34c759; --c-neg: #ff453a; --c-warn: #ff9f0a;
  --c-info: #64d2ff;
  /* Marketing brand — ocean green → accent blue */
  --brand-green: #16c79a; --brand-teal: #17b0c4; --brand-blue: #5b8cff;
  --brand-grad: linear-gradient(120deg, var(--brand-green), var(--brand-teal) 45%, var(--brand-blue));
  --brand-grad-soft: linear-gradient(120deg, color-mix(in srgb, var(--brand-green) 22%, transparent), color-mix(in srgb, var(--brand-blue) 22%, transparent));
  /* Elevation / effects */
  --shadow-1: 0 1px 2px rgba(0,0,0,.28);
  --shadow-2: 0 8px 30px rgba(0,0,0,.35);
  --shadow-3: 0 24px 70px rgba(0,0,0,.45);
  --glow-brand: 0 0 60px color-mix(in srgb, var(--brand-teal) 40%, transparent);
  --blur-material: saturate(180%) blur(20px);
  --hairline: 1px solid var(--c-separator);
  /* Motion */
  --motion-fast: 150ms; --motion-base: 260ms; --ease-spring: cubic-bezier(.2,.8,.2,1);
  --maxw: 1180px;
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: -0.02em; font-weight: var(--fw-bold); }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; display: block; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 3px; border-radius: var(--radius-xs); }
::selection { background: color-mix(in srgb, var(--brand-teal) 40%, transparent); }

/* ---- Layout helpers ------------------------------------------------------ */
.wrap { width: min(100% - var(--space-8), var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--space-20); position: relative; }
.section--tight { padding-block: var(--space-14); }
.eyebrow {
  font-size: var(--fs-footnote); font-weight: var(--fw-semibold);
  letter-spacing: .12em; text-transform: uppercase;
  color: transparent; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text;
}
.section-head { max-width: 720px; margin-bottom: var(--space-12); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-title { font-size: var(--fs-section); margin-top: var(--space-3); }
.section-sub { color: var(--c-text-2); font-size: var(--fs-hero-sub); margin-top: var(--space-5); line-height: var(--lh-snug); }
.grad-text { color: transparent; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-text); font-size: var(--fs-subhead); font-weight: var(--fw-semibold);
  padding: var(--space-4) var(--space-7); border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; transition: transform var(--motion-fast) var(--ease-spring), box-shadow var(--motion-base), background var(--motion-base), border-color var(--motion-base);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { color: #05131a; background: var(--brand-grad); box-shadow: var(--shadow-2), var(--glow-brand); }
.btn--primary:hover { box-shadow: var(--shadow-3), var(--glow-brand); transform: translateY(-1px); }
.btn--ghost { color: var(--c-text); background: color-mix(in srgb, var(--c-surface) 70%, transparent); border-color: var(--c-separator); }
.btn--ghost:hover { border-color: color-mix(in srgb, var(--brand-teal) 60%, var(--c-separator)); background: var(--c-surface); }
.btn--lg { padding: var(--space-5) var(--space-9); font-size: var(--fs-body); }
.btn--block { width: 100%; justify-content: center; }

/* ---- Nav ----------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: var(--blur-material); -webkit-backdrop-filter: var(--blur-material);
  background: color-mix(in srgb, var(--c-bg-0) 72%, transparent);
  border-bottom: 1px solid transparent; transition: border-color var(--motion-base), background var(--motion-base);
}
.nav.scrolled { border-bottom: var(--hairline); background: color-mix(in srgb, var(--c-bg-0) 88%, transparent); }
.nav__inner { display: flex; align-items: center; gap: var(--space-7); height: 64px; }
.brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-title3); letter-spacing: -.02em; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.nav__links { display: flex; gap: var(--space-2); margin-left: auto; align-items: center; }
.nav__links a.navlink { color: var(--c-text-2); font-size: var(--fs-subhead); font-weight: var(--fw-medium); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); transition: color var(--motion-fast), background var(--motion-fast); }
.nav__links a.navlink:hover { color: var(--c-text); background: var(--c-bg-2); }
.nav__cta { margin-left: var(--space-3); }
.nav__toggle { display: none; margin-left: auto; background: none; border: 0; color: var(--c-text); padding: var(--space-3); cursor: pointer; }
.nav__toggle svg { width: 26px; height: 26px; }

@media (max-width: 880px) {
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: var(--space-2); padding: var(--space-5); margin: 0;
    background: color-mix(in srgb, var(--c-bg-1) 96%, transparent);
    backdrop-filter: var(--blur-material); -webkit-backdrop-filter: var(--blur-material);
    border-bottom: var(--hairline);
    transform: translateY(-120%); transition: transform var(--motion-base) var(--ease-spring); visibility: hidden;
  }
  .nav__links.open { transform: translateY(0); visibility: visible; }
  .nav__links a.navlink { padding: var(--space-4) var(--space-4); font-size: var(--fs-body); }
  .nav__links .btn { display: inline-flex; margin-top: var(--space-3); }
}

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; padding-block: var(--space-16) var(--space-12); overflow: hidden; }
.hero__glow {
  position: absolute; inset: -20% -10% auto -10%; height: 640px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 60% at 20% 10%, color-mix(in srgb, var(--brand-green) 30%, transparent), transparent 70%),
    radial-gradient(50% 50% at 85% 0%, color-mix(in srgb, var(--brand-blue) 32%, transparent), transparent 70%);
  filter: blur(30px); opacity: .8;
}
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(var(--c-separator) 1px, transparent 1px), linear-gradient(90deg, var(--c-separator) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%);
}
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-12); align-items: center; }
.hero__copy { max-width: 620px; }
.pill {
  display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--c-separator); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-surface) 60%, transparent);
  font-size: var(--fs-footnote); color: var(--c-text-2); font-weight: var(--fw-medium);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-pos); box-shadow: 0 0 10px var(--c-pos); }
.hero h1 { font-size: var(--fs-display); margin-top: var(--space-6); }
.hero__sub { font-size: var(--fs-hero-sub); color: var(--c-text-2); margin-top: var(--space-6); line-height: var(--lh-snug); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-9); }
.hero__note { margin-top: var(--space-5); font-size: var(--fs-footnote); color: var(--c-text-3); }
.hero__visual { position: relative; display: flex; justify-content: center; }

/* ---- Marquee / trust ----------------------------------------------------- */
.trust { border-block: var(--hairline); background: color-mix(in srgb, var(--c-bg-1) 60%, transparent); }
.trust__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-5) var(--space-9); padding-block: var(--space-7); }
.trust__item { display: flex; align-items: center; gap: var(--space-3); color: var(--c-text-2); font-size: var(--fs-subhead); font-weight: var(--fw-medium); }
.trust__item svg { width: 18px; height: 18px; color: var(--brand-teal); flex: none; }

/* ---- Stat band ----------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.stat { padding: var(--space-8); border: var(--hairline); border-radius: var(--radius-lg); background: var(--brand-grad-soft); }
.stat__num { font-family: var(--font-display); font-size: var(--fs-large); font-weight: var(--fw-bold); }
.stat__label { color: var(--c-text-2); font-size: var(--fs-subhead); margin-top: var(--space-2); }

/* ---- Feature cards ------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.card {
  padding: var(--space-8); border: var(--hairline); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--c-bg-1), var(--c-bg-0));
  transition: transform var(--motion-base) var(--ease-spring), border-color var(--motion-base), box-shadow var(--motion-base);
}
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand-teal) 45%, var(--c-separator)); box-shadow: var(--shadow-2); }
.card__icon {
  width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--brand-grad-soft); border: 1px solid color-mix(in srgb, var(--brand-teal) 30%, var(--c-separator));
  margin-bottom: var(--space-6);
}
.card__icon svg { width: 24px; height: 24px; color: var(--brand-teal); }
.card h3 { font-size: var(--fs-title3); }
.card p { color: var(--c-text-2); font-size: var(--fs-subhead); margin-top: var(--space-3); line-height: var(--lh-normal); }

/* ---- iPhone mockups ------------------------------------------------------ */
.gallery-group { margin-top: var(--space-12); }
.gallery-group__head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); padding-bottom: var(--space-5); border-bottom: var(--hairline); }
.gallery-group__head h3 { font-size: var(--fs-title1); }
.gallery-group__head p { color: var(--c-text-3); font-size: var(--fs-subhead); }
.phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-9) var(--space-7); justify-items: center; }

.phone {
  --bezel: 12px;
  width: 244px; aspect-ratio: 245 / 510; position: relative;
  border-radius: 46px; padding: var(--bezel);
  background: linear-gradient(160deg, #2b2f37, #0d0f13);
  box-shadow: var(--shadow-3), inset 0 0 0 1.5px rgba(255,255,255,.06);
}
.phone::before { /* side buttons */
  content: ""; position: absolute; left: -3px; top: 120px; width: 3px; height: 64px;
  border-radius: 3px; background: #23262d;
  box-shadow: 0 -84px 0 #23262d, 0 84px 0 0 transparent;
}
.phone__screen {
  position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, var(--c-bg-2), var(--c-bg-0));
  display: flex; flex-direction: column;
}
.phone__island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 82px; height: 24px; border-radius: var(--radius-pill); background: #000;
}
/* Screenshot slot — replace the .todo block with <img src="..."> when ready */
.shot-slot {
  flex: 1; margin: 0; display: flex; flex-direction: column;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 10px, color-mix(in srgb, var(--brand-teal) 6%, transparent) 10px, color-mix(in srgb, var(--brand-teal) 6%, transparent) 20px),
    var(--c-bg-1);
}
.shot-slot img { width: 100%; height: 100%; object-fit: cover; }
.todo {
  flex: 1; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6) var(--space-5); text-align: center; justify-content: center; align-items: center;
  border: 1.5px dashed color-mix(in srgb, var(--brand-teal) 55%, var(--c-separator));
  margin: var(--space-4); border-radius: var(--radius-md);
}
.todo__tag { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: #05131a; background: var(--brand-grad); padding: 3px 9px; border-radius: var(--radius-pill); }
.todo__title { font-size: var(--fs-footnote); font-weight: var(--fw-semibold); color: var(--c-text); line-height: var(--lh-snug); }
.todo__desc { font-size: var(--fs-caption); color: var(--c-text-3); line-height: var(--lh-snug); }
.phone__caption { text-align: center; margin-top: var(--space-5); }
.phone__caption strong { display: block; font-size: var(--fs-subhead); font-weight: var(--fw-semibold); }
.phone__caption span { font-size: var(--fs-footnote); color: var(--c-text-3); }
.phone-wrap { display: flex; flex-direction: column; align-items: center; }
.phone-wrap:nth-child(even) .phone { transform: translateY(14px); }

/* ---- How it works -------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); counter-reset: step; }
.step { position: relative; padding: var(--space-8) var(--space-6); border: var(--hairline); border-radius: var(--radius-lg); background: var(--c-bg-1); }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: var(--fw-bold); color: #05131a; background: var(--brand-grad); margin-bottom: var(--space-5); }
.step h3 { font-size: var(--fs-title3); }
.step p { color: var(--c-text-2); font-size: var(--fs-subhead); margin-top: var(--space-3); }

/* ---- Compliance section -------------------------------------------------- */
.compliance { border: var(--hairline); border-radius: var(--radius-xl); background: linear-gradient(180deg, color-mix(in srgb, var(--c-bg-1) 90%, var(--brand-teal) 4%), var(--c-bg-0)); padding: clamp(var(--space-8), 5vw, var(--space-14)); }
.compliance__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-9); margin-top: var(--space-9); }
.checkitem { display: flex; gap: var(--space-4); }
.checkitem svg { width: 22px; height: 22px; color: var(--brand-green); flex: none; margin-top: 2px; }
.checkitem strong { font-weight: var(--fw-semibold); }
.checkitem p { color: var(--c-text-2); font-size: var(--fs-subhead); margin-top: var(--space-1); }

/* ---- Pricing ------------------------------------------------------------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: var(--space-9) var(--space-8); border: var(--hairline); border-radius: var(--radius-xl); background: var(--c-bg-1); }
.plan--featured { border-color: color-mix(in srgb, var(--brand-teal) 55%, var(--c-separator)); box-shadow: var(--shadow-2), var(--glow-brand); background: linear-gradient(180deg, color-mix(in srgb, var(--c-bg-1) 82%, var(--brand-teal) 8%), var(--c-bg-1)); position: relative; }
.plan__badge { position: absolute; top: calc(-1 * var(--space-4)); left: 50%; transform: translateX(-50%); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: #05131a; background: var(--brand-grad); padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill); }
.plan h3 { font-size: var(--fs-title2); }
.plan__price { font-family: var(--font-display); font-size: var(--fs-large); font-weight: var(--fw-bold); margin-top: var(--space-4); }
.plan__price span { font-size: var(--fs-subhead); font-weight: var(--fw-regular); color: var(--c-text-3); }
.plan__desc { color: var(--c-text-2); font-size: var(--fs-footnote); margin-top: var(--space-3); min-height: 34px; }
.plan ul { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-7) 0; }
.plan li { display: flex; gap: var(--space-3); font-size: var(--fs-subhead); color: var(--c-text); }
.plan li svg { width: 18px; height: 18px; color: var(--brand-green); flex: none; margin-top: 3px; }
.plan .btn { margin-top: auto; }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: var(--hairline); }
.faq__q { width: 100%; text-align: left; background: none; border: 0; color: var(--c-text); cursor: pointer; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-title3); padding: var(--space-7) var(--space-9) var(--space-7) 0; position: relative; display: flex; justify-content: space-between; gap: var(--space-5); align-items: center; }
.faq__q::after { content: "+"; font-weight: var(--fw-regular); font-size: 28px; color: var(--brand-teal); transition: transform var(--motion-base) var(--ease-spring); line-height: 1; }
.faq__item.open .faq__q::after { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--motion-base) var(--ease-spring); }
.faq__a p { color: var(--c-text-2); font-size: var(--fs-subhead); padding-bottom: var(--space-7); line-height: var(--lh-normal); }

/* ---- CTA band ------------------------------------------------------------ */
.cta-band { position: relative; text-align: center; border: var(--hairline); border-radius: var(--radius-xl); padding: clamp(var(--space-10), 6vw, var(--space-16)); overflow: hidden; background: var(--c-bg-1); }
.cta-band__glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--brand-teal) 26%, transparent), transparent 70%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--fs-section); }
.cta-band p { color: var(--c-text-2); font-size: var(--fs-hero-sub); margin: var(--space-5) auto 0; max-width: 560px; }
.cta-band .hero__actions { justify-content: center; }
.store-badges { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--space-8); }
.store-badge { display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-7); border: var(--hairline); border-radius: var(--radius-md); background: var(--c-bg-0); transition: border-color var(--motion-base), transform var(--motion-fast); }
.store-badge:hover { border-color: color-mix(in srgb, var(--brand-teal) 55%, var(--c-separator)); transform: translateY(-2px); }
.store-badge svg { width: 26px; height: 26px; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-badge small { font-size: 10px; color: var(--c-text-3); }
.store-badge b { font-size: var(--fs-subhead); font-weight: var(--fw-semibold); }

/* ---- Footer -------------------------------------------------------------- */
.footer { border-top: var(--hairline); background: var(--c-bg-1); padding-block: var(--space-14) var(--space-9); margin-top: var(--space-16); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-9); }
.footer__brand p { color: var(--c-text-3); font-size: var(--fs-footnote); margin-top: var(--space-5); max-width: 320px; }
.footer h4 { font-family: var(--font-text); font-size: var(--fs-footnote); text-transform: uppercase; letter-spacing: .1em; color: var(--c-text-3); font-weight: var(--fw-semibold); margin-bottom: var(--space-5); }
.footer ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer a { color: var(--c-text-2); font-size: var(--fs-subhead); transition: color var(--motion-fast); }
.footer a:hover { color: var(--c-text); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); justify-content: space-between; align-items: center; margin-top: var(--space-12); padding-top: var(--space-7); border-top: var(--hairline); color: var(--c-text-3); font-size: var(--fs-footnote); }
.footer__bottom .disclaimer { max-width: 720px; }

/* ---- Legal / content pages ----------------------------------------------- */
.legal { padding-block: var(--space-12) var(--space-14); }
.legal__head { max-width: var(--maxw); }
.legal__head h1 { font-size: var(--fs-large); }
.legal__head .updated { color: var(--c-text-3); font-size: var(--fs-footnote); margin-top: var(--space-4); }
.prose { max-width: 780px; margin-top: var(--space-10); }
.prose h2 { font-size: var(--fs-title1); margin-top: var(--space-12); margin-bottom: var(--space-4); }
.prose h3 { font-size: var(--fs-title3); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose p, .prose li { color: var(--c-text-2); font-size: var(--fs-body); line-height: var(--lh-normal); }
.prose p { margin-top: var(--space-4); }
.prose ul { list-style: disc; padding-left: var(--space-8); margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.prose a { color: var(--brand-teal); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--c-text); }
.callout { border: 1px solid color-mix(in srgb, var(--brand-teal) 40%, var(--c-separator)); background: var(--brand-grad-soft); border-radius: var(--radius-md); padding: var(--space-6); margin-top: var(--space-7); }
.callout p { color: var(--c-text); font-size: var(--fs-subhead); margin-top: 0; }
.todo-inline { border: 1.5px dashed var(--c-warn); background: color-mix(in srgb, var(--c-warn) 10%, transparent); border-radius: var(--radius-sm); padding: var(--space-5); margin-top: var(--space-5); }
.todo-inline p { color: var(--c-text); font-size: var(--fs-subhead); margin-top: 0; }
.todo-inline strong { color: var(--c-warn); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin-top: var(--space-9); }
.contact-card { border: var(--hairline); border-radius: var(--radius-lg); padding: var(--space-7); background: var(--c-bg-1); }
.contact-card h3 { font-size: var(--fs-title3); }
.contact-card p { color: var(--c-text-2); font-size: var(--fs-subhead); margin-top: var(--space-3); }
.contact-card a { color: var(--brand-teal); }
.status-line { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--fs-subhead); color: var(--c-text-2); margin-top: var(--space-4); }
.status-line .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-pos); box-shadow: 0 0 10px var(--c-pos); }

/* ---- Reveal animation ---------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease-spring); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .phone-wrap:nth-child(even) .phone { transform: none; } }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero__visual { order: -1; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .compliance__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-9) var(--space-7); }
}
@media (max-width: 560px) {
  :root { --maxw: 100%; }
  .section { padding-block: var(--space-14); }
  .features, .stats, .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .wrap { width: min(100% - var(--space-6), var(--maxw)); }
}