/* ==========================================================================
   PRICING PAGE  (pricing.php)

   The page has one job: let somebody compare three things that are nearly
   the same and then pick one. So the three cards are built to be identical
   down to the pixel — same width, same padding, same radius, with the price
   row on the same line in all three — and then exactly one of them is given
   permission to break that: it lifts, it glows, and it carries a badge on
   its top edge. Everything else here is in service of that one difference
   being the only difference the eye finds.

   Every value comes from tokens.css. The --pr-* group belongs to this page.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HERO
   Centred, narrow, and deliberately short — the cards are the content, and
   this is only the sentence that makes them make sense.
   -------------------------------------------------------------------------- */
.phero {
  padding-block: calc(var(--space-section) * 0.8) var(--space-10);
  text-align: center;
}

.phero__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
}

.phero__title {
  max-width: 18ch;
  margin: 0;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.phero__lede {
  max-width: 56ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* The three proof pills. Numbers the business already stands behind, said
   in as few words as they will go. */
.phero__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.phero__pills li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-translucent);
  backdrop-filter: blur(10px);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.phero__pills .icon { color: var(--color-accent-text); }

/* The term, said once, loudly enough that no card has to repeat the warning
   and quietly enough that it is not mistaken for a price. */
.phero__term {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  max-width: 52ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  text-align: start;
  text-wrap: balance;
}

.phero__term strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.phero__term .icon { flex: none; color: var(--color-accent-text); }


/* --------------------------------------------------------------------------
   2. THE THREE PLAN CARDS
   -------------------------------------------------------------------------- */
.plans__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pr-card-gap);
  align-items: stretch;
  /* Room above for the lifted card's badge to hang into, and below so its
     shadow is not clipped by the next section. */
  padding-block: var(--space-6);
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pr-card-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--pr-card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.plan:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}

/* ---- The one card allowed to look different ---- */
.plan--pop {
  border-color: var(--pr-pop-border);
  box-shadow: var(--pr-pop-glow);
}

/* A wash that fades out a third of the way down, so the glow reads as light
   falling on the card rather than as a second background colour. */
.plan--pop::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pr-pop-wash);
  pointer-events: none;
}

.plan--pop > * { position: relative; }

.plan--pop:hover {
  border-color: var(--pr-pop-border);
  box-shadow: var(--pr-pop-glow), var(--shadow-xl);
}

/* The badge straddles the top border. It is positioned rather than in the
   flow precisely so the price rows in all three cards stay level. */
.plan__flag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--gradient-button);
  box-shadow: var(--shadow-accent);
  color: var(--color-text-on-accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.plan__flag .icon { width: 0.85em; height: 0.85em; }

/* ---- Head ---- */
.plan__head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.plan__icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-accent-soft-border);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.plan__icon .icon { width: 1.2rem; height: 1.2rem; }

.plan__name {
  margin: 0;
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.plan__kind {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.plan__lede {
  /* Three cards, three summaries of different lengths — pinned to a minimum
     height so the price rows underneath still line up across all three. */
  min-height: 4.5rem;
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* ---- Price ---- */
.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

.plan__currency {
  color: var(--color-text-muted);
  font-size: var(--pr-currency);
  font-weight: var(--weight-semibold);
}

.plan__amount {
  font-size: var(--pr-amount);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
}

.plan--pop .plan__amount { color: var(--color-accent-text); }

.plan__term {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

/* The per-year figure, which exists so nobody has to divide by four in their
   head to compare this with anything else they are paying for. */
.plan__per {
  margin: 0 0 var(--space-5);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

/* ---- Call to action ---- */
.plan__cta { margin-block-end: var(--space-3); }

.plan__trial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.plan__trial .icon { color: var(--color-success-text); }

/* ---- Feature list ---- */
.plan__list {
  flex: 1 1 auto;                 /* pushes the footnote to the card's floor */
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--text-base);
}

.plan__fields {
  margin: 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  text-align: center;
}

.plans__foot {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  text-align: center;
}

.plans__foot a {
  color: var(--color-accent-text);
  font-weight: var(--weight-medium);
}

.plans__foot a:hover { text-decoration: underline; }


/* --------------------------------------------------------------------------
   3. NFC SMART CARD
   The physical upsell, on an inverted band so it reads as a different kind
   of purchase from the three above it — one payment, a thing in the post.
   -------------------------------------------------------------------------- */
.prnfc__inner {
  display: grid;
  gap: var(--space-8);
}

.prnfc__copy h2 {
  margin: var(--space-3) 0 var(--space-4);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.prnfc__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.prnfc__note .icon { flex: none; margin-block-start: 0.15em; }

.prnfc__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--pr-nfc-min), 1fr));
  gap: var(--space-4);
}

.prcard {
  display: flex;
  flex-direction: column;
  padding: var(--pr-card-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--pr-nfc-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.prcard--accent {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-md);
}

.prcard__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-block-end: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.prcard__icon .icon { width: 1.15rem; height: 1.15rem; }

.prcard__name {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.prcard__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.prcard__currency {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.prcard__amount {
  font-size: var(--text-h4);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.prcard__once { color: var(--color-text-subtle); font-size: var(--text-sm); }

.prcard__text {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.prcard__list {
  flex: 1 1 auto;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
}

.prcard__cta { margin-block-start: auto; }


/* --------------------------------------------------------------------------
   4. COMPARISON TABLE
   A real <table>, because that is what it is, and screen readers deserve the
   row and column headers. Below --pr-table-min it scrolls sideways inside a
   focusable region rather than crushing fourteen rows into a phone.
   -------------------------------------------------------------------------- */
.compare__scroll {
  margin-block-start: var(--space-8);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--pr-table-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.compare__scroll:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.compare__table {
  width: 100%;
  min-width: var(--pr-table-min);
  border-collapse: collapse;
  font-size: var(--text-base);
}

.compare__table th,
.compare__table td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  vertical-align: middle;
}

/* The feature column stays put while the tiers scroll past it, so a row can
   still be read once the phone is two columns along. */
.compare__table tbody th[scope="row"],
.compare__table tfoot th[scope="row"] {
  position: sticky;
  inset-inline-start: 0;
  z-index: var(--z-raised);
  width: var(--pr-table-feature);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.compare__table tbody tr:nth-child(even) th[scope="row"],
.compare__table tbody tr:nth-child(even) td { background: var(--pr-table-stripe); }

/* ---- Head ---- */
.compare__table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.compare__tier { text-align: center !important; }

.compare__tier-name {
  display: block;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}

.compare__tier-price {
  display: block;
  margin-block-start: 2px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.compare__tier--pop .compare__tier-name { color: var(--color-accent-text); }

/* ---- Group rows ---- */
.compare__group th {
  padding-block: var(--space-3);
  border-block: 1px solid var(--color-border);
  background: var(--color-bg-sunken);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* ---- Cells ---- */
.compare__table td { text-align: center; }

.compare__yes { width: 1.1rem; height: 1.1rem; color: var(--pr-yes); }
.compare__no  { width: 1rem;   height: 1rem;   color: var(--pr-no); opacity: 0.55; }

.compare__word {
  display: inline-block;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* The middle column is tinted all the way down, so the highlighted tier is
   still the highlighted tier once the cards are off the screen. */
.compare__cell--pop { background: var(--color-accent-soft); }
.compare__table tbody tr:nth-child(even) .compare__cell--pop { background: var(--color-accent-soft); }

/* ---- Foot ---- */
.compare__table tfoot td,
.compare__table tfoot th {
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.compare__foot-price {
  display: block;
  margin-block-end: var(--space-2);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.compare__hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   5. CLOSING CTA
   -------------------------------------------------------------------------- */
.prcta__panel {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding: clamp(2rem, 1.4rem + 2.6vw, 3.5rem) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background: var(--gradient-accent-soft), var(--color-surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.prcta__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-accent-soft-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.prcta__title {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.prcta__lede {
  max-width: 52ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.prcta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}


/* --------------------------------------------------------------------------
   6. WIDER SCREENS
   One breakpoint for the cards, because two columns would leave the third
   stranded and the middle card would have nothing to be in the middle of.
   -------------------------------------------------------------------------- */
@media (min-width: 60rem) {
  .plans__grid {
    grid-template-columns: repeat(3, minmax(var(--pr-card-min), 1fr));
    /* Stretch, deliberately. The popped card is pulled up by a negative
       margin, and stretching sizes it to fill the row *including* that
       margin — so it ends up exactly one lift taller, hangs over the top
       and still lands on the same floor as its neighbours. Switching this
       to `start` plus `height: 100%` looks identical until the lifted
       card runs out of room and its footnote falls out of the bottom. */
  }

  /* The lift. Pulled up and padded back down by the same amount, so the card
     grows upwards into the padding reserved above the grid rather than
     dragging its neighbours' baselines with it. */
  .plan--pop {
    margin-block-start: calc(var(--pr-pop-lift) * -1);
    padding-block: calc(var(--pr-card-pad) + var(--pr-pop-lift)) var(--pr-card-pad);
  }

  .prnfc__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-10);
    align-items: center;
  }
}

@media (min-width: 48rem) {
  .phero { padding-block: var(--space-section) var(--space-12); }
}


/* --------------------------------------------------------------------------
   7. NARROW SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 52rem) {
  /* The table has started scrolling, so say so rather than leaving people to
     discover it by accident. */
  .compare__hint { display: flex; }
}

@media (max-width: 30rem) {
  .plan__lede { min-height: 0; }        /* nothing to line up in one column */

  .plan__price { gap: var(--space-1) var(--space-2); }

  .phero__pills li { font-size: var(--text-xs); }
}


/* --------------------------------------------------------------------------
   8. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .plan { transition: none; }
}