/* Site copy of design_handoff_leern_website/tokens/tokens.css, design version 1.1.0 (2026-10-05).
   Copied verbatim below; edit only by re-copying from a new handoff. Site-only tokens go in a
   "site additions (not in handoff tokens)" block at the end of this file. */
/* Leern design tokens v1.0.0. Generated from tokens.json. Edit tokens.json first, then mirror here. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&display=swap');
:root{
  --color-ink:#111111; --color-white:#ffffff; --color-bg-subtle:#fafafa; --color-surface:#f2f2f2; --color-surface-hover:#e6e6e6; --color-surface-muted:#dddddd;
  --text-primary:#111111; --text-strong:#444444; --text-secondary:#666666; --text-tertiary:#999999; --text-muted:#a6a6a6; --text-logo:#b3b3b3;
  --dark-bg:#111111; --dark-panel:#1f1f1f; --dark-raised:#2a2a2a; --dark-overlay:#222222; --dark-text-secondary:#a6a6a6; --dark-text-body:#bfbfbf; --dark-text-soft:#d9d9d9;
  --border-hairline:rgba(0,0,0,.06); --border-subtle:rgba(0,0,0,.08); --border-default:rgba(0,0,0,.10); --border-medium:rgba(0,0,0,.12); --border-strong:rgba(0,0,0,.15); --border-dashed:rgba(0,0,0,.20); --border-rule:#111111; --border-on-dark:rgba(255,255,255,.30);
  --scrim-image:rgba(0,0,0,.45); --scrim-hero:rgba(0,0,0,.50); --header-bg:rgba(255,255,255,.85);
  --font-sans:'Instrument Sans',system-ui,sans-serif; --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  --fs-display:clamp(40px,5.6vw,72px); --fs-cta-title:clamp(36px,4.8vw,64px); --fs-studio-title:clamp(32px,4.4vw,56px); --fs-h2:clamp(32px,4vw,52px); --fs-h2-statement:clamp(28px,3.4vw,44px); --fs-featured-post:clamp(28px,3.2vw,40px); --fs-quote-large:clamp(26px,3vw,40px); --fs-stat-hero:clamp(64px,8vw,112px); --fs-stat:72px;
  --fs-lead:clamp(19px,2vw,23px); --fs-body-l:clamp(18px,1.8vw,21px); --fs-body-m:clamp(17px,1.6vw,19px);
  --radius-pill:999px; --radius-panel:32px; --radius-card:28px; --radius-card-m:24px; --radius-widget:22px; --radius-inner:20px; --radius-m:16px; --radius-s:14px; --radius-xs:12px; --radius-thumb:10px; --radius-tiny:8px;
  --shadow-hero-media:0 40px 80px -40px rgba(0,0,0,.25); --shadow-feature-media:0 40px 80px -48px rgba(0,0,0,.30); --shadow-card:0 20px 40px -24px rgba(0,0,0,.20); --shadow-hairline:0 1px 2px rgba(0,0,0,.05); --shadow-orb:0 1px 2px rgba(0,0,0,.04); --shadow-widget:0 20px 50px -12px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.05);
  --container:1120px; --container-wide:1280px; --container-customer:1400px; --gutter:32px; --header-h:64px; --section-y:clamp(140px,16vw,200px); --section-y-lg:clamp(140px,16vw,220px); --rail-inset:max(32px,calc((100vw - 1120px) / 2 + 32px));
}
*{box-sizing:border-box}
body{margin:0;background:var(--color-white);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:var(--fw-medium);text-wrap:balance}
p{margin:0;text-wrap:pretty}
img,video{display:block}
a{color:var(--text-primary);text-decoration:none}
a:hover{color:var(--text-secondary)}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}