/* State of AI — Static Pages — Shared Styles */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');

:root{--bg:#F5F3EE;--white:#FFF;--ink:#111;--mid:#444;--mu:#777;--lt:#AAA;--rule:#E2DFD8;
--shadow:0 2px 24px rgba(0,0,0,.07);--r:14px;--rs:8px;
--c1:#0038FF;--c2:#FF3800;--c3:#00A86B;--c4:#7C3AED;--c5:#C45000;--c6:#0891B2;--c7:#BE185D;--c8:#4338CA;--c9:#0D9488;--c10:#B45309}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}

/* PAGE LAYOUT */
.page{max-width:1060px;margin:0 auto;padding:48px 48px 60px}

/* TOP NAV BAR */
.topnav{position:sticky;top:0;z-index:100;background:rgba(245,243,238,.95);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--rule);margin:-48px -48px 32px;padding:10px 48px;display:flex;align-items:center;gap:8px}
.topnav .home{font-family:'DM Mono',monospace;font-size:10px;font-weight:600;color:var(--ink);text-decoration:none;padding:5px 12px;background:var(--white);border:1.5px solid var(--rule);border-radius:20px;white-space:nowrap;transition:.2s}
.topnav .home:hover{border-color:var(--ink)}
.topnav .sep{color:var(--rule);font-size:14px}
.topnav .pn{font-family:'DM Mono',monospace;font-size:10px;color:var(--lt);text-decoration:none;padding:5px 10px;border:1px solid var(--rule);border-radius:20px;transition:.2s;white-space:nowrap}
.topnav .pn:hover{color:var(--ink);border-color:var(--ink);background:var(--white)}
.topnav .pn.curr{color:var(--ink);border-color:var(--ink);background:var(--white);font-weight:600}
.topnav .spacer{flex:1}
.topnav .arrow{font-family:'DM Mono',monospace;font-size:11px;color:var(--mu);text-decoration:none;padding:5px 10px;border:1.5px solid var(--rule);border-radius:20px;transition:.2s;white-space:nowrap}
.topnav .arrow:hover{color:var(--ink);border-color:var(--ink);background:var(--white)}

/* HEADER */
.hero-sm{margin-bottom:36px}
h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(42px,5.5vw,72px);line-height:.9;letter-spacing:.01em;margin-bottom:12px}
.subtitle{font-size:15px;color:var(--mu);line-height:1.6;max-width:640px}
.subtitle strong{color:var(--ink)}

/* STAT ROW */
.stat-row{display:flex;gap:12px;margin:28px 0;flex-wrap:wrap}
.stat-card{background:var(--white);border:1.5px solid var(--rule);border-radius:var(--r);padding:16px 20px;flex:1;min-width:140px;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r) var(--r) 0 0}
.stat-card.sc-blue::before{background:var(--c1)}.stat-card.sc-green::before{background:var(--c3)}
.stat-card.sc-purple::before{background:var(--c4)}.stat-card.sc-orange::before{background:var(--c5)}
.stat-card.sc-red::before{background:var(--c2)}.stat-card.sc-cyan::before{background:var(--c6)}
.stat-card.sc-teal::before{background:var(--c9)}.stat-card.sc-amber::before{background:var(--c10)}
.stat-val{font-family:'Bebas Neue',sans-serif;font-size:38px;line-height:1;margin-bottom:3px}
.stat-val.v-blue{color:var(--c1)}.stat-val.v-green{color:var(--c3)}.stat-val.v-purple{color:var(--c4)}
.stat-val.v-orange{color:var(--c5)}.stat-val.v-red{color:var(--c2)}.stat-val.v-cyan{color:var(--c6)}
.stat-val.v-teal{color:var(--c9)}.stat-val.v-amber{color:var(--c10)}
.stat-desc{font-size:12px;color:var(--mu);line-height:1.4}.stat-desc strong{color:var(--ink)}

/* SECTION */
section{margin-bottom:40px}
section h2{font-size:18px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px}
section h3{font-size:14px;font-weight:600;margin:20px 0 8px;color:var(--mid)}
.section-desc{font-size:13px;color:var(--mu);margin-bottom:16px;line-height:1.55}

/* TWO-COL */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:700px){.two-col{grid-template-columns:1fr}}

/* CARDS */
.card{background:var(--white);border:1.5px solid var(--rule);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.card h4{font-size:13px;font-weight:600;margin-bottom:4px}
.card p,.card li{font-size:12px;color:var(--mu);line-height:1.55}
.card li strong{color:var(--ink)}

/* TABLES */
table{width:100%;border-collapse:collapse;font-size:12px;margin:12px 0}
th,td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--rule)}
th{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--lt);background:var(--bg)}
tr:hover td{background:#FAFAF8}
td code,p code,li code{font-family:'DM Mono',monospace;font-size:.9em;background:var(--bg);padding:1px 6px;border-radius:3px}

/* BIG NUMBER — for hero stats on slides */
.big-number{font-family:'Bebas Neue',sans-serif;font-size:clamp(64px,10vw,120px);line-height:1;text-align:center;margin:20px 0}
.big-number .label{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:400;color:var(--mu);display:block;margin-top:8px}

/* IMAGE SLIDE — full-width episode images */
.img-slide{margin:20px 0;border-radius:var(--r);overflow:hidden;border:1.5px solid var(--rule);box-shadow:var(--shadow)}
.img-slide img{width:100%;display:block}
.img-slide .caption{font-size:11px;color:var(--mu);padding:10px 16px;background:var(--white)}

/* QUOTE BLOCK */
.quote-block{border-left:4px solid var(--c1);padding:20px 24px;margin:24px 0;background:var(--white);border-radius:0 var(--r) var(--r) 0;box-shadow:var(--shadow)}
.quote-block p{font-size:18px;font-weight:500;line-height:1.5;color:var(--ink);font-style:italic}
.quote-block .attribution{font-size:12px;color:var(--mu);margin-top:8px;font-style:normal}

/* VIZ LINK — card for linking to interactive visualizations */
.viz-link{display:flex;align-items:center;gap:14px;background:var(--white);border:1.5px solid var(--rule);border-radius:var(--r);padding:14px 18px;text-decoration:none;color:var(--ink);transition:.2s;box-shadow:var(--shadow)}
.viz-link:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 4px 32px rgba(0,0,0,.1)}
.viz-link .viz-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}
.viz-link .viz-title{font-size:13px;font-weight:600}
.viz-link .viz-desc{font-size:11px;color:var(--mu);margin-top:2px}

/* CALLOUT */
.callout{display:flex;align-items:flex-start;gap:10px;background:var(--bg);border:1.5px solid var(--rule);border-radius:var(--rs);padding:14px 16px;margin:12px 0;font-size:12px;color:var(--mu);line-height:1.5}
.callout strong{color:var(--ink)}

/* PILL TAGS */
.pill{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 11px;border-radius:20px;font-weight:500}
.pill-blue{background:#EBF0FF;color:var(--c1)}.pill-green{background:#E8F8F2;color:var(--c3)}
.pill-purple{background:#F3EEFF;color:var(--c4)}.pill-orange{background:#FFF3E0;color:var(--c5)}
.pill-red{background:#FFF0EB;color:var(--c2)}.pill-amber{background:#FFF8E1;color:var(--c10)}
.pill-teal{background:#E0F2F1;color:var(--c9)}.pill-cyan{background:#E0F7FA;color:var(--c6)}

/* TIMELINE */
.timeline{position:relative;padding-left:32px;margin:16px 0}
.timeline::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--rule)}
.tl-item{position:relative;padding:8px 0 14px}
.tl-item::before{content:'';position:absolute;left:-26px;top:12px;width:10px;height:10px;border-radius:50%;border:2.5px solid var(--rule);background:var(--white);z-index:1}
.tl-item.dot-blue::before{border-color:var(--c1);background:var(--c1)}
.tl-item.dot-green::before{border-color:var(--c3);background:var(--c3)}
.tl-item.dot-purple::before{border-color:var(--c4);background:var(--c4)}
.tl-item.dot-orange::before{border-color:var(--c5);background:var(--c5)}
.tl-item.dot-red::before{border-color:var(--c2);background:var(--c2)}
.tl-item.dot-teal::before{border-color:var(--c9);background:var(--c9)}
.tl-item.dot-amber::before{border-color:var(--c10);background:var(--c10)}

/* FLOW STEPS */
.qflow{margin:12px 0}
.qf-step{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.qf-step:last-child{border-bottom:none}
.qf-icon{flex-shrink:0;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;margin-top:1px}
.qi-blue{background:var(--c1)}.qi-green{background:var(--c3)}.qi-purple{background:var(--c4)}
.qi-orange{background:var(--c5)}.qi-red{background:var(--c2)}.qi-cyan{background:var(--c6)}
.qi-teal{background:var(--c9)}.qi-amber{background:var(--c10)}
.qf-body{flex:1}
.qf-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px}
.qf-desc{font-size:11.5px;color:var(--mu);line-height:1.5}

/* LAYER STACK */
.ls{display:flex;flex-direction:column;margin:10px 0}
.ly{border:1px solid var(--rule);padding:10px 16px;font-size:12px}
.ly:first-child{border-radius:var(--rs) var(--rs) 0 0}.ly:last-child{border-radius:0 0 var(--rs) var(--rs)}
.ly+.ly{border-top:none}

/* FOOTER */
footer{text-align:center;padding:32px 0;color:var(--lt);font-size:11px;border-top:1.5px solid var(--rule);margin-top:40px}

@media print{body{font-size:11px}.stat-row{gap:8px}}
@media(max-width:640px){.page{padding:24px 20px}h1{font-size:36px}.stat-row{flex-direction:column}}