/* ==========================================================================
   Airbnb Vote — ONE Apartments
   Design tokens sampled from the campaign flyer. Keep this palette closed:
   yellow / black / green / white, plus a single error red for form
   validation. Green is the one accent colour — it's the register/support
   action everywhere, and also does double duty as the site's only
   interactive/link accent (nav hover, focus rings on light surfaces stay
   black for guaranteed contrast). Yellow stays purely a highlight/emphasis
   colour. Dark sections use solid black rather than a blue tint.
   ========================================================================== */

:root {
  --yellow: #FFE000;
  --black: #0A0A0A;
  --white: #FFFFFF;
  --ink-soft: #3A3A3A;   /* secondary copy on white, still high-contrast */
  --ink-mid: #5A5A5A;    /* tertiary copy on white (footer fine print) */
  --error: #C6001F;      /* only for form validation states */
  --error-bg: #FDEBEC;
  --cta: #00C853;        /* the one accent colour — register/support buttons everywhere, plus interactive hover states */
  --cta-dark: #00A344;   /* cta hover/active */

  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1120px;
  --radius: 0px; /* geometric, square-cornered system — no rounded cards */
  --radius-pill: 999px;

  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

section[id], header[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.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;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--black);
  color: var(--white);
  padding: 12px 20px;
  font-weight: 800;
  z-index: 1000;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}
/* Sections with a solid black background need a light-coloured ring instead,
   except inside the white form-card nested within the black register
   section, which reverts to the default black ring. */
.section-black :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--white);
}
.form-card :focus-visible {
  outline-color: var(--black);
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Type helpers ---------- */
.highlight {
  background: var(--yellow);
  color: var(--black);
  padding: 0.02em 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.on-dark .highlight,
.highlight.on-dark { color: var(--black); } /* highlight block itself stays yellow/black regardless of section */

.section-headline {
  font-weight: 900;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 20px 0;
  max-width: 16ch;
}
.section-headline.on-dark { color: var(--white); }
.section-center .section-headline,
.section-center .section-lede { max-width: none; }

.section-lede {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 500;
  max-width: 56ch;
  margin: 0 0 32px 0;
  color: var(--ink-soft);
}
.section-lede.on-dark { color: var(--white); }

.eyebrow {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
  margin: 0 0 18px 0;
}
.eyebrow-on-yellow { color: var(--black); }

.fine-note {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-mid);
  max-width: 62ch;
}
.fine-note a { color: inherit; text-decoration: underline; }

.callout {
  font-size: 1.3rem;
  font-weight: 700;
  max-width: 46ch;
  margin-top: 28px;
}
.callout strong { background: var(--yellow); color: var(--black); padding: 0.02em 0.18em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  padding: 16px 30px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* The single, consistent colour for every "register / support" action on the
   site — deliberately not reused for highlights, badges or backgrounds, so it
   always reads as the one thing to click, whatever section it sits in. The
   black border keeps it crisp against white and yellow sections, matching
   the bordered card system used elsewhere (form-card, split-card, etc). */
.btn-cta { background: var(--cta); color: var(--black); border: 3px solid var(--black); }
.btn-cta:hover { background: var(--cta-dark); }
/* On a solid black section the black border would vanish into the
   background, so give it a white edge instead — except back inside the
   white form-card nested within the black register section. */
.section-black .btn-cta { border-color: var(--white); }
.form-card .btn-cta { border-color: var(--black); }

.btn-ghost {
  background: transparent;
  color: var(--black);
  padding: 16px 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn-large { font-size: 1.15rem; padding: 20px 36px; }
.btn-full { width: 100%; }
.btn-nav { padding: 10px 22px; font-size: 0.85rem; }

/* ---------- Section shells ---------- */
.section { padding: 76px 0; }
.section-center { text-align: center; }
.section-center .btn { margin-top: 4px; }
.section-white { background: var(--white); color: var(--black); }
.section-black { background: var(--black); color: var(--white); }
.section-yellow { background: var(--yellow); color: var(--black); }
.section-yellow .section-lede { color: var(--black); }
.final-cta-headline { margin-left: auto; margin-right: auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--white);
  border-bottom: 2px solid var(--black);
  height: var(--header-h);
  display: flex;
  align-items: center;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  color: var(--black);
}
.wordmark-main { font-weight: 900; font-size: 1.3rem; letter-spacing: -0.01em; }
.wordmark-sub { font-weight: 800; font-size: 0.6rem; letter-spacing: 0.16em; color: var(--ink-mid); margin-top: 3px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 2px solid var(--black);
  padding: 0;
  align-items: center;
}
.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--black);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.primary-nav a:not(.btn) {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--black);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.primary-nav a:not(.btn):hover { border-bottom-color: var(--cta); }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 68px 0; background: var(--white); }
.hero-headline {
  font-weight: 900;
  font-size: clamp(2.6rem, 9vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 26px 0;
}
.hero-headline .block { display: block; }
.highlight-wrap { margin-top: 0.12em; }
.hero-headline .highlight { display: inline-block; padding: 0.05em 0.2em; }
.hero-statement {
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  font-weight: 700;
  color: var(--black);
  max-width: 46ch;
  margin: 0 0 10px 0;
  line-height: 1.3;
}
.hero-statement strong { font-weight: 900; }
.hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 0 26px 0;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--yellow);
  color: var(--black);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  margin: 0 0 32px 0;
  max-width: 100%;
}
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* ---------- Icons (single consistent line-icon style) ---------- */
.icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Cards (problem section) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--black);
  border: 2px solid var(--black);
}
.card {
  background: var(--white);
  padding: 32px 28px;
  position: relative;
}
.card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 10px 0;
  text-transform: uppercase;
}
.card p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- Incident grid ("this isn't hypothetical") ---------- */
.incident-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: var(--white);
  border: 2px solid var(--white);
  margin: 0 0 28px 0;
}
.incident-card {
  background: var(--black);
  color: var(--white);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 132px;
}
.incident-icon {
  width: 27px;
  height: 27px;
  color: var(--yellow);
  stroke-width: 2;
  flex-shrink: 0;
}
.incident-label {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

/* ---------- Split grid (two-card contrast: NSW law, rental distinction) ---------- */
.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--black);
  border: 2px solid var(--black);
  margin-bottom: 28px;
}
.split-card {
  background: var(--white);
  padding: 32px;
}
.split-card-flag { background: #FFF8D6; }
.split-card-label {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--black);
  margin: 0 0 12px 0;
}
.split-card-sublabel {
  display: block;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-mid);
  font-size: 0.85rem;
  margin-top: 4px;
}
.split-card p:last-child { margin-bottom: 0; }

/* ---------- "Enough" / "Right to vote" CTA sections ---------- */
.enough-headline { line-height: 0.98; }
.right-to-vote-sub {
  display: block;
  font-size: clamp(1.4rem, 3.6vw, 2rem);
  font-weight: 800;
  margin-top: 14px;
  color: var(--black);
}

/* ---------- Form field row (Tower + Unit number side by side) ---------- */
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.field-row .field {
  flex: 1 1 200px;
}

/* ---------- Optional field tag ---------- */
.opt-tag {
  display: inline-block;
  background: #EFEFEF;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

/* ---------- Pre-submit confidentiality reassurance ---------- */
.reassurance {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.reassurance .icon { color: var(--black); flex-shrink: 0; margin-top: 1px; }
.reassurance strong { color: var(--black); }

/* ---------- Registration ---------- */
.register-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.register-intro .section-headline,
.register-intro .section-lede { max-width: 42ch; }

.clarify-box {
  background: rgba(255,255,255,0.08);
  border: 2px solid var(--yellow);
  padding: 22px 24px;
  max-width: 46ch;
}
.clarify-title {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--yellow);
  margin: 0 0 8px 0;
}
.clarify-box p:last-child { margin: 0; color: var(--white); font-size: 0.95rem; }

.form-card {
  background: var(--white);
  color: var(--black);
  padding: 36px;
  border: 2px solid var(--black);
}

.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.field .req { color: var(--error); }
.field .opt { color: var(--ink-mid); text-transform: none; font-weight: 600; letter-spacing: 0; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 14px 16px;
  border: 2px solid var(--black);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--black);
}
.field input:focus,
.field select:focus { outline: 3px solid var(--black); outline-offset: 1px; }

.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--black) 50%), linear-gradient(135deg, var(--black) 50%, transparent 50%); background-position: calc(100% - 24px) calc(50% - 3px), calc(100% - 18px) calc(50% - 3px); background-size: 7px 7px; background-repeat: no-repeat; }

.field-help { margin: 8px 0 0 0; font-size: 0.9rem; color: var(--ink-mid); }
.field-error {
  margin: 8px 0 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--error);
  min-height: 1em;
}

.field.has-error input,
.field.has-error select { border-color: var(--error); background: var(--error-bg); }

.help-panel { margin-top: 14px; border: 2px solid var(--black); }
.help-panel summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.92rem;
  list-style: none;
}
.help-panel summary::-webkit-details-marker { display: none; }
.help-panel summary::after { content: '+'; float: right; font-weight: 900; }
.help-panel[open] summary::after { content: '\2212'; }
.help-panel-body { padding: 0 16px 16px 16px; font-size: 0.92rem; color: var(--ink-soft); }
.screenshot-placeholder {
  margin-top: 12px;
  border: 2px dashed var(--ink-mid);
  padding: 40px 16px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-mid);
  font-weight: 700;
}

.confirm-fieldset { border: none; margin: 0 0 26px 0; padding: 0; }
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 16px;
  cursor: pointer;
}
.checkbox-field input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--black);
}

.btn-submit { position: relative; width: 100%; }
.btn-spinner {
  width: 18px; height: 18px;
  border: 3px solid rgba(10,10,10,0.25);
  border-top-color: var(--black);
  border-radius: 50%;
  display: none;
  animation: spin 0.7s linear infinite;
}
.btn-submit.is-loading .btn-spinner { display: inline-block; }
.btn-submit.is-loading .btn-label { opacity: 0.7; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-status {
  margin: 14px 0 0 0;
  font-weight: 700;
  font-size: 0.95rem;
}
.form-status.is-error { color: var(--error); }

.hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.success-panel { padding: 8px 0 4px 0; }
.success-panel h3 {
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1.15;
  margin: 0 0 14px 0;
}
.success-panel p { margin: 0 0 10px 0; color: var(--ink-soft); }
.success-panel a { text-decoration: underline; }

.privacy-note {
  margin: 26px 0 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-mid);
  border-top: 2px solid var(--black);
  padding-top: 20px;
}
.privacy-note strong { color: var(--black); display: block; margin-bottom: 4px; }
.privacy-note a { text-decoration: underline; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 2px solid var(--black); }
.faq-item { border-bottom: 2px solid var(--black); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  padding: 22px 4px;
  font-weight: 800;
  font-size: 1.1rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 2px solid var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.3rem;
}
.faq-icon::before { content: '+'; }
.faq-item[open] .faq-icon { background: var(--yellow); }
.faq-item[open] .faq-icon::before { content: '\2212'; }
.faq-answer { padding: 0 4px 26px 4px; max-width: 70ch; }
.faq-answer p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }
.faq-answer a { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--white); padding: 56px 0 96px 0; }
.footer-domain { font-weight: 900; font-size: 1.8rem; margin: 0 0 18px 0; }
.footer-line { margin: 0 0 8px 0; font-size: 1rem; }
.footer-line a { text-decoration: underline; }
.footer-fine { margin: 18px 0 0 0; font-size: 0.85rem; color: #B9B9B9; max-width: 60ch; }
.privacy-details { margin-top: 24px; }
.privacy-details summary {
  cursor: pointer;
  font-weight: 800;
  text-decoration: underline;
  list-style: none;
}
.privacy-details summary::-webkit-details-marker { display: none; }
.privacy-details div { margin-top: 14px; font-size: 0.9rem; color: #CFCFCF; max-width: 60ch; }
.privacy-details a { color: var(--yellow); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 400;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px;
  background: var(--white);
  border-top: 2px solid var(--black);
  display: none;
  transform: translateY(0);
  transition: transform 0.2s ease;
}
.sticky-cta.is-hidden { transform: translateY(120%); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .card-grid { grid-template-columns: 1fr; }
  .split-grid { grid-template-columns: 1fr; }
  .incident-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .register-wrap { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 480px) {
  .incident-card { min-height: 108px; padding: 20px 16px; }
  .incident-label { font-size: 0.92rem; }
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--white);
    border-bottom: 2px solid var(--black);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px 24px;
    display: none;
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav a:not(.btn) {
    padding: 14px 0;
    border-bottom: 1px solid #E5E5E5;
  }
  .primary-nav .btn-nav { margin-top: 14px; align-self: flex-start; }

  .section { padding: 56px 0; }
  .form-card { padding: 24px 20px; }
  .sticky-cta { display: block; }
  body { padding-bottom: 92px; }
}

@media (min-width: 721px) {
  .sticky-cta { display: none !important; }
}