/* =========================================================
   TOP 50 UNFORGETTABLE — VOTING (Phase 2) Landing Page
   Plain CSS, mobile-first, no build step.
   ========================================================= */

/* Brand display font — Headline Gothic (hero headline only). */
@font-face {
    font-family: 'T50 Display';
    src: url('assets/fonts/headline-regular.woff2') format('woff2');
    font-weight: 400 900; font-style: normal; font-display: swap;
}
/* Body/heading sans — Manrope (Figma "Family" token). */
@font-face { font-family:'T50 Sans'; src:url('assets/fonts/manrope-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'T50 Sans'; src:url('assets/fonts/manrope-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'T50 Sans'; src:url('assets/fonts/manrope-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'T50 Sans'; src:url('assets/fonts/manrope-800.woff2') format('woff2'); font-weight:800; font-display:swap; }

:root {
    /* Official 2026 HCP tokens (from Figma) */
    --orange:   #ff9b24;   /* Golden Hour */
    --orange-600:#ec8613;
    --navy:     #003a6d;   /* Denim — deep navy sections */
    --navy-800: #013b6d;
    --carbon:   #13181a;   /* nav + footer */
    --satin:    #f0f4f7;   /* light gray bg */
    --cobalt:   #0065c1;   /* primary blue */
    --cobalt-700:#004a8f;
    --card-navy:#003a6d;   /* dark card */
    --card-blue:#0065c1;   /* blue card */
    --sky:      #ccedff;   /* light blue (tags) */
    --white:    #ffffff;
    --near-white:#fafafa;
    --ink-900:  #15181d;
    --ink-700:  #33414f;
    --ink-500:  #5b6478;   /* AA on --satin at 13px bold (4.24:1 -> 5.4:1) */
    --footer-link:#64c7ff;
    --footer-bg:#13181a;

    --font-display:'T50 Display','Oswald','Arial Narrow',Impact,sans-serif;
    --font:'T50 Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --maxw:1200px;
    --nav-h:64px;
}

/* ---------- base ---------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
/* Guards a stray wide child from producing a horizontal scrollbar on mobile.
   Kept off <html> on purpose: overflow-x there breaks position:sticky on the nav
   in Safari. */
body { overflow-x:hidden; }
/* Anchor targets clear the sticky nav instead of hiding behind it. */
:target { scroll-margin-top:calc(var(--nav-h) + 12px); }
[id] { scroll-margin-top:calc(var(--nav-h) + 12px); }
body { margin:0; font-family:var(--font); color:var(--ink-900); background:var(--white); line-height:1.5; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; }
h1,h2,h3,h4 { margin:0; }
p { margin:0; }
ol,ul { margin:0; padding:0; list-style:none; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.center { text-align:center; }

/* Visible only to screen readers — used for the per-state map data. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Keyboard skip link — first focusable element on the page. */
.skip-link { position:absolute; left:16px; top:-64px; z-index:200; background:var(--orange); color:var(--carbon); font-weight:700; padding:12px 18px; border-radius:0 0 8px 8px; text-decoration:none; transition:top .15s ease; }
.skip-link:focus { top:0; }

/* One visible focus ring for every interactive element. Mouse users don't see
   it (:focus-visible), keyboard users always do. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline:3px solid var(--orange); outline-offset:3px; border-radius:4px;
}
.map-section a:focus-visible, .faq a:focus-visible, .footer a:focus-visible { outline-color:var(--orange); }

.eyebrow { font-family:var(--font); text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:.82rem; margin-bottom:12px; }
.eyebrow--center { text-align:center; }
.eyebrow--blue { color:var(--cobalt); }
.eyebrow--orange { color:var(--orange); }

.section-title { font-family:var(--font); font-weight:800; font-size:2.4rem; line-height:1.1; color:var(--ink-900); text-align:center; }
.section-title--light { color:var(--white); }
.section-sub { text-align:center; color:var(--ink-700); font-size:1.15rem; margin:10px auto 0; max-width:760px; }
.section-sub--light { color:#dbe6f2; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:.4em; font-family:var(--font); font-weight:700; text-decoration:none; border:0; border-radius:999px; cursor:pointer; transition:background .15s,transform .15s; white-space:nowrap; }
.btn--primary { background:var(--orange); color:var(--carbon); }
.btn--primary:hover { background:var(--orange-600); transform:translateY(-1px); }
.btn--sm { font-size:.85rem; padding:9px 18px; }
.btn--lg { font-size:1.1rem; padding:15px 30px; }

/* ---------- NAV ---------- */
.nav { position:sticky; top:0; z-index:100; background:var(--carbon); height:var(--nav-h); display:flex; align-items:center; }
.nav__inner { width:100%; max-width:1440px; margin:0 auto; padding:0 40px; display:flex; align-items:center; gap:20px; }
.nav__logo--full { height:15px; width:auto; }
.nav__logo--icon { display:none; height:22px; width:auto; }
.nav__links { display:flex; align-items:center; gap:26px; margin-left:20px; }
.nav__links a { color:#fff; text-decoration:none; font-size:.92rem; font-weight:600; padding:22px 0; position:relative; }
.nav__links a.is-active { color:var(--orange); }
.nav__links a.is-active::after { content:""; position:absolute; left:0; right:0; bottom:14px; height:3px; background:var(--orange); border-radius:2px; }
.nav__actions { margin-left:auto; display:flex; align-items:center; gap:18px; }
.nav__status { color:var(--orange); font-size:.8rem; font-weight:600; white-space:nowrap; }
.nav__burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__burger span { display:block; height:2px; background:#fff; border-radius:2px; transition:.2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero { background:var(--carbon) center/cover no-repeat; background-image:linear-gradient(rgba(10,12,14,.34),rgba(10,12,14,.5)),url('assets/hero/hero-desktop.webp'); color:var(--white); text-align:center; }
.hero__inner { max-width:900px; margin:0 auto; padding:60px 24px 72px; display:flex; flex-direction:column; align-items:center; }
.hero__lockup { width:420px; max-width:80%; margin:0 auto 22px; height:auto; }
.hero__eyebrow { color:var(--orange); text-transform:uppercase; font-weight:800; font-size:1rem; letter-spacing:.06em; margin-bottom:14px; }
.hero__headline { font-family:var(--font-display); text-transform:uppercase; font-size:4rem; line-height:.96; letter-spacing:.01em; margin-bottom:20px; }
.hero__body { font-size:1.3rem; line-height:1.45; max-width:760px; margin:0 auto 34px; color:#eef2f6; }
.countdown { display:flex; align-items:flex-start; justify-content:center; gap:22px; }
.countdown__unit { display:flex; flex-direction:column; align-items:center; min-width:64px; }
.countdown__num { font-family:var(--font-display); font-size:3.1rem; line-height:1; color:var(--orange); letter-spacing:.02em; }
.countdown__label { font-size:1rem; margin-top:8px; color:var(--near-white); font-weight:600; }
.countdown__sep { width:1px; align-self:flex-start; background:rgba(255,255,255,.35); margin-top:4px; height:50px; }
/* Shown in place of the countdown after the close time passes (initCountdown). */
.countdown-closed { text-align:center; }
.countdown-closed__title { font-family:var(--font-display); text-transform:uppercase; font-size:2.4rem; color:var(--orange); line-height:1; }
.countdown-closed__body { margin-top:10px; color:var(--near-white); font-size:1.05rem; }
/* Once voting is closed, the ballot links and the "open through" pill are wrong. */
.is-voting-closed .js-vote, .is-voting-closed .nav__status, .is-voting-closed .hero__deadline { display:none; }

.hero__deadline { margin-top:18px; font-size:.92rem; letter-spacing:.1em; font-weight:700; color:var(--near-white); text-transform:uppercase; }
.hero .btn--lg { margin-top:28px; }
.hero { border-bottom:4px solid var(--orange); }

/* ---------- STATS ---------- */
.stats { background:var(--white); padding:64px 0; }
.stats .section-title { margin-bottom:40px; }
.stats__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.stat-card { background:var(--orange); border-radius:16px; padding:48px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.stat-card__num { font-family:var(--font-display); font-size:3.8rem; line-height:1; color:var(--carbon); }
.stat-card__label { margin-top:12px; font-weight:600; color:var(--carbon); font-size:1.1rem; }

/* ---------- FIELD / CAROUSEL ---------- */
.field { background:var(--satin); padding:60px 0 68px; }
.field .section-sub { margin-bottom:24px; }
.field__controls { display:flex; justify-content:center; gap:12px; margin-bottom:28px; }
.ctrl { display:inline-flex; align-items:center; gap:8px; background:var(--cobalt); color:#fff; border:0; border-radius:8px; padding:10px 18px; font-family:var(--font); font-weight:700; font-size:.95rem; cursor:pointer; }
.ctrl:hover { background:var(--cobalt-700); }
.ctrl__ico { width:18px; height:18px; }
.carousel { overflow:hidden; padding:4px 0 8px; margin-bottom:36px; }
.carousel__track { display:flex; gap:24px; padding:0 24px; will-change:transform; }
.card { flex:0 0 300px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.card__img { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; color:#fff; width:100%; object-fit:contain; background:#fff; }
.card__img svg { width:56px; height:56px; opacity:.9; }
.card__img--blue { background:var(--card-blue); }
.card__img--navy { background:var(--card-navy); }
.card__body { padding:16px 18px 18px; }
.card__name { font-weight:700; font-size:1.02rem; color:var(--ink-900); line-height:1.25; }
.card__loc { color:var(--cobalt); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin:6px 0 10px; }
.tag { display:inline-block; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--cobalt); border:1px solid var(--cobalt); border-radius:5px; padding:3px 8px; }
.field__empty { text-align:center; color:var(--ink-700); font-size:1.05rem; padding:32px 24px 8px; }
.field__empty a { color:var(--cobalt); font-weight:700; }
.field__filter { border-top:1px solid #d5dee6; padding-top:26px; display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:32px; }
.field__filter-label { text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:.82rem; color:var(--ink-500); padding-top:9px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:900px; }
.chip { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid #cdd8e2; color:var(--cobalt); border-radius:999px; padding:8px 16px; font-family:var(--font); font-weight:700; font-size:.9rem; cursor:pointer; transition:.12s; }
.chip:hover { border-color:var(--cobalt); }
.chip.is-active { background:var(--cobalt); border-color:var(--cobalt); color:#fff; }

/* ---------- MAP ---------- */
.map-section { background:var(--navy) center/cover no-repeat; background-image:linear-gradient(rgba(0,45,90,.5),rgba(0,45,90,.5)),url('assets/map/navy-texture.webp'); color:#fff; padding:64px 0 72px; }
.map-wrap { max-width:1000px; margin:24px auto 8px; position:relative; }
.map-img { width:100%; height:auto; display:block; }
.state-glow { position:absolute; transform:translate(-50%,-50%); aspect-ratio:1/1; border-radius:50%; mix-blend-mode:screen; pointer-events:none; }
.pin-glow { position:absolute; transform:translate(-50%,-50%); aspect-ratio:1/1; border-radius:50%; mix-blend-mode:screen; pointer-events:none; z-index:1; }
.map-pin { position:absolute; z-index:2; width:0; height:0; }
.map-pin img { display:block; position:absolute; left:0; top:0; transform:translate(-50%,-50%); width:90px; max-width:none; height:auto; }
.map-pin--sm img { width:64px; }
.map-pin__label { position:absolute; left:14px; top:0; transform:translateY(-50%); white-space:nowrap; font-weight:800; font-size:.85rem; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.map-legend__caption { text-align:center; text-transform:uppercase; letter-spacing:.1em; font-size:.85rem; font-weight:700; margin-top:8px; color:#dbe6f2; }

/* ---------- ABOUT (One company / How it works — from V1) ---------- */
.positioning { background:var(--satin); padding:64px 0; }
.positioning__top { display:grid; grid-template-columns:1fr 480px; gap:48px; align-items:start; }
.positioning__headline { font-family:var(--font); font-weight:800; font-size:2.4rem; line-height:1.08; color:var(--ink-900); margin-bottom:18px; }
.positioning__body { color:var(--ink-700); font-size:1.4rem; line-height:1.5; max-width:360px; }
.positioning__media img { border-radius:24px; width:100%; height:auto; }
.how { margin-top:72px; }
.how__title { font-family:var(--font); font-weight:800; text-align:center; font-size:2.1rem; margin-bottom:44px; color:var(--ink-900); }
.how__steps { display:flex; align-items:flex-start; justify-content:center; gap:28px; flex-wrap:nowrap; }
.how__step { flex:0 1 240px; text-align:center; }
.how__num { display:inline-flex; align-items:center; justify-content:center; width:78px; height:78px; background:var(--cobalt); color:var(--white); font-family:var(--font); font-weight:800; font-size:2.4rem; border-radius:12px; margin-bottom:18px; }
.how__step-title { color:var(--cobalt); font-size:1.25rem; margin-bottom:8px; font-family:var(--font); font-weight:800; }
.how__step-body { color:var(--ink-700); font-size:1rem; }
.how__arrow { flex:0 0 auto; padding-top:22px; }
.how__arrow img { width:62px; height:auto; }

/* ---------- FAQ (inserted from V1; bg #EDF2F6 per designer) ---------- */
.faq { background:var(--navy); padding:60px 0 72px; } /* #003A6D HCP Denim */
.faq__eyebrow { text-align:center; color:var(--orange); } /* Golden Hour #FF9B24 */
.faq__title { font-family:var(--font); font-weight:800; text-align:center; font-size:2.6rem; color:#ffffff; }
.faq__subtitle { text-align:center; color:#ffffff; font-size:1.15rem; margin:10px auto 40px; max-width:640px; }
.faq__grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:1080px; margin:0 auto; }
.faq__item { background:var(--white); border-radius:10px; padding:0 28px; box-shadow:0 1px 3px rgba(0,0,0,.08); display:flex; flex-direction:column; }
.faq__item--wide { grid-column:1 / -1; }
.faq__q { display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; list-style:none; color:var(--cobalt); font-weight:800; font-size:1.18rem; line-height:1.25; padding:26px 0; }
.faq__q::-webkit-details-marker { display:none; }
.faq__item:not([open]) > .faq__q { flex:1 1 auto; }
.faq__toggle { position:relative; flex:0 0 22px; width:22px; height:22px; }
.faq__toggle::before, .faq__toggle::after { content:""; position:absolute; background:var(--cobalt); left:50%; top:50%; transform:translate(-50%,-50%); }
.faq__toggle::before { width:20px; height:2.5px; }
.faq__toggle::after { width:2.5px; height:20px; transition:transform .2s ease; }
.faq__item[open] .faq__toggle::after { transform:translate(-50%,-50%) scaleY(0); }
.faq__a { padding:0 0 22px; color:var(--ink-700); font-size:.95rem; }
.faq__a p + p, .faq__a p + a { margin-top:12px; }
.faq__fine { font-size:.78rem; text-align:center; color:#6a7581; margin-top:8px; }
.link-arrow { color:var(--orange); font-weight:700; text-decoration:none; }
.link-arrow:hover { text-decoration:underline; }
.link-arrow--center { display:block; text-align:center; margin-top:14px; }

/* ---------- LEGAL BAR ---------- */
.legal-bar { background:var(--orange); color:var(--carbon); text-align:center; padding:16px 0; font-size:.95rem; font-weight:600; }
.legal-bar a { color:var(--carbon); font-weight:700; }

/* ---------- FOOTER ---------- */
.footer { background:var(--footer-bg); color:#c7ccd2; }
.footer__inner { display:flex; justify-content:space-between; gap:40px; max-width:1360px; margin:0 auto; padding:30px 40px 40px; }
.footer__wordmark { display:block; margin-bottom:30px; }
.footer__wordmark img { height:30px; width:auto; }
.footer__tagline { font-size:.82rem; color:#9aa1a9; margin-bottom:22px; }
.footer__champion-link { display:inline-block; }
.footer__champion { margin-bottom:22px; height:62px; width:auto; }
.footer__apps { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.footer__apps img { height:38px; width:auto; }
/* Taller than the store badges it sits beside — hence its own rule. */
.footer__apps .footer__ratings { height:52px; }
.footer__label { text-transform:uppercase; font-size:.78rem; letter-spacing:.08em; font-weight:600; color:#fafafa; margin-bottom:18px; }
.footer__label--spaced { margin-top:34px; }
.footer__socials { display:flex; gap:11px; margin-bottom:8px; }
.footer__socials img { width:40px; height:40px; }
.footer__contact-line { font-size:1rem; margin-bottom:16px; }
.footer__contact-line a { color:var(--footer-link); font-weight:700; text-decoration:none; }
.footer__contact-line a:hover { text-decoration:underline; }
.footer__legal { border-top:1px solid rgba(255,255,255,.1); padding:16px 0; }
.footer__legal .container { max-width:1360px; padding-left:40px; padding-right:40px; }
.footer__legal p { font-size:.72rem; color:#7c828a; }
.footer__legal a { color:#7c828a; text-decoration:underline; }

/* =========================================================
   RESPONSIVE — TABLET (≤1024px)
   ========================================================= */
@media (max-width:1024px){
    .hero { background-image:linear-gradient(rgba(10,12,14,.34),rgba(10,12,14,.5)),url('assets/hero/hero-tablet.webp'); }
    .hero__headline { font-size:3.2rem; }
    .nav__burger { display:flex; }
    .nav__links { position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:stretch; gap:0; margin-left:0; background:var(--carbon); border-top:1px solid rgba(255,255,255,.12); padding:8px 0; max-height:0; overflow:hidden; transition:max-height .25s ease; }
    .nav__links.is-open { max-height:320px; }
    .nav__links a { padding:14px 24px; }
    .nav__links a.is-active::after { display:none; }
    .nav { position:sticky; }
    .stats__grid { gap:18px; }
    .positioning__top { grid-template-columns:1fr; gap:28px; }
    .positioning__body { max-width:none; }
    .positioning__media { max-width:520px; }
    .section-title { font-size:2.1rem; }
}

/* =========================================================
   RESPONSIVE — MOBILE (≤600px)
   ========================================================= */
@media (max-width:600px){
    .hero { background-image:linear-gradient(rgba(10,12,14,.34),rgba(10,12,14,.5)),url('assets/hero/hero-mobile.webp'); }
    .nav__logo--full { display:none; } .nav__logo--icon { display:block; }
    .nav__status { display:none; }
    .nav__inner { padding:0 20px; }
    .hero__inner { padding:36px 20px 48px; }
    .hero__lockup { width:280px; }
    .hero__headline { font-size:2.4rem; }
    .hero__body { font-size:1.1rem; }
    .countdown { gap:10px; } .countdown__unit { min-width:44px; } .countdown__num { font-size:2.1rem; } .countdown__label { font-size:.72rem; } .countdown__sep { height:42px; }
    .section-title { font-size:1.9rem; }
    .stats,.field,.map-section,.positioning,.faq { padding:44px 0; }
    .stats__grid { grid-template-columns:1fr; max-width:340px; }
    .card { flex-basis:260px; }
    .positioning__headline { font-size:1.8rem; }
    .positioning__body { font-size:1.15rem; }
    .how__steps { flex-direction:column; align-items:center; gap:10px; }
    .how__arrow { transform:rotate(90deg); padding:4px 0; }
    .how__step { flex-basis:auto; }
    .faq__grid { grid-template-columns:1fr; }
    .faq__title { font-size:2rem; }
    .faq__q { font-size:1.05rem; padding:20px 0; }
    .footer__inner { flex-direction:column; gap:32px; padding:32px 24px; }
    .footer__legal .container { padding-left:24px; padding-right:24px; }
}

/* =========================================================
   REDUCED MOTION
   The marquee stops in JS (autoscrollWanted); this covers the
   CSS-driven motion and makes the strip manually scrollable.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .btn--primary:hover { transform:none; }
    .carousel { overflow-x:auto; }
    .carousel__track { transform:none !important; }
}

/* Fine-pointer users can drag the strip too if autoscroll is turned off. */
.carousel[data-static="true"] { overflow-x:auto; }
.carousel[data-thin="true"] .carousel__track { justify-content:center; }