/*
  Clapper corporate landing page.

  One screen, no scroll. A full-bleed screenshot sits behind everything, a
  gradient darkens the bottom third, and the call to action lives inside that
  dark band.
*/

:root {
  --ink: #f7f7f8;
  --ink-dim: #b9b9c0;
  --ink-faint: #86868f;
  --black: #08080a;
  --accent: #ffb020;

  /*
    Height of the dark band at the bottom, measured from the bottom edge.
    The scrim fades to nothing here and the copy is sized to fit inside it.

    The px floor matters: type sizes bottom out at their clamp minimums, so on a
    short window the copy stops shrinking while a pure percentage keeps
    shrinking, and the headline ends up on the bright screenshot. The floor lets
    the band grow instead.
  */
  --scrim-top: max(34%, 260px);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

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

html,
body {
  height: 100%;
  margin: 0;
  /* One page, no scroll — in either axis. */
  overflow: hidden;
}

body {
  background: var(--black);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------- stage -- */

.stage {
  position: relative;
  /* dvh keeps mobile browser chrome from pushing the CTA off-screen. */
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* A dark wash under the screenshot so a slow image load is never white. */
  background:
    radial-gradient(120% 80% at 50% 0%, #1b1b21 0%, var(--black) 70%);
}

.stage__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias the crop upward: the interesting part of the editor is the timeline. */
  object-position: 50% 32%;
  z-index: 0;
}

/*
  The overlay: solid at the very bottom, fully transparent by --scrim-top.

  The stops hold near-opaque for most of the band and only fall away in its top
  quarter. A gentle linear ramp looks cleaner in isolation, but the screenshot
  behind this is a bright, busy timeline — the copy needs a genuinely dark
  ground to sit on, not a tint.
*/
.stage__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgb(8 8 10 / 100%) 0%,
    rgb(8 8 10 / 99%) 60%,
    rgb(8 8 10 / 96%) 78%,
    rgb(8 8 10 / 85%) 88%,
    rgb(8 8 10 / 46%) 95%,
    rgb(8 8 10 / 0%) 100%
  );
  /* Confine the gradient to the band; everything above it stays untouched. */
  background-size: 100% var(--scrim-top);
  background-position: bottom;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------- topbar -- */

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2.8vh, 30px) clamp(20px, 5vw, 68px)
    clamp(30px, 5vh, 56px);
  /*
    A scrim of its own, mirroring the one at the bottom. The top of the
    screenshot is a light editor toolbar, so a faint tint is not enough for the
    wordmark and nav to hold up against it.
  */
  background: linear-gradient(
    to bottom,
    rgb(8 8 10 / 92%) 0%,
    rgb(8 8 10 / 74%) 45%,
    rgb(8 8 10 / 38%) 72%,
    rgb(8 8 10 / 0%) 100%
  );
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: -0.02em;
}

.wordmark__mark {
  width: 1.65em;
  height: 1.65em;
  flex: none;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
}

.topbar__nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 500;
  transition: color 0.18s ease;
}

.topbar__nav a:hover,
.topbar__nav a:focus-visible {
  color: var(--ink);
}

/* ---------------------------------------------------------------- pitch -- */

.pitch {
  position: relative;
  z-index: 2;
  /*
    Occupy the dark band. min-height rather than height so the copy is never
    clipped on short viewports; the flex column above pins it to the bottom.
  */
  min-height: var(--scrim-top);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(6px, 1vh, 12px);
  padding: 0 clamp(20px, 5vw, 68px) clamp(20px, 3.6vh, 42px);
  max-width: 1200px;
}

.pitch__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--ink-dim);
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgb(0 0 0 / 90%);
}

.dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 1px rgb(255 176 32 / 60%);
}

.pitch__title {
  margin: 0;
  /*
    The bold bit. Sized against vh as well as vw so the whole block keeps
    fitting inside the band — a vw-only headline overflows it on wide, short
    windows.
  */
  font-size: clamp(1.8rem, min(5.2vw, 6vh), 4.4rem);
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
  /*
    The top of the headline reaches into the part of the band where the scrim is
    still fading, so it needs local contrast of its own. A tight shadow plus a
    wide one keeps the edges crisp without haloing.
  */
  text-shadow:
    0 1px 3px rgb(0 0 0 / 65%),
    0 2px 28px rgb(0 0 0 / 85%);
}

.pitch__lede {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-dim);
  font-size: clamp(0.85rem, min(1.25vw, 1.7vh), 1.05rem);
  line-height: 1.45;
}

.pitch__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(2px, 0.8vh, 10px);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: clamp(10px, 1.4vh, 15px) clamp(20px, 2.4vw, 30px);
  border-radius: 999px;
  background: var(--ink);
  color: #0b0b0d;
  font-size: clamp(0.9rem, min(1.2vw, 1.7vh), 1.05rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 10px 34px rgb(0 0 0 / 45%);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.cta:hover,
.cta:focus-visible {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgb(0 0 0 / 55%);
}

.cta:active {
  transform: translateY(0);
}

.cta__glyph {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  /* Optical centering: the Apple mark sits low in its box. */
  margin-top: -0.12em;
}

.ghost {
  color: var(--ink-dim);
  font-size: clamp(0.9rem, min(1.2vw, 1.8vh), 1rem);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgb(185 185 192 / 35%);
  padding-bottom: 2px;
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}

.ghost:hover,
.ghost:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.pitch__meta {
  margin: 0;
  color: var(--ink-faint);
  font-size: clamp(11px, min(1vw, 1.5vh), 13px);
  line-height: 1.5;
}

.pitch__meta code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.95em;
}

/* --------------------------------------------------------------- focus --- */

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

/* -------------------------------------------------------------- narrow --- */

@media (max-width: 640px) {
  :root {
    /* Give the copy more room once the screen is narrow and tall. */
    --scrim-top: max(46%, 300px);
  }

  .topbar__nav a:not(:last-child) {
    display: none;
  }

  .pitch__title {
    font-size: clamp(2.1rem, 11vw, 3.2rem);
  }

  .pitch__actions {
    width: 100%;
  }

  .cta {
    justify-content: center;
    flex: 1 1 auto;
  }
}

/* Short-and-wide viewports: drop the lede rather than the call to action. */
@media (max-height: 460px) {
  .pitch__lede {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}