/* ==========================================================================
   ONYX Capital Partners — stylesheet
   Hand-authored, zero dependencies. Replaces the Tailwind Play CDN, which
   shipped ~120KB of JavaScript and compiled the entire stylesheet in the
   browser on every page load (render-blocking, and never intended for
   production use).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand. --red is sampled from the logo artwork itself (#d00102) so the
     UI and the mark finally agree; the original CSS used #c8102e, a visibly
     cooler crimson that clashed with the logo. */
  --red: #d00102;
  --red-bright: #ff1a1a;
  --red-deep: #8f0111;
  --red-ink: #a80016;

  --ink: #111111;
  --ink-deep: #0a0a0b;
  --ink-soft: #1c1c20;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-900: #0f172a;

  --emerald: #10b981;
  --emerald-bg: #ecfdf5;

  /* Typography — fluid, so there are no jarring breakpoint jumps */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --step-1: clamp(1.0625rem, 1rem + 0.31vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.14rem + 0.55vw, 1.625rem);
  --step-3: clamp(1.5rem, 1.29rem + 1.05vw, 2.125rem);
  --step-4: clamp(1.875rem, 1.5rem + 1.88vw, 3rem);
  --step-5: clamp(2.5rem, 1.7rem + 4vw, 4.75rem);

  /* Space */
  --gutter: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --section-y: clamp(4rem, 3rem + 5vw, 7rem);
  --container: 1200px;

  /* Form */
  --radius-sm: 0.625rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06),
    0 1px 3px rgb(15 23 42 / 0.08);
  --shadow: 0 4px 6px -2px rgb(15 23 42 / 0.05),
    0 12px 20px -4px rgb(15 23 42 / 0.08);
  --shadow-lg: 0 8px 10px -6px rgb(15 23 42 / 0.06),
    0 24px 40px -8px rgb(15 23 42 / 0.14);
  --shadow-red: 0 10px 30px -8px rgb(208 1 2 / 0.45);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 4.25rem;

  /* Set to 0s by the reduced-motion block below, which lets a single token
     switch off every transition in the sheet at once. */
  --dur: 1;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky nav without the hardcoded JS offset the
     old build used. */
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--slate-600);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

::selection {
  background: var(--red);
  color: #fff;
}

/* Skip link — the old build had no keyboard bypass for the nav */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -150%;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  transition: translate 0.2s var(--ease);
}

.skip-link:focus-visible {
  translate: -50% 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(3rem, 2.4rem + 3vw, 4.5rem);
}

.section--dark {
  background: var(--ink);
  color: rgb(255 255 255 / 0.72);
  position: relative;
  overflow: hidden;
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: #fff;
}

.section--muted {
  background: var(--slate-50);
  border-block: 1px solid var(--slate-200);
}

.stack > * + * {
  margin-top: var(--stack-gap, 1rem);
}

.eyebrow {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75rem;
}

.section--dark .eyebrow {
  color: #ff6b6b;
}

.section-title {
  font-size: var(--step-4);
}

.section-lede {
  font-size: var(--step-1);
  color: var(--slate-600);
  max-width: 46ch;
}

.section--dark .section-lede {
  color: rgb(255 255 255 / 0.7);
}

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

.center-col {
  max-width: 44rem;
  margin-inline: auto;
}

/* Standard section intro block. Exists so pages need no inline style
   attributes, which in turn lets the CSP drop 'unsafe-inline' for styles. */
.section-head {
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.section-head .section-lede {
  margin-top: 1rem;
}

/* The lede is capped at 46ch, so inside any centered block it needs auto
   margins or the box sits flush left while its text centers within itself —
   which reads as subtly, confusingly off-center. Scoped to .text-center rather
   than .section-head so it applies to every centered block, not just the ones
   that happen to use the section-head wrapper. */
.text-center .section-lede,
.text-center .prose__lede {
  margin-inline: auto;
}

.section-head--wide .section-lede {
  max-width: 52ch;
}

.ink-strong {
  color: var(--ink);
  font-weight: 600;
}

.mt-xl {
  margin-top: 3rem;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.875em 1.6em;
  min-height: 2.75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1;
  background: var(--btn-bg);
  color: var(--btn-fg);
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: transform calc(0.25s * var(--dur)) var(--ease-out),
    box-shadow calc(0.25s * var(--dur)) var(--ease),
    background-color calc(0.25s * var(--dur)) var(--ease),
    color calc(0.25s * var(--dur)) var(--ease);
}

.btn:active {
  transform: scale(0.975);
}

.btn svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  transition: transform calc(0.3s * var(--dur)) var(--ease-spring);
}

.btn:hover svg.icon-arrow {
  transform: translateX(3px);
}

/* Primary — the sheen sweeps across on hover */
.btn--primary {
  --btn-bg: linear-gradient(115deg, var(--red-bright), var(--red) 45%, var(--red-deep));
  background: var(--btn-bg);
  box-shadow: var(--shadow-red);
}

.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgb(255 255 255 / 0.28) 45%,
    transparent 70%
  );
  translate: -120% 0;
  transition: translate calc(0.7s * var(--dur)) var(--ease-out);
}

.btn--primary:hover {
  box-shadow: 0 14px 40px -10px rgb(208 1 2 / 0.6);
  transform: translateY(-2px);
}

.btn--primary:hover::after {
  translate: 120% 0;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--slate-300);
}

.btn--ghost:hover {
  background: var(--slate-50);
  border-color: var(--slate-400);
  transform: translateY(-2px);
}

.btn--outline-light {
  --btn-bg: rgb(255 255 255 / 0.04);
  --btn-fg: #fff;
  border: 1px solid rgb(255 255 255 / 0.25);
  backdrop-filter: blur(8px);
}

.btn--outline-light:hover {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.45);
  transform: translateY(-2px);
}

.btn--lg {
  padding: 1.05em 1.9em;
  font-size: var(--step-1);
  border-radius: var(--radius);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: 0.6em 1.1em;
  font-size: var(--step--1);
  min-height: 2.25rem;
}

.btn[disabled],
.btn[aria-busy="true"] {
  opacity: 0.65;
  pointer-events: none;
}

/* Touch devices get the 44px minimum target regardless of the visual size the
   design calls for. Keyed on pointer type rather than viewport width, so a
   small laptop window keeps the tighter mouse-friendly sizing. */
@media (pointer: coarse) {
  .btn--sm,
  .calc__chip,
  .nav__toggle {
    min-height: 2.75rem;
  }

  .footer__links a,
  .footer__contact a {
    padding-block: 0.35rem;
  }
}

/* Text link with an underline that wipes in */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  transition: color calc(0.2s * var(--dur)) var(--ease);
}

.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale calc(0.35s * var(--dur)) var(--ease-out);
}

.link-arrow:hover {
  color: var(--red);
}

.link-arrow:hover::after {
  scale: 1 1;
}

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / 0.82);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--slate-200);
  transition: box-shadow calc(0.3s * var(--dur)) var(--ease),
    background-color calc(0.3s * var(--dur)) var(--ease);
}

/* Condenses once the page has scrolled */
.nav.is-stuck {
  box-shadow: 0 6px 24px -12px rgb(15 23 42 / 0.25);
  background: rgb(255 255 255 / 0.94);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--nav-h);
  transition: height calc(0.3s * var(--dur)) var(--ease);
}

.nav.is-stuck .nav__inner {
  height: 3.75rem;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.nav__logo {
  height: 2.25rem;
  width: auto;
  transition: height calc(0.3s * var(--dur)) var(--ease);
}

.nav.is-stuck .nav__logo {
  height: 2rem;
}

.nav__est {
  display: none;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--slate-500);
  background: var(--slate-100);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

.nav__links {
  display: none;
  align-items: center;
  gap: 0.35rem;
}

.nav__link {
  position: relative;
  padding: 0.5rem 0.7rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
  border-radius: 999px;
  /* Without this the labels break mid-phrase ("How / It / Works") as soon as
     the bar gets tight, instead of the row simply running out of room. */
  white-space: nowrap;
  transition: color calc(0.2s * var(--dur)) var(--ease),
    background-color calc(0.2s * var(--dur)) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  translate: -50% 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transition: width calc(0.3s * var(--dur)) var(--ease-out);
}

.nav__link:hover {
  color: var(--red);
}

/* Driven by the scroll-spy observer */
.nav__link.is-active {
  color: var(--red);
}

.nav__link.is-active::after {
  width: 1.25rem;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Click-to-call. Sits to the left of Apply Now: submitting an application is
   the primary conversion, so it keeps the strongest final position, and two
   filled red buttons side by side would compete. Calling stays one tap away at
   every width — the button collapses to its icon when the bar gets tight
   rather than disappearing. */
.nav__call {
  flex-shrink: 0;
}

.nav__call-label {
  display: none;
}

/* Icon-only form: a square target, not a squashed pill. */
@media (max-width: 1239px) {
  .nav__call {
    width: 2.5rem;
    padding-inline: 0;
  }
}

@media (max-width: 1239px) and (pointer: coarse) {
  .nav__call {
    width: 2.75rem;
  }
}

/* On the narrowest phones the bar carries logo + call + apply + menu. Trim the
   logo and the gaps so all four fit rather than letting the row overflow. */
@media (max-width: 419px) {
  .nav__inner {
    gap: 0.5rem;
  }

  .nav__actions {
    gap: 0.35rem;
  }

  .nav__logo {
    height: 2rem;
  }

  .nav .btn--sm {
    padding-inline: 0.9em;
  }
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  color: var(--slate-700);
  transition: background-color calc(0.2s * var(--dur)) var(--ease);
}

.nav__toggle:hover {
  background: var(--slate-100);
}

/* Animated hamburger → X, built from three bars so there is no innerHTML
   swap (the old build rewrote the button's markup on every tap, which threw
   away focus and any assistive-tech state). */
.nav__toggle-box {
  position: relative;
  width: 1.25rem;
  height: 0.875rem;
}

.nav__toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform calc(0.35s * var(--dur)) var(--ease-spring),
    opacity calc(0.2s * var(--dur)) var(--ease);
}

.nav__toggle-bar:nth-child(1) {
  top: 0;
}
.nav__toggle-bar:nth-child(2) {
  top: 50%;
  translate: 0 -50%;
}
.nav__toggle-bar:nth-child(3) {
  bottom: 0;
}

[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile drawer — animated via grid-template-rows so it can slide without a
   hardcoded pixel height */
.nav__drawer {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  background: #fff;
  transition: grid-template-rows calc(0.35s * var(--dur)) var(--ease-out),
    border-color calc(0.35s * var(--dur)) var(--ease);
}

.nav__drawer.is-open {
  grid-template-rows: 1fr;
  border-top-color: var(--slate-200);
}

.nav__drawer-inner {
  overflow: hidden;
  min-height: 0;
}

.nav__drawer-content {
  padding: 1rem var(--gutter) 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav__drawer-link {
  padding: 0.85rem 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--ink);
  opacity: 0;
  translate: 0 -8px;
  transition: background-color 0.2s var(--ease),
    opacity calc(0.3s * var(--dur)) var(--ease-out),
    translate calc(0.3s * var(--dur)) var(--ease-out);
}

.nav__drawer.is-open .nav__drawer-link {
  opacity: 1;
  translate: 0 0;
}

/* Cascade the drawer links in. Done with nth-child rather than an inline
   custom property so the markup stays free of style attributes. */
.nav__drawer.is-open .nav__drawer-link:nth-child(1) { transition-delay: calc(40ms * var(--dur)); }
.nav__drawer.is-open .nav__drawer-link:nth-child(2) { transition-delay: calc(85ms * var(--dur)); }
.nav__drawer.is-open .nav__drawer-link:nth-child(3) { transition-delay: calc(130ms * var(--dur)); }
.nav__drawer.is-open .nav__drawer-link:nth-child(4) { transition-delay: calc(175ms * var(--dur)); }
.nav__drawer.is-open .nav__drawer-link:nth-child(5) { transition-delay: calc(220ms * var(--dur)); }

.nav__drawer-link:hover {
  background: var(--slate-50);
  color: var(--red);
}

.nav__drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1rem;
  margin-top: 0.6rem;
  border-top: 1px solid var(--slate-200);
}

@media (min-width: 640px) {
  .nav__est {
    display: inline-block;
  }
}

/* The full link row plus both CTAs needs about 1080px before it stops being
   cramped, so the drawer stays in play longer than the usual md breakpoint.
   Keep this value in sync with the resize handler in main.js. */
@media (min-width: 1080px) {
  .nav__links {
    display: flex;
  }
  .nav__toggle {
    display: none;
  }
  .nav__drawer {
    display: none;
  }
}

/* Once there is room, the icon gains the number beside it. */
@media (min-width: 1240px) {
  .nav__call-label {
    display: inline;
  }
}

/* Scroll progress bar across the top of the viewport */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  scale: var(--progress, 0) 1;
  background: linear-gradient(90deg, var(--red-deep), var(--red), var(--red-bright));
  z-index: 200;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(
      120% 120% at 15% 0%,
      #2a0508 0%,
      transparent 55%
    ),
    linear-gradient(150deg, #0d0d0f 0%, #16080a 55%, #0a0a0b 100%);
  color: #fff;
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem)
    clamp(4rem, 3rem + 5vw, 7rem);
}

/* Slow-drifting color fields. Transform/opacity only, so they stay on the
   compositor and cost effectively nothing to animate. */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  z-index: -2;
  will-change: transform;
  pointer-events: none;
}

.hero__orb--1 {
  width: 40rem;
  height: 40rem;
  top: -14rem;
  left: -12rem;
  background: radial-gradient(circle, rgb(208 1 2 / 0.75), transparent 68%);
  animation: drift-a 22s var(--ease) infinite alternate;
}

.hero__orb--2 {
  width: 34rem;
  height: 34rem;
  bottom: -16rem;
  right: -8rem;
  background: radial-gradient(circle, rgb(143 1 17 / 0.8), transparent 68%);
  animation: drift-b 27s var(--ease) infinite alternate;
}

.hero__orb--3 {
  width: 22rem;
  height: 22rem;
  top: 30%;
  right: 22%;
  background: radial-gradient(circle, rgb(255 26 26 / 0.35), transparent 70%);
  animation: drift-c 19s var(--ease) infinite alternate;
}

@keyframes drift-a {
  to {
    transform: translate3d(7rem, 5rem, 0) scale(1.18);
  }
}
@keyframes drift-b {
  to {
    transform: translate3d(-6rem, -4rem, 0) scale(1.25);
  }
}
@keyframes drift-c {
  to {
    transform: translate3d(-4rem, 6rem, 0) scale(0.8);
  }
}

/* Fine grid + grain, to keep the gradient from looking like flat mush */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
      rgb(255 255 255 / 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(
    120% 100% at 50% 0%,
    #000 25%,
    transparent 75%
  );
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  pointer-events: none;
  /* Tiny inline SVG turbulence — cheaper and sharper than a noise bitmap */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 4vw, 4rem);
  align-items: center;
}

.hero__copy {
  max-width: 40rem;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.14);
  backdrop-filter: blur(10px);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 1.5rem;
}

/* On a 375px screen the label lands within a pixel of the available width and
   tips onto a second line. Tightening the tracking and type buys enough slack
   to keep it on one. */
@media (max-width: 480px) {
  .hero__badge {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    padding: 0.4rem 0.75rem 0.4rem 0.6rem;
    gap: 0.5rem;
  }
}

/* Pulsing status dot with an expanding ring */
.pulse-dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
}

.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--emerald);
  animation: ping 2.2s var(--ease-out) infinite;
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.hero__title {
  font-size: var(--step-5);
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 1.25rem;
}

/* Animated gradient sweep on the emphasized word */
.hero__title em {
  font-style: normal;
  background: linear-gradient(
    100deg,
    var(--red-bright) 0%,
    #ff8a8a 25%,
    #fff 45%,
    #ff8a8a 65%,
    var(--red-bright) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 7s linear infinite;
}

@keyframes sheen {
  to {
    background-position: -250% 0;
  }
}

.hero__lede {
  font-size: var(--step-2);
  color: rgb(255 255 255 / 0.78);
  line-height: 1.45;
  max-width: 34rem;
  margin-bottom: 2rem;
}

.hero__lede strong {
  color: #fff;
  font-weight: 600;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.hero__proof {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.5rem;
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.65);
}

/* Replaces the three empty gray circles the old hero used as fake avatars */
.hero__proof-icons {
  display: flex;
}

.hero__proof-icons span {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #2b2b31, #17171b);
  border: 1px solid rgb(255 255 255 / 0.16);
  color: rgb(255 255 255 / 0.75);
  margin-left: -0.55rem;
  font-size: 0.9rem;
}

.hero__proof-icons span:first-child {
  margin-left: 0;
}

.hero__proof-icons svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* --------------------------------------------------------------------------
   7. Stats bar
   -------------------------------------------------------------------------- */
.stats {
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1rem;
  padding-block: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  text-align: center;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--step--1);
  color: var(--slate-500);
  margin-top: 0.25rem;
}

@media (min-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   8. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.35rem;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
  /* Fade the ends so items enter and leave instead of popping */
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marquee 42s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* The track holds two identical runs; translating by exactly -50% makes the
   loop seamless. */
@keyframes marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--slate-500);
  white-space: nowrap;
}

.marquee__item svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--red);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  overflow: hidden;
  isolation: isolate;
  transition: transform calc(0.4s * var(--dur)) var(--ease-out),
    box-shadow calc(0.4s * var(--dur)) var(--ease),
    border-color calc(0.4s * var(--dur)) var(--ease);
}

/* Cursor-tracked spotlight. --mx/--my are written by the pointer handler. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    22rem circle at var(--mx, 50%) var(--my, 50%),
    rgb(208 1 2 / 0.09),
    transparent 45%
  );
  transition: opacity calc(0.35s * var(--dur)) var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--slate-300);
}

.card:hover::before {
  opacity: 1;
}

.card__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  transition: transform calc(0.4s * var(--dur)) var(--ease-spring);
}

.card:hover .card__icon {
  transform: scale(1.08) rotate(-4deg);
}

.card__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.card__title {
  font-size: var(--step-1);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card__text {
  font-size: var(--step--1);
  color: var(--slate-600);
  line-height: 1.65;
}

/* Icon colorways */
.i-amber  { background: #fef3c7; color: #d97706; }
.i-blue   { background: #dbeafe; color: #2563eb; }
.i-green  { background: #d1fae5; color: #059669; }
.i-violet { background: #ede9fe; color: #7c3aed; }
.i-teal   { background: #ccfbf1; color: #0d9488; }
.i-rose   { background: #ffe4e6; color: #e11d48; }

.cards-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Featured flagship card */
.feature-card {
  position: relative;
  background: #fff;
  border: 2px solid var(--red);
  border-radius: var(--radius-xl);
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.75rem);
  box-shadow: 0 20px 50px -20px rgb(208 1 2 / 0.3);
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 1.5rem;
}

.feature-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -55%;
  right: -18%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(208 1 2 / 0.09), transparent 65%);
  animation: breathe 9s var(--ease) infinite alternate;
}

@keyframes breathe {
  to {
    transform: scale(1.22) translate(-2rem, 1.5rem);
    opacity: 0.65;
  }
}

.feature-card__layout {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.feature-card__body {
  flex: 1;
}

.tag {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(120deg, #fee2e2, #fecaca);
  color: var(--red-ink);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
}

.feature-card__title {
  font-size: var(--step-3);
  margin-bottom: 0.75rem;
}

.feature-card__text {
  font-size: var(--step-1);
  color: var(--slate-600);
  max-width: 34rem;
}

.feature-card__text strong {
  color: var(--ink);
  font-weight: 600;
}

.checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 1.35rem;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--slate-700);
}

.checklist svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--emerald);
  flex-shrink: 0;
}

.feature-card__aside {
  flex-shrink: 0;
}

.feature-card__note {
  font-size: 0.75rem;
  color: var(--slate-500);
  margin-top: 0.65rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .feature-card__layout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
  }
  .feature-card__note {
    text-align: right;
  }
}

.solutions__head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 900px) {
  .solutions__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .solutions__head .section-lede {
    text-align: right;
    max-width: 24rem;
  }
}

/* --------------------------------------------------------------------------
   10. Process steps
   -------------------------------------------------------------------------- */
.steps {
  position: relative;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  max-width: 62rem;
  margin-inline: auto;
}

.step {
  position: relative;
  text-align: center;
}

.step__num {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
  margin-inline: auto;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: #fff;
  background: linear-gradient(150deg, var(--red) 0%, var(--ink) 85%);
  box-shadow: 0 8px 20px -8px rgb(208 1 2 / 0.6);
  z-index: 1;
  transition: transform calc(0.4s * var(--dur)) var(--ease-spring),
    box-shadow calc(0.4s * var(--dur)) var(--ease);
}

.step:hover .step__num {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 14px 28px -8px rgb(208 1 2 / 0.75);
}

/* Ring that expands out of the number on hover */
.step__num::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  opacity: 0;
  scale: 0.8;
  transition: opacity calc(0.4s * var(--dur)) var(--ease),
    scale calc(0.4s * var(--dur)) var(--ease-spring);
}

.step:hover .step__num::after {
  opacity: 0.45;
  scale: 1.15;
}

.step__title {
  font-size: var(--step-1);
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.step__text {
  font-size: var(--step--1);
  color: var(--slate-600);
}

/* Connecting line, drawn in as the section reveals */
@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .steps::before {
    content: "";
    position: absolute;
    top: 1.625rem;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(
      90deg,
      var(--slate-200),
      var(--red) 50%,
      var(--slate-200)
    );
    transform-origin: left;
    scale: 0 1;
    transition: scale 1.4s var(--ease-out) 0.25s;
  }

  .steps.is-visible::before {
    scale: 1 1;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   11. Why ONYX
   -------------------------------------------------------------------------- */
.why__grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
}

@media (min-width: 1024px) {
  .why__grid {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}

.why__title {
  font-size: var(--step-4);
}

.features {
  display: grid;
  gap: 1.75rem 2rem;
}

@media (min-width: 640px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feature {
  display: flex;
  gap: 1rem;
}

.feature__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.1);
  color: #fff;
  transition: background-color calc(0.35s * var(--dur)) var(--ease),
    transform calc(0.35s * var(--dur)) var(--ease-spring),
    border-color calc(0.35s * var(--dur)) var(--ease);
}

.feature:hover .feature__icon {
  background: linear-gradient(140deg, var(--red), var(--red-deep));
  border-color: transparent;
  transform: translateY(-3px) scale(1.06);
}

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

.feature__title {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.3rem;
}

.feature__text {
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.65);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   12. Funding calculator
   -------------------------------------------------------------------------- */
.calc {
  display: grid;
  gap: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-lg);
  background: #fff;
}

@media (min-width: 900px) {
  .calc {
    grid-template-columns: 1.05fr 1fr;
  }
}

.calc__controls {
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  /* The result panel is the taller of the two columns, so center the controls
     rather than letting them sit against the top edge with dead space below. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.calc__field + .calc__field {
  margin-top: 1.75rem;
}

.calc__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.calc__label-text {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}

.calc__label-value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Range input, restyled across engines. --fill is written by the JS so the
   track shows progress on both WebKit and Gecko. */
.calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--red) 0%,
    var(--red) var(--fill, 40%),
    var(--slate-200) var(--fill, 40%),
    var(--slate-200) 100%
  );
  outline: none;
  cursor: pointer;
}

.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--red);
  box-shadow: 0 3px 10px rgb(208 1 2 / 0.4);
  cursor: grab;
  transition: transform 0.18s var(--ease-spring),
    box-shadow 0.18s var(--ease);
}

.calc__range::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--red);
  box-shadow: 0 3px 10px rgb(208 1 2 / 0.4);
  cursor: grab;
  transition: transform 0.18s var(--ease-spring);
}

.calc__range:hover::-webkit-slider-thumb,
.calc__range:focus-visible::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgb(208 1 2 / 0.14);
}

.calc__range:hover::-moz-range-thumb,
.calc__range:focus-visible::-moz-range-thumb {
  transform: scale(1.15);
}

.calc__range:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.05);
}

.calc__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--slate-400);
  font-variant-numeric: tabular-nums;
}

.calc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calc__chip {
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--slate-300);
  background: #fff;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--slate-600);
  transition: all calc(0.2s * var(--dur)) var(--ease);
}

.calc__chip:hover {
  border-color: var(--red);
  color: var(--red);
}

.calc__chip[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgb(208 1 2 / 0.5);
}

/* Result panel */
.calc__result {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  background: linear-gradient(155deg, #17171c 0%, #250609 100%);
  color: rgb(255 255 255 / 0.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.calc__result::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  right: -25%;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(208 1 2 / 0.45), transparent 65%);
  filter: blur(40px);
  animation: breathe 11s var(--ease) infinite alternate;
}

.calc__payout-label {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgb(255 255 255 / 0.55);
  margin-bottom: 0.5rem;
}

.calc__payout {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.calc__breakdown {
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  display: grid;
  gap: 0.85rem;
}

.calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--step--1);
}

.calc__row dt {
  color: rgb(255 255 255 / 0.6);
}

.calc__row dd {
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.calc__disclaimer {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.5);
}

.calc__cta {
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   13. Form
   -------------------------------------------------------------------------- */
.form-wrap {
  max-width: 46rem;
  margin-inline: auto;
}

.form {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 1.2rem + 1.8vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}

.form__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .form__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .form__field--full {
    grid-column: 1 / -1;
  }
}

.form__field label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

.req {
  color: var(--red);
}

.input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  font-size: var(--step-0);
  background: #fff;
  transition: border-color calc(0.2s * var(--dur)) var(--ease),
    box-shadow calc(0.2s * var(--dur)) var(--ease);
}

.input::placeholder {
  color: var(--slate-400);
}

.input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgb(208 1 2 / 0.12);
}

textarea.input {
  resize: vertical;
  min-height: 7rem;
}

/* Validation state is only applied after a field has been interacted with,
   so the form does not turn red the instant it renders. */
.input[aria-invalid="true"] {
  border-color: var(--red);
  background: #fff5f5;
}

.form__error {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--red-ink);
  margin-top: 0.35rem;
  min-height: 0;
  opacity: 0;
  translate: 0 -4px;
  transition: opacity 0.2s var(--ease), translate 0.2s var(--ease);
}

.form__error:not(:empty) {
  opacity: 1;
  translate: 0 0;
}

/* Honeypot — invisible to humans, irresistible to bots. Kept out of the
   accessibility tree and off-screen rather than display:none, which some
   bots specifically skip. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.consent {
  margin-top: 1.75rem;
  padding: 1.15rem;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--red);
  cursor: pointer;
}

.consent label {
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--slate-600);
  cursor: pointer;
}

.consent__optional {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: var(--slate-200);
  color: var(--slate-600);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.consent a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__submit {
  margin-top: 1.75rem;
}

.form__footnote {
  text-align: center;
  font-size: 0.75rem;
  color: var(--slate-500);
  margin-top: 0.9rem;
}

/* Spinner shown while the request is in flight */
.spinner {
  width: 1.1em;
  height: 1.1em;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Result banners */
.form-status {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  animation: rise 0.45s var(--ease-out) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.form-status--success {
  background: var(--emerald-bg);
  border: 1px solid #a7f3d0;
}

.form-status--error {
  background: #fff1f2;
  border: 1px solid #fecdd3;
}

.form-status__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 0.9rem;
}

.form-status--success .form-status__icon {
  background: #d1fae5;
  color: #047857;
}

.form-status--error .form-status__icon {
  background: #ffe4e6;
  color: var(--red-ink);
}

.form-status__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.form-status h3 {
  font-size: var(--step-2);
  margin-bottom: 0.5rem;
}

.form-status--success h3 {
  color: #065f46;
}
.form-status--error h3 {
  color: var(--red-ink);
}

.form-status p {
  font-size: var(--step-0);
}

.form-status--success p {
  color: #047857;
}
.form-status--error p {
  color: #9f1239;
}

.form-status a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  padding-block: clamp(3rem, 2.4rem + 3vw, 4.5rem);
  text-align: center;
  color: rgb(255 255 255 / 0.7);
}

.cta-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -50% 20%;
  background: radial-gradient(
    ellipse at center,
    rgb(208 1 2 / 0.28),
    transparent 62%
  );
  filter: blur(30px);
  animation: breathe 10s var(--ease) infinite alternate;
}

.cta-band__logo {
  height: 2.5rem;
  width: auto;
  margin: 0 auto 1.75rem;
  opacity: 0.9;
}

.cta-band h2 {
  color: #fff;
  font-size: var(--step-3);
  margin-bottom: 0.75rem;
}

.cta-band p {
  max-width: 34rem;
  margin: 0 auto 1.75rem;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: #fff;
  border-top: 1px solid var(--slate-200);
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 2rem;
}

.footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 5fr 3fr 4fr;
    gap: 2rem;
  }
}

.footer__logo {
  height: 2.25rem;
  width: auto;
  margin-bottom: 1rem;
}

.footer__about {
  font-size: var(--step--1);
  color: var(--slate-600);
  max-width: 26rem;
  line-height: 1.7;
}

.footer__domain {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--slate-400);
}

.footer__heading {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1rem;
}

.footer__contact {
  display: grid;
  gap: 0.6rem;
  font-size: var(--step--1);
}

.footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color calc(0.2s * var(--dur)) var(--ease);
}

.footer__contact a:hover {
  color: var(--red);
}

.footer__contact svg {
  width: 1rem;
  height: 1rem;
  color: var(--slate-400);
  flex-shrink: 0;
}

.footer__phone {
  font-weight: 600;
  color: var(--ink);
  font-size: var(--step-0);
}

.footer__address {
  color: var(--slate-500);
  font-size: 0.75rem;
  padding-top: 0.35rem;
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 1rem;
  font-size: var(--step--1);
}

.footer__links a {
  transition: color calc(0.2s * var(--dur)) var(--ease),
    translate calc(0.2s * var(--dur)) var(--ease);
}

.footer__links a:hover {
  color: var(--red);
  translate: 3px 0;
}

.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--slate-100);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--slate-500);
}

@media (min-width: 640px) {
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer__disclaimer {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate-100);
  font-size: 0.6875rem;
  line-height: 1.7;
  color: var(--slate-400);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   16. Back to top
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  z-index: 90;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  translate: 0 1rem;
  pointer-events: none;
  transition: opacity calc(0.3s * var(--dur)) var(--ease),
    translate calc(0.3s * var(--dur)) var(--ease-out),
    background-color calc(0.3s * var(--dur)) var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.to-top:hover {
  background: var(--red);
}

.to-top svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* --------------------------------------------------------------------------
   17. Cursor glow (desktop, fine pointers only)
   -------------------------------------------------------------------------- */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 26rem;
  height: 26rem;
  margin: -13rem 0 0 -13rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(circle, rgb(208 1 2 / 0.13), transparent 62%);
  transition: opacity 0.4s var(--ease);
  will-change: transform;
}

.cursor-glow.is-active {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   18. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  translate: 0 1.75rem;
  transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out);
  transition-delay: calc(var(--delay, 0) * 1ms);
}

[data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

[data-reveal="left"] {
  translate: -1.75rem 0;
}
[data-reveal="right"] {
  translate: 1.75rem 0;
}

/* In a narrow single column a sideways slide both reads oddly and pushes the
   element past the viewport edge until it resolves. Go vertical instead. */
@media (max-width: 767px) {
  [data-reveal="left"],
  [data-reveal="right"] {
    translate: 0 1.75rem;
  }
}
[data-reveal="scale"] {
  translate: 0 0;
  scale: 0.95;
  transition: opacity 0.7s var(--ease-out), scale 0.7s var(--ease-out);
}
[data-reveal="scale"].is-visible {
  scale: 1;
}

/* If JS never runs, nothing should stay invisible. */
.no-js [data-reveal] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* --------------------------------------------------------------------------
   19. Legal pages
   -------------------------------------------------------------------------- */
.page-header {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.page-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  left: -10%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(208 1 2 / 0.32), transparent 66%);
  filter: blur(40px);
  animation: breathe 12s var(--ease) infinite alternate;
}

.page-header h1 {
  color: #fff;
  font-size: var(--step-4);
}

.page-header__meta {
  margin-top: 1rem;
  color: rgb(255 255 255 / 0.65);
  font-size: var(--step-0);
}

.prose {
  max-width: 68ch;
}

.prose h2 {
  font-size: var(--step-2);
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

.prose h3 {
  font-size: var(--step-1);
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.prose p,
.prose li {
  color: var(--slate-600);
  line-height: 1.75;
}

.prose > p + p,
.prose ul {
  margin-top: 0.9rem;
}

.prose ul {
  list-style: disc;
  padding-left: 1.35rem;
  display: grid;
  gap: 0.5rem;
}

.prose a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--red-bright);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose__lede {
  font-size: var(--step-1);
  color: var(--slate-600);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Plain-English summary that sits above the binding text. Explicitly labelled
   as a summary so it cannot be read as replacing the terms below it. */
.legal-summary {
  border: 1px solid var(--slate-200);
  border-left: 3px solid var(--red);
  background: var(--slate-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
  margin-bottom: 2.5rem;
}

.legal-summary__title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.85rem;
}

.legal-summary ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.legal-summary li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--slate-600);
}

.legal-summary li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--red);
}

.legal-summary__caveat {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--slate-200);
  font-size: 0.75rem;
  color: var(--slate-500);
}

.prose__note {
  margin-top: 2.5rem;
  padding: 1.15rem 1.35rem;
  background: var(--slate-50);
  border-left: 3px solid var(--slate-300);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--step--1);
  color: var(--slate-500);
}

/* Sticky table of contents alongside the legal copy */
.legal-layout {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr) 16rem;
    align-items: start;
  }
}

.toc {
  display: none;
}

@media (min-width: 1024px) {
  .toc {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
    font-size: var(--step--1);
  }
}

.toc__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.85rem;
}

.toc__list {
  display: grid;
  gap: 0.15rem;
  border-left: 2px solid var(--slate-200);
}

.toc__list a {
  display: block;
  padding: 0.35rem 0 0.35rem 0.9rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--slate-500);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.toc__list a:hover {
  color: var(--ink);
}

.toc__list a.is-active {
  color: var(--red);
  border-left-color: var(--red);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   20. 404
   -------------------------------------------------------------------------- */
.error-page {
  min-height: 72vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--section-y);
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 14vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  background: linear-gradient(150deg, var(--red-bright), var(--red-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   21. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0.001;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveals must not leave content stranded off-screen or invisible */
  [data-reveal] {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }

  .steps::before {
    scale: 1 1 !important;
  }

  .cursor-glow {
    display: none;
  }
}

@media print {
  .nav,
  .to-top,
  .cursor-glow,
  .scroll-progress,
  .marquee,
  .cta-band,
  .hero__orb {
    display: none !important;
  }

  body {
    color: #000;
  }

  .hero,
  .section--dark,
  .page-header {
    background: #fff !important;
    color: #000 !important;
  }

  .hero__title,
  .section--dark h2,
  .page-header h1 {
    color: #000 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    word-break: break-all;
  }
}