/* =====================================================================
   BASE — reset, TYPOGRAPHY (single source of truth), motion primitives
   ===================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 30px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);background:var(--bg);color:var(--text);overflow-x:clip;transition:background .4s,color .4s}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
address{font-style:normal}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:4px}

/* ---------- TYPOGRAPHY — change sizes in variables.css ---------- */
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);letter-spacing:var(--ls-head);line-height:var(--lh-head);color:var(--text);font-weight:700}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:600}
h4{font-size:var(--fs-h4);font-weight:600}
h5,h6{font-size:var(--fs-body);font-weight:600}
p{color:var(--muted)}
p.lede{font-size:var(--fs-lede)}
small,.small{font-size:var(--fs-small)}
strong,b{font-weight:600;color:var(--text)}
code,kbd,pre{font-family:var(--font-mono)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2);margin-bottom:18px}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--brand-2)}
.cat{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2)}
.muted{color:var(--muted)}

/* Long-form article / page content (WordPress editor output) */
.prose{font-size:var(--fs-prose);line-height:var(--lh-prose);min-width:0;overflow-wrap:break-word;word-wrap:break-word}
.prose>*{margin-bottom:22px}
.prose h2{margin:56px 0 18px;font-size:clamp(26px,3vw,34px)}
.prose h3{margin:38px 0 12px}
.prose h4{margin:28px 0 10px}
.prose p{color:var(--text)}
.prose a{color:var(--brand-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,229,195,.4)}
.prose a:hover{text-decoration-color:var(--brand-2)}
.prose ul,.prose ol{margin-left:4px}
.prose ul li{position:relative;padding:5px 0 5px 26px}
.prose ul li::before{content:'';position:absolute;left:6px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--grad)}
.prose ol{counter-reset:n}
.prose ol li{position:relative;padding:5px 0 5px 36px;counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:8px;width:24px;height:24px;border-radius:50%;background:var(--grad);color:var(--on-grad);font-family:var(--font-mono);font-size:12px;display:grid;place-items:center;font-weight:600}
.prose blockquote,.prose .wp-block-quote{padding:26px 30px;border-radius:var(--r-lg);border-left:3px solid transparent;border-image:var(--grad) 1;background:var(--surface);font-family:var(--font-head);font-size:22px;font-weight:500;line-height:1.4}
.prose blockquote p{color:var(--text);margin:0}
.prose blockquote cite{display:block;font-family:var(--font-body);font-size:var(--fs-small);color:var(--muted);margin-top:12px;font-style:normal}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.prose th{font-family:var(--font-head);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.prose td{color:var(--muted)}.prose td:first-child{color:var(--text);font-weight:500}
.prose pre,.prose .wp-block-code{background:var(--code-bg);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:22px;overflow-x:auto;max-width:100%;font-size:13.5px;line-height:1.7;color:#e8ebf7}
.prose p code,.prose li code{background:var(--surface);border:1px solid var(--border);padding:2px 7px;border-radius:6px;font-size:.9em}
.prose img,.prose figure{border-radius:var(--r-md)}
.prose figcaption{font-size:var(--fs-xs);color:var(--muted);text-align:center;margin-top:8px}
.prose hr{border:0;border-top:1px solid var(--border);margin:40px 0}
.prose .callout{padding:24px 26px;border-radius:var(--r-md);border:1px solid rgba(0,229,195,.35);background:linear-gradient(135deg,rgba(124,92,255,.08),rgba(0,229,195,.06))}
.prose .callout b{display:block;font-family:var(--font-head);margin-bottom:6px;color:var(--text)}
.prose .callout p{color:var(--muted);margin:0;font-size:var(--fs-body)}

/* ---------- Layout primitives ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--sec-pad) 0;position:relative}
.alt-bg{background:var(--bg-2);border-block:1px solid var(--border)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:50px;flex-wrap:wrap}
.sec-head>div{max-width:680px}
.sec-head p{margin-top:16px;font-size:17px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;background:var(--brand);color:#fff;border-radius:8px}
.skip-link:focus{left:8px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ---------- Motion primitives ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s var(--ease) both}
::view-transition-new(root){animation:vt-in .6s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-16px) scale(.99)}}
@keyframes vt-in{from{opacity:0;transform:translateY(20px)}}
body.leaving{opacity:0;transform:translateY(-12px);transition:.3s var(--ease)}

.in-up{opacity:0;transform:translateY(40px);animation:up .9s var(--ease-out) forwards;animation-delay:calc(.2s + var(--d,0s))}
@keyframes up{to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv-scale{opacity:0;transform:scale(.94);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv-left{opacity:0;transform:translateX(-40px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv-right{opacity:0;transform:translateX(40px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv.in,.rv-scale.in,.rv-left.in,.rv-right.in{opacity:1;transform:none}
.stagger>.rv{transition-delay:calc(var(--i,0) * .08s)}
.clip{display:inline-block;overflow:hidden;vertical-align:bottom}
.clip>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease-out)}
.rv.in .clip>span,.clip.in>span{transform:none}

#spot{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(124,92,255,.10),transparent 45%)}
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:60}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.rv-scale,.rv-left,.rv-right,.in-up,.clip>span,.hero-visual,.chart i{opacity:1;transform:none}
}