/* ============================================================
   Valty · Site — Global Stylesheet
   ============================================================
   Single source of styling for every page under /WEBSITE-DESIGN/.
   Consolidated from what used to live in three files:
     - assets/style.css            (site base + trust bar)
     - partials/header/header.css  (site header)
     - partials/footer/footer.css  (site footer)

   Table of contents
      1. Design tokens (:root)
      2. Base + reset
      3. Scrollbar
      4. Entrance utility (.reveal)
     5. Typography helpers (.text-balance, .text-pretty)
                            + CTA band utility (.valty-cta-bg)
      6. SECTION   — Animated hero   (.valty-hero)
      7. SECTION   — Bottom CTA      (.bottom-cta-stage)
      8. COMPONENT — Site header     (.valty-header)
      9. COMPONENT — Site footer     (.valty-footer)
     10. COMPONENT — Logo marquee    (.valty-logos)
     11. SECTION   — Trust bar       (.valty-trustbar)
     12. SECTION   — Platform bento  (.valty-bento)
     13. Responsive — mobile drawer + footer stack (< 768px)
     14. Reduced motion

   Every component scopes its own tokens + styles under a BEM
   root so nothing leaks outside (.valty-header * is isolated
   from .valty-footer * etc.). Retune a component by editing
   the custom properties at the top of its section only.

   Depends on (loaded by host page):
     - IBM Plex Sans + IBM Plex Mono (Google Fonts)
     - Remix Icon 4.8.0              (header CTA icon)

   Consumed by:
     - WEBSITE-DESIGN/INDEX.html
   ============================================================ */


/* ╔══════════════════════════════════════════════════════════╗
   ║  1 · DESIGN TOKENS                                       ║
   ╚══════════════════════════════════════════════════════════╝ */
:root {
  --site-bg:            #08080A;
  --site-text:          #F4F4F5;
  --site-text-dim:      rgba(244, 244, 245, 0.55);
  --site-text-mute:     rgba(244, 244, 245, 0.35);
  --site-border:        rgba(255, 255, 255, 0.10);
  --site-border-strong: rgba(255, 255, 255, 0.20);
  --site-duration:      200ms;
  --site-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --site-max-width:     1280px;
  --site-font-sans:     'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --site-font-mono:     'IBM Plex Mono', ui-monospace, monospace;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  2 · BASE + RESET                                        ║
   ╚══════════════════════════════════════════════════════════╝
   Minimal reset. Runs before Tailwind's preflight (if used)
   so the page never flashes with browser defaults. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { min-height: 100dvh; }
main { display: block; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}

html, body {
  background: var(--site-bg);
  color: var(--site-text);
  font-family: var(--site-font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--site-text); color: #000; }


/* ╔══════════════════════════════════════════════════════════╗
   ║  3 · SCROLLBAR                                           ║
   ╚══════════════════════════════════════════════════════════╝ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }


/* ╔══════════════════════════════════════════════════════════╗
   ║  4 · ENTRANCE UTILITY — .reveal                          ║
   ╚══════════════════════════════════════════════════════════╝
   Compositor-only (opacity + transform + filter).
   Host elements add inline `animation-delay` to stagger.
   End state uses `filter: none` (not blur(0)) — any residual
   filter keeps the element in a GPU compositor layer and
   strips subpixel AA, rendering white text as a muddy gray. */
@keyframes valtyFadeInUp {
  from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  to   { opacity: 1; transform: none;             filter: none;     }
}
.reveal {
  opacity: 0;
  animation: valtyFadeInUp 700ms ease-out forwards;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  5 · TYPOGRAPHY HELPERS + CTA BAND UTILITY               ║
   ╚══════════════════════════════════════════════════════════╝ */
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty;  }

/* CTA band differentiator. Applied to every conversion-moment
   <section> so the eye can distinguish content from action at a
   glance. The tint is intentionally subtle — one notch above the
   page background, not a color accent. */
.valty-cta-bg { background-color: #141418; }


/* Design Partner Spotlight micro-interactions. */
.valty-dp-progress {
  overflow: hidden;
}

.valty-dp-progress__bar {
  width: var(--dp-progress, 60%);
  /* Diagonal `\` cut on the fill front — matches the V-mark / eyebrow
     backslash motif used across the page. 4px projection on a 4px-tall
     bar = clean 45° wedge that reads as a precision tip rather than a
     squared-off edge. The clip-path scales with the bar during the
     reveal animation, so the diagonal grows in proportion. */
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 100%, 0 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.valty-dp-progress__bar[data-ready="true"] {
  transform: scaleX(1);
}

.valty-dp-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.valty-dp-list i {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.62);
}

.valty-dp-list span {
  min-width: 0;
}

/* Viewport sequencer for staged sections. */
[data-valty-sequence] [data-sequence-shell],
[data-valty-sequence] [data-sequence-item] {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(5px);
  transition:
    opacity 650ms ease-out,
    transform 650ms ease-out,
    filter 650ms ease-out;
  transition-delay: var(--sequence-delay, 0ms);
}

[data-valty-sequence].is-sequence-active [data-sequence-shell],
[data-valty-sequence].is-sequence-active [data-sequence-item] {
  opacity: 1;
  transform: none;
  filter: none;
}

.valty-category-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.valty-category-list i {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
  font-size: 15px;
  line-height: 1;
  color: currentColor;
  opacity: 0.72;
}

.valty-category-list span {
  min-width: 0;
}

.valty-wedge-card {
  --valty-card-hover-duration: 220ms;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  translate: 0 0;
  transition:
    translate var(--valty-card-hover-duration) var(--site-ease);
}

.valty-wedge-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 255, 255, 0.035);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--valty-card-hover-duration) var(--site-ease);
}

.valty-wedge-card > * {
  position: relative;
  z-index: 1;
}

.valty-wedge-card[data-sequence-item] {
  transition:
    opacity 650ms ease-out,
    transform 650ms ease-out,
    filter 650ms ease-out,
    translate var(--valty-card-hover-duration) var(--site-ease);
  transition-delay: var(--sequence-delay, 0ms), var(--sequence-delay, 0ms), var(--sequence-delay, 0ms), 0ms;
}

.valty-wedge-card:hover {
  translate: 0 -2px;
}

.valty-wedge-card:hover::before {
  opacity: 1;
}

.valty-wedge-number {
  display: inline-block;
  width: 2ch;
  text-align: right;
}

.valty-wedge-card .valty-btn--secondary {
  --btn-duration: var(--valty-card-hover-duration);
  transition:
    opacity var(--valty-card-hover-duration) var(--site-ease),
    color var(--btn-duration) var(--site-ease),
    border-color var(--btn-duration) var(--site-ease);
}

.valty-wedge-card:hover .valty-btn--secondary::before {
  transform: scaleX(1);
}

.valty-wedge-card:hover .valty-btn--secondary {
  color: #050506;
  border-color: #fff;
}

.valty-wedge-card:hover .valty-btn--secondary .arrow {
  transform: translateX(4px);
}

.valty-wedge-card:focus-visible {
  outline: 1px solid #f4f4f5;
  outline-offset: -1px;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  5b · SECTION — MECHANISM FLOW (§3.H)                   ║
   ╚══════════════════════════════════════════════════════════╝
   Standalone value-chain visualization placed between §04
   Category/Thesis and §05 Entry Wedges. Spec source:
   REVISIONS-V1-TO-APPLY.md §3.H.1; copy verbatim from
   CONTEXT/VALTY-REVISION-1.md Msg 6 lines 226–229 & 236–239.

   Inherits the [data-valty-sequence] reveal sequencer from §4
   so the header and each cell fade up in order. The diagonal
   hairline between cells lives on .valty-mechanism__cell::before
   and is independent of the cell's transform, so the reveal
   animation does not collide with the skew. */
.valty-mechanism__h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
}
.valty-mechanism__h2 .clause {
  display: block;
}
.valty-mechanism__h2 .clause:nth-child(2) { color: rgba(244, 244, 245, 0.78); }
.valty-mechanism__h2 .clause:nth-child(3) { color: rgba(244, 244, 245, 0.55); }

.valty-mechanism {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #08080a;
  overflow: hidden;
  position: relative;
}

.valty-mechanism__cell {
  position: relative;
  padding: 32px 28px 64px;
  min-height: 280px;
  background: #08080a;
}

/* Diagonal hairline between cells — 8° lean (mirrored), edge to edge,
   shifted 10px left so it sits visually between the two cards. */
.valty-mechanism__cell + .valty-mechanism__cell::before {
  content: "";
  position: absolute;
  top: -40px;
  bottom: -40px;
  left: -10px;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
  transform: skewX(8deg);
  transform-origin: center;
  pointer-events: none;
}

.valty-mechanism__step {
  display: block;
  margin-bottom: 22px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 244, 245, 0.40);
}

.valty-mechanism__icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 2px;
  margin-bottom: 20px;
  color: #f4f4f5;
}

.valty-mechanism__title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #f4f4f5;
}

.valty-mechanism__body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(244, 244, 245, 0.55);
}

.valty-mechanism__tag {
  position: absolute;
  bottom: 24px;
  left: 28px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: rgba(244, 244, 245, 0.22);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .valty-mechanism {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .valty-mechanism__cell {
    min-height: 0;
    padding: 28px 24px 56px;
  }
  .valty-mechanism__cell + .valty-mechanism__cell {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }
  .valty-mechanism__cell + .valty-mechanism__cell::before {
    display: none;
  }
  .valty-mechanism__tag {
    left: 24px;
    bottom: 20px;
  }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  6 · SECTION — ANIMATED HERO                            ║
   ╚══════════════════════════════════════════════════════════╝
   Pixel-tile canvas background + bottom fade + radial spotlight.
   The sticky header becomes transparent only while this page-level
   modifier is present, so the animation can sit underneath it
   without affecting other pages.

   Runtime:
     - assets/hero-animation.js

   Markup contract:
     body.valty-page--animated-hero
     .valty-header-gradient
     .valty-hero
       .valty-hero__canvas
       .valty-hero__fade
       .valty-hero__spot
       .valty-hero__content
   ----------------------------------------------------------- */
body.valty-page--animated-hero {
  --vh-bg: transparent;
  --vh-border: transparent;
  --valty-fold-bar-height: 72px;
}

body.valty-page--animated-hero main {
  margin-top: -4rem;
}

body.valty-page--animated-hero .valty-header {
  --vh-bg: transparent;
  --vh-border: transparent;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
}

body.valty-page--animated-hero:not(.valty-header-revealed) .valty-header {
  opacity: 0;
  transform: translateY(-18px);
  filter: blur(8px);
}

body.valty-page--animated-hero.valty-header-revealed .valty-header {
  animation: valtyHeaderDropIn 760ms var(--site-ease) both;
}

.valty-header-gradient {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  pointer-events: none;
  height: 260px;
}

@keyframes valtyHeaderDropIn {
  from {
    opacity: 0;
    transform: translateY(-18px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.valty-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--site-bg);
  touch-action: pan-y;
}

@media (min-width: 769px) {
  .valty-hero {
    min-height: calc(100vh - var(--valty-fold-bar-height));
    min-height: calc(100svh - var(--valty-fold-bar-height));
  }
}

.valty-hero__canvas,
.valty-hero__fade,
.valty-hero__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.valty-hero__canvas { z-index: 0; }
.valty-hero__fade,
.valty-hero__spot { z-index: 1; }

.valty-hero__content {
  position: absolute;
  z-index: 2;
  left: clamp(1.5rem, 4vw, 4rem);
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 4.5vh, 3.75rem);
  max-width: 46rem;
  text-align: left;
}

.valty-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--site-font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.valty-hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff;
  flex: 0 0 auto;
}

.valty-hero__title {
  margin-top: 1.125rem;
  max-width: 12.5ch;
  font-size: clamp(38px, 5vw, 76px);
  line-height: 0.98;
  letter-spacing: 0;
  font-weight: 500;
}

.valty-hero__title-muted {
  color: rgba(255, 255, 255, 0.40);
}

.valty-hero__subtitle {
  margin-top: 1rem;
  max-width: 31rem;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.60);
}

.valty-hero__cta {
  margin-top: 1.25rem;
  min-height: 44px;
  padding: 0.875rem 1.375rem;
}

.valty-hero__browser {
  --hero-browser-demo-scale: 0.74;
  --hero-browser-demo-shift: 0px;
  position: absolute;
  top: clamp(18%, 23vh, 30%);
  bottom: clamp(1.5rem, 5vh, 4rem);
  right: clamp(1rem, 3vw, 3rem);
  width: clamp(520px, 48vw, 820px);
  z-index: 2;
  background: linear-gradient(180deg, rgba(16, 16, 18, 0.88) 0%, rgba(12, 12, 14, 0.82) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow:
    -12px 18px 50px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.valty-hero__mobile-proof {
  display: none;
  position: relative;
  overflow: hidden;
}

.valty-hero__browser-bar {
  height: 38px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 0 12px 0 16px;
  background: linear-gradient(180deg, rgba(28, 28, 30, 0.95) 0%, rgba(22, 22, 24, 0.95) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.valty-hero__browser-dots {
  display: inline-flex;
  gap: 8px;
  justify-self: start;
}

.valty-hero__browser-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.35);
}

.valty-hero__browser-dots .r { background: #ff5f57; }
.valty-hero__browser-dots .y { background: #febc2e; }
.valty-hero__browser-dots .g { background: #28c840; }

.valty-hero__browser-center,
.valty-hero__browser-controls,
.valty-hero__browser-actions {
  display: inline-flex;
  align-items: center;
}

.valty-hero__browser-center {
  justify-self: center;
  gap: 10px;
  min-width: 0;
}

.valty-hero__browser-controls,
.valty-hero__browser-actions {
  gap: 4px;
  color: rgba(255, 255, 255, 0.34);
}

.valty-hero__browser-controls span,
.valty-hero__browser-actions span {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
}

.valty-hero__browser-controls i,
.valty-hero__browser-actions i {
  font-size: 14px;
  line-height: 1;
}

.valty-hero__browser-url {
  width: clamp(220px, 24vw, 340px);
  min-width: 0;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-family: var(--site-font-mono);
  font-size: 10px;
  letter-spacing: 0.012em;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
}

.valty-hero__browser-url span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.valty-hero__browser-actions {
  justify-self: end;
}

.valty-hero__browser-content {
  flex: 1;
  position: relative;
  background:
    radial-gradient(60% 70% at 20% 0%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(12, 12, 14, 0) 0%, rgba(8, 8, 10, 0.6) 100%);
  overflow: hidden;
}

.valty-hero__browser-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--site-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  transition: opacity 280ms var(--site-ease);
}

.valty-hero__browser-frame {
  position: absolute;
  inset: 0;
  width: calc(100% / var(--hero-browser-demo-scale));
  height: calc((100% + 140px) / var(--hero-browser-demo-scale));
  border: 0;
  background: #08080a;
  opacity: 0;
  transform: translateY(var(--hero-browser-demo-shift)) scale(var(--hero-browser-demo-scale));
  transform-origin: top left;
  transition: opacity 420ms var(--site-ease);
}

.valty-hero__browser-content.is-loaded .valty-hero__browser-loading {
  opacity: 0;
}

.valty-hero__browser-content.is-loaded .valty-hero__browser-frame {
  opacity: 1;
}

@media (min-width: 1280px) {
  .valty-hero__browser {
    right: clamp(1.5rem, 4vw, 4.5rem);
    width: clamp(620px, 50vw, 900px);
  }
}

@media (min-width: 1680px) {
  .valty-hero__browser {
    --hero-browser-demo-scale: 0.70;
    width: clamp(740px, 52vw, 1040px);
  }
}

@media (max-width: 1024px) {
  .valty-hero {
    min-height: auto;
    padding-top: calc(5rem + env(safe-area-inset-top, 0px));
    padding-bottom: 2.75rem;
    display: flex;
    flex-direction: column;
  }

  .valty-hero__browser {
    display: none !important;
  }

  .valty-hero__mobile-proof {
    display: block;
    position: relative;
    z-index: 2;
    width: min(calc(100% - 3rem), 800px);
    margin: 1rem auto 1.75rem;
    aspect-ratio: 16 / 9;
    min-height: 220px;
    max-height: 420px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(10, 10, 12, 0.86);
    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.10);
    overflow: hidden;
  }

  .valty-hero__content {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    width: 100%;
    max-width: min(100%, 760px);
    min-height: 0;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 3rem);
  }

  .valty-hero__subtitle {
    max-width: 40rem;
  }
}

@media (max-width: 768px) {
  .valty-header-gradient {
    height: 220px;
  }

  .valty-hero {
    padding-top: calc(4.75rem + env(safe-area-inset-top, 0px));
    padding-bottom: 2.25rem;
  }

  .valty-hero__mobile-proof {
    width: calc(100% - 2rem);
    margin: 0.85rem auto 1.35rem;
    aspect-ratio: 16 / 10;
    min-height: 190px;
    max-height: 250px;
  }

  .valty-hero__content {
    padding: 0 clamp(1.25rem, 6vw, 2rem);
  }

  .valty-hero__title {
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1.02;
  }

  .valty-hero__subtitle {
    max-width: 35ch;
    font-size: 13px;
  }
}

@media (max-width: 360px) and (max-height: 640px) {
  .valty-hero {
    padding-top: calc(4.25rem + env(safe-area-inset-top, 0px));
    padding-bottom: 1.75rem;
  }

  .valty-hero__mobile-proof {
    height: clamp(150px, 49vw, 164px);
    min-height: 0;
    max-height: none;
    margin: 0.65rem auto 1rem;
    aspect-ratio: auto;
  }

  .valty-hero__title {
    font-size: clamp(31px, 9.8vw, 36px);
    line-height: 1.01;
  }

  .valty-hero__subtitle {
    margin-top: 0.875rem;
    font-size: 12.5px;
    line-height: 1.46;
  }

  .valty-hero__cta {
    margin-top: 1rem;
  }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  7 · SECTION — BOTTOM CTA                               ║
   ╚══════════════════════════════════════════════════════════╝
   Closing CTA variant using the same pixel-field runtime as the
   hero, tuned as a lower command rail rather than a second hero. */
.bottom-cta-stage {
  --bottom-cta-max-width: 1440px;
  --bottom-cta-padding-x: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
  width: 100%;
  min-height: 520px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: #08080a;
  isolation: isolate;
}

.bottom-cta-stage .valty-hero__content {
  position: absolute;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: min(100%, var(--bottom-cta-max-width));
  max-width: none;
  min-height: auto;
  padding-inline: var(--bottom-cta-padding-x);
}

.bottom-cta-stage .valty-hero__title {
  max-width: 30ch;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.04;
}

.bottom-cta-stage .valty-hero__subtitle {
  max-width: 36rem;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.58);
}

.bottom-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.bottom-cta-actions .valty-hero__cta {
  margin-top: 0;
}

.bottom-cta-meta {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  max-width: 720px;
  margin-top: 22px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(10, 10, 12, 0.34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.bottom-cta-meta > div {
  padding: 12px 14px 13px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.bottom-cta-meta > div:last-child {
  border-right: 0;
}

.bottom-cta-meta strong {
  display: block;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #f4f4f5;
}

.bottom-cta-meta span {
  display: block;
  margin-top: 6px;
  font-family: var(--site-font-mono);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}

.bottom-cta-stage--rail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(var(--bc04-angle, 70deg),
      rgba(8, 8, 10, var(--bc04-left-alpha, 0.96)) 0%,
      rgba(8, 8, 10, calc(var(--bc04-left-alpha, 0.96) - 0.02)) var(--bc04-solid-stop, 24%),
      rgba(8, 8, 10, var(--bc04-mid-alpha, 0.72)) var(--bc04-mid-stop, 35%),
      rgba(8, 8, 10, var(--bc04-fade-alpha, 0)) var(--bc04-fade-stop, 70%),
      rgba(8, 8, 10, 0) 100%);
}

.bottom-cta-stage--final {
  --bc04-angle: 70deg;
  --bc04-left-alpha: 0.96;
  --bc04-solid-stop: 24%;
  --bc04-mid-alpha: 0.72;
  --bc04-mid-stop: 35%;
  --bc04-fade-alpha: 0;
  --bc04-fade-stop: 70%;
}

.bottom-cta-ghost-rail {
  position: absolute;
  inset: auto 0 0;
  height: 160px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 20%),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.04) 72%, rgba(255, 255, 255, 0.08) 100%);
  opacity: 0.45;
}

.bottom-cta-ghost-rail::before,
.bottom-cta-ghost-rail::after {
  content: "";
  position: absolute;
  top: 34px;
  width: 1px;
  height: 92px;
  background: rgba(255, 255, 255, 0.08);
}

.bottom-cta-ghost-rail::before { left: 34%; }
.bottom-cta-ghost-rail::after { left: 68%; }

@media (max-width: 960px) {
  .bottom-cta-stage {
    min-height: 720px;
  }

  .bottom-cta-stage .valty-hero__content {
    top: 50%;
  }

  .bottom-cta-stage--rail::before {
    background:
      linear-gradient(90deg,
        rgba(8, 8, 10, 0.98) 0%,
        rgba(8, 8, 10, 0.95) 42%,
        rgba(8, 8, 10, 0.82) 66%,
        rgba(8, 8, 10, 0.35) 88%,
        rgba(8, 8, 10, 0) 100%);
  }

  .bottom-cta-meta {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .bottom-cta-meta > div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .bottom-cta-meta > div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 520px) {
  .bottom-cta-stage {
    --bottom-cta-padding-x: 1.25rem;
    min-height: 820px;
  }

  .bottom-cta-stage .valty-hero__title {
    font-size: clamp(25px, 8vw, 32px);
  }

  .bottom-cta-actions .valty-btn {
    width: 100%;
    justify-content: center;
  }

  .bottom-cta-meta strong {
    font-size: 20px;
  }
}


/* ----------------------------------------------------------------
   Buttons · single canonical component (A01 · Fill sweep)
   ----------------------------------------------------------------
   Three variants:
     · .valty-btn--primary    filled white, dark ink
     · .valty-btn--secondary  ghost, hairline border
     · .valty-btn--mono       bare mono-link, no padding/border
   Size modifier:
     · .valty-btn--sm         smaller padding + 11px label
                              (card-level CTAs in Entry Wedges).
   Hover (A01 Fill sweep):
     Primary + secondary fill from the left via a ::before sweep.
     Primary sweeps dark inside its white frame (the border stays
     white — the sweep reads as an inverted panel, not a new
     button). Secondary sweeps white over transparent and flips
     to dark ink. Mono brightens and pushes its trailing arrow.
   Markup shape:
     <a class="valty-btn valty-btn--primary">
       <span class="label">Get Early Access</span>
       <span class="arrow">→</span>   <!-- optional -->
     </a>
   Button pair dim (two or more btns in one .valty-btn-group):
     handled by the `.valty-btn-group:has(a:hover)` rule above.
   ---------------------------------------------------------------- */
.valty-btn {
  --btn-duration: 250ms;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--site-font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;   /* clips the ::before sweep */
  isolation: isolate; /* keeps the sweep under the label */
  transition:
    color        var(--btn-duration) var(--site-ease),
    border-color var(--btn-duration) var(--site-ease);
}
.valty-btn > .label { position: relative; z-index: 2; }
.valty-btn > .arrow {
  position: relative; z-index: 2;
  display: inline-block;
  transition: transform var(--btn-duration) var(--site-ease);
}

/* Primary · filled white / dark ink.
   The hover sweep uses `--btn-primary-sweep` so the fill matches
   whatever background the button is sitting on. Default is the
   page bg (#050506); CTA bands override it below to #141418 so
   the hovered button dissolves cleanly into the band instead of
   showing up as a darker panel inside a lighter section. */
.valty-btn--primary {
  --btn-primary-sweep: #050506;
  background: #fff;
  color: #050506;
  border: 1px solid #fff;
}
.valty-cta-bg .valty-btn--primary { --btn-primary-sweep: #141418; }

.valty-btn--primary::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--btn-primary-sweep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--btn-duration) var(--site-ease);
  z-index: 1;
}
.valty-btn--primary:hover::before { transform: scaleX(1); }
.valty-btn--primary:hover         { color: #fff; }
.valty-btn--primary:hover .arrow  { transform: translateX(4px); }

/* Secondary · ghost */
.valty-btn--secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.valty-btn--secondary::before {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--btn-duration) var(--site-ease);
  z-index: 1;
}
.valty-btn--secondary:hover::before { transform: scaleX(1); }
.valty-btn--secondary:hover {
  color: #050506;
  border-color: #fff;
}
.valty-btn--secondary:hover .arrow { transform: translateX(4px); }

/* Mono · bare label + arrow (no padding/border). */
.valty-btn--mono {
  padding: 0;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.70);
  font-family: var(--site-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  overflow: visible;
  isolation: auto;
}
.valty-btn--mono:hover         { color: #fff; }
.valty-btn--mono:hover .arrow  { transform: translateX(4px); }

/* Size · smaller ghost for Entry Wedges card CTAs. */
.valty-btn--sm {
  padding: 0.5rem 1rem;
  font-size: 11px;
}

/* Focus ring across all variants. */
.valty-btn:focus-visible {
  outline: 1px solid #F4F4F5;
  outline-offset: 2px;
}

/* Button notch opt-in for INDEX-V2. The 45-degree border is an SVG
   path injected by assets/button-notch.js, which avoids clip-path
   border artifacts while preserving the existing fill sweep. */
@property --btn-cut {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

body[data-valty-button-notch="true"] .valty-btn:not(.valty-btn--mono) {
  --btn-cut: 0px;
  --btn-cut-target: 12px;
  --btn-notch-base: transparent;
  --btn-notch-stroke: rgba(255, 255, 255, 0.25);
  --btn-notch-hover-stroke: #fff;
  border-color: transparent;
  transition:
    --btn-cut 320ms var(--site-ease),
    color var(--btn-duration) var(--site-ease),
    border-color var(--btn-duration) var(--site-ease),
    opacity 200ms var(--site-ease);
}

body[data-valty-button-notch="true"] .valty-btn:not(.valty-btn--mono):hover {
  --btn-cut: var(--btn-cut-target);
}

body[data-valty-button-notch="true"] .valty-wedge-card:hover .valty-btn--secondary {
  --btn-cut: var(--btn-cut-target);
}

body[data-valty-button-notch="true"] .valty-btn--primary {
  --btn-notch-base: #fff;
  --btn-notch-stroke: #fff;
  --btn-notch-hover-stroke: #fff;
  background: #fff;
}

body[data-valty-button-notch="true"] .valty-btn--primary[data-valty-notch-ready="true"] {
  background: transparent;
}

body[data-valty-button-notch="true"] .valty-btn--secondary {
  background: transparent;
}

body[data-valty-button-notch="true"] .valty-btn:not(.valty-btn--mono)::before,
body[data-valty-button-notch="true"] .valty-btn__notch-base {
  clip-path: polygon(0 0, calc(100% - var(--btn-cut)) 0, 100% var(--btn-cut), 100% 100%, 0 100%);
  transition:
    clip-path 320ms var(--site-ease),
    transform var(--btn-duration) var(--site-ease);
}

body[data-valty-button-notch="true"] .valty-btn__notch-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--btn-notch-base);
}

body[data-valty-button-notch="true"] .valty-btn.valty-btn--primary .valty-btn__notch-base {
  background: #fff;
}

body[data-valty-button-notch="true"] .valty-btn__notch-border {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

body[data-valty-button-notch="true"] .valty-btn__notch-path {
  fill: none;
  stroke: var(--btn-notch-stroke);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  transition: stroke var(--btn-duration) var(--site-ease);
}

body[data-valty-button-notch="true"] .valty-btn:not(.valty-btn--mono):hover .valty-btn__notch-path {
  stroke: var(--btn-notch-hover-stroke);
}

body[data-valty-button-notch="true"] .valty-wedge-card:hover .valty-btn--secondary .valty-btn__notch-path {
  stroke: var(--btn-notch-hover-stroke);
}

body[data-valty-button-notch="true"] .valty-btn:not(.valty-btn--mono) > .label,
body[data-valty-button-notch="true"] .valty-btn:not(.valty-btn--mono) > .arrow {
  z-index: 4;
}

/* Button-pair dim-on-hover. Wrap two <a>/<button>s in a parent
   carrying `.valty-btn-group` so hovering one fades the other to
   35% — same interaction model as the header nav. No JS required
   (uses :has()). Siblings transition in on load at 200ms so the
   dim doesn't flicker when the pointer first enters. */
.valty-btn-group > a,
.valty-btn-group > button { transition: opacity 200ms var(--site-ease); }
.valty-btn-group:has(a:hover, button:hover) > a:not(:hover),
.valty-btn-group:has(a:hover, button:hover) > button:not(:hover) {
  opacity: 0.35;
}

/* Persona card · uses the same hover contract as Entry Wedges:
   fixed border, subtle surface overlay, 2px lift, and one shared
   duration for secondary affordances. */
.valty-persona-card {
  --valty-card-hover-duration: 220ms;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  translate: 0 0;
  transition:
    translate var(--valty-card-hover-duration) var(--site-ease);
}

.valty-persona-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 255, 255, 0.035);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--valty-card-hover-duration) var(--site-ease);
}

.valty-persona-card > * {
  position: relative;
  z-index: 1;
}

.valty-persona-card[data-sequence-item] {
  transition:
    opacity 650ms ease-out,
    transform 650ms ease-out,
    filter 650ms ease-out,
    translate var(--valty-card-hover-duration) var(--site-ease);
  transition-delay: var(--sequence-delay, 0ms), var(--sequence-delay, 0ms), var(--sequence-delay, 0ms), 0ms;
}

.valty-persona-card .valty-persona-card__icon,
.valty-persona-card .valty-persona-card__link,
.valty-persona-card .valty-persona-card__label,
.valty-persona-card .valty-persona-card__divider {
  transition:
    color var(--valty-card-hover-duration) var(--site-ease),
    border-color var(--valty-card-hover-duration) var(--site-ease);
}

.valty-persona-card:hover {
  translate: 0 -2px;
}

.valty-persona-card:hover::before {
  opacity: 1;
}

.valty-persona-card:hover .valty-persona-card__icon {
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.valty-persona-card:hover .valty-persona-card__label {
  color: rgba(255, 255, 255, 0.90);
}

.valty-persona-card:hover .valty-persona-card__link {
  color: #fff;
}

.valty-persona-card__link .arrow {
  display: inline-block;
  transition: transform var(--valty-card-hover-duration) var(--site-ease);
}

.valty-persona-card:hover .valty-persona-card__link .arrow {
  transform: translateX(4px);
}

.valty-persona-card:hover .valty-persona-card__divider {
  border-top-color: rgba(255, 255, 255, 0.10);
}

.valty-persona-card:focus-visible {
  outline: 1px solid #f4f4f5;
  outline-offset: -1px;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  6 · COMPONENT — SITE HEADER                             ║
   ╚══════════════════════════════════════════════════════════╝
   Sticky top bar: logo + small-caps nav + shield CTA.
   Desktop row collapses to hamburger + full-screen drawer
   below the mobile breakpoint (see section 9).

   Markup : partials/header/header.html
   Runtime: partials/header/header.js                        */

/* Tokens (scoped) */
.valty-header {
  --vh-bg:           rgba(8, 8, 10, 0.78);
  --vh-border:       rgba(255, 255, 255, 0.10);
  --vh-separator:    rgba(255, 255, 255, 0.20);
  --vh-text:         rgba(244, 244, 245, 0.78);
  --vh-text-strong:  #F4F4F5;
  --vh-text-dim:     rgba(244, 244, 245, 0.35);
  --vh-cta-border:   rgba(255, 255, 255, 0.15);
  --vh-height:       4rem;                       /* 64px */
  --vh-padding-x:    clamp(1rem, 4vw, 3rem);
  --vh-max-width:    1440px;
  --vh-z:            50;
  --vh-z-drawer:     60;

  position: sticky;
  top: 0;
  z-index: var(--vh-z);
  background: var(--vh-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vh-border);
  font-family: var(--site-font-sans);
  color: var(--vh-text);
  -webkit-font-smoothing: antialiased;
}
.valty-header *,
.valty-header *::before,
.valty-header *::after { box-sizing: border-box; }

/* Inner row */
.valty-header__inner {
  max-width: var(--vh-max-width);
  margin-inline: auto;
  padding-inline: var(--vh-padding-x);
  height: var(--vh-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Logo — V2 ships pre-colored (valty-white.svg on dark header). */
.valty-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.valty-header__logo img {
  display: block;
  height: 29px;
  width: auto;
}
.valty-header__logo:focus-visible {
  outline: 1px solid var(--vh-text-strong);
  outline-offset: 4px;
}

/* Desktop nav — small caps + slash separators + dim-on-hover */
.valty-header__nav {
  display: flex;
  align-items: center;
  color: var(--vh-text);
  font-size: 14px;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
}
.valty-header__nav a {
  padding-inline: 1.25rem;
  transition: opacity var(--site-duration) var(--site-ease),
              color   var(--site-duration) var(--site-ease);
}
.valty-header__nav:hover a       { opacity: 0.35; }
.valty-header__nav:hover a:hover { opacity: 1; color: var(--vh-text-strong); }
.valty-header__nav a:focus-visible {
  outline: 1px solid var(--vh-text-strong);
  outline-offset: 4px;
  opacity: 1;
}
.valty-header__sep {
  color: var(--vh-separator);
  font-weight: 300;
  user-select: none;
}

/* CTA — uses the canonical .valty-btn component. This selector
   only adds header-specific tweaks (shrink-fix + icon sizing);
   all visual + animation behaviour ships from .valty-btn--secondary
   in the Buttons section. */
.valty-header__cta { flex-shrink: 0; }
.valty-header__cta i { font-size: 14px; line-height: 1; }

/* Mobile toggle (hamburger / close) — shown below 768px */
.valty-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--vh-text-strong);
  font-size: 22px;
  line-height: 1;
  border: 1px solid transparent;
}
.valty-header__toggle:focus-visible {
  outline: 1px solid var(--vh-text-strong);
  outline-offset: 2px;
}

/* Drawer (hidden on desktop, full-screen overlay on mobile) */
.valty-header__drawer { display: none; }


/* ╔══════════════════════════════════════════════════════════╗
   ║  7 · COMPONENT — SITE FOOTER                             ║
   ╚══════════════════════════════════════════════════════════╝
   Two variants driven by markup attribute on the mount point:
     • valty-footer--full      (home + content pages)
     • valty-footer--minimal   (legal / lighter pages)

   Markup : partials/footer/footer.html
   Runtime: partials/footer/footer.js                         */

/* Tokens (scoped) */
.valty-footer {
  --vf-ink:         #F4F4F5;
  --vf-text:        rgba(255, 255, 255, 0.70);
  --vf-text-strong: rgba(255, 255, 255, 0.80);
  --vf-text-dim:    rgba(255, 255, 255, 0.40);
  --vf-border:      rgba(255, 255, 255, 0.10);
  --vf-sep:         rgba(255, 255, 255, 0.14);
  --vf-padding-x:   clamp(1.5rem, 4vw, 2.5rem);
  --vf-max-width:   1440px;
  --vf-logo-h:      41px;

  color: var(--vf-text);
  font-family: var(--site-font-sans);
  -webkit-font-smoothing: antialiased;

  /* Full-width top divider. The max-width constraint lives on the
     footer's direct children (__grid / __legal / __row) so only the
     content is centred while the top rule spans edge-to-edge. */
  border-top: 1px solid var(--vf-border);
}
.valty-footer--full .valty-footer__grid,
.valty-footer--full .valty-footer__legal,
.valty-footer--minimal .valty-footer__row {
  max-width: var(--vf-max-width);
  margin-inline: auto;
}
.valty-footer *,
.valty-footer *::before,
.valty-footer *::after { box-sizing: border-box; }

/* Footer owns its own list/margin reset (portable across hosts). */
.valty-footer p,
.valty-footer dl,
.valty-footer dt,
.valty-footer dd,
.valty-footer ul { margin: 0; padding: 0; }
.valty-footer ul { list-style: none; }

/* Logo — black SVG → white via brightness/invert trick. */
.valty-footer__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.valty-footer__logo img {
  display: block;
  height: var(--vf-logo-h);
  width: auto;
}
.valty-footer__logo:focus-visible {
  outline: 1px solid var(--vf-ink);
  outline-offset: 4px;
}

/* Column heading (mono uppercase micro-label). */
.valty-footer__heading {
  font-family: var(--site-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-text-dim);
  margin-bottom: 1rem;
}
.valty-footer__heading--spaced { margin-top: 2rem; }

/* Nav list + link. */
.valty-footer__list > li + li { margin-top: 0.625rem; }
.valty-footer__list a {
  font-size: 13px;
  color: var(--vf-text);
}

/* Dim-on-hover groups. Applies to:
     • .valty-footer__nav           (right-side nav, all columns merged)
     • .valty-footer__legal-links   (bottom legal strip)
   Hovering one link dims the siblings to 35%. */
.valty-footer__nav a,
.valty-footer__legal-links a {
  transition: opacity 300ms var(--site-ease);
}
.valty-footer__nav:has(a:hover) a:not(:hover),
.valty-footer__legal-links:has(a:hover) a:not(:hover) {
  opacity: 0.35;
}
.valty-footer__nav a:focus-visible,
.valty-footer__legal-links a:focus-visible {
  outline: 1px solid var(--vf-ink);
  outline-offset: 4px;
  opacity: 1;
}

/* Vertical hairline separator (used in minimal variant). */
.valty-footer__sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--vf-sep);
  flex-shrink: 0;
}

/* ── Variant: Full ── */
.valty-footer--full .valty-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--vf-border);
}
.valty-footer--full .valty-footer__contact {
  padding: 2.5rem;
  border-right: 1px solid var(--vf-border);
}
.valty-footer--full .valty-footer__contact-list {
  margin-top: 2.5rem;
  border-top: 1px solid var(--vf-border);
  border-bottom: 1px solid var(--vf-border);
}
.valty-footer--full .valty-footer__contact-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.5rem;
  padding-block: 0.75rem;
  align-items: baseline;
  border-top: 1px solid var(--vf-border);
}
.valty-footer--full .valty-footer__contact-row:first-child { border-top: 0; }
.valty-footer--full .valty-footer__contact-term {
  font-family: var(--site-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-text-dim);
}
.valty-footer--full .valty-footer__contact-value {
  font-size: 13px;
  color: var(--vf-text-strong);
}
.valty-footer--full .valty-footer__nav {
  padding: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
.valty-footer--full .valty-footer__legal {
  padding: 1rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: var(--site-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-text-dim);
}
.valty-footer--full .valty-footer__legal-links {
  display: flex;
  gap: 1.5rem;
}

.valty-footer.is-enhanced .valty-footer__contact,
.valty-footer.is-enhanced .valty-footer__nav,
.valty-footer.is-enhanced .valty-footer__legal,
.valty-footer.is-enhanced.valty-footer--minimal .valty-footer__logo,
.valty-footer.is-enhanced.valty-footer--minimal .valty-footer__legal-line {
  opacity: 0;
  filter: blur(8px);
}

.valty-footer.is-enhanced .valty-footer__contact,
.valty-footer.is-enhanced.valty-footer--minimal .valty-footer__logo {
  transform: translateX(-24px);
}

.valty-footer.is-enhanced .valty-footer__nav {
  transform: translateX(24px);
}

.valty-footer.is-enhanced .valty-footer__legal,
.valty-footer.is-enhanced.valty-footer--minimal .valty-footer__legal-line {
  transform: translateY(16px);
}

.valty-footer.is-static .valty-footer__contact,
.valty-footer.is-static .valty-footer__nav,
.valty-footer.is-static .valty-footer__legal,
.valty-footer.is-static.valty-footer--minimal .valty-footer__logo,
.valty-footer.is-static.valty-footer--minimal .valty-footer__legal-line {
  opacity: 1;
  transform: none;
  filter: none;
}

.valty-footer.is-playing .valty-footer__contact {
  animation: valtyFooterLeftIn 760ms var(--site-ease) 80ms both;
}

.valty-footer.is-playing .valty-footer__nav {
  animation: valtyFooterRightIn 760ms var(--site-ease) 230ms both;
}

.valty-footer.is-playing .valty-footer__legal {
  animation: valtyFooterBottomIn 700ms var(--site-ease) 430ms both;
}

.valty-footer.is-playing.valty-footer--minimal .valty-footer__logo {
  animation: valtyFooterLeftIn 760ms var(--site-ease) 80ms both;
}

.valty-footer.is-playing.valty-footer--minimal .valty-footer__legal-line {
  animation: valtyFooterBottomIn 700ms var(--site-ease) 230ms both;
}

@keyframes valtyFooterLeftIn {
  from {
    opacity: 0;
    transform: translateX(-24px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes valtyFooterRightIn {
  from {
    opacity: 0;
    transform: translateX(24px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes valtyFooterBottomIn {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ── Variant: Minimal ── */
.valty-footer--minimal .valty-footer__row {
  padding-inline: 2.5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.valty-footer--minimal .valty-footer__legal-line {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--site-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-text-dim);
}
.valty-footer--minimal .valty-footer__legal-links {
  display: flex;
  gap: 1.5rem;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  8 · COMPONENT — LOGO MARQUEE                            ║
   ╚══════════════════════════════════════════════════════════╝
   "Trusted by" band · full-width top+bottom dividers + two
   counter-scrolling rows of bordered wordmark cells.
   Cells are individually bordered with a gap so they read as
   separate cards, not a single strip.
   Respects prefers-reduced-motion (pauses animation).
   Spec: SECTIONS/02.5 LOGOS.html · M02 locked.                */
.valty-logos {
  --vl-text:     rgba(244, 244, 245, 0.62);
  --vl-text-dim: rgba(255, 255, 255, 0.35);
  --vl-border:   rgba(255, 255, 255, 0.10);
  --vl-cell-bg:  #050506;
  --vl-gap:      12px;
  --vl-pad-y:    clamp(2.5rem, 5vw, 4rem);

  border-top:    1px solid var(--vl-border);
  border-bottom: 1px solid var(--vl-border);
  padding-block: var(--vl-pad-y);
  color: var(--vl-text);
}
.valty-logos__head {
  max-width: var(--site-max-width);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  text-align: center;
  margin-bottom: 2rem;
}
.valty-logos__eyebrow {
  font-family: var(--site-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.valty-logos__sub {
  margin-top: 0.5rem;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
  max-width: 52ch;
  margin-inline: auto;
}
.valty-logos__rows { display: grid; gap: var(--vl-gap); }
.valty-logos__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.valty-logos__track {
  display: flex;
  gap: var(--vl-gap);
  width: max-content;
  will-change: transform;
}
.valty-logos__track--left  { animation: valty-logos-scroll-l 72s linear infinite; }
.valty-logos__track--right { animation: valty-logos-scroll-r 78s linear infinite; }
.valty-logos__cell {
  border: 1px solid var(--vl-border);
  background: var(--vl-cell-bg);
  min-width: 210px;
  min-height: 92px;
  padding: 1.125rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.valty-logos__logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.valty-logos__logo img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 32px;
  object-fit: contain;
}
.valty-logos__logo--airbnb img    { max-height: 28px; }
.valty-logos__logo--google img    { max-height: 30px; }
.valty-logos__logo--github img    { max-height: 24px; }
.valty-logos__logo--nvidia img    { max-height: 24px; }
.valty-logos__logo--stripe img    { max-height: 28px; }
.valty-logos__logo--openai img    { max-height: 26px; }
.valty-logos__logo--netflix img   { max-height: 22px; }
.valty-logos__logo--salesforce img{ max-height: 32px; }
.valty-logos__logo--slack img     { max-height: 28px; }
.valty-logos__logo--spotify img   { max-height: 26px; }
@media (max-width: 720px) {
  .valty-logos__cell {
    min-width: 180px;
    min-height: 78px;
    padding: 1rem 1.25rem;
  }
  .valty-logos__logo img,
  .valty-logos__logo--salesforce img {
    max-height: 26px;
  }
}
@keyframes valty-logos-scroll-l { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes valty-logos-scroll-r { from { transform: translateX(-50%); }   to { transform: translateX(0); } }

.valty-logos.is-enhanced .valty-logos__head-item,
.valty-logos.is-enhanced .valty-logos__row {
  opacity: 0;
  filter: blur(8px);
}

.valty-logos.is-enhanced .valty-logos__head-item {
  transform: translateY(12px);
}

.valty-logos.is-enhanced .valty-logos__row {
  transform: translateY(18px);
}

.valty-logos.is-static .valty-logos__head-item,
.valty-logos.is-static .valty-logos__row {
  opacity: 1;
  transform: none;
  filter: none;
}

.valty-logos.is-playing .valty-logos__head-item,
.valty-logos.is-playing .valty-logos__row {
  will-change: transform, opacity, filter;
}

.valty-logos.is-playing .valty-logos__head-item:nth-child(1) {
  animation: valtyLogosIntroIn 650ms var(--site-ease) 100ms both;
}

.valty-logos.is-playing .valty-logos__head-item:nth-child(2) {
  animation: valtyLogosIntroIn 650ms var(--site-ease) 250ms both;
}

.valty-logos.is-playing .valty-logos__head-item:nth-child(3) {
  animation: valtyLogosIntroIn 650ms var(--site-ease) 400ms both;
}

.valty-logos.is-playing .valty-logos__row:nth-child(1) {
  animation: valtyLogosRowsIn 760ms var(--site-ease) 760ms both;
}

.valty-logos.is-playing .valty-logos__row:nth-child(2) {
  animation: valtyLogosRowsIn 760ms var(--site-ease) 910ms both;
}

@keyframes valtyLogosIntroIn {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes valtyLogosRowsIn {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .valty-logos__track--left,
  .valty-logos__track--right { animation: none; }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  9 · SECTION — TRUST BAR                                 ║
   ╚══════════════════════════════════════════════════════════╝
   Scoreboard-style thin strip that sits directly beneath the
   hero. `/` separators at ~22% opacity. Tabular-aligned metrics.

   Markup lives in INDEX.html; the 10-option spec sheet lives
   in SECTIONS/TRUSTBAR.html (T08 · locked).                   */
.valty-trustbar {
  --vt-border:      var(--site-border);
  --vt-separator:   rgba(255, 255, 255, 0.22);
  --vt-text:        rgba(244, 244, 245, 0.62);
  --vt-text-strong: var(--site-text);
  --vt-max-width:   var(--site-max-width);
  --vt-padding-x:   clamp(1rem, 4vw, 2.5rem);
  --vt-padding-y:   1.25rem;
  --vt-gap-x:       1.5rem;
  --vt-gap-y:       0.5rem;

  border-top:    1px solid var(--vt-border);
  border-bottom: 1px solid var(--vt-border);
  padding-block: var(--vt-padding-y);
}

@media (min-width: 769px) {
  body.valty-page--animated-hero .valty-trustbar {
    min-height: var(--valty-fold-bar-height);
    padding-block: 0.875rem;
    display: flex;
    align-items: center;
  }

  body.valty-page--animated-hero .valty-trustbar__inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(1.5rem, 4vw, 4rem);
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}
.valty-trustbar__inner {
  max-width: var(--vt-max-width);
  margin-inline: auto;
  padding-inline: var(--vt-padding-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--vt-gap-y) var(--vt-gap-x);

  color: var(--vt-text);
  font-family: var(--site-font-mono);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.valty-trustbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.valty-trustbar__value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--vt-text-strong);
}
.valty-trustbar__sep {
  color: var(--vt-separator);
  font-weight: 300;
  user-select: none;
}

body.valty-page--animated-hero:not(.valty-trustbar-revealed) .valty-trustbar__item,
body.valty-page--animated-hero:not(.valty-trustbar-revealed) .valty-trustbar__sep {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
}

body.valty-page--animated-hero.valty-trustbar-revealed .valty-trustbar__item,
body.valty-page--animated-hero.valty-trustbar-revealed .valty-trustbar__sep {
  animation: valtyTrustbarItemIn 640ms var(--site-ease) both;
}

body.valty-page--animated-hero.valty-trustbar-revealed .valty-trustbar__item:nth-child(1) {
  animation-delay: 0ms;
}

body.valty-page--animated-hero.valty-trustbar-revealed .valty-trustbar__sep:nth-child(2) {
  animation-delay: 90ms;
}

body.valty-page--animated-hero.valty-trustbar-revealed .valty-trustbar__item:nth-child(3) {
  animation-delay: 150ms;
}

body.valty-page--animated-hero.valty-trustbar-revealed .valty-trustbar__sep:nth-child(4) {
  animation-delay: 240ms;
}

body.valty-page--animated-hero.valty-trustbar-revealed .valty-trustbar__item:nth-child(5) {
  animation-delay: 300ms;
}

body.valty-page--animated-hero.valty-trustbar-revealed .valty-trustbar__sep:nth-child(6) {
  animation-delay: 390ms;
}

body.valty-page--animated-hero.valty-trustbar-revealed .valty-trustbar__item:nth-child(7) {
  animation-delay: 450ms;
}

@keyframes valtyTrustbarItemIn {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* ----------------------------------------------------------------
   Cold-Start Promise · deferred minute counter
   ----------------------------------------------------------------
   Static by default: 10 MIN and all content are visible. The runtime
   adds `.is-enhanced`, sets the counter to 0, counts to 10 over one
   second, and reveals the supporting copy, CTAs, and stats rail while
   the counter is still running.
   Runtime:
     - assets/cold-start.js
   ---------------------------------------------------------------- */
.valty-coldstart [data-valty-coldstart-count] {
  display: inline-block;
  width: 2ch;
  text-align: right;
}

.valty-coldstart.is-enhanced .valty-coldstart__item {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(8px);
}

.valty-coldstart.is-static .valty-coldstart__item {
  opacity: 1;
  transform: none;
  filter: none;
}

.valty-coldstart.is-counting .valty-coldstart__item,
.valty-coldstart.is-revealing .valty-coldstart__item {
  will-change: transform, opacity, filter;
}

.valty-coldstart.is-revealing .valty-coldstart__item {
  animation: valtyColdstartAfterIn 650ms var(--site-ease) both;
}

.valty-coldstart.is-revealing .valty-coldstart__item:nth-child(1) {
  animation-delay: 120ms;
}

.valty-coldstart.is-revealing .valty-coldstart__item:nth-child(2) {
  animation-delay: 240ms;
}

.valty-coldstart.is-revealing .valty-coldstart__item:nth-child(3) {
  animation-delay: 360ms;
}

.valty-coldstart.is-revealing .valty-coldstart__item:nth-child(4) {
  animation-delay: 480ms;
}

@keyframes valtyColdstartAfterIn {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* ----------------------------------------------------------------
   How It Works · deferred one-by-one step reveal
   ----------------------------------------------------------------
   Mirrors the EBITDA Bridge enhancement contract: content is static
   by default, then the runtime adds `.is-enhanced` only when it can
   safely animate the section on viewport entry.
   Runtime:
     - assets/how-it-works.js
   ---------------------------------------------------------------- */
.valty-how.is-enhanced .valty-how__intro-item,
.valty-how.is-enhanced .valty-how__step {
  opacity: 0;
  filter: blur(10px);
}

.valty-how.is-enhanced .valty-how__intro-item {
  transform: translateY(14px);
}

.valty-how.is-enhanced .valty-how__step {
  transform: translateX(-24px);
}

.valty-how.is-static .valty-how__intro-item,
.valty-how.is-static .valty-how__step {
  opacity: 1;
  transform: none;
  filter: none;
}

.valty-how.is-playing .valty-how__intro-item,
.valty-how.is-playing .valty-how__step {
  will-change: transform, opacity, filter;
}

.valty-how.is-playing .valty-how__intro-item:nth-child(1) {
  animation: valtyHowIntroIn 680ms var(--site-ease) 0ms both;
}

.valty-how.is-playing .valty-how__intro-item:nth-child(2) {
  animation: valtyHowIntroIn 680ms var(--site-ease) 110ms both;
}

.valty-how.is-playing .valty-how__intro-item:nth-child(3) {
  animation: valtyHowIntroIn 680ms var(--site-ease) 220ms both;
}

.valty-how.is-playing .valty-how__step:nth-child(1) {
  animation: valtyHowStepIn 760ms var(--site-ease) 420ms both;
}

.valty-how.is-playing .valty-how__step:nth-child(2) {
  animation: valtyHowStepIn 760ms var(--site-ease) 600ms both;
}

.valty-how.is-playing .valty-how__step:nth-child(3) {
  animation: valtyHowStepIn 760ms var(--site-ease) 780ms both;
}

.valty-how.is-playing .valty-how__step:nth-child(4) {
  animation: valtyHowStepIn 760ms var(--site-ease) 960ms both;
}

@keyframes valtyHowIntroIn {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes valtyHowStepIn {
  from {
    opacity: 0;
    transform: translateX(-24px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* ----------------------------------------------------------------
   PE Deal Lifecycle · intro stagger + left-to-right stages
   ----------------------------------------------------------------
   Top copy appears first with a short vertical stagger. The timeline
   rail and cards then resolve left-to-right, matching the How It Works
   step reveal while preserving the existing grid.
   Runtime:
     - assets/lifecycle.js
   ---------------------------------------------------------------- */
.valty-lifecycle.is-enhanced .valty-lifecycle__intro-item,
.valty-lifecycle.is-enhanced .valty-lifecycle__card {
  opacity: 0;
  filter: blur(10px);
}

.valty-lifecycle.is-enhanced .valty-lifecycle__intro-item {
  transform: translateY(14px);
}

.valty-lifecycle.is-enhanced .valty-lifecycle__card {
  transform: translateX(-24px);
}

.valty-lifecycle.is-enhanced .valty-lifecycle__rail-segment {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.valty-lifecycle.is-static .valty-lifecycle__intro-item,
.valty-lifecycle.is-static .valty-lifecycle__card,
.valty-lifecycle.is-static .valty-lifecycle__rail-segment {
  opacity: 1;
  transform: none;
  filter: none;
}

.valty-lifecycle.is-playing .valty-lifecycle__intro-item,
.valty-lifecycle.is-playing .valty-lifecycle__card,
.valty-lifecycle.is-playing .valty-lifecycle__rail-segment {
  will-change: transform, opacity, filter;
}

.valty-lifecycle.is-playing .valty-lifecycle__intro-item:nth-child(1) {
  animation: valtyLifecycleIntroIn 680ms var(--site-ease) 100ms both;
}

.valty-lifecycle.is-playing .valty-lifecycle__intro-item:nth-child(2) {
  animation: valtyLifecycleIntroIn 680ms var(--site-ease) 250ms both;
}

.valty-lifecycle.is-playing .valty-lifecycle__intro-item:nth-child(3) {
  animation: valtyLifecycleIntroIn 680ms var(--site-ease) 400ms both;
}

.valty-lifecycle.is-playing .valty-lifecycle__rail-segment:nth-child(1),
.valty-lifecycle.is-playing .valty-lifecycle__card:nth-child(1) {
  animation-delay: 760ms;
}

.valty-lifecycle.is-playing .valty-lifecycle__rail-segment:nth-child(2),
.valty-lifecycle.is-playing .valty-lifecycle__card:nth-child(2) {
  animation-delay: 900ms;
}

.valty-lifecycle.is-playing .valty-lifecycle__rail-segment:nth-child(3),
.valty-lifecycle.is-playing .valty-lifecycle__card:nth-child(3) {
  animation-delay: 1040ms;
}

.valty-lifecycle.is-playing .valty-lifecycle__rail-segment:nth-child(4),
.valty-lifecycle.is-playing .valty-lifecycle__card:nth-child(4) {
  animation-delay: 1180ms;
}

.valty-lifecycle.is-playing .valty-lifecycle__rail-segment:nth-child(5),
.valty-lifecycle.is-playing .valty-lifecycle__card:nth-child(5) {
  animation-delay: 1320ms;
}

.valty-lifecycle.is-playing .valty-lifecycle__rail-segment:nth-child(6),
.valty-lifecycle.is-playing .valty-lifecycle__card:nth-child(6) {
  animation-delay: 1460ms;
}

.valty-lifecycle.is-playing .valty-lifecycle__rail-segment {
  animation-name: valtyLifecycleRailIn;
  animation-duration: 560ms;
  animation-timing-function: var(--site-ease);
  animation-fill-mode: both;
}

.valty-lifecycle.is-playing .valty-lifecycle__card {
  animation-name: valtyLifecycleCardIn;
  animation-duration: 720ms;
  animation-timing-function: var(--site-ease);
  animation-fill-mode: both;
}

@keyframes valtyLifecycleIntroIn {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes valtyLifecycleRailIn {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes valtyLifecycleCardIn {
  from {
    opacity: 0;
    transform: translateX(-24px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* ----------------------------------------------------------------
   EBITDA Bridge · staged cards + final rail draw
   ----------------------------------------------------------------
   Scoped to `.valty-bridge` so the homepage can animate this
   product-output section without affecting any other content.
   Runtime:
     - assets/ebitda-bridge.js
   ---------------------------------------------------------------- */
.valty-bridge__shell {
  max-width: 1280px;
  margin-inline: auto;
  padding:
    clamp(5rem, 10vh, 6rem)
    clamp(1.5rem, 4vw, 2.5rem);
}

.valty-bridge__intro {
  max-width: 42rem;
  margin: 0 auto clamp(2.75rem, 6vh, 4rem);
  text-align: center;
}

.valty-bridge__eyebrow {
  font-family: var(--site-font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
}

.valty-bridge__title {
  margin: 0.875rem 0 0;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  text-wrap: balance;
}

.valty-bridge__title span {
  color: rgba(255, 255, 255, 0.40);
}

.valty-bridge__body {
  max-width: 40rem;
  margin: 1.25rem auto 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}

.valty-bridge__frame {
  position: relative;
}

.valty-bridge__rail {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}

.valty-bridge__rail::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.36) 100%);
  transform: scaleX(0);
  transform-origin: left center;
}

.valty-bridge__rail-glow {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.82) 42%, rgba(255, 255, 255, 0) 100%);
  transform: scaleX(0);
  transform-origin: left center;
}

.valty-bridge__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(440px, 2fr) minmax(240px, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.valty-bridge__card,
.valty-bridge__ledger {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #050506;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

.valty-bridge__card {
  min-height: 324px;
  padding: clamp(1.75rem, 2.8vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.valty-bridge__label,
.valty-bridge__subcopy,
.valty-bridge__code {
  font-family: var(--site-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.valty-bridge__label,
.valty-bridge__subcopy {
  font-size: 10px;
}

.valty-bridge__label {
  color: rgba(255, 255, 255, 0.40);
}

.valty-bridge__label--strong,
.valty-bridge__subcopy--strong {
  color: rgba(255, 255, 255, 0.60);
}

.valty-bridge__amount {
  margin-top: 0.875rem;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.valty-bridge__subcopy {
  margin-top: 0.875rem;
  color: rgba(255, 255, 255, 0.40);
}

.valty-bridge__ledger {
  display: flex;
  flex-direction: column;
  min-height: 324px;
}

.valty-bridge__row {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 120px;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
}

.valty-bridge__row + .valty-bridge__row {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.valty-bridge__code {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
}

.valty-bridge__copy {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.valty-bridge__delta {
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}
.valty-bridge__delta--neg { color: #ff7378; }
.valty-bridge__delta--pos { color: #7be9cd; }

.valty-bridge.is-enhanced .valty-bridge__card,
.valty-bridge.is-enhanced .valty-bridge__ledger {
  opacity: 0;
  filter: blur(10px);
}

.valty-bridge.is-enhanced .valty-bridge__intro {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
}

.valty-bridge.is-enhanced .valty-bridge__card--start {
  transform: translateX(-24px);
}

.valty-bridge.is-enhanced .valty-bridge__ledger {
  transform: translateY(14px) scale(0.985);
}

.valty-bridge.is-enhanced .valty-bridge__card--end {
  transform: translateX(24px);
}

.valty-bridge.is-static .valty-bridge__intro,
.valty-bridge.is-static .valty-bridge__card,
.valty-bridge.is-static .valty-bridge__ledger {
  opacity: 1;
  transform: none;
  filter: none;
}

.valty-bridge.is-static .valty-bridge__rail::before {
  opacity: 0.72;
  transform: scaleX(1);
}

.valty-bridge.is-static .valty-bridge__rail-glow {
  opacity: 0.82;
  transform: scaleX(1);
}

.valty-bridge.is-playing .valty-bridge__intro {
  animation: valtyBridgeIntro 620ms ease-out both;
}

.valty-bridge.is-playing .valty-bridge__card--start {
  animation: valtyBridgeCardLeft 780ms var(--site-ease) 720ms both;
}

.valty-bridge.is-playing .valty-bridge__ledger {
  animation: valtyBridgeLedger 720ms var(--site-ease) 1020ms both;
}

.valty-bridge.is-playing .valty-bridge__card--end {
  animation: valtyBridgeCardRight 780ms var(--site-ease) 1360ms both;
}

.valty-bridge.is-playing .valty-bridge__rail::before {
  animation: valtyBridgeLineDraw 500ms linear 2080ms both;
}

.valty-bridge.is-playing .valty-bridge__rail-glow {
  animation: valtyBridgeGlowDraw 500ms linear 2080ms both;
}

@keyframes valtyBridgeIntro {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes valtyBridgeCardLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes valtyBridgeLedger {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes valtyBridgeCardRight {
  from {
    opacity: 0;
    transform: translateX(24px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes valtyBridgeLineDraw {
  from {
    opacity: 0.72;
    transform: scaleX(0);
  }
  to {
    opacity: 0.72;
    transform: scaleX(1);
  }
}

@keyframes valtyBridgeGlowDraw {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  1% {
    opacity: 0.82;
  }
  to {
    opacity: 0.82;
    transform: scaleX(1);
  }
}

@media (max-width: 1100px) {
  .valty-bridge__grid {
    grid-template-columns: 1fr;
  }

  .valty-bridge__rail {
    display: none;
  }

  .valty-bridge__card {
    min-height: 220px;
  }

  .valty-bridge__ledger {
    min-height: auto;
  }

  .valty-bridge__row {
    flex: initial;
  }
}

@media (max-width: 720px) {
  .valty-bridge__shell {
    padding:
      clamp(4rem, 9vh, 5rem)
      1rem;
  }

  .valty-bridge__intro {
    margin-bottom: 2.25rem;
  }

  .valty-bridge__title {
    font-size: clamp(28px, 9vw, 40px);
  }

  .valty-bridge__body {
    font-size: 13px;
  }

  .valty-bridge__row {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0.875rem;
  }

  .valty-bridge__delta {
    grid-column: 2;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .valty-bridge.is-enhanced .valty-bridge__card,
  .valty-bridge.is-enhanced .valty-bridge__ledger,
  .valty-bridge.is-enhanced .valty-bridge__rail::before,
  .valty-bridge.is-enhanced .valty-bridge__rail-glow {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* ----------------------------------------------------------------
   Integrations · logo cells
   ----------------------------------------------------------------
   Real partner wordmarks live as white-inked SVGs in
   /found-logos-assets/white/*.svg. Each cell is a fixed-height
   flex centre; per-logo size overrides keep the marks optically
   balanced — some wordmarks are taller (Azure, AWS) than others
   (Palo Alto, Exabeam), so uniform `max-height` alone doesn't
   work. Values tuned per logo and carried over from WITH-LOGOS.
   ---------------------------------------------------------------- */
.valty-int-cell { min-height: 218px; padding: 28px 26px; }
.valty-int-logo {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.valty-int-logo img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.valty-int-logo--crowdstrike img { width: 132px; max-width: 100%; max-height: none; }
.valty-int-logo--palo-alto  img { max-height: 29px; }
.valty-int-logo--exabeam    img { max-height: 29px; }
.valty-int-logo--extrahop   img { max-height: 28px; }
.valty-int-logo--aws        img { max-height: 33px; }
.valty-int-logo--azure      img { width: 30px; height: 30px; max-width: none; max-height: none; }
.valty-int-logo--okta       img { max-height: 34px; }


/* ╔══════════════════════════════════════════════════════════╗
   ║ 10 · SECTION — PLATFORM BENTO                            ║
   ╚══════════════════════════════════════════════════════════╝
   `.gslot` hairline placeholder boxes inside the bento grid.
   Swapped for real art per GRAPHICS.md at handoff. Scoped under
   `.valty-bento` so they don't leak into any other grid.       */
.valty-bento .gslot {
  position: relative;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 10px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.valty-bento .gslot::before {
  content: "graphic";
  position: absolute;
  top: 8px; left: 8px;
  font-family: var(--site-font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.valty-bento .gslot::after {
  content: "";
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform: rotate(45deg);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║ 10b · SECTION — PLATFORM STACK                          ║
   ╚══════════════════════════════════════════════════════════╝ */
.valty-platform-stack {
  position: relative;
  height: calc(100vh + var(--platform-pin-travel, 4600px));
  background: var(--site-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.valty-platform-stack__pin-stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  height: 100vh;
  overflow: hidden;
  background: var(--site-bg);
}

.valty-platform-stack.is-pin-active .valty-platform-stack__pin-stage {
  position: fixed;
  top: 0;
  bottom: auto;
  z-index: 2;
}

.valty-platform-stack.is-pin-after .valty-platform-stack__pin-stage {
  position: absolute;
  top: auto;
  bottom: 0;
}

.valty-platform-stack__pin-title {
  position: static;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(34px, 5.5vh, 54px) 40px 14px;
  text-align: center;
  pointer-events: none;
  transition:
    opacity 0.75s ease,
    filter 0.75s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.valty-platform-stack__pin-title .valty-platform-stack__eyebrow {
  margin-bottom: 14px;
  color: rgba(244, 244, 245, 0.40);
}

.valty-platform-stack__pin-h2 {
  max-width: 32ch;
  margin: 0 0 14px;
  color: var(--site-text);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.18;
}

.valty-platform-stack__pin-h2 span { color: rgba(244, 244, 245, 0.40); }

.valty-platform-stack__pin-lede {
  max-width: 52ch;
  margin: 0;
  color: rgba(244, 244, 245, 0.55);
  font-size: 13px;
  line-height: 1.6;
}

.valty-platform-stack__pin-cards {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  padding: 0 0 6px;
}

.valty-platform-stack__pin-track {
  display: flex;
  gap: 24px;
  padding: 0 40px;
  will-change: transform;
}

.valty-platform-stack__feature {
  flex: 0 0 min(1100px, calc(100vw - 80px));
  margin: 0;
}

.valty-platform-stack__pin-progress {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 40px 14px;
  color: rgba(244, 244, 245, 0.40);
  font-family: var(--site-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.valty-platform-stack__pin-bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
}

.valty-platform-stack__pin-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--site-text);
}

.valty-platform-stack__pin-counter b {
  color: var(--site-text);
  font-weight: 500;
}

.valty-platform-stack__pin-cards,
.valty-platform-stack__pin-progress {
  transition:
    opacity 0.75s ease,
    filter 0.75s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.valty-platform-stack.is-reveal-ready:not(.is-visible) .valty-platform-stack__pin-cards,
.valty-platform-stack.is-reveal-ready:not(.is-visible) .valty-platform-stack__pin-progress {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(24px);
}

.valty-platform-stack.is-visible .valty-platform-stack__pin-cards,
.valty-platform-stack.is-visible .valty-platform-stack__pin-progress {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.valty-platform-stack.is-visible .valty-platform-stack__pin-cards { transition-delay: 0.10s; }
.valty-platform-stack.is-visible .valty-platform-stack__pin-progress { transition-delay: 0.18s; }

.valty-platform-stack.is-pin-active .valty-platform-stack__pin-title,
.valty-platform-stack.is-pin-after .valty-platform-stack__pin-title {
  position: absolute;
  top: clamp(34px, 5.5vh, 54px);
  left: 0;
  right: 0;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(24px);
}

.valty-platform-stack__card {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: stretch;
  padding: clamp(34px, 5.6vh, 56px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #050506;
}

.valty-platform-stack__visual { min-width: 0; }

.valty-platform-stack__ui-host {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 500;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: var(--site-bg);
}

.valty-platform-stack__ui-host iframe {
  display: block;
  width: 720px;
  height: 500px;
  border: 0;
  transform-origin: top left;
}

.valty-platform-stack__ui-host::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 5, 6, 1) 0%, rgba(5, 5, 6, 0.15) 50%, rgba(5, 5, 6, 0) 100%);
}

.valty-platform-stack__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

.valty-platform-stack__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(244, 244, 245, 0.55);
}

.valty-platform-stack__icon i {
  font-size: 24px;
  line-height: 1;
}

.valty-platform-stack__eyebrow {
  margin-bottom: 16px;
  color: rgba(244, 244, 245, 0.35);
  font-family: var(--site-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.valty-platform-stack__copy h3 {
  margin: 0 0 18px;
  color: var(--site-text);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
}

.valty-platform-stack__copy h3 span { color: rgba(244, 244, 245, 0.55); }

.valty-platform-stack__copy p {
  max-width: 460px;
  margin: 0;
  color: rgba(244, 244, 245, 0.55);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .valty-platform-stack {
    height: auto;
  }

  .valty-platform-stack__pin-stage {
    position: static;
    height: auto;
    overflow: visible;
  }

  .valty-platform-stack__pin-title {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    padding: 72px var(--v-gutter-mobile) 32px;
    pointer-events: auto;
  }

  .valty-platform-stack__pin-cards {
    overflow: visible;
    padding: 0 var(--v-gutter-mobile) 72px;
  }

  .valty-platform-stack__pin-track {
    flex-direction: column;
    gap: 20px;
    padding: 0;
    transform: none !important;
  }

  .valty-platform-stack__feature {
    flex: 0 0 auto;
    width: 100%;
  }

  .valty-platform-stack__pin-progress {
    display: none;
  }

  .valty-platform-stack__card {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 28px;
  }

  .valty-platform-stack__copy {
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .valty-platform-stack__card {
    padding: 24px;
  }

  .valty-platform-stack__copy h3 {
    font-size: clamp(24px, 7vw, 30px);
  }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 11 · RESPONSIVE — Mobile (< 768px)                       ║
   ╚══════════════════════════════════════════════════════════╝
   Below this breakpoint:
     • Header: desktop nav + CTA hide, hamburger shows.
               Tap opens full-screen drawer (locked body scroll).
     • Footer: grid collapses to single column.                */
@media (max-width: 767px) {

  /* ── Header ── */
  .valty-header__nav,
  .valty-header__inner > .valty-header__cta { display: none; }
  .valty-header__inner > .valty-header__toggle { display: inline-flex; }

  /* Drawer: full-screen overlay on 100dvh. */
  .valty-header__drawer {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    z-index: var(--vh-z-drawer);
    background: #08080A;
    padding-inline: var(--vh-padding-x);
    flex-direction: column;
  }
  .valty-header__drawer[data-open="true"] { display: flex; }

  .valty-header__drawer-top {
    height: var(--vh-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--vh-border);
  }
  .valty-header__drawer-top .valty-header__toggle { display: inline-flex; }

  .valty-header__drawer-nav {
    display: flex;
    flex-direction: column;
    padding-block: 2rem;
    gap: 0.125rem;
    flex: 1;
    overflow-y: auto;
  }
  .valty-header__drawer-nav a {
    font-size: clamp(28px, 8vw, 40px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--vh-text-strong);
    padding-block: 0.5rem;
    transition: opacity var(--site-duration) var(--site-ease);
  }
  .valty-header__drawer-nav a:active { opacity: 0.5; }

  .valty-header__drawer .valty-header__cta {
    align-self: flex-start;
    margin-top: 1rem;
    margin-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    font-size: 12px;
    padding: 0.875rem 1.25rem;
  }

  /* Body scroll is locked while drawer is open (set by header.js). */
  body[data-valty-header-open="true"] { overflow: hidden; }

  /* ── Footer ── */
  /* Full variant → single column, side border flips to bottom. */
  .valty-footer--full .valty-footer__grid { grid-template-columns: 1fr; }
  .valty-footer--full .valty-footer__contact {
    padding: 1.5rem;
    border-right: 0;
    border-bottom: 1px solid var(--vf-border);
  }
  .valty-footer--full .valty-footer__nav {
    padding: 1.5rem;
    gap: 2rem;
  }
  .valty-footer--full .valty-footer__contact-row {
    grid-template-columns: 90px 1fr;
    gap: 1rem;
  }
  .valty-footer--full .valty-footer__legal {
    padding: 1rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* Minimal variant → stack + wrap, drop the fixed row height. */
  .valty-footer--minimal .valty-footer__row {
    padding: 1.25rem 1.5rem;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .valty-footer--minimal .valty-footer__legal-line {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 12 · REDUCED MOTION                                      ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; filter: none; transform: none; }

  [data-valty-sequence] [data-sequence-shell],
  [data-valty-sequence] [data-sequence-item] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  body.valty-page--animated-hero .valty-header,
  body.valty-page--animated-hero .valty-trustbar__item,
  body.valty-page--animated-hero .valty-trustbar__sep,
  .valty-footer.is-enhanced .valty-footer__contact,
  .valty-footer.is-enhanced .valty-footer__nav,
  .valty-footer.is-enhanced .valty-footer__legal,
  .valty-footer.is-enhanced.valty-footer--minimal .valty-footer__logo,
  .valty-footer.is-enhanced.valty-footer--minimal .valty-footer__legal-line {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .valty-header *,
  .valty-header *::before,
  .valty-header *::after,
  .valty-footer *,
  .valty-footer *::before,
  .valty-footer *::after {
    transition-duration: 1ms !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   M · MOBILE-OPTIMIZED RESPONSIVE AUDIT
   ────────────────────────────────────────────────────────────────────────────
   Everything below this marker is additive. The original stylesheet was
   copied verbatim above so rolling back is a one-line delete. These rules:

     · enforce a site-wide horizontal gutter token (--v-gutter)
     · eliminate horizontal scroll on every viewport
     · convert rigid Tailwind grid utilities (.grid-cols-3/4/6/12, hardcoded
       grid-template-columns, col-span-*) to flexible mobile fallbacks
       at two breakpoints: <=1024px (tablet) and <=480px (mobile)
     · replace fixed card min-heights and aspect-ratio:1/1 with content-
       driven sizing on mobile so text never truncates or overflows
     · guarantee >=44px tap targets and full-width CTAs on mobile
     · restack the hero so the browser preview sits above the copy on mobile
       (the copy below), matching the brief's mobile hero spec
     · ship a single canonical hamburger morph-to-X (the full menu
       interaction catalogue lives in MENU-ANIMATIONS.html)

   Breakpoints:
     mobile  <= 480px
     tablet  481px - 1024px
     desktop >= 1025px
   ════════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────
   M0 · Global overflow + gutter tokens
   ────────────────────────────────────────────────────────── */
:root {
  --v-gutter:        clamp(1rem, 4.5vw, 2.5rem);
  --v-gutter-mobile: 1rem;
  --v-gutter-tablet: 1.5rem;
  --v-gutter-desktop: 2.5rem;
}

html, body { overflow-x: hidden; max-width: 100%; }
body, main, section { min-width: 0; }


/* ══════════════════════════════════════════════════════════
   Auto-hide header on scroll down, reveal on scroll up
   ──────────────────────────────────────────────────────────
   Active on every viewport. JS (see INDEX-MOBILE-OPTIMIZED.html)
   toggles `body[data-header-hidden="true|false"]`.

   Uses the independent `translate` property (not `transform`) so the
   initial `valtyHeaderDropIn` entrance animation — which uses its own
   `transform: translateY(-18px)` keyframe — keeps working without
   fighting the slide-out.

   Gradient rides along with the header so the dark fade doesn't
   linger on its own when the bar is gone.
   ══════════════════════════════════════════════════════════ */
.valty-header {
  transition:
    translate 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity   260ms ease;
  will-change: translate;
}
.valty-header-gradient {
  transition:
    translate 460ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity   320ms ease 20ms;
  will-change: translate, opacity;
}
body[data-header-hidden="true"] .valty-header {
  translate: 0 -100%;
  opacity: 0;
  pointer-events: none;
}
body[data-header-hidden="true"] .valty-header-gradient {
  translate: 0 -100%;
  opacity: 0;
}
/* When the drawer is open we must NEVER hide the header. The JS also
   guards this, but the CSS rule makes it bulletproof even during the
   exact frame when both attributes race. */
body[data-valty-header-open="true"] .valty-header,
body[data-valty-header-open="true"] .valty-header-gradient {
  translate: 0 0 !important;
  opacity: 1 !important;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .valty-header,
  .valty-header-gradient {
    transition: none !important;
  }
}


/* Only clamp images; leave canvas + iframe untouched because the hero
   browser deliberately oversizes its iframe to then scale it down. */
img, svg, video { max-width: 100%; height: auto; }

/* Explicit escape hatches for the animated-hero stage so the global
   clamps above (including the `width: 100%` fallback on .valty-hero)
   never touch the scaled browser frame or the full-bleed canvas. */
.valty-hero__canvas,
.bottom-cta-stage .valty-hero__canvas { max-width: none; max-height: none; width: 100%; height: 100%; }
.valty-hero__browser-frame { max-width: none; max-height: none; }

/* The entire decorative hero browser (chrome + iframe) must NOT capture
   wheel / touch / click events. It's aria-hidden and tabindex=-1, and
   the iframe inside used to intercept touch gestures on iOS (the user
   felt "scroll stops working" whenever their finger landed on the hero
   preview). Passing `pointer-events: none` to the whole browser lets
   the page scroll freely over it at every viewport. */
.valty-hero__browser,
.valty-hero__browser-frame { pointer-events: none; }

/* Hero copy is visual except for the CTA. Let wheel/touch gestures
   target the scrollable page instead of reveal-composited text layers. */
.valty-hero > .valty-hero__content { pointer-events: none; }
.valty-hero > .valty-hero__content .valty-hero__cta {
  pointer-events: auto;
  touch-action: manipulation;
}

/* Kill the 100vw overflow risk on the hero. */
.valty-hero { width: 100%; }

/* Tabular cells in the bridge ledger must allow wrapping so labels never clip. */
.valty-bridge__copy { min-width: 0; overflow-wrap: anywhere; }


/* ──────────────────────────────────────────────────────────
   M1 · Mobile · <= 480px
   ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  body[data-mobile-audit] main > section > .max-w-\[1280px\],
  body[data-mobile-audit] main > section > .max-w-\[1200px\] {
    padding-left: var(--v-gutter-mobile);
    padding-right: var(--v-gutter-mobile);
  }
  body[data-mobile-audit] .px-10,
  body[data-mobile-audit] .px-8 {
    padding-left: var(--v-gutter-mobile);
    padding-right: var(--v-gutter-mobile);
  }
  body[data-mobile-audit] .py-24 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  /* Every multi-column Tailwind grid -> single column on mobile */
  body[data-mobile-audit] .grid-cols-2,
  body[data-mobile-audit] .grid-cols-3,
  body[data-mobile-audit] .grid-cols-4,
  body[data-mobile-audit] .grid-cols-6,
  body[data-mobile-audit] .grid-cols-12 {
    grid-template-columns: 1fr !important;
  }
  body[data-mobile-audit] .col-span-2,
  body[data-mobile-audit] .col-span-5,
  body[data-mobile-audit] .col-span-7,
  body[data-mobile-audit] .col-span-12 {
    grid-column: 1 / -1 !important;
  }
  body[data-mobile-audit] .row-span-2 { grid-row: auto !important; }
  body[data-mobile-audit] .grid-rows-3 { grid-template-rows: auto !important; }

  /* Integrations: hardcoded "grid-template-columns: 5fr 7fr" */
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .grid[style*="5fr 7fr"],
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .row-span-2 {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding: 1.75rem !important;
  }
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Tame the cell and the wordmark inside so every logo reads at a similar
     optical weight and the cells don't tower over the copy on mobile.
     Original: `min-height: 218px` + `padding: 28px 26px` with big per-logo
     widths — way too dominant at 360 px of viewport. */
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .valty-int-cell {
    min-height: 84px;
    padding: 14px 12px;
    /* Desktop puts every logo on a single row of 4, so only border-r was
       needed between cells. On mobile we stack into a 2×N grid and need
       horizontal hairlines between each pair. Adding border-bottom on
       every cell creates those dividers; the bottommost row's extra
       hairline overlaps the container's own border-bottom without a
       visible doubling. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  /* The very last pair of cells sits flush with the container's bottom
     border — drop their internal border-bottom to avoid the subtle
     double-line where the two meet. */
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] > div > .max-w-\[1280px\] .grid:last-child > .valty-int-cell {
    border-bottom: 0;
  }
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .valty-int-logo img {
    max-height: 22px !important;
    max-width: 78% !important;
    width: auto !important;
    height: auto !important;
  }
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .valty-int-logo--crowdstrike img {
    width: 86px !important;
    max-height: 20px !important;
  }
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .valty-int-logo--azure img {
    width: 22px !important;
    height: 22px !important;
  }
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .valty-int-logo--aws img { max-height: 26px !important; }
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .valty-int-logo--okta img { max-height: 24px !important; }
  /* "+ more soon" label balance. */
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .valty-int-cell > span {
    font-size: 9px;
  }

  /* Compliance */
  body[data-mobile-audit] section[aria-labelledby="compliance-heading"] .grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body[data-mobile-audit] section[aria-labelledby="compliance-heading"] .grid-cols-6 > div {
    border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding: 1.25rem 0.75rem;
  }
  body[data-mobile-audit] section[aria-labelledby="compliance-heading"] .grid-cols-6 > div:nth-child(2n) {
    border-right: 0 !important;
  }
  body[data-mobile-audit] section[aria-labelledby="compliance-heading"] .grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Bento */
  body[data-mobile-audit] .valty-bento .grid.grid-cols-4 {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  body[data-mobile-audit] .valty-bento .min-h-\[720px\] { min-height: 0 !important; }
  body[data-mobile-audit] .valty-bento .grid > div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    /* Unify padding across the Featured (p-8) and satellite (p-5) cells
       so every one of the eight blocks reads at the same rhythm on mobile. */
    padding: 1.5rem !important;
  }
  body[data-mobile-audit] .valty-bento .grid > div:last-child { border-bottom: 0; }
  body[data-mobile-audit] .valty-bento .gslot {
    aspect-ratio: 16 / 9 !important;
    min-height: 120px;
  }

  /* Platform Bento intro: on desktop the eyebrow+title sit left of a
     right-aligned paragraph in a flex row. On mobile, centre the whole
     block and match the 20 px heading→sub gap used by every other
     section's intro. */
  body[data-mobile-audit] .valty-bento > div > .flex.items-end {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.25rem;                 /* matches `mt-5` elsewhere */
  }
  body[data-mobile-audit] .valty-bento > div > .flex.items-end > .max-w-xl {
    max-width: 100%;
  }
  body[data-mobile-audit] .valty-bento > div > .flex.items-end > .text-right {
    text-align: center;
    max-width: 100%;
  }

  /* Category definition — restrict the padding override to the OUTER
     3-column grid only (`.grid-cols-3 > div`), so the inner 2-col grid
     inside the NOW·VALTY cell doesn't get a second 1.75rem padding
     added on top of the cell's own. The inner stacked lists now share
     the same left indent as THEN and the Hardware-verified block. */
  body[data-mobile-audit] section[aria-labelledby="category-heading"] .grid-cols-3 > div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding: 1.75rem !important;
  }
  body[data-mobile-audit] section[aria-labelledby="category-heading"] .grid-cols-3 > div:last-child {
    border-bottom: 0;
  }
  /* Inner NOW·VALTY two-up grid collapses to one column; kill its inner
     padding + flatten the offset so both lists align with the outer cell. */
  body[data-mobile-audit] section[aria-labelledby="category-heading"] .grid-cols-3 > div > .grid {
    padding: 0;
    gap: 1.5rem;
  }
  body[data-mobile-audit] section[aria-labelledby="category-heading"] .pt-\[30px\] {
    padding-top: 0 !important;
  }

  /* Lifecycle */
  body[data-mobile-audit] .valty-lifecycle .grid-cols-6 { grid-template-columns: 1fr !important; }
  body[data-mobile-audit] .valty-lifecycle__rail { display: none !important; }

  /* Persona cards: drop 1/1 aspect ratio on mobile.
     The desktop layout relies on a `.flex-1` spacer to push the label +
     quote toward the bottom of a square card. Without the square, that
     spacer collapses to zero and the icon sticks to the eyebrow label.
     Reintroduce breathing room explicitly. */
  body[data-mobile-audit] .valty-persona-card[style*="aspect-ratio"] {
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }
  body[data-mobile-audit] .valty-persona-card .min-h-\[7\.5em\] { min-height: 0 !important; }
  body[data-mobile-audit] .valty-persona-card .valty-persona-card__label {
    margin-top: 1.5rem;
  }
  body[data-mobile-audit] .valty-persona-card { padding: 1.5rem; }

  /* DP Spotlight */
  body[data-mobile-audit] section[data-valty-dp-spotlight] .grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  body[data-mobile-audit] section[data-valty-dp-spotlight] .col-span-5,
  body[data-mobile-audit] section[data-valty-dp-spotlight] .col-span-7 {
    grid-column: 1 / -1 !important;
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Problem section split */
  body[data-mobile-audit] section[aria-labelledby="problem-heading"] .grid-cols-12 { gap: 2rem; }

  /* Bottom CTA meta */
  body[data-mobile-audit] .bottom-cta-meta { grid-template-columns: 1fr !important; }

  /* EBITDA Bridge ledger · force a single line per row on mobile.
     The base stylesheet (section 13 @ ≤720 px) collapses the row to
     2 columns and pushes the delta beneath the copy — this override
     restores CODE · LABEL · DELTA on one line at tighter type sizes. */
  body[data-mobile-audit] .valty-bridge__row {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 0.625rem !important;
    padding: 0.625rem 0.875rem !important;
    align-items: center;
  }
  body[data-mobile-audit] .valty-bridge__code {
    font-size: 8px;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
  body[data-mobile-audit] .valty-bridge__copy {
    font-size: 11.5px;
    line-height: 1.25;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-mobile-audit] .valty-bridge__delta {
    grid-column: auto !important;
    text-align: right !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  /* Bridge cards' vertical breathing can shrink a touch on narrow screens. */
  body[data-mobile-audit] .valty-bridge__card { min-height: 180px; padding: 1.25rem !important; }
  body[data-mobile-audit] .valty-bridge__amount { margin-top: 0.625rem; }

  /* How It Works */
  body[data-mobile-audit] .valty-how__steps {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;       /* between the 4 stacked steps */
  }
  /* Tighten the intro block: eyebrow / title / sub closer together. */
  body[data-mobile-audit] .valty-how .mb-14 { margin-bottom: 2.25rem; }
  body[data-mobile-audit] .valty-how .valty-how__intro-item.mb-3 { margin-bottom: 0.5rem; }   /* eyebrow → title */
  body[data-mobile-audit] .valty-how .valty-how__intro-item.mt-5 { margin-top: 0.625rem; }    /* title → sub */
  /* Tighten each step card: eyebrow → title → body. */
  body[data-mobile-audit] .valty-how__step .mt-4 { margin-top: 0.375rem !important; }          /* eyebrow → title */
  body[data-mobile-audit] .valty-how__step .mt-3 { margin-top: 0.375rem !important; }          /* title → body */
  body[data-mobile-audit] .valty-how__step > div:nth-child(2) { line-height: 1.08; }

  /* Fluid headline sizes on narrow screens */
  body[data-mobile-audit] h1.valty-hero__title { font-size: clamp(34px, 10vw, 44px) !important; }
  body[data-mobile-audit] section h2 { font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.08; }
  body[data-mobile-audit] section p  { overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
  body[data-mobile-audit] .valty-bridge__amount { font-size: clamp(32px, 9vw, 44px) !important; }

  /* Buttons: >=44px tap target; full-width in CTA groups */
  body[data-mobile-audit] .valty-btn {
    min-height: 44px;
    padding-block: 0.9rem;
  }
  body[data-mobile-audit] .valty-btn-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.625rem;
  }
  body[data-mobile-audit] .valty-btn-group > .valty-btn { justify-content: center; width: 100%; }
  body[data-mobile-audit] .valty-hero__cta  { width: 100%; justify-content: center; }
  body[data-mobile-audit] .valty-coldstart__item.valty-btn-group { margin-inline: auto; max-width: 22rem; }

  /* Trust bar · variant M · Hairline 2×2 micro-grid.
     Value left, tiny mono label right, hairline border on the right
     and bottom of each cell, cleared on the last column / last row.
     Separators (`.valty-trustbar__sep`) are display:none so CSS grid
     auto-places only the four `.valty-trustbar__item`s into the 2×2. */
  body[data-mobile-audit] .valty-trustbar {
    padding-block: 0;
    border-top: 1px solid var(--vt-border, rgba(255, 255, 255, 0.10));
    border-bottom: 1px solid var(--vt-border, rgba(255, 255, 255, 0.10));
  }
  body[data-mobile-audit] .valty-trustbar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    margin-inline: 0;
    max-width: none;
    gap: 0;
    font-family: var(--site-font-sans);
    font-size: inherit;
    letter-spacing: 0;
    text-transform: none;
    justify-content: stretch;
  }
  body[data-mobile-audit] .valty-trustbar__sep { display: none !important; }
  body[data-mobile-audit] .valty-trustbar__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.875rem;
    border-right: 1px solid var(--vt-border, rgba(255, 255, 255, 0.10));
    border-bottom: 1px solid var(--vt-border, rgba(255, 255, 255, 0.10));
    white-space: normal;
    text-align: left;
    color: var(--vt-text, rgba(244, 244, 245, 0.62));
  }
  /* Right column: no right border (items 2 and 4 — nth-child 3 and 7). */
  body[data-mobile-audit] .valty-trustbar__item:nth-child(3),
  body[data-mobile-audit] .valty-trustbar__item:nth-child(7) {
    border-right: 0;
  }
  /* Bottom row: no bottom border (items 3 and 4 — nth-child 5 and 7). */
  body[data-mobile-audit] .valty-trustbar__item:nth-child(5),
  body[data-mobile-audit] .valty-trustbar__item:nth-child(7) {
    border-bottom: 0;
  }
  body[data-mobile-audit] .valty-trustbar__item > .valty-trustbar__value {
    font-family: var(--site-font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--vt-text-strong, #F4F4F5);
    line-height: 1;
    flex: 0 0 auto;
    text-transform: none;
  }
  body[data-mobile-audit] .valty-trustbar__item > span:not(.valty-trustbar__value) {
    font-family: var(--site-font-mono);
    font-size: 7.5px;
    line-height: 1.25;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--site-text-mute, rgba(244, 244, 245, 0.35));
    max-width: 60%;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Logos marquee */
  body[data-mobile-audit] .valty-logos__cell { min-width: 144px; min-height: 64px; padding: 0.75rem 1rem; }

  /* Hero mobile stack: product proof above, copy below */
  body[data-mobile-audit] .valty-hero {
    min-height: auto;
    padding-top: calc(var(--vh-height, 4rem) + env(safe-area-inset-top, 0px));
    padding-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
  }
  body[data-mobile-audit] .valty-hero > .valty-hero__canvas,
  body[data-mobile-audit] .valty-hero > .valty-hero__fade,
  body[data-mobile-audit] .valty-hero > .valty-hero__spot { position: absolute; inset: 0; }
  body[data-mobile-audit] .valty-hero .valty-hero__browser {
    display: none !important;
  }
  body[data-mobile-audit] .valty-hero .valty-hero__mobile-proof {
    display: block !important;
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: calc(100% - var(--v-gutter-mobile) * 2);
    margin: 0.85rem var(--v-gutter-mobile) 1.35rem;
    aspect-ratio: 16 / 10;
    min-height: 190px;
    max-height: 250px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    order: 1;
    overflow: hidden;
  }
  body[data-mobile-audit] .valty-hero > .valty-hero__content {
    position: relative;
    order: 2;
    inset: auto;
    padding: 0 var(--v-gutter-mobile) 1rem;
    min-height: 0;
    max-width: 100%;
    text-align: left;
  }
  body[data-mobile-audit] .valty-hero > .valty-hero__content .valty-hero__subtitle { max-width: 38ch; }

  /* Hide the "Founding Design Partners" eyebrow on mobile — it reads
     awkwardly in a single narrow column and competes with the H1. */
  body[data-mobile-audit] .valty-hero .valty-hero__eyebrow { display: none !important; }

  /* Shorter top-gradient on mobile — the desktop default (260 px) eats
     almost a third of the small viewport. Trimmed to 140 px so the
     fade still masks the header's boundary but stops before the hero
     copy. */
  body[data-mobile-audit] .valty-header-gradient { height: 140px !important; }

  /* ── Footer · mobile padding bump ──────────────────────────
     The ≤767 px rules in section 13 kept everything on 1.5 rem padding.
     User feedback: footer feels cramped — logo tight to the top border,
     contact list tight to the divider below SECURITY, legal row tight
     to the last nav link. Bump the rhythm to 2.25–2.5 rem. */
  body[data-mobile-audit] .valty-footer--full .valty-footer__contact {
    padding: 2.5rem 1.5rem 2.25rem;
  }
  body[data-mobile-audit] .valty-footer--full .valty-footer__contact-list {
    margin-top: 2.25rem;
  }
  body[data-mobile-audit] .valty-footer--full .valty-footer__contact-row {
    padding-block: 1rem;
    gap: 1.25rem;
  }
  body[data-mobile-audit] .valty-footer--full .valty-footer__nav {
    padding: 2.5rem 1.5rem;
    gap: 2.5rem 1.75rem;
  }
  body[data-mobile-audit] .valty-footer--full .valty-footer__heading--spaced {
    margin-top: 2.5rem;
  }
  body[data-mobile-audit] .valty-footer--full .valty-footer__legal {
    padding: 1.75rem 1.5rem 2rem;
    gap: 1rem;
  }
  body[data-mobile-audit] .valty-footer--minimal .valty-footer__row {
    padding: 1.75rem 1.5rem;
  }

  /* ── Bottom CTA · Final "Your EBITDA is already at risk" ──
     The stage uses .valty-hero__content as the inner wrapper, reusing
     hero class names. Two dedicated mobile fixes:
       1) Undo the absolute centering (`top:50%; left:50%; translate`)
          that breaks at narrow viewports.
       2) Give the meta grid, buttons and typography sensible sizes so
          nothing overflows the 360 px viewport. */
  body[data-mobile-audit] .bottom-cta-stage {
    --bottom-cta-padding-x: var(--v-gutter-mobile);
    min-height: auto;
    padding: 3.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body[data-mobile-audit] .bottom-cta-stage > .valty-hero__content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 var(--v-gutter-mobile) !important;
    text-align: left;
    z-index: 3;
  }
  body[data-mobile-audit] .bottom-cta-stage .valty-hero__eyebrow {
    display: inline-flex;                 /* show this one even though hero's is hidden */
    margin-bottom: 0.5rem;
  }
  body[data-mobile-audit] .bottom-cta-stage .valty-hero__title {
    font-size: clamp(26px, 8vw, 34px) !important;
    max-width: 100%;
    line-height: 1.06;
    margin-top: 0.5rem;
  }
  body[data-mobile-audit] .bottom-cta-stage .valty-hero__subtitle {
    max-width: 100%;
    margin-top: 0.75rem;
  }
  body[data-mobile-audit] .bottom-cta-stage .bottom-cta-actions {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
    width: 100%;
  }
  body[data-mobile-audit] .bottom-cta-stage .bottom-cta-actions > .valty-btn {
    width: 100%;
    justify-content: center;
  }
  body[data-mobile-audit] .bottom-cta-stage .bottom-cta-meta {
    grid-template-columns: 1fr !important;
    max-width: 100%;
    margin-top: 1.5rem;
  }
  body[data-mobile-audit] .bottom-cta-stage .bottom-cta-meta > div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.875rem 1rem;
  }
  body[data-mobile-audit] .bottom-cta-stage .bottom-cta-meta > div:last-child { border-bottom: 0; }
  body[data-mobile-audit] .bottom-cta-stage .bottom-cta-meta strong { font-size: 18px; }
  /* Hide the decorative pixel rail overlay on mobile — it cropped the
     right edge and drew vertical ghost lines over the copy. */
  body[data-mobile-audit] .bottom-cta-stage .bottom-cta-ghost-rail { display: none; }
  /* Soften the mask so the canvas background stays subtle behind the
     copy at mobile widths (the default 70° angle left the right half
     visually heavy on small viewports). */
  body[data-mobile-audit] .bottom-cta-stage--rail::before {
    background:
      linear-gradient(180deg,
        rgba(8, 8, 10, 0.88) 0%,
        rgba(8, 8, 10, 0.72) 30%,
        rgba(8, 8, 10, 0.40) 80%,
        rgba(8, 8, 10, 0) 100%) !important;
  }

}


@media (max-width: 360px) and (max-height: 640px) {
  body[data-mobile-audit] .valty-hero {
    padding-top: calc(4.25rem + env(safe-area-inset-top, 0px));
    padding-bottom: 1.75rem;
  }

  body[data-mobile-audit] .valty-hero .valty-hero__mobile-proof {
    height: clamp(150px, 49vw, 164px);
    min-height: 0;
    max-height: none;
    margin: 0.65rem var(--v-gutter-mobile) 1rem;
    aspect-ratio: auto;
  }

  body[data-mobile-audit] h1.valty-hero__title {
    font-size: clamp(31px, 9.8vw, 36px) !important;
    line-height: 1.01;
  }

  body[data-mobile-audit] .valty-hero__subtitle {
    margin-top: 0.875rem;
    font-size: 12.5px;
    line-height: 1.46;
  }

  body[data-mobile-audit] .valty-hero__cta {
    margin-top: 1rem;
  }
}


/* ──────────────────────────────────────────────────────────
   M2 · Tablet · 481 - 1024px
   ────────────────────────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 1024px) {
  body[data-mobile-audit] main > section > .max-w-\[1280px\],
  body[data-mobile-audit] main > section > .max-w-\[1200px\] {
    padding-left: var(--v-gutter-tablet);
    padding-right: var(--v-gutter-tablet);
  }
  body[data-mobile-audit] .px-10 {
    padding-left: var(--v-gutter-tablet);
    padding-right: var(--v-gutter-tablet);
  }
  body[data-mobile-audit] .py-24 { padding-top: 4.5rem; padding-bottom: 4.5rem; }

  /* Bento → 2-up */
  body[data-mobile-audit] .valty-bento .grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    min-height: 0 !important;
  }
  body[data-mobile-audit] .valty-bento .col-span-2 { grid-column: span 2 / span 2 !important; }
  body[data-mobile-audit] .valty-bento .row-span-2 { grid-row: auto !important; }
  body[data-mobile-audit] .valty-bento .min-h-\[720px\] { min-height: 0 !important; }

  /* Category */
  body[data-mobile-audit] section[aria-labelledby="category-heading"] .grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  body[data-mobile-audit] section[aria-labelledby="category-heading"] .col-span-2 {
    grid-column: 1 / -1 !important;
  }
  body[data-mobile-audit] section[aria-labelledby="category-heading"] .grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Entry wedges: stack */
  body[data-mobile-audit] section[aria-labelledby="wedges-heading"] .grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Lifecycle: 6 → 3 */
  body[data-mobile-audit] .valty-lifecycle .grid-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: 0.75rem;
  }
  body[data-mobile-audit] .valty-lifecycle__rail { display: none; }

  /* Compliance: 6 → 3 */
  body[data-mobile-audit] section[aria-labelledby="compliance-heading"] .grid-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body[data-mobile-audit] section[aria-labelledby="compliance-heading"] .grid-cols-6 > div {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  body[data-mobile-audit] section[aria-labelledby="compliance-heading"] .grid-cols-6 > div:nth-child(3n) {
    border-right: 0 !important;
  }

  /* Personas: 3 → 2 */
  body[data-mobile-audit] section[aria-labelledby="personas-heading"] .grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Integrations: stack (copy above, logo grid below) */
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .grid[style*="5fr 7fr"],
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  body[data-mobile-audit] section[aria-labelledby="integrations-heading"] .row-span-2 {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding: 2rem !important;
  }

  /* DP Spotlight: stack */
  body[data-mobile-audit] section[data-valty-dp-spotlight] .grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  body[data-mobile-audit] section[data-valty-dp-spotlight] .col-span-5,
  body[data-mobile-audit] section[data-valty-dp-spotlight] .col-span-7 {
    grid-column: 1 / -1 !important;
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Hero tuning: keep the stacked product proof through tablet widths */
  body[data-mobile-audit] .valty-hero__browser {
    display: none !important;
  }
  body[data-mobile-audit] .valty-hero__mobile-proof {
    display: block !important;
    width: min(calc(100% - var(--v-gutter-tablet) * 2), 800px);
    margin: 1rem auto 1.75rem;
    aspect-ratio: 16 / 9;
  }
  body[data-mobile-audit] .valty-hero__content {
    max-width: min(100%, 760px);
  }

  /* How It Works: 4 → 2 */
  body[data-mobile-audit] .valty-how__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 2rem;
  }
}


/* ──────────────────────────────────────────────────────────
   M3 · Desktop polish (>=1025px)
   ────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  .valty-hero { width: 100%; }
}


/* ──────────────────────────────────────────────────────────
   M4 · Mobile menu · Radial clip reveal
   ──────────────────────────────────────────────────────────
   Chosen interaction (see /MENU-ANIMATIONS.html · V3).
   The drawer stays mounted at all times; visibility is driven
   by `clip-path: circle()` anchored to the hamburger button's
   exact screen position, top-right, then expanded to 160% on
   open. Pointer events + visibility are gated on the same
   `[data-open="true"]` signal header.js already writes, so no
   runtime changes are needed. Nav items stagger in once the
   clip has cleared the origin.

   Origin tuning:
     --v-drawer-origin-x = 36px from right edge (centre of the
                           hamburger button; 16px gutter + 20px)
     --v-drawer-origin-y = 32px from top (centre of the 64px
                           header row)
   ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .valty-header__nav,
  .valty-header__inner > .valty-header__cta { display: none !important; }
  .valty-header__inner > .valty-header__toggle { display: inline-flex !important; }

  .valty-header__drawer {
    /* Override both the UA `hidden` attribute *and* the
       inherited section-13 `display:none` by winning on
       cascade + specificity. */
    --v-drawer-origin-x: 36px;
    --v-drawer-origin-y: 32px;
    display: flex !important;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    z-index: var(--vh-z-drawer, 60);
    background: #08080A;
    padding-inline: var(--vh-padding-x);
    padding-top: var(--vh-height);
    flex-direction: column;

    /* Closed state: zero-radius circle at the hamburger. */
    clip-path: circle(0 at calc(100% - var(--v-drawer-origin-x)) var(--v-drawer-origin-y));
    -webkit-clip-path: circle(0 at calc(100% - var(--v-drawer-origin-x)) var(--v-drawer-origin-y));
    pointer-events: none;
    visibility: hidden;
    transition:
      clip-path 680ms cubic-bezier(0.22, 1, 0.36, 1),
      -webkit-clip-path 680ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 680ms;
    will-change: clip-path;
  }
  .valty-header__drawer[data-open="true"] {
    clip-path: circle(160% at calc(100% - var(--v-drawer-origin-x)) var(--v-drawer-origin-y));
    -webkit-clip-path: circle(160% at calc(100% - var(--v-drawer-origin-x)) var(--v-drawer-origin-y));
    pointer-events: auto;
    visibility: visible;
    transition:
      clip-path 680ms cubic-bezier(0.22, 1, 0.36, 1),
      -webkit-clip-path 680ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  /* Radial reveal doesn't need a second top-bar inside the drawer —
     the sticky site header (with its morphing X) sits above the drawer
     via z-index and already provides the close affordance. Hide the
     drawer's internal header completely so the X is never doubled. */
  .valty-header__drawer-top { display: none !important; }

  .valty-header__drawer-nav {
    display: flex;
    flex-direction: column;
    padding-block: 2rem;
    gap: 0.125rem;
    flex: 1;
    overflow-y: auto;
  }
  .valty-header__drawer-nav a {
    font-size: clamp(24px, 6vw, 40px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--vh-text-strong);
    padding-block: 0.5rem;
    min-height: 44px;
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 400ms var(--site-ease),
      transform 400ms var(--site-ease);
  }
  .valty-header__drawer[data-open="true"] .valty-header__drawer-nav a {
    opacity: 1;
    transform: none;
  }
  .valty-header__drawer[data-open="true"] .valty-header__drawer-nav a:nth-child(1) { transition-delay: 380ms; }
  .valty-header__drawer[data-open="true"] .valty-header__drawer-nav a:nth-child(2) { transition-delay: 450ms; }
  .valty-header__drawer[data-open="true"] .valty-header__drawer-nav a:nth-child(3) { transition-delay: 520ms; }
  .valty-header__drawer[data-open="true"] .valty-header__drawer-nav a:nth-child(4) { transition-delay: 590ms; }

  .valty-header__drawer .valty-header__cta {
    /* Full-width CTA spanning the drawer's gutter. */
    display: flex;
    width: 100%;
    align-self: stretch;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    min-height: 48px;
    padding-block: 0.9rem;
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 400ms var(--site-ease),
      transform 400ms var(--site-ease);
  }
  .valty-header__drawer[data-open="true"] .valty-header__cta {
    opacity: 1;
    transform: none;
    transition-delay: 680ms;
  }

  /* Lift the sticky site header above the drawer so the Valty wordmark
     and the morphing hamburger stay visible while the menu is open.
     The header itself is transparent on the animated-hero page, so the
     drawer's fill still bleeds through — only the logo + toggle read.

     NOTE: the drawer is a child of .valty-header, so bumping the header
     alone does nothing — we have to stack the inner row OVER the drawer
     within the header's own stacking context. `position: relative` is
     required for z-index to actually apply. */
  .valty-header { z-index: calc(var(--vh-z-drawer, 60) + 1) !important; }
  .valty-header__inner {
    position: relative;
    z-index: calc(var(--vh-z-drawer, 60) + 1);
  }
  .valty-header__logo {
    position: relative;
    z-index: calc(var(--vh-z-drawer, 60) + 2);
  }
  .valty-header__inner > .valty-header__toggle {
    z-index: calc(var(--vh-z-drawer, 60) + 2);
  }

  @media (prefers-reduced-motion: reduce) {
    .valty-header__drawer,
    .valty-header__drawer[data-open="true"],
    .valty-header__drawer-nav a,
    .valty-header__drawer .valty-header__cta,
    .valty-header__drawer-top {
      transition-duration: 1ms !important;
    }
  }
}


/* ══════════════════════════════════════════════════════════
   H · HAMBURGER ICON — single canonical morph-to-X
   Kept compact because the full menu interaction catalogue
   now lives in /WEBSITE-DESIGN/MENU-ANIMATIONS.html.
   ══════════════════════════════════════════════════════════ */
.valty-header__toggle { position: relative; min-width: 44px; min-height: 44px; }

.valty-header__hamburger {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 18px;
}
.valty-header__hamburger > span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity   240ms ease;
}
.valty-header__hamburger > span:nth-child(1) { top: 0; }
.valty-header__hamburger > span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.valty-header__hamburger > span:nth-child(3) { top: 100%; transform: translateY(-100%); }

.valty-header__toggle[data-open="true"] .valty-header__hamburger > span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.valty-header__toggle[data-open="true"] .valty-header__hamburger > span:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
}
.valty-header__toggle[data-open="true"] .valty-header__hamburger > span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .valty-header__hamburger > span { transition-duration: 1ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   08.5 · WHY VALTY  (category-level comparison)
   Scoped block. Mobile: stacked, left-aligned, single column.
   ≥1024px: title-rail beside the 3 sub-cells per row.
   Sub-cells: auto-fit grid, never breaks the container.
   ══════════════════════════════════════════════════════════════ */
.valty-why-valty {
  overflow-x: hidden;
}
.valty-why-valty__shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(60px, 9vw, 96px) clamp(20px, 5vw, 40px);
}
.valty-why-valty__intro {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  margin-bottom: clamp(40px, 7vw, 72px);
}
.valty-why-valty__eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(10px, 1.6vw, 11px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 14px;
}
.valty-why-valty__title {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 4.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 auto;
  max-width: 22ch;
  text-wrap: balance;
  color: #fff;
}
.valty-why-valty__title-sub {
  color: rgba(255, 255, 255, .40);
}
.valty-why-valty__title-nowrap {
  white-space: nowrap;
}
.valty-why-valty__lede {
  font-size: clamp(13px, 2vw, 14px);
  line-height: 1.7;
  color: rgba(255, 255, 255, .55);
  margin: 18px auto 0;
  max-width: 42rem;
}
.valty-why-valty__rows {
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.valty-why-valty__row {
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  padding: clamp(22px, 4vw, 36px) 0;
  gap: clamp(18px, 3vw, 32px);
}
.valty-why-valty__rail {
  text-align: left;
}
.valty-why-valty__rail-name {
  font-weight: 500;
  font-size: clamp(15px, 2.2vw, 17px);
  color: #fff;
}
.valty-why-valty__rail-meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(9.5px, 1.5vw, 10.5px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .40);
  margin-top: 4px;
}
.valty-why-valty__cells {
  display: grid;
  gap: clamp(18px, 2.4vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.valty-why-valty__cell-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(9px, 1.4vw, 9.5px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .40);
  margin-bottom: 8px;
}
.valty-why-valty__cell-label--accent {
  color: #fff;
}
.valty-why-valty__cell-body {
  font-size: clamp(12.5px, 1.9vw, 13.5px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .70);
  margin: 0;
}
.valty-why-valty__cell-body--muted {
  color: rgba(255, 255, 255, .50);
}
.valty-why-valty__cell-body--accent {
  color: #fff;
}

@media (min-width: 1024px) {
  .valty-why-valty__row {
    grid-template-columns: 220px 1fr;
  }
}