/* ═══════════════════════════════════════════════════════════════
   Nova Gov · redesign v2
   Implements "Nova Gov Redesign v2.dc.html" from the Claude Design
   project "Mayor's desk redesign" (864d5c3b).

   Two things the design file needed translating out of:
     · canvas directives (sc-if / sc-for / style-hover / {{ }}) become
       static markup and real :hover rules
     · inline styles become named classes, per the repo naming rule

   EXCLUDED, per instruction: the hero. The site keeps its own ASCII
   hero; the design's <header data-screen-label="Hero (existing)"> was
   showing it for context, so only the content below it is built here.
   Its briefing card and display heading are kept as the dark zone that
   the light sheet then rolls over, which is the design's own composition.

   PROTECTED: #lgumap-root ("NOVA GOV · LGU INTELLIGENCE") is untouched.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --v2-ink:        #101014;
  --v2-ink-2:      #3d3d46;
  --v2-ink-3:      #5c5c64;
  --v2-ink-4:      #8f8f96;
  --v2-sheet:      #fdfdfb;
  --v2-card:       #ffffff;
  --v2-line:       #ecece8;
  --v2-line-2:     #f0f0ec;
  --v2-dark:       #0e0e10;
  --v2-dark-panel: #131316;
  --v2-dark-line:  #222227;
  --v2-dark-edge:  #26262b;
  --v2-bone:       #ecebe4;
  --v2-dim:        #a5a5ad;
  --v2-dim-2:      #7c7c85;
  --v2-accent:     oklch(0.5 0.2 262);
  --v2-accent-d:   oklch(0.42 0.17 262);
  --v2-accent-w:   oklch(0.95 0.03 262);
  --v2-amber:      oklch(0.62 0.15 85);
  --v2-green:      oklch(0.45 0.12 150);

  --sans: "Onest", -apple-system, "Helvetica Neue", sans-serif;
}

body { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.v2 h1, .v2 h2, .v2 h3 { font-family: var(--sans); }

/* ── The dark zone: briefing + display heading, above the sheet ── */
.v2-dark { background: var(--v2-dark); padding-bottom: 72px; }
.v2-wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

.v2-briefing {
  border: 1px solid var(--v2-dark-edge);
  border-radius: 20px;
  overflow: hidden;
  background: var(--v2-dark-panel);
}
.v2-briefing-head {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--v2-bone); padding: 13px 24px;
}
.v2-briefing-head .t {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--v2-ink);
}
.v2-briefing-head .t::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--v2-ink);
}
.v2-briefing-head .demo {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; color: #8a8878;
}
.v2-briefing-body { padding: 6px 28px; }
.v2-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 19px 0; border-bottom: 1px solid var(--v2-dark-line);
}
.v2-row:last-of-type { border-bottom: 0; }
.v2-row .k { font-size: 16px; color: var(--v2-dim); }
.v2-row .v { display: flex; align-items: baseline; gap: 2px; }
.v2-row .v b { font-weight: 700; font-size: 36px; letter-spacing: -0.02em; color: var(--v2-bone); }
.v2-row .v i { font-style: normal; font-size: 15px; color: #6b6b74; }
.v2-notes { padding: 4px 0 22px; display: flex; flex-direction: column; gap: 9px; }
.v2-notes span { font-size: 14.5px; color: var(--v2-dim-2); }

.v2-display { padding: 84px 0 40px; }
.v2-kicker {
  font-size: 14.5px; color: var(--v2-dim-2);
  padding-bottom: 14px; border-bottom: 1px solid var(--v2-dark-line); max-width: 620px;
}
.v2-display h2 {
  margin: 30px 0 0; font-weight: 800;
  /* The design's clamp floors are desktop sizes. At 54px "Every Department."
     measures 490px against a 375px phone's 335px of usable width, so the floor
     was the thing overflowing, not the cap. Floors lowered and the vw slope
     raised so the cap is still reached on desktop. */
  font-size: clamp(30px, 9vw, 98px); line-height: 1.0;
  letter-spacing: -0.035em; color: var(--v2-bone);
}

/* ── The light sheet, rolling over the dark zone ── */
.v2-sheet {
  background: var(--v2-sheet);
  border-radius: 36px 36px 0 0;
  position: relative; z-index: 2; margin-top: -36px;
  color: var(--v2-ink);
}
.v2-sheet section { padding: 130px 40px 0; border: 0; }
.v2-sheet .v2-wrap { padding: 0; }

.v2-h2 {
  margin: 0; font-weight: 800;
  font-size: clamp(26px, 7vw, 64px); line-height: 1.02;
  letter-spacing: -0.03em; color: var(--v2-ink);
}
.v2-lede { margin: 20px 0 0; font-size: 18.5px; line-height: 1.6; color: var(--v2-ink-3); text-wrap: pretty; }
.v2-center { text-align: center; max-width: 760px; margin-inline: auto; }
.v2-center .v2-lede { max-width: 540px; margin-inline: auto; }

/* ── Mandate strip ── */
.v2-strip { padding: 64px 40px 0 !important; text-align: center; }
.v2-strip .eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--v2-ink-4);
}

/* Section kickers. The design drops these, but they carry the page's own
   wayfinding, so they are restored in the design's existing eyebrow
   treatment (the one the mandate strip already uses) rather than a new one. */
.v2-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--v2-ink-4);
  margin-bottom: 18px;
}
.v2-eyebrow.is-dark { color: var(--v2-dim); }
.v2-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.v2-chips span {
  font-size: 14px; font-weight: 600; color: var(--v2-ink-2);
  border: 1px solid #e6e6e2; border-radius: 999px; padding: 9px 18px; background: #fff;
}

/* ── Flow diagram ── */
.v2-panel {
  background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: 28px;
  box-shadow: 0 2px 4px rgba(16,16,20,0.03), 0 32px 80px -32px rgba(16,16,20,0.16);
  margin-top: 56px; padding: 56px 48px;
}
.v2-flow { display: grid; grid-template-columns: 1fr 56px 1.2fr 56px 1fr; align-items: center; }
.v2-flow-node {
  border: 1px solid var(--v2-line); border-radius: 20px;
  padding: 26px 24px; text-align: center; background: var(--v2-sheet);
}
.v2-flow-node.is-graph {
  border: 1.5px solid var(--v2-accent); background: #fff;
  box-shadow: 0 16px 40px -20px oklch(0.5 0.2 262 / 0.45);
}
.v2-flow-node .title { font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; }
.v2-flow-node .sub { font-size: 13.5px; color: var(--v2-ink-4); margin-top: 4px; }
.v2-flow-icon {
  width: 44px; height: 44px; border-radius: 14px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; background: var(--v2-accent-w);
}
.v2-flow-icon.is-official { background: oklch(0.94 0.05 85); flex-direction: column; gap: 3px; }
.v2-flow-icon .phone { width: 13px; height: 21px; border: 2px solid var(--v2-accent); border-radius: 4px; }
.v2-flow-icon .desk  { width: 20px; height: 13px; border: 2px solid oklch(0.55 0.12 85); border-radius: 3px; }
.v2-flow-icon .foot  { width: 10px; height: 2px; background: oklch(0.55 0.12 85); border-radius: 2px; }
.v2-flow-link { height: 2px; background: linear-gradient(90deg, #d9d9d4, oklch(0.7 0.12 262)); }
.v2-flow-link.is-out { background: linear-gradient(90deg, oklch(0.7 0.12 262), #d9d9d4); }
.v2-mandate-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; }
.v2-mandate-pills span {
  font-size: 12.5px; font-weight: 700; color: var(--v2-accent-d);
  background: var(--v2-accent-w); border-radius: 999px; padding: 6px 13px;
}
/* minmax 220 and a 32px gap, not the design's 260/40: at the panel's 1144px
   inner width four columns compute to 256px, just under a 260px floor, so
   auto-fit dropped to three and orphaned the fourth beat on its own row. */
.v2-beats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 32px;
  margin-top: 52px; border-top: 1px solid var(--v2-line-2); padding-top: 40px;
}

/* The return path: an official's action goes back to the citizen. Uses the
   mandate pills' colours so it reads as part of the same diagram. */
.v2-flow-return { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.v2-flow-return .arrow {
  width: 0; height: 0; flex: none;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-right: 7px solid oklch(0.7 0.12 262);
}
.v2-flow-return .rule { flex: 1; height: 0; border-top: 1px dashed #d9d9d4; }
.v2-flow-return .label {
  font-size: 12.5px; font-weight: 700; color: var(--v2-accent-d);
  background: var(--v2-accent-w); border-radius: 999px; padding: 6px 13px;
  white-space: nowrap;
}
.v2-beats .n { font-size: 13px; font-weight: 800; color: var(--v2-accent); }
.v2-beats .t { font-weight: 700; font-size: 18px; margin-top: 8px; letter-spacing: -0.01em; }
.v2-beats p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--v2-ink-3); text-wrap: pretty; }

/* ── Coverage cards ── */
/* Every auto-fit grid here uses minmax(min(Npx, 100%), 1fr). Bare
   minmax(Npx, 1fr) forces the track to Npx even when the container is
   narrower, so on a 390px phone the 380px and 460px grids pushed their
   content ~55px past the viewport and the page scrolled sideways. */
.v2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 24px; margin-top: 52px; }
.v2-card {
  background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: 24px; padding: 36px;
  box-shadow: 0 2px 4px rgba(16,16,20,0.03);
  transition: transform 0.2s, box-shadow 0.2s;
}
.v2-card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -28px rgba(16,16,20,0.22); }
.v2-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.v2-card-head h3 { margin: 0; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
.v2-card-head .law {
  font-size: 12px; font-weight: 700; color: var(--v2-ink-4);
  letter-spacing: 0.04em; white-space: nowrap;
}
.v2-card > p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--v2-ink-3); text-wrap: pretty; }
.v2-meter {
  margin: 22px 0; background: var(--v2-sheet); border: 1px solid var(--v2-line-2);
  border-radius: 16px; padding: 18px 20px;
}
.v2-meter-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--v2-ink-3); }
.v2-meter-head b { color: var(--v2-ink); font-weight: 600; }
.v2-bar { height: 8px; background: #eeeee9; border-radius: 99px; margin-top: 10px; overflow: hidden; }
.v2-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, oklch(0.55 0.19 262), oklch(0.68 0.15 262)); }
.v2-ticks { display: flex; gap: 4px; margin-top: 10px; }
.v2-ticks i { height: 8px; flex: 1; border-radius: 99px; background: var(--v2-amber); }
.v2-ticks i.off { background: #eeeee9; }
.v2-track { display: flex; align-items: center; margin-top: 12px; }
.v2-track .dot { width: 10px; height: 10px; border-radius: 50%; }
.v2-track .dot.a { background: oklch(0.55 0.19 262); }
.v2-track .dot.b { background: var(--v2-amber); }
.v2-track .dot.c { border: 2px solid #cfcfc9; background: #fff; }
.v2-track .seg { flex: 1; height: 2px; background: #e3e3de; }
.v2-track-labels {
  display: flex; justify-content: space-between;
  font-size: 11.5px; font-weight: 600; color: var(--v2-ink-4); margin-top: 8px;
}
.v2-score { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.v2-score .val { display: flex; align-items: center; gap: 8px; }
.v2-score .val b { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.v2-delta {
  font-size: 12.5px; font-weight: 700; color: var(--v2-green);
  background: oklch(0.94 0.05 150); border-radius: 999px; padding: 5px 10px;
}
.v2-checks { display: flex; flex-direction: column; gap: 12px; }
.v2-checks li { display: flex; gap: 11px; align-items: flex-start; list-style: none; }
.v2-checks li::before {
  content: '✓'; width: 19px; height: 19px; border-radius: 50%;
  background: var(--v2-accent-w); color: oklch(0.45 0.18 262);
  font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.v2-checks li span { font-size: 14.5px; line-height: 1.55; color: var(--v2-ink-2); }

/* ── Deployment ── */
.v2-deploy {
  max-width: 1240px; margin: 0 auto;
  background: linear-gradient(180deg, oklch(0.97 0.015 262), var(--v2-sheet) 70%);
  border: 1px solid var(--v2-line); border-radius: 32px;
  padding: 72px 64px 0; overflow: hidden;
}
.v2-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; margin-top: 48px; }
.v2-step { background: #fff; border: 1px solid var(--v2-line); border-radius: 20px; padding: 30px; }
.v2-step-head { display: flex; align-items: center; gap: 12px; }
.v2-step-head .n {
  width: 34px; height: 34px; border-radius: 12px; background: var(--v2-ink); color: #fff;
  font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
}
.v2-step-head h3 { margin: 0; font-weight: 700; font-size: 20px; letter-spacing: -0.015em; }
.v2-step p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--v2-ink-3); text-wrap: pretty; }

.v2-browser {
  max-width: 920px; margin: 56px auto -2px; background: #fff;
  border: 1px solid #e4e4df; border-radius: 20px 20px 0 0;
  box-shadow: 0 -2px 4px rgba(16,16,20,0.02), 0 24px 80px -24px rgba(16,16,20,0.25);
}
.v2-browser-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--v2-line-2); }
.v2-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e6e6e1; }
.v2-browser-bar .url {
  flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--v2-ink-4);
  background: #f6f6f3; border-radius: 8px; padding: 6px 0; margin: 0 60px;
}
.v2-browser-body { display: grid; grid-template-columns: 200px 1fr; }
.v2-browser-nav { border-right: 1px solid var(--v2-line-2); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; }
.v2-browser-nav span { font-size: 13.5px; font-weight: 500; padding: 9px 12px; color: var(--v2-ink-3); }
.v2-browser-nav span.on { font-weight: 700; border-radius: 10px; background: var(--v2-accent-w); color: var(--v2-accent-d); }
.v2-browser-main { padding: 24px 28px; }
.v2-browser-main .greet { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.v2-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
/* > div, not a descendant selector: .k and .v are divs too, so the plain
   descendant form drew a border around the label and the number as well */
.v2-kpis > div { border: 1px solid var(--v2-line-2); border-radius: 14px; padding: 14px 16px; }
.v2-kpis .k { font-size: 12px; font-weight: 600; color: var(--v2-ink-4); }
.v2-kpis .v { font-weight: 800; font-size: 24px; margin-top: 6px; letter-spacing: -0.02em; }

/* ── Mandate registry (dark card) ── */
.v2-registry {
  max-width: 1240px; margin: 0 auto; background: var(--v2-ink);
  border-radius: 32px; padding: 72px 64px; color: #f2f1ea;
}
.v2-registry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 56px; align-items: start; }
.v2-registry h2 {
  margin: 0; font-weight: 800; font-size: clamp(32px, 3.8vw, 50px);
  line-height: 1.06; letter-spacing: -0.025em; color: #fff;
}
.v2-registry p { margin: 20px 0 0; font-size: 16px; line-height: 1.65; color: var(--v2-dim); text-wrap: pretty; }
.v2-registry p strong { color: #f2f1ea; }
.v2-registry-list { display: flex; flex-direction: column; }
.v2-registry-list div {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 15px 4px; border-bottom: 1px solid rgba(255,255,255,0.09);
}
.v2-registry-list div:last-child { border-bottom: 0; }
.v2-registry-list b { font-weight: 700; font-size: 15.5px; color: #fff; }
.v2-registry-list span { font-size: 14.5px; color: var(--v2-dim); }

/* ── Pilot ── */
.v2-pilot-section { padding: 130px 40px 120px !important; }
.v2-pilot {
  max-width: 1240px; margin: 0 auto;
  background: linear-gradient(135deg, oklch(0.96 0.02 262), oklch(0.97 0.02 85));
  border: 1px solid var(--v2-line); border-radius: 32px; padding: 80px 64px;
}
.v2-pilot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 56px; align-items: center; }
.v2-pilot h2 {
  margin: 0; font-weight: 800; font-size: clamp(30px, 8vw, 72px);
  line-height: 1.0; letter-spacing: -0.035em;
}
.v2-slots { display: flex; gap: 10px; margin-top: 28px; }
.v2-slot {
  width: 60px; background: #fff; border: 1px solid #e4e4df; border-radius: 14px;
  text-align: center; padding: 10px 0;
}
.v2-slot b { display: block; font-weight: 800; font-size: 16px; }
.v2-slot i {
  display: block; font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em; margin-top: 2px; color: var(--v2-green);
}
.v2-slot.is-claimed i { color: oklch(0.55 0.19 30); }
.v2-pilot p { margin: 0 0 0; font-size: 17px; line-height: 1.65; color: var(--v2-ink-2); text-wrap: pretty; }
.v2-pilot p + p { margin-top: 16px; }
.v2-pilot p.emph { font-weight: 600; color: var(--v2-ink); }
.v2-pilot .fine { margin-top: 20px; font-size: 14px; color: var(--v2-ink-3); }
.v2-pilot .fine a { font-weight: 700; color: var(--v2-ink); }
.v2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }

/* ── Buttons and links ── */
.v2-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--v2-ink); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 16px; padding: 17px 32px; border-radius: 999px;
  transition: background 0.2s;
}
.v2-btn:hover { background: var(--v2-accent); color: #fff; }
.v2-btn-quiet {
  font-weight: 600; font-size: 15px; color: var(--v2-ink-2);
  text-decoration: none; padding: 16px 10px; transition: color 0.2s;
}
.v2-btn-quiet:hover { color: var(--v2-ink); }

/* ── Footer ── */
.v2-footer { border-top: 1px solid var(--v2-line); background: var(--v2-sheet); }
.v2-footer-inner {
  max-width: 1240px; margin: 0 auto; padding: 40px;
  display: flex; flex-wrap: wrap; gap: 20px 48px;
  align-items: center; justify-content: space-between;
}
.v2-footer-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; color: var(--v2-ink); text-decoration: none; }
.v2-footer-links { display: flex; flex-wrap: wrap; gap: 28px; }
.v2-footer-links a { font-size: 14px; font-weight: 500; color: var(--v2-ink-3); text-decoration: none; transition: color 0.2s; }
.v2-footer-links a:hover { color: var(--v2-ink); }
.v2-footer-copy { font-size: 13.5px; color: var(--v2-ink-4); }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .v2-flow { grid-template-columns: 1fr; gap: 18px; }
  .v2-flow-link { height: 24px; width: 2px; margin: 0 auto;
    background: linear-gradient(180deg, #d9d9d4, oklch(0.7 0.12 262)); }
  .v2-flow-link.is-out { background: linear-gradient(180deg, oklch(0.7 0.12 262), #d9d9d4); }
  .v2-cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .v2-wrap, .v2-sheet section { padding-left: 20px; padding-right: 20px; }
  .v2-sheet section { padding-top: 72px; }
  .v2-dark { padding-bottom: 48px; }
  .v2-display { padding: 52px 0 28px; }
  .v2-display h2 { margin-top: 20px; }
  .v2-lede, .v2-pilot p { font-size: 16px; }
  .v2-beats { gap: 26px; margin-top: 36px; padding-top: 30px; }
  .v2-flow-return { flex-wrap: wrap; justify-content: center; }
  .v2-pilot-section { padding-top: 72px !important; padding-bottom: 72px !important; }
  .v2-footer-inner { padding: 28px 20px; gap: 16px 24px; }
  .v2-strip { padding-top: 44px !important; }
  .v2-panel, .v2-deploy, .v2-registry, .v2-pilot { padding-left: 24px; padding-right: 24px; }
  .v2-panel { padding-top: 32px; padding-bottom: 32px; }
  .v2-deploy, .v2-registry, .v2-pilot { padding-top: 48px; }
  .v2-registry, .v2-pilot { padding-bottom: 48px; }
  .v2-registry-grid, .v2-pilot-grid { gap: 32px; }
  .v2-browser-body { grid-template-columns: 1fr; }
  .v2-browser-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--v2-line-2); }
  .v2-browser-bar .url { margin: 0 12px; }
  .v2-kpis { grid-template-columns: repeat(2, 1fr); }
  .v2-card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .v2-card-head .law { white-space: normal; }
  .v2-slots { flex-wrap: wrap; }
  .v2-briefing-body { padding: 6px 18px; }
  .v2-row .v b { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-card { transition: none; }
  .v2-card:hover { transform: none; }
}

/* ── Nav: the design's floating pill ──────────────────────────── */
nav#nav { background: transparent !important; border-bottom: 0 !important; backdrop-filter: none !important; top: 16px; }
nav#nav.scrolled { background: transparent !important; border-bottom-color: transparent !important; backdrop-filter: none !important; }
nav#nav .nav-inner {
  display: flex !important; grid-template-columns: none !important;
  width: max-content; max-width: calc(100% - 40px); margin: 0 auto;
  height: auto; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(16,16,20,0.08); border-radius: 999px;
  padding: 8px 8px 8px 20px;
  box-shadow: 0 12px 40px -12px rgba(16,16,20,0.35);
}
nav#nav .nav-logo { color: var(--v2-ink); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; margin-right: 10px; }
/* The mark fills with --ink-1000 (#ECE8DD), a bone colour meant for the old
   dark nav. On the light pill that is bone-on-white, so the logo was present
   but invisible. Ink, to match the wordmark beside it. */
nav#nav .nav-logo .sun-mark::before { background: var(--v2-ink); }
/* .nav-links is itself a <nav>, so it picks up the page's base
   `nav { backdrop-filter: blur(0) }`. Any non-none value creates a backdrop
   root, and nested inside the translucent pill Chrome re-samples the backdrop
   and paints it opaque: that was the white block sitting behind the links. */
nav#nav .nav-links {
  display: flex; gap: 0;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  background: transparent !important;
}
nav#nav .nav-links a {
  font-size: 14px; font-weight: 500; color: var(--v2-ink-2);
  padding: 8px 12px; border-radius: 999px; text-transform: none; letter-spacing: 0;
  transition: background 0.2s, color 0.2s;
}
nav#nav .nav-links a:hover { background: #f1f1ef; color: var(--v2-ink); }
nav#nav .nav-actions { display: flex; align-items: center; gap: 8px; }
nav#nav #langToggle {
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em !important;
  color: var(--v2-ink-2) !important; background: transparent !important;
  border: 1px solid rgba(16,16,20,0.12) !important; border-radius: 999px !important;
  padding: 7px 12px !important; min-height: 0 !important;
}
nav#nav .btn-primary {
  background: var(--v2-ink); color: #fff; font-weight: 600; font-size: 14px;
  padding: 10px 20px; border-radius: 999px; white-space: nowrap;
  border: 0; transition: background 0.2s;
}
nav#nav .btn-primary:hover { background: var(--v2-accent); color: #fff; }

/* the theme toggle has no role in a design with one fixed palette */
nav#nav .theme-toggle { display: none !important; }
nav#nav .nav-hamburger span { background: var(--v2-ink); }
@media (max-width: 900px) {
  /* `width: auto` let the pill stretch the full fixed-nav width, leaving a
     dead white slab to the right of the hamburger. It must stay max-content
     so the pill hugs logo + CTA + hamburger. */
  nav#nav .nav-inner { width: max-content; padding: 8px 10px 8px 16px; }
  nav#nav .nav-links { display: none; }
}

/* ═══ PROTECTED COMPONENT ═══════════════════════════════════════
   "NOVA GOV · LGU INTELLIGENCE" is out of scope for this redesign.
   Avoiding its selectors is not enough: this sheet redefines --sans at
   :root, which the map inherits, so its family is pinned back here.
   Font ONLY. An earlier attempt also reset border-radius, which
   outranked the map's own rules and flattened all eight of its radii.
   ── */
#lgumap-root, #lgumap-root * {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ═══ HERO TOKENS ══════════════════════════════════════════════
   The hero's own CSS reads three --zen-* tokens that lived in the retired
   editorial layer and were not carried across with it. Undefined, they
   broke more than colour: .hero-type's width is
   `min(760px, calc(100% - var(--zen-pad) * 2))`, and an invalid calc drops
   the whole declaration, collapsing the copy column to 223px on a phone and
   wrapping the headline onto three lines. Same values as before.
   ── */
:root {
  --zen-bone: #ECE8DD;
  --zen-dim:  #A8A49A;
  --zen-pad:  clamp(20px, 5vw, 96px);
}

/* ═══ HERO CTA ═════════════════════════════════════════════════
   The hero is excluded from the v2 redesign, so its button keeps the
   treatment it had: a bone pill with ink text.

   It needs restating here because the rule went missing. `.cta-primary`
   was originally defined inside the page's HERO css block, which was
   replaced wholesale when the ASCII hero was ported. The Zentarai and
   editorial layers happened to define it, so nothing looked broken until
   that layer was retired for v2 and the button fell back to a bare <a>.
   Only stale mobile overrides were left, which set padding and width but
   no colour. Same values as before.
   ── */
.hero .cta-primary {
  display: inline-flex; align-items: center; gap: 8px;
  width: auto; min-height: 0;
  background: #ECE8DD; color: #0A0A0A;
  font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em;
  padding: 13px 26px; border-radius: 99px;
  text-decoration: none; border: 0; box-shadow: none;
  transition: background 0.25s, color 0.25s;
}
.hero .cta-primary:hover { background: #fff; color: #0A0A0A; transform: none; }

/* ── Mobile nav ────────────────────────────────────────────────
   Two problems at phone width. The pill measured 62px tall, because the
   hamburger is a 44px touch target plus 8px of pill padding either side,
   which is desktop-scaled for a 375px screen. And the hero copy is
   vertically centred, so on a short viewport its eyebrow rose into the
   pill: nav bottom 78px against eyebrow top 66px, a 12px overlap.

   The hamburger stays at a 38px box with the same 20px glyph, still well
   over the 24px minimum touch target once the pill's padding is counted.
   The hero is anchored below the pill instead of centred, keeping its
   horizontal centring and its scroll-out translate. */
@media (max-width: 760px) {
  nav#nav .nav-inner { padding: 6px 8px 6px 14px; gap: 6px; }
  nav#nav .nav-hamburger { width: 38px; height: 38px; }
  nav#nav .btn-primary { padding: 9px 16px; font-size: 13.5px; }
  nav#nav .nav-logo { font-size: 14.5px; margin-right: 4px; }
  nav#nav .nav-logo .sun-mark { width: 20px; height: 20px; }

  .hero-type { top: 96px; translate: -50% calc(0px - var(--out) * 7vh); }

  /* The panel's base rule anchors it at top: 64px and centres the links in
     whatever is left, which tucked the first link under the floating pill
     (bottom edge ~70px) and left a half-screen hole above "Platform". Start
     it below the pill and stack from the top. */
  #mobile-menu { top: 82px; justify-content: flex-start; padding: 8px 20px 40px; }
}

/* The nav/hero collision is driven by viewport HEIGHT, not width, so the
   max-width:760px rule above only fixed phones. The hero copy is centred at
   top:32%, and its block is ~370px tall on desktop, so its top edge sits at
   0.32H - 185. That clears the nav (bottom 77px) only when H >= ~869px —
   meaning every 720p and 800p laptop overlapped too. Anchor below the nav
   whenever the viewport is short, at any width. */
@media (max-height: 900px) {
  .hero-type { top: 96px; translate: -50% calc(0px - var(--out) * 7vh); }
}

/* ── Hero art on mobile ────────────────────────────────────────
   The drawing is landscape (240:151 in character cells). At the desktop
   scale of 100vw/240 it fills only 29% of a phone's height, which is the
   dead space below the hero. 100vw/130 brings it to ~54% of the height at
   1.6x the viewport width: the fingers and both wrists read, and the crop
   is horizontal only, which is what desktop already does. 100vw/110 was
   too close in — the hands became unreadable slabs at the screen edges.

   Vertical anchor: the copy block ends around 50% of a phone viewport, so
   the art is centred at 62% instead of 50%, which keeps the contact point
   in open space below the CTA rather than behind the disclaimer.

   The contact point is derived, not eyeballed: the fingertips meet on row
   71 of 146, two rows above centre, so the offset is
   2 x font-size x line-height(1.033). At 100vw/240 that is the 0.861vw the
   desktop rule uses; at 100vw/130 it becomes 1.589vw. .shock sits on a cell
   twice the hands', so its divisor halves with them. */
@media (max-width: 760px) {
  .hand  { font-size: calc(100vw / 130); top: 62%; }
  .shock { font-size: calc(100vw / 65); }
  .bang, .wash, .shock { top: calc(62% - 1.589vw); }
}