/* Learning Brain — shared styles (new design system, 2026-04-22)
 * Used by /about, /connect, /privacy. Index.html has its own inline styles
 * that match these tokens exactly.
 */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#fafaf7;
  --panel:#ffffff;
  --code:#0e1116;
  --code-alt:#171b22;
  --code-deep:#0a0d12;
  --ink:#0e1116;
  --muted:#6a6a62;
  --muted-strong:#3d3d38;
  --rule:#e6e3da;
  --rule-soft:#f0ede4;
  --accent:#3730a3;
  --accent-soft:#e5e3f4;
  --green-bright:#4ade80;
  --red:#b91c1c;
  --red-soft:#fee2e2;
  --amber:#b45309;
  --amber-soft:#fef3c7;
  --display:'Inter Tight',-apple-system,system-ui,sans-serif;
  --body:'Inter',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Legacy aliases for existing per-page style overrides. */
  --fg:var(--ink);
  --fg-2:var(--muted-strong);
  --fg-3:var(--muted);
  --fg-4:var(--rule);
  --bg-2:var(--panel);
  --bg-3:var(--rule-soft);
  --line:var(--rule);
  --line-2:var(--rule);
  --sans:var(--body);
}

html{scroll-behavior:smooth;background:var(--bg)}
body{
  font-family:var(--body);color:var(--ink);background:var(--bg);
  font-size:14px;line-height:1.5;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}

/* ── Animations ───────────────────────────── */
@keyframes lb-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}
@keyframes lb-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.dot-live{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);animation:lb-pulse 1.6s ease-in-out infinite;flex-shrink:0}
.cursor{display:inline-block;width:.55ch;height:1em;background:var(--accent);vertical-align:text-bottom;animation:lb-blink 1s step-end infinite;margin-left:2px}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ── Layout primitives ────────────────────── */
.wrap{max-width:1440px;margin:0 auto;padding:0 40px}
.wrap-narrow{max-width:1080px;margin:0 auto;padding:0 40px}
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 40px}
.sect{padding:80px 0;border-top:1px solid var(--rule)}
.sect-panel{background:var(--panel)}
.sect-hdr{display:flex;justify-content:space-between;align-items:baseline;gap:32px;margin-bottom:40px;flex-wrap:wrap}
.eyebrow,.kicker{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.12em;font-weight:500;text-transform:uppercase}
.sect-title{font-family:var(--display);font-size:clamp(32px,4vw,48px);font-weight:600;letter-spacing:-.03em;line-height:1.02;color:var(--ink);margin-top:10px;max-width:22ch}
.sect-title em{font-style:normal;color:var(--accent)}
.sect-hdr-meta{font-family:var(--mono);font-size:12px;color:var(--muted);max-width:280px;text-align:right;line-height:1.5}

/* ── Nav (old .hdr class kept as alias) ──── */
.hdr,.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;border-bottom:1px solid var(--rule);
  background:var(--bg);position:sticky;top:0;z-index:50;
}
.hdr-inner{display:contents}
.nav-left{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand-name{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.logo-mark{width:22px;height:22px;flex-shrink:0}
.hdr-right,.nav-mid{display:flex;gap:24px;align-items:center;font-size:13px;color:var(--muted)}
.hdr-right a,.nav-mid a{cursor:pointer;transition:color .12s}
.hdr-right a:hover,.nav-mid a:hover{color:var(--accent)}
.hdr-cta,.btn-ink{
  padding:8px 14px;background:var(--ink);color:var(--bg) !important;
  font-weight:500;border-radius:6px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .15s,transform .1s;
}
.hdr-cta:hover,.btn-ink:hover{background:#262626;color:var(--bg) !important}
.hdr-cta:active,.btn-ink:active{transform:translateY(1px)}

/* ── Page hero (shared) ───────────────────── */
.page-hero,.about-hero,.privacy-hero,.connect-hero{padding:72px 0 56px;border-bottom:1px solid var(--rule)}
.page-hero .kicker,.about-hero .kicker,.privacy-hero .kicker,.connect-hero .kicker{margin-bottom:18px;display:block}
.page-hero h1,.about-hero h1,.privacy-hero h1,.connect-hero h1{
  font-family:var(--display);font-size:clamp(40px,5.2vw,64px);font-weight:600;
  letter-spacing:-.035em;line-height:.98;color:var(--ink);max-width:22ch;text-wrap:pretty;
}
.page-hero h1 em,.about-hero h1 em,.privacy-hero h1 em,.connect-hero h1 em{font-style:normal;color:var(--accent)}
.page-hero .lead,.about-hero .lead,.privacy-hero .lead,.connect-hero .lead{
  font-family:var(--body);font-size:19px;line-height:1.55;color:var(--muted-strong);
  margin-top:20px;max-width:58ch;
}
.page-hero .lead + .lead,.connect-hero .lead + .lead{margin-top:12px}

/* ── Main content container ──────────────── */
.content{min-height:40vh}
.page-main{padding:56px 0 96px}

/* ── Content prose ───────────────────────── */
.content h2{
  font-family:var(--display);font-size:clamp(26px,3.4vw,34px);font-weight:600;
  letter-spacing:-.025em;line-height:1.1;color:var(--ink);max-width:26ch;
  margin:72px 0 20px;
}
.content h2:first-of-type{margin-top:0}
.content h2 em{font-style:normal;color:var(--accent)}
.content h3{
  font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:-.018em;color:var(--ink);margin:32px 0 10px;
}
.content p{font-size:17px;line-height:1.65;color:var(--muted-strong);margin-bottom:14px;max-width:68ch}
.content p.lead{font-size:20px;max-width:58ch;color:var(--muted-strong)}
.content strong{color:var(--ink);font-weight:600}
.content em{color:var(--accent);font-style:normal}
.content a{color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:1px;transition:color .12s,border-color .12s}
.content a:hover{color:var(--accent)}
/* Override link styles when applied to button anchors inside .content */
.content a.btn,
.content a.btn-primary,
.content a.btn-p{padding:13px 22px;border-bottom:none}
.content a.btn-secondary,
.content a.btn-s{padding:13px 22px;border-bottom:none}
.content a.btn-ink,
.content a.hdr-cta{padding:8px 14px;border-bottom:none}
.content a.dl-skill{padding:9px 14px;border:1px solid var(--rule)}
.content a.btn:hover,
.content a.btn-primary:hover,
.content a.btn-p:hover,
.content a.btn-ink:hover,
.content a.hdr-cta:hover{color:var(--bg)}
.content a.btn-secondary:hover,
.content a.btn-s:hover{color:var(--ink)}
.content a.dl-skill:hover{color:var(--bg);border-color:var(--ink)}
.content ul{list-style:none;padding:0;margin:0 0 24px;max-width:64ch}
.content ul li{
  margin-bottom:12px;padding-left:22px;position:relative;
  font-size:16.5px;line-height:1.6;color:var(--muted-strong);letter-spacing:-.005em;
}
.content ul li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:8px;height:8px;background:var(--accent);border-radius:50%;
}
.content ul li strong{color:var(--ink);font-weight:600}
.content ul li code,.content p code,.content td code{font-family:var(--mono);font-size:13.5px;background:var(--rule-soft);padding:2px 6px;border-radius:4px;color:var(--ink);border:1px solid var(--rule);letter-spacing:0}
.content .plain-list{list-style:none;padding:0}
.content .plain-list li{padding-left:0}
.content .plain-list li::before{display:none}
.content table{
  width:100%;border-collapse:collapse;margin:16px 0 28px;font-size:15px;
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--panel);
}
.content table th,.content table td{
  padding:14px 18px;text-align:left;border-bottom:1px solid var(--rule);
  vertical-align:top;color:var(--muted-strong);line-height:1.55;
}
.content table th{
  font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;background:var(--bg);
}
.content table tr:last-child td{border-bottom:none}
.content table td strong{color:var(--ink)}

/* ── Highlight + pull patterns ────────────── */
.highlight-box{
  background:var(--panel);border:1px solid var(--rule);
  border-radius:10px;padding:24px 28px;margin:28px 0;max-width:80ch;
}
.highlight-box p{max-width:none}
.highlight-box p:last-child,.highlight-box ul:last-child{margin-bottom:0}
.highlight-box p strong{color:var(--ink)}
.pull-note,blockquote.pull-note{
  margin:32px 0;padding:24px 28px;
  background:var(--panel);border:1px solid var(--rule);border-radius:12px;
  max-width:80ch;
}
.pull-note p,blockquote.pull-note p{
  font-family:var(--display);font-weight:500;font-size:19px;line-height:1.45;
  letter-spacing:-.02em;color:var(--ink);margin:0;max-width:none;
}

/* ── Ending / CTA row ────────────────────── */
.ending{margin-top:72px;padding-top:40px;border-top:1px solid var(--rule);max-width:68ch}
.ending p{font-size:16px;color:var(--muted)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0}
.btn,.btn-primary,.btn-p{
  padding:13px 22px;background:var(--ink);color:var(--bg) !important;
  font-size:14px;font-weight:500;border-radius:8px;cursor:pointer;
  border:1px solid var(--ink);transition:background .15s,transform .1s;
  display:inline-flex;align-items:center;gap:6px;
}
.btn:hover,.btn-primary:hover,.btn-p:hover{background:#262626;color:var(--bg) !important}
.btn:active,.btn-primary:active,.btn-p:active{transform:translateY(1px)}
.btn-secondary,.btn-s{
  padding:13px 22px;border:1px solid var(--rule);color:var(--ink) !important;
  background:var(--panel);font-size:14px;font-weight:500;border-radius:8px;
  cursor:pointer;transition:border-color .15s,background .15s;
  display:inline-flex;align-items:center;gap:6px;
}
.btn-secondary:hover,.btn-s:hover{border-color:var(--muted);background:var(--rule-soft);color:var(--ink) !important}

/* ── Code block + click-path styles ──────── */
.codeblock,span.codeblock{
  display:block;font-family:var(--mono);font-size:13px;color:#e6e7eb;
  background:var(--code);padding:12px 14px;border-radius:6px;
  margin:8px 0;line-height:1.55;white-space:pre-wrap;word-break:break-word;
  border:1px solid var(--code);
}
code{font-family:var(--mono);font-size:13.5px;background:var(--rule-soft);padding:2px 6px;border-radius:4px;color:var(--ink);border:1px solid var(--rule);letter-spacing:0}
.click-path{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink);
  background:var(--rule-soft);border:1px solid var(--rule);
  padding:2px 8px;border-radius:4px;letter-spacing:0;
}
.click-path code{background:transparent;border:none;padding:0}
.click-path .arrow{color:var(--muted);font-size:12px}
.copy{
  display:inline-block;margin-top:6px;padding:5px 11px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
  background:var(--panel);border:1px solid var(--rule);border-radius:4px;
  cursor:pointer;transition:all .12s;
}
.copy:hover{color:var(--ink);border-color:var(--muted)}
.copy.ok{color:var(--accent);border-color:var(--accent)}

/* ── Footer ──────────────────────────────── */
footer{padding:64px 40px 40px;background:var(--code);color:#9ea2ad}
.foot-inner{max-width:1360px;margin:0 auto}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand-name{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.024em;color:#fff}
.foot-tagline{font-size:13px;margin-top:20px;max-width:320px;line-height:1.55}
.foot-col-h{color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.foot-col a{display:block;font-size:13px;line-height:2;color:#9ea2ad;transition:color .12s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{
  margin-top:48px;padding-top:20px;border-top:1px solid #2a2f38;
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:11px;color:#6a6a62;flex-wrap:wrap;
}

/* ── Responsive ──────────────────────────── */
@media(max-width:1100px){
  .foot-grid{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .foot-grid > div:first-child{grid-column:1 / -1}
}
@media(max-width:720px){
  .wrap,.wrap-narrow,.wrap-wide{padding:0 20px}
  .nav,.hdr{padding:14px 20px}
  .nav-mid,.hdr-right{gap:16px}
  .nav-mid{display:none}
  .hdr-right a:not(.hdr-cta){display:none}
  .page-hero,.about-hero,.privacy-hero,.connect-hero{padding:56px 0 40px}
  .page-main{padding:40px 0 72px}
  .sect{padding:56px 0}
  .content h2{margin-top:56px}
  footer{padding:48px 20px 32px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-bottom{flex-direction:column;gap:8px}
}