/* =============================================================
   Stringit 3.0 : V2 visual system
   Type-led, dark, restrained. Loaded after styles.css and scoped
   to body.v2 so we can revert by removing the class.
   ============================================================= */

/* --- TOKENS ------------------------------------------------- */
body.v2 {
  --bg:           #0a0a0a;
  --bg-elev:      #101010;
  --ink:          #f3f3f3;
  --ink-mute:     rgba(255,255,255,0.62);
  --ink-faint:    rgba(255,255,255,0.42);
  --ink-trace:    rgba(255,255,255,0.18);
  --line:         rgba(255,255,255,0.08);
  --line-faint:   rgba(255,255,255,0.04);

  --space-section: 144px;
  --content-max:   1040px;
  --container-max: 1200px;

  background: var(--bg);
  color: var(--ink);
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.v2 .page { background: transparent; }

/* Override container for tighter content rhythm */
body.v2 .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  box-sizing: border-box;
}

/* --- TYPOGRAPHY OVERRIDES ---------------------------------- */
body.v2 h1,
body.v2 h2,
body.v2 h3,
body.v2 h4 {
  font-family: "SF UI Display", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
}

body.v2 h1 {
  font-size: 76px;
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1.04;
  color: var(--ink);
  max-width: 16ch;
}

body.v2 h2 {
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--ink);
  max-width: 22ch;
}

body.v2 h3 {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--ink);
}

body.v2 h4 {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink);
}

body.v2 p {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0;
  max-width: 60ch;
}

body.v2 .kicker {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-block;
}

body.v2 .section-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
  margin-bottom: 80px;
}

body.v2 .section-lede {
  font-size: 18px;
  color: var(--ink-mute);
  max-width: 60ch;
  margin-top: 4px;
}

/* --- BUTTONS ----------------------------------------------- */
body.v2 .btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--ink);
  color: #0a0a0a;
  border-radius: 999px;
  font-family: "SF Pro Display", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease;
}
body.v2 .btn-pill:hover {
  background: #fff;
  transform: translateY(-1px);
}

body.v2 .btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: var(--ink);
  font-family: "SF Pro Display", sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.18s ease;
}
body.v2 .btn-quiet:hover { color: var(--ink); }
body.v2 .btn-quiet .btn-arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}
body.v2 .btn-quiet:hover .btn-arrow { transform: translateX(2px); }

body.v2 .btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-mute);
  font-family: "SF Pro Display", sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.18s ease;
}
body.v2 .btn-text:hover { color: var(--ink); }

/* --- NAV --------------------------------------------------- */
body.v2 header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,10,10,0.72);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-faint);
}
body.v2 .nav {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: transparent;
}
/* Header brand mark : explicit reset of styles.css base (.logo has
   width:48px / padding:8px / background:#000 / outline:1px / border-radius:4px
   in the base file, which squeezes the wordmark into the circle). */
body.v2 .logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: transparent;
  outline: 0;
  padding: 0;
  width: auto;
  border-radius: 0;
}
body.v2 .logo .logo-container {
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}
body.v2 .logo .logo-img {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
}
body.v2 .logo .logo-img.circle2 {
  width: 23.6px;
  height: 23.2px;
  top: 1.4px;
  left: 1.4px;
  animation: v2-spin 6s linear infinite reverse;
}
@keyframes v2-spin { to { transform: rotate(360deg); } }
body.v2 .logo-word {
  font-family: "SF UI Display", sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

body.v2 .nav-links {
  display: inline-flex;
  /* Spacing now lives on each link's own padding so the hover
     background has breathing room around the text. */
  gap: 0;
}
body.v2 .nav-links a {
  font-family: "SF Pro Display", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease;
  padding: 8px 14px;
  border-radius: 8px;
}
body.v2 .nav-links a:hover {
  color: var(--ink);
  background: rgba(255,255,255,0.05);
  /* Suppress the inherited 1px inset ring (styles.css base hover) */
  box-shadow: none;
}
body.v2 .nav-links a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.25);
}
body.v2 .nav-links a::before { display: none; }

body.v2 .nav-cta { margin-left: auto; }
body.v2 .nav-cta .btn-quiet {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
body.v2 .nav-cta .btn-quiet:hover {
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.04);
}

body.v2 .nav-toggle { display: none; }

@media (max-width: 880px) {
  body.v2 .nav-links {
    position: absolute;
    top: 60px; right: 16px; left: 16px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    display: none;
    flex-direction: column;
    gap: 12px;
  }
  body.v2 .nav-links.active { display: flex; }
  body.v2 .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
  }
  body.v2 .nav-toggle span {
    display: block;
    width: 22px; height: 1.5px;
    background: var(--ink);
  }
}

/* --- HERO -------------------------------------------------- */
body.v2 .hero-v2 {
  position: relative;
  padding: 168px 0 144px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-faint);
}

/* Hero motif : animated graph background */
body.v2 .hero-motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ink);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 55%, #000 28%, transparent 82%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 55%, #000 28%, transparent 82%);
}

body.v2 .hg-root {
  transform-origin: 600px 350px;
  animation: hg-drift 80s ease-in-out infinite;
  will-change: transform;
}

/* Two layers, different opacities so traveling pulses read brighter */
body.v2 .hg-graph  { opacity: 0.22; }
body.v2 .hg-pulses { opacity: 0.85; }

body.v2 .hg-edge {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-opacity: 0.55;
  vector-effect: non-scaling-stroke;
}
body.v2 .hg-edge.pulse-1 { animation: hg-edge-pulse 11s ease-in-out infinite; }
body.v2 .hg-edge.pulse-2 { animation: hg-edge-pulse 14s ease-in-out -3s infinite; }
body.v2 .hg-edge.pulse-3 { animation: hg-edge-pulse  9s ease-in-out -5s infinite; }
body.v2 .hg-edge.pulse-4 { animation: hg-edge-pulse 13s ease-in-out -7s infinite; }

body.v2 .hg-node {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
}
body.v2 .hg-node.breathe-1 { animation: hg-node-breathe  7s ease-in-out infinite; }
body.v2 .hg-node.breathe-2 { animation: hg-node-breathe  9s ease-in-out -2s infinite; }
body.v2 .hg-node.breathe-3 { animation: hg-node-breathe 11s ease-in-out -4s infinite; }

body.v2 .hg-anchor {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  stroke-opacity: 0.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: hg-anchor-pulse 6s ease-in-out infinite;
}

/* Big-data accents : sparklines, embedding cloud, histogram. Sit in
   the margins, slightly fainter than the main typed-graph layer. */
body.v2 .hg-aux { opacity: 0.18; }

/* Sparklines (time-series view) : thin polyline trace plus a faint
   dashed baseline suggesting the chart's zero line. */
body.v2 .hg-spark {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 0.85;
}
body.v2 .hg-spark-base {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-opacity: 0.3;
  stroke-dasharray: 1 3;
}

/* Embedding scatter cluster (vector view). */
body.v2 .hg-cloud-dot {
  fill: currentColor;
  fill-opacity: 0.7;
}
body.v2 .hg-cloud-axis {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-opacity: 0.45;
  stroke-dasharray: 2 3;
}

/* Histogram strip (distribution view). */
body.v2 .hg-bar {
  fill: currentColor;
  fill-opacity: 0.55;
}
body.v2 .hg-hist-base {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-opacity: 0.35;
}

/* Type labels under anchor nodes : small, spaced caps. Render at
   higher fill-opacity so they read through the 22% graph layer. */
body.v2 .hg-type-label {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-anchor: middle;
  fill: currentColor;
  fill-opacity: 0.85;
}

/* Per-type color tints : soft hues that come through the 22%
   layer opacity as muted color, increasing variance without losing
   restraint. Each type gets a distinct hue applied to both the
   ring stroke and the label fill. */
body.v2 .hg-anchor.t-person     { stroke: #88B4FF; }   /* soft blue   */
body.v2 .hg-anchor.t-company    { stroke: #6FD4B5; }   /* soft teal   */
body.v2 .hg-anchor.t-decision   { stroke: #FFB573; }   /* soft amber  */
body.v2 .hg-anchor.t-event      { stroke: #FF96B5; }   /* soft pink   */
body.v2 .hg-type-label.t-person     { fill: #B8CFFF; }
body.v2 .hg-type-label.t-company    { fill: #A8E6D5; }
body.v2 .hg-type-label.t-decision   { fill: #FFD2A8; }
body.v2 .hg-type-label.t-event      { fill: #FFC0D5; }

@keyframes hg-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(10px, -5px) rotate(0.35deg); }
  66%      { transform: translate(-7px,  4px) rotate(-0.25deg); }
}

@keyframes hg-edge-pulse {
  0%, 100% { stroke-opacity: 0.16; }
  50%      { stroke-opacity: 0.78; }
}

@keyframes hg-node-breathe {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%      { transform: scale(1.45); opacity: 1;    }
}

@keyframes hg-anchor-pulse {
  0%, 100% { stroke-opacity: 0.22; transform: scale(1);    }
  50%      { stroke-opacity: 0.55; transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  body.v2 .hg-root,
  body.v2 .hg-edge.pulse-1,
  body.v2 .hg-edge.pulse-2,
  body.v2 .hg-edge.pulse-3,
  body.v2 .hg-edge.pulse-4,
  body.v2 .hg-node.breathe-1,
  body.v2 .hg-node.breathe-2,
  body.v2 .hg-node.breathe-3,
  body.v2 .hg-anchor {
    animation: none;
  }
  body.v2 .hg-pulses { display: none; }
}

body.v2 .hero-v2-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  max-width: 880px;
}

body.v2 .hero-v2-inner h1 {
  font-size: clamp(40px, 6vw, 76px);
  max-width: 18ch;
}

body.v2 .hero-lede {
  font-size: 19px;
  color: var(--ink-mute);
  max-width: 60ch;
  line-height: 1.55;
}

body.v2 .hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: 8px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  body.v2 .hero-v2 { padding: 112px 0 96px; }
  body.v2 .hero-lede { font-size: 17px; }
}

/* --- PILLARS V2 -------------------------------------------- */
body.v2 .pillars-v2 {
  padding: var(--space-section) 0;
}

body.v2 .pillars-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  border-top: 1px solid var(--line);
  padding-top: 56px;
}

body.v2 .pillar-v2 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 38ch;
}

body.v2 .pillar-icon {
  color: var(--ink);
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-bottom: 4px;
}

body.v2 .pillar-v2 h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

body.v2 .pillar-v2 p {
  font-size: 16px;
  color: var(--ink-mute);
}

@media (max-width: 880px) {
  body.v2 .pillars-v2 { padding: 80px 0; }
  body.v2 .pillars-grid-v2 {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* --- PRODUCT WALKTHROUGH (auto-section v2) ----------------- */
body.v2 .v2-section {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--line-faint);
}
body.v2 .v2-section .border-horizontal { display: none; }
/* --- CONNECTORS V2 (10 colored brand logos) ---------------
   Layout per breakpoint:
     desktop ≥881px : 5 cols × 2 rows
     tablet 541-880 : 2 cols × 5 rows
     phone   ≤540   : 1 col × 10 rows
   Each breakpoint owns its border math (no cascade overrides). -- */
body.v2 .connectors-v2 {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--line-faint);
}

body.v2 .connectors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.012);
}

body.v2 .connector {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.18s ease;
}
/* Desktop: 5-col grid → drop right border on every 5th cell,
   drop bottom border on the last 5 cells (2nd row). */
body.v2 .connector:nth-child(5n) { border-right: 0; }
body.v2 .connector:nth-last-child(-n+5) { border-bottom: 0; }
body.v2 .connector:hover { background: rgba(255,255,255,0.025); }

body.v2 .connector-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}
body.v2 .connector-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

body.v2 .connector-name {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
}

body.v2 .connectors-foot {
  font-size: 14px;
  color: var(--ink-faint);
  margin-top: 32px;
  max-width: none;
  text-align: left;
}

/* Cloud + model agnosticism strip : quieter than the main grid */
body.v2 .infra-strip {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line-faint);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body.v2 .infra-strip-label {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
body.v2 .infra-strip-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 44px;
}
body.v2 .infra-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body.v2 .infra-logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
body.v2 .infra-logo > span {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* Callout below the logos : concrete example of how the graph
   surfaces in LLM tooling. Slightly larger / brighter than a
   normal foot-note so it's "worth calling out." */
body.v2 .infra-strip-note {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 4px 0 0;
  max-width: 64ch;
  letter-spacing: -0.003em;
}
body.v2 .infra-strip-note strong {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 540px) {
  body.v2 .infra-strip { margin-top: 40px; padding-top: 28px; gap: 18px; }
  body.v2 .infra-strip-label { font-size: 11px; letter-spacing: 0.16em; }
  body.v2 .infra-strip-logos { gap: 18px 28px; }
  body.v2 .infra-logo img { width: 20px; height: 20px; }
  body.v2 .infra-logo > span { font-size: 13px; }
  body.v2 .infra-strip-note { font-size: 14px; }
}

@media (max-width: 880px) {
  body.v2 .connectors-v2 { padding: 80px 0; }
  body.v2 .connectors-grid { grid-template-columns: repeat(2, 1fr); }
  body.v2 .connector { padding: 26px 22px; gap: 16px; }
  /* Reset borders to base (every cell), then apply 2-col removals.
     The desktop 5-col rules above remove br/bb from specific items;
     re-enable them here so the 2-col math is the only logic that runs. */
  body.v2 .connector { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  body.v2 .connector:nth-child(5n) { border-right: 1px solid var(--line); }
  body.v2 .connector:nth-last-child(-n+5) { border-bottom: 1px solid var(--line); }
  /* 2-col: drop br on every 2nd cell, drop bb on last 2 cells. */
  body.v2 .connector:nth-child(2n) { border-right: 0; }
  body.v2 .connector:nth-last-child(-n+2) { border-bottom: 0; }
  body.v2 .connector-name { font-size: 16px; }
}

@media (max-width: 540px) {
  body.v2 .connectors-grid { grid-template-columns: 1fr; }
  /* 1-col: every cell loses border-right; only the last loses bb. */
  body.v2 .connector,
  body.v2 .connector:nth-child(2n),
  body.v2 .connector:nth-child(5n) { border-right: 0; }
  body.v2 .connector:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  body.v2 .connector:last-child { border-bottom: 0; }
  body.v2 .connector { padding: 22px 20px; }
}

/* --- STACK + TRUST V2 (4-layer architecture + governance) -- */
body.v2 .stack-v2 {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--line-faint);
}

body.v2 .stack-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) 1fr;
  gap: 80px;
  align-items: center;
}

body.v2 .stack-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
body.v2 .stack-visual img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 80px rgba(255,255,255,0.04));
}

body.v2 .stack-layers {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
body.v2 .stack-layer {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
body.v2 .stack-layer-num {
  font-family: "SF Pro Display", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  padding-top: 4px;
}
body.v2 .stack-layer-content { display: flex; flex-direction: column; gap: 8px; }
body.v2 .stack-layer h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
}
body.v2 .stack-layer p {
  font-size: 15px;
  color: var(--ink-mute);
  margin: 0;
  max-width: 60ch;
}

/* Per-layer hue tints on the number — match the 4-color system */
body.v2 .stack-layer[data-layer="4"] .stack-layer-num { color: var(--accent-pink-mute); }
body.v2 .stack-layer[data-layer="3"] .stack-layer-num { color: var(--accent-amber-mute); }
body.v2 .stack-layer[data-layer="2"] .stack-layer-num { color: var(--accent-teal-mute); }
body.v2 .stack-layer[data-layer="1"] .stack-layer-num { color: var(--accent-blue-mute); }

/* Trust strip below the stack */
body.v2 .trust-strip {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--line-faint);
}
body.v2 .trust-strip-label {
  font-family: "SF Pro Display", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 20px;
}
body.v2 .trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.v2 .trust-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "SF Pro Display", sans-serif;
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}
body.v2 .trust-pill:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  color: var(--ink);
}
body.v2 .trust-note {
  font-size: 14px;
  color: var(--ink-mute);
  margin-top: 24px;
  max-width: 64ch;
  line-height: 1.55;
}

@media (max-width: 880px) {
  body.v2 .stack-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body.v2 .stack-visual img { max-width: 360px; }
}
@media (max-width: 540px) {
  body.v2 .stack-layer {
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: 18px 0;
  }
  body.v2 .stack-layer h3 { font-size: 18px; }
  body.v2 .stack-layer p { font-size: 14px; }
  body.v2 .trust-strip { margin-top: 40px; padding-top: 28px; }
  body.v2 .trust-strip-label { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 14px; }
  body.v2 .trust-pills { gap: 8px; }
  body.v2 .trust-pill { padding: 7px 12px; font-size: 12px; }
  body.v2 .trust-note { font-size: 13px; margin-top: 20px; }
}

/* --- SECTORS / SCROLL-BOX V2 (type-only sector cards) ------ */
body.v2 .scroll-box-section.v2-section { padding-top: var(--space-section); }

body.v2 .scroll-box-section .scroll-section {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: flex-start;
}

body.v2 .scroll-box-section .scroll-left {
  position: sticky;
  top: 120px;
  align-self: flex-start;
}
body.v2 .scroll-box-section .scroll-left ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid var(--line);
}
body.v2 .scroll-box-section .scroll-left li {
  position: relative;
  padding: 14px 0 14px 22px;
}
body.v2 .scroll-box-section .scroll-left li::before {
  content: "";
  position: absolute; left: -1px; top: 0; bottom: 0;
  width: 1px; background: transparent;
  transition: background 0.18s ease;
}
body.v2 .scroll-box-section .scroll-left li.active::before,
body.v2 .scroll-box-section .scroll-left li.completed::before {
  background: var(--ink);
}
body.v2 .scroll-box-section .scroll-left li a {
  color: var(--ink-faint);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  display: inline-flex; align-items: center; gap: 12px;
  transition: color 0.18s ease;
  font-family: "SF Pro Display", sans-serif;
}
body.v2 .scroll-box-section .scroll-left li.active a { color: var(--ink); }
body.v2 .scroll-box-section .scroll-left li.completed a { color: var(--ink-mute); }
body.v2 .scroll-box-section .scroll-left li.active.completed a { color: var(--ink); }
body.v2 .scroll-box-section .scroll-left .progress-tick { display: none; }

body.v2 .scroll-box-section .scroll-right { background: transparent; }

body.v2 .scroll-box-section .scroll_content_box {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body.v2 .scroll-box-section .sector-card {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 24px;
  padding: 56px 28px;
  /* Suppress inherited .content-box border (4-side dark-grey from
     styles.css) : keep only the horizontal hairlines as separators. */
  border: 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 120px;
  background: transparent !important;
  box-shadow: none;
}
body.v2 .scroll-box-section .sector-card:first-child { border-top: 0; padding-top: 0; }
body.v2 .scroll-box-section .sector-card:last-child  { border-bottom: 1px solid var(--line); }

body.v2 .scroll-box-section .sector-card-icon {
  color: var(--ink-mute);
  display: inline-flex;
  align-items: flex-start; justify-content: flex-start;
  padding-top: 4px;
}

body.v2 .scroll-box-section .content-box-bottom {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent;
  padding: 0;
}

body.v2 .scroll-box-section .content-box-bottom h3 {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

body.v2 .scroll-box-section .content-box-bottom p {
  font-size: 16px;
  color: var(--ink-mute);
  max-width: 64ch;
}

@media (max-width: 880px) {
  body.v2 .scroll-box-section .scroll-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body.v2 .scroll-box-section .scroll-left { display: none; }
  body.v2 .scroll-box-section .sector-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 36px 20px;
  }
  body.v2 .scroll-box-section .content-box-bottom h3 { font-size: 24px; }
}

/* --- SECTOR LINE (quiet single-line punctuation) ----------- */
body.v2 .sector-line {
  padding: 56px 0;
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
}
body.v2 .sector-line p {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: none;
}
body.v2 .sector-line .sl-kicker {
  font-family: "SF Pro Display", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
body.v2 .sector-line .sl-list {
  font-family: "SF UI Display", sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: var(--ink-mute);
  letter-spacing: -0.005em;
}

@media (max-width: 720px) {
  body.v2 .sector-line { padding: 36px 0; }
  body.v2 .sector-line .sl-list { font-size: 16px; }
}

/* --- GRAPH PEEK (visual interlude before testimonial) ----- */
body.v2 .graph-peek {
  /* Drop the bottom padding — the testimonial below has its own
     padding-top which provides all the separation needed. */
  padding: calc(var(--space-section) - 24px) 0 0;
  border-top: 1px solid var(--line-faint);
}
body.v2 .graph-peek-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 48px;
}

/* Header (kicker + h2 + lede), centered */
body.v2 .graph-peek-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}
body.v2 .graph-peek-head h2 {
  max-width: 22ch;
  text-align: center;
}
body.v2 .graph-peek-lede {
  font-size: 16px;
  color: var(--ink-mute);
  max-width: 60ch;
  margin: 4px auto 0;
  line-height: 1.55;
  text-align: center;
}

/* Frame around the image — flex-centered, full width inside max bound.
   Belt-and-suspenders centering so even a perceptually off-center
   internal SVG composition still reads as deliberately placed. */
body.v2 .graph-peek-frame {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.v2 .graph-peek-img {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 30px 80px rgba(255,255,255,0.04));
}

@media (max-width: 540px) {
  body.v2 .graph-peek { padding: 56px 0 0; }
  body.v2 .graph-peek-inner { gap: 32px; }
  body.v2 .graph-peek-lede { font-size: 14px; }
}


/* --- SECURITY & GOVERNANCE V2 (promoted out of stack section) -- */
body.v2 .security-v2 {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--line-faint);
}
body.v2 .security-v2 .trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
body.v2 .security-v2 .trust-note {
  font-size: 14px;
  color: var(--ink-mute);
  margin-top: 24px;
  max-width: 64ch;
  line-height: 1.55;
}

@media (max-width: 540px) {
  body.v2 .security-v2 .trust-pills { gap: 8px; }
  body.v2 .security-v2 .trust-note { font-size: 13px; margin-top: 20px; }
}

/* --- TESTIMONIAL V2 ---------------------------------------- */
body.v2 .testimonial-v2 {
  padding: var(--space-section) 0;
}
body.v2 .testimonial-v2-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}
body.v2 .testimonial-v2 blockquote {
  margin: 0;
  font-family: "SF UI Display", sans-serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 28ch;
}
body.v2 .testimonial-meta {
  font-family: "SF Pro Display", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

@media (max-width: 720px) {
  body.v2 .testimonial-v2 { padding: 80px 0; }
  body.v2 .testimonial-v2 blockquote { font-size: 26px; }
}

/* --- MANIFESTO V2 (hands image, brand-thesis closing) ----- */
body.v2 .manifesto-v2 {
  padding: var(--space-section) 0 calc(var(--space-section) - 24px);
  border-top: 1px solid var(--line-faint);
}

body.v2 .manifesto-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: #050505;
  aspect-ratio: 12 / 5;
  min-height: 460px;
}

body.v2 .manifesto-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  z-index: 0;
  display: block;
}

/* Subtle gradient : darken upper-right where the headline sits */
body.v2 .manifesto-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(45deg,  transparent 38%, rgba(0,0,0,0.72) 92%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, transparent 28%);
}

/* LinkedIn glyph : small dark tile, upper-left */
body.v2 .manifesto-social {
  position: absolute;
  top: 28px;
  left: 28px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  z-index: 3;
  transition: background 0.18s ease, border-color 0.18s ease;
}
body.v2 .manifesto-social:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.22);
}
body.v2 .manifesto-social img {
  width: 18px;
  height: 18px;
  display: block;
}

/* Headline + CTA, right-aligned in upper-right.
   max-width is wider than before so the headline lays out in 2-3
   balanced lines (text-wrap: balance) rather than 5 short ones. */
body.v2 .manifesto-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  gap: 32px;
  padding: 56px 56px 56px 32px;
  margin-left: auto;
  max-width: 780px;
  box-sizing: border-box;
}

body.v2 .manifesto-content h2 {
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-align: right;
  max-width: 18ch;
  color: var(--ink);
  text-wrap: balance;
  -webkit-hyphens: none;
          hyphens: none;
}

/* Pill CTA carrying the Stringit mark */
body.v2 .manifesto-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 22px;
  font-size: 14px;
}

body.v2 .manifesto-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #0a0a0a;
  border-radius: 50%;
}
body.v2 .manifesto-mark .logo-container {
  position: relative;
  width: 18px;
  height: 18px;
}
body.v2 .manifesto-mark .logo-img {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
}
body.v2 .manifesto-mark .logo-img.circle2 {
  width: 16.4px;
  height: 16.1px;
  top: 1px;
  left: 0.8px;
  animation: v2-spin 6s linear infinite reverse;
}

@media (max-width: 880px) {
  body.v2 .manifesto-card {
    aspect-ratio: 4 / 5;
    min-height: 560px;
  }
  body.v2 .manifesto-bg { object-position: center 78%; }
  body.v2 .manifesto-overlay {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.85) 8%, transparent 55%);
  }
  body.v2 .manifesto-content {
    /* Top padding clears the absolute-positioned LinkedIn tile
       (top:28 + h:38 = 66px) so the headline never sits behind it. */
    padding: 88px 32px 32px;
    margin-left: 0;
    max-width: 100%;
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
  }
  body.v2 .manifesto-content h2 { text-align: left; }
}

@media (max-width: 540px) {
  body.v2 .manifesto-content h2 { font-size: 26px; }
  body.v2 .manifesto-social { top: 20px; left: 20px; width: 34px; height: 34px; }
}

/* --- FOOTER V2 --------------------------------------------- */
body.v2 .site-footer-v2 {
  padding: 56px 0 32px;
  border-top: 1px solid var(--line);
  font-family: "SF Pro Display", sans-serif;
}
body.v2 .footer-inner-v2 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
  padding-bottom: 32px;
}
body.v2 .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body.v2 .footer-brand .logo-container {
  position: relative; width: 22px; height: 22px;
}
body.v2 .footer-brand .logo-img {
  width: 22px; height: 22px;
  position: absolute; top: 0; left: 0;
}
body.v2 .footer-brand .logo-img.circle2 {
  animation: v2-spin 6s linear infinite;
}
body.v2 .footer-wordmark {
  font-family: "SF UI Display", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
body.v2 .footer-nav {
  display: inline-flex;
  gap: 32px;
  justify-content: center;
}
body.v2 .footer-nav a {
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.18s ease;
}
body.v2 .footer-nav a:hover { color: var(--ink); }

body.v2 .footer-meta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  justify-content: flex-end;
}
body.v2 .footer-email {
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.18s ease;
}
body.v2 .footer-email:hover { color: var(--ink); }
body.v2 .footer-social {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color 0.18s ease, background 0.18s ease;
}
body.v2 .footer-social:hover {
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.04);
}
body.v2 .footer-social img { width: 13px; height: 13px; opacity: 0.8; }

body.v2 .footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--line-faint);
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  body.v2 .footer-inner-v2 {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  body.v2 .footer-brand,
  body.v2 .footer-nav,
  body.v2 .footer-meta { justify-content: center; }
  body.v2 .footer-nav { flex-wrap: wrap; gap: 20px; }
  body.v2 .footer-bottom {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
}

/* --- ANCHOR OFFSET ----------------------------------------- */
body.v2 .anchor-offset {
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
  height: 0;
}

/* =============================================================
   ACCENT COLOR SYSTEM
   The same 4 hues already used on the hero type-anchors
   (PERSON / COMPANY / DECISION / EVENT) extend across the page
   so every "set of 4" things picks up the palette consistently.
   ============================================================= */
body.v2 {
  --accent-blue:        #88B4FF;
  --accent-teal:        #6FD4B5;
  --accent-amber:       #FFB573;
  --accent-pink:        #FF96B5;
  /* Muted variants for kickers / step-numbers : keep small caps
     subtly tinted instead of saturated. */
  --accent-blue-mute:   rgba(136, 180, 255, 0.72);
  --accent-teal-mute:   rgba(111, 212, 181, 0.72);
  --accent-amber-mute:  rgba(255, 181, 115, 0.72);
  --accent-pink-mute:   rgba(255, 150, 181, 0.72);
}

/* Pillar icons : 3 of the 4 hues (3-pillar layout) */
body.v2 .pillars-grid-v2 .pillar-v2:nth-child(1) .pillar-icon { color: var(--accent-blue); }
body.v2 .pillars-grid-v2 .pillar-v2:nth-child(2) .pillar-icon { color: var(--accent-teal); }
body.v2 .pillars-grid-v2 .pillar-v2:nth-child(3) .pillar-icon { color: var(--accent-amber); }
/* Sector cards : icons saturated, kickers muted, both share the same hue */
body.v2 #s1 .sector-card-icon { color: var(--accent-teal);  }
body.v2 #s2 .sector-card-icon { color: var(--accent-amber); }
body.v2 #s3 .sector-card-icon { color: var(--accent-blue);  }
body.v2 #s4 .sector-card-icon { color: var(--accent-pink);  }
body.v2 #s1 .kicker { color: var(--accent-teal-mute);  }
body.v2 #s2 .kicker { color: var(--accent-amber-mute); }
body.v2 #s3 .kicker { color: var(--accent-blue-mute);  }
body.v2 #s4 .kicker { color: var(--accent-pink-mute);  }

/* Sector sticky-rail active indicator : same per-item color logic */
body.v2 .scroll-box-section .scroll-left li:nth-child(1).active::before,
body.v2 .scroll-box-section .scroll-left li:nth-child(1).completed::before { background: var(--accent-teal); }
body.v2 .scroll-box-section .scroll-left li:nth-child(2).active::before,
body.v2 .scroll-box-section .scroll-left li:nth-child(2).completed::before { background: var(--accent-amber); }
body.v2 .scroll-box-section .scroll-left li:nth-child(3).active::before,
body.v2 .scroll-box-section .scroll-left li:nth-child(3).completed::before { background: var(--accent-blue); }
body.v2 .scroll-box-section .scroll-left li:nth-child(4).active::before,
body.v2 .scroll-box-section .scroll-left li:nth-child(4).completed::before { background: var(--accent-pink); }

/* =============================================================
   MOBILE PASS : token reductions + per-section polish
   Two breakpoints: ≤880px (tablet/large phone) and ≤540px (phone).
   Tokens cascade so all sections shrink together; per-section
   blocks handle layout rules that need explicit overrides.
   ============================================================= */

/* === Tokens: tablet + large phone (≤880px) === */
@media (max-width: 880px) {
  body.v2 {
    --space-section: 80px;
  }
  body.v2 .container { padding: 0 24px; }
  body.v2 .section-head { margin-bottom: 56px; gap: 14px; }
  body.v2 h2 {
    font-size: clamp(26px, 5.4vw, 40px);
    line-height: 1.12;
  }
  body.v2 .section-lede { font-size: 16px; }
}

/* === Tokens: phone (≤540px) === */
@media (max-width: 540px) {
  body.v2 {
    --space-section: 64px;
  }
  body.v2 .container { padding: 0 18px; }
  body.v2 .section-head { margin-bottom: 40px; gap: 12px; }
  body.v2 h2 { font-size: clamp(22px, 7vw, 28px); line-height: 1.15; }
  body.v2 .section-lede { font-size: 15px; }
  /* Bring sections that have explicit padding overrides down too */
  body.v2 .pillars-v2,
  body.v2 .connectors-v2,
  body.v2 .testimonial-v2 { padding: var(--space-section) 0; }
}

/* === Hide hero auxiliary big-data motifs on small viewports.
       Sparklines / cloud / histogram live in the corners, which
       the SVG mask + slice crops out of view at narrow widths
       anyway : explicit display:none avoids paint cost. === */
@media (max-width: 720px) {
  body.v2 .hg-aux { display: none; }
}

/* === Hero on phone === */
@media (max-width: 540px) {
  body.v2 .hero-v2 { padding: 88px 0 64px; }
  body.v2 .hero-v2-inner { gap: 20px; }
  body.v2 .hero-v2-inner h1 {
    font-size: clamp(32px, 9vw, 40px);
    line-height: 1.06;
  }
  body.v2 .hero-lede { font-size: 15px; }
  body.v2 .hero-cta { gap: 16px; }
  body.v2 .btn-pill { padding: 12px 18px; font-size: 13px; }
}

/* === Pillar icons / type === */
@media (max-width: 540px) {
  body.v2 .pillar-v2 h3 { font-size: 20px; }
  body.v2 .pillar-v2 p { font-size: 15px; }
  body.v2 .pillars-grid-v2 { gap: 32px; padding-top: 40px; }
}

/* === Product walkthrough on phone === */
@media (max-width: 540px) {
  body.v2 .auto-section .auto-right { gap: 32px; }
  body.v2 .auto-section .auto-row { padding: 16px 0; }
  body.v2 .auto-section .auto-row-right {
    aspect-ratio: 16 / 9;   /* even flatter on phones */
    padding: 16px;
    max-height: 200px;
    min-height: 0;
  }
  body.v2 .auto-section .auto-row-left h4 { font-size: 22px; }
  body.v2 .auto-section .auto-row-left p { font-size: 15px; }
}

/* === Connectors on phone === */
@media (max-width: 540px) {
  body.v2 .connector { padding: 18px 16px; gap: 14px; }
  body.v2 .connector-logo { width: 26px; height: 26px; flex-basis: 26px; }
  body.v2 .connector-logo img { width: 26px; height: 26px; }
  body.v2 .connector-name { font-size: 15px; }
  body.v2 .connectors-foot { font-size: 13px; margin-top: 24px; }
}

/* === Sectors on phone === */
@media (max-width: 540px) {
  body.v2 .scroll-box-section .sector-card { padding: 32px 16px; }
  body.v2 .scroll-box-section .content-box-bottom h3 { font-size: 22px; }
  body.v2 .scroll-box-section .content-box-bottom p { font-size: 15px; }
}

/* === Sector strip on phone === */
@media (max-width: 540px) {
  body.v2 .sector-line .sl-list { font-size: 14px; line-height: 1.5; }
}

/* === Testimonial on phone === */
@media (max-width: 540px) {
  body.v2 .testimonial-v2 blockquote { font-size: 22px; }
  body.v2 .testimonial-meta { font-size: 12px; }
}

/* === Manifesto on phone === */
@media (max-width: 540px) {
  body.v2 .manifesto-card {
    min-height: 480px;
    border-radius: 18px;
    aspect-ratio: 4 / 5.6;
  }
  body.v2 .manifesto-content {
    /* Tile at top:20 + h:34 = 54px → start headline at 72px (18px gap). */
    padding: 72px 24px 24px;
    gap: 20px;
  }
  body.v2 .manifesto-content h2 {
    font-size: 23px;
    line-height: 1.18;
  }
  body.v2 .manifesto-cta {
    font-size: 13px;
    padding: 8px 8px 8px 18px;
  }
  body.v2 .manifesto-mark { width: 26px; height: 26px; }
  body.v2 .manifesto-mark .logo-container,
  body.v2 .manifesto-mark .logo-img { width: 16px; height: 16px; }
}

/* === Footer on phone === */
@media (max-width: 540px) {
  body.v2 .site-footer-v2 { padding: 40px 0 24px; }
  body.v2 .footer-meta { flex-wrap: wrap; gap: 14px; }
  body.v2 .footer-nav { gap: 14px 18px; }
  body.v2 .footer-bottom { font-size: 11px; }
}

/* === Buttons + nav CTA on phone === */
@media (max-width: 540px) {
  body.v2 .nav-cta .btn-quiet { padding: 6px 12px; font-size: 13px; }
  body.v2 .logo-word { font-size: 16px; }
}

/* =============================================================
   CONTACT MODAL : Formspree-backed
   ============================================================= */
body.v2 .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
          backdrop-filter: saturate(140%) blur(8px);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px 24px;
  overflow-y: auto;
}
body.v2 .modal-overlay.active { display: flex; }

body.v2 .modal-card {
  background: #0e0e0e;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px 36px 32px;
  width: 100%;
  max-width: 540px;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
body.v2 .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease;
}
body.v2 .modal-close:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
body.v2 .modal-card h3 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.012em;
  margin: 0 0 8px;
  color: var(--ink);
}
body.v2 .modal-lede {
  font-size: 14px;
  color: var(--ink-mute);
  margin: 0 0 24px;
  max-width: none;
}
body.v2 .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
body.v2 .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
body.v2 .form-row .form-group { margin-bottom: 0; }
body.v2 .form-group label {
  font-family: "SF Pro Display", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
body.v2 .form-group .required { color: var(--accent-amber); }
body.v2 .form-group input,
body.v2 .form-group textarea {
  font-family: "SF Pro Display", sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 14px;
  transition: border-color 0.18s ease, background 0.18s ease;
  outline: 0;
  width: 100%;
  box-sizing: border-box;
}
body.v2 .form-group input::placeholder,
body.v2 .form-group textarea::placeholder {
  color: rgba(255,255,255,0.32);
}
body.v2 .form-group input:focus,
body.v2 .form-group textarea:focus {
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.05);
}
body.v2 .form-group textarea {
  resize: vertical;
  min-height: 80px;
  font-family: "SF Pro Display", sans-serif;
}
body.v2 .modal-submit {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  padding: 14px 22px;
}
body.v2 .modal-submit:disabled { opacity: 0.6; cursor: wait; }

body.v2 .form-success {
  text-align: center;
  padding: 16px 0 8px;
}
body.v2 .form-success h3 { margin: 0 0 8px; }
body.v2 .form-success p {
  font-size: 15px;
  color: var(--ink-mute);
  margin: 0 auto 20px;
  max-width: none;
}
body.v2 .modal-close-btn { padding: 12px 22px; }

@media (max-width: 540px) {
  body.v2 .modal-overlay { padding: 40px 12px 12px; }
  body.v2 .modal-card { padding: 32px 20px 24px; border-radius: 14px; }
  body.v2 .form-row { grid-template-columns: 1fr; gap: 0; }
  body.v2 .form-row .form-group { margin-bottom: 14px; }
  body.v2 .modal-card h3 { font-size: 22px; }
}

/* --- HIDE LEGACY ELEMENTS WE STILL HAVE STYLES.CSS RULES FOR  -- */
body.v2 .lottie_banner,
body.v2 .platform-section,
body.v2 .two_column_section,
body.v2 .growth-section,
body.v2 .sector-strip,
body.v2 .border-horizontal { display: none !important; }

/* Cancel out styles.css h1 hero-flex layout we no longer use */
body.v2 main.hero { display: block; }

/* Ensure scoped containers use the natural flow, not hero absolute */
body.v2 .banner_content { position: static; padding: 0; }