@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #1c1e20;
  --sunk: #17181a;
  --raise: #212326;
  --raise-2: #27292d;
  --line: #2d3034;
  --line-2: #3a3e43;
  --text: #f2f3f5;
  --muted: #a5a8ac;
  --faint: #8e9297;
  --sky: #65cbf9;
  --apricot: #ffc48a;
  --ok: #5fcf8f;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; }
.sprite symbol, svg.i { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }

/* Header */
.top {
  position: absolute; inset: 0 0 auto; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1168px; margin-inline: auto; padding: 18px var(--gutter);
}
.top-mark { display: block; border-radius: 8px; }
.top-mark img { width: 28px; height: 28px; }
.top-nav { display: flex; gap: 4px; font-size: 15px; }
.top-nav a {
  color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 8px;
  transition: color .15s;
}
.top-nav a:hover { color: var(--text); }

/* Hero */
.hero {
  position: relative; text-align: center;
  padding: clamp(150px, 24vh, 230px) var(--gutter) 0;
}
.field { position: absolute; top: 0; left: 0; width: 100%; height: 200px; pointer-events: none; }
.logo-wrap {
  position: relative; z-index: 1;
  width: clamp(230px, 46vw, 540px); margin: 0 auto; aspect-ratio: 3090 / 822;
}
.logo-wrap .L { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Letter boxes, measured from the logo: a 1-18.8%, m 22.3-51%, a 53.1-71%, l 74.4-78.7%, a 81.2-99%. */
.L1 { clip-path: inset(0 79.44% 0 0); }
.L2 { clip-path: inset(0 47.96% 0 20.56%); }
.L3 { clip-path: inset(0 27.29% 0 52.04%); }
.L4 { clip-path: inset(0 20.06% 0 72.71%); }
.L5 { clip-path: inset(0 0 0 79.94%); }
.L { animation: letter-in 420ms cubic-bezier(.2, .7, .3, 1) both; }
.L1 { animation-delay: 1s; }
.L2 { animation-delay: 1.32s; }
.L3 { animation-delay: 1.47s; }
.L4 { animation-delay: 1.62s; }
.L5 { animation-delay: 1.77s; }
@keyframes letter-in { from { opacity: 0; transform: translateY(3%); } to { opacity: 1; transform: none; } }
/* Shuffling characters that hold each letter's place until it settles (made by site.js). */
.glyph {
  position: absolute; top: 62.5%; transform: translate(-50%, -50%);
  font-family: var(--mono); line-height: 1; color: rgba(242, 243, 245, .42);
  pointer-events: none; transition: opacity .25s;
}
.glyph.gone { opacity: 0; }
/* The drop sits in the first a's bowl: circle (277.1, 523, r 84) in the logo's -30 -42 3090 822 box. */
.drop {
  position: absolute; left: 7.220%; top: 58.516%; width: 5.437%; height: 20.438%;
  border-radius: 50%; background: var(--sky);
  animation: drop-in 820ms 2.05s both;
}
@keyframes drop-in {
  0%   { transform: translateY(-250%) scale(.5); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  12%  { opacity: 1; }
  58%  { transform: translateY(6%) scale(1.08, .9); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  80%  { transform: translateY(-3%) scale(.98, 1.03); }
  100% { transform: none; opacity: 1; }
}
.hero h1 {
  position: relative; z-index: 1;
  margin: clamp(26px, 4vw, 40px) auto 0; max-width: 18em;
  font-size: clamp(28px, 3.8vw, 44px); line-height: 1.12;
}
.lede {
  max-width: 33em; margin: 18px auto 0;
  color: var(--muted); font-size: clamp(16.5px, 1.5vw, 19px);
}
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px; border-radius: 12px;
  border: 1px solid var(--line-2); background: transparent;
  color: var(--text); font: 500 15.5px/1 var(--sans); text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.btn:hover { background: var(--raise); border-color: #474c52; }
.btn.primary { background: var(--sky); border-color: var(--sky); color: var(--bg); }
.btn.primary:hover { background: #82d6fb; border-color: #82d6fb; }
.status {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  color: var(--faint); font: 400 13px/1.4 var(--mono);
}
.dot.live { width: 7px; height: 7px; background: var(--sky); }

/* Product preview: drawn from the app's own Home, deep theme */
.preview { margin-top: clamp(64px, 9vw, 104px); }
.shot { position: relative; margin: 0; padding-bottom: 56px; cursor: default; border-radius: 1.2em; }
.shot:focus-visible { outline-offset: 8px; }
.shot figcaption {
  display: flex; gap: 14px; align-items: baseline; margin-top: 22px;
  color: var(--faint); font-size: 14px;
}
.mono { font-family: var(--mono); font-size: 13px; color: var(--sky); }
.hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .hint-hover { display: none; } .hint-touch { display: inline; } }
.win {
  --s: clamp(9px, 1.08vw, 12.5px);
  font-size: var(--s); line-height: 1.35;
  display: grid; grid-template-columns: 18em 1fr;
  height: 49em; width: 92%;
  background: var(--sunk); border: 1px solid var(--line); border-radius: 1.2em;
  overflow: hidden; user-select: none;
}
.win .sp, .phone .sp { flex: 1; }
svg.i { width: 1.25em; height: 1.25em; flex: none; }
svg.i.s { width: 1em; height: 1em; color: var(--faint); }
.dot { width: .6em; height: .6em; border-radius: 50%; flex: none; }
.dot.ok { background: var(--ok); }
.dot.need { background: var(--apricot); width: .7em; height: .7em; margin: 0 .3em; }
.spin {
  width: 1em; height: 1em; flex: none; border-radius: 50%;
  border: .15em solid rgba(101, 203, 249, .22); border-top-color: var(--sky);
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.rail { display: flex; flex-direction: column; padding: 1.1em .8em .9em; color: #d9dbde; min-width: 0; }
.rail-top { display: flex; align-items: center; gap: .9em; padding: 0 .5em 1em; color: var(--muted); }
.rail-top img { width: 1.5em; height: 1.5em; }
.ri, .rc { display: flex; align-items: center; gap: .75em; padding: .44em .55em; border-radius: .6em; white-space: nowrap; }
.ri.on { background: #2a2c30; color: var(--text); }
.ri svg.i { color: var(--muted); }
.ri.on svg.i { color: var(--text); }
kbd {
  font: inherit; font-size: .82em; color: var(--faint);
  border: 1px solid var(--line-2); border-radius: .35em; padding: .05em .4em;
}
kbd + kbd { margin-left: -.4em; }
.rh {
  display: flex; align-items: center; gap: .5em;
  margin-top: .9em; padding: .3em .55em; color: var(--faint); font-size: .92em;
}
.rh .spin { width: .9em; height: .9em; }
.rc { align-items: flex-start; }
.rc .spin { margin-top: .2em; }
.rc img { width: 1.1em; height: 1.1em; margin-top: .1em; }
.rc div { min-width: 0; }
.rc b, .row b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc small, .row small { display: block; font-size: .9em; color: var(--faint); }
.rc.plain { align-items: center; }
.rc.plain small { font-size: .9em; }
.rail-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: .6em; }

.x.scrambled { font-family: var(--mono); font-size: .9em; color: var(--faint); letter-spacing: .02em; }
.greet.x.scrambled { font-size: 1.6em; color: var(--muted); }
.main {
  position: relative; margin: .55em .55em .55em 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: .9em; overflow: hidden;
}
.mini-field { position: absolute; top: 0; left: 0; width: 100%; height: 34%; pointer-events: none; }
/* Left of center, so the phone in front never covers it. */
.home { position: relative; width: min(40em, 66%); margin: 7.5em 0 0 4.5em; }
.greet { font-size: 2em; font-weight: 500; letter-spacing: -0.02em; }
.date { margin-top: .2em; color: var(--muted); }
.composer {
  margin-top: 1.4em; padding: .9em 1em .8em;
  background: var(--raise); border: 1px solid #3b5566; border-radius: 1em;
}
.chips, .bar { display: flex; align-items: center; gap: .6em; }
.chip {
  display: inline-flex; align-items: center; gap: .45em;
  color: #c9cbce; font-size: .92em; padding: .25em .5em; border-radius: .5em;
}
.chip svg.i { width: 1.1em; height: 1.1em; color: var(--faint); }
.chip.flat { padding-left: .2em; }
.chip.pill { border: 1px solid var(--line-2); border-radius: 2em; padding: .35em .75em; color: var(--text); }
.ph { margin: .95em .1em 1.1em; color: var(--faint); }
.ib {
  display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%;
  color: var(--muted); border: 1px solid var(--line-2);
}
.ib:first-child { border-color: transparent; }
.ib.mic { color: var(--sky); border-color: rgba(101, 203, 249, .45); background: rgba(101, 203, 249, .1); }
.list-h { display: flex; gap: .6em; margin: 1.9em 0 .55em; color: var(--muted); font-size: .95em; font-weight: 500; }
.list-h span { color: var(--faint); }
.row {
  display: flex; align-items: center; gap: .85em;
  padding: .75em .9em; border: 1px solid var(--line); border-radius: .8em; background: var(--raise);
}
.row + .row { margin-top: .5em; }
.row > div { min-width: 0; flex: 1; }
.status-w { color: var(--sky); font-size: .92em; }
.stop { display: inline-flex; align-items: center; gap: .3em; color: var(--muted); font-size: .9em; }
.mini-btn { border: 1px solid var(--line-2); border-radius: 2em; padding: .3em .9em; font-size: .92em; }

.phone {
  position: absolute; right: 0; bottom: 0;
  font-size: clamp(9px, 1.02vw, 12px); line-height: 1.35;
  width: 22.5em; padding: .6em;
  background: #0f1011; border: 1px solid var(--line-2); border-radius: 3em;
  user-select: none;
}
.ph-screen {
  position: relative; display: flex; flex-direction: column;
  height: 44em; padding: 1.4em 1.1em 0;
  background: var(--bg); border-radius: 2.5em; overflow: hidden;
}
.ph-top { display: flex; align-items: center; gap: .7em; color: var(--muted); margin-bottom: 1.6em; }
.ph-top img { width: 1.6em; height: 1.6em; }
.host {
  display: inline-flex; align-items: center; gap: .45em;
  border: 1px solid var(--line-2); border-radius: 2em; padding: .25em .7em; color: var(--text); font-size: .92em;
}
.phone .greet { font-size: 1.75em; }
.phone .composer { margin-top: 1.1em; }
.phone .ph { margin: .2em .1em 1em; }
.phone .list-h { margin-top: 1.5em; }
.phone .row { padding: .7em .8em; }
.tabs {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around; padding: .7em .4em 1.3em;
  background: var(--bg); border-top: 1px solid var(--line); color: var(--faint); font-size: .82em;
}
.tabs span { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.tabs svg.i { width: 1.6em; height: 1.6em; }
.tabs .on { color: var(--sky); }

/* Sections */
section h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; }
.sub { margin-top: 14px; max-width: 34em; color: var(--muted); font-size: 18px; }

.linked { margin-top: clamp(96px, 12vw, 160px); text-align: center; }
.linked .sub { margin-inline: auto; }
.streams { position: relative; height: 360px; margin-bottom: 36px; }
.stream-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.tag {
  position: absolute; top: 0; transform: translateX(-50%);
  font: 400 13px/1 var(--mono); color: var(--faint);
}
/* Centered over each pair of lanes: 0.86 of the lane offset min(32%, 300px). */
.tag-l { left: calc(50% - min(27.52%, 258px)); color: var(--sky); }
.tag-r { left: calc(50% + min(27.52%, 258px)); }
.stream-mark { position: absolute; left: 50%; bottom: 28px; width: 64px; height: 64px; transform: translateX(-50%); }

.end { margin-top: clamp(112px, 14vw, 176px); text-align: center; }
.end .sub { margin-inline: auto; }

.foot {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 28px;
  margin-top: clamp(96px, 12vw, 144px); padding-top: 28px; padding-bottom: 40px;
  border-top: 1px solid var(--line); color: var(--faint); font-size: 14.5px;
}
.foot-nav { display: flex; gap: 22px; }
.foot-nav a { text-decoration: none; color: var(--muted); }
.foot-nav a:hover { color: var(--text); }
.copy { grid-column: 1 / -1; }

/* Not found */
.lost { min-height: 100vh; display: grid; place-content: center; gap: 18px; text-align: center; padding: var(--gutter); }
.lost img { margin: 0 auto 10px; }
.lost p { color: var(--muted); }

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .win { display: none; }
  .shot { padding-bottom: 0; }
  .phone { position: relative; margin: 0 auto; font-size: min(12px, 3.3vw); }
  .shot figcaption { justify-content: center; }
  .streams { height: 290px; }
  .stream-mark { width: 52px; height: 52px; }
  .foot { grid-template-columns: 1fr; }
  .foot-nav { flex-wrap: wrap; gap: 14px 22px; }
}

@media (max-width: 480px) {
  .top-nav { font-size: 14.5px; }
  .top-nav a { padding: 6px 8px; }
  .btn { width: 100%; }
  .status { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .drop, .L { animation: none; }
  .spin { animation: none; border-color: rgba(101, 203, 249, .5); border-top-color: var(--sky); }
}