/* Pricing-page offer and contact styles.
   Shared page sections live in site-page-sections.css and are loaded by their owning pages. */
@layer features {
  .landing-page #assinatura {
    padding-block: clamp(32px, 4vw, 48px);
  }

  /* Table: no overflow:hidden so the Pro card can lift outside (badge above, sparkle outside).
     Sits inside a lp-bg-warm section — use --color-surface (= elevated white) for contrast. */
  /* ====== The offer: one plan, one price ======
     Replaces the three-column comparison table. With one plan there is no
     column to compare against, so the page stops being a matrix and becomes an
     offer: the price on the left, the guarantee beside it, and a single CTA.
     Radius scale, accent and paper tones all come from the existing tokens. */

  .landing-page .lp-offer {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 0;
    border: 1px solid var(--lp-rule);
    border-radius: 20px;
    overflow: clip;
    background: var(--lp-white, #fff);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--lp-ink) 7%, transparent);
  }

  .landing-page .lp-offer__price-side {
    padding: 40px 40px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
  }

  .landing-page .lp-offer__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1;
    min-width: 0;
  }
  .landing-page .lp-offer__amount {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
  }
  .landing-page .lp-offer__currency {
    font-size: 28px;
    font-weight: 420;
    color: var(--lp-ink-soft);
  }
  .landing-page .lp-offer__price .price-num {
    font-size: clamp(56px, 8vw, 84px);
    font-weight: 380;
    letter-spacing: -0.035em;
    color: var(--lp-ink);
  }
  .landing-page .lp-offer__per {
    display: inline-block;
    font-size: 15px;
    color: var(--lp-ink-mute);
    margin-inline-start: 2px;
  }

  .landing-page .lp-offer__cycle-note {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--lp-ink-mute);
    min-height: 1.4em;
  }
  .landing-page .lp-offer__cycle-note b {
    color: var(--lp-ink);
    font-weight: 560;
  }

  /* The country list belongs to the pricing page; the shared market note
     lives in site-pricing.css. */
  .landing-page .lp-price-note__all {
    margin-top: 8px;
    font-size: 13px;
    color: var(--lp-ink-mute);
    max-width: 42ch;
  }
  .landing-page .lp-price-note__all > summary {
    cursor: pointer;
    color: var(--lp-ink);
  }
  .landing-page .lp-price-note__all ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    /* All forty-six markets never land here (the list is one language's), but
       thirteen still deserve a scroll rather than a page of their own. */
    max-height: 15rem;
    overflow-y: auto;
  }
  .landing-page .lp-price-note__all li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--lp-rule);
  }
  .landing-page .lp-price-note__all li:last-child {
    border-bottom: 0;
  }

  .landing-page .lp-offer__cta {
    margin-top: 26px;
    width: 100%;
    max-width: 340px;
    justify-content: center;
  }

  .landing-page .lp-offer__reassure {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--lp-ink-mute);
    max-width: 34ch;
  }

  /* The guarantee is a panel, not a footnote: it is the objection the price
     raises, answered in the same eye movement. */
  .landing-page .lp-offer__guarantee {
    padding: 40px 34px;
    background: var(--lp-paper-cream);
    border-inline-start: 1px solid var(--lp-rule);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .landing-page .lp-guarantee__mark {
    width: 34px;
    height: 34px;
    color: var(--lp-terracotta);
    margin-bottom: 14px;
  }
  .landing-page .lp-guarantee__title {
    font-size: 21px;
    font-weight: 520;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    color: var(--lp-ink);
  }
  .landing-page .lp-guarantee__body {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--lp-ink-soft);
  }
  .landing-page .lp-guarantee__fine {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--lp-ink-mute);
  }
  .landing-page .lp-guarantee__fine b {
    color: var(--lp-ink-soft);
    font-weight: 560;
  }

  /* ====== What is included: three groups, never a spec table ======
     Fourteen included things in one flat list with a hairline under each row is
     the laziest layout there is. Grouped in three, each group reads in a glance
     and the eye never has to count. */

  .landing-page .lp-included {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 8px;
  }

  /* One surface for all three: a different tint per card read as three
     different KINDS of thing, and the point of the section is that they are
     one purchase. The blue was the only cool surface on the whole site. */
  .landing-page .lp-included__group {
    padding: 26px 24px;
    border-radius: 20px;
    background: var(--lp-paper-warm);
    border: 1px solid color-mix(in srgb, var(--lp-ink) 7%, transparent);
  }

  .landing-page .lp-included__title {
    font-size: 17px;
    font-weight: 560;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: var(--lp-ink);
  }

  .landing-page .lp-included__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
  }
  .landing-page .lp-included__list li {
    position: relative;
    padding-inline-start: 24px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--lp-ink-soft);
  }
  .landing-page .lp-included__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 13px;
    height: 8px;
    border-left: 2px solid var(--lp-terracotta);
    border-bottom: 2px solid var(--lp-terracotta);
    transform: rotate(-45deg);
  }

  .landing-page .lp-included__foot {
    margin: 26px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--lp-ink-mute);
  }

  /* ====== The four billing questions ====== */

  @media (max-width: 860px) {
    .landing-page .lp-offer {
      grid-template-columns: 1fr;
    }
    .landing-page .lp-offer__guarantee {
      border-inline-start: 0;
      border-top: 1px solid var(--lp-rule);
    }
    .landing-page .lp-included {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
}