/* hero — section CSS, written by its BUILD-SECTION subagent (brief/hero.md; cache hero.{desktop,mobile}.json).
   Pattern A: `.container` carries the gutter; vertical padding is LONGHAND only.
   Mobile-first: base = mobile (390 anchor), 768–1023 = pseudo-tablet (row split, D-6), 1024+ = desktop (--vw-base 1619).
   Every rule is scoped under .hero. The lead form / chip / btn internals live in components.css. */

/* ---------------------------------------------------------------------------
   SECTION TOKENS — moved out of the page's tokens.css.

   Read by THIS block and nothing else on the site, so they belong here rather
   than in a site-wide :root. In Shopify a section can be dropped onto any
   template from the theme editor, so a section that reads a token from a
   page-level scope breaks the moment it is moved; scoped to the block's own
   class, it travels with it.

   EVERY band is carried verbatim from the old tokens.css, in that file's own
   order — so the cascade is unchanged whether the page was written
   desktop-first (base + max-width overrides) or mobile-first (base +
   min-width overrides). Verified by computed-style diff at
   375/768/1024/1440/1920.
--------------------------------------------------------------------------- */

.hero--landing {
  --font-serif:     'Roboto Serif', Georgia, 'Times New Roman', serif;
  --font-mono:      'Roboto Mono', ui-monospace, 'Courier New', monospace;
  --c-eyebrow:      #b3aeae;
  --radius-md-m:    16px;
  --radius-card-d:  24px;
  --shadow-media-m: 0 16px 48px rgba(0,0,0,.11);
  --text-display:   clamp(21px, calc(26px + (var(--max-vw) - 390px) * 0.015), 51px);
  --lh-display:     1.15;
  --ls-display:     -0.025em;
  --text-eyebrow:   clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-eyebrow:     1.5;
  --ls-eyebrow:     0.2em;
  --ls-lead:        0;
  --section-pad-y:  clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 63px);
  --hero-pad-top:   clamp(23px, calc(28px + (var(--max-vw) - 390px) * 0.015), 55px);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero--landing {
    --text-display:  clamp(26px, calc(26px + (var(--max-vw) - 768px) * 0.025), 46.425px);
    --text-eyebrow:  clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 21.493px);
    --section-pad-y: clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 75px);
    --hero-pad-top:  clamp(28px, calc(28px + (var(--max-vw) - 768px) * 0.025), 108px);
  }
}

@media (min-width: 1024px) {
  .hero--landing {
    --text-display:  clamp(29px, calc(46.425px * (var(--max-vw) / var(--vw-base))), 55px);
    --lh-display:    1.16;
    --ls-display:    -0.012em;
    --text-eyebrow:  clamp(14px, calc(21.493px * (var(--max-vw) / var(--vw-base))), 25px);
    --lh-eyebrow:    normal;
    --ls-eyebrow:    0.1em;
    --ls-lead:       0;
    --section-pad-y: clamp(47px, calc(75px * (var(--max-vw) / var(--vw-base))), 89px);
    --hero-pad-top:  clamp(68px, calc(108px * (var(--max-vw) / var(--vw-base))), 128px);
  }
}

/* ---------- section-local spacing (brief §2.4 mobile · §2.5 pseudo-tablet · §2.3 desktop) ---------- */
.hero--landing {
  --hero-eyebrow-mt: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --hero-title-mt:   clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --hero-lead-mt:    clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --hero-media-mt:   clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 39px);
  --hero-chips-mt:   clamp(11px, calc(13px + (var(--max-vw) - 390px) * 0.015), 26px);
  --hero-chip-gap:   clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --hero-form-mt:    clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 47px);
  --hero-col-gap:    0px;
  --hero-inset:      0px;
  --hero-pad-bottom: var(--hero-pad-top);   /* D-hero-8: mobile bottom is 28, not --section-pad-y */
}

.hero--landing {
  padding-top: var(--hero-pad-top);
  padding-bottom: var(--hero-pad-bottom);
}

.hero--landing .hero__inner {
  display: flex;
  flex-direction: column;
}

.hero--landing .hero__content {
  min-width: 0;
}

.hero--landing .hero__eyebrow {
  width: fit-content;
  margin-top: var(--hero-eyebrow-mt);
  margin-left: var(--hero-inset);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-eyebrow);
}

.hero--landing .hero__title {
  width: fit-content;
  margin-top: var(--hero-title-mt);
  margin-left: var(--hero-inset);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-ink);
}

.hero--landing .hero__lead {
  margin-top: var(--hero-lead-mt);
  margin-left: var(--hero-inset);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--c-text);
}

/* photo card — radius + shadow on the wrapper (mobile 3271:685); image is the SOURCE, cover (D-hero-1) */
.hero--landing .hero__media {
  margin-top: var(--hero-media-mt);
  aspect-ratio: 350.008 / 196.873;
  border-radius: var(--radius-md-m);
  box-shadow: var(--shadow-media-m);
  overflow: hidden;   /* clips the photo to the drawn rounded corners (3271:685 clips content) */
}
.hero--landing .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* chips row — siblings of the photo, not overlays (§5.3). Wrap is a no-op on both drawn layers
   (306.5 <= 350 M, 494.6 <= 600 D); it only engages near 1023, where the pseudo-tablet type outgrows a half column. */
.hero--landing .hero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--hero-chip-gap);
  margin-top: var(--hero-chips-mt);
  margin-left: var(--hero-inset);
}

.hero--landing .hero__form {
  margin-top: var(--hero-form-mt);
}

/* privacy line 2: the indent as a MARGIN (render-identical to the contract's padding-left) so the
   element box is the drawn text box (3271:722 158 wide at x 18 · 3271:43 193 wide at x 15.22) */
.hero--landing .lead-form__privacy-strong {
  width: fit-content;
  padding-left: 0;
  margin-left: var(--lf-strong-indent);
}

/* ---------- pseudo-tablet 768–1023: row split (D-6), mobile design per column ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero--landing {
    --hero-eyebrow-mt: 16px;   /* clamp(16px, …, 0px): min > max resolves to 16 — desktop draws 0 */
    --hero-title-mt:   clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 10.69px);
    --hero-lead-mt:    clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 12.61px);
    --hero-media-mt:   clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 35px);
    --hero-chips-mt:   clamp(13px, calc(13px + (var(--max-vw) - 768px) * 0.025), 30px);
    --hero-chip-gap:   clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 17.88px);
    --hero-col-gap:    clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 136px);
    --hero-inset:      clamp(0px, calc(0px + (var(--max-vw) - 768px) * 0.025), 5px);
    --hero-pad-bottom: clamp(28px, calc(28px + (var(--max-vw) - 768px) * 0.025), 75px);
  }
  .hero--landing .hero__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--hero-col-gap);
  }
  /* basis as a share of (inner − gap), NOT `flex: 1 1 0`: a 0 basis is floored at the form card's
     padding+border, so grow would hand the padded card the wider column */
  .hero--landing .hero__content,
  .hero--landing .hero__form {
    flex: 0 1 calc((100% - var(--hero-col-gap)) / 2);
    min-width: 0;
  }
  .hero--landing .hero__form {
    margin-top: 0;
  }
}

/* ---------- desktop 1024+: 600 | 136 | 484.12 split of the 1220 column ---------- */
@media (min-width: 1024px) {
  .hero--landing {
    --hero-eyebrow-mt: 0px;
    --hero-title-mt:   clamp(7px, calc(10.69px * (var(--max-vw) / var(--vw-base))), 13px);
    --hero-lead-mt:    clamp(8px, calc(12.61px * (var(--max-vw) / var(--vw-base))), 15px);
    --hero-media-mt:   clamp(22px, calc(35px * (var(--max-vw) / var(--vw-base))), 42px);
    --hero-chips-mt:   clamp(19px, calc(30px * (var(--max-vw) / var(--vw-base))), 36px);
    --hero-chip-gap:   clamp(11px, calc(17.88px * (var(--max-vw) / var(--vw-base))), 21px);
    --hero-col-gap:    clamp(86px, calc(136px * (var(--max-vw) / var(--vw-base))), 161px);
    --hero-inset:      clamp(3px, calc(5px * (var(--max-vw) / var(--vw-base))), 6px);
    --hero-pad-bottom: var(--section-pad-y);
    /* tokens.css desktop --lh-display is a FIXED 53.85px, which does not scale with the fluid
       font (at 1024 the 29.4px h1 would get a 53.85px line). Same ratio, unitless: 53.85 / 46.425. */
    --lh-display: 1.16;
  }
  .hero--landing .hero__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--hero-col-gap);
  }
  .hero--landing .hero__content {
    flex: 0 1 calc((100% - var(--hero-col-gap)) * 600 / 1084.12);
    min-width: 0;
  }
  .hero--landing .hero__form {
    flex: 0 1 calc((100% - var(--hero-col-gap)) * 484.12 / 1084.12);
    min-width: 0;
    margin-top: 0;
  }
  /* the chip box is drawn 224.70 x 33.86 with the stroke INSIDE; components.css derives
     8.43 / 20.35 from that box, and the CSS 1px border then adds 2px each way (measured 226.31 x 35.84).
     Padding minus the border reproduces the drawn box. */
  .hero--landing .chip {
    --chip-pad-y: clamp(5px, calc(7.43px * (var(--max-vw) / var(--vw-base))), 9px);
    --chip-pad-x: clamp(12px, calc(19.35px * (var(--max-vw) / var(--vw-base))), 23px);
  }
  /* 495.41px at 1619 expressed against the lead's OWN size (495.41 / 21.493 = 23.05em): the px clamp
     (313 → 588) wrapped a 3rd line at 1024, where --text-lead sits on its 14px floor above the
     proportional 13.59px. In em the drawn 2-line break after "recurring" holds at every width. */
  .hero--landing .hero__lead {
    max-width: 23.05em;
  }
  .hero--landing .hero__media {
    aspect-ratio: 600 / 294;
    border-radius: var(--radius-card-d);
    box-shadow: 26px 33px 137.8px 0 rgba(0, 0, 0, .13);
  }
}