/* Shared redesign tokens and section shell. The page has one type system:
   Instrument Serif for display, Geist for body and Geist Mono for labels. */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
}

:root {
  --lp-bg: #000000;
  --lp-text: #f5f5f7;
  --lp-secondary: #a1a1a6;
  --lp-muted: #86868b;
  --lp-hairline: rgba(255, 255, 255, 0.12);

  --lp-display: "Instrument Serif", Georgia, serif;
  --lp-display-track: -0.02em;
  --lp-display-track-small: 0em;
  --lp-em-style: italic;
  --lp-body: "Geist", -apple-system, "Helvetica Neue", sans-serif;
  --lp-label-font: "Geist Mono", ui-monospace, monospace;
  --lp-label-weight: 400;
  --lp-label-track: 0.16em;

  /* Section header and in-section type scale. */
  --lp-title-size: clamp(44px, 5.1vw, 76px);
  --lp-title-leading: 1;
  --lp-figure-size: 120px;
  --lp-figure-leading: 0.9;
  --lp-figure-track: -0.02em;
  --lp-card-l-size: 44px;
  --lp-card-l-leading: 0.95;
  --lp-card-l-track: -0.01em;
  --lp-card-s-size: 30px;
  --lp-card-s-leading: 1.05;
  --lp-card-s-track: 0em;
  --lp-h3-size: 56px;
  --lp-h3-leading: 0.96;
  --lp-h3-track: -0.015em;
}

/* The hero's page controls follow the body face; its screen stays macOS. */
.hero-buy,
.hero-scroll {
  font-family: var(--lp-body);
}

/* One screen per section: the header and its demo fit together. A demo's
   canvas may run past its fit box, so the section clips it sideways. */
.lp-section {
  position: relative;
  min-height: 100svh;
  box-sizing: border-box;
  /* At least 61px on top: the buy bar (48px and its hairline) covers the top
     of a section scrolled to the top of the screen, and the label keeps 12px
     below it. */
  padding: clamp(61px, 7svh, 96px) 24px clamp(48px, 7svh, 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: clip;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--lp-body);
}
/* A section taller than a screen starts at its top. */
.lp-section.lp-long {
  justify-content: flex-start;
}
.lp-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 1312px;
  text-align: center;
}
.lp-eyebrow {
  color: var(--lp-secondary);
  font-family: var(--lp-label-font);
  font-size: 12px;
  font-weight: var(--lp-label-weight);
  letter-spacing: var(--lp-label-track);
  line-height: 16px;
  text-transform: uppercase;
}
.lp-title {
  margin: 0;
  color: var(--lp-text);
  font-family: var(--lp-display);
  font-size: var(--lp-title-size);
  font-weight: 400;
  letter-spacing: var(--lp-display-track);
  line-height: var(--lp-title-leading);
  text-wrap: balance;
}
.lp-em {
  display: inline-block;
  color: var(--lp-muted);
  font-style: var(--lp-em-style);
}
.lp-sub {
  margin: 0;
  color: var(--lp-secondary);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
}
/* A demo authored at a fixed design size, scaled to fit beside its header.
   fit.js sets the scale; the inner box keeps its design coordinates. */
.lp-fit {
  position: relative;
  flex-shrink: 0;
  margin-top: clamp(20px, 4svh, 44px);
  /* What a visitor reads or presses outside a demo's Mac screen (hints,
     captions, key caps, Replay) scales back up by --lp-ui, so it renders at
     13px or more however small the demo is drawn. It stops at 2×, where the
     smallest demo scale (0.45) would push the key caps out of their canvas. */
  --lp-ui: min(2, max(1, calc(0.93 / var(--lp-scale, 1))));
}
.lp-fit-inner {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

/* On a narrow screen a data-narrow="flow" section stops scaling its canvas:
   fit.js steps aside and marks the box data-flowing, the section lays its
   blocks out in the page's own pixels, and it may grow taller than a screen.
   The width is the box's data-flow-below; the section's stylesheet uses the
   same one. */
.lp-section:has(> .lp-fit[data-flowing]) {
  justify-content: flex-start;
}
.lp-fit[data-flowing] {
  align-self: stretch;
  flex-shrink: 1;
}
.lp-fit[data-flowing] > .lp-fit-inner {
  position: static;
}

/* Without JavaScript fit.js cannot size the fit boxes, so each canvas sits in
   the page at its design size, centered, and the section clips what runs past
   a narrow screen. A flowing section's own rules still lay it out in real
   pixels below its data-flow-below width. */
@media (scripting: none) {
  .lp-fit {
    align-self: stretch;
  }
  .lp-fit-inner {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
}