:root {
  --cloud: #f7faff;
  --mist: #eef5ff;
  --steel: #d9e7f6;
  --ink: #102033;
  --muted: #53667d;
  --blue: #2457d6;
  --royal: #143f9f;
  --copy-strong: #263a52;
  --scan: #7dbdff;
  --verified: #43b883;
  --amber: #d99a2b;
  --white: #ffffff;
  --radius-sm: 10px;
  --radius-md: 18px;
  --shadow-soft: 0 28px 90px rgba(49, 93, 148, 0.18);
  --font-display: "Geist", "Satoshi", "Aptos", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Satoshi", "Geist", "Aptos", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;

  /* Site-wide typography/spacing/layout scale (design-consistency pass) —
     every page's hero, section heading, lede paragraph, content container,
     and hero padding should pull from these instead of inventing its own
     one-off values, so page-to-page alignment and sizing actually match. */
  --h1-size: clamp(40px, 5vw, 72px);
  --h1-weight: 700;
  --h1-leading: 0.95;
  --h1-tracking: -0.02em;

  --h2-size: clamp(28px, 2.6vw, 36px);
  --h2-weight: 700;
  --h2-leading: 1.08;
  --h2-tracking: -0.03em;

  --lede-size: clamp(16px, 1.2vw, 18px);
  --lede-leading: 1.55;

  --container-max: 1240px;
  --container-pad: 72px;
  --container: min(var(--container-max), calc(100% - var(--container-pad)));

  --hero-pad-top: 150px;
  --hero-pad-bottom: 100px;
}

/* Self-hosted so every browser renders identical text metrics — previously
   these names were declared but never loaded, so each browser fell back to
   a different system font and wrapped the same copy differently. */
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

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

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

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

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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 16% 18%, rgba(125, 189, 255, 0.24), transparent 28vw),
    linear-gradient(145deg, var(--cloud) 0%, var(--mist) 56%, #ffffff 100%);
  color: var(--ink);
  font-family: var(--font-ui);
  letter-spacing: 0;
  font-kerning: normal;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

body::before {
  /* ponytail: dot/line grid overlay removed sitewide per client review
     item 10 ("reads AI-generated") — was a fixed, full-viewport ::before
     on every page. display:none instead of deleting the rule so the
     content:"" pseudo-element still exists (harmless) but never paints. */
  display: none;
}

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

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 80;
  transform: translateY(-140%);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  padding: 10px 14px;
}

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

.site-header {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  /* No background here on purpose — the homepage needs this fully
     transparent to overlay its hero animation, and Use Cases needs it
     transparent for its own dark-hero-then-scroll effect. Every other
     page gets a real (frosted) background from the body[class] rule
     below, which — because index.html's <body> carries no class and
     Use Cases is explicitly excluded — never touches either of them.
     A background was added directly here once before and silently
     turned both of those pages' headers solid white, which on the
     homepage covered the hero and on Use Cases made the white nav text
     unreadable against a white bar. */
  /* ponytail: bumped from 60 -> 600 and forced its own stacking context.
     Why RackTrack's sticky evidence cards (.why-stack-card, z-index 1-5)
     were painting over this header while pinned mid-scroll even though
     60 > 5 on paper — isolation guarantees this header's stacking context
     is rooted at the very top regardless of what any page nests beneath
     it, so no future pinned/sticky section on any page can repeat this. */
  z-index: 600;
  isolation: isolate;
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 24px 36px;
  margin: 0 auto;
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease;
}

body.is-sequencing .site-header {
  opacity: 0;
  transform: translateY(-12px);
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  pointer-events: auto;
}

.site-nav a {
  position: relative;
  color: var(--copy-strong);
  opacity: 1;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  transition: color 150ms ease, opacity 150ms ease;
}

/* Tablet-landscape gap: just above the 980px hamburger cutoff, the full
   desktop nav (6 links + dropdown chevrons + CTA, gap:30px, 14px type)
   doesn't quite fit at iPad-landscape width (1024px) and wraps each
   label onto two lines ("Why" / "RackTrack"). Tightening gap and type
   slightly in this narrow band keeps it on one line without moving the
   hamburger breakpoint itself or any of the page-content rules keyed to
   it elsewhere in this file. */
@media (min-width: 981px) and (max-width: 1150px) {
  .site-nav {
    gap: 18px;
  }

  .site-nav a,
  .site-nav .nav-item > a {
    font-size: 13.5px;
  }
}

.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--royal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ink);
  opacity: 1;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Nav hover flyouts (Use Cases / Resources) — list their sub-pages so a
   visitor can jump straight in without landing on the hub page first. */
.nav-item {
  position: relative;
}

/* .nav-item is a flex item of .site-nav and stretches to the row's full
   cross-axis height (default align-items: stretch) — but its own <a>,
   being a nested inline element rather than a direct flex child, does not
   inherit that stretch. Left alone it stays at its tiny intrinsic line
   height and sinks to the bottom of the now-taller box, which visually
   reads as "Use Cases / Resources dropped onto a second row" next to the
   plain links that ARE direct flex children. Filling + centering it here
   makes it occupy the same box its siblings get for free. */
.nav-item > a {
  display: flex;
  align-items: center;
  height: 100%;
}

/* ponytail: invisible hover bridge — closes the 10px gap between the nav
   link and .nav-dropdown below it, scoped to exactly the trigger's own
   width (not the dropdown's, which is much wider). Without this bridge,
   moving the pointer from the link down into that gap leaves .nav-item's
   hover box and the menu closes before the click lands — the "works
   once, not the next" bug from review. Sizing it to the dropdown's width
   instead of the trigger's was tried and reverted: a bridge that wide is
   present at all times (not just while a menu is open) and physically
   sat under the *neighboring* nav links, so merely hovering Why RackTrack
   or Solutions silently opened the Use Cases menu next to them. Keeping
   the bridge exactly under its own trigger avoids that entirely — the
   open dropdown itself, once you're inside it, is already a descendant of
   .nav-item (and painted above any neighbor via z-index), so it keeps
   supplying hover the rest of the way with no bridge needed there. */
.nav-item:has(.nav-dropdown)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 4;
  height: 10px;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 280px;
  max-width: 340px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(16, 32, 51, 0.1);
  background: var(--white);
  box-shadow: 0 24px 60px rgba(16, 32, 51, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  pointer-events: none;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.site-nav .nav-item .nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--copy-strong);
  opacity: 1;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
}

.nav-dropdown a::after {
  display: none;
}

.site-nav .nav-item .nav-dropdown a:hover,
.site-nav .nav-item .nav-dropdown a:focus-visible {
  background: var(--cloud);
  color: var(--blue);
}

/* Small down-chevron after "Use Cases" / "Resources" — the only two nav
   labels that carry a .nav-dropdown — so a visitor can tell at a glance
   which top-level items open a flyout before they ever hover one. */
.nav-chevron {
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: 5px;
  color: currentColor;
  opacity: 0.55;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-item:hover .nav-chevron,
.nav-item:focus-within .nav-chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}

/* Cleanup pass (inner pages only — every body carries a page class except
   index.html, so this whole block leaves the homepage's transparent
   overlay header untouched. The homepage's own scroll-jacked hero pins
   itself relative to the header staying fixed/out-of-flow at document
   y=0 — un-sticking it there blanks the whole animated hero, so it keeps
   its fixed header regardless of what inner pages do here).
   Use Cases is excluded from both rules below: it already swaps its own
   header from transparent/light-on-dark-hero to solid via JS
   (.is-past-hero), an effect designed to play out slowly while the
   header stays pinned — un-sticking it would cut that transition short
   the moment the header scrolls out of view, and a permanent light
   background would wash out the white-on-photo nav text before the
   swap fires either way. */
body[class]:not(.use-cases-page) .site-header {
  position: relative;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(16, 32, 51, 0.08);
  box-shadow: 0 12px 30px -18px rgba(16, 32, 51, 0.14);
}

/* Use Cases / Resources flyouts: a single stacked column, no per-item
   icons — plain text links, sized and weighted like hamina.com's own nav
   (16px/400 regular sans), not the site's bolder default menu type. */
body[class] .nav-dropdown {
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 300px;
  max-width: 360px;
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 24px 55px -16px rgba(16, 32, 51, 0.24), 0 4px 14px rgba(16, 32, 51, 0.06);
}

body[class] .site-nav .nav-item .nav-dropdown a {
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 400;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 0;
  width: fit-content;
  pointer-events: auto;
}

.brand-mark {
  display: block;
  width: 34px;
  height: 34px;
  background: var(--ink);
  -webkit-mask-image: url("assets/logo.jpg");
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-image: url("assets/logo.jpg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}

.brand-mark img {
  display: none;
}

.brand-name {
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* Mobile hamburger toggle — invisible/inert above the 980px breakpoint
   where the full .site-nav is already shown inline. See the max-width:
   980px block below for the checked/panel behavior. */
.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-btn {
  display: none;
}

/* Per-dropdown accordion toggles (Use Cases / Resources inside the mobile
   panel) — same invisible-checkbox / inert-button pattern as the main
   toggle above; both are display:none/hidden above 980px where desktop's
   hover flyout already handles them. */
.nav-sub-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-sub-toggle-btn {
  display: none;
}

.nav-cta {
  justify-self: end;
  position: relative;
  border: 1px solid rgba(36, 87, 214, 0.18);
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 14px 34px rgba(36, 87, 214, 0.24);
  color: var(--white);
  padding: 11px 17px;
  font-size: 13px;
  font-weight: 560;
  pointer-events: auto;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.nav-cta:hover,
.button-primary:hover {
  transform: translateY(-1px);
}

.nav-cta:active,
.button-primary:active {
  transform: translateY(1px) scale(0.99);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--royal);
  /* ponytail: item 11 — was 12px/weight 760/letter-spacing 0, the exact
     drift the client named ("SIX TEAMS, ONE SWEEP"). Converged to the
     site's dominant kicker spec (case-kicker, used on all 6 use-case
     pages): 11px/700/0.13em. */
  font: 700 11px var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1,
h2,
p {
  text-wrap: pretty;
}

h1 {
  max-width: 660px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading);
  text-wrap: balance;
}

.sequence-intro h1 {
  background: linear-gradient(
    100deg,
    var(--ink) 0%,
    var(--ink) 42%,
    #ffffff 50%,
    var(--ink) 58%,
    var(--ink) 100%
  );
  background-size: 200% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .sequence-intro h1 {
    animation: hero-shimmer 1.4s linear 1 forwards;
  }
}

@keyframes hero-shimmer {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}

h1 span {
  display: block;
}

.button-primary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 18px 46px rgba(36, 87, 214, 0.24);
  color: var(--white);
  padding: 0 21px;
  font-size: 15px;
  font-weight: 650;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.sequence-story {
  position: relative;
  min-height: 500dvh;
  background: transparent;
  isolation: isolate;
  --narrative-opacity: 0;
  --narrative-y: 18px;
  --sequence-note-progress: 0;
}

.sequence-pin {
  position: sticky;
  top: 0;
  display: grid;
  width: 100%;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 22%, rgba(125, 189, 255, 0.2), transparent 28vw),
    linear-gradient(180deg, rgba(247, 250, 255, 0.96), var(--mist) 42%, var(--cloud) 100%);
  opacity: var(--handoff-visibility, 1);
  transition: opacity 140ms linear;
}

.sequence-poster,
.sequence-canvas {
  grid-area: 1 / 1;
  width: 100%;
  height: 100dvh;
}

.sequence-poster {
  z-index: 1;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 260ms ease;
}

.sequence-canvas {
  z-index: 2;
  display: block;
  opacity: 1;
}

/* The canvas (opaque, alpha:false) sits above the poster and fully covers
   it once frames are drawn, so the poster no longer needs to fade out to
   hand off visually — leaving it at full opacity underneath means a real
   photo is always showing even in the rare case the canvas fails to paint
   (a stalled decode, a dropped compositor frame), instead of the page
   falling through to the section's plain background gradient. */

.sequence-scrim {
  grid-area: 1 / 1;
  z-index: 4;
  align-self: end;
  width: 100%;
  height: 46%;
  background: linear-gradient(to top, rgba(16, 32, 51, 0.5), rgba(16, 32, 51, 0.12) 60%, transparent);
  opacity: var(--narrative-opacity, 0);
  transition: opacity 260ms ease;
  pointer-events: none;
}

.sequence-intro {
  grid-area: 1 / 1;
  z-index: 5;
  position: relative;
  align-self: center;
  justify-self: start;
  width: min(620px, 48vw);
  margin-left: clamp(18px, 4vw, 64px);
  opacity: var(--intro-opacity, 1);
  transition: opacity 200ms linear;
}

.hero-copy {
  max-width: 48ch;
  margin: 26px 0 0;
  color: var(--copy-strong);
  font-size: 19px;
  font-weight: 520;
  line-height: 1.55;
  text-shadow: 0 1px 20px rgba(255, 255, 255, 0.52);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.button-watch {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(16, 32, 51, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  color: var(--ink);
  padding: 0 22px 0 24px;
  font: 650 15px var(--font-ui);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.button-watch:hover { transform: translateY(-1px); border-color: rgba(16, 32, 51, 0.32); background: rgba(255, 255, 255, 0.92); }
.button-watch:active { transform: translateY(1px) scale(0.99); }
.button-watch svg { flex: none; }

/* Video modal: dark scrim + centered player, opened from the hero's
   Watch video button. Hidden via the [hidden] attribute rather than
   display:none in CSS so JS only has one thing to toggle. */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(6, 12, 24, 0.86);
}
.video-modal[hidden] { display: none; }
.video-modal-panel {
  width: min(960px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.video-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
}
.video-modal-head p {
  margin: 0;
  font: 650 15px var(--font-ui);
}
.video-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.video-modal-close:hover { background: rgba(255, 255, 255, 0.14); }
.video-modal-player {
  width: 100%;
  max-height: 80vh;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

.proof-panel {
  grid-area: 1 / 1;
  z-index: 5;
  position: relative;
  align-self: end;
  justify-self: start;
  display: grid;
  width: min(620px, calc(100% - 36px));
  margin: 0 0 clamp(36px, 6vh, 64px) clamp(18px, 4vw, 64px);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  opacity: var(--intro-opacity, 1);
  transition: opacity 200ms linear;
}

.proof-panel div {
  padding: 18px 16px;
  border-radius: 14px;
  border: 1px solid rgba(36, 87, 214, 0.14);
  background: var(--cloud);
}

.proof-panel span {
  display: block;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
}

.proof-panel p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

/* Item 13: metrics moved out of the hero into the bridge copy column —
   reset the hero's overlay positioning to a normal static block. */
.bridge-copy .proof-panel {
  grid-area: auto;
  position: static;
  align-self: auto;
  justify-self: auto;
  width: 100%;
  max-width: 100%;
  margin: 28px 0 0;
  opacity: 1;
}

.sequence-progress {
  grid-area: 1 / 1;
  z-index: 5;
  align-self: end;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.22);
  opacity: var(--narrative-opacity, 0);
  transition: opacity 260ms ease;
}

.sequence-progress span {
  display: block;
  height: 100%;
  width: calc(var(--sequence-note-progress, 0) * 100%);
  background: linear-gradient(90deg, var(--blue), var(--scan));
}

.sequence-narrative {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  position: relative;
  z-index: 6;
  width: min(480px, calc(100vw - 72px));
  min-height: 140px;
  margin: 0 0 clamp(36px, 8vh, 84px) clamp(22px, 5vw, 78px);
  opacity: var(--narrative-opacity, 0);
  transform: translate3d(0, var(--narrative-y), 0);
  transition: opacity 260ms ease, transform 320ms ease;
}

.sequence-note {
  position: absolute;
  inset: auto auto 0 0;
  width: 100%;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 140ms ease, transform 180ms ease;
  pointer-events: none;
}

.sequence-note.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.sequence-note p {
  margin: 0 0 12px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(16, 32, 51, 0.35), 0 2px 16px rgba(255, 255, 255, 0.35);
}

.sequence-note h2 {
  max-width: 15ch;
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 680;
  letter-spacing: 0;
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(16, 32, 51, 0.35);
}

.sequence-note > span {
  display: block;
  max-width: 36ch;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  line-height: 1.45;
  text-shadow: 0 1px 3px rgba(16, 32, 51, 0.35);
}

.story-bridge {
  position: relative;
  min-height: 145dvh;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(circle at 74% 22%, rgba(125, 189, 255, 0.18), transparent 28vw),
    linear-gradient(180deg, var(--cloud) 0%, #ffffff 44%, var(--mist) 100%);
  --bridge-progress: 0;
  --bridge-copy-y: 28px;
  --bridge-copy-opacity: 0;
  --bridge-source-opacity: 0;
  --bridge-thread-scale: 0;
  --bridge-thread-opacity: 0;
  --bridge-layer-opacity: 0;
  --bridge-source-x: -24px;
  --bridge-output-x: 28px;
  --bridge-layers-y: 22px;
}

.story-bridge::before {
  /* ponytail: grid overlay removed — item 10 */
  display: none;
}

.bridge-pin {
  position: sticky;
  top: 0;
  display: grid;
  min-height: 100dvh;
  grid-template-columns: minmax(330px, 0.82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(38px, 6vw, 108px);
  padding: 60px clamp(22px, 5vw, 78px) 48px;
}

.bridge-copy {
  position: relative;
  z-index: 2;
  max-width: 520px;
  opacity: var(--bridge-copy-opacity);
  transform: translate3d(0, var(--bridge-copy-y), 0);
}

.bridge-copy h2 {
  max-width: 14ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 720;
  letter-spacing: 0;
  line-height: 0.94;
  text-wrap: balance;
}

.bridge-copy p:not(.eyebrow) {
  max-width: 41ch;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
}

.bridge-card-deck {
  position: relative;
  z-index: 1;
  min-height: min(520px, 60dvh);
  perspective: 1200px;
}

.bridge-card-deck::before {
  content: "";
  position: absolute;
  inset: 17% 0 12% 2%;
  border-radius: 42px;
  /* ponytail: grid-line layers removed — item 10, kept the diagonal tint */
  background: linear-gradient(135deg, rgba(36, 87, 214, 0.13), rgba(125, 189, 255, 0.08));
  opacity: calc(var(--bridge-thread-opacity) * 0.72);
  transform: rotateX(61deg) rotateZ(-8deg);
}

.evidence-card {
  position: absolute;
  width: min(330px, 28vw);
  min-height: 350px;
  border: 1px solid rgba(217, 231, 246, 0.88);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 26px 80px rgba(49, 93, 148, 0.16);
  padding: 16px;
  backdrop-filter: blur(20px) saturate(155%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  will-change: opacity, transform;
}

.evidence-card-scan {
  left: 0;
  top: 28%;
  opacity: var(--bridge-source-opacity);
  transform: translate3d(var(--bridge-source-x), 0, 0) rotate(-7deg);
}

.evidence-card-model {
  left: 32%;
  top: 8%;
  z-index: 2;
  opacity: var(--bridge-thread-opacity);
  transform: translate3d(0, calc(var(--bridge-layers-y) * 0.34), 0) rotate(2deg);
}

.evidence-card-proof {
  right: 0;
  top: 30%;
  opacity: var(--bridge-layer-opacity);
  transform: translate3d(var(--bridge-output-x), 0, 0) rotate(7deg);
}

.evidence-card p {
  margin: 16px 0 7px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.evidence-card h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 680;
  letter-spacing: 0;
  line-height: 1;
}

.evidence-visual {
  position: relative;
  height: 210px;
  overflow: hidden;
  border: 1px solid rgba(217, 231, 246, 0.78);
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, #eef5ff);
}

.evidence-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(238, 245, 255, 0.28)),
    linear-gradient(90deg, rgba(36, 87, 214, 0.08), transparent 34%, rgba(67, 184, 131, 0.1));
  z-index: 1;
  pointer-events: none;
}

.evidence-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02) brightness(1.05);
}

.evidence-card-scan .evidence-visual img {
  object-position: 52% 48%;
}

.evidence-card-model .evidence-visual img {
  object-position: 52% 45%;
}

.evidence-card-proof .evidence-visual img {
  object-position: 44% 62%;
}

.visual-chip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  border: 1px solid rgba(217, 231, 246, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.06em;
  padding: 7px 9px;
  text-transform: uppercase;
  backdrop-filter: blur(14px) saturate(155%);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
}

.bridge-layers {
  position: absolute;
  left: 50%;
  bottom: 9%;
  z-index: 3;
  display: flex;
  width: min(780px, calc(100% - 44px));
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  opacity: var(--bridge-layer-opacity);
  transform: translate3d(-50%, var(--bridge-layers-y), 0);
}

.bridge-layers span {
  border: 1px solid rgba(217, 231, 246, 0.84);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 12px 34px rgba(42, 76, 119, 0.07);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 8px 10px;
  text-transform: uppercase;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* .bridge-pin's grid-template-columns has hard desktop minimums
   (minmax(330px,...) + minmax(520px,...) = ~850px combined, before gap/
   padding) — below roughly 980px viewport width that minimum simply can't
   be satisfied, so the grid overflows the viewport horizontally and the
   evidence-card-deck spills off the right edge. Stack to a single column
   below that width instead; the scroll-driven card reveal (opacity/
   transform via the same --bridge-* custom properties) keeps working
   unchanged, this only fixes the layout that was physically too wide. */
@media (max-width: 980px) {
  .bridge-pin {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 90px;
    padding-bottom: 48px;
  }

  .bridge-card-deck {
    min-height: min(460px, 56dvh);
  }
}

/* Split-layout pinned chapters (Chapter 4 onward): text column + a
   contained animation column at ~50% width, instead of full-bleed canvas
   with an overlay caption. Frame sequences are sparse here (crossfade-
   blended in main.js), so the visual doesn't need full-bleed resolution to
   read as sharp, and text gets its own solid column instead of fighting
   for legibility over moving video. */
.split-story {
  position: relative;
  background: transparent;
  isolation: isolate;
  --frame-opacity: 0;
  --note-opacity: 0;
  --note-y: 18px;
  --note-progress: 0;
}

/* Scroll length per chapter - how much distance the pin holds before
   releasing to the next section. Keyed off each section's own data
   attribute so no extra modifier classes are needed. */
[data-rack-sequence] {
  min-height: 360dvh;
}

[data-cable-sequence] {
  min-height: 260dvh;
}

[data-reconciliation-sequence] {
  min-height: 230dvh;
}

[data-scale-sequence] {
  min-height: 220dvh;
}

[data-outcomes-sequence] {
  min-height: 230dvh;
}

.split-pin {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(300px, 38%) 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  width: 100%;
  min-height: 100dvh;
  padding: 0 clamp(24px, 6vw, 96px);
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 30%, rgba(125, 189, 255, 0.16), transparent 32vw),
    linear-gradient(180deg, rgba(247, 250, 255, 0.98), #ffffff 42%, var(--mist) 100%);
}

.split-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 76dvh;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(16, 32, 51, 0.14);
  background: #eef3fa;
}

.split-poster,
.split-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.split-poster {
  z-index: 1;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 260ms ease;
}

.split-canvas {
  z-index: 2;
  display: block;
  opacity: var(--frame-opacity, 0);
  transition: opacity 260ms ease;
}

.split-story.is-ready .split-poster {
  opacity: 0;
}

.split-narrative {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  min-height: 260px;
  opacity: var(--note-opacity, 0);
  transform: translate3d(0, var(--note-y), 0);
  transition: opacity 260ms ease, transform 320ms ease;
}

.split-narrative::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--scan), rgba(125, 189, 255, 0));
  transform: scaleX(var(--note-progress, 0));
  transform-origin: left center;
}

.split-note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 360ms ease, transform 420ms ease;
  pointer-events: none;
}

.split-note.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.split-note p {
  margin: 0 0 15px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.split-note h2 {
  max-width: 14ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 680;
  letter-spacing: 0;
  line-height: 1.05;
}

.split-note span {
  display: block;
  max-width: 36ch;
  margin-top: 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.48;
}

/* Continuous world (Batch 1): the five beats welded into one pinned stage.
   Mirrors the accepted split-layout look — only the current beat is shown,
   notes cross-fade, and the canvas crossfades across sequence seams so the
   screen never blanks between beats. */
.world-story {
  position: relative;
  min-height: 1300dvh; /* = sum of the five old split min-heights (keeps pacing) */
  background: transparent;
  isolation: isolate;
  --world-opacity: 0;
  --world-progress: 0;
}

/* Plain 4-card fallback shown only at <=980px (see the matching
   @media block below) — hidden here so it never renders on desktop,
   which keeps the pinned .world-story canvas above untouched. */
.world-simple {
  display: none;
}

.world-pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 16%, rgba(125, 189, 255, 0.22), transparent 60%),
    linear-gradient(118deg, var(--cloud) 0%, var(--mist) 44%, #dcebfb 100%);
}

/* Legibility wash over the text side; fades to reveal the frame on the right. */
.world-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(247, 250, 255, 0.94) 0%, rgba(247, 250, 255, 0.6) 27%, rgba(247, 250, 255, 0) 54%),
    linear-gradient(0deg, rgba(247, 250, 255, 0.42) 0%, rgba(247, 250, 255, 0) 24%);
}

/* Full-bleed visual — no box, no margins; fills the entire stage. */
.world-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--mist);
}

.world-poster,
.world-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.world-poster {
  z-index: 1;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 260ms ease;
}

.world-canvas {
  z-index: 2;
  display: block;
  opacity: var(--world-opacity, 0);
  transition: opacity 260ms ease;
}

.world-story.is-ready .world-poster {
  opacity: 0;
}

.world-narrative {
  position: absolute;
  z-index: 4;
  left: clamp(28px, 6.5vw, 128px);
  top: 50%;
  transform: translateY(-50%);
  width: min(48vw, 640px);
  min-height: 46dvh;
}

/* Vertical accent rail beside the text; grows through the whole story. */
.world-narrative::before {
  content: "";
  position: absolute;
  top: 6%;
  left: -24px;
  width: 3px;
  height: 88%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), var(--scan) 62%, rgba(125, 189, 255, 0));
  transform: scaleY(var(--world-progress, 0));
  transform-origin: top center;
}

.world-beat {
  position: absolute;
  inset: 0;
  display: none;
}

.world-beat.is-current {
  display: block;
}

.world-note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(7px);
  transition: opacity 520ms ease, transform 640ms cubic-bezier(0.22, 1, 0.36, 1), filter 520ms ease;
  pointer-events: none;
}

.world-note.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* The very first note (Perceive) starts life already marked is-active in
   the markup — it's the entry point of the whole pinned world-story, not
   something scrolled into from a prior beat. Giving it the same 520-640ms
   blur/slide/fade-in as every other beat transition meant the section
   felt slow to "arrive" the moment it came on screen. Skip the transition
   for just this one note so it's fully visible immediately. */
.world-beat[data-beat="perceive"] .world-note[data-at="0"] {
  transition: none;
}

.world-note p {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.world-note h2 {
  max-width: 15ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}

.world-note span {
  display: block;
  max-width: 40ch;
  margin-top: 26px;
  color: var(--ink);
  opacity: 0.72;
  font-size: 18px;
  font-weight: 450;
  line-height: 1.55;
}

/* Static per-beat fallback image — hidden on desktop, where the pinned
   canvas draws every frame; shown only on mobile (see max-width: 980px). */
.world-beat-poster {
  display: none;
}

/* Homepage closing CTA — centered, minimal, sized to sit under the
   reduced 48px hero scale rather than the old 64px display type. */
.home-cta {
  padding: 96px 6vw;
  background: #dfeafa;
  color: var(--ink);
  text-align: center;
}

.home-cta h2 {
  margin: 0 auto;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 720;
  line-height: 1.08;
}

.home-cta p {
  margin: 16px auto 30px;
  max-width: 46ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .home-cta {
    padding: 64px 24px;
  }

  .home-cta p {
    font-size: 16px;
  }
}

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

  h1 span:last-child::after {
    animation: none !important;
    opacity: 0.7;
  }

  .sequence-story {
    min-height: 100dvh;
  }

  .split-story {
    min-height: 100dvh;
  }

  .sequence-pin {
    position: relative;
  }

  .split-pin {
    position: relative;
  }

  .sequence-canvas {
    opacity: 1;
  }

  .split-canvas {
    opacity: 1;
  }

  .sequence-narrative {
    opacity: 1;
    transform: none;
  }

  .sequence-progress span {
    transition: none;
  }

  .split-narrative {
    opacity: 1;
    transform: none;
  }

  .world-story {
    min-height: auto;
  }

  .world-pin {
    position: static;
  }

  .world-scrim {
    display: none;
  }

  .world-visual {
    position: static;
    height: 58dvh;
  }

  .world-canvas {
    opacity: 1;
  }

  .world-narrative {
    position: static;
    transform: none;
    width: auto;
    padding: 32px clamp(24px, 6vw, 96px);
  }

  .world-beat {
    display: block;
    position: static;
  }

  .world-note {
    position: static;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .story-bridge {
    min-height: 100dvh;
  }

  .bridge-pin {
    position: relative;
  }

  .bridge-copy,
  .evidence-card,
  .bridge-layers {
    opacity: 1;
    transform: none;
  }

  .bridge-card-deck::before {
    opacity: 0.44;
  }
}

@media (max-width: 1280px) and (min-width: 981px) {
  .sequence-intro {
    width: 520px;
    margin-left: 42px;
  }

  h1 {
    max-width: 520px;
    font-size: 44px;
    line-height: 1.04;
  }

  .hero-copy {
    max-width: 40ch;
    font-size: 17px;
  }

  .proof-panel {
    width: min(640px, calc(100% - 84px));
    margin-left: 42px;
  }
}

@media (max-width: 980px) {
  .site-header {
    width: calc(100% - 36px);
    /* Back to the original 2-column layout (brand | cta) — the toggle
       button is pulled OUT of grid flow below (position: absolute) and
       pinned to the header's own right edge instead of sharing a grid
       track with .nav-cta. A 3rd "auto" track for the toggle looked
       fine closed, but once .nav-cta visually disappears behind the
       open fixed panel (it has no z-index above the panel's 65) the
       grid still reserved its column, so the toggle-turned-X landed in
       the middle track instead of flush right. padding-right reserves
       the room the absolute toggle needs so it never overlaps the CTA
       pill. */
    grid-template-columns: 1fr auto;
    padding-right: 52px;
  }

  .brand {
    margin-left: 0;
  }

  /* Hamburger menu, CSS-only (checkbox hack — no JS, so it works on every
     page including the ones with no page-specific script). The checkbox
     must precede .nav-toggle-btn and .site-nav in the DOM for the ~
     sibling selectors below to reach them.
     ponytail: no JS means no aria-expanded/focus-trap/Esc-to-close — an
     acceptable ceiling for a link-only menu; add a JS controller only if
     an accessibility pass calls for it. */
  .nav-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    z-index: 70;
  }

  /* The span is the middle bar; ::before/::after are pinned absolute so
     translateY moves an actual positioned box, not an in-flow one — the
     earlier version transformed unpositioned pseudo-elements, which is
     unreliable across browsers and could render as a garbled/invisible
     icon instead of three clean bars. */
  .nav-toggle-btn span {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: background 200ms ease;
  }

  .nav-toggle-btn span::before,
  .nav-toggle-btn span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 200ms ease;
  }

  .nav-toggle-btn span::before {
    top: -7px;
  }

  .nav-toggle-btn span::after {
    top: 7px;
  }

  .nav-toggle-input:checked ~ .nav-toggle-btn span {
    background: transparent;
  }

  .nav-toggle-input:checked ~ .nav-toggle-btn span::before {
    /* Moves from top:-7px back to the span's own center (0), then rotates —
       without the translateY it would spin in place 7px off-center and
       never actually meet the other bar to form a clean X. */
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle-input:checked ~ .nav-toggle-btn span::after {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Nav links drop out of the header row and only reappear as a full-screen
     panel once the toggle is checked. */
  .site-nav {
    display: none;
  }

  .nav-toggle-input:checked ~ .site-nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 65;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 100px 32px 40px;
    background: var(--cloud);
    overflow-y: auto;
    pointer-events: auto;
  }

  /* .site-nav's position:fixed above is supposed to cover the full
     viewport, but several page-specific rules give .site-header its own
     backdrop-filter (body[class]:not(.use-cases-page) .site-header) or
     transform (body.is-sequencing .site-header on the homepage) — both
     create a new containing block for fixed-position descendants, which
     collapses the "full-screen" nav panel down to the header's own small
     box instead of the viewport, letting the page show through beneath
     it. Strip both back off .site-header while the menu is open so
     .site-nav always escapes to the true viewport, on every page. */
  .site-header:has(.nav-toggle-input:checked) {
    position: fixed !important;
    opacity: 1 !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Every top-level row (plain links AND the two dropdown-bearing
     .nav-item wrappers) gets its padding/border from ONE shared rule so
     the vertical rhythm can't drift between the two kinds of item. The
     .nav-item's own inner <a> is stripped of its own padding/border
     right below — without that, Use Cases/Resources doubled up (the
     wrapper's row treatment plus the anchor's own) and read as tighter,
     misaligned spacing next to the plain links. */
  .nav-toggle-input:checked ~ .site-nav > a,
  .nav-toggle-input:checked ~ .site-nav .nav-item {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(16, 32, 51, 0.12);
  }

  .nav-toggle-input:checked ~ .site-nav .nav-item {
    position: relative;
    padding-right: 44px;
  }

  .nav-toggle-input:checked ~ .site-nav .nav-item > a {
    padding: 0;
    border-bottom: none;
  }

  .nav-toggle-input:checked ~ .site-nav a {
    display: block;
    font-size: 21px;
    /* Reasserts ink text over page-specific overrides like
       .use-cases-page .site-nav a's white-on-dark-hero color — the panel
       itself is always the light --cloud background, regardless of page. */
    color: var(--ink);
  }

  .nav-toggle-input:checked ~ .site-nav a::after {
    display: none;
  }

  /* Higher specificity than any page's own ".xxx-page .site-nav a.is-current"
     color override (e.g. Use Cases' white-on-dark-hero current-page color) —
     the open panel is always on the light --cloud background. */
  .nav-toggle-input:checked ~ .site-nav a.is-current {
    color: var(--ink);
  }

  /* Hover-flyout dropdowns (Use Cases / Resources) become tap-to-expand
     accordions on the panel — there's no hover on touch, and showing all
     6 use-case + 9 article links open by default buried the top-level
     nav items. A second, per-item checkbox (.nav-sub-toggle, same
     checkbox-hack technique as the main panel toggle) gates each list;
     collapsed is the default, only the chevron button and parent link
     are visible until tapped. */
  .nav-toggle-input:checked ~ .site-nav .nav-dropdown {
    position: static;
    display: none;
    width: 100%;
    max-width: none;
    margin: 0 0 8px;
    padding: 0 0 0 16px;
    border: none;
    box-shadow: none;
    background: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  /* Fully qualified (not just .nav-sub-toggle:checked ~ .nav-dropdown) on
     purpose — that shorter form has lower specificity than the collapse
     rule above and would lose to it, so the accordion would never open. */
  .nav-toggle-input:checked ~ .site-nav .nav-sub-toggle:checked ~ .nav-dropdown {
    display: flex;
    flex-direction: column;
  }

  .nav-toggle-input:checked ~ .site-nav .nav-dropdown a {
    padding: 10px 0;
    border-bottom: none;
    font-size: 15px;
  }

  /* The inline .nav-chevron (desktop hover cue) would double up with the
     mobile panel's own accordion chevron button below — hide it here. */
  .nav-toggle-input:checked ~ .site-nav .nav-chevron {
    display: none;
  }

  /* Chevron toggle button, one per dropdown-bearing nav item. Sits to the
     right of the parent link (Use Cases / Resources), same row. */
  .nav-toggle-input:checked ~ .site-nav .nav-sub-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }

  .nav-toggle-input:checked ~ .site-nav .nav-sub-toggle-btn::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(45deg);
    transition: transform 200ms ease;
  }

  /* Same fully-qualified-selector requirement as the .nav-dropdown reveal
     rule above — the short form loses the specificity race. */
  .nav-toggle-input:checked ~ .site-nav .nav-sub-toggle:checked ~ .nav-sub-toggle-btn::before {
    transform: rotate(-135deg);
  }

  h1 {
    max-width: 12ch;
    font-size: 40px;
    line-height: 1.02;
  }

  .split-pin {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 96px 18px 40px;
    gap: 24px;
  }

  .split-narrative {
    max-width: min(520px, calc(100vw - 36px));
    min-height: 190px;
  }

  .split-visual {
    max-height: 46dvh;
  }

  .split-note h2 {
    max-width: 15ch;
    font-size: 29px;
  }

  .split-note span {
    max-width: 42ch;
    font-size: 14px;
  }

  /* .bridge-pin's desktop grid has hard column minimums (330px + 520px),
     so between roughly 640-980px it no longer fits the viewport and the
     evidence-card deck gets clipped by an ancestor's overflow — collapse
     to a single stacked column here, matching .split-pin's approach. */
  .bridge-pin {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 40px;
  }
}

/* ===================================================================
   Static homepage layout for phones and tablets (<= 980px)

   The homepage's three headline sections (hero, story-bridge, world-
   story) are all scroll-pinned canvas animations on desktop: a tall
   section holds a sticky 100dvh stage while scroll position scrubs
   through a frame sequence and cross-fades absolutely-positioned notes
   on top of it. That design depends on two things a phone or tablet
   doesn't have — enough width for a full-bleed landscape frame to fill
   a tall stage without cropping most of itself away, and enough
   bandwidth headroom to make a ~1000-frame download worth it.

   Below 980px (the breakpoint the hamburger nav already switches on)
   all three sections drop the animation and render the same content as
   ordinary stacked blocks: still poster image, then heading, then the
   notes that used to cross-fade, all visible at once. No content is
   removed — only the motion and the pinning. Desktop above 980px keeps
   every animation exactly as it is.

   homepage.js has a matching `staticLayout` gate so the frame
   sequences are never downloaded or drawn here. Because that JS never
   runs, it never writes the inline custom properties these sections
   animate through, so each section below re-declares those properties
   at their settled end-state values rather than their from-zero
   starting values (which would render as invisible content).
   =================================================================== */
@media (max-width: 980px) {
  /* --- Hero -------------------------------------------------------- */
  .sequence-story {
    min-height: auto;
    /* The narrative/progress properties this section also animates are
       not restated here: both elements they drive are display:none in
       the static layout. */
    --handoff-visibility: 1;
    --intro-opacity: 1;
  }

  .sequence-pin {
    position: relative;
    display: block;
    min-height: auto;
    overflow: visible;
    padding-bottom: 56px;
  }

  /* Source frames are 1280x720, so a 16/9 box crops nothing — the whole
     rack is in view, which is the reason the text moves below the image
     instead of staying overlaid on it. */
  .sequence-poster {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* The canvas has no frames to draw here, and the scrim and progress
     bar only exist to serve the scrubbed animation. */
  .sequence-canvas,
  .sequence-scrim,
  .sequence-progress {
    display: none;
  }

  .sequence-intro {
    /* min(620px, 48vw) leaves too narrow a column on tablets and phones
       alike for a long word like "Infrastructure" combined with
       text-wrap:balance, which was dropping characters instead of
       wrapping. Give it real room instead of a viewport-scaled sliver. */
    width: calc(100% - 48px);
    margin: 28px auto 0;
  }

  /* The headline is painted as a gradient clipped to the glyphs so a
     one-shot highlight can sweep across it. Static layout means no
     sweep, and a half-swept gradient reads as ghosted text — so drop
     the gradient machinery and paint the headline as plain ink. */
  .sequence-intro h1 {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
  }

  /* The four hero notes (Captured / Extracted / Structured / Ready)
     exist to be revealed one at a time as the pinned canvas scrubs, each
     captioning the frame behind it. Without the animation they lose that
     anchor and just repeat the story-bridge section directly below, so
     the static layout drops them and lets the hero end on the CTAs.
     Kept in the markup because desktop still animates them. */
  .sequence-narrative {
    display: none;
  }

  /* --- Story bridge ------------------------------------------------ */
  .story-bridge {
    min-height: auto;
    --bridge-progress: 1;
    --bridge-copy-y: 0px;
    --bridge-copy-opacity: 1;
    --bridge-source-opacity: 1;
    --bridge-thread-scale: 1;
    --bridge-thread-opacity: 1;
    --bridge-layer-opacity: 1;
    --bridge-source-x: 0px;
    --bridge-output-x: 0px;
    --bridge-layers-y: 0px;
  }

  .bridge-pin {
    position: relative;
    min-height: auto;
  }

  /* The three evidence cards fan out as an overlapping absolute cascade
     on desktop, which reads as cards covering each other's text once the
     deck is this narrow. Stack them plainly instead. */
  .bridge-card-deck {
    min-height: auto;
    perspective: none;
  }

  .bridge-card-deck::before {
    display: none;
  }

  .evidence-card {
    position: static;
    width: 100%;
    min-height: auto;
    margin: 0 0 20px;
    opacity: 1;
    transform: none;
  }

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

  /* --- World story ---------------------------------------------------
     Below the breakpoint the pinned canvas story is replaced outright by
     a plain 4-card grid (.world-simple) rather than a flattened stack of
     all 5 beats/15 notes — simpler to read on a phone. The canvas/JS side
     already skips initialization here (see staticLayout in homepage.js),
     so hiding .world-story is purely visual cleanup. */
  .world-story {
    display: none;
  }

  .world-simple {
    display: block;
    padding: 72px clamp(24px, 6vw, 48px);
    background:
      radial-gradient(120% 90% at 88% 16%, rgba(125, 189, 255, 0.14), transparent 60%),
      linear-gradient(118deg, var(--cloud) 0%, var(--mist) 44%, #dcebfb 100%);
  }

  .world-simple-grid {
    width: min(1240px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .world-simple-card {
    border: 1px solid rgba(217, 231, 246, 0.88);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    padding: 16px;
  }

  .world-simple-card img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 14px;
  }

  .world-simple-card p {
    margin: 0 0 8px;
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .world-simple-card h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(16px, 3.6vw, 19px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  .world-simple-card span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
  }
}

@media (max-width: 640px) {
  .site-header {
    width: 100%;
    /* padding-right stays wide enough to clear the 40px absolutely-
       positioned toggle button pinned to the header's own right edge —
       the plain "11px 11px" shorthand this used to be reset ALL sides
       including right, which let the Sign In pill's grid column extend
       under the toggle and visually collide with it on every real phone
       (this breakpoint covers ~360-412px, i.e. most of them). */
    padding: 11px 48px 11px 11px;
  }

  .brand span:last-child {
    display: none;
  }

  .brand {
    margin-left: 0;
  }

  .brand-mark {
    width: 29px;
    height: 29px;
  }

  .nav-cta {
    padding-inline: 13px;
  }

  .eyebrow {
    max-width: 28ch;
    margin-bottom: 14px;
    font-size: 11px;
  }

  .button-primary {
    width: 100%;
  }

  /* .hero-actions holds two buttons side by side (Get a demo + Watch
     video) — the global width:100% above was making "Get a demo" claim
     the full row, squeezing "Watch video" (and its icon) into whatever
     sliver was left instead of leaving both to size to their own content. */
  .hero-actions .button-primary {
    width: auto;
  }

  h1 {
    font-size: 34px;
    line-height: 1.04;
    overflow-wrap: anywhere;
  }

  .sequence-intro {
    /* min(620px, 48vw) leaves only ~187px on a 390px phone — too narrow
       for a long word like "Infrastructure" combined with text-wrap:balance,
       which was dropping characters instead of wrapping. Give it real
       room instead of a viewport-scaled sliver. */
    width: calc(100% - 48px);
  }

  /* The canvas draws its own contain-fit crop in JS (see the `contain`
     branch in drawCover(), homepage.js) so the whole rack is always in
     frame on phones instead of cover-fit cropping most of it away. The
     canvas context is created with {alpha:false} (opaque) — if its own
     CSS box stayed 100dvh tall while the contained image only fills a
     16:9 slice of it, the leftover space would clearRect() to solid
     black, not transparent. Sizing the box itself to the source frames'
     16:9 ratio leaves nothing left over to fill in the first place. The
     poster <img> gets the equivalent native object-fit:contain, since it
     doesn't go through the JS draw path at all. Both anchor to the top
     of the still-100dvh pin so empty space lands below the image, next
     to the text, instead of splitting evenly above and below it. */
  .sequence-poster,
  .sequence-canvas {
    align-self: start;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 78dvh;
  }

  .sequence-poster {
    object-fit: contain;
  }

  .hero-copy {
    font-size: 16.5px;
  }

  .bridge-card-deck {
    min-height: auto;
  }

  /* Plain stacked cards, one below the next, instead of the desktop
     fanned/cascading overlap — the partial overlap read as cards
     covering each other's text on narrow phones. */
  .evidence-card {
    position: static;
    width: 100%;
    min-height: auto;
    margin: 0 0 20px;
    transform: none;
  }

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

  .evidence-card h3 {
    font-size: 25px;
  }

  .evidence-visual {
    height: 146px;
  }

  .bridge-layers {
    justify-content: flex-start;
  }

  .bridge-layers span {
    font-size: 9.5px;
    padding: 8px 9px;
  }

  .bridge-copy h2 {
    font-size: 34px;
  }

  .split-note h2 {
    max-width: 13ch;
    font-size: 26px;
  }

  .split-visual {
    max-height: 38dvh;
  }
}


/* Footer */
/* Light footer, matching Why RackTrack's exact recipe — the standard for
   every page now. Was dark ink by default; only Why RackTrack, Solutions,
   and Contact had light overrides, so the homepage, Use Cases, and all six
   use-case-*.html detail pages were quietly still on the old dark footer. */
.site-footer {
  background: var(--cloud);
  color: #30445d;
  border-top: 1px solid rgba(16, 32, 51, 0.15);
  padding: 72px 6vw 28px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 48px;
}

.footer-brand-logo {
  display: block;
  width: fit-content;
}

.footer-brand-logo img {
  display: block;
  height: 44px;
  width: auto;
  border-radius: 8px;
}

.footer-brand p {
  margin: 16px 0 0;
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.5;
  color: #30445d;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-label {
  margin: 0 0 4px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-col a,
.footer-col span {
  color: #30445d;
  font-size: 14.5px;
  line-height: 1.5;
  text-decoration: none;
}

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

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(16, 32, 51, 0.15);
}

.footer-bottom p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(48, 68, 93, 0.65);
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-social a {
  display: flex;
  color: #30445d;
  text-decoration: none;
  transition: color 150ms ease;
}

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

@media (max-width: 900px) {
  .site-footer {
    padding: 56px 22px 24px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Why RackTrack page: a light technical field-notes system with a sticky
   evidence stack. The page keeps the homepage brand tokens but has its own
   layout scope so the established hero animation remains unchanged. */
.why-page {
  --why-surface: #f7faff;
  --why-mist: #edf4fb;
  --why-panel: rgba(255, 255, 255, 0.94);
  --why-line: rgba(16, 32, 51, 0.15);
  --why-line-strong: rgba(16, 32, 51, 0.28);
  --why-copy: #30445d;
  background: var(--why-surface);
  color: var(--ink);
}

.why-page::before {
  opacity: 0.1;
}


.why-page .site-nav a.is-current {
  color: var(--ink);
}

.why-page .site-nav a.is-current::after {
  transform: scaleX(1);
}

.why-hero {
  position: relative;
  min-height: min(820px, 100dvh);
  display: grid;
  align-items: end;
  overflow: clip;
  padding: 156px clamp(28px, 7vw, 112px) 72px;
  isolation: isolate;
  background: var(--why-mist);
}

.why-hero-media,
.why-hero-scrim {
  position: absolute;
  inset: 0;
}

.why-hero-media {
  z-index: -2;
}

.why-hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.78) contrast(0.94);
}

.why-hero-scrim {
  z-index: -1;
  background: linear-gradient(90deg, rgba(247, 250, 255, 0.96) 0%, rgba(247, 250, 255, 0.8) 43%, rgba(247, 250, 255, 0.2) 100%);
}

.why-hero-inner {
  width: min(var(--container-max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
}

.why-hero-copy {
  max-width: 760px;
}

.why-card-label,
.why-card-index,
.why-hero-note span {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
}

.why-section-intro h2,
.why-stack-heading h2,
.why-truth-copy h2,
.why-cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
}

.why-hero h1 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading);
}

.why-hero-lede,
.why-section-intro > p:last-child,
.why-stack-heading > p:last-child,
.why-truth-copy > p,
.why-cta > div:last-child > p {
  color: var(--why-copy);
  font-size: var(--lede-size);
  line-height: var(--lede-leading);
}

.why-hero-lede {
  max-width: 660px;
  margin: 30px 0 0;
}

.why-hero .button-primary,
.why-cta .button-primary {
  margin-top: 30px;
}

.why-hero-note {
  max-width: 310px;
  padding: 20px 0 0 24px;
  border-left: 1px solid var(--why-line-strong);
}

.why-hero-note span {
  color: var(--royal);
}

.why-hero-note p {
  margin: 14px 0 0;
  color: var(--why-copy);
  font-size: 15px;
  line-height: 1.5;
}

.why-layers {
  padding: 126px clamp(28px, 7vw, 112px) 136px;
  background: var(--why-surface);
}

.why-section-intro,
.why-stack-heading {
  width: min(820px, 100%);
  margin: 0 auto;
}

.why-section-intro h2,
.why-stack-heading h2,
.why-truth-copy h2,
.why-cta h2 {
  font-size: var(--h2-size);
}

.why-section-intro > p:last-child,
.why-stack-heading > p:last-child {
  max-width: 700px;
  margin: 28px 0 0;
}

.why-layer-rail {
  width: min(1120px, 100%);
  margin: 68px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--why-line-strong);
}

.why-layer-rail > div {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 28px 22px 0;
  border-bottom: 1px solid var(--why-line-strong);
}

.why-layer-rail > div + div {
  padding-left: 28px;
  border-left: 1px solid var(--why-line);
}

.why-layer-rail strong,
.why-layer-rail span {
  font-family: var(--font-mono);
}

.why-layer-rail strong {
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
}

.why-layer-rail span {
  margin-top: 38px;
  color: var(--ink);
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 700;
}

.why-layer-rail small {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.why-stack-section {
  padding-top: 122px;
  padding-bottom: 96px;
  background: var(--why-mist);
  overflow: clip;
}

.why-stack-heading {
  padding: 0 clamp(28px, 7vw, 112px) 58px;
}

.why-stack {
  padding-top: 20px;
}

.why-stack-card {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 10vh clamp(18px, 5vw, 80px);
}

.why-stack-card:nth-child(1) { z-index: 1; }
.why-stack-card:nth-child(2) { z-index: 2; }
.why-stack-card:nth-child(3) { z-index: 3; }
.why-stack-card:nth-child(4) { z-index: 4; }
.why-stack-card:nth-child(5) { z-index: 5; }

.why-stack-card-inner {
  width: min(1160px, 100%);
  min-height: min(70vh, 620px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--why-line);
  border-radius: var(--radius-md);
  background: var(--why-panel);
  box-shadow: 0 26px 70px rgba(49, 93, 148, 0.14);
}

.why-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 76px);
}

.why-card-label {
  color: var(--blue);
}

.why-card-copy h3 {
  max-width: 12ch;
  margin: 24px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.why-card-copy p {
  max-width: 420px;
  margin: 24px 0 0;
  color: var(--why-copy);
  font-size: 17px;
  line-height: 1.5;
}

.why-card-index {
  margin-top: 46px;
  color: var(--muted);
}

.why-card-media {
  min-height: 100%;
  margin: 0;
  background: var(--steel);
}

.why-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.why-truth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  align-items: stretch;
  background: var(--why-surface);
}

.why-truth-media {
  min-height: 620px;
}

.why-truth-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.why-truth-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 8vw, 128px);
}

.why-truth-copy > p:not(.why-kicker) {
  max-width: 530px;
  margin: 30px 0 0;
}

.why-truth-copy .text-link {
  width: fit-content;
  margin-top: 36px;
  color: var(--royal);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.why-cta {
  /* ponytail: item 08 — was min-height:100dvh, forcing this CTA to a full
     viewport (900px+) regardless of content, the exact "some feel
     oversized" the client flagged. Padding matched to the site's other
     CTAs (90px) instead of sizing off the viewport. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  align-items: center;
  gap: 48px;
  padding: 90px clamp(28px, 7vw, 112px);
  background: #dfeafa;
  border-top: 1px solid var(--why-line);
}

.why-cta > div:last-child {
  max-width: 510px;
}

.why-cta > div:last-child > p {
  margin: 0;
}

.why-page .site-footer {
  background: var(--why-surface);
  color: var(--why-copy);
  border-top: 1px solid var(--why-line);
}

.why-page .footer-brand p,
.why-page .footer-col a,
.why-page .footer-col span,
.why-page .footer-social a {
  color: var(--why-copy);
}

.why-page .footer-label {
  color: var(--blue);
}

.why-page .footer-col a:hover,
.why-page .footer-social a:hover {
  color: var(--ink);
}

.why-page .footer-bottom {
  border-top-color: var(--why-line);
}

.footer-brand-logo {
  width: 44px;
  height: 44px;
  background: currentColor;
  -webkit-mask-image: url("assets/logo.jpg");
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-image: url("assets/logo.jpg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}

.footer-brand-logo img {
  display: none;
}

@media (max-width: 780px) {
  .why-hero {
    min-height: auto;
    padding: 132px 24px 58px;
  }

  .why-hero-scrim {
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.9), rgba(247, 250, 255, 0.72) 70%, rgba(247, 250, 255, 0.92));
  }

  .why-hero-inner,
  .why-truth,
  .why-cta {
    grid-template-columns: 1fr;
  }

  .why-hero-inner {
    gap: 44px;
  }

  .why-hero h1 {
    max-width: 12ch;
    font-size: clamp(36px, 8vw, 48px);
  }

  .why-hero-note {
    max-width: 520px;
  }

  .why-layers {
    padding: 84px 24px 88px;
  }

  .why-layer-rail {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .why-layer-rail > div,
  .why-layer-rail > div + div {
    min-height: auto;
    padding: 22px 0;
    border-left: 0;
  }

  .why-layer-rail span {
    margin-top: 18px;
  }

  .why-stack-section {
    padding-top: 84px;
  }

  .why-stack-heading {
    padding: 0 24px 34px;
  }

  .why-stack-card {
    position: relative;
    min-height: auto;
    padding: 14px 16px;
  }

  .why-stack-card-inner {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .why-card-media,
  .why-stack-card:nth-child(even) .why-card-media {
    order: -1;
    min-height: 280px;
  }

  .why-card-copy {
    padding: 34px 28px 38px;
  }

  .why-card-copy h3 {
    max-width: 16ch;
  }

  .why-truth-media {
    min-height: 360px;
  }

  .why-truth-copy {
    padding: 74px 24px 84px;
  }

  .why-cta {
    padding: 78px 24px 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-stack-card {
    position: relative;
    min-height: auto;
  }
}

/* Hero composition: the message leads, while the rack evidence is treated
   as a live reconciliation field instead of a full-bleed background. */
.why-page .why-hero {
  min-height: 90dvh;
  align-items: center;
  padding: var(--hero-pad-top) clamp(28px, 7vw, 112px) var(--hero-pad-bottom);
  background: #f4f8fc;
}

/* Stacking back to front: real rack photo, a light wash for legibility, then
   the grid as a faint texture on top, then the copy. A photo replaces what
   used to be an empty grid on its own — the hero was reading as cold and
   unpopulated with nothing but lines on a blank field. */
.why-page .why-hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.why-page .why-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.7) brightness(1.08) contrast(0.96);
}

.why-page .why-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(100deg, rgba(244, 248, 252, 0.97) 0%, rgba(244, 248, 252, 0.86) 38%, rgba(244, 248, 252, 0.55) 68%, rgba(244, 248, 252, 0.32) 100%);
}

.why-page .why-hero-field {
  /* ponytail: grid-image removed — item 10. Not display:none: this
     element's own ::after (a separate decorative circle border) needs
     it to stay in the box tree. */
  position: absolute;
  inset: 0;
  z-index: -1;
}

.why-page .why-hero-field::after {
  content: "";
  position: absolute;
  inset: 16% 5% 11% 43%;
  border: 1px solid rgba(36, 87, 214, 0.18);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.why-page .why-hero-inner {
  grid-template-columns: 1fr;
  align-items: center;
}

.why-page .why-hero-copy {
  max-width: 780px;
}

.why-page .why-hero h1 {
  max-width: 22ch;
  color: var(--ink);
  font-size: var(--h1-size);
  text-wrap: balance;
}

.why-page .why-hero-lede {
  max-width: 720px;
}


.why-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 30px;
}

.why-page .why-hero .button-primary {
  margin-top: 0;
}

.why-hero-action-note {
  color: var(--royal);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.why-hero-visual {
  position: relative;
  min-height: 570px;
  isolation: isolate;
  transform: rotate(1.5deg);
}

.why-hero-visual::before {
  content: "";
  position: absolute;
  top: 5%;
  right: 2%;
  bottom: 4%;
  left: 7%;
  z-index: -1;
  border: 1px solid rgba(36, 87, 214, 0.22);
  background: rgba(255, 255, 255, 0.4);
}

.why-hero-visual-label {
  position: absolute;
  color: var(--royal);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.why-hero-visual-label-top {
  top: 2%;
  left: 8%;
}

.why-hero-rack {
  position: absolute;
  top: 9%;
  left: 0;
  width: 76%;
  height: 63%;
  margin: 0;
  overflow: hidden;
  border: 10px solid #ffffff;
  background: #102033;
  box-shadow: 0 24px 52px rgba(16, 32, 51, 0.17);
}

.why-hero-rack::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

.why-hero-rack::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 2px;
  background: var(--scan);
  box-shadow: 0 0 18px rgba(125, 189, 255, 0.95);
  animation: why-hero-scan 4.8s ease-in-out infinite;
}

.why-hero-rack img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.03);
}

.why-hero-rack figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px 12px;
  background: rgba(16, 32, 51, 0.82);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.why-hero-rack figcaption strong {
  color: #a8d2ff;
  font-weight: 700;
}

.why-hero-record {
  position: absolute;
  right: 0;
  bottom: 3%;
  width: 65%;
  padding: 23px 24px 21px;
  border: 1px solid rgba(16, 32, 51, 0.2);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 44px rgba(49, 93, 148, 0.16);
}

.why-record-head,
.why-record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.why-record-head {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--why-line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.why-record-head b {
  color: var(--verified);
  font-weight: 700;
}

.why-record-row {
  padding-top: 14px;
  color: var(--why-copy);
  font-size: 13px;
}

.why-record-row strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.why-hero-signal {
  position: absolute;
  display: block;
  width: 38px;
  height: 1px;
  background: var(--blue);
  transform-origin: left center;
  animation: why-hero-signal 3.4s ease-in-out infinite;
}

.why-hero-signal-one {
  top: 25%;
  right: 3%;
  transform: rotate(90deg);
}

.why-hero-signal-two {
  bottom: 19%;
  left: 5%;
  transform: rotate(-12deg);
  animation-delay: 1.2s;
}

@keyframes why-hero-scan {
  0%, 14% { transform: translateY(0); opacity: 0; }
  24% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateY(47vh); opacity: 0; }
}

@keyframes why-hero-signal {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 1; }
}

@media (max-width: 780px) {
  .why-page .why-hero {
    min-height: auto;
    padding: 132px 24px 70px;
  }

  .why-page .why-hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .why-page .why-hero h1 {
    max-width: 11ch;
    font-size: clamp(36px, 6vw, 48px);
  }

  .why-hero-visual {
    min-height: 500px;
    transform: rotate(0.8deg);
  }

  .why-hero-rack {
    width: 87%;
    height: 62%;
  }

  .why-hero-record {
    width: 76%;
  }
}

@media (max-width: 480px) {
  .why-page .why-hero {
    padding-right: 18px;
    padding-left: 18px;
  }

  .why-page .why-hero h1 {
    font-size: 40px;
  }

  .why-hero-visual {
    min-height: 400px;
  }

  .why-hero-rack {
    top: 10%;
    width: 94%;
    height: 58%;
    border-width: 7px;
  }

  .why-hero-record {
    right: 0;
    bottom: 4%;
    width: 88%;
    padding: 18px 16px;
  }

  .why-record-row {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-hero-visual {
    transform: none;
  }

  .why-hero-rack::after,
  .why-hero-signal {
    animation: none;
  }
}

/* The evidence stack is the hero of the story. Keep the opening frame quiet
   and let the three states resolve in a compact verification manifest.
   Sizing/padding lives solely on the .why-page .why-hero rule above (line
   ~2742) now — a second min-height/padding declaration used to live here,
   same selector specificity, later in the cascade, so it silently won over
   every edit made above it. That was the real cause of the hero rendering
   shorter than intended no matter what got changed up top. */

.why-page .why-hero-field::after {
  display: none;
}

.why-page .why-hero-inner {
  grid-template-columns: 1fr;
}

.why-page .why-hero h1 {
  max-width: 22ch;
  font-size: var(--h1-size);
}

@media (max-width: 780px) {
  .why-page .why-hero {
    min-height: auto;
    padding-top: 132px;
    padding-bottom: 64px;
  }

  .why-page .why-hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* Contact page: a bright field note with a clear request path and a real
   email handoff for this static site. */
.contact-page {
  --contact-surface: #f7faff;
  --contact-mist: #edf4fb;
  --contact-line: rgba(16, 32, 51, 0.17);
  --contact-copy: #30445d;
  background: var(--contact-surface);
  color: var(--ink);
}


.contact-page .site-nav a[aria-current="page"] {
  color: var(--ink);
}

.contact-details dt,
.contact-form-panel legend,
.contact-form-panel label span,
.contact-hero-image > span,
.contact-hero-readout span {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-hero {
  position: relative;
  min-height: min(780px, 94dvh);
  display: grid;
  align-items: center;
  overflow: clip;
  padding: var(--hero-pad-top) clamp(28px, 7vw, 112px) var(--hero-pad-bottom);
  isolation: isolate;
}

.contact-hero-field {
  /* ponytail: grid-image removed — item 10. Not display:none: ::after below needs this in the box tree. */
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--contact-surface);
}

.contact-hero-field::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: 9%;
  width: 34%;
  height: 58%;
  border: 1px solid rgba(36, 87, 214, 0.17);
  transform: rotate(7deg);
}

.contact-hero-inner {
  width: min(var(--container-max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.76fr);
  align-items: center;
  gap: clamp(54px, 9vw, 140px);
}

.contact-hero-copy {
  max-width: 720px;
}

.contact-request h2,
.contact-faq h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  text-wrap: balance;
}

.contact-hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading);
  text-wrap: balance;
}

.contact-hero-copy > p:not(.contact-kicker) {
  max-width: 650px;
  margin: 30px 0 0;
  color: var(--contact-copy);
  font-size: var(--lede-size);
  line-height: var(--lede-leading);
}

.contact-hero-copy .button-primary {
  margin-top: 32px;
}

.contact-hero-panel {
  position: relative;
  padding: 22px 0 0 26px;
  border-left: 1px solid var(--contact-line);
}

.contact-hero-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 26px;
  height: 1px;
  background: var(--contact-line);
}

.contact-hero-image {
  position: relative;
  height: 276px;
  overflow: hidden;
  border: 9px solid var(--white);
  background: var(--ink);
  box-shadow: 0 26px 60px rgba(49, 93, 148, 0.16);
}

.contact-hero-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 42% center;
  filter: saturate(0.82) contrast(1.04);
}

.contact-hero-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 2px;
  background: #a8d2ff;
  box-shadow: 0 0 18px rgba(125, 189, 255, 0.9);
  animation: contact-image-scan 5.2s ease-in-out infinite;
}

.contact-hero-image > span {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: #b8d7ff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.contact-hero-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-right: 1px solid var(--contact-line);
  border-bottom: 1px solid var(--contact-line);
  border-left: 1px solid var(--contact-line);
}

.contact-hero-readout > div {
  min-height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 16px 18px;
}

.contact-hero-readout > div + div {
  border-left: 1px solid var(--contact-line);
}

.contact-hero-readout strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
}

.contact-hero-panel > p {
  max-width: 340px;
  margin: 19px 0 0;
  color: var(--contact-copy);
  font-size: 14px;
  line-height: 1.5;
}

.contact-details {
  padding: 28px clamp(28px, 7vw, 112px) 0;
  background: var(--contact-surface);
}

.contact-details dl {
  width: min(var(--container-max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--contact-line);
  border-bottom: 1px solid var(--contact-line);
}

.contact-details dl > div {
  min-height: 190px;
  padding: 24px 24px 24px 0;
}

.contact-details dl > div + div {
  padding-left: 24px;
  border-left: 1px solid var(--contact-line);
}

.contact-details dd {
  margin: 18px 0 0;
  color: var(--contact-copy);
  font-size: 15px;
  line-height: 1.5;
}

.contact-details address {
  font-style: normal;
}

.contact-details dd a,
.contact-details dd strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
}

.contact-details dd p {
  margin: 10px 0 0;
}

.contact-request {
  padding: 124px clamp(28px, 7vw, 112px);
  background: var(--contact-mist);
}

.contact-request-inner {
  width: min(var(--container-max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(48px, 10vw, 150px);
  align-items: start;
}

.contact-request-inner > * {
  min-width: 0;
}

.contact-request h2,
.contact-faq h2 {
  font-size: var(--h2-size);
}

.contact-request-intro > p:not(.contact-kicker),
.contact-faq-intro > p:not(.contact-kicker) {
  max-width: 430px;
  margin: 26px 0 0;
  color: var(--contact-copy);
  font-size: var(--lede-size);
  line-height: var(--lede-leading);
}

.contact-next {
  margin-top: 58px;
  padding-top: 20px;
  border-top: 1px solid var(--contact-line);
}

.contact-next ol {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: next-step;
}

.contact-next li {
  position: relative;
  padding: 0 0 22px 36px;
  counter-increment: next-step;
}

.contact-next li::before {
  content: "0" counter(next-step);
  position: absolute;
  top: 1px;
  left: 0;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.contact-next li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: var(--contact-line);
}

.contact-next li strong,
.contact-next li span {
  display: block;
}

.contact-next li strong {
  color: var(--ink);
  font-size: 15px;
}

.contact-next li span {
  margin-top: 6px;
  color: var(--contact-copy);
  font-size: 14px;
  line-height: 1.45;
}

.contact-form-panel {
  max-width: 440px;
  margin-left: clamp(40px, 10vw, 160px);
  padding: clamp(60px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 60px rgba(49, 93, 148, 0.08);
}

.contact-form-panel fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Visually hidden, not removed — the fieldset still needs an accessible
   name for screen readers, it just no longer reads as a small kicker label
   on screen. */
.contact-form-panel legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.contact-form-panel label {
  display: block;
}

.contact-form-panel label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--copy-strong);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.contact-form-panel label em {
  margin-left: 5px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.contact-form-panel input,
.contact-form-panel select,
.contact-form-panel textarea {
  width: 100%;
  border: 1px solid var(--contact-line);
  border-radius: var(--radius-sm);
  outline: 0;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
}

.contact-form-panel textarea {
  min-height: 90px;
  resize: vertical;
}

.contact-form-panel input::placeholder,
.contact-form-panel textarea::placeholder {
  color: #8190a3;
}

.contact-form-panel input:focus,
.contact-form-panel select:focus,
.contact-form-panel textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36, 87, 214, 0.12);
}

.contact-form-panel [aria-invalid="true"] {
  border-color: #c84d4d;
}

.contact-form-panel small {
  display: block;
  min-height: 17px;
  margin-top: 5px;
  color: #b33434;
  font-size: 11px;
}

.contact-field-wide {
  grid-column: auto;
}

.contact-phone-field {
  display: grid;
  grid-template-columns: 98px 1fr;
  gap: 8px;
}

.contact-form-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--contact-line);
}

.contact-form-foot .button-primary {
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.contact-form-foot .button-primary:disabled {
  cursor: wait;
  opacity: 0.58;
}

.contact-form-foot p,
.contact-form-status {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.contact-form-status {
  margin-top: 16px;
  color: var(--royal);
}

.contact-faq {
  width: min(var(--container-max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(250px, 0.6fr) minmax(0, 1fr);
  gap: clamp(48px, 10vw, 150px);
  padding: 122px clamp(28px, 7vw, 112px) 128px;
}

.contact-faq-intro {
  align-self: start;
}

.contact-faq-list {
  border-top: 1px solid var(--contact-line);
}

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

.contact-faq-list summary {
  position: relative;
  padding: 20px 38px 20px 0;
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  font-weight: 650;
  list-style: none;
}

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

.contact-faq-list summary::after {
  content: "+";
  position: absolute;
  top: 19px;
  right: 4px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
}

.contact-faq-list details[open] summary::after {
  content: "-";
}

.contact-faq-list details p {
  max-width: 650px;
  margin: -3px 40px 23px 0;
  color: var(--contact-copy);
  font-size: 14px;
  line-height: 1.55;
}

@keyframes contact-image-scan {
  0%, 14% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateY(274px); opacity: 0; }
}

.contact-page .site-footer {
  background: var(--contact-surface);
  color: var(--contact-copy);
  border-top: 1px solid var(--contact-line);
}

/* Solutions page: a technical field guide with live schematic and cabinet reader. */
.solutions-page {
  --hair: #ecf0f6;
  --hair-2: #d8dee9;
  background: var(--cloud);
  color: var(--ink);
  overflow-x: hidden;
}
.solutions-page .site-header {
  background: rgba(247, 250, 255, .84);
  border-bottom-color: rgba(16, 32, 51, .1);
}
.solutions-page .site-nav a.is-current { color: var(--ink); }
.solutions-page .site-nav a.is-current::after { transform: scaleX(1); }
.solutions-page main { position: relative; }
.solutions-page .section-frame { width: var(--container); margin-inline: auto; }
.solutions-page .row-number,
.solutions-page .row-tag,
.solutions-page .drawing-meta,
.solutions-page .schematic-labels,
.solutions-page .schematic-key,
.solutions-page .readout-top,
.solutions-page .readout-bottom,
.solutions-page .cabinet-status,
.solutions-page .reader-label,
.solutions-page .rack-caption,
.solutions-page .surface-grid article > span {
  font-family: 'Geist Mono', monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.solutions-page h1,
.solutions-page h2,
.solutions-page h3,
.solutions-page p { margin-top: 0; }
.solutions-page h1,
.solutions-page h2 { text-wrap: balance; }
.solutions-page h1 em,
.solutions-page h2 em { color: var(--blue); font-style: normal; }
.solutions-page h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); }
.solutions-page .hero-lede,
.solutions-page .section-lede { color: var(--copy-strong); font-size: var(--lede-size); line-height: var(--lede-leading); max-width: 39rem; }
.solutions-page .button-primary { display: inline-flex; align-items: center; gap: 18px; }
.solutions-page .button-primary span { font-size: 18px; }
.solutions-hero { min-height: calc(100dvh - 80px); display: grid; grid-template-columns: 1fr; align-items: center; padding-block: var(--hero-pad-top) var(--hero-pad-bottom); position: relative; }
.solutions-hero::before { /* ponytail: grid overlay removed — item 10 */ display: none; }
.solutions-hero-copy { max-width: 800px; margin: 0 auto; text-align: center; }
.solutions-hero h1 { margin: 0 auto 34px; max-width: 850px; font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); }
.solutions-hero .hero-lede { max-width: 610px; margin: 0 auto 36px; }
.solutions-hero-actions { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; }
/* Sheet tags: small "engineering document" index marks reused across the
   technical sections (process rail, schematic, cabinet reader) — the page's
   own device for telling sections apart, distinct from Why RackTrack's. */
.sheet-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sheet-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verified);
}

/* Process section: Capture / Check / Use as three stations along a vertical
   line that fills as you scroll past them (see the rail script). Replaces
   the old plain alternating image/text rows. */
.process-section {
  padding-block: 120px;
}

.process-intro {
  max-width: 720px;
  margin-bottom: 70px;
}

.process-intro h2 {
  margin: 16px 0 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  transition-delay: 0.08s;
}

.process-intro h2.is-visible {
  opacity: 1;
  transform: none;
}

.process-intro .section-lede {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.process-intro .section-lede.is-visible {
  opacity: 1;
  transform: none;
}

.process-intro .section-lede {
  margin-top: 20px;
  transition-delay: 0.16s;
}

.process-rail {
  position: relative;
  padding-left: clamp(28px, 4vw, 52px);
}

.process-line {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 2px;
  background: rgba(16, 32, 51, 0.12);
}

.process-line-fill {
  display: block;
  width: 100%;
  height: 0%;
  background: linear-gradient(var(--blue), var(--verified));
}

.process-station {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  align-items: center;
  gap: clamp(28px, 3vw, 56px);
  padding: 46px 0;
  border-bottom: 1px solid rgba(16, 32, 51, 0.14);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.process-station:last-child {
  border-bottom: 0;
}

.process-station.is-visible {
  opacity: 1;
  transform: none;
}

.process-station:nth-child(3) { transition-delay: 0.08s; }
.process-station:nth-child(4) { transition-delay: 0.16s; }

.process-station-copy h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}

.process-station-copy p {
  max-width: 520px;
  color: var(--copy-strong);
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 14px;
}

.row-tag { color: var(--blue); font-size: 10px; font-weight: 700; }

.process-station-media {
  margin: 0;
  height: 180px;
  overflow: hidden;
}

.process-station-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) contrast(0.95);
}

@media (max-width: 900px) {
  .process-station {
    grid-template-columns: 1fr;
  }

  .process-station-media {
    height: 200px;
  }
}

.schematic-section {
  margin-top: 0;
  padding: 120px 0;
  background: var(--mist);
}

/* Narrower than the standard 1440px .section-frame — at full width the
   diagram stretched edge-to-edge and read as cramped, not spacious. Needs
   .solutions-page prefixed to match (and via later cascade order, beat)
   the .solutions-page .section-frame rule's specificity above. */
.solutions-page .schematic-section {
  width: min(1180px, calc(100% - 96px));
}

.schematic-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-bottom: 34px; border-bottom: 1px solid rgba(16,32,51,.75); }
.schematic-heading h2 { margin-bottom: 0; font-size: var(--h2-size); }
.drawing-meta { display: grid; gap: 8px; text-align: right; color: #676f79; font-size: 11px; }
.drawing-meta strong { color: var(--ink); letter-spacing: .14em; }
.schematic-labels { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 5vw; padding-top: 16px; color: #8b9097; font-size: 10px; }
.schematic-grid { display: grid; grid-template-columns: minmax(180px, .85fr) minmax(350px, 1.45fr) minmax(180px, .85fr); gap: 0; align-items: center; margin-top: 25px; }
.source-stack, .record-stack { display: grid; gap: 26px; align-content: center; }
.source-node, .record-node { border: 1px solid rgba(16,32,51,.72); padding: 18px 20px; min-height: 98px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.source-node strong, .record-node strong { font-family: 'Geist Mono', monospace; font-size: 13px; letter-spacing: .08em; } .source-node span, .record-node span { color: #888e96; font: 11px 'Geist Mono', monospace; letter-spacing: .08em; margin-top: 8px; }
.rack-glyph { width: 44px; height: 48px; border: 1px solid #535961; display: grid; grid-template-rows: repeat(6, 1fr); gap: 3px; padding: 5px; margin-bottom: 10px; } .rack-glyph i { border: 1px solid #b9bec5; } .rack-glyph i:nth-child(2), .rack-glyph i:nth-child(5) { border-color: var(--blue); background: rgba(36,87,214,.12); }
.telemetry-glyph { display: flex; gap: 3px; height: 14px; margin: 10px 0 14px; } .telemetry-glyph i { width: 8px; border: 1px solid #9ba1a7; } .telemetry-glyph i:nth-child(3), .telemetry-glyph i:nth-child(4), .telemetry-glyph i:nth-child(7) { background: var(--blue); border-color: var(--blue); }
.flow-arrow { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: #848a92; font: 10px 'Geist Mono', monospace; letter-spacing: .09em; } .flow-arrow b { color: var(--ink); font-size: 19px; font-weight: 400; }
.engine-node { border: 1px solid rgba(16,32,51,.82); margin-inline: 18px; } .engine-head { display: flex; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(16,32,51,.6); font: 13px 'Geist Mono', monospace; letter-spacing: .08em; } .engine-head span { color: #8a9098; font-size: 11px; }
.engine-node article { display: grid; grid-template-columns: 42px 1fr; gap: 0; padding: 20px 22px; min-height: 95px; border-bottom: 1px solid rgba(16,32,51,.16); } .engine-node article:last-child { border-bottom: 0; } .engine-node article > b { color: var(--blue); font: 700 12px 'Geist Mono', monospace; padding-top: 3px; } .engine-node h3 { font: 14px 'Geist Mono', monospace; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 7px; } .engine-node p { color: #81878e; font: 12px 'Geist Mono', monospace; margin: 0; }
.record-stack { margin-left: 26px; } .record-node { min-height: 84px; border-left: 4px solid transparent; } .record-node.is-verified { border-left-color: var(--blue); }
.schematic-key { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 28px; margin-top: 30px; border-top: 1px solid rgba(16,32,51,.15); color: #828890; font-size: 10px; } .schematic-key strong { margin-left: auto; color: var(--blue); font-size: 10px; } .key-line, .key-dash, .key-box { display: inline-block; width: 30px; height: 1px; background: #62686e; vertical-align: middle; margin-right: 9px; } .key-dash { background: repeating-linear-gradient(90deg, var(--blue) 0 8px, transparent 8px 14px); } .key-box { height: 12px; background: rgba(36,87,214,.1); border: 1px solid #7c95ed; }
.cabinet-section { display: grid; grid-template-columns: minmax(290px, .72fr) minmax(0, 1.65fr); gap: 7vw; align-items: center; padding-block: 190px 120px; }
.cabinet-copy h2 { margin-bottom: 32px; } .cabinet-copy .section-lede { font-size: 19px; max-width: 520px; } .cabinet-status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; margin-top: 40px; } .cabinet-status strong { color: var(--ink); margin-left: 20px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--verified); box-shadow: 0 0 0 5px rgba(67,184,131,.13); }
.cabinet-reader { display: grid; grid-template-columns: minmax(230px, .73fr) minmax(330px, 1.1fr); min-height: 610px; border: 1px solid #d5deeb; background: var(--white); box-shadow: 18px 24px 60px rgba(45,77,116,.12); } .reader-panel { display: flex; flex-direction: column; } .reader-label { padding: 42px 28px 22px; color: #6d7685; font-size: 12px; }
.reader-tabs { display: grid; gap: 10px; padding: 0 28px 26px; } .reader-tabs button { appearance: none; border: 1px solid #d3dce8; background: white; color: var(--ink); min-height: 60px; text-align: left; padding: 0 20px; font: 700 17px 'Satoshi', sans-serif; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease, color .25s ease; } .reader-tabs button span { color: #8a9bb2; font: 14px 'Geist Mono', monospace; } .reader-tabs button.is-active { border-color: var(--blue); box-shadow: inset 5px 0 var(--blue); color: var(--blue); } .reader-tabs button.is-active span { color: var(--blue); }
.reader-explanation { border-top: 1px solid #dbe3ed; margin-top: auto; padding: 27px 28px 32px; } .reader-explanation h3 { font-size: 21px; line-height: 1.1; margin-bottom: 28px; } .reader-explanation p { color: #788597; font: 13px/1.5 'Geist Mono', monospace; margin: 0; }
.rack-stage { position: relative; overflow: hidden; min-height: 610px; display: grid; place-items: center; background: #eaf0fb; } .rack-stage::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.9), transparent 42%); pointer-events: none; }
.cabinet { position: relative; z-index: 2; width: min(72%, 420px); height: 87%; min-height: 500px; filter: drop-shadow(20px 20px 22px rgba(26,41,61,.2)); transform: perspective(1000px) rotateY(-6deg); } .cabinet-face { position: absolute; inset: 0 14% 0 0; background: linear-gradient(90deg, #101722, #303a49 50%, #131b26); border: 12px solid #131b25; border-bottom-width: 18px; padding: 22px 18px; } .cabinet-side { position: absolute; inset: 2% 0 0 84%; background: linear-gradient(90deg,#202937,#101722); transform: skewY(13deg); transform-origin: left; } .rack-rail { position: absolute; inset: 0 auto 0 8px; width: 10px; background: repeating-linear-gradient(#080d14 0 12px, #556171 12px 15px); } .rack-rail.right { left: auto; right: 8px; }
.rack-units { height: 100%; display: grid; grid-template-rows: 1fr 1fr .45fr 1.45fr 1.55fr 1fr; gap: 8px; } .rack-slot { position: relative; background: linear-gradient(180deg,#202b3b,#0c121b); border: 2px solid #586d8b; box-shadow: inset 0 0 20px #060b12; color: white; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; } .rack-slot::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: 7px; height: 2px; background: var(--blue); opacity: .7; } .rack-slot.blank { border-color: #394657; background: repeating-linear-gradient(90deg,#232e3b 0 16px,#111923 16px 19px); } .rack-slot span, .rack-slot em { font: 10px 'Geist Mono', monospace; color: #a9c2f8; } .rack-slot strong { font: 14px 'Satoshi', sans-serif; margin: 4px 0; } .rack-slot em { color: #78d3a6; font-style: normal; } .rack-slot.storage { border-color: #6285c8; } .rack-slot.capacity { border-color: #4d5969; }
.scan-beam { position: absolute; z-index: 4; left: 19%; right: 23%; top: 17%; height: 3px; background: #b9d2ff; box-shadow: 0 0 18px 7px rgba(95,150,255,.65); animation: rack-scan 5s ease-in-out infinite; } @keyframes rack-scan { 0%, 100% { transform: translateY(0); opacity: .25; } 50% { transform: translateY(440px); opacity: .9; } }
.rack-caption { position: absolute; z-index: 5; bottom: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; color: #aac7ff; font-size: 10px; } .rack-caption strong { color: #72d19f; font-weight: 700; }
/* Was a dark (--ink) full-bleed panel — broke the site's "no dark dominant
   background" rule. Rebuilt light, matching the rest of the site's CTAs. */
/* Matches .why-cta's layout exactly: a 2-column grid (heading | copy +
   button) instead of one stacked column, so this CTA sits at the same
   height as the site's other CTAs instead of running taller for no
   reason other than a different internal layout. */
.solutions-cta {
  margin-top: 0;
  margin-bottom: 0;
  display: grid;
  /* Same fr-based ratio as .why-cta (was max-content + 1fr, which let the
     short 2-line heading shrink its own track while the paragraph's 1fr
     track claimed 100% of the leftover width — even though the paragraph
     itself is capped at max-width:510px, leaving a huge dead void after
     it). Both tracks sharing the row as fr fractions, like .why-cta,
     means the pair always spans the full width together instead of one
     side ballooning past what its content needs. */
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  align-items: center;
  gap: 48px;
  padding: 90px clamp(28px, 7vw, 112px);
  background: #dfeafa;
  /* --why-line is scoped to .why-page and isn't defined on .solutions-page —
     using its literal value here to match .why-cta's border exactly. */
  border-top: 1px solid rgba(16, 32, 51, 0.15);
  position: relative;
  overflow: hidden;
}

/* Same stacking breakpoint and gap as .why-cta (no gap override on stack) —
   keeps both pages' CTA sections behaving identically on tablet/mobile. */
@media (max-width: 780px) {
  .solutions-cta {
    grid-template-columns: 1fr;
    padding: 78px 24px 88px;
  }
}
.solutions-cta::before { /* ponytail: grid overlay removed — item 10 */ display: none; }
.solutions-cta > * { position: relative; }
.solutions-cta > div:first-child { margin-left: clamp(24px, 4vw, 64px); }
.solutions-cta > div:last-child { max-width: 510px; }
.solutions-cta h2 { color: var(--ink); }
.solutions-cta h2 em { color: var(--blue); font-style: normal; }
.solutions-cta p:not(.eyebrow) { color: var(--copy-strong); font-size: 18px; line-height: 1.45; margin: 0 0 26px; }
.solutions-cta .button-primary { background: var(--blue); color: white; }
.solutions-page .site-footer {
  margin-top: 0;
  padding-top: 72px;
  background: var(--why-surface);
  color: var(--why-copy);
  border-top: 1px solid var(--why-line);
}
.solutions-page .footer-top {
  align-items: start;
}
.solutions-page .footer-brand p,
.solutions-page .footer-col a,
.solutions-page .footer-col span,
.solutions-page .footer-social a { color: var(--why-copy); }
.solutions-page .footer-label { color: var(--blue); }
.solutions-page .footer-col a:hover,
.solutions-page .footer-social a:hover { color: var(--ink); }
.solutions-page .footer-bottom { border-top-color: var(--why-line); }
.solutions-motion .solutions-intro > *,
.solutions-motion .principle-row,
.solutions-motion .schematic-heading,
.solutions-motion .schematic-grid,
.solutions-motion .schematic-key,
.solutions-motion .cabinet-copy,
.solutions-motion .cabinet-reader,
.solutions-motion .workflow-heading,
.solutions-motion .surface-grid article,
.solutions-motion .solutions-cta > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(.22, .8, .22, 1), transform 700ms cubic-bezier(.22, .8, .22, 1);
}
.solutions-motion .solutions-intro.is-visible > *,
.solutions-motion .principle-row.is-visible,
.solutions-motion .schematic-section.is-visible .schematic-heading,
.solutions-motion .schematic-section.is-visible .schematic-grid,
.solutions-motion .schematic-section.is-visible .schematic-key,
.solutions-motion .cabinet-section.is-visible .cabinet-copy,
.solutions-motion .cabinet-section.is-visible .cabinet-reader,
.solutions-motion .workflow-section.is-visible .workflow-heading,
.solutions-motion .surface-grid article.is-visible,
.solutions-motion .solutions-cta.is-visible > * {
  opacity: 1;
  transform: none;
}
.solutions-motion .cabinet-reader { transition-delay: 120ms; }
.solutions-motion .solutions-intro .section-lede,
.solutions-motion .workflow-heading .section-lede,
.solutions-motion .schematic-grid,
.solutions-motion .cabinet-reader { transition-delay: 140ms; }
.solutions-motion .schematic-key { transition-delay: 230ms; }
.solutions-motion .surface-grid article:nth-child(2n) { transition-delay: 100ms; }
.solutions-motion .surface-grid article:nth-child(3n) { transition-delay: 170ms; }
.solutions-motion .cabinet-section:not(.is-visible) .scan-beam { animation-play-state: paused; }
html:not(.solutions-motion) .principle-row,
html:not(.solutions-motion) .surface-grid article { opacity: 1; transform: none; }
@media (max-width: 980px) {
  .solutions-page .section-frame { width: min(100% - 42px, 720px); }
  .solutions-hero { min-height: auto; grid-template-columns: 1fr; gap: 70px; padding-block: 100px 80px; } .solutions-hero-copy { padding-left: 0; }
  .solutions-intro, .workflow-heading { grid-template-columns: 1fr; gap: 30px; padding-block: 100px 50px; }
  .principle-row, .principle-row-reverse { grid-template-columns: 1fr; gap: 22px; } .principle-row img { grid-column: auto; height: 180px; }
  .schematic-section { margin-top: 100px; } .schematic-section > * { padding-inline: 26px; } .schematic-heading { display: block; } .drawing-meta { text-align: left; margin-top: 25px; } .schematic-labels { display: none; } .schematic-grid { grid-template-columns: 1fr; gap: 16px; } .source-stack, .record-stack { gap: 12px; } .source-stack { grid-template-columns: 1fr 30px 1fr; align-items: center; } .source-stack .flow-arrow { display: grid; justify-items: center; gap: 0; } .source-stack .flow-arrow b { transform: rotate(90deg); } .source-stack .flow-arrow:last-child { display: none; } .engine-node { margin: 10px 0; } .record-stack { grid-template-columns: repeat(3, 1fr); margin-left: 0; } .record-node { min-height: 100px; padding: 14px; } .record-node span { font-size: 9px; }
  .cabinet-section { grid-template-columns: 1fr; gap: 60px; padding-block: 120px 90px; } .cabinet-reader { grid-template-columns: 1fr; } .reader-panel { min-height: auto; } .reader-explanation { display: none; } .rack-stage { min-height: 600px; }
  .surface-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .solutions-page .section-frame { width: calc(100% - 30px); } .solutions-hero h1 { font-size: clamp(36px, 10vw, 56px); } .solutions-hero .hero-lede { font-size: 18px; } .solutions-hero-actions { gap: 20px; } .process-intro h2, .workflow-heading h2 { font-size: 36px; }
  .principle-row, .principle-row-reverse { grid-template-columns: 1fr; } .principle-row img { grid-column: auto; height: 150px; } .principle-copy p { font-size: 16px; } .row-tag { font-size: 9px; line-height: 1.5; display: block; }
  .schematic-section { padding-top: 28px; } .schematic-section > * { padding-inline: 17px; } .schematic-heading h2 { font-size: 45px; } .source-stack { grid-template-columns: 1fr; } .source-stack .flow-arrow { justify-content: flex-start; } .source-stack .flow-arrow b { transform: none; } .record-stack { grid-template-columns: 1fr; } .record-node { min-height: 78px; } .schematic-key { display: grid; gap: 15px; padding-top: 22px; } .schematic-key strong { margin-left: 0; }
  .reader-label, .reader-tabs { padding-left: 17px; padding-right: 17px; } .reader-tabs button { min-height: 55px; font-size: 16px; } .rack-stage { min-height: 480px; } .cabinet { width: 74%; min-height: 410px; height: 82%; } .rack-slot { padding: 8px; } .rack-slot strong { font-size: 10px; } .rack-slot span, .rack-slot em { font-size: 8px; } .scan-beam { animation-name: rack-scan-mobile; } @keyframes rack-scan-mobile { 0%,100% { transform: translateY(0); } 50% { transform: translateY(300px); } }
  .surface-grid article { min-height: 220px; padding: 24px 20px; } .surface-grid h3 { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { .solutions-page *, .solutions-page *::before, .solutions-page *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* The system drawing is intentionally kept as the original source artwork. */
.solutions-page .schematic-section {
  /* Matches .section-frame's shared container width (--container) instead
     of its own one-off scale. */
  width: var(--container);
  margin: 120px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.solutions-page .schematic-section > * { padding-inline: 0; }
/* The diagram used to touch its own border directly — no breathing room,
   reading as a raw exported drawing pasted onto the page. Padding + a soft
   card now gives it space to sit in, like a framed print rather than a
   spec-sheet crop.
   Width was 1560px — at the SVG's fixed 1600:620 ratio that rendered ~600px+
   tall before padding, making this one diagram taller than every surrounding
   section. Capped narrower so it reads as a supporting figure, not the
   page's dominant element. */
.original-schematic {
  margin: 0;
  padding: clamp(16px, 2.4vw, 32px);
  background: var(--white);
  border: 1px solid rgba(16, 32, 51, 0.14);
  border-radius: var(--radius-md);
  box-shadow: 0 30px 70px rgba(16, 32, 51, 0.09);
}
.original-schematic img { display: block; width: 100%; height: auto; border: 0; background: transparent; }
.original-schematic figcaption { margin-top: 12px; color: #788597; font: 11px var(--font-mono); letter-spacing: .06em; }
.solutions-motion .original-schematic { opacity: 0; transform: translateY(28px); transition: opacity 700ms cubic-bezier(.22,.8,.22,1), transform 700ms cubic-bezier(.22,.8,.22,1); }
.solutions-motion .original-schematic.is-visible { opacity: 1; transform: none; }
@media (max-width: 980px) {
  .solutions-page .schematic-section,
  .solutions-page #system { width: calc(100% - 30px); margin-top: 100px; }
}
@media (max-width: 640px) { .solutions-page .schematic-section { margin-top: 80px; width: calc(100% - 30px); } .original-schematic { overflow-x: auto; } .original-schematic img { min-width: 720px; } }

/* Original cabinet reader frame and its source-page spacing. */
.solutions-page #rack-3d { padding-block: 120px; }
.solutions-page #rack-3d { --blue: #1a3fd4; --ink: #1a1a1a; --muted: #6f7785; }
/* Was 1760px — the cabinet reader stretched edge-to-edge and looked
   oversized/cramped rather than spacious. Narrowed to match the schematic
   section above it. */
.solutions-page #rack-3d > .max-w-container-max-width { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }
/* padding-left matches .rk-panel's own constant 64px inset from this same
   container, so the heading lines up exactly with the panel's left edge
   instead of drifting further right of it at wider viewports. */
.solutions-page #rack-3d > .max-w-container-max-width > .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(50px, 8vw, 130px); align-items: end; padding-left: 64px; }
.solutions-page #rack-3d h2 { max-width: 19ch; margin: 0; font-size: clamp(28px, 2.6vw, 36px); font-weight: 700; line-height: .96; letter-spacing: -.05em; }
.solutions-page #rack-3d .lede { max-width: 42ch; margin: 0; color: var(--copy-strong); font-size: clamp(16px, 1vw, 18px); line-height: 1.45; }
.solutions-page #rack-3d .rk-panel { margin-top: 38px; }
.solutions-page #rack-3d .rk-panel {
  width: min(1660px, calc(100% - 128px));
  max-width: none !important;
  margin-inline: auto;
}
.solutions-page #system { width: var(--container); }
.solutions-page #system .original-schematic img { width: 100%; }
@media (min-width: 861px) {
  .solutions-page #rack-3d .rk-stage {
    --u1: 7px;
    --D: 72px;
    --rail: 15px;
    --proud: 8px;
    min-height: 0;
    padding: 12px 14px 18px;
  }
  .solutions-page #rack-3d .rk-tilt { width: min(100%, 240px); }
}
@media (max-width: 860px) {
  .solutions-page #rack-3d { padding-block: 100px 110px; }
  .solutions-page #rack-3d > .max-w-container-max-width { width: calc(100% - 30px); }
  .solutions-page #rack-3d > .max-w-container-max-width > .grid { grid-template-columns: 1fr; gap: 28px; padding-left: 0; }
  .solutions-page #rack-3d h2 { max-width: 15ch; }
  .solutions-page #rack-3d .rk-panel { width: 100%; }
}

/* Use Cases: an evidence navigator. Its anchored role switcher is intentionally
   different from the editorial Why page and the technical Solutions field guide. */
.use-cases-page { --uc-ink: #102033; --uc-blue: #2457d6; --uc-paper: #f5f7fa; --uc-line: rgba(16,32,51,.16); background: var(--uc-paper); color: var(--uc-ink); overflow-x: clip; }
.use-cases-page .site-nav a.is-current::after { transform: scaleX(1); }

/* Full-bleed photo behind centered text, like the homepage hero — replaces
   the earlier split layout (text pinned left, photo boxed on the right),
   which read as off-balance/"tilted" rather than a deliberate composition. */
.uc-opening { position: relative; display: grid; place-items: center; min-height: 100dvh; padding: var(--hero-pad-top) 24px var(--hero-pad-bottom); overflow: hidden; isolation: isolate; text-align: center; }
.uc-opening-media { position: absolute; inset: 0; z-index: -1; }
.uc-opening-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(.96); }
.uc-opening-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,26,.62), rgba(6,14,26,.4) 45%, rgba(6,14,26,.72)); }
.uc-opening-copy { max-width: 780px; }
.uc-close h2 { letter-spacing: -.065em; line-height: .89; text-wrap: balance; }
.uc-opening h1 { margin: 22px auto 28px; max-width: 16ch; color: var(--white); font-weight: var(--h1-weight); font-size: var(--h1-size); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); text-wrap: balance; }
.uc-opening h1 em { color: var(--scan); font-style: normal; }
.uc-opening-copy > p:not(.eyebrow) { max-width: 50ch; margin: 0 auto; color: rgba(255,255,255,.78); font-size: var(--lede-size); line-height: var(--lede-leading); }
.uc-opening-link { display:inline-flex; gap:17px; align-items:center; justify-content:center; margin-top:40px; color:var(--white); font:700 12px var(--font-mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }.uc-opening-link span { color:var(--scan); font-size:20px; transition:transform .25s ease; }.uc-opening-link:hover span { transform:translateY(4px); }
.uc-opening-credit { position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 26px; margin: 0; display: flex; justify-content: space-between; color: rgba(255,255,255,.75); font: 10px var(--font-mono); letter-spacing: .09em; }
.uc-opening-credit strong { color: var(--scan); }
.uc-scanline { position:absolute;z-index:1;left:0;right:0;top:0;height:2px;background:#c3d5ff;box-shadow:0 0 18px 5px rgba(98,147,255,.7);animation:uc-scan 6s ease-in-out infinite; }@keyframes uc-scan { 0%,100% { transform:translateY(50px);opacity:.15; } 50% { transform:translateY(calc(100vh * .8));opacity:.8; } }
/* Six small tags over the full-bleed hero photo — foreshadows the six roles
   below instead of making the visitor scroll to discover the page's point. */
.uc-opening-tags { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.uc-opening-tag { position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; background: rgba(9, 19, 34, .68); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: #fff; font: 600 11px var(--font-mono); letter-spacing: .02em; white-space: nowrap; }
.uc-opening-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--scan); animation: uc-tag-ping 2.6s ease-out infinite; }
.uc-opening-tag:nth-child(2)::before { animation-delay: .3s; }
.uc-opening-tag:nth-child(3)::before { animation-delay: .6s; }
.uc-opening-tag:nth-child(4)::before { animation-delay: .9s; }
.uc-opening-tag:nth-child(5)::before { animation-delay: 1.2s; }
.uc-opening-tag:nth-child(6)::before { animation-delay: 1.5s; }
@keyframes uc-tag-ping { 0% { box-shadow: 0 0 0 0 rgba(125,189,255,.55); } 70% { box-shadow: 0 0 0 8px rgba(125,189,255,0); } 100% { box-shadow: 0 0 0 0 rgba(125,189,255,0); } }

/* By-role card grid — one photo, one metric, one line of what changes for
   that role, linking straight to that role's case page. Replaces the old
   fan-out SVG diagram + horizontal team filmstrip with a single scannable
   grid (same 6 destinations). */
.uc-roles { padding: 130px 0 110px; border-top: 1px solid var(--uc-line); width: var(--container); margin: 0 auto; }
.uc-roles-intro { max-width: 620px; margin: 0 0 50px; }
.uc-roles-intro h2 { margin: 0 0 16px; max-width: 13ch; font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); }
.uc-roles-intro p { margin: 0; max-width: 46ch; color: var(--muted); font-size: var(--lede-size); line-height: var(--lede-leading); }

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

.uc-card { display: flex; flex-direction: column; border: 1px solid var(--uc-line); border-radius: var(--radius-md); overflow: hidden; background: var(--white); color: inherit; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.uc-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -20px rgba(16, 32, 51, .25); border-color: rgba(36, 87, 214, .3); }

.uc-media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.uc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uc-metric { position: absolute; left: 14px; bottom: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(6, 17, 39, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--white); font: 700 11px var(--font-mono); letter-spacing: .04em; }

.uc-card-title { display: block; margin: 22px 20px 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.uc-card-desc { display: block; margin: 10px 20px 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.uc-card-go { display: flex; align-items: center; gap: 8px; margin: 16px 20px 20px; color: var(--blue); font: 700 13px var(--font-ui); }
.uc-card-go span { transition: transform 200ms ease; }
.uc-card:hover .uc-card-go span { transform: translateX(4px); }

@media (max-width: 980px) {
  .uc-roles { padding: 100px 0 80px; width: calc(100% - 60px); }
  .uc-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .uc-opening-tags { display: none; }
  .uc-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .uc-opening-tag::before { animation: none; } }
.uc-close {
  /* Matches .why-cta/.solutions-cta exactly: same grid recipe (heading |
     copy+button), same light-blue band, same border color, same button
     color — so this page's closing CTA reads as the same component
     instead of a page-specific variant. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  align-items: center;
  gap: 48px;
  padding: 90px clamp(28px, 7vw, 112px);
  background: #dfeafa;
  border-top: 1px solid rgba(16, 32, 51, 0.15);
}
.uc-close h2 {
  /* ponytail: the shared .89 line-height above was tuned for the 2-line
     hero H1, not this 3-line CTA headline — at this font-size it made the
     italic third line collide with "you own." above it. */
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: 1.05;
}
/* Only a normal-style Geist face is declared, so an italic <em> here got a
   synthesized oblique that read as a different (non-sans) face. Drop back to
   upright, same as .solutions-cta h2 em / .rs-cta-inner h2 em. */
.uc-close h2 em { font-style: normal; }
.uc-close > div:last-child { max-width: 510px; }
.uc-close > div:last-child > p { margin: 0 0 26px; max-width: 45ch; color: var(--muted); font-size: var(--lede-size); line-height: var(--lede-leading); }
.use-cases-page .site-footer { margin-top:0; }
@media (max-width: 980px) { .uc-opening { padding:130px 24px 66px; } .uc-opening h1 { max-width:13ch; } .uc-close { width:calc(100% - 60px); } .uc-filmstrip-head { width: calc(100% - 60px); } .uc-close { padding:100px 0 118px; } .uc-team-list { width: calc(100% - 60px); } .uc-team-row { gap: 48px; padding: 56px 0; } }
@media (max-width:640px) { .uc-opening h1 { font-size:clamp(36px,10vw,48px); } .uc-opening-credit { font-size: 8px; left: 16px; right: 16px; } .uc-close { grid-template-columns: 1fr; gap: 28px; padding: 70px 24px; } .uc-close > div:last-child { max-width: none; } .uc-filmstrip-head { width: calc(100% - 44px); } .uc-close h2 { font-size:36px; } .uc-team-list { width: calc(100% - 44px); } .uc-team-row, .uc-team-row:nth-child(even) { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 0; } .uc-team-row figure { flex-basis: auto; max-width: 220px; width: 100%; } }

.contact-page .footer-brand p,
.contact-page .footer-col a,
.contact-page .footer-col span,
.contact-page .footer-social a {
  color: var(--contact-copy);
}

.contact-page .footer-label {
  color: var(--blue);
}

.contact-page .footer-col a:hover,
.contact-page .footer-social a:hover {
  color: var(--ink);
}

.contact-page .footer-bottom {
  border-top-color: var(--contact-line);
}

@media (max-width: 900px) {
  .contact-hero-inner,
  .contact-request-inner,
  .contact-faq {
    grid-template-columns: 1fr;
  }

  .contact-hero-panel {
    width: min(620px, 100%);
  }

  .contact-details dl {
    grid-template-columns: 1fr 1fr;
  }

  .contact-details dl > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--contact-line);
  }

  .contact-details dl > div:nth-child(4) {
    border-top: 1px solid var(--contact-line);
  }

  .contact-request-inner {
    gap: 60px;
  }

  .contact-form-panel {
    margin-left: 100px;
  }

  .contact-faq {
    gap: 54px;
  }
}

@media (max-width: 620px) {
  .contact-hero {
    min-height: auto;
    padding: 132px 22px 66px;
  }

  .contact-hero-inner {
    gap: 50px;
  }

  .contact-hero h1 {
    font-size: 48px;
  }

  .contact-hero-panel {
    padding-left: 16px;
  }

  .contact-hero-panel::before {
    left: 16px;
  }

  .contact-hero-image {
    height: 220px;
  }

  .contact-details {
    padding: 0 22px;
  }

  .contact-details dl {
    grid-template-columns: 1fr;
  }

  .contact-details dl > div,
  .contact-details dl > div + div,
  .contact-details dl > div:nth-child(3),
  .contact-details dl > div:nth-child(4) {
    min-height: auto;
    padding: 22px 0;
    border-top: 1px solid var(--contact-line);
    border-left: 0;
  }

  .contact-details dl > div:first-child {
    border-top: 0;
  }

  .contact-request {
    padding: 84px 22px;
  }

  .contact-form-panel {
    padding: 24px 20px;
  }

  .contact-form-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-faq {
    padding: 84px 22px 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero-image::after {
    animation: none;
  }
}


/* Give the short investor copy a little pacing when the page opens. */
.why-page .why-hero-copy > *,
.contact-page .contact-hero-copy > * {
  opacity: 0;
  transform: translateY(14px);
  animation: concise-copy-in 620ms cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.why-page .why-hero-copy > *:nth-child(1),
.contact-page .contact-hero-copy > *:nth-child(1) { animation-delay: 80ms; }
.why-page .why-hero-copy > *:nth-child(2),
.contact-page .contact-hero-copy > *:nth-child(2) { animation-delay: 150ms; }
.why-page .why-hero-copy > *:nth-child(3),
.contact-page .contact-hero-copy > *:nth-child(3) { animation-delay: 220ms; }
.why-page .why-hero-copy > *:nth-child(4),
.contact-page .contact-hero-copy > *:nth-child(4) { animation-delay: 290ms; }

@keyframes concise-copy-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-page .why-hero-copy > *,
  .contact-page .contact-hero-copy > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (min-width: 781px) {
  .contact-page .contact-hero,
  .contact-page .contact-details,
  .contact-page .contact-request {
    padding-right: clamp(44px, 8vw, 160px);
    padding-left: clamp(44px, 8vw, 160px);
  }

  .contact-page .contact-hero-inner {
    width: 100%;
    grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.75fr);
    gap: clamp(70px, 9vw, 190px);
  }

  .contact-page .contact-details dl,
  .contact-page .contact-request-inner {
    width: 100%;
  }

  .contact-page .contact-faq {
    width: 100%;
    padding-right: clamp(44px, 8vw, 160px);
    padding-left: clamp(44px, 8vw, 160px);
  }
}

/* Bring the complete platform message into the first evidence viewport so
   the transition from explanation to proof never feels empty. */
.why-stack-intro {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(360px, 0.78fr);
  gap: clamp(48px, 9vw, 130px);
  min-height: min(720px, calc(100dvh - 48px));
  align-items: center;
  padding: 0 clamp(28px, 7vw, 112px) 54px;
}

.why-page .why-stack-heading {
  width: auto;
  margin: 0;
  padding: 0;
}

.why-layer-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 42px;
  border-top: 1px solid var(--why-line-strong);
}

.why-layer-flow > div {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  padding: 15px 14px 13px 0;
}

.why-layer-flow > div + div {
  padding-left: 14px;
  border-left: 1px solid var(--why-line);
}

.why-layer-flow strong {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.why-layer-flow span {
  margin-top: 23px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
}

.why-layer-flow small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.why-stack-intro-media {
  position: relative;
  height: min(500px, 56vh);
  margin: 0;
  overflow: hidden;
  border: 9px solid var(--white);
  background: var(--ink);
  box-shadow: 0 24px 60px rgba(49, 93, 148, 0.16);
}

.why-stack-intro-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.why-stack-intro-media figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: rgba(9, 24, 47, 0.82);
  color: #a8d2ff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.why-stack-intro-media figcaption strong {
  color: #7be0af;
  font-weight: 700;
}

@media (max-width: 780px) {
  .why-stack-intro {
    grid-template-columns: 1fr;
    gap: 38px;
    min-height: auto;
    padding: 0 24px 42px;
  }

  .why-stack-intro-media {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .why-layer-flow span {
    font-size: 13px;
  }

  .why-layer-flow small {
    font-size: 11px;
  }
}

/* Wide-screen pass: let the evidence overview use the full canvas instead of
   inheriting the narrower article width used by the card copy. */
@media (min-width: 781px) {
  .why-page .why-hero {
    padding-right: clamp(44px, 8vw, 160px);
    padding-left: clamp(44px, 8vw, 160px);
  }

  .why-page .why-hero-inner {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .why-page .why-hero-copy {
    max-width: 900px;
  }

  .why-stack-intro {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(480px, 0.82fr);
    gap: clamp(70px, 9vw, 190px);
    padding-right: clamp(44px, 8vw, 160px);
    padding-left: clamp(44px, 8vw, 160px);
  }

  .why-stack-intro-media {
    height: min(560px, 58vh);
  }

  .why-stack-card-inner {
    width: min(1400px, 100%);
  }
}

/* Why RackTrack — "How it works" steps and the evidence deck. Fresh,
   self-contained block (own class names) rather than reworking the older
   .why-stack-card rules above, which stay in the file unused but harmless. */
.why-steps-section {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px clamp(24px, 6vw, 112px) 110px;
  background: #ffffff;
  border-top: 1px solid var(--why-line);
  border-bottom: 1px solid var(--why-line);
  overflow: clip;
}

.why-steps-intro {
  width: min(760px, 100%);
  margin: 0 auto 56px;
  text-align: center;
}

.why-steps-intro h2 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  font-size: var(--h2-size);
  color: var(--ink);
}

.why-steps-intro > p:last-child {
  margin: 18px 0 0;
  color: var(--why-copy, var(--muted));
  font-size: var(--lede-size);
  line-height: var(--lede-leading);
}

.why-steps {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
  perspective: 1600px;
}

.why-step-card {
  position: relative;
  padding: 28px 26px 32px;
  background: var(--why-panel, #fff);
  border: 1px solid var(--why-line, rgba(16, 32, 51, 0.15));
  border-radius: var(--radius-md);
  box-shadow: 0 20px 46px rgba(16, 32, 51, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
  will-change: transform;
}

.why-step-card:hover {
  box-shadow: 0 34px 70px rgba(16, 32, 51, 0.16);
}

.why-step-number {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
}

.why-step-media {
  margin: 16px 0 20px;
  height: 168px;
  overflow: hidden;
  border-radius: 12px;
}

.why-step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-step-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.why-step-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Evidence deck: five cards held as a real stack in 3D space — front card
   raised and legible, the rest fanned out and faded behind it. */
.why-deck {
  width: min(1120px, 100%);
  margin: 78px auto 0;
}

.why-deck-stage {
  position: relative;
  height: 460px;
  perspective: 1800px;
}

.why-deck-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  background: var(--why-panel, #fff);
  border: 1px solid var(--why-line, rgba(16, 32, 51, 0.15));
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transform: translate3d(calc(var(--pos, 0) * 44px), calc(var(--depth, 0) * 14px), calc(var(--depth, 0) * -110px)) rotate(calc(var(--pos, 0) * 3.4deg));
  filter: blur(calc(var(--depth, 0) * 1.6px));
  opacity: calc(1 - var(--depth, 0) * 0.24);
  z-index: calc(10 - var(--depth, 0));
  box-shadow: 0 30px 60px rgba(16, 32, 51, 0.14);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease;
  pointer-events: none;
}

.why-deck-card.is-front {
  pointer-events: auto;
  cursor: default;
  box-shadow: 0 46px 100px rgba(16, 32, 51, 0.24);
}

/* Cards behind the front one were only blurred (filter: blur on the whole
   card), which isn't enough to stop their copy text from reading through
   and visually overlapping the front card's own text. Hide the copy on
   every card except the front one — the stack still shows a blurred photo
   peeking out behind it, just no more double-exposed text. */
.why-deck-card:not(.is-front) .why-deck-copy {
  opacity: 0;
}

.why-deck-media {
  margin: 0;
  height: 100%;
  min-height: 0;
}

.why-deck-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.why-deck-copy {
  padding: clamp(28px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.why-deck-copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.why-deck-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.why-deck-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.why-deck-controls button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--why-line-strong, rgba(16, 32, 51, 0.28));
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.why-deck-controls button:hover,
.why-deck-controls button:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.why-deck-counter {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

@media (max-width: 980px) {
  .why-steps {
    grid-template-columns: 1fr;
  }

  .why-step-card {
    transform: none !important;
  }

  /* Established mobile pattern: plain stacked static cards instead of
     compressing the 3D depth-stack. */
  .why-deck-stage {
    height: auto;
    perspective: none;
  }

  .why-deck-card {
    position: static;
    display: block;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: 0 16px 40px rgba(16, 32, 51, 0.12) !important;
    margin-bottom: 20px;
    pointer-events: auto !important;
    cursor: default;
  }

  .why-deck-media {
    height: 220px;
  }

  .why-deck-controls {
    display: none;
  }

  /* Cards stack sequentially in normal flow here instead of overlapping
     absolutely, so the anti-double-exposure rule that hides non-front
     copy (needed only when cards are stacked on top of each other) would
     otherwise leave a blank gap under every card but the first. */
  .why-deck-card:not(.is-front) .why-deck-copy {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .why-deck-card {
    grid-template-columns: 1fr;
  }
}

/* Scroll reveal — shared by every [data-reveal] element on the Why RackTrack
   page. Hidden a little below its resting position, animates in once when
   scrolled into view (see the IntersectionObserver in why-racktrack.js).
   Never applied to the hero: that content must be visible on load.
   Scoped to .why-page specifically — Solutions has its own pre-existing
   data-reveal attributes (unused, left over from an earlier build) on the
   rack-3D section; a page-wide selector here would have silently hidden
   them forever with no script to ever un-hide them. */
.why-page [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.8, 0.24, 1);
}

.why-page [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Evidence intro + compare slider: one photo, drag to reveal "unverified"
   (desaturated, amber = brand drift/warning color) sliding away to expose
   "verified" (the real photo, green = brand verified color) underneath. */
.why-evidence-intro {
  width: min(760px, 100%);
  margin: 0 auto 44px;
  padding: 0 clamp(24px, 6vw, 112px);
  text-align: center;
}

.why-evidence-intro h2 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  font-size: var(--h2-size);
  color: var(--ink);
}

.why-evidence-intro > p:last-child {
  margin: 18px 0 0;
  color: var(--why-copy, var(--muted));
  font-size: var(--lede-size);
  line-height: var(--lede-leading);
}

.why-compare {
  width: min(1120px, 100%);
  margin: 0 auto 64px;
  padding: 0 clamp(24px, 6vw, 112px);
}

/* Bridges the compare slider to the evidence deck below it — previously
   just blank space here once the redundant proof-strip was removed. */
.why-compare-caption {
  max-width: 46ch;
  margin: 76px auto 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: center;
}

.why-compare-frame {
  position: relative;
  height: min(480px, 56vh);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(16, 32, 51, 0.2);
  --reveal: 50%;
}

.why-compare-base {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.why-compare-overlay {
  position: absolute;
  inset: 0;
  /* Clipped away from the left as --reveal grows, so dragging the handle
     right uncovers more of the verified base photo underneath. */
  clip-path: inset(0 0 0 var(--reveal));
}

.why-compare-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.35) brightness(0.92);
}

.why-compare-tag {
  position: absolute;
  bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  color: #fff;
}

/* Tags sit near the edge of the frame that stays visible on their own side
   as the clip moves (verified is revealed from the left, unverified from
   the right), so neither label gets clipped away mid-drag. */
.why-compare-tag-before {
  right: 18px;
  background: rgba(217, 154, 43, 0.92);
}

.why-compare-tag-after {
  left: 18px;
  background: rgba(67, 184, 131, 0.92);
}

.why-compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  transform: translateX(-50%);
  width: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 32, 51, 0.15);
  pointer-events: none;
}

.why-compare-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--blue);
  box-shadow: 0 14px 30px rgba(16, 32, 51, 0.28);
}

/* Item 19: was a second, visible native range track sitting below the
   photo, on top of the on-image handle that already shows the same
   position — two bars for one control. The input stays (native range =
   free keyboard/touch/screen-reader support, see why-racktrack.js), it's
   just layered directly over the frame and made visually transparent, so
   only the on-image handle is ever seen. */
.why-compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}

.why-compare-range:focus-visible {
  opacity: 1;
  accent-color: var(--blue);
}

@media (max-width: 780px) {
  .why-compare-frame {
    height: 280px;
  }
}

.solutions-page .workflow-section {
  padding-block: 110px;
}

.solutions-page .workflow-heading {
  width: min(720px, calc(100% - 48px));
  display: block;
  margin: 0 auto clamp(40px, 5dvh, 60px);
  text-align: center;
}

.solutions-page .workflow-heading .eyebrow {
  margin-bottom: 10px;
}

.solutions-page .workflow-heading h2 {
  max-width: none;
  margin-inline: auto;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 0.95;
}

.solutions-page .workflow-heading .section-lede {
  margin-inline: auto;
  max-width: 52ch;
}

.solutions-page .workflow-heading::after {
  content: none;
}

/* Cards side by side in a horizontally-scrolling row, snapped to each
   card's edge, with the prev/next arrows flanking the row on either
   side — replaces the previous scroll-jacked 3D stack (a ~4200px pinned
   section computing per-frame transforms) with a plain, static card row. */
.solutions-page .surface-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(1260px, calc(100% - 64px));
  margin: 0 auto;
}

.solutions-page .surface-grid {
  --card-width: clamp(260px, 26vw, 330px);
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 12px;
  margin: -4px -4px 0;
  scrollbar-width: none;
}

.solutions-page .surface-grid::-webkit-scrollbar {
  display: none;
}

.solutions-page .surface-grid article {
  flex: 0 0 var(--card-width);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 1.55vw, 26px);
  border: 1px solid rgba(16, 32, 51, 0.12);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 20px 50px -30px rgba(36, 72, 118, 0.18);
}

.solutions-page .surface-visual {
  position: relative;
  height: 160px;
  margin: 0 0 20px;
  overflow: hidden;
  border-radius: 10px;
  background: #dfe8f4;
}

.solutions-page .surface-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(0.94);
}

.solutions-page .surface-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(16, 32, 51, 0.16);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.solutions-page .surface-arrow:hover:not(:disabled) {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
}

.solutions-page .surface-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.solutions-page .surface-grid article > span {
  display: block;
  margin-top: 4px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
}

.solutions-page .surface-grid h3 {
  max-width: 16ch;
  margin-top: 14px;
  margin-bottom: 10px;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.05;
  letter-spacing: 0;
}

.solutions-page .surface-grid p {
  max-width: 30ch;
  color: var(--copy-strong);
  font-size: clamp(14px, 0.96vw, 15px);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .solutions-page .workflow-heading h2 {
    font-size: 32px;
  }

  .solutions-page .surface-carousel {
    width: 100%;
    gap: 8px;
  }

  .solutions-page .surface-arrow {
    width: 36px;
    height: 36px;
  }

  .solutions-page .surface-grid {
    padding-block: 4px 12px;
  }
}

/* ============================================================
   Use-case detail pages (the six role subpages linked from the
   Use Cases hub): full-bleed photo hero, single-column editorial
   body with a sticky "other roles" rail, a full-bleed quote band,
   a numbered how-it-works list, and a closing photo + CTA.
   ============================================================ */
.case-detail-page { background: var(--cloud); color: var(--ink); }
.case-detail-page .site-nav a.is-current { color: var(--ink); }
.case-detail-page .site-header {
  background: rgba(247, 250, 255, .84);
  border-bottom-color: rgba(16, 32, 51, .1);
}

.cd-hero { position: relative; overflow: hidden; isolation: isolate; padding: var(--hero-pad-top) 0 var(--hero-pad-bottom); }
.cd-hero-media { position: absolute; inset: 0; z-index: -2; }
.cd-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.cd-hero-scrim { position: absolute; inset: 0; z-index: -1; background: rgba(6, 17, 39, .74); }
.cd-hero-inner { width: var(--container); margin-inline: auto; }
.cd-back { display: inline-flex; align-items: center; gap: 8px; color: #9dc0ff; font: 700 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.cd-back:hover { color: var(--white); }
.cd-hero-inner h1 { margin: 26px 0 22px; max-width: 20ch; color: var(--white); font-family: var(--font-display); font-weight: var(--h1-weight); font-size: var(--h1-size); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); }
.cd-hero-lede { max-width: 62ch; color: rgba(255, 255, 255, .8); font-size: 18px; line-height: 1.55; }

.cd-article { padding: 90px 0 0; }
.cd-layout { width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 64px; }
.cd-layout-solo { grid-template-columns: minmax(0, 1fr); }
.cd-body > * { max-width: 720px; }
.cd-body p { margin: 14px 0 0; max-width: 66ch; color: var(--copy-strong); font-size: 18px; line-height: 1.7; }
.cd-body h2 { max-width: 24ch; margin: 0; font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -.03em; color: var(--ink); }
.cd-block:not(:first-child) { margin-top: 44px; padding-top: 38px; border-top: 1px solid rgba(16, 32, 51, .12); }
.cd-block:first-child { padding-top: 4px; }

.cd-fig { margin: 38px auto 0; width: var(--container); }
.cd-fig img { display: block; width: 100%; height: auto; }
.cd-fig figcaption { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(16, 32, 51, .12); max-width: 720px; color: var(--muted); font-size: 14px; line-height: 1.55; }

.cd-scenario { background: #f5f7fb; padding: 30px 32px 34px; border-radius: var(--radius-md); margin-top: 44px; border-top: 0; }
.cd-scenario p { max-width: 60ch; }

.cd-aside { align-self: start; position: sticky; top: 110px; padding-top: 10px; }
.cd-aside ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(16, 32, 51, .12); }
.cd-aside li { border-bottom: 1px solid rgba(16, 32, 51, .12); }
.cd-aside a { display: block; padding: 13px 0; color: var(--copy-strong); font-size: 15px; line-height: 1.4; text-decoration: none; }
.cd-aside a:hover { color: var(--blue); }

.cd-steps { margin-top: 24px; border-top: 1px solid rgba(16, 32, 51, .12); }
.cd-steps li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 15px 0; border-bottom: 1px solid rgba(16, 32, 51, .12); }
.cd-steps li:last-child { border-bottom: 0; }
.cd-steps .v { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.012em; }
.cd-steps .t { font-size: 16px; line-height: 1.65; color: var(--copy-strong); }

.cd-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 34px; font: 700 14px var(--font-ui); color: var(--blue); text-decoration: none; }
.cd-more:hover { color: var(--royal); }
.cd-more span { display: inline-block; transition: transform .2s ease; }
.cd-more:hover span { transform: translateX(4px); }

.cd-band { position: relative; width: 100%; height: 320px; overflow: hidden; margin: 90px 0 0; }
.cd-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-band-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 17, 39, .82) 0%, rgba(6, 17, 39, .55) 55%, rgba(6, 17, 39, .22) 100%); }
.cd-band-cap { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: 40px; }
.cd-band-cap p { margin: 0; width: min(1180px, calc(100% - 72px)); margin-inline: auto; max-width: 26ch; color: var(--white); font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.16; letter-spacing: -.02em; }

.cd-close { position: relative; width: 100%; height: 320px; overflow: hidden; margin: 0; }
.cd-close img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-close figcaption { position: absolute; inset: 0; display: flex; align-items: flex-end; background: linear-gradient(to top, rgba(6, 17, 39, .6), transparent 55%); }
.cd-close figcaption p { margin: 0 0 40px; width: min(1180px, calc(100% - 72px)); margin-inline: auto; max-width: 24ch; color: var(--white); font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.16; letter-spacing: -.02em; }

.cd-cta { padding: 96px 0; background: #dfeafa; }
.cd-cta-inner { width: min(1180px, calc(100% - 72px)); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cd-cta-inner h2 { margin: 0; max-width: 15ch; font-family: var(--font-display); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -.04em; color: var(--ink); }

@media (max-width: 980px) {
  .cd-hero { padding: 120px 0 50px; }
  .cd-layout { grid-template-columns: 1fr; gap: 40px; }
  .cd-aside { position: static; }
  .cd-band, .cd-close { height: 240px; }
}
@media (max-width: 640px) {
  .cd-scenario { padding: 24px 20px 26px; }
  .cd-steps li { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; }
  .cd-cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Resources page — index-card catalog concept.
   Typography/paper-structure driven, no thumbnail images, so it
   reads distinct from every photo-driven card style elsewhere on
   the site (evidence cards, filmstrip, hero-rail, case heroes).
   ============================================================ */
.resources-page .site-nav a.is-current { color: var(--ink); }
.resources-page .site-nav a.is-current::after { transform: scaleX(1); }
.resources-page .site-header {
  background: rgba(247, 250, 255, .84);
  border-bottom-color: rgba(16, 32, 51, .1);
}

.rs-frame { width: var(--container); margin-inline: auto; }

.rs-hero { position: relative; padding: var(--hero-pad-top) 0 var(--hero-pad-bottom); overflow: hidden; isolation: isolate; }
.rs-hero-media { position: absolute; inset: 0; z-index: -2; }
.rs-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.rs-hero-scrim { position: absolute; inset: 0; z-index: -1; background: rgba(6, 17, 39, .72); }
.rs-hero-inner .eyebrow { margin: 0; color: #9dc0ff; }
.rs-hero-inner h1 { margin: 24px 0 26px; max-width: 24ch; font-family: var(--font-display); font-weight: var(--h1-weight); font-size: var(--h1-size); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); color: var(--white); }
.rs-hero-inner h1 em { color: #9dc0ff; font-style: normal; }
.rs-hero-lede { max-width: 58ch; color: rgba(255, 255, 255, .78); font-size: var(--lede-size); line-height: var(--lede-leading); }

.rs-featured { padding: 120px 0 120px; background: var(--cloud); }
.rs-featured-head { display: grid; gap: 20px 48px; margin-bottom: 44px; }
.rs-featured-head h2 { font-family: var(--font-display); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); margin: 0; max-width: 18ch; color: var(--ink); }
.rs-featured-head .eyebrow { margin: 0 0 14px; }
.rs-featured-head p { margin: 0; max-width: 60ch; color: var(--muted); font-size: var(--lede-size); line-height: var(--lede-leading); }
@media (min-width: 860px) {
  .rs-featured-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
}

/* Full-bleed featured-article card: photo + dark veil behind overlaid copy
   and a stat panel, matching the source project's editorial "feat" card. */
.rs-feat { position: relative; overflow: hidden; border-radius: 14px; background: #061127; box-shadow: 0 30px 60px -34px rgba(2, 9, 22, .6); }
.rs-feat > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.rs-feat-veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,17,39,.97) 0%, rgba(6,17,39,.9) 44%, rgba(6,17,39,.6) 100%); }
.rs-feat-in { position: relative; z-index: 1; padding: 32px 26px 34px; display: grid; gap: 30px; }
.rs-feat-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; margin: 0; border-radius: 999px; border: 1px solid rgba(138, 180, 255, .32); background: rgba(10, 26, 58, .5); font: 700 12px var(--font-mono); letter-spacing: .15em; text-transform: uppercase; color: #cfe0ff; }
.rs-feat-h { font-family: var(--font-display); font-size: clamp(27px, 3vw, 42px); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; color: var(--white); margin: 20px 0 0; max-width: 20ch; }
.rs-feat-h a { color: inherit; text-decoration: none; transition: color .2s ease; }
.rs-feat-h a:hover { color: #8ab4ff; }
.rs-feat-p { font-size: 18px; line-height: 1.6; color: #c3d2e8; margin: 18px 0 0; max-width: 54ch; }
.rs-feat-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 13px 22px; border-radius: 999px; background: var(--white); color: #061127; font: 500 16px var(--font-ui); text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.rs-feat-cta span { transition: transform .32s cubic-bezier(.2,.7,.3,1); display: inline-block; }
.rs-feat-cta:hover { background: #dbe6f5; transform: translateY(-2px); }
.rs-feat-cta:hover span { transform: translateX(5px); }
.rs-feat .rs-field-stat { border-color: rgba(138, 180, 255, .26); background: rgba(9, 23, 52, .62); }
.rs-feat .rs-stat-num { color: var(--white); font-size: clamp(52px, 5vw, 68px); font-weight: 700; }
.rs-feat .rs-field-stat p { color: #9fb0c9; }
.rs-feat .rs-field-stat hr { border-top-color: rgba(138, 180, 255, .2); }
.rs-feat .rs-stat-src { color: #7d93b5; }
@media (min-width: 920px) { .rs-feat-in { grid-template-columns: 1fr 300px; gap: 54px; align-items: center; padding: 56px 54px; } }

.rs-field-stat { align-self: start; border: 1px solid rgba(16, 32, 51, 0.15); padding: 26px 28px; display: flex; flex-direction: column; gap: 8px; }
.rs-stat-num { font-family: var(--font-display); font-size: 46px; font-weight: 800; letter-spacing: -0.03em; color: var(--blue); }
.rs-field-stat p { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.rs-field-stat hr { border: none; border-top: 1px solid rgba(16, 32, 51, 0.15); margin: 4px 0; }
.rs-stat-src { font: 700 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }

.rs-catalog { padding: 0 0 90px; background: var(--white); }
/* Section heads split heading-left / supporting-copy-right, the same recipe
   the featured head above uses, so both bands land on one column edge. */
.rs-catalog-head { display: grid; gap: 20px 48px; margin-bottom: 44px; }
.rs-catalog-head h2 { font-family: var(--font-display); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); margin: 0; max-width: 18ch; color: var(--ink); }
.rs-catalog-head p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.rs-catalog-head > div { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 860px) {
  .rs-catalog-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
  .rs-catalog-head > div { align-self: end; }
}

.rs-catalog-controls { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 32px; padding-bottom: 16px; border-bottom: 1px solid rgba(16, 32, 51, 0.2); }
.rs-drawer-tabs { display: flex; flex-wrap: wrap; gap: 8px 24px; }
/* Plain underlined text filters, not tabs — the active category is marked by
   a single hairline under the word so the control sits flat on the section
   rule instead of stacking a second chrome element on top of it. */
.rs-tab {
  appearance: none;
  background: none;
  cursor: pointer;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  font: 500 13px var(--font-ui);
  transition: color 150ms ease, border-color 150ms ease;
}
.rs-tab:hover { color: var(--ink); }
.rs-tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.rs-count { font: 500 11px var(--font-mono); letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }

.rs-index-list { display: flex; flex-direction: column; }
/* Each article is a full-width spread — photo one side, words the other,
   sides swapping on every other row so the library reads as a sequence
   rather than a list of thumbnails. */
.rs-index-card { display: grid; grid-template-columns: 1fr; align-items: center; gap: 20px; padding: 30px 0; border-bottom: 1px solid rgba(16, 32, 51, 0.12); }
.rs-index-card[hidden] { display: none; }
.rs-index-shot { position: relative; display: block; overflow: hidden; border-radius: 10px; background: #0a1730; aspect-ratio: 16 / 10; }
.rs-index-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform .8s cubic-bezier(.22, 1, .28, 1); }
.rs-index-card:hover .rs-index-shot img { transform: scale(1.12); }
.rs-index-tag { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 5px 10px; border-radius: 999px; background: rgba(6, 17, 39, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 500 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #cfe0ff; }
.rs-index-body { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.rs-index-body h3 { margin: 0; max-width: 30ch; font-family: var(--font-display); font-size: clamp(21px, 1.9vw, 26px); font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; }
.rs-index-body h3 a { color: var(--ink); text-decoration: none; transition: color .2s ease; }
.rs-index-body h3 a:hover { color: var(--blue); }
.rs-index-body p { margin: 0; max-width: 56ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.rs-index-link { display: inline-flex; align-items: baseline; gap: 6px; font: 500 16px var(--font-ui); color: var(--blue); text-decoration: none; }
.rs-index-link:hover { color: var(--royal); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 860px) {
  .rs-index-card { grid-template-columns: 44% 1fr; gap: 46px; padding: 38px 0; }
  .rs-index-card:nth-child(even) .rs-index-shot { order: 2; }
  .rs-index-card:nth-child(even) .rs-index-body { order: 1; }
}
/* The picture resolves out of a zoom and the words rise, both tied to scroll
   position rather than a timer — progressive enhancement, so browsers without
   scroll-driven animations just get the static row. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rs-index-shot img { animation: rsLibZoom linear both; animation-timeline: view(); animation-range: entry 0% cover 52%; }
    @keyframes rsLibZoom { from { transform: scale(1.2); } to { transform: scale(1.02); } }
    .rs-index-body { animation: rsLibRise linear both; animation-timeline: view(); animation-range: entry 4% entry 88%; }
    @keyframes rsLibRise { from { opacity: .2; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .rs-index-shot img { transform: none; transition: none; }
  .rs-index-card:hover .rs-index-shot img { transform: none; }
}
.rs-empty { padding: 40px 0; color: var(--muted); }

.rs-cta { margin-top: 0; padding: 96px 0; background: #dfeafa; }
.rs-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.rs-cta-inner .eyebrow { margin: 0; color: var(--blue); }
.rs-cta-inner h2 { margin: 16px 0 0; max-width: 18ch; font-family: var(--font-display); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); color: var(--ink); }
.rs-cta-inner h2 em { color: var(--blue); font-style: normal; }
.rs-cta-inner .button-primary { background: var(--blue); color: var(--white); flex: 0 0 auto; }

@media (max-width: 900px) {
  .rs-hero { padding: 120px 0 50px; }
  .rs-catalog-controls { align-items: flex-start; }
  .rs-cta { padding: 64px 0; }
  .rs-cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Article detail pages — one shared reading template for all 9
   Resources articles, ported from the source project's article
   layout: plain-band hero, full-width hero photo with a caption
   below (not overlaid), a single reading column with occasional
   full-bleed photos breaking out of it, and a related-articles list.
   ============================================================ */
.article-page .site-nav a.is-current { color: var(--ink); }
.article-page .site-nav a.is-current::after { transform: scaleX(1); }

.art-hero { padding: var(--hero-pad-top) 0 var(--hero-pad-bottom); background: var(--cloud); }
.art-back { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font: 700 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.art-back:hover { color: var(--royal); }
.art-title { margin: 22px 0 0; max-width: 20ch; font-family: var(--font-display); font-weight: var(--h1-weight); font-size: var(--h1-size); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); color: var(--ink); }
.art-standfirst { margin: 22px 0 0; max-width: 62ch; color: var(--muted); font-size: 18px; line-height: 1.5; }

.art-hero-fig { margin: 0; }
.art-hero-fig img { display: block; width: 100%; aspect-ratio: 2400 / 1080; object-fit: cover; }
.art-capcol { width: min(760px, calc(100% - 72px)); margin-inline: auto; padding: 16px 0 0; }
.art-capcol figcaption { color: var(--muted); font-size: 14px; line-height: 1.5; }

.art-body { padding: 56px 0 0; }
.art-col { width: min(760px, calc(100% - 72px)); margin-inline: auto; }
.art-lede { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.6; }
.art-brief { margin: 34px 0 0; padding: 24px 26px; background: var(--mist); border-left: 3px solid var(--blue); }
.art-brief ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.art-brief li { position: relative; padding-left: 22px; color: var(--copy-strong); font-size: 16px; line-height: 1.5; }
.art-brief li::before { content: "\2014"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

.art-sec { margin-top: 44px; }
.art-h2 { margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -.03em; color: var(--ink); }
.art-sec p { margin: 0; color: var(--copy-strong); font-size: 18px; line-height: 1.72; }

.art-quote { margin: 44px auto 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--blue); font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.32; letter-spacing: -.01em; color: var(--ink); }
.art-quote p { margin: 0; }

.art-fig { margin: 44px auto 0; width: min(760px, calc(100% - 72px)); }
.art-fig img { display: block; width: 100%; height: auto; }
.art-fig > figcaption { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(16, 32, 51, .12); color: var(--muted); font-size: 14px; line-height: 1.5; }
.art-fig.art-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.art-fig.art-bleed img { max-height: 460px; object-fit: cover; }
.art-fig.art-bleed .art-capcol { padding-top: 12px; }
.art-fig.art-bleed .art-capcol figcaption { padding-top: 11px; border-top: 1px solid rgba(16, 32, 51, .12); }

.art-more { margin: 60px auto 0; width: min(760px, calc(100% - 72px)); padding-top: 40px; border-top: 1px solid rgba(16, 32, 51, .14); }
.art-more-item { display: block; padding: 16px 0; border-bottom: 1px solid rgba(16, 32, 51, .12); text-decoration: none; }
.art-more-item:first-child { padding-top: 0; }
.art-more-kicker { display: block; margin-bottom: 6px; color: var(--blue); font: 700 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.art-more-title { display: block; color: var(--ink); font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.35; }
.art-more-item:hover .art-more-title { color: var(--blue); }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 700px) {
  .art-hero { padding: 120px 0 40px; }
  .art-fig.art-bleed img { max-height: 320px; }
}

/* ============================================================
   Trust & Security page (trust-security.html) — the "verification
   ledger" concept. No photography, no cards-with-shadow, no cabinet
   reader, no filmstrip, no spotlight/stamp/badge motifs — those all
   belong to other pages already. This page reads as a plain,
   confident document: hairline rules, monospace status tags, a
   scroll-progress rail with numbered nodes, and a click-through
   deployment spectrum. Fixed brand colors/fonts only.
   ============================================================ */

.trust-page { background: var(--cloud); }
.trust-page .site-nav a.is-current { color: var(--ink); }
.trust-page .site-nav a.is-current::after { transform: scaleX(1); }

.tsec-frame { width: var(--container); margin: 0 auto; }

/* --- Hero: headline + a live "posture readout" console panel --- */
.tsec-hero { padding: var(--hero-pad-top) 0 var(--hero-pad-bottom); }
/* Single centered column, matching .solutions-hero's composition. */
.tsec-hero-grid { display: block; }
.tsec-hero-copy { max-width: 1100px; margin: 0 auto; text-align: center; }
/* Same scale/weight as .solutions-hero h1 for visual parity between the two heroes. */
.tsec-hero-copy h1 { margin: 0 auto 34px; max-width: 850px; font-family: var(--font-display); font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); color: var(--ink); }
.tsec-hero-copy h1 em { font-style: normal; color: var(--blue); }
.tsec-h-line { display: block; overflow: hidden; }
.tsec-h-line span { display: block; will-change: transform; }
.tsec-hero-ctas .button-primary, .tsec-cta-actions .button-primary { display: inline-flex; }
.tsec-hero-lede { max-width: 100%; margin: 0 auto; color: var(--muted); font-size: var(--lede-size); line-height: var(--lede-leading); }
.tsec-hero-ctas { display: flex; align-items: center; justify-content: center; gap: 26px; margin: 30px 0 0; flex-wrap: wrap; }
.tsec-pills { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 0; padding: 0; }
.tsec-pills li { position: relative; padding-left: 16px; color: var(--copy-strong); font-size: 13.5px; font-weight: 550; }
.tsec-pills li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.tsec-pills-inline { margin: 22px 0 0; }

/* --- Body: sticky numbered rail (left) + document sections (right) --- */
.tsec-body { display: grid; grid-template-columns: 200px 1fr; gap: 80px; padding-bottom: 30px; }

.tsec-index { position: sticky; top: 150px; align-self: start; }
.tsec-index ol { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 34px; }
.tsec-index-rail { position: absolute; left: 15px; top: 15px; bottom: 15px; width: 2px; background: rgba(16, 32, 51, 0.12); }
.tsec-index-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: var(--blue); transition: height 120ms linear; }
.tsec-index li a { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; text-decoration: none; }
.tsec-index-dot { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(16, 32, 51, 0.18); background: var(--cloud); color: var(--muted); font: 700 12px var(--font-mono); transition: background 180ms ease, border-color 180ms ease, color 180ms ease; }
.tsec-index-label { color: var(--muted); font-size: 13.5px; font-weight: 550; transition: color 180ms ease, opacity 180ms ease; opacity: 0.7; }
.tsec-index li a:hover .tsec-index-label { opacity: 1; color: var(--ink); }
.tsec-index li a.is-active .tsec-index-dot { background: var(--blue); border-color: var(--blue); color: var(--white); }
.tsec-index li a.is-active .tsec-index-label { color: var(--ink); opacity: 1; }

.tsec-sections { display: flex; flex-direction: column; gap: 124px; padding-top: 10px; }
.tsec-section { scroll-margin-top: 130px; }
.tsec-section h2 { margin: 0 0 20px; max-width: 22ch; font-family: var(--font-display); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); color: var(--ink); }
.tsec-section-lede { max-width: 62ch; color: var(--muted); font-size: var(--lede-size); line-height: var(--lede-leading); margin: 0 0 48px; }

/* Security Posture — control ledger rows, no boxes/shadows. Each row is
   physically covered by a solid bar that sweeps away on scroll, like a
   redacted line being declassified — the page's one signature motion,
   reused (not duplicated) on Defensible Innovation below for cohesion. */
.tsec-ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(16, 32, 51, 0.12); }
.tsec-ledger-row { position: relative; overflow: hidden; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 22px; padding: 20px 0; border-bottom: 1px solid rgba(16, 32, 51, 0.12); opacity: 0; transform: translateY(22px); transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); }
.tsec-ledger-row.is-in { opacity: 1; transform: translateY(0); }
.tsec-reveal-bar { transition: transform 700ms cubic-bezier(.65,0,.35,1); }
.tsec-ledger-row.is-in .tsec-reveal-bar, .tsec-filings li.is-in .tsec-reveal-bar { transform: scaleX(0); }
.tsec-reveal-bar { position: absolute; inset: 0; background: var(--ink); transform-origin: right center; pointer-events: none; }
.tsec-ledger-num { font: 700 13px var(--font-mono); color: var(--muted); }
.tsec-ledger-name { margin: 0 0 4px; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
.tsec-ledger-desc { margin: 0; max-width: 58ch; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.tsec-status { display: inline-flex; align-items: center; gap: 8px; font: 700 11px var(--font-mono); letter-spacing: 0.05em; white-space: nowrap; }
.tsec-status i { width: 7px; height: 7px; border-radius: 50%; }
.tsec-status-ok { color: var(--verified); }
.tsec-status-ok i { background: var(--verified); }
.tsec-status-pending { color: var(--amber); }
.tsec-status-pending i { background: var(--amber); }

/* Data Handling — connected-node flow diagram. The connecting line is a real
   SVG path that draws itself as you scroll (stroke-dashoffset via GSAP
   ScrollTrigger scrub) instead of a static CSS rule, and each node fills
   solid the moment the drawing line reaches it — the diagram visibly acts
   out "data flowing through your tenant" rather than just sitting there. */
.tsec-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 30px; }
.tsec-flow-svg { position: absolute; left: calc(12.5% + 20px); right: calc(12.5% + 20px); top: 19px; width: calc(100% - 25% - 40px); height: 2px; overflow: visible; }
.tsec-flow-svg line { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; }
.tsec-flow-node { position: relative; text-align: center; padding: 0 12px; opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); }
.tsec-flow-node.is-in { opacity: 1; transform: translateY(0); }
.tsec-flow-num { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); border: 2px solid var(--blue); color: var(--blue); font: 700 15px var(--font-mono); margin-bottom: 14px; transition: background 260ms ease, color 260ms ease; }
.tsec-flow-node.is-lit .tsec-flow-num { background: var(--blue); color: var(--white); }
.tsec-flow-label { margin: 0 0 4px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.tsec-flow-caption { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }

.tsec-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 46px; border-top: 1px solid rgba(16, 32, 51, 0.12); }
.tsec-action { display: flex; gap: 14px; padding: 24px 22px 24px 0; border-right: 1px solid rgba(16, 32, 51, 0.12); }
.tsec-action:last-child { border-right: none; padding-right: 0; }
.tsec-action:not(:first-child) { padding-left: 22px; }
.tsec-action svg { flex: none; width: 22px; height: 22px; color: var(--blue); margin-top: 2px; }
.tsec-action p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.tsec-action p b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }

.tsec-footnote { display: flex; align-items: center; gap: 8px; margin: 30px 0 0; color: var(--muted); font: 600 12.5px var(--font-mono); letter-spacing: 0.02em; }
.tsec-footnote svg { color: var(--blue); }

/* Deployment Options — click-through spectrum selector */
.tsec-spectrum-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; padding-top: 6px; }
.tsec-spectrum-track::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 15px; height: 2px; background: rgba(16, 32, 51, 0.14); }
.tsec-spectrum-fill { position: absolute; left: 12.5%; top: 15px; height: 2px; width: 0%; background: var(--blue); transition: width 260ms ease; }
.tsec-spectrum-stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.tsec-spectrum-stop i { width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 2px solid rgba(16, 32, 51, 0.28); transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.tsec-spectrum-stop em { font-style: normal; color: var(--muted); font-size: 13.5px; font-weight: 550; text-align: center; max-width: 15ch; transition: color 180ms ease; }
.tsec-spectrum-stop:hover i { border-color: var(--blue); }
.tsec-spectrum-stop.is-active i { background: var(--blue); border-color: var(--blue); transform: scale(1.15); }
.tsec-spectrum-stop.is-active em { color: var(--ink); font-weight: 700; }
.tsec-spectrum-ends { display: flex; justify-content: space-between; margin: 16px 0 0; color: var(--muted); font: 600 11px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tsec-spectrum-detail { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(16, 32, 51, 0.12); min-height: 60px; }
.tsec-spectrum-detail p { display: none; margin: 0; max-width: 62ch; color: var(--muted); font-size: 16px; line-height: 1.6; }
.tsec-spectrum-detail p.is-active { display: block; }
.tsec-spectrum-detail p b { color: var(--ink); font-family: var(--font-display); }

.tsec-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 46px; padding: 22px 26px; border-radius: var(--radius-sm); background: var(--mist); flex-wrap: wrap; }
.tsec-banner p { margin: 0; max-width: 50ch; color: var(--copy-strong); font-size: 14.5px; line-height: 1.5; }
.tsec-banner a { flex: none; color: var(--blue); font-weight: 700; font-size: 14px; text-decoration: none; }
.tsec-banner a:hover { color: var(--royal); }

/* Defensible Innovation — plain numbered filings */
.tsec-filings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.tsec-filings li { position: relative; overflow: hidden; display: grid; grid-template-columns: 40px 1fr; gap: 22px; padding: 24px 0; border-top: 1px solid rgba(16, 32, 51, 0.12); opacity: 0; transform: translateY(22px); transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); }
.tsec-filings li:last-child { border-bottom: 1px solid rgba(16, 32, 51, 0.12); }
.tsec-filings li.is-in { opacity: 1; transform: translateY(0); }
.tsec-filing-num { font-family: var(--font-display); font-style: italic; font-size: 20px; font-weight: 700; color: var(--blue); }
.tsec-filing-name { margin: 0 0 6px; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.tsec-filing-desc { margin: 0; max-width: 66ch; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.tsec-filing-ref { margin: 18px 0 0; color: var(--muted); font: 600 12px var(--font-mono); letter-spacing: 0.02em; }

/* Photographic exhibits — plain captioned figures like a formal report's
   evidence photos, not a card (no border/shadow/frame), consistent with
   the page's document/ledger language. Real rack photography, since the
   page was otherwise 100% typographic and the user asked for images to
   reinforce trust. */
.tsec-figure { margin: 80px 0 0; opacity: 0; transform: translateY(26px); transition: opacity 750ms cubic-bezier(.16,1,.3,1), transform 750ms cubic-bezier(.16,1,.3,1); }
.tsec-figure.is-in { opacity: 1; transform: translateY(0); }
.tsec-figure img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.tsec-figure figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.tsec-figure-tag { flex: none; color: var(--blue); font: 700 11px var(--font-mono); letter-spacing: 0.06em; }
.tsec-figure-caption { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.tsec-hero-figure { margin: 0 auto 100px; }
.tsec-hero-figure img { aspect-ratio: 21 / 8; }

/* Final CTA — asymmetric band, not the centered pattern other pages use */
.tsec-cta { margin-top: 64px; padding: 120px 0; background: #dfeafa; }
.tsec-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.tsec-cta-inner h2 { margin: 14px 0 0; max-width: 14ch; font-family: var(--font-display); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); color: var(--ink); }
.tsec-cta-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .tsec-hero { padding: 130px 0 60px; }
  .tsec-body { grid-template-columns: 1fr; gap: 40px; }
  .tsec-index { position: static; padding-bottom: 20px; border-bottom: 1px solid rgba(16, 32, 51, 0.14); }
  .tsec-index ol { flex-direction: row; flex-wrap: wrap; gap: 18px 26px; }
  .tsec-index-rail { display: none; }
  .tsec-index-dot { width: 26px; height: 26px; font-size: 10.5px; }
  .tsec-sections { gap: 100px; }
  .tsec-flow { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .tsec-flow-svg { display: none; }
  .tsec-actions { grid-template-columns: 1fr; }
  .tsec-action { border-right: none !important; padding: 20px 0 !important; border-bottom: 1px solid rgba(16, 32, 51, 0.12); }
  .tsec-action:last-child { border-bottom: none; }
  .tsec-spectrum-track { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .tsec-spectrum-track::before, .tsec-spectrum-fill { display: none; }
  .tsec-cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   About Us page (about-us.html) — "field journal" concept. Editorial
   asymmetric hero, a connected process rail, and a founder-narrative
   story spine (a continuous vertical line that draws itself as you
   scroll, with alternating text/photo beats) — no ledger rows, no
   cabinet reader, no filmstrip, no numbered node-dial. No investor/
   backer logo wall: there's no real logo to show, and a placeholder
   or invented one would be a fabricated trust signal, so it's omitted
   rather than faked. Fixed brand colors/fonts only.
   ============================================================ */

.about-page { background: var(--cloud); }
.about-page .site-nav a.is-current { color: var(--ink); }

.ab-frame { width: var(--container); margin: 0 auto; }
.ab-kicker { margin: 0 0 14px; color: var(--blue); font: 700 11px var(--font-mono); letter-spacing: 0.13em; text-transform: uppercase; }
.ab-h2 { margin: 0 0 18px; max-width: 20ch; font-family: var(--font-display); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); color: var(--ink); }
.ab-section-lede { max-width: 62ch; color: var(--muted); font-size: var(--lede-size); line-height: var(--lede-leading); margin: 0 0 48px; }
.ab-link { color: var(--blue); font-weight: 600; font-size: 14px; text-decoration: none; }
.ab-link:hover { color: var(--royal); }
.ab-pills { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 0; padding: 0; }
.ab-pills li { position: relative; padding-left: 16px; color: var(--copy-strong); font-size: 13.5px; font-weight: 550; }
.ab-pills li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

/* Hero — asymmetric split, editorial pull-quote instead of proof stats */
.ab-hero { padding: var(--hero-pad-top) 0 var(--hero-pad-bottom); }
.ab-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 6vw; align-items: center; }
.ab-h-line { overflow: hidden; margin: 18px 0 30px; }
.ab-h-line span { display: block; font-family: var(--font-display); font-weight: var(--h1-weight); font-size: var(--h1-size); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); color: var(--ink); }
.ab-pull-quote { margin: 0 0 26px; padding-left: 22px; border-left: 3px solid var(--blue); opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); }
.ab-pull-quote.is-in { opacity: 1; transform: translateY(0); }
.ab-pull-quote p { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.ab-hero-lede { max-width: 50ch; color: var(--muted); font-size: var(--lede-size); line-height: var(--lede-leading); margin: 0 0 22px; }
.ab-hero-figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); }
.ab-hero-figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* What RackTrack Does — connected process rail, not equal boxed cards */
.ab-does { padding: 40px 0 120px; }
.ab-process { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(16, 32, 51, 0.14); }
.ab-process-step { padding: 26px 22px 0 0; border-right: 1px solid rgba(16, 32, 51, 0.14); opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); }
.ab-process-step.is-in { opacity: 1; transform: translateY(0); }
.ab-process-step:last-child { border-right: none; }
.ab-process-step:not(:first-child) { padding-left: 22px; }
.ab-process-stage { display: block; margin-bottom: 10px; color: var(--blue); font: 700 12px var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.ab-process-step p { margin: 0; max-width: 22ch; font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ink); }

/* Founder Narrative — a story spine that draws itself down the page as
   you scroll, alternating text-only and text+photo beats */
.ab-founder { padding: 0 0 120px; }
.ab-spine-wrap { position: relative; padding-left: 46px; display: flex; flex-direction: column; gap: 90px; }
.ab-spine-svg { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; height: calc(100% - 12px); overflow: visible; color: rgba(16, 32, 51, 0.16); }
.ab-spine-svg line { stroke: currentColor; stroke-width: 2; }
.ab-spine-svg .ab-spine-progress { stroke: var(--blue); stroke-dasharray: 100; stroke-dashoffset: 100; }
.ab-beat { position: relative; opacity: 0; transform: translateY(22px); transition: opacity 750ms cubic-bezier(.16,1,.3,1), transform 750ms cubic-bezier(.16,1,.3,1); }
.ab-beat.is-in { opacity: 1; transform: translateY(0); }
.ab-beat::before { content: ""; position: absolute; left: -46px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--cloud); border: 2px solid rgba(16, 32, 51, 0.28); transition: background 260ms ease, border-color 260ms ease; }
.ab-beat.is-in::before { background: var(--blue); border-color: var(--blue); }
.ab-beat-label { margin: 0 0 12px; color: var(--blue); font: 700 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.ab-beat-copy p:not(.ab-beat-label) { margin: 0; max-width: 62ch; color: var(--copy-strong); font-size: 17px; line-height: 1.65; }
.ab-beat-media { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 5vw; align-items: center; }
.ab-beat-media-left { grid-template-columns: 0.9fr 1.1fr; }
.ab-beat-media-left .ab-beat-figure { order: -1; }
.ab-beat-figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; }
.ab-beat-figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* The Company — icon + fact bento, asymmetric 3-then-2 rhythm like the
   legacy about page the user pointed to. Not the white-border-shadow
   card already used elsewhere on this site (`.original-schematic`,
   `.hero-rail`, etc.) — a shared hairline mesh instead, so the "bento"
   feel comes from the grid rhythm and the icons, not a repeated card. */
.ab-facts { padding: 0 0 120px; }
.ab-facts-grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid rgba(16, 32, 51, 0.14); border-left: 1px solid rgba(16, 32, 51, 0.14); }
.ab-fact { grid-column: span 2; padding: 34px 30px 30px; border-right: 1px solid rgba(16, 32, 51, 0.14); border-bottom: 1px solid rgba(16, 32, 51, 0.14); opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); }
.ab-fact.is-in { opacity: 1; transform: translateY(0); }
.ab-fact-wide { grid-column: span 3; }
.ab-fact-icon { display: block; width: 34px; height: 34px; margin-bottom: 20px; color: var(--blue); }
.ab-fact-num { margin: 0 0 6px; font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.ab-fact-label { margin: 0 0 8px; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.ab-fact-wide .ab-fact-label { margin-top: 2px; }
.ab-fact-desc { margin: 0; max-width: 34ch; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* Why It Matters — plain display-number stats, hairline-divided, no cards */
.ab-matters { padding: 0 0 120px; }
.ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(16, 32, 51, 0.14); }
.ab-stat { padding: 30px 30px 0 0; border-right: 1px solid rgba(16, 32, 51, 0.14); opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1); }
.ab-stat.is-in { opacity: 1; transform: translateY(0); }
.ab-stat:last-child { border-right: none; }
.ab-stat:not(:first-child) { padding-left: 30px; }
.ab-stat-num { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(38px, 4.4vw, 58px); font-weight: 700; letter-spacing: -0.02em; color: var(--blue); font-variant-numeric: tabular-nums; }
.ab-stat-label { margin: 0 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); }
.ab-stat-desc { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* Mission CTA — full-bleed light-blue close, same #dfeafa band every
   other page's final CTA uses (Solutions/Why RackTrack/case pages all
   had a dark version of this fixed to light earlier in the project per
   the fixed "no dark dominant background" rule — not repeating that). */
.ab-mission { padding: 100px 0; background: #dfeafa; }
.ab-mission-inner { max-width: 720px; }
.ab-mission h2 { margin: 0 0 18px; font-family: var(--font-display); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); color: var(--ink); }
.ab-mission-lead { margin: 0 0 26px; max-width: 46ch; color: var(--copy-strong); font-size: 18px; line-height: 1.55; }
.ab-mission-pills { margin: 0 0 36px; }
.ab-mission-meta { margin: 30px 0 0; color: var(--muted); font: 600 12px var(--font-mono); letter-spacing: 0.02em; }

@media (max-width: 980px) {
  .ab-hero { padding: 130px 0 60px; }
  .ab-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ab-hero-figure { order: -1; }
  .ab-process { grid-template-columns: 1fr; }
  .ab-process-step { border-right: none !important; padding: 22px 0 !important; border-bottom: 1px solid rgba(16, 32, 51, 0.14); }
  .ab-process-step:last-child { border-bottom: none; }
  .ab-beat-media, .ab-beat-media-left { grid-template-columns: 1fr; gap: 22px; }
  .ab-beat-media-left .ab-beat-figure { order: 0; }
  .ab-stats { grid-template-columns: 1fr; }
  .ab-stat { border-right: none !important; padding: 22px 0 !important; border-bottom: 1px solid rgba(16, 32, 51, 0.14); }
  .ab-stat:last-child { border-bottom: none; }
  .ab-facts-grid { grid-template-columns: 1fr; border-left: none; }
  .ab-fact, .ab-fact-wide { grid-column: span 1; border-right: none; padding: 26px 0; }
  .ab-fact:last-child { border-bottom: none; }
}

/* ============================================================
   Cookie consent — site-wide, injected by js/cookie-consent.js.
   Floating card near the top, matching every other page's card/
   shadow language rather than a full-width bottom bar.
   ============================================================ */
.cookie-consent {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 700;
  width: min(480px, calc(100% - 32px));
  transform: translate(-50%, -12px);
  opacity: 0;
  padding: 20px 22px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(16, 32, 51, 0.1);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.cookie-consent.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.cookie-consent p {
  margin: 0 0 10px;
  color: var(--copy-strong);
  font-size: 13px;
  line-height: 1.5;
}

.cookie-consent p:last-of-type {
  margin-bottom: 16px;
}

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

.cookie-consent-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cookie-consent-settings {
  margin-right: auto;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent-decline,
.cookie-consent-accept {
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease;
}

.cookie-consent-decline {
  background: var(--cloud);
  color: var(--muted);
}

.cookie-consent-decline:hover {
  background: var(--steel);
}

.cookie-consent-accept {
  background: var(--blue);
  color: var(--white);
}

.cookie-consent-accept:hover {
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .cookie-consent {
    top: 12px;
    padding: 18px 18px 16px;
  }

  .cookie-consent-actions {
    justify-content: flex-start;
  }

  .cookie-consent-settings {
    width: 100%;
    margin: 0 0 4px;
  }
}