/* ==========================================================================
   pointchar.in — civic signage brutalism
   Tokens first, then layout, then components. Mobile-first throughout.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts --
   Self-hosted. unicode-range means the Devanagari slices are only fetched
   when the page actually contains Devanagari, so English pages stay light. */

@font-face {
  font-family: 'Anton';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/Anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD, U+20B9;
}
@font-face {
  font-family: 'Anton';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/Anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304-0311, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}

@font-face {
  font-family: 'Anek Devanagari';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('/fonts/AnekDevanagari-800-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: 'Anek Devanagari';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/AnekDevanagari-700-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/IBMPlexSans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+20B9;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/IBMPlexSans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+20B9;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/IBMPlexSans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+20B9;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/IBMPlexSans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+20B9;
}

@font-face {
  font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/IBMPlexSansDevanagari-400-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/IBMPlexSansDevanagari-500-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/IBMPlexSansDevanagari-600-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/IBMPlexSansDevanagari-700-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  color-scheme: light dark;

  --ink: #16140F;
  --paper: #FCFAF2;
  --panel: #FFFFFF;
  --field: #FFFFFF;
  --line: #16140F;
  --muted: #57524A;
  --signal: #F5C400;
  --on-signal: #16140F;
  --barrier: #C8321F;
  --saffron: #E8801C;
  --green: #16803F;
  --stripe-b: #FFFFFF;

  --shadow-hard: 10px 10px 0 var(--signal);
  --shadow-hard-sm: 6px 6px 0 var(--signal);
  --shadow-ink: 6px 6px 0 var(--ink);

  --display: 'Anton', 'Anek Devanagari', Impact, 'Arial Narrow', sans-serif;
  --display-hi: 'Anek Devanagari', 'Anton', sans-serif;
  --body: 'IBM Plex Sans', 'IBM Plex Sans Devanagari', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* 4/8px rhythm */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --wrap: 1180px;
  --gutter: 16px;
  --radius: 10px;
  --radius-sm: 8px;
  --border: 3px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-slow: 320ms;

  --z-nav: 40;
  --z-sticky: 50;
  --z-modal: 100;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink: #F3EFE3;
    --paper: #15130F;
    --panel: #1F1C17;
    --field: #26231D;
    --line: #F3EFE3;
    --muted: #B9B2A3;
    --barrier: #E5553F;
    --green: #3FB46A;
    --saffron: #F09A44;
    --stripe-b: #F3EFE3;
    --shadow-hard: 10px 10px 0 var(--signal);
    --shadow-ink: 6px 6px 0 var(--signal);
  }
}
:root[data-theme='dark'] {
  --ink: #F3EFE3;
  --paper: #15130F;
  --panel: #1F1C17;
  --field: #26231D;
  --line: #F3EFE3;
  --muted: #B9B2A3;
  --barrier: #E5553F;
  --green: #3FB46A;
  --saffron: #F09A44;
  --stripe-b: #F3EFE3;
  --shadow-ink: 6px 6px 0 var(--signal);
}

/* ----------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media (min-width: 768px) { body { font-size: 18px; } }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.92;
  margin: 0;
  letter-spacing: -0.5px;
  text-wrap: balance;
}
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3, :lang(hi) h4,
[lang='hi'] h1, [lang='hi'] h2, [lang='hi'] h3, [lang='hi'] h4 {
  font-family: var(--display-hi);
  font-weight: 800;
  line-height: 1.14; /* Devanagari needs headroom for matras */
  letter-spacing: 0;
}

p { margin: 0 0 var(--s3); max-width: 68ch; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; border-radius: 2px; }

/* Every ₹ figure and counter uses tabular figures so nothing jitters. */
.num, .counter b, .calc-out .big, .stat b, td.num, .odo {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: var(--s2); z-index: var(--z-modal);
  background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4);
  border-radius: var(--radius-sm); font-weight: 700;
}
.skip-link:focus { left: var(--s4); }

/* --------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 24px; } }

section { padding-block: var(--s7); border-bottom: var(--border) solid var(--line); }
@media (min-width: 768px) { section { padding-block: var(--s9); } }

/* The menu scrolls to these, and .topbar is sticky, so leave it room. */
#what, #meter, #reasons, #both, #sign { scroll-margin-top: 74px; }
@media (min-width: 720px) { #what, #meter, #reasons, #both, #sign { scroll-margin-top: 92px; } }

.sec-head { margin-bottom: var(--s6); }
.sec-head h2 {
  font-size: clamp(36px, 8vw, 72px);
  text-transform: uppercase;
}
[lang='hi'] .sec-head h2 { text-transform: none; font-size: clamp(30px, 6.4vw, 58px); }
.sec-head h2::after {
  content: ''; display: block; width: 88px; height: 8px;
  background: var(--signal); margin-top: var(--s4);
}
.sec-head p { color: var(--muted); margin: var(--s4) 0 0; font-size: 1.05rem; }
@media (min-width: 900px) {
  .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s7); align-items: end; }
  .sec-head p { margin-top: 0; }
}

.stack > * + * { margin-top: var(--s4); }
.center { text-align: center; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s5);
  border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--ink); color: var(--paper);
  font: 600 17px/1 var(--body); text-decoration: none; cursor: pointer;
  white-space: nowrap; text-align: center;
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn:active { transform: translateY(2px) scale(0.99); }

.btn.signal { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.btn.signal:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.block { width: 100%; }
.btn.lg { min-height: 58px; font-size: 19px; padding-inline: var(--s6); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------ stripes ---- */
.stripe-band {
  height: 18px;
  background-image: repeating-linear-gradient(
    115deg, var(--barrier) 0 22px, var(--stripe-b) 22px 44px
  );
  border-block: 2px solid var(--line);
}
.stripe-band.thin { height: 12px; }

/* ------------------------------------------------------------------ nav -- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--paper);
  border-bottom: 2px solid var(--line);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding-block: var(--s3);
}
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; min-width: 0; }
.brand img {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--stripe-b);
  /* A hairline keeps the white plate from reading as a floating blob,
     particularly against the dark theme's near-black paper. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}
/* min-width:0 plus ellipsis means the wordmark shrinks rather than pushing the
   bar wider than the screen — truncation is the safety net, not the design. */
.brand-txt {
  font-weight: 700; font-size: 15px; line-height: 1.2; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-txt small {
  display: block; font-weight: 400; color: var(--muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis;
}
.nav-right { display: flex; align-items: center; gap: var(--s2); flex: none; }
.topbar-cta { flex: none; }
.cta-short { display: none; }

/* Inline section menu. Measured against the shipped IBM Plex metrics: with four
   links and the parent org as the primary brand line, the full bar needs 956px
   of content width, so it appears from 1080px up (76px spare). Below that the
   same links live in the drop-down panel. */
.nav-links { display: none; }
@media (min-width: 1080px) {
  .nav-links { display: flex; align-items: center; gap: var(--s5); min-width: 0; }
  .nav-links a {
    text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap;
    padding: var(--s2) 0; border-bottom: 3px solid transparent;
    transition: border-color var(--t-fast);
  }
  .nav-links a:hover { border-bottom-color: var(--signal); }
  .nav-toggle { display: none; }
}

.nav-toggle {
  display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); cursor: pointer;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; background: var(--ink);
  box-shadow: 0 6px 0 var(--ink), 0 -6px 0 var(--ink);
}
.nav-toggle[aria-expanded='true'] { background: var(--ink); }
.nav-toggle[aria-expanded='true'] span { background: var(--paper); box-shadow: 0 6px 0 var(--paper), 0 -6px 0 var(--paper); }

/* The panel overlays the page rather than pushing it down, so opening the menu
   never shifts what you were reading. */
.mobile-nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper); border-bottom: var(--border) solid var(--line);
  padding-block: var(--s2) var(--s4);
  max-height: calc(100vh - 120px); overflow-y: auto;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.13);
}
.mobile-nav.open { display: block; animation: mn-in var(--t-fast) var(--ease-out); }
@keyframes mn-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mobile-nav.open { animation: none; } }
@media (min-width: 1080px) { .mobile-nav, .mobile-nav.open { display: none; } }
.mobile-nav a {
  display: block; padding: var(--s3) 0; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 20%, transparent);
  min-height: 48px; display: flex; align-items: center;
}
.mobile-nav a:last-child { border-bottom: 0; }
/* The wordmark leaves the bar on narrow phones, so it lives here instead. */
.mn-brand {
  display: none; margin: 0 0 var(--s2); font-weight: 700; font-size: 14px; line-height: 1.2;
}
.mn-brand small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
@media (max-width: 440px) { .mn-brand { display: block; } }

/* Phones: the bar is logo + wordmark + one call to action, and all three stay.
   There is no sticky bottom bar any more, so the header CTA has to survive. */
@media (max-width: 719px) {
  .topbar-in { gap: var(--s2); padding-block: var(--s2); }
  .brand { gap: var(--s2); }
  .brand img { width: 40px; height: 40px; }
  .brand-txt { font-size: 13px; }
  .brand-txt small { font-size: 10.5px; }
  .topbar-cta { min-height: 44px; padding: 0 var(--s4); font-size: 15px; }
}
/* Below this the full label and the org line cannot both fit, and the org line
   is the half worth keeping — the CTA is unmistakable either way. */
@media (max-width: 560px) {
  .cta-full { display: none; }
  .cta-short { display: inline; }
}
/* Below this the wordmark cannot share the bar with both controls, so it moves
   into the panel (.mn-brand) and the bar is logo + Sign + menu. */
@media (max-width: 440px) {
  .brand-txt { display: none; }
  .brand img { width: 38px; height: 38px; }
  .nav-toggle { width: 44px; height: 44px; }
}

/* Nav links, language toggle, mobile drawer and the sticky bottom CTA were
   removed with the unapproved pages — see the baseline commit to restore. */

/* ----------------------------------------------------------------- hero -- */
.hero { border-bottom: var(--border) solid var(--line); overflow: hidden; }
.hero-grid { padding-block: var(--s6) var(--s7); }
@media (min-width: 1024px) {
  .hero-grid {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--s7); align-items: start; padding-block: var(--s7) var(--s8);
  }
}

.eyebrow {
  display: inline-block; background: var(--signal); color: var(--on-signal);
  font-weight: 700; font-size: 14px; line-height: 1.3;
  padding: var(--s1) var(--s2); margin-bottom: var(--s4);
  border: 2px solid var(--ink);
}
.hero h1 {
  font-size: clamp(52px, 13.2vw, 144px);
  /* 0.84 made Anton's caps collide between lines; 0.93 keeps the tight
     poster feel without the ascenders touching the line above. */
  line-height: 0.93;
  text-transform: uppercase; letter-spacing: -2px;
}
[lang='hi'] .hero h1 {
  font-size: clamp(40px, 10.5vw, 112px);
  line-height: 1.06; text-transform: none; letter-spacing: -1px;
}
.hero .chant {
  display: inline-block; margin-top: var(--s4);
  font-weight: 700; font-size: clamp(15px, 3.4vw, 19px);
  letter-spacing: 2px; text-transform: uppercase; color: var(--barrier);
}
[lang='hi'] .hero .chant { text-transform: none; letter-spacing: 0; }
.hero .lede {
  font-size: clamp(19px, 4.4vw, 25px); line-height: 1.4; font-weight: 500;
  margin: var(--s5) 0 var(--s4); max-width: 34ch;
}
.hero .sub { color: var(--muted); max-width: 46ch; }

/* toll barrier animation */
.boom { position: relative; height: 110px; margin: var(--s5) 0 var(--s2); }
.boom svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 768px) { .boom { height: 160px; } }
.boom .arm {
  transform-origin: 34px 60px; transform: rotate(-58deg);
  animation: boom-lower 1.25s var(--ease-out) 0.35s forwards;
}
@keyframes boom-lower { to { transform: rotate(0deg); } }

/* ------------------------------------------------------------- counter -- */
.counter { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.counter b { font-family: var(--display); font-weight: 400; font-size: clamp(42px, 11vw, 68px); line-height: 1; }
.counter span { color: var(--muted); font-size: 15px; }
.counter strong { color: var(--ink); }

.meter {
  height: 14px; border: 2px solid var(--line); border-radius: 7px;
  overflow: hidden; margin-top: var(--s3); max-width: 520px; background: var(--panel);
}
.meter i {
  display: block; height: 100%; width: 0; background: var(--green);
  transition: width 900ms var(--ease-out);
}
.goal-line { font-size: 14px; color: var(--muted); margin-top: var(--s2); }

.velocity {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 14px; font-weight: 600; color: var(--green); margin-top: var(--s2);
}
.velocity .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

/* countdown */
.countdown { display: flex; gap: var(--s2); margin-top: var(--s5); flex-wrap: wrap; }
.cd-unit {
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3); min-width: 68px; text-align: center; background: var(--panel);
}
.cd-unit b { display: block; font-family: var(--display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-unit span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

/* ---------------------------------------------------------- sign panel -- */
.sign {
  background: var(--panel); border: var(--border) solid var(--line);
  border-radius: var(--radius); padding: var(--s5);
  box-shadow: var(--shadow-hard-sm);
}
@media (min-width: 768px) { .sign { padding: var(--s6); box-shadow: var(--shadow-hard); } }
.sign h2 { font-size: clamp(30px, 7vw, 42px); }
.sign .sub { color: var(--muted); font-size: 15px; margin: var(--s2) 0 var(--s4); }

.tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; margin-bottom: var(--s4);
}
.tabs button {
  min-height: 50px; border: 0; background: transparent; color: var(--ink);
  font: 600 15px var(--body); cursor: pointer; transition: background var(--t-fast);
}
.tabs button[aria-selected='true'] { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- forms -- */
.field { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3); }
.field label { font-weight: 600; font-size: 14px; }
.field .hint { font-weight: 400; color: var(--muted); }
.field .err { color: var(--barrier); font-size: 13px; font-weight: 600; }

input, select, textarea {
  width: 100%; min-height: 50px; padding: var(--s3);
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field); color: var(--ink);
  font: 16px var(--body); /* 16px avoids iOS zoom-on-focus */
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus, select:focus, textarea:focus { border-color: var(--saffron); }
input[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--barrier); }
textarea { min-height: 86px; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: var(--s7);
}
.row2 { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 480px) { .row2 { grid-template-columns: 1fr 1fr; } }

.check { display: flex; gap: var(--s3); align-items: flex-start; font-size: 14px; margin: var(--s3) 0; line-height: 1.45; }
.check input[type='checkbox'] {
  width: 24px; height: 24px; min-height: 24px; margin: 1px 0 0; flex: none;
  accent-color: var(--green); cursor: pointer;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.msg { margin-top: var(--s3); font-weight: 600; font-size: 15px; }
.msg.err { color: var(--barrier); }
.msg.ok { color: var(--green); }
.privacy-note { font-size: 12.5px; color: var(--muted); margin-top: var(--s3); line-height: 1.5; }

/* ---------------------------------------------------------------- facts -- */
.facts { border-top: var(--border) solid var(--line); }
@media (min-width: 768px) { .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact {
  padding: var(--s4) 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 25%, transparent);
  transition: background var(--t-base);
}
@media (min-width: 768px) {
  .fact { padding: var(--s5) var(--s5) var(--s5) 0; }
  .fact:nth-child(odd) { border-right: 1px solid color-mix(in srgb, var(--line) 25%, transparent); }
  .fact:nth-child(even) { padding-left: var(--s5); padding-right: 0; }
}
.fact:hover { background: color-mix(in srgb, var(--signal) 12%, transparent); }
.fact dt { font-weight: 700; margin-bottom: var(--s1); display: flex; gap: var(--s2); align-items: baseline; }
.fact dd { margin: 0; color: var(--muted); font-size: 15.5px; }
.fact .tag { width: 12px; height: 12px; flex: none; margin-top: 5px; }
.fact.toll .tag { background: var(--barrier); }
.fact.free .tag { background: var(--green); }

/* slab table */
.slabs { width: 100%; border-collapse: collapse; margin-top: var(--s4); }
.slabs th, .slabs td { text-align: left; padding: var(--s3); border-bottom: 1px solid color-mix(in srgb, var(--line) 25%, transparent); }
.slabs th { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.slabs td { font-weight: 600; }
.slabs td.num { text-align: right; font-variant-numeric: tabular-nums; }
.slabs tr:hover td { background: color-mix(in srgb, var(--signal) 10%, transparent); }
.pill {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 2px var(--s2); border-radius: 999px;
}
.pill.free { background: var(--green); color: #fff; }
.pill.cap { background: var(--barrier); color: #fff; }

/* ------------------------------------------------------------ toll meter -- */
.calc { border: var(--border) solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) { .calc { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.calc-in { padding: var(--s5); border-bottom: var(--border) solid var(--line); }
@media (min-width: 900px) { .calc-in { border-bottom: 0; border-right: var(--border) solid var(--line); } }
.calc-out {
  padding: var(--s5); background: var(--signal); color: var(--on-signal);
  display: flex; flex-direction: column; gap: var(--s4);
}
.calc-out .big { font-family: var(--display); font-size: clamp(48px, 13vw, 104px); line-height: 0.95; }
.calc-out .big-label { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; }
[lang='hi'] .calc-out .big-label { text-transform: none; letter-spacing: 0; }
.calc-out .lines {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s5);
  font-size: 15.5px; border-top: 2px solid var(--on-signal); padding-top: var(--s3);
}
.calc-out .lines b { text-align: right; font-variant-numeric: tabular-nums; }
.calc-out small { font-size: 13px; line-height: 1.5; display: block; }
.calc-out.exempt { background: var(--green); color: #fff; }
.calc-out.exempt .lines { border-top-color: rgba(255,255,255,0.5); }

.presets { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.preset-btn {
  min-height: 44px; padding: 0 var(--s3); border: 2px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel); color: var(--ink);
  font: 600 14px var(--body); cursor: pointer; transition: all var(--t-fast);
}
.preset-btn[aria-pressed='true'] { background: var(--ink); color: var(--paper); }

input[type='range'] {
  min-height: 40px; padding: 0; border: 0; background: transparent;
  accent-color: var(--barrier); cursor: pointer;
}
.range-val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- pillars -- */
.pillars { border-top: var(--border) solid var(--line); }
@media (min-width: 768px) { .pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pillar { padding: var(--s5) 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 25%, transparent); }
@media (min-width: 768px) {
  .pillar { padding: var(--s6) var(--s6) var(--s5) 0; }
  .pillar:nth-child(even) { padding-left: var(--s6); padding-right: 0; border-left: 1px solid color-mix(in srgb, var(--line) 25%, transparent); }
  .pillar:nth-last-child(-n+2) { border-bottom: 0; }
}
.pillar h3 { font-size: clamp(24px, 5.5vw, 32px); margin-bottom: var(--s3); text-transform: uppercase; }
[lang='hi'] .pillar h3 { text-transform: none; font-size: clamp(21px, 4.6vw, 27px); }
.pillar p { color: var(--muted); margin: 0; }

/* --------------------------------------------------------- both sides ---- */
.sides { border: var(--border) solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 768px) { .sides { display: grid; grid-template-columns: 1fr 1fr; } }
.sides > div { padding: var(--s5); }
.sides > div + div { border-top: var(--border) solid var(--line); }
@media (min-width: 768px) { .sides > div + div { border-top: 0; border-left: var(--border) solid var(--line); } }
.sides h3 { font-size: clamp(22px, 5vw, 30px); margin-bottom: var(--s4); text-transform: uppercase; }
[lang='hi'] .sides h3 { text-transform: none; }
.sides ul { margin: 0; padding-left: var(--s5); }
.sides li { margin-bottom: var(--s3); color: var(--muted); }
.sides .ours { background: color-mix(in srgb, var(--signal) 14%, transparent); }
.sides .ours li { color: var(--ink); }

/* ------------------------------------------------------- "not saying" ---- */
.notsaying { background: var(--ink); color: var(--paper); }
.notsaying .sec-head h2 { color: var(--paper); }
.notsaying .sec-head p { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.ns-grid { display: grid; gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 768px) { .ns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } }
.ns-item { border-left: 4px solid var(--barrier); padding-left: var(--s4); }
.ns-item h3 { font-family: var(--body); font-weight: 700; font-size: 17px; line-height: 1.35; margin-bottom: var(--s2); }
.ns-item p { color: color-mix(in srgb, var(--paper) 70%, transparent); margin: 0; font-size: 15.5px; }
.ns-outro {
  margin-top: var(--s6); padding: var(--s5);
  border: 2px solid var(--signal); border-radius: var(--radius);
  background: color-mix(in srgb, var(--signal) 10%, transparent);
}
.ns-outro h3 { font-size: clamp(26px, 6vw, 40px); color: var(--signal); margin-bottom: var(--s3); text-transform: uppercase; }
[lang='hi'] .ns-outro h3 { text-transform: none; }
.ns-outro p { color: var(--paper); margin: 0; max-width: 72ch; }

/* --------------------------------------------------------- coalition ----- */
.coalition { border: var(--border) solid var(--line); border-radius: var(--radius); padding: var(--s5); background: var(--panel); }
@media (min-width: 768px) { .coalition { padding: var(--s6); } }
.coalition h3 { font-size: clamp(24px, 5.5vw, 38px); margin-bottom: var(--s4); text-transform: uppercase; }
[lang='hi'] .coalition h3 { text-transform: none; }
.coalition .note { font-size: 14px; color: var(--muted); border-top: 1px solid color-mix(in srgb, var(--line) 25%, transparent); padding-top: var(--s3); margin: var(--s4) 0 0; }

/* ------------------------------------------------------------ the wall -- */
.wall { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: var(--s4); background: var(--panel);
  display: flex; flex-direction: column; gap: var(--s3);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--signal); }
.card q { display: block; font-size: 16px; line-height: 1.5; quotes: '“' '”'; }
.card .who { margin-top: auto; }
.card .who b { display: block; font-size: 15px; }
.card .who span { color: var(--muted); font-size: 14px; }
.card .vbadge { color: var(--green); font-size: 12px; font-weight: 700; }
.empty { border: 2px dashed var(--line); border-radius: var(--radius); padding: var(--s6); text-align: center; color: var(--muted); grid-column: 1 / -1; }

/* leaderboard */
.board { display: grid; gap: var(--s2); margin-top: var(--s5); }
.board-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center; font-size: 15px; }
.board-bar { grid-column: 1 / -1; height: 8px; background: color-mix(in srgb, var(--line) 12%, transparent); border-radius: 4px; overflow: hidden; }
.board-bar i { display: block; height: 100%; background: var(--signal); }

/* ------------------------------------------------------------------ faq -- */
details { border-top: 2px solid var(--line); padding: var(--s4) 0; }
details:last-of-type { border-bottom: 2px solid var(--line); }
summary {
  font-weight: 700; font-size: 17px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: var(--s4); align-items: flex-start;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-family: var(--display); font-size: 28px; line-height: 0.8; flex: none; }
details[open] summary::after { content: '–'; }
details .answer { margin-top: var(--s3); color: var(--muted); }
details .answer p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- posters -- */
.poster-grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 600px) { .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .poster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.poster {
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--panel); overflow: hidden; display: flex; flex-direction: column;
}
.poster-img { background: color-mix(in srgb, var(--line) 8%, transparent); aspect-ratio: 4 / 5; }
.poster-img img { width: 100%; height: 100%; object-fit: cover; }
.poster-body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.poster-body h3 { font-family: var(--body); font-weight: 700; font-size: 17px; line-height: 1.3; }
.poster-dl { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; }
.poster-dl a {
  font-size: 13px; font-weight: 600; text-decoration: none;
  border: 2px solid var(--line); border-radius: 999px; padding: 6px var(--s3);
  min-height: 36px; display: inline-flex; align-items: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.poster-dl a:hover { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- bands -- */
.band { background: var(--ink); color: var(--paper); border-bottom: 0; }
.band h2 { font-size: clamp(44px, 13vw, 118px); text-transform: uppercase; line-height: 0.9; letter-spacing: -1.5px; }
[lang='hi'] .band h2 { font-size: clamp(32px, 9vw, 86px); text-transform: none; line-height: 1.08; letter-spacing: 0; }
.band p { color: color-mix(in srgb, var(--paper) 82%, transparent); margin: var(--s4) 0 var(--s5); }
.band .btn { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.band .btn:hover { background: transparent; color: var(--paper); border-color: var(--paper); }

/* ---------------------------------------------------------------- steps -- */
.steps { display: grid; gap: var(--s5); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); } }
.step { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.step::before {
  content: counter(step); font-family: var(--display); font-size: 28px; line-height: 1;
  width: 54px; height: 54px; border: 2px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; background: var(--signal); color: var(--on-signal); flex: none;
}
.step h3 { font-family: var(--body); font-weight: 700; font-size: 18px; margin-bottom: var(--s2); line-height: 1.3; }
.step p { color: var(--muted); margin: 0; font-size: 15.5px; }

/* share kit */
.kit { border: 2px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: var(--s4); margin-top: var(--s4); }
.kit h3 { font-family: var(--body); font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: var(--s3); }
.kit pre {
  white-space: pre-wrap; word-break: break-word; font: 15px/1.6 var(--body);
  background: color-mix(in srgb, var(--line) 6%, transparent);
  border-radius: var(--radius-sm); padding: var(--s4); margin: 0 0 var(--s3);
}
.share-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.share-row > * { flex: 1 1 150px; }

/* --------------------------------------------------------------- thanks -- */
.thanks-hero { text-align: center; padding-block: var(--s7); }
.thanks-hero .seq { font-family: var(--display); font-size: clamp(60px, 18vw, 140px); line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.thanks-hero h1 { font-size: clamp(34px, 9vw, 72px); text-transform: uppercase; margin-bottom: var(--s4); }
[lang='hi'] .thanks-hero h1 { text-transform: none; font-size: clamp(28px, 7vw, 56px); }
.copy-row { display: flex; gap: var(--s2); margin-top: var(--s3); }
.copy-row input { font-size: 14px; }

/* --------------------------------------------------------------- footer -- */
footer { padding-block: var(--s6) var(--s7); }
.foot { display: flex; flex-direction: column; gap: var(--s4); font-size: 14px; color: var(--muted); }
@media (min-width: 768px) { .foot { flex-direction: row; justify-content: space-between; align-items: center; } }
.foot .brand img { width: 64px; height: 64px; }
@media (max-width: 719px) { .foot .brand img { width: 52px; height: 52px; } }
.socials { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.socials a {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); transition: background var(--t-fast), color var(--t-fast);
}
.socials a:hover { background: var(--ink); color: var(--paper); }
.socials svg { width: 20px; height: 20px; fill: currentColor; }
.footmeta { display: flex; flex-direction: column; gap: var(--s1); font-size: 14px; color: var(--muted); }
.footmeta strong { color: var(--ink); }
.footmeta a { color: var(--ink); text-decoration: none; }
.footmeta a:hover { text-decoration: underline; }
@media (min-width: 768px) { .footmeta { text-align: right; } }
.site-banner {
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--gutter); text-align: center;
  font-size: 14px; font-weight: 600;
}
.sources { font-size: 12.5px; color: var(--muted); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, var(--line) 20%, transparent); }

/* -------------------------------------------------------------- utility -- */
.notice {
  border: 2px solid var(--saffron); border-radius: var(--radius);
  background: color-mix(in srgb, var(--saffron) 12%, transparent);
  padding: var(--s4); font-size: 15px;
}
.notice.draft { border-color: var(--barrier); background: color-mix(in srgb, var(--barrier) 10%, transparent); }
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(24px, 5vw, 34px); margin: var(--s6) 0 var(--s3); }
.prose h3 { font-size: clamp(20px, 4vw, 26px); margin: var(--s5) 0 var(--s3); }
.prose ul, .prose ol { padding-left: var(--s5); }
.prose li { margin-bottom: var(--s2); }
.prose strong { font-weight: 700; }
.prose hr { border: 0; border-top: 2px solid var(--line); margin: var(--s6) 0; }
.filters { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; margin-bottom: var(--s5); }
.filters .field { margin-bottom: 0; min-width: 170px; }
.pager { display: flex; gap: var(--s2); justify-content: center; margin-top: var(--s6); flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
}
.pager [aria-current='page'] { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------- scroll reveals --
   Inverted on purpose: .reveal alone is fully visible, and JavaScript adds
   .armed only to elements that are still off-screen. If the script never runs,
   fails to parse, or errors early, every section stays readable. */
.reveal.armed { opacity: 0; transform: translateY(16px); }
.reveal.armed.in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .boom .arm { animation: none; transform: rotate(0deg); }
  .reveal, .reveal.armed, .reveal.armed.in { opacity: 1; transform: none; }
  .sticky-cta { transition: none; }
}

@media print {
  .topbar, .sticky-cta, .mobile-nav, .btn, .boom { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  section { padding-block: 12pt; border-bottom: 1px solid #000; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}