/* Current lead landing: size the page from its contents instead of a 900px canvas. */
.hero[data-page-content] {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100svh;
  overflow: visible;
}

.hero[data-page-content] .hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.hero[data-page-content] .hero__backdrop { display: none; }

.hero[data-page-content] .hero__panel {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  width: min(640px, 100%);
  height: auto;
  min-height: 100svh;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 40px) 32px;
  background: transparent;
}

.hero[data-page-content] .hero__panel > :is(.brand, h1, .feature-list, .subscription-card, .hero__footer) {
  flex: 0 0 auto;
  width: 100%;
  max-width: 520px;
  min-width: 0;
  margin: 0 auto;
}

.hero[data-page-content] .brand {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
}

.hero[data-page-content] .brand > img {
  width: 52px;
  height: 48px;
  object-fit: contain;
}

.hero[data-page-content] .brand > span {
  min-width: 0;
  font-size: clamp(11px, 1.05vw, 15px);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.hero[data-page-content] .brand__social {
  gap: 8px;
  margin: 0;
  padding: 0;
}

.hero[data-page-content] .social-link {
  width: 44px;
  height: 44px;
  touch-action: manipulation;
}

.hero[data-page-content] .social-link::after { inset: 0; }

.hero[data-page-content] h1 {
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.hero[data-page-content] .feature-list {
  gap: 12px;
  min-height: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
}

.hero[data-page-content] .feature-list li {
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.hero[data-page-content] .feature-list__icon { width: 26px; height: 26px; }
.hero[data-page-content] .feature-list li > span:last-child { overflow-wrap: break-word; letter-spacing: normal; }

.hero[data-page-content] .subscription-card { padding: 0; }
.hero[data-page-content] .subscription-card p { margin: 0 0 16px; font-size: 18px; line-height: 1.5; }
.hero[data-page-content] .subscription-card__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hero[data-page-content] .lead-button { min-height: 48px; padding: 12px 10px; font-size: 14px; line-height: 1.35; touch-action: manipulation; }

.hero[data-page-content] .hero__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.hero[data-page-content] .hero__footer a { min-height: 44px; font-size: 16px; }
.hero[data-page-content] .hero__footer a::after { inset: 0; }
.hero[data-page-content] .hero__footer > span { line-height: 1.5; }

body.cookie-banner-visible .hero[data-page-content] .hero__panel {
  padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1025px) {
  .hero[data-page-content] {
    display: grid;
    grid-template-columns: 56% minmax(0, 44%);
  }

  .hero[data-page-content] .hero__panel {
    grid-column: 2;
    gap: clamp(20px, 3svh, 32px);
    width: 100%;
    margin: 0;
    padding: clamp(24px, 3svh, 40px) clamp(24px, 3.8vw, 72px) 32px;
    background: var(--panel, #1e2a41);
  }

  .hero[data-page-content] .hero__panel > :is(.brand, h1, .feature-list, .subscription-card, .hero__footer) { max-width: 480px; }
  .hero[data-page-content] h1 { font-size: clamp(22px, 1.55vw, 28px); }
  .hero[data-page-content] .feature-list { font-size: clamp(14px, 1.1vw, 17px); }
  .hero[data-page-content] .hero__footer { margin-top: auto; }
  body.cookie-banner-visible .hero[data-page-content] .hero__panel { padding-bottom: 120px; }
}

@media (max-width: 374px) {
  .hero[data-page-content] .hero__panel { gap: 20px; padding-top: 16px; }
  .hero[data-page-content] .brand { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; }
  .hero[data-page-content] .brand > img { width: 44px; height: 40px; }
  .hero[data-page-content] .feature-list { font-size: 14px; gap: 10px; }
  .hero[data-page-content] .feature-list li { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
  .hero[data-page-content] .feature-list__icon { width: 22px; height: 22px; }
  .hero[data-page-content] .subscription-card p { font-size: 16px; }
  .hero[data-page-content] .lead-button { font-size: 12px; }
}

/* Let short forms scroll inside the dialog, including after a mobile keyboard opens. */
[data-lead-modal] { overscroll-behavior: contain; padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
[data-lead-dialog] { max-height: calc(100svh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px))); overscroll-behavior: contain; scroll-padding: 16px; }
[data-lead-dialog] :is(input, button, a) { scroll-margin-block: 16px; }
[data-lead-dialog] .subscription-form { min-width: 0; }
[data-lead-dialog] .subscription-form > label { min-width: 0; }
[data-lead-dialog] input { min-width: 0; }
[data-lead-dialog] .subscription-dialog__close { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero[data-page-content] :is(.lead-button, .social-link) { transition: none; }
}