/* DEV-only responsive funnel introduction. The component is never rendered on production. */
.mobile-funnel-intro:not([open]) {
  display: none !important;
}

@media (min-width: 0) {
  body.mobile-funnel-intro-open {
    overflow: hidden;
  }

  .mobile-funnel-intro {
    position: fixed;
    z-index: 100000;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #F8F3EB;
    color: #1C2119;
  }

  .mobile-funnel-intro::backdrop {
    background: #F8F3EB;
  }

  .mobile-funnel-intro__shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 430px;
    min-height: 100svh;
    min-height: 100dvh;
    margin: 0 auto;
    background: #F8F3EB;
  }

  .mobile-funnel-intro__header {
    position: relative;
    display: flex;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
  }

  /* With only the dismiss control left, the band shrinks to what it holds. */
  .mobile-funnel-intro__header--bare {
    flex: 0 0 48px;
    justify-content: flex-start;
  }

  .mobile-funnel-intro__close {
    position: absolute;
    left: 12px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    background: transparent;
    color: #1C2119;
    cursor: pointer;
  }

  .mobile-funnel-intro__close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.75;
  }

  .mobile-funnel-intro__brand {
    color: #214A2C;
    font-family: var(--font-serif);
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
  }

  .mobile-funnel-intro__help {
    position: absolute;
    right: 20px;
    color: #5E6359;
    font-size: 13px;
    line-height: 44px;
  }

  .mobile-funnel-intro__progress {
    flex: 0 0 4px;
    height: 4px;
    background: #E4E0D4;
  }

  .mobile-funnel-intro__progress span {
    display: block;
    width: 4%;
    height: 100%;
    background: #214A2C;
  }

  .mobile-funnel-intro__content {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 26px;
    padding: 32px 22px 24px;
  }

  .mobile-funnel-intro__heading {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mobile-funnel-intro__heading h1 {
    color: #1C2119;
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.05;
  }

  .mobile-funnel-intro__heading p {
    color: #3C4238;
    font-size: 17px;
    line-height: 1.4;
  }

  .mobile-funnel-intro__steps {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .mobile-funnel-intro__steps li {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .mobile-funnel-intro__steps li > span {
    display: grid;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 999px;
    background: #DEE4E0;
    color: #214A2C;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
  }

  .mobile-funnel-intro__steps p {
    font-size: 18px;
    line-height: 1.3;
  }

  .mobile-funnel-intro__cost {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border: 1px solid #214A2C;
  }

  .mobile-funnel-intro__cost-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }

  .mobile-funnel-intro__cost-label {
    color: #5E6359;
    font-size: 20px;
    line-height: 1.2;
  }

  .mobile-funnel-intro__cost-price {
    color: #1C2119;
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
  }

  .mobile-funnel-intro__cost-note {
    padding-top: 10px;
    border-top: 1px solid #E4E0D4;
    color: #3C4238;
    font-size: 15px;
    line-height: 1.4;
  }

  .mobile-funnel-intro__cost-footnote {
    display: block;
    margin-bottom: 6px;
  }

  .mobile-funnel-intro__footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding: 14px 20px calc(20px + env(safe-area-inset-bottom));
    text-align: center;
  }

  .mobile-funnel-intro__continue {
    display: block;
    width: 100%;
    padding: 18px 24px;
    border-radius: 999px;
    background: #214A2C;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
  }

  .mobile-funnel-intro__continue:hover,
  .mobile-funnel-intro__continue:focus-visible {
    background: #173D22;
  }

  .mobile-funnel-intro__footer p,
  .mobile-funnel-intro__refund {
    color: #5E6359;
    font-size: 12px;
    line-height: 1.35;
  }

  .mobile-funnel-intro__refund {
    align-self: center;
    color: #214A2C;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
}

@media (min-width: 768px) {
  /* Desktop only — the phone layout fills the screen and is left alone.
     .mobile-funnel-intro__content grows to absorb the shell's spare height and
     packs its children at the top, so on a tall screen the leftover opened up
     between the cost box and the CTA. Let the content take its natural height,
     drop the footer's auto margin that pinned it to the bottom, and centre the
     pair instead, so the spare height sits above and below the card rather
     than inside it. */
  .mobile-funnel-intro__shell {
    max-width: 600px;
    justify-content: center;
  }

  .mobile-funnel-intro__content {
    flex: 0 0 auto;
    padding: 52px 40px 32px;
  }

  .mobile-funnel-intro__footer {
    margin-top: 0;
  }

  .mobile-funnel-intro__heading h1 {
    font-size: 44px;
  }

  .mobile-funnel-intro__footer {
    padding-right: 40px;
    padding-left: 40px;
  }
}