/* =====================================================================
   Figma artboard: 1579 × 834px (desktop) / 375px (mobile)
   ===================================================================== */

/* ---- Shared base ---------------------------------------------------- */

.lander-viewport {
  position: relative;
  width: 100%;
}

/* Blue column: background colour only — positioning differs per breakpoint */
.lander__blue-column {
  background: var(--color-blue);
}

.lander {
  position: relative;
}

/* ---- Desktop (≥ 1024px) ---------------------------------------------- */
/*
 * Strategy:
 *   • The 1579×834 artboard is scaled proportionally with CSS transform.
 *   • The viewport gets a full-bleed gradient (white left, blue right)
 *     whose split matches x=962 in the artboard at every viewport width.
 *   • The artboard is transparent so the gradient shows through.
 *   • overflow: visible lets the hero image bleed into the blue area.
 *   • display:contents on the header "lifts" children into the artboard's
 *     stacking context, so blue-column positions relative to .lander.
 */

@media (min-width: 1024px) {
  .lander-viewport {
    /*
     * Split at x = 962 of 1579 artboard.
     * At viewport ≤ 1579: calc(962/1579 * 100vw) tracks the scaled split.
     * At viewport > 1579: clamped to 962px (artboard no longer scales).
     */
    --split: min(962px, calc(962 / 1579 * 100vw));
    background: linear-gradient(
      to right,
      var(--color-white) var(--split),
      var(--color-blue) var(--split)
    );
    height: 100vh;
    min-height: 834px;
    overflow: hidden;
  }

  .lander {
    width: 1579px;
    height: 834px;
    background: transparent; /* gradient on viewport shows through */
    overflow: visible;       /* hero bleeds into blue */
    transform: scale(calc(100vw / 1579));
    transform-origin: top left;
  }

  /* At native size (≥ 1579px) no transform needed */
  @media (min-width: 1579px) {
    .lander-viewport {
      height: auto;
      min-height: 100vh;
    }
    .lander {
      transform: none;
      overflow: hidden;
    }
  }

  .lander__header {
    /* Lift children into .lander's stacking context */
    display: contents;
  }

  /* blue-column inside header with display:contents positions vs .lander */
  .lander__blue-column {
    position: absolute;
    top: 0;
    right: 0;
    width: 617px;
    height: 100%;
    z-index: 0;
  }

  .lander__logo {
    position: absolute;
    top: 0;
    left: 42px;
    width: 253px;
    height: 253px;
    object-fit: contain;
    z-index: 3;
  }

  .lander__hero {
    position: absolute;
    top: 161px;
    left: 687px;
    width: 970px;
    height: 568px;
    object-fit: contain;
    z-index: 2;
  }

  .lander__content {
    position: absolute;
    top: 261px;
    left: 67px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 723px;
    max-width: calc(962px - 67px);
    overflow: hidden;
    box-sizing: border-box;
  }

  .lander__headline-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    padding: 5px 0;
    width: 100%;
  }

  .lander__headline {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 68px;
    line-height: 68px;
    letter-spacing: -1.7px;
    text-transform: uppercase;
    color: var(--color-black);
    word-break: break-word;
    max-width: 100%;
  }

  .lander__headline-sub {
    display: block;
  }

  .lander__description {
    width: 554px;
    margin: 0;
    padding: 0;
  }

  .lander__description p {
    font-size: 18px;
    line-height: 29.25px;
    color: var(--color-gray);
    margin: 0;
  }

  .lander__countdown {
    width: 501px;
    margin-top: -8px;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.3px;
    color: var(--color-gray);
    white-space: nowrap;
  }

  .lander__countdown strong {
    font-weight: 700;
    color: var(--color-black);
  }

  .lander__countdown + .lander__form-section {
    margin-top: -10px;
  }

  .lander__form-section {
    width: 723px;
  }

  .lander__form {
    display: grid;
    grid-template-columns: 332px 136px;
    column-gap: 10px;
    row-gap: 12px;
    align-items: center;
    width: 478px;
  }

  .lander__email-input {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    width: 332px;
    height: 52px;
    padding: 2px 18px;
    border: 2px solid var(--color-black);
    background: var(--color-white);
    color: var(--color-gray);
    font-size: 16px;
    line-height: normal;
  }

  .lander__cta {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 136px;
    height: 52px;
    background: var(--color-red);
    color: var(--color-white);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .lander__disclaimer {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.3px;
    color: var(--color-gray);
    white-space: nowrap;
  }

  .lander__features {
    list-style: none;
    width: 666px;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .lander__feature {
    display: flex;
    align-items: flex-start;
    min-height: 35px;
  }

  .lander__feature-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 7px;
    margin-right: 8px;
    margin-left: -4px;
    border-radius: 3px;
    object-fit: cover;
  }

  .lander__feature-emoji {
    flex-shrink: 0;
    width: 22px;
    margin-top: 7px;
    margin-right: 4px;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
  }

  .lander__feature-text {
    flex: 1;
    font-size: 14px;
    line-height: 35px;
    color: var(--color-black);
    margin: 0;
  }

  .lander__feature-text strong {
    font-weight: 700;
  }

  .lander__feature-text span {
    color: var(--color-gray);
  }

  /*
   * Scaled desktop — tablets & small laptops (1024–1578px).
   * Artboard is shrunk via transform; tighten layout so content stays
   * in the white column and the hero packs aren't clipped on the right.
   */
  @media (max-width: 1578px) {
    .lander-viewport {
      height: max(100vh, calc(834px * (100vw / 1579)));
    }

    .lander__logo {
      left: 32px;
      width: 210px;
      height: 210px;
    }

    .lander__hero {
      left: 620px;
      width: min(892px, calc(1579px - 620px));
      height: auto;
      aspect-ratio: 970 / 568;
    }

    .lander__content {
      top: 248px;
      left: 48px;
      width: min(680px, calc(962px - 96px));
      max-width: calc(962px - 96px);
      gap: 14px;
    }

    .lander__headline-section {
      gap: 18px;
    }

    .lander__headline {
      font-size: 54px;
      line-height: 56px;
      letter-spacing: -1.2px;
    }

    .lander__description {
      width: 100%;
      max-width: 500px;
    }

    .lander__description p {
      font-size: 16px;
      line-height: 26px;
    }

    .lander__countdown {
      width: 100%;
      max-width: 460px;
      white-space: normal;
    }

    .lander__form-section {
      width: 100%;
      max-width: 478px;
    }

    .lander__form {
      width: 100%;
      max-width: 478px;
      grid-template-columns: minmax(0, 1fr) 136px;
    }

    .lander__email-input {
      width: 100%;
      min-width: 0;
    }

    .lander__features {
      width: 100%;
      max-width: 580px;
    }

    .lander__feature-text {
      line-height: 28px;
    }
  }
}

/* ---- Very large screens (≥ 1800px) — center artboard, blue bleeds right ---- */
/*
 * Center the 1579px artboard so whitespace appears on the left.
 * Re-align the gradient split to x=962 within the centered artboard and
 * let blue extend to the right viewport edge.
 */
@media (min-width: 1800px) {
  .lander-viewport {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    --split: calc((100vw - 1579px) / 2 + 962px);
    background: linear-gradient(
      to right,
      var(--color-white) var(--split),
      var(--color-blue) var(--split)
    );
  }

  .lander {
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    overflow: visible;
  }

  .lander__blue-column {
    width: calc(617px + (100vw - 1579px) / 2);
    right: calc((100vw - 1579px) / -2);
  }

  .lander__content {
    width: 723px;
    max-width: calc(962px - 67px);
    overflow: visible;
  }

  .lander__form-section {
    width: 100%;
  }

  .lander__hero {
    top: 133px;
    left: 718px;
    width: 1067px;
    height: 625px;
  }

  .lander__headline-lead {
    display: block;
    white-space: nowrap;
  }

  .lander__headline-sub {
    display: block;
    white-space: nowrap;
  }
}

/* ---- Mobile (≤ 1023px) ---------------------------------------------- */
/*
 * Single column stack. Blue header via blue-column absolutely positioned
 * inside .lander__header (which has position:relative + fixed height).
 */

@media (max-width: 1023px) {
  .lander-viewport {
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--color-white);
    height: auto;
    overflow: visible;
  }

  .lander {
    width: 100%;
    height: auto;
    background: var(--color-white);
    overflow: visible;
  }

  .lander__header {
    display: block;
    position: relative;
    width: 100%;
    height: 372px;
  }

  /* Blue banner: positions relative to .lander__header */
  .lander__blue-column {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 283px;
    z-index: 0;
  }

  .lander__logo {
    position: absolute;
    left: 50%;
    top: -28px;
    width: 197px;
    height: 197px;
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 3;
  }

  .lander__hero {
    position: absolute;
    top: 131px;
    left: 50%;
    width: min(397px, calc(100% - 32px));
    height: auto;
    aspect-ratio: 397 / 241;
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 2;
  }

  .lander__content {
    position: relative;
    width: 100%;
    margin-top: -8px;
    padding: 0 24px 48px;
    gap: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
  }

  .lander__headline-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  .lander__headline {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 36px;
    line-height: 38px;
    letter-spacing: -1.7px;
    text-transform: uppercase;
    color: var(--color-black);
    width: 310px;
    max-width: 100%;
  }

  .lander__headline-sub {
    display: block;
  }

  .lander__description {
    width: 100%;
    padding: 10px 0;
    margin: 0;
  }

  .lander__description p {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-gray);
    margin: 0;
  }

  .lander__countdown {
    width: 100%;
    margin-top: -16px;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.3px;
    color: var(--color-gray);
    white-space: normal;
  }

  .lander__countdown strong {
    font-weight: 700;
    color: var(--color-black);
  }

  .lander__countdown-time {
    display: block;
  }

  .lander__countdown + .lander__form-section {
    margin-top: -22px;
  }

  .lander__form-section {
    width: 100%;
  }

  .lander__form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    width: 100%;
    max-width: 100%;
  }

  .lander__email-input {
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 2px 18px;
    border: 2px solid var(--color-black);
    background: var(--color-white);
    color: var(--color-gray);
    font-size: 16px;
    line-height: normal;
  }

  .lander__disclaimer {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.3px;
    color: var(--color-gray);
  }

  .lander__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    background: var(--color-red);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .lander__features {
    list-style: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .lander__feature {
    display: flex;
    align-items: flex-start;
  }

  .lander__feature-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    margin-left: -4px;
    border-radius: 3px;
    object-fit: cover;
  }

  .lander__feature-emoji {
    flex-shrink: 0;
    width: 22px;
    margin-right: 4px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }

  .lander__feature-text {
    flex: 1;
    font-size: 12px;
    line-height: 20px;
    color: var(--color-black);
    margin: 0;
  }

  .lander__feature-text strong {
    font-weight: 700;
  }

  .lander__feature-text span {
    color: var(--color-gray);
  }

  /*
   * Tablet (480–1023px) — fluid side padding; phones ≤479px keep 24px.
   */
  @media (min-width: 480px) {
    .lander__content {
      padding-left: clamp(24px, 24px + (100vw - 480px) * 0.14, 104px);
      padding-right: clamp(24px, 24px + (100vw - 480px) * 0.14, 104px);
    }

    .lander__headline {
      width: 100%;
      font-size: 40px;
      line-height: 42px;
    }

    .lander__headline-founders {
      white-space: nowrap;
    }
  }
}