/* Shared tokens and base styles for the Tex Painting VSL funnel (opt-in + watch pages). */
:root{
  --ground:#F5F6F0; --surface:#FFFFFF; --panel:#ECEFE4; --line:#DCE1D1;
  --ink:#12160D; --ink-2:#4B5341; --ink-3:#6C7465;
  --green:#3D6A10; --green-mid:#71B230;
  --lime:#A8D41A; --lime-hi:#BCE23F; --lime-ink:#10130A;
  --night:#0B0E08; --night-2:#13180E; --night-3:#1C2316; --night-line:#2A3320;
  --night-ink:#EEF2E6; --night-ink-2:#A9B39C; --night-ink-3:#7E8873;
  --star:#F2B01E; --err:#B42318;
  --radius:14px;
  --shadow:0 1px 2px rgba(18,22,13,.06),0 30px 60px -24px rgba(18,22,13,.35);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.55 "Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;font-variation-settings:"wdth" 100}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.wrap{width:min(1160px,100% - 32px);margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.eyebrow{font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}
.display{font-weight:850;font-variation-settings:"wdth" 82;letter-spacing:-.025em;line-height:.98;margin:0;text-wrap:balance}
.h2{font-weight:800;font-variation-settings:"wdth" 88;letter-spacing:-.02em;line-height:1.05;font-size:clamp(30px,4.4vw,48px);margin:0;text-wrap:balance}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;
  font-weight:750;font-size:17px;text-decoration:none;letter-spacing:-.005em;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn-lime{background:var(--lime);color:var(--lime-ink);box-shadow:0 10px 30px -10px rgba(168,212,26,.65),inset 0 -2px 0 rgba(0,0,0,.12)}
.btn-lime:hover{background:var(--lime-hi);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn svg{flex:none}

.topbar{position:absolute;inset:0 0 auto;z-index:5}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--night-ink);font-weight:800;letter-spacing:.02em}
.brand img{width:44px;height:44px;object-fit:contain}
.brand span{font-variation-settings:"wdth" 110;font-size:15px}
.topbar .call{color:var(--night-ink);text-decoration:none;font-weight:650;font-size:15px;display:flex;align-items:center;gap:8px}
.topbar .call small{display:block;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--night-ink-2);margin-bottom:4px}

.stars{display:inline-flex;gap:2px;color:var(--star)}
.stars svg{width:15px;height:15px}

.foot{background:var(--night);color:var(--night-ink-2);font-size:14px;padding:36px 0 110px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}
.foot b{color:var(--night-ink)}
.foot a{color:var(--night-ink-2)}
@media (min-width:900px){.foot{padding-bottom:36px}}