/* the-wand.ai — the white system (2026-08-31 redesign). One shared skin for apex,
   /about, /privacy, blog + press. Tokens first; page-specific layout stays inline
   in each page's own <style>. Spec: docs/superpowers/specs/2026-08-31-site-white-redesign-design.md */

:root{
  --paper:#ffffff;
  --ink:#0f0f0e;
  --body:#454440;
  --muted:#6f6d68;
  --faint:#94918b;
  --line:#e8e6e2;
  --card:#fafaf9;
  --flame:#E5484D;
  --night:#0b070d;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
::selection{background:rgba(229,72,77,.14)}

.wrap{width:min(1100px,100% - clamp(32px,6vw,80px));margin:0 auto}

/* ── links ── */
a{color:inherit;text-decoration:none}
.prose a, .foot a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);text-decoration-thickness:1px}
.prose a:hover, .foot a:hover{text-decoration-color:var(--flame)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ── nav ── */
.nav{display:flex;align-items:center;gap:clamp(14px,2.5vw,28px);
  padding:clamp(16px,2.6vh,26px) 0}
.nav .mark{font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.nav .mark small{font-weight:400;color:var(--faint);font-size:.78rem;margin-left:8px;letter-spacing:0}
.nav .links{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.2vw,26px);
  font-size:.88rem;color:var(--muted)}
.nav .links a:hover{color:var(--ink)}
@media (max-width:640px){
  .nav .links a.navtext{display:none}   /* phone: wordmark + pill only */
}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);
  font-size:.88rem;font-weight:500;padding:10px 20px;border-radius:999px;border:1px solid var(--ink);
  transition:background .15s ease}
.btn:hover{background:#2a2926}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ink);
  font-size:.88rem;font-weight:500;padding:10px 20px;border-radius:999px;border:1px solid var(--line);
  transition:border-color .15s ease}
.btn-ghost:hover{border-color:var(--ink)}

/* ── labels ── */
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.eyerow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:clamp(20px,3vh,30px)}

/* ── prose (about · privacy · blog · press) ── */
.prose h1{font-weight:600;font-size:clamp(1.9rem,5vw,3rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 .5em}
.prose h2{font-weight:600;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.2;letter-spacing:-.015em;margin:clamp(36px,5.5vh,54px) 0 12px}
.prose h1 em,.prose h2 em{font-style:normal;color:var(--muted);font-weight:500}
.prose p{font-size:clamp(.98rem,1.4vw,1.06rem);color:var(--body);margin:.85em 0;max-width:68ch}
.prose p b,.prose li b{color:var(--ink);font-weight:600}
.prose ul{list-style:none;margin:.9em 0;max-width:68ch}
.prose li{position:relative;padding-left:22px;font-size:clamp(.95rem,1.35vw,1.02rem);line-height:1.62;color:var(--body);margin:.55em 0}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:2px;background:var(--flame)}
.prose .rule{border:none;border-top:1px solid var(--line);margin:clamp(30px,4.5vh,46px) 0}
.panel{border:1px solid var(--line);background:var(--card);border-radius:14px;
  padding:clamp(16px,2.4vw,24px);margin-top:24px}
.panel p{font-size:.93rem;margin:.5em 0}

/* ── footer ── */
.foot{border-top:1px solid var(--line);margin-top:clamp(48px,7vh,84px);
  padding:clamp(24px,3.5vh,36px) 0 clamp(32px,5vh,48px);
  font-size:.82rem;color:var(--muted);line-height:1.9}
.foot .ent b{color:var(--ink);font-weight:600}
.foot .dis{color:var(--faint);font-size:.78rem;max-width:70ch}
.foot .rows{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em}
.foot .rows a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.foot .rows a:hover{color:var(--ink);border-bottom-color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .btn,.btn-ghost{transition:none}
}