:root{
  --navy:#0d1b2a;--navy-mid:#1a2f44;--steel:#2e5170;
  --ocean:#1e7fa6;--ocean-light:#2fa3d1;
  --fog:#e8edf2;--fog-mid:#d0dae3;--fog-light:#f4f7fa;
  --white:#fff;--amber:#e8a020;--green:#2d9e6b;--red:#cc4a3c;
  --text:#0d1b2a;--text-sec:#4a6278;--text-muted:#8fa4b8;
  --border:rgba(13,27,42,.1);--border-mid:rgba(13,27,42,.18);
  --r:10px;--rs:6px;--shadow:0 2px 16px rgba(13,27,42,.08);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--fog-light);color:var(--text);min-height:100vh;}

/* HEADER */
.hdr{background:var(--navy);position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.3);}
.hdr-in{max-width:920px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px;}
.brand-name{font-family:'DM Serif Display',serif;font-size:26px;color:var(--white);letter-spacing:.02em;}
.brand-name span{color:var(--ocean-light);}
.brand-tag{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.1em;text-transform:uppercase;margin-top:2px;}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.mode-badge{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:20px;}
.mode-local{background:rgba(232,160,32,.18);color:#f0c070;}
.mode-cloud{background:rgba(45,158,107,.18);color:#7fd3a7;}
.hdr-user{font-size:12px;color:rgba(255,255,255,.6);}
.linkbtn{font-size:12px;color:rgba(255,255,255,.6);background:none;border:none;cursor:pointer;font-family:inherit;text-decoration:underline;}
.linkbtn:hover{color:#fff;}

.main{max-width:920px;margin:0 auto;padding:28px 24px 64px;}
.ph h1{font-family:'DM Serif Display',serif;font-size:26px;color:var(--navy);line-height:1.2;}
.ph h1 em{font-style:italic;color:var(--ocean);}
/* Module description as a prominent info box (ocean tint + left border) so the
   eye doesn't skip past it to the first input. Shared by every module's .ph. */
.ph p{font-size:14px;color:var(--text-sec);margin-top:10px;line-height:1.55;background:rgba(30,127,166,.11);border-left:3px solid var(--ocean);padding:12px 15px;border-radius:0 6px 6px 0;}
.hidden{display:none!important;}

.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;margin-bottom:14px;box-shadow:var(--shadow);}
.ct{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;}
.b-info{background:#e3f4fa;color:#1a6e8a;}

/* LOGIN */
.login-wrap{max-width:420px;margin:8vh auto 0;text-align:center;}
.login-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:32px 28px;box-shadow:var(--shadow);}
.login-card h2{font-family:'DM Serif Display',serif;font-size:22px;color:var(--navy);margin-bottom:8px;}
.login-card p{font-size:13px;color:var(--text-sec);line-height:1.5;margin-bottom:20px;}

/* INPUTS */
.ti{width:100%;font-size:14px;font-family:'DM Sans',sans-serif;color:var(--text);background:var(--fog-light);border:1px solid var(--border-mid);border-radius:var(--rs);padding:9px 12px;outline:none;transition:border-color .15s;}
.ti:focus{border-color:var(--ocean);}
label.fl{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px;}
.btn{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;padding:10px 18px;border-radius:var(--rs);border:1.5px solid var(--ocean);background:var(--ocean);color:#fff;cursor:pointer;transition:all .15s;}
.btn:hover{background:var(--ocean-light);border-color:var(--ocean-light);}
.btn-ghost{background:transparent;color:var(--ocean);}
.btn-ghost:hover{background:var(--fog);color:var(--ocean);}
.btn:disabled{opacity:.5;cursor:default;}
.row{display:flex;gap:10px;align-items:flex-end;}
.row .grow{flex:1;}

/* DISTRIBUTOR BAR */
.dist-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.dist-bar .grow{flex:1;min-width:200px;}
select.ti{appearance:auto;}

/* METRICS */
.mrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0;}
.mc{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;text-align:center;box-shadow:var(--shadow);}
.mv{font-family:'DM Serif Display',serif;font-size:26px;color:var(--navy);line-height:1;}
.ml{font-size:10px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em;}

/* SLIDER DIMS */
.dr{padding:11px 0;border-bottom:1px solid var(--border);}
.dr:last-child{border-bottom:none;}
.dr-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:5px;}
.dl{font-size:13px;color:var(--text);line-height:1.4;flex:1;}
.dh{font-size:11px;color:var(--text-muted);margin-top:2px;}
.dr-right{display:flex;align-items:center;gap:7px;flex-shrink:0;}
.dscore{font-size:13px;font-weight:600;min-width:18px;text-align:right;color:var(--navy);}
.flag{font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;white-space:nowrap;}
.f-red{background:#faeae8;color:#9e3026;}
.f-warn{background:#faf3e3;color:#8a6010;}
.f-ok{background:#e3f5ed;color:#1e6e48;}
.na-btn{font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;border:1.5px solid var(--border-mid);background:transparent;color:var(--text-muted);cursor:pointer;font-family:inherit;white-space:nowrap;}
.na-btn.active{background:var(--fog-mid);border-color:var(--text-muted);color:var(--text);}
.dr.na-dim .dl,.dr.na-dim .dh{opacity:.35;}
.dr.na-dim input[type=range],.dr.na-dim .slider-labels{opacity:.25;pointer-events:none;}
.slider-wrap{position:relative;margin-top:2px;}
.slider-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);margin-top:3px;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--fog-mid);outline:none;cursor:pointer;display:block;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--navy);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);}
input[type=range]:hover::-webkit-slider-thumb{background:var(--ocean);}

/* ACTIONS */
.action-sugg{border-radius:var(--rs);padding:12px 14px;border-left:3px solid;}
.as-title{font-size:12px;font-weight:600;margin-bottom:6px;}
.as-item{font-size:12px;padding:3px 0;color:var(--text-sec);line-height:1.4;}

/* HISTORY / TREND */
.hist-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
.hist-row:last-child{border-bottom:none;}
.hist-date{color:var(--text-sec);min-width:96px;}
.hist-score{font-weight:600;color:var(--navy);}
.hist-trend{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;}
.empty{font-size:13px;color:var(--text-muted);font-style:italic;padding:6px 0;}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--navy);color:#fff;font-size:14px;font-weight:600;padding:13px 24px;border-radius:24px;box-shadow:0 6px 26px rgba(0,0,0,.28);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:200;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.t-success{background:var(--green);}
.toast.t-error{background:var(--red);}
.foot{background:var(--navy);color:rgba(255,255,255,.35);font-size:11px;text-align:center;padding:14px 24px;letter-spacing:.04em;}
.divider{height:1px;background:var(--border);margin:14px 0;}

/* TABS */
/* Sticky module nav: sticks just below the fixed header (--hdr-h set in JS),
   stays scrollable on narrow screens so the phase names never get truncated. */
.tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--border);position:sticky;top:var(--hdr-h,58px);z-index:90;background:var(--fog-light);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;box-shadow:0 5px 12px -9px rgba(13,27,42,.4);}
.tab{padding:10px 20px;font-size:13px;font-weight:500;font-family:inherit;color:var(--text-muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px;white-space:nowrap;}
.tab:hover{color:var(--text-sec);}
.tab.active{color:var(--ocean);border-bottom-color:var(--ocean);font-weight:600;}
/* Dual conclusion in Screening: data score + gut-check, equal visual weight,
   stacked on mobile. The note below reinforces they are inputs, not the verdict. */
.dual-cc{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:6px;}
.cc-block{flex:1 1 220px;background:var(--white);border:1px solid var(--border);border-radius:var(--rs);padding:14px 16px;}
.cc-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:5px;}
.cc-value{font-family:'DM Serif Display',serif;font-size:19px;line-height:1.25;}
.cc-note{font-size:12px;color:var(--text-muted);margin:0 0 16px;line-height:1.5;}
.hist-gut{color:var(--text-muted);font-size:12px;}
/* Persistent design-intent line at the bottom of every module */
.philosophy-line{text-align:center;color:var(--text-muted);font-size:12px;line-height:1.5;margin:28px 0 0;}
/* Field helper text (below a field label, above the input) */
.fh{font-size:12px;color:var(--text-muted);line-height:1.45;margin:2px 0 6px;}
/* Help dropdown items */
.help-item{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--border);padding:12px 16px;font-family:inherit;font-size:13px;color:var(--navy);cursor:pointer;text-decoration:none;}
.help-item:last-child{border-bottom:none;}
.help-item:hover{background:var(--fog-light);}

/* Prev/Next module navigation at the bottom of each module in the sequence */
.mod-nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--border);}
.mod-nav .mn-slot{display:flex;}
.mod-nav .mn-slot.right{margin-left:auto;}

/* PILL BUTTONS (complexity selector) */
.pill-btns{display:flex;flex-wrap:wrap;gap:6px;}
.pill-btn{font-size:12px;font-weight:500;padding:6px 14px;border-radius:20px;border:1.5px solid var(--border-mid);background:transparent;color:var(--text-sec);cursor:pointer;font-family:inherit;}
.pill-btn:hover{border-color:var(--ocean);color:var(--ocean);}
.pill-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;}

/* PORTFOLIO VERDICT */
.pv{font-size:13px;padding:10px 13px;border-radius:var(--rs);font-weight:500;line-height:1.4;}

/* SOLUTION — guidance rows + salesperson profile */
.ir{display:flex;gap:14px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;align-items:flex-start;}
.ir:last-child{border-bottom:none;}
.il{color:var(--text-muted);min-width:120px;flex-shrink:0;line-height:1.4;}
.iv{color:var(--text);flex:1;line-height:1.4;}
.sp-badge{border-radius:var(--rs);padding:12px 14px;margin-bottom:12px;}
.sp-type{font-size:14px;font-weight:600;}
.sp-sec{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:10px 0 5px;}
.sp-item{font-size:13px;color:var(--text);padding:5px 0;border-bottom:1px solid var(--border);line-height:1.4;}
.sp-item:last-child{border-bottom:none;}
.sp-item-m{color:var(--text-sec);}
.cxv{font-size:13px;font-weight:600;color:var(--ocean);min-width:40px;text-align:right;}

/* AGREEMENT — checklists */
.cr{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;}
.cr:last-child{border-bottom:none;}
.cb{width:19px;height:19px;border-radius:4px;border:1.5px solid var(--border-mid);background:var(--fog-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:all .15s;}
.cb.chk{background:var(--green);border-color:var(--green);}
.clbl{font-size:13px;color:var(--text);line-height:1.4;flex:1;}
.clbl.done{text-decoration:line-through;opacity:.5;}
.chint{font-size:11px;color:var(--text-muted);margin-top:2px;}
.b-danger{background:#faeae8;color:#9e3026;}
/* AGREEMENT — balance bars */
.br{padding:10px 0;border-bottom:1px solid var(--border);}
.br:last-child{border-bottom:none;}
.br-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.bl{font-size:13px;color:var(--text);}
.bs{font-size:11px;color:var(--text-muted);}
.bt-wrap{display:flex;align-items:center;gap:8px;}
.bside{font-size:10px;color:var(--text-muted);min-width:58px;}
.bside-r{text-align:right;}
.btrack{flex:1;height:6px;border-radius:3px;background:var(--fog-mid);position:relative;}
.bfill{height:100%;border-radius:3px;transition:width .2s;}
.bmid{position:absolute;left:50%;top:-4px;width:2px;height:14px;background:var(--border-mid);transform:translateX(-50%);}