/**
 * Ring 360 — the public page.
 *
 * The page has one argument to make: your track produces a film nobody else
 * has. Everything here is arranged to support that and nothing else.
 *
 * Two decisions carry the design. The first is that the accent is not a
 * colour, it is a ramp — the same green→cyan→violet→pink walk the ring makes
 * around its circumference, reused here as a system: the signal path along the
 * chain, the edge of the channel list, the light on the headline. A single
 * acid accent on black is what every dark product page does; a ramp is what
 * this particular product actually is.
 *
 * The second is that only one thing on the page moves on its own — the ring in
 * the hero — and it stops being decorative the moment you press Hear it, at
 * which point it is being driven by the FFT of the clip further down. The page
 * is not describing a music-reactive visualiser next to a picture of one. It
 * is running one.
 *
 * No webfonts and no external requests of any kind. Partly because the app has
 * no dependencies and this should not be the first, and partly because the
 * heaviest thing here is video: spending the connection on a font file before
 * that starts is the wrong trade. The personality has to come out of scale,
 * tracking and the mono, and it does.
 */

:root {
  --void: #04050a;          /* the ground */
  --haze: #0a0d16;          /* anything raised off it */
  --ink: rgba(255, 255, 255, 0.93);
  --dim: rgba(255, 255, 255, 0.50);
  --hair: rgba(255, 255, 255, 0.09);
  --beam: #7dd3fc;          /* the one interactive colour */

  /* The ring's own hue walk. Every structural accent is a position on it. */
  --r1: #34d399;
  --r2: #7dd3fc;
  --r3: #c084fc;
  --r4: #f472b6;

  --wide: 1180px;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

:focus-visible { outline: 2px solid var(--beam); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(var(--wide), calc(100% - 48px)); margin-inline: auto; }

/* Equipment lettering. Every label, index and caption on the page is set in
   this, because the vocabulary being taught — channels, source, signal — is
   the vocabulary printed on the back of a mixer. */
.eyebrow {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

h1, h2, h3 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; }

/* -------------------------------------------------------------- top bar --- */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(4, 5, 10, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.bar.scrolled { border-bottom-color: var(--hair); }
.bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 58px;
}

.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark b { font: 700 12px/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; }
.mark i {
  width: 15px;
  height: 15px;
  border: 4px solid var(--beam);
  border-radius: 50%;
}

.bar a.top-cta {
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--beam);
}
.bar a.top-cta:hover { color: #b9e8ff; }

/* ----------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  min-height: calc(100svh - 58px);
  display: flex;
  align-items: center;
  padding: 72px 0 84px;
  overflow: hidden;
}

/* Drawn, not filmed, and not a background image with a play button over it.
   Whatever else the page claims, this is the app's own motif running in the
   reader's browser before they have agreed to anything. */
#ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Legibility over the ring. Horizontal on wide screens because the type is
   left and the ring is right; radial on narrow, where they overlap. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 45%, rgba(4, 5, 10, 0.88), rgba(4, 5, 10, 0.30) 72%, transparent);
}

.hero-copy { position: relative; z-index: 2; max-width: 780px; }

h1 {
  font-size: clamp(42px, 7.1vw, 92px);
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 0.88;
  margin: 20px 0 0;
}
/* The second line is lit by the ramp, and how brightly is not a style choice —
   it is the audio level. Dim and still until something is playing, so the
   colour is a readout rather than a flourish. */
h1 .lit {
  display: block;
  background: linear-gradient(96deg, var(--r1), var(--r2) 36%, var(--r3) 68%, var(--r4));
  background-size: 135% 100%;
  background-position: calc(var(--sweep, 0) * 1%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: saturate(calc(0.66 + var(--level, 0) * 0.7))
          brightness(calc(0.94 + var(--level, 0) * 0.4));
}

.lede {
  max-width: 50ch;
  margin-top: 26px;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--dim);
}

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: 600 14px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 180ms, background 180ms, transform 180ms, color 180ms;
}
.btn:hover { border-color: var(--beam); background: rgba(125, 211, 252, 0.10); transform: translateY(-1px); }
.btn.solid { background: var(--beam); border-color: var(--beam); color: #04121c; }
.btn.solid:hover { background: #a5e2ff; }
.btn.on { border-color: var(--beam); color: var(--beam); }

/* The state line under the buttons. It reads as a piece of gear reporting its
   input, which is exactly what it is doing. */
.readout {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.readout .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dim);
  flex: none;
  transition: background 220ms, box-shadow 220ms;
}
.readout.live .dot { background: var(--r1); box-shadow: 0 0 9px var(--r1); }
.readout.live { color: var(--ink); }
.meter {
  width: 92px;
  height: 3px;
  border-radius: 2px;
  background: var(--hair);
  overflow: hidden;
  flex: none;
}
.meter i {
  display: block;
  height: 100%;
  width: calc(var(--level, 0) * 100%);
  background: linear-gradient(90deg, var(--r1), var(--r2) 55%, var(--r4));
}

/* -------------------------------------------------------------- section --- */

section { padding: clamp(76px, 11vw, 136px) 0; }
section + section { border-top: 1px solid var(--hair); }

.head { max-width: 60ch; margin-bottom: 46px; }
.head h2 {
  font-size: clamp(30px, 4.6vw, 50px);
  margin: 14px 0 18px;
  text-transform: uppercase;
  /* Two-sentence headings were breaking after the first word of the second
     sentence. Balancing lets the break land on the full stop. */
  text-wrap: balance;
}
.head p { color: var(--dim); font-size: 17px; }

/* ----------------------------------------------------------------- reel --- */

.reel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* The lead earns the full width: one clip playing on arrival is the entire
   argument, and it is the one the hero ring is wired to. */
.reel figure.lead { grid-column: 1 / -1; }
.reel figure.lead video { aspect-ratio: 2.35 / 1; }

.reel figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  transition: border-color 200ms;
}
.reel figure:hover { border-color: rgba(255, 255, 255, 0.2); }
.reel figure.playing { border-color: rgba(125, 211, 252, 0.4); }

.reel video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  cursor: pointer;
}

/* Native controls were dropped because coordinating one clip against another
   needs a handle the browser does not hand you, and because a scrubber invites
   you to treat a twelve-second loop like a film. */
.play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(4, 5, 10, 0.55);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 180ms, border-color 180ms, transform 180ms, opacity 180ms;
}
.play::after {
  content: '';
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 15px solid var(--beam);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.play:hover { border-color: var(--beam); background: rgba(125, 211, 252, 0.16); transform: translate(-50%, -50%) scale(1.06); }
.reel figure.playing .play { opacity: 0; pointer-events: none; }

.reel figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 15px;
  border-top: 1px solid var(--hair);
  font-size: 13px;
  color: var(--dim);
}
.reel figcaption b {
  flex: none;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--beam);
}

/* ---------------------------------------------------------------- chain --- */

/* The signal path, drawn as one. The ramp along the top is the same walk the
   ring makes, so the diagram and the picture are visibly the same object. */
.chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  background: var(--haze);
}
.chain::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--r1), var(--r2) 34%, var(--r3) 68%, var(--r4));
}
.stage { padding: 30px 22px 26px; border-left: 1px solid var(--hair); }
.stage:first-child { border-left: 0; }
.stage h3 { font-size: 15px; margin: 11px 0 8px; letter-spacing: 0.01em; }
.stage p { font-size: 13.5px; color: var(--dim); line-height: 1.5; }
.stage .eyebrow { font-size: 10px; }

.chain-note {
  margin-top: 22px;
  max-width: 62ch;
  color: var(--dim);
  font-size: 15px;
}
.chain-note b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- stack --- */

/* Nine rows in the order they composite, which is why they are numbered: the
   index is the z-order, not decoration. The coloured left edge accumulates
   into the ramp down the side of the list, so the depth is legible at a
   glance without a widget to explain it. */
.ends {
  display: flex;
  justify-content: space-between;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 2px 10px;
}

.stack { border-top: 1px solid var(--hair); }
.ch {
  display: grid;
  grid-template-columns: 40px 150px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 17px 20px;
  border-bottom: 1px solid var(--hair);
  border-left: 2px solid var(--c, var(--hair));
  transition: background 180ms;
}
.ch:hover { background: rgba(255, 255, 255, 0.025); }
.ch .n { font: 600 11px/1.4 var(--mono); letter-spacing: 0.1em; color: var(--c, var(--dim)); }
.ch h3 { font-size: 16px; letter-spacing: -0.01em; }
.ch p { color: var(--dim); font-size: 14px; }

/* ----------------------------------------------------------------- pair --- */

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.card {
  padding: 30px 28px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--haze);
}
.card h3 { font-size: 20px; margin: 12px 0 12px; }
.card p { color: var(--dim); font-size: 15px; }
.card p + p { margin-top: 12px; }
.card ul { list-style: none; margin-top: 16px; }
.card li {
  padding: 8px 0 8px 20px;
  border-top: 1px solid var(--hair);
  color: var(--dim);
  font-size: 14px;
  position: relative;
}
.card li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c, var(--beam));
}
.price {
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c, var(--beam));
}

/* ------------------------------------------------------------------ faq --- */

.faq { display: grid; gap: 2px; }
.faq details {
  border: 1px solid var(--hair);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.02);
}
.faq summary {
  padding: 17px 20px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--dim); font-weight: 400; }
.faq details[open] summary::after { content: '\2212'; }
.faq p { padding: 0 20px 18px; color: var(--dim); font-size: 15px; }

/* --------------------------------------------------------------- footer --- */

footer {
  padding: 40px 0 60px;
  border-top: 1px solid var(--hair);
  color: var(--dim);
  font-size: 13px;
}
.foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }

/* ----------------------------------------------------------------- small --- */

@media (max-width: 900px) {
  .chain { grid-template-columns: 1fr; }
  .chain::before { right: auto; bottom: 0; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--r1), var(--r2) 34%, var(--r3) 68%, var(--r4)); }
  .stage { border-left: 0; border-top: 1px solid var(--hair); padding-left: 26px; }
  .stage:first-child { border-top: 0; }
  .pair { grid-template-columns: 1fr; }
  .reel { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  section { padding: 62px 0; }
  .ch { grid-template-columns: 34px 1fr; gap: 6px 14px; }
  .ch p { grid-column: 2; }
  .head { margin-bottom: 34px; }
}

/* Motion is the subject here, so it cannot all be removed — but nothing should
   move without being asked. Under this preference the ring is drawn once and
   left, and the button that would set it running is hidden by the script
   rather than offered and then ignored. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}