/* ==========================================================================
   GraphCalc — Shared Stylesheet (single source of truth)
   Design system extracted from the approved Claude Design homepage.
   Master reference — all pages reuse these tokens & components. No per-page CSS.
   Sections: Tokens · Reset · Base · Buttons · Header/Nav · Hero · Plot card
             Trust · Section heads · Tools · Example · Why · Learn · FAQ
             Authors · CTA · Footer · Responsive
   ========================================================================== */
:root{
  /* — warm paper & ink neutrals — */
  --paper:      oklch(98.4% 0.008 84);
  --paper-2:    oklch(96.1% 0.014 82);
  --card:       oklch(99.4% 0.005 84);
  --ink:        oklch(26% 0.021 55);
  --ink-2:      oklch(43% 0.02 58);
  --ink-3:      oklch(51% 0.017 60);
  --line:       oklch(90% 0.013 82);
  --line-2:     oklch(84% 0.018 80);

  /* — brand: pine + honey — */
  --brand:      oklch(45% 0.092 168);
  --brand-2:    oklch(38% 0.084 168);
  --brand-bright: oklch(54% 0.10 168);
  --brand-tint: oklch(95% 0.028 168);
  --gold:       oklch(74% 0.115 76);
  --gold-2:     oklch(64% 0.115 72);
  --gold-tint:  oklch(95% 0.038 82);

  /* — graph accents — */
  --c-coral:    oklch(63% 0.155 30);
  --c-coral-t:  oklch(95% 0.04 34);
  --c-blue:     oklch(58% 0.115 244);
  --c-blue-t:   oklch(95% 0.03 244);
  --c-violet:   oklch(56% 0.14 300);
  --c-violet-t: oklch(95% 0.035 300);
  --c-teal:     oklch(58% 0.09 200);
  --c-teal-t:   oklch(95% 0.03 200);

  /* — type — */
  --font-serif:"Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-hero: clamp(2.5rem, 1.45rem + 4.5vw, 4.35rem);
  --fs-h2:   clamp(1.85rem, 1.25rem + 2.6vw, 2.85rem);
  --fs-h3:   1.3rem;
  --fs-lead: clamp(1.08rem, 1.0rem + .5vw, 1.28rem);
  --fs-body: 1.0625rem;
  --fs-sm:   .9375rem;
  --fs-xs:   .8125rem;

  /* — spacing rhythm (4/8/12/16/24/32/48/64/96) — */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
  --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-24:96px;

  /* — radius & shadow — */
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-1: 0 1px 2px rgba(45,38,26,.06), 0 3px 8px rgba(45,38,26,.05);
  --sh-2: 0 6px 18px rgba(45,38,26,.08), 0 18px 40px rgba(45,38,26,.07);
  --sh-lg:0 12px 30px rgba(45,38,26,.10), 0 34px 64px rgba(45,38,26,.10);

  --container: 1180px;
}

/* — reset — */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.6;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0; list-style:none}
img,svg{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none; transition:color .18s ease}
a:hover{color:var(--brand-2)}
strong{font-weight:700; color:var(--ink)}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}
::selection{background:var(--gold-tint); color:var(--ink)}

.container{width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px)}
.section{padding-block:clamp(64px,8vw,96px)}
.eyebrow{font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--brand);
  display:inline-flex; align-items:center; gap:8px; margin:0 0 var(--sp-4)}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none}
.skip-link{position:absolute; left:-999px; top:8px; z-index:200; background:var(--brand);
  color:#fff; padding:10px 16px; border-radius:var(--r-pill)}
.skip-link:focus{left:16px}

/* — screen-reader-only utility — */
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* — breadcrumb (used on inner pages) — */
.breadcrumb-bar{background:var(--paper); border-bottom:1px solid var(--line)}
.breadcrumb-bar .breadcrumb{padding-block:var(--sp-3)}
.breadcrumb{padding-block:var(--sp-4); font-family:var(--font-mono); font-size:var(--fs-xs)}
.breadcrumb ol{display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--ink-3)}
.breadcrumb li{display:inline-flex; align-items:center; gap:8px}
.breadcrumb li:not(:last-child)::after{content:"/"; color:var(--line-2)}
.breadcrumb a{color:var(--ink-3)}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb [aria-current="page"]{color:var(--ink)}

/* — buttons — */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-body); line-height:1;
  padding:14px 22px; min-height:48px; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease}
.btn .arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(3px)}
.btn-lg{padding:16px 28px; min-height:54px; font-size:1.08rem}
.btn-sm{padding:10px 18px; min-height:42px; font-size:var(--fs-sm)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--brand-2); color:#fff; transform:translateY(-2px); box-shadow:var(--sh-2)}
.btn-secondary{background:var(--card); color:var(--ink); border-color:var(--line-2)}
.btn-secondary:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-2px)}

/* — header / nav — */
.site-header{position:sticky; top:0; z-index:100;
  background:color-mix(in oklab, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line)}
.header-inner{position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-6); min-height:72px}
.brand{display:inline-flex; align-items:center; gap:11px; color:var(--ink); font-weight:600}
.brand:hover{color:var(--ink)}
.brand-mark{width:38px; height:38px; border-radius:11px; flex:none;
  background:var(--brand-tint); border:1px solid color-mix(in oklab, var(--brand) 22%, var(--line));
  display:grid; place-items:center; box-shadow:var(--sh-1)}
.brand-mark svg{width:30px; height:30px}
.brand-name{font-family:var(--font-serif); font-weight:700; font-size:1.42rem; letter-spacing:-.01em}
.brand-name-accent{color:var(--brand)}
.site-nav{display:flex; align-items:center; gap:var(--sp-2)}
.site-nav>a{padding:10px 14px; border-radius:var(--r-sm); color:var(--ink-2); font-weight:500; font-size:var(--fs-sm)}
.site-nav>a:hover{color:var(--ink); background:var(--paper-2)}
.site-nav>a[aria-current="page"]{color:var(--brand); background:var(--brand-tint)}
.site-nav .nav-cta{color:#fff; margin-left:6px}
.site-nav .nav-cta:hover{color:#fff; background:var(--brand-2)}
.site-nav .nav-cta[aria-current="page"]{color:#fff}
/* Guides hover-expand dropdown */
.nav-guides{position:relative; display:flex; align-items:center}
.nav-guides-trigger{padding:10px 14px; border-radius:var(--r-sm); color:var(--ink-2); font-weight:500; font-size:var(--fs-sm); display:inline-flex; align-items:center; gap:5px; cursor:pointer}
.nav-guides-trigger:hover{color:var(--ink); background:var(--paper-2)}
.nav-guides-trigger[aria-current="page"]{color:var(--brand); background:var(--brand-tint)}
.nav-caret{width:10px; height:6px; transition:transform .2s ease}
.nav-guides:hover .nav-caret,.nav-guides:focus-within .nav-caret{transform:rotate(180deg)}
.nav-guides-menu{position:absolute; top:calc(100% + 8px); right:0; min-width:210px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:6px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:60}
.nav-guides-menu::before{content:""; position:absolute; top:-8px; left:0; right:0; height:8px}
.nav-guides:hover .nav-guides-menu,.nav-guides:focus-within .nav-guides-menu{opacity:1; visibility:visible; transform:translateY(0)}
.nav-guides-menu a{padding:10px 12px; border-radius:var(--r-sm); color:var(--ink-2); font-weight:500; font-size:var(--fs-sm); white-space:nowrap}
.nav-guides-menu a:hover{color:var(--ink); background:var(--paper-2)}
.nav-toggle{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.hamburger{display:none; width:46px; height:46px; border-radius:var(--r-sm); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid var(--line-2); background:var(--card)}
.hamburger span{width:20px; height:2px; border-radius:2px; background:var(--ink); transition:transform .22s ease, opacity .2s ease}
.nav-toggle:focus-visible + .hamburger{outline:2px solid var(--brand); outline-offset:3px}
.nav-toggle:checked + .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked + .hamburger span:nth-child(2){opacity:0}
.nav-toggle:checked + .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* — hero — */
.hero{padding-block:clamp(48px,6.5vw,88px) clamp(56px,7vw,96px);
  background:
    radial-gradient(1100px 520px at 85% -10%, var(--gold-tint), transparent 60%),
    radial-gradient(900px 480px at 0% 0%, var(--brand-tint), transparent 55%);}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero-title{font-family:var(--font-serif); font-weight:700; font-size:var(--fs-hero);
  line-height:1.04; letter-spacing:-.021em; text-wrap:balance; margin-bottom:var(--sp-6)}
.hero-title em{font-style:italic; color:var(--brand);
  text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:.07em; text-underline-offset:.1em}
.hero-lead{font-size:var(--fs-lead); color:var(--ink-2); max-width:34ch; text-wrap:pretty; margin-bottom:var(--sp-8)}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-6)}
.hero-note{font-size:var(--fs-sm); color:var(--ink-3); display:flex; align-items:center; gap:9px}
.hero-note::before{content:""; width:26px; height:1.5px; background:var(--line-2)}

/* — plot card (hero + example) — */
.plot-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); overflow:hidden; transform:rotate(-.6deg); transition:transform .3s ease}
.hero-visual{perspective:1000px}
.plot-card:hover{transform:rotate(0deg)}
.plot-card--sm{transform:none} .plot-card--sm:hover{transform:none}
.plot-card-bar{display:flex; align-items:center; gap:7px; padding:12px 16px;
  background:var(--paper-2); border-bottom:1px solid var(--line)}
.tl-dot{width:11px; height:11px; border-radius:50%; background:var(--line-2)}
.tl-dot:nth-child(1){background:var(--c-coral)} .tl-dot:nth-child(2){background:var(--gold)} .tl-dot:nth-child(3){background:var(--c-teal)}
.plot-card-title{margin-left:8px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-3); letter-spacing:.02em}
.plot-stage{background:var(--card)}
.plot-svg{width:100%; height:auto; display:block}
.plot-chips{display:flex; flex-wrap:wrap; gap:var(--sp-2); padding:14px 16px; border-top:1px solid var(--line); background:var(--paper)}
.chip{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink); padding:6px 11px;
  border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--card); display:inline-flex; gap:7px; align-items:center}
.chip-key{font-weight:600}
.chip-coral{border-color:color-mix(in oklab, var(--c-coral) 40%, var(--line-2)); background:var(--c-coral-t)} .chip-coral .chip-key{color:var(--c-coral)}
.chip-blue{border-color:color-mix(in oklab, var(--c-blue) 40%, var(--line-2)); background:var(--c-blue-t)} .chip-blue .chip-key{color:var(--c-blue)}

/* grid + curve strokes shared */
.grid-minor{fill:none; stroke:var(--line); stroke-width:1}
.axis{stroke:var(--line-2); stroke-width:1.6}
.axis-txt{font-family:var(--font-mono); font-size:13px; fill:var(--ink-3)}
.curve-coral{fill:none; stroke:var(--c-coral); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round}
.curve-blue{fill:none; stroke:var(--c-blue); stroke-width:3.4; stroke-linecap:round}
.curve-violet{fill:none; stroke:var(--c-violet); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round}
.trace-line{stroke:var(--ink-3); stroke-width:1.3; stroke-dasharray:4 5}
.pt-ring{fill:var(--card); stroke:var(--c-coral); stroke-width:3}
.pt-core{fill:var(--c-coral)}
.pulse{transform-origin:center; transform-box:fill-box; animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35; r:13} 50%{opacity:0; r:20}}

/* — trust strip — */
.trust{padding-block:var(--sp-8)}
.trust-inner{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--sp-6);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,3vw,30px) clamp(20px,4vw,44px); box-shadow:var(--sh-1)}
.trust-stat{display:flex; flex-direction:column; gap:3px; text-align:center; min-width:120px}
.trust-num{font-family:var(--font-serif); font-weight:700; font-size:1.55rem; color:var(--brand); letter-spacing:-.01em}
.trust-num--sm{font-size:1.12rem; color:var(--ink)}
.trust-label{font-size:var(--fs-sm); color:var(--ink-3)}
.trust-stat--wide{text-align:left; border-left:1px solid var(--line); padding-left:var(--sp-6); min-width:220px}
.trust-div{width:1px; height:40px; background:var(--line)}

/* — section heads — */
.section-head{max-width:56ch; margin:0 auto clamp(40px,5vw,60px); text-align:center}
.section-head--left{text-align:left; margin-inline:0}
.section-title{font-family:var(--font-serif); font-weight:700; font-size:var(--fs-h2);
  line-height:1.1; letter-spacing:-.018em; text-wrap:balance; margin-bottom:var(--sp-4)}
.section-title em{font-style:italic; color:var(--brand)}
.section-sub{font-size:var(--fs-lead); color:var(--ink-2); text-wrap:pretty}
.section-head:not(.section-head--left) .eyebrow{display:inline-flex}

/* — tools grid — */
.tools{background:var(--paper-2)}
.tool-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6)}
.tool-card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-6) var(--sp-6); box-shadow:var(--sh-1); overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.tool-card::before{content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--accent); opacity:.9}
.tool-card:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:color-mix(in oklab, var(--accent) 40%, var(--line))}
.tool-icon{width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  color:var(--accent); background:var(--accent-t); border:1px solid color-mix(in oklab, var(--accent) 24%, var(--line)); margin-bottom:var(--sp-6)}
.tool-icon svg{width:34px; height:34px}
.tool-name{font-family:var(--font-serif); font-weight:700; font-size:1.28rem; margin-bottom:var(--sp-2)}
.tool-desc{font-size:var(--fs-sm); color:var(--ink-2); text-wrap:pretty; margin-bottom:var(--sp-4); min-height:2.8em}
.tool-eq{display:inline-block; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 11px}
.tool--coral{--accent:var(--c-coral); --accent-t:var(--c-coral-t)}
.tool--violet{--accent:var(--c-violet); --accent-t:var(--c-violet-t)}
.tool--teal{--accent:var(--c-teal); --accent-t:var(--c-teal-t)}
.tool--blue{--accent:var(--c-blue); --accent-t:var(--c-blue-t)}

/* — worked example — */
.example-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center}
.inline-eq{font-family:var(--font-mono); font-size:.92em; background:var(--gold-tint);
  border:1px solid color-mix(in oklab, var(--gold) 30%, var(--line)); border-radius:6px; padding:2px 7px; color:var(--ink); white-space:nowrap}
.example-points{display:flex; flex-direction:column; gap:var(--sp-4); margin:var(--sp-6) 0}
.example-points li{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3); font-size:var(--fs-body); color:var(--ink-2); text-wrap:pretty}
.pt-dot{width:14px; height:14px; border-radius:50%; margin-top:5px; flex:none; border:3px solid}
.pt-vertex{border-color:var(--c-coral)} .pt-min{border-color:var(--brand)} .pt-root{border-color:var(--c-violet)}
.example-try{font-size:var(--fs-sm); color:var(--ink-2); background:var(--brand-tint);
  border-left:3px solid var(--brand); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:14px 16px; margin-bottom:var(--sp-6); text-wrap:pretty}
.anno{font-family:var(--font-mono); font-size:12.5px; fill:var(--ink-2)}
.anno-sym{stroke:var(--brand); stroke-width:1.4; stroke-dasharray:4 4}

/* — why features — */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px)}
.why-card{padding:var(--sp-6) var(--sp-2) var(--sp-2) 0}
.why-icon{width:50px; height:50px; border-radius:13px; display:grid; place-items:center;
  color:var(--accent); background:var(--accent-t); margin-bottom:var(--sp-4)}
.why-icon svg{width:28px; height:28px}
.why-card h3{font-family:var(--font-serif); font-weight:600; font-size:1.22rem; margin-bottom:var(--sp-2)}
.why-card p{font-size:var(--fs-sm); color:var(--ink-2); text-wrap:pretty; max-width:34ch}
.i-1{--accent:var(--c-coral); --accent-t:var(--c-coral-t)}
.i-2{--accent:var(--c-blue); --accent-t:var(--c-blue-t)}
.i-3{--accent:var(--brand); --accent-t:var(--brand-tint)}
.i-4{--accent:var(--c-violet); --accent-t:var(--c-violet-t)}
.i-5{--accent:var(--gold-2); --accent-t:var(--gold-tint)}
.i-6{--accent:var(--c-teal); --accent-t:var(--c-teal-t)}

/* — learn cards — */
.learn{background:var(--paper-2)}
.learn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6)}
.learn-card{display:flex; flex-direction:column; gap:var(--sp-2); background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-8) var(--sp-6);
  color:var(--ink); box-shadow:var(--sh-1); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.learn-card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2); color:var(--ink)}
.learn-kicker{font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-2)}
.learn-title{font-family:var(--font-serif); font-weight:700; font-size:1.28rem; line-height:1.2}
.learn-desc{font-size:var(--fs-sm); color:var(--ink-2); text-wrap:pretty; flex:1}
.learn-more{font-size:var(--fs-sm); font-weight:600; color:var(--brand); margin-top:var(--sp-2)}
.learn-card:hover .learn-more{color:var(--brand-2)}
.learn-card:hover .learn-more .arrow{transform:translateX(4px)}
.learn-more .arrow{display:inline-block; transition:transform .2s ease}

/* — faq — */
.faq-inner{max-width:820px; margin-inline:auto}
.faq-list{display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-8)}
.faq-item{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease}
.faq-item[open]{border-color:var(--line-2); box-shadow:var(--sh-1)}
.faq-item summary{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  cursor:pointer; list-style:none; padding:20px 22px; min-height:56px;
  font-family:var(--font-serif); font-weight:600; font-size:1.14rem; color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--brand); outline-offset:-3px; border-radius:var(--r-md)}
.faq-plus{position:relative; width:20px; height:20px; flex:none}
.faq-plus::before,.faq-plus::after{content:""; position:absolute; background:var(--brand); border-radius:2px; transition:transform .22s ease}
.faq-plus::before{inset:9px 2px; height:2px}
.faq-plus::after{inset:2px 9px; width:2px}
.faq-item[open] .faq-plus::after{transform:rotate(90deg); opacity:0}
.faq-body{padding:0 22px 22px}
.faq-body p{color:var(--ink-2); text-wrap:pretty; max-width:66ch}

/* — authors / E-E-A-T — */
.author-card{display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,48px); align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(28px,4vw,48px); box-shadow:var(--sh-1)}
.author-avatars{display:flex}
.avatar{width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-serif); font-weight:700; font-size:1.3rem; color:#fff; border:3px solid var(--card); margin-left:-16px}
.avatar:first-child{margin-left:0}
.avatar.a1{background:var(--brand)} .avatar.a2{background:var(--c-coral)} .avatar.a3{background:var(--c-violet)}
.author-title{font-family:var(--font-serif); font-weight:700; font-size:clamp(1.4rem,1.1rem+1.2vw,2rem); line-height:1.14; margin:var(--sp-2) 0 var(--sp-3); text-wrap:balance}
.author-copy p{color:var(--ink-2); text-wrap:pretty; max-width:64ch}
.author-meta{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-3); margin-top:var(--sp-4)}

/* single named author (photo) — used on home + about */
.avatar--photo{position:relative; width:104px; height:104px; margin:0; padding:0; overflow:hidden;
  background:var(--paper-2); border:3px solid var(--card); box-shadow:var(--sh-1)}
.avatar--photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.avatar-fallback{position:absolute; inset:0; display:grid; place-items:center; background:var(--brand);
  color:#fff; font-family:var(--font-serif); font-weight:700; font-size:2rem}
.author-name{font-family:var(--font-serif); font-weight:700; font-size:1.15rem; color:var(--ink); margin-top:var(--sp-3)}
.author-role{font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--ink-3); margin-top:2px}
.author-links{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-4)}
.author-links a{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans);
  font-weight:600; font-size:var(--fs-sm); text-decoration:none; color:var(--brand-2);
  border:1px solid color-mix(in oklab, var(--brand) 22%, var(--line)); border-radius:var(--r-pill); padding:6px 13px;
  transition:background .15s ease, color .15s ease, border-color .15s ease}
.author-links a:hover,.author-links a:focus-visible{background:var(--brand); border-color:var(--brand); color:#fff}
.author-links a svg{width:15px; height:15px; flex:0 0 auto}
@media (max-width:640px){ .author-card{grid-template-columns:1fr; text-align:left} }

/* — CTA band — */
.cta-band{position:relative; overflow:hidden; background:var(--brand); color:var(--paper);
  padding-block:clamp(56px,7vw,88px)}
.cta-curve{position:absolute; inset:0; opacity:.22; pointer-events:none}
.cta-curve svg{width:100%; height:100%}
.cta-curve path{fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round}
.cta-inner{position:relative; text-align:center; max-width:640px; margin-inline:auto}
.cta-title{font-family:var(--font-serif); font-weight:700; font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.018em; margin-bottom:var(--sp-4); color:#fff}
.cta-sub{font-size:var(--fs-lead); color:color-mix(in oklab, #fff 82%, var(--brand)); margin-bottom:var(--sp-8); text-wrap:pretty}
.cta-actions{display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center}
.btn-onbrand{background:var(--gold); color:oklch(30% 0.05 70)}
.btn-onbrand:hover{background:var(--paper); color:var(--brand-2); transform:translateY(-2px); box-shadow:var(--sh-2)}
.btn-onbrand-ghost{background:transparent; color:#fff; border-color:color-mix(in oklab,#fff 45%,transparent)}
.btn-onbrand-ghost:hover{background:color-mix(in oklab,#fff 12%,transparent); color:#fff; border-color:#fff}

/* — footer — */
.site-footer{background:oklch(24% 0.018 58); color:oklch(82% 0.012 80); padding-block:clamp(48px,6vw,72px) var(--sp-8)}
.footer-grid{display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:clamp(24px,3vw,44px); padding-bottom:var(--sp-12); border-bottom:1px solid oklch(34% 0.015 58)}
.footer-brand .brand-name{color:var(--paper)}
.footer-brand .brand-mark{background:oklch(32% 0.03 168); border-color:oklch(40% 0.04 168)}
.footer-brand .brand-mark path{stroke:var(--gold)}
.footer-brand .brand-mark line{stroke:oklch(52% 0.02 168)}
.footer-tag{margin-top:var(--sp-4); color:oklch(72% 0.012 80); max-width:30ch; font-size:var(--fs-sm); text-wrap:pretty}
.footer-note{margin-top:var(--sp-3); font-family:var(--font-mono); font-size:var(--fs-xs); color:oklch(62% 0.012 80)}
.footer-col h4{font-size:var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:oklch(66% 0.012 80); margin-bottom:var(--sp-4)}
.footer-col ul{display:flex; flex-direction:column; gap:var(--sp-3)}
.footer-col a{color:oklch(82% 0.012 80); font-size:var(--fs-sm)}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); padding-top:var(--sp-8); color:oklch(66% 0.012 80); font-size:var(--fs-sm)}
.footer-mini{font-family:var(--font-mono); font-size:var(--fs-xs)}

/* ============================ responsive ============================ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .hero-visual{order:-1; max-width:560px}
  .tool-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .learn-grid{grid-template-columns:repeat(2,1fr)}
  .example-grid{grid-template-columns:1fr; gap:36px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:36px 24px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:768px){
  .site-nav{position:absolute; top:calc(100% + 10px); right:0; left:0; flex-direction:column; align-items:stretch;
    gap:4px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--sh-lg); padding:10px; display:none}
  .nav-toggle:checked ~ .site-nav{display:flex}
  .site-nav>a{padding:14px 16px; min-height:48px; display:flex; align-items:center}
  .site-nav .nav-cta{justify-content:center; margin:6px 0 0}
  .nav-guides{flex-direction:column; align-items:stretch}
  .nav-guides-trigger{padding:14px 16px; min-height:48px; justify-content:space-between}
  .nav-guides-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; padding:0 0 0 12px; min-width:0}
  .nav-guides-menu::before{display:none}
  .nav-guides-menu a{padding:12px 16px; min-height:44px; display:flex; align-items:center}
  .nav-caret{display:none}
  .hamburger{display:flex}
  .trust-div{display:none}
  .trust-stat--wide{border-left:0; padding-left:0; text-align:center}
  .author-card{grid-template-columns:1fr; text-align:center}
  .author-avatars{justify-content:center}
}
@media (max-width:560px){
  .tool-grid,.why-grid,.learn-grid,.footer-grid{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
  .plot-card{transform:none} .plot-card:hover{transform:none}
  .btn{width:100%}
  .hero-cta,.cta-actions{flex-direction:column}
  .trust-inner{gap:var(--sp-4)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .pulse{display:none}
}

/* ============================ calculator tool ============================ */
/* full-viewport app: the tool is the page hero, content scrolls below */
.calc-app{--side-w:clamp(300px,26vw,380px); display:grid; grid-template-columns:64px var(--side-w) 1fr;
  grid-template-areas:"rail side canvas";
  height:calc(100dvh - 73px); background:var(--card); border-bottom:1px solid var(--line)}
.calc-app.side-collapsed{grid-template-columns:64px 0 1fr}
.calc-app.side-collapsed .calc-side{opacity:0; pointer-events:none; overflow:hidden}
/* toolbar collapse toggle: «« when expanded, »» when collapsed */
.toolbar-collapse svg{transition:transform .25s ease}
.calc-app.side-collapsed .toolbar-collapse svg{transform:scaleX(-1)}
.toolbar-collapse:hover svg{animation:tc-nudge .5s ease}
@keyframes tc-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-2px)}}
.calc-app.side-collapsed .toolbar-collapse:hover svg{animation:tc-nudge-rev .5s ease}
@keyframes tc-nudge-rev{0%,100%{transform:scaleX(-1) translateX(0)}50%{transform:scaleX(-1) translateX(-2px)}}

/* tool page shell: edge-to-edge header + a fixed breadcrumb bar under it, app fills the rest */
.tool-page{display:flex; flex-direction:column; height:100dvh; overflow:hidden}
.tool-page > main{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.tool-page .calc-app{height:auto; flex:1 1 auto; min-height:0}
.tool-page .site-header .container,
.tool-page .tool-crumbbar .container{max-width:none; padding-inline:clamp(16px,2vw,28px)}
.tool-crumbbar{flex:none; height:40px; background:var(--paper); border-bottom:1px solid var(--line)}
.tool-crumbbar .container{height:100%; display:flex; align-items:center}
.tool-crumbbar .breadcrumb{padding:0; margin:0}
.tool-crumbbar .breadcrumb ol{flex-wrap:nowrap; white-space:nowrap}

/* left icon rail */
.calc-rail{grid-area:rail; display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:8px 6px;
  background:var(--paper); border-right:1px solid var(--line); min-height:0; overflow-y:auto}
.rail-btn{display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 2px;
  border:none; background:transparent; border-radius:10px; color:var(--ink-3); cursor:pointer;
  font-family:var(--font-sans); font-size:9.5px; font-weight:600; letter-spacing:.01em;
  transition:background .15s ease, color .15s ease}
.rail-btn svg{width:22px; height:22px}
.rail-btn:hover{background:var(--card); color:var(--ink)}
.rail-btn.is-active{background:var(--brand-tint); color:var(--brand-2)}

/* switchable views */
.calc-view{display:none; flex-direction:column; min-height:0; flex:1}
.calc-view.is-active{display:flex}
.calc-side{grid-area:side; position:relative; display:flex; flex-direction:column; min-height:0; background:var(--paper-2);
  border-right:1px solid var(--line); transition:opacity .15s ease}
/* drag handle on the panel/canvas boundary — width persists, collapse resumes it */
.side-resizer{position:absolute; top:0; right:-4px; width:9px; height:100%; z-index:6;
  cursor:col-resize; touch-action:none; background:transparent}
.side-resizer::after{content:""; position:absolute; top:0; left:4px; width:1px; height:100%;
  background:transparent; transition:background .15s ease, width .15s ease}
.side-resizer:hover::after,.side-resizer.is-dragging::after{background:var(--brand); width:2px; left:3px}
.calc-app.side-collapsed .side-resizer{display:none}
body.side-resizing{cursor:col-resize; user-select:none}
.calc-side-head{padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line)}
.calc-title{font-family:var(--font-serif); font-size:1.4rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; margin-bottom:var(--sp-2)}
/* sidebar link out to the tool's guide */
.calc-guide-link{display:inline-flex; align-items:center; gap:7px; margin-bottom:var(--sp-3);
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:600; text-decoration:none;
  color:var(--brand-2); background:var(--brand-tint); border:1px solid color-mix(in oklab, var(--brand) 22%, var(--line));
  border-radius:var(--r-pill); padding:6px 13px; transition:background .15s ease, border-color .15s ease, color .15s ease}
.calc-guide-link:hover,.calc-guide-link:focus-visible{background:var(--brand); border-color:var(--brand); color:#fff}
.calc-guide-link svg{width:15px; height:15px; flex:0 0 auto}
.calc-guide-link .arrow{transition:transform .15s ease}
.calc-guide-link:hover .arrow{transform:translateX(2px)}

.calc-side-actions{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3)}
.calc-side-actions .lead{font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:600; color:var(--ink-2)}
.btn-add{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans); font-weight:600;
  font-size:var(--fs-sm); color:#fff; background:var(--brand); border:none; border-radius:var(--r-pill);
  padding:8px 14px; min-height:40px; cursor:pointer; transition:background .18s ease}
.btn-add:hover{background:var(--brand-2)}
.btn-add svg{width:16px; height:16px}
.expr-list{flex:1; overflow-y:auto; padding:var(--sp-2)}
.expr-row{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:var(--r-sm);
  border:1px solid transparent; transition:background .15s ease, border-color .15s ease}
.expr-row:focus-within{background:var(--card); border-color:var(--line-2)}
.expr-swatch{flex:none; width:22px; height:22px; border-radius:6px; border:2px solid rgba(0,0,0,.08);
  cursor:pointer; padding:0}
.expr-swatch:hover{transform:scale(1.08)}
.expr-fx{flex:none; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink-3)}
.expr-input{flex:1; min-width:0; font-family:var(--font-mono); font-size:.95rem; color:var(--ink);
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:9px 11px; min-height:40px; outline:none; transition:border-color .15s ease, box-shadow .15s ease}
.expr-input::placeholder{color:var(--ink-3)}
.expr-input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
.expr-input.has-error{color:var(--c-coral); border-color:var(--c-coral)}
.expr-input.is-freehand{font-style:italic; color:var(--ink-2); background:var(--paper-2); cursor:default}
.icon-btn{flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:6px;
  color:var(--ink-3); background:transparent; border:none; cursor:pointer; transition:background .15s ease, color .15s ease}
.icon-btn:hover{background:var(--paper); color:var(--ink)}
.icon-btn svg{width:17px; height:17px}
.icon-btn[aria-pressed="true"]{color:var(--ink-3)}
.expr-row.is-hidden .expr-input{opacity:.45; text-decoration:line-through}
.calc-side-foot{border-top:1px solid var(--line)}
.calc-hint{padding:var(--sp-3) var(--sp-4); font-size:var(--fs-xs); color:var(--ink-3); text-wrap:pretty}
.calc-hint code{font-family:var(--font-mono); color:var(--ink-2); background:var(--card);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px}
.kb-toggle{display:flex; align-items:center; gap:8px; width:100%; padding:12px var(--sp-4);
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-sm); color:var(--ink-2);
  background:transparent; border:none; border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s ease}
.kb-toggle:hover{background:var(--card); color:var(--ink)}
.kb-toggle svg{width:18px; height:18px}
.kb-toggle[aria-pressed="true"]{color:var(--brand)}
.calc-canvas-wrap{grid-area:canvas; position:relative; background:var(--card); min-width:0; overflow:hidden}

/* canvas top toolbar */
.calc-toolbar{position:absolute; left:14px; top:14px; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.calc-toolbar select{height:38px; font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--ink);
  background:color-mix(in oklab, var(--card) 88%, transparent); border:1px solid var(--line-2);
  border-radius:9px; padding:0 10px; cursor:pointer; backdrop-filter:blur(4px)}
.tbtn{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 12px; border-radius:9px; color:var(--ink-2);
  background:color-mix(in oklab, var(--card) 88%, transparent); border:1px solid var(--line-2);
  cursor:pointer; backdrop-filter:blur(4px); transition:background .15s ease, color .15s ease, border-color .15s ease}
.tbtn:hover{background:var(--card); color:var(--brand); border-color:var(--brand)}
.tbtn[aria-pressed="true"]{color:var(--brand); border-color:var(--brand); background:var(--brand-tint)}
.tbtn svg{width:18px; height:18px; flex:none}
.tbtn-icon{padding:0; width:38px; justify-content:center}
.tbtn:disabled{opacity:.4; cursor:default; color:var(--ink-3); border-color:var(--line-2); background:color-mix(in oklab, var(--card) 88%, transparent)}
.tlabel{font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:600}

/* object edit menu — floating toolbar (GeoGebra-style) */
.obj-menu{position:absolute; z-index:6; display:flex; align-items:center; gap:6px; padding:6px;
  background:var(--card); border:1px solid var(--line-2); border-radius:11px;
  box-shadow:0 6px 22px rgba(20,32,28,.16); font-family:var(--font-sans)}
.om-colors{display:flex; gap:4px; padding-right:6px; border-right:1px solid var(--line)}
.om-sw{width:20px; height:20px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0}
.om-sw:hover{transform:scale(1.12)}
.om-sw.is-on{border-color:var(--ink); box-shadow:0 0 0 2px var(--card) inset}
.om-btn{display:grid; place-items:center; width:32px; height:32px; border-radius:8px; border:1px solid transparent;
  background:transparent; color:var(--ink-2); cursor:pointer; transition:background .15s ease, color .15s ease}
.om-btn:hover{background:var(--paper); color:var(--ink)}
.om-btn.is-on{background:var(--brand-tint); color:var(--brand-2)}
.om-btn svg{width:18px; height:18px}
.om-del:hover{background:color-mix(in oklab, var(--c-coral) 16%, transparent); color:var(--c-coral)}
.om-coords{display:flex; align-items:center; gap:4px; padding:0 4px; border-left:1px solid var(--line)}
.om-lab{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-3)}
.om-num{width:56px; height:30px; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:7px; padding:0 6px; outline:none}
.om-num:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}

/* math keyboard */
.mathkb{position:absolute; left:0; right:0; bottom:0; z-index:3; display:none;
  grid-template-columns:repeat(6,1fr); gap:6px; padding:12px;
  background:color-mix(in oklab, var(--paper-2) 96%, transparent); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(45,38,26,.10); backdrop-filter:blur(6px)}
.mathkb.is-open{display:grid}
.mk{min-height:44px; font-family:var(--font-mono); font-size:1rem; color:var(--ink);
  background:var(--card); border:1px solid var(--line-2); border-radius:9px; cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .08s ease}
.mk:hover{background:var(--paper); border-color:var(--brand); color:var(--brand)}
.mk:active{transform:scale(.96)}
.mk-fn{background:var(--brand-tint); color:var(--brand-2); border-color:color-mix(in oklab,var(--brand) 24%,var(--line-2))}

/* sidebar scroll + accordion panels */
.calc-scroll{flex:1; overflow-y:auto; min-height:0}
.calc-panels{padding:var(--sp-2) var(--sp-2) var(--sp-4)}
.cpanel{border:1px solid var(--line); border-radius:var(--r-sm); margin:var(--sp-2) 0; background:var(--card); overflow:hidden}
.cpanel>summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; min-height:44px; font-family:var(--font-sans); font-weight:600; font-size:var(--fs-sm); color:var(--ink)}
.cpanel>summary::-webkit-details-marker{display:none}
.cpanel>summary::after{content:"+"; font-size:1.1rem; color:var(--brand); line-height:1}
.cpanel[open]>summary::after{content:"\2013"}
.cpanel>summary:focus-visible{outline:2px solid var(--brand); outline-offset:-2px; border-radius:var(--r-sm)}
.cpanel-body{padding:0 14px 14px; font-size:var(--fs-sm); color:var(--ink-2)}
.cpanel-note{color:var(--ink-3); font-size:var(--fs-xs); padding-top:var(--sp-2)}
.cfield{display:flex; align-items:center; gap:8px; margin-top:var(--sp-3); flex-wrap:wrap}
.cfield label{font-size:var(--fs-xs); color:var(--ink-3); font-weight:600}
.cfield input[type=number], .cfield select, .cpanel-body select, .cpanel-body textarea{
  font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line-2); border-radius:6px; padding:7px 9px; min-height:36px}
.cfield input[type=number]{width:72px}
.cpanel-body select{width:100%; min-height:38px}
.cbtn{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans); font-weight:600; font-size:var(--fs-sm);
  color:#fff; background:var(--brand); border:none; border-radius:var(--r-pill); padding:8px 16px; min-height:38px; cursor:pointer; transition:background .15s ease}
.cbtn:hover{background:var(--brand-2)}
.cbtn-ghost{color:var(--ink-2); background:transparent; border:1px solid var(--line-2)}
.cbtn-ghost:hover{color:var(--ink); background:var(--paper-2)}

/* parameter sliders */
.param-row{display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:10px; margin-top:var(--sp-3)}
.param-row label{font-family:var(--font-mono); font-weight:600; color:var(--brand)}
.param-row input[type=range]{width:100%}
.param-val{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-2); min-width:34px; text-align:right}
.param-play{width:28px; height:28px; flex:none; display:grid; place-items:center; padding:0; cursor:pointer;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); border-radius:7px;
  transition:background .15s ease, color .15s ease, border-color .15s ease}
.param-play:hover{color:var(--brand); border-color:var(--brand)}
.param-play.is-playing{background:var(--brand); color:#fff; border-color:var(--brand)}
.param-play svg{width:14px; height:14px}

/* analyze */
.an-item{padding:var(--sp-3) 0; border-top:1px solid var(--line)}
.an-item:first-child{border-top:none}
.an-head{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink); margin-bottom:6px; word-break:break-all}
.an-sw{width:12px; height:12px; border-radius:3px; flex:none}
.an-item dl{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0}
.an-item dt{color:var(--ink-3); font-size:var(--fs-xs)}
.an-item dd{margin:0; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-2)}

/* value table */
.vtable{width:100%; border-collapse:collapse; margin-top:var(--sp-3); font-family:var(--font-mono); font-size:var(--fs-xs)}
.vtable th,.vtable td{border:1px solid var(--line); padding:5px 8px; text-align:right}
.vtable th{background:var(--paper-2); color:var(--ink-3); font-weight:600}

/* regression */
#reg-data{width:100%; min-height:84px; resize:vertical}
.reg-eq{font-family:var(--font-mono); font-weight:600; color:var(--ink); margin-top:var(--sp-3)}
.reg-r2{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-3); margin-top:2px}
.reg-warn{color:var(--c-coral); font-size:var(--fs-xs)}

/* share row + toast */
.share-row{display:flex; flex-wrap:wrap; gap:8px; padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--line)}
.file-label{display:inline-flex; align-items:center; gap:6px; cursor:pointer}
.file-label input{position:absolute; width:1px; height:1px; opacity:0}
.ctoast{position:absolute; left:50%; bottom:18px; transform:translate(-50%,12px); z-index:5;
  background:var(--ink); color:#fff; font-size:var(--fs-sm); padding:9px 16px; border-radius:var(--r-pill);
  box-shadow:var(--sh-2); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease}
.ctoast.show{opacity:1; transform:translate(-50%,0)}
#calc-canvas{display:block; width:100%; height:100%; touch-action:none; cursor:grab}
#calc-canvas:active{cursor:grabbing}
.calc-controls{position:absolute; right:14px; bottom:14px; display:flex; flex-direction:column; gap:8px}
.calc-controls button{width:42px; height:42px; display:grid; place-items:center; border-radius:10px;
  background:color-mix(in oklab, var(--card) 88%, transparent); border:1px solid var(--line-2);
  color:var(--ink-2); cursor:pointer; box-shadow:var(--sh-1); backdrop-filter:blur(4px);
  transition:background .15s ease, color .15s ease, border-color .15s ease}
.calc-controls button:hover{background:var(--card); color:var(--brand); border-color:var(--brand)}
.calc-controls button svg{width:20px; height:20px}
.calc-readout{position:absolute; left:14px; bottom:14px; max-width:min(60%,320px); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); font-size:var(--fs-xs);
  color:var(--ink-3); background:color-mix(in oklab, var(--card) 82%, transparent);
  border:1px solid var(--line); border-radius:8px; padding:6px 10px; backdrop-filter:blur(4px)}

/* tools palette */
.tool-hint{padding:12px 14px; border-bottom:1px solid var(--line); background:var(--card)}
.tool-hint-name{display:block; font-family:var(--font-sans); font-weight:700; font-size:var(--fs-sm); color:var(--brand-2)}
.tool-hint-desc{display:block; margin-top:2px; font-size:var(--fs-xs); color:var(--ink-3); text-wrap:pretty}
.tool-cats{flex:1; overflow-y:auto; padding:var(--sp-3) var(--sp-3) var(--sp-4)}
.tool-cat{margin-top:var(--sp-4)}
.tool-cat:first-child{margin-top:0}
.tool-cat-title{font-family:var(--font-serif); font-size:1rem; font-weight:600; color:var(--ink); margin-bottom:var(--sp-2)}
.tool-grid-btns{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.tool-item{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; min-height:70px;
  text-align:center; background:var(--card); border:1px solid var(--line); border-radius:10px; cursor:pointer;
  color:var(--ink-2); font-family:var(--font-sans); font-size:10px; font-weight:600; line-height:1.15;
  transition:border-color .15s ease, background .15s ease, color .15s ease}
.tool-item svg{width:22px; height:22px; flex:none; color:var(--ink-3); transition:color .15s ease}
.tool-item:hover{border-color:var(--brand); color:var(--ink)}
.tool-item:hover svg{color:var(--brand)}
.tool-item.is-active{border-color:var(--brand); background:var(--brand-tint); color:var(--brand-2)}
.tool-item.is-active svg{color:var(--brand)}

/* static (non-accordion) panel used in Table view */
.calc-panels--flush{padding:var(--sp-3); flex:1; min-height:0; overflow-y:auto}
.cpanel--static .cpanel-head{padding:12px 14px; font-family:var(--font-sans); font-weight:600; font-size:var(--fs-sm);
  color:var(--ink); border-bottom:1px solid var(--line)}
.cpanel--static .cpanel-body{padding-top:var(--sp-3)}

/* on-canvas widgets (buttons, checkboxes, input boxes) */
.calc-widgets{position:absolute; inset:0; z-index:2; pointer-events:none}
.calc-widget{position:absolute; pointer-events:auto; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-sans); font-size:var(--fs-xs); color:var(--ink);
  background:color-mix(in oklab, var(--card) 92%, transparent); border:1px solid var(--line-2);
  border-radius:8px; padding:6px 10px; box-shadow:var(--sh-1); backdrop-filter:blur(4px); cursor:default}
.calc-widget button{font:inherit; color:#fff; background:var(--brand); border:none; border-radius:6px; padding:5px 10px; cursor:pointer}
.calc-widget input[type=number]{font-family:var(--font-mono); width:64px; border:1px solid var(--line-2); border-radius:5px; padding:3px 5px; background:var(--paper-2); color:var(--ink)}
.calc-widget .wx{margin-left:2px; color:var(--ink-3); cursor:pointer; font-weight:700}

/* tool cursors on the canvas */
.calc-app[data-tool="point"] #calc-canvas,
.calc-app[data-tool="pointOnCurve"] #calc-canvas,
.calc-app[data-tool="intersect"] #calc-canvas,
.calc-app[data-tool="roots"] #calc-canvas,
.calc-app[data-tool="extremum"] #calc-canvas,
.calc-app[data-tool="line"] #calc-canvas,
.calc-app[data-tool="ray"] #calc-canvas,
.calc-app[data-tool="vector"] #calc-canvas,
.calc-app[data-tool="text"] #calc-canvas,
.calc-app[data-tool="complex"] #calc-canvas,
.calc-app[data-tool="attachDetach"] #calc-canvas,
.calc-app[data-tool="button"] #calc-canvas,
.calc-app[data-tool="checkbox"] #calc-canvas,
.calc-app[data-tool="inputBox"] #calc-canvas{cursor:crosshair}
.calc-app[data-tool="pen"] #calc-canvas,
.calc-app[data-tool="freehand"] #calc-canvas{cursor:cell}
.calc-app[data-tool="delete"] #calc-canvas,
.calc-app[data-tool="showLabel"] #calc-canvas,
.calc-app[data-tool="showHide"] #calc-canvas,
.calc-app[data-tool="copyStyle"] #calc-canvas,
.calc-app[data-tool="select"] #calc-canvas{cursor:pointer}

@media (max-width:768px){
  /* competitor-style stack: graph on top (stays visible), panel below, tab bar at the very bottom */
  .calc-app{grid-template-columns:1fr; grid-template-rows:minmax(0,46vh) minmax(0,1fr) auto;
    grid-template-areas:"canvas" "side" "rail"}
  .calc-app.side-collapsed{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 0 auto}
  .calc-app.side-collapsed .calc-side{opacity:0; pointer-events:none}
  .calc-canvas-wrap{border-bottom:1px solid var(--line)}
  /* the active panel scrolls INSIDE its track so it never overlaps the keyboard bar or the bottom tab bar */
  .calc-side{border-right:none; overflow:hidden}
  .calc-view.is-active{overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0}
  .calc-side-foot{flex:none}

  /* rail → bottom tab bar */
  .calc-rail{flex-direction:row; align-items:stretch; justify-content:space-between; gap:2px;
    padding:4px 6px; border-right:none; border-top:1px solid var(--line); overflow:visible}
  .rail-btn{flex:1; flex-direction:column; padding:7px 2px; font-size:10px}
  .rail-btn svg{width:20px; height:20px}

  /* panel content: keep the tools grid readable, drop the desktop-only footer/hint */
  .calc-view{min-height:0}
  .expr-list{max-height:none}
  .side-resizer{display:none}
  .calc-hint,.calc-side-foot .share-row{display:none}
  .calc-side-foot{padding-bottom:env(safe-area-inset-bottom)}
  .tool-cats{padding-bottom:var(--sp-3)}
  .tool-grid-btns{grid-template-columns:repeat(3,1fr)}
  .tool-item{min-height:62px; font-size:9.5px}

  .calc-toolbar{gap:6px; flex-wrap:nowrap; overflow-x:auto; max-width:calc(100vw - 20px); scrollbar-width:none}
  .calc-toolbar::-webkit-scrollbar{display:none}
  .tlabel{display:none}
  .tbtn{padding:0 10px}
  .mathkb{gap:5px; padding:10px}
  .mk{min-height:42px; font-size:.95rem}
}

/* ==========================================================================
   SCIENTIFIC CALCULATOR (numeric keypad tool — /scientific-graphing-calculator/)
   Content-rich page: the tool is a centered card, content scrolls below.
   ========================================================================== */

/* — calculator local tokens — */
.sci-calc{
  --calc-w:392px;
  --lcd:oklch(90% 0.045 150); --lcd-2:oklch(85% 0.05 152); --lcd-ink:oklch(34% 0.06 158);
  --key:linear-gradient(180deg, oklch(99% 0.004 84), oklch(93% 0.008 84));
  --key-fn:linear-gradient(180deg, oklch(96% 0.006 84), oklch(89% 0.01 82));
  --key-edge:oklch(80% 0.012 82); --key-drop:oklch(72% 0.014 82);
  --key-op:linear-gradient(180deg, oklch(46% 0.018 60), oklch(38% 0.018 60));
  --font-lcd:"VT323", ui-monospace, "IBM Plex Mono", monospace;
}

/* — tool hero band — */
.sci-hero{padding-block:clamp(24px,3vw,40px) clamp(24px,3.5vw,44px);
  background:
    radial-gradient(1000px 480px at 88% -12%, var(--gold-tint), transparent 58%),
    radial-gradient(820px 440px at -5% 0%, var(--brand-tint), transparent 55%);}
/* fixed calculator column so the copy NEVER shifts as the answer grows */
.sci-hero-grid{display:grid; grid-template-columns:minmax(0,1fr) 392px;
  gap:clamp(28px,4.5vw,60px); align-items:center}
.sci-hero-copy{padding-top:0}
.sci-hero-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--sp-6)}
.hchip{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink-2); background:var(--card);
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:7px 13px; box-shadow:var(--sh-1)}
.hchip b{color:var(--brand-2); font-weight:600}
.sci-hero-copy .hero-title{margin-bottom:var(--sp-4)}
.sci-hero-lead{font-size:var(--fs-lead); color:var(--ink-2); max-width:46ch; text-wrap:pretty; margin-bottom:var(--sp-6)}
.sci-hero-meta{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); color:var(--ink-3); margin-top:var(--sp-4)}
.sci-hero-meta span{display:inline-flex; align-items:center; gap:7px}
.sci-hero-meta svg{width:17px; height:17px; color:var(--brand)}

/* — the calculator: dark ClassWiz-style casing — */
.sci-calc{width:var(--calc-w); max-width:100%; margin-inline:auto;
  background:linear-gradient(180deg, oklch(33% 0.021 168), oklch(24% 0.02 168));
  border:1px solid oklch(20% 0.02 168); border-radius:22px; padding:16px 14px 14px;
  box-shadow:var(--sh-lg), inset 0 1px 0 oklch(46% 0.03 168), inset 0 -2px 6px oklch(18% 0.02 168)}
.sci-calc-bar{display:flex; align-items:center; justify-content:space-between; padding:0 4px 12px}
.sci-brand{display:flex; flex-direction:column; line-height:1}
.sci-brand b{font-family:var(--font-serif); font-weight:700; font-size:1.02rem; color:oklch(94% 0.01 84); letter-spacing:.01em}
.sci-brand span{font-family:var(--font-mono); font-size:9px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-top:3px}
.sci-solar{width:64px; height:20px; border-radius:4px; background:
  repeating-linear-gradient(90deg, oklch(40% 0.03 250) 0 10px, oklch(30% 0.02 250) 10px 12px);
  border:1px solid oklch(22% 0.02 250); box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}

/* LCD screen (pixel/VT323 font) */
.sci-lcd{position:relative; background:linear-gradient(180deg, var(--lcd), var(--lcd-2));
  border:1px solid oklch(70% 0.04 150); border-radius:8px; padding:7px 12px 5px;
  margin-bottom:12px; box-shadow:inset 0 2px 6px rgba(40,60,30,.28);
  display:flex; flex-direction:column; gap:1px; overflow:hidden; min-width:0}
.sci-lcd::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(40,60,30,.045) 3px 4px)}
.sci-lcd-inds{display:flex; align-items:center; gap:10px; height:14px;
  font-family:var(--font-lcd); font-size:13px; letter-spacing:.06em; color:var(--lcd-ink)}
.sci-ind{opacity:.28; transition:opacity .12s ease}
.sci-ind.is-on{opacity:1; font-weight:400}
.sci-ind--mode{margin-left:auto; opacity:.85}
.sci-expr{width:100%; min-width:0; max-width:100%; border:none; background:transparent; text-align:right; outline:none;
  font-family:var(--font-lcd); font-size:1.4rem; line-height:1.15; color:var(--lcd-ink);
  padding:0; white-space:nowrap; overflow-x:auto; scrollbar-width:none}
.sci-expr::-webkit-scrollbar{display:none}
.sci-expr::placeholder{color:oklch(60% 0.04 155)}
.sci-result{max-width:100%; text-align:right; font-family:var(--font-lcd); font-size:2.05rem; line-height:1.05;
  color:var(--lcd-ink); min-height:1.05em; white-space:nowrap; overflow:hidden; text-overflow:clip}
.sci-result.is-error{color:oklch(52% 0.16 30); font-size:1.5rem}

/* keypad */
.sci-pad-mem{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:6px}
.sci-pad{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}

/* physical keys */
.key{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; min-height:44px; padding:3px 2px 4px;
  font-family:var(--font-sans); font-size:1.04rem; font-weight:600; color:var(--ink);
  background:var(--key); border:1px solid var(--key-edge); border-radius:9px; cursor:pointer;
  user-select:none; box-shadow:0 2px 0 var(--key-drop), 0 3px 4px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .04s ease, box-shadow .04s ease, filter .12s ease}
.key>*{pointer-events:none}
.key-2nd{font-family:var(--font-mono); font-size:8.5px; font-weight:600; line-height:1;
  color:var(--gold-2); min-height:9px; letter-spacing:.01em}
.key-label{line-height:1.05}
.key:hover{filter:brightness(1.04)}
.key:active,.key.is-press{transform:translateY(2px); box-shadow:0 0 0 var(--key-drop), 0 1px 2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6)}
.key--fn{background:var(--key-fn); font-size:.95rem; font-family:var(--font-mono); color:var(--ink-2)}
.key--fn .key-label{color:var(--ink)}
.key--op{background:var(--key-op); color:#fff; border-color:oklch(30% 0.018 60); font-size:1.24rem;
  box-shadow:0 2px 0 oklch(28% 0.016 60), 0 3px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.14)}
.key--del,.key--ac{color:#fff; background:linear-gradient(180deg, oklch(62% 0.11 244), oklch(53% 0.115 244));
  border-color:oklch(46% 0.11 244); box-shadow:0 2px 0 oklch(44% 0.1 244), 0 3px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25)}
.key--ac{background:linear-gradient(180deg, oklch(58% 0.13 250), oklch(48% 0.135 252)); border-color:oklch(42% 0.13 252)}
.key--eq{color:#fff; font-size:1.4rem; background:linear-gradient(180deg, var(--brand-bright), var(--brand-2));
  border-color:var(--brand-2); box-shadow:0 2px 0 var(--brand-2), 0 3px 5px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2)}
.key--shift{color:oklch(30% 0.05 70); background:linear-gradient(180deg, var(--gold), var(--gold-2));
  border-color:var(--gold-2); font-family:var(--font-sans); font-size:.9rem; letter-spacing:.02em;
  box-shadow:0 2px 0 var(--gold-2), 0 3px 4px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35)}
.key--shift.is-on{filter:brightness(1.08); box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--gold), 0 2px 0 var(--gold-2)}
.key--mode{color:#fff; background:linear-gradient(180deg, oklch(60% 0.085 200), oklch(50% 0.09 200));
  border-color:oklch(44% 0.09 200); font-family:var(--font-mono); font-size:.86rem; letter-spacing:.04em;
  box-shadow:0 2px 0 oklch(42% 0.085 200), 0 3px 4px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.2)}
.key--mem{min-height:34px; font-family:var(--font-mono); font-size:.82rem; font-weight:600; color:var(--ink-2);
  background:var(--key-fn); border-radius:8px}
/* when SHIFT is armed, glow the gold secondary labels so users see what's live */
.sci-calc.shift-on .key .key-2nd{color:var(--gold); text-shadow:0 0 6px color-mix(in oklab, var(--gold) 55%, transparent)}

/* history — visible on load, sits right under the keypad */
.sci-history-wrap{margin-top:12px; background:oklch(28% 0.018 168); border:1px solid oklch(22% 0.018 168);
  border-radius:12px; overflow:hidden}
.sci-history-head{display:flex; align-items:center; justify-content:space-between; padding:8px 12px;
  border-bottom:1px solid oklch(34% 0.02 168)}
.sci-history-head h3{font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.sci-hist-clear{font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:600; color:oklch(72% 0.012 80);
  background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:6px}
.sci-hist-clear:hover{color:#fff; background:oklch(36% 0.02 168)}
.sci-history{max-height:112px; overflow-y:auto; padding:5px}
.sci-history-empty{padding:14px 10px; text-align:center; font-size:var(--fs-sm); color:oklch(66% 0.012 80)}
.sci-hist-item{display:flex; align-items:baseline; gap:8px; width:100%; text-align:right;
  padding:7px 9px; border:none; background:none; border-radius:7px; cursor:pointer;
  font-family:var(--font-mono); font-size:var(--fs-sm); transition:background .12s ease}
.sci-hist-item:hover{background:oklch(34% 0.02 168)}
.sci-hist-expr{flex:1; color:oklch(74% 0.012 80); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sci-hist-eq{color:oklch(52% 0.015 80)}
.sci-hist-res{color:var(--gold); font-weight:600}

/* — generic content prose for the SEO body — */
.prose{max-width:72ch}
.prose--center{max-width:66ch; margin-inline:auto; text-align:center}
.prose--center .bullets{text-align:left; max-width:56ch; margin-inline:auto}
/* two-column article body — fills the content width on wider screens */
.prose-cols{max-width:960px; margin-inline:auto; text-align:left}
.prose-cols p{color:var(--ink-2); text-wrap:pretty; margin-bottom:var(--sp-4)}
.prose-cols p:last-child{margin-bottom:0}
@media (min-width:820px){
  .prose-cols{columns:2; column-gap:clamp(40px,4.5vw,64px)}
  .prose-cols p{break-inside:avoid}
}
/* two-column bullet list so short lists fill the width instead of stacking narrow */
.prose ul.bullets--2{max-width:940px}
@media (min-width:760px){
  .prose ul.bullets--2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4) clamp(36px,4vw,56px)}
}
/* centered figure that sits below its (centered) copy */
.figure-center{max-width:600px; margin:clamp(28px,4vw,44px) auto 0}
.prose p{color:var(--ink-2); text-wrap:pretty; margin-bottom:var(--sp-4)}

/* scientific page: wider heads + tighter vertical rhythm (scoped, homepage untouched) */
.sci-page .section{padding-block:clamp(44px,5.5vw,68px)}
.sci-page .section-head{max-width:64ch}
.sci-page .faq-inner{max-width:900px}

/* Narrow document pages (about, contact) — single ~760px column of running prose.
   Without this, .prose h2 inherits --fs-h2, which is the SAME size as the .section-title
   h1, leaving the page with no heading hierarchy. Scoped so the homepage, guides and
   legal pages are untouched; add class="doc-page" to <body> to opt a page in. */
.doc-page .prose h2{font-size:clamp(1.45rem, 1.15rem + 1.1vw, 1.8rem);
  letter-spacing:-.012em; margin-top:clamp(32px,4vw,44px)}
.doc-page .prose h2:first-child{margin-top:0}

/* — media row: ONE image beside its text on desktop, stacked on mobile —
   Deliberately a single source file per image, not a 1200/720 pair. The image
   never renders wider than ~340px, so one 720px-wide file is already sharp
   everywhere: desktop shows it at 300px (600px on a 2x screen) and mobile at
   ~335px (670px at 2x). Both stay under 720, so there is nothing to gain from
   a second file. Add --flip to put the image on the right. */
.media-row{display:grid; grid-template-columns:300px 1fr; gap:clamp(20px,3vw,32px);
  align-items:center; margin:clamp(28px,4vw,40px) 0}
.media-row__fig{margin:0}
/* flipped: image on the right. The column template flips too, so the image keeps
   its 300px track and the text keeps the flexible one. */
.media-row--flip{grid-template-columns:1fr 300px}
.media-row--flip .media-row__fig{order:2}
.media-row__body>:first-child{margin-top:0}
.media-row__body>:last-child{margin-bottom:0}
@media (max-width:640px){
  .media-row,.media-row--flip{grid-template-columns:1fr; gap:var(--sp-4)}
  .media-row--flip .media-row__fig{order:0}
}
.prose h2{font-family:var(--font-serif); font-weight:700; font-size:var(--fs-h2); line-height:1.1;
  letter-spacing:-.018em; margin:var(--sp-8) 0 var(--sp-4); text-wrap:balance}
.prose h3{font-family:var(--font-serif); font-weight:600; font-size:1.35rem; margin:var(--sp-6) 0 var(--sp-3)}
.prose ul.bullets{display:flex; flex-direction:column; gap:var(--sp-3); margin:var(--sp-4) 0}
.prose ul.bullets li{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3); color:var(--ink-2); text-wrap:pretty}
.prose ul.bullets li::before{content:""; width:8px; height:8px; margin-top:9px; border-radius:50%;
  background:var(--gold); flex:none}
.prose code, .content-code{font-family:var(--font-mono); font-size:.92em; background:var(--paper-2);
  border:1px solid var(--line); border-radius:6px; padding:2px 7px; color:var(--ink)}

/* two-column content + figure */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center}
.split--content{background:var(--paper-2)}
.figure-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); overflow:hidden}
.figure-card figcaption{padding:12px 16px; border-top:1px solid var(--line); background:var(--paper);
  font-size:var(--fs-xs); color:var(--ink-3); text-wrap:pretty}
.figure-card svg,.figure-card img{width:100%; height:auto; display:block; background:var(--card)}

/* function reference table */
.fn-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-1)}
.fn-table{width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:520px; background:var(--card)}
.fn-table th,.fn-table td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line)}
.fn-table thead th{background:var(--paper-2); font-family:var(--font-sans); font-weight:700;
  font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.fn-table tbody tr:last-child td{border-bottom:none}
.fn-table tbody tr:hover{background:var(--paper)}
.fn-table code{font-family:var(--font-mono); color:var(--brand-2); background:var(--brand-tint);
  border:1px solid color-mix(in oklab, var(--brand) 16%, var(--line)); border-radius:5px; padding:2px 7px; white-space:nowrap}
.fn-table td:nth-child(3){color:var(--ink-2)}

/* callout cards — shared content component (equation · key insight · watch out) */
.callout{display:flex; gap:var(--sp-4); align-items:flex-start; margin:var(--sp-6) 0;
  padding:var(--sp-4) var(--sp-6); border-radius:var(--r-md); border:1px solid var(--line);
  border-left:4px solid var(--ink-3); background:var(--card); box-shadow:var(--sh-1)}
.callout-ic{flex:0 0 auto; width:22px; height:22px; margin-top:2px; color:var(--ink-3)}
.callout-body{min-width:0}
.callout-lab{display:block; font-family:var(--font-sans); font-weight:700; font-size:var(--fs-xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
.callout p{margin:0; font-size:var(--fs-sm); color:var(--ink-2); text-wrap:pretty}
.callout p + p{margin-top:var(--sp-2)}
.callout--eq{border-left-color:var(--brand); background:var(--brand-tint)}
.callout--eq .callout-lab,.callout--eq .callout-ic{color:var(--brand-2)}
.callout--key{border-left-color:var(--gold-2); background:var(--gold-tint)}
.callout--key .callout-lab,.callout--key .callout-ic{color:var(--gold-2)}
.callout--warn{border-left-color:var(--c-coral); background:var(--c-coral-t)}
.callout--warn .callout-lab,.callout--warn .callout-ic{color:var(--c-coral)}
.callout .eq{display:block; font-family:var(--font-mono); font-size:1rem; color:var(--ink);
  line-height:1.9; white-space:pre-wrap; overflow-x:auto}
.callout .eq b{color:var(--brand-2); font-weight:600}

/* worked-example cards */
.ex-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6)}
.ex-card{display:flex; flex-direction:column; gap:var(--sp-3); background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--sh-1)}
.ex-kicker{font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-2)}
.ex-card h3{font-family:var(--font-serif); font-weight:700; font-size:1.2rem}
.ex-expr{font-family:var(--font-mono); font-size:1.02rem; color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; word-break:break-all}
.ex-expr b{color:var(--brand-2); font-weight:600}
.ex-card p{font-size:var(--fs-sm); color:var(--ink-2); text-wrap:pretty; margin:0}

/* related tools */
.rel-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-6)}
.rel-card{display:flex; align-items:flex-start; gap:var(--sp-4); background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--sh-1); color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.rel-card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2); color:var(--ink)}
.rel-ic{width:48px; height:48px; flex:none; border-radius:12px; display:grid; place-items:center;
  color:var(--accent); background:var(--accent-t); border:1px solid color-mix(in oklab, var(--accent) 22%, var(--line))}
.rel-ic svg{width:28px; height:28px}
.rel-card h3{font-family:var(--font-serif); font-weight:700; font-size:1.16rem; margin-bottom:3px}
.rel-card p{font-size:var(--fs-sm); color:var(--ink-2); text-wrap:pretty}
.rel-card .learn-more{margin-top:var(--sp-2)}

/* image placeholder — carries the intended asset spec (filename · size · alt · prompt) */
.img-placeholder{position:relative; display:flex; flex-direction:column; justify-content:center; gap:var(--sp-3);
  min-height:260px; padding:clamp(20px,4vw,36px); text-align:left;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--brand-tint) 60%, var(--card)), var(--card));
  border:1.5px dashed color-mix(in oklab, var(--brand) 30%, var(--line-2)); border-radius:var(--r-lg)}
.img-ph-ic{width:44px; height:44px; color:var(--brand); opacity:.8}
.img-ph-ic svg{width:44px; height:44px}
.img-ph-tag{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--brand-2); letter-spacing:.02em}
.img-ph-alt{font-size:var(--fs-sm); color:var(--ink-2); text-wrap:pretty}
.img-ph-alt b{color:var(--ink); font-weight:700}
.img-ph-prompt{font-size:var(--fs-xs); color:var(--ink-3); text-wrap:pretty; border-top:1px dashed var(--line-2); padding-top:var(--sp-3)}
.img-ph-prompt b{color:var(--ink-2)}

@media (max-width:900px){
  .sci-hero-grid{grid-template-columns:1fr; gap:32px; justify-items:center}
  .sci-hero-copy{padding-top:0; max-width:640px}
  .sci-hero-visual{order:-1; width:100%; max-width:392px; margin-inline:auto}
  .split{grid-template-columns:1fr; gap:28px}
  .split .figure-card,.split .img-placeholder{order:-1}
  .ex-grid{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .sci-calc{--calc-w:100%; border-radius:18px; padding:14px 12px 12px}
  .sci-pad-mem,.sci-pad{gap:6px}
  .key{min-height:48px; font-size:1rem; border-radius:9px}
  .key--mem{min-height:36px}
}

/* ============================================================
   Newsletter — inline band (above footer) + popup modal.
   Injected by js/newsletter.js; styles live here so every page
   shares one source of truth. Uses the site's pine/honey tokens.
   ============================================================ */

/* — shared form bits — */
.nl-form{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:stretch}
.nl-input{flex:1 1 220px; min-width:0; font-family:var(--font-sans);
  font-size:var(--fs-body); color:var(--ink); background:var(--card);
  border:1.5px solid var(--line-2); border-radius:var(--r-pill);
  padding:13px 20px; min-height:48px; transition:border-color .18s ease, box-shadow .18s ease}
.nl-input::placeholder{color:var(--ink-3)}
.nl-input:focus{outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint)}
.nl-input[aria-invalid="true"]{border-color:var(--c-coral);
  box-shadow:0 0 0 3px var(--c-coral-t)}
.nl-form .nl-submit{flex:0 0 auto}
/* honeypot — hidden from humans, visible to naive bots */
.nl-hp{position:absolute!important; left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none}
.nl-msg{margin:var(--sp-3) 0 0; font-size:var(--fs-sm); min-height:1.2em;
  font-weight:500}
.nl-msg[data-state="error"]{color:var(--c-coral)}
.nl-msg[data-state="ok"]{color:var(--brand)}
.nl-fine{margin:var(--sp-3) 0 0; font-size:var(--fs-xs); color:var(--ink-3)}
.nl-fine a{color:var(--ink-3); text-decoration:underline}
.nl-fine a:hover{color:var(--brand)}
.nl-form.is-loading .nl-submit{opacity:.65; pointer-events:none}

/* — inline band above the footer — */
.nl-band{background:var(--brand-tint); border-top:1px solid var(--line)}
.nl-band .container{padding-block:clamp(48px,6vw,72px)}
.nl-band__inner{display:grid; gap:var(--sp-6);
  grid-template-columns:1.1fr 1fr; align-items:center}
.nl-band__eyebrow{color:var(--brand)}
.nl-band h2{font-family:var(--font-serif); font-size:var(--fs-h3);
  line-height:1.2; color:var(--ink); margin:0 0 var(--sp-2)}
.nl-band p{color:var(--ink-2); margin:0; max-width:46ch}
.nl-band .nl-form{margin-top:0}
.nl-band__form-wrap{width:100%}
@media (max-width:760px){
  .nl-band__inner{grid-template-columns:1fr}
}

/* — popup modal — */
.nl-modal{position:fixed; inset:0; z-index:300; display:flex;
  align-items:center; justify-content:center; padding:var(--sp-4)}
.nl-modal[hidden]{display:none}
.nl-modal__backdrop{position:absolute; inset:0;
  background:rgba(45,38,26,.42); animation:nlFade .22s ease}
.nl-modal__card{position:relative; width:100%; max-width:440px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-lg);
  padding:clamp(28px,4vw,40px); animation:nlPop .26s cubic-bezier(.2,.7,.3,1)}
.nl-modal__close{position:absolute; top:12px; right:12px; width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--ink-3); cursor:pointer;
  font-size:1.5rem; line-height:1; border-radius:var(--r-pill);
  transition:background-color .18s ease, color .18s ease}
.nl-modal__close:hover{background:var(--paper-2); color:var(--ink)}
.nl-modal__badge{display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.13em;
  text-transform:uppercase; color:var(--brand); margin:0 0 var(--sp-3)}
.nl-modal__badge .dot{width:7px; height:7px; border-radius:50%; background:var(--gold)}
.nl-modal h2{font-family:var(--font-serif); font-size:1.55rem; line-height:1.15;
  color:var(--ink); margin:0 0 var(--sp-2)}
.nl-modal p.nl-lead{color:var(--ink-2); margin:0 0 var(--sp-4)}
.nl-modal .nl-form{flex-direction:column}
.nl-modal .nl-input{flex-basis:auto; width:100%}
.nl-modal .nl-submit{width:100%}

@keyframes nlFade{from{opacity:0}to{opacity:1}}
@keyframes nlPop{from{opacity:0; transform:translateY(14px) scale(.97)}
  to{opacity:1; transform:none}}

/* Mobile: NOT a full-screen interstitial (Google penalises those).
   The popup becomes a compact bottom sheet with a non-blocking,
   transparent backdrop so page content stays reachable. */
@media (max-width:600px){
  .nl-modal{align-items:flex-end; padding:0}
  .nl-modal__backdrop{background:transparent; pointer-events:none}
  .nl-modal__card{max-width:none; border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:22px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 30px rgba(45,38,26,.18)}
  .nl-modal h2{font-size:1.3rem}
  .nl-modal .nl-form{flex-direction:row; flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  .nl-modal__backdrop,.nl-modal__card{animation:none}
}


/* ── Report an error: floating button + dialog ───────────────────────── */
.report-fab{position:fixed; right:20px; bottom:20px; z-index:250;
  display:inline-flex; align-items:center; gap:9px; padding:12px 18px;
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-sm); color:#fff;
  background:var(--brand); border:none; border-radius:var(--r-pill); cursor:pointer;
  box-shadow:var(--sh-lg); transition:background-color .18s ease, transform .18s ease}
.report-fab:hover{background:var(--brand-2); transform:translateY(-1px)}
.report-fab:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
.report-fab svg{width:18px; height:18px; flex:0 0 auto}
/* On the full-screen tool pages the bottom-right corner holds the zoom cluster,
   so lift the (icon-only) button above it to avoid overlapping those controls. */
.report-fab--tool{bottom:170px; right:14px; padding:12px; border-radius:50%}
.report-fab--tool .report-fab__label{display:none}
@media (max-width:600px){
  .report-fab{padding:12px; border-radius:50%}
  .report-fab .report-fab__label{display:none}
  .report-fab--tool{bottom:150px}
}

.report-modal{position:fixed; inset:0; z-index:320; display:flex;
  align-items:center; justify-content:center; padding:var(--sp-4)}
.report-modal[hidden]{display:none}
.report-modal__backdrop{position:absolute; inset:0; background:rgba(45,38,26,.42); animation:nlFade .22s ease}
.report-modal__card{position:relative; width:100%; max-width:460px; max-height:calc(100dvh - 2*var(--sp-4));
  overflow-y:auto; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-lg);
  padding:clamp(24px,3.5vw,36px); animation:nlPop .26s cubic-bezier(.2,.7,.3,1)}
.report-modal__close{position:absolute; top:12px; right:12px; width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center; border:none; background:transparent;
  color:var(--ink-3); cursor:pointer; font-size:1.5rem; line-height:1; border-radius:var(--r-pill);
  transition:background-color .18s ease, color .18s ease}
.report-modal__close:hover{background:var(--paper-2); color:var(--ink)}
.report-modal__title{font-family:var(--font-serif); font-size:1.5rem; line-height:1.15; color:var(--ink); margin:0 0 var(--sp-2)}
.report-modal__lead{color:var(--ink-2); font-size:var(--fs-sm); margin:0 0 var(--sp-4)}
.re-field{margin-bottom:var(--sp-3)}
.re-field>label{display:block; font-family:var(--font-sans); font-weight:600; font-size:var(--fs-sm);
  color:var(--ink-2); margin-bottom:6px}
.re-opt{font-weight:400; color:var(--ink-3)}
.re-req{color:var(--c-coral)}
.re-form textarea,.re-form input[type="email"],.re-form input[type="tel"],.re-form select,.re-form input[type="file"]{
  width:100%; font-family:var(--font-sans); font-size:.95rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:10px 12px; outline:none; transition:border-color .15s ease, box-shadow .15s ease}
.re-form textarea{resize:vertical; min-height:64px; font-family:var(--font-sans)}
.re-form input[type="file"]{padding:8px 12px; font-size:var(--fs-sm)}
.re-form :is(textarea,input,select):focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
.re-form [aria-invalid="true"]{border-color:var(--c-coral)}
.re-phone{display:flex; gap:8px}
.re-phone select{flex:0 0 auto; max-width:52%}
.re-phone input{flex:1 1 auto; min-width:0}
.re-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.re-submit{width:100%; margin-top:var(--sp-2)}
.re-form.is-loading .re-submit{opacity:.65; pointer-events:none}
.re-msg{margin:var(--sp-3) 0 0; font-size:var(--fs-sm); min-height:1.2em}
.re-msg[data-state="error"]{color:var(--c-coral)}
.re-msg[data-state="ok"]{color:var(--brand)}
@media (max-width:600px){
  .report-modal{align-items:flex-end; padding:0}
  .report-modal__card{max-width:none; max-height:92dvh; border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:22px 20px calc(20px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .report-modal__backdrop,.report-modal__card,.report-fab{animation:none; transition:none}
}