/* ScribeXP website: the app's own look (scribexp-prototype.html and ios/ScribeXP/Theme.swift):
   night palette, Press Start 2P for headings and buttons, Chakra Petch for text, VT323 for numbers,
   2px panels with small corners, gold buttons with a pressed-down shadow, and pixel art kept crisp. */
:root {
  --bg: #080a1a; --phone: #10132b; --panel: #191d3d; --panel-2: #232951; --line: #2f3670;
  --fg: #f3eedd; --muted: #9ba1cc; --gold: #ffcf4a; --gold-dk: #a8771a; --ink: #1a1305;
  --gain: #6ee07f; --loss: #ff5d73; --phy: #ff6b4a; --pro: #4fa8ff; --fin: #2fd1b0; --gen: #b38cff; --arc: #5ff3ff;
  --pixel: "Press Start 2P", "Courier New", monospace;
  --body: "Chakra Petch", system-ui, -apple-system, sans-serif;
  --num: "VT323", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; color: var(--fg); font: 18px/1.6 var(--body);
  /* the app icon's night sky: a soft glow and a scatter of pixel stars */
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(79, 168, 255, 0.10), transparent 70%),
    radial-gradient(2px 2px at 12% 18%, #ffcf4a99, transparent 60%),
    radial-gradient(2px 2px at 78% 12%, #f3eedd88, transparent 60%),
    radial-gradient(2px 2px at 64% 34%, #f3eedd55, transparent 60%),
    radial-gradient(2px 2px at 30% 52%, #ffcf4a66, transparent 60%),
    radial-gradient(2px 2px at 90% 60%, #6ee07f77, transparent 60%),
    radial-gradient(2px 2px at 6% 78%, #f3eedd55, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
img.px, .px img { image-rendering: pixelated; }
a { color: var(--gold); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wrap { max-width: 980px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* top bar */
header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; font: 13px var(--pixel); }
.brand img { width: 40px; height: 40px; border-radius: 9px; border: 2px solid var(--line); }
nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 20px; }
nav a { color: var(--muted); text-decoration: none; font: 15px var(--body); font-weight: 600; white-space: nowrap; }
nav a:hover { color: var(--gold); }

/* buttons: the app's gold button with its pressed-down shadow */
.btn { display: inline-block; font: 12px/1.4 var(--pixel); text-transform: uppercase; text-decoration: none; text-align: center;
  border: 0; border-radius: 6px; padding: 16px 20px; background: var(--gold); color: var(--ink);
  box-shadow: 0 4px 0 var(--gold-dk); cursor: pointer; transition: transform .06s, box-shadow .06s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-dk); }
.btn.ghost { background: var(--panel-2); color: var(--fg); box-shadow: 0 4px 0 #070818; }

/* hero */
.hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; padding-block: 40px 64px; }
.eyebrow { font: 10px/1.8 var(--pixel); color: var(--arc); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }
.hero h1 { font: 400 clamp(24px, 4.6vw, 40px)/1.45 var(--pixel); margin: 0 0 20px; color: var(--fg); text-wrap: balance; }
.hero h1 em { color: var(--gold); font-style: normal; display: block; }
.lead { color: var(--muted); font-size: 19px; margin: 0 0 26px; max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.note { color: var(--muted); font-size: 15px; margin: 14px 0 0; }

.stage { display: grid; gap: 16px; min-width: 0; }
.hero-art { background: radial-gradient(circle at 50% 45%, rgba(255, 207, 74, 0.16), var(--panel) 72%);
  border: 2px solid var(--line); border-radius: 6px; padding: 18px; text-align: center; }
.hero-art img { width: min(260px, 70%); height: auto; image-rendering: pixelated; }
.hud { display: grid; gap: 6px; margin-top: 8px; text-align: left; }
.hud .row { display: flex; justify-content: space-between; gap: 8px; font: 22px/1 var(--num); color: var(--muted); }
.hud .row b { color: var(--gold); font-weight: 400; }
.bar { height: 14px; background: #0a0c22; border: 2px solid var(--line); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 62%; background: repeating-linear-gradient(90deg, var(--gain) 0 10px, #4fc463 10px 12px); }

/* the scribe's record: deeds written down as they're proven */
.record { background: var(--panel); border: 2px solid var(--line); border-radius: 6px; padding: 14px 16px; }
.record h3 { font: 10px/1.6 var(--pixel); color: var(--gold); text-transform: uppercase; margin: 0 0 8px; }
.record ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.record li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; font: 21px/1.15 var(--num); color: var(--fg); }
.record li span { color: var(--muted); }
.record li .v { color: var(--gain); }
.record li .s { color: var(--muted); }

/* sections */
section { padding-block: 56px; border-top: 2px solid var(--line); }
section h2 { font: 400 clamp(15px, 2.4vw, 20px)/1.6 var(--pixel); margin: 0 0 10px; text-transform: uppercase; color: var(--gold); text-wrap: balance; }
section p.sub { color: var(--muted); margin: 0 0 28px; max-width: 40em; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--panel); border: 2px solid var(--line); border-radius: 6px; padding: 18px; min-width: 0; }
.card h3 { margin: 10px 0 8px; font: 700 19px/1.3 var(--body); }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.tag { display: inline-block; font: 9px/1 var(--pixel); padding: 6px 7px; border-radius: 4px; border: 2px solid; }
.tag.phy { color: var(--phy); } .tag.pro { color: var(--pro); } .tag.fin { color: var(--fin); } .tag.gen { color: var(--gen); }

ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
ol.steps li { counter-increment: s; background: var(--panel); border: 2px solid var(--line); border-radius: 6px; padding: 18px 18px 18px 70px; position: relative; }
ol.steps li::before { content: counter(s); position: absolute; left: 18px; top: 16px; width: 34px; height: 34px; border-radius: 4px;
  background: var(--gold); color: var(--ink); font: 14px/34px var(--pixel); text-align: center; box-shadow: 0 3px 0 var(--gold-dk); }
ol.steps b { display: block; font-size: 19px; }
ol.steps span { color: var(--muted); font-size: 16px; }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plan { background: var(--panel); border: 2px solid var(--line); border-radius: 6px; padding: 22px; }
.plan.pro { border-color: var(--gold); box-shadow: 0 4px 0 var(--gold-dk); }
.plan h3 { font: 14px/1.4 var(--pixel); margin: 0 0 10px; }
.plan .price { color: var(--gold); font: 30px/1 var(--num); margin-bottom: 14px; }
.plan ul { margin: 0; padding-left: 20px; color: var(--muted); }

/* waitlist */
.join { background: radial-gradient(circle at 20% 0%, rgba(179, 140, 255, 0.16), var(--panel) 65%); border: 2px solid var(--gold);
  border-radius: 6px; padding: 26px; box-shadow: 0 4px 0 var(--gold-dk); display: grid; gap: 14px; }
.join h2 { margin: 0; }
.join p { margin: 0; color: var(--muted); }
.join form { display: flex; flex-wrap: wrap; gap: 12px; }
.join input[type="email"] { flex: 1 1 240px; min-width: 0; font: 18px var(--body); color: var(--fg); background: #0a0c22;
  border: 2px solid var(--line); border-radius: 6px; padding: 14px 14px; }
.join input::placeholder { color: #6d72a0; }
.join .msg { font-size: 16px; min-height: 1.4em; }
.join .msg.ok { color: var(--gain); }
.join .msg.err { color: var(--loss); }

details { background: var(--panel); border: 2px solid var(--line); border-radius: 6px; padding: 14px 18px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 700; }
details p { color: var(--muted); margin: 10px 0 0; }

footer { border-top: 2px solid var(--line); padding-block: 40px 52px; text-align: center; color: var(--muted); font-size: 15px; }
footer img { width: 72px; image-rendering: pixelated; }
footer .studio { font: 11px/1.8 var(--pixel); color: #fff; margin: 10px 0 14px; letter-spacing: 1px; }
footer nav { justify-content: center; margin-bottom: 8px; }

/* legal pages */
.doc { max-width: 740px; padding-block: 24px 64px; }
.doc h1 { font: 400 20px/1.6 var(--pixel); margin: 16px 0 6px; color: var(--gold); }
.doc .date { color: var(--muted); margin: 0 0 28px; }
.doc h2 { font: 700 21px var(--body); margin: 34px 0 8px; color: var(--fg); text-transform: none; }
.doc p, .doc li { color: #ddd8c8; }
.doc .summary { background: var(--panel); border: 2px solid var(--line); border-radius: 6px; padding: 16px 20px; }
.doc .summary p { margin: 0; }
.todo { background: rgba(255, 207, 74, 0.15); color: var(--gold); padding: 0 4px; border-radius: 4px; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-top: 16px; gap: 28px; }
  .cards, .plans { grid-template-columns: 1fr; }
  section { padding-block: 44px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }