/* ============ Verbamor homepage v2: crisp white, outcome-led ============
   One accent (Verbamor vermilion) on a white ground with near-black ink.
   The accent marks outcomes and the "kept" line. The "Start 7 days free" ask
   is cobalt, the one blue on the page (see .btn-cta for why).
   Contrast (on #FFFFFF): --ink 19.6:1, --ink-2 10.4:1, --muted 5.3:1,
   --accent-text 5.4:1. --accent is a fill and a mark only (3.6:1). */

:root {
  --bg: #FFFFFF;
  --surface: #FAFAFA;
  --surface-2: #F4F4F5;
  --ink: #0A0A0B;
  --ink-2: #3F3F46;
  --muted: #676770;
  --line: #E8E8EB;
  --line-2: #F0F0F2;
  --accent: #EF4A2B;
  --accent-text: #C9331F;
  --accent-soft: #FEF0EC;
  --good: #1F7A4D;
  --good-soft: #E8F5EE;
  --watch: #9A6400;
  --watch-soft: #FDF4E1;

  --r-sm: 10px; --r: 16px; --r-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(10,10,11,.06), 0 1px 1px rgba(10,10,11,.04);
  --shadow: 0 1px 2px rgba(10,10,11,.05), 0 8px 24px -6px rgba(10,10,11,.10);
  --shadow-lg: 0 2px 4px rgba(10,10,11,.04), 0 24px 60px -16px rgba(10,10,11,.18);

  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }
mark { background: none; color: inherit; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 860px; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.mono-label {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font: 500 15px/1 var(--font); text-decoration: none; white-space: nowrap;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-lg { padding: 16px 24px; font-size: 16px; }
.btn-ink {
  background: var(--ink); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(10,10,11,.2), 0 6px 16px -6px rgba(10,10,11,.45);
}
.btn-ink:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(10,10,11,.2), 0 12px 24px -8px rgba(10,10,11,.5); }
/* The trial ask. It was ink, and ink put it beside the black App Store badge
   at the same 50px height, so the two read as a pair and neither one led.
   It was vermilion for a day, and that lost too: the headline line, the hero
   glow, the logo and the word highlights are all vermilion, so the ask read as
   one more piece of the brand dressing, not as the thing to press. Cobalt is
   the hue furthest from the page's orange and appears nowhere else on it, so
   the ask is the only blue object in view. Vermilion stays the colour of the
   promise; blue now means "press this". Both gradient stops carry white text
   over the 4.5:1 floor: #3A57F2 5.5:1, #2A43D6 7.3:1. */
.btn-cta {
  background: linear-gradient(180deg, #3A57F2, #2A43D6); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(25,40,150,.3), 0 8px 22px -8px rgba(49,80,240,.6);
}
.btn-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(25,40,150,.3), 0 14px 30px -10px rgba(49,80,240,.7); }
/* One step over the badge: 57px against its 50px, so the ask leads the row. */
.btn-xl { padding: 19px 30px; font-size: 17px; font-weight: 600; }
.btn-line { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); padding: 12px 18px; }
.btn-line:hover { border-color: #D4D4D8; }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
/* A light sweep across the ask, borrowed from the shimmer buttons on 21st.dev.
   It runs every 6 s (a 1.2 s sweep, then a rest), and again at once on hover.
   The hover uses its own keyframes so the sweep restarts from the left. */
.btn-shine { overflow: hidden; isolation: isolate; }
.btn-shine::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-shine::after { animation: shine-loop 6s .9s var(--ease) infinite both; }
.btn-shine:hover::after { animation: shine 1s var(--ease) 1 both; }
@keyframes shine-loop { 0% { transform: translateX(-120%); } 20%, 100% { transform: translateX(120%); } }
@keyframes shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

.store-badge { display: inline-flex; border-radius: 10px; transition: transform .25s var(--ease); }
.store-badge:hover { transform: translateY(-1px); }
.store-badge img { height: 50px; width: auto; }

.link-arrow { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .2s, gap .25s var(--ease); }
.link-arrow:hover { border-color: var(--ink); gap: 10px; }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.top.is-scrolled { border-bottom-color: var(--line); }
.top-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; text-decoration: none; }
.brand img { border-radius: 7px; }
.top-nav { display: flex; gap: 4px; margin-left: auto; }
.top-nav a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; padding: 8px 12px; border-radius: 999px; transition: background .2s, color .2s; }
.top-nav a:hover { background: var(--surface-2); color: var(--ink); }
.menu-btn { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 72px 0 0; overflow: hidden; }
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10,10,11,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,11,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 20%, transparent 75%);
}
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.85); box-shadow: var(--shadow-sm);
  font-size: 13.5px; color: var(--ink-2);
}
.pill-flags { display: inline-flex; }
.pill-flags i, .m i { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.pill-flags i + i { margin-left: -6px; }
.f-es { background: linear-gradient(#C60B1E 0 25%, #FFC400 25% 75%, #C60B1E 75%); }
.f-fr { background: linear-gradient(90deg, #002395 0 33.3%, #EEE 33.3% 66.6%, #ED2939 66.6%); }
.f-it { background: linear-gradient(90deg, #008C45 0 33.3%, #EEE 33.3% 66.6%, #CD212A 66.6%); }
.f-pt { background: radial-gradient(circle at 50% 50%, #002776 0 22%, #FFDF00 23% 46%, #009C3B 47%); }
.f-ru { background: linear-gradient(#EEE 0 33.3%, #0039A6 33.3% 66.6%, #D52B1E 66.6%); }

.h1 {
  margin: 22px 0 22px; font-size: clamp(46px, 6.6vw, 84px); line-height: .98;
  letter-spacing: -.048em; font-weight: 650;
}
.h1-line, .h1-loop { display: block; }
.h1 .w { display: inline-block; }
/* Every phrase sits in the same grid cell, so the line reserves room for the
   longest one and the layout never jumps as they swap. */
.h1-loop { display: grid; color: var(--accent); padding-bottom: .08em; }
.loop-item { grid-area: 1 / 1; opacity: 0; transform: translateY(.35em); filter: blur(8px); transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); }
.loop-item.is-on { opacity: 1; transform: none; filter: none; }
.loop-item.is-out { opacity: 0; transform: translateY(-.35em); filter: blur(8px); }

.lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.actions.center { justify-content: center; }
.fine { margin-top: 14px; font-size: 13.5px; color: var(--muted); }

/* ---------- Hero scene ---------- */
.scene { position: relative; margin: 0; height: 560px; }
.scene-glow {
  position: absolute; inset: 8% 4% 4% 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(239,74,43,.16), rgba(239,74,43,0));
  filter: blur(20px); pointer-events: none;
}
.sc {
  position: absolute; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
}
.sc-lesson { top: 0; left: 0; width: 86%; padding: 18px 20px; }
.sc-card { top: 150px; right: 0; width: 76%; display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 16px; padding: 12px; }
.sc-track { top: 310px; left: 4%; width: 78%; padding: 16px 20px 18px; }
.sc-moment { bottom: 0; right: 2%; width: 84%; padding: 18px 20px; background: var(--ink); border-color: var(--ink); color: #fff; }

.sc-tag { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(239,74,43,.15); }
.wave { display: inline-flex; gap: 2px; align-items: center; height: 14px; margin-left: auto; }
.wave i { width: 2.5px; height: 40%; border-radius: 2px; background: var(--accent); opacity: .75; }
.sc-line { margin-top: 12px; font-size: 21px; font-weight: 500; letter-spacing: -.015em; line-height: 1.35; }
.sc-line mark {
  padding: 0 .12em; border-radius: 4px;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)) no-repeat left / 0% 100%;
  box-shadow: inset 0 -2px 0 transparent;
  transition: background-size .8s var(--ease) .15s, box-shadow .4s .6s;
}
.sc-gloss { margin-top: 6px; font-size: 14px; color: var(--muted); }

.sc-card img { width: 132px; height: 132px; border-radius: 10px; object-fit: cover; }
.sc-card-body { display: grid; gap: 4px; }
.sc-term { font-size: 26px; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; }
.sc-mean { font-size: 15px; color: var(--muted); }
.sc-play { align-self: end; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; margin: 0 4px 4px 0; }

.track { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.track::before { content: ""; position: absolute; top: 6px; left: 6px; right: 12%; height: 2px; background: var(--line-2); }
.track::after { content: ""; position: absolute; top: 6px; left: 6px; height: 2px; width: 0; background: var(--accent); transition: width 1.6s var(--ease) .1s; }
.track li { position: relative; display: grid; gap: 10px; }
.track li i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--line); transition: background .3s, border-color .3s, transform .3s var(--ease); }
.track li b { font-size: 13px; font-weight: 500; color: var(--ink-2); }

.sc-moment .mono-label { color: rgba(255,255,255,.6); }
.sc-said { margin-top: 10px; font-size: 22px; font-weight: 550; letter-spacing: -.02em; line-height: 1.3; }
.sc-ok { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 12px 6px 9px; border-radius: 999px; background: rgba(76, 200, 130, .16); color: #7BE0A6; font-size: 13px; font-weight: 500; }

/* Steps. With no JS the scene arrives at step 4, fully assembled. */
.scene .sc { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(6px); }
.scene[data-step] .sc-lesson,
.scene:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .sc-card,
.scene:is([data-step="2"],[data-step="3"],[data-step="4"]) .sc-track,
.scene:is([data-step="3"],[data-step="4"]) .sc-moment { opacity: 1; transform: none; filter: none; }
.scene:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .sc-line mark { background-size: 100% 100%; box-shadow: inset 0 -2px 0 var(--accent); }
.scene:is([data-step="2"],[data-step="3"],[data-step="4"]) .track::after { width: 76%; }
.scene:is([data-step="2"],[data-step="3"],[data-step="4"]) .track li i { background: var(--accent); border-color: var(--accent); }
.scene .track li:nth-child(1) i { transition-delay: .1s; }
.scene .track li:nth-child(2) i { transition-delay: .5s; }
.scene .track li:nth-child(3) i { transition-delay: .95s; }
.scene .track li:nth-child(4) i { transition-delay: 1.4s; }

/* ---------- Moments marquee ---------- */
.moments { position: relative; margin-top: 88px; padding: 28px 0 36px; border-top: 1px solid var(--line-2); }
.moments-label { text-align: center; margin-bottom: 18px; }
.marquee {
  display: flex; overflow: hidden; gap: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; gap: 12px; flex-shrink: 0; padding-right: 0; }
.m {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 10px 18px 10px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: 15px; color: var(--ink-2);
}
.m i { width: 16px; height: 16px; border-width: 0; }
.marquee-track { animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - 12px)); } }

/* ---------- Section heads ---------- */
section { position: relative; }
.kicker { color: var(--accent-text); margin-bottom: 16px; }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.03; letter-spacing: -.04em; font-weight: 650; }
.sec-lead { margin-top: 18px; font-size: 19px; color: var(--ink-2); max-width: 36em; }

/* ---------- Problem: scroll word reveal ---------- */
.problem { padding: 150px 0 140px; }
.reveal-text { font-size: clamp(30px, 3.9vw, 50px); line-height: 1.16; letter-spacing: -.035em; font-weight: 600; }
.reveal-text .rw { transition: opacity .25s linear, color .25s linear; }
.js-motion .reveal-text .rw { opacity: .16; }
.js-motion .reveal-text .rw.on { opacity: 1; }
.reveal-text .rw.hot { color: var(--accent); }
.problem-cite { margin-top: 32px; font-size: 14px; color: var(--muted); }
.problem-cite a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: var(--line); }
.problem-cite a:hover { text-decoration-color: var(--ink); }

/* ---------- Outcomes: stacking cards ---------- */
.outcomes { padding: 40px 0 140px; }
.stack { display: grid; gap: 28px; }
.ocard {
  position: sticky; top: calc(96px + var(--i) * 20px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0;
  min-height: 500px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  transform-origin: 50% 0; will-change: transform;
}
.ocard-main { padding: 44px 44px 40px; display: flex; flex-direction: column; }
.o-num { color: var(--accent-text); }
.o-title { margin-top: 14px; font-size: clamp(28px, 3vw, 40px); line-height: 1.06; letter-spacing: -.035em; font-weight: 650; max-width: 15em; }
.o-feel { margin-top: 14px; font-size: 17px; color: var(--ink-2); max-width: 32em; }
.o-split { margin-top: auto; padding-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.o-block { padding-top: 16px; border-top: 1px solid var(--line); }
.o-kind { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--ink); margin-bottom: 6px; }
.o-block p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.o-src { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); text-decoration: none; border-bottom: 1px dotted #C9C9CF; }
.o-src:hover { color: var(--ink); border-bottom-color: var(--ink); }
.ocard-vis {
  position: relative; display: grid; place-items: center; padding: 36px;
  background: var(--surface); border-left: 1px solid var(--line);
}
.ocard-vis::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(10,10,11,.09) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
}
.ocard-vis > * { position: relative; }

/* 01 cloze */
.cloze { width: 100%; max-width: 360px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px; }
.cloze-line { margin-top: 14px; font-size: 22px; font-weight: 550; letter-spacing: -.02em; line-height: 1.5; }
.gap { position: relative; display: inline-block; min-width: 5.4em; border-bottom: 2px dashed #CFCFD4; text-align: center; }
.gap-word { color: var(--accent-text); font-weight: 650; }
.js-motion .ocard .gap-word { opacity: 0; filter: blur(4px); transition: opacity .6s var(--ease), filter .6s var(--ease); }
.js-motion .ocard.is-in .gap-word { opacity: 1; filter: none; transition-delay: .7s; }
.cloze-rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 20px; }
.cloze-rate span { text-align: center; padding: 8px 0; font-size: 12.5px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-2); }
.cloze-rate .on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 02 curve */
.curve { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px 20px 16px; }
.curve-svg { width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.curve-svg .ax { stroke: #D4D4D8; stroke-width: 1; }
.curve-svg text { font-family: var(--mono); font-size: 9.5px; fill: var(--muted); }
.c-fade { fill: none; stroke: #A1A1AA; stroke-width: 2.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.c-keep { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c-dot { fill: #fff; stroke: var(--accent); stroke-width: 2.5; }
.js-motion .c-keep { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.8s var(--ease) .3s; }
.js-motion .ocard.is-in .c-keep { stroke-dashoffset: 0; }
.js-motion .c-dot { opacity: 0; transition: opacity .4s; }
.js-motion .ocard.is-in .c-dot { opacity: 1; }
.js-motion .ocard.is-in .c-dot:nth-of-type(1) { transition-delay: .7s; }
.js-motion .ocard.is-in .c-dot:nth-of-type(2) { transition-delay: 1.1s; }
.js-motion .ocard.is-in .c-dot:nth-of-type(3) { transition-delay: 1.6s; }
.legend { display: flex; gap: 18px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.lg-keep { background: var(--accent); }
.lg-fade { background: repeating-linear-gradient(90deg, #A1A1AA 0 3px, transparent 3px 6px); }

/* 03 coverage */
.cover { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px; }
.cover-bar { margin-top: 18px; height: 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cover-fill { display: block; height: 100%; width: 85%; border-radius: inherit; background: linear-gradient(90deg, #F77B5E, var(--accent)); }
.js-motion .cover-fill { width: 0; transition: width 1.6s var(--ease) .3s; }
.js-motion .ocard.is-in .cover-fill { width: 85%; }
.cover-scale { position: relative; display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cover-mark { position: absolute; left: 85%; transform: translateX(-50%); color: var(--accent-text); font-weight: 600; }
.cover-note { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chips span { font-size: 13px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }

/* 04 card */
.mini-card { width: 100%; max-width: 300px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.mini-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mini-body { padding: 16px 18px 18px; }
.audio { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.play { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.bars { display: flex; align-items: center; gap: 3px; height: 22px; }
.bars i { width: 3px; border-radius: 2px; background: #D4D4D8; height: 30%; }
.bars i:nth-child(3n) { height: 70%; } .bars i:nth-child(4n+1) { height: 45%; } .bars i:nth-child(5n+2) { height: 95%; }
.bars i:nth-child(-n+6) { background: var(--accent); }

.stack-foot { margin-top: 40px; text-align: center; }

/* ---------- How it works: bento ---------- */
.how { padding: 140px 0; background: var(--surface); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "demo demo demo demo demo demo demo rec  rec  rec  rec  rec"
    "demo demo demo demo demo demo demo save save save save save"
    "study study study study study proof proof proof proof proof proof proof";
}
.t-demo { grid-area: demo; } .t-record { grid-area: rec; } .t-save { grid-area: save; }
.t-study { grid-area: study; } .t-proof { grid-area: proof; }
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-sm);
}
/* Cursor spotlight: a soft glow inside, and a brighter rim where the pointer
   is, the way the glowing cards on 21st.dev do it. Pointer devices only. */
.tile::before, .tile::after { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity .35s; }
.tile::before { inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(239,74,43,.07), transparent 45%); }
.tile::after {
  inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(239,74,43,.55), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (hover: hover) { .tile:hover::before, .tile:hover::after { opacity: 1; } }
.tile h3 { margin-top: 10px; font-size: 22px; letter-spacing: -.025em; line-height: 1.15; }
.tile p { margin-top: 8px; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.t-step { color: var(--muted); }
.t-vis { margin-top: 22px; }

.t-demo { display: flex; flex-direction: column; }
.demo-frame {
  margin-top: 24px; flex: 1; display: grid; place-items: center;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-2); padding: 16px;
  --bg: #FFFFFF; --bg-alt: #F4F4F5; --card: #FFFFFF; --ink: #0A0A0B; --muted: #676770;
  --line: rgba(10,10,11,.09); --primary: #EF4A2B; --primary-ink: #FFFFFF;
  --green: #2E7D9A; --yellow: #F5C24C; --pink: #FDE7E1; --lilac: #ECE8F6;
}
.demo-frame .demo-stage { width: 100%; max-width: 520px; }
.demo-frame .demo-poster { border-radius: 12px; }

.rec { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: var(--surface); }
.rec-wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.rec-wave i { flex: 1; border-radius: 2px; background: var(--ink); opacity: .85; height: 30%; }
.rec-wave i:nth-child(3n) { height: 75%; } .rec-wave i:nth-child(4n+1) { height: 50%; } .rec-wave i:nth-child(5n+2) { height: 100%; } .rec-wave i:nth-child(7n) { height: 20%; }
.rec-line { margin-top: 12px; font-size: 15px !important; color: var(--ink) !important; }
.rec-line mark { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 3px; padding: 0 .1em; }

.tr { display: grid; gap: 8px; }
.tr-in { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 16px; background: #fff; box-shadow: var(--shadow-sm); }
/* Static-page fallback only. With motion on, the loop empties this span between
   words, and the fallback would flash "the receipt" in every gap. */
html:not(.js-motion) .tr-typed:empty::before { content: "the receipt"; }
.caret { width: 2px; height: 20px; margin-left: 2px; background: var(--accent); }
.caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tr-out { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.tr-save { font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #fff; }
/* While a word is typed or deleted, its translation is hidden, so the output
   never shows a different word from the input. The box keeps its size. */
.tr-out > * { transition: opacity .2s ease; }
.tr-out.is-waiting > * { opacity: 0; }

.deck { position: relative; height: 170px; }
.dk { position: absolute; left: 50%; bottom: 0; width: 200px; height: 150px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .5s var(--ease); }
.dk-3 { transform: translateX(-50%) rotate(-7deg) translateY(-4px); }
.dk-2 { transform: translateX(-50%) rotate(5deg) translateY(-6px); }
.dk-1 { transform: translateX(-50%); overflow: hidden; }
.dk-1 img { width: 100%; height: 108px; object-fit: cover; }
.dk-1 b { display: block; padding: 8px 12px; font-size: 16px; letter-spacing: -.01em; }
@media (hover: hover) {
  .t-study:hover .dk-3 { transform: translateX(-72%) rotate(-12deg) translateY(-8px); }
  .t-study:hover .dk-2 { transform: translateX(-28%) rotate(10deg) translateY(-10px); }
  .t-study:hover .dk-1 { transform: translateX(-50%) translateY(-6px); }
}

.t-proof { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; padding-bottom: 0; }
.t-proof .tile-copy { padding-bottom: 28px; }
.insights { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.insights li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.insights i { flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 700; }
.insights .good i { background: var(--good-soft); color: var(--good); }
.insights .watch i { background: var(--watch-soft); color: var(--watch); }
.phone-crop { align-self: end; height: 260px; overflow: hidden; border-radius: 26px 26px 0 0; border: 6px solid var(--ink); border-bottom: 0; }
.phone-crop img { width: 100%; }

/* ---------- Fit ---------- */
.fit { padding: 140px 0 60px; }
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fit-col { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; }
.fit-col.no { background: var(--surface); }
.fit-k { display: inline-block; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--good-soft); color: var(--good); }
.fit-col.no .fit-k { background: var(--surface-2); color: var(--ink-2); }
.fit-col ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.fit-col li { position: relative; padding-left: 28px; font-size: 16.5px; color: var(--ink-2); }
.fit-col li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); transform: rotate(-45deg) translateY(-3px); }
.fit-col.no li::before { width: 12px; height: 2px; border: 0; background: #A1A1AA; transform: none; top: .72em; }
.fit-col .link-arrow { margin-top: 24px; font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { padding: 100px 0 140px; }
.faq .sec-head { margin-bottom: 32px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-size: 19px; font-weight: 550; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line);
  background: linear-gradient(var(--ink), var(--ink)) center / 10px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 10px no-repeat;
  transition: transform .3s var(--ease), background-color .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--surface-2); }
.faq details p { padding: 0 48px 26px 0; color: var(--ink-2); font-size: 16.5px; }
.faq details a { color: var(--accent-text); }

/* ---------- Close ---------- */
.close { padding: 140px 0 120px; text-align: center; overflow: hidden; border-top: 1px solid var(--line-2); }
.close-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(239,74,43,.10), transparent 70%),
    linear-gradient(to right, rgba(10,10,11,.05) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(to bottom, rgba(10,10,11,.05) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 20%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 20%, #000 10%, transparent 70%);
}
.close-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.close-icon { border-radius: 14px; box-shadow: var(--shadow-lg); margin-bottom: 28px; }
.close-h { max-width: 16em; }
.accent { color: var(--accent); }
.close .sec-lead { margin-left: auto; margin-right: auto; }
.close .actions { margin-top: 36px; }
.sheet { margin-top: 64px; width: 100%; max-width: 560px; padding-top: 32px; border-top: 1px solid var(--line); }
.sheet-k { font-size: 15px; color: var(--ink-2); }
.gate { margin-top: 16px; }
.gate form { display: flex; gap: 8px; }
.gate input[type="email"] {
  flex: 1; min-width: 0; font: 400 15px var(--font); color: var(--ink);
  padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm);
}
.gate input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.gate .hp { position: absolute; left: -5000px; width: 1px; height: 1px; opacity: 0; }
.gate-err { margin-top: 8px; font-size: 13.5px; color: var(--accent-text); min-height: 1em; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 32px 0 40px; }
.foot-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; }
.foot-links a { font-size: 14px; color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.copy { font-size: 13.5px; color: var(--muted); }

/* ---------- Entrance motion ---------- */
/* Opacity-only fades are allowed with reduced motion; travel and blur are not. */
.js-motion .fade-up { opacity: 0; transform: translateY(14px); filter: blur(6px); animation: fadeUp .9s var(--ease) var(--d, 0ms) forwards; }
.js-motion .h1 .w { opacity: 0; transform: translateY(.3em); filter: blur(10px); animation: fadeUp .9s var(--ease) calc(80ms + var(--wi) * 70ms) forwards; }
.js-motion .h1-loop { opacity: 0; animation: fadeUp .9s var(--ease) 320ms forwards; }
@keyframes fadeUp { to { opacity: 1; transform: none; filter: none; } }
.js-motion [data-in] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms); }
.js-motion [data-in].is-in { opacity: 1; transform: none; }


/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .scene { max-width: 560px; }
  .ocard { grid-template-columns: 1fr; }
  .ocard-vis { border-left: 0; border-top: 1px solid var(--line); min-height: 280px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "demo demo" "rec save" "study proof"; }
}
@media (max-width: 860px) {
  .top-nav {
    position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0;
    padding: 8px 16px 16px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    display: none;
  }
  .top-nav.open { display: flex; }
  .top-nav a { padding: 14px 8px; border-radius: 8px; font-size: 16px; }
  .top .btn-sm { margin-left: auto; }
  .menu-btn {
    display: inline-grid; place-items: center; gap: 5px; width: 40px; height: 40px; padding: 12px 10px;
    border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer;
  }
  .menu-btn span { display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease); }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .top-inner { gap: 12px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .hero { padding-top: 40px; }
  .pill { font-size: 12.5px; }
  .lead { font-size: 17px; }
  .scene { height: auto; display: grid; gap: 12px; }
  .sc { position: relative; inset: auto; width: 100% !important; }
  .sc-card { grid-template-columns: 96px 1fr auto; }
  .sc-card img { width: 96px; height: 96px; }
  .sc-line { font-size: 18px; }
  .sc-term { font-size: 22px; }
  .sc-said { font-size: 19px; }
  .moments { margin-top: 56px; }
  .problem { padding: 96px 0 88px; }
  .outcomes { padding-bottom: 96px; }
  .ocard { position: relative; top: auto; min-height: 0; }
  .ocard-main { padding: 28px 22px; }
  .o-split { grid-template-columns: 1fr; gap: 0; }
  .o-block + .o-block { margin-top: 16px; }
  .ocard-vis { padding: 24px 16px; min-height: 0; }
  .how { padding: 96px 0; }
  .bento { grid-template-columns: 1fr; grid-template-areas: "demo" "rec" "save" "study" "proof"; }
  .tile { padding: 22px; }
  .t-proof { grid-template-columns: 1fr 120px; gap: 12px; }
  .phone-crop { height: 200px; border-width: 4px; border-radius: 20px 20px 0 0; }
  .fit { padding: 96px 0 40px; }
  .fit-grid { grid-template-columns: 1fr; }
  .fit-col { padding: 24px; }
  .faq { padding: 72px 0 96px; }
  .faq summary { font-size: 17px; }
  .faq details p { padding-right: 0; }
  .close { padding: 96px 0 80px; }
  .gate form { flex-direction: column; }
  .actions { gap: 10px; }
  .foot-links { margin-left: 0; }
}

/* ---------- Photo moments (generated photography) ---------- */
.marquee, .marquee-track { gap: 16px; }
.mc { position: relative; margin: 0; flex-shrink: 0; width: 240px; aspect-ratio: 2 / 3; border-radius: 18px; overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); }
.mc img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mc::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(10,10,11,.78), rgba(10,10,11,0)); pointer-events: none; }
.mc figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: flex; align-items: flex-start; gap: 8px; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.mc figcaption i { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; margin-top: 1px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
@media (hover: hover) { .mc:hover img { transform: scale(1.05); } }
.marquee-track { animation-duration: 60s; }
@keyframes marquee { to { transform: translateX(calc(-100% - 16px)); } }
@media (max-width: 720px) { .mc { width: 180px; } .mc figcaption { font-size: 13.5px; } }

.sc-moment { display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: center; padding: 12px 18px 12px 12px; }
.sc-moment img { width: 116px; height: 116px; border-radius: 10px; object-fit: cover; }
.sc-moment .sc-said { font-size: 19px; margin-top: 6px; }
.sc-moment .sc-ok { margin-top: 10px; }
@media (max-width: 720px) { .sc-moment { grid-template-columns: 84px 1fr; } .sc-moment img { width: 84px; height: 84px; } .sc-moment .sc-said { font-size: 17px; } }

/* Headline holds two lines: the fixed half and the looping place. */
.h1 { font-size: clamp(40px, 5.4vw, 74px); }
.h1-line, .loop-item { white-space: nowrap; }
@media (min-width: 1021px) { .hero-inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }
@media (max-width: 720px) { .h1 { font-size: min(11.4vw, 56px); } }

/* The recording tag's bars move while the lesson "records". */
.wave i, .rec-wave i { animation: eq 1.1s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.wave i:nth-child(2n), .rec-wave i:nth-child(2n) { animation-delay: -.35s; animation-duration: .9s; }
.wave i:nth-child(3n), .rec-wave i:nth-child(3n) { animation-delay: -.6s; animation-duration: 1.3s; }
.wave i:nth-child(5n), .rec-wave i:nth-child(5n) { animation-delay: -.2s; }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1.9); } }
.wave i { height: 30%; }
.o-src { white-space: nowrap; }
.rec-wave { justify-content: space-between; gap: 0; }
.rec-wave i { flex: 0 0 4px; }
.rec-wave i { animation-name: eqSoft; }
@keyframes eqSoft { from { transform: scaleY(.45); } to { transform: scaleY(1.25); } }
.t-proof { grid-template-columns: minmax(0, 1fr) 250px; }
.phone-crop { height: 360px; margin-top: -4px; }
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
@media (max-width: 720px) { .t-proof { grid-template-columns: 1fr; } .phone-crop { width: 220px; height: 260px; margin: 0 auto; } }

.pill-short { display: none; }
@media (max-width: 720px) { .pill-long { display: none; } .pill-short { display: inline; } }
.mini-card img { height: auto; }
.ocard .mini-card { max-width: 280px; }

/* ---------- Fix: phone screenshot keeps its own proportions ---------- */
.phone-crop img { height: auto; }

/* ---------- Fix: hero cards sit in a column, so none covers another ----------
   The cards used to be absolutely placed with fixed tops, and a wrapped line
   pushed one card under the next. They now flow with a gap and keep the
   stagger through their side alignment. A hidden step still holds its space,
   so the fold never jumps while the loop plays. */
.scene { height: auto; display: grid; gap: 14px; align-content: center; }
.sc { position: relative; inset: auto; }
.sc-lesson { width: 90%; justify-self: start; }
.sc-card { width: 86%; justify-self: end; top: auto; right: auto; grid-template-columns: 112px minmax(0, 1fr) auto; }
.sc-card img { width: 112px; height: 112px; }
.sc-term { white-space: nowrap; }
.sc-track { width: 84%; justify-self: start; top: auto; left: auto; }
.sc-moment { width: 92%; justify-self: end; bottom: auto; right: auto; grid-template-columns: 100px minmax(0, 1fr); }
.sc-moment img { width: 100px; height: 100px; }
.sc-moment .mono-label { letter-spacing: .05em; }
.hero { padding-top: 48px; }

/* ---------- Proof numbers in the fold ---------- */
.stats {
  margin: 44px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat { display: flex; flex-direction: column-reverse; gap: 4px; padding: 0 24px; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat dt { font-size: 13.5px; color: var(--muted); }
.stat dd { margin: 0; font-size: clamp(26px, 2.6vw, 34px); font-weight: 650; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.moments { margin-top: 56px; }

@media (max-width: 720px) {
  .sc-lesson, .sc-card, .sc-track, .sc-moment { width: 100%; }
  .sc-card { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .sc-card img { width: 88px; height: 88px; }
  .sc-moment { grid-template-columns: 80px minmax(0, 1fr); }
  .sc-moment img { width: 80px; height: 80px; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 20px; margin-top: 40px; }
  .stat { padding: 0 16px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* On a phone the numbers come right after the buttons, so they stay on the
   first screen; the animated cards follow them. */
@media (max-width: 720px) {
  .hero { display: flex; flex-direction: column; }
  .hero-inner { display: contents; }
  .hero-copy { order: 1; padding: 0 16px; }
  .stats-wrap { order: 2; }
  .scene { order: 3; width: 100%; padding: 40px 16px 0; }
  .moments { order: 4; }
  .stats { margin-top: 28px; }
}
/* Numbers share a top line even when a label wraps. */
.stat { flex-direction: column; justify-content: flex-start; }
.stat dd { order: -1; }
/* Phone: the ask and the badge share one row, which keeps the numbers on the
   first screen of a 375 x 812 phone. */
@media (max-width: 720px) {
  .actions { flex-wrap: nowrap; gap: 8px; margin-top: 24px; }
  .btn-lg { padding: 14px 16px; font-size: 15px; }
  /* The row has no width to spare at 375, so the ask grows in height only:
     49px against the 46px badge. */
  .btn-xl { padding: 16px 16px; font-size: 15px; font-weight: 600; }
  .store-badge img { height: 46px; }
}
@media (max-width: 350px) { .actions { flex-wrap: wrap; } }
/* Every card in the study deck carries its own photo, back cards included. */
.dk { overflow: hidden; }
.dk img { width: 100%; height: 108px; object-fit: cover; }
.dk b { display: block; padding: 8px 12px; font-size: 16px; letter-spacing: -.01em; }
.dk-2, .dk-3 { filter: saturate(.9) brightness(.97); }
/* Fanned at rest so each back card's photo shows; hover opens the fan more. */
.deck { height: 190px; }
.dk-3 { transform: translateX(-82%) rotate(-9deg) translateY(-2px); }
.dk-2 { transform: translateX(-18%) rotate(8deg) translateY(-2px); }
@media (hover: hover) {
  .t-study:hover .dk-3 { transform: translateX(-92%) rotate(-13deg) translateY(-8px); }
  .t-study:hover .dk-2 { transform: translateX(-8%) rotate(12deg) translateY(-8px); }
}
@media (max-width: 720px) {
  .dk { width: 160px; height: 128px; }
  .dk img { height: 88px; }
  .dk b { font-size: 14px; padding: 7px 10px; }
  .deck { height: 170px; }
}

/* ---------- Phones first ----------
   The same visible link row as every other page, in place of the menu
   button (the site moved off a hidden menu on 2026-09-15 because almost
   nobody opened it). Tap targets reach 44px, and labels hold at 12px. */
@media (max-width: 860px) {
  .top-inner { flex-wrap: wrap; height: auto; min-height: 60px; row-gap: 0; padding-top: 10px; }
  .menu-btn { display: none; }
  .top-nav, .top-nav.open {
    position: static; display: flex; order: 10; width: calc(100% + 32px); margin: 8px -16px 0; padding: 0 8px;
    flex-direction: row; justify-content: space-between; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    background: none; border: 0; border-top: 1px solid var(--line); box-shadow: none;
  }
  .top-nav::-webkit-scrollbar { display: none; }
  .top-nav a { flex: 1 0 auto; text-align: center; padding: 13px 5px; min-height: 44px; border-radius: 0; font-size: 13.5px; font-weight: 500; }
  .top-nav a:hover { background: none; }
  .top .btn-sm { margin-left: auto; min-height: 36px; }
}
@media (max-width: 720px) {
  .mono-label, .sc-tag { font-size: 12px; }
  .o-src { display: inline-flex; align-items: center; min-height: 40px; }
  .link-arrow { min-height: 40px; }
  .foot-links { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; width: 100%; }
  .foot-links a { padding: 12px 0; font-size: 14px; }
  .cover-scale, .legend { font-size: 12px; }
}