/* Pave test site: tokens, @font-face, base, type, buttons, icons, focus, grain (PAGE, SPEC §2). */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url('/assets/fonts/instrument-sans-latin-ext.woff2?v=1') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url('/assets/fonts/instrument-sans-latin.woff2?v=1') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* colour */
  --paper:#EFEEEA;            /* light table, final screen */
  --paper-2:#E2E0DA;          /* tile backs */
  --ink:#141416;              /* text on paper */
  --ink-2:rgba(20,20,22,.64); /* secondary on paper, 5.2:1 */
  --line-ink:rgba(20,20,22,.12);
  --night:#0B0C0E;            /* the page */
  --night-2:#141518;          /* dialogs, small pills, raised surfaces */
  --light:#EDECE7;            /* text on night, primary button */
  --light-2:rgba(237,236,231,.64); /* secondary on night, 7.1:1 */
  --light-3:rgba(237,236,231,.40); /* NON-text only: waveform, unplayed bars, tick marks */
  --line:rgba(237,236,231,.12);    /* hairlines on night */
  --error:#F08C7C;            /* error text + the invalid field's 1 px border, nothing else */
  /* resolved theme (night by default; [data-theme="paper"] scopes flip it) */
  --bg:var(--night); --fg:var(--light); --fg-2:var(--light-2); --hair:var(--line);
  /* type */
  --font:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  /* motion: the whole vocabulary */
  --e-out:cubic-bezier(.22,1,.36,1);    /* GSAP CustomEase 'out'   : reveals, settles, landings */
  --e-cine:cubic-bezier(.5,0,.15,1);    /* 'cine'  : the big moves (camera, gather, expand, FLIPs) */
  --e-sweep:cubic-bezier(.65,0,.35,1);  /* 'sweep' : playhead sweeps, wipes, hairline draws */
  --e-exit:cubic-bezier(.6,0,.8,.4);    /* 'exit'  : things leaving */
  --e-dim:cubic-bezier(.33,1,.68,1);    /* = power2.out : lights down / lights up ONLY */
  --t-1:.2s; --t-2:.4s; --t-3:.6s; --t-4:.9s; --t-5:1.4s; --t-6:2s;
  /* layout */
  --gutter:48px; --nav-h:72px;
  --r-tile:3px; --r-card:6px; --r-frame:14px; --r-monitor:12px; --r-sheet:24px;
  --shadow-lift:0 30px 60px -30px rgba(0,0,0,.8);   /* the ONE drop shadow: monitor + theater video */
}
@media (max-width:767px){:root{--gutter:24px;--nav-h:64px}}
[data-theme="paper"]{--bg:var(--paper);--fg:var(--ink);--fg-2:var(--ink-2);--hair:var(--line-ink)}
html{color-scheme:dark;background:var(--night);color:var(--light);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[data-intro="full"]{color-scheme:light;background:var(--intro-bg,var(--paper))} /* the scrollbar follows the room */
body{margin:0;background:transparent}

/* ---- additions (PAGE): the text colour on the primary button follows the theme, and the resolved theme
   tokens are registered so a scope can transition them (the final section's lights up, the nav's paper switch). */
:root{--on-fg:#111}
[data-theme="paper"]{--on-fg:var(--paper)}
/* a paper scope that is not lit yet (the final section before its lights come up) resolves to night */
[data-theme="paper"].unlit{--bg:var(--night);--fg:var(--light);--fg-2:var(--light-2);--hair:var(--line);--on-fg:#111}
@property --bg{syntax:'<color>';inherits:true;initial-value:#0B0C0E}
@property --fg{syntax:'<color>';inherits:true;initial-value:#EDECE7}
@property --fg-2{syntax:'<color>';inherits:true;initial-value:rgba(237,236,231,.64)}
@property --hair{syntax:'<color>';inherits:true;initial-value:rgba(237,236,231,.12)}
@property --on-fg{syntax:'<color>';inherits:true;initial-value:#111}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
body{color:var(--fg);font-size:16px;line-height:1.55;font-synthesis:none}
h1,h2,h3,p,figure,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
img,video,svg{display:block}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
::selection{background:rgba(237,236,231,.24)}
[data-theme="paper"] ::selection{background:rgba(20,20,22,.14)}
.tnum,[data-copy="data"]{font-variant-numeric:tabular-nums}

/* ---- type scale (one family) */
.display-1,.display-2,.h2{font-weight:600;font-stretch:84%;margin:0}
.display-1{letter-spacing:-.052em;line-height:.95;font-size:clamp(56px,min(4.6vw,10.5vh),96px)}
.display-2{letter-spacing:-.052em;line-height:.95;font-size:clamp(56px,5.6vw,116px)}
.h2{letter-spacing:-.045em;line-height:.98;font-size:clamp(40px,3.6vw,72px)}
.h3{font-weight:550;font-stretch:100%;letter-spacing:-.015em;line-height:1.25;font-size:22px}
.stat{font-weight:600;font-stretch:80%;letter-spacing:-.04em;line-height:.9;font-size:clamp(72px,8.4vw,164px);font-variant-numeric:tabular-nums}
.stat .unit{font-size:.5em;font-weight:500;margin-left:.08em;letter-spacing:-.02em;word-spacing:-.26em}
.lead{font-weight:400;font-stretch:100%;letter-spacing:-.005em;line-height:1.45;font-size:19px;color:var(--fg-2)}
.lead b{color:var(--fg);font-weight:500}
.body{font-weight:400;line-height:1.55;font-size:16px}
.eyebrow{font-weight:500;letter-spacing:.01em;line-height:1.2;font-size:13px;color:var(--fg-2)}
.fine,.label{font-weight:450;line-height:1.4;font-size:13px;color:var(--fg-2)}
.label{font-variant-numeric:tabular-nums}
.wordmark{font-weight:650;font-stretch:90%;letter-spacing:-.04em;font-size:22px;line-height:1;text-decoration:none;color:var(--fg)}
@media (max-height:799px) and (min-width:768px){
  .h2{font-size:44px}
  .lead{font-size:17px}
  .stat{font-size:96px}
}
@media (max-width:767px){
  .display-1{font-size:46px}
  .display-2{font-size:44px}
  .h2{font-size:40px}
  .h3{font-size:19px}
  .stat{font-size:56px}
  .lead{font-size:16px;line-height:1.5}
  .wordmark{font-size:20px}
}

/* ---- buttons */
.btn,.btn-pill{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;text-decoration:none;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;user-select:none;
  transition:filter var(--t-1) ease,transform .15s var(--e-out),box-shadow var(--t-1) ease,background-color var(--t-1) ease,color var(--t-1) ease}
.btn{height:48px;padding:0 24px;font-size:16px;font-weight:550;letter-spacing:-.01em;line-height:1}
.btn-pill{height:36px;padding:0 14px;font-size:14px;font-weight:500;letter-spacing:-.005em;line-height:1;gap:8px}
.btn-primary{background:var(--fg);color:var(--on-fg)}
.btn-secondary{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px rgba(237,236,231,.24);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 24%,transparent)}
[data-theme="paper"] .btn-secondary{box-shadow:inset 0 0 0 1px rgba(20,20,22,.24);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 24%,transparent)} /* fallbacks: Safari < 16.2 has no color-mix() */
.btn-primary:hover{filter:brightness(.94)}
.btn-secondary:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 50%,transparent)}
.btn:active,.btn-pill:active{transform:scale(.98)}
.btn .i-arrow,.btn-pill .i-arrow{flex:none;margin-left:8px;transition:transform .3s var(--e-out)}
.btn:hover .i-arrow,.btn-pill:hover .i-arrow{transform:translateX(2px)}
.btn-block{display:flex;width:100%}
@media (max-width:767px){.btn{height:52px}}

/* ---- focus (thin, light rings; never thick black) */
:focus-visible{outline:2px solid rgba(237,236,231,.55);outline-offset:3px}
[data-theme="paper"] :focus-visible{outline-color:rgba(20,20,22,.45)}
[data-theme="paper"].unlit :focus-visible{outline-color:rgba(237,236,231,.55)}
.input:focus-visible{outline:none;border-color:rgba(237,236,231,.6);box-shadow:0 0 0 3px rgba(237,236,231,.08)}

/* ---- grain */
body::after{content:'';position:fixed;inset:-10%;pointer-events:none;z-index:200;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(-2%,1%)}25%{transform:translate(1%,-2%)}50%{transform:translate(-1%,2%)}75%,100%{transform:translate(2%,-1%)}}
html[data-motion="paused"] body::after{animation:none}
@media (pointer:coarse){body::after{animation:none}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}