/* =========================================================================
   NMLSApproved — "Bright" design system
   Direction: friendly, approachable, education-forward (Princeton Review /
   Mark Meldrum world). Light, spacious, clean, warm. Confident not stiff.
   Standalone mockups — open the .html files directly in a browser.
   ========================================================================= */

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

:root{
  --paper:    #FFFFFF;
  --ink:      #15263F;   /* soft deep navy — primary text */
  --ink-soft: #3A4D67;
  --slate:    #5A6E84;   /* secondary text (WCAG AA on white) */
  --slate-2:  #5F6E82;
  --line:     #E9EEF3;
  --line-2:   #DCE4EC;

  /* Brand teal — doubles as "pass / go / success" */
  --teal:     #0FAA7C;
  --teal-600: #0B8E67;
  --teal-700: #097355;
  --teal-50:  #E7F7F1;
  --teal-100: #CDEFE2;

  /* Coral — the friendly, high-converting CTA + accent */
  --coral:    #FF6B54;
  --coral-600:#F2543C;
  --coral-700:#C23A24;   /* error / body text on white (WCAG AA) */
  --coral-50: #FFEDE8;

  /* Warm gold — stars, guarantee warmth */
  --gold:     #FFB020;
  --gold-50:  #FFF4DD;

  /* soft section tints */
  --mint:  #EAF8F2;
  --cream: #FFF6EA;
  --sky:   #EEF4FF;
  --blush: #FFF1ED;

  --sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --display: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;

  --sh-sm:   0 2px 10px rgba(21,38,63,.05);
  --sh:      0 14px 40px rgba(21,38,63,.09);
  --sh-lg:   0 30px 70px rgba(21,38,63,.14);
  --sh-teal: 0 14px 28px rgba(15,170,124,.28);
  --sh-coral:0 14px 28px rgba(255,107,84,.32);

  --r-sm: 12px; --r: 18px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px;
  --maxw: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
@media(prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.08; letter-spacing:-.02em; color:var(--ink); }
a{ color:inherit; text-decoration:none; }

/* ---- visible keyboard focus (WCAG 2.4.7) ---- */
:focus-visible{ outline:3px solid var(--teal-700); outline-offset:3px; border-radius:4px; }
.btn:focus-visible{ outline:3px solid var(--teal-700); outline-offset:3px; }
/* skip-to-content link (hidden until focused) */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:0 0 var(--r-sm) 0; font-weight:700; }
.skip-link:focus{ left:0; }
/* visually-hidden helper for accessible labels */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.muted{ color:var(--slate); }
.tcenter{ text-align:center; }

/* ---- eyebrow ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.82rem; letter-spacing:.02em;
  color:var(--teal-700); background:var(--teal-50);
  padding:7px 15px; border-radius:var(--r-pill);
}
.eyebrow.coral{ color:var(--coral-600); background:var(--coral-50); }
.eyebrow.gold{ color:#8A5A00; background:var(--gold-50); }

/* ---- buttons (friendly pills) ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:1rem;
  padding:14px 26px; border-radius:var(--r-pill); border:2px solid transparent;
  transition:transform .16s ease, box-shadow .2s ease, background .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--coral); color:#fff; box-shadow:var(--sh-coral); }
.btn-primary:hover{ background:var(--coral-600); }
.btn-teal{ background:var(--teal); color:#fff; box-shadow:var(--sh-teal); }
.btn-teal:hover{ background:var(--teal-600); }
.btn-soft{ background:#fff; color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-sm); }
.btn-soft:hover{ border-color:var(--teal); color:var(--teal-700); }
.btn-ghost{ background:var(--teal-50); color:var(--teal-700); }
.btn-ghost:hover{ background:var(--teal-100); }
.btn-lg{ padding:17px 32px; font-size:1.08rem; }
.btn-block{ width:100%; }

/* ---- nav ---- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .25s ease, background .25s ease; }
.nav.scrolled{ box-shadow:0 6px 24px rgba(21,38,63,.08); background:rgba(255,255,255,.94); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:1.4rem; letter-spacing:-.03em; }
.brand .logo{ height:38px; width:auto; display:block; }
.footer .brand .logo{ height:34px; }
.brand .mark{ width:38px; height:38px; border-radius:12px; background:var(--teal); color:#fff; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:1.25rem; box-shadow:var(--sh-teal); }
.brand b{ color:var(--teal); }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-weight:600; font-size:.98rem; color:var(--ink-soft); transition:color .15s; }
.nav-links a:hover{ color:var(--teal-700); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-quiet{ font-weight:700; font-size:.98rem; color:var(--ink-soft); }

/* hamburger — hidden on desktop, shown <880px */
.nav-toggle{ display:none; width:44px; height:44px; flex:none; border:none; background:transparent; cursor:pointer;
  border-radius:12px; padding:0; place-items:center; color:var(--ink); }
.nav-toggle:hover{ background:var(--teal-50); }
.nav-toggle svg{ width:26px; height:26px; }
.nav-toggle .ic-x{ display:none; }
.nav-toggle[aria-expanded="true"] .ic-bars{ display:none; }
.nav-toggle[aria-expanded="true"] .ic-x{ display:block; }

/* mobile drawer (collapsed by default; populated from nav links + CTA) */
.nav-drawer{ display:none; }
@media(max-width:880px){
  .nav-links{ display:none; }
  .nav-cta .btn, .nav-cta .nav-quiet, .nav-cta .chip{ display:none; }   /* moved into the drawer */
  .nav-toggle{ display:grid; }
  .nav-drawer{ display:block; position:fixed; inset:0 0 auto 0; top:var(--nav-h, 74px);
    background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh);
    padding:14px 20px 22px; transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; z-index:49; max-height:calc(100vh - var(--nav-h, 74px)); overflow:auto; }
  .nav-drawer.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-drawer a{ display:block; font-weight:700; font-size:1.05rem; color:var(--ink-soft); padding:14px 6px; border-bottom:1px solid var(--line); }
  .nav-drawer a:last-of-type{ border-bottom:none; }
  .nav-drawer .btn{ width:100%; margin-top:14px; }
  .nav-drawer .nav-quiet{ display:block; }
}
@media(prefers-reduced-motion:reduce){ .nav-drawer{ transition:none; } }

/* ---- announcement bar ---- */
.annc{ background:var(--ink); color:#fff; text-align:center; font-size:.92rem; font-weight:600; padding:10px 16px; }
.annc b{ color:var(--gold); }

/* ---- chips / stars ---- */
.chip{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.85rem; padding:7px 14px; border-radius:var(--r-pill); }
.chip-teal{ background:var(--teal-50); color:var(--teal-700); }
.chip-coral{ background:var(--coral-50); color:var(--coral-600); }
.chip-gold{ background:var(--gold-50); color:#8A5A00; }
.stars{ color:var(--gold); letter-spacing:1px; }

/* ---- section ---- */
.section{ padding:104px 0; }
.section.tint-mint{ background:var(--mint); }
.section.tint-cream{ background:var(--cream); }
.section.tint-sky{ background:var(--sky); }
.section-head{ max-width:680px; margin:0 auto 56px; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem, 6vw, 2.9rem); margin:16px 0 14px; }
.section-head p{ color:var(--slate); font-size:clamp(1.02rem, 3.4vw, 1.18rem); }

/* ---- responsive utilities ---- */
/* horizontal-scroll wrapper for wide tables on small screens */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-lg); }
.table-scroll > table{ min-width:560px; }

/* reusable sticky mobile CTA bar (shown <640px) */
.sticky-cta{ display:none; }
@media(max-width:640px){
  .sticky-cta{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60; gap:12px;
    align-items:center; justify-content:space-between; background:#fff; border-top:1px solid var(--line);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -8px 24px rgba(21,38,63,.1); }
  .sticky-cta .sp{ font-family:var(--display); font-weight:800; font-size:1.2rem; line-height:1.1; }
  .sticky-cta .sp small{ display:block; font-weight:600; font-size:.74rem; color:var(--slate); }
  .sticky-cta .btn{ flex:none; }
  body.has-sticky-cta{ padding-bottom:76px; }   /* keep content clear of the bar */
}

@media(max-width:640px){
  .section{ padding:60px 0; }
  .wrap{ padding:0 18px; }
}

/* ---- card ---- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }

/* ---- footer ---- */
.footer{ background:#0E1B2E; color:#A9B7C8; padding:72px 0 32px; }
.footer .grid{ display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:44px; }
.footer h2{ color:#fff; font-family:var(--sans); font-weight:700; font-size:.95rem; letter-spacing:0; margin-bottom:16px; }
.footer a{ display:block; color:#9AAABB; font-size:.96rem; padding:6px 0; transition:color .15s; }
.footer a:hover{ color:#fff; }
.footer .brand{ color:#fff; margin-bottom:14px; }
.footer .desc{ color:#8597A8; font-size:.95rem; max-width:300px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:52px; padding-top:26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.88rem; color:#75899C; }
@media(max-width:760px){ .footer .grid{ grid-template-columns:1fr 1fr; gap:30px; } }

/* ---- reveal ---- */
.reveal{ opacity:0; transform:translateY(18px); animation:rise .75s cubic-bezier(.2,.7,.2,1) forwards; animation-play-state:paused; }
@keyframes rise{ to{ opacity:1; transform:none; } }
.d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}.d5{animation-delay:.37s}.d6{animation-delay:.45s}
@media(prefers-reduced-motion:reduce){ .reveal{ animation:none; opacity:1; transform:none; } }