/* notalune.com — one stylesheet, hand-written.
   Design tokens ported 1:1 from app/Notalune/Sources/Theme.swift.
   No external requests anywhere on this site: fonts are self-hosted (OFL, see
   ../fonts/OFL.txt), images local, zero analytics. ONE self-hosted progressive-enhancement
   script (assets/js/hero-scroll.js) drives the landing hero; it is no-third-party, loads
   no data, and the static hero is the full no-JS fallback — the site still works with JS off.

   ---------------------------------------------------------------------------
   MOTION DOCTRINE (2026-07-19) — evidence: docs/brand/RESEARCH-motion-conversion.md
   Four rules. They are not taste; each traces to a measurement.

   1. COMPOSITOR-ONLY. Animate `transform` / `opacity` / `filter` / `clip-path` and
      nothing else. Measured: animating top/left dropped 50% of frames vs 1% for the
      same visual result via transform (web.dev). Layout-triggering animation is also
      the only kind that can cause CLS.
   2. NO PARALLAX, NO SCROLL-HIJACKING. The two techniques with documented harm in
      NN/g moderated studies ("the majority of our study participants were at least
      mildly disoriented"). 35.4% of adults 40+ have measurable vestibular dysfunction
      (NHANES n=5086) and our buyers are 35–65 — this is a health rule, not a style one.
   3. MOTION MUST TEACH OR RESPOND. Animation's effect size is largest when it depicts
      a procedure (Höffler & Leutner d=1.06) and when it answers the user's own action
      within 0.1s. Decorative motion has no measured benefit (Tversky's congruence
      principle). Durations 100–300ms.
   4. PROGRESSIVE ENHANCEMENT. Every animated thing must be complete and legible with
      animation removed — prefers-reduced-motion should yield exactly the calm static
      page, never a broken one. Do not rely on the OS flag alone: adoption is unmeasured
      and many affected users never find the setting, so keep default amplitudes small.

   If a future session wants a JS scroll library: don't. Use CSS scroll-driven
   animations (Scroll/View Timeline), which run off the main thread.
   --------------------------------------------------------------------------- */

/* ---------- fonts ---------- */
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/Caveat-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Music"; src: url("../fonts/NotoMusic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- tokens (Theme.swift) ---------- */
:root {
  --ink: #3B2C1C;
  --ink-deep: #28200F;
  --cream: #F3E7CF;
  --cream-alt: #F3EAD6;
  --cream-warm: #F0E2C6;
  --parchment-text: #E9DDC7;
  --brown: #7A5230;
  --sienna: #5A3A1C;
  --gold: #C9A86D;
  --gold-pro: #9C7B3A;
  --primary: #3E5C5B;
  --primary-deep: #2F4A48;
  --success: #3F6247;
  --danger: #8F3B36;
  --maroon: #7C3B3F;
  --night: #0C0907;
  --hairline: rgba(59, 44, 28, 0.12);
  --display: "EB Garamond", Georgia, serif; /* Cormorant retired — floating háček on ěščřž */
  /* ONE-LINE FONT SWITCH: keeping EB Garamond for body is a brand decision (the app's own
     voice, Font+Notalune.swift). The Darkroom audit (docs/brand/RESEARCH-darkroom.md §13)
     showed the legibility problem was SIZE, not typeface — fixed in the scale below.
     To go system-stack (≈250 KB lighter, instant render, less "old book"), swap the next
     line for the commented one; nothing else needs to change. */
  --body: "EB Garamond", Georgia, serif;
  /* --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; */
  --hand: "Caveat", cursive;
  --music: "Noto Music", serif;

  /* ---------- type scale: 6 steps, no drift (was 23 sizes) ----------
     hero 34–54 · h2 27–38 · h3/lead 22 · body 19 · ui 16 · micro 13.6 */
  --t-hero: clamp(2.1rem, 5.5vw, 3.4rem);
  --t-h2:   clamp(1.7rem, 3.6vw, 2.4rem);
  --t-h3:   1.375rem;
  --t-body: 1.1875rem;
  --t-ui:   1rem;
  --t-micro: 0.85rem;
  --radius-card: 18px;
  --radius-sheet: 26px;
  --shadow-card: 0 10px 12px rgba(80, 52, 24, 0.22);
  --shadow-lift: 0 4px 10px rgba(12, 9, 7, 0.25);
  --max: 1100px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  /* ParchmentBackground port: base radial + moonlight bloom + vignette */
  background:
    radial-gradient(circle 120px at calc(100% - 64px) 84px, rgba(255, 250, 235, 0.55), transparent),
    radial-gradient(circle 900px at 60% 4%, #EFE3CA, #E6D6B6, #DCC9A3);
  background-color: #E6D6B6;
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
}
/* paper grain (procedural 96×96 noise tile, injected below) + inner vignette */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/png;base64,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");
  background-repeat: repeat;
  opacity: 0.045;
  mix-blend-mode: multiply;
  z-index: 0;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(90, 60, 30, 0.16));
  z-index: 0;
}
main, header.site, footer.site { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration-color: rgba(62, 92, 91, 0.4); text-underline-offset: 3px; }
a:hover { color: var(--primary-deep); }

h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.15; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p  { max-width: 62ch; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
/* Sticky: the one menu (identical on every page) stays reachable while reading.
   Border-bottom removed 2026-07-23 (David: "remove the line under the menu, clean"). */
header.site {
  padding: 20px 0;
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 239, 221, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* On the scroll-hero landings ONLY (html.motion is set exclusively there): the header is
   fixed + hidden over the cinematic hero, then slides in and stays at the hero→content
   boundary. `.hs-reveal` is toggled by hero-scroll.js. Fixed = the hero is full-bleed from
   y0 (no header flow-band). Non-motion / other pages keep the normal sticky header above. */
html.motion header.site {
  position: fixed; left: 0; right: 0; top: 0;
  transform: translateY(-105%); transition: transform .38s ease;
}
html.motion header.site.hs-reveal { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html.motion header.site { position: sticky; transform: none; transition: none; }
}
header.site .wrap { display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: 43px; }
.brand span { font-family: var(--display); font-weight: 600; font-size: var(--t-h3); letter-spacing: 0.4px; }
header.site nav { margin-left: auto; display: flex; gap: 22px; align-items: center; font-size: var(--t-ui);
  flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
/* 8 nav items (Press added 2026-07-24) overflow a ~1200px laptop at gap 22. Tighten the gap
   before the mobile breakpoint so no item is ever pushed out of sight. */
@media (max-width: 1180px) { header.site nav { gap: 15px; } }
@media (max-width: 1000px) { header.site nav { gap: 11px; font-size: .82rem; } }
header.site nav a { text-decoration: none; color: rgba(59, 44, 28, 0.78); }
header.site nav a:hover { color: var(--ink); }
/* mobile-nav controls (hidden on desktop; no JS — checkbox toggle) */
.nav-open { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nav-btn { display: none; }
.lang { font-size: var(--t-ui); padding: 5px 12px; border: 1px solid var(--hairline); border-radius: 999px; background: rgba(243, 231, 207, 0.7); }
/* language dropdown (JS-free, details/summary) — replaces the single lang pill */
details.langs { position: relative; }
details.langs summary { list-style: none; cursor: pointer; font-size: var(--t-ui);
  padding: 5px 12px; border: 1px solid var(--hairline); border-radius: 999px;
  background: rgba(243, 231, 207, 0.7); color: rgba(59, 44, 28, 0.78); white-space: nowrap; }
details.langs summary::-webkit-details-marker { display: none; }
details.langs summary::after { content: " ▾"; font-size: 0.75em; }
details.langs[open] summary::after { content: " ▴"; }
details.langs .lang-list { position: absolute; right: 0; top: calc(100% + 8px);
  display: flex; flex-direction: column; min-width: 150px;
  background: rgba(246, 239, 221, 0.98); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 6px 0; box-shadow: 0 14px 30px rgba(80, 52, 24, 0.18); z-index: 60; }
details.langs .lang-list a { padding: 9px 16px !important; border-bottom: none !important;
  text-decoration: none; color: rgba(59, 44, 28, 0.82); }
details.langs .lang-list a:hover { color: var(--ink); background: rgba(59, 44, 28, 0.05); }
details.langs .lang-list a[aria-current="true"] { font-weight: 600; color: var(--ink); }
@media (max-width: 720px) {
  details.langs { width: 100%; }
  details.langs summary { border: none; background: none; border-radius: 0;
    padding: 13px 18px; border-bottom: 1px solid rgba(59, 44, 28, 0.08); }
  details.langs .lang-list { position: static; border: none; box-shadow: none;
    background: none; padding: 0 0 4px 14px; }
}

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 8vw, 96px) 0 clamp(36px, 6vw, 72px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero .kicker { font-size: var(--t-micro); letter-spacing: 2.4px; text-transform: uppercase; color: rgba(59, 44, 28, 0.55); font-weight: 500; font-family: var(--body); margin-bottom: 14px; }
.hero h1 { margin-bottom: 20px; }
.hero .sub { font-size: var(--t-h3); color: rgba(59, 44, 28, 0.8); margin-bottom: 30px; }
.hero .glyph { font-family: var(--music); color: rgba(122, 82, 48, 0.55); }

.cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cta {
  display: inline-block;
  font-family: var(--display); font-weight: 600; font-size: var(--t-body);
  color: var(--cream);
  background: var(--primary);
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow-lift);
}
.cta:hover { background: var(--primary-deep); color: var(--cream); }
.cta.soon { cursor: default; }
.cta-note { font-size: var(--t-ui); color: rgba(59, 44, 28, 0.6); font-style: italic; }

/* phone frame */
.phone {
  width: min(300px, 78vw);
  margin: 0 auto;
  border-radius: 42px;
  padding: 12px;
  background: var(--night);
  box-shadow: 0 24px 48px rgba(12, 9, 7, 0.35);
}
.phone img { border-radius: 32px; }
/* card-sized phone (toolkit) — same bezel, smaller */
.phone.mini { display: block; width: min(240px, 80%); margin: 20px auto 0;
  border-radius: 34px; padding: 9px; }
.phone.mini img { border-radius: 26px; }

/* ---------- sections ---------- */
section { padding: clamp(40px, 7vw, 84px) 0; }
section .lead { font-size: var(--t-h3); margin: 14px 0 0; }
.eyebrow { font-size: var(--t-micro); letter-spacing: 2.4px; text-transform: uppercase; color: rgba(59, 44, 28, 0.5); font-weight: 500; margin-bottom: 10px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
/* equal cards: phones sit on one shared baseline regardless of text length */
.card { display: flex; flex-direction: column; }
.card > p { margin-bottom: 16px; }
.card .phone.mini { margin-top: auto; margin-bottom: 0; }
.card {
  background: linear-gradient(135deg, #F3E8D1, #E4D2AB);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sheet);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: var(--t-body); }
.card .tag { display: inline-block; font-size: var(--t-micro); letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 12px; border-radius: 999px; border: 1px solid rgba(59, 44, 28, 0.2); color: rgba(59, 44, 28, 0.6); margin-bottom: 14px; }
.card .tag.pro { color: var(--gold-pro); border-color: rgba(156, 123, 58, 0.6); }
.card .art { margin: 18px -8px 0; }
.card .art img { border-radius: 14px; border: 1px solid var(--hairline); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; counter-reset: step; }
.step { position: relative; padding: 24px 22px 22px; background: rgba(243, 234, 214, 0.75); border: 1px solid var(--hairline); border-radius: var(--radius-card); }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--display); font-weight: 600; font-size: var(--t-h3);
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary); color: var(--cream);
  margin-bottom: 14px;
}
.step h3 { font-size: var(--t-h3); margin-bottom: 8px; }
.step p { font-size: var(--t-body); }

/* trust */
.trust { background: rgba(40, 32, 15, 0.035); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.trust-leg { padding: 22px; background: var(--cream-alt); border-radius: var(--radius-card); border: 1px solid var(--hairline); box-shadow: 0 3px 8px rgba(12, 9, 7, 0.08); }
.trust-leg h3 { margin-bottom: 8px; font-size: var(--t-h3); }
.trust-leg p { font-size: var(--t-body); }

/* the traffic light glyph (matches the in-app icon) */
.traffic { display: inline-flex; flex-direction: column; gap: 3px; vertical-align: -6px; margin-right: 8px; padding: 6px; background: rgba(243, 231, 207, 0.9); border-radius: 50px; border: 1px solid var(--hairline); }
.traffic i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.traffic .r { background: #99342E; }
.traffic .o { background: #9C6B24; }
.traffic .g { background: #3F6247; }

/* blank-note demo chip row */
.notes-demo { display: flex; gap: 10px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.chip { font-family: var(--body); font-weight: 500; background: var(--cream); border-radius: 999px; padding: 3px 13px; color: var(--sienna); box-shadow: 0 1px 2px rgba(12, 9, 7, 0.18); font-size: var(--t-body); }
.chip.blank { background: transparent; box-shadow: none; border: 1.6px dashed rgba(59, 44, 28, 0.5); color: transparent; width: 34px; height: 34px; border-radius: 50%; padding: 0; }

/* quote block (teachers / returner) */
.quote { border-left: 3px solid var(--gold); padding: 6px 0 6px 24px; margin-top: 26px; font-size: var(--t-h3); font-family: var(--display); font-style: italic; color: rgba(59, 44, 28, 0.85); max-width: 46ch; }

/* pricing */
/* pricing — mirrors the app paywall (pills, check circles, one-time price card) */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 36px; align-items: stretch; }
.tier { border-radius: var(--radius-sheet); padding: 26px 26px 30px; border: 1px solid var(--hairline); background: rgba(243, 234, 214, 0.75); display: flex; flex-direction: column; }
.tier.pro { background: linear-gradient(135deg, #ECE0C6, #DDCAA3); box-shadow: var(--shadow-card); }
.tier-pill { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 7px 17px; border-radius: 20px; font-size: var(--t-micro); letter-spacing: 2.2px; text-transform: uppercase; border: 1.5px solid; font-weight: 500; }
.tier-pill i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.tier-pill.free { color: var(--success); border-color: rgba(63, 98, 71, 0.45); }
.tier-pill.free i { background: var(--success); }
.tier-pill.gold { color: var(--gold-pro); border-color: rgba(156, 123, 58, 0.5); }
.tier-pill.gold i { background: var(--gold-pro); }
.tier-sub { margin: 14px 0 4px; color: rgba(59, 44, 28, 0.65); font-size: var(--t-body); }
.tier-list { list-style: none; padding: 0; margin: 8px 0 0; }
.tier-list li { padding: 11px 0; border-bottom: 1px solid rgba(59, 44, 28, 0.08); display: flex; gap: 12px; align-items: baseline; font-size: var(--t-body); }
.tier-list li:last-child { border-bottom: none; }
.tier-list li span { color: rgba(59, 44, 28, 0.55); font-size: var(--t-ui); }
.tier-list.dot li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: 0 0 auto; transform: translateY(-2px); }
.tier-list.check li::before { content: "✓"; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--success); color: #F3E7CF; font-size: var(--t-micro); line-height: 22px; text-align: center; transform: translateY(4px); }
.price-card { position: relative; margin-top: auto; background: rgba(246, 241, 227, 0.92); border: 1.5px solid var(--primary); border-radius: 16px; padding: 20px 18px 13px; margin-bottom: 18px; }
.tier .price-card { margin-top: 22px; }
.price-tag { position: absolute; top: -13px; left: 18px; background: var(--primary); color: var(--cream); font-size: var(--t-micro); letter-spacing: 2px; text-transform: uppercase; padding: 4px 15px; border-radius: 14px; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); gap: 12px; }
.price-row strong { font-size: var(--t-h3); font-weight: 500; }
.price-row em { font-style: normal; font-size: var(--t-h3); font-weight: 600; white-space: nowrap; }
.price-fine { display: flex; justify-content: space-between; color: rgba(59, 44, 28, 0.55); font-size: var(--t-micro); margin-top: 4px; gap: 12px; }

/* privacy strip */
.privacy-strip { background: radial-gradient(circle 900px at 50% 8%, #26201A, #16110C, #0B0805); color: var(--parchment-text); }
.privacy-strip h2 { color: var(--cream-warm); }
.privacy-strip p { color: rgba(233, 221, 199, 0.85); }
.privacy-strip .eyebrow { color: rgba(233, 221, 199, 0.5); }
.privacy-strip a { color: var(--gold); text-decoration-color: rgba(201, 168, 109, 0.4); }
.privacy-facts { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; font-family: var(--display); font-size: var(--t-h3); }
.privacy-facts span { border: 1px solid rgba(233, 221, 199, 0.25); padding: 8px 18px; border-radius: 999px; }

/* metronome full-width banner (dark, like the /metronome/ hero).
   The candlelight spill covers the WHOLE banner (device feedback: the stage-local
   glow ended abruptly at the art column and read as a cut-off). */
.metro-banner{
  background:
    radial-gradient(95% 130% at 74% 52%, rgba(255, 190, 100, 0.17) 0%, rgba(255, 172, 82, 0.06) 40%, rgba(255, 172, 82, 0) 68%),
    radial-gradient(120% 90% at 50% 8%, #26201A 0%, #16110C 45%, #0B0805 100%);
  color: var(--parchment-text);
  overflow: hidden;
  padding: 0;
}
@media (max-width: 900px){
  .metro-banner{
    background:
      radial-gradient(130% 80% at 50% 74%, rgba(255, 190, 100, 0.17) 0%, rgba(255, 172, 82, 0.06) 40%, rgba(255, 172, 82, 0) 68%),
      radial-gradient(120% 90% at 50% 8%, #26201A 0%, #16110C 45%, #0B0805 100%);
  }
}
.metro-banner .wrap{
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(24px, 5vw, 64px); align-items: center;
  padding-top: clamp(40px, 6vw, 72px);
}
.metro-banner h2{ color: var(--cream-warm); }
.metro-banner p{ color: rgba(233, 221, 199, 0.85); }
.metro-banner .eyebrow{ color: rgba(233, 221, 199, 0.5); }
.metro-banner .cta{ background: var(--gold); color: #2A1C0C; }
.metro-banner .cta:hover{ background: #B8965C; color: #2A1C0C; }
.metro-banner .cta-note{ color: rgba(233, 221, 199, 0.55); }
.metro-banner .art{ display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.metro-banner .art > img{ width: min(360px, 80vw); display: block; }
@media (max-width: 900px){
  .metro-banner .wrap{ grid-template-columns: 1fr; }
  .metro-banner .art{ margin-top: 8px; }
}

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--hairline); padding: 40px 0 56px; font-size: var(--t-ui); color: rgba(59, 44, 28, 0.7); }
footer.site .wrap { display: grid; gap: 10px; }
footer.site nav { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
footer.site .fine { font-size: var(--t-micro); color: rgba(59, 44, 28, 0.55); }

/* ---------- article pages (privacy/terms/support) ---------- */
article.doc { max-width: 780px; margin: 0 auto; padding: 20px 24px 80px; }
article.doc h1 { margin: 30px 0 16px; }
article.doc h2 { margin: 34px 0 12px; font-size: var(--t-h3); }
article.doc h3 { margin: 22px 0 10px; }
article.doc p, article.doc li { margin-bottom: 12px; }
article.doc ul { padding-left: 24px; }
article.doc hr { border: none; border-top: 1px solid var(--hairline); margin: 40px 0; }
article.doc .updated { font-style: italic; color: rgba(59, 44, 28, 0.55); font-size: var(--t-ui); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cards, .steps, .trust-grid { grid-template-columns: 1fr; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .phone { order: -1; }
  .tiers { grid-template-columns: 1fr; }
}

/* ---------- mobile: hamburger nav + full-height hero phone ---------- */
@media (max-width: 720px) {
  header.site { padding: 14px 0; }
  header.site .wrap { flex-wrap: wrap; }
  .brand span { font-size: var(--t-h3); }

  .nav-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px; padding: 11px 10px;
    background: rgba(243, 237, 222, 0.55);
    border: 1px solid rgba(59, 44, 28, 0.2); border-radius: 10px;
    cursor: pointer;
  }
  .nav-btn span {
    display: block; height: 2px; background: var(--ink); border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-open:focus-visible + .nav-btn { outline: 2px solid var(--ink); outline-offset: 2px; }
  .nav-open:checked + .nav-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open:checked + .nav-btn span:nth-child(2) { opacity: 0; }
  .nav-open:checked + .nav-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  header.site nav {
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; margin: 12px 0 0; padding: 4px 0;
    background: rgba(246, 239, 221, 0.94);
    border: 1px solid var(--hairline); border-radius: 14px;
    font-size: var(--t-body);
  }
  .nav-open:checked ~ nav { display: flex; }
  header.site nav a { padding: 13px 18px; border-bottom: 1px solid rgba(59, 44, 28, 0.08); }
  header.site nav a:last-child { border-bottom: none; }
  header.site nav a.hide-s { display: block; }

  /* hero phone ≈ one viewport tall (header + a peek of the headline stay visible) */
  .hero { padding-top: 16px; }
  .hero .phone { width: fit-content; max-width: 84vw; }
  .hero .phone img {
    display: block; width: auto; max-width: 100%;
    height: calc(100vh - 170px);
    height: calc(100svh - 170px);
    object-fit: contain;
  }

  body { font-size: var(--t-body); }
}

/* ---------- landing v2: illustrations, maker quote, faq teaser, final cta ---------- */
.step img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--hairline); margin-bottom: 16px; }
.maker-quote { text-align: center; max-width: 640px; margin: 0 auto; }
.maker-quote .hand { font-family: var(--display); font-style: italic; font-size: var(--t-h2); color: var(--sienna); line-height: 1.25; }
.maker-quote .who { margin-top: 16px; font-size: var(--t-ui); color: rgba(59, 44, 28, 0.6); }
.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.split img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); }
.faq-mini { max-width: 760px; }
.faq-mini details { border-bottom: 1px solid var(--hairline); padding: 4px 0; }
.faq-mini summary { cursor: pointer; font-family: var(--display); font-weight: 500; font-size: var(--t-body); padding: 12px 0; }
.faq-mini summary:hover { color: var(--ink-deep); }
.faq-mini p { margin: 2px 0 16px; color: rgba(59, 44, 28, 0.72); }
.final-cta { text-align: center; }
.final-cta .appicon { width: 84px; height: 84px; border-radius: 19px; box-shadow: var(--shadow-lift); margin: 0 auto 22px; display: block; }
.final-cta h2, .final-cta .lead { text-align: center; }
.final-cta .lead { max-width: 560px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- live metronome preview (metro-banner) — the real stage from /metronome/,
   silent, pendulum swinging at 88 BPM via CSS only. Geometry 1:1 (stage space 460×912). */
.metro-live { display: block; position: relative; width: 340px; height: 592px; margin: 0 auto; }
.ml-stage { position: absolute; left: 50%; top: 0; width: 460px; height: 912px;
  transform: translateX(-50%) scale(0.74) translateY(-40px); transform-origin: top center;
  pointer-events: none; }
.ml-glow { position: absolute; width: 320px; height: 520px; left: 110px; top: 380px; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 32% 42%, rgba(255, 196, 108, 0.34) 0%, rgba(255, 170, 80, 0.10) 34%, rgba(255, 170, 80, 0) 66%);
  mix-blend-mode: screen; animation: ml-flicker 4.8s ease-in-out infinite; }
@keyframes ml-flicker { 0%, 100% { opacity: 0.62; } 50% { opacity: 0.92; } }
.ml-body, .ml-lip { position: absolute; width: 768px; height: auto; max-width: none; left: 265px; top: 528.2px;
  transform: translate(-50%, -50%); }
.ml-body { filter: drop-shadow(0 24px 15px rgba(0, 0, 0, 0.6)); }
.ml-brass { position: absolute; width: 104px; height: 483px; left: 231px; top: 433.5px; transform: translate(-50%, -50%);
  border-radius: 3px; overflow: hidden;
  background: linear-gradient(90deg, #9c7c38 0%, #f4e3ae 22%, #ecd69e 48%, #d0af6c 74%, #8a6a34 100%);
  box-shadow: inset 0 0 0 1px rgba(70,46,16,.5), inset -6px 0 12px rgba(120,86,30,.35), inset 6px 0 10px rgba(255,240,200,.4); }
.ml-brass .ml-div { position: absolute; left: 52px; top: 6px; bottom: 6px; width: 1.5px; background: rgba(70, 46, 16, 0.5); }
.ml-brass .ml-num { position: absolute; width: 34px; text-align: right; left: 60px;
  font-family: var(--body); font-weight: 600; font-size: 18px; color: #46320F; line-height: 1; }
.ml-brass .ml-term { position: absolute; left: 8px; font-family: var(--body); font-weight: 600;
  font-size: 8px; letter-spacing: .8px; color: #5a3f14; white-space: nowrap; }
.ml-woodshadow { position: absolute; width: 82px; height: 26px; left: 231px; top: 636px; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); }
.ml-lip { -webkit-mask-image: linear-gradient(to bottom, transparent 0 61.9%, #000 61.9% 100%);
          mask-image: linear-gradient(to bottom, transparent 0 61.9%, #000 61.9% 100%); }
.ml-pend { position: absolute; left: 231px; top: 642px; width: 0; height: 0;
  animation: ml-swing 0.682s ease-in-out infinite alternate; }
@keyframes ml-swing { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
.ml-pend .ml-rod { position: absolute; left: -2.25px; bottom: 0; width: 4.5px; height: 444px; border-radius: 2px;
  background: linear-gradient(90deg, #241810, #7A6038 45%, #B89A5E 52%, #5C4626 70%, #241810); }
.ml-pend .ml-bob { position: absolute; left: -37px; bottom: 320px; width: 74px; height: 52px;
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #f6e3a6, #d4b06e 40%, #8f6a30);
  box-shadow: 0 4px 7px rgba(0,0,0,.6), inset 0 1px 2px rgba(255,248,224,.6); }
.ml-pend .ml-bob::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 5px; background: rgba(70, 44, 16, 0.75); }
.ml-cap { text-align: center; font-family: var(--display); font-style: italic; font-size: var(--t-h3);
  color: #E7D2A3; margin-top: 2px; }
/* the static tempo dial under the preview — same look as the real knob on /metronome/,
   frozen at 88 BPM (the preview was "missing the tempo dial", device feedback) */
.ml-knob { position: relative; width: 154px; height: 154px; margin: -34px auto 0; z-index: 4; }
.ml-knob .k-base { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #E9CF94 0%, #B48F4E 55%, #7C5A28 100%);
  box-shadow: inset 0 0 0 2px rgba(70, 46, 16, 0.55), 0 8px 12px rgba(0, 0, 0, 0.55); }
.ml-knob .k-tick { position: absolute; left: 50%; top: 50%; width: 2px; height: 11px; border-radius: 2px;
  background: rgba(92, 70, 38, 0.7); }
.ml-knob .k-pointer { position: absolute; left: 50%; top: 50%; width: 4px; height: 17px; border-radius: 3px;
  background: #3A2810; transform: translate(-50%, -50%) rotate(14deg) translateY(-48px); }
.ml-knob .k-hub { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #F0DDA6 0%, #C9A86D 100%);
  box-shadow: inset 0 0 0 1px rgba(70, 46, 16, 0.4); }
.ml-knob .k-read { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 0.9; }
.ml-knob .k-read .bpm { font-family: var(--display); font-weight: 600; font-size: 40px; color: #2A1C0C; }
.ml-knob .k-read .lbl { font-family: var(--body); font-size: 12px; letter-spacing: 1.5px;
  color: #5C4626; margin-top: -2px; }
@media (prefers-reduced-motion: reduce) {
  .ml-pend { animation: none; transform: rotate(0deg); }
  .ml-glow { animation: none; }
}
@media (max-width: 720px) {
  .metro-live { width: 276px; height: 480px; }
  .ml-stage { transform: translateX(-50%) scale(0.60) translateY(-40px); }
}

/* ---------- interaction layer (2026-07-19, RESEARCH-darkroom §13.4) ----------
   The audit found darkroom.co runs its whole motion vocabulary on 0.2s hover/state
   transitions (44 elements) and zero scroll animation, while this site had NO
   micro-interaction at all — nothing answered the cursor. One duration (0.18s),
   one easing, applied to what is actually interactive. Fully disabled under
   prefers-reduced-motion. */
a, button, .btn, .card, .step, .tier, .chip, .price-card,
header.site nav a, footer.site nav a, .nav-btn, details.langs summary {
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
header.site nav a:hover { color: var(--ink); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-lift); }
.card:hover, .step:hover { border-color: rgba(59, 44, 28, 0.22); box-shadow: var(--shadow-lift); }
.chip:hover { transform: translateY(-1px); }
/* Keyboard users get the same affordance as the mouse. */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  a, button, .btn, .card, .step, .tier, .chip, .price-card,
  header.site nav a, footer.site nav a, .nav-btn, details.langs summary { transition: none; }
  .btn:hover, .chip:hover { transform: none; }
}

/* ---------- persistent mobile CTA (RESEARCH-darkroom §13.5) ----------
   Darkroom's "Get the App" never leaves the mobile viewport; ours was buried in the
   hamburger. The header CTA is hidden on desktop (the hero CTA is 200px away) and
   appears only ≤720px, sitting between the wordmark and the menu button. */
.hdr-cta { display: none; }
@media (max-width: 720px) {
  .hdr-cta {
    display: inline-flex; align-items: center; margin-left: auto; margin-right: 10px;
    padding: 9px 16px; border-radius: 999px;
    background: var(--primary); color: var(--cream);
    font-family: var(--display); font-weight: 600; font-size: var(--t-ui);
    text-decoration: none; white-space: nowrap;
    box-shadow: var(--shadow-lift);
  }
  .hdr-cta:hover, .hdr-cta:active { color: var(--cream); background: var(--primary-deep); }
  .nav-btn { margin-left: 0; }
}
/* measured at 390px: brand 132 + CTA + button must fit 342px of content width.
   "Coming soon" = 119px → 305 total, fits. Below 380px the wordmark steps aside. */
@media (max-width: 380px) {
  .hdr-cta { padding: 8px 13px; font-size: var(--t-micro); }
  .brand span { display: none; }
}

/* ---------- "may not be for you" block (RESEARCH-darkroom §3) ----------
   Deliberately quiet: no card, no accent colour, no icon. It should read as the maker
   talking straight, not as a feature comparison. */
.not-for-you { max-width: 760px; }
.not-for-you .honest { list-style: none; margin: 22px 0 0; padding: 0; }
.not-for-you .honest li {
  padding: 15px 0 15px 26px; position: relative;
  border-bottom: 1px solid rgba(59, 44, 28, 0.10);
  color: rgba(59, 44, 28, 0.82); max-width: 62ch;
}
.not-for-you .honest li:last-child { border-bottom: none; }
.not-for-you .honest li::before {
  content: "—"; position: absolute; left: 0; top: 15px;
  color: rgba(59, 44, 28, 0.35);
}
.not-for-you .honest strong { font-weight: 600; color: var(--ink); }
.not-for-you .fine { font-style: italic; color: rgba(59, 44, 28, 0.6); max-width: 62ch; }

/* ================= HERO SCROLL (progressive enhancement) =================
   The static <section class="hero"> stays as the real hero + reduced-motion / no-JS
   fallback. <html class="motion"> (set by a tiny inline head script when JS is on AND
   motion is welcome) swaps it for the scroll-scrubbed film below. Governed by the MOTION
   DOCTRINE at the top of this file: compositor-only, no parallax/hijack, deferred video.
   Assets: assets/hero/, script: assets/js/hero-scroll.js. */
/* #hero-scroll is ALWAYS present now (David 2026-07-23): the full scroll film under motion,
   and a static FIRST FRAME (p1 still + slide-1 caption) as the reduced-motion / no-JS
   fallback — so the fallback IS slide 1, no separate phone-mockup hero. padding:0 kills the
   generic section padding that showed a beige bar above the full-bleed hero. */
#hero-scroll { padding: 0; }
/* Retire the old phone-mockup hero on the two scroll-hero pages only. The general-sibling
   selector can't match on de/es/fr/it/ja (no preceding #hero-scroll), so THEIR static hero
   stays as their hero. */
/* (the old static section.hero was deleted 2026-07-24: it was always hidden and held a
   duplicate h1. The fallback is #hero-scroll's own html:not(.motion) collapse.) */

/* reduced-motion / no-JS: collapse the 460vh runway to one static screen showing the first
   still + slide-1 caption; hide the videos, later captions, app column, scrim and the
   scroll hint. The header stays a normal sticky bar (nav must work without JS). */
html:not(.motion) #hero-scroll .hs-track { height: auto; }
html:not(.motion) #hero-scroll .hs-stage { position: relative; height: 100vh; min-height: 620px; }
html:not(.motion) #hero-scroll #hsS1 { opacity: 1; }
html:not(.motion) #hero-scroll #hsC1 { opacity: 1; transform: none; }
html:not(.motion) #hero-scroll video,
html:not(.motion) #hero-scroll canvas,
html:not(.motion) #hero-scroll .hs-cap:not(#hsC1),
html:not(.motion) #hero-scroll .hs-appcol,
html:not(.motion) #hero-scroll .hs-scrim,
html:not(.motion) #hero-scroll .hs-hint { display: none; }

#hero-scroll .hs-track { height: 560vh; /* 560 (was 460) 2026-07-24: more scroll runway per frame — David: "too quick" */ position: relative; background: #0C0907; }
#hero-scroll .hs-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#hero-scroll .hs-layer { position: absolute; inset: 0; width: 100%; height: 100%;
       object-fit: cover; opacity: 0; will-change: opacity; }
#hero-scroll .hs-layer.on { opacity: 1; }

#hero-scroll .hs-cap { position: absolute; opacity: 0; transform: translateY(12px);
       transition: opacity .45s ease, transform .45s ease; pointer-events: none;
       padding: 22px 26px; border-radius: 16px; }
#hero-scroll .hs-cap.on { opacity: 1; transform: none; }
/* The caps swallow pointer events so the scroll film keeps scrolling THROUGH them, which
   silently killed the App Store badge link the moment go-live wrapped it in an <a>
   (found live 2026-08-05: the badge looked fine and did nothing). Re-enable clicks on
   links inside a cap, but ONLY while that cap is shown (.on): an invisible slide's link
   must not intercept clicks meant for the page. */
#hero-scroll .hs-cap.on a { pointer-events: auto; }
#hero-scroll .hs-cap .k { font-family: var(--body); font-size: .8rem; letter-spacing: .22em;
       text-transform: uppercase; margin-bottom: .5rem; }
#hero-scroll .hs-cap h1,
#hero-scroll .hs-cap h2 { font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.7rem);
       line-height: 1.15; font-weight: 500; color: inherit; }  /* FIX 2026-07-23: was inheriting
       the global h2 ink colour → dark heading on the dark plate. Now takes the plate's colour
       (ink on the light plate, cream on the dark plates). */
#hero-scroll .hs-cap p { margin-top: .6rem; font-size: 1.05rem; line-height: 1.5; max-width: 34ch; }

/* caption 1 — a dark LOGO CHIP above a light text plate (David 2026-07-23). #hsC1 is a
   transparent left column; the chip is the app's dark logo lockup, the plate holds the copy. */
#hero-scroll #hsC1 { top: 26vh; left: 6vw; max-width: 30rem; color: var(--ink);
       background: none; padding: 0; box-shadow: none;
       backdrop-filter: none; -webkit-backdrop-filter: none;
       display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* plain horizontal logo lockup, DARK ink font, above the text plate on the beige wall
   (David 2026-07-23 — no chip/background). Soft drop-shadow lifts it off the wall. */
/* Logo lockup enlarged to span the plate width & dominate slide 1 (David 2026-07-23):
   width:100% ties it to the #hsC1 column (max-width 30rem), icon + wordmark ~2× up. */
#hero-scroll .hs-logochip { display: flex; width: 100%; align-items: center; gap: 16px; padding: 0 2px; margin-bottom: 2px; }
#hero-scroll .hs-logochip img { height: clamp(58px, 6.6vw, 86px); width: auto; display: block;
       filter: drop-shadow(0 2px 7px rgba(0,0,0,.2)); }
#hero-scroll .hs-logochip span { font-family: var(--display); font-weight: 600; color: var(--ink);
       font-size: clamp(2.6rem, 5.2vw, 3.6rem); letter-spacing: .4px; line-height: 1;
       text-shadow: 0 1px 3px rgba(255,250,240,.35); }
#hero-scroll .hs-c1plate { position: relative; border-radius: 16px; padding: 22px 26px;
       background: rgba(243,231,207,.82); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
       box-shadow: 0 6px 24px rgba(59,44,28,.18); }
#hero-scroll #hsC1 .k { color: rgba(59,44,28,.6); }
#hero-scroll #hsC1 p  { color: rgba(59,44,28,.85); }
#hero-scroll .hs-hint { position: absolute; top: 100%; left: 26px; margin-top: 12px;
       font-family: var(--display); font-style: italic; font-size: .95rem; letter-spacing: .03em;
       color: rgba(59,44,28,.6); transition: opacity .4s ease; }

/* captions 3 + 4 — light text on a DARK plate */
#hero-scroll #hsC3, #hero-scroll #hsC4 { left: 6vw; bottom: 9vh; max-width: 34rem;
       color: var(--cream); background: rgba(12,9,7,.55); backdrop-filter: blur(3px);
       -webkit-backdrop-filter: blur(3px); box-shadow: 0 6px 24px rgba(0,0,0,.3); }
#hero-scroll #hsC3 .k, #hero-scroll #hsC4 .k { color: rgba(243,231,207,.75); }
#hero-scroll #hsC3 p, #hero-scroll #hsC4 p { color: rgba(243,231,207,.9); }
#hero-scroll #hsC4 { max-width: 24rem; }

#hero-scroll .hs-scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0;
       transition: opacity .5s ease;
       background: linear-gradient(to top, rgba(12,9,7,.55) 0%, transparent 45%); }
#hero-scroll .hs-scrim.on { opacity: 1; }

/* THE PHONE RAIL — one fixed device for hero final beat + tour (David 2026-07-24) */
.phone-rail { display: none; }
html.motion .phone-rail { display: block; position: fixed; left: 75vw; top: 50%;
  transform: translate(-50%, -50%); z-index: 55; opacity: 0; pointer-events: none;
  transition: opacity .6s ease; }
html.motion .phone-rail .hs-screen img { transition: opacity .5s ease; }
html.motion .phone-rail.released { position: absolute; }  /* top set by JS at release */
@media (max-width: 720px) { html.motion .phone-rail { left: 50%; }
  html.motion .phone-rail .hs-device { height: 52vh; } }
/* EN rail mode: the appcol carries ONLY the badge + fine line, below the phone's berth */
#hero-scroll .hs-appcol.railmode { top: calc(50% + 34vh + 20px); transform: translate(-50%, 0); }
@media (max-width: 720px) { #hero-scroll .hs-appcol.railmode { top: calc(50% + 26vh + 16px); } }

/* final beat — the app crossfades in, parked in the right third */
#hero-scroll .hs-appcol { position: absolute; left: 75vw; top: 50%; transform: translate(-50%, -50%);
       opacity: 0; transition: opacity .6s ease; display: flex; flex-direction: column;
       align-items: center; gap: 20px; pointer-events: auto; }
/* Device frame — iPhone-17 style (David 2026-07-24): ultra-thin uniform bezel, flat
   titanium edge (bright hairline ring over a dark band), continuous large corner radius,
   Dynamic Island pill supplied by the frame (sim screenshots don't render it), slim flat
   side keys. SHARED by the hero's final beat and the product tour (product-tour-spec §4). */
.hs-device { height: 68vh; padding: .5vh; border-radius: 7.4vh; position: relative;
       background: #101012;
       box-shadow: 0 20px 55px rgba(0,0,0,.5),
                   inset 0 0 0 .14vh rgba(255,255,255,.32),   /* polished edge hairline */
                   inset 0 0 0 .3vh #2c2c30,                  /* titanium band */
                   inset 0 0 0 .5vh #060608; }                /* bezel to glass */
.hs-device .hs-screen { height: 100%; aspect-ratio: 1290 / 2796; border-radius: 6.9vh;
       overflow: hidden; position: relative; background: #000; }
.hs-device .hs-screen img { position: absolute; inset: 0; width: 100%; height: 100%;
       object-fit: cover; opacity: 0; transition: opacity .55s ease; }
.hs-device .hs-screen img.on { opacity: 1; }
/* (No CSS Dynamic Island: the sim captures — hero AND tour — render the island themselves;
   an overlay would double it. Confirmed 2026-07-24.) */
/* flat side keys: volume pair left, power right */
.hs-device::before, .hs-device::after { content: ""; position: absolute;
       left: -0.22vh; width: .22vh; border-radius: 999px; background: #2a2a2e; }
.hs-device::before { top: 15.5vh; height: 4.6vh; box-shadow: 0 6.4vh 0 #2a2a2e; }
.hs-device::after  { top: 17vh; left: auto; right: -0.22vh; height: 7.2vh; }
#hero-scroll .hs-badge { height: 52px; width: auto; display: block; }
/* LAUNCH SWAP: assets/hero/appstore-badge.svg is a faithful stand-in — replace with Apple's
   own generated badge (EN + CS "Stáhnout z App Store") and wrap in the store link +
   ?ct=website/heroscroll&mt=8 */
#hero-scroll .hs-fine { font-size: .85rem; color: rgba(243,231,207,.78); font-style: italic; }

@media (max-width: 720px) {
  #hero-scroll .hs-appcol { left: 50%; }
  .hs-device { height: 52vh; }
  #hero-scroll #hsC1 { top: 16vh; }
  #hero-scroll .hs-logochip img { height: 46px; }
  #hero-scroll .hs-logochip span { font-size: 2.2rem; }
  #hero-scroll #hsC4 { bottom: auto; top: 9vh; max-width: 62vw; }
}

/* download badge on slide 1 (David 2026-07-23) — official App Store badge inside the
   caption plate, "Coming soon" until launch. LAUNCH: wrap the img in the store link +
   ?ct=website/heroscroll like the final slide. */
#hero-scroll .hs-c1cta { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
#hero-scroll .hs-c1cta img { height: 40px; width: auto; display: block; }
#hero-scroll .hs-c1cta span { font-size: .85rem; font-style: italic; color: rgba(59,44,28,.6); }

/* subtle language switcher, top-right of slide 1 (David 2026-07-23) — small ink codes on
   the beige wall; JS fades it out past slide 1 (dark frames). Visible by default so it
   shows in the no-JS fallback too. The header carries the full switcher after the hero. */
/* Language switcher = a dropdown PILL (David 2026-07-24): compact "EN ▾" on the beige wall of
   slide 1, opens to the 7 languages. JS fades the whole control past slide 1. */
#hero-scroll .hs-langs { position: absolute; top: 3.4vh; right: 5vw; z-index: 5;
       font-family: var(--body); transition: opacity .4s ease; }
#hero-scroll .hs-langs summary { list-style: none; cursor: pointer; display: inline-flex;
       align-items: center; gap: 6px; font-size: .82rem; letter-spacing: .1em; color: var(--ink);
       background: rgba(243,231,207,.74); border: 1px solid rgba(59,44,28,.16); border-radius: 999px;
       padding: 5px 13px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
       box-shadow: 0 1px 3px rgba(59,44,28,.14); }
#hero-scroll .hs-langs summary::-webkit-details-marker { display: none; }
#hero-scroll .hs-langs summary::after { content: "▾"; font-size: .7em; opacity: .7;
       display: inline-block; transition: transform .2s ease; }
#hero-scroll .hs-langs[open] summary::after { transform: rotate(180deg); }
#hero-scroll .hs-lang-menu { position: absolute; right: 0; margin-top: 7px; min-width: 132px;
       display: flex; flex-direction: column; padding: 5px; background: rgba(246,239,221,.98);
       border: 1px solid rgba(59,44,28,.14); border-radius: 13px;
       box-shadow: 0 10px 28px rgba(59,44,28,.2);
       backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#hero-scroll .hs-lang-menu a { color: rgba(59,44,28,.72); text-decoration: none; font-size: .86rem;
       padding: 7px 12px; border-radius: 8px; transition: background .15s ease, color .15s ease; }
#hero-scroll .hs-lang-menu a:hover { background: rgba(59,44,28,.06); color: var(--ink); }
#hero-scroll .hs-lang-menu a[aria-current] { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { #hero-scroll .hs-langs { top: 2.4vh; }
       #hero-scroll .hs-langs summary { font-size: .76rem; padding: 4px 11px; } }

/* ============================================================================
   WHO IT'S FOR — cinematic band + right plate (David 2026-07-23)
   ============================================================================ */
.who { padding: 0; }
.who-band { position: relative; width: 100%; min-height: 58vh; display: flex; align-items: center;
  justify-content: flex-end; overflow: hidden; background: #14100c; }
.who-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 38% 50%; }
.who-plate { position: relative; z-index: 2; margin: 6vh 6vw; max-width: 31rem;
  background: rgba(12,9,7,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  color: var(--cream); border-radius: 16px; padding: 30px 32px; box-shadow: 0 8px 30px rgba(0,0,0,.34); }
.who-plate .eyebrow { font-family: var(--body); font-size: .8rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(243,231,207,.72); margin-bottom: .55rem; }
.who-plate h2 { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.14;
  font-weight: 500; color: var(--cream); margin: 0; }
.who-plate ul { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .85rem; }
.who-plate li { font-size: 1.02rem; line-height: 1.5; color: rgba(243,231,207,.9);
  padding-left: 1.15rem; position: relative; }
.who-plate li::before { content: "\2014"; position: absolute; left: 0; color: rgba(243,231,207,.5); }
.who-plate strong { color: var(--cream); font-weight: 600; }
@media (max-width: 720px) {
  .who-band { min-height: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .who-band > img { position: relative; inset: auto; height: 42vh; }
  .who-plate { margin: -46px 5vw 0; }
}

/* ============================================================================
   STAFF-NAV — real SVG notation (David 2026-07-23): a 5-line staff, sections as a descending
   melodic run read left→right (chronological), one note per line; EB&nbsp;Garamond note-label pills
   (the label the app serves) to the RIGHT. Each staff line = a light casing (.lc) under a dark
   line (.ln) and each notehead has a light stroke, so both stay legible over cream AND dark
   photo sections. Active note tints teal. Hidden < 900px.
   ============================================================================ */
.staffnav { position: fixed; left: 18px; top: 50%; transform: translate(-14px, -50%); z-index: 60;
  display: flex; align-items: flex-start; gap: 12px;
  opacity: 0; pointer-events: none; transition: opacity .45s ease, transform .45s ease; }
/* revealed only AFTER the scroll slider — hidden while the hero animation plays (David 2026-07-23) */
.staffnav.revealed { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.staffnav .staff { flex: none; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.3)); }
.staffnav .staff .lc { stroke: rgba(255,250,240,.6); stroke-width: 2.6; }
.staffnav .staff .ln { stroke: rgba(59,44,28,.6); stroke-width: 1.2; }
.staffnav .staff .nh ellipse { fill: rgba(40,32,15,.94); stroke: rgba(255,250,240,.82);
  stroke-width: .9; transition: fill .25s ease; }
.staffnav .staff .nh.on ellipse { fill: var(--primary); }
.staffnav .pills { position: relative; width: 128px; height: 140px; }
.staffnav .pills a { position: absolute; left: 0; top: calc(14px + var(--i) * 28px);
  transform: translateY(-50%); text-decoration: none; }
.staffnav .pill { display: inline-block; font-family: var(--body); font-weight: 500; font-size: .88rem;
  line-height: 1; white-space: nowrap; background: var(--cream); color: var(--sienna); border-radius: 999px;
  padding: 5px 13px; box-shadow: 0 1px 3px rgba(12,9,7,.22); opacity: .82;
  transition: opacity .25s ease, color .25s ease; }
.staffnav a:hover .pill, .staffnav a.active .pill { opacity: 1; color: var(--ink); }
@media (max-width: 900px) { .staffnav { display: none; } }

/* ============================================================================
   PRODUCT TOUR — pinned-phone story (David 2026-07-24, product-tour-spec.md).
   DEFAULT = stacked (step text + inline screen), which serves mobile, no-JS and
   reduced-motion identically. The sticky pin + screen-swap is a ≥821px + html.motion
   enhancement. The phone reuses .hs-device (iPhone-17 frame) so the hero's final-beat
   device and the tour device are the same object visually.
   ============================================================================ */
.tour { padding: 0; background: var(--cream-alt); }
.tour .tour-wrap { position: relative; width: min(1120px, 92vw); margin: 0 auto; }
.tour .tstep { padding: 44px 0 8px; }
.tour .tstep .k { font-family: var(--body); font-size: .8rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(59,44,28,.5); margin: 0 0 10px; }
.tour .tstep h3 { font-family: var(--display); font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.13; font-weight: 500; color: var(--ink); margin: 0 0 10px; }
.tour .tstep > p:not(.k) { font-size: 1.05rem; line-height: 1.55; color: rgba(59,44,28,.8);
  max-width: 44ch; margin: 0; }
.tour .tshot { display: block; margin: 22px auto 26px; width: min(62vw, 250px); height: auto;
  border-radius: 26px; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.tour .tour-prog { display: none; }

@media (min-width: 821px) {
  html.motion .tour .tour-track { height: 640vh; position: relative; }
  html.motion .tour .tour-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  html.motion .tour .tour-wrap { height: 100%; }
  html.motion .tour .tstep { position: absolute; left: 0; top: 50%; max-width: 46%;
    padding: 0; opacity: 0; transform: translateY(-44%); pointer-events: none;
    transition: opacity .4s ease, transform .4s ease; }
  html.motion .tour .tstep.on { opacity: 1; transform: translateY(-50%); }
  html.motion .tour .tshot { display: none; }
  /* (tour phone = the fixed .phone-rail; no per-section device — David 2026-07-24) */
  html.motion .tour .tour-prog { display: flex; position: absolute; left: 0; bottom: 7vh; gap: 8px; }
  html.motion .tour .tour-prog i { width: 30px; height: 3px; border-radius: 2px;
    background: rgba(59,44,28,.15); transition: background .3s ease; }
  html.motion .tour .tour-prog i.on { background: var(--primary); }
}

/* Press kit: fast-facts table + differentiator list (press/ and cs/pro-media/) */
.doc table.facts { width: 100%; border-collapse: collapse; margin: 18px 0 6px; font-size: .97rem; }
.doc table.facts th, .doc table.facts td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--hairline); }
.doc table.facts th { width: 34%; font-weight: 600; color: var(--ink); white-space: nowrap; }
.doc table.facts td { color: rgba(59,44,28,.85); }
.doc ol.press-diff { margin: 14px 0 0; padding-left: 1.15rem; display: grid; gap: 12px; }
.doc ol.press-diff li { line-height: 1.55; }
@media (max-width: 560px) {
  .doc table.facts, .doc table.facts tbody, .doc table.facts tr, .doc table.facts th, .doc table.facts td { display: block; }
  .doc table.facts th { width: auto; border-bottom: 0; padding-bottom: 2px; }
  .doc table.facts td { padding-top: 0; }
}

/* ============================================================================
   PRESS KIT visuals (press/ and cs/pro-media/) — rebuilt 2026-07-24 (David: a big
   photo slab plus a grid "looks like a 90s webpage"). Now one continuous strip that
   drifts right to left, mixing the photographs with the app screens. Pure CSS: the
   track is duplicated and translated -50%, so the loop is seamless with no JS.
   ============================================================================ */

/* app icon sitting beside the fast-facts table */
.press-idrow { display: flex; align-items: center; gap: 20px; margin: 4px 0 6px; flex-wrap: wrap; }
.press-idrow img { width: 92px; height: 92px; border-radius: 21px; flex: none;
  box-shadow: 0 6px 18px rgba(59,44,28,.24); }
.press-idrow p { margin: 0; font-size: var(--t-body); color: rgba(59,44,28,.8); max-width: 46ch; }
.press-dl { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 6px; }