@layer components {
  .guava-landing {
    /* Shared viewport alignment for header, hero, section content, and footer.
       Panels sit outside this line; their inner gutter subtracts the panel inset. */
    --marketing-content-max-width: 1280px;
    --marketing-page-gutter: 20px;
    --marketing-panel-inset: min(50px, calc(var(--marketing-page-gutter) / 2));
    --brand-primary: #ff5731;
    --brand-soft: #ffe8e1;
  }

  .marketing-content {
    margin-inline: var(--marketing-page-gutter);
  }
  .marketing-header { padding-inline: var(--marketing-page-gutter); }
  .marketing-header-return {
    left: var(--marketing-page-gutter);
    right: var(--marketing-page-gutter);
    padding-inline: 20px;
  }

  .marketing-inset-panel {
    margin: 20px;
    border-radius: 24px;
    overflow: hidden;
  }

  @media (min-width: 741px) {
    .guava-landing { --marketing-page-gutter: max(5.5vw, calc((100vw - var(--marketing-content-max-width)) / 2)); }
    .marketing-header-return { padding-inline: 28px; }
    .marketing-inset-panel {
      margin: 50px max(50px, calc((100% - 1440px) / 2));
      border-radius: 40px;
    }
  }
  .marketing-aligned-panel {
    margin-inline: var(--marketing-panel-inset);
  }
  .marketing-aligned-panel > .marketing-content {
    margin-inline: calc(var(--marketing-page-gutter) - var(--marketing-panel-inset));
  }


}

@layer components {
  .homepage-illustrated-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 41fr 51fr;
    grid-template-rows: minmax(0, 1fr);
    align-items: start;
    column-gap: 3%;
    height: 80vh;
    padding: clamp(24px, 6vh, 64px) var(--marketing-page-gutter) 0;
    min-height: 0;
    background: #fff0ad;
    color: #102d24;
  }
  .homepage-hero-art { position: absolute; left: 0; bottom: 0; width: min(30vw, 520px); overflow: hidden; pointer-events: none; z-index: -1; transition: opacity 1200ms ease-in-out; }
  .homepage-hero-art img { position: absolute; max-width: none; height: auto; }
  .homepage-hero-copy { padding-top: clamp(0px, 4vh, 48px); min-width: 0; }
  .guava-landing .homepage-hero-copy h1 {
    font-size: clamp(32px, 4.2vw, 68px);
    line-height: 1.12;
    letter-spacing: var(--type-heading-tracking);
    margin: 0;
  }
  .homepage-hero-copy p { max-width: var(--type-reading-measure); margin: 24px 0 26px; font-size: clamp(17px, 1.7vw, 24px); line-height: var(--type-body-leading); }
  .homepage-hero-preview {
    display: block; width: 100%; min-width: 0; margin: 0 0 -80px; border: 0;
    border-radius: 18px; background: white; box-shadow: 0 6px 22px #76582420;
  }
  @media (max-width: 740px) {
    .homepage-hero-art { width: 100vw; }
    .homepage-illustrated-hero { display: block; min-height: 0; padding: 48px var(--marketing-page-gutter) 0; }
    .homepage-hero-copy { position: relative; width: 100%; padding-top: 0; }
    .guava-landing .homepage-hero-copy h1 { font-size: clamp(30px, 6.6vw, 46px); }
    .homepage-hero-copy p { max-width: 360px; margin: 20px 0; font-size: 18px; }
    .homepage-hero-preview { position: relative; top: auto; left: auto; width: 100%; max-width: 558px; margin: 48px auto -80px; }
  }
}

@keyframes marketing-header-return {
  from { transform: translateY(calc(-100% - 24px)); }
  to { transform: translateY(0); }
}
.marketing-header-return { animation: marketing-header-return 450ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .marketing-header-return { animation: none; }
  .homepage-hero-art { transition: none; }
}