/* =====================================================================
   LANDING PAGE — public marketing page for "Mathematics for Machine Learning"
   Self-contained. Design tokens live in css/tokens.css (linked before this file).
   ===================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-soft);color:var(--accent-ink)}

.lp-wrap{min-height:100vh}
.lp-section{max-width:1140px;margin:0 auto}

/* ---------- NAV ---------- */
.lp-nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:14px;
  padding:14px 28px;
  background:rgba(238,240,244,.82);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.lp-brand{display:flex;align-items:center;gap:11px}
.lp-glyph{
  width:36px;height:36px;border-radius:9px;flex:none;
  display:grid;place-items:center;
  background:var(--ink);color:#fff;
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;
  letter-spacing:-.02em;
}
.lp-brand .lp-bname{line-height:1.15}
.lp-brand b{font-weight:600;font-size:15px;letter-spacing:-.01em}
.lp-brand span{display:block;font-size:11px;color:var(--muted)}
.lp-nav .lp-spacer{flex:1}
.lp-links{display:flex;align-items:center;gap:26px;font-size:13.5px;font-weight:500}
.lp-links a{color:var(--muted);transition:color .15s}
.lp-links a:hover{color:var(--ink)}

/* ---------- BUTTONS ---------- */
.lp-cta{
  background:var(--accent);color:#fff;border:none;border-radius:10px;
  padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;
  font-family:var(--sans);display:inline-flex;align-items:center;gap:9px;
  transition:background .15s;
}
.lp-cta:hover{background:var(--accent-ink)}
.lp-cta-lg{border-radius:12px;padding:15px 26px;font-size:15px}
.lp-cta .arr{font-size:17px;line-height:1}
.lp-ghost{
  background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;padding:15px 24px;font-size:15px;font-weight:600;cursor:pointer;
  font-family:var(--sans);display:inline-flex;align-items:center;
  transition:border-color .15s,color .15s;
}
.lp-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}

/* ---------- HERO ---------- */
.lp-hero-sec{padding:64px 28px 24px}
.lp-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:center}
.lp-pill{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-soft);border:1px solid #d9d7f6;
  border-radius:99px;padding:6px 13px;
}
.lp-h1{
  font-family:var(--serif);font-weight:500;font-size:60px;line-height:1.02;
  letter-spacing:-.025em;margin:22px 0 0;
}
.lp-h1 em{font-style:italic;color:var(--accent)}
.lp-lede{
  font-family:var(--serif);font-size:20px;line-height:1.55;color:var(--muted);
  max-width:520px;margin:24px 0 0;
}
.lp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.lp-fine{margin-top:22px;font-size:13px;color:var(--faint);line-height:1.5}
.lp-fine b{color:var(--muted);font-weight:600}

/* ---------- FIGURE CARD ---------- */
.lp-figcard{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 0 rgba(20,22,30,.02),0 18px 50px -26px rgba(20,30,80,.4);
}
.lp-figcap{
  display:flex;align-items:center;gap:9px;padding:13px 18px;
  border-bottom:1px solid var(--line-2);
  font-size:12.5px;color:var(--muted);font-weight:500;background:var(--panel-2);
}
.lp-figcap .dot{
  width:7px;height:7px;border-radius:99px;background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);flex:none;
}
.lp-figcap b{color:var(--ink);font-weight:600}
.lp-figcap .hint{margin-left:auto;font-size:11.5px;color:var(--faint);font-style:italic}
.lp-canvas{display:block;width:100%;height:300px;touch-action:none;cursor:grab}
.lp-canvas:active{cursor:grabbing}
.lp-readout{
  display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px 18px;
  font-family:var(--mono);font-size:12.5px;
}
.lp-readout .chip{
  padding:7px 11px;border-radius:7px;background:var(--panel-2);
  border:1px solid var(--line-2);color:var(--muted);
}
.lp-readout .chip.hi{
  background:var(--accent-soft);border-color:#d6d4f7;color:var(--accent-ink);
}
.lp-readout .chip b{color:inherit}
.lp-readout .sec b{color:var(--curve2)}
.lp-readout .tan b{color:var(--accent-ink)}
.lp-readout .gap b{color:var(--ink)}

/* ---------- STATS ---------- */
.lp-stats-sec{padding:34px 28px}
.lp-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.lp-stat{background:var(--panel);padding:24px 22px}
.lp-stat b{
  font-family:var(--sans);font-weight:700;font-size:38px;letter-spacing:-.03em;
  display:block;line-height:1;
}
.lp-stat.accent b{color:var(--accent)}
.lp-stat.amber b{color:var(--ml)}
.lp-stat span{font-size:12.5px;color:var(--muted);margin-top:8px;display:block}

/* ---------- SECTION HEADER ---------- */
.lp-kicker{
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;display:flex;align-items:center;gap:10px;
}
.lp-kicker .rule{width:20px;height:2px;background:var(--accent);border-radius:2px}
.lp-subhead{
  font-family:var(--serif);font-size:18px;color:var(--muted);line-height:1.55;
  margin:12px 0 8px;max-width:620px;
}

/* ---------- THE PATH ---------- */
.lp-path{padding:44px 28px 8px}
.lp-rail{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:22px 0 26px;
  font-family:var(--mono);font-size:12px;color:var(--faint);
}
.lp-rail .start{color:var(--ink);font-weight:600}
.lp-rail .end{color:var(--ml);font-weight:600}
.lp-rail .badge{color:#fff;border-radius:6px;padding:3px 7px}
.lp-rail .badge.ink{background:var(--ink)}
.lp-rail .badge.acc{background:var(--accent)}
.lp-rail .badge.amber{background:var(--ml)}

.lp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.lp-ccard{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
  cursor:pointer;display:flex;flex-direction:column;gap:11px;
  transition:transform .16s,border-color .16s,box-shadow .16s;
}
.lp-ccard:hover{
  transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 18px 36px -24px rgba(40,40,180,.55);
}
.lp-ccard-top{display:flex;align-items:center;gap:12px}
.lp-cbadge{
  font-family:var(--mono);font-weight:600;font-size:13px;color:#fff;
  background:var(--accent);border-radius:8px;width:30px;height:30px;
  display:grid;place-items:center;flex:none;
}
.lp-cbadge.ink{background:var(--ink)}
.lp-cbadge.amber{background:var(--ml)}
.lp-ccard h3{
  font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0;
}
.lp-ccard p{
  font-family:var(--serif);font-size:15px;line-height:1.45;color:var(--muted);
  margin:0;flex:1;
}
.lp-cmeta{
  font-family:var(--mono);font-size:11.5px;color:var(--faint);
  border-top:1px solid var(--line-2);padding-top:11px;
}

/* ---------- HOW IT WORKS ---------- */
.lp-how{padding:52px 28px 8px}
.lp-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.lp-hcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.lp-hnum{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600;margin-bottom:12px}
.lp-hcard h4{font-family:var(--sans);font-size:17px;font-weight:600;margin:0 0 8px}
.lp-hcard p{font-family:var(--serif);font-size:15.5px;line-height:1.5;color:var(--muted);margin:0}

/* ---------- CTA ---------- */
.lp-cta-sec{padding:52px 28px 64px}
.lp-cta-panel{
  background:var(--ink);color:#e9eaef;border-radius:18px;padding:54px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.lp-cta-panel h2{
  font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.08;
  letter-spacing:-.02em;color:#fff;margin:0;
}
.lp-cta-panel h2 em{font-style:italic;color:#8b88ff}
.lp-cta-panel p{
  font-family:var(--serif);font-style:italic;font-size:18px;color:#9aa0ad;
  margin:14px 0 0;max-width:420px;line-height:1.5;
}
.lp-cta-white{
  background:#fff;color:#15171e;border:none;border-radius:12px;padding:16px 30px;
  font-size:15px;font-weight:600;cursor:pointer;font-family:var(--sans);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  transition:background .15s;
}
.lp-cta-white:hover{background:#e9eaef}
.lp-cta-fine{margin-top:24px;font-size:12.5px;color:var(--faint);line-height:1.6}
.lp-cta-fine b{color:var(--muted)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .lp-hero{grid-template-columns:1fr}
  .lp-stats{grid-template-columns:repeat(2,1fr)}
  .lp-how-grid{grid-template-columns:1fr}
  .lp-h1{font-size:46px}
}
@media(max-width:560px){
  .lp-links a{display:none}
  .lp-cta-panel{padding:36px 28px}
  .lp-cta-panel h2{font-size:32px}
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  .lp-ccard,.lp-cta,.lp-ghost,.lp-cta-white,.lp-links a{transition:none}
  .lp-ccard:hover{transform:none}
}