/* ═══════════════════════════════════════════════════════════════════════════
   disorderly — design system
   Premise: 100 autonomous agents govern a real business. The visual language
   is a machine council: deep void, signal-green telemetry, plasma dissent,
   hairline grids, corner brackets, monospace data. Nothing soft, nothing
   cartoon. Order emerging out of disorder.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* grounds */
  --void:    #04060b;
  --deep:    #070b13;
  --panel:   #0c121d;
  --panel2:  #111a29;
  --raise:   #162133;

  /* signal */
  --acid:    #00ffa3;   /* consensus / affirmative */
  --ion:     #22d3ee;   /* data / neutral */
  --plasma:  #ff2b6b;   /* dissent / danger */
  --violet:  #a855f7;   /* agent */
  --amber:   #ffb020;   /* pending */

  /* type */
  --text:    #dfe9f0;
  --muted:   #8296ab;
  --dim:     #52657a;

  /* lines */
  --line:    rgba(0, 255, 163, .14);
  --line2:   rgba(255, 255, 255, .07);

  --display: 'Chakra Petch', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;
  --body:    'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

/* ── native browser chrome, overridden ───────────────────────────────────
   Windows/macOS default scrollbars, selection colours, focus rings and
   autofill styling all break the theme instantly. Overridden globally here
   so nothing has to remember to do it locally. */
* { scrollbar-width: thin; scrollbar-color: rgba(0,255,163,.42) rgba(255,255,255,.04); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.035); border-left: 1px solid var(--line2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,255,163,.5), rgba(34,211,238,.35));
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(0,255,163,.85), rgba(34,211,238,.6)); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

::selection { background: rgba(0,255,163,.28); color: #fff; }
::-moz-selection { background: rgba(0,255,163,.28); color: #fff; }

:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Chrome's autofill paints its own pale-yellow background over dark inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #0a1119 inset;
  caret-color: var(--acid);
  transition: background-color 9999s ease-out;
}
input::placeholder { color: var(--dim); opacity: 1; }
/* strip the native number spinner and search cancel button */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
select, textarea, input, button { font-family: inherit; color: inherit; }

/* ── modal (replaces window.alert / confirm) ─────────────────────────── */
.modal-veil {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(2, 4, 8, .82); backdrop-filter: blur(8px);
  opacity: 0; animation: veilIn .16s ease forwards;
}
.modal-veil.closing { animation: veilOut .14s ease forwards; }
@keyframes veilIn { to { opacity: 1; } }
@keyframes veilOut { to { opacity: 0; } }
.modal {
  position: relative; width: min(460px, 100%);
  background: linear-gradient(160deg, var(--panel), var(--deep));
  border: 1px solid rgba(0,255,163,.3);
  box-shadow: 0 0 70px -18px rgba(0,255,163,.4);
  padding: 1.6rem 1.5rem 1.4rem;
  transform: translateY(10px); animation: modalIn .2s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes modalIn { to { transform: translateY(0); } }
.modal::before, .modal::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border-color: var(--acid); border-style: solid; pointer-events: none;
}
.modal::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.modal::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.modal h3 { color: #fff; text-transform: uppercase; margin: .6rem 0 .6rem; font-size: 1.15rem; }
.modal p { color: var(--muted); font-size: .9rem; }
.modal p + p { margin-top: .6rem; }
.modal .modal-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.3rem; }
.modal .modal-x {
  position: absolute; top: .55rem; right: .7rem; background: none; border: 0; cursor: pointer;
  color: var(--dim); font-family: var(--mono); font-size: 1.1rem; line-height: 1; padding: .25rem;
}
.modal .modal-x:hover { color: var(--plasma); }

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Fixed atmospheric stack: grid, drifting glows, scanlines. Pointer-events off
   so none of it interferes with the page. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(0,255,163,.045) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(0,255,163,.045) 1px, transparent 1px) 0 0 / 46px 100%,
    radial-gradient(900px 600px at 12% -5%,  rgba(0,255,163,.10), transparent 60%),
    radial-gradient(800px 620px at 92% 8%,   rgba(168,85,247,.11), transparent 60%),
    radial-gradient(700px 500px at 60% 100%, rgba(34,211,238,.08), transparent 62%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 88%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity: .5; mix-blend-mode: multiply;
}
main, nav, footer, section { position: relative; z-index: 1; }

/* ── type ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.06; letter-spacing: -.015em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); text-transform: uppercase; }
h3 { font-size: 1.12rem; letter-spacing: .01em; }

a { color: var(--acid); text-decoration: none; transition: color .15s, opacity .15s; }
a:hover { color: #7dffcd; }

strong { color: #fff; font-weight: 600; }
em { color: var(--ion); font-style: normal; }

.mono { font-family: var(--mono); }

/* micro-label: the recurring telemetry caption */
.tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--acid);
}
.tag::before {
  content: ''; width: 6px; height: 6px; background: var(--acid);
  box-shadow: 0 0 10px var(--acid); animation: pulse 2.4s ease-in-out infinite;
}
.tag.plasma { color: var(--plasma); } .tag.plasma::before { background: var(--plasma); box-shadow: 0 0 10px var(--plasma); }
.tag.ion { color: var(--ion); } .tag.ion::before { background: var(--ion); box-shadow: 0 0 10px var(--ion); }
.tag.violet { color: var(--violet); } .tag.violet::before { background: var(--violet); box-shadow: 0 0 10px var(--violet); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.lede { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--muted); max-width: 62ch; }

/* ── layout ───────────────────────────────────────────────────────────── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 820px; margin: 0 auto; }
/* Uniform vertical rhythm. Every anchored section pads identically so a jump
   from the nav always lands the heading in the same place — sections with
   ad-hoc padding-top:0 used to land their titles under the sticky bar. */
.section { padding: clamp(2.75rem, 5.5vw, 4.5rem) 0; }
/* Anchor jumps. The nav is a constant ~67px because it never wraps (see
   .nav-links), so a fixed offset lands every heading in the same place. The
   section's own padding-top supplies the breathing room below the bar. */
[id] { scroll-margin-top: 28px; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 1.5rem;
  background: rgba(4, 6, 11, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand svg, .brand img { width: 34px; height: 34px; display: block; }
.brand-name {
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -.02em; color: var(--text); text-transform: lowercase;
}
/* "order" glows inside "disorderly" — the whole premise in one word */
.brand-name .ord { color: var(--acid); text-shadow: 0 0 16px rgba(0,255,163,.55); }
/* The links live in a dropdown at EVERY width, not just mobile. Strung out
   inline they crowd the wordmark and drag the eye left; behind a burger the bar
   reads as three deliberate objects: mark, action, menu. It also keeps the bar
   a constant height, which every anchor landing is calculated against. */
.nav-links {
  position: fixed; top: 67px; right: 0;
  width: min(300px, 100vw);
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: rgba(4,6,11,.97);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-top: 0; border-right: 0;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.85), 0 0 40px -24px var(--acid);
  padding: .3rem 0 .5rem;
  transform: translateY(-10px); opacity: 0; pointer-events: none;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), opacity .16s ease;
  max-height: calc(100vh - 67px); overflow-y: auto;
  z-index: 99;
}
.nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-links a {
  white-space: nowrap; padding: .8rem 1.4rem; font-size: .95rem;
  border-bottom: 1px solid var(--line2); color: var(--muted);
}
.nav-links a:last-child { border-bottom: 0; }
.nav-links a:hover { color: var(--text); background: rgba(0,255,163,.06); }
.nav-links a.active { color: var(--acid); border-left: 2px solid var(--acid); }
.nav-links a.active::after { display: none; }

/* Join + burger: pinned right, never part of the collapsing set. */
.nav-actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; margin-left: auto; }
.nav-burger {
  display: flex; width: 34px; height: 30px; padding: 6px 4px;
  background: none; border: 0; cursor: pointer; flex-direction: column;
  justify-content: space-between;
}
.nav-burger span {
  display: block; height: 2px; width: 100%; background: var(--acid);
  box-shadow: 0 0 8px rgba(0,255,163,.7);
  transition: transform .2s ease, opacity .15s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.nav-locked { overflow: hidden; }
.nav-links a { color: var(--muted); font-size: .86rem; font-weight: 500; letter-spacing: .02em; }
.nav-links a:hover { color: var(--text); }
/* current page */
.nav-links a.active { color: var(--acid); }
.nav-links a.active::after {
  content: ''; display: block; height: 1px; margin-top: 3px;
  background: var(--acid); box-shadow: 0 0 8px var(--acid);
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  --bc: var(--acid);
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-weight: 600; font-size: .92rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .82rem 1.7rem; cursor: pointer;
  color: var(--void); background: var(--bc); border: 1px solid var(--bc);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 0 24px -6px var(--bc);
  transition: transform .12s, box-shadow .18s, filter .18s;
}
.btn:hover { filter: brightness(1.12); box-shadow: 0 0 38px -6px var(--bc); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--bc); box-shadow: inset 0 0 24px -14px var(--bc); }
.btn.ghost:hover { background: rgba(0,255,163,.08); }
.btn.plasma { --bc: var(--plasma); }
.btn.ion { --bc: var(--ion); }
.btn[disabled], .btn.disabled { opacity: .4; pointer-events: none; }

/* ── panels ───────────────────────────────────────────────────────────── */
.panel {
  position: relative; background: linear-gradient(160deg, var(--panel), var(--deep));
  border: 1px solid var(--line2); padding: 1.6rem;
}
/* corner brackets — the recurring HUD motif */
.panel::before, .panel::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--acid); border-style: solid; opacity: .8;
}
.panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.panel.plasma::before, .panel.plasma::after { border-color: var(--plasma); }
.panel.ion::before, .panel.ion::after { border-color: var(--ion); }
.panel.violet::before, .panel.violet::after { border-color: var(--violet); }
.panel h3 { color: #fff; margin-bottom: .5rem; }
.panel p { color: var(--muted); font-size: .93rem; }

.grid { display: grid; gap: 1.1rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: clamp(3rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 4rem); }
/* Interior pages (roadmap, etc). The landing hero is deliberately tall, but a
   page you ARRIVE at from the nav must sit its title exactly where an anchor
   jump would, or the nav feels like it misfires.
   An anchor lands its tag at (scroll-margin 28px + section padding) from the
   viewport top; here the tag sits at (nav 67px + this padding). Solving those
   equal gives the section padding minus 39px, at every viewport width. */
.hero.page { padding-top: calc(clamp(2.75rem, 5.5vw, 4.5rem) - 39px); }
.hero h1 { margin: 1.1rem 0 1.3rem; }
.hero h1 .glow { color: var(--acid); text-shadow: 0 0 40px rgba(0,255,163,.45); }
.hero h1 .out {
  color: transparent; -webkit-text-stroke: 1.5px var(--plasma);
  text-shadow: 0 0 34px rgba(255,43,107,.35);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero-note { margin-top: 1.5rem; font-family: var(--mono); font-size: .78rem; color: var(--dim); }

/* ── stat strip ───────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line2); }
.stat { padding: 1.2rem 1rem; border-right: 1px solid var(--line2); text-align: center; }
.stat:last-child { border-right: 0; }
.stat .k { font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.stat .v { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--text); line-height: 1.15; }
.stat .v.acid { color: var(--acid); } .stat .v.plasma { color: var(--plasma); } .stat .v.ion { color: var(--ion); }

/* ── agent council grid (100 nodes) ───────────────────────────────────── */
.council {
  display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px;
  padding: 1.1rem; border: 1px solid var(--line2); background: rgba(0,0,0,.35);
}
.council i {
  aspect-ratio: 1; background: rgba(0,255,163,.13);
  border: 1px solid rgba(0,255,163,.30);
  animation: node 4s ease-in-out infinite;
}
.council i.d { background: rgba(255,43,107,.16); border-color: rgba(255,43,107,.4); }
.council i.a { background: rgba(0,255,163,.55); box-shadow: 0 0 12px rgba(0,255,163,.6); }
@keyframes node { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* ── vote / proposal ──────────────────────────────────────────────────── */
.vote-bar { height: 10px; background: rgba(255,255,255,.06); display: flex; overflow: hidden; margin: .8rem 0 .5rem; }
.vote-bar .for { background: linear-gradient(90deg, var(--acid), #0ea5e9); box-shadow: 0 0 18px -2px var(--acid); }
.vote-bar .against { background: linear-gradient(90deg, var(--plasma), var(--violet)); }
.vote-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .74rem; color: var(--muted); }

/* ── ticker ───────────────────────────────────────────────────────────── */
.ticker { border-block: 1px solid var(--line); background: rgba(0,255,163,.04); overflow: hidden; padding: .55rem 0; }
.ticker-track { display: flex; gap: 3rem; white-space: nowrap; animation: slide 42s linear infinite; }
.ticker span { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ticker span b { color: var(--acid); font-weight: 700; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── tiers ────────────────────────────────────────────────────────────── */
.tier { display: flex; flex-direction: column; }
.tier .tier-id { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; }
.tier .tier-name { font-family: var(--display); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; margin: .15rem 0 .1rem; }
.tier.prime .tier-name { color: var(--acid); }
.tier.open .tier-name { color: var(--ion); }
.tier .tier-supply { font-family: var(--mono); font-size: .8rem; color: var(--muted); margin-bottom: 1rem; }
.tier ul { list-style: none; margin-top: .4rem; flex: 1; }
.tier li { position: relative; padding: .34rem 0 .34rem 1.5rem; color: var(--muted); font-size: .92rem; }
.tier li::before { content: '▸'; position: absolute; left: 0; color: var(--acid); }
.tier.open li::before { color: var(--ion); }

/* ── timeline ─────────────────────────────────────────────────────────── */
.phase { position: relative; padding: 0 0 2.4rem 2.2rem; border-left: 1px solid var(--line2); margin-left: .4rem; }
.phase:last-child { border-left-color: transparent; }
.phase::before {
  content: ''; position: absolute; left: -7px; top: .3rem; width: 13px; height: 13px;
  background: var(--void); border: 2px solid var(--dim); transform: rotate(45deg);
}
.phase.done::before { border-color: var(--acid); background: var(--acid); box-shadow: 0 0 14px var(--acid); }
.phase.now::before { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 16px var(--amber); animation: pulse 2s infinite; }
.phase .ph-tag { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.phase.done .ph-tag { color: var(--acid); } .phase.now .ph-tag { color: var(--amber); }
.phase h3 { font-size: 1.35rem; margin: .25rem 0 .7rem; color: #fff; text-transform: uppercase; }
.phase ul { list-style: none; }
.phase li { position: relative; padding: .3rem 0 .3rem 1.4rem; color: var(--muted); font-size: .94rem; }
.phase li::before { content: '›'; position: absolute; left: 0; color: var(--dim); }

/* ── waitlist ─────────────────────────────────────────────────────────── */
.waitlist { display: flex; gap: .7rem; max-width: 520px; }
.waitlist input {
  flex: 1; padding: .85rem 1rem; font: inherit; font-size: .95rem;
  background: rgba(0,0,0,.5); border: 1px solid var(--line2); color: var(--text);
}
.waitlist input:focus { outline: none; border-color: var(--acid); box-shadow: 0 0 0 3px rgba(0,255,163,.12); }
.waitlist input::placeholder { color: var(--dim); }
.wl-msg { font-family: var(--mono); font-size: .8rem; margin-top: .7rem; min-height: 1.2rem; color: var(--acid); }

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq { border: 1px solid var(--line2); background: rgba(255,255,255,.015); margin-bottom: .55rem; }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2.8rem 1rem 1.1rem; position: relative; font-weight: 600; color: var(--text); font-family: var(--display); letter-spacing: .01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--acid); font-family: var(--mono); font-size: 1.15rem; }
.faq[open] summary::after { content: '−'; }
.faq[open] summary { border-bottom: 1px solid var(--line2); }
.faq p { padding: 1rem 1.1rem; color: var(--muted); font-size: .93rem; }
.faq p + p { padding-top: 0; }

/* ── notice ───────────────────────────────────────────────────────────── */
.notice {
  border: 1px solid rgba(255,176,32,.32); border-left: 3px solid var(--amber);
  background: rgba(255,176,32,.06); padding: 1.2rem 1.3rem;
}
.notice h3 { color: var(--amber); font-size: 1rem; margin-bottom: .45rem; text-transform: uppercase; }
.notice p { color: #d8c9a8; font-size: .89rem; }
.notice p + p { margin-top: .55rem; }

/* ── footer ───────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 3rem 1.5rem; text-align: center; color: var(--dim); font-size: .82rem; }
footer .flinks { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
footer .flinks a { color: var(--muted); }
footer .fine { font-family: var(--mono); font-size: .7rem; max-width: 70ch; margin: 1.2rem auto 0; line-height: 1.7; color: #3f4f61; }

/* ── responsive ───────────────────────────────────────────────────────── */
/* On a phone the dropdown spans the full width instead of sitting as a card. */
@media (max-width: 620px) {
  .nav-links { left: 0; right: 0; width: auto; border-left: 0; }
  .nav-links a { padding: .9rem 1.5rem; font-size: 1rem; }
}

@media (max-width: 900px) {
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line2); }
  .council { grid-template-columns: repeat(10, 1fr); }
}
@media (max-width: 620px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .nav { flex-wrap: nowrap; gap: .8rem; }
  .brand-name { font-size: 1.05rem; }
  .nav-links { gap: 1rem; font-size: .8rem; }
  .waitlist { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}