/* ============================================================
   07 PRICING  ·  #pricing  (instrument language)
   Flat, typography-led. Each card leads with the price as the data
   face (Space Grotesk, tabular), then a "who it's for" line and the
   real optimization count for that tier. No tick lists and, since
   pass 2, no comparison matrix either: the TWO cards are the whole
   section, so the card is the only thing that has to be read.
   Premium alone is emphasized (brighter flat surface, accent price)
   and alone owns "Most popular". No glass (no backdrop-filter), no
   glow, no lift transform. CTA weight climbs Standard (outline) <
   Premium (primary). Tokens only. Prefix: .pricing-

   Vertical padding is NOT overridden here: this section rides the
   shared --sec-pad rhythm like every other one. Everything inside
   was tightened instead.
   ============================================================ */

/* ---------- head ----------
   Eyebrow and title, no sub. Among the middle sections this is the only one
   still addressing the visitor from the centre line, which is the point: it is
   the moment of decision, so it is the one that gets the formal treatment while
   features sits left, games leads with its art and the trust strip carries no
   header at all. */
.pricing-title { font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }

/* ---------- tier grid ---------- */
.pricing-grid {
  display: grid;
  /* Two tiers since Free was removed. Capped narrower than --maxw-mid so two
     cards do not stretch into slabs across a 1040px row. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

/* ---------- tier (flat panel) ---------- */
/* Two layers, the same recipe the creator cards and the support panel use: an
   accent wash falling off the top edge, over a near-solid base.

   These were plain white overlays (--surface at 3.2%, --surface-2 at 5.5%) and
   they looked it: a white film over a near-black page turns grey, so the two
   tiers read as grey boxes on a blue page, and the only thing separating
   Standard from Premium was two percent of white. The base stops the card
   reading as a hole in the background; the wash puts it in the same colour
   family as the rest of the page, and the difference in wash strength is what
   now separates the two tiers. */
.pricing-tier {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 22px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(122,197,240,.05) 0%, rgba(122,197,240,0) 42%),
    rgba(13, 18, 28, .92);
  transition: border-color var(--t) var(--e-out), background var(--t) var(--e-out);
}
.pricing-tier:hover {
  border-color: rgba(122,197,240,.30);
  background:
    linear-gradient(180deg, rgba(122,197,240,.085) 0%, rgba(122,197,240,0) 42%),
    rgba(16, 22, 34, .95);
}

/* Premium: a visibly stronger wash and an accent hairline. Still flat, still
   no glow and no glass, so the emphasis comes from colour depth rather than
   from a light source the rest of the page does not have. */
.pricing-featured {
  border-color: rgba(122,197,240,.34);
  background:
    linear-gradient(180deg, rgba(122,197,240,.13) 0%, rgba(122,197,240,.02) 55%),
    rgba(15, 21, 33, .94);
}
.pricing-featured:hover {
  border-color: rgba(122,197,240,.48);
  background:
    linear-gradient(180deg, rgba(122,197,240,.17) 0%, rgba(122,197,240,.03) 55%),
    rgba(17, 24, 37, .96);
}

/* ---------- plan name row ---------- */
.pricing-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* "Most popular": a quiet mono tag, no box, no icon. Premium only. */
.pricing-pop {
  font-family: var(--font-price);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--accent);
}

/* ---------- price: the data face ---------- */
.pricing-price { display: flex; align-items: baseline; gap: 2px; margin-top: 10px; white-space: nowrap; }
.pricing-cur, .pricing-amt, .pricing-cents {
  font-family: var(--font-price);
  font-variant-numeric: tabular-nums lining-nums;
}
.pricing-cur { align-self: flex-start; margin-top: 6px; font-size: 19px; font-weight: 600; color: var(--text-dim); }
.pricing-amt { font-size: clamp(38px, 4.8vw, 48px); font-weight: 700; line-height: 1; letter-spacing: -0.035em; color: var(--text); }
.pricing-cents { align-self: flex-start; margin-top: 6px; font-size: 19px; font-weight: 700; color: var(--text-dim); }
.pricing-per {
  margin-left: 8px; align-self: center;
  font-family: var(--font-price);
  font-size: 11px; font-weight: 600; letter-spacing: normal;
  color: var(--text-mute);
}

/* Premium price is the one accent number in the section */
.pricing-featured .pricing-cur,
.pricing-featured .pricing-amt,
.pricing-featured .pricing-cents { color: var(--accent); }

/* ---------- who it's for ----------
   Sits directly under the price now that the per-card billing note is gone:
   "one-time" is stated by the section title and the payment strip, so repeating
   it twice more inside the cards was noise. A slightly wider gap
   than the one above the price, because it is falling away from a 48px number. */
.pricing-who { margin-top: 16px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--text); }

/* the honest headline number for the tier: real counts, never rounded up.
   A hairline separates it from the copy so it reads as a spec, not a sentence. */
.pricing-count {
  margin-top: 14px;
  margin-bottom: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-price);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 12.5px; letter-spacing: normal; line-height: 1.4;
  color: var(--text-mute);
}
.pricing-count-n { font-size: 14px; font-weight: 700; color: var(--text); }
.pricing-featured .pricing-count-n { color: var(--blue-200); }

/* CTA pinned to the bottom so both cards' buttons align */
.pricing-cta { margin-top: auto; }

/* ---------- payment methods strip (mono, no boxes, no icons) ---------- */
.pricing-pay {
  margin: clamp(24px, 2.8vw, 34px) auto 0;
  text-align: center;
  font-family: var(--font-price);
  font-variant-numeric: tabular-nums;
  font-size: 12px; letter-spacing: normal;
  color: var(--text-mute);
  line-height: 1.7;
}
.pricing-pay .pricing-mid { color: var(--text-faint); margin: 0 9px; }
/* keeps "One-time payment" whole: without it the line splits at the hyphen on a
   narrow phone. See the note in the section file before adding more of these. */
.pricing-payi { white-space: nowrap; }

/* ============================================================
   RESPONSIVE  (ladder: 980 / 820 / 620 / 480)
   ============================================================ */
@media (max-width: 980px) {
  .pricing-grid { gap: 14px; }
}
/* big price cards get cramped before they get small: stack them */
@media (max-width: 820px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; gap: 14px; }
}
@media (max-width: 620px) {
  .pricing-pay .pricing-mid { margin: 0 7px; }
}
@media (max-width: 480px) {
  .pricing-tier { padding: 20px 18px; }
}

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


/* ============================================================
   Card anatomy (2026-08-02): icon, name, price, one-time, rule,
   checklist, action pinned to the floor. The list is the point:
   a buyer wants to see what they get, and two cards of different
   list lengths must still line their buttons up, which is what
   margin-top:auto on the CTA does inside a flex column.
   ============================================================ */
.pricing-tier {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

/* 46px hairline tile, the same idiom the features cards use. */
.pricing-ic {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-dim);
}
.pricing-ic svg { width: 22px; height: 22px; }
.pricing-ic-accent { color: var(--accent); border-color: rgba(122,197,240,.35); }

.pricing-name {
  margin-top: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim);
}

.pricing-price { margin-top: 10px; }

.pricing-once {
  margin-top: 6px;
  font-size: 13px; color: var(--text-mute);
}

/* The rule lives on the list, not as its own element, so there is one fewer
   node and the gap above it cannot drift from the gap below. */
.pricing-list {
  width: 100%; margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--hairline);
  list-style: none;
  display: grid; gap: 11px;
  text-align: left;
}
/* Exactly two children per row: the tick and ONE span wrapping all the text.
   Leaving the text as bare nodes beside a <b> makes each of them its own grid
   item, and a 2-column grid then wraps "95 / of / 199 / optimizations" down four
   lines. The wrapper in the markup is load bearing, not decoration. */
.pricing-list li {
  display: grid; grid-template-columns: 15px 1fr; gap: 10px; align-items: start;
  font-size: 14px; line-height: 1.45; color: var(--text-dim);
}
.pricing-list li b { color: var(--text); font-weight: 650; }
.pricing-list svg {
  width: 15px; height: 15px; margin-top: 3px;
  color: var(--accent);
}

/* margin-top:auto is what aligns the two buttons when the lists differ in length */
.pricing-cta { margin-top: auto; }
.pricing-list + .pricing-cta { margin-top: 26px; }

/* "Most popular" sits ON the featured card's top border. */
.pricing-featured { position: relative; }
.pricing-pop {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 5px 13px; border-radius: var(--r-pill);
  background: var(--accent-strong); color: var(--on-accent);
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .pricing-list li { font-size: 13.5px; }
}