/* SVLTMK family stylesheet: the one shared skin for every app page.
   Each page supplies only its :root theme tokens in a small inline block:
   --bg --surface --ink --soft --border --accent --on-accent --film-accent --film-ink
   Optional: --raised --muted --accent-deep --glow (defaults derive from the required set).
   Structure, type scale, spacing, and chrome live HERE so every app page
   stays identical in shape while keeping its own world in color. */

@font-face { font-family:'Space Grotesk'; font-weight:700; font-display:swap; src:url('/fonts/sg-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:400; font-display:swap; src:url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-display:swap; src:url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-display:swap; src:url('/fonts/inter-700.woff2') format('woff2'); }

:root {
  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fd:'Space Grotesk','Inter',-apple-system,sans-serif;
  --pad:24px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:clip; }
body {
  background:var(--bg); color:var(--ink); font-family:var(--f);
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:clip;
}
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(75% 50% at 50% -10%, var(--glow, transparent), transparent 70%); }

/* ── Family chrome ── */
.topbar { max-width:948px; margin:0 auto; padding:18px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.back { display:inline-flex; align-items:center; gap:8px; color:var(--soft);
  font-size:14px; font-weight:600; text-decoration:none; }
.back:hover { color:var(--accent); }
.topbar-app { display:inline-flex; align-items:center; gap:9px;
  font-family:var(--fd); font-weight:700; font-size:14px; color:var(--soft); letter-spacing:0.01em; }
.topbar-app img { width:26px; height:26px; border-radius:7px; display:block; }
.container { max-width:948px; margin:0 auto; padding:20px var(--pad) 72px; }

/* ── Hero ── */
.hero { text-align:center; padding:26px 0 40px; }
.hero img, .hero-icon { width:104px; height:104px; border-radius:26px;
  box-shadow:0 14px 36px rgba(0,0,0,0.22); }
h1 { font-family:var(--fd); font-size:clamp(2.45rem, 8.5vw, 4rem); font-weight:700;
  letter-spacing:-0.035em; margin-top:22px; line-height:1.05; }
h1 .hue { color:var(--accent-deep, var(--accent)); }
.tagline { font-size:clamp(1.08rem, 4.4vw, 1.28rem); line-height:1.55; color:var(--soft);
  max-width:600px; margin:18px auto 0; }
.pill { display:inline-flex; align-items:center; gap:8px; margin-top:26px;
  background:color-mix(in srgb, var(--accent) 16%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  color:var(--ink); font-size:13.5px; font-weight:700; padding:9px 18px; border-radius:999px; }
.pill .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); }
.price-line { font-size:16px; color:var(--soft); margin:14px 0 0; }
.price-line strong { color:var(--ink); }

/* ── The film ── */
.film { position:relative; margin:42px 0; border-radius:20px; overflow:hidden; background:#000;
  box-shadow:0 24px 64px rgba(0,0,0,0.26); line-height:0; }
.film video { display:block; width:100%; height:auto; aspect-ratio:16/9; }
@media (max-width:639px) {
  .film { margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad)); border-radius:0; }
}
@media (min-width:1000px) {
  .film { width:min(1160px, calc(100vw - 64px)); margin-left:50%; transform:translateX(-50%); }
}
.film-play { position:absolute; inset:0; width:100%; display:flex; flex-direction:row;
  align-items:flex-end; justify-content:flex-start; gap:15px; border:0; cursor:pointer;
  padding:0 0 24px 24px; font:inherit; color:#fff; line-height:1.4; text-align:left;
  background:linear-gradient(to top, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.26) 28%, rgba(0,0,0,0) 60%); }
.film-play .disc { flex:0 0 auto; width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:var(--film-accent, var(--accent)); box-shadow:0 10px 28px rgba(0,0,0,0.45); transition:transform 0.18s ease; }
.film-play .disc svg { width:22px; height:22px; margin-left:3px; fill:var(--film-ink, var(--on-accent)); }
.film-play:hover .disc { transform:scale(1.08); }
.film-play .label { font-size:12px; font-weight:700; letter-spacing:0.11em; text-transform:uppercase;
  padding-bottom:4px; text-shadow:0 2px 12px rgba(0,0,0,0.85); }
.film-play:focus-visible { outline:3px solid var(--film-accent, var(--accent)); outline-offset:-4px; }
.film.playing .film-play { display:none; }
@media (max-width:600px) { .film-play { padding:0 0 16px 16px; gap:12px; }
  .film-play .disc { width:52px; height:52px; } .film-play .disc svg { width:19px; height:19px; }
  .film-play .label { font-size:11px; } }

/* ── Feature cards ── */
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); gap:16px; margin:36px 0; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:24px;
  transition:transform 0.22s ease, border-color 0.22s ease; }
.card:hover { transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
.card .glyph { width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  margin-bottom:14px; color:var(--accent-deep, var(--accent));
  background:color-mix(in srgb, var(--accent) 13%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.card .glyph svg { width:21px; height:21px; display:block; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.card h2, .card h3 { font-size:17px; font-weight:700; margin-bottom:6px; letter-spacing:-0.01em; }
.card p { font-size:15px; color:var(--soft); }

/* ── Section headings ── */
.sec-h2, .shots-head h2, .waitlist h2, .promise h2, .module h2 {
  font-family:var(--fd); font-size:clamp(1.45rem, 5.2vw, 1.7rem); font-weight:700;
  letter-spacing:-0.015em; margin-bottom:8px; }

/* ── A closer look: real frames, App Store swipe on phones ── */
.shots { margin:48px 0; }
.shots-head p { font-size:16px; color:var(--soft); max-width:600px; margin-bottom:20px; }
.shot { display:block; position:relative; margin:0; }
.shot img { width:100%; height:auto; display:block; border-radius:14px;
  border:1px solid var(--border); box-shadow:0 18px 44px rgba(0,0,0,0.16); }
.shot figcaption { font-size:13px; color:var(--muted, var(--soft)); margin-top:9px; text-align:center; }
.shots-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.shots-row .shot img { max-height:520px; width:auto; max-width:100%; margin:0 auto; }
/* Landscape frames (games shot sideways) stack full width instead of shrinking. */
.shots-row.wide { grid-template-columns:1fr; gap:18px; }
.shots-row.wide .shot img { max-height:none; width:100%; }
/* Phones: swipeable strip with snap, like flicking through App Store screens. */
@media (max-width:639px) {
  .shots-row:not(.wide) { display:flex; overflow-x:auto; gap:12px;
    margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad));
    padding:4px var(--pad) 14px; scroll-snap-type:x mandatory; scroll-padding-left:var(--pad);
    -webkit-overflow-scrolling:touch; }
  .shots-row:not(.wide) .shot { flex:0 0 70%; scroll-snap-align:start; }
  .shots-row:not(.wide) .shot img { max-height:none; width:100%; }
}

/* ── Promise / callout ── */
.promise { background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--accent); border-radius:18px; padding:24px 26px; margin:36px 0; }
.promise p { font-size:16px; color:var(--soft); }
.promise a { font-weight:600; }

/* ── Generic optional module (page-specific sections reuse this shell) ── */
.module { background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:26px 28px; margin:36px 0; }
.module p { font-size:16px; color:var(--soft); }
.chips { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.chip { font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:999px;
  color:var(--ink); background:color-mix(in srgb, var(--accent) 13%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); }

/* ── Open beta: TestFlight public link + a QR for desktop visitors ──
   Only on pages whose app has an APPROVED public TestFlight link. A link that
   is still awaiting Apple's beta review renders "not accepting testers", which
   reads as broken, so the markup goes in only once the link actually opens.
   Accent-tinted rather than plain surface, so it outranks the waitlist below
   it: joining now beats being told later. */
.beta { background:color-mix(in srgb, var(--accent) 9%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius:20px; padding:26px 28px; margin:40px 0 32px; }
.beta-lede { font-size:15.5px; color:var(--soft); max-width:580px; margin-bottom:20px; }
.beta-row { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
/* White plate is not decoration: a QR needs a quiet zone and maximum contrast,
   and these pages are near-black. */
.beta-qr { width:112px; height:112px; flex:0 0 auto; background:#fff;
  border-radius:14px; padding:8px; }
.beta-qr img { display:block; width:100%; height:100%; }
.beta-cta { flex:1 1 260px; min-width:0; }
.beta-btn { display:inline-block; font-size:15px; font-weight:700; border-radius:12px;
  padding:13px 22px; background:var(--accent); color:var(--on-accent, #fff);
  text-decoration:none; transition:transform 0.15s ease, filter 0.15s ease; }
.beta-btn:hover { filter:brightness(1.06); transform:translateY(-1px); text-decoration:none; }
.beta-btn:active { transform:translateY(0); }
.beta-btn:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.beta-note { font-size:13.5px; color:var(--soft); margin-top:13px; max-width:340px; }
@media (max-width:600px) {
  .beta { padding:22px 20px; }
  /* The QR is useless on the device it is displayed on, so on phones the button
     leads and the code drops below it at a size that still scans off a second
     screen. */
  .beta-row { flex-direction:column-reverse; align-items:flex-start; gap:18px; }
  /* flex-basis is the CROSS axis once this is a column, so the 260px above
     becomes a height floor and opens a dead gap above the QR. Reset it. */
  .beta-cta { flex:0 0 auto; width:100%; }
  .beta-btn { display:block; text-align:center; }
  .beta-note { max-width:none; }
}

/* ── Waitlist ── */
.waitlist { background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:28px 30px; margin:40px 0; }
.wl-lede { font-size:15.5px; color:var(--soft); max-width:580px; margin-bottom:18px; }
.wl-form { max-width:640px; }
.wl-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wl-hp { position:absolute; left:-9999px; }
.wl-row { display:flex; gap:10px; flex-wrap:wrap; }
.wl-input { flex:1 1 250px; min-width:0; font:inherit; font-size:16px; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--border); border-radius:12px; padding:13px 15px; }
.wl-input::placeholder { color:var(--muted, var(--soft)); }
.wl-input:focus-visible { outline:3px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.wl-btn { flex:0 0 auto; font:inherit; font-size:15px; font-weight:700; cursor:pointer; border:0;
  border-radius:12px; padding:13px 22px; background:var(--accent); color:var(--on-accent, #fff);
  transition:transform 0.15s ease, filter 0.15s ease; }
.wl-btn:hover { filter:brightness(1.06); transform:translateY(-1px); }
.wl-btn:active { transform:translateY(0); }
.wl-btn:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.wl-check { display:flex; gap:10px; align-items:flex-start; margin-top:15px; font-size:14.5px;
  color:var(--soft); cursor:pointer; }
.wl-check input { margin-top:3px; width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto; }
.wl-fine { font-size:13px; color:var(--soft); margin-top:14px; }
@media (max-width:600px) { .waitlist { padding:22px 20px; } .wl-btn { width:100%; } }

/* ── Links + footer ── */
a { color:var(--accent-deep, var(--accent)); text-decoration:none; }
a:hover { text-decoration:underline; }
.promise a, .module a, .wl-lede a, .wl-fine a, .beta-lede a, .beta-note a, .tagline a,
.price-line a, .card a, .qr-card a, .shots-head a { text-decoration:underline; text-underline-offset:2px; }
a:focus-visible, .back:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.footer { margin-top:56px; padding-top:24px; border-top:1px solid var(--border); text-align:center; }
.footer a { color:var(--soft); font-weight:600; }
.footer a:hover { color:var(--accent); }
.footer .row { font-size:13px; color:var(--muted, var(--soft)); }
.footer .row a { margin:0 8px; }
.footer-brand { display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--fd); font-weight:700; font-size:13px; color:var(--soft); }
.footer-brand img { width:20px; height:20px; border-radius:5px; }

/* ── Motion: reveals + idle float, all off under reduced motion ── */
.rv { opacity:0; transform:translateY(22px);
  transition:opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity:1; transform:none; }
@media (min-width:1000px) {
  .film.rv { transform:translateX(-50%) translateY(22px); }
  .film.rv.in { transform:translateX(-50%); }
}
.hero img, .hero-icon { animation:fam-float 6.5s ease-in-out infinite; }
@keyframes fam-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@media (prefers-reduced-motion:reduce) {
  .rv { opacity:1; transform:none; transition:none; }
  .hero img, .hero-icon { animation:none; }
  .film-play .disc, .card, .wl-btn { transition:none; }
}