@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
   LearniFlex 2.0 — Brand skin
   Neutral grotesque (Hanken Grotesk, a Lausanne-style face per
   the antimetal.com reference) + DM Mono for technical labels.
   Loaded AFTER each page's inline <style>; redefines the shared
   design tokens so the whole site re-skins at once, then layers
   targeted component overrides on top.
   ============================================================ */

:root{
  /* ---- Type: one clean grotesque for display + body, mono accents ---- */
  --ff-h:'Hanken Grotesk',system-ui,sans-serif;
  --ff-b:'Hanken Grotesk',system-ui,sans-serif;
  --ff-m:'DM Mono',ui-monospace,monospace;
  --ff-d:'Hanken Grotesk',system-ui,sans-serif;

  /* ---- Surfaces: clean white page, subtle gray bands ---- */
  --night:#ffffff;     /* body / page bg */
  --deep:#f3f3f3;
  --surface:#ffffff;
  --card:#ffffff;
  --lift:#f9f9f9;
  --tint:#e8f9fe;

  /* ---- Borders ---- */
  --rim:#e7e7e7;
  --rim-hi:#d4d4d4;

  /* ---- Accent (cyan) — already the site teal ---- */
  --teal:#04baea;
  --teal2:#0299c4;
  --t10:rgba(4,186,234,.10);
  --t20:rgba(4,186,234,.22);

  /* ---- Ink: near-black headings, gray body ---- */
  --navy:#121417;
  --navy2:#121417;
  --navy3:#121417;
  --snow:#121417;     /* headings */
  --fog:#54585e;      /* body copy */
  --ghost:#6b7077;    /* meta */
  --void:#9aa0a8;     /* faint labels */

  /* ---- Radii: pills for controls, generous cards ---- */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px;

  --shadow-sm:0 1px 3px rgba(18,20,23,.05),0 0 0 1px rgba(18,20,23,.04);
  --shadow-md:0 4px 18px rgba(18,20,23,.07);
  --shadow-lg:0 12px 40px rgba(18,20,23,.10);
  --shadow-xl:0 24px 64px rgba(18,20,23,.14);
}

body{font-family:var(--ff-b);color:var(--fog);background:var(--night);font-weight:400;-webkit-font-smoothing:antialiased;letter-spacing:-.006em}

/* ============================================================
   TYPE — Lausanne-style grotesque: tight, neutral display tracking
   ============================================================ */
.h1,.h2,.h3,.hh1,.hero h1,.sec-top h2,.display,[class*="hh1"],
h1,h2,h3{
  font-family:var(--ff-h);
  font-weight:700;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.h1,.hh1,.hero h1,.display{letter-spacing:-.035em;font-weight:700}
.eyebrow,.hk,.w-num,.pl,.dash-sl,.ft-name,.drop-section-label{
  font-feature-settings:"tnum" 1;
}

/* ============================================================
   SIGNATURE — cyan highlight mark on headline emphasis
   ============================================================ */
/* shared paint */
.h1 em,.h2 em,.h3 em,.hh1 em,.hero h1 em,.sec-top h2 em,
[class*="hh1"] em,.cta-grid h2 em{
  background:var(--teal);
  color:#0a0c0e !important;
  font-style:normal;
  border-radius:.26em;
  padding:.02em .22em .08em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  text-shadow:none !important;
  line-height:1.18;
}
/* mid-sentence / section headings: inline mark */
.h1 em,.h2 em,.h3 em,.sec-top h2 em,.cta-grid h2 em{
  display:inline !important;
  margin:0 -.02em;
}
/* hero headline: highlighted phrase sits on its own shrink-wrapped line */
.hh1 em,.hero h1 em{
  display:block !important;
  width:fit-content;
  max-width:100%;
  margin-top:.18em;
}

/* ============================================================
   BUTTONS — pill, black primary, cyan & ghost variants
   ============================================================ */
.btn,.btn-sm{
  border-radius:9999px !important;
  font-family:var(--ff-b);
  font-weight:600;
  letter-spacing:0;
}
.btn-solid{
  background:#121417 !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 2px 10px rgba(18,20,23,.16) !important;
}
.btn-solid:hover{
  background:#2c2f34 !important;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(18,20,23,.22) !important;
}
/* Cyan accent button (opt-in via .btn-accent) */
.btn-accent{
  background:var(--teal) !important;
  color:#0a0c0e !important;
  border:none !important;
  box-shadow:0 2px 10px rgba(4,186,234,.28) !important;
}
.btn-accent:hover{background:var(--teal2) !important;transform:translateY(-2px)}
.btn-rim{
  background:#fff !important;
  color:#121417 !important;
  border:1.5px solid var(--rim-hi) !important;
}
.btn-rim:hover{border-color:#121417 !important;color:#121417 !important;background:#fafafa !important}
.btn-ghost{background:transparent !important;color:#121417 !important;border:none !important}
.btn-ghost:hover{color:var(--teal2) !important}
/* White outline button used on dark CTA band */
.btn-outline-w{border-radius:9999px !important}

/* ============================================================
   KICKERS / EYEBROWS — flat mono label + cyan pulse dot
   ============================================================ */
.eyebrow{
  background:transparent !important;
  border:none !important;
  color:var(--ghost) !important;
  font-family:var(--ff-m) !important;
  font-weight:500 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase;
  padding:0 !important;
  font-size:.7rem !important;
}
.eyebrow .dot{background:var(--teal) !important}

/* ============================================================
   NAV — clean white bar, brand fonts
   ============================================================ */
#nav{background:rgba(255,255,255,.88) !important;border-bottom:1px solid var(--rim)}
#nav.solid{background:rgba(255,255,255,.96) !important;box-shadow:0 1px 0 var(--rim),0 6px 24px rgba(18,20,23,.05) !important}
.nl>li>a,.nl>li>button{font-family:var(--ff-b) !important;font-weight:500 !important;color:#121417 !important}
.nl>li>a:hover,.nl>li>button:hover{color:var(--teal2) !important;background:var(--t10) !important}
.nav-login{color:#121417 !important;font-weight:500 !important}
.mega-h{font-family:var(--ff-h) !important}

/* ============================================================
   CARDS — white, hairline border, cyan hover
   ============================================================ */
.wc,.feature-card,.product-card,.stat-card,.pc,.prod-card{
  border-radius:var(--r-xl);
}
.wc:hover,.prod-card:hover{border-color:var(--teal) !important}

/* ============================================================
   DARK SECTIONS — near-black instead of navy
   ============================================================ */
#cta{
  background:radial-gradient(ellipse at 78% 12%,rgba(4,186,234,.20),transparent 58%),
             linear-gradient(135deg,#16181c 0%,#0c0d0f 100%) !important;
}
footer{background:#0c0d0f !important;color:rgba(255,255,255,.62) !important}
footer .logo{color:#fff !important}
footer .logo .ac{color:var(--teal) !important}

/* CTA band buttons: keep cyan accent prominent on black */
#cta .btn-solid{background:var(--teal) !important;color:#0a0c0e !important;box-shadow:0 2px 14px rgba(4,186,234,.34) !important}
#cta .btn-solid:hover{background:#fff !important;color:#0a0c0e !important}

/* ============================================================
   HERO — crisp type on white (text-shadows were for the old video)
   ============================================================ */
.hh1,.hh1 em,.hs{text-shadow:none !important}

/* Product / solution page heroes: the highlighted phrase sits on its own
   line after a <br>. Render it as a block so the headline reliably reserves
   its full height when the phrase wraps to 2+ lines (fixes the body copy
   overlapping the last headline line on long emphases like Empower). */
.core-hero-grid h1 em{display:block;line-height:1.08;margin-top:.04em}

/* ============================================================
   ICON SYSTEM — base svg sizing for the shared nav/footer.
   Matches index.html's values so pages that already define these
   are unaffected; pages that lacked them (pricing, resources)
   stop ballooning their <svg class="ic"> to default size.
   ============================================================ */
.ic{display:inline-block;width:20px;height:20px;flex-shrink:0;stroke-width:1.6;
  stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ic-sm{width:16px;height:16px;stroke-width:1.7}
.ic-lg{width:28px;height:28px;stroke-width:1.5}
.ic-xl{width:40px;height:40px;stroke-width:1.4}
.btn .ic{width:18px;height:18px}
.hbg svg{width:20px;height:20px}

/* ============================================================
   SIGN IN — dropdown (Admin / Learner) on the right of the nav
   ============================================================ */
.signin-drop{position:relative}
.signin-drop .nav-login{display:inline-flex;align-items:center;gap:6px}
.signin-drop .chev{width:13px;height:13px;opacity:.6;transition:transform .22s}
.signin-drop.open .chev{transform:rotate(180deg)}
.signin-drop .drop{left:auto;right:0;transform:translateY(-6px);min-width:236px}
.signin-drop.open .drop{transform:translateY(0)}
@media(max-width:960px){.signin-drop{display:none}}

/* ============================================================
   FOCUS / misc
   ============================================================ */
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}