/* gotitgood.app: the landing page, privacy policy and support page. System fonts only, no scripts, no requests to
   any other site. Light and dark follow the device. */
:root {
  --bg: #f7f2ea; --surface: #fffdf9; --ink: #2a2520; --ink-2: #5d554c; --muted: #8a8075; --line: #e8dfd2;
  --link: #05705e; --accent: #17a085; --on-accent: #1b1916; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1916; --surface: #25221e; --ink: #f2ece3; --ink-2: #c9bfb2; --muted: #9a8f82; --line: #3a352f; --link: #5cc9b3; --accent: #5cc9b3; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--link); }
main { max-width: 900px; margin: 0 auto; padding: 40px 16px 64px; }
h1 { font-size: 30px; line-height: 1.2; margin: 0 0 4px; }
h2 { font-size: 19px; margin: 32px 0 6px; }
p, li { color: var(--ink-2); }
.updated, .lead { margin: 0 0 24px; font-size: 15px; }
.lead { font-size: 17px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; color: var(--ink); }
footer { max-width: 680px; margin: 0 auto; padding: 24px 16px 48px; font-size: 15px; color: var(--muted); border-top: 1px solid var(--line); }
footer a { color: var(--ink-2); }
.top { max-width: 680px; margin: 0 auto; padding: 18px 16px 0; display: flex; gap: 10px; align-items: center; }
.top a { display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 700; }
.top img { border-radius: 8px; }

/* Landing: the hero is the app's sunrise scene (a wide 2:1 version, scripts/build-site.mjs). On load it replays the
   app's splash, silently: the sky warms from dusk to sunrise colors, the G·I·G sun rises from behind the hill
   until the whole mark clears it, with a slight overshoot and settle (2 s); the rays flash (2.2 s); "Got it Good"
   fades in (2.4 s), then the line, badge and links under it, all anchored to the bottom of the hero together.
   The speaker button replays it with the chime (sunrise.js). Reduced motion: the final scene, still. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: 960px; overflow: hidden; background: #3b2a52; color: #f7f2ea; }
.hero > .splash-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .splash-stars, .hero .splash-halo, .hero .splash-sky-now { display: none; }
.hero .dawn-0 { stop-color: #3b2a52; } .hero .dawn-1 { stop-color: #c8643f; } .hero .dawn-2 { stop-color: #f6c27a; }
.hero.play .splash-sky-dawn { animation: warm 1.8s ease-in-out both; }
.hero.play .splash-sun { animation: rise 2s ease-out both; }
.hero .splash-sun { transform: translateY(-112px); } /* the whole mark clears the hill with air under it, and stays up */
.hero.play .splash-glow { animation: warm 1.8s ease-in both; }
.hero .splash-rays { transform-box: view-box; transform-origin: 500px 540px; }
.hero.play .splash-rays { animation: flash 0.4s 2.2s cubic-bezier(0.2, 0.8, 0.3, 1.5) both; }
.hero.play .hero-title { animation: up 0.4s 2.4s ease-out both; }
.hero.play .hero-under > :not(.hero-title) { animation: up 0.5s 2.8s ease-out both; }
@keyframes warm { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { 0% { transform: translateY(210px); } 78% { transform: translateY(-128px); } 100% { transform: translateY(-112px); } } /* a slight overshoot, then settles */
@keyframes flash { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero.play * { animation: none !important; } }
.sound { position: absolute; top: calc(env(safe-area-inset-top) + 14px); right: 14px; width: 44px; height: 44px; border-radius: 22px; border: 0; display: grid; place-items: center; background: rgb(255 255 255 / 16%); color: #f7f2ea; cursor: pointer; }
.sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-under { position: absolute; left: 0; right: 0; bottom: max(5%, 20px); padding: 0 16px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.hero-title { width: min(300px, 70vw); height: auto; }
.hero-line { margin: 0; max-width: 28ch; text-wrap: balance; font-size: 18px; line-height: 1.35; color: #ecdccb; }
.badge { display: inline-grid; justify-items: start; padding: 7px 18px 8px; border-radius: 12px; background: #000; color: #fff; border: 1px solid rgb(255 255 255 / 40%); font-size: 21px; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
.badge small { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.hero-links { font-size: 15px; color: #cfc6ba; }
.hero-links a { color: #f7f2ea; }

/* Below the fold: three phone screens with a caption each. */
.shots { display: grid; gap: 28px; justify-items: center; margin: 8px 0 28px; }
.shots figure { margin: 0; max-width: 260px; text-align: center; }
.shots figcaption { margin-top: 10px; color: var(--ink-2); font-size: 16px; }
.frame { width: 240px; aspect-ratio: 440 / 956; border-radius: 34px; border: 8px solid #1b1916; overflow: hidden; background: var(--surface); box-shadow: 0 10px 30px rgb(0 0 0 / 16%); }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame.placeholder { display: grid; place-items: center; background: linear-gradient(#fbdcc9, #f7f2ea 40%); color: var(--muted); font-weight: 700; }
.promise { text-align: center; max-width: 34ch; margin: 0 auto; color: var(--ink-2); }
@media (min-width: 820px) { .shots { grid-template-columns: repeat(3, 1fr); align-items: start; } }

/* The preview's passcode screen (site/edge/preview-gate.js). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gate { max-width: 360px; text-align: center; padding-top: 18vh; }
.gate img { border-radius: 14px; }
.gate form { display: grid; gap: 10px; margin-top: 18px; }
.gate input { font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.gate button { font: inherit; font-weight: 700; padding: 12px; border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.gate-wrong { color: #b4532a; }