/* ==========================================================================
   SIGMA SCANNER — assets/css/pricing-page.css
   Pricing-page styles. Loaded only by pricing.html. Classes are pp-*
   so they can never collide with css/pricing.css (index.html's §9).

   Built on existing tokens only. The Premium spotlight's main column sits
   on the site's own [data-theme="dark"] scope (style.css), which remaps the
   ink/paper tokens; its payment panel sits outside that scope on purpose,
   so it keeps the light ones.

   Everything lives in @layer components, responsive overrides included, per
   the layer-discipline rule every stylesheet in this project documents.
   ========================================================================== */

@layer components {

  /* ========================================================================
     1 · HERO
     ======================================================================== */
  .pp-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    /* Kept tight on purpose: the plans are what this page is for, and Premium sits in that row, so
       the heading block must not push them down the screen. */
    padding-block: calc(var(--nav-h) + var(--sp-4)) var(--sp-7);
    text-align: center;
  }
  .pp-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(50% 60% at 50% 0%, rgb(16 160 80 / .09) 0%, rgb(16 160 80 / 0) 70%),
      radial-gradient(40% 45% at 96% 90%, rgb(34 197 94 / .05) 0%, rgb(34 197 94 / 0) 70%);
  }

  .pp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px var(--sp-4);
    border: 1px solid var(--signal-100);
    border-radius: var(--r-full);
    background: var(--signal-050);
    color: var(--signal-700);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
  }
  .pp-hero__badge::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--r-full);
    background: var(--signal-500);
  }

  /* Wide enough to sit on one line when the screen allows it (balanced across two otherwise),
     instead of always breaking into two tall lines. */
  .pp-hero__title {
    max-inline-size: 60ch;
    margin: var(--sp-4) auto 0;
    font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: var(--ls-h1);
    text-wrap: balance;
    color: var(--ink-900);
  }

  .pp-hero__lead {
    max-inline-size: 56ch;
    margin: var(--sp-3) auto 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--ink-500);
  }

  .pp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-6);
    margin-block-start: var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--ink-600);
  }
  .pp-hero__meta li { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .pp-hero__meta .ss-icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--signal-600); stroke-width: 2; }

  /* Names the fourth plan in the hero itself — on a phone the cards start below the fold, and on
     any screen "three plans" is the first impression unless something says otherwise. */
  .pp-hero__premium {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    max-inline-size: 100%;
    text-align: start;
    gap: var(--sp-2);
    margin-block-start: var(--sp-4);
    padding: 8px var(--sp-5);
    border-radius: var(--r-full);
    background: var(--deep-900);
    color: var(--deep-fg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-fast) var(--ease-out-quad), box-shadow var(--dur-fast) var(--ease-out-quad);
  }
  .pp-hero__premium .ss-icon { flex: none; inline-size: 14px; block-size: 14px; color: var(--signal-400); }
  .pp-hero__premium > span[aria-hidden] { flex: none; }
  .pp-hero__premium strong { color: var(--signal-300); font-weight: var(--fw-bold); }
  .pp-hero__premium:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }

  /* ========================================================================
     2 · PLAN CARDS
     ======================================================================== */
  .pp-plans { padding-block-end: var(--section-y-dense); }

  .pp-plans__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .pp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding: var(--sp-7) var(--sp-6);
    border: 1px solid var(--ink-150);
    border-radius: var(--r-xl);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    transition:
      transform var(--dur-base) var(--ease-out-cubic),
      box-shadow var(--dur-base) var(--ease-out-cubic),
      border-color var(--dur-base) var(--ease-out-cubic);
  }
  @media (hover: hover) and (pointer: fine) {
    .pp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--ink-200); }
  }

  .pp-card__head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-block-end: var(--sp-5);
    border-block-end: 1px solid var(--ink-150);
    /* The price sizes itself from THIS width (cqi below), i.e. from the card, not the screen — the
       cards are 4-up on a laptop and 1-up on a phone, so a screen-based size either wraps the
       five-digit Premium price or leaves the others too small. Inline-size containment only, so
       the header's height is still set by its content. */
    container-type: inline-size;
  }

  /* Badge above the name (column-reverse keeps the name first in reading
     order): side by side, "Smart Investor Plan" wrapped and pushed its
     price out of line with the other three. */
  .pp-card__name-row {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .pp-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--ink-900);
  }

  .pp-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    padding: 3px var(--sp-3);
    /* Every badge carries a border (transparent unless a variant colours it), so a bordered one
       like "Tier 2" is not 2px taller than the rest and the plan names below stay on one line. */
    border: 1px solid transparent;
    border-radius: var(--r-full);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .pp-badge .ss-icon { inline-size: 12px; block-size: 12px; }
  .pp-badge--current { background: var(--signal-100); color: var(--signal-700); }
  .pp-badge--muted { border: 1px solid var(--ink-200); background: var(--ink-050); color: var(--ink-500); }
  .pp-badge--popular { background: var(--signal-600); color: var(--paper); }
  .pp-badge--outline { border: 1px solid rgb(232 240 235 / .22); color: var(--deep-fg); }
  .pp-badge--premium { background: var(--signal-400); color: var(--deep-900); }

  .pp-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
    margin-block-start: var(--sp-3);
    color: var(--ink-900);
  }
  .pp-price__cur { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
  .pp-price__value {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.9rem + 1vw, 2.75rem);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.03em;
  }
  .pp-price__period { margin-inline-start: var(--sp-1); font-size: var(--fs-sm); color: var(--ink-400); white-space: nowrap; }

  /* In a plan card only (the spotlight's price keeps its own size): 13% of the card's width, so
     "₹15,000 + GST / year" fits on one line whether the card is 4-up or full width. */
  .pp-card__head .pp-price__value { font-size: clamp(1.625rem, 13cqi, 2.75rem); }
  .pp-price__note { margin-block-start: var(--sp-1); font-size: var(--fs-xs); color: var(--ink-400); }

  .pp-card__desc { font-size: var(--fs-sm); color: var(--ink-500); }
  .pp-card__tier { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-400); }
  .pp-card__highlight { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--signal-700); }

  .pp-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .pp-inherits {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--ink-150);
    border-radius: var(--r-md);
    background: var(--ink-050);
  }
  .pp-inherits__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ink-600);
  }
  .pp-inherits .ss-icon { inline-size: 14px; block-size: 14px; color: var(--signal-600); stroke-width: 2; }
  .pp-inherits__detail { font-size: var(--fs-xs); color: var(--ink-400); }

  .pp-card__label {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--signal-700);
  }

  .pp-card__features {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--ink-600);
  }
  .pp-card__features li { position: relative; padding-inline-start: var(--sp-5); }
  .pp-card__features li::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    inset-block-start: .6em;
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--r-full);
    background: var(--signal-500);
  }

  .pp-taste {
    padding: var(--sp-4);
    border: 1px dashed var(--signal-200);
    border-radius: var(--r-md);
    background: var(--signal-050);
  }
  .pp-taste__title {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--signal-700);
  }
  .pp-taste__text { margin-block-start: var(--sp-2); font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-600); }

  .pp-card__cta { inline-size: 100%; }

  /* ---------- Smart Investor — a step up from Beginner, never past Premium */
  .pp-card--smart { border-color: var(--signal-200); box-shadow: var(--shadow-md); }
  .pp-card--smart::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: var(--sp-6);
    block-size: 3px;
    border-radius: 0 0 var(--r-full) var(--r-full);
    background: var(--signal-500);
  }

  /* ---------- Premium — the fourth card. Sits on the site's [data-theme="dark"] scope (set in
     the markup), so it is the one dark card in a row of light ones: that contrast, not extra
     copy, is what makes the top of the ladder visible at a glance. The scope already paints
     --deep-900 as the background colour, so only a glow is layered on here. */
  .pp-card--premium {
    border-color: rgb(74 222 128 / .35);
    background-image: radial-gradient(90% 55% at 0% 0%, rgb(34 197 94 / .18) 0%, rgb(34 197 94 / 0) 65%);
    box-shadow: var(--shadow-md), 0 0 0 1px rgb(74 222 128 / .12);
  }
  @media (hover: hover) and (pointer: fine) {
    .pp-card--premium:hover { border-color: rgb(74 222 128 / .6); }
  }
  .pp-card--premium .pp-card__features li::before { background: var(--signal-400); }
  .pp-card--premium .pp-inherits { border-color: rgb(74 222 128 / .22); background: rgb(34 197 94 / .08); }
  .pp-card--premium .pp-card__highlight { color: var(--signal-300); }

  /* Secondary action under the Premium button — quiet, so the button stays the one loud thing. */
  .pp-card__foot { display: flex; flex-direction: column; gap: var(--sp-3); }
  .pp-card__more {
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--signal-300);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgb(74 222 128 / .4);
  }
  .pp-card__more:hover { color: var(--signal-200); text-decoration-color: currentColor; }

  /* ========================================================================
     PREMIUM — broker strip and CTA, used by the spotlight
     ======================================================================== */
  .pp-brokers { display: flex; flex-direction: column; gap: var(--sp-2); }
  .pp-brokers__label {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--deep-fg-muted);
  }
  .pp-brokers__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .pp-brokers__list li {
    padding: 4px var(--sp-3);
    border: 1px solid rgb(232 240 235 / .16);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--deep-fg);
  }

  .pp-btn-premium {
    inline-size: 100%;
    background: var(--signal-400);
    color: var(--deep-900);
    font-weight: var(--fw-bold);
    box-shadow: 0 12px 28px -12px rgb(34 197 94 / .6);
    transition:
      background-color var(--dur-fast) var(--ease-out-quad),
      box-shadow var(--dur-fast) var(--ease-out-quad),
      transform var(--dur-fast) var(--ease-out-quad);
  }
  .pp-btn-premium:hover {
    background: var(--signal-300);
    box-shadow: 0 16px 32px -12px rgb(34 197 94 / .7);
    transform: translateY(-1px);
  }

  /* ========================================================================
     PAYMENT SELECTOR — native radios, so keyboard and screen readers get a
     real radio group for free; the input covers its label, invisibly.
     ======================================================================== */
  .pp-pay { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  .pp-pay__legend {
    margin-block-end: var(--sp-2);
    padding: 0;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ink-400);
  }

  .pp-pay__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--ink-150);
    border-radius: var(--r-lg);
    background: var(--ink-100);
  }

  .pp-pay__option { position: relative; display: flex; cursor: pointer; }
  .pp-pay__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .pp-pay__box {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-block-size: 56px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    text-align: center;
    color: var(--ink-500);
    transition:
      background-color var(--dur-fast) var(--ease-out-quad),
      box-shadow var(--dur-fast) var(--ease-out-quad),
      color var(--dur-fast) var(--ease-out-quad);
  }
  .pp-pay__title { font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.3; color: var(--signal-700); }
  /* Amount AND tax on one line: "₹15,000 + GST", "₹5,000 × 3 + GST". Never allowed to break. */
  .pp-pay__sub { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* Both options take two rows (title / amount) from the selector's own grid, so the amounts
     start on the same line even when one title wraps ("3 monthly instalments" is two lines in a
     narrow panel, "Pay once" is one) instead of each box centring its own content. Titles sit at
     the bottom of their row, so a short one stays level with the last line of its neighbour. */
  @supports (grid-template-rows: subgrid) {
    .pp-pay__options { grid-template-rows: auto auto; }
    .pp-pay__option { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
    .pp-pay__box { display: grid; grid-row: span 2; grid-template-rows: subgrid; justify-items: center; }
    .pp-pay__title { align-self: end; }
    .pp-pay__sub { align-self: start; }
  }

  .pp-pay__option:hover .pp-pay__box { color: var(--ink-900); }
  .pp-pay__input:checked + .pp-pay__box {
    background: var(--paper);
    color: var(--ink-900);
    box-shadow: var(--shadow-sm);
  }
  .pp-pay__input:checked + .pp-pay__box .pp-pay__title { color: var(--ink-900); }
  .pp-pay__input:focus-visible + .pp-pay__box { box-shadow: var(--shadow-focus); }

  /* ========================================================================
     3 · PREMIUM SPOTLIGHT — dark main column + a light payment panel. The
     panel sits outside the dark scope so it keeps the light tokens.
     ======================================================================== */
  .pp-spot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: clip;
    border: 1px solid rgb(74 222 128 / .25);
    border-radius: var(--r-2xl);
    background:
      radial-gradient(90% 120% at 0% 0%, rgb(34 197 94 / .12) 0%, rgb(34 197 94 / 0) 55%),
      var(--deep-900);
    box-shadow: var(--shadow-hero);
  }

  .pp-spot__main { padding: var(--sp-8) var(--sp-6); background-color: transparent; }

  .pp-spot__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

  .pp-spot__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--signal-300);
  }
  .pp-spot__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 22px;
    block-size: 22px;
    border: 1px solid rgb(74 222 128 / .4);
    border-radius: var(--r-sm);
    background: rgb(34 197 94 / .18);
  }
  .pp-spot__star .ss-icon { inline-size: 12px; block-size: 12px; }

  .pp-spot__title {
    margin-block-start: var(--sp-4);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    color: var(--deep-fg);
  }
  .pp-spot__lead {
    max-inline-size: 56ch;
    margin-block-start: var(--sp-3);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--deep-fg-muted);
  }

  .pp-spot__inherits {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block-start: var(--sp-6);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid rgb(232 240 235 / .14);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--deep-fg);
  }
  .pp-spot__inherits .ss-icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--signal-400); stroke-width: 2; }

  .pp-spot__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-block-start: var(--sp-6);
  }
  .pp-spot__feature {
    padding: var(--sp-5);
    border: 1px solid rgb(232 240 235 / .10);
    border-radius: var(--r-lg);
    background: rgb(232 240 235 / .03);
    transition:
      border-color var(--dur-base) var(--ease-out-cubic),
      background-color var(--dur-base) var(--ease-out-cubic);
  }
  .pp-spot__feature:hover { border-color: rgb(74 222 128 / .35); background: rgb(34 197 94 / .06); }
  .pp-spot__feature .ss-icon { inline-size: var(--icon-md); block-size: var(--icon-md); color: var(--signal-400); }
  .pp-spot__feature-title {
    margin-block-start: var(--sp-3);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    letter-spacing: normal;
    color: var(--deep-fg);
  }
  .pp-spot__feature-text { margin-block-start: var(--sp-1); font-size: var(--fs-xs); line-height: 1.55; color: var(--deep-fg-muted); }

  .pp-spot__main .pp-brokers {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin-block-start: var(--sp-7);
    padding-block-start: var(--sp-6);
    border-block-start: 1px solid rgb(232 240 235 / .10);
  }

  .pp-spot__panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    margin: 0 var(--sp-4) var(--sp-4);
    padding: var(--sp-6);
    border-radius: var(--r-xl);
    background: var(--paper);
    box-shadow: var(--shadow-lg);
  }

  .pp-spot__checks {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--ink-150);
    border-radius: var(--r-lg);
    background: var(--ink-050);
    font-size: var(--fs-sm);
    color: var(--ink-600);
  }
  .pp-spot__checks li { display: flex; align-items: flex-start; gap: var(--sp-2); }
  .pp-spot__checks .ss-icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-block-start: 2px; color: var(--signal-600); stroke-width: 2; }

  .pp-spot__foot { font-size: var(--fs-xs); line-height: 1.5; text-align: center; color: var(--ink-400); }

  /* Book-a-demo prompt between the spotlight and the comparison table. */
  .pp-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    margin-block-start: var(--section-y-dense);
    text-align: center;
  }
  .pp-demo__text { font-size: var(--fs-lead); color: var(--ink-600); }

  /* ========================================================================
     SHARED SECTION SHELL
     ======================================================================== */
  /* No bottom padding: the demo prompt inside ends this section, and the
     comparison section's own top padding supplies the gap below it. */
  /* Jump target for the hero link and the Premium card's links — clear the fixed nav on arrival. */
  .pp-spot-section { padding-block-end: 0; scroll-margin-block-start: calc(var(--nav-h) + var(--sp-4)); }
  .pp-section { padding-block: var(--section-y-dense); }
  .pp-section__head { max-inline-size: 640px; margin-block-end: var(--sp-7); }
  .pp-section__title {
    margin-block-start: var(--sp-3);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    color: var(--ink-900);
  }

  /* ========================================================================
     4 · COMPARISON — the wrapper scrolls, never the page
     ======================================================================== */
  .pp-compare {
    overflow-x: auto;
    border: 1px solid var(--ink-150);
    border-radius: var(--r-xl);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    -webkit-overflow-scrolling: touch;
  }
  .pp-compare:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

  /* Fixed layout: the four plan columns share the width equally instead of
     the Free column growing to fit its longest pill. */
  .pp-compare__table {
    inline-size: 100%;
    min-inline-size: 980px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
  }
  .pp-compare__table th,
  .pp-compare__table td {
    padding: var(--sp-4) var(--sp-5);
    border-block-end: 1px solid var(--ink-150);
    text-align: center;
    vertical-align: middle;
    color: var(--ink-600);
  }
  .pp-compare__table thead th { background: var(--ink-050); vertical-align: bottom; }

  /* Sticky so the row label stays readable while the plans scroll by. */
  .pp-compare__table .pp-compare__feature {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    min-inline-size: 220px;
    background: var(--paper);
    text-align: start;
    font-weight: var(--fw-semibold);
    color: var(--ink-800);
  }
  .pp-compare__note {
    display: block;
    margin-block-start: 2px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    color: var(--ink-400);
  }

  /* Group header row. The label is sticky inside its full-width cell so it
     stays in view while the table scrolls sideways on small screens. */
  .pp-compare__group th {
    padding-block: var(--sp-3);
    background: var(--ink-050);
    text-align: start;
  }
  .pp-compare__group span {
    position: sticky;
    inset-inline-start: var(--sp-5);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ink-500);
  }

  .pp-tag {
    display: inline-block;
    max-inline-size: 240px;
    padding: 4px var(--sp-3);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    background: var(--paper);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    color: var(--ink-600);
  }
  .pp-tag--good { border-color: var(--signal-200); background: var(--signal-050); font-weight: var(--fw-bold); color: var(--signal-700); }
  .pp-tag--locked { border-color: var(--ink-150); background: var(--ink-100); color: var(--ink-400); }

  .pp-compare__table tfoot th,
  .pp-compare__table tfoot td { border-block-end: 0; background: var(--ink-050); }
  .pp-compare__table tfoot td.is-premium { background: var(--deep-900); }
  .pp-compare .pp-btn-premium { inline-size: auto; }
  .pp-compare__cta { white-space: nowrap; }

  .pp-compare__notes {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-inline-size: 78ch;
    margin-block-start: var(--sp-5);
    font-size: var(--fs-xs);
    line-height: 1.65;
    color: var(--ink-500);
  }
  .pp-compare__notes p:first-child { font-weight: var(--fw-semibold); color: var(--ink-700); }
  .pp-compare__table thead .pp-compare__feature {
    inline-size: 26%;
    background: var(--ink-050);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ink-400);
  }

  .pp-compare__plan-name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--ink-900);
  }
  .pp-compare__plan-price { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-400); }

  .pp-compare__table td.is-premium {
    background: var(--signal-050);
    font-weight: var(--fw-semibold);
    color: var(--signal-700);
  }
  .pp-compare__table thead th.is-premium { background: var(--deep-900); }
  .pp-compare__table thead th.is-premium .pp-compare__plan-name { color: var(--deep-fg); }
  .pp-compare__table thead th.is-premium .pp-compare__plan-price { color: var(--signal-300); }

  .pp-no { color: var(--ink-300); }

  /* ========================================================================
     5 · FAQ — .faq-list/.faq-item come from assets/css/faq.css
     ======================================================================== */
  .pp-faq__layout { display: grid; gap: var(--sp-7); }
  .pp-faq__help { margin-block-start: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-500); }
  .pp-faq__help a,
  .pp-faq .faq-item__panel a {
    color: var(--signal-700);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ========================================================================
     6 · FINAL CTA
     ======================================================================== */
  .pp-final { padding-block-end: var(--section-y-default); }
  .pp-final__box {
    padding: var(--sp-9) var(--sp-6);
    border: 1px solid var(--signal-100);
    border-radius: var(--r-2xl);
    background:
      radial-gradient(60% 80% at 50% 0%, rgb(16 160 80 / .10) 0%, rgb(16 160 80 / 0) 70%),
      var(--signal-050);
    text-align: center;
  }
  .pp-final__title {
    max-inline-size: 22ch;
    margin-inline: auto;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    color: var(--ink-900);
  }
  /* margin-inline:auto — style.css caps every <p> at --measure, so without
     it the capped box sits left and the centred text looks off-centre. */
  .pp-final__lead { margin: var(--sp-3) auto 0; font-size: var(--fs-lead); color: var(--ink-500); }
  .pp-final__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-block-start: var(--sp-7);
  }
  .pp-final__actions .ss-btn { inline-size: 100%; }

  .pp-noscript { padding: var(--sp-6); text-align: center; color: var(--ink-500); }

  /* ========================================================================
     RESPONSIVE
     ======================================================================== */
  @media (max-width: 400px) {
    .pp-pay__options { grid-template-columns: 1fr; }
  }

  @media (min-width: 640px) {
    .pp-spot__grid { grid-template-columns: repeat(2, 1fr); }
    .pp-final__box { padding: var(--sp-10) var(--sp-8); }
    .pp-final__actions { flex-direction: row; justify-content: center; }
    .pp-final__actions .ss-btn { inline-size: auto; }
  }

  @media (min-width: 768px) {
    .pp-plans__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
    /* Three cards in two columns: centre the one left over (half a gap
       off 50% so it matches the other cards' width exactly). */
    .pp-plans__grid > :last-child:nth-child(odd) {
      grid-column: 1 / -1;
      justify-self: center;
      inline-size: calc(50% - var(--sp-3));
    }
    .pp-spot__main { padding: var(--sp-9) var(--sp-8); }
  }

  /* Four plans, so the grid stays 2 x 2 until there is room for four across. It used to switch to
     three columns here, which is what pushed the fourth plan onto a second row (and, before the
     Premium card existed, off the screen entirely). */
  @media (max-width: 767.98px) {
    /* A single column: Premium first, or it sits below three tall cards where nobody sees it. */
    .pp-card--premium { order: -1; }

    /* The hero's Premium pill, shrunk to a one-line chip: the long description is what made it a
       tall three-line block on a phone, and the Premium card is right below to say the rest. */
    .pp-hero__premium { margin-block-start: var(--sp-3); padding: 6px var(--sp-4); gap: var(--sp-1); font-size: .8125rem; }
    .pp-hero__premium-more { display: none; }
  }

  @media (min-width: 1280px) {
    .pp-plans__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
  }

  /* Each card takes three rows (header / body / action) FROM the grid instead of laying itself out,
     so those three parts start at the same height in every card of a row. Without this, a taller
     header in one card (the Premium card has an extra line) pushes its body and button lower than
     its neighbours'. Cards stay flex columns where subgrid is unsupported, and on a phone, where
     there is only one card per row and nothing to line up. */
  @supports (grid-template-rows: subgrid) {
    @media (min-width: 768px) {
      .pp-plans__grid > .pp-card {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
      }
      /* A stretched button would grow to fill a taller neighbour's action row. */
      .pp-plans__grid > .pp-card > .pp-card__cta,
      .pp-plans__grid > .pp-card > .pp-card__foot { align-self: start; }
    }
  }

  @media (min-width: 1024px) {
    .pp-spot { grid-template-columns: minmax(0, 1fr) 400px; }
    .pp-spot__main { padding: var(--sp-10) var(--sp-9); }
    .pp-spot__panel { align-self: center; margin: var(--sp-7) var(--sp-7) var(--sp-7) 0; padding: var(--sp-7); }
    .pp-faq__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--sp-10); }
  }
}