/* ============================================================
   800prep — DESIGN SYSTEM
   ------------------------------------------------------------
   Principles (from Linear / Stripe / Vercel / Geist analysis):
   1. Never pure white or pure black — warm tinted canvas, white cards on top.
   2. ONE chromatic accent (brand blue). Not indigo — indigo #4F46E5 is the
      Tailwind-default "AI-generated site" tell.
   3. Shadows are multi-layer, low-opacity, and TINTED with the ink hue.
      Gray shadows look dirty; hue-matched shadows look designed.
   4. Negative letter-spacing that scales with type size.
   5. Restrained radii (8 buttons / 12 cards) — not rounded-2xl everywhere.
   6. Dense components inside generous whitespace (96px sections).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* Global box-sizing so padding never inflates width/height. (Tailwind's preflight
   sets this on pages that load it; declaring it here keeps non-Tailwind pages —
   e.g. the test engine + diagnostic gate — consistent so .field inputs size right.) */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* ---- surfaces (warm, never pure white) ---- */
  --canvas:      #F5F6F8;   /* cool near-white page background */
  --paper:       #F5F6F8;   /* alias kept for existing markup */
  --surface:     #FFFFFF;   /* cards sit ON the canvas — depth for free */
  --surface-2:   #EDEFF3;   /* alternating bands, inputs */
  --night:       #0A0C11;   /* dark sections — near-black (brand) */
  --night-2:     #141822;   /* raised surface on dark */

  /* ---- ink ladder (near-black, brand) ---- */
  --ink:         #0B0E14;
  --ink-2:       #3A424E;
  --ink-3:       #6B7480;

  /* ---- hairlines ---- */
  --grid:        #E3E6EC;   /* alias kept for existing markup */
  --hairline:    #E3E6EC;

  /* ---- ONE accent: brand blue. Actions, brand, focus. ---- */
  --signal:      #1A6DF0;
  --signal-2:    #0F52C9;   /* hover / pressed */
  --signal-soft: #E8F1FE;   /* tinted fill */

  /* ---- data / progress (same hue family, brighter) ---- */
  --plot:        #4C93FF;

  /* ---- emphasis & scarcity: editorial amber, not neon ---- */
  --flag:        #B45309;
  --flag-soft:   #FDF3E7;

  --danger:      #B3261E;
  --white:       #FFFFFF;

  /* ---- elevation: layered, negative spread, tinted with ink ---- */
  --shadow-sm:   0 1px 2px rgba(18,24,31,.04);
  --shadow-card: 0 1px 1px rgba(18,24,31,.02), 0 4px 8px -4px rgba(18,24,31,.04), 0 16px 24px -8px rgba(18,24,31,.06);
  --shadow-lift: 0 1px 1px rgba(18,24,31,.02), 0 8px 16px -4px rgba(18,24,31,.05), 0 24px 32px -8px rgba(18,24,31,.07);
  --shadow-pop:  0 1px 1px rgba(18,24,31,.03), 0 12px 24px -6px rgba(18,24,31,.08), 0 32px 40px -12px rgba(18,24,31,.10);
  --ring-hair:   0 0 0 1px rgba(18,24,31,.08);   /* border without layout shift */

  /* ---- radii: restrained ---- */
  --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 16px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.175,.885,.32,1.1);
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--ink);
}
/* Numbers use the body sans (no monospace) but stay tabular so they align. */
.font-mono, .mono { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 600; }

.tnum, .font-mono, .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---- display scale: heavy geometric sans, bold uppercase headers ---- */
.d-xl { font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -.01em; font-weight: 800; text-transform: uppercase; }
.d-lg { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.05; letter-spacing: -.01em; font-weight: 800; text-transform: uppercase; }
.d-md { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.14; letter-spacing: -.005em; font-weight: 700; }
.d-sm { font-size: 1.3rem; line-height: 1.22; letter-spacing: 0; font-weight: 700; }

/* ---- eyebrow: small bold sans label (no monospace) ---- */
.eyebrow {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--signal);
}

.lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; color: var(--ink-2); }
.measure { max-width: 68ch; }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---- buttons: bold blue pills (Acquisition-style) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: .95rem; line-height: 1;
  cursor: pointer; border: 1px solid transparent;
  transition: background-color .15s var(--ease), color .15s var(--ease),
              box-shadow .15s var(--ease), transform .15s var(--ease), border-color .15s var(--ease);
  text-decoration: none; white-space: nowrap;
}
.btn-lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.btn-primary { background: var(--signal); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--signal-2); box-shadow: var(--shadow-card); }
.btn-primary:active { transform: scale(.985); }
.btn-secondary { background: var(--surface); color: var(--ink); box-shadow: var(--ring-hair), var(--shadow-sm); }
.btn-secondary:hover { box-shadow: 0 0 0 1px rgba(26,109,240,.35), var(--shadow-card); color: var(--signal); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { color: var(--signal); background: var(--signal-soft); }
.btn-onDark { background: #fff; color: var(--ink); }
.btn-onDark:hover { background: rgba(255,255,255,.9); }

/* ---- cards: hairline via box-shadow (no layout shift) ---- */
.card {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--ring-hair), var(--shadow-card);
}
.card-flat { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--ring-hair); }
.card-pad { padding: 1.75rem; }
.card-link { transition: transform .15s var(--ease), box-shadow .15s var(--ease); cursor: pointer; }
.card-link:hover { transform: translateY(-2px); box-shadow: var(--ring-hair), var(--shadow-lift); }

/* dark-section card */
.card-dark { background: var(--night-2); border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(255,255,255,.07); }

/* ---- pills / chips ---- */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: 0;
}
.pill-accent { background: var(--signal-soft); color: var(--signal); }
.pill-warm { background: var(--flag-soft); color: var(--flag); }
.pill-dark { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }

/* ---- feature icons (home "why" grid): big gradient tile + glow ---- */
.feature-icon {
  width: 76px; height: 76px; margin: 0 auto 22px;
  display: grid; place-items: center; color: #fff;
  border-radius: 22px;
  background: linear-gradient(145deg, #5A9BFF 0%, #1A6DF0 54%, #0F52C9 100%);
  box-shadow: 0 14px 26px -8px rgba(26,109,240,.55), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -6px 14px rgba(15,82,201,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.group:hover .feature-icon {
  transform: translateY(-6px) rotate(-6deg);
  box-shadow: 0 20px 34px -8px rgba(26,109,240,.6), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -6px 14px rgba(15,82,201,.4);
}
.feature-icon svg { filter: drop-shadow(0 2px 3px rgba(11,14,20,.22)); }
@media (prefers-reduced-motion: reduce) { .feature-icon { transition: none; } .group:hover .feature-icon { transform: none; } }

/* ---- small icon tile (course "how it works") ---- */
.feature-mini {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--signal-soft); color: var(--signal);
}

/* ---- floating social buttons (bottom-right, all pages) ---- */
#social-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 12px;
}
.fab-btn {
  width: 64px; height: 64px; border-radius: 999px;
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 18px rgba(18,24,31,.22);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.fab-btn:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 24px rgba(18,24,31,.28); }
.fab-btn svg { width: 32px; height: 32px; }
.fab-wa { background: #25D366; }
.fab-ig { background: radial-gradient(circle at 30% 107%, #FDD87D 0%, #FA7E1E 25%, #D62976 55%, #962FBF 78%, #4F5BD5 100%); }
@media (prefers-reduced-motion: reduce) { .fab-btn { transition: none; } }
@media (max-width: 640px) { #social-fab { right: 14px; bottom: 14px; } .fab-btn { width: 58px; height: 58px; } .fab-btn svg { width: 29px; height: 29px; } }

/* ---- password show/hide eye button (login modal) ---- */
.eye-btn { position:absolute; top:50%; right:.5rem; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:8px; color:var(--ink-3); background:transparent; cursor:pointer; transition:color .15s var(--ease), background .15s var(--ease); }
.eye-btn:hover { color:var(--signal); background:var(--signal-soft); }

/* ---- inputs ---- */
.field {
  width: 100%; padding: .8rem 1rem; border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--ring-hair); border: none; font-size: 1rem;
  font-family: inherit;
  transition: box-shadow .15s var(--ease);
}
.field::placeholder { color: var(--ink-3); }
.field:focus { outline: none; box-shadow: 0 0 0 1px var(--signal), 0 0 0 4px rgba(26,109,240,.14); }
.field-dark { background: rgba(255,255,255,.05); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.field-dark::placeholder { color: rgba(255,255,255,.35); }
.field-dark:focus { box-shadow: 0 0 0 1px var(--plot), 0 0 0 4px rgba(76,147,255,.18); }

/* ---- section rhythm ---- */
.section { padding-block: clamp(4rem, 8vw, 6rem); }
.section-lg { padding-block: clamp(5rem, 10vw, 8rem); }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .wrap { padding-inline: 2rem; } }

/* ============================================================
   ATMOSPHERE — the "expensive" details
   ============================================================ */

/* Soft radial mesh for hero backdrops (organic, not a flat linear-gradient) */
.aurora {
  background:
    radial-gradient(900px 520px at 12% -12%, rgba(26,109,240,.10), transparent 62%),
    radial-gradient(760px 440px at 88% -6%,  rgba(180,83,9,.06),  transparent 60%),
    radial-gradient(600px 400px at 50% 110%, rgba(76,147,255,.07), transparent 60%);
}
.aurora-dark {
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(76,147,255,.16), transparent 60%),
    radial-gradient(700px 420px at 85% 0%,   rgba(26,109,240,.14), transparent 62%);
}

/* Fine grain — kills the digital sterility of gradients, reads like print */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Graph paper — the exam-instrument motif, now subtle */
.graph-paper {
  background-image:
    linear-gradient(to right, rgba(18,24,31,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18,24,31,.045) 1px, transparent 1px);
  background-size: 34px 34px;
}
.graph-paper-ink {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Hairline divider that fades at both ends */
.rule-fade {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent);
}

/* ============================================================
   MOTION & A11Y
   ============================================================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

.score-curve { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw-curve 1.2s ease-out .3s forwards; }
@keyframes draw-curve { to { stroke-dashoffset: 0; } }

.weight-bar-fill { width: 0; transition: width 1.1s var(--ease); }
.weight-bar-fill.is-filled { width: var(--target-width); }

/* Double-ring focus reads on any background */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--signal);
  border-radius: var(--r-sm);
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .score-curve { animation: none; stroke-dashoffset: 0; }
  .weight-bar-fill { transition: none; width: var(--target-width); }
  .faq-icon, .card-link, .btn { transition: none; }
  .card-link:hover { transform: none; }
}