/* ─────────────────────────────────────────────────────────────────
   Etch landing page — styles.css
   Dark-only. Mobile-first. One breakpoint at 880px.
   Brand tokens mirror DESIGN.md and the in-app Material 3 theme.
   ───────────────────────────────────────────────────────────────── */

:root {
  --bg:          #121417;   /* deep charcoal — matches app background */
  --surface:     #1A1D21;   /* cards, header bg */
  --surface-2:   #21252A;   /* lifted surfaces, tier-accent */
  --border:      #2A2F36;   /* subtle dividers */
  --text:        #E6E8EB;   /* warm white body */
  --text-muted:  #7A869A;   /* secondary text (spec'd grey) */
  --text-faint:  #4F5560;   /* tertiary / micro labels */
  --primary:     #20C9B7;   /* turquoise — interactive */
  --primary-ink: #08221F;   /* dark text on primary buttons */
  --accent:      #E3B04B;   /* gold — supporter / sparing accent */

  --font-serif:  'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  --container:   1120px;
}

/* RESET ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  font-feature-settings: 'ss01', 'cv11';   /* nicer Manrope alts */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, figure { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(32, 201, 183, 0.08);
  color: var(--primary);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

/* SKIP LINK ─────────────────────────────────────────────────────── */
.skip {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  background: var(--primary);
  color: var(--primary-ink);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip:focus { left: 0.5rem; }

/* TYPOGRAPHY ────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  line-height: 1.1;
}
h1 { font-size: clamp(2.25rem, 7vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text);
  max-width: 36em;
  line-height: 1.5;
}
.link {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(32, 201, 183, 0.35);
  transition: border-color 0.15s ease;
}
.link:hover { border-bottom-color: var(--primary); }

/* BUTTONS ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-pill);
  padding: 0.7em 1.4em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: #2DD9C7; }
.btn-ghost { color: var(--text); border-color: var(--border); background: transparent; }
.btn-ghost:hover { border-color: var(--text-muted); }
.btn-link {
  color: var(--primary);
  padding: 0.7em 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
.btn-link:hover { border-bottom-color: var(--primary); }
.btn-lg { font-size: 1rem; padding: 0.9em 1.6em; }
.btn-sm { font-size: 0.875rem; padding: 0.55em 1em; }

/* HEADER ────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.25rem 1.25rem;
  gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-mark { width: 32px; height: 32px; }
.brand-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.site-nav { display: flex; align-items: center; gap: 0.5rem; }
.site-nav .btn-ghost { display: none; }   /* hide secondary nav on mobile */

/* MAIN LAYOUT ───────────────────────────────────────────────────── */
main { padding: 0 1.25rem; }
section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 3.5rem 0;
}

/* HERO ──────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-top: 2rem;
}
.hero h1 { margin-bottom: 1rem; }
.claims {
  margin: 1.25rem 0 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.hero-shot { margin: 0; display: grid; place-items: center; }

/* ───────── HERO ANIMATION — "a card on unlock", finger-driven ─────────
   A self-contained loop: finger presses the power button, drags the lock
   screen open, the Etch card rises, the cloze blanks are tapped to reveal,
   then graded. Falls back to the static screenshot for reduced motion. */
.hero-anim { position: relative; width: 280px; }
.hero-anim-fallback { display: none; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) {
  .phone { display: none; }
  .hero-anim-fallback { display: block; }
}

.phone {
  position: relative;
  width: 280px; height: 600px;
  background: #0a0c0e;
  border-radius: 42px;
  border: 2px solid #242930;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  padding: 9px;
}
.phone-power {
  position: absolute; right: -5px; top: 168px;
  width: 5px; height: 66px;
  background: #2a2f36; border-radius: 0 4px 4px 0;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.phone-power.press { background: var(--primary); box-shadow: -3px 0 10px rgba(32, 201, 183, 0.7); }
.phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 34px; overflow: hidden; background: #050607;
}
.layer { position: absolute; inset: 0; }

/* Lock screen */
.lockscreen {
  background: radial-gradient(130% 90% at 50% 8%, #1b2733 0%, #0c1015 62%);
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.4,0,.2,1);
}
.lockscreen.on { opacity: 1; }
.lockscreen.unlocked { transform: translateY(-102%); opacity: 0; }
.ls-clock { font-family: var(--font-sans); font-weight: 300; font-size: 62px; color: #fff; margin-top: 78px; letter-spacing: -2px; line-height: 1; }
.ls-date { font-family: var(--font-sans); color: rgba(255,255,255,0.72); font-size: 14px; margin-top: 6px; }
.ls-lock-ic { margin-top: 30px; color: rgba(255,255,255,0.5); }
.ls-handle { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: 110px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.55); transition: transform 0.5s cubic-bezier(.4,0,.2,1), opacity 0.4s; }
.lockscreen.unlocked .ls-handle { transform: translate(-50%, -26px); opacity: 0; }

/* Overlay card (the Etch pop-up) */
.ovl {
  background: #0b0d10; display: flex; flex-direction: column;
  padding: 22px 18px 18px;
  opacity: 0; transform: translateY(34px); pointer-events: none;
  transition: opacity 0.4s ease, transform 0.46s cubic-bezier(.34,1.2,.5,1);
}
.ovl.on { opacity: 1; transform: translateY(0); }
.ovl.out { opacity: 0; transform: translateY(-22px); }
.ovl-trig { text-align: center; font-family: var(--font-sans); font-size: 8.5px; letter-spacing: 1.5px; color: rgba(255,255,255,0.42); text-transform: uppercase; line-height: 1.7; }
.ovl-trig b { color: rgba(255,255,255,0.82); font-weight: 600; }
.ovl-reveal-label { color: var(--primary); font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 20px; }
.ovl-card { flex: 1; display: flex; align-items: center; }
.ovl-sentence { font-family: var(--font-serif); font-size: 22px; line-height: 1.6; color: #E6E8EB; margin: 0; }
.pill {
  display: inline-block; vertical-align: middle; position: relative;
  border-radius: 6px; padding: 1px 8px; color: transparent;
  background: #79e9d4; border-bottom: 2px solid rgba(0,0,0,0.35);
  transition: background 0.3s ease, color 0.25s ease, border-color 0.3s ease;
}
.pill.revealed { background: transparent; color: #E6E8EB; border-bottom-color: rgba(32,201,183,0.55); }
.ovl-cta { margin-top: 16px; text-align: center; border: 1px solid rgba(32,201,183,0.45); color: var(--primary); border-radius: 14px; padding: 13px; font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 1px; transition: opacity 0.3s ease; }
.ovl-cta.hide { opacity: 0; }
.ovl-grade { display: flex; gap: 10px; margin-top: 16px; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; }
.ovl-grade.on { opacity: 1; transform: translateY(0); }
.gbtn { flex: 1; height: 60px; border-radius: 16px; display: grid; place-items: center; transition: filter 0.15s ease; }
.gbtn svg { width: 24px; height: 24px; }
.gbtn.no { background: rgba(226,75,74,0.16); color: #E24B4A; }
.gbtn.yes { background: var(--primary); color: #06201c; box-shadow: 0 0 22px rgba(32,201,183,0.35); }
.gbtn.tap { filter: brightness(1.18); }

/* Home screen — shown briefly after the card is answered, before blackout */
.homescreen { background: radial-gradient(120% 80% at 50% 18%, #18222c 0%, #0a0e12 70%); display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity 0.5s ease; }
.homescreen.on { opacity: 1; }
.hs-time { font-family: var(--font-sans); font-weight: 300; font-size: 40px; color: #fff; margin-top: 54px; line-height: 1; }
.hs-date { font-family: var(--font-sans); font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.hs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 20px; margin: 44px 0 auto; padding: 0 6px; }
.hs-app { width: 42px; height: 42px; border-radius: 12px; background: #2b313a; display: block; }
.hs-app.c1 { background: #3a4150; } .hs-app.c2 { background: #20708f; } .hs-app.c3 { background: #8a5a3c; }
.hs-app.c4 { background: #5a4a7a; } .hs-app.c5 { background: #2f6b54; } .hs-app.c6 { background: #9a4a5a; }
.hs-app.c7 { background: #4a5160; } .hs-app.c8 { background: #7a6a3a; }
.hs-app.etch { background: var(--primary); position: relative; }
.hs-app.etch .ear { position: absolute; top: 0; right: 0; border-width: 0 12px 12px 0; border-style: solid; border-color: transparent var(--accent) transparent transparent; border-top-right-radius: 12px; }
.hs-dock { display: flex; gap: 18px; margin-bottom: 22px; padding: 10px 14px; background: rgba(255,255,255,0.06); border-radius: 22px; }

/* Screen off / blackout */
.scr-off { background: #000; opacity: 1; transition: opacity 0.55s ease; }
.scr-off.clear { opacity: 0; }

/* The touch hand (Material touch_app — same icon the in-app onboarding uses) */
.finger { position: absolute; left: 0; top: 0; width: 54px; height: 54px; z-index: 60; pointer-events: none; transition: transform 0.5s cubic-bezier(.45,0,.25,1), opacity 0.4s ease; transform: translate(248px, 540px); }
.finger.fast { transition-duration: 0.32s; }
.finger.gone { opacity: 0; }
.finger .hand { display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45)); transition: transform 0.12s ease; transform-origin: 26px 7px; }
.finger.tap .hand { transform: scale(0.88); }
.finger .ripple { position: absolute; left: 11px; top: -8px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; transform: scale(0.4); }
.finger.tap .ripple { animation: fingerRipple 0.5s ease-out; }
@keyframes fingerRipple { 0% { opacity: 0.85; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.7); } }

/* APP-OPEN ANIMATION — "a card before you scroll" ──────────────────
   Reuses the .phone / .ovl / .finger primitives above, with distinct
   beats: tap a social app → it opens → an Etch card surfaces over it.
   Mobile reads text-first; desktop puts the animation on the LEFT. */
.appopen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
.appopen-shot { margin: 0; display: grid; place-items: center; }
.appopen-text { order: -1; }            /* text leads on mobile */
.appopen-anim { position: relative; width: 280px; }
.appopen-anim-fallback { display: none; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); }
/* Both cards play as one continuous block — the inner content cross-fades
   between them and the app behind is never shown until the block is done. */
.appopen-anim .ovl-card { transition: opacity 0.2s ease; }
.appopen-anim .ovl-card.fade { opacity: 0; }

/* Two card faces share the overlay; one is shown at a time. */
.appopen-anim .ao-face { display: none; width: 100%; flex-direction: column; align-items: center; }
.appopen-anim .ao-face.show { display: flex; }

/* Card 1 — Japanese vocab + audio */
.ao-lang { gap: 9px; text-align: center; }
.ao-jp-word { font-family: 'Noto Sans JP', var(--font-serif); font-weight: 600; font-size: 56px; line-height: 1; color: #E6E8EB; }
.ao-jp-reading { font-family: 'Noto Sans JP', var(--font-sans); font-size: 12.5px; letter-spacing: 1px; color: rgba(255,255,255,0.6); }
.ao-audio { display: inline-flex; align-items: center; gap: 7px; margin-top: 1px; padding: 5px 11px; border-radius: 20px; background: rgba(32,201,183,0.12); border: 1px solid rgba(32,201,183,0.34); color: var(--primary); }
.ao-wave { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 13px; }
.ao-wave i { width: 2.5px; height: 4px; border-radius: 2px; background: var(--primary); transition: height .25s ease; }
.ao-audio.playing .ao-wave i { animation: aoWave 0.9s ease-in-out infinite; }
.ao-audio.playing .ao-wave i:nth-child(2) { animation-delay: .12s; }
.ao-audio.playing .ao-wave i:nth-child(3) { animation-delay: .24s; }
.ao-audio.playing .ao-wave i:nth-child(4) { animation-delay: .36s; }
.ao-audio.playing .ao-wave i:nth-child(5) { animation-delay: .48s; }
@keyframes aoWave { 0%, 100% { height: 4px; } 50% { height: 13px; } }

/* The classic card flips front -> back on reveal (like Etch's flip). */
.ao-flip { width: 100%; perspective: 800px; }
.ao-flip-in { position: relative; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.ao-flip.flipped .ao-flip-in { transform: rotateY(180deg); }
.ao-flip-front, .ao-flip-back { display: flex; flex-direction: column; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ao-flip-front { gap: 9px; }
.ao-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); }
.ao-back-word { font-family: var(--font-serif); font-size: 34px; color: #E6E8EB; }

/* Card 2 — image occlusion (inline SVG); the single mask reveals on tap */
.ao-occ-svg { width: 100%; height: auto; display: block; }
.ao-lbl { font-family: var(--font-sans); font-size: 10px; font-weight: 700; fill: #33453b; }
.ao-mask { fill: #20C9B7; stroke: #13988a; stroke-width: 1; transition: opacity .3s ease; }
.ao-mask.revealed { opacity: 0; }
.appopen-text h2 { margin-bottom: 1rem; }
.appopen-text p { color: var(--text-muted); max-width: 34em; }
.appopen-text p:first-of-type { color: var(--text); font-size: 1.05rem; }
.appopen-note { font-size: 0.95rem; }

/* The "opened app" behind the card — an abstract feed, no logos */
.appfeed {
  background: linear-gradient(150deg, #f09433 0%, #e6683c 28%, #dc2743 62%, #bc1888 100%);
  opacity: 0; transform: scale(1.06);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2,.7,.3,1);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 12px;
}
.appfeed.on { opacity: 1; transform: scale(1); }
.af-top { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.af-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.92); }
.af-handle { display: flex; flex-direction: column; gap: 5px; }
.af-handle i { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.85); }
.af-handle i:first-child { width: 86px; }
.af-handle i:last-child { width: 52px; opacity: 0.7; }
.af-post { position: relative; height: 152px; border-radius: 12px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); }
.af-post.af-short { height: 92px; }
.af-cap { position: absolute; left: 12px; right: 40px; bottom: 12px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.5); }

/* The tapped app's home-screen icon — a generic social gradient, no logo */
.hs-app.social { background: linear-gradient(135deg, #f09433, #dc2743 55%, #bc1888); }

@media (prefers-reduced-motion: reduce) {
  .appopen-anim .phone { display: none; }
  .appopen-anim-fallback { display: block; }
}

/* FEATURES ──────────────────────────────────────────────────────── */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding-top: 5rem;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.feature h2 { font-size: 1.5rem; line-height: 1.15; margin-bottom: 0; }
.feature p { color: var(--text-muted); margin: 0; }
.feature p strong { color: var(--text); font-weight: 600; }
.feature-shot { margin: 0; margin-top: auto; }

/* MIGRATION ─────────────────────────────────────────────────────── */
.migration {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.migration-text p { color: var(--text-muted); max-width: 36em; }
.migration-text p:first-of-type { color: var(--text); font-size: 1.05rem; }

/* PRIVACY ───────────────────────────────────────────────────────── */
.privacy {
  max-width: 720px;
  text-align: left;
}
.privacy h2 { margin-bottom: 0.8em; }
.privacy p { color: var(--text); }
.privacy-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.95rem;
}
.privacy-note strong { color: var(--text); font-weight: 600; }

/* PRICING ───────────────────────────────────────────────────────── */
.pricing { text-align: center; }
.pricing h2 { margin-bottom: 0.4em; }
.pricing-lede { color: var(--text-muted); margin-bottom: 2.5rem; }
.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  text-align: left;
  max-width: 1000px;
  margin: 0 auto;
}
.tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
}
.tier-accent { border-color: rgba(227, 176, 75, 0.4); }
.tier-accent h3 { color: var(--accent); }
.tier h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.price {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0.25rem 0 1.25rem;
  line-height: 1;
}
.price-once {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 0.25rem;
}
.tier-features li {
  padding: 0.45rem 0;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.tier-features li:last-child { border-bottom: 0; }
.promise {
  margin-top: 2.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text);
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
}

/* NOTIFY ────────────────────────────────────────────────────────── */
.notify {
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.notify h2 { margin-bottom: 0.5em; }
.notify p { color: var(--text-muted); margin-bottom: 2rem; }

/* SHOT PLACEHOLDERS ─────────────────────────────────────────────── */
/* Visible stand-ins until real screenshots arrive. Each placeholder
   carries the brand colour scheme so the layout feels intentional even
   before assets land. Replace each one with an <img> per SCREENSHOTS.md. */
.shot-placeholder {
  width: 100%;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(32, 201, 183, 0.05), rgba(227, 176, 75, 0.04)),
    var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.shot-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(32, 201, 183, 0.08), transparent 70%);
  pointer-events: none;
}
.shot-portrait    { aspect-ratio: 9 / 19;  max-width: 380px; margin: 0 auto; }
.shot-portrait-sm { aspect-ratio: 9 / 19;  max-width: 220px; margin: 0 auto; }
.shot-landscape   { aspect-ratio: 16 / 10; }
.placeholder-label {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
}

/* Real screenshots — raw device captures (1080×2400). The polish agent can
   swap in device-framed / treated versions later; these are styled to read
   cleanly bare in the meantime. */
.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}
.shot-hero      { max-width: 320px; margin: 0 auto; }
.shot-feature   { max-width: 220px; margin: 0 auto; }
.shot-migration { max-width: 300px; margin: 0 auto; }

/* FOOTER ────────────────────────────────────────────────────────── */
.site-footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.site-footer p { margin: 0.25rem 0; }
.footer-links .dot { margin: 0 0.5rem; color: var(--text-faint); }

/* DESKTOP ───────────────────────────────────────────────────────── */
@media (min-width: 880px) {
  .site-header { padding: 1.5rem 2rem; }
  .site-nav .btn-ghost { display: inline-flex; }
  main { padding: 0 2rem; }
  section { padding: 5rem 0; }

  .hero {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    padding-top: 3.5rem;
    padding-bottom: 5rem;
  }
  .hero-text { padding-right: 1rem; }

  .features {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .migration {
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
  }

  .appopen {
    grid-template-columns: 0.9fr 1.1fr;   /* animation left, text right */
    gap: 4rem;
  }
  .appopen-text { order: 0; padding-left: 0.5rem; }

  .tiers { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

/* PROSE PAGE (privacy.html) ─────────────────────────────────────── */
/* Long-form reading layout: narrow column, larger body type, generous
   list and heading rhythm. Reuses brand tokens; no extra colors. */
.prose-main {
  padding: 0 1.25rem 4rem;
}
.prose {
  max-width: 720px;
  margin: 2rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
}
.prose h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin-bottom: 0.5em;
}
.prose h2 {
  font-size: 1.6rem;
  margin: 2.5em 0 0.6em;
  padding-top: 1.5em;
  border-top: 1px solid var(--border);
}
.prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5em; }
.prose h3 {
  font-size: 1.2rem;
  margin: 2em 0 0.5em;
  color: var(--text);
}
.prose p { color: var(--text); }
.prose p em { color: var(--text-muted); }
.prose ul {
  margin: 0 0 1.25em;
  padding-left: 1.25em;
  list-style: disc;
}
.prose li {
  padding: 0.2em 0;
  color: var(--text);
}
.prose li::marker { color: var(--text-faint); }
.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 3em auto;
  max-width: 8rem;
}
.prose code {
  /* Already styled globally; keep here for readability with smaller table cells */
  word-break: break-word;
}
.prose strong { color: var(--text); font-weight: 600; }

/* Tables — horizontally scrollable on narrow viewports */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 1.5em 0;
  background: var(--surface);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.45;
}
.prose th, .prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.7em 0.85em;
  border-bottom: 1px solid var(--border);
}
.prose th {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  white-space: nowrap;
}
.prose td { color: var(--text-muted); }
.prose tr:last-child td { border-bottom: 0; }

/* REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}