/* Generated product CSS bundle. Edit source layers, not this file. */

/* ---- app.css ---- */
:root {
  color-scheme: dark;
  --page: #f7f8fa;
  --bg: #0f1f35;
  --surface: rgba(30, 41, 59, .42);
  --surface-strong: rgba(7, 17, 31, .72);
  --border: rgba(148, 163, 184, .16);
  --text: #f8fafc;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --peace: #34d399;
  --danger: #f87171;
  --danger-direct: #ef4444;
  --gold: #fbbf24;
  --radius: 20px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  padding: 42px 20px 72px;
  background: var(--page);
  color: var(--text);
}
button, input, select { font: inherit; }
button { color: inherit; }

.pw-shell {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 48px) clamp(22px, 4vw, 38px) 42px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 32px;
  background: var(--bg);
  box-shadow: 0 28px 64px rgba(15, 31, 53, .23);
  overflow: visible;
}

.pw-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
  padding: 10px 12px;
  border: 1px solid rgba(251,191,36,.32);
  border-radius: 13px;
  background: rgba(251,191,36,.07);
  color: #fde68a;
  font-size: 11px;
}
.pw-preview-banner > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pw-preview-banner strong {
  font-family: Montserrat, Inter, sans-serif;
  white-space: nowrap;
}
.pw-preview-banner > div > span { color: #c9bd92; }
.pw-preview-language {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  flex: 0 0 auto;
}
.pw-preview-language > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pw-preview-language select {
  min-height: 34px;
  max-width: 150px;
  padding: 6px 30px 6px 10px;
  font-size: 12px;
}

.pw-hero { max-width: 910px; }
.pw-eyebrow {
  margin-bottom: 8px;
  color: #9db8d8;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}
h1, h2 {
  font-family: Montserrat, Inter, sans-serif;
  letter-spacing: -.02em;
}
h1 {
  margin: 0;
  font-size: clamp(42px, 6vw, 64px);
  line-height: 1.03;
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;
}
.pw-live-fact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  color: var(--danger-direct);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 700;
  line-height: 1.35;
}
.pw-live-fact strong {
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.pw-live-dot {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--danger-direct);
  box-shadow: 0 0 11px rgba(239,68,68,.65);
}
.pw-live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(239,68,68,.55);
  border-radius: 50%;
  animation: pw-pulse 1.5s ease-out infinite;
}
@keyframes pw-pulse {
  0% { transform: scale(.55); opacity: 1; }
  100% { transform: scale(1.55); opacity: 0; }
}
.pw-lead {
  max-width: 880px;
  margin: 22px 0 0;
  color: #9db8d8;
  font-size: 17px;
  line-height: 1.65;
}

.pw-time-controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 26px;
}
.pw-time-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pw-time-control > span {
  color: #9db8d8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
select, input[type="number"] {
  min-height: 42px;
  padding: 10px 38px 10px 14px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 11px;
  outline: none;
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 650;
}
select option { background: #0f1f35; color: var(--text); }
input[type="number"] { width: 105px; padding-inline: 12px; color: var(--peace); }
select:focus, input:focus, button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56,189,248,.14);
}
[hidden] { display: none !important; }

.pw-glow { position: relative; isolation: isolate; }
.pw-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,.05), transparent 42%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.pw-glow:hover::before { opacity: 1; }

.pw-hero-counter {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr);
  gap: 30px;
  align-items: stretch;
  margin-top: 8px;
  padding: 34px;
  border: 1px solid rgba(184,255,207,.11);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(184,255,207,.045), rgba(255,255,255,.018));
}
.pw-counter-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}
.pw-counter-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  color: var(--danger-direct);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pw-counter-value {
  color: #fff;
  font-family: Montserrat, Inter, sans-serif;
  font-size: clamp(42px, 6.5vw, 70px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pw-counter-caption {
  margin-top: 14px;
  color: #9db8d8;
  font-size: 15px;
  line-height: 1.5;
}

.pw-session-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 25px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(4, 12, 24, .64);
  box-shadow: inset 0 2px 15px rgba(0,0,0,.28);
}
.pw-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #9db8d8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.pw-session-head time {
  color: var(--danger);
  font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0;
}
.pw-session-value {
  margin-top: 13px;
  color: #fff;
  font-family: Montserrat, Inter, sans-serif;
  font-size: clamp(30px, 4vw, 43px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pw-session-divider { height: 1px; margin: 18px 0 13px; background: rgba(255,255,255,.1); }
.pw-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}
.pw-session-row strong { color: var(--peace); font-variant-numeric: tabular-nums; text-align: end; }

.pw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pw-grid-headline { margin-top: 18px; }
.pw-card {
  position: relative;
  min-height: 138px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(30,41,59,.38);
}
.pw-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -32px;
  bottom: -42px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: rgba(56,189,248,.05);
}
.pw-card[data-kind="danger"]::after { background: rgba(248,113,113,.06); }
.pw-card[data-kind="peace"]::after { background: rgba(52,211,153,.06); }
.pw-card[data-kind="gold"]::after { background: rgba(251,191,36,.06); }
.pw-card-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pw-card-label {
  display: block;
  min-height: 32px;
  color: #9db8d8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.pw-card-value {
  margin-top: 12px;
  font-family: Montserrat, Inter, sans-serif;
  font-size: clamp(25px, 3.2vw, 35px);
  line-height: 1.06;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pw-card[data-kind="danger"] .pw-card-value { color: var(--danger); }
.pw-card[data-kind="peace"] .pw-card-value { color: var(--peace); }
.pw-card[data-kind="gold"] .pw-card-value { color: var(--gold); }

.pw-info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  cursor: pointer;
  font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.pw-info-button:hover, .pw-info-button[aria-expanded="true"] { background: rgba(255,255,255,.13); color: #fff; }
.pw-card-popover {
  position: absolute;
  z-index: 30;
  top: 30px;
  right: 0;
  width: min(300px, calc(100vw - 60px));
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: #1b2b40;
  box-shadow: 0 18px 40px rgba(0,0,0,.44);
  color: #f8fafc;
  text-transform: none;
}
.pw-card-popover strong { display: block; margin-bottom: 8px; font-size: 12px; }
.pw-card-popover code { color: #b8ffcf; font-size: 11px; line-height: 1.55; white-space: normal; }

.pw-section { margin-top: 38px; }
.pw-section-head { margin-bottom: 15px; }
h2 { margin: 0; font-size: clamp(28px, 3.5vw, 36px); line-height: 1.15; }

.pw-scenario-panel {
  margin-bottom: 18px;
  padding: 24px;
  border: 1px solid rgba(52,211,153,.14);
  border-radius: 20px;
  background: rgba(7,17,31,.32);
}
.pw-scenario-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.pw-scenario-head span {
  color: #dce7f4;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pw-scenario-head strong {
  color: var(--peace);
  font-family: Montserrat, Inter, sans-serif;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}
.pw-scenario-range {
  width: 100%;
  height: 9px;
  margin: 6px 0 0;
  accent-color: var(--peace);
  cursor: pointer;
}
.pw-share-track {
  display: block;
  height: 4px;
  margin-top: -8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.pw-share-track i {
  display: block;
  width: 11.11%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--peace));
  transition: width .13s ease;
}
.pw-scenario-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}
.pw-scenario-scale { color: var(--muted); font-size: 12px; }
.pw-scenario-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-scenario-chip {
  min-width: 62px;
  padding: 9px 15px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.pw-scenario-chip:hover { transform: translateY(-1px); background: rgba(255,255,255,.1); color: #fff; }
.pw-scenario-chip.pw-active {
  border-color: var(--peace);
  background: var(--peace);
  color: #04120d;
  box-shadow: 0 5px 16px rgba(52,211,153,.23);
}
.pw-grid-opportunity { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pw-grid-opportunity .pw-card { min-height: 125px; }

.pw-method {
  margin-top: 30px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(7,17,31,.28);
}
.pw-method summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  cursor: pointer;
  color: #dbeafe;
  font: 700 13px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  list-style: none;
}
.pw-method summary::-webkit-details-marker { display: none; }
.pw-method summary::after { content: "+"; margin-inline-start: auto; color: var(--accent); font-size: 20px; line-height: 1; }
.pw-method[open] summary::after { content: "−"; }
.pw-method-sources { color: var(--muted); font-weight: 600; }
.pw-method-body { padding: 0 17px 18px; border-top: 1px solid rgba(255,255,255,.07); }
.pw-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 16px; }
.pw-method-grid > div { padding: 13px; border-radius: 14px; background: rgba(255,255,255,.035); }
.pw-method-grid span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.pw-method-grid strong { display: block; margin-top: 7px; color: var(--text); font-variant-numeric: tabular-nums; }
.pw-method p { margin: 15px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.pw-source-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.pw-source-links a {
  padding: 7px 10px;
  border: 1px solid rgba(56,189,248,.18);
  border-radius: 999px;
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}
.pw-source-links a:hover, .pw-source-links a:focus { border-color: var(--accent); outline: none; }

.pw-compare {
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px dashed rgba(56,189,248,.25);
  border-radius: 15px;
  background: rgba(56,189,248,.035);
}
.pw-compare a { color: var(--accent); font-weight: 800; text-decoration: none; }
.pw-compare a:hover, .pw-compare a:focus { text-decoration: underline; }
.pw-compare p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.pw-debug { margin-top: 17px; color: var(--muted); font-size: 11px; }
.pw-debug summary { cursor: pointer; }
.pw-debug pre { overflow: auto; padding: 12px; border-radius: 12px; background: #081421; color: #b8c7d8; white-space: pre-wrap; }

html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .pw-card,
html[dir="rtl"] .pw-method-body,
html[dir="rtl"] .pw-compare { text-align: right; }
html[dir="rtl"] .pw-card-popover { right: auto; left: 0; }
html[dir="rtl"] .pw-card::after { right: auto; left: -32px; }

@media (max-width: 900px) {
  body { padding-top: 20px; }
  .pw-hero-counter { grid-template-columns: 1fr; }
  .pw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-grid-opportunity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  body { padding: 0; background: var(--bg); }
  .pw-shell { border: 0; border-radius: 0; padding: 18px 14px 32px; box-shadow: none; }
  .pw-preview-banner { align-items: stretch; flex-direction: column; margin-bottom: 26px; }
  .pw-preview-banner > div { align-items: flex-start; flex-direction: column; gap: 3px; }
  .pw-preview-language { width: 100%; }
  .pw-preview-language select { width: 100%; max-width: none; }
  h1 { font-size: clamp(37px, 13vw, 52px); }
  .pw-live-fact { font-size: 16px; }
  .pw-lead { font-size: 15px; }
  .pw-time-controls { align-items: stretch; flex-direction: column; }
  .pw-time-control { align-items: stretch; flex-direction: column; gap: 7px; }
  .pw-time-control select, .pw-time-control input { width: 100%; }
  .pw-hero-counter { padding: 20px 16px; gap: 18px; }
  .pw-counter-value { font-size: clamp(39px, 13vw, 54px); }
  .pw-session-card { padding: 18px; }
  .pw-grid, .pw-grid-opportunity { grid-template-columns: 1fr; }
  .pw-card { min-height: 118px; }
  .pw-scenario-panel { padding: 18px 15px; }
  .pw-scenario-bottom { align-items: stretch; flex-direction: column; }
  .pw-scenario-pills { display: grid; grid-template-columns: repeat(3, 1fr); }
  .pw-scenario-chip { min-width: 0; }
  .pw-method-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ---- parity-tooltips.css ---- */
.pw-parity-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-inline-start: 7px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: var(--muted);
  cursor: pointer;
  font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  vertical-align: middle;
}
.pw-parity-info:hover,
.pw-parity-info:focus-visible,
.pw-parity-info[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); outline: none; }
.pw-parity-info:focus-visible { box-shadow: 0 0 0 3px rgba(56,189,248,.18); }
.pw-parity-label-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pw-parity-label-row > :first-child { min-width: 0; }
.pw-parity-popover {
  position: fixed;
  z-index: 10000;
  width: min(330px, calc(100vw - 24px));
  padding: 15px 17px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: #1e293b;
  color: #f8fafc;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  font-size: 13px;
  line-height: 1.55;
  text-align: start;
}
.pw-parity-popover[hidden] { display: none !important; }
.pw-parity-popover-title { display: block; margin-bottom: 7px; font-weight: 800; }
.pw-parity-inline-popover {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(30,41,59,.78);
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.55;
}
.pw-parity-inline-popover[hidden] { display: none !important; }
.pw-hero-info-row { display: flex; align-items: flex-start; gap: 8px; }
.pw-hero-info-row .pw-lead { flex: 1; }
@media (max-width: 600px) {
  .pw-parity-popover { display: none !important; }
  .pw-hero-info-row { gap: 6px; flex-wrap: wrap; }
  .pw-parity-info { flex: 0 0 22px; }
  .pw-hero-info-row > .pw-parity-inline-popover,
  .pw-counter-value-row > .pw-parity-inline-popover {
    flex: 0 0 100%;
  }
}

/* ---- parity-narrative.css ---- */
.pw-scale-section,
.pw-mission-section,
.pw-philosophy-section { margin-top: 42px; }

.pw-scale-card,
.pw-mission-card,
.pw-philosophy-card {
  padding: 26px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(7,17,31,.30);
}

.pw-scale-heading,
.pw-mission-heading {
  color: var(--peace);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.pw-scale-title,
.pw-mission-title {
  margin: 9px 0 18px;
  color: #f8fafc;
  font-family: Montserrat, Inter, sans-serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  line-height: 1.3;
}

.pw-scale-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.pw-scale-item { padding: 18px; border-radius: 15px; background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.06); }
.pw-scale-label { color: var(--muted); font-size: 13px; font-weight: 650; }
.pw-scale-value { margin-top: 7px; color: var(--accent); font-family: Montserrat, Inter, sans-serif; font-size: clamp(22px,3vw,31px); font-weight: 900; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.pw-mission-card {
  background: linear-gradient(135deg, rgba(52,211,153,.08), rgba(15,31,53,.40));
  border-color: rgba(52,211,153,.18);
}
.pw-mission-copy { max-width: 880px; color: #d4dfec; font-size: 15px; line-height: 1.65; }
.pw-mission-highlight { margin-top: 18px; padding: 18px; border: 1px solid rgba(52,211,153,.18); border-radius: 16px; background: rgba(52,211,153,.05); }
.pw-mission-highlight strong { color: #fff; }
.pw-mission-metric { color: var(--peace); font-weight: 900; font-variant-numeric: tabular-nums; }
.pw-mission-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--peace);
  color: #04120d;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(52,211,153,.18);
}
.pw-mission-cta:hover, .pw-mission-cta:focus-visible { transform: translateY(-1px); outline: none; box-shadow: 0 10px 26px rgba(52,211,153,.26); }

.pw-philosophy-card {
  text-align: center;
  background: linear-gradient(135deg, rgba(52,211,153,.05), rgba(15,31,53,.40));
  border-color: rgba(52,211,153,.18);
}
.pw-philosophy-card h2 { margin-bottom: 20px; }
.pw-philosophy-copy { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: 15px; line-height: 1.65; }
.pw-philosophy-quote { max-width: 760px; margin: 30px auto; padding: 22px; border-inline-start: 3px solid var(--peace); background: rgba(255,255,255,.025); color: #fff; font-family: Montserrat, Inter, sans-serif; font-size: clamp(19px,2.5vw,25px); font-weight: 750; line-height: 1.45; text-align: start; }
.pw-philosophy-source { display: block; margin-top: 14px; color: var(--muted); font: 500 14px/1.4 Inter, sans-serif; }

html.pw-embed-mode .pw-scale-section,
html.pw-embed-mode .pw-mission-section,
html.pw-embed-mode .pw-philosophy-section { display: none !important; }

@media (max-width: 600px) {
  .pw-scale-card, .pw-mission-card, .pw-philosophy-card { padding: 20px 16px; border-radius: 16px; }
  .pw-scale-grid { grid-template-columns: 1fr; gap: 0; }
  .pw-scale-item { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 15px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; background: transparent; }
  .pw-scale-item:last-child { border-bottom: 0; }
  .pw-scale-value { margin-top: 0; font-size: 21px; text-align: end; }
  .pw-mission-cta { width: 100%; }
  .pw-philosophy-quote { margin-block: 24px; padding: 16px; }
}

/* ---- visual-mission-details.css ---- */
/* Fine-grained parity for the production mission block. Loaded last. */

.pw-mission-primary-copy strong {
  color: #fff;
  font-weight: 800;
}

.pw-mission-primary-copy > .pw-parity-info-sm {
  margin-inline: 2px 0;
}

.pw-mission-note {
  display: inline-block;
  margin-top: 8px;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  line-height: 1.55;
}

.pw-mission-percent {
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pw-mission-impact-title {
  align-items: flex-start;
}

.pw-mission-impact-text-wrap {
  min-width: 0;
  flex: 1;
}

.pw-mission-impact-heading {
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.pw-mission-impact-highlight {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 4px;
  color: var(--peace);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
}

.pw-mission-impact-copy {
  margin-top: 12px;
}

.pw-parity-info-sm {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-inline-start: 5px;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  font-size: 10px;
}

.pw-mission-card > .pw-parity-inline-popover,
.pw-mission-highlight > .pw-parity-inline-popover {
  flex-basis: 100%;
}

@media (max-width: 600px) {
  .pw-mission-note {
    font-size: 12px;
  }

  .pw-mission-impact-heading {
    font-size: 14px;
  }

  .pw-mission-impact-highlight {
    font-family: Inter, system-ui, sans-serif;
    font-size: 16px;
  }
}

/* ---- parity-b.css ---- */
.pw-hero-subtitle {
  margin-top: 14px;
  color: #94a3b8;
  font-family: Montserrat, Inter, sans-serif;
  font-size: clamp(24px, 3.8vw, 34px);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.pw-session-card { justify-content: flex-start; }
.pw-session-title {
  color: #9db8d8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.pw-session-note { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.pw-session-alt-title { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); color: #f8fafc; font-size: 12px; font-weight: 700; }
.pw-session-equivalents { margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; line-height: 1.65; }
.pw-session-equivalents strong { color: var(--peace); font-variant-numeric: tabular-nums; }

#headlineMetrics, #opportunityMetrics { display: none; }

.pw-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}
.pw-reference-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(30,41,59,.38);
  overflow: hidden;
}
.pw-reference-card-label { color: #dce7f4; font-size: 13px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; line-height: 1.3; }
.pw-reference-card-value { margin-top: 14px; font-family: Montserrat, Inter, sans-serif; font-size: clamp(28px,3.3vw,38px); font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pw-reference-card-desc { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pw-reference-card[data-tone="direct"] .pw-reference-card-value { color: var(--danger-direct); }
.pw-reference-card[data-tone="indirect"] .pw-reference-card-value { color: var(--danger); }
.pw-reference-card[data-tone="gold"] .pw-reference-card-value { color: var(--gold); }

.pw-economic-section { margin-top: 44px; }
.pw-section-intro { max-width: 900px; margin: 8px 0 18px; color: var(--muted); font-size: 15px; line-height: 1.6; }

.pw-scenario-spectrum { color: var(--muted); font-size: 12px; }
.pw-allocation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.pw-allocation-card {
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(4,12,24,.35);
}
.pw-allocation-head { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.pw-allocation-head strong { color: #f8fafc; text-align: end; font-variant-numeric: tabular-nums; }
.pw-allocation-track { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.pw-allocation-track i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .16s ease-out; }
.pw-allocation-card[data-allocation="development"] i { background: linear-gradient(90deg, var(--accent), var(--peace)); }
.pw-allocation-card[data-allocation="defence"] i { background: linear-gradient(90deg, var(--danger-direct), var(--gold)); }

.pw-programmes { display: grid; gap: 10px; margin-top: 18px; }
.pw-programme {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: 84px;
  padding: 18px 20px;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 16px;
  background: rgba(30,41,59,.34);
}
.pw-programme::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, rgba(52,211,153,.12), rgba(56,189,248,.04));
  transition: width .16s ease-out;
  pointer-events: none;
}
.pw-programme > * { position: relative; z-index: 1; }
.pw-programme-name { color: #f8fafc; font-size: 15px; font-weight: 800; line-height: 1.35; }
.pw-programme-note { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.pw-programme-value { color: var(--peace); font-family: Montserrat, Inter, sans-serif; font-size: clamp(22px,3vw,30px); font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-programme-toggle {
  display: none;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(56,189,248,.18);
  border-radius: 12px;
  background: rgba(56,189,248,.05);
  color: var(--accent);
  font-weight: 800;
  cursor: pointer;
}

html[dir="rtl"] .pw-programme::before { inset: 0 0 0 auto; }

@media (max-width: 900px) {
  .pw-reference-grid { grid-template-columns: 1fr 1fr; }
  .pw-reference-grid .pw-reference-card:first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .pw-reference-grid { grid-template-columns: 1fr; }
  .pw-reference-grid .pw-reference-card:first-child { grid-column: auto; }
  .pw-allocation { grid-template-columns: 1fr; }
  .pw-programme { grid-template-columns: 1fr; gap: 9px; align-items: start; }
  .pw-programme-value { font-size: 24px; }
  .pw-programme-toggle:not([hidden]) { display: block; }
}

/* ---- embed.css ---- */
html.pw-embed-mode,
html.pw-embed-mode body {
  background: transparent !important;
}
html.pw-embed-mode body { padding: 0 !important; }
html.pw-embed-mode .pw-shell {
  width: 100%;
  max-width: 1240px;
  border-radius: 0;
  box-shadow: none;
}
html.pw-embed-mode .pw-preview-banner,
html.pw-embed-mode .pw-compare,
html.pw-embed-mode .pw-debug,
html.pw-embed-mode .pw-share-section { display: none !important; }
@media (max-width: 600px) {
  html.pw-embed-mode .pw-shell { padding-inline: 14px; }
}

/* ---- visual-reference.css ---- */
/*
 * Visual parity calibration layer.
 *
 * Source of truth: the current production calculator CSS in */
/* <locale>/calculator.html. This file intentionally maps those proven visual
 * tokens and responsive rules onto the unified DOM without changing runtime
 * arithmetic, locale extraction, URL state or production routes.
 */

:root {
  --bg: #0f1f35;
  --surface: rgba(30, 41, 59, .4);
  --border: rgba(148, 163, 184, .15);
  --text: #f8fafc;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --peace: #34d399;
  --danger-direct: #ef4444;
  --danger: #f87171;
  --gold: #fbbf24;
  --radius: 20px;
}

html,
body {
  background: transparent;
}

body {
  padding: 0;
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pw-shell {
  position: relative;
  width: min(1240px, 100%);
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 40px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 32px;
  background: var(--bg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
  line-height: 1.6;
  overflow: visible;
}

/* Keep preview controls available without letting them change parity geometry. */
.pw-preview-banner {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 2000;
  width: auto;
  margin: 0;
  padding: 4px;
  border: 0;
  background: transparent;
  opacity: .42;
  transition: opacity .2s ease;
}
.pw-preview-banner:hover,
.pw-preview-banner:focus-within { opacity: 1; }
.pw-preview-banner > div { display: none; }
.pw-preview-language select {
  min-height: 30px;
  max-width: 118px;
  padding: 4px 26px 4px 8px;
  border-radius: 9px;
  font-size: 11px;
  background-color: rgba(15, 31, 53, .86);
  backdrop-filter: blur(8px);
}

.pw-eyebrow { display: none; }
.pw-hero { max-width: none; }

h1 {
  margin: 0;
  color: var(--text);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.pw-hero-subtitle {
  margin: 2px 0 16px;
  color: var(--muted);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(21px, 2.75vw, 35px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: uppercase;
}

.pw-live-fact {
  margin: 0 0 24px;
  gap: 8px;
  color: var(--danger-direct);
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(20px, 4vw, 24px);
  font-weight: 600;
  line-height: 1.3;
}
.pw-live-fact strong {
  color: inherit;
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}
.pw-live-fact > .pw-live-dot { display: none; }

.pw-lead {
  max-width: 950px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.pw-time-controls {
  align-items: center;
  gap: 12px;
  margin: 10px 0 32px;
}
.pw-time-control {
  align-items: center;
  gap: 12px;
}
.pw-time-control > span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pw-time-control select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 0;
  padding: 12px 40px 12px 20px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, .06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease;
}
.pw-time-control select:hover { background-color: rgba(255, 255, 255, .1); }
.pw-time-control input[type="number"] {
  width: 110px;
  min-height: 0;
  padding: 12px 16px;
  border: 1px solid var(--peace);
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: var(--peace);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.pw-time-control input[type="number"]:focus {
  border-color: var(--peace);
  box-shadow: 0 0 15px rgba(52, 211, 153, .4);
}

.pw-glow::before {
  background: radial-gradient(400px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255, 255, 255, .04), transparent 40%);
  transition: opacity .4s ease;
}

.pw-hero-counter {
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 24px;
  padding: 40px;
  border: 1px solid rgba(184, 255, 207, .1);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(184, 255, 207, .05) 0%, rgba(255, 255, 255, .02) 100%);
}
.pw-counter-kicker {
  gap: 8px;
  margin-bottom: 16px;
  color: var(--danger-direct);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pw-counter-value {
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 40px rgba(255, 255, 255, .1);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.pw-counter-caption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

.pw-session-card {
  align-self: stretch;
  justify-content: center;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 2px 15px rgba(0, 0, 0, .4);
}
.pw-session-head,
.pw-session-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
}
.pw-session-head { margin-bottom: 12px; }
.pw-session-head time { color: var(--danger); }
.pw-session-value {
  margin-top: 0;
  margin-bottom: 8px;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.pw-session-note {
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.pw-session-alt-title {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  color: var(--text);
  font-size: 13px;
}
.pw-session-equivalents {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.pw-session-equivalents strong {
  color: #b8ffcf;
  font-weight: 800;
}

.pw-reference-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.pw-reference-card {
  height: 100%;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pw-reference-card:hover {
  border-color: rgba(255, 255, 255, .2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.pw-reference-card-label {
  color: var(--text);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pw-reference-card-value {
  margin: 8px 0;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(26px, 2.2vw, 36px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.pw-reference-card-desc {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.pw-economic-section,
.pw-opportunity-section,
.pw-share-section {
  margin-top: 48px;
  padding: 48px;
  border: 1px solid var(--border);
  border-radius: 32px;
  background: rgba(255, 255, 255, .02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, .4);
}
.pw-section { margin-top: 48px; }
h2 {
  margin: 0 0 12px;
  color: var(--text);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.pw-section-intro {
  max-width: 920px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.pw-scenario-panel {
  margin-bottom: 32px;
  padding: 28px 36px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background: rgba(0, 0, 0, .3);
}
.pw-scenario-head {
  align-items: flex-end;
  margin-bottom: 20px;
}
.pw-scenario-head span {
  color: var(--text);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
.pw-scenario-head strong {
  color: var(--peace);
  font-family: Inter, system-ui, sans-serif;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}
.pw-scenario-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 12px;
  margin: 12px 0;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg, var(--peace), var(--peace)) 0 / var(--rangeFill, 10%) 100% no-repeat, rgba(255, 255, 255, .1);
  accent-color: unset;
}
.pw-scenario-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--peace);
  box-shadow: 0 0 15px rgba(52, 211, 153, .8);
  cursor: grab;
  transition: transform .1s ease;
}
.pw-scenario-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.pw-scenario-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--peace);
  box-shadow: 0 0 15px rgba(52, 211, 153, .8);
  cursor: grab;
}
.pw-share-track { display: none; }
.pw-scenario-bottom {
  align-items: center;
  margin-top: 20px;
  gap: 12px;
}
.pw-scenario-spectrum {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.pw-scenario-pills { gap: 8px; }
.pw-scenario-chip {
  min-width: 0;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
  transition: all .2s ease;
}
.pw-scenario-chip:hover {
  transform: none;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.pw-scenario-chip.pw-active {
  border-color: var(--peace);
  background: var(--peace);
  color: #000;
  box-shadow: 0 2px 10px rgba(52, 211, 153, .4);
}

.pw-allocation { margin-top: 24px; gap: 16px; }
.pw-allocation-card {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}
.pw-allocation-head { font-size: 13px; }

.pw-programmes {
  gap: 16px;
  margin-top: 0;
}
.pw-programme {
  min-height: 88px;
  padding: 22px 28px;
  gap: 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .2s ease;
}
.pw-programme:hover { border-color: rgba(255, 255, 255, .15); }
.pw-programme::before {
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  border-inline-end: 2px solid rgba(16, 185, 129, .3);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(16, 185, 129, .05) 0%, rgba(16, 185, 129, .12) 100%);
  opacity: .8;
  transition: width .6s cubic-bezier(.16, 1, .3, 1), background .4s ease, border-color .4s ease;
}
.pw-programme-name {
  color: var(--text);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
.pw-programme-note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.pw-programme-value {
  color: #b8ffcf;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(24px, 7vw, 30px);
  font-weight: 900;
  letter-spacing: 0;
  text-align: end;
}

.pw-scale-section,
.pw-mission-section,
.pw-philosophy-section { margin-top: 48px; }
.pw-scale-card,
.pw-mission-card,
.pw-philosophy-card {
  padding: 40px;
  border-radius: 24px;
}
.pw-scale-value,
.pw-mission-card .pw-mission-title,
.pw-philosophy-quote {
  font-family: Montserrat, Inter, system-ui, sans-serif;
}
.pw-mission-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, .15) 0%, rgba(0, 0, 0, .6) 100%);
  border-color: rgba(16, 185, 129, .3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}
.pw-mission-heading {
  margin-bottom: 16px;
  color: var(--peace);
  font-size: 15px;
  letter-spacing: .1em;
}
.pw-mission-title {
  margin: 0 0 24px;
  font-size: clamp(28px, 3.5vw, 42px);
}
.pw-mission-highlight {
  margin-top: 24px;
  padding: 24px;
}
.pw-mission-cta {
  width: 100%;
  margin-top: 24px;
  padding: 18px 32px;
  border-radius: 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(16, 185, 129, .25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.pw-mission-cta:hover,
.pw-mission-cta:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 12px 25px rgba(16, 185, 129, .4);
}

.pw-philosophy-card {
  max-width: 840px;
  margin-inline: auto;
  background: transparent;
  border: 0;
  text-align: center;
}
.pw-philosophy-quote {
  max-width: none;
  margin: 32px auto;
  padding: 40px;
  border: 1px solid rgba(52, 211, 153, .15);
  border-inline-start: 1px solid rgba(52, 211, 153, .15);
  border-radius: 24px;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.pw-share-actions { gap: 12px; }
.pw-share-button {
  padding: 14px 28px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  transition: all .2s ease;
}
.pw-share-button:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .3);
}

/* Diagnostic surfaces remain available but intentionally recede during parity review. */
.pw-method,
.pw-compare,
.pw-debug { opacity: .62; }

html[dir="rtl"] .pw-programme::before { inset: 0 0 0 auto; }
html[dir="rtl"] .pw-time-control select {
  padding: 12px 20px 12px 40px;
  background-position: left 16px center;
}

@media (max-width: 1080px) {
  .pw-hero-counter { grid-template-columns: 1fr; gap: 20px; }
  .pw-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pw-programmes { gap: 16px; }
}

@media (max-width: 600px) {
  html,
  body { background: var(--bg); }
  body { padding: 0; }

  .pw-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    padding: 16px 16px 40px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .pw-preview-banner {
    inset-block-start: 6px;
    inset-inline-end: 6px;
  }
  .pw-preview-language select { max-width: 92px; opacity: .8; }

  /* Reproduce the reference mobile narrative order without duplicating DOM. */
  .pw-hero { display: contents; }
  .pw-hero > h1 { order: 1; }
  .pw-hero > .pw-hero-subtitle { order: 1; }
  .pw-hero > .pw-live-fact { order: 2; }
  .pw-hero-counter { order: 3; }
  .pw-hero > .pw-lead { order: 4; }
  .pw-time-controls { order: 5; }
  .pw-shell > .pw-reference-grid { order: 6; }
  .pw-economic-section { order: 7; }
  .pw-opportunity-section { order: 8; }
  .pw-parity-narrative { order: 9; }
  .pw-share-section { order: 10; }
  .pw-method { order: 11; }
  .pw-compare { order: 12; }
  .pw-debug { order: 13; }

  h1 {
    margin-bottom: 0;
    font-size: clamp(32px, 8vw, 42px);
    line-height: 1.1;
  }
  .pw-hero-subtitle {
    margin: 2px 0 12px;
    font-size: clamp(18px, 4.4vw, 23px);
  }
  .pw-live-fact {
    margin-bottom: 18px;
    font-size: 17px;
  }
  .pw-lead {
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.5;
  }
  .pw-time-controls {
    align-items: stretch;
    flex-direction: column;
    margin: 0 0 24px;
  }
  .pw-time-control {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }
  .pw-time-control select,
  .pw-time-control input[type="number"] { width: 100%; }

  .pw-hero-counter {
    margin: 0 0 24px;
    padding: 20px 16px;
    gap: 0;
    border-radius: 20px;
    background: rgba(184, 255, 207, .03);
  }
  .pw-counter-value { font-size: clamp(34px, 8vw, 46px); }
  .pw-counter-caption { font-size: 15px; }
  .pw-session-card {
    margin-top: 16px;
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .pw-session-value { font-size: 34px; }

  .pw-reference-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
  }
  .pw-reference-grid .pw-reference-card:first-child { grid-column: auto; }
  .pw-reference-card {
    padding: 20px 16px;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 16px;
    background: rgba(30, 41, 59, .2);
    box-shadow: none;
  }
  .pw-reference-card-label { font-size: 16px; }

  .pw-economic-section,
  .pw-opportunity-section,
  .pw-share-section {
    margin-top: 32px;
    padding: 32px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  h2 {
    margin-bottom: 12px;
    font-size: 26px;
    text-align: start;
  }
  .pw-section-intro {
    margin-bottom: 24px;
    font-size: 16px;
    text-align: start;
  }

  .pw-scenario-panel {
    margin-bottom: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .pw-scenario-head {
    align-items: baseline;
    margin-bottom: 12px;
    gap: 8px;
  }
  .pw-scenario-head span {
    color: var(--muted);
    font-family: Inter, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
  }
  .pw-scenario-head strong { font-size: 28px; }
  .pw-scenario-bottom {
    align-items: stretch;
    flex-direction: column;
  }
  .pw-scenario-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .pw-scenario-chip { padding: 12px 8px; }
  .pw-allocation { grid-template-columns: 1fr; }

  .pw-programmes { gap: 0; }
  .pw-programme {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }
  .pw-programme:last-child { border-bottom: 0; }
  .pw-programme::before {
    inset: auto auto 0 0;
    height: 3px;
    width: var(--progress, 0%);
    border: 0;
    border-radius: 3px;
    background: var(--peace);
    opacity: .3;
  }
  html[dir="rtl"] .pw-programme::before { inset: auto 0 0 auto; }
  .pw-programme-name { font-size: 16px; }
  .pw-programme-note {
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
  }
  .pw-programme-value {
    align-self: flex-start;
    margin-top: 2px;
    font-size: 26px;
    text-align: start;
  }
  html[dir="rtl"] .pw-programme-value { align-self: flex-end; }

  .pw-programme-toggle {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
  }

  .pw-scale-section,
  .pw-mission-section,
  .pw-philosophy-section { margin-top: 32px; }
  .pw-scale-card,
  .pw-mission-card,
  .pw-philosophy-card {
    padding: 32px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .pw-scale-grid { grid-template-columns: 1fr; gap: 0; }
  .pw-scale-item {
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    border-radius: 0;
    background: transparent;
  }
  .pw-mission-highlight {
    margin: 20px 0 24px;
    padding: 16px;
    border-color: rgba(16, 185, 129, .15);
    border-radius: 16px;
    background: rgba(16, 185, 129, .05);
  }
  .pw-mission-cta {
    margin-top: 8px;
    padding: 18px 24px;
    font-size: 18px;
  }
  .pw-philosophy-quote {
    margin: 24px 0;
    padding: 24px 16px;
    border-radius: 18px;
  }

  .pw-share-actions {
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
  }
  .pw-share-button {
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    font-size: 16px;
  }

  .pw-method,
  .pw-compare,
  .pw-debug { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .pw-preview-banner { transition: none; }
}

/* ---- visual-opportunity.css ---- */
/* Production-derived opportunity-cost layout. Loaded after visual-reference.css. */

.pw-opportunity-split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items: start;
}

.pw-opportunity-list-column { min-width: 0; }
.pw-mobile-summary { display: none; }

/* Production uses one sticky green fund card, not a stack of dashboard cards. */
.pw-opportunity-fund {
  position: sticky;
  top: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-self: start;
  padding: 40px;
  border: 1px solid rgba(16, 185, 129, .3);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .15) 0%, rgba(0, 0, 0, .6) 100%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}

.pw-fund-summary { min-width: 0; }

.pw-fund-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--peace);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pw-fund-header::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 1.2em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='5'/%3E%3Cpath%20d='M12%201v2M12%2021v2M4.22%204.22l1.42%201.42M18.36%2018.36l1.42%201.42M1%2012h2M21%2012h2M4.22%2019.78l1.42-1.42M18.36%205.64l1.42-1.42'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='5'/%3E%3Cpath%20d='M12%201v2M12%2021v2M4.22%204.22l1.42%201.42M18.36%2018.36l1.42%201.42M1%2012h2M21%2012h2M4.22%2019.78l1.42-1.42M18.36%205.64l1.42-1.42'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pw-fund-amount {
  margin-bottom: 12px;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(34px, 3.5vw, 54px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.pw-fund-subtitle {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  text-wrap: balance;
}

/* parity-narrative.mjs normalizes the generic two-row allocation markup into
   the production two-label + one composite bar structure while preserving IDs. */
.pw-opportunity-fund .pw-allocation {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pw-fund-bar-labels {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  font-size: 13px;
  font-weight: 700;
}

.pw-fund-bar-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  color: var(--peace);
  line-height: 1.35;
}

.pw-fund-bar-label strong {
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pw-fund-bar-label-war {
  color: var(--danger-direct);
  text-align: end;
}

.pw-fund-bar-wrap {
  display: flex;
  width: 100%;
  height: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
}

.pw-fund-bar-peace,
.pw-fund-bar-war {
  display: block;
  height: 100%;
  flex: 0 0 auto;
  transition: width .3s ease;
}
.pw-fund-bar-peace { background: var(--peace); }
.pw-fund-bar-war { background: var(--danger); }

/* Mission content is the lower part of the same fund card, not a second card. */
.pw-opportunity-fund .pw-mission-card {
  margin-top: auto;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pw-opportunity-fund .pw-mission-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #fff;
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: uppercase;
}

.pw-opportunity-fund .pw-mission-heading::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 1.2em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%206v6l4%202'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%206v6l4%202'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pw-opportunity-fund .pw-mission-copy {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  text-wrap: balance;
}

.pw-mission-percent {
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pw-opportunity-fund .pw-mission-highlight {
  margin: 24px 0 28px;
  padding: 24px;
  border: 1px solid rgba(16, 185, 129, .2);
  border-radius: 16px;
  background: rgba(16, 185, 129, .05);
}

.pw-mission-impact-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  color: #fff;
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.pw-mission-impact-title::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 1.2em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='18'%20cy='5'%20r='3'/%3E%3Ccircle%20cx='6'%20cy='12'%20r='3'/%3E%3Ccircle%20cx='18'%20cy='19'%20r='3'/%3E%3Cline%20x1='8.59'%20y1='13.51'%20x2='15.42'%20y2='17.49'/%3E%3Cline%20x1='15.41'%20y1='6.51'%20x2='8.59'%20y2='10.49'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='18'%20cy='5'%20r='3'/%3E%3Ccircle%20cx='6'%20cy='12'%20r='3'/%3E%3Ccircle%20cx='18'%20cy='19'%20r='3'/%3E%3Cline%20x1='8.59'%20y1='13.51'%20x2='15.42'%20y2='17.49'/%3E%3Cline%20x1='15.41'%20y1='6.51'%20x2='8.59'%20y2='10.49'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pw-opportunity-fund .pw-mission-cta {
  width: 100%;
  margin-top: 0;
  padding: 18px 32px;
  border-radius: 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  box-shadow: 0 8px 20px rgba(16, 185, 129, .25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.pw-opportunity-fund .pw-mission-cta:hover,
.pw-opportunity-fund .pw-mission-cta:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 12px 25px rgba(16, 185, 129, .4);
}

/* Restore the source calculator's distinction once a programme is funded at
   least once or many times over. */
.pw-programme.pw-overflow::before {
  opacity: 1;
  background: linear-gradient(90deg, rgba(16, 185, 129, .08) 0%, rgba(16, 185, 129, .25) 100%);
  box-shadow: inset -2px 0 0 rgba(52, 211, 153, .7);
}
.pw-programme.pw-overflow-massive::before {
  opacity: 1;
  background: linear-gradient(90deg, rgba(16, 185, 129, .1) 0%, rgba(52, 211, 153, .35) 100%);
  box-shadow: inset -3px 0 0 var(--peace), 2px 0 15px rgba(52, 211, 153, .3);
}

html[dir="rtl"] .pw-fund-bar-label-war { text-align: start; }
html[dir="rtl"] .pw-programme.pw-overflow::before { box-shadow: inset 2px 0 0 rgba(52, 211, 153, .7); }
html[dir="rtl"] .pw-programme.pw-overflow-massive::before { box-shadow: inset 3px 0 0 var(--peace), -2px 0 15px rgba(52, 211, 153, .3); }

@media (max-width: 900px) {
  .pw-mobile-summary {
    display: block;
    margin-bottom: 24px;
    padding: 24px;
    border: 1px solid rgba(16, 185, 129, .3);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, .1) 0%, rgba(0, 0, 0, .4) 100%);
  }
  .pw-mobile-summary .pw-fund-header { margin-bottom: 12px; }
  .pw-mobile-summary .pw-fund-amount { margin-bottom: 8px; }
  .pw-mobile-summary-desc {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
  }

  .pw-opportunity-split { grid-template-columns: 1fr; }
  .pw-opportunity-fund {
    position: static;
    margin-top: 20px;
  }
}

@media (max-width: 600px) {
  .pw-mobile-summary {
    padding: 0 0 24px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    border-radius: 0;
    background: transparent;
  }
  .pw-mobile-summary .pw-fund-header {
    margin-bottom: 8px;
    color: var(--muted);
    font-family: Inter, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .05em;
  }
  .pw-mobile-summary .pw-fund-amount { font-size: 40px; }

  .pw-opportunity-split { gap: 0; }
  .pw-opportunity-fund {
    margin-top: 24px;
    padding: 32px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .pw-opportunity-fund .pw-fund-header {
    margin-bottom: 8px;
    color: var(--muted);
    font-family: Inter, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .05em;
    flex-wrap: wrap;
  }
  .pw-opportunity-fund .pw-fund-amount {
    margin-bottom: 8px;
    font-size: 40px;
  }
  .pw-opportunity-fund .pw-fund-subtitle {
    margin-bottom: 24px;
    font-size: 15px;
    text-wrap: normal;
  }

  .pw-fund-bar-labels {
    margin-bottom: 24px;
    font-size: 12px;
    flex-wrap: wrap;
  }

  .pw-opportunity-fund .pw-mission-card {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .pw-opportunity-fund .pw-mission-heading {
    margin-bottom: 12px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: none;
    flex-wrap: wrap;
  }
  .pw-opportunity-fund .pw-mission-primary-copy {
    color: rgba(255, 255, 255, .8);
    font-size: 15px;
  }
  .pw-opportunity-fund .pw-mission-highlight {
    margin: 20px 0 24px;
    padding: 16px;
    border-color: rgba(16, 185, 129, .15);
  }
  .pw-mission-impact-title {
    margin-bottom: 8px;
    font-size: 16px;
    flex-wrap: wrap;
  }
  .pw-opportunity-fund .pw-mission-impact-copy {
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
  }
  .pw-opportunity-fund .pw-mission-cta {
    margin-top: 8px;
    padding: 18px 24px;
    font-size: 18px;
  }

  .pw-programme.pw-overflow::before,
  .pw-programme.pw-overflow-massive::before {
    top: auto;
    bottom: 0;
    height: 3px;
    box-shadow: none;
  }
  .pw-programme.pw-overflow-massive::before {
    height: 4px;
    box-shadow: 0 0 10px rgba(52, 211, 153, .5);
  }
}

/* ---- visual-structure.css ---- */
/* Structural parity overrides after the production-derived visual layers. */

/* Production keeps all hero surfaces in one vertical flow. The methodology
   control wraps the lead at runtime, so the wrapper itself is the flex item
   whose order must match the reference. */
.pw-hero {
  display: flex;
  flex-direction: column;
  max-width: none;
}

.pw-hero > h1 { order: 1; }
.pw-hero > .pw-hero-subtitle { order: 1; }
.pw-hero > .pw-live-fact { order: 2; }
.pw-hero > .pw-lead,
.pw-hero > .pw-hero-info-row { order: 3; }
.pw-hero > .pw-time-controls { order: 4; }
.pw-hero > .pw-hero-counter { order: 5; }
.pw-hero > .pw-reference-grid { order: 6; }

@media (max-width: 600px) {
  /* Production mobile deliberately moves the live counter ahead of the long
     explanatory paragraph, then places timeframe controls after the lead. */
  .pw-hero > .pw-hero-counter { order: 3; }
  .pw-hero > .pw-lead,
  .pw-hero > .pw-hero-info-row { order: 4; }
  .pw-hero > .pw-time-controls { order: 5; }
  .pw-hero > .pw-reference-grid { order: 6; }

  .pw-hero > .pw-hero-counter { margin-top: 0; }
  .pw-hero > .pw-reference-grid { margin-top: 0; }
}

/* ---- visual-icons.css ---- */
/* Production-derived iconography mapped onto the unified DOM without duplicating locale markup. */

.pw-reference-card-label,
.pw-programme-name,
.pw-session-title {
  display: flex;
  align-items: flex-start;
}

.pw-reference-card-label::before,
.pw-programme-name::before,
.pw-session-title::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 1.2em;
  margin-inline-end: 8px;
  background: currentColor;
  -webkit-mask: var(--pw-icon) center / contain no-repeat;
  mask: var(--pw-icon) center / contain no-repeat;
  transition: transform .3s ease, filter .3s ease;
}

.pw-reference-card:hover .pw-reference-card-label::before,
.pw-programme:hover .pw-programme-name::before {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px currentColor);
}

#personalBurdenLabel::before {
  color: var(--gold);
  background: var(--gold);
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='12'%20cy='7'%20r='4'/%3E%3C/svg%3E");
}

#directLabel {
  color: var(--danger-direct);
}
#directLabel::before {
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012h4l2-3%203%207%203-6%202%202h2'/%3E%3Cline%20x1='18'%20y1='12'%20x2='22'%20y2='12'%20stroke-dasharray='2%203'/%3E%3C/svg%3E");
}

#indirectLabel {
  color: var(--danger);
}
#indirectLabel::before {
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='2'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='7'%20stroke-dasharray='4%204'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='12'%20stroke-dasharray='4%206'/%3E%3C/svg%3E");
}

#infrastructureLabel::before {
  color: var(--gold);
  background: var(--gold);
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='16'%20height='20'%20x='4'%20y='2'%20rx='2'%20ry='2'/%3E%3Cpath%20d='M9%2022v-4h6v4M8%206h.01M16%206h.01M12%206h.01M12%2010h.01M12%2014h.01M16%2010h.01M16%2014h.01M8%2010h.01M8%2014h.01'/%3E%3C/svg%3E");
}

#lifeYearsLabel {
  color: #e18d96;
}
#lifeYearsLabel::before {
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%202h14M5%2022h14M5%202l7%2010-7%2010M19%202l-7%2010%207%2010'/%3E%3C/svg%3E");
}

#economicLossLabel::before {
  color: var(--gold);
  background: var(--gold);
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='22%2017%2013.5%208.5%208.5%2013.5%202%207'/%3E%3Cpolyline%20points='16%2017%2022%2017%2022%2011'/%3E%3C/svg%3E");
}

.pw-session-title::before {
  color: var(--danger);
  background: var(--danger);
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3C/svg%3E");
}

.pw-programme-name::before {
  color: var(--text);
  background: var(--text);
}
.pw-programme[data-programme="education"] .pw-programme-name::before {
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2019.5v-15A2.5%202.5%200%200%201%206.5%202H20v20H6.5a2.5%202.5%200%200%201%200-5H20'/%3E%3C/svg%3E");
}
.pw-programme[data-programme="hunger"] .pw-programme-name::before {
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%202v7c0%201.1.9%202%202%202h4a2%202%200%200%200%202-2V2M7%202v20M21%2015V2a5%205%200%200%200-5%205v6c0%201.1.9%202%202%202h3M21%2015v7'/%3E%3C/svg%3E");
}
.pw-programme[data-programme="health"] .pw-programme-name::before {
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='18'%20height='18'%20x='3'%20y='3'%20rx='2'/%3E%3Cpath%20d='M12%208v8M8%2012h8'/%3E%3C/svg%3E");
}
.pw-programme[data-programme="water"] .pw-programme-name::before {
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202.7c-2.4%202.4-7.2%206.8-7.2%2011.4A7.1%207.1%200%200%200%2012%2021.2a7.1%207.1%200%200%200%207.2-7.1c0-4.6-4.8-9-7.2-11.4z'/%3E%3C/svg%3E");
}
.pw-programme[data-programme="electricity"] .pw-programme-name::before {
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%202L3%2014h9l-1%208%2010-12h-9l1-8z'/%3E%3C/svg%3E");
}
.pw-programme[data-programme="cleanCooking"] .pw-programme-name::before {
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2010h14l-1.5%209h-11L5%2010Z'/%3E%3Cpath%20d='M8%2010V8h8v2'/%3E%3Cpath%20d='M8%205c0-1%20.7-2%202-3M12%205c0-1%20.7-2%202-3M16%205c0-1%20.7-2%202-3'/%3E%3C/svg%3E");
}
.pw-programme[data-programme="internet"] .pw-programme-name::before {
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10zM2%2012h20'/%3E%3C/svg%3E");
}
.pw-programme[data-programme="climate"] .pw-programme-name::before {
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%204v10.54a4%204%200%201%201-4%200V4a2%202%200%200%201%204%200Z'/%3E%3C/svg%3E");
}
.pw-programme[data-programme="schools"] .pw-programme-name::before {
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202l10%205v2H2V7l10-5zM6%209v11M10%209v11M14%209v11M18%209v11M2%2020h20'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
  .pw-reference-card-label::before,
  .pw-programme-name::before { margin-inline-end: 7px; }
  .pw-session-title::before { margin-inline-end: 6px; }
}

/* ---- visual-finish.css ---- */
/* Final-stage parity refinements for the current RU/EN review pass. */

/* Preview-only engineering panels do not participate in the normal visual
   comparison against production. */
.pw-method,
.pw-compare,
.pw-debug {
  display: none;
}
html[data-preview-debug="true"] .pw-method,
html[data-preview-debug="true"] .pw-compare,
html[data-preview-debug="true"] .pw-debug {
  display: block;
  opacity: .72;
}

/* Production places the main methodology control directly beside the large
   period total, not inside the period kicker. */
.pw-counter-value-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.pw-counter-value-row .pw-counter-value { min-width: 0; }
.pw-counter-value-row .pw-parity-info { flex: 0 0 22px; }

/* Scenario title and its methodology trigger form one production-style label. */
.pw-scenario-title-row {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.pw-scenario-title-row .pw-parity-info {
  margin-inline-start: 10px;
}

/* The reference session box measures active time but does not expose a timer. */
#viewerElapsed {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Restore the dedicated methodology/philosophy section around the central
   text and UNESCO quotation. */
.pw-philosophy-section {
  margin-top: 48px;
  padding: 48px;
  border: 1px solid rgba(52, 211, 153, .2);
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(52, 211, 153, .05) 0%, rgba(15, 31, 53, .4) 100%);
  box-shadow: 0 15px 35px rgba(0, 0, 0, .4);
}
.pw-philosophy-section .pw-philosophy-card {
  max-width: 840px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.pw-philosophy-section h2 {
  margin-bottom: 24px;
}
.pw-philosophy-section .pw-philosophy-copy {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.pw-philosophy-section .pw-philosophy-quote {
  margin: 40px auto;
}

/* The production dissemination/share section is a softer green surface rather
   than another generic dashboard panel. */
.pw-share-section {
  margin-top: 40px;
  padding: 40px 30px;
  border: 1px solid var(--border);
  border-radius: 30px;
  background: rgba(16, 185, 129, .03);
  box-shadow: none;
}
.pw-share-section > h2 {
  max-width: 680px;
  margin: 0 auto 20px;
  text-align: center;
}
.pw-share-section > .pw-section-intro {
  max-width: 680px;
  margin: 0 auto 16px;
  text-align: center;
  font-weight: 500;
}

/* The day / month / year scale is the production viral card, now rendered by
   the shared runtime instead of duplicated locale markup. */
.pw-share-section .pw-scale-section {
  margin-top: 40px;
}
.pw-share-section .pw-scale-card {
  position: relative;
  overflow: hidden;
  margin: 24px 0 0;
  padding: 32px 40px;
  border: 1px solid rgba(16, 185, 129, .2);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .1) 0%, rgba(15, 31, 53, 1) 100%);
}
.pw-share-section .pw-scale-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  inset-inline-end: 20px;
  color: rgba(255, 255, 255, .03);
  font: 900 140px/1 serif;
  pointer-events: none;
}
.pw-share-section .pw-scale-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
  color: var(--peace);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pw-share-section .pw-scale-title {
  position: relative;
  z-index: 1;
  max-width: 90%;
  margin: 0 0 24px;
  color: #fff;
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.pw-share-section .pw-scale-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.pw-share-section .pw-scale-item {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 16px;
  background: rgba(0, 0, 0, .3);
}
.pw-share-section .pw-scale-label {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.pw-share-section .pw-scale-value {
  margin: 0;
  color: #b8ffcf;
  font-family: Inter, system-ui, sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0;
}

.pw-share-actions {
  justify-content: center;
  margin-top: 32px;
}
.pw-share-output {
  max-width: 820px;
  margin-inline: auto;
}
.pw-share-output-action {
  width: 100%;
  margin-top: 20px;
}
#shareCardWrap .pw-share-preview {
  max-height: 500px;
  object-fit: contain;
}

/* Restore the small action icons used by the production sharing controls. */
.pw-share-button::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 1.2em;
  margin-inline-end: 8px;
  background: currentColor;
  -webkit-mask: var(--pw-share-icon) center / contain no-repeat;
  mask: var(--pw-share-icon) center / contain no-repeat;
}
#buildText {
  --pw-share-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4'/%3E%3Cpolyline%20points='7%2010%2012%2015%2017%2010'/%3E%3Cline%20x1='12'%20y1='15'%20x2='12'%20y2='3'/%3E%3C/svg%3E");
}
#buildCard {
  --pw-share-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'%20ry='2'/%3E%3Ccircle%20cx='8.5'%20cy='8.5'%20r='1.5'/%3E%3Cpolyline%20points='21%2015%2016%2010%205%2021'/%3E%3C/svg%3E");
}
#copyText {
  --pw-share-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71'/%3E%3C/svg%3E");
}
#downloadCard {
  --pw-share-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4'/%3E%3Cpolyline%20points='7%2010%2012%2015%2017%2010'/%3E%3Cline%20x1='12'%20y1='15'%20x2='12'%20y2='3'/%3E%3C/svg%3E");
}

/* Keep production label/value hierarchy once icons are restored. */
.pw-reference-card-label,
.pw-programme-name { align-items: center; }

@media (max-width: 600px) {
  .pw-counter-value-row { gap: 10px; }

  .pw-philosophy-section {
    margin-top: 32px;
    padding: 32px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .pw-philosophy-section .pw-philosophy-card {
    max-width: none;
    text-align: left;
  }
  .pw-philosophy-section h2,
  .pw-philosophy-section .pw-philosophy-copy {
    text-align: left;
  }
  .pw-philosophy-section .pw-philosophy-quote {
    margin: 32px 0;
  }

  .pw-share-section {
    margin-top: 32px;
    padding: 32px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-radius: 0;
    background: transparent;
  }
  .pw-share-section > h2 {
    margin-bottom: 20px;
    text-align: center;
  }
  .pw-share-section > .pw-section-intro {
    margin-bottom: 16px;
    text-align: center;
  }

  .pw-share-section .pw-scale-section { margin-top: 32px; }
  .pw-share-section .pw-scale-card {
    overflow: visible;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .pw-share-section .pw-scale-card::before,
  .pw-share-section .pw-scale-heading { display: none; }
  .pw-share-section .pw-scale-title {
    max-width: 100%;
    margin: 0 0 16px -2px;
    padding-inline-start: 2px;
    color: var(--text);
    font-family: Inter, system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .pw-share-section .pw-scale-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .pw-share-section .pw-scale-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    border-radius: 0;
    background: transparent;
  }
  .pw-share-section .pw-scale-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .pw-share-section .pw-scale-label {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
  }
  .pw-share-section .pw-scale-value {
    flex: 0 0 auto;
    font-size: 20px;
    text-align: end;
  }

  .pw-share-actions { margin-top: 24px; }
  .pw-share-output { padding: 16px; }
}

/* ---- visual-value-parity.css ---- */
/* Monetary-value parity fixes derived from the production calculator.
 *
 * The legacy UI keeps metric values white unless the metric itself is a
 * demographic-loss signal. Gold is reserved for supporting iconography, not
 * for the financial values. It also keeps currency/number/unit strings from
 * breaking inside a token (for example, never rendering "млр" + "д").
 */

/* Production financial KPI values are white; gold belongs to their icons. */
.pw-reference-card[data-tone="gold"] .pw-reference-card-value {
  color: #fff;
}

/* Numeric tokens must remain typographically atomic. */
.pw-reference-card-value,
.pw-counter-value,
.pw-session-value,
.pw-fund-amount,
.pw-scale-value,
.pw-programme-value {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* The unified fund column is slightly narrower than the old duplicated DOM
 * at some desktop widths. Keep the production visual weight without allowing
 * a localized compact unit to spill or fracture. */
.pw-fund-amount {
  max-width: 100%;
  font-size: clamp(32px, 3vw, 48px);
  letter-spacing: -.01em;
}

/* Financial values use the production white hierarchy. Demographic-loss
 * colours continue to come from the direct/indirect tone rules. */
#personalBurden,
#infrastructureValue,
#economicLossValue {
  color: #fff;
}

@media (max-width: 600px) {
  .pw-fund-amount {
    font-size: clamp(30px, 9vw, 40px);
  }

  .pw-reference-card-value {
    max-width: 100%;
    font-size: clamp(26px, 8vw, 34px);
  }
}

/* ---- visual-polish.css ---- */
/*
 * Final UX polish layer for live counters and information controls.
 *
 * Goal: keep the production-derived visual language while removing the last
 * visible inconsistencies introduced during the unified migration.
 */

:root {
  --pw-info-size: 20px;
  --pw-info-font-size: 10px;
  --pw-info-gap: 7px;
}

/* One information-control component everywhere. */
.pw-parity-info,
.pw-parity-info-sm {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pw-info-size) !important;
  height: var(--pw-info-size) !important;
  min-width: var(--pw-info-size) !important;
  min-height: var(--pw-info-size) !important;
  flex: 0 0 var(--pw-info-size) !important;
  margin-inline-start: var(--pw-info-gap);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: var(--muted);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--pw-info-font-size) !important;
  font-weight: 800;
  line-height: 1 !important;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
  opacity: .9;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease, transform .16s ease;
}

.pw-parity-info:hover,
.pw-parity-info:focus-visible,
.pw-parity-info[aria-expanded="true"],
.pw-parity-info-sm:hover,
.pw-parity-info-sm:focus-visible,
.pw-parity-info-sm[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  opacity: 1;
  transform: scale(1.04);
}

.pw-parity-info:focus-visible,
.pw-parity-info-sm:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

/* Metric cards: info stays in the upper-right corner, exactly one control size. */
.pw-reference-card .pw-parity-label-row {
  align-items: flex-start;
  gap: 10px;
}
.pw-reference-card .pw-parity-label-row > .pw-parity-info {
  margin-inline-start: auto;
  margin-top: 1px;
}

/* Programme rows: info belongs to the title, not to a remote card edge. */
.pw-programme .pw-parity-label-row {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--pw-info-gap);
}
.pw-programme .pw-parity-label-row > .pw-parity-info {
  margin-inline-start: 0;
  margin-top: 1px;
}

/* Introductory methodology control follows the sentence instead of floating
   at the far edge of the hero. */
.pw-hero-info-row {
  display: block;
  max-width: 950px;
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}
.pw-hero-info-row .pw-lead {
  display: inline;
  max-width: none;
  margin: 0;
}
.pw-hero-info-row > .pw-parity-info {
  margin-inline-start: 5px;
  position: relative;
  top: -1px;
}

/* Keep the main-total and scenario controls visually attached to what they
   explain, with the same control geometry as every other information icon. */
.pw-counter-value-row .pw-parity-info,
.pw-scenario-title-row .pw-parity-info {
  margin-inline-start: var(--pw-info-gap);
  position: relative;
  top: 0;
}

/* Treat the scenario title and its info control as one visual unit. The parent
   .pw-scenario-head can then keep the percentage at the opposite edge without
   leaving the info control floating between the title and the slider. */
.pw-scenario-title-row {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: var(--pw-info-gap);
}
.pw-scenario-title-row > .pw-parity-info {
  margin-inline-start: 0;
  align-self: center;
}

/* Mission controls used to be a smaller one-off variant. Keep the semantic
   class for compatibility but render it through the same component token. */
.pw-mission-primary-copy .pw-parity-info,
.pw-mission-impact-highlight .pw-parity-info {
  margin-inline-start: 5px;
  position: relative;
  top: -1px;
}

/* Production live-number typography. No translate, fade, blur or odometer
   layer: the legacy render loop updates the visible values directly. */
.pw-flow-value {
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

.pw-flow-value .pw2-currency-sign {
  display: inline-block;
  font-family: var(--font-heading, Montserrat, system-ui, sans-serif);
  font-size: .85em;
  font-weight: 700;
  opacity: .7;
}

.pw-flow-value .pw2-val-unit {
  display: inline-block;
  margin-left: .2em;
  font-family: var(--font-heading, Montserrat, system-ui, sans-serif);
  font-size: .55em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: lowercase;
  vertical-align: baseline;
  opacity: .8;
  white-space: nowrap;
}

/* The preview language control is deliberately compact because it floats over
   the production-parity shell. Keep all 11 locales available without turning
   the control into a wide toolbar. */
.pw-preview-language select {
  appearance: none;
  -webkit-appearance: none;
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  padding: 5px 22px 5px 9px;
  border-color: rgba(255, 255, 255, .13);
  background-color: rgba(15, 31, 53, .86);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  color: #dce7f4;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}
.pw-preview-language select:hover {
  border-color: rgba(255, 255, 255, .24);
  background-color: rgba(15, 31, 53, .96);
}
.pw-preview-language select:focus-visible {
  border-color: rgba(56, 189, 248, .6);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .13);
}

/* Montserrat is very wide in Cyrillic. A small optical correction keeps the
   Russian and Ukrainian hero from feeling denser than the Latin locales while
   preserving the same hierarchy and content. */
html[lang="ru"] h1,
html[lang="uk"] h1 {
  font-size: clamp(36px, 4.7vw, 60px);
  letter-spacing: -.028em;
  line-height: 1.08;
}
html[lang="ru"] h2,
html[lang="uk"] h2 {
  letter-spacing: -.018em;
}
html[lang="ru"] .pw-reference-card-label,
html[lang="uk"] .pw-reference-card-label {
  letter-spacing: .025em;
}

@media (max-width: 600px) {
  :root {
    --pw-info-size: 20px;
    --pw-info-font-size: 10px;
  }

  .pw-hero-info-row {
    margin-bottom: 24px;
    font-size: 16px;
  }

  .pw-programme .pw-parity-label-row {
    max-width: calc(100% - 2px);
  }

  .pw-preview-language select {
    width: 54px;
    min-width: 54px;
    max-width: 54px;
    min-height: 30px;
  }

  html[lang="ru"] h1,
  html[lang="uk"] h1 {
    font-size: clamp(32px, 10.4vw, 46px);
    line-height: 1.06;
  }

  /* On narrow screens the scenario title can wrap to two lines. It therefore
     needs normal inline text flow rather than two flex children: the info
     control then follows the colon on the final line instead of sitting in the
     empty space between the title and the percentage. */
  .pw-scenario-title-row {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    gap: 0;
  }
  .pw-scenario-title-row > #scenarioTitle {
    display: inline;
    min-width: 0;
  }
  .pw-scenario-title-row > .pw-parity-info {
    position: static;
    margin-inline-start: 4px;
    vertical-align: middle;
  }

  /* These two controls live inside running copy. Keep them in the inline
     formatting context so they sit on the text baseline and travel with the
     words they explain instead of becoming independent flex rows. */
  .pw-mission-primary-copy .pw-parity-info,
  .pw-mission-impact-highlight .pw-parity-info {
    position: static;
    margin-inline-start: 3px;
    vertical-align: middle;
  }

  /* The investment-efficiency sentence may wrap. A flex container turns the
     info button into a separate flex item and can strand it on its own line;
     normal inline layout keeps the non-breaking-space + icon attached to the
     final word of the green statement. */
  .pw-mission-impact-highlight {
    display: block;
  }
}

/* ---- product-paper.css ---- */
:root {
  color-scheme: light;
}

html.pw-product-overview {
  --page: #f6f4ef;
  --bg: #f6f4ef;
  --surface: #fffefb;
  --surface-strong: #eeece5;
  --surface-soft: #f8f7f2;
  --border: #d8d4ca;
  --border-strong: #c9c4b8;
  --text: #181a17;
  --muted: #66675f;
  --muted-strong: #505149;
  --ink: #1f231f;
  --accent: #718a72;
  --peace: #718a72;
  --danger: #9a5a54;
  --danger-direct: #9a5a54;
  --gold: #9b7d49;
  --blue: #4f7480;
  --radius: 22px;
  background: var(--page);
  color: var(--text);
}

html.pw-product-overview * {
  scrollbar-color: #c7c3b9 transparent;
}

html.pw-product-overview body {
  padding: 24px 18px 80px;
  background: var(--page);
  color: var(--text);
}

html.pw-product-overview .pw-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 0 56px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Preview chrome */
html.pw-product-overview .pw-preview-banner {
  position: sticky;
  top: 10px;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 52px;
  padding: 8px 9px 8px 14px;
  border: 1px solid rgba(201, 196, 184, .92);
  border-radius: 999px;
  background: rgba(246, 244, 239, .94);
  color: var(--muted);
  box-shadow: 0 7px 24px rgba(31, 35, 31, .055);
  backdrop-filter: blur(14px);
}

html.pw-product-overview .pw-preview-banner > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

html.pw-product-overview .pw-preview-banner strong {
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

html.pw-product-overview .pw-preview-banner > div > span {
  color: var(--muted);
  font-size: 10px;
}

html.pw-product-overview .pw-product-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 254, 251, .94);
}

html.pw-product-overview .pw-product-tabs a {
  min-width: 90px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

html.pw-product-overview .pw-product-tabs a:hover {
  color: var(--text);
  background: var(--surface-strong);
}

html.pw-product-overview .pw-product-tabs a[aria-current="page"] {
  background: var(--ink);
  color: #fff;
}

html.pw-product-overview .pw-preview-language select,
html.pw-product-overview select,
html.pw-product-overview input[type="number"] {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(24, 26, 23, .025);
}

html.pw-product-overview select option {
  background: var(--surface);
  color: var(--text);
}

html.pw-product-overview select:focus,
html.pw-product-overview input:focus,
html.pw-product-overview button:focus-visible,
html.pw-product-overview a:focus-visible {
  border-color: var(--accent);
  outline: 3px solid rgba(113, 138, 114, .18);
  outline-offset: 2px;
  box-shadow: none;
}

/* Hero */
html.pw-product-overview .pw-hero {
  max-width: none;
}

html.pw-product-overview .pw-eyebrow {
  margin-bottom: 11px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
}

html.pw-product-overview h1,
html.pw-product-overview h2,
html.pw-product-overview .pw-counter-value,
html.pw-product-overview .pw-session-value,
html.pw-product-overview .pw-card-value,
html.pw-product-overview .pw-reference-card-value {
  font-family: Inter, system-ui, sans-serif;
}

html.pw-product-overview h1 {
  max-width: 920px;
  margin: 0;
  color: var(--text);
  font-size: clamp(58px, 8.2vw, 98px);
  font-weight: 820;
  line-height: .94;
  letter-spacing: -.058em;
  text-transform: none;
  text-wrap: balance;
}

html.pw-product-overview .pw-hero-subtitle {
  display: inline-flex;
  margin-top: 19px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
}

html.pw-product-overview .pw-live-fact {
  margin-top: 20px;
  gap: 7px;
  color: var(--muted-strong);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 560;
}

html.pw-product-overview .pw-live-fact strong {
  color: var(--danger);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
}

html.pw-product-overview .pw-live-dot {
  width: 8px;
  height: 8px;
  background: var(--danger);
  box-shadow: 0 0 0 5px rgba(154, 90, 84, .09);
}

html.pw-product-overview .pw-live-dot::after {
  inset: -4px;
  border-color: rgba(154, 90, 84, .34);
  animation: none;
  opacity: .55;
}

html.pw-product-overview .pw-lead {
  max-width: 820px;
  margin: 24px 0 0;
  color: var(--muted-strong);
  font-size: 18px;
  line-height: 1.65;
}

html.pw-product-overview .pw-time-controls {
  margin: 32px 0 22px;
  gap: 10px;
}

html.pw-product-overview .pw-time-control {
  gap: 8px;
}

html.pw-product-overview .pw-time-control > span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
}

html.pw-product-overview .pw-time-control select,
html.pw-product-overview .pw-time-control input {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 700;
}

/* Main calculator block */
html.pw-product-overview .pw-hero-counter {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(280px, .78fr);
  gap: 14px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: rgba(255, 254, 251, .84);
  box-shadow: 0 14px 40px rgba(31, 35, 31, .055);
}

html.pw-product-overview .pw-counter-main,
html.pw-product-overview .pw-session-card,
html.pw-product-overview .pw-reference-card,
html.pw-product-overview .pw-scenario-panel {
  position: relative;
}

html.pw-product-overview .pw-counter-main {
  min-height: 330px;
  padding: 38px 36px 34px;
  overflow: hidden;
  border-radius: 21px;
  background: var(--ink);
}

html.pw-product-overview .pw-counter-main::before {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -130px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
  box-shadow: 0 0 0 58px rgba(255, 255, 255, .018), 0 0 0 118px rgba(255, 255, 255, .012);
  pointer-events: none;
}

html.pw-product-overview [data-product-evidence]::after {
  content: attr(data-evidence-label);
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 254, 251, .92);
  color: var(--muted-strong);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .07em;
  white-space: nowrap;
}

html.pw-product-overview .pw-counter-main[data-product-evidence]::after {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .7);
}

html.pw-product-overview [data-product-evidence="observed"]::after {
  border-color: rgba(113, 138, 114, .34);
  color: #526b54;
}

html.pw-product-overview .pw-counter-main[data-product-evidence="observed"]::after {
  border-color: rgba(172, 202, 175, .2);
  color: #c8dbc9;
}

html.pw-product-overview [data-product-evidence="illustrative"]::after {
  border-color: rgba(155, 125, 73, .28);
  color: #81663a;
}

html.pw-product-overview [data-product-evidence="scenario"]::after {
  border-color: rgba(79, 116, 128, .27);
  color: var(--blue);
}

html.pw-product-overview .pw-counter-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 17px;
  color: #d5ddd5;
  font-size: 11px;
  letter-spacing: .08em;
}

html.pw-product-overview .pw-counter-kicker .pw-live-dot {
  background: #c97a70;
  box-shadow: 0 0 0 5px rgba(201, 122, 112, .09);
}

html.pw-product-overview .pw-counter-value {
  position: relative;
  z-index: 1;
  max-width: 100%;
  color: #fff;
  font-size: clamp(54px, 8.4vw, 102px);
  font-weight: 820;
  line-height: .92;
  letter-spacing: -.066em;
}

html.pw-product-overview .pw-counter-caption {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin-top: 19px;
  color: #b9c0b8;
  font-size: 14px;
}

html.pw-product-overview .pw-session-card {
  min-height: 330px;
  padding: 56px 22px 28px;
  border: 1px solid var(--border);
  border-radius: 21px;
  background: var(--surface);
  box-shadow: none;
}

html.pw-product-overview .pw-session-head {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .055em;
}

html.pw-product-overview .pw-session-head time {
  color: var(--danger);
}

html.pw-product-overview .pw-session-value {
  margin-top: 19px;
  color: var(--text);
  font-size: clamp(34px, 4.8vw, 48px);
  font-weight: 800;
  letter-spacing: -.05em;
}

html.pw-product-overview .pw-session-note,
html.pw-product-overview .pw-session-alt-title,
html.pw-product-overview .pw-session-equivalents {
  color: var(--muted);
}

html.pw-product-overview .pw-session-note {
  margin-top: 8px;
  font-size: clamp(10px, 1.05vw, 11px);
  line-height: 1.35;
  white-space: nowrap;
}

html.pw-product-overview .pw-session-alt-title {
  margin-top: 23px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 750;
}

html.pw-product-overview .pw-session-equivalents {
  margin-top: 10px;
  line-height: 1.7;
}

html.pw-product-overview .pw-session-equivalents strong {
  color: var(--text);
}

/* Metric cards */
html.pw-product-overview .pw-reference-grid,
html.pw-product-overview .pw-grid {
  gap: 12px;
}

html.pw-product-overview .pw-hero > .pw-reference-grid {
  margin-top: 14px;
}

html.pw-product-overview .pw-reference-card,
html.pw-product-overview .pw-card,
html.pw-product-overview .pw-allocation-card,
html.pw-product-overview .pw-programme,
html.pw-product-overview .pw-opportunity-fund {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}

html.pw-product-overview .pw-reference-card {
  min-height: 172px;
  padding: 54px 20px 21px;
  overflow: hidden;
  border-radius: 18px;
}

html.pw-product-overview .pw-reference-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: var(--border-strong);
}

html.pw-product-overview .pw-reference-card[data-tone="gold"]::after {
  background: var(--gold);
}

html.pw-product-overview .pw-reference-card[data-tone="direct"]::after {
  background: var(--danger);
}

html.pw-product-overview .pw-reference-card[data-tone="indirect"]::after {
  background: #b48269;
}

html.pw-product-overview .pw-reference-card-label,
html.pw-product-overview .pw-card-label {
  min-height: 0;
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .075em;
}

html.pw-product-overview .pw-reference-card-value,
html.pw-product-overview .pw-card-value {
  margin-top: 15px;
  color: var(--text);
  font-size: clamp(31px, 3.7vw, 43px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.052em;
}

html.pw-product-overview .pw-reference-card-desc {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

html.pw-product-overview .pw-card[data-kind="danger"] .pw-card-value,
html.pw-product-overview .pw-card[data-kind="danger-direct"] .pw-card-value,
html.pw-product-overview .pw-card[data-kind="danger-indirect"] .pw-card-value {
  color: var(--danger);
}

html.pw-product-overview .pw-card[data-kind="peace"] .pw-card-value {
  color: var(--accent);
}

html.pw-product-overview .pw-card[data-kind="gold"] .pw-card-value {
  color: var(--gold);
}

html.pw-product-overview .pw-card::after {
  display: none;
}

html.pw-product-overview .pw-glow::before,
html.pw-product-overview .pw-glow:hover::before {
  opacity: 0;
}

/* Evidence key */
html.pw-product-overview .pw-product-scope {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 254, 251, .58);
}

html.pw-product-overview .pw-product-scope-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

html.pw-product-overview .pw-product-scope-key span {
  padding: 5px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

html.pw-product-overview [data-scope-chip="observed"] {
  border: 1px solid rgba(113, 138, 114, .3);
  background: rgba(113, 138, 114, .07);
  color: #526b54;
}

html.pw-product-overview [data-scope-chip="illustrative"] {
  border: 1px solid rgba(155, 125, 73, .25);
  background: rgba(155, 125, 73, .055);
  color: #81663a;
}

html.pw-product-overview .pw-product-scope p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

/* Sections */
html.pw-product-overview .pw-economic-section,
html.pw-product-overview .pw-opportunity-section,
html.pw-product-overview .pw-share-section {
  margin-top: 72px;
  padding-top: 0;
  border-top: 0;
}

html.pw-product-overview .pw-economic-section::before,
html.pw-product-overview .pw-opportunity-section::before,
html.pw-product-overview .pw-share-section::before {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin-bottom: 22px;
  background: var(--border-strong);
}

html.pw-product-overview h2 {
  max-width: 800px;
  color: var(--text);
  font-size: clamp(31px, 4vw, 46px);
  font-weight: 790;
  line-height: 1.03;
  letter-spacing: -.045em;
  text-transform: none;
}

html.pw-product-overview .pw-section-intro {
  max-width: 760px;
  margin-top: 12px;
  color: var(--muted-strong);
  font-size: 15px;
  line-height: 1.62;
}

html.pw-product-overview .pw-economic-section .pw-reference-grid {
  margin-top: 23px;
}

/* Scenario */
html.pw-product-overview .pw-scenario-panel {
  margin-top: 24px;
  margin-bottom: 18px;
  padding: 58px 24px 24px;
  border: 1px solid rgba(113, 138, 114, .26);
  border-radius: 22px;
  background: rgba(113, 138, 114, .055);
}

html.pw-product-overview .pw-scenario-head span {
  color: var(--text);
  font-size: 12px;
  letter-spacing: .04em;
}

html.pw-product-overview .pw-scenario-head strong {
  color: var(--accent);
  font-family: Inter, system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
}

html.pw-product-overview .pw-share-track,
html.pw-product-overview .pw-allocation-track {
  background: #dfddd4;
}

html.pw-product-overview .pw-share-track i {
  background: var(--accent);
}

html.pw-product-overview .pw-scenario-spectrum {
  color: var(--muted-strong);
}

html.pw-product-overview .pw-scenario-chip {
  border-color: var(--border);
  background: var(--surface);
  color: var(--muted-strong);
  box-shadow: none;
}

html.pw-product-overview .pw-scenario-chip:hover {
  transform: none;
  background: var(--surface-strong);
  color: var(--text);
}

html.pw-product-overview .pw-scenario-chip.pw-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  box-shadow: none;
}

html.pw-product-overview .pw-allocation-card {
  border-radius: 14px;
}

html.pw-product-overview .pw-allocation-head {
  color: var(--muted-strong);
}

html.pw-product-overview .pw-allocation-head strong {
  color: var(--text);
}

/* Programmes and opportunity cards */
html.pw-product-overview .pw-programme,
html.pw-product-overview .pw-opportunity-fund {
  border-radius: 18px;
}

html.pw-product-overview .pw-programme-name {
  color: var(--text);
}

html.pw-product-overview .pw-programme-value,
html.pw-product-overview .pw-opportunity-fund strong {
  color: var(--text);
}

html.pw-product-overview .pw-programme-toggle,
html.pw-product-overview .pw-share-button {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

html.pw-product-overview .pw-programme-toggle:hover,
html.pw-product-overview .pw-share-button:hover {
  background: var(--surface-strong);
}

html.pw-product-overview .pw-share-button[data-primary="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

/* Info controls and popovers */
html.pw-product-overview .pw-info-button {
  border-color: var(--border);
  background: var(--surface-strong);
  color: var(--muted);
}

html.pw-product-overview .pw-info-button:hover,
html.pw-product-overview .pw-info-button[aria-expanded="true"] {
  background: var(--ink);
  color: #fff;
}

html.pw-product-overview .pw-card-popover {
  border-color: #363a34;
  background: #242720;
  color: #fff;
  box-shadow: 0 18px 40px rgba(24, 26, 23, .17);
}

html.pw-product-overview .pw-card-popover code {
  color: #d5e2d4;
}

/* Method */
html.pw-product-overview .pw-method {
  margin-top: 58px;
  border-color: var(--border);
  border-radius: 17px;
  background: rgba(255, 254, 251, .62);
}

html.pw-product-overview .pw-method summary {
  color: var(--text);
}

html.pw-product-overview .pw-method-body {
  border-top-color: var(--border);
}

html.pw-product-overview .pw-method-grid > div {
  background: var(--surface-strong);
}

html.pw-product-overview .pw-method-grid span,
html.pw-product-overview .pw-method p,
html.pw-product-overview .pw-method-sources {
  color: var(--muted);
}

html.pw-product-overview .pw-source-links a {
  border-color: rgba(79, 116, 128, .25);
  color: var(--blue);
}

html.pw-product-overview .pw-compare,
html.pw-product-overview .pw-debug {
  display: none;
}

@media (max-width: 960px) {
  html.pw-product-overview .pw-preview-banner {
    grid-template-columns: 1fr auto;
    border-radius: 20px;
  }

  html.pw-product-overview .pw-preview-banner > div {
    display: none;
  }

  html.pw-product-overview .pw-product-tabs {
    justify-self: start;
  }

  html.pw-product-overview .pw-hero-counter {
    grid-template-columns: 1fr;
  }

  html.pw-product-overview .pw-counter-main,
  html.pw-product-overview .pw-session-card {
    min-height: 280px;
  }

  html.pw-product-overview .pw-product-scope {
    grid-template-columns: 1fr;
    gap: 9px;
  }
}

@media (max-width: 620px) {
  html.pw-product-overview body {
    padding: 12px 14px 64px;
    background: var(--page);
  }

  html.pw-product-overview .pw-shell {
    padding: 0 0 38px;
  }

  html.pw-product-overview .pw-preview-banner {
    position: static;
    grid-template-columns: 1fr auto;
    margin-bottom: 34px;
    padding: 6px;
  }

  html.pw-product-overview .pw-product-tabs a {
    min-width: 72px;
    padding: 8px 10px;
    font-size: 11px;
  }

  html.pw-product-overview .pw-preview-language select {
    min-height: 34px;
    padding-block: 6px;
  }

  html.pw-product-overview .pw-eyebrow {
    margin-inline: 4px;
  }

  html.pw-product-overview h1 {
    margin-inline: 3px;
    font-size: clamp(48px, 15vw, 66px);
    line-height: .94;
  }

  html.pw-product-overview .pw-hero-subtitle,
  html.pw-product-overview .pw-live-fact,
  html.pw-product-overview .pw-lead,
  html.pw-product-overview .pw-time-controls {
    margin-inline: 4px;
  }

  html.pw-product-overview .pw-live-fact {
    font-size: 15px;
  }

  html.pw-product-overview .pw-lead {
    font-size: 16px;
  }

  html.pw-product-overview .pw-time-controls {
    align-items: stretch;
    flex-direction: column;
  }

  html.pw-product-overview .pw-time-control {
    align-items: stretch;
    flex-direction: column;
  }

  html.pw-product-overview .pw-time-control select,
  html.pw-product-overview .pw-time-control input {
    width: 100%;
  }

  html.pw-product-overview .pw-hero-counter {
    gap: 8px;
    padding: 7px;
    border-radius: 22px;
  }

  html.pw-product-overview .pw-counter-main {
    min-height: 260px;
    padding: 62px 20px 24px;
    border-radius: 16px;
  }

  html.pw-product-overview .pw-counter-value {
    font-size: clamp(46px, 15vw, 67px);
  }

  html.pw-product-overview .pw-session-card {
    min-height: 0;
    padding: 44px 16px 16px;
    border-radius: 16px;
  }

  html.pw-product-overview .pw-session-head {
    font-size: 9.5px;
    letter-spacing: .04em;
  }

  html.pw-product-overview .pw-session-value {
    margin-top: 12px;
    font-size: clamp(38px, 11vw, 46px);
    line-height: .98;
  }

  html.pw-product-overview .pw-session-note {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.3;
    white-space: normal;
  }

  html.pw-product-overview [data-product-evidence]::after {
    top: 13px;
    right: 13px;
    max-width: calc(100% - 26px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html.pw-product-overview .pw-hero > .pw-reference-grid,
  html.pw-product-overview .pw-economic-section .pw-reference-grid {
    grid-template-columns: 1fr;
  }

  html.pw-product-overview .pw-reference-card {
    min-height: 0;
    padding: 46px 16px 16px;
  }

  html.pw-product-overview .pw-reference-card-value {
    margin-top: 12px;
    font-size: clamp(32px, 9.5vw, 38px);
  }

  html.pw-product-overview .pw-reference-card-desc {
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.5;
  }

  html.pw-product-overview .pw-evidence-badge {
    top: 12px;
    right: 12px;
    max-width: calc(100% - 24px);
    padding: 4px 7px;
    gap: 5px;
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: .045em;
  }

  html.pw-product-overview .pw-product-scope {
    margin-inline: 2px;
    padding: 12px;
  }

  html.pw-product-overview .pw-product-scope-key {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  html.pw-product-overview .pw-product-scope-key span {
    text-align: center;
    white-space: normal;
  }

  html.pw-product-overview .pw-economic-section,
  html.pw-product-overview .pw-opportunity-section,
  html.pw-product-overview .pw-share-section {
    margin-top: 50px;
    padding-inline: 0;
  }

  html.pw-product-overview h2 {
    font-size: clamp(28px, 8vw, 31px);
    line-height: 1.05;
    letter-spacing: -.026em;
  }

  html.pw-product-overview .pw-section-intro {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.52;
  }

  html.pw-product-overview .pw-scenario-panel {
    margin-top: 18px;
    padding: 50px 14px 16px;
  }

  html.pw-product-overview .pw-scenario-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  html.pw-product-overview .pw-scenario-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  html.pw-product-overview .pw-scenario-chip {
    min-width: 0;
  }

  html.pw-product-overview .pw-programmes {
    gap: 10px;
  }

  html.pw-product-overview .pw-programme {
    min-height: 0;
    padding: 16px;
    gap: 10px;
    border-radius: 16px;
  }

  html.pw-product-overview .pw-programme-name {
    font-size: 15px;
    line-height: 1.28;
  }

  html.pw-product-overview .pw-programme-note {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.38;
  }

  html.pw-product-overview .pw-programme-value {
    margin-top: 0;
    font-size: 28px;
    line-height: 1;
  }

  html.pw-product-overview .pw-programme-toggle {
    margin-top: 10px;
    padding: 13px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.35;
  }

  html.pw-product-overview .pw-opportunity-fund {
    margin-top: 18px;
    padding: 20px 16px;
    border-radius: 18px;
  }

  html.pw-product-overview .pw-opportunity-fund .pw-fund-amount {
    font-size: 36px;
    line-height: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.pw-product-overview *,
  html.pw-product-overview *::before,
  html.pw-product-overview *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}


/* Council methodology cleanup: the public Overview no longer publishes the
   additive monetary "economic losses" aggregate. Keep the two remaining
   assumption-based estimates balanced as a pair. */
html.pw-product-overview .pw-economic-public-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 620px) {
  html.pw-product-overview .pw-economic-public-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- product-evidence.css ---- */
/* Evidence-status palette for the public-style unified product preview.
   Status is communicated by label + border + tint; colour is never the only cue. */

html.pw-product-overview {
  --evidence-source:#5c6a60;
  --evidence-source-strong:#465249;
  --evidence-source-soft:#eef2ee;
  --evidence-derived:#526b78;
  --evidence-derived-strong:#3f5966;
  --evidence-derived-soft:#edf3f5;
  --evidence-model:#9a733e;
  --evidence-model-strong:#765528;
  --evidence-model-soft:#f7f0e5;
  --evidence-scenario:#55745c;
  --evidence-scenario-strong:#3f6047;
  --evidence-scenario-soft:#edf4ee;
}

/* The live pro-rata rate is derived, not an alarm state. */
html.pw-product-overview .pw-live-fact strong {
  color:var(--evidence-derived-strong);
}

html.pw-product-overview .pw-live-dot,
html.pw-product-overview .pw-counter-kicker .pw-live-dot {
  background:var(--evidence-derived);
  box-shadow:0 0 0 5px rgba(82,107,120,.09);
}

html.pw-product-overview .pw-live-dot::after {
  border-color:rgba(82,107,120,.3);
}

html.pw-product-overview .pw-session-head time {
  color:var(--evidence-derived-strong);
}

/* Shared evidence card grammar. */
html.pw-product-overview [data-product-evidence] {
  --evidence-tone:var(--border-strong);
  --evidence-tone-strong:var(--muted-strong);
  --evidence-tone-soft:var(--surface-soft);
}

html.pw-product-overview [data-product-evidence="source"] {
  --evidence-tone:var(--evidence-source);
  --evidence-tone-strong:var(--evidence-source-strong);
  --evidence-tone-soft:var(--evidence-source-soft);
}

html.pw-product-overview [data-product-evidence="derived"] {
  --evidence-tone:var(--evidence-derived);
  --evidence-tone-strong:var(--evidence-derived-strong);
  --evidence-tone-soft:var(--evidence-derived-soft);
}

html.pw-product-overview [data-product-evidence="model"] {
  --evidence-tone:var(--evidence-model);
  --evidence-tone-strong:var(--evidence-model-strong);
  --evidence-tone-soft:var(--evidence-model-soft);
}

html.pw-product-overview [data-product-evidence="scenario"] {
  --evidence-tone:var(--evidence-scenario);
  --evidence-tone-strong:var(--evidence-scenario-strong);
  --evidence-tone-soft:var(--evidence-scenario-soft);
}

html.pw-product-overview [data-product-evidence]::after {
  border-color:color-mix(in srgb,var(--evidence-tone) 34%,var(--border));
  background:color-mix(in srgb,var(--evidence-tone-soft) 88%,#fff);
  color:var(--evidence-tone-strong);
}

/* Source hero remains dark and neutral; only the evidence marker carries status colour. */
html.pw-product-overview .pw-counter-main[data-product-evidence="source"] {
  background:#20241f;
  box-shadow:inset 0 3px 0 rgba(130,154,135,.5);
}

html.pw-product-overview .pw-counter-main[data-product-evidence="source"]::after {
  border-color:rgba(193,211,196,.18);
  background:rgba(193,211,196,.08);
  color:#d4e0d5;
}

/* Derived viewer card gets a cool slate tint. */
html.pw-product-overview .pw-session-card[data-product-evidence="derived"] {
  border-color:color-mix(in srgb,var(--evidence-derived) 26%,var(--border));
  background:linear-gradient(180deg,#fff 0%,var(--evidence-derived-soft) 100%);
  box-shadow:inset 0 3px 0 color-mix(in srgb,var(--evidence-derived) 64%,transparent);
}

/* Reference cards use evidence status, not topic, for their top rule and tint. */
html.pw-product-overview .pw-reference-card[data-product-evidence] {
  border-color:color-mix(in srgb,var(--evidence-tone) 24%,var(--border));
  background:linear-gradient(180deg,#fff 0%,var(--evidence-tone-soft) 100%);
}

html.pw-product-overview .pw-reference-card[data-product-evidence]::after {
  content:"";
  top:0;
  right:auto;
  left:0;
  width:100%;
  height:3px;
  padding:0;
  border:0;
  border-radius:18px 18px 0 0;
  background:var(--evidence-tone);
}

/* Evidence badge is rendered separately so the top rule can remain purely structural. */
html.pw-product-overview .pw-evidence-badge {
  position:absolute;
  top:14px;
  right:14px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:calc(100% - 28px);
  padding:5px 8px;
  border:1px solid color-mix(in srgb,var(--evidence-tone) 34%,var(--border));
  border-radius:999px;
  background:color-mix(in srgb,var(--evidence-tone-soft) 88%,#fff);
  color:#30352f;
  font-size:10px;
  font-weight:800;
  line-height:1;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
}

html.pw-product-overview .pw-evidence-badge::before {
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--evidence-tone);
}

html.pw-product-overview .pw-counter-main .pw-evidence-badge {
  border-color:rgba(193,211,196,.18);
  background:rgba(193,211,196,.08);
  color:#d4e0d5;
}

html.pw-product-overview .pw-counter-main .pw-evidence-badge::before {
  background:#a9c0ad;
}

/* Overview cards lead with the human-readable metric. Evidence provenance remains
   in data attributes and the info tooltip instead of competing on the card face. */
html.pw-product-overview .pw-reference-card > .pw-evidence-badge {
  display:none;
}

html.pw-product-overview .pw-reference-card {
  padding-top:24px;
}

@media (max-width:620px) {
  html.pw-product-overview .pw-reference-card {
    padding-top:18px;
  }
}

/* Values stay typographically neutral: no death=red, money=gold, development=green shortcut. */
html.pw-product-overview .pw-reference-card-value,
html.pw-product-overview .pw-card-value,
html.pw-product-overview .pw-session-value {
  color:var(--text)!important;
}

html.pw-product-overview .pw-reference-card-label {
  color:var(--evidence-tone-strong);
}

/* Model section is visibly assumption-dependent without looking like a warning. */
html.pw-product-overview .pw-economic-section .pw-reference-card[data-product-evidence="model"] {
  background:linear-gradient(180deg,#fff 0%,var(--evidence-model-soft) 100%);
}

/* Scenario is green only because it is explicitly hypothetical, not because the subject is 'good'. */
html.pw-product-overview .pw-scenario-panel[data-product-evidence="scenario"] {
  border-color:color-mix(in srgb,var(--evidence-scenario) 30%,var(--border));
  background:linear-gradient(180deg,#fff 0%,var(--evidence-scenario-soft) 100%);
  box-shadow:inset 0 3px 0 color-mix(in srgb,var(--evidence-scenario) 62%,transparent);
}

html.pw-product-overview .pw-scenario-head strong {
  color:var(--evidence-scenario-strong);
}

html.pw-product-overview .pw-share-track i {
  background:var(--evidence-scenario);
}

/* Four-state key. */
html.pw-product-overview .pw-product-scope {
  grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);
  align-items:start;
  background:rgba(255,254,251,.72);
}

html.pw-product-overview .pw-product-scope-key {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}

html.pw-product-overview .pw-product-scope-key span {
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:7px 9px 7px 22px;
  border:1px solid color-mix(in srgb,var(--chip-tone) 30%,var(--border));
  border-radius:12px;
  background:var(--chip-soft);
  color:var(--chip-strong);
  font-size:9px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.045em;
  text-transform:uppercase;
  white-space:normal;
}

html.pw-product-overview .pw-product-scope-key span::before {
  content:"";
  position:absolute;
  left:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--chip-tone);
}

html.pw-product-overview [data-scope-chip="source"] {
  --chip-tone:var(--evidence-source);
  --chip-strong:var(--evidence-source-strong);
  --chip-soft:var(--evidence-source-soft);
}

html.pw-product-overview [data-scope-chip="derived"] {
  --chip-tone:var(--evidence-derived);
  --chip-strong:var(--evidence-derived-strong);
  --chip-soft:var(--evidence-derived-soft);
}

html.pw-product-overview [data-scope-chip="model"] {
  --chip-tone:var(--evidence-model);
  --chip-strong:var(--evidence-model-strong);
  --chip-soft:var(--evidence-model-soft);
}

html.pw-product-overview [data-scope-chip="scenario"] {
  --chip-tone:var(--evidence-scenario);
  --chip-strong:var(--evidence-scenario-strong);
  --chip-soft:var(--evidence-scenario-soft);
}

/* Prevent old topic-tone rules from becoming a second colour language. */
html.pw-product-overview .pw-reference-card[data-tone="gold"]::after,
html.pw-product-overview .pw-reference-card[data-tone="direct"]::after,
html.pw-product-overview .pw-reference-card[data-tone="indirect"]::after {
  background:var(--evidence-tone);
}

@media (max-width:960px) {
  html.pw-product-overview .pw-product-scope {
    grid-template-columns:1fr;
  }

  html.pw-product-overview .pw-product-scope-key {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px) {
  html.pw-product-overview .pw-evidence-badge {
    top:12px;
    right:12px;
    max-width:calc(100% - 24px);
    overflow:hidden;
    text-overflow:ellipsis;
  }

  html.pw-product-overview .pw-product-scope-key {
    grid-template-columns:1fr 1fr;
  }

  html.pw-product-overview .pw-product-scope-key span {
    min-height:42px;
    padding-left:22px;
    text-align:left;
  }
}

@media (prefers-reduced-motion:reduce) {
  html.pw-product-overview .pw-evidence-badge,
  html.pw-product-overview [data-product-evidence] {
    transition:none!important;
  }
}

/* ---- product-color-polish.css ---- */
/* Final colour harmonisation for unified/product.html.
   This layer removes legacy subject-colour styling that competes with the
   evidence-status palette. Non-evidence narrative surfaces stay neutral. */

/* Opportunity-cost / programme-fund column -------------------------------- */
html.pw-product-overview .pw-opportunity-fund {
  border-color: color-mix(in srgb, var(--evidence-scenario) 24%, var(--border));
  background: var(--surface);
  box-shadow: none;
}

html.pw-product-overview .pw-fund-header {
  color: var(--evidence-scenario-strong);
}

html.pw-product-overview .pw-fund-amount,
html.pw-product-overview .pw-mission-percent {
  color: var(--text);
}

html.pw-product-overview .pw-fund-subtitle,
html.pw-product-overview .pw-opportunity-fund .pw-mission-copy {
  color: var(--muted-strong);
}

html.pw-product-overview .pw-fund-bar-label {
  color: var(--evidence-scenario-strong);
}

html.pw-product-overview .pw-fund-bar-label-war {
  color: var(--muted-strong);
}

html.pw-product-overview .pw-fund-bar-wrap {
  background: var(--surface-strong);
}

html.pw-product-overview .pw-fund-bar-peace {
  background: var(--evidence-scenario);
}

html.pw-product-overview .pw-fund-bar-war {
  background: color-mix(in srgb, var(--ink) 24%, var(--surface-strong));
}

html.pw-product-overview .pw-opportunity-fund .pw-mission-card {
  border-top-color: var(--border);
  background: transparent;
}

html.pw-product-overview .pw-opportunity-fund .pw-mission-heading {
  color: var(--text);
}

html.pw-product-overview .pw-opportunity-fund .pw-mission-highlight {
  border-color: color-mix(in srgb, var(--evidence-scenario) 22%, var(--border));
  background: var(--surface-soft);
  box-shadow: none;
}

html.pw-product-overview .pw-mission-impact-title {
  color: var(--evidence-scenario-strong);
}

/* Restore readable light-theme mission details that were inherited from the
   old dark production block. */
html.pw-product-overview .pw-opportunity-fund .pw-mission-primary-copy,
html.pw-product-overview .pw-opportunity-fund .pw-mission-impact-copy,
html.pw-product-overview .pw-opportunity-fund .pw-mission-note {
  color: var(--muted-strong);
}

html.pw-product-overview .pw-opportunity-fund .pw-mission-primary-copy strong,
html.pw-product-overview .pw-opportunity-fund .pw-mission-percent,
html.pw-product-overview .pw-opportunity-fund .pw-mission-impact-heading {
  color: var(--text);
}

html.pw-product-overview .pw-opportunity-fund .pw-mission-impact-highlight {
  color: var(--evidence-scenario-strong);
}

html.pw-product-overview .pw-opportunity-fund .pw-parity-info-sm {
  border-color: var(--border);
  background: var(--surface);
  color: var(--muted-strong);
  box-shadow: none;
}

html.pw-product-overview .pw-opportunity-fund .pw-parity-info-sm:hover,
html.pw-product-overview .pw-opportunity-fund .pw-parity-info-sm[aria-expanded="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

/* CTA is an action, not an evidence class. Keep it neutral and high-contrast. */
html.pw-product-overview .pw-opportunity-fund .pw-mission-cta {
  background: var(--ink);
  color: #f7f8f4;
  box-shadow: none;
  text-shadow: none;
  transform: none;
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

html.pw-product-overview .pw-opportunity-fund .pw-mission-cta:hover,
html.pw-product-overview .pw-opportunity-fund .pw-mission-cta:focus-visible {
  background: #30352f;
  box-shadow: none;
  transform: none;
}

/* Programme values are already explicit. Remove the legacy green wash that
   used to sit behind rows once a benchmark was exceeded. */
html.pw-product-overview .pw-programme.pw-overflow::before,
html.pw-product-overview .pw-programme.pw-overflow-massive::before {
  opacity: 0;
  background: none;
  box-shadow: none;
}

/* Methodology / philosophy ------------------------------------------------- */
html.pw-product-overview .pw-philosophy-section {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}

html.pw-product-overview .pw-philosophy-section .pw-philosophy-copy {
  color: var(--muted-strong);
}

html.pw-product-overview .pw-philosophy-section .pw-philosophy-quote {
  border-inline-start-color: var(--border-strong);
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: none;
}

html.pw-product-overview .pw-philosophy-section .pw-philosophy-source {
  color: var(--muted);
}

/* Dissemination / sharing narrative --------------------------------------- */
html.pw-product-overview .pw-share-section {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}

html.pw-product-overview .pw-share-section .pw-scale-card {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}

html.pw-product-overview .pw-share-section .pw-scale-card::before {
  display: none;
}

html.pw-product-overview .pw-share-section .pw-scale-heading {
  color: var(--muted-strong);
}

html.pw-product-overview .pw-share-section .pw-scale-title {
  color: var(--text);
}

html.pw-product-overview .pw-share-section .pw-scale-item {
  border-color: var(--border);
  background: var(--surface-soft);
  box-shadow: none;
}

html.pw-product-overview .pw-share-section .pw-scale-label {
  color: var(--muted-strong);
}

html.pw-product-overview .pw-share-section .pw-scale-value {
  color: var(--evidence-derived-strong);
}

/* Matte-paper pass ---------------------------------------------------------
   The public preview should read as paper cards, not glass/metal. Keep colour
   as a semantic accent, but remove decorative gradients, glows and relief. */
html.pw-product-overview .pw-economic-section,
html.pw-product-overview .pw-opportunity-section,
html.pw-product-overview .pw-share-section {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}

html.pw-product-overview .pw-hero-counter {
  background: var(--surface);
  box-shadow: none;
}

html.pw-product-overview .pw-counter-main::before {
  display: none;
}

html.pw-product-overview .pw-session-card[data-product-evidence="derived"],
html.pw-product-overview .pw-reference-card[data-product-evidence],
html.pw-product-overview .pw-economic-section .pw-reference-card[data-product-evidence="model"] {
  background: var(--surface);
  box-shadow: none;
}

html.pw-product-overview .pw-scenario-panel[data-product-evidence="scenario"] {
  background: color-mix(in srgb, var(--evidence-scenario-soft) 62%, #fff);
  box-shadow: none;
}

html.pw-product-overview .pw-scenario-range::-webkit-slider-thumb,
html.pw-product-overview .pw-scenario-range::-moz-range-thumb {
  box-shadow: none;
}

html.pw-product-overview .pw-reference-card:hover,
html.pw-product-overview .pw-programme:hover,
html.pw-product-overview .pw-allocation-card:hover {
  box-shadow: none;
}

/* Information controls -----------------------------------------------------
   Legacy dark-theme rules used translucent white borders/backgrounds and
   changed the glyph to white on hover. On paper cards that made the circular
   affordance almost invisible and the "i" itself disappear. */
html.pw-product-overview .pw-parity-info,
html.pw-product-overview .pw-parity-info-sm {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  color: var(--muted-strong);
  opacity: 1;
  box-shadow: none;
  transform: none;
}

html.pw-product-overview .pw-parity-info:hover,
html.pw-product-overview .pw-parity-info:focus-visible,
html.pw-product-overview .pw-parity-info[aria-expanded="true"],
html.pw-product-overview .pw-parity-info-sm:hover,
html.pw-product-overview .pw-parity-info-sm:focus-visible,
html.pw-product-overview .pw-parity-info-sm[aria-expanded="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  opacity: 1;
  transform: none;
  box-shadow: none;
}

html.pw-product-overview .pw-parity-info:focus-visible,
html.pw-product-overview .pw-parity-info-sm:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--evidence-derived) 22%, transparent);
  outline-offset: 2px;
}

/* The main spending card is the one dark surface in Overview. Preserve a
   visible inverse treatment there instead of applying the paper-card button. */
html.pw-product-overview .pw-counter-main .pw-parity-info {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .08);
  color: #d5ddd5;
}

html.pw-product-overview .pw-counter-main .pw-parity-info:hover,
html.pw-product-overview .pw-counter-main .pw-parity-info:focus-visible,
html.pw-product-overview .pw-counter-main .pw-parity-info[aria-expanded="true"] {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
}

/* Mobile keeps the same neutral hierarchy. */
@media (max-width: 600px) {
  html.pw-product-overview .pw-opportunity-fund {
    border-top-color: color-mix(in srgb, var(--evidence-scenario) 24%, var(--border));
    background: transparent;
    box-shadow: none;
  }

  html.pw-product-overview .pw-philosophy-section,
  html.pw-product-overview .pw-share-section {
    border-top-color: var(--border);
    background: transparent;
    box-shadow: none;
  }

  html.pw-product-overview .pw-share-section .pw-scale-card,
  html.pw-product-overview .pw-share-section .pw-scale-item {
    background: transparent;
  }
}


/* Simplified public support block ------------------------------------------
   Keep fundraising separate from the calculator's analytical comparisons.
   RU/EN Overview render this compact editorial support block instead of
   internal budget / reach estimates. */
html.pw-product-overview .pw-support-card .pw-mission-heading::before {
  display: none;
}

html.pw-product-overview .pw-opportunity-fund .pw-support-card .pw-mission-heading {
  margin-bottom: 16px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: none;
}

html.pw-product-overview .pw-support-copy {
  display: grid;
  gap: 12px;
  text-wrap: pretty;
}

html.pw-product-overview .pw-support-copy p {
  margin: 0;
}

html.pw-product-overview .pw-opportunity-fund .pw-support-card .pw-mission-cta {
  margin-top: 24px;
}

@media (max-width: 600px) {
  html.pw-product-overview .pw-opportunity-fund .pw-support-card {
    padding-top: 8px;
  }

  html.pw-product-overview .pw-opportunity-fund .pw-support-card .pw-mission-heading {
    font-size: 21px;
  }

  html.pw-product-overview .pw-support-copy {
    gap: 14px;
  }

  html.pw-product-overview .pw-opportunity-fund .pw-support-card .pw-mission-cta {
    margin-top: 22px;
  }
}

/* ---- product-border-cleanup.css ---- */
/* Final edge cleanup for the Overview paper theme.
   Loaded after the colour/evidence layers so section geometry wins over
   inherited legacy glass/hover effects without changing any data semantics. */

/* The paper theme previously added a short 42px ::before rule to these
   sections. Once the sections gained a real outer border, that decorative
   rule sat directly on the top edge and looked like a broken border. */
html.pw-product-overview .pw-economic-section::before,
html.pw-product-overview .pw-opportunity-section::before,
html.pw-product-overview .pw-share-section::before {
  content: none;
  display: none;
}

/* Keep the large content sections on one simple, continuous paper-card
   treatment. Restore deliberate internal breathing room as well: the paper
   conversion had left padding-top at 0, which made large headings sit against
   the top border. */
html.pw-product-overview .pw-economic-section,
html.pw-product-overview .pw-opportunity-section,
html.pw-product-overview .pw-share-section {
  padding: 40px 40px 42px;
  background: #fcfbf8;
  border: 1px solid #d8d2c8;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(24, 24, 24, .05);
}

html.pw-product-overview .pw-economic-section .pw-reference-card {
  background: #fdfcf9;
  border: 1px solid #ded8cf;
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(24, 24, 24, .03);
}

html.pw-product-overview .pw-economic-section .pw-reference-card:hover {
  border-color: #ded8cf;
  box-shadow: 0 2px 8px rgba(24, 24, 24, .03);
}

html.pw-product-overview .pw-economic-section .pw-reference-card.pw-glow::before {
  display: none;
}

/* The legacy dark theme used a translucent-white unfilled slider track.
   Against the new light paper scenario panel that made the remaining range
   nearly invisible. Keep the selected share green, but render the full track
   with a definite neutral paper-theme rail. */
html.pw-product-overview .pw-scenario-range {
  background:
    linear-gradient(90deg, var(--evidence-scenario, #718a72), var(--evidence-scenario, #718a72)) 0 / var(--rangeFill, 10%) 100% no-repeat,
    #d7d5ce;
  box-shadow: inset 0 0 0 1px rgba(80, 81, 73, .10);
}

html.pw-product-overview .pw-scenario-range:focus-visible {
  outline: 3px solid rgba(113, 138, 114, .18);
  outline-offset: 3px;
}

/* Popovers were still inherited from the old dark calculator theme. Bring
   floating and inline help into the same warm paper system as the cards. */
html.pw-product-overview .pw-parity-popover,
html.pw-product-overview .pw-card-popover {
  padding: 16px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: rgba(255, 254, 251, .98);
  color: var(--muted-strong);
  box-shadow: 0 14px 34px rgba(31, 35, 31, .14);
  backdrop-filter: blur(12px);
  font-size: 12.5px;
  line-height: 1.6;
}

html.pw-product-overview .pw-parity-popover-title,
html.pw-product-overview .pw-card-popover strong {
  margin-bottom: 8px;
  color: var(--text);
  font-weight: 800;
}

html.pw-product-overview .pw-card-popover code {
  color: #526b54;
}

html.pw-product-overview .pw-parity-inline-popover {
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--muted-strong);
  box-shadow: none;
  font-size: 12.5px;
  line-height: 1.6;
}

html.pw-product-overview .pw-parity-inline-popover .pw-parity-popover-title {
  color: var(--text);
}

@media (max-width: 620px) {
  html.pw-product-overview .pw-economic-section,
  html.pw-product-overview .pw-opportunity-section,
  html.pw-product-overview .pw-share-section {
    padding: 28px 18px 24px;
    border-radius: 24px;
    box-shadow: 0 5px 18px rgba(24, 24, 24, .04);
  }
}

/* ---- product-council-fixes.css ---- */
/* Council cleanup: preview chrome, evidence accessibility, controls, and legacy remnants. */

/* Preview controls should read as utility chrome, not as a full-width content card. */
html.pw-product-overview .pw-preview-banner {
  position: static;
  display: flex;
  width: max-content;
  max-width: 100%;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: 0 0 38px auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 1;
}
html.pw-product-overview .pw-preview-banner > div { display: none; }
html.pw-product-overview .pw-preview-banner .pw-product-tabs,
html.pw-product-overview .pw-preview-banner .pw-preview-language { margin: 0; }

/* Small editorial/status labels should be compact rounded rectangles, not
   stretched capsules. Navigation tabs remain pills because they are controls. */
html.pw-product-overview .pw-hero-subtitle {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  border-radius: 8px;
}
html.pw-product-overview .pw-evidence-badge {
  border-radius: 8px;
}
html.pw-product-overview .pw-product-scope-key span {
  border-radius: 8px;
}

/* The evidence key belongs to the article flow after the introduction. */
html.pw-product-overview .pw-product-scope {
  margin: 20px 0 0;
}
html.pw-product-overview .pw-product-scope + .pw-time-controls {
  margin-top: 24px;
}

html.pw-product-overview .pw-counter-main[data-product-evidence]::after,
html.pw-product-overview .pw-session-card[data-product-evidence]::after,
html.pw-product-overview .pw-scenario-panel[data-product-evidence]::after {
  content: none;
  display: none;
}
html.pw-product-overview .pw-evidence-badge {
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: .05em;
}

/* Evidence status is the only colour language on evidence cards. Legacy topic
   colours on label IDs and masked icons must not compete with the badge/top rule. */
html.pw-product-overview .pw-reference-card[data-product-evidence] .pw-reference-card-label {
  color: var(--evidence-tone-strong) !important;
}
html.pw-product-overview .pw-reference-card[data-product-evidence] .pw-reference-card-label::before {
  color: currentColor !important;
  background: currentColor !important;
}
html.pw-product-overview .pw-reference-card[data-product-evidence]:hover .pw-reference-card-label::before {
  transform: none;
  filter: none;
}
html.pw-product-overview .pw-session-card[data-product-evidence="derived"] .pw-session-title {
  color: var(--evidence-derived-strong) !important;
}
html.pw-product-overview .pw-session-card[data-product-evidence="derived"] .pw-session-title::before {
  color: currentColor !important;
  background: currentColor !important;
}

/* The legacy live-session food/health/poverty equivalents have no reviewed
   source contract yet. Keep the verified live spending counter, but do not
   publish those unit-cost conversions in the product Overview. */
html.pw-product-overview .pw-session-alt-title,
html.pw-product-overview .pw-session-equivalents {
  display: none !important;
}

html.pw-product-overview .pw-scenario-range {
  height: 32px;
  margin-block: 2px;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background-color: transparent;
  background:
    linear-gradient(90deg, var(--evidence-scenario-strong, #3f6047), var(--evidence-scenario-strong, #3f6047)) left center / var(--rangeFill, 10%) 8px no-repeat,
    linear-gradient(#d7d5ce, #d7d5ce) left center / 100% 8px no-repeat;
}
html.pw-product-overview .pw-share-track { display: none; }

/* Vendor slider pseudos are deliberately split: grouping WebKit and Gecko
   pseudos can invalidate the whole rule in some engines, leaving the old neon glow. */
html.pw-product-overview .pw-scenario-range::-webkit-slider-thumb {
  background: var(--evidence-scenario, #55745c);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(31, 35, 31, .18);
}
html.pw-product-overview .pw-scenario-range::-moz-range-thumb {
  background: var(--evidence-scenario, #55745c);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(31, 35, 31, .18);
}
html.pw-product-overview .pw-scenario-range::-webkit-slider-thumb:active {
  transform: scale(1.05);
}
html.pw-product-overview .pw-scenario-chip.pw-active {
  box-shadow: none;
}

html.pw-product-overview select:focus-visible,
html.pw-product-overview input:not(.pw-scenario-range):focus-visible,
html.pw-product-overview button:focus-visible,
html.pw-product-overview a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: none;
}

html.pw-product-overview .pw-scenario-range:focus,
html.pw-product-overview .pw-scenario-range:focus-visible {
  border: 0;
  outline: none;
  box-shadow: none;
}

html.pw-product-overview .pw-scenario-range:focus:not(:focus-visible) {
  border: 0;
  outline: none;
  box-shadow: none;
}

html.pw-product-overview .pw-scenario-range:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 1px rgba(31, 35, 31, .18),
    0 0 0 4px rgba(82, 107, 84, .20);
}

html.pw-product-overview .pw-scenario-range:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 1px rgba(31, 35, 31, .18),
    0 0 0 4px rgba(82, 107, 84, .20);
}

html.pw-product-overview #lifeYearsLabel {
  color: var(--evidence-tone-strong) !important;
}

html.pw-product-overview .pw-parity-info {
  width: 26px !important;
  min-width: 26px;
  height: 26px !important;
  min-height: 26px;
}
html.pw-product-overview .pw-parity-info-sm {
  min-width: 24px;
  min-height: 24px;
}

/* The Overview must expose its methodology and source links. The legacy
   visual-finish layer hides this diagnostics surface; in the product Overview
   it is public explanatory content, not debug UI. */
html.pw-product-overview .pw-method {
  display: block !important;
  margin-top: 32px;
}
html.pw-product-overview .pw-method summary {
  cursor: pointer;
}

html.pw-product-overview .pw-period-method-note {
  max-width: 760px;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted, #66645f);
}
html.pw-product-overview .pw-period-method-note[hidden] {
  display: none;
}

@media (max-width: 620px) {
  html.pw-product-overview .pw-preview-banner {
    width: 100%;
    justify-content: flex-end;
    margin-bottom: 28px;
  }

  html.pw-product-overview .pw-product-scope {
    margin-top: 16px;
  }

  html.pw-product-overview .pw-product-scope + .pw-time-controls {
    margin-top: 20px;
  }
}

/* ---- product-info-controls.css ---- */
/* Overview info controls must remain true circles regardless of inherited button styles. */
html.pw-product-overview .pw-parity-info,
html.pw-product-overview .pw-parity-info-sm {
  box-sizing: border-box;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}

html.pw-product-overview .pw-parity-info {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
}

html.pw-product-overview .pw-parity-info-sm {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

/* ---- product-typography-layout.css ---- */
/* Overview typography and contextual info-control polish.
   Keeps the paper/evidence system intact while improving legibility and hierarchy. */

/* Text rendering: keep the compact editorial feel, but stop large display type
   from visually colliding at normal desktop zoom. */
html.pw-product-overview body {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

html.pw-product-overview h1 {
  letter-spacing: -.035em;
}

html.pw-product-overview h2 {
  letter-spacing: -.024em;
}

html.pw-product-overview .pw-counter-value {
  letter-spacing: -.042em;
}

html.pw-product-overview .pw-session-value {
  letter-spacing: -.026em;
}

html.pw-product-overview .pw-reference-card-value,
html.pw-product-overview .pw-card-value {
  letter-spacing: -.028em;
}

html.pw-product-overview .pw-lead,
html.pw-product-overview .pw-section-intro,
html.pw-product-overview .pw-reference-card-desc,
html.pw-product-overview .pw-session-note,
html.pw-product-overview .pw-session-equivalents,
html.pw-product-overview .pw-product-scope p {
  letter-spacing: .006em;
}

/* Metric names should outrank the evidence chip. This applies both to the three
   headline indicators and to the illustrative economic cards. Icons scale with
   the label because they are em-sized. */
html.pw-product-overview .pw-reference-card-label,
html.pw-product-overview .pw-card-label {
  font-size: 12px;
  font-weight: 820;
  line-height: 1.32;
  letter-spacing: .062em;
}

html.pw-product-overview .pw-reference-card .pw-parity-label-row {
  align-items: center;
  gap: 12px;
}

html.pw-product-overview .pw-reference-card .pw-parity-label-row > .pw-reference-card-label {
  flex: 1 1 auto;
}

html.pw-product-overview .pw-reference-card .pw-parity-label-row > .pw-parity-info {
  flex: 0 0 26px;
  margin-inline-start: 8px;
}

/* The hero methodology info belongs to the paragraph it explains, not to the
   evidence legend below it. Keep it inline at the end of the intro copy. */
html.pw-product-overview .pw-hero-info-row {
  display: block;
  max-width: 860px;
}

html.pw-product-overview .pw-hero-info-row .pw-lead {
  display: inline;
}

html.pw-product-overview .pw-hero-info-row > .pw-parity-info {
  display: inline-flex;
  vertical-align: text-bottom;
  margin-inline-start: 7px;
  transform: translateY(1px);
}

/* Keep the other contextual info controls visually attached to their labels. */
html.pw-product-overview .pw-scenario-title-row,
html.pw-product-overview .pw-counter-value-row {
  align-items: center;
}

@media (max-width: 620px) {
  html.pw-product-overview h1 { letter-spacing: -.026em; }
  html.pw-product-overview h2 { letter-spacing: -.018em; }
  html.pw-product-overview .pw-reference-card-label,
  html.pw-product-overview .pw-card-label {
    font-size: 11px;
    letter-spacing: .055em;
  }
}

/* ---- product-counter-fit.css ---- */
/* Overview-only fit for long headline monetary values.
   Keep the number dominant, shrink the localized unit, and scale only genuinely
   long values so lifetime/since-1945 modes never spill outside the hero card. */

html.pw-product-overview .pw-counter-value.pw-counter-fit {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: .13em;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  transition: font-size .18s ease, letter-spacing .18s ease;
}

html.pw-product-overview .pw-counter-amount {
  min-width: 0;
  flex: 0 1 auto;
}

html.pw-product-overview .pw-counter-unit {
  flex: 0 0 auto;
  font-size: .56em;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.005em;
  opacity: .94;
}

html.pw-product-overview .pw-counter-value--dense {
  font-size: clamp(52px, 5.8vw, 64px);
  letter-spacing: -.035em;
}

html.pw-product-overview .pw-counter-value--very-dense {
  font-size: clamp(46px, 5.2vw, 58px);
  letter-spacing: -.028em;
}

@media (max-width: 620px) {
  html.pw-product-overview .pw-counter-unit {
    font-size: .6em;
  }

  html.pw-product-overview .pw-counter-value--dense {
    font-size: clamp(36px, 10.5vw, 48px);
  }

  html.pw-product-overview .pw-counter-value--very-dense {
    font-size: clamp(32px, 9.4vw, 43px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.pw-product-overview .pw-counter-value.pw-counter-fit {
    transition: none;
  }
}

/* ---- product-header-controls.css ---- */
/* Shared product chrome for Overview and Details.
   View navigation and language selection must read as one stable interface. */

html.pw-product-overview .pw-product-chrome,
html.pw-product-details .pw-product-chrome {
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 32px auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 1;
  position: static;
  inset: auto;
  z-index: 40;
}

/* Preview/lab labels are environment metadata, not public product navigation. */
html.pw-product-overview .pw-product-chrome > div:first-child:not(.pw-product-view-switch),
html.pw-product-details .pw-product-chrome > .tag {
  display: none !important;
}

html.pw-product-overview .pw-product-view-switch,
html.pw-product-details .pw-product-view-switch {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 40px;
  margin: 0;
  padding: 3px;
  border: 1px solid #d8d4ca;
  border-radius: 999px;
  background: rgba(255, 254, 251, .96);
  box-shadow: 0 1px 0 rgba(24, 26, 23, .025);
  position: static;
}

html.pw-product-overview .pw-product-view-switch a,
html.pw-product-details .pw-product-view-switch a,
html.pw-product-details .pw-product-view-switch button {
  display: inline-flex;
  min-width: 82px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #505149;
  font: 750 12px/1.2 Inter, system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

html.pw-product-overview .pw-product-view-switch a:hover,
html.pw-product-details .pw-product-view-switch a:hover,
html.pw-product-details .pw-product-view-switch button:hover {
  background: #eeece5;
  color: #181a17;
}

html.pw-product-overview .pw-product-view-switch [aria-current="page"],
html.pw-product-details .pw-product-view-switch [aria-current="page"],
html.pw-product-details .pw-product-view-switch .active {
  background: #1f231f;
  color: #fff;
}

html.pw-product-overview .pw-product-language,
html.pw-product-details .pw-product-language {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: 0;
}

html.pw-product-overview .pw-product-language > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html.pw-product-overview .pw-product-language select,
html.pw-product-details .pw-product-language select {
  width: auto;
  min-width: 112px;
  max-width: 170px;
  min-height: 40px;
  height: 40px;
  margin: 0;
  padding: 7px 31px 7px 13px;
  border: 1px solid #c9c4b8;
  border-radius: 999px;
  background-color: #fffefb;
  color: #181a17;
  box-shadow: 0 1px 0 rgba(24, 26, 23, .025);
  font: 700 12px/1.2 Inter, system-ui, sans-serif;
  cursor: pointer;
}

html.pw-product-overview .pw-product-view-switch a:focus-visible,
html.pw-product-details .pw-product-view-switch a:focus-visible,
html.pw-product-details .pw-product-view-switch button:focus-visible,
html.pw-product-overview .pw-product-language select:focus-visible,
html.pw-product-details .pw-product-language select:focus-visible {
  outline: 2px solid #1f231f;
  outline-offset: 3px;
  box-shadow: none;
}

/* Match the product frame before the two views diverge into their own content density. */
html.pw-product-details main {
  width: min(1180px, calc(100% - 36px));
  padding-top: 24px;
}

html.pw-product-details .masthead {
  padding-top: 0;
}

html.pw-product-details .masthead > h1 {
  margin-top: 0;
}

@media (max-width: 620px) {
  html.pw-product-overview .pw-product-chrome,
  html.pw-product-details .pw-product-chrome {
    width: 100%;
    gap: 6px;
    margin-bottom: 26px;
  }

  html.pw-product-overview .pw-product-view-switch,
  html.pw-product-details .pw-product-view-switch {
    flex: 1 1 auto;
    min-width: 0;
  }

  html.pw-product-overview .pw-product-view-switch a,
  html.pw-product-details .pw-product-view-switch a,
  html.pw-product-details .pw-product-view-switch button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 9px;
  }

  html.pw-product-overview .pw-product-language select,
  html.pw-product-details .pw-product-language select {
    min-width: 104px;
    max-width: 122px;
  }

  html.pw-product-details main {
    width: calc(100% - 30px);
    padding-top: 16px;
  }
}


/* Keep both views reachable after the header switch scrolls away.
   The floating control is intentionally smaller and quieter than the header control. */
html.pw-product-overview .pw-product-floating-switch,
html.pw-product-details .pw-product-floating-switch {
  position: fixed;
  top: 50%;
  right: -48px;
  z-index: 90;
  width: auto;
  min-height: 0;
  flex-direction: row;
  gap: 2px;
  padding: 3px;
  border-color: rgba(201, 196, 184, .82);
  border-radius: 999px;
  background: rgba(255, 254, 251, .92);
  box-shadow: 0 6px 20px rgba(24, 26, 23, .07);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transform-origin: center center;
  transform: translateY(-50%) rotate(90deg) scale(.97);
  transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease;
}

html.pw-product-overview .pw-product-floating-switch.is-visible,
html.pw-product-details .pw-product-floating-switch.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) rotate(90deg) scale(1);
}

html.pw-product-overview .pw-product-floating-switch a,
html.pw-product-details .pw-product-floating-switch a,
html.pw-product-details .pw-product-floating-switch button {
  min-width: 64px;
  min-height: 28px;
  padding: 5px 9px;
  font-size: 10.5px;
  font-weight: 760;
}

html.pw-product-overview .pw-product-floating-switch:hover,
html.pw-product-details .pw-product-floating-switch:hover {
  box-shadow: 0 9px 26px rgba(24, 26, 23, .09);
}

@media (max-width: 980px) {
  html.pw-product-overview .pw-product-floating-switch,
  html.pw-product-details .pw-product-floating-switch {
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 20px);
    transform: translate(-50%, 10px) scale(.98);
  }

  html.pw-product-overview .pw-product-floating-switch.is-visible,
  html.pw-product-details .pw-product-floating-switch.is-visible {
    transform: translate(-50%, 0) scale(1);
  }

  html.pw-product-overview .pw-product-floating-switch a,
  html.pw-product-details .pw-product-floating-switch a,
  html.pw-product-details .pw-product-floating-switch button {
    min-width: 78px;
    min-height: 30px;
    padding-inline: 10px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.pw-product-overview .pw-product-floating-switch,
  html.pw-product-details .pw-product-floating-switch {
    transition: none;
  }
}


/* Embedded Tilda pages have one owner for product chrome: the parent page.
   Hide only duplicate navigation/language chrome. The live session counter is
   part of the calculator's opening story and must remain visible in embed mode. */
html.pw-product-overview.pw-embed-mode .pw-product-chrome,
html.pw-product-details.pw-embed-mode .pw-product-chrome,
html.pw-product-overview.pw-embed-mode .pw-product-floating-switch,
html.pw-product-details.pw-embed-mode .pw-product-floating-switch {
  display: none !important;
  margin: 0 !important;
}

/* ---- product-overview-accents.css ---- */
/* Expressive accent layer for Overview only.
   The analytical Details view intentionally stays restrained. */

html.pw-product-overview {
  --overview-finance: #4f7896;
  --overview-finance-soft: #eef4f8;
  --overview-direct: #d45f6d;
  --overview-direct-soft: #fbf0f2;
  --overview-indirect: #d78a31;
  --overview-indirect-soft: #fbf3e8;
  --overview-model: #b67c22;
  --overview-model-strong: #805718;
  --overview-model-soft: #fbf3e3;
  --overview-scenario: #5d8065;
  --overview-scenario-soft: #eff5f0;

  /* Topic accents for the illustrative economic trio. */
  --overview-infrastructure: #b67c22;
  --overview-infrastructure-strong: #805718;
  --overview-life-years: #a35f80;
  --overview-life-years-strong: #77445d;
  --overview-total-loss: #4f837d;
  --overview-total-loss-strong: #37645f;

  /* Clearer ochre for model/estimate evidence chips throughout Overview. */
  --evidence-model: var(--overview-model);
  --evidence-model-strong: var(--overview-model-strong);
  --evidence-model-soft: var(--overview-model-soft);
}

/* Overview icon grammar ---------------------------------------------------- */
html.pw-product-overview .pw-reference-card-label::before {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-inline-end: 10px;
}

html.pw-product-overview .pw-programme-name::before {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-inline-end: 10px;
}

html.pw-product-overview .pw-reference-card:hover .pw-reference-card-label::before,
html.pw-product-overview .pw-programme:hover .pw-programme-name::before {
  transform: scale(1.05);
  filter: none;
}

/* The three headline metrics get topic accents. Evidence status remains
   explicit in the separate evidence badge, so the accent can serve scanning. */
html.pw-product-overview #personalBurdenLabel {
  color: var(--overview-finance);
}
html.pw-product-overview #personalBurdenLabel::before {
  color: var(--overview-finance) !important;
  background: var(--overview-finance) !important;
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cellipse%20cx='12'%20cy='6'%20rx='7'%20ry='3'/%3E%3Cpath%20d='M5%206v5c0%201.7%203.1%203%207%203s7-1.3%207-3V6'/%3E%3Cpath%20d='M5%2011v5c0%201.7%203.1%203%207%203s7-1.3%207-3v-5'/%3E%3C/svg%3E");
}

html.pw-product-overview #directLabel {
  color: var(--overview-direct);
}
html.pw-product-overview #directLabel::before {
  color: var(--overview-direct) !important;
  background: var(--overview-direct) !important;
}

html.pw-product-overview #indirectLabel {
  color: var(--overview-indirect);
}
html.pw-product-overview #indirectLabel::before {
  color: var(--overview-indirect) !important;
  background: var(--overview-indirect) !important;
  --pw-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='8'%20r='3'/%3E%3Ccircle%20cx='17'%20cy='9'%20r='2.5'/%3E%3Cpath%20d='M3%2020v-1a6%206%200%200%201%2012%200v1'/%3E%3Cpath%20d='M14%2015a5%205%200%200%201%207%204v1'/%3E%3C/svg%3E");
}

html.pw-product-overview .pw-reference-card:has(#personalBurdenLabel) {
  border-color: color-mix(in srgb, var(--overview-finance) 34%, var(--border));
}
html.pw-product-overview .pw-reference-card:has(#personalBurdenLabel)::after {
  background: var(--overview-finance);
}

html.pw-product-overview .pw-reference-card:has(#directLabel) {
  border-color: color-mix(in srgb, var(--overview-direct) 32%, var(--border));
}
html.pw-product-overview .pw-reference-card:has(#directLabel)::after {
  background: var(--overview-direct);
}

html.pw-product-overview .pw-reference-card:has(#indirectLabel) {
  border-color: color-mix(in srgb, var(--overview-indirect) 34%, var(--border));
}
html.pw-product-overview .pw-reference-card:has(#indirectLabel)::after {
  background: var(--overview-indirect);
}

/* Illustrative economic evaluation remains a model/estimate zone at section
   level, while each metric gets its own topic accent for faster scanning. */
html.pw-product-overview .pw-economic-section {
  border-top-color: color-mix(in srgb, var(--overview-model) 58%, var(--border));
}

html.pw-product-overview .pw-economic-section .pw-reference-card:has(#infrastructureLabel) {
  border-color: color-mix(in srgb, var(--overview-infrastructure) 34%, var(--border));
}
html.pw-product-overview .pw-economic-section .pw-reference-card:has(#infrastructureLabel)::after {
  background: var(--overview-infrastructure);
}
html.pw-product-overview #infrastructureLabel {
  color: var(--overview-infrastructure-strong);
}
html.pw-product-overview #infrastructureLabel::before {
  color: var(--overview-infrastructure) !important;
  background: var(--overview-infrastructure) !important;
}

html.pw-product-overview .pw-economic-section .pw-reference-card:has(#lifeYearsLabel) {
  border-color: color-mix(in srgb, var(--overview-life-years) 32%, var(--border));
}
html.pw-product-overview .pw-economic-section .pw-reference-card:has(#lifeYearsLabel)::after {
  background: var(--overview-life-years);
}
html.pw-product-overview #lifeYearsLabel {
  color: var(--overview-life-years-strong);
}
html.pw-product-overview #lifeYearsLabel::before {
  color: var(--overview-life-years) !important;
  background: var(--overview-life-years) !important;
}

html.pw-product-overview .pw-economic-section .pw-reference-card:has(#economicLossLabel) {
  border-color: color-mix(in srgb, var(--overview-total-loss) 34%, var(--border));
}
html.pw-product-overview .pw-economic-section .pw-reference-card:has(#economicLossLabel)::after {
  background: var(--overview-total-loss);
}
html.pw-product-overview #economicLossLabel {
  color: var(--overview-total-loss-strong);
}
html.pw-product-overview #economicLossLabel::before {
  color: var(--overview-total-loss) !important;
  background: var(--overview-total-loss) !important;
}

/* Scenario area stays solution-oriented green without tinting large values. */
html.pw-product-overview .pw-scenario-panel {
  border-color: color-mix(in srgb, var(--overview-scenario) 32%, var(--border));
}

html.pw-product-overview .pw-scenario-head,
html.pw-product-overview .pw-fund-header,
html.pw-product-overview .pw-fund-bar-label,
html.pw-product-overview .pw-mission-impact-title {
  color: var(--overview-scenario);
}

/* The scenario control is a primary interaction, not fine print. */
html.pw-product-overview .pw-scenario-head span {
  max-width: min(72%, 720px);
  color: var(--text);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: 0;
}
@media (max-width: 640px) {
  html.pw-product-overview .pw-scenario-head span {
    max-width: 70%;
    font-size: 14px;
    line-height: 1.32;
  }
}

/* Programme icons are the small colourful wayfinding points. Text stays dark. */
html.pw-product-overview .pw-programme-name {
  color: var(--text);
}
html.pw-product-overview .pw-programme-name::before {
  background: var(--programme-accent, var(--overview-scenario)) !important;
  color: var(--programme-accent, var(--overview-scenario)) !important;
}
html.pw-product-overview .pw-programme[data-programme="education"] { --programme-accent: #557da3; }
html.pw-product-overview .pw-programme[data-programme="hunger"] { --programme-accent: #c78b30; }
html.pw-product-overview .pw-programme[data-programme="health"] { --programme-accent: #ca6470; }
html.pw-product-overview .pw-programme[data-programme="water"] { --programme-accent: #4d8b8c; }
html.pw-product-overview .pw-programme[data-programme="electricity"] { --programme-accent: #d09a32; }
html.pw-product-overview .pw-programme[data-programme="internet"] { --programme-accent: #667eab; }
html.pw-product-overview .pw-programme[data-programme="climate"] { --programme-accent: #5d8065; }
html.pw-product-overview .pw-programme[data-programme="schools"] { --programme-accent: #ad7a28; }

/* Keep labels readable beside larger icons and evidence controls. */
html.pw-product-overview .pw-reference-card .pw-parity-label-row {
  min-height: 28px;
}

@media (max-width: 620px) {
  html.pw-product-overview .pw-reference-card-label::before {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    margin-inline-end: 8px;
  }

  html.pw-product-overview .pw-programme-name::before {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    margin-inline-end: 8px;
  }
}


/* Mobile system pass: the first demographic metrics now use the same nested
   paper-card rhythm as the illustrative economic section instead of stretching
   edge-to-edge as unrelated full-width cards. */
@media (max-width: 620px) {
  html.pw-product-overview h1 {
    margin-inline: 2px;
    font-size: clamp(44px, 13vw, 56px);
    line-height: .96;
  }

  html.pw-product-overview .pw-live-fact,
  html.pw-product-overview .pw-lead,
  html.pw-product-overview .pw-time-controls {
    margin-inline: 8px;
  }

  html.pw-product-overview .pw-hero > .pw-reference-grid {
    margin: 28px 0 0;
    padding: 16px;
    gap: 10px;
    border: 1px solid #d8d2c8;
    border-radius: 24px;
    background: #fcfbf8;
    box-shadow: 0 5px 18px rgba(24, 24, 24, .04);
  }

  html.pw-product-overview .pw-hero > .pw-reference-grid .pw-reference-card {
    min-height: 0;
    padding: 46px 16px 16px;
    border-radius: 20px;
  }

  html.pw-product-overview .pw-economic-section .pw-reference-grid {
    gap: 10px;
  }

  html.pw-product-overview .pw-economic-section .pw-reference-card {
    min-height: 0;
    padding: 46px 16px 16px;
    border-radius: 20px;
  }

  html.pw-product-overview .pw-reference-card-value {
    font-size: clamp(32px, 9vw, 38px);
  }

  html.pw-product-overview .pw-reference-card-desc {
    font-size: 11.5px;
    line-height: 1.48;
  }

  html.pw-product-overview .pw-economic-section,
  html.pw-product-overview .pw-opportunity-section,
  html.pw-product-overview .pw-share-section {
    padding: 26px 16px 22px;
  }
}


/* Final mobile first-screen pass: keep the opening composition inset and calm
   without changing the card system used lower on the page. */
@media (max-width: 620px) {
  html.pw-product-overview h1 {
    margin-inline: 12px;
    max-width: calc(100% - 24px);
    font-size: clamp(42px, 11.8vw, 52px);
    line-height: .98;
    letter-spacing: -.034em;
  }

  html.pw-product-overview .pw-hero-subtitle {
    margin-inline: 12px;
    margin-top: 18px;
  }

  html.pw-product-overview .pw-live-fact,
  html.pw-product-overview .pw-lead,
  html.pw-product-overview .pw-time-controls {
    margin-inline: 12px;
  }

  html.pw-product-overview .pw-live-fact {
    margin-top: 22px;
    font-size: 14.5px;
    line-height: 1.45;
  }

  html.pw-product-overview .pw-hero-counter {
    margin: 28px 8px 24px;
    padding: 6px;
    border-radius: 22px;
  }

  html.pw-product-overview .pw-counter-main {
    min-height: 0;
    padding: 58px 22px 28px;
    border-radius: 17px;
  }

  html.pw-product-overview .pw-counter-value {
    font-size: clamp(44px, 12.6vw, 58px);
    line-height: .94;
  }

  html.pw-product-overview .pw-counter-caption {
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.48;
  }
}


/* Mobile opening text column. The lead copy is wrapped in .pw-hero-info-row,
   so margin on the inline .pw-lead itself does not create a usable gutter.
   Put every non-card opening element on one consistent 16px content line. */
@media (max-width: 620px) {
  html.pw-product-overview h1,
  html.pw-product-overview .pw-hero-subtitle,
  html.pw-product-overview .pw-live-fact,
  html.pw-product-overview .pw-hero-info-row,
  html.pw-product-overview .pw-time-controls {
    margin-left: 16px;
    margin-right: 16px;
    max-width: calc(100% - 32px);
  }

  html.pw-product-overview h1 {
    font-size: clamp(41px, 11.2vw, 50px);
    line-height: 1;
  }

  html.pw-product-overview .pw-hero-info-row {
    width: calc(100% - 32px);
  }

  html.pw-product-overview .pw-hero-info-row .pw-lead {
    font-size: 15.5px;
    line-height: 1.58;
  }

  html.pw-product-overview .pw-hero-info-row > .pw-parity-info {
    margin-inline-start: 5px;
  }

  html.pw-product-overview .pw-time-controls {
    width: calc(100% - 32px);
  }
}


/* Public Overview card-face rule: the metric itself leads. Provenance, model
   assumptions, and source details live behind the info control / Details view. */
html.pw-product-overview .pw-reference-card > .pw-evidence-badge {
  display: none;
}

html.pw-product-overview .pw-reference-card {
  padding-top: 24px;
}

@media (max-width: 620px) {
  html.pw-product-overview .pw-hero > .pw-reference-grid .pw-reference-card,
  html.pw-product-overview .pw-economic-section .pw-reference-card {
    padding-top: 18px;
  }
}


/* Live-first opening stage -------------------------------------------------
   Keep the annual scale and the live "while viewing" counter in one visual
   field on desktop-sized Tilda embeds. The live card must not drop below the
   fold merely because browser zoom reduces the iframe below 960 CSS px. */
html.pw-product-overview .pw-counter-main > .pw-evidence-badge,
html.pw-product-overview .pw-session-card > .pw-evidence-badge {
  display: none;
}

html.pw-product-overview .pw-session-card {
  isolation: isolate;
}

html.pw-product-overview .pw-session-head time {
  padding: 5px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--overview-direct) 9%, transparent);
  font-variant-numeric: tabular-nums;
}

html.pw-product-overview .pw-session-title::before {
  animation: pw-overview-live-pulse 1.8s ease-in-out infinite;
}

@keyframes pw-overview-live-pulse {
  0%, 100% { opacity: .58; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.06); }
}

@media (min-width: 621px) {
  html.pw-product-overview .pw-hero-counter {
    gap: 10px;
    padding: 8px;
    align-items: stretch;
  }

  html.pw-product-overview .pw-counter-main {
    min-height: 288px;
    padding: 34px 34px 30px;
  }

  html.pw-product-overview .pw-counter-value {
    font-size: clamp(68px, 8.2vw, 112px);
  }

  html.pw-product-overview .pw-counter-unit {
    font-size: .5em;
    opacity: .88;
  }

  html.pw-product-overview .pw-session-card {
    min-height: 288px;
    padding: 38px 20px 22px;
    justify-content: center;
  }

  html.pw-product-overview .pw-session-value {
    margin-top: 16px;
    font-size: clamp(38px, 4.5vw, 52px);
    line-height: .96;
  }
}

/* At common 125%/150% desktop zoom levels the Tilda iframe often lands in
   this range. Keep both numbers side by side here; stack only on true tablet
   and mobile widths. */
@media (min-width: 780px) and (max-width: 960px) {
  html.pw-product-overview .pw-hero-counter {
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, .7fr);
  }

  html.pw-product-overview .pw-counter-main,
  html.pw-product-overview .pw-session-card {
    min-height: 274px;
  }

  html.pw-product-overview .pw-counter-main {
    padding: 32px 30px 28px;
  }

  html.pw-product-overview .pw-session-card {
    padding: 34px 18px 20px;
  }

  html.pw-product-overview .pw-session-note {
    white-space: normal;
  }
}

@media (min-width: 961px) {
  html.pw-product-overview .pw-hero-counter {
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, .65fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.pw-product-overview .pw-session-title::before {
    animation: none;
  }
}


/* Mobile narrative order: live session first --------------------------------
   On phones the live "while viewing" card is the first card in the opening
   calculator stage. The annual 2025 total follows immediately after it.
   This keeps the session clock semantically tied to page entry; no observer,
   delayed start, or second clock is introduced. */
@media (max-width: 620px) {
  html.pw-product-overview .pw-session-card {
    order: -1;
  }

  html.pw-product-overview .pw-counter-main {
    order: 0;
  }
}


/* Embedded opening breathing room ------------------------------------------
   Tilda's site header already establishes the page chrome. Give the embedded
   product a deliberate visual pause before the large title instead of letting
   the first line sit directly against the header edge. */
html.pw-product-overview.pw-embed-mode .pw-shell {
  padding-top: clamp(28px, 3vw, 40px);
}

@media (max-width: 620px) {
  html.pw-product-overview.pw-embed-mode .pw-shell {
    padding-top: 18px;
  }
}

/* ---- peace-investment.css ---- */
html.pw-product-overview .pig-preview {
      margin: 18px 0 34px;
      padding: clamp(20px, 3vw, 34px);
      border: 1px solid #d9d9cf;
      border-radius: 25px;
      background: #fbfaf6;
      color: #222820;
      box-shadow: 0 8px 28px rgba(22,27,21,.035);
      scroll-margin-top: 30px;
    }
    html.pw-product-overview .pig-preview * { box-sizing: border-box; }
    html.pw-product-overview .pig-preview [hidden] { display:none!important; }
    html.pw-product-overview .pig-head { display:flex; align-items:start; justify-content:space-between; flex-wrap:wrap; column-gap:22px; row-gap:10px; margin-bottom:24px; }
    html.pw-product-overview .pig-head-main { flex: 1 1 480px; }
    html.pw-product-overview .pig-eyebrow { margin:0 0 11px; font-size:11px; line-height:1.5; font-weight:780; letter-spacing:.09em; text-transform:uppercase; color:#6d876e; }
    html.pw-product-overview .pig-title { color:#222820; font:800 clamp(27px,3.6vw,44px)/1.09 Inter,system-ui,sans-serif; letter-spacing:-.043em; margin:0 0 12px; text-transform:none; }
    html.pw-product-overview .pig-intro { color:#5c645b; font-size:15px; line-height:1.62; max-width:730px; margin:0; }
    html.pw-product-overview .pig-preview-tag { display:inline-flex; border:1px solid #cdd7cc; border-radius:999px; padding:7px 11px; background:#eef3ed; color:#4e6951; font-size:10px; font-weight:760; line-height:1.2; letter-spacing:.025em; white-space:nowrap; }
    html.pw-product-overview .pig-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.83fr); gap:13px; }
    html.pw-product-overview .pig-data-card, html.pw-product-overview .pig-limits-card { min-width:0; border:1px solid #deded5; border-radius:19px; padding:clamp(18px,2.2vw,27px); background:#fffefa; }
    html.pw-product-overview .pig-data-card { border-top:3px solid #66816b; }
    html.pw-product-overview .pig-limits-card { background:#f3f5f1; }
    html.pw-product-overview .pig-small { color:#586358; font:750 10px/1.45 Inter,system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; margin:0 0 10px; }
    html.pw-product-overview .pig-value { display:block; font:820 clamp(38px,5vw,64px)/1.05 Inter,system-ui,sans-serif; letter-spacing:-.055em; color:#263b2d; margin:2px 0 9px; }
    html.pw-product-overview .pig-caption { font:450 13px/1.55 Inter,system-ui,sans-serif; color:#59625a; margin:0; }
    html.pw-product-overview .pig-scale { display:flex; align-items:center; gap:17px; margin-top:23px; padding:19px 0 0; border-top:1px solid #e1e5dd; }
    html.pw-product-overview .pig-line { flex:0 0 36px; width:36px; height:2px; background:#86a18b; }
    html.pw-product-overview .pig-scale-number { font:800 clamp(28px,3.2vw,39px)/1.03 Inter,system-ui,sans-serif; letter-spacing:-.04em; color:#263b2d; margin:0 0 7px; }
    html.pw-product-overview .pig-limit-heading { font:770 clamp(20px,2.4vw,28px)/1.16 Inter,system-ui,sans-serif; letter-spacing:-.025em; color:#263b2d; margin:9px 0 14px; }
    html.pw-product-overview .pig-limit-copy { font:450 14px/1.63 Inter,system-ui,sans-serif; color:#586359; margin:0; }
    html.pw-product-overview .pig-method { border-top:1px solid #e1e0d7; padding-top:16px; margin-top:19px; color:#536052; font-size:12px; line-height:1.6; }
    html.pw-product-overview .pig-method summary { display:list-item; width:fit-content; color:#2f5740; cursor:pointer; font-weight:730; padding:4px 0; }
    html.pw-product-overview .pig-method-body { padding:13px 0 2px; max-width:870px; }
    html.pw-product-overview .pig-method-body p { margin:0 0 10px; }
    html.pw-product-overview .pig-method-body a { color:#365e55; text-decoration:underline; text-underline-offset:3px; }
    html.pw-product-overview .pig-bottom { color:#737a6f; margin:15px 0 0; font-size:11px; }
    @media(max-width:720px) {
      html.pw-product-overview .pig-preview { border-radius:20px; margin:16px 5px 30px; padding:17px; }
      html.pw-product-overview .pig-grid { grid-template-columns:1fr; }
      html.pw-product-overview .pig-data-card, html.pw-product-overview .pig-limits-card { padding:18px; border-radius:16px; }
      html.pw-product-overview .pig-value { font-size:clamp(38px,11vw,56px); }
      html.pw-product-overview .pig-scale-number { font-size:clamp(28px,8vw,37px); }
      html.pw-product-overview .pig-preview-tag { white-space:normal; }
    }

    /* Peace Investment Gap v0.2: one focal number, succinct boundary, quiet action. */
    html.pw-product-overview .pig-hero-comparison { margin: 2px 0 23px; }
    html.pw-product-overview .pig-equivalence-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
    html.pw-product-overview .pig-equivalence-mark { color:#728e74; font:700 clamp(36px,4vw,54px)/1 Inter,system-ui,sans-serif; }
    html.pw-product-overview .pig-equivalence-value {
      display:block; min-width:0; color:#263c2c;
      font:820 clamp(46px,5.3vw,77px)/1.02 Inter,system-ui,sans-serif;
      letter-spacing:-.055em; margin:7px 0 9px;
      overflow-wrap:normal;
    }
    html.pw-product-overview .pig-equivalence-copy { max-width:560px; margin:11px 0 0; color:#4b5b50; font:500 14px/1.63 Inter,system-ui,sans-serif; }
    html.pw-product-overview .pig-fund-summary {
      display:flex; align-items:center; flex-wrap:wrap; gap:13px;
      padding:16px 0 0; border-top:1px solid #e1e5dd;
    }
    html.pw-product-overview .pig-fund-amount { flex-shrink:0; color:#34503a; font:790 28px/1 Inter,system-ui,sans-serif; letter-spacing:-.045em; }
    html.pw-product-overview .pig-fund-note { max-width:385px; color:#667067; font:450 12px/1.5 Inter,system-ui,sans-serif; }
    html.pw-product-overview .pig-limit-key { display:block; color:#344c3a; font:720 15px/1.45 Inter,system-ui,sans-serif; margin:8px 0; }
    html.pw-product-overview .pig-limits-card .pig-limit-heading { font-size:clamp(20px,2vw,27px); line-height:1.21; margin:10px 0 14px; }
    html.pw-product-overview .pig-action {
      display:flex; align-items:center; justify-content:space-between;
      gap:14px 30px; flex-wrap:wrap; margin-top:18px; padding:21px 6px 4px;
      border-top:1px solid #deded5;
    }
    html.pw-product-overview .pig-action-content { min-width:0; flex:1 1 430px; }
    html.pw-product-overview .pig-action-kicker { color:#668069; font:750 10px/1.3 Inter,system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; margin:0 0 5px; }
    html.pw-product-overview .pig-action-desc { color:#485a4c; font:500 14px/1.5 Inter,system-ui,sans-serif; margin:0; }
    html.pw-product-overview .pig-action-link {
      display:inline-flex; justify-content:center; align-items:center; gap:8px;
      max-width:100%; padding:11px 16px; border:1px solid #6c896f; border-radius:999px;
      color:#2c4d36; background:transparent; font:750 12px/1.3 Inter,system-ui,sans-serif;
      text-decoration:none; text-align:center; white-space:normal;
      transition:background .14s ease, border-color .14s ease;
    }
    html.pw-product-overview .pig-action-link:hover { background:#e9f0e7; border-color:#426d49; }
    html.pw-product-overview .pig-action-link:focus-visible, 
    html.pw-product-overview .pig-method summary:focus-visible {
      outline:3px solid rgba(78,116,130,.45); outline-offset:3px;
    }
    html.pw-product-overview .pig-action-link .pig-action-arrow { font-size:15px; }
    @media(max-width:720px) {
      html.pw-product-overview .pig-equivalence-value { font-size:clamp(41px,10.7vw,63px); }
      html.pw-product-overview .pig-equivalence-mark { font-size:clamp(30px,8vw,45px); }
      html.pw-product-overview .pig-fund-summary { align-items:flex-start; }
      html.pw-product-overview .pig-action { padding:19px 0 1px; }
      html.pw-product-overview .pig-action-link { width:100%; }
    }
    @media(max-width:365px) {
      html.pw-product-overview .pig-equivalence-row { gap:5px; }
      html.pw-product-overview .pig-equivalence-value { font-size:39px; letter-spacing:-.06em; }
      html.pw-product-overview .pig-action-link { font-size:11.5px; }
    }



    /* Review-only military-expense/education scale module; colors derive from product-local tokens. */
    html.pw-product-overview .pigw-preview {
      --pigw-accent:var(--accent,#718a72);
      --pigw-ink:var(--ink,#1f231f);
      --pigw-soft:color-mix(in srgb,var(--pigw-accent) 12%,var(--surface,#fffefb));
      margin:18px 0 35px; padding:clamp(20px,3vw,34px);
      border:1px solid var(--border,#d8d4ca); border-radius:25px;
      background:var(--surface-soft,#f8f7f2); box-shadow:0 8px 28px rgba(22,27,21,.035);
      color:var(--pigw-ink); scroll-margin-top:25px;
    }
    html.pw-product-overview .pigw-preview *{box-sizing:border-box}
    html.pw-product-overview .pigw-preview [hidden]{display:none!important}
    html.pw-product-overview .pigw-eyebrow{margin:0 0 10px;font:780 11px/1.5 Inter,system-ui,sans-serif;letter-spacing:.085em;text-transform:uppercase;color:var(--pigw-accent)}
    html.pw-product-overview .pigw-head{display:flex;justify-content:space-between;gap:15px 25px;flex-wrap:wrap;align-items:start;margin-bottom:23px}
    html.pw-product-overview .pigw-head-copy{flex:1 1 470px}
    html.pw-product-overview .pigw-title{color:var(--pigw-ink);font:800 clamp(27px,3.4vw,42px)/1.1 Inter,system-ui,sans-serif;letter-spacing:-.04em;margin:0 0 10px;text-transform:none}
    html.pw-product-overview .pigw-title .pigw-second-line{display:block}
    html.pw-product-overview .pigw-intro{max-width:755px;color:var(--muted,#66675f);font:460 15px/1.57 Inter,system-ui,sans-serif;margin:0}
    html.pw-product-overview .pigw-tag{display:inline-flex;border:1px solid var(--border,#d8d4ca);border-radius:999px;padding:7px 11px;background:var(--pigw-soft);font:740 10px/1.3 Inter,system-ui,sans-serif;color:var(--pigw-ink)}
    html.pw-product-overview .pigw-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:13px}
    html.pw-product-overview .pigw-card{min-width:0;border:1px solid var(--border,#d8d4ca);border-radius:19px;background:var(--surface,#fffefb);padding:clamp(18px,2.2vw,27px)}
    html.pw-product-overview .pigw-card-outcome{background:var(--pigw-soft);border-top:3px solid var(--pigw-accent)}
    html.pw-product-overview .pigw-label{margin:0 0 12px;font:760 10px/1.5 Inter,system-ui,sans-serif;letter-spacing:.07em;color:var(--muted-strong,#505149);text-transform:uppercase}
    html.pw-product-overview .pigw-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:20px}
    html.pw-product-overview .pigw-pill{
      display:flex;flex-direction:column;justify-content:center;gap:3px;
      width:100%;min-height:65px;padding:10px 12px;
      border:1px solid var(--border,#d8d4ca);border-radius:13px;
      background:var(--surface,#fffefb);color:var(--pigw-ink);
      font:750 14px/1.23 Inter,system-ui,sans-serif;
      cursor:pointer;text-align:left;transition:background .15s ease,border-color .15s ease
    }
    html.pw-product-overview .pigw-pill small{font:500 11px/1.3 Inter,system-ui,sans-serif;color:var(--muted,#66675f);letter-spacing:0;text-transform:none}
    html.pw-product-overview .pigw-pill.is-active,
    html.pw-product-overview .pigw-pill[aria-pressed="true"]{background:var(--pigw-soft);border-color:var(--pigw-accent);color:var(--pigw-ink)}
    html.pw-product-overview .pigw-pill:hover{border-color:var(--pigw-accent)}
    html.pw-product-overview .pigw-pill:focus-visible,
    html.pw-product-overview .pigw-method summary:focus-visible{outline:3px solid rgba(78,116,130,.45);outline-offset:2px}
    html.pw-product-overview .pigw-cost{display:block;font:820 clamp(37px,4.2vw,54px)/1.06 Inter,system-ui,sans-serif;letter-spacing:-.05em;color:var(--pigw-ink);margin:3px 0 9px;overflow-wrap:anywhere}
    html.pw-product-overview .pigw-name{font:780 16px/1.38 Inter,system-ui,sans-serif;color:var(--pigw-ink);margin:0 0 10px}
    html.pw-product-overview .pigw-note{font:450 13px/1.55 Inter,system-ui,sans-serif;color:var(--muted,#66675f);margin:0}
    html.pw-product-overview .pigw-years{display:block;font:820 clamp(40px,5vw,67px)/1.07 Inter,system-ui,sans-serif;letter-spacing:-.05em;color:var(--pigw-ink);margin:13px 0 10px;overflow-wrap:anywhere}
    html.pw-product-overview .pigw-years-term{display:block;margin-top:6px;color:var(--pigw-ink);font:760 clamp(17px,2vw,23px)/1.3 Inter,system-ui,sans-serif;letter-spacing:-.018em}
    html.pw-product-overview .pigw-outcome-text{color:var(--muted-strong,#505149);font:520 14px/1.56 Inter,system-ui,sans-serif;margin:0 0 19px}
    html.pw-product-overview .pigw-budget-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0}
    html.pw-product-overview .pigw-budget-pills .pigw-pill{min-height:44px;padding:10px 7px;display:block;text-align:center;font-size:14px}
    html.pw-product-overview .pigw-budget-hint{margin:10px 0 0;color:var(--muted,#66675f);font:450 12px/1.5 Inter,system-ui,sans-serif}
    html.pw-product-overview .pigw-caveat{border-top:1px solid var(--border,#d8d4ca);padding:17px 0 0;margin:21px 0 0;color:var(--muted-strong,#505149);font:480 13px/1.6 Inter,system-ui,sans-serif}
    html.pw-product-overview .pigw-method{border-top:1px solid var(--border,#d8d4ca);padding:14px 0 0;margin:20px 0 0;color:var(--muted-strong,#505149);font:450 12px/1.6 Inter,system-ui,sans-serif}
    html.pw-product-overview .pigw-method summary{cursor:pointer;width:fit-content;color:var(--pigw-ink);font-weight:730;padding:5px 0}
    html.pw-product-overview .pigw-method-body{padding:12px 0 1px}
    html.pw-product-overview .pigw-method-body p{margin:0 0 10px}
    html.pw-product-overview .pigw-method-body a{color:var(--pigw-ink);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
    html.pw-product-overview .pigw-data-error{color:var(--danger,#9a5a54);font:650 12px/1.5 Inter,system-ui,sans-serif}
    @media(max-width:720px){
      html.pw-product-overview .pigw-preview{margin:16px 5px 28px;padding:17px;border-radius:20px}
      html.pw-product-overview .pigw-grid{grid-template-columns:1fr}
      html.pw-product-overview .pigw-card{padding:18px;border-radius:16px}
      html.pw-product-overview .pigw-years{font-size:clamp(37px,10vw,60px)}
    }
    @media(max-width:365px){
      html.pw-product-overview .pigw-years{font-size:40px}
      html.pw-product-overview .pigw-cost{font-size:34px}
      html.pw-product-overview .pigw-pill{font-size:12px;padding:9px 7px}
      html.pw-product-overview .pigw-pill small{font-size:10px}
    }