/* =============================================================================
   360FinTech.AI — V2 design system
   Extends the V1.0 styles.css (which is loaded first). All V2 components are
   namespaced with .v2-* so they coexist cleanly with the existing markup until
   we migrate every page.
   ============================================================================= */

/* =============================================================================
   Cross-browser compatibility & global ergonomics
   ============================================================================= */
html {
  /* Smooth-scroll for in-page hash links (#capabilities, etc.) */
  scroll-behavior: smooth;
  /* Prevent iOS Safari from auto-zooming text on rotate */
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

/* Honour the `hidden` attribute even when an explicit `display` is set on the
   element. Many V2 components use `display: flex/grid/inline-flex`, which
   normally overrides the browser default `[hidden] { display: none }`. This
   restores expected behaviour so JS `el.hidden = true` actually hides the
   element. The high specificity is intentional — this is a global override. */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  /* Catch any rogue horizontal overflow from background bleeds */
  overflow-x: hidden;
  /* Sharper text in WebKit + Firefox */
  -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}
/* iPhone notch / Android gesture-bar safe-area on the global container.
   `env(safe-area-inset-*, 0)` falls back to 0 in browsers without support. */
.container {
  padding-left:  max(clamp(1.25rem, 4vw, 5rem), env(safe-area-inset-left, 0));
  padding-right: max(clamp(1.25rem, 4vw, 5rem), env(safe-area-inset-right, 0));
}
/* Long unbroken strings (URLs, FQDNs, registrar codes) shouldn't push layout */
.v2-belief-title, .v2-leader-title, .v2-step-body h4,
.v2-flow-title, .v2-cap-panel-name { overflow-wrap: anywhere; }

/* All buttons / CTAs hit the WCAG 2.5.5 min-touch-target of 44x44 on coarse
   pointers (touchscreens, styluses) without changing desktop appearance. */
@media (pointer: coarse) {
  .v2-cta, .v2-nav-link, .v2-cap-rail-item, .v2-leader-card a, .v2-belief-card a {
    min-height: 44px;
  }
}

/* color-mix() fallback layer.
   Supported in Chrome 111+ / Safari 16.4+ / Firefox 113+ (all March-May 2023).
   For older browsers the orange-tinted surfaces below fall back to solid
   rgba() approximations so borders, hover glows, and dashes stay visible. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-belief-card:hover          { border-color: rgba(255, 88, 0, 0.55); }
  .v2-leader-card:hover          { border-color: rgba(255, 88, 0, 0.55); }
  .v2-step:hover                 { border-color: rgba(255, 88, 0, 0.40); }
  .v2-belief-num                 { border-bottom-color: rgba(255, 88, 0, 0.60); }
  .v2-flow                       { border-color: rgba(255, 88, 0, 0.30); }
  .v2-flow-line                  { border-top-color: rgba(255, 88, 0, 0.38); }
  .v2-leader-tag                 { border-top-color: rgba(255, 88, 0, 0.35); }
  .v2-marquee-section::before,
  .v2-marquee-section::after     { background: rgba(255, 88, 0, 0.20); }
  .v2-cap-explorer.is-collapsed,
  .v2-cap-rail-item.is-active    { background: rgba(255, 88, 0, 0.12); }
  .v2-cap-rail-item:hover        { background: rgba(255, 88, 0, 0.08); }
}

:root {
  /* V2 primary brand — overrides V1's --orange so every var(--orange) reference picks up the new tone */
  --orange:          #FF5800;
  --deep-orange:     #D94800;

  /* V2 surface palette — defaults are dark-theme values, overridden below for light */
  --v2-bg:           #0D0E11;
  --v2-bg-2:         #16181C;
  --v2-card:         #1A1C20;
  --v2-card-lift:    #23252A;
  --v2-text:         #F1ECDF;
  --v2-text-2:       #BCB6A7;
  --v2-text-3:       #7A746B;
  --v2-border:       rgba(255,255,255,0.06);
  --v2-border-strong:rgba(255,255,255,0.12);
  --v2-shadow-card:  0 1px 0 rgba(255,255,255,0.04), 0 10px 24px -16px rgba(0,0,0,0.5);
}
:root[data-theme="light"] {
  /* Light mode pairs primary orange with a deeper hover for AA contrast on bone */
  --orange:          #E84A00;
  --deep-orange:     #C03A00;

  --v2-bg:           var(--bone);
  --v2-bg-2:         #F4EFE3;
  --v2-card:         #FFFFFF;
  --v2-card-lift:    #FBF8F2;
  --v2-text:         var(--ink);
  --v2-text-2:       var(--ink-2);
  --v2-text-3:       var(--ink-3);
  --v2-border:       rgba(11,26,51,0.10);
  --v2-border-strong:rgba(11,26,51,0.18);
  --v2-shadow-card:  0 1px 0 rgba(11,26,51,0.03), 0 10px 24px -16px rgba(11,26,51,0.18);
}

body.v2 {
  background: var(--v2-bg);
  color: var(--v2-text);
  font-family: Calibri, system-ui, -apple-system, sans-serif;
}

/* ===== Orange top bar ============================================================ */
.v2-topbar {
  position: sticky; top: 0; z-index: 60;
  height: 4px; background: var(--orange);
}

/* ===== Header ==================================================================== */
.v2-header {
  position: sticky; top: 4px; z-index: 50;
  /* Solid fallback for browsers without color-mix() — they still get a usable header */
  background: rgba(13, 14, 17, 0.92);
  background: color-mix(in srgb, var(--v2-bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(10px);   /* Safari */
          backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--v2-border);
}
/* Light theme header background fallback */
:root[data-theme="light"] .v2-header { background: rgba(255, 251, 244, 0.92); }
@supports (background: color-mix(in srgb, red, blue)) {
  :root[data-theme="light"] .v2-header {
    background: color-mix(in srgb, var(--v2-bg) 92%, transparent);
  }
}
.v2-header-inner {
  display: flex; align-items: center; gap: 32px;
  padding: 14px 0;
}
.v2-brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--v2-text); text-decoration: none;
}
.v2-brand-mark { display: block; }
.v2-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.v2-brand-name { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--v2-text); }
/* Brand wordmark stays fully white in dark mode; `.AI` no longer
   gets the orange treatment to match the PDF deck. */
.v2-brand-ai   { color: inherit; }
.v2-brand-tag  {
  font-family: 'Courier New', Courier, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 4px;
  opacity: 1;
}
:root[data-theme="light"] .v2-brand-tag { color: var(--orange); }

.v2-nav { flex: 1; }
.v2-nav-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 28px; justify-content: center;
}
.v2-nav-links a {
  color: var(--v2-text-2); text-decoration: none;
  font-weight: 600; font-size: 15px;
  transition: color 180ms var(--ease-out);
}
.v2-nav-links a:hover { color: var(--orange); }
.v2-nav-link.is-active,
.v2-nav-links a.is-active {
  color: var(--orange);
  position: relative;
}
.v2-nav-link.is-active::after,
.v2-nav-links a.is-active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--orange);
}

/* ===== Nav submenus (Option A — simple dropdown) ============================ */
.v2-nav-item {
  position: relative;
}
.v2-nav-link {
  display: inline-flex; align-items: center; gap: 4px;
}
.v2-nav-caret {
  display: inline-block;
  margin-top: 1px;
  transition: transform 180ms var(--ease-out);
  opacity: 0.7;
}
.v2-nav-has-sub:hover .v2-nav-caret,
.v2-nav-has-sub:focus-within .v2-nav-caret,
.v2-nav-has-sub.is-open .v2-nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.v2-nav-sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 280px;
  list-style: none; padding: 8px; margin: 0;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  box-shadow:
    0 18px 36px -16px rgba(0, 0, 0, 0.55),
    0 6px 14px -6px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ease-out),
              transform 180ms var(--ease-out),
              visibility 0s linear 180ms;
  z-index: 60;
}
/* A tiny invisible gap-bridge so the dropdown doesn't close as cursor
   crosses from the link to the sub (the 12px top gap is hover-traversable) */
.v2-nav-sub::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -14px; height: 14px;
}
.v2-nav-has-sub:hover .v2-nav-sub,
.v2-nav-has-sub:focus-within .v2-nav-sub,
.v2-nav-has-sub.is-open .v2-nav-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 180ms var(--ease-out),
              transform 180ms var(--ease-out),
              visibility 0s;
}
.v2-nav-sub li { padding: 0; }
.v2-nav-sub a {
  display: block;
  padding: 10px 12px 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--v2-text);
  position: relative;
  transition: background 160ms var(--ease-out), padding-left 160ms var(--ease-out);
}
.v2-nav-sub a::before {
  /* left orange rail that grows on hover */
  content: ''; position: absolute;
  left: 4px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 0;
  background: var(--orange);
  border-radius: 2px;
  transition: height 220ms var(--ease-out);
}
.v2-nav-sub a:hover,
.v2-nav-sub a:focus-visible {
  background: color-mix(in srgb, var(--orange) 8%, transparent);
  padding-left: 22px;
  outline: none;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-nav-sub a:hover,
  .v2-nav-sub a:focus-visible { background: rgba(255, 88, 0, 0.08); }
}
.v2-nav-sub a:hover::before,
.v2-nav-sub a:focus-visible::before {
  height: 70%;
}
.v2-nav-sub-name {
  display: block;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--v2-text);
  line-height: 1.25;
}
.v2-nav-sub-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px; line-height: 1.4;
  color: var(--v2-text-3);
}

/* Mobile: collapse to inline expanded list, no positioning */
@media (max-width: 1024px) {
  .v2-nav-caret { display: none; }
  .v2-nav-sub {
    position: static;
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: none;
    padding: 0 0 0 14px;
    margin-top: 4px;
    min-width: 0;
    display: none;     /* JS toggles this in mobile-tap mode */
  }
  .v2-nav-has-sub.is-open .v2-nav-sub { display: block; }
  .v2-nav-sub a { padding: 6px 10px; }
  .v2-nav-sub a:hover { padding-left: 14px; }
  .v2-nav-sub-desc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-nav-sub, .v2-nav-sub a, .v2-nav-caret { transition: none !important; }
}

.v2-header-actions { display: flex; align-items: center; gap: 12px; }
.v2-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: transparent; border: 1px solid var(--v2-border-strong);
  border-radius: 999px; color: var(--v2-text-2);
  cursor: pointer; transition: all 180ms var(--ease-out);
}
.v2-icon-btn:hover { color: var(--orange); border-color: var(--orange); }

/* ===== CTA buttons =============================================================== */
.v2-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; letter-spacing: 0.01em;
  text-decoration: none; transition: all 180ms var(--ease-out);
  white-space: nowrap;
}
.v2-cta-solid { background: var(--orange); color: #FFF; }
.v2-cta-solid:hover { background: var(--deep-orange); transform: translateY(-1px); }
.v2-cta-ghost { color: var(--v2-text); border: 1px solid var(--v2-border-strong); }
.v2-cta-ghost:hover { border-color: var(--orange); color: var(--orange); }
.v2-cta-link { color: var(--v2-text-2); padding: 11px 0; }
.v2-cta-link:hover { color: var(--orange); }

/* ===== Eyebrow ==================================================================== */
.v2-eyebrow {
  display: inline-block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 16px;
}
/* Inline span that opts out of the eyebrow's uppercase transform.
   Used for "AIs" so the trailing lowercase 's' is preserved. */
.v2-eyebrow .v2-keep-case { text-transform: none; }
.v2-eyebrow-rule {
  padding-bottom: 6px;
  border-bottom: 2px solid var(--orange);
}
.v2-eyebrow-muted { color: var(--v2-text-3); }

/* ===== Section scaffolding ======================================================== */
.v2-section { padding: 88px 0; }
.v2-section-tight { padding-top: 0; }
.v2-section-cta { padding-bottom: 120px; }

.v2-section-headline {
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--v2-text); margin: 8px 0 20px;
}
.v2-section-sub {
  font-size: 17px; color: var(--v2-text-2);
  max-width: 720px; margin: 0 0 48px;
}
.v2-section-foot {
  margin-top: 32px;
  color: var(--v2-text-3); font-size: 13px; font-style: italic;
}

.v2-orange { color: var(--orange); }

/* ===== Hero ====================================================================== */
.v2-hero {
  position: relative; overflow: hidden;
  padding: 80px 0 64px;
}
.v2-hero-inner {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 64px;
}
.v2-hero-copy { max-width: 720px; }
.v2-hero-headline {
  font-size: clamp(1.85rem, 4.4vw, 3.4rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.08;
  color: var(--v2-text); margin: 0 0 28px;
}
/* Each sentence locks to a single line — prevents "Designed to automate." wrapping mid-phrase */
.v2-hero-line { display: block; white-space: nowrap; }
.v2-hero-sub {
  font-size: 19px; line-height: 1.55;
  color: var(--v2-text-2); margin: 0 0 36px;
  max-width: 560px;
}
.v2-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.v2-hero-mark {
  position: relative;
  width: 320px; height: 320px;
  opacity: 0.95;
}
.v2-hero-mark img {
  width: 100%; height: 100%; object-fit: contain;
  position: relative; z-index: 1;
  transform-origin: 50% 50%;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- A4 continuous orbit (satellite aligned to the golden notch) ----- */
/* The golden notch on the logo sits at ~10:30 (-45deg in CSS rotation).
   Both the logo and the orbit container rotate at 6s linear, starting from
   the same phase offset, so the satellite stays in line with the notch. */
.v2-hero-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 366px; height: 366px;            /* ~15% bigger than the 320px logo */
  pointer-events: none;
  /* Start position aligned with the notch (-45deg = 10:30 o'clock) */
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}
.v2-hero-orbit::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateX(-50%);
  z-index: 2;          /* sits above the trail */
  /* Three-layer glow for a richer, larger halo */
  box-shadow:
    0 0  14px  3px var(--orange),
    0 0  36px  8px color-mix(in srgb, var(--orange) 55%, transparent),
    0 0  72px 16px color-mix(in srgb, var(--orange) 22%, transparent);
}
/* Glowing trail — conic-gradient fading from the satellite backwards around
   the orbit, masked to a thin ring so only the rim band is painted. */
.v2-hero-orbit::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(
    from 0deg,
    rgba(255, 88, 0, 0.9)  0deg,
    rgba(255, 88, 0, 0.5)  12deg,
    rgba(255, 88, 0, 0)    34deg,
    rgba(255, 88, 0, 0)    260deg,
    rgba(255, 88, 0, 0.55) 348deg,
    rgba(255, 88, 0, 0.9)  360deg
  );
  -webkit-mask: radial-gradient(circle,
    transparent 0%,
    transparent 48.5%,
    black 50%,
    black 51.5%,
    transparent 53%,
    transparent 100%);
          mask: radial-gradient(circle,
    transparent 0%,
    transparent 48.5%,
    black 50%,
    black 51.5%,
    transparent 53%,
    transparent 100%);
  filter: blur(1.4px);
}
.v2-hero-mark:hover .v2-hero-orbit {
  opacity: 1;
  animation: v2-hero-orbit-spin 6s linear infinite;
}
.v2-hero-mark:hover img {
  animation: v2-hero-logo-spin 6s linear infinite;
}
@keyframes v2-hero-orbit-spin {
  from { transform: translate(-50%, -50%) rotate(-45deg);  }
  to   { transform: translate(-50%, -50%) rotate(315deg);  }
}
@keyframes v2-hero-logo-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero-mark:hover .v2-hero-orbit,
  .v2-hero-mark:hover img { animation: none; }
}

/* ===== Grids ====================================================================== */
.v2-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-top: 24px;
}
.v2-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 24px;
}

/* ===== Card with orange top accent (WHY WE EXIST + WHY LEADERS CHOOSE) =========== */
.v2-card {
  position: relative;
  background: var(--v2-card);
  border-radius: 6px;
  padding: 28px 26px 24px;
  box-shadow: var(--v2-shadow-card);
}
.v2-card-top-accent::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--orange); border-radius: 6px 6px 0 0;
}
.v2-card-tall { min-height: 240px; display: flex; flex-direction: column; }
.v2-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 16px;
}
.v2-card-title {
  color: var(--v2-text); font-size: 18px; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 12px;
}
.v2-card-body {
  color: var(--v2-text-2); font-size: 15px; line-height: 1.55;
  margin: 0 0 auto;
}
.v2-card-kicker {
  color: var(--orange); font-size: 13.5px; font-weight: 500;
  margin: 28px 0 0;
}
.v2-numeral {
  color: var(--orange); font-size: 38px; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; margin-bottom: 16px;
}
.v2-bignum {
  color: var(--v2-text); font-size: 56px; font-weight: 800;
  letter-spacing: -0.05em; line-height: 0.9; opacity: 0.9;
}

/* ===== Framework panel (3-LAYER AI FRAMEWORK) ==================================== */
.v2-framework {
  background: var(--v2-card);
  border: 1.5px solid var(--orange);
  border-radius: 8px;
  padding: 28px 32px 36px;
}
.v2-framework-grid { margin-top: 18px; }
.v2-framework-col { padding-right: 12px; }
.v2-framework-title {
  color: var(--v2-text);
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  margin: 12px 0 10px;
}
.v2-framework-body {
  color: var(--v2-text-2);
  font-size: 14.5px; line-height: 1.55;
}

/* ===== Pills ====================================================================== */
.v2-pill {
  display: inline-block;
  padding: 5px 12px; border-radius: 999px;
  background: var(--orange); color: #FFF;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v2-pill-orange { background: var(--orange); }

/* ===== Belief cards (WHY WE EXIST) ================================================ */
.v2-belief-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 28px;
}
/* sharper, snappier easing for the whole component */
.v2-belief-card,
.v2-belief-card * {
  --belief-ease: cubic-bezier(0.32, 0.72, 0, 1);
}
.v2-belief-card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 248px;                    /* taller box */
  padding: 34px 34px 30px 36px;
  background:
    linear-gradient(135deg,
      var(--v2-card) 0%,
      color-mix(in srgb, var(--v2-card) 94%, var(--orange) 6%) 100%);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 200ms var(--belief-ease),
              border-color 200ms var(--belief-ease),
              box-shadow 200ms var(--belief-ease);
}
.v2-belief-card::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--orange) 16%, transparent) 0%,
    transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--belief-ease);
  z-index: 0;
}
.v2-belief-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--orange) 70%, var(--v2-border));
  box-shadow:
    0 12px 28px -14px color-mix(in srgb, var(--orange) 60%, transparent),
    0 4px 10px -4px rgba(0,0,0,0.45);
}
.v2-belief-card:hover::before { opacity: 1; }

.v2-belief-rail {
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 60%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--orange), var(--deep-orange));
  border-radius: 0 3px 3px 0;
  transition: height 220ms var(--belief-ease);
  z-index: 1;
}
.v2-belief-card:hover .v2-belief-rail { height: 94%; }

.v2-belief-num {
  position: relative; z-index: 1;
  display: inline-block;
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
  padding-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 60%, transparent);
  transition: letter-spacing 200ms var(--belief-ease),
              border-color 200ms var(--belief-ease);
}
.v2-belief-card:hover .v2-belief-num {
  letter-spacing: 0.28em;
  border-bottom-color: var(--orange);
}

.v2-belief-title {
  position: relative; z-index: 1;
  color: var(--v2-text);
  font-size: 21px; font-weight: 700;     /* larger heading */
  letter-spacing: -0.02em; line-height: 1.3;
  margin: 0 0 16px;
}

.v2-belief-kicker {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 9px;
  color: var(--orange);
  font-size: 13.5px; font-weight: 600;
  line-height: 1.5;
  margin: 0;                             /* sit right under the title, top-aligned across cards */
  transition: color 180ms var(--belief-ease);
}
.v2-belief-dot { margin-top: 7px; }      /* nudge dot to align with kicker's first line */
.v2-belief-card:hover .v2-belief-kicker { color: var(--orange); }

.v2-belief-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 200ms var(--belief-ease);
}
.v2-belief-card:hover .v2-belief-dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 28%, transparent);
}

.v2-belief-underline {
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--deep-orange));
  transition: width 280ms var(--belief-ease);
  z-index: 1;
}
.v2-belief-card:hover .v2-belief-underline { width: 100%; }

.v2-belief-arrow {
  position: absolute; right: 22px; top: 34px;
  color: var(--orange);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 180ms var(--belief-ease),
              transform 180ms var(--belief-ease);
  z-index: 2;
}
.v2-belief-card:hover .v2-belief-arrow {
  opacity: 0.95;
  transform: translateX(0);
}

/* ===== 3-Layer Flow (THE 3-LAYER AI FRAMEWORK) ==================================== */
.v2-flow {
  position: relative;
  padding: 32px 36px 36px;
  background:
    radial-gradient(ellipse at 50% -20%,
      color-mix(in srgb, var(--orange) 7%, var(--v2-card)) 0%,
      var(--v2-card) 55%);
  border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--v2-border));
  border-radius: 12px;
  overflow: hidden;
}
.v2-flow::after {
  /* corner accent */
  content: ''; position: absolute; right: -120px; bottom: -120px;
  width: 280px; height: 280px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--orange) 9%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
}
.v2-flow-track {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 26px;
}
.v2-flow-line {
  /* dashed connector across the top of the track, behind the nodes */
  position: absolute;
  left: 22px; right: 22px;
  top: 21px;
  border-top: 1.5px dashed color-mix(in srgb, var(--orange) 38%, transparent);
  height: 0;
  z-index: 0;
  pointer-events: none;
}
.v2-flow-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: transform 280ms var(--ease-out);
}
.v2-flow-step:hover { transform: translateY(-3px); }

.v2-flow-node {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  /* solid bg covers the dashed line behind it */
  background: var(--v2-card);
  border: 2px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  transition: background 240ms var(--ease-out),
              color 240ms var(--ease-out),
              transform 280ms var(--ease-out),
              box-shadow 280ms var(--ease-out);
}
.v2-flow-step:hover .v2-flow-node {
  background: var(--orange);
  color: #FFF;
  transform: scale(1.08);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--orange) 16%, transparent);
}

.v2-flow-step .v2-pill {
  margin-bottom: 12px;
  transition: transform 240ms var(--ease-out),
              box-shadow 240ms var(--ease-out);
}
.v2-flow-step:hover .v2-pill {
  transform: translateX(2px);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--orange) 50%, transparent);
}

.v2-flow-title {
  position: relative;
  display: inline-block;
  color: var(--v2-text);
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  margin: 6px 0 12px;
}
.v2-flow-title::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width 360ms var(--ease-out);
}
.v2-flow-step:hover .v2-flow-title::after { width: 100%; }

.v2-flow-body {
  color: var(--v2-text-2);
  font-size: 14.5px; line-height: 1.55;
  margin: 0;
}

/* Belief + Flow — reduced motion + responsive ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v2-belief-card, .v2-belief-card *,
  .v2-flow-step, .v2-flow-step * {
    transition: none !important;
  }
  .v2-belief-card:hover, .v2-flow-step:hover { transform: none; }
}
@media (max-width: 900px) {
  .v2-belief-grid { grid-template-columns: 1fr; }
  .v2-flow { padding: 24px 22px 28px; }
  .v2-flow-track { grid-template-columns: 1fr; gap: 24px; }
  .v2-flow-line { display: none; }   /* dashed connector only makes sense horizontally */
}

/* ===== Leader cards (WHY LEADERS CHOOSE — 2x2 grid) =============================== */
.v2-leader-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 28px 0 0;        /* full container width — match other components */
}

.v2-leader-card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 200px;
  padding: 24px 26px 20px 28px;
  background:
    linear-gradient(135deg,
      var(--v2-card) 0%,
      color-mix(in srgb, var(--v2-card) 94%, var(--orange) 6%) 100%);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 240ms var(--ease-out),
              border-color 240ms var(--ease-out),
              box-shadow 240ms var(--ease-out);
}
.v2-leader-card::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--orange) 13%, transparent) 0%,
    transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
  z-index: 0;
}
.v2-leader-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--orange) 55%, var(--v2-border));
  box-shadow:
    0 16px 38px -18px color-mix(in srgb, var(--orange) 55%, transparent),
    0 6px 14px -6px rgba(0,0,0,0.45);
}
.v2-leader-card:hover::before { opacity: 1; }

.v2-leader-rail {
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 60%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--orange), var(--deep-orange));
  border-radius: 0 3px 3px 0;
  transition: height 340ms var(--ease-out);
  z-index: 1;
}
.v2-leader-card:hover .v2-leader-rail { height: 92%; }

.v2-leader-head {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.v2-leader-title {
  flex: 1;
  color: var(--v2-text);
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.3;
  margin: 6px 0 0;
}

.v2-leader-num {
  color: var(--v2-text-3);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 38px; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
  opacity: 0.55;
  transition: color 280ms var(--ease-out),
              opacity 280ms var(--ease-out),
              transform 280ms var(--ease-out);
}
.v2-leader-card:hover .v2-leader-num {
  color: var(--orange);
  opacity: 1;
  transform: translateY(-2px);
}

.v2-leader-body {
  position: relative; z-index: 1;
  color: var(--v2-text-2);
  font-size: 13.5px; line-height: 1.55;
  margin: 0 0 auto;
}

/* Bottom tag replacing the old wide pill — thin top divider, chevron + uppercase */
.v2-leader-tag {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
  color: var(--orange);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-top-color 280ms var(--ease-out);
}
.v2-leader-card:hover .v2-leader-tag { border-top-color: var(--orange); }
.v2-leader-tag-icon {
  flex-shrink: 0;
  transition: transform 320ms var(--ease-out);
}
.v2-leader-card:hover .v2-leader-tag-icon { transform: translateX(5px); }

/* Reduced motion + responsive */
@media (prefers-reduced-motion: reduce) {
  .v2-leader-card, .v2-leader-card * { transition: none !important; }
  .v2-leader-card:hover { transform: none; }
}
@media (max-width: 900px) {
  .v2-leader-grid { grid-template-columns: 1fr; max-width: 100%; }
  .v2-leader-card { min-height: 260px; padding: 28px 26px 24px 30px; }
}

/* ===== Where We Play — scrolling regulator marquee =============================== */
.v2-marquee-section {
  position: relative;
  padding: 52px 0 54px;
  /* subtle band that sits behind the section, slightly distinct from the page bg */
  background:
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--v2-card) 30%, var(--v2-bg)) 22%,
      color-mix(in srgb, var(--v2-card) 30%, var(--v2-bg)) 78%,
      transparent 100%);
}
.v2-marquee-section::before,
.v2-marquee-section::after {
  /* thin orange-tinted top/bottom hairlines for definition without heaviness */
  content: ''; position: absolute; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--orange) 24%, transparent) 50%,
    transparent 100%);
}
.v2-marquee-section::before { top: 0; }
.v2-marquee-section::after { bottom: 0; }

.v2-marquee-head {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  margin-bottom: 26px;
}
.v2-marquee-head .v2-eyebrow {
  position: relative;
  padding-bottom: 7px;
}
.v2-marquee-head .v2-eyebrow::after {
  /* centred orange underline below the eyebrow */
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 38px; height: 1.5px;
  background: var(--orange);
  transform: translateX(-50%);
}
.v2-marquee-sub {
  color: var(--v2-text-3);
  font-size: 14.5px; line-height: 1.5;
  margin: 14px 0 0;
}

.v2-marquee {
  position: relative;
  overflow: hidden;
  /* fade edges so items appear/disappear smoothly */
  mask-image: linear-gradient(90deg,
    transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.v2-marquee-track {
  display: flex; align-items: center;
  gap: 56px;
  width: max-content;
  animation: v2-marquee-scroll 64s linear infinite;
  will-change: transform;
}
.v2-marquee:hover .v2-marquee-track {
  animation-play-state: paused;     /* readable on hover */
}

.v2-marquee-item {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--v2-text-2);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 220ms var(--ease-out);
}
.v2-marquee-item:hover { color: var(--v2-text); }
.v2-marquee-item:hover .v2-marquee-dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent);
}

.v2-marquee-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 220ms var(--ease-out);
}

@keyframes v2-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-marquee-track { animation: none; }
}
@media (max-width: 900px) {
  .v2-marquee-section { padding: 40px 0 42px; }
  .v2-marquee-track { gap: 40px; animation-duration: 48s; }
  .v2-marquee-item { font-size: 12px; letter-spacing: 0.14em; }
}

/* =============================================================================
   WHO WE SERVE — 15 segments grouped by domain
   ============================================================================= */
.v2-seg-domains {
  display: flex; flex-direction: column;
  gap: 32px;
  margin-top: 32px;
}
.v2-seg-domain {
  display: block;
}
.v2-seg-domain-label {
  display: inline-block;
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-bottom: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-seg-domain-label { border-bottom-color: rgba(255,88,0,0.40); }
}
.v2-seg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
/* Flat 5x3 layout — uniform width AND height across all 15 cards. */
.v2-seg-grid-flat {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  margin-top: 32px;
}
/* Bottom row: three smaller domains side-by-side. Each is wrapped in its
   own subtle container — this is the visual cue that "these items belong
   together". Cards inside keep their own orange rails. */
.v2-seg-domain-trio {
  display: grid;
  /* Wealth takes 2 column-widths, Treasury + Crypto take 1 each — so the
     cards inside line up with the 4-col grid above. */
  grid-template-columns: 2fr 1fr 1fr;
  gap: 18px;
  align-items: start;
}
/* 2 cards horizontal inside the Wealth container */
.v2-seg-grid-2col { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
/* 1 card inside Treasury / Crypto */
.v2-seg-grid-1col { grid-template-columns: 1fr !important; gap: 10px; }
.v2-seg-domain-trio .v2-seg-domain {
  padding: 16px 16px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  transition: border-color 220ms var(--ease-out);
}
.v2-seg-domain-trio .v2-seg-domain:hover {
  border-color: color-mix(in srgb, var(--orange) 30%, var(--v2-border));
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-seg-domain-trio .v2-seg-domain:hover {
    border-color: rgba(255, 88, 0, 0.30);
  }
}
/* Domain label spans the container width and sits on a divider that
   visually caps the domain's contents. */
.v2-seg-domain-trio .v2-seg-domain-label {
  display: block;
  width: 100%;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-seg-domain-trio .v2-seg-domain-label {
    border-bottom-color: rgba(255, 88, 0, 0.35);
  }
}
/* When a domain belongs to the trio, force cards into a single column. */
.v2-seg-grid-stack {
  grid-template-columns: 1fr !important;
  gap: 10px;
}
.v2-seg-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 3px;
  align-items: center;
  padding: 12px 16px 12px 18px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.v2-seg-card::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--orange);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.v2-seg-card::after {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 100px; height: 100px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--orange) 14%, transparent) 0%,
    transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out);
  z-index: 0;
}
.v2-seg-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--orange) 45%, var(--v2-border));
  box-shadow:
    0 8px 18px -12px color-mix(in srgb, var(--orange) 50%, transparent),
    0 3px 8px -4px rgba(0,0,0,0.35);
}
.v2-seg-card:hover::before { opacity: 1; }
.v2-seg-card:hover::after  { opacity: 1; }
.v2-seg-num {
  position: relative; z-index: 1;
  grid-row: 1 / 3;
  grid-column: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  align-self: center;
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
  border-radius: 6px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 0;
  margin: 0;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-seg-num {
    background: rgba(255, 88, 0, 0.09);
    border-color: rgba(255, 88, 0, 0.30);
  }
}
.v2-seg-card:hover .v2-seg-num {
  background: color-mix(in srgb, var(--orange) 18%, transparent);
  border-color: var(--orange);
}
.v2-seg-name {
  position: relative; z-index: 1;
  grid-column: 2; grid-row: 1;
  color: var(--v2-text);
  font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
}
.v2-seg-desc {
  position: relative; z-index: 1;
  grid-column: 2; grid-row: 2;
  color: var(--v2-text-3);
  font-size: 11.5px;
  line-height: 1.4;
  margin: 0;
  transition: color 200ms var(--ease-out);
}
.v2-seg-card:hover .v2-seg-desc { color: var(--v2-text-2); }
@media (max-width: 1180px) {
  .v2-seg-grid-flat { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) {
  .v2-seg-grid-flat { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .v2-seg-grid-flat { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .v2-seg-grid-flat { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-seg-card, .v2-seg-card::before, .v2-seg-card::after,
  .v2-seg-num, .v2-seg-desc { transition: none !important; }
  .v2-seg-card:hover { transform: none; }
}

/* ===== Capabilities — always-open explorer (50 / 50, no collapsed state) ========== */
.v2-cap-explorer {
  display: flex;
  width: 100%;
  max-width: 1200px;                        /* max permissible width */
  margin: 0 auto;
  background: var(--v2-card);
  border-radius: 12px;
  border-left: 3px solid var(--orange);
  box-shadow: var(--v2-shadow-card);
  overflow: hidden;
}
.v2-cap-pane {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

/* Panel content fade/slide in when switching categories */
.v2-cap-panel.is-entering {
  animation: v2-cap-fade-in 320ms var(--ease-out);
}
@keyframes v2-cap-fade-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- Left rail ------------------------------------------------------------- */
.v2-cap-rail {
  display: flex; flex-direction: column;
  padding: 14px 12px;
  border-right: 1px solid var(--v2-border);
  background: color-mix(in srgb, var(--v2-bg) 50%, var(--v2-card));
}
.v2-cap-rail-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px; align-items: start;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none; border-radius: 8px;
  color: var(--v2-text-2);
  font-family: inherit; text-align: left;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.v2-cap-rail-item + .v2-cap-rail-item { margin-top: 2px; }
.v2-cap-rail-item:hover {
  background: color-mix(in srgb, var(--orange) 8%, transparent);
  color: var(--v2-text);
}
.v2-cap-rail-item:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

.v2-cap-rail-item.is-active {
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--v2-text);
}
.v2-cap-rail-item.is-active::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--orange);
}

.v2-cap-rail-num {
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  text-align: center;
  padding-top: 2px;
}
.v2-cap-rail-meta {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;     /* allow text-overflow / wrapping inside the grid track */
}
.v2-cap-rail-name {
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.3; color: var(--v2-text);
}
.v2-cap-rail-desc {
  font-size: 12.5px; font-weight: 400; letter-spacing: -0.005em;
  line-height: 1.4; color: var(--v2-text-3);
}
.v2-cap-rail-item.is-active .v2-cap-rail-desc,
.v2-cap-rail-item:hover .v2-cap-rail-desc { color: var(--v2-text-2); }

.v2-cap-rail-count {
  align-self: center;
  color: var(--v2-text-3);
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 999px;
  background: var(--v2-bg-2);
}
.v2-cap-rail-item.is-active .v2-cap-rail-count {
  background: color-mix(in srgb, var(--orange) 18%, transparent);
  color: var(--orange);
}

/* --- Right pane ------------------------------------------------------------ */
.v2-cap-pane { padding: 28px 32px; }
.v2-cap-panel[hidden] { display: none; }

.v2-cap-panel-head {
  display: flex; gap: 18px; align-items: center;
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--v2-border);
}
.v2-cap-panel-num {
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 36px; font-weight: 700; letter-spacing: -0.04em;
  line-height: 1;
}
.v2-cap-panel-name {
  color: var(--v2-text);
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0;
}
.v2-cap-panel-count {
  display: inline-block; margin-top: 4px;
  color: var(--v2-text-3); font-size: 13px;
}

.v2-cap-panel-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.v2-cap-panel-list li {
  display: flex; align-items: center; gap: 11px;
  color: var(--v2-text-2);
  font-size: 14.5px; line-height: 1.45;
  padding: 10px 0 9px;
  border-bottom: 1px dashed color-mix(in srgb, var(--v2-border) 80%, transparent);
  transition: color 180ms var(--ease-out), padding-left 200ms var(--ease-out);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-cap-panel-list li { border-bottom: 1px dashed rgba(255,255,255,0.05); }
}
.v2-cap-panel-list li:last-child { border-bottom: none; }
.v2-cap-panel-list li::before {
  content: '';
  flex-shrink: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.85;
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
}
.v2-cap-panel-list li:hover {
  color: var(--v2-text);
  padding-left: 4px;
}
.v2-cap-panel-list li:hover::before {
  opacity: 1;
  transform: scale(1.2);
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Below the desktop layout the explorer stacks vertically:
     rail is a horizontal pill bar on top, pane sits below it. */
  .v2-cap-explorer { flex-direction: column; max-width: 100%; }
  .v2-cap-rail-desc { display: none; }
  .v2-cap-rail-item { align-items: center; }
  .v2-cap-pane { flex: 0 1 auto; padding: 22px 20px 26px; }

  .v2-cap-rail {
    flex-direction: row;
    gap: 4px; overflow-x: auto; padding: 12px;
    border-right: none;
    border-bottom: 1px solid var(--v2-border);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .v2-cap-rail-item {
    flex-shrink: 0; grid-template-columns: auto auto;
    padding: 8px 14px;
  }
  .v2-cap-rail-item.is-active::before {
    left: 14px; right: 14px; top: auto; bottom: 0;
    width: auto; height: 3px;
    border-radius: 3px 3px 0 0;
  }
  .v2-cap-rail-name { display: none; }
  .v2-cap-rail-count { font-size: 11px; padding: 1px 6px; }
  .v2-cap-panel-list { grid-template-columns: 1fr; }
}

/* ===== Status badges ============================================================== */
.v2-status {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; padding: 2px 7px;
  border-radius: 4px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.v2-status-built { background: rgba(63,181,123,0.18); color: #4FD394; }
.v2-status-p1    { background: rgba(62,139,255,0.18); color: #6DA8FF; }
.v2-status-p2,
.v2-status-p3    { background: rgba(232,163,61,0.18); color: #E8A33D; }
.v2-status-all   { background: rgba(244,123,32,0.15); color: var(--orange); }

/* ===== Steps (NEXT STEPS) ======================================================== */
.v2-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.v2-step {
  position: relative;
  display: grid; grid-template-columns: 84px 1fr;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 280ms var(--ease-out),
              border-color 280ms var(--ease-out),
              box-shadow 280ms var(--ease-out);
}
.v2-step:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--orange) 40%, var(--v2-border));
  box-shadow:
    0 12px 28px -16px color-mix(in srgb, var(--orange) 50%, transparent),
    0 4px 10px -6px rgba(0,0,0,0.4);
}

.v2-step-num {
  position: relative;
  background: var(--orange); color: #FFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; letter-spacing: -0.04em;
  overflow: hidden;
  transition: background 320ms var(--ease-out);
}
.v2-step:hover .v2-step-num {
  background: linear-gradient(180deg, var(--orange), var(--deep-orange));
}
.v2-step-num::before {
  /* soft sheen that sweeps across the orange block on hover */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    color-mix(in srgb, #FFF 18%, transparent) 50%,
    transparent 100%);
  transform: translateX(-110%);
  transition: transform 720ms var(--ease-out);
  pointer-events: none;
}
.v2-step:hover .v2-step-num::before { transform: translateX(110%); }

.v2-step-body { padding: 20px 56px 20px 24px; }  /* reserve right space for chevron */
.v2-step-body h4 {
  position: relative;
  display: inline-block;
  color: var(--v2-text);
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.v2-step-body h4::after {
  /* underline grows under the row title on hover */
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 1.5px;
  background: var(--orange);
  transition: width 360ms var(--ease-out);
}
.v2-step:hover .v2-step-body h4::after { width: 100%; }
.v2-step-body p {
  color: var(--v2-text-2); font-size: 14.5px; line-height: 1.55; margin: 0;
}

/* Chevron that fades in + slides right on row hover */
.v2-step::after {
  content: '';
  position: absolute;
  right: 22px; top: 50%;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: translateY(-50%) translateX(-10px);
  opacity: 0;
  transition: opacity 280ms var(--ease-out),
              transform 280ms var(--ease-out);
  pointer-events: none;
}
.v2-step:hover::after {
  opacity: 0.9;
  transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .v2-step, .v2-step *, .v2-step::after, .v2-step::before { transition: none !important; }
  .v2-step:hover { transform: none; }
}

/* ===== CTA panel ================================================================== */
.v2-cta-panel {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 32px;
  background: var(--v2-card);
  border: 1.5px solid var(--orange);
  border-radius: 10px;
  padding: 36px 40px;
}
.v2-cta-title {
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.025em;
  margin: 6px 0 18px;
}
.v2-cta-url { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 0; }
.v2-cta-mark { opacity: 0.85; }
.v2-cta-mark img { display: block; }

/* ===== Footer ===================================================================== */
.v2-footer {
  background: var(--v2-bg-2);
  border-top: 1px solid var(--v2-border);
  padding: 56px 0 36px;
}
.v2-footer-inner { display: flex; flex-direction: column; gap: 36px; }
.v2-footer-brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 800; font-size: 18px;
  color: var(--v2-text);
}
.v2-footer-brand img { display: block; }
.v2-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}
.v2-footer-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.v2-footer-mark {
  position: relative;
  width: 140px; height: 140px;
  opacity: 0.95;
  flex-shrink: 0;
}
.v2-footer-mark img {
  width: 100%; height: 100%; object-fit: contain;
  position: relative; z-index: 1;
}
.v2-footer-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 162px; height: 162px;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 2;
  animation: v2-hero-orbit-spin 14s linear infinite;
}
.v2-footer-orbit::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateX(-50%);
  z-index: 2;
  box-shadow:
    0 0 10px 2px var(--orange),
    0 0 24px 5px color-mix(in srgb, var(--orange) 55%, transparent),
    0 0 48px 10px color-mix(in srgb, var(--orange) 22%, transparent);
}
.v2-footer-orbit::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(
    from 0deg,
    rgba(255, 88, 0, 0.85) 0deg,
    rgba(255, 88, 0, 0.45) 12deg,
    rgba(255, 88, 0, 0)    32deg,
    rgba(255, 88, 0, 0)    268deg,
    rgba(255, 88, 0, 0.45) 348deg,
    rgba(255, 88, 0, 0.85) 360deg
  );
  -webkit-mask: radial-gradient(circle,
    transparent 0%,
    transparent 47.5%,
    black 49%,
    black 51%,
    transparent 53%,
    transparent 100%);
          mask: radial-gradient(circle,
    transparent 0%,
    transparent 47.5%,
    black 49%,
    black 51%,
    transparent 53%,
    transparent 100%);
  filter: blur(0.9px);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-footer-orbit::before {
    box-shadow:
      0 0 10px 2px var(--orange),
      0 0 24px 5px rgba(255, 88, 0, 0.55),
      0 0 48px 10px rgba(255, 88, 0, 0.22);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-footer-orbit { animation: none; }
}
.v2-footer-cols h6 {
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; margin: 0 0 14px;
}
.v2-footer-cols a {
  display: block; padding: 4px 0;
  color: var(--v2-text-2);
  font-size: 14px; text-decoration: none;
  transition: color 180ms var(--ease-out);
}
.v2-footer-cols a:hover { color: var(--orange); }
.v2-footer-foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--v2-border);
  color: var(--v2-text-3); font-size: 13px;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 960px) {
  .v2-hero-inner { grid-template-columns: 1fr; }
  .v2-hero-mark { width: 220px; height: 220px; justify-self: start; }
  /* Orbit + satellite glow scale down proportionally so they don't dwarf the
     smaller logo on mobile. */
  .v2-hero-orbit { width: 252px; height: 252px; }
  .v2-hero-orbit::before {
    width: 9px; height: 9px;
    top: -5px;
    box-shadow:
      0 0  10px  2px var(--orange),
      0 0  24px  5px rgba(255, 88, 0, 0.55),
      0 0  48px 10px rgba(255, 88, 0, 0.22);
  }
  .v2-grid-3, .v2-grid-2, .v2-cat-grid, .v2-framework-grid { grid-template-columns: 1fr; }
  .v2-nav-links { gap: 18px; }
  .v2-cta-panel { grid-template-columns: 1fr; text-align: left; }
  .v2-cta-mark { display: none; }
  .v2-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .v2-section { padding: 64px 0; }
  .v2-header-inner { flex-wrap: wrap; gap: 14px; }
  .v2-nav { order: 99; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .v2-nav-links { justify-content: flex-start; flex-wrap: nowrap; }
  .v2-step { grid-template-columns: 64px 1fr; }
  .v2-step-num { font-size: 24px; }
  .v2-step-body { padding: 18px 44px 18px 18px; }   /* tighter padding, smaller chevron reserve */
  .v2-step::after { right: 14px; width: 16px; height: 16px; }
  .v2-footer-cols { grid-template-columns: 1fr; }
  .v2-brand-tag { display: none; }

  /* Hero on tight screens — keep headlines from overflowing */
  .v2-hero-headline { font-size: clamp(1.65rem, 7vw, 2.4rem); }
  .v2-hero-sub { font-size: 15px; }
  .v2-hero-mark { width: 180px; height: 180px; }
  .v2-hero-orbit { width: 206px; height: 206px; }

  /* Leader cards: tighter chevron padding on small screens */
  .v2-leader-card { padding: 26px 22px 22px 26px; }
  .v2-leader-num { font-size: 42px; }
}

/* =============================================================================
   PRODUCT PAGES  (product.html + 4 module pages)
   ============================================================================= */

/* ----- Hero ----------------------------------------------------------------- */
.v2-prod-hero { padding-top: 88px; padding-bottom: 36px; }
.v2-prod-hero .container { max-width: 1080px; }

/* Option C — hero container expands to the page's default 1280px so its
   outer edges align with sections below, but the readable text + CTAs
   stay capped at a comfortable line length. Applied per-page by adding
   `v2-prod-hero-aligned` to the hero <section>. */
.v2-prod-hero-aligned .container { max-width: 1280px; }
.v2-prod-hero-aligned .v2-prod-crumb,
.v2-prod-hero-aligned .v2-eyebrow,
.v2-prod-hero-aligned .v2-prod-h1,
.v2-prod-hero-aligned .v2-prod-tag,
.v2-prod-hero-aligned .v2-prod-lede,
.v2-prod-hero-aligned .v2-prod-stats,
.v2-prod-hero-aligned .v2-hero-ctas {
  max-width: 1080px;
}

.v2-prod-crumb {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.v2-prod-crumb a {
  color: var(--v2-text-2);
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}
.v2-prod-crumb a:hover { color: var(--orange); }
.v2-prod-crumb > span:not(a) { opacity: 0.5; }

.v2-prod-h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--v2-text);
  margin: 18px 0 18px;
}
.v2-prod-tag {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}
.v2-prod-lede {
  color: var(--v2-text-2);
  font-size: clamp(15px, 1.7vw, 17.5px);
  line-height: 1.55;
  max-width: 720px;
  margin: 0 0 32px;
}
.v2-prod-stats {
  display: flex; flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0 0 30px;
  padding: 18px 0;
  border-top: 1px solid var(--v2-border);
  border-bottom: 1px solid var(--v2-border);
}
.v2-prod-stat {
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
}
.v2-prod-stat strong {
  color: var(--orange);
  font-weight: 700;
  margin-right: 4px;
}

/* ----- Section helpers ----------------------------------------------------- */
.v2-section-foot {
  color: var(--v2-text-3);
  font-size: 13px;
  text-align: center;
  margin: 24px 0 0;
}
.v2-section-foot .v2-status { margin: 0 2px; }

/* ----- Module cards (overview + cross-links) ------------------------------ */
.v2-prod-mod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 32px;
}
.v2-prod-cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.v2-prod-mod {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 220px;
  padding: 32px 34px 28px 36px;
  background:
    linear-gradient(135deg,
      var(--v2-card) 0%,
      color-mix(in srgb, var(--v2-card) 94%, var(--orange) 6%) 100%);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform 220ms var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
              border-color 220ms var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
              box-shadow 220ms var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1));
}
.v2-prod-mod::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 3px; height: 64%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--orange), var(--deep-orange));
  border-radius: 0 3px 3px 0;
  transition: height 240ms var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1));
}
.v2-prod-mod::after {
  content: ''; position: absolute; top: -50px; right: -50px;
  width: 180px; height: 180px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--orange) 14%, transparent) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 240ms var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1));
  pointer-events: none;
}
.v2-prod-mod:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--orange) 60%, var(--v2-border));
  box-shadow:
    0 14px 32px -16px color-mix(in srgb, var(--orange) 50%, transparent),
    0 4px 12px -4px rgba(0,0,0,0.45);
}
.v2-prod-mod:hover::before { height: 92%; }
.v2-prod-mod:hover::after  { opacity: 1; }

.v2-prod-mod-num {
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
  padding-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 60%, transparent);
  margin-bottom: 16px;
  align-self: flex-start;
  transition: letter-spacing 220ms var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1));
}
.v2-prod-mod:hover .v2-prod-mod-num { letter-spacing: 0.28em; }

.v2-prod-mod-name {
  color: var(--v2-text);
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2;
  margin: 0 0 10px;
}
.v2-prod-mod-tag {
  color: var(--v2-text-2);
  font-size: 14.5px; line-height: 1.55;
  margin: 0 0 18px;
}
.v2-prod-mod-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
}
.v2-prod-mod-count {
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700;
}
.v2-prod-mod-arrow {
  color: var(--orange);
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 220ms var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
              transform 220ms var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1));
}
.v2-prod-mod:hover .v2-prod-mod-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Compact variant for cross-link section */
.v2-prod-mod-compact {
  min-height: 0;
  padding: 22px 24px 22px 28px;
}
.v2-prod-mod-compact .v2-prod-mod-name { font-size: 17px; margin-bottom: 6px; }
.v2-prod-mod-compact .v2-prod-mod-tag { font-size: 13.5px; margin-bottom: 12px; }
.v2-prod-mod-compact .v2-prod-mod-foot { display: none; }
.v2-prod-mod-compact .v2-prod-mod-arrow {
  position: absolute; right: 18px; top: 22px;
}

/* ----- Anatomy of a Micro AI section --------------------------------------- */
.v2-prod-anatomy {
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  padding: 36px 36px 32px;
}
.v2-prod-anatomy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.v2-prod-anatomy-step {
  position: relative;
  padding-left: 18px;
  border-left: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
  transition: border-color 220ms var(--ease-out);
}
.v2-prod-anatomy-step:hover {
  border-left-color: var(--orange);
}
.v2-prod-anatomy-num {
  display: inline-block;
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  margin-bottom: 10px;
}
.v2-prod-anatomy-step h3 {
  color: var(--v2-text);
  font-size: 17px; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.v2-prod-anatomy-step p {
  color: var(--v2-text-2);
  font-size: 14.5px; line-height: 1.55;
  margin: 0;
}

/* ----- Outcomes grid (3 col) ----------------------------------------------- */
.v2-prod-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.v2-prod-outcome {
  position: relative;
  padding: 28px 28px 24px 30px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 220ms var(--ease-out),
              border-color 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out);
}
.v2-prod-outcome::before {
  content: ''; position: absolute; left: 0; top: 24px; bottom: 24px;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), var(--deep-orange));
  border-radius: 0 3px 3px 0;
  opacity: 0.7;
  transition: opacity 220ms var(--ease-out);
}
.v2-prod-outcome:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--orange) 50%, var(--v2-border));
  box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--orange) 50%, transparent);
}
.v2-prod-outcome:hover::before { opacity: 1; }
.v2-prod-outcome-num {
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  margin-bottom: 12px;
  display: inline-block;
}
.v2-prod-outcome-title {
  color: var(--v2-text);
  font-size: 18px; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 12px;
}
.v2-prod-outcome-body {
  color: var(--v2-text-2);
  font-size: 14.5px; line-height: 1.6;
  margin: 0;
}

/* 4-card variant for outcome grids — 2×2 on desktop, single-col on mobile */
.v2-prod-outcomes-4 {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 720px) {
  .v2-prod-outcomes-4 { grid-template-columns: 1fr !important; }
}

/* ----- Categories with feature lists --------------------------------------- */
.v2-prod-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 28px;
}
.v2-prod-cat {
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  padding: 24px 28px 22px;
}
.v2-prod-cat-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--v2-border);
}
.v2-prod-cat-num {
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
  padding-top: 2px;
}
.v2-prod-cat-name {
  color: var(--v2-text);
  font-size: 17px; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.v2-prod-cat-count {
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.v2-prod-cat-list {
  list-style: none; padding: 0; margin: 0;
}

/* Wide panel variant — left-aligned, spans the full container width so its
   edges line up with the outcome cards and the section headline above. */
.v2-prod-cat-wide {
  width: 100%;
  margin: 28px 0 0;
}
/* 2-column feature list. Used on .v2-prod-cat-wide (solutions pages) and on
   each .v2-prod-cat card on the product module pages. Locked to 2 columns at
   desktop width; collapses to 1 column on narrower viewports. */
.v2-prod-cat-wide .v2-prod-cat-list,
.v2-prod-cat .v2-prod-cat-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 36px;
  row-gap: 0;
}
@media (max-width: 720px) {
  .v2-prod-cat-wide .v2-prod-cat-list,
  .v2-prod-cat .v2-prod-cat-list { grid-template-columns: 1fr; }
}
.v2-prod-cat-wide .v2-prod-cat-list li,
.v2-prod-cat .v2-prod-cat-list li {
  border-bottom: 1px dashed color-mix(in srgb, var(--v2-border) 80%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-prod-cat-wide .v2-prod-cat-list li,
  .v2-prod-cat .v2-prod-cat-list li { border-bottom: 1px dashed rgba(255,255,255,0.06); }
}
/* Reset the original adjacent-sibling dashed border that lived inside the
   single-column flow — the grid now renders each cell with its own bottom
   border so the previous `li + li` rule would double up. */
.v2-prod-cat-wide .v2-prod-cat-list li + li,
.v2-prod-cat .v2-prod-cat-list li + li {
  border-top: none;
}
/* Drop the final row's bottom border on each column so the panel ends clean.
   :nth-last-of-type targets the last 1 or 2 items depending on column count. */
.v2-prod-cat-wide .v2-prod-cat-list li:last-child,
.v2-prod-cat-wide .v2-prod-cat-list li:nth-last-child(2):nth-child(odd),
.v2-prod-cat .v2-prod-cat-list li:last-child,
.v2-prod-cat .v2-prod-cat-list li:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}
.v2-prod-cat-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 4px 9px 0;
  color: var(--v2-text-2);
  font-size: 14px; line-height: 1.45;
  transition: color 160ms var(--ease-out),
              transform 160ms var(--ease-out);
}
.v2-prod-cat-list li + li {
  border-top: 1px dashed color-mix(in srgb, var(--v2-border) 80%, transparent);
}
.v2-prod-cat-list li:hover {
  color: var(--v2-text);
  transform: translateX(2px);
}
/* Status badge stays vertically centred against the first text line */
.v2-prod-cat-list li .v2-status {
  flex-shrink: 0;
  margin-top: 1px;
}
/* Optional secondary text under the feature name (used on segment pages
   to surface the source capability category) */
.v2-prod-cat-list-text {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.v2-prod-cat-list-meta {
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 5-card grid on solutions.html — auto-fit so the awkward 5th card lays
   cleanly across breakpoints instead of orphaning a full-width row */
.v2-prod-mod-grid-5 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* 4 adjacent-segment cards on the segment pages */
.v2-prod-cross-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .v2-prod-cross-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .v2-prod-cross-grid-4 { grid-template-columns: 1fr; }
}

/* =============================================================================
   PRICING PAGE
   ============================================================================= */

/* ----- Stack builder — institution / market picker cards ------------------ */
.v2-pick-group { margin-top: 36px; }
.v2-pick-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.v2-pick-head h3 {
  font-size: 16px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--v2-text);
  margin: 0;
}
.v2-pick-meta {
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}

.v2-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.v2-pick { display: block; cursor: pointer; }
.v2-pick input { position: absolute; opacity: 0; pointer-events: none; }
.v2-pick-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  transition: transform 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              background 200ms var(--ease-out);
}
.v2-pick:hover .v2-pick-card {
  border-color: color-mix(in srgb, var(--orange) 50%, var(--v2-border));
  transform: translateY(-2px);
}
.v2-pick input:focus-visible + .v2-pick-card {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.v2-pick input:checked + .v2-pick-card {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 8%, var(--v2-card));
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-pick input:checked + .v2-pick-card { background: rgba(255, 88, 0, 0.08); }
}
.v2-pick-code {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  flex-shrink: 0;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-pick-code { background: rgba(255, 88, 0, 0.14); }
}
.v2-pick:hover .v2-pick-code,
.v2-pick input:checked + .v2-pick-card .v2-pick-code {
  background: var(--orange);
  color: #FFF;
}
.v2-pick-body { flex: 1; min-width: 0; }
.v2-pick-name {
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--v2-text);
}
.v2-pick-sub {
  color: var(--v2-text-3);
  font-size: 12px; line-height: 1.4;
  margin-top: 2px;
}
.v2-pick-tick {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--v2-border-strong) 100%, transparent);
  color: transparent;
  font-size: 13px; font-weight: 800;
  transition: all 200ms var(--ease-out);
}
.v2-pick input:checked + .v2-pick-card .v2-pick-tick {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFF;
}

/* ----- Search toolbar (above the feature list) ---------------------------- */
.v2-stack-toolbar {
  margin-top: 32px;
  display: flex; justify-content: flex-end;
}
.v2-stack-search {
  position: relative;
  display: inline-flex; align-items: center;
  width: 100%; max-width: 360px;
}
.v2-stack-search svg {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--v2-text-3);
  pointer-events: none;
}
.v2-stack-search input {
  width: 100%;
  padding: 10px 14px 10px 34px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  color: var(--v2-text);
  font-family: inherit; font-size: 14px;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
  outline: none;
}
.v2-stack-search input::placeholder { color: var(--v2-text-3); }
.v2-stack-search input:focus {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 4%, var(--v2-card));
}

/* ----- Floating chip (sticks bottom-right while user scrolls the list) --- */
.v2-stack-float {
  position: fixed; right: 22px; bottom: 22px;
  z-index: 40;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px;
  background: var(--orange);
  color: #FFF;
  text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  cursor: pointer;
  box-shadow:
    0 14px 32px -12px rgba(255, 88, 0, 0.55),
    0 4px 10px -2px rgba(0, 0, 0, 0.35);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.v2-stack-float:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px -10px rgba(255, 88, 0, 0.65),
    0 6px 14px -4px rgba(0, 0, 0, 0.4);
}
.v2-stack-float-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .v2-stack-float { right: 14px; bottom: 14px; padding: 10px 14px 10px 12px; font-size: 13px; }
  .v2-stack-float-count { min-width: 22px; height: 22px; }
}

/* ----- Feature list area --------------------------------------------------- */
.v2-stack-features { margin-top: 18px; }
.v2-stack-empty {
  padding: 36px 28px;
  text-align: center;
  background: var(--v2-card);
  border: 1px dashed var(--v2-border-strong);
  border-radius: 10px;
  color: var(--v2-text-3);
  font-size: 14.5px;
  line-height: 1.55;
}

.v2-stack-summary {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  margin-bottom: 14px;
}
.v2-stack-count {
  color: var(--v2-text-2);
  font-size: 14px;
}
.v2-stack-count strong {
  color: var(--orange);
  font-weight: 700;
}
.v2-stack-bulk { display: flex; gap: 8px; }
.v2-stack-bulk button {
  background: transparent;
  border: 1px solid var(--v2-border-strong);
  border-radius: 6px;
  color: var(--v2-text-2);
  font-family: inherit;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.v2-stack-bulk button:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.v2-stack-section {
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  padding: 6px 20px 14px;
  margin-bottom: 12px;
  /* 2-column layout: feature rows live inside this grid; the section head
     spans the full width via `grid-column: 1 / -1`. Collapses to 1 col on
     mobile so checkbox + label always have room. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 28px;
  row-gap: 0;
}
.v2-stack-section-head { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .v2-stack-section { grid-template-columns: 1fr; }
}
.v2-stack-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 14px 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--v2-border);
  color: var(--v2-text);
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
}
.v2-stack-section-count {
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
}

.v2-stack-feature {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  border-bottom: 1px dashed color-mix(in srgb, var(--v2-border) 70%, transparent);
  transition: padding-left 180ms var(--ease-out);
}
.v2-stack-feature:last-child { border-bottom: none; }
/* Last row of the LEFT column (when odd total) also gets its bottom-border
   stripped, otherwise it dangles below the visually-last row in column 2. */
.v2-stack-section .v2-stack-feature:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.v2-stack-feature:hover { padding-left: 4px; }
.v2-stack-feature input { position: absolute; opacity: 0; pointer-events: none; }
.v2-stack-feature-tick {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 5px;
  border: 1.5px solid var(--v2-border-strong);
  color: transparent;
  font-size: 12px; font-weight: 800;
  transition: all 180ms var(--ease-out);
}
.v2-stack-feature input:checked ~ .v2-stack-feature-tick,
.v2-stack-feature input:checked + .v2-stack-feature-tick {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFF;
}
.v2-stack-feature input:focus-visible ~ .v2-stack-feature-tick,
.v2-stack-feature input:focus-visible + .v2-stack-feature-tick {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.v2-stack-feature-body { flex: 1; min-width: 0; }
.v2-stack-feature-name {
  display: inline;
  color: var(--v2-text);
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.4;
}
.v2-stack-feature-unique {
  display: block;
  color: var(--v2-text-3);
  font-size: 12.5px; line-height: 1.5;
  margin-top: 4px;
}
.v2-stack-pill {
  display: inline-block;
  background: color-mix(in srgb, var(--orange) 18%, transparent);
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-stack-pill { background: rgba(255, 88, 0, 0.18); }
}

.v2-stack-submit {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 18px;
  margin-top: 22px;
  padding: 20px 22px;
  background:
    linear-gradient(135deg,
      var(--v2-card) 0%,
      color-mix(in srgb, var(--v2-card) 88%, var(--orange) 12%) 100%);
  border: 1px solid color-mix(in srgb, var(--orange) 35%, var(--v2-border));
  border-radius: 10px;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-stack-submit { background: rgba(255, 88, 0, 0.05); border-color: rgba(255, 88, 0, 0.35); }
}
.v2-stack-submit-hint {
  color: var(--v2-text-3);
  font-size: 12.5px;
  flex: 1; min-width: 220px;
}
.v2-stack-submit-hint a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
}

/* =============================================================================
   PLATFORM ARCHITECTURE PAGE
   ============================================================================= */

/* ----- Stats band (4 hero metrics) ----------------------------------------- */
.v2-arch-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.v2-arch-stat {
  position: relative;
  padding: 22px 22px 20px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  border-left: 3px solid var(--orange);
  transition: transform 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.v2-arch-stat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--orange) 50%, var(--v2-border));
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--orange) 50%, transparent);
}
.v2-arch-stat-num {
  display: block;
  color: var(--orange);
  font-size: 28px; font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.v2-arch-stat-label {
  display: block;
  color: var(--v2-text);
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.v2-arch-stat-ctx {
  display: block;
  color: var(--v2-text-3);
  font-size: 12.5px; line-height: 1.4;
}

/* ----- 6-layer SVG diagram wrapper ----------------------------------------- */
.v2-arch-diagram {
  margin-top: 32px;
  padding: 28px;
  background:
    radial-gradient(ellipse at 50% -20%,
      color-mix(in srgb, var(--orange) 5%, var(--v2-card)) 0%,
      var(--v2-card) 70%);
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ----- 6 architecture principles ------------------------------------------ */
.v2-arch-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.v2-arch-principle {
  position: relative;
  padding: 24px 24px 20px 28px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  transition: transform 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.v2-arch-principle::before {
  content: ''; position: absolute; left: 0; top: 20px; bottom: 20px;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), var(--deep-orange));
  border-radius: 0 3px 3px 0;
  opacity: 0.7;
  transition: opacity 200ms var(--ease-out), top 200ms var(--ease-out), bottom 200ms var(--ease-out);
}
.v2-arch-principle:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--orange) 45%, var(--v2-border));
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--orange) 45%, transparent);
}
.v2-arch-principle:hover::before { opacity: 1; top: 8px; bottom: 8px; }
.v2-arch-principle-num {
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  display: inline-block;
  margin-bottom: 10px;
}
.v2-arch-principle h3 {
  color: var(--v2-text);
  font-size: 17px; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.v2-arch-principle p {
  color: var(--v2-text-2);
  font-size: 14px; line-height: 1.55;
  margin: 0;
}

/* ----- Tech stack table ---------------------------------------------------- */
.v2-arch-stack {
  margin-top: 32px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.v2-arch-stack table {
  width: 100%; min-width: 720px;
  border-collapse: collapse;
}
.v2-arch-stack th {
  background: color-mix(in srgb, var(--v2-bg) 60%, var(--v2-card));
  color: var(--v2-text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
  text-align: left;
  padding: 14px 22px;
  border-bottom: 1px solid var(--v2-border);
}
.v2-arch-stack td {
  color: var(--v2-text-2);
  font-size: 14px; line-height: 1.5;
  padding: 12px 22px;
  border-bottom: 1px solid var(--v2-border);
}
.v2-arch-stack td:first-child { color: var(--v2-text); font-weight: 600; }
.v2-arch-stack tr:last-child td { border-bottom: none; }
.v2-arch-stack-group td {
  color: var(--orange) !important;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
  background: color-mix(in srgb, var(--orange) 6%, transparent);
  padding-top: 16px; padding-bottom: 12px;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-arch-stack th { background: rgba(20, 22, 25, 0.6); }
  .v2-arch-stack-group td { background: rgba(255, 88, 0, 0.06); }
}
.v2-arch-stack tbody tr:not(.v2-arch-stack-group):hover td {
  background: color-mix(in srgb, var(--orange) 4%, transparent);
}

/* ----- Pre-built integrations (4 col × 2 row) ----------------------------- */
.v2-arch-int-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.v2-arch-int {
  padding: 22px 22px 20px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  transition: transform 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.v2-arch-int:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--orange) 45%, var(--v2-border));
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--orange) 45%, transparent);
}
.v2-arch-int-tag {
  display: inline-block;
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 60%, transparent);
}
.v2-arch-int h4 {
  color: var(--v2-text);
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.3;
}
.v2-arch-int p {
  color: var(--v2-text-2);
  font-size: 13.5px; line-height: 1.5;
  margin: 0;
}

/* ----- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .v2-arch-stats { grid-template-columns: repeat(2, 1fr); }
  .v2-arch-principles { grid-template-columns: repeat(2, 1fr); }
  .v2-arch-int-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-arch-diagram { padding: 18px; }
}
@media (max-width: 600px) {
  .v2-arch-stats { grid-template-columns: 1fr; }
  .v2-arch-principles { grid-template-columns: 1fr; }
  .v2-arch-int-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-arch-stat, .v2-arch-principle, .v2-arch-int { transition: none !important; }
  .v2-arch-stat:hover, .v2-arch-principle:hover, .v2-arch-int:hover { transform: none; }
}

/* =============================================================================
   PRODUCT — feature picker (product.html)
   ============================================================================= */

/* ---- Module shortcut cards above the selector --------------------------- */
.v2-pf-mod-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.v2-pf-mod-link {
  display: flex; flex-direction: column;
  padding: 18px 20px 16px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 200ms var(--ease-out),
              border-color 200ms var(--ease-out);
}
.v2-pf-mod-link::before {
  content: ''; position: absolute; left: 0; top: 18px; bottom: 18px;
  width: 3px; background: linear-gradient(180deg, var(--orange), var(--deep-orange));
  border-radius: 0 3px 3px 0;
  opacity: 0.7;
  transition: opacity 200ms var(--ease-out);
}
.v2-pf-mod-link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--orange) 50%, var(--v2-border));
}
.v2-pf-mod-link:hover::before { opacity: 1; }
.v2-pf-mod-link-name {
  font-size: 16px; font-weight: 700;
  color: var(--v2-text);
  letter-spacing: -0.015em;
}
.v2-pf-mod-link-tag {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--v2-text-2);
  line-height: 1.5;
}
.v2-pf-mod-link .v2-prod-mod-arrow {
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%) translateX(-6px);
  color: var(--orange);
  opacity: 0;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.v2-pf-mod-link:hover .v2-prod-mod-arrow {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
@media (max-width: 900px) { .v2-pf-mod-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .v2-pf-mod-links { grid-template-columns: 1fr; } }

/* ---- Selector form -------------------------------------------------------- */
.v2-pf-form { margin-top: 30px; }
.v2-pf-global-toolbar {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  position: sticky;
  top: 64px;
  z-index: 30;
  margin-bottom: 14px;
}
.v2-pf-global-count {
  color: var(--v2-text-2);
  font-size: 13.5px;
  flex: 1; min-width: 180px;
}
.v2-pf-global-count strong {
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 17px; font-weight: 700;
}
.v2-pf-bulk {
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--v2-border-strong);
  border-radius: 6px;
  color: var(--v2-text-2);
  cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.v2-pf-bulk:hover { border-color: var(--orange); color: var(--orange); }

.v2-pf-modules { display: flex; flex-direction: column; gap: 12px; }
.v2-pf-module {
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 200ms var(--ease-out);
}
.v2-pf-module.has-picks {
  border-color: color-mix(in srgb, var(--orange) 40%, var(--v2-border));
}
.v2-pf-module-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px 18px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  transition: background 160ms var(--ease-out);
}
.v2-pf-module-head::-webkit-details-marker { display: none; }
.v2-pf-module-head:hover {
  background: color-mix(in srgb, var(--orange) 5%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-pf-module-head:hover { background: rgba(255, 88, 0, 0.05); }
}
.v2-pf-module-name {
  color: var(--v2-text);
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.02em;
}
.v2-pf-module-tag {
  color: var(--v2-text-2);
  font-size: 13.5px;
  grid-column: 2;
  margin-top: 2px;
  line-height: 1.4;
}
.v2-pf-module-meta {
  grid-row: 1 / 3;
  grid-column: 3;
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.v2-pf-module-count {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--orange);
  font-weight: 700;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-pf-module-count { background: rgba(255, 88, 0, 0.14); }
}
.v2-pf-module-caret {
  grid-row: 1 / 3; grid-column: 4;
  color: var(--v2-text-3);
  transition: transform 220ms var(--ease-out);
}
.v2-pf-module[open] .v2-pf-module-caret { transform: rotate(180deg); }
.v2-pf-module-body {
  border-top: 1px solid var(--v2-border);
  padding: 16px 20px 20px;
}
.v2-pf-module-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}

/* ---- Categories within a module ----------------------------------------- */
.v2-pf-cat { margin-bottom: 22px; }
.v2-pf-cat:last-child { margin-bottom: 0; }
.v2-pf-cat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--v2-border);
}
.v2-pf-cat-head h4 {
  color: var(--v2-text);
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.v2-pf-cat-count {
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* Feature rows in 2 columns inside each category (1 column on mobile). The
   category header still spans full-width via `grid-column: 1 / -1`. */
.v2-pf-cat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 28px;
  row-gap: 0;
}
.v2-pf-cat-head { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .v2-pf-cat { grid-template-columns: 1fr; }
}

/* ---- Per-feature row checkboxes ----------------------------------------- */
.v2-pf-row {
  display: grid;
  grid-template-columns: 22px 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 9px 6px 9px 0;
  cursor: pointer;
  border-bottom: 1px dashed color-mix(in srgb, var(--v2-border) 70%, transparent);
  transition: padding-left 160ms var(--ease-out);
}
.v2-pf-row:last-child { border-bottom: none; }
.v2-pf-row:hover { padding-left: 6px; }
.v2-pf-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.v2-pf-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 5px;
  border: 1.5px solid var(--v2-border-strong);
  color: transparent;
  font-size: 12px; font-weight: 800;
  transition: all 160ms var(--ease-out);
  flex-shrink: 0;
}
.v2-pf-row input:checked ~ .v2-pf-tick,
.v2-pf-row input:checked + .v2-pf-tick {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFF;
}
.v2-pf-row input:focus-visible + .v2-pf-tick {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.v2-pf-name {
  color: var(--v2-text);
  font-size: 14px;
  line-height: 1.45;
}

/* In the 2-col grid each row still has its own bottom border. Strip the
   bottom border on the last row of each column so each category ends clean. */
.v2-pf-cat .v2-pf-row:last-child,
.v2-pf-cat .v2-pf-row:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

/* ---- Demo request modal ------------------------------------------------- */
.v2-pf-modal {
  position: fixed; inset: 0;
  z-index: 1100;
  background: rgba(13, 14, 17, 0.85);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 16px 40px;
  overflow-y: auto;
}
:root[data-theme="light"] .v2-pf-modal { background: rgba(255, 251, 244, 0.85); }
.v2-pf-modal[hidden] { display: none; }
.v2-pf-modal-panel {
  position: relative;
  width: min(720px, 100%);
  background: var(--v2-card);
  border: 1px solid var(--v2-border-strong);
  border-radius: 14px;
  border-left: 3px solid var(--orange);
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.55);
  padding: 32px 32px 28px;
  animation: v2-pf-modal-in 240ms var(--ease-out);
}
@keyframes v2-pf-modal-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.v2-pf-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--v2-border-strong);
  border-radius: 50%;
  color: var(--v2-text-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 180ms var(--ease-out);
}
.v2-pf-modal-close:hover { border-color: var(--orange); color: var(--orange); transform: rotate(90deg); }
.v2-pf-modal-head { margin-bottom: 22px; }
.v2-pf-modal-head h3 {
  color: var(--v2-text);
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em;
  margin: 10px 0 8px;
}
.v2-pf-modal-sub {
  color: var(--v2-text-2);
  font-size: 14px; line-height: 1.55;
  margin: 0;
}
.v2-pf-modal-sub strong {
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
}
.v2-pf-modal .v2-form {
  max-width: none; margin: 0; padding: 0;
  background: none; border: none;
}
@media (max-width: 720px) {
  .v2-pf-modal { padding: 30px 12px; }
  .v2-pf-modal-panel { padding: 26px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-pf-modal-panel { animation: none; }
  .v2-pf-mod-link, .v2-pf-module-caret, .v2-pf-row { transition: none !important; }
}

/* =============================================================================
   ABOUT — Vision & Mission paired cards
   ============================================================================= */
.v2-vm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 30px;
}
.v2-vm-card {
  position: relative;
  padding: 32px 34px 30px;
  background:
    linear-gradient(135deg, var(--v2-card) 0%,
      color-mix(in srgb, var(--v2-card) 92%, var(--orange) 8%) 100%);
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 240ms var(--ease-out),
              border-color 240ms var(--ease-out),
              box-shadow 240ms var(--ease-out);
}
.v2-vm-card::before {
  content: ''; position: absolute; left: 0; top: 32px; bottom: 32px;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), var(--deep-orange));
  border-radius: 0 3px 3px 0;
  transition: top 240ms var(--ease-out), bottom 240ms var(--ease-out);
}
.v2-vm-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--orange) 50%, var(--v2-border));
  box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--orange) 50%, transparent);
}
.v2-vm-card:hover::before { top: 16px; bottom: 16px; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-vm-card { background: linear-gradient(135deg, #1A1C20 0%, rgba(255,88,0,0.04) 100%); }
}
.v2-vm-tag {
  display: inline-block;
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  padding-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 60%, transparent);
  margin-bottom: 18px;
}
.v2-vm-title {
  color: var(--v2-text);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0 0 14px;
}
.v2-vm-body {
  color: var(--v2-text-2);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 18px;
}
.v2-vm-points {
  list-style: none;
  padding: 0; margin: 0;
  border-top: 1px solid var(--v2-border);
  padding-top: 14px;
}
.v2-vm-points li {
  display: flex; align-items: baseline; gap: 10px;
  color: var(--v2-text-2);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 4px 0;
}
.v2-vm-points strong { color: var(--orange); font-weight: 700; }
.v2-vm-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  margin-top: 7px;
}
.v2-vm-tagline {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px dashed color-mix(in srgb, var(--orange) 35%, var(--v2-border));
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 900px) { .v2-vm-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   ABOUT — Six Design Principles grid
   ============================================================================= */
.v2-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.v2-principle {
  position: relative;
  padding: 24px 26px 22px 30px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  transition: transform 220ms var(--ease-out),
              border-color 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out);
}
.v2-principle::before {
  content: ''; position: absolute; left: 0; top: 22px; bottom: 22px;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), var(--deep-orange));
  border-radius: 0 3px 3px 0;
  opacity: 0.7;
  transition: opacity 220ms var(--ease-out), top 220ms var(--ease-out), bottom 220ms var(--ease-out);
}
.v2-principle:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--orange) 45%, var(--v2-border));
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--orange) 45%, transparent);
}
.v2-principle:hover::before { opacity: 1; top: 8px; bottom: 8px; }
.v2-principle-num {
  display: inline-block;
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  margin-bottom: 10px;
}
.v2-principle h3 {
  color: var(--v2-text);
  font-size: 17px; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.v2-principle p {
  color: var(--v2-text-2);
  font-size: 14px; line-height: 1.55;
  margin: 0;
}
@media (max-width: 960px) { .v2-principles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .v2-principles-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   ABOUT — Leadership cards
   ============================================================================= */
.v2-leader {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 22px;
  padding: 24px 26px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  transition: transform 220ms var(--ease-out),
              border-color 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out);
}
.v2-leader:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--orange) 45%, var(--v2-border));
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--orange) 45%, transparent);
}
/* CEO row — one-column "grid" so its track width is computed by the SAME
   grid math as the 2-column grid below. Both share identical gap and column
   sizing logic, so the outer edges of every card align pixel-perfect. */
.v2-leader-grid-feature {
  grid-template-columns: 1fr !important;
  margin-top: 30px;
  margin-bottom: 16px;       /* matches the grid row gap so visual rhythm reads as one block */
}
.v2-leader-feature {
  padding: 24px 26px;
  box-sizing: border-box;
  background:
    linear-gradient(135deg, var(--v2-card) 0%,
      color-mix(in srgb, var(--v2-card) 90%, var(--orange) 10%) 100%);
  border-color: color-mix(in srgb, var(--orange) 45%, var(--v2-border));
}
.v2-leader-feature .v2-leader-avatar { width: 72px; height: 72px; font-size: 22px; }
.v2-leader-feature .v2-leader-body h3 { font-size: 22px; }

.v2-leader, .v2-leader-grid { box-sizing: border-box; width: 100%; }
.v2-leader-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--deep-orange));
  color: #FFF;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.v2-leader-avatar-alt {
  background: linear-gradient(135deg, #D4A017, #B98C0C);
  color: #0B1A33;
}
.v2-leader-body h3 {
  color: var(--v2-text);
  font-size: 18px; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.v2-leader-role {
  display: block;
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.v2-leader-body p {
  color: var(--v2-text-2);
  font-size: 14px; line-height: 1.6;
  margin: 0 0 12px;
}
.v2-leader-link {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
  transition: border-color 180ms var(--ease-out);
}
.v2-leader-link:hover { border-bottom-color: var(--orange); }
.v2-leader-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.v2-leader-foot {
  margin-top: 28px;
  display: flex;
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .v2-leader-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .v2-leader { grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 20px; }
  .v2-leader-avatar { width: 52px; height: 52px; font-size: 16px; }
}

/* =============================================================================
   FORMS — demo.html, contact.html
   ============================================================================= */
.v2-form {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 32px 32px 28px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  border-left: 3px solid var(--orange);
}
.v2-form-honey { position: absolute; left: -9999px; }
.v2-form-row { display: flex; gap: 18px; margin-bottom: 18px; }
.v2-form-row-two > * { flex: 1; min-width: 0; }
.v2-form-field { display: block; margin-bottom: 18px; }
.v2-form-label {
  display: block;
  color: var(--v2-text-2);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.v2-form-req { color: var(--orange); }
.v2-form-field input,
.v2-form-field select,
.v2-form-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--v2-bg) 30%, var(--v2-card));
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  color: var(--v2-text);
  font-family: inherit; font-size: 14.5px; line-height: 1.5;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
  outline: none;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-form-field input,
  .v2-form-field select,
  .v2-form-field textarea { background: rgba(13, 14, 17, 0.3); }
}
.v2-form-field input::placeholder,
.v2-form-field textarea::placeholder { color: var(--v2-text-3); }
.v2-form-field input:focus,
.v2-form-field select:focus,
.v2-form-field textarea:focus {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 4%, var(--v2-card));
}
.v2-form-field textarea { resize: vertical; min-height: 96px; }
.v2-form-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23BCB6A7' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.v2-form-actions {
  display: flex; align-items: center; gap: 14px 22px;
  margin-top: 22px; flex-wrap: wrap;
}
.v2-form-hint {
  color: var(--v2-text-3);
  font-size: 12.5px; line-height: 1.5;
  flex: 1; min-width: 220px;
}
.v2-form-status,
.v2-form-error {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px; line-height: 1.55;
}
.v2-form-status {
  background: color-mix(in srgb, #1FA66B 18%, var(--v2-card));
  border: 1px solid #1FA66B;
  color: var(--v2-text);
}
.v2-form-status-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #1FA66B; color: #FFF;
  font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.v2-form-error {
  background: color-mix(in srgb, #D94800 18%, var(--v2-card));
  border: 1px solid #D94800;
  color: var(--v2-text);
}
.v2-form-error a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
}
@media (max-width: 720px) {
  .v2-form { padding: 24px 22px 22px; }
  .v2-form-row { flex-direction: column; gap: 0; }
}

/* =============================================================================
   SITE-WIDE SEARCH — header button + overlay
   ============================================================================= */
.v2-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid var(--v2-border-strong);
  border-radius: 999px;
  color: var(--v2-text-2);
  cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.v2-search-btn:hover { border-color: var(--orange); color: var(--orange); }

.v2-search-overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(13, 14, 17, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease-out), visibility 0s linear 220ms;
}
.v2-search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms var(--ease-out), visibility 0s;
}
:root[data-theme="light"] .v2-search-overlay { background: rgba(255, 251, 244, 0.85); }

.v2-search-panel {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  margin: clamp(60px, 10vh, 120px) auto 0;
  background: var(--v2-card);
  border: 1px solid var(--v2-border-strong);
  border-radius: 14px;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.6);
  overflow: hidden;
  transform: translateY(-12px) scale(0.98);
  transition: transform 240ms var(--ease-out);
}
.v2-search-overlay.is-open .v2-search-panel { transform: translateY(0) scale(1); }
.v2-search-input-wrap {
  position: relative;
  border-bottom: 1px solid var(--v2-border);
}
.v2-search-input-wrap svg {
  position: absolute; left: 22px; top: 50%;
  transform: translateY(-50%);
  color: var(--orange);
}
.v2-search-input-wrap input {
  width: 100%;
  padding: 22px 56px 22px 56px;
  background: transparent;
  border: none;
  color: var(--v2-text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  outline: none;
}
.v2-search-input-wrap input::placeholder { color: var(--v2-text-3); }
.v2-search-input-wrap kbd {
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  background: var(--v2-bg);
  border: 1px solid var(--v2-border-strong);
  border-radius: 5px;
  color: var(--v2-text-3);
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 3px 7px;
}
.v2-search-results {
  max-height: 56vh;
  overflow-y: auto;
  padding: 6px;
}
.v2-search-results::-webkit-scrollbar { width: 8px; }
.v2-search-results::-webkit-scrollbar-thumb {
  background: var(--v2-border-strong);
  border-radius: 4px;
}
.v2-search-result {
  display: block;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--v2-text);
  transition: background 140ms var(--ease-out);
  position: relative;
}
.v2-search-result.is-active,
.v2-search-result:hover {
  background: color-mix(in srgb, var(--orange) 12%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-search-result.is-active,
  .v2-search-result:hover { background: rgba(255, 88, 0, 0.12); }
}
.v2-search-result-cat {
  display: inline-block;
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.v2-search-result-title {
  display: block;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--v2-text);
  line-height: 1.35;
}
.v2-search-result-desc {
  display: block;
  margin-top: 3px;
  color: var(--v2-text-3);
  font-size: 12.5px;
  line-height: 1.5;
}
.v2-search-result-arrow {
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  color: var(--orange);
  opacity: 0;
  transition: opacity 140ms var(--ease-out);
}
.v2-search-result.is-active .v2-search-result-arrow,
.v2-search-result:hover .v2-search-result-arrow { opacity: 1; }
.v2-search-empty {
  padding: 36px 22px;
  text-align: center;
  color: var(--v2-text-3);
  font-size: 14px;
}
.v2-search-footer {
  border-top: 1px solid var(--v2-border);
  padding: 10px 18px;
  display: flex; align-items: center; gap: 16px;
  color: var(--v2-text-3);
  font-size: 11.5px;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.04em;
}
.v2-search-footer kbd {
  background: var(--v2-bg);
  border: 1px solid var(--v2-border-strong);
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .v2-search-overlay, .v2-search-panel { transition: none; }
}

/* =============================================================================
   404 page
   ============================================================================= */
.v2-404 {
  min-height: 80vh;
  display: flex; align-items: center;
  padding: 80px 0;
}
.v2-404 .container { text-align: center; max-width: 640px; }
.v2-404-code {
  display: block;
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(80px, 18vw, 160px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 22px;
  opacity: 0.95;
}
.v2-404-title {
  font-size: clamp(1.85rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--v2-text);
  margin: 0 0 18px;
}
.v2-404-lede {
  color: var(--v2-text-2);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 32px;
}
.v2-404-help {
  color: var(--v2-text-3);
  font-size: 13px;
  margin: 32px 0 0;
}
.v2-404 .v2-hero-ctas { justify-content: center; }

/* =============================================================================
   STATUS PAGE
   ============================================================================= */
.v2-status-hero {
  padding: 80px 0 32px;
  border-bottom: 1px solid var(--v2-border);
}
.v2-status-headline {
  display: flex; align-items: center; gap: 18px;
  margin: 14px 0 8px;
}
.v2-status-headline h1 {
  font-size: clamp(1.85rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--v2-text);
  margin: 0;
}
.v2-status-meta {
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0;
}
.v2-status-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.v2-status-dot-ok {
  background: #1FA66B;
  box-shadow: 0 0 0 0 rgba(31, 166, 107, 0.6);
  animation: v2-status-pulse 2.2s ease-out infinite;
}
.v2-status-dot-deg { background: #D4A017; }
.v2-status-dot-out { background: #C73B1F; }
@keyframes v2-status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(31, 166, 107, 0.55); }
  70% { box-shadow: 0 0 0 11px rgba(31, 166, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 166, 107, 0); }
}
.v2-status-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.v2-status-kpi {
  padding: 22px 22px 18px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  border-left: 3px solid var(--orange);
}
.v2-status-kpi-label {
  display: block;
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
.v2-status-kpi-val {
  display: block;
  font-size: 30px; font-weight: 800; letter-spacing: -0.025em;
  color: var(--v2-text);
  line-height: 1;
  margin-bottom: 6px;
}
.v2-status-kpi-val small { font-size: 16px; font-weight: 600; opacity: 0.6; margin-left: 2px; }
.v2-status-kpi-trend {
  display: block;
  color: var(--v2-text-3);
  font-size: 12px;
}
.v2-status-arrow { font-size: 10px; }
.v2-status-arrow.up { color: #1FA66B; }
.v2-status-arrow.down { color: #1FA66B; } /* faster latency = green */
@media (max-width: 960px) { .v2-status-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .v2-status-kpis { grid-template-columns: 1fr; } }

.v2-status-board {
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 30px;
}
.v2-status-group {
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  overflow: hidden;
}
.v2-status-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--v2-border);
  background: color-mix(in srgb, var(--v2-bg) 30%, var(--v2-card));
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-status-group-head { background: rgba(13, 14, 17, 0.3); }
}
.v2-status-group-head h3 {
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--v2-text);
  margin: 0;
}
.v2-status-pill {
  display: inline-block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.v2-status-pill-ok {
  background: rgba(31, 166, 107, 0.15);
  color: #1FA66B;
}
.v2-status-row {
  border-bottom: 1px solid var(--v2-border);
}
.v2-status-row:last-child { border-bottom: none; }
.v2-status-row summary {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
  transition: background 140ms var(--ease-out);
}
.v2-status-row summary::-webkit-details-marker { display: none; }
.v2-status-row summary:hover {
  background: color-mix(in srgb, var(--orange) 5%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-status-row summary:hover { background: rgba(255, 88, 0, 0.05); }
}
.v2-status-row-name {
  color: var(--v2-text);
  font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.01em;
}
.v2-status-row-meta {
  color: var(--v2-text-3);
  font-size: 12.5px;
}
.v2-status-mini {
  display: inline-block;
  color: var(--v2-text-2);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.v2-status-bars {
  display: inline-flex; gap: 2px;
  height: 22px;
  align-items: end;
}
.v2-status-bars .v2-bar {
  width: 3px;
  height: 100%;
  background: #1FA66B;
  border-radius: 1px;
  opacity: 0.55;
  transition: opacity 140ms var(--ease-out);
}
.v2-status-bars .v2-bar:nth-child(3n)  { height: 78%; }
.v2-status-bars .v2-bar:nth-child(5n)  { height: 86%; }
.v2-status-bars .v2-bar:nth-child(7n)  { height: 92%; }
.v2-status-bars .v2-bar:nth-child(11n) { height: 70%; }
.v2-status-row:hover .v2-status-bars .v2-bar { opacity: 1; }
.v2-status-row-detail {
  padding: 0 20px 16px 58px;
  color: var(--v2-text-3);
  font-size: 13px;
  line-height: 1.55;
}
.v2-status-row-detail code {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  color: var(--orange);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-status-row-detail code { background: rgba(255, 88, 0, 0.1); }
}
@media (max-width: 720px) {
  .v2-status-row summary { grid-template-columns: 18px 1fr; row-gap: 6px; }
  .v2-status-bars { display: none; }
  .v2-status-row-meta { grid-column: 2; }
}

.v2-status-leg {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 8px;
  font-size: 12.5px;
}
.v2-status-leg::before {
  content: ''; display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.v2-status-leg-ok::before  { background: #1FA66B; }
.v2-status-leg-deg::before { background: #D4A017; }
.v2-status-leg-out::before { background: #C73B1F; }

.v2-status-incidents {
  list-style: none;
  padding: 0; margin: 28px 0 0;
  display: flex; flex-direction: column; gap: 14px;
}
.v2-status-incident {
  padding: 20px 22px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-left: 3px solid #1FA66B;
  border-radius: 10px;
}
.v2-status-incident-date {
  display: block;
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 8px;
}
.v2-status-incident h4 {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--v2-text);
  margin: 0 0 8px;
}
.v2-status-incident p {
  color: var(--v2-text-2);
  font-size: 14px; line-height: 1.55;
  margin: 0;
}

/* =============================================================================
   DEVELOPERS — code blocks
   ============================================================================= */
.v2-code-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 30px;
}
@media (max-width: 960px) { .v2-code-grid { grid-template-columns: 1fr; } }

.v2-code-block {
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.v2-code-block::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), var(--deep-orange));
}

.v2-code-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--v2-border);
  background: color-mix(in srgb, var(--v2-bg) 40%, var(--v2-card));
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-code-head { background: rgba(13, 14, 17, 0.4); }
}
.v2-code-lang {
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.v2-code-tag {
  color: var(--v2-text-3);
  font-size: 12px;
}
.v2-code {
  margin: 0;
  padding: 18px 22px 20px;
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
  font-size: 13px; line-height: 1.65;
  color: var(--v2-text);
  background: transparent;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
}
.v2-code code { font-family: inherit; }
.v2-code-cmt { color: var(--v2-text-3); font-style: italic; }
.v2-code-cmd { color: var(--orange); font-weight: 700; }
.v2-code-str { color: #C9A878; }     /* sand — readable in both themes */
.v2-code-kw  { color: var(--orange); font-weight: 600; }

:root[data-theme="light"] .v2-code-str { color: #946D2E; }
:root[data-theme="light"] .v2-code-cmt { color: #8C8275; }

/* Inline <code> inside paragraphs */
.v2-prod-outcome-body code,
.v2-prod-anatomy-step p code,
.v2-article-body p code {
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 0.92em;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--orange);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-prod-outcome-body code,
  .v2-prod-anatomy-step p code,
  .v2-article-body p code { background: rgba(255, 88, 0, 0.12); }
}

/* =============================================================================
   INSIGHTS — listing card category + article page typography
   ============================================================================= */
.v2-insight-cat {
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 14px 0 10px;
  font-weight: 600;
}
.v2-prod-mod:hover .v2-insight-cat { color: var(--orange); }

.v2-article-hero { padding-top: 80px; padding-bottom: 24px; }
.v2-article-title {
  font-size: clamp(1.85rem, 4vw, 2.6rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 22px !important;
}
.v2-article-meta {
  color: var(--v2-text-3);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding-top: 18px;
  border-top: 1px solid var(--v2-border);
  margin: 0;
}
.v2-article-body { padding-top: 36px; }
.v2-article-container,
.v2-article-body > .container {
  max-width: 960px !important;
}
/* Slightly more relaxed line length at the wider container: ~78–82 chars,
   still comfortable, less whitespace on either side */
.v2-article-body p {
  color: var(--v2-text);
  font-size: 16.5px;
  line-height: 1.7;
  margin: 0 0 22px;
}
.v2-article-body .v2-article-h2 {
  color: var(--v2-text);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.3;
  margin: 44px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
}
.v2-article-body .v2-article-h3 {
  color: var(--v2-text);
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  margin: 32px 0 14px;
}
.v2-article-body .v2-article-quote {
  border-left: 3px solid var(--orange);
  padding: 6px 0 6px 22px;
  margin: 28px 0;
  color: var(--v2-text);
  font-style: italic;
  font-size: 17px; line-height: 1.7;
}
.v2-article-body .v2-article-cta {
  margin: 36px 0 0;
  padding: 22px 24px;
  background:
    linear-gradient(135deg, var(--v2-card) 0%,
      color-mix(in srgb, var(--v2-card) 88%, var(--orange) 12%) 100%);
  border: 1px solid color-mix(in srgb, var(--orange) 35%, var(--v2-border));
  border-radius: 10px;
  color: var(--v2-text);
  font-size: 15px;
  line-height: 1.6;
}
.v2-article-body ul,
.v2-article-body ol {
  color: var(--v2-text);
  font-size: 16px; line-height: 1.7;
  padding-left: 22px;
  margin: 0 0 22px;
}
.v2-article-body li { margin-bottom: 8px; }
.v2-article-body strong { color: var(--v2-text); font-weight: 700; }
.v2-article-body em { color: var(--v2-text); }

/* ----- Stack builder responsive ------------------------------------------- */
@media (max-width: 720px) {
  .v2-pick-card { padding: 12px 14px; gap: 12px; }
  .v2-pick-code { width: 38px; height: 38px; }
  .v2-stack-summary { padding: 12px 14px; }
  .v2-stack-section { padding: 4px 14px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-pick-card, .v2-pick-tick, .v2-stack-feature, .v2-stack-feature-tick {
    transition: none !important;
  }
  .v2-pick:hover .v2-pick-card { transform: none; }
}

/* ----- FAQ (semantic <details>) ------------------------------------------- */
.v2-faq {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 28px;
  max-width: 920px;
}
.v2-faq-item {
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  padding: 0 20px;
  transition: border-color 240ms var(--ease-out);
}
.v2-faq-item[open] { border-color: color-mix(in srgb, var(--orange) 40%, var(--v2-border)); }
.v2-faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 18px 32px 18px 0;
  color: var(--v2-text);
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
  transition: color 200ms var(--ease-out);
}
.v2-faq-item summary::-webkit-details-marker { display: none; }
.v2-faq-item summary::after {
  content: '+';
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--orange) 60%, transparent);
  color: var(--orange);
  font-size: 16px; font-weight: 700;
  transition: transform 240ms var(--ease-out),
              border-color 240ms var(--ease-out);
}
.v2-faq-item[open] summary::after {
  content: '\2212';            /* en-dash minus */
  transform: translateY(-50%) rotate(180deg);
  background: var(--orange); color: #FFF;
  border-color: var(--orange);
}
.v2-faq-item summary:hover { color: var(--orange); }
.v2-faq-item p {
  color: var(--v2-text-2);
  font-size: 14.5px; line-height: 1.65;
  margin: 0 0 18px;
  padding-right: 12px;
}
.v2-faq-item p a { color: var(--orange); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); }
.v2-faq-item p a:hover { border-bottom-color: var(--orange); }

/* ----- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .v2-price-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .v2-price-tier-featured { transform: none; }
  .v2-price-tier-featured:hover { transform: translateY(-3px); }
}
@media (max-width: 720px) {
  .v2-price-tier { padding: 26px 22px 24px; }
  .v2-price-tier-amt { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-price-tier, .v2-price-tier::before, .v2-faq-item, .v2-faq-item summary::after {
    transition: none !important;
  }
  .v2-price-tier:hover, .v2-price-tier-featured:hover { transform: none; }
}

/* ----- CTA strip ----------------------------------------------------------- */
.v2-prod-cta {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 28px;
  padding: 30px 36px;
  background:
    linear-gradient(135deg,
      var(--v2-card) 0%,
      color-mix(in srgb, var(--v2-card) 88%, var(--orange) 12%) 100%);
  border: 1px solid color-mix(in srgb, var(--orange) 35%, var(--v2-border));
  border-radius: 10px;
}
.v2-prod-cta-copy h2 {
  font-size: 22px; font-weight: 800; letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--v2-text);
}
.v2-prod-cta-copy p {
  color: var(--v2-text-2);
  font-size: 14px; line-height: 1.55;
  margin: 0;
}
.v2-prod-cta-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* ----- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .v2-prod-mod-grid { grid-template-columns: 1fr; }
  .v2-prod-cross-grid { grid-template-columns: 1fr; }
  .v2-prod-anatomy-grid { grid-template-columns: 1fr; gap: 20px; }
  .v2-prod-outcomes { grid-template-columns: 1fr; }
  .v2-prod-cat-grid { grid-template-columns: 1fr; }
  .v2-prod-cta {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 26px 24px;
  }
}
@media (max-width: 720px) {
  .v2-prod-hero { padding-top: 56px; padding-bottom: 40px; }
  .v2-prod-anatomy { padding: 26px 22px 22px; }
  .v2-prod-mod { padding: 26px 24px 22px 28px; min-height: 180px; }
  .v2-prod-mod-name { font-size: 19px; }
  .v2-prod-outcome { padding: 22px 22px 20px 26px; }
  .v2-prod-cat { padding: 20px 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-prod-mod, .v2-prod-mod::before, .v2-prod-mod::after,
  .v2-prod-mod-arrow, .v2-prod-mod-num,
  .v2-prod-outcome, .v2-prod-outcome::before,
  .v2-prod-cat-list li, .v2-prod-cat-list li::before {
    transition: none !important;
  }
  .v2-prod-mod:hover, .v2-prod-outcome:hover { transform: none; }
}

/* ============================================================================
   PRODUCT DISCOVERY (segment + market picker → filtered feature list)
   used by product.html
   ============================================================================ */

/* Sticky pill picker bar */
.v2-pd-bar-spacer { height: 0; }
.v2-pd-bar {
  position: sticky;
  top: 64px;
  z-index: 20;
  padding: 20px 0 18px;
  background: color-mix(in srgb, var(--v2-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--v2-border);
  box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.55);
}
:root[data-theme="light"] .v2-pd-bar {
  background: color-mix(in srgb, var(--v2-bg) 92%, transparent);
}
.v2-pd-bar .container { max-width: 1280px; }
.v2-pd-bar-row {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 6px 0;
}
.v2-pd-bar-label {
  flex: 0 0 110px;
  padding-top: 11px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--v2-text-2);
  text-transform: uppercase;
}
.v2-pd-pills {
  display: flex; flex-wrap: wrap; gap: 9px;
  flex: 1; min-width: 0;
}
.v2-pd-pill {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 999px;
  color: var(--v2-text-2);
  font-family: inherit;
  font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.v2-pd-pill:hover {
  border-color: color-mix(in srgb, var(--orange) 40%, var(--v2-border));
  color: var(--v2-text);
}
.v2-pd-pill.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFF;
}
.v2-pd-bar-meta {
  align-items: center;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px dashed var(--v2-border);
}
.v2-pd-bar-count {
  flex: 1;
  font-size: 13px; font-weight: 600;
  color: var(--v2-text-2);
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.v2-pd-clear {
  background: transparent;
  border: 1px solid var(--v2-border);
  color: var(--v2-text-3);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px; letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.v2-pd-clear:hover { color: var(--orange); border-color: var(--orange); }
@media (max-width: 720px) {
  .v2-pd-bar { top: 56px; padding: 12px 0 10px; }
  .v2-pd-bar-row { flex-direction: column; gap: 6px; padding: 3px 0; }
  .v2-pd-bar-label { flex: 0 0 auto; padding-top: 0; }
  .v2-pd-pills { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .v2-pd-pill { flex: 0 0 auto; }
  .v2-pd-bar-meta { flex-direction: row; }
}

/* Results section */
.v2-pd-results-section { padding-top: 32px; padding-bottom: 96px; }
.v2-pd-results-section .container { max-width: 1280px; }
.v2-pd-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 64px 24px;
  color: var(--v2-text-3);
}
.v2-pd-empty svg { color: var(--v2-text-3); opacity: 0.5; margin-bottom: 14px; }
.v2-pd-empty h3 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--v2-text);
  margin: 0 0 6px;
}
.v2-pd-empty p { margin: 0; font-size: 14px; }

/* Feature card */
.v2-pd-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 880px) { .v2-pd-list { grid-template-columns: 1fr; } }

.v2-pd-card {
  position: relative;
  padding: 22px 24px 20px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-left: 3px solid var(--v2-border);
  border-radius: 6px;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.v2-pd-card:hover {
  border-color: color-mix(in srgb, var(--orange) 30%, var(--v2-border));
  border-left-color: color-mix(in srgb, var(--orange) 45%, var(--v2-border));
}
.v2-pd-card.is-ticked {
  /* Outline-style selection — orange border all around + soft glow so it
     reads as "selected" without competing with the orange-tinted USP box. */
  background: var(--v2-card);
  border-color: var(--orange);
  border-left-color: var(--orange);
  border-left-width: 3px;
  box-shadow:
    0 0 0 1px var(--orange) inset,
    0 8px 24px -14px color-mix(in srgb, var(--orange) 55%, transparent),
    0 2px 6px -2px rgba(0, 0, 0, 0.35);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-pd-card.is-ticked {
    box-shadow:
      0 0 0 1px var(--orange) inset,
      0 8px 24px -14px rgba(255, 88, 0, 0.55),
      0 2px 6px -2px rgba(0, 0, 0, 0.35);
  }
}

.v2-pd-meta {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.v2-pd-meta-cat {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-text-2);
}
.v2-pd-meta-layer {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px;
  background: color-mix(in srgb, var(--layer-color, var(--v2-text-3)) 14%, transparent);
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--layer-color, var(--v2-text-3));
}
.v2-pd-layer-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--layer-color, transparent) 25%, transparent);
}

.v2-pd-head {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px;
  cursor: pointer;
}
.v2-pd-head input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.v2-pd-tick {
  flex: 0 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin-top: 2px;
  background: transparent;
  border: 1.5px solid var(--v2-border);
  border-radius: 5px;
  color: transparent;
  font-size: 13px; font-weight: 700;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.v2-pd-head:hover .v2-pd-tick { border-color: var(--orange); }
.v2-pd-card.is-ticked .v2-pd-tick {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFF;
}
.v2-pd-name {
  flex: 1; min-width: 0;
  margin: 0;
  font-size: 17px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--v2-text);
  line-height: 1.35;
}

.v2-pd-body, .v2-pd-usp { margin-top: 12px; }
.v2-pd-body-label, .v2-pd-usp-label {
  display: inline-block;
  margin-bottom: 5px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--v2-text-2);
  text-transform: uppercase;
}
.v2-pd-usp-label { color: var(--orange); }
.v2-pd-body p, .v2-pd-usp p {
  margin: 0;
  color: var(--v2-text-2);
  font-size: 14px; line-height: 1.55;
}
.v2-pd-usp {
  padding: 12px 14px;
  background: color-mix(in srgb, var(--orange) 5%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--orange) 55%, var(--v2-border));
  border-radius: 4px;
}
.v2-pd-usp p { color: var(--v2-text); }

@media (max-width: 720px) {
  .v2-pd-card { padding: 18px 18px 16px; }
  .v2-pd-name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-pd-card, .v2-pd-pill, .v2-pd-tick, .v2-pd-clear { transition: none !important; }
}

/* ============================================================================
   FEATURED — PS25/12 home-page banner (full-width, two-column split)
   ============================================================================ */
.v2-featured-section {
  padding: 56px 0;
  border-top: 1px solid color-mix(in srgb, var(--orange) 55%, transparent);
  border-bottom: 1px solid var(--v2-border);
}

.v2-featured-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 44px 48px;
  background:
    radial-gradient(900px 360px at -10% 0%, color-mix(in srgb, var(--orange) 10%, transparent) 0%, transparent 70%),
    var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  overflow: hidden;
}
.v2-featured-banner::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg,
    var(--orange) 0%,
    color-mix(in srgb, var(--orange) 35%, transparent) 100%);
}
:root[data-theme="light"] .v2-featured-banner {
  background:
    radial-gradient(900px 360px at -10% 0%, color-mix(in srgb, var(--orange) 6%, transparent) 0%, transparent 70%),
    var(--v2-card);
}

.v2-featured-left { min-width: 0; }
.v2-featured-right { min-width: 0; }

.v2-featured-headline {
  margin: 16px 0 0;
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 600; letter-spacing: -0.02em;
  color: var(--v2-text);
  line-height: 1.1;
}

.v2-featured-lede {
  margin: 0 0 22px;
  font-size: 16px; line-height: 1.6;
  color: var(--v2-text-2);
}

.v2-featured-meta {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px dashed var(--v2-border);
  padding-top: 16px;
}
.v2-featured-meta li {
  display: flex; flex-direction: column; gap: 4px;
  padding-right: 18px;
}
.v2-featured-meta li + li {
  border-left: 1px solid var(--v2-border);
  padding-left: 18px;
}
.v2-featured-meta-val {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--v2-text);
  font-family: 'Courier New', Courier, monospace;
}
.v2-featured-meta-lbl {
  font-family: 'Courier New', Courier, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}

@media (max-width: 880px) {
  .v2-featured-banner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 26px;
  }
}
@media (max-width: 540px) {
  .v2-featured-section { padding: 40px 0; }
  .v2-featured-meta { grid-template-columns: 1fr; gap: 12px; }
  .v2-featured-meta li + li { border-left: none; padding-left: 0; border-top: 1px solid var(--v2-border); padding-top: 12px; }
  .v2-featured-meta li { padding-right: 0; }
}

/* ============================================================================
   MOBILE NAV — hamburger button + slide-in drawer
   ============================================================================ */

/* Hamburger button — hidden on desktop, shown on mobile */
.v2-nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--v2-border);
  border-radius: 999px;
  color: var(--v2-text);
  cursor: pointer;
  transition: border-color 180ms var(--ease-out),
              color 180ms var(--ease-out),
              background 180ms var(--ease-out);
}
.v2-nav-toggle:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.v2-nav-toggle .v2-nav-toggle-bars { display: inline; }
.v2-nav-toggle .v2-nav-toggle-x    { display: none; }
.v2-nav-toggle[aria-expanded="true"] .v2-nav-toggle-bars { display: none; }
.v2-nav-toggle[aria-expanded="true"] .v2-nav-toggle-x    { display: inline; }

/* Drawer head / foot — present in markup, hidden on desktop */
.v2-nav-drawer-head,
.v2-nav-drawer-foot { display: none; }

/* Backdrop layer behind the drawer */
.v2-nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 199;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
body.v2-nav-open .v2-nav-backdrop {
  display: block;
  opacity: 1;
}

@media (max-width: 880px) {
  /* Hide search, theme toggle, Book-a-demo on mobile — re-shown inside drawer.
     !important guards against any later rule (or older cached partial CSS)
     keeping these visible on small screens. */
  .v2-header-actions .v2-search-btn,
  .v2-header-actions #theme-toggle,
  .v2-header-actions > .v2-cta,
  .v2-header-actions .v2-icon-btn { display: none !important; }

  /* Show the hamburger */
  .v2-nav-toggle { display: inline-flex !important; }

  /* Brand text — keep readable but tight */
  .v2-brand-tag { display: none; }

  /* Stale .v2-nav drawer rules (now handled by the .v2-mdraw element) —
     keep only the hide rule below to avoid affecting desktop. */

  /* Drawer head — close button + brand mini */
  .v2-nav-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--v2-border);
    flex-shrink: 0;
  }
  .v2-nav-drawer-head .v2-nav-drawer-brand {
    font-weight: 800; font-size: 16px;
    color: var(--v2-text);
  }
  .v2-nav-drawer-head .v2-nav-drawer-brand .v2-brand-ai { color: var(--orange); }

  .v2-nav-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--v2-border);
    border-radius: 999px;
    color: var(--v2-text);
    cursor: pointer;
    transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
  }
  .v2-nav-close:hover { border-color: var(--orange); color: var(--orange); }

  /* Nav links — vertical stack */
  .v2-nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
    margin: 0;
    flex: 1;
  }
  .v2-nav-item {
    width: 100%;
    border-bottom: 1px solid var(--v2-border);
  }
  .v2-nav-item:last-child { border-bottom: none; }
  .v2-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
  }
  .v2-nav-link.is-active { color: var(--orange); }

  /* Sub-menus — show inline below their parent (auto-expanded) */
  .v2-nav-sub {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column;
    width: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 12px 12px;
    margin: 0;
    grid-template-columns: none;
    gap: 0;
  }
  .v2-nav-sub li { width: 100%; margin: 0; }
  .v2-nav-sub a {
    display: block !important;
    grid-template-columns: none !important;
    padding: 10px 20px !important;
    background: transparent;
  }
  .v2-nav-sub-name {
    font-size: 14px; font-weight: 500;
    color: var(--v2-text-2);
  }
  .v2-nav-sub-desc { display: none; }

  /* Caret rotation on parent items — point down (already does in drawer) */
  .v2-nav-caret { transform: rotate(0); opacity: 0.6; }

  /* Drawer foot — Book a demo CTA + utilities */
  .v2-nav-drawer-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 24px;
    border-top: 1px solid var(--v2-border);
    flex-shrink: 0;
  }
  .v2-nav-drawer-foot .v2-cta-solid {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .v2-nav-drawer-foot-utils {
    display: flex; gap: 8px;
  }
  .v2-nav-drawer-foot-utils button {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px;
    background: transparent;
    border: 1px solid var(--v2-border);
    border-radius: 999px;
    color: var(--v2-text-2);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
  }
  .v2-nav-drawer-foot-utils button:hover { border-color: var(--orange); color: var(--orange); }

  /* Prevent body scroll when drawer open */
  body.v2-nav-open { overflow: hidden; }
}

/* ============================================================================
   Side-by-side hero — text + small animated logo on the right
   used by product.html (hero) and pricing.html (#stack-builder)
   ============================================================================ */
.v2-stack-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: start;             /* mark sits near the top of the text block */
}
.v2-stack-head-text { min-width: 0; }

.v2-side-mark {
  position: relative;
  width: 130px; height: 130px;
  opacity: 0.95;
  flex-shrink: 0;
  justify-self: end;
  margin-top: 8px;                /* small offset — aligns roughly with the headline */
}
.v2-side-mark img {
  width: 100%; height: 100%; object-fit: contain;
  position: relative; z-index: 1;
}
.v2-side-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 150px; height: 150px;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 2;
  animation: v2-hero-orbit-spin 14s linear infinite;
}
.v2-side-orbit::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateX(-50%);
  z-index: 2;
  box-shadow:
    0 0 10px 2px var(--orange),
    0 0 24px 5px color-mix(in srgb, var(--orange) 55%, transparent),
    0 0 48px 10px color-mix(in srgb, var(--orange) 22%, transparent);
}
.v2-side-orbit::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(
    from 0deg,
    rgba(255, 88, 0, 0.85) 0deg,
    rgba(255, 88, 0, 0.45) 12deg,
    rgba(255, 88, 0, 0)    32deg,
    rgba(255, 88, 0, 0)    268deg,
    rgba(255, 88, 0, 0.45) 348deg,
    rgba(255, 88, 0, 0.85) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0%, transparent 47.5%, black 49%, black 51%, transparent 53%, transparent 100%);
          mask: radial-gradient(circle, transparent 0%, transparent 47.5%, black 49%, black 51%, transparent 53%, transparent 100%);
  filter: blur(0.9px);
}
@media (prefers-reduced-motion: reduce) {
  .v2-side-orbit { animation: none; }
}
@media (max-width: 880px) {
  .v2-stack-head { grid-template-columns: 1fr; gap: 0; }
  .v2-side-mark { display: none; }
}

/* Tighten the BUILD YOUR STACK section padding on pricing.html so the gap
   between hero copy and the picker bar doesn't feel cavernous. */
.v2-stack-builder-section { padding: 40px 0 28px !important; }

/* Override the default v2-stack-head layout for BUILD YOUR STACK only:
   cap the text column width and pull the mark close so they sit together,
   leaving the right side as breathing whitespace. */
.v2-stack-builder-section .v2-stack-head {
  grid-template-columns: minmax(0, 700px) auto;
  justify-content: start;
  gap: 60px;
}
.v2-stack-builder-section .v2-side-mark {
  justify-self: start;
}

/* ============================================================================
   PRICING — "What you pay for" : text left, anatomy steps stacked on right
   ============================================================================ */
.v2-pay-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: start;
}
.v2-pay-text { min-width: 0; }
.v2-pay-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 540px;             /* keep cards visually tight to the headline */
}
.v2-pay-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 16px 18px 16px 18px;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.v2-pay-item:hover {
  border-color: color-mix(in srgb, var(--orange) 35%, var(--v2-border));
  transform: translateX(2px);
}
.v2-pay-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
  border-radius: 6px;
  color: var(--orange);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .v2-pay-num {
    background: rgba(255, 88, 0, 0.10);
    border-color: rgba(255, 88, 0, 0.32);
  }
}
.v2-pay-body { min-width: 0; }
.v2-pay-title {
  margin: 4px 0 6px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--v2-text);
}
.v2-pay-body p {
  margin: 0;
  font-size: 14px; line-height: 1.55;
  color: var(--v2-text-2);
}
@media (max-width: 880px) {
  .v2-pay-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 520px) {
  .v2-pay-item { grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 18px; }
  .v2-pay-num { width: 40px; height: 40px; font-size: 13px; }
  .v2-pay-title { font-size: 15px; }
}

/* ============================================================================
   MOBILE DRAWER — standalone .v2-mdraw element (no shared cascade with .v2-nav)
   ============================================================================ */
.v2-mdraw {
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 220ms var(--ease-out), visibility 0s linear 220ms;
}
.v2-mdraw.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: opacity 220ms var(--ease-out), visibility 0s linear 0s;
}
/* Dim backdrop fills the viewport behind the panel */
.v2-mdraw::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
/* The drawer panel itself */
.v2-mdraw-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 88%; max-width: 360px;
  background: #0D0E11;                                  /* hard-coded so a theme var
                                                          override can't make it transparent */
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: -16px 0 40px -10px rgba(0, 0, 0, 0.6);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
:root[data-theme="light"] .v2-mdraw-panel {
  background: #FFFBF4;
  border-left-color: rgba(0, 0, 0, 0.10);
}
.v2-mdraw.is-open .v2-mdraw-panel { transform: translateX(0); }

.v2-mdraw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
:root[data-theme="light"] .v2-mdraw-head { border-bottom-color: rgba(0, 0, 0, 0.08); }

.v2-mdraw-brand {
  font-weight: 800; font-size: 16px;
  color: var(--v2-text);
}
.v2-mdraw-brand .v2-brand-ai { color: var(--orange); }

.v2-mdraw-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: var(--v2-text);
  cursor: pointer;
  flex-shrink: 0;
}
:root[data-theme="light"] .v2-mdraw-close { border-color: rgba(0, 0, 0, 0.15); }
.v2-mdraw-close:hover { border-color: var(--orange); color: var(--orange); }

.v2-mdraw-nav {
  display: flex; flex-direction: column;
  padding: 8px 0;
  flex: 1;
}
.v2-mdraw-link {
  display: block;
  padding: 14px 20px;
  font-size: 16px; font-weight: 600;
  color: var(--v2-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
:root[data-theme="light"] .v2-mdraw-link { border-bottom-color: rgba(0, 0, 0, 0.06); }
.v2-mdraw-link:hover { color: var(--orange); }
.v2-mdraw-sub {
  padding-left: 36px;
  font-size: 14px; font-weight: 500;
  color: var(--v2-text-2);
}

.v2-mdraw-foot {
  padding: 16px 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
:root[data-theme="light"] .v2-mdraw-foot { border-top-color: rgba(0, 0, 0, 0.08); }

.v2-mdraw-cta {
  width: 100%;
  text-align: center;
  justify-content: center;
  display: inline-flex;
}

/* Lock body scroll when drawer is open */
body.v2-mdraw-open { overflow: hidden; }

/* On mobile, hide the desktop nav entirely so the drawer is the only nav. */
@media (max-width: 880px) {
  .v2-nav { display: none !important; }
}
/* On desktop, hide the mobile drawer entirely AND guarantee the desktop nav
   shows as a flex child of v2-header-inner (overrides any leftover override). */
@media (min-width: 881px) {
  .v2-mdraw { display: none !important; }
  .v2-nav { display: block !important; flex: 1 !important; }
  .v2-nav-links { display: flex !important; gap: 28px; justify-content: center; }
}