/* Niner site — palette lifted from Sources/Theme.swift: instrument amber on a cockpit-black panel. */
:root {
  color-scheme: dark;
  --bg: #0B0E12;
  --card: #151A21;
  --stroke: rgba(255, 255, 255, 0.06);
  --fg: #E9EDF2;
  --dim: rgba(233, 237, 242, 0.6);
  --faint: rgba(233, 237, 242, 0.35);
  --amber: #FFB036;
  --amber-dim: rgba(255, 176, 54, 0.14);
  --vfr: #33C759;
  --mvfr: #0A85FF;
  --ifr: #FF453A;
  --lifr: #BF59F2;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 720px; margin: 0 auto; padding: 48px 16px 72px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); font-weight: 600; }

.top { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.top img { width: 56px; height: 56px; border-radius: 13px; }
.top .wordmark { font-weight: 800; font-size: 26px; letter-spacing: -0.01em; }
.hero h1 { font-size: clamp(38px, 8vw, 64px); line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 14px; font-weight: 800; }
.hero h1 span { color: var(--amber); }
.hero .lead { font-size: 20px; color: var(--dim); max-width: 560px; margin: 0 0 28px; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 36px; }
.shots img { width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--stroke); background: var(--card); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.cats { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 28px; }
.cat { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; background: var(--card); border: 1px solid var(--stroke); }
.cat.vfr { color: var(--vfr); } .cat.mvfr { color: var(--mvfr); } .cat.ifr { color: var(--ifr); } .cat.lifr { color: var(--lifr); }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tier { background: var(--card); border: 1px solid var(--stroke); border-radius: 16px; padding: 18px 18px 16px; }
.tier h3 { margin: 6px 0 10px; font-size: 24px; letter-spacing: -0.01em; }
.tier.paid h3 { color: var(--amber); }
.tier p { margin: 0; color: var(--dim); font-size: 15px; }
.note { margin: 32px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--amber-dim); border: 1px solid rgba(255, 176, 54, 0.3); color: var(--fg); font-size: 15px; }
.foot { display: flex; gap: 22px; border-top: 1px solid var(--stroke); margin-top: 48px; padding-top: 22px; font-size: 14px; }
.foot a { color: var(--dim); } .foot a:hover { color: var(--amber); }

.back { font-size: 14px; color: var(--dim); }
article h1 { font-size: 38px; margin: 10px 0 2px; letter-spacing: -0.02em; font-weight: 800; }
article .muted { color: var(--faint); font-size: 14px; margin: 0 0 8px; }
article h2 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 34px 0 6px; font-weight: 600; }
article p { margin: 0 0 12px; }
article strong { color: var(--amber); }

@media (max-width: 520px) { .tiers, .shots { grid-template-columns: 1fr; } .top { margin-bottom: 28px; } }