:root {
  --bg: #061521;
  --panel: #0d2638;
  --panel-2: #12334a;
  --card: #ffffff;
  --text: #eef8ff;
  --muted: #b7cad8;
  --ink: #143042;
  --ink-muted: #5b7180;
  --blue: #39bdf8;
  --cyan: #5de3ff;
  --amber: #ffb547;
  --red: #ff6b6b;
  --green: #37c98b;
  --line: rgba(255,255,255,0.14);
  --shadow: 0 18px 55px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Segoe UI, Roboto, Arial, sans-serif; background: radial-gradient(circle at top left, #134765 0, var(--bg) 42%, #030b12 100%); color: var(--text); }
a { color: inherit; }
.topbar { display: flex; justify-content: space-between; gap: 20px; padding: 24px clamp(18px, 4vw, 64px); color: var(--muted); font-size: 14px; }
.brand { color: var(--cyan); font-weight: 700; letter-spacing: .02em; }
.domain { opacity: .85; }
.hero { min-height: 680px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 75% 25%, rgba(57,189,248,.23), transparent 32%), radial-gradient(circle at 10% 60%, rgba(55,201,139,.15), transparent 25%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 70%); gap: clamp(28px,5vw,70px); align-items: center; padding: 60px clamp(18px, 4vw, 64px) 90px; }
.eyebrow { color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; margin: 0 0 12px; }
h1 { font-size: clamp(46px, 7vw, 90px); line-height: .94; margin: 0; max-width: 920px; letter-spacing: -0.06em; }
h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.05; margin: 0 0 12px; letter-spacing: -0.035em; }
h3 { font-size: 20px; color: var(--ink); margin: 0; }
.subtitle { color: var(--muted); font-size: clamp(18px, 2vw, 24px); line-height: 1.45; max-width: 760px; margin: 24px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-weight: 800; border: 1px solid rgba(255,255,255,.2); }
.button.primary { background: var(--cyan); color: #052132; }
.button.secondary { color: var(--text); background: rgba(255,255,255,.08); }
.hero-panel { min-height: 420px; display: flex; align-items: center; justify-content: center; }
.ocean-card { position: relative; width: min(100%, 450px); min-height: 330px; padding: 32px; border-radius: 28px; background: linear-gradient(160deg, rgba(18,67,96,.8), rgba(8,27,43,.82)); border: 1px solid rgba(255,255,255,.16); box-shadow: var(--shadow); overflow: hidden; }
.ocean-card::after { content: ""; position: absolute; inset: auto -10% -22% -10%; height: 48%; background: repeating-linear-gradient(0deg, rgba(93,227,255,.25), rgba(93,227,255,.25) 2px, transparent 2px, transparent 20px); transform: rotate(-4deg); }
.pulse-ring { width: 170px; height: 170px; border-radius: 50%; border: 2px solid rgba(93,227,255,.45); box-shadow: 0 0 0 35px rgba(93,227,255,.08), 0 0 0 70px rgba(93,227,255,.04); margin: 32px auto 42px; animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(.96);opacity:.75} 50%{transform:scale(1.03);opacity:1} }
.ocean-title { font-size: 22px; font-weight: 900; }
.chain { color: var(--muted); line-height: 1.5; margin-top: 8px; position: relative; z-index: 1; }
.section { padding: 74px clamp(18px, 4vw, 64px); }
.section-heading { max-width: 900px; margin-bottom: 26px; }
.section-heading p:not(.eyebrow) { color: var(--muted); font-size: 18px; line-height: 1.55; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 16px; }
.kpi-card { background: rgba(255,255,255,.95); color: var(--ink); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.5); }
.kpi-value { font-size: clamp(28px, 4vw, 46px); font-weight: 900; letter-spacing: -0.05em; }
.kpi-label { color: var(--ink-muted); margin-top: 6px; font-weight: 700; }
.dashboard-section { background: #f3f8fb; color: var(--ink); }
.dashboard-head { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 24px; align-items: end; margin-bottom: 22px; }
.dashboard-head p { color: var(--ink-muted); line-height: 1.55; }
.selector-label { display: grid; gap: 8px; font-weight: 800; color: var(--ink); }
.country-select { height: 46px; border-radius: 12px; border: 1px solid #c8d7e0; padding: 0 14px; font-size: 16px; background: white; color: var(--ink); }
.load-message { padding: 14px 16px; border-radius: 14px; background: #e7f4fb; color: #1f5d78; margin-bottom: 18px; font-weight: 700; display:none; }
.load-message.show { display:block; }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.chart-card { background: var(--card); border-radius: 24px; padding: 20px; min-height: 390px; box-shadow: 0 12px 35px rgba(12, 45, 67, .12); border: 1px solid #e2edf3; }
.chart-card.large { min-height: 430px; }
.chart-card.full { grid-column: 1 / -1; }
.chart-title-row { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 16px; }
.card-kicker { color: #32708d; text-transform: uppercase; font-size: 11px; font-weight: 900; letter-spacing: .12em; margin: 0 0 6px; }
.unit-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: #edf6fa; color: #28647e; font-size: 12px; font-weight: 900; white-space: nowrap; }
canvas { width: 100% !important; max-height: 330px; }
.insight-section { background: linear-gradient(135deg, #082033, #0b3348); }
.insight-card { max-width: 980px; padding: clamp(24px, 5vw, 54px); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 28px; box-shadow: var(--shadow); }
.insight-card p:not(.eyebrow) { color: var(--muted); font-size: 18px; line-height: 1.6; }
.footer { padding: 46px clamp(18px, 4vw, 64px); background: #030b12; color: var(--muted); border-top: 1px solid rgba(255,255,255,.1); }
.footer h2 { color: var(--text); }
.small { font-size: 13px; opacity: .8; }
@media (max-width: 900px) { .hero-grid, .dashboard-head, .chart-grid { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .topbar { flex-direction: column; } }
@media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } .section { padding: 54px 16px; } .chart-card { padding: 16px; } }

.coverage-note {
  margin-top: 10px;
  max-width: 760px;
  color: #476275;
  font-weight: 700;
  line-height: 1.45;
}

.coverage-note.warning {
  color: #8A5A00;
}


/* v0.8.9 country selector and horizontal overflow fixes */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.dashboard-head,
.selector-label,
.country-select,
.chart-card,
.chart-grid {
  min-width: 0;
}

.selector-label {
  width: 100%;
  max-width: 520px;
  justify-self: end;
}

.country-select {
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
}

.coverage-note {
  display: block;
  margin-top: 12px;
  max-width: 980px;
}

.coverage-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.coverage-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #dff3fb;
  color: #215c75;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.coverage-badge.muted {
  background: #eef3f6;
  color: #667984;
}

@media (max-width: 1100px) {
  .dashboard-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .selector-label {
    justify-self: start;
    max-width: 100%;
  }
}


/* v0.8.9 selector placement fix
   Keep the country selector inside the visible content column. Native browser
   select dropdowns are hard to control, so the safest layout is to keep the
   control left-aligned under the country coverage note instead of docking it
   to the far-right edge of the viewport. */
.dashboard-head {
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: 14px !important;
}

.selector-label {
  justify-self: start !important;
  align-self: start !important;
  width: min(520px, 100%) !important;
  max-width: 100% !important;
  margin-top: 4px;
}

.country-select {
  width: 100% !important;
  max-width: 100% !important;
}

.coverage-note {
  margin-bottom: 6px;
}

@media (min-width: 901px) {
  .dashboard-head > div:first-child {
    max-width: 1100px;
  }
}

/* v0.8.9 country selector right-aligned custom menu
   The native select popup cannot reliably be right-aligned across browsers.
   This custom menu keeps the control on the right and aligns the menu's right
   edge to the selector's right edge. */
.dashboard-head {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px) !important;
  align-items: end !important;
  gap: 24px !important;
}

.country-picker {
  position: relative;
  width: min(420px, 100%);
  max-width: 100%;
  justify-self: end;
  align-self: end;
  z-index: 20;
}

.country-picker .selector-label {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  justify-self: auto !important;
  align-self: auto !important;
  margin: 0 0 8px !important;
  font-weight: 900;
  color: var(--ink);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.country-dropdown-button {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid #c8d7e0;
  padding: 0 14px 0 16px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(12, 45, 67, .08);
}

.country-dropdown-button:focus {
  outline: 3px solid rgba(57, 189, 248, .34);
  outline-offset: 2px;
}

.dropdown-chevron {
  flex: 0 0 auto;
  color: #567184;
  font-size: 15px;
}

.country-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(420px, calc(100vw - 48px));
  max-height: 520px;
  overflow-y: auto;
  background: #fff;
  color: var(--ink);
  border: 1px solid #aebfcc;
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(9, 32, 48, .25);
  padding: 8px;
}

.country-menu.open {
  display: block;
}

.country-menu-heading {
  padding: 10px 12px 6px;
  font-weight: 950;
  color: #102d3f;
  font-size: 15px;
}

.country-menu-option {
  width: 100%;
  min-height: 38px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 0 12px;
  text-align: left;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.country-menu-option:hover,
.country-menu-option:focus {
  background: #dff3fb;
  outline: none;
}

@media (max-width: 1100px) {
  .dashboard-head {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  .country-picker {
    justify-self: start;
    width: min(420px, 100%);
  }
  .country-menu {
    left: 0;
    right: auto;
  }
}


/* v0.8.9 story map and PNG lens */
.map-section {
  background: radial-gradient(circle at 25% 10%, rgba(93,227,255,.16), transparent 28%), linear-gradient(135deg, #061827, #0b3449);
}
.story-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
}
.story-copy p:not(.eyebrow) {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
  max-width: 760px;
}
.story-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.story-chain span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(93,227,255,.12);
  border: 1px solid rgba(93,227,255,.22);
  color: #d8f7ff;
  font-weight: 800;
  font-size: 13px;
}
.pacific-map-card {
  position: relative;
  min-height: 480px;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 45%, rgba(93,227,255,.24), transparent 11%),
    radial-gradient(circle at 70% 28%, rgba(93,227,255,.12), transparent 18%),
    linear-gradient(145deg, rgba(16,76,106,.88), rgba(3,18,31,.92));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow);
}
.pacific-map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.035) 39px 40px), repeating-linear-gradient(90deg, transparent 0 58px, rgba(255,255,255,.03) 59px 60px);
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}
.map-watermark {
  position: absolute;
  left: 28px;
  top: 24px;
  color: rgba(255,255,255,.12);
  font-size: clamp(52px, 8vw, 110px);
  font-weight: 950;
  letter-spacing: -.08em;
}
.island-point {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.13);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 0 0 8px rgba(93,227,255,.05), 0 8px 24px rgba(0,0,0,.25);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.island-point span { position: relative; z-index: 1; }
.island-point:hover,
.island-point.active {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(93,227,255,.78);
  color: #042235;
  box-shadow: 0 0 0 12px rgba(93,227,255,.12), 0 12px 30px rgba(0,0,0,.28);
}
.island-point.highlight {
  width: 64px;
  height: 64px;
  background: rgba(55,201,139,.72);
}
.png-lens-section {
  background: #eef6fa;
  color: var(--ink);
}
.png-lens-section .section-heading p:not(.eyebrow) {
  color: var(--ink-muted);
}
.png-lens-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.lens-card {
  background: #fff;
  border: 1px solid #dce9f0;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 12px 34px rgba(12, 45, 67, .10);
}
.lens-card.wide { grid-column: span 2; }
.lens-card span {
  display: block;
  color: #32708d;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 950;
  margin-bottom: 10px;
}
.lens-card strong {
  display: block;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.08;
  color: var(--ink);
  letter-spacing: -.04em;
}
.lens-card small {
  display: block;
  margin-top: 10px;
  color: var(--ink-muted);
  font-weight: 700;
}
@media (max-width: 1000px) {
  .story-layout, .png-lens-grid { grid-template-columns: 1fr; }
  .pacific-map-card { min-height: 420px; }
  .lens-card.wide { grid-column: auto; }
}
@media (max-width: 560px) {
  .island-point { width: 44px; height: 44px; font-size: 12px; }
  .island-point.highlight { width: 54px; height: 54px; }
}

.chart-subnote { margin: .25rem 0 0; color: #607588; font-size: .78rem; max-width: 680px; }
.cost-card { border-top: 3px solid rgba(255, 180, 75, .7); }

/* v0.8.9 clean flat Pacific outline map */
.flat-map-card {
  min-height: 520px;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 43% 48%, rgba(93,227,255,.20), transparent 18%),
    radial-gradient(circle at 74% 33%, rgba(55,201,139,.10), transparent 26%),
    linear-gradient(145deg, rgba(13,66,96,.92), rgba(3,18,31,.96));
}
.clean-map-card::before {
  opacity: .65;
  mask-image: radial-gradient(ellipse at center, black, transparent 76%);
}
.pacific-outline-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.map-ocean-glow { opacity: .82; }
.ocean-contours path {
  fill: none;
  stroke: rgba(93,227,255,.13);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  opacity: .52;
}
.country-outline {
  fill: rgba(93,227,255,.020);
  stroke: rgba(93,227,255,.78);
  stroke-width: 2.15;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .2s ease, stroke .2s ease, filter .2s ease, opacity .2s ease, stroke-width .2s ease;
}
.country-outline.small-island { stroke-width: 2.55; }
.country-outline:hover,
.country-outline.active {
  fill: rgba(93,227,255,.13);
  stroke: rgba(118,243,255,.98);
  stroke-width: 2.8;
  filter: drop-shadow(0 0 12px rgba(93,227,255,.75));
}
.country-outline[data-country="PG"].active,
.country-outline[data-country="PG"]:hover {
  fill: rgba(55,201,139,.17);
  stroke: rgba(70,255,183,.95);
  filter: drop-shadow(0 0 14px rgba(55,201,139,.72));
}
.context-outline {
  fill: rgba(93,227,255,.010);
  stroke: rgba(142,221,255,.28);
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .72;
}
.map-point {
  z-index: 4;
  box-shadow: 0 10px 30px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.16), 0 0 22px rgba(93,227,255,.16);
}
.map-point.active,
.map-point:hover {
  box-shadow: 0 12px 34px rgba(0,0,0,.30), 0 0 0 2px rgba(191,245,255,.45), 0 0 30px rgba(93,227,255,.28);
}
.map-watermark {
  z-index: 2;
  pointer-events: none;
  opacity: .11;
  top: 12%;
  left: 7%;
}
@media (max-width: 1000px) {
  .flat-map-card { min-height: 460px; }
}
@media (max-width: 560px) {
  .flat-map-card { min-height: 390px; }
  .context-outline { opacity: .45; }
}


/* v0.8.9 Pacific cartogram map */
.cartogram-map-card {
  min-height: 500px;
  background: linear-gradient(180deg, #4fb6d9 0%, #50b8dc 100%);
  border: 4px solid #2b5da4;
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
}
.cartogram-map-card::before {
  display: none;
}
.pacific-cartogram {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.cartogram-map-card .map-watermark {
  z-index: 2;
  top: 26px;
  left: 56px;
  opacity: .10;
  color: #163d65;
  font-size: clamp(64px, 8vw, 120px);
  font-weight: 900;
  letter-spacing: -.06em;
}
.cartogram-map-card .country-outline {
  fill: rgba(255,255,255,.07);
  stroke: rgba(255,255,255,.94);
  stroke-width: 2.1;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .18s ease, stroke .18s ease, transform .18s ease, opacity .18s ease;
}
.cartogram-map-card .country-outline:hover,
.cartogram-map-card .country-outline.active {
  fill: rgba(34,126,184,.38);
  stroke: #ffffff;
}
.cartogram-map-card .country-outline.selected-default,
.cartogram-map-card .country-outline[data-country="PG"].active,
.cartogram-map-card .country-outline[data-country="PG"]:hover {
  fill: rgba(63, 190, 140, .58);
  stroke: #ffffff;
}
.country-label {
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .02em;
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
@media (max-width: 900px) {
  .cartogram-map-card { min-height: 440px; }
  .country-label { font-size: 20px; }
}
@media (max-width: 560px) {
  .cartogram-map-card { min-height: 360px; }
  .country-label { font-size: 14px; }
}


/* v0.8.9 image-only Pacific map section */
.map-image-only-section {
  padding-top: 36px;
  padding-bottom: 36px;
}
.map-image-only-wrap {
  display: block;
}
.image-only-map-card {
  min-height: 560px;
}
.image-only-map-card .map-watermark {
  display: none;
}
@media (max-width: 900px) {
  .image-only-map-card { min-height: 460px; }
}
@media (max-width: 560px) {
  .image-only-map-card { min-height: 360px; }
}


/* v0.8.9 exact map with clickable code circles */
.actual-map-panel {
  min-height: 560px;
  position: relative;
  overflow: hidden;
  border: 4px solid #234f93;
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
  background: #7cc5dd;
}
.actual-map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  user-select: none;
  -webkit-user-drag: none;
}
.map-label-cover {
  position: absolute;
  background: #7cc5dd;
  border-radius: 999px;
  opacity: .98;
  z-index: 2;
  pointer-events: none;
}
.map-country-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.88);
  background: rgba(35,79,147,.78);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.16);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.map-country-dot:hover,
.map-country-dot.active {
  background: rgba(28, 107, 183, .88);
  box-shadow: 0 12px 20px rgba(0,0,0,.22);
}
.map-country-dot.selected-default,
.map-country-dot[data-country="PG"].active,
.map-country-dot[data-country="PG"]:hover {
  background: rgba(52, 177, 136, .92);
}
@media (max-width: 900px) {
  .actual-map-panel { min-height: 440px; }
  .map-country-dot { width: 48px; height: 48px; font-size: 15px; }
}
@media (max-width: 560px) {
  .actual-map-panel { min-height: 320px; }
  .map-country-dot { width: 38px; height: 38px; font-size: 12px; }
}


/* v0.8.9 remove old label-cover overlays and keep clean map circles */
.map-label-cover {
  display: none !important;
}

.actual-map-panel {
  border-color: #2f69bf;
}

.actual-map-image {
  opacity: 1;
}

.map-country-dot {
  width: 54px;
  height: 54px;
  background: rgba(37, 91, 165, .88);
  border: 2px solid rgba(255,255,255,.96);
  box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 4px rgba(255,255,255,.08);
}

.map-country-dot:hover,
.map-country-dot.active {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(36, 126, 205, .92);
}

.map-country-dot.selected-default,
.map-country-dot[data-country="PG"].active,
.map-country-dot[data-country="PG"]:hover {
  background: rgba(46, 185, 138, .94);
}


/* v0.8.9 map layout and marker transparency refinements */
.actual-map-panel {
  min-height: 520px;
  border: 4px solid #2f69bf;
  background: #7cc5dd;
}
.actual-map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.map-country-dot {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.96);
  background: rgba(37, 91, 165, .42);
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18), 0 0 0 2px rgba(255,255,255,.08);
  backdrop-filter: blur(2px);
}
.map-country-dot:hover,
.map-country-dot.active {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(36, 126, 205, .50);
}
.map-country-dot.selected-default,
.map-country-dot[data-country="PG"].active,
.map-country-dot[data-country="PG"]:hover {
  background: rgba(46, 185, 138, .44);
}
@media (max-width: 1200px) {
  .story-layout {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 32px;
  }
  .actual-map-panel { min-height: 470px; }
}
@media (max-width: 900px) {
  .story-layout { grid-template-columns: 1fr; }
  .actual-map-panel { min-height: 380px; }
  .map-country-dot { width: 48px; height: 48px; font-size: 15px; }
}


/* v0.8.9 wider map layout: narrow left copy, wider map, no image skew */
.map-section .story-layout {
  grid-template-columns: minmax(300px, .56fr) minmax(720px, 1.44fr);
  gap: clamp(22px, 3vw, 44px);
}

.map-section .story-copy h2 {
  max-width: 620px;
}

.map-section .story-copy p:not(.eyebrow) {
  max-width: 620px;
}

.actual-map-panel {
  min-height: 530px;
}

.actual-map-image {
  object-fit: cover;
  object-position: 42% center;
}

/* Keep the right side stable and avoid stretching. */
.pacific-map-card.actual-map-panel {
  aspect-ratio: 2.05 / 1;
}

@media (max-width: 1400px) {
  .map-section .story-layout {
    grid-template-columns: minmax(300px, .62fr) minmax(620px, 1.38fr);
  }
  .actual-map-image {
    object-position: 40% center;
  }
}

@media (max-width: 1000px) {
  .map-section .story-layout {
    grid-template-columns: 1fr;
  }
  .pacific-map-card.actual-map-panel {
    aspect-ratio: auto;
  }
  .actual-map-image {
    object-position: center center;
  }
}


/* v0.8.9 actual Pacific map with reference-matched clickable circles */
.actual-map-panel {
  min-height: 560px;
  background: #79c6e2;
}
.actual-map-image {
  object-fit: cover;
  object-position: center center;
}
.map-country-dot {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.90);
  background: rgba(54, 104, 205, .40);
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px rgba(0,0,0,.20);
  backdrop-filter: blur(1.5px);
}
.map-country-dot:hover,
.map-country-dot.active {
  background: rgba(54, 104, 205, .58);
  transform: translate(-50%, -50%) scale(1.04);
}
.map-country-dot.selected-default,
.map-country-dot[data-country="PG"].active,
.map-country-dot[data-country="PG"]:hover {
  background: rgba(43, 181, 132, .52);
}
@media (max-width: 1200px) {
  .map-country-dot { width: 52px; height: 52px; font-size: 16px; }
}
@media (max-width: 900px) {
  .actual-map-panel { min-height: 430px; }
  .map-country-dot { width: 44px; height: 44px; font-size: 14px; }
}
@media (max-width: 560px) {
  .actual-map-panel { min-height: 320px; }
  .map-country-dot { width: 36px; height: 36px; font-size: 12px; }
}


/* v0.8.9 restored SS01 marker style on approved v0.8.9 layout */
.map-section .story-layout {
  grid-template-columns: minmax(300px, .56fr) minmax(720px, 1.44fr);
  gap: clamp(22px, 3vw, 44px);
}

.actual-map-panel {
  min-height: 560px;
  border: 4px solid #2f69bf;
  background: #79c6e2;
}

.actual-map-image {
  object-fit: cover;
  object-position: center center;
  opacity: 1;
}

.map-country-dot,
.island-point.map-country-dot {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .86);
  background: rgba(36, 67, 86, .42);
  color: #ffffff;
  font-weight: 850;
  font-size: 18px;
  letter-spacing: .02em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  cursor: pointer;
  box-shadow:
    0 0 0 10px rgba(255, 255, 255, .045),
    0 10px 24px rgba(0, 0, 0, .24),
    inset 0 0 18px rgba(255, 255, 255, .08);
  backdrop-filter: blur(1.5px);
  transition:
    transform .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.map-country-dot:hover,
.map-country-dot:focus-visible,
.island-point.map-country-dot:hover,
.island-point.map-country-dot:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(51, 96, 122, .54);
  border-color: rgba(255, 255, 255, .98);
  box-shadow:
    0 0 0 12px rgba(255, 255, 255, .055),
    0 14px 28px rgba(0, 0, 0, .28),
    0 0 22px rgba(93, 227, 255, .20),
    inset 0 0 20px rgba(255, 255, 255, .10);
  outline: none;
}

.map-country-dot.active,
.island-point.map-country-dot.active {
  background: rgba(52, 93, 118, .62);
  border-color: rgba(255, 255, 255, 1);
  box-shadow:
    0 0 0 12px rgba(255, 255, 255, .06),
    0 14px 30px rgba(0, 0, 0, .30),
    0 0 24px rgba(93, 227, 255, .24),
    inset 0 0 22px rgba(255, 255, 255, .12);
}

.map-country-dot.selected-default,
.map-country-dot[data-country="PG"].active,
.map-country-dot[data-country="PG"]:hover,
.map-country-dot[data-country="PG"]:focus-visible,
.island-point.map-country-dot.selected-default,
.island-point.map-country-dot[data-country="PG"].active,
.island-point.map-country-dot[data-country="PG"]:hover,
.island-point.map-country-dot[data-country="PG"]:focus-visible {
  background: rgba(46, 185, 138, .58);
  color: #062638;
  border-color: rgba(255, 255, 255, .96);
  box-shadow:
    0 0 0 12px rgba(46, 185, 138, .12),
    0 16px 32px rgba(0, 0, 0, .30),
    0 0 30px rgba(46, 185, 138, .34),
    inset 0 0 20px rgba(255, 255, 255, .16);
}

.map-country-dot:focus-visible,
.island-point.map-country-dot:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .72);
  outline-offset: 4px;
}

@media (max-width: 1400px) {
  .map-section .story-layout {
    grid-template-columns: minmax(300px, .62fr) minmax(620px, 1.38fr);
  }
}

@media (max-width: 1000px) {
  .map-section .story-layout {
    grid-template-columns: 1fr;
  }

  .actual-map-panel {
    min-height: 430px;
  }
}

@media (max-width: 560px) {
  .actual-map-panel {
    min-height: 320px;
  }

  .map-country-dot,
  .island-point.map-country-dot {
    width: 38px;
    height: 38px;
    font-size: 12px;
  }
}


/* v0.8.9 marker visual tuning */
.map-country-dot,
.island-point.map-country-dot {
  border: none !important;
  background: rgba(28, 52, 74, .62) !important; /* darker semi-transparent dark blue */
  color: #ffffff !important;
  box-shadow:
    0 0 0 10px rgba(76, 173, 255, .16),
    0 0 24px rgba(95, 205, 255, .34),
    0 0 48px rgba(95, 205, 255, .20),
    0 12px 24px rgba(0, 0, 0, .26),
    inset 0 0 16px rgba(255, 255, 255, .05) !important; /* clearer halo, no white outline */
}

.map-country-dot:hover,
.map-country-dot:focus-visible,
.island-point.map-country-dot:hover,
.island-point.map-country-dot:focus-visible {
  border: none !important;
  background: rgba(33, 63, 88, .72) !important;
  box-shadow:
    0 0 0 12px rgba(86, 198, 255, .18),
    0 0 26px rgba(98, 214, 255, .42),
    0 0 56px rgba(98, 214, 255, .24),
    0 14px 28px rgba(0, 0, 0, .28),
    inset 0 0 18px rgba(255, 255, 255, .07) !important;
}

.map-country-dot.active,
.island-point.map-country-dot.active {
  border: none !important;
  background: rgba(36, 68, 95, .78) !important;
  box-shadow:
    0 0 0 12px rgba(93, 227, 255, .20),
    0 0 28px rgba(93, 227, 255, .42),
    0 0 60px rgba(93, 227, 255, .24),
    0 14px 30px rgba(0, 0, 0, .30),
    inset 0 0 20px rgba(255, 255, 255, .08) !important;
}

.map-country-dot.selected-default,
.map-country-dot[data-country="PG"].active,
.map-country-dot[data-country="PG"]:hover,
.map-country-dot[data-country="PG"]:focus-visible,
.island-point.map-country-dot.selected-default,
.island-point.map-country-dot[data-country="PG"].active,
.island-point.map-country-dot[data-country="PG"]:hover,
.island-point.map-country-dot[data-country="PG"]:focus-visible {
  border: none !important;
  background: rgba(35, 182, 133, .78) !important;
  color: #072433 !important;
  box-shadow:
    0 0 0 12px rgba(46, 185, 138, .18),
    0 0 28px rgba(46, 185, 138, .40),
    0 0 58px rgba(46, 185, 138, .28),
    0 16px 32px rgba(0, 0, 0, .30),
    inset 0 0 18px rgba(255, 255, 255, .08) !important;
}


/* v0.8.9 scrollytelling starter: section reveal + map-to-lens transition */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.map-section.is-visible .story-chain span {
  animation: storyChipIn .58s ease both;
}

.map-section.is-visible .story-chain span:nth-child(1) { animation-delay: .05s; }
.map-section.is-visible .story-chain span:nth-child(2) { animation-delay: .12s; }
.map-section.is-visible .story-chain span:nth-child(3) { animation-delay: .19s; }
.map-section.is-visible .story-chain span:nth-child(4) { animation-delay: .26s; }
.map-section.is-visible .story-chain span:nth-child(5) { animation-delay: .33s; }

@keyframes storyChipIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.map-lens-transition {
  background: linear-gradient(135deg, #092236, #0b3449);
  padding-top: 40px;
  padding-bottom: 40px;
}

.transition-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(93,227,255,.18);
  border-radius: 28px;
  padding: clamp(22px, 3vw, 36px);
  box-shadow: 0 18px 38px rgba(0,0,0,.20);
  max-width: 1080px;
}

.transition-card h2 {
  margin: 0 0 10px;
  color: #f3fbff;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.05;
}

.transition-card p:not(.eyebrow) {
  color: #cfe8f4;
  max-width: 780px;
  line-height: 1.6;
}

.transition-flow {
  display: grid;
  grid-template-columns: auto minmax(42px, 1fr) auto minmax(42px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}

.transition-flow span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(93,227,255,.12);
  border: 1px solid rgba(93,227,255,.24);
  color: #e9fbff;
  font-weight: 850;
  white-space: nowrap;
}

.transition-flow i {
  height: 2px;
  background: linear-gradient(90deg, rgba(93,227,255,.12), rgba(93,227,255,.78), rgba(93,227,255,.12));
  position: relative;
  overflow: hidden;
}

.transition-flow i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation: transitionSignal 2.8s ease-in-out infinite;
}

@keyframes transitionSignal {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(260%); }
}

.map-country-dot.just-selected {
  animation: selectedPulse .62s ease;
}

@keyframes selectedPulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  45% { transform: translate(-50%, -50%) scale(1.13); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.png-lens-section.selection-updated .lens-card {
  animation: lensRefresh .7s ease;
}

@keyframes lensRefresh {
  0% { transform: translateY(0); box-shadow: 0 0 0 rgba(0,0,0,0); }
  35% { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
  100% { transform: translateY(0); box-shadow: 0 0 0 rgba(0,0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .transition-flow i::after,
  .map-country-dot.just-selected,
  .png-lens-section.selection-updated .lens-card,
  .map-section.is-visible .story-chain span {
    animation: none !important;
    transition: none !important;
  }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 760px) {
  .transition-flow {
    grid-template-columns: 1fr;
  }

  .transition-flow i {
    width: 2px;
    height: 26px;
    justify-self: center;
  }
}


/* v0.8.9 dynamic selected-country lens */
#countryLensEyebrow {
  color: #0aaee8;
}

#lensCountryName {
  display: inline;
}

.png-lens-section.selection-updated .section-heading h2 {
  animation: countryLensTitleRefresh .55s ease;
}

@keyframes countryLensTitleRefresh {
  0% { opacity: .65; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

.lens-card strong {
  transition: color .2s ease;
}

.png-lens-section.selection-updated .lens-card strong {
  color: #073047;
}


/* v0.8.9 scrollytelling section reveal + guided chart focus flow */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .72s ease, transform .72s ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.chart-focus-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 22px;
}

.focus-step {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(0, 95, 130, .14);
  background: rgba(36, 159, 213, .08);
  color: #0a4361;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .01em;
  transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.focus-step.active {
  background: rgba(36, 159, 213, .18);
  color: #062f47;
  box-shadow: 0 8px 18px rgba(10, 67, 97, .08);
}

.chart-stage {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .62s ease,
    transform .62s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.chart-stage.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.chart-stage[data-chart-stage="1"] { transition-delay: .04s; }
.chart-stage[data-chart-stage="2"] { transition-delay: .10s; }
.chart-stage[data-chart-stage="3"] { transition-delay: .16s; }
.chart-stage[data-chart-stage="4"] { transition-delay: .22s; }
.chart-stage[data-chart-stage="5"] { transition-delay: .28s; }
.chart-stage[data-chart-stage="6"] { transition-delay: .34s; }

.chart-stage.focus-active {
  border-color: rgba(36, 159, 213, .38);
  box-shadow:
    0 16px 30px rgba(17, 83, 116, .12),
    0 0 0 3px rgba(36, 159, 213, .08);
}

.dashboard-section.country-updated .chart-stage {
  animation: chartCountryRefresh .7s ease both;
}

.dashboard-section.country-updated .chart-stage:nth-of-type(1) { animation-delay: .00s; }
.dashboard-section.country-updated .chart-stage:nth-of-type(2) { animation-delay: .04s; }
.dashboard-section.country-updated .chart-stage:nth-of-type(3) { animation-delay: .08s; }
.dashboard-section.country-updated .chart-stage:nth-of-type(4) { animation-delay: .12s; }
.dashboard-section.country-updated .chart-stage:nth-of-type(5) { animation-delay: .16s; }
.dashboard-section.country-updated .chart-stage:nth-of-type(6) { animation-delay: .20s; }

@keyframes chartCountryRefresh {
  0% {
    transform: translateY(0);
    box-shadow: var(--shadow);
  }
  35% {
    transform: translateY(-4px);
    box-shadow:
      0 18px 34px rgba(17, 83, 116, .16),
      0 0 0 3px rgba(36, 159, 213, .10);
  }
  100% {
    transform: translateY(0);
    box-shadow: var(--shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .chart-stage,
  .focus-step,
  .dashboard-section.country-updated .chart-stage {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 680px) {
  .chart-focus-rail {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .focus-step {
    white-space: nowrap;
  }
}


/* v0.8.9 active map marker + two-per-row Country Lens metric cards */
.map-country-dot.active,
.island-point.map-country-dot.active {
  background: rgba(35, 182, 133, .78) !important;
  color: #062638 !important;
  box-shadow:
    0 0 0 12px rgba(46, 185, 138, .20),
    0 0 30px rgba(46, 185, 138, .42),
    0 0 62px rgba(46, 185, 138, .30),
    0 16px 34px rgba(0, 0, 0, .30),
    inset 0 0 18px rgba(255, 255, 255, .10) !important;
}

/* Make the chart focus flow easier to verify during testing. */
.chart-stage.focus-active {
  border-color: rgba(255, 178, 64, .82) !important;
  box-shadow:
    0 18px 34px rgba(17, 83, 116, .14),
    0 0 0 3px rgba(255, 178, 64, .18),
    0 0 28px rgba(255, 178, 64, .18) !important;
}

.focus-step.active {
  background: rgba(255, 178, 64, .20) !important;
  border-color: rgba(255, 178, 64, .46) !important;
  color: #083249 !important;
}

/* Country Lens: keep metric cards as 2 per row on desktop/tablet. */
.png-lens-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.png-lens-grid .lens-card.wide {
  grid-column: 1 / -1;
}

@media (min-width: 1180px) {
  .png-lens-grid {
    max-width: 1120px;
  }
}

@media (max-width: 760px) {
  .png-lens-grid {
    grid-template-columns: 1fr !important;
  }
}


/* v0.8.9 active marker fix, stronger reveal testing, and true 2-column Country Lens */
.map-country-dot.selected-default:not(.active),
.island-point.map-country-dot.selected-default:not(.active),
.map-country-dot[data-country="PG"]:not(.active),
.island-point.map-country-dot[data-country="PG"]:not(.active) {
  background: rgba(28, 52, 74, .62) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 10px rgba(76, 173, 255, .16),
    0 0 24px rgba(95, 205, 255, .34),
    0 0 48px rgba(95, 205, 255, .20),
    0 12px 24px rgba(0, 0, 0, .26),
    inset 0 0 16px rgba(255, 255, 255, .05) !important;
}

.map-country-dot.active,
.island-point.map-country-dot.active,
.map-country-dot[aria-current="true"],
.island-point.map-country-dot[aria-current="true"] {
  background: rgba(35, 182, 133, .82) !important;
  color: #062638 !important;
  box-shadow:
    0 0 0 12px rgba(46, 185, 138, .22),
    0 0 32px rgba(46, 185, 138, .46),
    0 0 66px rgba(46, 185, 138, .32),
    0 16px 34px rgba(0, 0, 0, .30),
    inset 0 0 18px rgba(255, 255, 255, .10) !important;
}

/* Make repeat reveal easier to see while keeping it professional. */
.reveal-on-scroll {
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Force Country Lens metric cards into 2 columns on desktop/tablet. */
.png-lens-section .png-lens-grid {
  display: grid !important;
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

.png-lens-section .png-lens-grid .lens-card {
  min-width: 0 !important;
}

.png-lens-section .png-lens-grid .lens-card.wide {
  grid-column: 1 / -1 !important;
}

@media (max-width: 760px) {
  .png-lens-section .png-lens-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }
}


/* v0.8.9 hard fix: Country Lens two-column metric layout */
.png-lens-section {
  overflow-x: hidden;
}

.png-lens-section .section-heading {
  max-width: 980px !important;
}

.png-lens-section .png-lens-grid {
  display: grid !important;
  width: 100% !important;
  max-width: 980px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  gap: 16px !important;
}

.png-lens-section .png-lens-grid > .lens-card {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  grid-column: auto !important;
}

.png-lens-section .png-lens-grid > .lens-card.wide {
  grid-column: 1 / -1 !important;
}

@media (max-width: 639px) {
  .png-lens-section .png-lens-grid {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  .png-lens-section .png-lens-grid > .lens-card,
  .png-lens-section .png-lens-grid > .lens-card.wide {
    grid-column: 1 / -1 !important;
  }
}


/* v0.8.9 fix only: place Crop yield and Inflation cards in one row on desktop/tablet */
@media (min-width: 901px) {
  .chart-grid .chart-card.wide.chart-stage[data-chart-key="crop"],
  .chart-grid .chart-card.wide.chart-stage[data-chart-key="inflation"] {
    grid-column: auto !important;
  }

  .chart-grid .chart-card.wide.chart-stage[data-chart-key="crop"] canvas,
  .chart-grid .chart-card.wide.chart-stage[data-chart-key="inflation"] canvas {
    min-height: 280px;
  }
}

@media (max-width: 900px) {
  .chart-grid .chart-card.wide.chart-stage[data-chart-key="crop"],
  .chart-grid .chart-card.wide.chart-stage[data-chart-key="inflation"] {
    grid-column: 1 / -1 !important;
  }
}


/* v0.8.9: Crop yield + Inflation should look like the normal two-up horizontal cards */
@media (min-width: 901px) {
  .chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .chart-grid .chart-card.wide.chart-stage[data-chart-key="crop"],
  .chart-grid .chart-card.wide.chart-stage[data-chart-key="inflation"] {
    grid-column: auto !important;
    min-width: 0 !important;
  }

  .chart-grid .chart-card.wide.chart-stage[data-chart-key="crop"] canvas,
  .chart-grid .chart-card.wide.chart-stage[data-chart-key="inflation"] canvas {
    min-height: 260px !important;
    max-height: 300px !important;
    height: 280px !important;
  }

  .chart-grid .chart-card.wide.chart-stage[data-chart-key="crop"] .chart-head,
  .chart-grid .chart-card.wide.chart-stage[data-chart-key="inflation"] .chart-head {
    min-height: 52px;
  }
}

@media (max-width: 900px) {
  .chart-grid .chart-card.wide.chart-stage[data-chart-key="crop"],
  .chart-grid .chart-card.wide.chart-stage[data-chart-key="inflation"] {
    grid-column: 1 / -1 !important;
  }

  .chart-grid .chart-card.wide.chart-stage[data-chart-key="crop"] canvas,
  .chart-grid .chart-card.wide.chart-stage[data-chart-key="inflation"] canvas {
    min-height: 260px !important;
    height: 280px !important;
  }
}


/* v0.8.9 hard fix: Crop yield + Inflation must be 2 cards in one row */
@media (min-width: 901px) {
  .chart-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  .chart-grid > .chart-card.large.half-row,
  .chart-grid > .chart-card.large.full.half-row,
  .chart-grid > .chart-card.large.full[data-chart-key="crop"],
  .chart-grid > .chart-card.large.full[data-chart-key="inflation"] {
    grid-column: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 390px !important;
  }

  .chart-grid > .chart-card.large.half-row canvas {
    height: 280px !important;
    min-height: 260px !important;
    max-height: 300px !important;
  }
}

@media (max-width: 900px) {
  .chart-grid > .chart-card.large.half-row {
    grid-column: 1 / -1 !important;
  }
}


/* v0.8.9 dynamic chart insight captions */
.chart-insight {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(36, 159, 213, .07);
  color: #31596d;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
  border: 1px solid rgba(36, 159, 213, .10);
}

.chart-stage.focus-active .chart-insight {
  background: rgba(255, 178, 64, .11);
  border-color: rgba(255, 178, 64, .22);
  color: #274a5d;
}


/* v0.8.9 evidence and methodology panel */
.method-section {
  background: linear-gradient(135deg, #092236, #0b3449);
  padding-top: 56px;
  padding-bottom: 62px;
}

.method-header {
  max-width: 880px;
  margin-bottom: 24px;
}

.method-header h2 {
  margin: 0 0 12px;
  color: #f3fbff;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.04;
}

.method-header p:not(.eyebrow) {
  color: #cfe8f4;
  line-height: 1.65;
  max-width: 760px;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.method-card {
  background: rgba(255, 255, 255, .065);
  border: 1px solid rgba(93, 227, 255, .16);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.method-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(93, 227, 255, .14);
  color: #8fefff;
  font-weight: 900;
  letter-spacing: .08em;
  margin-bottom: 14px;
}

.method-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 18px;
}

.method-card p {
  margin: 0;
  color: #cfe8f4;
  line-height: 1.55;
  font-size: 14px;
}

.source-evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.source-evidence-grid span {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(93, 227, 255, .08);
  border: 1px solid rgba(93, 227, 255, .16);
  color: #d9f7ff;
  font-weight: 750;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .method-grid,
  .source-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .method-grid,
  .source-evidence-grid {
    grid-template-columns: 1fr;
  }
}


/* v0.8.9 submission readiness panel */
.readiness-section {
  background: #eef6fa;
  color: var(--ink);
  padding-top: 58px;
  padding-bottom: 64px;
}

.readiness-card {
  background: #ffffff;
  border: 1px solid #dce9f0;
  border-radius: 30px;
  box-shadow: 0 18px 44px rgba(12, 45, 67, .12);
  padding: clamp(22px, 3vw, 36px);
}

.readiness-copy {
  max-width: 900px;
  margin-bottom: 24px;
}

.readiness-copy h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.04;
}

.readiness-copy p:not(.eyebrow) {
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 780px;
}

.readiness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.readiness-item {
  border-radius: 22px;
  padding: 18px;
  border: 1px solid #dce9f0;
  background: #f8fcfe;
  min-height: 164px;
}

.readiness-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.readiness-item.pass span {
  color: #06442f;
  background: rgba(46, 185, 138, .18);
}

.readiness-item.review span {
  color: #634200;
  background: rgba(255, 178, 64, .22);
}

.readiness-item strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  margin-bottom: 8px;
}

.readiness-item p {
  margin: 0;
  color: #4f6878;
  line-height: 1.5;
  font-size: 14px;
}

@media (max-width: 1000px) {
  .readiness-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .readiness-grid {
    grid-template-columns: 1fr;
  }
}


/* v0.8.9 visible evidence/methodology and submission-readiness panels */
.method-section {
  background: linear-gradient(135deg, #092236, #0b3449);
  padding-top: 56px;
  padding-bottom: 62px;
}

.method-header {
  max-width: 880px;
  margin-bottom: 24px;
}

.method-header h2 {
  margin: 0 0 12px;
  color: #f3fbff;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.04;
}

.method-header p:not(.eyebrow) {
  color: #cfe8f4;
  line-height: 1.65;
  max-width: 760px;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.method-card {
  background: rgba(255, 255, 255, .065);
  border: 1px solid rgba(93, 227, 255, .16);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.method-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(93, 227, 255, .14);
  color: #8fefff;
  font-weight: 900;
  letter-spacing: .08em;
  margin-bottom: 14px;
}

.method-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 18px;
}

.method-card p {
  margin: 0;
  color: #cfe8f4;
  line-height: 1.55;
  font-size: 14px;
}

.readiness-section {
  background: #eef6fa;
  color: var(--ink);
  padding-top: 58px;
  padding-bottom: 64px;
}

.readiness-card {
  background: #ffffff;
  border: 1px solid #dce9f0;
  border-radius: 30px;
  box-shadow: 0 18px 44px rgba(12, 45, 67, .12);
  padding: clamp(22px, 3vw, 36px);
}

.readiness-copy {
  max-width: 900px;
  margin-bottom: 24px;
}

.readiness-copy h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.04;
}

.readiness-copy p:not(.eyebrow) {
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 780px;
}

.readiness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.readiness-item {
  border-radius: 22px;
  padding: 18px;
  border: 1px solid #dce9f0;
  background: #f8fcfe;
  min-height: 164px;
}

.readiness-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.readiness-item.pass span {
  color: #06442f;
  background: rgba(46, 185, 138, .18);
}

.readiness-item.review span {
  color: #634200;
  background: rgba(255, 178, 64, .22);
}

.readiness-item strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  margin-bottom: 8px;
}

.readiness-item p {
  margin: 0;
  color: #4f6878;
  line-height: 1.5;
  font-size: 14px;
}

.source-evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.source-evidence-grid span {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(93, 227, 255, .08);
  border: 1px solid rgba(93, 227, 255, .16);
  color: #d9f7ff;
  font-weight: 750;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .method-grid,
  .source-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 640px) {
  .method-grid,
  .source-evidence-grid,
  .readiness-grid {
    grid-template-columns: 1fr;
  }
}


/* v0.8.9 final source citations and dataset metadata polish */
.final-source-footer {
  padding-top: 44px;
  padding-bottom: 54px;
}

.source-footer-header {
  max-width: 920px;
  margin-bottom: 20px;
}

.source-footer-header h2 {
  margin: 0 0 10px;
}

.source-footer-header p:not(.eyebrow) {
  color: #cfe8f4;
  line-height: 1.65;
  max-width: 800px;
}

.dataset-citation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.dataset-citation-card {
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(93, 227, 255, .16);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}

.dataset-citation-card > span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  margin-bottom: 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dataset-citation-card.official > span {
  color: #052f46;
  background: rgba(93, 227, 255, .80);
}

.dataset-citation-card.supporting > span {
  color: #3f2c00;
  background: rgba(255, 178, 64, .88);
}

.dataset-citation-card h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 18px;
}

.dataset-citation-card p {
  margin: 0 0 12px;
  color: #cfe8f4;
  line-height: 1.5;
  font-size: 13px;
}

.dataset-citation-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.dataset-citation-card dl div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
  align-items: start;
}

.dataset-citation-card dt {
  color: #8fefff;
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.dataset-citation-card dd {
  margin: 0;
  color: #e8f8ff;
  font-size: 12px;
  line-height: 1.4;
}

.metadata-limitations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 14px;
}

.metadata-card {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(93, 227, 255, .14);
  border-radius: 20px;
  padding: 18px;
}

.metadata-card.warning {
  border-color: rgba(255, 178, 64, .28);
  background: rgba(255, 178, 64, .055);
}

.metadata-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 18px;
}

.metadata-card ul {
  margin: 0;
  padding-left: 18px;
  color: #d9f7ff;
  line-height: 1.55;
  font-size: 13px;
}

.metadata-card li + li {
  margin-top: 6px;
}

.metadata-card code {
  color: #ffffff;
  background: rgba(255,255,255,.08);
  padding: 1px 5px;
  border-radius: 6px;
}

@media (max-width: 1100px) {
  .dataset-citation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metadata-limitations-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .dataset-citation-grid {
    grid-template-columns: 1fr;
  }

  .dataset-citation-card dl div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}


/* v0.8.9 mobile and tablet layout polish */
html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

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

/* Tablet: keep the story strong, but reduce oversized spacing. */
@media (max-width: 1180px) {
  .hero,
  .section,
  .footer {
    padding-left: clamp(18px, 4vw, 42px) !important;
    padding-right: clamp(18px, 4vw, 42px) !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .hero-grid,
  .map-section .story-layout {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .hero-art {
    max-width: 520px;
    justify-self: start;
  }

  .kpi-grid,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .chart-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .chart-card {
    min-width: 0 !important;
  }

  .actual-map-panel,
  .pacific-map-card.actual-map-panel {
    width: 100% !important;
    min-height: 430px !important;
    aspect-ratio: 2 / 1 !important;
  }

  .png-lens-section .png-lens-grid,
  .method-grid,
  .readiness-grid,
  .dataset-citation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phone landscape / small tablet: prioritize readability and reduce visual crowding. */
@media (max-width: 820px) {
  .topbar,
  .site-header,
  header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero h1,
  .hero-title,
  h1 {
    font-size: clamp(38px, 11vw, 64px) !important;
    line-height: .95 !important;
  }

  .hero p,
  .lead,
  .section-heading p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .hero-actions,
  .button-row,
  .story-chain,
  .chart-focus-rail {
    gap: 8px !important;
  }

  .hero-actions a,
  .hero-actions button,
  .story-chain span,
  .focus-step {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .kpi-grid,
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .kpi-card,
  .stat-card {
    padding: 16px !important;
  }

  .kpi-card strong,
  .stat-card strong {
    font-size: clamp(26px, 8vw, 38px) !important;
  }

  .dashboard-head,
  .country-controls,
  .selector-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .country-select,
  select,
  .country-controls select {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 15px !important;
  }

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

  .chart-card,
  .chart-card.large,
  .chart-card.large.half-row,
  .chart-card.wide,
  .chart-card.full {
    grid-column: 1 / -1 !important;
    min-height: auto !important;
  }

  .chart-card canvas {
    height: 280px !important;
    min-height: 260px !important;
    max-height: 320px !important;
  }

  .chart-insight {
    font-size: 12px !important;
  }

  .actual-map-panel,
  .pacific-map-card.actual-map-panel {
    min-height: 330px !important;
    aspect-ratio: 1.85 / 1 !important;
    border-width: 3px !important;
  }

  .map-country-dot,
  .island-point.map-country-dot {
    width: 38px !important;
    height: 38px !important;
    font-size: 12px !important;
  }

  .transition-flow {
    grid-template-columns: 1fr !important;
  }

  .transition-flow i {
    width: 2px !important;
    height: 24px !important;
    justify-self: center !important;
  }

  .png-lens-section .png-lens-grid,
  .method-grid,
  .readiness-grid,
  .dataset-citation-grid,
  .metadata-limitations-grid {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  .source-evidence-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Narrow phones: keep everything single-column and touch-friendly. */
@media (max-width: 560px) {
  .hero,
  .section,
  .footer {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .hero h1,
  .hero-title,
  h1 {
    font-size: clamp(34px, 13vw, 48px) !important;
  }

  .kpi-grid,
  .stats-grid,
  .source-evidence-grid {
    grid-template-columns: 1fr !important;
  }

  .chart-card {
    border-radius: 20px !important;
    padding: 14px !important;
  }

  .chart-head,
  .chart-title-row {
    gap: 8px !important;
  }

  .chart-card h3 {
    font-size: 16px !important;
  }

  .chart-card canvas {
    height: 250px !important;
    min-height: 240px !important;
  }

  .actual-map-panel,
  .pacific-map-card.actual-map-panel {
    min-height: 255px !important;
    aspect-ratio: 1.55 / 1 !important;
  }

  .map-country-dot,
  .island-point.map-country-dot {
    width: 30px !important;
    height: 30px !important;
    font-size: 10px !important;
    box-shadow:
      0 0 0 7px rgba(76, 173, 255, .14),
      0 0 18px rgba(95, 205, 255, .24),
      0 8px 18px rgba(0,0,0,.22) !important;
  }

  .story-copy h2,
  .method-header h2,
  .readiness-copy h2,
  .source-footer-header h2 {
    font-size: clamp(28px, 10vw, 40px) !important;
  }

  .lens-card,
  .method-card,
  .readiness-item,
  .dataset-citation-card,
  .metadata-card {
    border-radius: 18px !important;
    padding: 15px !important;
  }

  .dataset-citation-card dl div {
    grid-template-columns: 1fr !important;
  }

  .footer {
    padding-bottom: 38px !important;
  }
}


/* v0.8.9 final climate-to-cost takeaway section */
.final-takeaway-section {
  background:
    radial-gradient(circle at 78% 18%, rgba(93, 227, 255, .15), transparent 30%),
    linear-gradient(135deg, #071d2f, #0b3449 70%);
  color: #f3fbff;
  padding-top: 72px;
  padding-bottom: 74px;
}

.final-takeaway-grid {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(520px, 1.25fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
}

.final-takeaway-copy {
  max-width: 760px;
}

.final-takeaway-copy h2 {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: clamp(38px, 5vw, 74px);
  line-height: .96;
  letter-spacing: -.04em;
}

.final-takeaway-copy p {
  color: #d8f3fb;
  line-height: 1.7;
  font-size: clamp(15px, 1.35vw, 18px);
  max-width: 680px;
}

.takeaway-chain-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(93, 227, 255, .20);
  background:
    radial-gradient(circle at 76% 24%, rgba(93, 227, 255, .16), transparent 30%),
    rgba(255, 255, 255, .065);
  box-shadow: 0 22px 48px rgba(0,0,0,.24);
  padding: clamp(18px, 2.4vw, 30px);
}

.takeaway-chain-card::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background-image:
    linear-gradient(rgba(93, 227, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 227, 255, .06) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .65;
  pointer-events: none;
}

.takeaway-chain-title {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}

.takeaway-chain-title span,
.takeaway-chain-title strong {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(93, 227, 255, .12);
  border: 1px solid rgba(93, 227, 255, .20);
  color: #dffaff;
  font-size: 12px;
  font-weight: 900;
}

.takeaway-chain {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 34px 1fr 34px 1fr;
  gap: 12px;
  align-items: stretch;
}

.takeaway-chain > i {
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg, rgba(93, 227, 255, .15), rgba(93, 227, 255, .85));
  position: relative;
}

.takeaway-chain > i::after {
  content: "→";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-52%);
  color: #8fefff;
  font-weight: 900;
}

.takeaway-node {
  min-height: 124px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12, 43, 61, .68);
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 8px;
  box-shadow: inset 0 0 18px rgba(255,255,255,.035);
}

.takeaway-node span {
  color: #8fefff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.takeaway-node strong {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.05;
}

.takeaway-node small {
  color: #bfe8f2;
  font-weight: 700;
  line-height: 1.3;
}

.takeaway-node.disaster {
  border-color: rgba(255,178,64,.34);
}

.takeaway-node.food {
  border-color: rgba(46,185,138,.32);
}

.takeaway-node.household {
  border-color: rgba(255,178,64,.42);
}

.planning-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.planning-grid article {
  border-radius: 24px;
  border: 1px solid rgba(93, 227, 255, .15);
  background: rgba(255,255,255,.055);
  padding: 20px;
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
}

.planning-grid span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(93, 227, 255, .12);
  color: #8fefff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.planning-grid h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.15;
}

.planning-grid p {
  margin: 0;
  color: #cfe8f4;
  line-height: 1.55;
  font-size: 14px;
}

.final-takeaway-section.is-visible .takeaway-node {
  animation: takeawayNodeIn .62s ease both;
}

.final-takeaway-section.is-visible .takeaway-node:nth-of-type(1) { animation-delay: .05s; }
.final-takeaway-section.is-visible .takeaway-node:nth-of-type(2) { animation-delay: .13s; }
.final-takeaway-section.is-visible .takeaway-node:nth-of-type(3) { animation-delay: .21s; }
.final-takeaway-section.is-visible .takeaway-node:nth-of-type(4) { animation-delay: .29s; }
.final-takeaway-section.is-visible .takeaway-node:nth-of-type(5) { animation-delay: .37s; }

@keyframes takeawayNodeIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1180px) {
  .final-takeaway-grid {
    grid-template-columns: 1fr;
  }

  .takeaway-chain {
    grid-template-columns: 1fr;
  }

  .takeaway-chain > i {
    width: 2px;
    height: 28px;
    justify-self: center;
    background: linear-gradient(180deg, rgba(93, 227, 255, .15), rgba(93, 227, 255, .85));
  }

  .takeaway-chain > i::after {
    content: "↓";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -13px;
    transform: translateX(-50%);
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  .final-takeaway-section.is-visible .takeaway-node {
    animation: none !important;
  }
}


/* v0.8.9 official rules, licence and AI-use verification */
.rules-section {
  background: linear-gradient(135deg, #071d2f, #0b3449 70%);
  color: #f3fbff;
  padding-top: 62px;
  padding-bottom: 66px;
}

.rules-header {
  max-width: 920px;
  margin-bottom: 24px;
}

.rules-header h2 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.04;
}

.rules-header p:not(.eyebrow) {
  color: #cfe8f4;
  line-height: 1.65;
  max-width: 820px;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rule-card {
  min-height: 188px;
  border-radius: 22px;
  border: 1px solid rgba(93, 227, 255, .16);
  background: rgba(255, 255, 255, .062);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  padding: 18px;
}

.rule-card > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rule-card.pass > span {
  color: #06442f;
  background: rgba(46, 185, 138, .78);
}

.rule-card.review > span {
  color: #3f2c00;
  background: rgba(255, 178, 64, .90);
}

.rule-card h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 19px;
  line-height: 1.15;
}

.rule-card p {
  margin: 0;
  color: #cfe8f4;
  line-height: 1.52;
  font-size: 14px;
}

.ai-usage-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  margin-top: 18px;
  border-radius: 26px;
  border: 1px solid rgba(255, 178, 64, .24);
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 178, 64, .14), transparent 28%),
    rgba(255,255,255,.06);
  padding: clamp(18px, 2.4vw, 28px);
}

.ai-usage-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.08;
}

.ai-usage-card p {
  color: #cfe8f4;
  line-height: 1.62;
  margin: 0;
}

.ai-usage-card ul {
  margin: 0;
  padding-left: 18px;
  color: #e8f8ff;
  line-height: 1.6;
  font-size: 14px;
}

.ai-usage-card li + li {
  margin-top: 6px;
}

@media (max-width: 1000px) {
  .rules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-usage-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rules-grid {
    grid-template-columns: 1fr;
  }
}


/* v0.8.9 final responsive map-marker fit fix */
.map-section .story-layout {
  align-items: center;
}

.pacific-map-card.actual-map-panel,
.actual-map-panel {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1763 / 892 !important;
  overflow: hidden !important;
}

.actual-map-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.map-country-dot,
.island-point.map-country-dot {
  width: clamp(24px, 4.6%, 54px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: clamp(10px, 1.15vw, 17px) !important;
  line-height: 1 !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
}

.map-country-dot.active,
.map-country-dot.selected-default,
.map-country-dot[aria-current="true"] {
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 1000px) {
  .pacific-map-card.actual-map-panel,
  .actual-map-panel {
    aspect-ratio: 1763 / 892 !important;
  }

  .map-country-dot,
  .island-point.map-country-dot {
    width: clamp(22px, 5%, 46px) !important;
    font-size: clamp(9px, 1.9vw, 14px) !important;
  }
}

@media (max-width: 640px) {
  .map-country-dot,
  .island-point.map-country-dot {
    width: clamp(20px, 6.2%, 38px) !important;
    font-size: clamp(8px, 2.4vw, 12px) !important;
  }
}


/* v0.8.9 HOSTINGER FINAL: map width containment + responsive marker scaling */
html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}

.map-section,
.map-section * {
  box-sizing: border-box;
}

.map-section {
  overflow-x: hidden !important;
}

.map-section .story-layout {
  width: 100% !important;
  max-width: 1480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 0.98fr) !important;
  gap: clamp(18px, 3vw, 46px) !important;
  align-items: center !important;
}

.map-section .story-copy {
  min-width: 0 !important;
}

.pacific-map-card.actual-map-panel,
.actual-map-panel {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1763 / 892 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  box-sizing: border-box !important;
}

.actual-map-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.map-country-dot,
.island-point.map-country-dot {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  width: clamp(24px, 4.4%, 50px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: clamp(9px, 1.05vw, 15px) !important;
  line-height: 1 !important;
}

/* Keep all active/hover states centred. */
.map-country-dot:hover,
.map-country-dot.active,
.map-country-dot.selected-default,
.map-country-dot[aria-current="true"] {
  transform: translate(-50%, -50%) !important;
}

/* Keep marker positions percentage-based against the displayed image. */
.map-country-dot[data-country="PW"] { left: 6.7% !important; top: 17.3% !important; }
.map-country-dot[data-country="GU"] { left: 13.4% !important; top: 18.9% !important; }
.map-country-dot[data-country="MP"] { left: 16.5% !important; top: 8.0% !important; }
.map-country-dot[data-country="FM"] { left: 27.1% !important; top: 8.3% !important; }
.map-country-dot[data-country="MH"] { left: 37.7% !important; top: 6.0% !important; }
.map-country-dot[data-country="NR"] { left: 32.6% !important; top: 22.2% !important; }
.map-country-dot[data-country="PG"] { left: 8.5% !important; top: 38.5% !important; }
.map-country-dot[data-country="SB"] { left: 21.1% !important; top: 46.2% !important; }
.map-country-dot[data-country="VU"] { left: 29.0% !important; top: 62.0% !important; }
.map-country-dot[data-country="NC"] { left: 26.9% !important; top: 78.1% !important; }
.map-country-dot[data-country="TV"] { left: 45.4% !important; top: 38.5% !important; }
.map-country-dot[data-country="WF"] { left: 50.5% !important; top: 51.4% !important; }
.map-country-dot[data-country="WS"] { left: 58.3% !important; top: 56.4% !important; }
.map-country-dot[data-country="AS"] { left: 63.1% !important; top: 60.1% !important; }
.map-country-dot[data-country="TK"] { left: 60.7% !important; top: 41.6% !important; }
.map-country-dot[data-country="KI"] { left: 76.9% !important; top: 18.7% !important; }
.map-country-dot[data-country="FJ"] { left: 45.9% !important; top: 66.2% !important; }
.map-country-dot[data-country="NU"] { left: 56.9% !important; top: 68.2% !important; }
.map-country-dot[data-country="TO"] { left: 53.1% !important; top: 82.1% !important; }
.map-country-dot[data-country="CK"] { left: 73.9% !important; top: 80.8% !important; }
.map-country-dot[data-country="PF"] { left: 85.6% !important; top: 68.2% !important; }
.map-country-dot[data-country="PN"] { left: 95.1% !important; top: 90.8% !important; }

@media (max-width: 1120px) {
  .map-section .story-layout {
    grid-template-columns: 1fr !important;
  }

  .pacific-map-card.actual-map-panel,
  .actual-map-panel {
    width: 100% !important;
    aspect-ratio: 1763 / 892 !important;
  }

  .map-country-dot,
  .island-point.map-country-dot {
    width: clamp(21px, 4.8%, 42px) !important;
    font-size: clamp(8px, 1.7vw, 13px) !important;
  }
}

@media (max-width: 620px) {
  .pacific-map-card.actual-map-panel,
  .actual-map-panel {
    border-radius: 20px !important;
    aspect-ratio: 1763 / 892 !important;
  }

  .map-country-dot,
  .island-point.map-country-dot {
    width: clamp(18px, 5.2%, 32px) !important;
    min-width: 18px !important;
    min-height: 18px !important;
    font-size: clamp(7px, 2.2vw, 10px) !important;
  }
}

/* Tablet and mobile: keep the Story Logic card readable and do not shrink it. */
@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-panel > .ocean-card.chain-card,
  .hero-panel .ocean-card.chain-card,
  .hero-panel > .chain-card,
  .hero-panel > * {
    width: 100% !important;
    max-width: 720px !important;
    transform: none !important;
    min-height: 440px !important;
  }

  .hero-panel .chain-card-title,
  .hero-panel .ocean-card.chain-card .chain-card-title,
  .hero-panel .chain-card .chain-card-title {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   v0.8.9 CLEAN HERO STORY LOGIC REDESIGN

   This is the single active CSS block for the hero Story Logic card.
   It replaces the removed duplicate blocks:
   - animated hero climate-to-cost card
   - animation layer
   - HERO STORY LOGIC MERGED FIX
   - HERO STORY LOGIC HARD OVERRIDE

   Requested fixes:
   1) Story Logic title uses 75% of the Story Logic card width.
   2) Story Logic card is 30% smaller on desktop.
   ========================================================================== */

@media (min-width: 1181px) {
  .hero {
    overflow-x: hidden !important;
  }

  .hero-grid {
    position: relative !important;
    width: 100% !important;
    max-width: 1720px !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 30%) minmax(0, 70%) !important;
    gap: clamp(28px, 3.2vw, 52px) !important;
    align-items: center !important;
    padding: 60px clamp(18px, 4vw, 64px) 90px !important;
  }

  .hero-copy {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .hero-copy h1 {
    max-width: 100% !important;
    font-size: clamp(42px, 4.1vw, 70px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .hero-copy .subtitle,
  .hero-copy p {
    max-width: 100% !important;
    font-size: clamp(18px, 1.35vw, 25px) !important;
    line-height: 1.45 !important;
  }

  .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    max-width: 100% !important;
  }

  .hero-actions a,
  .hero-actions button {
    white-space: nowrap !important;
  }

  .hero-panel {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(420px, 41vw, 700px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  /* Actual Story Logic visual card.
     Width and height are reduced directly, not with transform, so the card
     really becomes 30% smaller and remains sharp. */
  .hero-panel > .ocean-card.chain-card,
  .hero-panel .ocean-card.chain-card,
  .hero .ocean-card.chain-card {
    width: 70% !important;
    max-width: 70% !important;
    min-width: 0 !important;
    min-height: clamp(360px, 29vw, 490px) !important;
    height: auto !important;
    margin-inline: auto !important;
    padding: clamp(20px, 2vw, 30px) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transform: none !important;
    box-sizing: border-box !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 72% 18%, rgba(93,227,255,.20), transparent 26%),
      radial-gradient(circle at 18% 78%, rgba(55,201,139,.18), transparent 24%),
      linear-gradient(158deg, rgba(17,77,108,.92), rgba(4,18,32,.94)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: var(--shadow) !important;
  }

  .hero-panel > .ocean-card.chain-card::before,
  .hero-panel .ocean-card.chain-card::before,
  .hero .ocean-card.chain-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255,255,255,.028) 1px, transparent 1px) !important;
    background-size: 42px 42px !important;
    mask-image: radial-gradient(circle at 70% 20%, black, transparent 74%) !important;
    pointer-events: none !important;
  }

  .hero-panel > .ocean-card.chain-card::after,
  .hero-panel .ocean-card.chain-card::after,
  .hero .ocean-card.chain-card::after {
    content: "" !important;
    position: absolute !important;
    inset: auto -10% -22% -10% !important;
    height: 28% !important;
    opacity: .75 !important;
    background: repeating-linear-gradient(
      0deg,
      rgba(93,227,255,.25),
      rgba(93,227,255,.25) 2px,
      transparent 2px,
      transparent 20px
    ) !important;
    transform: rotate(-4deg) !important;
  }

  .hero .chain-card-head,
  .hero .chain-card-title,
  .hero .chain-flow,
  .hero .chain-bottom-row {
    position: relative !important;
    z-index: 2 !important;
  }

  .hero .chain-card-head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .hero .chain-badge,
  .hero .chain-dataset-count {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .hero .chain-badge {
    background: rgba(93,227,255,.18) !important;
    color: #bff5ff !important;
    border: 1px solid rgba(93,227,255,.28) !important;
  }

  .hero .chain-dataset-count {
    background: rgba(255,255,255,.08) !important;
    color: rgba(231,246,255,.78) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
  }

  /* The title width request. This is the actual title class. */
  .hero-panel .chain-card-title,
  .hero .ocean-card.chain-card .chain-card-title,
  .hero .chain-card .chain-card-title {
    display: block !important;
    width: 75% !important;
    max-width: 75% !important;
    min-width: 0 !important;
    margin: clamp(24px, 2.5vw, 38px) 0 clamp(18px, 2vw, 28px) !important;
    color: #fff !important;
    font-size: clamp(30px, 2.65vw, 46px) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero-panel .chain-card-title br,
  .hero .ocean-card.chain-card .chain-card-title br,
  .hero .chain-card .chain-card-title br {
    display: none !important;
  }

  .hero .chain-card-glow {
    position: absolute !important;
    width: clamp(128px, 13vw, 205px) !important;
    height: clamp(128px, 13vw, 205px) !important;
    border-radius: 50% !important;
    right: 7% !important;
    top: 8% !important;
    border: 2px solid rgba(93,227,255,.35) !important;
    box-shadow:
      0 0 0 34px rgba(93,227,255,.07),
      0 0 0 68px rgba(93,227,255,.035) !important;
    pointer-events: none !important;
  }

  .hero .chain-flow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: clamp(7px, .7vw, 12px) clamp(7px, .7vw, 12px) !important;
    align-items: center !important;
    width: 100% !important;
  }

  .hero .chain-step {
    min-height: clamp(46px, 3.1vw, 58px) !important;
    height: auto !important;
    padding: clamp(8px, .75vw, 11px) clamp(10px, .85vw, 13px) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.075) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(10px) !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero .chain-step span {
    display: block !important;
    color: rgba(191,245,255,.78) !important;
    font-size: clamp(8px, .62vw, 10px) !important;
    font-weight: 950 !important;
    letter-spacing: .11em !important;
    margin-bottom: 4px !important;
  }

  .hero .chain-step strong {
    display: block !important;
    color: #fff !important;
    font-size: clamp(11px, .78vw, 13px) !important;
    line-height: 1.12 !important;
  }

  .hero .chain-step.ocean { border-left: 4px solid #5de3ff !important; }
  .hero .chain-step.rain { border-left: 4px solid #8bd8ff !important; }
  .hero .chain-step.loss { border-left: 4px solid #ffb547 !important; }
  .hero .chain-step.food { border-left: 4px solid #37c98b !important; }
  .hero .chain-step.cost { border-left: 4px solid #ff6b6b !important; }

  .hero .chain-flow .chain-step.cost {
    grid-column: 2 / 4 !important;
  }

  .hero .chain-arrow {
    color: rgba(191,245,255,.82) !important;
    font-weight: 950 !important;
    text-align: center !important;
  }

  .hero .chain-bottom-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: clamp(14px, 1.5vw, 22px) !important;
    padding-top: clamp(10px, 1.1vw, 16px) !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    color: rgba(231,246,255,.78) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }
}

/* Tablet/mobile safety: full-width readable card, no desktop shrink. */
@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-panel > .ocean-card.chain-card,
  .hero-panel .ocean-card.chain-card,
  .hero .ocean-card.chain-card {
    width: 100% !important;
    max-width: 720px !important;
    min-height: 440px !important;
    transform: none !important;
  }

  .hero-panel .chain-card-title,
  .hero .ocean-card.chain-card .chain-card-title,
  .hero .chain-card .chain-card-title {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero .chain-flow {
    grid-template-columns: 1fr !important;
  }

  .hero .chain-arrow {
    display: none !important;
  }

  .hero .chain-flow .chain-step.cost {
    grid-column: auto !important;
  }
}


/* ==========================================================================
   v0.8.9 HERO STORY LOGIC PRODUCTION FIX
   Confirmed selectors from v0.8.9-TEST.
   - Story Logic card is reduced by 30% from full width.
   - Story Logic title uses 75% width.
   - Card remains readable and balanced, not tiny.
   ========================================================================== */

@media (min-width: 1181px) {
  /* Keep the right hero lane available, but centre the resized visual card. */
  body .hero .hero-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Actual Story Logic visual card. This is the selector confirmed by the test. */
  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: 70% !important;
    max-width: 70% !important;
    min-width: 620px !important;
    min-height: 430px !important;
    height: auto !important;
    padding: clamp(24px, 2.2vw, 34px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    justify-self: center !important;
    overflow: hidden !important;
    outline: none !important;
  }

  /* Story Logic title. This is the real class, not h2. */
  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: 75% !important;
    max-width: 75% !important;
    min-width: 0 !important;
    font-size: clamp(34px, 3vw, 50px) !important;
    line-height: .96 !important;
    margin: clamp(40px, 4vw, 58px) 0 clamp(28px, 2.8vw, 42px) !important;
    letter-spacing: -0.055em !important;
  }

  body .hero .hero-panel .chain-card .chain-badge,
  body .hero .hero-panel .ocean-card.chain-card .chain-badge {
    font-size: clamp(10px, .8vw, 13px) !important;
    padding: 7px 14px !important;
  }

  body .hero .hero-panel .chain-card .chain-badge.right,
  body .hero .hero-panel .ocean-card.chain-card .chain-badge.right {
    right: clamp(24px, 2.2vw, 34px) !important;
    top: clamp(24px, 2.2vw, 34px) !important;
  }

  /* Restore the diagram flow, but size it for the 70% visual card. */
  body .hero .hero-panel .chain-flow {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: clamp(8px, .8vw, 13px) clamp(8px, .9vw, 14px) !important;
    align-items: center !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.ocean,
  body .hero .hero-panel .chain-step.rain,
  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    position: static !important;
    transform: none !important;
    min-height: clamp(48px, 3.5vw, 62px) !important;
    height: auto !important;
    padding: clamp(9px, .85vw, 12px) clamp(11px, 1vw, 16px) !important;
    font-size: inherit !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body .hero .hero-panel .chain-step span {
    font-size: clamp(8px, .65vw, 10px) !important;
  }

  body .hero .hero-panel .chain-step strong {
    font-size: clamp(11px, .88vw, 14px) !important;
  }

  body .hero .hero-panel .chain-step.cost {
    grid-column: 2 / 4 !important;
  }

  body .hero .hero-panel .chain-bottom-row {
    display: flex !important;
    margin-top: clamp(18px, 1.8vw, 26px) !important;
    padding-top: clamp(12px, 1.2vw, 18px) !important;
  }

  body .hero .hero-panel .chain-card-glow {
    display: block !important;
    right: 7% !important;
    top: 8% !important;
    width: clamp(140px, 14vw, 230px) !important;
    height: clamp(140px, 14vw, 230px) !important;
  }
}

/* Tablet/mobile keeps the normal full-width card. */
@media (max-width: 1180px) {
  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    min-height: 440px !important;
    height: auto !important;
    outline: none !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ==========================================================================
   v0.8.9 HERO EQUAL HEIGHT + EXTENDED STORY TITLE FIX
   Confirmed working selector path from v0.8.9.
   Requested:
   - Left hero text section and right Story Logic card should visually share
     the same height on desktop.
   - Story Logic title should extend further to the right.
   ========================================================================== */

@media (min-width: 1181px) {
  /* Equal-height desktop hero layout */
  body .hero .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 30%) minmax(0, 70%) !important;
    align-items: stretch !important;
    gap: 42px !important;
  }

  body .hero .hero-copy {
    min-height: clamp(520px, 42vw, 690px) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  body .hero .hero-panel {
    min-height: clamp(520px, 42vw, 690px) !important;
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  /* Right Story Logic card: same visual height as the left hero copy area.
     Width stays controlled and centred in the right lane. */
  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: 70% !important;
    max-width: 70% !important;
    min-width: 620px !important;
    min-height: clamp(520px, 42vw, 690px) !important;
    height: 100% !important;
    padding: clamp(28px, 2.4vw, 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: stretch !important;
    justify-self: center !important;
    overflow: hidden !important;
    outline: none !important;
  }

  /* Extended Story Logic title.
     Width increased from 75% to 92%, and forced line breaks are disabled. */
  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: 92% !important;
    max-width: 92% !important;
    min-width: 0 !important;
    font-size: clamp(34px, 3vw, 52px) !important;
    line-height: .96 !important;
    margin: clamp(50px, 4.5vw, 72px) 0 clamp(30px, 3vw, 46px) !important;
    letter-spacing: -0.055em !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title br,
  body .hero .hero-panel .chain-card .chain-card-title br {
    display: none !important;
  }

  /* Keep badge and graphic balanced after increasing card height. */
  body .hero .hero-panel .chain-card .chain-badge,
  body .hero .hero-panel .ocean-card.chain-card .chain-badge {
    font-size: clamp(10px, .8vw, 13px) !important;
    padding: 7px 14px !important;
  }

  body .hero .hero-panel .chain-card .chain-badge.right,
  body .hero .hero-panel .ocean-card.chain-card .chain-badge.right {
    right: clamp(28px, 2.4vw, 40px) !important;
    top: clamp(28px, 2.4vw, 40px) !important;
  }

  body .hero .hero-panel .chain-card-glow {
    display: block !important;
    right: 6% !important;
    top: 8% !important;
    width: clamp(170px, 17vw, 280px) !important;
    height: clamp(170px, 17vw, 280px) !important;
  }

  /* Restore card flow inside the taller card. */
  body .hero .hero-panel .chain-flow {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: clamp(10px, 1vw, 16px) clamp(10px, 1vw, 16px) !important;
    align-items: center !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.ocean,
  body .hero .hero-panel .chain-step.rain,
  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    position: static !important;
    transform: none !important;
    min-height: clamp(54px, 3.8vw, 68px) !important;
    height: auto !important;
    padding: clamp(10px, .9vw, 13px) clamp(12px, 1.05vw, 18px) !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body .hero .hero-panel .chain-step.cost {
    grid-column: 2 / 4 !important;
  }

  body .hero .hero-panel .chain-bottom-row {
    display: flex !important;
    margin-top: clamp(24px, 2.2vw, 34px) !important;
    padding-top: clamp(14px, 1.3vw, 20px) !important;
  }
}

/* Tablet/mobile keeps the normal full-width card and natural height. */
@media (max-width: 1180px) {
  body .hero .hero-copy,
  body .hero .hero-panel {
    min-height: auto !important;
    height: auto !important;
  }

  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    min-height: 440px !important;
    height: auto !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ==========================================================================
   v0.8.9 HERO BALANCED TWO-CARD LAYOUT FIX
   Requested:
   1) Move 05 Cost of living up and align it horizontally with 04 Food pressure.
      Reduce 05 width so it fits inline with 04.
   2) Resize the Story Logic card so its height equals the left Interactive
      Prototype card and align it to the right side.
   3) Expand the left Interactive Prototype card horizontally so both cards fit
      nicely with equal page paddings.
   ========================================================================== */

@media (min-width: 1181px) {
  body .hero .hero-grid {
    width: 100% !important;
    max-width: 1760px !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 38%) minmax(0, 62%) !important;
    gap: clamp(34px, 3vw, 56px) !important;
    align-items: stretch !important;
    padding-left: clamp(18px, 2.2vw, 42px) !important;
    padding-right: clamp(18px, 2.2vw, 42px) !important;
  }

  body .hero .hero-copy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: clamp(470px, 36vw, 610px) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: stretch !important;
  }

  body .hero .hero-copy h1 {
    max-width: 100% !important;
    font-size: clamp(48px, 4.8vw, 86px) !important;
    line-height: .98 !important;
    letter-spacing: -.06em !important;
  }

  body .hero .hero-copy .subtitle,
  body .hero .hero-copy p {
    max-width: 94% !important;
  }

  body .hero .hero-actions {
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  body .hero .hero-panel {
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(470px, 36vw, 610px) !important;
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    align-self: stretch !important;
  }

  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: min(100%, 940px) !important;
    max-width: 940px !important;
    min-width: 0 !important;
    min-height: clamp(470px, 36vw, 610px) !important;
    height: 100% !important;
    padding: clamp(28px, 2.2vw, 38px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: stretch !important;
    justify-self: end !important;
    overflow: hidden !important;
    outline: none !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: 96% !important;
    max-width: 96% !important;
    min-width: 0 !important;
    font-size: clamp(34px, 2.85vw, 52px) !important;
    line-height: .96 !important;
    margin: clamp(42px, 3.7vw, 60px) 0 clamp(24px, 2.2vw, 36px) !important;
    letter-spacing: -.055em !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title br,
  body .hero .hero-panel .chain-card .chain-card-title br {
    display: none !important;
  }

  body .hero .hero-panel .chain-flow {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: clamp(10px, .9vw, 16px) clamp(10px, 1vw, 16px) !important;
    align-items: center !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.ocean,
  body .hero .hero-panel .chain-step.rain,
  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    position: static !important;
    transform: none !important;
    min-height: clamp(50px, 3.4vw, 64px) !important;
    height: auto !important;
    padding: clamp(9px, .8vw, 12px) clamp(12px, 1vw, 18px) !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body .hero .hero-panel .chain-step.food {
    grid-column: 1 / 2 !important;
    grid-row: 5 !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step.cost {
    grid-column: 3 / 4 !important;
    grid-row: 5 !important;
    width: 100% !important;
    max-width: 360px !important;
    justify-self: end !important;
  }

  body .hero .hero-panel .chain-step.cost + .chain-arrow {
    display: none !important;
  }

  body .hero .hero-panel .chain-bottom-row {
    display: flex !important;
    margin-top: clamp(20px, 1.8vw, 30px) !important;
    padding-top: clamp(13px, 1.2vw, 18px) !important;
  }

  body .hero .hero-panel .chain-card-glow {
    right: 6% !important;
    top: 7% !important;
    width: clamp(170px, 16vw, 260px) !important;
    height: clamp(170px, 16vw, 260px) !important;
  }
}

@media (max-width: 1180px) {
  body .hero .hero-grid {
    grid-template-columns: 1fr !important;
  }

  body .hero .hero-copy,
  body .hero .hero-panel {
    min-height: auto !important;
    height: auto !important;
  }

  body .hero .hero-panel {
    justify-content: center !important;
  }

  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    min-height: 440px !important;
    height: auto !important;
    margin-inline: auto !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: 100% !important;
    max-width: 100% !important;
  }

  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    grid-column: auto !important;
    grid-row: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ==========================================================================
   v0.8.9 HERO STORY LOGIC HEIGHT + 04/05 ARROW ALIGNMENT
   Requested:
   1) Move the arrow between 04 Food pressure and 05 Cost of living to the
      centre between those two cards.
   2) Shrink the Story Logic card height to match the left Interactive Prototype
      section, including internal object scale so the card stays proportionate.
   ========================================================================== */

@media (min-width: 1181px) {
  /* Make both hero sides use the same compact card height. */
  body .hero .hero-grid {
    grid-template-columns: minmax(420px, 38%) minmax(0, 62%) !important;
    align-items: center !important;
    gap: clamp(34px, 3vw, 56px) !important;
  }

  body .hero .hero-copy,
  body .hero .hero-panel {
    min-height: clamp(430px, 31vw, 540px) !important;
    height: clamp(430px, 31vw, 540px) !important;
    align-self: center !important;
  }

  body .hero .hero-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* Shrink the actual Story Logic card height and keep it right aligned. */
  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: min(100%, 940px) !important;
    max-width: 940px !important;
    min-width: 0 !important;
    min-height: clamp(430px, 31vw, 540px) !important;
    height: clamp(430px, 31vw, 540px) !important;
    padding: clamp(22px, 1.75vw, 30px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: center !important;
    justify-self: end !important;
    overflow: hidden !important;
    outline: none !important;
  }

  /* Scale down title and spacing to match the shorter Story Logic card. */
  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: 96% !important;
    max-width: 96% !important;
    min-width: 0 !important;
    font-size: clamp(31px, 2.55vw, 46px) !important;
    line-height: .96 !important;
    margin: clamp(32px, 3vw, 48px) 0 clamp(18px, 1.8vw, 28px) !important;
    letter-spacing: -.055em !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title br,
  body .hero .hero-panel .chain-card .chain-card-title br {
    display: none !important;
  }

  /* Scale down badges and background orbit. */
  body .hero .hero-panel .chain-card .chain-badge,
  body .hero .hero-panel .ocean-card.chain-card .chain-badge {
    font-size: clamp(9px, .72vw, 12px) !important;
    padding: 6px 12px !important;
  }

  body .hero .hero-panel .chain-card .chain-badge.right,
  body .hero .hero-panel .ocean-card.chain-card .chain-badge.right {
    right: clamp(22px, 1.8vw, 30px) !important;
    top: clamp(22px, 1.8vw, 30px) !important;
  }

  body .hero .hero-panel .chain-card-glow {
    right: 5% !important;
    top: 7% !important;
    width: clamp(145px, 13.5vw, 230px) !important;
    height: clamp(145px, 13.5vw, 230px) !important;
  }

  /* More controlled Story Logic grid for the shorter card. */
  body .hero .hero-panel .chain-flow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) !important;
    gap: clamp(8px, .75vw, 12px) clamp(8px, .8vw, 12px) !important;
    align-items: center !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.ocean,
  body .hero .hero-panel .chain-step.rain,
  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    position: static !important;
    transform: none !important;
    min-height: clamp(44px, 3vw, 56px) !important;
    height: auto !important;
    padding: clamp(8px, .68vw, 10px) clamp(10px, .85vw, 14px) !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body .hero .hero-panel .chain-step span {
    font-size: clamp(7px, .58vw, 9px) !important;
  }

  body .hero .hero-panel .chain-step strong {
    font-size: clamp(10px, .78vw, 13px) !important;
  }

  /* Keep 05 on the same row as 04, with a shorter width. */
  body .hero .hero-panel .chain-step.food {
    grid-column: 1 / 2 !important;
    grid-row: 5 !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step.cost {
    grid-column: 3 / 4 !important;
    grid-row: 5 !important;
    width: 100% !important;
    max-width: 330px !important;
    justify-self: end !important;
  }

  /* Move the arrow between 04 and 05 to the centre of that row. */
  body .hero .hero-panel .chain-flow > .chain-arrow:nth-of-type(4),
  body .hero .hero-panel .chain-flow > .chain-step.food + .chain-arrow {
    display: block !important;
    grid-column: 2 / 3 !important;
    grid-row: 5 !important;
    align-self: center !important;
    justify-self: center !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* If other arrows collide after the resize, keep them small and centred. */
  body .hero .hero-panel .chain-arrow {
    font-size: clamp(12px, .9vw, 16px) !important;
    line-height: 1 !important;
  }

  body .hero .hero-panel .chain-bottom-row {
    display: flex !important;
    margin-top: clamp(14px, 1.35vw, 22px) !important;
    padding-top: clamp(10px, 1vw, 16px) !important;
  }
}

/* Tablet/mobile remains safe and natural. */
@media (max-width: 1180px) {
  body .hero .hero-copy,
  body .hero .hero-panel {
    min-height: auto !important;
    height: auto !important;
  }

  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    min-height: 440px !important;
    height: auto !important;
    margin-inline: auto !important;
  }
}


/* ==========================================================================
   v0.8.9 HERO PROPORTIONAL STORY LOGIC SHRINK + LEFT FILL
   Requested:
   - Reduce Story Logic card height and width proportionally.
   - Let the Interactive Prototype / left hero section fill the middle gap.
   - Keep the two sections visually balanced.
   ========================================================================== */

@media (min-width: 1181px) {
  /* Left section gets more of the hero width; Story Logic stays right-aligned. */
  body .hero .hero-grid {
    width: 100% !important;
    max-width: 1760px !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(520px, 48%) minmax(0, 52%) !important;
    gap: clamp(24px, 2.2vw, 42px) !important;
    align-items: center !important;
    padding-left: clamp(18px, 2.2vw, 42px) !important;
    padding-right: clamp(18px, 2.2vw, 42px) !important;
  }

  /* Interactive Prototype section expands into the available middle space. */
  body .hero .hero-copy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: clamp(430px, 31vw, 535px) !important;
    height: clamp(430px, 31vw, 535px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: center !important;
  }

  body .hero .hero-copy h1 {
    max-width: 100% !important;
    font-size: clamp(52px, 5.05vw, 92px) !important;
    line-height: .98 !important;
    letter-spacing: -.06em !important;
  }

  body .hero .hero-copy .subtitle,
  body .hero .hero-copy p {
    max-width: 92% !important;
  }

  body .hero .hero-actions {
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  /* Right lane remains full width, card aligns to the far right. */
  body .hero .hero-panel {
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(430px, 31vw, 535px) !important;
    height: clamp(430px, 31vw, 535px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    align-self: center !important;
  }

  /* Story Logic card is proportionally smaller in both width and height. */
  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: min(100%, 820px) !important;
    max-width: 820px !important;
    min-width: 0 !important;
    min-height: clamp(390px, 28vw, 500px) !important;
    height: clamp(390px, 28vw, 500px) !important;
    padding: clamp(20px, 1.65vw, 28px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: center !important;
    justify-self: end !important;
    overflow: hidden !important;
    outline: none !important;
  }

  /* Title scaled down proportionally and extended across the smaller card. */
  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: 96% !important;
    max-width: 96% !important;
    min-width: 0 !important;
    font-size: clamp(29px, 2.35vw, 43px) !important;
    line-height: .96 !important;
    margin: clamp(30px, 2.7vw, 44px) 0 clamp(16px, 1.6vw, 24px) !important;
    letter-spacing: -.055em !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title br,
  body .hero .hero-panel .chain-card .chain-card-title br {
    display: none !important;
  }

  body .hero .hero-panel .chain-card .chain-badge,
  body .hero .hero-panel .ocean-card.chain-card .chain-badge {
    font-size: clamp(8px, .62vw, 10px) !important;
    padding: 5px 10px !important;
  }

  body .hero .hero-panel .chain-card .chain-badge.right,
  body .hero .hero-panel .ocean-card.chain-card .chain-badge.right {
    right: clamp(20px, 1.65vw, 28px) !important;
    top: clamp(20px, 1.65vw, 28px) !important;
  }

  body .hero .hero-panel .chain-card-glow {
    right: 5% !important;
    top: 7% !important;
    width: clamp(130px, 11.5vw, 205px) !important;
    height: clamp(130px, 11.5vw, 205px) !important;
  }

  body .hero .hero-panel .chain-flow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) !important;
    gap: clamp(7px, .65vw, 10px) clamp(7px, .7vw, 10px) !important;
    align-items: center !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.ocean,
  body .hero .hero-panel .chain-step.rain,
  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    position: static !important;
    transform: none !important;
    min-height: clamp(40px, 2.7vw, 50px) !important;
    height: auto !important;
    padding: clamp(7px, .58vw, 9px) clamp(9px, .75vw, 12px) !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body .hero .hero-panel .chain-step span {
    font-size: clamp(7px, .52vw, 8px) !important;
  }

  body .hero .hero-panel .chain-step strong {
    font-size: clamp(9px, .68vw, 11px) !important;
  }

  body .hero .hero-panel .chain-step.food {
    grid-column: 1 / 2 !important;
    grid-row: 5 !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step.cost {
    grid-column: 3 / 4 !important;
    grid-row: 5 !important;
    width: 100% !important;
    max-width: 290px !important;
    justify-self: end !important;
  }

  body .hero .hero-panel .chain-flow > .chain-step.food + .chain-arrow,
  body .hero .hero-panel .chain-flow > .chain-arrow:nth-of-type(4) {
    display: block !important;
    grid-column: 2 / 3 !important;
    grid-row: 5 !important;
    align-self: center !important;
    justify-self: center !important;
    transform: none !important;
    margin: 0 !important;
  }

  body .hero .hero-panel .chain-arrow {
    font-size: clamp(10px, .75vw, 13px) !important;
    line-height: 1 !important;
  }

  body .hero .hero-panel .chain-bottom-row {
    display: flex !important;
    margin-top: clamp(12px, 1.1vw, 18px) !important;
    padding-top: clamp(8px, .8vw, 12px) !important;
  }
}

@media (max-width: 1180px) {
  body .hero .hero-grid {
    grid-template-columns: 1fr !important;
  }

  body .hero .hero-copy,
  body .hero .hero-panel {
    min-height: auto !important;
    height: auto !important;
  }

  body .hero .hero-panel {
    justify-content: center !important;
  }

  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    min-height: 440px !important;
    height: auto !important;
    margin-inline: auto !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: 100% !important;
    max-width: 100% !important;
  }

  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    grid-column: auto !important;
    grid-row: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ==========================================================================
   v0.8.9 STORY LOGIC FLOW RESTORE + GLOW FIX
   Requested:
   - Restore 03 Disaster losses to the original centred style.
   - Put arrows on both sides of 03.
   - Remove the large vertical gap between 03 and the 04/05 row.
   - Restore the Story Logic glow/radar effect.
   ========================================================================== */

@media (min-width: 1181px) {
  /* Keep the compact right-aligned Story Logic card from v0.8.9 */
  body .hero .hero-grid {
    grid-template-columns: minmax(520px, 48%) minmax(0, 52%) !important;
    gap: clamp(24px, 2.2vw, 42px) !important;
    align-items: center !important;
  }

  body .hero .hero-copy,
  body .hero .hero-panel {
    min-height: clamp(430px, 31vw, 535px) !important;
    height: clamp(430px, 31vw, 535px) !important;
    align-self: center !important;
  }

  body .hero .hero-panel {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: min(100%, 820px) !important;
    max-width: 820px !important;
    min-width: 0 !important;
    min-height: clamp(390px, 28vw, 500px) !important;
    height: clamp(390px, 28vw, 500px) !important;
    padding: clamp(20px, 1.65vw, 28px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Restore the title scale from v0.8.9 */
  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: 96% !important;
    max-width: 96% !important;
    font-size: clamp(29px, 2.35vw, 43px) !important;
    line-height: .96 !important;
    margin: clamp(30px, 2.7vw, 44px) 0 clamp(16px, 1.6vw, 24px) !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title br,
  body .hero .hero-panel .chain-card .chain-card-title br {
    display: none !important;
  }

  /* Three-row chain layout:
     Row 1: 01  →  02
     Row 2: →  03  →
     Row 3: 04  →  05
  */
  body .hero .hero-panel .chain-flow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: clamp(8px, .8vw, 12px) !important;
    row-gap: clamp(9px, .75vw, 13px) !important;
    align-items: center !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.ocean,
  body .hero .hero-panel .chain-step.rain,
  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    position: static !important;
    transform: none !important;
    min-height: clamp(40px, 2.7vw, 50px) !important;
    height: auto !important;
    padding: clamp(7px, .58vw, 9px) clamp(9px, .75vw, 12px) !important;
    max-width: 100% !important;
    width: auto !important;
  }

  body .hero .hero-panel .chain-step.ocean {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  body .hero .hero-panel .chain-step.rain {
    grid-column: 3 / 4 !important;
    grid-row: 1 !important;
  }

  body .hero .hero-panel .chain-step.loss {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    width: max-content !important;
    min-width: 120px !important;
    max-width: 150px !important;
    justify-self: center !important;
  }

  body .hero .hero-panel .chain-step.food {
    grid-column: 1 / 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step.cost {
    grid-column: 3 / 4 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 290px !important;
    justify-self: end !important;
  }

  /* Arrows are ordered in the HTML as children 2,4,6,8. */
  body .hero .hero-panel .chain-flow > .chain-arrow {
    display: block !important;
    font-size: clamp(10px, .75vw, 13px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    transform: none !important;
    align-self: center !important;
    justify-self: center !important;
  }

  /* Row 1 arrow: between 01 and 02 */
  body .hero .hero-panel .chain-flow > .chain-arrow:nth-child(2) {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
  }

  /* Row 2 left arrow: left of 03 */
  body .hero .hero-panel .chain-flow > .chain-arrow:nth-child(4) {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
  }

  /* Row 2 right arrow: right of 03 */
  body .hero .hero-panel .chain-flow > .chain-arrow:nth-child(6) {
    grid-column: 3 / 4 !important;
    grid-row: 2 !important;
  }

  /* Row 3 arrow: between 04 and 05 */
  body .hero .hero-panel .chain-flow > .chain-arrow:nth-child(8) {
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
  }

  body .hero .hero-panel .chain-step span {
    font-size: clamp(7px, .52vw, 8px) !important;
  }

  body .hero .hero-panel .chain-step strong {
    font-size: clamp(9px, .68vw, 11px) !important;
  }

  body .hero .hero-panel .chain-bottom-row {
    display: flex !important;
    margin-top: clamp(12px, 1.1vw, 18px) !important;
    padding-top: clamp(8px, .8vw, 12px) !important;
  }

  /* Restore the glow/radar visuals that were suppressed in test/compact passes. */
  body .hero .hero-panel .chain-card-glow,
  body .hero .hero-panel .ocean-card.chain-card .chain-card-glow {
    display: block !important;
    position: absolute !important;
    right: 5% !important;
    top: 6% !important;
    width: clamp(150px, 12.5vw, 230px) !important;
    height: clamp(150px, 12.5vw, 230px) !important;
    border-radius: 50% !important;
    opacity: .95 !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(93,227,255,.20) 0 2px, transparent 4px),
      radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(93,227,255,.30) 29% 30%, transparent 31% 52%, rgba(93,227,255,.22) 53% 54%, transparent 55%),
      conic-gradient(from 210deg, transparent 0 68%, rgba(93,227,255,.30) 72%, rgba(93,227,255,.10) 78%, transparent 84% 100%) !important;
    box-shadow: 0 0 60px rgba(93,227,255,.10) !important;
    filter: drop-shadow(0 0 18px rgba(93,227,255,.16)) !important;
    z-index: 0 !important;
  }

  body .hero .hero-panel .ocean-card.chain-card::after,
  body .hero .hero-panel .chain-card::after {
    display: block !important;
    opacity: .85 !important;
  }
}

@media (max-width: 1180px) {
  body .hero .hero-panel .chain-flow {
    grid-template-columns: 1fr !important;
  }

  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body .hero .hero-panel .chain-flow > .chain-arrow {
    display: none !important;
  }
}


/* ==========================================================================
   v0.8.9 STORY LOGIC ARROW + GLOW + RESPONSIVE RETAIN FIX
   Requested:
   - Move the 04 -> 05 arrow back to the middle between 04 and 05.
   - Restore visible glow/radar effect.
   - Keep the proper Story Logic visual card on tablet/mobile instead of
     collapsing into plain text.
   ========================================================================== */

/* Desktop/tablet-wide layout */
@media (min-width: 1181px) {
  body .hero .hero-panel .chain-flow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: clamp(8px, .8vw, 12px) !important;
    row-gap: clamp(9px, .75vw, 13px) !important;
    align-items: center !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step.ocean {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  body .hero .hero-panel .chain-step.rain {
    grid-column: 3 / 4 !important;
    grid-row: 1 !important;
  }

  body .hero .hero-panel .chain-step.loss {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    width: max-content !important;
    min-width: 120px !important;
    max-width: 150px !important;
    justify-self: center !important;
  }

  body .hero .hero-panel .chain-step.food {
    grid-column: 1 / 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step.cost {
    grid-column: 3 / 4 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 290px !important;
    justify-self: end !important;
  }

  body .hero .hero-panel .chain-flow > .chain-arrow {
    display: block !important;
    font-size: clamp(10px, .75vw, 13px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    transform: none !important;
    align-self: center !important;
    justify-self: center !important;
  }

  /* HTML order is: 01, arrow, 02, arrow, 03, arrow, 04, arrow, 05 */
  body .hero .hero-panel .chain-flow > .chain-arrow:nth-child(2) {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
  }

  body .hero .hero-panel .chain-flow > .chain-arrow:nth-child(4) {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
  }

  body .hero .hero-panel .chain-flow > .chain-arrow:nth-child(6) {
    grid-column: 3 / 4 !important;
    grid-row: 2 !important;
  }

  /* This is the 04 -> 05 arrow. Force it into the centre column of the 04/05 row. */
  body .hero .hero-panel .chain-flow > .chain-arrow:nth-child(8),
  body .hero .hero-panel .chain-flow > .chain-step.food + .chain-arrow {
    display: block !important;
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
    align-self: center !important;
    justify-self: center !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* Strong glow/radar restore. Use pseudo elements so it works even if .chain-card-glow is hidden/missing. */
body .hero .hero-panel .ocean-card.chain-card,
body .hero .hero-panel .chain-card {
  position: relative !important;
  isolation: isolate !important;
}

body .hero .hero-panel .ocean-card.chain-card::before,
body .hero .hero-panel .chain-card::before {
  content: "" !important;
  position: absolute !important;
  right: 4% !important;
  top: 4% !important;
  width: clamp(160px, 17vw, 300px) !important;
  height: clamp(160px, 17vw, 300px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .92 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(93,227,255,.18) 0 2px, transparent 4px),
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(93,227,255,.34) 29% 30%, transparent 31% 52%, rgba(93,227,255,.24) 53% 54%, transparent 55%),
    conic-gradient(from 215deg, transparent 0 66%, rgba(93,227,255,.38) 71%, rgba(93,227,255,.14) 79%, transparent 86% 100%) !important;
  box-shadow:
    0 0 44px rgba(93,227,255,.10),
    0 0 90px rgba(93,227,255,.08) !important;
  filter: drop-shadow(0 0 18px rgba(93,227,255,.18)) !important;
}

body .hero .hero-panel .chain-card-glow,
body .hero .hero-panel .ocean-card.chain-card .chain-card-glow {
  display: block !important;
  position: absolute !important;
  right: 4% !important;
  top: 4% !important;
  width: clamp(160px, 17vw, 300px) !important;
  height: clamp(160px, 17vw, 300px) !important;
  border-radius: 50% !important;
  opacity: .95 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Keep content above restored glow. */
body .hero .hero-panel .ocean-card.chain-card > *,
body .hero .hero-panel .chain-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Tablet/mobile: retain the designed Story Logic card, do not collapse to plain text. */
@media (max-width: 1180px) {
  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    display: block !important;
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    min-height: 440px !important;
    height: auto !important;
    margin-inline: auto !important;
    padding: clamp(22px, 5vw, 34px) !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background:
      linear-gradient(160deg, rgba(18,67,96,.86), rgba(8,27,43,.88)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: var(--shadow) !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(28px, 7vw, 42px) !important;
    line-height: .98 !important;
    margin: 34px 0 22px !important;
  }

  body .hero .hero-panel .chain-flow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.ocean,
  body .hero .hero-panel .chain-step.rain,
  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    display: grid !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 11px 14px !important;
    position: static !important;
    transform: none !important;
    border-radius: 16px !important;
  }

  body .hero .hero-panel .chain-flow > .chain-arrow {
    display: none !important;
  }

  body .hero .hero-panel .chain-bottom-row {
    display: flex !important;
    margin-top: 18px !important;
    padding-top: 14px !important;
  }
}


/* ==========================================================================
   v0.8.9 STORY LOGIC GLOW + MOBILE/TABLET DESIGN FIX
   Requested:
   - Restore a stronger visible glow/radar effect.
   - Keep the desktop Story Logic layout that is now acceptable.
   - Redesign the mobile/tablet Story Logic card so it stays polished and does
     not collapse into plain text.
   ========================================================================== */

/* Strong visible radar/glow layer for all view sizes */
body .hero .hero-panel .ocean-card.chain-card,
body .hero .hero-panel .chain-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Main radar rings + beam */
body .hero .hero-panel .ocean-card.chain-card::before,
body .hero .hero-panel .chain-card::before {
  content: "" !important;
  position: absolute !important;
  right: clamp(22px, 5%, 48px) !important;
  top: clamp(20px, 6%, 44px) !important;
  width: clamp(175px, 18vw, 330px) !important;
  height: clamp(175px, 18vw, 330px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .98 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(93,227,255,.34) 0 3px, transparent 5px),
    radial-gradient(circle at 50% 50%, transparent 0 17%, rgba(93,227,255,.34) 18% 20%, transparent 21% 34%, rgba(93,227,255,.30) 35% 37%, transparent 38% 58%, rgba(93,227,255,.25) 59% 60%, transparent 61%),
    conic-gradient(from 300deg, transparent 0 69%, rgba(93,227,255,.50) 74%, rgba(93,227,255,.22) 80%, transparent 88% 100%) !important;
  box-shadow:
    0 0 32px rgba(93,227,255,.16),
    0 0 95px rgba(93,227,255,.12),
    inset 0 0 42px rgba(93,227,255,.08) !important;
  filter: drop-shadow(0 0 22px rgba(93,227,255,.22)) !important;
}

/* Soft wide cyan ambience around the radar */
body .hero .hero-panel .ocean-card.chain-card::after,
body .hero .hero-panel .chain-card::after {
  content: "" !important;
  position: absolute !important;
  right: -6% !important;
  top: -10% !important;
  width: 46% !important;
  height: 58% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .55 !important;
  background:
    radial-gradient(circle at 55% 48%, rgba(93,227,255,.22), rgba(93,227,255,.08) 36%, transparent 70%) !important;
  filter: blur(6px) !important;
}

/* Preserve any existing glow element and make it visible if the HTML uses it. */
body .hero .hero-panel .chain-card-glow,
body .hero .hero-panel .ocean-card.chain-card .chain-card-glow {
  display: block !important;
  position: absolute !important;
  right: clamp(22px, 5%, 48px) !important;
  top: clamp(20px, 6%, 44px) !important;
  width: clamp(175px, 18vw, 330px) !important;
  height: clamp(175px, 18vw, 330px) !important;
  border-radius: 50% !important;
  opacity: .95 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Keep real content above the radar. */
body .hero .hero-panel .ocean-card.chain-card > *,
body .hero .hero-panel .chain-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Tablet and phone Story Logic redesign */
@media (max-width: 1180px) {
  body .hero .hero-panel {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    display: block !important;
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    min-width: 0 !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: clamp(22px, 5vw, 34px) !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background:
      linear-gradient(160deg, rgba(18,67,96,.88), rgba(8,27,43,.92)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow:
      0 18px 55px rgba(0,0,0,.25),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  /* Mobile/tablet badges return to pill design and wrap cleanly */
  body .hero .hero-panel .chain-badges,
  body .hero .hero-panel .chain-card-head {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 26px !important;
  }

  body .hero .hero-panel .chain-card .chain-badge,
  body .hero .hero-panel .ocean-card.chain-card .chain-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    padding: 7px 12px !important;
    font-size: clamp(10px, 2.5vw, 12px) !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    background: rgba(93,227,255,.13) !important;
    border: 1px solid rgba(93,227,255,.28) !important;
    color: #dff8ff !important;
  }

  body .hero .hero-panel .chain-card .chain-badge.right,
  body .hero .hero-panel .ocean-card.chain-card .chain-badge.right {
    position: static !important;
    margin-left: 0 !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(29px, 7.5vw, 44px) !important;
    line-height: .98 !important;
    letter-spacing: -.05em !important;
    margin: 18px 0 24px !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title br,
  body .hero .hero-panel .chain-card .chain-card-title br {
    display: none !important;
  }

  /* Designed stacked steps instead of plain text list */
  body .hero .hero-panel .chain-flow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.ocean,
  body .hero .hero-panel .chain-step.rain,
  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 10px !important;
    align-items: center !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px !important;
    padding: 11px 14px !important;
    position: static !important;
    transform: none !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.075) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: inset 4px 0 0 rgba(93,227,255,.85) !important;
  }

  body .hero .hero-panel .chain-step.loss {
    box-shadow: inset 4px 0 0 rgba(255,181,71,.95) !important;
  }

  body .hero .hero-panel .chain-step.food {
    box-shadow: inset 4px 0 0 rgba(55,201,139,.95) !important;
  }

  body .hero .hero-panel .chain-step.cost {
    box-shadow: inset 4px 0 0 rgba(255,99,109,.95) !important;
  }

  body .hero .hero-panel .chain-step span {
    font-size: 11px !important;
    line-height: 1 !important;
    opacity: .9 !important;
    margin: 0 !important;
  }

  body .hero .hero-panel .chain-step strong {
    font-size: clamp(14px, 3.8vw, 17px) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  body .hero .hero-panel .chain-flow > .chain-arrow {
    display: none !important;
  }

  body .hero .hero-panel .chain-bottom-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
    font-size: clamp(12px, 3vw, 14px) !important;
  }

  /* Move radar to top-right and keep it subtle behind content on mobile/tablet */
  body .hero .hero-panel .ocean-card.chain-card::before,
  body .hero .hero-panel .chain-card::before {
    right: -4% !important;
    top: 4% !important;
    width: clamp(140px, 38vw, 230px) !important;
    height: clamp(140px, 38vw, 230px) !important;
    opacity: .72 !important;
  }

  body .hero .hero-panel .ocean-card.chain-card::after,
  body .hero .hero-panel .chain-card::after {
    right: -16% !important;
    top: -8% !important;
    width: 62% !important;
    height: 42% !important;
    opacity: .42 !important;
  }
}

/* Smaller phones: keep the card compact and readable. */
@media (max-width: 560px) {
  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }

  body .hero .hero-panel .chain-card .chain-badge,
  body .hero .hero-panel .ocean-card.chain-card .chain-badge {
    font-size: 10px !important;
    padding: 6px 10px !important;
  }

  body .hero .hero-panel .chain-bottom-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}


/* ==========================================================================
   v0.8.9 STORY LOGIC RADAR + CARD PULSE ANIMATION FIX
   Requested:
   - Keep current desktop and mobile/tablet layout.
   - Restore animated radar sweep/glow.
   - Restore subtle pulsating effect on the 5 Story Logic cards.
   ========================================================================== */

/* Radar motion */
@keyframes storyRadarSweep {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: .82;
  }
  50% {
    transform: rotate(180deg) scale(1.035);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: .82;
  }
}

@keyframes storyRadarAura {
  0%, 100% {
    opacity: .34;
    transform: scale(.94);
  }
  50% {
    opacity: .62;
    transform: scale(1.06);
  }
}

/* Card pulse motion */
@keyframes storyStepPulse {
  0%, 100% {
    transform: translateZ(0) scale(1);
    box-shadow:
      inset 4px 0 0 var(--step-accent, rgba(93,227,255,.85)),
      0 0 0 rgba(93,227,255,0),
      inset 0 1px 0 rgba(255,255,255,.05);
  }
  50% {
    transform: translateZ(0) scale(1.018);
    box-shadow:
      inset 4px 0 0 var(--step-accent, rgba(93,227,255,.95)),
      0 0 24px rgba(93,227,255,.18),
      inset 0 1px 0 rgba(255,255,255,.08);
  }
}

/* Make sure the radar layer is visible and animated behind the content */
body .hero .hero-panel .ocean-card.chain-card,
body .hero .hero-panel .chain-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

body .hero .hero-panel .ocean-card.chain-card::before,
body .hero .hero-panel .chain-card::before {
  transform-origin: 50% 50% !important;
  animation: storyRadarSweep 8.5s linear infinite !important;
  will-change: transform, opacity !important;
  opacity: .92 !important;
  z-index: 0 !important;
}

body .hero .hero-panel .ocean-card.chain-card::after,
body .hero .hero-panel .chain-card::after {
  animation: storyRadarAura 4.8s ease-in-out infinite !important;
  will-change: transform, opacity !important;
  z-index: 0 !important;
}

body .hero .hero-panel .chain-card-glow,
body .hero .hero-panel .ocean-card.chain-card .chain-card-glow {
  animation: storyRadarSweep 8.5s linear infinite !important;
  transform-origin: 50% 50% !important;
  will-change: transform, opacity !important;
}

/* Keep all real content above the radar */
body .hero .hero-panel .ocean-card.chain-card > *,
body .hero .hero-panel .chain-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Restore pulsating Story Logic cards */
body .hero .hero-panel .chain-step {
  --step-accent: rgba(93,227,255,.88);
  animation: storyStepPulse 4.8s ease-in-out infinite !important;
  transform-origin: center center !important;
  will-change: transform, box-shadow !important;
}

body .hero .hero-panel .chain-step.ocean {
  --step-accent: rgba(93,227,255,.92);
  animation-delay: 0s !important;
}

body .hero .hero-panel .chain-step.rain {
  --step-accent: rgba(93,227,255,.92);
  animation-delay: .35s !important;
}

body .hero .hero-panel .chain-step.loss {
  --step-accent: rgba(255,181,71,.95);
  animation-delay: .7s !important;
}

body .hero .hero-panel .chain-step.food {
  --step-accent: rgba(55,201,139,.95);
  animation-delay: 1.05s !important;
}

body .hero .hero-panel .chain-step.cost {
  --step-accent: rgba(255,99,109,.95);
  animation-delay: 1.4s !important;
}

/* Stronger hover/focus feedback, useful on desktop and keyboard navigation */
body .hero .hero-panel .chain-step:hover,
body .hero .hero-panel .chain-step:focus-visible {
  animation-play-state: paused !important;
  transform: translateZ(0) scale(1.035) !important;
  box-shadow:
    inset 4px 0 0 var(--step-accent, rgba(93,227,255,.95)),
    0 0 30px rgba(93,227,255,.24),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* Mobile/tablet refinement after review: current layout is good; only tighten the footer row spacing. */
@media (max-width: 1180px) {
  body .hero .hero-panel .chain-bottom-row {
    gap: 10px !important;
  }

  body .hero .hero-panel .chain-step {
    animation-duration: 5.6s !important;
  }
}

/* Respect reduced-motion users while keeping the static design intact */
@media (prefers-reduced-motion: reduce) {
  body .hero .hero-panel .ocean-card.chain-card::before,
  body .hero .hero-panel .chain-card::before,
  body .hero .hero-panel .ocean-card.chain-card::after,
  body .hero .hero-panel .chain-card::after,
  body .hero .hero-panel .chain-card-glow,
  body .hero .hero-panel .chain-step {
    animation: none !important;
    transform: none !important;
  }
}


/* ==========================================================================
   v0.8.9 STORY LOGIC SEQUENTIAL PULSE + HOVER EDGE CLEANUP
   Scope:
   - Preserve the confirmed working radar/glow from v0.8.9.
   - Remove double-colour edge effect on hover.
   - Restore automatic 01 -> 05 pulse sequence that repeats.
   ========================================================================== */

/* Sequential pulse: one card becomes active, then the next, then repeats. */
@keyframes storyStepSequentialPulse {
  0%, 8%, 100% {
    transform: translateZ(0) scale(1);
    box-shadow:
      inset 4px 0 0 var(--step-accent, rgba(93,227,255,.88)),
      inset 0 1px 0 rgba(255,255,255,.05),
      0 0 0 rgba(93,227,255,0);
    filter: none;
  }

  12%, 22% {
    transform: translateZ(0) scale(1.018);
    box-shadow:
      inset 4px 0 0 var(--step-accent, rgba(93,227,255,.95)),
      inset 0 1px 0 rgba(255,255,255,.10),
      0 0 22px rgba(93,227,255,.18);
    filter: brightness(1.08);
  }

  28%, 100% {
    transform: translateZ(0) scale(1);
    box-shadow:
      inset 4px 0 0 var(--step-accent, rgba(93,227,255,.88)),
      inset 0 1px 0 rgba(255,255,255,.05),
      0 0 0 rgba(93,227,255,0);
    filter: none;
  }
}

/* Use one clean accent edge only. This removes the doubled edge seen on hover. */
body .hero .hero-panel .chain-step,
body .hero .hero-panel .chain-step.ocean,
body .hero .hero-panel .chain-step.rain,
body .hero .hero-panel .chain-step.loss,
body .hero .hero-panel .chain-step.food,
body .hero .hero-panel .chain-step.cost {
  border-left: 0 !important;
  box-shadow:
    inset 4px 0 0 var(--step-accent, rgba(93,227,255,.88)),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  animation-name: storyStepSequentialPulse !important;
  animation-duration: 10s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  will-change: transform, box-shadow, filter !important;
}

/* 01 -> 05 sequence timing */
body .hero .hero-panel .chain-step.ocean {
  --step-accent: rgba(93,227,255,.92);
  animation-delay: 0s !important;
}

body .hero .hero-panel .chain-step.rain {
  --step-accent: rgba(93,227,255,.92);
  animation-delay: 1.2s !important;
}

body .hero .hero-panel .chain-step.loss {
  --step-accent: rgba(255,181,71,.95);
  animation-delay: 2.4s !important;
}

body .hero .hero-panel .chain-step.food {
  --step-accent: rgba(55,201,139,.95);
  animation-delay: 3.6s !important;
}

body .hero .hero-panel .chain-step.cost {
  --step-accent: rgba(255,99,109,.95);
  animation-delay: 4.8s !important;
}

/* Hover/focus: pause only the hovered card and use one clean accent edge. */
body .hero .hero-panel .chain-step:hover,
body .hero .hero-panel .chain-step:focus-visible {
  animation-play-state: paused !important;
  transform: translateZ(0) scale(1.026) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    inset 4px 0 0 var(--step-accent, rgba(93,227,255,.95)),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 24px rgba(93,227,255,.20) !important;
}

/* Mobile/tablet keeps the same sequence, slightly slower and softer. */
@media (max-width: 1180px) {
  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.ocean,
  body .hero .hero-panel .chain-step.rain,
  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    animation-duration: 11.5s !important;
    box-shadow:
      inset 4px 0 0 var(--step-accent, rgba(93,227,255,.88)),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }
}

/* Preserve reduced-motion behaviour. */
@media (prefers-reduced-motion: reduce) {
  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.ocean,
  body .hero .hero-panel .chain-step.rain,
  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}


/* ==========================================================================
   v0.8.9 STORY TRANSITION FULL-WIDTH ALIGNMENT FIX
   Scope:
   - Do not touch the working Story Logic/radar/map/chart sections.
   - Expand only the Story Transition card to the same inner page width used
     by the map/story section above.
   - Add proper spacing between selected country name and "lens".
   ========================================================================== */

.map-lens-transition .transition-card {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* Keep readable line length inside the wider card. */
.map-lens-transition .transition-card h2,
.map-lens-transition .transition-card p:not(.eyebrow) {
  max-width: 880px !important;
}

/* Use the full transition-card width for the flow row. */
.map-lens-transition .transition-flow {
  width: 100% !important;
  grid-template-columns: auto minmax(90px, 1fr) auto minmax(90px, 1fr) auto !important;
}

/* Fix "Papua New Guinealens" by forcing a visible gap before "lens". */
.map-lens-transition .transition-flow span strong {
  margin-right: .35em !important;
}

/* Prevent the final selected-country pill from becoming too tight. */
.map-lens-transition .transition-flow span:last-child {
  padding-inline: 18px !important;
  min-width: fit-content !important;
}

/* Tablet/mobile: retain a clean stacked transition card. */
@media (max-width: 760px) {
  .map-lens-transition .transition-card {
    width: 100% !important;
    max-width: none !important;
  }

  .map-lens-transition .transition-flow {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .map-lens-transition .transition-flow i {
    width: 100% !important;
    min-height: 2px !important;
  }

  .map-lens-transition .transition-flow span {
    width: 100% !important;
  }
}


/* ==========================================================================
   v0.8.9 MOBILE STORY TRANSITION LINE WIDTH FIX
   Scope:
   - Do not touch desktop/tablet Story Transition layout.
   - Do not touch map, radar, charts, or Story Logic.
   - Fix only mobile stacked transition connector lines so they do not span
     the full card width.
   ========================================================================== */

@media (max-width: 760px) {
  .map-lens-transition .transition-flow {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 10px !important;
  }

  .map-lens-transition .transition-flow span {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Connector line: shorter, centered, and visually lighter on mobile. */
  .map-lens-transition .transition-flow i {
    width: min(64%, 260px) !important;
    max-width: 260px !important;
    min-width: 120px !important;
    min-height: 2px !important;
    height: 2px !important;
    margin: 0 auto !important;
    border-radius: 999px !important;
    opacity: .85 !important;
  }
}

@media (max-width: 420px) {
  .map-lens-transition .transition-flow i {
    width: min(58%, 220px) !important;
    min-width: 100px !important;
  }
}

/* ========================================================================== 
   v0.9.1 STORY COPY POLISH
   Scope:
   - Text hierarchy and compactness only.
   - Do not alter working map, chart canvases, data loading, radar/glow, or animation logic.
   ========================================================================== */

/* Hero pressure-chain card: keep the animation, but make the message simpler and easier to read. */
body .hero .hero-panel .chain-card-head {
  align-items: center !important;
  gap: 12px !important;
}

body .hero .hero-panel .chain-card-title {
  max-width: 720px !important;
  margin-bottom: clamp(16px, 2.2vw, 22px) !important;
  letter-spacing: -.025em !important;
}

body .hero .hero-panel .chain-flow {
  gap: clamp(8px, 1.25vw, 16px) !important;
}

body .hero .hero-panel .chain-step {
  min-height: 50px !important;
  padding: 12px 14px 12px 16px !important;
}

body .hero .hero-panel .chain-step span {
  font-size: .72rem !important;
  letter-spacing: .12em !important;
  opacity: .9 !important;
}

body .hero .hero-panel .chain-step strong {
  font-size: clamp(.9rem, 1.1vw, 1.05rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
}

body .hero .hero-panel .chain-bottom-row {
  margin-top: clamp(14px, 2vw, 20px) !important;
  font-size: .78rem !important;
  opacity: .88 !important;
}

/* Country-evidence labels: make the pressure-chain reading order obvious. */
.chart-focus-rail .focus-step {
  font-weight: 800 !important;
}

.chart-card .card-kicker {
  letter-spacing: .105em !important;
}

/* Final quote: make the closing line feel like the story's main takeaway. */
.final-takeaway-copy .final-quote {
  position: relative;
  margin: clamp(18px, 2.4vw, 26px) 0 !important;
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(93, 227, 255, .32) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(93, 227, 255, .16), transparent 42%),
    linear-gradient(135deg, rgba(15, 70, 93, .78), rgba(8, 42, 58, .88)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.08) !important;
  color: #f6fdff !important;
  font-size: clamp(1.18rem, 2.1vw, 1.85rem) !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

.final-takeaway-copy .final-quote::before {
  content: "“";
  position: absolute;
  left: 14px;
  top: -12px;
  font-size: 4rem;
  line-height: 1;
  color: rgba(93, 227, 255, .42);
  font-weight: 900;
}

/* Method and sources: keep compliance visible but reduce lower-page density. */
.method-header p:not(.eyebrow),
.source-footer-header p:not(.eyebrow),
.readiness-copy p:not(.eyebrow) {
  max-width: 820px !important;
}

.method-card,
.dataset-citation-card,
.metadata-card,
.readiness-item {
  padding: clamp(16px, 1.7vw, 22px) !important;
}

.method-card p,
.dataset-citation-card p,
.metadata-card li,
.readiness-item p {
  line-height: 1.45 !important;
}

.dataset-citation-card dl {
  gap: 7px !important;
  margin-top: 12px !important;
}

.dataset-citation-card dl div {
  padding: 8px 10px !important;
}

.metadata-limitations-grid {
  margin-top: 18px !important;
}

.footer.final-source-footer .small {
  opacity: .78 !important;
}

@media (max-width: 760px) {
  body .hero .hero-panel .chain-flow {
    gap: 9px !important;
  }

  body .hero .hero-panel .chain-step {
    min-height: 46px !important;
    padding-block: 11px !important;
  }

  .final-takeaway-copy .final-quote {
    border-radius: 18px !important;
  }
}


/* v0.9.2 readability and density refinements only. Keeps data, maps, charts, and animations unchanged. */
body .hero .hero-panel .chain-card-head {
  align-items: center;
  gap: 12px;
}

body .hero .hero-panel .chain-dataset-count {
  font-size: clamp(0.68rem, 0.85vw, 0.82rem);
  letter-spacing: 0.04em;
  opacity: 0.9;
}

body .hero .hero-panel .chain-card-title {
  font-size: clamp(1.45rem, 2.35vw, 2.05rem);
  line-height: 1.05;
  max-width: 16ch;
}

body .hero .hero-panel .chain-step,
body .hero .hero-panel .chain-step.ocean,
body .hero .hero-panel .chain-step.rain,
body .hero .hero-panel .chain-step.loss,
body .hero .hero-panel .chain-step.food,
body .hero .hero-panel .chain-step.cost {
  min-height: 54px;
  padding: 12px 14px;
}

body .hero .hero-panel .chain-step span {
  font-size: clamp(0.72rem, 0.85vw, 0.86rem);
  letter-spacing: 0.08em;
}

body .hero .hero-panel .chain-step strong {
  font-size: clamp(0.95rem, 1.1vw, 1.12rem);
  line-height: 1.05;
}

.chart-reading-note {
  max-width: 820px;
  margin-top: 10px;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.65;
  color: rgba(12, 49, 64, 0.82);
  font-weight: 600;
}

.png-lens-section {
  position: relative;
  background:
    linear-gradient(180deg, rgba(232, 247, 252, 0.98) 0%, rgba(246, 252, 254, 1) 24%, rgba(238, 249, 252, 1) 74%, rgba(11, 58, 76, 0.06) 100%);
}

.png-lens-section::before,
.png-lens-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  pointer-events: none;
}

.png-lens-section::before {
  top: 0;
  background: linear-gradient(180deg, rgba(4, 35, 51, 0.06), rgba(4, 35, 51, 0));
}

.png-lens-section::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(4, 35, 51, 0.12), rgba(4, 35, 51, 0));
}

.lens-bridge-copy {
  max-width: 860px;
}

.png-lens-grid .lens-card {
  border: 1px solid rgba(11, 89, 117, 0.12);
  box-shadow: 0 14px 34px rgba(15, 77, 99, 0.10);
}

.readiness-section {
  padding-top: clamp(34px, 5vw, 64px);
  padding-bottom: clamp(34px, 5vw, 64px);
  background: linear-gradient(180deg, rgba(244, 251, 253, 1), rgba(235, 247, 251, 1));
}

.readiness-card {
  border: 1px solid rgba(10, 72, 96, 0.10);
  box-shadow: 0 18px 42px rgba(15, 77, 99, 0.10);
}

.readiness-copy p:not(.eyebrow) {
  max-width: 720px;
}

.readiness-item {
  padding: 16px 16px;
}

.readiness-item p {
  line-height: 1.45;
}

.final-source-footer {
  padding-top: clamp(42px, 5.5vw, 72px);
}

.source-footer-header {
  max-width: 900px;
}

.source-footer-header h2 {
  margin-bottom: 8px;
}

.source-footer-header p:not(.eyebrow) {
  max-width: 760px;
  line-height: 1.5;
}

.source-evidence-grid {
  gap: 8px;
  margin-top: 18px;
  margin-bottom: 20px;
}

.source-evidence-grid span {
  padding: 9px 12px;
  font-size: 0.82rem;
}

.dataset-citation-grid {
  gap: 12px;
}

.dataset-citation-card {
  padding: 18px 18px;
}

.dataset-citation-card h3 {
  margin-bottom: 7px;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
}

.dataset-citation-card p {
  margin-bottom: 12px;
  line-height: 1.45;
}

.dataset-citation-card dl {
  gap: 6px;
}

.dataset-citation-card dl div {
  padding-top: 7px;
}

.metadata-limitations-grid {
  gap: 12px;
  margin-top: 14px;
}

.metadata-card {
  padding: 18px 18px;
}

.metadata-card ul {
  gap: 7px;
}

.footer.final-source-footer .small {
  margin-top: 22px;
  opacity: 0.72;
}

@media (max-width: 760px) {
  body .hero .hero-panel .chain-card-title {
    max-width: 100%;
  }

  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.ocean,
  body .hero .hero-panel .chain-step.rain,
  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    min-height: 48px;
    padding: 10px 12px;
  }

  .chart-reading-note {
    font-size: 0.98rem;
    line-height: 1.58;
  }

  .readiness-item,
  .dataset-citation-card,
  .metadata-card {
    padding: 15px;
  }
}

/* v0.9.3 real-life country highlight feature shell */
.real-life-section {
  background:
    radial-gradient(circle at 18% 8%, rgba(93, 227, 255, .14), transparent 32%),
    linear-gradient(180deg, #eaf6fb 0%, #f8fcfe 100%);
  color: var(--ink);
  padding-top: 64px;
  padding-bottom: 70px;
}

.real-life-header {
  max-width: 940px;
  margin-bottom: 20px;
}

.real-life-header h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.04;
}

.real-life-header p:not(.eyebrow) {
  max-width: 850px;
  color: #456274;
  font-size: 17px;
  line-height: 1.58;
}

.real-life-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 980px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(8, 48, 73, .06);
  border: 1px solid rgba(8, 48, 73, .12);
  color: #37586b;
  font-size: 14px;
  line-height: 1.55;
}

.real-life-note strong {
  color: #073149;
}

.real-life-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  max-width: 1320px;
}


.real-life-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 410px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(8, 48, 73, .12);
  box-shadow: 0 18px 42px rgba(12, 45, 67, .11);
}

.real-life-image {
  position: relative;
  min-height: 118px;
  background:
    linear-gradient(135deg, rgba(93, 227, 255, .20), rgba(17, 120, 154, .08)),
    repeating-linear-gradient(45deg, rgba(7, 49, 73, .06) 0 10px, rgba(7, 49, 73, .025) 10px 20px);
  border-bottom: 1px solid rgba(8, 48, 73, .10);
}

.real-life-image span {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #305265;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.real-life-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px;
}

.real-life-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.real-life-step,
.real-life-year {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}

.real-life-step {
  color: #064c60;
  background: rgba(93, 227, 255, .18);
}

.real-life-year {
  color: #594100;
  background: rgba(255, 178, 64, .20);
}

.real-life-dataset {
  margin: 0 0 8px;
  color: #4b6a7c;
  font-size: 12px;
  font-weight: 800;
}

.real-life-card h3 {
  margin: 0 0 10px;
  color: #073149;
  font-size: 18px;
  line-height: 1.18;
}

.real-life-card p:not(.real-life-dataset) {
  margin: 0;
  color: #435f70;
  font-size: 13px;
  line-height: 1.55;
}

.real-life-source {
  margin-top: auto;
  padding-top: 14px;
  color: #527083;
  font-size: 12px;
  line-height: 1.35;
}

.real-life-source a {
  color: #075d78;
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px solid rgba(7, 93, 120, .28);
}

.real-life-source a:hover {
  border-bottom-color: currentColor;
}

.real-life-grid.pending-country .real-life-card {
  border-style: dashed;
  background: #fbfdfe;
}

@media (max-width: 1180px) {
  .real-life-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .real-life-grid {
    grid-template-columns: 1fr;
  }
  .real-life-card {
    min-height: 0;
  }
  .real-life-note {
    display: block;
  }
}

/* v0.9.4 real-life highlight image support, safe placeholder-first */
.real-life-image.has-image {
  padding: 0;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.real-life-image.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* v0.9.5 targeted refinements: prevent real-life tags from cropping and correct PF map code. */
.real-life-label-row {
  justify-content: flex-start;
  margin-bottom: 8px;
}

.real-life-step {
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
  padding-top: 5px;
  padding-bottom: 5px;
}

.real-life-dataset {
  margin-bottom: 7px;
}

.real-life-year {
  align-self: flex-start;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
  margin: 0 0 12px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.real-life-card h3 {
  margin-top: 0;
}

@media (min-width: 980px) and (max-width: 1280px) {
  .real-life-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* v0.9.6 layout refinements: full-width story sections and corrected responsive grids. */
.real-life-section,
.map-section,
.insight-section,
.final-takeaway-section,
.rules-section,
.footer.final-source-footer {
  width: 100%;
}

/* SS01: real-life cards use the full content width, with 3/2/1 cards per row. */
.real-life-header,
.real-life-note,
.real-life-grid {
  max-width: none;
  width: 100%;
}
.real-life-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.real-life-card {
  min-height: 390px;
}
@media (max-width: 1100px) {
  .real-life-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .real-life-grid {
    grid-template-columns: 1fr;
  }
}

/* SS02: make the regional map section use the available width and keep the five pressure chips equal. */
.map-section .story-layout {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(260px, .42fr) minmax(620px, 1fr);
  gap: clamp(24px, 4vw, 58px);
}
.map-section .story-copy {
  width: 100%;
  max-width: none;
}
.story-chain {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  gap: 10px;
}
.story-chain span {
  width: 100%;
  justify-content: center;
  text-align: center;
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
}
@media (max-width: 1100px) {
  .map-section .story-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .story-chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .story-chain span:last-child {
    grid-column: 1 / -1;
  }
}

/* SS03: make the interpretation guardrail card full-width inside the section. */
.insight-section .insight-card {
  width: 100%;
  max-width: none;
}

/* SS05: fix final takeaway chain so 04 and 05 are full cards, not squeezed into narrow columns. */
.takeaway-chain {
  grid-template-columns: minmax(120px, 1fr) 28px minmax(120px, 1fr) 28px minmax(120px, 1fr) 28px minmax(120px, 1fr) 28px minmax(120px, 1fr);
  gap: clamp(8px, 1vw, 14px);
}
.takeaway-node.food,
.takeaway-node.household {
  min-width: 0;
  width: 100%;
}
@media (max-width: 1180px) {
  .takeaway-chain {
    grid-template-columns: 1fr;
  }
}

/* SS06: full-width rules title and subtitle. */
.rules-header {
  width: 100%;
  max-width: none;
}
.rules-header p:not(.eyebrow) {
  max-width: none;
}

/* SS07: full-width sources title and subtitle. */
.source-footer-header {
  width: 100%;
  max-width: none;
}
.source-footer-header p:not(.eyebrow) {
  max-width: none;
}


/* v0.9.7 country lens full-width responsive layout */
.png-lens-section {
  width: 100% !important;
}

.png-lens-section .section-heading {
  max-width: none !important;
}

.png-lens-section .png-lens-grid {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.png-lens-section .png-lens-grid > .lens-card {
  grid-column: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.png-lens-section .png-lens-grid > .lens-card.wide {
  grid-column: 1 / -1 !important;
}

@media (max-width: 980px) {
  .png-lens-section .png-lens-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .png-lens-section .png-lens-grid > .lens-card.wide {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  .png-lens-section .png-lens-grid {
    grid-template-columns: 1fr !important;
  }

  .png-lens-section .png-lens-grid > .lens-card,
  .png-lens-section .png-lens-grid > .lens-card.wide {
    grid-column: 1 / -1 !important;
  }
}

/* v0.9.8 real-life highlights: full-width subtitle and five cards in one row on desktop */
.real-life-section .real-life-header {
  max-width: none !important;
  width: 100% !important;
}

.real-life-section .real-life-header p:not(.eyebrow),
.real-life-section #realLifeIntro {
  max-width: none !important;
  width: 100% !important;
}

.real-life-section .real-life-grid {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.real-life-section .real-life-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

@media (max-width: 1180px) {
  .real-life-section .real-life-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .real-life-section .real-life-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v0.9.9 final takeaway layout fix */
.final-takeaway-section .final-takeaway-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  gap: clamp(24px, 4vw, 56px) !important;
  align-items: start !important;
  overflow: visible !important;
}

.final-takeaway-section .final-takeaway-copy {
  min-width: 0 !important;
  max-width: none !important;
}

.final-takeaway-section .final-takeaway-copy h2,
.final-takeaway-section #final-takeaway-title {
  max-width: none !important;
  width: 100% !important;
  font-size: clamp(56px, 5.6vw, 108px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
  overflow: visible !important;
  text-wrap: balance !important;
}

.final-takeaway-section .takeaway-chain-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: clamp(22px, 2.4vw, 34px) !important;
}

.final-takeaway-section .takeaway-chain {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.2vw, 18px) !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.final-takeaway-section .takeaway-chain i {
  display: none !important;
}

.final-takeaway-section .takeaway-node {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 150px !important;
  position: relative !important;
}

.final-takeaway-section .takeaway-node::after {
  content: "→";
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(103, 232, 249, .8);
  font-weight: 900;
  font-size: 20px;
  z-index: 2;
}

.final-takeaway-section .takeaway-node:last-child::after {
  display: none;
}

.final-takeaway-section .takeaway-node strong {
  font-size: clamp(18px, 1.35vw, 26px) !important;
  line-height: 1.02 !important;
}

.final-takeaway-section .takeaway-node small {
  font-size: clamp(12px, .9vw, 16px) !important;
  line-height: 1.25 !important;
}

@media (max-width: 1100px) {
  .final-takeaway-section .final-takeaway-grid {
    grid-template-columns: 1fr !important;
  }

  .final-takeaway-section .takeaway-chain {
    grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
  }

  .final-takeaway-section .takeaway-chain-card {
    overflow-x: hidden !important;
  }
}

@media (max-width: 720px) {
  .final-takeaway-section .final-takeaway-copy h2,
  .final-takeaway-section #final-takeaway-title {
    font-size: clamp(42px, 14vw, 72px) !important;
    letter-spacing: -0.045em !important;
  }

  .final-takeaway-section .takeaway-chain {
    grid-template-columns: 1fr !important;
    overflow-x: visible !important;
  }

  .final-takeaway-section .takeaway-node::after {
    content: "↓";
    right: 50%;
    top: auto;
    bottom: -22px;
    transform: translateX(50%);
  }
}

/* v1.0.2 separate technical appendix from main story */
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding: 30px clamp(18px, 4vw, 64px);
  background: #061521;
  color: rgba(236, 248, 255, .84);
  border-top: 1px solid rgba(103, 232, 249, .16);
}

.site-footer strong {
  color: #f8fbff;
  font-size: 16px;
}

.site-footer p {
  margin: 8px 0 0;
  max-width: 760px;
  line-height: 1.55;
  color: rgba(236, 248, 255, .68);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.footer-links a,
.top-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #dff8ff;
  text-decoration: none;
  border: 1px solid rgba(103, 232, 249, .25);
  background: rgba(103, 232, 249, .08);
  font-weight: 800;
  font-size: 13px;
}

.footer-links a:hover,
.top-link:hover {
  border-color: rgba(103, 232, 249, .55);
  background: rgba(103, 232, 249, .16);
}

.appendix-page {
  background: #07131c;
  color: #ecf8ff;
}

.appendix-page .final-source-footer {
  margin: 0;
}

.appendix-hero {
  padding: 18px clamp(18px, 4vw, 64px) 56px;
  background: radial-gradient(circle at top left, rgba(103, 232, 249, .18), transparent 38%),
              linear-gradient(135deg, #082033, #0b3348 60%, #061521);
}

.appendix-hero .topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 60px;
}

.appendix-hero .brand {
  color: #67e8f9;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}

.appendix-hero-inner {
  max-width: 1100px;
}

.appendix-hero h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(52px, 7vw, 112px);
  line-height: .94;
  letter-spacing: -.055em;
}

.appendix-hero p:not(.eyebrow) {
  max-width: 900px;
  margin: 22px 0 0;
  color: rgba(236, 248, 255, .76);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
}

.appendix-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.appendix-page .method-section,
.appendix-page .rules-section,
.appendix-page .readiness-section,
.appendix-page .final-source-footer {
  display: block !important;
}

.appendix-page .readiness-section {
  background: #eef7fb;
  color: #0b2d3f;
}

@media (max-width: 760px) {
  .site-footer {
    flex-direction: column;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .appendix-hero .topbar {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 42px;
  }
}

/* v1.0.5 top navigation cleanup */
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 18px clamp(18px, 4vw, 64px) !important;
}

.topbar .brand {
  color: #67e8f9 !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.top-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex-wrap: wrap !important;
}

.top-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  color: #dff8ff !important;
  text-decoration: none !important;
  border: 1px solid rgba(103, 232, 249, .25) !important;
  background: rgba(103, 232, 249, .08) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.top-nav a:hover {
  border-color: rgba(103, 232, 249, .55) !important;
  background: rgba(103, 232, 249, .16) !important;
}

.hero-actions .btn[href="method-and-sources.html"],
.hero-actions .btn[href="#sources"] {
  display: none !important;
}

@media (max-width: 900px) {
  .topbar {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .top-nav {
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 560px) {
  .top-nav {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .top-nav a {
    width: 100% !important;
  }
}

/* v1.0.6 appendix blank-space fix */
.appendix-page main:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.appendix-page .appendix-hero {
  padding-bottom: 42px !important;
}

.appendix-page .appendix-hero + main:empty,
.appendix-page .appendix-hero + main {
  margin-top: 0 !important;
}

.appendix-page main {
  min-height: 0 !important;
}

/* v1.0.7 navigation and single-scrollbar cleanup */

/* Use the document as the only scroll container. */
html {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
}

body {
  overflow-y: visible !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100% !important;
}

/* Prevent accidental nested page scrollbars from wrappers/sections. */
header,
main,
section,
.hero,
.hero-grid {
  overflow-y: visible !important;
  max-height: none !important;
}

/* Keep components that intentionally clip visuals from creating page-level scrollbars. */
.ocean-card,
.actual-map-panel,
.real-life-card,
.takeaway-chain-card {
  overflow-y: hidden !important;
}

/* Make the single global navigation the only top menu. */
.site-nav.topbar {
  position: relative !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 18px clamp(18px, 4vw, 64px) !important;
  background: rgba(6, 21, 33, .82) !important;
  border-bottom: 1px solid rgba(103, 232, 249, .10) !important;
}

.site-nav .brand {
  color: #67e8f9 !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.site-nav .top-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex-wrap: wrap !important;
}

.site-nav .top-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  color: #dff8ff !important;
  text-decoration: none !important;
  border: 1px solid rgba(103, 232, 249, .25) !important;
  background: rgba(103, 232, 249, .08) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Remove old hero/topbar spacing and keep hero tight under the menu. */
.hero {
  padding-top: clamp(44px, 5vw, 82px) !important;
}

.hero > .topbar,
.hero nav.topbar,
.hero .domain {
  display: none !important;
}

.hero-actions {
  display: none !important;
}

/* Some older rules gave the hero a fixed/min height. Keep it content-driven. */
.hero {
  min-height: auto !important;
}

/* Ensure the appendix page does not render an empty scrollable main block. */
.appendix-page main:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

@media (max-width: 900px) {
  .site-nav.topbar {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .site-nav .top-nav {
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 560px) {
  .site-nav .top-nav {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .site-nav .top-nav a {
    width: 100% !important;
  }
}

/* v1.0.8 hard fix: remove nested page scrollbars */

/* Browser viewport is the only vertical scroll container. */
html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Kill accidental nested vertical scroll containers created by earlier layout patches. */
body > *,
header,
main,
section,
.hero,
.hero-grid,
.hero-copy,
.hero-panel,
.dashboard-section,
.map-section,
.png-lens-section,
.real-life-section,
.final-takeaway-section,
.appendix-page,
.appendix-hero {
  max-height: none !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
}

body > *::-webkit-scrollbar,
header::-webkit-scrollbar,
main::-webkit-scrollbar,
section::-webkit-scrollbar,
.hero::-webkit-scrollbar,
.hero-grid::-webkit-scrollbar,
.hero-copy::-webkit-scrollbar,
.hero-panel::-webkit-scrollbar {
  display: none !important;
}

/* Components that need visual clipping should clip only their own artwork, not create scroll panes. */
.ocean-card,
.chain-card,
.actual-map-panel,
.pacific-map-card,
.real-life-card,
.real-life-image,
.takeaway-chain-card {
  overflow: hidden !important;
}

/* The country dropdown is the only component allowed to scroll internally when open. */
.country-menu {
  overflow-y: auto !important;
  scrollbar-width: auto !important;
}

.country-menu::-webkit-scrollbar {
  display: initial !important;
}

/* Remove old hero action buttons if browser cache still shows old HTML/CSS. */
.hero-actions,
.hero .hero-actions,
.hero-actions .btn {
  display: none !important;
}

/* Remove duplicate topbar inside hero if old markup is still present. */
.hero > .topbar,
.hero nav.topbar,
.hero .domain {
  display: none !important;
}

/* Keep the new global top menu visible and not scrollable. */
.site-nav.topbar {
  overflow: visible !important;
  max-height: none !important;
}

/* Reduce hero top spacing now that inner nav is gone. */
.hero {
  padding-top: clamp(36px, 4vw, 70px) !important;
  min-height: auto !important;
}

/* v1.0.9 remove visible page scrollbar while keeping normal page scroll */

/* Keep scrolling on the document, but hide the visible scrollbar rail/thumb. */
html {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;          /* Firefox */
  -ms-overflow-style: none !important;       /* Legacy Edge/IE */
}

html::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;                  /* Chrome/Edge/Safari */
}

body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Do not let page-level wrappers create their own vertical scrollbars. */
body > *,
header,
main,
section,
.hero,
.hero-grid,
.hero-copy,
.hero-panel,
.dashboard-section,
.map-section,
.png-lens-section,
.real-life-section,
.final-takeaway-section {
  overflow-y: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body > *::-webkit-scrollbar,
header::-webkit-scrollbar,
main::-webkit-scrollbar,
section::-webkit-scrollbar,
.hero::-webkit-scrollbar,
.hero-grid::-webkit-scrollbar,
.hero-copy::-webkit-scrollbar,
.hero-panel::-webkit-scrollbar,
.dashboard-section::-webkit-scrollbar,
.map-section::-webkit-scrollbar,
.png-lens-section::-webkit-scrollbar,
.real-life-section::-webkit-scrollbar,
.final-takeaway-section::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Country dropdown can still scroll when opened because it is a controlled component. */
.country-menu {
  scrollbar-width: thin !important;
  -ms-overflow-style: auto !important;
}

.country-menu::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  display: block !important;
}

/* v1.1.0 fix: keep only the browser scrollbar, remove inner page scrollbar */

/* The browser/root element owns vertical scrolling and its scrollbar remains visible. */
html {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}

html::-webkit-scrollbar {
  width: initial !important;
  height: initial !important;
  display: initial !important;
}

/* Body must not become a second scroll container. */
body {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: clip !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Top-level content wrappers must never create a full-height internal scrollbar. */
body > *,
header,
main,
section,
.hero,
.hero-grid,
.hero-copy,
.hero-panel,
.dashboard-section,
.map-section,
.png-lens-section,
.real-life-section,
.final-takeaway-section {
  max-height: none !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body > *::-webkit-scrollbar,
header::-webkit-scrollbar,
main::-webkit-scrollbar,
section::-webkit-scrollbar,
.hero::-webkit-scrollbar,
.hero-grid::-webkit-scrollbar,
.hero-copy::-webkit-scrollbar,
.hero-panel::-webkit-scrollbar,
.dashboard-section::-webkit-scrollbar,
.map-section::-webkit-scrollbar,
.png-lens-section::-webkit-scrollbar,
.real-life-section::-webkit-scrollbar,
.final-takeaway-section::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Keep only local component scrolling where it is intentional. */
.country-menu {
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  -ms-overflow-style: auto !important;
}

.country-menu::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  display: block !important;
}

/* v1.1.1 browser scrollbar colour fix */

/* Keep only the browser scrollbar visible, but style it to match the dark UI. */
html {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(180, 190, 196, .88) rgba(23, 28, 32, .98) !important;
}

html::-webkit-scrollbar {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

html::-webkit-scrollbar-track {
  background: rgba(23, 28, 32, .98) !important;
}

html::-webkit-scrollbar-thumb {
  background: rgba(180, 190, 196, .88) !important;
  border-radius: 12px !important;
  border: 4px solid rgba(23, 28, 32, .98) !important;
}

html::-webkit-scrollbar-thumb:hover {
  background: rgba(215, 222, 226, .96) !important;
}

html::-webkit-scrollbar-corner {
  background: rgba(23, 28, 32, .98) !important;
}

/* Body remains non-scrollable so the second inner scrollbar does not return. */
body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* v1.1.3 wheel-scroll smoothness fix: keep v1.1.1 layout, remove scroll delay */
html {
  scroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
}

body {
  overscroll-behavior-y: auto !important;
}

/* Keep browser scrollbar styled and visible. Do not create an inner body scrollbar. */
html {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(180, 190, 196, .88) rgba(23, 28, 32, .98) !important;
}

html::-webkit-scrollbar {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

html::-webkit-scrollbar-track {
  background: rgba(23, 28, 32, .98) !important;
}

html::-webkit-scrollbar-thumb {
  background: rgba(180, 190, 196, .88) !important;
  border-radius: 12px !important;
  border: 4px solid rgba(23, 28, 32, .98) !important;
}

body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* v1.1.5 hero vertical-space removal only
   Built from v1.1.3. Keeps wheel-scroll rescue and scrollbar settings unchanged.
   Does not increase the pressure-chain card height. */

/* Remove the large forced hero canvas height. */
.hero {
  min-height: auto !important;
  height: auto !important;
  padding-top: 24px !important;
  padding-bottom: 32px !important;
}

/* Remove oversized grid/column heights that were creating empty space above and below. */
.hero-grid {
  min-height: auto !important;
  height: auto !important;
  align-items: center !important;
  gap: clamp(26px, 4vw, 58px) !important;
}

/* Earlier desktop rules force both hero columns to 520-690px.
   Reset them so content controls height instead. */
body .hero .hero-copy,
body .hero .hero-panel {
  min-height: 0 !important;
  height: auto !important;
}

/* Keep the pressure-chain visual at the same natural size instead of increasing height. */
body .hero .hero-panel .ocean-card.chain-card,
.hero-panel .ocean-card.chain-card,
.ocean-card.chain-card {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

/* Do not let the right panel stretch vertically. */
body .hero .hero-panel {
  align-items: center !important;
  justify-content: center !important;
}

/* Keep normal section spacing after the hero, but not the large blank gap. */
.hero + .section,
.hero + .kpi-section,
.kpi-section {
  padding-top: 56px !important;
}

/* Desktop tuning only: keep the hero tight without cropping the card. */
@media (min-width: 1181px) {
  body .hero {
    padding-top: 24px !important;
    padding-bottom: 34px !important;
  }

  body .hero .hero-grid {
    min-height: auto !important;
    height: auto !important;
    align-items: center !important;
  }

  body .hero .hero-copy,
  body .hero .hero-panel {
    min-height: 0 !important;
    height: auto !important;
  }

  body .hero .hero-panel .ocean-card.chain-card {
    min-height: 0 !important;
    height: auto !important;
  }
}

@media (max-width: 900px) {
  .hero {
    padding-top: 22px !important;
    padding-bottom: 30px !important;
  }

  .hero-grid {
    gap: 26px !important;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 18px !important;
    padding-bottom: 26px !important;
  }
}

/* v1.1.6 hero bottom-space trim only
   Built from v1.1.5. Keeps top spacing, v1.1.3 wheel-scroll rescue,
   and dark single browser scrollbar settings unchanged. */

.hero {
  padding-bottom: 10px !important;
}

/* Keep hero content naturally sized and prevent a forced empty bottom area. */
.hero-grid {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Pull the Evidence Base section closer to the hero without changing its internal card layout. */
.hero + .section,
.hero + .kpi-section,
.kpi-section {
  padding-top: 34px !important;
}

@media (max-width: 900px) {
  .hero {
    padding-bottom: 14px !important;
  }

  .hero + .section,
  .hero + .kpi-section,
  .kpi-section {
    padding-top: 30px !important;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-bottom: 12px !important;
  }

  .hero + .section,
  .hero + .kpi-section,
  .kpi-section {
    padding-top: 26px !important;
  }
}

/* v1.1.7 smart sticky top navigation
   Keeps v1.1.3 wheel-scroll rescue and v1.1.1 dark browser scrollbar settings unchanged. */

.site-nav.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  transform: translateY(0) !important;
  transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease !important;
  will-change: transform !important;
}

.site-nav.topbar.nav-hidden {
  transform: translateY(-110%) !important;
}

.site-nav.topbar.nav-scrolled {
  background: rgba(6, 21, 33, .94) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(10px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav.topbar {
    transition: none !important;
  }
}

/* v1.1.8 smart sticky nav correction
   Keeps v1.1.3 wheel-scroll rescue and single dark browser scrollbar unchanged. */

.site-nav.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 2000 !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
  will-change: transform !important;
}

.site-nav.topbar.nav-hidden {
  transform: translate3d(0, -120%, 0) !important;
}

.site-nav.topbar.nav-visible {
  transform: translate3d(0, 0, 0) !important;
}

.site-nav.topbar.nav-scrolled {
  background: rgba(6, 21, 33, .94) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(10px) !important;
}

/* v1.1.9 top bar always visible
   Disables the smart hide/show behavior. Keeps v1.1.3 wheel-scroll rescue
   and single dark browser scrollbar settings unchanged. */

.site-nav.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 2000 !important;
  transform: translate3d(0, 0, 0) !important;
  transition: background-color 180ms ease, box-shadow 180ms ease !important;
  will-change: auto !important;
}

.site-nav.topbar.nav-hidden,
.site-nav.topbar.nav-visible {
  transform: translate3d(0, 0, 0) !important;
}

.site-nav.topbar.nav-scrolled {
  background: rgba(6, 21, 33, .94) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(10px) !important;
}

/* v1.2.0 fixed topbar
   Reliable always-visible topbar. This replaces sticky behavior with fixed positioning.
   Keeps v1.1.3 wheel-scroll rescue and dark single browser scrollbar settings unchanged. */

:root {
  --site-nav-height: 86px;
}

html {
  scroll-padding-top: calc(var(--site-nav-height) + 18px) !important;
}

/* Offset page content so the fixed topbar does not cover the hero. */
body {
  padding-top: var(--site-nav-height) !important;
}

/* Force topbar to remain visible at all times. */
.site-nav.topbar,
.topbar.site-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(6, 21, 33, .96) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(10px) !important;
  transition: background-color 180ms ease, box-shadow 180ms ease !important;
}

/* Old smart-nav classes must not hide the fixed nav. */
.site-nav.topbar.nav-hidden,
.site-nav.topbar.nav-visible,
.site-nav.topbar.nav-scrolled,
.topbar.site-nav.nav-hidden,
.topbar.site-nav.nav-visible,
.topbar.site-nav.nav-scrolled {
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep anchors from landing under the fixed nav. */
section[id],
header[id],
footer[id],
#map,
#charts,
#real-life-highlights {
  scroll-margin-top: calc(var(--site-nav-height) + 18px) !important;
}

@media (max-width: 900px) {
  :root {
    --site-nav-height: 148px;
  }
}

@media (max-width: 560px) {
  :root {
    --site-nav-height: 244px;
  }
}

/* v1.2.1 reduce space below fixed topbar
   Keeps fixed topbar, v1.1.3 wheel-scroll rescue, and dark single browser scrollbar unchanged. */

/* Slightly reduce the reserved offset created for the fixed topbar. */
body {
  padding-top: calc(var(--site-nav-height) - 10px) !important;
}

/* Pull the hero content closer to the fixed topbar without changing the pressure-chain card size. */
.hero {
  padding-top: 8px !important;
}

/* Remove extra vertical centering space above the hero content. */
.hero-grid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 900px) {
  body {
    padding-top: calc(var(--site-nav-height) - 6px) !important;
  }

  .hero {
    padding-top: 8px !important;
  }
}

@media (max-width: 560px) {
  body {
    padding-top: var(--site-nav-height) !important;
  }

  .hero {
    padding-top: 10px !important;
  }
}

/* v1.2.2 appendix page spacing cleanup
   Removes the large blank space on method-and-sources.html only.
   Does not change the homepage hero, fixed topbar, wheel-scroll rescue, or browser scrollbar settings. */

.appendix-page .appendix-hero {
  padding-top: 18px !important;
  padding-bottom: 34px !important;
  min-height: auto !important;
}

.appendix-page .appendix-hero .topbar {
  margin-bottom: 34px !important;
}

.appendix-page .appendix-hero-inner {
  max-width: 980px !important;
}

.appendix-page .appendix-hero h1 {
  margin-bottom: 0 !important;
}

.appendix-page .appendix-hero + main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* The appendix is informational, not part of the main scroll reveal story.
   Keep its sections visible immediately so it does not look like blank space. */
.appendix-page .reveal-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.appendix-page .method-section {
  padding-top: 38px !important;
  padding-bottom: 52px !important;
}

.appendix-page .rules-section,
.appendix-page .readiness-section {
  padding-top: 48px !important;
  padding-bottom: 54px !important;
}

.appendix-page .final-source-footer {
  padding-top: 48px !important;
}

@media (max-width: 760px) {
  .appendix-page .appendix-hero {
    padding-bottom: 28px !important;
  }

  .appendix-page .appendix-hero .topbar {
    margin-bottom: 26px !important;
  }

  .appendix-page .method-section {
    padding-top: 30px !important;
  }
}

/* v1.2.3 appendix blank topbar removal
   Removes the homepage fixed-topbar body offset from the appendix page only. */

body.appendix-page {
  padding-top: 0 !important;
}

body.appendix-page .appendix-hero {
  margin-top: 0 !important;
}

body.appendix-page .appendix-hero .topbar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* v1.2.4 final storytelling and appendix polish */
.hero-bridge {
  margin: 16px 0 0 !important;
  max-width: 760px !important;
  color: rgba(236, 248, 255, .86) !important;
  font-size: clamp(17px, 1.45vw, 22px) !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
}

.real-life-source a {
  color: #006b86 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  font-weight: 900 !important;
}

.appendix-page .appendix-hero-inner p:not(.eyebrow) {
  max-width: 1050px !important;
}

/* v1.2.5 mobile hamburger menu and hero pressure-chain scroll cleanup
   Desktop layout remains unchanged. Keeps fixed topbar, wheel-scroll rescue,
   and dark single browser scrollbar settings unchanged. */

.mobile-menu-toggle {
  display: none;
}

/* Remove accidental inner scrolling from the hero pressure-chain panel/card. */
.hero,
.hero-grid,
.hero-panel,
.ocean-card,
.chain-card,
.animated-chain {
  overflow: visible !important;
  max-height: none !important;
}

.hero-panel,
.ocean-card.chain-card,
.chain-card.animated-chain {
  height: auto !important;
}

.chain-card *,
.ocean-card * {
  scrollbar-width: none !important;
}

.chain-card *::-webkit-scrollbar,
.ocean-card *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

@media (max-width: 760px) {
  .topbar-shell {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }

  .topbar-shell .brand,
  .brand {
    max-width: calc(100% - 64px) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 46px !important;
    height: 42px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(103, 232, 249, .38) !important;
    background: rgba(12, 45, 60, .72) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .mobile-menu-toggle span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #e9fbff !important;
    transition: transform 180ms ease, opacity 180ms ease !important;
  }

  .mobile-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  .mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
  }

  .mobile-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  .site-nav.topbar,
  .topbar.site-nav {
    position: fixed !important;
    top: calc(var(--site-nav-height, 74px) - 2px) !important;
    left: auto !important;
    right: 16px !important;
    width: min(330px, calc(100vw - 32px)) !important;
    display: none !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid rgba(103, 232, 249, .28) !important;
    border-radius: 20px !important;
    background: rgba(6, 21, 33, .98) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .38) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 100000 !important;
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.mobile-menu-open .site-nav.topbar,
  body.mobile-menu-open .topbar.site-nav {
    display: flex !important;
  }

  .site-nav.topbar a,
  .topbar.site-nav a {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  :root {
    --site-nav-height: 74px;
  }

  body {
    padding-top: var(--site-nav-height) !important;
  }

  html {
    scroll-padding-top: calc(var(--site-nav-height) + 12px) !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 22px !important;
    overflow: visible !important;
  }

  .hero-grid {
    min-height: auto !important;
    align-items: start !important;
    overflow: visible !important;
  }

  .hero-panel {
    margin-top: 24px !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .ocean-card.chain-card,
  .chain-card.animated-chain {
    overflow: visible !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .hero + .section,
  .hero + section,
  .evidence-section {
    margin-top: 0 !important;
  }
}

@media (min-width: 761px) {
  body.mobile-menu-open .site-nav.topbar,
  body.mobile-menu-open .topbar.site-nav {
    display: flex !important;
  }
}

/* v1.2.5 correction: target actual topbar markup */
@media (max-width: 760px) {
  .topbar.site-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    min-height: var(--site-nav-height, 74px) !important;
  }

  .topbar.site-nav .brand {
    flex: 1 1 auto !important;
  }

  .topbar.site-nav .top-nav {
    position: fixed !important;
    top: calc(var(--site-nav-height, 74px) + 8px) !important;
    left: auto !important;
    right: 16px !important;
    width: min(330px, calc(100vw - 32px)) !important;
    display: none !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid rgba(103, 232, 249, .28) !important;
    border-radius: 20px !important;
    background: rgba(6, 21, 33, .98) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .38) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 100001 !important;
  }

  body.mobile-menu-open .topbar.site-nav .top-nav {
    display: flex !important;
  }

  .topbar.site-nav .top-nav a {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
}

/* v1.2.6 mobile topbar fixed-to-top correction
   Fixes floating mobile menu box and makes hamburger dropdown reliable.
   Keeps desktop navigation, smooth scrolling, wheel-scroll rescue, and dark browser scrollbar unchanged. */

@media (max-width: 760px) {
  :root {
    --site-nav-height: 72px !important;
  }

  body {
    padding-top: var(--site-nav-height) !important;
  }

  html {
    scroll-padding-top: calc(var(--site-nav-height) + 12px) !important;
  }

  /* Outer topbar must be a fixed full-width bar, not a floating card. */
  body > .topbar.site-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: var(--site-nav-height) !important;
    height: var(--site-nav-height) !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(103, 232, 249, .18) !important;
    background: rgba(6, 21, 33, .98) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(12px) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    z-index: 100000 !important;
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body > .topbar.site-nav .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 62px) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
    white-space: normal !important;
  }

  body > .topbar.site-nav .mobile-menu-toggle {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: 46px !important;
    height: 42px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    position: relative !important;
    z-index: 100002 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* The dropdown belongs to the right side under the fixed topbar. */
  body > .topbar.site-nav .top-nav {
    position: fixed !important;
    top: calc(var(--site-nav-height) + 8px) !important;
    right: 14px !important;
    left: auto !important;
    width: min(330px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    height: auto !important;
    max-height: calc(100vh - var(--site-nav-height) - 24px) !important;
    overflow-y: auto !important;
    display: none !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid rgba(103, 232, 249, .32) !important;
    border-radius: 18px !important;
    background: rgba(6, 21, 33, .99) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .42) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 100001 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.mobile-menu-open > .topbar.site-nav .top-nav {
    display: flex !important;
  }

  body > .topbar.site-nav .top-nav a {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Keep the hero directly below the fixed topbar. */
  .hero {
    padding-top: 18px !important;
    margin-top: 0 !important;
  }

  .hero-grid {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* v1.2.7 hamburger dropdown tap fix
   Keeps the mobile topbar fixed. Makes menu opening independent from old handlers. */

@media (max-width: 760px) {
  body > .topbar.site-nav .mobile-menu-toggle {
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
  }

  body > .topbar.site-nav .top-nav {
    display: none !important;
    pointer-events: none !important;
  }

  body.mobile-menu-open > .topbar.site-nav .top-nav {
    display: flex !important;
    pointer-events: auto !important;
  }

  body.mobile-menu-open > .topbar.site-nav .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  body.mobile-menu-open > .topbar.site-nav .mobile-menu-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  body.mobile-menu-open > .topbar.site-nav .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
}

/* v1.2.8 real-life menu landing fix
   Mobile menu now lands on the first real-life card/article area instead of the blank transition space. */

.anchor-target {
  display: block !important;
  position: relative !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#real-life-card-start {
  scroll-margin-top: calc(var(--site-nav-height, 74px) + 12px) !important;
}

@media (max-width: 760px) {
  #real-life-card-start {
    scroll-margin-top: calc(var(--site-nav-height, 72px) + 10px) !important;
  }

  /* Remove extra landing gap when arriving from the mobile menu. */
  #real-life-highlights .section-header,
  #real-life-highlights .real-life-header {
    margin-bottom: 18px !important;
  }
}

/* v1.2.9 section colour differentiation
   Adds a clear, professional colour rhythm across major story sections.
   Keeps layout, fixed topbar, hamburger menu, charts, map, wheel-scroll rescue,
   and dark browser scrollbar behaviour unchanged. */

/* Shared section polish */
.section,
.map-section,
.transition-section,
.charts-section,
.country-lens-section,
.real-life-section,
.guardrail-section,
.takeaway-section,
.final-section {
  position: relative !important;
}

/* 01 Hero: deep ocean opening */
.hero {
  background:
    radial-gradient(circle at 18% 20%, rgba(103, 232, 249, .16), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(14, 116, 144, .18), transparent 32%),
    linear-gradient(135deg, #073047 0%, #0c4b61 42%, #082638 100%) !important;
}

/* 02 Evidence base: slightly brighter blue for the first factual checkpoint */
.evidence-section,
#evidence,
section[aria-labelledby="evidence-title"] {
  background:
    radial-gradient(circle at 10% 12%, rgba(125, 211, 252, .10), transparent 30%),
    linear-gradient(135deg, #082f49 0%, #0b3f5b 52%, #062436 100%) !important;
}

/* 03 Regional map: darker teal/green ocean field */
.map-section,
#map,
section[aria-labelledby="map-title"] {
  background:
    radial-gradient(circle at 72% 22%, rgba(52, 211, 153, .14), transparent 32%),
    radial-gradient(circle at 18% 88%, rgba(103, 232, 249, .10), transparent 36%),
    linear-gradient(135deg, #062b3b 0%, #073f47 50%, #04222f 100%) !important;
}

/* 04 Story transition: card-like bridge, not the same as map/hero */
.transition-section,
.story-transition-section,
#transition,
section[aria-labelledby="transition-title"] {
  background:
    linear-gradient(135deg, rgba(7, 37, 54, 1), rgba(8, 61, 76, 1)) !important;
}

/* 05 Country evidence/charts: light data workspace */
.charts-section,
.country-evidence-section,
#charts,
section[aria-labelledby="charts-title"] {
  background:
    radial-gradient(circle at 90% 4%, rgba(103, 232, 249, .16), transparent 28%),
    linear-gradient(180deg, #eef9fc 0%, #e6f5f8 52%, #dff0f4 100%) !important;
  color: #123043 !important;
}

/* 06 Country lens: pale aqua panel for selected-country synthesis */
.country-lens-section,
#country-lens,
section[aria-labelledby="country-lens-title"] {
  background:
    radial-gradient(circle at 15% 18%, rgba(45, 212, 191, .18), transparent 34%),
    linear-gradient(135deg, #e4f8fb 0%, #d8f0f3 46%, #cfe8ee 100%) !important;
  color: #123043 !important;
}

/* 07 Real-life pressure points: warm daylight evidence contrast */
.real-life-section,
#real-life-highlights,
section[aria-labelledby="real-life-title"] {
  background:
    radial-gradient(circle at 85% 8%, rgba(251, 191, 36, .12), transparent 28%),
    linear-gradient(180deg, #f0fbff 0%, #e3f6fa 46%, #d8edf3 100%) !important;
  color: #123043 !important;
}

/* 08 Interpretation guardrail: strong dark policy caution band */
.guardrail-section,
.interpretation-section,
#guardrail,
section[aria-labelledby="guardrail-title"] {
  background:
    radial-gradient(circle at 18% 25%, rgba(251, 191, 36, .13), transparent 30%),
    linear-gradient(135deg, #061a27 0%, #092d3f 48%, #061521 100%) !important;
  color: #ecf8ff !important;
}

/* 09 Final takeaway: deep navy conclusion, visually distinct from guardrail */
.takeaway-section,
.final-section,
#final-takeaway,
section[aria-labelledby="takeaway-title"] {
  background:
    radial-gradient(circle at 82% 18%, rgba(103, 232, 249, .12), transparent 32%),
    radial-gradient(circle at 18% 78%, rgba(45, 212, 191, .10), transparent 34%),
    linear-gradient(135deg, #04111b 0%, #082537 48%, #03101a 100%) !important;
  color: #ecf8ff !important;
}

/* Footer: stable dark close */
.final-source-footer,
footer {
  background:
    linear-gradient(135deg, #061521 0%, #071a27 100%) !important;
}

/* Maintain card readability on light sections */
.charts-section .chart-card,
#charts .chart-card,
.country-lens-section .lens-card,
#country-lens .lens-card,
.real-life-section .real-life-card,
#real-life-highlights .real-life-card,
.country-lens-section .story-use-card,
#country-lens .story-use-card {
  box-shadow: 0 18px 42px rgba(15, 45, 65, .14) !important;
}

/* Add subtle separators so repeated dark sections do not visually merge */
.hero::after,
.evidence-section::after,
.map-section::after,
.transition-section::after,
.guardrail-section::after,
.takeaway-section::after,
.final-section::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, .22), transparent) !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  /* Keep mobile section changes clean and not overly busy. */
  .hero {
    background:
      radial-gradient(circle at 32% 10%, rgba(103, 232, 249, .14), transparent 36%),
      linear-gradient(160deg, #073047 0%, #0c4b61 46%, #082638 100%) !important;
  }

  .charts-section,
  #charts,
  .country-lens-section,
  #country-lens,
  .real-life-section,
  #real-life-highlights {
    background-attachment: scroll !important;
  }
}

/* v1.3.0 PNG Lens and Real-life section colour separation
   Country Evidence / Charts section intentionally remains unchanged.
   These overrides make the two following sections visually distinct from the white data workspace. */

/* Papua New Guinea Lens: soft aqua/teal synthesis section */
.png-lens-section,
#png-lens {
  background:
    radial-gradient(circle at 12% 18%, rgba(45, 212, 191, .24), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(14, 116, 144, .16), transparent 36%),
    linear-gradient(135deg, #d8f3f2 0%, #c7e9ee 48%, #b7dde8 100%) !important;
  color: #123043 !important;
}

/* Keep PNG lens cards crisp over the aqua background */
.png-lens-section .lens-card,
.png-lens-section .story-use-card,
#png-lens .lens-card,
#png-lens .story-use-card {
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(11, 83, 108, .10) !important;
  box-shadow: 0 18px 42px rgba(15, 45, 65, .14) !important;
}

/* Real-life Pressure Points: warm coastal evidence section, distinct from chart white and PNG lens aqua */
.real-life-section,
#real-life-highlights {
  background:
    radial-gradient(circle at 84% 10%, rgba(251, 191, 36, .18), transparent 30%),
    radial-gradient(circle at 10% 92%, rgba(45, 212, 191, .12), transparent 34%),
    linear-gradient(180deg, #fff5df 0%, #f1ead0 48%, #dfead8 100%) !important;
  color: #173044 !important;
}

/* Keep real-life cards readable and premium on the warmer section */
.real-life-section .real-life-card,
#real-life-highlights .real-life-card {
  background: rgba(255, 255, 255, .94) !important;
  border-color: rgba(96, 62, 20, .10) !important;
  box-shadow: 0 18px 44px rgba(85, 62, 35, .16) !important;
}

/* Section header support panels should match the warm coastal tone */
.real-life-section .source-backed-note,
.real-life-section .real-life-note,
#real-life-highlights .source-backed-note,
#real-life-highlights .real-life-note {
  background: rgba(255, 255, 255, .55) !important;
  border-color: rgba(96, 62, 20, .12) !important;
}

@media (max-width: 760px) {
  .png-lens-section,
  #png-lens {
    background:
      radial-gradient(circle at 14% 10%, rgba(45, 212, 191, .20), transparent 36%),
      linear-gradient(160deg, #d9f4f3 0%, #c3e6ed 55%, #b5dce7 100%) !important;
  }

  .real-life-section,
  #real-life-highlights {
    background:
      radial-gradient(circle at 84% 8%, rgba(251, 191, 36, .16), transparent 32%),
      linear-gradient(180deg, #fff4dc 0%, #f1e9cf 48%, #dfe9d7 100%) !important;
  }
}

/* v1.3.1 dark section correction for PNG Lens and Real-life Pressure Points
   Country Evidence / Charts section remains unchanged. */

/* Papua New Guinea Lens: dark teal synthesis band, similar to upper story sections */
.png-lens-section,
#png-lens {
  background:
    radial-gradient(circle at 18% 16%, rgba(103, 232, 249, .14), transparent 34%),
    radial-gradient(circle at 86% 82%, rgba(45, 212, 191, .10), transparent 34%),
    linear-gradient(135deg, #06283a 0%, #0a3b4b 48%, #061b2a 100%) !important;
  color: #ecf8ff !important;
}

/* Keep text readable on the dark PNG lens background */
.png-lens-section h2,
.png-lens-section h3,
.png-lens-section p,
#png-lens h2,
#png-lens h3,
#png-lens p {
  color: inherit !important;
}

.png-lens-section .eyebrow,
#png-lens .eyebrow {
  color: #67e8f9 !important;
}

/* Use dark cards instead of white cards inside PNG lens */
.png-lens-section .lens-card,
.png-lens-section .story-use-card,
#png-lens .lens-card,
#png-lens .story-use-card {
  background: rgba(13, 52, 70, .86) !important;
  border-color: rgba(103, 232, 249, .18) !important;
  color: #ecf8ff !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24) !important;
}

.png-lens-section .lens-card small,
.png-lens-section .story-use-card small,
#png-lens .lens-card small,
#png-lens .story-use-card small {
  color: rgba(220, 244, 252, .78) !important;
}

/* Real-life Pressure Points: dark blue/green evidence band, close to section 1/2 style but distinct from PNG lens */
.real-life-section,
#real-life-highlights {
  background:
    radial-gradient(circle at 86% 12%, rgba(103, 232, 249, .12), transparent 32%),
    radial-gradient(circle at 12% 88%, rgba(52, 211, 153, .10), transparent 36%),
    linear-gradient(135deg, #061f30 0%, #08384a 48%, #041722 100%) !important;
  color: #ecf8ff !important;
}

.real-life-section h2,
.real-life-section h3,
.real-life-section p,
#real-life-highlights h2,
#real-life-highlights h3,
#real-life-highlights p {
  color: inherit !important;
}

.real-life-section .eyebrow,
#real-life-highlights .eyebrow {
  color: #67e8f9 !important;
}

/* Keep real-life cards readable and premium on the dark section */
.real-life-section .real-life-card,
#real-life-highlights .real-life-card {
  background: rgba(238, 249, 252, .96) !important;
  border-color: rgba(103, 232, 249, .16) !important;
  color: #123043 !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28) !important;
}

.real-life-section .real-life-card h3,
.real-life-section .real-life-card p,
#real-life-highlights .real-life-card h3,
#real-life-highlights .real-life-card p {
  color: #123043 !important;
}

/* Header note should be dark glass, not white */
.real-life-section .source-backed-note,
.real-life-section .real-life-note,
#real-life-highlights .source-backed-note,
#real-life-highlights .real-life-note {
  background: rgba(13, 52, 70, .68) !important;
  border-color: rgba(103, 232, 249, .18) !important;
  color: #ecf8ff !important;
}

/* Section separators for dark-to-dark transitions */
.png-lens-section::after,
#png-lens::after,
.real-life-section::after,
#real-life-highlights::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, .24), transparent) !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .png-lens-section,
  #png-lens {
    background:
      radial-gradient(circle at 20% 10%, rgba(103, 232, 249, .13), transparent 36%),
      linear-gradient(160deg, #06283a 0%, #0a3a49 52%, #061b2a 100%) !important;
  }

  .real-life-section,
  #real-life-highlights {
    background:
      radial-gradient(circle at 82% 10%, rgba(103, 232, 249, .11), transparent 34%),
      linear-gradient(160deg, #061f30 0%, #08384a 52%, #041722 100%) !important;
  }
}

/* v1.3.2 PNG Lens dark text contrast fix
   Makes all key values and story-use text readable on the dark teal background. */

.png-lens-section .lens-card,
.png-lens-section .story-use-card,
#png-lens .lens-card,
#png-lens .story-use-card {
  color: #ecf8ff !important;
}

.png-lens-section .lens-card *,
.png-lens-section .story-use-card *,
#png-lens .lens-card *,
#png-lens .story-use-card * {
  color: inherit !important;
}

/* Metric labels */
.png-lens-section .lens-card .eyebrow,
.png-lens-section .lens-card .label,
.png-lens-section .lens-card .metric-label,
.png-lens-section .story-use-card .eyebrow,
#png-lens .lens-card .eyebrow,
#png-lens .lens-card .label,
#png-lens .lens-card .metric-label,
#png-lens .story-use-card .eyebrow {
  color: #67e8f9 !important;
}

/* Main numeric values and story-use heading */
.png-lens-section .lens-card strong,
.png-lens-section .lens-card .value,
.png-lens-section .lens-card .metric-value,
.png-lens-section .lens-card h3,
.png-lens-section .story-use-card h3,
.png-lens-section .story-use-card strong,
#png-lens .lens-card strong,
#png-lens .lens-card .value,
#png-lens .lens-card .metric-value,
#png-lens .lens-card h3,
#png-lens .story-use-card h3,
#png-lens .story-use-card strong {
  color: #f4fbff !important;
  opacity: 1 !important;
}

/* Supporting text */
.png-lens-section .lens-card small,
.png-lens-section .lens-card p,
.png-lens-section .story-use-card p,
.png-lens-section .story-use-card small,
#png-lens .lens-card small,
#png-lens .lens-card p,
#png-lens .story-use-card p,
#png-lens .story-use-card small {
  color: rgba(220, 244, 252, .88) !important;
  opacity: 1 !important;
}

/* Fallback for generated card classes that use generic descendants */
.png-lens-section [class*="value"],
.png-lens-section [class*="number"],
.png-lens-section [class*="rank"],
#png-lens [class*="value"],
#png-lens [class*="number"],
#png-lens [class*="rank"] {
  color: #f4fbff !important;
  opacity: 1 !important;
}

.png-lens-section [class*="label"],
#png-lens [class*="label"] {
  color: #67e8f9 !important;
  opacity: 1 !important;
}

/* v1.3.3 final takeaway professional layout polish
   Applies only to the Final Takeaway section. */

#final-takeaway,
.final-takeaway-section {
  padding-top: clamp(72px, 8vw, 118px) !important;
  padding-bottom: clamp(72px, 8vw, 118px) !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(103, 232, 249, .14), transparent 32%),
    radial-gradient(circle at 16% 88%, rgba(45, 212, 191, .10), transparent 34%),
    linear-gradient(135deg, #04111b 0%, #082638 48%, #03101a 100%) !important;
}

/* Main two-column layout: stronger balance and cleaner alignment */
#final-takeaway .final-takeaway-grid,
#final-takeaway .takeaway-grid,
#final-takeaway .final-grid,
.final-takeaway-section .final-takeaway-grid,
.final-takeaway-section .takeaway-grid,
.final-takeaway-section .final-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr) !important;
  gap: clamp(34px, 5vw, 76px) !important;
  align-items: start !important;
  max-width: 1720px !important;
  margin-inline: auto !important;
}

/* If the section uses direct children instead of a named grid, improve the first-level layout safely. */
#final-takeaway > .section-inner,
.final-takeaway-section > .section-inner {
  max-width: 1720px !important;
  margin-inline: auto !important;
}

/* Left copy: reduce oversized title pressure and create a cleaner reading block */
#final-takeaway h2,
.final-takeaway-section h2 {
  max-width: 720px !important;
  margin: 0 0 24px !important;
  font-size: clamp(52px, 6.5vw, 104px) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
}

#final-takeaway .section-kicker,
#final-takeaway .eyebrow,
.final-takeaway-section .section-kicker,
.final-takeaway-section .eyebrow {
  margin-bottom: 28px !important;
  color: #9af3ff !important;
  letter-spacing: .14em !important;
}

#final-takeaway p,
.final-takeaway-section p {
  max-width: 760px !important;
  line-height: 1.72 !important;
}

/* Quote card: make it feel like a deliberate central message */
#final-takeaway blockquote,
#final-takeaway .takeaway-quote,
#final-takeaway .final-quote,
.final-takeaway-section blockquote,
.final-takeaway-section .takeaway-quote,
.final-takeaway-section .final-quote {
  position: relative !important;
  max-width: 780px !important;
  margin: 34px 0 34px !important;
  padding: 30px 36px 30px 42px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(103, 232, 249, .34) !important;
  background:
    linear-gradient(135deg, rgba(13, 73, 92, .88), rgba(9, 43, 62, .88)) !important;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  color: #f4fbff !important;
}

#final-takeaway blockquote::before,
#final-takeaway .takeaway-quote::before,
#final-takeaway .final-quote::before,
.final-takeaway-section blockquote::before,
.final-takeaway-section .takeaway-quote::before,
.final-takeaway-section .final-quote::before {
  content: "“" !important;
  position: absolute !important;
  top: -22px !important;
  left: 22px !important;
  color: rgba(103, 232, 249, .40) !important;
  font-size: 96px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#final-takeaway blockquote p,
#final-takeaway .takeaway-quote p,
#final-takeaway .final-quote p,
.final-takeaway-section blockquote p,
.final-takeaway-section .takeaway-quote p,
.final-takeaway-section .final-quote p {
  margin: 0 !important;
  font-size: clamp(22px, 2vw, 34px) !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  color: #f4fbff !important;
}

/* Right-side pressure chain panel: cleaner card, centered content, more professional scale */
#final-takeaway .chain-card,
#final-takeaway .pressure-chain-card,
#final-takeaway .takeaway-chain,
.final-takeaway-section .chain-card,
.final-takeaway-section .pressure-chain-card,
.final-takeaway-section .takeaway-chain {
  align-self: start !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(28px, 3vw, 42px) !important;
  border-radius: 30px !important;
  border: 1px solid rgba(103, 232, 249, .26) !important;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(135deg, rgba(20, 83, 103, .72), rgba(9, 40, 58, .84)) !important;
  background-size: 48px 48px, 48px 48px, auto !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* Make the horizontal chain inside the final panel more evenly spaced */
#final-takeaway .chain-steps,
#final-takeaway .takeaway-chain-steps,
#final-takeaway .pressure-chain-steps,
.final-takeaway-section .chain-steps,
.final-takeaway-section .takeaway-chain-steps,
.final-takeaway-section .pressure-chain-steps {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.5vw, 22px) !important;
  align-items: stretch !important;
}

#final-takeaway .chain-step,
#final-takeaway .takeaway-chain-step,
#final-takeaway .pressure-chain-step,
.final-takeaway-section .chain-step,
.final-takeaway-section .takeaway-chain-step,
.final-takeaway-section .pressure-chain-step {
  min-height: 150px !important;
  padding: 22px 20px !important;
  border-radius: 22px !important;
  background: rgba(6, 28, 43, .72) !important;
  border: 1px solid rgba(103, 232, 249, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Bottom action cards: make them equal, lighter hierarchy, cleaner spacing */
#final-takeaway .takeaway-actions,
#final-takeaway .final-cards,
#final-takeaway .takeaway-card-grid,
.final-takeaway-section .takeaway-actions,
.final-takeaway-section .final-cards,
.final-takeaway-section .takeaway-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
  margin-top: clamp(46px, 5vw, 76px) !important;
}

#final-takeaway .takeaway-card,
#final-takeaway .final-card,
.final-takeaway-section .takeaway-card,
.final-takeaway-section .final-card {
  min-height: 190px !important;
  padding: 28px 30px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(103, 232, 249, .18) !important;
  background: linear-gradient(135deg, rgba(13, 52, 70, .86), rgba(9, 34, 50, .86)) !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

#final-takeaway .takeaway-card h3,
#final-takeaway .final-card h3,
.final-takeaway-section .takeaway-card h3,
.final-takeaway-section .final-card h3 {
  margin-top: 12px !important;
  font-size: clamp(18px, 1.2vw, 23px) !important;
  line-height: 1.25 !important;
  color: #f4fbff !important;
}

#final-takeaway .takeaway-card p,
#final-takeaway .final-card p,
.final-takeaway-section .takeaway-card p,
.final-takeaway-section .final-card p {
  color: rgba(220, 244, 252, .86) !important;
  font-size: clamp(15px, .95vw, 17px) !important;
  line-height: 1.6 !important;
}

/* Fallback: if actual bottom cards use article elements directly inside final section */
#final-takeaway article,
.final-takeaway-section article {
  overflow: hidden !important;
}

/* Tablet */
@media (max-width: 1100px) {
  #final-takeaway .final-takeaway-grid,
  #final-takeaway .takeaway-grid,
  #final-takeaway .final-grid,
  .final-takeaway-section .final-takeaway-grid,
  .final-takeaway-section .takeaway-grid,
  .final-takeaway-section .final-grid {
    grid-template-columns: 1fr !important;
  }

  #final-takeaway .chain-card,
  #final-takeaway .pressure-chain-card,
  #final-takeaway .takeaway-chain,
  .final-takeaway-section .chain-card,
  .final-takeaway-section .pressure-chain-card,
  .final-takeaway-section .takeaway-chain {
    max-width: 100% !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  #final-takeaway,
  .final-takeaway-section {
    padding-top: 64px !important;
    padding-bottom: 72px !important;
  }

  #final-takeaway h2,
  .final-takeaway-section h2 {
    font-size: clamp(42px, 13vw, 62px) !important;
    line-height: .96 !important;
    letter-spacing: -.04em !important;
  }

  #final-takeaway blockquote,
  #final-takeaway .takeaway-quote,
  #final-takeaway .final-quote,
  .final-takeaway-section blockquote,
  .final-takeaway-section .takeaway-quote,
  .final-takeaway-section .final-quote {
    padding: 26px 24px 26px 30px !important;
    border-radius: 20px !important;
  }

  #final-takeaway .chain-steps,
  #final-takeaway .takeaway-chain-steps,
  #final-takeaway .pressure-chain-steps,
  .final-takeaway-section .chain-steps,
  .final-takeaway-section .takeaway-chain-steps,
  .final-takeaway-section .pressure-chain-steps {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #final-takeaway .chain-step,
  #final-takeaway .takeaway-chain-step,
  #final-takeaway .pressure-chain-step,
  .final-takeaway-section .chain-step,
  .final-takeaway-section .takeaway-chain-step,
  .final-takeaway-section .pressure-chain-step {
    min-height: 112px !important;
  }

  #final-takeaway .takeaway-actions,
  #final-takeaway .final-cards,
  #final-takeaway .takeaway-card-grid,
  .final-takeaway-section .takeaway-actions,
  .final-takeaway-section .final-cards,
  .final-takeaway-section .takeaway-card-grid {
    grid-template-columns: 1fr !important;
    margin-top: 34px !important;
  }

  #final-takeaway .takeaway-card,
  #final-takeaway .final-card,
  .final-takeaway-section .takeaway-card,
  .final-takeaway-section .final-card {
    min-height: 0 !important;
  }
}

/* v1.3.4 Final Takeaway full-width layout correction
   Moves the pressure-chain panel below the copy block and prevents it from being squashed.
   Applies only to the Final Takeaway section. */

#final-takeaway,
.final-takeaway-section {
  overflow: visible !important;
}

/* Make the final section use a stacked full-width layout instead of a compressed two-column layout. */
#final-takeaway .final-takeaway-grid,
.final-takeaway-section .final-takeaway-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(34px, 4vw, 54px) !important;
  max-width: 1720px !important;
  width: 100% !important;
  margin-inline: auto !important;
  align-items: stretch !important;
}

/* Text/quote area should use the full available section width cleanly. */
#final-takeaway .final-takeaway-copy,
.final-takeaway-section .final-takeaway-copy {
  width: 100% !important;
  max-width: 100% !important;
}

#final-takeaway .final-takeaway-copy > p,
.final-takeaway-section .final-takeaway-copy > p {
  max-width: 980px !important;
}

#final-takeaway h2,
.final-takeaway-section h2 {
  max-width: 1120px !important;
}

/* Quote aligns under the paragraph area and no longer competes with the chain card. */
#final-takeaway .final-quote,
.final-takeaway-section .final-quote {
  max-width: 860px !important;
}

/* Pressure-chain panel becomes full width below the quote/text block. */
#final-takeaway .takeaway-chain-card,
.final-takeaway-section .takeaway-chain-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(30px, 3vw, 48px) !important;
  border-radius: 30px !important;
  align-self: stretch !important;
}

/* Keep the title row polished across the full-width chain panel. */
#final-takeaway .takeaway-chain-title,
.final-takeaway-section .takeaway-chain-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: clamp(22px, 2vw, 34px) !important;
}

/* Make the five pressure nodes breathe properly in full width. */
#final-takeaway .takeaway-chain,
.final-takeaway-section .takeaway-chain {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) !important;
  gap: clamp(10px, 1.1vw, 18px) !important;
  align-items: center !important;
  width: 100% !important;
}

#final-takeaway .takeaway-node,
.final-takeaway-section .takeaway-node {
  min-width: 0 !important;
  min-height: 178px !important;
  padding: clamp(22px, 1.8vw, 30px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#final-takeaway .takeaway-node strong,
.final-takeaway-section .takeaway-node strong {
  font-size: clamp(24px, 1.7vw, 34px) !important;
  line-height: 1.05 !important;
}

#final-takeaway .takeaway-node small,
.final-takeaway-section .takeaway-node small {
  font-size: clamp(15px, .95vw, 18px) !important;
  line-height: 1.28 !important;
}

#final-takeaway .takeaway-chain i,
.final-takeaway-section .takeaway-chain i {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}

/* Planning cards: full section width and equal presentation. */
#final-takeaway .planning-grid,
.final-takeaway-section .planning-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(20px, 2vw, 30px) !important;
  max-width: 1720px !important;
  width: 100% !important;
  margin: clamp(40px, 4vw, 64px) auto 0 !important;
}

#final-takeaway .planning-grid article,
.final-takeaway-section .planning-grid article {
  min-height: 190px !important;
  padding: clamp(24px, 2vw, 34px) !important;
  border-radius: 22px !important;
}

/* Desktop-wide: allow the final title to feel large but not overly cramped. */
@media (min-width: 1200px) {
  #final-takeaway .final-takeaway-copy,
  .final-takeaway-section .final-takeaway-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .58fr) !important;
    column-gap: clamp(34px, 5vw, 90px) !important;
    align-items: start !important;
  }

  #final-takeaway .final-takeaway-copy .eyebrow,
  #final-takeaway .final-takeaway-copy h2,
  #final-takeaway .final-takeaway-copy > p:first-of-type,
  .final-takeaway-section .final-takeaway-copy .eyebrow,
  .final-takeaway-section .final-takeaway-copy h2,
  .final-takeaway-section .final-takeaway-copy > p:first-of-type {
    grid-column: 1 / 2 !important;
  }

  #final-takeaway .final-takeaway-copy .final-quote,
  .final-takeaway-section .final-takeaway-copy .final-quote {
    grid-column: 2 / 3 !important;
    grid-row: 2 / span 2 !important;
    margin-top: 8px !important;
    max-width: 100% !important;
  }

  #final-takeaway .final-takeaway-copy > p:last-of-type,
  .final-takeaway-section .final-takeaway-copy > p:last-of-type {
    grid-column: 1 / 3 !important;
    max-width: 980px !important;
    margin-top: 10px !important;
  }
}

/* Tablet: pressure chain becomes two rows if needed, still full width. */
@media (max-width: 1100px) {
  #final-takeaway .takeaway-chain,
  .final-takeaway-section .takeaway-chain {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #final-takeaway .takeaway-chain i,
  .final-takeaway-section .takeaway-chain i {
    min-height: 18px !important;
  }

  #final-takeaway .takeaway-node,
  .final-takeaway-section .takeaway-node {
    min-height: 128px !important;
  }

  #final-takeaway .planning-grid,
  .final-takeaway-section .planning-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile: keep everything stacked and readable. */
@media (max-width: 760px) {
  #final-takeaway .final-takeaway-grid,
  .final-takeaway-section .final-takeaway-grid {
    gap: 28px !important;
  }

  #final-takeaway .takeaway-chain-card,
  .final-takeaway-section .takeaway-chain-card {
    padding: 24px !important;
    border-radius: 24px !important;
  }

  #final-takeaway .takeaway-chain-title,
  .final-takeaway-section .takeaway-chain-title {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #final-takeaway .takeaway-node,
  .final-takeaway-section .takeaway-node {
    min-height: 112px !important;
  }
}


/* v1.3.5 Final Takeaway layout refinement
   - Move quote below the pressure chain
   - Let title and subtitle run full width
   - Keep the full-width professional layout */
#final-takeaway .final-takeaway-copy,
.final-takeaway-section .final-takeaway-copy {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

#final-takeaway h2,
.final-takeaway-section h2 {
  max-width: 100% !important;
  width: 100% !important;
}

#final-takeaway .final-takeaway-copy > p,
.final-takeaway-section .final-takeaway-copy > p {
  max-width: 100% !important;
  width: 100% !important;
}

#final-takeaway .final-takeaway-grid,
.final-takeaway-section .final-takeaway-grid {
  gap: clamp(24px, 2.6vw, 40px) !important;
}

#final-takeaway .takeaway-chain-card,
.final-takeaway-section .takeaway-chain-card {
  margin-bottom: 0 !important;
}

#final-takeaway > .final-quote,
#final-takeaway .final-takeaway-grid > .final-quote,
.final-takeaway-section > .final-quote,
.final-takeaway-section .final-takeaway-grid > .final-quote {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

#final-takeaway .final-takeaway-grid > .final-quote,
.final-takeaway-section .final-takeaway-grid > .final-quote {
  display: block !important;
}

@media (min-width: 1200px) {
  #final-takeaway .final-takeaway-copy,
  .final-takeaway-section .final-takeaway-copy {
    display: block !important;
    grid-template-columns: none !important;
  }

  #final-takeaway .final-takeaway-copy .eyebrow,
  #final-takeaway .final-takeaway-copy h2,
  #final-takeaway .final-takeaway-copy > p,
  .final-takeaway-section .final-takeaway-copy .eyebrow,
  .final-takeaway-section .final-takeaway-copy h2,
  .final-takeaway-section .final-takeaway-copy > p {
    grid-column: auto !important;
    margin-right: 0 !important;
  }
}

/* v1.3.6 storytelling rewrite: opening story, scenario and household budget view */
.opening-story-section,
.scenario-section,
.household-budget-section {
  position: relative;
}

.opening-story-card,
.scenario-card,
.household-budget-card {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  border: 1px solid rgba(148, 223, 255, 0.18);
  border-radius: 30px;
  background:
    radial-gradient(circle at 16% 12%, rgba(70, 187, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(7, 30, 48, 0.96), rgba(9, 45, 61, 0.96));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.26);
  padding: clamp(24px, 4vw, 44px);
  color: #e9f9ff;
}

.opening-story-card h2,
.scenario-card h2,
.household-budget-card h2 {
  color: #ffffff;
}

.opening-story-card p,
.scenario-card p,
.household-budget-card p {
  color: rgba(232, 249, 255, 0.84);
  line-height: 1.72;
}

.story-emphasis,
.hero-bridge.strong-bridge {
  color: #ffffff !important;
  font-weight: 700;
}

.scenario-copy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: stretch;
}

.scenario-warning {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.08);
}

.scenario-warning strong,
.household-key-message strong {
  display: block;
  color: #ffffff;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.household-story-copy {
  max-width: 980px;
  margin: 0 auto 24px;
}

.household-cost-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.household-cost-card {
  min-height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.household-cost-card span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(125, 218, 255, 0.16);
  border: 1px solid rgba(125, 218, 255, 0.28);
  color: #bdeeff;
  font-weight: 800;
  font-size: 0.82rem;
  margin-bottom: 14px;
}

.household-cost-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 1.05rem;
}

.household-cost-card p {
  margin: 0;
  font-size: 0.94rem;
}

.household-key-message {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(236, 250, 255, 0.9);
}

.household-key-message strong {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.household-key-message span {
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .household-cost-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .household-cost-card.wide {
    grid-column: span 2;
  }
}

@media (max-width: 820px) {
  .scenario-copy-grid {
    grid-template-columns: 1fr;
  }

  .opening-story-card,
  .scenario-card,
  .household-budget-card {
    width: min(100% - 24px, 1180px);
    border-radius: 24px;
  }
}

@media (max-width: 640px) {
  .household-cost-grid {
    grid-template-columns: 1fr;
  }

  .household-cost-card.wide {
    grid-column: auto;
  }

  .household-key-message {
    display: block;
  }

  .household-key-message strong {
    margin-bottom: 8px;
  }
}

/* v1.3.7 full-width section correction
   Keep existing charts, map markers and interactions unchanged. This only expands the
   major story containers to use the full available section width. */
main,
main > .section,
.hero,
.footer,
.final-source-footer {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

main > .section {
  padding-left: clamp(18px, 3vw, 54px) !important;
  padding-right: clamp(18px, 3vw, 54px) !important;
}

/* Shared full-width content containers. */
.kpi-section > .section-heading,
.kpi-section > .kpi-grid,
.opening-story-section > .opening-story-card,
.map-section > .story-layout,
.map-lens-transition > .transition-card,
.dashboard-section > .dashboard-head,
.dashboard-section > .chart-focus-rail,
.dashboard-section > #loadMessage,
.dashboard-section > .chart-grid,
.scenario-section > .scenario-card,
.household-budget-section > .household-budget-card,
.png-lens-section > .section-heading,
.png-lens-section > .png-lens-grid,
.real-life-section > .real-life-header,
.real-life-section > .real-life-note,
.real-life-section > .real-life-grid,
.insight-section > .insight-card,
#final-takeaway > .final-takeaway-grid,
#final-takeaway > .planning-grid,
.final-takeaway-section > .final-takeaway-grid,
.final-takeaway-section > .planning-grid {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Remove narrow reading limits from section intros where the user wants full-width layout. */
.kpi-section .section-heading,
.opening-story-card,
.map-section .story-copy,
.map-lens-transition .transition-card,
.dashboard-section .dashboard-head,
.dashboard-section .dashboard-head .section-heading,
.scenario-card .section-heading,
.household-budget-card .section-heading,
.household-story-copy,
.png-lens-section .section-heading,
.png-lens-section .lens-bridge-copy,
.real-life-section .real-life-header,
.real-life-section .real-life-note,
.insight-section .insight-card,
.final-takeaway-section .final-takeaway-copy,
.final-takeaway-section .final-takeaway-copy > p {
  max-width: none !important;
}

/* Opening, scenario and household sections should be full-width panels instead of centered boxes. */
.opening-story-card,
.scenario-card,
.household-budget-card {
  width: 100% !important;
  max-width: none !important;
  border-radius: 30px !important;
}

/* Keep the scenario message balanced across the wider card. */
.scenario-copy-grid {
  width: 100% !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, .75fr) !important;
}

/* Household budget: use five equal cards across the full row on desktop. */
.household-story-copy {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.household-cost-grid {
  width: 100% !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.household-cost-card.wide {
  grid-column: auto !important;
}

/* Country lens and real-life sections should not collapse back to older max-width values. */
.png-lens-section .png-lens-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.png-lens-section .png-lens-grid > .lens-card.wide {
  grid-column: 1 / -1 !important;
}

.real-life-section .real-life-grid,
#real-life-highlights .real-life-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.real-life-section .real-life-card,
#real-life-highlights .real-life-card {
  width: 100% !important;
  max-width: none !important;
}

/* Final takeaway remains stacked and full-width. */
#final-takeaway,
.final-takeaway-section {
  width: 100% !important;
  max-width: none !important;
}

#final-takeaway .takeaway-chain-card,
.final-takeaway-section .takeaway-chain-card,
#final-takeaway .final-quote,
.final-takeaway-section .final-quote {
  width: 100% !important;
  max-width: none !important;
}

/* Responsive fallbacks for full-width grids. */
@media (max-width: 1280px) {
  .png-lens-section .png-lens-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .real-life-section .real-life-grid,
  #real-life-highlights .real-life-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .household-cost-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .scenario-copy-grid {
    grid-template-columns: 1fr !important;
  }

  .png-lens-section .png-lens-grid,
  .real-life-section .real-life-grid,
  #real-life-highlights .real-life-grid,
  .household-cost-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  main > .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .png-lens-section .png-lens-grid,
  .real-life-section .real-life-grid,
  #real-life-highlights .real-life-grid,
  .household-cost-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v1.3.8 visual polish after full-width storytelling update
   - Give the hero pressure-chain card more breathing room.
   - Improve dashboard intro readability.
   - Let household cost cards wrap to 3 + 2 earlier.
   - Strengthen final planning card contrast. */
@media (min-width: 1181px) {
  body .hero .hero-grid {
    grid-template-columns: minmax(360px, 36%) minmax(0, 64%) !important;
    gap: clamp(34px, 4vw, 68px) !important;
    align-items: stretch !important;
  }

  body .hero .hero-copy {
    min-height: clamp(500px, 38vw, 640px) !important;
  }

  body .hero .hero-panel {
    min-height: clamp(500px, 38vw, 640px) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  body .hero .hero-panel .ocean-card.chain-card,
  body .hero .hero-panel .story-logic-card,
  body .hero .hero-panel .chain-card,
  body .hero .hero-grid .ocean-card.chain-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: clamp(500px, 38vw, 640px) !important;
    padding: clamp(30px, 2.6vw, 46px) !important;
    justify-content: space-between !important;
  }

  body .hero .hero-panel .ocean-card.chain-card .chain-card-title,
  body .hero .hero-panel .chain-card .chain-card-title {
    width: min(760px, 88%) !important;
    max-width: 88% !important;
    font-size: clamp(36px, 3.15vw, 56px) !important;
    line-height: .98 !important;
    margin: clamp(34px, 3vw, 54px) 0 clamp(24px, 2.4vw, 38px) !important;
  }

  body .hero .hero-panel .chain-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1vw, 18px) !important;
  }

  body .hero .hero-panel .chain-arrow {
    display: none !important;
  }

  body .hero .hero-panel .chain-step,
  body .hero .hero-panel .chain-step.ocean,
  body .hero .hero-panel .chain-step.rain,
  body .hero .hero-panel .chain-step.loss,
  body .hero .hero-panel .chain-step.food,
  body .hero .hero-panel .chain-step.cost {
    grid-column: auto !important;
    min-height: clamp(88px, 5vw, 120px) !important;
    padding: clamp(16px, 1.25vw, 22px) !important;
    border-radius: 20px !important;
  }

  body .hero .hero-panel .chain-step span {
    font-size: clamp(10px, .72vw, 12px) !important;
    margin-bottom: 8px !important;
  }

  body .hero .hero-panel .chain-step strong {
    font-size: clamp(15px, 1.05vw, 19px) !important;
    line-height: 1.12 !important;
  }

  body .hero .hero-panel .chain-card-glow {
    right: 6% !important;
    top: 9% !important;
    width: clamp(165px, 13vw, 250px) !important;
    height: clamp(165px, 13vw, 250px) !important;
  }
}

.dashboard-section .dashboard-head p,
.dashboard-section .section-heading p,
#charts .dashboard-head p,
#charts .section-heading p {
  font-size: clamp(1rem, 1.05vw, 1.16rem) !important;
  line-height: 1.68 !important;
  color: rgba(11, 44, 61, 0.78) !important;
}

@media (max-width: 1680px) and (min-width: 901px) {
  .household-cost-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .household-cost-card.wide {
    grid-column: auto !important;
  }
}

@media (max-width: 1220px) and (min-width: 901px) {
  .household-cost-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#final-takeaway .planning-grid article,
.final-takeaway-section .planning-grid article {
  background: linear-gradient(145deg, rgba(18, 85, 108, 0.96), rgba(8, 39, 59, 0.98)) !important;
  border: 1px solid rgba(142, 227, 255, 0.30) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

#final-takeaway .planning-grid span,
.final-takeaway-section .planning-grid span {
  color: #bdf2ff !important;
}

#final-takeaway .planning-grid h3,
.final-takeaway-section .planning-grid h3 {
  color: #ffffff !important;
}

#final-takeaway .planning-grid p,
.final-takeaway-section .planning-grid p {
  color: rgba(236, 250, 255, 0.84) !important;
}

/* v1.3.9 Household Budget View animation polish
   Adds a playful but still professional cost-path animation. Existing chart/map JS untouched. */
.household-budget-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.household-budget-card::before {
  content: "";
  position: absolute;
  inset: -28% -16%;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 18%, rgba(109, 223, 255, 0.22), transparent 24%),
    radial-gradient(circle at 82% 36%, rgba(49, 170, 214, 0.18), transparent 26%),
    radial-gradient(circle at 48% 92%, rgba(126, 240, 255, 0.12), transparent 32%);
  transform: translate3d(0,0,0);
  animation: householdGlowDrift 14s ease-in-out infinite alternate;
}

.household-budget-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .38;
  background:
    linear-gradient(115deg, transparent 0 24%, rgba(150, 235, 255, 0.08) 30%, transparent 38% 100%);
  background-size: 220% 220%;
  animation: householdSheen 7.5s ease-in-out infinite;
}

.household-flow-addon {
  position: relative;
  margin: 26px 0 30px;
  border: 1px solid rgba(151, 232, 255, 0.24);
  border-radius: 24px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(14, 76, 98, 0.55), rgba(4, 28, 47, 0.42));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 18px 46px rgba(0, 0, 0, 0.20);
  overflow: hidden;
}

.household-flow-addon::before {
  content: "";
  position: absolute;
  left: -35%;
  top: 0;
  width: 32%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(147, 235, 255, 0.18), transparent);
  transform: skewX(-18deg);
  animation: householdScan 5.8s ease-in-out infinite;
}

.flow-addon-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: #ffffff;
}

.flow-addon-header strong {
  letter-spacing: .02em;
}

.flow-addon-header small {
  color: rgba(214, 244, 255, 0.72);
  margin-left: auto;
  font-size: .82rem;
}

.flow-pulse-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #9deeff;
  box-shadow: 0 0 0 rgba(157, 238, 255, 0.62);
  animation: householdPulseDot 1.8s ease-out infinite;
}

.household-flow-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.household-flow-track::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(139, 226, 255, 0.14),
    rgba(139, 226, 255, 0.72),
    rgba(255, 255, 255, 0.74),
    rgba(139, 226, 255, 0.72),
    rgba(139, 226, 255, 0.14));
  background-size: 220% 100%;
  transform: translateY(-50%);
  animation: householdFlowLine 3.8s linear infinite;
}

.flow-node {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 999px;
  padding: 10px 12px;
  text-align: center;
  font-weight: 800;
  font-size: .82rem;
  color: #eaffff;
  background: linear-gradient(145deg, rgba(27, 98, 120, 0.96), rgba(8, 45, 66, 0.96));
  border: 1px solid rgba(154, 234, 255, 0.28);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,.10);
  opacity: 0;
  transform: translateY(10px) scale(.96);
}

.household-budget-section.is-visible .flow-node {
  animation: householdNodeIn .55s cubic-bezier(.2,.8,.2,1) forwards, householdNodeBreathe 4.4s ease-in-out infinite;
}

.household-budget-section.is-visible .flow-node:nth-child(1) { animation-delay: .05s, 1.1s; }
.household-budget-section.is-visible .flow-node:nth-child(2) { animation-delay: .18s, 1.25s; }
.household-budget-section.is-visible .flow-node:nth-child(3) { animation-delay: .31s, 1.4s; }
.household-budget-section.is-visible .flow-node:nth-child(4) { animation-delay: .44s, 1.55s; }
.household-budget-section.is-visible .flow-node:nth-child(5) { animation-delay: .57s, 1.7s; }

.household-cost-card {
  position: relative !important;
  overflow: hidden !important;
  transform: translateY(0);
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.household-cost-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 20% 12%, rgba(155, 239, 255, .22), transparent 30%);
  transition: opacity .28s ease;
}

.household-cost-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, transparent, rgba(151, 236, 255, .9), transparent);
  opacity: .45;
  transform: scaleX(.35);
  transform-origin: left center;
  transition: transform .34s ease, opacity .34s ease;
}

.household-budget-section.is-visible .household-cost-card {
  animation: householdCardRise .68s cubic-bezier(.2,.75,.2,1) both;
}

.household-budget-section.is-visible .household-cost-card:nth-child(1) { animation-delay: .12s; }
.household-budget-section.is-visible .household-cost-card:nth-child(2) { animation-delay: .22s; }
.household-budget-section.is-visible .household-cost-card:nth-child(3) { animation-delay: .32s; }
.household-budget-section.is-visible .household-cost-card:nth-child(4) { animation-delay: .42s; }
.household-budget-section.is-visible .household-cost-card:nth-child(5) { animation-delay: .52s; }

.household-cost-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(168, 239, 255, 0.48) !important;
  background: linear-gradient(145deg, rgba(37, 103, 124, 0.80), rgba(8, 43, 63, 0.72)) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.28), 0 0 0 1px rgba(154,234,255,.08) inset !important;
}

.household-cost-card:hover::before { opacity: 1; }
.household-cost-card:hover::after { opacity: 1; transform: scaleX(1); }

.household-cost-card .card-number {
  display: inline-flex !important;
  width: 38px !important;
  height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(125, 218, 255, 0.18) !important;
  border: 1px solid rgba(125, 218, 255, 0.36) !important;
  color: #c8f4ff !important;
  font-weight: 900 !important;
  font-size: .84rem !important;
  margin: 0 0 16px !important;
  box-shadow: 0 0 0 rgba(157, 238, 255, .0);
}

.household-budget-section.is-visible .household-cost-card .card-number {
  animation: householdNumberPulse 2.8s ease-in-out infinite;
}

.household-budget-section.is-visible .household-cost-card:nth-child(1) .card-number { animation-delay: .1s; }
.household-budget-section.is-visible .household-cost-card:nth-child(2) .card-number { animation-delay: .32s; }
.household-budget-section.is-visible .household-cost-card:nth-child(3) .card-number { animation-delay: .54s; }
.household-budget-section.is-visible .household-cost-card:nth-child(4) .card-number { animation-delay: .76s; }
.household-budget-section.is-visible .household-cost-card:nth-child(5) .card-number { animation-delay: .98s; }

.household-cost-card .cost-icon {
  position: absolute !important;
  top: 18px;
  right: 18px;
  display: inline-flex !important;
  width: 44px !important;
  height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  margin: 0 !important;
  font-size: 1.34rem !important;
  line-height: 1 !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transform: rotate(-4deg);
}

.household-cost-card:hover .cost-icon {
  animation: householdIconWiggle .72s ease-in-out;
}

.household-key-message {
  position: relative;
  overflow: hidden;
}

.household-key-message::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-120%);
  animation: householdKeySweep 6s ease-in-out infinite;
}

@keyframes householdGlowDrift {
  0% { transform: translate(-1.5%, -1%) scale(1); }
  100% { transform: translate(1.5%, 1%) scale(1.03); }
}

@keyframes householdSheen {
  0%, 22% { background-position: 160% 50%; opacity: .18; }
  55% { background-position: 30% 50%; opacity: .42; }
  100% { background-position: -60% 50%; opacity: .18; }
}

@keyframes householdScan {
  0%, 45% { left: -42%; opacity: 0; }
  55% { opacity: 1; }
  100% { left: 112%; opacity: 0; }
}

@keyframes householdPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(157, 238, 255, 0.58); }
  70% { box-shadow: 0 0 0 12px rgba(157, 238, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(157, 238, 255, 0); }
}

@keyframes householdFlowLine {
  0% { background-position: 180% 0; }
  100% { background-position: -40% 0; }
}

@keyframes householdNodeIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes householdNodeBreathe {
  0%, 100% { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,.10); }
  50% { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22), 0 0 22px rgba(151, 236, 255, .15), inset 0 1px 0 rgba(255,255,255,.12); }
}

@keyframes householdCardRise {
  0% { opacity: 0; transform: translateY(22px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes householdNumberPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(157, 238, 255, .0); }
  50% { box-shadow: 0 0 0 8px rgba(157, 238, 255, .08); }
}

@keyframes householdIconWiggle {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  35% { transform: rotate(7deg) scale(1.08); }
  70% { transform: rotate(-2deg) scale(1.03); }
}

@keyframes householdKeySweep {
  0%, 55% { transform: translateX(-125%); }
  100% { transform: translateX(125%); }
}

@media (max-width: 900px) {
  .household-flow-track {
    grid-template-columns: 1fr;
  }

  .household-flow-track::before {
    left: 28px;
    right: auto;
    top: 24px;
    bottom: 24px;
    width: 3px;
    height: auto;
    transform: none;
    background: linear-gradient(180deg, rgba(139,226,255,.14), rgba(139,226,255,.72), rgba(255,255,255,.74), rgba(139,226,255,.14));
    background-size: 100% 220%;
    animation: householdFlowLineMobile 3.8s linear infinite;
  }

  .flow-node {
    justify-content: flex-start;
    padding-left: 52px;
    min-height: 48px;
  }

  .flow-addon-header {
    flex-wrap: wrap;
  }

  .flow-addon-header small {
    flex: 1 1 100%;
    margin-left: 22px;
  }
}

@keyframes householdFlowLineMobile {
  0% { background-position: 0 -80%; }
  100% { background-position: 0 120%; }
}

@media (prefers-reduced-motion: reduce) {
  .household-budget-card::before,
  .household-budget-card::after,
  .household-flow-addon::before,
  .flow-pulse-dot,
  .household-flow-track::before,
  .household-budget-section.is-visible .flow-node,
  .household-budget-section.is-visible .household-cost-card,
  .household-budget-section.is-visible .household-cost-card .card-number,
  .household-cost-card:hover .cost-icon,
  .household-key-message::after {
    animation: none !important;
  }

  .flow-node,
  .household-cost-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* v1.4.0 visible Household Budget View motion polish
   Forces the cost-path animation to be visible even when scroll-reveal classes are cached or delayed. */
.household-budget-section .household-budget-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.household-budget-section .household-budget-card::before {
  content: "" !important;
  position: absolute !important;
  inset: -35% -18% !important;
  z-index: -2 !important;
  background:
    radial-gradient(circle at 14% 20%, rgba(126, 233, 255, 0.28), transparent 22%),
    radial-gradient(circle at 86% 30%, rgba(50, 190, 236, 0.18), transparent 24%),
    radial-gradient(circle at 48% 110%, rgba(116, 230, 255, 0.13), transparent 34%) !important;
  animation: householdVisibleGlow 12s ease-in-out infinite alternate !important;
}

.household-budget-section .household-budget-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .45 !important;
  background:
    linear-gradient(115deg, transparent 0 24%, rgba(169, 242, 255, 0.11) 30%, transparent 38% 100%) !important;
  background-size: 230% 230% !important;
  animation: householdVisibleSheen 6.8s ease-in-out infinite !important;
}

.household-flow-addon {
  display: block !important;
  position: relative !important;
  margin: 28px 0 32px !important;
  border: 1px solid rgba(151, 232, 255, 0.34) !important;
  border-radius: 24px !important;
  padding: 18px !important;
  background: linear-gradient(135deg, rgba(18, 84, 108, 0.68), rgba(5, 31, 52, 0.56)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 50px rgba(0,0,0,.24) !important;
  overflow: hidden !important;
}

.household-flow-addon::before {
  content: "" !important;
  position: absolute !important;
  left: -38% !important;
  top: 0 !important;
  width: 34% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(167, 244, 255, 0.22), transparent) !important;
  transform: skewX(-18deg) !important;
  animation: householdVisibleScan 4.8s ease-in-out infinite !important;
}

.flow-addon-header {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  color: #fff !important;
}

.flow-addon-header strong {
  font-weight: 900 !important;
  letter-spacing: .01em !important;
}

.flow-addon-header small {
  color: rgba(221, 247, 255, 0.76) !important;
  margin-left: auto !important;
  font-size: .85rem !important;
}

.flow-pulse-dot {
  display: inline-flex !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: #9deeff !important;
  box-shadow: 0 0 0 0 rgba(157,238,255,.58) !important;
  animation: householdVisiblePulseDot 1.65s ease-out infinite !important;
}

.household-flow-track {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: center !important;
}

.household-flow-track::before {
  content: "" !important;
  position: absolute !important;
  left: 6% !important;
  right: 6% !important;
  top: 50% !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(139,226,255,.12), rgba(139,226,255,.85), rgba(255,255,255,.9), rgba(139,226,255,.85), rgba(139,226,255,.12)) !important;
  background-size: 240% 100% !important;
  transform: translateY(-50%) !important;
  animation: householdVisibleFlowLine 2.2s linear infinite !important;
}

.flow-node {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  text-align: center !important;
  font-weight: 900 !important;
  font-size: .84rem !important;
  color: #effcff !important;
  background: linear-gradient(145deg, rgba(31, 105, 128, .98), rgba(8, 47, 68, .98)) !important;
  border: 1px solid rgba(164, 239, 255, .38) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.12) !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  animation: householdVisibleNodeBreathe 3.8s ease-in-out infinite !important;
}

.flow-node:not(:last-child)::after {
  content: "→" !important;
  position: absolute !important;
  right: -17px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(181, 244, 255, .85) !important;
  font-weight: 900 !important;
  text-shadow: 0 0 14px rgba(151,236,255,.5) !important;
  animation: householdArrowNudge 1.4s ease-in-out infinite !important;
}

.household-cost-card {
  position: relative !important;
  overflow: hidden !important;
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease !important;
  animation: householdSoftFloat 7.2s ease-in-out infinite !important;
}

.household-cost-card:nth-child(1) { animation-delay: 0s !important; }
.household-cost-card:nth-child(2) { animation-delay: .18s !important; }
.household-cost-card:nth-child(3) { animation-delay: .36s !important; }
.household-cost-card:nth-child(4) { animation-delay: .54s !important; }
.household-cost-card:nth-child(5) { animation-delay: .72s !important; }

.household-cost-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .18 !important;
  background: radial-gradient(circle at 22% 10%, rgba(155,239,255,.28), transparent 32%) !important;
  transition: opacity .28s ease !important;
}

.household-cost-card::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 0 !important;
  height: 3px !important;
  border-radius: 999px 999px 0 0 !important;
  background: linear-gradient(90deg, transparent, rgba(151,236,255,.95), transparent) !important;
  opacity: .72 !important;
  transform: scaleX(.42) !important;
  transform-origin: left center !important;
  animation: householdBottomBeam 3.4s ease-in-out infinite !important;
}

.household-cost-card.is-active,
.household-cost-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(178, 243, 255, 0.55) !important;
  background: linear-gradient(145deg, rgba(42, 115, 136, 0.84), rgba(8, 47, 68, 0.78)) !important;
  box-shadow: 0 24px 58px rgba(0,0,0,.30), 0 0 28px rgba(151,236,255,.12), 0 0 0 1px rgba(154,234,255,.08) inset !important;
}

.household-cost-card.is-active::before,
.household-cost-card:hover::before { opacity: .9 !important; }

.household-cost-card.is-active::after,
.household-cost-card:hover::after { opacity: 1 !important; transform: scaleX(1) !important; }

.household-cost-card .card-number {
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(125,218,255,.20) !important;
  border: 1px solid rgba(125,218,255,.44) !important;
  color: #d0f6ff !important;
  font-weight: 950 !important;
  font-size: .86rem !important;
  margin: 0 0 16px !important;
  animation: householdVisibleNumberPulse 2.3s ease-in-out infinite !important;
}

.household-cost-card .cost-icon {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  display: inline-flex !important;
  width: 44px !important;
  height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  margin: 0 !important;
  font-size: 1.25rem !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 18px rgba(151,236,255,.08) !important;
  transform: rotate(-4deg) !important;
  animation: householdIconFloat 4.2s ease-in-out infinite !important;
}

.household-cost-card.is-active .cost-icon,
.household-cost-card:hover .cost-icon {
  animation: householdIconWiggle .75s ease-in-out !important;
}

.household-key-message {
  position: relative !important;
  overflow: hidden !important;
}

.household-key-message::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent) !important;
  transform: translateX(-120%) !important;
  animation: householdVisibleKeySweep 4.8s ease-in-out infinite !important;
}

@keyframes householdVisibleGlow {
  0% { transform: translate(-1.6%, -1%) scale(1); }
  100% { transform: translate(1.6%, 1.1%) scale(1.035); }
}

@keyframes householdVisibleSheen {
  0%, 18% { background-position: 170% 50%; opacity: .22; }
  52% { background-position: 35% 50%; opacity: .52; }
  100% { background-position: -70% 50%; opacity: .22; }
}

@keyframes householdVisibleScan {
  0%, 36% { left: -42%; opacity: 0; }
  50% { opacity: 1; }
  100% { left: 118%; opacity: 0; }
}

@keyframes householdVisiblePulseDot {
  0% { box-shadow: 0 0 0 0 rgba(157,238,255,.62); }
  70% { box-shadow: 0 0 0 12px rgba(157,238,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(157,238,255,0); }
}

@keyframes householdVisibleFlowLine {
  0% { background-position: 180% 0; }
  100% { background-position: -40% 0; }
}

@keyframes householdVisibleNodeBreathe {
  0%, 100% { box-shadow: 0 14px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.12); }
  50% { box-shadow: 0 18px 38px rgba(0,0,0,.24), 0 0 26px rgba(151,236,255,.18), inset 0 1px 0 rgba(255,255,255,.15); }
}

@keyframes householdArrowNudge {
  0%, 100% { transform: translate(-2px, -50%); opacity: .54; }
  50% { transform: translate(2px, -50%); opacity: 1; }
}

@keyframes householdSoftFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

@keyframes householdBottomBeam {
  0%, 100% { transform: scaleX(.42); opacity: .48; }
  50% { transform: scaleX(.78); opacity: .9; }
}

@keyframes householdVisibleNumberPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(157,238,255,0); }
  50% { box-shadow: 0 0 0 9px rgba(157,238,255,.10); }
}

@keyframes householdIconFloat {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-4px); }
}

@keyframes householdVisibleKeySweep {
  0%, 48% { transform: translateX(-125%); }
  100% { transform: translateX(125%); }
}

@media (max-width: 900px) {
  .household-flow-track {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .household-flow-track::before {
    left: 26px !important;
    right: auto !important;
    top: 24px !important;
    bottom: 24px !important;
    width: 4px !important;
    height: auto !important;
    transform: none !important;
    background: linear-gradient(180deg, rgba(139,226,255,.12), rgba(139,226,255,.85), rgba(255,255,255,.9), rgba(139,226,255,.12)) !important;
    background-size: 100% 240% !important;
    animation: householdVisibleFlowLineMobile 2.2s linear infinite !important;
  }

  .flow-node {
    justify-content: flex-start !important;
    padding-left: 54px !important;
    border-radius: 18px !important;
  }

  .flow-node:not(:last-child)::after {
    content: "↓" !important;
    right: auto !important;
    left: 17px !important;
    top: calc(100% + 2px) !important;
    transform: none !important;
  }

  .flow-addon-header {
    flex-wrap: wrap !important;
  }

  .flow-addon-header small {
    flex: 1 1 100% !important;
    margin-left: 22px !important;
  }
}

@keyframes householdVisibleFlowLineMobile {
  0% { background-position: 0 -80%; }
  100% { background-position: 0 120%; }
}

@media (prefers-reduced-motion: reduce) {
  .household-budget-card::before,
  .household-budget-card::after,
  .household-flow-addon::before,
  .flow-pulse-dot,
  .household-flow-track::before,
  .flow-node,
  .household-cost-card,
  .household-cost-card::after,
  .household-cost-card .card-number,
  .household-cost-card .cost-icon,
  .household-key-message::after {
    animation: none !important;
  }
}

/* v1.4.1 Household Budget View animation refinement
   Calmer motion, cleaner pathway labels, and better spacing on desktop/mobile. */
.household-budget-section .household-budget-card {
  padding-top: clamp(30px, 3vw, 48px) !important;
}

.household-budget-section .household-story-copy {
  margin-bottom: 18px !important;
}

.household-flow-addon {
  margin: 22px 0 30px !important;
  padding: clamp(14px, 1.5vw, 18px) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(14, 72, 94, 0.58), rgba(4, 31, 48, 0.46)) !important;
}

.household-flow-addon::before {
  animation-duration: 8.8s !important;
  opacity: .75 !important;
}

.flow-addon-header {
  gap: 9px !important;
  margin-bottom: 14px !important;
}

.flow-addon-header strong {
  font-size: .98rem !important;
}

.flow-addon-header small {
  font-size: .8rem !important;
  color: rgba(214, 244, 255, 0.78) !important;
}

.flow-pulse-dot {
  width: 10px !important;
  height: 10px !important;
  animation-duration: 2.6s !important;
}

.household-flow-track {
  gap: 18px !important;
  align-items: center !important;
}

.household-flow-track::before {
  left: 7% !important;
  right: 7% !important;
  height: 2px !important;
  opacity: .78 !important;
  animation-duration: 6.8s !important;
}

.flow-node {
  min-height: 42px !important;
  padding: 9px 13px !important;
  font-size: clamp(.70rem, .78vw, .82rem) !important;
  line-height: 1.18 !important;
  gap: 7px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.10) !important;
  animation-duration: 6.4s !important;
}

.flow-node b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  font-size: .68rem;
  color: #082f42;
  background: rgba(183, 244, 255, .88);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
}

.flow-node:not(:last-child)::after {
  right: -17px !important;
  font-size: .8rem !important;
  opacity: .70 !important;
  animation-duration: 2.8s !important;
}

.household-cost-grid {
  gap: clamp(14px, 1.6vw, 22px) !important;
}

.household-cost-card {
  transition: transform .38s ease, border-color .38s ease, background .38s ease, box-shadow .38s ease !important;
  animation-duration: 6.6s !important;
}

.household-cost-card.is-active {
  transform: translateY(-5px) !important;
}

.household-cost-card:hover {
  transform: translateY(-7px) !important;
}

.household-cost-card .card-number {
  animation-duration: 3.6s !important;
}

.household-cost-card .cost-icon {
  animation-duration: 6.2s !important;
}

.household-key-message::after {
  animation-duration: 7.2s !important;
}

@media (max-width: 1200px) {
  .household-flow-track {
    gap: 12px !important;
  }

  .flow-node {
    min-height: 44px !important;
    padding: 9px 10px !important;
  }

  .flow-node b {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
  }
}

@media (max-width: 900px) {
  .household-flow-addon {
    margin: 20px 0 24px !important;
    padding: 14px !important;
  }

  .household-flow-track {
    gap: 9px !important;
  }

  .household-flow-track::before {
    left: 25px !important;
    width: 3px !important;
    animation-duration: 5.8s !important;
  }

  .flow-node {
    min-height: 42px !important;
    justify-content: flex-start !important;
    padding: 10px 12px 10px 52px !important;
    font-size: .84rem !important;
    border-radius: 16px !important;
  }

  .flow-node b {
    position: absolute !important;
    left: 12px !important;
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
  }

  .flow-node:not(:last-child)::after {
    left: 21px !important;
    top: calc(100% - 1px) !important;
    font-size: .74rem !important;
  }

  .flow-addon-header small {
    margin-left: 19px !important;
  }

  .household-cost-card.is-active {
    transform: translateY(-3px) !important;
  }
}

@media (max-width: 560px) {
  .flow-addon-header {
    align-items: flex-start !important;
  }

  .flow-addon-header strong,
  .flow-addon-header small {
    flex: 1 1 calc(100% - 22px) !important;
    margin-left: 0 !important;
  }

  .flow-addon-header small {
    padding-left: 19px !important;
  }
}

/* v1.4.1 Interactive Country Evidence Lens */
.country-evidence-lens-section {
  overflow: hidden !important;
  isolation: isolate;
}

.country-evidence-lens-section::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 16%, rgba(14, 165, 233, .18), transparent 34%),
    radial-gradient(circle at 88% 74%, rgba(20, 184, 166, .16), transparent 38%);
  pointer-events: none;
  z-index: 0;
}

.country-evidence-lens-section > * {
  position: relative;
  z-index: 1;
}

.country-evidence-heading {
  margin-bottom: clamp(18px, 2vw, 28px) !important;
}

.country-lens-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin: 0 0 clamp(18px, 2.2vw, 30px);
  padding: 10px;
  border: 1px solid rgba(14, 116, 144, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 16px 36px rgba(15, 45, 65, .10);
}

.country-lens-pill {
  appearance: none;
  border: 1px solid rgba(14, 116, 144, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .66);
  color: #0f3445;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 10px 14px;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}

.country-lens-pill:hover,
.country-lens-pill:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(8, 145, 178, .58);
  box-shadow: 0 12px 24px rgba(14, 116, 144, .16);
  outline: none;
}

.country-lens-pill.active,
.country-lens-pill[aria-current="true"] {
  background: linear-gradient(135deg, #0e7490, #0f766e);
  color: #ecfeff;
  border-color: rgba(103, 232, 249, .65);
  box-shadow: 0 14px 28px rgba(14, 116, 144, .24);
}

.country-evidence-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  gap: clamp(16px, 2vw, 26px);
  width: 100%;
  align-items: stretch;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.country-profile-card,
.country-chain-card,
.country-detail-card {
  border: 1px solid rgba(14, 116, 144, .22);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(231, 250, 252, .70));
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(15, 45, 65, .12);
}

.country-profile-card,
.country-chain-card {
  padding: clamp(18px, 2vw, 28px);
}

.country-profile-topline {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.country-code-chip,
.country-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.country-code-chip {
  min-width: 48px;
  min-height: 34px;
  padding: 7px 12px;
  color: #ecfeff;
  background: linear-gradient(135deg, #0e7490, #155e75);
  box-shadow: 0 12px 24px rgba(14, 116, 144, .20);
}

.country-status-chip {
  padding: 8px 12px;
  color: #0f4c5c;
  background: rgba(103, 232, 249, .22);
  border: 1px solid rgba(14, 116, 144, .20);
}

.country-profile-card h3 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.7rem);
  line-height: .96;
  letter-spacing: -.04em;
  color: #0b2f3f;
}

.country-profile-card h4 {
  margin: 12px 0 12px;
  font-size: clamp(1.05rem, 1.4vw, 1.45rem);
  line-height: 1.25;
  color: #0f5f72;
}

.country-profile-card p,
.country-chain-card p,
.country-detail-card p {
  color: #2d5160;
  line-height: 1.75;
}

.country-pressure-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.country-pressure-badges span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(14, 116, 144, .18);
  background: rgba(255, 255, 255, .68);
  color: #16465a;
  font-size: .88rem;
  font-weight: 800;
}

.country-pressure-badges span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0891b2;
  box-shadow: 0 0 0 4px rgba(8, 145, 178, .12);
}

.mini-chain-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.mini-chain-title span {
  color: #406575;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
}

.mini-chain-title strong {
  color: #0f5f72;
  font-size: .95rem;
}

.country-mini-chain {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
}

.country-mini-chain span {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(6, 78, 94, .08);
  border: 1px solid rgba(14, 116, 144, .16);
  color: #113b4d;
  font-weight: 850;
  font-size: .86rem;
  line-height: 1.25;
}

.country-mini-chain i {
  display: block;
  height: 2px;
  background: linear-gradient(90deg, rgba(14,116,144,.2), rgba(14,116,144,.75));
  position: relative;
}

.country-mini-chain i::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(14,116,144,.75);
  border-right: 2px solid rgba(14,116,144,.75);
  transform: translateY(-50%) rotate(45deg);
}

.country-chain-card p {
  margin: 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(14, 116, 144, .09);
  border: 1px solid rgba(14, 116, 144, .14);
  font-weight: 750;
  color: #173f50;
}

.country-lens-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.country-detail-card {
  padding: 18px;
}

.country-detail-card span {
  display: block;
  margin-bottom: 8px;
  font-size: .8rem;
  font-weight: 950;
  color: #0f5f72;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.country-detail-card p {
  margin: 0;
  font-weight: 650;
}

.country-signal-grid {
  margin-top: 0 !important;
}

.country-evidence-lens-section.selection-updated .country-profile-card,
.country-evidence-lens-section.selection-updated .country-chain-card,
.country-evidence-lens-section.selection-updated .country-detail-card,
.country-evidence-lens-section.selection-updated .lens-card {
  animation: countryLensRefresh .55s ease both;
}

@keyframes countryLensRefresh {
  from { opacity: .35; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .country-evidence-panel {
    grid-template-columns: 1fr;
  }

  .country-mini-chain {
    grid-template-columns: 1fr;
  }

  .country-mini-chain i {
    width: 2px;
    height: 18px;
    justify-self: center;
    background: linear-gradient(180deg, rgba(14,116,144,.2), rgba(14,116,144,.75));
  }

  .country-mini-chain i::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -2px;
    transform: translateX(-50%) rotate(135deg);
  }
}

@media (max-width: 760px) {
  .country-lens-pills {
    border-radius: 24px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .country-lens-pill {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .country-lens-detail-grid {
    grid-template-columns: 1fr;
  }

  .country-profile-card h3 {
    font-size: clamp(1.9rem, 12vw, 3rem);
  }
}