/* Home template: shared by the landing and product pages (template-home). */

.template-home main {
  max-width: none;
  padding: 0;
}

.home-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.template-home main h2 {
  font-size: var(--h2);
  margin: 0.3em 0 0.4em;
}
.template-home main h3 {
  font-family: var(--font-head);
  font-size: var(--h3);
}

.home-small {
  color: #4d4d55;
  font-size: 0.875rem;
}

/* ---------- Product page heroes (home, streaming, speaker, AI comments) ----------
   Sizes follow the screen height as well as its width (the smaller of the two wins), so the call to action and the
   line under it are on the first screen of any laptop or phone, in every language, above the floating cookie-settings
   button (--hero-safe-bottom). Each page's hero uses these. */
.template-home {
  --hero-safe-bottom: 72px;
  --hero-h1: clamp(1.5rem, min(0.85rem + 3.1vw, 4.6svh), 2.75rem);
  --hero-lead: clamp(0.9375rem, min(0.85rem + 0.5vw, 2.6svh), 1.25rem);
  --hero-lead-lh: 1.45;
  --hero-pad: clamp(12px, 2.6svh, 40px);
  --hero-gap: clamp(18px, 4.6svh, 56px);
  --hero-header: 72px;
  --hero-cta-h: clamp(48px, 7.5svh, 60px);
  --hero-cta-fs: clamp(1rem, 0.85rem + 0.9vw, 1.25rem);
  --hero-visual-max: calc(100svh - 72px - var(--hero-pad) - var(--hero-safe-bottom) - var(--hero-gap));
  /* Heading scale below the hero, tied to its h1 so the order h1 > h2 > h3 holds on every screen. */
  --h2: clamp(1.125rem, calc(var(--hero-h1) * 0.78), 2.75rem);
  --h3: clamp(1rem, calc(var(--hero-h1) * 0.56), 1.375rem);
  --h3-lg: clamp(1.0625rem, calc(var(--hero-h1) * 0.64), 1.625rem);
}
@media (min-width: 960px) {
  .template-home {
    --hero-h1: clamp(1.75rem, min(0.75rem + 2.5vw, 6.6svh), 3.75rem);
    --hero-visual-max: calc(100svh - 90px - var(--hero-pad) - var(--hero-safe-bottom) - var(--hero-gap));
    --hero-header: 90px;
    --hero-lead-lh: 1.5;
  }
}

/* Hero call to action: the label scales with the screen and stays on one line where it can. */
.home-hero .trial-slot .button,
.aic-hero .trial-slot .button,
.streaming-hero .trial-slot .button,
.speaker-hero .trial-slot .button {
  font-size: var(--hero-cta-fs);
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 479px) {
  .home-hero .trial-slot .button,
  .aic-hero .trial-slot .button,
  .streaming-hero .trial-slot .button,
  .speaker-hero .trial-slot .button {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* The hero fills the screen under the header, with its content centred above the cookie-button area. */
.home-hero,
.aic-hero,
.streaming-hero,
.speaker-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--hero-header));
}
.home-hero > .home-wrap,
.aic-hero > .home-wrap,
.streaming-hero > .home-wrap,
.speaker-hero > .home-wrap {
  width: 100%;
}

/* Hero text columns are grid items: without min-width: 0 the one-line badge row would widen them past the screen. */
.home-hero__text,
.streaming-hero__text,
.speaker-hero__text,
.aic-hero__text {
  min-width: 0;
}

/* Very short phone screens (an SE with the browser bars shown): a little smaller still. */
@media (max-width: 479px) and (max-height: 560px) {
  .template-home {
    --hero-h1: clamp(1.25rem, 4.4svh, 1.5rem);
    --hero-lead: 0.875rem;
    --hero-gap: 10px;
    --hero-pad: 10px;
    --hero-cta-h: 48px;
  }
}

/* Short phone screens: the call to action moves up under the headline (the lead follows it), so it is on the first
   screen. Visual order only; the lead has no links, so reading and focus order stay meaningful. */
@media (max-width: 479px) and (max-height: 600px) {
  .home-hero__text,
  .streaming-hero__text,
  .speaker-hero__text,
  .aic-hero__text {
    display: flex;
    flex-direction: column;
  }
  .home-lead,
  .aic-lead,
  .streaming-lead,
  .speaker-lead {
    order: 1;
    margin: var(--hero-gap) 0 0;
  }
  .home-hero__links,
  .aic-hero__links,
  .streaming-checks {
    order: 2;
  }
}

/* Hero badges: always one line. They scroll sideways (with a fade at the edge) when the line is too long. */
.home-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-badges::-webkit-scrollbar {
  display: none;
}
.home-badges li {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  font-weight: 500;
  white-space: nowrap;
}
.home-badges svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent-ink);
}
.js .home-badges.is-scrollable {
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
@media (max-width: 479px) {
  .home-badges li {
    padding: 3px 10px;
  }
  .home-badges svg {
    display: none;
  }
}