/* SeenMetrics — tokens + house style
   ground: white · ink: near-black · surface: paper grey · accent: signal red
   type: Stack Sans Headline 300 (display) / Stack Sans Text 400-500 (text) */

:root {
  --bg: #ffffff;
  --surface: #f2f2f2;
  --surface-2: #e8e8e8;
  --ink: #0a0a0a;
  --muted: #6b6b6b;
  --accent: #d92b21;
  --accent-ink: #ffffff;
  --field-ink: #000000;
  --field-ink-2: #ffffff;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.08rem + 0.75vw, 1.625rem);
  --step-head: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --step-display: clamp(2.4rem, 1.4rem + 4.6vw, 4.75rem);

  --pad: clamp(20px, 4vw, 48px);
  --gap-section: clamp(96px, 11vw, 200px);
  --radius: 2px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Stack Sans Text", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-body);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Stack Sans Headline", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.05;
  margin: 0;
}

h1 { font-size: var(--step-display); }
h2 { font-size: var(--step-head); max-width: 22ch; }
h3 { font-size: var(--step-lead); letter-spacing: -0.012em; line-height: 1.2; }

p { margin: 0; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.lead { font-size: var(--step-lead); color: var(--ink); max-width: 32ch; }
.small { font-size: var(--step-small); color: var(--muted); }
.muted { color: var(--muted); }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 0;
}
.nav-in {
  display: flex; align-items: center; gap: 28px;
  padding-block: 18px;
}
.brand {
  display: in-line-flex; display: inline-flex; align-items: baseline; gap: 9px;
  text-decoration: none; margin-right: auto;
}
.brand-mark {
  width: 11px; height: 11px; background: var(--accent); display: inline-block;
  transform: translateY(0);
}
.brand-name {
  font-family: "Stack Sans Headline", sans-serif; font-weight: 300;
  font-size: 1.15rem; letter-spacing: -0.02em;
}
.nav a.navlink {
  text-decoration: none; font-size: var(--step-small); color: var(--muted);
  padding: 6px 0;
}
.nav a.navlink:hover { color: var(--ink); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-size: var(--step-small); font-weight: 500;
  border: 0; border-radius: var(--radius);
  padding: 13px 20px; cursor: pointer;
  background: var(--ink); color: #fff; text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}
.btn:hover { background: #000; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: #c02219; }
.btn-ghost {
  background: transparent; color: var(--ink);
  padding: 13px 4px; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.btn-ghost:hover { transform: none; color: var(--accent); }

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

.hero { padding: clamp(36px, 6vw, 72px) 0 0; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
}
.hero h1 { max-width: 20ch; }
.hero .lead { max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 6px; }

/* ---------- the fragment (product performing) ---------- */

.stage {
  margin-top: clamp(32px, 4.5vw, 64px);
  background: var(--ink);
  border-radius: var(--radius);
  padding: clamp(16px, 2.2vw, 30px);
  color: #fff;
}
.stage .panel-head .title { color: #fff; }
.stage .panel-head .meta { color: #9d9d9d; }
.stage .brand-row { color: #efefef; }
.stage .brand-row:hover { background: #1b1b1b; }
.stage .brand-row[aria-pressed="true"] { background: #fff; color: var(--ink); }
.stage .brand-row .secs { color: #9d9d9d; }
.stage .brand-row[aria-pressed="true"] .secs { color: #5c5c5c; }
.stage .tl-scale { color: #9d9d9d; }
.stage .readout { color: #efefef; }
.stage .small { color: #9d9d9d; }
.stage .tl-axis { background: #161616; }
.stage .tl-block { background: #3a3a3a; }
.stage .tl-block.on { background: var(--accent); }
.stage .playhead { background: #fff; }
.stage .frame { border: 1px solid #1f1f1f; }

.analysis { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 22px); }

.frame {
  position: relative; background: #0c0c0c; border-radius: var(--radius);
  aspect-ratio: 16 / 9; overflow: hidden;
}
.pitch {
  position: absolute; inset: 8% 6%;
  border: 1px solid rgba(255,255,255,.22);
}
.pitch::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,.22); transform: translateX(-.5px);
}
.pitch::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  transform: translate(-50%, -50%);
}
.board {
  position: absolute; bottom: 11%; left: 6%; right: 6%; height: 9%;
  display: flex; gap: 6px; align-items: stretch;
}
.board span {
  flex: 1; border-radius: 1px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: .01em; color: #fff; opacity: .55;
  border: 1px solid rgba(255,255,255,.16);
}
.board span.on { opacity: 1; background: var(--accent); border-color: var(--accent); }
.frame-tag {
  position: absolute; top: 12px; left: 12px;
  font-size: 13px; color: #fff; background: rgba(0,0,0,.55); padding: 4px 7px; border-radius: 2px;
}
.frame-tag.live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: 1px;
}

.panel { display: flex; flex-direction: column; min-width: 0; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px;
}
.panel-head .title { font-size: var(--step-small); font-weight: 500; }
.panel-head .meta { font-size: 13px; color: var(--muted); }

.brands { list-style: none; margin: 0; padding: 0; }
.brand-row {
  display: grid; grid-template-columns: 14px minmax(0,1fr) auto auto; align-items: center;
  gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; font: inherit; font-size: var(--step-small);
  padding: 9px 8px; cursor: pointer; border-radius: 2px; color: var(--ink);
  transition: background .15s ease;
}
.brand-row:hover { background: #e9e9e9; }
.brand-row[aria-pressed="true"] { background: var(--ink); color: #fff; }
.brand-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.swatch { width: 14px; height: 14px; border-radius: 1px; }
.brand-row .name { font-weight: 500; }
.brand-row .secs { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.brand-row[aria-pressed="true"] .secs { color: #d5d5d5; }

.timeline { margin-top: 14px; }
.tl-axis {
  position: relative; height: 54px; background: #fff; border-radius: 2px; overflow: hidden;
}
.tl-row { position: absolute; left: 0; right: 0; height: 9px; }
.tl-block { position: absolute; height: 100%; background: var(--surface-2); border-radius: 1px; }
.tl-block.on { background: var(--accent); }
.playhead {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); left: 0;
}
.tl-scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 6px; }

.scrub { width: 100%; margin: 12px 0 2px; accent-color: var(--accent); }
.readout { font-size: var(--step-small); color: var(--ink); font-variant-numeric: tabular-nums; }
.readout b { font-weight: 500; }

/* ---------- sections ---------- */

section.block { padding-top: var(--gap-section); }
.block-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: clamp(28px, 4vw, 56px); }
.block-head p { max-width: 60ch; color: var(--ink); }

/* how it works — drag through the stages */
.stages {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
  gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.stage-card {
  background: var(--surface); padding: clamp(18px, 2.2vw, 28px);
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px;
}
.stage-card h3 { max-width: 18ch; }
.mini {
  background: #fff; border-radius: 2px; padding: 12px; font-size: 13px;
}
.mini input {
  width: 100%; font: inherit; font-size: 13px; padding: 9px 10px;
  border: 1px solid #cfcfcf; border-radius: 2px; color: var(--ink); background: #fff;
}
.mini .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; }
.mini .row + .row { margin-top: 2px; padding-top: 9px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
.bar-mini { height: 5px; background: var(--surface-2); border-radius: 1px; overflow: hidden; }
.bar-mini span { display: block; height: 100%; background: var(--accent); }

/* features — giant command list */
.cmdlist { display: flex; flex-direction: column; }
.cmd {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(10px, 3vw, 48px); align-items: start;
  padding: clamp(18px, 2.2vw, 30px) 0;
}
.cmd + .cmd { padding-top: clamp(18px, 2.2vw, 30px); }
.cmd h3 { font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); }
.cmd p { max-width: 46ch; }

/* showcase — input half, output half */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; }
.split > div { background: var(--surface); padding: clamp(20px, 2.4vw, 34px); }
.split .out { background: var(--ink); color: #fff; }
.split .out .muted, .split .out .small { color: #c9c9c9; }
.split h3 { margin-bottom: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.field label { font-size: 13px; color: var(--muted); }
.field input {
  font: inherit; font-size: var(--step-small); padding: 12px 12px;
  border: 1px solid #cfcfcf; background: #fff; border-radius: 2px; color: var(--ink);
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.chip {
  font-size: 13px; padding: 5px 9px; border-radius: 2px; background: #fff; color: var(--ink);
}
.chip.on { background: var(--accent); color: #fff; }
.report { width: 100%; border-collapse: collapse; font-size: 13px; }
.report th, .report td { text-align: left; padding: 9px 0; font-variant-numeric: tabular-nums; }
.report th { font-weight: 500; color: #c9c9c9; }
.report tr + tr td { border-top: 1px solid rgba(255,255,255,.14); }
.report td:last-child, .report th:last-child { text-align: right; }

/* stats — bars standing on the edge */
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(6px, 1.4vw, 18px); align-items: end; height: clamp(220px, 26vw, 320px); }
.bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bar .col { background: var(--surface-2); width: 100%; border-radius: 1px 1px 0 0; position: relative; }
.bar.on .col { background: var(--accent); }
.bar .val { font-size: var(--step-small); font-variant-numeric: tabular-nums; padding-bottom: 8px; }
.bar .lab { font-size: 12px; color: var(--muted); padding-top: 10px; text-align: center; }



/* ---------- shot types (fragment) ---------- */
.shots {
  background: var(--surface);
  padding: clamp(20px, 2.6vw, 36px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 34px); align-items: end;
  min-height: 240px;
}
.shot { display: flex; flex-direction: column; gap: 10px; }
.shot .shot-frame {
  aspect-ratio: 4 / 3; background: #0c0c0c; border-radius: 2px; position: relative; overflow: hidden;
}
.shot .shot-frame span {
  position: absolute; background: var(--accent);
}
.shot.jersey .shot-frame span { left: 38%; top: 30%; width: 24%; height: 12%; }
.shot.boards .shot-frame span { left: 10%; bottom: 16%; width: 80%; height: 8%; }
.shot.background .shot-frame span { right: 12%; top: 18%; width: 30%; height: 18%; background: #6d6d6d; }
.shot.crowd .shot-frame span { left: 20%; bottom: 24%; width: 16%; height: 9%; background: #8a8a8a; }
.shot .shot-name { font-size: var(--step-small); font-weight: 500; }
.shot .shot-val { font-size: var(--step-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.shot .bar-mini { margin-top: 2px; }

/* ---------- comparison (fragment) ---------- */
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; min-height: 260px; }
.cmp-col { background: var(--surface); padding: clamp(18px, 2.4vw, 32px); }
.cmp-col:last-child { background: var(--ink); color: #fff; }
.cmp-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 20px;
}
.cmp-head .cmp-title { font-size: var(--step-small); font-weight: 500; }
.cmp-head .cmp-meta { font-size: var(--step-small); color: var(--muted); }
.cmp-col:last-child .cmp-meta { color: #9d9d9d; }
.cmp-row { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 7px 0; }
.cmp-row .name { font-size: var(--step-small); }
.cmp-row .track { height: 8px; background: #e0e0e0; border-radius: 1px; overflow: hidden; }
.cmp-col:last-child .cmp-row .track { background: #262626; }
.cmp-row .track span { display: block; height: 100%; background: var(--accent); }
.cmp-row .num { font-size: var(--step-small); font-variant-numeric: tabular-nums; color: var(--muted); }
.cmp-col:last-child .cmp-row .num { color: #9d9d9d; }
@media (max-width: 820px) {
  .cmp { grid-template-columns: minmax(0,1fr); }
  .shots { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* cta */
.cta { background: var(--ink); color: #fff; padding: clamp(40px, 6vw, 88px) 0; margin-top: var(--gap-section); }
.cta h2 { max-width: 18ch; }
.cta .lead, .cta p { color: #fff; }
.cta form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; max-width: 520px; }
.cta input {
  flex: 1 1 240px; font: inherit; font-size: var(--step-small); padding: 13px 14px;
  border: 1px solid #333; background: #141414; color: #fff; border-radius: 2px;
}
.cta input::placeholder { color: #8a8a8a; }
.cta .small { color: #a8a8a8; }

.cta .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.cta h2 { grid-column: 1; }
.cta .lead { grid-column: 1; }
.cta form { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; max-width: none; }
.cta #formNote { grid-column: 2; }
@media (max-width: 820px) {
  .cta .wrap { grid-template-columns: minmax(0, 1fr); }
  .cta form, .cta #formNote { grid-column: 1; grid-row: auto; }
}

/* footer */
footer { padding: 40px 0 56px; }
.foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; justify-content: space-between; font-size: var(--step-small); color: var(--muted); }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ---------- reveal ---------- */

.rv { opacity: 0; transform: translateY(18px); }
.rv.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .rv.in { transition: none; }
  .btn:hover { transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .analysis { grid-template-columns: minmax(0, 1fr); }
  .stages { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
  .cmd { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .nav .navlink { display: none; }
}

@media (max-width: 560px) {
  h1 { font-size: clamp(2.1rem, 8.5vw, 2.9rem); }
  .bars { height: 200px; }
  .bar .lab { font-size: 11px; }
}