/*
 * Common Wealth Retirement - ROI Calculator
 *
 * IMPORTANT: ASCII characters only in this file.
 * No em dashes, curly quotes, or Unicode - even in comments.
 */

:root{
  --cw-emerald:#00CE7C; --cw-emerald-dark:#018C5A; --cw-emerald-soft:#E5F7EE;
  --cw-spruce:#01353D; --cw-spruce-dark:#002329; --cw-pistachio:#BAEE95;
  --cw-sand:#C2B26E; --cw-sand-soft:#F4F0E2; --cw-plum:#331F40; --cw-plum-soft:#EDE7F3;
  --cw-lilac:#C5B6F1; --cw-chartreuse:#C6D92F; --cw-cloud:#FCFCF7; --cw-white:#FFFFFF;
  --color-primary:#00CE7C; --color-primary-dark:#01353D; --color-bg:#FCFCF7; --color-card:#FFFFFF;
  --color-text:#01353D; --color-text-soft:#4A5C66; --color-text-muted:#6B7B82; --color-text-light:#FFFFFF;
  --color-rule:#E2DFD3; --color-rule-soft:#EFEDE4;
  --tier-below:#BAEE95; --tier-mid:#C2B26E; --tier-high:#C5B6F1;
  --space-xs:4px; --space-sm:8px; --space-md:14px; --space-lg:22px; --space-xl:32px; --space-xxl:48px;
  --radius:10px; --radius-sm:7px;
  --shadow:0 1px 2px rgba(1,53,61,0.05),0 4px 16px rgba(1,53,61,0.06);
  --font:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--color-bg);color:var(--color-text);line-height:1.5;
  -webkit-font-smoothing:antialiased;font-size:15px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-lg)}

/* Header */
header{background:var(--cw-spruce);color:#fff;padding:var(--space-md) 0}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg)}
.brand{display:flex;align-items:center;gap:var(--space-md)}
.brand img{height:26px;display:block}
.badge{font-size:12px;font-weight:600;letter-spacing:.02em;background:rgba(255,255,255,.12);
  padding:4px 10px;border-radius:999px;color:#fff}
.hero{background:var(--cw-spruce);color:#fff;padding:var(--space-lg) 0 var(--space-xl)}
.hero h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-sm);max-width:30ch}
.hero p{color:rgba(255,255,255,.78);max-width:62ch;font-size:15px}
.hero .tag{display:inline-block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--cw-emerald);margin-bottom:var(--space-sm)}

/* View + plan toggles */
.controls-bar{background:#fff;border-bottom:1px solid var(--color-rule);position:sticky;top:0;z-index:20;
  box-shadow:0 1px 2px rgba(1,53,61,.04)}
.controls-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-lg);padding:var(--space-md) var(--space-lg)}
.seg{display:inline-flex;background:var(--cw-cloud);border:1px solid var(--color-rule);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;font-family:var(--font);font-size:13px;font-weight:600;color:var(--color-text-soft);
  padding:6px 14px;border-radius:999px;cursor:pointer;transition:.15s}
.seg button.active{background:var(--cw-spruce);color:#fff}
.ctrl-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-right:-8px}

/* Layout */
main{padding:var(--space-xl) 0 var(--space-xxl)}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--space-xl);align-items:start}
@media(max-width:880px){.grid{grid-template-columns:1fr}}

.card{background:var(--color-card);border:1px solid var(--color-rule);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--space-lg)}
.card+.card{margin-top:var(--space-lg)}
.card h2{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:var(--space-xs)}
.card .sub{font-size:13px;color:var(--color-text-muted);margin-bottom:var(--space-md)}

.field{margin-bottom:var(--space-md)}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field .hint{font-size:12px;color:var(--color-text-muted);margin-top:4px;font-weight:400}
.field input[type=number],.field input[type=text],.field select,.field textarea{
  width:100%;font-family:var(--font);font-size:15px;color:var(--color-text);background:#fff;
  border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:9px 11px;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--cw-emerald);
  box-shadow:0 0 0 3px var(--cw-emerald-soft)}
.field textarea{resize:vertical;min-height:84px;font-variant-numeric:tabular-nums}
.inline{display:flex;gap:var(--space-md)}
.inline>.field{flex:1}
.with-unit{position:relative}
.with-unit .unit{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);font-size:13px;pointer-events:none}
.field .with-unit input{padding-right:30px}
.field .with-prefix input{padding-left:26px}
.with-prefix .pre{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);font-size:14px;pointer-events:none}

/* slider */
input[type=range]{width:100%;accent-color:var(--cw-emerald);height:24px}
.range-val{font-weight:700;color:var(--cw-spruce)}

.preset-row{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:6px}
.chip{font-size:12px;font-weight:600;border:1px solid var(--color-rule);background:#fff;color:var(--color-text-soft);
  border-radius:999px;padding:5px 11px;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--cw-emerald);color:var(--cw-emerald-dark)}
.chip.active{background:var(--cw-emerald-soft);border-color:var(--cw-emerald);color:var(--cw-emerald-dark)}

.advanced-only{display:none}
body.advanced .advanced-only{display:block}
body.advanced .advanced-only.inline{display:flex}
.adv-note{font-size:12px;color:var(--cw-emerald-dark);font-weight:600;display:none}
body.advanced .adv-note{display:inline}

/* Results */
.headline{background:linear-gradient(135deg,var(--cw-spruce),var(--cw-spruce-dark));color:#fff;
  border-radius:var(--radius);padding:var(--space-lg);box-shadow:var(--shadow)}
.headline .roi-num{font-size:52px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--cw-emerald)}
.headline .roi-label{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.7);margin-bottom:6px}
.headline .net{margin-top:var(--space-md);font-size:15px;color:rgba(255,255,255,.9)}
.headline .net b{color:#fff;font-size:20px;font-weight:700}
.headline .verdict{margin-top:var(--space-sm);font-size:13px;color:rgba(255,255,255,.75)}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-top:var(--space-lg)}
.kpi{background:var(--cw-cloud);border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:var(--space-md)}
.kpi .v{font-size:22px;font-weight:700;letter-spacing:-.01em}
.kpi .k{font-size:12px;color:var(--color-text-muted);margin-top:2px}
.kpi.pos .v{color:var(--cw-emerald-dark)}
.kpi.neg .v{color:#9a4a2f}

.breakdown{width:100%;border-collapse:collapse;margin-top:var(--space-sm);font-variant-numeric:tabular-nums}
.breakdown td{padding:9px 0;border-bottom:1px solid var(--color-rule-soft);font-size:14px}
.breakdown td:last-child{text-align:right;font-weight:600}
.breakdown tr.total td{border-top:2px solid var(--color-rule);border-bottom:0;font-weight:700;font-size:15px;padding-top:12px}
.breakdown tr.sub td{color:var(--color-text-soft);font-size:13px}
.breakdown tr.sub td:first-child{padding-left:16px}
.breakdown .save{color:var(--cw-emerald-dark)}
.breakdown .cost{color:#9a4a2f}

.bar{height:14px;border-radius:7px;background:var(--color-rule-soft);overflow:hidden;display:flex;margin:6px 0 2px}
.bar span{display:block;height:100%}
.bar-legend{display:flex;gap:var(--space-lg);flex-wrap:wrap;margin-top:4px;font-size:13px;color:var(--color-text-soft)}
.bar-legend .bl-item{display:inline-flex;align-items:center;gap:7px}
.bar-legend .bl-swatch{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
.bar-legend b{color:var(--color-text);font-weight:700}

details.foot{margin-top:var(--space-md);border-top:1px solid var(--color-rule-soft);padding-top:var(--space-md)}
details.foot summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--color-text);list-style:none;
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  background:var(--cw-cloud);border:1px solid var(--color-rule);transition:.15s}
details.foot summary:hover{border-color:var(--cw-emerald);background:var(--cw-emerald-soft)}
details.foot summary::-webkit-details-marker{display:none}
details.foot summary::before{content:"";display:inline-block;width:0;height:0;border-style:solid;border-width:4px 0 4px 5px;border-color:transparent transparent transparent var(--cw-emerald-dark);transition:transform .15s ease}
details.foot[open] summary::before{transform:rotate(90deg)}
details.foot .body{font-size:12.5px;color:var(--color-text-muted);margin-top:var(--space-sm);line-height:1.6}
details.foot .body p{margin-bottom:6px}
details.foot .body b{color:var(--color-text-soft)}

.disclaimer{font-size:12px;color:var(--color-text-muted);background:var(--cw-sand-soft);border:1px solid #E8E1C8;
  border-radius:var(--radius-sm);padding:var(--space-md);margin-top:var(--space-md);line-height:1.55}
.dpsp-block{transition:.2s}
.dpsp-off{opacity:.45;pointer-events:none}

footer{background:var(--cw-spruce);color:rgba(255,255,255,.7);padding:var(--space-lg) 0;font-size:12px;margin-top:var(--space-xl)}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
footer img{height:22px;opacity:.9}
a{color:var(--cw-emerald-dark)}
.scenario-note{font-size:12px;color:var(--color-text-muted);margin-top:var(--space-sm)}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--cw-emerald-soft);color:var(--cw-emerald-dark);margin-left:6px}

/* benchmark callouts (collapsible) */
.benchmark{margin-top:10px}
.benchmark>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:var(--cw-emerald-dark);padding:7px 12px;
  background:var(--cw-emerald-soft);border:1px solid #BFE9D4;border-radius:999px;transition:.15s}
.benchmark>summary:hover{background:#D5F2E3;border-color:var(--cw-emerald)}
.benchmark>summary::-webkit-details-marker{display:none}
.benchmark>summary::before{content:"";display:inline-block;width:0;height:0;border-style:solid;border-width:4px 0 4px 5px;border-color:transparent transparent transparent var(--cw-emerald-dark);transition:transform .15s ease}
.benchmark[open]>summary::before{transform:rotate(90deg)}
.benchmark .bm-inner{background:var(--cw-emerald-soft);border:1px solid #BFE9D4;border-left:3px solid var(--cw-emerald);
  border-radius:var(--radius-sm);padding:10px 12px;margin-top:7px;font-size:12px;color:var(--color-text-soft);line-height:1.5}
.benchmark ul{list-style:none;margin:0;padding:0}
.benchmark li{padding:2px 0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-bottom:1px dotted #BFE9D4}
.benchmark li:last-child{border-bottom:0}
.benchmark li b{color:var(--cw-spruce);font-weight:700;white-space:nowrap}
.benchmark .bm-src{display:block;margin-top:7px;font-size:10.5px;color:var(--color-text-muted);line-height:1.45}

/* sources / endnotes */
.sources-card summary{cursor:pointer;font-size:15px;font-weight:700;list-style:none;
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--cw-cloud);border:1px solid var(--color-rule);transition:.15s}
.sources-card summary:hover{border-color:var(--cw-emerald);background:var(--cw-emerald-soft)}
.sources-card summary::-webkit-details-marker{display:none}
.sources-card summary::before{content:"";display:inline-block;width:0;height:0;border-style:solid;border-width:4px 0 4px 5px;border-color:transparent transparent transparent var(--cw-emerald-dark);transition:transform .15s ease}
.sources-card[open] summary::before{transform:rotate(90deg)}
.src-list{margin-top:var(--space-md);padding-left:20px;font-size:12.5px;color:var(--color-text-muted);line-height:1.6}
.src-list li{margin-bottom:10px}
.src-list li:last-child{margin-bottom:0}
.src-list b{color:var(--color-text-soft)}
#sources,.src-list li{scroll-margin-top:70px}
.header-src-link{color:rgba(255,255,255,.75);font-size:12px;font-weight:600;text-decoration:none;margin-left:14px}
.header-src-link:hover{color:#fff}