/* Static article pages (scripts/build-pages.mjs) — copied verbatim to dist/assets/page.css.
   These pages are plain HTML, never touched by the Vite/React bundle, so this stylesheet must
   be self-contained. The custom properties below are the SAME values declared in src/landing.css
   :root — kept in sync deliberately rather than shared via import, so a static article page never
   depends on a hashed JS/CSS bundle to render correctly. If the brand tokens in landing.css
   change, mirror the change here. */

:root{
  --ink:#020251;
  --ink-soft:#0b0a3d;
  --blue:#0a0af0;
  --blue-dark:#0707b8;
  --mint:#27e090;
  --mint-ink:#0c8f61;
  --amber:#b26a16;
  --slate:#5b6b85;

  --paper:#ffffff;
  --tint:#eef1ff;
  --tint-2:#f6f8ff;
  --slate-2:#8492b0;
  --line:rgba(12,27,51,.11);
  --line-soft:rgba(12,27,51,.07);
  --on-dark-line:rgba(255,255,255,.14);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,ui-sans-serif,sans-serif;
  --disp:Sora,var(--sans);

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(2,2,81,.06);
  --shadow-md:0 8px 24px -8px rgba(2,2,81,.16);

  --container:1152px;
  --measure:68ch;
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.6}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:4px}

.btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:14.5px;text-decoration:none;
  padding:12px 22px;border-radius:var(--r-md);border:none;transition:background .15s,transform .15s,box-shadow .15s;
}
.btn:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.topbar .bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand{font-family:var(--disp);font-weight:800;font-size:16.5px;color:var(--ink);text-decoration:none;
  letter-spacing:-.01em}
.brand span{color:var(--blue);font-weight:700}
.topnav{display:flex;align-items:center;gap:22px}
.topnav a{font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;transition:color .15s}
.topnav a:hover{color:var(--blue)}
.topnav a.cta{background:var(--blue);color:#fff;padding:8px 16px;border-radius:var(--r-full);font-weight:700}
.topnav a.cta:hover{background:var(--blue-dark);color:#fff}

/* ---------- article shell ---------- */
.article{max-width:var(--container);margin:0 auto;padding:48px 24px 100px}
.crumb{font-size:12.5px;color:var(--slate);margin-bottom:22px;max-width:var(--measure)}
.crumb a{color:var(--slate);text-decoration:none}
.crumb a:hover{color:var(--blue)}

.article > h1{
  font-family:var(--disp);font-weight:750;letter-spacing:-.02em;color:var(--ink);
  font-size:clamp(28px,4vw,42px);line-height:1.15;max-width:var(--measure);margin:0 0 18px;
}
.lede{font-size:18px;line-height:1.6;color:var(--slate);max-width:var(--measure);margin:0 0 40px}

/* ---------- prose ---------- */
.prose{max-width:var(--measure);font-size:16.5px;line-height:1.78;color:#1a1a3d}
.prose > *+*{margin-top:1.2em}
.prose h2{font-family:var(--disp);font-weight:750;color:var(--ink);font-size:26px;
  letter-spacing:-.01em;line-height:1.25;margin-top:2em}
.prose h3{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:20px;margin-top:1.7em}
.prose p{margin:1.2em 0}
.prose ul,.prose ol{padding-left:1.35em;margin:1.2em 0}
.prose li{margin:.5em 0}
.prose li>ul,.prose li>ol{margin:.5em 0}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.prose a:hover{color:var(--blue-dark)}
.prose strong{color:var(--ink);font-weight:700}
.prose blockquote{margin:1.6em 0;padding:2px 0 2px 20px;border-left:3px solid var(--blue);
  color:var(--slate);font-style:italic}
.prose hr{border:none;border-top:1px solid var(--line);margin:2.4em 0}

.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--tint);color:var(--ink-soft);padding:.15em .4em;border-radius:6px}
.prose pre{
  background:var(--ink);color:#e8ecff;padding:18px 20px;border-radius:var(--r-md);
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;line-height:1.6;font-size:14px;
}
.prose pre code{background:none;color:inherit;padding:0;font-size:1em}

/* tables scroll inside their own box on narrow viewports; the page itself never scrolls sideways */
.prose table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-collapse:collapse;font-size:15px}
.prose th,.prose td{padding:10px 16px;border:1px solid var(--line);text-align:left;white-space:normal}
.prose thead th{background:var(--tint-2);color:var(--ink);font-weight:700;white-space:nowrap}
.prose tr:nth-child(even) td{background:var(--tint-2)}

/* ---------- CTA card (every article) ---------- */
.cta-card{
  max-width:var(--measure);margin-top:56px;padding:32px;background:var(--tint);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.cta-card h2{font-family:var(--disp);font-weight:750;color:var(--ink);font-size:21px;margin:0 0 8px}
.cta-card p{color:var(--slate);font-size:15px;line-height:1.6;margin:0 0 20px;max-width:52ch}

/* ---------- related reading ---------- */
.rel{max-width:var(--measure);margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.rel h2{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:15px;
  text-transform:uppercase;letter-spacing:.05em;margin:0 0 14px}
.rel ul{list-style:none;margin:0;padding:0}
.rel li{border-top:1px solid var(--line-soft)}
.rel li:first-child{border-top:none}
.rel a{display:block;padding:14px 0;color:var(--ink);font-weight:600;font-size:15.5px;
  text-decoration:none}
.rel a:hover{color:var(--blue)}

/* ---------- insights hub cards ---------- */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;
  max-width:none}
.cards li a{display:block;height:100%;padding:22px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.cards li a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(10,10,240,.18)}
.cards h3{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:17px;margin:0 0 8px}
.cards p{color:var(--slate);font-size:13.5px;line-height:1.55;margin:0}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--slate-2);padding:40px 0}
.foot p{color:#fff;font-family:var(--disp);font-weight:700;font-size:15px;margin:0 0 14px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot nav a{color:#cdd7ea;font-size:13px;text-decoration:none}
.foot nav a:hover{color:var(--mint)}
.foot p.entity{color:var(--slate-2);font-family:inherit;font-weight:400;font-size:12.5px;line-height:1.6;margin:0 0 14px}
.foot p.entity a{color:#cdd7ea}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .topnav{gap:12px}
  .topnav a:not(.cta){display:none}
  .cards{grid-template-columns:1fr}
  .cta-card{padding:22px}
}