/* Self-hosted fonts (CSP: font-src 'self') — same files the marketing site uses */
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:400; font-display:swap; src:url("../assets/fonts/fraunces-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:600; font-display:swap; src:url("../assets/fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:italic; font-weight:400; font-display:swap; src:url("../assets/fonts/fraunces-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* Verbena — brand tokens (matched to verbena.health) */
:root{
  /* Verbena green system (from verbena.health) */
  --ink:#14302B; --green-800:#1E4F3D; --green-700:#28654D;
  --leaf:#7FB347; --leaf-deep:#5C8F3A; --sage:#A9C29A;
  --deep-lavender:#28654D; --soft-lavender:#7FA98C; --pale-lavender:#E4EDE3;
  --deep-sage:#5C8F3A; --cream:#F2F6EF; --warm-gold:#7FB347;
  --deep-gold:#5C8F3A; --dark-ink:#14302B; --mid-ink:#47605A;
  --bg:#F6F9F4; --surface:#FFFFFF;
  --text:#1C332E; --text-soft:#47605A; --text-muted:#6E837C;
  --line:#DCE7DC; --line-strong:#C7DAC7;
  /* chart tokens (validated green palettes) */
  --c1:#12795A; --c2:#B87E22; --c3:#1668A0;
  --good:#2F8B58; --warn:#B87E22; --crit:#C0392B;
  --accent:#28654D; /* text-accent (active tab, links) — lightens in dark */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --radius:14px;
  --shadow:0 1px 2px rgba(20,48,43,.04), 0 8px 28px -18px rgba(20,48,43,.26);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--bg);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0;color:var(--text);}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px;}

/* ---- Topbar ---- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(251,250,253,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:66px;gap:18px;}
.brand{display:flex;align-items:center;gap:.6rem;min-width:0;}
.brand svg{width:30px;height:30px;flex:0 0 auto;}
.brand .wordmark{font-family:var(--serif);font-size:1.4rem;color:var(--dark-ink);letter-spacing:-.02em;line-height:1;}
.brand .prod{display:flex;flex-direction:column;border-left:1px solid var(--line-strong);margin-left:.7rem;padding-left:.7rem;}
.brand .prod b{font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--deep-sage);line-height:1.3;}
.brand .prod span{font-family:var(--serif);font-size:1.02rem;color:var(--text);line-height:1.1;}
.topbar-right{display:flex;align-items:center;gap:14px;}
.workspace{display:flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:.42rem .5rem .42rem .8rem;font-family:var(--sans);font-weight:700;font-size:.9rem;color:var(--text);cursor:pointer;}
.workspace .dotmark{width:22px;height:22px;border-radius:50%;background:var(--pale-lavender);color:var(--accent);display:grid;place-items:center;font-family:var(--serif);font-size:.85rem;}
.workspace .car{color:var(--text-muted);font-size:.8rem;}
.demo-badge{font-family:var(--sans);font-weight:700;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--deep-gold);background:#EAF3E4;border:1px solid #CFE3C2;border-radius:999px;padding:.3rem .7rem;}
/* theme toggle */
.theme-toggle{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:.42rem .8rem;font-family:var(--sans);font-weight:700;font-size:.8rem;color:var(--text-soft);cursor:pointer;transition:background .12s,color .12s;}
.theme-toggle:hover{color:var(--accent);}
.theme-toggle svg{width:15px;height:15px;}

/* ---- Page head ---- */
.pagehead{padding:30px 0 6px;}
.pagehead .eyebrow{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--deep-sage);margin-bottom:.5rem;}
.pagehead h1{font-size:2.15rem;margin-bottom:.35rem;}
.pagehead .sub{color:var(--text-soft);font-size:1.02rem;max-width:64ch;}
.pagehead .updated{color:var(--text-muted);font-size:.85rem;margin-top:.5rem;}

/* ---- Filters ---- */
.filters{position:sticky;top:66px;z-index:30;background:var(--bg);padding:16px 0 12px;border-bottom:1px solid var(--line);}
.filters-inner{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;}
.filt{display:flex;flex-direction:column;gap:.3rem;}
.filt label{font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:3px;gap:2px;}
.seg button{font-family:var(--sans);font-weight:600;font-size:.86rem;color:var(--text-soft);background:transparent;border:0;border-radius:7px;padding:.42rem .72rem;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;}
.seg button:hover{color:var(--accent);}
.seg button[aria-pressed="true"]{background:var(--deep-lavender);color:#fff;}
select.control{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:9px;padding:.5rem 2rem .5rem .8rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2347605A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;}
select.control:focus{outline:none;border-color:var(--soft-lavender);box-shadow:0 0 0 3px rgba(155,137,196,.28);}
.filt-note{margin-left:auto;align-self:center;font-size:.82rem;color:var(--text-muted);display:flex;align-items:center;gap:.4rem;}
.filt-note .live{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(31,143,122,.16);}

/* ---- Tabs ---- */
.tabs{display:flex;gap:4px;margin-top:20px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.tabs button{font-family:var(--sans);font-weight:600;font-size:.98rem;color:var(--text-soft);background:transparent;border:0;border-bottom:2.5px solid transparent;padding:.7rem .3rem;margin-right:1.4rem;cursor:pointer;transition:color .12s,border-color .12s;}
.tabs button:hover{color:var(--accent);}
.tabs button[aria-selected="true"]{color:var(--accent);border-color:var(--accent);}

main{padding:26px 0 90px;}
.tabpane{display:none;}
.tabpane.active{display:block;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ---- KPI tiles ---- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:22px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.35rem;min-width:0;overflow:hidden;}
.kpi .k-label{font-size:.82rem;color:var(--text-soft);font-weight:600;line-height:1.25;min-height:2.3em;}
.kpi .k-value{font-family:var(--sans);font-weight:700;font-size:1.72rem;color:var(--text);line-height:1;letter-spacing:-.01em;}
.kpi .k-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;}
.kpi .k-delta{font-size:.8rem;font-weight:700;display:inline-flex;align-items:center;gap:.2rem;white-space:nowrap;}
.kpi .k-delta.up{color:var(--good);} .kpi .k-delta.down{color:var(--crit);} .kpi .k-delta.flat{color:var(--text-muted);}
.kpi .k-delta .vs{color:var(--text-muted);font-weight:600;margin-left:.15rem;}
.kpi .spark{flex:0 0 auto;}

/* ---- Panels / grid ---- */
.grid{display:grid;gap:18px;margin-top:18px;}
.g-2{grid-template-columns:1.35fr 1fr;} .g-2e{grid-template-columns:1fr 1fr;}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 18px;box-shadow:var(--shadow);min-width:0;}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:.35rem;}
.panel-head h3{font-size:1.18rem;}
.panel-head .ph-sub{font-size:.85rem;color:var(--text-muted);margin-top:.15rem;}
.panel-head .pill{font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .6rem;border-radius:999px;white-space:nowrap;}
.pill.good{background:#E7F3EF;color:#15705e;border:1px solid #BFE3D8;}
.pill.warn{background:#FBF1E2;color:#8a5e1f;border:1px solid #EAD6B6;}
.pill.neut{background:var(--pale-lavender);color:var(--accent);border:1px solid #D9CFE9;}

/* legend */
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;}
.legend .item{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--text-soft);font-weight:600;}
.legend .swatch{width:22px;height:0;border-top-width:3px;border-top-style:solid;border-radius:3px;}
.legend .box{width:12px;height:12px;border-radius:3px;}

/* chart wrap */
.chart{position:relative;width:100%;}
.chart svg{display:block;width:100%;height:auto;overflow:visible;}
.axis-tick{font-family:var(--sans);font-size:11px;fill:var(--text-muted);}
.axis-tick.y{text-anchor:end;}
.grid-line{stroke:var(--line);stroke-width:1;}
.ref-line{stroke:var(--soft-lavender);stroke-width:1.5;stroke-dasharray:4 4;}
.ref-label{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--soft-lavender);}
.dir-label{font-family:var(--sans);font-size:11.5px;font-weight:700;}

/* tooltip */
.tt{position:absolute;pointer-events:none;z-index:20;background:#17131F;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:9px 11px;font-size:.82rem;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);opacity:0;transform:translateY(2px);transition:opacity .1s;min-width:120px;}
.tt.show{opacity:1;transform:none;}
.tt .tt-x{font-weight:700;font-size:.74rem;color:rgba(255,255,255,.7);margin-bottom:.35rem;letter-spacing:.02em;}
.tt .tt-row{display:flex;align-items:center;gap:.5rem;justify-content:space-between;margin-top:.15rem;}
.tt .tt-row .lab{display:flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.82);}
.tt .tt-row .key{width:14px;height:0;border-top-width:3px;border-top-style:solid;border-radius:2px;}
.tt .tt-row .key.box{height:10px;border-top:0;border-radius:2px;}
.tt .tt-row .val{font-weight:700;font-variant-numeric:tabular-nums;}

/* funnel */
.funnel{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
.f-row{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:14px;padding:.15rem 0;}
.f-row .f-lab{font-size:.9rem;color:var(--text-soft);font-weight:600;text-align:right;}
.f-row .f-lab small{display:block;color:var(--text-muted);font-weight:600;font-size:.76rem;}
.f-bar-wrap{position:relative;height:34px;background:transparent;}
.f-bar{height:34px;border-radius:0 6px 6px 0;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;color:#fff;font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums;transition:width .5s cubic-bezier(.3,.7,.3,1);}
.f-conv{font-size:.78rem;color:var(--text-muted);font-weight:600;margin-left:2px;}

/* horizontal bars (revenue leaks) */
.hbars{display:flex;flex-direction:column;gap:12px;}
.hbar{display:grid;grid-template-columns:170px 1fr 60px;align-items:center;gap:12px;}
.hbar .hb-lab{font-size:.9rem;color:var(--text-soft);font-weight:600;}
.hbar .hb-track{height:22px;background:var(--pale-lavender);border-radius:6px;overflow:hidden;}
.hbar .hb-fill{height:22px;border-radius:6px;width:0;transition:width .5s cubic-bezier(.3,.7,.3,1);}
.hbar .hb-val{font-weight:700;font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--text);text-align:right;}
@media (max-width:560px){.hbar{grid-template-columns:1fr 56px;}.hbar .hb-lab{grid-column:1/-1;}}

/* meter */
.meter-big{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.gauge{position:relative;flex:0 0 auto;}
.gauge .g-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.gauge .g-num b{font-family:var(--sans);font-weight:700;font-size:1.9rem;color:var(--text);line-height:1;}
.gauge .g-num span{font-size:.72rem;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:.2rem;}
.meter-side{min-width:180px;flex:1;}
.meter-side .ms-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.9rem;}
.meter-side .ms-row:last-child{border-bottom:0;}
.meter-side .ms-row b{font-variant-numeric:tabular-nums;}

/* stacked H bar */
.stackbar{display:flex;height:40px;border-radius:8px;overflow:hidden;margin-top:8px;gap:2px;background:var(--surface);}
.stackbar .seg{height:40px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.82rem;cursor:default;transition:filter .12s;}
.stackbar .seg:hover{filter:brightness(1.06);}
.stack-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;}
.stack-legend .item{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--text-soft);font-weight:600;}
.stack-legend .box{width:12px;height:12px;border-radius:3px;}
.stack-legend .item small{color:var(--text-muted);font-weight:700;}

/* bars vertical single-hue */
.vbars-label{font-family:var(--sans);font-size:11.5px;fill:var(--text-soft);text-anchor:middle;}
.vbars-val{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--text);text-anchor:middle;}

/* tables */
table.data{width:100%;border-collapse:collapse;margin-top:6px;font-size:.9rem;}
table.data th,table.data td{text-align:right;padding:.6rem .5rem;border-bottom:1px solid var(--line);}
table.data th:first-child,table.data td:first-child{text-align:left;}
table.data thead th{font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;user-select:none;white-space:nowrap;}
table.data thead th:hover{color:var(--accent);}
table.data thead th .arrow{opacity:.5;font-size:.7rem;}
table.data tbody td{color:var(--text-soft);font-variant-numeric:tabular-nums;}
table.data tbody td:first-child{color:var(--text);font-weight:600;}
table.data tbody tr:hover{background:#FAF8FD;}
.chip{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;font-size:.76rem;padding:.16rem .5rem;border-radius:999px;}
.chip.good{background:#E7F3EF;color:#15705e;} .chip.warn{background:#FBF1E2;color:#8a5e1f;} .chip.crit{background:#F7E7E5;color:#9d2f26;}

/* needs attention */
.attn-list{display:flex;flex-direction:column;gap:0;}
.attn{border-bottom:1px solid var(--line);}
.attn:last-child{border-bottom:0;}
.attn-btn{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;background:transparent;border:0;padding:.85rem .2rem;cursor:pointer;text-align:left;font-family:var(--sans);}
.attn-btn:hover{background:#FAF8FD;}
.attn .sev{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.attn .sev.crit{background:var(--crit);} .attn .sev.warn{background:var(--warn);} .attn .sev.info{background:var(--soft-lavender);}
.attn .a-title{font-weight:600;font-size:.95rem;color:var(--text);}
.attn .a-title small{display:block;color:var(--text-muted);font-weight:600;font-size:.8rem;margin-top:.1rem;}
.attn .a-chev{color:var(--text-muted);transition:transform .2s;font-size:1.1rem;}
.attn.open .a-chev{transform:rotate(90deg);}
.attn-body{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.attn-body-inner{padding:.2rem .2rem 1rem 33px;color:var(--text-soft);font-size:.9rem;}
.attn-body-inner .action{margin-top:.6rem;display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--accent);font-size:.85rem;}

.footer{border-top:1px solid var(--line);padding:22px 0 40px;color:var(--text-muted);font-size:.82rem;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.footer a{color:var(--accent);text-decoration:none;font-weight:600;}

/* ============================================================ Dark theme (validated dark palettes) */
body.dark{
  --bg:#12241F; --surface:#1B342D;
  --text:#EAF3EC; --text-soft:#B4C8BC; --text-muted:#82998C;
  --line:#294A3E; --line-strong:#35594B;
  --pale-lavender:#25463A;
  --dark-ink:#EAF3EC;
  --accent:#8CCBA0;
  --deep-lavender:#2E7355;   /* filled controls, lighter so they pop on dark */
  --deep-sage:#9FBE8F;
  --good:#57B07E; --warn:#C89A46; --crit:#E8756B;
}
body.dark .topbar{background:rgba(18,36,31,.86);}
body.dark .filters{background:var(--bg);}
body.dark .seg button[aria-pressed="true"]{color:#fff;}
body.dark .demo-badge{background:#233d1f;border-color:#3c5a2c;color:#9cc96f;}
body.dark .kpi,body.dark .panel{box-shadow:0 1px 2px rgba(0,0,0,.25),0 10px 30px -20px rgba(0,0,0,.6);}
body.dark .pill.good,body.dark .chip.good{background:#153a2a;color:#79d3a0;border-color:#245a41;}
body.dark .pill.warn,body.dark .chip.warn{background:#3a2f15;color:#dcb05e;border-color:#5a4823;}
body.dark .pill.neut{background:#22463a;color:var(--accent);border-color:#35594b;}
body.dark .chip.crit{background:#3d1f1c;color:#f0928a;}
body.dark table.data tbody tr:hover{background:#224237;}
body.dark .attn-btn:hover{background:#224237;}
body.dark select.control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2382998C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");}

@media (max-width:1080px){
  .kpis{grid-template-columns:repeat(3,1fr);}
  .g-2,.g-2e{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .brand .prod{display:none;}
  .topbar-right .demo-badge{display:none;}
  .pagehead h1{font-size:1.7rem;}
  .f-row{grid-template-columns:1fr;}
  .f-row .f-lab{text-align:left;}
}
:focus-visible{outline:3px solid var(--soft-lavender);outline-offset:2px;border-radius:6px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- brand link + real logo ---------- */
.brand{color:inherit;text-decoration:none;}
.brand img{width:26px;height:26px;display:block;}

/* ---------- workspace switcher ---------- */
.ws-wrap{position:relative;}
.ws-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:270px;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 18px 44px -18px rgba(0,0,0,.35);padding:6px;z-index:60;}
.ws-menu .ws-note{font-family:var(--sans);font-weight:700;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);padding:.5rem .7rem .35rem;}
.ws-menu button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:.55rem .7rem;font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--text);cursor:pointer;}
.ws-menu button:hover{background:var(--pale-lavender);}
.ws-menu button[aria-selected="true"]::after{content:"\2713";margin-left:auto;color:var(--accent);font-weight:700;}
.ws-menu .dotmark{width:22px;height:22px;border-radius:50%;background:var(--pale-lavender);color:var(--accent);display:grid;place-items:center;font-family:var(--serif);font-size:.85rem;flex:0 0 auto;}

/* ---------- narrative summary ---------- */
.narrative{margin:26px 0 0;padding:18px 22px 16px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 14px 14px 0;}
.narrative h2{font-size:1.3rem;margin:0 0 .3rem;}
.narrative p{margin:0;color:var(--text-soft);font-size:.98rem;max-width:82ch;line-height:1.55;}
.narrative .nar-note{margin-top:.55rem;font-size:.74rem;color:var(--text-muted);font-style:italic;}