/* ==========================================================================
   Hero
   The video is the focal point: the hands meet in the centre of the frame
   (about 48% / 50%). Headline, lead and CTA sit in the free space above the
   hands, the icon row sits at the bottom, and the middle stays open.
   Desktop sizes are "design px" at a 1440 px wide viewport (var(--u)).
   The fixed header (header.css) lies over the top edge, so the top padding
   is never less than its height.
   ========================================================================== */

.hero {
  /* 1 design px: follows the viewport width, but shrinks on short screens so
     the text keeps clear of the hands. */
  --u: clamp(0.711px, min(100vw / 1440, 100vh / 900), 1.389px);

  --hero-title-size: max(calc(50 * var(--u)), 2.5rem);
  --hero-lead-size: max(calc(16 * var(--u)), 0.9375rem);
  --hero-label-size: calc(17 * var(--u));
  --hero-cta-height: max(calc(48 * var(--u)), 2.75rem);
  --hero-cta-size: max(calc(16.5 * var(--u)), 0.9375rem);
  --hero-icon-width: calc(57.6 * var(--u));
  --hero-gap-title-lead: calc(22 * var(--u));
  --hero-gap-lead-cta: calc(28 * var(--u));
  /* minimum open space for the hands between the CTA and the icon row */
  --hero-stage-min: calc(200 * var(--u));
  --hero-gap-icon-label: calc(20.4 * var(--u));
  --hero-features-width: calc(1340 * var(--u));
  --hero-features-row-gap: 0px;
  --hero-pad-top: max(calc(56 * var(--u)), calc(var(--header-height, 0px) + 14 * var(--u)));
  --hero-pad-bottom: calc(44 * var(--u));
  --hero-pad-inline: 24px;
  --hero-scrim-fade: calc(64 * var(--u));

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--hero-pad-top) var(--hero-pad-inline) var(--hero-pad-bottom);
  background: var(--color-bg);
  color: var(--color-text);
  text-align: center;
}

/* ---- Background video ---------------------------------------------------- */

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--color-bg);
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The hands touch at the centre of the frame. On wide screens, where the
     video is cropped top and bottom, showing a little more of the top keeps
     that moment lower, clear of the CTA. No effect on other crops. */
  object-position: 50% 40%;
}

/* iOS Low Power Mode blocks autoplay; hide the native play button so the poster simply stays. */
.hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Readability scrims: soft dark patches behind the text block and the icon row
   only, so the hands stay bright everywhere else. Checked frame by frame: lead
   and labels keep at least 4.5:1 contrast over the whole loop. */
.hero__heading,
.hero__features {
  position: relative;
}

.hero__heading::before,
.hero__features::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * (var(--hero-scrim-fade) + 8px));
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0),
    rgb(0 0 0 / var(--scrim-alpha)) var(--hero-scrim-fade),
    rgb(0 0 0 / var(--scrim-alpha)) calc(100% - var(--hero-scrim-fade)),
    rgb(0 0 0 / 0)
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--hero-scrim-fade),
    #000 calc(100% - var(--hero-scrim-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--hero-scrim-fade),
    #000 calc(100% - var(--hero-scrim-fade)),
    transparent
  );
}

.hero__heading::before {
  --scrim-alpha: 0.65;
}

.hero__features::before {
  --scrim-alpha: 0.75;
}

/* ---- Content -------------------------------------------------------------- */

.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__title {
  font-size: var(--hero-title-size);
  font-weight: 400;
  font-variation-settings: "opsz" 32;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-shadow: 0 0 0.12em rgb(255 255 255 / 0.12);
}

.hero__title-line {
  display: block;
  text-wrap: balance;
}

.hero__lead {
  margin-top: var(--hero-gap-title-lead);
  font-family: var(--font-mono);
  font-size: var(--hero-lead-size);
  line-height: 1.8;
  letter-spacing: 0.052em;
  color: var(--color-text-muted);
  text-shadow: 0 0 0.6em rgb(0 0 0 / 0.85);
}

.hero__lead-line {
  display: block;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.95em;
  height: var(--hero-cta-height);
  margin-top: var(--hero-gap-lead-cta);
  padding-inline: 1.35em 1.3em;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: var(--hero-cta-size);
  font-weight: 400;
  font-variation-settings: "opsz" 32;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.hero__cta-arrow {
  flex: none;
  width: 1.32em;
  height: 0.695em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.hero__cta:hover {
  background: #ececec;
}

.hero__cta:hover .hero__cta-arrow {
  transform: translateX(0.2em);
}

.hero__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.hero__features {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  row-gap: var(--hero-features-row-gap);
  width: min(var(--hero-features-width), 100%);
  margin-top: var(--hero-stage-min);
}

.hero__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hero-gap-icon-label);
}

.hero__feature-icon {
  width: var(--hero-icon-width);
  height: auto;
  aspect-ratio: 80 / 72;
  fill: #fff;
  filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.9));
}

.hero__feature-label {
  font-family: var(--font-mono);
  font-size: var(--hero-label-size);
  line-height: 1.3;
  color: var(--color-text-muted);
  text-shadow: 0 0 0.6em rgb(0 0 0 / 0.85);
}

/* ---- Tablet ---------------------------------------------------------------- */

@media (max-width: 1023.98px) {
  .hero {
    --hero-title-size: clamp(2.125rem, 1.25rem + 2.6vw, 2.5rem);
    --hero-lead-size: clamp(0.8125rem, 0.72rem + 0.3vw, 0.9375rem);
    --hero-label-size: clamp(0.75rem, 0.71rem + 0.2vw, 0.875rem);
    --hero-cta-height: 2.875rem;
    --hero-cta-size: 1rem;
    --hero-icon-width: clamp(2.75rem, 2.4rem + 1.5vw, 3.5rem);
    --hero-gap-title-lead: 1.125rem;
    --hero-gap-lead-cta: 1.5rem;
    --hero-stage-min: 7.5rem;
    --hero-gap-icon-label: 0.75rem;
    --hero-features-width: 40rem;
    --hero-features-row-gap: 2.25rem;
    --hero-pad-top: calc(var(--header-height, 0px) + 1.25rem);
    --hero-pad-bottom: 3rem;
    --hero-pad-inline: 1.25rem;
    --hero-scrim-fade: 2.5rem;
  }

  /* 3 + 2 layout, second row centred */
  .hero__features {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .hero__feature {
    grid-column: span 2;
  }

  .hero__feature:nth-child(4) {
    grid-column: 2 / span 2;
  }
}

/* ---- Phone (and any very short landscape screen) ----------------------------
   The first screen is the stage: headline at the top, CTA at the bottom (thumb
   reach), the hands meeting in between. The icon grid follows below on black,
   which matches the black of the video. */

@media (max-width: 639.98px), (orientation: landscape) and (max-height: 500px) {
  .hero {
    --hero-pad-top: 0px;
    --hero-pad-bottom: 4rem;

    justify-content: flex-start;
    min-height: 0;
  }

  .hero__media {
    bottom: auto;
    height: 100vh;
    height: 100svh;
  }

  .hero__intro {
    justify-content: space-between;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: calc(var(--header-height, 0px) + 1.25rem) 2rem;
  }

  .hero__features {
    margin-top: 2.5rem;
  }
}

@media (max-width: 639.98px) {
  .hero {
    --hero-title-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.125rem);
    --hero-lead-size: 0.8125rem;
    --hero-gap-title-lead: 0.875rem;
  }

  .hero__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__feature,
  .hero__feature:nth-child(4) {
    grid-column: auto;
  }

  .hero__feature:last-child {
    grid-column: 1 / -1;
  }
}

/* Phones held sideways: little height, so a compact heading keeps the middle free. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    --hero-title-size: 1.75rem;
    --hero-lead-size: 0.8125rem;
    --hero-gap-title-lead: 0.625rem;
  }

  .hero__intro {
    padding-block: calc(var(--header-height, 0px) + 0.5rem) 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta,
  .hero__cta-arrow {
    transition: none;
  }
}