:root {
  --bg: #0e0f10;
  --card: #1c1d1f;
  --raised: #2a2b2e;
  --track: #3a3b3f;
  --ink: #f5f5f7;
  --muted: rgba(245, 245, 247, 0.66);
  --faint: rgba(245, 245, 247, 0.12);
  --accent: #0a84ff;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }

@font-face { font-family: "Fraunces"; src: url(fonts/fraunces.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.5 "Instrument Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
h1 { font-size: clamp(44px, min(6.4vw, 10vh), 84px); }
h2 { font-size: clamp(34px, 4.4vw, 56px); }
h3 { font-size: 17px; font-weight: 600; }

.nav {
  position: fixed; inset: 0 0 auto;
  z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 48px);
}

.edge { position: fixed; inset: 0 0 auto; z-index: 9; height: 96px; pointer-events: none; }
.edge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(14, 15, 16, 0.6), rgba(14, 15, 16, 0)); }
.edge i {
  position: absolute; inset: 0;
  --m: linear-gradient(to top, transparent calc(var(--n) * 12.5%), #000 calc((var(--n) + 1) * 12.5%) calc((var(--n) + 2) * 12.5%), transparent calc((var(--n) + 3) * 12.5%));
  -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b));
  -webkit-mask: var(--m); mask: var(--m);
}
.edge i:nth-child(1) { --n: 0; --b: 0.4px; }
.edge i:nth-child(2) { --n: 1; --b: 0.8px; }
.edge i:nth-child(3) { --n: 2; --b: 1.5px; }
.edge i:nth-child(4) { --n: 3; --b: 3px; }
.edge i:nth-child(5) { --n: 4; --b: 6px; }
.edge i:nth-child(6) { --n: 5; --b: 12px; }
.edge i:nth-child(7) { --n: 6; --b: 18px; }
.edge i:nth-child(8) { --n: 7; --b: 28px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 19px; }
.mark { width: 36px; height: 36px; }
.nav nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nav nav a:not(.pill) { color: var(--muted); }
.nav nav a:not(.pill):hover { color: var(--ink); }
.pill { padding: 7px 16px; border-radius: 999px; background: var(--ink); color: #000; }
.menu-toggle {
  display: none; place-content: center; gap: 6px; width: 40px; height: 40px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.menu-toggle i { display: block; width: 20px; height: 1.5px; border-radius: 1px; background: var(--ink); transition: transform 0.2s var(--ease); }
.nav.open .menu-toggle i:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav.open .menu-toggle i:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.stage {
  position: relative;
  background: url(img/hero.jpg) center 40% / cover no-repeat;
}
.stage::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.3));
}
.closing::before { background: rgba(0, 0, 0, 0.15); }
.stage > * { position: relative; z-index: 1; }
.hero::after, .closing::after { content: ""; position: absolute; inset: auto 0 0; height: min(42%, 360px); background: linear-gradient(rgba(14, 15, 16, 0), rgba(14, 15, 16, 0.55) 45%, var(--bg)); }
.closing::after { inset: 0 0 auto; background: linear-gradient(var(--bg), rgba(14, 15, 16, 0.55) 55%, rgba(14, 15, 16, 0)); }

.hero {
  height: 100vh; height: 100svh; min-height: 600px;
  display: grid; grid-template-columns: minmax(0, 580px) auto;
  align-items: center; justify-content: center; gap: clamp(40px, 7vw, 128px);
  padding: 96px clamp(20px, 6vw, 96px) 48px;
}
.hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); }
.lede { margin-top: 24px; font-size: 21px; font-weight: 500; color: rgba(255, 255, 255, 0.82); max-width: 34ch; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
.button {
  display: inline-block; padding: 13px 26px; border-radius: 999px; white-space: nowrap;
  background: #fff; color: #000; font-weight: 600;
  transition: transform 0.15s;
}
.button:active { transform: scale(0.97); }
.button.soon { cursor: default; }
.button.soon:active { transform: none; }
.link { color: rgba(255, 255, 255, 0.82); font-weight: 500; }
.link:hover { color: #fff; }
.fine { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, 0.66); }
.hero-panel {
  height: clamp(360px, calc(100svh - 160px), 720px); width: auto;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 6vw, 96px);
  max-width: 1120px; margin: 0 auto;
  padding: clamp(72px, 12vw, 144px) clamp(16px, 5vw, 48px);
}
.feature.flip .copy { order: 2; }
.feature p { margin-top: 20px; font-size: 19px; color: var(--muted); max-width: 38ch; }

/* Mocks stand in for the app's own UI, which is SF. */
.mock { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; }
.mock {
  justify-self: center; width: min(400px, 100%);
  background: var(--card); border-radius: 20px; padding: 12px;
  box-shadow: 0 0 0 0.5px var(--faint);
}
.card-stack { display: grid; gap: 8px; }
.row { background: var(--raised); border-radius: 8px; padding: 12px; }
.row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 500; }
.pct { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.muted { order: 3; width: 100%; }
.row-head:has(.muted) { flex-wrap: wrap; row-gap: 0; }
.row-head .muted { font-size: 13px; color: var(--muted); padding-left: 32px; margin-top: -4px; }
.icon { width: 24px; height: 24px; border-radius: 6px; }
.icon.music { background: linear-gradient(#fa5c6f, #f42f48); }
.icon.call { background: linear-gradient(#5ee36f, #28c840); }
.icon.web { background: linear-gradient(#5ac8fa, #0a84ff); }
.slider { height: 20px; border-radius: 10px; background: var(--track); overflow: hidden; }
.slider span { display: block; height: 100%; border-radius: 10px; background: #f2f2f2; }
.slider.off span { opacity: 0.3; }
/* App sliders: 0-100% fills the first three quarters, overdrive (to 400%) the rest. */
.slider.boost { position: relative; }
.slider.boost::after { content: ""; position: absolute; left: 75%; top: 5px; width: 1.5px; height: 10px; margin-left: -0.75px; border-radius: 1px; background: rgba(142, 142, 147, 0.7); }
.pct.over { color: #ff9f0a; }
.playing { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.playing i { width: 2.5px; height: 10px; border-radius: 1.25px; background: var(--muted); transform-origin: bottom; transform: scaleY(0.6); }
.playing i:nth-child(2) { transform: scaleY(1); }

.menu { padding: 6px; font-size: 15px; }
.menu-title { padding: 6px 10px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.item { padding: 5px 10px 5px 30px; border-radius: 6px; position: relative; }
.item.on { background: var(--accent); }
.item.on::before { content: "\2713"; position: absolute; left: 11px; }
.sep { height: 1px; margin: 5px 10px; background: var(--faint); }

.hud { width: min(220px, 100%); padding: 28px 20px 24px; text-align: center; }
.hud svg { width: 64px; height: 64px; fill: var(--ink); stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hud-name { margin: 12px 0 16px; font-size: 13px; color: var(--muted); }
.hud .slider { height: 8px; }

.eq { padding: 16px; }
.eq-head { display: flex; justify-content: space-between; font-weight: 500; }
.eq-head span { font-size: 13px; color: var(--muted); }
.bands { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; height: 140px; margin-top: 16px; }
.bands i {
  position: relative; justify-self: center; width: 4px; border-radius: 2px; background: var(--track);
}
.bands i::after {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--g) * 100%);
  width: 14px; height: 14px; margin: 0 0 -7px -7px; border-radius: 50%; background: #f2f2f2;
}
.eq-labels { display: grid; grid-template-columns: repeat(10, 1fr); margin-top: 8px; font-size: 11px; color: var(--muted); text-align: center; }

.grid-section, .faq { max-width: 1120px; margin: 0 auto; padding: clamp(72px, 10vw, 128px) clamp(16px, 5vw, 48px); }
.grid { list-style: none; padding: 0; margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.grid li { background: var(--card); border-radius: 12px; padding: 20px; box-shadow: 0 0 0 0.5px var(--faint); }
.grid p { margin-top: 8px; font-size: 15px; color: var(--muted); }

.faq { max-width: 760px; }
.faq h2 { margin-bottom: 32px; }
details { border-top: 0.5px solid var(--faint); }
details:last-of-type { border-bottom: 0.5px solid var(--faint); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--muted); font-weight: 400; transition: transform 0.2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding-bottom: 20px; color: var(--muted); }

.closing {
  display: grid; place-items: center; align-content: center; gap: 28px;
  min-height: clamp(440px, 70vh, 680px); padding: 96px 16px; text-align: center;
  background-image: url(img/closing.jpg); background-position: center 75%;
}
.closing .fine { margin-top: -12px; }

@media (max-width: 820px) {
  .menu-toggle { display: grid; }
  .nav nav {
    display: none; position: absolute; top: calc(100% - 4px); left: 16px; right: 16px;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px;
    background: #1b1c1e; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px;
  }
  .nav.open nav { display: flex; }
  .nav nav a { padding: 12px; font-size: 17px; }
  .nav nav .pill { display: none; }
  .hero-copy { text-align: center; }
  .lede { margin-inline: auto; }
  .ctas { justify-content: center; }
  .hero { height: auto; min-height: 0; grid-template-columns: 1fr; gap: 56px; padding-top: 120px; padding-bottom: 160px; }
  .hero-panel { justify-self: center; width: min(440px, 88vw); height: auto; }
  .feature { grid-template-columns: 1fr; }
  .feature.flip .copy { order: 0; }
  .lede, .feature p { font-size: 18px; }
}

.legal { max-width: 720px; margin: 0 auto; padding: 144px clamp(16px, 5vw, 48px) 128px; }
.legal h1 { font-size: clamp(40px, 5vw, 56px); }
.legal h2 { margin: 48px 0 16px; font-size: 28px; letter-spacing: -0.015em; }
.legal p, .legal li { color: var(--muted); }
.legal p + p, .legal ul + p, .legal ol + p { margin-top: 16px; }
.legal ul, .legal ol { padding-left: 24px; }
.legal li + li { margin-top: 12px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal code { font-size: 15px; overflow-wrap: anywhere; }
.legal .fine { margin: 12px 0 32px; }
.legal p + ul, .legal p + ol { margin-top: 12px; }

.js .r {
  opacity: 0; transform: translateY(28px); filter: blur(8px);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), filter 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .in .r { opacity: 1; transform: none; filter: none; }
.js .hero-panel.r { transform: translateY(48px) scale(0.96); transition-duration: 1.2s, 1.6s, 1.2s; transition-delay: 240ms; }
.js .in .hero-panel.r { transform: none; }

.js .slider span { clip-path: inset(0 100% 0 0 round 10px); transition: clip-path 1.4s var(--ease) calc(var(--j, 0) * 120ms + 450ms); }
.js .in .slider span { clip-path: inset(0 0 0 0 round 10px); }

.js .seq > * { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--j) * 70ms + 300ms); }
.js .in .seq > * { opacity: 1; transform: none; }
.js .item.on { background: transparent; transition: opacity 0.6s var(--ease), transform 0.8s var(--ease), background-color 0.35s ease 1.05s; transition-delay: calc(var(--j) * 70ms + 300ms), calc(var(--j) * 70ms + 300ms), 1.05s; }
.js .in .item.on { background: var(--accent); }
.js .item.on::before { opacity: 0; transform: scale(0.4); transition: opacity 0.3s ease 1.15s, transform 0.5s var(--ease) 1.15s; }
.js .in .item.on::before { opacity: 1; transform: none; }

.js .hud .body { transform: scale(0.7); transform-origin: 8px 12px; opacity: 0; transition: transform 0.9s var(--ease) 0.3s, opacity 0.5s ease 0.3s; }
.js .in .hud .body { transform: none; opacity: 1; }
.js .hud .wave { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s var(--ease) 0.6s; }
.js .hud .wave + .wave { transition-delay: 0.78s; }
.js .in .hud .wave { stroke-dashoffset: 0; }
.js .hud .slider span { transition-delay: 0.9s; }

.js .bands i::after { bottom: 50%; transition: bottom 1.3s var(--ease) calc(var(--j) * 60ms + 650ms); }
.js .in .bands i::after { bottom: calc(var(--g) * 100%); }
.js .playing i { animation: playing 1.4s ease-in-out infinite; }
.js .playing i:nth-child(2) { animation-delay: 0.23s; }
.js .playing i:nth-child(3) { animation-delay: 0.46s; }
@keyframes playing { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }