/* Roboto Flex (SIL OFL 1.1), self-hosted: no requests to Google Fonts.
   Subset with fonttools to Latin + Latin-1, general punctuation, € ≈ and arrows; axes limited to
   wght 400–720, wdth 100–104 and the full opsz range (other parametric axes pinned to defaults). */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-display: swap;
  font-weight: 400 720;
  font-stretch: 100% 104%;
  src: url("/assets/fonts/roboto-flex-subset.woff2?v=ce82406742") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2248, U+FEFF, U+FFFD;
}

/* Setstack website - Material 3 Expressive look, seed #1E6FD9. Built by website/build.mjs, which stamps ?v=<hash> on asset URLs. */

/* Breakpoints. Custom properties cannot be used inside @media, so media queries repeat these values
   literally: (min-width: <bp>) and (max-width: <bp - 0.02px>). build.mjs fails on any other value,
   and site.js reads the tokens for matchMedia.
   xs 360  small phones        sm 480  large phones      md 600  tablets (header grows to 72px)
   lg 900  desktop nav, two-column layouts                xl 1024 wide layouts, sticky sidebars */

/* ---------- Tokens (M3 tonal palette from seed #1E6FD9) ---------- */
:root {
  color-scheme: light dark;
  --brand: #1E6FD9;
  --on-brand: #FFFFFF;
  --brand-deep: #0A3E8C;

  --primary: #1960C9;
  --on-primary: #FFFFFF;
  --primary-container: #D8E2FF;
  --on-primary-container: #001A41;
  --secondary: #565E71;
  --on-secondary: #FFFFFF;
  --secondary-container: #DAE2F9;
  --on-secondary-container: #131C2B;
  --tertiary: #705575;
  --on-tertiary: #FFFFFF;
  --tertiary-container: #FAD8FD;
  --on-tertiary-container: #28132E;

  --surface: #F9F9FF;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #F3F3FA;
  --surface-container: #EDEDF4;
  --surface-container-high: #E7E8EE;
  --surface-container-highest: #E1E2E9;
  --on-surface: #191C20;
  --on-surface-variant: #44474F;
  --outline: #74777F;
  --outline-variant: #C4C6D0;
  --phone-frame: #1B1C20;
  /* Extra tonal family (custom color, harmonized green) for color-rotating cards */
  --green: #2E6A44;
  --on-green: #FFFFFF;
  --green-container: #C6F0D2;
  --on-green-container: #00210F;

  /* Shape scale */
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 28px;
  --r-xxl: 40px;
  --r-full: 999px;

  /* Motion (spring-like overshoot) */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --emphasized: cubic-bezier(.2, 0, 0, 1);
  --dur-s: 220ms;
  --dur-m: 420ms;
  --dur-l: 650ms;

  /* Layout */
  --gutter: 16px;
  --max: 1200px;
  --topbar-h: 64px;
  --sticky-top: calc(var(--topbar-h) + 24px);
  --bp-xs: 360px;
  --bp-sm: 480px;
  --bp-md: 600px;
  --bp-lg: 900px;
  --bp-xl: 1024px;
  --font: "Roboto Flex", "Google Sans Flex", "Google Sans", Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

@media (min-width: 600px) { :root { --gutter: 24px; --topbar-h: 72px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #ADC6FF;
    --on-primary: #002E69;
    --primary-container: #004494;
    --on-primary-container: #D8E2FF;
    --secondary: #BEC6DC;
    --on-secondary: #283141;
    --secondary-container: #3E4759;
    --on-secondary-container: #DAE2F9;
    --tertiary: #DDBCE0;
    --on-tertiary: #3F2844;
    --tertiary-container: #573E5C;
    --on-tertiary-container: #FAD8FD;

    --surface: #111318;
    --surface-container-lowest: #0C0E13;
    --surface-container-low: #191C20;
    --surface-container: #1D2024;
    --surface-container-high: #282A2F;
    --surface-container-highest: #33353A;
    --on-surface: #E2E2E9;
    --on-surface-variant: #C4C6D0;
    --outline: #8E9099;
    --outline-variant: #44474F;
    --phone-frame: #2A2C31;
    --green: #A9D3B6;
    --on-green: #00391F;
    --green-container: #135232;
    --on-green-container: #C6F0D2;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 16px); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--primary); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--primary-container); color: var(--on-primary-container); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--primary); color: var(--on-primary); padding: 12px 20px; border-radius: var(--r-full);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

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

/* ---------- Type scale (M3 Expressive, emphasized) ---------- */
.display { font-size: clamp(2.5rem, 1.5rem + 5.6vw, 5.6rem); font-weight: 680; letter-spacing: -0.035em; line-height: 1.0; font-variation-settings: "wdth" 104; }
.headline { font-size: clamp(1.85rem, 1.25rem + 3vw, 3.4rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; font-variation-settings: "wdth" 104; }
.title-l { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.65rem); font-weight: 620; letter-spacing: -0.015em; line-height: 1.2; }
.lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.35rem); color: var(--on-surface-variant); line-height: 1.5; max-width: 38ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .875rem; font-weight: 600; letter-spacing: .02em;
  color: var(--on-secondary-container); background: var(--secondary-container);
  padding: 6px 14px; border-radius: var(--r-full); margin-bottom: 20px;
}

/* ---------- Buttons (pill with press shape-morph) ---------- */
.btn {
  --h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 28px;
  border: 0; border-radius: calc(var(--h) / 2);
  font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: .005em; text-decoration: none; line-height: 1.2;
  cursor: pointer; position: relative; isolation: isolate;
  transition: border-radius var(--dur-m) var(--spring), transform var(--dur-m) var(--spring), background-color var(--dur-s) linear, box-shadow var(--dur-s) linear;
  -webkit-tap-highlight-color: transparent;
}
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--dur-s) linear; z-index: -1; }
.btn:hover::after { opacity: .08; }
.btn:active::after { opacity: .12; }
.btn:hover { border-radius: calc(var(--h) / 2.6); }
.btn:active { border-radius: 14px; transform: scale(.97); transition-duration: 120ms; }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn-filled { background: var(--primary); color: var(--on-primary); }
.btn-filled:hover { box-shadow: 0 2px 6px rgb(0 0 0 / .18); }
.btn-tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn-onbrand { background: var(--on-brand); color: var(--brand-deep); }
.btn-small { --h: 48px; padding: 0 20px; font-size: .9375rem; }
.btn-small svg { width: 20px; height: 20px; }
.btn-large { --h: 64px; padding: 0 32px; font-size: 1.0625rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* "Coming soon to Google Play" pill, shown instead of the Play link while PLAY_LIVE is false (site.config.mjs) */
.btn.btn-soon { background: transparent; color: var(--on-surface-variant); box-shadow: inset 0 0 0 2px var(--outline); cursor: default; }
.btn.btn-soon::after { content: none; }
.btn.btn-soon:hover, .btn.btn-soon:active { border-radius: calc(var(--h) / 2); transform: none; box-shadow: inset 0 0 0 2px var(--outline); }
.cta .btn.btn-soon, .cta .btn.btn-soon:hover { color: var(--on-brand); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-brand) 60%, transparent); }
@media (max-width: 479.98px) { .hero .btn-row .btn, .cta .btn { flex: 1 1 100%; } }
@media (max-width: 359.98px) { .btn { padding-inline: 20px; } .btn-large { font-size: 1rem; padding-inline: 20px; } }

/* ---------- Top app bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
.topbar-inner { display: flex; align-items: center; gap: 8px; min-height: var(--topbar-h); }
@media (min-width: 600px) { .topbar-inner { gap: 12px; } }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--on-surface); text-decoration: none; font-weight: 680; font-size: 1.25rem; letter-spacing: -0.02em; border-radius: var(--r-m); }
.brand-icon { width: 36px; height: 36px; border-radius: 11px; flex: none; transition: border-radius var(--dur-m) var(--spring), transform var(--dur-m) var(--spring); }
.brand:hover .brand-icon { border-radius: 18px; transform: rotate(-8deg); }

.nav { display: flex; gap: 4px; }
.nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: var(--r-full);
  color: var(--on-surface-variant); text-decoration: none; font-weight: 550; font-size: .9375rem;
  transition: background-color var(--dur-s) linear, color var(--dur-s) linear, border-radius var(--dur-m) var(--spring);
}
.nav a:not(.btn):hover { background: var(--surface-container-high); color: var(--on-surface); }
.nav a[aria-current="page"] { background: var(--secondary-container); color: var(--on-secondary-container); }
.nav-cta { display: none; }
.topbar-actions { order: 3; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-cta { display: none; }
@media (min-width: 480px) { .topbar-cta { display: inline-flex; } }

/* Menu button: 48px icon button that morphs from circle to rounded square when open */
.menu-btn {
  display: none; order: 4; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; place-items: center;
  background: var(--surface-container-high); color: var(--on-surface); cursor: pointer; font: inherit;
  transition: border-radius var(--dur-m) var(--spring), background-color var(--dur-s) linear, transform var(--dur-m) var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.menu-btn:hover { background: var(--surface-container-highest); }
.menu-btn:active { transform: scale(.94); }
.menu-btn svg { width: 24px; height: 24px; grid-area: 1 / 1; transition: transform var(--dur-m) var(--spring), opacity var(--dur-s) linear; }
.menu-btn .i-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.menu-btn[aria-expanded="true"] { border-radius: 16px; background: var(--secondary-container); color: var(--on-secondary-container); }
.menu-btn[aria-expanded="true"] .i-open { opacity: 0; transform: rotate(90deg) scale(.6); }
.menu-btn[aria-expanded="true"] .i-close { opacity: 1; transform: none; }

/* Below 900px without JS: the nav becomes a horizontally scrollable chip row under the brand */
@media (max-width: 899.98px) {
  html:not(.js) .topbar-inner { flex-wrap: wrap; padding-bottom: 8px; }
  html:not(.js) .nav { order: 3; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  html:not(.js) .nav a:not(.btn) { flex: none; box-shadow: inset 0 0 0 1px var(--outline-variant); }

  /* With JS: compact header + menu button that opens a nav sheet */
  .js .menu-btn { display: grid; }
  .js .nav {
    position: absolute; top: 100%; left: var(--gutter); right: var(--gutter);
    flex-direction: column; gap: 2px; padding: 8px;
    max-height: calc(100dvh - var(--topbar-h) - 16px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface-container); border-radius: var(--r-xl);
    box-shadow: 0 1px 3px rgb(0 0 0 / .14), 0 16px 40px -8px rgb(0 0 0 / .3);
    visibility: hidden; opacity: 0; transform: translateY(-12px) scale(.97); transform-origin: top right;
    transition: opacity var(--dur-s) linear, transform var(--dur-m) var(--spring), visibility 0s linear var(--dur-m);
  }
  .js .topbar.is-open .nav { visibility: visible; opacity: 1; transform: none; transition-property: opacity, transform; }
  .js .nav a:not(.btn) { min-height: 56px; padding: 0 20px; font-size: 1.125rem; font-weight: 600; color: var(--on-surface); border-radius: var(--r-l); }
  .js .nav a:not(.btn):hover { border-radius: var(--r-full); }
  .js .nav .nav-cta { display: inline-flex; margin-top: 8px; width: 100%; }
}
@media (min-width: 600px) and (max-width: 899.98px) { .js .nav { left: auto; width: 360px; } }
@media (min-width: 900px) {
  .nav { order: 2; margin-left: auto; }
  .topbar-actions { margin-left: 8px; }
}
.scrim {
  position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / .32);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-m) var(--emphasized), visibility 0s linear var(--dur-m);
}
.nav-open .scrim { opacity: 1; visibility: visible; transition-property: opacity; }
html.nav-open { overflow: hidden; }
@media (min-width: 900px) { .scrim { display: none; } html.nav-open { overflow: visible; } }

/* ---------- Sections ---------- */
section { padding-block: clamp(48px, 7vw, 96px); }
.spots, #features { overflow-x: clip; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head p { color: var(--on-surface-variant); font-size: 1.125rem; margin-top: 16px; }
.center { text-align: center; margin-inline: auto; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(16px, 4vw, 56px); padding-bottom: clamp(16px, 3vw, 32px); overflow-x: clip; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; } }
/* Landscape phones: side by side, smaller phone */
@media (min-width: 600px) and (max-height: 540px) and (orientation: landscape) {
  .hero-grid { grid-template-columns: 1.2fr .8fr; gap: 32px; }
  .stage { min-height: 0; }
  .phone { width: min(30vw, 220px); }
}
@media (max-width: 479.98px) { .shape-b { width: 88px; } .shape-c { width: 110px; } .stage { min-height: 360px; } }
.hero h1 { margin-bottom: 24px; }
.hero h1 .accent { color: var(--primary); }
.hero .lead { margin-bottom: 32px; }
.hero-note { margin: 14px 0 0; color: var(--on-surface-variant); font-size: .9375rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding: 0; list-style: none; }
.chips li {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px;
  border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--outline-variant);
  font-size: .9375rem; font-weight: 550; color: var(--on-surface-variant);
}
.chips svg { width: 18px; height: 18px; color: var(--primary); }

/* Stage = phone + decorative expressive shapes */
.stage { position: relative; display: grid; place-items: center; padding: 24px 0 48px; min-height: 420px; max-width: 100%; }
.stage .shape { position: absolute; pointer-events: none; }
.stage .shape use { fill: currentColor; }
.shape-a { width: min(92%, 440px); color: var(--primary-container); }
.shape-b { width: 120px; right: 4%; top: 2%; color: var(--tertiary-container); }
.shape-c { width: 150px; left: 2%; bottom: 8%; color: var(--secondary-container); rotate: -14deg; }
@media (prefers-reduced-motion: no-preference) {
  .shape-a { animation: spin 60s linear infinite; }
  .shape-b { animation: spin 40s linear infinite reverse; }
  .shape-c { animation: bob 6s var(--emphasized) infinite alternate; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { from { transform: translateY(0) rotate(-12deg); } to { transform: translateY(-12px) rotate(-4deg); } }

/* Phone frame; the screenshot is a background image so a missing file falls back to the mock UI */
.phone {
  position: relative; z-index: 1;
  width: min(64vw, 290px); aspect-ratio: 9 / 19.5;
  border-radius: 44px; padding: 10px;
  background: var(--phone-frame);
  box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 24px 48px -12px rgb(0 0 0 / .28);
}
.phone::before { /* camera punch-hole */
  content: ""; position: absolute; top: 20px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: #000; z-index: 3;
}
.screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 34px;
  background: var(--surface-container-lowest);
}
.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background-image: var(--shot); background-size: cover; background-position: center top; background-repeat: no-repeat;
}
/* Mock UI shown until real screenshots exist */
.mock { position: absolute; inset: 0; padding: 40px 14px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 11px; line-height: 1.3; color: var(--on-surface); }
.mock-title { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; margin: 2px 4px 6px; }
.mock-card { background: var(--surface-container); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.mock-card.primary { background: var(--primary-container); color: var(--on-primary-container); }
.mock-card.tertiary { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.mock-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mock-strong { font-weight: 650; font-size: 12.5px; }
.mock-muted { opacity: .72; }
.mock-pill { background: var(--primary); color: var(--on-primary); border-radius: 999px; padding: 6px 12px; font-weight: 650; text-align: center; }
.mock-check { width: 22px; height: 22px; border-radius: 8px; background: var(--primary); flex: none; }
.mock-check.off { background: transparent; box-shadow: inset 0 0 0 2px var(--outline); }
.mock-bars { display: flex; align-items: flex-end; gap: 5px; height: 70px; padding-top: 6px; }
.mock-bars span { flex: 1; background: var(--primary); border-radius: 6px 6px 3px 3px; opacity: .85; }
.mock-nav { margin-top: auto; display: flex; justify-content: space-around; align-items: center; background: var(--surface-container); border-radius: 22px; padding: 10px 8px; }
.mock-nav span { width: 18px; height: 18px; border-radius: 6px; background: var(--outline-variant); }
.mock-nav span.on { width: 48px; border-radius: 999px; background: var(--secondary-container); outline: 6px solid var(--secondary-container); outline-offset: -1px; background-image: radial-gradient(circle, var(--on-secondary-container) 0 4px, transparent 5px); }
.mock-timer { font-size: 26px; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- Feature cards (color-rotating tonal containers) ---------- */
.features { display: grid; gap: 16px; grid-template-columns: 1fr; padding: 0; margin: 0; list-style: none; }
@media (min-width: 600px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature {
  --c: var(--primary-container); --on-c: var(--on-primary-container); --shape-c: var(--primary); --on-shape: var(--on-primary);
  background: var(--c); color: var(--on-c);
  border-radius: var(--r-xl); padding: 28px 28px 32px;
  transition: border-radius var(--dur-l) var(--spring), transform var(--dur-l) var(--spring);
}
.feature:nth-child(3n+2) { --c: var(--green-container); --on-c: var(--on-green-container); --shape-c: var(--green); --on-shape: var(--on-green); }
.feature:nth-child(3n+3) { --c: var(--tertiary-container); --on-c: var(--on-tertiary-container); --shape-c: var(--tertiary); --on-shape: var(--on-tertiary); }
.feature:hover { border-radius: 44px; transform: translateY(-3px); }
.feature h3 { font-size: 1.375rem; font-weight: 640; margin: 20px 0 8px; }
.feature p { margin: 0; opacity: .9; }
/* Shape badge: the icon uses the shape's "on" colour. A small disc under the shape keeps the icon readable
   if shapes.svg ever fails to load. */
.badge { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.badge::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--shape-c); }
.badge > svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--shape-c); transition: transform var(--dur-l) var(--spring); }
.badge > svg.icon { position: relative; width: 28px; height: 28px; color: var(--on-shape); }
.feature:hover .badge > svg.bg { transform: rotate(45deg) scale(1.06); }

/* ---------- Spotlight rows ---------- */
.spot { display: grid; gap: 40px; align-items: center; }
.spot + .spot { margin-top: clamp(56px, 8vw, 104px); }
@media (min-width: 900px) {
  .spot { grid-template-columns: 1fr 1fr; gap: 64px; }
  .spot.flip .stage { order: 2; }
}
.spot .stage { border-radius: var(--r-xxl); background: var(--surface-container-low); padding: 40px 16px; overflow: hidden; overflow: clip; }
.spot .stage .shape-a { width: min(118%, 600px); rotate: 22deg; }
.spot.flip .stage .shape-a { color: var(--tertiary-container); }
.spot h2 { margin-bottom: 20px; }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; }
.ticks svg { width: 24px; height: 24px; flex: none; margin-top: 1px; color: var(--primary); }

/* ---------- Pro: plans, features, comparison ---------- */
.pro { overflow-x: clip; }
.pro .section-head.center { text-align: center; }
.pro .section-head p:not(.eyebrow) { margin-inline: auto; max-width: 44ch; }

.plans { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 12px; max-width: 1040px; }
@media (min-width: 600px) and (max-width: 899.98px) { .plans, .pro-fine { max-width: 600px; } }
.plan {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "badge badge" "name price" "note price";
  column-gap: 16px; align-items: center;
  background: var(--surface-container); color: var(--on-surface);
  border-radius: var(--r-xl); padding: 20px 22px;
  transition: border-radius var(--dur-l) var(--spring), transform var(--dur-l) var(--spring);
}
.plan:hover { border-radius: 40px; }
.plan-name { grid-area: name; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }
.plan-price { grid-area: price; margin: 0; text-align: right; font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.1rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.plan-price small { display: block; margin-top: 4px; font-size: .875rem; font-weight: 550; letter-spacing: 0; color: var(--on-surface-variant); }
.plan-note { grid-area: note; margin: 4px 0 0; color: var(--on-surface-variant); font-size: .9688rem; line-height: 1.4; }
.plan-note strong { color: var(--on-surface); font-weight: 650; }
.plan-badge {
  grid-area: badge; justify-self: start; margin: 0 0 12px;
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary); font-size: .875rem; font-weight: 650; letter-spacing: .01em;
}
.plan-best { background: var(--primary-container); color: var(--on-primary-container); box-shadow: inset 0 0 0 2px var(--primary); padding-block: 22px 24px; }
.plan-best .plan-price small, .plan-best .plan-note, .plan-best .plan-note strong { color: var(--on-primary-container); }
.plan-best .plan-price { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem); }
.plan-deco { position: absolute; z-index: -1; width: 200px; right: -64px; top: -72px; fill: var(--primary); opacity: .12; pointer-events: none; transition: transform var(--dur-l) var(--spring); }
.plan-deco use { fill: currentColor; }
.plan-best .plan-deco { color: var(--primary); }
.plan-best:hover .plan-deco { transform: rotate(40deg) scale(1.08); }

@media (min-width: 900px) {
  .plans { grid-template-columns: 1fr 1.15fr 1fr; align-items: center; gap: 16px; }
  .plan { grid-template-columns: 1fr; grid-template-areas: "badge" "name" "price" "note"; text-align: center; padding: 28px 24px 32px; justify-items: center; }
  .plan-badge { justify-self: center; }
  .plan-price { text-align: center; margin-top: 14px; font-size: clamp(2.2rem, 1.6rem + 1.4vw, 2.75rem); }
  .plan-note { margin-top: 12px; }
  .plan-best { padding: 32px 24px 40px; transform: translateY(0); }
  .plan-best .plan-price { font-size: clamp(2.8rem, 2rem + 2vw, 3.6rem); }
  .plan-best:hover { transform: translateY(-4px); }
  .plan-deco { width: 240px; right: -70px; top: -90px; }
}

.pro-fine {
  display: flex; gap: 12px; align-items: flex-start;
  max-width: 760px; margin: 20px auto 0; padding: 14px 18px;
  border-radius: var(--r-l); background: var(--surface-container-low); color: var(--on-surface-variant);
  font-size: .9375rem; line-height: 1.5;
}
.pro-fine svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--primary); }

.pro-sub { margin: clamp(48px, 7vw, 80px) 0 20px; }
.pro-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .pro-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pro-features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.pro-feature {
  --shape-c: var(--primary); --on-shape: var(--on-primary);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; align-content: start;
  background: var(--surface-container-low); border-radius: var(--r-xl); padding: 20px;
  transition: border-radius var(--dur-l) var(--spring), background-color var(--dur-s) linear;
}
.pro-feature:nth-child(4n+2) { --shape-c: var(--green); --on-shape: var(--on-green); }
.pro-feature:nth-child(4n+3) { --shape-c: var(--tertiary); --on-shape: var(--on-tertiary); }
.pro-feature:nth-child(4n+4) { --shape-c: var(--secondary); --on-shape: var(--on-secondary); }
.pro-feature:hover { border-radius: 40px; background: var(--surface-container); }
.pro-feature:hover .badge > svg.bg { transform: rotate(45deg) scale(1.06); }
.pro-feature .badge { width: 52px; height: 52px; }
.pro-feature .badge > svg.icon { width: 24px; height: 24px; }
.pro-feature h4 { font-size: 1.125rem; font-weight: 640; letter-spacing: -0.01em; line-height: 1.25; margin: 2px 0 6px; }
.pro-feature p { margin: 0; color: var(--on-surface-variant); font-size: .9688rem; line-height: 1.5; }
@media (min-width: 1024px) { .pro-feature { grid-template-columns: 1fr; padding: 24px; } .pro-feature h4 { margin-top: 4px; } }

.pro-bottom { display: grid; gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 1024px) { .pro-bottom { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; gap: 24px; } .pro-cta { position: sticky; top: var(--sticky-top); } }
.pro-cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--tertiary-container); color: var(--on-tertiary-container);
  border-radius: var(--r-xxl); padding: clamp(28px, 4vw, 40px);
}
.pro-cta .deco { position: absolute; z-index: -1; width: 220px; right: -70px; bottom: -80px; fill: var(--tertiary); opacity: .16; }
.pro-cta h3 { margin-bottom: 10px; }
.pro-cta p { margin: 0 0 24px; }
.pro-cta .btn { width: 100%; }
@media (min-width: 600px) and (max-width: 1023.98px) { .pro-cta .btn { width: auto; } }
.pro-cta .pro-cta-link { margin: 16px 0 0; }
.pro-cta .pro-cta-link a { display: inline-flex; align-items: center; min-height: 48px; color: inherit; font-weight: 600; }

.table-wrap { border-radius: var(--r-xl); background: var(--surface-container-low); padding: 4px 8px 8px; overflow-x: auto; }
table.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.compare caption { text-align: left; padding: 18px 12px 6px; font-weight: 640; font-size: 1.25rem; letter-spacing: -0.01em; }
.compare th, .compare td { padding: 12px; text-align: left; vertical-align: middle; }
.compare thead th { font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-variant); font-weight: 700; text-align: center; padding-block: 8px; }
.compare thead th:first-child { text-align: left; }
.compare thead th.col-pro { color: var(--primary); }
.compare tbody tr + tr th, .compare tbody tr + tr td { border-top: 1px solid var(--outline-variant); }
.compare tbody th { font-weight: 550; line-height: 1.35; }
.compare tbody th small { display: block; color: var(--on-surface-variant); font-size: .875rem; font-weight: 400; margin-top: 3px; line-height: 1.4; }
.compare td { width: 64px; text-align: center; }
.compare .group th { padding-top: 22px; padding-bottom: 8px; font-weight: 700; font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; color: var(--primary); }
.compare .group + tr th, .compare .group + tr td { border-top: 0; }
.compare .yes, .compare .no { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 12px; vertical-align: middle; }
.compare .yes { background: var(--primary-container); color: var(--on-primary-container); }
.compare td:last-child .yes { background: var(--primary); color: var(--on-primary); }
.compare .no { color: var(--outline); }
.compare .yes svg, .compare .no svg { width: 18px; height: 18px; }
@media (max-width: 479.98px) { .compare th, .compare td { padding: 12px 6px; } .compare td { width: 48px; } .compare caption { padding-inline: 6px; } }

/* ---------- FAQ (expressive accordion) ---------- */
.faq { display: grid; gap: 8px; max-width: 860px; }
.faq-layout { display: grid; gap: 8px; }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 56px; align-items: start; } .faq-layout .section-head { position: sticky; top: var(--sticky-top); } }
.faq details {
  background: var(--surface-container); border-radius: var(--r-l);
  transition: border-radius var(--dur-m) var(--spring), background-color var(--dur-s) linear;
}
.faq details[open] { background: var(--secondary-container); color: var(--on-secondary-container); border-radius: var(--r-xl); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; font-weight: 600; font-size: 1.125rem; border-radius: inherit;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-container-highest); transition: transform var(--dur-m) var(--spring), border-radius var(--dur-m) var(--spring); }
.faq details[open] summary .chev { transform: rotate(180deg); border-radius: 14px; background: var(--surface-container-lowest); }
.faq summary .chev svg { width: 22px; height: 22px; }
.faq .answer { padding: 0 24px 22px; max-width: 70ch; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--brand); color: var(--on-brand);
  border-radius: var(--r-xxl); padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  display: grid; gap: 24px; align-items: center;
}
@media (min-width: 900px) { .cta { grid-template-columns: 1fr auto; } }
.cta h2 { color: var(--on-brand); }
.cta p { margin: 12px 0 0; color: var(--on-brand); font-size: 1.125rem; max-width: 46ch; }
.cta .deco { position: absolute; z-index: -1; fill: var(--on-brand); opacity: .1; }
.cta .deco.d1 { width: 340px; right: -80px; bottom: -140px; }
.cta :focus-visible { outline-color: var(--on-brand); }

/* ---------- Footer ---------- */
.footer { margin-top: clamp(56px, 8vw, 104px); background: var(--surface-container-low); border-radius: var(--r-xxl) var(--r-xxl) 0 0; padding: 48px 0 32px; font-size: .9375rem; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h2 { font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-variant); font-weight: 650; margin-bottom: 12px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.footer ul a { display: inline-flex; align-items: center; min-height: 48px; color: var(--on-surface); text-decoration: none; }
.footer ul a:hover { color: var(--primary); text-decoration: underline; }
.footer .tag { color: var(--on-surface-variant); max-width: 36ch; margin-top: 12px; }
.footer-grid > div { min-width: 0; }
@media (min-width: 480px) and (max-width: 899.98px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }
.footer .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--outline-variant); color: var(--on-surface-variant); font-size: .875rem; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.footer .legal p { margin: 0; }

/* ---------- Document pages (legal, support) ---------- */
.doc-hero { padding-block: clamp(24px, 4vw, 48px) 0; }
.doc-hero .panel {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--r-xxl); padding: clamp(28px, 5vw, 56px);
}
.doc-hero .panel.tertiary { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.doc-hero .panel.secondary { background: var(--secondary-container); color: var(--on-secondary-container); }
.doc-hero .panel .deco { position: absolute; z-index: -1; width: 260px; right: -60px; bottom: -90px; fill: currentColor; opacity: .08; }
.doc-hero h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.8rem); font-weight: 660; letter-spacing: -0.035em; line-height: 1.04; max-width: 18ch; }
.doc-hero .meta { margin: 16px 0 0; font-weight: 550; opacity: .85; }
.doc-hero .intro { margin: 16px 0 0; font-size: 1.125rem; max-width: 60ch; }

.doc { display: grid; gap: 40px; padding-block: clamp(32px, 5vw, 56px) 0; }
@media (min-width: 1024px) { .doc.has-toc { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; } }
.toc { align-self: start; min-width: 0; background: var(--surface-container-low); border-radius: var(--r-l); padding: 8px; font-size: .9375rem; }
@media (min-width: 1024px) { .toc { position: sticky; top: var(--sticky-top); max-height: calc(100vh - var(--sticky-top) - 24px); overflow: auto; } }
.toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 4px 0 12px; border-radius: var(--r-m); }
.toc summary::-webkit-details-marker { display: none; }
.toc-title { font-size: .8125rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--on-surface-variant); }
.toc .chev { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-container-high); transition: transform var(--dur-m) var(--spring); }
.toc .chev svg { width: 20px; height: 20px; }
.toc details[open] .chev { transform: rotate(180deg); }
.toc ol { list-style: none; margin: 0; padding: 0 0 4px; }
.toc a { display: flex; align-items: center; min-height: 48px; padding: 6px 12px; border-radius: var(--r-full); color: var(--on-surface); text-decoration: none; line-height: 1.35; }
@media (min-width: 1024px) and (pointer: fine) { .toc a { min-height: 40px; } }
.toc a:hover { background: var(--surface-container-high); }

.prose { max-width: 74ch; min-width: 0; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.025em; margin: 48px 0 16px; padding-top: 8px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.25rem; margin: 28px 0 10px; letter-spacing: -0.01em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--primary); }
.prose strong { font-weight: 650; }
.prose address { font-style: normal; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--surface-container-high); padding: 2px 6px; border-radius: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .96rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--outline-variant); }
.prose thead th { font-weight: 650; color: var(--on-surface-variant); }
.prose .table-scroll { overflow-x: auto; }

.note {
  border-radius: var(--r-l); padding: 20px 24px; margin: 0 0 1.2em;
  background: var(--secondary-container); color: var(--on-secondary-container);
}
.note.primary { background: var(--primary-container); color: var(--on-primary-container); }
.note.tertiary { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.note > :last-child { margin-bottom: 0; }
.note a { color: inherit; font-weight: 600; }

/* Numbered steps with expressive number badges */
.steps { list-style: none; padding: 0 !important; margin: 0 0 1.4em; display: grid; gap: 10px; counter-reset: step; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: 16px; background: var(--surface-container); border-radius: var(--r-l); padding: 14px 18px; margin: 0 !important; }
.steps li::before {
  content: counter(step); flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); font-weight: 700; border-radius: 14px;
  transition: border-radius var(--dur-m) var(--spring), transform var(--dur-m) var(--spring);
}
.steps li:hover::before { border-radius: 50%; transform: rotate(-10deg); }

.cards-2 { display: grid; gap: 16px; margin: 0 0 1.4em; }
@media (min-width: 600px) { .cards-2 { grid-template-columns: 1fr 1fr; } }
.card { background: var(--surface-container); border-radius: var(--r-xl); padding: 24px; }
.card h3 { margin-top: 0 !important; }
.card > :last-child { margin-bottom: 0; }

/* 404 */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 64px; }
.notfound .big { position: relative; width: 220px; height: 220px; margin: 0 auto 32px; display: grid; place-items: center; }
.notfound .big svg { position: absolute; inset: 0; fill: var(--primary-container); }
.notfound .big span { position: relative; font-size: 4rem; font-weight: 720; letter-spacing: -0.05em; color: var(--on-primary-container); }
.notfound p { color: var(--on-surface-variant); }
.notfound .btn-row { justify-content: center; margin-top: 24px; }
.notfound h1 { margin-bottom: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0s !important; animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .footer, .toc, .skip-link, .scrim { display: none !important; }
  body { background: #fff; color: #000; }
  .doc-hero .panel { background: none; padding: 0; }
}

/* "Coming soon" label for Pro features that are built but not switched on yet */
.soon {
  display: inline-flex; align-items: center; vertical-align: middle; min-height: 22px; padding: 0 10px; margin-left: 6px;
  border-radius: var(--r-full); background: var(--tertiary-container); color: var(--on-tertiary-container);
  font-size: .75rem; font-weight: 650; letter-spacing: .02em; white-space: nowrap;
}
.compare td .soon { margin-left: 0; }
/* The AI coach teaser: a full-width tonal card under the Pro feature grid */
.pro-feature-wide {
  grid-column: 1 / -1; background: var(--tertiary-container); color: var(--on-tertiary-container);
  --shape-c: var(--tertiary); --on-shape: var(--on-tertiary);
}
.pro-feature-wide p { color: inherit; opacity: .85; max-width: 62ch; }
@media (min-width: 1024px) { .pro-feature-wide { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; } }
.pro-feature-wide .soon { background: var(--tertiary); color: var(--on-tertiary); }

/* With a real screenshot (its status bar cropped off): the app's background as the status strip around the camera,
   the screen image at full width below it, so nothing is cropped at the sides or cut by the rounded corners. */
.screen[style*="--shot"] { background: #f9f9ff; }
.screen[style*="--shot"]::after { top: 3.8%; background-size: 100% auto; background-position: center top; }
.screen[style*="--shot"] .mock { display: none; }