/* The home page. Everything here is the page as it stands still; home.js
   puts the movement on top, and adds "scenes" to <html> on a screen big
   enough for the pinned ones. Without it, this is a plain, complete page. */

#welcome { display: none; min-height: 72vh; align-content: center; }
body.welcome #welcome { display: grid; }
body.welcome main { display: none; }
#welcome .lead { margin-top: 22px; }

/* ── The band at the top ──────────────────────────────────────────────────── */
.hero { background: var(--page); }
.hero-band {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100svh - var(--nav-h)); padding: 56px var(--gutter) 76px;
  display: grid; place-items: center; align-content: center; gap: clamp(26px, 5vh, 56px);
  color: #fff; text-align: center; perspective: 1200px; transform-origin: 50% 100%;
  background:
    radial-gradient(46% 42% at 50% 36%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 72%),
    linear-gradient(155deg, #5b4dff 0%, #7a4dfc 36%, #c54dd4 68%, #ff4d9e 100%);
}
.hero-mark { position: relative; width: clamp(120px, 17vw, 230px); aspect-ratio: 40 / 48; transform-style: preserve-3d; }
.hero-tilt { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.hero-tilt svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 28px rgba(255, 255, 255, .85)) drop-shadow(0 0 90px rgba(255, 255, 255, .55)); }
/* The signal going out: rings from the mark to the edges of the band. */
.hero-rings { position: absolute; left: 50%; top: 50%; width: max(150vw, 150vh); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: -1; }
.hero-rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); opacity: .22; }
.hero-rings i:nth-child(1) { inset: 42%; } .hero-rings i:nth-child(2) { inset: 34%; }
.hero-rings i:nth-child(3) { inset: 25%; } .hero-rings i:nth-child(4) { inset: 14%; } .hero-rings i:nth-child(5) { inset: 2%; }
.hero-copy { display: grid; gap: clamp(20px, 3vh, 32px); justify-items: center; }
.hero-copy h1 { font-size: clamp(36px, 5.6vw, 80px); line-height: 1.02; }

/* ── The product ──────────────────────────────────────────────────────────── */
.product { padding-top: clamp(72px, 10vw, 150px); }
.product-head .lead { margin-top: clamp(16px, 2vw, 26px); }
.product-note { margin-top: 14px; }
.product-head .btns { margin-top: 26px; }
.stage { margin-top: clamp(40px, 6vw, 84px); padding-inline: var(--gutter); padding-bottom: clamp(40px, 6vw, 84px); }
.stage-pin { position: relative; max-width: var(--wrap); margin-inline: auto; }
.stage-frame { position: relative; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); background: #0b0b0d; }
.stage-frame .slot { --r: 0px; }
.stage-shade { display: none; }
.stage-cap { margin-top: 22px; text-align: center; font-size: clamp(21px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; }

/* The stage is a screen tall and is pulled up under the words above it, so
   the card shows sooner. Its empty top must never sit on those words: they
   stay above it, and only the card itself takes a click. */
.product-head { position: relative; z-index: 2; }
html.scenes .stage { padding: 0; margin-top: -20vh; }
html.scenes .stage-pin { pointer-events: none; }
html.scenes .stage-frame, html.scenes .stage-cap { pointer-events: auto; }
html.scenes .stage-pin { max-width: none; height: 100vh; overflow: hidden; perspective: 1700px; }
html.scenes .stage-frame { position: absolute; inset: 0; border-radius: 0; will-change: transform; transform-origin: 50% 50%; }
html.scenes .stage-frame .slot { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
html.scenes .stage-shade { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 52%); }
html.scenes .stage-cap { position: absolute; inset: auto 0 10vh 0; margin: 0; padding-inline: var(--gutter); color: #fff; opacity: 0; font-size: clamp(36px, 5.4vw, 80px); font-weight: 650; letter-spacing: -.03em; line-height: 1.03; }

/* ── Get the highlights ───────────────────────────────────────────────────── */
.hl { overflow: hidden; }
.hl h2 { margin-bottom: clamp(28px, 4vw, 56px); }
.hl-view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.hl-view::-webkit-scrollbar { display: none; }
.hl-track { position: relative; display: flex; gap: 20px; width: max-content; transform-style: preserve-3d; }
.hl-card { scroll-snap-align: center; flex: none; width: min(980px, 84vw); background: var(--panel); border-radius: var(--r); padding: clamp(20px, 2.6vw, 36px); display: grid; gap: clamp(16px, 2vw, 26px); align-content: start; }
.hl-card h3 { font-size: clamp(21px, 2.3vw, 32px); max-width: 21em; min-height: 2.3em; }
.hl-card .slot { --r: clamp(12px, 1.4vw, 18px); }
html.js-hl .hl-view { overflow: visible; padding-inline: 0; perspective: 2000px; touch-action: pan-y; }
html.js-hl .hl-card { will-change: transform, opacity; }
.hl-ctl { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: clamp(24px, 3vw, 40px); }
.hl-dots { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px; border-radius: 999px; background: var(--panel); }
.hl-dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #9d9da3; cursor: pointer; overflow: hidden; transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.hl-dots button::before { content: ""; position: absolute; inset: -16px -6px; }
.hl-dots button.on { width: 46px; }
.hl-dots button i { position: absolute; inset: 0; background: var(--ink); border-radius: 99px; transform: scaleX(0); transform-origin: 0 50%; }
.hl-play { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--panel); display: grid; place-items: center; cursor: pointer; }
.hl-play svg { fill: var(--ink); }
.hl-play .i-play, .hl-play.paused .i-pause { display: none; }
.hl-play.paused .i-play { display: block; }

/* ── Everywhere ───────────────────────────────────────────────────────────── */
.everywhere .eyebrow { color: var(--grey); margin-bottom: 14px; }
.everywhere .say { max-width: 13em; margin-inline: auto; }
.everywhere .lead { margin-top: clamp(18px, 2vw, 28px); }
.say .w { display: inline-block; }
.trio { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2.2vw, 32px); max-width: 1360px; margin: clamp(44px, 6vw, 96px) auto 0; padding-inline: var(--gutter); perspective: 1800px; }
.trio-item { flex: none; transform-style: preserve-3d; }
.trio-l { width: 32%; } .trio-c { width: 45%; } .trio-r { width: 11.5%; }
.points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; margin-top: clamp(56px, 8vw, 120px); }
.points h3 { font-size: 21px; }
.points p { color: var(--grey); margin-top: 10px; }
@media (max-width: 900px) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio { flex-wrap: wrap; }
  .trio-c { width: 100%; order: -1; } .trio-l { width: 68%; } .trio-r { width: 21%; }
}
@media (max-width: 560px) { .points { grid-template-columns: 1fr; } }

/* ── Take a closer look ───────────────────────────────────────────────────── */
.closer { padding-block: clamp(80px, 11vw, 168px); }
.closer h2 { margin-bottom: clamp(24px, 3.4vw, 48px); }
.closer-grid { display: grid; grid-template-columns: minmax(250px, .62fr) 2fr; gap: clamp(20px, 4vw, 64px); align-items: center; }
.closer-list { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.closer-tab { background: var(--panel); border-radius: 26px; padding: 13px 22px; cursor: pointer; transition: background .3s; }
.closer-tab h3 { font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -.012em; }
.closer-tab p { color: var(--grey); font-size: 15px; line-height: 1.4; margin-top: 6px; max-width: 26em; }
.closer-media { background: var(--panel); border-radius: var(--r); padding: clamp(14px, 3vw, 44px); perspective: 1700px; display: grid; gap: 14px; }
.closer-shot .slot { --r: clamp(10px, 1.2vw, 16px); box-shadow: 0 30px 60px -30px rgba(29, 29, 31, .4); }
html.js-closer .closer-tab:not(.on) p { display: none; }
html.js-closer .closer-tab:not(.on):hover { background: #ebebef; }
html.js-closer .closer-tab.on { padding: 18px 24px 20px; cursor: default; }
html.js-closer .closer-shot { grid-area: 1 / 1; }
html.js-closer .closer-shot:not(.on) { visibility: hidden; }
html.js-closer.gs .closer-shot { visibility: inherit; }
html.scenes .closer { padding-block: 0; }
html.scenes .closer-pin { min-height: 100vh; display: flex; align-items: center; padding-block: calc(var(--nav-h) + 12px) 12px; }
html.scenes .closer-pin > .wrap { width: 100%; }
@media (max-height: 820px) {
  html.scenes .closer h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 18px; }
  html.scenes .closer-list { gap: 7px; }
  html.scenes .closer-tab { padding: 9px 18px; }
  html.scenes.js-closer .closer-tab.on { padding: 13px 20px 14px; }
}
@media (max-width: 899px) {
  .closer-grid { grid-template-columns: 1fr; }
  .closer-media { order: -1; }
  .closer-list { flex-direction: row; flex-wrap: wrap; }
  html.js-closer .closer-tab.on { flex-basis: 100%; }
}

/* ── A server of its own ──────────────────────────────────────────────────── */
.server .eyebrow { color: var(--grey); margin-bottom: 14px; }
.server .lead { margin-top: clamp(18px, 2vw, 28px); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; margin-top: clamp(44px, 6vw, 88px); }
.stat { border-top: 1px solid var(--line); padding-top: 22px; }
.stat-n { font-size: clamp(34px, 4.3vw, 60px); font-weight: 650; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-l { color: var(--grey); margin-top: 12px; max-width: 15em; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Who it's for ─────────────────────────────────────────────────────────── */
.who { padding-block: clamp(80px, 11vw, 168px); overflow: hidden; }
.who-head .lead { margin-top: clamp(16px, 2vw, 24px); }
.who-view { margin-top: clamp(32px, 4.4vw, 60px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.who-view::-webkit-scrollbar { display: none; }
.who-track { display: flex; gap: 20px; width: max-content; }
.who-card { scroll-snap-align: start; flex: none; width: min(400px, 80vw); min-height: 300px; background: var(--panel); border-radius: var(--r); padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 12px; transition: background .3s; }
.who-card:hover { background: #ededf1; }
.who-card .slot { --r: 16px; aspect-ratio: auto; height: clamp(130px, 24vh, 250px); margin-bottom: 8px; flex: none; }
.who-card p { color: var(--grey); flex: 1; }
.slot.optional[data-state="empty"] { display: none; }
html[data-editing] .slot.optional[data-state="empty"] { display: block; }
html.scenes .who { padding-block: 0; }
html.scenes .who-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 4vh, 52px); padding-top: var(--nav-h); }
html.scenes .who-view { margin-top: 0; overflow: visible; perspective: 1700px; }
html.scenes .who-card { will-change: transform; }

/* ── The listener side ────────────────────────────────────────────────────── */
.site .eyebrow { color: var(--grey); margin-bottom: 14px; }
.site .lead { margin-top: clamp(18px, 2vw, 28px); max-width: 36em; }
.site-links { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 24px; font-size: clamp(17px, 1.5vw, 21px); }
.pics { margin-top: clamp(36px, 5vw, 72px); perspective: 1600px; }
.pic { background: var(--panel); border-radius: var(--r); padding: clamp(18px, 2.4vw, 32px); display: grid; gap: 10px; align-content: start; }
.pic .slot { --r: clamp(12px, 1.4vw, 18px); margin-bottom: 12px; }
.pic p { color: var(--grey); }
.site-note { margin-top: 24px; }

/* ── Apps ─────────────────────────────────────────────────────────────────── */
.apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 88px); align-items: center; }
.apps .eyebrow { color: var(--grey); margin-bottom: 14px; }
.apps .lead { margin-top: clamp(18px, 2vw, 28px); }
.phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.4vw, 34px); perspective: 1700px; }
.phones .phone { width: min(250px, 40%); transform-style: preserve-3d; }
.phones .phone:nth-child(2) { margin-top: 14%; }
@media (max-width: 820px) { .apps-grid { grid-template-columns: 1fr; } }

/* ── Everything else ──────────────────────────────────────────────────────── */
.feat { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: clamp(32px, 5vw, 72px); }
.feat li { border-top: 1px solid var(--line-soft); padding: 18px 0 22px; color: var(--grey); font-size: 15px; line-height: 1.42; }
.feat strong { display: block; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.012em; margin-bottom: 3px; }
@media (max-width: 900px) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feat { grid-template-columns: 1fr; } }

/* ── The Desk ─────────────────────────────────────────────────────────────── */
.deskblock { background: var(--page); }
.deskblock-in { background: #000; color: var(--ink); padding-top: clamp(84px, 11vw, 176px); overflow: hidden; }
.deskblock .eyebrow { color: var(--grey); }
/* The big word arrives enlarged; what sits round it stays on top of it. */
.deskblock .eyebrow, .deskblock .lead, .desk-link { position: relative; z-index: 2; }
.desk-word {
  font-size: clamp(76px, 19vw, 300px); line-height: .92; letter-spacing: -.055em; font-weight: 750;
  margin: 6px 0 clamp(18px, 2.6vw, 36px); padding-bottom: .06em;
  background: linear-gradient(120deg, #7d72ff 0%, #c868e8 50%, #ff5aa6 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.desk-link { margin-top: 22px; font-size: clamp(17px, 1.5vw, 21px); }
.desk-shot { max-width: 1180px; margin: clamp(44px, 6vw, 88px) auto -9%; padding-inline: var(--gutter); perspective: 1700px; }

/* ── Four steps ───────────────────────────────────────────────────────────── */
.steps .eyebrow { color: var(--grey); margin-bottom: 14px; }
.steps-row { list-style: none; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; margin-top: clamp(40px, 6vw, 80px); }
.steps-row li { counter-increment: step; position: relative; border-top: 2px solid var(--line-soft); padding-top: 24px; --p: 0%; }
.steps-row li::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: var(--p); background: var(--grad); }
.steps-row li::before { content: counter(step); display: block; font-size: clamp(48px, 5.4vw, 80px); font-weight: 650; letter-spacing: -.05em; line-height: 1; margin-bottom: 16px; }
.steps-row p { color: var(--grey); margin-top: 8px; }
@media (max-width: 900px) { .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps-row { grid-template-columns: 1fr; } }

/* ── Pricing and the start ────────────────────────────────────────────────── */
.pricing { perspective: 1400px; }
.price-card { background: var(--page); border-radius: calc(var(--r) + 8px); max-width: 580px; margin: clamp(32px, 5vw, 64px) auto 0; padding: clamp(32px, 4.4vw, 60px); }
.price-card .eyebrow { color: var(--grey); }
.price { font-size: clamp(72px, 10vw, 128px); font-weight: 700; letter-spacing: -.055em; line-height: 1; margin: 12px 0 26px; }
.price small { font-size: .2em; font-weight: 500; letter-spacing: -.01em; color: var(--grey); }
.incl { list-style: none; padding: 0; margin: 0 auto 32px; max-width: 400px; text-align: left; }
.incl li { position: relative; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--line-soft); }
.incl li:last-child { border-bottom: 0; }
.incl li::before { content: ""; position: absolute; left: 5px; top: 16px; width: 7px; height: 12px; border-right: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo); transform: rotate(42deg); }
.price-card .small { margin-top: 20px; }
.launch .eyebrow { color: var(--grey); margin-bottom: 14px; }
.launch .lead { margin-top: clamp(16px, 2vw, 24px); }
.launch .form { margin-top: clamp(28px, 4vw, 44px); }

.questions h2, .stories h2 { margin-bottom: clamp(28px, 4vw, 52px); }
.stories .eyebrow { color: var(--grey); margin-bottom: 14px; }
.stories h2 { max-width: 13em; }
.stories-all { margin-top: 32px; font-size: clamp(17px, 1.5vw, 21px); }