/* Pricing tab bar — bg rgba(255,255,255,0.5), padding 4, radius 12.
     Inter-tab gap intentionally 8px (Pixelbin product spec — overrides
     live's flush layout so One Time / Monthly / Annual / Enterprise
     each sit on their own pill). */
  .Tabs-module__tabs___D3XtZ {
    display: inline-flex;
    align-items: stretch;
    gap: var(--pb-space-8); /* 8px */
    background: var(--pb-color-alpha-white-50); /* frost 50% */
    padding: var(--pb-space-4); /* 4px */
    border-radius: var(--pb-radius-lg); /* 12px */
    backdrop-filter: var(--pb-blur-xs);
    -webkit-backdrop-filter: var(--pb-blur-xs);
  }

  /* Tab item: live measurements 5px/12px padding, 32px tall, 12px font,
     weight 400, color #222, radius 8px. */
  /* Live spec: Inter Display, 12px, weight 400, line-height 16.8px,
     color near #222, padding 5x12, radius 8, height 32.
     Selector uses `button.tabs__tab` so we beat DSProvider's
     `.ds-root button { font: inherit }` reset (specificity 0,0,1,1). */
  button.Tabs-module__tabs__tab___F7MBR,
  a.Tabs-module__tabs__tab___F7MBR {
    height: 2rem;
    padding: 5px var(--pb-space-12);
    border-radius: var(--pb-radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--pb-font-display);
    font-size: var(--pb-text-s);
    font-weight: var(--pb-weight-regular);
    line-height: 1.4;
    color: var(--pb-color-grey-90-inv);
    white-space: nowrap;
    transition: all var(--pb-transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pb-space-8);
    overflow: hidden;
  }

  .Tabs-module__tabs__tab___F7MBR:hover {
    /* Figma: frost 40% — closest token is alpha-white-35 (no 40% token exists) */
    background: var(--pb-color-alpha-white-35);
  }

  /* A11y — keyboard focus indicator (2026-04-18 audit) */
  .Tabs-module__tabs__tab___F7MBR:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
  }

  /* pixelbin.io/pricing parity: active tab is white pill, weight stays 400.
     Selector prefixed with `button.` so spec (0,0,1,1) matches the tab
     base rule and beats DSProvider's `.ds-root button { font: inherit }`
     reset; otherwise the inherit reset would null out font-size/lh. */
  button.Tabs-module__tabs__tab--active___DwIpC,
  a.Tabs-module__tabs__tab--active___DwIpC {
    background: var(--pb-surface-0);
    border-radius: var(--pb-radius-md);
    font-family: var(--pb-font-display);
    font-size: var(--pb-text-s);
    font-weight: var(--pb-weight-regular);
    line-height: 1.4;
    color: var(--pb-color-grey-90-inv);
  }

  /* Live "44% off" badge spec (measured 2026-05-03):
     bg #000 (pure black), color #FFF, font 11px / weight 500,
     padding 4px 6px, radius 8px, no margin. */
  .Tabs-module__tabs__badge___w2B13 {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-font-size-xs); /* 11px */
    font-weight: 500; /* live = 500 (was 400) */
    line-height: var(--pb-lh-xs); /* 14px */
    color: var(--pb-color-white);
    background: var(--pb-color-black); /* live = pure #000 (was #1A1A1A) */
    padding: var(--pb-space-4) var(--pb-space-6); /* live = 4/6 (was 4/8) */
    border-radius: var(--pb-radius-8); /* live = 8px (was 6) */
    white-space: nowrap;
  }

  /* Badge tab auto-sizes; keep asymmetric padding so badge has breathing room */
  .Tabs-module__tabs__tab___F7MBR:has(.Tabs-module__tabs__badge___w2B13) {
    width: auto;
    padding-left: var(--pb-space-12);
    padding-right: var(--pb-space-4); /* live: pl ~12px, pr ~4px */
  }

  /* Figma mobile (2035:39891): 358px total, tabs ~77px each, height 40px */
  @media (max-width: 767px) {
    .Tabs-module__tabs___D3XtZ {
      width: 100%;
      max-width: 358px; /* Figma: 358px */
    }
    .Tabs-module__tabs__tab___F7MBR {
      width: auto; /* Figma: ~77px auto, not fixed 116px */
      flex: 1; /* Fill equally */
      padding: var(--pb-space-8);
    }
    .Tabs-module__tabs__tab___F7MBR:has(.Tabs-module__tabs__badge___w2B13) {
      flex: none; /* Badge tab sizes to content */
    }
  }

/* ── MediaIncludeRow ─────────────────────── */
/* Shared icon + label horizontal row for PricingCard + PayAsYouGoCard + FeaturesBox.
   Figma: gap-6px (rounded to --pb-space-4), flex row, align-items-flex-start. */
.MediaIncludeRow-module__media-include-row___uzJkU {
    display: flex;
    align-items: flex-start;
    gap: var(--pb-space-4);
}

.MediaIncludeRow-module__media-include-row__icon___W3rPo {
    width: var(--pb-dim-14);
    height: var(--pb-dim-14);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Figma: Inter Regular 12px, lh 16px, text-default */
.MediaIncludeRow-module__media-include-row__label___Hl8UO {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-s);
    font-weight: var(--pb-weight-regular);
    line-height: var(--pb-lh-s);
    color: var(--pb-text-default);
}

/* ── FeaturesBox ─────────────────────────── */
/* Figma: bg #F6FAE5, p-12px, rounded-8px, gap-8px
   Extracted from PricingCard + PayAsYouGoCard 2026-04-18. */
.FeaturesBox-module__features-box___K5vSO {
    background: var(--pb-lime-surface);
    padding: var(--pb-space-12);
    border-radius: var(--pb-radius-8);
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-8);
}

/* Figma: bg #99B748, white text, 12px, rounded-6px, with infinity icon */
.FeaturesBox-module__features-box__badge___DKZzx {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--pb-space-4);
    background: var(--pb-lime-accent);
    color: var(--pb-color-white);
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-s);
    font-weight: var(--pb-weight-medium);
    line-height: var(--pb-lh-s);
    padding: var(--pb-space-2) var(--pb-space-4);
    border-radius: var(--pb-radius-6);
}

.FeaturesBox-module__features-box__badge___DKZzx svg {
    flex-shrink: 0;
}

/* Figma: flex col, gap-6px (→ --pb-space-4), px-4px */
.FeaturesBox-module__features-box__list___m2jH7 {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-4);
    padding: 0 var(--pb-space-4);
}

/* ── Card container ──────────────────────── */
/* Live: bg white, 1px grey-40 border, rounded-16, subtle purple shadow */
.PricingCard-module__pricing-card___qFtsR {
    background: var(--pb-surface-0);
    border: 1px solid var(--pb-color-grey-40);
    border-radius: var(--pb-radius-16);
    box-shadow: var(--pb-shadow-card);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    text-align: left; /* Prevent parent text-align inheritance */
}

/* Live treats "highlighted" plan as same border/box — only the CTA
   differs (filled primary vs outlined secondary). Variant kept as a
   no-op hook in case future designs want extra emphasis. */
.PricingCard-module__pricing-card--highlighted___gAXxU {
    border-color: var(--pb-color-grey-40);
}

/* ── Name row: plan name + badge inline ──── */
.PricingCard-module__pricing-card__name-row___B1maq {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pb-space-8);
}

/* Figma: bg #262626, text white, 12px medium, lh 16px, px-12px, py-4px, rounded-8px */
.PricingCard-module__pricing-card__badge___e5vAy {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-s);
    font-weight: var(--pb-weight-medium);
    line-height: var(--pb-lh-s);
    color: var(--pb-color-white);
    background: var(--pb-color-grey-90-inv);
    padding: var(--pb-space-4) var(--pb-space-12);
    border-radius: var(--pb-radius-8);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Top section ─────────────────────────── */
.PricingCard-module__pricing-card__top___JYlVY {
    padding: var(--pb-space-20);
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-16);
}

/* ── Plan info ───────────────────────────── */
.PricingCard-module__pricing-card__plan-info___f57YL {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-4);
}

/* Figma: Inter Display Medium, 24px, lh 32px, ls -0.2px, #34324A */
.PricingCard-module__pricing-card__name___WrgYa {
    font-family: var(--pb-font-display);
    font-size: var(--pb-font-size-2xl);
    font-weight: var(--pb-weight-medium);
    line-height: var(--pb-lh-xl);
    letter-spacing: var(--pb-tracking-loose);
    color: var(--pb-text-heading);
    margin: 0;
}

/* Figma: Inter Medium 16px #0D0D0D + Inter Regular 14px #5C5C5C (Novus aligned 2026-04-19) */
.PricingCard-module__pricing-card__credits___tHcRt {
    margin: 0;
    line-height: var(--pb-lh-l);
}
.PricingCard-module__pricing-card__credits-value___E9GMx {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-font-size-l);
    font-weight: var(--pb-weight-medium);
    color: var(--pb-text-default);
}
.PricingCard-module__pricing-card__credits-period___kF30Y {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-font-size-m);
    font-weight: var(--pb-weight-regular);
    color: var(--pb-color-grey-70-inv);
}

/* ── Pricing ─────────────────────────────── */
.PricingCard-module__pricing-card__pricing___LGQA9 {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-16);
}

.PricingCard-module__pricing-card__price-row___DFig6 {
    display: flex;
    align-items: flex-end;
    gap: var(--pb-space-4);
}

/* Figma: Inter Display Medium 36px, ls -0.6px, #34324A */
.PricingCard-module__pricing-card__price___XAvfs {
    font-family: var(--pb-font-display);
    font-size: var(--pb-text-price-display);
    font-weight: var(--pb-weight-medium);
    line-height: 1;
    letter-spacing: var(--pb-tracking-fitted);
    color: var(--pb-text-heading);
}

.PricingCard-module__pricing-card__original-price___tBo69 {
    font-size: var(--pb-font-size-xl);
    color: var(--pb-text-body-web);
    text-decoration: line-through;
    margin-right: var(--pb-space-4);
}

/* Live: Inter 12px / weight 400 / lh 16.8 / color rgba(0,0,0,0.65). */
.PricingCard-module__pricing-card__billing____9FvC {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-s); /* 12px */
    font-weight: 400;
    line-height: 1.4; /* 16.8 = 12 * 1.4 */
    color: var(--pb-color-grey-80); /* rgba(0,0,0,0.65) — was #6E6D74 */
    padding-bottom: var(--pb-space-4);
}

/* ── CTA — full-width pill, styled INDEPENDENTLY of Button atom ──
   Selector prefixed with `a.` / `button.` (spec 0,0,1,1) so it beats
   DSProvider's `.ds-root button { font: inherit }` reset which would
   otherwise strip color/bg from the rendered <a>. */
a.PricingCard-module__pricing-card__cta___RU6iM,
button.PricingCard-module__pricing-card__cta___RU6iM,
.PricingCard-module__pricing-card__cta___RU6iM {
    /* Layout */
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pb-space-8);
    /* Pill shape */
    padding: var(--pb-space-10) var(--pb-space-24);
    border-radius: var(--pb-radius-full);
    border: 1px solid var(--pb-color-primary);
    /* Default = secondary (outlined purple) — matches Creator/Lite on live. */
    background: transparent;
    color: var(--pb-color-primary);
    /* Type */
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-m);
    font-weight: var(--pb-weight-medium);
    line-height: var(--pb-lh-l);
    text-decoration: none;
    cursor: pointer;
    /* Motion */
    transition: background var(--pb-transition-fast),
                color var(--pb-transition-fast),
                box-shadow var(--pb-transition-fast);
}

.PricingCard-module__pricing-card__cta___RU6iM:hover {
    background: var(--pb-color-primary-10);
    color: var(--pb-color-primary);
}

.PricingCard-module__pricing-card__cta___RU6iM:active {
    background: var(--pb-color-primary-20);
}

/* Highlighted plan card (Pro) gets the filled-purple primary CTA. */
.PricingCard-module__pricing-card--highlighted___gAXxU .PricingCard-module__pricing-card__cta___RU6iM {
    background: var(--pb-color-primary);
    color: var(--pb-color-white);
    border-color: transparent;
    box-shadow: var(--pb-shadow-s);
}

.PricingCard-module__pricing-card--highlighted___gAXxU .PricingCard-module__pricing-card__cta___RU6iM:hover {
    background: var(--pb-color-primary-60);
    color: var(--pb-color-white);
    box-shadow: var(--pb-shadow-md);
}

.PricingCard-module__pricing-card--highlighted___gAXxU .PricingCard-module__pricing-card__cta___RU6iM:active {
    background: var(--pb-color-primary-60);
    box-shadow: none;
}

/* A11y — keyboard focus indicator */
.PricingCard-module__pricing-card__cta___RU6iM:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
}

/* ── Bottom section ──────────────────────── */
.PricingCard-module__pricing-card__bottom___w2M5f {
    padding: 0 var(--pb-space-12) var(--pb-space-12);
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-16);
}

/* ── Media includes wrapper ──────────────── */
/* Rows themselves are now the shared MediaIncludeRow atom. */
.PricingCard-module__pricing-card__media___uOCU_ {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-8);
    padding: 0 var(--pb-space-12);
}

/* Figma: bg #F7F7F7, rounded-12px, p-6px */
.RadioMenu-module__radio-menu___rWGyU {
    display: flex;
    flex-direction: column;
    background: var(--pb-surface-20); /* Figma: #F7F7F7 ≈ grey-20 #F5F5F5 */
    border-radius: var(--pb-radius-12); /* Figma: 12px */
    padding: var(--pb-space-4); /* Figma: 6px → closest 4px */
    width: 100%;
    text-align: left; /* Prevent parent text-align inheritance */
}

/* Figma: p-12px, rounded-8px, flex, justify-between */
.RadioMenu-module__radio-menu__option___YTBmo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pb-space-12);
    padding: var(--pb-space-12);
    border-radius: var(--pb-radius-8); /* Figma: 8px */
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all var(--pb-transition-fast);
    font-family: var(--pb-font-sans);
}

.RadioMenu-module__radio-menu__option___YTBmo:hover:not(.RadioMenu-module__radio-menu__option--selected___EWmGl) {
    background: var(--pb-surface-10);
}

/* A11y — keyboard focus indicator (2026-04-18 audit) */
.RadioMenu-module__radio-menu__option___YTBmo:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
}

/* Figma: selected — white bg, border 1px primary */
.RadioMenu-module__radio-menu__option--selected___EWmGl {
    background: var(--pb-surface-0); /* Figma: white */
    border-color: var(--pb-color-primary); /* Figma: brand border */
}

/* Figma: unselected label — Inter Regular 14px, #0D0D0D (Novus aligned 2026-04-19) */
.RadioMenu-module__radio-menu__label___t9ITz {
    font-size: var(--pb-font-size-m); /* Figma: 14px */
    font-weight: var(--pb-weight-regular);
    line-height: var(--pb-lh-m); /* Figma: 20px */
    color: var(--pb-text-default); /* Figma: #0D0D0D (Novus aligned 2026-04-19) */
}

/* Figma: selected label — Inter Display Medium 14px, brand color */
.RadioMenu-module__radio-menu__option--selected___EWmGl .RadioMenu-module__radio-menu__label___t9ITz {
    font-family: var(--pb-font-display);
    font-weight: var(--pb-weight-medium);
    letter-spacing: var(--pb-tracking-loose); /* Figma: -0.2px */
    color: var(--pb-color-primary-60); /* Figma: brand text #000093 → primary-60 */
}

/* Figma: suffix — Regular 12px */
.RadioMenu-module__radio-menu__suffix___vKLVk {
    font-size: var(--pb-font-size-s); /* Figma: 12px */
    font-weight: var(--pb-weight-regular);
    line-height: var(--pb-lh-s); /* Figma: 16px */
    color: var(--pb-text-body-web); /* Figma: #6E6D74 */
    white-space: nowrap;
    flex-shrink: 0;
}

/* Figma: selected suffix — darker color */
.RadioMenu-module__radio-menu__option--selected___EWmGl .RadioMenu-module__radio-menu__suffix___vKLVk {
    color: var(--pb-text-heading); /* Figma: #34324A */
}

/* ── Card ─────────────────────────────────── */
/* Figma: bg white, rounded-16px, shadow-card, p-24px, gap-24px, flex row */
.PayAsYouGoCard-module__paygo___oGlP0 {
    background: var(--pb-surface-0);
    border-radius: var(--pb-radius-16);
    box-shadow: var(--pb-shadow-card);
    padding: var(--pb-space-24);
    display: flex;
    gap: var(--pb-space-24);
    overflow: hidden;
    text-align: left;
}

/* ── Left column ─────────────────────────── */
/* Figma spec: 264px; converted to content-driven 2026-04-18 — Novus dim scale
   has no 264 token and downstream consumers can shape-up the container as needed. */
.PayAsYouGoCard-module__paygo__left___FMtR1 {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-24);
}

.PayAsYouGoCard-module__paygo__selector___I5mDi {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-12);
}

/* Wraps the credit-pack RadioMenu and caps its visible height so the
   PayAsYouGoCard stays compact when there are many options. ~5 options
   visible at the live 46px-per-option spacing; remainder scrolls. */
.PayAsYouGoCard-module__paygo__radio-wrap___rPB9e {
    max-height: 240px;
    overflow-y: auto;
    /* Subtle scrollbar tuned for both WebKit and Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--pb-color-grey-40) transparent;
    border-radius: var(--pb-radius-12);
}

.PayAsYouGoCard-module__paygo__radio-wrap___rPB9e::-webkit-scrollbar {
    width: 6px;
}

.PayAsYouGoCard-module__paygo__radio-wrap___rPB9e::-webkit-scrollbar-track {
    background: transparent;
}

.PayAsYouGoCard-module__paygo__radio-wrap___rPB9e::-webkit-scrollbar-thumb {
    background: var(--pb-color-grey-40);
    border-radius: var(--pb-radius-full);
}

.PayAsYouGoCard-module__paygo__radio-wrap___rPB9e::-webkit-scrollbar-thumb:hover {
    background: var(--pb-color-grey-60);
}

/* Figma: Display/2xs */
.PayAsYouGoCard-module__paygo__title___HJvMC {
    font-family: var(--pb-font-display);
    font-size: var(--pb-font-size-2xl);
    font-weight: var(--pb-weight-medium);
    line-height: var(--pb-lh-xl);
    letter-spacing: var(--pb-tracking-loose);
    color: var(--pb-text-heading);
    margin: 0;
}

/* Figma: gap-16px */
.PayAsYouGoCard-module__paygo__pricing___YjrFa {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-16);
}

.PayAsYouGoCard-module__paygo__price-row___oivTI {
    display: flex;
    align-items: flex-end;
    gap: var(--pb-space-4);
}

/* Figma: 36px display */
.PayAsYouGoCard-module__paygo__price___CGGyd {
    font-family: var(--pb-font-display);
    font-size: var(--pb-text-price-display);
    font-weight: var(--pb-weight-medium);
    line-height: 1;
    letter-spacing: var(--pb-tracking-fitted);
    color: var(--pb-text-heading);
}

/* Figma: 12px, #6E6D74 */
.PayAsYouGoCard-module__paygo__billing___TxdfV {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-s);
    font-weight: var(--pb-weight-regular);
    line-height: var(--pb-lh-s);
    color: var(--pb-text-body-web);
    padding-bottom: var(--pb-space-4);
}

/* Buy CTA — defensive primary-button styling pinned directly here
   so it always renders correctly even if the Button atom's CSS chunk
   loads late or the atom falls back to <button> (no href) where
   mitsuki's global element resets strip the styling. The values mirror
   .btn .btn--primary .btn--lg from Button.module.css. */
.PayAsYouGoCard-module__paygo__cta___mitIr {
    /* Layout */
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pb-space-4);

    /* Type (matches Button .btn + .btn--lg) */
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-l, 16px);
    font-weight: var(--pb-weight-medium, 500);
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;

    /* Box (matches Button .btn + .btn--lg) */
    padding: var(--pb-space-8, 8px) var(--pb-space-24, 24px);
    border-radius: var(--pb-radius-button, 250px);
    border: 1.5px solid transparent;
    cursor: pointer;

    /* Primary visual (matches .btn--primary) */
    background: var(--pb-color-primary, #6933fa);
    color: var(--pb-color-white, #fff) !important;
    box-shadow: var(--pb-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));

    transition: all var(--pb-transition-fast, 150ms ease);
}

.PayAsYouGoCard-module__paygo__cta___mitIr:hover {
    background: var(--pb-color-primary-60, #5921e0);
    box-shadow: var(--pb-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
    color: var(--pb-color-white, #fff) !important;
}

.PayAsYouGoCard-module__paygo__cta___mitIr:active {
    background: var(--pb-color-primary-60, #5921e0);
    box-shadow: none;
    color: var(--pb-color-white, #fff) !important;
}

/* Defeat global <a> color leak that hits the inner .btn__text span */
.PayAsYouGoCard-module__paygo__cta___mitIr > * {
    color: currentColor !important;
}

/* A11y — keyboard focus indicator (2026-04-18 audit) */
.PayAsYouGoCard-module__paygo__cta___mitIr:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
}

/* ── Divider ─────────────────────────────── */
.PayAsYouGoCard-module__paygo__divider___zm2HX {
    width: 1px;
    align-self: stretch;
    background: var(--pb-color-grey-20);
    flex-shrink: 0;
}

/* ── Right column ────────────────────────── */
.PayAsYouGoCard-module__paygo__right___HkkvX {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-16);
    padding-top: var(--pb-space-4);
}

.PayAsYouGoCard-module__paygo__right-heading___pkIMD {
    font-family: var(--pb-font-display);
    font-size: var(--pb-font-size-xl);
    font-weight: var(--pb-weight-medium);
    line-height: normal;
    letter-spacing: var(--pb-tracking-loose);
    color: var(--pb-text-heading);
    margin: 0;
}

.PayAsYouGoCard-module__paygo__content___VPrN3 {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-20);
}

/* ── Media includes wrapper ──────────────── */
/* Rows themselves are now the shared MediaIncludeRow atom. */
.PayAsYouGoCard-module__paygo__media___wMS8V {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-8);
    padding: 0 var(--pb-space-12);
}

/* ── Horizontal rule ─────────────────────── */
.PayAsYouGoCard-module__paygo__hr___Qu_9G {
    height: 1px;
    background: var(--pb-color-grey-20);
}

/* ── Extras wrapper ──────────────────────── */
.PayAsYouGoCard-module__paygo__extras___V38Tg {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-8);
    padding: 0 var(--pb-space-12);
}

/* ── Mobile (Figma: 2035:40226) ────────── */
/* Figma spec: 324px cap; removed 2026-04-18 — Novus dim scale has no 324 token.
   Mobile cap should be enforced by the parent layout. */
@media (max-width: 767px) {
    .PayAsYouGoCard-module__paygo___oGlP0 {
        flex-direction: column;
        padding: var(--pb-space-24);
        gap: var(--pb-space-20);
        margin: 0 auto;
    }

    .PayAsYouGoCard-module__paygo__left___FMtR1 {
        width: 100%;
        gap: var(--pb-space-24);
    }

    .PayAsYouGoCard-module__paygo__divider___zm2HX {
        display: none;
    }

    .PayAsYouGoCard-module__paygo__right___HkkvX {
        padding: 0;
    }
}

/* ── Card container ──────────────────────── */
/* Figma: bg white, rounded-16px, shadow-card, p-24px, gap-24px, flex row */
.EnterpriseCard-module__ent-card___haae8 {
    background: var(--pb-surface-0);
    border-radius: var(--pb-radius-16);
    box-shadow: var(--pb-shadow-card);
    padding: var(--pb-space-24);
    display: flex;
    gap: var(--pb-space-24);
    overflow: hidden;
    text-align: left; /* Prevent parent text-align inheritance */
}

/* ── Left column ─────────────────────────── */
/* Figma: w-240px, flex col, justify-between */
.EnterpriseCard-module__ent-card__left___PECUG {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Figma: gap-8px */
.EnterpriseCard-module__ent-card__info___u3Mik {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-8);
}

/* Figma: Inter Display Medium, 24px, lh 32px, ls -0.2px, #34324A */
.EnterpriseCard-module__ent-card__name___K0c3C {
    font-family: var(--pb-font-display);
    font-size: var(--pb-font-size-2xl); /* Figma: 24px */
    font-weight: var(--pb-weight-medium);
    line-height: var(--pb-lh-xl); /* Figma: 32px */
    letter-spacing: var(--pb-tracking-loose); /* Figma: -0.2px */
    color: var(--pb-text-heading); /* Figma: #34324A */
    margin: 0;
}

/* Figma: gap-2px */
.EnterpriseCard-module__ent-card__meta___f898O {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Figma: Inter Medium 16px, lh 24px, #34324A */
.EnterpriseCard-module__ent-card__subtitle___iqYS3 {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-font-size-l); /* Figma: 16px */
    font-weight: var(--pb-weight-medium);
    line-height: var(--pb-lh-l); /* Figma: 24px */
    color: var(--pb-text-heading);
    margin: 0;
}

/* Figma: Inter Regular 14px, lh 20px, #5C5C5C (Novus aligned 2026-04-19) */
.EnterpriseCard-module__ent-card__note___hm7hL {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-font-size-m); /* Figma: 14px */
    font-weight: var(--pb-weight-regular);
    line-height: var(--pb-lh-m); /* Figma: 20px */
    color: var(--pb-color-grey-70-inv); /* Figma: #5C5C5C (Novus aligned 2026-04-19) */
    margin: 0;
}

/* Figma: gap-20px */
.EnterpriseCard-module__ent-card__action___DUsyp {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-20);
}

/* Figma: Inter Display Medium 18px, ls -0.2px, #34324A */
.EnterpriseCard-module__ent-card__tagline___NNr0L {
    font-family: var(--pb-font-display);
    font-size: var(--pb-font-size-xl); /* Figma: 18px */
    font-weight: var(--pb-weight-medium);
    line-height: normal;
    letter-spacing: var(--pb-tracking-loose); /* Figma: -0.2px */
    color: var(--pb-text-heading);
    margin: 0;
}

/* CTA — Talk to Sales pill, self-styled INDEPENDENTLY of Button atom.
   Same reason as PricingCard: DSProvider's `.ds-root button { font:
   inherit }` reset (spec 0,0,1,1) silently strips Button's font props.
   Selector prefixed with `a.` / `button.` so spec (0,0,1,1) matches the
   reset and the LATER cascade order wins — guaranteeing white text on
   purple bg regardless of which element type the Button atom renders. */
a.EnterpriseCard-module__ent-card__cta___HaF_c,
button.EnterpriseCard-module__ent-card__cta___HaF_c {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pb-space-8);
    padding: var(--pb-space-10) var(--pb-space-24);
    border-radius: var(--pb-radius-full);
    border: 1px solid transparent;
    background: var(--pb-color-primary);
    color: var(--pb-color-white);
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-m);
    font-weight: var(--pb-weight-medium);
    line-height: var(--pb-lh-l);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--pb-shadow-s);
    transition: background var(--pb-transition-fast),
                box-shadow var(--pb-transition-fast);
}

a.EnterpriseCard-module__ent-card__cta___HaF_c:hover,
button.EnterpriseCard-module__ent-card__cta___HaF_c:hover {
    background: var(--pb-color-primary-60);
    box-shadow: var(--pb-shadow-md);
    color: var(--pb-color-white);
}

a.EnterpriseCard-module__ent-card__cta___HaF_c:active,
button.EnterpriseCard-module__ent-card__cta___HaF_c:active {
    background: var(--pb-color-primary-60);
    box-shadow: none;
    color: var(--pb-color-white);
}

a.EnterpriseCard-module__ent-card__cta___HaF_c:focus-visible,
button.EnterpriseCard-module__ent-card__cta___HaF_c:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: 2px;
}

/* ── Divider ─────────────────────────────── */
/* Figma: vertical divider between columns */
.EnterpriseCard-module__ent-card__divider___vSSW6 {
    width: 1px;
    align-self: stretch;
    background: var(--pb-color-grey-20);
    flex-shrink: 0;
}

/* ── Right column ────────────────────────── */
/* Figma: w-264px, flex col, px-16px, pt-8px, justify-between */
.EnterpriseCard-module__ent-card__right___R0leV {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--pb-space-8) var(--pb-space-16) 0;
    gap: var(--pb-space-16);
}

.EnterpriseCard-module__ent-card__features___CBL1u {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-16);
}

/* Figma: Inter Display Medium 18px, ls -0.2px, #34324A */
.EnterpriseCard-module__ent-card__right-heading___TNNb8 {
    font-family: var(--pb-font-display);
    font-size: var(--pb-font-size-xl); /* Figma: 18px */
    font-weight: var(--pb-weight-medium);
    line-height: normal;
    letter-spacing: var(--pb-tracking-loose); /* Figma: -0.2px */
    color: var(--pb-text-heading);
    margin: 0;
}

/* Figma: gap-16px */
.EnterpriseCard-module__ent-card__feature-list___jDr4J {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-16);
}

/* Figma: icon + text, gap-6px */
.EnterpriseCard-module__ent-card__feature___uJOdt {
    display: flex;
    align-items: flex-start;
    gap: var(--pb-space-4);
}

.EnterpriseCard-module__ent-card__feature-icon___s7OGI {
    width: 1rem; /* Figma: 16px */
    height: 1rem;
    flex-shrink: 0;
    color: var(--pb-text-heading);
    margin-top: 1px;
}

/* Figma: gap-4px */
.EnterpriseCard-module__ent-card__feature-text___OblhM {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-4);
}

/* Figma: Inter Medium 12px, lh 16px, #34324A */
.EnterpriseCard-module__ent-card__feature-title___e_qnn {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-font-size-s); /* Figma: 12px */
    font-weight: var(--pb-weight-medium);
    line-height: var(--pb-lh-s); /* Figma: 16px */
    color: var(--pb-text-heading);
}

/* Figma: Inter Regular 12px, lh 16px, #6E6D74 */
.EnterpriseCard-module__ent-card__feature-desc___AaiLW {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-font-size-s); /* Figma: 12px */
    font-weight: var(--pb-weight-regular);
    line-height: var(--pb-lh-s); /* Figma: 16px */
    color: var(--pb-text-body-web); /* Figma: #6E6D74 */
}

/* ── Brand logos marquee ─────────────────── */
/* Figma: flex, gap-32px, items-center, h-40px, overflow hidden, scroll */
.EnterpriseCard-module__ent-card__brands___hzFu4 {
    display: flex;
    overflow: hidden;
    height: 2.5rem; /* Figma: 40px */
    align-items: center;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.EnterpriseCard-module__ent-card__brands-track___SDx_e {
    display: flex;
    align-items: center;
    gap: var(--pb-space-32); /* Figma: 32px */
    flex-shrink: 0;
    padding-right: var(--pb-space-32);
    animation: EnterpriseCard-module__ent-marquee___HEjpp 20s linear infinite;
}
@keyframes EnterpriseCard-module__ent-marquee___HEjpp {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
.EnterpriseCard-module__ent-card__brand-item___eibb4 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.EnterpriseCard-module__ent-card__brand-img___soR6O {
    height: 1.25rem; /* Figma: ~20px */
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.5;
}
.EnterpriseCard-module__ent-card__brand-text___JJ_e3 {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-font-size-m);
    font-weight: var(--pb-weight-semibold);
    color: var(--pb-text-body-web);
    white-space: nowrap;
    opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
    .EnterpriseCard-module__ent-card__brands-track___SDx_e { animation-play-state: paused; }
}

/* ── Mobile (Figma: 2205:25488) ──────────── */
/* 324px, single column, p-24px, no divider, features stacked below */
@media (max-width: 767px) {
    .EnterpriseCard-module__ent-card___haae8 {
        flex-direction: column;
        padding: var(--pb-space-24); /* Figma: 24px */
        gap: var(--pb-space-20);
        max-width: 324px; /* Figma: 324px */
        margin: 0 auto;
    }
    .EnterpriseCard-module__ent-card__left___PECUG {
        width: 100%;
        gap: var(--pb-space-24);
    }
    .EnterpriseCard-module__ent-card__divider___vSSW6 {
        display: none; /* Figma: no divider on mobile */
    }
    .EnterpriseCard-module__ent-card__right___R0leV {
        padding: 0;
    }
    /* Figma mobile: right heading hidden, features show directly */
    .EnterpriseCard-module__ent-card__right-heading___TNNb8 {
        display: none;
    }
}

/* ── Container ───────────────────────────── */
/* Figma: flex, items-center, overflow hidden + gradient fade edges */
.LogoMarquee-module__marquee___d5KFi {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

/* ── Track ───────────────────────────────── */
/* Figma: gap-32px, items-center */
.LogoMarquee-module__marquee__track___lH9Mi {
    display: flex;
    align-items: center;
    gap: var(--pb-space-32); /* Figma: 32px */
    flex-shrink: 0;
    padding-right: var(--pb-space-32); /* gap between track copies */
    animation: LogoMarquee-module__marquee-scroll___XTzDV var(--marquee-speed) linear infinite;
    animation-direction: var(--marquee-direction);
}

.LogoMarquee-module__marquee--hover-pause___rS7hW:hover .LogoMarquee-module__marquee__track___lH9Mi {
    animation-play-state: paused;
}

@keyframes LogoMarquee-module__marquee-scroll___XTzDV {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ── Logo item ───────────────────────────── */
.LogoMarquee-module__marquee__item___Yof9E {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Figma: logos are ~20-28px height, grayscale appearance.
   Chained with `.marquee` parent so the rule has specificity (0,2,0),
   beating DSProvider's `.root img { height: auto; max-width: 100% }`
   element-level reset at (0,1,1). Without the chain, browsers render
   each logo at its natural intrinsic height (64-96px) and the strip
   looks ragged. */
.LogoMarquee-module__marquee___d5KFi .LogoMarquee-module__marquee__logo___dl8Rf {
    height: 2rem; /* 32px — comfortable scale across consumer pages */
    width: auto;
    max-width: none;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all var(--pb-transition-fast);
}
.LogoMarquee-module__marquee___d5KFi:hover .LogoMarquee-module__marquee__logo___dl8Rf {
    filter: grayscale(0%);
    opacity: 1;
}

/* Text fallback when no image src */
.LogoMarquee-module__marquee__text___pCpWf {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-font-size-m); /* Figma: ~14px */
    font-weight: var(--pb-weight-semibold);
    color: var(--pb-text-body-web);
    white-space: nowrap;
    opacity: 0.5;
    transition: opacity var(--pb-transition-fast);
}
.LogoMarquee-module__marquee___d5KFi:hover .LogoMarquee-module__marquee__text___pCpWf {
    opacity: 0.8;
}

/* ── Accessibility ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .LogoMarquee-module__marquee__track___lH9Mi {
        animation-play-state: paused;
    }
}

.Accordion-module__accordion___oaGjL {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-8);
    width: 100%;
}

/* ── Item ────────────────────────────────────────────────────────────
   Live spec (computed-style audit at pixelbin.io/pricing 2026-05-06):
     closed → bg #FAFAFA, border 1px #E0E0E0, radius 24px, no shadow
     open   → bg #FFFFFF, border 1px #E0E0E0 (same!), radius 24px, no shadow
   The border colour does NOT change on open and there is no shadow —
   that's a key difference from our previous spec which used a primary
   tint + shadow-card. We now match live exactly. */
.Accordion-module__accordion__item___aISG_ {
    border-radius: var(--pb-radius-2xl);
    background: var(--pb-surface-10);
    border: 1px solid var(--pb-color-grey-20);
    overflow: hidden;
    transition: background var(--pb-transition-fast) ease;
}

.Accordion-module__accordion__item--open___ZFXeG {
    background: var(--pb-surface-0);
}

/* ── Trigger ───────────────────────────────────────────────────────
   Live: header padding 16px on all sides, total height 64px (closed).
   The padding stays the same when open — only the panel reveals. */
.Accordion-module__accordion__trigger___C811C {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pb-space-12);
    width: 100%;
    padding: var(--pb-space-16);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    -webkit-user-select: none;
            user-select: none;
    appearance: none;
    color: inherit;
    font: inherit;
}

/* A11y — keyboard focus indicator */
.Accordion-module__accordion__trigger___C811C:focus-visible {
    outline: 2px solid var(--pb-color-primary-20);
    outline-offset: -2px;
}

/* Live: question is 16px / 500 / Inter Display, color #34324A. */
.Accordion-module__accordion__question____DsGO {
    font-family: var(--pb-font-display);
    font-size: var(--pb-font-size-l);
    font-weight: var(--pb-weight-medium);
    line-height: 1.4;
    color: var(--pb-text-heading);
    flex: 1;
    min-width: 0;
}

/* ── Toggle icon ───────────────────────────────────────────────────
   Live: 32×32 circle when closed, **45×45** when open (the wrapper
   physically grows). The "+" icon rotates 45° to become an "×" via
   CSS transform on open — we keep the same plus icon and just rotate. */
.Accordion-module__accordion__icon___NaND1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;                          /* 32px */
    height: 2rem;
    flex-shrink: 0;
    border-radius: var(--pb-radius-full);
    background: var(--pb-surface-0);
    border: 1px solid var(--pb-color-grey-20);
    color: var(--pb-text-default);
    transition:
        width var(--pb-transition-fast) ease,
        height var(--pb-transition-fast) ease,
        background var(--pb-transition-fast) ease,
        border-color var(--pb-transition-fast) ease,
        transform var(--pb-transition-base) ease;
}

.Accordion-module__accordion__item--open___ZFXeG .Accordion-module__accordion__icon___NaND1 {
    width: 2.8125rem;                     /* 45px — matches live */
    height: 2.8125rem;
    background: var(--pb-surface-10);
    border-color: var(--pb-color-grey-20);
    transform: rotate(45deg);             /* + → × */
}

.Accordion-module__accordion__icon___NaND1 svg {
    width: 1.25rem;                       /* 20px */
    height: 1.25rem;
}

/* ── Panel — height animation via CSS-grid 1fr trick ────────────────
   Animating grid-template-rows from 0fr to 1fr smoothly transitions
   the row height between collapsed and content-natural without
   measuring. The inner wrapper handles overflow:hidden so content
   doesn't peek out during the transition. */
.Accordion-module__accordion__panel___GWR8h {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--pb-transition-base) ease;
}

.Accordion-module__accordion__item--open___ZFXeG .Accordion-module__accordion__panel___GWR8h {
    grid-template-rows: 1fr;
}

.Accordion-module__accordion__panelInner___YRPwR {
    overflow: hidden;
    min-height: 0;
}

/* Live: answer paragraph sits inside the same 16px horizontal padding
   as the header, with 16px bottom padding. Top spacing comes from the
   trigger having no padding-bottom adjustment — the gap between
   question and answer is provided by the panelInner top padding. */
.Accordion-module__accordion__panelInner___YRPwR > .Accordion-module__accordion__answer___vWqiL {
    padding: 0 var(--pb-space-16) var(--pb-space-16);
}

/* Live: 16px / 1.5 / Inter, color rgba(0,0,0,0.65). */
.Accordion-module__accordion__answer___vWqiL {
    font-family: var(--pb-font-sans);
    font-size: var(--pb-font-size-l);
    font-weight: var(--pb-weight-regular);
    line-height: var(--pb-lh-l);
    color: rgba(0, 0, 0, 0.65);
    margin: 0;
}

/* PricingSection — composite layout.
 * All values resolve to ds-v2 tokens (tokens/tokens.css). Raw pixel values
 * are only used for max-width container widths which follow the Navbar
 * convention (1160px content area). Responsive grid collapses to a single
 * column below 768px. */

.PricingSection-module__section___hT9Hk {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: var(--pb-space-40) var(--pb-space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pb-space-32);
}

/* Tab bar sits centered above the card area. */
.PricingSection-module__tabBar___FfLiO {
    display: flex;
    justify-content: center;
}

/* Card area fills the remaining width; individual layouts are set below.
   min-height is locked to the TALLEST tab's content (Annual w/ extra
   notes ≈ 470px) so switching tabs doesn't reflow the page height —
   the dark "Full access" banner + everything below stays anchored. */
.PricingSection-module__cards___KoDrK {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 480px;
}

@media (max-width: 768px) {
    .PricingSection-module__cards___KoDrK {
        min-height: 0; /* reflow allowed on mobile where tabs stack */
    }
}

/* Grid of N plan cards — Monthly + Annual tabs render however many
 * Paddle plans rupika returns. Live shows 3 at ~295px each in a 900px
 * grid. We use minmax(260px, 1fr) inside auto-fit so 3 fit perfectly
 * in 900px (3 * 289 + 2 * 16 = 899) and 4+ wrap to a second row. */
.PricingSection-module__cardsGrid___p9Hha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--pb-space-16);
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
}

/* Single-card layouts — One Time + Enterprise tabs.
 * Live measurement: both single cards are 601px wide. Cap the wrapper
 * to that width, centered, and let the inner card stretch to fill it. */
.PricingSection-module__cardsSingle___mAwOc {
    display: flex;
    width: 100%;
    max-width: 601px;
    margin-inline: auto;
    justify-content: center;
}

.PricingSection-module__cardsSingle___mAwOc > * {
    width: 100%;
}

/* Partner banner — live: dark #262626 rounded strip, 900px wide, 48px tall.
   Layout: heading left (24px padding) + horizontally-marqueed model logos. */
.PricingSection-module__banner___OVt1L {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    margin-top: var(--pb-space-16);
    background: var(--pb-color-grey-90-inv);
    border-radius: var(--pb-radius-12);
    padding: var(--pb-space-8) 0 var(--pb-space-8) var(--pb-space-24);
    gap: var(--pb-space-16);
    overflow: hidden;
}

/* Live banner heading: white, 16px / weight 400 (not 500), lh 22.4. */
.PricingSection-module__bannerHeading___K3AlD {
    margin: 0;
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-body); /* 16px */
    font-weight: 400; /* live = 400 (was 500) */
    line-height: 1.4; /* 22.4 = 16 * 1.4 */
    color: var(--pb-color-white);
    white-space: nowrap;
    flex-shrink: 0;
}

.PricingSection-module__bannerMarquee___j0vnc {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 768px) {
    .PricingSection-module__banner___OVt1L {
        flex-direction: column;
        padding: var(--pb-space-12);
        gap: var(--pb-space-8);
    }
    .PricingSection-module__bannerHeading___K3AlD {
        white-space: normal;
        text-align: center;
    }
}

/* Tablet (≤980px): 3-col would crush cards <240px each, so collapse
   to a single column AND cap the column width so cards don't balloon
   on a wider tablet (e.g. 768px landscape iPad). Mirrors what live
   does on tablet. */
@media (max-width: 980px) {
    .PricingSection-module__cardsGrid___p9Hha {
        grid-template-columns: 1fr;
        max-width: 360px;
        margin-inline: auto;
    }
    .PricingSection-module__cardsSingle___mAwOc {
        max-width: 360px;
    }
}

/* Tighten section padding on small viewports. */
@media (max-width: 768px) {
    .PricingSection-module__section___hT9Hk {
        padding: var(--pb-space-24) var(--pb-space-16);
        gap: var(--pb-space-24);
    }
}