/* The shared system for Studio and One Deal: one header, one footer, one set of buttons and tokens.
   Primary black and white · secondary greys · tertiary accents with one job each:
   red = the marketer's thread, blue = screens (inside drawings only), lime = proof highlighter.
   Type follows The New Yorker: Caslon upright for headlines and body, a Graphik-like sans for labels,
   buttons and navigation, and almost no italics. */
:root{
  --paper:#fff;--paper-2:#f5f5f6;--ink:#26272c;--text:#303138;--muted:#696c76;--rule:#e6e6e9;--veil:rgba(38,39,44,.18);
  --sig:#e4322b;--blue:#68b7ff;--lime:#bcff6b;
  --disp:"Libre Caslon Display",Georgia,serif;--serif:"Libre Caslon Text",Georgia,serif;--sans:"Hanken Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;--mono:var(--sans);
  --out:cubic-bezier(.22,1,.36,1);--inout:cubic-bezier(.65,0,.35,1);
  --g:clamp(16px,4vw,48px);--bar:56px}

/* type scale */
.t-xl{font:400 clamp(52px,8vw,124px)/.98 var(--disp);letter-spacing:-.02em}
.t-l{font:400 clamp(40px,6vw,92px)/1 var(--disp);letter-spacing:-.02em}
.t-it{font:400 clamp(28px,4vw,60px)/1.12 var(--serif)}
em{font-style:normal}
.label{font:600 11px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* one header, everywhere in the Studio world */
.site-bar{position:fixed;z-index:60;top:0;left:0;right:0;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--g);background:#fff;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .3s;view-transition-name:site-bar}
.site-bar.scrolled{border-bottom-color:var(--rule)}
.site-name{font:400 20px/1 var(--disp);color:var(--ink);text-decoration:none;white-space:nowrap}
.site-r{display:flex;align-items:center;gap:24px}
.site-links{display:flex;gap:24px}
.site-links a{font:500 14px/1 var(--sans);color:var(--muted);text-decoration:none;padding:6px 0;background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 1px no-repeat;transition:color .3s,background-size .3s var(--out)}
.site-links a:hover,.site-links a[aria-current="page"]{color:var(--ink);background-size:100% 1px}
.btn-talk{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;text-decoration:none;padding:10px 16px;font:500 14px/1 var(--sans);white-space:nowrap;transition:gap .4s var(--out)}
.btn-talk:hover{gap:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;text-decoration:none;padding:15px 22px;font:500 15px/1 var(--sans);border:0;cursor:pointer;transition:gap .4s var(--out)}
.btn:hover{gap:20px}
.btn-o{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);text-decoration:none;padding:14px 20px;font:500 15px/1 var(--sans);border:1.5px solid var(--ink);cursor:pointer;transition:background .3s,color .3s}
.btn-o:hover,.btn-o[aria-pressed="true"]{background:var(--ink);color:#fff}
.tl{font:600 11px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:4px 0;background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat;transition:background-size .3s var(--out)}
.tl:hover{background-size:0 1px;background-position:100% 100%}

/* proof: numbers get the lime swipe, nothing else does */
.proof-hl{background:linear-gradient(transparent 58%,var(--lime) 58%,var(--lime) 92%,transparent 92%);padding:0 .06em}

/* one footer */
.site-foot{border-top:1px solid var(--rule);padding:32px var(--g) 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font:400 14px/1.4 var(--sans);color:var(--muted);background:#fff;position:relative;z-index:40}
.site-foot nav{display:flex;flex-wrap:wrap;gap:18px}
.site-foot a{color:var(--muted);text-decoration:none}.site-foot a:hover{color:var(--ink)}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:760px){.site-links{display:none}.site-r{gap:10px}.site-name{font-size:17px}.btn-talk{padding:9px 11px;font-size:14px}}
@media (max-width:380px){.btn-talk .long{display:none}.site-bar{gap:10px}.site-r{gap:8px}.btn-talk{padding:9px 10px;font-size:13px}.btn-talk span{display:none}}
@media (max-width:340px){.site-name{font-size:15px}.site-bar .modes.modes a{padding:7px 7px}}