/* ============================================================================
   CORTEX v3 — Home / shared marketing sections (Direction B: own-vs-rent)
   Builds on ../landing-tokens.css + ../landing.css (atoms: nav, btn, eyebrow,
   wrap, reveal, sec-title, footer). This file owns the NEW sections only.
   ============================================================================ */

:root {
  --atlas: #2D6AE7; /* see & understand — text/CTA legible */
  --atlas-dim: rgba(45, 106, 231, 0.14);
  --foundry: #2AB775; /* put it to work — text/CTA legible */
  --foundry-dim: rgba(42, 183, 117, 0.14);
  --own: #e7ecf3; /* "you own it" neutral-bright */
  --lead: var(--atlas); /* hero lead accent, swappable via tweak */
  --lead-glow: rgba(45, 106, 231, 0.2);
}

/* visibility-safe reveal: content is ALWAYS visible; .in only adds a slide.
   (overrides the shared opacity-fade reveal, which freezes hidden in paused iframes) */
.reveal {
  opacity: 1 !important;
}
.reveal.in {
  animation: v3reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes v3reveal {
  from {
    transform: translateY(16px);
  }
  to {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.in {
    animation: none;
  }
}
:root[data-lead="foundry"] {
  --lead: var(--foundry);
  --lead-glow: rgba(42, 183, 117, 0.18);
}
:root[data-lead="balanced"] {
  --lead: var(--atlas);
  --lead-glow: rgba(45, 106, 231, 0.16);
}

/* light-theme overrides for v3-specific tokens that assume a dark canvas */
:root[data-theme="light"] {
  --own: #334155;
  --lead-glow: rgba(45, 106, 231, 0.12);
}
:root[data-theme="light"][data-lead="foundry"] {
  --lead-glow: rgba(42, 183, 117, 0.12);
}

/* ---- section rhythm ---- */
.sec {
  position: relative;
  border-bottom: 1px solid var(--foreground);
}
.sec__pad {
  padding-top: 104px;
  padding-bottom: 104px;
}
@media (max-width: 760px) {
  .sec__pad {
    padding-top: 68px;
    padding-bottom: 68px;
  }
}
.sec-head {
  max-width: 720px;
}
.sec-head .eyebrow {
  margin-bottom: 18px;
}
.sec-sub {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--secondary);
  margin: 18px 0 0;
  max-width: 600px;
  text-wrap: pretty;
}
.kicker {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--secondary);
  text-wrap: balance;
}
.kicker b {
  color: var(--text-strong);
  font-weight: 500;
}

/* ============================================================================
   NAV — extend the shared nav with dropdown menus + "by Chaos Labs"
   ============================================================================ */
.lockup .byline {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tertiary);
  display: block;
  margin-top: 2px;
  line-height: 1;
}
.lockup .word {
  line-height: 1;
}
.lockup .stack {
  display: flex;
  flex-direction: column;
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav__links > a,
.nav__item > a {
  display: inline-flex;
  align-items: center;
}
.nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__item > a .chev {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.2s;
}
.nav__item:hover > a .chev {
  transform: rotate(180deg);
}
.nav__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 280px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 8px;
  background: var(--transparent-overlay, rgba(15, 22, 38, 0.92));
  border: 1px solid var(--card-edge);
  border-radius: 4px;
  box-shadow: 0 24px 70px var(--shadow-deep);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  z-index: 80;
}
.nav__menu::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.nav__item:hover .nav__menu,
.nav__menu:hover,
.nav__item.open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
:root[data-theme="light"] .nav__menu {
  background: rgba(255, 255, 255, 0.96);
}
.nav__menu.wide {
  min-width: 600px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 10px;
}
/* two product columns, divided; color is a quiet hover cue, not constant dots */
.nav__group {
  display: flex;
  flex-direction: column;
  padding: 4px 12px;
}
.nav__group + .nav__group {
  border-left: 1px solid var(--foreground);
}
.nav__ghead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gc, var(--atlas));
}
.nav__ghead span {
  color: var(--tertiary);
  font-weight: 700;
}
/* reset the inherited .nav__links a styling (uppercase/mono/underline) inside menus */
.nav__mlink {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 4px;
  text-decoration: none;
  transition:
    background 0.15s,
    box-shadow 0.15s;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-primary);
}
.nav__mlink::after {
  display: none !important;
}
.nav__mlink:hover {
  background: var(--ui-hover);
}
.nav__mlink:hover .mt {
  color: var(--gc, var(--text-strong));
}
.nav__mlink:hover::after {
  display: none !important;
}
.nav__mlink .mt {
  display: block;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-strong);
  line-height: 1.2;
  transition: color 0.15s;
}
.nav__mlink .md {
  display: block;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--tertiary);
  line-height: 1.35;
  text-wrap: pretty;
}
.nav__signin {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.nav__signin:hover {
  color: var(--text-strong);
}
@media (max-width: 940px) {
  .nav__menu {
    display: none !important;
  }
}

/* ============================================================================
   HERO — three switchable copy directions + animated flywheel visual
   ============================================================================ */
.hero__eye {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--secondary);
}
.hero__eye .diamond {
  color: var(--lead);
  font-size: 9px;
}

.hero__eye .pill {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.hero__eye .pill::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: block;
  background-color: var(--lead);
  content: "";
  margin: 0 5px;
}

.hero__eye .pill {
  padding: 4px 10px;
  border: 1px solid var(--foreground);
  border-radius: 3px;
  color: var(--lead);
  background: var(--lead-glow);
  font-size: 13px;
  line-height: 138%;
  backdrop-filter: blur(18px);
}

.hero__eye .pill span {
  color: var(--secondary);
  padding-left: 4px;
}

/* copy-direction switching */
.hvar {
  display: none;
}
:root[data-hero="a"] .hvar--a,
:root[data-hero="b"] .hvar--b,
:root[data-hero="c"] .hvar--c {
  display: block;
}
.hero h1 .lead {
  color: var(--lead);
}
.hero h1 .own {
  background: linear-gradient(92deg, var(--atlas), var(--foundry));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__glow.lead-glow {
  background: radial-gradient(
    50% 50% at 50% 50%,
    var(--lead-glow) 0%,
    rgba(45, 106, 231, 0) 100%
  );
}

/* hero flywheel stage */
.fly {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1/1;
  margin: 0 auto;
}
.fly__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fly__ring {
  fill: none;
  stroke: var(--foreground);
  stroke-width: 1.5;
}
.fly__arc {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.9;
}
.fly__arc.atlas {
  stroke: var(--atlas);
}
.fly__arc.foundry {
  stroke: var(--foundry);
}
.fly__arc.own {
  stroke: var(--own);
  opacity: 0.5;
}
.fly__pk {
  r: 4;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.fly.is-ready .fly__pk {
  opacity: 1;
}
.fly__pk.atlas {
  fill: var(--atlas);
}
.fly__pk.foundry {
  fill: var(--foundry);
}
.fly__pk.own {
  fill: var(--own);
}
.fly__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  width: 96px;
}
.fly__dot {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-edge);
  background: var(--card-grad);
  box-shadow: 0 8px 30px var(--shadow-deep);
}
.fly__dot svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.7;
  fill: none;
}
.fly__node.atlas .fly__dot {
  border-color: var(--atlas);
  box-shadow: none;
}
.fly__node.atlas .fly__dot svg {
  stroke: var(--atlas);
}
.fly__node.foundry .fly__dot {
  border-color: var(--foundry);
  box-shadow: none;
}
.fly__node.foundry .fly__dot svg {
  stroke: var(--foundry);
}
.fly__node.own .fly__dot {
  border-color: var(--own);
  box-shadow: none;
}
.fly__node.own .fly__dot svg {
  stroke: var(--own);
}
.fly__lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.fly__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(177, 230, 255, 0.14);
  background-color: rgba(45, 106, 231, 0.1);
  backdrop-filter: blur(18px);
}
.fly__hub img {
  width: 30px;
  height: 30px;
}
.fly__hub .ht {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fb3c8;
}
@media (prefers-reduced-motion: reduce) {
  .fly__pk {
    display: none;
  }
}
:root[data-motion="off"] .fly__pk {
  display: none;
}
@media (max-width: 980px) {
  .fly {
    max-width: 420px;
  }
}
@media (max-width: 420px) {
  .fly__node {
    width: 74px;
  }
  .fly__lbl {
    font-size: 9px;
  }
  .fly__dot {
    width: 40px;
    height: 40px;
  }
}

/* ============================================================================
   THE GAP — rent vs own, two cards
   ============================================================================ */
.gap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 50px;
}
@media (max-width: 820px) {
  .gap {
    grid-template-columns: 1fr;
  }
}
.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--foreground);
  border-radius: 4px;
  padding: 32px 30px;
  background: var(--card-grad);
  overflow: hidden;
}
.gcard__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--foreground);
  width: fit-content;
}
.gcard--rent .gcard__tag {
  color: var(--deny);
  background: var(--deny-dim);
  border-color: transparent;
}
.gcard--own .gcard__tag {
  color: var(--foundry);
  background: var(--foundry-dim);
  border-color: transparent;
}
.gcard h3 {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 25px;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--text-strong);
  margin: 18px 0 0;
}
.gcard p {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--secondary);
  margin: 14px 0 18px;
  text-wrap: pretty;
}
.gcard__viz {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--foreground);
  box-sizing: content-box;
}
.gcard--own::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    70% 90% at 90% 0%,
    var(--foundry-dim),
    transparent 60%
  );
}

/* rent ledger — values evaporating */
.ledger {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ledger__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
}
.ledger__row .l {
  color: var(--tertiary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ledger__row .l img {
  width: 15px;
  height: 15px;
  opacity: 0.7;
}
.ledger__row .v {
  color: var(--deny);
}
.ledger__row.vanish {
  opacity: 0.32;
  text-decoration: line-through;
  text-decoration-color: rgba(242, 102, 124, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .gcard--rent.in .ledger__row {
    animation: faderow 2.4s ease-in-out infinite;
  }
  .gcard--rent.in .ledger__row:nth-child(2) {
    animation-delay: 0.4s;
  }
  .gcard--rent.in .ledger__row:nth-child(3) {
    animation-delay: 0.8s;
  }
}
@keyframes faderow {
  0%,
  60% {
    opacity: 0.85;
  }
  80%,
  100% {
    opacity: 0.25;
  }
}

/* own — compounding stack */
.compound {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compound__bar {
  display: flex;
  align-items: center;
  gap: 11px;
}
.compound__bar .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
  width: 96px;
  flex: none;
}
.compound__bar .track {
  flex: 1;
  height: 9px;
  border-radius: 5px;
  background: var(--inset-bg);
  overflow: hidden;
}
.compound__bar .fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--atlas), var(--foundry));
  width: 0;
  display: block;
}
.gcard--own.in .compound__bar:nth-child(1) .fill {
  animation: grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
  --w: 54%;
}
.gcard--own.in .compound__bar:nth-child(2) .fill {
  animation: grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  --w: 74%;
}
.gcard--own.in .compound__bar:nth-child(3) .fill {
  animation: grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
  --w: 92%;
}
@keyframes grow {
  to {
    width: var(--w);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gcard--own .fill {
    width: 80% !important;
    animation: none !important;
  }
}

/* ============================================================================
   FLYWHEEL SECTION — explanatory pipeline w/ ownership bands
   ============================================================================ */
.loop {
  display: block;
  margin-top: 54px;
}
.loop__bands {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 820px) {
  .loop__bands {
    display: none;
  }
}
.loop__band {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.loop__band.atlas {
  color: var(--atlas);
  background: var(--atlas-dim);
}
.loop__band.foundry {
  color: var(--foundry);
  background: var(--foundry-dim);
}
.loop__band.own {
  color: var(--own);
  background: rgba(231, 236, 243, 0.07);
}
.loop__band .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.loop__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 820px) {
  .loop__steps {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .loop__steps {
    grid-template-columns: 1fr;
  }
}
.lstep {
  position: relative;
  padding: 24px 20px 26px;
  border: 1px solid var(--foreground);
  border-radius: 4px;
  background: var(--card-grad);
}
.lstep__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.lstep__ico {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--inset-bg);
}
.lstep__ico svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.7;
  fill: none;
}
.lstep.atlas .lstep__ico {
  border-color: var(--atlas);
}
.lstep.atlas .lstep__ico svg {
  stroke: var(--atlas);
}
.lstep.foundry .lstep__ico {
  border-color: var(--foundry);
}
.lstep.foundry .lstep__ico svg {
  stroke: var(--foundry);
}
.lstep.own .lstep__ico {
  border-color: var(--own);
}
.lstep.own .lstep__ico svg {
  stroke: var(--own);
}
.lstep__n {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--tertiary);
}
.lstep h4 {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0;
}
.lstep p {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: var(--secondary);
  margin: 8px 0 0;
  text-wrap: pretty;
}
.lstep__arrow {
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  z-index: 3;
  color: var(--tertiary);
  background: var(--background);
  border-radius: 50%;
  padding: 1px;
}
@media (max-width: 820px) {
  .lstep__arrow {
    display: none;
  }
}
.loop__return {
  position: relative;
  margin-top: 20px;
  height: 30px;
}
.loop__return-rail {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 0;
  height: 22px;
  border: 2px solid var(--foundry);
  border-top: none;
  border-radius: 0 0 16px 16px;
  opacity: 0.42;
}
.loop__return-rail::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: var(--foundry);
  transform: translate(-50%, -100%);
}
.loop__return-label {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--background);
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tertiary);
  white-space: nowrap;
}
.loop__return-label svg {
  width: 15px;
  height: 15px;
  stroke: var(--foundry);
  fill: none;
  stroke-width: 1.8;
}
@media (max-width: 520px) {
  .loop__return {
    display: none;
  }
}

/* ============================================================================
   PRODUCT TEASERS — Atlas (blue) / Foundry (green)
   ============================================================================ */
.teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.teaser.flip {
  direction: rtl;
}
.teaser.flip > * {
  direction: ltr;
}
@media (max-width: 900px) {
  .teaser {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .teaser.flip {
    direction: ltr;
  }
}
.teaser__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.teaser.atlas .teaser__pill {
  color: var(--atlas);
}
.teaser.foundry .teaser__pill {
  color: var(--foundry);
  /* background: var(--foundry-dim); */
}
.teaser__pill .dot {
  display: none;
}
/* .teaser__pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
} */
.teaser h2 {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--text-strong);
  margin: 20px 0 0;
  text-wrap: balance;
}
.teaser__lede {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  color: var(--secondary);
  margin: 18px 0 0;
  max-width: 480px;
  text-wrap: pretty;
}
.teaser__caps {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.teaser__caps li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  color: var(--secondary);
}
.teaser__caps svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  stroke-width: 2;
  fill: none;
}
.teaser.atlas .teaser__caps svg {
  stroke: var(--atlas);
}
.teaser.foundry .teaser__caps svg {
  stroke: var(--foundry);
}
.teaser__cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap 0.2s;
}
.teaser.atlas .teaser__cta {
  color: var(--atlas);
}
.teaser.foundry .teaser__cta {
  color: var(--foundry);
}
.teaser__cta:hover {
  gap: 13px;
}
.teaser__cta svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}

/* teaser product-surface mock */
.surf {
  border: 1px solid var(--card-edge);
  border-radius: 4px;
  background: var(--card-grad);
  height: 340px;
  overflow: hidden;
}
.surf__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--foreground);
  background: var(--inset-bg);
}
.surf__bar .dots {
  display: flex;
  gap: 6px;
}
.surf__bar .dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.surf__bar .dots i:nth-child(1) {
  background: #ff5f57;
}
.surf__bar .dots i:nth-child(2) {
  background: #febc2e;
}
.surf__bar .dots i:nth-child(3) {
  background: #28c840;
}
.surf__bar .tt {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tertiary);
  margin-left: 6px;
}
.surf__body {
  padding: 20px;
}

/* atlas mock: attribution rows */
.attr {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.attr__r {
  display: grid;
  grid-template-columns: 1.6fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 7px;
}
.attr__r:nth-child(odd) {
  background: var(--ui-default);
}
.attr__r .who {
  display: flex;
  align-items: center;
  gap: 10px;
}
.attr__r .av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.attr__r .nm {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-strong);
}
.attr__r .ini {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 11.5px;
  color: var(--tertiary);
}
.attr__r .amt {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--atlas);
  text-align: right;
}
.attr__r .tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tertiary);
  padding: 3px 8px;
  border: 1px solid var(--foreground);
  border-radius: 999px;
}

/* foundry mock: routing (decision card with per-path enriched meta) */
.route {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.route--decision {
  gap: 12px;
}
.route__in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 11px 14px;
  border: 1px solid var(--foreground);
  border-radius: 8px;
  background: var(--inset-bg);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--secondary);
}
.route__in-label {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.route__in-text {
  flex: 1 1 160px;
  min-width: 0;
  color: var(--text-strong);
  font-weight: 500;
}
.route__in .badge {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foundry);
  background: color-mix(in srgb, var(--foundry) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--foundry) 28%, transparent);
  border-radius: 999px;
  padding: 3px 9px;
}
.route__ctx {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.route__chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  line-height: 1.25;
}
.route__paths {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.route__p {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--foreground);
  border-radius: 10px;
  background: var(--background);
  transition:
    opacity 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
/* Non-winners recede so the decision is obvious */
.route--decision .route__p:not(.win) {
  opacity: 0.72;
}
.route--decision .route__p:not(.win):hover {
  opacity: 1;
}
.route__p.win {
  border-color: var(--foundry);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--foundry) 25%, transparent),
    0 10px 22px -14px color-mix(in srgb, var(--foundry) 55%, transparent);
  background: color-mix(in srgb, var(--foundry) 4%, var(--background));
  opacity: 1;
}
.route__p-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.route__p .m {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-strong);
}
.route__p .m img {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.route__p .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tertiary);
}
.route__p .pick {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--foundry);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--foundry) 35%, transparent);
  background: color-mix(in srgb, var(--foundry) 10%, transparent);
}
.route__p:not(.win) .pick {
  color: var(--tertiary);
  border-color: var(--foreground);
  background: var(--inset-bg);
}
.route__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.route__metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid var(--foreground);
  background: var(--inset-bg);
}
.route__metric-k {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.route__metric-v {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.route__metric-delta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--caution, #b57514);
}
.route__metric-delta--ok {
  color: var(--foundry);
}
.route__bar {
  display: block;
  height: 4px;
  margin-top: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tertiary) 18%, transparent);
  overflow: hidden;
}
.route__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--tertiary) 55%, transparent);
}
.route__bar--ok i {
  background: var(--foundry);
}
.route__why {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--secondary);
}
.route__enrich {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}
.route__enrich-k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tertiary);
  margin-right: 2px;
}
.route__enrich-chip {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--foreground);
  background: var(--background);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 500;
  color: var(--secondary);
}
.route__p.win .route__enrich-chip {
  border-color: color-mix(in srgb, var(--foundry) 28%, transparent);
  background: color-mix(in srgb, var(--foundry) 8%, transparent);
  color: var(--text-strong);
}

@media (max-width: 520px) {
  .route__metrics {
    grid-template-columns: 1fr;
  }
  .route__p-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .route__in .badge {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .route--decision .route__p {
    animation: route-row-in 0.45s cubic-bezier(0.23, 1, 0.32, 1) both;
  }
  .route--decision .route__p:nth-child(1) {
    animation-delay: 0.05s;
  }
  .route--decision .route__p:nth-child(2) {
    animation-delay: 0.14s;
  }
  .route--decision .route__p:nth-child(3) {
    animation-delay: 0.22s;
  }
  @keyframes route-row-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .route--decision .route__p:not(.win) {
    animation-name: route-row-in-dim;
  }
  @keyframes route-row-in-dim {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 0.72;
      transform: none;
    }
  }
}

/* ============================================================================
   PROOF — three stats, reassurance line, NO logo wall
   ============================================================================ */
.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 760px) {
  .proof {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.stat {
  padding: 34px 30px;
  border: 1px solid var(--foreground);
  border-radius: 4px;
  background: var(--card-grad);
}
.stat__n {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 58px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--lead);
}
.stat__n .u {
  color: var(--lead);
}
.stat__l {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--secondary);
  margin-top: 14px;
  text-wrap: pretty;
}
.proof__re {
  margin-top: 34px;
  text-align: center;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 15px;
  color: var(--tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-wrap: balance;
}
.proof__re svg {
  width: 17px;
  height: 17px;
  stroke: var(--foundry);
  fill: none;
  stroke-width: 2;
  flex: none;
}

/* ============================================================================
   CLOSING CTA
   ============================================================================ */
.close {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.close__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1558px;
  height: 1066px;
  pointer-events: none;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(45, 106, 231, 0.12) 0%,
    rgba(45, 106, 231, 0) 70%
  );
}
.close__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 24px 128px; /* extra bottom so CTA clears footer hairline */
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .close__inner {
    padding: 72px 20px 96px;
  }
}
/* Product close sections: pad the whole block above footer */
.sec.close {
  padding-bottom: 0;
}
.sec.close .wrap {
  padding-bottom: 8px;
}
.close h2 {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}
.close__copy p,
.close__text {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: var(--secondary);
  margin: 22px auto 0;
  max-width: 480px;
}

.close__cta {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================================
   FOOTER additions — own-vs-rent line + security reassurance
   ============================================================================ */
.footer__own {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--text-strong);
  line-height: 1.55;
  margin: 18px 0 0;
  max-width: 250px;
  text-wrap: pretty;
}
.footer__own b {
  font-weight: inherit;
}
.footer__sec {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.footer__sec svg {
  width: 14px;
  height: 14px;
  stroke: var(--foundry);
  fill: none;
  stroke-width: 1.8;
  flex: none;
}

/* ============================================================================
   ROUND-1 FEEDBACK ADDITIONS
   ============================================================================ */
/* hero category definer (bold first sentence of the lede) */
.hero__lede b {
  color: var(--text-strong);
  font-weight: 600;
}
/* product names inline in the lede */
.hero__lede .np {
  font-weight: 600;
}
.hero__lede .np.atlas {
  color: var(--atlas);
}
.hero__lede .np.foundry {
  color: var(--foundry);
}

/* compressed comparison (Home, F25) */
.hcmp {
  border: 1px solid var(--foreground);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ui-hover);
}

:root[data-theme="light"] .hcmp {
  background: transparent;
}

.hcmp__row {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 18px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--foreground);
  align-items: center;
}
.hcmp__row:last-child {
  border-bottom: none;
}
.hcmp__l {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 15px;
  color: var(--secondary);
}
.hcmp__r {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  color: var(--tertiary);
  line-height: 1.5;
  text-wrap: pretty;
}
.hcmp__row--cortex {
  background: var(--primary-dim);
}
.hcmp__row--cortex .hcmp__l {
  color: var(--lead);
  font-weight: 700;
}
.hcmp__row--cortex .hcmp__r {
  color: var(--text-strong);
}
.hcmp__kick {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: -0.01em;
  color: var(--secondary);
  text-wrap: balance;
}
.hcmp__kick b {
  color: var(--text-strong);
  font-weight: 500;
}
@media (max-width: 600px) {
  .hcmp__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* loop: hover/focus a band to highlight the steps it owns (F2) */
.loop__hint {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.loop__band {
  cursor: pointer;
  outline: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}
.loop__band:focus-visible {
  box-shadow:
    0 0 0 2px var(--background),
    0 0 0 4px currentColor;
}
.loop.is-focus .loop__band:not(.is-sel) {
  opacity: 0.45;
}
.loop__band.is-sel {
  transform: translateY(-1px);
}
.lstep {
  transition:
    opacity 0.18s ease,
    box-shadow 0.18s ease;
}
.lstep::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  opacity: 0;
  border-radius: 4px 4px 0 0;
  transition: opacity 0.18s ease;
}
.lstep.atlas::after {
  background: var(--atlas);
}
.lstep.foundry::after {
  background: var(--foundry);
}
.lstep.own::after {
  background: var(--own);
}
.loop.is-focus .lstep:not(.is-hot) {
  opacity: 0.34;
}
.loop.is-focus .lstep.is-hot::after {
  opacity: 1;
}

/* sourced proof footnote (F16) */
.stat__src {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--foreground);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.45;
  color: var(--tertiary);
  text-transform: none;
}

/* closing section: copy + real contact form (F8, F5, F21.4) */
.close__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: start;
  padding: 104px 0;
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 860px) {
  .close__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 72px 0;
  }
}
.close__copy h2 {
  text-align: left;
  margin: 0;
}
.close__copy p {
  text-align: left;
  margin: 22px 0 0;
  max-width: 440px;
}
.trust {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.trust li {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
  padding: 6px 11px;
  border: 1px solid var(--foreground);
  border-radius: 999px;
  background: var(--ui-default);
}
.close__alt {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 13px;
  color: var(--tertiary);
  margin-top: 22px;
}
.close__alt a {
  color: var(--lead);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--lead) 40%, transparent);
}
.close__alt a:hover {
  border-bottom-color: var(--lead);
}

.talkform {
  position: relative;
  border: 1px solid var(--card-edge);
  border-radius: 4px;
  background: var(--card-grad);
  padding: 26px 26px 24px;
}
.talkform__head {
  margin-bottom: 18px;
}
.talkform__head .label-mono {
  font-size: 26px;
  letter-spacing: -0.26px;
  text-transform: none;
  font-family: var(--font-primary);
}
.field {
  display: block;
  margin-bottom: 14px;
}
.field > span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tertiary);
  margin-bottom: 7px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-strong);
  background: var(--inset-bg);
  border: 1px solid var(--foreground);
  border-radius: 8px;
  padding: 11px 13px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  resize: vertical;
}
.field select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.talkform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 420px) {
  .talkform__row {
    grid-template-columns: 1fr;
  }
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--tertiary);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--lead);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lead) 16%, transparent);
}
.talkform__submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.talkform__fine {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 12px;
  color: var(--tertiary);
  text-align: center;
  margin: 12px 0 0;
}
.talkform__done {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 12px;
  font-size: 13px;
  background-color: rgba(42, 183, 117, 0.1);
  border-radius: 4px;
  margin-bottom: 18px;
}
.talkform__done svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: var(--foundry);
}

.talkform__done span {
  display: block;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 13px;
  color: var(--foundry);

  max-width: 340px;

  margin-top: 2px;
}
.trustband span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
  padding: 6px 11px;
  border: 1px solid var(--foreground);
  border-radius: 999px;
  background: var(--ui-default);
}
.trustband {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 16px 0;
}

/* glued-text fix on data-flow / pipeline annotation cards (F15) */
.feed__i .ft {
  display: block;
}
.feed__i .fm {
  display: block;
}

/* sticky mobile CTA (injected by chrome.js; desktop hidden) */
.mcta {
  display: none;
}
@media (max-width: 740px) {
  .mcta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 80;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px 11px 16px;
    border-radius: 12px;
    text-decoration: none;
    background: var(--nav-bg);
    backdrop-filter: blur(14px);
    border: 1px solid var(--card-edge);
    box-shadow: 0 12px 40px var(--shadow-deep);
  }
  /* chrome.js hide classes: no layout footprint when off-screen / near close / dense panel */
  .mcta.is-menu-hidden,
  .mcta.is-near-close,
  .mcta.is-dense-covered {
    display: none !important;
    pointer-events: none;
  }
  .mcta__t {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
  }
  .mcta__t b {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-strong);
  }
  .mcta__t span {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tertiary);
  }
  .mcta__b {
    flex: none;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    padding: 10px 16px;
    border-radius: 8px;
  }
}

/* teaser product shots: show the FULL dashboard, scaled to a tidy capped width
   and centered (no cropping) so it reads as a real screenshot, not a zoomed slice */
.teaser .surf {
  width: 100%;
  max-width: 560px;
  justify-self: center;
}
.teaser .surf__shot {
  display: flex;
}
.teaser .surf__shot img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

html[data-theme="light"] .fly__hub {
  background: rgba(45, 106, 231, 0.1);
  border: 1px solid rgba(177, 230, 255, 0.14);
  box-shadow: none;
}

html[data-theme="light"] .fly__hub.fly__hub .ht {
  color: rgba(45, 106, 231, 1);
}

html[data-theme="light"] .fly__hub svg path {
  fill: rgba(45, 106, 231, 1);
}

:root[data-theme="light"] .cred__rail img,
:root[data-theme="dark"] .cred__rail img,
:root[data-theme="light"] .logorail img.fx-invert,
:root[data-theme="dark"] .logorail img.fx-invert {
  filter: grayscale(1);
}

:root[data-theme="dark"] .fly__dot {
  background: linear-gradient(
    180deg,
    rgba(11, 16, 28, 0.1) -2.23%,
    #1f232d 8.93%
  );
}

div[hidden] {
  display: none;
}

.surf-compact {
  height: 270px;
}

/*
 * Fixed-size demo shell with internal scroll (Foundry router decision card).
 * Keeps the product-mock footprint; long path lists scroll inside.
 */
.surf.surf--scroll,
.surf-compact.surf--scroll {
  height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.surf.surf--scroll > .wfvpad,
.surf-compact.surf--scroll > .wfvpad {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
/* Slightly denser paths inside the scroll pane */
.surf--scroll .route--decision {
  gap: 10px;
}
.surf--scroll .route__paths {
  gap: 8px;
  padding-bottom: 4px;
}

.surf-large {
  height: 610px;
}