@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --ink: #f4f8f8;
  --ink-strong: #ffffff;
  --muted: #9aabb1;
  --dim: #68808a;
  --bg: #06151f;
  --bg-deep: #041019;
  --panel: rgba(13, 35, 46, 0.78);
  --panel-strong: #0d2632;
  --panel-soft: rgba(18, 52, 64, 0.48);
  --line: rgba(163, 218, 227, 0.15);
  --line-strong: rgba(163, 218, 227, 0.3);
  --cyan: #84e4e5;
  --cyan-dark: #2bbdc5;
  --gold: #eacb83;
  --coral: #ff9879;
  --violet: #b9a5ff;
  --green: #8fd5a4;
  --blue: #86bbff;
  --danger: #ff9b9b;
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.26);
  --radius: 20px;
  --radius-sm: 12px;
  --surface-card: rgba(255, 255, 255, 0.025);
  --surface-card-2: rgba(255, 255, 255, 0.035);
  --surface-hover: rgba(255, 255, 255, 0.1);
  --surface-panel: rgba(6, 21, 31, 0.34);
  --surface-input: rgba(1, 12, 19, 0.42);
  --btn-bg: rgba(255, 255, 255, 0.05);
  --btn-bg-hover: rgba(255, 255, 255, 0.1);
  --btn-border-hover: rgba(255, 255, 255, 0.35);
  --btn-primary-fill: #84e4e5;
  --btn-primary-ink: #08222b;
  --btn-primary-hover: #b5f4ed;
  --btn-gold-fill: #eacb83;
  --btn-gold-ink: #332713;
  --head-bg: rgba(4, 16, 25, 0.84);
  --modal-bg: #0b2733;
  --modal-panel: #0b2935;
  --toast-bg: #143845;
  --rail-bg: #071d27;
  --on-panel: #ffffff;
  --on-panel-soft: #b4c4c8;
  --on-art: #ffffff;
}

/* Natural light theme: warm sand canvas, forest-green ink, deeper SDG accents
   for contrast on light surfaces. Deliberate dark media (globe, GIS map,
   sports/equipment render, film theatre) stays dark as its own surface. */
[data-theme="light"] {
  --ink: #263b32;
  --ink-strong: #13271d;
  --muted: #5b6b60;
  --dim: #86938a;
  --bg: #f2efe6;
  --bg-deep: #eae6d9;
  --panel: rgba(255, 255, 255, 0.8);
  --panel-strong: #ffffff;
  --panel-soft: rgba(255, 255, 255, 0.55);
  --line: rgba(46, 74, 58, 0.15);
  --line-strong: rgba(46, 74, 58, 0.3);
  --cyan: #197f85;
  --cyan-dark: #146a70;
  --gold: #a8773a;
  --coral: #cc6a4c;
  --violet: #6b58ad;
  --green: #3d8c60;
  --blue: #3c7bbd;
  --danger: #c2513f;
  --shadow: 0 24px 90px rgba(58, 79, 66, 0.15);
  --surface-card: rgba(26, 42, 34, 0.06);
  --surface-card-2: rgba(26, 42, 34, 0.08);
  --surface-hover: rgba(26, 42, 34, 0.1);
  --surface-panel: rgba(255, 255, 255, 0.62);
  --surface-input: rgba(26, 42, 34, 0.05);
  --btn-bg: rgba(26, 42, 34, 0.05);
  --btn-bg-hover: rgba(26, 42, 34, 0.1);
  --btn-border-hover: rgba(46, 74, 58, 0.32);
  --head-bg: rgba(255, 255, 255, 0.82);
  --modal-bg: #ffffff;
  --modal-panel: #ffffff;
  --toast-bg: #ffffff;
  --rail-bg: #ffffff;
  --on-panel: #13271d;
  --on-panel-soft: #55645c;
  --on-art: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 76% -10%, rgba(40, 119, 140, 0.22), transparent 28rem),
    radial-gradient(circle at 3% 38%, rgba(24, 72, 97, 0.16), transparent 25rem),
    var(--bg);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  line-height: 1.5;
}
body.modal-open { overflow:hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; }
.site-header {
  position: sticky; top: 0; z-index: 30;
  height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(18px, 4vw, 64px);
  background: var(--head-bg);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: flex; align-items: center; gap: 10px; min-width: max-content; border: 0; padding: 0; color: var(--ink); background: transparent; text-align: left; }
.brand-logo { display:block; flex:0 0 auto; width:58px; height:58px; object-fit:contain; }
.wordmark-copy { min-width:0; overflow:hidden; }
.wordmark-copy strong { display:block; font:700 15px/1 "Space Grotesk", sans-serif; letter-spacing:.16em; white-space:nowrap; }
.wordmark-copy small { display:block; color:var(--dim); font-size:9px; font-weight:700; letter-spacing:.18em; margin-top:4px; white-space:nowrap; }
.mark {
  position: relative; width: 27px; height: 27px; border: 1px solid var(--cyan);
  border-radius: 50%; display: inline-grid; place-items: center;
}
.mark::before, .mark::after { content: ""; position: absolute; border: 1px solid rgba(132,228,229,.62); border-radius: 50%; }
.mark::before { width: 35px; height: 11px; transform: rotate(38deg); }
.mark::after { width: 11px; height: 35px; transform: rotate(38deg); }
.mark-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.wordmark strong { font: 700 15px/1 "Space Grotesk", sans-serif; letter-spacing: .16em; }
.wordmark small { display: block; color: var(--dim); font-size: 9px; font-weight: 700; letter-spacing: .18em; margin-top: 4px; }
.primary-nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); margin-left: auto; }
.primary-nav button, .header-action {
  border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 700;
  padding: 10px 0; transition: color .2s ease;
}
.primary-nav button:hover, .primary-nav button.active, .header-action:hover { color: var(--ink); }
.header-actions { display: flex; gap: 8px; align-items: center; }
.header-action { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; padding: 0; }
.header-action svg, .btn svg, .card-link svg, .mobile-nav svg { width: 16px; height: 16px; }
.header-action.profile-dot { background: rgba(132, 228, 229, .13); color: var(--cyan); font-size: 12px; }
.btn {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 17px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink);
  background: var(--btn-bg); font-size: 12px; font-weight: 800; transition: transform .2s, background .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); background: var(--btn-bg-hover); border-color: var(--btn-border-hover); }
.btn.primary { color: var(--btn-primary-ink); background: var(--btn-primary-fill); border-color: var(--btn-primary-fill); }
.btn.primary:hover { background: var(--btn-primary-hover); }
.btn.gold { color: var(--btn-gold-ink); background: var(--btn-gold-fill); border-color: var(--btn-gold-fill); }
.btn.small { min-height: 36px; padding: 8px 13px; font-size: 11px; }
.btn.full { width: 100%; }
.btn.text { border: 0; padding-left: 0; padding-right: 0; color: var(--cyan); background: transparent; }
.btn.danger { color: var(--danger); border-color: rgba(255,155,155,.3); }
.mobile-nav { display: none; }
.page { max-width: 1500px; margin: 0 auto; padding: 54px clamp(18px, 4vw, 64px) 110px; }
.eyebrow { color: var(--cyan); font: 500 10px/1.2 "DM Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
.display { font: 600 clamp(38px, 5.3vw, 80px)/.98 "Space Grotesk", sans-serif; letter-spacing: -.055em; margin: 16px 0 20px; max-width: 840px; }
.lede { color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); max-width: 690px; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.mono { font-family: "DM Mono", monospace; }
.section { margin-top: 86px; }
.section-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 22px; }
.section-title { font: 600 clamp(26px, 3vw, 42px)/1.06 "Space Grotesk", sans-serif; letter-spacing: -.045em; margin: 8px 0 0; }
.section-copy { margin: 8px 0 0; color: var(--muted); max-width: 570px; font-size: 14px; }
.panel {
  background: linear-gradient(135deg, rgba(22, 59, 71, .76), rgba(9, 29, 39, .79));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
[data-theme="light"] .panel { background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68)); }
.panel h1, .panel h2, .panel h3, .panel h4,
.panel-soft h3, .panel-soft h4,
.activation-card strong, .pathway h3, .list-card h3, .record-card h3,
.course-card h3, .detail-side h3, .detail-layout h2, .detail-layout h3,
.football-copy h3, .admin-kpi strong, .country-hero h1, .country-hero h2,
.education-hero h1, .modal-head h2, .hero-info-card h3 {
  color: var(--ink-strong);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .2);
}
.activation-card span:not(.activation-icon), .pathway p, .list-card p,
.record-card p, .course-card p, .detail-side-row, .detail-layout .prose,
.football-copy p, .admin-kpi span {
  color: var(--on-panel-soft);
}
.panel-soft { background: var(--surface-panel); border: 1px solid var(--line); border-radius: 12px; }
.panel-pad { padding: clamp(18px, 2.4vw, 32px); }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.tag {
  display: inline-flex; align-items: center; width: max-content; gap: 5px; padding: 5px 9px; border-radius: 999px;
  color: var(--cyan); background: rgba(132, 228, 229, .1); border: 1px solid rgba(132, 228, 229, .18);
  font: 500 10px/1.1 "DM Mono", monospace;
}
.tag.gold { color: var(--gold); background: rgba(234,203,131,.1); border-color: rgba(234,203,131,.22); }
.tag.coral { color: var(--coral); background: rgba(255,152,121,.1); border-color: rgba(255,152,121,.2); }
.tag.green { color: var(--green); background: rgba(143,213,164,.1); border-color: rgba(143,213,164,.2); }
.tag.violet { color: var(--violet); background: rgba(185,165,255,.1); border-color: rgba(185,165,255,.2); }
.tag.sdg-badge { color:var(--sdg-ink,#fff); background:var(--sdg-color); border-color:var(--sdg-color); font-weight:700; text-shadow:none; }
.hero { min-height: 680px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: start; gap: 40px; }
.hero-copy { position: relative; z-index: 2; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-note { display: flex; gap: 10px; align-items: center; margin-top: 34px; color: var(--dim); font-size: 11px; }
.pulse { width: 8px; height: 8px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,152,121,.12), 0 0 18px var(--coral); }
.hero-orbit { min-height: 560px; position: relative; display: grid; place-items: center; }
.space-glow { position: absolute; inset: 12% 2% 10%; background: radial-gradient(circle, rgba(54,171,182,.2), transparent 54%); filter: blur(10px); }
.globe {
  position: relative; width: min(39vw, 500px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(139,246,240,.27), transparent 7%),
    radial-gradient(circle at 60% 67%, rgba(40,155,180,.3), transparent 30%),
    linear-gradient(135deg, #0d4452, #092530 58%, #06151f);
  box-shadow: inset -32px -32px 65px rgba(0,0,0,.36), inset 12px 7px 35px rgba(167,246,239,.16), 0 0 0 1px rgba(132,228,229,.28), 0 0 90px rgba(50,189,197,.2);
  overflow: hidden;
}
.globe::before, .globe::after { content:""; position: absolute; inset: 12% -20%; border: 1px solid rgba(168,237,229,.24); border-radius: 50%; transform: rotate(-21deg); }
.globe::after { inset: -20% 29%; transform: rotate(17deg); }
.globe-lines { position: absolute; inset: 0; background: repeating-linear-gradient(14deg, transparent 0 50px, rgba(155,228,227,.08) 51px 52px, transparent 53px 99px); opacity: .5; transform: rotate(-20deg); animation: globe-drift 26s linear infinite; }
.globe-label { position: absolute; top: 18%; left: 13%; color: rgba(219,251,245,.75); font: 500 9px "DM Mono", monospace; letter-spacing: .13em; }
.node { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 6px rgba(132,228,229,.12), 0 0 22px var(--cyan); border: 2px solid #c9fffa; z-index: 2; animation: breathe 3.5s ease-in-out infinite; }
.node.gold { background: var(--gold); box-shadow: 0 0 0 6px rgba(234,203,131,.11), 0 0 22px var(--gold); border-color: #fff3c7; }
.node.coral { background: var(--coral); box-shadow: 0 0 0 6px rgba(255,152,121,.11), 0 0 22px var(--coral); border-color: #ffe2d9; }
.node.n1 { left: 25%; top: 39%; } .node.n2 { left: 47%; top: 22%; animation-delay:.7s; } .node.n3 { left: 66%; top: 48%; animation-delay:1.1s; }
.node.n4 { left: 37%; top: 67%; animation-delay:1.8s; } .node.n5 { left: 73%; top: 72%; animation-delay:2.4s; } .node.n6 { left: 19%; top: 63%; animation-delay:2.8s; }
.orbit-caption { position: absolute; right: 3%; bottom: 14%; width: 190px; padding: 13px; background: rgba(6,21,31,.72); border: 1px solid var(--line-strong); border-radius: 12px; backdrop-filter: blur(12px); }
.orbit-caption strong { display:block; font:600 16px "Space Grotesk",sans-serif; margin: 4px 0; }
.orbit-caption span { color: var(--muted); font-size: 11px; }
@keyframes breathe { 0%,100%{ transform:scale(.85); opacity:.78;} 50%{transform:scale(1.18);opacity:1;} }
@keyframes globe-drift { from { transform: rotate(-20deg) translateX(-8px); } to { transform: rotate(340deg) translateX(8px); } }
.activation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.activation-card { min-height: 144px; padding: 20px; text-align: left; position: relative; overflow: hidden; transition: transform .2s, border-color .2s; }
.activation-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.activation-card::after { content:""; position: absolute; right:-32px; bottom:-42px; width:110px; height:110px; border-radius:50%; background: radial-gradient(circle, rgba(132,228,229,.18), transparent 68%); }
.activation-card:nth-child(1) { background:linear-gradient(145deg,rgba(17,75,79,.85),rgba(8,35,48,.82)); }.activation-card:nth-child(1):hover{background:linear-gradient(145deg,rgba(26,111,111,.9),rgba(8,35,48,.9));}
.activation-card:nth-child(2) { background:linear-gradient(145deg,rgba(25,63,83,.88),rgba(9,30,44,.82)); }.activation-card:nth-child(2):hover{background:linear-gradient(145deg,rgba(33,93,119,.9),rgba(9,30,44,.9));}
.activation-card:nth-child(3) { background:linear-gradient(145deg,rgba(58,50,77,.88),rgba(18,29,49,.84)); }.activation-card:nth-child(3):hover{background:linear-gradient(145deg,rgba(83,69,111,.92),rgba(18,29,49,.9));}
.activation-card:nth-child(4) { background:linear-gradient(145deg,rgba(33,68,64,.88),rgba(8,33,42,.84)); }.activation-card:nth-child(4):hover{background:linear-gradient(145deg,rgba(44,103,92,.92),rgba(8,33,42,.9));}
.activation-card:nth-child(5) { background:linear-gradient(145deg,rgba(55,47,75,.88),rgba(13,27,46,.84)); }.activation-card:nth-child(5):hover{background:linear-gradient(145deg,rgba(87,71,119,.92),rgba(13,27,46,.9));}
.activation-card:nth-child(6) { background:linear-gradient(145deg,rgba(72,66,39,.88),rgba(31,27,25,.84)); }.activation-card:nth-child(6):hover{background:linear-gradient(145deg,rgba(119,102,53,.92),rgba(31,27,25,.9));}
.activation-card:nth-child(7) { background:linear-gradient(145deg,rgba(67,43,51,.88),rgba(28,23,37,.84)); }.activation-card:nth-child(7):hover{background:linear-gradient(145deg,rgba(111,62,71,.92),rgba(28,23,37,.9));}
.activation-card:nth-child(8) { background:linear-gradient(145deg,rgba(32,69,69,.88),rgba(8,33,44,.84)); }.activation-card:nth-child(8):hover{background:linear-gradient(145deg,rgba(46,105,101,.92),rgba(8,33,44,.9));}
.activation-card:nth-child(9) { background:linear-gradient(145deg,rgba(44,63,54,.88),rgba(12,30,36,.84)); }.activation-card:nth-child(9):hover{background:linear-gradient(145deg,rgba(70,104,78,.92),rgba(12,30,36,.9));}
.activation-icon { width: 34px; height: 34px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:10px; color:var(--cyan); margin-bottom: 22px; }
.activation-card strong { display:block; font-size: 14px; } .activation-card span { display:block; margin-top:5px; color: var(--muted); font-size:11px; }
.campaign { position:relative; overflow:hidden; background: linear-gradient(115deg, rgba(25,67,75,.9), rgba(8,33,43,.9) 50%, rgba(42,33,39,.9)); }
.campaign::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 91% 10%, rgba(255,152,121,.22), transparent 22rem); pointer-events:none; }
.campaign-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap:30px; position:relative; }
.campaign-title { font:600 clamp(28px,3.5vw,52px)/1 "Space Grotesk",sans-serif; letter-spacing:-.05em; margin: 16px 0; max-width: 560px; }
.countdown { display:flex; flex-wrap:wrap; gap:8px; margin: 26px 0; }
.count-cell { min-width: 75px; padding: 12px 12px 10px; border:1px solid var(--line-strong); border-radius:12px; background:rgba(0,0,0,.12); }
.count-cell strong { display:block; font:600 25px "Space Grotesk",sans-serif; } .count-cell span { color:var(--muted); font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; }
.campaign-actions { display:flex; flex-wrap:wrap; gap:8px; }
.campaign-side { align-self: stretch; display:flex; flex-direction:column; justify-content:space-between; }
.events-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(220px,.9fr); gap:28px; align-items:center; padding:clamp(24px,4vw,54px); border:1px solid var(--line-strong); border-radius:20px; overflow:hidden; background:radial-gradient(circle at 86% 22%,rgba(234,203,131,.18),transparent 25%),linear-gradient(135deg,rgba(17,57,67,.86),rgba(8,25,35,.94)); }
.events-hero h1 { max-width:650px; margin:14px 0 12px; color:#fff; font:600 clamp(38px,5.5vw,72px)/.94 "Space Grotesk",sans-serif; letter-spacing:-.07em; }.events-hero .lede { max-width:650px; }.events-hero-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }.events-hero-meta { display:flex; flex-wrap:wrap; gap:16px; margin-top:27px; color:var(--dim); font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }.events-hero-meta strong { margin-right:4px; color:#fff; font:600 18px "Space Grotesk",sans-serif; letter-spacing:0; }.events-hero-meta i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#75e0a0; box-shadow:0 0 9px #75e0a0; }.events-hero-art { position:relative; width:min(100%,300px); aspect-ratio:1; justify-self:end; display:grid; place-items:center; border:1px solid rgba(234,203,131,.3); border-radius:50%; background:radial-gradient(circle,rgba(234,203,131,.17),rgba(6,23,31,.2) 48%,transparent 49%),repeating-radial-gradient(circle,transparent 0 25px,rgba(132,228,229,.13) 26px 27px); box-shadow:0 0 0 15px rgba(234,203,131,.035),0 0 70px rgba(234,203,131,.12); }.event-core { width:100px; height:100px; display:grid; place-content:center; text-align:center; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:linear-gradient(145deg,#f0d18c,#705f3b); color:#071923; font:800 17px/.95 "Space Grotesk",sans-serif; box-shadow:0 12px 24px rgba(0,0,0,.26); }.event-core small { margin-top:8px; font:700 7px "DM Mono",monospace; letter-spacing:.1em; }.event-orbit { position:absolute; border:1px solid rgba(132,228,229,.5); border-radius:50%; transform:rotate(-25deg); }.orbit-one { inset:20% 3%; }.orbit-two { inset:6% 25%; transform:rotate(55deg); border-color:rgba(255,152,121,.45); }.orbit-three { inset:31% -2%; transform:rotate(75deg); border-color:rgba(143,213,164,.5); }
.map-mini { min-height: 220px; position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden; background: radial-gradient(circle at 54% 48%, rgba(62,177,191,.16), transparent 45%), linear-gradient(155deg, rgba(7,27,36,.7), rgba(12,48,56,.7)); }
.map-mini::before { content:""; position:absolute; inset: 16% 8%; border:1px dashed rgba(132,228,229,.24); border-radius:48% 43% 50% 40%; transform:rotate(-12deg); }
.map-mini::after { content:""; position:absolute; left: 21%; top: 56%; width: 55%; height: 1px; background: linear-gradient(90deg, transparent, rgba(132,228,229,.5), transparent); transform:rotate(-15deg); box-shadow: 30px -50px 0 rgba(132,228,229,.22), -28px 28px 0 rgba(255,152,121,.32); }
.map-dot { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 5px rgba(255,152,121,.11),0 0 13px var(--coral); z-index:1; }
.map-dot.d1{left:34%;top:49%}.map-dot.d2{left:53%;top:42%}.map-dot.d3{left:67%;top:57%}.map-dot.d4{left:46%;top:72%}.map-dot.d5{left:25%;top:37%}
.micro-note { color:var(--dim); font: 500 10px "DM Mono",monospace; }
.metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric { padding: 18px; min-height: 125px; }
.metric-value { font: 600 clamp(25px, 2.5vw, 38px)/1 "Space Grotesk", sans-serif; margin: 18px 0 7px; letter-spacing:-.04em; }
.metric-label { font-size:12px; color:var(--muted); }
.metric-source { margin-top:12px; padding-top:9px; border-top:1px solid var(--line); color:var(--dim); font: 500 9px "DM Mono",monospace; }
.pathways { grid-template-columns: repeat(3, minmax(0,1fr)); }
.pathway { min-height: 170px; padding: 22px; position:relative; overflow:hidden; }
.pathway-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.pathway-number { color:var(--dim); font:500 10px "DM Mono",monospace; }
.pathway h3 { font:600 18px "Space Grotesk",sans-serif; margin:0 0 6px; }
.pathway p { color:var(--muted); font-size:11px; margin:0; max-width:250px; }
.pathway .card-link { position:absolute; right:20px; bottom:20px; color:var(--cyan); }
.pathways .pathway { transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease,background .28s ease; }
.pathways .pathway::before { content:"$1B"; position:absolute; right:-8px; top:15px; color:#ffe4a0; font:700 62px/.8 "Space Grotesk",sans-serif; letter-spacing:-.1em; opacity:0; transform:translate3d(12px,-5px,0) rotate(8deg); transition:opacity .28s ease,transform .28s ease; pointer-events:none; }
.pathways .pathway::after { content:"BILLION-DOLLAR POTENTIAL"; position:absolute; right:20px; top:22px; color:#f5d38a; font:600 7px "DM Mono",monospace; letter-spacing:.14em; opacity:0; transform:translateY(5px); transition:opacity .28s ease,transform .28s ease; pointer-events:none; }
.pathways .pathway:hover,.pathways .pathway:focus-visible { transform:translateY(-8px) scale(1.015); border-color:rgba(234,203,131,.72); background:linear-gradient(145deg,rgba(92,74,41,.94),rgba(18,34,44,.96)); box-shadow:0 20px 45px rgba(234,203,131,.12),0 0 0 1px rgba(234,203,131,.14),inset 0 1px 0 rgba(255,237,178,.2); }
.pathways .pathway:hover::before,.pathways .pathway:focus-visible::before { opacity:.15; transform:translate3d(0,0,0) rotate(8deg); }
.pathways .pathway:hover::after,.pathways .pathway:focus-visible::after { opacity:.88; transform:none; }
.activation-icon-3d { perspective:180px; transform-style:preserve-3d; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; }
.three-d-svg { width:25px; height:25px; overflow:visible; transform:rotateX(13deg) rotateY(-18deg) translateZ(0); transform-style:preserve-3d; transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease; }
.three-d-edge { vector-effect:non-scaling-stroke; }.activation-card:hover .activation-icon-3d,.activation-card:focus-visible .activation-icon-3d { transform:translateY(-3px) rotateX(10deg) rotateY(-10deg); border-color:rgba(234,203,131,.7); box-shadow:0 8px 18px rgba(0,0,0,.22),0 0 20px rgba(132,228,229,.16); }.activation-card:hover .three-d-svg,.activation-card:focus-visible .three-d-svg { transform:rotateX(23deg) rotateY(-32deg) rotateZ(-4deg) scale(1.16); filter:drop-shadow(0 5px 6px rgba(132,228,229,.26)); }
.football-feature { display:grid; grid-template-columns: 1fr 1fr; overflow:hidden; }
.football-art { min-height: 315px; position:relative; background: radial-gradient(circle at 50% 45%, rgba(234,203,131,.15), transparent 21%), linear-gradient(138deg, #102f35, #081b25); display:grid; place-items:center; }
.football-art::before { content:""; width: 190px; height:190px; border-radius:50%; border:1px solid rgba(234,203,131,.55); box-shadow: 0 0 42px rgba(234,203,131,.12); }
.football-art::after { content:"DIGITAL TWIN"; position:absolute; color:var(--gold); font:500 9px "DM Mono",monospace; letter-spacing:.22em; transform:translateY(102px); }
.ball-lines { position:absolute; width: 150px; height: 150px; border:1px solid rgba(132,228,229,.46); border-radius:50%; transform:rotate(35deg); }
.ball-lines::after { content:""; position:absolute; inset:-18px 35px; border:1px solid rgba(132,228,229,.35); border-radius:50%; transform:rotate(70deg); }
.football-art::before,.football-art::after { display:none; }
.football-art { perspective:900px; display:grid; place-items:center; overflow:hidden; }
.soccer-stage { position:relative; width:min(100%,360px); height:100%; min-height:315px; display:grid; place-items:center; transform-style:preserve-3d; }
.soccer-stage::before { content:""; position:absolute; width:240px; height:46px; bottom:27px; border-radius:50%; background:rgba(0,0,0,.36); filter:blur(18px); transform:rotateX(68deg); }
.soccer-ball { position:relative; width:218px; aspect-ratio:1; border-radius:50%; transform:rotate(-15deg) rotateX(7deg) rotateY(-18deg); transform-style:preserve-3d; background:radial-gradient(circle at 29% 20%,#fff 0 7%,#f7f8f3 25%,#d6dedc 56%,#819399 83%,#2b414b 100%); box-shadow:inset -27px -24px 35px rgba(8,25,33,.5),inset 16px 12px 22px rgba(255,255,255,.65),0 22px 28px rgba(0,0,0,.32),0 0 40px rgba(132,228,229,.15); animation:ball-float 6s ease-in-out infinite; }
.soccer-ball::before { content:""; position:absolute; inset:5px; border-radius:50%; background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.56),transparent 14%),repeating-radial-gradient(ellipse at 40% 58%,transparent 0 30px,rgba(10,35,42,.07) 31px 32px,transparent 33px 48px); mix-blend-mode:soft-light; transform:translateZ(1px); }
.soccer-ball::after { content:""; position:absolute; inset:-3px; border:1px solid rgba(188,239,234,.38); border-radius:50%; transform:translateZ(2px); }
.ball-patch { position:absolute; width:52px; height:52px; background:linear-gradient(145deg,#203b46,#07141d 76%); clip-path:polygon(50% 0,96% 35%,78% 91%,22% 91%,4% 35%); filter:drop-shadow(1px 2px 1px rgba(0,0,0,.42)); transform:translateZ(12px); }
.patch-one { left:83px; top:79px; }.patch-two { left:32px; top:51px; transform:translateZ(8px) rotate(-19deg); }.patch-three { left:137px; top:31px; transform:translateZ(5px) rotate(14deg); }.patch-four { left:142px; top:137px; transform:translateZ(7px) rotate(18deg); }
.ball-seam { position:absolute; z-index:1; width:2px; height:178px; left:106px; top:20px; border-radius:50%; background:rgba(21,50,59,.35); transform:rotate(22deg) translateZ(13px); box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.seam-two { width:180px; height:2px; left:20px; top:105px; transform:rotate(-24deg) translateZ(13px); }.seam-three { width:145px; height:2px; left:35px; top:91px; transform:rotate(69deg) translateZ(13px); opacity:.7; }
.ball-tile { position:absolute; z-index:3; border:0; padding:0; cursor:pointer; }
.qr-football-tile { right:-21px; bottom:50px; width:69px; height:81px; display:grid; place-items:center; align-content:center; gap:3px; border:5px solid #f7f8f3; border-radius:5px; background:#f7f8f3; box-shadow:0 7px 13px rgba(0,0,0,.35); transform:translateZ(56px) rotate(9deg); transition:transform .2s ease,box-shadow .2s ease; }
.qr-football-tile:hover,.qr-football-tile:focus-visible { transform:translateZ(70px) rotate(9deg) scale(1.05); box-shadow:0 11px 22px rgba(0,0,0,.42); }
.qr-football-tile svg { width:53px; height:53px; display:block; }
.qr-football-tile small { color:#152a32; font:700 6px "DM Mono",monospace; letter-spacing:.08em; white-space:nowrap; }
.ball-orbit-line { position:absolute; width:310px; height:92px; border:1px solid rgba(234,203,131,.34); border-radius:50%; transform:rotate(-16deg) translateZ(-2px); }
.football-art-label { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:var(--gold); font:500 9px "DM Mono",monospace; letter-spacing:.17em; }
@keyframes ball-float { 0%,100%{transform:rotate(-15deg) rotateX(7deg) rotateY(-18deg) translateY(0)}50%{transform:rotate(-11deg) rotateX(9deg) rotateY(-8deg) translateY(-7px)} }
.football-copy { padding: clamp(23px,4vw,48px); display:flex; flex-direction:column; justify-content:center; }
.football-copy h3 { font:600 clamp(27px, 3vw, 43px)/1 "Space Grotesk",sans-serif; letter-spacing:-.05em; margin:13px 0; }
.football-copy p { max-width:460px; color:var(--muted); font-size:13px; }
.footer-note { border-top:1px solid var(--line); padding-top:15px; margin-top:22px; color:var(--dim); font-size:11px; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:24px 0; }
.search-box { flex:1; min-width:230px; position:relative; }
.search-box input, .field input, .field select, .field textarea {
  width:100%; color:var(--ink); background:var(--surface-input); border:1px solid var(--line); border-radius:11px; padding:12px 13px; font-size:12px;
}
.search-box input { padding-left:38px; }
.search-box svg { position:absolute; left:13px; top:13px; color:var(--dim); width:15px; height:15px; }
.filter-select { color:var(--muted); background:var(--surface-input); border:1px solid var(--line); border-radius:11px; padding:12px 13px; font-size:12px; }
.view-switch { display:flex; padding:3px; border:1px solid var(--line); border-radius:10px; }
.view-switch button { color:var(--muted); background:transparent; border:0; border-radius:7px; padding:8px 10px; font-size:11px; }
.view-switch button.active { color:var(--ink); background:var(--surface-hover); }
.list-card { padding:20px; display:flex; gap:18px; align-items:flex-start; transition: border-color .2s, transform .2s; }
.list-card:hover { border-color:var(--line-strong); transform:translateY(-2px); }
.list-card-main { flex:1; min-width:0; }
.list-card h3 { margin:8px 0 5px; font:600 20px/1.08 "Space Grotesk",sans-serif; }
.list-card p { margin:0; color:var(--muted); font-size:12px; }
.list-card-side { min-width:100px; text-align:right; color:var(--dim); font:500 10px "DM Mono",monospace; }
.list-card-side .btn { margin-top:13px; }
.card-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.record-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.record-card { padding:20px; }
.record-card h3 { font:600 18px "Space Grotesk",sans-serif; margin:12px 0 5px; }
.record-card p { color:var(--muted); font-size:12px; margin:0; }
.card-link { display:inline-flex; align-items:center; gap:6px; color:var(--cyan); font-size:11px; margin-top:18px; border:0; padding:0; background:transparent; cursor:pointer; }
.record-card .card-link { display:flex; }
.empty-state { padding:45px 24px; text-align:center; border:1px dashed var(--line-strong); background:var(--surface-panel); border-radius:16px; }
.page-error { max-width:760px; margin:10vh auto 0; padding:clamp(36px,7vw,82px) 24px; background:radial-gradient(circle at 50% 0,rgba(132,228,229,.13),transparent 55%),rgba(6,21,31,.5); }
.page-error h1 { margin:12px 0 10px; color:#fff; font:600 clamp(38px,7vw,72px)/.95 "Space Grotesk",sans-serif; letter-spacing:-.07em; }
.page-error-actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:22px; }
.empty-state h3 { font:600 21px "Space Grotesk",sans-serif; margin:10px 0 6px; }
.empty-state p { margin:0 auto 19px; max-width:430px; color:var(--muted); font-size:12px; }
.detail-hero { display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:stretch; }
.detail-hero h1 { font:600 clamp(36px,5vw,68px)/.99 "Space Grotesk",sans-serif; letter-spacing:-.06em; margin:15px 0; }
.detail-side { min-height:260px; padding:26px; }
.detail-side h3 { margin:0 0 18px; font:600 18px "Space Grotesk",sans-serif; }
.detail-side-row { display:flex; justify-content:space-between; gap:15px; padding:12px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
.detail-side-row strong { color:var(--ink); text-align:right; }
.detail-layout { display:grid; grid-template-columns: 1.24fr .76fr; gap:18px; }
.detail-layout .panel { padding:24px; }
.detail-layout h2 { font:600 25px "Space Grotesk",sans-serif; margin:0 0 14px; }
.detail-layout h3 { font:600 16px "Space Grotesk",sans-serif; margin:28px 0 10px; }
.prose { color:var(--muted); font-size:13px; line-height:1.8; }
.progress-track { height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.progress-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan-dark),var(--cyan)); }
.progress-row { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; font-size:11px; color:var(--muted); }
.stage-line { display:flex; gap:0; margin:25px 0; overflow:auto; }
.stage { min-width:102px; flex:1; position:relative; padding:0 8px 0 0; color:var(--dim); font-size:10px; }
.stage::before { content:""; display:block; width:13px; height:13px; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg); margin-bottom:8px; position:relative; z-index:1; }
.stage:not(:last-child)::after { content:""; position:absolute; height:1px; left:13px; right:8px; top:6px; background:var(--line); }
.stage.done { color:var(--cyan); } .stage.done::before { border-color:var(--cyan); background:var(--cyan); box-shadow:0 0 14px rgba(132,228,229,.55); }
.stage.current { color:var(--gold); } .stage.current::before { border-color:var(--gold); box-shadow:0 0 0 4px rgba(234,203,131,.11); }
.stat-list { display:grid; gap:11px; }
.stat-row { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); }
.stat-row strong { color:var(--ink); font-size:14px; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:24px 0; overflow:auto; }
.tabs button { flex:0 0 auto; color:var(--muted); background:none; border:0; padding:12px 13px; font-size:11px; border-bottom:2px solid transparent; }
.tabs button.active { color:var(--cyan); border-color:var(--cyan); }
.course-card { padding:20px; min-height:220px; display:flex; flex-direction:column; }
.course-card h3 { font:600 20px/1.08 "Space Grotesk",sans-serif; margin:16px 0 6px; }
.course-card p { color:var(--muted); font-size:12px; margin:0; }
.course-foot { margin-top:auto; padding-top:18px; display:flex; justify-content:space-between; gap:10px; align-items:end; }
.course-foot span { color:var(--dim); font:500 10px "DM Mono",monospace; }
.education-hero { padding:34px; display:grid; grid-template-columns:1.3fr .7fr; gap:28px; align-items:center; }
.education-hero h1 { font:600 clamp(34px,4.2vw,60px)/.98 "Space Grotesk",sans-serif; letter-spacing:-.06em; margin:12px 0; }
.learning-orbit { height:210px; position:relative; border:1px solid var(--line); border-radius:16px; background:radial-gradient(circle at center,rgba(132,228,229,.14),transparent 34%),rgba(0,0,0,.12); display:grid; place-items:center; }
.learning-orbit::before,.learning-orbit::after { content:""; position:absolute; border:1px solid rgba(132,228,229,.22); border-radius:50%; width:150px; height:70px; transform:rotate(24deg); }.learning-orbit::after{width:80px;height:175px;transform:rotate(-31deg);}
.learning-core { z-index:1; width:74px;height:74px;border-radius:50%; border:1px solid var(--cyan); display:grid;place-items:center; color:var(--cyan); font:500 10px "DM Mono",monospace; text-align:center; }
.studio { display:grid; grid-template-columns:250px 1fr 280px; gap:14px; min-height:620px; }
.studio-panel { padding:18px; }
.studio-panel h3 { font:600 15px "Space Grotesk",sans-serif; margin:0 0 18px; }
.outline-item { padding:11px 10px; border-radius:9px; color:var(--muted); font-size:11px; cursor:pointer; margin:3px 0; }
.outline-item.active { color:var(--ink); background:rgba(132,228,229,.1); border-left:2px solid var(--cyan); }
.outline-item span { display:block; color:var(--dim); font:500 9px "DM Mono",monospace; margin-bottom:4px; }
.editor-block { padding:16px; border:1px solid var(--line); border-radius:12px; background:rgba(5,20,28,.48); margin-bottom:10px; }
.editor-block h4 { font:600 17px "Space Grotesk",sans-serif; margin:0 0 8px; }
.editor-block p { margin:0; color:var(--muted); font-size:12px; }
.ai-assistant { background:linear-gradient(160deg,rgba(41,67,77,.65),rgba(13,34,44,.65)); }
.ai-assistant .assistant-mark { width:38px;height:38px;border-radius:12px; display:grid;place-items:center; background:rgba(185,165,255,.12); color:var(--violet); border:1px solid rgba(185,165,255,.2); margin-bottom:18px; }
.assistant-tip { padding:12px; border:1px solid rgba(185,165,255,.18); border-radius:10px; color:#d3caff; background:rgba(185,165,255,.06); font-size:11px; margin-top:12px; }
.field { display:grid; gap:7px; margin-bottom:15px; }
.field label { color:var(--muted); font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.optional-label { color:var(--dim); font-size:9px; text-transform:none; letter-spacing:0; }
.field [data-profile-slug-status].is-available { color:var(--green); }
.field [data-profile-slug-status].is-unavailable { color:var(--coral); }
.profile-slug { display:block; color:var(--cyan); font:500 10px "DM Mono",monospace; margin-top:5px; }
.required-mark { color:var(--coral); margin-left:3px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color:var(--coral); box-shadow:0 0 0 2px rgba(255,152,121,.12); }
.form-feedback { min-height:18px; margin:0 0 12px; color:var(--coral); font-size:11px; }
.form-feedback.success { color:var(--green); }
.field textarea { min-height:95px; resize:vertical; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.field.full-width { grid-column:1/-1; }
.checkbox-row { display:flex; flex-wrap:wrap; gap:8px; }
.check-chip { position:relative; }
.check-chip input { position:absolute; opacity:0; }
.check-chip label { display:block; padding:9px 11px; color:var(--muted); border:1px solid var(--line); border-radius:9px; font-size:11px; cursor:pointer; }
.check-chip input:checked + label { color:var(--cyan); border-color:rgba(132,228,229,.5); background:rgba(132,228,229,.1); }
.passport-shell { display:grid; grid-template-columns:260px 1fr; gap:18px; align-items:start; }
.passport-nav { position:sticky; top:98px; overflow:hidden; padding:20px; background:linear-gradient(145deg,#174b58 0%,#0a2938 52%,#061b29 100%); border-color:rgba(234,203,131,.34); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 28px 70px rgba(0,0,0,.3); }
.passport-nav::before { content:"✦\A CHANGE\A PASSPORT"; display:block; min-height:104px; margin:-4px -4px 19px; padding:16px 15px; white-space:pre; color:#f3d893; border:1px solid rgba(234,203,131,.36); border-radius:11px; background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.12),transparent 28%),linear-gradient(145deg,rgba(31,105,111,.7),rgba(5,27,42,.82)); box-shadow:inset 0 0 22px rgba(0,0,0,.2); font:600 18px/.95 "Space Grotesk",sans-serif; letter-spacing:.09em; text-shadow:0 2px 10px rgba(0,0,0,.32); }
.passport-nav::after { content:"INDEPENDENT ACTION NETWORK · 2026"; position:absolute; left:35px; top:112px; color:rgba(237,231,190,.58); font:500 7px "DM Mono",monospace; letter-spacing:.12em; }
.passport-nav .avatar { width:54px;height:54px;border-radius:50%; display:grid;place-items:center; background:linear-gradient(135deg,var(--cyan),#193b4e); color:#06202b; font:700 19px "Space Grotesk",sans-serif; margin-bottom:12px; border:2px solid rgba(234,203,131,.58); box-shadow:0 0 0 4px rgba(234,203,131,.08); }
.passport-nav .avatar img { width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.passport-nav h3 { font:600 18px "Space Grotesk",sans-serif; margin:0; }
.passport-nav p { color:var(--muted); font-size:11px; margin:4px 0 20px; }
.passport-link { width:100%; text-align:left; border:0; border-top:1px solid var(--line); background:none; color:var(--muted); padding:13px 0; font-size:11px; }
.passport-link.active { color:var(--cyan); }
.profile-overview { position:relative; overflow:hidden; padding:62px 25px 25px; display:flex; justify-content:space-between; gap:20px; align-items:start; background:linear-gradient(145deg,rgba(248,244,218,.97),rgba(221,232,207,.95) 55%,rgba(192,219,204,.92)); border-color:rgba(234,203,131,.52); color:#183a3b; box-shadow:inset 0 0 0 5px rgba(14,73,81,.1),inset 0 0 0 6px rgba(234,203,131,.34),0 28px 80px rgba(0,0,0,.22); }
.profile-overview::before { content:"BE THE CHANGE  /  PERSONAL PASSPORT                                      DOCUMENT 01"; position:absolute; left:25px; right:25px; top:22px; padding-bottom:10px; border-bottom:1px solid rgba(26,84,83,.22); color:#28696a; font:600 9px "DM Mono",monospace; letter-spacing:.09em; }
.profile-overview::after { content:"ACTIVE · PRIVATE RECORD"; position:absolute; right:25px; top:91px; padding:7px 10px; border:2px solid rgba(190,82,78,.66); border-radius:4px; color:rgba(173,68,71,.82); font:700 9px "DM Mono",monospace; letter-spacing:.08em; transform:rotate(-8deg); opacity:.78; }
.profile-overview > div:first-child { position:relative; z-index:1; }
.profile-overview .eyebrow { color:#28696a; }
.profile-overview .section-copy { color:#4d6965; }
.profile-overview .completion { position:relative; z-index:1; padding:13px; border:1px solid rgba(41,104,102,.2); border-radius:7px; background:rgba(255,255,255,.24); }
.profile-overview .completion strong { color:#1d8586; }
.modal:has(#passport-name) { background:linear-gradient(145deg,#f8f4da,#dbe8d2 62%,#c7dfd5); color:#183a3b; border-color:rgba(234,203,131,.7); box-shadow:inset 0 0 0 5px rgba(14,73,81,.08),inset 0 0 0 6px rgba(234,203,131,.34),0 30px 100px rgba(0,0,0,.5); }
.modal:has(#passport-name)::before { content:"BE THE CHANGE  ·  PASSPORT CONTROL"; display:block; margin:-4px 0 20px; padding-bottom:12px; border-bottom:1px solid rgba(26,84,83,.22); color:#28696a; font:600 9px "DM Mono",monospace; letter-spacing:.1em; }
.modal:has(#passport-name) .modal-head h2,.modal:has(#passport-name) .field label { color:#183a3b; }
.modal:has(#passport-name) .micro-note { color:#54716a; }
.modal:has(#passport-name) { width:min(1040px,100%); }
.passport-editor-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:22px; align-items:start; }
.passport-editor-fields { min-width:0; }
.passport-live-card { position:sticky; top:0; padding:18px; border:1px solid rgba(26,84,83,.28); border-radius:9px; background:linear-gradient(145deg,#fbf8e9,#e5eddc 62%,#cde1d7); color:#183a3b; box-shadow:inset 0 0 0 4px rgba(234,203,131,.25),0 14px 35px rgba(18,62,57,.12); }
.passport-live-top,.passport-live-footer { display:flex; justify-content:space-between; gap:10px; color:#28696a; font:600 8px "DM Mono",monospace; letter-spacing:.09em; }
.passport-live-avatar { width:88px; height:88px; margin:20px auto 12px; padding:4px; border:1px solid rgba(40,105,106,.38); border-radius:50%; background:rgba(255,255,255,.42); }
.passport-live-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.passport-live-name { text-align:center; font:600 24px/1.05 "Space Grotesk",sans-serif; overflow-wrap:anywhere; }
.passport-live-handle { margin-top:6px; color:#54716a; text-align:center; font:500 10px "DM Mono",monospace; }
.passport-live-rule { margin:17px 0 13px; border-top:1px solid rgba(26,84,83,.22); }
.passport-live-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; }
.passport-live-grid small,.passport-live-section > small { display:block; color:#5a7771; font:600 8px "DM Mono",monospace; letter-spacing:.08em; }
.passport-live-grid strong { display:block; margin-top:4px; color:#183a3b; font:600 11px "Space Grotesk",sans-serif; overflow-wrap:anywhere; }
.passport-live-section { margin-top:16px; }
.passport-live-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.passport-live-tags span { padding:4px 6px; border:1px solid rgba(40,105,106,.25); border-radius:3px; color:#28696a; background:rgba(255,255,255,.3); font-size:9px; }
.passport-live-tags em { color:#6c8780; font-size:10px; font-style:normal; }
.passport-live-footer { margin-top:22px; padding-top:10px; border-top:1px solid rgba(26,84,83,.22); font-size:7px; }
.passport-avatar-picker { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.passport-avatar-picker img { width:46px; height:46px; border-radius:50%; object-fit:cover; border:1px solid rgba(40,105,106,.35); }
.passport-avatar-picker input { display:none; }
.member-search-results { display:grid; gap:5px; max-height:155px; overflow:auto; }
.member-search-note { color:#54716a; font-size:10px; }
.member-search-result { display:flex; align-items:center; gap:9px; width:100%; padding:8px; border:1px solid rgba(40,105,106,.18); border-radius:7px; background:rgba(255,255,255,.25); color:#183a3b; text-align:left; }
.member-search-result:hover { border-color:rgba(40,105,106,.55); background:rgba(255,255,255,.46); }
.member-search-result img { width:30px; height:30px; flex:none; border-radius:50%; object-fit:cover; }
.member-search-result strong,.member-search-result small { display:block; }
.member-search-result strong { font-size:11px; }
.member-search-result small { margin-top:2px; color:#54716a; font:500 9px "DM Mono",monospace; }
.completion { min-width:170px; }
.completion strong { display:block; font:600 29px "Space Grotesk",sans-serif; margin-bottom:10px; color:var(--cyan); }
.recommend-card { display:flex; gap:14px; align-items:center; padding:15px; }
.recommend-orb { width:42px; height:42px; flex:0 0 auto; border-radius:12px; border:1px solid var(--line-strong); display:grid;place-items:center; color:var(--gold); }
.recommend-card h4 { font:600 14px "Space Grotesk",sans-serif; margin:0 0 3px; }
.recommend-card p { color:var(--muted); font-size:11px; margin:0; }
.country-hero,.country-detail-hero { background-image:linear-gradient(105deg,rgba(5,20,28,.97) 0%,rgba(6,26,35,.86) 46%,rgba(5,20,28,.55) 100%),var(--country-hero-image,none); background-size:cover; background-position:center; }
.country-hero { padding:34px; position:relative; overflow:hidden; }
.country-hero::after { content:attr(data-country-mark); position:absolute; right:4%; top:3%; color:rgba(132,228,229,.05); font:700 190px "Space Grotesk",sans-serif; letter-spacing:-.13em; }
.country-hero > * { position:relative; z-index:1; }
.country-card-top { display:flex; align-items:center; gap:12px; }
.country-flag { font-size:28px; filter:saturate(.8); }
.country-hero h1 { font:600 clamp(42px,6vw,86px)/.9 "Space Grotesk",sans-serif; letter-spacing:-.08em; margin:13px 0; }
.country-hero h2 { font:600 clamp(30px,4vw,48px)/.96 "Space Grotesk",sans-serif; letter-spacing:-.06em; margin:13px 0; }
.country-stats { display:flex; flex-wrap:wrap; gap:24px; margin-top:28px; }
.country-stat strong { display:block; font:600 24px "Space Grotesk",sans-serif; } .country-stat span { color:var(--muted); font-size:10px; }
.country-card-stats { display:flex; flex-wrap:wrap; gap:14px 20px; margin-top:19px; color:var(--muted); font:500 10px "DM Mono",monospace; }
.country-card-stats span { display:grid; gap:3px; }
.country-card-stats strong { color:var(--ink-strong); font:600 16px "Space Grotesk",sans-serif; }
.country-network-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:23px; }
.network-chip { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:11px; background:rgba(5,20,28,.4); color:var(--muted); text-align:left; transition:background .2s,border-color .2s,transform .2s; }
.network-chip:hover { background:rgba(132,228,229,.1); border-color:var(--line-strong); transform:translateY(-2px); }
.network-chip > span { grid-row:1 / span 2; font-size:20px; }.network-chip strong{font-size:11px;color:var(--ink-strong)}.network-chip small{font:500 9px "DM Mono",monospace;color:var(--dim)}
.country-detail-hero { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; padding:34px; position:relative; overflow:hidden; }
.country-detail-hero::after { content:""; position:absolute; width:420px; height:420px; right:-90px; top:-150px; border:1px solid rgba(132,228,229,.13); border-radius:50%; box-shadow:0 0 80px rgba(73,190,199,.1); }
.country-detail-hero > * { position:relative; z-index:1; }
.country-detail-hero h1 { font:600 clamp(43px,6vw,84px)/.9 "Space Grotesk",sans-serif; letter-spacing:-.08em; margin:13px 0; color:var(--ink-strong); }
.country-hero-source { display:block; margin-top:18px; color:rgba(213,235,234,.58); font:500 9px/1.4 "DM Mono",monospace; letter-spacing:.03em; }
.country-detail-hero .country-hero-source { margin-top:16px; }
.country-hero-admin-tools { position:absolute !important; top:18px; right:20px; z-index:4 !important; display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; max-width:min(420px,calc(100% - 40px)); padding:7px; border:1px solid rgba(132,228,229,.24); border-radius:11px; background:rgba(4,16,25,.72); backdrop-filter:blur(12px); }
.country-hero-admin-tools .btn { min-height:31px; padding:6px 10px; font-size:10px; }
.country-hero-admin-tools .btn svg { width:14px; height:14px; }
.country-hero-admin-tools .admin-tool-label { color:var(--gold); font:600 8px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.country-hero-admin-tools small { flex-basis:100%; color:var(--dim); font:500 8px/1.35 "DM Mono",monospace; text-align:right; }
.country-hero-admin-tools .is-generating { opacity:.72; cursor:wait; }
.country-flag-large { width:90px; height:90px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:24px; background:radial-gradient(circle,rgba(132,228,229,.16),rgba(5,21,30,.5)); font-size:52px; box-shadow:0 0 35px rgba(132,228,229,.1); }
.country-detail-stats .metric-value { color:var(--ink-strong); }
.budget-bar { display:flex; height:13px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.07); margin:15px 0; }
.budget-bar span:nth-child(1){background:var(--cyan);width:36%}.budget-bar span:nth-child(2){background:var(--gold);width:27%}.budget-bar span:nth-child(3){background:var(--coral);width:17%}.budget-bar span:nth-child(4){background:var(--violet);width:20%}
.budget-legend { display:flex; flex-wrap:wrap; gap:12px; font-size:10px; color:var(--muted); }
.legend-dot { display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:var(--cyan); }.legend-dot.gold{background:var(--gold)}.legend-dot.coral{background:var(--coral)}.legend-dot.violet{background:var(--violet)}
.admin-shell { display:grid; grid-template-columns:220px 1fr; gap:18px; align-items:start; }
.admin-nav { padding:17px; position:sticky; top:98px; }
.admin-nav button { width:100%; padding:10px; margin:2px 0; text-align:left; border:0; background:transparent; border-radius:8px; color:var(--muted); font-size:11px; }
.admin-nav button.active, .admin-nav button:hover { color:var(--ink); background:rgba(132,228,229,.1); }
.admin-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
.admin-kpi { padding:18px; } .admin-kpi strong { display:block;font:600 27px "Space Grotesk",sans-serif; margin:12px 0 3px; }.admin-kpi span{color:var(--muted);font-size:11px}
.data-table { width:100%; border-collapse:collapse; font-size:11px; }
.data-table th { color:var(--dim); font:500 9px "DM Mono",monospace; text-align:left; text-transform:uppercase; letter-spacing:.08em; padding:12px 10px; border-bottom:1px solid var(--line); }
.data-table td { padding:13px 10px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:middle; }.data-table td:first-child{color:var(--ink);font-weight:700}
.status-dot { display:inline-flex; align-items:center; gap:6px; font:500 10px "DM Mono",monospace; color:var(--muted); }.status-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}.status-dot.verified{color:var(--green)}.status-dot.verified::before{background:var(--green)}.status-dot.draft::before{background:var(--violet)}.status-dot.pending::before{background:var(--coral)}
.modal-backdrop { position:fixed; inset:0; z-index:80; background:rgba(1,8,13,.76); display:grid; place-items:center; padding:18px; backdrop-filter:blur(8px); }
.modal { width:min(700px,100%); max-height:calc(100vh - 36px); overflow:auto; padding:25px; background:var(--modal-bg); border:1px solid var(--line-strong); border-radius:20px; box-shadow:0 30px 100px rgba(0,0,0,.5); }
.modal-head { display:flex; justify-content:space-between; align-items:start; gap:15px; margin-bottom:20px; }.modal-head h2{font:600 27px "Space Grotesk",sans-serif;margin:0}.close-btn{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:50%;width:34px;height:34px}
.more-modal { width:min(980px,100%); padding:clamp(22px,4vw,42px); background:var(--modal-panel); }
.more-modal .modal-head { margin-bottom:22px; }
.more-modal .modal-head h2 { margin-top:6px; font-size:clamp(28px,4vw,42px); letter-spacing:-.055em; }
.more-modal .modal-head .section-copy { max-width:560px; margin-top:8px; }
.more-signin,.more-card { position:relative; display:flex; align-items:center; gap:14px; width:100%; min-width:0; overflow:hidden; color:var(--ink); border:1px solid rgba(255,255,255,.16); border-radius:18px; text-align:left; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 28px rgba(0,0,0,.12); transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,filter .22s ease; }
.more-signin { min-height:86px; padding:17px 20px; margin-bottom:13px; }
.more-card { min-height:132px; padding:20px; }
.more-signin::after,.more-card::after { content:""; position:absolute; width:130px; height:130px; right:-45px; bottom:-66px; border-radius:50%; background:rgba(255,255,255,.16); filter:blur(1px); pointer-events:none; }
.more-signin:hover,.more-card:hover,.more-signin:focus-visible,.more-card:focus-visible { transform:translateY(-3px); border-color:rgba(255,255,255,.52); box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 17px 34px rgba(0,0,0,.24); filter:saturate(1.15); }
.more-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.more-card-icon { flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:12px; background:rgba(0,0,0,.16); color:#fff; }
.more-card-icon svg { width:19px; height:19px; }
.more-signin-copy,.more-card-copy { min-width:0; display:block; flex:1; }
.more-signin-copy strong,.more-card-copy strong,.more-signin-copy small,.more-card-copy small { display:block; }
.more-signin-copy strong { font:600 22px/1.05 "Space Grotesk",sans-serif; }
.more-card-copy strong { font:600 18px/1.1 "Space Grotesk",sans-serif; }
.more-signin-copy small,.more-card-copy small { margin-top:7px; color:rgba(255,255,255,.72); font-size:11px; line-height:1.4; }
.more-card-arrow { flex:0 0 auto; color:rgba(255,255,255,.82); }
.more-card-arrow svg { width:17px; height:17px; }
.more-gradient-cyan { background:linear-gradient(135deg,#147d82,#123849 72%); }
.more-gradient-violet { background:linear-gradient(135deg,#5d4d9d,#222443 72%); }
.more-gradient-blue { background:linear-gradient(135deg,#276eaa,#173449 72%); }
.more-gradient-coral { background:linear-gradient(135deg,#a94f48,#40273a 72%); }
.more-gradient-admin { background:linear-gradient(135deg,#987129,#4d3420 72%); }
.more-gradient-gold { background:linear-gradient(135deg,#a67b2e,#493323 72%); }
.more-gradient-green { background:linear-gradient(135deg,#397c68,#173b3b 72%); }
.more-gradient-teal { background:linear-gradient(135deg,#237b79,#12363f 72%); }
.more-gradient-indigo { background:linear-gradient(135deg,#5365ad,#242844 72%); }
.more-gradient-rose { background:linear-gradient(135deg,#9a4769,#41273f 72%); }
.more-gradient-slate { background:linear-gradient(135deg,#4c6875,#1b303c 72%); }
.more-gradient-amber { background:linear-gradient(135deg,#a65f32,#482b2b 72%); }
@media (max-width:640px) { .more-modal { padding:20px 14px; }.more-modal .modal-head { gap:10px; }.more-modal .modal-head h2 { font-size:29px; }.more-feature-grid { grid-template-columns:1fr; gap:9px; }.more-card { min-height:82px; padding:14px; border-radius:14px; }.more-signin { min-height:78px; padding:14px; border-radius:14px; }.more-card-copy strong { font-size:16px; }.more-card-icon { width:34px; height:34px; border-radius:10px; }.more-signin-copy small,.more-card-copy small { font-size:10px; } }
.toast-region { position:fixed; right:18px; bottom:18px; z-index:100; display:grid; gap:8px; }.toast{max-width:330px;padding:13px 15px;background:var(--toast-bg);border:1px solid var(--line-strong);border-radius:11px;box-shadow:var(--shadow);font-size:12px;color:var(--ink);animation:toast-in .25s ease}.toast small{display:block;color:var(--muted);margin-top:3px}@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.site-footer { position:relative; isolation:isolate; overflow:hidden; max-width:1500px; min-height:405px; margin:0 auto; padding:76px clamp(18px,4vw,64px) 28px; border-top:1px solid rgba(132,228,229,.22); background:linear-gradient(180deg,rgba(3,14,23,.96),rgba(2,9,16,.99) 74%); }
.reef-scene { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 50% -18%,rgba(97,218,221,.25),transparent 48%),linear-gradient(180deg,#0c465a 0%,#073345 31%,#041b2c 67%,#020b16 100%); }
.reef-scene::before { content:""; position:absolute; inset:0; opacity:.42; background:radial-gradient(ellipse at 18% 30%,rgba(68,192,214,.28),transparent 24%),radial-gradient(ellipse at 82% 45%,rgba(47,151,191,.2),transparent 27%),linear-gradient(90deg,transparent,rgba(170,244,234,.08) 49%,transparent 51%); mix-blend-mode:screen; }
.reef-scene::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,13,22,.05),rgba(2,11,19,.24) 40%,rgba(2,9,16,.76) 100%); }
.reef-surface-glow { position:absolute; left:50%; top:-105px; width:620px; height:240px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse,rgba(151,255,238,.5),rgba(75,201,221,.16) 35%,transparent 70%); filter:blur(12px); animation:reef-breathe 7s ease-in-out infinite; }
.reef-rays { position:absolute; inset:-12% -10% 24%; opacity:.35; transform:skewX(-16deg); background:repeating-linear-gradient(101deg,transparent 0 78px,rgba(191,255,247,.12) 82px 93px,transparent 101px 175px); mask-image:linear-gradient(180deg,black,transparent 80%); animation:reef-rays-drift 18s ease-in-out infinite alternate; }
.reef-floor { position:absolute; left:-4%; right:-4%; bottom:-56px; height:138px; border-radius:50% 50% 0 0; background:radial-gradient(ellipse at 50% 0%,rgba(16,91,89,.44),transparent 63%),linear-gradient(180deg,#092d32,#031017); box-shadow:0 -22px 50px rgba(14,189,177,.1); }
.reef-fish { position:absolute; z-index:2; width:74px; height:30px; opacity:.7; filter:drop-shadow(0 0 9px rgba(123,234,227,.35)); animation:reef-fish-swim 22s linear infinite; }
.reef-fish::before { content:""; position:absolute; left:11px; top:6px; width:49px; height:22px; border-radius:58% 48% 48% 58%; background:linear-gradient(145deg,#b5fff0,#4ac0ca 48%,#176c83); box-shadow:inset -7px -5px 0 rgba(4,45,63,.28); }
.reef-fish::after { content:""; position:absolute; left:0; top:5px; width:23px; height:24px; background:linear-gradient(145deg,#84e9de,#2c879d); clip-path:polygon(100% 0,35% 50%,100% 100%,0 82%,21% 50%,0 18%); }
.reef-fish span { position:absolute; z-index:1; left:49px; top:12px; width:4px; height:4px; border-radius:50%; background:#effff7; box-shadow:0 0 0 2px rgba(3,30,43,.35),0 0 6px #fff; }
.reef-fish-two { top:37%; left:61%; transform:scale(.66); opacity:.47; animation-duration:28s; animation-delay:-12s; }
.reef-fish-one { top:25%; left:-8%; }
.reef-fish-three { top:51%; left:34%; transform:scale(.42); opacity:.32; animation-duration:31s; animation-delay:-20s; }
.reef-coral { position:absolute; z-index:1; bottom:11px; width:110px; height:112px; transform-origin:bottom center; filter:drop-shadow(0 0 10px rgba(255,137,145,.18)); animation:reef-sway 8s ease-in-out infinite; }
.reef-coral i { position:absolute; bottom:0; width:11px; border-radius:99px 99px 4px 4px; transform-origin:bottom center; background:linear-gradient(90deg,#7d3a68,#ff827e 48%,#ffc17f); box-shadow:0 0 8px rgba(255,141,130,.28); }
.reef-coral i:nth-child(1){left:9%;height:58%;transform:rotate(-26deg)}.reef-coral i:nth-child(2){left:26%;height:86%;transform:rotate(-13deg)}.reef-coral i:nth-child(3){left:46%;height:100%;transform:rotate(1deg)}.reef-coral i:nth-child(4){left:63%;height:78%;transform:rotate(14deg)}.reef-coral i:nth-child(5){left:80%;height:55%;transform:rotate(25deg)}
.reef-coral i::before,.reef-coral i::after { content:""; position:absolute; bottom:58%; width:8px; height:28px; border-radius:99px; background:inherit; }
.reef-coral i::before { left:-7px; transform:rotate(-42deg); }.reef-coral i::after { right:-7px; transform:rotate(42deg); }
.reef-coral-one { left:2%; transform:scale(.82); animation-delay:-3s; }.reef-coral-two { right:7%; transform:scale(.65) rotate(3deg); filter:hue-rotate(45deg) drop-shadow(0 0 10px rgba(128,215,255,.2)); animation-delay:-6s; }.reef-coral-three { left:43%; bottom:-14px; transform:scale(.52); filter:hue-rotate(130deg) drop-shadow(0 0 10px rgba(111,237,206,.18)); animation-delay:-1s; }
.reef-particles i { position:absolute; z-index:2; width:4px; height:4px; border:1px solid rgba(191,255,247,.65); border-radius:50%; opacity:.55; animation:reef-rise 10s ease-in-out infinite; }
.reef-particles i:nth-child(1){left:17%;bottom:16%;animation-delay:-2s}.reef-particles i:nth-child(2){left:27%;bottom:24%;width:3px;height:3px;animation-delay:-7s}.reef-particles i:nth-child(3){left:71%;bottom:13%;animation-delay:-5s}.reef-particles i:nth-child(4){left:79%;bottom:28%;width:6px;height:6px;animation-delay:-9s}.reef-particles i:nth-child(5){left:54%;bottom:18%;width:3px;height:3px;animation-delay:-4s}.reef-particles i:nth-child(6){left:91%;bottom:34%;animation-delay:-6s}.reef-particles i:nth-child(7){left:8%;bottom:31%;width:3px;height:3px;animation-delay:-1s}.reef-content,.footer-content { position:relative; z-index:4; }
.footer-content { text-shadow:0 1px 16px rgba(0,0,0,.32); }
@keyframes reef-fish-swim { 0%{transform:translate3d(-8vw,0,0) scale(1)} 45%{transform:translate3d(48vw,-18px,0) scale(1.02)} 100%{transform:translate3d(116vw,8px,0) scale(.94)} }
@keyframes reef-rise { 0%,100%{transform:translate3d(0,8px,0) scale(.7);opacity:0} 30%,70%{opacity:.7} 50%{transform:translate3d(12px,-70px,0) scale(1.1);opacity:.55} }
@keyframes reef-sway { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(3deg) translateY(-3px)} }
@keyframes reef-breathe { 0%,100%{opacity:.62;transform:translateX(-50%) scale(.92)} 50%{opacity:1;transform:translateX(-50%) scale(1.08)} }
@keyframes reef-rays-drift { from{transform:skewX(-16deg) translateX(-20px)} to{transform:skewX(-16deg) translateX(25px)} }
@media (prefers-reduced-motion: reduce) { .reef-scene * { animation:none !important; } .reef-fish { opacity:.35; } .reef-surface-glow { opacity:.72; } }
.legal-page { max-width:900px; margin:0 auto; }
.legal-page h1 { margin-bottom:18px; }
.legal-section { max-width:720px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
.legal-section h2 { font:600 21px "Space Grotesk",sans-serif; margin:0 0 8px; color:var(--ink-strong); }
.footer-main { display:grid; grid-template-columns:1.65fr repeat(3,.8fr); gap:34px; }
.footer-brand p { max-width:380px; color:var(--muted); font-size:12px; margin:23px 0; }
.footer-brand .wordmark { display:inline-flex; }
.footer-brand .brand-logo { width:150px; height:150px; }
.footer-brand .footer-brand-logo { filter:invert(1); }
.footer-column { display:grid; align-content:start; gap:9px; }
.footer-column .eyebrow { margin-bottom:7px; }
.footer-column button { width:max-content; border:0; padding:0; background:transparent; color:var(--muted); font-size:11px; text-align:left; }
.footer-column button:hover { color:var(--cyan); }
.footer-disclaimer { display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:var(--dim); font-size:10px; max-width:500px; }
.footer-disclaimer .tag { flex:0 0 auto; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:45px; padding-top:17px; border-top:1px solid var(--line); color:var(--dim); font:500 9px "DM Mono",monospace; }
.footer-powered { color:var(--muted); }
.footer-powered strong { color:var(--cyan); font-weight:700; }
.footer-status { display:inline-flex; align-items:center; gap:7px; color:var(--green); }
.footer-status i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); }
.back-link { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; margin-bottom:22px; }.back-link:hover{color:var(--cyan)}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.offline-banner { position:sticky; top:76px; z-index:25; padding:8px 18px; text-align:center; color:#ffe9bd; background:rgba(92,67,29,.96); border-bottom:1px solid rgba(234,203,131,.28); font:500 10px "DM Mono",monospace; }
.hero-title-frame { min-height: 202px; position:relative; }
.hero-title-frame .display { min-height: 158px; margin-bottom: 0; transition: opacity .26s ease, transform .26s ease; }
.hero-title-frame .display.title-leaving { opacity:0; transform:translateY(8px); }
.hero-title-frame .display.title-entering { animation:title-rise .26s ease both; }
@keyframes title-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.title-controls { display:flex; align-items:center; gap:10px; min-height:34px; }
.title-control { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--surface-card-2); color:var(--muted); font-size:14px; }
.title-control:hover { color:var(--cyan); border-color:var(--line-strong); }
.title-pause { font-size:11px; margin-left:2px; }
.title-progress { display:flex; gap:5px; align-items:center; }
.title-progress button { width:24px; height:4px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.15); }
.title-progress button.active { background:var(--step-color,var(--cyan)); box-shadow:0 0 10px color-mix(in srgb,var(--step-color,var(--cyan)) 62%,transparent); }
.hero-simulation-panel { min-width:0; padding:10px 0 0 8px; }
.hero-orbit > * { min-width:0; }
.hero-orbit { display:grid; grid-template-columns:minmax(0,.88fr) minmax(320px,1fr); gap:32px; align-items:start; }
.simulation-topline { position:absolute; top:8px; left:4px; right:4px; display:flex; justify-content:space-between; gap:12px; align-items:center; z-index:3; }
.simulation-status { display:inline-flex; gap:7px; align-items:center; color:var(--muted); font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }
.simulation-status i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.earth-stage { position:relative; width:min(100%,540px); max-width:100%; margin:42px auto 0; aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; touch-action:pan-y pinch-zoom; user-select:none; cursor:grab; }
.earth-stage:active { cursor:grabbing; }
.earth-frame { position:absolute; inset:5%; transform-style:preserve-3d; transition:transform .5s ease; }
.earth-core { position:absolute; inset:4%; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 31% 25%,rgba(127,226,224,.23),transparent 10%),radial-gradient(circle at 66% 65%,rgba(19,109,139,.32),transparent 36%),linear-gradient(130deg,#0f4a59 0%,#0a2d3a 52%,#04131f 100%); box-shadow:inset -34px -28px 70px rgba(0,0,0,.58), inset 13px 9px 38px rgba(178,246,237,.13), 0 0 0 1px rgba(132,228,229,.4), 0 0 55px rgba(55,189,197,.22); transform:rotateY(-11deg); }
.earth-core:not(.webgl-ready) { background:radial-gradient(circle at 35% 25%,rgba(127,226,224,.18),transparent 12%),linear-gradient(130deg,rgba(15,74,89,.82),rgba(4,19,31,.95)),url("assets/earth_atmos_2048.jpg") center/cover; }
.earth-core:not(.webgl-ready) .land { display:none; }
.earth-core:not(.webgl-ready) .earth-grid { opacity:.14; }
.earth-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; z-index:0; transition:opacity .55s ease; }
.earth-fallback-layers { position:absolute; inset:0; z-index:1; pointer-events:none; transition:opacity .55s ease; }
.earth-core.webgl-ready .earth-canvas { opacity:1; }
.earth-core.webgl-ready .earth-fallback-layers { opacity:0; }
.earth-core.webgl-ready .hero-arcs { opacity:0; }
.earth-core::before { content:""; position:absolute; inset:-3%; border-radius:50%; background:radial-gradient(ellipse at 25% 30%,rgba(255,255,255,.08),transparent 20%),linear-gradient(105deg,transparent 40%,rgba(3,11,18,.56) 67%,rgba(2,8,13,.78) 100%); mix-blend-mode:screen; pointer-events:none; }
.earth-grid { position:absolute; inset:-18%; border:1px solid rgba(160,240,232,.23); border-radius:50%; transform:rotate(28deg); background:repeating-linear-gradient(14deg,transparent 0 38px,rgba(154,235,228,.11) 39px 40px,transparent 41px 75px),repeating-linear-gradient(82deg,transparent 0 56px,rgba(154,235,228,.09) 57px 58px,transparent 59px 112px); animation:earth-grid-drift 32s linear infinite; opacity:.7; }
.earth-night { position:absolute; inset:-15%; border-radius:50%; background:linear-gradient(108deg,transparent 38%,rgba(0,6,13,.06) 44%,rgba(0,5,12,.54) 62%,rgba(0,3,8,.82) 78%); transform:rotate(-19deg); pointer-events:none; }
.earth-clouds { position:absolute; inset:-5%; border-radius:50%; background:repeating-radial-gradient(ellipse at 20% 38%,rgba(213,255,248,.08) 0 7px,transparent 8px 25px),repeating-linear-gradient(9deg,transparent 0 71px,rgba(224,255,252,.055) 74px 80px,transparent 82px 128px); mix-blend-mode:screen; opacity:.42; animation:cloud-drift 42s linear infinite; pointer-events:none; }
.land { position:absolute; background:linear-gradient(135deg,rgba(115,205,166,.48),rgba(43,128,133,.14)); filter:drop-shadow(0 0 6px rgba(95,208,184,.15)); opacity:.9; }
.land-one { width:31%; height:33%; left:20%; top:22%; clip-path:polygon(15% 2%,49% 7%,66% 25%,87% 30%,83% 48%,61% 54%,58% 75%,39% 94%,22% 83%,26% 62%,7% 49%,15% 29%); transform:rotate(-12deg); }
.land-two { width:21%; height:36%; left:45%; top:37%; clip-path:polygon(37% 0,62% 11%,78% 28%,65% 46%,86% 65%,62% 80%,55% 100%,30% 87%,35% 65%,10% 50%,23% 27%); transform:rotate(8deg); }
.land-three { width:23%; height:19%; left:62%; top:20%; clip-path:polygon(3% 22%,31% 0,73% 12%,98% 43%,76% 69%,49% 58%,27% 82%,5% 63%); transform:rotate(7deg); }
.land-four { width:20%; height:18%; left:68%; top:63%; clip-path:polygon(12% 8%,55% 0,89% 25%,76% 66%,48% 91%,9% 71%,23% 42%); transform:rotate(-14deg); opacity:.54; }
.atmosphere { position:absolute; inset:-4%; border:1px solid rgba(132,228,229,.34); border-radius:50%; box-shadow:0 0 25px rgba(86,219,222,.2),inset 0 0 20px rgba(117,239,228,.12); pointer-events:none; }
.hero-arcs { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:2; }
.arc-line { fill:none; stroke:rgba(132,228,229,.18); stroke-width:.32; stroke-dasharray:1.5 2.7; opacity:0; pointer-events:stroke; transition:opacity .45s ease,stroke .25s ease; }
.arc-line.arc-visible { opacity:1; animation:arc-travel 7s linear infinite; }
.arc-line:focus-visible { stroke:var(--gold); stroke-width:.7; outline:none; }
@keyframes arc-travel { to { stroke-dashoffset:-20; } }
.sim-node { position:absolute; left:var(--node-x); top:var(--node-y); z-index:4; width:25px; height:25px; padding:0; border:0; background:transparent; transform:translate(-50%,-50%); cursor:pointer; transition:opacity .35s ease,transform .2s ease; }
.sim-node:hover,.sim-node:focus-visible,.sim-node.selected { transform:translate(-50%,-50%) scale(1.22); }
.sim-node.mode-hidden { opacity:.12; pointer-events:none; }
.node-core { position:absolute; inset:7px; display:block; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan),0 0 0 4px rgba(132,228,229,.12); border:1px solid #d5fffa; }
.sim-node.activation .node-core { background:var(--cyan); box-shadow:0 0 12px var(--cyan),0 0 0 4px rgba(132,228,229,.12); }
.sim-node.forming .node-core { background:var(--blue); box-shadow:0 0 12px var(--blue),0 0 0 4px rgba(134,187,255,.12); }
.sim-node.learning .node-core { background:var(--violet); box-shadow:0 0 12px var(--violet),0 0 0 4px rgba(185,165,255,.12); }
.sim-node.sports .node-core { background:var(--gold); box-shadow:0 0 12px var(--gold),0 0 0 4px rgba(234,203,131,.12); }
.sim-node.partner .node-core { background:var(--green); box-shadow:0 0 12px var(--green),0 0 0 4px rgba(143,213,164,.12); }
.sim-node.impact .node-core { background:var(--coral); box-shadow:0 0 12px var(--coral),0 0 0 4px rgba(255,152,121,.12); }
.sim-node.peace .node-core { background:#f3f5e9; box-shadow:0 0 14px #eef6dc,0 0 0 4px rgba(238,246,220,.12); }
.sim-node.verified::before { content:""; position:absolute; inset:1px; border:1px solid rgba(234,203,131,.64); border-radius:50%; animation:verified-ring 3.5s ease-in-out infinite; }
.node-pulse { position:absolute; inset:0; border-radius:50%; border:1px solid currentColor; opacity:.48; animation:node-pulse 2.8s ease-in-out infinite; }
.node-label { position:absolute; left:18px; top:50%; width:max-content; max-width:140px; padding:5px 7px; border-radius:6px; color:var(--ink); background:rgba(4,16,25,.86); border:1px solid var(--line); font-size:9px; white-space:nowrap; opacity:0; pointer-events:none; transform:translateY(-50%) translateX(-4px); transition:opacity .2s ease,transform .2s ease; }
.sim-node:hover .node-label,.sim-node:focus-visible .node-label,.sim-node.selected .node-label { opacity:1; transform:translateY(-50%) translateX(0); }
@keyframes node-pulse { 0%,100%{transform:scale(.65);opacity:.1} 50%{transform:scale(1.45);opacity:.6} }
@keyframes verified-ring { 0%,100%{transform:scale(.86);opacity:.55} 50%{transform:scale(1.2);opacity:1} }
@keyframes earth-grid-drift { from{transform:rotate(28deg) translateX(-10px)}to{transform:rotate(388deg) translateX(10px)} }
@keyframes cloud-drift { from{transform:translateX(-2%)}to{transform:translateX(4%)} }
.earth-controls { position:absolute; left:5%; right:5%; bottom:0; display:flex; gap:7px; justify-content:center; flex-wrap:wrap; z-index:5; }
.earth-controls .btn { min-height:34px; padding:7px 10px; font-size:10px; background:rgba(4,16,25,.72); backdrop-filter:blur(8px); }
.hero-simulation-panel { display:flex; flex-direction:column; justify-content:flex-start; align-self:start; min-width:0; overflow-wrap:anywhere; }
.mode-switcher { display:flex; gap:4px; flex-wrap:wrap; padding:4px; border:1px solid var(--line); border-radius:11px; background:rgba(3,15,23,.35); }
.mode-switcher button { flex:1; min-width:65px; min-height:34px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:10px; font-weight:800; }
.mode-switcher button:hover,.mode-switcher button.active { color:var(--ink); background:rgba(132,228,229,.12); }
.simulation-copy { min-height:164px; padding:24px 3px 18px; }
.simulation-copy h2 { font:600 clamp(19px,2.2vw,29px)/1.08 "Space Grotesk",sans-serif; letter-spacing:-.035em; margin:10px 0; max-width:390px; overflow-wrap:anywhere; }
.simulation-copy p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; max-width:390px; }
.hero-info-card { min-height:180px; padding:17px; border:1px solid var(--line-strong); border-radius:14px; background:linear-gradient(145deg,rgba(26,65,74,.66),rgba(5,20,29,.7)); }
.hero-info-card.card-pop { animation:card-pop .25s ease both; }
@keyframes card-pop { from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none} }
.country-slideshow { position:relative; }
.country-slide-window { position:relative; min-height:335px; }
.country-project-slide { position:absolute; inset:0; visibility:hidden; opacity:0; pointer-events:none; transform:translateX(14px); transition:opacity .32s ease,transform .32s ease,visibility .32s ease; }
.country-project-slide.active { position:relative; visibility:visible; opacity:1; pointer-events:auto; transform:none; }
.country-project-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:15px; color:var(--dim); font:500 8px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
.country-project-index { color:var(--cyan); }
.country-project-country { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.country-project-slide h3 { font-size:18px; margin:12px 0 6px; }
.country-project-slide p { min-height:76px; }
.country-project-connectors { display:flex; flex-wrap:wrap; gap:5px; margin-top:13px; }
.country-project-connectors span { display:inline-flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid rgba(132,228,229,.16); border-radius:99px; color:var(--muted); font:500 8px/1.2 "DM Mono",monospace; }
.country-project-connectors i { width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 7px rgba(132,228,229,.6); }
.country-slide-controls { display:flex; align-items:center; gap:7px; min-width:0; padding-top:12px; border-top:1px solid var(--line); }
.country-slide-arrow { width:25px; height:25px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--line); border-radius:50%; background:var(--surface-card-2); color:var(--muted); font-size:12px; }
.country-slide-arrow:hover,.country-slide-arrow:focus-visible { color:var(--cyan); border-color:var(--line-strong); }
.country-slide-dots { display:flex; align-items:center; gap:4px; min-width:0; flex:1; }
.country-slide-dot { width:15px; height:4px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.16); }
.country-slide-dot.active { background:var(--cyan); box-shadow:0 0 9px rgba(132,228,229,.45); }
.country-slide-hint { min-width:0; max-width:145px; overflow:hidden; color:var(--dim); font:500 7px "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }
.hero-card-kicker { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.hero-info-card h3 { font:600 19px "Space Grotesk",sans-serif; margin:14px 0 5px; }
.hero-info-card p { color:var(--muted); font-size:11px; margin:0; line-height:1.65; }
.hero-card-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:15px; }
.hero-card-empty { color:var(--muted); font-size:11px; padding:12px 0; }
.hero-card-empty p { margin-top:9px; }
.hero-legend { display:flex; flex-wrap:wrap; gap:12px; padding:14px 2px; color:var(--muted); font-size:10px; }
.legend-node { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }.legend-node.peace{background:#f3f5e9;box-shadow:0 0 8px #eef6dc}.legend-node.learning{background:var(--violet);box-shadow:0 0 8px var(--violet)}.legend-node.sports{background:var(--gold);box-shadow:0 0 8px var(--gold)}.legend-node.impact{background:var(--coral);box-shadow:0 0 8px var(--coral)}
.accessible-node-list { border-top:1px solid var(--line); padding-top:12px; color:var(--muted); font-size:11px; }
.accessible-node-list summary { cursor:pointer; color:var(--cyan); }
.node-list { display:grid; gap:4px; margin-top:10px; }
.node-list-item { display:flex; align-items:center; gap:9px; width:100%; padding:9px 5px; border:0; border-radius:7px; background:transparent; color:var(--muted); text-align:left; }
.node-list-item:hover,.node-list-item.selected { color:var(--ink); background:rgba(132,228,229,.08); }
.node-list-item span:nth-child(2) { flex:1; }.node-list-item strong{display:block;font-size:11px}.node-list-item small{display:block;color:var(--dim);font-size:9px;margin-top:2px}.node-list-item svg{width:14px;height:14px;color:var(--cyan)}
.list-dot { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--cyan); }.list-dot.activation{background:var(--cyan)}.list-dot.forming{background:var(--blue)}.list-dot.peace{background:#f3f5e9}.list-dot.learning{background:var(--violet)}.list-dot.sports{background:var(--gold)}.list-dot.partner{background:var(--green)}.list-dot.impact{background:var(--coral)}
.hero { --hero-scroll:0; }
.hero .hero-copy { transform:translateX(calc(var(--hero-scroll) * -3vw)); transition:transform .15s ease-out; }
.hero .hero-orbit { transform:translateX(calc(var(--hero-scroll) * 5vw)); transform-origin:center top; transition:transform .15s ease-out; }
.hero-orbit[data-rendering="static-fallback"]::after { content:"STATIC FALLBACK · LIGHTWEIGHT RENDER"; position:absolute; right:4px; top:28px; color:var(--dim); font:500 8px "DM Mono",monospace; letter-spacing:.08em; }
.hero-orbit[data-reduced="true"] .earth-grid,.hero-orbit[data-reduced="true"] .earth-clouds,.hero-orbit[data-reduced="true"] .arc-line,.hero-orbit[data-reduced="true"] .node-pulse,.hero-orbit[data-reduced="true"] .sim-node.verified::before { animation:none; }
.hero-orbit[data-reduced="true"] .earth-clouds { opacity:.18; }
.user-reduced-motion .hero-title-frame .display { transition:none; animation:none; }
.hide { display:none !important; }
@media (min-width: 1200px) {
  .hero-orbit { grid-template-columns:minmax(0,.88fr) minmax(320px,1fr); gap:32px; }
}
@media (max-width: 1100px) {
  .primary-nav { gap:12px; }.primary-nav button{font-size:11px}
  .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .studio { grid-template-columns:200px 1fr; }.ai-assistant{grid-column:1/-1}.ai-assistant .assistant-tip{display:inline-block;margin:0 8px 0 0}
}
@media (max-width: 980px) {
  .primary-nav { gap:9px; }
  .primary-nav button { font-size:10px; }
  .desktop-cta { display:none; }
}
@media (max-width: 820px) {
  .site-header { height:66px; padding:0 16px; }.primary-nav{display:none}.header-actions{margin-left:auto}.header-actions .profile-dot{display:none}
  .desktop-cta { display:none; }
  .offline-banner { top:66px; }
  .mobile-nav { position:fixed; display:flex; left:10px; right:10px; bottom:max(10px,env(safe-area-inset-bottom)); z-index:40; padding:7px; justify-content:space-around; background:rgba(7,24,32,.94); backdrop-filter:blur(16px); border:1px solid var(--line-strong); border-radius:17px; box-shadow:0 10px 35px rgba(0,0,0,.35); }
  .mobile-nav button { border:0; background:none; color:var(--muted); min-width:54px; min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:9px; }.mobile-nav button.active{color:var(--cyan)}.mobile-nav svg{width:17px;height:17px}
  .page { padding-top:36px; }
  .hero { min-height:auto; grid-template-columns:1fr; gap:16px; }.hero-orbit{grid-template-columns:1fr;min-height:380px; order:-1}.earth-stage{max-width:500px}.orbit-caption{right:2%;bottom:4%;}.display{font-size:clamp(39px,11vw,64px)}
  .campaign-grid, .detail-hero, .detail-layout, .education-hero, .football-feature { grid-template-columns:1fr; }.campaign-side{gap:16px}.map-mini{min-height:170px}
  .activation-grid,.pathways { grid-template-columns:repeat(2,minmax(0,1fr)); }.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .country-network-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .country-detail-hero { grid-template-columns:1fr; padding:24px; }
  .passport-shell,.admin-shell { grid-template-columns:1fr; }.passport-nav,.admin-nav{position:static}.passport-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.passport-nav .avatar{margin:0}.passport-nav p{flex:1;margin:0}.passport-link{width:auto;border:1px solid var(--line);padding:9px;border-radius:8px}.admin-nav{display:flex;gap:5px;overflow:auto}.admin-nav button{white-space:nowrap;width:auto}
  .footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .page { padding-left:14px; padding-right:14px; padding-bottom:90px; }.section{margin-top:60px}.section-head{align-items:start;flex-direction:column;gap:12px}.section-title{font-size:31px}
  .grid-2,.grid-3,.grid-4,.record-grid,.form-grid,.activation-grid,.pathways,.metrics { grid-template-columns:1fr; }.hero-actions .btn{flex:1;}.hero-actions{display:grid;grid-template-columns:1fr 1fr}
  .hero-actions .btn:first-child{grid-column:1/-1}.hero-orbit{min-height:325px}.earth-stage{max-width:440px}.orbit-caption{width:153px;padding:10px;right:-3%;bottom:0}.orbit-caption strong{font-size:13px}
  .count-cell{min-width:64px;flex:1}.count-cell strong{font-size:21px}.campaign-actions .btn{flex:1}
  .list-card{display:block}.list-card-side{text-align:left;margin-top:15px}.list-card-side .btn{margin-top:9px}
  .football-copy{padding:25px 20px}.football-art{min-height:260px}.soccer-stage{min-height:260px}.footer-note{font-size:10px}
  .toolbar{align-items:stretch}.search-box{min-width:100%}.filter-select,.view-switch{flex:1}.detail-hero h1{font-size:43px}.detail-layout .panel{padding:19px}.stage{min-width:92px}
  .profile-overview{display:block}.completion{margin-top:22px}.studio{grid-template-columns:1fr;min-height:0}.studio-panel{padding:15px}.studio .outline-panel{order:2}.studio .editor-panel{order:1}.studio .ai-assistant{order:3}.country-hero{padding:23px}.country-hero::after{font-size:120px}.country-stats{gap:16px}.country-network-strip{grid-template-columns:1fr}.country-detail-hero{padding:22px}.country-flag-large{width:70px;height:70px;font-size:38px}.data-table-wrap{overflow-x:auto;margin:0 -5px}.data-table{min-width:600px}
  .site-footer { padding:44px 14px 90px; }
  .passport-editor-layout { grid-template-columns:1fr; }
  .passport-live-card { position:relative; order:-1; }
  .footer-main { grid-template-columns:1fr; gap:27px; }
  .footer-bottom { align-items:flex-start; flex-direction:column; margin-top:32px; }
}
/* Keep the hero from forcing its two dense desktop columns into the same
   space on tablets. The visual and its sidebar get their own row before the
   compact mobile layout takes over. */
@media (max-width:1120px) and (min-width:821px) {
  .hero { grid-template-columns:1fr; min-height:0; }
  .hero-copy { max-width:820px; }
  .hero-orbit { width:100%; min-height:0; }
}
@media (max-width:900px) and (min-width:821px) {
  .hero-orbit { grid-template-columns:1fr; }
  .hero-simulation-panel { padding-top:18px; }
  .earth-stage { width:min(100%,540px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Globe gateway and full-screen GIS additions. */
.hero-orbit { min-height: 620px; }
.earth-stage { margin:42px auto 0; max-width:540px; }
.earth-frame { position:relative; inset:auto; width:100%; aspect-ratio:1; flex:none; }
.earth-core { inset: 5%; }
.earth-toolbar { position:relative; display:flex; justify-content:center; flex-wrap:wrap; gap:7px; width:100%; margin:14px auto 0; z-index:7; }
.earth-toolbar .btn { background:rgba(4,16,25,.86); backdrop-filter:blur(10px); }
.toolbar-short { display:none; }
.earth-more { position:relative; }
.earth-more summary { list-style:none; }
.earth-more summary::-webkit-details-marker { display:none; }
.earth-more-menu { position:absolute; bottom:calc(100% + 8px); right:0; display:flex; gap:6px; padding:7px; background:#08202c; border:1px solid var(--line-strong); border-radius:12px; box-shadow:var(--shadow); white-space:nowrap; }
.earth-more-menu .btn { background:rgba(255,255,255,.06); }
.sim-node.selected .node-label { box-shadow:0 0 0 1px rgba(234,203,131,.55),0 8px 22px rgba(0,0,0,.25); }
.sim-node.far-side { pointer-events:none; }
.hero-simulation-panel { padding-top:30px; }

.map-app { min-height:100vh; color:#eef7f7; background:#07151d; display:flex; flex-direction:column; }
body.map-transition .map-app { animation:map-arrive .72s cubic-bezier(.2,.8,.2,1) both; }
@keyframes map-arrive { from { opacity:0; transform:translate3d(0,6px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
.map-topbar { min-height:72px; display:flex; align-items:center; gap:18px; padding:12px 22px; background:rgba(5,16,24,.96); border-bottom:1px solid var(--line); position:relative; z-index:20; }
.map-back,.map-top-btn,.map-view-switch button,.map-style-switcher button,.map-zoom button,.map-layer-strip button,.icon-btn { border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--muted); border-radius:8px; min-height:34px; padding:8px 11px; font-size:11px; font-weight:800; }
.map-back { border:0; padding-left:0; background:transparent; color:var(--cyan); white-space:nowrap; }
.map-brand { display:flex; align-items:center; gap:10px; min-width:210px; }
.map-brand-mark { width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--cyan);border-radius:50%;color:var(--gold);font-size:22px; }
.map-brand strong { display:block; font:600 17px/1 "Space Grotesk",sans-serif; color:#fff; }
.map-brand small { display:block; margin-top:4px; color:var(--dim); font:500 9px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.map-global-search { display:flex; align-items:center; gap:8px; flex:1; max-width:500px; min-width:170px; padding:0 12px; border:1px solid var(--line-strong); border-radius:9px; background:rgba(255,255,255,.05); color:var(--muted); }
.map-global-search svg { width:15px;height:15px; }.map-global-search input { width:100%; min-height:40px; color:var(--ink); border:0; outline:0; background:transparent; font-size:12px; }
.map-top-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }.map-top-actions select { min-height:36px; padding:0 9px; border:1px solid var(--line); border-radius:8px; background:#112b37; color:var(--ink); font-size:11px; }
.map-view-switch { display:flex; gap:2px; padding:3px; background:rgba(255,255,255,.05); border-radius:9px; }.map-view-switch button { border:0; min-height:29px; padding:6px 8px; }.map-view-switch button.active,.map-top-btn.primary { background:var(--cyan); color:#07212a; border-color:var(--cyan); }
.map-top-btn:hover,.map-back:hover,.map-view-switch button:hover { color:#fff; border-color:var(--line-strong); }
.map-theme-btn { display:inline-flex; align-items:center; justify-content:center; padding:8px; }
.map-theme-btn svg { width:16px; height:16px; }
.map-context-bar { display:flex; justify-content:space-between; align-items:end; gap:20px; padding:18px 22px; background:linear-gradient(90deg,rgba(13,38,50,.92),rgba(8,23,31,.94)); border-bottom:1px solid var(--line); }.map-context-bar h1 { margin:6px 0 0; font:600 clamp(22px,3vw,34px)/1 "Space Grotesk",sans-serif; letter-spacing:-.04em; }.map-context-bar h1 span { color:var(--cyan); opacity:.45; }
.map-context-stats { display:flex; align-items:center; gap:18px; color:var(--muted); font-size:11px; }.map-context-stats strong { color:#fff; font:600 20px "Space Grotesk",sans-serif; margin-right:4px; }
.map-feed-link { color:var(--gold); text-decoration:none; white-space:nowrap; }.map-feed-link:hover { color:#fff; }
.map-layout { flex:1; min-height:calc(100vh - 144px); display:grid; grid-template-columns:245px minmax(360px,1fr) 320px; grid-template-areas:"filters map details"; overflow:hidden; }.map-layout.map { grid-template-columns:245px minmax(0,1fr) 320px; }.map-layout.list { grid-template-columns:245px minmax(0,1fr) 320px; }.map-layout.list .map-main { display:none; }.map-layout.list .map-list-panel { grid-area:map; display:block; }.map-layout.map .map-list-panel { display:none; }.map-layout.filters-collapsed { grid-template-columns:54px minmax(0,1fr) 320px; }
.map-layout.split { grid-template-columns:245px minmax(300px,1fr) minmax(270px,320px) 320px; grid-template-areas:"filters map list details"; }.map-layout.split .map-list-panel { grid-area:list; display:block; border-right:1px solid var(--line); }
.map-filter-panel,.map-list-panel,.map-detail-panel { min-height:0; background:rgba(9,29,39,.98); border-right:1px solid var(--line); }.map-filter-panel { grid-area:filters; overflow:auto; padding:18px 14px; }.map-filter-panel.collapsed .map-filter-content,.map-filter-panel.collapsed h2,.map-filter-panel.collapsed .eyebrow { display:none; }.map-filter-panel.collapsed { padding:18px 10px; }.map-panel-heading,.map-list-heading { display:flex; align-items:start; justify-content:space-between; gap:10px; margin-bottom:17px; }.map-panel-heading h2,.map-list-heading h2,.map-detail-panel h2 { margin:5px 0 0; font:600 20px "Space Grotesk",sans-serif; color:#fff; letter-spacing:-.03em; }.icon-btn { padding:6px 9px; }
.map-field { display:block; margin:0 0 13px; }.map-field span { display:block; margin-bottom:6px; color:var(--muted); font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.map-field select { width:100%; min-height:37px; padding:0 9px; border:1px solid var(--line); border-radius:8px; background:#0c2530; color:var(--ink); font-size:11px; }.map-filter-divider { border-top:1px solid var(--line); margin:17px 0; }.map-filter-note,.map-detail-note { color:var(--dim); font-size:10px; line-height:1.55; margin-bottom:15px; }
.map-main { grid-area:map; min-width:0; min-height:0; position:relative; background:#0b2b34; }.map-canvas { position:absolute; inset:0; overflow:hidden; background:#09222b; }.map-surface { position:absolute; inset:-3%; transform:scale(1); transition:transform .35s ease; background:#0d3039; overflow:hidden; }
.basemap-satellite .map-surface { background:radial-gradient(ellipse at 51% 46%,rgba(37,122,112,.75),transparent 27%),linear-gradient(135deg,#173e42,#0b2833 46%,#122f39); }.basemap-satellite .map-landmass,.basemap-satellite .liberia-outline { background:linear-gradient(145deg,#568b62,#244e4c 55%,#183a3d); }.basemap-satellite-streets .map-surface { background:linear-gradient(125deg,#193b43,#29494a 45%,#16343a); }.basemap-dark .map-surface { background:radial-gradient(ellipse at 50% 45%,#153842,transparent 36%),#07151d; }.basemap-light .map-surface { background:linear-gradient(145deg,#9bbdb2,#d1d4c5 48%,#a7c4b7); }.basemap-terrain .map-surface { background:linear-gradient(150deg,#6c8268,#9a9a70 50%,#4c6b61); }.basemap-humanitarian .map-surface { background:linear-gradient(145deg,#8ba69a,#c6c1a3 55%,#76988c); }
.map-graticule { position:absolute; inset:0; opacity:.33; background:linear-gradient(90deg,transparent 24.8%,rgba(153,220,217,.2) 25%,transparent 25.2% 49.8%,rgba(153,220,217,.2) 50%,transparent 50.2% 74.8%,rgba(153,220,217,.2) 75%,transparent 75.2%),linear-gradient(0deg,transparent 24.8%,rgba(153,220,217,.18) 25%,transparent 25.2% 49.8%,rgba(153,220,217,.18) 50%,transparent 50.2% 74.8%,rgba(153,220,217,.18) 75%,transparent 75.2%); }
.map-landmass { position:absolute; width:65%; height:90%; left:19%; top:4%; opacity:.35; clip-path:polygon(35% 3%,63% 7%,75% 20%,88% 28%,82% 42%,73% 47%,80% 61%,68% 77%,57% 90%,42% 85%,32% 70%,23% 66%,27% 50%,15% 38%,22% 22%); background:#2f635d; filter:drop-shadow(0 12px 15px rgba(0,0,0,.25)); }.liberia-outline { position:absolute; width:63%; height:80%; left:20%; top:8%; clip-path:polygon(10% 18%,32% 8%,58% 12%,85% 28%,92% 54%,76% 78%,49% 91%,26% 84%,8% 65%,2% 39%); opacity:.76; border:1px solid rgba(220,255,230,.5); background:linear-gradient(155deg,#376c5b,#1f4b4d); box-shadow:0 0 70px rgba(92,226,183,.14); }.county-boundaries { position:absolute; inset:12% 20%; opacity:.55; background:repeating-linear-gradient(28deg,transparent 0 34px,rgba(218,244,215,.2) 35px 36px,transparent 37px 70px),repeating-linear-gradient(106deg,transparent 0 46px,rgba(218,244,215,.14) 47px 48px,transparent 49px 80px); clip-path:polygon(10% 18%,32% 8%,58% 12%,85% 28%,92% 54%,76% 78%,49% 91%,26% 84%,8% 65%,2% 39%); }
.county-label,.regional-label,.map-place-label { position:absolute; border:0; background:transparent; color:rgba(241,255,245,.72); font:500 9px "DM Mono",monospace; text-shadow:0 1px 7px #08202a; }.county-label { left:var(--map-left); top:var(--map-top); transform:translate(-50%,-50%); padding:5px; cursor:pointer; }.county-label:hover { color:#fff; background:rgba(4,19,24,.5); border-radius:5px; }.regional-label { left:50%; top:44%; transform:translate(-50%,-50%); font-size:18px; letter-spacing:.16em; opacity:.5; }.map-place-label { left:39%; top:48%; color:rgba(255,255,255,.9); }
.map-marker { position:absolute; left:var(--map-left); top:var(--map-top); transform:translate(-50%,-50%); display:flex; align-items:center; gap:4px; padding:0; border:0; background:transparent; color:#fff; z-index:5; }.map-marker span,.record-symbol { width:25px; height:25px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; background:#0a222b; box-shadow:0 0 0 5px rgba(12,35,43,.35),0 4px 14px rgba(0,0,0,.4); font-size:12px; }.map-marker b { display:none; position:absolute; left:31px; top:-5px; padding:5px 7px; border-radius:5px; background:rgba(3,14,21,.9); border:1px solid var(--line-strong); color:#fff; font:600 10px Manrope,sans-serif; white-space:nowrap; }.map-marker:hover b,.map-marker:focus-visible b,.map-marker.selected b { display:block; }.map-marker.selected span { transform:scale(1.2); box-shadow:0 0 0 6px rgba(234,203,131,.2),0 0 24px currentColor; }
.map-map-title { position:absolute; left:22px; bottom:24px; padding:12px 14px; border-left:2px solid var(--cyan); background:rgba(5,19,25,.72); backdrop-filter:blur(8px); }.map-map-title strong,.map-map-title small { display:block; }.map-map-title strong { margin-top:5px; color:#fff; font:600 18px "Space Grotesk",sans-serif; }.map-map-title small { margin-top:4px; color:var(--muted); font-size:10px; }
.map-style-switcher { position:absolute; top:16px; right:16px; display:flex; gap:3px; flex-wrap:wrap; justify-content:end; max-width:320px; z-index:10; }.map-style-switcher button { min-height:29px; padding:6px 8px; text-transform:capitalize; background:rgba(5,18,24,.75); backdrop-filter:blur(6px); }.map-style-switcher button.active { background:var(--cyan); color:#06242c; }.map-zoom { position:absolute; top:85px; right:16px; display:flex; flex-direction:column; align-items:center; gap:2px; z-index:10; }.map-zoom button { width:30px; padding:5px; background:rgba(5,18,24,.78); color:#fff; font-size:16px; }.map-zoom span { color:var(--muted); font:500 8px "DM Mono",monospace; }.map-layer-strip { position:absolute; left:16px; top:16px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; max-width:330px; z-index:10; }.map-layer-strip span { color:#fff; font:600 10px "DM Mono",monospace; text-transform:uppercase; margin-right:3px; }.map-layer-strip button { min-height:27px; padding:5px 7px; font-size:9px; background:rgba(5,18,24,.72); }.map-layer-strip button.active { color:var(--cyan); border-color:rgba(132,228,229,.5); }
.map-legend { position:absolute; right:16px; bottom:18px; max-width:220px; padding:11px; border:1px solid var(--line); border-radius:9px; background:rgba(5,18,24,.76); backdrop-filter:blur(7px); z-index:9; }.map-legend-title { color:#fff; font-weight:800; font-size:10px; margin-bottom:8px; }.map-legend-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.map-legend-grid span { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:9px; }.map-legend .record-symbol { width:15px;height:15px; font-size:8px; box-shadow:none; }.map-legend p { margin:9px 0 0; color:var(--dim); font-size:8px; }
.map-list-panel { grid-area:map; padding:18px 15px; overflow:auto; }.map-list-heading select { min-height:32px; border:1px solid var(--line); background:#0c2530; color:var(--ink); border-radius:7px; font-size:10px; }.map-list-scroll { display:grid; gap:5px; }.map-record-row { width:100%; display:flex; align-items:center; gap:10px; padding:11px; text-align:left; border:1px solid transparent; border-radius:10px; background:rgba(255,255,255,.025); color:var(--ink); }.map-record-row:hover,.map-record-row.selected { background:rgba(132,228,229,.09); border-color:rgba(132,228,229,.25); }.map-record-row .record-symbol { flex:none; }.map-record-row strong,.map-record-row small,.map-record-row em { display:block; }.map-record-row strong { font-size:12px; }.map-record-row small,.map-record-row em { margin-top:3px; color:var(--muted); font-size:10px; font-style:normal; }.map-record-row em { color:var(--dim); font:500 9px "DM Mono",monospace; }.map-record-row svg { margin-left:auto; width:14px; flex:none; color:var(--cyan); }.map-empty { padding:30px 10px; text-align:center; color:var(--muted); }.map-empty h3 { color:#fff; font-size:15px; }
.map-detail-panel { grid-area:details; overflow:auto; padding:22px 18px; position:relative; border-right:0; }.map-detail-panel.empty { display:flex; flex-direction:column; justify-content:center; }.detail-empty-icon { color:var(--cyan); font-size:40px; margin-bottom:22px; }.map-detail-panel h2 { font-size:25px; margin:12px 0; }.detail-close { position:absolute; top:14px; right:14px; border:0; color:var(--muted); background:transparent; font-size:24px; }.record-detail-kicker { display:flex; align-items:center; gap:8px; }.record-detail-kicker .record-symbol { width:28px;height:28px; }.map-detail-rows { display:grid; gap:1px; margin:19px 0; border-top:1px solid var(--line); }.map-detail-rows div { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }.map-detail-rows span { color:var(--muted); font-size:10px; }.map-detail-rows strong { max-width:58%; text-align:right; color:#fff; font-size:10px; }.detail-description { color:#b8c9cd; font-size:12px; line-height:1.65; }.map-provenance { margin-top:20px; padding:13px; border-radius:9px; background:rgba(255,255,255,.035); }.map-provenance p { color:var(--muted); font-size:10px; line-height:1.5; }.map-provenance strong { color:#fff; }.map-detail-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:18px; }.map-mobile-filter { display:none; }
@media (max-width: 1050px) { .map-top-actions .map-top-btn { display:none; }.map-top-actions .map-theme-btn { display:inline-flex; }.map-layout,.map-layout.split { grid-template-columns:210px minmax(0,1fr) 280px; }.map-brand { min-width:170px; }.map-context-stats span { display:none; } }
@media (max-width: 760px) { .toolbar-wide { display:none; }.toolbar-short { display:inline; }.earth-more { display:none; }.hero-orbit { min-height:480px; }.hero-simulation-panel { padding-top:15px; }.map-topbar { flex-wrap:wrap; gap:9px; padding:10px 12px; }.map-back span { display:none; }.map-brand { order:-1; min-width:0; flex:1; }.map-brand strong { font-size:15px; }.map-brand small { display:none; }.map-global-search { order:3; flex-basis:100%; max-width:none; }.map-top-actions { margin-left:0; }.map-top-actions select { max-width:120px; }.map-context-bar { padding:14px 12px; }.map-context-bar h1 { font-size:22px; }.map-context-stats { display:none; }.map-layout,.map-layout.split,.map-layout.map,.map-layout.list { display:block; min-height:calc(100vh - 132px); }.map-filter-panel { display:none; position:absolute; left:0; top:0; bottom:58px; width:min(86vw,310px); z-index:30; box-shadow:12px 0 30px rgba(0,0,0,.35); }.map-layout.filters-open .map-filter-panel { display:block; }.map-main { min-height:calc(100vh - 190px); }.map-list-panel { display:none; min-height:calc(100vh - 190px); }.map-layout.list .map-list-panel { display:block; }.map-detail-panel { position:fixed; left:8px; right:8px; bottom:66px; max-height:62vh; z-index:25; border:1px solid var(--line-strong); border-radius:16px; box-shadow:0 10px 35px rgba(0,0,0,.4); transform:translateY(calc(100% + 30px)); transition:transform .25s ease; }.map-detail-panel:not(.empty) { transform:translateY(0); }.map-legend { display:none; }.map-style-switcher { max-width:190px; }.map-style-switcher button { font-size:8px; }.map-layer-strip { bottom:12px; top:auto; left:12px; max-width:calc(100% - 24px); }.map-layer-strip span { display:none; }.map-mobile-filter { position:fixed; left:9px; right:9px; bottom:9px; z-index:35; display:flex; gap:5px; padding:6px; border:1px solid var(--line-strong); border-radius:13px; background:rgba(5,18,24,.94); }.map-mobile-filter button { flex:1; min-height:38px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:10px; }.map-mobile-filter button:hover { color:#fff; background:rgba(255,255,255,.08); } }

/* Installable app polish: safe-area-aware surfaces and deliberately compact
   mobile controls. The browser experience remains fully usable without PWA
   support or JavaScript registration. */
html { min-height:100%; background:#041019; }
body { min-height:100%; overscroll-behavior-x:none; }
.app-offline-settings { margin-top:28px; }
.app-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:18px; }
.app-status-grid div { padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-card); }
.app-status-grid span,.app-status-grid strong { display:block; }
.app-status-grid span { color:var(--muted); font-size:10px; }
.app-status-grid strong { margin-top:5px; color:#fff; font-size:12px; }
.app-offline-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.pwa-notice button:focus-visible,.pwa-notice a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
@media (max-width:760px) {
  .site-header { height:58px; padding-top:env(safe-area-inset-top); box-sizing:content-box; }
  .wordmark-copy strong { font-size:12px; }.wordmark-copy small { font-size:7px; }
  .page { padding-bottom:calc(94px + env(safe-area-inset-bottom)); }
  .mobile-nav { bottom:8px; padding-bottom:calc(7px + env(safe-area-inset-bottom)); }
  .hero { padding-top:8px; }.hero .hero-copy { transform:none; }.hero .hero-orbit { transform:none; }
  .hero-actions .btn { min-height:46px; }.earth-toolbar { margin-bottom:calc(8px + env(safe-area-inset-bottom)); }
  .country-detail-hero { background-position:58% center; }
  .app-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-offline-actions .btn { flex:1 1 calc(50% - 8px); }
}
@media (max-width:380px) { .mobile-nav button { min-width:46px; font-size:8px; }.mobile-nav { left:6px; right:6px; }.earth-toolbar .btn { padding-left:9px; padding-right:9px; } }
@media (max-width:760px) {
  .map-detail-panel { bottom:calc(66px + env(safe-area-inset-bottom)); }
  .map-mobile-filter { bottom:max(9px,env(safe-area-inset-bottom)); }
  .map-main,.map-list-panel { padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
}

/* Map surface polish: a layered cartographic treatment keeps the current
   self-contained GIS usable without requiring a third-party tile provider. */
.map-surface { background-image:radial-gradient(ellipse at 48% 42%,rgba(117,180,128,.22),transparent 26%),linear-gradient(135deg,rgba(80,129,109,.13),transparent 38%),repeating-linear-gradient(20deg,transparent 0 38px,rgba(208,231,201,.055) 39px 40px,transparent 41px 74px),repeating-linear-gradient(112deg,transparent 0 48px,rgba(87,186,181,.055) 49px 50px,transparent 51px 90px); }
.map-surface::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background:radial-gradient(circle at 32% 24%,rgba(247,205,119,.14),transparent 2%),radial-gradient(circle at 73% 63%,rgba(91,212,181,.13),transparent 4%),radial-gradient(circle at 55% 79%,rgba(84,176,208,.13),transparent 3%); mix-blend-mode:screen; }
.map-surface::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(3,15,21,.28),transparent 18% 82%,rgba(3,15,21,.3)),linear-gradient(0deg,rgba(3,15,21,.35),transparent 18% 82%,rgba(3,15,21,.25)); }
.map-canvas { box-shadow:inset 0 0 0 1px rgba(139,232,221,.08),inset 0 0 90px rgba(0,0,0,.24); }
.map-landmass { opacity:.52; background:linear-gradient(140deg,#6a9a67,#2a6355 56%,#173f42); filter:drop-shadow(0 18px 20px rgba(0,0,0,.3)) saturate(1.1); }
.liberia-outline { opacity:.86; background:linear-gradient(145deg,rgba(83,157,115,.88),rgba(28,76,69,.9)); box-shadow:0 0 90px rgba(92,226,183,.2),inset 0 0 30px rgba(225,244,179,.08); }
.county-boundaries { opacity:.72; background:repeating-linear-gradient(28deg,transparent 0 28px,rgba(236,255,224,.3) 29px 30px,transparent 31px 62px),repeating-linear-gradient(106deg,transparent 0 38px,rgba(236,255,224,.22) 39px 40px,transparent 41px 76px); }
.map-city { position:absolute; left:var(--map-left); top:var(--map-top); z-index:4; transform:translate(-50%,-50%); display:flex; align-items:center; gap:4px; color:rgba(237,255,241,.78); font:500 8px "DM Mono",monospace; text-shadow:0 1px 6px #061a20; white-space:nowrap; pointer-events:none; }
.map-city i { width:5px; height:5px; border:1px solid #f2d28a; border-radius:50%; background:#09242d; box-shadow:0 0 0 3px rgba(234,203,131,.14); }
.map-city:first-of-type { color:#fff; font-weight:700; }
.map-orientation { position:absolute; inset:0; z-index:8; pointer-events:none; }
.map-live-chip { position:absolute; left:20px; bottom:22px; padding:6px 8px; border:1px solid rgba(120,238,229,.25); border-radius:5px; background:rgba(4,17,23,.64); color:#b9d5d3; font:500 8px "DM Mono",monospace; letter-spacing:.08em; }
.map-live-chip i { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#75e0a0; box-shadow:0 0 8px #75e0a0; }
.map-compass { position:absolute; right:23px; bottom:87px; width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(228,244,224,.35); border-radius:50%; color:#fff; background:rgba(4,17,23,.6); font:700 9px "DM Mono",monospace; }
.map-compass b { position:absolute; top:-15px; }.map-compass i { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:12px solid #eacb83; }
.map-scale { position:absolute; right:20px; bottom:23px; display:flex; align-items:end; gap:4px; color:#d9e8e2; font:500 8px "DM Mono",monospace; }.map-scale i { display:block; width:35px; height:6px; border-top:1px solid #d9e8e2; border-left:1px solid #d9e8e2; border-right:1px solid #d9e8e2; }
.map-data-ribbon { position:absolute; left:20px; top:62px; z-index:10; padding:7px 9px; color:rgba(232,250,243,.75); background:rgba(4,17,23,.55); border-left:2px solid var(--cyan); font:500 8px "DM Mono",monospace; letter-spacing:.07em; }.map-data-ribbon span { display:block; margin-top:3px; color:var(--dim); letter-spacing:0; }
.map-context-flag { display:inline-block; margin-right:8px; font-size:.8em; vertical-align:.08em; }
.map-row-flag { display:inline-block; width:18px; margin-right:5px; font-size:14px; vertical-align:-1px; }
.map-detail-flag { display:inline-block; margin-right:7px; font-size:.8em; }
.country-tag { gap:6px; }.country-tag-flag { font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size:13px; line-height:1; }
@media (max-width:760px) { .map-data-ribbon { left:12px; top:58px; font-size:7px; }.map-live-chip { left:12px; bottom:18px; }.map-scale { right:14px; bottom:18px; }.map-compass { right:15px; bottom:76px; }.map-city { font-size:7px; }.map-city:nth-of-type(n+6) { display:none; } }

/* The map gateway sits below the simulation; the Earth rail stays focused on motion controls. */
.hero-map-cta [data-action="map-open"] { color:#08222b; }

.admin-page { padding:54px clamp(18px,4vw,64px) 110px; max-width:1500px; margin:0 auto; }.admin-topline { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:28px; }.admin-topline h1 { margin:12px 0 6px; font:600 clamp(35px,5vw,62px)/.95 "Space Grotesk",sans-serif; letter-spacing:-.06em; }.admin-topline p,.admin-permission small { color:var(--muted); font-size:13px; }.admin-permission { text-align:right; }.admin-permission small { display:block; margin-top:9px; font-size:10px; }.admin-main { min-width:0; }.admin-workspace { padding:clamp(18px,2.4vw,32px); }.admin-workspace-head { display:flex; justify-content:space-between; gap:20px; align-items:start; margin-bottom:22px; }.admin-workspace-head h2 { margin:8px 0 6px; color:#fff; font:600 30px "Space Grotesk",sans-serif; }.admin-workspace-head p { max-width:660px; color:var(--muted); font-size:13px; }.admin-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:end; }.admin-location-filters { display:flex; gap:8px; margin-bottom:15px; }.admin-location-filters input,.admin-location-filters select { min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:#0b2530; color:var(--ink); font-size:11px; }.admin-location-filters input { flex:1; }.admin-location-table { min-width:980px; }.admin-location-table .table-note { display:block; margin-top:4px; color:var(--dim); font-size:9px; }.admin-footer-note { margin-top:16px; color:var(--dim); font-size:10px; line-height:1.6; }.admin-review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.admin-review-card { display:flex; gap:12px; padding:17px; border:1px solid var(--line); border-radius:12px; background:var(--surface-card); }.admin-review-card .record-symbol { flex:none; }.admin-review-card h3 { margin:0 0 5px; color:#fff; font:600 17px "Space Grotesk",sans-serif; }.admin-review-card p { color:var(--muted); font-size:11px; margin:0 0 12px; }.admin-review-card .card-link { border:0; padding:0; background:transparent; color:var(--cyan); font-size:10px; font-weight:800; }
.admin-sync-note { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 18px; padding:10px 12px; border:1px solid rgba(132,228,229,.2); border-radius:9px; background:rgba(132,228,229,.05); color:var(--muted); font:500 10px "DM Mono",monospace; }.admin-sync-note strong { color:var(--cyan); font-family:"Space Grotesk",sans-serif; font-size:11px; }.admin-sync-pulse { width:7px; height:7px; border-radius:50%; background:#75e0a0; box-shadow:0 0 10px #75e0a0; }.admin-entry-table { min-width:840px; }.admin-entry-table .table-note { display:block; max-width:310px; margin-top:4px; overflow:hidden; color:var(--dim); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.admin-entry-origin { color:var(--muted); font:500 9px "DM Mono",monospace; }.admin-entry-empty { padding:34px 18px; text-align:center; }.admin-entry-empty h3 { margin:7px 0; color:#fff; font:600 19px "Space Grotesk",sans-serif; }.admin-entry-empty p { max-width:520px; margin:0 auto 15px; color:var(--muted); font-size:11px; }.admin-public-records { margin-top:34px; }.admin-public-record { cursor:pointer; }.admin-record-label { display:flex; align-items:center; justify-content:space-between; gap:9px; color:var(--cyan); font:500 8px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.admin-record-label .status-dot { text-transform:none; letter-spacing:0; }.admin-public-record .table-note a { color:var(--cyan); }.admin-entry-modal .section-copy { max-width:650px; margin-bottom:20px; }.admin-entry-modal textarea { min-height:108px; }
@media (max-width:760px) { .admin-page { padding:34px 14px 90px; }.admin-topline,.admin-workspace-head { display:block; }.admin-permission { margin-top:18px; text-align:left; }.admin-actions { justify-content:start; margin-top:16px; }.admin-location-filters { display:grid; grid-template-columns:1fr 1fr; }.admin-location-filters input { grid-column:1/-1; }.admin-review-grid { grid-template-columns:1fr; }.country-hero-admin-tools { top:12px; right:12px; max-width:calc(100% - 24px); }.country-hero-admin-tools .admin-tool-label,.country-hero-admin-tools small { display:none; }.country-hero-admin-tools .btn span:last-child { display:none; }.country-hero-admin-tools .btn { width:32px; min-width:32px; padding:7px; }.hero-map-cta { margin-top:0; }.hero-map-cta .btn { min-width:0; width:100%; } }

/* SDG directory and landing-page goal grid. */
.sdg-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.sdg-card { min-height:76px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px; border:1px solid color-mix(in srgb,var(--sdg-color) 43%,var(--line)); border-radius:12px; background:linear-gradient(135deg,color-mix(in srgb,var(--sdg-color) 13%,transparent),rgba(8,26,35,.58)); color:var(--ink); text-align:left; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.sdg-card:hover { transform:translateY(-3px); background:linear-gradient(135deg,color-mix(in srgb,var(--sdg-color) 22%,transparent),rgba(8,26,35,.7)); border-color:var(--sdg-color); }
.sdg-card:focus-visible,.sdg-connection-row:focus-visible { outline:2px solid var(--sdg-color,var(--cyan)); outline-offset:3px; }
.sdg-card-number { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:var(--sdg-color); color:#fff; font:800 13px "Space Grotesk",sans-serif; box-shadow:0 0 20px color-mix(in srgb,var(--sdg-color) 28%,transparent); }
.sdg-card strong,.sdg-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.sdg-card strong { color:#fff; font:600 11px/1.2 "Space Grotesk",sans-serif; }.sdg-card small { margin-top:4px; color:var(--muted); font:500 8px "DM Mono",monospace; }.sdg-card > svg { width:13px; color:var(--sdg-color); }
.sdg-section-action { margin-top:16px; text-align:right; }
.sdg-page-hero { display:grid; grid-template-columns:1fr 180px; gap:24px; align-items:center; padding:clamp(25px,4vw,52px); border:1px solid var(--line-strong); border-radius:20px; background:radial-gradient(circle at 80% 30%,rgba(132,228,229,.13),transparent 28%),linear-gradient(135deg,rgba(17,57,67,.8),rgba(5,21,29,.85)); overflow:hidden; }
.sdg-page-hero h1 { max-width:720px; margin:13px 0 10px; color:#fff; font:600 clamp(39px,6vw,76px)/.94 "Space Grotesk",sans-serif; letter-spacing:-.07em; }.sdg-page-hero .lede { max-width:680px; }
.sdg-page-orbit { width:156px; height:156px; display:grid; place-content:center; justify-items:center; border:1px solid rgba(132,228,229,.55); border-radius:50%; background:radial-gradient(circle at 34% 28%,rgba(132,228,229,.32),rgba(6,26,36,.62) 55%,rgba(4,15,23,.9)); box-shadow:0 0 0 14px rgba(132,228,229,.04),0 0 65px rgba(132,228,229,.16); }.sdg-page-orbit span { color:var(--gold); font:600 58px/.8 "Space Grotesk",sans-serif; }.sdg-page-orbit small { margin-top:10px; color:var(--muted); font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; }
.sdg-directory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.sdg-directory-card,.sdg-interconnection { padding:18px; border:1px solid color-mix(in srgb,var(--sdg-color) 35%,var(--line)); border-radius:14px; background:linear-gradient(145deg,color-mix(in srgb,var(--sdg-color) 9%,transparent),rgba(7,23,31,.68)); }.sdg-directory-card { border-top:3px solid var(--sdg-color); }.sdg-directory-heading { display:flex; align-items:center; gap:10px; }.sdg-directory-heading .sdg-card-number { flex:none; }.sdg-directory-heading h3 { margin:5px 0 0; color:#fff; font:600 17px/1.08 "Space Grotesk",sans-serif; }.sdg-directory-card p { min-height:52px; margin:15px 0; color:var(--muted); font-size:11px; line-height:1.55; }.sdg-counts { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:12px; border-top:1px solid var(--line); color:var(--dim); font:500 9px "DM Mono",monospace; }.sdg-counts strong { display:block; margin-bottom:3px; color:var(--sdg-color); font:600 18px "Space Grotesk",sans-serif; }
.sdg-interconnection-list { display:grid; gap:12px; }.sdg-interconnection { border-left:3px solid var(--sdg-color); }.sdg-interconnection-head { display:flex; justify-content:space-between; align-items:center; gap:14px; }.sdg-connection-total { color:var(--sdg-color); font:600 10px "DM Mono",monospace; white-space:nowrap; }.sdg-connection-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:15px; }.sdg-connection-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; min-width:0; padding:9px; border:1px solid var(--line); border-radius:9px; background:var(--surface-card); color:var(--ink); text-align:left; }.sdg-connection-row:hover { border-color:color-mix(in srgb,var(--sdg-color) 60%,var(--line)); background:color-mix(in srgb,var(--sdg-color) 10%,transparent); }.sdg-connection-row > svg { width:13px; color:var(--sdg-color); }.sdg-connection-row strong,.sdg-connection-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.sdg-connection-row strong { color:#fff; font:600 11px "Space Grotesk",sans-serif; }.sdg-connection-row small { margin-top:3px; color:var(--muted); font:500 8px "DM Mono",monospace; }.sdg-connection-type { padding:4px 5px; border-radius:5px; color:var(--sdg-color); background:color-mix(in srgb,var(--sdg-color) 13%,transparent); font:500 8px "DM Mono",monospace; text-transform:uppercase; }.sdg-no-connections { grid-column:1/-1; padding:12px; color:var(--dim); font-size:11px; }

/* Route changes animate the newly rendered page while scroll restoration is
   handled in transitionRender(). */
body.route-transition .page { animation:btc-page-enter .42s cubic-bezier(.22,.8,.2,1) both; }
@keyframes btc-page-enter { from { opacity:0; transform:translate3d(0,8px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@media (max-width:760px) { .sdg-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.sdg-page-hero { grid-template-columns:1fr; }.sdg-page-orbit { width:118px; height:118px; justify-self:end; }.sdg-page-orbit span { font-size:44px; }.sdg-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.sdg-interconnection-head { align-items:start; }.sdg-connection-list { grid-template-columns:1fr; } }
@media (max-width:480px) { .sdg-directory-grid { grid-template-columns:1fr; }.sdg-card { min-height:68px; }.sdg-card strong { white-space:normal; }.sdg-page-hero { padding:22px; }.sdg-page-hero h1 { font-size:42px; } }
@media (prefers-reduced-motion: reduce) { body.route-transition .page { animation:none; } }

/* Map fullscreen is a focused surface: the map owns the viewport while the
   header and bottom control rail keep navigation available on demand. */
.map-app:fullscreen,
body.map-fullscreen-fallback .map-app { width:100vw; height:100dvh; min-height:100dvh; overflow:hidden; background:#07151d; }
.map-app:fullscreen .map-context-bar,
body.map-fullscreen-fallback .map-app .map-context-bar { display:none; }
.map-app:fullscreen .map-layout,
body.map-fullscreen-fallback .map-app .map-layout { min-height:0; height:calc(100dvh - 72px); }
.map-app:fullscreen .map-main,
body.map-fullscreen-fallback .map-app .map-main { min-height:0; }
.map-fullscreen-top svg { width:15px; height:15px; display:block; }

@media (max-width:760px) {
  .map-top-actions .map-fullscreen-top { display:none; }
  .map-layout:not(.details-open) .map-detail-panel:not(.empty) { transform:translateY(calc(100% + 30px)); }
  .map-layout.details-open .map-detail-panel:not(.empty) { transform:translateY(0); }
  .map-style-switcher { display:none; }
  .map-layer-strip { display:none; }
  .map-zoom { top:12px; right:12px; }
  .map-zoom button { width:32px; height:32px; }
  .map-mobile-filter { left:8px; right:8px; bottom:max(8px,env(safe-area-inset-bottom)); gap:3px; padding:5px; border-radius:12px; backdrop-filter:blur(12px); }
  .map-mobile-filter button { min-width:0; min-height:34px; display:grid; place-items:center; padding:0; }
  .map-mobile-filter button svg { width:17px; height:17px; }
  .map-main,.map-list-panel { padding-bottom:calc(52px + env(safe-area-inset-bottom)); }
  .map-app:fullscreen .map-topbar,
  body.map-fullscreen-fallback .map-app .map-topbar { min-height:52px; padding:8px 10px; }
  .map-app:fullscreen .map-layout,
  body.map-fullscreen-fallback .map-app .map-layout { height:calc(100dvh - 52px); }
  .map-app:fullscreen .map-main,
  body.map-fullscreen-fallback .map-app .map-main { min-height:calc(100dvh - 52px); }
.map-app:fullscreen .map-mobile-filter,
  body.map-fullscreen-fallback .map-app .map-mobile-filter { background:rgba(5,18,24,.82); }
}

/* Theatre-style film room. The player stays native so seek, volume, captions,
   and device fullscreen behavior remain responsive and familiar. */
.theatre-backdrop { padding:0; background:rgba(1,7,11,.94); backdrop-filter:blur(14px); }
.watch-theatre { --watch-ink:#f4fbfb; --watch-muted:#d3e4e6; --watch-dim:#b5cdd1; --watch-line:rgba(163,218,227,.3); position:relative; isolation:isolate; width:100%; height:100%; min-height:100dvh; display:flex; flex-direction:column; overflow:auto; padding:clamp(18px,3vw,42px) clamp(16px,5vw,74px) 22px; background:radial-gradient(circle at 76% 8%,rgba(132,228,229,.12),transparent 25%),radial-gradient(circle at 18% 75%,rgba(185,165,255,.09),transparent 24%),linear-gradient(145deg,#071a24,#031016 72%); color:var(--watch-ink); }
.watch-modal-background { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; opacity:.18; filter:saturate(.72) contrast(1.12); pointer-events:none; }
.watch-modal-background-scrim { position:absolute; z-index:1; inset:0; background:linear-gradient(135deg,rgba(2,13,19,.92),rgba(3,16,22,.78) 48%,rgba(2,11,17,.93)); pointer-events:none; }
.watch-header { position:relative; z-index:2; display:flex; align-items:start; justify-content:space-between; gap:20px; flex:none; }
.watch-header h2 { margin:7px 0 0; color:var(--watch-ink); font:600 clamp(30px,4vw,54px)/.95 "Space Grotesk",sans-serif; letter-spacing:-.06em; text-shadow:0 2px 18px rgba(0,0,0,.38); }
.watch-layout { position:relative; z-index:2; width:min(1260px,100%); display:grid; grid-template-columns:minmax(210px,280px) minmax(0,1fr); gap:clamp(20px,4vw,58px); align-items:center; flex:1; margin:clamp(18px,4vh,54px) auto; }
.watch-library { display:grid; gap:9px; align-self:center; }
.watch-choice { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; width:100%; min-width:0; padding:14px; border:1px solid var(--watch-line); border-radius:13px; background:rgba(2,16,24,.84); color:var(--watch-muted); text-align:left; box-shadow:0 10px 26px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06); transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.watch-choice:hover,.watch-choice:focus-visible,.watch-choice.active { transform:translateX(3px); border-color:rgba(132,228,229,.6); background:linear-gradient(135deg,rgba(132,228,229,.16),rgba(255,255,255,.04)); color:#fff; }
.watch-choice-index { color:#f0ca73; font:600 12px "DM Mono",monospace; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.watch-choice strong,.watch-choice small { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.watch-choice strong { color:var(--watch-ink); font:600 14px/1.2 "Space Grotesk",sans-serif; }
.watch-choice small { margin-top:4px; color:var(--watch-dim); font:500 8px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.watch-choice svg { width:14px; color:#84e4e5; filter:drop-shadow(0 1px 5px rgba(0,0,0,.35)); }
.watch-player-column { min-width:0; }
.watch-player-shell { position:relative; width:100%; overflow:hidden; border:1px solid rgba(132,228,229,.28); border-radius:18px; background:#000; box-shadow:0 0 0 8px rgba(132,228,229,.035),0 25px 80px rgba(0,0,0,.5); }
.watch-player-shell video { display:block; width:100%; max-height:70vh; aspect-ratio:16/9; object-fit:contain; background:#000; }
.watch-player-glow { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 70px rgba(4,24,33,.32); }
.watch-now-playing { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; }
.watch-now-playing h3 { margin:6px 0 0; color:var(--watch-ink); font:600 clamp(18px,2.2vw,27px) "Space Grotesk",sans-serif; text-shadow:0 2px 16px rgba(0,0,0,.34); }
.watch-now-playing p { margin:5px 0 0; color:var(--watch-muted); font-size:11px; line-height:1.5; }
.watch-now-playing .btn { flex:none; display:inline-flex; align-items:center; gap:6px; color:var(--watch-ink); border-color:rgba(163,218,227,.42); background:rgba(2,16,24,.76); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.watch-now-playing .btn:hover,.watch-now-playing .btn:focus-visible { color:#fff; border-color:rgba(132,228,229,.78); background:rgba(9,39,49,.92); }
.watch-now-playing .btn svg { width:14px; height:14px; }
.watch-footer { position:relative; z-index:2; width:min(1260px,100%); display:flex; justify-content:space-between; gap:16px; margin:0 auto; padding-top:15px; border-top:1px solid var(--watch-line); color:var(--watch-dim); font:500 9px "DM Mono",monospace; }
@media (max-width:760px) {
  .watch-theatre { padding:14px 12px max(16px,env(safe-area-inset-bottom)); }
  .watch-header h2 { font-size:31px; }
  .watch-layout { display:flex; flex-direction:column; align-items:stretch; gap:14px; margin:18px auto; }
  .watch-library { order:2; grid-template-columns:1fr 1fr; gap:7px; }
  .watch-choice { grid-template-columns:auto minmax(0,1fr); padding:10px; }
  .watch-choice svg { display:none; }
  .watch-choice strong { font-size:11px; }
  .watch-choice small { font-size:7px; }
  .watch-player-column { order:1; }
  .watch-player-shell { border-radius:12px; }
  .watch-player-shell video { max-height:58vh; }
  .watch-now-playing { align-items:start; }
  .watch-now-playing p { font-size:10px; }
  .watch-now-playing .btn { padding:8px; }
  .watch-now-playing .btn span { display:none; }
  .watch-footer { flex-direction:column; gap:5px; }
}
@media (prefers-reduced-motion:reduce) {
  .watch-choice { transition:none; }
}

/* Keep animated and data-heavy surfaces inside the viewport. Components that
   genuinely need wide content already opt into their own local scroller. */
html,body,#app,.app-shell { width:100%; max-width:100%; min-width:0; overflow-x:clip; }
img,video,canvas,iframe { max-width:100%; }
.page > *, .page .grid > *, .hero > *, .section-head > * { min-width:0; }
.site-header .wordmark { min-width:0; }
.site-header .wordmark-copy { min-width:0; overflow:hidden; }

/* Animated mission loop */
.change-process-section { position:relative; overflow:clip; }
.change-process-section .section-head { align-items:start; }
.change-process-loop { display:inline-flex; align-items:center; gap:6px; flex:none; margin-top:9px; padding:7px 9px; border:1px solid rgba(132,228,229,.22); border-radius:999px; color:var(--cyan); background:rgba(132,228,229,.06); font:500 8px "DM Mono",monospace; letter-spacing:.08em; }
.change-process-loop svg { width:13px; height:13px; animation:process-spin 6s linear infinite; }
.change-process-visual { position:relative; overflow:hidden; padding:20px 0 15px; border:1px solid var(--line-strong); border-radius:20px; background:radial-gradient(circle at 50% 0,rgba(132,228,229,.1),transparent 42%),linear-gradient(145deg,rgba(14,45,55,.86),rgba(5,20,28,.95)); }
.change-process-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px; padding:0 14px; }
.change-process-beam { position:absolute; z-index:0; left:7%; right:7%; top:55px; height:2px; overflow:hidden; background:linear-gradient(90deg,transparent,rgba(132,228,229,.32),rgba(234,203,131,.32),rgba(255,152,121,.32),transparent); }
.change-process-beam::after { content:""; position:absolute; inset:0; width:22%; background:linear-gradient(90deg,transparent,#fff,transparent); filter:blur(2px); animation:process-beam 4.6s linear infinite; }
.change-process-node { --process-color:var(--cyan); position:relative; min-width:0; min-height:210px; padding:13px 12px 14px; border:1px solid color-mix(in srgb,var(--process-color) 28%,var(--line)); border-radius:14px; background:linear-gradient(160deg,color-mix(in srgb,var(--process-color) 12%,transparent),rgba(4,18,27,.86) 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); animation:process-float 5.4s ease-in-out infinite; animation-delay:var(--process-delay); }
.change-process-node:hover,.change-process-node:focus-within { animation-play-state:paused; transform:translateY(-8px); border-color:color-mix(in srgb,var(--process-color) 72%,var(--line)); box-shadow:0 18px 30px rgba(0,0,0,.24),0 0 24px color-mix(in srgb,var(--process-color) 15%,transparent),inset 0 1px 0 rgba(255,255,255,.18); }
.change-process-node.tone-cyan { --process-color:var(--cyan); }.change-process-node.tone-blue { --process-color:var(--blue); }.change-process-node.tone-violet { --process-color:var(--violet); }.change-process-node.tone-gold { --process-color:var(--gold); }.change-process-node.tone-coral { --process-color:var(--coral); }.change-process-node.tone-green { --process-color:var(--green); }.change-process-node.tone-white { --process-color:#eef6dc; }
.change-process-node-top { display:flex; align-items:center; justify-content:space-between; color:var(--process-color); font:600 9px "DM Mono",monospace; }
.change-process-node-top i { width:7px; height:7px; border-radius:50%; background:var(--process-color); box-shadow:0 0 12px var(--process-color); animation:process-blink 2.3s ease-in-out infinite; }
.change-process-icon { display:grid; width:45px; height:45px; place-items:center; margin:20px 0 17px; border:1px solid color-mix(in srgb,var(--process-color) 45%,var(--line)); border-radius:13px; background:color-mix(in srgb,var(--process-color) 13%,transparent); }
.change-process-icon .three-d-svg { width:34px; height:34px; filter:drop-shadow(0 6px 9px color-mix(in srgb,var(--process-color) 24%,transparent)); }
.change-process-node h3 { margin:0 0 7px; color:#fff; font:600 17px "Space Grotesk",sans-serif; }
.change-process-node p { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.change-process-pulse { position:absolute; right:13px; bottom:15px; width:7px; height:7px; border:1px solid var(--process-color); border-radius:50%; box-shadow:0 0 0 0 color-mix(in srgb,var(--process-color) 30%,transparent); animation:process-pulse 2.5s ease-out infinite; }
.change-process-footer { display:flex; justify-content:space-between; gap:10px; margin:20px 14px 0; padding-top:13px; border-top:1px solid var(--line); color:var(--dim); font:500 9px "DM Mono",monospace; }
.change-process-footer span { display:inline-flex; align-items:center; gap:6px; }.change-process-footer i { width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
@keyframes process-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes process-beam { from { transform:translateX(-120%); } to { transform:translateX(560%); } }
@keyframes process-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--process-color) 36%,transparent); } 70% { box-shadow:0 0 0 10px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@keyframes process-blink { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes process-spin { to { transform:rotate(360deg); } }
@media (max-width:900px) { .change-process-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.change-process-beam { display:none; }.change-process-node { min-height:188px; } }
@media (max-width:560px) { .change-process-section .section-head { gap:12px; }.change-process-loop { margin-top:0; }.change-process-visual { padding:10px 0 12px; border-radius:15px; }.change-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:0 8px; }.change-process-node { min-height:174px; padding:11px 10px; }.change-process-icon { width:38px; height:38px; margin:14px 0 13px; }.change-process-icon .three-d-svg { width:29px; height:29px; }.change-process-node h3 { font-size:15px; }.change-process-node p { font-size:9px; }.change-process-footer { flex-direction:column; margin:15px 8px 0; gap:7px; } }
@media (prefers-reduced-motion:reduce) { .change-process-node,.change-process-pulse,.change-process-node-top i,.change-process-beam::after,.change-process-loop svg { animation:none; }.change-process-node:hover,.change-process-node:focus-within { transform:none; } }

/* Mission onboarding keeps the decision path visible while each field stays
   lightweight enough for a phone and resumable from local state. */
.onboarding-backdrop { padding:18px; background:rgba(1,8,13,.84); }
.mission-onboarding { width:min(900px,100%); max-height:calc(100dvh - 36px); padding:clamp(20px,4vw,38px); background:var(--modal-panel); }
.mission-onboarding .modal-head h2 { margin-top:7px; font-size:clamp(28px,4vw,46px); letter-spacing:-.055em; }
.onboarding-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:8px 0 28px; }
.onboarding-step { min-width:0; padding:10px 9px; border-top:2px solid var(--line); color:var(--dim); }
.onboarding-step.active { border-color:var(--cyan); color:#fff; }.onboarding-step.done { border-color:var(--green); color:var(--muted); }
.onboarding-step span,.onboarding-step strong,.onboarding-step small { display:block; }.onboarding-step span { color:var(--gold); font:600 9px "DM Mono",monospace; }.onboarding-step strong { margin-top:5px; font:600 13px "Space Grotesk",sans-serif; }.onboarding-step small { margin-top:4px; font-size:9px; line-height:1.35; }
.onboarding-body { min-height:270px; }.onboarding-intro { max-width:620px; margin-bottom:23px; }.onboarding-intro h3 { margin:9px 0 7px; color:#fff; font:600 25px "Space Grotesk",sans-serif; }.onboarding-intro p { color:var(--muted); font-size:11px; line-height:1.55; }
.onboarding-mission-list { display:grid; gap:8px; }.onboarding-mission { display:flex; align-items:start; gap:12px; width:100%; padding:13px; border:1px solid var(--line); border-radius:11px; background:var(--surface-card); color:var(--muted); text-align:left; }.onboarding-mission:hover,.onboarding-mission.active { border-color:rgba(132,228,229,.55); background:rgba(132,228,229,.09); color:#fff; }.onboarding-radio { width:14px; height:14px; flex:none; margin-top:2px; border:1px solid currentColor; border-radius:50%; }.onboarding-mission.active .onboarding-radio { background:var(--cyan); box-shadow:inset 0 0 0 3px var(--modal-bg); }.onboarding-mission strong,.onboarding-mission small,.onboarding-mission em { display:block; }.onboarding-mission strong { font:600 13px "Space Grotesk",sans-serif; }.onboarding-mission small { margin-top:4px; color:var(--cyan); font:500 9px "DM Mono",monospace; }.onboarding-mission em { margin-top:5px; color:var(--dim); font-size:10px; font-style:normal; }
.onboarding-match,.onboarding-privacy { display:flex; align-items:center; gap:10px; margin-top:18px; padding:11px; border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:10px; line-height:1.45; }.onboarding-privacy svg { width:17px; flex:none; color:var(--cyan); }.onboarding-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.onboarding-summary div { min-width:0; padding:13px; border:1px solid var(--line); border-radius:10px; background:var(--surface-card); }.onboarding-summary span,.onboarding-summary strong { display:block; }.onboarding-summary span { color:var(--dim); font:500 8px "DM Mono",monospace; text-transform:uppercase; }.onboarding-summary strong { margin-top:6px; color:#fff; font:600 13px/1.3 "Space Grotesk",sans-serif; overflow-wrap:anywhere; }.onboarding-consent { display:flex; gap:9px; align-items:start; margin-top:18px; color:var(--muted); font-size:10px; line-height:1.5; }.onboarding-consent input { accent-color:var(--cyan); margin-top:2px; }
.onboarding-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }.onboarding-save-note { flex:1; color:var(--dim); font:500 9px "DM Mono",monospace; text-align:center; }
@media (max-width:640px) { .onboarding-backdrop { padding:0; }.mission-onboarding { width:100%; max-height:100dvh; min-height:100dvh; border:0; border-radius:0; padding:18px 14px max(18px,env(safe-area-inset-bottom)); }.onboarding-progress { gap:4px; margin-bottom:22px; }.onboarding-step { padding:8px 5px; }.onboarding-step strong { font-size:10px; }.onboarding-step small { display:none; }.onboarding-body { min-height:320px; }.onboarding-summary { grid-template-columns:1fr; }.onboarding-actions { position:sticky; bottom:0; background:var(--rail-bg); }.onboarding-save-note { font-size:8px; }.onboarding-actions .btn { white-space:nowrap; } }

/* GIS control rail, real-map layer, and accordion details. The existing
   geographic fallback stays underneath the engine for offline/error states. */
.map-filter-panel { display:flex; padding:0; overflow:hidden; }
.map-tool-rail { width:54px; flex:0 0 54px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 7px; background:rgba(5,19,27,.98); border-right:1px solid var(--line); overflow:auto; }
.map-tool-button { width:40px; min-height:39px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); }
.map-tool-button span { font-size:17px; line-height:1; }.map-tool-button small { font:500 7px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.03em; }.map-tool-button:hover,.map-tool-button.active,.map-tool-button:focus-visible { color:var(--cyan); background:rgba(132,228,229,.1); border-color:rgba(132,228,229,.24); }.map-rail-toggle { margin-top:auto; color:var(--dim); }
.map-filter-drawer { width:191px; min-width:0; overflow:auto; padding:16px 12px; }.map-filter-drawer.hidden { display:none; }.map-filter-panel.collapsed { padding:0; }.map-filter-panel.collapsed .map-filter-drawer { display:none; }.map-module-copy h3 { margin:6px 0 5px; color:#fff; font:600 18px "Space Grotesk",sans-serif; }.map-module-copy p,.map-module-note { color:var(--muted); font-size:10px; line-height:1.5; }.map-module-list { display:grid; gap:5px; margin-top:15px; }.map-module-row { display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:6px; width:100%; padding:8px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025); color:var(--muted); text-align:left; font-size:10px; }.map-module-row[aria-pressed="true"] { color:var(--ink); border-color:rgba(132,228,229,.3); }.map-module-row small { color:var(--dim); font-size:8px; }.map-module-icon { color:var(--cyan); }.map-camera-actions { display:flex; flex-wrap:wrap; gap:5px; margin:14px 0; }.map-range { display:block; margin:14px 0; }.map-range span { display:flex; justify-content:space-between; color:var(--muted); font:500 9px "DM Mono",monospace; }.map-range output { color:var(--cyan); }.map-range input { width:100%; accent-color:var(--cyan); }.map-check { display:flex; gap:7px; align-items:center; color:var(--muted); font-size:10px; }.map-basemap-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:14px; }.map-basemap-option { min-width:0; padding:0; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025); color:var(--muted); text-align:left; overflow:hidden; }.map-basemap-option.active { border-color:var(--cyan); color:#fff; }.map-basemap-option strong { display:block; padding:6px; font-size:9px; text-transform:capitalize; }.map-basemap-swatch { display:block; height:32px; background:#2a5a61; }.map-basemap-swatch.basemap-satellite { background:linear-gradient(135deg,#315f56,#17353e 45%,#c4a25d); }.map-basemap-swatch.basemap-satellite-streets { background:linear-gradient(135deg,#c4c9b6,#3d7470 46%,#e1e2ce); }.map-basemap-swatch.basemap-dark { background:linear-gradient(135deg,#142f3b,#07151d); }.map-basemap-swatch.basemap-light { background:linear-gradient(135deg,#c8e0d4,#9fb6a6); }.map-basemap-swatch.basemap-terrain { background:linear-gradient(135deg,#7d9467,#baaa73); }.map-basemap-swatch.basemap-humanitarian { background:linear-gradient(135deg,#d4ccb4,#789a8c); }.map-drawer-search { width:100%; min-height:38px; padding:0 9px; border:1px solid var(--line); border-radius:8px; background:#0c2530; color:var(--ink); font-size:11px; }
.maplibre-layer { position:absolute!important; inset:0; z-index:2; width:100%; height:100%; visibility:visible; background:transparent; }.maplibre-layer .maplibregl-canvas { outline:0; pointer-events:auto; }.map-canvas:not(.map-engine-ready) .maplibre-layer { visibility:hidden; pointer-events:none; }.map-canvas.map-engine-ready .maplibre-layer { visibility:visible; pointer-events:auto; }.map-canvas.map-engine-ready .map-surface { opacity:0; pointer-events:none; }.map-canvas.map-engine-failed .maplibre-layer { display:none; }.map-canvas.map-tiles-warn::after { content:"Live map tiles unavailable · public records still shown"; position:absolute; left:16px; top:16px; z-index:6; max-width:240px; padding:7px 9px; background:rgba(20,45,54,.8); border:1px solid rgba(234,203,131,.35); border-radius:8px; color:#f2d99b; font:500 9px/1.3 "DM Mono",monospace; text-shadow:0 1px 2px rgba(0,0,0,.5); pointer-events:none; }.maplibregl-ctrl-group { overflow:hidden; border:1px solid rgba(163,218,227,.25)!important; background:rgba(5,18,24,.86)!important; }.maplibregl-ctrl-group button { filter:invert(1) hue-rotate(145deg); }
.map-detail-toolbar { position:relative; min-height:32px; }.map-detail-toolbar .detail-close { top:-7px; }.map-detail-toolbar .icon-btn { position:absolute; right:0; top:-5px; }.map-accordion,.geometadata-module { border-top:1px solid var(--line); padding:14px 0; }.map-accordion summary,.geometadata-module summary { display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; list-style:none; }.map-accordion summary::-webkit-details-marker,.geometadata-module summary::-webkit-details-marker { display:none; }.map-accordion summary strong,.geometadata-module summary strong { display:block; margin-top:5px; color:#fff; font:600 17px "Space Grotesk",sans-serif; }.map-accordion-body { padding-top:14px; }.accordion-chevron { color:var(--cyan); }.geometadata-state { color:var(--gold); font:500 9px "DM Mono",monospace; }.geometadata-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }.geometadata-grid div { min-width:0; padding:8px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025); }.geometadata-grid span,.geometadata-grid strong { display:block; }.geometadata-grid span { color:var(--dim); font:500 8px "DM Mono",monospace; text-transform:uppercase; }.geometadata-grid strong { margin-top:4px; color:#fff; font-size:9px; line-height:1.35; }.geometadata-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }.map-layout.focus-map { grid-template-columns:54px minmax(0,1fr) 0; }.map-layout.focus-map .map-detail-panel { display:none; }.map-layout.focus-map .map-filter-panel { border-right:1px solid var(--line); }
@media (max-width:760px) { .map-filter-panel { display:none; position:absolute; left:0; top:0; bottom:58px; width:min(92vw,330px); z-index:30; box-shadow:12px 0 30px rgba(0,0,0,.35); }.map-layout.filters-open .map-filter-panel { display:flex; }.map-filter-drawer { width:calc(min(92vw,330px) - 54px); }.map-layout.focus-map { display:block; }.map-layout.focus-map .map-filter-panel { display:none; }.map-detail-panel .geometadata-grid { grid-template-columns:1fr 1fr; } }

.my-map-hero { display:grid; grid-template-columns:1fr 190px; gap:24px; align-items:center; padding:clamp(24px,4vw,50px); background:radial-gradient(circle at 80% 30%,rgba(132,228,229,.14),transparent 28%),linear-gradient(135deg,rgba(17,57,67,.8),rgba(5,21,29,.88)); }.my-map-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }.my-map-orbit { width:160px; height:160px; display:grid; place-content:center; justify-items:center; border:1px solid rgba(234,203,131,.55); border-radius:50%; color:var(--gold); font-size:58px; box-shadow:0 0 0 14px rgba(234,203,131,.04),0 0 60px rgba(234,203,131,.15); }.my-map-orbit small { color:var(--muted); font:500 8px "DM Mono",monospace; letter-spacing:.12em; }.my-map-card { padding:20px; }.my-map-card h3 { margin:15px 0 6px; color:#fff; font:600 18px "Space Grotesk",sans-serif; }.my-map-card p { min-height:50px; color:var(--muted); font-size:11px; }
@media (max-width:760px) { .my-map-hero { grid-template-columns:1fr; }.my-map-orbit { width:112px; height:112px; justify-self:end; font-size:42px; } }

/* Hero sidebar: a quick glance at nearby chapters and upcoming events. */
.hero-network-pulse { grid-column:1 / -1; min-width:0; margin-top:2px; padding:16px 0 0; border-top:1px solid var(--line); }
.hero-sidebar-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:9px; color:var(--dim); font:500 9px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.hero-sidebar-heading .eyebrow { margin:0; color:var(--cyan); }
.hero-sidebar-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.hero-sidebar-card { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:9px; border:1px solid var(--line); border-radius:10px; background:var(--surface-card); color:var(--ink); text-align:left; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.hero-sidebar-card:hover { transform:translateY(-2px); border-color:var(--line-strong); background:rgba(132,228,229,.08); }
.hero-sidebar-card:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.hero-sidebar-card > svg { width:13px; height:13px; color:var(--cyan); }
.hero-sidebar-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:rgba(132,228,229,.1); font-size:16px; }
.hero-sidebar-card strong,.hero-sidebar-card small { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-sidebar-card strong { font:600 11px/1.2 "Space Grotesk",sans-serif; color:#fff; }
.hero-sidebar-card small { margin-top:3px; color:var(--muted); font:500 8px/1.2 "DM Mono",monospace; }
.hero-sidebar-card.event-card .hero-sidebar-icon { color:var(--gold); background:rgba(234,203,131,.12); }
.hero-sidebar-card.event-card > svg { color:var(--gold); }

/* Every hero mode has its own accent while remaining legible in the shared
   tab strip. The root data-mode is updated by applyHeroMode(). */
.mode-switcher button { --mode-accent:var(--cyan); --mode-wash:rgba(132,228,229,.13); }
.mode-switcher button[data-mode="missions"] { --mode-accent:#84e4e5; --mode-wash:rgba(132,228,229,.14); }
.mode-switcher button[data-mode="peace"] { --mode-accent:#eacb83; --mode-wash:rgba(234,203,131,.15); }
.mode-switcher button[data-mode="learning"] { --mode-accent:#b9a5ff; --mode-wash:rgba(185,165,255,.15); }
.mode-switcher button[data-mode="sports"] { --mode-accent:#ff9879; --mode-wash:rgba(255,152,121,.15); }
.mode-switcher button[data-mode="partners"] { --mode-accent:#8fd5a4; --mode-wash:rgba(143,213,164,.15); }
.mode-switcher button[data-mode="impact"] { --mode-accent:#ff6f91; --mode-wash:rgba(255,111,145,.15); }
.mode-switcher button:hover,.mode-switcher button.active { color:var(--mode-accent); background:var(--mode-wash); box-shadow:inset 0 -2px 0 var(--mode-accent); }
.hero-orbit[data-mode="missions"] .simulation-copy h2 { color:#bff8f5; }.hero-orbit[data-mode="peace"] .simulation-copy h2 { color:#f2d99b; }.hero-orbit[data-mode="learning"] .simulation-copy h2 { color:#d7ccff; }.hero-orbit[data-mode="sports"] .simulation-copy h2 { color:#ffc0aa; }.hero-orbit[data-mode="partners"] .simulation-copy h2 { color:#b9edc4; }.hero-orbit[data-mode="impact"] .simulation-copy h2 { color:#ffb0c4; }
.hero-orbit[data-mode="missions"] .hero-info-card { border-color:rgba(132,228,229,.42); }.hero-orbit[data-mode="peace"] .hero-info-card { border-color:rgba(234,203,131,.42); }.hero-orbit[data-mode="learning"] .hero-info-card { border-color:rgba(185,165,255,.42); }.hero-orbit[data-mode="sports"] .hero-info-card { border-color:rgba(255,152,121,.42); }.hero-orbit[data-mode="partners"] .hero-info-card { border-color:rgba(143,213,164,.42); }.hero-orbit[data-mode="impact"] .hero-info-card { border-color:rgba(255,111,145,.42); }
.icon-only { width:36px; min-width:36px; padding:8px; }
.icon-only svg { width:17px; height:17px; }
.hero-map-cta { grid-column:1 / -1; display:flex; justify-content:center; align-items:center; min-width:0; margin-top:-18px; position:relative; z-index:8; }
.hero-map-cta .btn { min-width:176px; }
@media (max-width:760px) { .hero-sidebar-card-grid { grid-template-columns:1fr; }.hero-network-pulse { margin-top:0; padding-top:14px; }.hero-sidebar-card { padding:10px; } }

/* The country project card remains a true responsive sidebar: its content
   can grow on narrow screens without clipping the controls or hiding the
   last connector row. */
@media (max-width:820px) {
  .hero-simulation-panel { width:100%; min-width:0; padding-inline:0; }
  .hero-info-card { min-height:0; }
  .country-slide-window { min-height:clamp(290px,52vw,335px); }
  .country-project-slide p { min-height:0; }
  .country-project-connectors span { flex:1 1 135px; }
  .country-slide-controls { flex-wrap:wrap; }
  .country-slide-dots { flex:1 1 150px; }
  .country-slide-hint { order:3; flex-basis:100%; max-width:none; padding-left:32px; }
}
@media (max-width:560px) {
  .country-slide-window { min-height:355px; }
  .country-project-top { align-items:flex-start; flex-direction:column; gap:5px; margin-bottom:11px; }
  .country-project-slide h3 { font-size:17px; }
  .country-project-connectors { display:grid; grid-template-columns:1fr; }
  .country-project-connectors span { min-width:0; }
  .country-slide-controls { gap:6px; }
  .country-slide-dot { width:11px; }
  .country-slide-hint { padding-left:0; }
  .events-hero { grid-template-columns:1fr; gap:25px; }
  .events-hero-art { width:min(68vw,230px); justify-self:end; }
  .events-hero-actions .btn { flex:1 1 180px; }
}

/* Shared detail affordance for public record cards. */
.clickable-card { cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.clickable-card:hover { transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 18px 42px rgba(0,0,0,.18); }
.clickable-card:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.breakdown-modal { width:min(760px,100%); }
.breakdown-modal .modal-head { align-items:center; }
.breakdown-modal .modal-head h2 { margin-top:7px; }
.breakdown-overview { margin:18px 0 0; color:#d4e3e4; font-size:14px; line-height:1.7; }
.breakdown-sdgs { margin-top:18px; }
.breakdown-details { display:grid; gap:1px; margin-top:22px; border-top:1px solid var(--line); }
.breakdown-details div { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); }
.breakdown-details span { color:var(--muted); font-size:11px; }
.breakdown-details strong { max-width:62%; color:#fff; font-size:11px; line-height:1.5; text-align:right; }
.breakdown-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }

/* CSS-rendered sports equipment keeps the product concepts self-contained
   while making each card visually specific to its sport. */
.sports-product-card { padding:0; overflow:hidden; }
.sports-equipment { position:relative; height:178px; overflow:hidden; display:grid; place-items:center; perspective:650px; background:radial-gradient(circle at 50% 42%,rgba(132,228,229,.16),transparent 30%),linear-gradient(145deg,#102f39,#071923 72%); }
.sports-equipment::before { content:""; position:absolute; width:68%; height:58%; border:1px solid rgba(132,228,229,.12); border-radius:50%; transform:rotate(-14deg); box-shadow:0 0 34px rgba(132,228,229,.08); }
.sports-equipment::after { content:"CONCEPT VISUAL"; position:absolute; left:14px; bottom:12px; color:rgba(234,203,131,.78); font:500 8px "DM Mono",monospace; letter-spacing:.14em; }
.equipment-main,.equipment-detail,.equipment-shadow { position:absolute; display:block; }
.equipment-shadow { width:126px; height:22px; bottom:25px; border-radius:50%; background:rgba(0,0,0,.45); filter:blur(8px); transform:rotate(-8deg); }
.equipment-basketball .equipment-main { width:108px; aspect-ratio:1; border-radius:50%; transform:rotate(-17deg) rotateY(-18deg); background:radial-gradient(circle at 30% 20%,#ffd69b 0 5%,#e88a29 34%,#a64b16 78%,#4f2517 100%); box-shadow:inset -14px -14px 20px rgba(39,17,9,.45),inset 9px 8px 14px rgba(255,237,190,.32),0 18px 24px rgba(0,0,0,.34); }
.equipment-basketball .detail-one,.equipment-basketball .detail-two { width:121px; height:2px; border-radius:2px; background:rgba(49,22,13,.78); }
.equipment-basketball .detail-one { transform:rotate(57deg); }.equipment-basketball .detail-two { transform:rotate(-39deg); }
.equipment-cricket .equipment-main { width:31px; height:124px; border-radius:9px 9px 4px 4px; transform:rotate(22deg) translate(10px,3px); background:linear-gradient(90deg,#684226,#d9a766 23%,#fff0bd 48%,#b86f35 77%,#4b2d1b); box-shadow:inset -5px 0 8px rgba(53,24,11,.35),0 16px 20px rgba(0,0,0,.35); }
.equipment-cricket .detail-one { width:18px; height:55px; border-radius:9px; transform:rotate(22deg) translate(-20px,-45px); background:linear-gradient(90deg,#314c59,#13262e); box-shadow:0 0 0 2px rgba(185,228,226,.15); }.equipment-cricket .detail-two { width:22px; height:22px; border-radius:50%; transform:translate(54px,-37px); background:radial-gradient(circle at 30% 22%,#ff9b9b,#ba2534 60%,#541a26); box-shadow:0 8px 12px rgba(0,0,0,.35); }
.equipment-volleyball .equipment-main { width:108px; aspect-ratio:1; border-radius:50%; transform:rotate(-15deg) rotateY(-18deg); background:radial-gradient(circle at 29% 20%,#fff 0 6%,#e7f1e7 42%,#a2b6af 80%,#3d595c 100%); box-shadow:inset -14px -14px 20px rgba(14,39,45,.4),inset 9px 8px 14px rgba(255,255,255,.7),0 18px 24px rgba(0,0,0,.34); }.equipment-volleyball .detail-one,.equipment-volleyball .detail-two { width:125px; height:19px; border-top:3px solid #3f8f9b; border-bottom:3px solid #3f8f9b; border-radius:50%; }.equipment-volleyball .detail-one { transform:rotate(48deg); }.equipment-volleyball .detail-two { transform:rotate(-39deg); }
.equipment-tennis .equipment-main { width:76px; height:96px; border:9px solid #8fd5a4; border-radius:50%; transform:rotate(28deg); box-shadow:inset 0 0 0 2px rgba(231,255,229,.45),0 14px 20px rgba(0,0,0,.32); }.equipment-tennis .detail-one { width:7px; height:80px; border-radius:5px; transform:rotate(28deg) translate(47px,45px); background:linear-gradient(90deg,#6b462c,#d2a16e,#4b2b1e); }.equipment-tennis .detail-two { width:57px; height:68px; border:1px solid rgba(235,255,246,.55); border-radius:50%; transform:rotate(28deg); }
.equipment-rugby .equipment-main { width:126px; height:77px; border-radius:58% 42% 53% 47%; transform:rotate(-18deg) rotateY(-22deg); background:radial-gradient(ellipse at 28% 23%,#fff0d0 0 4%,#ca6c4f 24%,#7d2630 70%,#321820 100%); box-shadow:inset -14px -12px 18px rgba(24,10,17,.48),inset 8px 7px 10px rgba(255,231,197,.35),0 18px 25px rgba(0,0,0,.36); }.equipment-rugby .detail-one { width:53px; height:3px; background:#fff2d6; transform:rotate(-18deg) translate(-2px,-1px); box-shadow:0 -8px 0 -1px #fff2d6,0 8px 0 -1px #fff2d6; }.equipment-rugby .detail-two { width:20px; height:10px; border-top:2px solid #f9e5c3; border-radius:50%; transform:rotate(-18deg) translate(5px,-1px); }
.equipment-table-tennis .equipment-main { width:70px; height:82px; border-radius:50% 50% 43% 43%; transform:rotate(-25deg) translate(-14px,-7px); background:radial-gradient(circle at 28% 21%,#ffaaa0,#ec614d 50%,#812e2d 100%); box-shadow:inset -9px -10px 14px rgba(48,11,19,.35),0 16px 20px rgba(0,0,0,.35); }.equipment-table-tennis .detail-one { width:17px; height:75px; border-radius:8px; transform:rotate(-25deg) translate(52px,35px); background:linear-gradient(90deg,#4b2b1d,#c38d58,#6c3d22); }.equipment-table-tennis .detail-two { width:18px; height:18px; border-radius:50%; transform:translate(65px,-51px); background:radial-gradient(circle at 30% 20%,#fff,#dcebe7 70%,#779493); box-shadow:0 8px 10px rgba(0,0,0,.32); }
.equipment-athletics .equipment-main { width:126px; height:50px; border-radius:62% 45% 25% 34%; transform:rotate(-12deg) translate(1px,8px); background:linear-gradient(155deg,#f7f9ee 0 25%,#77c9c7 26% 55%,#1c5061 56% 100%); box-shadow:inset -10px -9px 14px rgba(7,25,35,.36),inset 7px 6px 9px rgba(255,255,255,.45),0 17px 22px rgba(0,0,0,.34); }.equipment-athletics .detail-one { width:69px; height:3px; transform:rotate(-12deg) translate(-4px,-4px); background:#eacb83; box-shadow:0 9px 0 #eacb83; }.equipment-athletics .detail-two { width:26px; height:26px; border-radius:50%; transform:translate(62px,-49px); background:radial-gradient(circle at 30% 22%,#ffd69b,#df8b2b 60%,#754117); }
.sports-product-copy { padding:17px 18px 19px; }.product-card-top { display:flex; justify-content:space-between; align-items:start; gap:8px; }.sports-product-copy h3 { margin:14px 0 6px; font:600 19px/1.05 "Space Grotesk",sans-serif; }.sports-product-copy p { color:var(--muted); font-size:11px; line-height:1.55; }.sports-product-copy .card-meta { margin-top:12px; }.sports-product-foot { display:flex; justify-content:space-between; align-items:end; gap:10px; margin-top:17px; color:var(--dim); font:500 9px/1.4 "DM Mono",monospace; }.sports-product-foot > span:first-child { max-width:55%; }.sports-product-foot .card-link { flex:none; display:flex; color:var(--cyan); font:700 10px Manrope,sans-serif; }
@media (max-width:760px) { .breakdown-details div { display:block; }.breakdown-details strong { display:block; max-width:none; margin-top:4px; text-align:left; }.sports-equipment { height:160px; }.sports-product-foot { display:block; }.sports-product-foot .card-link { margin-top:10px; } }

/* Mobile globe controls live in their own row beneath the circular Earth. */
@media (max-width:760px) {
  .hero-orbit {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    min-height:0;
  }

  .simulation-topline {
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    width:100%;
    margin:0 auto;
  }

  .earth-stage {
    width:min(92vw,440px);
    max-width:none;
    margin:10px auto 0;
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .earth-frame {
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:1;
    flex:none;
  }

  .earth-toolbar {
    position:relative;
    order:2;
    width:100%;
    flex:none;
    margin:16px auto 0;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
}


[data-theme="light"] body {
  background:
    radial-gradient(circle at 76% -10%, rgba(96, 168, 122, 0.18), transparent 28rem),
    radial-gradient(circle at 3% 38%, rgba(130, 173, 120, 0.12), transparent 25rem),
    var(--bg);
}

[data-theme="light"] html,
[data-theme="light"] body,
[data-theme="light"] #app { background-color: var(--bg); }

[data-theme="light"] .site-header { background: var(--head-bg); }

[data-theme="light"] .panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68));
}
[data-theme="light"] .panel-soft { background: var(--surface-panel); }

[data-theme="light"] .btn { background: var(--btn-bg); }
[data-theme="light"] .btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
}

[data-theme="light"] .search-box input,
[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .field textarea,
[data-theme="light"] .filter-select { background: var(--surface-input); }

[data-theme="light"] .view-switch button.active,
[data-theme="light"] .outline-item.active { background: var(--surface-hover); }

[data-theme="light"] .modal { background: var(--modal-bg); box-shadow: 0 30px 100px rgba(58, 79, 66, 0.3); }
[data-theme="light"] .more-modal,
[data-theme="light"] .mission-onboarding { background: var(--modal-panel); }
[data-theme="light"] .toast { background: var(--toast-bg); }
[data-theme="light"] .onboarding-actions { background: var(--modal-panel); }

[data-theme="light"] .empty-state { background: var(--surface-panel); }

[data-theme="light"] .progress-track,
[data-theme="light"] .budget-bar { background: rgba(26, 42, 34, 0.1); }
[data-theme="light"] .count-cell { background: rgba(26, 42, 34, 0.05); }
[data-theme="light"] .mode-switcher { background: var(--surface-panel); }
[data-theme="light"] .hero-info-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7));
}
[data-theme="light"] .learning-orbit { background: radial-gradient(circle at center, rgba(25, 127, 133, 0.1), transparent 34%), var(--surface-panel); }
[data-theme="light"] .editor-block { background: var(--surface-card-2); }
[data-theme="light"] .ai-assistant { background: linear-gradient(160deg, rgba(107, 88, 173, 0.12), rgba(255, 255, 255, 0.6)); }
[data-theme="light"] .assistant-tip { color: var(--muted); background: rgba(107, 88, 173, 0.08); }

[data-theme="light"] .page-error { background: radial-gradient(circle at 50% 0, rgba(25, 127, 133, 0.1), transparent 55%), rgba(255, 255, 255, 0.8); }
[data-theme="light"] .page-error h1 { color: var(--ink-strong); }

[data-theme="light"] .mobile-nav { background: rgba(255, 255, 255, 0.94); box-shadow: 0 10px 35px rgba(58, 79, 66, 0.2); }
[data-theme="light"] .offline-banner { color: #5b4519; background: #f6e3b4; border-bottom-color: rgba(168, 119, 58, 0.3); }

/* Drop the dark-tinted text-shadow from headings when surfaces turn light. */
[data-theme="light"] .panel h1, [data-theme="light"] .panel h2,
[data-theme="light"] .panel h3, [data-theme="light"] .panel h4,
[data-theme="light"] .panel-soft h3, [data-theme="light"] .panel-soft h4,
[data-theme="light"] .activation-card strong, [data-theme="light"] .pathway h3,
[data-theme="light"] .list-card h3, [data-theme="light"] .record-card h3,
[data-theme="light"] .course-card h3, [data-theme="light"] .detail-side h3,
[data-theme="light"] .detail-layout h2, [data-theme="light"] .detail-layout h3,
[data-theme="light"] .football-copy h3, [data-theme="light"] .admin-kpi strong,
[data-theme="light"] .country-hero h1, [data-theme="light"] .country-hero h2,
[data-theme="light"] .education-hero h1, [data-theme="light"] .modal-head h2,
[data-theme="light"] .hero-info-card h3 { text-shadow: none; }

/* Certain hero/campaign regions are deliberately "rich dark" banners that stay
   dark as feature art, so their internal white text stays readable. */
[data-theme="light"] .breakdown-overview,
[data-theme="light"] .detail-description { color: var(--on-panel-soft); }

[data-theme="light"] .country-hero,
[data-theme="light"] .country-detail-hero { background-image: linear-gradient(105deg, rgba(247, 235, 210, 0.95) 0%, rgba(240, 233, 208, 0.9) 46%, rgba(233, 226, 200, 0.78) 100%), var(--country-hero-image); }
[data-theme="light"] .country-hero-source { color: rgba(60, 96, 80, 0.62); }

/* Rich gradient feature cards flip to light so shared muted body text stays
   readable, carrying their accent color through color-mix. */
[data-theme="light"] .activation-card:nth-child(1) { background: linear-gradient(145deg, #cde9e4, #eaf4ee); }
[data-theme="light"] .activation-card:nth-child(2) { background: linear-gradient(145deg, #d5e7f0, #e8f1f4); }
[data-theme="light"] .activation-card:nth-child(3) { background: linear-gradient(145deg, #e3ddf1, #efeaf6); }
[data-theme="light"] .activation-card:nth-child(4) { background: linear-gradient(145deg, #d9eae0, #e8f1e7); }
[data-theme="light"] .activation-card:nth-child(5) { background: linear-gradient(145deg, #e2dcf0, #eee9f6); }
[data-theme="light"] .activation-card:nth-child(6) { background: linear-gradient(145deg, #ece5d2, #f4efe2); }
[data-theme="light"] .activation-card:nth-child(7) { background: linear-gradient(145deg, #eadadf, #f2e8ea); }
[data-theme="light"] .activation-card:nth-child(8) { background: linear-gradient(145deg, #d5e9e5, #e7f1ed); }
[data-theme="light"] .activation-card:nth-child(9) { background: linear-gradient(145deg, #dce7dc, #e9f0e6); }
[data-theme="light"] .activation-card:nth-child(1):hover { background: linear-gradient(145deg, #bfe0da, #e2f0e8); }
[data-theme="light"] .activation-card:nth-child(2):hover { background: linear-gradient(145deg, #c7dde9, #e2edf1); }
[data-theme="light"] .activation-card:nth-child(3):hover { background: linear-gradient(145deg, #d9d0ec, #e8e2f3); }
[data-theme="light"] .activation-card:nth-child(4):hover { background: linear-gradient(145deg, #cbe1d5, #e1eddf); }
[data-theme="light"] .activation-card:nth-child(5):hover { background: linear-gradient(145deg, #d8cdec, #e7e0f3); }
[data-theme="light"] .activation-card:nth-child(6):hover { background: linear-gradient(145deg, #e6ddc4, #f0eadb); }
[data-theme="light"] .activation-card:nth-child(7):hover { background: linear-gradient(145deg, #e4cfd5, #efe2e5); }
[data-theme="light"] .activation-card:nth-child(8):hover { background: linear-gradient(145deg, #cde3dd, #e1ede9); }
[data-theme="light"] .activation-card:nth-child(9):hover { background: linear-gradient(145deg, #d1e0d1, #e2ece0); }

[data-theme="light"] .campaign { background: linear-gradient(115deg, #e4efe8, #eef4ec 50%, #efe6e1); }
[data-theme="light"] .events-hero { background: radial-gradient(circle at 86% 22%, rgba(168, 119, 58, 0.16), transparent 25%), linear-gradient(135deg, #eaf0ea, #f4f1e8); }
[data-theme="light"] .events-hero h1,
[data-theme="light"] .events-hero-meta strong { color: var(--ink-strong); }
[data-theme="light"] .education-hero,
[data-theme="light"] .sdg-page-hero,
[data-theme="light"] .my-map-hero { background: radial-gradient(circle at 80% 30%, rgba(25, 127, 133, 0.14), transparent 28%), linear-gradient(135deg, #eaf0ea, #f2efe6); }
[data-theme="light"] .sdg-page-hero h1 { color: var(--ink-strong); }

[data-theme="light"] .my-map-card h3,
[data-theme="light"] .admin-workspace-head h2,
[data-theme="light"] .admin-review-card h3,
[data-theme="light"] .admin-entry-empty h3,
[data-theme="light"] .hero-sidebar-card strong,
[data-theme="light"] .sdg-connection-row strong,
[data-theme="light"] .onboarding-summary strong,
[data-theme="light"] .breakdown-details strong { color: var(--ink-strong); }

[data-theme="light"] .admin-location-filters input,
[data-theme="light"] .admin-location-filters select { background: var(--surface-input); }

[data-theme="light"] .sdg-card { background: linear-gradient(135deg, color-mix(in srgb, var(--sdg-color) 16%, #ffffff), #ffffff); }
[data-theme="light"] .sdg-card:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--sdg-color) 26%, #ffffff), #fbfaf4); }
[data-theme="light"] .sdg-card strong { color: var(--ink-strong); }
[data-theme="light"] .sdg-directory-card { background: linear-gradient(145deg, color-mix(in srgb, var(--sdg-color) 12%, #ffffff), #fbfaf4); }
[data-theme="light"] .sdg-directory-heading h3 { color: var(--ink-strong); }

[data-theme="light"] .change-process-visual { background: radial-gradient(circle at 50% 0, rgba(25, 127, 133, 0.12), transparent 42%), linear-gradient(145deg, #eef2ea, #f5f2e9); }
[data-theme="light"] .change-process-node { background: linear-gradient(160deg, color-mix(in srgb, var(--process-color) 12%, #ffffff), #f7f5ee 70%); box-shadow: none; }
[data-theme="light"] .change-process-node h3 { color: var(--ink-strong); }

[data-theme="light"] .more-signin,
[data-theme="light"] .more-card { color: #ffffff; box-shadow: none; }
[data-theme="light"] .more-signin-copy small,
[data-theme="light"] .more-card-copy small { color: rgba(255, 255, 255, 0.74); }
[data-theme="light"] .more-signin-copy strong,
[data-theme="light"] .more-card-copy strong { color: #ffffff; }
[data-theme="light"] .more-signin::after,
[data-theme="light"] .more-card::after { background: rgba(255, 255, 255, 0.2); }

/* Keep hero simulation accents legible when the surrounding surfaces flip to light. */
[data-theme="light"] .mode-switcher button[data-mode="missions"] { --mode-accent:#197f85; --mode-wash:rgba(25,127,133,.13); }
[data-theme="light"] .mode-switcher button[data-mode="peace"] { --mode-accent:#a8773a; --mode-wash:rgba(168,119,58,.13); }
[data-theme="light"] .mode-switcher button[data-mode="learning"] { --mode-accent:#6b58ad; --mode-wash:rgba(107,88,173,.13); }
[data-theme="light"] .mode-switcher button[data-mode="sports"] { --mode-accent:#cc6a4c; --mode-wash:rgba(204,106,76,.13); }
[data-theme="light"] .mode-switcher button[data-mode="partners"] { --mode-accent:#3d8c60; --mode-wash:rgba(61,140,96,.13); }
[data-theme="light"] .mode-switcher button[data-mode="impact"] { --mode-accent:#c2513f; --mode-wash:rgba(194,81,63,.13); }
[data-theme="light"] .hero-orbit[data-mode="missions"] .simulation-copy h2 { color:#146a70; }
[data-theme="light"] .hero-orbit[data-mode="peace"] .simulation-copy h2 { color:#a8773a; }
[data-theme="light"] .hero-orbit[data-mode="learning"] .simulation-copy h2 { color:#6b58ad; }
[data-theme="light"] .hero-orbit[data-mode="sports"] .simulation-copy h2 { color:#cc6a4c; }
[data-theme="light"] .hero-orbit[data-mode="partners"] .simulation-copy h2 { color:#3d8c60; }
[data-theme="light"] .hero-orbit[data-mode="impact"] .simulation-copy h2 { color:#c2513f; }
[data-theme="light"] .node-label { background: rgba(255, 255, 255, 0.92); color: var(--ink); border-color: var(--line-strong); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

/* Theme controls remain available inside dialogs, including the full-screen
   video theatre, so users never have to close an open surface to change mode. */
.modal-theme-btn { flex:none; width:34px; height:34px; display:inline-grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--btn-bg); color:var(--muted); cursor:pointer; }
.modal-theme-btn:hover,.modal-theme-btn:focus-visible { color:var(--ink); border-color:var(--line-strong); background:var(--btn-bg-hover); }
.modal-theme-btn svg { width:15px; height:15px; }

[data-theme="light"] .modal-backdrop { background:rgba(223,230,220,.72); }
[data-theme="light"] .modal { color:var(--ink); border-color:var(--line-strong); }
[data-theme="light"] .close-btn { color:var(--muted); background:var(--btn-bg); }
[data-theme="light"] .mission-onboarding .onboarding-mission:hover,
[data-theme="light"] .mission-onboarding .onboarding-mission:focus-visible { color:var(--ink-strong); background:rgba(25,127,133,.09); }
[data-theme="light"] .mission-onboarding .onboarding-mission strong,
[data-theme="light"] .mission-onboarding .onboarding-intro h3,
[data-theme="light"] .mission-onboarding .onboarding-step strong { color:var(--ink-strong); }

[data-theme="light"] .theatre-backdrop { background:rgba(1,7,11,.94); }
[data-theme="light"] .watch-theatre { background:radial-gradient(circle at 76% 8%,rgba(25,127,133,.13),transparent 25%),radial-gradient(circle at 18% 75%,rgba(107,88,173,.1),transparent 24%),linear-gradient(145deg,#071a24,#031016 72%); }
[data-theme="light"] .watch-header h2,
[data-theme="light"] .watch-now-playing h3 { color:var(--watch-ink); }
[data-theme="light"] .watch-choice { background:rgba(2,16,24,.84); color:var(--watch-muted); border-color:var(--watch-line); }
[data-theme="light"] .watch-choice:hover,
[data-theme="light"] .watch-choice:focus-visible,
[data-theme="light"] .watch-choice.active { color:var(--watch-ink); background:linear-gradient(135deg,rgba(132,228,229,.2),rgba(255,255,255,.05)); }
[data-theme="light"] .watch-player-shell { background:#17343b; border-color:rgba(25,127,133,.35); box-shadow:0 0 0 8px rgba(25,127,133,.05),0 25px 80px rgba(58,79,66,.25); }
[data-theme="light"] .watch-player-shell video { background:#17343b; }
[data-theme="light"] .watch-theatre .close-btn { color:var(--watch-ink); background:rgba(2,16,24,.72); border-color:var(--watch-line); }

/* The geographic canvas remains an identifiable map surface; its chrome,
   panels, labels, and controls follow the selected application theme. */
[data-theme="light"] .map-app { color:var(--ink); background:#e8eee7; }
[data-theme="light"] .map-topbar { background:rgba(255,255,255,.9); border-color:var(--line); }
[data-theme="light"] .map-brand strong,
[data-theme="light"] .map-context-stats strong,
[data-theme="light"] .map-panel-heading h2,
[data-theme="light"] .map-list-heading h2,
[data-theme="light"] .map-detail-panel h2,
[data-theme="light"] .map-module-copy h3,
[data-theme="light"] .map-accordion summary strong,
[data-theme="light"] .geometadata-module summary strong,
[data-theme="light"] .geometadata-grid strong,
[data-theme="light"] .map-empty h3 { color:var(--ink-strong); }
[data-theme="light"] .map-brand small,
[data-theme="light"] .map-back,
[data-theme="light"] .map-context-stats,
[data-theme="light"] .map-record-row small,
[data-theme="light"] .map-record-row em { color:var(--muted); }
[data-theme="light"] .map-back,
[data-theme="light"] .map-top-btn,
[data-theme="light"] .map-view-switch button,
[data-theme="light"] .map-filter-panel .icon-btn,
[data-theme="light"] .map-list-panel .icon-btn { background:rgba(255,255,255,.76); color:var(--ink); border-color:var(--line-strong); }
[data-theme="light"] .map-top-btn:hover,
[data-theme="light"] .map-back:hover,
[data-theme="light"] .map-view-switch button:hover { background:#fff; color:var(--ink-strong); }
[data-theme="light"] .map-top-btn.primary,
[data-theme="light"] .map-view-switch button.active { background:var(--cyan); color:#fff; border-color:var(--cyan); }
[data-theme="light"] .map-top-actions select,
[data-theme="light"] .map-list-heading select,
[data-theme="light"] .map-drawer-search,
[data-theme="light"] .map-global-search { background:rgba(255,255,255,.82); color:var(--ink); border-color:var(--line-strong); }
[data-theme="light"] .map-filter-panel,
[data-theme="light"] .map-list-panel,
[data-theme="light"] .map-detail-panel { background:rgba(255,255,255,.94); border-color:var(--line); }
[data-theme="light"] .map-tool-rail { background:rgba(246,250,245,.98); border-color:var(--line); }
[data-theme="light"] .map-tool-button { color:var(--muted); }
[data-theme="light"] .map-tool-button:hover,
[data-theme="light"] .map-tool-button.active,
[data-theme="light"] .map-tool-button:focus-visible { color:var(--cyan-dark); background:rgba(25,127,133,.1); border-color:rgba(25,127,133,.24); }
[data-theme="light"] .map-module-row,
[data-theme="light"] .map-basemap-option,
[data-theme="light"] .geometadata-grid div,
[data-theme="light"] .map-record-row { background:rgba(26,42,34,.035); color:var(--ink); }
[data-theme="light"] .map-module-row[aria-pressed="true"],
[data-theme="light"] .map-basemap-option.active,
[data-theme="light"] .map-record-row:hover,
[data-theme="light"] .map-record-row.selected { color:var(--ink-strong); background:rgba(25,127,133,.09); border-color:rgba(25,127,133,.3); }
[data-theme="light"] .map-style-switcher button,
[data-theme="light"] .map-zoom button,
[data-theme="light"] .map-layer-strip button,
[data-theme="light"] .map-legend,
[data-theme="light"] .map-map-title { background:rgba(255,255,255,.84); color:var(--ink); border-color:var(--line-strong); box-shadow:0 8px 24px rgba(58,79,66,.12); }
[data-theme="light"] .map-style-switcher button.active { color:#fff; background:var(--cyan); }
[data-theme="light"] .map-zoom button { color:var(--ink-strong); }
[data-theme="light"] .map-layer-strip span,
[data-theme="light"] .map-legend-title,
[data-theme="light"] .map-map-title strong { color:var(--ink-strong); }
[data-theme="light"] .map-legend-grid span,
[data-theme="light"] .map-map-title small { color:var(--muted); }
[data-theme="light"] .map-mobile-filter { background:rgba(255,255,255,.94); border-color:var(--line-strong); box-shadow:0 10px 30px rgba(58,79,66,.18); }
[data-theme="light"] .map-mobile-filter button { color:var(--muted); }
[data-theme="light"] .map-mobile-filter button:hover { color:var(--ink-strong); background:rgba(25,127,133,.1); }

.country-directory-count { display:flex; justify-content:space-between; gap:16px; margin:-8px 0 18px; color:var(--dim); font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:640px) { .country-directory-count { flex-direction:column; gap:5px; } }

/* Final hero layout contract. Keep the outer hero and the globe/sidebar
   layout independent so tablet widths never create an accidental implicit
   column. Dense slideshow content is clipped only by its own card and may
   wrap or scroll locally as needed. */
.hero {
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  grid-template-areas:"copy orbit" "pulse pulse";
  grid-auto-flow:row;
  min-width:0;
}
.hero-copy { grid-area:copy; min-width:0; max-width:100%; }
.hero-orbit { grid-area:orbit; width:100%; max-width:100%; min-width:0; }
.hero-network-pulse { grid-area:pulse; min-width:0; }
.hero-title-frame,.hero-title-frame .display { min-width:0; }
.hero-title-frame .display { max-width:100%; overflow-wrap:anywhere; }
.hero-orbit > *, .hero-simulation-panel, .hero-info-card, .country-slideshow,
.country-slide-window, .country-project-slide { min-width:0; max-width:100%; }
.hero-simulation-panel { width:100%; overflow:hidden; }
.country-slideshow { width:100%; overflow:hidden; }
.country-slide-window { width:100%; overflow:hidden; }
.country-project-slide { width:100%; overflow-wrap:anywhere; }
.country-project-slide h3 { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.country-project-slide h3 > span:last-child { min-width:0; overflow-wrap:anywhere; }
.country-slide-title-flag { flex:0 0 auto; line-height:1; font-size:1.12em; }
.country-slide-dots { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.country-slide-dots::-webkit-scrollbar { display:none; }
.country-slide-dot { flex:0 0 15px; }
.hero-sidebar-card-grid { max-height:300px; overflow-y:auto; padding:2px 5px 5px 0; scrollbar-color:var(--cyan) transparent; }
[data-theme="light"] .hero-info-card { background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(235,244,238,.9)); }
[data-theme="light"] .hero-info-card h3 { color:var(--ink-strong); }
[data-theme="light"] .mode-switcher { background:rgba(26,42,34,.05); }

@media (max-width:1120px) {
  .hero {
    grid-template-columns:1fr;
    grid-template-areas:"copy" "orbit" "pulse";
    min-height:0;
    gap:28px;
  }
  .hero-copy { max-width:820px; }
  .hero-orbit { min-height:0; }
}
@media (max-width:900px) {
  .hero-orbit { grid-template-columns:1fr; gap:18px; }
  .hero-simulation-panel { padding:18px 0 0; }
}
@media (max-width:820px) {
  .hero { gap:16px; }
  .hero-copy { max-width:none; }
  .hero-sidebar-card-grid { max-height:330px; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .hero-sidebar-card-grid { grid-template-columns:1fr; }
}

/* Cinematic landing hero: the uploaded campaign artwork carries the first
   impression, while the interactive globe stays available as a right-side
   discovery layer. The explorer panel is relocated below the hero by app.js. */
.hero {
  position:relative;
  isolation:isolate;
  width:100vw;
  min-height:min(860px,calc(100svh - 74px));
  margin-top:-54px;
  margin-left:calc(50% - 50vw);
  padding:clamp(106px,14vh,154px) clamp(18px,4vw,64px) clamp(52px,7vh,92px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,.9fr);
  grid-template-areas:"copy orbit";
  align-items:stretch;
  gap:clamp(18px,4vw,76px);
  overflow:hidden;
  background:#07151d;
}
.hero::before,
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; }
.hero::before {
  z-index:-3;
  background:#07151d;
}
.hero-background-video {
  position:absolute;
  z-index:-3;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 34%;
  pointer-events:none;
  transform:translate3d(0,calc(var(--hero-scroll,0) * -3.2%),0) scale(1.055);
  transform-origin:center center;
  transition:transform .18s ease-out;
}
.hero::after {
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(3,13,19,.92) 0%,rgba(4,17,24,.7) 27%,rgba(4,16,23,.18) 63%,rgba(3,13,19,.45) 100%),
    linear-gradient(0deg,rgba(3,12,18,.96) 0%,rgba(3,12,18,.5) 20%,transparent 57%),
    linear-gradient(180deg,rgba(4,16,22,.35),transparent 28%);
}
.hero-copy {
  grid-area:copy;
  align-self:end;
  max-width:700px;
  padding-bottom:clamp(0px,2vh,22px);
  z-index:4;
  transform:translate3d(calc(var(--hero-scroll,0) * -1.2vw),calc(var(--hero-scroll,0) * -1.8vh),0);
  transition:transform .18s ease-out;
}
.hero .display { color:#f5fbf7; text-shadow:0 3px 30px rgba(0,0,0,.5); }
.hero .lede { color:rgba(239,249,244,.78); text-shadow:0 2px 18px rgba(0,0,0,.4); }
.hero .hero-note { color:rgba(218,239,231,.72); }
.hero-orbit {
  grid-area:orbit;
  align-self:stretch;
  width:100%;
  min-height:0;
  position:relative;
  display:block;
  transform:translate3d(calc(var(--hero-scroll,0) * 2.2vw),calc(var(--hero-scroll,0) * -1.2vh),0);
  transform-origin:center center;
  transition:transform .18s ease-out;
}
.hero-orbit .space-glow {
  inset:8% -12% 4% 6%;
  background:radial-gradient(circle,rgba(59,194,200,.26),transparent 59%);
  filter:blur(22px);
}
.hero-orbit::before {
  content:"";
  position:absolute;
  inset:10% 2% 7% 18%;
  border:1px solid rgba(154,239,228,.16);
  border-left-color:transparent;
  border-radius:50%;
  transform:rotate(-18deg);
  pointer-events:none;
}
.simulation-topline {
  top:clamp(6px,2vw,20px);
  left:auto;
  right:clamp(2px,2vw,24px);
  width:min(100%,430px);
}
.earth-stage {
  position:absolute;
  right:clamp(-5%,2vw,8%);
  bottom:clamp(7%,4vh,15%);
  width:min(43vw,590px);
  max-width:100%;
  aspect-ratio:1;
  margin:0;
  display:block;
}
.earth-frame { position:absolute; inset:0; width:100%; aspect-ratio:auto; }
.earth-toolbar {
  position:absolute;
  left:0;
  right:0;
  bottom:-50px;
  width:100%;
  margin:0;
}
.earth-toolbar .btn { box-shadow:0 10px 24px rgba(0,0,0,.24); }
.hero-orbit[data-rendering="static-fallback"]::after { top:auto; right:clamp(2px,2vw,24px); bottom:2px; }

.hero-explorer {
  width:100vw;
  margin:0 0 0 calc(50% - 50vw);
  padding:clamp(34px,5vw,70px) clamp(18px,4vw,64px) clamp(38px,5vw,66px);
  border-top:1px solid rgba(132,228,229,.22);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 83% 6%,rgba(132,228,229,.1),transparent 30%),
    linear-gradient(180deg,rgba(6,24,32,.98),rgba(5,19,28,.98));
}
.hero-explorer #hero-simulation-panel {
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(270px,1fr) minmax(300px,1.12fr);
  gap:20px 28px;
  max-width:1500px;
  margin:0 auto;
  padding:0;
  overflow:visible;
}
.hero-explorer .mode-switcher { grid-column:1 / -1; max-width:720px; }
.hero-explorer .simulation-copy { min-height:0; padding:10px 3px 0; }
.hero-explorer .simulation-copy p { max-width:470px; }
.hero-explorer .hero-info-card { min-height:220px; }
.hero-explorer .hero-legend { align-self:end; padding:0 2px 12px; }
.hero-explorer .accessible-node-list { grid-column:1 / -1; }
.hero-explorer .hero-network-pulse {
  max-width:1500px;
  margin:34px auto 0;
  padding-top:23px;
  border-top:1px solid rgba(132,228,229,.18);
}
.hero-explorer .hero-sidebar-card-grid { max-height:none; overflow:visible; }
.hero-map-cta { margin:0 auto -8px; max-width:1500px; }
.hero-explorer[data-mode="missions"] .simulation-copy h2 { color:#bff8f5; }
.hero-explorer[data-mode="peace"] .simulation-copy h2 { color:#f2d99b; }
.hero-explorer[data-mode="learning"] .simulation-copy h2 { color:#d7ccff; }
.hero-explorer[data-mode="sports"] .simulation-copy h2 { color:#ffc0aa; }
.hero-explorer[data-mode="partners"] .simulation-copy h2 { color:#b9edc4; }
.hero-explorer[data-mode="impact"] .simulation-copy h2 { color:#ffb0c4; }
.hero-explorer[data-mode="missions"] .hero-info-card { border-color:rgba(132,228,229,.42); }
.hero-explorer[data-mode="peace"] .hero-info-card { border-color:rgba(234,203,131,.42); }
.hero-explorer[data-mode="learning"] .hero-info-card { border-color:rgba(185,165,255,.42); }
.hero-explorer[data-mode="sports"] .hero-info-card { border-color:rgba(255,152,121,.42); }
.hero-explorer[data-mode="partners"] .hero-info-card { border-color:rgba(143,213,164,.42); }
.hero-explorer[data-mode="impact"] .hero-info-card { border-color:rgba(255,111,145,.42); }

[data-theme="light"] .hero-explorer {
  background:radial-gradient(circle at 83% 6%,rgba(25,127,133,.1),transparent 30%),linear-gradient(180deg,#eef6f0,#e7f0ea);
}
[data-theme="light"] .hero-explorer[data-mode="missions"] .simulation-copy h2 { color:#146a70; }
[data-theme="light"] .hero-explorer[data-mode="peace"] .simulation-copy h2 { color:#a8773a; }
[data-theme="light"] .hero-explorer[data-mode="learning"] .simulation-copy h2 { color:#6b58ad; }
[data-theme="light"] .hero-explorer[data-mode="sports"] .simulation-copy h2 { color:#cc6a4c; }
[data-theme="light"] .hero-explorer[data-mode="partners"] .simulation-copy h2 { color:#3d8c60; }
[data-theme="light"] .hero-explorer[data-mode="impact"] .simulation-copy h2 { color:#c2513f; }
[data-theme="light"] .hero-explorer .hero-sidebar-card strong { color:var(--ink-strong); }

@media (max-width:1120px) {
  .hero {
    min-height:760px;
    grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
    gap:20px;
  }
  .earth-stage { right:-7%; width:min(49vw,500px); }
  .hero-explorer #hero-simulation-panel { grid-template-columns:minmax(0,1fr) minmax(270px,1fr); }
  .hero-explorer .mode-switcher,.hero-explorer .accessible-node-list { grid-column:1 / -1; }
}
@media (max-width:820px) {
  .hero {
    min-height:760px;
    margin-top:-36px;
    grid-template-columns:1fr;
    grid-template-areas:"copy";
    padding-top:92px;
    padding-bottom:34px;
  }
  .hero-orbit {
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
  }
  .hero-orbit .simulation-topline,
  .hero-orbit .earth-toolbar { pointer-events:auto; }
  .hero-orbit::before { inset:15% -16% 17% 35%; }
  .earth-stage { right:-8%; bottom:29%; width:min(57vw,390px); opacity:.78; pointer-events:auto; }
  .hero-copy { align-self:end; max-width:680px; padding-bottom:0; z-index:5; }
  .hero .hero-actions { position:relative; }
  .hero-explorer #hero-simulation-panel { grid-template-columns:1fr; }
  .hero-explorer .mode-switcher,.hero-explorer .accessible-node-list { grid-column:auto; }
  .hero-explorer .hero-info-card { min-height:190px; }
}
@media (max-width:560px) {
  .hero {
    min-height:720px;
    padding:78px 14px 28px;
  }
  .hero::after {
    background:
      linear-gradient(90deg,rgba(3,13,19,.8),rgba(3,13,19,.25)),
      linear-gradient(0deg,rgba(3,12,18,.98) 0%,rgba(3,12,18,.6) 30%,transparent 64%);
  }
  .hero-copy { width:100%; }
  .hero-title-frame { min-height:170px; }
  .hero-title-frame .display { min-height:128px; font-size:clamp(38px,12vw,58px); }
  .hero .lede { font-size:14px; max-width:440px; }
  .earth-stage { right:-14%; bottom:32%; width:min(68vw,300px); opacity:.62; }
  .simulation-topline { right:0; width:100%; font-size:8px; }
  .simulation-topline .eyebrow { max-width:190px; }
  .simulation-status { font-size:8px; }
  .hero-explorer { padding-left:14px; padding-right:14px; }
  .hero-explorer .hero-sidebar-card-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .hero::before,.hero-copy,.hero-orbit { transform:none; transition:none; }
}

/* Final hero polish: keep the gateway with the globe and make the explorer
   feel like a deliberate, responsive control surface. */
.hero-orbit .earth-stage,
.hero-orbit .earth-frame,
.hero-orbit .earth-core,
.hero-orbit .earth-canvas,
.hero-orbit .earth-fallback-layers { border-radius:50%; }
.hero-orbit .earth-frame { overflow:hidden; }
.hero-orbit .hero-map-cta {
  position:absolute;
  right:clamp(2px,5vw,56px);
  bottom:clamp(3%,2vh,8%);
  display:flex;
  justify-content:center;
  z-index:8;
}
.hero-orbit .hero-map-cta .btn {
  min-width:178px;
  color:#06242c;
  background:linear-gradient(135deg,#b9fff1,#61d9dd 58%,#89a8ff);
  border-color:rgba(190,255,247,.92);
  box-shadow:0 10px 30px rgba(47,224,217,.3),0 0 0 5px rgba(132,228,229,.08);
}
.hero-orbit .hero-map-cta .btn:hover { box-shadow:0 14px 34px rgba(47,224,217,.42),0 0 0 7px rgba(132,228,229,.12); }

.hero .eyebrow { color:#a8fff2; text-shadow:0 0 18px rgba(132,228,229,.25); }
.hero .title-control {
  color:#e7fffa;
  background:rgba(4,18,25,.68);
  border-color:rgba(183,255,244,.38);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
}
.hero .title-control:hover { color:#061b23; background:#b9fff1; border-color:#b9fff1; }
.hero .title-progress button { background:rgba(228,255,249,.34); }
.hero .title-progress button.active { background:var(--step-color,var(--cyan)); box-shadow:0 0 15px var(--step-color,var(--cyan)); }
.hero .hero-actions .btn {
  min-height:48px;
  border-color:rgba(200,255,247,.36);
  background:rgba(4,19,27,.72);
  color:#f2fffb;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
  backdrop-filter:blur(10px);
}
.hero .hero-actions .btn.primary {
  color:#04232b;
  background:linear-gradient(135deg,#c1fff2 0%,#71e2df 52%,#8e9eff 100%);
  border-color:#c1fff2;
  box-shadow:0 12px 28px rgba(64,221,215,.32),0 0 0 4px rgba(132,228,229,.08);
}
.hero .hero-actions .btn.gold {
  color:#2a1d0b;
  background:linear-gradient(135deg,#ffe9a9,#eacb83 52%,#ffae83);
  border-color:#ffe9a9;
  box-shadow:0 12px 28px rgba(234,203,131,.24);
}
.hero .hero-actions .btn.text { color:#b9fff3; background:transparent; border-color:transparent; box-shadow:none; }
.hero .hero-actions .btn:hover { transform:translateY(-3px); border-color:#c1fff2; }
.hero .hero-note { color:#dff9f0; text-shadow:0 2px 14px rgba(0,0,0,.45); }

.hero-explorer .mode-switcher {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:5px;
  width:min(100%,820px);
  padding:6px;
  border-radius:15px;
}
.hero-explorer .mode-switcher button {
  min-width:0;
  min-height:43px;
  padding:8px 6px;
  font-size:clamp(9px,1vw,11px);
  line-height:1.1;
  white-space:nowrap;
}
.hero-explorer .hero-info-card {
  min-height:0;
  height:fit-content;
  align-self:start;
  padding:clamp(17px,2vw,25px);
}
.hero-explorer .country-slideshow { min-height:0; }
.hero-explorer .country-slide-window { min-height:clamp(260px,22vw,330px); }
.hero-explorer .country-project-slide { min-height:0; }
.hero-explorer .country-project-slide p { min-height:0; margin-bottom:0; line-height:1.55; }
.hero-explorer .country-project-connectors { margin-top:11px; }
.hero-explorer .country-slide-controls { margin-top:15px; }
.hero-explorer .hero-legend { align-self:start; padding-top:8px; }

[data-theme="light"] .hero::before {
  filter:invert(1) hue-rotate(180deg) saturate(.78) brightness(1.05);
}
[data-theme="light"] .hero::after {
  background:
    linear-gradient(90deg,rgba(5,20,24,.86) 0%,rgba(5,20,24,.56) 35%,rgba(5,20,24,.12) 72%,rgba(5,20,24,.36) 100%),
    linear-gradient(0deg,rgba(5,20,24,.88),rgba(5,20,24,.28) 27%,transparent 64%);
}
[data-theme="light"] .hero .display,
[data-theme="light"] .hero .lede,
[data-theme="light"] .hero .hero-note { color:#f4fffb; }
[data-theme="light"] .hero .hero-actions .btn:not(.primary):not(.gold) { background:rgba(5,20,24,.78); color:#f4fffb; }

@media (max-width:820px) {
  .hero-orbit .hero-map-cta { right:6%; bottom:22%; }
  .hero-explorer .mode-switcher { grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
}
@media (max-width:560px) {
  .hero-orbit .hero-map-cta { right:7%; bottom:23%; }
  .hero-orbit .hero-map-cta .btn { min-width:150px; min-height:42px; padding:9px 12px; font-size:10px; }
  .hero-explorer .mode-switcher { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-explorer .mode-switcher button { min-height:40px; }
  .hero-explorer .country-slide-window { min-height:290px; }
}

/* Explorer composition pass: the center card owns the record detail while
   the surrounding copy and legend stay lightweight and legible. */
.hero-explorer #hero-simulation-panel {
  grid-template-columns:minmax(220px,.72fr) minmax(430px,1.34fr) minmax(190px,.7fr);
  column-gap:clamp(22px,3.2vw,48px);
  align-items:start;
}
.hero-explorer .mode-switcher { max-width:1060px; }
.hero-explorer .simulation-copy {
  grid-column:1;
  padding:30px 0 0;
}
.hero-explorer .simulation-copy h2 {
  max-width:360px;
  font-size:clamp(24px,2.4vw,38px);
  line-height:1.02;
}
.hero-explorer .simulation-copy p {
  max-width:380px;
  color:var(--on-panel-soft);
  font-size:clamp(12px,1vw,14px);
  line-height:1.6;
}
.hero-explorer .hero-info-card {
  grid-column:2;
  width:100%;
  box-sizing:border-box;
  padding:clamp(18px,2vw,26px);
}
.hero-explorer .hero-legend {
  grid-column:3;
  padding:34px 0 0;
  display:grid;
  gap:12px;
  color:var(--on-panel-soft);
  font-size:clamp(11px,1vw,13px);
}
.hero-explorer .hero-legend span { display:flex; align-items:center; }
.hero-explorer .country-slide-window { min-height:clamp(220px,18vw,275px); }
.hero-explorer .country-project-top {
  margin-bottom:12px;
  color:var(--on-panel-soft);
  font-size:10px;
}
.hero-explorer .country-project-index,
.hero-explorer .country-project-country { font-size:10px; }
.hero-explorer .country-project-slide h3 {
  margin:14px 0 8px;
  font-size:clamp(21px,1.9vw,29px);
  line-height:1.1;
}
.hero-explorer .country-project-slide p {
  min-height:0;
  max-width:620px;
  color:var(--ink-strong);
  font-size:clamp(13px,1.05vw,15px);
  line-height:1.55;
}
.hero-explorer .country-project-connectors { gap:7px; }
.hero-explorer .country-project-connectors span {
  padding:6px 9px;
  color:var(--ink-strong);
  font-size:10px;
  background:rgba(132,228,229,.08);
}
.hero-explorer .country-slide-controls {
  margin-top:18px;
  padding-top:12px;
}
.hero-explorer .country-slide-hint { font-size:9px; }
.hero-explorer .accessible-node-list { margin-top:4px; }

[data-theme="light"] .hero-explorer .simulation-copy p,
[data-theme="light"] .hero-explorer .hero-legend,
[data-theme="light"] .hero-explorer .country-project-top { color:#47615d; }
[data-theme="light"] .hero-explorer .country-project-slide p,
[data-theme="light"] .hero-explorer .country-project-connectors span { color:#263e3a; }
[data-theme="light"] .hero-explorer .country-project-connectors span { background:rgba(25,127,133,.08); border-color:rgba(25,127,133,.2); }

@media (max-width:1120px) {
  .hero-explorer #hero-simulation-panel { grid-template-columns:minmax(0,1fr) minmax(320px,1.2fr); }
  .hero-explorer .simulation-copy { grid-column:1; }
  .hero-explorer .hero-info-card { grid-column:2; }
  .hero-explorer .hero-legend { grid-column:1 / -1; grid-template-columns:repeat(2,max-content); padding-top:4px; }
}
@media (max-width:820px) {
  .hero-explorer #hero-simulation-panel { grid-template-columns:1fr; }
  .hero-explorer .simulation-copy,
  .hero-explorer .hero-info-card,
  .hero-explorer .hero-legend { grid-column:auto; }
  .hero-explorer .simulation-copy { padding-top:18px; }
  .hero-explorer .hero-info-card { width:100%; }
  .hero-explorer .hero-legend { grid-template-columns:repeat(2,max-content); padding-top:0; }
}
@media (max-width:560px) {
  .hero-explorer .country-slide-window { min-height:250px; }
  .hero-explorer .hero-legend { grid-template-columns:1fr; }
  .hero-explorer .country-project-slide h3 { font-size:22px; }
  .hero-explorer .country-project-slide p { font-size:13px; }
}

/* The footer is an intentionally dark underwater surface in both themes.
   Keep its typography independent from the page theme so light mode never
   drops dark green text onto the moving reef. */
.site-footer {
  color:#f4fbf8;
  background:linear-gradient(180deg,rgba(3,14,23,.98),rgba(2,9,16,1) 76%);
}
.site-footer::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(2,11,19,.12),rgba(2,10,18,.28) 38%,rgba(2,8,15,.62) 100%);
}
.site-footer .footer-content { color:#f4fbf8; }
.site-footer .wordmark { color:#f4fbf8; }
.site-footer .wordmark small { color:#a8c9c7; }
.site-footer .footer-brand p { color:#d0e2dd; }
.site-footer .footer-column .eyebrow { color:#8ce8e3; }
.site-footer .footer-column button { color:#c7dcd7; }
.site-footer .footer-column button:hover,
.site-footer .footer-column button:focus-visible { color:#ffffff; }
.site-footer .footer-disclaimer { color:#b9d0ca; }
.site-footer .footer-disclaimer .tag.violet {
  color:#e5dcff;
  background:rgba(185,165,255,.16);
  border-color:rgba(215,202,255,.42);
}
.site-footer .footer-bottom { color:#a9c4bf; border-top-color:rgba(190,244,237,.25); }
.site-footer .footer-powered { color:#c7dcd7; }
.site-footer .footer-powered strong { color:#8ce8e3; }
.site-footer .footer-status { color:#a8efbb; }
.site-footer .footer-status i { background:#a8efbb; box-shadow:0 0 10px #a8efbb; }
.site-footer .footer-content,
.site-footer .reef-scene { isolation:isolate; }
.site-footer .footer-content { position:relative; z-index:4; text-shadow:0 1px 14px rgba(0,0,0,.5); }

/* Give the moving water a little more depth while keeping its focal light
   behind the top edge of the content, not behind the small footer labels. */
.reef-scene::before { opacity:.5; }
.reef-scene::after { background:linear-gradient(180deg,rgba(2,13,22,.08),rgba(2,11,19,.34) 40%,rgba(2,9,16,.84) 100%); }
.reef-particles i { box-shadow:0 0 9px rgba(177,255,246,.7); }
.reef-fish { filter:drop-shadow(0 0 12px rgba(123,234,227,.44)); }
@media (max-width:560px) {
  .site-footer { min-height:560px; }
  .site-footer .footer-brand p { max-width:33rem; }
}

/* Country media room: one responsive visual language for the jukebox,
   approved videos, and reference documents. */
.country-media-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.country-jukebox { display:grid; grid-template-columns:minmax(150px,.36fr) minmax(0,1fr); gap:clamp(20px,4vw,48px); align-items:center; padding:clamp(20px,4vw,40px); border:1px solid rgba(132,228,229,.28); border-radius:22px; overflow:hidden; background:radial-gradient(circle at 16% 32%,rgba(132,228,229,.2),transparent 26%),radial-gradient(circle at 91% 8%,rgba(185,165,255,.12),transparent 25%),linear-gradient(145deg,#102f3d,#061721 72%); box-shadow:0 26px 70px rgba(0,0,0,.2); }
.jukebox-disc { position:relative; width:min(19vw,220px); aspect-ratio:1; display:grid; place-items:center; justify-self:center; border:1px solid rgba(218,255,247,.35); border-radius:50%; color:#f5fff8; background:repeating-radial-gradient(circle at 50% 50%,#102c39 0 8px,#0b202d 9px 11px),radial-gradient(circle,#1e6e78,#06151f 68%); box-shadow:0 0 0 12px rgba(132,228,229,.05),0 0 0 25px rgba(132,228,229,.035),0 0 65px rgba(132,228,229,.22); }
.jukebox-disc::before { content:""; position:absolute; inset:17%; border:1px solid rgba(132,228,229,.3); border-radius:50%; }
.jukebox-disc::after { content:""; position:absolute; inset:6%; border:1px dashed rgba(234,203,131,.42); border-radius:50%; animation:jukebox-spin 18s linear infinite; }
.jukebox-disc span { position:relative; z-index:1; width:42%; aspect-ratio:1; display:grid; place-items:center; border:4px solid #eacb83; border-radius:50%; background:#133b46; font-size:clamp(23px,4vw,46px); box-shadow:0 0 0 5px rgba(234,203,131,.12),0 0 24px rgba(234,203,131,.2); }
.jukebox-disc i { position:absolute; z-index:2; width:9px; aspect-ratio:1; border-radius:50%; background:#f9f6e5; box-shadow:0 0 8px #fff; }
@keyframes jukebox-spin { to { transform:rotate(360deg); } }
.jukebox-copy { min-width:0; }
.jukebox-copy h3 { margin:9px 0 6px; color:#f5fff8; font:600 clamp(24px,3vw,38px)/1.05 "Space Grotesk",sans-serif; letter-spacing:-.045em; overflow-wrap:anywhere; }
.jukebox-copy > p { max-width:620px; margin:0; color:#c6ddd8; font-size:12px; line-height:1.6; }
.jukebox-copy .media-embed { margin-top:18px; max-width:620px; }
.jukebox-track-list { display:grid; gap:6px; max-width:620px; margin-top:16px; }
.jukebox-track { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:8px; min-width:0; padding:8px 10px; border:1px solid rgba(190,244,237,.14); border-radius:9px; background:rgba(255,255,255,.045); color:#d6e8e3; }
.track-number { color:#8ce8e3; font:600 9px "DM Mono",monospace; }
.jukebox-track strong,.jukebox-track small { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jukebox-track strong { font-size:10px; }.jukebox-track small,.track-status { color:#9fc3bd; font:500 8px "DM Mono",monospace; }.track-status { white-space:nowrap; }
.country-media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.media-shelf { min-width:0; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface-panel); }
.media-shelf-head { display:flex; justify-content:space-between; align-items:start; gap:12px; margin-bottom:14px; }.media-shelf-head h3 { margin:6px 0 0; color:var(--ink-strong); font:600 22px "Space Grotesk",sans-serif; }.media-shelf-head > span { color:var(--dim); font:500 8px "DM Mono",monospace; }
.media-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--surface-card); }.media-card + .media-card { margin-top:9px; }
.media-card-meta { display:flex; justify-content:space-between; align-items:center; gap:7px; padding:10px 11px 0; color:var(--dim); font:500 8px "DM Mono",monospace; }.media-type-pill { display:inline-flex; align-items:center; gap:4px; width:max-content; padding:5px 7px; border-radius:999px; color:#cffff7; background:rgba(132,228,229,.12); border:1px solid rgba(132,228,229,.24); font:600 8px "DM Mono",monospace; text-transform:uppercase; }.media-type-pill.video { color:#ffd4c7; background:rgba(255,152,121,.12); border-color:rgba(255,152,121,.24); }.media-type-pill.document { color:#e1d8ff; background:rgba(185,165,255,.13); border-color:rgba(185,165,255,.25); }
.media-embed { position:relative; width:100%; aspect-ratio:16/8; margin-top:9px; overflow:hidden; background:#06151f; }.media-embed.music { aspect-ratio:16/6; }.media-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }.media-card-copy { padding:12px 11px 13px; }.media-card-copy h3 { margin:0 0 4px; color:var(--ink-strong); font:600 15px/1.15 "Space Grotesk",sans-serif; overflow-wrap:anywhere; }.media-card-copy p { margin:0; color:var(--muted); font-size:10px; line-height:1.4; }.media-card-copy > small { display:block; margin-top:5px; color:var(--dim); font-size:9px; line-height:1.4; }.media-card-foot { display:flex; justify-content:space-between; gap:8px; margin-top:11px; color:var(--dim); font:500 8px "DM Mono",monospace; }.media-document-link { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin:9px 11px 0; padding:14px 10px; border:1px solid rgba(185,165,255,.24); border-radius:9px; color:var(--ink); background:rgba(185,165,255,.08); }.media-document-link:hover { border-color:rgba(185,165,255,.5); }.media-document-icon { width:28px; height:32px; display:grid; place-items:center; border:1px solid rgba(225,216,255,.4); border-radius:5px; color:#e1d8ff; }.media-document-link strong,.media-document-link small { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.media-document-link strong { color:var(--ink-strong); font-size:11px; }.media-document-link small { margin-top:3px; color:var(--muted); font:500 8px "DM Mono",monospace; }.media-document-link svg { width:13px; color:var(--violet); }
.media-empty { display:flex; align-items:center; gap:11px; min-height:74px; padding:12px; border:1px dashed var(--line-strong); border-radius:10px; color:var(--muted); }.media-empty-mark { width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:var(--cyan); background:rgba(132,228,229,.1); font-size:17px; }.media-empty strong { display:block; color:var(--ink); font:600 12px "Space Grotesk",sans-serif; }.media-empty p { margin:4px 0 0; color:var(--muted); font-size:9px; line-height:1.4; }
.media-admin-list { display:grid; gap:10px; }.media-admin-row { min-width:0; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface-card); }.media-admin-row-head { display:flex; justify-content:space-between; align-items:start; gap:12px; }.media-admin-row-head h3 { margin:8px 0 4px; color:var(--ink-strong); font:600 18px "Space Grotesk",sans-serif; overflow-wrap:anywhere; }.media-admin-row-head p { margin:0; color:var(--muted); font-size:10px; }.media-admin-source { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; color:var(--dim); font:500 9px "DM Mono",monospace; }.media-admin-source a { color:var(--cyan); }.media-admin-description { margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }.media-admin-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }.media-admin-controls > input { flex:1 1 220px; min-width:0; min-height:36px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-input); color:var(--ink); font-size:10px; }.media-featured-toggle { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:10px; white-space:nowrap; }.media-featured-toggle input { accent-color:var(--cyan); }.media-admin-buttons { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }.media-admin-empty { padding:35px 18px; text-align:center; border:1px dashed var(--line-strong); border-radius:12px; }.media-admin-empty h3 { margin:8px 0 5px; color:var(--ink-strong); font:600 20px "Space Grotesk",sans-serif; }.media-admin-empty p { max-width:520px; margin:0 auto; color:var(--muted); font-size:11px; }
[data-theme="light"] .country-jukebox { background:radial-gradient(circle at 16% 32%,rgba(132,228,229,.18),transparent 26%),linear-gradient(145deg,#184957,#0c2731 72%); }.country-jukebox.empty .jukebox-disc { opacity:.85; }.country-jukebox.empty .jukebox-copy h3 { color:#f5fff8; }.country-jukebox.empty .media-empty { border-color:rgba(190,244,237,.26); }.country-jukebox.empty .media-empty strong { color:#f5fff8; }
@media (max-width:760px) { .country-media-section .section-head { align-items:stretch; }.country-media-actions { justify-content:flex-start; }.country-jukebox { grid-template-columns:1fr; gap:22px; padding:20px; }.jukebox-disc { width:min(52vw,190px); }.country-media-grid { grid-template-columns:1fr; }.media-admin-controls { align-items:stretch; }.media-admin-buttons { width:100%; margin-left:0; }.media-admin-buttons .btn { flex:1; }.media-card-foot { align-items:flex-start; flex-direction:column; gap:4px; } }
@media (prefers-reduced-motion:reduce) { .jukebox-disc::after { animation:none; } }

/* Dedicated jukebox controls and moderation surface. */
.country-jukebox { --juke-accent:#84e4e5; --juke-glow:#eacb83; border-color:color-mix(in srgb,var(--juke-accent) 42%,transparent); background:radial-gradient(circle at 16% 32%,color-mix(in srgb,var(--juke-accent) 24%,transparent),transparent 28%),radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--juke-glow) 15%,transparent),transparent 26%),linear-gradient(145deg,#102f3d,#061721 72%); }
.jukebox-disc { border-color:color-mix(in srgb,var(--juke-accent) 45%,transparent); box-shadow:0 0 0 12px color-mix(in srgb,var(--juke-accent) 8%,transparent),0 0 0 25px color-mix(in srgb,var(--juke-accent) 5%,transparent),0 0 65px color-mix(in srgb,var(--juke-accent) 28%,transparent); }
.jukebox-disc span { border-color:var(--juke-glow); box-shadow:0 0 0 5px color-mix(in srgb,var(--juke-glow) 14%,transparent),0 0 24px color-mix(in srgb,var(--juke-glow) 26%,transparent); }
.jukebox-disc.is-playing::after { border-color:var(--juke-accent); }
.jukebox-wave { position:absolute; z-index:3; bottom:15%; left:50%; display:flex; align-items:center; gap:2px; height:24%; transform:translateX(-50%); opacity:.9; }
.jukebox-wave em { display:block; width:2px; height:35%; border-radius:4px; background:var(--juke-accent); animation:jukebox-wave 850ms ease-in-out infinite alternate; }
.jukebox-wave em:nth-child(2){height:72%;animation-delay:-180ms}.jukebox-wave em:nth-child(3){height:48%;animation-delay:-320ms}.jukebox-wave em:nth-child(4){height:88%;animation-delay:-90ms}.jukebox-wave em:nth-child(5){height:58%;animation-delay:-260ms}.jukebox-wave em:nth-child(6){height:76%;animation-delay:-420ms}
@keyframes jukebox-wave { to { transform:scaleY(.36); opacity:.55; } }
.jukebox-track { width:100%; text-align:left; cursor:pointer; font:inherit; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.jukebox-track:hover,.jukebox-track:focus-visible,.jukebox-track.active { border-color:color-mix(in srgb,var(--juke-accent) 56%,transparent); background:color-mix(in srgb,var(--juke-accent) 10%,transparent); transform:translateX(2px); outline:none; }
.jukebox-track.active .track-number,.jukebox-track.active .track-status { color:var(--juke-accent); }
.jukebox-player { max-width:620px; }
.jukebox-player-meta { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:7px; color:#a9c9c3; font:500 8px "DM Mono",monospace; }
.jukebox-report { color:#ffc0ad; }
.jukebox-legal-note { max-width:620px; margin-top:16px; color:#9fc3bd; font:500 8px/1.5 "DM Mono",monospace; }
.jukebox-pending-note { padding:12px; border:1px dashed rgba(190,244,237,.26); border-radius:9px; color:#b8d2cb; font-size:10px; }
.jukebox-pending-note strong,.jukebox-pending-note span { display:block; }.jukebox-pending-note span { margin-top:4px; color:#9fc3bd; font:500 8px "DM Mono",monospace; }
.jukebox-admin-filters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.jukebox-admin-filters input,.jukebox-admin-filters select,.jukebox-settings-form input,.jukebox-settings-form select { min-width:0; min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-input); color:var(--ink); font-size:11px; }
.jukebox-admin-list { display:grid; gap:12px; }
.jukebox-admin-row { min-width:0; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-card); }
.jukebox-admin-top { display:grid; grid-template-columns:180px minmax(0,1fr); gap:16px; }
.jukebox-admin-preview { overflow:hidden; aspect-ratio:16/9; border-radius:9px; background:#06151f; }
.jukebox-admin-preview iframe { width:100%; height:100%; border:0; }
.jukebox-admin-labels { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }.jukebox-admin-heading h3 { margin:10px 0 4px; color:var(--ink-strong); font:600 20px/1.1 "Space Grotesk",sans-serif; overflow-wrap:anywhere; }.jukebox-admin-heading p { margin:0; color:var(--muted); font-size:11px; }
.jukebox-admin-meta { display:flex; gap:10px; flex-wrap:wrap; margin-top:13px; color:var(--dim); font:500 8px/1.4 "DM Mono",monospace; }
.jukebox-admin-edit { display:grid; grid-template-columns:1.2fr 1.2fr 1fr 1fr .5fr; gap:8px; margin-top:15px; padding-top:14px; border-top:1px solid var(--line); }
.jukebox-admin-edit label,.jukebox-settings-form label { display:grid; gap:5px; color:var(--muted); font:600 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }.jukebox-admin-edit input,.jukebox-admin-edit textarea { min-width:0; min-height:34px; padding:8px 9px; border:1px solid var(--line); border-radius:7px; background:var(--surface-input); color:var(--ink); font:400 11px "Inter",sans-serif; text-transform:none; letter-spacing:normal; }.jukebox-admin-edit textarea { min-height:64px; resize:vertical; }.jukebox-url-field,.jukebox-note-field { grid-column:span 2; }
.jukebox-admin-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:13px; }.jukebox-admin-actions .media-admin-buttons { margin-left:auto; }.jukebox-branding { margin-top:15px; }.jukebox-settings-form { display:grid; grid-template-columns:1.1fr 1.2fr 2fr 76px 76px auto; gap:8px; align-items:end; }.jukebox-settings-form input[type=color] { width:100%; padding:3px; }.jukebox-audit { margin-top:15px; }.jukebox-audit h2 { margin:7px 0 14px; color:var(--ink-strong); font:600 23px "Space Grotesk",sans-serif; }.jukebox-audit ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }.jukebox-audit li { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }.jukebox-audit li strong { color:var(--cyan); font:600 9px "DM Mono",monospace; text-transform:uppercase; }.jukebox-audit li time { color:var(--dim); font:500 8px "DM Mono",monospace; }
[data-theme="light"] .jukebox-copy h3,[data-theme="light"] .jukebox-admin-heading h3,[data-theme="light"] .jukebox-audit h2 { color:#f5fff8; }
.jukebox-report-list { display:grid; gap:10px; }.jukebox-report-row { display:grid; grid-template-columns:minmax(150px,.7fr) minmax(180px,1.4fr) minmax(180px,.9fr); gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line); }.jukebox-report-row strong,.jukebox-report-row span,.jukebox-report-row small { display:block; }.jukebox-report-row strong { color:var(--ink-strong); font:600 13px "Space Grotesk",sans-serif; }.jukebox-report-row span,.jukebox-report-row small { color:var(--muted); font:500 9px/1.45 "DM Mono",monospace; }.jukebox-report-row p { margin:0; color:var(--ink); font-size:10px; line-height:1.45; }.jukebox-report-row > div:last-child { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
@media (prefers-reduced-motion:reduce) { .jukebox-wave em { animation:none; } .jukebox-track { transition:none; } }
@media (max-width:900px) { .jukebox-admin-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }.jukebox-settings-form { grid-template-columns:repeat(3,minmax(0,1fr)); }.jukebox-settings-form button { grid-column:span 3; } }
@media (max-width:650px) { .jukebox-admin-filters { grid-template-columns:1fr 1fr; }.jukebox-admin-top { grid-template-columns:1fr; }.jukebox-admin-preview { max-width:260px; }.jukebox-admin-edit { grid-template-columns:1fr 1fr; }.jukebox-url-field,.jukebox-note-field { grid-column:1/-1; }.jukebox-admin-actions .media-admin-buttons { width:100%; margin-left:0; }.jukebox-admin-actions .media-admin-buttons .btn { flex:1; }.jukebox-settings-form { grid-template-columns:1fr 1fr; }.jukebox-settings-form label:nth-child(2),.jukebox-settings-form label:nth-child(3) { grid-column:1/-1; }.jukebox-settings-form button { grid-column:1/-1; }.jukebox-audit li { grid-template-columns:1fr; gap:3px; } }
@media (max-width:650px) { .jukebox-report-row { grid-template-columns:1fr; gap:6px; }.jukebox-report-row > div:last-child { justify-content:flex-start; } }

/* Landing hero composition: keep the globe as a smaller lower-right
   discovery layer and float the mode tabs over the video edge. */
.hero > .mode-switcher {
  position:absolute;
  z-index:9;
  left:clamp(18px,4vw,64px);
  right:clamp(18px,4vw,64px);
  bottom:clamp(18px,3.2vw,34px);
  width:min(100% - clamp(36px,8vw,128px),1060px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
  padding:6px;
  border:1px solid rgba(194,255,247,.28);
  border-radius:15px;
  background:rgba(4,18,25,.74);
  box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 0 1px rgba(132,228,229,.06);
  backdrop-filter:blur(14px) saturate(1.08);
}
.hero > .mode-switcher button {
  min-width:0;
  min-height:42px;
  padding:8px 6px;
  border:1px solid color-mix(in srgb,var(--mode-accent) 38%,transparent);
  border-radius:9px;
  color:var(--mode-accent);
  background:var(--mode-wash);
  box-shadow:inset 0 -2px 0 var(--mode-accent);
  font-size:clamp(9px,1vw,11px);
  line-height:1.1;
  white-space:nowrap;
}
.hero > .mode-switcher button:hover,
.hero > .mode-switcher button:focus-visible,
.hero > .mode-switcher button.active {
  color:#061b23;
  background:var(--mode-accent);
  border-color:var(--mode-accent);
  box-shadow:0 0 18px color-mix(in srgb,var(--mode-accent) 28%,transparent),inset 0 -2px 0 rgba(255,255,255,.36);
}
.hero-orbit .earth-stage {
  right:clamp(1%,2.5vw,5%);
  bottom:clamp(10%,7vh,16%);
  width:min(32vw,440px);
}
.hero-copy {
  padding-bottom:clamp(22px,4vh,42px);
}
.hero-orbit .hero-map-cta {
  bottom:clamp(10%,8vh,15%);
}
.hero-orbit .earth-toolbar {
  bottom:-44px;
}
.hero .hero-actions .btn {
  font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}
.hero .hero-actions .btn.primary,
.hero .hero-actions .btn.gold,
.hero-orbit .hero-map-cta .btn {
  text-shadow:none;
  font-weight:900;
}
.hero > .mode-switcher button {
  font-weight:900;
  letter-spacing:.01em;
  text-shadow:0 1px 1px rgba(0,0,0,.24);
}

@media (max-width:1120px) {
  .hero-orbit .earth-stage { width:min(36vw,420px); }
}

@media (max-width:820px) {
  .hero > .mode-switcher {
    left:14px;
    right:14px;
    bottom:18px;
    width:auto;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .hero-orbit .earth-stage {
    right:-3%;
    bottom:28%;
    width:min(48vw,340px);
  }
}

@media (max-width:560px) {
  .hero > .mode-switcher {
    bottom:14px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hero > .mode-switcher button { min-height:38px; }
  .hero-orbit .earth-stage {
    right:-9%;
    bottom:31%;
    width:min(58vw,270px);
  }
}

/* Mobile landing pass: keep the brand controls compact, preserve a clear
   reading column above the tabs, and let the campaign video stay visible. */
@media (max-width:760px) {
  .site-header {
    height:56px;
    padding:0 12px;
    gap:8px;
  }
  .brand-logo {
    width:42px;
    height:42px;
  }
  .site-header .wordmark {
    gap:7px;
    min-width:0;
  }
  .site-header .wordmark-copy strong {
    font-size:11px;
    letter-spacing:.12em;
  }
  .site-header .wordmark-copy small {
    margin-top:3px;
    font-size:7px;
    letter-spacing:.12em;
  }
  .header-actions {
    gap:5px;
    flex:0 0 auto;
  }
  .header-action {
    width:32px;
    height:32px;
  }
  body:has(.hero) .site-header {
    background:rgba(4,16,23,.72);
    border-bottom-color:rgba(194,255,247,.2);
    box-shadow:0 8px 22px rgba(0,0,0,.16);
  }
  body:has(.hero) .site-header .wordmark-copy strong,
  body:has(.hero) .site-header .header-action {
    color:#f1fffb;
  }
  body:has(.hero) .site-header .wordmark-copy small {
    color:rgba(220,246,237,.68);
  }

  .hero {
    min-height:max(720px,calc(100svh - 56px));
    padding-top:78px;
    padding-bottom:clamp(212px,54vw,250px);
  }
  .hero-background-video {
    opacity:.96;
    object-position:60% center;
  }
  .hero::after {
    background:
      linear-gradient(90deg,rgba(3,13,19,.72) 0%,rgba(4,17,24,.38) 54%,rgba(4,16,23,.18) 100%),
      linear-gradient(0deg,rgba(3,12,18,.84) 0%,rgba(3,12,18,.34) 37%,transparent 76%),
      linear-gradient(180deg,rgba(4,16,22,.12),transparent 34%);
  }
  .hero-copy {
    padding-bottom:0;
  }
  .hero .hero-note {
    max-width:calc(100% - 8px);
    margin-top:22px;
    font-size:10px;
  }
  .hero .hero-actions {
    gap:8px;
  }
  .hero .hero-actions .btn {
    min-width:0;
    padding-left:12px;
    padding-right:12px;
    font-size:11px;
  }
  .hero > .mode-switcher {
    bottom:max(82px,calc(62px + env(safe-area-inset-bottom)));
  }
  .hero-orbit .hero-map-cta {
    right:14px;
    bottom:230px;
    width:auto;
    z-index:12;
  }
  .hero-orbit .hero-map-cta .btn {
    min-width:0;
    min-height:42px;
    width:auto;
    padding:10px 15px;
    color:#05232b;
    white-space:nowrap;
  }
  .hero-orbit .earth-stage {
    bottom:26%;
    opacity:.66;
  }
}

@media (max-width:380px) {
  .site-header .wordmark-copy small {
    display:none;
  }
  .brand-logo {
    width:38px;
    height:38px;
  }
  .site-header .wordmark-copy strong {
    font-size:10px;
  }
}

/* Enterprise operating layer — composed from the existing cards, type,
   spacing, badges, and trust language. */
.enterprise-shell { --enterprise-red:#b51f35; }
.enterprise-subnav {
  position:sticky; top:76px; z-index:20; display:flex; gap:5px; overflow-x:auto;
  margin:-54px calc(clamp(18px,4vw,64px) * -1) 26px; padding:12px clamp(18px,4vw,64px);
  background:color-mix(in srgb,var(--bg-deep) 91%,transparent); border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px); scrollbar-width:thin;
}
.enterprise-subnav button,.workspace-tabs button {
  flex:0 0 auto; border:1px solid transparent; border-radius:999px; background:transparent;
  color:var(--muted); padding:9px 13px; font-size:10px; font-weight:800; white-space:nowrap;
}
.enterprise-subnav button:hover,.enterprise-subnav button.active,.workspace-tabs button:hover,.workspace-tabs button.active {
  color:var(--ink-strong); background:var(--surface-hover); border-color:var(--line-strong);
}
.enterprise-savebar { display:flex; align-items:center; gap:9px; min-height:34px; margin-bottom:28px; color:var(--dim); font-size:10px; }
.enterprise-savebar strong { color:var(--muted); }
.enterprise-savebar .btn { margin-left:auto; }
.sync-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px currentColor; }
.sync-dot.online { background:var(--green); }.sync-dot.offline { background:var(--coral); }
.enterprise-hero { min-height:385px; padding:clamp(28px,5vw,68px); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); align-items:center; gap:45px; overflow:hidden; position:relative; }
.enterprise-hero::before { content:""; position:absolute; inset:-30% -10% auto 55%; height:460px; background:radial-gradient(circle,rgba(181,31,53,.18),transparent 65%); pointer-events:none; }
.enterprise-hero h1 { font:600 clamp(36px,4.5vw,65px)/.98 "Space Grotesk",sans-serif; letter-spacing:-.055em; margin:13px 0 18px; max-width:930px; }
.enterprise-chain { position:relative; z-index:1; display:grid; gap:10px; place-items:center; padding:26px; }
.enterprise-chain span { width:100%; min-height:56px; display:grid; place-items:center; text-align:center; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface-card-2); color:var(--gold); font:500 10px "DM Mono",monospace; letter-spacing:.12em; }
.enterprise-chain b { color:var(--coral); font-weight:400; transform:rotate(90deg); }
.enterprise-path { min-height:250px; }.enterprise-path h3 { font-size:23px; }
.enterprise-link-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:16px; }
.enterprise-link-grid button { min-height:78px; border:1px solid var(--line); border-radius:14px; color:var(--ink); padding:15px; text-align:left; font-weight:700; display:flex; justify-content:space-between; align-items:center; }
.enterprise-link-grid button:hover { border-color:var(--line-strong); background:var(--surface-hover); }
.enterprise-link-grid span { color:var(--cyan); }
.enterprise-rhythm { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; margin-top:22px; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.enterprise-rhythm div { min-height:105px; padding:16px 12px; display:flex; flex-direction:column; gap:10px; background:var(--surface-card); }
.enterprise-rhythm strong { color:var(--gold); font:600 17px "Space Grotesk",sans-serif; }.enterprise-rhythm span { color:var(--muted); font-size:11px; }
.enterprise-lock { display:flex; align-items:center; gap:16px; margin-top:28px; padding:18px; border:1px solid rgba(234,203,131,.28); border-radius:14px; }
.enterprise-lock > span { font-size:28px; color:var(--gold); }.enterprise-lock p { margin:3px 0 0; color:var(--muted); font-size:12px; }.enterprise-lock .btn { margin-left:auto; flex:0 0 auto; }
.enterprise-heading { margin-top:44px; align-items:start; }.enterprise-heading .section-copy { max-width:750px; }
.enterprise-form { padding:clamp(20px,4vw,42px); }
.enterprise-form .field > span,.compact-fields .field > span { color:var(--muted); font-size:11px; font-weight:700; }
.enterprise-form .field em { font-weight:400; color:var(--dim); }
.enterprise-form-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:24px; }
.privacy-callout,.legal-guidance { margin-top:22px; padding:14px 16px; border-left:2px solid var(--gold); background:rgba(234,203,131,.07); color:var(--muted); font-size:11px; border-radius:0 10px 10px 0; }
.legal-guidance { border-color:var(--violet); }
.path-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:24px; }
.path-choice { min-height:60px; display:flex; align-items:center; gap:9px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-card); color:var(--muted); font-size:12px; cursor:pointer; }
.path-choice.selected,.path-choice:has(input:checked) { border-color:var(--cyan); color:var(--ink); background:rgba(132,228,229,.08); }.path-choice input { accent-color:var(--cyan); }
.venture-private { position:relative; }.venture-privacy { display:flex; justify-content:space-between; color:var(--dim); font:500 9px "DM Mono",monospace; letter-spacing:.12em; margin-bottom:10px; }
.venture-progress { position:sticky; top:126px; z-index:12; padding:20px; box-shadow:0 16px 45px rgba(0,0,0,.28); }
.venture-progress h1 { font:600 28px "Space Grotesk",sans-serif; margin:5px 0 16px; }
.venture-progress-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; overflow:hidden; border-radius:10px; border:1px solid var(--line); }
.venture-progress-grid > div { display:flex; flex-direction:column; gap:5px; min-height:70px; padding:11px; background:var(--surface-card); }
.venture-progress-grid small { color:var(--dim); font:500 8px "DM Mono",monospace; letter-spacing:.08em; }.venture-progress-grid strong { font-size:11px; }
.venture-progress .progress-track { margin-top:12px; }
.workspace-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; margin-top:18px; }
.workspace-tabs { position:sticky; top:300px; align-self:start; max-height:calc(100vh - 330px); overflow:auto; display:flex; flex-direction:column; gap:3px; padding:10px; border:1px solid var(--line); border-radius:16px; background:var(--surface-panel); }
.workspace-tabs button { width:100%; text-align:left; border-radius:9px; }
.workspace-content { min-height:600px; }.workspace-content h2 { font-size:28px; margin-top:0; }.workspace-head { display:flex; justify-content:space-between; gap:20px; align-items:start; }
.enterprise-kpis article { min-height:120px; padding:16px; display:flex; flex-direction:column; gap:6px; border-radius:13px; }.enterprise-kpis span,.enterprise-kpis small { color:var(--muted); font-size:11px; }.enterprise-kpis strong { font-size:22px; }
.next-action-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; margin-top:24px; padding:18px; border:1px solid rgba(132,228,229,.22); border-radius:14px; background:rgba(132,228,229,.06); }
.next-action-card > span { color:var(--cyan); font:600 24px "Space Grotesk",sans-serif; }.next-action-card p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.public-preview { border:1px dashed var(--line-strong); border-radius:15px; padding:24px; }.preview-ribbon { margin:-24px -24px 22px; padding:9px 24px; background:rgba(132,228,229,.1); color:var(--cyan); font:500 9px "DM Mono",monospace; letter-spacing:.12em; }
.audit-list { display:grid; margin-top:20px; }.audit-list > div { display:grid; grid-template-columns:1fr auto; gap:5px 18px; padding:13px 0; border-bottom:1px solid var(--line); }.audit-list small { grid-column:1/-1; color:var(--dim); }
.incubator-list { display:grid; gap:9px; }.stage-card { display:grid; grid-template-columns:54px 1fr auto; gap:16px; align-items:center; padding:17px; }
.stage-number { color:var(--gold); font:500 18px "DM Mono",monospace; }.stage-card-top { display:flex; justify-content:space-between; gap:14px; }.stage-card h3 { margin:0; font-size:17px; }.stage-card p { margin:5px 0; color:var(--muted); font-size:11px; }.stage-meta { display:flex; gap:14px; flex-wrap:wrap; color:var(--dim); font-size:9px; }.stage-check { display:flex; gap:7px; align-items:center; font-size:10px; color:var(--muted); }.stage-check input { accent-color:var(--green); }
.info-request-grid,.requirement-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:18px; }.info-request-grid div,.requirement-grid div { min-height:75px; padding:13px; border:1px solid var(--line); border-radius:10px; display:flex; flex-direction:column; gap:8px; }.info-request-grid span,.requirement-grid span { color:var(--muted); font-size:10px; }
.cost-summary { display:flex; justify-content:space-between; align-items:center; padding:22px; }.cost-summary strong { font-size:31px; }.cost-summary p { color:var(--muted); margin:5px 0 0; }.cost-group { margin-top:9px; overflow:hidden; }.cost-group summary { list-style:none; padding:18px; display:flex; justify-content:space-between; cursor:pointer; }.cost-group summary span { display:flex; flex-direction:column; }.cost-group summary small { color:var(--dim); margin-top:4px; }.cost-table > div { display:grid; grid-template-columns:minmax(160px,1fr) minmax(180px,.8fr); gap:5px 16px; padding:12px 18px; border-top:1px solid var(--line); }.cost-table span { color:var(--coral); font-size:11px; }.cost-table small { grid-column:2; color:var(--dim); font-size:9px; }
.training-paths article { min-height:160px; padding:16px; border-radius:14px; }.training-paths h3 { margin:9px 0; }.training-paths p { color:var(--muted); font-size:11px; }
.mentor-criteria,.status-cloud { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0; }.mentor-criteria span { padding:7px 10px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:10px; }
.registration-modes { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:22px 0; }.registration-modes div { padding:14px; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; gap:5px; }.registration-modes div.active { border-color:var(--green); }.registration-modes span { color:var(--muted); font-size:10px; }
.checklist { display:grid; gap:8px; margin:18px 0; }.checklist label { display:flex; gap:9px; align-items:center; min-height:40px; padding:9px; border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:11px; }
.funding-score { display:grid; grid-template-columns:170px 1fr auto; align-items:center; gap:18px; }.funding-score > div:first-child { display:flex; flex-direction:column; }.funding-score span,.funding-score small { color:var(--muted); font-size:9px; }.funding-score strong { font-size:39px; color:var(--gold); }
.funding-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:24px 0; }.funding-grid label { display:flex; gap:11px; align-items:center; min-height:62px; padding:11px; border:1px solid var(--line); border-radius:11px; }.funding-grid input { accent-color:var(--cyan); }.funding-grid span { display:flex; flex-direction:column; }.funding-grid small { color:var(--dim); font-size:9px; }
.leaders-banner { padding:22px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:25px; }.leaders-banner > div { display:flex; flex-direction:column; }.leaders-banner span,.leaders-banner small { color:var(--muted); font-size:9px; }.leaders-banner strong { font-size:48px; color:var(--gold); }.leader-ops article { min-width:0; }.leader-ops ul { padding-left:18px; color:var(--muted); font-size:11px; }.role-dashboard-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:18px; }.role-dashboard-grid div { display:flex; flex-direction:column; gap:8px; padding:13px; border:1px solid var(--line); border-radius:10px; }.role-dashboard-grid span { color:var(--muted); font-size:10px; }
.document-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.document-grid article { padding:13px; display:flex; justify-content:space-between; gap:10px; align-items:center; min-height:82px; border-radius:12px; }.document-grid article > div { display:flex; align-items:center; gap:10px; }.document-grid article div div { display:flex; flex-direction:column; }.document-grid small { color:var(--dim); font-size:9px; }.document-icon { color:var(--gold); font-size:20px; }
.enterprise-disclaimer { padding-top:20px; border-top:1px solid var(--line); color:var(--dim); font-size:10px; }.enterprise-disclaimer strong { color:var(--muted); }
.enterprise-invitation { display:flex; align-items:center; justify-content:space-between; gap:24px; }.enterprise-invitation h2 { margin:7px 0 4px; font-size:25px; }.enterprise-invitation p { margin:0; color:var(--muted); font-size:12px; }
.readiness-list { display:grid; margin:20px 0 28px; }.readiness-list > div { display:grid; grid-template-columns:190px 1fr; gap:20px; padding:13px 0; border-bottom:1px solid var(--line); }.readiness-list span { color:var(--muted); }
.flag-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0 28px; }.flag-grid label { display:flex; gap:9px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:10px; }.flag-grid span { display:flex; flex-direction:column; }.flag-grid small { color:var(--dim); }.connector-grid,.prospect-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0 28px; }.connector-grid > div,.prospect-grid > div { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.enterprise-compact .enterprise-hero,.enterprise-compact .panel { box-shadow:none; }.enterprise-compact .enterprise-hero::before { display:none; }.enterprise-compact .enterprise-page p { max-width:70ch; }

@media (max-width:1250px) {
  .primary-nav { gap:9px; }.primary-nav button { font-size:10px; }
  .venture-progress-grid { grid-template-columns:repeat(3,1fr); }
  .enterprise-rhythm { grid-template-columns:repeat(4,1fr); }
  .leader-ops { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px) {
  .enterprise-subnav { top:66px; margin-top:-36px; padding-left:16px; padding-right:16px; }
  .enterprise-hero { grid-template-columns:1fr; min-height:0; padding:28px; }.enterprise-chain { grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; padding:10px 0; }.enterprise-chain b { transform:none; }.enterprise-chain span { min-height:48px; font-size:8px; }
  .enterprise-link-grid,.enterprise-rhythm,.info-request-grid,.requirement-grid,.path-choice-grid,.document-grid,.connector-grid,.prospect-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workspace-layout { grid-template-columns:1fr; }.workspace-tabs { position:static; flex-direction:row; overflow:auto; max-height:none; }.workspace-tabs button { width:auto; }.venture-progress { top:112px; }
  .enterprise-invitation { align-items:flex-start; flex-direction:column; }.enterprise-invitation .btn { width:100%; }
  .role-dashboard-grid { grid-template-columns:repeat(2,1fr); }.flag-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .enterprise-savebar span:not(.sync-dot),.enterprise-savebar strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.enterprise-savebar .btn { padding:7px 9px; }
  .enterprise-hero { padding:22px 18px; }.enterprise-hero h1 { font-size:36px; }.enterprise-chain { grid-template-columns:1fr; }.enterprise-chain b { transform:rotate(90deg); }
  .enterprise-link-grid,.enterprise-rhythm,.path-choice-grid,.info-request-grid,.requirement-grid,.document-grid,.connector-grid,.prospect-grid,.funding-grid { grid-template-columns:1fr; }
  .enterprise-lock { align-items:flex-start; flex-wrap:wrap; }.enterprise-lock .btn { width:100%; }
  .venture-progress { position:static; }.venture-progress-grid { grid-template-columns:repeat(2,1fr); }.workspace-content { min-height:0; padding:18px; }.workspace-head { flex-direction:column; }
  .stage-card { grid-template-columns:36px 1fr; align-items:start; }.stage-check { grid-column:2; }.stage-card-top { flex-direction:column; }
  .cost-table > div { grid-template-columns:1fr; }.cost-table small { grid-column:auto; }.funding-score,.leaders-banner { grid-template-columns:1fr; }.leaders-banner .progress-track { width:100%; }
  .role-dashboard-grid,.flag-grid,.leader-ops { grid-template-columns:1fr; }.readiness-list > div { grid-template-columns:1fr; gap:5px; }.registration-modes { grid-template-columns:1fr; }
  .mobile-nav { overflow-x:auto; justify-content:flex-start; }.mobile-nav button { flex:1 0 48px; min-width:48px; }
}
@media print {
  .site-header,.mobile-nav,.site-footer,.enterprise-subnav,.enterprise-savebar,.btn { display:none!important; }
  body { background:#fff; color:#111; }.page { max-width:none; padding:0; }.panel { box-shadow:none; border-color:#bbb; background:#fff!important; }
  .enterprise-page::before { content:"BE THE CHANGE · GUIDANCE ONLY · NOT LEGAL, TAX, ACCOUNTING, OR FINANCIAL ADVICE"; display:block; margin-bottom:16px; font:700 10px sans-serif; }
}
/* WhatsApp Gateway · additive operational layer */
.wa-header-action { color: #32d16f !important; border-color: rgba(50,209,111,.32) !important; background: rgba(50,209,111,.08) !important; }
.wa-primary { color: #08261a; background: #32d16f; border-color: #32d16f; }
.wa-primary:hover { background: #55e98b; border-color: #55e98b; }
.wa-shell-journey { display:flex; align-items:center; justify-content:center; gap:14px; min-height:42px; padding:7px 18px; background:rgba(50,209,111,.08); border-bottom:1px solid rgba(50,209,111,.18); color:var(--muted); font-size:11px; }
.wa-shell-journey span { font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.wa-float { position:fixed; z-index:32; right:20px; bottom:22px; display:flex; align-items:center; gap:8px; min-height:48px; padding:10px 15px 10px 10px; border:1px solid rgba(50,209,111,.34); border-radius:999px; background:#103b2a; color:#eafff0; box-shadow:0 12px 36px rgba(0,0,0,.28); font-size:11px; font-weight:800; }
.wa-float:hover { background:#17583d; transform:translateY(-2px); }
.wa-float-mark { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#32d16f; color:#08261a; font-size:18px; }
.wa-page { min-width:0; }
.wa-page::before { content:"WhatsApp Demo Mode — no real messages are being sent or received."; display:block; margin-bottom:12px; padding:9px 12px; border:1px solid rgba(234,203,131,.28); border-radius:9px; background:rgba(234,203,131,.08); color:#f5d38b; font:10px "DM Mono",monospace; letter-spacing:.04em; }
.wa-page-head, .wa-admin-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; }
.wa-page-head { margin-bottom:22px; }
.wa-head-actions, .wa-share-actions, .wa-handoff-actions, .enterprise-invitation-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.wa-journey { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:14px 16px 9px; margin-bottom:20px; border:1px solid var(--line); border-radius:16px; background:var(--surface-card); overflow:hidden; }
.wa-journey-line { position:absolute; left:6%; right:16%; top:21px; height:1px; background:var(--line-strong); }
.wa-journey-stage { position:relative; z-index:1; display:grid; justify-items:center; gap:5px; color:var(--dim); font-size:10px; }
.wa-journey-stage i { width:14px; height:14px; border:2px solid var(--dim); border-radius:50%; background:var(--bg); }
.wa-journey-stage.active, .wa-journey-stage.passed { color:var(--ink); }
.wa-journey-stage.active i { border-color:#32d16f; background:#32d16f; box-shadow:0 0 0 5px rgba(50,209,111,.13); }
.wa-journey-stage.passed i { border-color:var(--cyan); background:var(--cyan); }
.wa-journey-stage small { font-size:10px; }
.wa-journey-source { position:relative; z-index:1; margin-left:4px; }
.wa-gateway-layout { display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(290px, .92fr); gap:18px; align-items:start; }
.wa-phone { overflow:hidden; background:linear-gradient(145deg,#0b2d24,#09241f 56%,#071b23); border-color:rgba(50,209,111,.25); }
.wa-phone-top { display:flex; align-items:center; gap:10px; padding:15px 17px; border-bottom:1px solid rgba(255,255,255,.1); background:rgba(5,24,20,.74); }
.wa-phone-top strong { display:block; color:#f0fff5; font-size:13px; }
.wa-phone-top small { display:block; color:#9bc8ae; font-size:10px; margin-top:2px; }
.wa-brand-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#32d16f; color:#09251a; }
.wa-online { margin-left:auto; color:#9bc8ae; font:10px "DM Mono",monospace; }
.wa-online i { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:#32d16f; }
.wa-message-list { display:grid; gap:9px; min-height:180px; max-height:270px; padding:18px 15px; overflow:auto; background:radial-gradient(circle at 85% 10%,rgba(50,209,111,.08),transparent 35%); }
.wa-message { max-width:78%; padding:9px 11px; border-radius:10px; font-size:12px; line-height:1.45; }
.wa-message p { margin:0; white-space:pre-line; }
.wa-message time { display:block; margin-top:5px; color:rgba(255,255,255,.45); font:9px "DM Mono",monospace; }
.wa-message.user { justify-self:end; background:#174f36; color:#eefff3; border-bottom-right-radius:3px; }
.wa-message.business { justify-self:start; background:#10352d; color:#d8eee0; border-bottom-left-radius:3px; }
.wa-progress { padding:12px 16px; border-top:1px solid rgba(255,255,255,.1); }
.wa-progress > div:first-child { display:flex; justify-content:space-between; color:#9bc8ae; font:10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.wa-progress strong { color:#f0fff5; }
.wa-progress-track { height:5px; margin-top:8px; border-radius:9px; background:rgba(255,255,255,.1); overflow:hidden; }
.wa-progress-track i { display:block; height:100%; border-radius:inherit; background:#32d16f; transition:width .25s ease; }
.wa-interaction { padding:18px 16px 20px; background:rgba(4,18,16,.54); }
.wa-step-copy h2 { margin:6px 0 7px; color:#f0fff5; font:600 clamp(22px,3vw,31px)/1.05 "Space Grotesk",sans-serif; letter-spacing:-.04em; }
.wa-step-copy p { margin:0 0 15px; color:#afc9b9; font-size:13px; }
.wa-quick-replies, .wa-role-grid, .wa-needs-grid, .wa-language-grid, .wa-sdg-grid { display:grid; gap:8px; }
.wa-quick-replies { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wa-quick-reply, .wa-choice, .wa-sdg-choice { min-height:44px; padding:10px 11px; border:1px solid rgba(50,209,111,.25); border-radius:10px; background:rgba(50,209,111,.08); color:#cffff0; text-align:left; font-size:11px; font-weight:700; }
.wa-quick-reply:hover, .wa-choice:hover, .wa-sdg-choice:hover, .wa-choice.selected, .wa-sdg-choice.selected { border-color:#32d16f; background:rgba(50,209,111,.2); }
.wa-language-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.wa-role-grid, .wa-needs-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:12px; }
.wa-sdg-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:12px; }
.wa-sdg-choice { display:grid; gap:3px; }
.wa-sdg-choice strong { color:#f0fff5; }
.wa-sdg-choice span { font-size:11px; }
.wa-sdg-choice small { color:#a5c6b3; font-size:10px; font-weight:500; }
.wa-mini-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.wa-mini-form label, .wa-sandbox-controls label, .wa-admin-workspace label { display:grid; gap:6px; color:#a5c6b3; font-size:10px; font-weight:800; }
.wa-mini-form .full-width { grid-column:1/-1; }
.wa-mini-form input, .wa-mini-form select, .wa-mini-form textarea, .wa-sandbox-controls select { width:100%; min-height:42px; padding:9px 10px; border:1px solid rgba(50,209,111,.2); border-radius:9px; background:#09241f; color:#edfff3; outline:none; }
.wa-mini-form textarea { min-height:74px; resize:vertical; }
.wa-consent-points { display:grid; gap:7px; margin:14px 0; color:#afd0bb; font-size:11px; }
.wa-consent-points span::before { content:"✓"; margin-right:7px; color:#32d16f; }
.wa-consent-actions { display:flex; flex-wrap:wrap; gap:8px; }
.wa-ai-note { display:grid; gap:3px; padding:10px; border:1px solid rgba(234,203,131,.25); border-radius:10px; background:rgba(234,203,131,.08); color:#e7d9ae; font-size:11px; }
.wa-ai-note textarea { width:100%; min-height:68px; padding:8px; border:1px solid rgba(234,203,131,.28); border-radius:8px; background:rgba(1,12,10,.28); color:#fff1c6; resize:vertical; }
.wa-review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:15px 0; }
.wa-review-grid > div, .wa-state-meta span, .wa-community-meta span, .wa-consent-status span, .wa-sandbox-data > div { display:grid; gap:3px; padding:9px 10px; border:1px solid rgba(50,209,111,.16); border-radius:9px; background:rgba(50,209,111,.06); color:#94baa5; font-size:10px; }
.wa-review-grid .full-width { grid-column:1/-1; }
.wa-review-grid strong, .wa-state-meta strong, .wa-community-meta strong, .wa-consent-status strong, .wa-sandbox-data strong { color:#effff3; font-size:11px; }
.wa-handoff-note { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; color:#99b9a7; font-size:10px; }
.wa-side-stack { display:grid; gap:16px; }
.wa-state-card, .wa-map-card, .wa-source-panel { padding:18px; }
.wa-state-card h2 { margin:7px 0 4px; color:var(--ink-strong); font-size:24px; }
.wa-state-card p, .wa-map-card p, .wa-source-panel p { color:var(--muted); font-size:12px; }
.wa-state-meta, .wa-community-meta, .wa-consent-status { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:14px; }
.wa-mapping-list { display:grid; gap:9px; margin:14px 0; }
.wa-mapping-list span { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }
.wa-mapping-list i { display:grid; place-items:center; width:23px; height:23px; border-radius:7px; background:rgba(132,228,229,.12); color:var(--cyan); font:10px "DM Mono",monospace; }
.wa-mapping-list b { margin-left:auto; color:var(--green); font-size:10px; }
.wa-source-panel { display:grid; grid-template-columns:minmax(0,1fr) 92px; gap:12px; }
.wa-source-panel h3 { margin:6px 0; color:var(--ink-strong); }
.wa-short-link { display:flex; align-items:center; gap:7px; margin-top:12px; }
.wa-short-link code { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--cyan); font-size:10px; }
.wa-qr-block { display:grid; align-content:start; justify-items:center; gap:7px; }
.wa-qr-block svg { width:82px; height:82px; padding:4px; border-radius:6px; background:#fff; }
.wa-share-actions { grid-column:1/-1; }
.wa-tag { display:inline-flex; align-items:center; width:max-content; padding:5px 8px; border:1px solid rgba(132,228,229,.2); border-radius:999px; background:rgba(132,228,229,.1); color:var(--cyan); font:10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
.wa-tag.green { color:#62e68e; border-color:rgba(50,209,111,.25); background:rgba(50,209,111,.1); }
.wa-tag.gold { color:var(--gold); border-color:rgba(234,203,131,.25); background:rgba(234,203,131,.1); }
.wa-tag.coral { color:var(--coral); border-color:rgba(255,152,121,.25); background:rgba(255,152,121,.1); }
.wa-qr-overlay { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; background:rgba(1,10,14,.78); backdrop-filter:blur(9px); }
.wa-qr-modal { position:relative; width:min(360px,100%); display:grid; justify-items:center; gap:10px; padding:26px; border:1px solid var(--line-strong); border-radius:20px; background:var(--modal-bg); box-shadow:var(--shadow); text-align:center; }
.wa-qr-modal .close-btn { position:absolute; top:10px; right:10px; }
.wa-qr-modal svg { width:220px; height:220px; padding:10px; background:#fff; border-radius:8px; }
.wa-qr-modal h3 { margin:0; color:var(--ink-strong); }
.wa-qr-modal p { margin:0; color:var(--muted); font-size:12px; }
.wa-admin-page .admin-topline { align-items:flex-start; }
.wa-admin-nav { padding:8px; }
.wa-admin-tabs { display:grid; gap:3px; }
.wa-admin-tabs button { padding:10px 11px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--muted); text-align:left; font-size:11px; font-weight:800; }
.wa-admin-tabs button:hover, .wa-admin-tabs button.active { color:var(--ink-strong); border-color:rgba(50,209,111,.22); background:rgba(50,209,111,.1); }
.wa-admin-workspace { padding:20px; }
.wa-admin-panel-head { align-items:flex-start; margin-bottom:18px; }
.wa-admin-panel-head h2 { margin:6px 0 4px; color:var(--ink-strong); font-size:26px; }
.wa-admin-panel-head p { max-width:660px; margin:0; color:var(--muted); font-size:12px; }
.wa-admin-metrics { margin-bottom:16px; }
.wa-admin-metrics article { display:grid; gap:4px; padding:16px; }
.wa-admin-metrics strong { color:var(--ink-strong); font:600 28px "Space Grotesk",sans-serif; }
.wa-admin-metrics span { color:var(--muted); font-size:11px; }
.wa-admin-empty-grid, .wa-privacy-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.wa-admin-empty-grid > section, .wa-privacy-grid > section { padding:16px; }
.wa-empty { display:grid; gap:5px; min-height:90px; place-content:center; color:var(--muted); text-align:center; font-size:11px; }
.wa-empty strong { color:var(--ink-strong); }
.wa-template-list, .wa-integration-list, .wa-diagnostic-list { display:grid; gap:9px; }
.wa-template-list article, .wa-integration-list > div, .wa-diagnostic-list > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px; }
.wa-template-list h3 { margin:7px 0 3px; color:var(--ink-strong); font-size:13px; }
.wa-template-list p { margin:0; color:var(--muted); font-size:11px; }
.wa-status-pill { color:var(--gold); font:10px "DM Mono",monospace; }
.wa-integration-list > div span:first-child, .wa-diagnostic-list > div span:first-child { color:var(--ink-strong); font-size:12px; }
.wa-env-list { display:grid; gap:6px; margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:11px; }
.wa-env-list strong { color:var(--ink-strong); }
.wa-campaign-editor { display:grid; grid-template-columns:minmax(180px,.5fr) minmax(0,1fr); gap:18px; padding:16px; }
.wa-campaign-editor input { min-height:42px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface-input); color:var(--ink); }
.wa-campaign-preview { display:flex; align-items:center; gap:14px; }
.wa-campaign-preview svg { width:112px; height:112px; padding:6px; border-radius:7px; background:#fff; }
.wa-campaign-preview div { display:grid; gap:5px; }
.wa-campaign-preview strong { color:var(--ink-strong); font:14px "DM Mono",monospace; }
.wa-campaign-preview span { color:var(--muted); font-size:11px; }
.wa-json-view { max-height:620px; overflow:auto; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface-input); color:var(--cyan); font:11px/1.6 "DM Mono",monospace; white-space:pre-wrap; }
.wa-community-grid { display:grid; grid-template-columns:minmax(0,1fr); }
.wa-community-grid article { padding:16px; }
.wa-community-grid h3 { margin:8px 0; color:var(--ink-strong); }
.wa-community-grid p { margin:0 0 12px; color:var(--muted); font-size:12px; }
.wa-privacy-grid h3 { margin:0 0 10px; color:var(--ink-strong); }
.wa-privacy-grid ul { display:grid; gap:7px; margin:0; padding-left:16px; color:var(--muted); font-size:11px; }
.wa-sandbox-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.6fr); gap:14px; }
.wa-sandbox-phone { overflow:hidden; }
.wa-sandbox-chat { display:grid; gap:9px; min-height:260px; padding:16px; }
.wa-sandbox-event { padding:9px 11px; border-left:2px solid #32d16f; background:rgba(50,209,111,.08); }
.wa-sandbox-event span, .wa-sandbox-event small { color:#62e68e; font:10px "DM Mono",monospace; text-transform:uppercase; }
.wa-sandbox-event p { margin:4px 0; color:var(--ink); font-size:12px; }
.wa-sandbox-controls { display:grid; align-content:start; gap:12px; padding:16px; }
.wa-sandbox-actions { display:flex; flex-wrap:wrap; gap:8px; }
.wa-sandbox-data { display:grid; gap:8px; }
.wa-demo-banner { margin-top:8px !important; color:#f5d38b !important; font:10px "DM Mono",monospace !important; letter-spacing:.08em; }
.wa-report { padding-top:8px; }
.wa-report h2 { max-width:650px; margin:7px 0 18px; color:var(--ink-strong); font-size:24px; }
.wa-report-table { display:grid; gap:1px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.wa-report-table > div { display:grid; grid-template-columns:minmax(150px,.34fr) minmax(0,1fr); gap:14px; padding:12px 13px; background:var(--surface-card); }
.wa-report-table strong { color:var(--ink-strong); font-size:11px; }
.wa-report-table span { color:var(--muted); font-size:11px; }
.wa-phone-field { display:grid; gap:8px; margin:14px 0; }
.wa-phone-field > label { color:#eafff0; font-size:12px; font-weight:800; }
.wa-phone-supporting-text, .wa-phone-use { margin:0; color:#afc9b9; font-size:11px; line-height:1.5; }
.wa-phone-picker { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px; }
.wa-country-trigger, .wa-country-search, .wa-phone-picker input[data-wa-local-number] { min-height:44px; border:1px solid rgba(50,209,111,.25); border-radius:9px; background:#09241f; color:#edfff3; }
.wa-country-trigger { display:flex; align-items:center; gap:6px; padding:9px 10px; cursor:pointer; font-size:11px; }
.wa-country-trigger span:last-child { color:#9bc8ae; font-family:"DM Mono",monospace; }
.wa-country-search, .wa-phone-picker input[data-wa-local-number] { width:100%; padding:9px 10px; outline:none; }
.wa-phone-picker input[data-wa-local-number] { grid-column:1/-1; }
.wa-country-list { position:absolute; z-index:5; top:48px; left:0; right:0; display:none; max-height:230px; overflow:auto; padding:5px; border:1px solid rgba(50,209,111,.3); border-radius:10px; background:#09241f; box-shadow:0 16px 35px rgba(0,0,0,.28); }
.wa-phone-field.is-open .wa-country-list { display:grid; gap:2px; }
.wa-country-option { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:6px; padding:9px; border:0; border-radius:7px; background:transparent; color:#edfff3; text-align:left; cursor:pointer; }
.wa-country-option:hover, .wa-country-option:focus-visible { background:rgba(50,209,111,.15); outline:none; }
.wa-country-option strong { font-size:11px; }
.wa-country-option small { color:#9bc8ae; font:10px "DM Mono",monospace; }
.wa-phone-options, .wa-consent-options { display:grid; gap:7px; color:#d8eee0; font-size:11px; line-height:1.45; }
.wa-phone-options label, .wa-consent-options label { display:flex; align-items:flex-start; gap:7px; color:inherit; font-size:inherit; font-weight:600; }
.wa-phone-options input, .wa-consent-options input { flex:0 0 auto; width:16px; height:16px; margin-top:1px; accent-color:#32d16f; }
.wa-consent-options small { margin:-3px 0 4px 23px; color:#9bc8ae; font-size:10px; }
.wa-phone-use a { color:#84e4e5; }
.wa-phone-feedback { min-height:16px; color:#f5d38b; font-size:10px; }
.wa-preferences-card { margin-top:18px; }
.wa-preferences-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; }
.wa-connection-filters { display:flex; gap:8px; margin-bottom:12px; }
.wa-connection-filters input, .wa-composer-form input, .wa-composer-form select, .wa-composer-form textarea { width:100%; min-height:42px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface-input); color:var(--ink); }
.wa-composer-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.wa-composer-form .full-width { grid-column:1/-1; }
.wa-composer-form textarea { min-height:110px; resize:vertical; }
.wa-conversation-list { display:grid; gap:9px; }
.wa-conversation-row { display:flex; justify-content:space-between; gap:12px; padding:13px; }
.wa-conversation-row div { display:grid; gap:4px; }
.wa-conversation-row span, .wa-conversation-row small, .wa-conversation-row time { color:var(--muted); font-size:10px; }
.table-note { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.wa-definition-list { display:grid; gap:7px; color:var(--muted); font-size:11px; line-height:1.5; }
.wa-definition-list strong { color:var(--ink-strong); }
@media (max-width: 900px) { .wa-gateway-layout, .wa-sandbox-layout { grid-template-columns:1fr; } .wa-admin-empty-grid, .wa-privacy-grid { grid-template-columns:1fr 1fr; } .wa-admin-nav { overflow-x:auto; } .wa-admin-tabs { grid-template-columns:repeat(2,minmax(170px,1fr)); } }
@media (max-width: 600px) { .wa-page-head, .wa-admin-panel-head { display:grid; align-items:start; } .wa-page-head .wa-head-actions { order:-1; } .wa-journey { overflow-x:auto; justify-content:flex-start; min-width:0; padding-left:12px; padding-right:12px; } .wa-journey-stage { min-width:62px; } .wa-journey-source { display:none; } .wa-quick-replies, .wa-role-grid, .wa-needs-grid, .wa-language-grid, .wa-sdg-grid, .wa-mini-form, .wa-review-grid, .wa-campaign-editor { grid-template-columns:1fr; } .wa-mini-form .full-width, .wa-review-grid .full-width { grid-column:auto; } .wa-state-meta, .wa-community-meta, .wa-consent-status { grid-template-columns:1fr; } .wa-source-panel { grid-template-columns:1fr; } .wa-qr-block { justify-items:start; grid-template-columns:82px auto; display:grid; align-items:center; } .wa-admin-empty-grid, .wa-privacy-grid { grid-template-columns:1fr; } .wa-admin-tabs { grid-template-columns:1fr; } .wa-report-table > div { grid-template-columns:1fr; gap:5px; } .wa-float { right:12px; bottom:calc(78px + env(safe-area-inset-bottom)); } .wa-shell-journey { justify-content:space-between; padding-left:12px; padding-right:12px; } .wa-shell-journey span { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }

/* Personalized entry, kept as a small layer around the existing landing page. */
.personalization-welcome { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); align-items:center; gap:28px; margin:clamp(18px,3vw,34px) auto 0; padding:clamp(22px,4vw,34px); border:1px solid rgba(132,228,229,.25); border-radius:20px; background:linear-gradient(135deg,rgba(18,52,61,.88),rgba(7,25,34,.92)); box-shadow:0 20px 48px rgba(0,0,0,.2); }
.personalization-welcome-copy h2 { max-width:520px; margin:8px 0 10px; color:var(--on-art); font:600 clamp(24px,3.7vw,42px)/1.02 "Space Grotesk",sans-serif; letter-spacing:-.045em; }
.personalization-welcome-copy p { max-width:470px; margin:0; color:rgba(255,255,255,.74); font-size:12px; line-height:1.65; }
.personalization-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.personalization-choice { min-height:132px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:9px; padding:18px 15px; border:2px solid rgba(132,228,229,.2); border-radius:15px; background:rgba(132,228,229,.06); color:var(--ink); text-align:left; cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.personalization-choice-he { border-color:#4b9cff; }
.personalization-choice-she { border-color:#ff78ad; }
.personalization-choice-they { border-color:#a979ff; }
.personalization-choice:hover,.personalization-choice:focus-visible { transform:translateY(-4px); border-color:var(--cyan); background:rgba(132,228,229,.13); box-shadow:0 14px 28px rgba(0,0,0,.2); }
.personalization-choice-he:hover,.personalization-choice-he:focus-visible { border-color:#4b9cff; box-shadow:0 14px 28px rgba(75,156,255,.2); }
.personalization-choice-she:hover,.personalization-choice-she:focus-visible { border-color:#ff78ad; box-shadow:0 14px 28px rgba(255,120,173,.2); }
.personalization-choice-they:hover,.personalization-choice-they:focus-visible { border-color:#a979ff; box-shadow:0 14px 28px rgba(169,121,255,.2); }
.personalization-choice span { color:var(--on-art); font:600 clamp(22px,2.8vw,31px)/1 "Space Grotesk",sans-serif; }
.personalization-choice small { color:rgba(255,255,255,.72); font:500 9px/1.35 "DM Mono",monospace; }
.hero-personalized-title { margin-bottom:13px; color:var(--cyan); font:700 clamp(11px,1.3vw,15px)/1 "DM Mono",monospace; letter-spacing:.16em; text-transform:uppercase; }
.mobile-brand-label { display:none; }

/* Give the existing country slideshow a quiet layered-card depth treatment. */
.hero-info-card:has(.country-slideshow) { perspective:1200px; transform-style:preserve-3d; box-shadow:0 24px 50px rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.08); transition:box-shadow .3s ease,transform .3s ease; }
.hero-info-card:has(.country-slideshow):hover,.hero-info-card:has(.country-slideshow):focus-within { transform:translateY(-2px) rotateX(1deg) rotateY(-1deg); box-shadow:0 32px 62px rgba(0,0,0,.31),0 12px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.1); }
.hero-info-card:has(.country-slideshow) .country-slideshow,.hero-info-card:has(.country-slideshow) .country-slide-window { transform-style:preserve-3d; }
.hero-info-card:has(.country-slideshow) .country-project-slide { transform-origin:center; transition:opacity .32s ease,transform .32s ease,visibility .32s ease; }
.hero-info-card:has(.country-slideshow) .country-project-slide.active { transform:translateZ(8px) rotateX(1deg) rotateY(-1deg); }
.hero-info-card:has(.country-slideshow) .country-project-slide:not(.active) { transform:translateX(14px) translateZ(-9px) rotateY(-4deg) scale(.985); }

@media (min-width:560px) and (max-width:760px) {
  .mobile-nav { justify-content:flex-start; gap:3px; }
  .mobile-brand-label { display:block; flex:0 0 108px; align-self:center; overflow:hidden; padding:0 7px; color:var(--cyan); font:700 8px/1.2 "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-nav button { flex:1; min-width:46px; }
}
@media (max-width:900px) {
  .personalization-welcome { grid-template-columns:1fr; gap:20px; }
}
@media (max-width:560px) {
  .personalization-welcome { margin-top:14px; padding:20px 16px; }
  .personalization-welcome-copy h2 { font-size:28px; }
  .personalization-choice-grid { gap:7px; }
  .personalization-choice { min-height:104px; padding:14px 10px; }
  .personalization-choice span { font-size:21px; }
  .personalization-choice small { font-size:8px; overflow-wrap:anywhere; }
  .hero-info-card:has(.country-slideshow) { box-shadow:0 15px 30px rgba(0,0,0,.2),0 6px 14px rgba(0,0,0,.12); }
  .hero-info-card:has(.country-slideshow):hover,.hero-info-card:has(.country-slideshow):focus-within { transform:none; }
  .hero-info-card:has(.country-slideshow) .country-project-slide.active { transform:translateZ(3px) rotateX(.35deg); }
  .hero-info-card:has(.country-slideshow) .country-project-slide:not(.active) { transform:translateX(10px) translateZ(-4px) rotateY(-2deg) scale(.99); }
}
@media (prefers-reduced-motion:reduce) {
  .personalization-choice,.hero-info-card:has(.country-slideshow),.hero-info-card:has(.country-slideshow) .country-project-slide { transition:none; }
  .personalization-choice:hover,.personalization-choice:focus-visible,.hero-info-card:has(.country-slideshow):hover,.hero-info-card:has(.country-slideshow):focus-within { transform:none; }
  .hero-info-card:has(.country-slideshow) .country-project-slide.active,.hero-info-card:has(.country-slideshow) .country-project-slide:not(.active) { transform:none; }
}

/* The title choice is an entry modal; the landing page remains visible behind it. */
.personalization-backdrop { z-index:95; background:rgba(1,8,13,.7); }
.modal.personalization-modal { width:min(760px,100%); padding:clamp(24px,5vw,48px); border-color:rgba(132,228,229,.3); background:linear-gradient(145deg,#12343d,#071b25 80%); box-shadow:0 35px 110px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08); }
.personalization-modal .personalization-welcome { grid-template-columns:1fr; gap:26px; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.personalization-modal .personalization-choice-grid { gap:11px; }
.personalization-modal .personalization-choice { min-height:142px; }
@media (max-width:560px) {
  .modal.personalization-modal { padding:24px 18px; border-radius:17px; }
  .personalization-modal .personalization-welcome { gap:20px; }
  .personalization-modal .personalization-choice { min-height:112px; }
}
@media (prefers-reduced-motion:reduce) {
  .personalization-backdrop { backdrop-filter:none; }
}
@media (max-width:600px) {
  .wa-phone-picker, .wa-composer-form { grid-template-columns:1fr; }
  .wa-country-trigger { justify-content:space-between; }
  .wa-country-search { grid-row:2; }
  .wa-country-list { top:98px; }
  .wa-conversation-row { display:grid; }
}