/* ==========================================================================
   SIGMA SCANNER — pricing.css
   §9 Pricing · one real plan, styled like a modern SaaS pricing page.

   ---------------------------------------------------------------------------
   WHY ONE CARD, NOT THREE
   ---------------------------------------------------------------------------
   data/pricing.json's section copy is explicit: "There is one product, so
   there is one price. No crippled starter tier, no invented enterprise
   plan." The premium-pricing-page feel the brief asked for comes from
   typography, the toggle, the grouped checklist and the ledger beside it —
   not from manufacturing tiers that don't exist. The "Recommended" ribbon
   is honest here: it is trivially true of the only plan, not a comparison
   against invented alternatives.

   ---------------------------------------------------------------------------
   THE TOGGLE SWITCHES BETWEEN TWO REAL PRICES
   ---------------------------------------------------------------------------
   There is no monthly plan — the client confirmed annual-only, ₹15,000 for
   the first year, payable in full or as 3 installments of ₹5,000. Both
   toggle states are real numbers describing the same ₹15,000, not a plan
   comparison. Lifelong access is quote-only and rendered as a link, never
   as an invented price. See js/pricing.js for the switch logic and
   index.html's section comment for the full reasoning.

   ---------------------------------------------------------------------------
   LAYER DISCIPLINE
   ---------------------------------------------------------------------------
   Base rules and every responsive override live together in
   @layer components — an override left in @layer layout has silently lost
   to a components-layer base rule twice already in this project, regardless
   of specificity or matching media query.
   ========================================================================== */

@layer components {

  /* ========================================================================
     SECTION SHELL
     ======================================================================== */
  .pricing { position: relative; isolation: isolate; overflow: clip; }

  .pricing__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(55% 50% at 92% 8%,  rgb(16 160 80 / .08) 0%, rgb(16 160 80 / 0) 70%),
      radial-gradient(50% 45% at 4% 96%,  rgb(34 197 94 / .06) 0%, rgb(34 197 94 / 0) 70%);
  }

  .pricing .ss-container { position: relative; z-index: 1; }

  .pricing__header { max-inline-size: 560px; margin-block-end: var(--sp-11); }

  .pricing__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: var(--ink-900);
    margin-block: var(--sp-3) var(--sp-4);
  }

  .pricing__intro { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-500); }

  /* ========================================================================
     BOARD — card + side column
     ======================================================================== */
  .pricing__board {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
  }

  /* ========================================================================
     THE CARD
     ======================================================================== */
  .pricing-card {
    position: relative;
    padding: var(--sp-8) var(--sp-7);
    border-radius: var(--r-2xl);
    background: var(--paper);
    border: 2px solid var(--signal-200);
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur-base) var(--ease-out-cubic), box-shadow var(--dur-base) var(--ease-out-cubic);
  }
  @media (hover: hover) and (pointer: fine) {
    .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hero); }
  }

  .pricing-card__ribbon {
    position: absolute;
    inset-block-start: calc(-1 * var(--sp-4));
    inset-inline-start: var(--sp-7);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
    background: var(--signal-600);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    isolation: isolate;
  }
  .pricing-card__ribbon .ss-icon { inline-size: 14px; block-size: 14px; }

  /* Shimmer sweep — a T3 delight, so it only ever runs once GSAP is
     confirmed present, matching every other continuous CSS loop in this
     project (see why.css's gear/AI icons for the same gate). */
  .pricing-card__ribbon::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inline-size: 40%;
    background: linear-gradient(115deg, transparent, rgb(255 255 255 / .55), transparent);
    transform: translateX(-220%);
  }
  [data-motion="full"] .pricing-card__ribbon::after {
    animation: pricing-shimmer 4.5s ease-in-out infinite;
  }

  /* ---------- HEAD: name, toggle, price, CTA ----------------------------- */
  .pricing-card__head { display: flex; flex-direction: column; gap: var(--sp-5); margin-block-end: var(--sp-8); }

  .pricing-card__name-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

  .pricing-card__name {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    color: var(--ink-900);
  }

  .pricing-card__trial-badge {
    padding: 3px var(--sp-3);
    border-radius: var(--r-full);
    background: var(--signal-050);
    color: var(--signal-700);
    font-size: var(--fs-xs);
    font-weight: 600;
  }

  /* ---------- TOGGLE ------------------------------------------------------ */
  .pricing-toggle {
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    padding: 4px;
    border-radius: var(--r-full);
    background: var(--ink-100);
  }

  .pricing-toggle__thumb {
    position: absolute;
    inset-block: 4px;
    inset-inline-start: 4px;
    inline-size: calc(50% - 4px);
    border-radius: var(--r-full);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out-cubic);
  }
  .pricing-toggle[data-billing="installments"] .pricing-toggle__thumb { transform: translateX(100%); }

  .pricing-toggle__btn {
    position: relative;
    z-index: 1;
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-500);
    transition: color var(--dur-fast) var(--ease-out-quad);
  }
  .pricing-toggle__btn[aria-pressed="true"] { color: var(--ink-900); }

  /* ---------- PRICE -------------------------------------------------------
     Both panels ship in the HTML with real numbers; only the CSS class
     below decides which shows, with no JS required at all — "pay in full"
     is the one visible by default. js/pricing.js only toggles which panel
     carries .is-active and, when GSAP is present, adds a crossfade on top
     of this instant swap. */
  .pricing-price { min-block-size: 92px; display: flex; align-items: center; }

  .pricing-price__panel { display: none; flex-direction: column; gap: var(--sp-2); }
  .pricing-price__panel.is-active { display: flex; }

  .pricing-price__row { display: flex; align-items: baseline; gap: var(--sp-2); }

  .pricing-price__currency {
    font-family: var(--font-mono);
    font-size: var(--fs-h4);
    font-weight: 600;
    color: var(--ink-600);
  }
  .pricing-price__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-bold);
    font-size: clamp(2.5rem, 1.8rem + 3vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink-900);
  }
  .pricing-price__period { font-size: var(--fs-body); color: var(--ink-400); }
  .pricing-price__sub { font-size: var(--fs-xs); color: var(--ink-400); }

  .pricing-card__lifelong { font-size: var(--fs-sm); color: var(--ink-500); }
  .pricing-card__lifelong a {
    color: var(--signal-700);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .18em;
  }
  .pricing-card__lifelong a:hover { color: var(--ink-900); }

  .pricing-card__trial-note { font-size: var(--fs-sm); color: var(--ink-400); }

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

  /* ---------- INCLUDES ----------------------------------------------------- */
  .pricing-card__includes {
    padding-block: var(--sp-7);
    border-block: 1px solid var(--ink-150);
    margin-block-end: var(--sp-6);
  }

  .pricing-card__includes-label {
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--ink-400);
    margin-block-end: var(--sp-5);
  }

  .pricing-card__groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .pricing-group { display: flex; flex-direction: column; gap: var(--sp-3); }

  .pricing-group__label {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--signal-700);
  }

  .pricing-group__list { display: flex; flex-direction: column; gap: var(--sp-2); }
  .pricing-group__list li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--ink-600);
  }
  .pricing-group__list .ss-icon {
    inline-size: 16px; block-size: 16px;
    flex: none;
    padding: 2px;
    border-radius: 50%;
    background: var(--signal-050);
    color: var(--signal-600);
  }

  /* ---------- EXTRAS -------------------------------------------------------- */
  .pricing-card__extras { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .pricing-card__extras li {
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
    background: var(--ink-050);
    color: var(--ink-600);
    font-size: var(--fs-xs);
    font-weight: 600;
  }

  /* ========================================================================
     SIDE COLUMN
     ======================================================================== */
  .pricing-side { display: flex; flex-direction: column; gap: var(--sp-6); }

  .pricing-replaces,
  .pricing-contact {
    padding: var(--sp-6) var(--sp-7);
    border-radius: var(--r-xl);
    background: var(--ink-050);
    border: 1px solid var(--ink-150);
  }

  .pricing-replaces__title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h4);
    color: var(--ink-900);
    margin-block-end: var(--sp-2);
  }
  .pricing-replaces__note { font-size: var(--fs-sm); color: var(--ink-500); margin-block-end: var(--sp-5); }

  .pricing-replaces__list { display: flex; flex-direction: column; }
  .pricing-replaces__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-3);
    border-block-start: 1px solid var(--ink-150);
  }
  .pricing-replaces__row:first-child { border-block-start: none; }
  .pricing-replaces__label { font-size: var(--fs-sm); color: var(--ink-600); }
  .pricing-replaces__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--ink-900);
    white-space: nowrap;
  }

  .pricing-contact__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); margin-block-end: var(--sp-4); }
  .pricing-contact__row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

  .pricing-legal {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ink-400);
  }
  .pricing-legal a { color: var(--ink-500); text-decoration: underline; text-underline-offset: .18em; }
  .pricing-legal a:hover { color: var(--signal-700); }

  /* ========================================================================
     MOTION
     ======================================================================== */
  @keyframes pricing-shimmer {
    0%, 15% { transform: translateX(-220%); }
    45%, 100% { transform: translateX(220%); }
  }

  /* ========================================================================
     RESPONSIVE — all in @layer components, see file header
     ======================================================================== */
  @media (min-width: 640px) {
    .pricing-card__groups { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 1024px) {
    .pricing__board {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
      gap: var(--sp-9);
      align-items: start;
    }
    .pricing-card { padding: var(--sp-9) var(--sp-9); }
  }
}