/* Slate redesign — mockup stylesheet
   Concept: a pocket Rosetta Stone. Warm stone-paper surfaces, graphite ink,
   and the app's electric violet reserved for anything "live". */

/* ---------- Fonts (self-hosted) ----------
   Files in /assets/fonts are the Google Fonts woff2 subsets (Bricolage Grotesque
   v9, Hanken Grotesk v12, JetBrains Mono v24, Newsreader v26; SIL Open Font
   License 1.1) with the weight axis cut to the weights declared here (fontTools
   varLib.instancer). Latin only, plus latin-ext and vietnamese for Hanken Grotesk,
   which sets the language chips (Čeština, Română, Tiếng Việt). The descriptors
   mirror the Google Fonts CSS the pages used before, so weights resolve the same.
   /assets is cached as immutable: a changed font file needs a new file name.

   The "… Fallback" faces are local fonts scaled to each web font's metrics
   (size-adjust, ascent/descent overrides), so the swap from fallback to web font
   barely moves text. Their unicode-range matches the web font's, so other
   scripts keep falling through to the system fonts as before. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-v9-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hanken-grotesk-v12-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hanken-grotesk-v12-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hanken-grotesk-v12-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/hanken-grotesk-v12-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/hanken-grotesk-v12-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/hanken-grotesk-v12-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/hanken-grotesk-v12-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/hanken-grotesk-v12-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/hanken-grotesk-v12-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/hanken-grotesk-v12-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/hanken-grotesk-v12-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/hanken-grotesk-v12-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-v24-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-v24-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/newsreader-v26-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/newsreader-v26-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "Bricolage Grotesque Fallback"; font-style: normal; font-weight: 500 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Arimo-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 98.48%; ascent-override: 94.43%; descent-override: 27.42%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk Fallback"; font-style: normal; font-weight: 400 500; src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"), local("LiberationSans"); size-adjust: 100.63%; ascent-override: 99.37%; descent-override: 30.11%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF, U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Hanken Grotesk Fallback"; font-style: normal; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Arimo-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 94.64%; ascent-override: 105.66%; descent-override: 32.02%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF, U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "JetBrains Mono Fallback"; font-style: normal; font-weight: 400 500; src: local("Courier New"), local("CourierNewPSMT"), local("Cousine"), local("Liberation Mono"), local("LiberationMono"); size-adjust: 99.98%; ascent-override: 102.02%; descent-override: 30.0%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader Fallback"; font-style: italic; font-weight: 400 500; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Tinos Italic"), local("Tinos-Italic"), local("Liberation Serif Italic"), local("LiberationSerif-Italic"); size-adjust: 96.28%; ascent-override: 76.34%; descent-override: 27.52%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Surfaces */
  --paper: #f6f3ec;
  --paper-2: #eeeae0;
  --paper-3: #e4dfd2;
  --card: #fffdf9;
  --ink: #17132b;
  --ink-2: #2a2542;
  --graphite: #5f5a6e;
  --graphite-2: #8b8699;
  --rule: rgba(23, 19, 43, 0.12);
  --rule-strong: rgba(23, 19, 43, 0.22);

  /* Brand — matches App Store screenshots */
  --violet: #5b3fe0;
  --violet-2: #7258f0;
  --violet-deep: #33209c;
  --lilac: #ebe6ff;
  --lilac-2: #d9d0ff;
  --tangerine: #ff7a35;
  --live: #ff3b30;

  /* Night band */
  --night: #110d24;
  --night-2: #1a1535;
  --on-night: #f3f0ff;
  --on-night-2: rgba(243, 240, 255, 0.66);
  --on-night-rule: rgba(243, 240, 255, 0.12);

  /* Type */
  --display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", ui-sans-serif, system-ui, sans-serif;
  --body: "Hanken Grotesk", "Hanken Grotesk Fallback", ui-sans-serif, system-ui, sans-serif;
  --serif: "Newsreader", "Newsreader Fallback", ui-serif, Georgia, serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --wrap: 1200px;
  --gutter: 32px;

  --shadow-card: 0 1px 0 rgba(23, 19, 43, 0.04), 0 12px 32px -12px rgba(23, 19, 43, 0.18);
  --shadow-device: 0 40px 80px -24px rgba(23, 19, 43, 0.45), 0 12px 24px -8px rgba(23, 19, 43, 0.2);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.32  0 0 0 0 0.28  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body > * { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
}
h1 { font-size: clamp(46px, 7vw, 96px); font-weight: 750; letter-spacing: -0.045em; }
h2 { font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.04em; }
h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.025em; line-height: 1.08; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 16px; } body { font-size: 16px; } }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--graphite);
}
.kicker::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.kicker--live { color: var(--violet); }
.kicker--live::before { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(255,59,48,.16); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

.serif-i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 22px;
  font: 600 16px/1 var(--body);
  border-radius: 14px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--violet-2); outline-offset: 3px; }
.btn-violet { background: var(--violet); color: #fff; box-shadow: 0 10px 24px -10px rgba(91,63,224,.7); }
.btn-violet:hover { background: var(--violet-2); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-line { border-color: var(--rule-strong); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--card); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 11px; }

/* Official App Store badge (Apple Marketing Tools). Never restyle the artwork;
   keep clear space of at least 1/4 of its height around it. */
.badge { display: inline-flex; flex: none; border-radius: 10px; transition: transform .18s ease; }
.badge:hover { transform: translateY(-2px); }
.badge:focus-visible { outline: 3px solid var(--violet-2); outline-offset: 3px; }
.badge img { display: block; height: 60px; width: auto; }
.badge--sm img { height: 46px; }

/* Mac download button, sized to sit beside the App Store badge */
.store {
  display: inline-flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 22px 0 18px;
  border-radius: 12px;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 14px 28px -14px rgba(23,19,43,.6);
}
.store:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(23,19,43,.6); }
.store:focus-visible { outline: 3px solid var(--violet-2); outline-offset: 3px; }
.store svg { width: 26px; height: 26px; flex: none; }
.store small { display: block; font: 500 11px/1.1 var(--body); opacity: .72; letter-spacing: .02em; }
.store b { display: block; font: 650 19px/1.15 var(--display); letter-spacing: -0.01em; }
.store--light { background: var(--card); color: var(--ink); border-color: var(--rule-strong); box-shadow: none; }
.store--light:hover { box-shadow: var(--shadow-card); }
.store--violet { background: var(--violet); border-color: var(--violet); box-shadow: 0 14px 28px -14px rgba(91,63,224,.8); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 750 23px/1 var(--display); letter-spacing: -0.035em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 2px 6px rgba(23,19,43,.14); }
.nav-links { display: flex; gap: 30px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav-links a { position: relative; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--violet); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { display: flex; gap: 8px; align-items: center; }
.nav-menu { display: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--rule-strong); background: transparent; align-items: center; justify-content: center; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta .btn-line { display: none; }
  .nav-cta .btn-violet { height: 44px; } /* 44px tap target on touch layouts */
}
@media (max-width: 480px) {
  .nav-cta .btn-violet span.long { display: none; }
}

/* ---------- Footer ---------- */
.foot { background: var(--night); color: var(--on-night-2); padding: 80px 0 40px; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 48px; }
.foot a.brand { display: inline-flex; padding: 0; color: var(--on-night); }
.foot h5 { margin: 0 0 16px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night); opacity: .5; }
.foot a { display: block; padding: 6px 0; font-size: 15px; transition: color .15s; }
.foot a:hover { color: var(--on-night); }
.foot-note { margin-top: 16px; max-width: 320px; font-size: 15px; }
.foot .foot-mail { display: inline; padding: 0; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--on-night-rule); font-size: 13px; }
.foot-word { font: 800 clamp(80px, 17vw, 240px)/0.8 var(--display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px rgba(243,240,255,.14); margin-top: 56px; user-select: none; white-space: nowrap; overflow: hidden; }
@media (max-width: 820px) {
  .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; }
  /* 44px tap targets on touch layouts (the brand link is inline-flex, centred) */
  .foot-grid a:not(.brand) { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .foot a.brand { min-height: 44px; }
}

/* ---------- Reveal ----------
   Hidden only once JavaScript runs: pages that use .rv set <html class="js"> with
   an inline script in <head>, and site.js adds .in on scroll. Without JS (or
   before that flag) every section stays visible. Failsafe: site.js marks <html>
   with .rv-ready when it starts; if it never runs (blocked, network error), the
   rv-failsafe animation shows every .rv section after 3 s. */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js:not(.rv-ready) .rv { animation: rv-failsafe 0s 3s forwards; }
@keyframes rv-failsafe { to { opacity: 1; transform: none; } }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Section heads ---------- */
.sec { padding: 120px 0; }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 64px; }
.sec-head p { color: var(--graphite); font-size: 18px; max-width: 460px; justify-self: end; }
.sec-head h2 { margin-top: 18px; }
/* A section head whose paragraph is a full, citable answer: top-aligned, wider column. */
.sec-head--answer { align-items: start; }
.sec-head--answer p { max-width: 560px; font-size: 17px; }
@media (max-width: 820px) { .sec { padding: 80px 0; } .sec-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; } .sec-head p { justify-self: start; } }

/* ---------- Pricing ---------- */
.price-sec { background: var(--paper-2); }
.bill { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--card); border: 1px solid var(--rule); margin-bottom: 28px; }
.bill button { font: 600 14px/1 var(--body); padding: 11px 18px; border-radius: 99px; border: 0; background: transparent; color: var(--graphite); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .bill button { min-height: 44px; } } /* 44px tap target on touch layouts */
.bill button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.bill button em { font-style: normal; font: 600 11px/1 var(--mono); padding: 3px 6px; border-radius: 5px; background: var(--tangerine); color: #fff; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 920px; }
.plan { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-xl); padding: 36px; display: flex; flex-direction: column; }
.plan.pro { background: var(--violet); color: #fff; border-color: var(--violet); position: relative; overflow: hidden; }
.plan.pro::after { content: ""; position: absolute; width: 360px; height: 360px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent); }
.plan .nm { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.plan .pr { font: 800 64px/1 var(--display); letter-spacing: -0.05em; margin-top: 18px; display: flex; align-items: baseline; gap: 6px; }
.plan .pr small { font: 500 17px/1 var(--body); letter-spacing: 0; opacity: .7; }
.plan .sub { margin-top: 8px; font-size: 14.5px; opacity: .72; min-height: 1.4em; }
.plan ul { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: 15.5px; }
.plan li::before { content: "✓"; font-weight: 800; color: var(--violet); }
.plan.pro li::before { color: #fff; }
.plan .btn { margin-top: auto; width: 100%; }
.plan.pro .btn { background: #fff; color: var(--violet-deep); }
.price-note { margin-top: 20px; font-size: 13.5px; color: var(--graphite); }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } .plan { padding: 28px; } }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; }
.faq-grid > * { min-width: 0; }
.faq details { border-top: 1px solid var(--rule-strong); }
.faq details:last-child { border-bottom: 1px solid var(--rule-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font: 650 19px/1.3 var(--display); letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
/* One-line box at the top: a full-height (stretched) box swings past the edge
   when rotated open and made the page scroll sideways at 375px. */
.faq summary::after { content: "+"; align-self: flex-start; height: 1em; font: 400 26px/1 var(--body); color: var(--violet); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 3px solid var(--violet-2); outline-offset: 4px; border-radius: 4px; }
.faq details p { padding: 0 0 24px; color: var(--graphite); max-width: 620px; }
@media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Mockup annotation chip (remove in production) ---------- */
.flag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--mono); letter-spacing: .04em;
  padding: 5px 8px; border-radius: 6px;
  background: #fff4c2; color: #6b5200; border: 1px dashed #d8b400;
  vertical-align: middle;
}