/* the hero (tools/sections/hero.html) */
.k-hero { min-height: 100svh; box-sizing: border-box; display: flex; align-items: center; padding: 104px 0 56px; }
.k-hero > .k-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr); gap: clamp(40px, 4.5vw, 72px); align-items: center; }
body.glass .k-hero h1 { margin: 0; max-width: none; font: 500 clamp(44px, 4.4vw, 68px)/1.02 var(--sans); letter-spacing: -.05em; color: var(--ink); }
.k-hero h1 .ln { display: block; }
.k-hero .k-line { margin: 22px 0 0; max-width: 24em; font-size: 20px; }
.k-bul { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.k-bul li { display: flex; align-items: center; gap: 14px; font: 400 17px/1.35 var(--sans); color: var(--ink2); }
.k-bul b { font-weight: 500; color: var(--ink); }
.k-hero-vis { min-width: 0; }
/* the kicker is the product's name: a touch more present than a section's kicker, still a kicker (Dasha, 27 Oct) */
.k-hero .k-kicker { margin-bottom: 14px; font: 600 19px/1.3 var(--sans); letter-spacing: .01em; }
/* stacked: the words centred, the visual big under them */
.k-hero--stack { min-height: 0; padding: clamp(136px, 16vh, 168px) 0 0; }  /* more air under the header (Dasha, 27 Oct) */
.k-hero--stack > .k-in { grid-template-columns: minmax(0, 1fr); gap: 40px; justify-items: center; }
.k-hero--stack .k-hero-words { text-align: center; max-width: 820px; }
/* as little height as the words need, so the film shows under them on the first screen (Dasha, 27 Oct); a little air between
   them (27 Oct: "it is too stacked"): kicker 14 px, heading 28 px, buttons 12 px, the film 40 px under the words */
body.glass .k-hero--stack h1 { font-size: clamp(38px, 4vw, 58px); }
.k-hero--stack h1 .ln { display: inline; }
.k-hero--stack .k-line { margin: 12px auto 0; max-width: 36em; font-size: 19px; }  /* room for one line of 50 characters (Dasha, 2 Nov) */
.k-hero.k-hero--stack .k-cta { justify-content: center; align-items: center; margin-top: 28px; }
.k-hero.k-hero--stack .k-note { margin-top: 12px; }
.k-hero--stack .k-hero-vis { width: 100%; max-width: 1180px; }
.k-hero-facts { width: 100%; max-width: 1180px; }  /* the facts strip between the buttons and the visual (Dasha, 2 Nov: where and when first, then the film) */
.k-hero-facts .k-details-sec, .k-hero-facts .k-details { margin-top: 0; }
.k-hero-yt { max-width: 1100px; margin: 0 auto; }  /* the film as wide as the embed section's */
@media (min-width: 861px) and (max-height: 760px) { .k-hero--stack { padding-top: 116px; } body.glass .k-hero--stack h1 { font-size: clamp(34px, 3.6vw, 48px); } }
@media (max-width: 860px) {
  .k-hero { align-items: start; padding: 104px 0 56px; }
  .k-hero--stack { padding-top: 124px; }
  .k-hero > .k-in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .k-hero-words { text-align: center; }
  body.glass .k-hero h1 { font-size: 40px; }
  .k-hero .k-line { margin: 16px auto 0; font-size: 18px; }
  .k-bul { display: inline-grid; justify-items: start; text-align: left; margin-top: 26px; }
  .k-bul li { font-size: 16px; }
  .k-hero .k-cta { justify-content: center; margin-top: 30px; }
}
@media (min-width: 861px) and (max-height: 760px) { body.glass .k-hero h1 { font-size: clamp(40px, 3.9vw, 56px); } .k-bul { gap: 8px; margin-top: 22px; } .k-hero .k-cta { margin-top: 26px; } }