:root{--navy:#063b63;--blue:#0076a8;--sky:#e8f5fa;--ink:#142433;--muted:#607080;--line:#dce5eb;--paper:#fff;--bg:#f3f7f9;--green:#16836f;--shadow:0 18px 55px rgba(17,50,70,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}.site-header{height:78px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;text-decoration:none;color:var(--navy);gap:3px}.brand-dci{font-size:25px;font-weight:800;letter-spacing:-1px}.brand-edge{font-size:25px;font-weight:500;letter-spacing:-1px}.brand-divider{height:28px;width:1px;background:var(--line);margin:0 12px}.brand-campaign{font-size:11px;letter-spacing:1.5px;color:var(--muted)}.brand-campaign strong{color:var(--blue)}.header-actions{display:flex;gap:10px}.button{border:0;border-radius:9px;padding:11px 18px;font:600 14px Inter;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.button-primary{background:var(--navy);color:#fff}.button-primary:hover{background:#0b4b7b}.button-ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}.button-large{padding:15px 24px;font-size:16px}.hero{min-height:540px;padding:90px clamp(24px,8vw,120px);display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:center;background:linear-gradient(125deg,#fff 0%,#fff 58%,#e9f5f9 58%,#dff0f6 100%)}.hero h1{font-size:clamp(52px,7vw,92px);line-height:.98;letter-spacing:-5px;margin:10px 0 28px;color:var(--navy);max-width:850px}.hero h1 span{color:var(--blue);font-style:italic}.hero-lede{font-size:20px;color:var(--muted);max-width:720px;margin-bottom:34px}.eyebrow{text-transform:uppercase;letter-spacing:1.8px;font-size:11px;font-weight:800;color:var(--blue);margin:0 0 8px}.hero-panel{background:rgba(255,255,255,.88);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.7);padding:18px 28px;border-radius:18px}.hero-panel div{padding:20px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column}.hero-panel div:last-child{border-bottom:0}.hero-panel strong{font-size:23px;color:var(--navy)}.hero-panel span{font-size:14px;color:var(--muted)}.calculator-shell{max-width:1540px;margin:0 auto;padding:70px 28px 90px;display:grid;grid-template-columns:390px 1fr;gap:30px}.inputs-panel,.results-panel>article,.chart-card,.results-intro,.metric-card{background:var(--paper);border:1px solid var(--line);border-radius:16px}.inputs-panel{padding:26px;align-self:start;position:sticky;top:98px;max-height:calc(100vh - 120px);overflow:auto}.section-heading h2,.results-intro h2{margin:0;font-size:30px;color:var(--navy);letter-spacing:-1px}.section-heading>p:last-child,.results-intro>p:last-child{color:var(--muted)}details{border-top:1px solid var(--line);padding:16px 0}details:first-of-type{margin-top:16px}summary{font-weight:750;color:var(--navy);cursor:pointer}.input-grid{display:grid;gap:14px;margin-top:14px}label{display:grid;gap:6px;font-size:13px;font-weight:650;color:#33495a}input,select{width:100%;border:1px solid #cbd8df;background:#fff;border-radius:8px;padding:11px 12px;font:500 15px Inter;color:var(--ink);outline:none}input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,118,168,.12)}.input-prefix,.input-suffix{display:flex;align-items:center;border:1px solid #cbd8df;border-radius:8px;background:#fff;overflow:hidden}.input-prefix span,.input-suffix span{padding:0 10px;color:var(--muted)}.input-prefix input,.input-suffix input{border:0;border-radius:0;box-shadow:none}.input-suffix span{order:2}label small{font-weight:400;color:var(--muted);line-height:1.35}.assumption-note{font-size:11px;color:var(--muted);background:#f6f8f9;padding:14px;border-radius:9px;margin-top:6px}.results-panel{display:grid;gap:22px}.results-intro{padding:28px}.results-intro h2{font-size:38px}.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.metric-card{padding:24px;display:grid;gap:8px}.metric-card span{font-size:13px;font-weight:700;color:var(--muted)}.metric-card strong{font-size:clamp(31px,4vw,48px);line-height:1;color:var(--navy);letter-spacing:-2px}.metric-card small{color:var(--muted)}.metric-featured{background:var(--navy);border-color:var(--navy)}.metric-featured span,.metric-featured small{color:#cde1ed}.metric-featured strong{color:#fff}.story-card{padding:28px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:linear-gradient(120deg,#fff,#e9f6fa)!important}.story-card h3{font-size:25px;margin:0 0 8px;color:var(--navy)}.story-card p:last-child{color:var(--muted);margin:0}.story-amount{font-size:38px;font-weight:800;color:var(--green);white-space:nowrap}.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.chart-card,.timeline-card,.method-card{padding:24px}.chart-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.chart-heading h3,.method-card h3{margin:0;color:var(--navy);font-size:21px}.chart-heading>span{font-size:12px;color:var(--muted)}.chart-wrap{height:300px;margin-top:16px}.timeline{display:grid;gap:10px;margin-top:20px}.timeline-row{display:grid;grid-template-columns:70px 1fr 1fr;gap:12px;align-items:center}.timeline-label{font-size:12px;font-weight:700;color:var(--muted)}.op-track{height:34px;background:#eef3f5;border-radius:7px;overflow:hidden;position:relative}.op-bar{height:100%;display:flex;align-items:center;padding:0 10px;color:#fff;font-size:12px;font-weight:700;min-width:48px}.op-bar.dci{background:var(--navy)}.op-bar.alt{background:#8799a6}.method-card p{color:var(--muted);margin-bottom:0}.results-panel>article{padding:25px}footer{background:var(--navy);color:#fff;text-align:center;padding:50px 20px;display:grid;gap:8px}footer strong{font-size:28px}footer span{color:#d2e5ef}footer em{color:#7bd2ed}footer small{margin-top:16px;color:#a9c3d1}@media(max-width:1050px){.hero{grid-template-columns:1fr}.hero-panel{max-width:680px}.calculator-shell{grid-template-columns:1fr}.inputs-panel{position:static;max-height:none}.chart-grid{grid-template-columns:1fr}}@media(max-width:700px){.site-header{height:auto;padding:14px 18px;align-items:flex-start}.brand-divider,.brand-campaign{display:none}.header-actions .button-ghost{display:none}.hero{padding:65px 22px;min-height:auto;background:linear-gradient(160deg,#fff 0%,#fff 72%,#e5f3f8 72%)}.hero h1{font-size:54px;letter-spacing:-3px}.calculator-shell{padding:42px 14px}.metric-grid{grid-template-columns:1fr}.story-card{align-items:flex-start;flex-direction:column}.chart-wrap{height:260px}.timeline-row{grid-template-columns:55px 1fr}.timeline-row .op-track:last-child{grid-column:2}.results-intro h2{font-size:32px}}@media print{.site-header,.hero,.inputs-panel,.button{display:none!important}body{background:#fff}.calculator-shell{display:block;padding:0}.results-panel{gap:12px}.results-panel>*{break-inside:avoid}.metric-grid{grid-template-columns:repeat(2,1fr)}footer{margin-top:20px}.chart-wrap{height:240px}}
.wealth-breakdown{display:grid;gap:5px;margin-top:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2)}.wealth-breakdown span{display:flex;justify-content:space-between;gap:14px;color:#cde1ed;font-size:11px;font-weight:500}.wealth-breakdown b{color:#fff;font-size:12px}

/* v0.4 responsive overflow fixes */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, canvas {
  max-width: 100%;
}

.site-header,
.hero,
.calculator-shell,
.inputs-panel,
.results-panel,
.results-panel > *,
.metric-grid,
.metric-card,
.chart-grid,
.chart-card,
.chart-wrap,
.story-card,
.timeline-card,
.method-card {
  min-width: 0;
}

.chart-wrap canvas {
  width: 100% !important;
  max-width: 100% !important;
}

.brand,
.header-actions,
.chart-heading,
.story-card,
.wealth-breakdown span {
  min-width: 0;
}

.brand-campaign,
.chart-heading > span,
.story-card p,
.metric-card small,
.method-card p {
  overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
  .calculator-shell {
    grid-template-columns: 340px minmax(0, 1fr);
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1050px) {
  .calculator-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .inputs-panel,
  .results-panel {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .site-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .header-actions {
    width: 100%;
  }

  .header-actions .button {
    flex: 1 1 auto;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .results-intro,
  .metric-card,
  .chart-card,
  .timeline-card,
  .method-card,
  .results-panel > article {
    padding-left: 18px;
    padding-right: 18px;
  }

  .chart-heading {
    flex-direction: column;
  }

  .story-amount {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  .brand-dci,
  .brand-edge {
    font-size: 21px;
  }

  .hero h1 {
    font-size: 46px;
    letter-spacing: -2px;
  }

  .calculator-shell {
    padding-left: 10px;
    padding-right: 10px;
  }

  .inputs-panel {
    padding: 20px 16px;
  }

  .metric-card strong {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .timeline-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}