/* ============================================================
   AFTERBURNER — Ringneck 2.0 foundation stylesheet.

   Layer 1  Self-hosted faces
   Layer 2  Tokens (verbatim from handoff/afterburner-handoff/tokens.css)
   Layer 3  Base elements
   Layer 4  Production components

   Every value comes from the token block. If it isn't in there,
   it isn't in the system. Colors appear either as a var() or as
   rgba() of a palette hex.
   ============================================================ */

/* ============================================================
   1. FACES — self-hosted WOFF2, latin subset
   ============================================================ */

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-600.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-700.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-800.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}

/* ============================================================
   2. TOKENS — verbatim
   ============================================================ */

:root {
  color-scheme: dark;

  /* Brand primitives (Flightline palette, unchanged) */
  --rn-flight-950: #020f14;
  --rn-flight-900: #041820;
  --rn-flight-800: #07222c;
  --rn-flight-700: #0a3746;
  --rn-teal-500: #32dfc8;
  --rn-teal-700: #0a9c90;
  --rn-teal-750: #07766e;
  --rn-orange-400: #ff704e;
  --rn-orange-500: #ef5b37;
  --rn-orange-600: #d84728;
  --rn-orange-650: #c03c1d;
  --rn-cloud-50: #f7faf8;
  --rn-cloud-100: #edf3f1;
  --rn-white: #ffffff;
  --rn-mist-100: #d9e5e2;
  --rn-mist-400: #b1c6c2;
  --rn-mist-600: #91aaa5;
  --rn-ink-900: #09252d;
  --rn-ink-500: #49646b;

  /* Semantic surfaces */
  --surface-canvas: var(--rn-flight-900);
  --surface-deep: var(--rn-flight-950);
  --surface-raised: rgba(255, 255, 255, 0.04);
  --surface-raised-hover: rgba(255, 255, 255, 0.065);
  --surface-light: var(--rn-cloud-50);
  --surface-light-alt: var(--rn-cloud-100);

  /* Semantic text */
  --text-heading-dark: var(--rn-white);
  --text-body-dark: var(--rn-mist-100);
  --text-muted-dark: var(--rn-mist-400);
  --text-faint-dark: var(--rn-mist-600);
  --text-heading-light: var(--rn-ink-900);
  --text-body-light: var(--rn-ink-900);
  --text-muted-light: var(--rn-ink-500);

  /* Semantic accents */
  --action: var(--rn-orange-500);
  --action-hover: var(--rn-orange-400);
  --action-active: var(--rn-orange-600);
  --action-text: var(--rn-flight-950);
  --system: var(--rn-teal-500);
  --system-strong: var(--rn-teal-700);
  --system-ink: var(--rn-teal-750);

  /* Lines and fills */
  --line-dark: rgba(255, 255, 255, 0.09);
  --line-dark-strong: rgba(255, 255, 255, 0.15);
  --line-light: rgba(9, 37, 45, 0.12);
  --fill-dark: rgba(255, 255, 255, 0.04);
  --fill-dark-hover: rgba(255, 255, 255, 0.065);

  /* Typography — Barlow Semi Condensed, all-caps headings */
  --font-display: "Barlow Semi Condensed", "Avenir Next Condensed", system-ui, sans-serif;
  --font-body: "Inter", "SF Pro Text", system-ui, sans-serif;
  --display: clamp(2.75rem, 4.6vw, 4.125rem);
  --h1: clamp(2.5rem, 4vw, 3.5rem);
  --h2: clamp(1.75rem, 2.6vw, 2.5rem);
  --h3: clamp(1.35rem, 2vw, 1.75rem);
  --lead: clamp(1.0625rem, 1.6vw, 1.25rem);
  --body: 1rem;
  --small: 0.875rem;
  --eyebrow: 0.75rem;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10: 6rem;
  --space-11: 7.5rem;
  --space-12: 10rem;

  /* Shape and motion */
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-frame: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.28);
  --shadow-action: 0 10px 28px rgba(239, 91, 55, 0.18);
  --shadow-action-hot: 0 14px 44px rgba(239, 91, 55, 0.34);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 140ms;
  --duration: 220ms;
  --duration-slow: 420ms;

  /* Layout */
  --container-wide: 1200px;
  --container: 1120px;
  --measure: 720px;
  --measure-hero: 640px;
}

/* Production additions: section rhythm (base spec §6 — 120 / 88 / 72). */
:root {
  --section-pad: var(--space-11);
  --section-pad-strip: var(--space-9);
}

/* ============================================================
   3. BASE ELEMENTS — verbatim
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--surface-canvas);
}

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-body-dark);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

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

::selection {
  background: var(--rn-teal-500);
  color: var(--rn-flight-950);
}

:focus-visible {
  outline: 2px solid var(--system);
  outline-offset: 3px;
}

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

h1,
h2,
h3 {
  color: var(--text-heading-dark);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  font-size: var(--display);
  line-height: 0.98;
}

h2 {
  font-size: var(--h2);
  line-height: 1.02;
}

h3 {
  font-size: var(--h3);
  line-height: 1.12;
}

p {
  text-wrap: pretty;
}

/* Light surfaces get a light focus ring so the halo stays visible. */
.rn-section--light :focus-visible {
  outline-color: var(--system-ink);
}

/* ============================================================
   4. LAYOUT SHELLS
   ============================================================ */

.rn-container,
.rn-container-wide {
  width: min(100% - 64px, var(--container));
  margin-inline: auto;
}

.rn-container-wide {
  width: min(100% - 64px, var(--container-wide));
}

.rn-measure {
  max-width: var(--measure);
}

.rn-section {
  position: relative;
  padding-block: var(--section-pad);
}

.rn-section--strip {
  padding-block: var(--section-pad-strip);
}

.rn-section--deep {
  background: var(--surface-deep);
}

.rn-section--light {
  color-scheme: light;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(237, 243, 241, 0.92)),
    var(--surface-light);
  color: var(--text-body-light);
}

.rn-section--light h1,
.rn-section--light h2,
.rn-section--light h3 {
  color: var(--text-heading-light);
}

/* Owner-directed system amendment: one saturated action field per page. */
.rn-action-band {
  isolation: isolate;
  overflow: hidden;
  color-scheme: light;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(56, 10, 2, 0.2) 135%),
    linear-gradient(118deg, var(--rn-orange-500) 0%, var(--rn-orange-500) 38%, var(--rn-orange-600) 100%);
  color: var(--rn-flight-950);
}

.rn-action-band > * {
  position: relative;
  z-index: 1;
}

.rn-action-band::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: clamp(180px, 22vw, 360px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rn-orange-400) 22%, var(--rn-white) 52%, var(--rn-orange-400) 78%, transparent);
  box-shadow: 0 0 5px rgba(255, 112, 78, 0.95), 0 0 13px rgba(255, 255, 255, 0.62);
  pointer-events: none;
  animation: rn-action-streak 7s linear infinite;
}

@keyframes rn-action-streak {
  from { transform: translateX(-110%); }
  to { transform: translateX(590%); }
}

.rn-action-band h1,
.rn-action-band h2,
.rn-action-band h3 {
  color: var(--rn-flight-950);
}

.rn-action-band .rn-action-band__support,
.rn-action-band .rn-subhead,
.rn-action-band .rn-body,
.rn-action-band .rn-note,
.rn-action-band .rn-quiet-route,
.rn-action-band .hp-quiet {
  color: #120805;
}

.rn-action-band .rn-quiet-route {
  text-decoration-color: rgba(2, 15, 20, 0.56);
}

.rn-action-band .rn-quiet-route:hover {
  color: var(--rn-flight-950);
}

.rn-action-band .rn-btn--primary {
  border-color: var(--rn-flight-950);
  background: var(--rn-flight-950);
  box-shadow: 0 10px 24px rgba(2, 15, 20, 0.24);
  color: var(--rn-white);
}

.rn-action-band .rn-btn--primary:hover {
  border-color: var(--rn-flight-800);
  background: var(--rn-flight-800);
  box-shadow: 0 15px 34px rgba(2, 15, 20, 0.34);
}

.rn-action-band .rn-btn--secondary {
  border-color: #120805;
  background: transparent;
  color: #120805;
}

.rn-action-band .rn-btn--secondary:hover {
  border-color: var(--rn-flight-950);
  background: rgba(2, 15, 20, 0.09);
  box-shadow: 0 13px 28px rgba(2, 15, 20, 0.2);
  color: #120805;
}

/* Reusable six-stage electric flywheel. The page supplies only its SVG geometry. */
.rn-flywheel__rim {
  stroke-width: 20px;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.08));
}

.rn-flywheel__spark {
  color: var(--rn-orange-400);
  offset-path: path("M 380 135 A 165 165 0 1 1 380 465 A 165 165 0 1 1 380 135");
  offset-anchor: 0 0;
  offset-rotate: auto;
  filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 12px currentColor);
  animation-name: rn-flywheel-orbit, rn-flywheel-color;
  animation-duration: 15s, 15s;
  animation-timing-function: linear, steps(1, jump-end);
  animation-delay: 0s, 0s;
  animation-iteration-count: infinite, infinite;
}

.rn-flywheel__spark-core,
.rn-flywheel__spark-tail {
  fill: currentColor;
}

.rn-flywheel__spark-core {
  stroke: var(--rn-white);
  stroke-width: 1.5px;
}

.rn-flywheel__spark-tail--1 { opacity: 0.58; }
.rn-flywheel__spark-tail--2 { opacity: 0.3; }
.rn-flywheel__spark-tail--3 { opacity: 0.12; }

@keyframes rn-flywheel-orbit {
  to { offset-distance: 100%; }
}

@keyframes rn-flywheel-color {
  0%, 49.9% { color: var(--rn-orange-400); }
  50%, 99.9% { color: var(--rn-teal-500); }
  100% { color: var(--rn-orange-400); }
}

.rn-flywheel__stage {
  --rn-flywheel-stage-color: var(--rn-orange-400);
  --rn-flywheel-dot-pulse: 1.25;
  --rn-flywheel-label-pulse: 1.06;
}

.rn-flywheel__stage--system {
  --rn-flywheel-stage-color: var(--rn-teal-500);
}

.rn-flywheel__stage--search {
  --rn-flywheel-dot-pulse: 1.38;
  --rn-flywheel-label-pulse: 1.1;
}

.rn-flywheel__dot,
.rn-flywheel__label,
.rn-flywheel__back {
  transform-box: fill-box;
  transform-origin: center;
  animation-name: rn-flywheel-stage-pulse;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-delay: var(--rn-flywheel-delay, 0s);
  animation-iteration-count: infinite;
}

.rn-flywheel__dot {
  --rn-flywheel-rest-color: var(--rn-flight-900);
  --rn-flywheel-pulse-color: var(--rn-flywheel-stage-color);
  --rn-flywheel-pulse-scale: var(--rn-flywheel-dot-pulse);
  fill: var(--rn-flywheel-rest-color);
  stroke: var(--rn-flywheel-stage-color);
  stroke-width: 2px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rn-flywheel-stage-color) 34%, transparent));
}

.rn-flywheel__dot--join {
  fill: color-mix(in srgb, var(--rn-teal-500) 12%, var(--rn-flight-900));
  stroke-width: 2.5px;
}

.rn-flywheel__label {
  --rn-flywheel-rest-color: var(--text-body-dark);
  --rn-flywheel-pulse-color: var(--rn-white);
  --rn-flywheel-pulse-scale: var(--rn-flywheel-label-pulse);
  fill: var(--rn-flywheel-rest-color);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rn-flywheel__back {
  --rn-flywheel-rest-color: var(--rn-teal-500);
  --rn-flywheel-pulse-color: var(--rn-white);
  --rn-flywheel-pulse-scale: 1.16;
  fill: var(--rn-flywheel-rest-color);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
}

@keyframes rn-flywheel-stage-pulse {
  0%, 5%, 100% {
    fill: var(--rn-flywheel-rest-color);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rn-flywheel-stage-color) 34%, transparent));
    transform: scale(1);
  }
  1.8% {
    fill: var(--rn-flywheel-pulse-color);
    filter: drop-shadow(0 0 12px var(--rn-flywheel-stage-color));
    transform: scale(var(--rn-flywheel-pulse-scale));
  }
}

.rn-section-head {
  display: grid;
  gap: var(--space-4);
  max-width: 780px;
  margin-bottom: var(--space-8);
}

.rn-section-head h2,
.rn-section-head p {
  margin-bottom: 0;
}

.rn-section-head h2 {
  margin-top: var(--space-1);
}

.rn-section-head p {
  color: var(--text-muted-dark);
  font-size: var(--lead);
  line-height: 1.6;
}

.rn-section--light .rn-section-head p {
  color: var(--text-muted-light);
}

/* The bold single-line setup under an H2. Sentence case, never a second heading. */
.rn-subhead {
  color: var(--text-heading-dark);
  font-size: var(--lead);
  font-weight: 600;
  line-height: 1.45;
}

.rn-section--light .rn-subhead {
  color: var(--text-heading-light);
}

.rn-body {
  max-width: 62ch;
  color: var(--text-body-dark);
}

.rn-body strong {
  color: var(--text-heading-dark);
  font-weight: 600;
}

.rn-note {
  max-width: 66ch;
  color: var(--text-muted-dark);
  font-size: var(--small);
  line-height: 1.6;
}

.rn-section--light .rn-note,
.rn-section--light .rn-body {
  color: var(--text-body-light);
}

.rn-section--light .rn-note {
  color: var(--text-muted-light);
}

.rn-section--light .rn-body strong {
  color: var(--text-heading-light);
}

.rn-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.rn-cols-2 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rn-visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rn-skip-link {
  position: absolute;
  z-index: 100;
  top: var(--space-3);
  left: var(--space-3);
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-control);
  background: var(--action);
  color: var(--action-text);
  font-size: var(--small);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--duration) var(--ease);
}

.rn-skip-link:focus-visible {
  transform: translateY(0);
}

/* ============================================================
   5. EYEBROWS, PILLS, AI MARK
   ============================================================ */

.rn-eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: fit-content;
  color: var(--text-muted-dark);
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rn-eyebrow::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  margin-top: 0.32em;
  background: var(--system);
  box-shadow: 0 0 18px rgba(50, 223, 200, 0.45);
  content: "";
}

.rn-eyebrow--orange::before {
  background: var(--action);
  box-shadow: 0 0 18px rgba(239, 91, 55, 0.35);
}

.rn-section--light .rn-eyebrow {
  color: var(--text-muted-light);
}

.rn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(50, 223, 200, 0.2);
  border-radius: var(--radius-pill);
  background: rgba(50, 223, 200, 0.07);
  color: var(--system);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.rn-pill--live::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--system);
  box-shadow: 0 0 14px rgba(50, 223, 200, 0.6);
  content: "";
  animation: rn-pulse 2.4s var(--ease) infinite;
}

@keyframes rn-pulse {
  0% { box-shadow: 0 0 0 0 rgba(50, 223, 200, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(50, 223, 200, 0); }
  100% { box-shadow: 0 0 0 0 rgba(50, 223, 200, 0); }
}

/* The Conversion Automation mark: a small teal sparkle beside the name.
   Never a badge, never a replacement for the name. */
/* Compact trademark-style mark: hugs the word's last letter, no visual gap.
   Owner directive 2026-08-13: "like the TM trademark thing." */
.rn-ai {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 0.04em;
  color: var(--system);
  font-family: var(--font-body);
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  vertical-align: 0.5em;
  white-space: nowrap;
}

.rn-ai svg {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}

/* Flex anchors (nav, mobile panel) ignore vertical-align — raise the mark
   positionally so it reads as the same trademark superscript there. */
.rn-nav__links a > .rn-ai,
.rn-nav__panel-inner a > .rn-ai {
  position: relative;
  top: -0.42em;
  align-self: center;
}

/* On an orange action surface the mark rides the button's dark text. */
.rn-btn--primary .rn-ai,
.rn-section--light .rn-btn--primary .rn-ai {
  color: currentColor;
}

.rn-section--light .rn-ai {
  color: var(--system-ink);
}

/* ============================================================
   6. BUTTONS AND LINKS
   ============================================================ */

.rn-btn {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.85rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.rn-btn:hover {
  transform: translateY(-2px);
}

.rn-btn:active {
  transform: translateY(0);
}

.rn-btn svg {
  flex: 0 0 auto;
  transition: transform var(--duration-fast) var(--ease);
}

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

.rn-btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--action);
  color: var(--action-text);
  box-shadow: var(--shadow-action);
}

.rn-btn--primary:hover {
  background: var(--action-hover);
  box-shadow: var(--shadow-action-hot);
}

.rn-btn--primary:active {
  background: var(--action-active);
}

/* Shine sweep — primary only. */
.rn-btn--primary::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -70%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  transition: left 620ms var(--ease);
  pointer-events: none;
}

.rn-btn--primary:hover::after {
  left: 135%;
}

.rn-btn--primary > * {
  position: relative;
  z-index: 1;
}

.rn-btn--secondary {
  border-color: var(--line-dark-strong);
  background: transparent;
  color: var(--text-heading-dark);
}

.rn-btn--secondary:hover {
  border-color: rgba(50, 223, 200, 0.45);
  background: rgba(50, 223, 200, 0.06);
  box-shadow: 0 0 0 1px rgba(50, 223, 200, 0.12), 0 10px 30px rgba(50, 223, 200, 0.08);
}

.rn-section--light .rn-btn--secondary {
  border-color: rgba(9, 37, 45, 0.22);
  color: var(--text-heading-light);
}

.rn-section--light .rn-btn--secondary:hover {
  border-color: rgba(7, 118, 110, 0.5);
  background: rgba(50, 223, 200, 0.1);
  box-shadow: none;
}

.rn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--text-body-dark);
  font-size: 0.9375rem;
  font-weight: 600;
}

.rn-link span {
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease);
}

.rn-link svg {
  flex: 0 0 auto;
  transition: transform var(--duration-fast) var(--ease);
}

.rn-link:hover span {
  border-bottom-color: currentColor;
}

.rn-link:hover svg {
  transform: translateX(4px);
}

.rn-section--light .rn-link {
  color: var(--text-body-light);
}

/* Quiet tertiary route — "I need both". */
.rn-quiet-route {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted-dark);
  font-size: var(--small);
  font-weight: 500;
}

.rn-quiet-route:hover {
  color: var(--text-body-dark);
}

.rn-quiet-route span {
  border-bottom: 1px solid rgba(177, 198, 194, 0.4);
  transition: border-color var(--duration-fast) var(--ease);
}

.rn-quiet-route:hover span {
  border-bottom-color: currentColor;
}

.rn-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* ============================================================
   7. CARDS
   ============================================================ */

.rn-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

.rn-card--interactive {
  transition:
    transform var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.rn-card--interactive:hover {
  border-color: var(--line-dark-strong);
  background: var(--surface-raised-hover);
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(2, 15, 20, 0.5);
}

.rn-card--light {
  border-color: var(--line-light);
  background: var(--rn-white);
  color: var(--text-body-light);
}

.rn-card--light h3 {
  color: var(--text-heading-light);
}

.rn-card h3 {
  margin-bottom: var(--space-3);
}

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

.rn-card p {
  color: var(--text-muted-dark);
}

.rn-card--light p {
  color: var(--text-muted-light);
}

/* Feature card anchor icon. */
.rn-feature-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: var(--space-5);
  border: 1px solid rgba(50, 223, 200, 0.19);
  border-radius: var(--radius-control);
  background: rgba(50, 223, 200, 0.07);
  color: var(--system);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.rn-feature-icon--demand {
  border-color: rgba(239, 91, 55, 0.19);
  background: rgba(239, 91, 55, 0.07);
  color: var(--action-hover);
}

.rn-card--interactive:hover .rn-feature-icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 26px rgba(50, 223, 200, 0.22);
}

.rn-card--interactive:hover .rn-feature-icon--demand {
  box-shadow: 0 8px 26px rgba(239, 91, 55, 0.22);
}

/* Proof card: one number or one quote, and its source. */
.rn-proof {
  display: grid;
  gap: var(--space-3);
  align-content: space-between;
}

.rn-proof__value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: var(--system);
}

.rn-proof__label {
  color: var(--text-muted-dark);
  font-size: 0.9rem;
}

.rn-proof__source {
  color: var(--text-faint-dark);
  font-size: 0.78rem;
  font-style: normal;
}

/* Cursor spotlight — interactive cards only. */
.rn-spot {
  --mx: 50%;
  --my: 50%;
  --spot: 50, 223, 200;
}

.rn-spot--orange {
  --spot: 239, 91, 55;
}

.rn-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(var(--spot), 0.1), transparent 65%);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  pointer-events: none;
}

.rn-spot:hover::after,
.rn-spot:focus-within::after {
  opacity: 1;
}

.rn-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(var(--spot), 0.55), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  pointer-events: none;
}

.rn-spot:hover::before,
.rn-spot:focus-within::before {
  opacity: 1;
}

.rn-spot > * {
  position: relative;
  z-index: 1;
}

.rn-spot > .rn-choice__arrow {
  position: absolute;
}

/* ============================================================
   8. INPUTS AND CONTROLS
   ============================================================ */

.rn-input {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-control);
  outline: none;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-heading-dark);
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.rn-input:focus {
  border-color: var(--system);
  box-shadow: 0 0 0 3px rgba(50, 223, 200, 0.12);
}

.rn-input::placeholder {
  color: var(--text-faint-dark);
}

.rn-section--light .rn-input {
  border-color: rgba(9, 37, 45, 0.14);
  background: var(--rn-white);
  color: var(--text-body-light);
}

.rn-section--light .rn-input:focus {
  border-color: var(--system-ink);
  box-shadow: 0 0 0 3px rgba(7, 118, 110, 0.14);
}

/* Field block: label outside, value on the right, hint below. */
.rn-field {
  display: grid;
  gap: 0.35rem;
}

.rn-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--text-body-light);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.rn-field__value {
  color: var(--rn-ink-900);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.rn-field__hint {
  color: var(--text-muted-light);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Range control — orange thumb: this is the visitor's action. */
.rn-range {
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  margin: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.rn-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    var(--action) 0%,
    var(--action) var(--fill, 0%),
    rgba(9, 37, 45, 0.14) var(--fill, 0%),
    rgba(9, 37, 45, 0.14) 100%
  );
}

.rn-range::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(9, 37, 45, 0.14);
}

.rn-range::-moz-range-progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--action);
}

.rn-range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 3px solid var(--rn-white);
  border-radius: 50%;
  background: var(--action);
  box-shadow: var(--shadow-action);
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.rn-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 3px solid var(--rn-white);
  border-radius: 50%;
  background: var(--action);
  box-shadow: var(--shadow-action);
  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.rn-range:hover::-webkit-slider-thumb,
.rn-range:active::-webkit-slider-thumb {
  transform: scale(1.08);
  box-shadow: var(--shadow-action-hot);
}

.rn-range:hover::-moz-range-thumb,
.rn-range:active::-moz-range-thumb {
  transform: scale(1.08);
  box-shadow: var(--shadow-action-hot);
}

.rn-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(7, 118, 110, 0.35);
}

.rn-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(7, 118, 110, 0.35);
}

/* Segmented control — the selected side is the visitor's action. */
.rn-seg {
  display: inline-flex;
  overflow: hidden;
  width: fit-content;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-control);
  background: var(--rn-white);
}

.rn-seg__btn {
  min-height: 52px;
  padding: 0.85rem 1.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted-light);
  /* Spec §8: Barlow never sets a button. The toggle still carries the
     section's heading weight, but in the UI face. */
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.15vw, 1rem);
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}

.rn-seg__btn:hover {
  background: rgba(9, 37, 45, 0.05);
  color: var(--text-heading-light);
}

.rn-seg__btn[aria-pressed="true"] {
  background: var(--rn-ink-900);
  color: var(--rn-cloud-50);
}

/* ============================================================
   9. ACCORDION — hairline rows, no card per question
   ============================================================ */

.rn-acc {
  border-top: 1px solid var(--line-dark);
  max-width: var(--measure);
}

.rn-acc__item {
  border-bottom: 1px solid var(--line-dark);
}

.rn-acc__q {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border: 0;
  background: transparent;
  color: var(--text-heading-dark);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease);
}

.rn-acc__q:hover {
  color: var(--system);
}

.rn-acc__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--text-muted-dark);
}

.rn-acc__icon::before,
.rn-acc__icon::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: var(--radius-pill);
  background: currentColor;
  content: "";
  transition: transform var(--duration) var(--ease);
}

.rn-acc__icon::after {
  transform: rotate(90deg);
}

.rn-acc__q[aria-expanded="true"] .rn-acc__icon::after {
  transform: rotate(0deg);
}

.rn-acc__a {
  max-width: var(--measure);
  padding-bottom: var(--space-5);
  color: var(--text-muted-dark);
}

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

/* ============================================================
   10. NAVIGATION
   ============================================================ */

.rn-nav {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  height: 72px;
  border-bottom: 1px solid var(--line-dark);
  background: rgba(2, 15, 20, 0.84);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.rn-nav.is-scrolled {
  background: rgba(2, 15, 20, 0.94);
  box-shadow: 0 12px 40px rgba(2, 15, 20, 0.5);
}

.rn-nav__inner {
  display: flex;
  width: min(100% - 64px, var(--container-wide));
  height: 100%;
  align-items: center;
  gap: var(--space-6);
  margin-inline: auto;
}

.rn-nav__brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
}

/* Brand lockup — bird mark + typeset wordmark (shared by nav and footer) */
.rn-brand__mark {
  width: auto;
  height: 40px;
  flex: none;
}

.rn-brand__type {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rn-brand__name {
  color: var(--text-heading-dark);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  text-transform: uppercase;
}

.rn-brand__name-alt {
  color: var(--rn-teal-500);
}

.rn-brand__tag {
  margin-top: var(--space-1);
  color: var(--text-muted-dark);
  font-family: var(--font-display);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  line-height: 1;
  text-transform: uppercase;
}

.rn-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
}

.rn-nav__links > a:not(.rn-btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--text-muted-dark);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color var(--duration-fast) var(--ease);
}

.rn-nav__links > a:not(.rn-btn):hover {
  color: var(--text-heading-dark);
}

.rn-nav__links > a[aria-current="page"] {
  color: var(--text-heading-dark);
}

/* Gradient underline slides in on hover. */
.rn-nav__links > a:not(.rn-btn)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--system), var(--action));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease);
}

.rn-nav__links > a:not(.rn-btn):hover::after,
.rn-nav__links > a[aria-current="page"]::after {
  transform: scaleX(1);
}

.rn-nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-body-dark) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.rn-nav .rn-btn {
  min-height: 44px;
  padding-inline: 1.15rem;
  font-size: 0.875rem;
}

.rn-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-heading-dark);
  cursor: pointer;
  place-items: center;
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}

.rn-nav__toggle:hover {
  border-color: rgba(50, 223, 200, 0.45);
  background: rgba(50, 223, 200, 0.06);
}

.rn-nav__toggle span,
.rn-nav__toggle span::before,
.rn-nav__toggle span::after {
  display: block;
  width: 18px;
  height: 1.75px;
  border-radius: var(--radius-pill);
  background: currentColor;
  transition: transform var(--duration) var(--ease), opacity var(--duration-fast) var(--ease);
}

.rn-nav__toggle span::before,
.rn-nav__toggle span::after {
  position: absolute;
  content: "";
}

.rn-nav__toggle span::before {
  transform: translateY(-6px);
}

.rn-nav__toggle span::after {
  transform: translateY(6px);
}

.rn-nav__toggle[aria-expanded="true"] span {
  background: transparent;
}

.rn-nav__toggle[aria-expanded="true"] span::before {
  transform: translateY(0) rotate(45deg);
}

.rn-nav__toggle[aria-expanded="true"] span::after {
  transform: translateY(0) rotate(-45deg);
}

.rn-nav__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  padding: var(--space-4) 0 var(--space-5);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(2, 15, 20, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(2, 15, 20, 0.6);
}

.rn-nav__panel[hidden] {
  display: none;
}

.rn-nav__panel-inner {
  display: grid;
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}

.rn-nav__panel a {
  display: flex;
  min-height: 56px;
  align-items: center;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-body-dark);
  font-size: 1rem;
  font-weight: 500;
}

.rn-nav__panel a:last-child {
  border-bottom: 0;
}

.rn-nav__panel a:hover {
  color: var(--text-heading-dark);
}

/* ============================================================
   11. HERO AND AURORA — one aurora per page
   ============================================================ */

.rn-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 72px;
  background: var(--surface-canvas);
}

.rn-hero__aurora {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.rn-hero__aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(76px) saturate(1.12);
  will-change: transform;
}

.rn-hero__aurora i:nth-child(1) {
  top: -8%;
  right: -2%;
  width: 780px;
  height: 780px;
  background: radial-gradient(closest-side, rgba(50, 223, 200, 0.17), transparent 64%);
  animation: rn-drift-a 26s ease-in-out infinite alternate;
}

.rn-hero__aurora i:nth-child(2) {
  top: -12%;
  left: -7%;
  width: 640px;
  height: 640px;
  background: radial-gradient(closest-side, rgba(239, 91, 55, 0.14), transparent 64%);
  animation: rn-drift-b 32s ease-in-out infinite alternate;
}

.rn-hero__aurora i:nth-child(3) {
  bottom: -28%;
  left: 30%;
  width: 700px;
  height: 700px;
  background: radial-gradient(closest-side, rgba(10, 55, 70, 0.94), transparent 68%);
  animation: rn-drift-c 38s ease-in-out infinite alternate;
}

@keyframes rn-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-70px, 50px, 0) scale(1.12); }
}

@keyframes rn-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to { transform: translate3d(60px, 30px, 0) scale(0.94); }
}

@keyframes rn-drift-c {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-80px, -40px, 0); }
}

.rn-hero__inner {
  display: grid;
  width: min(100% - 64px, var(--container-wide));
  align-items: center;
  gap: clamp(3rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
  margin-inline: auto;
  padding-block: var(--space-9) var(--space-10);
}

.rn-hero__copy {
  max-width: var(--measure-hero);
}

.rn-hero__copy h1 {
  margin: var(--space-5) 0;
}

.rn-hero__lead {
  max-width: 560px;
  margin-bottom: var(--space-6);
  color: var(--text-muted-dark);
  font-size: var(--lead);
  line-height: 1.62;
}

/* Gradient word — maximum one per composition. */
.rn-burn {
  font-style: normal;
  background: linear-gradient(100deg, var(--rn-orange-400), var(--rn-orange-500) 45%, #ffb187 80%, var(--rn-orange-400));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rn-sheen 7s linear infinite;
  filter: drop-shadow(0 0 22px rgba(239, 91, 55, 0.3));
}

.rn-burn--system {
  background: linear-gradient(100deg, var(--rn-teal-500), #8ff2e4 40%, var(--rn-teal-500) 75%, #1fbfa9);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(50, 223, 200, 0.25));
  animation: rn-sheen 6s linear infinite;
}

@keyframes rn-sheen {
  from { background-position: 0% 50%; }
  to { background-position: 220% 50%; }
}

/* ============================================================
   12. PATH CHOICES — two equal situation surfaces
   ============================================================ */

.rn-choices {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--space-4);
}

.rn-choice {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 92px;
  align-content: center;
  gap: 0.3rem;
  padding: 1.15rem 3rem 1.15rem 1.4rem;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.035);
  transition:
    transform var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.rn-choice::before {
  position: absolute;
  z-index: 2;
  top: 20px;
  bottom: 20px;
  left: 0;
  width: 3px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--action);
  content: "";
  transition: top var(--duration) var(--ease), bottom var(--duration) var(--ease);
}

/* A choice is also a spotlight card. Reset the spotlight border mask here so
   it cannot suppress the choice's own role signal pseudo-element. The moving
   interior spotlight remains on ::after; the real border takes the role tint
   on hover/focus. */
.rn-choice.rn-spot::before {
  right: auto;
  padding: 0;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
}

.rn-choice--system::before {
  background: var(--system);
}

.rn-choice:hover {
  border-color: rgba(239, 91, 55, 0.5);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(239, 91, 55, 0.12);
}

.rn-choice:hover::before {
  top: 12px;
  bottom: 12px;
}

.rn-choice--system:hover {
  border-color: rgba(50, 223, 200, 0.5);
  box-shadow: 0 14px 40px rgba(50, 223, 200, 0.1);
}

.rn-choice__label {
  color: var(--text-heading-dark);
  font-family: var(--font-display);
  font-size: var(--h3);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.rn-choice__meta {
  display: inline-flex;
  align-items: center;
  color: var(--text-faint-dark);
  font-size: 0.75rem;
  font-weight: 500;
}

.rn-choice__arrow {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  color: var(--text-muted-dark);
  transform: translateY(-50%);
  transition: transform var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.rn-choice:hover .rn-choice__arrow {
  transform: translate(4px, -50%);
  color: var(--text-heading-dark);
}

/* Live log: real system stages take turns carrying a restrained teal signal. */
.js .rn-live-log > * {
  animation-name: rn-stage-glow;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.js .rn-live-log > :nth-child(1) { animation-delay: 0s; }
.js .rn-live-log > :nth-child(2) { animation-delay: 1.5s; }
.js .rn-live-log > :nth-child(3) { animation-delay: 3s; }
.js .rn-live-log > :nth-child(4) { animation-delay: 4.5s; }

@keyframes rn-stage-glow {
  0%, 18%, 100% {
    background-color: rgba(4, 24, 32, 0.9);
    box-shadow: inset 0 0 0 0 rgba(50, 223, 200, 0);
  }
  8% {
    background-color: rgba(50, 223, 200, 0.09);
    box-shadow: inset 3px 0 0 rgba(50, 223, 200, 0.7), 0 0 22px rgba(50, 223, 200, 0.07);
  }
}

/* ============================================================
   13. PROCESS AND TIMELINE
   ============================================================ */

/* Numbered steps on a connecting rail — not four heavy cards. */
.rn-steps {
  position: relative;
  display: grid;
  gap: var(--space-6) var(--space-5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rn-steps--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rn-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-6);
}

/* One continuous rail: each segment reaches across the grid gap
   into the next step, and the last node ends it. */
.rn-step::before {
  position: absolute;
  z-index: 0;
  top: 6px;
  right: calc(-1 * var(--space-5));
  left: 0;
  height: 1px;
  background: var(--line-dark);
  content: "";
}

.rn-step:first-child::before {
  left: 6px;
}

.rn-step:last-child::before {
  right: calc(100% - 7px);
}

.rn-step::after {
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(239, 91, 55, 0.55);
  border-radius: 50%;
  background: var(--surface-canvas);
  box-shadow: 0 0 0 4px rgba(239, 91, 55, 0.08);
  content: "";
}

.rn-section--deep .rn-step::after {
  background: var(--surface-deep);
}

.rn-step--system::after {
  border-color: rgba(50, 223, 200, 0.6);
  box-shadow: 0 0 0 4px rgba(50, 223, 200, 0.08);
}

.rn-step__num {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-faint-dark);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rn-step h3 {
  margin-bottom: var(--space-2);
  font-size: 1.15rem;
}

.rn-step p {
  margin-bottom: 0;
  color: var(--text-muted-dark);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Sequence rail: the four stage names as one connected line. */
.rn-seq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-dark);
  color: var(--text-faint-dark);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rn-seq__sep {
  color: rgba(239, 91, 55, 0.7);
}

.rn-seq__sep:last-of-type {
  color: rgba(50, 223, 200, 0.7);
}

/* Horizontal timeline strip. */
.rn-timeline {
  position: relative;
  display: grid;
  gap: var(--space-5);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: var(--space-6) var(--space-6) var(--space-5);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-frame);
  background: rgba(255, 255, 255, 0.02);
}

.rn-timeline__node {
  position: relative;
  padding-top: var(--space-5);
  color: var(--text-muted-dark);
  font-size: 0.78rem;
  line-height: 1.4;
}

.rn-timeline__node::before {
  position: absolute;
  top: 5px;
  right: -50%;
  left: 4px;
  height: 1px;
  background: var(--line-dark);
  content: "";
}

.rn-timeline__node:last-child::before {
  right: 50%;
}

.rn-timeline__node::after {
  position: absolute;
  top: 1px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1px solid var(--line-dark-strong);
  border-radius: 50%;
  background: var(--surface-deep);
  content: "";
}

.rn-timeline__node--mark {
  color: var(--system);
}

.rn-timeline__node--mark::after {
  border-color: var(--system);
  box-shadow: 0 0 12px rgba(50, 223, 200, 0.4);
}

.rn-timeline__node strong {
  display: block;
  color: var(--text-body-dark);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.rn-timeline__node--mark strong {
  color: var(--system);
}

/* ============================================================
   14. CALCULATOR SHELL — light working surface
   ============================================================ */

.rn-calc {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-7);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-frame);
  background: var(--rn-white);
  box-shadow: var(--shadow-sm);
}

.rn-calc__fields {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rn-calc__lever {
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-light);
}

.rn-calc__lever[hidden] {
  display: none;
}

.rn-calc__field[hidden] {
  display: none;
}

.rn-result-card {
  padding: var(--space-6);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-card);
  background: var(--surface-light-alt);
}

.rn-result-card__label {
  color: var(--rn-orange-650);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rn-result-card__line {
  margin-bottom: 0.35rem;
  color: var(--text-heading-light);
  font-size: 1rem;
  font-weight: 600;
}

.rn-result-card__number {
  margin-block: 0.15rem 0.35rem;
  color: var(--rn-teal-750);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

.rn-result-card__sub {
  margin-bottom: 0;
  color: var(--text-muted-light);
  font-size: 0.9rem;
}

.rn-disc {
  display: grid;
  gap: 0.15rem;
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-light);
  color: var(--text-muted-light);
  font-size: 0.78rem;
}

.rn-disc span {
  display: block;
}

/* ============================================================
   15. FINAL CTA — one rotating halo per page
   ============================================================ */

.rn-section--halo {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(55% 70% at 50% 100%, rgba(50, 223, 200, 0.12), transparent 70%),
    var(--surface-deep);
}

.rn-section--halo::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -55%;
  left: 50%;
  width: 1300px;
  height: 1300px;
  border-radius: 50%;
  margin-left: -650px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(50, 223, 200, 0.14) 60deg,
    transparent 140deg,
    rgba(239, 91, 55, 0.1) 210deg,
    transparent 300deg
  );
  filter: blur(70px);
  animation: rn-spin 48s linear infinite;
}

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

.rn-cta {
  display: grid;
  justify-items: center;
  text-align: center;
}

.rn-cta h2 {
  max-width: 900px;
  margin-block: var(--space-5) var(--space-4);
}

.rn-cta__lead {
  max-width: 640px;
  margin-bottom: var(--space-7);
  color: var(--text-muted-dark);
  font-size: var(--lead);
}

/* ============================================================
   16. FOOTER
   ============================================================ */

.rn-footer {
  padding-block: var(--space-8) var(--space-6);
  border-top: 1px solid var(--line-dark);
  background: var(--rn-flight-950);
}

.rn-footer .rn-wrap {
  width: min(100% - 64px, var(--container-wide));
  margin-inline: auto;
}

.rn-footer-masthead {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line-dark);
}

.rn-footer-masthead > * {
  min-width: 0;
  min-height: 128px;
  padding: var(--space-5);
}

.rn-footer-masthead > * + * {
  border-left: 1px solid var(--line-dark);
}

.rn-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--rn-white);
}

.rn-footer__brand .rn-brand__mark {
  height: 42px;
}

.rn-footer__brand .rn-brand__name {
  font-size: 1.3rem;
}

.rn-footer__brand .rn-brand__tag {
  font-size: 0.48rem;
  letter-spacing: 0.3em;
}

.rn-footer-masthead__contact,
.rn-footer-masthead__signal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.rn-footer-masthead__contact span,
.rn-footer-masthead__signal span,
.rn-footer-directory__group h2,
.rn-footer-fold {
  color: var(--rn-mist-600);
  font-family: var(--font-display);
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rn-footer-masthead__contact strong,
.rn-footer-masthead__signal strong {
  color: var(--rn-mist-100);
  font-size: var(--small);
  font-weight: 500;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.rn-footer-masthead__contact {
  transition: color var(--duration-fast) var(--ease);
}

.rn-footer-masthead__contact:hover strong {
  color: var(--rn-white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--space-1);
}

.rn-footer-directory {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(280px, 1fr);
  border-bottom: 1px solid var(--line-dark);
}

.rn-footer-directory__group {
  padding: var(--space-7) var(--space-5);
}

.rn-footer-directory__group h2 {
  margin: 0 0 var(--space-5);
}

.rn-footer-directory__group h2 > span,
.rn-footer-fold > span:first-child {
  margin-right: var(--space-2);
  color: var(--system);
}

.rn-footer-fold {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.rn-footer-fold__icon {
  display: none;
}

.rn-footer-directory__links {
  display: grid;
  gap: var(--space-1) var(--space-5);
}

.rn-footer-directory__links--industries {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rn-footer-directory__links a,
.rn-footer__contact a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding-block: var(--space-1);
  color: var(--rn-mist-400);
  font-family: var(--font-body);
  font-size: var(--small);
  line-height: 1.55;
  transition: color var(--duration-fast) var(--ease), text-decoration-color var(--duration-fast) var(--ease);
}

.rn-footer-directory__links a:hover,
.rn-footer__contact a:hover {
  color: var(--rn-white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--space-1);
}

.rn-footer a:focus-visible,
.rn-footer-fold:focus-visible {
  outline: 2px solid var(--system);
  outline-offset: var(--space-1);
}

.rn-footer-directory__utility {
  display: grid;
  border-left: 1px solid var(--line-dark);
}

.rn-footer-directory__group--services {
  border-bottom: 1px solid var(--line-dark);
}

.rn-footer-directory__area-note {
  max-width: var(--measure);
  margin: var(--space-4) 0 0;
  color: var(--rn-mist-600);
  font-family: var(--font-body);
  font-size: var(--small);
  line-height: 1.55;
}

.rn-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-5);
  color: var(--rn-mist-600);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.55;
}

.rn-footer-bottom p {
  margin: 0;
}

.rn-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.rn-footer__contact a {
  padding-block: 0;
  font-size: inherit;
}

@media (max-width: 840px) {
  .rn-footer .rn-wrap {
    width: min(100% - 48px, var(--container));
  }

  .rn-footer-masthead {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rn-footer-masthead > :nth-child(odd) {
    border-left: 0;
  }

  .rn-footer-masthead > :nth-child(n + 3) {
    border-top: 1px solid var(--line-dark);
  }

  .rn-footer-directory {
    grid-template-columns: 1fr;
  }

  .rn-footer-directory__utility {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line-dark);
    border-left: 0;
  }

  .rn-footer-directory__group--services {
    border-right: 1px solid var(--line-dark);
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .rn-footer {
    padding-block: var(--space-7) var(--space-5);
  }

  .rn-footer .rn-wrap {
    width: min(100% - 40px, var(--container));
  }

  .rn-footer-masthead {
    grid-template-columns: 1fr;
  }

  .rn-footer-masthead > * {
    min-height: auto;
    padding: var(--space-5) var(--space-4);
    border-left: 0;
  }

  .rn-footer-masthead > * + * {
    border-top: 1px solid var(--line-dark);
  }

  .rn-footer-directory__group {
    padding: var(--space-6) var(--space-4);
  }

  .rn-footer-directory__links--industries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rn-footer-directory__utility {
    grid-template-columns: 1fr;
  }

  .rn-footer-directory__group--services {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .rn-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: var(--space-4);
  }
}

@media (max-width: 480px) {
  .rn-footer-directory__links--industries {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   17. REVEALS
   ============================================================ */

.rn-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.rn-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* No JS: content must render, and no control may look dead. The full
   navigation still lives in the footer. */
.no-js .rn-reveal {
  opacity: 1;
  transform: none;
}

.no-js .rn-nav__toggle {
  display: none !important;
}

/* ============================================================
   18. RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {
  :root {
    --section-pad: 5.5rem;
    --section-pad-strip: var(--space-8);
  }

  .rn-nav__links > a:not(.rn-btn):not(.rn-nav__phone) {
    display: none;
  }

  .rn-nav__toggle {
    display: grid;
  }

  .rn-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
  }

  .rn-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rn-step:nth-child(2)::before {
    right: calc(100% - 7px);
  }

  .rn-timeline {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  .rn-timeline__node::before,
  .rn-timeline__node:last-child::before {
    top: 5px;
    right: auto;
    bottom: calc(-1 * var(--space-5) - 4px);
    left: 4px;
    width: 1px;
    height: auto;
  }

  .rn-timeline__node:last-child::before {
    display: none;
  }

  .rn-timeline__node {
    padding-top: 0;
    padding-left: var(--space-5);
  }

  .rn-timeline__node::after {
    top: 3px;
  }
}

@media (max-width: 840px) {
  .rn-container,
  .rn-container-wide,
  .rn-nav__inner,
  .rn-hero__inner,
  .rn-footer__inner {
    width: min(100% - 48px, var(--container));
  }

  .rn-hero__inner {
    grid-template-columns: 1fr;
    padding-block: var(--space-9) var(--space-9);
  }

  .rn-cols-2 {
    grid-template-columns: 1fr;
  }

  .rn-calc__fields {
    grid-template-columns: 1fr;
  }

  .rn-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :root {
    --section-pad: 4.5rem;
    --section-pad-strip: var(--space-7);
  }

  .rn-container,
  .rn-container-wide,
  .rn-nav__inner,
  .rn-hero__inner,
  .rn-footer__inner {
    width: min(100% - 40px, var(--container));
  }

  .rn-nav {
    height: 64px;
  }

  .rn-nav__inner {
    gap: var(--space-4);
  }

  .rn-nav__links {
    gap: var(--space-3);
  }

  .rn-nav__brand {
    gap: 0.4rem;
  }

  .rn-nav__brand .rn-brand__mark {
    height: 32px;
  }

  .rn-nav__brand .rn-brand__name {
    font-size: 1.1rem;
  }

  .rn-nav__brand .rn-brand__tag {
    font-size: 0.42rem;
    letter-spacing: 0.28em;
  }

  .rn-nav__phone {
    display: none !important;
  }

  .rn-nav .rn-btn {
    min-height: 44px;
    padding-inline: 0.8rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .rn-hero {
    padding-top: 64px;
  }

  .rn-hero__copy h1 {
    margin-block: var(--space-4) var(--space-5);
  }

  .rn-choices,
  .rn-steps {
    grid-template-columns: 1fr;
  }

  .rn-step::before,
  .rn-step:first-child::before,
  .rn-step:last-child::before {
    top: 6px;
    right: auto;
    bottom: calc(-1 * var(--space-6) - 4px);
    left: 4px;
    width: 1px;
    height: auto;
  }

  .rn-step:last-child::before {
    display: none;
  }

  .rn-step {
    padding-top: 0;
    padding-left: var(--space-5);
  }

  .rn-step::after {
    top: 3px;
  }

  .rn-card,
  .rn-result-card {
    padding: var(--space-5);
  }

  .rn-calc {
    padding: var(--space-5);
  }

  .rn-seg {
    width: 100%;
  }

  .rn-seg__btn {
    width: 100%;
  }

  .rn-btn-row .rn-btn {
    width: 100%;
  }

  .rn-footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ============================================================
   19. PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .rn-reveal {
    opacity: 1;
    transform: none;
  }

  .rn-burn,
  .rn-burn--system {
    filter: none;
  }

  .js .rn-live-log > *,
  .rn-live-log > * {
    animation: none;
  }

  .rn-action-band::before {
    width: 100%;
    background: linear-gradient(90deg, var(--rn-orange-400), rgba(255, 255, 255, 0.86), var(--rn-orange-400));
    box-shadow: 0 0 5px rgba(255, 112, 78, 0.7);
    transform: none;
    animation: none;
  }

  .rn-flywheel__spark {
    display: none;
    animation: none;
  }

  .rn-flywheel__dot,
  .rn-flywheel__label,
  .rn-flywheel__back {
    transform: none;
    animation: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line-dark: rgba(255, 255, 255, 0.22);
    --line-dark-strong: rgba(255, 255, 255, 0.34);
    --line-light: rgba(9, 37, 45, 0.32);
    --text-muted-dark: var(--rn-mist-100);
    --text-faint-dark: var(--rn-mist-400);
    --text-muted-light: var(--rn-ink-900);
  }
}