@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bo-black); }
body { margin: 0; background: var(--bo-black); color: var(--bo-ink); font-family: var(--bo-font-body); -webkit-font-smoothing: antialiased; }
button, a { color: inherit; }
button { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--bo-pink); outline-offset: 4px; }
.site-nav { position: relative; z-index: 10; min-height: 74px; padding: 0 4vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--bo-border-dark); background: #050607e8; backdrop-filter: blur(18px); }
.brand-lockup { display: inline-flex; align-items: center; gap: .75rem; width: max-content; font-size: .76rem; font-weight: 700; letter-spacing: .17em; text-decoration: none; }
.brand-b { width: 25px; height: 30px; overflow: visible; fill: #050607; stroke: var(--bo-gold); stroke-width: 1.7; filter: drop-shadow(5px 6px 0 #000) drop-shadow(0 0 7px #aaaaaa55); }
.site-nav nav { display: flex; gap: 2rem; }
.site-nav nav a, .nav-cta { color: #9b988f; font-size: .73rem; text-decoration: none; }
.site-nav nav a:hover, .nav-cta:hover { color: #d4d7da; }
.nav-cta { justify-self: end; padding-bottom: .35rem; border-bottom: 1px solid #616161; }
.hero { min-height: calc(100svh - 74px); padding: 7rem 4vw 5rem; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr); gap: 3vw; align-items: center; overflow: hidden; background: radial-gradient(circle at 76% 40%, #2b2114 0, #0a0b0d 36%, #030405 74%); }
.hero-copy { position: relative; z-index: 2; max-width: 850px; }
.eyebrow { margin: 0; color: var(--bo-gold); font-family: var(--bo-font-data); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow.dark { color: var(--bo-gold-dark); }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 1.4rem 0 1.6rem; max-width: 850px; font: 400 clamp(3.2rem, 6.3vw, 7rem)/.94 var(--bo-font-display); letter-spacing: -.056em; text-wrap: balance; }
.hero-dek { max-width: 700px; color: var(--bo-ink-muted); font-size: 1.08rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.1rem; }
.button { min-height: 48px; padding: .92rem 1.15rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bo-gold); border-radius: 0; cursor: pointer; text-decoration: none; font-family: var(--bo-font-data); font-size: .72rem; letter-spacing: .06em; transition: transform var(--bo-motion-base) var(--bo-ease), background var(--bo-motion-fast) ease, color var(--bo-motion-fast) ease; }
.button:hover { transform: translateY(-3px); }
.button-gold { background: var(--bo-gold); color: #070809; }
.button-gold:hover { background: var(--bo-gold-bright); }
.button-quiet { background: transparent; color: #d9d9d9; }
.button-quiet:hover { background: var(--bo-gold-bright); color: #070809; }
.button:disabled { cursor: wait; opacity: .65; transform: none; }
.run-note { margin: .75rem 0 0; color: #706e68; font-size: .7rem; }
.proof-line { display: flex; flex-wrap: wrap; gap: 1.35rem; margin: 2.2rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--bo-border-dark); list-style: none; color: #827f78; font-family: var(--bo-font-data); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.proof-line li::before { content: "◆"; margin-right: .5rem; color: var(--bo-gold); font-size: .5rem; }
.fleet-stage { position: relative; min-height: 610px; display: grid; place-items: center; isolation: isolate; }
.fleet-image { position: relative; z-index: 3; width: min(850px, 137%); max-width: none; filter: drop-shadow(var(--bo-shadow-float)); transform-origin: 64% 70%; animation: fleet-float var(--bo-motion-float) ease-in-out infinite; transition: filter .4s ease; }
.orbit { position: absolute; z-index: 0; border: 1px solid #aaaaaa22; border-radius: 50%; transform: rotate(-17deg); }
.orbit-one { width: 91%; aspect-ratio: 1; box-shadow: 0 0 80px #aaaaaa0d; }
.orbit-two { width: 64%; aspect-ratio: 1; border-color: #568ec522; transform: rotate(22deg); }
.mark-console { position: absolute; z-index: 4; top: 1rem; left: 0; width: 118px; padding: .85rem; border: 1px solid #4f4f4f; background: #050607d9; box-shadow: 10px 12px 0 #000; }
.phase-mark { width: 72px; display: block; overflow: visible; filter: drop-shadow(3px 4px 0 #000) drop-shadow(0 0 10px #aaaaaa44); }
.mark-shape { transform-origin: 50px 50px; transition: opacity .55s ease, transform .7s var(--bo-ease); }
.mark-v-shape, .mark-o-shape { opacity: 0; }
.phase-label { display: block; margin-top: .5rem; color: var(--bo-gold); font-family: var(--bo-font-data); font-size: .58rem; letter-spacing: .12em; }
.fleet-status { position: absolute; z-index: 5; right: 0; bottom: 1.3rem; display: flex; align-items: center; gap: .55rem; padding: .65rem .78rem; border: 1px solid #4f4f4f; background: #050607e8; color: #bababa; font-family: var(--bo-font-data); font-size: .58rem; letter-spacing: .11em; }
.fleet-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--bo-success); box-shadow: 0 0 9px var(--bo-success); }
.value-particles { position: absolute; z-index: 2; inset: 17% 10% 10% 18%; pointer-events: none; }
.brick, .coin { position: absolute; display: block; opacity: 0; }
.brick { width: 28px; height: 13px; border: 1px solid #d8d8d8; background: linear-gradient(145deg, #cecece, #6f6f6f); box-shadow: 5px 6px 12px #000; }
.brick::after { content: ""; position: absolute; inset: 3px 7px; border: 1px solid #6e6e6e; }
.brick-one { left: 58%; top: 42%; }.brick-two { left: 44%; top: 50%; }.brick-three { left: 72%; top: 49%; }
.coin { width: 15px; height: 15px; border: 2px solid #d6d6d6; border-radius: 50%; background: #787878; box-shadow: 0 0 9px #adadad; }
.coin-one { left: 8%; bottom: 12%; }.coin-two { left: 30%; bottom: 4%; }.coin-three { right: 2%; bottom: 15%; }
.fleet-stage[data-phase="running"] .mark-b-shape { opacity: 0; transform: scale(.55) rotate(-34deg); }
.fleet-stage[data-phase="running"] .mark-v-shape { opacity: 1; transform: scale(1.02); animation: mark-work .9s ease-in-out infinite alternate; }
.fleet-stage[data-phase="running"] .fleet-image { animation-duration: 1.05s; filter: drop-shadow(0 32px 38px #000) drop-shadow(0 0 18px #aaaaaa33); }
.fleet-stage[data-phase="running"] .fleet-status i { background: var(--bo-pink); box-shadow: 0 0 5px var(--bo-pink), 0 0 16px var(--bo-pink); }
.fleet-stage[data-phase="running"] .brick { animation: brick-drop 1.15s var(--bo-ease) infinite; }
.fleet-stage[data-phase="running"] .brick-two { animation-delay: .28s; }.fleet-stage[data-phase="running"] .brick-three { animation-delay: .56s; }
.fleet-stage[data-phase="running"] .coin { animation: coin-recover 1.25s var(--bo-ease) infinite; }
.fleet-stage[data-phase="running"] .coin-two { animation-delay: .35s; }.fleet-stage[data-phase="running"] .coin-three { animation-delay: .7s; }
.fleet-stage[data-phase="complete"] .mark-b-shape, .fleet-stage[data-phase="complete"] .mark-v-shape { opacity: 0; transform: scale(.55); }
.fleet-stage[data-phase="complete"] .mark-o-shape { opacity: 1; transform: scale(.92); }
.fleet-stage[data-phase="complete"] .fleet-image { animation: settle .8s var(--bo-ease) both; }
@keyframes fleet-float { 0%,100% { transform: translateY(0) rotate(-.2deg); } 50% { transform: translateY(-15px) rotate(.3deg); } }
@keyframes mark-work { from { transform: scale(.9) rotate(-5deg); } to { transform: scale(1.04) rotate(5deg); } }
@keyframes brick-drop { 0% { opacity: 0; transform: translate3d(0,-34px,0) rotate(-10deg); } 35%,72% { opacity: 1; } 100% { opacity: 0; transform: translate3d(8px,92px,0) rotate(10deg); } }
@keyframes coin-recover { 0% { opacity: 0; transform: translate3d(-10px,14px,0) scale(.8); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate3d(140px,-116px,0) scale(.45); } }
@keyframes settle { 0% { transform: translateY(-10px) scale(1.015); } 60% { transform: translateY(3px) scale(.995); } 100% { transform: translateY(0) scale(1); } }
.section-light { padding: 7rem 4vw; background: var(--bo-white); color: #111214; }
.section-light h2, .section-heading h2, .receipt-copy h2, .final-cta h2 { margin: 1rem 0 3rem; max-width: 840px; font: 400 clamp(2.7rem, 5vw, 5.2rem)/1 var(--bo-font-display); letter-spacing: -.04em; }
.method-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #aaa79f; border-left: 1px solid #aaa79f; }
.method-grid-3 { grid-template-columns: repeat(3, 1fr); }
.method-grid article { min-height: 235px; padding: 1.5rem; border-right: 1px solid #aaa79f; border-bottom: 1px solid #aaa79f; }
.method-grid b { color: var(--bo-gold-dark); font: 400 2.4rem/1 var(--bo-font-display); }
.method-grid h3 { margin: 4rem 0 .8rem; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; }
.method-grid p { margin: 0; color: #686761; font-size: .86rem; line-height: 1.55; }
.field-guides { padding: 7rem 4vw 8rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; }
.section-heading h2 { margin-bottom: 2rem; }
.section-heading > p { max-width: 370px; margin-bottom: 2.5rem; color: #88857e; line-height: 1.65; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #33353a; border-left: 1px solid #33353a; }
.guide-grid > a { min-height: 380px; padding: 2rem; display: flex; flex-direction: column; border-right: 1px solid #33353a; border-bottom: 1px solid #33353a; text-decoration: none; transition: transform var(--bo-motion-base) var(--bo-ease), background var(--bo-motion-base) ease, box-shadow var(--bo-motion-base) ease; }
.guide-grid > a:hover { transform: translateY(-6px); background: #15171b; box-shadow: 0 16px 0 #020203; }
.guide-grid span { color: var(--bo-gold); font-family: var(--bo-font-data); font-size: .64rem; letter-spacing: .12em; }
.guide-grid h3 { margin: 4rem 0 1rem; font: 400 2.25rem/1.08 var(--bo-font-display); }
.guide-grid p { color: #928f87; line-height: 1.65; }
.guide-grid b { margin-top: auto; color: #c3c3c3; font-size: .74rem; }
.receipt-section { padding: 8rem 4vw; display: grid; grid-template-columns: 1fr minmax(330px, 470px); gap: 8vw; align-items: center; background: radial-gradient(circle at 84% 22%, #162239 0, transparent 33%), linear-gradient(145deg, #0c0e12, #050607); }
.receipt-copy > p:last-child { max-width: 650px; color: #9f9b92; font-size: 1.02rem; line-height: 1.8; }
.receipt-card { padding: 1.7rem; color: #151515; background: #e9e5da; box-shadow: 17px 19px 0 #17191c, 32px 35px 55px #000; transform: rotate(1deg); font-family: var(--bo-font-data); }
.receipt-card header, .receipt-card footer, .receipt-card p { display: flex; justify-content: space-between; gap: 1rem; }
.receipt-card header { padding-bottom: 1rem; border-bottom: 2px solid #151515; font-size: .77rem; letter-spacing: .09em; }
.receipt-card .tear { height: 13px; margin: 0 -1.7rem 1rem; background: linear-gradient(135deg, transparent 7px, #e9e5da 0) 0 0/14px 14px; }
.receipt-card p { margin: 1.1rem 0; font-size: .76rem; }.receipt-card p span { color: #67635c; }
.receipt-card footer { margin-top: 1.2rem; padding: 1rem 0; border-top: 2px solid #151515; border-bottom: 1px solid #151515; }
.receipt-card small { display: block; margin-top: 1rem; font-size: .58rem; letter-spacing: .08em; }
.final-cta { padding: 7rem 4vw; background: var(--bo-gold); color: #08090b; }
.final-cta h2 { margin-bottom: 2rem; max-width: 950px; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.button-dark { border-color: #08090b; background: #08090b; color: var(--bo-ink); }
.button-outline-dark { border-color: #08090b; background: transparent; color: #08090b; }
.button-outline-dark:hover { background: #08090b; color: var(--bo-ink); }
.site-footer { min-height: 170px; padding: 3rem 4vw; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 2rem; border-top: 1px solid #24262a; }
.site-footer a { color: #bebebe; text-decoration: none; font-size: .77rem; letter-spacing: .12em; }.site-footer p { color: #77746e; text-align: center; font-size: .75rem; }.site-footer div { display: flex; justify-content: end; gap: 1rem; }

/* Technical guide pages */
.guide-page { background: #08090b; }
.guide-hero { min-height: 620px; padding: 7rem 4vw 5rem; display: grid; grid-template-columns: 1fr 320px; gap: 5vw; align-items: end; background: radial-gradient(circle at 84% 22%, #162239 0, transparent 33%), linear-gradient(145deg, #0c0e12, #050607); }
.guide-hero h1 { max-width: 1050px; font-size: clamp(3.4rem, 7vw, 7.6rem); }.guide-hero > div > p { max-width: 760px; color: #aaa69d; font-size: 1.08rem; line-height: 1.75; }
.metric { padding: 2rem; border: 1px solid #3b3d42; box-shadow: var(--bo-shadow-depth); }.metric strong { display: block; color: #bebebe; font: 400 clamp(2.5rem, 5vw, 4.7rem)/1 var(--bo-font-display); letter-spacing: -.04em; }.metric p { color: #8f8c85; line-height: 1.6; font-size: .82rem; }
.guide-body { padding: 7rem 4vw; display: grid; grid-template-columns: 250px minmax(0, 900px); justify-content: center; gap: 7vw; background: #eceae4; color: #151617; }
.toc { position: sticky; top: 2rem; align-self: start; display: grid; gap: .85rem; }.toc span { margin-bottom: .7rem; color: var(--bo-gold-dark); font-size: .68rem; letter-spacing: .14em; }.toc a { color: #77746e; text-decoration: none; font-size: .76rem; line-height: 1.45; }
.guide-content section { padding-bottom: 4.5rem; margin-bottom: 4.5rem; border-bottom: 1px solid var(--bo-border-light); }.guide-content .section-no { color: #7b7b7b; font-size: .7rem; letter-spacing: .13em; }.guide-content h2 { margin: .8rem 0 2rem; font: 400 clamp(2rem, 4vw, 3.7rem)/1.02 var(--bo-font-display); letter-spacing: -.035em; }.guide-content p { color: #52524e; font-size: 1rem; line-height: 1.85; }.guide-content ul { padding: 0; list-style: none; }.guide-content li { padding: 1rem 0 1rem 1.7rem; border-top: 1px solid #cac7c0; color: #3f403e; line-height: 1.55; }.guide-content li::before { content: "◆"; float: left; margin-left: -1.7rem; color: #7b7b7b; font-size: .55rem; }
.table-wrap { overflow-x: auto; }.guide-content table { width: 100%; border-collapse: collapse; font-size: .83rem; }.guide-content th, .guide-content td { padding: 1rem; border: 1px solid var(--bo-border-light); text-align: left; vertical-align: top; line-height: 1.5; }.guide-content th { background: #17191c; color: #e6dfd1; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.faq { padding: 7rem max(4vw, calc((100vw - 1100px)/2)); }.faq h2 { margin: 1rem 0 3rem; font: 400 clamp(2.4rem, 4.5vw, 4.5rem)/1 var(--bo-font-display); }.faq details { padding: 1.3rem 0; border-top: 1px solid #303238; }.faq details:last-child { border-bottom: 1px solid #303238; }.faq summary { cursor: pointer; }.faq details p { max-width: 780px; color: #96938c; line-height: 1.7; }
.guide-cta { padding: 6rem 4vw; background: var(--bo-gold); color: #0a0b0d; }.guide-cta h2 { max-width: 850px; font: 400 clamp(2.7rem, 5vw, 5.2rem)/.98 var(--bo-font-display); letter-spacing: -.04em; }

/* Shareable design-kit page */
.kit-page { min-height: 100vh; }.kit-hero { padding: 7rem 4vw 4rem; }.kit-hero h1 { max-width: 960px; }.kit-section { padding: 5rem 4vw; border-top: 1px solid var(--bo-border-dark); }.kit-section h2 { font: 400 clamp(2.2rem, 4vw, 4rem)/1 var(--bo-font-display); }.type-grid, .color-grid, .component-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #34363a; border-left: 1px solid #34363a; }.kit-card { min-height: 250px; padding: 1.5rem; border-right: 1px solid #34363a; border-bottom: 1px solid #34363a; }.kit-card span { color: var(--bo-gold); font: 500 .68rem/1.4 var(--bo-font-data); letter-spacing: .12em; }.display-sample { font: 400 3.4rem/1 var(--bo-font-display); }.body-sample { font: 400 1.05rem/1.7 var(--bo-font-body); }.data-sample { color: var(--bo-blue); font: 500 .92rem/1.7 var(--bo-font-data); }.swatch { min-height: 220px; padding: 1.4rem; display: flex; align-items: end; border-right: 1px solid #34363a; border-bottom: 1px solid #34363a; font: 500 .67rem/1.5 var(--bo-font-data); }.download-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

@media (max-width: 1000px) { .hero { grid-template-columns: 1fr; }.fleet-stage { min-height: 470px; }.fleet-image { width: min(820px, 110%); }.method-grid { grid-template-columns: repeat(2,1fr); }.guide-grid, .type-grid, .color-grid, .component-grid { grid-template-columns: 1fr; }.guide-grid > a { min-height: 280px; }.guide-hero { grid-template-columns: 1fr; }.guide-body { grid-template-columns: 1fr; }.toc { position: static; }.receipt-section { grid-template-columns: 1fr; }.receipt-card { width: min(470px, calc(100% - 24px)); } }
@media (max-width: 720px) { .site-nav { min-height: 68px; grid-template-columns: 1fr auto; }.site-nav nav { display: none; }.hero { padding-top: 4.5rem; }.fleet-stage { min-height: 390px; }.mark-console { width: 96px; }.phase-mark { width: 58px; }.fleet-status { right: auto; left: 0; max-width: 94%; }.method-grid { grid-template-columns: 1fr; }.method-grid article { min-height: 170px; }.method-grid h3 { margin-top: 2rem; }.section-heading { display: block; }.receipt-section { padding-bottom: 9rem; }.site-footer { grid-template-columns: 1fr; }.site-footer p { text-align: left; }.site-footer div { justify-content: start; }.guide-hero, .guide-body { padding-left: 5vw; padding-right: 5vw; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.fleet-image, .fleet-stage[data-phase="running"] .fleet-image, .fleet-stage[data-phase="running"] .mark-v-shape, .fleet-stage[data-phase="running"] .brick, .fleet-stage[data-phase="running"] .coin { animation: none !important; }.button, .guide-grid > a, .mark-shape { transition-duration: .01ms !important; } }

/* V5 dispatch viewport — a single perspective field from drawings to prototype */
.hero { min-height: calc(100svh - 74px); height: calc(100svh - 74px); max-height: 980px; padding: clamp(1.5rem, 4vh, 3.5rem) 4vw; grid-template-columns: minmax(280px, .72fr) minmax(600px, 1.28fr); gap: clamp(1.5rem, 4vw, 5rem); background: radial-gradient(ellipse at 76% 45%, #2d23153d 0, #0a0d12 42%, #040506 78%); }
.hero::before { content: ""; position: absolute; inset: 74px 0 0; pointer-events: none; opacity: .32; background-image: linear-gradient(#82b6d20b 1px, transparent 1px), linear-gradient(90deg, #82b6d20b 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg, transparent, #000 30%, #000); }
.hero-copy { align-self: center; max-width: 650px; }
.hero h1 { margin: 1.15rem 0 1.2rem; font-size: clamp(3rem, 5.1vw, 6.3rem); line-height: .91; }
.hero-dek { max-width: 570px; margin-bottom: 1.7rem; font-size: clamp(.93rem, 1.15vw, 1.08rem); line-height: 1.65; }
.method-link { display: inline-flex; gap: .65rem; align-items: center; color: #b9b9b9; font: 500 .7rem/1 var(--bo-font-data); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.method-link span { transition: transform .2s ease; }.method-link:hover span { transform: translate(3px,-3px); }
.dispatch-teaser { position: relative; z-index: 2; width: 100%; height: min(78vh, 760px); min-height: 560px; align-self: center; display: grid; grid-template-rows: 58px 46px minmax(0,1fr) 158px; overflow: hidden; border: 1px solid #534a38; background: linear-gradient(145deg, #11151ae8, #06080ae8 68%); box-shadow: 0 30px 100px #000b, inset 0 1px #cacaca1c; backdrop-filter: blur(16px); }
.dispatch-teaser::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 25%, #fff 46%, transparent 48%); opacity: .025; }
.dispatch-head { min-height: 0; padding: 0 1rem; }
.phase-rail { margin: 0; padding: 0 1rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid #292c31; border-bottom: 1px solid #292c31; list-style: none; }
.phase-rail li { position: relative; display: flex; align-items: center; gap: .6rem; color: #666a6c; font: 500 .64rem/1 var(--bo-font-data); letter-spacing: .11em; text-transform: uppercase; }
.phase-rail li:not(:last-child)::after { content: ""; position: absolute; right: 1rem; width: 35%; height: 1px; background: #35383c; }
.phase-rail b { color: #464a4e; font-weight: 400; }.phase-rail .is-current { color: #d8d8d8; }.phase-rail .is-current b, .phase-rail .is-done b { color: var(--bo-pink); }.phase-rail .is-done { color: #959595; }
.fleet-stage { min-height: 0; overflow: hidden; background: radial-gradient(circle at 72% 46%, #a0a0a030, transparent 31%), linear-gradient(180deg, #080b0fcc, #050708); perspective: 900px; }
.draft-field { width: 100%; height: 100%; opacity: .3; filter: drop-shadow(0 0 6px #4fa5d526); transform: scale(1.08); }
.draft-field path, .draft-field circle { vector-effect: non-scaling-stroke; }.plan-lines { stroke: #65acd0; stroke-width: .75; }.model-lines { stroke: #b1b1b1; stroke-width: .85; }
.conversion-line { stroke: #d62bb7; stroke-width: 1; stroke-dasharray: 4 10; opacity: .35; animation: dash-flow 8s linear infinite; }
.fleet-image { position: absolute; z-index: 4; left: 8%; bottom: -10%; width: min(39%, 350px); max-width: 350px; height: auto; opacity: .76; mix-blend-mode: screen; filter: saturate(.72) contrast(1.1) drop-shadow(0 25px 30px #000); transform-origin: 50% 80%; animation: fleet-float-subtle 6s ease-in-out infinite; -webkit-mask-image: linear-gradient(#000 55%, transparent 96%); mask-image: linear-gradient(#000 55%, transparent 96%); }
.mark-console { top: 1rem; left: 1rem; width: 76px; padding: .55rem; opacity: .78; box-shadow: 6px 7px 0 #0008; }.phase-mark { width: 44px; }.phase-label { font-size: .5rem; }
.fleet-status { right: 1rem; bottom: .8rem; background: #050607b8; border-color: #4c4435; }
.value-particles { z-index: 5; inset: 10% 25% 15% 15%; transform: scale(.7); }
.document-feed { position: absolute; z-index: 3; left: 29%; top: 34%; display: grid; gap: .45rem; opacity: 0; }
.document-feed i { width: 40px; height: 52px; padding: .4rem; border: 1px solid #7b9fb0; background: #10161c; color: #8eb3c4; font: normal .48rem/1 var(--bo-font-data); box-shadow: 6px 7px 0 #0007; }
.model-build { position: absolute; z-index: 3; right: 11%; top: 19%; width: 35%; aspect-ratio: 1; transform: rotateX(58deg) rotateZ(-31deg); transform-style: preserve-3d; pointer-events: none; }
.slab { position: absolute; inset: 24% 4%; border: 1px solid #b6b6b6; background: #8b8b8b30; opacity: 0; transform: translateZ(0) scale(.88); box-shadow: inset 0 0 18px #bcbcbc40, 0 0 12px #000; }
.slab-2 { inset: 14% 14%; }.slab-3 { inset: 4% 24%; }.slab-4 { inset: -6% 34%; }
.column { position: absolute; width: 3px; height: 46%; bottom: 25%; background: linear-gradient(#d4d4d4, #5e5e5e); transform-origin: bottom; transform: rotateX(-90deg) scaleY(0); opacity: 0; box-shadow: 0 0 5px #b9b9b9; }
.column-1 { left: 10%; }.column-2 { right: 10%; }.column-3 { left: 42%; }.column-4 { right: 42%; }
.core { position: absolute; left: 42%; top: 28%; width: 17%; height: 38%; border: 1px solid #d4d4d4; background: #9c9c9c40; opacity: 0; transform: translateZ(26px); }
.scan-plane { position: absolute; inset: 0; border-top: 1px solid var(--bo-pink); opacity: 0; box-shadow: 0 -5px 18px #c2c6ca55; }
.dispatch-panel { min-height: 0; height: 158px; grid-template-columns: 210px 1fr; }
.dispatch-steps { padding: .85rem 1rem; gap: .15rem; }.dispatch-steps li { padding: .35rem 0; }.dispatch-screen { padding: .8rem 1rem; }.dispatch-screen p { margin: .4rem 0; font-size: .73rem; }.result-grid { margin: .55rem 0 .35rem; }.result-grid input { padding: .4rem; font-size: .78rem; }.review-actions { right: 1rem; bottom: .8rem; }.review-actions .button { min-height: 34px; padding: .5rem .75rem; }
.fleet-stage[data-phase="parsing"] .document-feed { animation: feed-in 2.7s ease both; }.fleet-stage[data-phase="parsing"] .document-feed i { animation: doc-pulse .65s ease-in-out infinite alternate; }.fleet-stage[data-phase="parsing"] .document-feed i:nth-child(2) { animation-delay: .15s; }.fleet-stage[data-phase="parsing"] .document-feed i:nth-child(3) { animation-delay: .3s; }
.fleet-stage[data-phase="building"] .fleet-image { animation: bot-hustle .42s ease-in-out infinite alternate; opacity: .92; }
.fleet-stage[data-phase="building"] .slab, .fleet-stage[data-phase="complete"] .slab { animation: place-slab .55s var(--bo-ease) forwards; }.fleet-stage[data-phase="building"] .slab-2 { animation-delay: .38s; }.fleet-stage[data-phase="building"] .slab-3 { animation-delay: .76s; }.fleet-stage[data-phase="building"] .slab-4 { animation-delay: 1.14s; }
.fleet-stage[data-phase="building"] .column, .fleet-stage[data-phase="complete"] .column { animation: raise-column .45s var(--bo-ease) 1.05s forwards; }.fleet-stage[data-phase="building"] .core, .fleet-stage[data-phase="complete"] .core { animation: core-in .5s var(--bo-ease) 1.5s forwards; }.fleet-stage[data-phase="building"] .scan-plane { animation: scan-build 1.6s ease-in-out .35s infinite; }
.fleet-stage[data-phase="complete"] .slab, .fleet-stage[data-phase="complete"] .column, .fleet-stage[data-phase="complete"] .core { animation-delay: 0s; }
@keyframes dash-flow { to { stroke-dashoffset: -140; } }
@keyframes fleet-float-subtle { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.004); } }
@keyframes bot-hustle { from { transform: translate3d(-2px,1px,0) rotate(-.25deg); } to { transform: translate3d(3px,-3px,0) rotate(.25deg); } }
@keyframes feed-in { 0% { opacity: 0; transform: translateX(-40px); } 20%,80% { opacity: .9; } 100% { opacity: 0; transform: translateX(100px) scale(.7); } }
@keyframes doc-pulse { to { border-color: #bdbdbd; color: #d8d8d8; box-shadow: 6px 7px 0 #0007, 0 0 12px #a7a7a744; } }
@keyframes place-slab { to { opacity: .76; transform: translateZ(0) scale(1); } }
@keyframes raise-column { to { opacity: .85; transform: rotateX(-90deg) scaleY(1); } }
@keyframes core-in { from { opacity: 0; transform: translateZ(80px); } to { opacity: .82; transform: translateZ(26px); } }
@keyframes scan-build { 0% { opacity: 0; transform: translateY(-30%); } 30%,70% { opacity: .9; } 100% { opacity: 0; transform: translateY(310%); } }
@media (max-width: 1100px) { .hero { height: auto; max-height: none; grid-template-columns: 1fr; padding-top: 3rem; }.hero-copy { max-width: 780px; }.dispatch-teaser { height: min(760px, 80svh); width: min(900px,100%); }.fleet-image { width: min(34%, 300px); }.hero::before { inset: 68px 0 0; } }
@media (max-width: 720px) { .hero { min-height: auto; padding: 3.5rem 4vw 4rem; }.hero h1 { font-size: clamp(2.8rem, 13vw, 4.5rem); }.dispatch-teaser { height: 680px; min-height: 0; grid-template-rows: 58px 46px minmax(0,1fr) 210px; }.dispatch-panel { height: 210px; grid-template-columns: 1fr; }.dispatch-steps { grid-template-columns: repeat(4,1fr); border-right: 0; border-bottom: 1px solid #32353a; }.dispatch-steps li { display: grid; gap: .2rem; }.dispatch-steps li::after { display: none; }.fleet-image { left: 2%; bottom: -2%; width: 42%; }.model-build { right: 3%; width: 48%; }.mark-console { display: none; }.phase-rail li:not(:last-child)::after { width: 18%; right: .35rem; }.review-actions { position: static; margin-top: .5rem; }.result-grid { padding-right: 0; }.dispatch-screen { padding: .7rem 1rem; } }
@media (prefers-reduced-motion: reduce) { .conversion-line, .document-feed, .document-feed i, .model-build *, .scan-plane { animation: none !important; }.fleet-stage[data-phase="building"] .slab, .fleet-stage[data-phase="complete"] .slab, .fleet-stage[data-phase="building"] .column, .fleet-stage[data-phase="complete"] .column, .fleet-stage[data-phase="building"] .core, .fleet-stage[data-phase="complete"] .core { opacity: .8; } }

/* Private beta gate */
.beta-form { max-width: 590px; margin-top: 2rem; }
.beta-form > label { display: block; margin-bottom: .7rem; color: #c3c3c3; font: 500 .72rem/1 var(--bo-font-data); letter-spacing: .1em; text-transform: uppercase; }
.beta-field { display: grid; grid-template-columns: minmax(0,1fr) auto; border: 1px solid #585858; background: #090b0dcc; box-shadow: 12px 14px 0 #0008, inset 0 1px #cfcfcf12; }
.beta-field:focus-within { border-color: #c2c6ca; box-shadow: 12px 14px 0 #0008, 0 0 24px #aaaaaa1c; }
.beta-field input { min-width: 0; padding: 1rem 1.1rem; border: 0; outline: 0; background: transparent; color: #f0ebe1; font: 500 .86rem/1 var(--bo-font-data); }
.beta-field input::placeholder { color: #66645f; }
.beta-field button { padding: 0 1.1rem; border: 0; border-left: 1px solid #585858; background: linear-gradient(180deg, #d6d9dd 0%, #bcc0c5 55%, #a6aab0 100%); color: #0a0b0d; cursor: pointer; font: 600 .68rem/1 var(--bo-font-data); letter-spacing: .06em; text-transform: uppercase; }
.beta-field button:hover { background: linear-gradient(180deg, #e4e6e9 0%, #cbcfd3 55%, #b6babf 100%); }.beta-field button span { margin-left: .4rem; }
.beta-form > p { margin: .7rem 0 0; color: #77746d; font-size: .7rem; }.beta-form .beta-error { color: #ee7bd6; }.beta-form .beta-error a { color: inherit; }
.beta-form .beta-trap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.beta-success { margin-top: 2rem; display: flex; align-items: center; gap: .7rem; color: #bebebe; font: 500 .72rem/1 var(--bo-font-data); letter-spacing: .08em; text-transform: uppercase; }.beta-success[hidden] { display: none; }.beta-success i { width: 7px; height: 7px; border-radius: 50%; background: var(--bo-success); box-shadow: 0 0 13px var(--bo-success); }
.dispatch-teaser.is-locked { grid-template-rows: 0 0 minmax(0,1fr) 0; }
.dispatch-teaser.is-locked .dispatch-head, .dispatch-teaser.is-locked .phase-rail, .dispatch-teaser.is-locked .dispatch-panel { visibility: hidden; opacity: 0; pointer-events: none; }
.dispatch-teaser .dispatch-head, .dispatch-teaser .phase-rail, .dispatch-teaser .dispatch-panel { transition: opacity .5s ease .2s; }
.teaser-caption { position: absolute; z-index: 7; left: 1.2rem; bottom: 1.1rem; display: grid; gap: .35rem; padding-left: .8rem; border-left: 2px solid var(--bo-pink); font-family: var(--bo-font-data); }.teaser-caption span { color: #7e7e7e; font-size: .56rem; letter-spacing: .14em; }.teaser-caption b { color: #c2c2c2; font-size: .66rem; letter-spacing: .09em; }
.dispatch-teaser:not(.is-locked) .teaser-caption { display: none; }
.fleet-stage[data-phase="teaser"] .fleet-image { width: min(68%, 580px); max-width: 580px; left: 12%; bottom: -7%; opacity: .9; animation: bot-hustle .55s ease-in-out infinite alternate; }
.fleet-stage[data-phase="teaser"] .document-feed { opacity: .8; animation: feed-in 3s ease infinite; }.fleet-stage[data-phase="teaser"] .document-feed i { animation: doc-pulse .75s ease-in-out infinite alternate; }
.fleet-stage[data-phase="teaser"] .draft-field { opacity: .2; }.fleet-stage[data-phase="teaser"] .mark-console { display: none; }.fleet-stage[data-phase="teaser"] .fleet-status { bottom: auto; top: 1rem; }
.dispatch-teaser:not(.is-locked) { transition: grid-template-rows .55s var(--bo-ease); }
@media (max-width: 720px) { .beta-field { grid-template-columns: 1fr; }.beta-field button { min-height: 48px; border-left: 0; border-top: 1px solid #585858; }.fleet-stage[data-phase="teaser"] .fleet-image { width: 90%; left: 1%; }.dispatch-teaser.is-locked { height: 460px; }.beta-form { margin-top: 1.5rem; } }

/* Fleet personalities, ingestion lane, and expanded assembly */
.dispatch-teaser:not(.is-locked) { grid-template-rows: 58px 46px minmax(0,1fr) 205px; }
.dispatch-panel { height: 205px; }
.bot-roster { position: absolute; z-index: 6; left: 7%; bottom: 10%; width: min(40%,350px); display: grid; grid-template-columns: repeat(3,1fr); gap: .3rem; pointer-events: none; }
.bot-roster span { display: grid; justify-items: center; gap: .15rem; filter: drop-shadow(0 3px 4px #000); font-family: var(--bo-font-data); }.bot-roster b { font-size: .51rem; letter-spacing: .1em; }.bot-roster small { color: #777b7f; font-size: .39rem; letter-spacing: .08em; }.bot-gold b { color: #c7c7c7; }.bot-blue b { color: #6eb9df; }.bot-pink b { color: #ed67cf; }
.bot-roster span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 11px currentColor; background: currentColor; }.bot-gold { color: #b4b4b4; }.bot-blue { color: #56a9d5; }.bot-pink { color: #e853c5; }
.document-feed { left: 27%; top: 30%; width: 140px; height: 100px; display: block; }
.document-feed .ingest-piece { position: absolute; width: 54px; height: 54px; padding: 0; border: 0; background: transparent; box-shadow: none; display: grid; grid-template-columns: repeat(3,16px); grid-template-rows: repeat(3,16px); gap: 2px; }
.ingest-piece span { display: block; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 22%, #080b0e); box-shadow: inset 0 0 6px currentColor; }.ingest-piece b { position: absolute; left: 2px; top: 2px; color: #08090a; font: 700 .34rem/1 var(--bo-font-data); }
.piece-l { color: #b9b9b9; }.piece-l span:nth-child(1) { grid-area: 1/1; }.piece-l span:nth-child(2) { grid-area: 2/1; }.piece-l span:nth-child(3) { grid-area: 3/1; }.piece-l span:nth-child(4) { grid-area: 3/2; }
.piece-t { color: #62aed5; }.piece-t span:nth-child(1) { grid-area: 1/1; }.piece-t span:nth-child(2) { grid-area: 1/2; }.piece-t span:nth-child(3) { grid-area: 1/3; }.piece-t span:nth-child(4) { grid-area: 2/2; }
.piece-z { color: #e058c4; }.piece-z span:nth-child(1) { grid-area: 1/1; }.piece-z span:nth-child(2) { grid-area: 1/2; }.piece-z span:nth-child(3) { grid-area: 2/2; }.piece-z span:nth-child(4) { grid-area: 2/3; }
.document-feed .piece-l { top: 2px; left: 0; }.document-feed .piece-t { top: 22px; left: 34px; }.document-feed .piece-z { top: 8px; left: 78px; }
.fleet-stage[data-phase="teaser"] .document-feed, .fleet-stage[data-phase="parsing"] .document-feed { opacity: 1; animation: none; }
.fleet-stage[data-phase="teaser"] .ingest-piece, .fleet-stage[data-phase="parsing"] .ingest-piece { animation: tetris-ingest 2.7s cubic-bezier(.45,.05,.55,.95) infinite; }.fleet-stage[data-phase="teaser"] .piece-t, .fleet-stage[data-phase="parsing"] .piece-t { animation-delay: -.9s; }.fleet-stage[data-phase="teaser"] .piece-z, .fleet-stage[data-phase="parsing"] .piece-z { animation-delay: -1.8s; }
.beam { position: absolute; height: 3px; width: 74%; left: 13%; background: linear-gradient(90deg,#6e6e6e,#d6d6d6,#6e6e6e); opacity: 0; transform: translateZ(42px) scaleX(0); }.beam-1 { top: 22%; }.beam-2 { top: 49%; }.beam-3 { top: 76%; }
.facade { position: absolute; width: 1px; height: 78%; top: 11%; border-left: 1px solid #69b1d4; opacity: 0; box-shadow: 0 0 8px #69b1d477; }.facade-1 { left: 22%; }.facade-2 { left: 50%; }.facade-3 { left: 78%; }
.plant { position: absolute; right: 8%; top: 6%; width: 25%; height: 16%; border: 1px solid #e061c6; background: #6f2b6338; opacity: 0; transform: translateZ(48px); }.mep-run { position: absolute; left: 10%; top: 60%; width: 78%; height: 12%; border: 2px solid #62b4dc; border-left-width: 8px; opacity: 0; transform: translateZ(35px); }.roof { position: absolute; inset: -12% 30% 72%; border: 1px solid #d5d5d5; background: #9a9a9a40; opacity: 0; transform: translateZ(60px) scale(.7); }
.fleet-stage[data-phase="building"] .beam, .fleet-stage[data-phase="complete"] .beam { animation: beam-in .45s var(--bo-ease) 1.6s forwards; }.fleet-stage[data-phase="building"] .beam-2 { animation-delay: 1.78s; }.fleet-stage[data-phase="building"] .beam-3 { animation-delay: 1.96s; }
.fleet-stage[data-phase="building"] .facade, .fleet-stage[data-phase="complete"] .facade { animation: facade-in .38s ease 2.05s forwards; }.fleet-stage[data-phase="building"] .facade-2 { animation-delay: 2.22s; }.fleet-stage[data-phase="building"] .facade-3 { animation-delay: 2.39s; }
.fleet-stage[data-phase="building"] .mep-run, .fleet-stage[data-phase="complete"] .mep-run { animation: system-in .45s ease 2.35s forwards; }.fleet-stage[data-phase="building"] .plant, .fleet-stage[data-phase="complete"] .plant { animation: system-in .45s ease 2.55s forwards; }.fleet-stage[data-phase="building"] .roof, .fleet-stage[data-phase="complete"] .roof { animation: roof-in .55s var(--bo-ease) 2.7s forwards; }
.fleet-stage[data-phase="complete"] .beam { animation: none; opacity: .85; transform: translateZ(42px) scaleX(1); }.fleet-stage[data-phase="complete"] .facade { animation: none; opacity: .65; }.fleet-stage[data-phase="complete"] .mep-run { animation: none; opacity: .8; transform: translateZ(35px) scale(1); }.fleet-stage[data-phase="complete"] .plant { animation: none; opacity: .8; transform: translateZ(35px) scale(1); }.fleet-stage[data-phase="complete"] .roof { animation: none; opacity: .8; transform: translateZ(60px) scale(1); }
.approve-primary { position: absolute; top: .75rem; right: 1rem; min-height: 48px; padding: .85rem 1.15rem; font-size: .72rem; box-shadow: 7px 8px 0 #0008; }.source-proof { width: calc(100% - 155px); margin-top: .45rem; display: grid; grid-template-columns: auto 1fr auto 1fr; gap: .25rem .6rem; align-items: baseline; color: #797771; font: 500 .56rem/1.25 var(--bo-font-data); }.source-proof span { color: #7d7d7d; letter-spacing: .08em; }.source-proof b { color: #c2c2c2; font-size: .63rem; }.source-proof em { grid-column: 2/-1; color: #686761; font-style: normal; }.screen-kicker { padding-right: 160px; }
@keyframes tetris-ingest { 0% { opacity: 0; transform: translate3d(-72px,-24px,0) rotate(-90deg) scale(.7); } 18% { opacity: .95; transform: translate3d(-38px,0,0) rotate(-90deg) scale(.8); } 55% { opacity: 1; transform: translate3d(10px,18px,0) rotate(0) scale(.9); } 78% { opacity: .95; transform: translate3d(50px,28px,0) rotate(0) scale(.7); } 100% { opacity: 0; transform: translate3d(110px,14px,0) rotate(90deg) scale(.25); } }
@keyframes beam-in { to { opacity: .85; transform: translateZ(42px) scaleX(1); } } @keyframes facade-in { to { opacity: .65; height: 78%; } } @keyframes system-in { from { opacity: 0; transform: translateZ(70px) scale(.5); } to { opacity: .8; transform: translateZ(35px) scale(1); } } @keyframes roof-in { to { opacity: .8; transform: translateZ(60px) scale(1); } }
@media (max-width: 720px) { .dispatch-teaser:not(.is-locked) { grid-template-rows: 58px 46px minmax(0,1fr) 275px; }.dispatch-panel { height: 275px; }.bot-roster { left: 1%; bottom: 15%; width: 48%; }.source-proof { width: 100%; grid-template-columns: auto 1fr; padding-right: 0; }.source-proof em { grid-column: 1/-1; }.approve-primary { top: .6rem; right: .7rem; }.screen-kicker { padding-right: 145px; }.result-grid { margin-top: 1.1rem; } }

/* V7 fleet: decisive subject treatment */
.fleet-stage::before { content: ""; position: absolute; z-index: 1; inset: 5% 3% 3%; pointer-events: none; background: radial-gradient(circle at 37% 47%, #50b4e81a 0 2%, transparent 22%), radial-gradient(circle at 62% 47%, #aaaaaa18 0 3%, transparent 25%), radial-gradient(circle at 82% 34%, #ef42c719 0 2%, transparent 21%), radial-gradient(ellipse at 58% 78%, #afafaf40, transparent 48%); filter: blur(8px); }
.fleet-image { left: 2%; bottom: -4%; width: min(78%, 660px); max-width: 660px; opacity: 1; mix-blend-mode: normal; -webkit-mask-image: linear-gradient(#000 72%, transparent 99%); mask-image: linear-gradient(#000 72%, transparent 99%); filter: contrast(1.08) saturate(1.04) drop-shadow(0 28px 38px #000) drop-shadow(0 0 10px #afafaf2e); }
.fleet-stage[data-phase="teaser"] .fleet-image { left: 0; bottom: -4%; width: min(88%, 740px); max-width: 740px; opacity: 1; mix-blend-mode: normal; animation: bot-hustle .72s ease-in-out infinite alternate; }
.fleet-stage[data-phase="building"] .fleet-image { opacity: 1; mix-blend-mode: normal; filter: contrast(1.1) saturate(1.08) drop-shadow(0 30px 42px #000) drop-shadow(0 0 14px #afafaf38); }
.bot-roster { left: 12%; bottom: 5%; width: min(56%,470px); grid-template-columns: 1fr 1.25fr 1fr; }
.bot-roster span::before { display: none; }.bot-roster b { font-size: .48rem; text-shadow: 0 0 10px currentColor; }
.draft-field { opacity: .19; filter: blur(.15px) drop-shadow(0 0 4px #4fa5d51c); }.fleet-stage[data-phase="teaser"] .draft-field { opacity: .13; }
@media (max-width: 720px) { .fleet-image, .fleet-stage[data-phase="teaser"] .fleet-image { left: -12%; bottom: 2%; width: 112%; }.bot-roster { left: 1%; bottom: 9%; width: 78%; } }

/* V8 transparent fleet frames */
.fleet-frames { position: absolute; z-index: 4; left: 8%; bottom: 2%; width: min(53%,460px); display: grid; align-items: end; pointer-events: none; }
.fleet-frames .fleet-image { position: relative; inset: auto; grid-area: 1/1; width: 100%; max-width: none; height: auto; opacity: 1; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; filter: saturate(.92) contrast(1.04) drop-shadow(0 24px 28px #000b) drop-shadow(0 0 8px #aaaaaa22); }
.fleet-frames .fleet-image-rest { opacity: 0; }
.fleet-stage[data-phase="teaser"] .fleet-frames .fleet-image,
.fleet-stage[data-phase="parsing"] .fleet-frames .fleet-image,
.fleet-stage[data-phase="building"] .fleet-frames .fleet-image { inset: auto; width: 100%; max-width: none; }
.fleet-stage[data-phase="teaser"] .fleet-image-active,
.fleet-stage[data-phase="parsing"] .fleet-image-active,
.fleet-stage[data-phase="building"] .fleet-image-active { opacity: 1; animation: fleet-eye-pulse 1.15s ease-in-out infinite alternate, fleet-hustle-small .72s ease-in-out infinite alternate; }
.fleet-stage[data-phase="review"] .fleet-image-active,
.fleet-stage[data-phase="complete"] .fleet-image-active { opacity: 0; animation: none; }
.fleet-stage[data-phase="review"] .fleet-image-rest,
.fleet-stage[data-phase="complete"] .fleet-image-rest { opacity: 1; animation: fleet-settle-small .65s var(--bo-ease) both; }
.bot-roster { left: 10%; bottom: 1.5%; width: min(49%,430px); }
@keyframes fleet-eye-pulse { from { filter: saturate(.82) brightness(.84) contrast(1.04) drop-shadow(0 22px 27px #000b); } to { filter: saturate(1.16) brightness(1.1) contrast(1.08) drop-shadow(0 25px 30px #000d) drop-shadow(0 0 11px #afafaf3b); } }
@keyframes fleet-hustle-small { from { transform: translate3d(-1px,1px,0) rotate(-.15deg); } to { transform: translate3d(2px,-2px,0) rotate(.15deg); } }
@keyframes fleet-settle-small { from { transform: translateY(-3px); } to { transform: translateY(0); } }
.fleet-asset-grid { display: grid; grid-template-columns: 1.5fr repeat(3,1fr); border-top: 1px solid #34363a; border-left: 1px solid #34363a; }
.fleet-asset { min-height: 320px; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid #34363a; border-bottom: 1px solid #34363a; background: radial-gradient(circle at 50% 45%,#392d184d,transparent 45%); text-decoration: none; overflow: hidden; }
.fleet-asset img { width: 100%; height: 245px; object-fit: contain; filter: drop-shadow(0 18px 20px #000); transition: transform .35s var(--bo-ease); }.fleet-asset:hover img { transform: translateY(-5px) scale(1.02); }.fleet-asset span { color: #bbbbbb; font: 500 .63rem/1.2 var(--bo-font-data); letter-spacing: .1em; }
@media (max-width: 1000px) { .fleet-asset-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px) { .fleet-frames { left: -1%; bottom: 10%; width: 62%; }.bot-roster { left: 2%; bottom: 7%; width: 57%; }.fleet-asset-grid { grid-template-columns: 1fr; }.fleet-asset { min-height: 280px; } }
@media (prefers-reduced-motion: reduce) { .fleet-stage[data-phase="teaser"] .fleet-image-active, .fleet-stage[data-phase="parsing"] .fleet-image-active, .fleet-stage[data-phase="building"] .fleet-image-active { animation: none !important; } }

/* V5 dispatch teaser */
.hero { grid-template-columns: minmax(0, .94fr) minmax(520px, 1.06fr); gap: clamp(2rem, 5vw, 6rem); background: radial-gradient(circle at 74% 36%, #241c12 0, #0a0b0d 33%, #030405 72%); }
.dispatch-teaser { position: relative; z-index: 2; overflow: hidden; border: 1px solid #3b3324; background: linear-gradient(155deg, #101216f2, #050607f7); box-shadow: 18px 22px 0 #000, 0 30px 90px #000b; }
.dispatch-head { min-height: 62px; padding: .8rem .9rem .8rem 1.15rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #302b20; background: #08090be8; }
.dispatch-head > div { display: grid; gap: .25rem; }
.dispatch-head span, .dispatch-head b { font-family: var(--bo-font-data); letter-spacing: .11em; }
.dispatch-head span { color: #7f7b72; font-size: .58rem; }
.dispatch-head b { color: #c3c3c3; font-size: .66rem; font-weight: 500; }
.power-control { min-width: 82px; min-height: 38px; padding: 0 .8rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 1px solid #555555; background: #0b0c0f; color: #cdcdcd; cursor: pointer; font: 600 .66rem/1 var(--bo-font-data); letter-spacing: .12em; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.power-control i { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 2px #0b0c0f; }
.power-control:hover, .power-control[aria-pressed="true"] { background: var(--bo-gold); color: #070809; box-shadow: 0 0 22px #aaaaaa35; }
.power-control[aria-pressed="true"] i { background: #070809; box-shadow: none; }
.dispatch-teaser .fleet-stage { min-height: 360px; overflow: hidden; border-bottom: 1px solid #302b20; background: radial-gradient(circle at 65% 54%, #18213277, transparent 48%); }
.dispatch-teaser .fleet-image { position: absolute; z-index: 3; right: -2%; bottom: -7%; width: min(520px, 76%); max-width: 76%; opacity: .88; transform-origin: 60% 72%; }
.draft-field { position: absolute; z-index: 0; inset: 2% 1% 0; width: 98%; height: 96%; overflow: visible; }
.draft-field path, .draft-field circle { fill: none; stroke: #bebebe; stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan-lines { opacity: .13; }
.model-lines { opacity: .08; transition: opacity .7s ease, filter .7s ease; }
.conversion-line { opacity: .16; stroke-dasharray: 5 8; }
.dispatch-teaser .mark-console { top: 1rem; left: 1rem; width: 86px; padding: .65rem; box-shadow: 7px 8px 0 #000; }
.dispatch-teaser .phase-mark { width: 52px; }
.dispatch-teaser .phase-label { font-size: .5rem; }
.dispatch-teaser .fleet-status { right: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); font-size: .51rem; }
.dispatch-teaser .value-particles { inset: 23% 8% 5% 28%; }
.dispatch-panel { min-height: 245px; padding: 1rem 1.15rem 1.15rem; background: linear-gradient(180deg, #0b0c0f, #07080a); }
.dispatch-steps { margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; }
.dispatch-steps li { position: relative; min-width: 0; padding-top: .75rem; border-top: 1px solid #34363a; color: #5f5d58; font-family: var(--bo-font-data); }
.dispatch-steps li::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #4a4b4d; }
.dispatch-steps li b, .dispatch-steps li span { display: block; font-weight: 500; }
.dispatch-steps li b { font-size: .52rem; }
.dispatch-steps li span { margin-top: .22rem; font-size: .58rem; letter-spacing: .06em; }
.dispatch-steps li.is-current, .dispatch-steps li.is-done { border-color: #757575; color: #bebebe; }
.dispatch-steps li.is-current::before { background: var(--bo-pink); box-shadow: 0 0 5px var(--bo-pink), 0 0 14px var(--bo-pink); }
.dispatch-steps li.is-done::before { background: var(--bo-gold); }
.dispatch-screen { min-height: 144px; }
.dispatch-screen[hidden] { display: none; }
.screen-kicker { color: #bebebe; font: 500 .61rem/1.4 var(--bo-font-data); letter-spacing: .12em; }
.screen-kicker.hot { color: #c2c6ca; text-shadow: 0 0 6px #c2c6ca, 0 0 18px #c2c6ca88; }
.screen-kicker.complete { color: #97e2b2; }
.dispatch-screen > p { max-width: 540px; margin: .72rem 0 0; color: #89867f; font-size: .84rem; line-height: 1.55; }
.doc-stack { height: 44px; margin-top: .8rem; display: flex; align-items: end; gap: .45rem; }
.doc-stack i { width: 42px; height: 34px; display: block; border: 1px solid #5c5c5c; background: linear-gradient(145deg, #1a1c20, #090a0c); box-shadow: 4px 4px 0 #000; animation: doc-read .9s ease-in-out infinite alternate; }
.doc-stack i:nth-child(2) { height: 40px; animation-delay: .18s; }.doc-stack i:nth-child(3) { height: 29px; animation-delay: .36s; }
.parse-meter { height: 2px; margin-top: 1.1rem; overflow: hidden; background: #2a2b2e; }
.parse-meter i { width: 46%; height: 100%; display: block; background: linear-gradient(90deg, transparent, var(--bo-pink), var(--bo-gold)); box-shadow: 0 0 10px var(--bo-pink); animation: meter-run 1.1s linear infinite; }
.result-grid { margin-top: .8rem; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.result-grid label { padding: .62rem .7rem; border: 1px solid #34363a; background: #0d0f12; }
.result-grid label span { display: block; color: #77746e; font: 400 .53rem/1.2 var(--bo-font-data); letter-spacing: .08em; text-transform: uppercase; }
.result-grid input { width: 100%; margin-top: .35rem; padding: 0; border: 0; border-bottom: 1px solid transparent; outline: 0; background: transparent; color: #d6d6d6; font: 500 1.1rem/1.25 var(--bo-font-data); }
.result-grid input:not([readonly]) { border-color: var(--bo-pink); color: #fff; }
.dispatch-screen small { display: block; margin-top: .45rem; color: #5f5d58; font-size: .57rem; }
.review-actions { margin-top: .8rem; display: flex; gap: .6rem; }
.review-actions .button { min-height: 37px; padding: .58rem .72rem; font-size: .58rem; }
.text-reset { margin-top: 1rem; padding: 0 0 .3rem; border: 0; border-bottom: 1px solid #616161; background: transparent; color: #bebebe; cursor: pointer; font: 500 .63rem/1.4 var(--bo-font-data); letter-spacing: .06em; }
.fleet-stage[data-phase="parsing"] .mark-b-shape, .fleet-stage[data-phase="review"] .mark-b-shape, .fleet-stage[data-phase="building"] .mark-b-shape { opacity: 0; transform: scale(.55) rotate(-34deg); }
.fleet-stage[data-phase="parsing"] .mark-v-shape, .fleet-stage[data-phase="review"] .mark-v-shape, .fleet-stage[data-phase="building"] .mark-v-shape { opacity: 1; }
.fleet-stage[data-phase="parsing"] .mark-v-shape, .fleet-stage[data-phase="building"] .mark-v-shape { animation: mark-work .9s ease-in-out infinite alternate; }
.fleet-stage[data-phase="parsing"] .fleet-image, .fleet-stage[data-phase="building"] .fleet-image { animation-duration: 1.05s; filter: drop-shadow(0 24px 28px #000) drop-shadow(0 0 15px #aaaaaa2e); }
.fleet-stage[data-phase="parsing"] .fleet-status i, .fleet-stage[data-phase="building"] .fleet-status i { background: var(--bo-pink); box-shadow: 0 0 5px var(--bo-pink), 0 0 16px var(--bo-pink); }
.fleet-stage[data-phase="parsing"] .brick { animation: brick-drop 1.15s var(--bo-ease) infinite; }
.fleet-stage[data-phase="parsing"] .brick-two { animation-delay: .28s; }.fleet-stage[data-phase="parsing"] .brick-three { animation-delay: .56s; }
.fleet-stage[data-phase="parsing"] .coin { animation: coin-recover 1.25s var(--bo-ease) infinite; }
.fleet-stage[data-phase="parsing"] .coin-two { animation-delay: .35s; }.fleet-stage[data-phase="parsing"] .coin-three { animation-delay: .7s; }
.fleet-stage[data-phase="building"] .model-lines, .fleet-stage[data-phase="complete"] .model-lines { opacity: .34; filter: drop-shadow(0 0 5px #bebebe66); }
.fleet-stage[data-phase="building"] .conversion-line { stroke: var(--bo-pink); opacity: .7; stroke-dasharray: 7 10; animation: line-flow .7s linear infinite; filter: drop-shadow(0 0 4px var(--bo-pink)); }
.fleet-stage[data-phase="complete"] .mark-b-shape, .fleet-stage[data-phase="complete"] .mark-v-shape { opacity: 0; transform: scale(.55); }
.fleet-stage[data-phase="complete"] .mark-o-shape { opacity: 1; transform: scale(.92); }
.fleet-stage[data-phase="complete"] .fleet-image { animation: settle .8s var(--bo-ease) both; opacity: .78; }
@keyframes doc-read { from { transform: translateY(0); border-color: #515151; } to { transform: translateY(-4px); border-color: var(--bo-pink); box-shadow: 4px 6px 0 #000, 0 0 12px #c2c6ca33; } }
@keyframes meter-run { from { transform: translateX(-105%); } to { transform: translateX(225%); } }
@keyframes line-flow { to { stroke-dashoffset: -34; } }

@media (max-width: 1180px) { .hero { grid-template-columns: 1fr; }.dispatch-teaser { width: min(780px, 100%); }.dispatch-teaser .fleet-stage { min-height: 390px; } }
@media (max-width: 720px) { .dispatch-teaser .fleet-stage { min-height: 300px; }.dispatch-teaser .fleet-image { width: 78%; max-width: 78%; right: -5%; }.dispatch-teaser .mark-console { width: 72px; }.dispatch-teaser .phase-mark { width: 40px; }.dispatch-panel { min-height: 270px; }.dispatch-steps li span { font-size: .5rem; }.result-grid { grid-template-columns: 1fr; }.review-actions { flex-wrap: wrap; }.review-actions .button { flex: 1; }.draft-field { inset: 6% -10% 0; width: 118%; } }
@media (prefers-reduced-motion: reduce) { .doc-stack i, .parse-meter i, .fleet-stage[data-phase="parsing"] .fleet-image, .fleet-stage[data-phase="building"] .fleet-image, .fleet-stage[data-phase="parsing"] .mark-v-shape, .fleet-stage[data-phase="building"] .mark-v-shape, .fleet-stage[data-phase="parsing"] .brick, .fleet-stage[data-phase="parsing"] .coin, .fleet-stage[data-phase="building"] .conversion-line { animation: none !important; } }

/* V9 phase crew and perspective hierarchy */
.dispatch-teaser .model-build { right: 1%; top: 7%; width: 51%; }
.dispatch-teaser .draft-field { inset: 0; width: 100%; height: 100%; opacity: .14; transform: none; }
.dispatch-teaser .mark-console { transform: scale(.82); transform-origin: top left; }
.phase-crew { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.phase-bot { position: absolute; bottom: 13%; width: 12%; margin: 0; display: grid; justify-items: center; transition: opacity .45s ease, filter .45s ease, transform .55s var(--bo-ease); opacity: .34; filter: grayscale(.35) brightness(.62); }
.phase-bot picture, .fleet-rest-frame picture, .fleet-asset picture, .fleet-motion-card picture { display: block; width: 100%; }
.phase-bot img { width: 100%; height: auto; filter: drop-shadow(0 11px 14px #000); }
.phase-bot figcaption { display: grid; justify-items: center; gap: .16rem; margin-top: -.4rem; font-family: var(--bo-font-data); letter-spacing: .09em; }.phase-bot figcaption b { font-size: .49rem; }.phase-bot figcaption span { color: #6e6d69; font-size: .39rem; }
.bot-inputs { left: 6%; color: #65bfe8; }.bot-curate { left: 29%; color: #c3c3c3; }.bot-prototype { left: 52%; color: #ef61ce; }
.handoff-track { position: absolute; z-index: 4; left: 11%; right: 32%; bottom: 10%; height: 1px; background: linear-gradient(90deg,#58b5df55,#bcbcbc88,#ed56cc55); }
.handoff-track > i { position: absolute; inset: -2px auto auto 0; width: 5px; height: 5px; border-radius: 50%; background: #58b5df; box-shadow: 0 0 10px #58b5df; }
.handoff-signal { position: absolute; top: -4px; left: 3%; width: 9px; height: 9px; border: 1px solid #dbdbdb; transform: rotate(45deg); background: #0a0b0d; box-shadow: 0 0 12px #c3c3c3; transition: left .7s var(--bo-ease), border-color .35s ease; }
.approval-gate { position: absolute; left: 57%; top: -1.55rem; padding: .25rem .35rem; border: 1px solid #484848; background: #080a0c; color: #717171; font: 500 .39rem/1 var(--bo-font-data); letter-spacing: .08em; white-space: nowrap; }
.fleet-rest-frame { position: absolute; z-index: 5; left: 12%; bottom: 7%; width: 31%; opacity: 0; pointer-events: none; }.fleet-rest-frame img { width: 100%; height: auto; filter: saturate(.8) brightness(.72) drop-shadow(0 15px 18px #000); }
.fleet-stage[data-phase="teaser"] .phase-bot { opacity: .7; filter: brightness(.82) saturate(.8); animation: crew-idle 2.8s ease-in-out infinite alternate; }.fleet-stage[data-phase="teaser"] .bot-curate { animation-delay: -.8s; }.fleet-stage[data-phase="teaser"] .bot-prototype { animation-delay: -1.6s; }
.fleet-stage[data-phase="parsing"] .bot-inputs { opacity: 1; filter: brightness(1.04) saturate(1.08); animation: bot-work .62s ease-in-out infinite alternate; transform: translateY(-5px); }.fleet-stage[data-phase="parsing"] .handoff-signal { animation: handoff-one 2.7s var(--bo-ease) forwards; border-color: #65bfe8; }
.fleet-stage[data-phase="review"] .bot-curate { opacity: 1; filter: brightness(1.02) saturate(1.04); transform: translateY(-5px); }.fleet-stage[data-phase="review"] .handoff-signal { left: 57%; border-color: var(--bo-gold); animation: gate-wait 1.2s ease-in-out infinite alternate; }.fleet-stage[data-phase="review"] .approval-gate { color: #d2d2d2; border-color: #8d8d8d; box-shadow: 0 0 10px #aaaaaa26; }
.fleet-stage[data-phase="building"] .bot-prototype { opacity: 1; filter: brightness(1.05) saturate(1.08); animation: bot-work .52s ease-in-out infinite alternate; transform: translateY(-5px); }.fleet-stage[data-phase="building"] .handoff-signal { animation: handoff-two 1.1s var(--bo-ease) forwards; border-color: #ef61ce; }
.fleet-stage[data-phase="complete"] .phase-crew, .fleet-stage[data-phase="complete"] .handoff-track { opacity: 0; }.fleet-stage[data-phase="complete"] .fleet-rest-frame { opacity: .85; animation: fleet-settle-small .65s var(--bo-ease) both; }
.fleet-status { z-index: 9; }
@keyframes crew-idle { to { transform: translateY(-3px); filter: brightness(.9) saturate(.9); } }
@keyframes bot-work { from { transform: translateY(-3px) rotate(-.5deg); } to { transform: translateY(-8px) rotate(.5deg); filter: brightness(1.16) saturate(1.18) drop-shadow(0 0 9px currentColor); } }
@keyframes handoff-one { 0%,48% { left: 3%; } 82%,100% { left: 57%; } }
@keyframes handoff-two { from { left: 57%; } to { left: 94%; } }
@keyframes gate-wait { to { box-shadow: 0 0 18px #c0c0c0; transform: rotate(225deg) scale(1.12); } }
@media (max-width: 720px) { .dispatch-teaser .model-build { right: -5%; top: 13%; width: 57%; }.phase-bot { width: 17%; bottom: 16%; }.bot-inputs { left: 1%; }.bot-curate { left: 16%; }.bot-prototype { left: 31%; }.handoff-track { left: 5%; right: 50%; bottom: 13%; }.phase-bot figcaption span { display: none; }.fleet-rest-frame { left: 4%; bottom: 12%; width: 38%; } }
@media (prefers-reduced-motion: reduce) { .phase-bot, .handoff-signal { animation: none !important; } }

/* V10 vertical B stance, conveyor motion, and human-first gates */
.dispatch-teaser .model-build { right: -2%; top: 1%; width: 58%; filter: drop-shadow(0 22px 26px #000); }
.phase-bot { bottom: 14%; width: 9.5%; transform: perspective(500px) rotateX(10deg) rotateZ(-7deg) translateY(3px); transform-origin: 50% 82%; }
.bot-inputs { left: 7%; }.bot-curate { left: 30%; }.bot-prototype { left: 53%; }
.phase-bot::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 1.15rem; height: 9px; border-radius: 50%; background: #000; filter: blur(5px); opacity: .7; transform: rotateZ(7deg); }
.phase-bot img, .phase-bot figcaption { position: relative; z-index: 1; }
.handoff-track { left: 11%; right: 34%; bottom: 10%; height: 5px; border-top: 1px solid #757575; border-bottom: 1px solid #302817; overflow: visible; background: repeating-linear-gradient(90deg,#838383 0 8px,transparent 8px 19px); animation: conveyor-run .6s linear infinite; transform: perspective(380px) rotateX(56deg); transform-origin: bottom; }
.handoff-track::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 6px; background: repeating-linear-gradient(90deg,#46391e 0 2px,transparent 2px 13px); opacity: .65; }
.fleet-stage[data-phase="parsing"] .bot-inputs { animation: grid-churn 2.75s var(--bo-ease) forwards; }
.fleet-stage[data-phase="review"] .bot-curate { transform: perspective(500px) rotateX(0) rotateZ(0) translateY(-9px) scale(1.06); animation: gate-breathe 1.2s ease-in-out infinite alternate; }
.fleet-stage[data-phase="building"] .bot-prototype { animation: spark-receive 1.2s var(--bo-ease) forwards, bot-work .5s ease-in-out 1.2s infinite alternate; }
.gate-action { position: absolute; top: .7rem; right: 1rem; width: min(310px,42%); display: grid; justify-items: stretch; gap: .35rem; }
.gate-action > span { color: #c8c8c8; font: 500 .65rem/1.25 var(--bo-font-data); letter-spacing: .06em; text-align: center; }
.gate-action .approve-primary { position: static; width: 100%; min-height: 58px; padding: .9rem 1rem; border: 1px solid #d8d8d8; background: linear-gradient(135deg,#d2d2d2,#989898); color: #070809; box-shadow: 8px 9px 0 #000, 0 0 0 1px #5e5e5e, 0 0 24px #aeaeae60; font-size: .7rem; line-height: 1.25; text-align: center; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.gate-action .approve-primary:hover, .gate-action .approve-primary:focus-visible { transform: translateY(-3px); filter: brightness(1.12); box-shadow: 8px 12px 0 #000, 0 0 0 2px #f2f2f2, 0 0 32px #aeaeae80; outline: 0; }
.gate-action .approve-primary:active { transform: translateY(2px); box-shadow: 4px 4px 0 #000; }
.gate-action .approve-primary b { margin-left: .4rem; font-size: .9rem; }
.gate-action small { margin: 0; color: #6f6c64; font: 400 .5rem/1.2 var(--bo-font-data); text-align: center; }
.dispatch-screen[data-screen="review"] .result-grid, .dispatch-screen[data-screen="review"] .source-proof { width: calc(58% - .75rem); }
.dispatch-screen[data-screen="review"] .source-proof { grid-template-columns: auto 1fr; }.dispatch-screen[data-screen="review"] .source-proof em { grid-column: 1/-1; }
.power-control { min-width: 112px; min-height: 44px; border-color: #7d7d7d; font-size: .63rem; }.power-control:focus-visible { outline: 2px solid #dcdcdc; outline-offset: 3px; }
@keyframes conveyor-run { to { background-position: 19px 0; } }
@keyframes grid-churn { 0%,48% { opacity: 1; filter: brightness(1.05) saturate(1.1); transform: perspective(500px) rotateX(0) rotateZ(0) translateY(-9px) scale(1.06); } 72% { transform: perspective(500px) rotateX(0) rotateZ(0) translate3d(120%,-9px,15px) scale(.96); } 100% { opacity: .45; transform: perspective(500px) rotateX(0) rotateZ(0) translate3d(235%,-3px,0) scale(.84); } }
@keyframes spark-receive { 0% { opacity: .25; transform: perspective(500px) rotateX(10deg) rotateZ(-7deg) translate3d(-215%,3px,0) scale(.8); } 45% { opacity: 1; transform: perspective(500px) rotateX(0) rotateZ(0) translate3d(-35%,-8px,18px) scale(1.04); } 100% { opacity: 1; transform: perspective(500px) rotateX(0) rotateZ(0) translate3d(0,-9px,18px) scale(1.06); } }
@keyframes gate-breathe { to { filter: brightness(1.14) saturate(1.12) drop-shadow(0 0 8px currentColor); } }
@media (max-width: 720px) { .dispatch-teaser .model-build { right: -10%; top: 7%; width: 63%; }.phase-bot { width: 11%; bottom: 17%; }.bot-inputs { left: 3%; }.bot-curate { left: 22%; }.bot-prototype { left: 41%; }.handoff-track { left: 7%; right: 47%; bottom: 13%; }.gate-action { position: static; width: 100%; margin: .55rem 0; }.dispatch-screen[data-screen="review"] .result-grid, .dispatch-screen[data-screen="review"] .source-proof { width: 100%; }.gate-action .approve-primary { min-height: 54px; }.dispatch-screen[data-screen="review"] { overflow-y: auto; } }
@media (prefers-reduced-motion: reduce) { .handoff-track, .fleet-stage[data-phase="parsing"] .bot-inputs, .fleet-stage[data-phase="review"] .bot-curate, .fleet-stage[data-phase="building"] .bot-prototype { animation: none !important; } }

/* V11 data-center build sequence and interactive decision tray */
.sound-control { min-width: 102px; min-height: 40px; margin-left: auto; padding: 0 .7rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid #3b3e45; background: #0a0c0f; color: #85888b; cursor: pointer; font: 500 .56rem/1 var(--bo-font-data); letter-spacing: .08em; text-transform: uppercase; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.sound-control i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }.sound-control:hover, .sound-control[aria-pressed="true"] { border-color: #63b8e8; background: #0c151c; color: #a9d8ee; }.sound-control[aria-pressed="true"] i { background: #63b8e8; box-shadow: 0 0 10px #63b8e8; }.sound-control:focus-visible { outline: 2px solid #a9d8ee; outline-offset: 3px; }
.dispatch-teaser .model-build.dc-model { right: -1%; top: 2%; width: 61%; aspect-ratio: 1.1; transform: rotateX(58deg) rotateZ(-31deg); filter: drop-shadow(0 26px 30px #000b); }
.dc-floor { position: absolute; inset: 10% 8% 14% 6%; display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(3,1fr); gap: 2px; }
.dc-floor i { display: block; opacity: 0; border: 1px solid #b8b8b8; background: repeating-linear-gradient(90deg,#b2b2b21b 0 1px,transparent 1px 15px), repeating-linear-gradient(#b2b2b216 0 1px,transparent 1px 15px), linear-gradient(145deg,#9999993d,#15171633); box-shadow: inset 0 0 12px #c9c9c940; transform: translateZ(-8px) scale(.84); }
.dc-walls { position: absolute; inset: 6% 5% 10%; pointer-events: none; }.dc-walls i { position: absolute; opacity: 0; border: 1px solid #82c7e1; background: linear-gradient(135deg,#6fc3e21b,#4c91ba12); box-shadow: inset 0 0 14px #63b8e829; }.wall-back { left: 6%; right: 8%; top: 1%; height: 18%; }.wall-right { top: 7%; right: 0; bottom: 16%; width: 15%; }.wall-front { left: 6%; right: 8%; bottom: 0; height: 12%; }
.dc-structure { position: absolute; inset: 11% 10% 15% 9%; display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(3,1fr); }.dc-structure i { justify-self: center; align-self: center; width: 3px; height: 34px; opacity: 0; background: linear-gradient(#d7d7d7,#6c6c6c); box-shadow: 0 0 6px #b5b5b5; transform: translateZ(22px) scaleY(.3); }
.rack-hall { position: absolute; left: 19%; top: 28%; width: 52%; height: 43%; display: grid; grid-template-columns: repeat(6,1fr); grid-template-rows: repeat(3,1fr); gap: 3px; }
.rack-hall i { opacity: 0; border: 1px solid #a5d9e8; background: repeating-linear-gradient(#c7f3ff55 0 2px,transparent 2px 5px), linear-gradient(90deg,#173d4caa,#081115c7); box-shadow: 0 0 5px #63b8e855; transform: translateZ(28px) scaleY(.2); }
.dc-equipment { position: absolute; right: 10%; bottom: 17%; width: 20%; height: 25%; }.dc-equipment i { position: absolute; opacity: 0; border: 1px solid #b9b9b9; background: linear-gradient(145deg,#2c3338,#101317); box-shadow: 0 0 8px #b9b9b944; transform: translateZ(25px) scale(.5); }.ups-one { left: 0; top: 0; width: 44%; height: 47%; }.ups-two { right: 0; top: 0; width: 44%; height: 47%; }.chiller-one { left: 0; bottom: 0; width: 44%; height: 39%; }.chiller-two { right: 0; bottom: 0; width: 44%; height: 39%; }
.power-yard { position: absolute; right: -4%; top: 11%; width: 20%; height: 24%; }.power-yard i { position: absolute; opacity: 0; border: 1px solid #cacaca; background: linear-gradient(145deg,#4c3b1c,#15130d); box-shadow: 0 0 8px #bebebe66; transform: translateZ(30px) scale(.45); }.transformer-one { left: 0; top: 0; width: 42%; height: 65%; }.transformer-two { right: 0; top: 0; width: 42%; height: 65%; }.switchgear { left: 18%; bottom: 0; width: 64%; height: 26%; }
.power-circuits { position: absolute; inset: 22% 12% 24% 12%; pointer-events: none; }.power-circuits i { position: absolute; width: 2px; opacity: 0; background: #dedede; box-shadow: 0 0 9px #cccccc; }.power-circuits i:nth-child(1) { left: 16%; top: -10%; height: 82%; }.power-circuits i:nth-child(2) { left: 52%; top: 0; height: 68%; }.power-circuits i:nth-child(3) { left: 82%; top: -6%; height: 78%; }
.power-b { position: absolute; z-index: 3; right: -12%; bottom: 13%; width: 23%; opacity: 0; transform: translate3d(90%,35%,50px) rotateZ(22deg) scale(.45); filter: drop-shadow(0 0 10px #aaaaaa55); }.power-b img { width: 100%; height: auto; }
.dc-model .scan-plane { opacity: 0; inset: 8% 4% 12%; }
.fleet-stage[data-phase="building"] .dc-floor i { animation: floor-block-in .42s var(--bo-ease) forwards; }.fleet-stage[data-phase="building"] .dc-floor i:nth-child(2) { animation-delay:.13s; }.fleet-stage[data-phase="building"] .dc-floor i:nth-child(3) { animation-delay:.26s; }.fleet-stage[data-phase="building"] .dc-floor i:nth-child(4) { animation-delay:.39s; }.fleet-stage[data-phase="building"] .dc-floor i:nth-child(5) { animation-delay:.52s; }.fleet-stage[data-phase="building"] .dc-floor i:nth-child(6) { animation-delay:.65s; }.fleet-stage[data-phase="building"] .dc-floor i:nth-child(7) { animation-delay:.78s; }.fleet-stage[data-phase="building"] .dc-floor i:nth-child(8) { animation-delay:.91s; }.fleet-stage[data-phase="building"] .dc-floor i:nth-child(9) { animation-delay:1.04s; }.fleet-stage[data-phase="building"] .dc-floor i:nth-child(10) { animation-delay:1.17s; }.fleet-stage[data-phase="building"] .dc-floor i:nth-child(11) { animation-delay:1.3s; }.fleet-stage[data-phase="building"] .dc-floor i:nth-child(12) { animation-delay:1.43s; }
.fleet-stage[data-phase="building"] .dc-walls i { animation: wall-rise .65s var(--bo-ease) 1.55s forwards; }.fleet-stage[data-phase="building"] .wall-right { animation-delay:1.72s; }.fleet-stage[data-phase="building"] .wall-front { animation-delay:1.89s; }
.fleet-stage[data-phase="building"] .dc-structure i { animation: structure-in .35s var(--bo-ease) 1.88s forwards; }.fleet-stage[data-phase="building"] .dc-structure i:nth-child(2n) { animation-delay:2.02s; }.fleet-stage[data-phase="building"] .dc-structure i:nth-child(3n) { animation-delay:2.16s; }
.fleet-stage[data-phase="building"] .rack-hall i { animation: rack-in .27s var(--bo-ease) 2.15s forwards; }.fleet-stage[data-phase="building"] .rack-hall i:nth-child(3n) { animation-delay:2.35s; }.fleet-stage[data-phase="building"] .rack-hall i:nth-child(4n) { animation-delay:2.55s; }
.fleet-stage[data-phase="building"] .dc-equipment i { animation: equipment-in .45s var(--bo-ease) 2.8s forwards; }.fleet-stage[data-phase="building"] .dc-equipment .ups-two { animation-delay:2.98s; }.fleet-stage[data-phase="building"] .dc-equipment .chiller-one { animation-delay:3.16s; }.fleet-stage[data-phase="building"] .dc-equipment .chiller-two { animation-delay:3.34s; }
.fleet-stage[data-phase="building"] .power-yard i { animation: equipment-in .45s var(--bo-ease) 3.45s forwards; }.fleet-stage[data-phase="building"] .power-yard .transformer-two { animation-delay:3.64s; }.fleet-stage[data-phase="building"] .power-yard .switchgear { animation-delay:3.83s; }
.fleet-stage[data-phase="building"] .power-b { animation: power-kick .75s var(--bo-ease) 4.05s forwards; }.fleet-stage[data-phase="building"] .power-circuits i { animation: circuit-on .5s ease 4.6s forwards; }.fleet-stage[data-phase="building"] .power-circuits i:nth-child(2) { animation-delay:4.78s; }.fleet-stage[data-phase="building"] .power-circuits i:nth-child(3) { animation-delay:4.96s; }.fleet-stage[data-phase="building"] .dc-model .scan-plane { animation: scan-build 1.3s ease 4.45s infinite; }
.fleet-stage[data-phase="complete"] .dc-floor i { opacity:.82; transform:translateZ(-8px) scale(1); }.fleet-stage[data-phase="complete"] .dc-walls i { opacity:.37; }.fleet-stage[data-phase="complete"] .dc-structure i { opacity:.9; transform:translateZ(22px) scaleY(1); }.fleet-stage[data-phase="complete"] .rack-hall i { opacity:.85; transform:translateZ(28px) scaleY(1); }.fleet-stage[data-phase="complete"] .dc-equipment i, .fleet-stage[data-phase="complete"] .power-yard i { opacity:.9; transform:translateZ(25px) scale(1); }.fleet-stage[data-phase="complete"] .power-b { opacity:1; transform:translate3d(0,0,50px) rotateZ(0) scale(1); }.fleet-stage[data-phase="complete"] .power-circuits i { opacity:1; }.fleet-stage[data-phase="complete"] .dc-model .scan-plane { opacity:.4; }
.dispatch-screen[data-screen="review"] { position:relative; }
.gate-action { top:auto; bottom:.75rem; right:1rem; width:min(330px,44%); padding:.65rem; border:1px solid #5f5f5f; background:linear-gradient(145deg,#13130e,#090a0b); box-shadow:0 10px 22px #0008; }.gate-action > span { font-size:.6rem; }.gate-action .approve-primary { min-height:56px; }.gate-action small { display:flex; justify-content:center; align-items:center; gap:.35rem; }.gate-action kbd { padding:.12rem .25rem; border:1px solid #605a4c; border-bottom-color:#292821; background:#1b1b18; color:#d0d0d0; font:500 .48rem/1 var(--bo-font-data); }
.dispatch-screen[data-screen="review"] .result-grid { margin-top:.6rem; }.dispatch-screen[data-screen="review"] .source-proof { margin-top:.4rem; }
@keyframes floor-block-in { to { opacity:.86; transform:translateZ(-8px) scale(1); } } @keyframes wall-rise { to { opacity:.36; } } @keyframes structure-in { to { opacity:.9; transform:translateZ(22px) scaleY(1); } } @keyframes rack-in { to { opacity:.85; transform:translateZ(28px) scaleY(1); } } @keyframes equipment-in { to { opacity:.9; transform:translateZ(25px) scale(1); } } @keyframes power-kick { 58% { opacity:1; transform:translate3d(4%,0,50px) rotateZ(-7deg) scale(1.04); } to { opacity:1; transform:translate3d(0,0,50px) rotateZ(0) scale(1); } } @keyframes circuit-on { 0% { opacity:0; transform:scaleY(.05); transform-origin:bottom; } 60% { opacity:1; } to { opacity:.85; transform:scaleY(1); transform-origin:bottom; } }
@media (max-width:720px) { .sound-control { min-width:auto; padding:0 .45rem; }.sound-control span { display:none; }.dispatch-teaser .model-build.dc-model { right:-16%; width:73%; }.gate-action { position:static; width:100%; margin:.55rem 0 0; }.dispatch-panel { min-height:310px; }.dispatch-screen[data-screen="review"] { min-height:220px; }.dc-equipment { display:none; } }
@media (prefers-reduced-motion:reduce) { .fleet-stage[data-phase="building"] .dc-model * { animation:none !important; }.fleet-stage[data-phase="building"] .dc-floor i, .fleet-stage[data-phase="building"] .dc-walls i, .fleet-stage[data-phase="building"] .dc-structure i, .fleet-stage[data-phase="building"] .rack-hall i, .fleet-stage[data-phase="building"] .dc-equipment i, .fleet-stage[data-phase="building"] .power-yard i, .fleet-stage[data-phase="building"] .power-circuits i, .fleet-stage[data-phase="building"] .power-b { opacity:.85; transform:none; } }

/* Active crew turns toward the production line before moving right. */
.fleet-stage[data-phase="review"] .bot-curate { transform:perspective(500px) rotateY(-18deg) rotateX(0) rotateZ(0) translateY(-9px) scaleX(-1) scale(1.06); }
@keyframes grid-churn { 0%,48% { opacity:1; filter:brightness(1.05) saturate(1.1); transform:perspective(500px) rotateY(-18deg) rotateX(0) rotateZ(0) translateY(-9px) scaleX(-1) scale(1.06); } 72% { transform:perspective(500px) rotateY(-18deg) rotateX(0) rotateZ(0) translate3d(120%,-9px,15px) scaleX(-1) scale(.96); } 100% { opacity:.45; transform:perspective(500px) rotateY(-18deg) rotateX(0) rotateZ(0) translate3d(235%,-3px,0) scaleX(-1) scale(.84); } }
@keyframes spark-receive { 0% { opacity:.25; transform:perspective(500px) rotateY(-18deg) rotateX(10deg) rotateZ(-7deg) translate3d(-215%,3px,0) scaleX(-1) scale(.8); } 45% { opacity:1; transform:perspective(500px) rotateY(-18deg) rotateX(0) rotateZ(0) translate3d(-35%,-8px,18px) scaleX(-1) scale(1.04); } 100% { opacity:1; transform:perspective(500px) rotateY(-18deg) rotateX(0) rotateZ(0) translate3d(0,-9px,18px) scaleX(-1) scale(1.06); } }
@keyframes bot-work { from { transform:perspective(500px) rotateY(-18deg) translateY(-4px) scaleX(-1) scale(1.03); } to { transform:perspective(500px) rotateY(-18deg) translateY(-10px) scaleX(-1) scale(1.07); filter:brightness(1.16) saturate(1.18) drop-shadow(0 0 9px currentColor); } }

/* V12 estimator-hero intake, larger dispatch canvas, and bounded UI copy */
.hero { height:auto; max-height:none; min-height:calc(100svh - 74px); grid-template-columns:minmax(385px,.64fr) minmax(690px,1.36fr); gap:clamp(1.5rem,3.2vw,4rem); }
.dispatch-teaser { height:min(88svh,880px); min-height:712px; grid-template-rows:62px 48px minmax(310px,1fr) 292px; }
.dispatch-teaser:not(.is-locked) { grid-template-rows:62px 48px minmax(310px,1fr) 292px; }
.dispatch-panel { height:292px; min-height:292px; overflow:hidden; }
.dispatch-screen[data-screen="review"] { min-height:174px; }

/* Keep every datum within the interface frame at desktop and narrow widths. */
.dispatch-teaser, .dispatch-teaser * { min-width:0; }
.dispatch-head { gap:.65rem; }
.dispatch-head > div { flex:1 1 auto; min-width:0; }
.dispatch-head > div span, .dispatch-head > div b, .phase-rail span, .dispatch-steps span, .fleet-status span, .teaser-caption, .screen-kicker, .source-proof, .source-proof *, .gate-action, .gate-action *, .phase-bot figcaption, .phase-bot figcaption * { max-inline-size:100%; overflow-wrap:anywhere; }
.sound-control, .power-control { flex:0 1 auto; max-width:44%; white-space:normal; }
.approval-gate { width:min(124px,28%); white-space:normal; text-align:center; }
.gate-action .approve-primary { white-space:normal; overflow-wrap:anywhere; }

/* The constant upright B replaces the old resting O at the dispatch origin. */
.dispatch-teaser .mark-console.buildonto-badge { top:.85rem; left:.85rem; width:80px; min-height:86px; padding:.62rem; display:grid; justify-items:center; align-content:center; gap:.42rem; transform:none; border-color:#5a5a5a; background:linear-gradient(145deg,#12120d,#07090b); box-shadow:8px 9px 0 #000, inset 0 1px #cfcfcf19; }
.buildonto-badge img { width:42px; height:auto; display:block; filter:drop-shadow(3px 4px 0 #000) drop-shadow(0 0 9px #b6b6b655); }
.buildonto-badge .phase-label { margin:0; max-width:100%; color:#c5c5c5; font-size:.48rem; line-height:1.2; text-align:center; overflow-wrap:anywhere; }

/* Faint project-input bubbles enter from beyond the screen and resolve at Grid. */
.uniformat-stream { position:absolute; z-index:4; left:-12%; top:14%; width:44%; height:68%; pointer-events:none; }
.intake-chip { --chip-tilt:0deg; position:absolute; left:0; width:max-content; max-width:94%; display:grid; gap:.16rem; padding:.38rem .52rem; border:1px solid #5d7e886e; background:linear-gradient(135deg,#0b1619aa,#0a0d10a8); box-shadow:0 5px 15px #0006, inset 0 1px #b9e1ec12; opacity:0; color:#c9e7ee; font-family:var(--bo-font-data); transform:translateX(-120%) rotate(var(--chip-tilt)); backdrop-filter:blur(5px); }
.intake-chip b { color:#73bfdb; font-size:.46rem; font-weight:500; letter-spacing:.08em; line-height:1.2; overflow-wrap:anywhere; }.intake-chip em { color:#bac0ba; font-size:.57rem; font-style:normal; line-height:1.2; overflow-wrap:anywhere; }
.chip-foundation { --chip-tilt:-4deg; top:7%; left:8%; }.chip-slab { --chip-tilt:2deg; top:24%; left:20%; }.chip-rate { --chip-tilt:-2deg; top:38%; left:5%; }.chip-access { --chip-tilt:3deg; top:53%; left:24%; }.chip-permit { --chip-tilt:-3deg; top:67%; left:8%; }.chip-racks { --chip-tilt:2deg; top:76%; left:28%; }.chip-equipment { --chip-tilt:-1deg; top:87%; left:3%; }
.fleet-stage[data-phase="parsing"] .intake-chip { animation:uniformat-intake 1.34s var(--bo-ease) forwards; }.fleet-stage[data-phase="parsing"] .chip-slab { animation-delay:.12s; }.fleet-stage[data-phase="parsing"] .chip-rate { animation-delay:.24s; }.fleet-stage[data-phase="parsing"] .chip-access { animation-delay:.36s; }.fleet-stage[data-phase="parsing"] .chip-permit { animation-delay:.48s; }.fleet-stage[data-phase="parsing"] .chip-racks { animation-delay:.60s; }.fleet-stage[data-phase="parsing"] .chip-equipment { animation-delay:.72s; }
.phase-bot::before { content:""; position:absolute; z-index:0; left:12%; top:21%; width:72%; aspect-ratio:1; border:1px solid transparent; border-radius:50%; opacity:0; }
.fleet-stage[data-phase="parsing"] .bot-inputs::before { animation:grid-intake-ring .72s ease-in-out infinite alternate; }
@keyframes uniformat-intake { 0% { opacity:0; transform:translateX(-120%) rotate(var(--chip-tilt)) scale(.86); } 20% { opacity:.38; } 67% { opacity:.27; transform:translateX(48%) rotate(0deg) scale(.72); } 100% { opacity:0; transform:translateX(105%) rotate(0deg) scale(.24); } }
@keyframes grid-intake-ring { from { opacity:.12; transform:scale(.7); border-color:#65bfe8; box-shadow:0 0 0 #65bfe8; } to { opacity:.46; transform:scale(1.22); border-color:#c2edfc; box-shadow:0 0 16px #63b8e8; } }

/* The lower readout makes the output explicitly quantity-and-cost by Uniformat. */
.ingest-ledger { margin-top:.68rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.42rem; }
.ingest-ledger div { min-width:0; padding:.5rem .55rem; border:1px solid #2f4650; background:linear-gradient(145deg,#0c1419,#090b0e); box-shadow:inset 0 1px #8fcce00f; }
.ingest-ledger span, .ingest-ledger b { display:block; min-width:0; overflow-wrap:anywhere; font-family:var(--bo-font-data); line-height:1.3; }
.ingest-ledger span { color:#72bcd7; font-size:.51rem; letter-spacing:.055em; }.ingest-ledger b { margin-top:.25rem; color:#d9d4c5; font-size:.61rem; font-weight:500; }
.dispatch-screen[data-screen="parsing"] > p { max-width:680px; margin-top:.5rem; }

/* Each hero has a distinct three-dimensional posture at its actual responsibility. */
.fleet-stage[data-phase="teaser"] .bot-inputs { animation:grid-ready-v12 3.1s var(--bo-ease) infinite alternate; }.fleet-stage[data-phase="teaser"] .bot-curate { animation:rivet-ready-v12 3.45s var(--bo-ease) -.8s infinite alternate; }.fleet-stage[data-phase="teaser"] .bot-prototype { animation:spark-ready-v12 2.75s var(--bo-ease) -1.25s infinite alternate; }
.fleet-stage[data-phase="parsing"] .bot-inputs { opacity:1; filter:brightness(1.08) saturate(1.12); animation:grid-ingest-v12 2.75s var(--bo-ease) forwards; }
.fleet-stage[data-phase="review"] .bot-curate { opacity:1; filter:brightness(1.08) saturate(1.08); transform:perspective(700px) rotateY(-27deg) rotateX(-4deg) rotateZ(-2deg) translate3d(0,-7px,15px) scaleX(-1) scale(1.05); animation:rivet-gate-v12 1.15s ease-in-out infinite alternate; }
.fleet-stage[data-phase="building"] .bot-prototype { opacity:1; filter:brightness(1.08) saturate(1.12); animation:spark-receive-v12 1.16s var(--bo-ease) forwards, spark-build-v12 .58s ease-in-out 1.16s infinite alternate; }
@keyframes grid-ready-v12 { from { transform:perspective(660px) rotateY(-10deg) rotateX(7deg) rotateZ(-7deg) translate3d(0,2px,0) scale(.96); } to { transform:perspective(660px) rotateY(-19deg) rotateX(12deg) rotateZ(-4deg) translate3d(6px,-7px,12px) scale(1.01); filter:brightness(.96) saturate(.93); } }
@keyframes rivet-ready-v12 { from { transform:perspective(660px) rotateY(-2deg) rotateX(4deg) rotateZ(-3deg) translate3d(0,2px,0) scale(.95); } to { transform:perspective(660px) rotateY(-14deg) rotateX(-3deg) rotateZ(1deg) translate3d(-2px,-5px,12px) scale(1); filter:brightness(.98); } }
@keyframes spark-ready-v12 { from { transform:perspective(660px) rotateY(-16deg) rotateX(9deg) rotateZ(-8deg) translate3d(0,3px,0) scale(.94); } to { transform:perspective(660px) rotateY(-29deg) rotateX(5deg) rotateZ(-3deg) translate3d(8px,-6px,16px) scale(1.01); filter:brightness(1.02) saturate(.98); } }
@keyframes grid-ingest-v12 { 0%,42% { transform:perspective(700px) rotateY(-24deg) rotateX(9deg) rotateZ(-5deg) translate3d(0,-4px,0) scaleX(-1) scale(1.05); } 68% { transform:perspective(700px) rotateY(-31deg) rotateX(14deg) rotateZ(-8deg) translate3d(120%,-10px,24px) scaleX(-1) scale(.98); } 100% { opacity:.45; transform:perspective(700px) rotateY(-20deg) rotateX(8deg) rotateZ(-3deg) translate3d(235%,-3px,0) scaleX(-1) scale(.82); } }
@keyframes rivet-gate-v12 { from { transform:perspective(700px) rotateY(-22deg) rotateX(-2deg) rotateZ(-1deg) translate3d(0,-4px,12px) scaleX(-1) scale(1.02); } to { transform:perspective(700px) rotateY(-33deg) rotateX(-7deg) rotateZ(-4deg) translate3d(-3px,-11px,23px) scaleX(-1) scale(1.08); filter:brightness(1.17) saturate(1.15) drop-shadow(0 0 9px currentColor); } }
@keyframes spark-receive-v12 { 0% { opacity:.25; transform:perspective(700px) rotateY(-26deg) rotateX(12deg) rotateZ(-8deg) translate3d(-215%,3px,0) scaleX(-1) scale(.78); } 48% { opacity:1; transform:perspective(700px) rotateY(-33deg) rotateX(6deg) rotateZ(-2deg) translate3d(-35%,-8px,22px) scaleX(-1) scale(1.04); } 100% { opacity:1; transform:perspective(700px) rotateY(-31deg) rotateX(4deg) rotateZ(2deg) translate3d(0,-9px,26px) scaleX(-1) scale(1.07); } }
@keyframes spark-build-v12 { from { transform:perspective(700px) rotateY(-28deg) rotateX(5deg) rotateZ(-2deg) translate3d(1px,-4px,22px) scaleX(-1) scale(1.04); } to { transform:perspective(700px) rotateY(-38deg) rotateX(1deg) rotateZ(4deg) translate3d(11px,-12px,32px) scaleX(-1) scale(1.1); filter:brightness(1.17) saturate(1.18) drop-shadow(0 0 10px currentColor); } }

/* Fleet-motion reference in the design kit. */
.fleet-motion-grid { margin-top:1.5rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #34363a; border-left:1px solid #34363a; }
.fleet-motion-card { position:relative; min-width:0; min-height:220px; padding:1rem; display:grid; grid-template-columns:minmax(0,105px) minmax(0,1fr); align-items:center; gap:.85rem; overflow:hidden; border-right:1px solid #34363a; border-bottom:1px solid #34363a; background:radial-gradient(circle at 24% 45%,#1b2d382f,transparent 42%),#090b0e; }
.fleet-motion-card img { position:relative; z-index:1; width:100%; height:auto; filter:drop-shadow(0 13px 13px #000); }
.fleet-motion-card div { min-width:0; }.fleet-motion-card span { display:block; color:#b9b9b9; font:500 .61rem/1.3 var(--bo-font-data); letter-spacing:.08em; overflow-wrap:anywhere; }.fleet-motion-card p { margin:.5rem 0 0; color:#a09d95; font-size:.82rem; line-height:1.45; overflow-wrap:anywhere; }

@media (max-width:1180px) { .hero { grid-template-columns:1fr; }.dispatch-teaser { width:min(960px,100%); }.hero-copy { max-width:760px; } }
@media (max-width:720px) { .hero { padding:3.5rem 4vw 4rem; }.dispatch-teaser { width:100%; height:auto; min-height:0; grid-template-rows:58px 46px minmax(330px,1fr) auto; }.dispatch-teaser:not(.is-locked) { grid-template-rows:58px 46px minmax(330px,1fr) auto; }.dispatch-teaser.is-locked { min-height:500px; }.dispatch-panel { height:auto; min-height:290px; overflow:visible; }.dispatch-screen[data-screen="review"] { min-height:0; }.uniformat-stream { left:-32%; top:11%; width:74%; }.intake-chip { max-width:92%; }.intake-chip b { font-size:.42rem; }.intake-chip em { font-size:.52rem; }.ingest-ledger { grid-template-columns:1fr; gap:.32rem; }.ingest-ledger div { padding:.38rem .48rem; }.dispatch-screen[data-screen="parsing"] > p { font-size:.76rem; line-height:1.4; }.dispatch-teaser .mark-console.buildonto-badge { width:62px; min-height:68px; padding:.42rem; }.buildonto-badge img { width:31px; }.buildonto-badge .phase-label { font-size:.39rem; }.approval-gate { display:none; }.fleet-motion-grid { grid-template-columns:1fr; }.fleet-motion-card { min-height:170px; grid-template-columns:92px minmax(0,1fr); }.fleet-motion-card p { font-size:.78rem; } }
@media (prefers-reduced-motion:reduce) { .fleet-stage[data-phase="parsing"] .intake-chip, .fleet-stage[data-phase="parsing"] .bot-inputs, .fleet-stage[data-phase="review"] .bot-curate, .fleet-stage[data-phase="building"] .bot-prototype, .fleet-stage[data-phase="teaser"] .phase-bot { animation:none !important; }.uniformat-stream { opacity:.38; }.intake-chip { opacity:.3; transform:none; }.fleet-stage[data-phase="parsing"] .bot-inputs, .fleet-stage[data-phase="review"] .bot-curate, .fleet-stage[data-phase="building"] .bot-prototype { opacity:1; transform:perspective(700px) rotateY(-18deg) rotateX(4deg) translateY(-5px) scaleX(-1) !important; } }

/* V13: reconciled historical forecast and a true 3D-to-4D build sequence. */
html { font-synthesis:none; }
.dispatch-teaser { font-family:var(--bo-font-body); }
.dispatch-head, .phase-rail, .dispatch-steps, .fleet-status, .teaser-caption, .screen-kicker, .ingest-ledger, .forecast-strip, .cost-dimension, .cost-ticks { font-family:var(--bo-font-data); }

/* A denser, faint upstream stream: history, parameters, quantities, and rates. */
.uniformat-stream { left:-16%; top:4%; width:55%; height:92%; }
.intake-chip { max-width:96%; padding:.31rem .45rem; background:linear-gradient(135deg,#0b1519a8,#090b0fa1); }
.intake-chip b { font-size:.43rem; }.intake-chip em { font-size:.54rem; }
.chip-history { --chip-tilt:-5deg; top:1%; left:3%; }.chip-scale { --chip-tilt:3deg; top:10%; left:32%; }.chip-escalation { --chip-tilt:-3deg; top:19%; left:5%; }.chip-access-adjust { --chip-tilt:4deg; top:28%; left:29%; }.chip-foundation { --chip-tilt:-4deg; top:38%; left:1%; }.chip-slab { --chip-tilt:2deg; top:48%; left:26%; }.chip-rate { --chip-tilt:-2deg; top:58%; left:3%; }.chip-access { --chip-tilt:3deg; top:68%; left:28%; }.chip-permit { --chip-tilt:-3deg; top:77%; left:4%; }.chip-racks { --chip-tilt:2deg; top:86%; left:28%; }.chip-equipment { --chip-tilt:-1deg; top:93%; left:2%; }
.fleet-stage[data-phase="parsing"] .chip-history { animation-delay:0s; }.fleet-stage[data-phase="parsing"] .chip-scale { animation-delay:.11s; }.fleet-stage[data-phase="parsing"] .chip-escalation { animation-delay:.22s; }.fleet-stage[data-phase="parsing"] .chip-access-adjust { animation-delay:.33s; }.fleet-stage[data-phase="parsing"] .chip-foundation { animation-delay:.44s; }.fleet-stage[data-phase="parsing"] .chip-slab { animation-delay:.55s; }.fleet-stage[data-phase="parsing"] .chip-rate { animation-delay:.66s; }.fleet-stage[data-phase="parsing"] .chip-access { animation-delay:.77s; }.fleet-stage[data-phase="parsing"] .chip-permit { animation-delay:.88s; }.fleet-stage[data-phase="parsing"] .chip-racks { animation-delay:.99s; }.fleet-stage[data-phase="parsing"] .chip-equipment { animation-delay:1.1s; }

.ingest-ledger { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.36rem; }.ingest-ledger div { padding:.44rem .48rem; }.ingest-ledger span { font-size:.46rem; }.ingest-ledger b { margin-top:.2rem; font-size:.57rem; }
.forecast-strip { margin-top:.43rem; display:flex; flex-wrap:wrap; align-items:center; gap:.28rem .42rem; min-width:0; color:#89b8c8; font-size:.52rem; line-height:1.35; letter-spacing:.025em; }
.forecast-strip span { padding:.2rem .3rem; border:1px solid #314750; background:#0a1014; }.forecast-strip b { color:#d2d2d2; font-weight:500; }.forecast-strip i { color:#6a6a6a; font-style:normal; }.forecast-strip strong { padding:.22rem .38rem; border:1px solid #8b8b8b; background:#17140d; color:#d7d7d7; font-size:.61rem; font-weight:500; letter-spacing:.04em; }
.dispatch-screen[data-screen="parsing"] > p { margin-top:.37rem; font-size:.77rem; line-height:1.4; }

/* The model is a floor plane first, then walls, risers, racks, equipment, and cost above it. */
.dc-model, .dc-floor, .dc-walls, .dc-structure, .dc-verticals, .rack-hall, .dc-equipment, .power-yard, .cost-dimension { transform-style:preserve-3d; }
.dc-walls { inset:12% 10% 18%; }
.dc-walls i { border-color:#8bcde4; background:linear-gradient(135deg,#8fd8ef35,#2c68833b); box-shadow:inset 0 0 20px #80c8e43d, 0 0 12px #5eafcf22; backface-visibility:visible; transform-style:preserve-3d; }
.wall-back { --wall-transform:rotateX(90deg) translateZ(2px); left:5%; bottom:10%; width:73%; height:54%; transform-origin:0 100%; transform:var(--wall-transform) scaleY(.05); }.wall-front { --wall-transform:rotateX(90deg) translateZ(3px); left:16%; top:18%; width:61%; height:42%; transform-origin:100% 0; transform:var(--wall-transform) scaleY(.05); }.wall-right { --wall-transform:rotateY(-90deg) translateZ(2px); right:1%; top:7%; width:61%; height:51%; transform-origin:100% 0; transform:var(--wall-transform) scaleY(.05); }
.dc-verticals { position:absolute; inset:16% 12% 22%; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); pointer-events:none; }
.dc-verticals i { justify-self:center; align-self:end; width:4px; height:57px; opacity:0; background:linear-gradient(90deg,#5a5a5a,#d8d8d8 45%,#6e6e6e); box-shadow:0 0 7px #c0c0c08a, 4px 0 8px #000a; transform-origin:50% 100%; transform:rotateX(90deg) translateZ(1px) scaleY(.04); }.dc-verticals i:nth-child(3n) { height:68px; }.dc-verticals i:nth-child(4n) { height:47px; }
.dc-structure i { height:45px; transform:translateZ(20px) scaleY(.08); }.rack-hall i { transform:translateZ(14px) scaleY(.1); box-shadow:0 0 7px #63b8e877, 6px 8px 11px #0007; }.dc-equipment i, .power-yard i { transform:translateZ(12px) scale(.42); }

/* Cost is the fourth dimension: numbers rise after scope, systems, and structure exist. */
.cost-dimension { position:absolute; z-index:7; inset:7% 9% 16%; pointer-events:none; }
.cost-column { --cost-z:64px; position:absolute; display:grid; justify-items:center; align-content:end; gap:.12rem; opacity:0; color:#dbdbdb; filter:drop-shadow(0 5px 6px #000); transform:translate3d(0,30px,0) scale(.56); }.cost-column i { width:2px; height:28px; display:block; background:linear-gradient(#dbdbdb,#8a8a8a); box-shadow:0 0 10px #c1c1c1; }.cost-column b { padding:.18rem .28rem; border:1px solid #a8a8a8; background:#14120dd9; color:#d8d8d8; font:500 .59rem/1 var(--bo-font-data); letter-spacing:.025em; white-space:nowrap; }.cost-column em { color:#82cce6; font:500 .44rem/1 var(--bo-font-data); font-style:normal; letter-spacing:.08em; }
.cost-a10 { --cost-z:72px; left:13%; top:37%; }.cost-b10 { --cost-z:92px; left:39%; top:16%; }.cost-racks { --cost-z:62px; left:61%; top:42%; }.cost-equipment { --cost-z:84px; left:78%; top:23%; }
.cost-ticks { position:absolute; z-index:8; inset:10% 11% 18%; pointer-events:none; }.cost-ticks b { position:absolute; opacity:0; color:#d0d0d0; font:500 .77rem/1 var(--bo-font-data); text-shadow:0 0 8px #bfbfbf; transform:translate3d(0,18px,0) scale(.65); }.cost-ticks b:nth-child(1) { left:18%; top:50%; }.cost-ticks b:nth-child(2) { left:34%; top:31%; }.cost-ticks b:nth-child(3) { left:48%; top:14%; }.cost-ticks b:nth-child(4) { left:66%; top:48%; }.cost-ticks b:nth-child(5) { left:78%; top:27%; }.cost-ticks b:nth-child(6) { left:87%; top:10%; }

.fleet-stage[data-phase="building"] .dc-walls i { animation:dc-wall-rise-v13 .76s var(--bo-ease) 1.5s forwards; }.fleet-stage[data-phase="building"] .wall-front { animation-delay:1.68s; }.fleet-stage[data-phase="building"] .wall-right { animation-delay:1.86s; }
.fleet-stage[data-phase="building"] .dc-verticals i { animation:dc-post-rise-v13 .42s var(--bo-ease) 1.82s forwards; }.fleet-stage[data-phase="building"] .dc-verticals i:nth-child(2n) { animation-delay:1.98s; }.fleet-stage[data-phase="building"] .dc-verticals i:nth-child(3n) { animation-delay:2.14s; }.fleet-stage[data-phase="building"] .dc-verticals i:nth-child(5n) { animation-delay:2.3s; }
.fleet-stage[data-phase="building"] .dc-structure i { animation:structure-rise-v13 .4s var(--bo-ease) 2.05s forwards; }.fleet-stage[data-phase="building"] .dc-structure i:nth-child(2n) { animation-delay:2.18s; }.fleet-stage[data-phase="building"] .dc-structure i:nth-child(3n) { animation-delay:2.31s; }
.fleet-stage[data-phase="building"] .rack-hall i { animation:rack-rise-v13 .3s var(--bo-ease) 2.48s forwards; }.fleet-stage[data-phase="building"] .rack-hall i:nth-child(3n) { animation-delay:2.65s; }.fleet-stage[data-phase="building"] .rack-hall i:nth-child(4n) { animation-delay:2.82s; }
.fleet-stage[data-phase="building"] .dc-equipment i { animation:equipment-rise-v13 .48s var(--bo-ease) 3.12s forwards; }.fleet-stage[data-phase="building"] .dc-equipment .ups-two { animation-delay:3.28s; }.fleet-stage[data-phase="building"] .dc-equipment .chiller-one { animation-delay:3.44s; }.fleet-stage[data-phase="building"] .dc-equipment .chiller-two { animation-delay:3.6s; }
.fleet-stage[data-phase="building"] .cost-column { animation:cost-rise-v13 .74s var(--bo-ease) 3.78s forwards; }.fleet-stage[data-phase="building"] .cost-b10 { animation-delay:3.95s; }.fleet-stage[data-phase="building"] .cost-racks { animation-delay:4.12s; }.fleet-stage[data-phase="building"] .cost-equipment { animation-delay:4.29s; }.fleet-stage[data-phase="building"] .cost-ticks b { animation:dollar-tick-v13 1.05s var(--bo-ease) 3.98s forwards; }.fleet-stage[data-phase="building"] .cost-ticks b:nth-child(2) { animation-delay:4.14s; }.fleet-stage[data-phase="building"] .cost-ticks b:nth-child(3) { animation-delay:4.3s; }.fleet-stage[data-phase="building"] .cost-ticks b:nth-child(4) { animation-delay:4.46s; }.fleet-stage[data-phase="building"] .cost-ticks b:nth-child(5) { animation-delay:4.62s; }.fleet-stage[data-phase="building"] .cost-ticks b:nth-child(6) { animation-delay:4.78s; }
.fleet-stage[data-phase="building"] .power-yard i { animation:equipment-rise-v13 .48s var(--bo-ease) 4.96s forwards; }.fleet-stage[data-phase="building"] .power-yard .transformer-two { animation-delay:5.14s; }.fleet-stage[data-phase="building"] .power-yard .switchgear { animation-delay:5.32s; }.power-b { display:none !important; }
.fleet-stage[data-phase="building"] .buildonto-badge { animation:badge-energize-v13 .72s var(--bo-ease) 5.45s both; }.fleet-stage[data-phase="building"] .power-circuits i { animation:circuit-on .5s ease 5.72s forwards; }.fleet-stage[data-phase="building"] .power-circuits i:nth-child(2) { animation-delay:5.88s; }.fleet-stage[data-phase="building"] .power-circuits i:nth-child(3) { animation-delay:6.04s; }.fleet-stage[data-phase="building"] .dc-model .scan-plane { animation:scan-build 1.3s ease 5.6s infinite; }

.fleet-stage[data-phase="complete"] .dc-walls i { opacity:.44; transform:var(--wall-transform) scaleY(1); }.fleet-stage[data-phase="complete"] .dc-verticals i { opacity:.9; transform:rotateX(90deg) translateZ(1px) scaleY(1); }.fleet-stage[data-phase="complete"] .dc-structure i { opacity:.9; transform:translateZ(20px) scaleY(1); }.fleet-stage[data-phase="complete"] .rack-hall i { opacity:.85; transform:translateZ(54px) scaleY(1); }.fleet-stage[data-phase="complete"] .dc-equipment i, .fleet-stage[data-phase="complete"] .power-yard i { opacity:.9; transform:translateZ(64px) scale(1); }.fleet-stage[data-phase="complete"] .cost-column { opacity:.9; transform:translate3d(0,-6px,var(--cost-z)) scale(1); }.fleet-stage[data-phase="complete"] .cost-ticks b { opacity:.7; transform:translate3d(0,-15px,50px) scale(1); }
@keyframes dc-wall-rise-v13 { from { opacity:0; transform:var(--wall-transform) scaleY(.05); } 70% { opacity:.5; } to { opacity:.44; transform:var(--wall-transform) scaleY(1); } } @keyframes dc-post-rise-v13 { from { opacity:0; transform:rotateX(90deg) translateZ(1px) scaleY(.04); } to { opacity:.9; transform:rotateX(90deg) translateZ(1px) scaleY(1); } } @keyframes structure-rise-v13 { from { opacity:0; transform:translateZ(2px) scaleY(.08); } to { opacity:.9; transform:translateZ(20px) scaleY(1); } } @keyframes rack-rise-v13 { from { opacity:0; transform:translateZ(4px) scaleY(.1); } to { opacity:.85; transform:translateZ(54px) scaleY(1); } } @keyframes equipment-rise-v13 { from { opacity:0; transform:translateZ(4px) scale(.42); } to { opacity:.9; transform:translateZ(64px) scale(1); } } @keyframes cost-rise-v13 { 0% { opacity:0; transform:translate3d(0,30px,0) scale(.56); } 70% { opacity:1; } to { opacity:.98; transform:translate3d(0,-6px,var(--cost-z)) scale(1); } } @keyframes dollar-tick-v13 { 0% { opacity:0; transform:translate3d(0,18px,0) scale(.65); } 28% { opacity:1; } to { opacity:0; transform:translate3d(0,-35px,72px) scale(1.22); } } @keyframes badge-energize-v13 { 0% { filter:brightness(1); } 48% { filter:brightness(1.35) drop-shadow(0 0 13px #c3c3c3); } to { filter:brightness(1.07) drop-shadow(0 0 6px #b0b0b0); } }

@media (max-width:720px) { .uniformat-stream { left:-40%; top:4%; width:88%; height:92%; }.intake-chip { padding:.25rem .36rem; }.intake-chip b { font-size:.38rem; }.intake-chip em { font-size:.48rem; }.ingest-ledger { grid-template-columns:repeat(2,minmax(0,1fr)); }.forecast-strip { gap:.22rem; font-size:.48rem; }.forecast-strip span { padding:.16rem .22rem; }.forecast-strip strong { font-size:.55rem; }.cost-column b { font-size:.48rem; }.cost-column em { font-size:.38rem; }.cost-column i { height:20px; }.dc-verticals i { height:42px; } }
@media (prefers-reduced-motion:reduce) { .fleet-stage[data-phase="building"] .dc-walls i, .fleet-stage[data-phase="building"] .dc-verticals i, .fleet-stage[data-phase="building"] .dc-structure i, .fleet-stage[data-phase="building"] .rack-hall i, .fleet-stage[data-phase="building"] .dc-equipment i, .fleet-stage[data-phase="building"] .power-yard i, .fleet-stage[data-phase="building"] .cost-column, .fleet-stage[data-phase="building"] .cost-ticks b, .fleet-stage[data-phase="building"] .buildonto-badge { animation:none !important; }.fleet-stage[data-phase="building"] .dc-walls i { opacity:.44; transform:var(--wall-transform) scaleY(1); }.fleet-stage[data-phase="building"] .dc-verticals i { opacity:.9; transform:rotateX(90deg) translateZ(1px) scaleY(1); }.fleet-stage[data-phase="building"] .dc-structure i { opacity:.9; transform:translateZ(20px) scaleY(1); }.fleet-stage[data-phase="building"] .rack-hall i { opacity:.85; transform:translateZ(54px) scaleY(1); }.fleet-stage[data-phase="building"] .dc-equipment i, .fleet-stage[data-phase="building"] .power-yard i { opacity:.9; transform:translateZ(64px) scale(1); }.fleet-stage[data-phase="building"] .cost-column { opacity:.9; transform:translate3d(0,-6px,var(--cost-z)) scale(1); }.fleet-stage[data-phase="building"] .cost-ticks b { opacity:0; } }

/* ============================================================
   BUILD ON — tracing-paper theme sync (globe/jobwalk blacks & greys)
   Appended override. Base palette shifts live in brand/tokens.css.
   Rule: the warm cost light (#d98e6e) is reserved for money + the primary action;
   everything else is void / paper / steel / muted. The fleet's own
   animated dispatch keeps its character (Buildonto = the fleet).
   ============================================================ */

/* Page ground: black tracing paper — faint steel draft grid over void. */
html { background: var(--bo-black); }
body { background-color: var(--bo-black); background-image: var(--bo-trace-grid); background-attachment: fixed; }

/* Nav mark: monochrome folded plate (steel edge), no gold, no crude glow. */
.brand-b { fill: #0a0a0b; stroke: var(--bo-steel); stroke-width: 1.7; filter: drop-shadow(0 1px 1px #000); }
.site-nav { background: #0a0a0be8; border-bottom: 1px solid var(--bo-border-dark); }

/* Kickers go muted grey (was gold); gold is reserved now. */
.eyebrow, .eyebrow.dark { color: var(--bo-ink-muted); }
.proof-line li::before { color: var(--bo-steel); }
.method-link { color: var(--bo-ink-muted); }
.guide-grid span { color: var(--bo-ink-muted); }
.guide-grid b { color: var(--bo-steel); }
.site-footer a { color: var(--bo-steel); }
.phase-label { color: var(--bo-ink-muted); }

/* Hero: cool graphite ground + steel tracing-paper grid (kills warm brown). */
.hero { background: radial-gradient(ellipse at 76% 45%, #16181c 0, #0b0c0e 44%, #060708 80%); }
.hero::before { opacity: .5; background-image: linear-gradient(rgba(194,198,202,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(194,198,202,.05) 1px, transparent 1px); }

/* Dispatch teaser shell + fleet stage: cool the warm border/glow to graphite. */
.dispatch-teaser { border: 1px solid var(--bo-border-dark); background: linear-gradient(145deg, #121316e8, #0a0b0de8 68%); box-shadow: 0 30px 100px #000b, inset 0 1px #ffffff10; }
.fleet-stage { background: radial-gradient(circle at 72% 46%, #1a1c2033, transparent 34%), linear-gradient(180deg, #0a0b0dcc, #060708); }
.fleet-stage::before { background: radial-gradient(ellipse at 58% 78%, #c2c6ca1f, transparent 52%); filter: blur(10px); }
.orbit-one { box-shadow: 0 0 80px #c2c6ca0d; border-color: #c2c6ca1f; }
.orbit-two { border-color: #c2c6ca14; }

/* Draft field = the tracing paper itself: steel/muted drafting lines. */
.plan-lines { stroke: var(--bo-steel); }
.model-lines { stroke: var(--bo-ink-muted); }
.conversion-line { stroke: var(--bo-steel); }
.draft-field { filter: drop-shadow(0 0 5px #c2c6ca1f); }

/* Method section: flip the lone light band to dark tracing paper. */
.section-light { background: #0b0c0e; color: var(--bo-ink); background-image: var(--bo-trace-grid); }
.section-light .method-grid { border-color: var(--bo-border-dark); }
.section-light .method-grid article { border-color: var(--bo-border-dark); }
.section-light .method-grid b { color: var(--bo-steel); }
.section-light .method-grid p { color: var(--bo-ink-muted); }

/* Receipt band: neutral graphite (kill the blue tint). */
.receipt-section { background: radial-gradient(circle at 84% 22%, #1a1c20 0, transparent 34%), linear-gradient(145deg, #0c0d10, #060708); }

/* Final CTA: dark tracing paper with gold reserved for the primary button. */
.final-cta { background: #0b0c0e; background-image: var(--bo-trace-grid); color: var(--bo-ink); border-top: 1px solid var(--bo-border-dark); }
.final-cta .eyebrow, .final-cta .eyebrow.dark { color: var(--bo-ink-muted); }
.button-dark { border-color: var(--bo-gold); background: var(--bo-gold); color: #0a0b0d; }
.button-dark:hover { background: var(--bo-gold-bright); }
.button-outline-dark { border-color: var(--bo-steel); background: transparent; color: var(--bo-ink); }
.button-outline-dark:hover { background: var(--bo-steel); color: #0a0b0d; }

/* ============================================================
   Target Value Design + Key Value Levers (Build On messaging)
   ============================================================ */
.tvd { padding: 6.5rem 4vw; display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,0.92fr); gap: 6vw; align-items: center; background: #0b0c0e; background-image: var(--bo-trace-grid); border-top: 1px solid var(--bo-border-dark); }
.tvd-copy { max-width: 640px; }
.tvd-copy h2 { margin: 1rem 0 1.5rem; max-width: 620px; font: 400 clamp(2.4rem,4.6vw,4.4rem)/1 var(--bo-font-display); letter-spacing: -.04em; }
.tvd-lede { color: var(--bo-ink); font-size: 1.1rem; line-height: 1.72; margin: 0 0 1.2rem; }
.tvd-lede strong { color: var(--bo-gold); font-weight: 600; }
.tvd-copy p { color: var(--bo-ink-muted); font-size: 1rem; line-height: 1.72; margin: 0 0 1.2rem; }
.tvd-note { color: var(--bo-steel); }
.tvd-note em { font-style: normal; color: var(--bo-gold); }
.tvd-cone { margin: 0; }
.cone-viz { width: 100%; height: auto; display: block; }
.tvd-cone figcaption { margin-top: 1.1rem; color: var(--bo-ink-muted); font-size: .8rem; line-height: 1.55; }

.levers { padding: 6.5rem 4vw 7rem; border-top: 1px solid var(--bo-border-dark); }
.levers .section-heading > p { max-width: 620px; }
.lever-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--bo-border-dark); border-left: 1px solid var(--bo-border-dark); margin-top: 2.5rem; }
.lever { min-height: 205px; padding: 1.8rem; border-right: 1px solid var(--bo-border-dark); border-bottom: 1px solid var(--bo-border-dark); }
.lever b { color: var(--bo-gold); font: 500 .78rem/1 var(--bo-font-data); letter-spacing: .14em; }
.lever h3 { margin: 1.1rem 0 .8rem; font-size: 1.12rem; letter-spacing: -.01em; }
.lever p { margin: 0; color: var(--bo-ink-muted); font-size: .9rem; line-height: 1.62; }

.creds { padding: 5.5rem 4vw; display: grid; grid-template-columns: 1fr 1.5fr; gap: 5vw; border-top: 1px solid var(--bo-border-dark); background: #0b0c0e; background-image: var(--bo-trace-grid); }
.creds ul { margin: 1.1rem 0 0; padding: 0; list-style: none; }
.creds li { padding: .75rem 0; border-top: 1px solid var(--bo-border-dark); color: var(--bo-ink); font-size: .95rem; letter-spacing: .01em; }
.creds-whynow p { margin: 1.1rem 0 0; color: var(--bo-ink-muted); line-height: 1.72; font-size: .98rem; }
.creds-whynow em { font-style: normal; color: var(--bo-steel); }

@media (max-width: 1000px) { .tvd { grid-template-columns: 1fr; gap: 2.5rem; } .lever-grid { grid-template-columns: 1fr; } .creds { grid-template-columns: 1fr; gap: 2rem; } }

/* ============================================================
   Latest style guide (2026-09-08): IBM Plex display + no yellow.
   IBM Plex Sans needs more weight than the old Georgia serif ran at
   (400) to read as a display face at the big clamp sizes.
   ============================================================ */
.hero h1, .section-light h2, .section-heading h2, .receipt-copy h2, .final-cta h2,
.guide-hero h1, .guide-cta h2, .faq h2, .kit-hero h1, .kit-section h2,
.tvd-copy h2, .levers h2 { font-weight: 600; }
.tvd-copy h1 { margin: 1rem 0 1.5rem; max-width: 620px; font: 600 clamp(2.6rem,4.8vw,4.6rem)/1 var(--bo-font-display); letter-spacing: -.04em; color: var(--bo-ink); }
.tvd-page main { display: block; }
.tvd-lever-intro { max-width: 780px; }
.tvd-lever-intro p { color: var(--bo-ink-muted); font-size: 1.02rem; line-height: 1.72; margin: 0 0 1.1rem; }
.tvd-lever-intro p:first-child { color: var(--bo-ink); }
.tvd-lever-intro strong { color: var(--bo-ink); font-weight: 600; }

/* ============================================================
   Interactive cone of uncertainty (anime.js) + readability
   ============================================================ */
.cone-viz { width: 100%; height: auto; display: block; }
.cone-grid line { stroke: #23252a; stroke-width: 1; }
.cone-target-line { stroke: #d98e6e; stroke-width: 1.5; stroke-dasharray: 2 5; opacity: .85; }
.cone-tv-label, .cone-axis text, .cone-ylabel { font-family: var(--bo-font-data); fill: var(--bo-ink-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.cone-tv-label { fill: #d98e6e; }
.cone-envelope { fill: #c2c6ca; fill-opacity: .045; stroke: #3a3d42; stroke-width: 1; }
.cone-resolved { stroke: #d98e6e; stroke-width: 1.6; }
#cone-marker-line { stroke: #d98e6e; stroke-width: 1.4; opacity: .7; }
.cone-target-dot { fill: #d98e6e; filter: drop-shadow(0 0 5px rgba(217,142,110,.6)); }

.cone-controls { margin-top: 1.4rem; display: grid; gap: 1.3rem; }
.cone-readout { display: grid; grid-template-columns: repeat(3, auto); gap: 1.8rem; align-items: end; }
.cone-readout .ro-k { display: block; font: 500 .62rem/1 var(--bo-font-data); letter-spacing: .16em; text-transform: uppercase; color: var(--bo-ink-muted); margin-bottom: .45rem; }
.cone-readout b { font-family: var(--bo-font-data); font-variant-numeric: tabular-nums; color: var(--bo-ink); font-weight: 500; }
.cone-readout .ro-hero { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 600; color: #d98e6e; line-height: 1; letter-spacing: -.01em; }
.cone-readout #ro-range { font-size: 1rem; }
.cone-readout .ro-tv { font-size: 1rem; color: var(--bo-steel); }

.cone-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; }
.cone-slider input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, #d98e6e55, #2f3237); border-radius: 2px; }
.cone-slider input[type="range"]::-moz-range-track { height: 3px; background: #2f3237; border-radius: 2px; }
.cone-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -8px; width: 18px; height: 18px; border-radius: 50%; background: #d98e6e; border: 3px solid #0d0e11; box-shadow: 0 0 0 1px #d98e6e, 0 0 12px rgba(217,142,110,.5); }
.cone-slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #d98e6e; border: 3px solid #0d0e11; box-shadow: 0 0 0 1px #d98e6e; }
.cone-slider input[type="range"]:focus-visible { outline: none; }
.cone-slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #edece8, 0 0 12px rgba(217,142,110,.6); }
.cone-slider-ends { display: flex; justify-content: space-between; margin-top: .3rem; font: 500 .62rem/1 var(--bo-font-data); letter-spacing: .12em; text-transform: uppercase; color: var(--bo-ink-muted); }
.tvd-cone figcaption abbr { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.tvd-cone figcaption b { color: #d98e6e; font-weight: 600; }

/* Readability: body copy a touch larger, lighter, and better-spaced. */
.tvd-lede { font-size: 1.15rem; line-height: 1.75; color: #cdd0d3; }
.tvd-copy p, .tvd-lever-intro p { color: #b4b8bd; font-size: 1.04rem; line-height: 1.78; }
.tvd-lever-intro p:first-child { color: #d7dade; }
.lever p { color: #a7abb1; font-size: .94rem; line-height: 1.66; }
.creds-whynow p { color: #b4b8bd; }
.hero-dek { color: #b8bcc1; }

/* Cone v2: legacy process vs Build On method */
.cone-legacy { fill: #c2c6ca; fill-opacity: .04; stroke: #494c51; stroke-width: 1; stroke-dasharray: 3 4; }
.cone-buildon { fill: none; stroke: #d98e6e; stroke-width: 1.3; stroke-opacity: .5; }
.marker-legacy { stroke: #8b8f94; stroke-width: 1.2; opacity: .55; }
.cone-legacy-label { font-family: var(--bo-font-data); fill: #8b8f94; font-size: 10px; letter-spacing: .14em; }
.cone-buildon-label { font-family: var(--bo-font-data); fill: #d98e6e; font-size: 10px; letter-spacing: .14em; }
.cone-readout { display: flex; flex-wrap: wrap; grid-template-columns: none; gap: 1.4rem 2.1rem; align-items: end; }
.cone-readout .ro-legacy { font-size: 1.25rem; color: var(--bo-ink-muted); font-weight: 500; }
.cone-readout .ro-benefit { font-size: 1.45rem; color: #d98e6e; font-weight: 600; }
.cone-slider .setter-label { display: block; margin-bottom: .7rem; font: 500 .62rem/1.3 var(--bo-font-data); letter-spacing: .16em; text-transform: uppercase; color: var(--bo-ink-muted); }
/* Cone v2: pick-a-range control */
.cone-setter { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem; }
.cone-setter .setter-label { font: 500 .62rem/1.3 var(--bo-font-data); letter-spacing: .16em; text-transform: uppercase; color: var(--bo-ink-muted); }
.setter-btns { display: inline-flex; gap: .4rem; }
.setter-btns button { font: 500 .8rem/1 var(--bo-font-data); font-variant-numeric: tabular-nums; color: var(--bo-ink-muted); background: transparent; border: 1px solid #3a3d42; border-radius: 4px; padding: .5rem .72rem; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.setter-btns button:hover { color: var(--bo-ink); border-color: #56595f; }
.setter-btns button[aria-pressed="true"] { color: #0d0e11; background: #d98e6e; border-color: #d98e6e; }
.setter-btns button:focus-visible { outline: 2px solid #edece8; outline-offset: 2px; }

/* --- 2026-09-08 review incorporation (v2): demo back in the hero, locked
   default = atom in true state (black tracing paper theme). Signup unlocks
   the screens and runs the demo; the atom fades as the fleet dispatches. --- */
.beta-play { display: inline-block; margin-left: .9rem; color: #d98e6e; text-decoration: none; font: 500 .72rem/1 var(--bo-font-data); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.beta-play:hover { color: #edece8; }
.beta-form .beta-game { margin: .45rem 0 0; color: #8b8f94; font: 500 .66rem/1.6 var(--bo-font-data); letter-spacing: .07em; text-transform: uppercase; }
.atom-viz { position: absolute; z-index: 2; inset: 0; margin: auto; width: min(74%, 520px); height: 92%; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.dispatch-teaser.is-locked .atom-viz { opacity: 1; }
/* ground-state electron cloud: probability density, not orbit rings */
.atom-viz .cloud circle { fill: #edece8; }
.atom-viz .cloud .s { fill: #c2c6ca; }
.atom-viz .cloud-wrap { transform-box: view-box; transform-origin: 50% 50%; animation: atomSpin 240s linear infinite; }
.atom-viz .cloud-a { animation: atomBreathe 9s ease-in-out infinite; }
.atom-viz .cloud-b { animation: atomBreathe 9s ease-in-out infinite; animation-delay: -4.5s; }
@keyframes atomSpin { to { transform: rotate(360deg); } }
@keyframes atomBreathe { 0%, 100% { opacity: 1; } 50% { opacity: .68; } }
.atom-core { fill: #c2c6ca; filter: drop-shadow(0 0 9px rgba(194, 198, 202, .55)); }
.atom-caption { fill: #8b8f94; font: 500 11px var(--bo-font-data); letter-spacing: .22em; }
/* the locked stage keeps the resting fleet low; the atom owns the center */
.dispatch-teaser.is-locked .fleet-rest-frame { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .atom-viz .cloud-wrap, .atom-viz .cloud-a, .atom-viz .cloud-b { animation: none; } }
/* --- TVD page: cone removed, copy column goes full width --- */
.tvd-page .tvd { grid-template-columns: 1fr; }