:root{--bg:#f7faf9;--text:#10201d;--muted:#61736f;--brand:#0f766e;--brand-dark:#0b4f4a;--border:#dbe7e3;--shadow:0 18px 45px rgba(15,118,110,.10);--red:#fecaca;--redText:#991b1b;--amber:#fde68a;--amberText:#92400e;--green:#bbf7d0;--greenText:#166534}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top left,#e5f7f3 0,var(--bg) 34rem);color:var(--text);line-height:1.55}.site-header{position:sticky;top:0;z-index:10;background:rgba(247,250,249,.9);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--text);font-weight:850}.brand-mark{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.7rem;background:var(--brand);color:white;font-size:.78rem;font-weight:900}.top-nav{display:none;gap:1rem}.top-nav a{text-decoration:none;color:var(--muted)}.hero{padding:3rem 1rem 1.2rem;max-width:960px;margin:0 auto}.eyebrow{color:var(--brand);font-weight:850;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem}h1,h2{letter-spacing:-.04em;line-height:1.05}h1{font-size:clamp(2.15rem,9vw,4.5rem);margin:.8rem 0 1rem;max-width:850px}h2{font-size:clamp(1.45rem,5vw,2.2rem);margin:0 0 .8rem}.hero-text{color:var(--muted);font-size:1.08rem;max-width:780px}.notice{max-width:960px;margin:.5rem auto 1rem;padding:.9rem 1rem;border:1px solid #f0d58a;background:#fff8db;color:#5c4608;border-radius:1rem}.calculator-shell{display:grid;gap:1rem;padding:1rem;max-width:1120px;margin:0 auto}.card{background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:1.5rem;padding:1rem;box-shadow:var(--shadow)}.section-title{display:flex;gap:1rem;align-items:center;justify-content:space-between}.secondary-button{border:1px solid var(--border);background:#fff;border-radius:999px;padding:.65rem .85rem;font-weight:850;color:var(--brand-dark);cursor:pointer}.field-grid{display:grid;gap:1rem}.field{display:grid;gap:.45rem;margin:1rem 0}.field span:first-child{font-weight:800}.field output{font-weight:900;color:var(--brand-dark)}.field small{color:var(--muted)}input[type=range]{width:100%;accent-color:var(--brand)}input[type=number]{font:inherit;font-weight:850;color:var(--text)}.currency-input{display:flex;align-items:center;gap:.45rem;border:1px solid var(--border);border-radius:1rem;background:white;padding:.7rem .8rem;font-size:1.08rem}.currency-input span{font-weight:900;color:var(--muted)}.currency-input input{width:100%;border:0;outline:0;background:transparent}.text-field>input{border:1px solid var(--border);border-radius:1rem;padding:.75rem .85rem}.always-visible{border-top:1px solid var(--border);padding-top:1.2rem;margin-top:1.2rem}.switch-grid{display:grid;gap:.8rem;margin:1rem 0}.switch-row{display:flex;gap:.75rem;align-items:center;padding:.8rem;border:1px solid var(--border);border-radius:1rem;background:#fbfefd;font-weight:750}.switch-row input{width:1.2rem;height:1.2rem;accent-color:var(--brand)}.warning{background:#fff1f2;border:1px solid #fecdd3;color:#9f1239;border-radius:1rem;padding:.8rem;font-weight:750}.hidden{display:none}.result-card{background:linear-gradient(180deg,#0f766e,#0b4f4a);color:white;position:sticky;top:4.5rem}.result-topline{color:rgba(255,255,255,.76);font-weight:800}.big-number{font-size:clamp(2.2rem,12vw,4rem);line-height:1;font-weight:950;letter-spacing:-.06em;margin:.45rem 0 .9rem}.status-badge{display:inline-flex;border-radius:999px;background:rgba(255,255,255,.15);padding:.45rem .75rem;font-weight:900;margin-bottom:1rem}.status-red{background:var(--red);color:var(--redText)}.status-amber{background:var(--amber);color:var(--amberText)}.status-green{background:var(--green);color:var(--greenText)}.result-list{display:grid;gap:.65rem;margin:0}.result-list div,.qa-list div{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid rgba(255,255,255,.18);padding-top:.65rem}.result-list dt{color:rgba(255,255,255,.76)}.result-list dd,.qa-list dd{margin:0;font-weight:900;text-align:right}.traffic-red{color:#fecaca!important}.traffic-amber{color:#fde68a!important}.traffic-green{color:#bbf7d0!important}.insight{margin-top:1rem;background:rgba(255,255,255,.12);border-radius:1rem;padding:.9rem;font-weight:750}.chart-card,.qa-card,.assumptions-card{max-width:980px;margin:1rem auto}.chart-card canvas{width:100%;height:auto;border:1px solid var(--border);border-radius:1rem;background:#fff}.chart-summary{font-size:1.15rem;color:var(--text);font-weight:700}.legend{display:flex;flex-wrap:wrap;gap:1rem;color:var(--muted);font-weight:750;margin-top:.75rem}.legend i{display:inline-block;width:2rem;height:.2rem;vertical-align:middle;margin-right:.4rem;background:#0b4f4a}.legend .dash{background:repeating-linear-gradient(90deg,#0f766e 0,#0f766e 8px,transparent 8px,transparent 14px)}.legend .marker{width:.2rem;height:1rem;background:#111827}.qa-list{display:grid;gap:.65rem}.qa-list div{border-top:1px solid var(--border)}.qa-list dt{color:var(--muted)}.assumptions-card li{color:var(--muted);margin:.45rem 0}.site-footer{max-width:1120px;margin:3rem auto 0;padding:2rem 1rem;border-top:1px solid var(--border);color:var(--muted)}@media(min-width:720px){.top-nav{display:flex}.hero{padding-top:5rem}.calculator-shell{grid-template-columns:minmax(0,1.08fr) minmax(340px,.72fr);align-items:start}.card{padding:1.35rem}.field-grid{grid-template-columns:1fr 1fr}}
.hero-disclaimer{margin-top:1rem;padding:.85rem 1rem;border:1px solid var(--border);border-radius:1rem;background:#f9fafb;color:#4b5563;font-size:.92rem;max-width:780px}
.hidden{display:none!important}





details{border-top:1px solid var(--border);padding:1rem 0}
summary{cursor:pointer;font-weight:850;color:var(--brand-dark)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.75rem}
.site-footer a{color:var(--muted);text-decoration:none}

.seo-content p{
  color:var(--muted);
  max-width:820px;
}


/* v8.1 mobile safety patch */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

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

.site-header {
  min-width: 0;
}

.brand {
  min-width: 0;
}

.brand span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-shell,
.card,
.hero,
.assumptions-card,
.chart-card,
.qa-card {
  width: 100%;
}

.big-number {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.result-list div,
.qa-list div {
  align-items: flex-start;
}

.result-list dd,
.qa-list dd {
  max-width: 52%;
  overflow-wrap: anywhere;
}

.chart-card {
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.chart-card canvas {
  display: block;
  max-width: 100%;
}

@media (max-width: 719px) {
  .site-header {
    position: static;
    align-items: flex-start;
  }

  .top-nav {
    display: none;
  }

  .hero {
    padding-top: 2rem;
  }

  .calculator-shell {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }

  .result-card {
    position: static;
    top: auto;
  }

  .card {
    border-radius: 1.15rem;
    padding: 0.9rem;
  }

  .section-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .secondary-button {
    width: 100%;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .big-number {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .result-list div,
  .qa-list div {
    flex-direction: column;
    gap: 0.2rem;
  }

  .result-list dd,
  .qa-list dd {
    max-width: 100%;
    text-align: left;
  }

  .legend {
    flex-direction: column;
    gap: 0.5rem;
  }

  .hero-disclaimer {
    font-size: 0.88rem;
  }
}


/* v9.1 graph clarity fix */
.chart-card {
  overflow: hidden;
}

.chart-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: #fff;
}

.chart-scroll canvas {
  display: block;
  height: auto;
  max-width: 100%;
  border: 0;
}

@media (max-width:719px){
  .chart-card {
    margin-top: 1.25rem;
    padding: 1rem;
  }

  .chart-scroll canvas {
    width: 760px;
    max-width: none;
  }

  .chart-summary {
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .legend {
    font-size: .95rem;
  }

  .assumptions-card,
  .chart-card {
    margin-left: .75rem;
    margin-right: .75rem;
    width: auto;
  }
}

@media (min-width:720px){
  .chart-scroll canvas {
    width: 100%;
    max-width: 100%;
  }
}

/* v9.2 number formatting and result wrapping */
.currency-input input{
  font-variant-numeric: tabular-nums;
}

.result-list div{
  align-items:flex-start;
}

.result-list dd{
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  text-align:right;
  flex-shrink:0;
  max-width: 48%;
}

.result-list dt{
  padding-right:.75rem;
}

@media (max-width:719px){
  .result-list dd{
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:left;
  }
}


/* v9.3 final input typography polish */
.currency-input input {
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 850;
  color: var(--text);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* v9.4 clean graph value key */
.graph-value-key{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin-top:.85rem;
}
.graph-key-item{
  display:flex;
  align-items:center;
  gap:.65rem;
  border:1px solid var(--border);
  border-radius:1rem;
  background:#f9fafb;
  padding:.75rem .85rem;
}
.graph-key-item .key-dot{
  width:.85rem;
  height:.85rem;
  border-radius:999px;
  flex:0 0 auto;
}
.graph-key-item.target .key-dot{background:#0f766e}
.graph-key-item.projection .key-dot{background:#0b4f4a}
.graph-key-item strong{
  display:block;
  font-size:.9rem;
  color:var(--text);
}
.graph-key-item small{
  display:block;
  color:var(--muted);
  font-weight:850;
  font-size:1rem;
  margin-top:.1rem;
}
@media (max-width:719px){
  .graph-value-key{
    grid-template-columns:1fr;
  }
}

/* v9.6 graph legend and colour hierarchy */
.chart-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:1rem;
  align-items:start;
}

.graph-value-key{
  grid-template-columns:1fr;
  margin-top:0;
}

.graph-key-item{
  min-height:76px;
}

.graph-key-item.target .key-dot{
  background:#cbd5e1;
  border:1px solid #94a3b8;
}

.graph-key-item.projection .key-dot{
  background:#10b981;
}

.graph-key-item small{
  font-size:1.08rem;
  font-weight:900;
  color:var(--text);
}

.legend i{
  background:#10b981 !important;
}

.legend .dash{
  background:repeating-linear-gradient(90deg,#cbd5e1 0,#cbd5e1 8px,transparent 8px,transparent 14px) !important;
}

@media (max-width:900px){
  .chart-layout{
    grid-template-columns:1fr;
  }

  .graph-value-key{
    margin-top:.85rem;
  }
}

@media (max-width:719px){
  .graph-value-key{
    grid-template-columns:1fr;
  }
}


/* v9.8 fixed chart layout */
.chart-layout,
.chart-layout-fixed{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 230px !important;
  gap:1rem !important;
  align-items:start !important;
}

.chart-main{
  min-width:0;
}

.chart-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:1rem;
  background:#fff;
}

.chart-scroll canvas{
  display:block;
  height:auto;
  max-width:100%;
  border:0;
}

.graph-value-key{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:.75rem !important;
  margin-top:0 !important;
}

.graph-key-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-height:76px;
  border:1px solid var(--border);
  border-radius:1rem;
  background:#f9fafb;
  padding:.85rem;
}

.graph-key-item.target .key-dot{
  background:#cbd5e1 !important;
  border:1px solid #94a3b8;
}

.graph-key-item.projection .key-dot{
  background:#10b981 !important;
}

.graph-key-item .key-dot{
  width:.85rem;
  height:.85rem;
  border-radius:999px;
  flex:0 0 auto;
}

.graph-key-item strong{
  display:block;
  color:var(--text);
  font-weight:850;
}

.graph-key-item small{
  display:block;
  color:var(--text);
  font-size:1.08rem;
  font-weight:900;
  margin-top:.15rem;
}

.chart-line-legend{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  margin-top:.85rem;
  border:1px solid var(--border);
  border-radius:1rem;
  overflow:hidden;
  background:#fff;
}

.chart-line-legend span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.75rem .7rem;
  font-weight:850;
  color:var(--text);
  border-right:1px solid var(--border);
  min-height:54px;
  text-align:center;
}

.chart-line-legend span:last-child{
  border-right:0;
}

.chart-line-legend i{
  display:inline-block;
  flex:0 0 auto;
}

.chart-line-legend .solid{
  width:2rem;
  height:.2rem;
  background:#10b981 !important;
}

.chart-line-legend .dash{
  width:2rem;
  height:.2rem;
  background:repeating-linear-gradient(90deg,#cbd5e1 0,#cbd5e1 8px,transparent 8px,transparent 14px) !important;
}

.chart-line-legend .marker{
  width:.2rem;
  height:1.25rem;
  background:#111827 !important;
  box-shadow:.7rem 0 0 #8b5cf6;
  margin-right:.75rem;
}

@media (max-width:900px){
  .chart-layout,
  .chart-layout-fixed{
    grid-template-columns:1fr !important;
  }

  .graph-value-key{
    grid-template-columns:1fr 1fr !important;
    margin-top:.85rem !important;
  }
}

@media (max-width:719px){
  .chart-scroll canvas{
    width:760px;
    max-width:none;
  }

  .chart-line-legend{
    grid-template-columns:1fr !important;
  }

  .chart-line-legend span{
    justify-content:flex-start;
    text-align:left;
    border-right:0;
    border-bottom:1px solid var(--border);
  }

  .chart-line-legend span:last-child{
    border-bottom:0;
  }

  .graph-value-key{
    grid-template-columns:1fr !important;
  }
}