/* tickrate.app's landing page: the app's own palette (lib/theme.dart) and the mark's violet. */

@font-face { font-family: Sora; src: url(/fonts/Sora-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Sora; src: url(/fonts/Sora-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: Sora; src: url(/fonts/Sora-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: Sora; src: url(/fonts/Sora-ExtraBold.ttf) format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: Audiowide; src: url(/fonts/Audiowide-Regular.ttf) format("truetype"); font-display: swap; }

:root {
  --bg: #0b0b0c;
  --bg-2: #111113;
  --surface: #18181a;
  --raised: #1f1f22;
  --line: #26262a;
  --text: #e4e4e7;
  --muted: #a1a1aa;
  --faint: #71717a;
  --violet: #9b5cf6;
  --violet-deep: #6d28d9;
  --violet-light: #c4a5ff;
  --pink: #f0abfc;
  --live: #ef4444;
  --ok: #22c55e;
  --gutter: max(20px, 5vw);
  --top-h: 72px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Sora, system-ui, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.defs { position: absolute; }
.grad {
  background: linear-gradient(92deg, var(--violet-light), var(--violet) 45%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The top bar: the brand, the sections, the app. The two outer columns share the leftover
   width equally, so the sections sit in the middle of the page however wide the brand and the
   button are (with flex and auto margins they sat between the two, off the middle). */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 32px;
  height: var(--top-h);
  padding: 0 var(--gutter);
  background: rgba(11, 11, 12, .6);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.brand { justify-self: start; display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 36px; height: 36px; filter: drop-shadow(0 4px 14px rgba(155, 92, 246, .45)); }
.wordmark { font-family: Audiowide, Sora, sans-serif; font-size: 22px; letter-spacing: .08em; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 600; color: var(--muted); }
.nav a { white-space: nowrap; transition: color .15s; }
.nav a:hover { color: #fff; }
.pill {
  justify-self: end;
  white-space: nowrap;
  padding: 10px 22px;
  border-radius: 999px;
  background: #fff;
  color: #0b0b0c;
  font-size: 15px;
  font-weight: 700;
  transition: transform .15s, box-shadow .15s;
}
.pill:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255, 255, 255, .15); }

/* The first screen */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 56px;
  min-height: calc(100vh - var(--top-h));
  padding: 64px var(--gutter) 96px;
  isolation: isolate;
  /* The glows reach past the sides. A phone's browser doesn't hold them in with body's
     overflow-x, and the whole page panned sideways; clip still lets them spill downward. */
  overflow-x: clip;
}
.glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(110px); pointer-events: none; }
.glow-a { width: 640px; height: 640px; left: -180px; top: -140px; background: rgba(124, 58, 237, .38); }
.glow-b { width: 560px; height: 560px; right: -120px; bottom: -120px; background: rgba(217, 70, 239, .22); }
.glow-c { inset: 0; border-radius: 0; filter: none; background: radial-gradient(ellipse 45% 65% at 50% 55%, rgba(124, 58, 237, .32), rgba(124, 58, 237, .08) 55%, transparent 75%); }
.stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 28% 72%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.5px 1.5px at 46% 12%, rgba(196, 165, 255, .8), transparent),
    radial-gradient(1px 1px at 63% 82%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.5px 1.5px at 78% 24%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1px 1px at 88% 62%, rgba(240, 171, 252, .7), transparent),
    radial-gradient(1px 1px at 6% 88%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.5px 1.5px at 38% 42%, rgba(255, 255, 255, .35), transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 7px 14px;
  border: 1px solid rgba(155, 92, 246, .35);
  border-radius: 999px;
  background: rgba(155, 92, 246, .08);
  font-size: 13px;
  font-weight: 600;
  color: var(--violet-light);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(239, 68, 68, .2); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } }
h1 {
  margin: 0;
  font-size: clamp(42px, 5.6vw, 86px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.lede { max-width: 560px; margin: 24px 0 36px; font-size: clamp(17px, 1.35vw, 20px); color: var(--muted); }
/* The two buttons always the same width: side by side, sharing the row, or one above the
   other when the column is narrow, each as wide as the row allows up to the same cap. */
.ctas { display: flex; flex-wrap: wrap; gap: 14px; max-width: 654px; }
.ctas .btn { flex: 1 1 0; justify-content: center; min-width: 268px; max-width: 320px; white-space: nowrap; }
.ctas.center { justify-content: center; margin-left: auto; margin-right: auto; }
/* Not on Windows (site.js): the browser is what works there, so it comes first. */
.nao-windows .ctas .btn-violet { order: -1; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 24px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 700;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.btn .i { width: 22px; height: 22px; }
.btn:hover { transform: translateY(-2px); }
.btn-light { background: #fff; color: #0b0b0c; box-shadow: 0 10px 30px rgba(255, 255, 255, .12); }
.btn-light:hover { box-shadow: 0 14px 40px rgba(255, 255, 255, .2); }
.btn-violet {
  background: linear-gradient(135deg, #a974ff, var(--violet-deep));
  color: #fff;
  box-shadow: 0 10px 32px rgba(124, 58, 237, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-violet:hover { box-shadow: 0 14px 44px rgba(124, 58, 237, .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
.fine { max-width: 560px; margin: 18px 0 0; font-size: 13px; color: var(--faint); }
.fine b { color: var(--muted); font-weight: 600; }
.finale .fine { margin: 22px auto 0; font-size: 13px; color: var(--faint); }
/* Not on Windows (site.js): the SmartScreen note is about an app they won't download. */
.nao-windows .smartscreen { display: none; }

/* The app, drawn in a monitor */
.stage { position: relative; perspective: 1800px; text-align: left; }
.monitor {
  position: relative;
  padding: 12px;
  border-radius: 22px;
  background: linear-gradient(160deg, #2a2a30, #121215 60%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 50px 120px rgba(0, 0, 0, .6), 0 0 90px rgba(124, 58, 237, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: rotateY(-13deg) rotateX(5deg) rotateZ(.5deg);
  transform-style: preserve-3d;
  animation: hover 7s ease-in-out infinite;
}
.monitor::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -46px;
  width: 26%;
  height: 46px;
  transform: translateX(-50%);
  background: linear-gradient(#1b1b1f, #0e0e10);
  clip-path: polygon(38% 0, 62% 0, 70% 70%, 100% 80%, 100% 100%, 0 100%, 0 80%, 30% 70%);
}
@keyframes hover { 50% { transform: rotateY(-11deg) rotateX(4deg) rotateZ(.5deg) translateY(-8px); } }
/* The screen is the mock's container: its text scales with the monitor, whatever the layout. */
.screen { overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10; background: var(--bg); container-type: inline-size; }

.app {
  display: grid;
  grid-template-columns: 3.4em 12.5em minmax(0, 1fr) 13.5em;
  height: 100%;
  font-size: 1.42cqi;
  line-height: 1.35;
  color: var(--text);
}
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid var(--line);
  font-size: .9em;
  font-weight: 700;
}
.rail { display: flex; flex-direction: column; align-items: center; gap: .9em; padding: .9em 0; background: var(--bg); border-right: 1px solid var(--line); }
.rail-logo svg { width: 2.5em; height: 2.5em; }
.rail-srv { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: .8em; background: var(--surface); font-weight: 800; font-size: .95em; color: var(--muted); }
.rail-srv.on { background: var(--text); color: var(--bg); }
.rail-srv.add { font-weight: 400; font-size: 1.3em; }
.side { display: flex; flex-direction: column; padding: 1em .8em .8em; background: var(--bg-2); border-right: 1px solid var(--line); overflow: hidden; }
.side-title { margin-bottom: .6em; font-size: 1.3em; font-weight: 800; }
.side-label { margin: 1.1em 0 .45em; font-size: .78em; font-weight: 700; letter-spacing: .08em; color: var(--faint); }
.room { display: flex; align-items: center; gap: .5em; padding: .45em .6em; border-radius: .6em; font-weight: 700; }
.room.on { background: var(--raised); }
.member { display: flex; align-items: center; gap: .55em; padding: .28em .4em .28em 1.4em; color: var(--muted); white-space: nowrap; }
.member .av { width: 1.7em; height: 1.7em; font-size: .8em; }
.member.talk { color: var(--text); }
.member.talk .av { box-shadow: 0 0 0 2px var(--ok); }
.badge-live { margin-left: auto; padding: .15em .5em; border-radius: 999px; background: #e4e4e7; color: #0b0b0c; font-size: .66em; font-weight: 800; }
.badge-live::before { content: "●"; margin-right: .3em; color: var(--live); }
.chan { display: flex; align-items: center; padding: .3em .6em; color: var(--muted); font-weight: 600; }
.unread { display: grid; place-items: center; margin-left: auto; min-width: 1.5em; height: 1.5em; border-radius: 999px; background: var(--text); color: var(--bg); font-size: .75em; font-weight: 800; }
.me { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: .7em .4em .5em; border-top: 1px solid var(--line); }
.me b { display: flex; align-items: center; gap: .4em; color: var(--ok); font-size: .92em; }
.me small { color: var(--muted); font-size: .85em; }
.me .ic { color: var(--muted); }
.on-dot { width: .55em; height: .55em; border-radius: 50%; background: var(--ok); }
.you { display: flex; align-items: center; gap: .5em; padding: .55em .4em 0; border-top: 1px solid var(--line); }
.you div { flex: 1; min-width: 0; }
.you b { display: block; font-size: .92em; }
.you small { display: block; color: var(--faint); font-size: .78em; }
.you .ic { color: var(--muted); }

.main { display: flex; flex-direction: column; min-width: 0; }
.bar { display: flex; align-items: center; gap: .7em; padding: .75em 1.2em; border-bottom: 1px solid var(--line); }
.bar b { display: flex; align-items: center; gap: .45em; font-size: 1.05em; }
.bar span { color: var(--muted); }
.focus { display: flex; flex: 1; flex-direction: column; gap: .65em; min-height: 0; padding: .9em 1.2em .7em; }
.tile-head { display: flex; align-items: center; gap: .7em; white-space: nowrap; overflow: hidden; }
.tile-head b { font-size: 1.05em; }
.tile-head em { font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.live { padding: .2em .6em; border-radius: 999px; background: #e4e4e7; color: #0b0b0c; font-size: .8em; font-weight: 800; }
.live::before { content: "●"; margin-right: .3em; color: var(--live); }
.shot { display: block; flex: 1 1 0; width: 100%; min-height: 0; border-radius: .5em; }
.controls { display: flex; align-items: center; gap: .5em; }
.ctl { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: .6em; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); }
.ctl svg { width: 1.2em; height: 1.2em; }
.ctl.end { margin-left: auto; }
.bare { display: grid; place-items: center; width: 1.6em; color: var(--muted); }
.bare svg { width: 1.2em; height: 1.2em; }
.vslider { position: relative; width: 6.5em; height: .3em; margin-left: .4em; border-radius: 1em; background: var(--line); }
.vslider::before { content: ""; position: absolute; inset: 0 45% 0 0; border-radius: 1em; background: var(--text); }
.vslider::after { content: ""; position: absolute; left: 55%; top: 50%; width: 1em; height: 1em; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; }
.pct { margin-left: .4em; color: var(--muted); font-size: .9em; font-weight: 600; }
.faces { display: flex; gap: .35em; margin-left: auto; }
.strip { display: flex; gap: .7em; }
.thumb-live { position: relative; width: 11.5em; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .5em; }
.thumb-live svg { display: block; width: 100%; height: 100%; }
.thumb-live span { position: absolute; left: .55em; bottom: .4em; font-size: .85em; font-weight: 700; text-shadow: 0 1px 4px #000; }
.thumb-live span::before { content: "●"; margin-right: .35em; color: var(--live); }
/* Not watched: the blurred, darkened preview, with "Assistir" in the middle (0.1.14). */
.thumb-live.preview > svg { filter: blur(3px) brightness(.45); transform: scale(1.1); }
.watch { position: absolute; left: 50%; top: 42%; display: flex; align-items: center; gap: .35em; padding: .35em .7em; transform: translate(-50%, -50%); border-radius: .5em; background: #e4e4e7; color: #0b0b0c; font-size: .85em; font-style: normal; font-weight: 700; white-space: nowrap; }
.watch svg { width: 1.1em; height: 1.1em; }
.dock { display: flex; align-items: center; gap: .5em; padding: .6em 1.2em; border-top: 1px solid var(--line); }
.pill-btn { display: inline-flex; align-items: center; gap: .45em; padding: .55em .9em; border-radius: .6em; background: #e4e4e7; color: #0b0b0c; font-weight: 700; }
.pill-btn svg { width: 1.2em; height: 1.2em; }
.pill-btn.leave { margin-left: auto; }

.chat { display: flex; flex-direction: column; gap: .8em; min-width: 0; padding: .8em .9em .9em; background: var(--bg); border-left: 1px solid var(--line); }
.chat-title { display: flex; align-items: center; gap: .45em; font-weight: 800; font-size: 1.1em; }
.tabs { display: flex; gap: .35em; }
.tab { padding: .25em .6em; border-radius: .5em; color: var(--muted); font-weight: 700; font-size: .92em; }
.tab.on { background: var(--raised); color: var(--text); }
.msgs { display: grid; gap: .9em; margin-top: auto; }
.msg { display: flex; gap: .7em; }
.msg b { font-size: 1em; }
.msg p { margin: .1em 0 0; color: var(--text); }
.card { margin-top: .5em; padding: .6em .7em; border-left: .3em solid var(--live); border-radius: .4em; background: var(--surface); }
.card small { display: block; color: var(--muted); font-size: .85em; }
.card strong { display: block; margin: .2em 0 .5em; color: #7cc0ff; }
.card svg { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: .4em; }
.compose { padding: .7em .9em; border: 1px solid var(--line); border-radius: .8em; color: var(--faint); }

.float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(24, 24, 26, .72);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  animation: bob 5s ease-in-out infinite;
}
.f1 { top: -7%; left: -3%; }
.f2 { bottom: -6%; left: -6%; animation-delay: -1.6s; }
.f3 { top: 24%; right: -4%; animation-delay: -3s; color: var(--violet-light); }
.float .ic { width: 18px; height: 18px; }
@keyframes bob { 50% { transform: translateY(-10px); } }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 10px var(--live); }
.bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.bars i { width: 3px; border-radius: 2px; background: var(--ok); animation: bar 1s ease-in-out infinite; }
.bars i:nth-child(1) { height: 40%; }
.bars i:nth-child(2) { height: 90%; animation-delay: -.3s; }
.bars i:nth-child(3) { height: 60%; animation-delay: -.6s; }
.bars i:nth-child(4) { height: 30%; animation-delay: -.8s; }
@keyframes bar { 50% { transform: scaleY(.45); } }

/* The sections below */
.band, .split, .finale { position: relative; padding: 120px var(--gutter); }
.band-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
h2 { margin: 0 0 18px; font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.band-head p, .split-text p, .finale p { margin: 0; font-size: clamp(16px, 1.25vw, 19px); color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; }
.feature {
  padding: 32px 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border: 1px solid var(--line);
  transition: border-color .2s, transform .2s;
}
.feature:hover { border-color: rgba(155, 92, 246, .55); transform: translateY(-4px); }
.ficon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, #a974ff, var(--violet-deep));
  box-shadow: 0 10px 28px rgba(124, 58, 237, .45);
  color: #fff;
}
.ficon svg { width: 26px; height: 26px; }
.feature h3 { margin: 0 0 10px; font-size: 21px; font-weight: 800; }
.feature p { margin: 0; color: var(--muted); }
.feature .num { color: var(--text); }
.note { display: block; margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--faint); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 72px;
  max-width: 1280px;
  margin: 0 auto;
}
.split.reverse .split-text { order: 2; }
.ticks { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.ticks li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(155, 92, 246, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23c4a5ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.split-art { position: relative; }
.split-art::before {
  content: "";
  position: absolute;
  inset: 10% 5%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(124, 58, 237, .22);
  filter: blur(80px);
}
.mosaic, .voice, .chatcard {
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, #1a1a1d, #121214);
  border: 1px solid var(--line);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5);
}
.mosaic { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mtile { min-width: 0; font-size: 12px; }
.mtile.big { grid-column: 1 / -1; font-size: 13px; }
.mhead { display: flex; align-items: center; gap: 8px; height: 30px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; }
.mhead b { overflow: hidden; text-overflow: ellipsis; }
.mhead em { font-style: normal; color: var(--muted); }
.mhead .ctl { width: 28px; height: 28px; border-radius: 8px; }
.mhead .ctl:first-of-type { margin-left: auto; }
.mhead .ctl svg { width: 14px; height: 14px; }
.mpic { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; }
.mtile.hot .mpic { box-shadow: 0 0 0 2px var(--text); }
.mpic > svg { display: block; width: 100%; height: 100%; }
.mpic.preview > svg { filter: blur(4px) brightness(.45); transform: scale(1.1); }
.mpic .watch { top: 50%; font-size: 13px; }
.menu {
  position: absolute;
  left: 20%;
  top: 74%;
  width: 240px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  font-size: 13px;
}
.menu small { display: block; margin-bottom: 8px; color: var(--muted); font-weight: 600; }
.slider { position: relative; height: 4px; margin: 0 44px 14px 0; border-radius: 4px; background: var(--line); }
.slider b { position: absolute; right: -44px; top: 50%; transform: translateY(-50%); font-size: 12px; }
.slider span { display: block; height: 100%; border-radius: 4px; background: var(--text); }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-top: 1px solid var(--line); font-weight: 600; }
.menu-item svg { width: 16px; height: 16px; color: var(--muted); }

.voice { position: relative; padding: 26px 28px 30px; font-size: 14px; }
.voice-title { margin-bottom: 18px; font-size: 20px; font-weight: 800; }
.devices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.devices small { display: block; margin-bottom: 8px; font-weight: 700; }
.select { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-weight: 600; white-space: nowrap; overflow: hidden; }
.select svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.select .caret { margin-left: auto; }
.range { position: relative; display: block; height: 4px; margin: 8px 0; border-radius: 4px; background: var(--line); }
.range span { position: relative; display: block; height: 100%; border-radius: 4px; background: var(--text); }
.range span::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); border-radius: 50%; background: #fff; }
.voice .side-label { margin-top: 26px; font-size: 11px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); font-weight: 700; }
.switch { position: relative; width: 40px; height: 22px; border-radius: 999px; background: #d4d4d8; }
.switch::after { content: ""; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #0b0b0c; }
.talker { position: absolute; right: -30px; top: -34px; display: flex; align-items: center; gap: 14px; padding: 12px 20px 12px 12px; border-radius: 18px; background: rgba(31, 31, 34, .85); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: bob 5s ease-in-out infinite; }
.talker .av { box-shadow: 0 0 0 3px var(--ok), 0 0 24px rgba(34, 197, 94, .5); }
.talker b { display: block; margin-bottom: 4px; font-size: 15px; }
.av.big { width: 44px; height: 44px; font-size: 17px; }
.wave { display: inline-flex; align-items: center; gap: 4px; height: 22px; }
.wave i { width: 4px; height: 100%; border-radius: 3px; background: var(--ok); animation: bar 1.1s ease-in-out infinite; }
.wave i:nth-child(odd) { animation-delay: -.35s; }
.wave i:nth-child(3n) { animation-delay: -.7s; height: 60%; }

.chatcard { display: grid; gap: 18px; font-size: 15px; }
.chatcard .av { width: 38px; height: 38px; font-size: 15px; }
.chatcard .msg p { margin: 2px 0 8px; }
.pic { display: block; width: min(320px, 100%); aspect-ratio: 16 / 9; border-radius: 12px; }
.card.big { width: min(360px, 100%); padding: 12px 14px; border-left-width: 4px; }
.card.big strong { font-size: 16px; }
.thumb { position: relative; }
.thumb svg { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; }
.play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 20px;
}

.finale { text-align: center; overflow: hidden; isolation: isolate; }
.finale h2 { font-size: clamp(40px, 6vw, 88px); }
.finale p { margin-bottom: 36px; }
/* 404.html: the finale on a screen of its own. */
.lost { display: grid; place-content: center; justify-items: center; min-height: 100vh; }
.lost .brand { margin-bottom: 40px; }
.lost h2 { font-size: clamp(34px, 5vw, 64px); }

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 36px var(--gutter);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.foot nav { display: flex; gap: 24px; }
.foot nav a:hover { color: #fff; }

/* Shown as they come into view (only with the script: without it, all is there). */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* Too narrow for one row: the sections go to a second row of the bar, under the brand and the
   button, instead of away. They sit in the middle while they fit and scroll sideways when they
   don't: auto margins on the ends center them, and collapse to nothing on an overflow, so the
   first link is never cut off (justify-content: center would put it out of reach). */
@media (max-width: 960px) {
  :root { --top-h: 112px; }
  .top { grid-template-columns: 1fr auto; grid-template-rows: 64px 48px; }
  .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: stretch;
    gap: 24px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid rgba(255, 255, 255, .05);
    font-size: 14px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a:first-child { margin-left: auto; }
  .nav a:last-child { margin-right: auto; }
  /* The bar is taller than the sections' top padding counts on. */
  section[id] { scroll-margin-top: 40px; }
}

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 72px; padding-top: 48px; text-align: center; }
  .hero-text { max-width: 720px; margin: 0 auto; }
  .lede, .fine { margin-left: auto; margin-right: auto; }
  .ctas { justify-content: center; margin-left: auto; margin-right: auto; }
  .monitor { transform: rotateX(4deg); animation: none; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split.reverse .split-text { order: 0; }
  .cards { grid-template-columns: 1fr; max-width: 560px; }
  .f1, .f2 { left: 0; }
  .f3 { right: 0; }
}

@media (max-width: 640px) {
  .top { column-gap: 12px; }
  /* All five fit from 360 px up; narrower, the row scrolls. */
  .nav { gap: 16px; font-size: 13px; }
  .wordmark { font-size: 19px; }
  .pill { padding: 9px 16px; font-size: 14px; }
  .btn { width: 100%; justify-content: center; }
  .ctas .btn { flex-basis: 100%; min-width: 0; max-width: none; }
  .ctas .btn-violet { order: -1; }
  .app { grid-template-columns: 3.4em minmax(0, 1fr); font-size: 2.4cqi; }
  .side, .chat, .strip { display: none; }
  .screen { aspect-ratio: 4 / 3; }
  .mtile, .mtile.big { font-size: 11px; }
  .mhead em { display: none; }
  .float { font-size: 12px; padding: 8px 12px; }
  .f1 { left: 0; top: -6%; }
  .f2 { left: auto; right: 0; bottom: -17%; }
  .f3 { display: none; }
  .band, .split, .finale { padding: 88px var(--gutter); }
  .menu { position: static; width: auto; grid-column: 1 / -1; }
  .devices { grid-template-columns: 1fr; }
  .voice { padding: 22px 20px 26px; }
  .talker { right: 12px; top: -30px; }
  .foot { flex-direction: column; text-align: center; }
}

/* Only here do the sections overflow their row: the ends fade, a hint that it scrolls (the
   scrollbar is hidden, and a mouse without a trackpad scrolls it only with shift). */
@media (max-width: 359px) {
  .nav {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}