/* PageContainer — shared wrapper for ds-v2 pages.

   Reads the container spec tokens:
     --pb-container-max-width   (1200px desktop)
     --pb-container-padding-x   (20px desktop, 14px mobile)

   Any ds-v2 page or composite that wants to align with the page grid
   should either use <PageContainer> directly or consume these tokens
   on its own wrapper (see Footer.__container for the latter pattern). */

.PageContainer-module__container___YyBjM {
    max-width: var(--pb-container-max-width);
    padding-inline: var(--pb-container-padding-x);
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
}

/* PricingPage — ds-v2 port of pixelbin.io/pricing.
   Tokens-only — every value comes from tokens.css (--pb-*).
   Mirrors the structure of EnterprisePage.module.css. */

.PricingPage-module__page___Y8jyR {
    color: var(--pb-text-default);
    font-family: var(--pb-font-sans);
}

/* ══════════ HERO SURFACE (bg-image stage) ══════════════════════ */
/* Full-bleed surface that hosts hero + tab pricing cards on top of a
   tab-aware background image. Mirrors live pixelbin.io/pricing where
   the sky/hills photo runs edge-to-edge behind the cards.
   Fallback bg color = sky-blue tone matching the live monthly photo
   so the WHITE H1 remains legible if the bg image fails to load. */

.PricingPage-module__heroSurface___I4Eeg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--pb-space-64) var(--pb-space-80);
    background-color: #87B2C9;
}

@media (max-width: 767px) {
    .PricingPage-module__heroSurface___I4Eeg {
        padding-block: var(--pb-space-32) var(--pb-space-48);
    }
}

/* Hero text → pricing cards gap. Live keeps these tight (~24px),
   not the 48px we had before — cards sit close to the sub-headline. */
.PricingPage-module__heroSurfaceInner___HWGfU {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-24);
}

@media (max-width: 767px) {
    .PricingPage-module__heroSurfaceInner___HWGfU {
        gap: var(--pb-space-16);
    }
}

.PricingPage-module__bgLayer___mwkgy {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--bg-desktop);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 1;
    /* Match hinata BG_FADE_DURATION (500ms). */
    transition: opacity 500ms ease;
}

.PricingPage-module__bgLayerIncoming___yx4Ew {
    /* Stacked on top — fades in over the active layer. Page swaps
       activeTab after the same 500ms window so the layer seamlessly
       takes over without flicker. */
    opacity: 0;
    animation: PricingPage-module__bgLayerFadeIn___TIkbR 500ms ease forwards;
}

@keyframes PricingPage-module__bgLayerFadeIn___TIkbR {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 767px) {
    .PricingPage-module__bgLayer___mwkgy {
        background-image: var(--bg-mobile);
    }
}

/* ══════════ BOTTOM SECTIONS (white surface) ════════════════════ */

.PricingPage-module__bottomSections____wi2Q {
    padding-block: var(--pb-space-80);
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-80);
}

@media (max-width: 991px) {
    .PricingPage-module__bottomSections____wi2Q {
        gap: var(--pb-space-64);
    }
}

@media (max-width: 767px) {
    .PricingPage-module__bottomSections____wi2Q {
        padding-block: var(--pb-space-48);
        gap: var(--pb-space-48);
    }
}

/* ══════════ HERO ════════════════════════════════════════════════ */

/* Hero block: tight 12px gap between H1 and sub-line, less padding
   below since the cards now follow with a 24px section-gap. */
.PricingPage-module__hero___r9iIX {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pb-space-12);
    padding-block: var(--pb-space-32) var(--pb-space-8);
}

/* Promo banner — pill on white bg, with inline SALE-30 code chip.
   Live: white pill (#FFFFFF) with semi-transparent dark text and a
   dark-text inline pill. */
.PricingPage-module__heroPromo___csc7q {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pb-space-8);
    padding: var(--pb-space-4) var(--pb-space-16);
    border-radius: var(--pb-radius-full);
    background: var(--pb-color-white);
    color: var(--pb-color-grey-80);
    font-size: var(--pb-text-body);
    line-height: var(--pb-leading-l);
    font-weight: 400;
}

/* Live "SALE 30" pill: 14px / weight 600, padding 5px 16px, full pill bg
   subtle grey (live grey-10 essentially), color rgba(0,0,0,0.65). */
.PricingPage-module__heroPromoCode___Oil11 {
    display: inline-flex;
    align-items: center;
    padding: 5px var(--pb-space-16);
    border-radius: var(--pb-radius-full);
    background: var(--pb-color-grey-10);
    color: var(--pb-color-grey-80);
    font-weight: 600;
    font-size: var(--pb-text-body-sm); /* 14px (was 12px) */
    line-height: var(--pb-leading-m);
    letter-spacing: normal;
}

/* H1 sits on the photo bg — live uses white text. */
.PricingPage-module__heroTitle___kV5uy {
    margin: 0;
    font-family: var(--pb-font-display);
    font-size: var(--pb-display-l-size);
    line-height: var(--pb-display-l-lh);
    letter-spacing: var(--pb-display-l-tracking);
    font-weight: 500;
    color: var(--pb-color-white);
    max-width: 880px;
    text-wrap: balance;
}

/* Sub line: "Sign up to get 10 free credits to explore. Try Free Plan ›"
   Live spec: 16px / weight 400 / lh 22.4 / color WHITE — sits on the
   sky photo bg same as the H1. Both inline links inherit the white. */
.PricingPage-module__heroSub___FKWov {
    margin: 0;
    max-width: 640px;
    font-size: var(--pb-text-body); /* 16px */
    line-height: 1.4; /* 22.4 = 16 * 1.4 */
    font-weight: 400;
    color: var(--pb-color-white);
}

/* Inline links inside the hero sub-line — "Sign up" and "Try Free Plan ›".
   Inherit the white parent color, underlined to read as links over the
   sky photo bg (matches live's `.link-16` / `.text_link.white`). */
.PricingPage-module__heroSubLink___FNZNI {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}

.PricingPage-module__heroSubLink___FNZNI:hover {
    opacity: 0.85;
}

/* Tablet/phone: scale H1 down + tighten heroSurface padding so the
   cards remain visible above the fold. */
@media (max-width: 767px) {
    .PricingPage-module__heroTitle___kV5uy {
        font-size: var(--pb-display-xs-size); /* 32px on phone */
        line-height: var(--pb-display-xs-lh);
        letter-spacing: var(--pb-display-xs-tracking);
        padding-inline: var(--pb-space-16);
    }
    .PricingPage-module__heroSub___FKWov {
        font-size: var(--pb-text-body-sm); /* 14px on phone */
        line-height: var(--pb-leading-l);
        padding-inline: var(--pb-space-16);
    }
    .PricingPage-module__heroPromoCode___Oil11 {
        font-size: var(--pb-text-caption); /* 12px on phone */
    }
    .PricingPage-module__hero___r9iIX {
        padding-block: var(--pb-space-16) var(--pb-space-8);
    }
}

/* ══════════ SECTION HEADER (shared) ════════════════════════════ */

.PricingPage-module__sectionHeader___B1CaP {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--pb-space-16);
    margin-bottom: var(--pb-space-48);
}

/* Live "Know exactly what each generation costs" specs (measured 2026-05-03):
   48px / 57.6px Inter Display, weight 500, color #34324A (--pb-text-heading). */
.PricingPage-module__sectionTitle___KMQgB {
    margin: 0;
    font-family: var(--pb-font-display);
    font-size: var(--pb-font-size-5xl); /* 48px */
    line-height: 1.2; /* 57.6px = 48 * 1.2 */
    letter-spacing: normal; /* live: normal, not tracked */
    font-weight: 500;
    color: var(--pb-text-heading);
    max-width: 880px;
    text-wrap: balance;
}

/* Live sub: 16px / 22.4px (1.4 lh), weight 400, color rgba(0,0,0,0.65). */
.PricingPage-module__sectionSub___BoSNt {
    margin: 0;
    max-width: 640px;
    font-size: var(--pb-text-body); /* 16px */
    line-height: 1.4; /* 22.4px = 16 * 1.4 */
    font-weight: 400;
    color: var(--pb-color-grey-80); /* rgba(0,0,0,0.65) */
}

/* Mid breakpoint (tablet) — scale section title down. */
@media (max-width: 991px) {
    .PricingPage-module__sectionTitle___KMQgB {
        font-size: var(--pb-display-s-size); /* 40px */
        line-height: var(--pb-display-s-lh);
        letter-spacing: var(--pb-display-s-tracking);
    }
}

@media (max-width: 767px) {
    .PricingPage-module__sectionTitle___KMQgB {
        font-size: var(--pb-display-xs-size); /* 32px */
        line-height: var(--pb-display-xs-lh);
        letter-spacing: var(--pb-display-xs-tracking);
        padding-inline: var(--pb-space-16);
    }
    .PricingPage-module__sectionSub___BoSNt {
        font-size: var(--pb-text-body-sm); /* 14px */
        line-height: var(--pb-leading-l);
        padding-inline: var(--pb-space-16);
    }
    .PricingPage-module__sectionHeader___B1CaP {
        margin-bottom: var(--pb-space-32);
    }
}

/* ══════════ FULL-ACCESS BAND ═══════════════════════════════════ */

.PricingPage-module__fullAccess___Er3H5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--pb-space-32);
}

.PricingPage-module__fullAccessTitle___nPodk {
    margin: 0;
    font-family: var(--pb-font-display);
    font-size: var(--pb-display-xs-size);
    line-height: var(--pb-display-xs-lh);
    letter-spacing: var(--pb-display-xs-tracking);
    font-weight: 500;
    color: var(--pb-text-default);
}

.PricingPage-module__fullAccessList___zHmXU {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pb-space-16) var(--pb-space-32);
    list-style: none;
    margin: 0;
    padding: 0;
}

.PricingPage-module__fullAccessItem____aT3q {
    display: inline-flex;
    align-items: center;
    gap: var(--pb-space-8);
    font-size: var(--pb-text-body);
    line-height: var(--pb-leading-l);
    color: var(--pb-text-default);
}

.PricingPage-module__fullAccessCheck___XTaWi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pb-dim-20);
    height: var(--pb-dim-20);
    border-radius: var(--pb-radius-full);
    background: var(--pb-color-tertiary);
    color: var(--pb-color-white);
    font-weight: 700;
    font-size: var(--pb-text-caption);
}

/* ══════════ CREDIT-COST TABLES ═════════════════════════════════ */
/* Live structure: 3 stacked sub-sections (Image Generation / Video
   Generation / Image Editing) — each with its own heading + table.
   Row stripes: zebra with #FAFAFA on alternating rows. */

.PricingPage-module__creditCosts___qBRuD {
    width: 100%;
    max-width: var(--pb-container-content-width); /* 1160px */
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-48);
}

.PricingPage-module__creditSubSection___M32ph {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-16);
}

/* Live spec: 20px Inter Display weight 500, lh 30, ls -0.2px,
   color #34324A, padding 20px 16px (acts as table-row). */
.PricingPage-module__creditSubTitle____NSn2 {
    margin: 0;
    padding: var(--pb-space-20) var(--pb-space-16);
    font-family: var(--pb-font-display);
    font-size: var(--pb-text-xl); /* 20px (was 24) */
    font-weight: 500; /* live = 500 (was 600) */
    line-height: 1.5; /* 30px = 20 * 1.5 */
    letter-spacing: var(--pb-tracking-loose); /* -0.2px */
    color: var(--pb-text-heading); /* #34324A */
    background: var(--pb-color-white);
    border-bottom: 1px solid var(--pb-color-grey-30);
}

.PricingPage-module__creditTableWrap___PLu8d {
    background: var(--pb-color-white);
    border-radius: var(--pb-radius-card);
    overflow: hidden;
}

.PricingPage-module__creditTable___IxWVm {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--pb-font-sans);
    font-size: var(--pb-text-body);
    line-height: var(--pb-leading-l);
    color: var(--pb-color-grey-80);
}

.PricingPage-module__creditTable___IxWVm tbody tr:nth-child(even) {
    background: var(--pb-surface-10); /* #FAFAFA — live stripe */
}

.PricingPage-module__creditTable___IxWVm tbody td {
    padding: var(--pb-space-16) var(--pb-space-24);
}

.PricingPage-module__creditTable___IxWVm tbody td.PricingPage-module__cellName___X_NOc {
    font-weight: 500;
    color: var(--pb-text-default);
    width: 50%;
}

.PricingPage-module__creditTable___IxWVm tbody td.PricingPage-module__cellCost___F5UJq {
    font-weight: 500;
    color: var(--pb-text-default);
    width: 30%;
}

.PricingPage-module__creditTable___IxWVm tbody td.PricingPage-module__cellTime___tkYSw {
    color: var(--pb-color-grey-80);
    width: 20%;
    text-align: right;
}

@media (max-width: 767px) {
    .PricingPage-module__creditCosts___qBRuD {
        gap: var(--pb-space-32);
        padding-inline: var(--pb-space-16);
    }
    .PricingPage-module__creditTable___IxWVm tbody td {
        padding: var(--pb-space-12); /* trim to 12 on phone */
        font-size: var(--pb-text-body-sm);
    }
    .PricingPage-module__creditTable___IxWVm tbody td.PricingPage-module__cellTime___tkYSw {
        /* Time column is least critical — hide on very narrow viewports */
        font-size: var(--pb-text-caption);
    }
    .PricingPage-module__creditSubTitle____NSn2 {
        font-size: var(--pb-text-xl); /* 18px on mobile */
        padding: var(--pb-space-12);
    }
}

/* Very narrow phones (≤480) — hide the time column to avoid wrap. */
@media (max-width: 480px) {
    .PricingPage-module__creditTable___IxWVm tbody td.PricingPage-module__cellTime___tkYSw {
        display: none;
    }
    .PricingPage-module__creditTable___IxWVm tbody td.PricingPage-module__cellName___X_NOc { width: 60%; }
    .PricingPage-module__creditTable___IxWVm tbody td.PricingPage-module__cellCost___F5UJq { width: 40%; }
}

/* ══════════ FAQ ════════════════════════════════════════════════ */

.PricingPage-module__faqSection___A_nVJ {
    max-width: 800px;
    margin-inline: auto;
    width: 100%;
}

@media (max-width: 767px) {
    .PricingPage-module__faqSection___A_nVJ {
        padding-inline: var(--pb-space-16);
    }
}