/* The public page at ledgermins.com. No script and no inline styles (the CSP's style-src is
   'self'): every rule lives in this file. Fonts are served from this site only (font-src 'self').

   The look follows DESIGN.md (v1 repository): emerald from the logo, a cool grey canvas with white
   cards, General Sans for headlines, Geist for everything read or scanned, the row-status colours
   of the review grid. Token names below are DESIGN.md's; light is the base, dark redefines the
   same names. Every text pair is at least 4.5:1 and every control edge 3:1 in both themes. */

/* ---- fonts ----
   General Sans: Indian Type Foundry, ITF Free Font License (fonts/GeneralSans-FFL.txt). The file
   is Fontshare's official woff2, unchanged: the licence forbids subsetting or converting it.
   Geist: Vercel, SIL Open Font License 1.1 (fonts/Geist-OFL.txt). Both carry the rupee sign. */
@font-face {
  font-family: "General Sans";
  src: url("/fonts/GeneralSans-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens ---- */
:root {
  --font-display: "General Sans", "Geist", "Segoe UI Variable Display", system-ui, sans-serif;
  --font-text: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

  --canvas: #f4f6f9;
  --surface: #ffffff;
  --surface-header: #fafbfc;
  --hairline: #edf0f4;
  --border: #e3e7ee;
  --border-control: #848d9b;

  --ink: #0f172a;
  --ink-secondary: #475161;
  --ink-tertiary: #636c7a;

  --primary: #059669;
  --primary-fill: #047857;
  --primary-fill-hover: #065f46;
  --on-primary: #ffffff;
  --primary-text: #047857;
  --primary-tint: #e8faf2;
  --focus: #059669;

  --warning: #d97706;
  --warning-text: #b45309;
  --warning-tint: #fff4e0;
  --neutral-text: #5f6875;
  --neutral-tint: #f0f2f5;

  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.05);
  --shadow-pop: 0 4px 6px -2px rgb(16 24 40 / 0.05), 0 12px 32px -6px rgb(16 24 40 / 0.14);
  --shadow-button: 0 1px 2px rgb(4 120 87 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.15);
  --glow: rgb(5 150 105 / 0.1);

  --rounded-sm: 8px;
  --rounded-ctl: 10px;
  --rounded-card: 14px;
  --rounded-tile: 16px;

  --duration-base: 150ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-hero: cubic-bezier(0.16, 1, 0.3, 1);
  --grid-line: rgb(15 23 42 / 0.06);
  --beam: rgb(5 150 105 / 0.55);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0b0f14;
    --surface: #12171e;
    --surface-header: #0f141a;
    --hairline: #1b222b;
    --border: #232b36;
    --border-control: #5d6878;

    --ink: #e7ecf3;
    --ink-secondary: #9aa5b4;
    --ink-tertiary: #7f8a99;

    --primary: #10b981;
    --primary-fill: #10b981;
    --primary-fill-hover: #34d399;
    --on-primary: #04221a;
    --primary-text: #34d399;
    --primary-tint: #0f2b22;
    --focus: #10b981;

    --warning: #f59e0b;
    --warning-text: #fbbf24;
    --warning-tint: #33260c;
    --neutral-text: #8b93a1;
    --neutral-tint: #1a2029;

    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-pop: 0 8px 30px rgb(0 0 0 / 0.6);
    --shadow-button: 0 1px 2px rgb(0 0 0 / 0.5);
    --glow: rgb(16 185 129 / 0.12);
    --grid-line: rgb(231 236 243 / 0.055);
    --beam: rgb(52 211 153 / 0.6);

    color-scheme: dark;
  }
}

/* ---- base ---- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
}

::selection {
  background: var(--primary-tint);
}

a {
  color: var(--primary-text);
  text-underline-offset: 0.18em;
}

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

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
}

h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.125rem); /* display-md 28 -> display-lg 34 */
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin-bottom: 0.625rem;
}

p {
  margin: 0 0 1rem;
}

.wrap {
  max-width: 72rem; /* 1152 px */
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 40rem) {
  .wrap {
    padding: 0 2rem;
  }
}

.narrow {
  max-width: 48rem;
}

.centred {
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 60;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rounded-sm);
}

.skip:focus {
  top: 0.75rem;
  box-shadow: var(--shadow-pop);
}

/* ---- top bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 4.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  font-weight: 650;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img {
  border-radius: var(--rounded-sm);
}

.brand-accent {
  color: var(--primary-text);
}

.nav {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
  font-size: 0.875rem;
}

.nav a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--rounded-sm);
  color: var(--ink-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard);
}

.nav a:hover {
  color: var(--ink);
  background: var(--surface);
}

@media (max-width: 60rem) {
  .nav {
    display: none;
  }

  .topbar .button {
    margin-left: auto;
  }
}

/* ---- buttons ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.875rem 1.5rem; /* inset-button-lg */
  border-radius: var(--rounded-ctl);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    filter var(--duration-base) var(--ease-standard);
}

.button-small {
  min-height: 2.5rem;
  padding: 0.625rem 1.125rem; /* inset-button */
  font-size: 0.8125rem;
}

.button-primary {
  background: linear-gradient(180deg, var(--primary-fill), var(--primary-fill-hover));
  color: var(--on-primary);
  box-shadow: var(--shadow-button);
}

.button-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.button-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.button-secondary:hover {
  background: var(--surface-header);
  border-color: var(--border-control);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2.5rem 0 2.25rem;
}

.actions-centred {
  justify-content: center;
}

/* ---- hero ---- */
.hero {
  position: relative;
  padding: 8rem 0 6rem;
  text-align: center;
  background: radial-gradient(60rem 28rem at 50% -6rem, var(--glow), transparent 70%);
  overflow: hidden;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--primary-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink-secondary);
  letter-spacing: 0.04em;
}

.hero .eyebrow::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 999px;
  background: var(--primary);
}

.hero h1 {
  max-width: 60rem;
  margin: 0.5rem auto 0;
  font-size: clamp(2.25rem, 1.3rem + 4.2vw, 3.75rem); /* display-xl 36 -> 60 */
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.hero h1 .accent {
  color: var(--primary-text);
}

/* "in minutes" on a square emerald block: the promise, made the loudest thing on the page.
   White on #047857 is 5.48:1; dark text on #10b981 in dark mode is 6.63:1. */
.hero h1 {
  isolation: isolate;
}

.highlight {
  position: relative;
  display: inline; /* inline-block would let the full stop wrap onto its own line */
  padding: 0 0.14em 0.04em;
  color: var(--on-primary);
  white-space: nowrap;
  animation: highlight-ink 260ms ease-out 1.02s both;
}

.highlight::before {
  content: "";
  position: absolute;
  inset: 0.16em 0 -0.02em;
  z-index: -1;
  background: var(--primary-fill);
  transform-origin: left center;
  animation: highlight-sweep 650ms var(--ease-hero) 0.85s both;
}

@keyframes highlight-sweep {
  from {
    transform: scaleX(0);
  }
}

@keyframes highlight-ink {
  from {
    color: var(--primary-text);
  }
}

.lead {
  max-width: 40rem;
  margin: 1.75rem auto 0;
  color: var(--ink-secondary);
  font-size: 1.125rem;
  line-height: 1.6;
}

.hero .actions {
  justify-content: center;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
}

.facts li,
.ticks li {
  display: flex;
  align-items: baseline;
}

.facts li::before,
.ticks li::before {
  content: "";
  flex: none;
  display: inline-block;
  width: 0.375rem;
  height: 0.6875rem;
  margin: 0 0.625rem 0 0.125rem;
  border: solid var(--primary);
  border-width: 0 2px 2px 0;
  transform: translateY(-0.0625rem) rotate(45deg);
}

.status {
  margin: 0 auto;
  max-width: 36rem;
  color: var(--ink-tertiary);
  font-size: 0.875rem;
}

/* ---- the review-screen sample (styled as the review grid in DESIGN.md) ---- */
.preview {
  margin: 6rem auto 0;
  max-width: 64rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.preview-bar,
.preview-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.8125rem;
}

.preview-bar {
  background: var(--surface-header);
  border-bottom: 1px solid var(--border);
}

.preview-title {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.875rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem; /* inset-pill */
  border-radius: 999px;
  background: var(--primary-tint);
  color: var(--primary-text);
  font-size: 0.71875rem; /* badge 11.5 px */
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.preview-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  margin: 1rem 1.25rem;
  padding: 0.125rem;
  width: fit-content;
  background: var(--neutral-tint);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-ctl);
  color: var(--ink-secondary);
  font-size: 0.78125rem;
  font-weight: 500;
}

.preview-filters span {
  padding: 0.375rem 0.75rem;
  border-radius: var(--rounded-sm);
}

.preview-filters b {
  margin-left: 0.25rem;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.preview-filters .filter-current {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

.preview-scroll {
  overflow-x: auto;
  border-top: 1px solid var(--border);
}

.grid {
  width: 100%;
  min-width: 46rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem; /* body-dense */
  font-variant-numeric: tabular-nums;
}

.grid th {
  padding: 0.625rem 0.875rem;
  background: var(--surface-header);
  box-shadow: inset 0 -1px 0 var(--border);
  color: var(--ink-tertiary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.grid td {
  height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.grid th:first-child,
.grid td:first-child {
  padding-left: 1.25rem;
}

.grid tr:last-child td {
  border-bottom: 0;
}

.grid .num {
  text-align: right;
}

.grid .narration {
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-secondary);
}

.row-marked td {
  background: color-mix(in srgb, var(--warning-tint) 60%, var(--surface));
}

.row-marked td:first-child {
  box-shadow: inset 3px 0 0 var(--warning);
}

.mark {
  display: inline-flex;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background: var(--warning-tint);
  color: var(--warning-text);
  font-size: 0.71875rem;
  font-weight: 600;
  line-height: 1.3;
}

.suspense {
  color: var(--warning-text);
  font-weight: 500;
}

.preview-foot {
  border-top: 1px solid var(--border);
  background: var(--surface-header);
  color: var(--ink-secondary);
}

.preview-caption {
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink-tertiary);
  font-size: 0.8125rem;
}

/* ---- sections ---- */
.band {
  padding: 8rem 0; /* stack-site-section */
}

@media (max-width: 40rem) {
  .band {
    padding: 5rem 0;
  }

  .hero {
    padding: 5rem 0 4rem;
  }

  .preview {
    margin-top: 4rem;
  }
}

.band-tinted {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.section-lead {
  max-width: 42rem;
  margin-top: 0.25rem;
  color: var(--ink-secondary);
  font-size: 1.125rem;
}

.band > .wrap > p:not(.eyebrow):not(.section-lead),
.split > div > p {
  color: var(--ink-secondary);
}

.card {
  padding: 2rem; /* inset-feature */
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-card);
  box-shadow: var(--shadow-card);
}

.band-tinted .card {
  background: var(--canvas);
  box-shadow: none;
}

.card p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.5rem;
  border-radius: 12px;
  background: var(--primary-tint);
  color: var(--primary-text);
}

.tile svg {
  width: 1.25rem;
  height: 1.25rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.5rem; /* inline-grid */
  margin-top: 3.5rem; /* stack-heading-content */
}

.cards-3 {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* the process strip: numbered steps joined by a hairline */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}

.steps .card {
  position: relative;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1.5rem;
  border-radius: 999px;
  background: var(--primary-fill);
  color: var(--on-primary);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: 0 0 0 5px var(--primary-tint);
}

@media (min-width: 62rem) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .steps::before {
    content: "";
    position: absolute;
    top: 3.125rem;
    left: 3rem;
    right: 3rem;
    height: 1px;
    background: linear-gradient(90deg, var(--primary), var(--border) 85%);
  }

  .steps .card {
    background: transparent;
    border-color: transparent;
    padding: 2rem 1.75rem 0 1.75rem;
  }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
  margin-top: 2.5rem;
}

@media (max-width: 50rem) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ticks {
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.ticks li {
  margin: 0.625rem 0;
}

.card .ticks {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

/* the "being built now" panel */
.next {
  position: relative;
  padding: 3rem;
  border-radius: var(--rounded-card);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  background: linear-gradient(140deg, var(--primary-tint), var(--surface) 70%);
}

.next p {
  color: var(--ink-secondary);
}

.next p:last-child {
  margin-bottom: 0;
}

.notice {
  margin-top: 3.5rem;
  padding: 2rem;
  background: var(--surface-header);
  border: 1px solid var(--border);
  border-radius: var(--rounded-card);
  color: var(--ink-secondary);
  font-size: 0.875rem;
}

.notice h3 {
  font-family: var(--font-text);
  font-size: 0.9375rem;
}

.notice p:last-child {
  margin-bottom: 0;
}

/* ---- FAQ ---- */
.faq {
  margin-top: 3rem;
  border-top: 1px solid var(--border);
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.25rem;
  border: solid var(--ink-tertiary);
  border-width: 0 2px 2px 0;
  transform: translateY(-0.125rem) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-standard);
}

.faq details[open] summary::after {
  transform: translateY(0.125rem) rotate(-135deg);
}

.faq summary:hover {
  color: var(--primary-text);
}

.faq details p {
  margin-top: -0.25rem;
  padding: 0 2.5rem 1.25rem 0;
  color: var(--ink-secondary);
}

/* ---- contact ---- */
.contact h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
}

/* ---- footer ---- */
.footer {
  padding: 3rem 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-tertiary);
  font-size: 0.8125rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.footer p {
  margin: 0;
}

/* ---- hero choreography (DESIGN.md "Hero choreography") ----
   Plays once on load, about 2.5 s, then rests: the text rises in, the review sample arrives, each
   row is swept as its balance is checked, the doubtful row is flagged, the statement is marked
   checked and the Confirm button is pointed out. CSS only: the CSP allows no script. */
/* The moving grid: faint 48 px lines drifting slowly down, like a statement's rows scrolling,
   with three emerald beams running down the vertical lines. The only looping motion on the page;
   it animates transform only, and stops under reduced motion. The mask sits on the still
   container, so the fade never jumps when the drift loops. */
.hero-grid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 28%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 28%, #000 20%, transparent 78%);
  animation: fade-in 1.2s ease-out both;
}

.hero-grid::before {
  content: "";
  position: absolute;
  top: -48px;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: calc(50% - 24px) 0;
  animation: grid-drift 8s linear infinite;
  will-change: transform;
}

.hero-grid span {
  position: absolute;
  top: 0;
  left: 50%; /* the grid has a line here: tiles start at 50% - 48px */
  width: 1px;
  height: 140px;
  background: linear-gradient(180deg, transparent, var(--beam) 70%, transparent);
  opacity: 0;
  animation: grid-beam 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform, opacity;
}

/* on vertical grid lines (48 px steps from the centre), outside the headline's column */
.hero-grid span:nth-child(1) {
  margin-left: -576px;
  animation-delay: 0.8s;
}

.hero-grid span:nth-child(2) {
  margin-left: 528px;
  animation-duration: 7.5s;
  animation-delay: 3.2s;
}

.hero-grid span:nth-child(3) {
  margin-left: -480px;
  animation-duration: 5.5s;
  animation-delay: 5.4s;
}

@keyframes grid-drift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(48px);
  }
}

@keyframes grid-beam {
  0% {
    opacity: 0;
    transform: translateY(-140px);
  }
  12% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(760px);
  }
}

.hero > .wrap {
  position: relative;
}

.hero .eyebrow,
.hero h1,
.hero .lead,
.hero .actions,
.hero .facts,
.hero .status {
  animation: hero-rise 700ms var(--ease-hero) both;
}

.hero h1 {
  animation-delay: 90ms;
}

.hero .lead {
  animation-delay: 180ms;
}

.hero .actions {
  animation-delay: 270ms;
}

.hero .facts {
  animation-delay: 360ms;
}

.hero .status {
  animation-delay: 450ms;
}

.hero .preview {
  animation: hero-preview-in 900ms var(--ease-hero) 450ms both;
}

.hero .grid tbody tr {
  background-image: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--primary) 18%, transparent) 50%,
    transparent
  );
  background-repeat: no-repeat;
  background-size: 45% 100%;
  background-position: -100% 0;
  animation: row-scan 520ms ease-out both;
}

.hero .grid tbody tr:nth-child(1) {
  animation-delay: 1.1s;
}

.hero .grid tbody tr:nth-child(2) {
  animation-delay: 1.26s;
}

.hero .grid tbody tr:nth-child(3) {
  animation-delay: 1.42s;
}

.hero .grid tbody tr:nth-child(4) {
  animation-delay: 1.58s;
}

.hero .row-marked td {
  animation: mark-in 420ms ease-out 1.8s both;
}

.hero .row-marked td:first-child {
  animation-name: mark-bar-in;
}

.hero .mark {
  animation: check-pop 360ms var(--ease-hero) 1.9s both;
}

.hero .suspense {
  animation: fade-in 420ms ease-out 1.95s both;
}

.preview-bar .pill::before {
  content: "";
  width: 0.28rem;
  height: 0.5rem;
  margin: 0 0.25rem 0.125rem 0.0625rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.hero .preview-bar .pill {
  animation: check-pop 360ms var(--ease-hero) 2.05s both;
}

.hero .preview-foot .button-primary {
  animation: cta-ring 1.4s ease-out 2.3s 2;
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(6px);
  }
}

@keyframes hero-preview-in {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
  }
}

@keyframes row-scan {
  from {
    background-position: -100% 0;
  }
  to {
    background-position: 200% 0;
  }
}

@keyframes mark-in {
  from {
    background-color: transparent;
  }
}

@keyframes mark-bar-in {
  from {
    background-color: transparent;
    box-shadow: inset 0 0 0 transparent;
  }
}

@keyframes check-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  70% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes cta-ring {
  0% {
    box-shadow: var(--shadow-button), 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent);
  }
  100% {
    box-shadow: var(--shadow-button), 0 0 0 8px transparent;
  }
}

/* ---- touch, motion, forced colours ---- */
@media (max-width: 47.9375rem) {
  .button {
    min-height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .button-primary:hover {
    transform: none;
  }

  /* the hero shows its final state at once; the grid stands still and the beams are hidden */
  .hero *,
  .hero *::before {
    animation: none !important;
  }

  .hero-grid span {
    display: none;
  }
}

@media (forced-colors: active) {
  .pill,
  .mark,
  .tile,
  .step-number,
  .preview-filters .filter-current {
    border: 1px solid CanvasText;
  }
}