/* Shared stylesheet for the /guides pages. Tokens mirror public/welcome.html —
   if the welcome page's palette changes, change it here too. Guides follow the
   device theme via prefers-color-scheme, with data-theme hooks kept in step
   with welcome.html for when a manual toggle arrives. */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;src:url(/welcome-assets/fraunces-100-900.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;src:url(/welcome-assets/montserrat-600.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;src:url(/welcome-assets/montserrat-700.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;src:url(/welcome-assets/montserrat-800.woff2) format('woff2');font-display:swap;}

:root{
  color-scheme:light;
  --ink:#0e1c2b; --ink-700:#15293b; --ink-600:#1d3346;
  --teal:#178582; --teal-700:#11605e; --teal-300:#3fb5b1; --teal-50:#e4f1f0;
  --amber:#e9a13c;
  --paper:#f4f2ee;
  --band:#eceae4;
  --card:#ffffff;
  --strong:#14202b; --body:#37444f; --dim:#5c6a75; --muted:#7b8891; --faint:#9aa5ac;
  --hairline:rgba(14,28,43,.09); --line:rgba(14,28,43,.14);
  --shadow:0 1px 2px rgba(14,28,43,.05),0 22px 44px -28px rgba(14,28,43,.35);
  --maxw:1120px; --measure:720px;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-brand:'Montserrat',system-ui,sans-serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --paper:#0a1420; --band:#0e1a26; --card:#152534;
    --strong:#eef3f6; --body:#c8d4dc; --dim:#9aabb5; --muted:#7f8e98; --faint:#68767f;
    --hairline:rgba(255,255,255,.08); --line:rgba(255,255,255,.14);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 24px 46px -28px rgba(0,0,0,.7);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --paper:#f4f2ee; --band:#eceae4; --card:#ffffff;
  --strong:#14202b; --body:#37444f; --dim:#5c6a75; --muted:#7b8891; --faint:#9aa5ac;
  --hairline:rgba(14,28,43,.09); --line:rgba(14,28,43,.14);
  --shadow:0 1px 2px rgba(14,28,43,.05),0 22px 44px -28px rgba(14,28,43,.35);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0a1420; --band:#0e1a26; --card:#152534;
  --strong:#eef3f6; --body:#c8d4dc; --dim:#9aabb5; --muted:#7f8e98; --faint:#68767f;
  --hairline:rgba(255,255,255,.08); --line:rgba(255,255,255,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 24px 46px -28px rgba(0,0,0,.7);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--font-body);
  font-size:17px;line-height:1.65;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img{max-width:100%;display:block;}
h1,h2,h3{margin:0;}
::selection{background:var(--teal-300);color:#08131e;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px);}
.display{font-family:var(--font-display);font-weight:560;letter-spacing:-.02em;line-height:1.06;
  text-wrap:balance;color:var(--strong);font-optical-sizing:auto;}
.eyebrow{font-family:var(--font-brand);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:11.5px;color:var(--teal-700);}
:root[data-theme="dark"] .eyebrow{color:var(--teal-300);}
@media (prefers-color-scheme:dark){ .eyebrow{color:var(--teal-300);} }
:root[data-theme="light"] .eyebrow{color:var(--teal-700);}

/* ---------- Nav (mirrors welcome.html) ---------- */
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--hairline);}
.nav__row{display:flex;align-items:center;justify-content:space-between;height:62px;}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;}
.brand__key{width:26px;height:26px;flex:none;color:var(--strong);}
.brand__word{font-family:var(--font-brand);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--strong);white-space:nowrap;}
.brand__word .k{color:var(--teal);}
.nav__cta{font-family:var(--font-brand);font-weight:700;font-size:13.5px;text-decoration:none;
  background:var(--teal);color:#fff;padding:9px 16px;border-radius:11px;transition:background .2s;white-space:nowrap;}
.nav__cta:hover{background:var(--teal-700);}

/* ---------- Article ---------- */
.article-head{padding-block:clamp(44px,8vw,84px) clamp(28px,5vw,44px);}
.article-head .display{font-size:clamp(34px,5.4vw,58px);margin-top:14px;}
.article-head .lead{max-width:var(--measure);}
.lead{font-size:clamp(17px,2.1vw,20px);color:var(--dim);line-height:1.62;text-wrap:pretty;}
.article-meta{margin-top:18px;font-family:var(--font-brand);font-weight:600;font-size:13px;color:var(--muted);}

article{padding-bottom:clamp(40px,7vw,72px);}
article > * {max-width:var(--measure);}
article p{margin:0 0 1.15em;}
article a{color:var(--teal-700);text-decoration-thickness:1px;text-underline-offset:2px;}
@media (prefers-color-scheme:dark){ article a{color:var(--teal-300);} }
:root[data-theme="dark"] article a{color:var(--teal-300);}
:root[data-theme="light"] article a{color:var(--teal-700);}
article h2{font-family:var(--font-display);font-weight:560;letter-spacing:-.015em;color:var(--strong);
  font-size:clamp(24px,3.2vw,32px);margin:1.9em 0 .55em;}
article h3{font-family:var(--font-brand);font-weight:700;font-size:16px;color:var(--strong);margin:1.6em 0 .4em;}
article ul{margin:0 0 1.2em;padding-left:1.25em;}
article li{margin-bottom:.45em;}
article li::marker{color:var(--teal);}

/* Month blocks (calendar guide) */
.month{border-top:1px solid var(--line);padding-top:1.1em;margin-top:1.6em;}
.month h2{margin-top:0;}
.month .month__note{color:var(--dim);font-style:italic;margin-top:-.2em;}

/* Callout card */
.callout{background:var(--card);border:1px solid var(--hairline);border-radius:16px;
  padding:20px 22px;box-shadow:var(--shadow);margin:1.4em 0 1.6em;}
.callout h3{margin-top:0;}
.callout p:last-child,.callout ul:last-child{margin-bottom:0;}

/* Tables */
.table-scroll{overflow-x:auto;margin:1.2em 0 1.6em;border:1px solid var(--hairline);border-radius:14px;background:var(--card);box-shadow:var(--shadow);}
table{border-collapse:collapse;width:100%;font-size:15.5px;}
th,td{text-align:left;padding:11px 16px;vertical-align:top;}
th{font-family:var(--font-brand);font-weight:700;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--line);}
td{border-bottom:1px solid var(--hairline);color:var(--body);}
tr:last-child td{border-bottom:none;}
td strong{color:var(--strong);}

.smallprint{font-size:13.5px;color:var(--muted);}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:#fff;border-radius:24px;padding:clamp(28px,5vw,44px);
  margin-block:clamp(28px,5vw,48px);}
.cta-band h2{font-family:var(--font-display);font-weight:560;letter-spacing:-.015em;
  font-size:clamp(24px,3.4vw,34px);color:#fff;margin:0 0 .4em;}
.cta-band p{color:#aebbc6;max-width:560px;margin:0 0 1.3em;}
.cta-band .btns{display:flex;gap:12px;flex-wrap:wrap;}
.btn{font-family:var(--font-brand);font-weight:700;font-size:14.5px;text-decoration:none;
  padding:12px 20px;border-radius:12px;display:inline-block;}
.btn--teal{background:var(--teal);color:#fff;}
.btn--teal:hover{background:var(--teal-700);}
.btn--ghost{border:1px solid rgba(255,255,255,.28);color:#e8eef2;}
.btn--ghost:hover{border-color:rgba(255,255,255,.5);}

/* ---------- Footer (mirrors welcome.html) ---------- */
footer{border-top:1px solid var(--hairline);background:var(--band);padding-block:34px;}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.foot__tag{color:var(--muted);font-size:14px;margin:0;}
.foot__links{display:flex;gap:18px;align-items:center;font-family:var(--font-brand);font-weight:600;font-size:13.5px;}
.foot__links a{color:var(--dim);text-decoration:none;display:inline-flex;align-items:center;gap:7px;}
.foot__links a:hover{color:var(--strong);}
.foot__links svg{width:16px;height:16px;}