@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&family=DM+Mono&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#1D9E75;--teal-l:#E1F5EE;--teal-m:#0F6E56;--teal-d:#085041;
  --red:#E24B4A;--red-l:#FCEBEB;--red-m:#A32D2D;
  --blue:#378ADD;--blue-l:#E6F1FB;--blue-m:#185FA5;
  --amber:#EF9F27;--amber-l:#FAEEDA;--amber-m:#854F0B;
  --pink-l:#FBEAF0;--pink-m:#993356;
  --ink:#1a1a18;--ink-m:#444441;--ink-l:#888780;--ink-ll:#b4b2a9;
  --surface:#F8F7F4;--surf-m:#EFEFEB;--white:#FFFFFF;
  --border:rgba(40,40,35,0.11);--border-m:rgba(40,40,35,0.2);
  --r:10px;--r-lg:16px;--r-xl:22px;
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--surface);color:var(--ink);font-size:16px;line-height:1.65}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:200;background:rgba(248,247,244,0.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);height:58px;display:flex;align-items:center;padding:0 2rem;gap:2rem}
.nav-logo{font-family:'DM Serif Display',serif;font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:-0.01em;white-space:nowrap}
.nav-logo span{color:var(--teal)}
.nav-links{display:flex;gap:0;flex:1;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{font-size:13px;color:var(--ink-l);text-decoration:none;padding:6px 12px;border-radius:20px;white-space:nowrap;transition:all .15s}
.nav-links a:hover,.nav-links a.active{color:var(--ink);background:var(--surf-m)}
.nav-links a.active{font-weight:500}
.nav-cta{font-size:12px;background:var(--teal);color:white;padding:6px 16px;border-radius:20px;text-decoration:none;font-weight:500;white-space:nowrap;flex-shrink:0}

/* ── PAGE HERO ── */
.page-hero{max-width:900px;margin:0 auto;padding:4.5rem 2rem 2.5rem}
.eyebrow{font-size:11px;letter-spacing:0.13em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:1.25rem;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:'';display:inline-block;width:22px;height:1.5px;background:var(--teal)}
h1{font-family:'DM Serif Display',serif;font-size:clamp(30px,5vw,50px);line-height:1.1;letter-spacing:-0.02em;margin-bottom:1.25rem;max-width:680px}
h1 em{color:var(--teal);font-style:italic}
.hero-sub{font-size:17px;color:var(--ink-m);max-width:560px;line-height:1.7;font-weight:300;margin-bottom:2rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:13px;color:var(--ink-l);border-top:1px solid var(--border);padding-top:1.25rem}
.hero-meta strong{color:var(--ink);font-weight:500}

/* ── LAYOUT ── */
.wrap{max-width:900px;margin:0 auto;padding:0 2rem}
.section{padding:0 0 4rem}
.section-head{margin-bottom:2rem}
h2{font-family:'DM Serif Display',serif;font-size:clamp(22px,3vw,32px);color:var(--ink);letter-spacing:-0.01em;margin-bottom:.35rem}
.section-intro{font-size:15px;color:var(--ink-l);line-height:1.6}
hr.div{border:none;border-top:1px solid var(--border);margin:3rem 0}

/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:3rem}
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.5rem}
.stat-n{font-family:'DM Serif Display',serif;font-size:40px;color:var(--teal);line-height:1;margin-bottom:6px}
.stat-l{font-size:13px;color:var(--ink-l);line-height:1.5}
.stat-s{font-size:11px;color:var(--ink-ll);margin-top:5px}

/* ── DIAGNOSIS ── */
.diag-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);margin-bottom:1.5rem}
.diag-cell{background:var(--white);padding:1.5rem;cursor:pointer;transition:background .15s;text-decoration:none;display:block}
.diag-cell:hover{background:var(--surf-m)}
.diag-cell.active{background:var(--teal-l)}
.diag-stage{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);font-weight:500;margin-bottom:4px}
.diag-name{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:4px}
.diag-desc{font-size:13px;color:var(--ink-l);line-height:1.5}

/* Stage panels */
.stage-panel{display:none}.stage-panel.active{display:block}
.stage-banner{border-radius:var(--r-lg);padding:1.5rem;margin-bottom:1.5rem;color:white;background:var(--ink)}
.stage-tag{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.45);margin-bottom:6px}
.stage-title{font-family:'DM Serif Display',serif;font-size:22px;margin-bottom:8px}
.stage-sub{font-size:14px;color:rgba(255,255,255,.6);line-height:1.6}

/* Problem accordion */
.prob-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:12px}
.prob-head{padding:1.25rem 1.5rem;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;transition:background .12s}
.prob-head:hover,.prob-head.open{background:var(--surf-m)}
.prob-goal{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:500;margin-bottom:4px}
.g-pipe{color:var(--teal)}.g-conv{color:var(--blue-m)}.g-brand{color:var(--amber-m)}.g-ret{color:var(--pink-m)}
.prob-title{font-size:15px;font-weight:500;color:var(--ink);line-height:1.35}
.prob-arrow{font-size:20px;color:var(--ink-l);transition:transform .2s;flex-shrink:0;margin-top:1px;line-height:1}
.prob-head.open .prob-arrow{transform:rotate(90deg)}
.prob-body{display:none;padding:0 1.5rem 1.5rem}.prob-body.open{display:block}

/* Diagnosis / workflow boxes */
.diag-box{background:var(--red-l);border-radius:var(--r);padding:1rem 1.25rem;margin-bottom:1rem;border-left:3px solid var(--red)}
.diag-box h4{font-size:12px;font-weight:500;color:var(--red-m);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.08em}
.diag-item{font-size:14px;color:var(--ink-m);margin-bottom:5px;padding-left:1.1rem;position:relative;line-height:1.5}
.diag-item::before{content:'→';position:absolute;left:0;color:var(--red)}

.wf-box h4{font-size:12px;font-weight:500;color:var(--teal-m);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.08em;margin-top:1rem}
.step-row{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start}
.snum{width:24px;height:24px;border-radius:50%;background:var(--teal-l);color:var(--teal-m);font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.slabel{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:2px}
.sdetail{font-size:13px;color:var(--ink-l);line-height:1.55}

/* Prompt card */
.prompt{background:var(--surf-m);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.25rem;margin:8px 0;border-left:3px solid var(--teal)}
.ptag{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);font-weight:500;margin-bottom:6px}
.ptext{font-family:'DM Mono',monospace;font-size:12.5px;color:var(--ink-m);line-height:1.6;white-space:pre-wrap}
.pfill{color:var(--teal);font-style:italic}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:500}
.t-rev{background:var(--teal-l);color:var(--teal-m)}
.t-time{background:var(--blue-l);color:var(--blue-m)}
.t-risk{background:var(--red-l);color:var(--red-m)}
.t-brand{background:var(--amber-l);color:var(--amber-m)}
.t-ret{background:var(--pink-l);color:var(--pink-m)}

/* ── FUNCTION TABS ── */
.fn-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem}
.fn-tab{padding:7px 16px;border-radius:20px;font-size:13px;cursor:pointer;border:1px solid var(--border-m);background:transparent;color:var(--ink-l);font-family:'DM Sans',sans-serif;transition:all .15s;font-weight:400}
.fn-tab:hover{background:var(--surf-m);color:var(--ink)}
.fn-tab.active{background:var(--teal);color:white;border-color:var(--teal)}
.fn-panel{display:none}.fn-panel.active{display:block}
.fn-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;margin-bottom:12px}
.fn-header-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:1rem}
.fn-icon{width:44px;height:44px;border-radius:var(--r);background:var(--teal-l);color:var(--teal-m);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.fn-name{font-size:17px;font-weight:500;color:var(--ink);margin-bottom:4px}
.fn-desc{font-size:14px;color:var(--ink-l);line-height:1.55}
.fn-not{font-size:13px;color:var(--red-m);margin-top:6px;font-style:italic}
.wf-grid{display:grid;gap:12px;margin-top:1rem}

/* ── DELEGATION ── */
.deleg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.deleg-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.5rem}
.deleg-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:500;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.d-you .deleg-title{color:var(--teal)}
.d-team .deleg-title{color:var(--blue-m)}
.d-spec .deleg-title{color:var(--amber-m)}
.d-no .deleg-title{color:var(--red-m)}
.deleg-item{font-size:14px;color:var(--ink);margin-bottom:5px;padding-left:1rem;position:relative}
.deleg-item::before{content:'—';position:absolute;left:0;color:var(--ink-l)}

/* ── AEO PAGE ── */
.aeo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.5rem}
.aeo-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.5rem}
.aeo-num{font-family:'DM Serif Display',serif;font-size:32px;color:var(--teal);line-height:1;margin-bottom:4px}
.aeo-label{font-size:13px;color:var(--ink-l);line-height:1.4}
.aeo-source{font-size:11px;color:var(--ink-ll);margin-top:4px}
.checklist-item{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start;font-size:14px;line-height:1.5}
.ci-check{color:var(--teal);font-size:16px;flex-shrink:0;margin-top:1px}
.ci-x{color:var(--red);font-size:16px;flex-shrink:0;margin-top:1px}

/* ── BRAND GUARDRAILS ── */
.guardrail-table{width:100%;border-collapse:collapse;font-size:14px}
.guardrail-table th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-l);font-weight:500;padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}
.guardrail-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.5}
.guardrail-table tr:last-child td{border-bottom:none}
.gt-ok{color:var(--teal-m)}.gt-no{color:var(--red-m)}.gt-warn{color:var(--amber-m)}
.flow-step{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.5rem;display:flex;gap:14px;align-items:flex-start;margin-bottom:10px}
.flow-num{width:32px;height:32px;border-radius:50%;background:var(--teal-l);color:var(--teal-m);font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.flow-label{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:3px}
.flow-detail{font-size:13px;color:var(--ink-l);line-height:1.55}
.gate-badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:500;margin-left:8px}
.gate-human{background:var(--amber-l);color:var(--amber-m)}
.gate-ai{background:var(--teal-l);color:var(--teal-m)}

/* ── HOMEPAGE ── */
.home-hero{max-width:900px;margin:0 auto;padding:5rem 2rem 3rem}
.series-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:3rem}
.series-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;text-decoration:none;display:block;transition:all .2s;position:relative;overflow:hidden}
.series-card::after{content:'→';position:absolute;right:1.5rem;bottom:1.5rem;font-size:18px;color:var(--ink-ll);transition:all .2s}
.series-card:hover{border-color:var(--teal);transform:translateY(-2px)}
.series-card:hover::after{color:var(--teal);right:1.2rem}
.sc-part{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);font-weight:500;margin-bottom:6px}
.sc-title{font-family:'DM Serif Display',serif;font-size:20px;color:var(--ink);margin-bottom:6px;line-height:1.2}
.sc-desc{font-size:13px;color:var(--ink-l);line-height:1.5}
.sc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}

/* ── NOISE BANNER ── */
.noise{background:var(--ink);color:white;padding:.85rem 2rem}
.noise-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:1rem;font-size:14px;color:rgba(255,255,255,.65)}
.noise-badge{background:var(--teal);color:white;font-size:11px;font-weight:500;padding:3px 10px;border-radius:20px;white-space:nowrap;letter-spacing:.05em;flex-shrink:0}

/* ── FOOTER ── */
footer{background:var(--ink);color:rgba(255,255,255,.6);padding:3rem 2rem;margin-top:4rem}
.foot-inner{max-width:900px;margin:0 auto}
.foot-title{font-family:'DM Serif Display',serif;font-size:22px;color:white;margin-bottom:.5rem}
.foot-sub{margin-bottom:2rem;line-height:1.6;font-size:14px}
.foot-series{display:flex;gap:8px;flex-wrap:wrap}
.foot-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:5px 14px;font-size:13px;color:rgba(255,255,255,.6);text-decoration:none;transition:all .15s}
.foot-pill:hover{background:rgba(255,255,255,.15);color:white}
.foot-pill.cur{background:var(--teal);color:white;border-color:var(--teal)}
.foot-copy{margin-top:2.5rem;font-size:12px;opacity:.35}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .diag-grid{grid-template-columns:1fr}
  .deleg-grid{grid-template-columns:1fr}
  .aeo-grid{grid-template-columns:1fr}
  .series-grid{grid-template-columns:1fr}
  nav{padding:0 1rem;gap:1rem}
  .nav-links{display:none}
  .page-hero,.wrap{padding-left:1rem;padding-right:1rem}
}