/**
 * pricing_v2.css — styles for the /pricing/ page.
 *
 * All rules scoped under .pricing-v2 so nothing leaks into legacy CSS.
 *
 * Design tokens mirror the header_v2 / footer_v2 / profile_v2 family —
 * keep in sync if one of the others changes:
 *
 *   brand            #245494  (trend blue, primary accent)
 *   brand-dark       #1E4A84  (CTA hover)
 *   brand-soft       #E8EEF6  (tinted backgrounds inside brand sections)
 *   accent-violet    #7C3AED  (deep analysis — thoughtful/analytical)
 *   accent-emerald   #059669  (market & policy insights — growth/markets)
 *   accent-amber     #D97706  (weekly briefings — warm/scheduled)
 *   Palette rationale: four clearly distinct hues on the wheel (blue ↔
 *   violet ↔ emerald ↔ amber) instead of three near-blues + amber. Each
 *   tile now reads as a different category at a glance.
 *   text             #111827  (headings)
 *   body             #374151  (paragraphs)
 *   muted            #6B7280  (helper text)
 *   faint            #9CA3AF  (fineprint)
 *   border           #E5E7EB  (card borders, dividers)
 *   bg-soft          #F3F4F6  (hover fills)
 *   bg-page          #FAFAFC  (page bg accent — slightly cooler than pure #fafafa)
 *   bg-card          #FFFFFF
 *   radius           8px (buttons/inputs), 16px (premium card), 12px (options)
 *
 * Currency toggle (#pricing-v2-grid.is-azn / .is-usd / .is-eur) drives
 * visibility of per-currency <span>s; JS only flips the class.
 *
 * Feature tiles use BEM-style modifier classes (-news / -analysis /
 * -insights / -briefings) to vary the icon accent color per feature —
 * adds color without leaving the brand family.
 */

/* ============================================================
 * Scoping + layout primitives
 * ========================================================== */
.pricing-v2 {
    color: #374151;
    background: linear-gradient(180deg, #ffffff 0%, #FAFAFC 40%, #FAFAFC 100%);
    /* Soft gradient fade from pure white at the hero down to a cool-gray
       body. Subtle enough to feel intentional, not "designy". */
}

.pricing-v2 .container {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ============================================================
 * Hero
 * ========================================================== */
.pricing-v2-hero {
    /* Tight top padding — header v2 already carries its own bottom margin,
       so we only need enough breathing room to separate the H1 from the
       nav. Previously 64px; cut by half after feedback that the pricing
       table was pushed too far down the fold. */
    padding: 28px 0 20px;
    text-align: center;
}
.pricing-v2-hero-title {
    margin: 0 0 14px;
    font-size: 44px;
    line-height: 1.1;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.02em;
    /* Gradient text — soft brand-blue sweep. Falls back to solid #111827 on
       browsers that don't support background-clip:text (ancient IE). */
    background: linear-gradient(120deg, #111827 0%, #245494 60%, #3667B2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pricing-v2-hero-subtitle {
    margin: 0 auto;
    max-width: 620px;
    font-size: 17px;
    line-height: 1.55;
    color: #6b7280;
}

/* ============================================================
 * Currency bar — thin row BETWEEN Premium and Business. Placed
 * below Premium (not above) so the pricing card is the first thing
 * the eye lands on; the toggle is a secondary, quiet control.
 * ========================================================== */
.pricing-v2-currency-bar {
    padding: 4px 0 28px;
}
.pricing-v2-currency-bar > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap; /* collapses to two rows on narrow viewports */
}

/* Billing note on the left — same muted register as the old fineprint
   that lived under the options, but without the top border (not needed
   now that it's on its own row, not "appended" to anything). Max-width
   keeps the line length readable even when the container is wide. */
.pricing-v2-currency-bar-note {
    margin: 0;
    max-width: 520px;
    font-size: 12px;
    line-height: 1.5;
    color: #9ca3af;
}

/* Right-side wrapper groups the "Currency" label and the pill switcher so
   they move together when the row wraps on narrow screens. */
.pricing-v2-currency-bar-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.pricing-v2-currency-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #9ca3af;
}

/* Segmented pill — same pattern as header/footer v2 lang switcher. */
.pricing-v2-currency {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border-radius: 8px;
}
.pricing-v2-currency-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #4b5563;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.pricing-v2-currency-item + .pricing-v2-currency-item { margin-left: -1px; }
.pricing-v2-currency-item:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.pricing-v2-currency-item:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.pricing-v2-currency-item:hover {
    color: #245494;
    border-color: #245494;
    background: #f8fafc;
    position: relative;
    z-index: 1;
}
.pricing-v2-currency-item.is-active {
    color: #ffffff;
    background: #245494;
    border-color: #245494;
    cursor: default;
}

/* ============================================================
 * Trend Premium card
 *
 * Single two-column card holding the full plan pitch. Subtle brand-tinted
 * gradient across the whole card, with the right rail set to solid white
 * so the pricing options pop.
 * ========================================================== */
.pricing-v2-premium {
    /* Currency bar now follows Premium — it supplies the bottom breathing
       room (28px), so we keep this section's bottom padding compact. */
    padding: 8px 0 24px;
}
.pricing-v2-premium-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    background: linear-gradient(135deg, #ffffff 0%, #F4F7FC 100%);
    border: 1px solid #E3E8F0;
    border-radius: 16px;
    overflow: hidden; /* clips the subtle inner accents below */
    box-shadow: 0 10px 32px -10px rgba(17, 24, 39, 0.08);
}
/* Thin rainbow stripe at the top of the card — subtly previews the four
   feature-tile accents below (blue → violet → emerald → amber) so the
   palette feels composed rather than random. Absolute so it doesn't
   add height. */
.pricing-v2-premium-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg,
        #245494 0%,
        #7C3AED 40%,
        #059669 75%,
        #D97706 100%);
}

.pricing-v2-premium-left {
    padding: 40px 44px 40px;
}
.pricing-v2-premium-head {
    margin-bottom: 24px;
}
.pricing-v2-premium-title {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.015em;
}
.pricing-v2-premium-tag {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #374151;
}

.pricing-v2-features-title {
    margin: 8px 0 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #9ca3af;
}

/* Feature tiles — 2x2 grid on desktop, stacked at narrow widths. */
.pricing-v2-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.pricing-v2-feature {
    display: flex;
    gap: 14px;
}
.pricing-v2-feature-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    /* Default accent — brand blue. Per-feature modifiers below override. */
    color: #245494;
    background: #E8EEF6;
}
.pricing-v2-feature-icon svg {
    width: 22px;
    height: 22px;
}
.pricing-v2-feature-body h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}
.pricing-v2-feature-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
}

/* Per-feature accent colors. Each pairs a muted ~10% tint background with
   a saturated foreground — same recipe across all four, just shifted on
   the color wheel to separate the categories visually:
     news      → blue     (brand)
     analysis  → violet   (analytical, thoughtful)
     insights  → emerald  (markets / growth)
     briefings → amber    (calendar / warmth)
   Previous palette was three near-blues + amber — collapsed into one mass
   at a glance. Four distinct hues fix that without leaving the brand. */
.pricing-v2-feature--news      .pricing-v2-feature-icon { color: #245494; background: #E8EEF6; }
.pricing-v2-feature--analysis  .pricing-v2-feature-icon { color: #7C3AED; background: #F3EDFF; }
.pricing-v2-feature--insights  .pricing-v2-feature-icon { color: #059669; background: #D1FAE5; }
.pricing-v2-feature--briefings .pricing-v2-feature-icon { color: #D97706; background: #FEF3C7; }

/* ============================================================
 * Right rail — pricing options
 * ========================================================== */
.pricing-v2-premium-right {
    padding: 32px 36px 28px;
    background: #ffffff;
    border-left: 1px solid #E3E8F0;
    display: flex;
    flex-direction: column;
    /* 28px gap (was 14) — the Annual card's MOST POPULAR badge pokes 12px
       above the card, and the Annual card itself is lifted -4px via
       translateY. With the old 14px gap the badge collided with the bottom
       edge of Monthly. 28px leaves clean separation without wasting space. */
    gap: 28px;
}

/* Base option card — no longer a plain white box. Both Monthly and Annual
   get a soft cool-gray gradient so they read as "real product cards" the
   moment the user lands on them. The gradient is intentionally quiet
   (slate-white wash) — the contrast between Monthly and Annual comes from
   the --featured overrides below, not from Monthly being bland. */
.pricing-v2-option {
    position: relative;
    /* Trimmed from 22/22/24 → 18/20/20 — makes each card ~10px shorter so
       the two-card stack aligns better with the left column's features
       grid. The prices themselves stay 46px so they still dominate. */
    padding: 18px 20px 20px;
    background: linear-gradient(160deg, #FBFCFE 0%, #F1F5FB 100%);
    border: 1px solid #DCE3EE;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04),
                0 4px 12px -6px rgba(36, 84, 148, 0.08);
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.pricing-v2-option:hover {
    border-color: #C2CDDE;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(17, 24, 39, 0.05),
                0 12px 26px -10px rgba(36, 84, 148, 0.18);
}

/* Featured (Annual) — clearly the hero card:
   - 2px brand-blue border with a richer blue-violet gradient fill
   - Deeper colored shadow (blue-tinted, not neutral gray)
   - Lifted 4px at rest so it sits visually above Monthly
   (Earlier versions had a top-edge gradient ::before strip — removed
   because it clashed with the rounded corners and added visual noise
   without carrying information.) */
.pricing-v2-option--featured {
    border: 2px solid #245494;
    background:
        linear-gradient(150deg, #EEF3FB 0%, #E4EEFC 45%, #E8E7FB 100%);
    box-shadow: 0 4px 8px rgba(36, 84, 148, 0.08),
                0 18px 36px -12px rgba(36, 84, 148, 0.32);
    transform: translateY(-4px);
}
.pricing-v2-option--featured:hover {
    transform: translateY(-7px);
    box-shadow: 0 6px 12px rgba(36, 84, 148, 0.10),
                0 22px 44px -12px rgba(36, 84, 148, 0.42);
}

/* "MOST POPULAR" floating badge — occupies the corner slot the old SAVE
   badge used to fill. Social-proof cue visible at a glance from across the
   page; the exact savings number is carried by the green hint pill near
   the CTA, so the two elements now complement instead of duplicate. */
.pricing-v2-option-popular {
    position: absolute;
    top: -12px;
    right: 18px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(135deg, #245494 0%, #3667B2 100%);
    border-radius: 999px;
    box-shadow: 0 4px 12px -2px rgba(36, 84, 148, 0.50);
}

/* Yearly-savings supporting line — green-accented "check + reason" strip
   under the per-month equiv. Green because "saving money" is universally
   read as a positive signal (emerald palette already in use on the
   insights feature tile, so it stays in-family). */
.pricing-v2-option-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #047857;
    background: rgba(16, 185, 129, 0.10);
    border-radius: 6px;
}
.pricing-v2-option-hint-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #059669;
}
.pricing-v2-option-hint-icon svg { width: 100%; height: 100%; }

.pricing-v2-option-head {
    margin-bottom: 8px;
}
.pricing-v2-option-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6b7280;
}

.pricing-v2-option-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    /* min-height dropped 56 → 48 — still enough to keep the row baseline
       stable across AZN (digits only) vs. USD/EUR (symbol + digits), but
       doesn't over-reserve empty vertical space. */
    min-height: 48px;
}
.pricing-v2-price {
    display: none; /* only active currency shown (grid.is-<cur> rule below) */
    align-items: baseline;
    /* Bumped from 34px → 46px so the number does the heavy lifting of
       attracting the eye — the whole card exists to sell the price. */
    font-size: 46px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.025em;
    line-height: 1;
}
.pricing-v2-price-amount { font-size: inherit; }
.pricing-v2-price-cur {
    /* Currency mark scales with the amount — 22px keeps the "$" / "€" /
       "AZN" readable without competing with the number. */
    font-size: 22px;
    font-weight: 700;
    color: #6b7280;
    margin-left: 5px;
}
/* USD/EUR render symbol first — no left margin on the leading currency mark. */
.pricing-v2-price--usd .pricing-v2-price-cur,
.pricing-v2-price--eur .pricing-v2-price-cur {
    margin-left: 0;
    margin-right: 2px;
}
.pricing-v2-price-period {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    align-self: center;
}
.pricing-v2-option--featured .pricing-v2-price {
    color: #1E4A84;
}

.pricing-v2-option-sub {
    margin: 0 0 10px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}
.pricing-v2-option-sub > span { display: none; }

/* Currency gate — active .is-<cur> on the grid reveals the matching span.
   Covers prices AND the per-month equivalent line on the annual card. */
#pricing-v2-grid.is-azn .pricing-v2-price--azn,
#pricing-v2-grid.is-azn .pricing-v2-option-sub > span[data-currency="azn"],
#pricing-v2-grid.is-usd .pricing-v2-price--usd,
#pricing-v2-grid.is-usd .pricing-v2-option-sub > span[data-currency="usd"],
#pricing-v2-grid.is-eur .pricing-v2-price--eur,
#pricing-v2-grid.is-eur .pricing-v2-option-sub > span[data-currency="eur"] {
    display: inline-flex;
}

.pricing-v2-option .pricing-v2-cta {
    margin-top: 10px;
}


/* ============================================================
 * CTA button — shared across Premium and Business surfaces
 * ========================================================== */
.pricing-v2-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #245494;
    background: #ffffff;
    border: 1px solid #245494;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.pricing-v2-cta:hover {
    color: #ffffff;
    background: #245494;
    border-color: #245494;
    text-decoration: none;
}
.pricing-v2-cta--primary {
    color: #ffffff;
    background: linear-gradient(135deg, #245494 0%, #1E4A84 100%);
    border-color: #245494;
    box-shadow: 0 4px 12px -4px rgba(36, 84, 148, 0.50);
}
.pricing-v2-cta--primary:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #1E4A84 0%, #163A6A 100%);
    box-shadow: 0 6px 16px -4px rgba(36, 84, 148, 0.60);
}
.pricing-v2-cta--ghost {
    color: #6b7280;
    background: transparent;
    border-color: #E5E7EB;
}
.pricing-v2-cta--ghost:hover {
    color: #111827;
    background: #F3F4F6;
    border-color: #D1D5DB;
}
/* Inline variant for the Business card — auto-sized to content instead of
   100%-width (otherwise it would stretch across the whole card). */
.pricing-v2-cta--inline {
    width: auto;
    padding: 12px 28px;
}
.pricing-v2-cta:disabled,
.pricing-v2-cta.is-loading {
    opacity: 0.65;
    cursor: wait;
    pointer-events: none;
}

/* ============================================================
 * Trend for Business
 *
 * Darker-toned card for visual contrast with Premium. Collapsed state =
 * headline + tagline + description + CTA. Clicking the CTA reveals the
 * form inline (pricing_v2.js).
 * ========================================================== */
.pricing-v2-business {
    padding: 0 0 56px;
}
.pricing-v2-business-card {
    position: relative;
    background:
        radial-gradient(circle at 85% 15%, rgba(99, 102, 241, 0.25) 0%, transparent 55%),
        linear-gradient(135deg, #1B3A6B 0%, #122849 100%);
    color: #E8EEF6;
    border-radius: 16px;
    padding: 44px 48px;
    box-shadow: 0 20px 48px -20px rgba(17, 24, 39, 0.45);
    overflow: hidden;
}
/* Ambient accent — large soft disc bleeding off the bottom-left corner.
   Pure decoration; purely visual noise to keep the dark card from feeling
   flat. pointer-events:none so it never intercepts clicks. */
.pricing-v2-business-card::after {
    content: '';
    position: absolute;
    left: -80px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(36, 132, 255, 0.25) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(20px);
}

.pricing-v2-business-title {
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.015em;
}
.pricing-v2-business-lead {
    margin: 0 0 16px;
    font-size: 19px;
    line-height: 1.45;
    font-weight: 600;
    color: #ffffff;
}
.pricing-v2-business-desc {
    margin: 0 0 28px;
    max-width: 640px;
    font-size: 15px;
    line-height: 1.6;
    color: #C9D4E6;
}

.pricing-v2-business-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    position: relative; /* above the ::after decoration */
    z-index: 1;
}
/* The form is hidden via the [hidden] attribute in markup; JS removes it
   on reveal. The matching rule keeps the attribute honored while also
   animating the reveal (we use max-height + opacity instead of height
   because auto→value animation doesn't work in CSS). */
.pricing-v2-form[hidden] { display: none; }
.pricing-v2-form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    margin-top: 0;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 12px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
    color: #374151;
    /* Fade-in animation on reveal — small scale + opacity to feel responsive. */
    animation: pricing-v2-reveal 0.22s ease-out;
}
@keyframes pricing-v2-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pricing-v2-form-head {
    margin-bottom: 4px;
}
.pricing-v2-form-head h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}
.pricing-v2-form-head p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.pricing-v2-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.pricing-v2-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pricing-v2-field label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.pricing-v2-field-optional {
    font-weight: 500;
    color: #9ca3af;
}
.pricing-v2-field input,
.pricing-v2-field textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: #111827;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.pricing-v2-field input:focus,
.pricing-v2-field textarea:focus {
    outline: 0;
    border-color: #245494;
    box-shadow: 0 0 0 3px rgba(36, 84, 148, 0.15);
}
.pricing-v2-field textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.pricing-v2-form-status {
    display: none;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid transparent;
}
.pricing-v2-form-status.is-error {
    display: block;
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}
.pricing-v2-form-status.is-success {
    display: block;
    color: #065f46;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.pricing-v2-form-actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
}

.pricing-v2-form-privacy {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #9ca3af;
}
.pricing-v2-form-privacy a {
    color: #6b7280;
    text-decoration: underline;
}

/* ============================================================
 * Help note
 * ========================================================== */
.pricing-v2-help {
    padding: 0 0 72px;
    text-align: center;
}
.pricing-v2-help p {
    margin: 0;
    font-size: 15px;
    color: #6b7280;
}
.pricing-v2-help a {
    color: #245494;
    font-weight: 600;
}
.pricing-v2-help a:hover {
    color: #1E4A84;
}

/* ============================================================
 * Responsive
 *
 * 900px: stack the Premium card into one column (features above pricing),
 *        stack feature tiles into a single column, tighten padding.
 * 600px: full mobile — smaller type, tighter card padding, stacked form.
 * ========================================================== */
@media (max-width: 900px) {
    .pricing-v2-hero { padding: 22px 0 14px; }
    .pricing-v2-hero-title { font-size: 34px; }
    .pricing-v2-hero-subtitle { font-size: 16px; }

    .pricing-v2-currency-bar { padding: 4px 0 22px; }
    /* Below 900px the billing note stacks above the switcher. Both left-
       aligned on narrow screens (centering the note line reads awkwardly
       with 2+ lines of text). */
    .pricing-v2-currency-bar > .container {
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .pricing-v2-currency-bar-note { max-width: 100%; }

    .pricing-v2-premium-card {
        grid-template-columns: minmax(0, 1fr);
    }
    .pricing-v2-premium-left { padding: 32px 28px 16px; }
    .pricing-v2-premium-right {
        padding: 16px 28px 32px;
        border-left: 0;
        border-top: 1px solid #E3E8F0;
    }
    .pricing-v2-features { grid-template-columns: minmax(0, 1fr); gap: 16px; }

    .pricing-v2-business-card { padding: 36px 28px; }
    .pricing-v2-business-title { font-size: 28px; }
    .pricing-v2-business-lead { font-size: 17px; }
}

@media (max-width: 600px) {
    .pricing-v2 .container { padding-left: 16px; padding-right: 16px; }

    .pricing-v2-hero { padding: 18px 0 12px; }
    .pricing-v2-hero-title { font-size: 28px; }
    .pricing-v2-hero-subtitle { font-size: 15px; }

    .pricing-v2-premium-title { font-size: 26px; }
    .pricing-v2-premium-tag { font-size: 15px; }
    .pricing-v2-premium-left { padding: 28px 20px 12px; }
    .pricing-v2-premium-right { padding: 12px 20px 24px; }

    .pricing-v2-option { padding: 18px 18px 20px; }
    /* Keep the big-number treatment on mobile — smaller than desktop
       (46 → 38) to prevent overflow in the narrow card, but still
       clearly the dominant element on the screen. */
    .pricing-v2-price { font-size: 38px; }
    .pricing-v2-price-cur { font-size: 19px; }

    .pricing-v2-business-card { padding: 28px 20px; }
    .pricing-v2-business-title { font-size: 24px; }

    .pricing-v2-form { padding: 20px; }
    .pricing-v2-form-row { grid-template-columns: 1fr; }
    .pricing-v2-form-actions { grid-template-columns: 1fr; }

    .pricing-v2-currency-item { min-width: 52px; padding: 8px 12px; }
}