/* One stylesheet, no build step, no external requests. The site is a few
   static files on Cloudflare Pages (PRD §12) and must stay that way: a privacy
   page that phones a CDN home is a bad look for an app whose whole claim is
   that it does not phone anywhere. The one font is self-hosted for the same
   reason (site/fonts, OFL; font-src 'self' in _headers). */

/* Be Vietnam Pro, the app's own face since redesign B: one family, upright,
   heavy for headlines and regular for reading. Static TTFs copied from
   apps/mobile/assets/fonts (OFL, site/fonts/OFL.txt); woff2 would be smaller
   but needs a converter this repo does not carry. */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("fonts/BeVietnamPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("fonts/BeVietnamPro-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("fonts/BeVietnamPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("fonts/BeVietnamPro-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

/* The page is the table, as the app is (redesign B "Felt & Rail"): felt
   ground, cushion cards, cream text, brass links and the one brass rule.
   Re-measured by `pnpm site:check` in both themes. */
:root {
  --bg: #0c2620;
  --surface: #143a30;
  --border: #7a9a8b;
  --text: #f6eedc;
  --dim: #c2ccb8;
  --accent: #e2be76;
  --on-accent: #1e140c;
  --brass: #e2be76;
  --lamp: #1a4a3c;
}

/* The app is dark only; a web page should still honour a light preference.
   The same materials inverted: cream ground, felt ink, brass darkened until
   it clears AA on the card, which is the binding constraint here. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6eedc;
    --surface: #ede2c8;
    --border: #b39a70;
    --text: #0c2620;
    --dim: #2e4a40;
    --accent: #7a4e14;
    --on-accent: #f6eedc;
    --brass: #b8893a;
    --lamp: #ffffff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 42rem; margin: 0 auto; padding: 2rem 1.25rem 5rem; }

header { padding: 2.5rem 0 1rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); text-decoration: none;
}
/* The app icon itself — the same artwork as the App Store listing. Its felt
   is the page's felt, so the border keeps the rounded square visible. */
.brand img { width: 2.25rem; height: 2.25rem; border-radius: 0.55rem; display: block; border: 1px solid var(--border); }

h1, h2, .statement {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
h1 { font-size: 2.6rem; margin: 1.5rem 0 0.75rem; }
h2 { font-size: 1.9rem; margin: 2.75rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.4rem; }
p, li { color: var(--text); }
.lede { font-size: 1.15rem; color: var(--dim); max-width: 36rem; }

/* The ct= token on the link is App Store Connect's own campaign attribution —
   per-source downloads with no SDK, no script and no cookie on this page. */
.get { margin: 1.75rem 0 0; }
.get span { display: block; color: var(--dim); font-size: 0.9rem; margin-top: 0.6rem; }
/* Apple's official badge, used as supplied (Apple marketing guidelines: no
   recolouring, at least 40px tall, clear space around it). */
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { height: 50px; width: auto; }
/* Google's PNG carries its own transparent clear space around the artwork;
   the negative margin lines its visible badge up with Apple's 50px one. */
.get .badges { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0; }
.play-badge img { height: 75px; width: auto; margin: -12.5px -12px; }
.updated { color: var(--dim); font-size: 0.9rem; margin: 0; }

a { color: var(--accent); }
a:focus-visible, .brand:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

ul { padding-left: 1.2rem; }
li { margin: 0.4rem 0; }

.card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0;
}
.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--dim); font-weight: 600; }
/* Tables are the one thing that overflows on a phone. */
.scroll { overflow-x: auto; }

footer {
  margin-top: 4rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--dim); font-size: 0.9rem;
}
footer a { margin-right: 1rem; }

.toc { font-size: 0.95rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ── The phone ─────────────────────────────────────────────────────────────
   An iPhone 17 Pro Max outline around a real simulator capture, the same
   proportions as the App Store frame in scripts/make-captioned-images.swift:
   a 13pt bezel and ~55pt display corners on a 440pt-wide device, and the
   Dynamic Island 11pt below the screen's top edge. Percent radii are
   width / height, so the shape holds at every size. */
.phone {
  position: relative;
  margin: 0;
  padding: 2.8%;
  background: #050506;
  border-radius: 14.6% / 6.8%;
  box-shadow:
    inset 0 0 0 2px #4d5156,
    0 2.5rem 4rem -1.5rem rgb(0 0 0 / 0.55);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 12.4% / 5.7%; }
.phone::after {
  content: "";
  position: absolute;
  top: 2.45%;
  left: 50%;
  width: 27%;
  height: 3.75%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

/* ── Home page ───────────────────────────────────────────────────────────── */
/* A table lamp over the cloth: the one light source on the page. */
.home {
  background:
    radial-gradient(ellipse 70rem 42rem at 72% -6rem, var(--lamp), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
.page { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem 4rem; }
.page > header { padding: 1.75rem 0 0; }

.hero {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: 2rem 0 1rem;
}
/* Normal width, so smaller than the condensed Archivo it replaces for the
   same line count. */
.hero h1 {
  font-size: clamp(2.8rem, 9vw, 5.75rem);
  line-height: 0.95;
  margin: 0 0 1.5rem;
  max-width: 11ch;
}
.hero .lede { margin: 0; }
.hero-phone { width: min(76%, 22rem); justify-self: center; }

/* The match, screen by screen. A row you swipe on a phone; four across on a
   wide screen. Scroll-snap, not a carousel script — the CSP allows none. */
.screens { margin-top: 4.5rem; }
.screens h2 { margin-bottom: 1.75rem; }
.rail {
  list-style: none;
  margin: 0 -1.25rem;
  padding: 0.5rem 1.25rem 2.5rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(64%, 17rem);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.25rem;
}
.rail li { margin: 0; scroll-snap-align: start; }
.rail p { margin: 1.25rem 0 0; color: var(--dim); font-size: 0.98rem; line-height: 1.45; }
.rail strong { display: block; color: var(--text); font-size: 1.1rem; margin-bottom: 0.2rem; }

/* The one claim the whole product rests on, set as large as the headline. */
.promise {
  margin: 4rem 0 0;
  padding: 3rem 0 0;
  border-top: 6px solid var(--brass);
  max-width: 46rem;
}
.statement { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1; margin: 0 0 1.25rem; }
.promise p:not(.statement) { font-size: 1.15rem; color: var(--dim); max-width: 38rem; margin: 0; }

/* Bullets in the colours of the 1 to 5 balls: the subject's own markers.
   Decorative only, and not a count — the list is not a sequence. */
.balls { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.75rem 3rem; }
.balls li { margin: 0; padding-left: 2.25rem; position: relative; max-width: 30rem; }
.balls li::before {
  content: "";
  position: absolute; left: 0; top: 0.3rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  box-shadow: inset -0.2rem -0.25rem 0 rgb(0 0 0 / 0.22), 0 0 0 1px rgb(0 0 0 / 0.15);
}
/* The app's ball fills (redesign B handoff §1.1). */
.balls li:nth-child(1)::before { background: #f5c518; }
.balls li:nth-child(2)::before { background: #1f4fb8; }
.balls li:nth-child(3)::before { background: #d2302a; }
.balls li:nth-child(4)::before { background: #5b2c8f; }
.balls li:nth-child(5)::before { background: #f07a1a; }
.balls strong { display: block; font-size: 1.15rem; line-height: 1.3; margin-bottom: 0.2rem; }
.balls span { color: var(--dim); }

.again { margin-top: 4.5rem; }
.again h2 { margin-top: 0; }
.independent { color: var(--dim); font-size: 0.9rem; max-width: 40rem; margin-top: 3rem; }

/* get.html: one phone under the badges. */
.get-phone { width: min(70%, 17rem); margin: 2.5rem auto 0; }

@media (min-width: 52rem) {
  .hero { grid-template-columns: 1.15fr 0.85fr; padding-top: 3.5rem; }
  .hero-phone { width: min(100%, 22rem); }
  .rail {
    margin: 0;
    padding: 0.5rem 0 1rem;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
  }
  .balls { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .rail { scroll-behavior: smooth; }
}