/* ============================================================
   DAgency — Full-time Account OS
   Editorial structure with poster-level color confidence.
   Color is architecture, not decoration.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,400..700&family=Hanken+Grotesk:wght@300..800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --off-white:#F7F5F0;
  --maroon:#991103;
  --navy:#062D68;
  --sky:#B3CBF7;
  --amber:#F8A41E;
  --ink:#1A1614;

  --display:'Fraunces',Georgia,serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --line-on-light:rgba(6,45,104,.16);
  --line-on-dark:rgba(247,245,240,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1220px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);background:var(--off-white);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.55;font-size:17px;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}
em{font-style:italic}
.skip{position:absolute;left:-999px}
.skip:focus{position:fixed;left:16px;top:12px;background:var(--navy);color:#fff;padding:10px 16px;z-index:200;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.pad{padding-block:clamp(4rem,8vw,8rem)}
.pad-sm{padding-block:clamp(3rem,5vw,5rem)}
.pad-lg{padding-block:clamp(5rem,10vw,10rem)}

/* progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--amber);z-index:120;transition:width .1s linear}

/* eyebrow / kicker / mono labels */
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;display:inline-flex;gap:.6em;align-items:baseline;color:var(--maroon)}
.eyebrow .n{color:var(--amber);font-weight:600}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon)}
.mono{font-family:var(--mono)}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.02}
h1{font-size:clamp(2.8rem,7vw,6rem)}
h2{font-size:clamp(2.2rem,4.4vw,4.2rem);letter-spacing:-.025em}
h3{font-size:clamp(1.3rem,2vw,1.9rem);line-height:1.06}
.em{font-style:italic;color:var(--maroon)}
.on-dark .em,.on-maroon .em{color:var(--amber)}
.under{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:.12em;text-underline-offset:.12em}
.amber{color:var(--amber)}

.lead{font-size:clamp(1.05rem,.5vw + 1rem,1.35rem);max-width:60ch;color:var(--navy);font-weight:500;margin-top:1.1rem}
.sub{color:var(--navy);opacity:.9;max-width:66ch;margin-top:.8rem}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---- surfaces ---- */
.on-cream{background:var(--off-white);color:var(--ink)}
.on-navy{background:var(--navy);color:var(--off-white)}
.on-maroon{background:var(--maroon);color:var(--off-white)}
.on-sky{background:var(--sky);color:var(--navy)}
.on-amber{background:var(--amber);color:var(--navy)}
.on-navy .lead,.on-maroon .lead{color:var(--sky)}
.on-navy .eyebrow,.on-maroon .eyebrow{color:var(--sky)}
.on-sky .eyebrow{color:var(--maroon)}

/* ============================================================ NAV */
.nav{position:sticky;top:0;z-index:100;background:rgba(247,245,240,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-on-light)}
.nav-in{display:flex;align-items:center;gap:24px;height:66px;max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-mark{width:34px;height:34px;flex:none}
.brand-word{font-family:var(--display);font-weight:600;font-size:1.15rem;line-height:1.05;letter-spacing:-.01em;display:inline-block}
.brand-word small{display:block;font-family:var(--mono);font-size:.56rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--maroon);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav-links a{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);opacity:.82;transition:.18s}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--maroon)}
.nav-cta{font-family:var(--mono);font-size:.74rem !important;text-transform:uppercase;letter-spacing:.06em;background:var(--maroon);color:var(--off-white) !important;padding:9px 16px;border-radius:8px;opacity:1 !important}
.nav-cta:hover{background:var(--navy)}
.nav-toggle{display:none;margin-left:auto;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;background:none;border:1px solid var(--line-on-light);border-radius:8px;padding:8px 12px;color:var(--navy);cursor:pointer}
@media(max-width:860px){
  .nav-toggle{display:block}
  .nav-links{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--off-white);border-bottom:1px solid var(--line-on-light);padding:8px clamp(20px,5vw,64px) 20px;margin:0;max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
  .nav-links.open{max-height:80vh}
  .nav-links a{padding:12px 0;font-size:.9rem}
  .nav-cta{margin-top:8px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:13px 22px;border-radius:9px;transition:.2s var(--ease);cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--maroon);color:var(--off-white)}
.btn-primary:hover{background:var(--navy)}
.btn-light{background:var(--off-white);color:var(--maroon)}
.btn-light:hover{background:#fff}
.btn-line{border-color:var(--line-on-light);color:var(--navy)}
.btn-line:hover{border-color:var(--maroon);color:var(--maroon)}
.btn-ghost{border-color:var(--maroon);color:var(--maroon)}
.btn-ghost:hover{background:var(--maroon);color:var(--off-white)}
.on-dark .btn-line,.on-maroon .btn-line{border-color:var(--line-on-dark);color:var(--off-white)}
.on-dark .btn-line:hover,.on-maroon .btn-line:hover{border-color:var(--amber);color:var(--amber)}

.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--maroon);font-weight:500}
.link-arrow svg{transition:transform .2s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ============================================================ HERO */
.hero{background:var(--off-white)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero h1{color:var(--maroon)}
.hero .shift{margin-top:26px;border-left:2px solid var(--amber);padding:4px 0 4px 22px;display:grid;gap:8px}
.hero .shift .was{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--navy);opacity:.6}
.hero .shift .was s{text-decoration-color:var(--line-on-light)}
.hero .shift .arrow{font-family:var(--mono);font-size:.68rem;color:var(--maroon);letter-spacing:.14em}
.hero .shift .now{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--navy)}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

/* campaign console (navy card) */
.console{background:var(--navy);color:var(--off-white);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(6,45,104,.5)}
.con-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line-on-dark);gap:12px}
.con-id{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--sky);line-height:1.5}
.con-id b{display:block;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--off-white);letter-spacing:0}
.pill{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;flex:none}
.pill.risk{background:rgba(248,164,30,.16);color:var(--amber);border:1px solid rgba(248,164,30,.4)}
.con-body{padding:20px}
.con-label{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:12px}
.con-label.mt{margin-top:22px}
.fmini{display:flex;align-items:center;gap:8px}
.fmini .st{flex:1;text-align:center;background:rgba(255,255,255,.05);border-radius:8px;padding:12px 6px}
.fmini .n{font-family:var(--display);font-weight:600;font-size:1.7rem;color:var(--off-white);line-height:1}
.fmini .st:first-child .n{color:var(--sky)}
.fmini .st:last-child .n{color:var(--amber)}
.fmini .l{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sky);opacity:.8;margin-top:6px}
.fmini .ar{color:var(--sky);opacity:.5;flex:none}
.pace-row{display:flex;justify-content:space-between;font-size:.82rem;color:var(--sky)}
.pace-row b{color:var(--off-white)}
.bar{position:relative;height:8px;background:rgba(255,255,255,.12);border-radius:999px;margin:8px 0;overflow:visible}
.bar i{display:block;height:100%;width:0;background:var(--amber);border-radius:999px;transition:width 1s var(--ease)}
.bar .tmark{position:absolute;top:-3px;width:2px;height:14px;background:var(--sky)}
.flags{margin-top:16px;display:grid;gap:10px}
.flag{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:rgba(247,245,240,.86);line-height:1.45}
.flag b{color:#fff}
.dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px}
.dot.ochre{background:var(--amber)}
.dot.red{background:#ff6b57}
.con-foot{font-family:var(--mono);font-size:.7rem;color:var(--navy);opacity:.7;margin-top:14px;letter-spacing:.02em}

/* hero four-circle small */
.hero-figtag{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--maroon);margin-top:10px;text-align:right}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-on-light);border:1px solid var(--line-on-light);margin-top:clamp(2.5rem,5vw,4rem)}
.stat{background:var(--off-white);padding:26px 22px}
.stat .num{font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,4vw,3.4rem);color:var(--maroon);line-height:.9}
.stat .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);opacity:.75;margin-top:8px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================ SECTION HELPERS */
.section-head h2{max-width:22ch}
.section-head .lead{margin-bottom:2.5rem}

/* 12 questions grid */
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-on-dark);border:1px solid var(--line-on-dark);margin-top:2.4rem}
.qcell{background:var(--sky);padding:22px 20px;display:flex;gap:14px;min-height:104px}
.qcell .qn{font-family:var(--mono);font-size:.72rem;color:var(--maroon);flex:none;font-weight:600}
.qcell p{font-size:.95rem;color:var(--navy);font-weight:500}
@media(max-width:820px){.qgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.qgrid{grid-template-columns:1fr}}

/* transform table */
.tf{margin-top:2.2rem;border:1px solid var(--line-on-light);overflow:hidden;border-radius:12px}
.tf-row{display:grid;grid-template-columns:1fr 1.25fr 1.55fr;border-top:1px solid var(--line-on-light)}
.tf-row:first-child{border-top:none}
.tf-head{background:var(--navy);color:var(--off-white)}
.tf-head>div{padding:14px 20px;font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.tf-head .h-intern{color:var(--sky)}
.tf-head .h-ft{color:var(--amber)}
.tf-cap{padding:14px 20px;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--navy);background:var(--off-white)}
.tf-intern{padding:14px 20px;font-size:.92rem;color:var(--navy);opacity:.72;background:var(--off-white)}
.tf-ft{padding:14px 20px;font-size:.92rem;color:var(--navy);background:#fff}
.tf-ft b{color:var(--maroon)}
@media(max-width:720px){
  .tf-row{grid-template-columns:1fr}
  .tf-head{display:none}
  .tf-cap{border-top:2px solid var(--maroon)}
  .tf-intern::before{content:"Intern · ";font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--maroon)}
  .tf-ft::before{content:"Full-time · ";font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--maroon)}
}

/* 6 levels (on maroon) */
.levels{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-on-dark);border:1px solid var(--line-on-dark);margin-top:2.4rem}
.lvl{background:rgba(255,255,255,.055);padding:24px 18px;min-height:210px;position:relative;display:flex;flex-direction:column;transition:background .2s}
.lvl:hover{background:rgba(255,255,255,.1)}
.lvl .ln{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sky)}
.lvl h3{font-size:1.4rem;margin:12px 0 3px;color:var(--off-white)}
.lvl .vn{font-family:var(--display);font-style:italic;color:var(--amber);font-size:.95rem;margin-bottom:12px}
.lvl p{font-size:.8rem;color:rgba(247,245,240,.8);line-height:1.5}
.lvl .lbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,transparent,var(--amber))}
@media(max-width:960px){.levels{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.levels{grid-template-columns:repeat(2,1fr)}.lvl{min-height:180px}}

/* phase accordion (flow) */
.flow-list{display:grid;gap:10px;margin-top:2.2rem}
.phase{border:1px solid var(--line-on-light);border-radius:12px;background:var(--off-white);overflow:hidden;transition:border-color .2s}
.phase.open{border-color:var(--maroon)}
.ph-head{display:flex;align-items:center;gap:18px;padding:18px 22px;cursor:pointer}
.ph-head .pn{font-family:var(--mono);font-size:.85rem;color:var(--amber);width:30px;flex:none;font-weight:600}
.ph-head .pt{font-family:var(--display);font-weight:700;font-size:1.2rem;flex:1;color:var(--navy)}
.ph-head .pd{font-family:var(--mono);font-size:.66rem;color:var(--navy);opacity:.6;text-transform:uppercase;letter-spacing:.06em}
.ph-plus{width:26px;height:26px;border:1px solid var(--line-on-light);border-radius:50%;display:grid;place-items:center;color:var(--navy);transition:.25s;flex:none}
.phase.open .ph-plus{transform:rotate(45deg);background:var(--maroon);color:#fff;border-color:var(--maroon)}
.ph-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.ph-inner{padding:2px 22px 22px 70px}
.ph-steps{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px}
.ph-steps div{font-size:.88rem;color:var(--navy);padding:5px 0 5px 18px;position:relative}
.ph-steps div::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border:1.5px solid var(--maroon)}
.ph-out{font-family:var(--mono);margin-top:16px;font-size:.74rem;color:var(--navy);border-top:1px dashed var(--line-on-light);padding-top:12px;letter-spacing:.02em}
.ph-out b{color:var(--maroon)}
@media(max-width:640px){.ph-inner{padding-left:22px}.ph-steps{grid-template-columns:1fr}.ph-head .pd{display:none}}

/* statement band (amber) */
.band{background:var(--amber);color:var(--navy);position:relative;overflow:hidden}
.band .wrap{position:relative;z-index:2}
.band .bn{font-family:var(--mono);font-size:.9rem;letter-spacing:.1em;color:var(--maroon);display:block;margin-bottom:1rem}
.band p{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-.02em;max-width:22ch}
.band .ghost{position:absolute;right:-4vw;bottom:-14vw;font-family:var(--display);font-weight:900;font-size:44vw;line-height:.7;color:rgba(6,45,104,.08);z-index:1;pointer-events:none}

/* module preview / cards */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.4rem}
@media(max-width:860px){.cards-3{grid-template-columns:1fr}}
.card{background:var(--off-white);border:1px solid var(--line-on-light);border-radius:12px;padding:24px;display:block;transition:.2s var(--ease);position:relative}
a.card:hover{border-color:var(--maroon);transform:translateY(-3px)}
.card .mcode{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--maroon);opacity:.8}
.card h3{font-size:1.2rem;margin:10px 0 8px;color:var(--navy)}
.card p{font-size:.88rem;color:var(--navy);opacity:.82;min-height:38px}
.card.featured{border-color:var(--maroon);background:linear-gradient(180deg,var(--off-white),rgba(153,17,3,.06))}
.tag{display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-top:12px;background:var(--sky);color:var(--navy)}
.tag.dark{background:var(--navy);color:var(--off-white)}
.tag.amber{background:var(--amber);color:var(--navy)}
.tag.maroon{background:var(--maroon);color:var(--off-white)}

/* manifesto rows (maroon band) */
.final{background:var(--maroon);color:var(--off-white);position:relative;overflow:hidden}
.final .cropmark{position:absolute;right:-7vw;bottom:-9vw;width:min(40vw,440px);opacity:.9;pointer-events:none}
.final .wrap{position:relative;z-index:2}
.final h2{max-width:22ch}
.man-rows{display:grid;margin-top:1.6rem;max-width:940px}
.man-row{display:grid;grid-template-columns:1fr 1.1fr;gap:26px;padding:20px 0;border-top:1px solid var(--line-on-dark);align-items:center}
.man-row .was{font-family:var(--display);font-style:italic;font-size:1.12rem;color:var(--sky);opacity:.8}
.man-row .now{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--off-white)}
@media(max-width:640px){.man-row{grid-template-columns:1fr;gap:6px}}

/* ============================================================ FOOTER */
footer.footer{background:var(--navy);color:var(--off-white);padding-block:clamp(3rem,6vw,5rem)}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.footer-in h4{font-family:var(--display);font-size:1.3rem;margin-bottom:.6rem}
.footer-in p{font-size:.85rem;color:var(--sky);max-width:38ch}
.fcol h5{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:1rem}
.fcol a{display:block;font-size:.9rem;color:rgba(247,245,240,.86);padding:5px 0;transition:.15s}
.fcol a:hover{color:var(--amber)}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line-on-dark);font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--sky)}
.fbot a:hover{color:var(--amber)}
@media(max-width:720px){.footer-in{grid-template-columns:1fr 1fr}}

/* ============================================================ MODULE PAGES */
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);opacity:.7;margin-bottom:1.2rem;display:flex;gap:.6em;flex-wrap:wrap}
.crumb a:hover{color:var(--maroon)}
.crumb .sep{opacity:.4}
.mhero{background:var(--navy);color:var(--off-white);position:relative;overflow:hidden}
.mhero .crumb{color:var(--sky);opacity:.9}
.mhero .crumb a:hover{color:var(--amber)}
.mhero h1{color:var(--off-white);max-width:16ch}
.mhero .lead{color:var(--sky)}
.mhero .ph-mark{position:absolute;right:-5vw;bottom:-8vw;width:min(34vw,380px);opacity:.85;pointer-events:none}
.mtags{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

.mod-layout{display:grid;grid-template-columns:210px 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media(max-width:900px){.mod-layout{grid-template-columns:1fr}.subnav{display:none}}
.subnav{position:sticky;top:86px;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line-on-light);padding-left:16px}
.subnav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--navy);opacity:.6;padding:4px 0;transition:.15s}
.subnav a:hover,.subnav a.active{opacity:1;color:var(--maroon)}
.subnav a.active{font-weight:500}

.msec{padding:34px 0;border-top:1px solid var(--line-on-light)}
.msec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.msec-n{font-family:var(--display);font-weight:400;font-size:2rem;color:var(--amber);line-height:.8}
.msec-t{font-family:var(--display);font-weight:600;font-size:1.5rem;color:var(--navy);letter-spacing:-.01em}
.msec p{max-width:64ch;margin-bottom:.8rem}
.msec p b{color:var(--maroon)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}
@media(max-width:640px){.grid-2{grid-template-columns:1fr}}

/* formulas */
.formula{border:1px solid var(--line-on-light);border-left:3px solid var(--amber);border-radius:8px;padding:16px 18px;margin:12px 0;background:#fff}
.formula .fname{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--maroon);font-weight:600}
.formula .feq{font-family:var(--display);font-size:1.1rem;color:var(--navy);margin:6px 0}
.formula .feq .op{color:var(--amber);font-weight:700;padding:0 .2em}
.formula .fnote{font-size:.82rem;color:var(--navy);opacity:.75}

/* funnel viz */
.fv{margin-top:1rem;display:grid;gap:8px}
.fv-row{display:grid;grid-template-columns:130px 1fr 120px;align-items:center;gap:14px}
.fv-label{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--navy)}
.fv-bar{height:34px;background:rgba(6,45,104,.07);border-radius:6px;overflow:hidden}
.fv-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--maroon),var(--amber));border-radius:6px;transition:width 1s var(--ease)}
.fv-val{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--navy);text-align:right}
.fv-rate{font-family:var(--mono);font-size:.62rem;color:var(--maroon);font-weight:400;text-transform:none;letter-spacing:0}
@media(max-width:560px){.fv-row{grid-template-columns:90px 1fr 70px;gap:8px}.fv-val{font-size:1rem}}

/* do & dont */
.dd{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1rem}
.dd-col{padding:20px 22px;border-radius:12px}
.dd-dont{background:var(--navy);color:var(--off-white)}
.dd-do{background:var(--sky);color:var(--navy)}
.dd .dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;font-weight:600}
.dd-dont .dt{color:var(--amber)}
.dd-do .dt{color:var(--maroon)}
.dd .quote{font-family:var(--display);font-style:italic;font-size:1.05rem;margin-bottom:12px;line-height:1.2}
.dd ul{list-style:none;display:grid;gap:8px}
.dd li{font-size:.86rem;padding-left:16px;position:relative;line-height:1.45}
.dd li::before{content:"—";position:absolute;left:0;opacity:.55}
.dd-do li b,.dd-dont li b{font-weight:700}
@media(max-width:640px){.dd{grid-template-columns:1fr}}

/* failure modes */
.fails{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-on-light);border:1px solid var(--line-on-light);border-radius:12px;overflow:hidden;margin-top:1rem}
.fail{background:var(--off-white);padding:20px 22px;border-left:3px solid var(--maroon);display:flex;gap:16px}
.fail .fx{font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--amber);line-height:.9;flex:none}
.fail p{font-size:.88rem;color:var(--navy);margin:0}
.fail p b{color:var(--maroon)}
@media(max-width:640px){.fails{grid-template-columns:1fr}}

/* practice */
.practice{background:var(--navy);color:var(--off-white);border-radius:12px;padding:26px 28px;margin-top:1rem}
.practice .pt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.practice ol{padding-left:20px;display:grid;gap:10px}
.practice li{font-size:.92rem;color:rgba(247,245,240,.9)}
.tpl-callout{display:flex;align-items:center;gap:18px;margin-top:16px;padding:18px 22px;border:1px solid var(--line-on-light);border-radius:12px;background:var(--sky);flex-wrap:wrap}
.tpl-callout .ico{font-size:2rem;color:var(--maroon)}
.tpl-callout .tx{flex:1;min-width:200px}
.tpl-callout h4{font-size:1.05rem;color:var(--navy)}
.tpl-callout p{font-size:.82rem;color:var(--navy);opacity:.8}

/* rubric */
.rubric{margin-top:1rem;border:1px solid var(--line-on-light);border-radius:12px;overflow:hidden}
.rub-row{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:16px 20px;border-top:1px solid var(--line-on-light)}
.rub-row:first-child{border-top:none}
.rub-level{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--navy);display:flex;align-items:center;gap:10px}
.rub-level .d{width:10px;height:10px;border-radius:50%;flex:none}
.rub-0 .d{background:#c44}.rub-1 .d{background:var(--amber)}.rub-2 .d{background:var(--maroon)}.rub-3 .d{background:var(--navy)}
.rub-desc{font-size:.88rem;color:var(--navy);opacity:.85}
@media(max-width:600px){.rub-row{grid-template-columns:1fr;gap:6px}}

/* evidence chips */
.evidence{display:flex;flex-wrap:wrap;gap:10px;margin-top:1rem}
.ev-chip{font-family:var(--mono);font-size:.74rem;background:var(--off-white);border:1px solid var(--line-on-light);border-radius:999px;padding:8px 16px;color:var(--navy)}

/* pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}
.pager a{border:1px solid var(--line-on-light);border-radius:12px;padding:20px 22px;transition:.2s var(--ease)}
.pager a:hover{border-color:var(--maroon);background:rgba(153,17,3,.04)}
.pager .next{text-align:right}
.pager .dir{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--maroon);margin-bottom:6px}
.pager .ttl{font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--navy)}

/* module hub group heading */
.group-h{font-family:var(--mono);font-weight:500;font-size:.9rem;letter-spacing:.04em;color:var(--navy);margin-bottom:1rem;display:flex;align-items:center;gap:12px}
.group-h::before{content:"";width:8px;height:8px;background:var(--amber);flex:none}
.group{margin-bottom:2.6rem}

/* templates page */
.tpl{display:grid;gap:18px;margin-top:2.4rem}
.tpl-card{border:1px solid var(--line-on-light);border-radius:14px;background:var(--off-white);display:grid;grid-template-columns:200px 1fr;overflow:hidden}
.tpl-side{background:var(--navy);color:var(--off-white);padding:28px 24px;display:flex;flex-direction:column;justify-content:space-between}
.tpl-side .ic{font-size:2.6rem;color:var(--amber)}
.tpl-side .ext{font-family:var(--mono);font-size:.72rem;color:var(--sky);letter-spacing:.08em;margin-top:8px}
.tpl-side .used{font-family:var(--mono);font-size:.66rem;color:var(--sky);opacity:.75;margin-top:4px}
.tpl-main{padding:26px 30px}
.tpl-main h3{font-size:1.5rem;color:var(--navy);margin:10px 0 8px}
.tpl-main p{font-size:.9rem;color:var(--navy);opacity:.85;max-width:60ch}
.sheet-list{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.sheet{font-family:var(--mono);font-size:.68rem;background:#fff;border:1px solid var(--line-on-light);padding:5px 10px;color:var(--navy)}
@media(max-width:640px){.tpl-card{grid-template-columns:1fr}.tpl-side{flex-direction:row;align-items:center;gap:18px;padding:18px 24px}.tpl-side .ext{margin-top:0}}

/* sitemap tree */
.tree{margin-top:1.4rem}
.node{border-left:2px solid var(--line-on-light);margin-left:8px;padding-left:22px;position:relative}
.node.root{border-left:none;margin-left:0;padding-left:0}
.trow{display:flex;align-items:baseline;gap:12px;padding:9px 0;position:relative}
.node:not(.root) .trow::before{content:"";position:absolute;left:-22px;top:20px;width:16px;height:1px;background:var(--line-on-light)}
.trow .code{font-family:var(--mono);font-size:.66rem;color:var(--maroon);flex:none;width:32px}
.trow a,.trow .lbl{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--navy)}
.trow a:hover{color:var(--maroon)}
.trow .desc{font-size:.78rem;color:var(--navy);opacity:.6;margin-left:auto}
.trow .file{font-family:var(--mono);font-size:.66rem;color:var(--amber);flex:none}
.lvl2 .trow a,.lvl2 .trow .lbl{font-size:.92rem;font-family:var(--body);font-weight:600}
.section-h{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);margin:22px 0 4px}
@media(max-width:600px){.trow .desc{display:none}}

/* callout */
.callout{border:1px solid var(--line-on-light);border-left:3px solid var(--amber);border-radius:12px;padding:18px 22px;background:var(--sky);font-size:.92rem;color:var(--navy)}
.callout a{color:var(--maroon);text-decoration:underline}

/* ============================================================
   SOCIAL PLAYBOOK — additions
   ============================================================ */
/* content console retention sparkline */
.rspark{margin:6px 0 2px}
.rspark svg{width:100%;height:56px;display:block;overflow:visible}
.rspark .drop{fill:#ff6b57}
.rspark-tag{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;color:var(--sky);opacity:.8}

/* flagship: big retention viz */
.rviz{margin-top:1rem;border:1px solid var(--line-on-light);border-radius:12px;background:#fff;padding:22px 22px 14px}
.rviz svg{width:100%;height:220px;display:block;overflow:visible}
.rviz .axis{stroke:var(--line-on-light);stroke-width:1}
.rviz .curve{fill:none;stroke:var(--navy);stroke-width:2.5}
.rviz .fillzone{fill:rgba(153,17,3,.08)}
.rviz .mark{stroke:var(--maroon);stroke-width:1.5;stroke-dasharray:4 4}
.rviz-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-family:var(--mono);font-size:.66rem;color:var(--navy)}
.rviz-legend span{display:inline-flex;align-items:center;gap:6px}
.rviz-legend i{width:16px;height:3px;display:inline-block}

/* diagnosis case grid */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
@media(max-width:720px){.cases{grid-template-columns:1fr}}
.case{border:1px solid var(--line-on-light);border-left:3px solid var(--amber);border-radius:12px;background:var(--off-white);padding:18px 20px}
.case .ct{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--navy);margin-bottom:4px}
.case .cs{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--maroon);margin-bottom:10px}
.case ul{list-style:none;display:grid;gap:6px}
.case li{font-size:.85rem;color:var(--navy);padding-left:16px;position:relative}
.case li::before{content:"→";position:absolute;left:0;color:var(--amber)}

/* content anatomy strip (topic→angle→execution) */
.anatomy{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-on-light);border:1px solid var(--line-on-light);border-radius:12px;overflow:hidden;margin-top:1rem}
.anat{background:var(--off-white);padding:20px}
.anat .al{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--maroon);margin-bottom:8px}
.anat p{font-size:.9rem;color:var(--navy)}
@media(max-width:720px){.anatomy{grid-template-columns:1fr}}

/* hook compare */
.hook-row{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line-on-light)}
.hook-row:first-child{border-top:none}
.hook-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;text-align:center}
.hook-weak{background:var(--navy);color:var(--sky)}
.hook-strong{background:var(--amber);color:var(--navy)}
.hook-row .hq{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--navy)}