/* landing page — the only stylesheet that is about *this page*.
   Everything above it (styles/tokens/*.css) is the chassis design system and
   is shared with the other surfaces in web/; nothing page-specific belongs
   there, and no colour or size here may be a raw value the chassis already
   names. */

html, body { margin: 0; background: #000; }

a { color: var(--px-blue); text-decoration: none; }
a:hover { color: var(--ch-000); }

/* ── page ─────────────────────────────────────────────────────────────── */

.page {
  background: #000;
  font-family: var(--font-ui);
  line-height: 1.2;
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero {
  min-height: 100vh;
  min-height: 100svh; /* iOS: the url bar collapsing must not re-centre the mark */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 104px;
}

.hero__inner {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

/* the mark is square and sizes off its own column, never off the viewport —
   a vh-derived height would resize (and so reallocate every render target)
   every time mobile safari collapses its url bar */
.mark {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* shown only when the live mark cannot run (no webgl, lost context, no js).
   the icon is framed tighter than the live camera, which stands back to leave
   the bloom room to fall off — the scale puts the two at the same size */
.mark__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.7);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  /* the mark carries its own margin of black, so the copy sits up into it —
     as a fraction of the column, because the mark is square and scales with
     it: a fixed pull is nearly twice as tight on a phone as on a desktop */
  margin-top: -4%;
  animation: sc1-rise 900ms cubic-bezier(.2, 0, 0, 1) 800ms both;
}

@keyframes sc1-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-rise] { animation: none !important; }
}

.hero__title {
  /* the negative left margin is optical, not layout: tracking is applied after
     every glyph including the last, so a tracked-in word sits right of centre
     by its own track unless it is pulled back by it */
  margin: 0 0 0 -.06em;
  font-size: 68px;
  line-height: .9;
  letter-spacing: -.06em;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  font-weight: 500;
  color: var(--ch-000);
  /* the badge hangs off the mark rather than sitting in the line: a flex row
     would centre wordmark-plus-badge as one object, which puts the wordmark
     itself off centre by half a badge — and the wordmark is the thing */
  position: relative;
  display: inline-block;
}

.hero__badge {
  position: absolute;
  left: 100%;
  top: .12em;
  margin-left: 10px;
  padding: 3px 6px 2px;
  border: 1px solid var(--ch-600);
  font-family: var(--font-mono);
  font-size: var(--t-silk);
  line-height: var(--lh-chassis);
  letter-spacing: var(--track-silk);
  /* the track prints after the last glyph too, so the legend sits a hair left
     of its own box unless the padding is dealt the difference */
  text-indent: var(--track-silk);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ch-300);
  white-space: nowrap;
}

/* on a phone the column has no room beside the mark, so the plate drops under
   it and takes its place in the flow */
@media (max-width: 460px) {
  .hero__title { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .hero__badge { position: static; margin-left: 0; }
}

.hero__lede {
  margin: 22px 0 0;
  width: 100%;
  /* mono is wider per character, so the measure that held three lines of the
     sans holds only a short one of this — the cap is the column, not the ch */
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.42;
  /* the -.008em this replaced was tuned for the sans; mono is already spaced */
  letter-spacing: 0;
  color: var(--ch-300);
  text-wrap: balance;
}

.hero__lede a {
  color: var(--ch-100);
  text-decoration: none;
  border-bottom: 1px solid var(--ch-500);
}

.download,
.support {
  /* an anchor, not a button: the download works with no javascript at all, and
     the key face still centres its legend exactly the way a <button> does —
     line-height carrying the full height is what a button's own centring does.
     one geometry, two finishes: the pale key is the primary and the dark one
     the secondary, so they read as the same part in two states of the ramp */
  display: inline-block;
  flex: none;
  margin-top: 40px;
  width: 236px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ch-100);
  color: var(--ch-900);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-silk);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--snap), transform var(--snap);
}
.download:hover { background: var(--ch-000); color: var(--ch-900); }
.download:active { background: var(--ch-200); transform: translateY(1px); }

/* the dark key: the same face milled out of the enclosure rather than set into
   it, so it needs a hairline to exist at all against the page's black */
.support {
  margin-top: 0;
  box-sizing: border-box;
  line-height: 42px; /* the border eats the two pixels the pale key doesn't spend */
  border: 1px solid var(--ch-700);
  background: var(--ch-900);
  color: var(--ch-100);
  transition: background var(--snap), border-color var(--snap), color var(--snap), transform var(--snap);
}
.support:hover { background: var(--ch-800); border-color: var(--ch-500); color: var(--ch-000); }
.support:active { background: var(--ch-700); transform: translateY(1px); }

/* ── showcase ─────────────────────────────────────────────────────────── */

.showcase {
  padding: 0 24px 128px;
}

.showcase__inner {
  /* wider than the manifest's measure: this is a picture of an instrument
     panel, and its own type is only legible with the room */
  max-width: 1080px;
  margin: 0 auto;
}

/* the panel powers on as it enters: driven by the scroll position itself, so
   backing up dims it again. on the inner, not the figures — a figure the
   picker just displayed would otherwise re-enter half-dark. browsers without
   view() timelines simply show it lit */
@supports (animation-timeline: view()) {
  .showcase__inner {
    animation: showcase-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}

@keyframes showcase-reveal {
  from { opacity: 0; filter: brightness(.35); transform: translateY(18px); }
  to   { opacity: 1; filter: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__inner { animation: none; }
}

/* the inputs stay in the page (arrow keys move between views) but never
   print; display:none would drop them from the tab order */
.showcase__pick {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.showcase__tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 28px;
}

/* the app's own mode switcher: dark keys in a row, the engaged one lit —
   the same two finishes the download and support keys already establish */
.showcase__tab {
  box-sizing: border-box;
  width: 92px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  border: 1px solid var(--ch-700);
  background: var(--ch-900);
  color: var(--ch-300);
  font-family: var(--font-mono);
  font-size: var(--t-silk);
  letter-spacing: var(--track-silk);
  text-indent: var(--track-silk);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--snap), border-color var(--snap), color var(--snap);
}
.showcase__tab:hover { background: var(--ch-800); border-color: var(--ch-500); color: var(--ch-000); }

#showcase-edit:checked ~ .showcase__tabs .showcase__tab[for="showcase-edit"],
#showcase-mix:checked  ~ .showcase__tabs .showcase__tab[for="showcase-mix"] {
  background: var(--ch-100);
  border-color: var(--ch-100);
  color: var(--ch-900);
}

.showcase__pick:focus-visible ~ .showcase__tabs .showcase__tab {
  outline: 1px solid var(--px-blue);
  outline-offset: 2px;
}

.showcase__figure {
  margin: 0;
}

#showcase-edit:checked ~ .showcase__figure--mix,
#showcase-mix:checked  ~ .showcase__figure--edit {
  display: none;
}

.showcase__shot {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  /* the app's chrome is near-black on the page's black, so the hairline is
     what makes it an object rather than a hole */
  border: 1px solid var(--ch-800);
}

.showcase__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--t-silk);
  letter-spacing: var(--track-silk);
  text-transform: uppercase;
  color: var(--ch-500);
}

/* ── feature manifest ─────────────────────────────────────────────────── */

.manifest {
  border-top: 1px solid var(--ch-800);
  padding: 0 24px 128px;
}

.manifest__inner {
  max-width: 900px;
  margin: 0 auto;
}

.manifest__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0 40px;
  font-family: var(--font-mono);
  font-size: var(--t-silk);
  letter-spacing: var(--track-silk);
  text-transform: uppercase;
  color: var(--ch-500);
}

.manifest__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px 48px;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.spec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.spec__title {
  margin: 0;
  font-size: var(--t-silk);
  font-weight: 400;
  letter-spacing: var(--track-silk);
  line-height: var(--lh-chassis);
  color: var(--ch-100);
}

.spec__body {
  margin: 0;
  font-size: var(--t-micro);
  line-height: 1.72;
  letter-spacing: .04em;
  color: var(--ch-400);
}

/* ── contact ──────────────────────────────────────────────────────────── */

.manifest__foot {
  display: flex;
  flex-wrap: wrap; /* two full-width keys don't fit a phone side by side */
  justify-content: center;
  gap: 16px;
  padding-top: 72px;
}