:root {
  /* Brand tokens */
  --brand-navy: #062B5F;
  --brand-navy-dark: #03172F;
  --brand-cyan: #12C8D9;
  --brand-cyan-dark: #0fa6b5;

  /* Surface tokens */
  --bg: #0a1226;
  --bg-elev: #0f1a32;
  --panel: #131f3d;
  --text: #ecf2ff;
  --muted: #9aabd0;
  --muted-strong: #cfdaf2;
  --border: #1f2c4d;
  --border-strong: #2c3f6d;

  /* Accents */
  --accent: var(--brand-cyan);
  --accent-dark: var(--brand-cyan-dark);
  --accent-ink: #04222a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(18, 200, 217, 0.08) 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Sora", "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 8px 0 14px; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 20px; }
h3 { font-size: 1.1rem; margin: 0 0 10px; }
p { margin: 0 0 12px; }
a { color: var(--brand-cyan); }

.container { width: min(1080px, 92%); margin: 0 auto; }

/* Launch banner */
.launch-banner {
  background: linear-gradient(90deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
  border-bottom: 1px solid rgba(18, 200, 217, 0.25);
  color: var(--muted-strong);
  text-align: center;
  font-size: 0.88rem;
  padding: 10px 16px;
}
.launch-banner strong { color: var(--brand-cyan); font-weight: 700; }
.launch-banner .pill {
  display: inline-block;
  background: rgba(18, 200, 217, 0.15);
  color: var(--brand-cyan);
  border: 1px solid rgba(18, 200, 217, 0.4);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 8px;
}

/* Header / nav */
.site-header {
  border-bottom: 1px solid var(--border);
  background: rgba(10, 18, 38, 0.88);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-horizontal { height: 44px; width: auto; object-fit: contain; }
nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 18px;
  font-size: 0.92rem;
  font-weight: 500;
}
nav a:hover { color: var(--text); }

/* Hero */
.hero { padding: 64px 0 56px; text-align: center; }
.hero-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; }
.hero-logo-stacked { width: min(280px, 60vw); height: auto; object-fit: contain; }
.eyebrow {
  color: var(--brand-cyan);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  margin: 0 0 4px;
}
.subheadline {
  max-width: 720px;
  margin: 0 auto 28px;
  color: var(--muted-strong);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}
.cta-row { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
  border: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-cyan); color: var(--accent-ink); }
.btn-primary:hover { background: var(--brand-cyan-dark); color: #fff; }
.btn-secondary {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: var(--bg-elev);
}
.btn-secondary:hover { border-color: var(--brand-cyan); color: #fff; }
.fine-print { margin-top: 14px; color: var(--muted); font-size: 0.86rem; }

/* Trust strip */
/* Trust pills under the hero. These carry real value props
   (no cloud dependency, no recurring billing). Originally styled
   as text-with-bullets which read like footnotes -- David's
   feedback May 31 2026 was "make them stand out more." Now
   rendered as bordered pills with a cyan dot indicator and stronger
   typography, but still subtle enough not to compete with the
   primary CTAs above. */
.trust-row {
  display: flex;
  gap: 10px 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 28px auto 0;
}
.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: rgba(18, 200, 217, 0.06);
  border: 1px solid rgba(18, 200, 217, 0.28);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.trust-row span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: 0 0 6px rgba(18, 200, 217, 0.6);
}

/* Sections */
.section { padding: 56px 0; }
.section-tight { padding: 40px 0; }
.section h2 { text-align: center; }
.section .lede {
  text-align: center;
  color: var(--muted-strong);
  max-width: 700px;
  margin: -8px auto 32px;
  font-size: 1.02rem;
}

/* Grids */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Cards */
.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
}
/* Feature cards are reference material, not interactive elements --
   no hover state. Misleading affordance otherwise: cursor / border
   shifts imply a click target that doesn't exist. */
.card h3 { margin-top: 0; color: var(--text); }
.card p { color: var(--muted-strong); margin: 0; font-size: 0.95rem; }
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(18, 200, 217, 0.12);
  color: var(--brand-cyan);
  margin-bottom: 14px;
}
.card-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* See it in action -- hero shot on top, 3 feature highlights below.
   The hero (01-recommendations) is the full draft room with panel
   docked -- wider aspect, deserves room to breathe. The 3 features
   below are tall narrow panel screenshots; smaller, in a row of 3,
   each framed with even padding. Stacks to single column below 820px. */
.screenshot {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Hero shot card -- full width within container, image up to 760px. */
.screenshot-hero {
  max-width: 880px;
  margin: 32px auto 0;
}
.screenshot-hero img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  border-radius: 10px;
  background: #0a1226;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
.screenshot-hero figcaption {
  color: var(--muted-strong);
  font-size: 0.96rem;
  line-height: 1.5;
  text-align: center;
  max-width: 600px;
}

/* Three feature highlights row below the hero. */
.screenshots-row {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 24px;
}
@media (max-width: 820px) {
  .screenshots-row { grid-template-columns: 1fr; }
}
.screenshot-feature img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  max-height: 460px;
  border-radius: 10px;
  background: #0a1226;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.screenshot-feature figcaption {
  color: var(--muted-strong);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

/* How it works */
.steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.step {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 22px 70px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-cyan);
  color: var(--accent-ink);
  font-family: "Sora", Inter, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.step h3 { margin: 0 0 6px; }
.step p { color: var(--muted-strong); margin: 0; font-size: 0.95rem; }

/* Pricing */
.pricing { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.price-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.featured {
  border: 2px solid var(--brand-cyan);
  background: linear-gradient(180deg, rgba(18, 200, 217, 0.06) 0%, var(--panel) 100%);
  transform: translateY(-4px);
}
.price-card .price-badge {
  position: absolute;
  top: -12px;
  left: 22px;
  background: var(--brand-cyan);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.price-card h3 { font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; font-weight: 700; }
.price-amount { font-family: "Sora", Inter, sans-serif; font-size: 2.6rem; font-weight: 800; color: var(--text); line-height: 1; }
.price-amount .cents { font-size: 1.4rem; color: var(--muted); }
.price-cadence { color: var(--muted); margin: 6px 0 16px; font-size: 0.88rem; }
/* Live counter rendered on the Early Bird card via JS. Default text
   set in HTML stays visible if the API is unreachable. Color shifts
   to amber (low stock) or pink (sold out) via inline JS. */
.price-counter {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--brand-cyan);
  font-weight: 600;
  letter-spacing: 0.2px;
}
.price-card ul { list-style: none; padding: 0; margin: 0 0 18px; color: var(--muted-strong); font-size: 0.92rem; }
.price-card li { padding: 6px 0; border-top: 1px solid var(--border); }
.price-card li:first-child { border-top: none; }
.price-card li::before { content: "✓"; color: var(--brand-cyan); margin-right: 10px; font-weight: 700; }
.price-card .btn { margin-top: auto; text-align: center; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 800px; margin: 0 auto; }
.faq details {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.faq details[open] { border-color: var(--brand-cyan); }
.faq summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  font-family: "Sora", Inter, sans-serif;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand-cyan); font-size: 1.3rem; font-weight: 800; margin-left: 12px; transition: transform 0.15s; }
.faq details[open] summary::after { content: "−"; }
.faq .faq-body { padding: 0 20px 18px; color: var(--muted-strong); font-size: 0.95rem; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* Beta / signup */
.signup-card {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
  border: 1px solid rgba(18, 200, 217, 0.3);
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
}
.signup-card h2 { margin-bottom: 8px; }
.signup-card p { color: var(--muted-strong); max-width: 540px; margin: 0 auto 22px; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); margin-top: 32px; }
.footer-tagline {
  padding: 26px 0 18px;
  text-align: center;
}
.footer-tagline p {
  color: var(--muted-strong);
  font-size: 0.96rem;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.5;
}
.footer-tagline strong { color: var(--brand-cyan); }
.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 0 28px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}
.footer-grid a { color: var(--muted-strong); text-decoration: none; }
.footer-grid a:hover { color: var(--brand-cyan); }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }

img { max-width: 100%; height: auto; }

/* Mobile polish */
@media (max-width: 640px) {
  .hero { padding: 40px 0 32px; }
  .section { padding: 40px 0; }
  .nav nav { display: none; }
  .nav { justify-content: center; }
  .price-card.featured { transform: none; }
  .step { padding: 22px 18px 22px 60px; }
  .step::before { left: 14px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { text-align: center; }
}