/* Screening Room — design tokens shared by every page of the Hook Library funnel (see ../DESIGN.md).
   Night = where the tool plays. Day = where the founder reads. Orange = evidence + the action, nothing else. */
@font-face{font-family:'Mona Sans';src:url(fonts/MonaSans.woff2) format('woff2');font-weight:200 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(fonts/PlusJakartaSans.woff2) format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(fonts/JetBrainsMono-500.woff2) format('woff2');font-weight:500;font-display:swap}
:root{
  --night:#0E0E0E; --night-2:#191919; --night-3:#232323; --day:#FFFFFF; --fog:#F4F4F4;
  --signal:#FF5100; --signal-hi:#E84A00; --signal-50:#FFF4EE; --signal-100:#FFE6D8; --ember:#B23A00;
  --ink:#0E0E0E; --graphite:#555555; --ash:#A6A6A6; --rule:#E4E4E4; --rule-n:rgba(255,255,255,.12);
  --display:'Mona Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ui:'Plus Jakarta Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --g:20px; --max:1200px; --r-frame:18px; --r-panel:14px; --r-ctl:12px;
  --ease:cubic-bezier(.22,1,.36,1);
  --z-sticky:20; --z-bar:30; --z-modal:60; --z-toast:90;
}
@media (min-width:900px){:root{--g:40px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--day);color:var(--ink);font:430 17px/1.55 var(--display);font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:900px){body{font-size:18px;line-height:1.6}}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{width:100%;max-width:calc(var(--max) + var(--g)*2);margin:0 auto;padding:0 var(--g)}
.night{background:var(--night);color:#fff}
.night .muted{color:var(--ash)}
.muted{color:var(--graphite)}
.fog{background:var(--fog)}
h1,h2,h3{font-family:var(--display);font-weight:800;font-stretch:88%;letter-spacing:-.032em;line-height:1.0;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,9.6vw,88px)}
h2{font-size:clamp(32px,6.4vw,60px)}
h3{font-size:24px;line-height:1.15;letter-spacing:-.02em}
p{margin:0;text-wrap:pretty}
.lede{font-size:19px;line-height:1.5;max-width:40ch}
@media (min-width:900px){.lede{font-size:21px}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border-radius:var(--r-ctl);border:0;cursor:pointer;
  background:var(--signal);color:#fff;font:750 19px/1 var(--display);font-stretch:96%;letter-spacing:-.005em;text-decoration:none;
  transition:background .15s var(--ease),transform .15s var(--ease);-webkit-tap-highlight-color:transparent}
.btn:hover{background:var(--signal-hi)}
.btn:active{transform:scale(.98)}
.btn:focus-visible,.focusable:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px var(--signal)}
.day .btn:focus-visible,.fog .btn:focus-visible{outline-color:var(--ink)}
.btn.ghost{background:transparent;color:inherit;border:1.5px solid currentColor}
.btn.wide{width:100%}
.micro{font-size:14px;line-height:1.4;color:var(--graphite)}
.night .micro{color:var(--ash)}
.tag-sample{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--fog);color:var(--graphite);font:650 12px/22px var(--display);border:1px dashed #BDBDBD}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}