/* Shared shell for the text pages (child safety, investors). index.html keeps its CSS
   inline because its h1 is the LCP element; these pages are read, not landed on, so one
   cached stylesheet beats duplicating the tokens twice. */
:root{
  --bg:#FAF7F2; --paper:#F2EDE4; --ink:#161513; --ink-soft:#54514B; --hair:#E2DACD;
  --green:#0F6E56; --amber:#B8862B;
  --display:"Fraunces",Georgia,serif; --body:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/fraunces-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/fraunces-italic-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-normal-400-600.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-normal-400-500.woff2) format('woff2')}

*{box-sizing:border-box}
html{color-scheme:light; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.65; letter-spacing:-.005em; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
/* padding-block, never the shorthand — .wrap's inline gutter has to survive. */
.wrap{max-width:760px; margin:0 auto; padding:0 24px}

header{border-bottom:1px solid var(--hair)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:13px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
/* Lifted 3px: centres the mark on the wordmark's cap band rather than its box. */
.brand .mark{height:26px; width:26px; transform:translateY(-3px)}
.brand img{height:28px; width:auto}
.back{font-size:.94rem; color:var(--ink-soft); text-decoration:none}
.back:hover{color:var(--ink)}

main{padding-block:clamp(34px,6vw,64px) clamp(48px,8vw,88px)}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
h1{font-family:var(--display); font-weight:600; letter-spacing:-.02em; font-size:clamp(2rem,5vw,3rem); line-height:1.05; margin:14px 0 10px}
h2{font-family:var(--display); font-weight:600; letter-spacing:-.02em; font-size:clamp(1.3rem,2.6vw,1.6rem); line-height:1.2; margin:2.2em 0 .6em}
h3{font-family:var(--display); font-weight:600; font-size:1.1rem; margin:1.8em 0 .4em}
p{margin:0 0 1.05em}
.lede{font-size:1.15rem; color:var(--ink-soft); margin-bottom:2em}
ul,ol{padding-left:1.2em; margin:0 0 1.2em}
li{margin-bottom:.6em}
strong,b{font-weight:600}
em{font-style:italic}
hr{border:0; border-top:1px solid var(--hair); margin:2.6em 0}
.updated{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-soft)}
.callout{background:var(--paper); border-radius:16px; padding:22px 24px; margin:0 0 1.6em}
.callout p:last-child{margin:0}
a.link{border-bottom:1px solid var(--hair); text-decoration:none}
a.link:hover{border-color:var(--ink)}

footer{border-top:1px solid var(--hair); padding-block:34px 52px; font-size:.9rem; color:var(--ink-soft)}
.foot-links{display:flex; flex-wrap:wrap; gap:20px}
.foot-links a{text-decoration:none; border-bottom:1px solid var(--hair); padding-bottom:2px}
.foot-links a:hover{border-color:var(--ink)}