/* ============================================================
   AlphaMath Calc+ design system — soft pastel fintech.

   Structure mirrors the reference: a pale blue-to-mint gradient
   page, a white rounded app frame floating on it, a tinted canvas
   inside that, and generously rounded cards on top.
   ============================================================ */

:root{
  /* --- page --- */
  --grad-1:#cfe1fb;
  --grad-2:#d9e9fa;
  --grad-3:#dff4ec;
  --grad-4:#d3f1e6;

  --frame:#ffffff;          /* the white app frame */
  --canvas-1:#dbe7fc;       /* tinted surface inside the frame */
  --canvas-2:#e0ebfc;
  --canvas-3:#e3f6ee;
  --canvas-4:#d7f2e8;

  /* --- surfaces --- */
  --card:#f0f6ff;           /* the default near-white card */
  --card-2:#e3ecfd;         /* recessed panel inside a card */
  --tint-blue:#c7dafa;      /* the periwinkle panel */
  --tint-blue-2:#dbe8fd;
  --tint-mint:#d0e8dc;      /* the mint panel */
  --tint-mint-2:#e2f1ea;

  /* --- ink --- */
  --ink:#101725;
  --ink-2:#4a5670;
  --ink-3:#606a79;
  --line:#d6e3f8;
  --line-2:#e6eefc;

  /* --- accents --- */
  --brand:#16c493;          /* the logo mint */
  --blue:#3668b4;           /* interactive blue, for text and links */
  --blue-fill:#a9c9f7;      /* filled pill buttons */
  --mint:#147156;
  --pos:#1a9f74;
  --neg:#e0574e;
  --warn:#f0ad3c;
  --focus:#3668b4;

  --mark-frame:#efc7c4;     /* the blush outer frame */
  --mark-screen:#c3b3e0;    /* the lavender screen */
  --mark-glyph:#f8f2e6;     /* the cream alpha */
  --wordmark:#6d2724;       /* the deep maroon of the wordmark */

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --disp:var(--sans);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --r-frame:34px;
  --r-canvas:26px;
  --r:22px;                 /* card radius */
  --r-s:14px;               /* input radius */
  --r-pill:999px;

  --shadow-frame:0 24px 60px -24px rgba(40,70,130,.28);
  --shadow-card:0 2px 10px -4px rgba(40,70,130,.10);
  --shadow-lift:0 14px 32px -14px rgba(40,70,130,.30);
  --maxw:1240px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --grad-1:#101827; --grad-2:#0d1a20; --grad-3:#0e2a26; --grad-4:#0d3a30;
    --frame:#141d2e;
    --canvas-1:#182235; --canvas-2:#152630; --canvas-3:#12352d; --canvas-4:#104036;
    --card:#1b2537;
    --card-2:#212d42;
    --tint-blue:#25334f;  --tint-blue-2:#1f2b41;
    --tint-mint:#1c3a33;  --tint-mint-2:#182f2a;
    --ink:#eaf0fb;
    --ink-2:#a3b1c9;
    --ink-3:#8b96aa;
    --line:#2a3750;
    --line-2:#222d42;
    --brand:#2fd6a6;
    --blue:#7fb0f0;
    --blue-fill:#33507e;
    --mint:#4fcfa4;
    --pos:#4fcfa4;
    --neg:#f2857c;
    --warn:#f5c164;
    --focus:#7fb0f0;
    --mark-frame:#d9a9a5;
    --mark-screen:#9d8ac4;
    --mark-glyph:#fbf6ec;
    --wordmark:#f3ddd9;
    --shadow-frame:0 24px 60px -24px rgba(0,0,0,.7);
    --shadow-card:0 2px 10px -4px rgba(0,0,0,.4);
    --shadow-lift:0 14px 32px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --grad-1:#101827; --grad-2:#0d1a20; --grad-3:#0e2a26; --grad-4:#0d3a30;
  --frame:#141d2e;
  --canvas-1:#182235; --canvas-2:#152630; --canvas-3:#12352d; --canvas-4:#104036;
  --card:#1b2537;
  --card-2:#212d42;
  --tint-blue:#25334f;  --tint-blue-2:#1f2b41;
  --tint-mint:#1c3a33;  --tint-mint-2:#182f2a;
  --ink:#eaf0fb;
  --ink-2:#a3b1c9;
  --ink-3:#8b96aa;
  --line:#2a3750;
  --line-2:#222d42;
  --brand:#2fd6a6;
  --blue:#7fb0f0;
  --blue-fill:#33507e;
  --mint:#4fcfa4;
  --pos:#4fcfa4;
  --neg:#f2857c;
  --warn:#f5c164;
  --focus:#7fb0f0;
  --mark-frame:#d9a9a5;
  --mark-screen:#9d8ac4;
  --mark-glyph:#fbf6ec;
  --wordmark:#f3ddd9;
  --shadow-frame:0 24px 60px -24px rgba(0,0,0,.7);
  --shadow-card:0 2px 10px -4px rgba(0,0,0,.4);
  --shadow-lift:0 14px 32px -14px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  background:
    linear-gradient(135deg,
      var(--grad-1)  0%,
      var(--grad-2) 56%,
      var(--grad-3) 84%,
      var(--grad-4) 100%) fixed;
  color:var(--ink);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

/* Visually hidden but still announced — used for the search live region. */
.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;
}
/* Skip link: off-screen until focused, so keyboard users can jump the nav. */
.skip-link{
  position:absolute;left:50%;top:-60px;transform:translateX(-50%);
  z-index:100;padding:10px 18px;border-radius:0 0 var(--r-s) var(--r-s);
  background:var(--card);color:var(--ink);font:700 14px/1 var(--sans);
  box-shadow:var(--shadow-lift);transition:top .14s ease;
}
.skip-link:focus{top:0;text-decoration:none}
[hidden]{display:none !important}
img,svg{max-width:100%}

/* ---------- the app frame ---------- */
.app{
  max-width:var(--maxw);
  margin:26px auto 34px;
  padding:14px;
  background:var(--frame);
  border-radius:var(--r-frame);
  box-shadow:var(--shadow-frame);
}
.canvas{
  border-radius:var(--r-canvas);
  padding:8px 0 30px;
  /* Anchored to the viewport, not the element: on a long page a
     stretched gradient would push the green far below the fold. */
  background:
    linear-gradient(150deg,
      var(--canvas-1)  0%,
      var(--canvas-2) 58%,
      var(--canvas-3) 85%,
      var(--canvas-4) 100%) fixed;
}

.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 26px}

/* ---------- eyebrow ----------
   Small, coloured, no rule — the reference labels sections plainly. */
.eyebrow{
  display:flex;align-items:center;gap:9px;
  font:700 11.5px/1.3 var(--sans);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--mint);
  margin:0 0 12px;
}
.eyebrow > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ---------- header ---------- */
.site-head{position:relative;z-index:50;padding:8px 0 4px}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:82px}

.logo{display:flex;align-items:center;gap:11px;color:var(--ink);flex:none}
.logo:hover{text-decoration:none}
/* The mark is a tablet: rounded body, screen inset toward the top with a
   chin below it, tilted slightly, and shaded to read as a solid object. */
.logo-mark{
  width:48px;height:48px;flex:none;
  border-radius:15px;
  background:linear-gradient(148deg,
    color-mix(in srgb, var(--mark-frame) 100%, white 16%) 0%,
    var(--mark-frame) 46%,
    color-mix(in srgb, var(--mark-frame) 100%, black 12%) 100%);
  padding:7px 7px 12px;
  transform:rotate(-7deg);
  box-shadow:
    0 6px 16px -6px rgba(150,100,96,.60),
    inset 0 1.5px 0 rgba(255,255,255,.72),
    inset 0 -1.5px 0 rgba(150,100,96,.22);
}
@supports not (background:color-mix(in srgb,red,blue)){
  .logo-mark{background:var(--mark-frame)}
}
.logo-mark > i{
  display:grid;place-items:center;
  width:100%;height:100%;
  border-radius:6px;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--mark-screen) 100%, white 12%) 0%,
    var(--mark-screen) 70%);
  color:var(--mark-glyph);
  font:700 italic 18px/1 var(--serif);
  box-shadow:inset 0 1px 3px rgba(90,60,110,.28);
  padding-bottom:1px;
}
@supports not (background:color-mix(in srgb,red,blue)){
  .logo-mark > i{background:var(--mark-screen)}
}

/* Wordmark stacks: AlphaMath over Calc+ */
.logo-word{
  font:700 20px/1.12 var(--serif);letter-spacing:-.005em;
  color:var(--wordmark);
}
.logo-word b{display:block;font-weight:700;color:var(--wordmark)}

.nav{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav a{
  padding:10px 16px;border-radius:var(--r-pill);white-space:nowrap;
  font:600 14.5px/1 var(--sans);color:var(--ink-2);
}
.nav a:hover{background:rgba(255,255,255,.65);color:var(--ink);text-decoration:none}
:root[data-theme="dark"] .nav a:hover{background:rgba(255,255,255,.07)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav a:hover{background:rgba(255,255,255,.07)}
}

.icon-btn{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  background:var(--card);border:0;border-radius:50%;
  color:var(--ink-2);cursor:pointer;font-size:17px;line-height:1;
  box-shadow:var(--shadow-card);
}
.icon-btn:hover{color:var(--ink)}

/* header-embedded search — the reference's long pill */
.head-search{position:relative;flex:1;max-width:420px;margin-left:10px}
.head-search input{
  width:100%;height:48px;padding:0 18px 0 22px;
  background:var(--card);border:0;border-radius:var(--r-pill);
  color:var(--ink);font:15px/1 var(--sans);
  box-shadow:var(--shadow-card);
}
.head-search input::placeholder{color:var(--ink-3)}
.head-search .mag{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);font-size:17px;pointer-events:none;
}
.head-search .slash{display:none}

/* ---------- search results ---------- */
.results{
  position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:60;
  background:var(--frame);border-radius:var(--r);
  box-shadow:var(--shadow-lift);overflow:hidden;max-height:62vh;overflow-y:auto;
  padding:6px;
}
.results:empty{display:none}
.res{
  display:block;padding:12px 14px;border-radius:var(--r-s);
  color:var(--ink);cursor:pointer;
}
.res:hover,.res.on{background:var(--tint-blue-2);text-decoration:none}
.res-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.res-name{font:700 15px/1.3 var(--sans)}
.res-tag{
  font:700 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--mint);
}
.res-eq{font:13px/1.4 var(--mono);color:var(--ink-3);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-empty{padding:18px 14px;color:var(--ink-3);font-size:14.5px}
.res mark{background:var(--tint-mint);color:inherit;border-radius:4px;padding:0 3px}

/* ---------- hero ---------- */
.hero{padding:30px 0 10px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:26px;align-items:start}
.hero h1{
  font:800 clamp(36px,4.8vw,56px)/1.06 var(--sans);
  letter-spacing:-.035em;
  margin:0 0 18px;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-sub{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin:0 0 26px;max-width:46ch}

.hero-search{position:relative}
.hero-search input{
  width:100%;height:62px;padding:0 24px 0 26px;
  background:var(--card);border:0;border-radius:var(--r-pill);
  color:var(--ink);font:16.5px/1 var(--sans);
  box-shadow:var(--shadow-card);
}
.hero-search input::placeholder{color:var(--ink-3)}
.hero-search input:focus{box-shadow:0 0 0 2px var(--blue-fill), var(--shadow-card)}
.hero-search .mag{
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);font-size:19px;pointer-events:none;
}
.try{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px}
.try span{font:700 11.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.chip{
  display:inline-block;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--card);border:0;
  font:600 13.5px/1.2 var(--sans);color:var(--ink-2);
  box-shadow:var(--shadow-card);
}
.chip:hover{background:var(--tint-blue);color:var(--ink);text-decoration:none}

/* ---------- cards ---------- */
.card{
  background:var(--card);border:0;border-radius:var(--r);
  box-shadow:var(--shadow-card);
}

.fcard{
  display:block;position:relative;
  background:var(--card);border:0;border-radius:var(--r);
  padding:20px 22px 22px;color:var(--ink);
  box-shadow:var(--shadow-card);
  transition:transform .16s ease, box-shadow .16s ease;
}
.fcard:hover{
  text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-lift);
}
.fcard:hover .fcard-name{color:var(--blue)}
.fcard .eyebrow{margin-bottom:10px;padding-right:84px}
.fcard-name{font:700 17px/1.3 var(--sans);margin:0 0 11px;transition:color .16s;letter-spacing:-.012em}
.fcard-eq{
  font:13.5px/1.5 var(--mono);color:var(--ink);
  background:var(--tint-blue-2);border-radius:var(--r-s);
  padding:11px 13px;margin:0 0 12px;
  white-space:nowrap;
  /* horizontal only — stacked fractions can exceed the box by a pixel
     and would otherwise draw a stray vertical scrollbar */
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
}
.fcard-eq::-webkit-scrollbar{display:none}
.fcard-gloss{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0}
.fcard--concept{background:var(--tint-mint-2)}
.fcard--concept .fcard-eq{
  background:transparent;padding:0;white-space:normal;
  font:13.5px/1.55 var(--sans);color:var(--ink-2);
}
.fcard-kind{
  position:absolute;top:20px;right:22px;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--tint-mint);color:var(--mint);
  font:700 9.5px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;
}

.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}

/* ---------- sections ---------- */
.section{padding:38px 0}
.section-head{margin-bottom:24px}
.section-head h2{
  font:800 clamp(23px,2.6vw,31px)/1.15 var(--sans);
  letter-spacing:-.028em;margin:0 0 8px;
}
.section-head p{color:var(--ink-2);font-size:15.5px;margin:0;max-width:62ch}

/* ---------- topic ladder ---------- */
.tier{margin:0 0 46px}
.tier:last-child{margin-bottom:0}
.tier-head{padding:0 0 16px;margin-bottom:24px;border-bottom:1.5px solid var(--line)}
.tier-head h3{
  font:800 clamp(21px,2.4vw,27px)/1.15 var(--sans);
  letter-spacing:-.026em;margin:0 0 7px;
}
.tier-head p{color:var(--ink-2);font-size:15px;margin:0;max-width:62ch}

.topic-block{margin-bottom:36px;scroll-margin-top:24px}
.topic-block:last-child{margin-bottom:0}
.topic-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.topic-head h3,
.topic-head h4{font:700 20px/1.25 var(--sans);letter-spacing:-.02em;margin:0}
.topic-head h4 a{color:var(--ink)}
.topic-head h4 a:hover{color:var(--blue);text-decoration:none}
.topic-head .count{
  font:700 11px/1 var(--sans);color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase;
}
.topic-all{margin-left:auto;font:700 13.5px/1 var(--sans);color:var(--blue);flex:none}
.topic-blurb{color:var(--ink-2);font-size:14.5px;line-height:1.55;margin:0 0 16px;max-width:70ch}
.more{margin:16px 0 0}
.more a{font:700 13.5px/1 var(--sans)}

/* ---------- previous / next ---------- */
.pager{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:44px;padding-top:24px;border-top:1.5px solid var(--line);
}
.pager a{display:block;max-width:46%;font:700 17px/1.3 var(--sans);letter-spacing:-.018em;color:var(--ink)}
.pager a:hover{color:var(--blue);text-decoration:none}
.pager a span{
  display:block;margin-bottom:6px;
  font:700 10.5px/1 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--mint);
}
.pager .pager-next{text-align:right;margin-left:auto}

/* ---------- reading your answer ---------- */
.read-panel{background:var(--tint-mint-2)}
ul.reads{margin:0;padding-left:0;list-style:none}
ul.reads li{
  position:relative;padding-left:26px;margin-bottom:12px;
  font-size:15px;line-height:1.65;color:var(--ink-2);
}
ul.reads li:last-child{margin-bottom:0}
ul.reads li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;border-radius:50%;
  background:var(--mint);
}
ul.reads strong{color:var(--ink);font-weight:700}

/* ---------- key terms ---------- */
dl.defs{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px 22px}
dl.defs dt{font:700 13.5px/1.55 var(--sans);color:var(--ink);white-space:nowrap}
dl.defs dd{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
dl.defs dd em{font-style:normal;font-family:var(--mono);font-size:.92em;color:var(--ink)}

/* ---------- download cards ---------- */
.dcard{
  display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow-card);
}
.dcard-top{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.dcard-icon{
  width:44px;height:44px;flex:none;border-radius:14px;
  display:grid;place-items:center;
}
.dcard-icon svg{width:22px;height:22px}
.dcard-icon--xlsx{background:var(--tint-mint);color:var(--mint)}
.dcard-icon--pdf{background:rgba(224,87,78,.14);color:var(--neg)}
.dcard-icon--notes{background:var(--tint-blue);color:var(--blue)}
.dcard-meta{
  font:700 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);
}
.dcard h4{font:700 17px/1.3 var(--sans);letter-spacing:-.014em;margin:0 0 9px}
.dcard p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
.dcard-rel{font-size:13px !important;color:var(--ink-3) !important}
.dbtn{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  margin-top:auto;padding:11px 20px;border-radius:var(--r-pill);
  background:var(--blue-fill);color:var(--ink);
  font:700 14px/1 var(--sans);
}
.dbtn svg{width:17px;height:17px}
.dbtn:hover{text-decoration:none;filter:brightness(.96)}
.dempty{
  background:var(--tint-blue-2);border-radius:var(--r);
  padding:26px;text-align:center;
  font-size:14.5px;color:var(--ink-3);
}

/* ---------- notice ---------- */
.notice{
  background:var(--tint-mint-2);border:0;border-radius:var(--r);
  padding:16px 20px;font-size:14.5px;line-height:1.6;color:var(--ink-2);
  margin:0 0 26px;
}
.notice strong{color:var(--ink);font-weight:700}

/* ---------- formula page ---------- */
.fpage{padding:20px 0 40px}
.crumbs{
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  font:700 11.5px/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:18px;
}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--blue)}
.crumb-diff{
  margin-left:auto;padding:5px 12px;border-radius:var(--r-pill);
  background:var(--tint-mint);color:var(--mint);border:0;
  font:700 10px/1.4 var(--sans);letter-spacing:.07em;
}
.fpage h1{
  font:800 clamp(31px,4vw,46px)/1.08 var(--sans);
  letter-spacing:-.034em;margin:0 0 14px;text-wrap:balance;
}
.fpage-gloss{font-size:17.5px;line-height:1.6;color:var(--ink-2);margin:0 0 26px;max-width:62ch}

.eq-hero{
  background:var(--tint-blue);border:0;border-radius:var(--r);
  padding:32px 26px;margin:0 0 20px;overflow-x:auto;
  display:flex;justify-content:center;
}
.eq-hero .eq{font-size:20px}

.panel{
  background:var(--card);border:0;border-radius:var(--r);
  padding:24px 26px;margin:0 0 18px;
  box-shadow:var(--shadow-card);
}
.panel > h2{font:700 17px/1.25 var(--sans);letter-spacing:-.018em;margin:0 0 18px}

.cols{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:18px;align-items:start}

/* ---------- fields ---------- */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.field label{display:block;font:600 13.5px/1.4 var(--sans);margin-bottom:7px;color:var(--ink)}
.field .hint{display:block;font-weight:400;color:var(--ink-3);font-size:12.5px;margin-top:3px}
.field .row{display:flex;align-items:stretch}
.field input,.field select{
  width:100%;padding:12px 14px;
  border:0;border-radius:var(--r-s);
  background:var(--tint-blue-2);color:var(--ink);
  font:15px/1.3 var(--mono);
}
.field select{font-family:var(--sans);font-size:14.5px;font-weight:600}
.field textarea{
  width:100%;min-height:96px;padding:12px 14px;resize:vertical;
  border:0;border-radius:var(--r-s);
  background:var(--tint-blue-2);color:var(--ink);font:14px/1.6 var(--mono);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--blue);outline-offset:-2px;
}
.field .row input{border-top-right-radius:0;border-bottom-right-radius:0}
.field .suffix{
  display:grid;place-items:center;padding:0 14px;min-width:44px;
  border:0;border-radius:0 var(--r-s) var(--r-s) 0;
  background:var(--tint-blue);color:var(--ink-2);
  font:700 13px/1 var(--sans);
}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.tab{
  padding:11px 20px;border:0;background:var(--card);
  color:var(--ink-2);border-radius:var(--r-pill);cursor:pointer;
  font:600 14px/1.2 var(--sans);
  box-shadow:var(--shadow-card);
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--blue-fill);color:var(--ink)}

/* ---------- result ---------- */
.result{padding-bottom:18px;margin-bottom:18px;border-bottom:1.5px solid var(--line-2)}
.result:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.result-val{
  font:800 clamp(36px,5.2vw,52px)/1 var(--sans);
  letter-spacing:-.04em;display:block;
  font-variant-numeric:tabular-nums;
}
.result-val.pos{color:var(--pos)}
.result-val.neg{color:var(--neg)}
.result-lab{
  display:block;margin-top:9px;
  font:700 11.5px/1.35 var(--sans);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);
}
.result-sec{display:flex;flex-wrap:wrap;gap:24px;margin-top:4px}
.result-sec div{min-width:0}
.result-sec .v{font:800 21px/1.2 var(--sans);font-variant-numeric:tabular-nums;display:block;letter-spacing:-.02em}
.result-sec .l{font:700 10.5px/1.35 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:4px}

.steps{
  background:var(--tint-blue-2);border-radius:var(--r-s);
  padding:15px 17px;margin-top:18px;
  font:13px/1.95 var(--mono);color:var(--ink);
  overflow-x:auto;
}
.steps div{white-space:nowrap}
.steps .lead{color:var(--ink-3)}

.err{
  color:var(--neg);font-size:14.5px;line-height:1.55;margin:0;
  padding:14px 16px;background:rgba(224,87,78,.10);border-radius:var(--r-s);
}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:11px 8px;text-align:right;border-bottom:1px solid var(--line-2)}
th:first-child,td:first-child{text-align:left}
th{
  font:700 10.5px/1.35 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);border-bottom-color:var(--line);
}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
tr.total td{font-weight:700;border-bottom:0}
tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;max-width:100%}

/* ---------- prose ---------- */
.prose p{margin:0 0 14px;font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:700}
.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin-bottom:8px}
.prose li::marker{color:var(--blue)}
.prose li:last-child{margin-bottom:0}
.prose code{font:13.5px/1.4 var(--mono);background:var(--tint-blue-2);padding:2px 6px;border-radius:6px;color:var(--ink)}
.prose .lede{
  font-size:17px;line-height:1.62;color:var(--ink);
  background:var(--tint-blue-2);border-radius:var(--r-s);
  padding:16px 18px;margin:0;
}
.watch li::marker{content:"! ";font-weight:800;color:var(--neg)}

.note{color:var(--ink-3);font-size:13.5px;line-height:1.62;margin:18px 0 0}

/* ---------- footer ---------- */
.site-foot{
  margin-top:12px;padding:26px 0 8px;
  font-size:13.5px;line-height:1.7;color:var(--ink-3);
}
.site-foot .wrap{display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between}
.site-foot p{margin:0;max-width:60ch}
.site-foot a{color:var(--blue)}

/* ---------- tests page ---------- */
.tally{display:flex;gap:28px;margin-bottom:24px;flex-wrap:wrap}
.tally div{min-width:76px}
.tally .v{font:800 36px/1 var(--sans);display:block;letter-spacing:-.03em}
.tally .l{font:700 10.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:8px}
.pass{color:var(--pos)} .fail{color:var(--neg)}
td.st{font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}

/* ---------- overflow containment ----------
   Grid and flex children default to min-width:auto, so a nowrap child
   would push the page wider than the viewport despite its own
   overflow-x:auto. Resetting min-width lets them scroll internally. */
.cols > *,.grid-cards > *,.fields > *,.panel,.field,.field .row{min-width:0}
.field .row input{min-width:0}
.steps,.eq-hero,.fcard-eq{max-width:100%}
.panel table{min-width:0}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .cols{grid-template-columns:minmax(0,1fr)}
  .head-search{display:none}
}
@media (max-width:660px){
  .app{margin:10px;padding:8px;border-radius:26px}
  .canvas{border-radius:20px;padding:4px 0 22px}
  .wrap,.wrap-narrow{padding:0 16px}
  .hero{padding:18px 0 4px}
  .site-head .wrap{height:72px;gap:10px}
  .nav a{padding:9px 11px;font-size:13.5px}
  .grid-cards{grid-template-columns:minmax(0,1fr)}
  .panel{padding:19px}
  .eq-hero{justify-content:flex-start;padding:22px 18px}
  .logo-word{font-size:17px}
  .logo-mark{width:42px;height:42px;padding:6px 6px 10px;border-radius:13px}
  .pager a{max-width:100%}
  .topic-all{margin-left:0;width:100%}
  dl.defs{grid-template-columns:minmax(0,1fr);gap:4px 0}
  dl.defs dt{margin-top:12px}
  dl.defs dt:first-child{margin-top:0}
}

/* ---------- very narrow ----------
   Logo plus a three-item nav exceeds a 375px viewport and pushes the
   whole page sideways. Tighten the header rather than letting it wrap. */
@media (max-width:480px){
  .wrap,.wrap-narrow{padding:0 12px}
  .site-head .wrap{gap:6px}
  .nav{gap:2px}
  .nav a{padding:7px 7px;font-size:12.5px}
  .logo{min-width:0}
  .logo-word{font-size:15.5px}
  .logo-mark{width:36px;height:36px;padding:5px 5px 9px;border-radius:11px}
  .icon-btn{width:34px;height:34px}
}

/* ---------- 320px and below ----------
   The smallest phones still in use (iPhone SE, older Android). The nav
   is the binding constraint, so it drops its labels to icons-only width. */
@media (max-width:380px){
  .app{margin:6px;padding:6px;border-radius:20px}
  .wrap,.wrap-narrow{padding:0 10px}
  .site-head .wrap{gap:4px;height:64px}
  .nav{gap:0}
  .nav a{padding:6px 5px;font-size:11.5px;letter-spacing:-.01em}
  .logo-word{font-size:13.5px}
  .logo-mark{width:30px;height:30px;padding:4px 4px 7px;border-radius:9px}
  .icon-btn{width:28px;height:28px;font-size:14px}
  .hero h1{font-size:30px;letter-spacing:-.02em}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .fcard:hover{transform:none}
}