/* ============================================================
   Answrd website layer.
   design-system.css carries the shared tokens, type scale and
   component treatment. This file reconciles the website's older
   local variable names with those tokens and applies the same
   typography and contrast rules the app now uses, so the product
   and the marketing site read as one brand.

   Loaded after the pages' inline <style>, so it wins.
   ============================================================ */

:root {
  /* The site named the mid navy --navy where the app calls it
     --navy-surface. Same value, so the two are reconciled here
     rather than renamed across twelve pages. */
  --navy: #1B2D4F;
  --navy-deep: #0A1628;

  /* The site's --amber-dark is the app's --amber-strong. */
  --amber-dark: var(--amber-strong);
  --amber-light: var(--amber-quiet);

  /* Light-surface text ladder, matched to the app's dark ladder. */
  --text:  var(--ink-primary);
  --mid:   var(--ink-secondary);
  --muted: var(--ink-tertiary);
  --border: #E4E8EE;
}

/* ---- Typography ---------------------------------------------
   Same two faces and the same five-step scale as the app.
   Headings take Archivo, body takes Public Sans.
   -------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.hero h1, .hero-title, .section-title {
  font-family: var(--font-display);
  letter-spacing: -0.028em;
  line-height: 1.08;
  font-weight: 700;
}

h3, h4, h5, h6 {
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 650;
}

/* Small print was routinely below 13px. Nothing informational now
   sits under 14px, matching the app lifting body off 12px. */
small, .small, .fineprint, .footnote, .caption {
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Numerals in pricing and stats stop jittering between rows. */
.price, .stat, .stat-number, .metric { font-variant-numeric: tabular-nums; }

/* ---- Contrast ------------------------------------------------
   White on amber measured 2.44:1 and failed AA on the site's most
   important call to action, exactly as it did in the app. Navy on
   amber is 7.43:1.
   -------------------------------------------------------------- */
.btn-primary {
  background: var(--amber);
  color: var(--navy-deep) !important;
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.005em;
  border-radius: var(--r-md);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary:hover {
  background: var(--amber-strong);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost-white {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  border-color: var(--line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-ghost-white:hover {
  color: #fff;
  border-color: var(--line-strong);
  background: rgba(255,255,255,0.06);
}

/* The promo banner is amber-filled, so its text follows the same
   rule as the button rather than sitting at 2.44:1. */
.promo-banner,
.promo-banner a,
.promo-banner strong {
  color: var(--navy-deep) !important;
}
.promo-banner a { text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* ---- Focus --------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---- Radii, matched to the app's three-step set -------------- */
.card, .panel, .feature-card, .pricing-card, .testimonial { border-radius: var(--r-lg); }
input, textarea, select, .chip, .tag, .badge { border-radius: var(--r-sm); }

/* ---- Amber restraint ----------------------------------------
   Amber stays for primary action and active state. Decorative
   glows are toned down so the call to action is the brightest
   thing on the page.
   -------------------------------------------------------------- */
.hero-glow { opacity: 0.65; }

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