/* ===================================================================
   FOUNDING 100 WELCOME GIFT — /lp/uk, /lp/au, /lp/uk-gift-test

   Adds the Founding 100 welcome gift to the existing price cards and
   a small modal that explains it. Deliberately additive: the existing
   festival-sweets gift, the Founding 100 badge, the prices and the
   plan CTAs are all left exactly as they were.
   =================================================================== */

/* The Founding 100 extras are grouped into one faint gold band so they
   read as a block that is visibly separate from the plan's standard
   features.

   Borders are removed on purpose: every .plan-features li already
   carries `border-bottom: 1px solid #f0ebe0` (style.css:831), so a
   label with its own border sat between two near-identical hairlines
   and read as part of the ruling rather than as a heading. */
.plan-features li.wg-gift-label,
.plan-features li.wg-gift {
  border-bottom: 0;
  background: rgba(200,169,106,.13);
  padding-inline: 11px;
}

.plan-features li.wg-gift-label {
  display: block;
  list-style: none;
  border-radius: 9px 9px 0 0;
  margin: 16px 0 0;
  padding-block: 9px 5px;
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-dark);
}
/* The theme draws its own bullet on .plan-features li, so the label
   needs an explicit opt-out rather than inheriting it. */
.plan-features li.wg-gift-label::before,
.plan-features li.wg-gift-label::marker { content: none; }

.plan-features li.wg-gift {
  padding-block: 3px;
  gap: 0;
  color: var(--color-accent);
  font-weight: 600;
}
/* 🎁 is the marker on these lines, so the theme's ✓ would be a second
   one sitting right beside it. */
.plan-features li.wg-gift::before { content: none; }

/* The last gift closes the band. */
.plan-features li.wg-gift:last-child {
  border-radius: 0 0 9px 9px;
  padding-bottom: 11px;
}

/* ===================================================================
   WG-CARD — the whole gift block as one tap target

   Replaces the "See your Founding 100 gift" text link, which was about
   16px tall and produced missed taps on mobile (seen in Clarity
   recordings). Everything the visitor reads about the gift is now
   inside the button, so anywhere in the block opens the modal.

   Only pages that use .wg-card markup get this; the pages still on the
   .wg-gift-label list rows are untouched by these rules.
   =================================================================== */
.wg-card {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 13px 15px 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  background: rgba(200,169,106,.13);
  border: 1px solid rgba(200,169,106,.42);
  border-radius: 10px;
  /* Deliberately quieter than .plan-cta: a tint and a hairline, no
     fill and no shadow, so it never competes with START WITH MONCHA. */
  transition: background .18s ease, border-color .18s ease;
}
.wg-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Hover only where there is a real pointer — on touch it would latch on
   first contact and read as the block flickering during a scroll. */
@media (hover: hover) {
  .wg-card:hover {
    background: rgba(200,169,106,.2);
    border-color: rgba(200,169,106,.62);
  }
}
.wg-card:active { background: rgba(200,169,106,.24); }

.wg-card-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-dark);
}
.wg-card-item {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-accent);
}
.wg-card-item + .wg-card-item { margin-top: 5px; }

.wg-card-more {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(200,169,106,.4);
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 600;
  color: var(--color-accent);
}

/* A quiet text link, not a second button — the plan CTA must stay the
   loudest thing on the card. */
.wg-link {
  display: inline-block;
  margin: 2px 0 14px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.wg-link:hover { opacity: .75; }
.wg-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ---------- modal ---------- */
.wg-modal {
  border: 0;
  padding: 0;
  margin: auto;                       /* style.css resets * { margin: 0 } */
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-dark);
  box-shadow: 0 20px 60px rgba(42,33,29,.28);
}
.wg-modal::backdrop { background: rgba(42,33,29,.5); }
.wg-modal[open] { display: flex; }

.wg-inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 34px 32px 30px;
  text-align: center;
}

.wg-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(244,239,232,.9);
  color: var(--color-dark);
  font-size: 1.2rem; line-height: 1;
  cursor: pointer;
}
.wg-close:hover { background: #fff; }

.wg-eyebrow {
  font-family: var(--font-sans);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.wg-title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 4.4vw, 1.85rem);
  line-height: 1.28;
  margin-bottom: 12px;
}
/* The title takes focus on open so the modal is announced, but it is a
   heading, not a control — iOS Safari draws a focus ring on it anyway.
   Suppressed here only; every real control keeps its ring. */
.wg-title:focus,
.wg-title:focus-visible { outline: none; }
/* What the plan actually adds, boxed so it is unmissable and split one
   line per gift — left-aligned so the 🎁 markers stack into a list the
   eye can scan, rather than a centred paragraph it has to read. */
.wg-body {
  display: inline-block;
  text-align: left;
  max-width: 470px;
  margin: 0 auto 18px;
  border: 1px dashed var(--color-gold);
  background: rgba(200,169,106,.1);
  border-radius: 10px;
  padding: 16px 22px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-dark);
}
.wg-body p + p { margin-top: 11px; }

.wg-thumbs { display: flex; justify-content: center; gap: 12px; margin-bottom: 12px; }
.wg-thumb { flex: 1 1 0; max-width: 170px; }
.wg-thumb img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 10px; display: block; background: var(--color-bg-alt);
}
.wg-thumb figcaption {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: .7rem; color: var(--color-muted);
}

.wg-surprise {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .92rem;
  color: var(--color-mid);
  margin: 14px 0 6px;
}
.wg-note {
  font-size: .68rem; line-height: 1.6;
  color: var(--color-muted);
  margin-bottom: 20px;
}

/* The Founding 100 copy pushed the modal past a phone screen, so the
   buy button is pinned to the bottom of the scroll area instead of
   sitting below the fold. No effect on desktop, where nothing
   overflows and sticky resolves to its static position.

   The box-shadow paints the gap underneath the button in the modal's
   own background — without it, the copy scrolls through that band. */
.wg-foot {
  position: sticky;
  bottom: 14px;
  padding-top: 12px;
  background: var(--color-bg);
  box-shadow: 0 14px 0 0 var(--color-bg);
}
/* Copy passing behind the pinned button was being sliced mid-letter.
   A short fade above it reads as "there is more below" instead. */
.wg-foot::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 20px;
  pointer-events: none;
  background: linear-gradient(to top, var(--color-bg), transparent);
}

.wg-cta {
  display: block;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: .88rem; font-weight: 700; letter-spacing: .04em;
  padding: 15px 22px; border-radius: 8px;
}
.wg-cta:hover { background: var(--color-accent-light); }

@media (max-width: 600px) {
  .wg-inner { padding: 28px 20px 24px; }
  /* Three thumbnails at phone width would be postage stamps; 2 + 1
     keeps them readable without a horizontal scroll. */
  .wg-thumbs { flex-wrap: wrap; gap: 10px; }
  .wg-thumb { flex: 1 1 calc(50% - 5px); max-width: none; }
  .wg-thumb:last-child { flex-basis: 100%; max-width: 60%; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) { .wg-modal { transition: none; } }