:root {
  --ink: #f4f9fc;
  --soft: #b6c8d5;
  --muted: #7f95a6;
  --cyan: #55c7ff;
  --green: #34d399;
  --dark: #07090d;
  --line: rgba(151, 211, 239, 0.22);
  --glass: rgba(5, 8, 12, 0.78);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 90px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #07090d;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overscroll-behavior: none;
}

html {
  scroll-behavior: auto;
  scrollbar-width: none;
}

/* Continuous polsia-style image-plane scroll for background (no mandatory snap).
   Monitor/portal/camera effects remain driven by JS progress; snap removed to eliminate jump on bg photo motion.
   Proximity would still compete with continuous RAF parallax; free scroll + RAF is the smooth path. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  html {
    scroll-snap-type: none;
  }
}

body {
  overflow-x: hidden;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

button,
a {
  font: inherit;
}

::selection {
  background: rgba(85, 199, 255, 0.3);
  color: var(--ink);
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* v12.4 brand chrome ------------------------------------------------------- */

.chrome {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 16px;
  background: rgba(5, 7, 11, 0.88);
  border-bottom: 1px solid rgba(151, 211, 239, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
}

.brand img {
  display: block;
  width: auto;
  height: 30px;
}

.brand:hover {
  opacity: 0.88;
}

.nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav-res {
  position: relative;
}

.nav-res > summary {
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8fa6b6;
  cursor: pointer;
  font: 500 13px/1 Inter, system-ui, sans-serif;
  list-style: none;
}

.nav-res > summary::-webkit-details-marker,
.burger > summary::-webkit-details-marker {
  display: none;
}

.nav-res > summary:hover {
  background: rgba(85, 199, 255, 0.08);
  color: var(--ink);
}

.nav-res-panel {
  position: absolute;
  top: 36px;
  left: 0;
  z-index: 110;
  display: grid;
  gap: 2px;
  min-width: 180px;
  padding: 8px;
  border: 1px solid rgba(151, 211, 239, 0.18);
  border-radius: 12px;
  background: rgba(8, 12, 18, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.nav-res-panel a {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--soft);
  font: 500 13px/1.2 Inter, system-ui, sans-serif;
  text-decoration: none;
}

.nav-res-panel a:hover {
  background: rgba(85, 199, 255, 0.1);
  color: var(--ink);
}

.nav-res-sep,
.burger-panel .sep {
  height: 1px;
  margin: 6px 4px;
  background: rgba(151, 211, 239, 0.14);
}

.nav-actions {
  display: none;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  margin-left: 8px;
}

.nav-actions .login {
  padding: 8px 16px;
  border: 1.5px solid var(--green);
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.08);
  color: #e8fff6;
  font: 600 13px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
}

.nav-actions .login:hover {
  border-color: #6ee7b7;
  background: rgba(16, 185, 129, 0.16);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.12);
}

.nav-pro {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 18px;
  border: 1px solid #60a5fa;
  border-radius: 0;
  background: #2563eb;
  box-shadow: 0 16px 44px rgba(37, 99, 235, 0.26);
  color: var(--ink);
  font: 780 14px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}

.nav-pro:hover {
  border-color: #93c5fd;
  background: #1d4ed8;
  transform: translateY(-1px);
}

.nav-pro:active,
.banner:active,
.world-btn:active {
  transform: translateY(0) scale(0.98);
}

.nav-pro-beta {
  position: absolute;
  top: -11px;
  right: -12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 7px;
  border: 1px solid rgba(216, 180, 254, 0.62);
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 10px 24px rgba(168, 85, 247, 0.34);
  color: var(--ink);
  font: 900 10px/1 var(--mono);
  pointer-events: none;
  text-transform: uppercase;
}

.mobile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.mobile-actions .nav-pro {
  min-height: 32px;
  padding: 0 14px;
  font-size: 12px;
}

.mobile-actions .nav-pro-beta {
  top: -9px;
  right: -2px;
  min-height: 16px;
  padding: 0 6px;
  font-size: 9px;
}

.burger {
  position: relative;
}

.burger > summary {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(151, 211, 239, 0.22);
  border-radius: 10px;
  background: rgba(5, 8, 12, 0.5);
  color: var(--soft);
  cursor: pointer;
  list-style: none;
}

.burger-panel {
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 110;
  display: grid;
  gap: 4px;
  width: min(280px, 88vw);
  padding: 10px;
  border: 1px solid rgba(151, 211, 239, 0.18);
  border-radius: 14px;
  background: rgba(8, 12, 18, 0.96);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.burger-panel .menu-label {
  padding: 6px 12px 2px;
  color: #6b8294;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.burger-panel a.menu-link {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--soft);
  font: 500 14px/1.2 Inter, system-ui, sans-serif;
  text-align: left;
  text-decoration: none;
}

.burger-panel a.menu-link:hover {
  background: rgba(85, 199, 255, 0.1);
  color: var(--ink);
}

.burger-panel a.menu-login,
.burger-panel a.menu-pro {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 2px;
  border: 1.5px solid var(--green);
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.12);
  color: #e8fff6;
  font: 700 14px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
}

.burger-panel a.menu-pro {
  margin-top: 6px;
  border: 1px solid #60a5fa;
  border-radius: 0;
  background: #2563eb;
  color: var(--ink);
}

.burger-panel a.menu-pro .nav-pro-beta {
  top: -10px;
  right: -8px;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  border: 0;
  background: linear-gradient(90deg, #0284c7, #38bdf8 55%, #7dd3fc);
  color: #041018;
  cursor: pointer;
  font: 700 11px var(--mono);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.banner i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #041018;
}

.banner b {
  font-variant-numeric: tabular-nums;
}

/* One native world -------------------------------------------------------- */

.world {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: #07090d;
}

.world-stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: #07090d;
  isolation: isolate;
  pointer-events: none;
}

.world-fallback {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #07090d;
  pointer-events: auto;
}

.world-fallback__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.world-fallback::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 9, 13, 0.96), rgba(7, 9, 13, 0.18) 72%);
  content: "";
}

.world-fallback__copy {
  position: absolute;
  right: 20px;
  bottom: calc(54px + env(safe-area-inset-bottom));
  left: 20px;
  z-index: 1;
  max-width: 580px;
  color: var(--ink);
}

.world-fallback__copy h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 9vw, 64px);
  line-height: 0.98;
}

.world-fallback__copy p {
  max-width: 42ch;
  margin: 0 0 20px;
  color: var(--soft);
  font-size: 16px;
  line-height: 1.5;
}

.world-track {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 0;
  pointer-events: none;
}

.world-step {
  width: 100%;
  height: 100vh;
  height: 100svh;
  /* snap removed for continuous polsia-style bg image scroll + parallax (no discrete jumps) */
}

.world-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}

.world-layer.is-mounted {
  visibility: visible;
}

.world-special {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #02060d;
  will-change: opacity, transform;
}

.world-special[hidden] {
  display: none;
}

/* Exact SHIP operating-layer animation, promoted from the live homepage into a full stage. */
.v4-layer-map {
  position: relative;
  width: min(calc(100vw - 32px), calc((100vh - 28px) * 1.7778));
  width: min(calc(100vw - 32px), calc((100svh - 28px) * 1.7778));
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(77, 125, 255, 0.32);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(2, 7, 16, 0.98), rgba(3, 10, 18, 0.94) 38%, rgba(3, 12, 14, 0.96)),
    linear-gradient(180deg, #030813, #01040a);
  box-shadow: inset 0 0 90px rgba(25, 75, 156, 0.2), 0 28px 80px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.v4-layer-map::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(80, 144, 255, 0.38) 1px, transparent 1.8px);
  background-position: 54% 48%;
  background-size: 18px 18px;
  opacity: 0.22;
  pointer-events: none;
  content: "";
}

.v4-layer-map::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1, 4, 10, 0.18), transparent 30%, transparent 78%, rgba(1, 6, 7, 0.36)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%, rgba(0, 0, 0, 0.28));
  pointer-events: none;
  content: "";
}

.v4-layer-copy {
  position: absolute;
  top: 48%;
  left: 4.4%;
  z-index: 5;
  width: 26%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 22px;
  border-left: 2px solid #347cff;
  transform: translateY(-50%);
}

.v4-layer-copy h3 {
  max-width: 10ch;
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 4.7vw, 56px);
  line-height: 1.08;
  letter-spacing: 0;
}

.v4-layer-copy h3 em {
  display: block;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  background: linear-gradient(95deg, #4d7cff 4%, #49c7f3 48%, #67dc92 94%);
  background-clip: text;
  color: transparent;
  font-style: normal;
  -webkit-background-clip: text;
}

.v4-layer-routes {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.v4-route-track,
.v4-route-pulse-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v4-route-track { stroke-width: 1.7; opacity: 0.36; }
.v4-route-pulse-line {
  stroke-width: 2.5;
  stroke-dasharray: 10 18;
  opacity: 0.78;
  filter: drop-shadow(0 0 8px currentColor);
  animation: v4-layer-route-flow 5.8s linear infinite;
}
.v4-route-track.is-tools, .v4-route-pulse-line.is-tools { stroke: #2374ff; color: #2374ff; }
.v4-route-track.is-context, .v4-route-pulse-line.is-context { stroke: #57d98e; color: #57d98e; }
.v4-route-track.is-agents, .v4-route-pulse-line.is-agents { stroke: #7a67ff; color: #7a67ff; }
.v4-route-track.is-approvals, .v4-route-pulse-line.is-approvals { stroke: #7ee6a2; color: #7ee6a2; }
.v4-route-pulse-line.is-context { animation-delay: -1.1s; }
.v4-route-pulse-line.is-agents { animation-delay: -2.2s; }
.v4-route-pulse-line.is-approvals { animation-delay: -3.3s; }

.v4-layer-zone {
  --zone-rgb: 56, 189, 248;
  position: absolute;
  z-index: 4;
  padding: 13px 16px 15px;
  border: 1px solid rgba(var(--zone-rgb), 0.32);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(var(--zone-rgb), 0.085), rgba(5, 13, 24, 0.78));
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.34), inset 0 0 38px rgba(var(--zone-rgb), 0.05);
  animation: v4-layer-panel-breathe 7s ease-in-out infinite;
}
.v4-layer-zone::before {
  position: absolute;
  inset: 1px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 58%);
  pointer-events: none;
  content: "";
}
.v4-layer-zone-head { position: relative; z-index: 1; display: flex; align-items: center; margin-bottom: 14px; }
.v4-layer-zone-head b { color: #fff; font-size: clamp(18px, 2.2vw, 30px); line-height: 1; letter-spacing: 0; }
.v4-layer-slot-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.v4-layer-slot-grid.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v4-layer-slot-grid span,
.v4-layer-agent-row span {
  min-width: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--zone-rgb), 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #dbeafe;
  font: 800 10px/1.1 var(--mono);
  text-align: center;
}
.v4-layer-slot-grid span { min-height: 40px; padding: 0 6px; overflow: hidden; border-radius: 8px; text-overflow: ellipsis; white-space: nowrap; }
.v4-layer-agent-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.v4-layer-agent-row span { min-height: 58px; aspect-ratio: 1; padding: 7px; border-radius: 999px; color: #e9edff; }
.v4-layer-zone.is-tools { --zone-rgb: 49, 125, 255; top: 8%; left: 31%; width: 25.5%; }
.v4-layer-zone.is-context { --zone-rgb: 91, 211, 137; top: 8%; right: 4.5%; width: 28.5%; animation-delay: -1s; }
.v4-layer-zone.is-agents { --zone-rgb: 124, 97, 255; bottom: 9%; left: 31%; width: 31%; animation-delay: -2s; }
.v4-layer-zone.is-approvals { --zone-rgb: 114, 219, 151; right: 4.8%; bottom: 9%; width: 31%; animation-delay: -3s; }
.v4-layer-zone.is-approvals .v4-layer-agent-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.v4-layer-core {
  position: absolute;
  top: 40.5%;
  left: 49.2%;
  z-index: 5;
  width: 29%;
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid rgba(48, 117, 255, 0.7);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(9, 25, 53, 0.92), rgba(4, 12, 28, 0.94));
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.08), 0 0 56px rgba(47, 123, 255, 0.24), inset 0 0 46px rgba(54, 118, 255, 0.08);
}
.v4-layer-core::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(55, 137, 255, 0.54) 1px, transparent 1.9px);
  background-size: 14px 14px;
  opacity: 0.23;
  content: "";
}
.v4-layer-core-brand { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.v4-layer-core-brand img { display: block; width: min(100%, 250px); height: auto; object-fit: contain; }

.v4-layer-node {
  position: absolute;
  z-index: 6;
  width: 23px;
  height: 23px;
  border: 3px solid rgba(218, 235, 255, 0.82);
  border-radius: 999px;
  background: rgb(var(--node-rgb));
  box-shadow: 0 0 0 8px rgba(var(--node-rgb), 0.15), 0 0 24px rgba(var(--node-rgb), 0.88);
  animation: v4-layer-node-pulse 3.8s ease-in-out infinite;
}
.v4-layer-node.node-tools { --node-rgb: 49, 125, 255; top: 34.7%; left: 40.6%; }
.v4-layer-node.node-context { --node-rgb: 91, 211, 137; top: 34.7%; right: 15.8%; animation-delay: -0.7s; }
.v4-layer-node.node-agents { --node-rgb: 124, 97, 255; bottom: 32%; left: 40.6%; animation-delay: -1.4s; }
.v4-layer-node.node-approvals { --node-rgb: 114, 219, 151; right: 15.9%; bottom: 32%; animation-delay: -2.1s; }
.v4-layer-spark { position: absolute; z-index: 3; width: 5px; height: 5px; border-radius: 999px; background: rgb(var(--spark-rgb)); box-shadow: 0 0 12px rgba(var(--spark-rgb), 0.85); animation: v4-layer-spark 4.6s ease-in-out infinite; }
.v4-layer-spark.spark-a { --spark-rgb: 49, 125, 255; top: 37.5%; left: 43.8%; }
.v4-layer-spark.spark-b { --spark-rgb: 91, 211, 137; top: 37.5%; right: 18.7%; animation-delay: -1.1s; }
.v4-layer-spark.spark-c { --spark-rgb: 124, 97, 255; bottom: 35.1%; left: 43.1%; animation-delay: -2.2s; }
.v4-layer-spark.spark-d { --spark-rgb: 114, 219, 151; right: 18.5%; bottom: 35.1%; animation-delay: -3.3s; }

@keyframes v4-layer-route-flow { to { stroke-dashoffset: -84; } }
@keyframes v4-layer-panel-breathe {
  0%, 100% { transform: translateY(0); box-shadow: 0 20px 56px rgba(0, 0, 0, 0.34), inset 0 0 38px rgba(var(--zone-rgb), 0.05); }
  50% { transform: translateY(-4px); box-shadow: 0 26px 66px rgba(0, 0, 0, 0.42), 0 0 26px rgba(var(--zone-rgb), 0.13), inset 0 0 42px rgba(var(--zone-rgb), 0.08); }
}
@keyframes v4-layer-node-pulse { 0%, 100% { transform: scale(1); opacity: 0.86; } 50% { transform: scale(1.13); opacity: 1; } }
@keyframes v4-layer-spark { 0%, 100% { opacity: 0.32; transform: scale(0.75); } 45%, 58% { opacity: 1; transform: scale(1.3); } }

.world-photo-backdrop {
  position: absolute;
  inset: -28px;
  z-index: 0;
  width: calc(100% + 56px);
  height: calc(100% + 56px);
  object-fit: cover;
  object-position: center;
  filter: blur(22px) brightness(0.62) saturate(0.88);
  opacity: 0;
  transform: scale(1.04);
  transform-origin: center;
  will-change: opacity, transform;
}

.world-media-plane {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: max(100vw, 177.6833vh);
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 50%;
  will-change: transform;
}

.world-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0);
  /* polsia parity: continuous RAF-driven image-plane + subtle parallax translateY on bg photo(s);
     keep full object-fit cover, will-change for smooth transform + opacity */
  will-change: transform, opacity;
}

/* persistent get started bottom (copied polsia live badge style) */
.get-started {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 82%, var(--card));
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  font-size: 12px;
  color: var(--fg);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  cursor: pointer;
}
.get-started .b-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
  animation: gs-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
.get-started .b-num { font-weight: 600; letter-spacing: .02em; }
.get-started .b-arrow { margin-left: 2px; opacity: .7; transition: transform .15s; }
.get-started:hover .b-arrow { transform: translateX(2px); }
@keyframes gs-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

.world-photo.has-load-error {
  opacity: 0 !important;
}

.world-layer[data-id="hero"] .world-screen,
.world-layer[data-id="providers"] .world-screen {
  /* Full parity for hero<->providers during seam: same screen bg prevents color jump inside monitor rect. */
  background: #05070b;
}

.world-screen {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  transform-origin: center;
}

.world-screen--guide {
  pointer-events: none;
}

.world-demo-host,
.world-phone-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}

.world-screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1260px;
  height: 761px;
  border: 0;
  background: #05070b;
  transform-origin: top left;
  pointer-events: none;
}

.world-layer.is-interactive-demo .world-screen,
.world-layer.is-interactive-demo .world-demo-host,
.world-layer.is-interactive-demo .world-screen iframe {
  pointer-events: auto;
}

.world-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #05070b;
  object-fit: cover;
  object-position: top;
}

/*
 * One persistent live monitor for META → Founder → Builder → Grower →
 * Finance → Enterprise. Room layers wipe underneath it; only the content
 * inside this glass wipes, while its rectangle interpolates to the next
 * photographed monitor and lifts by 4.5% at mid-handoff.
 */
.world-role-portal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  overflow: hidden;
  visibility: hidden;
  border: 1px solid rgba(186, 230, 253, 0.52);
  background: #08111f;
  box-shadow:
    0 0 0 1px rgba(2, 6, 23, 0.72),
    0 calc(18px + var(--role-portal-lift, 0) * 16px)
      calc(64px + var(--role-portal-lift, 0) * 34px) rgba(2, 6, 23, 0.58),
    0 0 52px rgba(56, 189, 248, 0.12);
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: width, height, transform, border-radius, box-shadow, opacity;
}

.world-role-portal.is-visible {
  visibility: visible;
}

.world-role-portal::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -20px 42px rgba(2, 6, 23, 0.12);
  content: "";
  pointer-events: none;
}

.world-role-surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #08111f;
  opacity: 0;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  will-change: opacity, transform, clip-path;
}

.world-role-frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  background: #07101f;
  pointer-events: none;
  transform-origin: 0 0;
}

.world-role-portal.is-interactive {
  pointer-events: auto;
}

.world-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(3, 5, 8, 0.76) 0%, rgba(3, 5, 8, 0.48) 25%, rgba(3, 5, 8, 0.08) 55%, rgba(3, 5, 8, 0.08) 100%),
    linear-gradient(0deg, rgba(3, 5, 8, 0.36), transparent 52%);
  pointer-events: none;
}

.world-layer[data-id="mobile"] .world-shade {
  background:
    linear-gradient(90deg, rgba(3, 5, 8, 0.72), rgba(3, 5, 8, 0.3) 42%, rgba(3, 5, 8, 0.02) 73%),
    linear-gradient(0deg, rgba(3, 5, 8, 0.42), transparent 52%);
}

.world-copy {
  position: absolute;
  top: 50%;
  left: clamp(26px, 5.2vw, 86px);
  z-index: 5;
  width: min(500px, 22vw);
  transform: translate3d(0, -45%, 0);
  color: var(--ink);
  text-shadow: 0 3px 28px rgba(0, 0, 0, 0.95);
  will-change: opacity, transform;
}

.world-copy-stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.world-copy-stage .world-copy a,
.world-copy-stage .world-viewas-btn {
  pointer-events: auto;
}

/* Founder profile chooser buttons (and chooser container) must be hittable inside the
   copy overlay which defaults to pointer-events:none for non-interactive copy.
   Parity with legacy viewas-btn and a tags. Updated for the 4 "view as" buttons
   to receive clicks and drive apply + hero-style profile zoom. */
.world-copy-stage .founder-profile-chooser,
.world-copy-stage .founder-profile-chooser button,
.world-copy-stage .founder-profile-btn {
  pointer-events: auto;
}

.world-copy--compact .world-kicker {
  margin-bottom: 9px;
}

.world-copy--compact h1 {
  margin-bottom: 10px;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 0.98;
}

.world-copy--compact p {
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.36;
}

.world-copy--compact .world-proof {
  gap: 5px 9px;
  margin-top: 10px;
}

.world-copy--compact .world-cta {
  gap: 8px;
  margin-top: 12px;
}

.world-copy--compact .world-btn {
  min-height: 40px;
  padding-inline: 13px;
  font-size: 11px;
}

.world-copy--contained {
  padding-right: 8px;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: thin;
  touch-action: pan-y;
}

/* Keep the complete stage rail available inside Hero, META, and profile portals. */
html.is-demo-focus .scroll-cue,
html.is-demo-focus .lab-identity {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
}

.world-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--cyan);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.world-kicker::before {
  width: 24px;
  height: 1px;
  background: currentColor;
  content: "";
}

.world-kicker .world-count {
  color: rgba(215, 229, 237, 0.62);
  font-variant-numeric: tabular-nums;
}

/* Role label outside the demo chrome — surfaces beat.eyebrow (the audience)
   as a compact cyan pill above the title, so the role reads without copy dive. */
.world-role-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 11px;
  border: 1px solid rgba(85, 199, 255, 0.45);
  border-radius: 999px;
  background: rgba(85, 199, 255, 0.1);
  color: var(--cyan);
  font: 600 11px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.world-copy--compact .world-role-tag {
  margin-bottom: 9px;
  padding: 4px 9px;
  font-size: 10px;
}

.world-copy h1 {
  max-width: 11ch;
  margin: 0 0 18px;
  color: #f8fbfd;
  font-size: clamp(42px, 5.25vw, 78px);
  font-weight: 720;
  letter-spacing: -0.058em;
  line-height: 0.94;
}

.world-copy p {
  max-width: 46ch;
  margin: 0;
  color: #d4e2eb;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
}

/* Final copy-placement lab. Both modes keep the message to one headline and
   one byline, then use the available horizontal band instead of sitting on the
   keyboard. The query string selects the composition without duplicating the
   story or its content. */
.world-copy--placement {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr);
  align-items: end;
  gap: clamp(22px, 4vw, 72px);
}

.world-copy--placement h1,
.world-copy--placement.world-copy--compact h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(30px, 3.35vw, 50px);
  line-height: 0.96;
}

.world-copy--placement p,
.world-copy--placement.world-copy--compact p {
  max-width: 58ch;
  padding-bottom: 2px;
  font-size: clamp(13px, 1.08vw, 17px);
  line-height: 1.45;
}

/* One-image prototype: a single balanced hero title precisely registered to
   the monitor below it. No pill, count, byline, card, or additional chrome. */
.world-copy--title-only {
  text-align: center;
}

/* Keep the centered Hero/META/founder title+chooser visible only once its portal is settled.
   During a scene animation the JS copy timing must win, otherwise an incoming
   profile title appears over the monitor before the wipe reaches it.
   Founder parity: force the chooser (title above monitor + View-as buttons) live. */
html.is-demo-focus:not(.is-stage-animating)[data-copy-placement="title-only"]
  .world-layer[data-id="hero"] .world-copy--title-only,
html.is-demo-focus:not(.is-stage-animating)[data-copy-placement="title-only"]
  .world-layer[data-id="providers"] .world-copy--title-only,
html.is-demo-focus:not(.is-stage-animating)[data-copy-placement="title-only"]
  .world-layer[data-id="founder"] .world-copy--title-only {
  opacity: 1 !important;
}

/* Mobile beat sits on a bright background — render its title in near-black. */
h1.world-title--dark {
  color: #0a0d12 !important;
}

/* Enterprise + mobile titles: larger and nudged up on wide screens. */
.world-copy--title-only h1.world-title--feature {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  font-size: clamp(46px, 5vw, 68px) !important;
  line-height: 0.95;
  text-align: center;
  transform: translateY(-12px);
}

@media (max-width: 900px) {
  .world-copy--title-only h1.world-title--feature {
    font-size: clamp(24px, 8vw, 34px) !important;
    line-height: 1;
    transform: none;
  }
}

.world-copy--title-only h1 {
  max-width: 14ch;
  margin: 0 auto;
  font-size: clamp(38px, 3.25vw, 46px);
  line-height: 0.94;
  text-wrap: balance;
}

.world-copy--title-only h1.world-title--brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  width: 100%;
  max-width: none;
  font-size: clamp(13.5px, 4.23vw, 31px);
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
  text-wrap: nowrap;
}

.world-copy--title-only h1.world-title--scene-lockup {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  font-size: clamp(22px, 3vw, 42px);
  letter-spacing: -0.015em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-wrap: nowrap;
}

/* Parity for founder chooser (title + buttons + list) inside the wide title-only band above monitor. */
.world-copy--title-only .founder-profile-chooser {
  max-width: 620px;
  margin: 18px auto 0;
  text-align: left;
}

.world-title__lead,
.world-title__brand {
  flex: 0 0 auto;
}

.world-title__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.world-title__wordmark {
  display: block;
  width: auto;
  height: 1.25em;
  object-fit: contain;
}

.world-title__brand-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html[data-copy-placement="title-only"] .world-layer[data-id="hero"] .world-shade,
html[data-copy-placement="title-only"] .world-layer[data-id="providers"] .world-shade {
  background:
    radial-gradient(ellipse 44% 30% at 50% 27%, rgba(3, 5, 8, 0.56), transparent 78%),
    linear-gradient(0deg, rgba(3, 5, 8, 0.28), transparent 48%);
}

html[data-copy-placement="above"] .world-shade {
  background:
    linear-gradient(180deg, rgba(3, 5, 8, 0.88) 0%, rgba(3, 5, 8, 0.5) 25%, rgba(3, 5, 8, 0.06) 53%, transparent 72%),
    linear-gradient(90deg, rgba(3, 5, 8, 0.34), transparent 58%);
}

html[data-copy-placement="below"] .world-shade {
  background:
    linear-gradient(0deg, rgba(3, 5, 8, 0.9) 0%, rgba(3, 5, 8, 0.5) 25%, rgba(3, 5, 8, 0.06) 53%, transparent 72%),
    linear-gradient(90deg, rgba(3, 5, 8, 0.28), transparent 58%);
}

.world-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 13px;
  margin: 22px 0 0;
  padding: 0;
  color: #c9d9e3;
  list-style: none;
  font: 650 10px/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.world-proof li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.world-proof li::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(85, 199, 255, 0.7);
  content: "";
}

.world-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  pointer-events: auto;
}

.world-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 19px;
  border: 1px solid rgba(56, 189, 248, 0.55);
  border-radius: 8px;
  background: linear-gradient(90deg, #0284c7, #38bdf8 55%, #7dd3fc);
  color: #041018;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: filter 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.world-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.world-btn--primary {
  border-color: #60a5fa;
  border-radius: 0;
  background: #2563eb;
  color: var(--ink);
}

.world-btn--primary:hover {
  background: #1d4ed8;
}

.world-transition-line {
  position: absolute;
  top: var(--header-h);
  bottom: 0;
  z-index: 9;
  width: 1px;
  background: rgba(85, 199, 255, 0.9);
  box-shadow: 0 0 12px rgba(85, 199, 255, 0.65), 0 0 36px rgba(85, 199, 255, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.world-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 130;
  height: 2px;
  background: rgba(85, 199, 255, 0.08);
  pointer-events: none;
}

.world-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(85, 199, 255, 0.5);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: background-color 320ms ease, box-shadow 320ms ease;
}

html[data-story-stage="mobile"] .world-progress span {
  background: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.62);
}

.rail {
  position: fixed;
  top: 50%;
  right: 10px;
  z-index: 70;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
}

.rail button {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #718898;
  cursor: pointer;
}

.rail button::after {
  position: absolute;
  inset: -8px;
  content: "";
}

.rail button.on {
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgba(85, 199, 255, 0.13);
}

.rail span {
  position: absolute;
  top: 50%;
  right: 18px;
  padding: 5px 7px;
  border: 1px solid rgba(151, 211, 239, 0.12);
  border-radius: 5px;
  background: var(--glass);
  color: #d7e5ed;
  font: 9px/1 var(--mono);
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(5px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  text-transform: uppercase;
  white-space: nowrap;
}

.rail button:hover span,
.rail button:focus-visible span {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.scroll-cue {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(215, 229, 237, 0.66);
  font: 650 9px/1 var(--mono);
  letter-spacing: 0.14em;
  pointer-events: none;
  transform: translateX(-50%);
  text-transform: uppercase;
}

.scroll-cue i {
  position: relative;
  width: 18px;
  height: 28px;
  border: 1px solid rgba(215, 229, 237, 0.42);
  border-radius: 999px;
}

.scroll-cue i::after {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 2px;
  height: 5px;
  border-radius: 2px;
  background: var(--cyan);
  animation: scroll-wheel 1.6s ease-in-out infinite;
  content: "";
  transform: translateX(-50%);
}

@keyframes scroll-wheel {
  0% { opacity: 0; transform: translate(-50%, 0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 9px); }
}

.lab-identity {
  position: fixed;
  bottom: 12px;
  left: 14px;
  z-index: 75;
  padding: 6px 8px;
  border: 1px solid rgba(151, 211, 239, 0.2);
  background: rgba(5, 8, 12, 0.68);
  color: rgba(182, 200, 213, 0.66);
  font: 700 8px/1 var(--mono);
  letter-spacing: 0.12em;
  pointer-events: none;
}

.noscript {
  position: fixed;
  inset: var(--header-h) 0 auto;
  z-index: 200;
  padding: 14px 20px;
  background: #111827;
  color: var(--ink);
  text-align: center;
}

@media (min-width: 901px) {
  .nav,
  .nav-actions {
    display: flex;
  }

  .mobile-actions {
    display: none;
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 90px;
  }

  html,
  body {
    overscroll-behavior-y: none;
  }

  .world-photo-backdrop {
    display: none;
  }

  .world-layer,
  .world-media-plane,
  .world-photo,
  .world-copy {
    will-change: transform, opacity; /* keep continuous bg parallax even on mobile; no partial disable */
  }

  .topbar {
    padding: 8px 12px;
  }

  .banner {
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .world-media-plane {
    width: max(100vw, 177.6833vh);
    width: max(100vw, 177.6833svh);
  }

  .world-layer[data-id="hero"] .world-media-plane,
  .world-layer[data-id="providers"] .world-media-plane {
    /* Full parity on render path: identical mask on both for continuous room photo edges in seam rect correction. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  }

  .world-shade,
  .world-layer[data-id="mobile"] .world-shade {
    background: linear-gradient(0deg, rgba(3, 5, 8, 0.9) 0%, rgba(3, 5, 8, 0.58) 38%, rgba(3, 5, 8, 0.1) 70%, transparent 82%);
  }

  .world-copy {
    top: auto;
    right: 42px;
    bottom: calc(clamp(62px, 11vh, 100px) + env(safe-area-inset-bottom));
    bottom: calc(clamp(62px, 11dvh, 100px) + env(safe-area-inset-bottom));
    left: 20px;
    width: auto;
    max-width: 560px;
    transform: none;
  }

  .world-kicker {
    margin-bottom: 12px;
    font-size: 9px;
  }

  .world-copy h1 {
    max-width: 12ch;
    margin-bottom: 12px;
    font-size: clamp(34px, 10vw, 54px);
    line-height: 0.97;
  }

  .world-copy p {
    max-width: 38ch;
    font-size: clamp(14px, 3.7vw, 17px);
    line-height: 1.42;
  }

  .world-copy--placement {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 9px;
  }

  .world-copy--placement h1,
  .world-copy--placement.world-copy--compact h1 {
    max-width: 13ch;
    margin: 0;
    font-size: clamp(28px, 8vw, 42px);
  }

  .world-copy--placement p,
  .world-copy--placement.world-copy--compact p {
    max-width: 42ch;
    padding: 0;
    font-size: clamp(12px, 3.3vw, 15px);
    line-height: 1.38;
  }

  .world-copy--title-only h1 {
    max-width: 12ch;
    font-size: clamp(34px, 9vw, 48px);
  }

  .world-proof {
    gap: 6px 10px;
    margin-top: 14px;
    font-size: 8px;
  }

  .world-cta {
    margin-top: 18px;
  }

  .world-btn {
    min-height: 44px;
    padding: 0 15px;
    font-size: 12px;
  }

  .rail {
    display: none;
  }

  .scroll-cue {
    right: 42px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: auto;
    transform: none;
  }

  .scroll-cue span {
    display: none;
  }

  .lab-identity {
    bottom: calc(9px + env(safe-area-inset-bottom));
    left: 10px;
    font-size: 7px;
  }

  .world-transition-line {
    display: none;
  }
}

@media (max-width: 760px) and (min-height: 560px) {
  .world-special {
    padding: 8px;
  }

  .v4-layer-map {
    width: 100%;
    height: calc(100vh - 16px);
    height: calc(100svh - 16px);
    display: grid;
    grid-template-areas:
      "copy copy"
      "core core"
      "tools context"
      "agents approvals";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 96px minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    aspect-ratio: auto;
  }

  .v4-layer-routes,
  .v4-layer-node,
  .v4-layer-spark {
    display: none;
  }

  .v4-layer-copy,
  .v4-layer-core,
  .v4-layer-zone.is-tools,
  .v4-layer-zone.is-context,
  .v4-layer-zone.is-agents,
  .v4-layer-zone.is-approvals {
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    transform: none;
  }

  .v4-layer-copy {
    grid-area: copy;
    padding: 4px 0 4px 14px;
  }

  .v4-layer-copy h3 {
    max-width: 12ch;
    font-size: clamp(30px, 9vw, 42px);
  }

  .v4-layer-core {
    grid-area: core;
    padding: 12px 18px;
  }

  .v4-layer-core-brand img {
    width: min(72%, 235px);
  }

  .v4-layer-zone {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 12px;
    overflow: hidden;
  }

  .v4-layer-zone.is-tools { grid-area: tools; }
  .v4-layer-zone.is-context { grid-area: context; }
  .v4-layer-zone.is-agents { grid-area: agents; }
  .v4-layer-zone.is-approvals { grid-area: approvals; }
  .v4-layer-zone-head { margin-bottom: 8px; }
  .v4-layer-zone-head b { font-size: 18px; }
  .v4-layer-slot-grid,
  .v4-layer-slot-grid.is-wide,
  .v4-layer-agent-row,
  .v4-layer-zone.is-approvals .v4-layer-agent-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .v4-layer-slot-grid span,
  .v4-layer-agent-row span {
    min-height: 28px;
    padding: 4px;
    border-radius: 7px;
    font-size: 7px;
    aspect-ratio: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .world-media-plane,
  .world-photo,
  .world-photo-backdrop,
  .world-copy {
    will-change: transform, opacity; /* parity: continuous effects preserved */
  }

  .scroll-cue i::after {
    animation: none;
  }

  .world-transition-line {
    display: none;
  }

  .v4-route-pulse-line,
  .v4-layer-zone,
  .v4-layer-node,
  .v4-layer-spark {
    animation: none;
  }
}

/* Profile monitor focus uses the portal camera; keep the trigger compact and single-line. */
.world-viewas-btn {
  position: absolute;
  left: 50%;
  top: 53%;
  z-index: 6;
  display: block;
  width: max-content;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  padding: 6px 12px;
  border: 1px solid #38bdf8;
  border-radius: 5px;
  background: #0a0d12;
  color: #38bdf8;
  font: 600 clamp(8px, 0.76vw, 11px)/1.2 Inter, system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
}

.world-layer[data-id="grow"] .world-viewas-btn {
  top: 64%;
}

.world-viewas-btn:hover,
.world-viewas-btn:focus-visible {
  border-color: #7dd3fc;
  color: #7dd3fc;
}

.profile-zoom .world-screen {
  box-shadow: 0 0 0 2px #38bdf8, 0 0 32px rgba(56, 189, 248, 0.34);
}

/* ══ AUG EXPERIMENT: hero profile switcher ═════════════════════════════
 * Fixed bottom-center pill bar with 4 audience buttons. Clicking one swaps
 * the hero scene to that profile. Visible only on the hero stages
 * (.is-visible toggled from JS). Purely additive — no original rules touched.
 * ═════════════════════════════════════════════════════════════════════ */
.aug-profile-switch {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 8px 10px;
  border: 1px solid rgba(151, 211, 239, 0.22);
  border-radius: 999px;
  background: rgba(6, 10, 16, 0.72);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 14px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out),
    visibility 0s linear 0.4s;
  pointer-events: none;
}

.aug-profile-switch.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out),
    visibility 0s;
  pointer-events: auto;
}

.aug-profile-switch__intro {
  padding: 0 6px 0 8px;
  color: var(--muted);
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.aug-profile-btn {
  position: relative;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(151, 211, 239, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--soft);
  font: 600 13px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, transform 0.1s ease;
}

.aug-profile-btn:hover {
  border-color: rgba(85, 199, 255, 0.6);
  background: rgba(85, 199, 255, 0.12);
  color: var(--ink);
}

.aug-profile-btn:active {
  transform: scale(0.97);
}

.aug-profile-btn.is-active {
  border-color: var(--cyan);
  background: linear-gradient(135deg, rgba(85, 199, 255, 0.32), rgba(85, 199, 255, 0.16));
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(85, 199, 255, 0.4), 0 0 22px rgba(85, 199, 255, 0.28);
}

@media (max-width: 560px) {
  .aug-profile-switch {
    gap: 6px;
    padding: 7px 8px;
  }
  .aug-profile-switch__intro {
    width: 100%;
    padding: 0 0 2px;
    text-align: center;
  }
  .aug-profile-btn {
    min-height: 32px;
    padding: 0 11px;
    font-size: 12px;
  }
}

/* NEW aug meta demo redesigns (operating, chats, security) — tighter, modern, less black space (synced from served) */
.aug-new { font-size: 12px; line-height: 1.25; }
.aug-new header { margin-bottom: 8px; }
.aug-new h2 { font-size: 15px; margin: 2px 0 4px; letter-spacing: -.01em; }
.aug-badge { font-size: 9px; padding: 1px 5px; border-radius: 3px; background: #0ea5e9; color: #04141a; font-weight: 800; margin-right: 6px; vertical-align: middle; }
.aug-new .aug-foot { font-size: 9.5px; color: #7aa3e8; margin-top: 6px; opacity: .85; }

.aug-ops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.aug-ops-grid .aug-col { background: rgba(255,255,255,.03); border: 1px solid rgba(77,125,255,.25); border-radius: 6px; padding: 6px 8px; }
.aug-ops-grid b { display: block; font-size: 10px; margin-bottom: 3px; color: #9fb4d4; }
.aug-pills { display: flex; flex-wrap: wrap; gap: 3px; }
.aug-pills span { background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.3); padding: 1px 5px; border-radius: 3px; font-size: 9px; }
.aug-core { grid-column: 1 / -1; text-align: center; font-size: 13px; font-weight: 800; padding: 8px; background: rgba(15,30,60,.6); border-radius: 6px; border: 1px solid #3b82f6; }

.aug-chat-thread { background: rgba(0,0,0,.25); border: 1px solid rgba(125,211,252,.2); border-radius: 6px; padding: 6px; }
.aug-chat-header { margin-bottom: 4px; }
.aug-msg { font-size: 10px; padding: 3px 5px; margin: 2px 0; border-radius: 4px; background: rgba(255,255,255,.04); }
.aug-msg.model { background: rgba(56,189,248,.1); border-left: 2px solid #38bdf8; }

.aug-sec-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
.aug-sec-card { background: rgba(255,255,255,.025); border: 1px solid rgba(125,211,252,.25); border-radius: 5px; padding: 6px 7px; font-size: 10px; }
.aug-sec-card b { display: block; font-size: 11px; }

/* ═══ Grok 4.5: Founder profile chooser at founder stage only (glass/navy aug tokens) ═══
 * Title + exactly 4 buttons in row/group + detailed self-ID bullet lists.
 * Not at bottom. Good visual weight. Interactive + accessible. No 5-designs.
 * Applied inside world-copy for the founder beat.
 * Visibility now forced at p=1 immersive (parity with providers title handling) + wide band.
 */
.founder-profile-chooser {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: var(--ink);
  max-width: 620px;
}
.founder-profile-title {
  font: 700 13px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
}
.founder-profile-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.founder-profile-btn {
  flex: 1 1 auto;
  min-width: 118px;
  padding: 9px 14px;
  border: 1px solid rgba(151, 211, 239, 0.28);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  color: var(--soft);
  font: 600 13px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
  text-align: center;
}
.founder-profile-btn:hover {
  border-color: rgba(85, 199, 255, 0.55);
  background: rgba(85, 199, 255, 0.10);
  color: var(--ink);
}
.founder-profile-btn.is-active,
.founder-profile-btn[aria-pressed="true"] {
  border-color: var(--cyan);
  background: linear-gradient(135deg, rgba(85, 199, 255, 0.30), rgba(85, 199, 255, 0.12));
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(85, 199, 255, 0.35);
}
.founder-profile-list {
  border-top: 1px solid rgba(151, 211, 239, 0.18);
  padding-top: 10px;
  font-size: 12.5px;
  line-height: 1.45;
}
.founder-profile-list-title {
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.founder-profile-list ul {
  margin: 0;
  padding-left: 18px;
}
.founder-profile-list li {
  margin: 4px 0;
  color: var(--ink);
}
@media (max-width: 620px) {
  .founder-profile-btns { gap: 6px; }
  .founder-profile-btn { min-width: 96px; padding: 8px 10px; font-size: 12px; }
  .founder-profile-chooser { margin-top: 12px; padding: 11px 12px; }
}
.aug-stat { font-family: monospace; font-size: 9px; color: #34d399; margin-top: 2px; }

/* Profile switcher polish for aug (profile page section) */
.aug-profile-switch { padding: 4px 8px; gap: 4px; }
.aug-profile-btn { padding: 4px 10px; font-size: 11px; border-radius: 5px; }
.aug-profile-btn[aria-pressed="true"] { background: #0ea5e9; color: #04141a; font-weight: 700; }

/* ══ FOUNDER PAGE: High-quality 4-button profile selector ═══════════════
 * Integrated (not fixed at bottom). Rich self-ID labels. Founder default.
 * Clean cards/pills suitable for stage body or standalone page section.
 * ═════════════════════════════════════════════════════════════════════ */
.founder-profiles {
  margin: 24px 0 8px;
}
.founder-profiles__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  text-align: center;
}
.founder-profiles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .founder-profiles__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
.founder-profile-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 10px 12px;
  border: 1px solid rgba(151, 211, 239, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--soft);
  font: 600 13px/1.1 Inter, ui-sans-serif, system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.23, 1, 0.32, 1);
  min-height: 78px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.founder-profile-btn:hover {
  border-color: rgba(85, 199, 255, 0.45);
  background: rgba(85, 199, 255, 0.08);
  color: var(--ink);
  transform: translateY(-1px);
}
.founder-profile-btn:active {
  transform: scale(0.985);
}
.founder-profile-btn.is-selected,
.founder-profile-btn[aria-pressed="true"] {
  border-color: #55c7ff;
  background: linear-gradient(180deg, rgba(85, 199, 255, 0.18), rgba(85, 199, 255, 0.06));
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(85, 199, 255, 0.35), 0 10px 30px -10px rgba(85, 199, 255, 0.3);
}
.founder-profile-btn__icon {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 2px;
  opacity: 0.95;
}
.founder-profile-btn__label {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.founder-profile-btn__sub {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.2;
  margin-top: 1px;
  max-width: 100%;
}
.founder-profile-btn.is-selected .founder-profile-btn__sub {
  color: rgba(244, 249, 252, 0.75);
}

/* Persistent .tp-banner Get Started (reuses exact tandem-polsia live badge visual).
   Fixed bottom, always visible (outside stages), high z, blur, pulsing green dot, 8880 ticker.
   Survives hero/meta/founder/enterprise/mobile scrolls. Link to get started. */
.tp-banner {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%);
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(5, 7, 9, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.42);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #f5f7fb;
  white-space: nowrap;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.tp-banner:hover {
  transform: translate(-50%) translateY(-2px);
  background: rgba(5, 7, 9, 0.9);
}
.tp-banner .b-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #19c37d;
  flex: none;
  box-shadow: 0 0 10px 1px rgba(25, 195, 125, 0.7);
  animation: tp-bpulse 1.8s ease-in-out infinite;
}
.tp-banner .b-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.tp-banner .b-arrow {
  transition: transform .3s ease;
}
.tp-banner:hover .b-arrow {
  transform: translate(3px);
}
.tp-banner .b-mobile { display: none; }
.tp-banner .b-desktop { display: inline; }
@media (max-width: 640px) {
  .tp-banner { font-size: 12.5px; padding: 9px 14px; bottom: 16px; }
  .tp-banner .b-desktop { display: none; }
  .tp-banner .b-mobile { display: inline; }
}
@keyframes tp-bpulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .65; transform: scale(1.2); }
}