/* ==========================================================================
   NovaleafAI — site stylesheet

   Design language: Apple Human Interface Guidelines, adapted for web.
     · SF Pro via the system font stack, semibold headlines, tight tracking
     · Apple's neutral surface palette (#f5f5f7 / #1d1d1f), brand green accent
     · Translucent "material" navigation bar with backdrop blur
     · Continuous large corner radii, 980px pill buttons
     · Depth from layered surfaces and hairlines, not heavy shadows
     · Generous vertical rhythm, content-forward layout

   Light and dark are both first-class: dark follows the system by default and
   a toggle in the nav overrides it, persisted to localStorage.

   TYPEFACE NOTE — the UI font is the system stack (SF Pro on Apple devices)
   because that is what makes this read as Apple. Familjen Grotesk is retained
   for the wordmark. To put Familjen Grotesk back across the whole site,
   change --font below to var(--font-brand). That is the only edit needed.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Type */
  --font-brand: 'Familjen Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
          'Helvetica Neue', 'Segoe UI', Roboto, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Light appearance (default) */
  --ground:      #ffffff;
  --surface:     #ffffff;
  --surface-2:   #f5f5f7;   /* Apple's signature secondary background */
  --surface-3:   #ebebed;
  --elevated:    #ffffff;
  --line:        #d2d2d7;   /* separator */
  --line-soft:   #e8e8ed;
  --text:        #1d1d1f;   /* label */
  --text-strong: #1d1d1f;
  /* Apple's own secondary/tertiary greys (#6e6e73 / #86868b) do not clear
     WCAG AA on white — #86868b lands at 3.6:1, and worse on the #f5f5f7
     sections. Both are darkened one step so captions, breadcrumbs, kickers
     and footer legal text pass at 4.5:1 while keeping the hierarchy. */
  --muted:       #5c5c60;   /* secondary label — 6.1:1 on #f5f5f7 */
  --faint:       #6e6e73;   /* tertiary label  — 4.7:1 on #f5f5f7 */

  /* Brand green — the logo mark and wordmark only, kept exactly on-brand. */
  --brand-green: #3bac56;

  /* UI accent — a deeper green so white button text clears WCAG AA (4.8:1).
     The vivid brand green fails contrast at these sizes, so the two are
     deliberately separate tokens rather than one compromised value. */
  --accent:      #1b8340;
  --accent-hover:#146830;
  --accent-text: #15733a;   /* 6.1:1 on white — safe for links and labels */
  --accent-soft: rgba(27, 131, 64, 0.10);
  --accent-line: rgba(27, 131, 64, 0.30);
  --on-accent:   #ffffff;

  --nav-bg:      rgba(255, 255, 255, 0.72);
  --nav-border:  rgba(0, 0, 0, 0.10);

  /* Appearance tokens. Every place the two themes differ structurally is
     expressed here rather than as a [data-theme='dark'] override, so the
     whole site themes correctly from the token block alone — including the
     prefers-color-scheme path, which has no data-theme attribute to match. */
  --fill:         #f5f5f7;   /* chips, badges, pills, inputs-on-dark, hovers */
  --fill-hover:   #ebebed;
  --panel:        #f5f5f7;   /* cards, tiles, CTA band, prev/next */
  --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --field-bg:     #ffffff;
  --field-border: #d2d2d7;
  --mock-border:  #e8e8ed;
  --err-bg:       rgba(215, 0, 21, 0.09);
  --sun-display:  block;
  --moon-display: none;

  --danger:      #d70015;
  --warn-line:   #b25e00;
  --warn-bg:     rgba(255, 159, 10, 0.12);

  /* Shape — Apple leans on large, near-continuous radii */
  --radius-xs:  8px;
  --radius-sm:  12px;
  --radius:     18px;
  --radius-lg:  28px;
  --radius-pill: 980px;

  /* Depth — restrained; most separation comes from surface colour */
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.10);

  --maxw: 1120px;
  --gutter: 22px;
  --nav-h: 52px;

  /* Motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

[data-theme='dark'] {
  --ground:      #000000;   /* Apple dark is true black */
  --surface:     #1d1d1f;
  --surface-2:   #161617;
  --surface-3:   #2c2c2e;
  --elevated:    #1d1d1f;
  --line:        #38383a;
  --line-soft:   #2a2a2c;
  --text:        #f5f5f7;
  --text-strong: #ffffff;
  --muted:       #a1a1a6;
  --faint:       #86868b;

  --brand-green: #58c66e;

  /* On black, a vivid green is the readable choice and dark text sits on it. */
  --accent:      #37d15f;
  --accent-hover:#5ce07d;
  --accent-text: #4fd76e;   /* 10.4:1 on black */
  --accent-soft: rgba(48, 209, 88, 0.15);
  --accent-line: rgba(48, 209, 88, 0.32);
  --on-accent:   #00340f;   /* 6.9:1 on --accent */

  --nav-bg:      rgba(22, 22, 23, 0.72);
  --nav-border:  rgba(255, 255, 255, 0.12);

  --fill:         #2c2c2e;
  --fill-hover:   #3a3a3c;
  --panel:        #1d1d1f;
  --panel-shadow: none;
  --field-bg:     #2c2c2e;
  --field-border: transparent;
  --mock-border:  #38383a;
  --err-bg:       rgba(255, 69, 58, 0.14);
  --sun-display:  none;
  --moon-display: block;

  --danger:      #ff453a;
  --warn-line:   #ffd60a;
  --warn-bg:     rgba(255, 214, 10, 0.12);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.65);

  color-scheme: dark;
}

/* Same dark tokens, applied when the visitor's system asks for dark and they
   have not explicitly chosen light with the toggle.

   This block is why dark mode does not depend on JavaScript. The inline head
   script sets data-theme before paint, but if scripting is unavailable the
   rule above never matches and a dark-mode visitor would be served the light
   palette. The duplication is deliberate — CSS has no way to alias one
   declaration block to two selectors across a media query. Keep both in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground:      #000000;
    --surface:     #1d1d1f;
    --surface-2:   #161617;
    --surface-3:   #2c2c2e;
    --elevated:    #1d1d1f;
    --line:        #38383a;
    --line-soft:   #2a2a2c;
    --text:        #f5f5f7;
    --text-strong: #ffffff;
    --muted:       #a1a1a6;
    --faint:       #86868b;

    --brand-green: #58c66e;

    --accent:      #37d15f;
    --accent-hover:#5ce07d;
    --accent-text: #4fd76e;
    --accent-soft: rgba(48, 209, 88, 0.15);
    --accent-line: rgba(48, 209, 88, 0.32);
    --on-accent:   #00340f;

    --nav-bg:      rgba(22, 22, 23, 0.72);
    --nav-border:  rgba(255, 255, 255, 0.12);

    --fill:         #2c2c2e;
    --fill-hover:   #3a3a3c;
    --panel:        #1d1d1f;
    --panel-shadow: none;
    --field-bg:     #2c2c2e;
    --field-border: transparent;
    --mock-border:  #38383a;
    --err-bg:       rgba(255, 69, 58, 0.14);
    --sun-display:  none;
    --moon-display: block;

    --danger:      #ff453a;
    --warn-line:   #ffd60a;
    --warn-bg:     rgba(255, 214, 10, 0.12);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.65);

    color-scheme: dark;
  }
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -0.022em;   /* Apple body tracking */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

main { flex: 1; }

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 600;              /* Apple headlines are semibold, not bold */
  color: var(--text-strong);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

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

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: top 0.25s var(--ease-out);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 760px; }
.wrap--wide   { max-width: 1280px; }

.section { padding-block: clamp(72px, 10vw, 130px); }
.section--tight { padding-block: clamp(44px, 6vw, 72px); }
.section--alt { background: var(--surface-2); }

.stack { display: flex; flex-direction: column; }
.stack-4 { gap: 4px; }   .stack-8 { gap: 8px; }   .stack-12 { gap: 12px; }
.stack-16 { gap: 16px; } .stack-20 { gap: 20px; } .stack-24 { gap: 24px; }
.stack-28 { gap: 28px; } .stack-32 { gap: 32px; } .stack-40 { gap: 40px; }
.stack-48 { gap: 48px; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.center { text-align: center; }
.center .row { justify-content: center; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 80px);
  /* Top-aligned: when one column is a short heading and the other is a long
     card stack, centring leaves a large void beside the heading. */
  align-items: start;
}
.split--reverse > *:first-child { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--reverse > *:first-child { order: 0; }
}

/* --- Typography ----------------------------------------------------------- */

.h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  font-weight: 600;
}
.h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 600;
}
.h3 {
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.19;
  letter-spacing: -0.018em;
  font-weight: 600;
}
.h4 {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.014em;
  font-weight: 600;
}

.lead {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.017em;
  color: var(--muted);
  max-width: 60ch;
}
.center .lead { margin-inline: auto; }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.accent { color: var(--accent-text); }
.small { font-size: 15px; line-height: 1.5; letter-spacing: -0.016em; }
.tiny  { font-size: 13px; line-height: 1.45; letter-spacing: -0.01em; }

/* Apple-style section label: small, semibold, accent — no rules or mono */
.eyebrow {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--accent-text);
}

/* Small uppercase caption used for kickers and metadata */
.mono {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

code {
  font-family: var(--mono);
  font-size: 0.87em;
  padding: 0.16em 0.42em;
  background: var(--surface-2);
  border-radius: 6px;
  color: var(--accent-text);
  letter-spacing: 0;
}
code { background: var(--fill); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), opacity 0.22s var(--ease);
}
.btn:active { opacity: 0.82; }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost { background: transparent; border-color: var(--accent); color: var(--accent-text); }
.btn--ghost:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.btn--solid { background: var(--fill); color: var(--text-strong); }
.btn--solid:hover { background: var(--fill-hover); }

.btn--sm { padding: 8px 17px; font-size: 14px; }
.btn--lg { padding: 14px 28px; font-size: 17px; }
.btn--block { width: 100%; }

.btn .arrow { transition: transform 0.22s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* Apple's chevron text link */
.link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--accent-text);
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link svg { transition: transform 0.22s var(--ease-out); }
.link:hover svg { transform: translateX(3px); }

/* --- Brand lockup --------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-family: var(--font-brand);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--text-strong);
  white-space: nowrap;
}
.brand__leaf {
  width: 0.42em;
  height: auto;
  margin-inline: 0.16em 0.14em;
  flex: none;
  color: var(--brand-green);
  transform: translateY(0.02em);
}
.brand__ai { color: var(--brand-green); }
.brand--lg { font-size: 32px; }

/* --- Navigation (translucent material bar) -------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--nav-border); }

.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: 24px; flex: 1; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  opacity: 0.85;
  transition: opacity 0.2s var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link[aria-current='page'] { font-weight: 600; opacity: 1; }

.nav__actions { display: flex; align-items: center; gap: 10px; }

/* Products dropdown */
.nav__item { position: relative; }
.nav__caret { transition: transform 0.25s var(--ease-out); opacity: 0.6; }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.98);
  transform-origin: top center;
  width: min(680px, calc(100vw - 36px));
  padding: 12px;
  background: var(--elevated);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
}
.nav__item.is-open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.mega__item {
  display: flex;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  transition: background 0.18s var(--ease);
}
.mega__item:hover { background: var(--fill); }
.mega__ico {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.mega__ico svg { width: 17px; height: 17px; }
.mega__name { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.016em; color: var(--text-strong); }
.mega__desc { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); margin-top: 2px; letter-spacing: -0.01em; }
.mega__all {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 13px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-text);
}

/* Theme toggle */
.theme-toggle {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  opacity: 0.85;
  cursor: pointer;
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.theme-toggle:hover { background: var(--fill); opacity: 1; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun  { display: var(--sun-display); }
.theme-toggle .icon-moon { display: var(--moon-display); }

/* Mobile menu */
.nav__burger {
  display: none;
  width: 32px; height: 32px;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
}
.nav__burger:hover { background: var(--fill); }
.nav__burger svg { width: 18px; height: 18px; }
.nav__burger .icon-close { display: none; }
body.menu-open .nav__burger .icon-close { display: block; }
body.menu-open .nav__burger .icon-menu { display: none; }

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 99;
  background: var(--ground);
  padding: 20px var(--gutter) 56px;
  overflow-y: auto;
  display: none;
}
body.menu-open .mobile-menu { display: block; }
body.menu-open { overflow: hidden; }

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.021em;
  color: var(--text-strong);
}
.mobile-menu__group { padding: 12px 2px 4px; }
.mobile-menu__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 2px;
  font-size: 16px;
  color: var(--muted);
  letter-spacing: -0.017em;
}
.mobile-menu__sub b { color: var(--text-strong); font-weight: 600; }

@media (max-width: 980px) {
  .nav__links, .nav__actions .btn { display: none; }
  .nav__burger { display: grid; }
  .nav__inner { justify-content: space-between; }
  .nav__actions { margin-left: auto; }
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px) clamp(52px, 7vw, 92px);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -30%; left: 50%;
  width: min(1000px, 125vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
@media (max-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* Headlines in a two-column hero sit against a ~520px measure, so the full
   display size would run to five or six lines. Apple reserves the largest
   sizes for short headlines; ours is a sentence. */
.hero .h1 { font-size: clamp(36px, 4.4vw, 54px); letter-spacing: -0.024em; }
.pagehead .h1 { font-size: clamp(36px, 4.6vw, 58px); letter-spacing: -0.025em; }

/* Apple-style announcement badge */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px 5px 5px;
  background: var(--fill);
  border-radius: var(--radius-pill);
  font-size: 14px;
  letter-spacing: -0.016em;
  color: var(--text);
  width: fit-content;
}

.pill__tag {
  padding: 3px 10px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --- Cards ---------------------------------------------------------------- */

.card {
  position: relative;
  padding: 28px;
  background: var(--panel);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease-out), background 0.25s var(--ease);
}
/* On tinted sections the card lifts off the ground onto the base surface */
.section--alt .card { background: var(--surface); box-shadow: var(--panel-shadow); }

.card--link { cursor: pointer; }
.card--link:hover { transform: translateY(-4px); }

.card--bare { background: transparent; border: 1px solid var(--line); box-shadow: none; }
.section--alt .card--bare { background: transparent; box-shadow: none; }
.card--flush { padding: 0; overflow: hidden; }

.card__ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-text);
  margin-bottom: 18px;
}
.card__ico svg { width: 20px; height: 20px; }

.card__title { font-size: 20px; font-weight: 600; letter-spacing: -0.018em; color: var(--text-strong); line-height: 1.2; }
.card__body { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 9px; letter-spacing: -0.014em; }

.stretched::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

/* Product card */
.pcard { display: flex; flex-direction: column; height: 100%; }
.pcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pcard__name { font-size: 24px; font-weight: 600; letter-spacing: -0.021em; color: var(--text-strong); line-height: 1.15; }
.pcard__kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.pcard__tagline { font-size: 15px; font-weight: 500; color: var(--accent-text); margin-top: 4px; letter-spacing: -0.014em; }
.pcard__desc { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 12px; letter-spacing: -0.014em; }
.pcard__list { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.pcard__foot { margin-top: auto; padding-top: 22px; }

/* Checklist with SF-style check glyph */
.checklist { display: flex; flex-direction: column; gap: 11px; }
.checklist li {
  position: relative;
  padding-left: 27px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: -0.014em;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.28em;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--accent);
}
.checklist li::after {
  content: '';
  position: absolute;
  left: 5.6px; top: 0.52em;
  width: 4.5px; height: 8px;
  border: solid var(--on-accent);
  border-width: 0 1.9px 1.9px 0;
  transform: rotate(43deg);
}
.checklist--tight li { font-size: 14.5px; }

/* --- Numbered steps ------------------------------------------------------- */

.steps { counter-reset: step; display: grid; }
.step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step__num {
  counter-increment: step;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent-text);
}
.step__num::before { content: counter(step); }
@media (max-width: 620px) { .step { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* --- Stat tiles ----------------------------------------------------------- */

.tile { padding: 26px; background: var(--panel); border-radius: var(--radius); }
.tile__k { font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.026em; color: var(--accent-text); line-height: 1; }
.tile__l { font-size: 15px; color: var(--muted); margin-top: 10px; letter-spacing: -0.014em; }

/* --- Interface mockups ---------------------------------------------------- */

.mock {
  background: var(--elevated);
  border: 1px solid var(--mock-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--mock-border);
  background: var(--fill);
}
.mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mock__label {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}
.mock__body { padding: 20px; display: flex; flex-direction: column; gap: 13px; }

/* iMessage-style bubbles */
.bubble {
  max-width: 84%;
  padding: 11px 16px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.016em;
}
.bubble--them {
  align-self: flex-start;
  background: var(--fill);
  border-bottom-left-radius: 6px;
  color: var(--text);
}
.bubble--us {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
  border-bottom-right-radius: 6px;
}
.bubble__meta {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 5px 12px;
  background: var(--fill);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.chip--accent { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }

/* --- FAQ / disclosure ----------------------------------------------------- */

.faq { border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.019em;
  color: var(--text-strong);
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq summary::after {
  content: '';
  flex: none;
  width: 14px; height: 14px;
  margin-top: 6px;
  background: currentColor;
  opacity: 0.55;
  transition: transform 0.28s var(--ease-out);
  -webkit-mask: var(--plus) center / contain no-repeat;
  mask: var(--plus) center / contain no-repeat;
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq__a { padding-bottom: 26px; font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 68ch; letter-spacing: -0.017em; }
.faq__a p + p { margin-top: 13px; }

/* --- Tables --------------------------------------------------------------- */

.table-scroll { overflow-x: auto; border-radius: var(--radius); background: var(--surface); box-shadow: var(--panel-shadow); border: 1px solid var(--mock-border); }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { padding: 16px 20px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--line-soft); letter-spacing: -0.014em; }
th {
  background: var(--fill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}
td { color: var(--muted); vertical-align: top; }
td:first-child { color: var(--text-strong); font-weight: 500; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* --- Forms ---------------------------------------------------------------- */

.form { display: grid; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 15px; font-weight: 500; color: var(--text-strong); letter-spacing: -0.016em; }
.field .hint { font-size: 13px; color: var(--faint); }
.req { color: var(--accent-text); }

.input, .select, .textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  letter-spacing: -0.017em;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  padding-right: 40px;
  cursor: pointer;
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 620px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  cursor: pointer;
  letter-spacing: -0.014em;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.check:hover { border-color: var(--accent-line); }
.check input { flex: none; margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.check b { display: block; font-weight: 500; color: var(--text-strong); }
.check span { font-size: 13px; color: var(--muted); }

.consent { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.45; color: var(--muted); letter-spacing: -0.012em; }
.consent input { flex: none; margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--accent); }
.consent a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

.form-note {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.014em;
  display: none;
}
.form-note.is-visible { display: block; }
.form-note--ok { background: var(--accent-soft); color: var(--accent-text); }
.form-note--err { background: var(--err-bg); color: var(--danger); }

.input.is-invalid, .textarea.is-invalid, .select.is-invalid { border-color: var(--danger); }
.error-text { font-size: 13.5px; color: var(--danger); display: none; letter-spacing: -0.01em; }
.error-text.is-visible { display: block; }

/* Honeypot — hidden from humans, catches naive bots */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* --- CTA band ------------------------------------------------------------- */

.cta-band {
  position: relative;
  padding: clamp(48px, 6vw, 84px) clamp(24px, 5vw, 64px);
  background: var(--panel);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -70%; right: -8%;
  width: 620px; aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-soft), transparent 62%);
  pointer-events: none;
}
.cta-band > * { position: relative; }

/* --- Footer --------------------------------------------------------------- */

.footer {
  background: var(--surface-2);
  padding-block: clamp(44px, 5vw, 64px) 28px;
  margin-top: auto;
  font-size: 14px;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

.footer__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  margin-bottom: 14px;
}
.footer__list { display: flex; flex-direction: column; gap: 10px; }
.footer__list a, .footer__list span { font-size: 13px; color: var(--muted); line-height: 1.4; letter-spacing: -0.01em; }
.footer__list a:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 2px; }

.footer__bottom {
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--faint);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legal a:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 2px; }

.social { display: flex; gap: 8px; }
.social a {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.social a:hover { background: var(--accent); color: var(--on-accent); }
.social svg { width: 15px; height: 15px; }

/* --- Interior page header ------------------------------------------------- */

.pagehead {
  position: relative;
  padding-block: clamp(48px, 6vw, 80px) clamp(36px, 5vw, 56px);
  overflow: hidden;
}
.pagehead::before {
  content: '';
  position: absolute;
  top: -60%; left: 10%;
  width: 720px; aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-soft), transparent 62%);
  pointer-events: none;
}
.pagehead > * { position: relative; }

/* The page header already carries bottom padding; without this the two stack
   into ~180px of dead space before the first section. */
.pagehead + .section { padding-top: clamp(28px, 4vw, 56px); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 13px; color: var(--faint); margin-bottom: 20px; letter-spacing: -0.01em; }
.crumbs a:hover { color: var(--accent-text); }
.crumbs span[aria-hidden] { opacity: 0.5; }

/* --- Product page --------------------------------------------------------- */

.prod-hero__badge {
  display: inline-flex;
  width: fit-content;
  align-self: flex-start;
  align-items: center;
  gap: 9px;
  padding: 6px 15px;
  background: var(--fill);
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: -0.014em;
}
.prod-hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.prev-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .prev-next { grid-template-columns: minmax(0, 1fr); } }
.pn {
  padding: 22px 24px;
  background: var(--panel);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease-out);
}
.pn:hover { transform: translateY(-3px); }
.pn--next { text-align: right; }

/* --- Misc ----------------------------------------------------------------- */

.divider-dots { display: flex; align-items: center; gap: 14px; color: var(--faint); font-size: 13px; letter-spacing: -0.01em; }
.divider-dots::before, .divider-dots::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.badge-row { display: flex; flex-wrap: wrap; gap: 9px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: var(--fill);
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.014em;
  transition: background 0.2s var(--ease);
}
a.badge:hover { background: var(--accent-soft); color: var(--accent-text); }
.badge svg { width: 14px; height: 14px; color: var(--accent-text); flex: none; }

/* Founder cards */
.person {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
  height: 100%;
}
.person__avatar {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.person__name { font-size: 19px; font-weight: 600; letter-spacing: -0.019em; color: var(--text-strong); }
.person__role { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 3px; letter-spacing: -0.014em; }
.person__bio { font-size: 15px; line-height: 1.5; color: var(--muted); letter-spacing: -0.014em; }
.person__links { margin-top: auto; padding-top: 4px; }
.person__links .link { font-size: 15px; }

.contact-card {
  display: flex;
  gap: 16px;
  padding: 22px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
}
.section--alt .contact-card { background: var(--surface); }
.contact-card__ico {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.contact-card__ico svg { width: 17px; height: 17px; }
.contact-card a { color: var(--text-strong); font-weight: 500; letter-spacing: -0.016em; }
.contact-card a:hover { color: var(--accent-text); }

/* Legal / long-form prose */
.prose { max-width: 68ch; }
.prose h2 { font-size: 27px; margin-top: 48px; margin-bottom: 14px; letter-spacing: -0.021em; }
.prose h3 { font-size: 19px; margin-top: 30px; margin-bottom: 8px; letter-spacing: -0.017em; }
.prose p { margin-bottom: 15px; font-size: 17px; line-height: 1.6; color: var(--muted); letter-spacing: -0.017em; }
.prose ul { margin: 0 0 18px; padding-left: 24px; list-style: disc; }
.prose li { margin-bottom: 9px; font-size: 17px; line-height: 1.55; color: var(--muted); letter-spacing: -0.017em; }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text-strong); font-weight: 600; }

/* Placeholder marker — deliberately loud, so nothing unfinished ships quietly.
   Search the HTML for class="todo" to find every one of them. */
.todo {
  display: inline;
  padding: 2px 8px;
  border: 1px dashed var(--warn-line);
  border-radius: 7px;
  background: var(--warn-bg);
  color: var(--warn-line);
  font-family: var(--mono);
  font-size: 0.82em;
  letter-spacing: 0;
}

/* Scroll-in animation.
   Scoped to .js (set by the inline head script) so that if JavaScript is
   disabled or fails to load, content renders normally instead of invisibly. */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

@media print {
  .nav, .footer, .mobile-menu, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
}