:root {
  --navy: #06172f;
  --navy-2: #0a2242;
  --navy-3: #0f2e57;
  --gold: #f0b91b;
  --gold-2: #ffd45f;
  --white: #f7f4ea;
  --muted: rgba(247, 244, 234, .68);
  --line: rgba(240, 185, 27, .22);
  --slide-pad: clamp(28px, 6vw, 96px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--navy); }
body {
  color: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.02em;
}
button, a { font: inherit; }
button { color: inherit; }

.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.noise { position: absolute; inset: 0; opacity: .16; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.glow { position: absolute; width: 56vw; height: 56vw; border-radius: 50%; filter: blur(80px); opacity: .14; }
.glow-a { background: #1b67b3; top: -26vw; left: -12vw; animation: driftA 16s ease-in-out infinite alternate; }
.glow-b { background: #f0b91b; right: -30vw; bottom: -38vw; animation: driftB 20s ease-in-out infinite alternate; opacity: .08; }
@keyframes driftA { to { transform: translate(12vw, 9vw) scale(1.1); } }
@keyframes driftB { to { transform: translate(-10vw, -8vw) scale(.94); } }
.stars { position: absolute; inset: 0; }
.star-particle { position: absolute; width: 2px; height: 2px; background: rgba(255,255,255,.55); border-radius: 50%; animation: twinkle var(--speed) ease-in-out infinite alternate; opacity: var(--opacity); }
@keyframes twinkle { to { opacity: .05; transform: scale(.35); } }

.topbar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { display: flex; gap: 10px; align-items: center; color: var(--white); text-decoration: none; font-size: 13px; letter-spacing: .11em; font-weight: 750; }
.brand b { color: var(--gold); }
.brand-star { color: var(--gold); font-size: 18px; filter: drop-shadow(0 0 10px rgba(240,185,27,.45)); }
.topbar-right { display: flex; gap: 26px; align-items: center; }
.slide-count { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .18em; color: rgba(255,255,255,.55); }
.slide-count b { color: var(--white); }
.slide-count i { width: 34px; height: 1px; background: rgba(255,255,255,.24); }
.menu-button { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.045); border-radius: 999px; padding: 9px 14px; font-size: 10px; letter-spacing: .18em; cursor: pointer; transition: .25s ease; }
.menu-button:hover { border-color: var(--gold); background: rgba(240,185,27,.08); }

.menu { position: fixed; z-index: 50; inset: 0 0 0 auto; width: min(480px, 100%); background: rgba(4,18,38,.97); backdrop-filter: blur(18px); transform: translateX(100%); transition: transform .6s cubic-bezier(.7,0,.1,1); border-left: 1px solid rgba(240,185,27,.2); padding: 90px 44px 44px; display: flex; flex-direction: column; justify-content: space-between; }
.menu.open { transform: translateX(0); }
.menu-close { position: absolute; top: 24px; right: 24px; border: 0; background: transparent; font-size: 40px; line-height: 1; cursor: pointer; opacity: .6; }
.menu nav { display: grid; gap: 7px; }
.menu nav button { text-align: left; border: 0; background: transparent; padding: 16px 0; color: var(--white); font-size: clamp(28px, 5vw, 54px); font-weight: 800; letter-spacing: -.05em; cursor: pointer; opacity: .72; transition: .2s; }
.menu nav button:hover { opacity: 1; color: var(--gold); transform: translateX(8px); }
.menu-tagline { color: var(--muted); font-size: 15px; line-height: 1.7; text-transform: uppercase; letter-spacing: .09em; }

.viewport { position: relative; z-index: 2; width: 100%; height: 100%; outline: 0; }
.track { width: 500vw; height: 100%; display: flex; will-change: transform; transform: translateX(0); transition: none; backface-visibility: hidden; transform-style: preserve-3d; }
.slide { position: relative; width: 100vw; height: 100%; flex: 0 0 100vw; padding: 100px var(--slide-pad) 72px; overflow: hidden; }
.slide::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.025), transparent 32%, transparent 68%, rgba(240,185,27,.025)); }

.eyebrow, .section-kicker { display: flex; gap: 10px; align-items: center; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow span { width: 22px; height: 1px; background: var(--gold); }
.gold { color: var(--gold); text-shadow: 0 0 32px rgba(240,185,27,.13); }
.cta, .ghost { border-radius: 999px; padding: 15px 20px; cursor: pointer; transition: .25s; font-weight: 750; font-size: 13px; letter-spacing: .01em; }
.cta { border: 1px solid var(--gold); background: var(--gold); color: #071831; box-shadow: 0 10px 35px rgba(240,185,27,.15); }
.cta span { margin-left: 12px; }
.cta:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(240,185,27,.24); }
.ghost { border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--white); }
.ghost:hover { border-color: rgba(255,255,255,.45); transform: translateY(-3px); }

.hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.65fr); gap: clamp(30px, 7vw, 110px); align-items: center; }
.hero-copy { max-width: 760px; }
.hero h1 { margin: 18px 0 24px; font-size: clamp(68px, 10vw, 148px); line-height: .76; letter-spacing: -.075em; text-transform: uppercase; font-weight: 950; }
.hero h1 span { display: block; }
.hero p { max-width: 650px; margin: 0; color: var(--muted); font-size: clamp(16px, 1.6vw, 22px); line-height: 1.55; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.poster-wrap { justify-self: center; position: relative; width: min(31vw, 390px); aspect-ratio: .66; perspective: 1200px; transform-style: preserve-3d; transition: transform .18s ease-out; }
.poster-wrap::before { content: ""; position: absolute; inset: 9% -8% -7% 8%; border: 1px solid rgba(240,185,27,.28); z-index: -1; transform: translateZ(-20px); }
.poster-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 34px 90px rgba(0,0,0,.45); }
.poster-glow { position: absolute; inset: 18%; background: var(--gold); filter: blur(65px); opacity: .13; z-index: -2; }
.poster-badge { position: absolute; left: -28px; bottom: 42px; padding: 12px 15px; background: var(--gold); color: var(--navy); font-size: 10px; font-weight: 900; letter-spacing: .16em; transform: translateZ(30px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.scroll-cue { position: absolute; bottom: 28px; left: var(--slide-pad); font-size: 9px; letter-spacing: .22em; color: rgba(255,255,255,.34); }
.scroll-cue span { color: var(--gold); display: inline-block; margin-left: 10px; animation: nudge 1.5s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(7px); } }

.priorities { display: grid; grid-template-rows: auto 1fr; align-items: center; }
.priority-heading { position: absolute; top: 135px; left: var(--slide-pad); max-width: 760px; }
.priority-heading h2, .towns h2, .build h2 { margin: 10px 0 18px; font-size: clamp(48px, 7.5vw, 112px); line-height: .88; letter-spacing: -.06em; text-transform: uppercase; }
.priority-heading p, .towns-copy > p, .build-copy > p { margin: 0; color: var(--muted); max-width: 610px; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.55; }
.priority-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-self: end; margin-top: 315px; }
.priority-card { position: relative; min-height: 280px; padding: 28px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.018)); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: .35s; }
.priority-card::after { content: attr(data-index); position: absolute; right: -4px; top: -30px; font-size: 160px; font-weight: 950; color: rgba(255,255,255,.027); letter-spacing: -.09em; }
.priority-card:hover { transform: translateY(-10px); border-color: rgba(240,185,27,.45); background: linear-gradient(160deg, rgba(240,185,27,.08), rgba(255,255,255,.02)); }
.priority-card small { color: var(--gold); font-weight: 900; letter-spacing: .18em; }
.priority-card h3 { margin: 8px 0 8px; font-size: clamp(22px, 2.5vw, 38px); line-height: 1; letter-spacing: -.04em; }
.priority-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.icon { position: relative; width: 74px; height: 74px; margin-bottom: 28px; }
.sprout-svg, .hammer-svg { width: 74px; height: 74px; overflow: visible; filter: drop-shadow(0 7px 16px rgba(0,0,0,.16)); }
.sprout-base, .sprout-stem { stroke: var(--gold); stroke-width: 6; stroke-linecap: round; fill: none; }
.sprout-leaf { fill: var(--gold); }
.town-icon { display: flex; align-items: end; gap: 4px; }
.town-icon i { display: block; width: 12px; background: var(--gold); border-radius: 2px 2px 0 0; }
.town-icon i:nth-child(1) { height: 33px; } .town-icon i:nth-child(2) { height: 51px; } .town-icon i:nth-child(3) { height: 41px; } .town-icon i:nth-child(4) { height: 63px; } .town-icon i:nth-child(5) { height: 28px; }

.towns { background: radial-gradient(circle at 73% 48%, rgba(30,84,145,.22), transparent 28%); }
.map-grid, .blueprint-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to right, transparent 6%, #000 32%, #000 94%); }
.towns-copy { position: relative; z-index: 4; width: min(52vw, 760px); top: 50%; transform: translateY(-50%); }
.town-stats { display: flex; gap: 42px; margin-top: 34px; }
.town-stats div { display: grid; gap: 4px; }
.town-stats b { color: var(--gold); font-size: 25px; }
.town-stats span { color: rgba(255,255,255,.48); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
.route { position: absolute; height: 1px; background: linear-gradient(90deg, rgba(240,185,27,0), rgba(240,185,27,.7), rgba(240,185,27,0)); transform-origin: left center; opacity: .28; }
.route::after { content: ""; position: absolute; inset: -1px auto -1px 0; width: 18%; background: var(--gold); filter: blur(1px); animation: routeMove 3.8s linear infinite; }
.route-1 { width: 42vw; right: 5vw; top: 37%; transform: rotate(-12deg); }
.route-2 { width: 34vw; right: 10vw; top: 58%; transform: rotate(9deg); }
.route-3 { width: 28vw; right: 4vw; top: 71%; transform: rotate(-5deg); }
@keyframes routeMove { from { left: -18%; } to { left: 100%; } }
.town-nodes { position: absolute; inset: 0; }
.node { position: absolute; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.node i { width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 8px rgba(240,185,27,.07), 0 0 28px rgba(240,185,27,.35); animation: pulseNode 2.5s ease-in-out infinite; }
.node b { font-weight: 700; }
.n1 { right: 15%; top: 23%; } .n2 { right: 35%; top: 41%; } .n3 { right: 12%; top: 54%; } .n4 { right: 25%; top: 70%; } .n5 { right: 8%; top: 80%; }
@keyframes pulseNode { 50% { transform: scale(.7); box-shadow: 0 0 0 13px rgba(240,185,27,.03), 0 0 18px rgba(240,185,27,.22); } }

.build { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6vw; }
.build-visual { position: relative; height: 64vh; border: 1px solid rgba(255,255,255,.1); overflow: hidden; background: rgba(255,255,255,.018); }
.build-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(6,23,47,.65)); }
.construction-word { position: absolute; left: -3%; bottom: 4%; font-weight: 950; font-size: clamp(100px, 19vw, 310px); line-height: .7; color: rgba(255,255,255,.055); letter-spacing: -.09em; }
.beam { position: absolute; height: 16px; background: var(--gold); box-shadow: 0 0 28px rgba(240,185,27,.12); transform-origin: left; }
.beam::before, .beam::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); top: 5px; }
.beam::before { left: 9px; } .beam::after { right: 9px; }
.beam-a { width: 62%; top: 28%; left: 18%; transform: rotate(-9deg); }
.beam-b { width: 50%; top: 48%; left: 36%; transform: rotate(22deg); }
.beam-c { width: 42%; top: 68%; left: 13%; transform: rotate(8deg); }
.build-copy { position: relative; z-index: 3; }
.manifesto { display: grid; gap: 10px; margin: 26px 0 32px; }
.manifesto span { padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.11); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.build footer { position: absolute; bottom: 22px; left: var(--slide-pad); right: var(--slide-pad); display: flex; justify-content: space-between; align-items: center; padding-top: 13px; border-top: 1px solid rgba(240,185,27,.2); font-size: 9px; color: rgba(255,255,255,.46); letter-spacing: .18em; }
.footer-star { color: var(--gold); font-size: 14px; }

.rail { position: fixed; z-index: 20; left: 28px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.rail-dot { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.24); cursor: pointer; position: relative; font-size: 8px; }
.rail-dot::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: currentColor; transition: .25s; }
.rail-dot span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); opacity: 0; transition: .25s; }
.rail-dot.active { color: var(--gold); }
.rail-dot.active::before { width: 20px; }
.rail-dot:hover span { opacity: 1; }

.next-button { position: fixed; z-index: 20; right: 28px; bottom: 24px; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.035); color: var(--white); cursor: pointer; overflow: hidden; transition: .25s; }
.next-button::before { content: ""; position: absolute; inset: 0; background: var(--gold); transform: translateY(105%); transition: .3s cubic-bezier(.7,0,.2,1); }
.next-button span { position: relative; z-index: 1; font-size: 22px; }
.next-button:hover { color: var(--navy); border-color: var(--gold); transform: scale(1.06); }
.next-button:hover::before { transform: translateY(0); }

.reveal-block, .reveal-card { opacity: 0; transform: translateY(24px); transition: opacity .8s .22s ease, transform .8s .22s cubic-bezier(.2,.7,.2,1); }
.slide.active .reveal-block, .slide.active .reveal-card { opacity: 1; transform: none; }
.slide.active .reveal-card:nth-child(2) { transition-delay: .3s; }
.slide.active .priority-card:nth-child(2) { transition-delay: .36s; }
.slide.active .priority-card:nth-child(3) { transition-delay: .48s; }

@media (max-width: 900px) {
  :root { --slide-pad: 26px; }
  .topbar { padding: 20px 18px; }
  .slide-count { display: none; }
  .rail { display: none; }
  .slide { padding-top: 88px; padding-bottom: 72px; }
  .hero { grid-template-columns: 1fr; align-content: center; gap: 34px; }
  .hero h1 { font-size: clamp(64px, 20vw, 108px); }
  .hero p { font-size: 16px; }
  .poster-wrap { position: absolute; width: 42vw; max-width: 230px; right: -5vw; bottom: 8vh; opacity: .24; filter: saturate(.85); transform: rotate(6deg) !important; pointer-events: none; }
  .poster-badge { display: none; }
  .hero-copy { position: relative; z-index: 3; }
  .hero-actions { flex-wrap: wrap; }

  .priority-heading { top: 105px; left: var(--slide-pad); right: var(--slide-pad); }
  .priority-heading h2, .towns h2, .build h2 { font-size: clamp(46px, 13vw, 78px); }
  .priority-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 280px; align-self: stretch; overflow: auto; padding-bottom: 28px; scrollbar-width: none; }
  .priority-grid::-webkit-scrollbar { display: none; }
  .priority-card { min-height: 150px; padding: 18px; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; }
  .priority-card .icon { margin: 0; transform: scale(.72); transform-origin: left center; }
  .priority-card h3 { font-size: 25px; }
  .priority-card p { font-size: 12px; }

  .towns-copy { width: 100%; top: 47%; }
  .town-stats { gap: 18px; flex-wrap: wrap; }
  .town-nodes { opacity: .28; }
  .node b { display: none; }
  .n1 { right: 10%; top: 22%; } .n2 { right: 28%; top: 38%; } .n3 { right: 7%; top: 57%; } .n4 { right: 20%; top: 75%; } .n5 { right: 6%; top: 84%; }

  .build { grid-template-columns: 1fr; align-content: center; }
  .build-visual { position: absolute; inset: 0; height: auto; opacity: .18; border: 0; }
  .build-copy { max-width: 700px; }
  .build footer { left: 26px; right: 80px; }
  .next-button { right: 18px; bottom: 18px; width: 48px; height: 48px; }
  .scroll-cue { left: 26px; }
}

@media (max-height: 700px) and (min-width: 901px) {
  .slide { padding-top: 82px; padding-bottom: 45px; }
  .priority-heading { top: 95px; }
  .priority-grid { margin-top: 240px; }
  .priority-card { min-height: 225px; }
  .poster-wrap { width: min(26vw, 300px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .track, .reveal-block, .reveal-card { transition-duration: .001ms !important; }
}

/* Mobile layout hardening -------------------------------------------------- */
@supports (height: 100dvh) {
  html, body, .viewport, .track, .slide { height: 100dvh; }
}

@media (max-width: 900px) {
  :root {
    --slide-pad: 20px;
    --mobile-top: calc(74px + env(safe-area-inset-top, 0px));
    --mobile-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  html, body {
    min-height: 100%;
    min-height: -webkit-fill-available;
  }

  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .viewport,
  .track,
  .slide {
    height: var(--app-height, 100dvh);
    min-height: 0;
  }

  .viewport,
  .slide {
    touch-action: pan-y;
  }

  button,
  a {
    touch-action: manipulation;
  }

  .topbar {
    top: 0;
    min-height: var(--mobile-top);
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 20px;
    align-items: flex-start;
    background: linear-gradient(180deg, rgba(6,23,47,.96) 0%, rgba(6,23,47,.78) 62%, rgba(6,23,47,0) 100%);
  }

  .brand {
    gap: 7px;
    max-width: calc(100vw - 100px);
    font-size: 10.5px;
    letter-spacing: .075em;
    line-height: 1.1;
    white-space: nowrap;
  }

  .brand-star { font-size: 15px; }

  .menu-button {
    min-width: 62px;
    min-height: 38px;
    padding: 9px 11px;
    background: rgba(6,23,47,.64);
    border-color: rgba(255,255,255,.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .menu {
    width: 100%;
    padding: calc(80px + env(safe-area-inset-top, 0px)) 22px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .menu-close {
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 16px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.055);
    font-size: 34px;
    opacity: .78;
  }

  .menu nav { gap: 2px; }
  .menu nav button {
    padding: 13px 0;
    font-size: clamp(27px, 8vw, 38px);
    line-height: 1.02;
  }
  .menu-tagline {
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid rgba(240,185,27,.2);
    font-size: 12px;
    line-height: 1.75;
  }

  .slide {
    padding: var(--mobile-top) var(--slide-pad) var(--mobile-bottom);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .slide::-webkit-scrollbar { display: none; }

  .eyebrow,
  .section-kicker {
    gap: 8px;
    font-size: 9px;
    letter-spacing: .15em;
    line-height: 1.35;
  }

  .cta,
  .ghost {
    min-height: 48px;
    padding: 13px 17px;
    font-size: 12.5px;
  }

  /* Home */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
  }

  .hero-copy {
    width: 100%;
    max-width: 560px;
    margin: auto 0;
  }

  .hero h1 {
    margin: 14px 0 20px;
    font-size: clamp(52px, 17vw, 70px);
    line-height: .84;
    letter-spacing: -.065em;
  }

  .hero p {
    max-width: 520px;
    font-size: 15px;
    line-height: 1.52;
    padding-right: 2px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 25px;
    width: min(100%, 420px);
  }

  .hero-actions .cta,
  .hero-actions .ghost {
    width: 100%;
    text-align: center;
  }

  .poster-wrap {
    width: min(52vw, 190px);
    max-width: none;
    right: -42px;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    opacity: .12;
    filter: saturate(.7) contrast(1.05);
    transform: rotate(7deg) !important;
    mask-image: linear-gradient(135deg, rgba(0,0,0,.95), rgba(0,0,0,.14));
    -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,.95), rgba(0,0,0,.14));
  }

  .poster-wrap::before { display: none; }
  .poster-wrap img { box-shadow: none; }

  .scroll-cue {
    left: var(--slide-pad);
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    font-size: 8px;
    letter-spacing: .18em;
  }

  /* Priorities: remove the fragile absolute/margin-based desktop layout. */
  .priorities {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .priority-heading {
    position: static;
    max-width: 620px;
    margin-top: 12px;
  }

  .priority-heading h2,
  .towns h2,
  .build h2 {
    margin: 9px 0 14px;
    font-size: clamp(39px, 11.8vw, 56px);
    line-height: .92;
    letter-spacing: -.055em;
  }

  .priority-heading p,
  .towns-copy > p,
  .build-copy > p {
    font-size: 14px;
    line-height: 1.5;
  }

  .priority-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0 0 6px;
    align-self: auto;
    overflow: visible;
  }

  .priority-card {
    min-height: 0;
    padding: 17px 16px;
    grid-template-columns: 78px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    border-radius: 3px;
  }

  .priority-card::after {
    right: -2px;
    top: -14px;
    font-size: 92px;
  }

  .priority-card .icon {
    width: 70px;
    height: 70px;
    margin: 0;
    transform: none;
    display: grid;
    place-items: center;
    justify-self: center;
    align-self: center;
  }

  .priority-card .sprout-svg,
  .priority-card .hammer-svg {
    width: 66px;
    height: 66px;
  }

  .priority-card .town-icon {
    width: 66px;
    height: 66px;
    justify-content: center;
    gap: 4px;
  }

  .priority-card .town-icon i { width: 9px; }
  .priority-card .town-icon i:nth-child(1) { height: 30px; }
  .priority-card .town-icon i:nth-child(2) { height: 46px; }
  .priority-card .town-icon i:nth-child(3) { height: 38px; }
  .priority-card .town-icon i:nth-child(4) { height: 56px; }
  .priority-card .town-icon i:nth-child(5) { height: 26px; }

  .priority-card small { font-size: 9px; }
  .priority-card h3 {
    margin: 4px 0 6px;
    font-size: clamp(21px, 6vw, 26px);
    line-height: 1.02;
  }
  .priority-card p {
    font-size: 12.5px;
    line-height: 1.42;
    padding-right: 3px;
  }

  /* Every Town */
  .towns {
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 78% 34%, rgba(30,84,145,.28), transparent 40%);
  }

  .towns-copy {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 600px;
    margin: auto 0;
    transform: none;
  }

  .towns-copy > p { max-width: 520px; }

  .town-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 0;
    margin-top: 26px;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  .town-stats div {
    min-width: 0;
    gap: 3px;
    padding: 0 10px;
    border-left: 1px solid rgba(255,255,255,.09);
  }
  .town-stats div:first-child { padding-left: 0; border-left: 0; }
  .town-stats div:last-child { padding-right: 0; }
  .town-stats b { font-size: 20px; }
  .town-stats span {
    font-size: 8px;
    line-height: 1.35;
    letter-spacing: .09em;
  }

  .map-grid {
    background-size: 34px 34px;
    opacity: .75;
    mask-image: linear-gradient(to bottom, transparent 3%, #000 20%, #000 95%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 20%, #000 95%);
  }

  .town-nodes { opacity: .20; }
  .node i {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 6px rgba(240,185,27,.06), 0 0 22px rgba(240,185,27,.28);
  }
  .route { opacity: .18; }
  .route-1 { width: 70vw; right: -14vw; top: 31%; }
  .route-2 { width: 68vw; right: -18vw; top: 58%; }
  .route-3 { width: 58vw; right: -10vw; top: 76%; }

  /* Build */
  .build {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
  }

  .build-visual {
    inset: 0;
    height: auto;
    opacity: .14;
  }

  .blueprint-grid { background-size: 34px 34px; }
  .construction-word {
    left: -7%;
    bottom: 11%;
    font-size: clamp(110px, 40vw, 170px);
  }

  .build-copy {
    width: 100%;
    max-width: 600px;
    margin: auto 0;
  }

  .manifesto {
    gap: 8px;
    margin: 22px 0 25px;
  }
  .manifesto span {
    padding-bottom: 9px;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: .055em;
  }

  .build-copy .cta {
    width: min(100%, 340px);
  }

  .build footer {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 32px;
    padding: 14px 58px 0 0;
    font-size: 8px;
    line-height: 1.4;
    letter-spacing: .14em;
  }

  .next-button {
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 50px;
    height: 50px;
    background: rgba(6,23,47,.90);
    border-color: rgba(240,185,27,.45);
    box-shadow: 0 10px 28px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.03) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .next-button:active {
    transform: scale(.94);
    border-color: var(--gold);
  }
}

@media (max-width: 370px) {
  :root { --slide-pad: 17px; }
  .brand { font-size: 9.4px; letter-spacing: .06em; }
  .brand-star { font-size: 14px; }
  .menu-button { min-width: 57px; padding-inline: 9px; }
  .hero h1 { font-size: clamp(49px, 16.5vw, 60px); }
  .hero p { font-size: 14px; }
  .priority-heading h2,
  .towns h2,
  .build h2 { font-size: clamp(36px, 11vw, 44px); }
  .priority-card { grid-template-columns: 66px minmax(0,1fr); padding: 14px 13px; gap: 11px; }
  .priority-card .icon { width: 60px; height: 60px; transform: none; }
  .priority-card .sprout-svg,
  .priority-card .hammer-svg,
  .priority-card .town-icon { width: 56px; height: 56px; }
  .priority-card p { font-size: 12px; }
  .town-stats div { padding-inline: 7px; }
  .town-stats span { font-size: 7.5px; }
}

@media (max-width: 900px) and (max-height: 700px) {
  :root {
    --mobile-top: calc(66px + env(safe-area-inset-top, 0px));
    --mobile-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .topbar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .hero { justify-content: flex-start; }
  .hero h1 { margin-top: 10px; font-size: clamp(48px, 15vw, 62px); }
  .hero p { font-size: 14px; }
  .hero-actions { margin-top: 20px; }
  .priority-grid { margin-top: 18px; }
  .priority-card { padding-top: 13px; padding-bottom: 13px; }
}

@media (max-width: 900px) and (hover: none) {
  .cta:hover,
  .ghost:hover,
  .priority-card:hover,
  .next-button:hover,
  .menu-button:hover,
  .menu nav button:hover {
    transform: none;
  }
  .priority-card:hover {
    border-color: rgba(255,255,255,.12);
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.018));
  }
  .next-button:hover {
    color: var(--white);
    border-color: rgba(240,185,27,.45);
  }
  .next-button:hover::before { transform: translateY(105%); }
}


/* Motion pass ------------------------------------------------------------- */
.transition-fx {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}
.transition-line {
  position: absolute;
  left: -28vw;
  top: 50%;
  width: 26vw;
  height: 2px;
  transform: translateY(-50%) skewX(-28deg);
  background: linear-gradient(90deg, transparent, var(--gold-2), #fff8ce, var(--gold), transparent);
  box-shadow: 0 0 26px rgba(240,185,27,.5), 0 0 70px rgba(240,185,27,.22);
}
.transition-star {
  position: absolute;
  top: 50%;
  left: -8vw;
  transform: translate(-50%,-50%) rotate(-20deg) scale(.3);
  color: var(--gold);
  font-size: 20px;
  text-shadow: 0 0 24px rgba(240,185,27,.8);
}
.transition-fx.fire { opacity: 1; }
.transition-fx.fire .transition-line { animation: transitionSweep .72s cubic-bezier(.2,.8,.1,1) both; }
.transition-fx.fire .transition-star { animation: transitionStar .72s cubic-bezier(.2,.8,.1,1) both; }
.transition-fx.reverse .transition-line { animation-direction: reverse; }
.transition-fx.reverse .transition-star { animation-direction: reverse; }
@keyframes transitionSweep {
  0% { left: -28vw; width: 20vw; opacity: 0; }
  15% { opacity: 1; }
  55% { width: 44vw; }
  100% { left: 108vw; width: 18vw; opacity: 0; }
}
@keyframes transitionStar {
  0% { left: -8vw; opacity: 0; transform: translate(-50%,-50%) rotate(-90deg) scale(.2); }
  20% { opacity: 1; }
  100% { left: 108vw; opacity: 0; transform: translate(-50%,-50%) rotate(310deg) scale(1.25); }
}

.slide::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 38%, rgba(255,255,255,.025) 46%, rgba(240,185,27,.045) 50%, transparent 59%);
  transform: translateX(-110%);
  opacity: 0;
}
.slide.active::after { animation: slideLightSweep 1.2s .06s cubic-bezier(.2,.75,.2,1) both; }
@keyframes slideLightSweep {
  0% { transform: translateX(-110%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(110%); opacity: 0; }
}

/* Hero motion */
.hero h1 > span { display: block; overflow: hidden; transform-origin: left center; }
.slide.active.hero h1 > span:nth-child(1) { animation: heroWordIn .72s .16s cubic-bezier(.16,.8,.22,1) both; }
.slide.active.hero h1 > span:nth-child(2) { animation: heroWordIn .72s .24s cubic-bezier(.16,.8,.22,1) both; }
.slide.active.hero h1 > span:nth-child(3) { animation: heroWordIn .72s .32s cubic-bezier(.16,.8,.22,1) both, goldBreath 3.6s 1.2s ease-in-out infinite; }
@keyframes heroWordIn {
  from { opacity: 0; transform: translateX(-34px) skewX(-5deg); filter: blur(7px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes goldBreath {
  50% { text-shadow: 0 0 28px rgba(240,185,27,.23); }
}
.poster-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.22) 49%, transparent 63%);
  transform: translateX(-150%);
  mix-blend-mode: screen;
}
.slide.active .poster-wrap::after { animation: posterShine 4.8s 1.05s ease-in-out infinite; }
.slide.active .poster-glow { animation: posterGlowPulse 3.8s ease-in-out infinite; }
@keyframes posterShine { 0%, 58% { transform: translateX(-150%); } 78%,100% { transform: translateX(150%); } }
@keyframes posterGlowPulse { 50% { opacity: .23; transform: scale(1.12); } }

.speed-lines { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: .26; }
.speed-lines i { position: absolute; left: -34%; width: 24%; height: 1px; background: linear-gradient(90deg, transparent, rgba(240,185,27,.78), transparent); }
.speed-lines i:nth-child(1) { top: 22%; animation: speedLine 6.2s 0s linear infinite; }
.speed-lines i:nth-child(2) { top: 68%; width: 17%; animation: speedLine 7.6s 1.8s linear infinite; opacity: .55; }
.speed-lines i:nth-child(3) { top: 45%; width: 11%; animation: speedLine 5.3s 3.1s linear infinite; opacity: .35; }
@keyframes speedLine { to { left: 112%; } }

/* Priority cards */
.priority-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.08) 46%, rgba(240,185,27,.11) 50%, transparent 74%);
  transform: translateX(-135%);
}
.priority-card > * { position: relative; z-index: 1; }
.slide.active .priority-card:nth-child(1)::before { animation: cardShine 5.2s 1.0s ease-in-out infinite; }
.slide.active .priority-card:nth-child(2)::before { animation: cardShine 5.2s 1.35s ease-in-out infinite; }
.slide.active .priority-card:nth-child(3)::before { animation: cardShine 5.2s 1.7s ease-in-out infinite; }
@keyframes cardShine { 0%,65% { transform: translateX(-135%); } 90%,100% { transform: translateX(135%); } }

.slide.active .sprout-icon { animation: iconFloat 3.2s ease-in-out infinite; }
.slide.active .sprout-left { transform-origin: 42px 43px; animation: sproutLeftWave 2.2s .1s ease-in-out infinite alternate; }
.slide.active .sprout-right { transform-origin: 45px 37px; animation: sproutRightWave 2.5s .25s ease-in-out infinite alternate; }
.slide.active .town-icon i { transform-origin: bottom; animation: townRise 1.1s cubic-bezier(.2,.8,.2,1) both; }
.slide.active .town-icon i:nth-child(1) { animation-delay: .36s; }
.slide.active .town-icon i:nth-child(2) { animation-delay: .43s; }
.slide.active .town-icon i:nth-child(3) { animation-delay: .50s; }
.slide.active .town-icon i:nth-child(4) { animation-delay: .57s; }
.slide.active .town-icon i:nth-child(5) { animation-delay: .64s; }
@keyframes iconFloat { 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes sproutLeftWave { to { transform: rotate(-8deg) translate(-1px,-1px); } }
@keyframes sproutRightWave { to { transform: rotate(8deg) translate(1px,-1px); } }
@keyframes townRise { from { transform: scaleY(.05); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }

/* Clear hammer icon */
.build-icon { display: grid; place-items: center; overflow: visible; }
.hammer-head, .hammer-claw, .hammer-handle { fill: var(--gold); }
.hammer-shine { fill: var(--gold-2); opacity: .8; }
.hammer-shape { transform-origin: 40px 40px; }
.slide.active .hammer-shape { animation: hammerStrike 2.55s .72s cubic-bezier(.5,.05,.2,1) infinite; }
.slide.active .hammer-svg { animation: hammerGlow 2.55s .72s ease-in-out infinite; }
@keyframes hammerStrike {
  0%, 60%, 100% { transform: rotate(0deg) translateY(0); }
  66% { transform: rotate(-12deg) translate(-1px,-3px); }
  74% { transform: rotate(6deg) translate(1px,2px); }
  81% { transform: rotate(-1deg); }
}
@keyframes hammerGlow { 74% { filter: drop-shadow(0 0 18px rgba(240,185,27,.5)); } }

/* Town network activity */
.slide.active .town-stats div { animation: statPop .65s cubic-bezier(.2,.8,.2,1) both; }
.slide.active .town-stats div:nth-child(1) { animation-delay: .36s; }
.slide.active .town-stats div:nth-child(2) { animation-delay: .46s; }
.slide.active .town-stats div:nth-child(3) { animation-delay: .56s; }
.slide.active .node { animation: nodeArrive .55s cubic-bezier(.2,.8,.2,1) both; }
.slide.active .n1 { animation-delay: .28s; } .slide.active .n2 { animation-delay: .38s; } .slide.active .n3 { animation-delay: .48s; } .slide.active .n4 { animation-delay: .58s; } .slide.active .n5 { animation-delay: .68s; }
@keyframes statPop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nodeArrive { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.map-grid { animation: gridDrift 18s linear infinite; }
@keyframes gridDrift { to { background-position: 54px 54px; } }

/* Build scene */
.build-visual::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -20%;
  left: 50%;
  width: 1px;
  height: 140%;
  background: linear-gradient(transparent, rgba(240,185,27,.45), transparent);
  opacity: 0;
  transform: rotate(19deg);
}
.slide.active .build-visual::before { animation: blueprintScan 3.8s .4s ease-in-out infinite; }
.slide.active .beam-a { animation: beamBuildA .8s .28s cubic-bezier(.15,.85,.2,1) both; }
.slide.active .beam-b { animation: beamBuildB .8s .42s cubic-bezier(.15,.85,.2,1) both; }
.slide.active .beam-c { animation: beamBuildC .8s .56s cubic-bezier(.15,.85,.2,1) both; }
.slide.active .construction-word { animation: constructionPulse 4.5s 1s ease-in-out infinite; }
@keyframes blueprintScan { 0%,100% { left: 0%; opacity: 0; } 15% { opacity: .8; } 75% { opacity: .4; } 90% { left: 100%; opacity: 0; } }
@keyframes beamBuildA { from { width: 0; opacity: 0; transform: rotate(-9deg) translateX(-15px); } to { width: 62%; opacity: 1; transform: rotate(-9deg); } }
@keyframes beamBuildB { from { width: 0; opacity: 0; transform: rotate(22deg) translateX(-15px); } to { width: 50%; opacity: 1; transform: rotate(22deg); } }
@keyframes beamBuildC { from { width: 0; opacity: 0; transform: rotate(8deg) translateX(-15px); } to { width: 42%; opacity: 1; transform: rotate(8deg); } }
@keyframes constructionPulse { 50% { color: rgba(240,185,27,.08); transform: translateY(-4px); } }

.build-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.fx-spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 10px var(--gold); animation: sparkFly var(--life,900ms) cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes sparkFly { to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }

/* Navigation feels alive without becoming distracting */
.next-button::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(240,185,27,.4);
  border-radius: 50%;
  opacity: 0;
}
.next-button:hover::after, .next-button:focus-visible::after { animation: navRing 1.4s ease-out infinite; }
@keyframes navRing { from { opacity: .65; transform: scale(.86); } to { opacity: 0; transform: scale(1.35); } }

.click-burst { position: fixed; z-index: 80; width: 5px; height: 5px; border-radius: 50%; pointer-events: none; background: var(--gold-2); box-shadow: 0 0 12px var(--gold); animation: clickBurst .55s ease-out forwards; }
@keyframes clickBurst { to { opacity: 0; transform: translate(var(--x), var(--y)) scale(.15); } }

@media (max-width: 900px) {
  .transition-line { width: 34vw; }
  .transition-star { font-size: 16px; }
  .speed-lines { opacity: .16; }
  .slide.active .poster-wrap::after { animation-duration: 6.2s; }
  .hammer-svg { width: 76px; height: 76px; }
  .priority-card:active { border-color: rgba(240,185,27,.45); background: linear-gradient(160deg, rgba(240,185,27,.075), rgba(255,255,255,.025)); }
  .map-grid { animation-name: gridDriftMobile; }
  @keyframes gridDriftMobile { to { background-position: 34px 34px; } }
}

@media (hover: none) {
  .next-button::after { animation: navRing 2.4s 1.6s ease-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .transition-fx, .speed-lines, .build-sparks { display: none !important; }
  .slide::after, .poster-wrap::after, .priority-card::before { animation: none !important; }
  .hammer-shape, .hammer-svg, .map-grid, .construction-word, .next-button::after { animation: none !important; }
}


/* Navigation polish */
.hero-actions .cta,
.hero-actions .ghost,
.next-button,
.rail-dot,
.menu button {
  -webkit-tap-highlight-color: transparent;
}

body.is-transitioning .viewport,
body.is-transitioning .rail,
body.is-transitioning .next-button {
  pointer-events: none;
}

.hero-actions .cta,
.hero-actions .ghost {
  will-change: transform, opacity;
}

.hero-actions .cta:active,
.hero-actions .ghost:active,
.next-button:active {
  transform: scale(.98);
}

.hero-actions .cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.3) 50%, transparent 75%);
  transform: translateX(-140%);
  opacity: .55;
  pointer-events: none;
}
.hero-actions .cta { position: relative; overflow: hidden; }
.hero-actions .cta:hover::after,
.hero-actions .cta:focus-visible::after { animation: ctaSweep .9s ease; }
@keyframes ctaSweep { to { transform: translateX(140%); } }


/* Live Minecraft profile identity */
.brand-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(240,185,27,.72);
  background: rgba(240,185,27,.08);
  box-shadow: 0 0 0 3px rgba(240,185,27,.07), 0 7px 18px rgba(0,0,0,.22);
  image-rendering: pixelated;
  transform: rotate(-2deg);
}
.brand-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
}
.brand:hover .brand-avatar { animation: brandAvatarPop .55s cubic-bezier(.2,.8,.2,1); }
@keyframes brandAvatarPop {
  45% { transform: rotate(3deg) scale(1.12); box-shadow: 0 0 0 5px rgba(240,185,27,.09), 0 9px 24px rgba(0,0,0,.25); }
}

.candidate-pfp {
  position: absolute;
  z-index: 5;
  left: -28px;
  bottom: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 178px;
  padding: 8px 11px 8px 8px;
  border: 1px solid rgba(240,185,27,.62);
  background: rgba(6,23,47,.92);
  box-shadow: 0 16px 38px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateZ(35px) rotate(-1.5deg);
}
.candidate-pfp::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.12) 50%, transparent 75%);
  transform: translateX(-130%);
}
.slide.active .candidate-pfp::after { animation: profileSweep 4.6s 1.4s ease-in-out infinite; }
@keyframes profileSweep { 0%,62% { transform: translateX(-130%); } 86%,100% { transform: translateX(130%); } }
.candidate-pfp > img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 3px rgba(240,185,27,.08);
}
.candidate-pfp > span { display: grid; line-height: 1; min-width: 0; }
.candidate-pfp b { color: var(--white); font-size: 12px; letter-spacing: .08em; }
.candidate-pfp small { margin-top: 5px; color: var(--gold); font-size: 7px; letter-spacing: .18em; white-space: nowrap; }
.slide.active .candidate-pfp { animation: candidateFloat 3.8s 1.15s ease-in-out infinite; }
@keyframes candidateFloat { 50% { transform: translateZ(35px) translateY(-4px) rotate(1deg); } }

@media (max-width: 900px) {
  .brand-avatar { width: 25px; height: 25px; }
  .candidate-pfp {
    left: 10px;
    bottom: 44px;
    min-width: 154px;
    padding: 6px 8px 6px 6px;
    gap: 8px;
    transform: none;
  }
  .candidate-pfp > img { width: 40px; height: 40px; flex-basis: 40px; }
  .candidate-pfp b { font-size: 10px; }
  .candidate-pfp small { font-size: 6px; letter-spacing: .14em; }
  .slide.active .candidate-pfp { animation: candidateFloatMobile 3.8s 1.15s ease-in-out infinite; }
  @keyframes candidateFloatMobile { 50% { transform: translateY(-3px); } }
}

@media (max-width: 430px) {
  .candidate-pfp { bottom: 38px; left: 8px; }
}


/* Priority icon containment: keeps artwork in its own rail on phones */
@media (max-width: 900px) {
  .priority-card > div:last-child { min-width: 0; position: relative; z-index: 2; }
  .priority-card .icon { position: relative; z-index: 2; overflow: visible; }
  .priority-card h3, .priority-card p { overflow-wrap: anywhere; }
}


/* Priorities page remake -------------------------------------------------- */
.priorities-remade {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  background: radial-gradient(circle at 78% 50%, rgba(35,90,154,.16), transparent 34%);
}
.plan-haze {
  position: absolute;
  width: 48vw;
  height: 48vw;
  min-width: 520px;
  min-height: 520px;
  right: -12vw;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(240,185,27,.08);
  box-shadow: 0 0 0 55px rgba(240,185,27,.025), 0 0 0 110px rgba(240,185,27,.012);
  pointer-events: none;
}
.plan-intro { position: relative; z-index: 2; max-width: 690px; }
.plan-intro h2 {
  margin: 10px 0 22px;
  font-size: clamp(54px, 6.7vw, 104px);
  line-height: .88;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.plan-intro p { margin: 0; color: var(--muted); max-width: 540px; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.55; }
.plan-stack {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 800px;
  justify-self: end;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.plan-spine { position: absolute; left: 42px; top: 28px; bottom: 28px; width: 1px; background: rgba(255,255,255,.08); overflow: hidden; }
.plan-spine i { position: absolute; inset: 0; background: linear-gradient(var(--gold), var(--gold-2)); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 18px rgba(240,185,27,.35); }
.slide.active .plan-spine i { animation: planSpineDraw 1.15s .35s cubic-bezier(.2,.85,.2,1) forwards; }
@keyframes planSpineDraw { to { transform: scaleY(1); } }
.plan-row {
  position: relative;
  display: grid;
  grid-template-columns: 84px 86px minmax(0,1fr) 36px;
  gap: 20px;
  align-items: center;
  min-height: 160px;
  padding: 22px 10px 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  opacity: 0;
  transform: translateX(26px);
}
.plan-row:last-child { border-bottom: 0; }
.slide.active .plan-row { animation: planRowIn .65s cubic-bezier(.2,.85,.2,1) forwards; }
.slide.active .plan-row:nth-of-type(2) { animation-delay: .3s; }
.slide.active .plan-row:nth-of-type(3) { animation-delay: .46s; }
.slide.active .plan-row:nth-of-type(4) { animation-delay: .62s; }
@keyframes planRowIn { to { opacity: 1; transform: none; } }
.plan-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(240,185,27,.08), transparent 42%);
  opacity: 0;
  transition: opacity .25s ease;
}
.plan-row:hover::before { opacity: 1; }
.plan-index { position: relative; z-index: 2; display: grid; place-items: center; }
.plan-index span { color: var(--gold); font-size: 12px; font-weight: 950; letter-spacing: .2em; }
.plan-index::after { content: ""; position: absolute; width: 9px; height: 9px; right: -5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 7px rgba(240,185,27,.08), 0 0 24px rgba(240,185,27,.28); }
.plan-mark { position: relative; z-index: 2; width: 72px; height: 72px; display: grid; place-items: center; }
.plan-mark svg { width: 68px; height: 68px; overflow: visible; filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)); }
.mark-fill { fill: var(--gold); }
.mark-line { fill: none; stroke: var(--gold); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.plan-copy { position: relative; z-index: 2; min-width: 0; }
.plan-label { display: block; color: rgba(240,185,27,.8); font-size: 9px; font-weight: 900; letter-spacing: .22em; margin-bottom: 5px; }
.plan-copy h3 { margin: 0 0 8px; font-size: clamp(25px, 2.6vw, 38px); line-height: 1; letter-spacing: -.045em; }
.plan-copy p { margin: 0; color: var(--muted); max-width: 52ch; font-size: 13.5px; line-height: 1.5; }
.plan-arrow { position: relative; z-index: 2; color: rgba(240,185,27,.55); font-size: 22px; transition: transform .25s ease, color .25s ease; }
.plan-row:hover .plan-arrow { transform: translate(4px,-4px); color: var(--gold); }
.slide.active .plan-grow .mark-fill { animation: planLeafBreathe 2.9s 1.1s ease-in-out infinite alternate; transform-origin: 36px 40px; }
.slide.active .plan-support .town-mark { animation: planTownPulse 3.2s 1.25s ease-in-out infinite; }
.slide.active .plan-build .plan-hammer { animation: planHammerTap 3s 1.35s ease-in-out infinite; transform-origin: 38px 38px; }
@keyframes planLeafBreathe { to { transform: scale(1.045) rotate(1deg); } }
@keyframes planTownPulse { 50% { transform: translateY(-3px); filter: drop-shadow(0 0 11px rgba(240,185,27,.18)); } }
@keyframes planHammerTap { 0%,65%,100% { transform: rotate(0); } 72% { transform: rotate(-10deg); } 79% { transform: rotate(5deg); } }

/* Final vote page --------------------------------------------------------- */
.vote-slide {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(440px,1.1fr);
  gap: clamp(40px,7vw,110px);
  align-items: center;
  background:
    radial-gradient(circle at 78% 48%, rgba(240,185,27,.12), transparent 24%),
    radial-gradient(circle at 24% 54%, rgba(22,67,119,.28), transparent 36%);
}
.vote-orbit { position: absolute; border: 1px solid rgba(240,185,27,.1); border-radius: 50%; pointer-events: none; }
.vote-orbit-a { width: 66vw; height: 66vw; right: -28vw; top: 50%; transform: translateY(-50%); }
.vote-orbit-b { width: 48vw; height: 48vw; right: -19vw; top: 50%; transform: translateY(-50%); box-shadow: 0 0 0 65px rgba(240,185,27,.018); }
.slide.active .vote-orbit-a { animation: voteOrbit 26s linear infinite; }
.slide.active .vote-orbit-b { animation: voteOrbitReverse 20s linear infinite; }
@keyframes voteOrbit { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes voteOrbitReverse { to { transform: translateY(-50%) rotate(-360deg); } }
.vote-rays { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .45; }
.vote-rays i { position: absolute; left: -30%; width: 30%; height: 1px; background: linear-gradient(90deg, transparent, rgba(240,185,27,.75), transparent); transform: rotate(-8deg); }
.vote-rays i:nth-child(1) { top: 22%; animation: voteRay 7s linear infinite; }
.vote-rays i:nth-child(2) { top: 42%; animation: voteRay 8.5s 1.2s linear infinite; opacity: .55; }
.vote-rays i:nth-child(3) { top: 67%; animation: voteRay 6.2s 2.6s linear infinite; opacity: .35; }
.vote-rays i:nth-child(4) { top: 82%; animation: voteRay 9s 3.8s linear infinite; opacity: .25; }
@keyframes voteRay { to { left: 110%; } }
.vote-copy { position: relative; z-index: 4; max-width: 650px; }
.vote-avatar { width: 82px; height: 82px; margin: 18px 0 18px; position: relative; border: 1px solid rgba(240,185,27,.5); background: rgba(255,255,255,.03); box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 0 0 8px rgba(240,185,27,.04); }
.vote-avatar img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.vote-avatar span { position: absolute; right: -12px; bottom: -12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.slide.active .vote-avatar { animation: voteAvatarFloat 3.2s ease-in-out infinite; }
@keyframes voteAvatarFloat { 50% { transform: translateY(-5px) rotate(1deg); } }
.vote-copy h2 { margin: 0 0 20px; font-size: clamp(68px, 9vw, 142px); line-height: .78; letter-spacing: -.07em; text-transform: uppercase; }
.vote-copy p { margin: 0; max-width: 560px; color: var(--muted); font-size: clamp(15px,1.25vw,19px); line-height: 1.55; }
.vote-primary { margin-top: 26px; }
.rank-button {
  position: relative;
  border: 1px solid rgba(240,185,27,.74);
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #071831;
  border-radius: 999px;
  padding: 16px 22px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(240,185,27,.2);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.rank-button span { display: inline-block; margin-left: 10px; }
.rank-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 24%, rgba(255,255,255,.4) 50%, transparent 76%); transform: translateX(-140%); }
.slide.active .rank-button::before { animation: rankSweep 3.6s 1s ease-in-out infinite; }
.slide.active .rank-button { animation: rankPulse 2.4s .9s ease-in-out infinite; }
.rank-button:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(240,185,27,.27); }
@keyframes rankSweep { 0%,62% { transform: translateX(-140%); } 84%,100% { transform: translateX(140%); } }
@keyframes rankPulse { 50% { box-shadow: 0 0 0 9px rgba(240,185,27,.065), 0 20px 40px rgba(240,185,27,.26); } }
.rank-stage {
  position: relative;
  z-index: 3;
  width: min(100%, 660px);
  min-height: 500px;
  justify-self: end;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
  box-shadow: 0 30px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.rank-stage::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -110px; top: -110px; background: radial-gradient(circle, rgba(240,185,27,.16), transparent 68%); }
.rank-title { display: flex; justify-content: space-between; align-items: start; position: relative; z-index: 2; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.rank-title span { color: rgba(255,255,255,.55); font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.rank-title b { color: rgba(240,185,27,.18); font-size: 72px; line-height: .7; letter-spacing: -.08em; }
.rank-list { position: relative; z-index: 2; display: grid; gap: 14px; margin-top: 24px; }
.rank-choice { display: grid; grid-template-columns: 50px 50px minmax(0,1fr) 42px; gap: 14px; align-items: center; min-height: 92px; padding: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.rank-first { border-color: rgba(240,185,27,.52); background: linear-gradient(90deg, rgba(240,185,27,.18), rgba(240,185,27,.045)); box-shadow: inset 0 0 0 1px rgba(240,185,27,.08); }
.rank-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.06); font-size: 16px; font-weight: 950; }
.rank-first .rank-num { background: var(--gold); color: var(--navy); box-shadow: 0 0 0 7px rgba(240,185,27,.08); }
.rank-face { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.12); }
.rank-face img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.rank-name { display: grid; gap: 3px; }
.rank-name b { font-size: 20px; letter-spacing: -.025em; }
.rank-name small { color: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.rank-check { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: 20px; font-weight: 950; opacity: 0; transform: scale(.4) rotate(-20deg); }
.ghost-choice { grid-template-columns: 50px minmax(0,1fr); opacity: .44; min-height: 74px; }
.rank-line { height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.04)); width: 82%; }
.rank-line.short { width: 62%; }
.rank-scan { position: absolute; left: 0; right: 0; top: 90px; height: 86px; background: linear-gradient(180deg, transparent, rgba(240,185,27,.1), transparent); border-top: 1px solid rgba(240,185,27,.16); opacity: 0; pointer-events: none; }
.rank-stamp { position: absolute; right: 38px; bottom: 26px; color: rgba(240,185,27,.11); font-size: 122px; font-weight: 950; letter-spacing: -.08em; transform: rotate(-7deg); }
.slide.active .rank-first { animation: rankFirstIn .68s .38s cubic-bezier(.2,.85,.2,1) both; }
.slide.active .ghost-choice:nth-child(2) { animation: rankGhostIn .55s .58s cubic-bezier(.2,.85,.2,1) both; }
.slide.active .ghost-choice:nth-child(3) { animation: rankGhostIn .55s .72s cubic-bezier(.2,.85,.2,1) both; }
.slide.active .rank-check { animation: rankCheck .7s 1.05s cubic-bezier(.2,.85,.2,1) forwards; }
.slide.active .rank-scan { animation: rankScan 3.1s 1.2s ease-in-out infinite; }
.slide.active .rank-first::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(240,185,27,.45); opacity: 0; animation: rankRing 2.4s 1.1s ease-out infinite; pointer-events: none; }
.rank-first { position: relative; }
@keyframes rankFirstIn { from { opacity:0; transform: translateX(26px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes rankGhostIn { from { opacity:0; transform: translateX(18px); } to { opacity:.44; transform:none; } }
@keyframes rankCheck { 0% { opacity:0; transform:scale(.4) rotate(-20deg); } 70% { opacity:1; transform:scale(1.14) rotate(0); } 100% { opacity:1; transform:scale(1); } }
@keyframes rankScan { 0%,15% { opacity:0; transform:translateY(-35px); } 35% { opacity:.7; } 78% { opacity:.12; transform:translateY(280px); } 100% { opacity:0; transform:translateY(330px); } }
@keyframes rankRing { from { opacity:.55; transform:scale(1); } to { opacity:0; transform:scale(1.035); } }
.vote-bottomline { position: absolute; left: var(--slide-pad); right: var(--slide-pad); bottom: 66px; display: flex; justify-content: center; gap: 20px; align-items: center; color: rgba(255,255,255,.4); font-size: 9px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.vote-bottomline i { color: var(--gold); font-style: normal; }
.vote-footer { position: absolute; left: var(--slide-pad); right: var(--slide-pad); bottom: 22px; display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.54); font-size: 9px; letter-spacing: .16em; }

/* Smoother slide movement ------------------------------------------------- */
.track { contain: layout paint; }
.slide { contain: layout paint; }
body.is-transitioning .track { pointer-events: none; }
.final-vote-button { margin-top: 22px; }

@media (max-width: 900px) {
  .priorities-remade {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 22px;
  }
  .plan-haze { min-width: 360px; min-height: 360px; width: 90vw; height: 90vw; right: -44vw; top: 42%; }
  .plan-intro { width: 100%; max-width: none; }
  .plan-intro h2 { margin: 8px 0 14px; font-size: clamp(42px, 12vw, 62px); line-height: .9; }
  .plan-intro p { font-size: 13px; line-height: 1.48; max-width: 52ch; }
  .plan-stack { width: 100%; max-width: none; border-top-color: rgba(255,255,255,.1); }
  .plan-spine { left: 25px; top: 22px; bottom: 22px; }
  .plan-row { grid-template-columns: 50px 52px minmax(0,1fr); gap: 12px; min-height: 116px; padding: 14px 0; }
  .plan-index::after { right: -5px; width: 8px; height: 8px; }
  .plan-mark { width: 52px; height: 52px; }
  .plan-mark svg { width: 48px; height: 48px; }
  .plan-copy h3 { font-size: clamp(21px, 6vw, 28px); margin-bottom: 5px; }
  .plan-copy p { font-size: 12px; line-height: 1.4; }
  .plan-label { font-size: 8px; margin-bottom: 3px; }
  .plan-arrow { display: none; }
  .plan-row:hover::before { opacity: 0; }

  .vote-slide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
  }
  .vote-copy { max-width: none; }
  .vote-avatar { width: 64px; height: 64px; margin: 10px 0 16px; }
  .vote-copy h2 { font-size: clamp(58px, 17vw, 92px); margin-bottom: 16px; }
  .vote-copy p { font-size: 13.5px; max-width: 50ch; }
  .vote-primary { width: 100%; margin-top: 18px; padding: 15px 18px; }
  .rank-stage { width: 100%; max-width: none; min-height: 0; padding: 18px; }
  .rank-title b { font-size: 56px; }
  .rank-list { margin-top: 16px; gap: 10px; }
  .rank-choice { grid-template-columns: 40px 42px minmax(0,1fr) 34px; gap: 9px; min-height: 74px; padding: 10px; }
  .rank-num { width: 36px; height: 36px; font-size: 13px; }
  .rank-face { width: 40px; height: 40px; }
  .rank-name b { font-size: 16px; }
  .rank-check { width: 30px; height: 30px; font-size: 16px; }
  .ghost-choice { grid-template-columns: 40px minmax(0,1fr); min-height: 56px; }
  .rank-stamp { font-size: 80px; right: 20px; bottom: 18px; }
  .vote-bottomline { display: none; }
  .vote-footer { position: relative; left: auto; right: auto; bottom: auto; margin-top: 0; padding: 16px 0 calc(72px + env(safe-area-inset-bottom, 0px)); }
  .vote-orbit-a { width: 150vw; height: 150vw; right: -95vw; }
  .vote-orbit-b { width: 110vw; height: 110vw; right: -75vw; }
}

@media (max-width: 430px) {
  .plan-row { grid-template-columns: 44px 46px minmax(0,1fr); gap: 10px; min-height: 108px; }
  .plan-spine { left: 22px; }
  .plan-mark { width: 46px; height: 46px; }
  .plan-mark svg { width: 44px; height: 44px; }
  .plan-copy p { font-size: 11.5px; }
  .vote-copy h2 { font-size: clamp(54px, 18vw, 76px); }
  .rank-stage { padding: 14px; }
  .rank-choice { grid-template-columns: 34px 38px minmax(0,1fr) 30px; gap: 7px; }
  .rank-num { width: 32px; height: 32px; }
  .rank-face { width: 36px; height: 36px; }
  .rank-name b { font-size: 14px; }
  .rank-check { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .plan-row, .plan-spine i, .vote-orbit, .vote-rays i, .vote-avatar, .rank-button, .rank-button::before, .rank-first, .ghost-choice, .rank-check, .rank-scan { animation: none !important; }
  .plan-row { opacity: 1 !important; transform: none !important; }
  .plan-spine i { transform: scaleY(1) !important; }
  .rank-check { opacity: 1 !important; transform: none !important; }
}


/* v2 navigation and mobile-safe rebuild ---------------------------------- */
.track {
  transition: transform 900ms cubic-bezier(.18,.86,.22,1) !important;
  transform: translate3d(0,0,0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: none !important;
}
.slide { contain: none !important; }
body.is-transitioning .track { pointer-events: none; }

/* Priority page v3: no side-rail icons, no overlapping columns */
.priorities-v3 {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: center;
  gap: clamp(28px, 4vh, 48px);
  background:
    radial-gradient(circle at 82% 42%, rgba(33,85,148,.20), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.01), transparent 42%);
}
.priority-v3-glow {
  position: absolute;
  width: 52vw;
  height: 52vw;
  right: -22vw;
  top: 38%;
  border-radius: 50%;
  border: 1px solid rgba(240,185,27,.07);
  box-shadow: 0 0 0 70px rgba(240,185,27,.018), 0 0 0 140px rgba(240,185,27,.008);
  pointer-events: none;
}
.priority-v3-head { position: relative; z-index: 3; max-width: 920px; }
.priority-v3-head h2 {
  margin: 10px 0 16px;
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: .89;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.priority-v3-head p { margin: 0; max-width: 620px; color: var(--muted); font-size: clamp(15px,1.2vw,18px); line-height: 1.55; }
.priority-v3-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  align-self: end;
}
.promise-card {
  position: relative;
  min-width: 0;
  min-height: 300px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.016));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.promise-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 24%, rgba(255,255,255,.065) 48%, rgba(240,185,27,.07) 52%, transparent 76%);
  transform: translateX(-135%);
  pointer-events: none;
}
.slide.active .promise-card::after { animation: promiseShine 5.4s 1.2s ease-in-out infinite; }
.slide.active .promise-card:nth-child(2)::after { animation-delay: 1.5s; }
.slide.active .promise-card:nth-child(3)::after { animation-delay: 1.8s; }
@keyframes promiseShine { 0%,66% { transform:translateX(-135%); } 90%,100% { transform:translateX(135%); } }
.promise-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.promise-num { color: var(--gold); font-size: 12px; font-weight: 950; letter-spacing: .22em; padding-top: 6px; }
.promise-icon { width: 68px; height: 68px; flex: 0 0 68px; display: grid; place-items: center; }
.promise-icon svg { display: block; width: 64px; height: 64px; overflow: visible; filter: drop-shadow(0 7px 16px rgba(0,0,0,.18)); }
.promise-fill { fill: var(--gold); }
.promise-stroke { fill: none; stroke: var(--gold); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.promise-copy { min-width: 0; margin-top: auto; padding-top: 32px; }
.promise-word { display: block; margin-bottom: 6px; color: rgba(240,185,27,.72); font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.promise-copy h3 { margin: 0 0 9px; font-size: clamp(25px,2.4vw,37px); line-height: 1; letter-spacing: -.045em; }
.promise-copy p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.48; overflow-wrap: normal; word-break: normal; }
.promise-meter { height: 2px; margin-top: 20px; background: rgba(255,255,255,.07); overflow: hidden; }
.promise-meter i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg,var(--gold),var(--gold-2)); transform: scaleX(0); transform-origin: left; }
.slide.active .promise-card { animation: promiseEnter .65s cubic-bezier(.2,.85,.2,1) both; }
.slide.active .promise-card:nth-child(1) { animation-delay: .26s; }
.slide.active .promise-card:nth-child(2) { animation-delay: .39s; }
.slide.active .promise-card:nth-child(3) { animation-delay: .52s; }
.slide.active .promise-card:nth-child(1) .promise-meter i { animation: meterGrow .85s .62s cubic-bezier(.2,.85,.2,1) forwards; }
.slide.active .promise-card:nth-child(2) .promise-meter i { animation: meterGrow .85s .75s cubic-bezier(.2,.85,.2,1) forwards; }
.slide.active .promise-card:nth-child(3) .promise-meter i { animation: meterGrow .85s .88s cubic-bezier(.2,.85,.2,1) forwards; }
.slide.active .promise-grow .promise-icon { animation: promiseFloat 3.2s 1s ease-in-out infinite; }
.slide.active .promise-support .promise-icon { animation: promiseFloat 3.4s 1.2s ease-in-out infinite; }
.slide.active .promise-build .promise-hammer { transform-origin: 38px 38px; animation: promiseHammer 3.2s 1.3s ease-in-out infinite; }
@keyframes promiseEnter { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform:none; } }
@keyframes meterGrow { to { transform:scaleX(1); } }
@keyframes promiseFloat { 50% { transform:translateY(-4px); } }
@keyframes promiseHammer { 0%,67%,100% { transform:rotate(0); } 73% { transform:rotate(-10deg); } 80% { transform:rotate(5deg); } }

/* Vote page v2 */
.vote-v2 {
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(520px,1.18fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(36px,6vw,90px);
  align-items: center;
  background:
    radial-gradient(circle at 76% 46%, rgba(240,185,27,.12), transparent 24%),
    radial-gradient(circle at 22% 55%, rgba(22,67,119,.3), transparent 36%);
}
.vote-v2-copy { position: relative; z-index: 4; max-width: 650px; }
.vote-identity { display: flex; align-items: center; gap: 22px; margin: 18px 0 18px; min-width: 0; }
.vote-avatar.compact { width: 76px; height: 76px; flex: 0 0 76px; margin: 0; }
.vote-title { min-width: 0; display: grid; line-height: .82; }
.vote-title > span { color: var(--white); font-size: clamp(40px,5.2vw,76px); font-weight: 950; letter-spacing: -.06em; }
.vote-title strong { color: var(--gold); font-size: clamp(48px,6.4vw,96px); font-weight: 950; letter-spacing: -.07em; white-space: nowrap; }
.vote-title small { margin-top: 13px; color: var(--white); font-size: clamp(16px,1.8vw,25px); font-weight: 900; letter-spacing: .16em; line-height: 1; }
.vote-v2-copy > p { margin: 0; max-width: 540px; color: var(--muted); font-size: clamp(15px,1.15vw,18px); line-height: 1.55; }
.sample-ballot {
  position: relative;
  z-index: 4;
  width: min(100%,720px);
  justify-self: end;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.018));
  box-shadow: 0 30px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.ballot-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.1); }
.ballot-head > div { display:grid; gap:3px; }
.ballot-head span, .ballot-head small { color:rgba(255,255,255,.48); font-size:9px; font-weight:900; letter-spacing:.2em; }
.ballot-head b { color:var(--white); font-size:26px; letter-spacing:-.03em; }
.ballot-columns { display:grid; grid-template-columns:minmax(0,1fr) repeat(3,54px); gap:10px; align-items:center; padding:14px 12px 8px; color:rgba(255,255,255,.34); font-size:8px; font-weight:900; letter-spacing:.16em; text-align:center; }
.ballot-columns span:first-child { text-align:left; }
.ballot-candidates { display:grid; gap:9px; }
.ballot-candidate { position:relative; display:grid; grid-template-columns:minmax(0,1fr) repeat(3,54px); gap:10px; align-items:center; min-height:82px; padding:12px; border:1px solid rgba(255,255,255,.075); background:rgba(255,255,255,.025); overflow:hidden; }
.ballot-person { min-width:0; display:flex; align-items:center; gap:11px; }
.ballot-person img, .ghost-avatar { width:46px; height:46px; flex:0 0 46px; display:block; image-rendering:pixelated; border:1px solid rgba(255,255,255,.11); }
.ghost-avatar { background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); }
.ballot-person > span:last-child { min-width:0; display:grid; gap:3px; }
.ballot-person b { overflow:hidden; text-overflow:ellipsis; color:var(--white); font-size:16px; white-space:nowrap; }
.ballot-person small { color:var(--gold); font-size:7px; font-weight:900; letter-spacing:.18em; }
.ghost-person { opacity:.45; }
.rank-bubble { position:relative; width:38px; height:38px; justify-self:center; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.42); background:rgba(255,255,255,.025); font-size:11px; font-weight:900; }
.rank-bubble b { position:absolute; opacity:0; color:var(--navy); font-size:18px; transform:scale(.35) rotate(-18deg); }
.starsterra-row { border-color:rgba(240,185,27,.18); }
.ballot-pointer { position:absolute; z-index:8; width:34px; height:34px; right:136px; top:126px; display:grid; place-items:center; opacity:0; color:var(--gold); filter:drop-shadow(0 6px 12px rgba(0,0,0,.35)); transform:translate(82px,-52px) rotate(-14deg); pointer-events:none; }
.ballot-pointer span { font-size:22px; }
.ballot-flash { position:absolute; z-index:1; left:0; right:0; top:93px; height:92px; background:linear-gradient(90deg,rgba(240,185,27,.18),rgba(240,185,27,.04),transparent); opacity:0; pointer-events:none; }
.ballot-confirm { position:relative; z-index:5; margin-top:14px; min-height:40px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid rgba(240,185,27,.24); color:rgba(255,255,255,.74); font-size:9px; font-weight:900; letter-spacing:.16em; opacity:.36; }
.ballot-confirm span { color:var(--gold); }
.slide.active .ballot-pointer { animation: ballotPointer 4.6s .55s cubic-bezier(.2,.75,.2,1) infinite; }
.slide.active .starsterra-row { animation: ballotRowSelect 4.6s .55s ease-in-out infinite; }
.slide.active .starsterra-row .rank-one { animation: ballotBubbleFill 4.6s .55s ease-in-out infinite; }
.slide.active .starsterra-row .rank-one i { animation: ballotNumberFade 4.6s .55s ease-in-out infinite; }
.slide.active .starsterra-row .rank-one b { animation: ballotCheckShow 4.6s .55s cubic-bezier(.2,.85,.2,1) infinite; }
.slide.active .ballot-flash { animation: ballotFlash 4.6s .55s ease-in-out infinite; }
.slide.active .ballot-confirm { animation: ballotConfirm 4.6s .55s ease-in-out infinite; }
@keyframes ballotPointer { 0%,10% { opacity:0; transform:translate(82px,-52px) rotate(-14deg); } 20% { opacity:1; } 38% { opacity:1; transform:translate(0,0) rotate(0); } 48%,82% { opacity:0; transform:translate(0,0) rotate(0); } 100% { opacity:0; } }
@keyframes ballotRowSelect { 0%,34% { border-color:rgba(240,185,27,.18); background:rgba(255,255,255,.025); } 44%,82% { border-color:rgba(240,185,27,.62); background:linear-gradient(90deg,rgba(240,185,27,.18),rgba(240,185,27,.045)); box-shadow:inset 0 0 0 1px rgba(240,185,27,.08); } 100% { border-color:rgba(240,185,27,.18); background:rgba(255,255,255,.025); } }
@keyframes ballotBubbleFill { 0%,34% { background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.18); box-shadow:none; } 44%,82% { background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 7px rgba(240,185,27,.08),0 0 24px rgba(240,185,27,.22); } 100% { background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.18); box-shadow:none; } }
@keyframes ballotNumberFade { 0%,38% { opacity:1; } 44%,82% { opacity:0; } 100% { opacity:1; } }
@keyframes ballotCheckShow { 0%,38% { opacity:0; transform:scale(.35) rotate(-18deg); } 48%,76% { opacity:1; transform:scale(1) rotate(0); } 84%,100% { opacity:0; transform:scale(.35); } }
@keyframes ballotFlash { 0%,38% { opacity:0; } 46% { opacity:.85; } 66% { opacity:.12; } 82%,100% { opacity:0; } }
@keyframes ballotConfirm { 0%,42% { opacity:.36; transform:translateY(5px); } 52%,78% { opacity:1; transform:none; border-color:rgba(240,185,27,.52); color:var(--white); } 100% { opacity:.36; transform:translateY(5px); } }
.vote-v2-button { position:relative; z-index:4; grid-column:2; justify-self:end; width:min(100%,720px); margin-top:18px; }
.vote-v2-footer { grid-column:1 / -1; position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; width:100%; margin-top:26px; }

@media (max-width: 900px) {
  .track { transition-duration: 760ms !important; }

  .priorities-v3 {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:20px;
  }
  .priority-v3-head { width:100%; max-width:none; }
  .priority-v3-head h2 { margin:8px 0 12px; font-size:clamp(38px,10.6vw,52px); line-height:.92; }
  .priority-v3-head p { font-size:13px; line-height:1.46; max-width:52ch; }
  .priority-v3-grid { grid-template-columns:1fr; gap:10px; width:100%; align-self:auto; }
  .promise-card { min-height:0; padding:15px 16px 14px; display:block; }
  .promise-top { align-items:center; }
  .promise-num { padding-top:0; }
  .promise-icon { width:48px; height:48px; flex-basis:48px; }
  .promise-icon svg { width:46px; height:46px; }
  .promise-copy { margin-top:8px; padding-top:0; }
  .promise-word { font-size:7.5px; margin-bottom:3px; }
  .promise-copy h3 { margin:0 0 5px; font-size:clamp(21px,5.8vw,27px); }
  .promise-copy p { font-size:12px; line-height:1.38; padding-right:0; overflow-wrap:normal; }
  .promise-meter { margin-top:12px; }
  .priority-v3-glow { width:100vw; height:100vw; right:-55vw; top:42%; }

  .vote-v2 {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:16px;
  }
  .vote-v2-copy { width:100%; max-width:none; }
  .vote-identity { gap:13px; margin:10px 0 10px; align-items:center; }
  .vote-avatar.compact { width:54px; height:54px; flex-basis:54px; }
  .vote-avatar.compact span { width:24px; height:24px; right:-8px; bottom:-8px; font-size:11px; }
  .vote-title { width:min(100%, calc(100vw - 112px)); }
  .vote-title > span { font-size:clamp(28px,8.5vw,40px); }
  .vote-title strong { display:block; max-width:100%; font-size:clamp(34px,10.5vw,50px); white-space:nowrap; letter-spacing:-.065em; }
  .vote-title small { margin-top:8px; font-size:clamp(12px,3.7vw,17px); letter-spacing:.13em; }
  .vote-v2-copy > p { font-size:13px; line-height:1.44; max-width:52ch; }
  .sample-ballot { width:100%; max-width:none; padding:14px; }
  .ballot-head { padding-bottom:11px; }
  .ballot-head b { font-size:22px; }
  .ballot-head small { font-size:7px; }
  .ballot-columns { grid-template-columns:minmax(0,1fr) repeat(3,38px); gap:6px; padding:10px 8px 6px; font-size:6.5px; }
  .ballot-candidate { grid-template-columns:minmax(0,1fr) repeat(3,38px); gap:6px; min-height:62px; padding:8px; }
  .ballot-person { gap:8px; }
  .ballot-person img, .ghost-avatar { width:36px; height:36px; flex-basis:36px; }
  .ballot-person b { font-size:13px; }
  .ballot-person small { font-size:6px; letter-spacing:.14em; }
  .rank-bubble { width:30px; height:30px; font-size:9px; }
  .rank-bubble b { font-size:15px; }
  .ballot-pointer { right:93px; top:99px; width:28px; height:28px; }
  .ballot-pointer span { font-size:18px; }
  .ballot-flash { top:72px; height:72px; }
  .ballot-confirm { margin-top:9px; min-height:34px; font-size:7px; letter-spacing:.12em; }
  .vote-v2-button { width:100%; margin-top:0; grid-column:auto; justify-self:stretch; }
  .vote-v2-footer { padding:12px 0 0; margin-top:0; }
  .vote-orbit-a { width:140vw; height:140vw; right:-92vw; }
  .vote-orbit-b { width:105vw; height:105vw; right:-72vw; }
}

@media (max-width: 430px) {
  .priority-v3-head h2 { font-size:clamp(35px,10vw,44px); }
  .promise-card { padding:13px 14px 12px; }
  .promise-icon { width:42px; height:42px; flex-basis:42px; }
  .promise-icon svg { width:40px; height:40px; }
  .promise-copy h3 { font-size:clamp(20px,5.6vw,24px); }
  .promise-copy p { font-size:11.5px; }

  .vote-title { width:min(100%, calc(100vw - 101px)); }
  .vote-title strong { font-size:clamp(31px,9.4vw,42px); }
  .vote-title > span { font-size:clamp(26px,7.8vw,34px); }
  .vote-title small { font-size:clamp(11px,3.4vw,14px); }
  .ballot-head small { display:none; }
  .ballot-columns { grid-template-columns:minmax(0,1fr) repeat(3,34px); }
  .ballot-candidate { grid-template-columns:minmax(0,1fr) repeat(3,34px); }
  .rank-bubble { width:28px; height:28px; }
  .ballot-pointer { right:82px; }
}

@media (prefers-reduced-motion: reduce) {
  .track { transition-duration:.001ms !important; }
  .promise-card, .promise-meter i, .promise-card::after, .promise-icon, .promise-hammer,
  .ballot-pointer, .starsterra-row, .rank-one, .rank-one i, .rank-one b, .ballot-flash, .ballot-confirm { animation:none !important; }
  .promise-card { opacity:1 !important; transform:none !important; }
  .promise-meter i { transform:scaleX(1) !important; }
  .starsterra-row { border-color:rgba(240,185,27,.62) !important; background:linear-gradient(90deg,rgba(240,185,27,.18),rgba(240,185,27,.045)) !important; }
  .rank-one { background:var(--gold) !important; border-color:var(--gold) !important; }
  .rank-one i { opacity:0 !important; }
  .rank-one b { opacity:1 !important; transform:none !important; }
  .ballot-confirm { opacity:1 !important; }
}


/* Mobile audit pass ------------------------------------------------------- */
@media (max-width: 900px) {
  /* Keep every page inside its own paint boundary. This prevents decorative
     artwork from inflating the horizontal layout and makes swipe transitions cheaper. */
  .slide {
    contain: layout paint style !important;
  }

  .track {
    transition-duration: 680ms !important;
    transition-timing-function: cubic-bezier(.22,.78,.22,1) !important;
  }

  /* Expensive ambient/keyframe effects do not need to repaint while the whole
     page is moving. They resume as soon as the slide lands. */
  body.is-transitioning .ambient *,
  body.is-transitioning .speed-lines i,
  body.is-transitioning .poster-wrap::after,
  body.is-transitioning .poster-glow,
  body.is-transitioning .map-grid,
  body.is-transitioning .route::after,
  body.is-transitioning .node i,
  body.is-transitioning .build-visual::before,
  body.is-transitioning .construction-word,
  body.is-transitioning .vote-orbit,
  body.is-transitioning .vote-rays i {
    animation-play-state: paused !important;
  }

  .next-button {
    transition: opacity .22s ease, transform .22s ease, border-color .22s ease, background .22s ease;
  }
  body.mobile-nav-waits .next-button {
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(.92);
  }

  /* The ballot is a flex child on mobile. Prevent it from shrinking and
     clipping its candidate rows on short screens. */
  .vote-v2-copy,
  .sample-ballot,
  .vote-v2-button,
  .vote-v2-footer {
    flex: 0 0 auto;
  }

  .sample-ballot {
    min-height: max-content;
  }

  /* Avoid the decorative poster creating a huge hidden horizontal box. */
  .poster-wrap {
    width: min(50vw, 184px);
    right: -26px;
  }
}

@media (max-width: 340px) {
  .hero h1 {
    font-size: clamp(45px, 14.5vw, 51px);
    line-height: .86;
    letter-spacing: -.055em;
  }
  .hero p { font-size: 13.25px; line-height: 1.46; }
  .hero-actions { margin-top: 18px; }
  .poster-wrap { width: 146px; right: -18px; opacity: .09; }
  /* The header still carries the Minecraft identity. Removing this tiny label
     prevents the profile tag from being cut off the right edge on 320px phones. */
  .candidate-pfp { display: none; }
}

/* Short-phone priority layout: all three priorities remain visible instead
   of forcing the fixed next arrow over the middle card. */
@media (max-width: 900px) and (max-height: 700px) {
  .priorities-v3 {
    gap: 9px;
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }
  .priority-v3-head h2 {
    margin: 5px 0 7px;
    font-size: clamp(28px, 8.8vw, 36px);
    line-height: .9;
  }
  .priority-v3-head p {
    font-size: 10.75px;
    line-height: 1.3;
    max-width: 48ch;
  }
  .priority-v3-grid { gap: 6px; }
  .promise-card {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    grid-template-areas:
      "top copy"
      "meter meter";
    column-gap: 9px;
    row-gap: 5px;
    min-height: 82px;
    padding: 7px 10px 7px;
    align-items: center;
  }
  .promise-top {
    grid-area: top;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }
  .promise-num {
    padding: 0;
    font-size: 7.5px;
    letter-spacing: .13em;
  }
  .promise-icon,
  .promise-icon svg {
    width: 34px;
    height: 34px;
  }
  .promise-icon { flex-basis: 34px; }
  .promise-copy {
    grid-area: copy;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  .promise-word { display: none; }
  .promise-copy h3 {
    margin: 0 0 3px;
    font-size: clamp(16.5px, 5.1vw, 19px);
    line-height: 1;
  }
  .promise-copy p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 10.25px;
    line-height: 1.23;
  }
  .promise-meter {
    grid-area: meter;
    margin: 0;
    height: 1px;
  }

  /* Keep the menu usable on older/smaller phones without hiding the fifth page. */
  .menu {
    padding-top: calc(62px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .menu nav button { padding: 7px 0; font-size: clamp(22px, 7.2vw, 28px); }
  .menu-tagline { margin-top: 18px; padding-top: 12px; font-size: 10px; line-height: 1.5; }

  /* Compact, but never clip, the ranked-choice sample ballot. The slide can
     scroll naturally when the viewport is too short. */
  .vote-v2 { gap: 10px; }
  .vote-identity { gap: 10px; margin: 5px 0 6px; }
  .vote-avatar.compact { width: 44px; height: 44px; flex-basis: 44px; }
  .vote-avatar.compact span { width: 20px; height: 20px; right: -6px; bottom: -6px; font-size: 9px; }
  .vote-title { width: min(100%, calc(100vw - 92px)); }
  .vote-title > span { font-size: clamp(23px, 7vw, 29px); }
  .vote-title strong { font-size: clamp(29px, 8.8vw, 37px); letter-spacing: -.055em; }
  .vote-title small { margin-top: 5px; font-size: 10px; }
  .vote-v2-copy > p { font-size: 11.25px; line-height: 1.3; }
  .sample-ballot { padding: 10px; }
  .ballot-head { padding-bottom: 7px; }
  .ballot-head b { font-size: 18px; }
  .ballot-head span { font-size: 7px; }
  .ballot-head small { display: none; }
  .ballot-columns {
    grid-template-columns: minmax(0,1fr) repeat(3,30px);
    gap: 4px;
    padding: 7px 6px 5px;
    font-size: 5.8px;
  }
  .ballot-candidates { gap: 6px; }
  .ballot-candidate {
    grid-template-columns: minmax(0,1fr) repeat(3,30px);
    gap: 4px;
    min-height: 50px;
    padding: 6px;
  }
  .ballot-person { gap: 6px; }
  .ballot-person img, .ghost-avatar { width: 29px; height: 29px; flex-basis: 29px; }
  .ballot-person b { font-size: 11px; }
  .ballot-person small { font-size: 5px; letter-spacing: .1em; }
  .rank-bubble { width: 25px; height: 25px; font-size: 8px; }
  .rank-bubble b { font-size: 13px; }
  .ballot-pointer { right: 70px; top: 77px; width: 24px; height: 24px; }
  .ballot-pointer span { font-size: 15px; }
  .ballot-flash { top: 58px; height: 58px; }
  .ballot-confirm { margin-top: 7px; min-height: 29px; font-size: 6.2px; letter-spacing: .09em; }
  .rank-button { padding: 12px 14px; font-size: 10.5px; }
  .vote-v2-footer { padding-top: 10px; padding-bottom: 0; font-size: 7px; }
}