/* ============================================================
   DAgency · Full-time Account OS — shared design system
   Brand: Double D  (cream + high-contrast serif + brick red)
   ============================================================ */
:root{
  --cream:#E9E5DC; --cream-2:#F1EEE7; --paper:#F6F4EE;
  --ink:#1C1A17; --ink-soft:#3A3733; --muted:#6E6A60; --muted-2:#948F82;
  --line:#D7D1C5; --line-strong:#C4BDAD;
  --red:#C0392B; --red-deep:#A22C20; --red-section:#BE3A28; --red-soft:#F0DED8;
  --olive:#6B7A4C; --ochre:#BE842A;
  --charcoal:#211E1A; --charcoal-2:#2B2721; --charcoal-line:#433C32; --on-dark:#E9E5DC; --on-dark-mut:#9C9484;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Be Vietnam Pro',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --maxw:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;font-weight:400;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.06;letter-spacing:-.01em;color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}
.mono{font-family:var(--mono)}
.em{color:var(--red);font-style:italic;font-family:var(--serif)}

/* eyebrow */
.eyebrow{font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:20px}
.eyebrow .n{color:var(--muted-2);margin-right:6px}

/* section */
.section{padding:92px 0;border-top:1px solid var(--line)}
.section:first-of-type{border-top:none}
h1{font-size:clamp(40px,6.4vw,76px);font-weight:900}
h2{font-size:clamp(30px,4.3vw,50px);font-weight:800;max-width:20ch;margin-bottom:20px}
h3{font-size:clamp(21px,2.4vw,27px);font-weight:700}
.lead{font-size:18px;color:var(--ink-soft);max-width:62ch;line-height:1.62}
.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:15px 26px;transition:.2s;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--red);color:var(--cream)}
.btn-primary:hover{background:var(--red-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-line{background:transparent;color:var(--ink);padding-left:0;border:none;position:relative}
.btn-line::before{content:"";width:36px;height:1px;background:var(--ink);display:inline-block}
.btn-line:hover{color:var(--red)}

/* nav */
.nav{position:sticky;top:0;z-index:80;background:rgba(233,229,220,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:26px;height:70px;max-width:var(--maxw);margin:0 auto;padding:0 30px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:900;font-size:22px;letter-spacing:-.01em}
.brand .drop{width:26px;height:32px;flex:none}
.brand small{display:block;font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.16em;color:var(--red);text-transform:uppercase;margin-top:-2px}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:13.5px;font-weight:500;color:var(--ink-soft)}
.nav-links a{padding:4px 0;transition:.2s;border-bottom:1.5px solid transparent}
.nav-links a:hover,.nav-links a.active{color:var(--red);border-color:var(--red)}
.nav-cta{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--red);color:var(--cream);padding:11px 20px;white-space:nowrap;transition:.2s}
.nav-cta:hover{background:var(--red-deep)}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--red);z-index:90;width:0}
@media(max-width:940px){.nav-links{display:none}}

/* drop icon */
.drop svg{display:block}

/* footer */
.footer{background:var(--charcoal);color:var(--on-dark-mut);padding:54px 0}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.footer h4{color:var(--cream);font-family:var(--serif);font-size:20px;margin-bottom:10px}
.footer .fcol h5{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.footer .fcol a{display:block;color:var(--on-dark);font-size:13.5px;padding:5px 0;opacity:.82;transition:.2s}
.footer .fcol a:hover{opacity:1;color:var(--red)}
.footer .fbot{border-top:1px solid var(--charcoal-line);margin-top:36px;padding-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:720px){.footer-in{grid-template-columns:1fr}}

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

/* ---------- stat block ---------- */
.stats{display:flex;gap:70px;flex-wrap:wrap;margin-top:44px;padding-top:40px;border-top:1px solid var(--line)}
.stat .num{font-family:var(--serif);font-weight:900;font-size:60px;line-height:1;color:var(--ink)}
.stat .num .u{color:var(--red)}
.stat .lbl{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* ---------- red band ---------- */
.band{background:var(--red-section);color:var(--cream);position:relative;overflow:hidden;border:none}
.band .ghost{position:absolute;right:-4%;top:50%;transform:translateY(-50%);font-family:var(--serif);font-weight:900;font-size:min(46vw,620px);color:rgba(255,255,255,.08);line-height:.7;pointer-events:none;user-select:none}
.band .eyebrow{color:rgba(255,255,255,.72)}
.band h2,.band h3{color:#fff}
.band .em{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.5)}
.band p{color:rgba(255,255,255,.9)}

/* ---------- console / campaign state card ---------- */
.console{background:var(--paper);border:1px solid var(--line-strong);box-shadow:0 30px 60px -34px rgba(40,30,20,.4)}
.con-head{background:var(--charcoal);color:var(--cream);padding:16px 20px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.con-id{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--on-dark-mut)}
.con-id b{display:block;font-family:var(--serif);font-weight:700;font-size:17px;color:#fff;letter-spacing:0;margin-top:3px}
.pill{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;white-space:nowrap}
.pill.risk{background:rgba(190,132,42,.22);color:#E4AE58;border:1px solid rgba(190,132,42,.5)}
.pill.ok{background:rgba(107,122,76,.24);color:#A9BC7F;border:1px solid rgba(107,122,76,.55)}
.pill.crit{background:rgba(192,57,43,.24);color:#E58072;border:1px solid rgba(192,57,43,.55)}
.con-body{padding:20px}
.con-label{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:2px 0 10px}
.fmini{display:flex;align-items:stretch;gap:6px}
.fmini .st{flex:1;background:var(--cream-2);border:1px solid var(--line);padding:11px 6px;text-align:center}
.fmini .st .n{font-family:var(--serif);font-weight:800;font-size:26px;color:var(--ink);line-height:1}
.fmini .st .l{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-top:6px}
.fmini .ar{align-self:center;color:var(--line-strong);font-size:13px}
.con-label.mt{margin-top:22px}
.pace-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px}
.pace-row b{color:var(--ink);font-weight:600}
.bar{height:10px;background:var(--cream-2);border:1px solid var(--line);position:relative;overflow:hidden}
.bar>i{position:absolute;inset:0 auto 0 0;background:var(--red);width:0;transition:width 1.3s cubic-bezier(.2,.7,.2,1)}
.bar .tmark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ochre)}
.flags{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:11px}
.flag{display:flex;gap:11px;font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.flag .dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none}
.dot.ochre{background:var(--ochre)}.dot.red{background:var(--red)}.dot.olive{background:var(--olive)}
.con-foot{text-align:center;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:14px;letter-spacing:.03em}

/* ---------- generic cards / grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--cream-2);border:1px solid var(--line);padding:26px;transition:.2s}
.card:hover{border-color:var(--line-strong)}
@media(max-width:820px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* breadcrumb */
.crumb{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:22px;letter-spacing:.03em}
.crumb a:hover{color:var(--red)}
.crumb .sep{margin:0 8px;color:var(--line-strong)}

/* tags */
.tag{display:inline-block;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);background:var(--red-soft);padding:5px 11px}
.tag.dark{color:var(--cream);background:var(--charcoal)}
.tag.olive{color:#fff;background:var(--olive)}

/* formula block */
.formula{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--red);padding:18px 22px;margin:12px 0}
.formula .fname{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.formula .feq{font-family:var(--mono);font-size:15px;color:var(--ink);line-height:1.7}
.formula .feq .op{color:var(--red)}
.formula .fnote{font-size:12.5px;color:var(--muted);margin-top:10px}

/* do/dont */
.dd{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.dd-col{padding:24px;border:1px solid}
.dd-dont{background:#F5E4E0;border-color:#E2B7AE}
.dd-do{background:#EBEEE0;border-color:#C3CBA6}
.dd-col .dt{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.dd-dont .dt{color:var(--red-deep)}.dd-do .dt{color:var(--olive)}
.dd-col .quote{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink);padding-bottom:14px;border-bottom:1px solid rgba(0,0,0,.1);margin-bottom:14px}
.dd-col ul{list-style:none;display:grid;gap:8px}
.dd-col li{font-size:13.5px;color:var(--ink-soft);padding-left:18px;position:relative}
.dd-col li::before{content:"›";position:absolute;left:0;color:var(--red);font-weight:700}
@media(max-width:680px){.dd{grid-template-columns:1fr}}

/* module section blocks */
.msec{border-top:1px solid var(--line);padding:40px 0}
.msec-head{display:flex;gap:16px;align-items:baseline;margin-bottom:20px}
.msec-n{font-family:var(--mono);font-size:13px;color:var(--red);flex:none;padding-top:3px}
.msec-t{font-family:var(--serif);font-weight:700;font-size:26px}
.msec p{font-size:15.5px;color:var(--ink-soft);max-width:72ch}
.msec p+p{margin-top:12px}
.msec .sub{font-size:14px;color:var(--muted);margin-top:8px}

/* funnel viz */
.fv{display:grid;gap:7px;margin:16px 0}
.fv-row{display:grid;grid-template-columns:140px 1fr 96px;align-items:center;gap:14px}
.fv-label{font-family:var(--sans);font-weight:500;font-size:13px;color:var(--ink-soft)}
.fv-bar{height:36px;background:var(--cream-2);border:1px solid var(--line);position:relative;overflow:hidden}
.fv-bar>i{position:absolute;inset:0 auto 0 0;background:var(--red);width:0;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.fv-val{font-family:var(--serif);font-weight:800;font-size:19px;text-align:right}
.fv-rate{font-family:var(--mono);font-size:10px;color:var(--ochre);text-align:center}
@media(max-width:560px){.fv-row{grid-template-columns:96px 1fr 70px;gap:9px}}

/* fails */
.fails{display:grid;gap:9px;margin-top:6px}
.fail{display:flex;gap:15px;background:var(--cream-2);border:1px solid var(--line);border-left:3px solid var(--red);padding:15px 20px}
.fail .fx{font-family:var(--mono);font-size:13px;color:var(--red);flex:none}
.fail p{font-size:14px;color:var(--ink-soft)}
.fail p b{color:var(--ink)}

/* rubric */
.rubric{border:1px solid var(--line);margin-top:8px}
.rub-row{display:grid;grid-template-columns:190px 1fr;border-top:1px solid var(--line)}
.rub-row:first-child{border-top:none}
.rub-row>div{padding:16px 20px}
.rub-level{font-family:var(--sans);font-weight:700;font-size:13px;display:flex;align-items:center;gap:9px}
.rub-desc{font-size:14px;color:var(--ink-soft);border-left:1px solid var(--line)}
.rub-0 .rub-level{color:var(--red-deep)}.rub-1 .rub-level{color:var(--ochre)}
.rub-2 .rub-level{color:var(--olive)}.rub-3 .rub-level{color:var(--ink)}
.rub-level .d{width:9px;height:9px;border-radius:50%;background:currentColor}
@media(max-width:600px){.rub-row{grid-template-columns:1fr}.rub-desc{border-left:none;padding-top:0}}

/* evidence chips */
.evidence{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ev-chip{font-family:var(--sans);font-weight:500;font-size:13px;border:1px solid var(--line-strong);background:var(--cream-2);padding:9px 15px;display:flex;gap:8px;align-items:center}
.ev-chip::before{content:"◆";color:var(--red);font-size:10px}

/* practice */
.practice{background:var(--cream-2);border:1px dashed var(--red);padding:24px;margin-top:8px}
.practice .pt{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.practice ol{margin-left:20px;display:grid;gap:8px}
.practice li{font-size:14.5px;color:var(--ink-soft)}

/* template download callout */
.tpl-callout{display:flex;gap:18px;align-items:center;background:var(--charcoal);color:var(--cream);padding:22px 26px;margin-top:24px;flex-wrap:wrap}
.tpl-callout .ico{font-size:26px}
.tpl-callout .tx{flex:1;min-width:200px}
.tpl-callout .tx h4{color:#fff;font-size:19px;margin-bottom:3px}
.tpl-callout .tx p{color:var(--on-dark-mut);font-size:13px}
.tpl-callout .btn-primary{border-color:var(--red)}

/* prev/next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;border-top:1px solid var(--line);padding-top:30px}
.pager a{padding:20px 24px;border:1px solid var(--line);background:var(--cream-2);transition:.2s}
.pager a:hover{border-color:var(--red);background:var(--paper)}
.pager .dir{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em}
.pager .ttl{font-family:var(--serif);font-weight:700;font-size:18px;margin-top:6px}
.pager .next{text-align:right}
@media(max-width:600px){.pager{grid-template-columns:1fr}}

/* sub-nav (module sections) */
.subnav{position:sticky;top:70px;align-self:start;font-size:13px;display:grid;gap:2px}
.subnav a{padding:7px 12px;color:var(--muted);border-left:2px solid var(--line);transition:.15s}
.subnav a:hover,.subnav a.active{color:var(--red);border-color:var(--red);background:var(--cream-2)}
.mod-layout{display:grid;grid-template-columns:210px 1fr;gap:44px;align-items:start}
@media(max-width:900px){.mod-layout{grid-template-columns:1fr}.subnav{display:none}}