/* Stride — shared styles for content / legal pages (Privacy, Terms, …).
   Sits on top of stride-tokens.css. Editorial light, brand-consistent.
   Honey is the single accent; hairlines + mono labels do the structural work. */

:root{
  --edge:#E4D8BF; --edge-soft:#EFE6D2; --acc:var(--honey-400);
  /* --max defined once in stride-nav.css (shared across all pages) */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0; background:var(--bg-primary); color:var(--text-primary);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:inherit; text-decoration:none;}
.disp{font-family:var(--font-display); letter-spacing:-.022em;}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
/* .wrap + --max are defined once in stride-nav.css (shared across all pages). */

/* ── doc header ── */
.doc-head{border-bottom:1px solid var(--edge); padding:clamp(48px,8vh,92px) 0 36px;}
.doc-head .kick{font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); display:inline-flex; align-items:center; gap:9px;}
.doc-head .kick .crumb{color:var(--text-tertiary);}
.doc-head h1{font-family:var(--font-display); font-weight:800; font-size:clamp(40px,6.5vw,80px); letter-spacing:-.035em; line-height:.98; margin:22px 0 0; color:var(--text-primary);}
.doc-head .meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:24px; font-family:var(--font-mono); font-size:12.5px; color:var(--text-tertiary); letter-spacing:.02em;}
.doc-head .meta b{color:var(--text-secondary); font-weight:500;}
.doc-head .intro{font-family:var(--font-display); font-weight:500; font-size:clamp(18px,2vw,23px); line-height:1.4; letter-spacing:-.015em; color:var(--text-secondary); margin:26px 0 0; max-width:60ch;}

/* ── doc body: sticky TOC + prose ── */
.doc{display:grid; grid-template-columns:230px 1fr; gap:clamp(40px,6vw,84px); padding:clamp(44px,7vh,80px) 0 0; align-items:start;}
.toc{position:sticky; top:90px;}
.toc .lbl{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:14px;}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:t; display:flex; flex-direction:column; gap:2px;}
.toc a{display:flex; gap:11px; padding:8px 12px; border-radius:var(--r-8); font-size:14px; color:var(--text-secondary); transition:background .2s,color .2s; counter-increment:t;}
.toc a::before{content:counter(t,decimal-leading-zero); font-family:var(--font-mono); font-size:11.5px; color:var(--text-tertiary); padding-top:1px;}
.toc a:hover{background:var(--bg-surface); color:var(--text-primary);}
.toc a.active{color:var(--acc); background:color-mix(in srgb,var(--acc) 9%,transparent);}
.toc a.active::before{color:var(--acc);}
@media (max-width:880px){.doc{grid-template-columns:1fr; gap:0;} .toc{display:none;}}

.prose{max-width:70ch; padding-bottom:clamp(56px,9vh,110px);}
.prose section{padding:8px 0 38px; border-bottom:1px solid var(--edge);}
.prose section:last-child{border-bottom:0;}
.prose section + section{padding-top:38px;}
.prose h2{font-family:var(--font-display); font-weight:700; font-size:clamp(23px,2.6vw,30px); letter-spacing:-.02em; line-height:1.15; margin:0 0 4px; color:var(--text-primary); display:flex; align-items:baseline; gap:14px; scroll-margin-top:90px;}
.prose h2 .n{font-family:var(--font-mono); font-size:14px; font-weight:500; color:var(--acc); letter-spacing:.02em;}
.prose h3{font-family:var(--font-display); font-weight:700; font-size:17.5px; letter-spacing:-.01em; margin:26px 0 8px; color:var(--text-primary);}
.prose p{font-size:16.5px; line-height:1.66; color:var(--text-secondary); margin:14px 0 0;}
.prose p:first-of-type{margin-top:16px;}
.prose strong{color:var(--text-primary); font-weight:700;}
.prose a.link{color:var(--acc); font-weight:600; border-bottom:1.5px solid color-mix(in srgb,var(--acc) 40%,transparent); transition:border-color .2s;}
.prose a.link:hover{border-bottom-color:var(--acc);}
.prose ul{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px;}
.prose ul li{position:relative; padding-left:26px; font-size:16.5px; line-height:1.6; color:var(--text-secondary);}
.prose ul li::before{content:""; position:absolute; left:4px; top:11px; width:7px; height:7px; border-radius:2px; background:var(--acc); transform:rotate(45deg);}
.prose ul li strong{color:var(--text-primary);}

/* callout card */
.callout{margin:22px 0 4px; border:1px solid var(--edge); background:var(--bg-surface); border-radius:var(--r-16); padding:20px 22px; display:flex; gap:15px; align-items:flex-start;}
.callout .ci{width:40px; height:40px; border-radius:var(--r-12); background:var(--honey-50); color:var(--acc); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;}
.callout .ct{font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--text-primary);}
.callout .cs{font-size:14.5px; line-height:1.55; color:var(--text-secondary); margin-top:4px;}

/* ── reveal (robust: hidden only under no-preference, JS + hard fallback) ── */
.rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--e-out), transform .7s var(--e-out); transition-delay:var(--d,0s);}
}

/* ── footer (shared with landing) ── */
.foot{background:var(--bark-500); color:var(--cream-200); padding:64px 0 34px; margin-top:0;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;}
.foot .brand{color:var(--cream-50); margin-bottom:14px;}
.foot .brand .brand-mark{background:linear-gradient(155deg,#F2C374,#E59A2E 46%,#C7831F);}
.foot-tag{font-size:14px; line-height:1.55; color:var(--cream-300); max-width:30ch; opacity:.82;}
.foot-col h5{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-300); opacity:.7; margin:0 0 16px;}
.foot-col a{display:block; font-size:14.5px; color:var(--cream-200); padding:6px 0; opacity:.85; transition:opacity .2s,color .2s;}
.foot-col a:hover{opacity:1; color:var(--honey-300);}
.foot-col a.on{color:var(--honey-300); opacity:1;}
.foot-bar{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); font-family:var(--font-mono); font-size:12px; color:var(--cream-300); opacity:.72; letter-spacing:.02em;}
.foot-bar .made i{color:var(--coral-400);}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr;}}

/* ── language switcher (dark footer) ── */
.lang-switch{display:inline-flex; align-items:center; gap:2px; border:1px solid rgba(255,255,255,.16); border-radius:var(--r-full); padding:3px; font-family:var(--font-mono);}
.lang-switch a{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-300); opacity:.8; padding:5px 11px; border-radius:var(--r-full); transition:background .2s,color .2s,opacity .2s;}
.lang-switch a:hover{opacity:1; color:var(--honey-300);}
.lang-switch a.on{background:var(--honey-400); color:var(--bark-500); opacity:1;}