/* ============================================================
   SUBSCRIPTION PLANS
   Geometry plus module-local pieces (toggle, badge, chips, price,
   popovers). Colour, elevation and type from ll-tokens.css.
   Card fade, hover lift and grid behaviour come from the tokens
   card and grid classes. NOTE: no scope_css (strips @media).
   ============================================================ */

/* "None" ground: light tokens for text, no painted background. */
.llpt--clear.ll-section { background: transparent; }

/* --- Billing toggle: segmented control on a recessed track ---- */
.llpt__toggle-row { display: flex; justify-content: center; margin-bottom: var(--ll-space-5); }
.llpt__toggle { /* the switch itself is the shared .ll-segmented */ }

/* Save nudge: an OUTLINE CHIP - information, not action. The only
   filled pill in the section is the popular badge. */
.llpt__save {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ll-coral);
  color: var(--ll-coral);
  border-radius: var(--ll-radius-control);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
}

/* --- Guarantee: outline chip above the cards ------------------ */
.llpt__guarantee { display: flex; justify-content: center; margin-bottom: var(--ll-space-7); }
.llpt__gchip {
  display: inline-flex;
  align-items: center;
  gap: var(--ll-gap-inline);
  border: 1px solid var(--ll-coral);
  color: var(--ll-coral);
  border-radius: var(--ll-radius-control);
  font-family: var(--ll-font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
}
.llpt__gchip .ll-icon { color: var(--ll-coral); }

/* --- Cards ----------------------------------------------------- */
/* Room for the badge to overlap the top edge */
.llpt__grid { margin-top: var(--ll-space-4); align-items: start; }

/* ============ PRICES ON ONE LINE ============
   The plan descriptions are different lengths, so .llpt__head came
   out at 187, 211, 211 and 230px and the four prices sat at four
   different heights. The cards now share the SECTION's row grid
   through subgrid, so head, price, action and features each get one
   row height across all four cards and everything lines up whatever
   the copy does. Nothing is hardcoded, so it survives a copy change.

   Row gap has to be restated on the parent: in a subgrid the gaps
   come from the parent, and .ll-grid's 24px grid gap would otherwise
   become the gap INSIDE each card. Doubled class because
   ll-tokens.css loads last and .ll-grid's gap is the same
   specificity. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 769px) {
    .llpt__grid.llpt__grid {
      grid-template-rows: repeat(4, auto);
      align-items: stretch;
      row-gap: var(--ll-gap-stack);
      column-gap: var(--ll-gap-grid);
    }
    .llpt__card.ll-card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
    }
  }
}  /* cards size to their own content */

.llpt__card { position: relative; }
/* A card whose tooltip is open (or that is hovered) paints above
   its neighbours, so the popover is never clipped by the next card. */
.llpt__card:hover,
.llpt__card:has(.llpt__info.open) { z-index: 3; }

/* Popular: the coral fade's quiet 70% goes full coral, the badge
   marks it. It used to also rest 8px proud of its siblings on
   desktop, which is gone: with the cards on a shared row grid that
   offset carried the popular card's price 8px above the other three,
   and aligned prices matter more than the nudge. The coral hairline
   and the badge are doing the marking. */
.llpt__card--popular { --ll-card-border: var(--ll-coral); }

.llpt__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ll-coral);
  color: var(--ll-text-invert);
  font-family: var(--ll-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.llpt__kicker {
  font-family: var(--ll-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ll-eyebrow);
  margin-bottom: var(--ll-space-2);
}
.llpt__title { margin: 0; }
.llpt__desc {
  margin-top: var(--ll-space-2);
  color: var(--ll-fg-muted);
  font-size: 15px;
  line-height: 1.6;
}
.llpt__desc :where(p):last-child { margin: 0; }

/* --- Price ------------------------------------------------------ */
.llpt__price .price { display: none; }
.llpt__price .price.active { display: block; }
.llpt__amount {
  font-family: var(--ll-font-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ll-fg);
}
.llpt__subtext {
  margin: var(--ll-space-1) 0 0;
  color: var(--ll-fg-muted);
  font-size: 14px;
}
.llpt__savetext {
  margin-top: var(--ll-space-1);
  color: var(--ll-coral);
  font-size: 13px;
  font-weight: 600;
}
.llpt__savetext.price.active { display: block; }

/* --- Button -----------------------------------------------------
   Pricing-only divergence (Jackie, 30 Aug): non-popular plans take
   an OUTLINE button - same family as the primary, at rest - so
   every plan is clearly actionable but only the popular plan
   carries the filled button. Doubled class because the tokens file
   loads last and .ll-btn would otherwise re-clear the border. */
.llpt__action { display: flex; }
.llpt__btn { width: 100%; justify-content: center; }
.ll-ground-light    .llpt__btn.llpt__btn--ghost,
.ll-ground-recessed .llpt__btn.llpt__btn--ghost {
  background: transparent;
  border-color: var(--ll-navy);
  color: var(--ll-navy);
}
.ll-ground-light    .llpt__btn.llpt__btn--ghost:hover,
.ll-ground-light    .llpt__btn.llpt__btn--ghost:focus-visible,
.ll-ground-recessed .llpt__btn.llpt__btn--ghost:hover,
.ll-ground-recessed .llpt__btn.llpt__btn--ghost:focus-visible {
  background: var(--ll-navy);
  border-color: var(--ll-navy);
  color: var(--ll-text-invert);
}
.ll-ground-navy .llpt__btn.llpt__btn--ghost {
  background: transparent;
  border-color: var(--ll-text-invert);
  color: var(--ll-text-invert);
}
.ll-ground-navy .llpt__btn.llpt__btn--ghost:hover,
.ll-ground-navy .llpt__btn.llpt__btn--ghost:focus-visible {
  background: var(--ll-text-invert);
  border-color: var(--ll-text-invert);
  color: var(--ll-navy);
}

/* --- Features ---------------------------------------------------- */
.llpt__featlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ll-space-3); }
.llpt__feat {
  display: flex;
  align-items: flex-start;
  gap: var(--ll-gap-inline);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ll-fg);
}
.llpt__feat--muted .llpt__feattext { color: var(--ll-fg-muted); }
.llpt__mark { flex: none; display: inline-flex; margin-top: 2px; }
.llpt__mark--tick { color: var(--ll-icon-accent); }
.llpt__mark--cross { color: var(--ll-fg-muted); }
.llpt__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ll-fg-muted); margin: 5px; display: block; }

/* Info: HOVER opens on pointer devices (the dot inverts to navy
   and the tooltip fades up, arrowed); click/tap toggles it on
   touch and keyboard (script in module.js). */
.llpt__info { position: relative; display: inline-flex; margin-left: 2px; }
.llpt__info-btn {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--ll-fg-muted);
  color: var(--ll-fg-muted);
  background: transparent;
  /* the glyph is a drawn SVG, so no theme font rule can oversize it */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--ll-dur-fast) var(--ll-ease),
              border-color     var(--ll-dur-fast) var(--ll-ease),
              color            var(--ll-dur-fast) var(--ll-ease);
}
.llpt__info-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  width: 230px;
  background: var(--ll-navy);
  color: var(--ll-text-invert);
  font-size: 12.5px;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: var(--ll-radius-inner);
  box-shadow: var(--ll-card-shadow-hover);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity var(--ll-dur-fast) var(--ll-ease),
              transform var(--ll-dur-fast) var(--ll-ease),
              visibility 0s linear var(--ll-dur-fast);
  pointer-events: none;
}
.llpt__info-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ll-navy);
}
.llpt__info.open .llpt__info-btn,
.llpt__info:hover .llpt__info-btn,
.llpt__info-btn:focus-visible {
  background: var(--ll-navy);
  border-color: var(--ll-navy);
  color: var(--ll-text-invert);
}
.llpt__info.open .llpt__info-pop,
.llpt__info:hover .llpt__info-pop,
.llpt__info-btn:focus-visible + .llpt__info-pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

/* ALL benefits sit behind the expander on every screen size
   (Jackie: nothing shows until See more is clicked). */
.llpt__featlist { display: none; }
.llpt__feats.open .llpt__featlist { display: flex; }
/* Deliberately hover-INERT: the only movement is the list opening.
   The theme's global button hover (navy fill) is pinned out with
   documented !important; remove at theme cleanup. */
.llpt__more,
.llpt__more:hover,
.llpt__more:focus-visible {
  display: flex;
  width: max-content;
  margin: 0 auto var(--ll-space-3);
  align-items: center;
  gap: 4px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0 !important;
  font-family: var(--ll-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--ll-fg-muted) !important;
  cursor: pointer;
  transition: none !important;
}
/* No animation on the control itself - the opening IS the
   animation. The chevron flips state instantly. */
.llpt__more .ll-icon { width: 14px; height: 14px; transition: none; }
.llpt__feats.open .llpt__more .ll-icon { transform: rotate(90deg); }

@media (max-width: 768px) {
  .llpt__amount { font-size: 36px; }

  /* .ll-grid--snap turns the track into a horizontal scroller, and
     overflow-x: auto forces overflow-y to auto as well, so the badge
     straddling the card's top edge was being clipped: measured 12px
     of it above the scroll box. Padding sits INSIDE the scroll box,
     so this gives the badge somewhere to live without moving it. */
  .llpt__grid.ll-grid--snap { padding-top: var(--ll-space-5); }
}