/* ============================================================================
   Cardboard Pilot — site
   Same design system as the side-panel extension: white paper, ink text,
   hairline rules, ONE working blue accent, navy used as architecture (bands,
   footer, logo), flat brass reserved for the premium tier, tabular mono
   digits for money. No gradients, no glows, no glass.
   ========================================================================== */

:root {
  /* Paper & ink (matches the extension) */
  --paper: #ffffff;
  --paper-2: #f6f5f0;
  --ink: #191b1f;
  --text: #26292e;
  --muted: #6f6c64;
  --faint: #98948a;
  --border: #e6e3da;
  --border-strong: #cfcbc0;

  /* Brand */
  --navy: #16265e;        /* logo + structural bands  */
  --navy-2: #101c48;      /* footer / darkest         */
  --navy-text: #c7d0ea;   /* body text on navy        */
  --accent: #2547c9;      /* the one working accent   */
  --accent-tint: #eef1fb;
  --brass: #b28821;       /* premium only             */
  --brass-tint: #faf3df;
  --money: #16744a;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --disp: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --num: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 5px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }

/* Display type: tight-tracked grotesk, sentence case. Uppercase lives only in
   small mono labels (kickers, tags) — headlines stay calm and confident. */
h1, h2, .disp {
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}
.kicker {
  display: inline-block;
  font-family: var(--num);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ---- Nav ------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 26px;
  padding: 0 28px; height: 62px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand svg, .brand img { width: 34px; height: 34px; display: block; }
.brand-name {
  font-family: var(--disp); font-weight: 800; font-size: 16px;
  letter-spacing: 0.05em; color: var(--navy); text-transform: uppercase;
  line-height: 1;
}
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--text); font-size: 14px; font-weight: 500; }
.nav-links a:hover { color: var(--accent); text-decoration: none; }
.nav-links a.btn-navy { color: #fff; }
.nav-links a.btn-navy:hover { color: #fff; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius);
  font-weight: 600; font-size: 14.5px; font-family: var(--sans);
  border: 1px solid transparent; cursor: pointer;
  transition: background .13s, border-color .13s, color .13s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: #1d3aa8; }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-2); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--faint); background: var(--paper-2); }
.btn-lg { padding: 13px 24px; font-size: 15.5px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- Hero: a navy room, not a white sheet -------------------------------- */
.band-hero {
  background: var(--navy);
  background-image: linear-gradient(180deg, #1a2c6d 0%, var(--navy) 46%, var(--navy-2) 100%);
}
.hero {
  max-width: 1080px; margin: 0 auto;
  padding: 96px 28px 64px;
}
.hero .kicker { color: #8fa3dd; }
.hero h1 {
  font-size: clamp(42px, 5.8vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #fff;
}
.hero h1 .hi { color: #7d9bf7; }
.hero p.lede { margin: 20px 0 0; font-size: 17px; color: var(--navy-text); max-width: 46ch; }
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-fine { margin-top: 14px; font-size: 12.5px; color: #8fa3dd; }
/* On navy, the loudest button is white. */
.btn-hero { background: #fff; color: var(--navy); border-color: #fff; }
.btn-hero:hover { background: #e6ebfa; }
.btn-hero-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.38); }
.btn-hero-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }

/* Stat strip: real numbers, mono, hairline-separated */
.stats {
  max-width: 1080px; margin: 0 auto; padding: 22px 28px 26px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.stat .n {
  display: block; font-family: var(--disp); font-weight: 800; font-size: 27px;
  letter-spacing: -0.02em; color: #fff; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat .l { display: block; font-size: 12px; color: #8fa3dd; margin-top: 2px; }

/* ---- Sections & bands ---------------------------------------------------- */
.band { background: var(--paper-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band-navy { background: var(--navy); border: 0; }
.section { max-width: 1080px; margin: 0 auto; padding: 72px 28px; }
.section h2 { font-size: clamp(26px, 3vw, 36px); }
.section h2::after {
  content: ""; display: block; width: 46px; height: 3px;
  background: var(--accent); margin-top: 14px;
}
.section .sub { color: var(--muted); margin: 12px 0 0; max-width: 60ch; }

/* ---- Product duo (the two tools) ---------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.tool {
  background: var(--paper); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
}
.tool-head {
  background: var(--navy); color: #fff;
  padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tool-head h3 {
  margin: 0; font-family: var(--disp); font-weight: 600; font-size: 16.5px;
  letter-spacing: -0.01em; color: #fff;
}
.tool-tag {
  font-family: var(--num); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #8fa3dd; white-space: nowrap;
}
.tool-body {
  padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.tool p { margin: 0; color: var(--muted); font-size: 14.5px; }
.tool ul { list-style: none; margin: 2px 0 0; padding: 0; color: var(--text); font-size: 14px; display: grid; gap: 8px; }
.tool li { padding-left: 22px; position: relative; }
.tool li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.tool .foot { margin-top: auto; padding-top: 14px; }

/* ---- How it works (navy band) ------------------------------------------- */
.band-navy .section h2 { color: #fff; }
.band-navy .kicker { color: #8fa3dd; }
.band-navy .section .sub { color: var(--navy-text); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.step {
  border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; padding: 22px;
  background: rgba(255,255,255,0.035);
}
.step .num-badge {
  font-family: var(--num); font-size: 12px; color: #fff;
  background: var(--accent); width: 26px; height: 26px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.step h3 { margin: 0 0 6px; color: #fff; font-size: 16.5px; }
.step p { margin: 0; color: var(--navy-text); font-size: 14px; }

/* ---- Pricing ------------------------------------------------------------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; align-items: stretch; }
.price-card {
  background: var(--paper); border: 1px solid var(--border); border-radius: 8px;
  padding: 26px; display: flex; flex-direction: column;
}
.price-card h3 { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-family: var(--num); font-weight: 600; }
.price { font-family: var(--disp); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; color: var(--ink); margin: 10px 0 2px; }
.price span { font-family: var(--sans); font-size: 14px; color: var(--faint); font-weight: 500; }
.price-card ul { list-style: none; margin: 16px 0 22px; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.price-card li { padding-left: 22px; position: relative; }
.price-card li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.price-card li.mut { color: var(--faint); }
.price-card li.mut::before { border-color: var(--border-strong); }
.price-card .btn { margin-top: auto; }
.price-card.featured { border: 2px solid var(--navy); position: relative; background: #f4f7ff; }
.price-card.featured::before {
  content: "Both tools · one subscription";
  position: absolute; top: -11px; left: 20px;
  background: var(--navy); color: #fff; font-family: var(--num);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px;
}
.price-card.dealer h3 { color: var(--brass); }
.pay-note { margin-top: 18px; font-size: 12.5px; color: var(--faint); }
.pay-note b { color: var(--muted); }

/* ---- Install ------------------------------------------------------------- */
.install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.install-card { background: var(--paper); border: 1px solid var(--border); border-radius: 8px; padding: 24px; }
.install-tag {
  display: inline-block; font-family: var(--num); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-strong);
  padding: 3px 8px; border-radius: 3px; margin-bottom: 12px;
}
.install-tag.accent { color: var(--money); border-color: #bfe0cf; background: #eef8f2; }
.install-card h3 { margin: 0 0 6px; font-size: 18px; }
.install-card p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.install-steps {
  margin: 26px 0 0; padding: 20px 24px 20px 40px;
  background: var(--paper-2); border: 1px solid var(--border); border-radius: 8px;
  font-size: 14.5px; display: grid; gap: 8px;
}
.install-steps li::marker { color: var(--accent); font-weight: 700; font-family: var(--num); }
.install-steps code, .hero-fine code {
  font-family: var(--num); font-size: 12.5px; background: #fff;
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px;
}

/* ---- FAQ ------------------------------------------------------------------ */
.faq { margin-top: 36px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; padding: 18px 4px; font-weight: 600; font-size: 15.5px;
  color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--num); color: var(--faint); font-size: 18px; }
.faq details[open] summary::after { content: "\2013"; }
.faq .a { padding: 0 4px 18px; color: var(--muted); font-size: 14.5px; max-width: 72ch; }

/* ---- Footer ---------------------------------------------------------------- */
.footer {
  background: var(--navy-2); color: var(--navy-text);
  margin-top: 80px;
}
.footer-in {
  max-width: 1080px; margin: 0 auto; padding: 44px 28px 36px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.footer .brand-name { color: #fff; }
.footer .fcol { font-size: 13.5px; display: grid; gap: 8px; }
.footer .fcol b { color: #fff; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--num); font-weight: 600; }
.footer a { color: var(--navy-text); }
.footer a:hover { color: #fff; }
.footer-base {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 16px 28px; text-align: center; font-size: 12.5px; color: #8fa3dd;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- Success page ------------------------------------------------------------ */
.success-wrap { max-width: 620px; margin: 70px auto; padding: 0 24px; }
.license-box {
  margin: 22px 0; padding: 18px 20px;
  background: var(--accent-tint); border: 1px solid #d5dcf0; border-radius: 8px;
}
.license-key {
  font-family: var(--num); font-size: 20px; font-weight: 700; letter-spacing: .06em;
  color: var(--navy); word-break: break-all;
}

/* ---- Responsive ----------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { padding-top: 64px; }
  .duo, .steps, .pricing, .install-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .nav { padding: 0 18px; gap: 14px; }
  .nav-links { gap: 14px; }
  .nav-links a.hide-m { display: none; }
  .section { padding: 56px 20px; }
}