:root {
  color-scheme: dark;
  --bg: #0b1118;
  --panel: #121b26;
  --text: #e8eef5;
  --muted: #8fa3b8;
  --accent: #5ec8ff;
  --accent-dim: #2a7aa8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top, #16324a 0%, transparent 55%),
    linear-gradient(180deg, #0b1118 0%, #070b10 100%);
  color: var(--text);
  line-height: 1.6;
}

main {
  max-width: 52rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

header {
  margin-bottom: 2.5rem;
}

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0;
  font-size: clamp(2.8rem, 8vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.tagline {
  margin: 1rem 0 0;
  font-size: 1.25rem;
  color: var(--muted);
}

.promo-nav {
  display: flex;
  gap: 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.95rem;
}

.promo-nav a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.promo-nav a:hover {
  color: #7dd4ff;
}

.pitch {
  margin-bottom: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(18, 27, 38, 0.85);
  border: 1px solid rgba(94, 200, 255, 0.15);
  border-radius: 0.75rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}

.cards article {
  padding: 1rem 1.1rem;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.65rem;
}

.cards h2 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: var(--accent);
}

.cards p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 0.9rem;
}

.play-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.85rem 2rem;
  background: var(--accent);
  color: #0b1118;
  border-radius: 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s;
}
.play-btn:hover {
  background: #7dd4ff;
  transform: translateY(-1px);
}

.legal-page { max-width: 820px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.legal-content { margin-top: 2rem; color: #dce5ec; line-height: 1.7; }
.legal-content h2 { margin: 2rem 0 .6rem; color: #f0c040; font-size: 1.35rem; }
.legal-content h3 { margin: 1.2rem 0 .3rem; color: #f4ead5; font-size: 1.05rem; }
.legal-content p, .legal-content li { max-width: 70ch; }
.legal-content a, .legal-page footer a { color: #5ec8ff; }
.legal-content li { margin: .35rem 0; }

/* Mobile-first app landing page */
:root { --cream:#f4ead5; --gold:#d5a83a; --orange:#c95d2e; --green:#2a6a4a; --navy:#0b1118; }
body { background:var(--navy); color:var(--cream); }
.landing-page { max-width:1180px; margin:auto; padding:0 28px; }
.site-nav { display:flex; justify-content:space-between; align-items:center; padding:24px 0; font-size:.82rem; letter-spacing:.06em; }
.site-nav a { color:var(--cream); text-decoration:none; margin-left:22px; opacity:.8; }.site-nav a:hover { opacity:1; }.site-nav .brand { color:var(--gold); font-weight:900; letter-spacing:.16em; margin:0; opacity:1; }
.hero-app { display:grid; grid-template-columns:1fr 1fr; gap:58px; align-items:center; min-height:720px; padding:52px 0 90px; }.eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:.18em; font-weight:800; font-size:.72rem; }.hero-copy h1 { font-size:clamp(3.2rem,6vw,6rem); line-height:.93; letter-spacing:-.06em; margin:22px 0; }.hero-copy h1 em { color:var(--orange); font-style:normal; }.hero-lede { max-width:480px; font-size:1.15rem; line-height:1.55; color:#bdcad2; }.hero-note { font-size:.75rem; color:#8395a1; margin-top:15px; }.hero-art { display:flex; justify-content:center; align-items:center; background:#0b1118; } .hero-art img { width:100%; max-height:720px; object-fit:contain; border-radius:18px; box-shadow:18px 18px 0 var(--green); }.app-store-button { display:inline-flex; align-items:center; gap:12px; background:#f5f5f5; color:#111; padding:10px 20px; border-radius:9px; text-decoration:none; margin-top:20px; }.app-store-button.disabled { opacity:.72; cursor:default; }.app-store-button .store-icon { font-size:2rem; line-height:1; }.app-store-button small,.app-store-button strong { display:block; line-height:1.1; }.app-store-button small { font-size:.65rem; }.app-store-button strong { font-size:1.35rem; }
.modes { content-visibility:auto; contain-intrinsic-size:0 520px; border-top:1px solid #2b3b46; padding:85px 0; }.modes h2,.feature-split h2,.screenshots h2 { font-size:clamp(2.2rem,4vw,4rem); letter-spacing:-.05em; margin:12px 0 36px; }.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.mode-grid article { border:1px solid #354752; border-radius:14px; padding:25px; min-height:190px; }.mode-grid span { color:var(--orange); font-weight:900; }.mode-grid h3 { color:var(--gold); font-size:1.45rem; }.mode-grid p,.feature-split p,.feature-split li { color:#bdcad2; line-height:1.55; }
.feature-split { content-visibility:auto; contain-intrinsic-size:0 760px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:85px 0; }.feature-split img { width:100%; height:auto; aspect-ratio:1320 / 2868; object-fit:contain; border-radius:15px; }.feature-split ul { padding-left:20px; }.feature-split li { margin:12px 0; }.screenshots { content-visibility:auto; contain-intrinsic-size:0 620px; border-top:1px solid #2b3b46; padding:85px 0; }.screenshot-row { display:flex; gap:20px; overflow:hidden; }.screenshot-row img { width:31%; height:auto; aspect-ratio:1320 / 2868; object-fit:contain; border-radius:18px; box-shadow:0 15px 35px #0008; }.landing-page footer { border-top:1px solid #2b3b46; display:flex; justify-content:space-between; padding:30px 0 50px; color:#8395a1; font-size:.8rem; }.landing-page footer a { color:#bdcad2; margin-left:20px; }
@media(max-width:700px){.landing-page{padding:0 18px}.site-nav{padding:18px 0}.site-nav div a{margin-left:10px}.hero-app,.feature-split{grid-template-columns:1fr;gap:35px;padding:35px 0 65px}.hero-copy h1{font-size:3.7rem}.hero-art{order:-1}.hero-art img{box-shadow:9px 9px 0 var(--green)}.mode-grid{grid-template-columns:1fr}.modes,.screenshots{padding:60px 0}.screenshot-row{overflow-x:auto}.screenshot-row img{min-width:72%}.landing-page footer{display:block}.landing-page footer div{margin-top:15px}.landing-page footer a{margin:0 18px 0 0}}
.mode-link { display:inline-block; margin-top:18px; color:var(--gold); text-decoration:none; font-weight:800; }.mode-link:hover { color:var(--cream); }
.instructions-header { padding:70px 0 25px; max-width:760px; }.instructions-content { max-width:820px; padding-bottom:80px; }.instruction-card { border-top:1px solid #354752; padding:28px 0; line-height:1.6; color:#bdcad2; }.instruction-card h2 { color:var(--gold); font-size:1.8rem; margin:0 0 12px; }.instruction-card ol { padding-left:24px; }.instruction-card li { margin:9px 0; }.instruction-card dl { display:grid; grid-template-columns:150px 1fr; gap:10px 20px; }.instruction-card dt { color:var(--cream); font-weight:800; }.instruction-card dd { margin:0; }
@media(max-width:700px){.instructions-header{padding:40px 0 20px}.instruction-card dl{display:block}.instruction-card dt{margin-top:14px}.instruction-card dd{margin-top:3px}}

/* Illustrated mode-guide treatment */
.instructions-page { position:relative; overflow:hidden; }
.instructions-page::before { content:""; position:absolute; top:0; right:-180px; width:560px; height:560px; background:linear-gradient(140deg,rgba(42,106,74,.55),transparent 65%); clip-path:polygon(50% 0,100% 70%,100% 100%,0 100%); pointer-events:none; opacity:.7; }
.instructions-header { position:relative; max-width:900px; padding-bottom:42px; }
.instructions-header h1 { max-width:850px; font-size:clamp(3rem,7vw,6.3rem); line-height:.92; letter-spacing:-.065em; margin:18px 0; }
.instructions-header::after { content:""; display:block; width:180px; height:8px; margin-top:30px; background:var(--orange); transform:skew(-28deg); }
.instructions-content { position:relative; max-width:930px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding-bottom:90px; }
.instruction-card { position:relative; border:1px solid #354752; border-radius:16px; padding:24px; background:linear-gradient(145deg,rgba(24,43,50,.95),rgba(11,17,24,.9)); box-shadow:6px 6px 0 rgba(42,106,74,.32); min-height:170px; }
.instruction-card:nth-child(3n+2) { border-color:rgba(213,168,58,.55); box-shadow:6px 6px 0 rgba(201,93,46,.35); }
.instruction-card:nth-child(3n) { transform:translateY(10px); }
.instruction-card h2 { display:flex; align-items:center; gap:12px; color:var(--gold); font-size:1.65rem; margin:0 0 16px; }
.instruction-card h2::before { content:"◆"; color:var(--orange); font-size:.7em; }
.instruction-card ol { margin:0; padding-left:22px; }.instruction-card li::marker { color:var(--orange); font-weight:900; }.instruction-card li { padding-left:5px; margin:8px 0; }
.instructions-page .instructions-header + .instructions-content::before { content:"MAX VERT / FIELD GUIDE"; grid-column:1/-1; color:#78909c; font-size:.68rem; letter-spacing:.18em; font-weight:800; padding:8px 0; }
.instructions-page footer { margin-top:12px; }
.mode-grid article { position:relative; overflow:hidden; background:linear-gradient(145deg,rgba(24,43,50,.95),rgba(11,17,24,.9)); }.mode-grid article::after { content:""; position:absolute; right:-15px; bottom:-35px; width:120px; height:120px; border:18px solid rgba(201,93,46,.5); border-radius:50%; }
@media(max-width:700px){ .instructions-page::before{right:-280px;opacity:.35}.instructions-content{grid-template-columns:1fr;gap:14px}.instruction-card:nth-child(3n){transform:none}.instruction-card{min-height:0;padding:21px}.instructions-header h1{font-size:3.45rem}.instructions-page .instructions-header + .instructions-content::before{grid-column:1}.mode-grid article::after{width:90px;height:90px} }

.share-control { display:inline-flex; align-items:center; gap:.55rem; margin-left:1rem; padding:.55rem .9rem; border:1px solid rgba(213,168,58,.55); border-radius:999px; background:transparent; color:var(--cream,#f4ead5); font:inherit; font-weight:700; cursor:pointer; }
.share-control:hover { background:rgba(213,168,58,.12); }
.share-control:focus-visible { outline:3px solid #5ec8ff; outline-offset:3px; }
.share-status { display:inline-block; margin-left:.6rem; color:var(--gold,#d5a83a); font-size:.85rem; }

.blog .post-byline { display:flex; align-items:center; gap:.75rem; margin:.35rem 0 2rem; }
.blog .post-byline .post-meta { margin:0; }
.blog .post-byline .share-control { margin-left:.35rem; }
@media (max-width:560px) { .blog .post-byline { flex-wrap:wrap; } .blog .post-byline .share-control { margin-left:0; } }

.blog .post-byline .share-control { padding:.38rem .72rem; gap:.35rem; font-size:.9rem; font-weight:650; }
.blog .post-byline .share-status { margin-left:.25rem; font-size:.8rem; }