/* ------------------------------------------------------------------
   LiveRun — homepage, direction B (two layers) with hero C (live instrument).
   Tokens are the product's own Foundation tokens. Sacred red is used ONLY
   for the wordmark pipe, the on-air state and the seam. Primary CTA is --ink.
   Typefaces: Geist + Geist Mono, self-hosted (SIL OFL 1.1, fonts/OFL.txt).
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/geist-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/geist-mono-latin-var.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --ink:      #0F1011;
  --paper:    #F7F7F5;
  --chrome:   #1B1D1F;
  --meta:     #6B6F73;
  --rule:     #E5E5E2;
  --red:      #E54E45;
  --rule-dk:  #2A2C2E;
  --meta-dk:  #8A8E92;
  --card:     #FFFFFF;
  --night:    #0A0B0C;
  --dim-dk:   #7A7E82;  /* 4.66:1 na --ink — najciemniejszy, który przechodzi AA */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Geist', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.mono {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-variant-numeric: tabular-nums;
}

.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 760px) { .wrap { padding-inline: 20px; } }

/* ---------- shared type ---------- */
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; letter-spacing: -0.025em; }
p { margin: 0; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--meta);
}
.pipe { width: 3px; height: 15px; background: var(--red); border-radius: 1px; flex: none; }

.h-display { font-size: clamp(38px, 6.4vw, 76px); line-height: .99; letter-spacing: -0.035em; }
.h-section { font-size: clamp(27px, 3.6vw, 46px); line-height: 1.04; }
.h-sub     { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.25; letter-spacing: -0.015em; }

.lede { font-size: clamp(17px, 1.55vw, 20px); line-height: 1.5; color: var(--meta); max-width: 60ch; }
.lede b { color: var(--ink); font-weight: 600; }

/* ---------- nav ---------- */
nav.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: rgba(247,247,245,.88);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-row { display: flex; align-items: center; gap: 28px; height: 62px; }
.nav-mark svg { display: block; height: 21px; width: auto; aspect-ratio: 2674 / 516; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px; white-space: nowrap; }
.nav-links a { color: var(--meta); }
.nav-links a:hover { color: var(--ink); }
.nav-sp { margin-left: auto; }
.nav-cta {
  font-size: 14px; padding: 8px 14px; border-radius: 6px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
}
.nav-ghost { font-size: 14px; color: var(--meta); }
.nav-ghost:hover { color: var(--ink); }
.nav-cta, .nav-ghost, .nav-links a { white-space: nowrap; }

/* The page breaks in half because the product does. Its own chrome has to obey
   the same rule, or the argument stops at the seam. Driven by measurement, not
   by scroll distance: the bar inverts exactly while the dark half is behind it. */
nav.top, nav.top .nav-mark svg, .nav-links a, .nav-ghost, .nav-cta {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
nav.top.on-night { background: rgba(15,16,17,.86); border-bottom-color: var(--rule-dk); }
.on-night .nav-mark svg { color: var(--paper); }
.on-night .nav-links a, .on-night .nav-ghost { color: var(--meta-dk); }
.on-night .nav-links a:hover, .on-night .nav-ghost:hover { color: var(--paper); }
.on-night .nav-cta { background: var(--paper); border-color: var(--paper); color: var(--ink); }
@media (max-width: 1080px) { .nav-links { display: none; } }
@media (max-width: 520px) { .nav-ghost { display: none; } .nav-cta { padding: 8px 12px; } }

/* ---------- hero ---------- */
.hero { padding-block: clamp(56px, 8vw, 104px) 0; }
.hero-grid { display: grid; gap: 28px; }
.hero h1 { margin-top: 20px; }
.hero .lede { margin-top: 22px; }
.hero .lede.small { font-size: clamp(15px, 1.3vw, 17px); margin-top: 12px; max-width: 54ch; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding-inline: 20px; border-radius: 7px;
  font-size: 15px; font-weight: 500; border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: var(--card); }
.btn-ghost:hover { border-color: #C9C9C4; }
.btn .arrow { opacity: .55; }

.roles { margin-top: 26px; font-size: 13px; color: var(--meta); max-width: 66ch; }

/* ---------- the living instrument (hero C) ---------- */
.instrument {
  margin-top: clamp(44px, 6vw, 72px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
}
.inst-row {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto;
  align-items: end; gap: 26px;
  padding-block: 22px;
}
.inst-cell { min-width: 0; }
.inst-label {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--meta);
  display: block; margin-bottom: 7px;
}
.inst-value { font-size: clamp(26px, 3.4vw, 40px); line-height: 1; letter-spacing: -0.02em; font-weight: 500; }
.inst-foot { font-size: 11px; color: var(--meta); margin-top: 7px; letter-spacing: .04em; }
.inst-state { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.inst-dot { width: 8px; height: 8px; border-radius: 50%; background: #C7C7C2; flex: none; }
.inst-word { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--meta); }
.instrument.onair .inst-dot { background: var(--red); }
.instrument.onair .inst-word { color: var(--red); }
@media (max-width: 860px) {
  .inst-row { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; gap: 18px 22px; }
  .inst-state { grid-column: 1 / -1; padding-bottom: 0; }
}

/* ---------- light sections ---------- */
.sec { padding-block: clamp(64px, 8vw, 116px); }
.sec-head { display: grid; gap: 18px; max-width: 900px; }
.sec-head .h-section { margin-top: 4px; }

.shot { margin: 0; }
/* No card around the screens. The locked reference — EVS, Lawo, Riedel — shows
   the interface full frame, and a white 11 px-radius card on paper is the single
   most recognisable tell of a generic SaaS page. What is left is a hairline, and
   a 4 px radius, which is the application's own smallest step (--radius: 0.5rem
   → 4 / 6 / 8 / 12). The page must not be rounder than the product it shows. */
.shot img { display: block; width: 100%; height: auto; }
.shot .pic { border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: transparent; }
.shot figcaption {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  margin-top: 12px; font-size: 12px; color: var(--meta);
}
.shot figcaption .n { color: var(--ink); font-weight: 500; }
.shot figcaption .mono { letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; }

.shot-lead { margin-top: clamp(34px, 4vw, 52px); }

/* A wall screen hangs; it does not sit in a text column. This one section runs
   edge to edge — the figure is a direct child of the section, outside .wrap, so
   there is no 100vw arithmetic and no overflow from the scrollbar. */
.bleed { margin: clamp(34px, 4vw, 52px) 0 0; }
.bleed .pic { border-radius: 0; border-inline: 0; }
/* The caption stays behind in the text column when the figure leaves it, so it
   keeps the measure. Same rules as `.shot figcaption`, which it can no longer
   inherit from — it is no longer inside the figure. */
.shot-caption {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  margin: 12px 0 0; font-size: 12px; color: var(--meta);
}
.shot-caption .n { color: var(--ink); font-weight: 500; }
.shot-caption .mono { letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; }
.night .shot-caption { color: var(--meta-dk); }
.night .shot-caption .n { color: var(--paper); }

/* The report's own numbers, set as page type on the page's own rules — the same
   register as the instrument under the hero, so the bottom of the page rhymes
   with the top. The screenshot below is the evidence; these are the point. */
.figures { border-top: 1px solid var(--rule-dk); border-bottom: 1px solid var(--rule-dk); margin-top: clamp(30px, 3.6vw, 44px); }
.figures-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; padding-block: 24px; }
.figure-cell { min-width: 0; }
.figure-label { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--meta-dk); margin-bottom: 8px; }
.figure-value { font-size: clamp(30px, 4vw, 52px); line-height: 1; letter-spacing: -0.02em; font-weight: 500; color: var(--paper); }
.figure-foot { font-size: 12px; color: var(--dim-dk); margin-top: 8px; }
.figure-cell.over .figure-value { color: var(--red); }
@media (max-width: 720px) { .figures-row { grid-template-columns: 1fr; gap: 20px; } }
/* the post-show report screenshot caught the app header mid-scroll; trim that band */
.pic.crop-top img { margin-top: -8.1%; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(20px, 2.6vw, 34px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(22px, 3vw, 44px); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.note { display: grid; gap: 8px; }
.note h3 { font-size: 19px; letter-spacing: -0.02em; }
.note p { font-size: 15px; color: var(--meta); line-height: 1.55; }
.note .mono { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta); }

.notes-row { margin-top: clamp(34px, 4vw, 52px); }

/* the two layers */
/* Was 'grid-template-columns: 1fr auto 1fr' with FIVE children — the last two
   wrapped onto a second row and left a hole between the first two columns.
   The divider is now a border on the column, not a child competing for a track. */
.layers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(24px, 3.4vw, 48px); margin-top: clamp(34px, 4vw, 54px); }
.layer + .layer { border-inline-start: 1px solid var(--rule); padding-inline-start: clamp(24px, 3.4vw, 48px); }
.layer h3 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 10px; }
.layer p { font-size: 15.5px; color: var(--meta); line-height: 1.55; margin-top: 12px; }
.layer .tag { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta); }
.layer .foot { margin-top: 16px; font-size: 12px; color: var(--ink); opacity: .7; }
@media (max-width: 860px) {
  .layers { grid-template-columns: 1fr; }
  .layer + .layer {
    border-inline-start: 0; padding-inline-start: 0;
    border-block-start: 1px solid var(--rule); padding-block-start: clamp(22px, 3vw, 32px);
  }
}

/* ---------- the seam ---------- */
.seam { background: var(--paper); }
.seam-rule { height: 3px; background: var(--red); }
.seam-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding-block: 14px 18px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--red);
}
.seam-row .right { color: var(--meta); letter-spacing: .14em; }
@media (max-width: 620px) { .seam-row .right { display: none; } }

/* ---------- dark half ---------- */
.night { background: var(--ink); color: var(--paper); }
.night .lede { color: var(--meta-dk); }
.night .lede b { color: var(--paper); }
.night .eyebrow { color: var(--meta-dk); }
.night .note p { color: var(--meta-dk); }
.night .note .mono { color: var(--meta-dk); }
.night .shot .pic { border-color: var(--rule-dk); }
.night .shot figcaption { color: var(--meta-dk); }
.night .shot figcaption .n { color: var(--paper); }
.night .layer + .layer { border-color: var(--rule-dk); }
.night .btn-ghost { background: transparent; border-color: var(--rule-dk); color: var(--paper); }
.night .btn-ghost:hover { border-color: #43464A; }
.night .btn-primary { background: var(--paper); color: var(--ink); }
.night .btn-primary:hover { background: #fff; }

.tally { display: inline-flex; align-items: center; gap: 7px; color: var(--red); }
.tally i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: block; }

/* ---------- stage: one screen at its own scale, the rest one tap away ----------
   Reason this exists: a 2400 px screenshot dropped into a half-width cell renders
   at 628 px — half its own scale — and the application text goes from 13 px to 7 px.
   The screens are the proof, so the proof has to be legible.
   The control sits ON the screen: two chips at the edges, a quiet name row below. */
.stage { margin-top: clamp(30px, 3.6vw, 48px); }
.stage-view { position: relative; }
.stage-view .shot { margin: 0; }

.stage-arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  z-index: 2; width: 46px; height: 46px; padding: 0;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(12,13,14,.46);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 1px 10px rgba(0,0,0,.22);
  color: #fff; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.stage-arrow:hover { background: rgba(12,13,14,.74); border-color: rgba(255,255,255,.44); }
.stage-arrow svg { display: block; width: 18px; height: 18px; }
.stage-arrow[data-dir="-1"] { left: 14px; }
.stage-arrow[data-dir="1"] { right: 14px; }
@media (max-width: 560px) {
  .stage-arrow { width: 40px; height: 40px; }
  .stage-arrow[data-dir="-1"] { left: 8px; }
  .stage-arrow[data-dir="1"] { right: 8px; }
}

/* the name row: plain text, no pills — the screen is the object, not the control */
.stage-bar {
  display: flex; align-items: center; gap: 18px;
  margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--rule);
}
.stage-tabs {
  display: flex; gap: 22px; overflow-x: auto; flex: 1 1 auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.stage-tabs::-webkit-scrollbar { display: none; }
.stage-tab {
  flex: none; position: relative; padding: 11px 0 9px; border: 0; background: none;
  font: inherit; font-size: 13.5px; color: var(--meta);
  white-space: nowrap; cursor: pointer;
}
.stage-tab:hover { color: var(--ink); }
.stage-tab[aria-selected="true"] { color: var(--ink); }
.stage-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px;
  height: 1.5px; background: var(--ink);
}
.stage-count {
  flex: none; font-size: 10.5px; letter-spacing: .16em; color: var(--meta);
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.night .stage-bar { border-top-color: var(--rule-dk); }
.night .stage-tab { color: var(--meta-dk); }
.night .stage-tab:hover, .night .stage-tab[aria-selected="true"] { color: var(--paper); }
.night .stage-tab[aria-selected="true"]::after { background: var(--paper); }
.night .stage-count { color: var(--meta-dk); }

/* A phone is a PORTRAIT object. Measured at 1512 x 860: device 404 px wide is
   827 px tall, and stacked under the section head the block came to ~1239 px —
   379 px more than the window, so the title and the picker could never be on
   screen together. The device now stands BESIDE the text instead of under it,
   and gives up 8 % of its width: 372 px keeps the crew surface's 12.5 px body
   type at 11.9 px, while the block drops to ~761 px and fits the window. */
.crew-split {
  display: grid;
  grid-template-columns: minmax(0, 442px) minmax(0, 1fr);
  grid-template-areas: "phone head" "phone picker";
  align-content: start;
  gap: clamp(28px, 4vw, 64px);
  column-gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(30px, 3.6vw, 48px);
}
.crew-split .stage-view { grid-area: phone; max-width: 442px; }
.crew-head { grid-area: head; display: grid; gap: 18px; align-content: start; }
.crew-picker { grid-area: picker; display: grid; gap: 2px; align-content: start; }
.stage-phone .phone { max-width: 372px; margin-inline: auto; }
.stage-phone .stage-arrow[data-dir="-1"] { left: 0; }
.stage-phone .stage-arrow[data-dir="1"] { right: 0; }

/* the picker doubles as the legend of the four screens — it fills the column
   the portrait device leaves empty, and says what each screen is */
.crew-pick {
  display: grid; gap: 4px; text-align: left;
  padding: 13px 0 13px 18px; border: 0; border-inline-start: 2px solid transparent;
  background: none; font: inherit; cursor: pointer;
}
.crew-pick .n { font-size: 16px; font-weight: 500; color: var(--meta-dk); }
.crew-pick .d { font-size: 14px; line-height: 1.45; color: var(--dim-dk); }
.crew-pick:hover .n { color: var(--paper); }
.crew-pick[aria-selected="true"] { border-inline-start-color: var(--paper); }
.crew-pick[aria-selected="true"] .n { color: var(--paper); }
.crew-pick[aria-selected="true"] .d { color: var(--meta-dk); }
.crew-pick::after { content: none; }

@media (max-width: 980px) {
  .crew-split { grid-template-columns: 1fr; grid-template-areas: "head" "phone" "picker"; }
  .crew-split .stage-view { margin-inline: auto; }
  .crew-picker { max-width: 520px; margin-inline: auto; width: 100%; }
}

/* ---------- phones ---------- */
.phones {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(16px, 2.4vw, 34px);
  margin-top: clamp(34px, 4vw, 54px);
}
.phone { margin: 0; }
.phone svg { display: block; width: 100%; height: auto; }
.phone figcaption { margin-top: 14px; font-size: 12px; color: var(--meta-dk); }
.phone figcaption .n { display: block; color: var(--paper); font-weight: 500; margin-bottom: 3px; }
@media (max-width: 900px) { .phones { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .phones { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }

/* ---------- who / access ---------- */
.who-card {
  border: 1px solid var(--rule-dk); border-radius: 11px; padding: 24px;
  display: grid; gap: 10px; align-content: start; background: var(--night);
}
.who-card .mono { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--meta-dk); }
.who-card h3 { font-size: 19px; }
.who-card p { font-size: 14.5px; color: var(--meta-dk); line-height: 1.55; }

.access { border-top: 1px solid var(--rule-dk); }
.access-in { display: grid; gap: 22px; padding-block: clamp(56px, 7vw, 96px); }

/* ---------- security strip ---------- */
.sec-strip { border-top: 1px solid var(--rule-dk); }
.sec-strip-in { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px; padding-block: 44px; }
.sec-item { display: grid; gap: 6px; }
.sec-item .mono { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--meta-dk); }
.sec-item p { font-size: 14px; color: var(--paper); line-height: 1.45; }
@media (max-width: 900px) { .sec-strip-in { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .sec-strip-in { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--rule-dk); }
.foot-in { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: flex-start; padding-block: 46px 56px; }
.foot-mark svg { display: block; height: 22px; width: auto; aspect-ratio: 2674 / 516; color: var(--paper); }
.foot-nav { display: grid; gap: 9px; font-size: 14px; }
.foot-nav a { color: var(--meta-dk); }
.foot-nav a:hover { color: var(--paper); }
.foot-nav .head { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim-dk); margin-bottom: 3px; }
.foot-end { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 12px; color: var(--dim-dk); padding-bottom: 40px; }

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