/* Shared styles for every page. Colours are the app's (src/theme/tokens.ts in the app
   repo) and the font is the app's Nunito, served from this site: no external requests,
   so visiting the site sends nothing to third parties. Everything lives in this file
   (no inline styles, no data: images) because _headers only allows 'self'. */

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
/* Titles: Fraunces (serif). Body: DM Sans (sans). Both OFL, self-hosted. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dmsans-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Light only, like the app. color-scheme stops browsers auto-darkening the page. */
  color-scheme: light;
  --bg: #FFFCF9;
  --surface: #FFFFFF;
  --ink: #1C0F06;
  --muted: #6B4A36;
  --subtle: #896755;
  --line: rgba(100, 50, 20, 0.10);

  --peach: #E8704A;
  --accent: #C4532E; /* peach darkened so text, links and white-on-peach buttons pass WCAG AA */
  --peach-tint: #FEF0EA;
  --peach-ink: #7A2E12;
  --mustard: #E8B84B;
  --mustard-tint: #FEF6E4;
  --mustard-ink: #7A5A10;
  --sage: #4BAE8A;
  --sage-tint: #E4F7F1;
  --sage-ink: #1A5C45;

}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 "DM Sans", Nunito, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 760px; margin: 0 auto; padding: 16px 16px 72px; }
@media (min-width: 600px) { main { padding: 24px 24px 96px; } }

a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
strong { font-weight: 700; }

/* Header */
.site-header { max-width: 760px; margin: 0 auto; padding: 20px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 600px) { .site-header { padding: 28px 24px 0; } }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.site-header nav { display: flex; gap: 20px; }
.site-header nav a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.site-header nav a:hover { color: var(--ink); }

/* Type */
h1, h2, h3, .brand { font-family: "Fraunces", Georgia, "Times New Roman", serif; }
h1 { font-size: clamp(2rem, 5.5vw, 2.7rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; margin: 28px 0 14px; text-wrap: balance; }
h2 { font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.015em; font-weight: 800; margin: 52px 0 12px; }
h3 { font-size: 1.1rem; line-height: 1.35; font-weight: 800; margin: 26px 0 6px; }
.lede { color: var(--muted); margin-top: 0; font-size: 1.15rem; }
.muted { color: var(--subtle); }
ol, ul { padding-left: 1.3em; }
li { margin: 6px 0; }

/* ---------- Landing page ---------- */
.hero { display: grid; gap: 36px; align-items: center; padding: 24px 0 8px; }
@media (min-width: 760px) {
  .home main, .home .site-header { max-width: 1040px; }
  .hero { grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 56px 0 24px; }
}
.badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-weight: 700; font-size: 0.9rem; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.hero h1 { font-size: clamp(2.8rem, 9vw, 4.4rem); line-height: 1; font-weight: 800; letter-spacing: -0.035em; margin: 18px 0 16px; }
.tagline { font-size: clamp(1.3rem, 3.4vw, 1.6rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 18px; max-width: 20em; }
.intro { color: var(--muted); font-size: 1.1rem; margin: 0; max-width: 32em; }

/* Sound card: a pronunciation-reference panel rather than an illustration. */
.hero-art { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px 26px 10px; box-shadow: 0 30px 60px -32px rgba(100, 50, 20, 0.28); position: relative; overflow: hidden; }
.hero-art::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--peach); }

/* Phone mockup around the sounds panel (home hero) */
.phone-frame { max-width: 300px; margin: 0 auto; background: var(--ink); border-radius: 40px; padding: 12px; box-shadow: 0 30px 60px -32px rgba(100, 50, 20, 0.38); }
.phone-screen { background: var(--bg); border-radius: 30px; padding: 26px 18px 14px; position: relative; overflow: hidden; }
.phone-notch { display: block; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 88px; height: 14px; border-radius: 8px; background: var(--ink); opacity: 0.9; }
.phone-screen .wave { display: none; }
.phone-screen .sounds li { grid-template-columns: 56px 1fr auto; padding: 13px 0; }
.phone-screen .sym { width: 52px; height: 52px; font-size: 1.3rem; }
/* Hero phone image (replaces the CSS mockup on the home page). Capped so the
   phone sits beside the copy without filling the whole above-the-fold area. */
.hero-art-img { display: flex; justify-content: center; align-items: flex-start; }
.hero-art-img img { max-width: min(100%, 380px); height: auto; border-radius: 20px; }

/* Real app screenshots sit inside the device frames instead of drawn panels */
.phone-screen.shot { padding: 0; }
.phone-screen.shot img { display: block; width: 100%; height: auto; border-radius: 30px; }

.panel-label { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--subtle); }
.sounds { list-style: none; padding: 0; margin: 0; }
.sounds li { display: grid; grid-template-columns: 64px 1fr auto auto; align-items: center; gap: 14px; margin: 0; padding: 16px 0; border-top: 1px solid var(--line); }
.sounds li:first-child { border-top: 0; }
/* Nunito lacks some IPA symbols; use fonts that have them all so a transcription doesn't mix typefaces. */
.sym, .ipa { font-family: "Noto Sans", "Segoe UI", "Lucida Grande", "Helvetica Neue", Arial, sans-serif; }
.sym { font-size: 2.1rem; line-height: 1; font-weight: 500; color: var(--accent); text-align: center; }
.sym.mustard { color: var(--mustard-ink); }
.sym.sage { color: var(--sage-ink); }
.sounds .w { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.sounds .ipa { font-size: 0.98rem; color: var(--subtle); }
.wave { display: flex; align-items: center; gap: 3px; height: 20px; }
.wave i { width: 3px; border-radius: 2px; background: var(--line); height: 8px; }
.wave i:nth-child(2), .wave i:nth-child(4) { height: 14px; }
.wave i:nth-child(3) { height: 20px; }
.sounds li:first-child .wave i { background: var(--peach); }
@media (max-width: 420px) { .sounds li { grid-template-columns: 52px 1fr auto; } .wave { display: none; } }

.final { padding-bottom: 8px; }

/* Sales copy blocks (21 step sales page structure) */
.copy-block { margin-top: 56px; }
.copy-block h2 { margin-top: 0; }
.copy-block > p:last-child { margin-bottom: 0; }
.card blockquote { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.card blockquote + .muted { font-size: 0.9rem; margin: 10px 0 0; }
.card.sage-edge p:last-child, .card.mustard-edge p:last-child { margin-bottom: 0; }
.hero-cta { margin: 22px 0 0; }
.hero-cta .button { min-width: 260px; }
/* Yes-ladder question line sits right above a CTA button: reader answers in their head,
   then the button is the yes. Used on the first and final CTA only (index-test.html, Marc's call). */
.ask { font-size: 1.15rem; font-weight: 800; color: var(--ink); margin: 26px 0 0; }
.button-note { color: var(--subtle); font-size: 0.92rem; margin: 8px 0 0; }
.callout { margin-top: 56px; }

.features { list-style: none; padding: 0; margin: 72px 0 0; display: grid; gap: 18px 22px; }
@media (min-width: 620px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .features { grid-template-columns: repeat(3, 1fr); } .features .wide { grid-column: span 2; } }
/* Flat tint cards, same three colours the offer cards use */
.features li { margin: 0; padding: 18px 20px 20px; border-radius: 16px; background: var(--surface); color: var(--muted); font-size: 1rem; }
.features strong { display: block; font-size: 1.12rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.features .peach { background: var(--peach-tint); }
.features .mustard { background: var(--mustard-tint); }
.features .sage { background: var(--sage-tint); }
/* Roadmap list items. The old ".roadmap { margin-top: 64px }" section rule is gone
   on purpose: on roadmap.html the BODY itself carries class roadmap, so that rule
   pushed every page element (menu included) down 64px. */
.roadmap-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.roadmap-list li { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; color: var(--ink); }
.roadmap-list .status { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.roadmap-list .now .status { background: var(--sage-tint); color: var(--sage-ink); }
.roadmap-list .next { color: var(--muted); }
.roadmap-list .next .status { background: var(--mustard-tint); color: var(--mustard-ink); }
.roadmap-note { color: var(--muted); margin: 16px 0 0; }
@media (max-width: 599px) { .roadmap-list li { flex-direction: column; align-items: flex-start; } }

.pricing { margin: 64px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); font-size: 1.05rem; font-weight: 600; color: var(--muted); }

/* ---------- Shared components ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin: 16px 0; }
@media (min-width: 600px) { .card { padding: 26px 28px; } }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card h2 { font-size: 1.25rem; margin: 10px 0 12px; }
.card.tint { background: var(--peach-tint); border-color: transparent; }
.card.sage-edge { background: var(--sage-tint); border-color: transparent; }
.card.mustard-edge { background: var(--mustard-tint); border-color: transparent; }
.card.sage-edge h2 { color: var(--sage-ink); }
.card.mustard-edge h2 { color: var(--mustard-ink); }

.pill { display: inline-block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 11px; border-radius: 99px; }
.pill.sage { background: var(--sage-tint); color: var(--sage-ink); }
.pill.mustard { background: var(--mustard-tint); color: var(--mustard-ink); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 1.02rem; text-decoration: none;
  padding: 13px 22px; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(100, 50, 20, 0.2);
  transition: background 120ms ease;
}
.button:hover { background: var(--peach-ink); }
.button svg { width: 20px; height: 20px; flex: none; }

/* Numbered steps */
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-left: 44px; margin: 0 0 14px; min-height: 30px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--peach-tint); color: var(--peach-ink); font-weight: 800; font-size: 0.9rem;
}
.options { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 680px) { .options { grid-template-columns: 1fr 1fr; } .options .card { margin: 0; } }
.done { color: var(--sage-ink); font-weight: 800; }

.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 26px; margin: 0 0 10px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 11px; height: 11px; border-radius: 50%; background: var(--sage); }
.mustard-edge .ticks li::before { background: var(--mustard); }
.card.sage-edge .muted, .card.mustard-edge .muted { color: var(--muted); }

.callout { display: flex; gap: 16px; align-items: flex-start; background: var(--peach-tint); border-radius: 16px; padding: 22px; margin: 16px 0; }
.callout > .icon { flex: none; display: grid; place-items: center; background: var(--peach); color: #fff; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; font-size: 1.1rem; }
.callout h2 { font-size: 1.25rem; margin: 2px 0 8px; color: var(--peach-ink); }
.callout p { margin: 0; }

.contact-form { display: grid; gap: 6px; margin-top: 6px; }
.contact-form label { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid rgba(100, 50, 20, 0.18); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; margin: 4px 0 6px; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 3px solid var(--peach); outline-offset: 2px; border-radius: 6px; }
.contact-form .hp { position: absolute; left: -9999px; top: -9999px; width: 10px; height: 10px; }
.contact-form input:nth-of-type(2) { margin-bottom: 6px; }
.sent, .senderr { border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.sent { background: var(--sage-tint); color: var(--sage-ink); }
.senderr { background: var(--peach-tint); color: var(--peach-ink); }

/* Support */
.faq h3:first-child { margin-top: 0; }
.faq h3 { margin-top: 22px; }
.faq h3 + p, .faq h3 + ul { margin-top: 0; }

/* Privacy policy */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 4px 26px 20px; margin: 32px 0; }
.toc h2 { margin-top: 20px; }
.toc ol { padding-left: 1.6em; }
.toc li::marker { color: var(--subtle); font-weight: 800; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 12px 0; }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--peach-tint); }
.table-wrap { overflow-x: auto; }
address { font-style: normal; }

footer { max-width: 760px; margin: 0 auto; padding: 24px 16px 44px; color: var(--subtle); font-size: 0.92rem; border-top: 1px solid var(--line); }
.home footer { max-width: 1040px; }
@media (min-width: 600px) { footer { padding: 24px 24px 52px; } }
footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; margin-bottom: 10px; }
footer nav a { text-decoration: none; font-weight: 700; }
footer nav a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .button { transition: none; } }

/* ---------- PRONUNTIA NAV v2 (menu thread, do not restyle above) ---------- */
/* Wider header so the logo + 6 menu items fit on one line on desktop.
   ONE header width site wide (Marc: menus must look identical to the home page). */
.site-header { max-width: 1040px; }
@media (min-width: 600px) {
  .site-header { flex-wrap: nowrap; }
  .site-header .brand { flex-shrink: 0; }
}
.site-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; }
.site-header nav a { white-space: nowrap; padding: 6px 0; }
.site-header nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* Burger button: hidden on desktop, shown under 720px where the full menu collapses */
.burger { display: none; align-items: center; gap: 9px; background: var(--peach-tint); border: 1px solid rgba(100, 50, 20, 0.14); color: var(--ink); border-radius: 10px; padding: 8px 11px; font: inherit; font-weight: 700; cursor: pointer; }
.burger .bars { display: block; width: 18px; }
.burger .bars span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); }
.burger .bars span + span { margin-top: 4px; }
@media (max-width: 720px) {
  /* One row: brand left, burger right. The menu is hidden until the burger opens it. */
  .site-header { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
  .burger { display: inline-flex; }
  .site-header nav { display: none; flex: 0 0 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; order: 3; margin-top: 2px; }
  .site-header nav.open { display: flex; }
  .site-header nav a { white-space: normal; padding: 11px 2px; border-top: 1px solid var(--line); }
  .site-header nav a:first-child { border-top: 0; }
}
/* Content pages (roadmap, contact etc) keep the single-column reading width.
   Headers are all one consistent width site wide. */
.roadmap main, .contact main { max-width: 760px; }
.roadmap h1, .contact h1 { margin-top: 28px; }
.roadmap .lede, .contact .lede { color: var(--muted); font-size: 1.1rem; margin: 8px 0 24px; }

/* ---------- Home page v3 additions (live index.html, all namespaced .home-v3) ----------
   New techniques under test: 1-2-3 steps band peeking above the fold (Cameo pattern),
   a live CSS lesson phone in the ease section (show the product in action),
   a trust row of real policy links (privacy card pattern), and a sticky mobile CTA. */

/* Steps band under the hero */
.home-v3 .steps-band { margin: 36px 0 0; }
.home-v3 .steps-band .steps { display: grid; gap: 12px; margin: 0; }
@media (min-width: 900px) { .home-v3 .steps-band .steps { grid-template-columns: repeat(3, 1fr); } }
.home-v3 .steps-band .steps li { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px 52px; min-height: 0; }
.home-v3 .steps-band .steps li::before { top: 15px; }

/* Ease section: copy beside a live lesson phone */
.home-v3 .ease-grid { margin: 26px 0 0; display: grid; gap: 30px; align-items: center; }
@media (min-width: 860px) { .home-v3 .ease-grid { grid-template-columns: 1.2fr 1fr; } }
.home-v3 .ease-grid .phone-frame { margin: 0 auto; }
.home-v3 .lesson-note { color: var(--subtle); font-size: 0.92rem; margin: 12px 0 0; text-align: center; }

/* Trust row: real policy links near the decision point */
.home-v3 .trust-row { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--subtle); font-size: 0.95rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }

/* Sticky mini store bar, mobile only, always on screen; page clears it below */
.home-v3 .sticky-storebar { display: none; }
@media (max-width: 719px) {
  .home-v3 .sticky-storebar { display: flex; align-items: center; justify-content: center; gap: 12px; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 50; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(60, 30, 10, 0.25); padding: 7px 12px; }
  /* Clearance so the fixed bar never sits on the footer links or the pricing line */
  .home-v3 footer, .home-v3 .pricing { padding-bottom: 0; }
  .home-v3 main { padding-bottom: 128px; }
  /* The bar carries its own, smaller badge sizes (width:auto beats the img width attr) */
  .sticky-storebar .badge-img { height: 44px; width: auto; }
  .sticky-storebar .badge-ios { height: 30px; width: auto; }
}

/* App store CTAs (2026-11-01): every CTA row is the official Google Play badge + the
   official App Store badge (self-hosted images, links provided by the brand guidelines).
   The Apple href stays "#" until the live listing URL is confirmed (never guess it).
   One flex row per CTA: both badges render at the same height on the same line. */
.store-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.store-buttons .badge { text-decoration: none; }
.store-buttons .badge-img { display: block; height: 64px; width: auto; }
/* The Play badge PNG carries a 41px transparent border (artwork 564x168 inside 646x250),
   so at a 64px box its VISIBLE artwork is 43px tall. The App Store SVG artwork fills its
   whole canvas, so it is set to 43px to match the Play badge's visible size (38px mobile). */
.store-buttons .badge-ios { height: 43px; }
@media (max-width: 600px) { .store-buttons .badge-img { height: 56px; } .store-buttons .badge-ios { height: 38px; } }


/* CSP-safe public nav: the deployment site forbids scripts, so the burger can
never open the menu and the nav never hides again. */
.burger { display: none !important; }
@media (max-width: 719px) {
  nav#site-nav { display: flex !important; flex-wrap: wrap; gap: 8px 16px; }
}