/* Echo landing page — edit colors in :root and breakpoints near the end. */

:root {
  --ink:#050814;
  --navy:#080e21;
  --paper:#edf3f2;
  --text:#f3f6fc;
  --muted:#939cad;
  --cyan:#35e6e1;
  --violet:#bb77ff;
  --line:rgba(161,190,221,.16);
  --ease:cubic-bezier(.2,.75,.2,1)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}

body {
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  border:0
}

img {
  display:block;
  max-width:100%
}

.echo-icon {
  display:inline-block;
  width:1em;
  height:1em;
  flex:none;
  vertical-align:-.14em;
  overflow:visible;
  pointer-events:none
}

.window-top .echo-icon{width:12px;height:12px}
.back-to-top .echo-icon{width:22px;height:22px}

h1,h2,h3,p,figure {
  margin:0
}

h1,h2,h3 {
  font-weight:550
}

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

::selection {
  background:#36ddd6;
  color:#04131a
}

.container {
  width:min(1200px,calc(100% - 100px));
  margin-inline:auto
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:11px;
  line-height:1.6;
  font-weight:500;
  letter-spacing:1.5px;
  color:#a8bccb
}

.muted {
  color:#8997ac
}

.signal-dot,.tiny-dot {
  display:inline-block;
  width:6px;
  height:6px;
  flex:none;
  background:var(--cyan);
  border-radius:50%;
  box-shadow:0 0 14px #35e6e18c
}

.skip-link {
  position:fixed;
  left:18px;
  top:-100px;
  z-index:100;
  padding:14px 20px;
  background:var(--cyan);
  color:#031219
}

.skip-link:focus {
  top:12px
}

.site-header {
  height:94px;
  position:fixed;
  inset:0 0 auto;
  z-index:30;
  transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent
}

.site-header.is-scrolled {
  background:rgba(5,8,20,.96);
  border-color:var(--line);
  backdrop-filter:blur(16px)
}

.nav-wrap {
  width:min(1320px,calc(100% - 80px));
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:none
}

.brand img {
  width:48px;
  height:48px;
  object-fit:contain
}

.brand span {
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-size:37px;
  letter-spacing:-2px;
  font-weight:400;
  line-height:1
}

.desktop-nav {
  display:flex;
  gap:3px;
  margin-left:auto;
  margin-right:auto;
  padding:4px;
  border:1px solid #a8c7e20e;
  border-radius:999px;
  background:linear-gradient(120deg,#d6f7ff06,#b88bff04)
}

.desktop-nav a {
  font-size:13px;
  color:#a5aebf;
  padding:10px 15px;
  border-radius:999px;
  transition:color .2s,background .2s,box-shadow .2s
}

.desktop-nav a:hover {
  color:#e5fffc;
  background:#48d9db0c;
  box-shadow:inset 0 0 0 1px #71e3e312
}

.nav-cta {
  font-size:12px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:19px;
  min-height:44px;
  border:1px solid #63e7e34d;
  border-radius:999px;
  padding:7px 9px 7px 20px;
  background:linear-gradient(115deg,#19444cba,#181c36cf);
  box-shadow:inset 0 1px 0 #d4ffff12,0 4px 24px #18a9b00a;
  backdrop-filter:blur(12px);
  transition:border-color .2s,background .2s,box-shadow .2s
}

.nav-cta:hover {
  border-color:#78fff3a3;
  background:linear-gradient(115deg,#20535bd9,#252445e8);
  box-shadow:inset 0 1px 0 #d4ffff1c,0 0 24px #35e6e11c
}

.nav-cta span {
  font-size:17px;
  color:#9dfaf0;
  display:grid;
  place-items:center;
  flex:none;
  width:29px;
  height:29px;
  border-radius:50%;
  background:linear-gradient(135deg,#42e5d51d,#a987ff12);
  box-shadow:inset 0 0 0 1px #adfff11c;
  transition:transform .2s var(--ease),background .2s
}

.nav-cta:hover span{transform:translate(1px,-1px);background:#5eeedd26}

.menu-toggle,.mobile-nav {
  display:none
}

.hero {
  position:relative;
  overflow:hidden;
  padding-top:141px;
  isolation:isolate;
  min-height:860px
}

.hero-haze {
  position:absolute;
  z-index:-2;
  inset:0;
  background:radial-gradient(ellipse 500px 380px at 80% 47%,#15264671,transparent),radial-gradient(ellipse 700px 650px at 104% 40%,#48247826,transparent),radial-gradient(ellipse 450px 500px at -13% 14%,#0b585926,transparent)
}

.hero:before {
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:1px;
  z-index:-1;
  background:linear-gradient(90deg,transparent 35%,#214c5b44,transparent)
}

.hero-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:24px;
  min-height:636px
}

.hero-copy {
  position:relative;
  z-index:3;
  padding-bottom:27px
}

.hero-copy .eyebrow {
  font-size:10px;
  letter-spacing:1.35px;
  margin-bottom:28px
}

.hero h1 {
  font-size:clamp(65px,7vw,96px);
  line-height:1.06;
  letter-spacing:-6px;
  white-space:nowrap;
  font-weight:550
}

.hero h1 em {
  font-style:normal;
  background:linear-gradient(106deg,#37f3e8 5%,#54b9ff 45%,#ba77ff 86%);
  color:transparent;
  background-clip:text;
  -webkit-background-clip:text
}

.hero-description {
  max-width:486px;
  color:#9faabd;
  font-size:17px;
  line-height:1.85;
  margin-top:29px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:31px;
  margin-top:37px
}

.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  min-height:54px;
  padding:16px 22px;
  font-size:13px;
  font-weight:650;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:background .2s,transform .2s
}

.button:hover {
  transform:translateY(-2px)
}

.button-primary {
  color:#021c25;
  background:var(--cyan)
}

.button-primary:hover {
  background:#75ffed
}

.button span {
  font-size:20px
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:18px;
  font-size:13px;
  color:#c0cad7;
  line-height:1.5
}

.text-link span {
  color:var(--cyan);
  font-size:18px;
  transition:transform .2s
}

.text-link:hover span {
  transform:translate(2px,2px)
}

.hero-platform {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  letter-spacing:.15px;
  color:#778698;
  margin-top:22px
}

.hero-platform svg {
  height:15px;
  width:15px;
  fill:none;
  stroke:#91a1b4;
  stroke-width:1.4
}

.hero-scene {
  position:relative;
  height:630px;
  min-width:0
}

.signal-orbit {
  position:absolute;
  border:1px solid rgba(72,154,189,.19);
  border-radius:50%;
  width:562px;
  height:562px;
  left:-8px;
  top:30px;
  transform:rotate(-30deg)
}

.orbit-one:after {
  content:"";
  position:absolute;
  top:60px;
  right:81px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#56e8ec;
  box-shadow:0 0 24px var(--cyan)
}

.orbit-two {
  width:658px;
  height:658px;
  left:-54px;
  top:-16px;
  border-color:#9265c519;
  border-style:dashed
}

.hero-window {
  position:absolute;
  left:100px;
  top:9px;
  width:326px;
  height:572px;
  background:#040710;
  border:1px solid #34405d;
  border-radius:15px;
  box-shadow:0 28px 80px #0009,0 0 30px #4399ff08;
  transform:rotate(1.5deg);
  overflow:hidden;
  z-index:2
}

.window-top {
  height:35px;
  background:linear-gradient(90deg,#142336,#14172c);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 12px;
  font-size:7px;
  letter-spacing:1px;
  color:#a7b7c8
}

.window-dots {
  display:flex;
  gap:4px
}

.window-dots i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#5f6c7f
}

.window-dots i:first-child {
  background:#58c8c2
}

.hero-screen {
  height:508px;
  overflow:hidden
}

.hero-screen img {
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center
}

.hero-window figcaption {
  height:27px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-top:1px solid #243243;
  font-size:7px;
  letter-spacing:.4px;
  color:#93adbf
}

.hero-window .tiny-dot {
  width:3px;
  height:3px
}

.scene-label {
  display:flex;
  gap:13px;
  align-items:center;
  position:absolute;
  z-index:4;
  padding:15px 18px;
  border:1px solid #66d9e12c;
  border-radius:18px;
  background:linear-gradient(120deg,#112737cc,#0e1428c9);
  box-shadow:0 18px 38px #00000038,inset 0 1px 0 #d8faff13,inset 0 -1px 0 #0810203d;
  backdrop-filter:blur(18px) saturate(1.25)
}

.scene-label small {
  display:block;
  color:#97b9c9;
  font-family:inherit;
  font-size:8px;
  letter-spacing:.75px;
  margin-bottom:5px;
  font-weight:600
}

.scene-label strong {
  font-size:13px;
  font-weight:600;
  color:#e4f9f8
}

.label-voice {
  left:0;
  top:103px;
  transform:rotate(-3deg)
}

.label-monday {
  right:-1px;
  bottom:71px;
  transform:rotate(2deg);
  border-color:#ad8de131;
  background:linear-gradient(120deg,#152a38d9,#211a36c9)
}

.mini-wave {
  display:flex;
  align-items:center;
  gap:3px;
  height:24px
}

.mini-wave i {
  display:block;
  width:3px;
  height:10px;
  border-radius:2px;
  background:var(--cyan)
}

.mini-wave i:nth-child(2),.mini-wave i:nth-child(4) {
  height:18px
}

.mini-wave i:nth-child(3) {
  height:27px
}

.monday-symbol {
  display:flex;
  gap:3px;
  align-items:center;
  transform:rotate(23deg)
}

.monday-symbol i {
  display:block;
  border-radius:10px;
  width:5px;
  height:19px;
  background:#f77085
}

.monday-symbol i:nth-child(2) {
  background:#f4c463
}

.monday-symbol i:nth-child(3) {
  height:6px;
  background:#50e1c0
}

.scene-coordinate {
  position:absolute;
  bottom:6px;
  left:142px;
  font:8px Consolas,monospace;
  letter-spacing:2px;
  color:#53617b
}

.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0 34px
}

.hero-index {
  font:9px Consolas,monospace;
  letter-spacing:1px;
  color:var(--cyan)
}

.hero-index span {
  margin-left:20px;
  color:#556277
}

.scroll-cue {
  font-size:10px;
  letter-spacing:.5px;
  color:#7e8ca2;
  display:flex;
  gap:24px
}

.scroll-cue span {
  color:var(--cyan)
}

.intro {
  padding:81px 0 120px;
  border-top:1px solid #15243a
}

.intro-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:120px;
  margin-top:28px;
  align-items:center
}

.intro h2 {
  font-size:64px;
  line-height:1.11;
  letter-spacing:-3px
}

.intro h2 span {
  color:#77899e
}

.intro-explanation p {
  font-size:17px;
  line-height:1.9;
  color:#9dabbc;
  margin-bottom:21px
}

.intro-explanation .text-link {
  margin-top:10px
}

.capability-rail {
  display:flex;
  justify-content:space-between;
  gap:25px;
  margin-top:67px;
  border-top:1px solid var(--line);
  padding-top:25px;
  color:#a4b1c1;
  font-size:12px
}

.capability-rail b {
  font:10px Consolas,monospace;
  color:var(--cyan);
  margin-right:13px;
  font-weight:400
}

.workspace-section {
  background:var(--paper);
  color:#112028;
  position:relative;
  padding:94px 0 110px;
  isolation:isolate
}

.section-blade {
  height:64px;
  position:absolute;
  top:-34px;
  left:0;
  width:100%;
  background:var(--paper);
  transform:skewY(-2.6deg);
  transform-origin:center;
  z-index:-1;
  border-top:2px solid #7ce6df
}

.workspace-head {
  position:relative
}

.dark-eyebrow {
  color:#387573
}

.workspace-head h2 {
  font-size:68px;
  line-height:1.05;
  letter-spacing:-3.8px;
  margin-top:22px
}

.workspace-head h2 span {
  color:#71827e
}

.workspace-head>p {
  max-width:450px;
  font-size:16px;
  line-height:1.8;
  color:#677a76;
  margin-top:24px
}

.tour-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:90px;
  margin-top:52px;
  align-items:start
}

.tour-controls {
  padding-top:18px
}

.tour-tabs {
  border-top:1px solid #bbccc6
}

.tour-tab {
  background:transparent;
  text-align:left;
  width:100%;
  display:flex;
  align-items:center;
  gap:19px;
  padding:24px 0;
  border-bottom:1px solid #bbccc6;
  color:#758783;
  transition:color .2s,padding .2s;
  font-size:17px;
  font-weight:600
}

.tour-tab .tab-number {
  font:10px Consolas,monospace;
  color:#8b9d97
}

.tab-arrow {
  margin-left:auto;
  font-size:22px;
  opacity:0;
  transform:translate(-5px,5px);
  transition:opacity .2s,transform .2s
}

.tour-tab.is-active {
  color:#102e2d;
  padding-left:12px
}

.tour-tab.is-active .tab-number {
  color:#14877d
}

.tour-tab.is-active .tab-arrow {
  opacity:1;
  transform:none;
  color:#0d827d
}

.tour-tab:hover {
  color:#143c38
}

.tour-explanation {
  padding-top:35px
}

.tour-kicker {
  font:9px Consolas,monospace;
  letter-spacing:1.2px;
  color:#4e7871
}

.tour-explanation h3 {
  white-space:pre-line;
  font-size:34px;
  letter-spacing:-1.4px;
  line-height:1.18;
  margin:14px 0 18px
}

.tour-explanation p {
  font-size:15px;
  line-height:1.85;
  color:#596f68;
  max-width:445px
}

.tour-tags {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:23px
}

.tour-tags span {
  font-size:9px;
  color:#42695f;
  background:#dce8e2;
  border:1px solid #c5d6ce;
  padding:7px 10px
}

.tour-footnote {
  display:flex;
  gap:12px;
  color:#80998d;
  margin-top:38px
}

.tour-footnote>span {
  font-size:25px;
  color:#248778
}

.tour-footnote p {
  font-size:10px;
  line-height:1.7
}

.tour-stage {
  min-width:0;
  background:#040712;
  border:1px solid #bfceca;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 20px 50px #1b484118
}

.stage-top {
  height:45px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:0 18px;
  color:#90a4b4;
  font:8px Consolas,monospace;
  letter-spacing:.5px;
  background:#0e1825;
  border-bottom:1px solid #223645
}

.stage-top .window-dots {
  gap:5px
}

.stage-top .window-dots i {
  width:5px;
  height:5px
}

.stage-count {
  color:#53b5ac;
  white-space:nowrap
}

.tour-image-frame {
  height:605px;
  position:relative;
  overflow:hidden
}

.tour-image-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}

.stage-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #1e2a3e;
  padding:15px 18px;
  color:#667b8c;
  font:8px Consolas,monospace;
  letter-spacing:.4px;
  background:#08101d
}

.enlarge-button {
  display:flex;
  align-items:center;
  gap:12px;
  background:none;
  font:10px "Segoe UI",sans-serif;
  letter-spacing:0;
  color:#c0d8dd;
  padding:3px
}

.enlarge-button span {
  font-size:17px;
  color:var(--cyan)
}

.enlarge-button:hover {
  color:var(--cyan)
}

.capture-section {
  padding:118px 0 98px;
  background:#050a15;
  position:relative;
  isolation:isolate
}

.capture-section:before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:52px;
  top:-25px;
  background:#050a15;
  transform:skewY(-2deg);
  z-index:-1
}

.capture-grid {
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:95px;
  align-items:end
}

.record-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#e988bf
}

.capture-heading h2 {
  font-size:52px;
  letter-spacing:-2.4px;
  line-height:1.13;
  margin-top:24px
}

.capture-heading h2 span {
  color:#8496ad
}

.capture-grid>p {
  color:#98a9bd;
  font-size:16px;
  line-height:1.85;
  padding-bottom:5px
}

.wave-stage {
  height:230px;
  position:relative;
  margin-top:24px;
  display:flex;
  align-items:center;
  overflow:hidden
}

.wave-fade {
  height:180px;
  position:absolute;
  left:15%;
  right:15%;
  top:10px;
  filter:blur(45px);
  background:radial-gradient(ellipse,#153a4970,transparent 68%)
}

.wave-line {
  position:relative;
  width:100%;
  height:140px;
  overflow:visible
}

.wave-line path {
  stroke:url(#waveGradient);
  stroke-width:1.7;
  fill:none;
  filter:drop-shadow(0 0 8px #62b3cf44)
}

.wave-node {
  position:absolute;
  top:113px;
  left:50%;
  width:4px;
  height:4px;
  background:var(--cyan);
  border-radius:50%;
  box-shadow:0 0 28px 8px #259dad55
}

.capture-steps {
  max-width:865px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.capture-steps>div {
  display:flex;
  gap:14px;
  align-items:center
}

.capture-steps strong {
  font-size:13px;
  font-weight:500;
  color:#c1cedb
}

.step-symbol {
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  color:#859bea;
  font-size:29px
}

.record-symbol:before {
  content:"";
  width:15px;
  height:15px;
  border-radius:50%;
  background:#e590ba;
  box-shadow:0 0 0 5px #e590ba10
}

.step-connector {
  font-size:18px;
  color:#3e536a
}

.review-symbol {
  font-size:23px;
  color:#b18be7
}

.assistant-section {
  background:radial-gradient(ellipse 760px 470px at 12% 38%,#40295833,transparent),#0b0a1b;
  padding:105px 0 86px;
  position:relative
}

.assistant-section:before {
  content:"";
  position:absolute;
  top:0;
  left:12%;
  right:12%;
  height:1px;
  background:linear-gradient(90deg,transparent,#7a539d77,transparent)
}

.assistant-grid {
  display:grid;
  grid-template-columns:1fr 1.18fr;
  gap:95px;
  align-items:center
}

.assistant-art {
  height:395px;
  position:relative;
  display:grid;
  place-items:center
}

.assistant-art>img {
  width:325px;
  height:325px;
  object-fit:contain;
  position:relative;
  z-index:2
}

.assistant-orbit {
  position:absolute;
  width:355px;
  height:355px;
  border:1px solid #694f7e44;
  border-radius:50%
}

.inner-orbit {
  width:415px;
  height:415px;
  border-style:dashed;
  border-color:#73538620
}

.assistant-satellite {
  position:absolute;
  z-index:3;
  font:8px Consolas,monospace;
  letter-spacing:1.1px;
  border:1px solid #73548280;
  background:#140f25;
  color:#b3a0ce;
  padding:12px 15px
}

.satellite-one {
  top:20px;
  left:-4px;
  transform:rotate(-5deg)
}

.satellite-two {
  right:-8px;
  bottom:26px;
  transform:rotate(4deg)
}

.assistant-art-caption {
  position:absolute;
  bottom:-26px;
  color:#675775;
  font:8px Consolas,monospace;
  letter-spacing:2px
}

.violet-eyebrow {
  color:#b493d5
}

.assistant-copy h2 {
  font-size:52px;
  line-height:1.14;
  letter-spacing:-2.6px;
  margin-top:24px
}

.assistant-copy h2 span {
  color:#a794c1
}

.assistant-copy p {
  font-size:17px;
  line-height:1.85;
  color:#bab4cb;
  margin-top:24px
}

.assistant-copy .assistant-secondary {
  font-size:14px;
  line-height:1.85;
  color:#837d98;
  margin-top:18px
}

.adjutant-rail {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:25px;
  margin-top:90px;
  border-top:1px solid #49405b77;
  padding-top:25px
}

.adjutant-rail>div {
  position:relative
}

.adjutant-rail>div:before {
  content:"";
  position:absolute;
  top:-27px;
  left:0;
  width:28px;
  height:2px;
  background:#9178b6
}

.adjutant-rail span {
  font:9px Consolas,monospace;
  color:#766486
}

.adjutant-rail h3 {
  font-size:29px;
  letter-spacing:-.8px;
  margin-top:12px
}

.adjutant-rail p {
  font-size:11px;
  color:#8c819e;
  margin-top:8px
}

.faq-section {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:105px;
  padding:124px 0
}

.faq-heading h2 {
  font-size:45px;
  line-height:1.17;
  letter-spacing:-2px;
  margin-top:25px
}

.faq-list {
  border-top:1px solid var(--line)
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

.faq-list summary {
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  padding:24px 0;
  font-size:15px;
  color:#bdc9d8;
  list-style:none
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary span {
  font-size:23px;
  font-weight:300;
  color:#7b9fbc;
  transition:transform .2s
}

.faq-list details[open] summary span {
  transform:rotate(45deg);
  color:var(--cyan)
}

.faq-list details[open] summary {
  color:#e7f5ff
}

.faq-list details p {
  font-size:14px;
  line-height:1.9;
  color:#8d9baf;
  padding:0 30px 26px 0;
  max-width:550px
}

.closing-section {
  position:relative;
  overflow:hidden;
  padding:92px 0 96px;
  background:#091320;
  isolation:isolate
}

.closing-section:before {
  position:absolute;
  content:"";
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#46afb6aa,transparent)
}

.closing-signal {
  position:absolute;
  width:1300px;
  height:650px;
  border:1px solid #75ced623;
  border-radius:50%;
  left:50%;
  top:195px;
  transform:translateX(-50%);
  box-shadow:0 0 100px #3ee1cf07,0 -4px 36px #64d5c00d;
  z-index:-1
}

.closing-signal:after {
  content:"";
  position:absolute;
  inset:40px -100px;
  border:1px solid #8675d820;
  border-radius:50%
}

.closing-content {
  text-align:center
}

.closing-content .eyebrow {
  justify-content:center;
  font-size:10px;
  letter-spacing:1.75px;
  color:#7eabbb
}

.closing-content h2 {
  font-size:72px;
  line-height:1.07;
  letter-spacing:-4px;
  margin-top:24px
}

.closing-content h2 span {
  background:linear-gradient(100deg,#5ee9dc,#b5a0ff);
  color:transparent;
  background-clip:text;
  -webkit-background-clip:text
}

.closing-content .button {
  margin-top:32px
}

.closing-content>p {
  margin-top:23px;
  font-size:11px;
  color:#698797
}

.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:29px 0 36px
}

.footer-brand img {
  width:39px;
  height:39px
}

.footer-brand span {
  font-size:31px
}

.site-footer>span {
  font-size:11px;
  color:#58677e
}

.site-footer>div {
  display:flex;
  gap:32px;
  align-items:center
}

.site-footer>div a {
  font-size:11px;
  color:#8ba0b7
}

.site-footer small {
  font-size:10px;
  color:#596278
}

.back-to-top {
  position:fixed;
  right:23px;
  bottom:23px;
  z-index:20;
  width:40px;
  height:40px;
  border:1px solid #527b91;
  background:#081424ef;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--cyan);
  font-size:20px;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .2s,transform .2s
}

.back-to-top.is-visible {
  opacity:1;
  pointer-events:auto;
  transform:none
}

.dialog-open {
  overflow:hidden
}

.image-dialog {
  width:min(1350px,94vw);
  max-height:92vh;
  padding:0;
  background:#08101e;
  color:white;
  border:1px solid #46637b;
  border-radius:12px;
  overflow:auto;
  margin:auto;
  box-shadow:0 20px 100px #000b
}

.image-dialog::backdrop {
  background:#030511e8;
  backdrop-filter:blur(7px)
}

.dialog-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 21px;
  border-bottom:1px solid var(--line)
}

.dialog-top h2 {
  font-size:15px;
  font-weight:500
}

.dialog-top button {
  font-size:29px;
  background:none;
  color:#b4c7dd;
  padding:2px 9px
}

.image-dialog>img {
  width:100%;
  height:auto
}

.image-dialog>p {
  font-size:11px;
  line-height:1.7;
  padding:16px 22px;
  color:#9bb0c4
}

.will-reveal {
  opacity:.15;
  transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)
}

.will-reveal.is-revealed {
  opacity:1;
  transform:none
}

/* Scene-specific scroll choreography. Static document is the no-JS fallback. */
.tour-scroll-track{position:relative}
.intro h2 .intro-line{display:block;color:inherit}
.intro h2 .intro-line:last-child{color:#77899e}
.closing-line{display:block}
.closing-content h2 .closing-line:first-child{color:inherit}
.echo-motion .site-header:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));transform:scaleX(var(--page-progress,0));transform-origin:left;opacity:.7}

/* Hero: a depth move into the interface, with departing foreground layers. */
.echo-motion .hero-sticky{position:relative;isolation:isolate}
.echo-motion .hero-scene{perspective:1400px}
.echo-motion .hero-window{transform:translate3d(calc(var(--hero-focus,0) * -14vw),calc(var(--hero-focus,0) * 8px),0) rotateY(calc(var(--hero-focus,0) * -6deg)) rotateZ(calc(1.5deg - var(--hero-focus,0) * 1.5deg)) scale(calc(1 + var(--hero-focus,0) * .38))}
.echo-motion .hero-copy{transform:translate3d(calc(var(--hero-copy-out,0) * -24vw),calc(var(--hero-copy-out,0) * -35px),0);opacity:calc(1 - var(--hero-copy-out,0))}
.echo-motion .hero-copy:focus-within{opacity:1;transform:none}
.echo-motion .hero .orbit-one{transform:rotate(calc(-30deg + var(--hero-focus,0) * 155deg)) scale(calc(1 + var(--hero-focus,0) * .65))}
.echo-motion .hero .orbit-two{transform:rotate(calc(-30deg - var(--hero-focus,0) * 120deg)) scale(calc(1 + var(--hero-focus,0) * 1.1))}
.echo-motion .label-voice{translate:calc(var(--hero-labels-out,0) * -230px) calc(var(--hero-labels-out,0) * -140px);opacity:calc(1 - var(--hero-labels-out,0))}
.echo-motion .label-monday{translate:calc(var(--hero-labels-out,0) * 200px) calc(var(--hero-labels-out,0) * 190px);opacity:calc(1 - var(--hero-labels-out,0))}
.echo-motion .scene-coordinate{letter-spacing:calc(2px + var(--hero-focus,0) * 5px);opacity:calc(1 - var(--hero-focus,0))}

/* Intro: oversized lines meet from opposing sides, then a connected rail draws. */
.echo-motion .intro{position:relative}
.echo-motion .intro-line{transform:translateX(calc((1 - var(--line-arrival,0)) * var(--line-direction,-1) * 115px));opacity:calc(.3 + var(--line-arrival,0) * .7)}
.echo-motion .intro-line:last-child{color:color-mix(in srgb,#77899e, var(--cyan) calc(var(--line-arrival,0) * 100%))}
.echo-motion .capability-rail{position:relative;border-top-color:transparent}
.echo-motion .capability-rail:before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--cyan),#537baf,var(--violet));transform:scaleX(var(--intro-rule,0));transform-origin:left}
.echo-motion .capability-rail>span{opacity:calc(.25 + var(--capability-on,0) * .75)}
.echo-motion .capability-rail b{display:inline-block;transform:scale(calc(.75 + var(--capability-on,0) * .25));text-shadow:0 0 calc(var(--capability-on,0) * 15px) #35e6e170}

/* Product tour: the screenshot frame settles square, chapters advance in place. */
.echo-motion .tour-stage{transform:perspective(1500px) rotateY(calc((1 - var(--tour-arrival,0)) * -13deg)) rotateZ(calc((1 - var(--tour-arrival,0)) * 3deg));transform-origin:right center}
.echo-story .tour-scroll-track{height:340svh;margin-top:52px}
.echo-story .tour-layout{position:sticky;top:104px;margin-top:0;align-items:center;padding-block:12px}
.echo-story .tour-image-frame{height:clamp(360px,calc(100svh - 270px),605px)}
.echo-story .tour-tab{padding-block:16px}
.echo-story .tour-explanation{padding-top:22px}
.echo-story .tour-footnote{margin-top:18px}
.echo-story .tour-stage{position:relative;box-shadow:0 28px 80px #1b484130}
.echo-story .tour-stage:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--violet));transform:scaleX(var(--tour-progress,0));transform-origin:left}

/* Capture: a traced signal, a travelling scan point, then three connected steps. */
.echo-motion .wave-line path{stroke-dasharray:var(--wave-length,2500);stroke-dashoffset:calc(var(--wave-length,2500) * (1 - var(--signal-draw,0)))}
.echo-motion .wave-line{transform:scaleY(calc(1.35 - var(--signal-settle,0) * .95));transform-origin:center}
.echo-motion .wave-node{left:calc(var(--signal-draw,0) * 100%);width:6px;height:6px;opacity:calc(1 - var(--signal-settle,0));box-shadow:0 0 24px 8px #35e6e166}
.echo-motion .wave-fade{opacity:calc(.25 + var(--signal-draw,0) * .75)}
.echo-motion .capture-steps{position:relative;padding-top:30px}
.echo-motion .capture-steps:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,#e590ba,var(--cyan),var(--violet));transform:scaleX(var(--capture-rule,0));transform-origin:left}
.echo-motion .capture-steps>div{opacity:calc(.25 + var(--step-on,0) * .75)}
.echo-motion .capture-steps .step-symbol{transform:scale(calc(.85 + var(--step-on,0) * .15));filter:drop-shadow(0 0 calc(var(--step-current,0) * var(--step-on,0) * 14px) #7fe8ef)}
.echo-motion .capture-steps strong{color:color-mix(in srgb,#526075,#ecf7ff calc(var(--step-on,0) * 100%))}
.echo-motion .step-connector{clip-path:inset(0 calc((1 - var(--capture-rule,0)) * 100%) 0 0);color:#81a8c0}
.echo-motion .transcript-symbol{position:relative}
.echo-motion .transcript-symbol:after{content:"";position:absolute;left:2px;right:2px;top:calc((1 - var(--step-on,0)) * 100%);height:1px;background:var(--cyan);opacity:calc(1 - var(--step-on,0))}
.echo-motion .review-symbol{transform:scale(calc(.85 + var(--step-on,0) * .15)) rotate(calc((1 - var(--step-on,0)) * -45deg))}

/* Adjutant: orbit locks into place; a fanned deck spreads into five views. */
.echo-motion .assistant-section{overflow:clip}
.echo-motion .assistant-art>img{transform:perspective(1000px) rotateY(calc((1 - var(--assistant-lock,0)) * -65deg)) scale(calc(.65 + var(--assistant-lock,0) * .35));filter:drop-shadow(0 0 calc(var(--assistant-lock,0) * 20px) #6c8ecf28)}
.echo-motion .assistant-orbit{transform:rotate(calc(var(--assistant-orbit,0) * 180deg)) scale(calc(1.3 - var(--assistant-lock,0) * .3));border-radius:calc(25% + var(--assistant-lock,0) * 25%)}
.echo-motion .assistant-orbit:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--cyan);left:20%;top:7%;box-shadow:0 0 16px var(--cyan)}
.echo-motion .assistant-orbit.inner-orbit{transform:rotate(calc(var(--assistant-orbit,0) * -160deg)) scale(calc(.65 + var(--assistant-lock,0) * .35))}
.echo-motion .satellite-one{translate:calc((1 - var(--assistant-lock,0)) * -90px) calc((1 - var(--assistant-lock,0)) * -35px)}
.echo-motion .satellite-two{translate:calc((1 - var(--assistant-lock,0)) * 90px) calc((1 - var(--assistant-lock,0)) * 35px)}
.echo-motion .adjutant-rail{perspective:1100px}
.echo-motion .adjutant-rail>div{transform:translate3d(calc((1 - var(--card-spread,0)) * var(--card-index,0) * -110px),calc((1 - var(--card-spread,0)) * 50px),0) rotate(calc((1 - var(--card-spread,0)) * var(--card-index,0) * 12deg));transform-origin:center 170%;background:linear-gradient(145deg,#141126,#0b0a1b);padding:16px;border:1px solid #79618b33;border-radius:10px}
.echo-motion .adjutant-rail>div:before{top:-27px;transform:scaleX(var(--card-spread,0));transform-origin:left}
.echo-motion .adjutant-rail p{color:#a49ab4}

/* Closing: a lens opens and two lines come into focus from opposite directions. */
.echo-motion .closing-section:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 100%,#164449a8,#13213e80 50%,#091320);clip-path:circle(calc(8% + var(--closing-open,0) * 92%) at 50% 75%)}
.echo-motion .closing-signal{transform:translateX(-50%) rotate(calc(-18deg + var(--closing-open,0) * 30deg)) scale(calc(.45 + var(--closing-open,0) * .85));top:120px}
.echo-motion .closing-content .closing-line{transform:translateX(calc((1 - var(--closing-lock,0)) * -65px));filter:none}
.echo-motion .closing-content .closing-line:last-child{transform:translateX(calc((1 - var(--closing-lock,0)) * 65px))}
.echo-motion .closing-content>.button{position:relative;z-index:1}

@media(min-width:1100px) and (min-height:780px){
 .echo-story .hero{height:185svh;min-height:0;padding-top:0;overflow:visible}
 .echo-story .hero-sticky{position:sticky;top:0;height:100svh;overflow:clip;padding-top:112px;display:flex;flex-direction:column;justify-content:center}
 .echo-story .hero-grid{min-height:0;flex:1;max-height:670px}
 .echo-story .hero-scene{height:min(630px,calc(100svh - 155px))}
 .echo-story .hero-bottom{flex:none}
 .echo-story .hero-haze{position:absolute;inset:0}
 .echo-story .capture-section{height:175svh;padding:0}
 .echo-story .capture-scene{position:sticky;top:94px;min-height:calc(100svh - 94px);display:flex;flex-direction:column;justify-content:center;padding:50px 0}
 .echo-story .wave-stage{height:200px;flex:none}
}
@media(max-width:1099px),(max-height:779px){
 .echo-motion .hero-window{transform:translateY(calc(var(--hero-focus,0) * -45px)) rotate(calc(1.5deg - var(--hero-focus,0) * 4deg))}
 .echo-motion .hero-copy{transform:none;opacity:1}
 .echo-motion .label-voice{translate:calc(var(--hero-labels-out,0) * -18px) calc(var(--hero-labels-out,0) * -25px);opacity:1}
 .echo-motion .label-monday{translate:calc(var(--hero-labels-out,0) * 18px) calc(var(--hero-labels-out,0) * 25px);opacity:1}
 .echo-motion .intro-line{transform:translateX(calc((1 - var(--line-arrival,0)) * var(--line-direction,-1) * 25px))}
 .echo-motion .tour-stage{transform:perspective(1500px) rotateX(calc((1 - var(--tour-arrival,0)) * 7deg))}
 .echo-motion .adjutant-rail>div{transform:rotate(calc((1 - var(--card-spread,0)) * var(--card-index,0) * 3deg));padding:12px}
 .echo-motion .assistant-art>img{transform:scale(calc(.8 + var(--assistant-lock,0) * .2))}
 .echo-motion .closing-content .closing-line{transform:translateX(calc((1 - var(--closing-lock,0)) * -15px));filter:none}
 .echo-motion .closing-content .closing-line:last-child{transform:translateX(calc((1 - var(--closing-lock,0)) * 15px))}
}
@media(prefers-reduced-motion:reduce){
 .hero-sticky,.capture-scene{height:auto;position:relative}
 .tour-scroll-track{height:auto!important}
}

@media(min-width:1550px) {
  .hero {
    min-height:920px;
    padding-top:163px
  }

  .hero-grid {
    min-height:655px
  }

  .hero h1 {
    font-size:105px
  }

  .hero-description {
    font-size:18px
  }

  .hero-scene {
    transform:scale(1.04);
    transform-origin:center
  }

}

@media(max-width:1200px) {
  .container {
    width:calc(100% - 72px)
  }

  .hero h1 {
    font-size:77px;
    letter-spacing:-4.5px
  }

  .hero-scene {
    transform:scale(.9);
    transform-origin:center right;
    height:605px
  }

  .hero-grid {
    gap:0;
    grid-template-columns:1.12fr 1fr
  }

  .hero-window {
    left:66px
  }

  .label-voice {
    left:-19px
  }

  .label-monday {
    right:-19px
  }

  .hero-description {
    max-width:440px;
    font-size:16px
  }

  .intro-grid {
    gap:70px
  }

  .tour-layout {
    gap:55px
  }

  .capture-grid {
    gap:55px
  }

  .assistant-grid {
    gap:70px
  }

  .assistant-copy h2 {
    font-size:45px
  }

  .faq-section {
    gap:65px
  }

  .capability-rail {
    gap:15px;
    font-size:11px
  }

}

@media(max-width:950px) {
  .desktop-nav {
    gap:2px
  }

  .desktop-nav a {
    font-size:11px;
    padding:9px 10px
  }

  .nav-wrap {
    width:calc(100% - 50px);
    gap:25px
  }

  .nav-cta {
    padding:11px 13px;
    gap:15px
  }

  .brand span {
    font-size:32px
  }

  .brand img {
    width:41px;
    height:41px
  }

  .hero {
    min-height:780px;
    padding-top:135px
  }

  .hero-grid {
    grid-template-columns:1.12fr 1fr;
    min-height:565px
  }

  .hero h1 {
    font-size:65px;
    letter-spacing:-4px
  }

  .hero-scene {
    transform:scale(.78);
    transform-origin:50% 40%;
    margin-left:-30px
  }

  .hero-copy .eyebrow {
    font-size:8px;
    max-width:300px;
    letter-spacing:.8px
  }

  .hero-description {
    font-size:15px;
    line-height:1.8
  }

  .hero-actions {
    gap:22px;
    flex-wrap:wrap
  }

  .button {
    font-size:12px;
    padding:15px 17px;
    gap:20px
  }

  .hero-platform {
    font-size:8px
  }

  .intro h2 {
    font-size:52px
  }

  .intro-grid {
    gap:55px
  }

  .intro-explanation p {
    font-size:15px
  }

  .capability-rail {
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:19px 35px
  }

  .workspace-head h2 {
    font-size:56px
  }

  .tour-layout {
    gap:35px;
    grid-template-columns:1fr 1fr
  }

  .tour-tab {
    font-size:14px;
    gap:12px;
    padding:23px 0
  }

  .tour-explanation h3 {
    font-size:28px
  }

  .tour-explanation p {
    font-size:13px
  }

  .tour-image-frame {
    height:610px
  }

  .stage-top {
    font-size:6px;
    padding:0 12px;
    gap:8px
  }

  .stage-bottom {
    font-size:6px;
    padding:14px 11px
  }

  .capture-heading h2 {
    font-size:42px
  }

  .capture-grid>p {
    font-size:14px
  }

  .capture-grid {
    gap:40px
  }

  .assistant-grid {
    grid-template-columns:.85fr 1.15fr;
    gap:45px
  }

  .assistant-art {
    transform:scale(.8);
    transform-origin:center
  }

  .assistant-copy h2 {
    font-size:38px
  }

  .assistant-copy p {
    font-size:15px
  }

  .adjutant-rail h3 {
    font-size:25px
  }

  .adjutant-rail p {
    font-size:10px
  }

  .faq-heading h2 {
    font-size:37px
  }

  .faq-section {
    gap:40px
  }

  .faq-list summary {
    font-size:14px
  }

  .closing-content h2 {
    font-size:61px
  }

  .site-footer>span {
    display:none
  }

}

@media(max-width:720px) {
  html {
    scroll-padding-top:76px
  }

  .container {
    width:calc(100% - 42px)
  }

  .site-header {
    height:76px
  }

  .nav-wrap {
    width:calc(100% - 36px);
    gap:18px
  }

  .brand img {
    width:39px;
    height:39px
  }

  .brand span {
    font-size:30px
  }

  .desktop-nav {
    display:none
  }

  .nav-cta {
    margin-left:auto;
    font-size:10px;
    padding:10px 12px;
    gap:13px
  }

  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:32px;
    height:38px;
    padding:6px;
    background:none
  }

  .menu-toggle span {
    display:block;
    width:20px;
    height:1px;
    background:#b7d2db;
    transition:transform .2s
  }

  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3px) rotate(45deg)
  }

  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3px) rotate(-45deg)
  }

  .mobile-nav:not([hidden]) {
    display:flex;
    flex-direction:column;
    padding:18px 24px 24px;
    background:#081121fa;
    border-bottom:1px solid #294051;
    box-shadow:0 20px 30px #0004;
    gap:0
  }

  .mobile-nav a {
    font-size:15px;
    padding:13px 0;
    color:#bfd0df
  }

  .hero {
    padding-top:124px;
    min-height:0
  }

  .hero-grid {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:25px;
    min-height:0
  }

  .hero-copy {
    padding-bottom:0
  }

  .hero-copy .eyebrow {
    font-size:8px;
    letter-spacing:.8px;
    max-width:none;
    margin-bottom:24px
  }

  .hero h1 {
    font-size:clamp(55px,11.8vw,83px);
    letter-spacing:-3.6px;
    line-height:1.05
  }

  .hero-description {
    font-size:16px;
    line-height:1.8;
    margin-top:25px;
    max-width:530px
  }

  .hero-actions {
    gap:27px;
    margin-top:28px
  }

  .hero-platform {
    font-size:9px;
    margin-top:20px
  }

  .hero-scene {
    width:min(440px,100%);
    height:572px;
    margin:14px auto 0;
    transform:none
  }

  .hero-window {
    width:296px;
    height:535px;
    left:50%;
    top:10px;
    margin-left:-148px;
    transform:rotate(1.25deg)
  }

  .hero-screen {
    height:471px
  }

  .scene-label {
    padding:12px 13px;
    gap:11px
  }

  .scene-label small {
    font-size:6px;
    letter-spacing:.6px;
    margin-bottom:4px
  }

  .scene-label strong {
    font-size:11px
  }

  .label-voice {
    left:-3px;
    top:83px
  }

  .label-monday {
    right:-2px;
    bottom:44px
  }

  .mini-wave {
    transform:scale(.85)
  }

  .monday-symbol {
    transform:rotate(23deg) scale(.85)
  }

  .signal-orbit {
    left:50%;
    margin-left:-235px;
    width:470px;
    height:470px;
    top:40px
  }

  .orbit-two {
    width:550px;
    height:550px;
    margin-left:-275px;
    top:0
  }

  .scene-coordinate {
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    font-size:7px
  }

  .hero-bottom {
    padding:31px 0 28px
  }

  .hero-index {
    font-size:8px
  }

  .hero-index span {
    font-size:6px;
    margin-left:11px
  }

  .scroll-cue {
    font-size:8px;
    gap:9px
  }

  .intro {
    padding:58px 0 88px
  }

  .intro-grid {
    grid-template-columns:1fr;
    gap:27px;
    margin-top:21px
  }

  .intro h2 {
    font-size:51px;
    line-height:1.1;
    letter-spacing:-2.8px
  }

  .intro-explanation p {
    font-size:15px;
    line-height:1.85;
    margin-bottom:17px
  }

  .intro-explanation .text-link {
    margin-top:5px
  }

  .capability-rail {
    margin-top:38px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px 10px;
    padding-top:24px;
    font-size:10px
  }

  .capability-rail b {
    margin-right:7px;
    font-size:8px
  }

  .workspace-section {
    padding:61px 0 77px
  }

  .section-blade {
    height:40px;
    top:-20px;
    transform:skewY(-4deg)
  }

  .workspace-head h2 {
    font-size:47px;
    letter-spacing:-2.6px;
    margin-top:19px
  }

  .workspace-head>p {
    font-size:14px;
    line-height:1.8;
    margin-top:21px
  }

  .tour-layout {
    display:flex;
    flex-direction:column;
    margin-top:23px;
    gap:28px
  }

  .tour-controls {
    width:100%;
    padding:0
  }

  .tour-tabs {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:15px
  }

  .tour-tab {
    font-size:11px;
    gap:8px;
    padding:18px 0
  }

  .tour-tab.is-active {
    padding-left:0
  }

  .tab-number {
    font-size:8px!important
  }

  .tab-arrow {
    font-size:15px
  }

  .tour-explanation {
    padding-top:25px
  }

  .tour-kicker {
    font-size:8px
  }

  .tour-explanation h3 {
    font-size:29px;
    letter-spacing:-1px;
    margin:11px 0 15px
  }

  .tour-explanation p {
    font-size:14px;
    line-height:1.8;
    max-width:530px
  }

  .tour-tags {
    margin-top:18px
  }

  .tour-tags span {
    font-size:8px;
    padding:6px 8px
  }

  .tour-footnote {
    display:none
  }

  .tour-stage {
    width:100%;
    max-width:510px;
    margin:auto
  }

  .tour-image-frame {
    height:585px
  }

  .stage-top {
    height:37px;
    font-size:7px
  }

  .stage-bottom {
    font-size:7px
  }

  .enlarge-button {
    font-size:10px
  }

  .capture-section {
    padding:79px 0 65px
  }

  .capture-grid {
    grid-template-columns:1fr;
    gap:24px
  }

  .capture-heading h2 {
    font-size:41px;
    letter-spacing:-2px;
    margin-top:19px
  }

  .capture-grid>p {
    font-size:15px;
    max-width:490px
  }

  .wave-stage {
    height:172px;
    margin-top:15px
  }

  .wave-line {
    height:125px;
    width:145%;
    min-width:145%;
    margin-left:-22.5%
  }

  .wave-node {
    top:85px
  }

  .capture-steps {
    display:flex;
    align-items:flex-start;
    gap:10px
  }

  .capture-steps>div {
    flex-direction:column;
    gap:10px;
    align-items:flex-start
  }

  .capture-steps strong {
    font-size:10px;
    line-height:1.5;
    max-width:100px
  }

  .step-symbol {
    width:23px;
    height:25px
  }

  .step-connector {
    font-size:13px;
    margin-top:10px
  }

  .assistant-section {
    padding:65px 0 59px;
    overflow:hidden
  }

  .assistant-grid {
    display:flex;
    flex-direction:column;
    gap:35px
  }

  .assistant-art {
    order:2;
    width:320px;
    height:280px;
    transform:none;
    margin-top:2px
  }

  .assistant-art>img {
    height:250px;
    width:250px
  }

  .assistant-orbit {
    width:265px;
    height:265px
  }

  .inner-orbit {
    width:320px;
    height:320px
  }

  .assistant-satellite {
    font-size:6px;
    padding:10px 12px;
    letter-spacing:.5px
  }

  .satellite-one {
    top:11px;
    left:1px
  }

  .satellite-two {
    right:-5px;
    bottom:15px
  }

  .assistant-art-caption {
    font-size:6px;
    bottom:-17px
  }

  .assistant-copy h2 {
    font-size:43px;
    letter-spacing:-2.2px;
    margin-top:20px
  }

  .assistant-copy p {
    font-size:16px;
    line-height:1.85;
    margin-top:23px
  }

  .assistant-copy .assistant-secondary {
    font-size:14px;
    line-height:1.8
  }

  .adjutant-rail {
    grid-template-columns:repeat(3,1fr);
    margin-top:63px;
    gap:33px 20px;
    padding-top:24px
  }

  .adjutant-rail>div:before {
    width:20px;
    top:-26px
  }

  .adjutant-rail>div:nth-child(n+4):before {
    display:none
  }

  .adjutant-rail h3 {
    font-size:24px;
    margin-top:8px
  }

  .adjutant-rail p {
    font-size:9px
  }

  .faq-section {
    display:block;
    padding:77px 0
  }

  .faq-heading h2 {
    font-size:41px;
    margin-top:20px
  }

  .faq-list {
    margin-top:32px
  }

  .faq-list summary {
    font-size:14px;
    line-height:1.5;
    padding:22px 0
  }

  .faq-list details p {
    font-size:13px;
    padding-right:15px
  }

  .closing-section {
    padding:70px 0 66px
  }

  .closing-content .eyebrow {
    font-size:7px;
    letter-spacing:1px
  }

  .closing-content h2 {
    font-size:45px;
    letter-spacing:-2.5px;
    line-height:1.13;
    margin-top:24px
  }

  .closing-content .button {
    margin-top:27px
  }

  .closing-content>p {
    font-size:9px;
    line-height:1.9;
    max-width:275px;
    margin:20px auto 0
  }

  .closing-signal {
    width:720px;
    height:550px;
    top:175px
  }

  .site-footer {
    padding:27px 0;
    gap:15px
  }

  .footer-brand img {
    width:35px;
    height:35px
  }

  .footer-brand span {
    font-size:26px
  }

  .site-footer>div {
    align-items:flex-end;
    flex-direction:column;
    gap:8px
  }

  .site-footer>div a {
    font-size:10px
  }

  .site-footer small {
    font-size:9px
  }

  .back-to-top {
    width:35px;
    height:35px;
    right:15px;
    bottom:15px;
    font-size:17px
  }

  .image-dialog {
    width:calc(100vw - 18px);
    border-radius:6px
  }

  .dialog-top {
    padding:11px 15px
  }

  .image-dialog>p {
    font-size:10px;
    padding:12px 15px
  }

}

@media(max-width:380px) {
  .container {
    width:calc(100% - 34px)
  }

  .hero h1 {
    font-size:51px;
    letter-spacing:-3.6px
  }

  .hero-description {
    font-size:14px
  }

  .hero-copy .eyebrow {
    font-size:7px;
    letter-spacing:.4px
  }

  .hero-scene {
    height:541px
  }

  .hero-window {
    width:276px;
    height:510px;
    margin-left:-138px
  }

  .hero-screen {
    height:446px
  }

  .label-voice {
    left:-4px
  }

  .label-monday {
    right:-2px;
    bottom:27px
  }

  .scene-label {
    padding:10px
  }

  .hero-actions {
    gap:21px
  }

  .hero-platform {
    font-size:8px
  }

  .workspace-head h2 {
    font-size:41px
  }

  .tour-tab {
    font-size:10px
  }

  .tour-image-frame {
    height:550px
  }

  .stage-bottom {
    font-size:6px
  }

  .assistant-copy h2 {
    font-size:38px
  }

  .closing-content h2 {
    font-size:41px
  }

  .intro h2 {
    font-size:46px
  }

  .nav-cta {
    font-size:9px;
    padding:10px;
    gap:8px
  }

  .nav-wrap {
    gap:12px
  }

}

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

  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

  .will-reveal {
    opacity:1;
    transform:none
  }

  .hero-window,.label-voice,.label-monday {
    transform:none
  }

}


/* Compact gallery: screenshot, touch tabs and concise copy share one scene. */
.tour-description-short{display:none}
.hero-screen img,.tour-image-frame img{object-fit:contain}
.transcript-symbol .echo-icon{width:25px;height:25px}
.tour-image-frame{touch-action:pan-y pinch-zoom}
@media(max-width:1099px){
 .tour-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;gap:12px;width:calc(100% - 36px);max-width:600px}
 .tour-controls{display:contents}
 .tour-stage{grid-row:1;width:100%;height:clamp(300px,60svh,640px);min-height:0;max-width:none;margin:0;display:flex;flex-direction:column;transform-origin:center center}
 .tour-image-frame{flex:1;min-height:0;height:auto;display:grid;place-items:center}
 .tour-image-frame img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
 .stage-top{height:25px;min-height:25px;font-size:6px;padding:0 10px}
 .stage-bottom{min-height:28px;padding:6px 10px;font-size:6px}
 .enlarge-button{font-size:10px;gap:6px;min-height:24px}
 .tour-tabs{grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid #b9cdc7;border-radius:10px;overflow:hidden;background:#dfeae5}
 .tour-tab,.tour-tab.is-active{display:flex;justify-content:center;min-height:44px;padding:9px 4px;gap:0;border:0;border-right:1px solid #b9cdc7;text-align:center;font-size:11px;transition:background .2s,color .2s}
 .tour-tab:last-child{border-right:0}
 .tour-tab.is-active{background:#143c3b;color:#dffff8;box-shadow:inset 0 -2px 0 #35e6e1}
 .tour-tab>span{display:none}
 .tour-tab:after{content:attr(data-short-label)}
 .tour-tab:focus-visible{outline-offset:-4px}
 .tour-explanation{grid-row:3;padding:0;min-height:90px}
 .tour-explanation .tour-kicker,.tour-explanation #tour-description,.tour-tags,.tour-footnote{display:none}
 .tour-explanation h3{font-size:21px;line-height:1.12;letter-spacing:-.6px;white-space:normal;margin:0 0 7px;max-width:35ch}
 .tour-explanation .tour-description-short{display:block;font-size:12px;line-height:1.4;margin:0;max-width:55ch}
 .echo-mobile-story .tour-scroll-track{height:340svh;margin-top:26px}
 .echo-mobile-story .tour-layout{--tour-inset:104px;position:sticky;top:var(--tour-inset);height:calc(100svh - var(--tour-inset) - 14px);margin-top:0;padding-block:4px}
 .echo-mobile-story .tour-stage{height:100%;transform:perspective(1000px) rotateY(calc(var(--chapter-tilt,0) * -3deg)) rotateZ(calc(var(--chapter-tilt,0) * -.65deg));box-shadow:0 15px 35px #1b484126}
 .echo-mobile-story .tour-stage:after{content:"";height:2px;flex:none;background:linear-gradient(90deg,var(--cyan),var(--violet));transform:scaleX(var(--tour-progress,0));transform-origin:left}
 .echo-motion .hero-window{transform:translateY(calc(var(--hero-focus,0) * -65px)) rotate(calc(1.5deg - var(--hero-focus,0) * 7deg)) scale(calc(1 + var(--hero-focus,0) * .1))}
 .echo-motion .label-voice{translate:calc(var(--hero-labels-out,0) * -35px) calc(var(--hero-labels-out,0) * -50px)}
 .echo-motion .label-monday{translate:calc(var(--hero-labels-out,0) * 35px) calc(var(--hero-labels-out,0) * 45px)}
 .echo-motion .intro-line{transform:translateX(calc((1 - var(--line-arrival,0)) * var(--line-direction,-1) * 42px))}
 .echo-motion .assistant-art>img{transform:perspective(800px) rotateY(calc((1 - var(--assistant-lock,0)) * -35deg)) scale(calc(.75 + var(--assistant-lock,0) * .25))}
 .echo-motion .adjutant-rail>div{transform:translateX(calc((1 - var(--card-spread,0)) * var(--card-index,0) * -14px)) rotate(calc((1 - var(--card-spread,0)) * var(--card-index,0) * 6deg))}
 .echo-motion .closing-content .closing-line{transform:translateX(calc((1 - var(--closing-lock,0)) * -35px))}
 .echo-motion .closing-content .closing-line:last-child{transform:translateX(calc((1 - var(--closing-lock,0)) * 35px))}
}
@media(max-width:720px){
 .echo-mobile-story .tour-layout{--tour-inset:84px}
}
@media(max-width:1099px) and (max-height:559px), (max-width:1099px) and (prefers-reduced-motion:reduce){
 .tour-layout{grid-template-rows:auto auto auto}
 .tour-stage{height:auto}
 .tour-image-frame{height:clamp(220px,65svh,460px);flex:none}
}