/* Framed landing page, product scenes, and editorial carousel. */
.screen-chapter { min-height: 0; padding-block: 128px; display: flex; flex-direction: column; justify-content: center; }
.landing-page .hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 9%; align-items: end; text-align: left; min-height: clamp(640px,calc(90svh - 100px),800px); padding: 130px 0 100px; }
.landing-page .hero::before { display: none; }
.hero-heading .section-label { margin-bottom: 42px; }
.landing-page .hero h1 { font-size: clamp(64px,6.2vw,90px); line-height: 1.14; letter-spacing: -.055em; font-weight: 450; }
.hero-explanation { padding-bottom: 9px; animation: soft-enter .8s .48s both; }
.hero-explanation > p:not(.hero-note) { max-width: 410px; color: var(--secondary); font-size: 19px; line-height: 1.65; letter-spacing: -.02em; text-wrap: pretty; }
.landing-page .hero-actions { justify-content: flex-start; gap: 12px; margin-top: 31px; flex-wrap: wrap; }
.landing-page .hero .hero-note { margin-top: 23px; }
.landing-page .vision-section { padding-block: 140px; text-align: center; }
.vision-copy { max-width: 900px; margin-inline: auto; }
.vision-copy h2,.wallet-editorial h2 { font-size: clamp(40px,3.5vw,50px); line-height: 1.22; }
.vision-copy > p:not(.section-label) { color: var(--secondary); margin-top: 27px; font-size: 19px; line-height: 1.7; letter-spacing: -.02em; }
.vision-copy .vision-emphasis { margin-top: 38px; color: #ddd; font-size: 20px; }

/* Each separator is the timer for its own product story. */
.benefits-scroll { position: relative; padding-block: 100px; }
.benefits-grid { display: grid; grid-template-columns: .92fr 1.48fr; column-gap: 56px; row-gap: 38px; }
.benefits-intro { grid-column: 1; }
.benefits-intro .section-label { margin-bottom: 20px; }
.benefits-intro h2 { font-size: 40px; line-height: 1.18; letter-spacing: -.04em; }
.benefit-list { grid-column: 1; grid-row: 2; align-self: start; border-top: 1px solid #282828; }
.benefit-item { position: relative; border-bottom: 1px solid #282828; }
.benefit-item::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(var(--timer-progress,0)); transform-origin: left; opacity: 0; pointer-events: none; }
.benefit-item.is-active::after { opacity: 1; }
.benefit-item h3 { margin: 0; }
.benefit-item h3 > button { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; padding: 25px 0; border: 0; background: none; color: #777; font-size: 29px; font-weight: 450; line-height: 1.23; letter-spacing: -.045em; text-align: left; transition: color .4s; }
.benefit-item h3 > button > span { font-size: 19px; opacity: 0; transform: translate(-6px,6px); transition: opacity .4s,transform .4s; }
.benefit-item.is-active h3 > button { color: var(--text); }
.benefit-item.is-active h3 > button > span { opacity: 1; transform: none; }
.benefit-body { color: var(--secondary); font-size: 17px; line-height: 1.6; letter-spacing: -.02em; padding-bottom: 28px; }
.benefit-body .text-link { margin-top: 15px; }
.benefits-ready .benefit-body { display: grid; grid-template-rows: 0fr; visibility: hidden; padding-bottom: 0; transition: grid-template-rows .55s cubic-bezier(.22,1,.36,1),padding-bottom .55s,visibility .55s; }
.benefit-body > div { min-height: 0; overflow: hidden; }
.benefits-ready .benefit-item.is-active .benefit-body { grid-template-rows: 1fr; visibility: visible; padding-bottom: 28px; }
.benefit-stage { grid-column: 2; grid-row: 2; position: relative; min-width: 0; min-height: 460px; }
.benefit-panel { position: relative; min-height: 500px; border: 0; border-radius: 19px; background: #111; overflow: hidden; margin-bottom: 20px; }
.benefits-ready .benefit-stage { height: clamp(460px,52svh,520px); }
.benefits-ready .benefit-panel { position: absolute; inset: 0; min-height: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .4s,transform .6s cubic-bezier(.16,1,.3,1),visibility .4s; pointer-events: none; }
.benefits-ready .benefit-panel.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.benefits-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 27px 0 0; color: #8c8c8c; font-size: 12px; }
.benefits-caption button { border: 0; padding: 4px 0; color: #aaa; font: inherit; background: none; }
.benefits-caption button:hover { color: #ddd; }
.mini-asset { position: absolute; left: 50%; top: 50%; width: 300px; height: 226px; border: 0; border-radius: 16px; background: #212121; box-shadow: 0 20px 45px #0002; transform: translate(-50%,-50%) scale(var(--scene-scale,1)); --scene-duration: 8s; }
.mini-asset *,.mini-asset *::before,.mini-asset *::after { animation-play-state: paused !important; }
.mini-state { position: absolute; inset: 25px 27px; }
.mini-overline { color: #aaa; font-size: 12px; line-height: 1.5; }
.mini-quote { margin-top: 17px; font-size: 27px; line-height: 1.18; letter-spacing: -.045em; }
.mini-agent-route { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #aaa; font-size: 10px; line-height: 1.5; margin-top: 26px; }
.mini-agent-route > i { position: relative; height: 1px; flex: 1; overflow: hidden; background: #414141; }
.mini-agent-route > i::after { content: ''; position: absolute; inset: 0; background: var(--positive); transform-origin: left; animation: plan-route var(--scene-duration) linear both; }
.plan-request { animation: plan-request var(--scene-duration) ease both; }
.plan-finished { opacity: 0; animation: plan-finished var(--scene-duration) ease both; }
.mini-time { display: block; font-size: 43px; font-weight: 450; line-height: 1.12; letter-spacing: -.055em; margin-top: 7px; }
.mini-plan-name { font-size: 17px; letter-spacing: -.025em; margin-top: 6px; }
.mini-confirmed { display: flex; align-items: center; gap: 8px; margin-top: 21px; color: #b8c9bd; font-size: 12px; opacity: 0; animation: calendar-confirm var(--scene-duration) ease both; }
.mini-confirmed .check-icon { width: 16px; height: 16px; }
.calendar-app { position: absolute; top: -1px; right: 0; width: 39px; height: 39px; opacity: 0; animation: calendar-added var(--scene-duration) cubic-bezier(.22,1,.36,1) both; }
@keyframes plan-request { 0%,47% { opacity: 1; transform: none; } 50%,100% { opacity: 0; transform: translateY(-9px); } }
@keyframes plan-finished { 0%,50% { opacity: 0; transform: translateY(10px); } 55%,100% { opacity: 1; transform: none; } }
@keyframes plan-route { 0%,8% { transform: scaleX(0); } 24%,100% { transform: scaleX(1); } }
@keyframes calendar-added { 0%,54% { opacity: 0; transform: translateY(7px) scale(.75); } 59%,100% { opacity: 1; transform: none; } }
@keyframes calendar-confirm { 0%,56% { opacity: 0; transform: translateY(4px); } 61%,100% { opacity: 1; transform: none; } }

/* Ownership: one stationary wallet, two successive agents. */
.own-scene { width: 330px; height: 304px; background: none; box-shadow: none; }
.own-agent { position: absolute; top: 0; left: 56px; width: 218px; min-height: 58px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; border-radius: 11px; background: #282828; }
.own-agent > svg:not(.check-icon) { width: 25px; height: 25px; fill: none; stroke: #beb4cf; stroke-width: 1.1; stroke-linecap: round; }
.own-agent > span { font-size: 12px; line-height: 1.5; }
.own-agent small { display: block; color: #aaa; font-size: 9px; }
.own-agent > .check-icon { margin-left: auto; width: 14px; height: 14px; }
.own-agent-old { animation: own-old var(--scene-duration) cubic-bezier(.22,1,.36,1) both; }
.own-agent-new { opacity: 0; animation: own-new var(--scene-duration) cubic-bezier(.22,1,.36,1) both; }
.own-agent-new > .check-icon { opacity: 0; animation: own-ready var(--scene-duration) ease both; }
.own-connection { position: absolute; top: 59px; left: 164px; width: 1px; height: 37px; background: #444; animation: own-link var(--scene-duration) ease both; }
.own-connection > i { position: absolute; width: 3px; height: 12px; left: -1px; top: 0; border-radius: 2px; background: #bba8e6; animation: own-pulse var(--scene-duration) ease both; }
.own-wallet { position: absolute; top: 96px; left: 15px; width: 300px; padding: 21px 23px 17px; background: #212121; border-radius: 15px; }
.own-wallet-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; }
.own-wallet-heading .wordmark { font-size: 17px; }
.own-wallet-heading > span + span { display: flex; align-items: center; gap: 6px; color: #bbb; font-size: 10px; }
.own-wallet-heading svg { width: 13px; height: 13px; fill: none; stroke: #b5b5b5; stroke-width: 1.1; }
.own-choice { display: flex; justify-content: space-between; gap: 20px; padding-block: 9px; border-top: 1px solid #363636; font-size: 11px; line-height: 1.5; }
.own-choice > span { color: #999; }
.own-choice > strong { font-weight: 450; }
.own-wallet > p { color: #bdb5cc; font-size: 10px; margin-top: 12px; }
@keyframes own-old { 0%,47% { opacity: 1; transform: none; } 50%,100% { opacity: 0; transform: translateX(-38px); } }
@keyframes own-new { 0%,50% { opacity: 0; transform: translateX(38px); } 57%,100% { opacity: 1; transform: none; } }
@keyframes own-ready { 0%,62% { opacity: 0; } 68%,100% { opacity: 1; } }
@keyframes own-link { 0%,47%,59%,100% { opacity: 1; } 50%,54% { opacity: 0; } }
@keyframes own-pulse { 0%,17% { opacity: 0; transform: translateY(0); } 21% { opacity: 1; } 28% { opacity: 0; transform: translateY(25px); } 29%,60% { opacity: 0; transform: translateY(0); } 64% { opacity: 1; } 74%,100% { opacity: 0; transform: translateY(25px); } }

/* Control: a narrow answer passes; source records do not. */
.control-scene { width: 340px; height: 280px; padding: 23px; }
.control-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; }
.control-heading > span + span { color: #999; font-size: 9px; }
.control-rule { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding-bottom: 18px; }
.control-rule > svg { width: 23px; height: 23px; fill: none; stroke: #bbb; stroke-width: 1; }
.control-rule > span { color: #999; font-size: 9px; line-height: 1.5; }
.control-rule strong { display: block; color: #ddd; font-size: 13px; font-weight: 450; }
.control-request { display: grid; grid-template-columns: 86px 1fr 101px; align-items: center; gap: 12px; padding-block: 15px; border-top: 1px solid #363636; }
.control-request > span { color: #bbb; font-size: 11px; }
.control-route { position: relative; display: block; height: 1px; background: #3c3c3c; }
.control-route::after { content: ''; position: absolute; inset: 0; background: #30d158; transform-origin: left; transform: scaleX(0); animation: control-pass var(--scene-duration) linear both; }
.control-answer,.control-private { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 450; line-height: 1.5; opacity: 0; animation: control-answer var(--scene-duration) ease both; }
.control-answer { color: #c0d8c6; }
.control-answer > svg,.control-private > svg { width: 15px; height: 15px; }
.control-request-records { opacity: 0; animation: control-second var(--scene-duration) ease both; }
.control-request-records .control-route::after { background: #999; animation-name: control-stop; }
.control-route > b { position: absolute; left: 50%; top: -5px; height: 11px; width: 1px; background: #aaa; opacity: 0; animation: control-lock var(--scene-duration) ease both; }
.control-private { font-size: 12px; animation-name: control-locked; }
.control-private > svg { fill: none; stroke: #bbb; stroke-width: 1; }
.control-outcome { font-size: 10px; color: #aaa; margin-top: 13px; opacity: 0; animation: control-locked var(--scene-duration) ease both; }
@keyframes control-pass { 0%,3% { transform: scaleX(0); } 9%,100% { transform: scaleX(1); } }
@keyframes control-answer { 0%,9% { opacity: 0; transform: translateX(-4px); } 14%,100% { opacity: 1; transform: none; } }
@keyframes control-second { 0%,50% { opacity: 0; transform: translateY(5px); } 55%,100% { opacity: 1; transform: none; } }
@keyframes control-stop { 0%,56% { transform: scaleX(0); } 62%,100% { transform: scaleX(.5); } }
@keyframes control-lock { 0%,61% { opacity: 0; } 64%,100% { opacity: 1; } }
@keyframes control-locked { 0%,64% { opacity: 0; transform: translateY(4px); } 69%,100% { opacity: 1; transform: none; } }

/* Ownership architecture, with a clear public/private separation. */
.landing-page .wallet-editorial { text-align: center; padding-block: 120px; }
.wallet-editorial > div { width: 100%; }
.wallet-editorial > div > p:not(.section-label) { color: #aaa; font-size: 19px; line-height: 1.7; letter-spacing: -.02em; margin-top: 28px; }
.wallet-ownership { width: min(600px,100%); margin: 44px auto 0; border: 0; border-radius: 15px; padding: 26px 29px 29px; background: #151515; text-align: left; }
.ownership-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 23px; border-bottom: 1px solid #303030; font-size: 16px; }
.ownership-heading > svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-linecap: round; }
.ownership-heading .wordmark { margin-left: auto; font-size: 19px; }
.ownership-layers { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding-top: 23px; }
.ownership-label { display: block; color: #999; font-size: 11px; }
.ownership-layers h3 { font-size: 19px; font-weight: 450; letter-spacing: -.035em; margin-top: 9px; }
.ownership-layers p { font-size: 12px; line-height: 1.6; color: #aaa; margin-top: 7px; }
.wallet-editorial > div > .wallet-detail { margin-top: 28px; font-size: 14px; }
.wallet-editorial .text-link { margin-top: 23px; }

/* Drag-capable expanding reading cards. One clip owns every edge. */
.landing-page .journal-section { overflow: visible; padding-block: 105px; }
.journal-heading { margin-bottom: 48px; }
.journal-heading > p:not(.section-label) { color: var(--secondary); font-size: 18px; margin-top: 22px; line-height: 1.6; }
.journal-carousel { --bleed: 0px; --small-card: 360px; --large-card: 640px; width: 100%; }
.journal-carousel .journal-grid { display: flex; gap: 16px; width: calc(100% + var(--bleed)); padding: 0 var(--bleed) 0 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; align-items: stretch; overscroll-behavior-x: contain; cursor: grab; overflow-anchor: none; touch-action: pan-x pan-y; }
.journal-carousel .journal-grid::-webkit-scrollbar { display: none; }
.journal-carousel .journal-card { position: relative; flex: 0 0 var(--small-card); min-width: 0; height: 430px; border: 0; border-radius: 16px; clip-path: inset(0 round 16px); overflow: hidden; isolation: isolate; background: #111; text-align: left; box-shadow: none; transition: flex-basis .7s cubic-bezier(.22,1,.36,1); }
.journal-carousel .journal-card.is-active { flex-basis: var(--large-card); }
.journal-carousel .story-photo { position: absolute; inset: -1px; display: block; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; border: 0; outline: 0; margin: 0; border-radius: 0; object-fit: cover; filter: saturate(.6) sepia(.14) brightness(.7) contrast(1.08); transform: scale(1.025); transition: transform 1.1s cubic-bezier(.22,1,.36,1),filter .7s; user-select: none; -webkit-user-drag: none; }
.journal-card.is-active .story-photo { transform: scale(1); filter: saturate(.65) sepia(.12) brightness(.78) contrast(1.06); }
#reading-nudge .story-photo { object-position: 65% 46%; }
#reading-openai-incident .story-photo { object-position: 80% 50%; }
#reading-agentic-misalignment .story-photo { object-position: 68% 50%; }
#reading-copilot-disclosure .story-photo { object-position: 48% 52%; }
#reading-eu-wallet .story-photo { object-position: 50% 60%; }
#reading-a2a .story-photo { object-position: 50% 50%; }
.story-shade { position: absolute; inset: -1px; background: linear-gradient(180deg,#0007,transparent 35%,#0006 56%,#000e 100%); pointer-events: none; }
.story-source { position: absolute; left: 28px; right: 28px; top: 27px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: #eee; font-size: 13px; line-height: 1.4; }
.story-source > span + span { font-size: 10px; color: #ddd; padding: 4px 7px; border-radius: 4px; background: #1616169c; }
.story-copy { position: absolute; left: 28px; right: 28px; bottom: 28px; max-width: 470px; }
.journal-carousel .journal-card h3 { max-width: 100%; margin: 0; font-size: 25px; line-height: 1.2; letter-spacing: -.04em; }
.journal-card h3 > button { appearance: none; display: block; padding: 0; border: 0; background: none; color: #eee; font: inherit; letter-spacing: inherit; text-align: left; }
.story-description { max-height: 200px; opacity: 1; transition: max-height .65s cubic-bezier(.22,1,.36,1),opacity .4s,visibility .4s; overflow: hidden; }
.story-description > p { font-size: 14px; line-height: 1.6; color: #ccc; margin-top: 14px; max-width: 430px; }
.story-description .text-link { margin-top: 16px; font-size: 13px; color: #eee; }
.carousel-ready .journal-card:not(.is-active) .story-description { max-height: 0; opacity: 0; visibility: hidden; }
.carousel-ready .journal-card.is-active h3 { font-size: 30px; }
.journal-controls { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 24px; }
.journal-controls[hidden] { display: none; }
.carousel-dots { display: flex; align-items: center; gap: 0; }
.carousel-dots > button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; transition: width .3s; }
.carousel-dots > button::before { content: ''; width: 6px; height: 6px; border-radius: 4px; background: #4b4b4b; transition: width .3s,background .3s; }
.carousel-dots > button[aria-current="true"] { width: 42px; }
.carousel-dots > button[aria-current="true"]::before { width: 24px; background: #ddd; }
.carousel-navigation { display: flex; align-items: center; gap: 10px; }
.carousel-navigation > button { width: 35px; height: 35px; padding: 0; border: 0; border-radius: 8px; background: #1b1b1b; color: #ccc; font-size: 18px; transition: background .2s,color .2s; }
.carousel-navigation > button:hover { background: #2b2b2b; color: #fff; }
.carousel-navigation > button:disabled { opacity: .3; cursor: default; }
.journal-carousel.is-dragging .journal-grid { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.journal-carousel.is-dragging .journal-card { transition: none; }
.journal-carousel.is-dragging * { cursor: grabbing; user-select: none; }
.landing-page .closing { min-height: 0; padding-block: 125px; }
.landing-page .closing > div > p { color: #999; font-size: 13px; margin-top: 22px; }
@media (max-width: 1100px) {
  .benefits-grid { column-gap: 40px; grid-template-columns: .95fr 1.35fr; }
  .benefits-intro h2 { font-size: 36px; }
  .benefit-item h3 > button { font-size: 26px; }
}
@media (max-width: 1000px) {
  .landing-page .hero { grid-template-columns: 1.05fr 1fr; gap: 7%; padding-block: 100px 85px; }
  .landing-page .hero h1 { font-size: 64px; }
  .hero-explanation > p:not(.hero-note) { font-size: 17px; }
  .hero-actions .button { padding-inline: 16px; font-size: 14px; }
}
@media (max-width: 900px) {
  .benefits-grid { grid-template-columns: 1fr; gap: 35px; max-width: 600px; margin-inline: auto; }
  .benefits-intro,.benefit-list,.benefit-stage { grid-column: 1; grid-row: auto; }
  .benefits-intro h2 br { display: none; }
  .benefits-ready .benefit-stage { height: 460px; }
  .benefits-caption { max-width: 600px; margin-inline: auto; }
  .journal-carousel .journal-card { height: 450px; }
  .story-source,.story-copy { left: 23px; right: 23px; }
}
@media (max-width: 680px) {
  .landing-page .hero { display: block; min-height: 0; padding-block: 80px; }
  .hero-heading .section-label { margin-bottom: 30px; }
  .landing-page .hero h1 { font-size: clamp(44px,8.5vw,59px); }
  .hero-explanation { padding: 0; margin-top: 48px; }
  .hero-explanation > p:not(.hero-note) { max-width: 350px; }
  .screen-chapter,.landing-page .vision-section,.landing-page .wallet-editorial,.landing-page .journal-section,.landing-page .closing { padding-block: 90px; }
  .vision-copy h2,.wallet-editorial h2 { font-size: 36px; }
  .vision-copy > p:not(.section-label),.wallet-editorial > div > p:not(.section-label) { font-size: 18px; }
  .benefits-scroll { padding-block: 75px; }
  .benefits-intro h2 { font-size: 34px; }
  .benefit-item h3 > button { padding-block: 22px; font-size: 26px; }
  .benefit-body { font-size: 16px; }
  .wallet-ownership { padding: 22px; }
  .ownership-layers { grid-template-columns: 1fr; gap: 22px; }
  .wallet-editorial > div > .wallet-detail { font-size: 13px; }
  .journal-carousel .journal-card { height: 440px; }
  .carousel-ready .journal-card.is-active h3 { font-size: 27px; }
  .journal-controls { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-request,.own-agent-old { display: none; }
  .plan-finished,.calendar-app,.mini-confirmed,.own-agent-new,.own-agent-new > .check-icon,.control-answer,.control-request-records,.control-private,.control-outcome,.control-route > b { opacity: 1; transform: none; }
  .own-connection { opacity: 1; }
  .own-connection > i { display: none; }
  .control-route::after { transform: scaleX(1); }
  .control-request-records .control-route::after { transform: scaleX(.5); }
}

/* The same original chat-bot mark carries the communication story. */
.symbol-library { position: absolute; overflow: hidden; pointer-events: none; }
.agent-bot { display: block; fill: currentColor; stroke: none; flex-shrink: 0; }
.agent-bot-flipped { transform: scaleX(-1); }
.agent-exchange { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(640px,100%); height: 60px; margin: 0 auto 25px; }
.agent-exchange > .agent-bot { width: 50px; height: 57px; animation-duration: 4.2s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-fill-mode: both; animation-play-state: paused; }
.exchange-bot-you { color: var(--accent); animation-name: exchange-you; }
.exchange-bot-theirs { color: #717171; animation-name: exchange-theirs; }
.agent-exchange.is-playing > .agent-bot { animation-play-state: running; }
.agent-motion-toggle { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: #818181; transition: color .2s; }
.agent-motion-toggle[hidden] { display: none; }
.agent-motion-toggle:hover { color: var(--accent); }
.agent-motion-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.agent-motion-toggle .motion-play { display: none; fill: currentColor; stroke: none; }
.agent-motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.agent-motion-toggle[aria-pressed="true"] .motion-play { display: block; }
.mini-agent-route > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.mini-agent-route .agent-bot { width: 14px; height: 17px; }
.route-agent-you .agent-bot { animation: route-you var(--scene-duration) linear both; }
.route-agent-theirs .agent-bot { animation: route-theirs var(--scene-duration) linear both; }
.mini-agent-route > i::after { right: auto; width: 16px; background: var(--accent); animation-name: agent-route-signal; }
.own-agent > svg.agent-bot { width: 23px; height: 27px; color: #bcb3c9; }
.own-agent-new > svg.agent-bot { color: var(--accent); }
.control-heading > span:first-child { display: flex; align-items: center; gap: 7px; }
.control-heading .agent-bot { width: 15px; height: 18px; color: #b5b5b5; }
@keyframes exchange-you {0.000%{color:#717171}21.429%{color:#717171}23.571%{color:var(--accent)}25.238%{color:var(--accent)}28.095%{color:#717171}59.524%{color:#717171}61.667%{color:var(--accent)}63.333%{color:var(--accent)}66.190%{color:#717171}68.571%{color:#717171}70.714%{color:var(--accent)}72.381%{color:var(--accent)}75.238%{color:#717171}100.000%{color:#717171}}
@keyframes exchange-theirs {0.000%{color:#717171}31.429%{color:#717171}33.571%{color:var(--accent)}35.238%{color:var(--accent)}38.095%{color:#717171}40.476%{color:#717171}42.619%{color:var(--accent)}44.286%{color:var(--accent)}47.143%{color:#717171}49.524%{color:#717171}51.667%{color:var(--accent)}53.333%{color:var(--accent)}56.190%{color:#717171}78.571%{color:#717171}80.714%{color:var(--accent)}82.381%{color:var(--accent)}85.238%{color:#717171}100.000%{color:#717171}}
@keyframes route-you { 0%,12%,40%,100% { color: var(--accent); } 20%,32% { color: #777; } }
@keyframes route-theirs { 0%,16%,45%,100% { color: #777; } 24%,31% { color: var(--accent); } }
@keyframes agent-route-signal { 0%,5% { left: 0; transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 20%,23% { left: 100%; transform: translateX(-100%); opacity: 0; } 26% { opacity: 1; } 39%,100% { left: 0; transform: translateX(0); opacity: 0; } }
@media(max-width:680px) { .agent-exchange { width: min(480px,100%); height: 48px; margin-bottom: 23px; } .agent-exchange > .agent-bot { width: 39px; height: 45px; } .agent-motion-toggle { top: 10px; } }
@media(prefers-reduced-motion:reduce) { .exchange-bot-you { color: var(--accent); } .exchange-bot-theirs,.route-agent-theirs .agent-bot { color: #777; } .route-agent-you .agent-bot { color: var(--accent); } .agent-motion-toggle { display: none; } }

/* A short conversation creates a rule the user approves. */
.rules-conversation { text-align: center; padding-block: 110px; }
.rules-intro h2 { font-size: clamp(40px,3.5vw,50px); line-height: 1.22; }
.rules-intro > p:not(.section-label) { color: var(--secondary); font-size: 19px; line-height: 1.7; letter-spacing: -.02em; margin-top: 26px; }
.rules-dialogue { width: min(510px,100%); margin: 46px auto 0; text-align: left; }
.rule-chat { padding: 20px 23px; background: #171717; border-radius: 14px; }
.rule-chat-label { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #aaa; margin-bottom: 9px; }
.rule-chat-label .agent-bot { width: 14px; height: 17px; color: var(--accent); }
.rule-chat > p { font-size: 17px; line-height: 1.6; letter-spacing: -.02em; }
.rule-chat-agent { max-width: 375px; border-bottom-left-radius: 4px; }
.rule-chat-you { max-width: 420px; margin: 14px 0 0 auto; background: #222; border-bottom-right-radius: 4px; }
.saved-rule { width: min(375px,100%); margin: 25px auto 0; padding: 20px 23px; background: #171717; border-radius: 14px; }
.saved-rule-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; color: #bbb; padding-bottom: 13px; border-bottom: 1px solid #303030; }
.saved-rule-heading .check-icon { width: 16px; height: 16px; }
.saved-rule dl { margin: 13px 0 0; }
.saved-rule dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; font-size: 13px; line-height: 1.7; margin-top: 5px; }
.saved-rule dt { color: #999; }
.saved-rule dd { margin: 0; }
.rules-dialogue figcaption { text-align: center; font-size: 12px; line-height: 1.7; color: #999; margin-top: 23px; }
.rules-conversation > .text-link { align-self: center; margin-top: 24px; font-size: 14px; }
/* Keep the conversation's motion control outside the illustration. */
.vision-section > .agent-motion-toggle { left: auto; top: auto; right: 0; bottom: 27px; transform: none; width: auto; height: 28px; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; line-height: 1.5; color: #929292; }
.vision-section > .agent-motion-toggle[hidden] { display: none; }
.vision-section > .agent-motion-toggle:hover { color: var(--accent); }
.vision-section > .agent-motion-toggle svg { width: 11px; height: 11px; }
@media(max-width:680px) { .rules-conversation { padding-block: 90px; } .rules-intro h2 { font-size: 36px; } .rules-intro > p:not(.section-label) { font-size: 18px; } .rule-chat { padding: 18px 20px; } .rule-chat > p { font-size: 16px; } }

/* Fast coordination; the remaining time is for reading the goal. */
.mini-agent-route { gap: 12px; justify-content: space-between; }
.mini-agent-route > span { color: #aaa; }
.route-agent-you { animation: route-speaker-you var(--scene-duration) ease both; }
.route-agent-theirs { animation: route-speaker-theirs var(--scene-duration) ease both; }
.route-agent-you .agent-bot,.route-agent-theirs .agent-bot { animation: none; color: inherit; }
@keyframes route-speaker-you {0.000%{color:#aaa}4.167%{color:#aaa}4.917%{color:var(--accent)}5.500%{color:var(--accent)}6.500%{color:#aaa}14.333%{color:#aaa}15.083%{color:var(--accent)}15.667%{color:var(--accent)}16.667%{color:#aaa}17.500%{color:#aaa}18.250%{color:var(--accent)}18.833%{color:var(--accent)}19.833%{color:#aaa}24.500%{color:#aaa}25.250%{color:var(--accent)}25.833%{color:var(--accent)}26.833%{color:#aaa}100.000%{color:#aaa}}
@keyframes route-speaker-theirs {0.000%{color:#aaa}7.667%{color:#aaa}8.417%{color:var(--accent)}9.000%{color:var(--accent)}10.000%{color:#aaa}10.833%{color:#aaa}11.583%{color:var(--accent)}12.167%{color:var(--accent)}13.167%{color:#aaa}21.000%{color:#aaa}21.750%{color:var(--accent)}22.333%{color:var(--accent)}23.333%{color:#aaa}28.000%{color:#aaa}28.750%{color:var(--accent)}29.333%{color:var(--accent)}30.333%{color:#aaa}31.167%{color:#aaa}31.917%{color:var(--accent)}32.500%{color:var(--accent)}33.500%{color:#aaa}100.000%{color:#aaa}}
/* Ownership is the stationary object. Only the active agent changes. */
.own-scene { height: 270px; }
.own-wallet { top: 0; }
.own-agents { position: absolute; left: 15px; right: 15px; top: 230px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.own-agent-label { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #999; white-space: nowrap; }
.own-agent-label .agent-bot { width: 19px; height: 22px; }
.own-current { animation: own-current var(--scene-duration) ease both; }
.own-next { animation: own-next var(--scene-duration) ease both; }
@keyframes own-current { 0%,48% { color: var(--accent); } 52%,100% { color: #999; } }
@keyframes own-next { 0%,48% { color: #999; } 52%,100% { color: var(--accent); } }
/* Speaker points and a voice illustration, with all text immediately available. */
.rule-chat { position: relative; }
.rule-chat-agent { border-bottom-left-radius: 0; }
.rule-chat-you { border-bottom-right-radius: 0; }
.rule-chat-agent::after { content: ''; position: absolute; left: -8px; bottom: 0; width: 8px; height: 12px; background: #171717; clip-path: polygon(100% 0,100% 100%,0 100%); }
.rule-chat-you::after { content: ''; position: absolute; right: -8px; bottom: 0; width: 8px; height: 12px; background: #222; clip-path: polygon(0 0,100% 100%,0 100%); }
.voice-icon { width: 20px; height: 16px; color: var(--accent); }
.voice-icon rect { fill: currentColor; transform-box: fill-box; transform-origin: center; animation-duration: 4.25s; animation-delay: .2s; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: both; animation-play-state: paused; }
.rules-conversation.is-playing .voice-icon rect { animation-play-state: running; }
.motion-ready .rules-dialogue .rule-chat,.motion-ready .rules-dialogue .saved-rule { opacity: 0; transform: translateY(6px); transition: opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1); }
.motion-ready .rules-dialogue.is-revealed .rule-chat,.motion-ready .rules-dialogue.is-revealed .saved-rule { opacity: 1; transform: none; }
.motion-ready .rules-dialogue .rule-chat-you { transition-delay: 80ms; }
.motion-ready .rules-dialogue .saved-rule { transition-delay: 150ms; }
/* One motion-control pattern, 28px from each outer frame edge. */
.screen-chapter > .section-motion-control,.benefits-scroll > .section-motion-control { position: absolute; z-index: 4; left: auto; top: auto; right: calc(50% - min(720px,calc(50vw - 32px)) + 28px); bottom: 28px; transform: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; min-height: 28px; padding: 0; border: 0; border-radius: 5px; background: none; color: #999; font-size: 12px; line-height: 1.5; }
.screen-chapter > .section-motion-control[hidden],.benefits-scroll > .section-motion-control[hidden] { display: none; }
.section-motion-control svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.section-motion-control .motion-play { display: none; fill: currentColor; stroke: none; }
.section-motion-control[aria-pressed="true"] .motion-pause { display: none; }
.section-motion-control[aria-pressed="true"] .motion-play { display: block; }
.screen-chapter > .section-motion-control:hover,.benefits-scroll > .section-motion-control:hover { color: var(--accent); }
@media(max-width:680px) { .screen-chapter > .section-motion-control,.benefits-scroll > .section-motion-control { right: calc(50% - 50vw + 36px); bottom: 20px; } }
@media(pointer:coarse) { .section-motion-control { min-height: 44px !important; } }
@media(prefers-reduced-motion:reduce) { .voice-icon rect { transform: none; } .own-current { color: #999; } .own-next { color: var(--accent); } .motion-ready .rules-dialogue .rule-chat,.motion-ready .rules-dialogue .saved-rule { opacity: 1; transform: none; transition: none; } }

/* Provider brands move; the user's wallet never does. */
.own-scene { height: 300px; }
/* Providers change in place; the wallet never moves. */
.provider-window { position: absolute; width: 330px; height: 60px; left: 50%; top: 232px; transform: translateX(-50%); overflow: hidden; mask-image: linear-gradient(to right,transparent,#000 24%,#000 76%,transparent); }
.provider-track { display: flex; width: max-content; animation: provider-step var(--scene-duration) cubic-bezier(.22,1,.36,1) both; }
.provider-item { display: flex; flex: 0 0 110px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 56px; font-size: 10px; white-space: nowrap; }
.provider-icon { position: relative; display: block; width: 25px; height: 25px; }
.provider-icon img { position: absolute; inset: 0; width: 25px; height: 25px; object-fit: contain; }
.provider-mono { filter: brightness(0) invert(1); opacity: .22; }
.provider-color { opacity: 0; animation-duration: var(--scene-duration); animation-timing-function: linear; animation-fill-mode: both; }
.provider-name { color: #777; animation-duration: var(--scene-duration); animation-timing-function: linear; animation-fill-mode: both; }
.provider-caption { position: absolute; top: 309px; left: 0; right: 0; color: #aaa; font-size: 10px; text-align: center; }
/* Both requests and their outcomes are present from the beginning. */
.control-comparison { width: 530px; height: 270px; padding: 0; background: none; box-shadow: none; }
.comparison-agent { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; color: #bbb; }
.comparison-agent .agent-bot { width: 16px; height: 19px; color: #b5b5b5; }
.comparison-scope { color: #999; font-size: 11px; text-align: center; margin-top: 9px; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.request-result-card { padding: 27px 23px 23px; min-height: 194px; border: 0; border-radius: 15px; background: #1c1c1c; text-align: center; }
.request-result-card > span { color: #ccc; font-size: 17px; letter-spacing: -.025em; }
.comparison-result { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 27px; }
.comparison-result strong { font-size: 32px; line-height: 1.2; letter-spacing: -.045em; font-weight: 450; }
.comparison-result .check-icon { width: 24px; height: 24px; }
.comparison-lock { width: 25px; height: 25px; fill: none; stroke: #aaa; stroke-width: 1; }
.request-result-card > p { color: #aaa; font-size: 11px; margin-top: 24px; }
.request-result-share { animation: comparison-first var(--scene-duration) ease both; }
.request-result-private { animation: comparison-second var(--scene-duration) ease both; }
@keyframes comparison-first { 0%,47% { background: #252525; transform: translateY(-2px); } 53%,100% { background: #1c1c1c; transform: none; } }
@keyframes comparison-second { 0%,47% { background: #1c1c1c; transform: none; } 53%,100% { background: #252525; transform: translateY(-2px); } }
/* Tail shapes overlap their bubble fill to eliminate fractional-pixel seams. */
.rule-chat-agent::after { left: -7px; width: 9px; }
.rule-chat-you::after { right: -7px; width: 9px; }
.landing-page .closing { padding-block: 64px; }
@media(prefers-reduced-motion:reduce) { .provider-track,.request-result-card { transform: none; } }
@media(max-width:600px) { .control-comparison { width: 300px; height: 370px; } .comparison-grid { gap: 11px; grid-template-columns: 1fr; margin-top: 18px; } .request-result-card { min-height: 130px; padding: 16px; } .comparison-result { margin-top: 12px; } .comparison-result strong { font-size: 27px; } .request-result-card > p { margin-top: 11px; } }

.agent-exchange.is-resetting > .agent-bot { animation: none; }
.wallet-wordmark { display: flex; align-items: center; gap: 7px; }
.own-wallet-heading .wallet-lock { width: 14px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.1; }
/* A readable, once-only cascade: all three boxes arrive in under a second. */
.motion-ready .rules-dialogue .rule-chat,.motion-ready .rules-dialogue .saved-rule { transition-duration: .42s,.6s; }
.motion-ready .rules-dialogue .rule-chat-you { transition-delay: 180ms; }
.motion-ready .rules-dialogue .saved-rule { transition-delay: 360ms; }
/* The owner's key governs public authority and private context. */
.wallet-ownership.ownership-diagram { padding: 0; background: none; border-radius: 0; width: min(640px,100%); margin-top: 42px; }
.ownership-diagram .ownership-heading { justify-content: center; padding: 0; border: 0; gap: 13px; font-size: 17px; }
.ownership-diagram .ownership-heading > svg { width: 34px; height: 34px; }
.ownership-branches { display: block; width: 100%; height: 54px; margin: 17px 0 0; fill: none; stroke: #363636; stroke-width: 1; }
.ownership-diagram .ownership-layers { padding: 0; gap: 0; text-align: center; }
.ownership-object { width: 128px; height: 94px; display: block; margin: 0 auto 17px; }
.ownership-diagram .ownership-label { font-size: 11px; }
.ownership-diagram .ownership-layers h3 { font-size: 22px; margin-top: 9px; }
.ownership-diagram .ownership-layers p { font-size: 13px; margin-top: 8px; }
@media(max-width:680px) { .ownership-diagram .ownership-layers { grid-template-columns: 1fr 1fr; } .ownership-diagram .ownership-layers h3 { font-size: 18px; } .ownership-diagram .ownership-layers p { font-size: 11px; } .ownership-object { width: 108px; height: 80px; } }
@media(prefers-reduced-motion:reduce) { .motion-ready .rules-dialogue .rule-chat,.motion-ready .rules-dialogue .saved-rule { opacity: 1; transform: none; } }

/* One short, irregular speech envelope. Each bar has its own amplitude. */
.voice-icon rect:nth-child(1) { animation-name: voice-speaking-0; }
@keyframes voice-speaking-0 { 0.000% { transform: scaleY(0.120); } 1.667% { transform: scaleY(0.348); } 3.333% { transform: scaleY(0.530); } 5.000% { transform: scaleY(0.285); } 6.667% { transform: scaleY(0.389); } 8.333% { transform: scaleY(0.278); } 10.000% { transform: scaleY(0.120); } 11.667% { transform: scaleY(0.120); } 13.333% { transform: scaleY(0.120); } 15.000% { transform: scaleY(0.120); } 16.667% { transform: scaleY(0.120); } 18.333% { transform: scaleY(0.287); } 20.000% { transform: scaleY(0.270); } 21.667% { transform: scaleY(0.421); } 23.333% { transform: scaleY(0.342); } 25.000% { transform: scaleY(0.200); } 26.667% { transform: scaleY(0.556); } 28.333% { transform: scaleY(0.473); } 30.000% { transform: scaleY(0.228); } 31.667% { transform: scaleY(0.304); } 33.333% { transform: scaleY(0.351); } 35.000% { transform: scaleY(0.316); } 36.667% { transform: scaleY(0.335); } 38.333% { transform: scaleY(0.535); } 40.000% { transform: scaleY(0.390); } 41.667% { transform: scaleY(0.208); } 43.333% { transform: scaleY(0.214); } 45.000% { transform: scaleY(0.430); } 46.667% { transform: scaleY(0.397); } 48.333% { transform: scaleY(0.474); } 50.000% { transform: scaleY(0.489); } 51.667% { transform: scaleY(0.340); } 53.333% { transform: scaleY(0.177); } 55.000% { transform: scaleY(0.457); } 56.667% { transform: scaleY(0.331); } 58.333% { transform: scaleY(0.358); } 60.000% { transform: scaleY(0.456); } 61.667% { transform: scaleY(0.120); } 63.333% { transform: scaleY(0.268); } 65.000% { transform: scaleY(0.497); } 66.667% { transform: scaleY(0.277); } 68.333% { transform: scaleY(0.432); } 70.000% { transform: scaleY(0.264); } 71.667% { transform: scaleY(0.120); } 73.333% { transform: scaleY(0.360); } 75.000% { transform: scaleY(0.464); } 76.667% { transform: scaleY(0.625); } 78.333% { transform: scaleY(0.607); } 80.000% { transform: scaleY(0.633); } 81.667% { transform: scaleY(0.247); } 83.333% { transform: scaleY(0.120); } 85.000% { transform: scaleY(0.403); } 86.667% { transform: scaleY(0.358); } 88.333% { transform: scaleY(0.276); } 90.000% { transform: scaleY(0.364); } 91.667% { transform: scaleY(0.287); } 93.333% { transform: scaleY(0.563); } 95.000% { transform: scaleY(0.440); } 96.667% { transform: scaleY(0.158); } 98.333% { transform: scaleY(0.120); } 100.000% { transform: scaleY(0.120); } }
.voice-icon rect:nth-child(2) { animation-name: voice-speaking-1; }
@keyframes voice-speaking-1 { 0.000% { transform: scaleY(0.180); } 1.667% { transform: scaleY(0.480); } 3.333% { transform: scaleY(0.605); } 5.000% { transform: scaleY(0.708); } 6.667% { transform: scaleY(0.781); } 8.333% { transform: scaleY(0.392); } 10.000% { transform: scaleY(0.180); } 11.667% { transform: scaleY(0.180); } 13.333% { transform: scaleY(0.180); } 15.000% { transform: scaleY(0.180); } 16.667% { transform: scaleY(0.180); } 18.333% { transform: scaleY(0.463); } 20.000% { transform: scaleY(0.614); } 21.667% { transform: scaleY(0.630); } 23.333% { transform: scaleY(0.460); } 25.000% { transform: scaleY(0.465); } 26.667% { transform: scaleY(0.673); } 28.333% { transform: scaleY(0.617); } 30.000% { transform: scaleY(0.445); } 31.667% { transform: scaleY(0.474); } 33.333% { transform: scaleY(0.591); } 35.000% { transform: scaleY(0.793); } 36.667% { transform: scaleY(0.955); } 38.333% { transform: scaleY(0.807); } 40.000% { transform: scaleY(0.575); } 41.667% { transform: scaleY(0.324); } 43.333% { transform: scaleY(0.380); } 45.000% { transform: scaleY(0.427); } 46.667% { transform: scaleY(0.663); } 48.333% { transform: scaleY(0.494); } 50.000% { transform: scaleY(0.799); } 51.667% { transform: scaleY(0.520); } 53.333% { transform: scaleY(0.288); } 55.000% { transform: scaleY(0.429); } 56.667% { transform: scaleY(0.391); } 58.333% { transform: scaleY(0.689); } 60.000% { transform: scaleY(0.507); } 61.667% { transform: scaleY(0.180); } 63.333% { transform: scaleY(0.310); } 65.000% { transform: scaleY(0.338); } 66.667% { transform: scaleY(0.765); } 68.333% { transform: scaleY(0.637); } 70.000% { transform: scaleY(0.387); } 71.667% { transform: scaleY(0.180); } 73.333% { transform: scaleY(0.469); } 75.000% { transform: scaleY(0.781); } 76.667% { transform: scaleY(0.777); } 78.333% { transform: scaleY(0.662); } 80.000% { transform: scaleY(0.423); } 81.667% { transform: scaleY(0.626); } 83.333% { transform: scaleY(0.180); } 85.000% { transform: scaleY(0.375); } 86.667% { transform: scaleY(0.694); } 88.333% { transform: scaleY(0.692); } 90.000% { transform: scaleY(0.711); } 91.667% { transform: scaleY(0.643); } 93.333% { transform: scaleY(0.725); } 95.000% { transform: scaleY(0.405); } 96.667% { transform: scaleY(0.256); } 98.333% { transform: scaleY(0.180); } 100.000% { transform: scaleY(0.180); } }
.voice-icon rect:nth-child(3) { animation-name: voice-speaking-2; }
@keyframes voice-speaking-2 { 0.000% { transform: scaleY(0.240); } 1.667% { transform: scaleY(0.454); } 3.333% { transform: scaleY(0.654); } 5.000% { transform: scaleY(0.515); } 6.667% { transform: scaleY(0.560); } 8.333% { transform: scaleY(0.513); } 10.000% { transform: scaleY(0.240); } 11.667% { transform: scaleY(0.240); } 13.333% { transform: scaleY(0.240); } 15.000% { transform: scaleY(0.240); } 16.667% { transform: scaleY(0.240); } 18.333% { transform: scaleY(0.563); } 20.000% { transform: scaleY(0.440); } 21.667% { transform: scaleY(0.605); } 23.333% { transform: scaleY(0.422); } 25.000% { transform: scaleY(0.546); } 26.667% { transform: scaleY(0.470); } 28.333% { transform: scaleY(0.933); } 30.000% { transform: scaleY(0.462); } 31.667% { transform: scaleY(0.439); } 33.333% { transform: scaleY(0.488); } 35.000% { transform: scaleY(1.000); } 36.667% { transform: scaleY(0.802); } 38.333% { transform: scaleY(0.706); } 40.000% { transform: scaleY(0.549); } 41.667% { transform: scaleY(0.398); } 43.333% { transform: scaleY(0.535); } 45.000% { transform: scaleY(0.799); } 46.667% { transform: scaleY(0.479); } 48.333% { transform: scaleY(0.590); } 50.000% { transform: scaleY(0.670); } 51.667% { transform: scaleY(0.538); } 53.333% { transform: scaleY(0.368); } 55.000% { transform: scaleY(0.755); } 56.667% { transform: scaleY(0.878); } 58.333% { transform: scaleY(0.853); } 60.000% { transform: scaleY(0.591); } 61.667% { transform: scaleY(0.240); } 63.333% { transform: scaleY(0.584); } 65.000% { transform: scaleY(0.589); } 66.667% { transform: scaleY(0.447); } 68.333% { transform: scaleY(0.780); } 70.000% { transform: scaleY(0.533); } 71.667% { transform: scaleY(0.240); } 73.333% { transform: scaleY(0.429); } 75.000% { transform: scaleY(0.908); } 76.667% { transform: scaleY(1.000); } 78.333% { transform: scaleY(0.849); } 80.000% { transform: scaleY(0.869); } 81.667% { transform: scaleY(0.489); } 83.333% { transform: scaleY(0.240); } 85.000% { transform: scaleY(0.660); } 86.667% { transform: scaleY(0.702); } 88.333% { transform: scaleY(0.834); } 90.000% { transform: scaleY(0.810); } 91.667% { transform: scaleY(0.665); } 93.333% { transform: scaleY(0.675); } 95.000% { transform: scaleY(0.417); } 96.667% { transform: scaleY(0.320); } 98.333% { transform: scaleY(0.240); } 100.000% { transform: scaleY(0.240); } }
.voice-icon rect:nth-child(4) { animation-name: voice-speaking-3; }
@keyframes voice-speaking-3 { 0.000% { transform: scaleY(0.160); } 1.667% { transform: scaleY(0.285); } 3.333% { transform: scaleY(0.563); } 5.000% { transform: scaleY(0.421); } 6.667% { transform: scaleY(0.625); } 8.333% { transform: scaleY(0.353); } 10.000% { transform: scaleY(0.160); } 11.667% { transform: scaleY(0.160); } 13.333% { transform: scaleY(0.160); } 15.000% { transform: scaleY(0.160); } 16.667% { transform: scaleY(0.160); } 18.333% { transform: scaleY(0.381); } 20.000% { transform: scaleY(0.533); } 21.667% { transform: scaleY(0.382); } 23.333% { transform: scaleY(0.452); } 25.000% { transform: scaleY(0.370); } 26.667% { transform: scaleY(0.411); } 28.333% { transform: scaleY(0.627); } 30.000% { transform: scaleY(0.330); } 31.667% { transform: scaleY(0.319); } 33.333% { transform: scaleY(0.429); } 35.000% { transform: scaleY(0.580); } 36.667% { transform: scaleY(0.461); } 38.333% { transform: scaleY(0.668); } 40.000% { transform: scaleY(0.366); } 41.667% { transform: scaleY(0.234); } 43.333% { transform: scaleY(0.450); } 45.000% { transform: scaleY(0.699); } 46.667% { transform: scaleY(0.449); } 48.333% { transform: scaleY(0.687); } 50.000% { transform: scaleY(0.653); } 51.667% { transform: scaleY(0.355); } 53.333% { transform: scaleY(0.293); } 55.000% { transform: scaleY(0.347); } 56.667% { transform: scaleY(0.567); } 58.333% { transform: scaleY(0.648); } 60.000% { transform: scaleY(0.499); } 61.667% { transform: scaleY(0.160); } 63.333% { transform: scaleY(0.361); } 65.000% { transform: scaleY(0.437); } 66.667% { transform: scaleY(0.704); } 68.333% { transform: scaleY(0.538); } 70.000% { transform: scaleY(0.514); } 71.667% { transform: scaleY(0.160); } 73.333% { transform: scaleY(0.362); } 75.000% { transform: scaleY(0.709); } 76.667% { transform: scaleY(0.394); } 78.333% { transform: scaleY(0.930); } 80.000% { transform: scaleY(0.852); } 81.667% { transform: scaleY(0.349); } 83.333% { transform: scaleY(0.160); } 85.000% { transform: scaleY(0.334); } 86.667% { transform: scaleY(0.366); } 88.333% { transform: scaleY(0.636); } 90.000% { transform: scaleY(0.586); } 91.667% { transform: scaleY(0.651); } 93.333% { transform: scaleY(0.645); } 95.000% { transform: scaleY(0.364); } 96.667% { transform: scaleY(0.199); } 98.333% { transform: scaleY(0.160); } 100.000% { transform: scaleY(0.160); } }
.voice-icon rect:nth-child(5) { animation-name: voice-speaking-4; }
@keyframes voice-speaking-4 { 0.000% { transform: scaleY(0.100); } 1.667% { transform: scaleY(0.211); } 3.333% { transform: scaleY(0.273); } 5.000% { transform: scaleY(0.294); } 6.667% { transform: scaleY(0.357); } 8.333% { transform: scaleY(0.345); } 10.000% { transform: scaleY(0.100); } 11.667% { transform: scaleY(0.100); } 13.333% { transform: scaleY(0.100); } 15.000% { transform: scaleY(0.100); } 16.667% { transform: scaleY(0.100); } 18.333% { transform: scaleY(0.203); } 20.000% { transform: scaleY(0.281); } 21.667% { transform: scaleY(0.314); } 23.333% { transform: scaleY(0.191); } 25.000% { transform: scaleY(0.314); } 26.667% { transform: scaleY(0.425); } 28.333% { transform: scaleY(0.430); } 30.000% { transform: scaleY(0.301); } 31.667% { transform: scaleY(0.320); } 33.333% { transform: scaleY(0.367); } 35.000% { transform: scaleY(0.266); } 36.667% { transform: scaleY(0.415); } 38.333% { transform: scaleY(0.425); } 40.000% { transform: scaleY(0.215); } 41.667% { transform: scaleY(0.144); } 43.333% { transform: scaleY(0.250); } 45.000% { transform: scaleY(0.489); } 46.667% { transform: scaleY(0.316); } 48.333% { transform: scaleY(0.430); } 50.000% { transform: scaleY(0.398); } 51.667% { transform: scaleY(0.332); } 53.333% { transform: scaleY(0.202); } 55.000% { transform: scaleY(0.269); } 56.667% { transform: scaleY(0.225); } 58.333% { transform: scaleY(0.290); } 60.000% { transform: scaleY(0.260); } 61.667% { transform: scaleY(0.100); } 63.333% { transform: scaleY(0.323); } 65.000% { transform: scaleY(0.277); } 66.667% { transform: scaleY(0.396); } 68.333% { transform: scaleY(0.279); } 70.000% { transform: scaleY(0.348); } 71.667% { transform: scaleY(0.100); } 73.333% { transform: scaleY(0.253); } 75.000% { transform: scaleY(0.512); } 76.667% { transform: scaleY(0.372); } 78.333% { transform: scaleY(0.620); } 80.000% { transform: scaleY(0.579); } 81.667% { transform: scaleY(0.332); } 83.333% { transform: scaleY(0.100); } 85.000% { transform: scaleY(0.218); } 86.667% { transform: scaleY(0.435); } 88.333% { transform: scaleY(0.452); } 90.000% { transform: scaleY(0.274); } 91.667% { transform: scaleY(0.331); } 93.333% { transform: scaleY(0.497); } 95.000% { transform: scaleY(0.350); } 96.667% { transform: scaleY(0.141); } 98.333% { transform: scaleY(0.100); } 100.000% { transform: scaleY(0.100); } }
.rules-conversation.is-resetting .voice-icon rect { animation: none; }
.own-scene { height: 332px; }
@media(prefers-reduced-motion:reduce) { .provider-color { opacity: 1; } .provider-name { color: #bbb; } .voice-icon rect { transform: scaleY(.2); } }

/* Brief slide, then a readable hold. The active brand lands at the centre. */
@keyframes provider-step { 0% { transform: translateX(0); } 11.2857% { transform: translateX(0px); } 14.2857% { transform: translateX(-110px); } 25.5714% { transform: translateX(-110px); } 28.5714% { transform: translateX(-220px); } 39.8571% { transform: translateX(-220px); } 42.8571% { transform: translateX(-330px); } 54.1429% { transform: translateX(-330px); } 57.1429% { transform: translateX(-440px); } 68.4286% { transform: translateX(-440px); } 71.4286% { transform: translateX(-550px); } 82.7143% { transform: translateX(-550px); } 85.7143% { transform: translateX(-660px); } 97.0000% { transform: translateX(-660px); } 100.0000% { transform: translateX(-770px); } }
.provider-item[data-provider-position="0"] .provider-color { animation-name: provider-color-0; }
.provider-item[data-provider-position="0"] .provider-name { animation-name: provider-name-0; }
@keyframes provider-color-0 { 0.0000% { opacity: 0; } 11.2857% { opacity: 0; } 14.2857% { opacity: 0; } 25.5714% { opacity: 0; } 28.5714% { opacity: 0; } 39.8571% { opacity: 0; } 42.8571% { opacity: 0; } 54.1429% { opacity: 0; } 57.1429% { opacity: 0; } 68.4286% { opacity: 0; } 71.4286% { opacity: 0; } 82.7143% { opacity: 0; } 85.7143% { opacity: 0; } 97.0000% { opacity: 0; } 100.0000% { opacity: 0; } }
@keyframes provider-name-0 { 0.0000% { color: #777; } 11.2857% { color: #777; } 14.2857% { color: #777; } 25.5714% { color: #777; } 28.5714% { color: #777; } 39.8571% { color: #777; } 42.8571% { color: #777; } 54.1429% { color: #777; } 57.1429% { color: #777; } 68.4286% { color: #777; } 71.4286% { color: #777; } 82.7143% { color: #777; } 85.7143% { color: #777; } 97.0000% { color: #777; } 100.0000% { color: #777; } }
.provider-item[data-provider-position="1"] .provider-color { animation-name: provider-color-1; }
.provider-item[data-provider-position="1"] .provider-name { animation-name: provider-name-1; }
@keyframes provider-color-1 { 0.0000% { opacity: 1; } 11.2857% { opacity: 1; } 14.2857% { opacity: 0; } 25.5714% { opacity: 0; } 28.5714% { opacity: 0; } 39.8571% { opacity: 0; } 42.8571% { opacity: 0; } 54.1429% { opacity: 0; } 57.1429% { opacity: 0; } 68.4286% { opacity: 0; } 71.4286% { opacity: 0; } 82.7143% { opacity: 0; } 85.7143% { opacity: 0; } 97.0000% { opacity: 0; } 100.0000% { opacity: 0; } }
@keyframes provider-name-1 { 0.0000% { color: #eee; } 11.2857% { color: #eee; } 14.2857% { color: #777; } 25.5714% { color: #777; } 28.5714% { color: #777; } 39.8571% { color: #777; } 42.8571% { color: #777; } 54.1429% { color: #777; } 57.1429% { color: #777; } 68.4286% { color: #777; } 71.4286% { color: #777; } 82.7143% { color: #777; } 85.7143% { color: #777; } 97.0000% { color: #777; } 100.0000% { color: #777; } }
.provider-item[data-provider-position="2"] .provider-color { animation-name: provider-color-2; }
.provider-item[data-provider-position="2"] .provider-name { animation-name: provider-name-2; }
@keyframes provider-color-2 { 0.0000% { opacity: 0; } 11.2857% { opacity: 0; } 14.2857% { opacity: 1; } 25.5714% { opacity: 1; } 28.5714% { opacity: 0; } 39.8571% { opacity: 0; } 42.8571% { opacity: 0; } 54.1429% { opacity: 0; } 57.1429% { opacity: 0; } 68.4286% { opacity: 0; } 71.4286% { opacity: 0; } 82.7143% { opacity: 0; } 85.7143% { opacity: 0; } 97.0000% { opacity: 0; } 100.0000% { opacity: 0; } }
@keyframes provider-name-2 { 0.0000% { color: #777; } 11.2857% { color: #777; } 14.2857% { color: #eee; } 25.5714% { color: #eee; } 28.5714% { color: #777; } 39.8571% { color: #777; } 42.8571% { color: #777; } 54.1429% { color: #777; } 57.1429% { color: #777; } 68.4286% { color: #777; } 71.4286% { color: #777; } 82.7143% { color: #777; } 85.7143% { color: #777; } 97.0000% { color: #777; } 100.0000% { color: #777; } }
.provider-item[data-provider-position="3"] .provider-color { animation-name: provider-color-3; }
.provider-item[data-provider-position="3"] .provider-name { animation-name: provider-name-3; }
@keyframes provider-color-3 { 0.0000% { opacity: 0; } 11.2857% { opacity: 0; } 14.2857% { opacity: 0; } 25.5714% { opacity: 0; } 28.5714% { opacity: 1; } 39.8571% { opacity: 1; } 42.8571% { opacity: 0; } 54.1429% { opacity: 0; } 57.1429% { opacity: 0; } 68.4286% { opacity: 0; } 71.4286% { opacity: 0; } 82.7143% { opacity: 0; } 85.7143% { opacity: 0; } 97.0000% { opacity: 0; } 100.0000% { opacity: 0; } }
@keyframes provider-name-3 { 0.0000% { color: #777; } 11.2857% { color: #777; } 14.2857% { color: #777; } 25.5714% { color: #777; } 28.5714% { color: #eee; } 39.8571% { color: #eee; } 42.8571% { color: #777; } 54.1429% { color: #777; } 57.1429% { color: #777; } 68.4286% { color: #777; } 71.4286% { color: #777; } 82.7143% { color: #777; } 85.7143% { color: #777; } 97.0000% { color: #777; } 100.0000% { color: #777; } }
.provider-item[data-provider-position="4"] .provider-color { animation-name: provider-color-4; }
.provider-item[data-provider-position="4"] .provider-name { animation-name: provider-name-4; }
@keyframes provider-color-4 { 0.0000% { opacity: 0; } 11.2857% { opacity: 0; } 14.2857% { opacity: 0; } 25.5714% { opacity: 0; } 28.5714% { opacity: 0; } 39.8571% { opacity: 0; } 42.8571% { opacity: 1; } 54.1429% { opacity: 1; } 57.1429% { opacity: 0; } 68.4286% { opacity: 0; } 71.4286% { opacity: 0; } 82.7143% { opacity: 0; } 85.7143% { opacity: 0; } 97.0000% { opacity: 0; } 100.0000% { opacity: 0; } }
@keyframes provider-name-4 { 0.0000% { color: #777; } 11.2857% { color: #777; } 14.2857% { color: #777; } 25.5714% { color: #777; } 28.5714% { color: #777; } 39.8571% { color: #777; } 42.8571% { color: #eee; } 54.1429% { color: #eee; } 57.1429% { color: #777; } 68.4286% { color: #777; } 71.4286% { color: #777; } 82.7143% { color: #777; } 85.7143% { color: #777; } 97.0000% { color: #777; } 100.0000% { color: #777; } }
.provider-item[data-provider-position="5"] .provider-color { animation-name: provider-color-5; }
.provider-item[data-provider-position="5"] .provider-name { animation-name: provider-name-5; }
@keyframes provider-color-5 { 0.0000% { opacity: 0; } 11.2857% { opacity: 0; } 14.2857% { opacity: 0; } 25.5714% { opacity: 0; } 28.5714% { opacity: 0; } 39.8571% { opacity: 0; } 42.8571% { opacity: 0; } 54.1429% { opacity: 0; } 57.1429% { opacity: 1; } 68.4286% { opacity: 1; } 71.4286% { opacity: 0; } 82.7143% { opacity: 0; } 85.7143% { opacity: 0; } 97.0000% { opacity: 0; } 100.0000% { opacity: 0; } }
@keyframes provider-name-5 { 0.0000% { color: #777; } 11.2857% { color: #777; } 14.2857% { color: #777; } 25.5714% { color: #777; } 28.5714% { color: #777; } 39.8571% { color: #777; } 42.8571% { color: #777; } 54.1429% { color: #777; } 57.1429% { color: #eee; } 68.4286% { color: #eee; } 71.4286% { color: #777; } 82.7143% { color: #777; } 85.7143% { color: #777; } 97.0000% { color: #777; } 100.0000% { color: #777; } }
.provider-item[data-provider-position="6"] .provider-color { animation-name: provider-color-6; }
.provider-item[data-provider-position="6"] .provider-name { animation-name: provider-name-6; }
@keyframes provider-color-6 { 0.0000% { opacity: 0; } 11.2857% { opacity: 0; } 14.2857% { opacity: 0; } 25.5714% { opacity: 0; } 28.5714% { opacity: 0; } 39.8571% { opacity: 0; } 42.8571% { opacity: 0; } 54.1429% { opacity: 0; } 57.1429% { opacity: 0; } 68.4286% { opacity: 0; } 71.4286% { opacity: 1; } 82.7143% { opacity: 1; } 85.7143% { opacity: 0; } 97.0000% { opacity: 0; } 100.0000% { opacity: 0; } }
@keyframes provider-name-6 { 0.0000% { color: #777; } 11.2857% { color: #777; } 14.2857% { color: #777; } 25.5714% { color: #777; } 28.5714% { color: #777; } 39.8571% { color: #777; } 42.8571% { color: #777; } 54.1429% { color: #777; } 57.1429% { color: #777; } 68.4286% { color: #777; } 71.4286% { color: #eee; } 82.7143% { color: #eee; } 85.7143% { color: #777; } 97.0000% { color: #777; } 100.0000% { color: #777; } }
.provider-item[data-provider-position="7"] .provider-color { animation-name: provider-color-7; }
.provider-item[data-provider-position="7"] .provider-name { animation-name: provider-name-7; }
@keyframes provider-color-7 { 0.0000% { opacity: 0; } 11.2857% { opacity: 0; } 14.2857% { opacity: 0; } 25.5714% { opacity: 0; } 28.5714% { opacity: 0; } 39.8571% { opacity: 0; } 42.8571% { opacity: 0; } 54.1429% { opacity: 0; } 57.1429% { opacity: 0; } 68.4286% { opacity: 0; } 71.4286% { opacity: 0; } 82.7143% { opacity: 0; } 85.7143% { opacity: 1; } 97.0000% { opacity: 1; } 100.0000% { opacity: 0; } }
@keyframes provider-name-7 { 0.0000% { color: #777; } 11.2857% { color: #777; } 14.2857% { color: #777; } 25.5714% { color: #777; } 28.5714% { color: #777; } 39.8571% { color: #777; } 42.8571% { color: #777; } 54.1429% { color: #777; } 57.1429% { color: #777; } 68.4286% { color: #777; } 71.4286% { color: #777; } 82.7143% { color: #777; } 85.7143% { color: #eee; } 97.0000% { color: #eee; } 100.0000% { color: #777; } }
.provider-item[data-provider-position="8"] .provider-color { animation-name: provider-color-8; }
.provider-item[data-provider-position="8"] .provider-name { animation-name: provider-name-8; }
@keyframes provider-color-8 { 0.0000% { opacity: 0; } 11.2857% { opacity: 0; } 14.2857% { opacity: 0; } 25.5714% { opacity: 0; } 28.5714% { opacity: 0; } 39.8571% { opacity: 0; } 42.8571% { opacity: 0; } 54.1429% { opacity: 0; } 57.1429% { opacity: 0; } 68.4286% { opacity: 0; } 71.4286% { opacity: 0; } 82.7143% { opacity: 0; } 85.7143% { opacity: 0; } 97.0000% { opacity: 0; } 100.0000% { opacity: 1; } }
@keyframes provider-name-8 { 0.0000% { color: #777; } 11.2857% { color: #777; } 14.2857% { color: #777; } 25.5714% { color: #777; } 28.5714% { color: #777; } 39.8571% { color: #777; } 42.8571% { color: #777; } 54.1429% { color: #777; } 57.1429% { color: #777; } 68.4286% { color: #777; } 71.4286% { color: #777; } 82.7143% { color: #777; } 85.7143% { color: #777; } 97.0000% { color: #777; } 100.0000% { color: #eee; } }
.provider-item[data-provider-position="9"] .provider-color { animation-name: provider-color-9; }
.provider-item[data-provider-position="9"] .provider-name { animation-name: provider-name-9; }
@keyframes provider-color-9 { 0.0000% { opacity: 0; } 11.2857% { opacity: 0; } 14.2857% { opacity: 0; } 25.5714% { opacity: 0; } 28.5714% { opacity: 0; } 39.8571% { opacity: 0; } 42.8571% { opacity: 0; } 54.1429% { opacity: 0; } 57.1429% { opacity: 0; } 68.4286% { opacity: 0; } 71.4286% { opacity: 0; } 82.7143% { opacity: 0; } 85.7143% { opacity: 0; } 97.0000% { opacity: 0; } 100.0000% { opacity: 0; } }
@keyframes provider-name-9 { 0.0000% { color: #777; } 11.2857% { color: #777; } 14.2857% { color: #777; } 25.5714% { color: #777; } 28.5714% { color: #777; } 39.8571% { color: #777; } 42.8571% { color: #777; } 54.1429% { color: #777; } 57.1429% { color: #777; } 68.4286% { color: #777; } 71.4286% { color: #777; } 82.7143% { color: #777; } 85.7143% { color: #777; } 97.0000% { color: #777; } 100.0000% { color: #777; } }
.provider-white { filter: brightness(0) invert(1); }
.rule-chat-agent::after,.rule-chat-you::after { content: none; }
.ownership-diagram .ownership-layers h3 { margin-top: 0; }
.ownership-diagram .ownership-layers p { font-size: 13px; line-height: 1.7; }
.ownership-diagram .ownership-label { margin-top: 14px; color: #888; font-size: 11px; }
@media(prefers-reduced-motion:reduce) { .provider-track { animation: none; transform: none; } .provider-color { opacity: 1; } .provider-name { color: #bbb; } }