/* Magpie landing site. Tokens from docs/DESIGN_SYSTEM.md. Fully offline: no external requests. */

/* ---------- Fonts (local, OFL licensed, see assets/fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/NunitoSans-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/NunitoSans-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/NunitoSans-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/NunitoSans-800.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Color, spacing, radius, elevation tokens ---------- */
:root {
  color-scheme: light dark;

  /* Light theme (default) */
  --bg: #F4F7FC;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-strong: #FFFFFF;
  --ink: #0F172A;
  --ink-secondary: #475569;
  --primary: #0B1020;
  --on-primary: #F8FAFC;
  --primary-container: rgba(255, 255, 255, 0.68);
  --on-primary-container: #0F172A;
  --accent-cyan: #19D5CF;
  --accent-blue: #4C7DFF;
  --accent-violet: #8B5CF6;
  --accent-gold: #F4B63D;
  --gold-ink: #8A4D14;
  --gold-container: linear-gradient(135deg, rgba(25, 213, 207, 0.14), rgba(139, 92, 246, 0.16));
  --outline: rgba(76, 125, 255, 0.20);
  --outline-variant: rgba(148, 163, 184, 0.24);
  --status-ontrack: #0F766E;
  --status-ontrack-container: rgba(25, 213, 207, 0.14);
  --status-duesoon: #7C3AED;
  --status-duesoon-container: rgba(139, 92, 246, 0.14);
  --status-overdue: #BE123C;
  --status-overdue-container: rgba(244, 63, 94, 0.14);

  /* Spacing, 4pt scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Elevation, soft and low (ink at stated opacity) */
  --elevation-1: 0 2px 8px rgba(31, 36, 38, 0.08);
  --elevation-2: 0 4px 16px rgba(31, 36, 38, 0.10);
  --elevation-3: 0 6px 24px rgba(31, 36, 38, 0.12);

  --shadow-color: rgba(11, 16, 32, 0.16);
  --hero-surface: linear-gradient(145deg, #091122 0%, #101A35 55%, #15112B 100%);
  --hero-glow: radial-gradient(circle at top left, rgba(25, 213, 207, 0.28), transparent 42%),
    radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.28), transparent 40%);
  --footer-divider: rgba(248, 250, 252, 0.16);
}

/* Dark theme, tokens per DESIGN_SYSTEM.md dark table.
   Tokens the doc does not define for dark are derived conservatively. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070B16;
    --surface: rgba(15, 23, 42, 0.72);
    --surface-strong: #111827;
    --ink: #E2E8F0;
    --ink-secondary: #B8C4D8;
    --primary: #E2E8F0;
    --on-primary: #070B16;
    --primary-container: rgba(30, 41, 59, 0.72);
    --on-primary-container: #E2E8F0;
    --gold-container: linear-gradient(135deg, rgba(25, 213, 207, 0.12), rgba(139, 92, 246, 0.20));
    --outline: rgba(76, 125, 255, 0.28);
    --outline-variant: rgba(148, 163, 184, 0.18);
    --status-ontrack: #5EEAD4;
    --status-ontrack-container: rgba(25, 213, 207, 0.16);
    --status-duesoon: #C4B5FD;
    --status-duesoon-container: rgba(139, 92, 246, 0.18);
    --status-overdue: #FDA4AF;
    --status-overdue-container: rgba(244, 63, 94, 0.16);
    --elevation-1: 0 2px 8px rgba(0, 0, 0, 0.28);
    --elevation-2: 0 4px 16px rgba(0, 0, 0, 0.34);
    --elevation-3: 0 6px 24px rgba(0, 0, 0, 0.4);
    --shadow-color: rgba(0, 0, 0, 0.32);
    --hero-surface: linear-gradient(145deg, #091122 0%, #101A35 48%, #1C1038 100%);
    --hero-glow: radial-gradient(circle at top left, rgba(25, 213, 207, 0.24), transparent 42%),
      radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.28), transparent 40%);
    --footer-divider: rgba(248, 250, 252, 0.14);
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Nunito Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at top left, rgba(25, 213, 207, 0.10), transparent 30%),
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.09), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0));
}

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

/* Type scale per DESIGN_SYSTEM.md (display scales up slightly on wide screens, a web adaptation) */
h1 {
  font-size: clamp(32px, 4.5vw, 44px);
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 var(--space-4);
}
h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  margin: 0 0 var(--space-4);
}
h3 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
p {
  margin: 0 0 var(--space-4);
}

.body-l {
  font-size: 16px;
  line-height: 24px;
}
.body-m {
  font-size: 14px;
  line-height: 20px;
}
.caption {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}
.muted {
  color: var(--ink-secondary);
}

a {
  color: var(--primary);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--primary);
  color: var(--on-primary);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus {
  top: var(--space-4);
}

/* ---------- Layout ---------- */
.container {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section {
  padding-block: var(--space-12);
}

/* Keep anchor targets clear of the sticky 64px header */
.section,
#main {
  scroll-margin-top: 80px;
}

.section-intro {
  max-width: 640px;
}

/* ---------- Header and nav ---------- */
.site-header {
  background: rgba(244, 247, 252, 0.76);
  border-bottom: 1px solid var(--outline-variant);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 20px;
  min-height: 48px;
}

.brand-mark {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(11, 16, 32, 0.10);
}

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.1px;
}

.site-nav a:hover {
  background: rgba(76, 125, 255, 0.10);
  color: var(--primary);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-m);
  background: var(--surface-strong);
  color: var(--ink);
  cursor: pointer;
}

/* Mobile nav (toggle only shown when JS is available) */
@media (max-width: 720px) {
  .js .nav-toggle {
    display: inline-flex;
  }
  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--outline-variant);
    box-shadow: var(--elevation-2);
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
  .js .site-header.nav-open .site-nav {
    display: block;
  }
  .js .site-nav ul {
    flex-direction: column;
    align-items: stretch;
  }
  .js .site-nav a {
    width: 100%;
  }
  /* Without JS the nav simply wraps */
  .site-header .container {
    flex-wrap: wrap;
    padding-block: var(--space-2);
  }
  .site-nav ul {
    flex-wrap: wrap;
  }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  border: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.1px;
  text-decoration: none;
  cursor: pointer;
}

.button-filled {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue) 58%, var(--accent-violet));
  color: #FFFFFF;
  box-shadow: 0 16px 32px rgba(76, 125, 255, 0.22);
}
.button-filled:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.button-tonal {
  background: rgba(76, 125, 255, 0.10);
  color: var(--primary);
}

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--space-12) var(--space-12);
}

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-8);
  align-items: center;
  padding: clamp(28px, 5vw, 52px);
  border-radius: 36px;
  background: var(--hero-glow), var(--hero-surface);
  box-shadow: 0 30px 60px var(--shadow-color);
  overflow: hidden;
  position: relative;
}

.hero .container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 55%);
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(248, 250, 252, 0.10);
  color: rgba(248, 250, 252, 0.92);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-copy h1 {
  color: #F8FAFC;
}

.hero-copy .subhead {
  font-size: 20px;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.82);
  max-width: 34em;
}

.hero-cta {
  margin-top: var(--space-6);
}

.hero-microcopy {
  margin-top: var(--space-3);
  color: rgba(226, 232, 240, 0.72);
  font-size: 14px;
  line-height: 20px;
}

.hero-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 320px;
}

.hero-mark-panel {
  width: min(320px, 70vw);
  padding: 24px;
  border-radius: 36px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 50px rgba(7, 11, 22, 0.32);
  backdrop-filter: blur(18px);
}

.hero-logo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
}

.hero-chip {
  position: absolute;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: rgba(248, 250, 252, 0.94);
  color: var(--primary);
  box-shadow: 0 16px 32px rgba(7, 11, 22, 0.16);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hero-chip-top {
  top: 28px;
  right: 8px;
}

.hero-chip-bottom {
  bottom: 24px;
  left: 0;
}

@media (max-width: 720px) {
  .hero .container {
    grid-template-columns: 1fr;
  }
  .hero-mark {
    order: -1;
  }
  .hero-mark-panel {
    width: min(240px, 68vw);
  }
  .hero-chip {
    position: static;
    margin-top: var(--space-3);
  }
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-l);
  box-shadow: var(--elevation-1);
  padding: var(--space-6);
  backdrop-filter: blur(14px);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.card h3 {
  color: var(--ink);
}

.card p {
  color: var(--ink-secondary);
  margin-bottom: 0;
}

/* ---------- Problem / stat ---------- */
.stat-callout {
  margin-top: var(--space-6);
  background: var(--gold-container);
  border: 1px solid var(--outline);
  border-radius: var(--radius-l);
  padding: var(--space-6);
  box-shadow: var(--elevation-2);
}

.stat-callout h3 {
  color: var(--gold-ink);
  font-size: 24px;
  line-height: 32px;
}

.stat-callout p {
  color: var(--ink);
  max-width: 60em;
}

.stat-callout .stat-note {
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  margin-bottom: 0;
}

/* ---------- How it works ---------- */
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: var(--space-3);
}

/* ---------- Privacy promises ---------- */
.privacy-band {
  background:
    radial-gradient(circle at top left, rgba(25, 213, 207, 0.14), transparent 35%),
    radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.16), transparent 38%),
    rgba(255, 255, 255, 0.48);
}

.privacy-band h2,
.privacy-band .section-intro p {
  color: var(--on-primary-container);
}

.promise-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(25, 213, 207, 0.16), rgba(139, 92, 246, 0.18));
  color: var(--primary);
  margin-bottom: var(--space-3);
}

.privacy-band .card .promise-icon {
  background: rgba(76, 125, 255, 0.10);
}

.privacy-more {
  margin-top: var(--space-6);
  margin-bottom: 0;
}

/* ---------- Waitlist ---------- */
.waitlist-card {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  background: var(--hero-glow), var(--hero-surface);
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 26px 50px rgba(7, 11, 22, 0.22);
}

.waitlist-card h2,
.waitlist-card p,
.waitlist-card label {
  color: #F8FAFC;
}

.waitlist-card .muted,
.waitlist-card .form-microcopy {
  color: rgba(226, 232, 240, 0.74);
}

/* Without JS the form cannot show its confirmation, and a bare submit would
   put the email in the URL (GET to the page itself), which would break the
   privacy page's "does not store or send your email anywhere" claim.
   Fail closed: hide the form until JS marks the document, and let the
   noscript fallback carry the mailto path. */
html:not(.js) .waitlist-form {
  display: none;
}

.waitlist-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
}

/* display: flex above would otherwise beat the UA [hidden] rule,
   leaving the form visible after JS hides it on submit. */
.waitlist-form[hidden] {
  display: none;
}

.field {
  flex: 1 1 260px;
  text-align: left;
}

.field label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.field input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--outline);
  border-radius: var(--radius-m);
  background: rgba(248, 250, 252, 0.96);
  color: #0F172A;
  font-family: inherit;
  font-size: 16px;
}

.field input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.waitlist-form .button {
  align-self: flex-end;
}

.form-microcopy {
  margin-top: var(--space-3);
  margin-bottom: 0;
  color: rgba(226, 232, 240, 0.72);
  font-size: 14px;
  line-height: 20px;
}

.form-confirmation {
  margin-top: var(--space-5);
  background: var(--status-ontrack-container);
  color: var(--status-ontrack);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  font-weight: 600;
  text-align: left;
}

.form-confirmation a {
  color: inherit;
  font-weight: 700;
}

.form-confirmation[hidden] {
  display: none;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 720px;
  margin-top: var(--space-6);
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-m);
  box-shadow: var(--elevation-1);
  margin-bottom: var(--space-3);
  backdrop-filter: blur(10px);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-m);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary h3 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  margin: 0;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(225deg);
}

.faq-item .faq-answer {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--ink-secondary);
  margin: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(145deg, #070B16 0%, #0B1020 52%, #15112B 100%);
  color: #F8FAFC;
  padding-block: var(--space-10);
  margin-top: var(--space-12);
}

.site-footer a {
  color: var(--on-primary);
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.site-footer a:focus-visible {
  outline-color: var(--on-primary);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

.footer-grid h2 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-note {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--footer-divider);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  font-size: 14px;
  line-height: 20px;
}

/* ---------- Privacy page ---------- */
.prose {
  max-width: 680px;
}

.prose h2 {
  margin-top: var(--space-8);
}

.prose ul {
  padding-left: 1.2em;
  color: var(--ink);
}

.prose li {
  margin-bottom: var(--space-2);
}

.page-hero {
  padding-block: var(--space-10) var(--space-6);
  display: grid;
  gap: var(--space-5);
}

.page-hero-mark img {
  width: 88px;
  height: 88px;
  border-radius: 28px;
  box-shadow: 0 24px 44px rgba(11, 16, 32, 0.18);
}

.page-hero p {
  color: var(--ink-secondary);
  font-size: 20px;
  max-width: 34em;
}

/* ---------- Scroll reveal (motion-safe only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 350ms ease, transform 350ms ease;
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}