/* Dark only, like a nursery at night. Near-black canvas with a faint starfield, quiet cards with a
   hairline edge, white pills for actions, and a soft moonlight lavender as the one accent. */
:root {
  color-scheme: dark;
  --bg: #000000;
  --band: #07070b;
  --card: #0e0e12;
  --card-2: #16161c;
  --edge: rgba(255, 255, 255, 0.08);
  --edge-strong: rgba(255, 255, 255, 0.14);
  --text: #f5f5f7;
  --dim: #8e8e93;
  --muted: #a1a1a6;
  --link: #2997ff;
  --accent: #a99bff;
  --accent-2: #e6e0ff;
  --phone-edge: #5a5a5f;
  --radius: 22px;
  --wrap: 1000px;
  --shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--font-display); }
svg { width: 1em; height: 1em; flex: none; }

.wrap { max-width: calc(var(--wrap) + 40px); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 760px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip { position: absolute; left: 12px; top: -48px; z-index: 20; background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Header: a capsule that floats over the page, as in the reference */
.site-header { position: sticky; top: 14px; z-index: 10; padding: 14px 16px 0; margin-top: -14px; pointer-events: none; }
.site-header__bar {
  pointer-events: auto;
  display: flex; align-items: center; gap: 26px;
  width: fit-content; max-width: 100%; margin: 0 auto; padding: 8px 8px 8px 18px;
  border-radius: 999px; border: 1px solid var(--edge-strong);
  background: rgba(14, 14, 16, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font-weight: 600; }
.brand img { width: 26px; height: 26px; border-radius: 7px; }
.site-nav { display: flex; gap: 22px; font-size: 14px; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-header__bar .store-soon--compact { padding: 8px 16px; background: var(--text); color: #000; border-color: transparent; }

/* Actions */
.pill-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  background: var(--text); color: #000; text-decoration: none;
  font-weight: 600; font-size: 15px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.pill-button:hover { background: #fff; transform: translateY(-1px); }
.store-soon {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); color: var(--muted);
  border: 1px solid var(--edge-strong);
  font-weight: 600; font-size: 15px; cursor: default; user-select: none;
}
.store-soon svg { width: 18px; height: 18px; }
.store-soon--compact { padding: 6px 14px; font-size: 13px; }
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { height: 48px; width: auto; }
.store-badge--compact img { height: 34px; }
.cta-note { margin: 14px 0 0; font-size: 13px; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .pill-button { transition: none; } .pill-button:hover { transform: none; } }

/* Hero: centered, then the phones fanned out below */
.hero { position: relative; padding: 72px 0 0; overflow: hidden; isolation: isolate; text-align: center; }
.hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 32% at 50% 78%, rgba(124, 104, 255, 0.26), transparent 70%),
    radial-gradient(30% 20% at 50% 100%, rgba(80, 140, 255, 0.12), transparent 70%);
}
.hero__inner { display: flex; flex-direction: column; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px;
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--edge);
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.hero h1 { font-size: clamp(42px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -0.045em; margin: 0 0 20px; max-width: 13em; text-wrap: balance; }
.glow {
  background: linear-gradient(100deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: clamp(17px, 1.8vw, 20px); color: var(--muted); margin: 0 0 30px; max-width: 34em; text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }

.hero__stage { position: relative; width: 100%; max-width: 760px; height: 600px; margin-top: 56px; }
.hero__stage .phone { position: absolute; top: 0; left: 50%; width: 270px; }
.hero__stage .phone--front { z-index: 2; transform: translateX(-50%); }
.hero__stage .phone--left { width: 236px; transform: translateX(-118%) translateY(56px) rotate(-8deg); filter: brightness(0.7); }
.hero__stage .phone--right { width: 236px; transform: translateX(18%) translateY(56px) rotate(8deg); filter: brightness(0.7); }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

/* Floating sounds and the mascot around the phones */
.chip {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(24, 24, 30, 0.88); color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap;
  border: 1px solid var(--edge-strong);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.8);
  animation: chip-float 6s ease-in-out infinite;
}
.chip img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; }
.chip--1 { top: 8%; right: 2%; }
.chip--2 { top: 38%; left: 0; animation-delay: -2s; }
.chip--3 { top: 64%; right: -2%; animation-delay: -4s; }
/* A tiny equalizer: the sound is playing */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--accent); transform-origin: bottom; animation: eq 1.2s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -0.4s; }
.eq i:nth-child(3) { animation-delay: -0.8s; }
.hero__mascot {
  position: absolute; z-index: 4; width: 116px; left: 1%; bottom: 210px;
  filter: drop-shadow(0 0 40px rgba(169, 155, 255, 0.35)) drop-shadow(0 24px 30px rgba(0, 0, 0, 0.7));
  animation: mascot-bob 6s ease-in-out infinite;
}
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mascot-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes twinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chip, .hero__mascot, .eq i, .stars { animation: none; } }

/* Starfield: a few layers of tiny dots, like the app's player background */
.stars {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 62%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 43% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 33%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 14%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 41%, rgba(255, 255, 255, 0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 7%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 47%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 20% 84%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 72%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 29%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 56%, rgba(255, 255, 255, 0.6) 50%, transparent 51%);
  background-size: 640px 520px;
  opacity: 0.8;
  animation: twinkle 7s ease-in-out infinite;
}

/* iPhone mockup: the screenshot is the whole screen; the bezel, edge, Dynamic Island and buttons
   sit around it, in proportion to the 1320 × 2868 screen. */
.phone {
  --bezel: 7px;
  position: relative;
  aspect-ratio: 1320 / 2868;
  border-radius: 12.5% / 5.75%;
  box-shadow:
    0 0 0 var(--bezel) #050505,
    0 0 0 calc(var(--bezel) + 1.5px) var(--phone-edge),
    0 0 0 calc(var(--bezel) + 2.5px) #111,
    var(--shadow);
}
.phone img { width: 100%; height: 100%; border-radius: inherit; display: block; background: #000; }
.phone::before {
  content: ""; position: absolute; z-index: 1; top: 1.15%; left: 50%; width: 28.6%; height: 3.9%;
  transform: translateX(-50%); border-radius: 999px; background: #000;
}
.phone::after {
  content: ""; position: absolute; top: 15%; height: 26%;
  left: calc(-1 * var(--bezel) - 4.5px); right: calc(-1 * var(--bezel) - 4.5px);
  background:
    linear-gradient(to bottom, var(--phone-edge) 0 9%, transparent 9% 22%, var(--phone-edge) 22% 44%, transparent 44% 52%, var(--phone-edge) 52% 74%, transparent 74%) left / 3px 100% no-repeat,
    linear-gradient(to bottom, transparent 0 30%, var(--phone-edge) 30% 72%, transparent 72%) right / 3px 100% no-repeat;
  border-radius: 2px;
  pointer-events: none;
}

/* Sections: icon tile, two-tone title, content, pill */
.section { padding: 112px 0; }
.section--band { background: linear-gradient(to bottom, var(--band), var(--bg) 70%); border-top: 1px solid var(--edge); }
.section--glow { position: relative; isolation: isolate; }
.section--glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 40% at 50% 0%, rgba(124, 104, 255, 0.14), transparent 70%);
}
.section__head { text-align: center; margin: 0 auto 48px; max-width: 720px; display: flex; flex-direction: column; align-items: center; }
.section__title { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.dim { color: var(--dim); }
.section__lede { margin: 16px 0 0; color: var(--muted); font-size: 18px; max-width: 34em; text-wrap: pretty; }
.section__cta { display: flex; justify-content: center; margin-top: 40px; }

.icon-tile {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 24px;
  border-radius: 16px; color: var(--text);
  background: linear-gradient(180deg, #1c1c20, #0e0e10);
  border: 1px solid var(--edge-strong);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.02), 0 10px 30px -8px rgba(124, 104, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.icon-tile svg { width: 26px; height: 26px; }

/* Cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  position: relative; overflow: hidden; height: 100%;
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius);
  padding: 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.card h3 { font-size: 19px; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card--link { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
.card--link:hover { border-color: var(--edge-strong); transform: translateY(-2px); }
.card__more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 600; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .card--link { transition: none; } .card--link:hover { transform: none; } }

/* A slice of a screenshot, framed like a window onto the screen, fading out at the bottom. */
.frag {
  position: relative; overflow: hidden; width: 100%;
  border-radius: 14px; border: 1px solid var(--edge-strong);
  background: #000;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, #000 86%, transparent);
}
.frag img { width: 100%; height: auto; display: block; }

/* How it works */
.stepper {
  list-style: none; margin: 0 auto 28px; padding: 0; max-width: 760px;
  display: grid; grid-template-columns: repeat(3, 1fr); position: relative;
}
.stepper::before { content: ""; position: absolute; left: 16%; right: 16%; top: 50%; height: 1px; background: var(--edge-strong); }
.stepper li {
  position: relative; justify-self: center; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--card-2); color: var(--muted); border: 1px solid var(--edge);
}
.stepper li.is-on { background: var(--text); color: #000; }
.card--step { display: flex; flex-direction: column; padding-bottom: 0; }
.card--step .card__visual { margin-top: 22px; padding: 0 8px; }

/* Trust */
.trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card--trust .icon-tile { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.card--trust .icon-tile svg { width: 22px; height: 22px; }

/* Feature groups: a wide card over two, or a 2 × 2 grid */
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card--feature { display: flex; flex-direction: column-reverse; gap: 24px; padding: 28px; }
.card--feature .card__visual { display: flex; justify-content: center; align-items: center; min-height: 200px; }
.card--feature .frag { max-width: 300px; }
.card--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 32px; }
.card--wide .card__copy { flex: 1 1 44%; }
.card--wide .card__copy h3 { font-size: 24px; }
.card--wide .card__copy p { font-size: 16px; }
.card--wide .card__copy .pill-button { margin-top: 22px; }
.card--wide .card__visual { flex: 1 1 56%; }
.card--wide .frag { max-width: 360px; }
.card--peek { padding-bottom: 0; }
.card--peek .card__visual { align-self: flex-end; min-height: 0; }

.shot { --shot-w: 220px; width: calc(var(--shot-w) + 24px); height: var(--shot-h, 300px); overflow: hidden; padding: 12px 12px 0; }
.shot .phone { width: var(--shot-w); --bezel: 6px; }

.pro-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 6px; background: var(--accent); color: #000;
}

/* Drawn mockups for what has no screenshot */

.offline { position: relative; width: 100%; max-width: 300px; padding-top: 38px; }
.float-pill {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 1;
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 8px 10px 8px 8px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: rgba(28, 28, 30, 0.92); border: 1px solid var(--edge-strong);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.8);
}
.float-pill__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: #000; }
.float-pill__icon svg { width: 16px; height: 16px; }
.toggle { width: 42px; height: 25px; border-radius: 999px; background: #34c759; position: relative; }
.toggle::after { content: ""; position: absolute; right: 2px; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; }

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.points li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.points svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--accent); color: #000; }

.segmented { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--edge); font-size: 13px; font-weight: 600; white-space: nowrap; }
.segmented span { padding: 7px 10px; border-radius: 9px; color: var(--dim); }
.segmented .is-on { background: #3a3a3c; color: var(--text); }

/* The library: a grid of sound artwork */
.sound-grid { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 420px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sound-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--edge); }
.sound-grid__more { grid-column: span 4; justify-self: center; margin-top: 6px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--card-2); border: 1px solid var(--edge); }

/* Now Playing on the Lock Screen */
.np { width: 100%; max-width: 300px; padding: 16px; border-radius: 24px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--edge-strong); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.np__row { display: flex; align-items: center; gap: 12px; }
.np__row img { width: 48px; height: 48px; border-radius: 10px; }
.np__row strong { display: block; font-size: 15px; }
.np__row span { display: block; font-size: 13px; color: var(--muted); }
.np__bar { height: 5px; margin: 16px 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.np__bar span { display: block; width: 38%; height: 100%; background: rgba(255, 255, 255, 0.85); }
.np__controls { display: flex; justify-content: space-around; align-items: center; }
.np__controls svg { width: 26px; height: 26px; }
.np__controls svg:nth-child(2) { width: 34px; height: 34px; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 880px; margin: 0 auto; }
.plan { display: flex; flex-direction: column; border: 1px solid var(--edge); border-radius: 26px; padding: 32px; background: var(--card); }
.plan h3 { font-size: 22px; margin: 0 0 18px; }
.plan__note { display: flex; align-items: center; min-height: 40px; margin: 0 0 22px; color: var(--muted); font-size: 15px; }
.plan__switch { display: flex; gap: 4px; padding: 4px; margin: 0 0 22px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.08); min-height: 40px; }
.plan__switch label { flex: 1; text-align: center; padding: 7px 8px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.plan__price { font-family: var(--font-display); font-size: 48px; font-weight: 700; letter-spacing: -0.03em; margin: 0; line-height: 1.1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.plan__price > span:not(.plan__badge) { font-family: var(--font); font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.plan__badge { align-self: center; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #000; font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.plan__caption { margin: 6px 0 24px; color: var(--muted); font-size: 15px; min-height: 1.5em; }
.plan__list { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--edge); display: grid; gap: 10px; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.plan__list svg { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.plan--pro {
  background: radial-gradient(90% 70% at 100% 0%, rgba(124, 104, 255, 0.26), transparent 60%), var(--card-2);
  border-color: rgba(124, 104, 255, 0.4);
}
/* One price shows at a time: the one whose radio is checked (plan ids from site.json). */
.plan__option { display: none; }
.plan--pro input[value="monthly"]:checked ~ [data-plan="monthly"],
.plan--pro input[value="annual"]:checked ~ [data-plan="annual"],
.plan--pro input[value="lifetime"]:checked ~ [data-plan="lifetime"] { display: block; }
.plan--pro input[value="monthly"]:checked ~ .plan__switch label[for$="-monthly"],
.plan--pro input[value="annual"]:checked ~ .plan__switch label[for$="-annual"],
.plan--pro input[value="lifetime"]:checked ~ .plan__switch label[for$="-lifetime"] { background: var(--text); color: #000; }
.plan--pro input[value="monthly"]:focus-visible ~ .plan__switch label[for$="-monthly"],
.plan--pro input[value="annual"]:focus-visible ~ .plan__switch label[for$="-annual"],
.plan--pro input[value="lifetime"]:focus-visible ~ .plan__switch label[for$="-lifetime"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.fineprint { margin: 20px auto 0; font-size: 13px; color: var(--dim); max-width: 640px; text-align: center; }

/* FAQ */
.faq { border-top: 1px solid var(--edge); }
.faq details { border-bottom: 1px solid var(--edge); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative;
  font-size: 18px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0 0 22px; color: var(--muted); max-width: 40em; }

/* Final call to action */
.final {
  padding: 120px 0; text-align: center; border-top: 1px solid var(--edge);
  background: radial-gradient(40% 50% at 50% 30%, rgba(124, 104, 255, 0.16), transparent 70%), var(--band);
}
.final__inner { display: flex; flex-direction: column; align-items: center; }
.final__icon { width: 104px; height: 104px; border-radius: 22.37%; margin-bottom: 28px; box-shadow: 0 20px 50px -12px rgba(124, 104, 255, 0.5), 0 0 0 1px var(--edge-strong); }
.final h2 { font-size: clamp(36px, 5.2vw, 60px); letter-spacing: -0.04em; line-height: 1.04; margin: 0 0 14px; text-wrap: balance; }
.final p { color: var(--muted); font-size: 18px; margin: 0 0 30px; }

/* Documents */
.doc { padding-top: 56px; padding-bottom: 80px; }
.doc h1 { font-size: 40px; line-height: 1.1; margin: 0 0 8px; letter-spacing: -0.03em; }
.doc h2 { font-size: 24px; margin: 40px 0 8px; letter-spacing: -0.015em; }
.doc h3 { font-size: 18px; margin: 24px 0 4px; }
.doc p, .doc ul, .doc ol { margin: 0 0 12px; color: #d1d1d6; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--text); }
.meta { color: var(--dim) !important; margin-bottom: 32px !important; }
.summary { border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); padding: 16px 0; margin: 24px 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--edge); }
th { font-weight: 600; }

.not-found { padding: 96px 20px 120px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.not-found img { width: 112px; margin-bottom: 20px; }
.not-found h1 { font-size: 36px; letter-spacing: -0.03em; margin: 0 0 8px; }
.not-found p { color: var(--muted); margin: 0 0 28px; }
.button { display: inline-block; background: var(--text); color: #000; text-decoration: none; font-weight: 600; padding: 12px 22px; border-radius: 999px; }

/* Footer */
.site-footer { border-top: 1px solid var(--edge); font-size: 14px; color: var(--dim); padding: 48px 0 calc(32px + env(safe-area-inset-bottom)); }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 24px; margin-bottom: 40px; }
.site-footer h2 { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 10px; font-family: var(--font); }
.site-footer__cols a { display: block; color: var(--dim); text-decoration: none; padding: 4px 0; }
.site-footer a:hover { color: var(--text); }
.site-footer__base { display: flex; flex-wrap: wrap; gap: 8px 24px; border-top: 1px solid var(--edge); padding-top: 20px; font-size: 12px; }
.site-footer__tm { margin-left: auto; }
.lang { display: flex; gap: 14px; }
.lang a { color: var(--dim); text-decoration: none; }
.lang a[aria-current] { color: var(--text); font-weight: 600; }

/* Tablet */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-header__bar { gap: 16px; }
  .section { padding: 88px 0; }
  .hero__stage { height: 520px; }
  .hero__stage .phone { width: 230px; }
  .hero__stage .phone--left, .hero__stage .phone--right { width: 200px; }
  .cards--3, .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--3 > :last-child:nth-child(odd) { grid-column: span 2; }
  .card--wide { flex-direction: column-reverse; align-items: stretch; }
  .card--wide .card__visual { justify-content: center; }
  .card--peek .card__visual { align-self: center; }
  .card--wide .card__copy, .card--wide .card__visual { flex: none; }
}

/* Phone */
@media (max-width: 600px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .hero { padding-top: 48px; }
  .hero__stage { height: 440px; margin-top: 40px; }
  .hero__stage .phone { width: 190px; --bezel: 5px; }
  .hero__stage .phone--left, .hero__stage .phone--right { width: 160px; }
  .hero__stage .phone--left { transform: translateX(-104%) translateY(44px) rotate(-8deg); }
  .hero__stage .phone--right { transform: translateX(4%) translateY(44px) rotate(8deg); }
  .hero__mascot { width: 72px; left: -2%; bottom: 150px; }
  .chip { font-size: 13px; padding: 5px 10px 5px 5px; gap: 8px; }
  .chip img { width: 24px; height: 24px; border-radius: 7px; }
  .chip--1 { top: 2%; right: -2%; }
  .chip--2 { top: 30%; left: -3%; }
  .chip--3 .eq, .chip--1 .eq { display: none; }
  .chip--3 { top: 56%; right: -3%; }
  .section { padding: 72px 0; }
  .section__head { margin-bottom: 32px; }
  .cards--2, .cards--3, .trust, .feature-grid, .plans { grid-template-columns: 1fr; }
  .cards--3 > :last-child:nth-child(odd) { grid-column: auto; }
  .card--wide { grid-column: auto; }
  .card--feature .card__visual { min-height: 0; }
    .stepper { display: none; }
  .faq summary { font-size: 17px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .site-footer__tm { margin-left: 0; }
  .doc h1 { font-size: 32px; }
}