/* ============================================================
   30-Day Pass pricing card
   Shared by index.html (Pricing section) and trial.html (Unlock
   popup), so both show the exact same card. Change the card here.
   The markup is duplicated in both pages (no build step), so keep
   the card's wording in sync by hand.

   Every color/font the card needs is defined on .price-card itself
   (--pc-*), because the two pages define different global tokens
   (e.g. --accent is #b89968 on the landing page, #c8b89a in the editor).
   ============================================================ */
.price-card {
  --pc-accent: #b89968;
  --pc-ink: #1a1714;
  --pc-ink-body: #39342d;
  --pc-ink-soft: #6b6760;
  --pc-ink-faint: #9a958d;
  --pc-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --pc-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  max-width: 430px; margin: 44px auto 0; text-align: left;
  background: #fff; border: 1px solid var(--pc-accent); border-radius: 24px;
  box-shadow: 0 10px 40px rgba(150,120,80,.16); padding: 26px 38px 40px; position: relative; overflow: hidden;
  font-family: var(--pc-sans); color: var(--pc-ink); line-height: 1.5;
}
.price-card .plan { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--pc-accent); font-weight: 600; }
.price-card .amount { font-family: var(--pc-serif); font-weight: 500; font-size: 62px; line-height: 1; margin: 12px 0 4px;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .213em; }  /* a long price (R$ 9,90 à vista) puts the <em> snugly underneath */
.price-card .amount em { font-style: normal; font-family: var(--pc-sans); font-size: 15px; color: var(--pc-ink-faint); font-weight: 400; white-space: nowrap; }
.price-card .per { color: var(--pc-ink-soft); font-size: 14px; }
.price-card ul { list-style: none; margin: 26px 0 30px; padding: 0; }
.price-card li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--pc-ink-body); padding: 7px 0; }
.price-card li .check {
  display: grid; place-items: center; flex-shrink: 0; margin-top: 1px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--pc-accent); color: #fff; font-size: 10px; font-weight: 700;
}
.price-note { margin-top: 14px; font-size: 12px; color: var(--pc-ink-faint, #9a958d); text-align: center; }

/* Accepted payment methods, under the "powered by Stripe" line. Also used by
   account.html's payment card, which loads this file for it. The card-brand
   SVGs are bare marks centred in a 780×500 frame; the Apple Pay / Google Pay /
   iDEAL / BLIK SVGs are 3:2 badges, close enough in shape to share the same width.
   Widths are a share of the row (6 × 14% + 5 gaps × 2.5% < 100%), so all six
   stay on one row in any card on any phone. */
.pay-logos { display: flex; justify-content: center; flex-wrap: nowrap; gap: 2.5%; margin-top: 10px; }
.pay-logos img { display: block; height: auto; width: 14%; max-width: 59px; }
.pay-logos .pay-logo-pix { width: 17%; max-width: 72px; align-self: center; }  /* wide logo, no card: a bit wider so it isn't tiny */
.pay-logos img[hidden] { display: none; }  /* BLIK in Poland / Pix in Brazil / iDEAL elsewhere: local-price.js swaps them */

/* The card's button (same values as .btn + .btn--accent in styles.css, so it
   also renders on pages that don't load styles.css) */
.price-card .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%;
  font-family: var(--pc-sans); font-weight: 500; font-size: 13px; letter-spacing: -.01em;
  border: none; border-radius: 10px; padding: 9px 15px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.price-card .btn--accent {
  background: linear-gradient(180deg, #34302a, #1a1714);
  color: #fff;
  box-shadow: 0 8px 20px rgba(40,33,24,.28);
}
.price-card .btn--accent:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(40,33,24,.4); }