/* Homepage. Loaded after public.css on the homepage only: one near-white page, hairline cards, large product captures, restrained motion. */
:root {
  --bg:#fbfbfd;
  --ink:#222532;
  --ink-2:#464a5b;
  --muted:#646879;
  --line:#e6e7f0;
  --line-2:#d9dbe6;
  --grad:linear-gradient(110deg,#4a6fa5,#7951d5);
  --grad-text:linear-gradient(105deg,#56739f 10%,#8257d0 85%);
  --pos:#22a06b;
  --neu:#c3c6d3;
  --neg:#e5484d;
  --app:#f0f2f5;
  --sh-sm:0 1px 2px rgba(31,35,64,.05),0 6px 16px -6px rgba(31,35,64,.10);
  --sh:0 1px 2px rgba(31,35,64,.04),0 8px 20px -8px rgba(31,35,64,.08),0 32px 64px -28px rgba(46,42,110,.18);
  --wrap:1240px;
  --gut:40px
}
html {
  scroll-padding-top:88px
}
.marketing-page {
  font-size:18px;
  line-height:1.6;
  color:var(--ink-2);
  background:var(--bg);
  overflow-x:clip;
  text-rendering:optimizeLegibility
}
.marketing-page :where(ul,ol) {
  margin:0;
  padding:0
}
.marketing-page :where(h1,h2,h3) {
  color:var(--ink);
  font-weight:500;
  text-wrap:balance
}
.marketing-page h2 {
  font-size:clamp(32px,3.3vw,46px);
  line-height:1.08;
  letter-spacing:-.024em
}
.wrap {
  max-width:calc(var(--wrap) + var(--gut) * 2);
  margin:0 auto;
  padding-inline:var(--gut)
}
.gt {
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-right:.04em
}

/* Buttons */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:44px;
  padding:0 20px;
  border-radius:999px;
  font-size:15px;
  font-weight:550;
  letter-spacing:-.005em;
  white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s,background-color .2s
}
.btn .arrow {
  width:18px;
  height:18px;
  stroke-width:1.7
}
.btn:hover .arrow {
  transform:translateX(3px)
}
.btn-primary,.site-header .demo-nav {
  color:#fff;
  background:var(--grad);
  border:0;
  box-shadow:0 1px 1px rgba(40,30,90,.10),0 6px 16px -6px rgba(105,85,183,.55),inset 0 1px 0 rgba(255,255,255,.22)
}
.btn-primary:hover,.site-header .demo-nav:hover {
  transform:translateY(-1px);
  box-shadow:0 1px 1px rgba(40,30,90,.10),0 12px 24px -8px rgba(105,85,183,.6),inset 0 1px 0 rgba(255,255,255,.22)
}
.btn-lg {
  height:54px;
  padding:0 26px;
  font-size:16px
}

/* Shared header, presented as a sticky full-width bar on the homepage */
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  max-width:none;
  width:100%;
  height:72px;
  margin:0;
  padding:0 max(var(--gut),calc((100% - var(--wrap)) / 2));
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  background:rgba(251,251,253,.84);
  box-shadow:none;
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  transition:border-color .3s
}
.site-header.scrolled {
  border-bottom-color:var(--line)
}
.site-header .brand {
  color:var(--ink)
}
.header-actions {
  gap:10px
}
.header-actions .signin-link,.header-actions .demo-nav {
  min-height:0;
  height:44px;
  padding:0 20px;
  gap:12px;
  border-radius:999px;
  font-size:15px;
  font-weight:550
}
.header-actions .arrow {
  display:none
}
.header-actions .signin-link {
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line-2);
  box-shadow:none
}
.header-actions .signin-link:hover {
  transform:none;
  border-color:#b9b2d6;
  box-shadow:none
}

/* Hero */
.hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  align-items:center;
  gap:40px;
  padding-top:40px;
  padding-bottom:56px
}
.hero h1 {
  font-size:clamp(50px,6.1vw,88px);
  line-height:1;
  letter-spacing:-.034em;
  font-weight:500
}
.hero-sub {
  font-size:20px;
  line-height:1.55;
  color:var(--ink-2);
  max-width:380px;
  margin-top:28px
}
.hero-cta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 28px;
  margin-top:36px
}
.link-down {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:550;
  color:var(--ink);
  padding:8px 0
}
.link-down svg {
  width:17px;
  height:17px;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .3s var(--ease)
}
.link-down:hover svg {
  transform:translateY(3px)
}
.hero-art {
  position:relative;
  width:100%;
  max-width:600px;
  aspect-ratio:1;
  justify-self:end
}
.hero-glow {
  position:absolute;
  inset:4%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(128,100,230,.13),rgba(96,128,200,.07) 55%,rgba(251,251,253,0) 100%)
}
.lens {
  position:absolute;
  inset:4%;
  mix-blend-mode:multiply;
  pointer-events:none
}
.lens-par {
  width:100%;
  height:100%;
  transform:translate3d(0,var(--py,0px),0)
}
.lens-in {
  width:100%;
  height:100%;
  animation:lensIn 1.6s var(--ease) both .1s
}
.lens img {
  width:100%;
  height:100%;
  filter:brightness(1.012);
  transform:rotate(-8deg);
  animation:drift 16s ease-in-out infinite
}
@keyframes lensIn {
  from { opacity:0; transform:scale(.94) }
  to { opacity:1; transform:none }
}
@keyframes drift {
  0%,100% { transform:rotate(-8deg) translateY(0) }
  50% { transform:rotate(-5.5deg) translateY(-8px) }
}
.chip-pos {
  position:absolute;
  z-index:2
}
.chip-pos-1 {
  left:-2%;
  top:17%
}
.chip-pos-2 {
  right:0;
  bottom:15%
}
.chip {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--sh);
  padding:15px 18px 16px;
  animation:float 7s ease-in-out infinite
}
.chip-pos-2 .chip {
  animation-duration:8s;
  animation-delay:-3s
}
@keyframes float {
  0%,100% { transform:translateY(0) }
  50% { transform:translateY(-9px) }
}
.chip-head {
  font-size:13px;
  font-weight:550;
  color:var(--muted);
  line-height:1.2
}
.chip-main {
  display:flex;
  align-items:flex-end;
  gap:14px;
  margin-top:6px
}
.chip-main strong {
  font-size:32px;
  font-weight:600;
  letter-spacing:-.04em;
  color:var(--ink);
  line-height:1
}
.chip-main span {
  font-size:15px;
  color:var(--ink-2);
  font-weight:500;
  padding-bottom:3px
}
.spark {
  width:88px;
  height:30px;
  overflow:visible
}
.spark path {
  stroke:url(#sparkGrad);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none
}
.spark circle {
  fill:#7951d5
}
.seg {
  display:flex;
  gap:3px;
  margin-top:12px;
  width:176px
}
.seg i {
  height:6px;
  border-radius:3px
}
.seg i:nth-child(1) { flex:72; background:var(--pos) }
.seg i:nth-child(2) { flex:21; background:var(--neu) }
.seg i:nth-child(3) { flex:7; background:var(--neg) }
.art-note {
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  text-align:center;
  font-size:13px;
  color:var(--muted)
}
.motion-toggle {
  position:absolute;
  right:var(--gut);
  bottom:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 4px;
  background:none;
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  transition:color .2s
}
.motion-toggle:hover {
  color:var(--ink)
}
.motion-icon {
  font-size:11px
}

/* Intro motion; the hero renders complete without it */
[data-in] {
  animation:rise 1s var(--ease) both;
  animation-delay:var(--d,0ms)
}
@keyframes rise {
  from { opacity:0; transform:translate3d(0,20px,0) }
  to { opacity:1; transform:none }
}

/* Platform strip */
.platforms {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px 40px;
  padding:22px 0;
  border-block:1px solid var(--line)
}
.platforms p {
  font-size:15px;
  color:var(--muted)
}
.platforms ul {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 32px
}
.platforms li {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:16px;
  font-weight:550;
  color:var(--ink)
}
.platforms .social-icon {
  width:19px;
  height:19px;
  color:#3c4052
}

/* Sections */
.section {
  padding-top:clamp(84px,8.4vw,120px)
}
.sec-head {
  max-width:760px;
  margin:0 auto;
  text-align:center
}
.marketing-page .sec-head h2 {
  font-size:clamp(36px,4.1vw,56px);
  letter-spacing:-.028em;
  line-height:1.05
}
.sec-head p {
  margin:22px auto 0;
  max-width:600px;
  font-size:19px
}

/* Product frames */
.frame {
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--sh);
  overflow:hidden
}
.frame-bar {
  height:36px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 14px;
  border-bottom:1px solid var(--line);
  background:#fcfcfe
}
.dots {
  display:flex;
  gap:6px
}
.dots i {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#e2e3ec
}
.frame-title {
  font-size:12.5px;
  font-weight:550;
  color:var(--muted);
  letter-spacing:-.005em
}
.crop {
  position:relative;
  overflow:hidden;
  aspect-ratio:var(--w)/var(--h);
  background:var(--app)
}
.crop img {
  position:absolute;
  max-width:none;
  height:auto;
  width:calc(var(--W) / var(--w) * 100%);
  left:calc(var(--x) / var(--w) * -100%);
  top:calc(var(--y) / var(--h) * -100%)
}
.marketing-page figcaption {
  margin-top:16px;
  font-size:14px;
  color:var(--muted);
  text-align:center
}
.shot-wide {
  max-width:1120px;
  margin:56px auto 0
}
.facts {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  max-width:1120px;
  margin:64px auto 0
}
.facts h3 {
  font-size:18px;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.3
}
.facts p {
  font-size:16.5px;
  line-height:1.55;
  margin-top:8px
}
.facts div {
  padding-top:20px;
  border-top:1px solid var(--line)
}

/* Feature rows */
.rows {
  display:grid;
  gap:clamp(96px,10vw,148px)
}
.row {
  display:grid;
  grid-template-columns:minmax(0,410px) minmax(0,1fr);
  align-items:center;
  gap:76px
}
.row.flip {
  grid-template-columns:minmax(0,1fr) minmax(0,410px)
}
.row.flip .row-copy {
  order:2
}
.row-copy p {
  margin-top:20px
}
.ticks {
  list-style:none;
  display:grid;
  gap:12px;
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--line)
}
.ticks li {
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:16.5px;
  line-height:1.45;
  color:var(--ink-2);
  text-wrap:pretty
}
.tick {
  width:20px;
  height:20px;
  flex:none;
  margin-top:1px;
  stroke:#7457c9;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}
.tick circle {
  fill:#f3effd;
  stroke:#e1d8fa
}
.row-copy .fine {
  margin-top:22px;
  font-size:14px;
  color:var(--muted)
}
.row-vis {
  position:relative;
  min-width:0
}
.row-vis figure {
  position:relative
}
.replay {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:24px;
  padding:6px 0;
  background:none;
  font-size:15px;
  font-weight:550;
  color:var(--ink)
}
.replay:hover {
  color:#6d4fc4
}

/* Audience */
.aud {
  position:relative;
  padding:0 120px 56px 0
}
.quotes {
  position:absolute;
  right:0;
  bottom:0;
  display:grid;
  gap:12px;
  justify-items:end
}
.quotes .quote:first-child {
  margin-right:48px
}
.quote {
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--sh-sm);
  padding:12px 16px 12px 12px
}
.quote p {
  font-size:16px;
  font-weight:500;
  color:var(--ink);
  line-height:1.25
}
.quote small {
  display:block;
  font-size:13px;
  font-weight:450;
  color:var(--muted);
  margin-top:2px
}
.av {
  width:34px;
  height:34px;
  flex:none;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:600;
  color:#6b4fc4;
  background:#efeafd
}
.av.alt {
  color:#3f6699;
  background:#e7eef8
}

/* Music */
.spot {
  position:relative
}
.sound {
  position:absolute;
  right:-28px;
  top:78px;
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--sh);
  padding:12px 18px 12px 12px
}
.sound img {
  width:48px;
  height:48px;
  border-radius:10px;
  object-fit:cover
}
.sound-name strong {
  display:block;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  line-height:1.2
}
.sound-name span {
  font-size:13px;
  color:var(--muted)
}
.sound-num {
  padding-left:16px;
  margin-left:2px;
  border-left:1px solid var(--line)
}
.sound-num strong {
  display:block;
  font-size:20px;
  font-weight:600;
  letter-spacing:-.03em;
  color:var(--ink);
  line-height:1.15
}
.sound-num span {
  font-size:13px;
  color:var(--muted)
}
.sound-num .delta {
  color:#15803d;
  font-weight:600
}

/* Assistant */
.chat {
  max-width:640px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--sh);
  overflow:hidden
}
.chat-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line)
}
.chat-brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
  color:var(--ink)
}
.chat-brand svg {
  width:22px;
  height:22px;
  stroke:#4a5775;
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.chat-brand .mark-end {
  fill:var(--violet);
  stroke:none
}
.pill {
  font-size:12px;
  font-weight:550;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 10px;
  background:#fcfcfe
}
.chat-body {
  position:relative;
  padding:24px 22px 8px
}
.msg-q {
  margin-left:auto;
  max-width:82%;
  width:fit-content;
  background:#f1eefb;
  color:var(--ink);
  border-radius:16px 16px 4px 16px;
  padding:12px 16px;
  font-size:16px;
  line-height:1.45
}
.msg-a {
  display:flex;
  gap:12px;
  margin-top:22px
}
.a-av {
  width:30px;
  height:30px;
  flex:none;
  border-radius:50%;
  background:var(--grad);
  display:grid;
  place-items:center
}
.a-av svg {
  width:17px;
  height:17px;
  stroke:#fff;
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.a-av .mark-end {
  fill:#fff;
  stroke:none
}
.msg-a p {
  font-size:16px;
  line-height:1.55;
  color:var(--ink-2)
}
.msg-a strong {
  color:var(--ink);
  font-weight:600
}
.bars {
  display:grid;
  gap:12px;
  margin:18px 0 16px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fcfcfe
}
.bar-row {
  display:grid;
  grid-template-columns:118px minmax(0,1fr) 46px;
  align-items:center;
  gap:12px;
  font-size:14px
}
.bar-row span {
  color:var(--ink-2)
}
.bar-row b {
  font-weight:600;
  color:var(--ink);
  text-align:right
}
.track {
  height:8px;
  border-radius:4px;
  background:#eeecf6;
  overflow:hidden
}
.track i {
  display:block;
  height:100%;
  width:100%;
  border-radius:4px;
  background:var(--grad);
  transform-origin:left;
  transform:scaleX(var(--v))
}
.msg-a .a-note {
  font-size:15px;
  color:var(--muted)
}
.typing {
  position:absolute;
  left:64px;
  top:96px;
  display:none;
  gap:5px;
  padding:12px 14px;
  border-radius:14px;
  background:#f4f4f8
}
.typing i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#a9a3c4;
  animation:dot 1s ease-in-out infinite
}
.typing i:nth-child(2) { animation-delay:.15s }
.typing i:nth-child(3) { animation-delay:.3s }
@keyframes dot {
  0%,100% { opacity:.35; transform:translateY(0) }
  50% { opacity:1; transform:translateY(-3px) }
}
.chat-input {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:14px 18px 18px;
  padding:8px 8px 8px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  font-size:15px;
  color:var(--muted)
}
.send {
  width:32px;
  height:32px;
  border-radius:10px;
  background:var(--grad);
  display:grid;
  place-items:center;
  flex:none
}
.send svg {
  width:16px;
  height:16px;
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}

/* Reports */
.rep {
  position:relative;
  padding:0 0 44px 3%
}
.rep .frame {
  width:min(100%,410px)
}
.sched {
  position:absolute;
  right:0;
  bottom:0;
  width:352px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--sh);
  padding:18px 20px 20px
}
.sched-top {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  padding-bottom:14px;
  border-bottom:1px solid var(--line)
}
.sched-top svg {
  width:18px;
  height:18px;
  stroke:var(--blue);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.sched-top .pill {
  margin-left:auto
}
.sched-f {
  margin-top:14px
}
.sched-f span {
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ink)
}
.sched-f p {
  margin-top:6px;
  font-size:14.5px;
  line-height:1.4;
  text-wrap:pretty;
  color:var(--ink-2);
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fcfcfe
}
.sched-go {
  display:flex;
  justify-content:flex-end;
  margin-top:16px
}
.sched-go span {
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  background:var(--grad);
  color:#fff;
  font-size:13.5px;
  font-weight:600
}

/* Closing */
.closing {
  padding-top:clamp(104px,10vw,148px)
}
.cta-card {
  max-width:1120px;
  margin:0 auto;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--sh);
  padding:56px 32px 64px
}
.cta-mark {
  width:112px;
  height:112px;
  margin:0 auto 20px;
  mix-blend-mode:multiply;
  filter:brightness(1.012)
}
.marketing-page .cta-card h2 {
  font-size:clamp(36px,4.1vw,56px);
  letter-spacing:-.028em;
  line-height:1.05
}
.cta-card p {
  margin:20px auto 0;
  max-width:520px;
  font-size:19px
}
.cta-card .btn {
  margin-top:34px
}

/* Demo request: an inline section without JavaScript, a dialog with it */
.demo-section {
  max-width:620px;
  margin:96px auto 0;
  padding:0 var(--gut)
}
.demo-panel {
  position:relative;
  padding:40px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--sh)
}
.marketing-page .demo-panel h2 {
  font-size:34px;
  line-height:1.1;
  letter-spacing:-.025em
}
.demo-intro {
  font-size:16px;
  line-height:1.6;
  color:var(--ink-2);
  margin:14px 0 26px
}
.demo-panel .form-label {
  font-size:14px;
  color:var(--ink)
}
.demo-panel .form-input,.demo-panel .form-select {
  border-color:var(--line-2);
  font-size:16px
}
.demo-panel .btn-submit {
  min-height:52px;
  border-radius:999px;
  font-size:16px;
  background:var(--grad)
}
.demo-privacy {
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
  text-align:center;
  margin-top:16px
}
.demo-privacy a {
  color:var(--ink-2);
  text-decoration:underline;
  text-underline-offset:3px
}
.demo-success {
  display:none;
  padding:20px 0 6px;
  text-align:center
}
.done .demo-success {
  display:block
}
.done .demo-form-content {
  display:none
}
.demo-success h2 {
  margin:20px 0 14px
}
.demo-success p {
  font-size:16px;
  color:var(--ink-2)
}
.demo-success .btn,.demo-success .text-link {
  margin-top:28px
}
.demo-success .text-link {
  font-size:15px;
  color:var(--ink)
}
.success-mark {
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#efeafd;
  color:#6b4fc4;
  font-size:22px;
  margin:auto
}
.demo-dialog {
  padding:0;
  border:0;
  background:transparent;
  width:min(560px,calc(100% - 32px));
  max-height:90svh;
  overflow:auto;
  border-radius:24px;
  box-shadow:0 30px 120px rgba(37,36,55,.22)
}
.demo-dialog::backdrop {
  background:rgba(34,37,50,.32);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px)
}
.demo-dialog .demo-panel {
  margin:0;
  box-shadow:none
}
.demo-dialog .no-modal-home {
  display:none
}
.demo-dialog .modal-close {
  z-index:2
}

/* Shared footer, aligned with the homepage column */
.site-footer {
  max-width:calc(var(--wrap) + var(--gut) * 2);
  padding:clamp(72px,8vw,104px) var(--gut) 36px
}
.footer-top {
  justify-content:space-between;
  gap:24px;
  padding-bottom:32px
}
.site-footer .brand {
  color:var(--ink)
}
.footer-email {
  gap:10px;
  font-size:17px;
  font-weight:550;
  color:var(--ink)
}
.footer-email:hover .arrow {
  transform:translateX(3px)
}
.footer-bottom {
  flex-wrap:wrap;
  align-items:center;
  gap:16px 32px;
  padding-top:24px;
  font-size:14.5px;
  color:var(--muted)
}
.footer-bottom nav {
  flex-wrap:wrap;
  gap:10px 28px
}
.footer-bottom a {
  color:var(--ink-2)
}

/* Scroll reveals. JavaScript hides only content that starts below the fold. */
.motion-ready [data-reveal] {
  transition:opacity .75s var(--ease),transform .9s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms)
}
.motion-ready [data-reveal].waiting {
  opacity:0;
  transform:translate3d(0,22px,0)
}
.motion-ready .chat:not(.play) [data-step] {
  opacity:0;
  transform:translate3d(0,10px,0)
}
.motion-ready .chat:not(.play) .track i {
  transform:scaleX(0)
}
.chat.play [data-step] {
  animation:rise .7s var(--ease) both;
  animation-delay:var(--d,0ms)
}
.chat.play .track i {
  animation:grow 1.1s var(--ease) both;
  animation-delay:calc(1650ms + var(--n,0) * 120ms)
}
@keyframes grow {
  from { transform:scaleX(0) }
  to { transform:scaleX(var(--v)) }
}
.chat.play .typing {
  display:flex;
  opacity:0;
  animation:typing 1.1s ease forwards .55s
}
@keyframes typing {
  0% { opacity:0 }
  15%,80% { opacity:1 }
  100% { opacity:0; visibility:hidden }
}

/* Loops rest offscreen and in hidden tabs. Pause motion shows every finished state. */
.hero.is-off *,.page-hidden .hero * {
  animation-play-state:paused!important
}
.motion-paused [data-in],.motion-paused .lens-in,.motion-paused .chat [data-step],.motion-paused .chat .track i {
  animation:none!important;
  opacity:1!important
}
.motion-paused .chat [data-step] {
  transform:none!important
}
.motion-paused .chat .track i {
  transform:scaleX(var(--v))!important
}
.motion-paused .chat .typing {
  display:none!important
}
.motion-paused [data-reveal] {
  opacity:1!important;
  transform:none!important;
  transition:none!important
}

/* Responsive */
@media (max-width:1180px) {
  .row,.row.flip { gap:56px }
  .row { grid-template-columns:minmax(0,360px) minmax(0,1fr) }
  .row.flip { grid-template-columns:minmax(0,1fr) minmax(0,360px) }
  .sound { right:-16px }
}
@media (max-width:980px) {
  :root { --gut:32px }
  .hero { grid-template-columns:1fr; gap:28px; padding-top:44px }
  .hero-art { justify-self:center; max-width:540px }
  .row,.row.flip { grid-template-columns:1fr; gap:40px }
  .row.flip .row-copy { order:0 }
  .row-copy { max-width:620px }
  .sound { right:16px }
  .aud { padding-right:150px }
  .facts { gap:28px }
}
@media (max-width:760px) {
  :root { --gut:20px }
  html { scroll-padding-top:80px }
  .marketing-page { font-size:17px }
  .site-header { width:100%; height:64px; margin:0; padding:0 var(--gut); border-radius:0 }
  .header-actions { gap:14px; margin-right:12px }
  .header-actions .signin-link { height:38px; padding:0 15px; font-size:14px }
  .mobile-menu { position:relative }
  .mobile-menu summary { width:38px; height:38px; align-items:center; border-radius:10px }
  .mobile-menu summary span { width:20px; height:1.6px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease) }
  .mobile-menu[open] summary span:first-child { transform:translateY(3.8px) rotate(45deg) }
  .mobile-menu[open] summary span:last-child { transform:translateY(-3.8px) rotate(-45deg) }
  .mobile-menu nav { left:auto; right:-4px; top:50px; width:min(260px,calc(100vw - 32px)); padding:8px; gap:0; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh); font-size:16px }
  .mobile-menu nav a { padding:12px 14px; border-radius:10px; font-weight:500; color:var(--ink) }
  .mobile-menu nav a:hover { background:#f5f4fa }
  .mobile-menu nav a:last-child { margin-top:4px; color:#fff; background:var(--grad); text-align:center; font-weight:550 }

  .hero { padding-top:36px; padding-bottom:28px; gap:20px }
  .hero h1 { font-size:clamp(46px,13.4vw,60px) }
  .hero-sub { font-size:18px; margin-top:20px; max-width:330px }
  .hero-cta { margin-top:28px; gap:12px 22px }
  .btn-lg { height:50px; padding:0 22px; font-size:15.5px }
  .hero-art { max-width:400px }
  .chip { padding:11px 13px 12px; border-radius:14px }
  .chip-head { font-size:11.5px }
  .chip-main { gap:10px; margin-top:4px }
  .chip-main strong { font-size:23px }
  .chip-main span { font-size:13px; padding-bottom:1px }
  .spark { width:58px; height:22px }
  .seg { width:124px; margin-top:9px }
  .seg i { height:5px }
  .chip-pos-1 { left:0; top:9% }
  .chip-pos-2 { right:0; bottom:11% }
  .art-note { bottom:-2px; font-size:12.5px }
  .motion-toggle { position:static; justify-self:center; margin-top:6px }

  .platforms { gap:12px; padding:18px 0 }
  .platforms p { width:100%; text-align:center; font-size:14px }
  .platforms ul { gap:10px 18px }
  .platforms li { font-size:15px; gap:7px }
  .platforms .social-icon { width:17px; height:17px }

  .section { padding-top:88px }
  .marketing-page .sec-head h2 { font-size:clamp(34px,9.6vw,44px) }
  .sec-head p { font-size:17px; margin-top:16px }
  .shot-wide { margin-top:36px }
  .frame { border-radius:14px }
  .frame-bar { height:30px; padding:0 12px; gap:10px }
  .dots i { width:7px; height:7px }
  .frame-title { font-size:12px }
  .crop { aspect-ratio:var(--mw)/var(--mh) }
  .crop img { width:calc(var(--W) / var(--mw) * 100%); left:calc(var(--mx) / var(--mw) * -100%); top:calc(var(--my) / var(--mh) * -100%) }
  .marketing-page figcaption { font-size:13px; margin-top:12px }
  .facts { grid-template-columns:1fr; gap:20px; margin-top:44px }
  .facts p { font-size:16px }
  .facts div { padding-top:16px }

  .rows { gap:88px }
  .marketing-page h2 { font-size:clamp(31px,8.6vw,38px) }
  .row-copy p { margin-top:16px }
  .ticks { margin-top:22px; padding-top:20px; gap:10px }
  .ticks li { font-size:16px }

  .aud { padding:0 }
  .quotes { position:relative; display:flex; flex-direction:column; gap:10px; margin-top:-20px }
  .quotes .quote:first-child { align-self:flex-end; margin-right:10px }
  .quotes .quote:last-child { align-self:flex-start; margin-left:10px }
  .quote { padding:10px 14px 10px 10px }
  .quote p { font-size:15px }

  .sound { position:relative; right:auto; top:auto; margin:-14px 10px 0 auto; width:fit-content; max-width:calc(100% - 24px); padding:10px 14px 10px 10px; gap:12px }
  .sound img { width:40px; height:40px }
  .sound-num strong { font-size:18px }

  .chat-body { padding:20px 16px 6px }
  .msg-q { font-size:15px; max-width:92% }
  .msg-a { gap:10px }
  .msg-a p { font-size:15.5px }
  .bars { padding:14px 12px; gap:10px }
  .bar-row { grid-template-columns:96px minmax(0,1fr) 40px; gap:8px; font-size:13px }
  .typing { left:56px }
  .chat-input { margin:12px 14px 14px; font-size:14px }

  .rep { padding:0 }
  .rep .frame { width:100% }
  .sched { position:relative; right:auto; bottom:auto; width:auto; max-width:330px; margin:-12px 10px 0 auto; padding:16px 16px 18px }

  .closing { padding-top:104px }
  .cta-card { padding:44px 20px 48px; border-radius:22px }
  .cta-mark { width:92px; height:92px }
  .marketing-page .cta-card h2 { font-size:clamp(32px,9vw,42px) }
  .cta-card p { font-size:17px }
  .cta-card .btn { margin-top:28px }

  .demo-section { margin-top:72px }
  .demo-panel { padding:34px 22px 26px; border-radius:20px }
  .marketing-page .demo-panel h2 { font-size:29px }
  .demo-dialog { max-height:92svh; border-radius:20px }
  .demo-dialog .modal-close { top:12px; right:12px }

  .site-footer { padding:72px var(--gut) 32px }
  .footer-top { flex-wrap:wrap; padding-bottom:26px }
  .footer-email { font-size:17px }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:16px; font-size:14px }
  .footer-bottom nav { gap:10px 22px }
}
@media (max-width:360px) {
  .site-header .brand { font-size:21px }
  .header-actions .signin-link { padding:0 12px }
  .platforms ul { gap:10px 14px }
  .platforms li { font-size:14px }
  .bar-row { grid-template-columns:88px minmax(0,1fr) 38px }
}