/*
 * wllte.app: white, quiet, the app's mint for what matters. The navigation is
 * liquid glass over the page; the app's own type (Plus Jakarta Sans, Geist Mono
 * for money) is served from here, so the site asks nothing of anyone else.
 */

@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta_medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta_semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta_bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta_extrabold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist_mono_medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist_mono_semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --ink: #0e1110;
  --ink-2: #505755;
  --ink-3: #6b716f;
  --line: #e7ebe9;
  --bg: #ffffff;
  --soft: #f4f7f5;
  --graphite: #0f1211;
  --mint: #3fcf9a;
  --mint-soft: #a8f0c8;
  --mint-wash: #eafbf2;
  --mint-ink: #048157;
  --titanium: #e6ecee;

  --sans: "Jakarta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 5vw, 120px);
  --wide: 1200px;
  --radius-card: 32px;
  --shadow-card: 0 1px 2px rgb(14 17 16 / 0.04), 0 16px 40px -8px rgb(14 17 16 / 0.06);
  --shadow-phone: 0 40px 80px -20px rgb(14 17 16 / 0.18), 0 8px 16px -4px rgb(14 17 16 / 0.1);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* What changes with the theme */
  --surface: #ffffff;
  --btn-bg: var(--graphite);
  --btn-fg: #ffffff;
  --contrast-bg: var(--graphite);
  --dark-card: var(--graphite);
  /* Liquid glass in the app's own values (ui/glass/LiquidGlass.kt, its light palette) */
  --glass-tint: rgb(220 224 219 / 0.42);
  --glass-tint-flat: rgb(247 247 244 / 0.84);
  --glass-sheet: rgb(255 255 255 / 0.62);
  --glass-sheen: rgb(255 255 255 / 0.4);
  --glass-shade: rgb(0 0 0 / 0.07);
  --glass-edge-top: rgb(0 0 0 / 0.03);
  --glass-edge-bottom: rgb(0 0 0 / 0.16);
  --glass-rim-top: rgb(255 255 255 / 0.9);
  --glass-rim-mid: rgb(255 255 255 / 0.05);
  --glass-rim-bottom: rgb(255 255 255 / 0.32);
  --glass-shadow: 0 10px 28px -8px rgb(0 0 0 / 0.2), 0 2px 6px -2px rgb(0 0 0 / 0.08);
  --glass-border: rgb(0 0 0 / 0.06);
  --glass-fill: rgb(255 255 255 / 0.6);
  /* Text and lines on the graphite cards, the same in both themes */
  --on-dark: #ffffff;
  --on-dark-2: rgb(255 255 255 / 0.68);
  --on-dark-line: rgb(255 255 255 / 0.1);
  --on-dark-fill: rgb(255 255 255 / 0.08);
  --on-mint: #0e1110;
  --shadow-border: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04);
  --image-outline: oklch(0 0 0 / 0.1);
  color-scheme: light;
}

/* Dark: the app's own night palette, the mint a little lighter so it reads. */
:root[data-theme="dark"] {
  --ink: #f2f2ef;
  --ink-2: #a9aeac;
  --ink-3: #7d8381;
  --line: #222726;
  --bg: #0a0c0b;
  --soft: #111413;
  --mint-wash: rgb(63 207 154 / 0.12);
  --mint-ink: #6fe3b4;
  --titanium: #1c2120;
  --surface: #161a19;
  --btn-bg: #f2f2ef;
  --btn-fg: #0e1110;
  --contrast-bg: #232928;
  --dark-card: #111514;
  --glass-tint: rgb(255 255 255 / 0.05);
  --glass-tint-flat: rgb(22 22 22 / 0.86);
  --glass-sheet: rgb(12 12 12 / 0.62);
  --glass-sheen: transparent;
  --glass-shade: transparent;
  --glass-edge-top: transparent;
  --glass-edge-bottom: transparent;
  --glass-rim-top: rgb(255 255 255 / 0.32);
  --glass-rim-mid: rgb(255 255 255 / 0.02);
  --glass-rim-bottom: rgb(255 255 255 / 0.11);
  --glass-shadow: none;
  --glass-border: rgb(255 255 255 / 0.1);
  --glass-fill: rgb(255 255 255 / 0.06);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -8px rgb(0 0 0 / 0.5);
  --shadow-phone: 0 40px 80px -20px rgb(0 0 0 / 0.7), 0 8px 16px -4px rgb(0 0 0 / 0.5);
  --shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08);
  --image-outline: oklch(1 0 0 / 0.1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.625 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* A link inside a sentence is underlined, not told apart by color alone. */
p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 3px; border-radius: 8px; }
.skip-link { position: absolute; z-index: 60; top: 16px; left: -999px; padding: 10px 18px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font: 600 0.9375rem/1.33 var(--sans); }
.skip-link:focus { left: 16px; }
.icon { width: 24px; height: 24px; flex: none; stroke-width: 2; }

/* Type */
.display { font-weight: 800; font-size: clamp(2.5rem, 5.4vw, 4.625rem); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.h1 { font-size: clamp(2rem, 4.2vw, 3.375rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.br-wide { display: none; }
@media (min-width: 1100px) { .br-wide { display: inline; } .display { text-wrap: wrap; } }
.h3 { font-size: 1.375rem; line-height: 1.27; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
p { text-wrap: pretty; }
.small { font-size: 0.875rem; line-height: 1.43; font-weight: 500; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.mint { color: var(--mint-ink); }
.money { font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.label { font-family: var(--mono); font-weight: 500; font-size: 0.75rem; line-height: 1.33; letter-spacing: 0.05em; text-transform: uppercase; }

/* Layout */
.wrap { width: min(var(--wide), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: clamp(72px, 10vw, 140px); }
.stack { display: flex; flex-direction: column; }
.center { text-align: center; align-items: center; }

/* Eyebrow: a quiet line of the app's mint above a heading, nothing to press */
.eyebrow { font: 600 0.9375rem/1.4 var(--sans); color: var(--mint-ink); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font: 600 0.9375rem/1.33 var(--sans); cursor: pointer; white-space: nowrap;
  transition: scale 150ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { scale: 0.96; }
.btn .icon, .nav .icon { width: 18px; height: 18px; stroke-width: 2.67; }
.btn-dark { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 10px 24px -10px rgb(14 17 16 / 0.5); }
.btn-light { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-border); }
.btn-mint { background: var(--mint); color: var(--on-mint); }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 0.875rem; }
.btn-block { width: 100%; }
.store { padding: 0 24px 0 20px; gap: 12px; }
.store .icon { width: 22px; height: 22px; color: var(--mint); }
.store span { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.store small { font: 500 0.75rem/1.33 var(--sans); opacity: 0.7; }
.store strong { font: 700 1.0625rem/1.18 var(--sans); letter-spacing: -0.01em; }

/* ---------- Liquid glass ---------- */
/* Frosted where the browser can't bend the backdrop: a heavier blur and more tint keep the labels readable. */
.glass {
  position: relative;
  background: linear-gradient(var(--glass-sheen), transparent 55%), var(--glass-tint-flat);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  box-shadow: var(--glass-shadow), inset 0 -8px 12px -6px var(--glass-shade);
}
/* Clear, as in the app, where site.js runs the lens (Chromium): the rim bends what's behind
   and a veil in the middle carries the labels, so the tint can be thin. */
.lens .glass { background: linear-gradient(var(--glass-sheen), transparent 55%), var(--glass-tint); }
.nav-sheet { --glass-tint: var(--glass-sheet); --glass-tint-flat: var(--glass-sheet); }
.glass::before, .glass::after {
  content: ""; position: absolute; border-radius: inherit; pointer-events: none; padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Outline: faint on top, darker underneath, so the glass reads as a thick lens. */
.glass::after { inset: 0; background: linear-gradient(var(--glass-edge-top), var(--glass-edge-bottom)); }
/* Specular rim: bright on top, gone in the middle, a faint bounce at the bottom. */
.glass::before { inset: 1px; background: linear-gradient(var(--glass-rim-top), var(--glass-rim-mid) 45%, var(--glass-rim-bottom)); }
/* Navigation */
.nav {
  position: fixed; z-index: 50; top: 16px; left: 50%; transform: translateX(-50%);
  width: min(1040px, 100% - 32px); height: 64px; border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 20px;
  transition: height 0.4s var(--ease), top 0.4s var(--ease);
}
.nav.scrolled { top: 10px; height: 58px; padding-right: 9px; }
.brand { display: flex; align-items: center; gap: 10px; font: 800 1.3125rem/1 var(--sans); letter-spacing: -0.03em; }
.brand img { width: 34px; height: 34px; }
.nav-links { display: flex; gap: 34px; }
.nav-links a { font: 500 0.875rem/1.43 var(--sans); color: var(--ink); }
/* The glass is clear, so the links take the full ink; the page you are on is the heavier one. */
.nav-links a[aria-current="page"] { font-weight: 700; }
.nav-menu { display: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--btn-bg); color: var(--btn-fg); align-items: center; justify-content: center; cursor: pointer; }
.nav-menu .icon { width: 18px; height: 18px; }
.nav-sheet {
  position: fixed; z-index: 49; top: 84px; left: 16px; right: 16px; border-radius: 28px; padding: 12px;
  display: flex; flex-direction: column; gap: 2px;
  /* Closed, it is out of the tab order and the accessibility tree, not just transparent. */
  opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none; visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s 0.4s;
}
.nav-sheet.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.nav-sheet a:not(.btn) { padding: 14px 16px; border-radius: 16px; font: 600 1.0625rem/1.3 var(--sans); }
@media (hover: hover) { .nav-sheet a:not(.btn):hover { background: var(--glass-fill); } }
@media (min-width: 861px) { .nav-sheet { display: none; } }
@media (max-height: 480px) { .nav-sheet { max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; } }
.nav-sheet .btn { margin-top: 8px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 180px 0 96px; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); align-items: center; gap: 40px; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-copy .display .mint { color: var(--mint-ink); }
.hero-copy .lead { max-width: 540px; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }
.proof { display: flex; gap: 40px; padding-top: 12px; }
.proof div { display: flex; flex-direction: column; gap: 4px; }
.proof .money { font-size: 1.25rem; line-height: 1.2; }

.hero-art { position: relative; display: grid; justify-items: center; }
.phone {
  position: relative; padding: 10px; border-radius: 54px; background: var(--graphite);
  box-shadow: var(--shadow-phone), inset 0 0 0 2px rgb(140 152 148 / 0.35);
}
.phone :is(img, video) { width: 100%; height: auto; border-radius: 44px; background: #0b0d0c; }
.phone.front { width: 336px; }


/* Section header */
.head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.head .lead { max-width: 620px; }
.head.center { margin-inline: auto; }

/* ---------- Privacy ---------- */
.privacy-section { padding-bottom: clamp(72px, 10vw, 140px); }
.privacy { display: grid; grid-template-columns: 440px 1fr; gap: 72px; align-items: end; padding: 80px 72px; border-radius: 40px; background: var(--dark-card); border: 1px solid transparent; box-shadow: var(--shadow-border); color: var(--on-dark); }
.privacy .mark { width: 84px; height: 84px; }
.privacy .label { color: var(--mint-soft); }
.privacy h2 { font-size: clamp(2rem, 3.4vw, 2.875rem); line-height: 1.13; letter-spacing: -0.025em; text-wrap: balance; }
.privacy .lead { color: var(--on-dark-2); }
.privacy .more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--mint-soft); }
.privacy .more .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.privacy-left { display: flex; flex-direction: column; gap: 20px; }
.points { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 40px; }
.points li { display: flex; flex-direction: column; gap: 12px; }
.points .badge { color: var(--mint); }
.points .badge .icon { stroke-width: 1.75; }
.points p { color: var(--on-dark-2); }

/* ---------- Gallery ---------- */
.gallery { background: var(--soft); }
.screens { display: flex; justify-content: center; gap: 56px; margin-top: 64px; }
.screens figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.screens figure:nth-child(odd) { padding-top: 40px; }
.screens .phone { position: relative; width: 298px; padding: 9px; border-radius: 50px; }
.screens .phone img { border-radius: 41px; }
.screens:focus-visible { outline-offset: 8px; border-radius: 24px; }
.screens figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; max-width: 260px; }

/* ---------- Pricing ---------- */
.plans { display: flex; justify-content: center; gap: 24px; margin-top: 56px; }
.plan { width: min(500px, 100%); display: flex; flex-direction: column; gap: 22px; padding: 40px; border-radius: 32px; border: 1px solid transparent; background: var(--surface); box-shadow: var(--shadow-border), var(--shadow-card); }
.plan .price { display: flex; flex-direction: column; gap: 4px; }
.plan .price .money { font-size: 2.75rem; line-height: 1.09; }
.plan hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.plan ul { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.plan li { display: flex; gap: 12px; color: var(--ink-2); }
.tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--mint-wash); color: var(--mint-ink); margin-top: 2px; }
.tick .icon { width: 13px; height: 13px; stroke-width: 2.8; }
/* Coming later: an empty ring, not a tick that says it's already there */
.plan li.later .tick { background: none; box-shadow: inset 0 0 0 1.5px var(--on-dark-line); }
.plan.pro { background: var(--dark-card); color: var(--on-dark); }
.plan.pro .label { color: var(--mint-soft); }
.plan.pro .price p, .plan.pro li { color: var(--on-dark-2); }
.plan.pro hr { border-color: var(--on-dark-line); }
.plan.pro .tick { background: var(--on-dark-fill); color: var(--mint); }
.soon { color: var(--mint-soft); margin-left: 8px; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 440px 1fr; gap: 80px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; cursor: pointer; font: 600 1.1875rem/1.37 var(--sans); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 22px; height: 22px; stroke-width: 2.2; transition: transform 0.35s var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details p { padding-bottom: 24px; color: var(--ink-2); max-width: 36rem; }

/* ---------- Final call ---------- */
.final {
  display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
  padding: 90px 24px 96px; border-radius: 40px;
  background: var(--soft);
}
.final img { width: 132px; height: 132px; }
.final h2 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.07; letter-spacing: -0.03em; text-wrap: balance; }

/* ---------- Offline: one bank notification, read and kept on the phone ---------- */
.offline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.offline-copy { display: flex; flex-direction: column; gap: 36px; }
.offline-note { max-width: 34rem; margin-top: -8px; }
.flow { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px); border-radius: var(--radius-card); background: var(--soft); view-timeline: --flow; }
.flow-phone { width: min(100%, 384px); display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 34px; background: var(--graphite); color: var(--on-dark); box-shadow: var(--shadow-phone); }
[data-theme="dark"] .flow-phone { background: #050606; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), var(--shadow-phone); }
.flow-status { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 6px; font: 600 0.8125rem/1 var(--sans); color: var(--on-dark-2); }
.flow-plane { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); }
.flow-plane .icon { width: 15px; height: 15px; stroke-width: 2; color: var(--mint); }
.flow-switch { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--mint); }
.flow-switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--graphite); }
.flow-notif { padding: 14px 16px; border-radius: 20px; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.flow-app { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font: 600 0.75rem/1 var(--sans); color: var(--on-dark-2); }
.flow-app .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.flow-notif p { font: 500 0.875rem/1.5 var(--sans); color: rgb(255 255 255 / 0.82); }
.flow-notif .keep { color: var(--mint-soft); font-weight: 600; }
.flow-notif .skip { opacity: 0.45; text-decoration: line-through; text-decoration-color: rgb(255 255 255 / 0.6); }
.flow-step { display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
.flow-step .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.flow-fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.flow-fields span { padding: 8px 12px; border-radius: 999px; background: rgb(63 207 154 / 0.14); color: var(--mint-soft); font: 600 0.875rem/1 var(--sans); }
.flow-fields .money { font-family: var(--mono); }
.flow-skipped { text-align: center; font: 500 0.75rem/1.3 var(--sans); color: rgb(255 255 255 / 0.45); }
.flow-store { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: rgb(63 207 154 / 0.1); box-shadow: inset 0 0 0 1px rgb(63 207 154 / 0.3); }
.flow-store .icon { flex: none; width: 22px; height: 22px; stroke-width: 2; color: var(--mint); }
.flow-store span { display: flex; flex-direction: column; gap: 4px; }
.flow-store b { font: 600 0.9375rem/1.2 var(--sans); }
.flow-store small { font: 500 0.75rem/1.2 var(--sans); color: var(--on-dark-2); }
.flow-server { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; border: 1.5px dashed color-mix(in oklab, var(--ink) 25%, transparent); color: var(--ink-3); font: 500 0.875rem/1.2 var(--sans); }
.flow-server .icon { width: 18px; height: 18px; stroke-width: 2; }
.flow-server b { margin-left: 6px; color: var(--ink); font-weight: 600; }

/* ---------- No subscription: what a monthly bill adds up to, drawn ---------- */
.nosub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.nosub-copy { display: flex; flex-direction: column; gap: 40px; }
.nosub-points { display: flex; flex-direction: column; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nosub-points li { display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start; }
.nosub-points .h3 { font-size: 1.125rem; margin-bottom: 4px; }
.nosub-chart { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3vw, 36px); border-radius: var(--radius-card); background: var(--soft); view-timeline: --bill; }
.bill { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
.bill text { font: 500 12.5px var(--sans); fill: var(--ink-3); }
.bill-tags text { font-size: 14px; font-weight: 600; }
.bill .tag-rise { fill: var(--ink-2); }
.bill .tag-once, .bill .tag-free { fill: var(--mint-ink); }
.bill-axis { stroke: color-mix(in oklab, var(--ink) 22%, transparent); stroke-width: 1.5; }
.bill-grid { stroke: color-mix(in oklab, var(--ink) 14%, transparent); stroke-dasharray: 3 5; }
.bill-rise { fill: none; stroke: var(--ink-3); stroke-width: 2.5; stroke-linejoin: round; }
.bill-once { fill: none; stroke: var(--mint); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.bill-free { fill: none; stroke: var(--mint-ink); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: 0.7; }

/* ---------- Footer: graphite in both themes, the name written large and sunk into the edge ---------- */
@property --mx { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --my { syntax: "<length-percentage>"; inherits: false; initial-value: -120%; }
.footer {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: clamp(56px, 7vw, 96px);
  border-radius: 40px 40px 0 0;
  background: var(--graphite); color: var(--on-dark);
  view-timeline: --foot;
}
[data-theme="dark"] .footer { background: #0e1211; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07); }
/* The app's mint, glowing up from under the name */
.footer::before { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 75%; background: radial-gradient(48% 62% at 50% 100%, rgb(63 207 154 / 0.2), transparent 72%); pointer-events: none; }
.footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 360px; }
.footer-brand p { color: var(--on-dark-2); font: 500 0.9375rem/1.6 var(--sans); }
.footer-brand .btn { margin-top: 6px; gap: 8px; }
.footer-brand .btn .icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.footer-cols { display: flex; gap: clamp(40px, 7vw, 96px); flex-wrap: wrap; }
.footer-cols div { display: flex; flex-direction: column; gap: 12px; }
.footer-cols .label { color: rgb(255 255 255 / 0.42); margin-bottom: 4px; }
.footer-cols a { font: 500 0.9375rem/1.43 var(--sans); color: var(--on-dark-2); transition: color 150ms ease-out; }
@media (hover: hover) { .footer-cols a:hover { color: var(--mint); } }
/* The maker: RSQUARE's mark, black on light and light on dark */
.maker .by { display: inline-flex; align-items: center; gap: 6px; vertical-align: bottom; color: var(--on-dark); font-weight: 600; }
.maker img { width: auto; height: 1.125rem; }
/* Artwork drawn for one theme only */
.on-dark, [data-theme="dark"] .on-light { display: none; }
[data-theme="dark"] .on-dark { display: block; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--on-dark-line); color: rgb(255 255 255 / 0.5); font: 500 0.875rem/1.43 var(--sans); }
.lang-pick { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--on-dark-fill); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.lang-pick a { padding: 7px 14px; border-radius: 999px; font: 600 0.8125rem/1.2 var(--sans); color: rgb(255 255 255 / 0.6); transition: background-color 150ms ease-out, color 150ms ease-out; }
.lang-pick a[aria-current] { background: rgb(255 255 255 / 0.14); color: var(--on-dark); }
@media (hover: hover) { .lang-pick a:not([aria-current]):hover { color: var(--on-dark); } }
/* The name, wider than the columns, its foot cut off by the page's edge; it catches the light where the pointer passes */
.footer-mark { display: flex; justify-content: center; margin: clamp(24px, 4vw, 48px) 0 -0.13em; font: 800 clamp(92px, 23.5vw, 368px)/0.8 var(--sans); letter-spacing: -0.06em; white-space: nowrap; user-select: none; pointer-events: none; }
.footer-mark span {
  padding-inline: 0.05em;
  background:
    radial-gradient(circle 0.85em at var(--mx) var(--my), rgb(111 227 180 / 0.6), transparent),
    linear-gradient(180deg, rgb(255 255 255 / 0.17) 8%, rgb(255 255 255 / 0.025) 82%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: --mx 400ms var(--ease), --my 400ms var(--ease);
}

/* ---------- Documents ---------- */
.doc { padding: 160px 0 120px; }
.doc-grid { position: relative; display: grid; grid-template-columns: 240px minmax(0, 36rem); gap: 80px; justify-content: center; }
.doc-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin-inline: auto; text-align: center; align-items: center; margin-bottom: 40px; }
.toc { position: sticky; top: 112px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.toc .label { color: var(--ink-3); margin-bottom: 10px; }
.toc a { padding: 8px 12px; border-radius: 12px; font: 500 0.875rem/1.43 var(--sans); color: var(--ink-2); }
@media (hover: hover) { .toc a:hover { background: var(--soft); color: var(--ink); } }
.doc-body { display: flex; flex-direction: column; gap: 40px; }
.doc-body section { display: flex; flex-direction: column; gap: 12px; }
.doc-body h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.doc-body p, .doc-body li { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.65; }
.doc-body ul { display: flex; flex-direction: column; gap: 10px; }
.doc-body li { display: flex; gap: 12px; }
.doc-body li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex: none; margin-top: calc(0.825em - 3px); }
.summary-card { padding: 28px 32px; border-radius: 28px; background: var(--mint-wash); }

/* ---------- About ---------- */
.wrap.about { max-width: 40rem; display: flex; flex-direction: column; gap: 72px; }
.about .doc-head { margin-bottom: 0; }
.about section { display: flex; flex-direction: column; gap: 16px; }
.about h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.about section > p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.65; }
.principles { list-style: none; padding: 0; margin: 0; }
.about .maker-card { flex-direction: row; align-items: flex-start; gap: 20px; padding: 28px 32px; border-radius: 28px; background: var(--soft); }
.maker-card img { width: 50px; height: auto; flex: none; }
.maker-card div { display: flex; flex-direction: column; gap: 8px; }
.maker-card h2 { font-size: 1.25rem; line-height: 1.3; }
.maker-card p { color: var(--ink-2); }
.about-cta { display: flex; justify-content: center; }

/* Theme switch: the sun shows in the dark, the moon in the light */
.nav-end { display: flex; align-items: center; gap: 8px; }
/* The other language, a circle beside the theme's */
.lang { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-fill); color: var(--ink); display: inline-grid; place-items: center; font: 600 0.75rem/1 var(--mono); letter-spacing: 0.04em; transition: scale 150ms ease-out; -webkit-tap-highlight-color: transparent; }
.lang:active { scale: 0.96; }
.theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-fill); color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; transition: scale 150ms ease-out; -webkit-tap-highlight-color: transparent; }
.theme-toggle:active { scale: 0.96; }
.theme-toggle .icon { grid-area: 1 / 1; transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1), scale 300ms cubic-bezier(0.2, 0, 0, 1), filter 300ms cubic-bezier(0.2, 0, 0, 1); }
.theme-toggle .sun, [data-theme="dark"] .theme-toggle .moon { opacity: 0; scale: 0.25; filter: blur(4px); }
[data-theme="dark"] .theme-toggle .sun { opacity: 1; scale: 1; filter: none; }
.summary-card p { color: var(--ink); font-size: 1.125rem; line-height: 1.67; }

/* The theme swaps in one frame; a fade on every color at once would smear. */
.theme-swap *:not(.theme-toggle .icon), .theme-swap *::before, .theme-swap *::after { transition: none !important; }

/* Reveal on scroll: in once, a beat apart where things sit side by side */
.reveal { transition: opacity 300ms ease-out, transform 300ms ease-out, filter 300ms ease-out; }
@media (scripting: enabled) { .reveal:not(.in) { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
@media print { .reveal:not(.in) { opacity: 1; transform: none; filter: none; } }
.reveal:nth-child(2) { transition-delay: 100ms; }
.reveal:nth-child(3) { transition-delay: 200ms; }

/* The hero comes in once, line by line */
@keyframes enter { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
.hero-copy > * { animation: enter 300ms ease-out backwards; }
.hero-copy > :nth-child(2) { animation-delay: 100ms; }
.hero-copy > :nth-child(3) { animation-delay: 200ms; }
.hero-copy > :nth-child(4) { animation-delay: 300ms; }
.hero-copy > :nth-child(5) { animation-delay: 400ms; }
.hero-art { animation: enter 600ms 200ms ease-out backwards; }

/* ---------- Reading progress: a thin line of mint across the top ---------- */
.progress { position: fixed; z-index: 70; inset: 0 0 auto; height: 2px; background: var(--mint); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); pointer-events: none; }

/* ---------- Promises, running past ---------- */
.trust { border-block: 1px solid var(--line); }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; flex: none; gap: 56px; padding: 28px; animation: marquee 48s linear infinite; }
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }
.marquee-track li { display: flex; align-items: center; gap: 12px; white-space: nowrap; font: 500 0.9375rem/1.4 var(--sans); }
.marquee-track .icon { width: 20px; height: 20px; stroke-width: 2.4; color: var(--mint-ink); }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- How it works: steps scroll by, the screen stays and changes ---------- */
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 80px; margin-top: 32px; }
.story-step { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding-block: 40px; transition: opacity 500ms var(--ease); }
@media (scripting: enabled) { .story-step:not(.on) { opacity: 0.28; } }
.story-step .money { font-size: 1.125rem; line-height: 1.4; color: var(--mint-ink); }
.story-step .h3 { font-size: clamp(1.5rem, 2.5vw, 2.125rem); line-height: 1.18; letter-spacing: -0.02em; font-weight: 700; max-width: 26rem; }
.story-step p { max-width: 30rem; font-size: 1.0625rem; line-height: 1.6; }
.story-inline { display: none; }
.story-inline video { width: 100%; height: auto; border-radius: 26px; background: #0b0d0c; outline: 1px solid var(--image-outline); outline-offset: -1px; }
.story-stage { position: sticky; top: max(100px, calc(50vh - min(36vh, 320px))); align-self: start; height: min(72vh, 640px, 100vh - 132px); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.stage { position: relative; height: calc(100% - 26px); aspect-ratio: 4 / 5; max-width: 100%; border-radius: 44px; overflow: hidden; background: #0b0d0c; box-shadow: var(--shadow-phone), inset 0 0 0 2px rgb(140 152 148 / 0.35); }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: scale(1.06); filter: blur(8px); transition: opacity 600ms var(--ease), transform 900ms var(--ease), filter 600ms var(--ease); }
.stage video.on, .stage:not(:has(.on)) video:first-child { opacity: 1; transform: none; filter: none; }
.stage-dots { display: flex; gap: 8px; }
.stage-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line); transition: width 500ms var(--ease), background 500ms var(--ease); }
.stage-dots i.on { width: 24px; background: var(--mint); }

/* ---------- Features: held in place while the cards pass sideways ---------- */
.hscroll { position: relative; padding-top: clamp(40px, 6vw, 80px); }
.hscroll-pin { display: flex; flex-direction: column; justify-content: center; gap: 44px; padding-bottom: clamp(56px, 8vw, 110px); }
.hscroll-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hscroll-bar { width: 220px; height: 3px; flex: none; margin-bottom: 18px; border-radius: 99px; background: var(--line); overflow: hidden; }
.hscroll-bar span { display: block; height: 100%; background: var(--mint); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
/* Without pinning (phones, reduced motion, no script): a row to swipe, card by card. */
.hscroll-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hscroll-viewport::-webkit-scrollbar { display: none; }
.hscroll-viewport:focus-visible { outline-offset: -4px; border-radius: 24px; }
.hscroll-track { position: relative; display: flex; gap: 20px; width: max-content; padding: 8px max(var(--gutter), calc((100vw - var(--wide)) / 2)) 16px; }
.hscroll.pinned .hscroll-pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding-bottom: 0; overflow: hidden; }
.hscroll.pinned .hscroll-viewport { overflow: visible; }
.hscroll.pinned .hscroll-track { will-change: transform; }
.feature {
  --d: 0;
  width: 340px; min-height: 460px; scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 32px; background: var(--soft);
  transform: scale(calc(1 - var(--d) * 0.06)); opacity: calc(1 - var(--d) * 0.45);
}
.feature > p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; }
.feature.dark { background: var(--dark-card); color: var(--on-dark); }
.feature.dark > p { color: var(--on-dark-2); }
.feature-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.feature-icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--mint-wash); color: var(--mint-ink); }
.feature.dark .feature-icon { background: var(--on-dark-fill); color: var(--mint); }
.feature-icon .icon { width: 22px; height: 22px; stroke-width: 2; }
.pro-tag { padding: 5px 10px; border-radius: 99px; background: rgb(63 207 154 / 0.16); color: var(--mint-soft); }
/* Each card's corner of the app, drawn in its dark palette whichever theme the page is in */
.mock { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; background: #0f1211; color: #f2f2ef; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.feature.dark .mock { background: rgb(255 255 255 / 0.05); }
.mock-text { font-size: 0.875rem; line-height: 1.55; color: rgb(255 255 255 / 0.72); }
.mock b { color: #a8f0c8; font-weight: 600; }
.mock b.hot { color: #ff8a9a; }
.mock-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / 0.07); font: 500 0.875rem/1.2 var(--sans); }
.mock-search .icon { width: 16px; height: 16px; color: rgb(255 255 255 / 0.55); }
.caret { width: 1.5px; height: 16px; margin-left: -6px; background: #3fcf9a; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mock-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; font: 500 0.8125rem/1.2 var(--sans); color: rgb(255 255 255 / 0.85); }
.mock-row i { width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.3); }
.mock-row.on { background: rgb(63 207 154 / 0.1); }
.mock-row.on i { background: #3fcf9a; box-shadow: none; }
.mock-row .money { margin-left: auto; font-size: 0.8125rem; color: rgb(255 255 255 / 0.6); }
.mock.chips { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.mock.chips span { padding: 7px 12px; border-radius: 99px; background: rgb(255 255 255 / 0.07); font: 500 0.8125rem/1.2 var(--sans); }
.mock.chips span.pro { background: rgb(63 207 154 / 0.16); color: #a8f0c8; }
.mock-big { font-size: 1.75rem; line-height: 1.1; color: #f2f2ef; }
.mock-label { font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); }
.mock-code { font-size: 2.375rem; line-height: 1.1; letter-spacing: 0.08em; color: #a8f0c8; }
.mock.center { align-items: center; text-align: center; padding-block: 24px; }
.mock-lock { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgb(63 207 154 / 0.14); color: #3fcf9a; }
.mock-days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.mock-days i { height: 8px; border-radius: 99px; background: rgb(255 255 255 / 0.1); }
.mock-days i.on { background: #3fcf9a; }
.mock.recap .label { color: #a8f0c8; }
.mock.widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mock.widgets span { padding: 13px 8px; border-radius: 16px; background: rgb(255 255 255 / 0.07); text-align: center; font: 600 0.8125rem/1.2 var(--sans); }

/* ---------- Focus: three ways to use it ---------- */
.focus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.focus-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: 32px; background: var(--soft); }
.focus-card .feature-icon { margin-bottom: 6px; }
.focus-card.picked { background: var(--surface); box-shadow: 0 0 0 2px var(--mint), var(--shadow-card); }
.focus-card .pro-tag { position: absolute; top: 28px; right: 28px; background: var(--mint-wash); color: var(--mint-ink); }
.tabs-mock { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border-radius: 999px; background: #0f1211; }
.tabs-mock i { padding: 9px 2px; border-radius: 999px; text-align: center; font: 600 0.6875rem/1 var(--sans); font-style: normal; color: rgb(255 255 255 / 0.22); text-decoration: line-through; }
.tabs-mock i.on { color: rgb(255 255 255 / 0.86); text-decoration: none; }
.tabs-mock i.on:first-child { background: rgb(63 207 154 / 0.18); color: #a8f0c8; }

/* ---------- Headings, word by word ---------- */
@media (scripting: enabled) {
  .split .w { display: inline-block; opacity: 0; transform: translateY(0.4em); filter: blur(6px); transition: opacity 500ms var(--ease), transform 800ms var(--ease), filter 600ms var(--ease); transition-delay: calc(var(--i) * 45ms); }
  .in .split .w, .split.in .w { opacity: 1; transform: none; filter: none; }
}

/* ---------- Scroll-linked: the privacy card opens like a curtain, the hero phone drifts away, the bill adds up ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .curtain { animation: curtain linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
    @keyframes curtain {
      from { clip-path: inset(7% 5% 7% 5% round 72px); transform: translateY(56px); }
      to { clip-path: inset(0 0 0 0 round 40px); transform: none; }
    }
    .hero-art .phone { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes drift { to { transform: translateY(-56px) rotate(-3deg) scale(0.95); } }
    /* The bill is drawn month by month as the chart comes up; the one payment stays put */
    .bill-rise, .bill-once { stroke-dasharray: 1; animation: draw linear both; animation-timeline: --bill; }
    .bill-rise { animation-range: entry 50% cover 58%; }
    .bill-once { animation-range: entry 30% entry 90%; }
    .bill-area, .bill-tags { animation: show linear both; animation-timeline: --bill; animation-range: cover 42% cover 58%; }
    @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    @keyframes show { from { opacity: 0; } }
    /* The footer's name rises out of the edge as the footer arrives */
    .footer-mark span { animation: rise linear both; animation-timeline: --foot; animation-range: entry 20% entry 100%; }
    @keyframes rise { from { transform: translateY(40%); opacity: 0.3; } }
    /* The notification arrives, its numbers lift out, the rest is crossed off, and what's kept lands on the phone */
    .flow-notif, .flow-step, .flow-fields span, .flow-skipped, .flow-store { animation: flow-in linear both; animation-timeline: --flow; }
    .flow-notif { animation-range: entry 15% entry 60%; }
    .flow-notif + .flow-step { animation-range: cover 28% cover 34%; }
    .flow-fields span:nth-child(1) { animation-range: cover 32% cover 38%; }
    .flow-fields span:nth-child(2) { animation-range: cover 34% cover 40%; }
    .flow-fields span:nth-child(3) { animation-range: cover 36% cover 42%; }
    .flow-notif .skip { animation: flow-skip linear both; animation-timeline: --flow; animation-range: cover 38% cover 44%; }
    .flow-skipped { animation-range: cover 40% cover 46%; }
    .flow-skipped + .flow-step { animation-range: cover 44% cover 50%; }
    .flow-store { animation-range: cover 48% cover 56%; }
    @keyframes flow-in { from { opacity: 0; transform: translateY(10px); } }
    @keyframes flow-skip { from { opacity: 1; text-decoration-color: transparent; } }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav-links { gap: 24px; }
  .hero-grid { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 48px; }
  .story-grid { gap: 48px; }
  .focus { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .privacy { grid-template-columns: 1fr; gap: 48px; padding: 56px 40px; }
  .screens { gap: 28px; }
  .screens .phone { width: 240px; }
}
@media (max-width: 860px) {
  .nav-links, .nav-end > .btn { display: none; }
  .nav-menu { display: inline-flex; }
  .nav { height: 58px; padding: 0 9px 0 16px; }
  /* The story reads straight down, each step with its own recording. */
  .story-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .story-stage { display: none; }
  .story-step { min-height: 0; padding-block: 28px; opacity: 1 !important; border-top: 1px solid var(--line); }
  .story-inline { display: block; margin-top: 12px; }
  .hscroll-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hscroll-bar { display: none; }
  .feature { width: min(320px, 82vw); }
  .plans { flex-direction: column; align-items: center; }
  .plan.pro { order: -1; }
  .screens { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 24px; margin-inline: calc(var(--gutter) * -1); }
  .screens figure { scroll-snap-align: center; }
  .screens figure:nth-child(odd) { padding-top: 0; }
  .doc-grid { grid-template-columns: 1fr; gap: 32px; }
  .toc { display: none; }
  .nosub, .offline { grid-template-columns: 1fr; }
  .footer { border-radius: 32px 32px 0 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .hero { padding-top: 116px; }
  .hero-copy { gap: 22px; }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
  .proof { gap: 22px; }
  .proof .faint { font-size: 0.75rem; line-height: 1.33; }
  .phone.front { width: 264px; border-radius: 45px; padding: 9px; }
  .phone.front video { border-radius: 36px; }
  .hero { padding-bottom: 48px; }
  .marquee-track { gap: 36px; padding-block: 22px; }
  .focus-card { padding: 26px; }
  .wrap.about { gap: 56px; }
  .about .maker-card { flex-direction: column; gap: 16px; padding: 24px; }
  .privacy { padding: 36px 24px; border-radius: 32px; }
  .points { grid-template-columns: 1fr; gap: 24px; }
  .plan { padding: 28px; border-radius: 28px; }
  .plan .price .money { font-size: 2.375rem; }
  .faq summary { font-size: 1.0625rem; }
  .final { padding: 56px 20px; border-radius: 32px; }
  .final img { width: 96px; height: 96px; }
  .footer-cols { gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Nothing moves; what would have slid in fades in instead. */
  @keyframes enter { from { opacity: 0; } }
  .reveal, .reveal:not(.in) { transform: none; filter: none; transition: opacity 300ms ease-out; }
  .nav { transition: none; }
  .nav-sheet, .nav-sheet.open { transform: none; transition: opacity 0.3s var(--ease), visibility 0s 0.3s; }
  .theme-toggle .icon { transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1); scale: 1 !important; filter: none !important; }
  .faq summary .icon { transition: none; }
  .btn:active, .theme-toggle:active, .lang:active { scale: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 16px 32px; flex: 1; }
  .marquee-track[aria-hidden] { display: none; }
  .split .w { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .stage video { transform: none; filter: none; transition: opacity 300ms ease-out; }
  .caret { animation: none; }
}