/* The public content pages (how it works, safety, hosting, 404). Same After
   Hours palette and type as the landing in social.html, without the app. */
:root{--night:#111a17;--cream:#f2efe5;--paper:#f6f3ea;--ink:#17201c;--muted:#56605a;--moss:#d7e8b8;--leaf:#344b38;--rule:#d9d4c6;
      --mono:"DM Mono",ui-monospace,monospace;--serif:"Instrument Serif",Georgia,serif;--sans:"DM Sans",ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans)}
a{color:var(--leaf);text-underline-offset:3px}
a:focus-visible{outline:3px solid #52713b;outline-offset:3px}
.site-header{background:var(--night);color:var(--cream);height:72px;padding:0 clamp(16px,5vw,78px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-header nav{display:flex;gap:clamp(12px,3vw,28px);flex-wrap:wrap;justify-content:flex-end}
.site-header nav a{font:12px var(--mono);color:#eee9dd;text-decoration:none;letter-spacing:.02em}
.site-header nav a[aria-current=page]{color:var(--moss)}
.logo{font:700 27px/1 var(--sans);letter-spacing:-2px;color:inherit;text-decoration:none;white-space:nowrap}
.logo span{font-size:19px;margin-left:4px;color:var(--moss)}
.hero{background:var(--night);color:var(--cream);padding:clamp(56px,9vw,112px) clamp(16px,5vw,78px) clamp(48px,7vw,88px)}
.eyebrow{font:12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--moss);margin:0 0 18px}
h1{font:400 clamp(48px,8vw,96px)/.95 var(--serif);letter-spacing:-.02em;margin:0;max-width:14ch}
h1 em,h2 em{font-style:italic}
.lede{font-size:clamp(18px,2vw,21px);max-width:38rem;margin:24px 0 0;color:#e6e2d6}
article{max-width:46rem;margin:0 auto;padding:clamp(40px,6vw,72px) 16px}
article h2{font:400 clamp(32px,4vw,44px)/1.05 var(--serif);margin:56px 0 12px}
article h2:first-child{margin-top:0}
article h3{font:600 19px/1.3 var(--sans);margin:28px 0 6px}
article p,article li{max-width:40rem}
article ol,article ul{padding-left:1.2em}
article li{margin:8px 0}
.steps{list-style:none;padding:0;counter-reset:step;display:grid;gap:20px}
.steps li{counter-increment:step;border-top:1px solid var(--rule);padding-top:18px;margin:0}
.steps li::before{content:"0" counter(step);display:block;font:12px var(--mono);color:var(--muted);margin-bottom:6px}
.steps h3{margin:0 0 4px}
.note{border-left:3px solid var(--leaf);padding:4px 0 4px 18px;margin:28px 0;color:var(--muted)}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:16px 26px;border-radius:999px;background:var(--moss);color:var(--night);font:600 16px var(--sans);text-decoration:none}
.cta:hover{background:#e4f1cc}
.related{border-top:1px solid var(--rule);margin-top:64px;padding-top:24px;font-size:15px}
.related a{margin-right:20px}
.site-footer{background:var(--night);color:#cfcabd;padding:32px clamp(16px,5vw,78px);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;font:12px var(--mono)}
.site-footer a{color:#eee9dd;text-decoration:none}
@media(max-width:600px){.site-header{height:64px}.site-header nav a:not(:last-child){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}