/* FloorVote landing — product-native styling, built on tokens.css.
   Light theme only. No raw hex; everything references vendored tokens. */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--white);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

/* --- Layout primitives --- */

.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  padding-block: 88px;
}

.section--tight {
  padding-block: 56px;
}

.section--wash {
  background: var(--surface-subtle);
  border-block: 1px solid var(--border);
}

/* --- Headings --- */

.h-display {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.08;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
  color: var(--navy);
}

.h-section {
  color: var(--navy);
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.15;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
}

.lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-slate);
  max-width: 60ch;
}

.muted {
  color: var(--text-secondary);
}

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 13px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: box-shadow 160ms ease, background 160ms ease, border-color 160ms ease,
    color 160ms ease;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--navy-hover);
  box-shadow: var(--shadow-md);
}

/* Every "demo site" call to action is Honey, wherever it sits — on the navy bar
   and on white. Compounded with .btn-primary to beat it outright rather than
   relying on source order. The contact form's submit stays navy. */
.btn-demo.btn-primary {
  background: var(--accent-orange);
  color: var(--text-primary);
}

.btn-demo.btn-primary:hover {
  background: var(--accent-orange-hover);
  color: var(--text-primary);
}

.btn-secondary {
  background: var(--white);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  border-color: var(--navy);
  background: var(--surface-subtle);
}

.btn-lg {
  font-size: var(--fs-xl);
  padding: 15px 26px;
}

/* --- Nav --- */

/* Navy bar, slightly translucent so content shows through on scroll. Fixed
   height — no shrink-on-scroll. The lockup uses the dark treatment (white
   "Floor", Honey mark + "Vote"). Hidden at the top of the page; see below. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--navy) 82%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 60%, transparent);
  transition: transform 220ms ease, opacity 220ms ease, visibility 220ms ease;
}

.nav .wordmark {
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.nav--scrolled .wordmark {
  opacity: 1;
  pointer-events: auto;
}


.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

/* Lockup v1.1. Inline (not flex) layout is required: `vertical-align: baseline`
   is what seats the mark's legs on the text baseline, and the mark→name gap is a
   right margin. See brand-kit/DESIGN-PRINCIPLES.md. */
.wordmark {
  display: inline-block;
  font-family: var(--font-brand);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.wordmark:hover {
  text-decoration: none;
}

.wordmark__mark {
  /* Explicit: a `svg { display: block }` reset would drop the name onto its own
     line below the mark and make vertical-align meaningless. */
  display: inline;
  height: var(--logo-mark-h);
  width: auto;
  vertical-align: baseline;
  margin-right: var(--logo-gap);
  color: var(--accent-orange); /* mark paints in currentColor */
}

.wordmark__floor {
  color: var(--navy);
}

/* Dark treatment for the navy bar: "Floor" flips to white, mark + "Vote" stay Honey. */
.nav .wordmark__floor {
  color: var(--white);
}

.wordmark__vote {
  color: var(--accent-orange);
}

/* Nav right-hand cluster: GitHub icon button + primary CTA */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Outlined secondary nav buttons (Docs, GitHub) — always visible, unlike
   .nav__links which collapses on narrow screens. */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding-inline: 15px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.pill-btn:hover {
  color: var(--white);
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

.pill-btn svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Primary nav is part of the identity zone, same as the app's sidebar nav
   (Feed / Bills / Calendar): brand face, medium weight. See shared/tokens.ts. */
.nav__links a {
  position: relative;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-brand);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
}

/* Honey active-line on hover — mirrors the product's settings-nav indicator */
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: var(--radius-xs);
  background: var(--accent-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.nav__links a:hover {
  color: var(--white);
  text-decoration: none;
}

.nav__links a:hover::after,
.nav__links a.is-current::after {
  transform: scaleX(1);
}

/* The section the reader is currently in reads as active, not just hovered. */
.nav__links a.is-current {
  color: var(--white);
}

.nav__cta {
  display: inline-flex;
}

/* The CTA shortens to "Demo" once the bar gets tight. */
.nav__cta-short {
  display: none;
}

/* --- Hero --- */

/* Oversized lockup — the logo's one big moment on the page. */
.hero__lockup {
  display: block;
  margin-bottom: 24px;
}

.hero__lockup .wordmark {
  font-size: clamp(38px, 5.4vw, 62px);
}

.hero {
  padding-block: 72px 64px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 0.78fr 1fr;
  gap: 56px;
  align-items: center;
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero__micro {
  margin-top: 18px;
  font-size: var(--fs-base);
  color: var(--text-secondary);
}

.hero .lede {
  margin-top: 18px;
}

/* --- Browser-chrome screenshot frame --- */

.frame {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.frame--nofade {
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: none;
}

.frame--hero {
  box-shadow: var(--shadow-lg);
  max-height: 667px;
}

.frame--billdetail { max-width: 445px; max-height: 598px; }
.frame--feed { max-width: 409px; max-height: 506px; }
.frame--calendar { max-width: 368px; max-height: 575px; }
.frame--comments { max-width: 592px; }

.frame__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}

.frame__dot {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}

/* The margin around each screenshot is baked into the PNG by
   scripts/normalize-screenshots.py, sized per image so all five render the same
   12px. It cannot be CSS padding here: the visible margin is the distance to the
   app's card edge, and the soft drop shadow filling that distance differs per
   image and per side, so one padding value still looked uneven. Baking it also
   means the margin scales with the image, staying uniform across breakpoints.
   The background matches what the script normalises the screenshots to. */
.frame__body {
  display: block;
  overflow: hidden;
  background: var(--surface-subtle);
}

.frame__shot {
  display: block;
  width: 100%;
  height: auto;
}

/* Placeholder shown until a real screenshot is dropped in (Task 4). */
.frame__placeholder {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: var(--fs-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Supported-by strip --- */

.supported {
  padding-block: 28px;
  border-bottom: 1px solid var(--border);
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

.supported__logo {
  display: block;
  margin-bottom: 0;
}

.supported__logo svg {
  height: 33px;
  width: auto;
}

.supported span {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* --- Feature rows --- */

.feature {
  display: grid;
  /* Uneven on purpose: the screenshots earn the extra width, and the copy
     column still clears 400px, which is comfortable for this measure. */
  grid-template-columns: 0.72fr 1fr;
  gap: 56px;
  align-items: center;
}

.feature + .feature {
  margin-top: 88px;
}

.feature__media {
  display: flex;
  justify-content: center;
}

/* `order` moves the media into the FIRST grid column, so the track sizes have
   to be mirrored too — otherwise the reversed rows hand the screenshot the
   narrow column and it renders smaller than the others. */
.feature--reverse {
  grid-template-columns: 1fr 0.72fr;
}

.feature--reverse .feature__media {
  order: -1;
}

.feature__body h3 {
  /* Headings take the lockup's navy, not near-black. */
  color: var(--navy);
  font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.2;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.feature__body p {
  color: var(--text-slate);
}

/* --- Also included (quiet feature list under the marquee rows) --- */

.also {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.also__h {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 24px;
}

/* Multi-column rather than grid: items flow down one column and into the next
   at their natural height, so a three-line item doesn't pad out a neighbour. */
.also__list {
  columns: 2;
  column-gap: 44px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.also__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
  font-size: var(--fs-lg);
  color: var(--text-slate);
  break-inside: avoid;
}

/* Honey bullet — echoes the accent used by the fact-grid checkmarks. */
.also__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-orange);
}

/* --- Section-end docs link --- */

.doc-link {
  margin-top: 32px;
}

.doc-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--navy);
  text-decoration: none;
}

.doc-link a:hover {
  color: var(--accent-orange-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-link svg {
  flex: none;
  transition: transform 0.15s ease;
}

.doc-link a:hover svg {
  transform: translateX(3px);
}

/* Inside a step card the link sits tighter against the step's body copy. */
.doc-link--step {
  margin-top: 14px;
}

/* --- How it works --- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
}

.step {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  margin-bottom: 16px;
}

.step h3 {
  color: var(--navy);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin-bottom: 8px;
}

.step p {
  color: var(--text-slate);
  font-size: var(--fs-lg);
}

.steps__note {
  margin-top: 28px;
  color: var(--text-secondary);
  font-size: var(--fs-lg);
}

/* --- Why FloorVote (fact grid) --- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 36px;
  margin-top: 36px;
  max-width: 760px;
}

.fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* Matches .also__list li — the two checklists read as one kind of thing. */
  font-size: var(--fs-lg);
  color: var(--text-primary);
}

.fact svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--accent-orange);
}

/* --- Demo band --- */

.demo-band {
  text-align: center;
}

.demo-band .h-section {
  margin-bottom: 12px;
}

.demo-band p {
  color: var(--text-slate);
  margin-bottom: 28px;
  font-size: 19px;
}

/* --- Contact --- */

.contact__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.contact__intro p {
  color: var(--text-slate);
  margin-top: 16px;
}

.form {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-slate);
}

.field label .req {
  color: var(--accent-orange);
}

.field input,
.field textarea {
  font-family: inherit;
  font-size: var(--fs-lg);
  color: var(--text-primary);
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--white);
  width: 100%;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 25%, transparent);
}

.form__status {
  min-height: 1.2em;
  font-size: var(--fs-lg);
  color: var(--text-slate);
}

.form__status[data-state='error'] {
  color: var(--danger);
}

.form__status[data-state='ok'] {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* --- Footer: credits, attribution, license --- */

.footer {
  border-top: 1px solid var(--border);
  padding-block: 52px 56px;
  color: var(--text-secondary);
  font-size: var(--fs-base);
}

/* Left-aligned stack; all three lines share the footer's base size. */
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 18px;
}

.footer__usdr {
  display: block;
  /* Paired with .footer__bpc-logo: both marks sit the same distance above
     their caption. See the note there for why the two needed different work. */
  margin-bottom: 7px;
}

.footer__usdr img {
  height: 55px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.footer__usdr:hover img,
.footer__usdr:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
}

.footer__review a:not(.footer__usdr) {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.footer__bpc-logo {
  display: block;
  /* Negative on purpose. The USDR logo's ink runs to the edge of its box, but
     this wordmark's baseline sits ~7px above the bottom of its viewBox — the
     "y" descender in "Policy" plus a little empty space. Matching the boxes
     therefore left this logo looking twice as far from its caption. This pulls
     the caption up so both sit ~10px below the baseline the eye actually reads. */
  margin-bottom: 1px;
}

/* display: block matters — as an inline SVG this mark sat on the text
   baseline, and the descender space below it opened a gap over four times
   the one under the USDR logo. */
.footer__bpc-logo svg {
  display: block;
  height: 33px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.footer__bpc-logo:hover svg,
.footer__bpc-logo:focus-visible svg {
  filter: grayscale(0);
  opacity: 1;
}

.footer__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.credit-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.credit-link:hover {
  color: var(--navy);
}

/* --- Skip link & focus --- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--white);
  color: var(--text-primary);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  z-index: 200;
}

.skip-link:focus {
  left: 16px;
}

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --- Responsive --- */

@media (max-width: 1060px) {
  .nav__cta-full {
    display: none;
  }
  .nav__cta-short {
    display: inline;
  }
  .nav__links {
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .section {
    padding-block: 64px;
  }
  .hero__grid,
  .feature,
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .feature--reverse .feature__media {
    order: 0;
  }
  .frame--billdetail { max-width: 578px; max-height: 777px; }
  .frame--feed { max-width: 532px; max-height: 658px; }
  .frame--calendar { max-width: 478px; max-height: 748px; }
  .frame--comments { max-width: 770px; }
  .steps,
  .facts {
    grid-template-columns: 1fr;
  }
  .also__list {
    columns: 1;
  }
  .nav__links {
    display: none;
  }
  /* Roomier desktop chrome is wasted here — take ~20% off the bar height and
     tighten the controls so the lockup and buttons stop crowding each other. */
  .nav__inner {
    height: 56px;
  }
  .nav__actions {
    gap: 8px;
  }
  .wordmark {
    font-size: var(--fs-3xl);
  }
  .pill-btn {
    height: 36px;
    padding-inline: 11px;
    font-size: var(--fs-lg);
    gap: 6px;
  }
  .pill-btn svg {
    width: 17px;
    height: 17px;
  }
  .nav__cta.btn-primary {
    padding: 9px 14px;
    font-size: var(--fs-base);
  }
  .nav__cta-full {
    display: none;
  }
  .nav__cta-short {
    display: inline;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 16px;
  }
  .container {
    padding-inline: 18px;
  }
  .hero__cta-row .btn {
    flex: 1 1 auto;
  }
  /* Tightest widths: the lockup and the button cluster start crowding, so the
     GitHub button drops to its icon (the mark still reads as GitHub). */
  .pill-btn__label {
    display: none;
  }
  .pill-btn {
    padding-inline: 9px;
  }
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}