/* State Pension Deferral Calculator (UK): navy / teal / slate, matched to Meeting Tax */

.spd-app,
.spd-app *,
.spd-modal,
.spd-modal * { box-sizing: border-box; }

.spd-loading { margin: 12px 0; color: #4a6570; font-weight: 650; }

/* Two classes so the theme's constrained-layout width rule cannot shrink the calculator. */
#spd-root.spd-app,
.spd-root.spd-app {
  --spd-ink: #083141;
  --spd-muted: #4a6570;
  --spd-line: #d5e0e4;
  --spd-soft: #f4f7f8;
  --spd-teal: #0f766e;
  --spd-teal-deep: #0b5f59;
  --spd-sky: #3aa0c0;
  --spd-text-sm: 0.95rem;
  --spd-text-xs: 0.88rem;
  width: 100%;
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 0 12px 8px;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--spd-ink);
  font-size: 1.05rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.spd-app h2,
.spd-app h3,
.spd-app p { font-family: inherit; }

.spd-shell {
  width: 100%;
  margin: 0 auto 28px;
  padding: 22px 20px 28px;
  border: 1px solid var(--spd-line);
  border-radius: 28px;
  background:
    radial-gradient(1100px 480px at 8% -12%, rgba(15, 118, 110, 0.16), transparent 58%),
    radial-gradient(900px 420px at 100% 0%, rgba(140, 198, 223, 0.28), transparent 52%),
    radial-gradient(700px 320px at 70% 100%, rgba(15, 118, 110, 0.06), transparent 55%),
    #fff;
  box-shadow: 0 24px 60px rgba(8, 49, 65, 0.1);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Header */
.spd-head {
  position: relative;
  overflow: hidden;
  padding: 30px 26px 26px;
  border-radius: 24px;
  background: linear-gradient(145deg, #052933 0%, #083141 38%, #0b5f59 72%, #14a39a 100%);
  color: #fff;
}
.spd-head::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -60px;
  top: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 198, 223, 0.45), transparent 68%);
  pointer-events: none;
}
.spd-head::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  left: 18%;
  bottom: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 70%);
  pointer-events: none;
}
.spd-kicker,
.spd-title,
.spd-lead,
.spd-chips { position: relative; z-index: 1; }
.spd-kicker {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fe8df;
}
.spd-app .spd-title {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}
.spd-lead {
  margin: 0 0 10px;
  max-width: 54rem;
  color: #e7f3f1;
  font-size: 1.05rem;
  line-height: 1.55;
}
.spd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.spd-chip {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.82rem;
  font-weight: 700;
}

/* Plain-English note */
.spd-premise {
  padding: 20px 22px;
  border-radius: 20px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  background:
    radial-gradient(500px 180px at 0% 0%, rgba(15, 118, 110, 0.1), transparent 60%),
    linear-gradient(145deg, #f4fbf9 0%, #ffffff 70%);
  box-shadow: 0 10px 28px rgba(8, 49, 65, 0.05);
}
.spd-premise__eyebrow {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spd-teal);
}
.spd-premise p { margin: 0; color: #355564; line-height: 1.55; }

/* Inputs */
.spd-panel {
  position: relative;
  overflow: hidden;
  padding: 24px 22px;
  border: 1px solid rgba(8, 49, 65, 0.1);
  border-radius: 24px;
  background: linear-gradient(165deg, #ffffff 0%, #f7fbfb 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 36px rgba(8, 49, 65, 0.07);
}
.spd-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0f766e 0%, #083141 100%);
  opacity: 0.85;
}
.spd-app .spd-panel__title {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 2.4vw, 1.45rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--spd-ink);
}
.spd-panel__lead { margin: 0 0 18px; color: var(--spd-muted); font-size: var(--spd-text-sm); }
.spd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.spd-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.spd-field label { font-size: var(--spd-text-sm); font-weight: 700; color: var(--spd-ink); }
.spd-app .spd-field input {
  width: 100%;
  max-width: none;
  padding: 11px 12px;
  border: 1px solid var(--spd-line);
  border-radius: 12px;
  background: var(--spd-soft);
  font: inherit;
  font-weight: 600;
  color: var(--spd-ink);
}
.spd-app .spd-field input:focus {
  outline: 2px solid rgba(15, 118, 110, 0.35);
  border-color: var(--spd-teal);
  background: #fff;
}
.spd-field small { font-size: var(--spd-text-xs); color: var(--spd-muted); line-height: 1.4; }

/* Results */
.spd-results { display: flex; flex-direction: column; gap: 18px; }

.spd-hero {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 22px;
  border-radius: 24px;
  color: #fff;
  box-shadow: 0 18px 40px rgba(8, 49, 65, 0.18);
  background: linear-gradient(135deg, #083141 0%, #0b5f7a 50%, #3aa0c0 100%);
}
.spd-hero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -40px;
  top: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
  pointer-events: none;
}
.spd-hero > * { position: relative; z-index: 1; }
.spd-hero--now { background: linear-gradient(135deg, #04352f 0%, #0f766e 48%, #1fb5a8 100%); }
.spd-hero__badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.spd-hero__figure {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
}
.spd-hero__line { margin: 0; color: rgba(255, 255, 255, 0.92); font-size: 1.02rem; }
.spd-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.spd-kpis--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.spd-kpi__v {
  white-space: nowrap;
}
.spd-kpi {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.spd-kpi__v {
  display: block;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.spd-kpi__l { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.82); font-size: var(--spd-text-xs); }
.spd-hero .spd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spd-bet { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.spd-bet__title { margin: 0 0 8px; color: rgba(255, 255, 255, 0.86); font-size: var(--spd-text-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.spd-bet__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.spd-bet__cell { padding: 10px 14px; border-radius: 14px; background: rgba(4, 20, 28, 0.28); border-left: 4px solid rgba(255, 255, 255, 0.4); }
.spd-bet__cell.is-neg { border-left-color: #f2a48c; }
.spd-bet__cell.is-pos { border-left-color: #8fe3d5; }
.spd-bet__age { display: block; color: rgba(255, 255, 255, 0.8); font-size: var(--spd-text-xs); font-weight: 700; }
.spd-bet__v { display: block; margin-top: 2px; font-size: 1.15rem; font-weight: 900; white-space: nowrap; }
.spd-bet__cell.is-neg .spd-bet__v { color: #ffd4c6; }
.spd-bet__cell.is-pos .spd-bet__v { color: #c9f5ec; }

.spd-visual,
.spd-rank-wrap,
.spd-outside {
  padding: 22px 20px;
  border: 1px solid rgba(8, 49, 65, 0.1);
  border-radius: 22px;
  background: linear-gradient(165deg, #ffffff 0%, #f7fbfb 100%);
  box-shadow: 0 10px 26px rgba(8, 49, 65, 0.05);
}
.spd-visual {
  background:
    radial-gradient(520px 200px at 100% 0%, rgba(140, 198, 223, 0.18), transparent 55%),
    linear-gradient(165deg, #ffffff 0%, #f3f8fa 100%);
}
.spd-rank-wrap {
  background: linear-gradient(165deg, #eefaf7 0%, #fff 42%);
  border-color: rgba(15, 118, 110, 0.22);
  box-shadow: 0 12px 28px rgba(8, 49, 65, 0.06);
}
.spd-section-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e6f6f3, #e9f1ef);
  color: var(--spd-teal-deep);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.spd-app .spd-section-title {
  margin: 0 0 10px;
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--spd-ink);
}
.spd-section-help,
.spd-visual__note,
.spd-detail,
.spd-outside p {
  margin: 0;
  color: var(--spd-muted);
  font-size: var(--spd-text-sm);
}

.spd-app .spd-section-lead {
  margin: 0 0 14px;
  max-width: 62ch;
  color: var(--spd-ink);
  font-size: var(--spd-text-sm);
  line-height: 1.55;
}
.spd-priority {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
}
.spd-priority__label { font-size: var(--spd-text-sm); font-weight: 800; margin-right: 4px; }
.spd-app .spd-pill {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(8, 49, 65, 0.14);
  background: #fff;
  color: var(--spd-ink);
  font: inherit;
  font-size: var(--spd-text-sm);
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
}
.spd-app .spd-pill.is-on {
  background: linear-gradient(145deg, #0b5f59 0%, #0f766e 55%, #129287 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.28);
}

.spd-ranks { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.spd-app .spd-rank {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(8, 49, 65, 0.12);
  background: #fff;
  color: var(--spd-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(8, 49, 65, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.spd-app .spd-rank:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, 0.45);
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.12);
}
.spd-app .spd-rank.is-on {
  border-color: rgba(15, 118, 110, 0.55);
  border-left: 4px solid var(--spd-teal);
  background: linear-gradient(145deg, #ffffff 0%, #eef8f6 100%);
}
.spd-rank__pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 32px;
  border-radius: 10px;
  background: #eef3f5;
  color: var(--spd-ink);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}
.spd-rank.is-on .spd-rank__pos { background: linear-gradient(145deg, #083141, #0f766e); color: #fff; }
.spd-rank__title { display: block; font-size: 1.02rem; font-weight: 800; }
.spd-rank__meta { display: block; margin-top: 2px; color: var(--spd-muted); font-size: var(--spd-text-xs); }
.spd-rank__back {
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--spd-teal-deep);
  white-space: nowrap;
  text-align: right;
}
.spd-rank__back small {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--spd-muted);
}
.spd-detail {
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef3f5;
}

.spd-outside { border-style: dashed; background: #fff; box-shadow: none; }
.spd-app .spd-outside h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 900; color: var(--spd-ink); }

.spd-export {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 22px;
  background: linear-gradient(135deg, #eefaf7 0%, #f4f7f8 45%, #fff 100%);
  box-shadow: 0 10px 24px rgba(8, 49, 65, 0.05);
}
.spd-export > div { flex: 1 1 260px; }
.spd-export__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  background: linear-gradient(145deg, #083141, #0f766e);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}
.spd-app .spd-export__title { margin: 0 0 4px; font-size: 1.15rem; font-weight: 900; color: var(--spd-ink); }
.spd-export p { margin: 0; color: var(--spd-muted); font-size: var(--spd-text-sm); }
.spd-app .spd-export__btn {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 12px 20px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #14a39a 0%, #0f766e 55%, #0b5f59 100%);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.25);
}
.spd-app .spd-export__btn:hover { background: linear-gradient(135deg, #1fb5a8 0%, #0f766e 60%, #083141 100%); }

.spd-note { margin: 0; color: var(--spd-muted); font-size: var(--spd-text-xs); }

/* Fallback email modal */
.spd-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 49, 65, 0.45);
}
.spd-modal__card {
  width: min(440px, 100%);
  padding: 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(8, 49, 65, 0.25);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #083141;
}
.spd-modal__card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.spd-modal__card p { margin: 0 0 12px; color: #4a6570; font-size: 0.95rem; }
.spd-modal__card label { display: block; margin: 8px 0 6px; font-size: 0.95rem; font-weight: 700; }
.spd-modal__card input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d5e0e4;
  border-radius: 12px;
  font: inherit;
}
.spd-modal__err { min-height: 1.2em; color: #b42318; font-weight: 700; }
.spd-modal__actions { display: flex; justify-content: flex-end; gap: 10px; }
.spd-modal__actions button {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.spd-modal__cancel { border: 1px solid #d5e0e4; background: #fff; color: #083141; }
.spd-modal .spd-export__btn { border: none; background: #0f766e; color: #fff; }

/* Selects and assumptions */
.spd-app .spd-field select {
  width: 100%;
  max-width: none;
  padding: 11px 12px;
  border: 1px solid var(--spd-line);
  border-radius: 12px;
  background: var(--spd-soft);
  font: inherit;
  font-weight: 600;
  color: var(--spd-ink);
}
.spd-app .spd-field select:focus {
  outline: 2px solid rgba(15, 118, 110, 0.35);
  border-color: var(--spd-teal);
  background: #fff;
}
.spd-field.is-muted { opacity: 0.55; }
.spd-assume {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed rgba(8, 49, 65, 0.18);
  border-radius: 16px;
  background: #fff;
}
.spd-assume summary {
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  font-size: var(--spd-text-sm);
  font-weight: 800;
  color: var(--spd-teal-deep);
}
.spd-assume[open] summary { margin-bottom: 14px; }

.spd-hero__figure { max-width: 34ch; text-wrap: balance; }
.spd-rank__back.is-neg { color: #8a4b3a; }
.spd-rank__main { min-width: 0; }

/* Chart */
.spd-chart { margin-top: 6px; }
.spd-chart__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.spd-chart__pick-label { font-size: var(--spd-text-sm); font-weight: 800; color: var(--spd-ink); margin-right: 4px; }
.spd-chart__chip {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--spd-line);
  border-radius: 999px;
  background: #fff;
  color: var(--spd-ink);
  font: inherit;
  font-size: var(--spd-text-sm);
  font-weight: 700;
  cursor: pointer;
}
.spd-chart__chip:hover { border-color: var(--spd-teal); }
.spd-chart__chip.is-on { background: var(--spd-ink); border-color: var(--spd-ink); color: #fff; }
.spd-chart__plot {
  position: relative;
  padding: 10px 6px 4px;
  border: 1px solid var(--spd-line);
  border-radius: 16px;
  background: #fff;
  outline: none;
}
.spd-chart__plot:focus-visible { box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.25); }
.spd-chart__plot svg { display: block; width: 100%; height: auto; }
.spd-chart__grid { stroke: #edf2f4; stroke-width: 1; }
.spd-chart__tick { fill: var(--spd-muted); font-size: 13px; font-weight: 600; }
.spd-chart__tick--zero { fill: var(--spd-ink); font-weight: 800; }
.spd-chart__zero { stroke: var(--spd-ink); stroke-width: 1.5; }
.spd-chart__plan { stroke: #9bb0b8; stroke-width: 1.5; stroke-dasharray: 4 5; }
.spd-chart__area--up { fill: rgba(15, 118, 110, 0.16); }
.spd-chart__area--down { fill: rgba(138, 75, 58, 0.12); }
.spd-chart__line { fill: none; stroke: var(--spd-teal); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.spd-chart__mark { fill: #8a4b3a; stroke: #fff; stroke-width: 2; }
.spd-chart__dot { fill: #fff; stroke: var(--spd-ink); stroke-width: 3; }
.spd-chart__note { fill: #8a4b3a; font-size: 13px; font-weight: 800; }
.spd-chart__note--be { fill: var(--spd-ink); }
.is-narrow .spd-chart__tick,
.is-narrow .spd-chart__note { font-size: 14px; }
.spd-chart__cross { stroke: var(--spd-ink); stroke-width: 1; stroke-opacity: 0.45; pointer-events: none; }
.spd-chart__hover { fill: var(--spd-teal); stroke: #fff; stroke-width: 2.5; pointer-events: none; }
.spd-chart__hit { fill: transparent; cursor: crosshair; touch-action: pan-y; }
.spd-tip {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 2;
  width: 196px;
  padding: 10px 12px;
  border: 1px solid var(--spd-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 22px rgba(8, 49, 65, 0.12);
  transform: translateX(14px);
  pointer-events: none;
}
.spd-tip.is-left { transform: translateX(calc(-100% - 14px)); }
.spd-tip.is-low { top: auto; bottom: 44px; }
.spd-tip p { margin: 0; }
.spd-tip__age { color: var(--spd-muted); font-size: var(--spd-text-xs); font-weight: 700; }
.spd-tip__gap { margin-top: 2px !important; color: var(--spd-ink); font-size: 1.2rem; font-weight: 900; white-space: nowrap; }
.spd-tip__gap.is-pos { color: var(--spd-teal-deep); }
.spd-tip__gap.is-neg { color: #8a4b3a; }
.spd-tip dl { display: grid; gap: 4px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #e8eef0; }
.spd-tip dl div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--spd-text-xs); }
.spd-tip dt { color: var(--spd-muted); }
.spd-tip dd { margin: 0; color: var(--spd-ink); font-weight: 800; white-space: nowrap; }
.spd-chart__key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: var(--spd-text-xs); font-weight: 700; color: var(--spd-ink); }
.spd-key { display: inline-flex; align-items: center; gap: 8px; }
.spd-key::before { content: ""; width: 14px; height: 14px; border-radius: 4px; }
.spd-key--up::before { background: rgba(15, 118, 110, 0.3); border: 1px solid var(--spd-teal); }
.spd-key--down::before { background: rgba(138, 75, 58, 0.22); border: 1px solid #8a4b3a; }
.spd-key--plan::before { width: 0; height: 16px; border-radius: 0; border-left: 2px dashed #9bb0b8; }
.spd-key--hint { color: var(--spd-muted); font-weight: 600; }
.spd-key--hint::before { display: none; }
@media (max-width: 640px) {
  .spd-chart__plot { display: flex; flex-direction: column; }
  .spd-tip {
    position: static;
    order: -1;
    width: auto;
    margin: 0 4px 8px;
    transform: none !important;
    box-shadow: none;
    background: var(--spd-soft);
  }
  .spd-chart__pick-label { width: 100%; }
}

/* Insights, table, outside */
.spd-insights,
.spd-table-wrap {
  padding: 22px 20px;
  border: 1px solid rgba(8, 49, 65, 0.1);
  border-radius: 22px;
  background: linear-gradient(165deg, #ffffff 0%, #f7fbfb 100%);
  box-shadow: 0 10px 26px rgba(8, 49, 65, 0.05);
}
.spd-insights__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.spd-insights__list li {
  padding: 12px 14px;
  border-left: 4px solid var(--spd-teal);
  border-radius: 10px;
  background: #eef6f5;
  color: var(--spd-ink);
  font-size: var(--spd-text-sm);
  line-height: 1.5;
}
.spd-table-scroll { overflow-x: auto; margin: 4px 0 10px; border: 1px solid var(--spd-line); border-radius: 14px; }
.spd-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--spd-text-xs); }
.spd-table th,
.spd-table td { padding: 9px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid #e8eef0; }
.spd-table th:first-child,
.spd-table td:first-child { text-align: left; }
.spd-table th { background: #f4f7f8; color: var(--spd-ink); font-weight: 800; white-space: normal; vertical-align: bottom; }
.spd-table td { color: var(--spd-ink); font-weight: 600; }
.spd-table tr.is-ahead td { background: #f0f8f6; }
.spd-table td.is-neg { color: #8a4b3a; }
.spd-outside ul { margin: 0; padding-left: 20px; color: var(--spd-muted); font-size: var(--spd-text-sm); }
.spd-outside li + li { margin-top: 6px; }

.spd-modal__snap { margin: 0 0 12px; padding: 12px 14px; list-style: none; border-radius: 12px; background: #f4f7f8; }
.spd-modal__snap li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; }
.spd-modal__snap li + li { margin-top: 6px; }
.spd-modal__snap strong { white-space: nowrap; }

/* Inputs: deferral period, uplift note, more detail */
.spd-grid--main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
.spd-period__label { font-size: var(--spd-text-sm); font-weight: 700; color: var(--spd-ink); }
.spd-period__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.spd-period__customrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 6px; }
.spd-period__customrow[hidden] { display: none; }
.spd-period__custom { max-width: 220px; }
.spd-period__unit { width: 130px; }
.spd-period__weeks { font-size: var(--spd-text-xs); color: var(--spd-muted); }
.spd-app .spd-threshold {
  margin: 4px 0 0;
  padding: 8px 12px;
  border-left: 4px solid #d99a36;
  border-radius: 8px;
  background: #fffaf0;
  color: #5a4520;
  font-size: var(--spd-text-sm);
  line-height: 1.45;
}
.spd-app .spd-threshold[hidden] { display: none; }
.spd-hero__basis { margin: -4px 0 0; color: rgba(255, 255, 255, 0.86); font-size: var(--spd-text-xs); font-weight: 700; }
.spd-app .spd-basis {
  margin: 0 0 14px;
  padding: 10px 14px 10px 30px;
  border-left: 4px solid var(--spd-teal);
  border-radius: 10px;
  background: #eef6f5;
  color: var(--spd-ink);
  font-size: var(--spd-text-sm);
  line-height: 1.5;
}
.spd-app .spd-basis li + li { margin-top: 2px; }
.spd-uplift {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--spd-teal);
  border-radius: 10px;
  background: #eef6f5;
  color: var(--spd-ink);
  font-size: var(--spd-text-sm);
  line-height: 1.5;
}
.spd-more__group + .spd-more__group { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e8eef0; }
.spd-app .spd-more__group h4 {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--spd-teal-deep);
}
.spd-more__text { margin: 0 0 10px; color: var(--spd-muted); font-size: var(--spd-text-sm); }
.spd-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--spd-text-sm);
  font-weight: 800;
  color: var(--spd-ink);
  cursor: pointer;
}
.spd-check input { width: 20px; height: 20px; accent-color: var(--spd-teal); }
.spd-app .spd-linkbtn {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(15, 118, 110, 0.45);
  border-radius: 12px;
  background: #fff;
  color: var(--spd-teal-deep);
  font: inherit;
  font-size: var(--spd-text-sm);
  font-weight: 800;
  cursor: pointer;
}
.spd-app .spd-linkbtn:hover { background: #eef6f5; }
.spd-field[hidden], .spd-grid[hidden] { display: none; }

/* Benefits warning */
.spd-warn {
  padding: 16px 18px;
  border: 1px solid #f1dfb8;
  border-left: 5px solid #d99a36;
  border-radius: 16px;
  background: #fffaf0;
  color: #5a4520;
}
.spd-warn p { margin: 0; font-size: var(--spd-text-sm); line-height: 1.55; }
.spd-warn p + p { margin-top: 4px; }
.spd-app .spd-warn .spd-warn__title { font-size: 1rem; font-weight: 800; color: #4a3712; }
.spd-warn a { color: #7a4f0d; font-weight: 800; }

/* Result cards */
.spd-hero .spd-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6px; }
.spd-kpi { display: flex; flex-direction: column; }
.spd-kpi__k {
  display: block;
  margin-bottom: 6px;
  color: #c9f5ec;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.spd-kpi__pre, .spd-kpi__unit { font-size: 0.55em; font-weight: 700; letter-spacing: 0; }
.spd-kpi__unit { margin-left: 4px; }
.spd-kpi__pre { margin-right: 4px; }
.spd-hero .spd-hero__line { margin-top: 14px; font-size: var(--spd-text-sm); }
.spd-hero .spd-hero__line + .spd-hero__line { margin-top: 6px; }

/* Chart lines */
.spd-chart__line--now { stroke: #6b8590; stroke-width: 3; }
.spd-chart__hover--now { fill: #6b8590; }
.spd-key--now::before, .spd-key--wait::before { height: 4px; border-radius: 2px; }
.spd-key--now::before { background: #6b8590; }
.spd-key--wait::before { background: var(--spd-teal); }

/* Ways to take it */
.spd-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.spd-way {
  padding: 16px 18px;
  border: 1px solid var(--spd-line);
  border-left: 4px solid var(--spd-teal);
  border-radius: 16px;
  background: #fff;
}
.spd-app .spd-way h4 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 900; color: var(--spd-ink); }
.spd-way p { margin: 0 0 10px; color: var(--spd-muted); font-size: var(--spd-text-sm); }
.spd-way dl { display: grid; gap: 6px; margin: 0; }
.spd-way dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--spd-text-sm); }
.spd-way dt { color: var(--spd-muted); }
.spd-way dd { margin: 0; font-weight: 900; color: var(--spd-ink); white-space: nowrap; }
.spd-way dd.is-neg { color: #8a4b3a; }

/* Funding prompt and tax callout */
.spd-fund,
.spd-callout {
  padding: 22px 20px;
  border: 1px solid rgba(8, 49, 65, 0.1);
  border-radius: 22px;
  background: linear-gradient(165deg, #ffffff 0%, #f7fbfb 100%);
  box-shadow: 0 10px 26px rgba(8, 49, 65, 0.05);
}
.spd-fund__picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.spd-app .spd-pill--sm { font-weight: 700; }
.spd-fund .spd-detail { margin-bottom: 10px; }
.spd-callout { border-left: 5px solid var(--spd-ink); }
.spd-app .spd-callout h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 900; color: var(--spd-ink); }
.spd-callout p { margin: 0 0 10px; color: var(--spd-ink); font-size: var(--spd-text-sm); line-height: 1.55; }

/* Ranking extras */
.spd-rank__tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6f6f3;
  color: var(--spd-teal-deep);
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
}
.spd-app .spd-rank.is-static { cursor: default; }
.spd-app .spd-rank.is-static:hover { transform: none; border-color: rgba(8, 49, 65, 0.12); box-shadow: 0 6px 16px rgba(8, 49, 65, 0.05); }

@media (max-width: 860px) {
  .spd-kpis, .spd-kpis--4, .spd-hero .spd-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spd-grid--main { grid-template-columns: 1fr; }
  .spd-ways { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .spd-kpis, .spd-kpis--4, .spd-hero .spd-kpis { grid-template-columns: 1fr; }
  .spd-bet__row { grid-template-columns: 1fr; gap: 6px; }
  .spd-bet__cell { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .spd-bet__v { margin-top: 0; }
}
@media (max-width: 700px) {
  .spd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #spd-root.spd-app, .spd-root.spd-app { padding: 0 0 8px; margin-top: 16px; }
  .spd-shell { padding: 14px 12px 20px; border-radius: 22px; gap: 16px; }
  .spd-head { padding: 22px 16px 18px; border-radius: 18px; }
  .spd-panel { padding: 18px 14px; border-radius: 18px; }
  .spd-visual, .spd-rank-wrap, .spd-outside, .spd-insights, .spd-table-wrap, .spd-fund, .spd-callout { padding: 18px 14px; }
  .spd-way dl div { flex-direction: column; gap: 0; }
  .spd-app .spd-rank { grid-template-columns: 48px 1fr; }
  .spd-rank__back { grid-column: 2; text-align: left; font-size: 1.4rem; }
  .spd-export { flex-direction: column; align-items: stretch; }
  .spd-app .spd-export__btn { width: 100%; }
}