/* 1891 Parliamentarian — Site styles
   Components per spec §9. Heritage feel per §8.
   Loads after tokens.css. */

@import url("./tokens.css");

/* ── Reset / base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-order-navy); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-brass-gavel); }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-brass-gavel);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
::selection { background: var(--color-brass-gavel); color: var(--color-paper); }

/* ── Type ─────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-order-navy);
  letter-spacing: var(--tracking-headline);
  margin: 0 0 var(--s-16);
}
h1 { font-size: var(--fs-61); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-39); line-height: var(--lh-headline); }
h3 { font-size: var(--fs-25); line-height: var(--lh-headline); }
h4 { font-size: var(--fs-20); line-height: var(--lh-headline); }
p { margin: 0 0 var(--s-16); max-width: 65ch; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-brass-gavel);
  font-weight: 500;
  margin: 0 0 var(--s-12);
}
code, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }

/* ── Layout ───────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--hero { max-width: var(--container-hero); }
.container--prose { max-width: var(--container-prose); }
.section {
  padding-top: var(--s-96);
  padding-bottom: var(--s-96);
}
.section--tight { padding-top: var(--s-64); padding-bottom: var(--s-64); }
.section--navy {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--color-paper); }
.section--navy a { color: var(--color-brass-gavel); }
.section--paper { background: var(--color-mist); }
.brass-rule {
  display: block;
  width: 64px;
  height: 4px;
  background: var(--color-brass-gavel);
  border: 0;
  margin: var(--s-24) 0;
}

/* ── Skip link ────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -200%;
  left: var(--s-16);
  background: var(--color-order-navy);
  color: var(--color-paper);
  padding: var(--s-12) var(--s-16);
  border-radius: var(--radius-md);
  z-index: 1000;
  text-decoration: none;
}
.skip-link:focus { top: var(--s-16); color: var(--color-paper); }

/* ── Header ───────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247,244,236,0.96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
  padding: var(--s-16) 0;
  min-height: 64px;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  text-decoration: none;
  color: var(--color-order-navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-20);
  letter-spacing: var(--tracking-headline);
}
.site-header__brand img { width: 32px; height: 32px; }
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-20, 1.25rem);
}
.site-nav a:not(.btn) {
  color: var(--color-order-navy);
  text-decoration: none;
  font-size: var(--fs-14);
  font-weight: 500;
  padding: var(--s-8) 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 2px;
  background: var(--color-brass-gavel);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-fast) var(--ease);
}
.site-nav a:not(.btn):hover { color: var(--color-brass-gavel); }
.site-nav a:not(.btn):hover::after,
.site-nav a:not(.btn):focus-visible::after { transform: scaleX(1); }
.site-nav__signin {
  color: var(--color-slate) !important;
  font-weight: 500;
}
.site-nav__cta {
  margin-left: var(--s-8);
  padding: 10px 18px;
  min-height: 40px;
  font-size: var(--fs-14);
}
.site-nav__divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 var(--s-4);
  flex: 0 0 auto;
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--color-order-navy);
  color: var(--color-order-navy);
  border-radius: var(--radius-md);
  padding: var(--s-8) var(--s-12);
  font: 500 var(--fs-14) var(--font-ui);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

@media (max-width: 880px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg);
    padding: var(--s-16) var(--gutter);
    border-bottom: 1px solid var(--border);
    gap: var(--s-8);
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav__divider { display: none; }
  .site-nav__cta { margin-left: 0; }
  .nav-toggle { display: inline-flex; }
}

/* ── Buttons (spec §9) ───────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: 12px 20px;
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-16);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn--primary {
  background: var(--color-order-navy);
  color: var(--color-paper);
}
.btn--primary:hover { background: #0a1d33; color: var(--color-paper); box-shadow: 0 1.5px 0 rgba(0,0,0,.08); }
.btn--primary:active { background: #08172a; box-shadow: none; }
.btn--secondary {
  background: transparent;
  border-color: var(--color-order-navy);
  color: var(--color-order-navy);
}
.btn--secondary:hover { background: var(--color-order-navy); color: var(--color-paper); }
.btn--tertiary {
  background: transparent;
  color: var(--color-order-navy);
  padding: 12px 0;
}
.btn--tertiary:hover { text-decoration: underline; color: var(--color-brass-gavel); }
.btn--brass {
  background: var(--color-brass-gavel);
  color: var(--color-order-navy);
}
.btn--brass:hover { background: #9c7830; color: var(--color-order-navy); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--color-pewter);
  color: var(--color-steel-grey);
  cursor: not-allowed;
  pointer-events: none;
}

/* On navy sections */
.section--navy .btn--secondary {
  border-color: var(--color-paper);
  color: var(--color-paper);
}
.section--navy .btn--secondary:hover {
  background: var(--color-paper);
  color: var(--color-order-navy);
}

/* ── Inputs ───────────────────────────────────── */
.field { display: block; margin-bottom: var(--s-16); }
.field__label {
  display: block;
  margin-bottom: var(--s-8);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--color-slate);
}
.field__hint {
  display: block;
  margin-top: var(--s-4);
  font-size: var(--fs-12);
  color: var(--text-muted);
}
.input, .textarea, .select {
  width: 100%;
  padding: 12px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  font: 400 var(--fs-16) var(--font-ui);
  color: var(--text);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-order-navy);
  box-shadow: 0 0 0 2px var(--color-order-navy);
}
.input[aria-invalid="true"] {
  border: 1.5px solid var(--color-out-of-order);
}
.field--color { display: flex; align-items: center; gap: var(--s-12); }
.input--color { width: 44px; height: 44px; padding: 0; cursor: pointer; }

/* ── Cards ────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-24);
}
.card--linked { transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.card--linked:hover {
  box-shadow: 0 4px 0 rgba(14,39,66,.08);
  transform: translateY(-2px);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* ── Grid utilities ───────────────────────────── */
.grid { display: grid; gap: var(--s-24); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Hero ─────────────────────────────────────── */
.hero {
  padding-top: var(--s-96);
  padding-bottom: var(--s-48);
}
.hero__grid {
  display: grid;
  gap: var(--s-48);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.1fr 1fr; gap: var(--s-64); }
}
.hero h1 {
  font-size: var(--fs-49);
  line-height: var(--lh-display);
}
@media (min-width: 720px) { .hero h1 { font-size: var(--fs-61); } }
@media (min-width: 1100px) { .hero h1 { font-size: var(--fs-76); } }
.hero__sub {
  font-size: var(--fs-20);
  color: var(--color-steel-grey);
  max-width: 56ch;
  margin-bottom: var(--s-32);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.hero__visual {
  background: var(--color-order-navy);
  border-radius: var(--radius-lg);
  padding: var(--s-24);
  color: var(--color-paper);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hero__visual::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 8px;
  background: var(--color-brass-gavel);
}
.hero__visual .demo-tv {
  width: 100%;
  text-align: center;
}
.hero__visual .demo-tv .eyebrow { color: var(--color-brass-gavel); }
.hero__visual .demo-tv .motion {
  font-family: var(--font-display);
  font-size: var(--fs-31);
  font-weight: 600;
  line-height: 1.2;
  margin: var(--s-12) 0 var(--s-24);
}
.hero__visual .demo-tv .tally {
  display: flex;
  gap: var(--s-32);
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-31);
}
.hero__visual .demo-tv .tally .yes { color: var(--color-carried-green); }
.hero__visual .demo-tv .tally .no { color: #d97a7a; }
.hero__visual .demo-tv .result {
  margin-top: var(--s-24);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brass-gavel);
}

/* ── Footer ───────────────────────────────────── */
.site-footer {
  background: var(--color-order-navy);
  color: var(--color-paper);
  padding: var(--s-64) 0 var(--s-32);
  margin-top: var(--s-96);
}
.site-footer a { color: var(--color-paper); text-decoration: none; }
.site-footer a:hover { color: var(--color-brass-gavel); text-decoration: underline; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
  margin-bottom: var(--s-48);
}
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
}
.site-footer h4 {
  color: var(--color-paper);
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 500;
  margin-bottom: var(--s-16);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-8); }
.site-footer__brand { display: inline-flex; gap: var(--s-12); align-items: center; }
.site-footer__brand img { width: 32px; height: 32px; }
.site-footer__brand strong {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
}
.site-footer__tag {
  margin-top: var(--s-16);
  color: var(--color-linen);
  font-size: var(--fs-14);
  max-width: 32ch;
}
.site-footer__bottom {
  border-top: 1px solid rgba(247,244,236,.18);
  padding-top: var(--s-24);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-16);
  font-size: var(--fs-12);
  color: var(--color-linen);
}
.wcag-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  border: 1px solid rgba(247,244,236,.4);
  padding: var(--s-8) var(--s-12);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ── Page-specific helpers ───────────────────── */
.kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-12);
  color: var(--color-brass-gavel);
  margin: 0 0 var(--s-12);
}
.lede {
  font-family: var(--font-display);
  font-size: var(--fs-25);
  line-height: 1.4;
  color: var(--color-slate);
  max-width: 60ch;
}
.section-head { max-width: 56ch; margin-bottom: var(--s-48); }
.section-head h2 { margin-bottom: var(--s-16); }
.section-head p { color: var(--color-steel-grey); font-size: var(--fs-20); }

/* Pricing table */
.pricing-banner {
  background: var(--color-brass-gavel);
  color: var(--color-order-navy);
  padding: var(--s-16);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  margin-bottom: var(--s-32);
  font-weight: 500;
}
.pricing-banner strong { font-family: var(--font-mono); }
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
  background: var(--color-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pricing-table th, .pricing-table td {
  padding: var(--s-12) var(--s-16);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.pricing-table th { background: var(--color-mist); font-weight: 600; }
.pricing-table thead th {
  background: var(--color-order-navy);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: var(--fs-20);
}
.pricing-table tbody th { font-family: var(--font-ui); color: var(--color-slate); font-weight: 500; background: var(--color-mist); }
.pricing-table td[data-yes]::before { content: "Yes"; font-family: var(--font-mono); color: var(--color-carried-green); }
.pricing-table td[data-no]::before { content: "—"; font-family: var(--font-mono); color: var(--color-pewter); }
@media (max-width: 720px) {
  .pricing-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--border);
  padding: var(--s-16) 0;
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--color-order-navy);
  list-style: none;
  padding-right: var(--s-32);
  position: relative;
}
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-25);
  color: var(--color-brass-gavel);
}
.faq details[open] summary::after { content: "−"; }
.faq details > *:not(summary) { margin-top: var(--s-12); color: var(--color-slate); }

/* Forms — signup */
.form-card {
  background: var(--color-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-32);
  max-width: 520px;
}
.form-meta { font-size: var(--fs-12); color: var(--text-muted); margin-top: var(--s-12); }

/* Stats / numbers row */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-32);
  padding: var(--s-32) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat__num {
  font-family: var(--font-display);
  font-size: var(--fs-49);
  color: var(--color-order-navy);
  line-height: 1;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-steel-grey);
  margin-top: var(--s-8);
}

/* Quote */
.pullquote {
  font-family: var(--font-display);
  font-size: var(--fs-31);
  line-height: 1.3;
  color: var(--color-order-navy);
  max-width: 28ch;
  border-left: 4px solid var(--color-brass-gavel);
  padding-left: var(--s-24);
  margin: var(--s-32) 0;
}
.pullquote cite {
  display: block;
  margin-top: var(--s-16);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  font-style: normal;
  color: var(--color-steel-grey);
}

/* Visual figure (placeholder for screenshots) */
.figure {
  background: var(--color-mist);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-32);
  text-align: center;
  color: var(--color-steel-grey);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.figure--navy {
  background: var(--color-order-navy);
  color: var(--color-paper);
}

/* Steps strip */
.steps { counter-reset: step; display: grid; gap: var(--s-32); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  counter-increment: step;
  border-top: 4px solid var(--color-brass-gavel);
  padding-top: var(--s-16);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  color: var(--color-brass-gavel);
  display: block;
  margin-bottom: var(--s-8);
}
.step h3 { font-size: var(--fs-20); margin-bottom: var(--s-8); }
.step p { font-size: var(--fs-14); color: var(--color-slate); }

/* Legal prose */
.prose { max-width: var(--container-prose); margin: 0 auto; }
.prose h2 { margin-top: var(--s-48); }
.prose h3 { margin-top: var(--s-32); }
.prose ul, .prose ol { margin: 0 0 var(--s-16); padding-left: var(--s-24); }
.prose li { margin-bottom: var(--s-8); }

/* 404 */
.notfound {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--s-64) var(--gutter);
}
.notfound .code {
  font-family: var(--font-mono);
  color: var(--color-brass-gavel);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--s-16);
}

/* Utility */
.u-center { text-align: center; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-32 { margin-bottom: var(--s-32); }
.u-mb-48 { margin-bottom: var(--s-48); }
.u-muted { color: var(--text-muted); }
.u-mono { font-family: var(--font-mono); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION LAYER — gavel-strike hovers, header scroll-shadow, hero stage-in,
   scroll-revealed sections. All of this is disabled wholesale under
   prefers-reduced-motion via the token transition durations going to 0ms.
   Transforms still apply; the *animation* of them does not.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Logo: gavel-strike on hover, brass flash on press ─────────────────── */
.site-header__brand {
  position: relative;
}
.site-header__brand img {
  transform-origin: 75% 38%; /* pivot near gavel head, not center */
  transition:
    transform var(--t-base) cubic-bezier(0.34, 1.56, 0.64, 1),
    filter var(--t-fast) var(--ease);
}
.site-header__brand:hover img,
.site-header__brand:focus-visible img {
  transform: rotate(-10deg);
}
.site-header__brand:active img {
  transform: rotate(3deg) translateY(1px);
  transition-duration: 80ms;
  filter: drop-shadow(0 1px 0 rgba(176, 136, 56, 0.6));
}

/* Wordmark next to logo gets a brass underline that draws in on hover. */
.site-header__brand span {
  position: relative;
  background-image: linear-gradient(var(--color-brass-gavel), var(--color-brass-gavel));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--t-base) var(--ease);
}
.site-header__brand:hover span,
.site-header__brand:focus-visible span {
  background-size: 100% 1.5px;
}

/* ── Header: subtle shadow appears once you scroll past the hero ───────── */
.site-header {
  transition: box-shadow var(--t-base) var(--ease), background-color var(--t-fast) var(--ease);
}
.site-header[data-scrolled="true"] {
  box-shadow: 0 4px 14px rgba(14, 39, 66, 0.06);
}

/* ── Buttons: lift on hover, brass-glint sweep on primary ──────────────── */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after {
  /* The "glint" — a thin diagonal highlight that sweeps across on hover. */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(176, 136, 56, 0.0) 30%,
    rgba(176, 136, 56, 0.35) 50%,
    rgba(176, 136, 56, 0.0) 70%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left var(--t-slow) var(--ease);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(14, 39, 66, 0.10), 0 8px 18px rgba(14, 39, 66, 0.10);
}
.btn--primary:hover::after {
  left: 130%;
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(14, 39, 66, 0.08);
}
.btn--secondary:hover { transform: translateY(-1px); }
.btn--brass:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(14, 39, 66, 0.10);
}

/* ── Cards: brass top-accent reveal on hover (on top of existing lift) ─── */
.card--linked { position: relative; overflow: hidden; }
.card--linked::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-brass-gavel);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease);
}
.card--linked:hover::before,
.card--linked:focus-within::before {
  transform: scaleX(1);
}

/* Plain (non-linked) cards in the homepage grid still get a quiet hover. */
.grid .card { transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.grid .card:hover { border-color: var(--color-brass-gavel); transform: translateY(-1px); }

/* ── Hero demo-tv: stage-in sequence on load ───────────────────────────── */
.hero__visual .demo-tv > * {
  opacity: 0;
  transform: translateY(8px);
  animation: tvStageIn var(--t-slow) var(--ease) forwards;
}
.hero__visual .demo-tv > *:nth-child(1) { animation-delay: 200ms; }
.hero__visual .demo-tv > *:nth-child(2) { animation-delay: 600ms; }
.hero__visual .demo-tv > *:nth-child(3) { animation-delay: 1100ms; } /* tally row */
.hero__visual .demo-tv > *:nth-child(4) { animation-delay: 2200ms; } /* result */
@keyframes tvStageIn {
  to { opacity: 1; transform: translateY(0); }
}

/* The "MOTION CARRIES" line lands with a small scale-stamp. */
.hero__visual .demo-tv .result {
  animation: tvStamp 480ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 2200ms;
  transform-origin: center center;
}
@keyframes tvStamp {
  0%   { opacity: 0; transform: scale(0.85) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.06) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Brass top-bar on the hero visual gets a left-to-right draw on load. */
.hero__visual::before {
  transform-origin: left center;
  animation: brassDraw 700ms var(--ease) 100ms both;
}
@keyframes brassDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Brass-rule under the hero h1 draws in on load ─────────────────────── */
.hero .brass-rule {
  transform-origin: left center;
  animation: brassDraw 700ms var(--ease) 350ms both;
}

/* ── Scroll-revealed sections (added by JS via data-reveal) ────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
  will-change: opacity, transform;
}
[data-reveal="in"] {
  opacity: 1;
  transform: translateY(0);
}

/* Steps strip: stagger reveal in once visible. */
[data-reveal="in"] .step {
  animation: stepIn 480ms var(--ease) both;
}
[data-reveal="in"] .step:nth-child(1) { animation-delay: 0ms; }
[data-reveal="in"] .step:nth-child(2) { animation-delay: 120ms; }
[data-reveal="in"] .step:nth-child(3) { animation-delay: 240ms; }
[data-reveal="in"] .step:nth-child(4) { animation-delay: 360ms; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion: cancel every keyframe + transform animation cleanly ─ */
@media (prefers-reduced-motion: reduce) {
  .hero__visual .demo-tv > *,
  .hero__visual::before,
  .hero .brass-rule,
  [data-reveal="in"] .step {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .btn--primary::after { display: none; }
}