@font-face {
  font-family: 'Manrope Variable';
  src: url('../assets/fonts/manrope-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk Variable';
  src: url('../assets/fonts/space-grotesk-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: 'Manrope Variable', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #18161f;
  background: #f6f3ee;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #18161f;
  --ink-soft: #5f5a67;
  --paper: #f6f3ee;
  --paper-2: #ebe6df;
  --white: #ffffff;
  --violet: #7c5cff;
  --violet-soft: #e4dcff;
  --coral: #ff6846;
  --coral-soft: #ffd8cf;
  --blue: #39a7ff;
  --blue-soft: #d9efff;
  --lime: #bdff79;
  --line: rgba(24, 22, 31, 0.12);
  --dark-line: rgba(255,255,255,.13);
  --shadow: 0 28px 80px rgba(37, 29, 55, .14);
  --radius-lg: 34px;
  --radius-md: 24px;
  --radius-sm: 16px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); overflow-x: hidden; }
body, button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img, svg { display: block; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
::selection { background: var(--violet); color: #fff; }

.site-page { position: relative; overflow: clip; }
.section-shell { width: min(calc(100% - 44px), var(--max)); margin-inline: auto; }
.scroll-progress { position: fixed; z-index: 200; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--violet), var(--coral), var(--blue)); transform-origin: 0 50%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.wordmark { display: inline-flex; align-items: center; position: relative; font-family: 'Space Grotesk Variable', sans-serif; font-size: 22px; letter-spacing: -.06em; font-weight: 500; }
.wordmark strong { font-weight: 720; }
.wordmark i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); margin-left: 3px; transform: translateY(-7px); }
.wordmark-inverted { color: #fff; }

.site-header { position: fixed; z-index: 100; inset: 18px 0 auto; transition: .35s ease; }
.nav-shell { width: min(calc(100% - 36px), 1180px); min-height: 66px; margin: auto; padding: 0 12px 0 22px; display: flex; align-items: center; justify-content: space-between; border: 1px solid transparent; border-radius: 20px; transition: .35s ease; }
.site-header.is-scrolled .nav-shell { background: rgba(248, 246, 242, .82); border-color: rgba(24, 22, 31, .1); box-shadow: 0 14px 45px rgba(24, 22, 31, .09); backdrop-filter: blur(18px); }
.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: 60px; }
.desktop-nav a, .text-link { font-size: 13px; font-weight: 680; color: #4f4b56; transition: color .2s; }
.desktop-nav a:hover, .text-link:hover { color: var(--ink); }
.nav-actions { display: flex; gap: 18px; align-items: center; }
.menu-button { display: none; width: 44px; height: 44px; border-radius: 14px; align-items: center; justify-content: center; background: var(--ink); color: #fff; cursor: pointer; }

.button { min-height: 52px; padding: 0 23px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; font-weight: 760; letter-spacing: -.015em; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.button:hover { transform: translateY(-3px); }
.button-dark { background: var(--ink); color: #fff; box-shadow: 0 13px 30px rgba(24,22,31,.16); }
.button-dark:hover { box-shadow: 0 18px 38px rgba(24,22,31,.23); }
.button-light { background: #fff; color: var(--ink); box-shadow: 0 13px 30px rgba(0,0,0,.18); }
.button-ghost { border: 1px solid rgba(24,22,31,.14); background: rgba(255,255,255,.48); }
.button-ghost:hover { background: #fff; }
.button-small { min-height: 42px; padding-inline: 17px; border-radius: 13px; font-size: 12px; }

.mobile-menu { position: fixed; z-index: 300; inset: 0; background: #17151e; color: #fff; padding: 28px; display: flex; flex-direction: column; }
.mobile-menu-top { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu-top button { width: 48px; height: 48px; border-radius: 15px; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; }
.mobile-menu nav { margin-block: auto; display: grid; }
.mobile-menu nav a { padding: 19px 0; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; font-family: 'Space Grotesk Variable'; font-size: clamp(32px, 9vw, 54px); letter-spacing: -.055em; border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-menu nav a span { font-family: 'Manrope Variable'; font-size: 11px; color: rgba(255,255,255,.42); letter-spacing: 0; }
.mobile-menu .button { margin-top: 26px; }

.hero { min-height: 100vh; padding-top: 148px; padding-bottom: 58px; position: relative; }
.hero::before { content: ''; position: absolute; inset: -160px auto auto 44%; width: 650px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(124,92,255,.14), transparent 66%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(390px, .88fr) minmax(620px, 1.35fr); align-items: center; gap: 26px; }
.hero-copy { position: relative; z-index: 2; padding-top: 10px; }
.eyebrow-chip { width: fit-content; display: flex; align-items: center; gap: 9px; padding: 7px 13px 7px 8px; border: 1px solid rgba(24,22,31,.12); border-radius: 999px; background: rgba(255,255,255,.58); font-size: 10px; font-weight: 760; text-transform: uppercase; letter-spacing: .12em; }
.eyebrow-chip span { width: 25px; height: 25px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; }
.hero h1 { margin: 26px 0 21px; max-width: 650px; font-family: 'Space Grotesk Variable'; font-size: clamp(62px, 6.1vw, 98px); line-height: .91; letter-spacing: -.073em; font-weight: 640; }
.hero h1 span { display: block; color: var(--violet); }
.hero-copy > p { margin: 0; max-width: 570px; color: var(--ink-soft); font-size: clamp(17px, 1.45vw, 20px); line-height: 1.63; letter-spacing: -.02em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-proof { display: flex; align-items: center; gap: 13px; margin-top: 35px; }
.proof-avatars { display: flex; }
.proof-avatars span { width: 34px; height: 34px; margin-left: -7px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--paper); background: var(--ink); color: #fff; font-size: 9px; font-weight: 800; }
.proof-avatars span:first-child { margin-left: 0; background: var(--coral); }
.proof-avatars span:nth-child(2) { background: var(--violet); }
.proof-avatars span:nth-child(3) { background: var(--blue); }
.proof-avatars span:last-child { background: #fff; color: var(--ink); }
.hero-proof p { margin: 0; display: grid; gap: 2px; font-size: 11px; }
.hero-proof p strong { font-size: 11px; }
.hero-proof p span { color: #77717f; }
.scroll-cue { position: absolute; bottom: 16px; left: 22px; display: flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 800; color: #7a7480; }
.scroll-cue i { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; }

.hero-visual-wrap { position: relative; min-height: 675px; display: grid; place-items: center; perspective: 1600px; }
.hero-aura { position: absolute; border-radius: 50%; filter: blur(2px); }
.hero-aura-one { width: 450px; height: 450px; right: 20px; top: 65px; background: radial-gradient(circle at 45% 35%, rgba(255,255,255,.95), rgba(124,92,255,.25) 40%, rgba(57,167,255,.12) 62%, transparent 70%); }
.hero-aura-two { width: 330px; height: 330px; left: 10px; bottom: 50px; background: radial-gradient(circle, rgba(255,104,70,.2), transparent 68%); }
.desktop-frame { position: relative; z-index: 2; width: min(800px, 100%); aspect-ratio: 1.33; border-radius: 22px; overflow: hidden; background: #f7f6f3; border: 1px solid rgba(255,255,255,.8); box-shadow: 0 50px 110px rgba(35,27,52,.22), 0 15px 35px rgba(35,27,52,.12); transform-style: preserve-3d; }
.window-chrome { height: 34px; padding: 0 13px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #efede9; border-bottom: 1px solid #ddd9d2; color: #7a7580; font-size: 8px; }
.traffic-lights { display: flex; gap: 5px; }
.traffic-lights i { width: 7px; height: 7px; border-radius: 50%; background: #beb9b2; }
.traffic-lights i:first-child { background: #ff7258; }
.traffic-lights i:nth-child(2) { background: #f4bb4d; }
.traffic-lights i:last-child { background: #52c45b; }
.chrome-actions { justify-self: end; display: flex; gap: 10px; }
.app-shell { height: calc(100% - 34px); display: grid; grid-template-columns: 145px 1fr; }
.app-sidebar { background: #1c1923; color: #fff; padding: 14px 10px 10px; display: flex; flex-direction: column; }
.mini-wordmark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--ink); font-size: 9px; font-weight: 900; }
.app-sidebar > button { position: absolute; margin-left: 95px; background: transparent; color: #817c88; padding: 5px; }
.project-name { margin-top: 19px; padding: 8px; display: flex; justify-content: space-between; align-items: center; border-radius: 8px; background: rgba(255,255,255,.055); font-size: 8px; font-weight: 750; }
.project-nav { margin-top: 9px; display: grid; gap: 2px; }
.project-nav div { padding: 7px 8px; border-radius: 7px; display: flex; gap: 7px; align-items: center; color: #8f8997; font-size: 7.5px; }
.project-nav div.active { background: rgba(124,92,255,.17); color: #fff; }
.sidebar-label { margin: 17px 8px 5px; color: #615c69; font-size: 6px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.connected-list { display: grid; gap: 2px; }
.connected-list span { padding: 6px 8px; display: flex; gap: 7px; color: #8f8997; font-size: 7px; }
.user-row { margin-top: auto; padding: 8px 5px; border-top: 1px solid rgba(255,255,255,.06); display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 6px; font-size: 7px; color: #aaa5b0; }
.user-row div { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--coral); color: #fff; font-size: 7px; font-weight: 800; }
.app-main { background: #f8f7f4; padding: 25px 26px; overflow: hidden; }
.app-toolbar { display: flex; justify-content: space-between; align-items: center; }
.app-toolbar small, .section-heading small { color: #8c8791; font-size: 6px; letter-spacing: .15em; font-weight: 800; }
.app-toolbar h3 { margin: 4px 0 0; font-family: 'Space Grotesk Variable'; font-size: 18px; letter-spacing: -.04em; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.online-dot { display: flex; align-items: center; gap: 4px; font-size: 6px; color: #6a6570; }
.online-dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #48c16e; box-shadow: 0 0 0 3px rgba(72,193,110,.1); }
.toolbar-actions button { background: var(--ink); color: #fff; border-radius: 7px; padding: 7px 9px; display: flex; gap: 5px; font-size: 6px; }
.brief-grid { display: grid; grid-template-columns: 1.55fr .8fr; gap: 10px; margin-top: 22px; }
.focus-card, .status-card { min-height: 145px; padding: 15px; border: 1px solid #e3dfd9; border-radius: 13px; background: #fff; }
.focus-card { background: linear-gradient(145deg, #fff 35%, #f0ecff); }
.card-label { display: flex; justify-content: space-between; color: #7c7680; font-size: 6.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.focus-card h4 { margin: 24px 0 6px; font-size: 15px; letter-spacing: -.04em; }
.focus-card p { margin: 0; max-width: 280px; color: #7a7480; font-size: 7px; line-height: 1.55; }
.progress-row { margin-top: 17px; display: flex; justify-content: space-between; font-size: 6px; color: #6b6570; }
.progress-track { margin-top: 6px; height: 4px; border-radius: 20px; background: #e5e1e8; overflow: hidden; }
.progress-track i { display: block; width: 72%; height: 100%; background: var(--violet); }
.metric { display: grid; gap: 3px; margin-top: 22px; }
.metric strong { font-family: 'Space Grotesk Variable'; font-size: 28px; letter-spacing: -.06em; }
.metric span { font-size: 7px; color: #79737f; }
.tiny-bars { height: 42px; display: flex; align-items: end; gap: 4px; margin-top: 8px; }
.tiny-bars i { width: 8px; border-radius: 3px 3px 0 0; background: #dcd6ff; }
.tiny-bars i:nth-child(1) { height: 25%; } .tiny-bars i:nth-child(2) { height: 48%; } .tiny-bars i:nth-child(3) { height: 35%; } .tiny-bars i:nth-child(4) { height: 70%; background: var(--violet); } .tiny-bars i:nth-child(5) { height: 55%; } .tiny-bars i:nth-child(6) { height: 85%; background: #bba9ff; } .tiny-bars i:nth-child(7) { height: 63%; }
.section-heading { margin-top: 24px; display: flex; justify-content: space-between; align-items: end; }
.section-heading h4 { margin: 3px 0 0; font-size: 11px; }
.section-heading button { background: transparent; color: var(--violet); font-size: 6px; font-weight: 700; }
.task-list { margin-top: 9px; background: #fff; border: 1px solid #e3dfd9; border-radius: 12px; overflow: hidden; }
.task-row { min-height: 50px; padding: 9px 12px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; border-top: 1px solid #eeebe6; }
.task-row:first-child { border-top: 0; }
.task-check { width: 15px; height: 15px; border-radius: 5px; background: #d8f6de; color: #318a49; display: grid; place-items: center; }
.task-check.empty { background: transparent; border: 1px solid #d3cec8; }
.task-row div { display: grid; gap: 3px; }
.task-row strong { font-size: 7.5px; }
.task-row small { color: #96909a; font-size: 6px; }
.task-tag { padding: 4px 6px; border-radius: 999px; background: #e8e2ff; color: #6e51dc; font-size: 5.5px; font-weight: 800; }
.task-tag.coral { background: #ffe5de; color: #ca4d32; } .task-tag.blue { background: #e2f2ff; color: #2683c8; }
.floating-card { position: absolute; z-index: 6; width: 220px; min-height: 72px; padding: 12px; border: 1px solid rgba(255,255,255,.85); border-radius: 15px; background: rgba(255,255,255,.82); box-shadow: 0 20px 50px rgba(32,25,45,.18); backdrop-filter: blur(18px); display: flex; gap: 10px; align-items: center; }
.floating-card small, .floating-card strong, .floating-card span { display: block; }
.floating-card small { font-size: 5.5px; letter-spacing: .12em; color: #8c8592; font-weight: 800; }
.floating-card strong { margin-top: 3px; font-size: 8px; }
.floating-card span { margin-top: 2px; font-size: 6px; color: #8b8590; }
.float-icon { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; }
.float-icon.purple { background: var(--violet-soft); color: var(--violet); }
.float-icon.coral { background: var(--coral-soft); color: var(--coral); }
.floating-model { left: -5px; top: 65px; }
.floating-context { right: -20px; bottom: 55px; }

.provider-strip { padding: 19px 0; border-block: 1px solid var(--line); display: grid; grid-template-columns: max-content 1fr; gap: 45px; align-items: center; overflow: hidden; }
.provider-label { padding-left: max(22px, calc((100vw - var(--max)) / 2)); white-space: nowrap; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; color: #77717d; }
.marquee-mask { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.provider-marquee { width: max-content; display: flex; }
.provider-marquee span { min-width: 145px; display: flex; align-items: center; gap: 9px; color: #635e69; font-family: 'Space Grotesk Variable'; font-size: 13px; font-weight: 620; }
.provider-marquee i { width: 6px; height: 6px; border-radius: 50%; background: #bbb4c0; }

.section-index { display: inline-flex; align-items: center; gap: 10px; color: #8b858f; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.section-index::before { content: ''; width: 18px; height: 1px; background: currentColor; }
.positioning { padding-block: 155px 170px; }
.positioning-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 17px; }
.positioning-top p { margin: 0; color: #6e6873; font-size: 12px; }
.positioning-lines { padding-top: 38px; }
.positioning-lines h2 { margin: 0; font-family: 'Space Grotesk Variable'; font-size: clamp(48px, 7.4vw, 104px); line-height: .98; letter-spacing: -.072em; font-weight: 570; }
.positioning-lines h2 span { color: var(--coral); }
.positioning-lines > div:nth-child(2) h2 { margin-left: 8vw; color: #9e98a1; }
.positioning-lines > div:nth-child(3) h2 { margin-left: 20vw; color: var(--violet); }
.positioning-answer { width: min(720px, 80%); margin: 76px 0 0 auto; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 70px 1fr; gap: 35px; align-items: start; }
.answer-mark { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; background: var(--ink); color: #fff; font-family: 'Space Grotesk Variable'; font-size: 16px; font-weight: 800; }
.positioning-answer p { margin: 0; display: grid; gap: 12px; }
.positioning-answer strong { font-family: 'Space Grotesk Variable'; font-size: clamp(24px, 3vw, 37px); line-height: 1.12; letter-spacing: -.045em; }
.positioning-answer span { max-width: 560px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }

.product-section { padding-block: 130px 150px; background: #17151e; color: #fff; border-radius: 0; position: relative; }
.product-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 75% 35%, rgba(124,92,255,.16), transparent 28%), radial-gradient(circle at 85% 80%, rgba(57,167,255,.1), transparent 25%); pointer-events: none; }
.section-heading-large { display: grid; grid-template-columns: .45fr 1fr; gap: 60px; align-items: start; }
.section-heading-large h2, .workflow-intro h2, .audience-copy h2, .pricing-heading h2, .faq-intro h2 { margin: 0; font-family: 'Space Grotesk Variable'; font-size: clamp(45px, 5.4vw, 75px); line-height: 1.01; letter-spacing: -.065em; font-weight: 580; }
.section-heading-large p, .pricing-heading p { max-width: 560px; margin: 24px 0 0; color: #817b86; font-size: 16px; line-height: 1.7; }
.light-heading p { color: rgba(255,255,255,.54); }
.light-heading .section-index { color: rgba(255,255,255,.43); }
.product-showcase-grid { margin-top: 80px; display: grid; grid-template-columns: 380px 1fr; gap: 42px; align-items: start; }
.showcase-tabs { display: grid; }
.showcase-tabs button { min-height: 112px; padding: 20px 12px; background: transparent; color: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.11); display: grid; grid-template-columns: 30px 40px 1fr 24px; gap: 12px; align-items: start; text-align: left; cursor: pointer; transition: color .2s, padding .2s; }
.showcase-tabs button:last-child { border-bottom: 1px solid rgba(255,255,255,.11); }
.showcase-tabs button.active { color: #fff; padding-left: 20px; }
.tab-number { font-size: 8px; color: rgba(255,255,255,.35); margin-top: 8px; }
.showcase-tabs button > i { width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.06); display: grid; place-items: center; }
.showcase-tabs button.active > i { background: var(--violet); }
.showcase-tabs button div { display: grid; gap: 7px; }
.showcase-tabs button small { font-size: 7px; letter-spacing: .13em; font-weight: 800; color: rgba(255,255,255,.37); }
.showcase-tabs button strong { max-width: 235px; font-family: 'Space Grotesk Variable'; font-size: 17px; line-height: 1.25; letter-spacing: -.025em; }
.showcase-tabs button > svg { margin-top: 9px; opacity: .45; transition: transform .2s; }
.showcase-tabs button.active > svg { transform: translateX(4px); opacity: 1; }
.showcase-stage { position: relative; min-height: 525px; border-radius: 26px; padding: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.showcase-screen { min-height: 500px; border-radius: 18px; overflow: hidden; background: #f5f3ef; color: var(--ink); }
.screen-header { height: 42px; padding-inline: 15px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #ddd8d1; background: #ece9e4; font-size: 8px; color: #6d6772; }
.screen-header small { justify-self: end; padding: 4px 7px; border-radius: 999px; background: #fff; font-size: 6px; }
.screen-dots { display: flex; gap: 5px; }
.screen-dots i { width: 7px; height: 7px; border-radius: 50%; background: #cbc6c0; }
.command-layout { min-height: 458px; display: grid; grid-template-columns: 118px 1fr; }
.command-sidebar { padding: 15px 9px; background: #211e29; color: #827d8a; display: grid; align-content: start; gap: 4px; }
.command-logo { width: 31px; height: 31px; margin: 0 0 12px 6px; display: grid; place-items: center; border-radius: 9px; background: #fff; color: var(--ink); font-size: 9px; font-weight: 900; }
.command-sidebar div { padding: 8px; display: flex; gap: 8px; align-items: center; border-radius: 8px; font-size: 7px; }
.command-sidebar div.active { background: rgba(124,92,255,.18); color: #fff; }
.command-content { padding: 28px; }
.command-topline { display: flex; justify-content: space-between; align-items: center; }
.command-topline small, .command-cards small, .command-bottom small { color: #8a8490; font-size: 6px; letter-spacing: .13em; font-weight: 800; }
.command-topline h4 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.04em; }
.command-topline button { padding: 8px 11px; border-radius: 8px; background: var(--ink); color: #fff; display: flex; gap: 6px; align-items: center; font-size: 6px; }
.command-cards { display: grid; grid-template-columns: 1.45fr .8fr; gap: 10px; margin-top: 25px; }
.command-cards > div { min-height: 155px; padding: 17px; border: 1px solid #dfdad4; border-radius: 14px; background: #fff; }
.command-primary { background: linear-gradient(150deg, #fff, #eee8ff) !important; }
.command-primary > strong { display: block; margin-top: 28px; font-size: 15px; letter-spacing: -.035em; }
.command-primary p { margin: 5px 0 17px; color: #88818d; font-size: 7px; }
.signal-row { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: center; font-size: 6px; color: #6c6571; }
.signal-row i { height: 4px; background: #ded9e1; border-radius: 9px; overflow: hidden; }
.signal-row b { display: block; width: 72%; height: 100%; background: var(--violet); }
.avatar-stack { display: flex; margin-top: 28px; }
.avatar-stack i { width: 29px; height: 29px; margin-left: -6px; border: 2px solid #fff; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 8px; font-weight: 800; }
.avatar-stack i:first-child { margin-left: 0; } .avatar-stack i:nth-child(2) { background: var(--coral); } .avatar-stack i:nth-child(3) { background: var(--blue); }
.command-cards > div:last-child > strong { display: block; margin-top: 10px; font-size: 9px; }
.command-bottom { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; margin-top: 10px; }
.command-bottom > div { min-height: 112px; padding: 15px; border: 1px solid #e1dcd6; border-radius: 13px; background: #fff; }
.command-bottom ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 9px; }
.command-bottom li, .command-bottom > div:last-child > span { display: flex; gap: 8px; align-items: center; font-size: 7px; }
.command-bottom li svg { color: #3fac61; } .command-bottom li span { width: 11px; height: 11px; border: 1px solid #cfc9c2; border-radius: 4px; }
.command-bottom > div:last-child { display: grid; align-content: start; gap: 10px; }
.command-bottom > div:last-child small { margin-bottom: 2px; }
.command-bottom > div:last-child > span { color: #6d6672; }
.showcase-caption { max-width: 650px; margin: 17px 8px 0 auto; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.6; }
.context-layout { min-height: 458px; padding: 28px; display: grid; grid-template-columns: .9fr 1.2fr; gap: 18px; align-items: stretch; background: linear-gradient(145deg, #f4f0ff, #f8f6f1 65%); }
.package-card { padding: 28px; border-radius: 20px; background: #211e29; color: #fff; display: flex; flex-direction: column; }
.package-orb { width: 55px; height: 55px; border-radius: 17px; background: var(--violet); display: grid; place-items: center; box-shadow: 0 15px 30px rgba(124,92,255,.32); }
.package-card > small { margin-top: 38px; font-size: 6px; letter-spacing: .14em; color: rgba(255,255,255,.44); font-weight: 800; }
.package-card h4 { margin: 7px 0 10px; font-size: 21px; letter-spacing: -.05em; }
.package-card p { margin: 0; color: rgba(255,255,255,.56); font-size: 8px; line-height: 1.6; }
.package-meta { margin-top: auto; display: flex; gap: 8px; }
.package-meta span { padding: 5px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.66); font-size: 6px; }
.package-card button { margin-top: 14px; min-height: 38px; border-radius: 9px; background: #fff; display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 7px; font-weight: 800; }
.context-list { padding: 20px; border: 1px solid #ded9d2; border-radius: 20px; background: rgba(255,255,255,.84); }
.context-list-head { padding-bottom: 15px; display: flex; justify-content: space-between; border-bottom: 1px solid #e6e1da; font-size: 8px; font-weight: 750; }
.context-list-head small { padding: 4px 7px; border-radius: 999px; background: var(--violet-soft); color: var(--violet); font-size: 6px; }
.context-item { min-height: 58px; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; border-bottom: 1px solid #ebe7e1; }
.context-item > i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #f1eee9; color: #6c6570; }
.context-item div { display: grid; gap: 3px; }
.context-item strong { font-size: 8px; } .context-item span { font-size: 6px; color: #8b8590; }
.context-item > svg { color: #3eac63; }
.context-note { margin-top: 15px; padding: 11px; border-radius: 10px; background: #eee9ff; color: var(--violet); display: flex; gap: 9px; }
.context-note p { margin: 0; display: grid; gap: 3px; }
.context-note strong { font-size: 7px; } .context-note span { color: #766f80; font-size: 6px; line-height: 1.5; }
.handoff-layout { min-height: 458px; padding: 38px; display: grid; grid-template-columns: 1fr 80px .9fr; align-items: center; background: linear-gradient(145deg, #f7f4ef, #fff0ec); }
.handoff-source { padding: 23px; border: 1px solid #ddd8d1; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px rgba(51,42,62,.08); }
.source-head { display: flex; gap: 11px; align-items: center; }
.source-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--coral); background: var(--coral-soft); }
.source-head div { display: grid; gap: 4px; }
.source-head small { color: #9a939d; font-size: 6px; letter-spacing: .12em; font-weight: 800; }
.source-head strong { font-size: 11px; }
.output-lines { margin-top: 24px; display: grid; gap: 9px; }
.output-lines i { width: 100%; height: 7px; border-radius: 6px; background: #eeeae5; }
.output-lines i:nth-child(2) { width: 78%; } .output-lines i:nth-child(3) { width: 91%; } .output-lines i:nth-child(4) { width: 58%; }
.source-chips { margin-top: 24px; display: flex; gap: 6px; }
.source-chips span { padding: 5px 7px; border-radius: 999px; background: #f1eee9; color: #77717b; font-size: 6px; }
.handoff-flow { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; color: var(--coral); }
.handoff-flow::before { content: ''; position: absolute; width: 1px; height: 125px; background: #d9d2cc; }
.handoff-flow > i { position: absolute; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,104,70,.13); }
.handoff-flow svg { position: relative; z-index: 2; padding: 7px; box-sizing: content-box; border-radius: 10px; background: #fff; border: 1px solid #e2dcd5; }
.handoff-targets { display: grid; gap: 10px; }
.handoff-targets > div { min-height: 72px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #e1dcd6; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; }
.target-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.target-icon.purple { background: var(--violet-soft); color: var(--violet); } .target-icon.coral { background: var(--coral-soft); color: var(--coral); } .target-icon.blue { background: var(--blue-soft); color: var(--blue); }
.handoff-targets p { margin: 0; display: grid; gap: 3px; }
.handoff-targets strong { font-size: 8px; } .handoff-targets small { color: #918a95; font-size: 6px; }
.handoff-targets > div > svg { color: #3dae61; }
.local-layout { min-height: 458px; padding: 24px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 15px; background: #f3f1ed; }
.connection-map { position: relative; border-radius: 18px; background: #211e29; overflow: hidden; }
.connection-map::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(124,92,255,.19), transparent 45%); }
.connection-map svg { position: absolute; inset: 50% auto auto 50%; width: 90%; transform: translate(-50%,-50%); }
.connection-map path { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 1.4; stroke-dasharray: 5 6; }
.map-center { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; align-content: center; background: var(--violet); color: #fff; box-shadow: 0 20px 40px rgba(124,92,255,.32); }
.map-center span { font-family: 'Space Grotesk Variable'; font-size: 21px; font-weight: 800; } .map-center small { font-size: 6px; color: rgba(255,255,255,.6); }
.map-node { position: absolute; z-index: 2; width: 100px; min-height: 48px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; align-content: center; gap: 4px; backdrop-filter: blur(9px); }
.map-node span { font-size: 6px; color: rgba(255,255,255,.6); }
.node-one { left: 20px; top: 28px; } .node-two { left: 20px; bottom: 28px; } .node-three { right: 20px; top: 28px; } .node-four { right: 20px; bottom: 28px; }
.connection-controls { padding: 12px; border: 1px solid #dfd9d2; border-radius: 18px; background: #fff; display: grid; align-content: center; gap: 10px; }
.connection-controls > div { min-height: 90px; padding: 12px; border-radius: 13px; background: #f6f3ef; display: grid; grid-template-columns: 38px 1fr auto; gap: 9px; align-items: center; }
.control-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #fff; }
.connection-controls p { margin: 0; display: grid; gap: 4px; }
.connection-controls strong { font-size: 8px; } .connection-controls small { color: #8c8590; font-size: 6px; line-height: 1.4; }
.toggle { width: 27px; height: 16px; border-radius: 999px; background: #cbc6c0; padding: 2px; }
.toggle i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.on { background: var(--violet); } .toggle.on i { transform: translateX(11px); }

.bento-section { padding-block: 150px; }
.dark-heading { border-bottom: 1px solid var(--line); padding-bottom: 44px; }
.bento-grid { margin-top: 35px; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(300px, auto); gap: 16px; }
.bento-card { position: relative; overflow: hidden; min-height: 385px; padding: 31px; border-radius: 28px; border: 1px solid rgba(24,22,31,.08); }
.bento-wide { grid-column: span 7; } .bento-tall { grid-column: span 5; grid-row: span 2; } .bento-standard { grid-column: span 3.5; } .bento-standard:nth-child(3) { grid-column: span 3; } .bento-standard:nth-child(4) { grid-column: span 4; } .bento-card:last-child { grid-column: span 7; }
.bento-violet { background: #e6dfff; } .bento-dark { background: #1c1923; color: #fff; } .bento-cream { background: #ede8e1; } .bento-blue { background: #dcefff; } .bento-coral { background: #ffded6; }
.bento-copy { position: relative; z-index: 2; max-width: 470px; }
.bento-copy > i { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.55); margin-bottom: 27px; }
.bento-dark .bento-copy > i { background: rgba(255,255,255,.08); }
.bento-copy small { display: block; margin-bottom: 8px; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: rgba(24,22,31,.5); }
.bento-dark .bento-copy small { color: rgba(255,255,255,.4); }
.bento-copy h3 { margin: 0; font-family: 'Space Grotesk Variable'; font-size: clamp(27px, 2.5vw, 38px); line-height: 1.02; letter-spacing: -.055em; }
.bento-copy p { max-width: 460px; margin: 13px 0 0; color: rgba(24,22,31,.6); font-size: 13px; line-height: 1.65; }
.bento-dark .bento-copy p { color: rgba(255,255,255,.48); }
.models-visual { position: absolute; right: 26px; bottom: 25px; width: 53%; display: grid; gap: 7px; }
.models-visual > div:not(.model-prompt) { min-height: 55px; padding: 8px 10px; border-radius: 13px; background: rgba(255,255,255,.68); display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; box-shadow: 0 10px 25px rgba(68,49,110,.08); backdrop-filter: blur(10px); }
.models-visual > div > i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--violet); color: #fff; font-style: normal; font-size: 8px; font-weight: 850; }
.models-visual > div:nth-child(2) > i { background: var(--coral); } .models-visual > div:nth-child(3) > i { background: var(--blue); }
.models-visual p { margin: 0; display: grid; gap: 2px; }
.models-visual strong { font-size: 8px; } .models-visual p span { color: #817987; font-size: 6px; }
.models-visual b { padding: 4px 6px; border-radius: 999px; background: #fff; color: #706978; font-size: 5.5px; }
.model-prompt { min-height: 41px; padding: 8px 11px; border-radius: 12px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 6px; background: #211e29; color: #fff; font-size: 6px; }
.model-prompt svg { color: #b4a4ff; } .model-prompt kbd { padding: 4px 6px; border-radius: 5px; background: rgba(255,255,255,.08); font-size: 5px; }
.project-visual { position: absolute; inset: auto 25px 28px; padding: 20px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); }
.project-visual-head { display: flex; justify-content: space-between; font-size: 8px; color: rgba(255,255,255,.55); }
.project-ring { position: relative; width: 165px; aspect-ratio: 1; margin: 30px auto 22px; }
.project-ring svg { width: 100%; transform: rotate(-90deg); }
.project-ring circle { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 9; }
.project-ring .ring-progress { stroke: var(--violet); stroke-dasharray: 301; stroke-dashoffset: 84; stroke-linecap: round; }
.project-ring div { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; }
.project-ring strong { font-family: 'Space Grotesk Variable'; font-size: 37px; letter-spacing: -.07em; } .project-ring span { font-size: 8px; color: rgba(255,255,255,.42); }
.project-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.project-stats div { padding: 10px 5px; border-radius: 10px; background: rgba(255,255,255,.055); display: grid; place-items: center; gap: 2px; }
.project-stats strong { font-size: 13px; } .project-stats span { color: rgba(255,255,255,.38); font-size: 6px; }
.project-alert { margin-top: 9px; padding: 10px; border-radius: 10px; background: rgba(124,92,255,.14); color: #c4b8ff; display: flex; gap: 7px; align-items: center; font-size: 7px; }
.files-visual { position: absolute; inset: auto 24px 28px; height: 180px; }
.file { position: absolute; width: 125px; height: 130px; padding: 17px; border-radius: 15px; background: rgba(255,255,255,.72); border: 1px solid rgba(24,22,31,.08); box-shadow: 0 15px 30px rgba(65,53,76,.11); display: grid; align-content: space-between; }
.file svg { width: 31px; height: 31px; } .file span { font-size: 8px; font-weight: 800; }
.file-one { left: 12px; top: 19px; transform: rotate(-8deg); } .file-two { left: 78px; top: 3px; transform: rotate(2deg); } .file-three { left: 145px; top: 21px; transform: rotate(9deg); }
.files-search { position: absolute; z-index: 5; left: 15px; right: 0; bottom: 0; height: 40px; border-radius: 11px; background: #fff; box-shadow: 0 10px 25px rgba(44,36,53,.1); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #7e7782; font-size: 7px; }
.connections-visual { position: absolute; inset: auto 16px 16px; height: 210px; }
.connection-hub { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 18px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 900; box-shadow: 0 15px 35px rgba(30,25,38,.22); }
.connections-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.connections-visual path { stroke: rgba(24,22,31,.17); stroke-width: 1.2; stroke-dasharray: 4 5; fill: none; }
.connection-node { position: absolute; z-index: 2; min-width: 82px; min-height: 42px; padding-inline: 10px; border-radius: 11px; display: flex; gap: 6px; justify-content: center; align-items: center; background: rgba(255,255,255,.7); box-shadow: 0 10px 20px rgba(45,66,88,.07); font-size: 7px; font-weight: 750; }
.c-1 { left: 0; top: 4px; } .c-2 { right: 0; top: 4px; } .c-3 { left: 0; bottom: 4px; } .c-4 { right: 0; bottom: 4px; }
.team-visual { position: absolute; width: 47%; right: 28px; bottom: 27px; display: grid; gap: 8px; }
.team-thread { min-height: 55px; padding: 9px 11px; border-radius: 13px; background: rgba(255,255,255,.68); display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; box-shadow: 0 10px 25px rgba(99,53,43,.06); }
.team-thread.offset { transform: translateX(-28px); }
.thread-avatar { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--coral); color: #fff; font-size: 7px; font-weight: 800; }
.thread-avatar.violet { background: var(--violet); } .thread-avatar.blue { background: var(--blue); }
.team-thread > div:nth-child(2) { display: grid; gap: 3px; }
.team-thread strong { font-size: 7.5px; } .team-thread span, .team-thread small { font-size: 5.8px; color: #837b84; }
.team-thread > svg { color: #3baa5f; }
.handoff-pill { justify-self: end; margin-top: 1px; padding: 7px 10px; border-radius: 999px; background: var(--ink); color: #fff; display: flex; gap: 6px; align-items: center; font-size: 6px; }

.workflow-section { padding-block: 145px; background: #ece7e0; }
.workflow-shell { position: relative; }
.workflow-intro { max-width: 760px; }
.workflow-intro h2 { margin-top: 28px; }
.workflow-intro p { max-width: 620px; margin: 25px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }
.workflow-layout { margin-top: 75px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.workflow-steps { display: grid; }
.workflow-steps button { padding: 20px 7px; border-top: 1px solid rgba(24,22,31,.14); background: transparent; display: grid; grid-template-columns: 34px 44px 1fr 32px; gap: 12px; align-items: start; text-align: left; cursor: pointer; transition: padding .25s, background .25s; }
.workflow-steps button:last-child { border-bottom: 1px solid rgba(24,22,31,.14); }
.workflow-steps button.active { padding: 24px 16px; border-radius: 18px; background: #fff; border-color: transparent; box-shadow: 0 14px 35px rgba(46,39,55,.08); }
.workflow-steps button > span { margin-top: 10px; color: #8c8590; font-size: 8px; }
.workflow-steps button > i { width: 39px; height: 39px; border-radius: 12px; display: grid; place-items: center; background: rgba(24,22,31,.05); }
.workflow-steps button.active > i { background: var(--violet); color: #fff; }
.workflow-steps button div { display: grid; gap: 6px; }
.workflow-steps button strong { font-family: 'Space Grotesk Variable'; font-size: 19px; letter-spacing: -.035em; }
.workflow-steps button p { margin: 0; max-height: 0; opacity: 0; overflow: hidden; color: #746e79; font-size: 11px; line-height: 1.55; transition: max-height .25s, opacity .25s; }
.workflow-steps button.active p { max-height: 80px; opacity: 1; }
.workflow-steps button > b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #9d96a0; }
.workflow-steps button.active > b { background: var(--ink); color: #fff; }
.workflow-orbit { position: relative; aspect-ratio: 1; max-width: 610px; margin-inline: auto; }
.orbit-ring { position: absolute; border: 1px solid rgba(24,22,31,.1); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ring-one { width: 34%; height: 34%; } .ring-two { width: 62%; height: 62%; } .ring-three { width: 90%; height: 90%; }
.orbit-core { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 110px; height: 110px; border-radius: 32px; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: 0 28px 60px rgba(24,22,31,.26); }
.orbit-core span { font-family: 'Space Grotesk Variable'; font-size: 26px; font-weight: 850; }
.orbit-node { position: absolute; z-index: 5; min-width: 125px; height: 52px; padding-inline: 12px; border-radius: 15px; border: 1px solid rgba(24,22,31,.1); background: rgba(255,255,255,.66); display: flex; gap: 8px; align-items: center; box-shadow: 0 12px 30px rgba(35,29,42,.07); backdrop-filter: blur(10px); }
.orbit-node span { font-size: 8px; font-weight: 750; }
.orbit-node.active { background: var(--violet); color: #fff; box-shadow: 0 18px 40px rgba(124,92,255,.25); }
.orbit-1 { left: 50%; top: 3%; transform: translateX(-50%); } .orbit-2 { right: 0; top: 50%; transform: translateY(-50%); } .orbit-3 { left: 50%; bottom: 3%; transform: translateX(-50%); } .orbit-4 { left: 0; top: 50%; transform: translateY(-50%); }
.workflow-orbit > svg { position: absolute; inset: 5%; width: 90%; height: 90%; animation: rotate 24s linear infinite; }
.workflow-orbit > svg path { fill: none; stroke: rgba(124,92,255,.28); stroke-width: 1.2; stroke-dasharray: 5 8; }
@keyframes rotate { to { transform: rotate(360deg); } }

.audience-section { padding-block: 150px; }
.audience-copy { display: grid; grid-template-columns: .45fr 1fr; gap: 60px; align-items: start; }
.use-case-grid { margin-top: 75px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.use-case { min-height: 145px; padding: 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; transition: background .25s, transform .25s; }
.use-case:hover { background: #fff; transform: translateY(-4px); }
.use-case > i { width: 42px; height: 42px; border-radius: 13px; background: #ebe6df; display: grid; place-items: center; }
.use-case span { font-family: 'Space Grotesk Variable'; font-size: 18px; font-weight: 650; letter-spacing: -.03em; }
.use-case > svg { color: #9a939d; }
.quote-card { margin-top: 110px; padding: 70px 8vw; border-radius: 34px; background: var(--violet); color: #fff; position: relative; overflow: hidden; }
.quote-card::after { content: ''; position: absolute; width: 410px; aspect-ratio: 1; border-radius: 50%; right: -90px; top: -100px; border: 70px solid rgba(255,255,255,.07); }
.quote-mark { font-family: Georgia, serif; font-size: 95px; line-height: .5; color: rgba(255,255,255,.3); }
.quote-card blockquote { position: relative; z-index: 2; max-width: 930px; margin: 25px 0 45px; font-family: 'Space Grotesk Variable'; font-size: clamp(34px, 4.5vw, 62px); line-height: 1.05; letter-spacing: -.055em; }
.quote-card > div:last-child { display: flex; gap: 13px; align-items: center; }
.quote-avatar { width: 42px; height: 42px; border-radius: 13px; background: #fff; color: var(--violet); display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.quote-card p { margin: 0; display: grid; gap: 3px; }
.quote-card p strong { font-size: 10px; } .quote-card p span { color: rgba(255,255,255,.62); font-size: 8px; }

.trust-section { padding-block: 140px; background: #fff; }
.trust-heading { display: grid; grid-template-columns: .45fr 1fr; gap: 60px; }
.trust-heading h2 { margin: 0; font-family: 'Space Grotesk Variable'; font-size: clamp(46px, 5vw, 72px); line-height: 1.02; letter-spacing: -.065em; }
.trust-heading p { max-width: 610px; margin: 24px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.trust-grid { margin-top: 70px; display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.trust-card { min-height: 270px; padding: 31px; border-radius: 24px; background: #f2efe9; }
.trust-card > i { width: 46px; height: 46px; border-radius: 14px; background: #fff; display: grid; place-items: center; }
.trust-card h3 { margin: 55px 0 12px; font-family: 'Space Grotesk Variable'; font-size: 22px; letter-spacing: -.04em; }
.trust-card p { margin: 0; color: #706a75; font-size: 13px; line-height: 1.65; }
.trust-banner { margin-top: 16px; min-height: 95px; padding-inline: 30px; border-radius: 24px; background: var(--ink); color: #fff; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; }
.trust-banner div { display: flex; justify-content: center; gap: 11px; align-items: center; min-height: 35px; border-right: 1px solid rgba(255,255,255,.12); }
.trust-banner div:last-child { border-right: 0; }
.trust-banner span { font-size: 11px; font-weight: 700; }

.pricing-section { padding-block: 155px; }
.pricing-heading { display: grid; grid-template-columns: .45fr 1fr; gap: 60px; }
.billing-toggle { width: fit-content; margin: 50px 0 30px auto; padding: 5px; border: 1px solid var(--line); border-radius: 14px; display: flex; background: #eeeae4; }
.billing-toggle button { min-height: 40px; padding: 0 15px; border-radius: 10px; background: transparent; font-size: 10px; font-weight: 750; cursor: pointer; }
.billing-toggle button.active { background: #fff; box-shadow: 0 6px 15px rgba(29,24,35,.08); }
.billing-toggle span { margin-left: 6px; color: var(--violet); font-size: 8px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: stretch; }
.price-card { position: relative; min-height: 650px; padding: 32px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.62); display: flex; flex-direction: column; }
.price-card.featured { background: #1c1923; color: #fff; border-color: #1c1923; transform: translateY(-12px); box-shadow: 0 30px 70px rgba(24,22,31,.18); }
.featured-label { position: absolute; top: 13px; right: 13px; padding: 7px 9px; border-radius: 999px; background: var(--violet); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.price-top > span { font-size: 8px; color: #89828e; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; }
.featured .price-top > span { color: rgba(255,255,255,.45); }
.price-top h3 { margin: 15px 0 9px; font-family: 'Space Grotesk Variable'; font-size: 32px; letter-spacing: -.055em; }
.price-top p { min-height: 66px; margin: 0; color: #716b76; font-size: 12px; line-height: 1.6; }
.featured .price-top p { color: rgba(255,255,255,.5); }
.price-value { margin: 32px 0 25px; display: flex; align-items: flex-start; }
.price-value > span { margin: 7px 4px 0 0; font-size: 16px; }
.price-value > strong { font-family: 'Space Grotesk Variable'; font-size: 64px; line-height: .9; letter-spacing: -.075em; }
.price-value div { align-self: flex-end; margin-left: 8px; display: grid; gap: 3px; }
.price-value b { font-size: 9px; } .price-value small { color: #8b8490; font-size: 7px; }
.featured .price-value small { color: rgba(255,255,255,.43); }
.price-card .button { width: 100%; }
.feature-rule { height: 1px; margin: 30px 0 25px; background: var(--line); }
.featured .feature-rule { background: rgba(255,255,255,.1); }
.price-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.price-card li { display: flex; gap: 10px; align-items: center; color: #625c67; font-size: 11px; }
.featured li { color: rgba(255,255,255,.68); }
.price-card li svg { flex: 0 0 auto; color: var(--violet); }
.featured li svg { color: #b4a4ff; }
.pricing-note { width: fit-content; margin: 28px auto 0; display: flex; align-items: center; gap: 9px; color: #706a75; font-size: 11px; }
.pricing-note p { margin: 0; } .pricing-note svg { color: var(--violet); }

.faq-section { padding-block: 100px 160px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; align-items: start; }
.faq-intro { position: sticky; top: 120px; }
.faq-intro h2 { margin-top: 30px; font-size: clamp(43px, 4.4vw, 65px); }
.faq-intro > p { max-width: 420px; margin: 23px 0 0; color: #716b76; font-size: 14px; line-height: 1.65; }
.text-arrow { margin-top: 25px; display: inline-flex; gap: 8px; align-items: center; font-size: 11px; font-weight: 780; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { width: 100%; padding: 26px 8px; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.faq-item > div { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; padding-right: 35px; }
.faq-item > div span { color: #918a95; font-size: 8px; }
.faq-item > div strong { font-family: 'Space Grotesk Variable'; font-size: 19px; letter-spacing: -.03em; }
.faq-item > svg { float: right; margin-top: -20px; }
.faq-item p { margin: 0 35px 0 46px; color: #6e6873; font-size: 13px; line-height: 1.7; overflow: hidden; }

.final-cta { min-height: 650px; padding: 95px 40px; border-radius: 42px; background: #1c1923; color: #fff; position: relative; overflow: hidden; display: grid; place-items: center; text-align: center; }
.cta-aura { position: absolute; border-radius: 50%; filter: blur(1px); }
.cta-aura.one { width: 520px; height: 520px; left: -190px; top: -220px; border: 90px solid rgba(124,92,255,.14); }
.cta-aura.two { width: 480px; height: 480px; right: -170px; bottom: -240px; border: 80px solid rgba(255,104,70,.12); }
.cta-content { position: relative; z-index: 3; max-width: 880px; }
.cta-kicker { width: fit-content; margin: 0 auto 28px; padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: flex; gap: 7px; align-items: center; color: rgba(255,255,255,.63); font-size: 8px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; }
.cta-content h2 { margin: 0; font-family: 'Space Grotesk Variable'; font-size: clamp(58px, 7vw, 105px); line-height: .91; letter-spacing: -.075em; font-weight: 570; }
.cta-content h2 em { color: #b5a6ff; font-style: normal; }
.cta-content > p { max-width: 680px; margin: 29px auto 0; color: rgba(255,255,255,.55); font-size: 16px; line-height: 1.7; }
.signup-form { max-width: 610px; margin: 34px auto 0; padding: 6px; border-radius: 17px; background: #fff; display: grid; grid-template-columns: 1fr auto; }
.signup-form input { min-width: 0; height: 52px; border: 0; outline: none; padding: 0 16px; background: transparent; color: var(--ink); font-size: 12px; }
.signup-form button { border-radius: 12px; background: var(--violet); color: #fff; padding: 0 19px; display: flex; gap: 9px; align-items: center; font-size: 10px; font-weight: 800; cursor: pointer; }
.cta-content > small { display: block; margin-top: 12px; color: rgba(255,255,255,.35); font-size: 8px; }
.cta-command { position: absolute; z-index: 2; bottom: 23px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.33); font-size: 8px; }
.cta-command span { padding: 6px 8px; border-radius: 7px; border: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; gap: 5px; }

.site-footer { margin-top: 24px; padding: 90px 0 25px; background: #17151e; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.8fr repeat(3, .65fr); gap: 60px; }
.footer-brand > p { max-width: 330px; margin: 21px 0 25px; color: rgba(255,255,255,.42); font-size: 12px; line-height: 1.65; }
.footer-status { width: fit-content; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.56); display: flex; gap: 7px; align-items: center; font-size: 7px; }
.footer-status i { width: 6px; height: 6px; border-radius: 50%; background: #51cd75; box-shadow: 0 0 0 4px rgba(81,205,117,.1); }
.footer-column { display: grid; align-content: start; gap: 14px; }
.footer-column strong { margin-bottom: 5px; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.38); }
.footer-column a { color: rgba(255,255,255,.67); font-size: 11px; }
.footer-column a:hover { color: #fff; }
.footer-bottom { margin-top: 80px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.3); font-size: 8px; }
.footer-bottom a { display: flex; gap: 6px; align-items: center; }
.footer-bottom a svg { transform: rotate(180deg); }

@media (max-width: 1160px) {
  .hero-grid { grid-template-columns: .9fr 1.1fr; }
  .hero-visual-wrap { min-height: 590px; }
  .floating-model { left: -10px; top: 28px; }
  .floating-context { right: -5px; bottom: 22px; }
  .product-showcase-grid { grid-template-columns: 315px 1fr; }
  .showcase-tabs button { grid-template-columns: 25px 36px 1fr 20px; }
  .bento-wide, .bento-card:last-child { grid-column: span 7; }
  .bento-tall { grid-column: span 5; }
  .bento-standard:nth-child(3) { grid-column: span 4; }
  .bento-standard:nth-child(4) { grid-column: span 3; }
}

@media (max-width: 980px) {
  .desktop-nav, .desktop-only { display: none; }
  .menu-button { display: inline-flex; }
  .hero { padding-top: 125px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .hero h1 { font-size: clamp(64px, 11vw, 100px); }
  .hero-visual-wrap { min-height: 680px; margin-top: 15px; }
  .desktop-frame { width: 92%; }
  .positioning { padding-block: 120px; }
  .section-heading-large, .trust-heading, .pricing-heading, .audience-copy { grid-template-columns: 1fr; gap: 28px; }
  .product-showcase-grid { grid-template-columns: 1fr; }
  .showcase-tabs { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .showcase-tabs button { min-height: 125px; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 15px; grid-template-columns: 30px 1fr 20px; }
  .showcase-tabs button .tab-number { display: none; }
  .showcase-tabs button.active { padding-left: 12px; background: rgba(255,255,255,.05); }
  .showcase-stage { margin-top: 20px; }
  .bento-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: auto; }
  .bento-card, .bento-wide, .bento-tall, .bento-standard, .bento-standard:nth-child(3), .bento-standard:nth-child(4), .bento-card:last-child { grid-column: span 1; grid-row: auto; }
  .bento-card { min-height: 460px; }
  .bento-tall { min-height: 650px; }
  .models-visual, .team-visual { width: calc(100% - 50px); }
  .workflow-layout { grid-template-columns: 1fr; }
  .workflow-orbit { width: 100%; order: -1; max-width: 580px; }
  .trust-grid, .pricing-grid { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
  .trust-banner { grid-template-columns: repeat(2,1fr); padding-block: 15px; gap: 10px; }
  .trust-banner div:nth-child(2) { border-right: 0; }
  .use-case-grid { grid-template-columns: repeat(2,1fr); }
  .faq-section { grid-template-columns: 1fr; gap: 55px; }
  .faq-intro { position: static; }
}

@media (max-width: 700px) {
  .section-shell { width: min(calc(100% - 28px), var(--max)); }
  .site-header { inset: 10px 0 auto; }
  .nav-shell { width: calc(100% - 20px); min-height: 58px; padding-left: 16px; }
  .wordmark { font-size: 20px; }
  .hero { padding-top: 105px; padding-bottom: 45px; }
  .hero h1 { margin-top: 21px; font-size: clamp(56px, 17vw, 78px); }
  .hero-copy > p { font-size: 16px; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .hero-proof { align-items: start; }
  .scroll-cue { display: none; }
  .hero-visual-wrap { min-height: 520px; width: 116%; margin-left: -8%; }
  .desktop-frame { width: 95%; border-radius: 14px; }
  .app-shell { grid-template-columns: 88px 1fr; }
  .app-sidebar { padding-inline: 6px; }
  .app-sidebar > button, .sidebar-label, .connected-list, .user-row span, .user-row > svg { display: none; }
  .project-name span, .project-nav span { display: none; }
  .project-name { justify-content: center; }
  .project-nav div { justify-content: center; }
  .user-row { grid-template-columns: 1fr; }
  .app-main { padding: 14px; }
  .app-toolbar h3 { font-size: 13px; }
  .online-dot { display: none; }
  .brief-grid { grid-template-columns: 1fr; }
  .status-card { display: none; }
  .focus-card { min-height: 125px; }
  .task-row { grid-template-columns: 17px 1fr; }
  .task-tag { display: none; }
  .floating-card { width: 175px; min-height: 60px; padding: 8px; }
  .float-icon { width: 29px; height: 29px; }
  .floating-model { left: 7px; top: 12px; }
  .floating-context { right: 0; bottom: 2px; }
  .provider-strip { grid-template-columns: 1fr; gap: 14px; padding: 18px 0; }
  .provider-label { padding-left: 20px; }
  .positioning { padding-block: 90px 105px; }
  .positioning-top { display: grid; gap: 12px; }
  .positioning-lines h2 { font-size: clamp(43px, 14vw, 66px); }
  .positioning-lines > div:nth-child(2) h2, .positioning-lines > div:nth-child(3) h2 { margin-left: 0; }
  .positioning-answer { width: 100%; grid-template-columns: 50px 1fr; gap: 18px; }
  .answer-mark { width: 46px; height: 46px; border-radius: 13px; }
  .product-section { padding-block: 95px 110px; border-radius: 0; }
  .section-heading-large h2, .workflow-intro h2, .audience-copy h2, .pricing-heading h2, .faq-intro h2, .trust-heading h2 { font-size: clamp(40px, 12vw, 58px); }
  .section-heading-large p, .pricing-heading p { font-size: 14px; }
  .showcase-tabs { grid-template-columns: 1fr; }
  .showcase-tabs button { min-height: 103px; }
  .showcase-stage { min-height: 460px; padding: 7px; }
  .showcase-screen { min-height: 445px; }
  .screen-header { grid-template-columns: 1fr 1fr; }
  .screen-header > span { display: none; }
  .command-layout { min-height: 403px; grid-template-columns: 70px 1fr; }
  .command-sidebar div span { display: none; }
  .command-sidebar div { justify-content: center; }
  .command-content { padding: 14px; }
  .command-topline button { display: none; }
  .command-cards { grid-template-columns: 1fr; }
  .command-cards > div:last-child, .command-bottom > div:last-child { display: none; }
  .command-bottom { grid-template-columns: 1fr; }
  .context-layout, .handoff-layout, .local-layout { min-height: 403px; padding: 14px; grid-template-columns: 1fr; }
  .package-card { display: none; }
  .handoff-layout { grid-template-rows: auto 38px auto; }
  .handoff-flow { height: 38px; }
  .handoff-flow::before { width: 120px; height: 1px; }
  .handoff-flow > i { display: none; }
  .handoff-targets { grid-template-columns: repeat(3,1fr); }
  .handoff-targets > div { min-height: 80px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .handoff-targets > div > svg { display: none; }
  .connection-controls { display: none; }
  .map-node { width: 83px; }
  .bento-section, .audience-section, .pricing-section { padding-block: 105px; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card { min-height: 440px; padding: 24px; }
  .bento-tall { min-height: 600px; }
  .models-visual, .team-visual { inset-inline: 20px; width: auto; }
  .files-visual { transform: scale(.9); transform-origin: left bottom; }
  .workflow-section { padding-block: 105px; }
  .workflow-intro p { font-size: 15px; }
  .workflow-layout { margin-top: 45px; gap: 35px; }
  .workflow-orbit { max-width: 390px; }
  .orbit-core { width: 78px; height: 78px; border-radius: 23px; }
  .orbit-node { min-width: 92px; height: 44px; padding-inline: 8px; }
  .orbit-node span { display: none; }
  .orbit-1 { top: 0; } .orbit-2 { right: -4px; } .orbit-3 { bottom: 0; } .orbit-4 { left: -4px; }
  .workflow-steps button { grid-template-columns: 27px 40px 1fr 28px; }
  .use-case-grid { grid-template-columns: 1fr; }
  .use-case { min-height: 105px; }
  .quote-card { margin-top: 70px; padding: 55px 28px; }
  .trust-section { padding-block: 100px; }
  .trust-grid { margin-top: 45px; }
  .trust-card { min-height: 230px; }
  .trust-card h3 { margin-top: 35px; }
  .trust-banner { grid-template-columns: 1fr; }
  .trust-banner div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 12px; }
  .trust-banner div:last-child { border-bottom: 0; }
  .billing-toggle { margin-left: 0; }
  .price-card { min-height: auto; padding: 27px; }
  .pricing-note { align-items: start; font-size: 10px; }
  .faq-section { padding-block: 70px 110px; }
  .faq-item { padding-block: 22px; }
  .faq-item > div strong { font-size: 17px; }
  .faq-item p { margin-left: 0; }
  .final-cta { min-height: 620px; padding: 75px 20px; border-radius: 28px; }
  .cta-content h2 { font-size: clamp(53px, 16vw, 78px); }
  .signup-form { grid-template-columns: 1fr; padding: 6px; gap: 5px; }
  .signup-form button { min-height: 50px; justify-content: center; }
  .cta-command { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 25px; }
  .footer-brand { grid-column: span 2; }
  .footer-bottom { gap: 15px; flex-wrap: wrap; }
  .footer-bottom span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.signup-success { max-width: 610px; min-height: 64px; margin: 34px auto 0; padding: 10px 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(255,255,255,.08); display: flex; gap: 13px; align-items: center; text-align: left; }
.signup-success > span { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: var(--lime); color: var(--ink); display: grid; place-items: center; }
.signup-success > div { display: grid; gap: 3px; }
.signup-success strong { font-size: 12px; }
.signup-success small { color: rgba(255,255,255,.48); font-size: 8px; }

/* Static HTML/GSAP implementation */
.scroll-progress { transform: scaleX(0); }
.lucide { width: 1em; height: 1em; flex: 0 0 auto; }
body.menu-open { overflow: hidden; }
.mobile-menu { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.provider-marquee { animation: provider-marquee 24s linear infinite; }
.marquee-mask:hover .provider-marquee { animation-play-state: paused; }
@keyframes provider-marquee { to { transform: translateX(-50%); } }
.desktop-frame { will-change: transform; }
.bento-card { transform-style: preserve-3d; will-change: transform; }
.orbit-node { cursor: pointer; transition: transform .35s ease, background .35s ease, color .35s ease, border-color .35s ease; }
.faq-item p { max-height: 0; opacity: 0; margin-top: 0; transition: max-height .45s ease, opacity .3s ease, margin-top .35s ease; }
.faq-item.open p { max-height: 240px; opacity: 1; margin-top: 18px; }
.faq-icon { float: right; margin-top: -20px; }
.showcase-screen { transition: background .3s ease; }
.handoff-flow > i { animation: handoff-particle 2.2s ease-in-out infinite; }
@keyframes handoff-particle { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(108px); opacity: 0; } }
.signup-success[hidden], .signup-form[hidden] { display: none; }
.menu-button, .mobile-menu-close, .showcase-tabs button, .workflow-steps button, .billing-toggle button, .faq-item { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
  .provider-marquee, .handoff-flow > i { animation: none !important; }
  .mobile-menu { transition: none; }
}

@media (min-width: 981px) {
  .bento-wide .bento-copy { max-width: 43%; }
  .bento-card:last-child .bento-copy { max-width: 47%; }
  .bento-standard { min-height: 500px; }
}

/* --------------------------------------------------------------------------
   LobeWork positioning + launch-tier revision
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

.brand-lockup { gap: 9px; letter-spacing: -.055em; }
.brand-lockup > img { width: 31px; height: 31px; border-radius: 9px; box-shadow: 0 7px 18px rgba(24,22,31,.12); }
.brand-lockup > span { display: inline-flex; align-items: center; }
.wordmark-inverted.brand-lockup > img { box-shadow: 0 7px 18px rgba(0,0,0,.28); }

.hero h1 { max-width: 720px; }
.hero-copy > p { max-width: 610px; }
.eyebrow-chip { max-width: 100%; }

.positioning-lines > div:nth-child(2) h2 { margin-left: 6vw; }
.positioning-lines > div:nth-child(3) h2 { margin-left: 13vw; max-width: 1100px; font-size: clamp(43px, 6.45vw, 92px); }
.answer-mark-image { width: 58px; height: 58px; border-radius: 17px; box-shadow: 0 17px 35px rgba(24,22,31,.16); }
.category-strip { margin-top: 95px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.category-strip article { min-height: 235px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 48px 1fr; gap: 19px; align-content: start; transition: background .28s ease, transform .28s ease; }
.category-strip article:hover { background: rgba(255,255,255,.7); transform: translateY(-5px); }
.category-strip article > i { width: 46px; height: 46px; border-radius: 14px; background: #ebe6df; display: grid; place-items: center; color: var(--ink); }
.category-strip article div { display: grid; align-content: start; }
.category-strip small { color: #8d8691; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.category-strip strong { margin-top: 13px; font-family: 'Space Grotesk Variable'; font-size: 21px; line-height: 1.12; letter-spacing: -.04em; }
.category-strip p { margin: 11px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }

.models-visual { width: min(54%, 490px); }
.model-prompt { line-height: 1.3; }

.connections-visual { overflow: visible; }
.connection-hub { padding: 0; background: transparent; box-shadow: 0 16px 34px rgba(24,22,31,.2); }
.connection-hub img { width: 100%; height: 100%; border-radius: inherit; }
.connection-node { cursor: default; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.connection-node:hover { z-index: 6; transform: translateY(-4px) scale(1.04); background: #fff; box-shadow: 0 16px 32px rgba(24,22,31,.13); }
.connection-node img, .connection-node > svg { width: 22px; height: 22px; object-fit: contain; }
.connection-node img { filter: none; }
.connection-tooltip { position: absolute; z-index: 8; left: 50%; bottom: -2px; transform: translate(-50%, 9px); min-width: 210px; padding: 9px 12px; border-radius: 10px; background: var(--ink); color: #fff; opacity: 0; pointer-events: none; text-align: center; font-size: 8px; font-weight: 720; transition: opacity .2s ease, transform .2s ease; }
.connection-node:hover ~ .connection-tooltip { opacity: 1; transform: translate(-50%, 0); }

/* Workflow visual: project-centered context loop */
.workflow-layout { grid-template-columns: .88fr 1.12fr; gap: 68px; }
.workflow-diagram { position: relative; width: 100%; max-width: 680px; min-height: 620px; margin-inline: auto; border: 1px solid rgba(24,22,31,.08); border-radius: 36px; background:
  radial-gradient(circle at 50% 43%, rgba(124,92,255,.14), transparent 25%),
  linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.42));
  box-shadow: 0 35px 85px rgba(46,39,55,.1); overflow: hidden; isolation: isolate; }
.workflow-diagram::before { content: ''; position: absolute; inset: 28px; border: 1px dashed rgba(24,22,31,.08); border-radius: 29px; pointer-events: none; }
.workflow-paths { position: absolute; z-index: 1; inset: 20px 0 auto; width: 100%; height: 520px; }
.flow-base, .flow-path { fill: none; stroke-linecap: round; }
.flow-base { stroke: rgba(24,22,31,.1); stroke-width: 2; stroke-dasharray: 5 8; }
.flow-path { stroke: var(--violet); stroke-width: 3.5; stroke-dasharray: 7 8; opacity: 0; filter: drop-shadow(0 0 8px rgba(124,92,255,.45)); transition: opacity .35s ease; }
.flow-particle { fill: var(--coral); opacity: 0; filter: drop-shadow(0 0 8px rgba(255,104,70,.75)); transition: opacity .3s ease; }
.workflow-diagram[data-active="0"] .path-0, .workflow-diagram[data-active="0"] .particle-0,
.workflow-diagram[data-active="1"] .path-1, .workflow-diagram[data-active="1"] .particle-1,
.workflow-diagram[data-active="2"] .path-2, .workflow-diagram[data-active="2"] .particle-2,
.workflow-diagram[data-active="3"] .path-3, .workflow-diagram[data-active="3"] .particle-3 { opacity: 1; }
.workflow-node { position: absolute; z-index: 4; width: 205px; min-height: 76px; padding: 12px 14px; border: 1px solid rgba(24,22,31,.1); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 15px 35px rgba(35,29,42,.08); backdrop-filter: blur(14px); display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; text-align: left; cursor: pointer; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.workflow-node:hover { transform: translateY(-4px); box-shadow: 0 22px 45px rgba(35,29,42,.13); }
.workflow-node.active { border-color: rgba(124,92,255,.48); background: #fff; box-shadow: 0 22px 50px rgba(124,92,255,.18); }
.node-icon { width: 40px; height: 40px; border-radius: 13px; background: #efebe6; display: grid; place-items: center; color: var(--ink); }
.workflow-node.active .node-icon { background: var(--violet); color: #fff; }
.workflow-node div { min-width: 0; display: grid; }
.workflow-node small { font-size: 6.5px; font-weight: 850; letter-spacing: .13em; color: #948d98; }
.workflow-node strong { margin-top: 5px; font-family: 'Space Grotesk Variable'; font-size: 12px; line-height: 1.2; letter-spacing: -.025em; }
.node-open { left: 24px; top: 55px; }
.node-route { right: 24px; top: 55px; }
.node-capture { right: 24px; top: 340px; }
.node-handoff { left: 24px; top: 340px; }
.provider-dots { display: flex; margin-top: 7px; }
.provider-dots i { width: 19px; height: 19px; margin-left: -4px; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; font-style: normal; font-size: 6px; font-weight: 900; }
.provider-dots i:first-child { margin-left: 0; background: #7258df; }
.provider-dots i:nth-child(2) { background: var(--coral); }
.provider-dots i:nth-child(3) { background: var(--blue); }
.project-brain { position: absolute; z-index: 5; left: 50%; top: 255px; transform: translate(-50%,-50%); width: 170px; height: 170px; border-radius: 50%; background: #18161f; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 35px 70px rgba(24,22,31,.28); }
.project-brain img { position: relative; z-index: 2; width: 52px; height: 52px; border-radius: 15px; }
.project-brain small, .project-brain strong, .project-brain span { position: relative; z-index: 2; }
.project-brain small { margin-top: 11px; color: rgba(255,255,255,.42); font-size: 6px; font-weight: 850; letter-spacing: .15em; }
.project-brain strong { margin-top: 5px; font-family: 'Space Grotesk Variable'; font-size: 16px; letter-spacing: -.035em; }
.project-brain span { margin-top: 4px; color: rgba(255,255,255,.5); font-size: 7px; }
.brain-ring { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; animation: brainPulse 3.2s ease-in-out infinite; }
.brain-ring.ring-a { inset: -18px; }
.brain-ring.ring-b { inset: -38px; animation-delay: .7s; }
.workflow-detail { position: absolute; z-index: 7; inset: auto 28px 25px; min-height: 104px; padding: 18px 20px 18px 23px; border-radius: 20px; background: #fff; box-shadow: 0 17px 42px rgba(35,29,42,.1); display: grid; grid-template-columns: 1fr; align-content: center; }
.workflow-detail > span { color: var(--violet); font-size: 7px; font-weight: 850; letter-spacing: .14em; }
.workflow-detail > strong { margin-top: 6px; font-family: 'Space Grotesk Variable'; font-size: 18px; line-height: 1.1; letter-spacing: -.035em; }
.workflow-detail p { margin: 7px 0 0; max-width: 560px; color: var(--ink-soft); font-size: 9px; line-height: 1.55; }
@keyframes brainPulse { 0%,100% { transform: scale(.96); opacity: .35; } 50% { transform: scale(1.04); opacity: .78; } }

/* Interactive use-case workflows */
.use-case { appearance: none; width: 100%; text-align: left; background: transparent; cursor: pointer; }
.use-case > b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #928b96; transition: transform .25s ease, background .25s ease, color .25s ease; }
.use-case:hover > b, .use-case.active > b { background: var(--ink); color: #fff; }
.use-case.active { background: #fff; transform: translateY(-4px); }
.use-case.active > b { transform: rotate(45deg); }
.use-case-panel { margin-top: 18px; padding: 35px; border-radius: 27px; background: #1c1923; color: #fff; box-shadow: 0 30px 70px rgba(24,22,31,.18); }
.use-case-panel-head { display: flex; justify-content: space-between; gap: 25px; align-items: start; }
.use-case-panel-head small { color: rgba(255,255,255,.42); font-size: 8px; font-weight: 850; letter-spacing: .15em; }
.use-case-panel h3 { margin: 8px 0 0; font-family: 'Space Grotesk Variable'; font-size: clamp(29px,3vw,43px); line-height: 1.05; letter-spacing: -.05em; }
.use-case-panel-head button { flex: 0 0 auto; width: 43px; height: 43px; border-radius: 14px; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; }
.use-case-panel > p { max-width: 780px; margin: 18px 0 0; color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.7; }
.use-case-flow { margin-top: 31px; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.use-case-flow .flow-step { position: relative; min-height: 118px; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(255,255,255,.045); display: grid; align-content: space-between; }
.use-case-flow .flow-step:not(:last-child)::after { content: '→'; position: absolute; right: -11px; top: 50%; z-index: 4; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--violet); display: grid; place-items: center; color: #fff; font-size: 10px; }
.flow-step span { color: var(--coral); font-size: 7px; font-weight: 850; letter-spacing: .14em; }
.flow-step strong { font-family: 'Space Grotesk Variable'; font-size: 15px; line-height: 1.25; letter-spacing: -.025em; }
.use-case-result { margin-top: 15px; padding: 16px 18px; border-radius: 16px; background: var(--violet); display: flex; gap: 12px; align-items: center; }
.use-case-result p { margin: 0; display: grid; gap: 3px; }
.use-case-result small { color: rgba(255,255,255,.62); font-size: 7px; font-weight: 850; letter-spacing: .14em; }
.use-case-result strong { font-size: 12px; }

/* Two-tier pricing */
.pricing-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 980px); margin-inline: auto; gap: 22px; }
.pricing-grid-two .price-card { min-height: 690px; padding: 39px; }
.pricing-grid-two .price-card.featured { transform: translateY(-14px); }
.launch-pricing-callout { width: min(100%, 980px); margin: 28px auto 0; padding: 19px 22px; border: 1px solid rgba(124,92,255,.25); border-radius: 16px; background: linear-gradient(90deg, rgba(124,92,255,.08), rgba(255,104,70,.06)); display: grid; grid-template-columns: max-content 1fr; gap: 24px; align-items: center; }
.launch-pricing-callout span { color: var(--violet); font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.launch-pricing-callout p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }

@media (max-width: 1020px) {
  .category-strip { grid-template-columns: 1fr; }
  .category-strip article { min-height: auto; }
  .workflow-diagram { min-height: 640px; }
  .pricing-grid-two { grid-template-columns: 1fr; max-width: 680px; }
  .pricing-grid-two .price-card.featured { transform: none; }
}

@media (max-width: 760px) {
  .brand-lockup > img { width: 29px; height: 29px; }
  .hero h1 { font-size: clamp(56px, 17vw, 78px); }
  .positioning-lines > div:nth-child(3) h2 { margin-left: 0; font-size: clamp(39px, 12vw, 59px); }
  .category-strip { margin-top: 65px; }
  .category-strip article { padding: 24px; grid-template-columns: 42px 1fr; }
  .models-visual { width: calc(100% - 32px); }
  .workflow-diagram { min-height: 710px; border-radius: 27px; }
  .workflow-paths { display: none; }
  .workflow-diagram::before { inset: 18px; }
  .project-brain { top: 245px; width: 142px; height: 142px; }
  .workflow-node { width: calc(50% - 32px); min-height: 94px; grid-template-columns: 1fr; align-content: start; }
  .workflow-node .node-icon { width: 34px; height: 34px; }
  .node-open { left: 18px; top: 35px; }
  .node-route { right: 18px; top: 35px; }
  .node-capture { right: 18px; top: 370px; }
  .node-handoff { left: 18px; top: 370px; }
  .workflow-detail { inset: auto 18px 18px; min-height: 145px; }
  .use-case-panel { padding: 25px; }
  .use-case-flow { grid-template-columns: 1fr; }
  .use-case-flow .flow-step { min-height: 88px; }
  .use-case-flow .flow-step:not(:last-child)::after { content: '↓'; right: 20px; top: auto; bottom: -16px; }
  .pricing-grid-two .price-card { min-height: auto; padding: 28px; }
  .launch-pricing-callout { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .brain-ring, .flow-particle { animation: none !important; }
}

section[id] { scroll-margin-top: 105px; }
@media (max-width: 1020px) {
  .workflow-layout { grid-template-columns: minmax(0, 1fr); gap: 45px; }
  .workflow-steps, .workflow-diagram { width: 100%; min-width: 0; }
}
@media (max-width: 760px) {
  .workflow-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
  .workflow-steps { overflow: hidden; }
  .workflow-steps button { width: 100%; min-width: 0; }
  .workflow-diagram { width: 100%; max-width: 100%; min-width: 0; }
}
.connection-node { font: inherit; color: inherit; }
.connection-node:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* V3 commercial release refinements */
.release-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.release-actions .button { min-width: 160px; }
.release-secondary { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); box-shadow: none; }
.release-secondary:hover { background: rgba(255,255,255,.14); box-shadow: none; }
.release-meta { margin: 24px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.release-meta span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: rgba(255,255,255,.7); font-size: 9px; font-weight: 700; }
.release-meta svg { width: 13px; }
.footer-grid-v3 { grid-template-columns: 1.45fr .8fr .9fr .9fr; }
.footer-chat-link { padding: 0; display: inline-flex; align-items: center; gap: 7px; background: transparent; color: rgba(255,255,255,.58); font-size: 12px; cursor: pointer; text-align: left; }
.footer-chat-link:hover { color: #fff; }
.footer-chat-link svg { width: 14px; }
.support-launcher { position: fixed; z-index: 220; right: 22px; bottom: 22px; min-height: 52px; padding: 6px 16px 6px 6px; border: 1px solid rgba(24,22,31,.12); border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 18px 50px rgba(35,27,52,.2); backdrop-filter: blur(18px); display: flex; align-items: center; gap: 10px; cursor: pointer; }
.support-launcher span { width: 40px; height: 40px; border-radius: 13px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.support-launcher span svg { width: 19px; }
.support-launcher b { font-size: 11px; }
.support-panel { position: fixed; z-index: 260; right: 22px; bottom: 86px; width: min(390px, calc(100vw - 28px)); max-height: min(650px, calc(100vh - 120px)); display: grid; grid-template-rows: auto minmax(180px,1fr) auto auto auto; border: 1px solid rgba(24,22,31,.13); border-radius: 24px; background: rgba(250,248,244,.97); box-shadow: 0 35px 100px rgba(26,20,40,.3); backdrop-filter: blur(24px); overflow: hidden; transform: translateY(18px) scale(.98); opacity: 0; pointer-events: none; transition: .25s ease; }
.support-panel.is-open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.support-panel-head { padding: 15px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.support-panel-head > div { display: flex; align-items: center; gap: 10px; }
.support-mark { width: 38px; height: 38px; border-radius: 12px; background: #fff; box-shadow: 0 8px 25px rgba(24,22,31,.09); display: grid; place-items: center; }
.support-mark img { width: 24px; }
.support-panel-head p { margin: 0; display: grid; gap: 2px; }
.support-panel-head strong { font-size: 12px; }
.support-panel-head small { color: var(--ink-soft); font-size: 8px; }
.support-panel-head button { width: 36px; height: 36px; border-radius: 11px; background: #ece8e2; display: grid; place-items: center; cursor: pointer; }
.support-messages { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
.support-message { max-width: 88%; padding: 11px 12px; border-radius: 15px; font-size: 11px; line-height: 1.5; }
.support-message.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.support-message.user { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.support-message a { color: var(--violet); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.support-prompts { padding: 0 14px 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.support-prompts button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #5f5a67; font-size: 8px; cursor: pointer; }
.support-form { margin: 0 12px 10px; padding: 5px 5px 5px 12px; border: 1px solid var(--line); border-radius: 15px; background: #fff; display: grid; grid-template-columns: 1fr 38px; gap: 7px; }
.support-form input { min-width: 0; border: 0; outline: 0; background: transparent; font-size: 11px; }
.support-form button { width: 38px; height: 38px; border-radius: 11px; background: var(--violet); color: #fff; display: grid; place-items: center; cursor: pointer; }
.support-escalation { padding: 10px 14px 13px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft); font-size: 8px; }
.support-escalation a { color: var(--ink); font-weight: 800; }
.brand-lockup img { width: 31px; height: 31px; margin-right: 9px; }
@media (max-width: 760px) {
  .footer-grid-v3 { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .support-launcher { right: 14px; bottom: 14px; padding-right: 8px; }
  .support-launcher b { display: none; }
  .support-panel { right: 14px; bottom: 72px; }
  .release-meta { display: grid; }
}
@media (max-width: 520px) { .footer-grid-v3 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   V4 product-truth refinements
   -------------------------------------------------------------------------- */

/* Hero provider marks replace ambiguous avatar dots while preserving trust copy. */
.provider-proof-logos { display: flex; align-items: center; }
.provider-proof-logos span { position: relative; width: 36px; height: 36px; margin-left: -7px; border: 3px solid var(--paper); border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(24,22,31,.08); transition: transform .24s ease, z-index .24s ease; }
.provider-proof-logos span:first-child { margin-left: 0; }
.provider-proof-logos span:hover { z-index: 4; transform: translateY(-4px) rotate(-2deg); }
.provider-proof-logos img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }

/* Shared micro product surface system gives the bento visuals one language. */
.bento-product-surface { border: 1px solid rgba(24,22,31,.09); box-shadow: 0 22px 45px rgba(50,39,70,.10); backdrop-filter: blur(14px); }
.micro-ui-head { min-height: 34px; padding: 0 10px; border-bottom: 1px solid rgba(24,22,31,.08); display: grid !important; grid-template-columns: 48px 1fr auto !important; align-items: center; gap: 7px; background: rgba(255,255,255,.35) !important; border-radius: 0 !important; box-shadow: none !important; }
.micro-ui-head > span { display: flex; gap: 4px; }
.micro-ui-head > span i { width: 5px !important; height: 5px !important; border-radius: 50% !important; background: rgba(24,22,31,.18) !important; }
.micro-ui-head > span i:nth-child(2) { background: var(--coral) !important; }
.micro-ui-head strong { font-size: 7px !important; letter-spacing: -.01em; }
.micro-ui-head small { justify-self: end; color: rgba(24,22,31,.44); font-size: 5.7px; }

/* More room between the models message and the product panel. */
.bento-models { min-height: 435px; }
.bento-models .bento-copy { max-width: 40%; }
.models-visual { right: 25px; bottom: 24px; width: min(55%, 505px); gap: 0; overflow: hidden; border-radius: 18px; background: rgba(255,255,255,.35); }
.models-visual > div:not(.model-prompt) { min-height: 58px; padding: 9px 11px; border-radius: 0; border-bottom: 1px solid rgba(24,22,31,.06); box-shadow: none; backdrop-filter: none; }
.models-visual > .micro-ui-head { min-height: 35px; padding: 0 11px; }
.models-visual > .model-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; background: rgba(255,255,255,.72); }
.models-visual > .model-row > i { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; background: transparent !important; }
.models-visual > .model-row > i img { width: 100%; height: 100%; object-fit: cover; }
.models-visual .model-row p span { font-size: 5.8px; }
.models-visual .model-prompt { margin: 8px; min-height: 43px; }

/* A live node map replaces the generic progress ring. */
.bento-projects { min-height: 830px; }
.bento-projects .bento-copy { max-width: 100%; }
.project-pulse-rail { position: absolute; z-index: 3; top: 252px; left: 31px; right: 31px; min-height: 64px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.project-pulse-rail > div { min-width: 0; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.045); display: grid; grid-template-columns: 29px 1fr; gap: 8px; align-items: center; box-shadow: 0 14px 30px rgba(0,0,0,.12); backdrop-filter: blur(12px); }
.project-pulse-rail span { width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; background: rgba(124,92,255,.16); color: #b8a4ff; }
.project-pulse-rail span svg { width: 14px; height: 14px; }
.project-pulse-rail p { min-width: 0; margin: 0; display: grid; line-height: 1.1; }
.project-pulse-rail strong { color: rgba(255,255,255,.92); font-size: 8px; white-space: nowrap; }
.project-pulse-rail small { margin-top: 3px; color: rgba(255,255,255,.38); font-size: 5.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-map-visual { position: absolute; left: 24px; right: 24px; top: 330px; bottom: 25px; height: auto; display: grid; grid-template-rows: 40px minmax(0,1fr) 50px; border-radius: 20px; overflow: hidden; background: linear-gradient(155deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); border-color: rgba(255,255,255,.10); box-shadow: 0 28px 55px rgba(0,0,0,.19); }
.project-map-head { color: rgba(255,255,255,.76); border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.035) !important; }
.project-map-head > span i { background: rgba(255,255,255,.18) !important; }
.project-map-head > span i:nth-child(2) { background: var(--coral) !important; }
.project-map-head small { display: inline-flex; gap: 5px; align-items: center; color: rgba(255,255,255,.46); }
.project-map-head small b { width: 5px; height: 5px; border-radius: 50%; background: #4bd473; box-shadow: 0 0 12px rgba(75,212,115,.7); animation: project-live-pulse 1.8s ease-in-out infinite; }
.project-map-canvas { position: relative; min-height: 0; height: auto; }
.project-map-lines { position: absolute; inset: 18px 13px 0; width: calc(100% - 26px); height: calc(100% - 18px); overflow: visible; }
.map-edge { fill: none; stroke: rgba(188,177,255,.25); stroke-width: 1.4; stroke-dasharray: 5 7; animation: project-edge-flow 9s linear infinite; }
.map-edge.edge-files, .map-edge.edge-output { animation-direction: reverse; animation-duration: 11s; }
.map-particle { fill: #9c80ff; filter: drop-shadow(0 0 7px rgba(156,128,255,.9)); }
.project-map-node { position: absolute; z-index: 3; min-width: 90px; min-height: 58px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.055); display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.14); backdrop-filter: blur(13px); animation: project-node-float 4.6s ease-in-out infinite; }
.project-map-node > span { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.08); color: #bbaaFF; display: grid; place-items: center; }
.project-map-node > span svg { width: 15px; height: 15px; }
.project-map-node strong { align-self: end; font-size: 7px; line-height: 1.15; color: rgba(255,255,255,.92); }
.project-map-node small { align-self: start; color: rgba(255,255,255,.39); font-size: 5.6px; }
.project-map-node.map-center { left: 50%; top: 50%; transform: translate(-50%,-50%); width: 128px; min-height: 76px; grid-template-columns: 42px 1fr; border-color: rgba(160,135,255,.48); background: linear-gradient(145deg, rgba(124,92,255,.33), rgba(124,92,255,.12)); box-shadow: 0 22px 45px rgba(91,62,206,.32); animation: project-center-breathe 2.8s ease-in-out infinite; }
.project-map-node.map-center > span { width: 42px; height: 42px; border-radius: 13px; background: transparent; }
.project-map-node.map-center img { width: 42px; height: 42px; border-radius: 13px; }
.map-goal { left: 5%; top: 4%; }
.map-files { right: 4%; top: 4%; animation-delay: -.8s; }
.map-tasks { left: 3%; bottom: 7%; animation-delay: -1.6s; }
.map-output { right: 3%; bottom: 7%; animation-delay: -2.4s; }
.map-decision { left: 2%; top: 43%; animation-delay: -.4s; }
.map-prompt { right: 2%; top: 43%; animation-delay: -2s; }
.project-map-status { min-height: 50px; padding: 0 14px; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; align-items: center; background: rgba(124,92,255,.10); }
.project-map-status span { display: flex; align-items: center; gap: 7px; color: #bfaeff; font-size: 6px; text-transform: uppercase; letter-spacing: .1em; }
.project-map-status strong { color: rgba(255,255,255,.66); font-size: 6px; }
@keyframes project-edge-flow { to { stroke-dashoffset: -90; } }
@keyframes project-node-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes project-center-breathe { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.035); } }
@keyframes project-live-pulse { 0%,100% { opacity: .45; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.2); } }

/* Files now resembles the actual Files & Artifacts workspace. */
.bento-files { min-height: 530px; }
.files-visual { left: 22px; right: 22px; bottom: 22px; height: 245px; overflow: hidden; border-radius: 18px; background: rgba(255,255,255,.68); }
.files-toolbar { height: 36px; padding: 0 9px; border-bottom: 1px solid rgba(24,22,31,.08); display: flex; align-items: center; gap: 6px; }
.files-toolbar b, .files-toolbar span { padding: 5px 7px; border-radius: 7px; font-size: 5.8px; }
.files-toolbar b { background: #eee8ff; color: var(--violet); }
.files-toolbar i { margin-left: auto; width: 24px; height: 24px; border-radius: 7px; background: #fff; display: grid; place-items: center; color: #89818d; }
.files-toolbar i svg { width: 12px; }
.files-mini-layout { height: 174px; display: grid; grid-template-columns: 34% 1fr; }
.files-mini-tree { padding: 10px 8px; border-right: 1px solid rgba(24,22,31,.08); display: grid; align-content: start; gap: 5px; }
.files-mini-tree strong { margin-bottom: 3px; font-size: 6.5px; }
.files-mini-tree span { min-height: 22px; padding: 0 6px; border-radius: 6px; display: flex; gap: 5px; align-items: center; color: #716a76; font-size: 5.3px; white-space: nowrap; overflow: hidden; }
.files-mini-tree span.active { background: #f0ebff; color: #6744db; font-weight: 800; }
.files-mini-tree svg { width: 10px; }
.files-mini-grid { padding: 9px; display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.files-mini-grid > div { padding: 8px; border: 1px solid rgba(24,22,31,.09); border-radius: 9px; background: rgba(255,255,255,.8); display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; gap: 2px 6px; align-items: center; }
.files-mini-grid svg { grid-row: 1 / span 2; width: 20px; color: var(--violet); }
.files-mini-grid strong { font-size: 5.7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.files-mini-grid small { color: #8a838e; font-size: 4.8px; }

/* Existing connection and handoff panels now share the same product-surface depth. */
.connections-visual { padding: 34px 9px 8px; border-radius: 18px; background: rgba(255,255,255,.28); border: 1px solid rgba(24,22,31,.07); box-shadow: 0 20px 40px rgba(52,72,93,.09); }
.team-visual { padding: 34px 9px 9px; border-radius: 18px; background: rgba(255,255,255,.25); border: 1px solid rgba(24,22,31,.07); box-shadow: 0 20px 40px rgba(94,52,42,.09); }
.connections-visual::before, .team-visual::before { position: absolute; left: 12px; right: 12px; top: 0; height: 31px; border-bottom: 1px solid rgba(24,22,31,.07); display: flex; align-items: center; color: rgba(24,22,31,.46); font-size: 6px; font-weight: 800; letter-spacing: .03em; }
.connections-visual::before { content: 'Connected tools · Atlas launch'; }
.team-visual::before { content: 'Handoff activity · Atlas launch'; }

/* The support launcher is unmistakably LobeWork. */
.support-launcher span { padding: 0; overflow: hidden; background: transparent; box-shadow: 0 7px 18px rgba(24,22,31,.17); }
.support-launcher span img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Section 02 product screens now use a faithful miniature of the desktop app. */
.product-app-shell { min-height: 458px; display: grid; grid-template-columns: 142px 1fr; background: #f4f6fa; }
.product-mini-sidebar { padding: 13px 9px; border-right: 1px solid #d9deea; background: #fbfcff; display: grid; align-content: start; gap: 3px; }
.product-mini-logo { width: 30px; height: 30px; margin-bottom: 6px; border-radius: 9px; overflow: hidden; }
.product-mini-logo img { width: 100%; height: 100%; }
.product-mini-sidebar > small { margin: 7px 5px 3px; color: #9299aa; font-size: 5px; font-weight: 900; letter-spacing: .13em; }
.product-mini-sidebar > div { min-height: 24px; padding: 0 6px; border-radius: 7px; display: flex; gap: 6px; align-items: center; color: #596173; font-size: 5.8px; font-weight: 650; }
.product-mini-sidebar > div.active { background: #efeaff; color: #6e4ee6; }
.product-mini-sidebar svg { width: 11px; height: 11px; }
.product-mini-main { min-width: 0; padding: 12px; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; }
.product-mini-title { min-height: 57px; padding: 10px 12px; border: 1px solid #d8deea; border-radius: 12px; background: #fff; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 8px 20px rgba(35,46,68,.06); }
.product-mini-title h4 { margin: 0; font-family: 'Space Grotesk Variable'; font-size: 15px; letter-spacing: -.045em; }
.product-mini-title p { margin: 3px 0 0; color: #737b8d; font-size: 5.8px; }
.product-mini-title button { min-height: 27px; padding: 0 9px; border-radius: 8px; background: var(--ink); color: #fff; display: flex; gap: 5px; align-items: center; font-size: 5.6px; font-weight: 800; }
.product-mini-title button svg { width: 10px; }
.product-mini-toolbar { min-height: 37px; padding: 5px 7px; border: 1px solid #d8deea; border-radius: 10px; background: #fff; display: flex; gap: 5px; align-items: center; }
.product-mini-toolbar > b, .product-mini-toolbar > span { padding: 5px 8px; border-radius: 7px; font-size: 5.3px; }
.product-mini-toolbar > b { background: #eee8ff; color: #6d48e5; }
.product-mini-toolbar label { margin-left: 5px; min-height: 25px; flex: 1; padding: 0 8px; border: 1px solid #d8deea; border-radius: 8px; display: flex; gap: 6px; align-items: center; color: #8b92a2; font-size: 5.2px; }
.product-mini-toolbar label svg { width: 10px; }
.product-file-workspace { min-height: 315px; display: grid; grid-template-columns: 145px 1fr; gap: 10px; }
.product-folder-tree { padding: 11px; border: 1px solid #d8deea; border-radius: 11px; background: #fff; display: grid; align-content: start; gap: 6px; }
.product-folder-tree strong { font-size: 7px; }
.product-folder-tree > small { margin-top: -3px; color: #8991a1; font-size: 5px; }
.product-folder-tree span { min-height: 26px; padding: 0 7px; border-radius: 7px; display: flex; gap: 6px; align-items: center; color: #687184; font-size: 5.4px; white-space: nowrap; overflow: hidden; }
.product-folder-tree span.active { background: #f0ebff; color: #6e4ee6; font-weight: 800; }
.product-folder-tree svg { width: 11px; color: #8d70f7; }
.product-file-grid { padding: 10px; border: 1px solid #d8deea; border-radius: 11px; background: #fff; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.product-dropzone { grid-column: 1 / -1; min-height: 65px; padding: 10px; border: 1px dashed #cbd2df; border-radius: 9px; background: #fafbfe; }
.product-dropzone small { color: #848c9e; font-size: 4.8px; font-weight: 900; letter-spacing: .14em; }
.product-dropzone strong { display: block; margin-top: 4px; font-size: 6.3px; }
.product-dropzone p { margin: 3px 0 0; color: #858d9d; font-size: 5px; }
.product-file-card { min-height: 75px; padding: 9px; border: 1px solid #d8deea; border-radius: 9px; display: grid; grid-template-columns: 25px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 7px; }
.product-file-card svg { grid-row: 1 / span 2; width: 22px; color: #8d70f7; }
.product-file-card strong { font-size: 5.8px; }
.product-file-card small { color: #8b92a2; font-size: 4.7px; }

.context-app-grid, .handoff-app-grid, .settings-app-grid { min-height: 385px; display: grid; grid-template-columns: 1.05fr .85fr; gap: 10px; }
.context-source-panel, .context-package-preview, .handoff-package-card, .handoff-destination-list, .settings-panel, .connection-summary { padding: 12px; border: 1px solid #d8deea; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px rgba(35,46,68,.05); }
.mini-panel-head { margin-bottom: 9px; display: flex; justify-content: space-between; }
.mini-panel-head strong { font-size: 7px; }
.mini-panel-head small { color: #8b92a2; font-size: 5px; }
.context-source-panel label { min-height: 48px; padding: 8px 6px; border-top: 1px solid #edf0f5; display: grid; grid-template-columns: 15px 20px 1fr auto; align-items: center; column-gap: 6px; font-size: 5.8px; font-weight: 750; }
.context-source-panel label input { accent-color: var(--violet); }
.context-source-panel label > i svg { width: 13px; color: #7959e9; }
.context-source-panel label small { color: #8b92a2; font-size: 4.8px; font-weight: 500; }
.context-package-preview { display: grid; align-content: center; justify-items: start; background: linear-gradient(145deg,#f2edff,#fff); }
.package-preview-icon { width: 43px; height: 43px; border-radius: 13px; background: var(--violet); color: #fff; display: grid; place-items: center; }
.context-package-preview > small { margin-top: 13px; color: #857c91; font-size: 5px; font-weight: 900; letter-spacing: .13em; }
.context-package-preview h4 { margin: 8px 0 0; font-family: 'Space Grotesk Variable'; font-size: 16px; }
.context-package-preview p { margin: 8px 0 0; color: #737b8d; font-size: 5.5px; line-height: 1.6; }
.context-package-preview > div { margin-top: 12px; display: flex; gap: 5px; }
.context-package-preview > div span { padding: 5px 6px; border-radius: 999px; background: rgba(124,92,255,.1); color: #6e4ee6; font-size: 4.8px; }
.context-package-preview button { margin-top: 13px; min-height: 29px; padding: 0 10px; border-radius: 8px; background: var(--ink); color: #fff; display: flex; gap: 6px; align-items: center; font-size: 5.5px; }

.handoff-app-grid { grid-template-columns: .9fr 1.1fr; }
.handoff-doc-lines { margin-top: 20px; display: grid; gap: 7px; }
.handoff-doc-lines i { height: 7px; border-radius: 999px; background: #eceff5; }
.handoff-doc-lines i:nth-child(2) { width: 78%; } .handoff-doc-lines i:nth-child(3) { width: 92%; } .handoff-doc-lines i:nth-child(4) { width: 58%; }
.handoff-tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 5px; }
.handoff-tags span { padding: 5px 7px; border-radius: 999px; background: #eee8ff; color: #704fe6; font-size: 4.8px; }
.handoff-owner { margin-top: 18px; min-height: 43px; padding: 7px; border-radius: 9px; background: #f7f8fb; display: flex; gap: 8px; align-items: center; }
.handoff-owner p { margin: 0; display: grid; }
.handoff-owner strong { font-size: 5.7px; } .handoff-owner small { color: #8b92a2; font-size: 4.8px; }
.handoff-destination-list { display: grid; align-content: start; gap: 7px; }
.handoff-destination-list > div:not(.handoff-success) { min-height: 59px; padding: 8px; border: 1px solid #e4e8f0; border-radius: 10px; display: grid; grid-template-columns: 37px 1fr auto; align-items: center; gap: 8px; }
.handoff-destination-list img, .destination-lw { width: 37px; height: 37px; border-radius: 11px; object-fit: cover; }
.destination-lw img { width: 100%; height: 100%; }
.handoff-destination-list p { margin: 0; display: grid; }
.handoff-destination-list strong { font-size: 6px; } .handoff-destination-list small { color: #8b92a2; font-size: 4.8px; }
.handoff-destination-list > div > svg { width: 13px; color: #38ad61; }
.handoff-success { min-height: 35px; padding: 8px; border-radius: 9px; background: #eee8ff; color: #6c4be4; display: flex; gap: 6px; align-items: center; font-size: 5px; font-weight: 800; }

.product-online { padding: 6px 8px; border-radius: 999px; background: #effaf2; color: #268a49; display: flex; gap: 5px; align-items: center; font-size: 5px; font-weight: 850; }
.product-online i { width: 5px; height: 5px; border-radius: 50%; background: #42c56b; }
.settings-app-grid { grid-template-columns: 1.15fr .85fr; }
.settings-panel { display: grid; align-content: start; }
.settings-row { min-height: 66px; border-bottom: 1px solid #edf0f5; display: grid; grid-template-columns: 35px 1fr auto; gap: 8px; align-items: center; }
.settings-row:last-child { border: 0; }
.settings-row > span { width: 34px; height: 34px; border-radius: 10px; background: #f1edff; color: #6e4ee6; display: grid; place-items: center; }
.settings-row p { margin: 0; display: grid; }
.settings-row strong { font-size: 5.8px; } .settings-row small { color: #8b92a2; font-size: 4.8px; }
.settings-row .toggle { width: 25px; height: 14px; }
.settings-row .toggle i { width: 10px; height: 10px; }
.settings-row .toggle.on i { transform: translateX(11px); }
.connection-summary { display: grid; justify-items: center; align-content: center; text-align: center; background: linear-gradient(145deg,#f2edff,#fff); }
.summary-lw { width: 50px; height: 50px; border-radius: 15px; overflow: hidden; }
.summary-lw img { width: 100%; height: 100%; }
.connection-summary h4 { margin: 10px 0 0; font-family: 'Space Grotesk Variable'; font-size: 15px; }
.connection-summary p { margin: 5px 0 0; color: #737b8d; font-size: 5.2px; }
.connection-summary > div { margin-top: 13px; display: flex; }
.connection-summary > div img { width: 30px; height: 30px; margin-left: -5px; border: 2px solid #fff; border-radius: 9px; }
.connection-summary > div img:first-child { margin-left: 0; }
.connection-summary > small { margin-top: 13px; max-width: 140px; color: #8b92a2; font-size: 4.8px; line-height: 1.5; }

@media (max-width: 1100px) {
  .bento-models .bento-copy { max-width: 44%; }
  .project-map-node { min-width: 82px; padding-inline: 8px; }
  .product-app-shell { grid-template-columns: 118px 1fr; }
  .product-mini-sidebar > div { font-size: 5.2px; }
}

@media (max-width: 980px) {
  .bento-models .bento-copy { max-width: 100%; }
  .models-visual { width: auto; left: 24px; right: 24px; }
  .bento-projects { min-height: 760px; }
  .project-pulse-rail { top: 250px; }
  .project-map-visual { top: 326px; }
  .product-app-shell { min-height: 403px; grid-template-columns: 82px 1fr; }
  .product-mini-sidebar > div span { display: none; }
  .product-mini-sidebar > div { justify-content: center; }
  .product-mini-sidebar > small { text-align: center; font-size: 4px; overflow: hidden; }
  .product-file-workspace { grid-template-columns: 112px 1fr; }
}

@media (max-width: 720px) {
  .hero-proof { gap: 11px; }
  .provider-proof-logos span { width: 33px; height: 33px; border-radius: 10px; }
  .bento-models { min-height: 610px; }
  .models-visual { left: 20px; right: 20px; bottom: 20px; }
  .bento-projects { min-height: 750px; }
  .project-pulse-rail { top: 292px; left: 18px; right: 18px; gap: 5px; }
  .project-pulse-rail > div { padding: 7px; grid-template-columns: 24px 1fr; gap: 5px; }
  .project-pulse-rail span { width: 24px; height: 24px; }
  .project-pulse-rail strong { font-size: 6.5px; }
  .project-pulse-rail small { font-size: 4.4px; }
  .project-map-visual { left: 18px; right: 18px; top: 362px; }
  .project-map-node { min-width: 72px; min-height: 48px; grid-template-columns: 24px 1fr; column-gap: 5px; padding: 6px; }
  .project-map-node > span { width: 24px; height: 24px; border-radius: 8px; }
  .project-map-node strong { font-size: 5.7px; }
  .project-map-node small { font-size: 4.5px; }
  .project-map-node.map-center { width: 102px; grid-template-columns: 34px 1fr; }
  .project-map-node.map-center > span, .project-map-node.map-center img { width: 34px; height: 34px; }
  .bento-files { min-height: 570px; }
  .files-visual { height: 260px; }
  .files-mini-layout { height: 188px; grid-template-columns: 31% 1fr; }
  .files-mini-tree span { padding-inline: 4px; }
  .product-app-shell { grid-template-columns: 56px 1fr; }
  .product-mini-sidebar { padding-inline: 5px; }
  .product-mini-logo { width: 28px; height: 28px; justify-self: center; }
  .product-mini-sidebar > small { display: none; }
  .product-mini-main { padding: 7px; gap: 6px; }
  .product-mini-title { min-height: 50px; padding: 8px; }
  .product-mini-title h4 { font-size: 12px; }
  .product-mini-title p { display: none; }
  .product-mini-title button { padding-inline: 7px; }
  .product-mini-toolbar > span { display: none; }
  .product-file-workspace { min-height: 325px; grid-template-columns: 82px 1fr; gap: 6px; }
  .product-folder-tree { padding: 7px 5px; }
  .product-folder-tree > small { display: none; }
  .product-folder-tree span { padding: 0 4px; font-size: 4.6px; }
  .product-file-grid { padding: 6px; gap: 5px; }
  .product-file-card { min-height: 65px; padding: 6px; grid-template-columns: 18px 1fr; }
  .context-app-grid, .handoff-app-grid, .settings-app-grid { min-height: 345px; gap: 6px; }
  .context-source-panel, .context-package-preview, .handoff-package-card, .handoff-destination-list, .settings-panel, .connection-summary { padding: 7px; }
  .context-source-panel label { min-height: 43px; grid-template-columns: 12px 15px 1fr; }
  .context-source-panel label small { display: none; }
  .handoff-destination-list > div:not(.handoff-success) { min-height: 50px; grid-template-columns: 28px 1fr auto; }
  .handoff-destination-list img, .destination-lw { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-map-node, .project-map-head small b, .map-edge { animation: none !important; }
  .map-particle { display: none; }
}

/* V4 layout corrections after visual QA */
.models-visual { height: 300px; align-content: start; grid-template-rows: 35px repeat(3, 58px) 59px; }
.models-visual > .micro-ui-head { min-height: 35px !important; height: 35px; padding: 0 11px !important; }
.models-visual .model-prompt { height: 43px; min-height: 43px; align-self: center; }
.bento-files { min-height: 600px; }
.files-visual { height: 220px; }
.files-mini-layout { height: 149px; }

@media (max-width: 720px) {
  .bento-models { min-height: 640px; }
  .bento-files { min-height: 620px; }
  .files-visual { height: 225px; }
  .files-mini-layout { height: 154px; }
}

/* ========================================================================== 
   V6 — Product-proof, conversion, and interactive experience pass
   ========================================================================== */

body.modal-open { overflow: hidden; }

/* Brand motion signature */
.brand-signal-track { position: fixed; z-index: 190; left: 11px; top: 96px; bottom: 96px; width: 1px; background: linear-gradient(180deg, transparent, rgba(24,22,31,.12) 12%, rgba(24,22,31,.12) 88%, transparent); pointer-events: none; }
.brand-signal-track span { position: absolute; top: 0; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,104,70,.12), 0 0 24px rgba(255,104,70,.35); transform: translate(-50%, -50%); will-change: top; }
.product-tip { position: fixed; z-index: 500; max-width: 230px; padding: 9px 11px; border-radius: 10px; background: rgba(24,22,31,.94); color: #fff; font-size: 9px; line-height: 1.45; box-shadow: 0 14px 40px rgba(24,22,31,.2); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease; }
.product-tip.is-visible { opacity: 1; transform: translateY(0); }

/* Command launcher */
.command-launch { width: 42px; height: 42px; border: 1px solid rgba(24,22,31,.12); border-radius: 13px; background: rgba(255,255,255,.52); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; gap: 2px; cursor: pointer; transition: .22s ease; }
.command-launch:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
.command-launch svg { width: 14px; height: 14px; }
.command-launch span { font-size: 9px; font-weight: 850; }

/* Hero provider-controlled demo */
.provider-proof-logos { display: flex; align-items: center; }
.provider-proof-logos button { position: relative; width: 37px; height: 37px; margin-left: -7px; padding: 0; border: 3px solid var(--paper); border-radius: 13px; background: rgba(255,255,255,.82); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 22px rgba(35,27,52,.08); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.provider-proof-logos button:first-child { margin-left: 0; }
.provider-proof-logos button:hover, .provider-proof-logos button.active { z-index: 2; transform: translateY(-5px) scale(1.05); box-shadow: 0 12px 26px rgba(35,27,52,.15); }
.provider-proof-logos button.active { border-color: rgba(124,92,255,.55); }
.provider-proof-logos button.active::after { content: ''; position: absolute; right: -1px; top: -1px; width: 8px; height: 8px; border: 2px solid var(--paper); border-radius: 50%; background: var(--coral); }
.provider-proof-logos img { width: 23px; height: 23px; object-fit: contain; }
.float-icon.provider { padding: 7px; background: #fff; }
.float-icon.provider img { width: 100%; height: 100%; object-fit: contain; }
.hero-packet-flow { position: absolute; z-index: 4; left: 14%; right: 10%; bottom: 20px; min-height: 72px; padding: 10px 14px; border: 1px solid rgba(24,22,31,.1); border-radius: 18px; background: rgba(255,255,255,.82); box-shadow: 0 18px 45px rgba(35,27,52,.15); backdrop-filter: blur(18px); display: flex; align-items: center; gap: 8px; overflow: hidden; }
.packet-source { flex: 0 0 auto; min-height: 30px; padding: 0 10px; border: 1px solid rgba(24,22,31,.09); border-radius: 10px; background: #fff; display: inline-flex; align-items: center; gap: 6px; color: #625c68; font-size: 7px; font-weight: 760; }
.packet-source svg { width: 12px; height: 12px; color: var(--violet); }
.packet-core { position: relative; margin-left: auto; min-width: 170px; padding: 9px 12px 9px 42px; border-radius: 12px; background: var(--ink); color: #fff; display: grid; gap: 1px; }
.packet-core img { position: absolute; left: 7px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); border-radius: 9px; }
.packet-core strong { font-size: 8px; }
.packet-core small { color: rgba(255,255,255,.46); font-size: 6px; }
.packet-signal { position: absolute; z-index: 2; left: 10%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,104,70,.14); animation: packet-travel 4.2s cubic-bezier(.45,.05,.25,1) infinite; }
@keyframes packet-travel { 0% { left: 9%; opacity: 0; } 10% { opacity: 1; } 75% { opacity: 1; } 92%,100% { left: 78%; opacity: 0; } }

/* Before / with transformation */
.comparison-section { padding-block: 128px; }
.comparison-shell { position: relative; min-height: 610px; margin-top: 48px; border: 1px solid var(--line); border-radius: 34px; background: #e9e4dd; overflow: hidden; box-shadow: var(--shadow); }
.comparison-layer { position: absolute; inset: 0; padding: 58px 48px 48px; }
.comparison-before { background: linear-gradient(135deg, #eee9e2, #ded7cf); }
.comparison-after { background: linear-gradient(135deg, #1b1822, #282333); color: #fff; clip-path: inset(0 0 0 var(--split)); }
.comparison-label { position: absolute; z-index: 8; top: 18px; padding: 8px 12px; border-radius: 999px; font-size: 8px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.comparison-label-before { left: 20px; background: rgba(255,255,255,.66); color: #6d6671; }
.comparison-label-after { right: 20px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); }
.browser-chaos { height: 100%; padding: 18px; border: 1px solid rgba(24,22,31,.11); border-radius: 22px; background: rgba(255,255,255,.55); box-shadow: 0 20px 60px rgba(45,36,58,.12); transform: rotate(-1deg); }
.chaos-tabs { display: flex; align-items: end; gap: 4px; height: 40px; padding: 0 8px; border-bottom: 1px solid var(--line); overflow: hidden; }
.chaos-tabs span { min-width: 95px; padding: 9px 12px; border: 1px solid rgba(24,22,31,.1); border-bottom: 0; border-radius: 10px 10px 0 0; background: #f7f5f1; color: #716a75; font-size: 8px; }
.chaos-grid { height: calc(100% - 55px); padding: 22px 10px 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.chaos-grid article { min-height: 165px; padding: 20px; border: 1px solid rgba(24,22,31,.11); border-radius: 17px; background: rgba(255,255,255,.75); transform: rotate(var(--r,0)); }
.chaos-grid article:nth-child(1) { --r: -1.5deg; }
.chaos-grid article:nth-child(2) { --r: 1.2deg; }
.chaos-grid article:nth-child(3) { --r: .8deg; }
.chaos-grid article:nth-child(4) { --r: -1deg; }
.chaos-grid small { color: #918a94; font-size: 7px; letter-spacing: .12em; }
.chaos-grid strong { display: block; margin-top: 27px; max-width: 240px; font-family: 'Space Grotesk Variable'; font-size: 19px; line-height: 1.05; letter-spacing: -.04em; }
.chaos-grid p { color: #7a737e; font-size: 10px; }
.connected-project { position: relative; height: 100%; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: radial-gradient(circle at 50% 50%, rgba(124,92,255,.15), transparent 38%), rgba(255,255,255,.035); overflow: hidden; }
.connected-project-head { height: 58px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 10px; }
.connected-project-head img { width: 32px; height: 32px; border-radius: 10px; }
.connected-project-head p { margin: 0; display: grid; }
.connected-project-head small { color: rgba(255,255,255,.35); font-size: 6px; letter-spacing: .12em; }
.connected-project-head strong { font-size: 10px; }
.connected-project-head > span { margin-left: auto; display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.52); font-size: 7px; }
.connected-project-head > span i { width: 6px; height: 6px; border-radius: 50%; background: #47cd70; box-shadow: 0 0 12px rgba(71,205,112,.7); }
.connected-project > svg { position: absolute; inset: 58px 0 0; width: 100%; height: calc(100% - 58px); }
.connected-project > svg path { fill: none; stroke: rgba(162,139,255,.42); stroke-width: 2; stroke-dasharray: 8 10; }
.connected-center, .connected-node { position: absolute; z-index: 2; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.07); box-shadow: 0 18px 45px rgba(0,0,0,.2); backdrop-filter: blur(14px); }
.connected-center { left: 50%; top: 52%; width: 190px; padding: 18px; border-radius: 20px; transform: translate(-50%,-50%); text-align: center; }
.connected-center img { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 15px; }
.connected-center strong, .connected-center small { display: block; }
.connected-center strong { font-size: 12px; }
.connected-center small { margin-top: 3px; color: rgba(255,255,255,.42); font-size: 7px; }
.connected-node { width: 150px; padding: 14px; border-radius: 16px; display: grid; grid-template-columns: 34px 1fr; column-gap: 9px; align-items: center; }
.connected-node > i { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 11px; background: rgba(124,92,255,.18); color: #bfaeff; display: grid; place-items: center; }
.connected-node svg { width: 16px; height: 16px; }
.connected-node strong { font-size: 9px; }
.connected-node small { color: rgba(255,255,255,.38); font-size: 6px; }
.connected-node.n1 { left: 6%; top: 20%; }
.connected-node.n2 { right: 6%; top: 20%; }
.connected-node.n3 { left: 6%; bottom: 10%; }
.connected-node.n4 { right: 6%; bottom: 10%; }
.comparison-divider { position: absolute; z-index: 9; top: 0; bottom: 0; left: var(--split); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(24,22,31,.08), 0 0 30px rgba(255,255,255,.5); transform: translateX(-1px); pointer-events: none; }
.comparison-divider span { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border: 5px solid rgba(255,255,255,.84); border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transform: translate(-50%,-50%); box-shadow: 0 14px 35px rgba(24,22,31,.26); }
.comparison-divider svg { width: 19px; }
.comparison-range { position: absolute; z-index: 10; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.comparison-outcomes { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.comparison-outcomes span { min-height: 58px; padding: 0 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.48); display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 10px; font-weight: 720; }
.comparison-outcomes svg { width: 17px; color: var(--violet); }

/* Real product gallery */
.gallery-section { padding-block: 128px; }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.gallery-heading > div:first-child { max-width: 820px; }
.gallery-heading h2 { margin: 18px 0 14px; font-family: 'Space Grotesk Variable'; font-size: clamp(48px, 6vw, 84px); line-height: .95; letter-spacing: -.067em; }
.gallery-heading p { margin: 0; max-width: 680px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.preview-theme-toggle { flex: 0 0 auto; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.55); display: flex; }
.preview-theme-toggle button { min-height: 38px; padding: 0 13px; border-radius: 9px; background: transparent; display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 9px; font-weight: 760; cursor: pointer; }
.preview-theme-toggle button.active { background: var(--ink); color: #fff; }
.preview-theme-toggle svg { width: 13px; }
.gallery-layout { margin-top: 44px; display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 18px; }
.gallery-tabs { padding: 8px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.5); display: grid; align-content: start; gap: 4px; }
.gallery-tabs button { min-height: 70px; padding: 11px 12px; border-radius: 15px; background: transparent; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; text-align: left; cursor: pointer; transition: .2s ease; }
.gallery-tabs button > i { width: 36px; height: 36px; border-radius: 11px; background: #ebe6df; display: grid; place-items: center; }
.gallery-tabs svg { width: 16px; }
.gallery-tabs span { display: grid; gap: 2px; }
.gallery-tabs strong { font-size: 10px; }
.gallery-tabs small { color: #8a838e; font-size: 7px; }
.gallery-tabs button:hover { background: rgba(255,255,255,.7); }
.gallery-tabs button.active { background: var(--ink); color: #fff; box-shadow: 0 15px 35px rgba(24,22,31,.14); }
.gallery-tabs button.active > i { background: rgba(124,92,255,.22); color: #c8bbff; }
.gallery-tabs button.active small { color: rgba(255,255,255,.44); }
.gallery-stage { min-width: 0; border-radius: 26px; overflow: hidden; background: #eeeae4; box-shadow: 0 28px 80px rgba(37,29,55,.13); transition: background .25s ease; }
.gallery-stage[data-preview-theme-current="dark"] { background: #18151e; }
.gallery-window { min-height: 610px; padding: 18px; }
.gallery-window .screen-header { border-radius: 16px 16px 0 0; }
.gallery-window .product-app-shell { height: 540px; border-radius: 0 0 18px 18px; overflow: hidden; }
.gallery-caption { min-height: 94px; padding: 17px 19px; border-top: 1px solid rgba(24,22,31,.09); background: rgba(255,255,255,.76); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.gallery-stage[data-preview-theme-current="dark"] .gallery-caption { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: #fff; }
.gallery-caption p { margin: 0; display: grid; gap: 2px; }
.gallery-caption small { color: var(--violet); font-size: 7px; font-weight: 850; letter-spacing: .13em; }
.gallery-caption strong { font-size: 12px; }
.gallery-caption span { max-width: 760px; color: var(--ink-soft); font-size: 9px; line-height: 1.55; }
.gallery-stage[data-preview-theme-current="dark"] .gallery-caption span { color: rgba(255,255,255,.48); }
.gallery-caption button { flex: 0 0 auto; min-height: 42px; padding: 0 14px; border-radius: 12px; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 760; cursor: pointer; }
.gallery-caption svg { width: 14px; }
.gallery-hotspot { position: absolute; z-index: 10; width: 24px; height: 24px; padding: 0; border: 3px solid rgba(255,255,255,.82); border-radius: 50%; background: var(--coral); color: #fff; box-shadow: 0 0 0 7px rgba(255,104,70,.13), 0 8px 24px rgba(255,104,70,.25); display: grid; place-items: center; cursor: help; animation: hotspot-pulse 2.4s ease-in-out infinite; }
.gallery-hotspot::after { content: '+'; font-size: 11px; font-weight: 900; }
@keyframes hotspot-pulse { 50% { box-shadow: 0 0 0 12px rgba(255,104,70,0), 0 8px 24px rgba(255,104,70,.22); } }

/* App-inspired gallery screens */
.gallery-app { position: relative; height: 100%; background: #f6f7fa; display: grid; grid-template-columns: 150px 1fr; font-size: 8px; color: #20202a; }
.gallery-app-sidebar { padding: 14px 10px; border-right: 1px solid #dfe2eb; background: #fff; display: flex; flex-direction: column; }
.gallery-app-sidebar img { width: 29px; height: 29px; margin-bottom: 18px; border-radius: 9px; }
.gallery-app-sidebar small { margin: 10px 5px 4px; color: #8c8593; font-size: 5px; font-weight: 850; letter-spacing: .14em; }
.gallery-app-sidebar span { min-height: 27px; padding: 0 8px; border-radius: 7px; display: flex; align-items: center; gap: 7px; color: #606170; }
.gallery-app-sidebar span.active { background: #ede9ff; color: #6f4fff; font-weight: 800; }
.gallery-app-sidebar svg { width: 12px; }
.gallery-app-main { min-width: 0; padding: 19px; overflow: hidden; }
.gallery-app-title { padding: 14px 16px; border: 1px solid #dde1ea; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: space-between; }
.gallery-app-title h4 { margin: 0; font-family: 'Space Grotesk Variable'; font-size: 16px; letter-spacing: -.04em; }
.gallery-app-title p { margin: 2px 0 0; color: #737583; font-size: 7px; }
.gallery-app-title button, .gallery-app-title > span { min-height: 30px; padding: 0 10px; border-radius: 9px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 6px; font-weight: 780; }
.gallery-app-title svg { width: 11px; }
.gallery-content-grid { margin-top: 13px; display: grid; gap: 12px; }
.gallery-card { padding: 13px; border: 1px solid #dfe2ea; border-radius: 13px; background: #fff; }
.gallery-card-head { display: flex; align-items: center; justify-content: space-between; color: #7d7f8c; font-size: 6px; }
.gallery-card h5 { margin: 14px 0 5px; font-size: 11px; }
.gallery-card p { margin: 0; color: #7b7d89; line-height: 1.45; }
.gallery-stage[data-preview-theme-current="dark"] .gallery-app { background: #17151d; color: #fff; }
.gallery-stage[data-preview-theme-current="dark"] .gallery-app-sidebar { background: #1d1a24; border-color: rgba(255,255,255,.08); }
.gallery-stage[data-preview-theme-current="dark"] .gallery-app-sidebar span { color: rgba(255,255,255,.48); }
.gallery-stage[data-preview-theme-current="dark"] .gallery-app-sidebar span.active { background: rgba(124,92,255,.18); color: #fff; }
.gallery-stage[data-preview-theme-current="dark"] .gallery-app-title, .gallery-stage[data-preview-theme-current="dark"] .gallery-card { background: #24212c; border-color: rgba(255,255,255,.08); }
.gallery-stage[data-preview-theme-current="dark"] .gallery-app-title p, .gallery-stage[data-preview-theme-current="dark"] .gallery-card p { color: rgba(255,255,255,.44); }

/* Morning Brief */
.brief-screen-grid { grid-template-columns: 1.45fr .78fr; }
.brief-main-card { min-height: 225px; background: linear-gradient(145deg,#fff 35%,#eee9ff); }
.brief-main-card h5 { margin-top: 34px; font-size: 17px; }
.brief-signal-list { margin-top: 11px; display: grid; gap: 7px; }
.brief-signal { padding: 9px; border: 1px solid #e2e4eb; border-radius: 9px; background: #fff; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; }
.brief-signal > i { width: 26px; height: 26px; border-radius: 8px; background: #eee9ff; color: var(--violet); display: grid; place-items: center; }
.brief-signal svg { width: 12px; }
.brief-signal p { display: grid; }
.brief-signal strong { font-size: 7px; }
.brief-signal small { color: #93949e; font-size: 5px; }
.brief-signal b { color: #8c8690; font-size: 5px; }

/* Project Map screen */
.map-screen-body { position: relative; min-height: 420px; margin-top: 12px; border: 1px solid #dfe2ea; border-radius: 14px; background: radial-gradient(circle at 50% 50%, rgba(124,92,255,.1), transparent 36%), #fff; overflow: hidden; }
.map-mode-tabs { position: absolute; z-index: 4; left: 12px; top: 12px; padding: 3px; border: 1px solid #dfe2ea; border-radius: 9px; background: #f5f5f8; display: flex; gap: 2px; }
.map-mode-tabs span { padding: 6px 9px; border-radius: 6px; color: #777886; font-size: 5px; }
.map-mode-tabs span.active { background: #fff; color: var(--violet); box-shadow: 0 5px 14px rgba(35,27,52,.08); }
.map-screen-body > svg { position: absolute; inset: 35px 20px 30px; width: calc(100% - 40px); height: calc(100% - 65px); }
.map-screen-body > svg path { fill: none; stroke: #c7bbff; stroke-width: 2; stroke-dasharray: 7 9; }
.map-screen-node { position: absolute; z-index: 3; min-width: 95px; padding: 9px; border: 1px solid #dedfe8; border-radius: 11px; background: rgba(255,255,255,.92); box-shadow: 0 10px 25px rgba(42,34,62,.09); display: grid; grid-template-columns: 26px 1fr; column-gap: 7px; align-items: center; }
.map-screen-node > i { grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 8px; background: #eee9ff; color: var(--violet); display: grid; place-items: center; }
.map-screen-node svg { width: 12px; }
.map-screen-node strong { font-size: 6px; }
.map-screen-node small { color: #9998a2; font-size: 4.5px; }
.map-screen-node.center { left: 50%; top: 51%; min-width: 130px; transform: translate(-50%,-50%); border-color: rgba(124,92,255,.35); background: linear-gradient(145deg,#fff,#eee9ff); }
.map-screen-node.a { left: 9%; top: 19%; }.map-screen-node.b { right: 9%; top: 19%; }.map-screen-node.c { left: 10%; bottom: 11%; }.map-screen-node.d { right: 10%; bottom: 11%; }
.map-inspector { position: absolute; z-index: 5; right: 12px; top: 58px; width: 150px; padding: 10px; border: 1px solid #dedfe8; border-radius: 11px; background: rgba(255,255,255,.94); box-shadow: 0 13px 35px rgba(42,34,62,.13); }
.map-inspector > span { display: flex; gap: 5px; }
.map-inspector > span b { padding: 4px 5px; border-radius: 5px; background: #f1eefc; color: #7659e7; font-size: 4px; }
.map-inspector h6 { margin: 10px 0 4px; font-size: 7px; }
.map-inspector p { font-size: 5px; }

/* Context package screen */
.profile-grid { grid-template-columns: 1.1fr .9fr; }
.profile-list { display: grid; gap: 7px; }
.profile-item { padding: 10px; border: 1px solid #e0e2e9; border-radius: 10px; display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; }
.profile-item > i { width: 28px; height: 28px; border-radius: 9px; background: #eee9ff; color: var(--violet); display: grid; place-items: center; }
.profile-item svg { width: 12px; }
.profile-item p { display: grid; }
.profile-item strong { font-size: 6px; }
.profile-item small { color: #9697a0; font-size: 4.5px; }
.profile-item b { padding: 4px 6px; border-radius: 999px; background: #f5f4f7; color: #898791; font-size: 4px; }
.package-review { background: linear-gradient(150deg,#fff,#eee9ff); }
.package-review .package-icon { width: 42px; height: 42px; border-radius: 13px; background: var(--violet); color: #fff; display: grid; place-items: center; }
.package-review .package-icon svg { width: 18px; }
.package-review h5 { font-size: 14px; }
.package-review ul { padding: 0; margin: 14px 0 0; list-style: none; display: grid; gap: 7px; }
.package-review li { display: flex; align-items: center; gap: 7px; color: #747581; font-size: 5.5px; }
.package-review li svg { width: 11px; color: #43b96b; }

/* Agent workspace screen */
.agent-screen-grid { grid-template-columns: 1.15fr .85fr; }
.run-summary { min-height: 120px; display: grid; grid-template-columns: 1fr auto; }
.run-summary .run-number { font-family: 'Space Grotesk Variable'; font-size: 34px; letter-spacing: -.06em; }
.run-summary .run-health { width: 70px; height: 70px; border-radius: 50%; background: conic-gradient(var(--violet) 0 78%, #e7e4ec 78%); display: grid; place-items: center; }
.run-summary .run-health::after { content: '78%'; width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 850; }
.run-list { display: grid; gap: 7px; }
.run-row { padding: 10px; border: 1px solid #e0e2e9; border-radius: 10px; display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; }
.run-row > i { width: 7px; height: 7px; border-radius: 50%; background: #4dcc75; }
.run-row.pending > i { background: #f0ae43; }
.run-row p { display: grid; }
.run-row strong { font-size: 6px; }.run-row small { color: #9797a0; font-size: 4.5px; }
.run-row b { color: #8d8994; font-size: 4.5px; }
.approval-card { background: #1d1a24; color: #fff; }
.approval-card p { color: rgba(255,255,255,.45); }
.approval-card button { width: 100%; min-height: 30px; margin-top: 15px; border-radius: 8px; background: var(--violet); color: #fff; font-size: 6px; }

/* Git screen */
.git-screen-grid { grid-template-columns: 1.1fr .9fr; }
.repo-status { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; }
.repo-status > i { width: 44px; height: 44px; border-radius: 13px; background: #17151d; color: #fff; display: grid; place-items: center; }
.repo-status svg { width: 21px; }
.repo-status p { display: grid; }
.repo-status strong { font-size: 9px; }.repo-status small { color: #8f909b; font-size: 5px; }
.repo-status b { padding: 6px 8px; border-radius: 999px; background: #e8f8ee; color: #2d9d55; font-size: 5px; }
.git-metrics { margin-top: 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.git-metrics span { padding: 9px; border-radius: 9px; background: #f5f5f8; display: grid; gap: 2px; }
.git-metrics strong { font-size: 9px; }.git-metrics small { color: #91919b; font-size: 4.5px; }
.changed-files { margin-top: 11px; display: grid; gap: 6px; }
.changed-file { padding: 8px; border: 1px solid #e1e3ea; border-radius: 8px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 7px; }
.changed-file > i { width: 18px; height: 18px; border-radius: 6px; background: #eee9ff; color: var(--violet); display: grid; place-items: center; }
.changed-file svg { width: 9px; }
.changed-file strong { font-size: 5.5px; }.changed-file b { color: #d58a2f; font-size: 5px; }
.git-actions { display: grid; gap: 7px; }
.git-actions button { min-height: 36px; padding: 0 10px; border: 1px solid #e0e2e9; border-radius: 9px; background: #fff; display: flex; align-items: center; gap: 8px; text-align: left; font-size: 6px; font-weight: 760; }
.git-actions button.primary { background: var(--ink); color: #fff; border-color: transparent; }
.git-actions svg { width: 12px; }

/* Scroll-driven project journey */
.journey-section { padding-block: 130px; background: #ebe6df; }
.journey-heading { max-width: 980px; }
.journey-heading h2 { margin: 20px 0 16px; font-family: 'Space Grotesk Variable'; font-size: clamp(52px, 7vw, 92px); line-height: .93; letter-spacing: -.069em; }
.journey-heading p { margin: 0; max-width: 760px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.journey-layout { margin-top: 68px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.72fr); gap: 42px; align-items: start; }
.journey-visual { position: sticky; top: 115px; }
.journey-window { border: 1px solid rgba(24,22,31,.12); border-radius: 27px; background: #1b1822; color: #fff; box-shadow: 0 35px 90px rgba(41,32,57,.22); overflow: hidden; }
.journey-window-head { height: 48px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.04); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.journey-window-head > span { display: flex; gap: 5px; }
.journey-window-head > span i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); }
.journey-window-head > span i:nth-child(2) { background: var(--coral); }
.journey-window-head strong { font-size: 7px; }
.journey-window-head small { justify-self: end; display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.42); font-size: 5px; }
.journey-window-head small b { width: 5px; height: 5px; border-radius: 50%; background: #4bd473; }
.journey-canvas { position: relative; min-height: 500px; background: radial-gradient(circle at 50% 50%, rgba(124,92,255,.16), transparent 37%); overflow: hidden; }
.journey-canvas > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.journey-line { fill: none; stroke: rgba(167,143,255,.38); stroke-width: 2; stroke-dasharray: 8 10; transition: opacity .3s ease, stroke .3s ease; }
.journey-project-core, .journey-source-card, .journey-provider-card, .journey-output-card { position: absolute; z-index: 3; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.065); box-shadow: 0 18px 45px rgba(0,0,0,.18); backdrop-filter: blur(14px); }
.journey-project-core { left: 50%; top: 50%; width: 205px; padding: 16px; border-radius: 20px; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 12px; border-color: rgba(160,135,255,.4); background: linear-gradient(145deg,rgba(124,92,255,.28),rgba(124,92,255,.09)); }
.journey-project-core img { width: 48px; height: 48px; border-radius: 14px; }
.journey-project-core p { margin: 0; display: grid; gap: 2px; }
.journey-project-core small, .journey-provider-card small, .journey-output-card small { color: rgba(255,255,255,.35); font-size: 5px; letter-spacing: .12em; }
.journey-project-core strong { font-size: 10px; }.journey-project-core span { color: #bfaeff; font-size: 6px; }
.journey-source-card { width: 150px; padding: 11px; border-radius: 14px; display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; }
.journey-source-card > i { width: 30px; height: 30px; border-radius: 9px; background: rgba(124,92,255,.17); color: #c4b6ff; display: grid; place-items: center; }
.journey-source-card svg { width: 14px; }
.journey-source-card p { margin: 0; display: grid; }.journey-source-card strong { font-size: 7px; }.journey-source-card small { color: rgba(255,255,255,.35); font-size: 5px; }
.j-brief { left: 4%; top: 13%; }.j-decisions { left: 4%; bottom: 12%; }.j-tasks { left: 26%; bottom: 4%; }
.journey-provider-card { right: 5%; top: 18%; width: 175px; padding: 12px; border-radius: 16px; display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center; opacity: .45; transform: translateY(7px); transition: .35s ease; }
.journey-provider-card img { width: 38px; height: 38px; padding: 7px; border-radius: 11px; background: #fff; }
.journey-provider-card p, .journey-output-card p { margin: 0; display: grid; gap: 2px; }.journey-provider-card strong, .journey-output-card strong { font-size: 8px; }.journey-provider-card span, .journey-output-card span { color: rgba(255,255,255,.4); font-size: 5px; }
.journey-output-card { right: 5%; bottom: 13%; width: 190px; padding: 12px; border-radius: 16px; display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center; opacity: .35; transform: translateY(7px); transition: .35s ease; }
.journey-output-card > i { width: 38px; height: 38px; border-radius: 11px; background: rgba(75,212,115,.14); color: #65df86; display: grid; place-items: center; }
.journey-output-card svg { width: 17px; }
.journey-packet { position: absolute; z-index: 5; left: 30%; top: 37%; padding: 7px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.09); display: flex; align-items: center; gap: 4px; opacity: 0; transform: scale(.9); transition: .35s ease; }
.journey-packet span { padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); font-size: 4.5px; }
.journey-packet b { margin-left: 3px; }
.journey-packet img { width: 24px; height: 24px; border-radius: 7px; }
.journey-status { min-height: 66px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.07); display: grid; align-content: center; gap: 3px; background: rgba(124,92,255,.08); }
.journey-status span { color: #9d86ff; font-size: 6px; font-weight: 850; letter-spacing: .12em; }
.journey-status strong { font-size: 10px; }
.journey-steps { display: grid; gap: 80px; padding-block: 12px 240px; }
.journey-step { min-height: 260px; padding: 26px 0; border-top: 1px solid rgba(24,22,31,.14); display: grid; grid-template-columns: 52px 1fr; gap: 16px; opacity: .36; transition: opacity .3s ease, transform .3s ease; }
.journey-step.active { opacity: 1; transform: translateX(-6px); }
.journey-step > span { width: 38px; height: 38px; border-radius: 12px; background: #ddd7cf; display: grid; place-items: center; color: #7d7581; font-size: 8px; font-weight: 850; }
.journey-step.active > span { background: var(--violet); color: #fff; box-shadow: 0 10px 25px rgba(124,92,255,.24); }
.journey-step small { color: var(--violet); font-size: 7px; font-weight: 850; letter-spacing: .13em; }
.journey-step h3 { margin: 14px 0 12px; font-family: 'Space Grotesk Variable'; font-size: 30px; line-height: 1.02; letter-spacing: -.05em; }
.journey-step p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.journey-visual[data-journey-active="1"] .journey-packet, .journey-visual[data-journey-active="2"] .journey-packet { opacity: 1; transform: scale(1); }
.journey-visual[data-journey-active="2"] .journey-provider-card, .journey-visual[data-journey-active="3"] .journey-provider-card, .journey-visual[data-journey-active="4"] .journey-provider-card { opacity: 1; transform: translateY(0); }
.journey-visual[data-journey-active="3"] .journey-output-card, .journey-visual[data-journey-active="4"] .journey-output-card { opacity: 1; transform: translateY(0); }
.journey-visual[data-journey-active="4"] .journey-packet { left: 52%; top: 63%; opacity: 1; }

/* Privacy posture console */
.control-console { margin-top: 22px; min-height: 390px; padding: 28px; border: 1px solid rgba(255,255,255,.11); border-radius: 25px; background: #1b1822; color: #fff; box-shadow: 0 34px 85px rgba(32,25,45,.18); display: grid; grid-template-columns: 1fr 270px 330px; gap: 22px; align-items: center; overflow: hidden; }
.control-console-copy small { color: #9e87ff; font-size: 7px; font-weight: 850; letter-spacing: .14em; }
.control-console-copy h3 { margin: 16px 0 10px; max-width: 430px; font-family: 'Space Grotesk Variable'; font-size: 34px; line-height: 1.02; letter-spacing: -.052em; }
.control-console-copy > p { margin: 0; color: rgba(255,255,255,.48); font-size: 11px; line-height: 1.7; }
.posture-features { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 7px; }
.posture-features span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.04); display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.62); font-size: 6px; }
.posture-features svg { width: 10px; color: #5ddb7e; }
.posture-selector { display: grid; gap: 7px; }
.posture-selector button { min-height: 68px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.035); color: #fff; display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
.posture-selector button.active { border-color: rgba(124,92,255,.55); background: rgba(124,92,255,.13); box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.posture-selector span { display: grid; gap: 2px; }
.posture-selector strong { font-size: 9px; }.posture-selector small { color: rgba(255,255,255,.36); font-size: 6px; }
.posture-dot { width: 8px; height: 8px; border-radius: 50%; }.posture-dot.green { background: #4bd473; }.posture-dot.red { background: #ff5a5a; }.posture-dot.blue { background: #43a7ff; }.posture-dot.amber { background: #f0ad42; }
.posture-visual { min-height: 310px; padding: 20px; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: radial-gradient(circle at 50% 42%, rgba(124,92,255,.16), transparent 42%), rgba(255,255,255,.025); display: grid; grid-template-rows: 1fr auto; transition: .25s ease; }
.posture-orbit { position: relative; min-height: 220px; }
.posture-orbit::before, .posture-orbit::after { content: ''; position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(255,255,255,.12); border-radius: 50%; transform: translate(-50%,-50%); }
.posture-orbit::before { width: 185px; height: 185px; }.posture-orbit::after { width: 115px; height: 115px; }
.posture-core { position: absolute; z-index: 2; left: 50%; top: 50%; width: 62px; height: 62px; transform: translate(-50%,-50%); }
.posture-core img { width: 100%; height: 100%; border-radius: 18px; }
.orbit-node { position: absolute; z-index: 3; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: #2b2733; color: #bcaeff; display: grid; place-items: center; box-shadow: 0 12px 28px rgba(0,0,0,.2); transition: opacity .25s ease, transform .25s ease, filter .25s ease; }
.orbit-node svg { width: 18px; }.node-cloud { left: 50%; top: 8%; transform: translateX(-50%); }.node-local { left: 8%; top: 50%; transform: translateY(-50%); }.node-web { right: 8%; top: 50%; transform: translateY(-50%); }.node-shield { left: 50%; bottom: 5%; transform: translateX(-50%); }
.posture-visual > p { margin: 0; padding: 11px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.035); display: grid; grid-template-columns: 13px 1fr; column-gap: 8px; }
.posture-visual > p > span { grid-row: 1 / span 2; padding-top: 3px; }.posture-visual > p > span i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #4bd473; box-shadow: 0 0 12px rgba(75,212,115,.6); }
.posture-visual > p strong { font-size: 8px; }.posture-visual > p small { color: rgba(255,255,255,.4); font-size: 5.5px; }
.posture-visual[data-posture-current="offline"] .node-cloud, .posture-visual[data-posture-current="offline"] .node-web { opacity: .18; filter: grayscale(1); }
.posture-visual[data-posture-current="private"] .node-cloud, .posture-visual[data-posture-current="private"] .node-web { opacity: .28; }
.posture-visual[data-posture-current="private"] .node-local { transform: translateY(-50%) scale(1.18); color: #fff; background: rgba(67,167,255,.28); }
.posture-visual[data-posture-current="cloud-safe"] .node-shield { transform: translateX(-50%) scale(1.18); color: #fff; background: rgba(240,173,66,.25); }

/* Honest product proof */
.proof-section { padding-block: 112px; }
.proof-heading { display: grid; grid-template-columns: 210px 1fr; gap: 30px; }
.proof-heading h2 { margin: 0 0 13px; font-family: 'Space Grotesk Variable'; font-size: clamp(48px, 6vw, 82px); line-height: .94; letter-spacing: -.065em; }
.proof-heading p { margin: 0; max-width: 680px; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.proof-metrics { margin-top: 48px; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(4,1fr); }
.proof-metrics article { min-height: 220px; padding: 25px; border-right: 1px solid var(--line); display: grid; align-content: space-between; }
.proof-metrics article:last-child { border-right: 0; }
.proof-metrics strong { font-family: 'Space Grotesk Variable'; font-size: 70px; line-height: .9; letter-spacing: -.08em; color: var(--violet); }
.proof-metrics span { align-self: end; font-size: 12px; font-weight: 800; }
.proof-metrics small { color: var(--ink-soft); font-size: 8px; line-height: 1.5; }
.proof-release { margin-top: 14px; padding: 18px 20px; border: 1px solid rgba(124,92,255,.22); border-radius: 18px; background: linear-gradient(90deg,rgba(124,92,255,.08),rgba(57,167,255,.05)); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.proof-release > div { display: flex; align-items: center; gap: 12px; }
.proof-release img { width: 42px; height: 42px; border-radius: 13px; }
.proof-release p { margin: 0; display: grid; gap: 2px; }
.proof-release small { color: var(--violet); font-size: 6px; font-weight: 850; letter-spacing: .12em; }
.proof-release strong { font-size: 10px; }.proof-release span { color: var(--ink-soft); font-size: 8px; }
.proof-release a { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 800; }
.proof-release svg { width: 14px; }

/* Pricing plan assistant and commercial clarity */
.pricing-tools { margin: 28px auto 0; display: flex; justify-content: center; align-items: center; gap: 12px; }
.pricing-tools .billing-toggle { margin: 0; }
.plan-helper-button { min-height: 47px; padding: 0 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.7); display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 780; cursor: pointer; }
.plan-helper-button svg { width: 14px; color: var(--violet); }
.plan-helper { width: min(100%, 1000px); margin: 18px auto 30px; padding: 24px; border: 1px solid rgba(124,92,255,.24); border-radius: 24px; background: #fff; box-shadow: 0 24px 65px rgba(37,29,55,.12); }
.plan-helper-head { display: flex; justify-content: space-between; gap: 20px; }
.plan-helper-head small { color: var(--violet); font-size: 7px; font-weight: 850; letter-spacing: .13em; }
.plan-helper-head h3 { margin: 8px 0 5px; font-family: 'Space Grotesk Variable'; font-size: 28px; letter-spacing: -.05em; }
.plan-helper-head p { margin: 0; color: var(--ink-soft); font-size: 9px; }
.plan-helper-head > button { width: 38px; height: 38px; border-radius: 11px; background: #eeeae4; display: grid; place-items: center; cursor: pointer; }
.plan-helper form { margin-top: 22px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.plan-helper fieldset { min-width: 0; margin: 0; padding: 15px; border: 1px solid var(--line); border-radius: 15px; }
.plan-helper legend { padding: 0 4px; font-size: 9px; font-weight: 800; line-height: 1.45; }
.plan-helper label { margin-top: 8px; display: block; cursor: pointer; }
.plan-helper label input { position: absolute; opacity: 0; }
.plan-helper label span { min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; color: var(--ink-soft); font-size: 8px; transition: .18s ease; }
.plan-helper label input:checked + span { border-color: rgba(124,92,255,.45); background: rgba(124,92,255,.09); color: var(--ink); font-weight: 780; }
.plan-helper-result { grid-column: 1 / -1; padding: 15px; border-radius: 16px; background: #1b1822; color: #fff; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.plan-helper-result > span img { width: 44px; height: 44px; border-radius: 13px; }
.plan-helper-result p { margin: 0; display: grid; gap: 2px; }
.plan-helper-result small { color: #a58dff; font-size: 6px; font-weight: 850; letter-spacing: .12em; }
.plan-helper-result strong { font-size: 10px; }.plan-helper-result b { color: rgba(255,255,255,.45); font-size: 7px; font-weight: 500; }
.pricing-clarity { margin-top: 28px; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); }
.pricing-clarity article { min-height: 148px; padding: 24px 22px; border-right: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-content: center; align-items: center; }
.pricing-clarity article:last-child { border-right: 0; }
.pricing-clarity > article > svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: #ede9ff; color: var(--violet); }
.pricing-clarity p { margin: 0; display: grid; gap: 5px; }
.pricing-clarity small { color: #8b8490; font-size: 6px; font-weight: 850; letter-spacing: .11em; }
.pricing-clarity strong { font-size: 10px; }.pricing-clarity span { color: var(--ink-soft); font-size: 8px; line-height: 1.55; }

/* Roadmap preview */
.roadmap-preview { padding-block: 115px; }
.roadmap-preview-head { display: grid; grid-template-columns: 200px 1fr auto; gap: 30px; align-items: end; }
.roadmap-preview-head h2 { margin: 0 0 12px; font-family: 'Space Grotesk Variable'; font-size: clamp(50px, 6vw, 82px); line-height: .95; letter-spacing: -.065em; }
.roadmap-preview-head p { margin: 0; max-width: 650px; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.roadmap-preview-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.roadmap-card { min-height: 310px; padding: 25px; border: 1px solid var(--line); border-radius: 22px; display: flex; flex-direction: column; }
.roadmap-card small { color: #8e8791; font-size: 7px; font-weight: 850; letter-spacing: .13em; }
.roadmap-card h3 { margin: 50px 0 12px; font-family: 'Space Grotesk Variable'; font-size: 28px; line-height: 1.03; letter-spacing: -.05em; }
.roadmap-card p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.65; }
.roadmap-card > span { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 7px; font-size: 8px; font-weight: 800; }
.roadmap-card > span svg { width: 14px; }
.roadmap-card.shipped { background: #e7e0ff; border-color: rgba(124,92,255,.18); }.roadmap-card.shipped > span { color: #6648da; }
.roadmap-card.now { background: #1b1822; color: #fff; }.roadmap-card.now p, .roadmap-card.now small { color: rgba(255,255,255,.45); }.roadmap-card.now > span { color: #bbaeff; }
.roadmap-card.explore { background: #dcefff; border-color: rgba(57,167,255,.18); }.roadmap-card.explore > span { color: #1979bd; }
.roadmap-card.now > span svg { animation: spin-slow 3s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* Final CTA packet motif */
.release-meta button { color: inherit; background: transparent; cursor: pointer; }
.cta-context-packet { position: relative; width: min(100%, 620px); min-height: 58px; margin: 23px auto 0; padding: 9px 10px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(255,255,255,.055); display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; }
.cta-context-packet span { padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.54); font-size: 6px; }
.cta-context-packet b { margin-left: 12px; }.cta-context-packet b img { width: 34px; height: 34px; border-radius: 10px; }
.cta-context-packet strong { color: #fff; font-size: 8px; }
.cta-context-packet > i { position: absolute; left: 12%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); transform: translateY(-50%); animation: cta-packet-travel 4.2s ease-in-out infinite; }
@keyframes cta-packet-travel { 0% { left: 14%; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { left: 63%; opacity: 0; } }

/* Command palette */
.command-palette { position: fixed; z-index: 700; inset: 0; display: grid; place-items: start center; padding-top: min(14vh, 120px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.command-palette.is-open { opacity: 1; pointer-events: auto; }
.command-backdrop { position: absolute; inset: 0; background: rgba(16,13,21,.55); backdrop-filter: blur(12px); }
.command-dialog { position: relative; width: min(660px, calc(100vw - 28px)); max-height: min(680px, calc(100vh - 80px)); border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: #f8f6f2; box-shadow: 0 45px 130px rgba(12,9,17,.4); overflow: hidden; transform: translateY(-15px) scale(.98); transition: transform .24s ease; }
.command-palette.is-open .command-dialog { transform: translateY(0) scale(1); }
.command-search { min-height: 66px; padding: 0 17px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; }
.command-search svg { width: 18px; color: var(--violet); }
.command-search input { min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; }
.command-search kbd, .command-footer kbd { padding: 4px 6px; border: 1px solid rgba(24,22,31,.1); border-radius: 6px; background: #ece8e2; color: #79737e; font-size: 7px; box-shadow: 0 1px 0 rgba(24,22,31,.1); }
.command-results { max-height: 490px; padding: 10px; overflow-y: auto; display: grid; gap: 3px; }
.command-results [data-command-item] { width: 100%; min-height: 62px; padding: 9px 11px; border-radius: 14px; background: transparent; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.command-results [data-command-item] > i { width: 38px; height: 38px; border-radius: 11px; background: #ebe7e1; display: grid; place-items: center; }
.command-results [data-command-item] > i svg { width: 16px; }
.command-results [data-command-item] span { display: grid; gap: 2px; }
.command-results strong { font-size: 10px; }.command-results small { color: #8a8490; font-size: 7px; }
.command-results [data-command-item] > kbd { color: #a19aa6; font-size: 6px; }
.command-results [data-command-item]:hover, .command-results [data-command-item].active { background: #1b1822; color: #fff; }
.command-results [data-command-item]:hover > i, .command-results [data-command-item].active > i { background: rgba(124,92,255,.19); color: #c5b8ff; }
.command-results [data-command-item]:hover small, .command-results [data-command-item].active small { color: rgba(255,255,255,.42); }
.command-footer { min-height: 42px; padding: 0 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px; color: #8a8490; font-size: 7px; }
.command-footer span { display: flex; align-items: center; gap: 4px; }

/* Requirements drawer */
.requirements-drawer { position: fixed; z-index: 720; inset: 0; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.requirements-drawer.is-open { opacity: 1; pointer-events: auto; }
.requirements-backdrop { position: absolute; inset: 0; background: rgba(16,13,21,.42); backdrop-filter: blur(8px); }
.requirements-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(520px, 100vw); background: #f8f6f2; box-shadow: -30px 0 90px rgba(14,10,20,.28); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.85,.25,1); overflow-y: auto; }
.requirements-drawer.is-open .requirements-panel { transform: translateX(0); }
.requirements-head { position: sticky; z-index: 2; top: 0; min-height: 78px; padding: 0 20px; border-bottom: 1px solid var(--line); background: rgba(248,246,242,.88); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: space-between; }
.requirements-head > div { display: flex; align-items: center; gap: 11px; }
.requirements-head > div > span img { width: 40px; height: 40px; border-radius: 12px; }
.requirements-head p { margin: 0; display: grid; }.requirements-head small { color: var(--violet); font-size: 6px; font-weight: 850; letter-spacing: .12em; }.requirements-head strong { font-size: 12px; }
.requirements-head button { width: 40px; height: 40px; border-radius: 12px; background: #ebe7e1; display: grid; place-items: center; cursor: pointer; }
.requirements-content { padding: 22px; }
.requirements-note { margin: 0 0 22px; padding: 12px; border: 1px solid rgba(124,92,255,.2); border-radius: 13px; background: rgba(124,92,255,.07); display: flex; gap: 9px; color: var(--ink-soft); font-size: 8px; line-height: 1.55; }
.requirements-note svg { flex: 0 0 auto; width: 15px; color: var(--violet); }
.requirements-content section { padding: 23px 0; border-top: 1px solid var(--line); }
.requirements-content section small { color: var(--violet); font-size: 6px; font-weight: 850; letter-spacing: .12em; }
.requirements-content section h3 { margin: 9px 0 15px; font-family: 'Space Grotesk Variable'; font-size: 25px; letter-spacing: -.05em; }
.requirements-content ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.requirements-content li { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-soft); font-size: 9px; line-height: 1.5; }
.requirements-content li svg { flex: 0 0 auto; width: 15px; color: var(--violet); }
.requirements-actions { padding-top: 20px; display: flex; flex-wrap: wrap; gap: 9px; }

/* Gallery modal */
.gallery-modal { position: fixed; z-index: 710; inset: 0; display: grid; place-items: center; padding: 30px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.gallery-modal.is-open { opacity: 1; pointer-events: auto; }
.gallery-modal-backdrop { position: absolute; inset: 0; background: rgba(12,9,17,.72); backdrop-filter: blur(12px); }
.gallery-modal-dialog { position: relative; width: min(1440px, calc(100vw - 40px)); height: min(900px, calc(100vh - 40px)); padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 25px; background: #ede9e3; box-shadow: 0 50px 140px rgba(0,0,0,.45); overflow: hidden; transform: scale(.97); transition: transform .22s ease; }
.gallery-modal.is-open .gallery-modal-dialog { transform: scale(1); }
.gallery-modal-dialog > button { position: absolute; z-index: 5; right: 27px; top: 27px; width: 42px; height: 42px; border-radius: 13px; background: rgba(24,22,31,.9); color: #fff; display: grid; place-items: center; cursor: pointer; }
#gallery-modal-content { height: 100%; overflow: auto; border-radius: 17px; }
#gallery-modal-content .screen-header { border-radius: 17px 17px 0 0; }
#gallery-modal-content .product-app-shell { min-height: calc(100% - 34px); }
#gallery-modal-content .gallery-app { min-height: 100%; font-size: 11px; grid-template-columns: 220px 1fr; }
#gallery-modal-content .gallery-app-main { padding: 28px; }

/* Persistent conversion CTA */

/* V8 desktop width and readability refinement */
@media (min-width: 1500px) {
  :root { --max: 1580px; }
  .section-shell,
  .nav-shell { width: min(85vw, var(--max)); }
  .provider-label { padding-left: max(7.5vw, calc((100vw - 1580px) / 2)); }

  .desktop-nav a,
  .text-link { font-size: 14px; }
  .button { font-size: 14px; }
  .button-small { font-size: 13px; }
  .eyebrow-chip { font-size: 11px; }
  .hero-proof p,
  .hero-proof p strong { font-size: 12px; }
  .section-index,
  .provider-label { font-size: 10px; }
  .positioning-top p { font-size: 13px; }
  .positioning-answer span { font-size: 16px; }
  .showcase-caption { font-size: 13px; }
  .bento-copy small { font-size: 9px; }
  .bento-copy p { font-size: 14px; }
  .workflow-steps button > span { font-size: 9px; }
  .workflow-steps button p { font-size: 12px; }
  .price-top > span { font-size: 9px; }
  .price-top p { font-size: 13px; }
  .price-value b { font-size: 10px; }
  .price-value small { font-size: 8px; }
  .price-card li { font-size: 12px; }
  .pricing-note { font-size: 12px; }
  .pricing-clarity small { font-size: 7px; }
  .pricing-clarity strong { font-size: 11px; }
  .pricing-clarity span { font-size: 9px; }
  .journey-heading p { font-size: 16px; }
  .journey-step small { font-size: 8px; }
  .journey-step p { font-size: 14px; }
  .proof-heading p { font-size: 15px; }
  .proof-metrics span { font-size: 13px; }
  .proof-metrics small { font-size: 9px; }
  .roadmap-preview-head p { font-size: 14px; }
}

/* V13 navigation and Resources menu */
.nav-signin{font-size:13px;font-weight:760;color:#4f4b56;white-space:nowrap;transition:color .2s}.nav-signin:hover{color:var(--ink)}
.nav-resources{position:relative}.nav-resources summary{list-style:none;display:flex;align-items:center;gap:5px;color:#4f4b56;font-size:13px;font-weight:680;cursor:pointer;user-select:none}.nav-resources summary::-webkit-details-marker{display:none}.nav-resources summary i{width:14px;transition:transform .2s}.nav-resources[open] summary{color:var(--ink)}.nav-resources[open] summary i{transform:rotate(180deg)}
.nav-resources-menu{position:absolute;top:calc(100% + 18px);left:50%;width:330px;padding:10px;border:1px solid rgba(24,22,31,.1);border-radius:19px;background:rgba(255,255,255,.96);box-shadow:0 26px 70px rgba(25,20,38,.16);backdrop-filter:blur(20px);transform:translateX(-50%);display:grid;gap:3px}.nav-resources-menu:before{content:'';position:absolute;inset:-18px 0 auto;height:18px}.nav-resources-menu a{padding:12px;border-radius:13px;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center}.nav-resources-menu a:hover{background:#f3f0eb}.nav-resources-menu a>i{width:34px;height:34px;padding:8px;border-radius:10px;background:#eee9ff;color:var(--violet)}.nav-resources-menu span{display:grid;gap:2px}.nav-resources-menu strong{font-size:12px;color:var(--ink)}.nav-resources-menu small{font-size:9px;color:#77717c;font-weight:600}.mobile-resource-button{padding:19px 0;display:grid;grid-template-columns:44px 1fr auto;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);background:transparent;color:#fff;text-align:left;font-family:'Space Grotesk Variable';font-size:clamp(32px,9vw,54px);letter-spacing:-.055em;cursor:pointer}.mobile-resource-button span{font-family:'Manrope Variable';font-size:11px;color:rgba(255,255,255,.42);letter-spacing:0}.mobile-resource-button i{width:24px}.mobile-signin{color:#9e8dff!important}
@media(max-width:1120px){.desktop-nav{gap:20px;margin-left:30px}.nav-actions{gap:12px}.nav-signin{font-size:12px}}
@media(max-width:760px){.mobile-menu{overflow-y:auto}.mobile-menu nav{margin:45px 0 20px}.mobile-menu nav a,.mobile-resource-button{padding:13px 0;font-size:clamp(27px,8vw,42px)}.mobile-menu .button{margin-top:10px;flex:0 0 auto}}

/* V14 public navigation, journey pinning, and section-weight refinements */
.page-resources{position:relative}
.page-resources summary{list-style:none;display:flex;align-items:center;gap:6px;color:#4f4b56;font-size:13px;font-weight:760;cursor:pointer}
.page-resources summary::-webkit-details-marker{display:none}
.page-resources summary svg{width:14px;height:14px;transition:transform .2s ease}
.page-resources[open] summary svg{transform:rotate(180deg)}
.page-resources-menu{position:absolute;z-index:80;top:calc(100% + 14px);left:50%;width:300px;padding:10px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.97);box-shadow:0 22px 55px rgba(24,22,31,.14);transform:translateX(-50%);display:grid;gap:3px;backdrop-filter:blur(18px)}
.page-resources-menu>a{display:grid!important;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:10px!important;border-radius:13px;color:var(--ink)!important}
.page-resources-menu>a:hover{background:#f2efff}
.page-resources-menu>a>svg{width:34px;height:34px;padding:9px;border-radius:11px;background:#eee9ff;color:var(--violet)}
.page-resources-menu span{display:grid;gap:2px}.page-resources-menu strong{font-size:11px}.page-resources-menu small{color:var(--ink-soft);font-size:8px;line-height:1.35}

.journey-section{padding-block:110px}
.journey-layout{margin-top:0;grid-template-columns:minmax(0,1.12fr) minmax(360px,.68fr);gap:54px;align-items:start}
.journey-sticky-column{position:sticky;top:84px;align-self:start;min-height:calc(100vh - 110px);display:grid;grid-template-rows:auto minmax(0,1fr);gap:26px}
.journey-sticky-column .journey-heading{max-width:840px}
.journey-sticky-column .journey-heading h2{margin:15px 0 12px;font-size:clamp(42px,5vw,70px);line-height:.94}
.journey-sticky-column .journey-heading p{max-width:700px;font-size:14px;line-height:1.6}
.journey-sticky-column .journey-visual{position:static;min-height:0}
.journey-sticky-column .journey-window{height:min(58vh,620px);min-height:470px;display:grid;grid-template-rows:48px minmax(0,1fr) auto}
.journey-sticky-column .journey-canvas{min-height:0;height:auto}
.journey-steps{gap:78px;padding-block:22px 260px}
.journey-step{min-height:60vh;align-content:start;padding-top:34px}

.proof-section,.roadmap-preview{min-height:100svh;display:grid;align-content:center}
.roadmap-preview-head{grid-template-columns:170px minmax(0,1fr) auto;column-gap:64px;row-gap:24px;align-items:start}
.roadmap-preview-head>.section-index{padding-top:18px}

@media(max-width:1100px){
  .proof-section,.roadmap-preview{min-height:auto}
  .journey-sticky-column{position:static;min-height:auto;display:block}
  .journey-sticky-column .journey-visual{position:sticky;top:86px;margin-top:34px;z-index:2}
  .journey-sticky-column .journey-window{height:auto;min-height:0;display:block}
  .journey-sticky-column .journey-canvas{min-height:430px}
  .journey-layout{grid-template-columns:1fr}
  .journey-step{min-height:230px}
}
@media(max-width:720px){
  .page-resources-menu{left:auto;right:0;transform:none;width:min(310px,90vw)}
  .journey-sticky-column .journey-visual{position:static}
  .journey-sticky-column .journey-canvas{min-height:390px}
  .roadmap-preview-head{column-gap:0}
  .roadmap-preview-head>.section-index{padding-top:0}
}

/* V15 unified motion, navigation orientation, and journey emphasis */
:root{
  --motion-instant:160ms;
  --motion-fast:220ms;
  --motion-ui:300ms;
  --motion-story:480ms;
  --motion-long:720ms;
  --ease-standard:cubic-bezier(.2,.75,.25,1);
  --ease-emphasis:cubic-bezier(.16,1,.3,1);
  --orange-signal:#ff6846;
}
.skip-link{position:fixed;z-index:500;left:18px;top:14px;padding:10px 14px;border-radius:12px;background:#17151e;color:#fff;font-size:12px;font-weight:800;transform:translateY(-150%);transition:transform var(--motion-fast) var(--ease-standard)}
.skip-link:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid rgba(124,92,255,.42);outline-offset:3px}
.scroll-section-label{position:fixed;z-index:96;right:max(24px,7.5vw);top:88px;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(24,22,31,.08);border-radius:999px;background:rgba(248,246,242,.78);box-shadow:0 8px 24px rgba(24,22,31,.07);backdrop-filter:blur(14px);opacity:0;transform:translateY(-8px);transition:opacity var(--motion-ui) var(--ease-standard),transform var(--motion-ui) var(--ease-standard);pointer-events:none}
.site-header.is-scrolled~.mobile-menu~main .scroll-section-label,.scroll-section-label.is-visible{opacity:1;transform:none}
.scroll-section-label i{width:7px;height:7px;border-radius:50%;background:var(--orange-signal);box-shadow:0 0 0 5px rgba(255,104,70,.11)}
.scroll-section-label span{font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#6b6570}
.desktop-nav>a,.nav-resources>summary{position:relative;transition:color var(--motion-fast) ease,transform var(--motion-fast) ease}
.desktop-nav>a::after,.nav-resources>summary::after{content:'';position:absolute;left:50%;bottom:-11px;width:5px;height:5px;border-radius:50%;background:var(--orange-signal);opacity:0;transform:translate(-50%,6px) scale(.6);transition:opacity var(--motion-fast) ease,transform var(--motion-fast) var(--ease-emphasis)}
.desktop-nav>a.is-active,.nav-resources.is-active>summary{color:var(--ink);font-weight:850}
.desktop-nav>a.is-active::after,.nav-resources.is-active>summary::after{opacity:1;transform:translate(-50%,0) scale(1)}

/* Journey state changes are intentionally more visible than passive decoration. */
.journey-project-core,.journey-provider-card,.journey-output-card,.journey-packet,.journey-source-card{
  transition:opacity var(--motion-story) var(--ease-standard),transform var(--motion-story) var(--ease-emphasis),box-shadow var(--motion-story) ease,border-color var(--motion-story) ease,filter var(--motion-story) ease;
  transform-origin:center;
}
.journey-step>span{transition:transform var(--motion-story) var(--ease-emphasis),background var(--motion-ui) ease,color var(--motion-ui) ease,box-shadow var(--motion-story) ease}
.journey-step.active>span{transform:scale(1.18);box-shadow:0 14px 34px rgba(124,92,255,.34)}
.journey-status{min-height:78px;padding:14px 19px;transition:background var(--motion-story) ease}
.journey-status span{font-size:8px}
.journey-status strong{font-size:13px;line-height:1.35}
.journey-status.is-changing span,.journey-status.is-changing strong{animation:journey-caption-in var(--motion-story) var(--ease-emphasis)}
@keyframes journey-caption-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.journey-visual[data-journey-active="0"] .journey-project-core{transform:translate(-50%,-50%) scale(1.12);border-color:rgba(255,104,70,.62);box-shadow:0 0 0 7px rgba(255,104,70,.08),0 28px 65px rgba(124,92,255,.28)}
.journey-visual[data-journey-active="1"] .journey-packet{transform:scale(1.18);border-color:rgba(255,104,70,.55);box-shadow:0 0 0 7px rgba(255,104,70,.07),0 24px 55px rgba(0,0,0,.32)}
.journey-visual[data-journey-active="2"] .journey-provider-card{transform:translateY(0) scale(1.13);border-color:rgba(255,104,70,.55);box-shadow:0 0 0 7px rgba(255,104,70,.07),0 28px 65px rgba(0,0,0,.34)}
.journey-visual[data-journey-active="3"] .journey-output-card{transform:translateY(0) scale(1.13);border-color:rgba(255,104,70,.55);box-shadow:0 0 0 7px rgba(255,104,70,.07),0 28px 65px rgba(0,0,0,.34)}
.journey-visual[data-journey-active="4"] .journey-project-core{transform:translate(-50%,-50%) scale(1.08);border-color:rgba(255,104,70,.5)}
.journey-visual[data-journey-active="4"] .journey-packet{transform:scale(1.16);border-color:rgba(255,104,70,.55);box-shadow:0 0 0 7px rgba(255,104,70,.07),0 24px 55px rgba(0,0,0,.32)}
.journey-visual[data-journey-active="0"] .journey-project-core::after,
.journey-visual[data-journey-active="1"] .journey-packet::after,
.journey-visual[data-journey-active="2"] .journey-provider-card::after,
.journey-visual[data-journey-active="3"] .journey-output-card::after,
.journey-visual[data-journey-active="4"] .journey-packet::after{content:'';position:absolute;right:-5px;top:-5px;width:11px;height:11px;border:3px solid #1b1822;border-radius:50%;background:var(--orange-signal);box-shadow:0 0 0 8px rgba(255,104,70,.11);animation:journey-signal-pulse 1.5s ease-in-out infinite}
@keyframes journey-signal-pulse{50%{transform:scale(1.15);box-shadow:0 0 0 13px rgba(255,104,70,0)}}
.journey-visual[data-journey-active="0"] .line-a,
.journey-visual[data-journey-active="1"] .line-a,
.journey-visual[data-journey-active="2"] .line-b,
.journey-visual[data-journey-active="3"] .line-c,
.journey-visual[data-journey-active="4"] .line-d{stroke:#ff876e;stroke-width:3;filter:drop-shadow(0 0 6px rgba(255,104,70,.5))}

/* Product-aware card behavior without generic over-animation. */
.proof-metrics article,.roadmap-card,.price-card li{transition:transform var(--motion-ui) var(--ease-standard),background var(--motion-ui) ease,border-color var(--motion-ui) ease,box-shadow var(--motion-ui) ease}
.proof-metrics article:hover,.proof-metrics article:focus-visible{transform:translateY(-5px);background:#fff;box-shadow:0 20px 48px rgba(35,27,52,.08)}
.roadmap-card:hover,.roadmap-card:focus-visible{transform:translateY(-6px);box-shadow:0 24px 62px rgba(35,27,52,.11)}
.price-card li[data-product-tip]{border-radius:10px;cursor:help}
.price-card li[data-product-tip]:hover,.price-card li[data-product-tip]:focus-visible{transform:translateX(5px);background:rgba(124,92,255,.07)}

/* More deliberate mobile behavior and touch targets. */
@media(max-width:760px){
  .scroll-section-label{display:none}
  .journey-step.active>span{transform:scale(1.1)}
  .journey-status{min-height:70px}.journey-status strong{font-size:12px}
  .mobile-menu nav a,.mobile-resource-button{min-height:52px}
  .button,.faq-item,.gallery-tabs button,.showcase-tabs button{min-height:44px}
  .hero h1{font-size:clamp(58px,16vw,84px)}
  .hero-actions{align-items:stretch}.hero-actions .button{justify-content:center}
  .pricing-grid,.pricing-clarity{gap:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .journey-project-core,.journey-provider-card,.journey-output-card,.journey-packet{filter:none!important}
}
.mobile-menu nav a.is-active{background:rgba(124,92,255,.16);color:#fff}.mobile-menu nav a.is-active>span{color:#ff876e}
.nav-resources-status{margin-top:5px;padding:10px 12px;border-top:1px solid rgba(24,22,31,.08);display:flex;align-items:center;gap:8px;color:#746e79;font-size:8px;font-weight:800}.nav-resources-status i{width:7px;height:7px;border-radius:50%;background:#ff6846;box-shadow:0 0 0 5px rgba(255,104,70,.1)}


/* V16 readability, organization licensing, and seat management */
:root{
  --text-body:1rem;
  --text-support:.875rem;
  --text-small:.8125rem;
  --text-label:.75rem;
}
/* Customer-facing marketing copy never relies on micro-interface sizing. */
:where(.hero-copy>p,.positioning-copy p,.section-heading p,.bento-copy p,.journey-intro p,.journey-step p,.trust-card p,.privacy-copy p,.proof-heading p,.pricing-heading p,.price-top p,.pricing-clarity span,.pricing-note p,.roadmap-preview-head p,.roadmap-card p,.faq-intro p,.faq-item p,.final-cta p){font-size:var(--text-support)!important;line-height:1.62!important}
:where(.price-card li,.use-case span,.trust-banner span,.release-meta,.proof-release span){font-size:var(--text-small)!important;line-height:1.5}
:where(.section-index,.bento-copy>small,.roadmap-card>small,.pricing-clarity small,.cta-kicker){font-size:var(--text-label)!important}
@media(max-width:760px){:where(.hero-copy>p,.positioning-copy p,.section-heading p,.bento-copy p,.journey-intro p,.journey-step p,.trust-card p,.privacy-copy p,.proof-heading p,.pricing-heading p,.price-top p,.pricing-clarity span,.pricing-note p,.roadmap-preview-head p,.roadmap-card p,.faq-intro p,.faq-item p,.final-cta p){font-size:14px!important}}
.organization-pricing{margin-top:28px;padding:30px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,#fff 0%,#f2efff 100%);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:30px;align-items:center}
.organization-pricing-copy>small{color:var(--violet);font-size:12px;font-weight:850;letter-spacing:.12em}.organization-pricing-copy h3{margin:10px 0 10px;font-family:'Space Grotesk Variable';font-size:clamp(30px,3vw,46px);line-height:1;letter-spacing:-.055em}.organization-pricing-copy p{max-width:720px;margin:0;color:var(--ink-soft);font-size:14px;line-height:1.65}.seat-trust{margin-top:19px;display:flex;flex-wrap:wrap;gap:9px}.seat-trust span{padding:8px 10px;border:1px solid rgba(24,22,31,.09);border-radius:999px;background:#fff;font-size:12px;font-weight:750}
.seat-calculator{padding:22px;border:1px solid rgba(124,92,255,.18);border-radius:22px;background:rgba(255,255,255,.83);box-shadow:0 18px 55px rgba(52,34,104,.08)}.seat-calculator-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.seat-calculator-row:last-of-type{border:0}.seat-calculator label{font-size:13px;font-weight:800}.seat-calculator select,.seat-calculator input{min-height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 12px;font-size:14px}.seat-quantity-control{display:flex;align-items:center;gap:8px}.seat-quantity-control button{width:38px;height:38px;border-radius:11px;background:#eee9ff;color:var(--violet);font-size:20px;cursor:pointer}.seat-quantity-control input{width:62px;text-align:center}.seat-total{padding-top:17px;display:flex;align-items:end;justify-content:space-between;gap:16px}.seat-total span{display:grid;gap:3px;color:var(--ink-soft);font-size:12px}.seat-total strong{font-family:'Space Grotesk Variable';font-size:30px;color:var(--ink);letter-spacing:-.05em}.seat-total b{font-size:13px}.seat-total a{white-space:nowrap}
@media(max-width:900px){.organization-pricing{grid-template-columns:1fr}.seat-total{align-items:stretch;flex-direction:column}.seat-total a{width:100%}}

/* V16 landing-page readability system — customer copy never relies on micro type */
.landing-page {
  --landing-body: 1rem;
  --landing-support: .875rem;
  --landing-meta: .75rem;
}
.landing-page :where(.site-header a,.site-header button,.button,.text-arrow,.footer-column a,.footer-chat-link) {
  font-size: var(--landing-support);
}
.landing-page :where(
  .hero-copy > p,
  .shift-copy span,
  .comparison-intro p,
  .comparison-side p,
  .product-intro p,
  .bento-copy p,
  .workflow-intro p,
  .workflow-steps button p,
  .journey-intro p,
  .journey-step p,
  .control-console-copy p,
  .proof-release p > span,
  .pricing-heading p,
  .price-top p,
  .price-card li,
  .organization-pricing-copy p,
  .pricing-clarity span,
  .pricing-note p,
  .roadmap-preview-head p,
  .roadmap-card p,
  .faq-intro p,
  .faq-item > p,
  .cta-content > p,
  .footer-brand p
) {
  font-size: var(--landing-support) !important;
  line-height: 1.62 !important;
}
.landing-page :where(
  .section-index,
  .bento-copy > small,
  .proof-release small,
  .price-top > span,
  .featured-label,
  .organization-pricing-copy > small,
  .pricing-clarity small,
  .roadmap-card > small,
  .cta-kicker
) {
  font-size: var(--landing-meta) !important;
  line-height: 1.35;
}
.landing-page .price-card .price-value small,
.landing-page .price-card .price-value b,
.landing-page .proof-metrics small,
.landing-page .roadmap-card > span,
.landing-page .seat-trust span,
.landing-page .comparison-outcomes span,
.landing-page .release-meta,
.landing-page .footer-bottom {
  font-size: .8125rem !important;
  line-height: 1.5;
}
.landing-page .pricing-clarity strong { font-size: .9375rem !important; }
.landing-page .pricing-note { max-width: 860px; }
.landing-page .pricing-note strong { font-size: .9375rem; }
.landing-page .faq-item > div strong { font-size: clamp(1rem, 1.1vw, 1.125rem); }
.landing-page .roadmap-card h3 { margin-top: 44px; }
.landing-page .organization-pricing select,
.landing-page .organization-pricing input,
.landing-page .organization-pricing label,
.landing-page .seat-total b,
.landing-page .seat-total a { font-size: var(--landing-support); }

@media (max-width: 720px) {
  .landing-page {
    --landing-support: .9375rem;
    --landing-meta: .75rem;
  }
}

/* V17 trial offer */
.trial-offer{margin:28px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 22px;border:1px solid rgba(122,91,255,.22);border-radius:24px;background:linear-gradient(110deg,#f4efff,#fff 60%,#eaf4ff)}.trial-offer>div{display:flex;align-items:center;gap:16px}.trial-offer>div>span{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#17151e}.trial-offer img{width:28px;height:28px}.trial-offer p{margin:0;display:grid;gap:4px}.trial-offer small{color:var(--violet);font-size:12px;font-weight:850;letter-spacing:.12em}.trial-offer strong{font-size:18px}.trial-offer em{font-style:normal;color:var(--soft);font-size:14px;line-height:1.5}.organization-trial-note{margin:16px 0 0;color:var(--soft);font-size:14px;line-height:1.55}
@media(max-width:760px){.trial-offer{align-items:flex-start;flex-direction:column}.trial-offer .button{width:100%;justify-content:center}}

/* v20.5 — unified pricing composition */
.pricing-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr);gap:clamp(52px,7vw,110px);align-items:center;margin-top:10px}
.pricing-story{display:grid;grid-template-columns:1fr;gap:36px;align-self:start;padding-top:38px}.pricing-story .section-index{justify-self:start}.pricing-story h2{margin:0;font-family:'Space Grotesk Variable';font-size:clamp(58px,6.3vw,92px);line-height:.94;letter-spacing:-.072em;font-weight:580}.pricing-story p{max-width:600px;margin:28px 0 0;color:#817b86;font-size:16px;line-height:1.7}.pricing-principles{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.pricing-principles span{padding:9px 12px;border:1px solid rgba(24,22,31,.1);border-radius:999px;background:rgba(255,255,255,.68);font-size:12px;font-weight:760}
.unified-pricing-card{position:relative;padding:36px;border-radius:30px;background:#1c1923;color:#fff;box-shadow:0 30px 80px rgba(24,22,31,.18);overflow:hidden}.unified-pricing-card:after{content:'';position:absolute;right:-120px;bottom:-150px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.24),transparent 68%);pointer-events:none}.unified-card-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:28px;align-items:flex-start}.unified-card-top small{color:#aaa3af;font-size:11px;font-weight:850;letter-spacing:.12em}.unified-card-top h3{margin:10px 0 10px;font-family:'Space Grotesk Variable';font-size:42px;letter-spacing:-.055em}.unified-card-top p{max-width:520px;margin:0;color:#aaa3af;font-size:14px;line-height:1.6}.unified-card-badge{flex:0 0 auto;padding:9px 12px;border-radius:999px;background:var(--violet);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.billing-toggle-card{position:relative;z-index:1;justify-content:stretch;width:100%;margin:30px 0 20px;padding:5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}.billing-toggle-card button{flex:1;color:#d3ced7}.billing-toggle-card button.active{background:#fff;color:#17151e}.billing-toggle-card button span{color:var(--violet)}
.capacity-picker{position:relative;z-index:1}.capacity-picker-label{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:11px}.capacity-picker-label>span{font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.capacity-picker-label small{color:#aaa3af;font-size:11px}.capacity-options{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.capacity-options button{min-height:44px;padding:9px 8px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.055);color:#c9c4cd;font-size:11px;font-weight:800;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease}.capacity-options button:hover{transform:translateY(-1px);background:rgba(255,255,255,.1)}.capacity-options button.active{background:#fff;color:#17151e}
.unified-price-row{position:relative;z-index:1;display:flex;justify-content:space-between;gap:24px;align-items:end;padding:30px 0 24px}.unified-price-value{margin:0}.capacity-economics{display:grid;gap:4px;text-align:right}.capacity-economics span{color:#aaa3af;font-size:11px;font-weight:750}.capacity-economics strong{font-size:17px}.capacity-economics small{color:#aaa3af;font-size:11px}.unified-primary-cta{position:relative;z-index:1;width:100%;justify-content:center}.unified-trial-link{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;color:#c3bdc8;font-size:12px;font-weight:720}.unified-trial-link:hover{color:#fff}.unified-trial-link svg{width:14px;height:14px}.unified-card-rule{position:relative;z-index:1;height:1px;background:rgba(255,255,255,.09);margin:24px 0 18px}.unified-card-facts{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.unified-card-facts span{display:flex;align-items:center;gap:7px;color:#b8b2bd;font-size:11px;line-height:1.4}.unified-card-facts svg{width:15px;height:15px;color:#a993ff;flex:0 0 auto}
@media(max-width:1040px){.pricing-main{grid-template-columns:1fr;gap:38px}.pricing-story{padding-top:0}.unified-pricing-card{max-width:760px;width:100%;margin-inline:auto}}
@media(max-width:640px){.pricing-story h2{font-size:clamp(48px,15vw,68px)}.unified-pricing-card{padding:26px 22px;border-radius:24px}.unified-card-top{display:grid}.unified-card-badge{justify-self:start}.capacity-picker-label{align-items:flex-start;flex-direction:column;gap:5px}.capacity-options{grid-template-columns:repeat(2,1fr)}.capacity-options button:first-child{grid-column:span 2}.unified-price-row{align-items:flex-start;flex-direction:column}.capacity-economics{text-align:left}.unified-card-facts{grid-template-columns:1fr}}

/* v20.6 — unified pricing layout + Founder reveal */
.pricing-section{padding-block:clamp(100px,10vw,160px)}
.pricing-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr);gap:clamp(48px,7vw,110px);align-items:center}
.pricing-story{display:grid;gap:28px;align-self:start;padding-top:18px}
.pricing-story .section-index{display:inline-flex;align-items:center;gap:12px;color:#817a88;font-size:11px;font-weight:800;letter-spacing:.14em}
.pricing-story .section-index:before{content:"";width:18px;height:1px;background:#817a88}
.pricing-story h2{margin:0 0 24px;font-size:clamp(48px,5.4vw,82px);line-height:.94;letter-spacing:-.055em;color:#17141d}
.pricing-story p{max-width:620px;margin:0;color:#6c6571;font-size:clamp(16px,1.15vw,20px);line-height:1.6}
.pricing-principles{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pricing-principles span{display:inline-flex;align-items:center;min-height:36px;padding:8px 12px;border:1px solid rgba(23,20,29,.1);border-radius:999px;background:rgba(255,255,255,.55);font-size:11px;font-weight:750;color:#39333e}
.unified-pricing-card{position:relative;overflow:hidden;padding:34px;border-radius:30px;background:#1c1923;color:#fff;box-shadow:0 30px 80px rgba(26,22,32,.18);border:1px solid rgba(255,255,255,.06)}
.unified-pricing-card:after{content:"";position:absolute;right:-100px;bottom:-150px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.22),rgba(124,92,255,0) 68%);pointer-events:none}
.unified-pricing-card>*{position:relative;z-index:1}
.unified-pricing-card .price-card-head{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;margin-bottom:26px}
.unified-pricing-card .price-card-head small{display:block;color:#9d96a3;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:10px}
.unified-pricing-card .price-card-head h3{margin:0;font-size:34px;letter-spacing:-.04em}
.unified-pricing-card .price-card-head p{margin:12px 0 0;max-width:500px;color:#aaa2b0;line-height:1.55}
.unified-pricing-card .billing-toggle{display:flex;align-items:center;gap:4px;padding:4px;border-radius:15px;background:#28242e;border:1px solid rgba(255,255,255,.09)}
.unified-pricing-card .billing-toggle button{border:0;background:transparent;color:#a9a1ae;border-radius:11px;padding:11px 13px;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap}
.unified-pricing-card .billing-toggle button.active{background:#fff;color:#17141d;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.unified-pricing-card .billing-toggle b{color:#8b6cff;font-size:9px;margin-left:3px}
.capacity-picker{padding:22px 0;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}
.capacity-picker-label{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:13px}
.capacity-picker-label span{font-size:12px;font-weight:800;color:#fff}
.capacity-picker-label small{font-size:10px;color:#8f8795}
.capacity-options{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.capacity-options button{min-height:42px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#28242e;color:#aaa2b0;font-size:10px;font-weight:750;cursor:pointer;transition:.18s ease}
.capacity-options button:hover{border-color:rgba(139,108,255,.5);color:#fff}
.capacity-options button.active{background:#fff;border-color:#fff;color:#17141d;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.unified-price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:27px 0 23px}
.unified-price-row .price-value{display:flex;align-items:flex-start;gap:5px}
.unified-price-row .price-value>span:first-child{font-size:18px;margin-top:9px}
.unified-price-row .price-value strong{font-size:64px;line-height:.9;letter-spacing:-.065em}
.unified-price-row .price-value p{margin:8px 0 0;font-size:11px;color:#a9a1ae}
.unified-price-row .price-value p b{display:block;color:#fff;font-size:12px;margin-bottom:3px}
.unified-price-row .price-meta{text-align:right;color:#958d9b;font-size:10px;line-height:1.55}
.unified-price-row .price-meta strong{display:block;color:#fff;font-size:13px;margin-bottom:3px}
.unified-pricing-card .pricing-actions{display:grid;grid-template-columns:1fr;gap:11px}
.unified-pricing-card .pricing-actions .button{width:100%;min-height:56px;border-radius:15px}
.unified-pricing-card .trial-link{display:flex;justify-content:center;align-items:center;gap:7px;color:#b9b1bf;font-size:11px;text-decoration:none;padding:3px 0 6px}
.unified-pricing-card .trial-link:hover{color:#fff}
.unified-pricing-card .pricing-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09)}
.unified-pricing-card .pricing-features span{display:flex;gap:9px;align-items:center;color:#aba3b0;font-size:10px}
.unified-pricing-card .pricing-features svg{width:15px;height:15px;color:#8b6cff}
.pricing-clarity{margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pricing-clarity article{padding:24px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.52);display:flex;gap:16px;align-items:flex-start}
.pricing-clarity article>i{width:40px;height:40px;border-radius:12px;background:#1c1923;color:#fff;display:grid;place-items:center;flex:0 0 auto}
.pricing-clarity article>i svg{width:18px;height:18px}
.pricing-clarity article p{margin:0;display:grid;gap:6px}.pricing-clarity article small{font-size:9px;letter-spacing:.12em;font-weight:800;color:#8d8591}.pricing-clarity article strong{font-size:15px}.pricing-clarity article span{font-size:11px;color:#716a75;line-height:1.55}
.pricing-note{margin-top:16px;padding:18px 20px;border-radius:16px;background:rgba(124,92,255,.07);border:1px solid rgba(124,92,255,.14);display:flex;gap:12px;align-items:flex-start}.pricing-note svg{width:18px;color:#7c5cff;flex:0 0 auto}.pricing-note p{margin:0;font-size:11px;color:#6d6572;line-height:1.55}.pricing-note strong{color:#26212b}

.founder-reveal[hidden]{display:none!important}.founder-reveal{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:24px}.founder-reveal-backdrop{position:absolute;inset:0;background:rgba(13,10,18,.7);backdrop-filter:blur(14px)}.founder-reveal-dialog{position:relative;width:min(760px,calc(100vw - 32px));padding:36px;border-radius:30px;background:#f6f2ec;box-shadow:0 50px 140px rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.35)}.founder-reveal-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border:0;border-radius:12px;background:#e9e4de;display:grid;place-items:center;cursor:pointer}.founder-reveal-close svg{width:18px}.founder-reveal-head small{font-size:10px;font-weight:850;letter-spacing:.14em;color:#7c5cff}.founder-reveal-head h2{font-size:clamp(34px,4.2vw,54px);line-height:.98;letter-spacing:-.05em;margin:12px 0 16px;max-width:620px}.founder-reveal-head p{margin:0;max-width:640px;color:#6f6873;line-height:1.6}.founder-reveal-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}.founder-reveal-option{text-align:left;border:1px solid #dcd5de;border-radius:20px;background:#fff;padding:23px;cursor:pointer;display:grid;gap:9px;transition:.18s ease}.founder-reveal-option:hover{transform:translateY(-3px);border-color:#a98cff;box-shadow:0 16px 38px rgba(63,42,95,.12)}.founder-reveal-option.team{background:#1c1923;color:#fff;border-color:#1c1923}.founder-reveal-option small{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#817986}.founder-reveal-option.team small{color:#aaa2b0}.founder-reveal-option strong{font-size:30px;letter-spacing:-.04em}.founder-reveal-option>span{font-size:11px;line-height:1.5;color:#716a75}.founder-reveal-option.team>span{color:#bbb3bf}.founder-reveal-savings{display:flex!important;align-items:center;gap:7px;margin-top:7px;color:#7c5cff!important;font-weight:750}.founder-reveal-savings svg{width:15px}.founder-reveal-option.team .founder-reveal-savings{color:#9b80ff!important}.founder-reveal-actions{margin-top:18px;text-align:center}.founder-reveal-actions button{border:0;background:transparent;color:#6f6873;text-decoration:underline;cursor:pointer;font-size:11px}

@media (max-width:980px){.pricing-main{grid-template-columns:1fr;gap:42px}.pricing-story{padding-top:0}.unified-pricing-card{max-width:680px;width:100%;margin-inline:auto}.pricing-story h2{font-size:clamp(48px,9vw,72px)}.pricing-clarity{grid-template-columns:1fr}}
@media (max-width:640px){.unified-pricing-card{padding:24px;border-radius:24px}.unified-pricing-card .price-card-head{grid-template-columns:1fr}.unified-pricing-card .billing-toggle{width:100%}.unified-pricing-card .billing-toggle button{flex:1}.capacity-picker-label{display:grid;gap:4px}.capacity-options{grid-template-columns:repeat(2,1fr)}.capacity-options button:first-child{grid-column:1/-1}.unified-price-row{align-items:flex-start}.unified-price-row .price-value strong{font-size:55px}.unified-price-row .price-meta{display:none}.unified-pricing-card .pricing-features{grid-template-columns:1fr}.founder-reveal{padding:10px}.founder-reveal-dialog{padding:28px 20px 22px}.founder-reveal-options{grid-template-columns:1fr}.founder-reveal-head h2{padding-right:35px}}

/* =========================================================
   V20.19 — The Shift + Project Record cinematic story
   ========================================================= */
.shift-story { padding: 132px 0 0; overflow: clip; }
.shift-story-copy { position: relative; }
.shift-story .positioning-top { align-items: end; }
.shift-story .positioning-top p { max-width: 620px; }
.shift-lines { margin-top: 44px; }
.shift-lines h2 { max-width: 1180px; }
.shift-intro-grid { margin-top: 34px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); gap: 64px; align-items: end; }
.shift-lede { margin: 0; max-width: 760px; display: grid; gap: 16px; }
.shift-lede strong { font-family: 'Space Grotesk Variable'; font-size: clamp(24px,3vw,42px); line-height: 1.08; letter-spacing: -.045em; }
.shift-lede span { max-width: 700px; color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.shift-fragments { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.shift-fragments span { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.5); display: inline-flex; align-items: center; gap: 8px; color: #6f6875; font-size: 9px; font-weight: 740; }
.shift-fragments svg { width: 14px; color: var(--violet); }
.shift-sticky-wrap { margin-top: 90px; min-height: 100vh; }
.shift-sticky-wrap > .section-shell { padding-top: 28px; padding-bottom: 58px; }
.shift-stage-heading { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.shift-stage-heading span { color: var(--violet); font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.shift-stage-heading p { margin: 0; color: var(--ink-soft); font-size: 10px; }
.shift-comparison { margin-top: 0; min-height: min(650px,74vh); box-shadow: 0 30px 90px rgba(37,29,55,.15); }
.shift-comparison.is-complete { box-shadow: 0 38px 120px rgba(55,38,92,.22); }
.shift-comparison .comparison-range { pointer-events: none; }
.shift-comparison.is-interactive .comparison-range { pointer-events: auto; }
.shift-comparison .comparison-divider span { transition: transform .3s ease, box-shadow .3s ease; }
.shift-comparison.is-interactive:hover .comparison-divider span { transform: translate(-50%,-50%) scale(1.06); box-shadow: 0 16px 44px rgba(24,22,31,.32),0 0 0 8px rgba(255,255,255,.12); }
.comparison-divider span b { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); padding: 5px 8px; border-radius: 999px; background: rgba(24,22,31,.82); color: #fff; font-size: 6px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .25s ease; white-space: nowrap; }
.shift-comparison.is-interactive .comparison-divider span b { opacity: .8; }
.shift-drag-hint { position: absolute; z-index: 11; left: 50%; bottom: 18px; transform: translate(-50%,8px); padding: 8px 12px; border-radius: 999px; background: rgba(20,17,27,.78); color: rgba(255,255,255,.86); display: flex; align-items: center; gap: 7px; font-size: 7px; font-weight: 760; letter-spacing: .04em; opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .35s ease; backdrop-filter: blur(12px); }
.shift-drag-hint svg { width: 13px; }
.shift-comparison.is-interactive .shift-drag-hint { opacity: 1; transform: translate(-50%,0); }
.record-event { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(21,18,28,.58); color: rgba(255,255,255,.58); font-size: 6px; backdrop-filter: blur(10px); opacity: .72; }
.record-event i { width: 5px; height: 5px; border-radius: 50%; background: #a98dff; box-shadow: 0 0 12px rgba(169,141,255,.7); }
.record-event.e1 { left: 29%; top: 28%; }
.record-event.e2 { right: 27%; top: 34%; }
.record-event.e3 { left: 27%; bottom: 29%; }
.record-event.e4 { right: 25%; bottom: 24%; }
.connected-project > svg path { stroke-dashoffset: 0; animation: record-flow 9s linear infinite; }
@keyframes record-flow { to { stroke-dashoffset: -90; } }
.connected-center.project-record-core { width: 218px; padding: 20px; background: rgba(126,101,178,.23); box-shadow: 0 24px 70px rgba(41,27,72,.42), inset 0 0 32px rgba(163,137,255,.08); }
.connected-center.project-record-core strong { font-size: 13px; }
.connected-node { overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease; }
.connected-node em { grid-column: 2; max-height: 0; color: #bcaeff; font-size: 6px; font-style: normal; opacity: 0; transform: translateY(5px); transition: .3s ease; }
.connected-node:hover { transform: translateY(-4px); border-color: rgba(190,172,255,.28); background: rgba(255,255,255,.1); }
.connected-node:hover em { max-height: 14px; margin-top: 3px; opacity: 1; transform: translateY(0); }
.shift-closing { padding: 72px 0 18px; text-align: center; }
.shift-closing p,.shift-closing strong { margin: 0; display: block; font-family: 'Space Grotesk Variable'; font-size: clamp(34px,5.2vw,72px); line-height: .98; letter-spacing: -.06em; }
.shift-closing p { color: #9a939e; font-weight: 520; }
.shift-closing strong { color: var(--ink); font-weight: 720; }

/* Camera push into the record */
.record-portal { position: relative; height: 230vh; margin-top: 28px; background: #1c1923; color: #fff; }
.record-portal-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.record-portal-glow { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 50% 50%, rgba(124,92,255,.24), transparent 32%), linear-gradient(180deg,#1f1b27,#18151f); transform: scale(.75); opacity: .72; }
.record-portal-core { position: relative; z-index: 3; width: 240px; min-height: 170px; padding: 27px 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(111,91,151,.28); box-shadow: 0 30px 100px rgba(0,0,0,.38), inset 0 0 44px rgba(187,166,255,.06); display: grid; place-items: center; align-content: center; text-align: center; transform-origin: center; backdrop-filter: blur(18px); }
.record-portal-core img { width: 58px; height: 58px; margin-bottom: 13px; border-radius: 17px; }
.record-portal-core strong { font-family: 'Space Grotesk Variable'; font-size: 18px; letter-spacing: -.04em; }
.record-portal-core small { margin-top: 5px; color: rgba(255,255,255,.46); font-size: 7px; }
.record-portal-node { position: absolute; z-index: 2; width: 130px; min-height: 58px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.045); display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.65); font-size: 8px; backdrop-filter: blur(10px); }
.record-portal-node svg { width: 15px; color: #bba8ff; }
.portal-n1 { left: 16%; top: 28%; }.portal-n2 { right: 16%; top: 28%; }.portal-n3 { left: 16%; bottom: 24%; }.portal-n4 { right: 16%; bottom: 24%; }
.record-portal-line { position: absolute; bottom: 11vh; margin: 0; color: rgba(255,255,255,.48); font-family: 'Space Grotesk Variable'; font-size: 13px; letter-spacing: -.02em; }

/* Project Record architecture */
.project-record-section { position: relative; z-index: 2; margin-top: -1px; padding: 132px 0 144px; background: #18151f; color: #fff; overflow: hidden; }
.project-record-section::before { content:""; position:absolute; width:900px; height:900px; left:50%; top:-520px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(124,92,255,.18),transparent 66%); pointer-events:none; }
.record-heading { position: relative; }
.record-heading .section-index { color: #aa96ff; }
.record-heading h2 { color: #fff; }
.record-heading p { color: rgba(255,255,255,.52); }
.record-architecture { position: relative; margin-top: 70px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.09); border-left: 1px solid rgba(255,255,255,.09); }
.record-layer { position: relative; min-height: 250px; padding: 32px 34px; border-right: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); display: grid; grid-template-columns: 42px 44px 1fr; gap: 18px; align-items: start; background: rgba(255,255,255,.018); transition: background .35s ease, transform .35s ease; }
.record-layer:hover { background: rgba(124,92,255,.055); }
.record-layer > span { color: rgba(255,255,255,.24); font-family: 'Space Grotesk Variable'; font-size: 12px; }
.record-layer > i { width: 42px; height: 42px; border-radius: 13px; background: rgba(124,92,255,.12); color: #bfaeff; display: grid; place-items: center; }
.record-layer > i svg { width: 18px; }
.record-layer small { color: #9f8dff; font-size: 7px; font-weight: 820; letter-spacing: .13em; }
.record-layer h3 { margin: 12px 0 8px; font-family: 'Space Grotesk Variable'; font-size: clamp(24px,2.5vw,35px); line-height: 1; letter-spacing: -.045em; }
.record-layer p { margin: 0; max-width: 520px; color: rgba(255,255,255,.46); font-size: 11px; line-height: 1.7; }
.record-summary { margin-top: 22px; padding: 22px 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(255,255,255,.04); display: grid; grid-template-columns: 46px 1fr auto; gap: 15px; align-items: center; }
.record-summary img { width: 46px; height: 46px; border-radius: 14px; }
.record-summary p { margin: 0; display: grid; gap: 3px; }
.record-summary small { color: #a992ff; font-size: 6px; letter-spacing: .13em; }
.record-summary strong { font-family: 'Space Grotesk Variable'; font-size: 15px; letter-spacing: -.025em; }
.record-summary > span { color: rgba(255,255,255,.38); font-size: 8px; }

@media (max-width: 900px) {
  .shift-story { padding-top: 92px; }
  .shift-intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .shift-fragments { justify-content: flex-start; }
  .shift-sticky-wrap { margin-top: 64px; min-height: auto; }
  .shift-stage-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .shift-comparison { min-height: 600px; }
  .record-event { display: none; }
  .record-portal { height: 160vh; }
  .record-portal-node { opacity: .5; }
  .portal-n1,.portal-n3 { left: 5%; }.portal-n2,.portal-n4 { right: 5%; }
  .record-architecture { grid-template-columns: 1fr; }
  .record-summary { grid-template-columns: 42px 1fr; }
  .record-summary > span { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .shift-stage-heading span { font-size: 7px; }
  .shift-comparison { min-height: 620px; border-radius: 24px; }
  .shift-closing { padding-top: 56px; }
  .record-portal-node { display: none; }
  .record-portal-core { width: 210px; min-height: 150px; }
  .project-record-section { padding: 96px 0 110px; }
  .record-architecture { margin-top: 46px; }
  .record-layer { min-height: 230px; padding: 26px 22px; grid-template-columns: 34px 38px 1fr; gap: 12px; }
  .record-layer > i { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .connected-project > svg path { animation: none; }
  .record-portal { height: auto; }
  .record-portal-sticky { position: relative; min-height: 72vh; }
}

/* =========================================================
   v20.20 — Project Record architectural reveal
   Replaces the theatrical zoom with a structural handoff.
   ========================================================= */
.record-portal {
  height: 300vh;
  margin-top: 0;
  background: #18151f;
}
.record-portal-sticky {
  background: #18151f;
  perspective: 1400px;
}
.record-portal-glow {
  z-index: -4;
  background:
    radial-gradient(circle at 50% 50%, rgba(126,92,255,.17), transparent 29%),
    radial-gradient(circle at 50% 58%, rgba(255,103,78,.045), transparent 33%),
    linear-gradient(180deg,#1b1822 0%,#18151f 100%);
  transform: scale(.9);
  opacity: .62;
}
.record-portal-orbit {
  position: absolute;
  z-index: -1;
  width: min(62vw, 920px);
  aspect-ratio: 1.55;
  border: 1px solid rgba(185,165,255,.075);
  border-radius: 50%;
  opacity: .55;
  transform: rotate(-8deg) scale(.88);
}
.record-portal-orbit::before,
.record-portal-orbit::after {
  content: "";
  position: absolute;
  inset: 12% -10%;
  border: 1px dashed rgba(185,165,255,.055);
  border-radius: 50%;
}
.record-portal-orbit::after { inset: 26% -22%; opacity: .55; }

.record-portal-core {
  width: min(360px, 34vw);
  min-height: 238px;
  padding: 0;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(145deg,rgba(119,95,168,.34),rgba(69,55,92,.3));
  box-shadow: 0 38px 120px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.06);
  display: block;
  text-align: left;
  backdrop-filter: blur(20px);
}
.portal-core-brand {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 28px;
}
.portal-core-brand img { width: 66px; height: 66px; margin: 0 0 14px; border-radius: 18px; }
.portal-core-brand strong { font-family:'Space Grotesk Variable'; font-size: 23px; line-height:1; letter-spacing:-.045em; }
.portal-core-brand small { margin-top: 8px; color:rgba(255,255,255,.46); font-size:8px; }

.portal-core-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  opacity: 0;
  pointer-events: none;
}
.portal-core-grid > span {
  position: relative;
  min-width: 0;
  padding: 24px 22px;
  border-right: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  background: rgba(255,255,255,.01);
}
.portal-core-grid > span:nth-child(2n) { border-right: 0; }
.portal-core-grid > span:nth-last-child(-n+2) { border-bottom: 0; }
.portal-core-grid b { color:rgba(255,255,255,.92); font-family:'Space Grotesk Variable'; font-size:13px; letter-spacing:-.025em; }
.portal-core-grid em { color:rgba(255,255,255,.37); font-style:normal; font-size:7px; line-height:1.45; }
.portal-core-grid > span::before {
  content:"";
  position:absolute;
  left:22px;
  top:22px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#9f87ff;
  box-shadow:0 0 16px rgba(159,135,255,.6);
  opacity:.65;
}

.record-portal-node {
  width: 142px;
  min-height: 62px;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}
.portal-n1 { left: 14%; top: 28%; }
.portal-n2 { right: 14%; top: 28%; }
.portal-n3 { left: 14%; bottom: 25%; }
.portal-n4 { right: 14%; bottom: 25%; }

.record-portal-thought {
  position:absolute;
  z-index:5;
  left:50%;
  bottom:9vh;
  width:min(760px,82vw);
  transform:translateX(-50%);
  text-align:center;
  display:grid;
  gap:4px;
  pointer-events:none;
  opacity:0;
}
.record-portal-thought span,
.record-portal-thought strong {
  font-family:'Space Grotesk Variable';
  font-size:clamp(24px,3.6vw,52px);
  line-height:1;
  letter-spacing:-.05em;
}
.record-portal-thought span { color:rgba(255,255,255,.34); font-weight:520; }
.record-portal-thought strong { color:#fff; font-weight:700; }

.record-portal-blueprint {
  position:absolute;
  z-index:1;
  inset:0;
  padding:clamp(58px,8vh,92px) max(4vw,32px) 0;
  opacity:0;
  pointer-events:none;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:clamp(42px,7vh,74px);
}
.portal-blueprint-label {
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(180px,.65fr) minmax(420px,1.35fr);
  align-items:start;
  gap:32px;
}
.portal-blueprint-label span {
  color:#a992ff;
  font-size:8px;
  font-weight:850;
  letter-spacing:.13em;
  padding-top:11px;
}
.portal-blueprint-label strong {
  max-width:700px;
  font-family:'Space Grotesk Variable';
  font-size:clamp(38px,5.3vw,78px);
  line-height:.95;
  letter-spacing:-.06em;
}
.portal-blueprint-grid {
  width:min(1180px,100%);
  margin:0 auto;
  align-self:end;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.09);
  border-left:1px solid rgba(255,255,255,.09);
  transform:translateY(12%);
}
.portal-blueprint-grid > span {
  min-height:clamp(118px,17vh,185px);
  padding:22px 26px;
  border-right:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
  display:flex;
  gap:18px;
  align-items:flex-start;
  background:rgba(255,255,255,.012);
  opacity:.55;
}
.portal-blueprint-grid b { color:rgba(255,255,255,.24); font-size:10px; font-weight:560; }
.portal-blueprint-grid em { color:rgba(255,255,255,.67); font-style:normal; font-family:'Space Grotesk Variable'; font-size:clamp(16px,1.5vw,22px); letter-spacing:-.03em; }

/* Make Section 02 feel like the blueprint resolves into the real interface. */
.project-record-section {
  padding-top: 88px;
  background: #18151f;
}
.project-record-section::before { opacity:.6; top:-650px; }
.record-heading { transform-origin:50% 0; }
.record-architecture { margin-top:58px; }
.record-layer { min-height:230px; }
.record-layer::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(159,135,255,.045),transparent 67%);
  opacity:0;
  transition:opacity .4s ease;
}
.record-layer:hover::after { opacity:1; }

@media (max-width: 900px) {
  .record-portal { height: 220vh; }
  .record-portal-core { width:min(330px,52vw); }
  .record-portal-node { width:124px; }
  .portal-n1,.portal-n3 { left:5%; }
  .portal-n2,.portal-n4 { right:5%; }
  .portal-blueprint-label { grid-template-columns:1fr; gap:16px; }
  .portal-blueprint-grid > span { min-height:128px; }
}
@media (max-width: 620px) {
  .record-portal { height: 175vh; }
  .record-portal-node,.record-portal-orbit { display:none; }
  .record-portal-core { width:min(86vw,330px); min-height:220px; }
  .record-portal-thought { bottom:7vh; }
  .record-portal-blueprint { padding:70px 20px 0; }
  .portal-blueprint-label strong { font-size:clamp(34px,11vw,54px); }
  .portal-blueprint-grid { grid-template-columns:1fr; transform:translateY(20%); }
  .portal-blueprint-grid > span { min-height:74px; padding:14px 16px; }
  .portal-core-grid > span { padding:16px 14px; }
  .portal-core-grid > span::before { left:14px; top:14px; }
}
@media (prefers-reduced-motion: reduce) {
  .record-portal { height:auto; }
  .record-portal-sticky { min-height:88vh; }
  .record-portal-node,.record-portal-orbit,.record-portal-thought { display:none; }
  .record-portal-core { width:min(720px,88vw); min-height:420px; }
  .portal-core-brand { opacity:0; }
  .portal-core-grid { opacity:1; }
  .record-portal-blueprint { display:none; }
}

/* =========================================================
   v20.21 — Single-source Project Record handoff
   The transition now reveals the real Section 02 instead of
   rendering a second blueprint copy of it.
   ========================================================= */
.record-portal { height: 235vh; }
.project-record-section {
  margin-top: -8vh;
  padding-top: 124px;
  border-top: 1px solid rgba(255,255,255,.035);
}
.project-record-section::after {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:18vh;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(24,21,31,0),#18151f 82%);
  transform:translateY(-100%);
}
.portal-core-grid > span {
  transition:background .25s ease;
}
.portal-core-grid > span:nth-child(3),
.portal-core-grid > span:nth-child(4) {
  background:rgba(126,92,255,.025);
}
.record-architecture {
  transform-origin:50% 0;
}
@media (max-width: 900px) {
  .record-portal { height: 190vh; }
  .project-record-section { margin-top:-4vh; padding-top:104px; }
}
@media (max-width: 620px) {
  .record-portal { height: 150vh; }
  .project-record-section { margin-top:0; padding-top:92px; }
}
@media (prefers-reduced-motion: reduce) {
  .record-portal { height:auto; }
  .project-record-section { margin-top:0; }
}

/* =========================================================
   v20.22 — Project Record becomes Section 02
   One continuous scroll scene. No proxy grid + duplicate section.
   The real Section 02 content now lives inside the cinematic portal.
   ========================================================= */
.record-portal {
  height: 330vh;
  margin-top: 28px;
  background: #18151f;
}
.record-portal-sticky {
  background: #18151f;
}
.record-portal-final {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4vh) scale(.985);
  transform-origin: 50% 45%;
  will-change: opacity, transform;
}
.record-portal-final .section-shell {
  height: 100%;
  padding-top: clamp(44px,6vh,74px);
  padding-bottom: clamp(28px,4vh,56px);
  display: flex;
  flex-direction: column;
}
.record-portal-final .record-heading {
  flex: 0 0 auto;
}
.record-portal-final .record-heading h2 {
  font-size: clamp(44px,5.6vw,82px);
}
.record-portal-final .record-heading p {
  max-width: 700px;
}
.record-portal-final .record-architecture {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: clamp(34px,5vh,58px);
  grid-template-rows: repeat(3,minmax(0,1fr));
}
.record-portal-final .record-layer {
  min-height: 0;
  padding: clamp(18px,2.2vh,30px) clamp(22px,2.6vw,36px);
  align-content: center;
  opacity: 0;
  transform: translateY(28px);
  clip-path: inset(0 0 18% 0);
}
.record-portal-final .record-layer h3 {
  font-size: clamp(22px,2vw,32px);
}
.record-portal-final .record-summary {
  display: none;
}

/* During the handoff the expanding card becomes a veil over the real content. */
.record-portal-core { will-change: width, min-height, opacity, transform, border-radius; }
.portal-core-grid { will-change: opacity; }

@media (max-width: 1100px) {
  .record-portal { height: 300vh; }
  .record-portal-final .record-heading h2 { font-size: clamp(40px,6vw,68px); }
  .record-portal-final .record-layer { padding: 18px 20px; grid-template-columns: 34px 36px 1fr; gap: 12px; }
  .record-portal-final .record-layer > i { width: 36px; height: 36px; }
}
@media (max-width: 900px) {
  .record-portal { height: auto; }
  .record-portal-sticky { position: relative; height: auto; min-height: auto; display: block; overflow: visible; }
  .record-portal-glow,.record-portal-orbit,.record-portal-node,.record-portal-core,.record-portal-thought { display:none; }
  .record-portal-final { position: relative; inset: auto; opacity: 1 !important; transform: none !important; pointer-events:auto; }
  .record-portal-final .section-shell { height:auto; padding-top:96px; padding-bottom:110px; display:block; }
  .record-portal-final .record-architecture { margin-top:46px; grid-template-columns:1fr; display:grid; }
  .record-portal-final .record-layer { min-height:220px; opacity:1 !important; transform:none !important; clip-path:none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .record-portal { height:auto; }
  .record-portal-sticky { position:relative; height:auto; min-height:auto; display:block; overflow:visible; }
  .record-portal-glow,.record-portal-orbit,.record-portal-node,.record-portal-core,.record-portal-thought { display:none; }
  .record-portal-final { position:relative; opacity:1 !important; transform:none !important; pointer-events:auto; }
  .record-portal-final .section-shell { height:auto; padding-top:96px; padding-bottom:110px; display:block; }
  .record-portal-final .record-layer { opacity:1 !important; transform:none !important; clip-path:none !important; }
}


/* v20.23 — Single final-layer reveal. The transition card never renders a proxy copy of Section 02. */
.record-portal .portal-core-grid { display:none !important; opacity:0 !important; visibility:hidden !important; }

/* v20.24: removed the floating section indicator from the landing-page narrative. */
.landing-page .scroll-section-label{display:none!important}

/* ========================================================================== 
   v20.26 — Project Galaxy + scroll-driven comparison refinement
   ========================================================================== */

/* Comparison: use the same project-system vocabulary as the Galaxy scene. */
.shift-comparison .connected-project-lines path {
  stroke: rgba(174,151,255,.34);
  stroke-width: 1.6;
  stroke-dasharray: 7 11;
}
.shift-comparison .connected-center.project-record-core {
  width: 205px;
  padding: 18px 16px;
}
.shift-comparison .connected-node {
  width: 236px;
  height: 112px;
  min-height: 112px;
  max-height: 112px;
  box-sizing: border-box;
  padding: 18px 18px;
  grid-template-columns: 46px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-content: center;
  border-radius: 20px;
  background: rgba(255,255,255,.078);
}
.shift-comparison .connected-node > i {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
.shift-comparison .connected-node svg { width: 21px; height: 21px; }
.shift-comparison .connected-node strong { font-size: 14px; line-height: 1.15; letter-spacing: -.012em; }
.shift-comparison .connected-node small { margin-top: 6px; font-size: 12px; line-height: 1.28; color: rgba(255,255,255,.48); }
.shift-comparison .connected-node em { display: none; }
.shift-comparison .connected-node.n1 { left: 4.0%; top: 13.5%; }
.shift-comparison .connected-node.n2 { left: 6.6%; top: 41.5%; }
.shift-comparison .connected-node.n3 { left: 3.8%; bottom: 5.5%; }
.shift-comparison .connected-node.n4 { right: 4.0%; top: 13.5%; }
.shift-comparison .connected-node.n5 { right: 6.6%; top: 41.5%; }
.shift-comparison .connected-node.n6 { right: 3.8%; bottom: 5.5%; }

/* Project Galaxy: a readable, asymmetrical system map rather than four corner labels. */
.record-portal-sticky { perspective: 1200px; }
.record-galaxy-lines {
  position: absolute;
  z-index: 1;
  left: 7%;
  top: 9%;
  width: 86%;
  height: 82%;
  overflow: visible;
  pointer-events: none;
  opacity: .68;
  filter: drop-shadow(0 0 8px rgba(137,111,255,.08));
}
.record-galaxy-lines path {
  fill: none;
  stroke: rgba(158,132,255,.24);
  stroke-width: 1.15;
  stroke-dasharray: 7 13;
  vector-effect: non-scaling-stroke;
  animation: galaxy-flow 10s linear infinite;
}
@keyframes galaxy-flow { to { stroke-dashoffset: -120; } }
.record-galaxy-lines path:nth-child(2n) { animation-duration: 13s; opacity: .78; }
.record-galaxy-lines path:nth-child(3n) { animation-duration: 16s; opacity: .55; }

.record-portal-node {
  width: clamp(228px,17.5vw,278px);
  min-height: 118px;
  padding: 17px 19px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 13px;
  align-items: center;
  color: rgba(255,255,255,.88);
  background: linear-gradient(145deg,rgba(255,255,255,.078),rgba(255,255,255,.034));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 20px 62px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.038);
  backdrop-filter: blur(16px);
  will-change: transform, opacity;
}
.record-portal-node > i {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #c8b8ff;
  background: rgba(124,92,255,.16);
  box-shadow: inset 0 0 0 1px rgba(184,164,255,.10);
}
.record-portal-node > i svg { width: 20px; height: 20px; }
.record-portal-node > span { min-width: 0; display: grid; gap: 4px; }
.record-portal-node strong {
  font-family: 'Space Grotesk Variable';
  color: #fff;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: -.025em;
}
.record-portal-node small {
  color: rgba(255,255,255,.50);
  font-size: 7.4px;
  line-height: 1.28;
}
.record-portal-node em {
  margin-top: 4px;
  color: #bba8ff;
  font-size: 6.9px;
  line-height: 1.22;
  font-style: normal;
}
/* Intentionally irregular placements create depth and avoid a diagram-grid feel. */
.portal-n1 { left: 6.6%; top: 14.5%; transform: rotate(-.45deg) scale(1.04); }
.portal-n2 { left: 14.3%; top: 41%; transform: rotate(.35deg) scale(.96); opacity: .9; }
.portal-n3 { left: 5.1%; bottom: 8.8%; transform: rotate(-.25deg) scale(1); }
.portal-n4 { right: 6.8%; top: 17%; transform: rotate(.4deg) scale(1.02); }
.portal-n5 { right: 12.6%; top: 46.5%; transform: rotate(-.35deg) scale(.97); opacity: .92; }
.portal-n6 { right: 4.8%; bottom: 8.4%; transform: rotate(.3deg) scale(1); }

.record-portal-core {
  width: 290px;
  min-height: 208px;
  padding: 30px 26px;
  border-radius: 28px;
  background: linear-gradient(145deg,rgba(124,100,177,.34),rgba(83,66,119,.26));
  box-shadow: 0 34px 120px rgba(35,22,60,.46), 0 0 0 1px rgba(190,170,255,.03), inset 0 0 54px rgba(187,166,255,.055);
}
.record-portal-core img { width: 66px; height: 66px; border-radius: 19px; }
.record-portal-core strong { font-size: 24px; }
.record-portal-core small { margin-top: 7px; font-size: 7.5px; color: rgba(255,255,255,.53); }
.record-portal-core .portal-core-brand > em {
  display: block;
  margin-top: 9px;
  color: #bcaaff;
  font-size: 7px;
  line-height: 1.35;
  font-style: normal;
  letter-spacing: .01em;
}
.record-portal-glow {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(124,92,255,.22), transparent 30%),
    radial-gradient(ellipse at 50% 50%, rgba(95,70,151,.12), transparent 52%),
    linear-gradient(180deg,#1c1923,#18151f);
}
.record-portal-orbit { opacity: .32; }

@media (max-width: 1200px) and (min-width: 901px) {
  .record-portal-node { width: 208px; min-height: 102px; padding: 14px 15px; grid-template-columns: 39px 1fr; }
  .record-portal-node > i { width:39px; height:39px; }
  .record-portal-node strong { font-size:12px; }
  .record-portal-node small,.record-portal-node em { font-size:6.3px; }
  .portal-n1 { left:3.6%; }.portal-n2{left:9.2%;}.portal-n3{left:3.1%;}.portal-n4{right:3.6%;}.portal-n5{right:9.6%;}.portal-n6{right:3.2%;}
}
@media (max-width: 900px) {
  .record-galaxy-lines { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .record-galaxy-lines path { animation:none; }
}

/* =========================================================
   V20.28 — Context → Momentum cinematic journey
   ========================================================= */
.cinematic-journey{
  position:relative;
  background:#ece7e0;
  color:var(--ink);
  overflow:clip;
}
.journey-bridge{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:120px 5vw;
  isolation:isolate;
  overflow:hidden;
}
.journey-bridge-inner{
  position:relative;
  width:min(1380px,100%);
  min-height:62vh;
  display:grid;
  align-content:center;
}
.journey-bridge .section-index{
  position:absolute;
  left:0;
  top:0;
}
.journey-bridge-eyebrow{
  margin:0 0 24px;
  color:var(--violet);
  font-size:9px;
  font-weight:850;
  letter-spacing:.16em;
}
.journey-bridge h2{
  position:relative;
  z-index:2;
  margin:0;
  max-width:1180px;
  font-family:'Space Grotesk Variable';
  font-size:clamp(78px,11vw,172px);
  line-height:.84;
  letter-spacing:-.078em;
  font-weight:570;
}
.journey-bridge h2 span{color:var(--coral)}
.journey-bridge-end h2 span{color:var(--violet)}
.journey-bridge-copy{
  position:relative;
  z-index:2;
  max-width:650px;
  margin:34px 0 0;
  color:var(--ink-soft);
  font-size:17px;
  line-height:1.65;
}
.journey-context-fragments{
  position:absolute;
  inset:-4% -2%;
  pointer-events:none;
  z-index:1;
}
.journey-context-fragments span{
  position:absolute;
  min-height:44px;
  padding:0 15px;
  border:1px solid rgba(24,22,31,.09);
  border-radius:999px;
  background:rgba(255,255,255,.54);
  box-shadow:0 14px 38px rgba(43,34,58,.08);
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  gap:8px;
  color:#6b6370;
  font-size:9px;
  font-weight:730;
  will-change:transform;
}
.journey-context-fragments svg{width:14px;color:var(--violet)}
.journey-context-fragments span:nth-child(1){right:9%;top:12%}
.journey-context-fragments span:nth-child(2){right:2%;top:42%}
.journey-context-fragments span:nth-child(3){left:4%;bottom:8%}
.journey-context-fragments span:nth-child(4){right:18%;bottom:5%}
.journey-context-fragments span:nth-child(5){left:2%;top:22%}
.journey-context-fragments span:nth-child(6){left:22%;top:2%}

.journey-film{
  position:relative;
  height:600vh;
  background:#18151f;
  color:#fff;
}
.journey-film-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center;
  perspective:1500px;
}
.journey-film-backdrop{position:absolute;inset:0;z-index:-3;overflow:hidden}
.journey-depth{position:absolute;inset:-12%;will-change:transform,opacity,filter}
.depth-back{
  background:
    radial-gradient(circle at 48% 46%,rgba(124,92,255,.17),transparent 31%),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:auto,72px 72px,72px 72px;
  opacity:.85;
}
.depth-mid{
  inset:8% 5%;
  border:1px solid rgba(176,151,255,.065);
  border-radius:50%;
  transform:rotate(-7deg) scale(1.05);
  opacity:.75;
}
.depth-mid::after{
  content:'';
  position:absolute;
  inset:16% -8%;
  border:1px solid rgba(176,151,255,.05);
  border-radius:50%;
  transform:rotate(13deg);
}
.depth-front{
  background:radial-gradient(ellipse at 50% 52%,transparent 22%,rgba(8,6,12,.34) 78%);
  opacity:.9;
}
.journey-stage-word{
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-family:'Space Grotesk Variable';
  font-size:clamp(150px,25vw,440px);
  font-weight:620;
  line-height:.72;
  letter-spacing:-.09em;
  color:rgba(255,255,255,.027);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  will-change:transform,opacity;
}
.journey-time{
  position:absolute;
  z-index:8;
  top:calc(var(--nav-h,78px) + 28px);
  right:4vw;
  display:flex;
  align-items:center;
  gap:11px;
  color:rgba(255,255,255,.42);
  font-size:8px;
  letter-spacing:.04em;
}
.journey-time span{color:#bca9ff;font-weight:820}
.journey-time b{font-weight:650;color:rgba(255,255,255,.54)}

.journey-film-window{
  position:relative;
  z-index:3;
  width:min(1440px,92vw);
  height:min(760px,76vh);
  min-height:600px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:32px;
  background:rgba(27,24,34,.82);
  box-shadow:0 44px 140px rgba(0,0,0,.42);
  overflow:hidden;
  backdrop-filter:blur(18px);
  transform-style:preserve-3d;
  will-change:transform,filter;
}
.journey-window-chrome{
  position:relative;
  z-index:10;
  height:52px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.journey-window-chrome>span{display:flex;gap:5px}
.journey-window-chrome>span i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.19)}
.journey-window-chrome>span i:nth-child(2){background:var(--coral)}
.journey-window-chrome strong{font-size:8px}
.journey-window-chrome small{justify-self:end;display:flex;gap:6px;align-items:center;color:rgba(255,255,255,.4);font-size:6px}
.journey-window-chrome small b{width:6px;height:6px;border-radius:50%;background:#4bd473;box-shadow:0 0 10px rgba(75,212,115,.5)}
.journey-film-canvas{
  position:relative;
  height:calc(100% - 138px);
  overflow:hidden;
  background:radial-gradient(circle at 50% 50%,rgba(124,92,255,.16),transparent 38%);
}
.continuity-thread{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.continuity-thread path{fill:none;vector-effect:non-scaling-stroke}
.continuity-thread-base{stroke:rgba(155,132,255,.13);stroke-width:2;stroke-dasharray:7 10}
.continuity-thread-live{stroke:url(#none);stroke:#ff7456;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 7px rgba(255,104,70,.5));stroke-dasharray:2200;stroke-dashoffset:2200;will-change:stroke-dashoffset}
.journey-focus-field{position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(circle at var(--focus-x,50%) var(--focus-y,50%),transparent 0,transparent 17%,rgba(11,9,15,.34) 44%,rgba(11,9,15,.52) 100%);opacity:.15;transition:opacity .3s ease}

.cinematic-core,.journey-source-card,.cinematic-packet,.cinematic-provider,.cinematic-output,.journey-next-card,.journey-decision-chip{
  position:absolute;
  z-index:4;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.068);
  box-shadow:0 20px 54px rgba(0,0,0,.24);
  backdrop-filter:blur(15px);
  transition:filter .32s ease,opacity .32s ease,transform .32s ease,border-color .32s ease,box-shadow .32s ease;
  will-change:transform,filter,opacity;
}
.cinematic-core{left:50%;top:50%;width:265px;padding:20px;border-radius:24px;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;border-color:rgba(161,136,255,.38);background:linear-gradient(145deg,rgba(124,92,255,.3),rgba(124,92,255,.09))}
.cinematic-core img{width:58px;height:58px;border-radius:17px}
.cinematic-core p,.cinematic-provider p,.cinematic-output p,.journey-next-card p{margin:0;display:grid;gap:2px}
.cinematic-core small,.cinematic-provider small,.cinematic-output small,.journey-next-card small,.journey-decision-chip small{color:rgba(255,255,255,.35);font-size:6px;letter-spacing:.12em}
.cinematic-core strong{font-size:13px}.cinematic-core span{font-size:7px;color:#c2b2ff}
.journey-source-card{width:178px;padding:13px;border-radius:16px;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center}
.journey-source-card>i{width:34px;height:34px;border-radius:10px;background:rgba(124,92,255,.15);color:#c4b5ff;display:grid;place-items:center}
.journey-source-card svg{width:15px}.journey-source-card p{margin:0;display:grid}.journey-source-card strong{font-size:8px}.journey-source-card small{font-size:5.5px;color:rgba(255,255,255,.4)}
.j-brief{left:6%;top:17%}.j-decisions{left:8%;bottom:16%}.j-tasks{left:25%;bottom:5%}.j-files{left:21%;top:6%}
.cinematic-provider{right:7%;top:17%;width:205px;padding:14px;border-radius:18px;display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center}
.cinematic-provider img{width:44px;height:44px;padding:8px;border-radius:12px;background:#fff}.cinematic-provider strong,.cinematic-output strong,.journey-next-card strong{font-size:9px}.cinematic-provider span,.cinematic-output span,.journey-next-card span{font-size:6px;color:rgba(255,255,255,.42)}
.cinematic-output{right:7%;bottom:15%;width:218px;padding:14px;border-radius:18px;display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center}
.cinematic-output>i{width:44px;height:44px;border-radius:12px;background:rgba(75,212,115,.13);color:#6de18d;display:grid;place-items:center}.cinematic-output svg{width:18px}
.cinematic-packet{left:40%;top:25%;padding:8px 10px;border-radius:13px;display:flex;align-items:center;gap:5px;opacity:0;transform:scale(.8)}
.cinematic-packet span{padding:5px 7px;border-radius:7px;background:rgba(255,255,255,.08);font-size:5px;color:rgba(255,255,255,.57)}
.cinematic-packet img{width:28px;height:28px;border-radius:8px}.cinematic-packet b{margin-left:3px}
.journey-next-card{right:24%;bottom:4%;width:220px;padding:13px;border-radius:17px;display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;opacity:0;transform:translateY(12px)}
.journey-next-card>i{width:38px;height:38px;border-radius:11px;background:rgba(255,104,70,.13);color:#ff886e;display:grid;place-items:center}.journey-next-card svg{width:17px}
.journey-decision-chip{right:26%;top:7%;padding:9px 12px;border-radius:999px;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(-8px)}
.journey-decision-chip>i{color:#bdaaff}.journey-decision-chip svg{width:14px}.journey-decision-chip span{display:grid;gap:1px}.journey-decision-chip strong{font-size:7px}
.impact-ring{position:absolute;right:-5px;top:-5px;width:11px;height:11px;border:3px solid #1b1822;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(255,104,70,.34);opacity:0;pointer-events:none}

.journey-film-caption{
  position:relative;
  z-index:10;
  min-height:86px;
  padding:13px 22px 14px;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(124,92,255,.075);
  display:grid;
  grid-template-columns:140px minmax(250px,.72fr) 1fr;
  gap:22px;
  align-items:center;
}
.journey-film-caption>span{color:#a78fff;font-size:7px;font-weight:850;letter-spacing:.14em}
.journey-film-caption>strong{font-family:'Space Grotesk Variable';font-size:15px;line-height:1.18;letter-spacing:-.03em}
.journey-film-caption>p{margin:0;max-width:580px;color:rgba(255,255,255,.48);font-size:9px;line-height:1.55}
.journey-step-rail{position:absolute;z-index:9;right:2.1vw;top:50%;transform:translateY(-50%);display:grid;gap:10px}
.journey-step-rail span{width:28px;height:28px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.035);display:grid;place-items:center;color:rgba(255,255,255,.25);font-size:6px;font-weight:850;transition:.3s ease}
.journey-step-rail span.active{background:var(--violet);color:#fff;border-color:transparent;box-shadow:0 9px 24px rgba(124,92,255,.25);transform:scale(1.12)}
.journey-scroll-track{position:absolute;inset:0;display:grid;grid-template-rows:repeat(5,1fr);pointer-events:none}
.journey-scroll-step{min-height:100vh}

/* Controlled focus: background elements soften while the current action stays crisp. */
.journey-film-window[data-journey-active="0"] .cinematic-provider,
.journey-film-window[data-journey-active="0"] .cinematic-output,
.journey-film-window[data-journey-active="0"] .journey-next-card{filter:blur(2.2px) brightness(.68);opacity:.34}
.journey-film-window[data-journey-active="1"] .journey-source-card{filter:none;opacity:.92}
.journey-film-window[data-journey-active="1"] .cinematic-provider,
.journey-film-window[data-journey-active="1"] .cinematic-output{filter:blur(2px) brightness(.68);opacity:.34}
.journey-film-window[data-journey-active="2"] .journey-source-card{filter:blur(2px) brightness(.72);opacity:.38}
.journey-film-window[data-journey-active="2"] .cinematic-provider{filter:none;opacity:1;transform:scale(1.07);border-color:rgba(255,104,70,.48);box-shadow:0 0 0 7px rgba(255,104,70,.055),0 24px 65px rgba(0,0,0,.32)}
.journey-film-window[data-journey-active="3"] .journey-source-card,.journey-film-window[data-journey-active="3"] .cinematic-provider{filter:blur(2.2px) brightness(.7);opacity:.34}
.journey-film-window[data-journey-active="3"] .cinematic-output{filter:none;opacity:1;transform:scale(1.07);border-color:rgba(255,104,70,.48);box-shadow:0 0 0 7px rgba(255,104,70,.055),0 24px 65px rgba(0,0,0,.32)}
.journey-film-window[data-journey-active="4"] .journey-source-card,.journey-film-window[data-journey-active="4"] .cinematic-provider{filter:blur(1.5px) brightness(.76);opacity:.42}
.journey-film-window[data-journey-active="4"] .cinematic-core{transform:translate(-50%,-50%) scale(1.05);border-color:rgba(255,104,70,.44)}
.journey-film-window[data-journey-active="4"] .journey-next-card{opacity:1;transform:none;border-color:rgba(255,104,70,.35)}
.journey-film-window[data-journey-active="4"] .journey-decision-chip{opacity:1;transform:none}

.journey-bridge-end{background:#f2eee8}
.journey-bridge-end .journey-bridge-inner{align-content:center;text-align:center;justify-items:center}
.journey-bridge-end .journey-bridge-copy{max-width:none;font-size:18px}
.momentum-underline{width:min(900px,78vw);height:90px;margin-top:20px;overflow:visible}
.momentum-underline path{fill:none;stroke:var(--coral);stroke-width:4;stroke-linecap:round;stroke-dasharray:1100;stroke-dashoffset:1100;filter:drop-shadow(0 0 5px rgba(255,104,70,.18))}

@media (max-width:1100px){
  .journey-film-window{width:94vw;height:min(720px,76vh);min-height:560px}
  .journey-source-card{width:155px}.cinematic-provider{width:184px}.cinematic-output{width:192px}
  .j-files{left:18%}.j-tasks{left:20%}.journey-film-caption{grid-template-columns:110px minmax(220px,.8fr) 1fr}
}
@media (max-width:900px){
  .journey-bridge{min-height:82vh;padding:96px 24px}
  .journey-bridge h2{font-size:clamp(66px,18vw,112px)}
  .journey-context-fragments{opacity:.55}.journey-context-fragments span:nth-child(n+5){display:none}
  .journey-film{height:auto;padding:72px 0;background:#18151f}
  .journey-film-sticky{position:relative;height:auto;overflow:visible;display:block}
  .journey-film-window{width:calc(100% - 28px);height:auto;min-height:0;margin:auto;border-radius:24px}
  .journey-film-canvas{height:560px}
  .journey-stage-word,.journey-time,.journey-step-rail,.journey-scroll-track{display:none}
  .journey-film-caption{grid-template-columns:1fr;gap:7px;padding:18px}.journey-film-caption>p{font-size:11px}
  .journey-source-card{width:145px}.j-brief{left:4%;top:9%}.j-files{left:auto;right:4%;top:9%}.j-decisions{left:4%;bottom:7%}.j-tasks{left:auto;right:4%;bottom:7%}
  .cinematic-core{width:220px}.cinematic-provider{right:4%;top:29%}.cinematic-output{right:4%;bottom:28%}.journey-next-card,.journey-decision-chip{display:none}
  .cinematic-packet{left:50%;top:20%;transform:translateX(-50%) scale(1);opacity:1}
}
@media (max-width:620px){
  .journey-context-fragments{display:none}
  .journey-film-canvas{height:620px}
  .journey-source-card{width:132px;padding:10px;grid-template-columns:29px 1fr}.journey-source-card>i{width:29px;height:29px}
  .cinematic-provider,.cinematic-output{width:156px;padding:11px;grid-template-columns:36px 1fr}.cinematic-provider img,.cinematic-output>i{width:36px;height:36px}
  .cinematic-core{width:188px;padding:14px}.cinematic-core img{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  .journey-film{height:auto;padding:80px 0}
  .journey-film-sticky{position:relative;height:auto;overflow:visible}
  .journey-scroll-track,.journey-stage-word,.journey-step-rail{display:none}
  .journey-film-window{transform:none!important;filter:none!important}
  .continuity-thread-live{stroke-dashoffset:0!important}
  .momentum-underline path{stroke-dashoffset:0!important}
}

/* =========================================================
   V20.29 — Editorial compression + immersive product chapter
   ========================================================= */
.product-chapter{position:relative;background:#18151f;color:#fff;overflow:clip}
.product-chapter-bridge{position:relative;min-height:92vh;display:grid;align-items:center;background:#f4f0ea;color:#18151f;overflow:hidden}
.product-chapter-bridge-inner{position:relative;z-index:2;padding-top:110px;padding-bottom:110px}
.product-chapter-bridge .section-index{display:block;margin-bottom:32px}
.product-chapter-bridge h2{margin:0;max-width:1260px;font-family:'Space Grotesk Variable';font-size:clamp(64px,8.7vw,136px);line-height:.88;letter-spacing:-.075em}
.product-chapter-bridge h2 span{color:#7c5cff}
.product-chapter-bridge p{margin:34px 0 0;max-width:650px;color:#716a75;font-size:16px;line-height:1.65}
.product-chapter-word{position:absolute;right:-2vw;bottom:-8vh;color:rgba(24,21,31,.035);font-family:'Space Grotesk Variable';font-size:clamp(180px,31vw,520px);font-weight:700;line-height:.72;letter-spacing:-.09em;pointer-events:none;will-change:transform,opacity}

.product-chapter-track{position:relative;height:410vh;background:#18151f}
.product-chapter-sticky{position:sticky;top:0;height:100vh;display:grid;align-items:center;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#1c1923,#17141d)}
.product-chapter-atmosphere{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.product-plane{position:absolute;inset:-18%;will-change:transform,opacity,filter;border-radius:50%}
.product-plane-back{background:radial-gradient(circle at 42% 46%,rgba(124,92,255,.18),transparent 35%);filter:blur(2px)}
.product-plane-mid{background:radial-gradient(ellipse at 70% 50%,rgba(95,68,151,.15),transparent 30%);filter:blur(18px)}
.product-plane-front{inset:-25%;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.025) 48%,transparent 70%);transform:rotate(-8deg)}
.product-chapter-shell{width:min(1500px,calc(100% - 56px));padding-top:62px;padding-bottom:44px}
.product-chapter-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.52fr);gap:56px;align-items:end;margin-bottom:30px}
.product-chapter-head h3{margin:12px 0 0;font-family:'Space Grotesk Variable';font-size:clamp(46px,5vw,78px);line-height:.94;letter-spacing:-.055em}
.product-chapter-head p{margin:0;color:rgba(255,255,255,.48);font-size:13px;line-height:1.7}
.product-chapter-stage{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:stretch}
.product-chapter-tabs{display:grid;align-content:start;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:rgba(255,255,255,.03);overflow:hidden;backdrop-filter:blur(16px)}
.product-chapter-tabs button{position:relative;min-height:76px;padding:12px 14px;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:transparent;color:rgba(255,255,255,.48);display:grid;grid-template-columns:24px 28px 1fr;grid-template-rows:auto auto;gap:2px 8px;align-items:center;text-align:left;cursor:pointer;transition:.28s ease}
.product-chapter-tabs button:last-child{border-bottom:0}.product-chapter-tabs button>span{grid-row:1/span 2;color:rgba(255,255,255,.26);font-size:7px}.product-chapter-tabs button>i{grid-row:1/span 2;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.04)}
.product-chapter-tabs button svg{width:13px}.product-chapter-tabs button strong{font-size:9px;line-height:1.15}.product-chapter-tabs button small{font-size:6px;color:rgba(255,255,255,.30)}
.product-chapter-tabs button.active{background:rgba(124,92,255,.16);color:#fff}.product-chapter-tabs button.active>i{background:#7c5cff;color:#fff;box-shadow:0 0 0 6px rgba(124,92,255,.07)}
.product-gallery-stage{margin:0!important;border-radius:26px!important;box-shadow:0 34px 100px rgba(0,0,0,.34)!important;overflow:hidden;transform-origin:50% 50%;will-change:transform,filter,opacity}
.product-gallery-stage .gallery-window{min-height:500px}
.product-gallery-caption{min-height:84px}.product-gallery-caption p{max-width:760px}.product-gallery-caption button{white-space:nowrap}
.product-chapter-proofline{margin-top:17px;display:flex;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.34);font-size:7px;letter-spacing:.04em}
.product-chapter-proofline i{width:4px;height:4px;border-radius:50%;background:#7c5cff;box-shadow:0 0 12px rgba(124,92,255,.6)}

/* Condensed audience chapter: statement + thesis, not another feature grid. */
.audience-section-condensed{padding-top:130px!important;padding-bottom:128px!important}
.audience-section-condensed .audience-copy{display:grid;grid-template-columns:minmax(0,.45fr) minmax(0,1fr);gap:64px;align-items:start}
.audience-section-condensed .audience-copy h2{margin:0;font-size:clamp(54px,6vw,92px);line-height:.95;letter-spacing:-.065em}
.audience-section-condensed .audience-copy p{grid-column:2;margin:10px 0 0;max-width:720px;color:var(--ink-soft);font-size:15px;line-height:1.7}
.audience-role-strip{margin-top:52px;display:flex;flex-wrap:wrap;gap:9px}
.audience-role-strip span{min-height:42px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.55);display:inline-flex;align-items:center;gap:8px;color:#6e6873;font-size:9px;font-weight:740}
.audience-role-strip svg{width:14px;color:var(--violet)}
.audience-section-condensed .quote-card{margin-top:72px}

/* Trust is now a focused control story; remove empty spacing inherited from the old card grid. */
.trust-section .control-console{margin-top:56px}

/* Stronger depth and negative space for the Context → Momentum film. */
.journey-bridge{min-height:100vh;padding:12vh 5vw}
.journey-bridge-inner{width:min(1500px,100%);margin:auto}
.journey-bridge h2{max-width:1320px;font-size:clamp(88px,12vw,190px);line-height:.82;letter-spacing:-.085em}
.journey-bridge-copy{max-width:620px;font-size:16px;line-height:1.65}
.journey-film{height:620vh}
.journey-film-sticky{perspective:1500px}
.journey-stage-word{font-size:clamp(130px,22vw,360px);letter-spacing:-.08em;opacity:.04;mix-blend-mode:screen}
.journey-film-window{box-shadow:0 55px 160px rgba(0,0,0,.42);will-change:transform,filter}
.journey-depth.depth-back{background:radial-gradient(ellipse at 30% 45%,rgba(124,92,255,.15),transparent 34%),radial-gradient(ellipse at 76% 54%,rgba(255,104,70,.07),transparent 30%)}
.journey-depth.depth-mid{background:linear-gradient(118deg,transparent 18%,rgba(148,123,255,.06) 47%,transparent 72%);filter:blur(12px)}
.journey-depth.depth-front{background:radial-gradient(circle at 50% 48%,transparent 30%,rgba(0,0,0,.28) 75%)}
.journey-time{backdrop-filter:blur(16px)}
.journey-film-window .impact-ring{pointer-events:none}

@media(max-width:1100px){
  .product-chapter-track{height:360vh}.product-chapter-shell{width:min(100% - 32px,1400px)}.product-chapter-stage{grid-template-columns:190px minmax(0,1fr)}.product-chapter-tabs button{min-height:70px}.product-gallery-stage .gallery-window{min-height:440px}.product-chapter-head{grid-template-columns:1fr}.audience-section-condensed .audience-copy{grid-template-columns:1fr}.audience-section-condensed .audience-copy p{grid-column:1}
}
@media(max-width:900px){
  .product-chapter-bridge{min-height:auto;padding:80px 0}.product-chapter-track{height:auto}.product-chapter-sticky{position:relative;height:auto;padding:80px 0}.product-chapter-shell{width:calc(100% - 28px);padding:0}.product-chapter-head{margin-bottom:22px}.product-chapter-stage{grid-template-columns:1fr}.product-chapter-tabs{grid-template-columns:repeat(3,1fr)}.product-chapter-tabs button{border-right:1px solid rgba(255,255,255,.07);grid-template-columns:22px 1fr}.product-chapter-tabs button>i{display:none}.product-gallery-stage .gallery-window{min-height:360px}.product-chapter-proofline{flex-wrap:wrap}.journey-film{height:auto}
}
@media(max-width:640px){.product-chapter-tabs{grid-template-columns:1fr 1fr}.product-chapter-bridge h2{font-size:clamp(58px,17vw,92px)}.audience-section-condensed{padding-top:92px!important}.audience-section-condensed .quote-card{margin-top:48px}}
@media(prefers-reduced-motion:reduce){.product-chapter-word,.product-plane,.product-gallery-stage{transform:none!important}.product-chapter-track{height:auto}.product-chapter-sticky{position:relative;height:auto;padding:80px 0}}


/* =========================================================
   V20.30 — Product Surface Gallery choreography
   Motion now communicates state progression instead of ambient sway.
   ========================================================= */
.product-chapter-head > p{display:grid;gap:12px;align-content:end}
.product-chapter-state{display:block;min-height:1.3em;color:#c8b8ff;font-family:'Space Grotesk Variable';font-size:15px;line-height:1.35;letter-spacing:-.025em;font-weight:650}
.product-chapter-stage{perspective:1600px;perspective-origin:62% 48%}
.product-chapter-tabs{position:relative;--surface-progress:0%}
.product-chapter-thread{position:absolute;z-index:3;left:14px;top:38px;bottom:38px;width:1px;background:rgba(255,255,255,.08);pointer-events:none}
.product-chapter-thread::before{content:'';position:absolute;left:0;top:0;width:1px;height:var(--surface-progress);background:linear-gradient(180deg,#7c5cff,#b7a5ff);box-shadow:0 0 15px rgba(124,92,255,.45);transition:height .46s cubic-bezier(.22,.8,.22,1)}
.product-chapter-thread i{position:absolute;left:50%;top:var(--surface-progress);width:8px;height:8px;border:2px solid rgba(205,191,255,.85);border-radius:50%;background:#7c5cff;box-shadow:0 0 0 5px rgba(124,92,255,.10),0 0 18px rgba(124,92,255,.55);transform:translate(-50%,-50%);transition:top .46s cubic-bezier(.22,.8,.22,1)}
.product-chapter-tabs button{padding-left:22px;transform:translateX(0);transition:background .32s ease,color .32s ease,transform .38s cubic-bezier(.22,.8,.22,1),opacity .32s ease}
.product-chapter-tabs button::after{content:'';position:absolute;left:0;top:50%;width:3px;height:0;border-radius:999px;background:#8f73ff;transform:translateY(-50%);box-shadow:0 0 18px rgba(124,92,255,.6);transition:height .32s ease}
.product-chapter-tabs button.active{transform:translateX(5px)}
.product-chapter-tabs button.active::after{height:36%}
.product-chapter-tabs button:not(.active){opacity:.68}
.product-gallery-stage{position:relative;transform-style:preserve-3d;perspective:1600px;isolation:isolate}
.product-gallery-stage::before{content:'';position:absolute;z-index:-1;inset:-12%;border-radius:40px;background:radial-gradient(ellipse at 50% 48%,rgba(124,92,255,.20),transparent 56%);filter:blur(28px);opacity:.34;pointer-events:none}
.product-gallery-stage .gallery-window{transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity,filter}
.product-gallery-caption p>*{will-change:transform,opacity}
.product-gallery-stage.is-transitioning{pointer-events:none}
.product-gallery-stage.is-transitioning::before{opacity:.52}
.product-chapter-proofline{position:relative}
.product-chapter-proofline::before{content:'';position:absolute;left:50%;top:-10px;width:min(64%,620px);height:1px;background:linear-gradient(90deg,transparent,rgba(124,92,255,.26),transparent);transform:translateX(-50%)}
@media(max-width:900px){.product-chapter-thread{display:none}.product-chapter-state{font-size:13px}.product-chapter-tabs button{padding-left:14px}.product-chapter-tabs button.active{transform:none}}
@media(prefers-reduced-motion:reduce){.product-chapter-thread::before,.product-chapter-thread i,.product-chapter-tabs button{transition:none!important}}


/* =========================================================
   V20.31 — Product inspection camera push
   The product surface grows as the user scrolls so real UI
   remains legible on large / 4K displays.
   ========================================================= */
.product-chapter-sticky{overflow:hidden}
.product-gallery-stage{
  transform-origin:50% 46%;
  backface-visibility:hidden;
  will-change:transform,border-radius,box-shadow;
}
.product-chapter-stage{overflow:visible}

@media (min-width:1600px){
  .product-chapter-shell{width:min(94vw,1880px)}
  .product-chapter-stage{grid-template-columns:250px minmax(0,1fr);gap:28px}
  .product-chapter-tabs button{min-height:78px;padding-inline:17px}
  .product-chapter-tabs strong{font-size:11px}
  .product-chapter-tabs small{font-size:7.4px}
  .product-gallery-stage .gallery-window{min-height:560px}
  .product-gallery-caption{min-height:92px;padding-inline:26px}
  .product-gallery-caption strong{font-size:12px}
  .product-gallery-caption span{font-size:8px}
}

@media (min-width:2200px){
  .product-chapter-shell{width:min(92vw,2200px)}
  .product-chapter-stage{grid-template-columns:280px minmax(0,1fr);gap:34px}
  .product-gallery-stage .gallery-window{min-height:680px}
  .product-chapter-head h3{font-size:clamp(70px,5vw,108px)}
}

@media (prefers-reduced-motion:reduce){
  .product-gallery-stage{transform:none!important;border-radius:26px!important}
}


/* =========================================================
   V20.31.1 — Containment hotfix
   Keep the Shift compare pin inside document flow and confine
   product inspection zoom to the inner UI viewport.
   ========================================================= */
.shift-sticky-wrap{position:relative;isolation:isolate}
.shift-sticky-wrap .pin-spacer{z-index:2!important}
.shift-comparison{max-width:100%;contain:layout paint}
.product-gallery-stage{transform:none!important;overflow:hidden!important}
.product-gallery-stage .gallery-window{
  transform-origin:50% 42%;
  will-change:transform;
  backface-visibility:hidden;
}
@media (prefers-reduced-motion:reduce){
  .product-gallery-stage .gallery-window{transform:none!important}
}

/* =========================================================
   V20.32 — AI-native workflow reel
   Different workflows. Same thread.
   ========================================================= */
.workflow-reel-section{
  position:relative;
  padding:132px 0 0;
  overflow:clip;
  background:var(--paper);
}
.workflow-reel-intro{position:relative;z-index:2}
.workflow-reel-section .audience-copy{display:grid;grid-template-columns:minmax(0,.43fr) minmax(0,1fr);gap:64px;align-items:start}
.workflow-reel-section .audience-copy h2{margin:0;font-size:clamp(58px,6.2vw,98px);line-height:.94;letter-spacing:-.068em}
.workflow-reel-section .audience-copy p{grid-column:2;margin:10px 0 0;max-width:720px;color:var(--ink-soft);font-size:15px;line-height:1.7}
.workflow-reel-bridge{margin:76px 0 42px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;font-family:'Space Grotesk Variable';letter-spacing:-.05em}
.workflow-reel-bridge span,.workflow-reel-bridge strong{font-size:clamp(34px,4vw,58px);line-height:1}
.workflow-reel-bridge span{color:#8e8793;font-weight:520}
.workflow-reel-bridge strong{color:var(--ink);font-weight:680}
.workflow-reel-bridge p{flex-basis:100%;margin:3px 0 0;color:#8a838e;font-family:inherit;font-size:11px;letter-spacing:0}

.workflow-reel-scroll{position:relative;height:640vh;margin-top:12px;overflow:clip}
.workflow-reel-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:linear-gradient(180deg,#f5f1eb 0%,#eee9e3 100%);isolation:isolate}
.workflow-reel-sticky::before{content:'';position:absolute;inset:-20% -10%;z-index:-2;background:radial-gradient(circle at 18% 50%,rgba(124,92,255,.09),transparent 28%),radial-gradient(circle at 82% 45%,rgba(255,104,70,.06),transparent 24%);pointer-events:none}
.workflow-reel-sticky::after{content:'SAME THREAD';position:absolute;z-index:-1;right:-2vw;bottom:-4vh;color:rgba(24,22,31,.025);font-family:'Space Grotesk Variable';font-size:clamp(110px,16vw,300px);font-weight:750;letter-spacing:-.08em;white-space:nowrap;pointer-events:none}
.workflow-reel-meta{position:absolute;z-index:8;left:4.5vw;top:7vh;display:flex;align-items:center;gap:14px;color:#8c8491;font-size:8px;font-weight:820;letter-spacing:.14em}
.workflow-reel-meta strong{color:var(--ink);font-size:9px}
.workflow-reel-meta>i{width:150px;height:2px;background:rgba(24,22,31,.09);overflow:hidden}
.workflow-reel-meta>i b{display:block;width:100%;height:100%;background:var(--violet);transform:scaleX(.1666);transform-origin:left center;will-change:transform}
.workflow-reel-rail{position:absolute;left:4.5vw;top:14vh;height:76vh;display:flex;align-items:center;gap:4vw;width:max-content;max-width:none;will-change:transform;transform:translate3d(0,0,0)}
.workflow-reel-panel{position:relative;flex:0 0 min(82vw,1380px);height:min(690px,72vh);min-height:560px;padding:clamp(34px,4vw,62px);border:1px solid rgba(24,22,31,.09);border-radius:38px;background:#fff;box-shadow:0 35px 100px rgba(40,31,55,.10);display:grid;grid-template-columns:minmax(300px,.72fr) minmax(560px,1.28fr);gap:clamp(36px,4vw,72px);align-items:center;overflow:hidden;opacity:.54;transform:scale(.94);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.workflow-reel-panel.is-active{opacity:1;transform:scale(1);box-shadow:0 45px 130px rgba(40,31,55,.17)}
.workflow-reel-panel::after{content:'';position:absolute;inset:auto -10% -36% auto;width:420px;aspect-ratio:1;border-radius:50%;border:68px solid rgba(124,92,255,.035);pointer-events:none}
.workflow-panel-copy{position:relative;z-index:3;align-self:center}
.workflow-panel-copy small{display:block;margin-bottom:18px;color:var(--violet);font-size:9px;font-weight:860;letter-spacing:.15em}
.workflow-panel-copy h3{margin:0;max-width:500px;font-family:'Space Grotesk Variable';font-size:clamp(38px,4.25vw,70px);line-height:.98;letter-spacing:-.058em;font-weight:650}
.workflow-panel-copy p{max-width:500px;margin:24px 0 0;color:#77707c;font-size:14px;line-height:1.7}
.workflow-panel-visual{position:relative;height:100%;min-height:460px;border:1px solid rgba(24,22,31,.08);border-radius:28px;background:linear-gradient(145deg,#201c28,#17141d);overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.04),0 25px 70px rgba(35,27,52,.18)}
.workflow-panel-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 54%,rgba(124,92,255,.20),transparent 29%),linear-gradient(115deg,transparent,rgba(255,255,255,.018));pointer-events:none}
.workflow-thread{position:absolute;left:7%;right:7%;top:52%;height:0;border-top:2px dashed rgba(165,141,255,.38);transform:rotate(-3deg);transform-origin:center;filter:drop-shadow(0 0 7px rgba(124,92,255,.22))}
.workflow-thread i{position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 7px rgba(255,104,70,.10),0 0 22px rgba(255,104,70,.55);animation:workflow-thread-travel 4.8s linear infinite}
@keyframes workflow-thread-travel{0%{left:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.flow-object{position:absolute;z-index:3;width:142px;min-height:68px;padding:11px 12px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.065);color:#fff;display:grid;grid-template-columns:28px 1fr;gap:4px 8px;align-items:center;backdrop-filter:blur(14px);box-shadow:0 15px 38px rgba(0,0,0,.18);opacity:.48;transform:translateY(12px) scale(.96);transition:opacity .5s ease,transform .65s cubic-bezier(.2,.8,.2,1),border-color .4s ease}
.workflow-reel-panel.is-active .flow-object{opacity:1;transform:translateY(0) scale(1)}
.workflow-reel-panel.is-active .flow-object:nth-of-type(3){transition-delay:.06s}.workflow-reel-panel.is-active .flow-object:nth-of-type(4){transition-delay:.11s}.workflow-reel-panel.is-active .flow-object:nth-of-type(5){transition-delay:.16s}.workflow-reel-panel.is-active .flow-object:nth-of-type(6){transition-delay:.21s}.workflow-reel-panel.is-active .flow-object:nth-of-type(7){transition-delay:.26s}
.flow-object>i{grid-row:1/span 2;width:28px;height:28px;border-radius:9px;background:rgba(124,92,255,.18);color:#bda9ff;display:grid;place-items:center}
.flow-object>i svg{width:13px;height:13px}.flow-object b{font-size:8px}.flow-object em{color:rgba(255,255,255,.42);font-size:6px;font-style:normal}
.flow-object.o1{left:5%;top:13%}.flow-object.o2{left:31%;top:8%}.flow-object.o3{right:9%;top:17%}.flow-object.o4{left:11%;bottom:14%}.flow-object.o5{left:42%;bottom:8%}.flow-object.o6{right:5%;bottom:18%}
.workflow-project-core{position:absolute;z-index:4;left:50%;top:52%;width:188px;min-height:126px;padding:18px;border:1px solid rgba(194,175,255,.28);border-radius:22px;background:linear-gradient(145deg,rgba(111,87,161,.72),rgba(68,53,96,.74));transform:translate(-50%,-50%);display:grid;place-items:center;align-content:center;text-align:center;box-shadow:0 30px 80px rgba(40,22,75,.46),0 0 60px rgba(124,92,255,.14);color:#fff}
.workflow-project-core img{width:42px;height:42px;border-radius:12px;margin-bottom:8px}.workflow-project-core small{color:rgba(255,255,255,.40);font-size:5.6px;letter-spacing:.12em}.workflow-project-core strong{margin-top:3px;font-size:13px}.workflow-project-core span{margin-top:5px;color:#c7b8ff;font-size:6.3px}

/* Distinct workflow atmospheres while retaining the LobeWork system language. */
.workflow-reel-panel[data-workflow-panel="creative"]{background:linear-gradient(145deg,#f1ecff,#ddd3ff)}
.workflow-reel-panel[data-workflow-panel="creative"] .workflow-panel-visual{background:linear-gradient(145deg,#342a46,#211b2d)}
.workflow-reel-panel[data-workflow-panel="research"]{background:linear-gradient(145deg,#edf5ff,#dcecff)}
.workflow-reel-panel[data-workflow-panel="research"] .workflow-panel-visual{background:linear-gradient(145deg,#1d2938,#17202c)}
.workflow-reel-panel[data-workflow-panel="operations"]{background:linear-gradient(145deg,#f5f0e9,#ebe2d6)}
.workflow-reel-panel[data-workflow-panel="consulting"]{background:linear-gradient(145deg,#fff,#f0ebe5)}
.workflow-reel-panel[data-workflow-panel="distributed"]{background:linear-gradient(145deg,#201c28,#17141d);color:#fff;border-color:rgba(255,255,255,.08)}
.workflow-reel-panel[data-workflow-panel="distributed"] .workflow-panel-copy p{color:rgba(255,255,255,.58)}
.workflow-reel-panel[data-workflow-panel="distributed"] .workflow-panel-visual{border-color:rgba(255,255,255,.08);background:linear-gradient(145deg,#292235,#17141e)}

.workflow-thesis-wrap{padding-top:100px;padding-bottom:136px}
.workflow-thesis{margin-top:0!important}
.workflow-thesis::before{content:'DIFFERENT WORK. SAME THREAD.';position:absolute;right:5%;bottom:7%;z-index:1;color:rgba(255,255,255,.08);font-family:'Space Grotesk Variable';font-size:clamp(38px,6vw,90px);font-weight:730;letter-spacing:-.06em;white-space:nowrap;transform:rotate(-3deg)}

@media(min-width:1800px){
  .workflow-reel-panel{flex-basis:min(76vw,1550px);grid-template-columns:minmax(380px,.72fr) minmax(760px,1.28fr)}
  .workflow-panel-visual{min-height:520px}.flow-object{width:158px;min-height:74px;padding:12px 13px}.workflow-project-core{width:212px;min-height:140px}
  .workflow-reel-rail{top:12vh;height:80vh}.workflow-reel-meta{top:5vh}
}
@media(max-width:1200px){
  .workflow-reel-panel{flex-basis:88vw;grid-template-columns:minmax(260px,.65fr) minmax(470px,1.35fr);padding:34px;gap:30px}.workflow-panel-copy h3{font-size:clamp(34px,4vw,52px)}.flow-object{width:126px}.workflow-reel-scroll{height:590vh}
}
@media(max-width:900px){
  .workflow-reel-section{padding-top:94px;overflow:hidden}.workflow-reel-section .audience-copy{grid-template-columns:1fr;gap:26px}.workflow-reel-section .audience-copy p{grid-column:1}.workflow-reel-bridge{margin-top:48px}.workflow-reel-scroll{height:auto;margin-top:20px}.workflow-reel-sticky{position:relative;height:auto;overflow:visible;padding:0 18px 40px;background:transparent}.workflow-reel-meta{display:none}.workflow-reel-rail{position:relative;left:auto;top:auto;height:auto;display:grid;gap:18px;transform:none!important}.workflow-reel-panel{width:100%;height:auto;min-height:0;display:grid;grid-template-columns:1fr;padding:28px;border-radius:28px;opacity:1;transform:none}.workflow-panel-copy h3{font-size:clamp(34px,9vw,54px)}.workflow-panel-visual{min-height:430px}.workflow-thesis-wrap{padding-top:60px;padding-bottom:100px}
}
@media(max-width:560px){
  .workflow-panel-visual{min-height:390px}.flow-object{width:112px;min-height:60px;padding:9px;grid-template-columns:24px 1fr}.flow-object>i{width:24px;height:24px}.flow-object.o2{left:38%}.flow-object.o3{right:3%}.flow-object.o5{left:36%}.workflow-project-core{width:150px;min-height:108px}.workflow-project-core img{width:34px;height:34px}.workflow-thesis::before{display:none}
}
@media(prefers-reduced-motion:reduce){.workflow-thread i{animation:none}.workflow-reel-panel,.flow-object{transition:none!important}}

/* =========================================================
   V20.33 — AI-native reel heading compression
   ========================================================= */
.workflow-reel-intro{padding-bottom:clamp(34px,5vh,64px)}
.workflow-reel-heading{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(36px,5vw,88px);align-items:start}
.workflow-reel-heading h2{grid-column:2;margin:0;display:grid;gap:.02em;font-family:'Space Grotesk Variable';font-size:clamp(72px,8vw,138px);line-height:.84;letter-spacing:-.075em;font-weight:650}
.workflow-reel-heading h2 span,.workflow-reel-heading h2 strong{display:block}
.workflow-reel-heading h2 span{color:#8e8793;font-weight:520}
.workflow-reel-heading h2 strong{color:var(--ink);font-weight:690}
.workflow-reel-scroll{margin-top:0}
@media(max-width:1200px){
  .workflow-reel-heading{grid-template-columns:minmax(180px,.34fr) 1fr;gap:34px}
  .workflow-reel-heading h2{font-size:clamp(64px,8.4vw,104px)}
}
@media(max-width:900px){
  .workflow-reel-intro{padding-bottom:34px}
  .workflow-reel-heading{grid-template-columns:1fr;gap:24px}
  .workflow-reel-heading h2{grid-column:1;font-size:clamp(54px,14vw,88px);line-height:.88}
}


/* =========================================================
   V20.34 — Pricing principles + Product Direction route
   ========================================================= */
.pricing-v34{position:relative;padding-top:clamp(110px,10vw,170px);padding-bottom:clamp(110px,9vw,155px);overflow:clip;isolation:isolate}
.pricing-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.pricing-glow{position:absolute;border-radius:50%;filter:blur(12px);opacity:.62;will-change:transform}
.pricing-glow-a{left:-13%;top:14%;width:680px;height:680px;background:radial-gradient(circle,rgba(124,92,255,.14),rgba(124,92,255,.04) 42%,transparent 70%)}
.pricing-glow-b{left:27%;bottom:-34%;width:520px;height:520px;background:radial-gradient(circle,rgba(124,92,255,.09),transparent 68%)}
.pricing-v34 .pricing-main{grid-template-columns:minmax(0,.92fr) minmax(500px,1.08fr);gap:clamp(64px,8vw,128px);align-items:start;margin:0}
.pricing-story-v34{position:relative;padding:14px 0 0;gap:0;min-height:690px}
.pricing-kicker{margin-bottom:clamp(34px,4vw,58px)}
.pricing-story-v34 h2{margin:0;font-family:'Space Grotesk Variable';font-size:clamp(58px,6.4vw,98px);line-height:.9;letter-spacing:-.073em;font-weight:580;color:#17141d}
.pricing-story-v34 h2 span{color:#9a949f}
.pricing-principle-stack{position:relative;margin-top:clamp(54px,6vw,84px);padding-left:46px;display:grid;gap:0}
.pricing-thread{position:absolute;left:12px;top:4px;bottom:4px;width:2px;background:rgba(24,22,31,.08);overflow:visible}
.pricing-thread i{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:top;transform:scaleY(0);background:linear-gradient(180deg,rgba(124,92,255,.15),#7c5cff 36%,#7c5cff 78%,rgba(124,92,255,.2));box-shadow:0 0 18px rgba(124,92,255,.18)}
.pricing-thread b{position:absolute;left:50%;top:0;width:9px;height:9px;border-radius:50%;background:#ff6846;box-shadow:0 0 0 5px rgba(255,104,70,.11),0 0 20px rgba(255,104,70,.34);transform:translate(-50%,-50%);opacity:0}
.pricing-principle{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:18px;padding:0 0 29px;margin-bottom:29px;border-bottom:1px solid rgba(24,22,31,.095);opacity:.34;transform:translateY(16px);transition:border-color .35s ease}
.pricing-principle:last-of-type{margin-bottom:0}
.pricing-principle>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(124,92,255,.08);color:#7c5cff;font-size:8px;font-weight:850;letter-spacing:.05em}
.pricing-principle div{display:grid;gap:6px}
.pricing-principle small{font-size:8px;font-weight:850;letter-spacing:.13em;color:#8c8491}
.pricing-principle strong{font-family:'Space Grotesk Variable';font-size:clamp(20px,1.75vw,27px);line-height:1.06;letter-spacing:-.035em;color:#211d27}
.pricing-principle p{margin:1px 0 0;max-width:570px;color:#77707c;font-size:11px;line-height:1.65}
.pricing-principle.is-active{border-color:rgba(124,92,255,.18)}
.pricing-principle.is-active>span{background:#1c1923;color:#fff;box-shadow:0 10px 28px rgba(28,25,35,.15)}
.pricing-byo-note{margin-top:34px;display:flex;align-items:flex-start;gap:12px;color:#635c69}
.brand-signal-mini{width:8px;height:8px;margin-top:7px;border-radius:50%;background:#ff6846;box-shadow:0 0 0 5px rgba(255,104,70,.09);flex:0 0 auto}
.pricing-byo-note p{margin:0;display:grid;gap:3px}.pricing-byo-note strong{font-size:11px;color:#29242e}.pricing-byo-note small{font-size:9px;color:#85808a}
.pricing-purchase-panel{position:sticky;top:110px;align-self:start;box-shadow:0 34px 100px rgba(24,22,31,.21),0 0 0 1px rgba(124,92,255,.03)}
.pricing-purchase-panel:before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(145deg,rgba(188,170,255,.18),transparent 38%,rgba(255,104,70,.05));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

.roadmap-route-section{position:relative;padding:clamp(110px,10vw,165px) 0 clamp(100px,9vw,145px);overflow:clip;background:linear-gradient(180deg,rgba(246,243,238,0),rgba(241,237,247,.5) 42%,rgba(246,243,238,0));isolation:isolate}
.roadmap-route-shell{position:relative}
.roadmap-route-head{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:clamp(28px,5vw,72px);align-items:end}
.roadmap-route-head h2{margin:0 0 14px;font-family:'Space Grotesk Variable';font-size:clamp(58px,6.4vw,94px);line-height:.91;letter-spacing:-.071em}
.roadmap-route-head p{margin:0;max-width:610px;color:#77707c;font-size:13px;line-height:1.65}
.roadmap-route-stage{position:relative;margin-top:72px;min-height:590px;border-radius:34px;overflow:hidden;background:radial-gradient(circle at 50% 53%,rgba(124,92,255,.07),transparent 36%),linear-gradient(180deg,rgba(255,255,255,.72),rgba(250,248,252,.52));border:1px solid rgba(24,22,31,.075);box-shadow:0 30px 95px rgba(50,38,68,.08);isolation:isolate}
.roadmap-route-depth{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.roadmap-route-depth i{position:absolute;left:-10%;width:120%;height:1px;background:linear-gradient(90deg,transparent,rgba(124,92,255,.09),transparent);transform:rotate(-6deg)}
.roadmap-route-depth i:nth-child(1){top:22%}.roadmap-route-depth i:nth-child(2){top:53%;transform:rotate(4deg);opacity:.6}.roadmap-route-depth i:nth-child(3){top:79%;transform:rotate(-2deg);opacity:.38}
.roadmap-route-line{position:absolute;inset:108px 4% 75px;width:92%;height:360px;overflow:visible;pointer-events:none}
.roadmap-route-line path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.roadmap-route-base{stroke:rgba(32,27,38,.10);stroke-width:2.1;stroke-dasharray:5 11}
.roadmap-route-progress{stroke:#7c5cff;stroke-width:2.4;filter:drop-shadow(0 0 5px rgba(124,92,255,.2))}
.roadmap-stations{position:absolute;inset:0}
.roadmap-station{position:absolute;width:min(31%,340px);min-height:250px;padding:24px 25px 22px;border-radius:23px;border:1px solid rgba(24,22,31,.085);background:rgba(255,255,255,.88);box-shadow:0 22px 62px rgba(34,27,43,.10);backdrop-filter:blur(14px);display:flex;flex-direction:column;opacity:.3;transform:translateY(22px) scale(.975);will-change:transform,opacity}
.roadmap-station.shipped{left:6%;bottom:55px;background:linear-gradient(145deg,#eee9ff,#e7e0ff)}
.roadmap-station.now{left:50%;top:72px;transform:translate(-50%,22px) scale(.975);background:#1b1822;color:#fff;box-shadow:0 30px 90px rgba(27,24,34,.22)}
.roadmap-station.explore{right:5.5%;bottom:76px;background:linear-gradient(145deg,#edf7ff,#dcefff)}
.roadmap-station small{font-size:7px;font-weight:850;letter-spacing:.14em;color:#827b88}
.roadmap-station.now small{color:rgba(255,255,255,.42)}
.roadmap-station h3{margin:42px 0 11px;font-family:'Space Grotesk Variable';font-size:clamp(24px,2.15vw,32px);line-height:1.02;letter-spacing:-.045em}
.roadmap-station p{margin:0;color:#746d79;font-size:10px;line-height:1.62}.roadmap-station.now p{color:rgba(255,255,255,.5)}
.roadmap-station>span{margin-top:auto;padding-top:20px;font-size:8px;font-weight:800;color:#694bd9}.roadmap-station.now>span{color:#bbaeff}.roadmap-station.explore>span{color:#247bb4}
.roadmap-marker{position:absolute;left:24px;top:-18px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#6648da;border:1px solid rgba(124,92,255,.19);box-shadow:0 10px 28px rgba(59,42,85,.14)}
.roadmap-marker svg{width:16px;height:16px}.roadmap-station.now .roadmap-marker{background:#7c5cff;color:#fff;border-color:#7c5cff;box-shadow:0 0 0 7px rgba(124,92,255,.09),0 12px 34px rgba(63,43,104,.28)}.roadmap-station.explore .roadmap-marker{color:#2379b6;border-color:rgba(57,167,255,.2)}
.roadmap-route-caption{position:absolute;left:5%;right:5%;bottom:17px;display:flex;align-items:center;justify-content:space-between;color:#a099a5;font-size:7px;font-weight:850;letter-spacing:.14em}.roadmap-route-caption strong{color:#7c5cff;font-weight:850}

@media(max-width:1100px){.pricing-v34 .pricing-main{grid-template-columns:1fr;gap:54px}.pricing-story-v34{min-height:0}.pricing-purchase-panel{position:relative;top:auto;max-width:780px;width:100%;margin-inline:auto}.roadmap-route-head{grid-template-columns:1fr auto}.roadmap-route-head>.section-index{grid-column:1/-1}.roadmap-route-stage{min-height:760px}.roadmap-route-line{display:none}.roadmap-station{width:42%;}.roadmap-station.shipped{left:5%;top:80px;bottom:auto}.roadmap-station.now{left:auto;right:5%;top:210px;transform:none}.roadmap-station.explore{left:12%;right:auto;bottom:60px}.roadmap-route-caption{display:none}}
@media(max-width:760px){.pricing-v34{padding-top:90px}.pricing-story-v34 h2{font-size:clamp(52px,15vw,74px)}.pricing-principle-stack{padding-left:36px;margin-top:48px}.pricing-principle{grid-template-columns:32px 1fr;gap:13px}.pricing-principle p{font-size:10px}.roadmap-route-head{display:grid;grid-template-columns:1fr;gap:20px}.roadmap-route-stage{min-height:0;margin-top:46px;padding:42px 16px 16px;display:grid;gap:14px}.roadmap-stations{position:relative;display:grid;gap:14px}.roadmap-station,.roadmap-station.shipped,.roadmap-station.now,.roadmap-station.explore{position:relative;inset:auto!important;width:100%;min-height:240px;transform:none!important;opacity:1!important}.roadmap-marker{top:16px;right:18px;left:auto}.roadmap-station h3{margin-top:58px}.roadmap-route-depth{display:none}}
@media(prefers-reduced-motion:reduce){.pricing-thread i{transform:scaleY(1)!important}.pricing-thread b{display:none}.pricing-principle,.roadmap-station{opacity:1!important;transform:none!important}.roadmap-route-progress{stroke-dasharray:none!important;stroke-dashoffset:0!important}}

/* =========================================================
   V20.35 — Hero + Shift editorial compression
   ========================================================= */
.hero-copy > p{
  max-width:660px;
  font-size:clamp(20px,1.62vw,23px)!important;
  line-height:1.56!important;
  letter-spacing:-.026em;
}

/* The provider ecosystem now acts as a deliberate page break between
   the hero promise and The Shift, rather than a utility-sized ticker. */
.provider-strip{
  position:relative;
  min-height:148px;
  padding:0;
  border-block:1px solid rgba(24,22,31,.10);
  display:grid;
  grid-template-columns:minmax(300px,.58fr) minmax(0,1.42fr);
  gap:clamp(30px,4vw,72px);
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(124,92,255,.022));
}
.provider-strip::before{
  content:'ONE CONTINUOUS PROJECT';
  position:absolute;
  z-index:-1;
  right:-1.5vw;
  top:50%;
  transform:translateY(-51%);
  white-space:nowrap;
  font-family:'Space Grotesk Variable';
  font-size:clamp(64px,8.3vw,138px);
  line-height:.8;
  letter-spacing:-.07em;
  font-weight:620;
  color:rgba(124,92,255,.027);
  pointer-events:none;
}
.provider-label{
  padding-left:max(22px,calc((100vw - var(--max))/2));
  display:flex;
  flex-direction:column;
  gap:4px;
  white-space:nowrap;
  font-size:10px;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:820;
  color:#77717d;
}
.provider-label span{color:var(--violet)}
.marquee-mask{
  padding-block:30px;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.provider-marquee{align-items:center}
.provider-marquee span{
  min-width:clamp(180px,14vw,252px);
  gap:13px;
  color:#4f4a55;
  font-family:'Space Grotesk Variable';
  font-size:clamp(22px,1.75vw,30px);
  line-height:1;
  font-weight:560;
  letter-spacing:-.035em;
}
.provider-marquee i{
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:rgba(124,92,255,.34);
  box-shadow:0 0 0 4px rgba(124,92,255,.035);
}
.provider-marquee span:nth-child(4n+1) i{background:var(--coral);box-shadow:0 0 0 5px rgba(255,104,70,.06)}
.provider-marquee{animation-duration:34s}

/* The Shift now makes one argument, then lets the comparison visual prove it. */
.shift-story{padding-top:clamp(94px,8vw,128px)}
.shift-story .positioning-top{align-items:center}
.shift-lines{margin-top:38px}
.shift-intro-grid{
  margin-top:34px;
  display:block;
  max-width:900px;
}
.shift-lede{display:block;max-width:900px}
.shift-lede strong{
  display:block;
  max-width:860px;
  font-size:clamp(27px,3vw,43px);
  line-height:1.08;
  letter-spacing:-.048em;
}
.shift-sticky-wrap{margin-top:clamp(66px,7vw,88px)}

@media(max-width:900px){
  .provider-strip{
    min-height:138px;
    grid-template-columns:1fr;
    gap:8px;
    padding:25px 0 20px;
  }
  .provider-strip::before{font-size:86px;right:-34%;top:58%}
  .provider-label{
    padding-left:20px;
    display:block;
    font-size:9px;
  }
  .provider-label span{display:inline}
  .marquee-mask{padding-block:18px}
  .provider-marquee span{min-width:170px;font-size:22px}
  .shift-story{padding-top:82px}
  .shift-lines{margin-top:28px}
  .shift-intro-grid{margin-top:26px}
}

@media(max-width:760px){
  .hero-copy > p{
    max-width:100%;
    font-size:17px!important;
    line-height:1.58!important;
  }
  .provider-strip{min-height:126px}
  .provider-marquee span{min-width:150px;font-size:19px}
  .shift-lede strong{font-size:clamp(24px,7vw,34px)}
}


/* v20.37 — Shift revealer legibility + cleaner entry */
.shift-sticky-wrap .section-shell { padding-top: clamp(8px, 1.2vw, 18px); }
@media (min-width: 1800px) {
  .shift-comparison .connected-node { width: 252px; height: 118px; min-height: 118px; max-height: 118px; }
  .shift-comparison .connected-node strong { font-size: 15px; }
  .shift-comparison .connected-node small { font-size: 12.5px; }
}

/* =========================================================
   v20.38 — Project Record editorial flow
   Slider now hands directly into one quieter, scroll-alive
   Project Record chapter. The duplicate galaxy scene is gone.
   ========================================================= */
.project-record-section {
  position: relative;
  margin: 0;
  padding: clamp(150px, 17vh, 230px) 0 clamp(120px, 14vh, 190px);
  overflow: hidden;
  background:
    radial-gradient(circle at 64% 12%, rgba(126,92,255,.11), transparent 28%),
    radial-gradient(circle at 42% 62%, rgba(126,92,255,.055), transparent 34%),
    #18151f;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.035);
}
.project-record-section::before {
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:1px;
  height:clamp(80px,10vh,130px);
  background:linear-gradient(180deg,rgba(159,135,255,0),rgba(159,135,255,.45));
  transform:translateX(-50%);
  opacity:.8;
}
.project-record-shell { position:relative; }
.record-heading-new {
  display:grid;
  grid-template-columns:minmax(160px,.42fr) minmax(0,1.58fr);
  gap:clamp(36px,6vw,100px);
  align-items:start;
  margin-bottom:clamp(90px,12vh,155px);
}
.record-heading-new .section-index { padding-top:14px; color:#a39cae; }
.record-heading-copy { max-width:980px; }
.record-heading-copy h2 {
  margin:0;
  font-family:'Space Grotesk Variable';
  font-size:clamp(62px,7vw,112px);
  line-height:.91;
  letter-spacing:-.065em;
  font-weight:620;
}
.record-heading-copy p {
  max-width:760px;
  margin:clamp(28px,3vh,42px) 0 0;
  color:rgba(255,255,255,.5);
  font-size:clamp(17px,1.25vw,21px);
  line-height:1.65;
}
.record-flow {
  --record-thread-progress: 0%;
  position:relative;
  width:min(1260px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(80px,10vw,160px);
  row-gap:clamp(54px,8vh,96px);
  padding:clamp(24px,3vh,38px) 0;
}
.record-flow-thread {
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.065);
  overflow:visible;
}
.record-flow-thread span {
  position:absolute;
  inset:0 auto auto 0;
  width:1px;
  height:var(--record-thread-progress);
  background:linear-gradient(180deg,#9f87ff 0%,rgba(159,135,255,.55) 75%,rgba(255,104,76,.7) 100%);
  box-shadow:0 0 24px rgba(126,92,255,.24);
}
.record-flow-thread i {
  position:absolute;
  left:50%;
  top:var(--record-thread-progress);
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff684c;
  box-shadow:0 0 0 6px rgba(255,104,76,.08),0 0 24px rgba(255,104,76,.4);
  transform:translate(-50%,-50%);
}
.record-flow-item {
  position:relative;
  min-height:190px;
  padding:clamp(26px,3vw,42px) 0 clamp(34px,4vw,54px);
  display:grid;
  grid-template-columns:42px 38px minmax(0,1fr);
  gap:18px;
  align-items:start;
  border-bottom:1px solid rgba(255,255,255,.095);
  opacity:.34;
  transform:translateY(26px);
  transition:border-color .35s ease, background .35s ease;
}
.record-flow-item::after {
  content:"";
  position:absolute;
  top:47px;
  width:clamp(38px,5vw,74px);
  height:1px;
  background:linear-gradient(90deg,rgba(159,135,255,.3),rgba(159,135,255,0));
  opacity:.5;
}
.record-flow-left::after { right:calc(clamp(80px,10vw,160px) / -2); }
.record-flow-right::after { left:calc(clamp(80px,10vw,160px) / -2); transform:scaleX(-1); }
.record-flow-number { color:rgba(255,255,255,.22); font-size:12px; font-weight:700; padding-top:5px; }
.record-flow-item > svg { width:21px; height:21px; color:rgba(255,255,255,.78); margin-top:2px; }
.record-flow-item small { display:block; margin-bottom:14px; color:#a992ff; font-size:10px; font-weight:850; letter-spacing:.14em; }
.record-flow-item h3 { margin:0; color:#fff; font-family:'Space Grotesk Variable'; font-size:clamp(29px,2.25vw,40px); line-height:1.02; letter-spacing:-.045em; font-weight:620; }
.record-flow-item p { max-width:500px; margin:15px 0 0; color:rgba(255,255,255,.43); font-size:clamp(14px,1vw,17px); line-height:1.6; }
.record-flow-item.is-active { border-color:rgba(159,135,255,.26); }
.record-flow-item.is-active > svg { color:#b6a5ff; }
.record-flow-close {
  width:min(1260px,100%);
  margin:clamp(110px,13vh,170px) auto 0;
  padding-top:clamp(36px,4vh,56px);
  border-top:1px solid rgba(255,255,255,.09);
  display:grid;
  grid-template-columns:minmax(160px,.42fr) minmax(0,1.58fr);
  gap:clamp(36px,6vw,100px);
  align-items:start;
}
.record-flow-close span { color:#a992ff; font-size:10px; font-weight:850; letter-spacing:.14em; padding-top:10px; }
.record-flow-close strong { max-width:900px; font-family:'Space Grotesk Variable'; font-size:clamp(34px,4.2vw,68px); line-height:1; letter-spacing:-.055em; font-weight:590; }

@media (max-width: 900px) {
  .project-record-section { padding-top:120px; }
  .record-heading-new,.record-flow-close { grid-template-columns:1fr; gap:24px; }
  .record-heading-new { margin-bottom:80px; }
  .record-flow { grid-template-columns:1fr; padding-left:36px; row-gap:26px; }
  .record-flow-thread { left:10px; transform:none; }
  .record-flow-item { min-height:0; grid-template-columns:34px 30px minmax(0,1fr); padding:26px 0 34px; }
  .record-flow-item::after { display:none; }
  .record-flow-close { margin-top:80px; }
}
@media (max-width: 620px) {
  .project-record-section { padding:100px 0 100px; }
  .record-heading-copy h2 { font-size:clamp(48px,15vw,70px); }
  .record-heading-copy p { font-size:16px; }
  .record-flow { padding-left:28px; }
  .record-flow-thread { left:7px; }
  .record-flow-item { grid-template-columns:28px 24px minmax(0,1fr); gap:12px; }
  .record-flow-item h3 { font-size:28px; }
  .record-flow-item p { font-size:14px; }
}
@media (prefers-reduced-motion: reduce) {
  .record-flow-item { opacity:1; transform:none; }
  .record-flow { --record-thread-progress:100%; }
}


/* v20.39 — authored Product Direction progression */
.roadmap-route-section{overflow:visible}
.roadmap-route-stage{transform:translateZ(0);will-change:transform}
.roadmap-route-signal{fill:#ff684f;stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 0 8px rgba(255,104,79,.5));pointer-events:none}
.roadmap-station{transition:border-color .25s ease,box-shadow .25s ease;transform-origin:center center}
.roadmap-route-section[data-active-station="0"] .roadmap-station.shipped{box-shadow:0 30px 82px rgba(91,71,150,.17);border-color:rgba(124,92,255,.19)}
.roadmap-route-section[data-active-station="1"] .roadmap-station.now{box-shadow:0 34px 100px rgba(27,24,34,.28)}
.roadmap-route-section[data-active-station="2"] .roadmap-station.explore{box-shadow:0 30px 82px rgba(53,139,198,.16);border-color:rgba(57,167,255,.22)}
.roadmap-route-section[data-active-station="0"] .roadmap-route-caption span:first-child,
.roadmap-route-section[data-active-station="1"] .roadmap-route-caption strong,
.roadmap-route-section[data-active-station="2"] .roadmap-route-caption span:last-child{color:#7c5cff}
@media(max-width:1100px){.roadmap-route-section{overflow:clip}}
@media(max-width:760px){.roadmap-route-signal{display:none}}

/* v20.40 — Product Direction viewport + handoff polish */
.roadmap-route-section{
  padding-top:clamp(82px,7vw,112px);
  padding-bottom:clamp(82px,7vw,108px);
}
.roadmap-route-head{
  grid-template-columns:180px minmax(0,1fr);
  align-items:end;
}
.roadmap-route-head>div{max-width:760px}
.roadmap-route-stage{
  margin-top:48px;
  min-height:520px;
}
.roadmap-route-line{
  inset:74px 4% 58px;
  height:330px;
}
.roadmap-station{min-height:232px}
.roadmap-station.shipped{bottom:46px}
.roadmap-station.now{top:52px}
.roadmap-station.explore{bottom:60px}
.roadmap-route-progress{opacity:0}
.roadmap-route-section.is-roadmap-ready .roadmap-route-progress{opacity:1}
.roadmap-route-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:28px;
}
.roadmap-route-footer .text-arrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:700;
}
.roadmap-route-footer .text-arrow svg{width:15px;height:15px}
@media (min-width:1200px) and (max-height:900px){
  .roadmap-route-section{padding-top:64px;padding-bottom:70px}
  .roadmap-route-head h2{font-size:clamp(54px,5.5vw,82px)}
  .roadmap-route-stage{margin-top:34px;min-height:470px}
  .roadmap-route-line{inset:54px 4% 48px;height:300px}
  .roadmap-station{min-height:212px;padding:21px 23px 20px}
  .roadmap-station.shipped{bottom:40px}
  .roadmap-station.now{top:38px}
  .roadmap-station.explore{bottom:48px}
  .roadmap-station h3{margin-top:36px}
  .roadmap-route-footer{padding-top:20px}
}
@media(max-width:1100px){
  .roadmap-route-head{grid-template-columns:1fr}
  .roadmap-route-stage{min-height:720px}
}
@media(max-width:760px){
  .roadmap-route-section{padding-top:84px;padding-bottom:84px}
  .roadmap-route-stage{margin-top:38px;min-height:0}
  .roadmap-route-footer{padding-top:22px}
}


/* v20.41 — Product Direction minimal-copy + clean initial route state */
.roadmap-route-head{align-items:end}
.roadmap-route-head>div{max-width:820px}
.roadmap-route-head h2{margin-bottom:0}
.roadmap-route-progress{opacity:0!important}
.roadmap-route-section.is-roadmap-ready .roadmap-route-progress{opacity:0!important}
.roadmap-route-section[data-roadmap-started="true"] .roadmap-route-progress{opacity:1!important}

/* v20.42 — FAQ editorial polish */
.landing-page .faq-section {
  padding-block: 112px 150px;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: clamp(72px, 7vw, 118px);
}
.landing-page .faq-intro h2 {
  margin-top: 30px;
  max-width: 7.2ch;
}
.landing-page .faq-intro > p { display: none; }
.landing-page .faq-intro .text-arrow {
  margin-top: 34px;
  font-size: 12px;
  gap: 9px;
  transition: transform .28s ease, color .28s ease;
}
.landing-page .faq-intro .text-arrow:hover { transform: translateX(4px); color: var(--violet); }

.landing-page .faq-list {
  border-top: 1px solid rgba(28,25,35,.14);
}
.landing-page .faq-item {
  position: relative;
  overflow: hidden;
  padding: 31px 14px 31px 10px;
  border-bottom-color: rgba(28,25,35,.14);
  transition: background-color .34s ease, padding .34s ease, box-shadow .34s ease;
}
.landing-page .faq-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 14% 48%, rgba(124,92,255,.10), rgba(124,92,255,.035) 35%, transparent 72%);
  opacity: 0;
  transform: scaleX(.96);
  transform-origin: left center;
  transition: opacity .38s ease, transform .45s cubic-bezier(.2,.75,.2,1);
}
.landing-page .faq-item.open::before { opacity: 1; transform: scaleX(1); }
.landing-page .faq-item:hover:not(.open) { background: rgba(124,92,255,.022); }
.landing-page .faq-item > div,
.landing-page .faq-item > p,
.landing-page .faq-item > .faq-icon { position: relative; z-index: 1; }
.landing-page .faq-item > div {
  grid-template-columns: 46px 1fr;
  gap: 10px;
  padding-right: 52px;
}
.landing-page .faq-item > div span {
  color: #77717d;
  font-size: 10px;
  font-weight: 690;
  letter-spacing: .05em;
  transition: color .3s ease;
}
.landing-page .faq-item.open > div span { color: var(--violet); }
.landing-page .faq-item > div strong {
  font-size: clamp(18px, 1.18vw, 21px);
  line-height: 1.25;
  transition: transform .34s ease;
}
.landing-page .faq-item.open > div strong { transform: translateX(3px); }
.landing-page .faq-icon {
  position: absolute;
  float: none;
  right: 14px;
  top: 31px;
  width: 18px;
  height: 18px;
  margin: 0;
  transition: transform .38s cubic-bezier(.2,.75,.2,1), color .3s ease;
}
.landing-page .faq-item.open .faq-icon { transform: rotate(45deg); color: var(--violet); }
.landing-page .faq-item p {
  max-width: 760px;
  margin-left: 56px;
  padding-right: 46px;
  transform: translateY(-8px);
  filter: blur(1.5px);
  transition: max-height .5s cubic-bezier(.2,.75,.2,1), opacity .32s ease, margin-top .4s ease, transform .42s cubic-bezier(.2,.75,.2,1), filter .35s ease;
}
.landing-page .faq-item.open p {
  max-height: 260px;
  margin-top: 19px;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (max-width: 900px) {
  .landing-page .faq-section { padding-block: 84px 115px; gap: 48px; }
  .landing-page .faq-intro h2 { max-width: 9ch; }
  .landing-page .faq-item { padding: 26px 8px; }
  .landing-page .faq-icon { top: 27px; right: 8px; }
  .landing-page .faq-item > div { grid-template-columns: 36px 1fr; padding-right: 42px; }
  .landing-page .faq-item p { margin-left: 46px; padding-right: 30px; }
}
@media (max-width: 600px) {
  .landing-page .faq-item > div { grid-template-columns: 32px 1fr; }
  .landing-page .faq-item p { margin-left: 0; padding-right: 12px; }
}

/* V20.43 — decisive final CTA */
.final-cta-minimal{max-width:980px}
.final-cta-minimal h2{font-size:clamp(66px,8vw,118px)}
.final-cta-action{margin-top:42px}
.final-cta-action .button{min-width:210px;min-height:58px;font-size:14px}
.final-cta .cta-command,.final-cta .release-meta,.final-cta .cta-context-packet,.final-cta .cta-kicker,.final-cta .release-secondary,.final-cta .cta-content>p{display:none!important}
@media(max-width:760px){.final-cta{min-height:520px;padding:70px 22px}.final-cta-minimal h2{font-size:clamp(52px,14vw,76px)}.final-cta-action{margin-top:32px}.final-cta-action .button{width:min(100%,280px)}}

/* v20.44 — responsive stabilization / QA layer */
html { overflow-x: clip; }
body { min-width: 0; }
img, svg, video, canvas { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

/* Desktop-short viewport guardrails */
@media (min-width: 1101px) and (max-height: 820px) {
  .hero { min-height: 760px; padding-top: 104px; padding-bottom: 64px; }
  .hero h1 { font-size: clamp(70px, 7.2vw, 112px); }
  .shift-sticky-wrap { padding-top: 34px; padding-bottom: 52px; }
  .shift-comparison { min-height: min(690px, calc(100vh - 116px)); }
  .product-chapter-sticky { min-height: 760px; }
  .workflow-reel-sticky { min-height: 720px; }
  .roadmap-route-stage { min-height: 440px; }
}

/* Tablet landscape / compact laptop: keep cinematic hierarchy but remove fragile pinning. */
@media (max-width: 1100px) {
  .site-shell, .section-shell { width: min(calc(100% - 44px), 1440px); }
  .hero { min-height: auto; padding-top: 112px; padding-bottom: 78px; }
  .hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .hero-copy { max-width: 860px; }
  .hero h1 { max-width: 11ch; font-size: clamp(70px, 9.5vw, 104px); }
  .hero-copy > p { max-width: 720px; font-size: clamp(18px, 2.25vw, 22px); }
  .hero-visual { width: min(100%, 920px); margin-inline: auto; }
  .hero-actions { flex-wrap: wrap; }

  .tool-continuity-band { min-height: 124px; }

  .shift-sticky-wrap { padding-block: 54px 76px; }
  .shift-comparison { min-height: 660px; border-radius: 30px; }
  .shift-comparison .comparison-range { touch-action: pan-y; }
  .shift-comparison .connected-node { width: clamp(188px, 23vw, 238px); min-height: 116px; }
  .shift-comparison .connected-node strong { font-size: 14px; }
  .shift-comparison .connected-node small, .shift-comparison .connected-node p { font-size: 11px; }

  .project-record-section { padding-top: 128px; }
  .record-heading-new { gap: 34px; }

  .product-chapter-track { height: auto !important; }
  .product-chapter-sticky { position: relative !important; top: auto !important; height: auto !important; min-height: 0; padding: 82px 0 104px; }
  .product-chapter-layout { grid-template-columns: 1fr; gap: 34px; }
  .product-chapter-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); width: 100%; gap: 8px; }
  .product-chapter-tabs::before, .product-chapter-tabs::after, .product-chapter-thread { display: none !important; }
  .product-chapter-tabs button { min-height: 58px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; }
  .product-gallery-stage { min-height: 620px; }
  .product-gallery-stage .gallery-window { transform: none !important; }

  .workflow-reel-section { height: auto !important; min-height: 0 !important; padding-bottom: 110px; }
  .workflow-reel-sticky { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; }
  .workflow-reel-viewport { overflow: visible; }
  .workflow-reel-rail { transform: none !important; width: 100% !important; display: grid !important; gap: 22px; padding: 0 !important; }
  .workflow-reel-panel { width: 100% !important; min-width: 0 !important; min-height: 540px; opacity: 1 !important; transform: none !important; }
  .workflow-reel-progress-wrap { display: none; }

  .pricing-v34 .pricing-main { gap: 64px; }
  .pricing-purchase-panel { position: relative !important; top: auto !important; }

  .roadmap-route-section { overflow: clip; }
  .roadmap-route-stage { min-height: 0 !important; padding: 38px 24px 26px; }
  .roadmap-route-line, .roadmap-route-depth, .roadmap-route-signal { display: none !important; }
  .roadmap-stations { position: relative !important; display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
  .roadmap-station, .roadmap-station.shipped, .roadmap-station.now, .roadmap-station.explore { position: relative !important; inset: auto !important; width: auto !important; min-height: 250px; transform: none !important; opacity: 1 !important; }
  .roadmap-station.now { background: #1a1720; color: #fff; }
  .roadmap-route-caption { display: none !important; }

  .landing-page .faq-section { grid-template-columns: 1fr; gap: 54px; }
  .landing-page .faq-intro h2 { max-width: 11ch; }
  .landing-page .faq-intro { max-width: 680px; }

  .final-cta { min-height: 560px; }
}

/* Tablet portrait */
@media (max-width: 820px) {
  .site-shell, .section-shell { width: min(calc(100% - 32px), 1440px); }
  .hero { padding-top: 96px; padding-bottom: 66px; }
  .hero h1 { font-size: clamp(62px, 12vw, 88px); }
  .hero-copy > p { font-size: 19px; line-height: 1.55; }
  .hero-actions .button { min-height: 52px; }
  .hero-provider-row { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; padding-bottom: 4px; }
  .hero-provider-row::-webkit-scrollbar { display: none; }

  .shift-comparison { min-height: 610px; }
  .shift-comparison .connected-node { width: clamp(160px, 25vw, 205px); min-height: 108px; padding: 16px; }
  .shift-comparison .connected-node strong { font-size: 13px; }
  .shift-comparison .connected-node small, .shift-comparison .connected-node p { font-size: 10px; line-height: 1.35; }
  .shift-comparison .project-record-core { transform: scale(.92); }

  .product-chapter-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-gallery-stage { min-height: 540px; }
  .gallery-window { border-radius: 20px; }

  .workflow-reel-panel { min-height: 0; padding: 34px 26px; }
  .workflow-panel-inner { grid-template-columns: 1fr !important; gap: 30px; }
  .workflow-panel-copy { max-width: 680px; }
  .workflow-panel-visual { min-height: 390px; }

  .roadmap-stations { grid-template-columns: 1fr; }
  .roadmap-station, .roadmap-station.shipped, .roadmap-station.now, .roadmap-station.explore { min-height: 220px; }

  .landing-page .faq-section { padding-block: 82px 104px; }
  .final-cta { margin-inline: 16px; border-radius: 28px; }
}

/* Phones */
@media (max-width: 600px) {
  :root { --mobile-gutter: 18px; }
  .site-shell, .section-shell { width: calc(100% - (var(--mobile-gutter) * 2)); }
  .site-header { padding-inline: 14px; }
  .header-inner { min-height: 66px; }
  .brand { min-width: 0; }
  .brand img { max-width: 132px; }
  .menu-button { min-width: 44px; min-height: 44px; }

  .hero { padding-top: 84px; padding-bottom: 54px; }
  .hero-grid { gap: 38px; }
  .hero h1 { max-width: 10.5ch; font-size: clamp(52px, 15.3vw, 72px); line-height: .92; letter-spacing: -.065em; }
  .hero-copy > p { font-size: 17px; line-height: 1.55; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-actions .button { width: 100%; justify-content: center; }
  .hero-support-row { align-items: flex-start; gap: 12px; }
  .hero-support-row > div:last-child { min-width: 0; }
  .hero-support-row strong, .hero-support-row span { white-space: normal; }

  .tool-continuity-band { min-height: 104px; }
  .tool-continuity-band .tool-marquee-label { font-size: 9px; }

  .shift-sticky-wrap { padding-block: 42px 64px; }
  .shift-comparison { min-height: 540px; border-radius: 24px; }
  .shift-comparison .connected-node { width: 132px; min-height: 94px; padding: 12px; border-radius: 16px; }
  .shift-comparison .connected-node strong { font-size: 11px; }
  .shift-comparison .connected-node small, .shift-comparison .connected-node p { font-size: 8.5px; }
  .shift-comparison .connected-node svg { width: 17px; height: 17px; }
  .shift-comparison .project-record-core { transform: scale(.74); }
  .shift-comparison .record-event { display: none; }
  .shift-comparison .comparison-label { font-size: 8px; padding: 9px 11px; }

  .project-record-section { padding-top: 94px; padding-bottom: 96px; }
  .record-heading-new { margin-bottom: 60px; }
  .record-heading-copy h2 { font-size: clamp(46px, 13.8vw, 66px); }
  .record-heading-copy p { font-size: 15px; }

  .product-chapter-bridge { min-height: 70vh; }
  .product-chapter-bridge h2 { font-size: clamp(52px, 16vw, 78px); }
  .product-chapter-sticky { padding: 68px 0 84px; }
  .product-chapter-tabs { grid-template-columns: 1fr 1fr; gap: 7px; }
  .product-chapter-tabs button { min-height: 54px; padding: 10px 11px; font-size: 10px; }
  .product-gallery-stage { min-height: 430px; }
  .gallery-window { min-height: 390px; overflow: hidden; }
  .gallery-window .product-app-shell { transform: scale(.72); transform-origin: top left; width: 138.9%; }

  .workflow-reel-section { padding-bottom: 86px; }
  .workflow-reel-panel { border-radius: 24px; padding: 26px 18px; }
  .workflow-panel-visual { min-height: 330px; overflow: hidden; }
  .workflow-panel-copy h3 { font-size: clamp(34px, 10vw, 48px); }

  .pricing-v34 { padding-top: 80px; }
  .pricing-story-v34 h2 { font-size: clamp(48px, 14vw, 68px); }
  .pricing-principle-stack { padding-left: 30px; }
  .pricing-principle { grid-template-columns: 28px 1fr; }
  .pricing-purchase-panel { width: 100%; }

  .roadmap-route-section { padding-block: 76px; }
  .roadmap-route-head h2 { font-size: clamp(50px, 14vw, 70px); }
  .roadmap-route-stage { margin-top: 32px; padding: 18px 0 0; background: transparent; box-shadow: none; border-radius: 0; }
  .roadmap-stations { gap: 12px; }
  .roadmap-station, .roadmap-station.shipped, .roadmap-station.now, .roadmap-station.explore { min-height: 210px; border-radius: 22px; }
  .roadmap-route-footer { padding-top: 24px; }

  .landing-page .faq-section { padding-block: 76px 92px; gap: 42px; }
  .landing-page .faq-intro h2 { margin-top: 22px; font-size: clamp(48px, 14vw, 68px); }
  .landing-page .faq-item { padding-block: 24px; }
  .landing-page .faq-item > div strong { font-size: 17px; }
  .landing-page .faq-item > div span { font-size: 9px; }

  .final-cta { min-height: 470px; margin: 0 12px 18px; padding: 60px 18px; border-radius: 24px; }
  .final-cta-minimal h2 { font-size: clamp(48px, 14vw, 68px); }
  .final-cta-action .button { min-height: 54px; width: 100%; max-width: 290px; }
  .support-launcher { right: 10px; bottom: 10px; }
}

/* Extra-small phones */
@media (max-width: 390px) {
  .site-shell, .section-shell { width: calc(100% - 28px); }
  .hero h1 { font-size: clamp(48px, 14.8vw, 62px); }
  .shift-comparison { min-height: 510px; }
  .shift-comparison .connected-node { width: 116px; padding: 10px; }
  .shift-comparison .connected-node strong { font-size: 10px; }
  .product-chapter-tabs { grid-template-columns: 1fr; }
  .product-gallery-stage { min-height: 400px; }
  .workflow-panel-visual { min-height: 300px; }
}

/* =========================================================
   v20.45 — Mobile composition system
   Same story, touch-native choreography for portrait screens.
   ========================================================= */
.mobile-shift-sequence,
.mobile-product-surfaces,
.mobile-journey-sequence{display:none}

@media (max-width: 900px) and (orientation: portrait), (max-width: 700px){
  /* 01 / THE SHIFT — replace the desktop compare canvas entirely. */
  .shift-story{padding-bottom:0}
  .shift-story-copy{padding-bottom:38px}
  .shift-story-copy .positioning-lines h2{font-size:clamp(48px,12vw,78px);line-height:.94;letter-spacing:-.06em}
  .shift-intro-grid{margin-top:26px}
  .shift-lede{max-width:31ch;font-size:18px!important;line-height:1.42!important}
  .shift-sticky-wrap{display:none!important}
  .mobile-shift-sequence{display:grid;gap:0;width:min(calc(100% - 32px),720px);margin:0 auto;padding:10px 0 98px}
  .mobile-shift-card{position:relative;border-radius:28px;overflow:hidden}
  .mobile-shift-card-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:26px}
  .mobile-shift-card-head>span{font-size:10px;font-weight:850;letter-spacing:.13em}
  .mobile-shift-card-head>small{font-size:11px;color:var(--ink-soft)}
  .mobile-shift-before{padding:24px;background:#eeebe6;border:1px solid rgba(24,22,31,.1);box-shadow:0 20px 55px rgba(42,34,51,.06)}
  .mobile-fragment-stack{display:grid;gap:10px}
  .mobile-fragment-stack>div{display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:center;padding:15px;border-radius:17px;background:rgba(255,255,255,.72);border:1px solid rgba(24,22,31,.08);transform:rotate(var(--fragment-tilt,0deg))}
  .mobile-fragment-stack>div:nth-child(1){--fragment-tilt:-1.2deg;translate:-3px 0}
  .mobile-fragment-stack>div:nth-child(2){--fragment-tilt:.9deg;translate:5px 0}
  .mobile-fragment-stack>div:nth-child(3){--fragment-tilt:-.5deg;translate:0 0}
  .mobile-fragment-stack>div:nth-child(4){--fragment-tilt:.8deg;translate:-2px 0}
  .mobile-fragment-stack i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#e5e0da;color:#756d79}
  .mobile-fragment-stack svg{width:19px;height:19px}
  .mobile-fragment-stack span{display:grid;gap:3px}
  .mobile-fragment-stack strong{font-size:15px;letter-spacing:-.025em}
  .mobile-fragment-stack small{font-size:12px;line-height:1.4;color:var(--ink-soft)}
  .mobile-shift-thread{position:relative;height:106px;display:grid;place-items:center}
  .mobile-shift-thread:before{content:'';position:absolute;top:12px;bottom:12px;width:1px;background:linear-gradient(180deg,rgba(124,92,255,.06),rgba(124,92,255,.7),rgba(124,92,255,.08))}
  .mobile-shift-thread span{width:11px;height:11px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 8px rgba(255,104,70,.1);animation:mobile-thread-pulse 2.2s ease-in-out infinite}
  .mobile-shift-thread i{position:absolute;bottom:10px;width:8px;height:8px;border-right:1.5px solid var(--violet);border-bottom:1.5px solid var(--violet);transform:rotate(45deg)}
  @keyframes mobile-thread-pulse{50%{transform:scale(1.13);box-shadow:0 0 0 13px rgba(255,104,70,0)}}
  .mobile-shift-after{padding:24px;background:#1b1822;color:#fff;border:1px solid rgba(255,255,255,.08);box-shadow:0 32px 80px rgba(30,22,46,.25)}
  .mobile-shift-after:before{content:'';position:absolute;left:28%;top:22%;width:68%;height:72%;background:radial-gradient(circle,rgba(124,92,255,.2),transparent 68%);pointer-events:none}
  .mobile-shift-after .mobile-shift-card-head>small{color:rgba(255,255,255,.45)}
  .mobile-record-core{position:relative;z-index:2;display:flex;align-items:center;gap:13px;padding:17px;border:1px solid rgba(171,151,255,.36);border-radius:20px;background:linear-gradient(145deg,rgba(124,92,255,.3),rgba(124,92,255,.1));box-shadow:0 18px 45px rgba(0,0,0,.2)}
  .mobile-record-core img{width:52px;height:52px;border-radius:15px}
  .mobile-record-core>span{display:grid;gap:2px;min-width:0}
  .mobile-record-core small{font-size:8px;letter-spacing:.13em;color:#bcaeff}
  .mobile-record-core strong{font-size:20px;letter-spacing:-.035em}
  .mobile-record-core em{font-style:normal;font-size:10px;color:rgba(255,255,255,.5);white-space:normal}
  .mobile-record-nodes{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  .mobile-record-nodes>div{min-height:104px;padding:14px;border-radius:17px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.055);display:grid;grid-template-columns:30px 1fr;gap:9px;align-content:center;align-items:start}
  .mobile-record-nodes i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(124,92,255,.18);color:#c1b2ff}
  .mobile-record-nodes svg{width:15px;height:15px}
  .mobile-record-nodes span{display:grid;gap:3px}
  .mobile-record-nodes strong{font-size:13px}
  .mobile-record-nodes small{font-size:10px;line-height:1.35;color:rgba(255,255,255,.48)}
  .mobile-shift-close{display:grid;gap:3px;padding:42px 4px 0;text-align:center;font-family:'Space Grotesk Variable';font-size:clamp(31px,8.8vw,46px);line-height:.98;letter-spacing:-.055em}
  .mobile-shift-close span{color:#a49da8}
  .mobile-shift-close strong{color:var(--ink)}

  /* 03 / THE WORKSPACE — replace scaled desktop app with a horizontal, thumb-friendly product deck. */
  .product-chapter-bridge{min-height:0;padding:105px 0 80px}
  .product-chapter-bridge-inner p{max-width:34ch;font-size:16px!important}
  .product-chapter-track{height:auto!important}
  .product-chapter-sticky{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;padding:74px 0 92px}
  .product-chapter-atmosphere,.product-chapter-stage,.product-chapter-proofline{display:none!important}
  .product-chapter-head{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:28px}
  .product-chapter-head>p{display:none}
  .product-chapter-head h3{font-size:clamp(42px,10.5vw,60px);line-height:.96;letter-spacing:-.055em}
  .mobile-product-surfaces{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;margin-inline:calc(var(--mobile-gutter,16px) * -1);padding:6px var(--mobile-gutter,16px) 22px;scrollbar-width:none}
  .mobile-product-surfaces::-webkit-scrollbar{display:none}
  .mobile-surface-card{position:relative;flex:0 0:min(82vw,360px);min-height:390px;scroll-snap-align:center;padding:24px;border-radius:26px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(155deg,#272330,#1a1720);color:#fff;box-shadow:0 22px 60px rgba(0,0,0,.18);overflow:hidden}
  .mobile-surface-card:after{content:'';position:absolute;right:-55px;bottom:-65px;width:180px;height:180px;border-radius:50%;border:34px solid rgba(124,92,255,.1)}
  .mobile-surface-card>span{position:absolute;right:20px;top:18px;color:rgba(255,255,255,.2);font-size:12px;font-weight:800}
  .mobile-surface-card>i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(124,92,255,.18);color:#c1b2ff;margin-bottom:72px}
  .mobile-surface-card svg{width:21px;height:21px}
  .mobile-surface-card small{display:block;color:#9e88ff;font-size:9px;font-weight:850;letter-spacing:.13em}
  .mobile-surface-card h4{position:relative;z-index:2;margin:10px 0 12px;font-family:'Space Grotesk Variable';font-size:31px;line-height:1;letter-spacing:-.05em}
  .mobile-surface-card p{position:relative;z-index:2;margin:0;max-width:29ch;color:rgba(255,255,255,.56);font-size:14px!important;line-height:1.55!important}
  .mobile-product-surfaces:after{content:'';flex:0 0 1px}

  /* 04 / FOLLOW ONE PROJECT — vertical authored journey rather than a wide cinematic canvas. */
  .journey-bridge{min-height:0;padding:100px 0 64px}
  .journey-bridge-inner{width:min(calc(100% - 32px),720px)}
  .journey-bridge-start .journey-context-fragments{display:none}
  .journey-bridge h2{font-size:clamp(56px,14vw,82px);line-height:.91}
  .journey-bridge-copy{max-width:30ch;font-size:16px!important;line-height:1.55!important}
  .journey-film{display:none!important}
  .mobile-journey-sequence{position:relative;display:grid;gap:18px;width:min(calc(100% - 32px),720px);margin:0 auto;padding:10px 0 44px}
  .mobile-journey-thread{position:absolute;left:28px;top:36px;bottom:64px;width:2px;background:linear-gradient(180deg,rgba(124,92,255,.15),rgba(124,92,255,.75),rgba(124,92,255,.15))}
  .mobile-journey-thread span{position:sticky;top:46vh;display:block;width:10px;height:10px;margin-left:-4px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 7px rgba(255,104,70,.1)}
  .mobile-journey-step{position:relative;margin-left:50px;padding:22px 20px 24px;border-radius:22px;border:1px solid rgba(24,22,31,.1);background:rgba(255,255,255,.72);box-shadow:0 16px 42px rgba(45,35,58,.06)}
  .mobile-journey-step>b{position:absolute;left:-48px;top:22px;width:34px;height:34px;border-radius:11px;background:#1b1822;color:#fff;display:grid;place-items:center;font-size:9px;box-shadow:0 8px 24px rgba(30,22,46,.18)}
  .mobile-journey-step>i{width:38px;height:38px;border-radius:12px;background:#eee9ff;color:var(--violet);display:grid;place-items:center;margin-bottom:22px}
  .mobile-journey-step svg{width:18px;height:18px}
  .mobile-journey-step small{color:var(--violet);font-size:9px;font-weight:850;letter-spacing:.13em}
  .mobile-journey-step h3{margin:9px 0 10px;font-family:'Space Grotesk Variable';font-size:27px;line-height:1.02;letter-spacing:-.045em}
  .mobile-journey-step p{margin:0;color:var(--ink-soft);font-size:14px!important;line-height:1.55!important}
  .journey-bridge-end{padding-top:68px;padding-bottom:104px}
  .journey-bridge-end .momentum-underline{height:56px}

  /* 05 / workflow reel — keep the content but drop the miniature desktop diagrams. */
  .workflow-reel-intro{padding-top:90px}
  .workflow-reel-heading h2{font-size:clamp(52px,13vw,76px);line-height:.9}
  .workflow-reel-meta{display:none!important}
  .workflow-reel-rail{gap:12px!important}
  .workflow-reel-panel{position:relative;min-height:0!important;padding:24px 20px 28px!important;border-radius:24px!important;overflow:hidden}
  .workflow-reel-panel:after{content:'';position:absolute;left:20px;right:20px;bottom:15px;height:1px;background:linear-gradient(90deg,var(--violet),rgba(124,92,255,.08))}
  .workflow-panel-copy{max-width:none!important;padding-bottom:16px}
  .workflow-panel-copy small{font-size:9px!important}
  .workflow-panel-copy h3{font-size:clamp(31px,8.5vw,44px)!important;line-height:1!important;margin:12px 0 12px!important}
  .workflow-panel-copy p{font-size:14px!important;line-height:1.55!important;max-width:34ch}
  .workflow-panel-visual{display:none!important}
  .workflow-thesis-wrap{padding-top:34px}

  /* Pricing/control/roadmap: preserve normal vertical flow and larger tap targets. */
  .posture-selector button{min-height:64px}
  .pricing-purchase-panel button,.pricing-purchase-panel a{min-height:48px}
  .roadmap-route-stage{padding-inline:0!important}
}

@media (max-width: 390px){
  .mobile-shift-sequence,.mobile-journey-sequence{width:calc(100% - 28px)}
  .mobile-shift-card{border-radius:23px}
  .mobile-shift-before,.mobile-shift-after{padding:19px}
  .mobile-record-nodes{grid-template-columns:1fr}
  .mobile-record-nodes>div{min-height:82px}
  .mobile-surface-card{flex-basis:86vw;min-height:370px}
  .mobile-journey-step{margin-left:44px;padding-inline:17px}
  .mobile-journey-thread{left:24px}
  .mobile-journey-step>b{left:-42px}
}


/* v20.46 — portrait/mobile composition refinement
   On narrow screens, the desktop spatial interactions become authored vertical stories. */
@media (max-width: 900px) and (orientation: portrait), (max-width: 700px) {
  /* 03 / INSIDE THE PRODUCT — all six surfaces become a legible vertical chapter. */
  .mobile-product-surfaces{
    position:relative;
    display:grid!important;
    grid-template-columns:1fr;
    gap:16px;
    overflow:visible!important;
    scroll-snap-type:none!important;
    margin:0!important;
    padding:8px 0 30px!important;
  }
  .mobile-product-surfaces:before{
    content:'';
    position:absolute;
    left:24px;
    top:32px;
    bottom:54px;
    width:1px;
    background:linear-gradient(180deg,rgba(124,92,255,.08),rgba(124,92,255,.54) 34%,rgba(255,104,70,.34) 72%,rgba(124,92,255,.08));
    pointer-events:none;
  }
  .mobile-surface-card{
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    flex:none!important;
    scroll-snap-align:none!important;
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    grid-template-areas:'icon meta' 'icon title' 'icon copy';
    column-gap:17px;
    row-gap:5px;
    align-items:start;
    padding:22px 20px 23px!important;
    border-radius:23px!important;
    background:linear-gradient(145deg,rgba(39,35,48,.98),rgba(24,21,30,.98));
    box-shadow:0 20px 52px rgba(28,21,39,.12);
    transform-origin:center top;
  }
  .mobile-surface-card:nth-child(even){margin-left:12px;width:calc(100% - 12px)!important}
  .mobile-surface-card:nth-child(odd){margin-right:12px;width:calc(100% - 12px)!important}
  .mobile-surface-card:before{
    content:'';
    position:absolute;
    left:19px;
    top:27px;
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--coral);
    box-shadow:0 0 0 7px rgba(255,104,70,.08),0 0 30px rgba(255,104,70,.18);
    z-index:3;
  }
  .mobile-surface-card:after{
    right:-76px!important;
    bottom:-100px!important;
    width:205px!important;
    height:205px!important;
    border-width:40px!important;
    opacity:.72;
  }
  .mobile-surface-card>span{
    position:absolute!important;
    right:17px!important;
    top:15px!important;
    font-size:11px!important;
    color:rgba(255,255,255,.2)!important;
  }
  .mobile-surface-card>i{
    grid-area:icon;
    width:46px!important;
    height:46px!important;
    margin:0!important;
    border-radius:14px!important;
    position:relative;
    z-index:2;
  }
  .mobile-surface-card small{grid-area:meta;font-size:9px!important;margin-top:2px}
  .mobile-surface-card h4{
    grid-area:title;
    margin:2px 0 4px!important;
    font-size:clamp(25px,7.3vw,34px)!important;
    line-height:1.02!important;
  }
  .mobile-surface-card p{
    grid-area:copy;
    max-width:none!important;
    font-size:13.5px!important;
    line-height:1.52!important;
    padding-right:7px;
  }

  /* 05 / BUILT FOR AI-NATIVE WORK — replace the desktop reel with a vertical continuity path. */
  .workflow-reel-section{overflow:visible!important;padding-top:0!important}
  .workflow-reel-intro{padding-top:88px!important;padding-bottom:28px!important}
  .workflow-reel-heading h2{font-size:clamp(48px,13vw,72px)!important;line-height:.9!important}
  .workflow-reel-scroll{height:auto!important;margin-top:0!important;overflow:visible!important}
  .workflow-reel-sticky{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;padding:0 14px 58px!important}
  .workflow-reel-rail{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    display:grid!important;
    gap:22px!important;
    height:auto!important;
    padding-left:20px;
  }
  .workflow-reel-rail:before{
    content:'';
    position:absolute;
    left:5px;
    top:18px;
    bottom:24px;
    width:1px;
    background:linear-gradient(180deg,rgba(124,92,255,.12),rgba(124,92,255,.72) 42%,rgba(255,104,70,.44) 78%,rgba(124,92,255,.1));
  }
  .workflow-reel-panel{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    padding:24px 18px 20px!important;
    border-radius:25px!important;
    opacity:1!important;
    transform:none!important;
    box-shadow:0 22px 60px rgba(34,27,48,.08)!important;
  }
  .workflow-reel-panel:before{
    content:'';
    position:absolute;
    left:-21px;
    top:38px;
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--coral);
    box-shadow:0 0 0 7px rgba(255,104,70,.08);
    z-index:6;
  }
  .workflow-reel-panel:nth-child(even){transform:translateX(6px)!important}
  .workflow-panel-copy{padding-bottom:0!important}
  .workflow-panel-copy small{font-size:9px!important}
  .workflow-panel-copy h3{font-size:clamp(29px,8vw,41px)!important;line-height:1!important;margin:10px 0 11px!important}
  .workflow-panel-copy p{font-size:13.5px!important;line-height:1.52!important;max-width:none!important}
  .workflow-panel-visual{
    display:grid!important;
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:14px!important;
    border-radius:20px!important;
    overflow:hidden!important;
    background:linear-gradient(155deg,#272230,#17141d)!important;
  }
  .workflow-panel-visual:before{
    background:radial-gradient(circle at 82% 20%,rgba(124,92,255,.18),transparent 34%),linear-gradient(115deg,transparent,rgba(255,255,255,.018))!important;
  }
  .workflow-thread{
    display:block!important;
    position:absolute!important;
    left:30px!important;
    top:78px!important;
    bottom:18px!important;
    width:1px!important;
    height:auto!important;
    background:linear-gradient(180deg,rgba(124,92,255,.16),rgba(124,92,255,.75),rgba(255,104,70,.34))!important;
    transform:none!important;
  }
  .workflow-thread i{display:none!important}
  .workflow-project-core{
    order:-1;
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    min-height:78px!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:42px 1fr!important;
    grid-template-areas:'logo label' 'logo name' 'logo state';
    justify-items:start!important;
    text-align:left!important;
    column-gap:11px!important;
    padding:13px 14px!important;
    border-radius:17px!important;
  }
  .workflow-project-core img{grid-area:logo;width:40px!important;height:40px!important;margin:0!important;align-self:center}
  .workflow-project-core small{grid-area:label;font-size:6.5px!important;align-self:end}
  .workflow-project-core strong{grid-area:name;font-size:13px!important;margin:1px 0 0!important}
  .workflow-project-core span{grid-area:state;font-size:7.5px!important;margin:1px 0 0!important}
  .flow-object{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:calc(100% - 20px)!important;
    min-height:52px!important;
    margin-left:20px!important;
    padding:9px 11px!important;
    border-radius:14px!important;
    display:grid!important;
    grid-template-columns:30px 1fr!important;
    gap:9px!important;
    align-items:center!important;
    opacity:1!important;
    transform:none!important;
    background:rgba(255,255,255,.065)!important;
    border:1px solid rgba(255,255,255,.075)!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  .flow-object:nth-of-type(even){margin-left:28px!important;width:calc(100% - 28px)!important}
  .flow-object>i{width:29px!important;height:29px!important;border-radius:9px!important;background:rgba(124,92,255,.18)!important;color:#c2b5ff!important}
  .flow-object b{font-size:11px!important;color:#fff!important}
  .flow-object em{font-size:8px!important;color:rgba(255,255,255,.46)!important}
  .workflow-thesis-wrap{padding-top:24px!important}
}


/* =========================================================
   v20.51 — Desktop cinematic pin stabilization
   CSS sticky is no longer the critical hold mechanism on wide screens.
   ScrollTrigger owns the hold; these elements become normal 100vh pin targets.
   ========================================================= */
@media (min-width:1101px) and (prefers-reduced-motion:no-preference){
  .product-chapter-sticky,
  .journey-film-sticky,
  .workflow-reel-sticky{
    position:relative;
    top:auto;
    height:100vh;
  }
  .product-chapter-track{min-height:410vh}
  .journey-film{min-height:620vh}
  .workflow-reel-scroll{min-height:640vh}
}

/* =========================================================
   V20.52 — Pricing hold + Ask LobeWork legibility
   ========================================================= */
@media (min-width:1101px){
  .pricing-story-v34{min-height:135vh}
  .pricing-purchase-panel{position:relative;top:auto;will-change:transform}
}

/* Ask LobeWork — stronger readable hierarchy */
.support-panel{width:min(440px,calc(100vw - 28px));max-height:min(700px,calc(100vh - 112px));grid-template-rows:auto minmax(210px,1fr) auto auto auto}
.support-panel-head{padding:18px 18px 17px}
.support-mark{width:42px;height:42px;border-radius:13px}
.support-mark img{width:28px}
.support-panel-head>div{gap:12px}
.support-panel-head strong{font-size:15px;line-height:1.15}
.support-panel-head small{font-size:10.5px;line-height:1.35;margin-top:2px}
.support-panel-head button{width:42px;height:42px;border-radius:13px}
.support-panel-head button svg{width:19px;height:19px}
.support-messages{padding:18px;gap:11px}
.support-message{max-width:92%;padding:14px 15px;border-radius:17px;font-size:14px;line-height:1.52}
.support-prompts{padding:0 18px 15px;gap:8px}
.support-prompts button{min-height:40px;padding:9px 13px;border-radius:999px;font-size:12px;line-height:1.25;font-weight:650;color:#4d4854;text-align:left}
.support-form{margin:0 16px 13px;padding:6px 6px 6px 14px;border-radius:17px;grid-template-columns:1fr 44px;gap:8px}
.support-form input{font-size:14px;line-height:1.3}
.support-form button{width:44px;height:44px;border-radius:13px}
.support-form button svg{width:20px;height:20px}
.support-escalation{padding:13px 16px 15px;font-size:11.5px;gap:12px}
.support-escalation span{font-size:11.5px}
.support-escalation a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 12px;border-radius:11px;background:#1c1923;color:#fff;font-size:11.5px;font-weight:800;text-decoration:none;white-space:nowrap}
.support-escalation a:hover{background:#2a2632}

@media (max-width:760px){
  .support-panel{right:8px;bottom:72px;width:calc(100vw - 16px);max-height:calc(100dvh - 88px);border-radius:24px}
  .support-panel-head{padding:16px}
  .support-panel-head strong{font-size:16px}
  .support-panel-head small{font-size:11px}
  .support-messages{padding:16px}
  .support-message{max-width:94%;font-size:14.5px;padding:14px 15px}
  .support-prompts{padding:0 16px 14px;gap:8px}
  .support-prompts button{min-height:42px;padding:10px 13px;font-size:12.5px}
  .support-form{margin:0 14px 12px;padding-left:14px}
  .support-form input{font-size:15px}
  .support-escalation{padding:12px 14px 14px;font-size:12px}
  .support-escalation span{font-size:12px}
  .support-escalation a{min-height:38px;font-size:12px;padding:9px 12px}
}

@media (max-width:420px){
  .support-panel{right:6px;width:calc(100vw - 12px)}
  .support-prompts{display:grid;grid-template-columns:1fr;gap:7px}
  .support-prompts button{width:100%;border-radius:13px;text-align:left}
  .support-escalation{align-items:flex-start;flex-direction:column;gap:8px}
  .support-escalation a{width:100%}
}


/* =========================================================
   V20.55 — Section 04 simple transition reset
   Rebased on v20.52. No masks, takeover layers, or bridge duplication.
   ========================================================= */
@media (min-width: 1101px){
  .journey-bridge-start{
    min-height:100vh;
    padding:12vh 5vw 10vh;
    background:#ece7e0;
  }
  .journey-bridge-start .journey-bridge-inner{
    width:min(1460px,100%);
    min-height:68vh;
    text-align:center;
    justify-items:center;
    align-content:center;
  }
  .journey-bridge-start .section-index{
    left:0;
    top:0;
    text-align:left;
  }
  .journey-bridge-start .journey-bridge-eyebrow{
    margin:0 0 20px;
  }
  .journey-bridge-start h2{
    max-width:1100px;
    font-size:clamp(88px,10.4vw,166px);
    line-height:.84;
    letter-spacing:-.078em;
    text-align:center;
    transform-origin:center center;
  }
  .journey-bridge-start .journey-bridge-copy{
    max-width:34ch;
    margin:32px auto 0;
    font-size:18px;
    line-height:1.55;
    text-align:center;
  }
  .journey-bridge-start .journey-context-fragments{
    inset:-2% -1%;
  }
  .journey-bridge-start .journey-context-fragments span{
    background:rgba(255,255,255,.66);
    box-shadow:0 16px 48px rgba(43,34,58,.085);
  }
  .journey-bridge-start::after{
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;
    left:0;right:0;bottom:0;
    height:15vh;
    background:linear-gradient(to bottom,rgba(236,231,224,0),rgba(24,21,31,.055));
  }
}

@media (max-width: 1100px){
  .journey-bridge-start .journey-bridge-inner{
    text-align:center;
    justify-items:center;
  }
  .journey-bridge-start .journey-bridge-copy{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
}
.support-prompts[hidden]{display:none!important}