/* Throughline — coming soon.
   Palette is taken from SMPTE colour bars, muted to roughly 70% saturation so
   they read as instrumentation rather than decoration. The bar colours are
   never ornamental: each one is bound to a specific camera angle or section,
   so colour carries identity the way it does on a vectorscope. */

:root {
  --void:   #0A0C10;
  --panel:  #12151C;
  --panel2: #171B24;
  --rule:   #232936;
  --text:   #E8EAF0;
  --dim:    #858DA3;
  --dimmer: #5C6377;

  /* SMPTE bars, muted */
  --bar-yellow:  #C9C255;
  --bar-cyan:    #4FB6C6;
  --bar-green:   #4FC07C;
  --bar-magenta: #C15A9E;
  --bar-red:     #C9604F;
  --bar-blue:    #5A78CC;

  --accent: var(--bar-cyan);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(20px, 5vw, 56px);
  --measure: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--void);
  padding: 12px 18px; z-index: 50; border-radius: 2px;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── masthead ─────────────────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
  background: rgba(10, 12, 16, 0.86);
  backdrop-filter: blur(10px);
}
.masthead-in {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 18px;
}
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 7px;
}
.wordmark-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 2px;
  padding: 2px 5px;
  transform: translateY(-1px);
}
.masthead-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex; align-items: center; gap: 8px;
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bar-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bar-green) 18%, transparent);
}

/* ── type ─────────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 22px;
}
.display {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(48px, 11vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 26px;
}
.display-sm {
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.lede {
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.62;
  color: var(--dim);
  max-width: 60ch;
  margin: 0 0 46px;
}
.lede-sm { font-size: 17px; margin-bottom: 0; }

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 14px;
  max-width: 24ch;
}
.section-sub {
  color: var(--dim);
  max-width: 58ch;
  margin: 0 0 44px;
}
.section-title + .cards,
.section-title + .pipeline,
.section-title + .split { margin-top: 44px; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(56px, 10vw, 116px) clamp(48px, 8vw, 88px); }

/* ── signature: the sync strip ────────────────────────────────────────── */
.strip {
  margin: 0 0 46px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  overflow: hidden;
}
.strip-head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.strip-label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dimmer);
}
.tc {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin-left: auto;
}
.tc-sm { font-size: 12px; color: var(--dim); }
.strip-state {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bar-red);
  min-width: 7ch; text-align: right;
  transition: color .5s ease;
}
.strip-state[data-locked="true"] { color: var(--bar-green); }

.tracks { position: relative; padding: 16px; display: grid; gap: 9px; }
.track {
  position: relative;
  height: 34px;
  display: flex; align-items: center; gap: 2px;
  /* set by JS: starts offset, animates to 0 */
  transform: translateX(var(--offset, 0));
  transition: transform 1500ms cubic-bezier(.16,.84,.34,1);
}
.track-bar {
  flex: 0 0 auto;
  width: 2px;
  border-radius: 1px;
  background: var(--tint);
  opacity: .78;
}
.playhead {
  position: absolute; top: 10px; bottom: 10px; left: 50%;
  width: 1px;
  background: color-mix(in srgb, var(--text) 55%, transparent);
  pointer-events: none;
}
.strip-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dimmer);
}
.replay {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 5px 11px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.replay:hover { color: var(--text); border-color: var(--dim); }

/* ── signup ───────────────────────────────────────────────────────────── */
.signup { max-width: 470px; }
.signup-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 11px;
}
.signup-row { display: flex; gap: 9px; }
.signup input {
  flex: 1 1 auto; min-width: 0;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  padding: 13px 15px;
}
.signup input::placeholder { color: var(--dimmer); }
.signup input:focus { border-color: var(--accent); outline: none; }
.signup button {
  flex: 0 0 auto;
  background: var(--accent);
  color: #06222A;
  border: none;
  border-radius: 3px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  cursor: pointer;
  transition: filter .18s;
}
.signup button:hover { filter: brightness(1.1); }
.signup button[disabled] { opacity: .55; cursor: default; }
.signup-note {
  font-size: 13px;
  color: var(--dimmer);
  margin: 11px 0 0;
}
.signup-note[data-state="err"] { color: var(--bar-red); }
.signup-note[data-state="ok"]  { color: var(--bar-green); }

/* ── bands ────────────────────────────────────────────────────────────── */
.band { padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--rule); }
.band-alt { background: var(--panel); }
.band-custody { background: var(--panel); }
/* No max-width here: .wrap centres itself, so narrowing it would
   indent this band against every other section. The measure is set
   on the type instead. */

/* ── cards ────────────────────────────────────────────────────────────── */
.cards {
  display: grid;
  /* Exactly three across on desktop. `auto-fit` gave four columns at this
     measure, which left the sixth card followed by two empty cells — and
     because the grid gap shows the rule colour through, the hole rendered as a
     grey block that read as a broken layout. Six cards, three columns, two
     clean rows. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.card { background: var(--void); padding: 28px 26px 32px; }
.band-alt .card { background: var(--panel); }
.card-mark {
  display: block;
  width: 26px; height: 3px;
  background: var(--mark);
  border-radius: 1px;
  margin-bottom: 18px;
}
.card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.card p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.62; }

/* The "what you'd actually do with it" line. Set apart from the description
   because it answers a different question — not what the feature is, but the
   moment you would reach for it. */
.card-use {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  color: var(--text) !important;
  font-size: 14px !important;
}
.card-use::before {
  content: "→ ";
  color: var(--mark, var(--accent));
}

/* ── pipeline ─────────────────────────────────────────────────────────── */
.pipeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pipeline li {
  display: grid;
  grid-template-columns: 58px minmax(90px, 150px) 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 19px 4px;
  border-bottom: 1px solid var(--rule);
}
.step-n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dimmer);
  font-variant-numeric: tabular-nums;
}
.step-t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.step-d { color: var(--dim); font-size: 15px; }

/* ── split ────────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.col-t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 11px;
}
.col-rule { display: block; width: 22px; height: 3px; background: var(--mark); border-radius: 1px; }
.col p { margin: 0; color: var(--dim); font-size: 15px; }

/* ── footer ───────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--rule); padding-block: 34px; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.wordmark-sm { font-size: 15px; }
.foot-meta { margin: 0; font-size: 13px; color: var(--dimmer); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot-sep { color: var(--rule); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
  .signup-row { flex-direction: column; }
  .signup button { width: 100%; }
  .pipeline li { grid-template-columns: 42px 1fr; row-gap: 5px; }
  .step-d { grid-column: 2; }
  .masthead-status span:not(.dot) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .track { transition: none !important; transform: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── the instrument's later stages ──────────────────────────────────────────
   One panel for the whole pipeline rather than five separate widgets. The
   playhead is fixed in every stage on purpose: it is the page's argument that
   processing does not move your sync, made visually rather than claimed. */

.tracks { transition: opacity .35s ease; }
.track-bar { transition: height .5s cubic-bezier(.4,0,.2,1), opacity .4s ease; }

/* noise layer, shown during CLEAN then removed */
.track-bar[data-noise="1"] { opacity: .30; }
.tracks[data-stage="clean"] .track-bar[data-noise="1"] { opacity: 0; height: 2px !important; }

/* transcript lines */
.stage-overlay {
  /* Inside the TRACKS area, not the whole strip. `inset: 0` put the first
     transcript line straight over the "Transcript" label and the timecode. */
  position: absolute;
  top: 50px; right: 0; bottom: 44px; left: 0;
  pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
  padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px;
}
.strip { position: relative; }
.stage-overlay[data-show="1"] { opacity: 1; }

.tx-line {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; line-height: 1.5;
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
}
.tx-line[data-in="1"] { opacity: 1; transform: none; }
.tx-tc { font-family: var(--mono); font-size: 11px; color: var(--dimmer); flex: 0 0 auto; }
.tx-spk {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--who); flex: 0 0 auto;
}
.tx-txt { color: var(--text); }

/* burn-in card */
.burn {
  position: absolute; right: 22px; bottom: 22px;
  background: rgba(0,0,0,.72);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 8px 12px;
  font-family: var(--mono); font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.burn[data-in="1"] { opacity: 1; transform: none; }
.burn span { display: block; }
.burn .burn-sm { font-size: 10px; color: var(--dim); }

/* deliver: file rows with checksums */
.file-row {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px;
  padding: 3px 0;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
}
.file-row[data-in="1"] { opacity: 1; transform: none; }
.file-dot { width: 8px; height: 8px; border-radius: 1px; background: var(--who); flex: 0 0 auto; }
.file-name { color: var(--text); flex: 0 0 128px; }
.file-hash { color: var(--dimmer); }
.file-ok { color: var(--bar-green); margin-left: auto; }

/* stage stepper */
.stages { display: flex; gap: 2px; flex-wrap: wrap; }
.stage-btn {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dimmer);
  background: none; border: 1px solid transparent;
  border-radius: 2px;
  padding: 4px 9px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.stage-btn:hover { color: var(--text); }
.stage-btn[aria-current="true"] {
  color: var(--void);
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 620px) {
  .stages { gap: 0; }
  .stage-btn { padding: 4px 6px; font-size: 9px; }
  .tx-txt { display: none; }
}

/* ── roles ────────────────────────────────────────────────────────────────
   Hover lifts the row and reveals a line about what the product actually does
   for that role — the reveal is the reason it grows, rather than growth for
   its own sake.

   The accent is the interactive cyan and only the interactive cyan. The SMPTE
   bar colours identify camera angles and speakers everywhere else on this
   page, so spending them on decoration here would cost that language its
   meaning. Cyan already signals "this responds to you". */
.roles {
  list-style: none;
  margin: 40px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 8px;
}
.roles li {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: transparent;
  color: var(--dim);
  font-size: 15px;
  cursor: default;
  transition: transform .26s cubic-bezier(.2,.7,.3,1),
              background .26s ease, border-color .26s ease,
              box-shadow .26s ease;
}
.roles b { color: var(--text); font-weight: 600; }

.roles li::before {
  content: "";
  position: absolute; left: -1px; top: 12px; bottom: 12px;
  width: 2px; border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .26s ease;
}

/* The reveal. Grid-rows animates to content height without hard-coding one —
   a fixed max-height clips the longer lines at narrow widths. */
.role-more {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  opacity: 0;
  transition: grid-template-rows .26s ease, opacity .22s ease, margin-top .26s ease;
  margin-top: 0;
}
.role-more > * { min-height: 0; }

.roles li:hover,
.roles li:focus-visible {
  transform: translateY(-3px);
  background: var(--panel2);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  outline: none;
}
.roles li:hover::before,
.roles li:focus-visible::before { opacity: 1; }

.roles li:hover .role-more,
.roles li:focus-visible .role-more {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 9px;
}

/* No hover on touch: show the detail permanently rather than hiding content
   behind a gesture that device cannot make. */
@media (hover: none) {
  .role-more { grid-template-rows: 1fr; opacity: 1; margin-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .roles li { transition: background .01ms, border-color .01ms; }
  .roles li:hover, .roles li:focus-visible { transform: none; }
  .role-more { transition: none; }
}

/* ── what it replaces ─────────────────────────────────────────────────── */
.stack { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.stack li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--rule);
}
.stack-n { font-size: 16px; }
.stack-p {
  font-family: var(--mono); font-size: 13px;
  color: var(--dim); text-align: right; flex: 0 0 auto;
}
.stack-note {
  margin: 26px 0 0;
  max-width: 62ch;
  color: var(--dim);
  font-size: 15px;
}

/* ── role tags ───────────────────────────────────────────────────────────
   Set in the mono face because they read as metadata — the way a shoot day is
   labelled on a card or in a report — rather than as navigation. */
.tags {
  list-style: none;
  margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.tags li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--dim);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 5px 11px;
  white-space: nowrap;
}