: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);
  /* Both roles resolve to Inter — headings and body copy are one typeface
     across every section of every page. They stay as two separate tokens
     because ~53 heading rules and ~10 body rules reference them by name;
     keeping the split means a future display/text divergence is a
     one-line change here rather than a sweep. Only --font-mono still
     differs: it dresses the small uppercase accent labels (eyebrows,
     "← ALL ARTICLES", counters), whose letter-spacing is drawn for a
     monospace face. No font-size anywhere was touched. */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe 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)));

  /* Top padding on every page's hero section, i.e. the gap between the
     header and the first line of content. The header sits in normal flow
     (sticky, not fixed/overlaid), so none of this is clearance for the bar
     — it is all deliberate whitespace, and at 150px it read as an empty
     band on the text heroes. Shared by all nine hero blocks so they stay
     in step; the full-height centred heroes (Solutions, Why, Use Cases)
     barely move, since their content is vertically centred rather than
     pinned to this padding. */
  --hero-pad-top: 56px;
  --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;
}

/* Inter — now the single family behind both --font-display and --font-ui,
   so headings and body share one typeface. Self-hosted like the others
   rather than pulled from the Google Fonts CDN: a webfont <link> to a
   third-party host is a request on every page load that the cookie/consent
   banner doesn't cover, and it would leave text swapping late on slow
   connections. Latin subset only (the same cut the CDN serves for
   U+0000-00FF plus latin-ext) — this site ships no Cyrillic or Greek copy.
   Variable 100-900, so every weight already in the stylesheet resolves
   from this one 48KB file with no synthetic bolding. */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

/* Form controls don't inherit font-family from their ancestors — the UA
   stylesheet sets its own, so every <button> on the site (and anything
   nested in one) rendered in Arial no matter what the page font was. It
   showed as the same class in two different faces depending on the tag:
   <a class="button-primary"> picked up the body font while
   <button class="button-primary"> on the contact page did not, and the
   Solutions rack controls' .rk-btn-t labels inherited Arial from their
   button parent.
   font-family only, deliberately NOT the `font: inherit` shorthand —
   that would also overwrite each control's own font-size and weight. */
button,
input,
select,
textarea {
  font-family: inherit;
}

html {
  scroll-behavior: smooth;
  /* Now that .site-header is sticky it covers the top of the viewport, so
     an in-page #anchor jump would land its target underneath the bar.
     Clears the tallest bar (82px on desktop) plus a little breathing
     room. */
  scroll-padding-top: 100px;
}

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 {
  /* Sticky, not fixed: sticky stays in flow, so it reserves its own space
     at the top of every page and nothing has to be padded down to clear
     it — a fixed header would slide under each page's first section and
     need a per-page offset. It sticks on every page from this one rule;
     no page-specific position override should reintroduce `relative`
     (that silently un-sticks it). Requires that no ancestor scroll
     container clips it — see the `overflow-x: clip` (never `hidden`) on
     .solutions-page / .use-cases-page for why those use clip. */
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  /* Glass, deliberately NOT a solid white bar: a low-alpha tint plus a
     backdrop blur, so page content stays visible (blurred) as it scrolls
     underneath. The tint is kept just high enough that the dark nav text
     still clears 4.5:1 when the bar is over a dark hero (case-detail,
     resources feature band) — dropping it to fully transparent makes the
     links unreadable there, and raising it back toward 0.85 turns it into
     the opaque white bar this replaced. Every page inherits this; the
     per-page header background overrides that used to exist (solutions,
     case-detail, resources, and the body[class] frosted rule) were
     removed so a single bar style holds sitewide. */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid rgba(16, 32, 51, 0.07);
  /* 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;
  /* Desktop only — the 980px and 640px breakpoints below override this
     padding entirely and separately hardcode --header-h from the
     (untouched) .nav-cta pill height, so shrinking this desktop value
     doesn't affect the mobile hamburger bar's height math. */
  padding: 14px 36px;
  margin: 0 auto;
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease;
}

/* Homepage only: the bar fades out while one of the scroll-jacked sections
   is pinned (the `is-sequencing` class homepage.js toggles for the hero
   scan, the story bridge, and the world pin), and fades back in over every
   ordinary section between them. Those pinned stretches are the immersive
   full-viewport moments — the nav is deliberately out of the way there and
   sticky everywhere else. */
body.is-sequencing .site-header {
  opacity: 0;
  transform: translateY(-12px);
}

/* An opacity-0 element still takes clicks and hover. That was harmless
   when this header was position:relative — by the time a section pinned,
   the bar had already scrolled out of the viewport, so there was nothing
   left to click. A sticky bar never leaves: without this it would park an
   invisible, fully interactive strip across the top of every animation,
   swallowing pointer events meant for the canvas and firing nav hover
   flyouts nobody can see. .site-header itself is already pointer-events:
   none, so only the three descendants that opt back in need silencing. */
body.is-sequencing .site-nav,
body.is-sequencing .nav-cta,
body.is-sequencing .nav-toggle-btn {
  pointer-events: none;
}

.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;
}

/* (The inner-page frosted/opaque header block that used to live here was
   removed — .site-header above now carries one sticky glass bar for every
   page, including the homepage and Use Cases.) */

/* 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: 28px;
  height: 28px;
  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);
  /* Was a hardcoded system stack that bypassed the font tokens entirely,
     so the "RackTrack" wordmark rendered in a different face from the nav
     links beside it — and on Windows vs macOS in different faces again.
     Now on the same token as the rest of the header. */
  font-family: var(--font-ui);
  font-size: 19px;
  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;
  /* Flexbox collapses a whitespace-only text node between flex items —
     unlike normal inline flow, the space in "Label <span>&rarr;</span>"
     disappears here without an explicit gap, jamming the arrow against
     the last word. Affects every button-primary that appends an arrow
     span (~20 pages), not just one. */
  gap: 8px;
  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 {
    /* Full-bleed, not the old inset calc(100% - 36px): now that the bar is
       sticky, an inset bar leaves an 18px gutter down each side through
       which the page visibly scrolls past the bar's edge. Edge-to-edge
       keeps one clean line across the top; the inset look is preserved by
       padding instead. */
    width: 100%;
    padding: 16px 56px 16px 20px;
    /* Measured height of the bar at this breakpoint: the 16px block
       padding above, twice, plus the tallest grid item. That's the 42px
       .nav-cta pill — NOT the 34px .brand-mark, which is what this was
       first (wrongly) derived from. The open menu panel is offset by
       exactly this so it starts below the bar instead of under it — see
       .site-nav's `top`. Re-measure if the pill's height or the header's
       block padding changes; too small and the panel's links slide up
       under the logo, too large and a gap opens between bar and panel. */
    --header-h: 74px;
    /* 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;
  }

  .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%;
    /* Inset from the header's padding-box edge rather than flush to it —
       the bar is full-bleed now, so right:0 put the burger (and the X it
       becomes) hard against the screen edge. The header's padding-right
       is sized to clear this 40px button plus this offset. */
    right: 12px;
    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;
    /* Starts BELOW the header bar, not at inset:0. The panel is a
       descendant of .site-header, which is a stacking context (z-index
       600 + isolation), so the panel's z-index 65 paints above the brand
       and the Sign In pill no matter how high the header's own z-index
       is — with inset:0 the panel covered the logo, and once the list was
       long enough to scroll its links slid up through that top strip and
       collided with the X. Offsetting by the bar's own height keeps the
       header a real, untouched bar and gives the panel its own scroll
       box beneath it. */
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 65;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 20px 24px 48px;
    background: rgba(247, 250, 255, 0.94);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
  }

  /* THE fix for the panel's overlapping-rows bug. This is a column flex
     container with a fixed height (inset: 0 == full viewport), so its
     children are flex-shrinkable by default. Expand either accordion and
     the rows' combined content exceeds the viewport, so every row gets
     squashed BELOW its content height instead of the panel scrolling —
     each row's text then spills out of its own squashed box and paints on
     top of the rows beneath it (the "Infrastructure & Data Center Leaders"
     over "Resources" collision). Locking every row to its natural height
     lets the total overflow the panel, which is what hands the scrolling
     to overflow-y: auto above. */
  .nav-toggle-input:checked ~ .site-nav > * {
    flex: 0 0 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;
    /* Same surface colour as the panel directly beneath it, so bar and
       panel read as one sheet. It can't reuse the bar's usual 40% glass:
       backdrop-filter is off here (see above), so a 40% tint would show
       the page behind it crisply and unblurred while the panel below is
       near-opaque — an obvious seam across the top. */
    background: rgba(247, 250, 255, 0.94) !important;
    border-bottom-color: transparent !important;
  }

  /* Freeze the page behind the open panel. Without this the document keeps
     scrolling under the fixed panel, so closing the menu drops you at a
     different scroll position than where you opened it. */
  body:has(.nav-toggle-input:checked) {
    overflow: hidden;
  }

  /* 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;
  }

  /* height: auto undoes the desktop `.nav-item > a { height: 100% }` rule,
     which is there to stretch the trigger across the desktop nav row. In
     the panel the .nav-item also contains the expanded accordion list, so
     a full-height trigger becomes a tall invisible tap target lying over
     every sub-link in it — tapping "Compliance & Audit Owners" would fire
     the "Use Cases" parent link instead. */
  .nav-toggle-input:checked ~ .site-nav .nav-item > a {
    height: auto;
    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%;
    /* min-width must be reset too, not just max-width: `body[class]
       .nav-dropdown` sets min-width: 300px for the desktop flyout, and at
       320-380px viewports that plus the panel's side padding and the 16px
       accordion indent pushes the list wider than the panel and triggers
       horizontal overflow. */
    min-width: 0;
    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. */
  /* Pinned to the top of the .nav-item, not vertically centred in it: once
     the accordion is open the .nav-item grows to include the whole
     sub-link list, so a top:50% chevron drifts down into the middle of
     the expanded list and reads as belonging to some random sub-link
     rather than to its own parent row. 7px centres the 40px button on the
     ~27px parent-link row that starts at the item's 14px top padding. */
  .nav-toggle-input:checked ~ .site-nav .nav-sub-toggle-btn {
    position: absolute;
    top: 7px;
    right: 0;
    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: 12px 58px 12px 14px;
    /* 12px block padding x2 + the 42px .nav-cta pill (still the tallest
       item here — .brand-mark drops to 24px at this breakpoint). */
    --header-h: 66px;
  }

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

  .brand {
    margin-left: 0;
  }

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

  .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-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-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;
    /* Same fix as .art-hero's mobile override — stale pre-token value. */
    padding-top: 44px;
    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);
}

/* The brief form and the FAQ are two independent top-level <section>s (kept
   that way deliberately — a shared test asserts main's direct children),
   but the reference design shows them as one shared row, not two stacked
   full-width bands. Grid-placing them into the same row on <main> gets the
   side-by-side look without merging the sections or adding a wrapper. */
.contact-page main#main {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.contact-page .contact-hero,
.contact-page .contact-details {
  grid-column: 1 / -1;
}

.contact-page .contact-request {
  grid-column: 1;
  background: var(--contact-surface);
}

.contact-page .contact-faq {
  grid-column: 2;
  padding-left: clamp(28px, 6vw, 90px);
  border-left: 1px solid var(--contact-line);
}

@media (max-width: 900px) {
  .contact-page main#main {
    grid-template-columns: 1fr;
  }

  .contact-page .contact-request,
  .contact-page .contact-faq {
    grid-column: 1;
  }

  .contact-page .contact-faq {
    padding-left: clamp(28px, 7vw, 112px);
    border-left: 0;
    border-top: 1px solid var(--contact-line);
  }
}


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

.contact-details dt,
.contact-form-panel legend,
.contact-form-panel label 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;
  /* Taller than the usual 780px cap — the hologram background's aspect
     ratio is much narrower than this section's, so at cover it renders
     far taller than 780px and needs real room or it crops hard into
     either the icon ring (top) or the hand (bottom). This still doesn't
     eliminate the crop entirely, just shrinks it a lot. */
  min-height: min(960px, 94dvh);
  display: grid;
  align-items: center;
  overflow: clip;
  padding: var(--hero-pad-top) clamp(28px, 7vw, 112px) var(--hero-pad-bottom);
  isolation: isolate;
}

/* The client-supplied visual is the whole hero's background now, not a
   boxed photo in a side column — it has a wide blank band built into its
   left half specifically so copy can sit over it with no scrim needed.
   background-size: cover matches the full-bleed treatment every other
   hero photo on the site uses (.rs-hero-media img, .art-hero-fig img) —
   the image fills the section edge-to-edge, cropping the excess instead
   of leaving letterboxed space around it. */
.contact-hero-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--contact-surface);
  background-image: url("../assets/contact/media-contact-hologram.png");
  background-repeat: no-repeat;
  /* cover, not a smaller percentage — anything under 100% leaves visible
     gaps of plain background around the image instead of a seamless
     full-bleed photo. With the section now much taller (see .contact-hero),
     the remaining crop is small enough that a near-centered position works
     for both ends — full "top" was only needed at the old 780px height,
     where it saved the icon ring by sacrificing the whole hand instead.
     Horizontal stays pulled in from true "right" so the rightmost icons
     keep clearance from the viewport edge instead of sitting flush against it. */
  background-size: cover;
  background-position: 94% 30%;
}

.contact-hero-inner {
  width: min(var(--container-max), 100%);
  margin: 0;
}

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

.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-details {
  padding: 56px clamp(28px, 7vw, 112px) 0;
  background: var(--contact-surface);
}

/* Four independent bordered cards, not the old full-bleed ledger row —
   each stands on its own so the icon + label + value + description reads
   as a distinct fact rather than a column in a shared table. */
.contact-details dl {
  width: min(var(--container-max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.contact-details dl > div {
  min-height: 170px;
  padding: 24px 22px;
  border: 1px solid var(--contact-line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.contact-card-icon {
  display: inline-flex;
  margin-bottom: 16px;
  color: var(--ink);
}

.contact-details dd {
  margin: 10px 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: 64px clamp(28px, 6vw, 90px) 90px;
  background: var(--contact-mist);
}

.contact-request-inner {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  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-form-panel {
  max-width: 560px;
  padding: 0;
  background: none;
  box-shadow: none;
}

.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: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 64px clamp(28px, 6vw, 90px) 90px;
}

.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;
}


.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);
  /* clip, not hidden: `overflow-x: hidden` on the page root turns <body>
     into a scroll container, which stops .site-header's position:sticky
     from ever sticking. `clip` suppresses the same horizontal overflow
     without creating that scroll container. */
  overflow-x: clip;
}
.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; }
/* Was calc(100dvh - 80px) — on a typical desktop viewport that's ~1000px,
   far taller than the short centered headline/lede/button need. With
   align-items:center that left a large empty band below the button before
   the section even ended, on top of the section's own bottom padding and
   .process-section's top padding — reading as one huge gap. Sized like
   the site's other hero sections instead. */
.solutions-hero { min-height: min(720px, 92dvh); 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: 90px;
}

.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;
  /* Was clamp(28px, 7vw, 112px), copied from .why-cta on a different page.
     Every other section on THIS page aligns via .section-frame (centered
     at var(--container)) — the clamp value doesn't match that formula at
     most viewport widths, so this CTA's content sat at a different left
     margin than the hero/body content above it. Same formula as
     .section-frame instead, applied as padding since this section has no
     inner frame wrapper to center. */
  padding: 90px calc((100% - var(--container)) / 2);
  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;
    /* Same width formula .solutions-page .section-frame uses at this
       range (min(100% - 42px, 720px)), so the CTA's left edge keeps
       matching the frame's instead of the plain 24px this used to be. */
    padding: 78px calc((100% - min(100% - 42px, 720px)) / 2) 88px;
  }
}
.solutions-cta::before { /* ponytail: grid overlay removed — item 10 */ display: none; }
.solutions-cta > * { position: relative; }
.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: 80px 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: 56px; 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;
  /* Was clamp(28px, 7vw, 112px), borrowed from .why-cta on a different
     page. This page's own content (.uc-roles) aligns via width:
     var(--container); margin:auto instead — same formula here so the CTA
     shares that same left margin rather than why-racktrack's. */
  padding: 90px calc((100% - var(--container)) / 2);
  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:44px 24px 66px; } /* stale pre--hero-pad-top-token value, see .art-hero */ .uc-opening h1 { max-width:13ch; } .uc-close { width:calc(100% - 60px); margin: 0 auto; } /* .uc-roles keeps margin:auto from its base rule at this width; .uc-close had no base margin at all, so it sat flush-left instead of centered like the rest of the page */ .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 0; } /* horizontal was 24px, double-insetting on top of the already-centered width:calc(100%-60px) box from the 980px rule — .uc-roles has zero horizontal padding at every width and relies on width+margin alone, same here now */ .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-details dl {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .contact-hero {
    min-height: auto;
    /* Same fix as .art-hero's mobile override: this predates the desktop
       --hero-pad-top token dropping 150px -> 56px and never got trimmed
       to match, leaving it the biggest nav-to-hero gap on the site. */
    padding: 44px 22px 66px;
  }

  /* Full-bleed background photo has much less blank space to work with at
     this width — a plain surface-colored backdrop reads more reliably
     than a busy crop of the hologram graphic behind small body text. */
  .contact-hero-field {
    background-image: none;
  }

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

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

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

  .contact-details dl > div {
    min-height: auto;
    padding: 20px 22px;
  }

  .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;
  }
}



/* 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 {
    padding-right: clamp(44px, 8vw, 160px);
    padding-left: clamp(44px, 8vw, 160px);
  }

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

/* 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);
}

.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);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease,
    border-color 0.35s ease;
}

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

/* The lift that replaced the old cursor-following 3D tilt: one fixed end
   state instead of a rotation recomputed on every pointermove, so the card
   settles instead of wobbling under the cursor. The whole 3D rig the tilt
   needed went with it — .why-steps' perspective, and the card's
   transform-style/will-change.

   Split out of the :hover rule above and fully qualified because the scroll
   reveal at the bottom of this section owns these cards' transform too:
   `.why-page [data-reveal].is-visible { transform: none }` is (0,3,0) and
   sits later in the file, so a plain `.why-step-card:hover` (0,2,0) loses
   both tiebreaks and the lift silently never renders. Matching on
   .is-visible also scopes the lift to cards that have finished arriving —
   one still animating in keeps the reveal's own translateY(28px) instead
   of being yanked to its resting position by a hover. */
.why-page [data-reveal].is-visible.why-step-card:hover {
  transform: translateY(-6px);
}

.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;
}

@media (max-width: 980px) {
  .why-steps {
    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: 80px;
}

.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); }

.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; }

/* Bottom padding restores the gap before .cd-cta that the removed .cd-close
   figure used to provide — without it, the "Business impact" text butts
   straight into the CTA band's colored background. */
.cd-article { padding: 90px 0 72px; }
.cd-layout { width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 64px; }
/* Was implicitly separated from the layout above it by the .cd-band figure
   (90px top margin) that used to sit between them; now that it's gone,
   this needs its own top spacing so it doesn't butt against the previous
   layout's last section. */
.cd-layout-solo { grid-template-columns: minmax(0, 1fr); margin-top: 72px; }
.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; }

/* margin-left was auto (centering), but .cd-body's text has no such
   centering — both share the same 720px max-width from .cd-body > *, so
   the figure floated right of the flush-left paragraphs above/below it. */
.cd-fig { margin: 38px 0 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-cta { padding: 96px 0; background: #dfeafa; }
/* Was capped at 1180px while .cd-layout (the article column above it) uses
   --container (1240px) — both centered, so the narrower cap put the CTA
   heading 30px right of where the article's own left margin sits. */
.cd-cta-inner { width: var(--container); 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: 44px 0 50px; } /* stale pre--hero-pad-top-token value, see .art-hero */
  .cd-layout { grid-template-columns: 1fr; gap: 40px; }
  .cd-aside { position: static; }
}
@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); }

.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: 64px; 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: 44px 0 50px; } /* stale pre--hero-pad-top-token value, see .art-hero */
  .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); }
/* Article titles are full descriptive sentences, much longer than the
   marketing taglines --h1-size (up to 72px) was tuned for — at that size
   they wrap to 3-4 lines and swamp the hero. Own, smaller scale instead
   of the shared token. */
.art-title { margin: 22px 0 0; max-width: 26ch; font-family: var(--font-display); font-weight: var(--h1-weight); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; 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; }

/* Was full-bleed (implicit 100vw via the plain block flow) — now matches
   the same --container width/left-right margin as the title, body text,
   and CTA, so it no longer touches the browser edges on its own. */
.art-hero-fig { margin: 0 auto; width: var(--container); }
/* aspect-ratio 2400/1080 (2.2:1) made this fill nearly the full viewport
   height at typical desktop widths. Shorter ratio plus a hard max-height
   keeps it a banner, not a second hero. */
.art-hero-fig img { display: block; width: 100%; max-height: 480px; aspect-ratio: 2400 / 760; object-fit: cover; }
/* The reading column caps at 760px but must not re-center itself — .rs-frame
   (used by .art-hero and .rs-cta) centers at the wider --container instead,
   and independently centering two different widths gives them different
   left edges. Anchoring this column's left margin to the same formula
   .rs-frame uses keeps every element's left edge identical top to bottom,
   with the narrower column just carrying extra whitespace on its right. */
/* .art-hero-fig (its only remaining parent) is now itself width: var(--container)
   and correctly positioned, so "100%" here already means the right thing —
   no separate frame-offset math needed, unlike when the parent was full-bleed. */
.art-capcol { width: min(760px, 100%); margin: 0; 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, var(--container)); margin: 0 auto 0 calc((100% - var(--container)) / 2); }
.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; }

/* Always a child of .art-col (never a standalone full-bleed image anymore),
   so it just fills the column's own width — no independent frame margin
   needed, unlike .art-col/.art-capcol which sit directly under .art-body
   with no width-constraining ancestor of their own. */
.art-fig { margin: 44px 0 0; width: 100%; }
/* Same max-height cap as .art-hero-fig img, so in-body photos read at a
   consistent size with the hero photo instead of whatever height their
   own natural aspect ratio happens to produce at column width. */
.art-fig img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: cover; }
.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; }

/* Always a child of .art-col — same reasoning as .art-fig above. */
.art-more { margin: 60px 0 0; width: 100%; 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) {
  /* Was 120px on top, a phone-specific bump over the old 150px desktop
     value. With the token down to 56px that override became the largest
     gap on the site instead of the smallest — trimmed to match. */
  .art-hero { padding: 40px 0 40px; }
}

/* ============================================================
   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 { 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 — three filing cards, flat light-blue tiles rather
   than the ledger-row language the rest of this page uses, so the patents
   read as distinct claims sitting side by side instead of one continuous list. */
.tsec-patent-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.tsec-patent-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--radius-md);
  background: var(--mist);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1);
}
.tsec-patent-card.is-in { opacity: 1; transform: translateY(0); }
.tsec-patent-tag { margin: 0 0 18px; color: var(--royal); font: 700 12px var(--font-mono); letter-spacing: 0.04em; }
.tsec-patent-card h3 { margin: 0 0 14px; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.tsec-patent-desc { margin: 0 0 24px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.tsec-patent-ref { margin: auto 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: 44px 0 60px; } /* stale pre--hero-pad-top-token value, see .art-hero */
  .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; }
  .tsec-patent-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   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: 44px 0 60px; } /* stale pre--hero-pad-top-token value, see .art-hero */
  .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;
  }
}