/*
Theme Name: BizPlan AI Pro (v4)
Theme URI: https://bizplanaipro.in/
Author: BizPlan AI Team
Author URI: https://bizplanaipro.in/
Description: Premium India-focused SaaS theme for BizPlan AI Pro. One shared design system across the homepage, product pages, GST pages, articles, industry pages and free tools. Presentation only — the SEO and content layer is carried over from v3 unchanged.
Version: 4.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bizplan-ai
Tags: saas, business, india, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Colour + typography values are transcribed from the approved UI Design
   System sheet. Spacing, radius, shadow and layout values are from the
   phase spec's layout section. Nothing here is invented.
   ========================================================================== */

:root {
    /* ---- colour: approved palette ---- */
    --bpa-primary:         #2563EB;
    --bpa-primary-hover:   #1D4ED8;
    --bpa-primary-soft:    #EFF6FF;
    --bpa-secondary:       #7C3AED;
    --bpa-secondary-soft:  #F5F3FF;
    --bpa-grad-from:       #4F46E5;
    --bpa-grad-to:         #7C3AED;

    --bpa-success:         #22C55E;
    --bpa-success-soft:    #ECFDF5;
    --bpa-warning:         #F59E0B;
    --bpa-danger:          #EF4444;

    --bpa-bg:              #F9FAFB;
    --bpa-surface:         #FFFFFF;
    --bpa-text:            #111827;
    --bpa-text-muted:      #6B7280;
    --bpa-border:          #E5E7EB;
    --bpa-navy:            #0F172A;
    --bpa-navy-ink:        #CBD5E1;

    /* pastel card tints (mapping report) */
    --bpa-tint-blue:       #EFF6FF;
    --bpa-tint-green:      #ECFDF5;
    --bpa-tint-pink:       #FDF2F8;
    --bpa-tint-purple:     #F5F3FF;
    --bpa-tint-orange:     #FFF7ED;
    --bpa-tint-teal:       #F0FDFA;

    /* ---- typography ---- */
    --bpa-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --bpa-fs-h1: 3rem;      /* 48px */
    --bpa-fs-h2: 2rem;      /* 32px */
    --bpa-fs-h3: 1.125rem;  /* 18px */
    --bpa-fs-body: 1rem;    /* 16px */
    --bpa-fs-meta: 0.875rem;/* 14px */
    --bpa-fw-h1: 700;
    --bpa-fw-h2: 700;
    --bpa-fw-h3: 600;
    --bpa-fw-body: 400;
    --bpa-lh-tight: 1.15;
    --bpa-lh-heading: 1.25;
    --bpa-lh-body: 1.65;

    /* ---- layout ---- */
    --bpa-page: 1200px;
    --bpa-read: 820px;
    --bpa-gutter: 1.5rem;   /* 24px */
    --bpa-section: 5rem;    /* 80px */
    --bpa-gap: 1.5rem;      /* 24px card gap */
    --bpa-gap-sm: 1rem;     /* 16px */
    --bpa-gap-lg: 3rem;     /* 48px two-column gap */
    --bpa-header-h: 72px;

    /* ---- radius / shadow ---- */
    --bpa-radius-btn: 8px;
    --bpa-radius: 12px;
    --bpa-radius-lg: 16px;
    --bpa-radius-pill: 999px;
    --bpa-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 12px rgba(17, 24, 39, .05);
    --bpa-shadow-hover: 0 2px 6px rgba(17, 24, 39, .06), 0 12px 28px rgba(17, 24, 39, .09);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
    margin: 0;
    font-family: var(--bpa-font);
    font-size: var(--bpa-fs-body);
    font-weight: var(--bpa-fw-body);
    line-height: var(--bpa-lh-body);
    color: var(--bpa-text);
    background: var(--bpa-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: var(--bpa-primary); text-decoration: none; transition: color .18s ease; }
a:hover, a:focus { color: var(--bpa-primary-hover); text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 { color: var(--bpa-text); margin: 0 0 .5em; font-weight: var(--bpa-fw-h2); }
h1 { font-size: var(--bpa-fs-h1); font-weight: var(--bpa-fw-h1); line-height: var(--bpa-lh-tight); letter-spacing: -.02em; }
h2 { font-size: var(--bpa-fs-h2); line-height: var(--bpa-lh-heading); letter-spacing: -.01em; }
h3 { font-size: var(--bpa-fs-h3); font-weight: var(--bpa-fw-h3); line-height: 1.4; }
h4 { font-size: 1rem; font-weight: var(--bpa-fw-h3); }
p { margin: 0 0 1rem; }
small { font-size: var(--bpa-fs-meta); }

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.bpa-container { width: 100%; max-width: var(--bpa-page); margin: 0 auto; padding: 0 var(--bpa-gutter); }
.bpa-section { padding: var(--bpa-section) 0; }
.bpa-section--tight { padding: 3rem 0; }
.bpa-section--soft { background: var(--bpa-surface); }
.bpa-section--tint { background: var(--bpa-primary-soft); }
.bpa-read { max-width: var(--bpa-read); margin-left: auto; margin-right: auto; }
.bpa-center { text-align: center; }
.bpa-muted { color: var(--bpa-text-muted); }

.bpa-grid { display: grid; gap: var(--bpa-gap); }
.bpa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bpa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bpa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bpa-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bpa-grid--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.bpa-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bpa-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.bpa-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bpa-gap-lg); align-items: center; }

/* section heading block */
.bpa-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.bpa-head__text { max-width: 720px; }
.bpa-head .bpa-h2 { margin-bottom: .35rem; text-align: left; }
.bpa-h2 { font-size: var(--bpa-fs-h2); font-weight: var(--bpa-fw-h2); }
.bpa-h3 { font-size: var(--bpa-fs-h3); font-weight: var(--bpa-fw-h3); }
.bpa-lede { color: var(--bpa-text-muted); font-size: 1.0625rem; margin: 0; }
.bpa-more { font-weight: 600; white-space: nowrap; }
.bpa-more::after { content: " →"; }

/* ==========================================================================
   5. BUTTONS — Primary / Secondary / Ghost (design sheet)
   ========================================================================== */

.bpa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8125rem 1.5rem;                       /* ~13px 24px */
    border: 1px solid transparent; border-radius: var(--bpa-radius-btn);
    background: var(--bpa-primary); color: #fff;
    font-size: .9375rem; font-weight: 600; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bpa-btn:hover, .bpa-btn:focus { background: var(--bpa-primary-hover); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: var(--bpa-shadow); }
.bpa-btn:focus-visible { outline: 2px solid var(--bpa-navy); outline-offset: 2px; }
.bpa-btn:active { transform: translateY(0); }

.bpa-btn--secondary { background: var(--bpa-surface); color: var(--bpa-text); border-color: var(--bpa-border); }
.bpa-btn--secondary:hover, .bpa-btn--secondary:focus { background: var(--bpa-bg); color: var(--bpa-primary); border-color: var(--bpa-primary); }

.bpa-btn--ghost { background: transparent; color: var(--bpa-primary); border-color: transparent; padding-left: .5rem; padding-right: .5rem; }
.bpa-btn--ghost:hover, .bpa-btn--ghost:focus { background: var(--bpa-primary-soft); color: var(--bpa-primary-hover); box-shadow: none; }

.bpa-btn--lg { padding: 1rem 1.75rem; font-size: 1rem; border-radius: var(--bpa-radius-btn); }
.bpa-btn--sm { padding: .5rem 1rem; font-size: var(--bpa-fs-meta); }
.bpa-btn--block { display: flex; width: 100%; }
.bpa-btn--wa { background: #25D366; border-color: #25D366; color: #06301C; }
.bpa-btn--wa:hover, .bpa-btn--wa:focus { background: #1EB455; border-color: #1EB455; color: #06301C; }

.bpa-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ==========================================================================
   6. CARDS, BADGES, ALERTS
   ========================================================================== */

.bpa-card {
    display: flex; flex-direction: column;
    background: var(--bpa-surface); border: 1px solid var(--bpa-border);
    border-radius: var(--bpa-radius); padding: 1.5rem;
    box-shadow: var(--bpa-shadow);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.bpa-card:hover { box-shadow: var(--bpa-shadow-hover); transform: translateY(-2px); }
.bpa-card h2, .bpa-card h3 { margin: 0 0 .5rem; color: var(--bpa-text); }
.bpa-card p { color: var(--bpa-text-muted); margin: 0 0 1rem; font-size: .9375rem; }
.bpa-card > :last-child { margin-bottom: 0; }
.bpa-card__icon {
    width: 48px; height: 48px; border-radius: var(--bpa-radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.375rem; margin-bottom: 1rem;
    background: var(--bpa-primary-soft); color: var(--bpa-primary);
}
.bpa-card__link { margin-top: auto; font-weight: 600; font-size: .9375rem; }
.bpa-card__link::after { content: " →"; }

.bpa-card--plain { box-shadow: none; }
.bpa-card--plain:hover { transform: none; box-shadow: var(--bpa-shadow); }
.bpa-card--center { text-align: center; align-items: center; }

/* pastel icon variants — one per tool card, matching the mockup */
.bpa-tint-blue   .bpa-card__icon, .bpa-card__icon--blue   { background: var(--bpa-tint-blue);   color: var(--bpa-primary); }
.bpa-tint-green  .bpa-card__icon, .bpa-card__icon--green  { background: var(--bpa-tint-green);  color: #15803D; }
.bpa-tint-pink   .bpa-card__icon, .bpa-card__icon--pink   { background: var(--bpa-tint-pink);   color: #DB2777; }
.bpa-tint-purple .bpa-card__icon, .bpa-card__icon--purple { background: var(--bpa-tint-purple); color: var(--bpa-secondary); }
.bpa-tint-orange .bpa-card__icon, .bpa-card__icon--orange { background: var(--bpa-tint-orange); color: #EA580C; }
.bpa-tint-teal   .bpa-card__icon, .bpa-card__icon--teal   { background: var(--bpa-tint-teal);   color: #0D9488; }

.bpa-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .7rem; border-radius: var(--bpa-radius-pill);
    background: var(--bpa-bg); border: 1px solid var(--bpa-border);
    color: var(--bpa-text-muted); font-size: .8125rem; font-weight: 600;
}
.bpa-badge--primary { background: var(--bpa-primary-soft); border-color: #BFDBFE; color: var(--bpa-primary-hover); }
.bpa-badge--success { background: var(--bpa-success-soft); border-color: #BBF7D0; color: #15803D; }
.bpa-badge--warning { background: #FFFBEB; border-color: #FDE68A; color: #B45309; }

.bpa-alert {
    border-left: 4px solid var(--bpa-primary);
    background: var(--bpa-primary-soft);
    padding: 1rem 1.25rem; border-radius: var(--bpa-radius-btn);
    color: var(--bpa-text);
}
.bpa-alert--success { border-left-color: var(--bpa-success); background: var(--bpa-success-soft); }

/* ==========================================================================
   7. HERO
   ========================================================================== */

.bpa-hero { position: relative; background: var(--bpa-surface); padding: 3.5rem 0 4rem; overflow: hidden; }
.bpa-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bpa-gap-lg); align-items: center; }
.bpa-hero__inner { max-width: var(--bpa-page); margin: 0 auto; padding: 0 var(--bpa-gutter); position: relative; z-index: 2; }
.bpa-hero h1 { margin: 1rem 0 1rem; }
.bpa-hero__lead { color: var(--bpa-text-muted); font-size: 1.0625rem; margin-bottom: 1.5rem; }
.bpa-hero__lead p:last-child { margin-bottom: 0; }
.bpa-hero__pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .375rem .875rem; border-radius: var(--bpa-radius-pill);
    background: var(--bpa-primary-soft); color: var(--bpa-primary-hover);
    font-size: var(--bpa-fs-meta); font-weight: 600;
}
.bpa-hero__trust { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.5rem; font-size: var(--bpa-fs-meta); color: var(--bpa-text-muted); }
.bpa-hero__trust span { display: inline-flex; align-items: center; gap: .4rem; }
.bpa-hero__trust i { color: var(--bpa-success); }

/* hero visual column: India watermark + floating capability cards */
.bpa-hero__visual { position: relative; min-height: 380px; }
.bpa-hero__watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .07; z-index: 0; }
.bpa-hero__watermark svg { width: 78%; height: auto; }
.bpa-hero__shot { position: relative; z-index: 1; border-radius: var(--bpa-radius-lg); overflow: hidden; box-shadow: var(--bpa-shadow-hover); background: var(--bpa-primary-soft); }
.bpa-hero__shot img { width: 100%; height: auto; }
.bpa-float {
    position: relative; z-index: 2; background: var(--bpa-surface);
    border: 1px solid var(--bpa-border); border-radius: var(--bpa-radius);
    box-shadow: var(--bpa-shadow-hover); padding: 1rem 1.125rem; margin-top: -2.5rem; margin-left: 1.5rem; max-width: 320px;
}
.bpa-float strong { display: block; margin-bottom: .5rem; }
.bpa-float ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem .75rem; font-size: var(--bpa-fs-meta); color: var(--bpa-text-muted); }
.bpa-float li::before { content: "✓"; color: var(--bpa-success); font-weight: 700; margin-right: .35rem; }
.bpa-accent { font-family: "Segoe Script", "Bradley Hand", cursive; color: var(--bpa-secondary); }

/* ==========================================================================
   8. STATS / VALUE BAND
   ========================================================================== */

.bpa-stats { background: var(--bpa-primary-soft); border-radius: var(--bpa-radius-lg); padding: 1.75rem 1.5rem; }
.bpa-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bpa-gap); text-align: center; }
.bpa-stat__value { font-size: 1.75rem; font-weight: 700; color: var(--bpa-primary); line-height: 1.1; }
.bpa-stat__label { font-size: var(--bpa-fs-meta); color: var(--bpa-text-muted); margin-top: .25rem; }

/* ==========================================================================
   9. PANELS (Built for India / Why choose)
   ========================================================================== */

.bpa-panel { border-radius: var(--bpa-radius-lg); padding: 2rem; height: 100%; }
.bpa-panel--blue { background: var(--bpa-primary-soft); }
.bpa-panel--green { background: var(--bpa-success-soft); }
.bpa-panel h2, .bpa-panel h3 { margin: 0 0 .75rem; }
.bpa-panel p { color: var(--bpa-text-muted); }
.bpa-check { list-style: none; margin: 0 0 1rem; padding: 0; }
.bpa-check li { position: relative; padding-left: 1.75rem; margin-bottom: .625rem; }
.bpa-check li::before {
    content: "✓"; position: absolute; left: 0; top: .1rem;
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: var(--bpa-success); color: #fff;
    font-size: .7rem; line-height: 1.15rem; text-align: center; font-weight: 700;
}
.bpa-india-map { margin-top: 1rem; }
.bpa-india-map svg { width: 100%; max-width: 340px; height: auto; opacity: .85; }

/* ==========================================================================
   10. CTA BAND
   ========================================================================== */

.bpa-cta {
    background: linear-gradient(135deg, var(--bpa-grad-from) 0%, var(--bpa-grad-to) 100%);
    color: #fff; border-radius: var(--bpa-radius-lg);
    padding: 2.5rem; display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
}
.bpa-cta h2, .bpa-cta h3 { color: #fff; margin: 0 0 .4rem; }
.bpa-cta p { color: rgba(255, 255, 255, .9); margin: 0; }
.bpa-cta__eyebrow { font-size: var(--bpa-fs-meta); color: rgba(255, 255, 255, .85); margin-bottom: .25rem; }
.bpa-cta__action { text-align: center; }
.bpa-cta__note { font-size: .8125rem; color: rgba(255, 255, 255, .8); margin-top: .5rem; }
.bpa-cta .bpa-btn { background: #fff; color: var(--bpa-primary-hover); }
.bpa-cta .bpa-btn:hover, .bpa-cta .bpa-btn:focus { background: #F3F4F6; color: var(--bpa-primary-hover); }
.bpa-cta .bpa-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.bpa-cta .bpa-btn--ghost:hover, .bpa-cta .bpa-btn--ghost:focus { background: rgba(255, 255, 255, .12); color: #fff; }
.bpa-cta--navy { background: var(--bpa-navy); }

/* in-flow CTA used inside article/product bodies */
.bpa-cta-inline { background: var(--bpa-navy); color: #fff; border-radius: var(--bpa-radius); padding: 2rem 1.75rem; text-align: center; margin: 2.5rem auto; max-width: var(--bpa-read); }
.bpa-cta-inline h2, .bpa-cta-inline h3 { color: #fff; margin: 0 0 .6rem; }
.bpa-cta-inline p { color: var(--bpa-navy-ink); margin: 0 auto 1.25rem; max-width: 640px; }

/* ==========================================================================
   11. HEADER
   ========================================================================== */

.bpa-header { background: var(--bpa-surface); border-bottom: 1px solid var(--bpa-border); position: sticky; top: 0; z-index: 900; }
.bpa-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--bpa-header-h); }
.bpa-brand { display: flex; align-items: center; gap: .625rem; text-decoration: none; flex-shrink: 0; }
.bpa-brand:hover, .bpa-brand:focus { text-decoration: none; }
.bpa-brand img { height: 34px; width: auto; }
.bpa-brand__name { font-size: 1.125rem; font-weight: 700; color: var(--bpa-text); line-height: 1.1; white-space: nowrap; }
.bpa-brand__tag { display: block; font-size: .6875rem; font-weight: 400; color: var(--bpa-text-muted); white-space: nowrap; }
/* The logo file is a full horizontal lockup (icon + wordmark), so it carries the
   brand on its own — give it enough height to read. */
.bpa-brand img.bpa-brand__logo { height: 44px; width: auto; max-width: 100%; display: block; }

.bpa-nav { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.bpa-nav > li { position: relative; }
.bpa-nav > li > a { display: flex; align-items: center; gap: .3rem; color: var(--bpa-text); font-size: var(--bpa-fs-meta); font-weight: 500; white-space: nowrap; min-width: 0; }
.bpa-nav > li > a:hover, .bpa-nav > li > a:focus { color: var(--bpa-primary); text-decoration: none; }
.bpa-nav > li > a i.fa-chevron-down { font-size: .6rem; color: var(--bpa-text-muted); }
.bpa-nav .bpa-dropdown {
    position: absolute; top: calc(100% + .5rem); left: -.75rem; min-width: 260px;
    background: var(--bpa-surface); border: 1px solid var(--bpa-border);
    border-radius: var(--bpa-radius); box-shadow: var(--bpa-shadow-hover);
    padding: .5rem; list-style: none; margin: 0; z-index: 950;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.bpa-nav li:hover > .bpa-dropdown,
.bpa-nav li:focus-within > .bpa-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.bpa-dropdown a { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border-radius: var(--bpa-radius-btn); color: var(--bpa-text); font-size: var(--bpa-fs-meta); }
.bpa-dropdown a:hover, .bpa-dropdown a:focus { background: var(--bpa-bg); color: var(--bpa-primary); text-decoration: none; }
.bpa-dropdown i { width: 1rem; color: var(--bpa-primary); }

.bpa-header__cta { display: flex; align-items: center; gap: .625rem; flex-shrink: 0; }
.bpa-burger { display: none; background: none; border: 1px solid var(--bpa-border); border-radius: var(--bpa-radius-btn); padding: .5rem .65rem; cursor: pointer; }

/* announcement banner (carried from v3, restyled) */
.bpa-banner { position: relative; background: linear-gradient(135deg, #128C7E 0%, #075E54 100%); color: #fff; padding: .625rem 1rem; font-size: var(--bpa-fs-meta); }
.bpa-banner__inner { max-width: var(--bpa-page); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; text-align: center; padding-right: 1.75rem; }
.bpa-banner a { color: #fff; text-decoration: underline; font-weight: 600; }
.bpa-banner .bpa-btn { text-decoration: none; }
.bpa-banner__tag { background: #DCFCE7; color: #166534; border-radius: var(--bpa-radius-pill); padding: .1rem .55rem; font-size: .75rem; font-weight: 700; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.bpa-footer { background: var(--bpa-navy); color: var(--bpa-navy-ink); padding: 3.5rem 0 0; margin-top: var(--bpa-section); }
.bpa-footer a { color: var(--bpa-navy-ink); }
.bpa-footer a:hover, .bpa-footer a:focus { color: #fff; text-decoration: none; }
.bpa-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.5rem; }
.bpa-footer h2, .bpa-footer h3 { color: #fff; font-size: var(--bpa-fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 1rem; }
.bpa-footer__brand { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; }
.bpa-footer__brand img { height: 32px; width: auto; }
.bpa-footer__brand .bpa-footer__logo { height: 40px; width: auto; max-width: 220px; display: block; }
.bpa-footer__brand strong { color: #fff; font-size: 1.0625rem; }
.bpa-footer__tagline { font-size: var(--bpa-fs-meta); line-height: 1.7; margin-bottom: 1.25rem; }
.bpa-footer ul { list-style: none; margin: 0; padding: 0; }
.bpa-footer li { margin-bottom: .5rem; font-size: var(--bpa-fs-meta); }
.bpa-social { display: flex; gap: .625rem; }
.bpa-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; }
.bpa-social a:hover, .bpa-social a:focus { background: var(--bpa-primary); color: #fff; }
.bpa-footer__bar { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 3rem; padding: 1.25rem 0; font-size: var(--bpa-fs-meta); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ==========================================================================
   13. ARTICLE / EDITORIAL SHELL
   ========================================================================== */

.bpa-breadcrumb { font-size: var(--bpa-fs-meta); color: var(--bpa-text-muted); padding: 1rem 0 0; }
.bpa-breadcrumb a { color: var(--bpa-text-muted); }
.bpa-breadcrumb a:hover, .bpa-breadcrumb a:focus { color: var(--bpa-primary); }
.bpa-breadcrumb span[aria-current] { color: var(--bpa-text); font-weight: 600; }

.bpa-page-head { padding: 2rem 0 1.5rem; }
.bpa-page-head h1 { margin-bottom: .75rem; }
.bpa-page-head__meta { font-size: var(--bpa-fs-meta); color: var(--bpa-text-muted); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

.bpa-article { max-width: var(--bpa-read); margin: 0 auto; }
.bpa-article h2 { font-size: 1.5rem; margin: 2.25rem 0 .75rem; }
.bpa-article h3 { font-size: 1.1875rem; margin: 1.75rem 0 .5rem; }
.bpa-article p, .bpa-article li { line-height: 1.8; }
.bpa-article ul, .bpa-article ol { padding-left: 1.25rem; }
.bpa-article img { border-radius: var(--bpa-radius); margin: 1.5rem 0; }
.bpa-article blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--bpa-primary); background: var(--bpa-primary-soft); border-radius: var(--bpa-radius-btn); }

.bpa-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }
.bpa-table-wrap table { margin: 0; }
.bpa-article table, .pseo-content table, .bpa-guide table, .bpa-table-wrap table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.bpa-article th, .bpa-article td, .pseo-content th, .pseo-content td,
.bpa-guide th, .bpa-guide td, .bpa-table-wrap th, .bpa-table-wrap td {
    border: 1px solid var(--bpa-border); padding: .7rem .85rem; text-align: left; vertical-align: top;
}
.bpa-article thead th, .pseo-content thead th, .bpa-guide thead th, .bpa-table-wrap thead th { background: var(--bpa-bg); color: var(--bpa-text); font-weight: 600; }

.bpa-faq { max-width: var(--bpa-read); margin: 0 auto; }
.bpa-faq details { background: var(--bpa-surface); border: 1px solid var(--bpa-border); border-radius: var(--bpa-radius-btn); padding: .9rem 1.15rem; margin-bottom: .65rem; }
.bpa-faq summary { cursor: pointer; font-weight: 600; color: var(--bpa-text); }
.bpa-faq summary:focus-visible { outline: 2px solid var(--bpa-primary); outline-offset: 2px; }
.bpa-faq details[open] summary { margin-bottom: .5rem; }
.bpa-faq p, .bpa-faq details > div { margin: 0; color: var(--bpa-text-muted); line-height: 1.75; }

.bpa-related { border-top: 1px solid var(--bpa-border); margin-top: 2.5rem; padding-top: 1.5rem; max-width: var(--bpa-read); margin-left: auto; margin-right: auto; }
.bpa-related h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
.bpa-related ul { list-style: none; padding: 0; margin: 0; }
.bpa-related li { padding: .45rem 0; border-bottom: 1px solid var(--bpa-border); }
.bpa-related li:last-child { border-bottom: 0; }
.bpa-related a { font-weight: 500; }

/* guide block inside a product page */
.bpa-guide { max-width: var(--bpa-read); margin: 0 auto; padding: var(--bpa-section) var(--bpa-gutter); }
.bpa-guide h2 { font-size: 1.5rem; line-height: 1.3; margin: 2.25rem 0 .75rem; }
.bpa-guide h3 { font-size: 1.1875rem; line-height: 1.35; margin: 1.75rem 0 .5rem; }
.bpa-guide p, .bpa-guide li { line-height: 1.8; }
.bpa-guide ul { padding-left: 1.25rem; }

/* ==========================================================================
   14. FORMS
   ========================================================================== */

.bpa-field { margin-bottom: 1rem; }
.bpa-field label { display: block; font-weight: 600; font-size: var(--bpa-fs-meta); margin-bottom: .375rem; }
.bpa-input, .bpa-field input[type="text"], .bpa-field input[type="email"],
.bpa-field input[type="number"], .bpa-field input[type="search"],
.bpa-field select, .bpa-field textarea {
    width: 100%; padding: .75rem .875rem;
    border: 1px solid var(--bpa-border); border-radius: var(--bpa-radius-btn);
    background: var(--bpa-surface); color: var(--bpa-text); font-size: .9375rem;
}
.bpa-field input:focus, .bpa-field select:focus, .bpa-field textarea:focus { outline: 2px solid var(--bpa-primary); outline-offset: 1px; border-color: var(--bpa-primary); }

.bpa-search-hero { display: flex; gap: .5rem; background: var(--bpa-surface); border: 1px solid var(--bpa-border); border-radius: var(--bpa-radius); padding: .5rem; box-shadow: var(--bpa-shadow); }
.bpa-search-hero input { flex: 1 1 auto; border: 0; background: transparent; padding: .65rem .75rem; min-width: 0; }
.bpa-search-hero input:focus { outline: none; }

/* ==========================================================================
   15. UTILITIES
   ========================================================================== */

.bpa-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bpa-skip-link { position: absolute; left: -9999px; top: 0; background: var(--bpa-primary); color: #fff; padding: .75rem 1rem; z-index: 1000; }
.bpa-skip-link:focus { left: 0; }
.bpa-mt-0 { margin-top: 0; }
.bpa-mb-0 { margin-bottom: 0; }
.bpa-flow > * + * { margin-top: 1rem; }

/* interaction polish, honouring reduced motion */
.bpa-card, .bpa-btn, .bpa-nav .bpa-dropdown { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .bpa-card:hover, .bpa-btn:hover { transform: none; }
}

/* ==========================================================================
   16. WORDPRESS CORE CLASSES
   ========================================================================== */

.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { margin: 0 auto 1rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption { font-size: var(--bpa-fs-meta); color: var(--bpa-text-muted); text-align: center; margin-top: .5rem; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sticky, .gallery-caption, .bypostauthor { /* theme support declaration */ }

/* mobile drawer */
.bpa-mobile { border-top: 1px solid var(--bpa-border); background: var(--bpa-surface); padding: 1rem 0 1.5rem; }
.bpa-mobile__list { list-style: none; margin: 0 0 1rem; padding: 0; }
.bpa-mobile__list li { border-bottom: 1px solid var(--bpa-border); }
.bpa-mobile__list a { display: block; padding: .75rem 0; color: var(--bpa-text); font-size: .9375rem; font-weight: 500; }
.bpa-mobile__list a:hover, .bpa-mobile__list a:focus { color: var(--bpa-primary); text-decoration: none; }
.bpa-mobile[hidden] { display: none; }

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {
    .bpa-nav { display: none; }
    .bpa-burger { display: inline-flex; }
    .bpa-footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
    .bpa-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bpa-grid--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1023.98px) {
    :root { --bpa-fs-h1: 2.5rem; --bpa-fs-h2: 1.75rem; --bpa-section: 3.5rem; }
    .bpa-hero__grid, .bpa-split { grid-template-columns: minmax(0, 1fr); }
    .bpa-grid--4, .bpa-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bpa-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bpa-hero__visual { min-height: 0; }
    .bpa-float { margin-left: 0; }
}

@media (max-width: 767.98px) {
    :root { --bpa-fs-h1: 2rem; --bpa-fs-h2: 1.5rem; --bpa-section: 3rem; --bpa-gutter: 1.25rem; }
    .bpa-grid--2, .bpa-grid--3, .bpa-grid--4, .bpa-grid--6, .bpa-grid--8,
    .bpa-stats__grid, .bpa-grid--auto, .bpa-grid--auto-sm { grid-template-columns: minmax(0, 1fr); }
    .bpa-head { align-items: flex-start; }
    .bpa-head .bpa-h2 { text-align: left; }
    .bpa-cta { padding: 1.75rem 1.25rem; flex-direction: column; align-items: flex-start; }
    .bpa-cta__action { width: 100%; text-align: left; }
    .bpa-footer__grid { grid-template-columns: 1fr 1fr; }
    .bpa-footer__bar { flex-direction: column; align-items: flex-start; }
    .bpa-search-hero { flex-direction: column; }
    .bpa-search-hero .bpa-btn { width: 100%; }
    .bpa-card { padding: 1.25rem; }
    .bpa-float ul { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .bpa-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .bpa-actions { width: 100%; }
    .bpa-actions .bpa-btn { width: 100%; }
}

@media print {
    .bpa-header, .bpa-footer, .bpa-banner, .bpa-cta, .bpa-burger { display: none !important; }
}

/* ==========================================================================
   PHASE K2 — STAGE 3 COMPONENT LAYER
   Styles for the homepage rebuild: the hero composition, the six primary
   pillar cards, secondary tool cards, stats band, industry cards, article
   cards, plans, tables, FAQ and CTA.

   Two families live here, on purpose:
   1. .bpa-*  — the v4 design system applied to the mockup's structure.
   2. the v3 hero/FAQ class names carried through unchanged (.hero-form,
      .fade-in-up, .faq-question, ...). Those markup hooks are selected by the
      inline JS that was preserved verbatim from v3, so they must keep their
      names; they are styled here under those names instead of being renamed.
   ========================================================================== */

/* ---- shared headings ---------------------------------------------------- */
.bpa-head { max-width: 44rem; margin: 0 auto 3rem; text-align: center; }
.bpa-h2--center { text-align: center; margin-bottom: .75rem; }
.bpa-lead { font-size: 1.0625rem; line-height: 1.7; color: var(--bpa-text-muted); margin: 0 0 1rem; }
.bpa-lead--center { text-align: center; margin-left: auto; margin-right: auto; }
.bpa-narrow { max-width: 820px; }

/* ---- eyebrow pill ------------------------------------------------------- */
.bpa-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; margin-bottom: 1.5rem;
    border: 1px solid rgba(37, 99, 235, .2); border-radius: 999px;
    background: rgba(37, 99, 235, .07);
    color: var(--bpa-primary); font-size: .8125rem; font-weight: 600; line-height: 1;
}
.bpa-pill i { font-size: .75rem; }

/* ==========================================================================
   HERO — mockup composition: left content, right visual
   ========================================================================== */
.bpa-hero {
    position: relative; padding: 4rem 0 5rem; overflow: hidden;
    background:
        radial-gradient(1100px 480px at 88% -8%, rgba(124, 58, 237, .12), transparent 62%),
        radial-gradient(900px 420px at 4% 4%, rgba(37, 99, 235, .1), transparent 58%),
        linear-gradient(180deg, #f7f9ff 0%, var(--bpa-surface) 78%);
}
.bpa-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 3.5rem; align-items: center; }
.bpa-hero__left { min-width: 0; }
.bpa-hero__right { min-width: 0; }

.bpa-hero__visual {
    position: relative; aspect-ratio: 1 / 1; max-width: 460px; margin-left: auto;
    border-radius: var(--bpa-radius-lg);
    background: linear-gradient(145deg, #eef2ff 0%, #f5f3ff 52%, #ecfeff 100%);
    border: 1px solid var(--bpa-border);
    box-shadow: var(--bpa-shadow-lg);
    display: flex; align-items: center; justify-content: center;
}
.bpa-hero__india { position: absolute; inset: 0; width: 100%; height: 100%; }

.bpa-float {
    position: absolute; display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1.1rem; max-width: 250px;
    background: var(--bpa-surface); border: 1px solid var(--bpa-border);
    border-radius: 14px; box-shadow: var(--bpa-shadow-md);
    font-size: .8125rem; line-height: 1.35; z-index: 2;
}
.bpa-float i { font-size: 1.05rem; color: var(--bpa-primary); flex: 0 0 auto; }
.bpa-float strong { display: block; color: var(--bpa-text); font-weight: 600; font-size: .8125rem; }
.bpa-float span { display: block; color: var(--bpa-text-muted); font-size: .75rem; }
.bpa-float--tl { top: 8%; left: -6%; }
.bpa-float--br { bottom: 9%; right: -6%; }
.bpa-float--br i { color: var(--bpa-success); }

.bpa-hero__badge {
    position: absolute; bottom: 6%; left: 8%; z-index: 2;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .85rem; border-radius: 999px;
    background: var(--bpa-success); color: #fff;
    font-size: .75rem; font-weight: 600;
    box-shadow: 0 6px 16px rgba(34, 197, 94, .3);
}

/* ---- carried-over hero content (v3 class names, restyled) --------------- */
.hero-subtitle {
    font-size: 1.125rem; line-height: 1.75; color: var(--bpa-text-muted);
    max-width: 40rem; margin: 0 0 2rem;
}
.aeo-executive-summary, .direct-answer-block {
    position: relative; border-radius: var(--bpa-radius);
    padding: 1.1rem 1.25rem 1.1rem 3.25rem;
    margin: 0 0 1.25rem; font-size: .9375rem; line-height: 1.7;
    color: var(--bpa-text); border: 1px solid var(--bpa-border); background: var(--bpa-surface);
}
.aeo-executive-summary { border-left: 4px solid var(--bpa-primary); background: linear-gradient(90deg, rgba(37, 99, 235, .05), rgba(37, 99, 235, 0) 60%); }
.direct-answer-block { border-left: 4px solid var(--bpa-secondary); background: linear-gradient(90deg, rgba(124, 58, 237, .05), rgba(124, 58, 237, 0) 60%); }
.aeo-executive-summary > i, .direct-answer-block > i {
    position: absolute; left: 1.15rem; top: 1.2rem; font-size: 1rem;
}
.aeo-executive-summary > i { color: var(--bpa-primary); }
.aeo-executive-summary strong, .direct-answer-block strong { color: var(--bpa-text); font-weight: 700; }

.hero-input-container { margin: 0 0 1.25rem; max-width: 40rem; }
.hero-form .input-group {
    display: flex; align-items: center; gap: .5rem; padding: .4rem .4rem .4rem 1rem;
    background: var(--bpa-surface); border: 1px solid var(--bpa-border);
    border-radius: 999px; box-shadow: var(--bpa-shadow-sm);
    transition: border-color .2s, box-shadow .2s;
}
.hero-form .input-group:focus-within { border-color: var(--bpa-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.hero-form .input-icon { color: var(--bpa-text-muted); font-size: .9375rem; flex: 0 0 auto; }
.hero-form input[type="text"] {
    flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
    padding: .7rem .25rem; font-family: inherit; font-size: .9375rem; color: var(--bpa-text);
}
.hero-form input[type="text"]::placeholder { color: #9ca3af; }
.btn-generate {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
    padding: .8rem 1.4rem; border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(135deg, var(--bpa-primary) 0%, var(--bpa-secondary) 100%);
    color: #fff; font-family: inherit; font-size: .9375rem; font-weight: 600;
    transition: transform .2s, box-shadow .2s;
}
.btn-generate:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(79, 70, 229, .3); }

.hero-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; max-width: 40rem; }
.trust-signals { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.trust-signals span {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8125rem; font-weight: 500; color: var(--bpa-text-muted);
}
.trust-signals i { color: var(--bpa-success); font-size: .8125rem; }
.demo-link { font-size: .875rem; font-weight: 600; color: var(--bpa-primary); }
.demo-link:hover { text-decoration: underline; }

.bank-approval-section { margin: 1.5rem 0 0; max-width: 40rem; }
.bank-approval-section small { display: block; font-size: .8125rem; color: var(--bpa-text-muted); margin-bottom: .5rem; }
.bank-logos-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bank-logos-inline strong { font-size: .875rem; font-weight: 700; color: var(--bpa-text); letter-spacing: .01em; }
.bank-logos-inline span { color: var(--bpa-border); }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.bpa-stats { padding: 2.5rem 0; border-top: 1px solid var(--bpa-border); border-bottom: 1px solid var(--bpa-border); background: var(--bpa-surface); }
.bpa-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.bpa-stat { text-align: center; min-width: 0; }
.bpa-stat__icon { font-size: 1.35rem; color: var(--bpa-primary); margin-bottom: .5rem; }
.bpa-stat__label { font-size: .875rem; font-weight: 500; color: var(--bpa-text-muted); line-height: 1.5; }

/* ==========================================================================
   CARD SYSTEM
   ========================================================================== */
.bpa-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-bottom: 1rem;
    border-radius: 12px; font-size: 1.15rem;
    background: rgba(37, 99, 235, .1); color: var(--bpa-primary);
}
.bpa-card__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--bpa-text); margin: 0 0 .5rem; }
.bpa-card__title a { color: inherit; }
.bpa-card__title a:hover { color: var(--bpa-primary); text-decoration: none; }
.bpa-card__text { font-size: .9375rem; line-height: 1.7; color: var(--bpa-text-muted); margin: 0 0 1rem; }
.bpa-card__text:last-child { margin-bottom: 0; }
.bpa-card__link { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 600; color: var(--bpa-primary); }
.bpa-card__link i { font-size: .75rem; transition: transform .2s; }
.bpa-card__link:hover { text-decoration: none; }
.bpa-card__link:hover i { transform: translateX(3px); }
.bpa-card__img { width: 100%; height: auto; border-radius: 10px; display: block; }
.bpa-card__thumb { display: block; margin: -1.5rem -1.5rem 1.25rem; border-radius: var(--bpa-radius) var(--bpa-radius) 0 0; overflow: hidden; }
.bpa-card__thumb img { width: 100%; height: 190px; object-fit: cover; display: block; }
.bpa-card__meta { margin-bottom: .75rem; }

/* variants */
.bpa-card--tool, .bpa-card--pillar, .bpa-card--feature, .bpa-card--step, .bpa-card--industry, .bpa-card--post { display: block; }
.bpa-card--pillar { border-top: 3px solid transparent; }
.bpa-card--pillar:hover { border-top-color: var(--bpa-primary); }
.bpa-card--industry { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; padding: 1.5rem 1rem; }
.bpa-card--industry i { font-size: 1.5rem; color: var(--bpa-primary); }
.bpa-card--industry .bpa-card__title { margin: 0; font-size: .9375rem; }
.bpa-card--industry:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--bpa-shadow-md); border-color: rgba(37, 99, 235, .35); }
.bpa-card--step { text-align: left; }
.bpa-card--post { display: flex; flex-direction: column; }
.bpa-card--post .bpa-card__link { margin-top: auto; }
.bpa-card--highlight { background: linear-gradient(135deg, var(--bpa-primary) 0%, var(--bpa-secondary) 100%); border-color: transparent; color: #fff; }
.bpa-card--highlight .bpa-card__title, .bpa-card--highlight .bpa-card__text { color: #fff; }
.bpa-card--highlight .bpa-card__text { color: rgba(255, 255, 255, .9); }
.bpa-card--highlight .bpa-card__icon { background: rgba(255, 255, 255, .18); color: #fff; }
.bpa-card--dark { background: var(--bpa-footer); border-color: rgba(255, 255, 255, .1); }
.bpa-card--dark .bpa-card__title { color: #fff; }
.bpa-card--dark .bpa-card__text { color: rgba(255, 255, 255, .78); }
.bpa-card--dark .bpa-card__icon { background: rgba(255, 255, 255, .12); color: #93c5fd; }

/* icon tints — the v3 bg-* names, kept because the markup carries them */
.bpa-card__icon.bg-blue, .bpa-card__icon--blue { background: rgba(37, 99, 235, .12); color: #2563eb; }
.bpa-card__icon.bg-purple, .bpa-card__icon--purple { background: rgba(124, 58, 237, .12); color: #7c3aed; }
.bpa-card__icon.bg-indigo, .bpa-card__icon--indigo { background: rgba(79, 70, 229, .12); color: #4f46e5; }
.bpa-card__icon.bg-green, .bpa-card__icon--green { background: rgba(34, 197, 94, .12); color: #16a34a; }
.bpa-card__icon.bg-teal, .bpa-card__icon--teal { background: rgba(20, 184, 166, .12); color: #0d9488; }
.bpa-card__icon.bg-orange, .bpa-card__icon--orange { background: rgba(245, 158, 11, .14); color: #d97706; }

/* step number */
.bpa-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 1rem; border-radius: 50%;
    background: linear-gradient(135deg, var(--bpa-primary), var(--bpa-secondary));
    color: #fff; font-weight: 700; font-size: 1rem;
}
.bpa-tag {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .75rem; padding: .3rem .65rem;
    background: var(--bpa-bg); border: 1px solid var(--bpa-border);
    border-radius: 999px; font-size: .75rem; font-weight: 500; color: var(--bpa-text-muted);
}

/* bento spans */
.bpa-span-2col { grid-column: span 2; }
.bpa-span-2row { grid-row: span 2; }

/* ==========================================================================
   BADGES / BUTTON VARIANTS
   ========================================================================== */
.bpa-badge--soft { background: rgba(37, 99, 235, .1); color: var(--bpa-primary); }
.bpa-badge--solid { background: linear-gradient(135deg, var(--bpa-primary), var(--bpa-secondary)); color: #fff; }
.bpa-btn--primary { background: linear-gradient(135deg, var(--bpa-primary), var(--bpa-secondary)); color: #fff; }
.bpa-btn--primary:hover { box-shadow: 0 10px 22px rgba(79, 70, 229, .3); }
.bpa-btn--light { background: #fff; color: var(--bpa-primary); border-color: transparent; }
.bpa-btn--light:hover { background: #f1f5f9; color: var(--bpa-primary); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.bpa-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.bpa-btn--ghost-light:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff; }
.bpa-actions--center { justify-content: center; }

/* ==========================================================================
   TABLES
   ========================================================================== */
.bpa-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.5rem; }
.bpa-table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--bpa-surface); border: 1px solid var(--bpa-border); border-radius: var(--bpa-radius); overflow: hidden; }
.bpa-table th, .bpa-table td { padding: .95rem 1.1rem; text-align: left; font-size: .9375rem; border-bottom: 1px solid var(--bpa-border); }
.bpa-table thead th { background: var(--bpa-bg); font-weight: 700; color: var(--bpa-text); font-size: .875rem; }
.bpa-table tbody tr:last-child td { border-bottom: 0; }
.bpa-table .highlight { background: rgba(37, 99, 235, .05); font-weight: 600; }
.bpa-table thead th.highlight { background: rgba(37, 99, 235, .1); color: var(--bpa-primary); }
.bpa-table i { margin-right: .35rem; }
.bpa-table .fa-check-circle { color: var(--bpa-success); }

/* ==========================================================================
   PLANS (pricing)
   ========================================================================== */
.bpa-plan {
    position: relative; display: flex; flex-direction: column;
    padding: 2rem 1.75rem; background: var(--bpa-surface);
    border: 1px solid var(--bpa-border); border-radius: var(--bpa-radius-lg);
    box-shadow: var(--bpa-shadow-sm); transition: transform .25s, box-shadow .25s;
}
.bpa-plan:hover { transform: translateY(-4px); box-shadow: var(--bpa-shadow-md); }
.bpa-plan--featured { border-color: var(--bpa-primary); border-width: 2px; box-shadow: 0 18px 40px rgba(37, 99, 235, .16); }
.bpa-plan__name { font-size: 1.125rem; font-weight: 700; color: var(--bpa-text); margin: 0 0 .5rem; }
.bpa-plan__price { font-size: 2.5rem; font-weight: 800; line-height: 1.1; color: var(--bpa-text); letter-spacing: -.02em; }
.bpa-plan__period { font-size: .8125rem; color: var(--bpa-text-muted); margin: .25rem 0 1.25rem; }
.bpa-plan__list { list-style: none; margin: 0 0 1.75rem; padding: 0; flex: 1 1 auto; }
.bpa-plan__list li { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem 0; font-size: .9375rem; line-height: 1.55; color: var(--bpa-text); border-bottom: 1px solid var(--bpa-bg); }
.bpa-plan__list li:last-child { border-bottom: 0; }
.bpa-plan__list i { margin-top: .28rem; font-size: .8rem; flex: 0 0 auto; }
.bpa-plan__list .fa-check { color: var(--bpa-success); }
.bpa-plan__list .fa-times { color: #cbd5e1; }
.bpa-plan .bpa-btn { width: 100%; justify-content: center; }

/* credits explainer */
.bpa-note {
    max-width: 860px; margin: 2rem auto 0; padding: 1.5rem;
    border: 1px solid var(--bpa-border); border-left: 4px solid var(--bpa-secondary);
    border-radius: var(--bpa-radius); background: var(--bpa-surface); text-align: left;
}
.bpa-note h3 { font-size: 1.125rem; margin: 0 0 .75rem; color: var(--bpa-text); }
.bpa-note p { font-size: .9375rem; line-height: 1.75; color: var(--bpa-text); margin: 0 0 .75rem; }
.bpa-note p:last-child { margin-bottom: 0; font-size: .875rem; color: var(--bpa-text-muted); }
.bpa-note a { color: var(--bpa-primary); text-decoration: underline; }

/* ==========================================================================
   PANEL (coach banner)
   ========================================================================== */
.bpa-panel {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.5rem; margin-top: 2.5rem; padding: 2rem;
    border-radius: var(--bpa-radius-lg); border: 1px solid var(--bpa-border);
}
.bpa-panel--coach { background: linear-gradient(135deg, rgba(37, 99, 235, .06), rgba(124, 58, 237, .08)); border-color: rgba(124, 58, 237, .22); }
.bpa-panel__body { flex: 1 1 320px; min-width: 0; }
.bpa-panel__title { font-size: 1.25rem; font-weight: 700; color: var(--bpa-text); margin: .6rem 0 .5rem; }
.bpa-panel__text { font-size: .9375rem; line-height: 1.7; color: var(--bpa-text-muted); margin: 0; }

/* ==========================================================================
   FAQ — v3 class names retained because the preserved JS toggles them
   ========================================================================== */
.bpa-faq .faq-item, .faq-item {
    border: 1px solid var(--bpa-border); border-radius: var(--bpa-radius);
    background: var(--bpa-surface); margin-bottom: .875rem; overflow: hidden;
}
.faq-question {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 0; padding: 1.15rem 1.35rem; cursor: pointer;
    font-size: 1.0rem; font-weight: 600; color: var(--bpa-text); line-height: 1.5;
}
.faq-question i { flex: 0 0 auto; font-size: .85rem; color: var(--bpa-primary); transition: transform .25s; }
.faq-question:hover { color: var(--bpa-primary); }
.faq-answer {
    display: none; margin: 0; padding: 0 1.35rem 1.25rem;
    font-size: .9375rem; line-height: 1.8; color: var(--bpa-text-muted);
}

/* ==========================================================================
   CTA
   ========================================================================== */
/* ==========================================================================
   FINAL CTA BAND
   Distinct from the base .bpa-cta component (a flex card): this is a full-bleed
   gradient band, so it must not inherit that component's display:flex.
   ========================================================================== */
.bpa-cta-band {
    padding: var(--bpa-section) var(--bpa-gutter);
    background: linear-gradient(135deg, var(--bpa-primary) 0%, var(--bpa-secondary) 100%);
    color: #fff; text-align: center;
}
.bpa-cta-band__title { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.2; margin: 0 0 .85rem; letter-spacing: -.01em; color: #fff; }
.bpa-cta-band__text { font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, .9); margin: 0 auto 2rem; max-width: 38rem; text-align: center; }

/* ==========================================================================
   ANNOUNCEMENT BANNER — close button only.
   The banner's own colours/sizing come from the base rule above (WhatsApp green,
   carried from v3); this layer must not restyle it.
   ========================================================================== */
.bpa-banner__close {
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: rgba(255, 255, 255, .8);
    font-size: 1.25rem; line-height: 1; cursor: pointer; padding: .25rem .5rem;
}
.bpa-banner__close:hover { color: #fff; }

/* ==========================================================================
   REVEAL — the animation contract with the preserved IntersectionObserver.
   The observer only ever ADDS .visible; if the starting opacity were 0 and the
   script failed, content would be invisible. It animates transform only, and
   the base state stays visible so the page degrades safely.
   ========================================================================== */
.fade-in-up { opacity: 1; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .fade-in-up { transform: none; transition: none; }
    .bpa-card--industry:hover, .bpa-plan:hover, .btn-generate:hover { transform: none; }
}

/* ==========================================================================
   RESPONSIVE — Stage 3 components
   ========================================================================== */
@media (max-width: 1100px) {
    .bpa-hero__grid { grid-template-columns: 1fr; gap: 2.75rem; }
    .bpa-hero__visual { margin: 0 auto; max-width: 400px; }
    .bpa-float--tl { left: 0; }
    .bpa-float--br { right: 0; }
    .bpa-span-2row { grid-row: span 1; }
}
@media (max-width: 900px) {
    .bpa-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
    .bpa-span-2col { grid-column: span 1; }
    .bpa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .bpa-hero { padding: 2.5rem 0 3rem; }
    .hero-subtitle { font-size: 1rem; }
    .hero-form .input-group { flex-wrap: wrap; border-radius: var(--bpa-radius); padding: .75rem; }
    .hero-form input[type="text"] { flex: 1 1 100%; padding: .5rem .25rem; }
    .btn-generate { width: 100%; justify-content: center; }
    .bpa-hero__visual { max-width: 330px; }
    .bpa-float { padding: .7rem .85rem; max-width: 200px; font-size: .75rem; }
    .bpa-float strong { font-size: .75rem; }
    .bpa-float span { font-size: .6875rem; }
    .bpa-float--tl { top: 3%; }
    .bpa-float--br { bottom: 3%; }
    .bpa-panel { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
    .bpa-panel .bpa-btn { width: 100%; justify-content: center; }
    .bpa-card--industry { padding: 1.25rem .75rem; }
    .bpa-plan { padding: 1.5rem 1.25rem; }
    .bpa-cta__title { font-size: 1.5rem; }
    .bpa-card__thumb { margin: -1.25rem -1.25rem 1rem; }
    .bpa-card__thumb img { height: 170px; }
    .bank-logos-inline { gap: .35rem; }
    .bank-logos-inline strong { font-size: .8125rem; }
}
@media (max-width: 560px) {
    .bpa-stats__grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .bpa-stat { display: flex; align-items: center; gap: .75rem; text-align: left; }
    .bpa-stat__icon { margin-bottom: 0; }
    .bpa-grid--4 { grid-template-columns: 1fr; }
    .hero-footer { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .bpa-hero__visual { max-width: 290px; }
    .bpa-float--tl { top: 0; left: -2%; }
    .bpa-float--br { bottom: 0; right: -2%; }
    .bpa-note { padding: 1.15rem; }
    .faq-question { padding: 1rem 1.1rem; font-size: .9375rem; }
    .faq-answer { padding: 0 1.1rem 1.1rem; }
}

/* ==========================================================================
   ARTICLE / PAGE SHELL  (v4 fallback templates)
   ========================================================================== */
.bpa-h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: var(--bpa-text); margin: 0 0 1.25rem; }
.bpa-center { text-align: center; }
.bpa-mt-2 { margin-top: 2rem; }
.bpa-prose { font-size: 1.0625rem; line-height: 1.85; color: var(--bpa-text); }
.bpa-prose > * + * { margin-top: 1.35rem; }
.bpa-prose h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.3; margin-top: 2.5rem; }
.bpa-prose h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; margin-top: 2rem; }
.bpa-prose a { color: var(--bpa-primary); text-decoration: underline; text-underline-offset: 2px; }
.bpa-prose ul, .bpa-prose ol { padding-left: 1.35rem; }
.bpa-prose li + li { margin-top: .5rem; }
.bpa-prose img { border-radius: var(--bpa-radius); height: auto; }
.bpa-prose blockquote {
    margin: 1.75rem 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--bpa-primary);
    background: var(--bpa-bg); border-radius: 0 var(--bpa-radius) var(--bpa-radius) 0; font-style: normal;
}
.bpa-article { background: var(--bpa-surface); border: 1px solid var(--bpa-border); border-radius: var(--bpa-radius-lg); padding: 2.25rem; }
.bpa-article__head { margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--bpa-border); }
.bpa-article__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .875rem; color: var(--bpa-text-muted); }
.bpa-article__meta i { color: var(--bpa-primary); margin-right: .35rem; }
.bpa-article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.bpa-pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 2.5rem; }
.bpa-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
    padding: 0 .75rem; border: 1px solid var(--bpa-border); border-radius: 10px;
    background: var(--bpa-surface); color: var(--bpa-text); font-size: .875rem; font-weight: 600;
}
.bpa-pagination .page-numbers.current { background: var(--bpa-primary); border-color: var(--bpa-primary); color: #fff; }
.bpa-pagination a.page-numbers:hover { border-color: var(--bpa-primary); color: var(--bpa-primary); text-decoration: none; }

@media (max-width: 768px) {
    .bpa-article { padding: 1.35rem; border-radius: var(--bpa-radius); }
    .bpa-prose { font-size: 1rem; }
    .bpa-prose h2 { font-size: 1.35rem; }
}

/* ==========================================================================
   PATTERN K2 — narrow-header fixes.
   The header row cannot shrink below its content: the brand lockup plus two
   buttons plus the burger exceeded 390px and forced the document to 576px wide
   (found by measuring getBoundingClientRect().right > clientWidth at 390px).
   Login also lives in the mobile drawer, so dropping it from the bar loses
   nothing.
   ========================================================================== */
@media (max-width: 1023.98px) {
    .bpa-header__inner { flex-wrap: nowrap; gap: 1rem; }
    .bpa-brand { min-width: 0; }
    .bpa-brand__name { overflow: hidden; text-overflow: ellipsis; }
    .bpa-header__cta { flex-shrink: 1; flex-wrap: nowrap; }
}
@media (max-width: 767.98px) {
    .bpa-header__cta .bpa-btn--secondary { display: none; }   /* Login is in the drawer */
    .bpa-brand__tag { display: none; }
    .bpa-brand__name { font-size: 1rem; }
    .bpa-brand img { max-height: 34px; width: auto; }
    .bpa-brand img.bpa-brand__logo { height: 34px; }
}
@media (max-width: 575.98px) {
    .bpa-header__inner { gap: .5rem; }
    .bpa-header__cta { gap: .4rem; }
    .bpa-header__cta .bpa-btn { padding: .5rem .75rem; font-size: .8125rem; }
    .bpa-burger { padding: .45rem .5rem; }
}

/* ==========================================================================
   HERO VISUAL — contrast pass.
   The first version was a pale 460px panel with 7–13% opacity rings, which a
   visual review of the render reported as "empty / unfinished": the DOM was
   correct, the contrast was not. The panel now carries a real framed product
   mock so the right column has weight and reads as product proof.
   ========================================================================== */
.bpa-hero__visual {
    background: linear-gradient(150deg, #dbeafe 0%, #e9e5ff 52%, #d5f5f2 100%);
    border: 1px solid rgba(79, 70, 229, .18);
    box-shadow: 0 24px 60px -18px rgba(79, 70, 229, .32), 0 8px 20px -10px rgba(15, 23, 42, .12);
}
.bpa-hero__india { opacity: .85; }

.bpa-mock {
    position: relative; z-index: 1; width: 68%; max-width: 300px;
    background: #fff; border: 1px solid #E5E7EB; border-radius: 14px;
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .28);
    overflow: hidden;
}
.bpa-mock__chrome { display: flex; gap: .3rem; padding: .6rem .75rem; background: #F8FAFC; border-bottom: 1px solid #E5E7EB; }
.bpa-mock__chrome span { width: 8px; height: 8px; border-radius: 50%; background: #CBD5E1; }
.bpa-mock__chrome span:first-child { background: #F87171; }
.bpa-mock__chrome span:nth-child(2) { background: #FBBF24; }
.bpa-mock__chrome span:nth-child(3) { background: #34D399; }
.bpa-mock__body { padding: .85rem .9rem 1rem; }
.bpa-mock__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.bpa-mock__kicker { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #2563EB; }
.bpa-mock__dots { width: 26px; height: 6px; border-radius: 3px; background: #E5E7EB; }
.bpa-mock__row { display: flex; align-items: center; gap: .45rem; padding: .3rem 0; }
.bpa-mock__tick { width: 13px; height: 13px; border-radius: 50%; background: rgba(34, 197, 94, .16); position: relative; flex: 0 0 auto; }
.bpa-mock__tick::after { content: ""; position: absolute; left: 4px; top: 3px; width: 3px; height: 6px; border: solid #16A34A; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.bpa-mock__label { font-size: .75rem; font-weight: 600; color: #334155; }
.bpa-mock__chart { display: flex; align-items: flex-end; gap: 5px; height: 56px; margin: .8rem 0 .4rem; }
.bpa-mock__chart span { flex: 1 1 0; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #6366F1 0%, #2563EB 100%); }
.bpa-mock__chart span:nth-child(1) { height: 34%; }
.bpa-mock__chart span:nth-child(2) { height: 50%; }
.bpa-mock__chart span:nth-child(3) { height: 43%; }
.bpa-mock__chart span:nth-child(4) { height: 72%; }
.bpa-mock__chart span:nth-child(5) { height: 100%; }
.bpa-mock__axis { font-size: .5625rem; color: #94A3B8; letter-spacing: .01em; }

/* banner CTA: .bpa-banner a sets color:#fff, which made a white --secondary
   button render as invisible white-on-white text. */
.bpa-banner .bpa-btn--secondary { background: #fff; color: #075E54; border-color: #fff; }
.bpa-banner .bpa-btn--secondary:hover { background: #ECFDF5; color: #075E54; }

@media (max-width: 1100px) {
    .bpa-mock { width: 62%; }
}
@media (max-width: 767.98px) {
    .bpa-mock { width: 70%; }
    .bpa-mock__chart { height: 44px; }
    .bpa-float--tl { left: -4%; }
    .bpa-float--br { right: -4%; }
}


/* ==========================================================================
   PHASE K2 — STAGE 4: MIGRATED PAGE-LEVEL STYLES
   Carried from v3's per-template stylesheets and re-expressed entirely on v4
   tokens. Class names are stable hooks kept for the carried templates; every
   colour literal (hex, 3-digit, tint, grey) and every font stack was mapped, so
   no second palette or type system survives. v3/css/home.css is excluded —
   v4 rebuilt the homepage.
   ========================================================================== */

/* ---- migrated from v3/css/single.css ---- */
/* Single Post Styles - Do NOT override global theme styles */
    .post-hero,
    .single-post-bg {
        --primary: var(--bpa-warning);
        --primary-dark: var(--bpa-warning);
        --secondary: var(--bpa-navy);
        --secondary-dark: var(--bpa-navy);
        --text-dark: var(--bpa-text);
        --text-light: var(--bpa-text-muted);
        --glass-bg: rgba(255,255,255,0.97);
        --glass-border: rgba(255,255,255,0.6);
        --glass-shadow: 0 8px 32px 0 rgba(31,38,135,0.1);
    }
    
    /* Only style post-specific elements, don't reset global styles */

    /* =====================================================
       READING PROGRESS BAR
    ===================================================== */
    .reading-progress-bar {
        position: fixed;
        top: 0; left: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary), var(--bpa-primary));
        z-index: 9999;
        width: 0%;
        transition: width 0.1s linear;
    }

    /* =====================================================
       POST HERO BANNER
    ===================================================== */
    .post-hero {
        background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary) 60%, var(--bpa-primary) 100%);
        color: white;
        padding: 4rem 0 8rem;
        position: relative;
        overflow: hidden;
    }
    .post-hero::before {
        content: '';
        position: absolute; inset: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath fill='white' fill-opacity='0.05' d='M0,160L80,144C160,128,320,96,480,101C640,107,800,149,960,154C1120,160,1280,128,1360,112L1440,96L1440,200L0,200Z'/%3E%3C/svg%3E") no-repeat bottom;
        background-size: cover;
    }
    .post-hero-blob-1 {
        position: absolute; top: -60px; right: -60px;
        width: 320px; height: 320px;
        background: rgba(245, 158, 11, 0.11);
        border-radius: 50%; filter: blur(55px);
        pointer-events: none;
    }
    .post-hero-inner {
        position: relative; z-index: 2;
        max-width: 860px;
        margin: 0 auto;
        padding: 0 2rem;
        text-align: center;
    }

    /* Breadcrumb */
    .post-breadcrumb {
        display: flex; align-items: center; justify-content: center;
        gap: 0.5rem; font-size: 0.84rem;
        opacity: 0.72; margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }
    .post-breadcrumb a { color: white; text-decoration: none; }
    .post-breadcrumb a:hover { text-decoration: underline; }
    .post-breadcrumb .sep { opacity: 0.45; font-size: 0.65rem; }

    /* Category badge */
    .post-cat-label {
        display: inline-flex; align-items: center; gap: 0.4rem;
        background: var(--primary); color: white;
        padding: 0.3rem 1rem; border-radius: 20px;
        font-size: 0.75rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 1px;
        margin-bottom: 1.2rem; text-decoration: none;
        transition: background 0.3s;
    }
    .post-cat-label:hover { background: var(--primary-dark); }

    /* Title */
    .post-hero-title {
        font-size: 2.5rem; font-weight: 800;
        line-height: 1.25; margin-bottom: 1.5rem;
        color: white;
    }

    /* Meta pills row */
    .post-hero-meta {
        display: flex; align-items: center; justify-content: center;
        gap: 0.6rem; flex-wrap: wrap; font-size: 0;
    }
    .meta-pill {
        display: inline-flex; align-items: center; gap: 0.4rem;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.2);
        color: rgba(255,255,255,0.88);
        padding: 0.4rem 1rem; border-radius: 30px;
        font-size: 0.84rem; font-weight: 500;
        backdrop-filter: blur(8px);
    }
    .meta-pill i { color: rgba(245, 158, 11, .18); font-size: 0.8rem; }

    /* =====================================================
       PAGE BACKGROUND — dot grid
    ===================================================== */
    .single-post-bg {
        background-color: var(--bpa-bg);
        background-image: radial-gradient(var(--bpa-border) 1.2px, transparent 1.2px);
        background-size: 28px 28px;
        padding: 0 0 5rem;
    }

    /* =====================================================
       TWO-COLUMN WRAPPER (floats up over hero)
    ===================================================== */
    .single-layout {
        max-width: 1180px;
        margin: -4.5rem auto 0;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: 1fr 310px;
        gap: 2.5rem;
        align-items: start;
    }
    @media (max-width: 1024px) {
        .single-layout { grid-template-columns: minmax(0, 1fr); margin-top: -2.5rem; }
    }

    /* =====================================================
       MAIN ARTICLE GLASS CARD
    ===================================================== */
    .singular-container {
        /* Override theme's default container */
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
    }
    .singular-article {
        background: var(--glass-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--glass-border);
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(31,38,135,0.12);
        overflow: hidden;
    }

    /* =====================================================
       SINGULAR HEADER (inside article)
    ===================================================== */
    .singular-header {
        padding: 0;       /* remove any default padding — hero handles it */
    }
    /* Meta row inside article header — hidden here (shown in hero) */
    .singular-header .singular-meta,
    .singular-header .post-categories,
    .singular-header .singular-title {
        display: none;    /* rendered in our custom hero above */
    }
    /* Featured image */
    .singular-thumbnail {
        margin: 0;
        line-height: 0;
    }
    .singular-thumbnail img,
    .singular-thumbnail .rounded-lg {
        width: 100%;
        max-height: 460px;
        object-fit: cover;
        border-radius: 0 !important;
        display: block;
    }

    /* =====================================================
       ARTICLE BODY TYPOGRAPHY  (targets your .singular-content)
    ===================================================== */
    .singular-content {
        padding: 2.5rem 3rem;
        font-size: 1.05rem;
        line-height: 1.85;
        color: var(--bpa-navy);
    }
    @media (max-width: 768px) { .singular-content { padding: 1.8rem 1.5rem; } }

    .singular-content h2 {
        font-size: 1.65rem; font-weight: 700;
        color: var(--text-dark);
        margin: 2.5rem 0 1rem;
        padding-left: 1rem;
        border-left: 4px solid var(--primary);
        line-height: 1.3;
    }
    .singular-content h3 {
        font-size: 1.3rem; font-weight: 700;
        color: var(--secondary);
        margin: 2rem 0 0.8rem;
    }
    .singular-content h4 {
        font-size: 1.1rem; font-weight: 700;
        color: var(--text-dark);
        margin: 1.5rem 0 0.6rem;
    }
    .singular-content p { margin-bottom: 1.4rem; }
    .singular-content ul, .singular-content ol {
        padding-left: 1.5rem; margin-bottom: 1.4rem;
    }
    .singular-content li { margin-bottom: 0.5rem; line-height: 1.75; }
    .singular-content strong { color: var(--text-dark); }
    .singular-content a {
        color: var(--primary); text-decoration: underline;
        transition: color 0.2s;
    }
    .singular-content a:hover { color: var(--primary-dark); }

    /* Blockquote */
    .singular-content blockquote {
        background: linear-gradient(135deg, rgba(239, 68, 68, .10), var(--bpa-surface));
        border-left: 5px solid var(--primary);
        border-radius: 0 16px 16px 0;
        padding: 1.5rem 2rem;
        margin: 2rem 0;
        font-style: italic;
        font-size: 1.1rem; color: var(--bpa-text-muted);
        position: relative;
    }
    .singular-content blockquote::before {
        content: '\201C';
        font-size: 4rem; color: var(--primary);
        opacity: 0.2; line-height: 0;
        position: absolute; top: 2rem; left: 1rem;
    }

    /* Code */
    .singular-content code {
        background: var(--bpa-navy); color: rgba(37, 99, 235, .08);
        padding: 0.2rem 0.5rem; border-radius: 6px;
        font-size: 0.88em;
    }
    .singular-content pre {
        background: var(--secondary-dark); color: rgba(37, 99, 235, .08);
        padding: 1.5rem; border-radius: 16px;
        overflow-x: auto; margin: 1.5rem 0;
        font-size: 0.92rem; line-height: 1.6;
        border: 1px solid rgba(255,255,255,0.08);
    }
    .singular-content pre code { background: none; color: inherit; padding: 0; }

    /* Tables */
    .singular-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
    .singular-content th {
        background: linear-gradient(135deg, var(--secondary-dark), var(--secondary));
        color: white; padding: 0.9rem 1rem;
        text-align: left; font-weight: 600;
    }
    .singular-content td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--bpa-bg); color: var(--bpa-navy); }
    .singular-content tr:nth-child(even) td { background: var(--bpa-bg); }

    /* Images inside content */
    .singular-content img {
        max-width: 100%; border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin: 1.5rem 0;
    }

    /* =====================================================
       PAGE LINKS (paginated posts)
    ===================================================== */
    .page-links {
        padding: 1.5rem 3rem 0;
        font-size: 0.9rem; color: var(--text-light);
    }
    @media (max-width: 768px) { .page-links { padding: 1rem 1.5rem 0; } }

    /* =====================================================
       SHARE BAR
    ===================================================== */
    .custom-share-bar {
        display: flex; align-items: center; gap: 0.8rem;
        padding: 1.5rem 3rem;
        border-top: 1px solid var(--bpa-bg);
        flex-wrap: wrap;
    }
    @media (max-width: 768px) { .custom-share-bar { padding: 1.2rem 1.5rem; } }
    .share-label { font-size: 0.9rem; font-weight: 700; color: var(--text-dark); }
    .share-btn {
        display: inline-flex; align-items: center; gap: 0.4rem;
        padding: 0.5rem 1.1rem; border-radius: 20px;
        font-size: 0.84rem; font-weight: 600;
        text-decoration: none; transition: all 0.3s; color: white;
        cursor: pointer; border: none;
    }
    .share-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
    .share-wa  { background: #25d366; }
    .share-tw  { background: var(--bpa-primary); }
    .share-li  { background: var(--bpa-primary); }
    .share-cp  { background: var(--bpa-primary); }

    /* =====================================================
       SINGULAR FOOTER — Tags (your existing .singular-footer)
    ===================================================== */
    .singular-footer {
        padding: 1.5rem 3rem;
        border-top: 1px solid var(--bpa-bg);
    }
    @media (max-width: 768px) { .singular-footer { padding: 1.2rem 1.5rem; } }
    .post-tags { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .tag-label { font-size: 0.88rem; font-weight: 700; color: var(--text-dark); }
    .post-tags a {
        padding: 0.3rem 0.9rem; border-radius: 20px;
        font-size: 0.82rem; font-weight: 600;
        background: var(--bpa-bg); color: var(--text-light);
        text-decoration: none;
        border: 1px solid var(--bpa-border);
        transition: all 0.3s;
    }
    .post-tags a:hover { background: var(--primary); color: white; border-color: var(--primary); }

    /* =====================================================
       AUTHOR BOX
    ===================================================== */
    .custom-author-box {
        margin: 0 3rem 2rem;
        background: linear-gradient(135deg, rgba(37, 99, 235, .08), var(--bpa-surface));
        border: 1px solid rgba(37, 99, 235, .08);
        border-radius: 20px;
        padding: 1.8rem;
        display: flex; gap: 1.5rem; align-items: flex-start;
    }
    @media (max-width: 768px) {
        .custom-author-box { margin: 0 1.5rem 1.5rem; flex-direction: column; align-items: center; text-align: center; }
    }
    .author-av {
        width: 68px; height: 68px; border-radius: 50%;
        background: linear-gradient(135deg, var(--bpa-primary), var(--bpa-secondary));
        color: white; font-size: 1.5rem; font-weight: 800;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
    }
    .author-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .author-text h4 { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.2rem; }
    .author-text .author-role {
        font-size: 0.8rem; font-weight: 700; color: var(--primary);
        text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem;
    }
    .author-text p { font-size: 0.91rem; color: var(--text-light); line-height: 1.6; margin: 0; }

    /* =====================================================
       RELATED POSTS
    ===================================================== */
    .custom-related {
        padding: 2rem 3rem;
        border-top: 1px solid var(--bpa-bg);
    }
    @media (max-width: 768px) { .custom-related { padding: 1.5rem; } }
    .custom-related h3 {
        font-size: 1.2rem; font-weight: 700;
        color: var(--text-dark); margin-bottom: 1.2rem;
        display: flex; align-items: center; gap: 0.5rem;
    }
    .custom-related h3 i { color: var(--primary); }
    .related-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 1rem;
    }
    .related-card {
        background: var(--bpa-bg); border: 1px solid var(--bpa-bg);
        border-radius: 16px; overflow: hidden;
        text-decoration: none; transition: all 0.3s;
        display: flex; flex-direction: column;
    }
    .related-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.1);
        border-color: rgba(245, 158, 11, 0.3);
    }
    .related-card img { width: 100%; height: 105px; object-fit: cover; }
    .related-card-ph {
        height: 105px; display: flex; align-items: center; justify-content: center;
        font-size: 2rem;
        background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(37, 99, 235, .08));
        color: rgba(42,82,152,0.3);
    }
    .related-card-body { padding: 0.9rem; }
    .related-card-title {
        font-size: 0.88rem; font-weight: 600;
        color: var(--text-dark); line-height: 1.4;
        margin-bottom: 0.3rem;
        display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden;
    }
    .related-card-date { font-size: 0.76rem; color: var(--text-light); }

    /* =====================================================
       COMMENTS (your existing .singular-comments)
    ===================================================== */
    .singular-comments {
        padding: 2rem 3rem;
        border-top: 1px solid var(--bpa-bg);
    }
    @media (max-width: 768px) { .singular-comments { padding: 1.5rem; } }
    .comments-title {
        font-size: 1.3rem; font-weight: 700;
        color: var(--text-dark); margin-bottom: 1.5rem;
        display: flex; align-items: center; gap: 0.5rem;
    }
    .comments-title::before {
        content: '\f086';
        font-family: inherit; font-weight: 900;
        color: var(--primary);
    }
    /* Comment list */
    .comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }
    .comment-list .comment {
        padding: 1.2rem 0;
        border-bottom: 1px solid var(--bpa-surface);
    }
    .comment-list .comment:last-child { border-bottom: none; }
    .comment-author { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; }
    .comment-author img {
        border-radius: 50%; width: 42px; height: 42px;
        box-shadow: none !important; margin: 0 !important;
    }
    .comment-author .fn { font-weight: 700; font-size: 0.95rem; color: var(--text-dark); }
    .comment-metadata a { font-size: 0.78rem; color: var(--text-light); text-decoration: none; }
    .comment-content p { font-size: 0.95rem; color: var(--bpa-text-muted); line-height: 1.65; margin: 0; }
    .reply a {
        font-size: 0.82rem; color: var(--primary);
        font-weight: 600; text-decoration: none;
    }
    /* Comment form */
    #respond { margin-top: 2rem; }
    #reply-title { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); margin-bottom: 1.5rem; }
    .comment-form label { font-size: 0.88rem; font-weight: 600; color: var(--text-dark); display: block; margin-bottom: 0.4rem; }
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"],
    .comment-form textarea {
        width: 100%; padding: 0.85rem 1.1rem;
        border: 1.5px solid var(--bpa-border); border-radius: 12px;
        font-size: 0.95rem; font-family: inherit;
        outline: none; background: rgba(37, 99, 235, .08);
        transition: border-color 0.3s; margin-bottom: 1rem;
    }
    .comment-form input:focus,
    .comment-form textarea:focus { border-color: var(--primary); }
    .comment-form-comment { margin-bottom: 0.5rem; }
    #submit {
        background: var(--primary); color: white;
        border: none; padding: 0.9rem 2.4rem;
        border-radius: 30px; font-size: 1rem;
        font-weight: 700; cursor: pointer;
        transition: all 0.3s;
    }
    #submit:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
    }

    /* =====================================================
       SIDEBAR
    ===================================================== */
    .single-sidebar { position: sticky; top: 90px; }
    .sidebar-widget {
        background: var(--glass-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        padding: 1.8rem;
        margin-bottom: 1.8rem;
        box-shadow: var(--glass-shadow);
    }
    .widget-title {
        font-size: 1rem; font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 1.2rem; padding-bottom: 0.8rem;
        border-bottom: 2px solid var(--primary);
        display: flex; align-items: center; gap: 0.5rem;
    }
    .widget-title i { color: var(--primary); }

    /* CTA widget */
    .cta-widget {
        background: linear-gradient(135deg, var(--secondary-dark), var(--secondary));
        color: white; border-radius: 20px;
        padding: 1.8rem; text-align: center;
        margin-bottom: 1.8rem;
        position: relative; overflow: hidden;
        box-shadow: 0 15px 35px rgba(30,60,114,0.2);
    }
    .cta-widget::before {
        content: ''; position: absolute;
        top: -30px; right: -30px;
        width: 110px; height: 110px;
        background: rgba(245, 158, 11, 0.15); border-radius: 50%;
    }
    .cta-widget h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.7rem; position: relative; z-index: 1; }
    .cta-widget p  { font-size: 0.88rem; opacity: 0.85; margin-bottom: 1.3rem; line-height: 1.55; position: relative; z-index: 1; }
    .cta-widget a {
        display: inline-block; background: var(--primary); color: white;
        padding: 0.75rem 1.6rem; border-radius: 30px;
        font-weight: 700; font-size: 0.9rem;
        text-decoration: none; transition: all 0.3s;
        position: relative; z-index: 1;
        box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
    }
    .cta-widget a:hover { background: var(--primary-dark); transform: translateY(-2px); }

    /* TOC */
    .toc-list { list-style: none; padding: 0; margin: 0; }
    .toc-list li { border-bottom: 1px solid var(--bpa-surface); }
    .toc-list li:last-child { border-bottom: none; }
    .toc-list a {
        display: flex; align-items: flex-start; gap: 0.5rem;
        padding: 0.55rem 0; font-size: 0.88rem;
        color: var(--text-light); text-decoration: none;
        transition: all 0.2s; line-height: 1.4;
    }
    .toc-list a i { color: var(--primary); font-size: 0.6rem; margin-top: 0.4rem; flex-shrink: 0; }
    .toc-list a:hover { color: var(--primary); padding-left: 4px; }
    .toc-list a.active { color: var(--primary); font-weight: 600; }

    /* Recent posts */
    .recent-post-item {
        display: flex; gap: 0.8rem; padding: 0.8rem 0;
        border-bottom: 1px solid var(--bpa-surface);
        text-decoration: none; transition: all 0.25s;
    }
    .recent-post-item:last-child { border-bottom: none; }
    .recent-post-item:hover { transform: translateX(4px); }
    .rp-thumb { width: 58px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
    .rp-thumb-ph {
        width: 58px; height: 52px; border-radius: 10px;
        background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(37, 99, 235, .08));
        display: flex; align-items: center; justify-content: center;
        font-size: 1.3rem; color: rgba(42,82,152,0.3); flex-shrink: 0;
    }
    .rp-info .rp-title { font-size: 0.85rem; font-weight: 600; color: var(--text-dark); line-height: 1.35; margin-bottom: 0.2rem; }
    .rp-info .rp-date  { font-size: 0.76rem; color: var(--text-light); }

    /* =====================================================
       ANIMATIONS
    ===================================================== */
    .fade-in-up {
        opacity: 0; transform: translateY(24px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .fade-in-up.visible { opacity: 1; transform: translateY(0); }

    @media (max-width: 768px) {
        .post-hero-title { font-size: 1.75rem; }
        .post-hero { padding: 3rem 0 5rem; }
        .post-hero-inner { padding: 0 1.5rem; }
        .singular-content { padding: 1.5rem; }
        .singular-content h2 { font-size: 1.4rem; margin: 1.5rem 0 0.8rem; padding-left: 0.8rem; }
        .singular-content h3 { font-size: 1.15rem; }
        .custom-author-box { margin: 0 1.5rem 1.5rem; flex-direction: column; align-items: center; text-align: center; }
        .custom-related { padding: 1.5rem; }
        .related-grid { grid-template-columns: 1fr; }
        .singular-comments { padding: 1.5rem; }
        .single-sidebar { position: static; }
        .custom-share-bar { padding: 1rem 1.5rem; flex-wrap: wrap; gap: 0.5rem; }
        .share-btn { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
    }
    
    @media (max-width: 480px) {
        .post-hero-title { font-size: 1.5rem; }
        .post-hero-inner { padding: 0 1rem; }
        .meta-pill { padding: 0.3rem 0.8rem; font-size: 0.75rem; }
        .singular-content { padding: 1rem; font-size: 1rem; }
        .singular-content h2 { font-size: 1.2rem; }
        .singular-content blockquote { padding: 1rem 1.2rem; }
        .custom-author-box { margin: 0 1rem 1rem; padding: 1rem; }
        .author-av { width: 56px; height: 56px; font-size: 1.2rem; }
        .sidebar-widget { padding: 1rem; }
        .recent-post-item { padding: 0.6rem 0; }
        .rp-thumb { width: 48px; height: 44px; }
    }

/* ---- migrated from v3/css/archive.css ---- */
/* Blog Archive Page Styles - Do NOT override global theme styles */
    .blog-hero,
    .blog-page-wrapper {
        --primary: var(--bpa-warning);
        --primary-dark: var(--bpa-warning);
        --secondary: var(--bpa-navy);
        --secondary-dark: var(--bpa-navy);
        --text-dark: var(--bpa-text);
        --text-light: var(--bpa-text-muted);
        --glass-bg: rgba(255,255,255,0.95);
        --glass-border: rgba(255,255,255,0.6);
        --glass-shadow: 0 8px 32px 0 rgba(31,38,135,0.1);
    }
    
    /* Only style blog-specific elements, don't reset global styles */
    
    /* =============================
       BLOG HERO BANNER
    ============================= */
    .blog-hero {
        background: linear-gradient(135deg, var(--bpa-navy) 0%, var(--bpa-navy) 50%, var(--bpa-primary) 100%);
        color: white;
        padding: 5rem 0 6rem;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    /* Animated background blobs */
    .blog-hero::before {
        content: '';
        position: absolute;
        top: -80px; right: -80px;
        width: 400px; height: 400px;
        background: rgba(245, 158, 11, 0.12);
        border-radius: 50%;
        filter: blur(60px);
        animation: blobFloat 8s ease-in-out infinite;
    }
    .blog-hero::after {
        content: '';
        position: absolute;
        bottom: -100px; left: -60px;
        width: 350px; height: 350px;
        background: rgba(37, 99, 235, 0.15);
        border-radius: 50%;
        filter: blur(60px);
        animation: blobFloat 10s ease-in-out infinite reverse;
    }
    @keyframes blobFloat {
        0%, 100% { transform: translateY(0) scale(1); }
        50%       { transform: translateY(-20px) scale(1.05); }
    }
    .blog-hero-inner {
        position: relative;
        z-index: 2;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 2rem;
    }
    .blog-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(245, 158, 11, 0.2);
        border: 1px solid rgba(245, 158, 11, 0.35);
        color: rgba(245, 158, 11, .18);
        padding: 0.45rem 1.2rem;
        border-radius: 50px;
        font-size: 0.88rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
    }
    .blog-hero h1 {
        font-size: 3rem;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    .blog-hero p {
        font-size: 1.15rem;
        opacity: 0.85;
        max-width: 600px;
        margin: 0 auto 2.5rem;
        line-height: 1.7;
    }
    /* Search bar inside hero */
    .blog-search-form {
        max-width: 560px;
        margin: 0 auto;
    }
    .blog-search-form .search-group {
        background: white;
        border-radius: 50px;
        display: flex;
        align-items: center;
        padding: 0.4rem;
        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
        border: 3px solid rgba(255,255,255,0.2);
    }
    .blog-search-form .search-group i {
        color: var(--primary);
        font-size: 1.1rem;
        margin-left: 1.2rem;
        margin-right: 0.5rem;
    }
    .blog-search-form input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 1rem;
        color: var(--bpa-text);
        padding: 0.9rem 0.5rem;
        background: transparent;
    }
    .blog-search-form input::placeholder { color: var(--bpa-border); }
    .blog-search-form button {
        background: var(--primary);
        color: white;
        border: none;
        padding: 0.85rem 1.8rem;
        border-radius: 40px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 0.95rem;
    }
    .blog-search-form button:hover {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    }

    /* =============================
       BLOG LAYOUT WRAPPER
    ============================= */
    .blog-page-wrapper {
        /* Dot-grid background — same as pricing section */
        background-color: var(--bpa-bg);
        background-image: radial-gradient(var(--bpa-border) 1.2px, transparent 1.2px);
        background-size: 28px 28px;
        padding: 4rem 0 5rem;
    }
    .blog-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 3rem;
        align-items: start;
    }
    @media (max-width: 1024px) {
        .blog-container { grid-template-columns: 1fr; }
    }
    
    @media (max-width: 768px) {
        .blog-hero h1 { font-size: 2rem; }
        .blog-hero p { font-size: 1rem; }
        .blog-search-form input { font-size: 16px; } /* Prevent iOS zoom */
        .featured-post-card { grid-template-columns: 1fr; min-height: auto; }
        .featured-post-content { padding: 1.5rem; }
        .featured-post-card h2 { font-size: 1.3rem; }
        .post-card { flex-direction: column; }
        .post-thumbnail-wrapper { height: 180px; }
        .post-body { padding: 1.2rem; }
        .post-title { font-size: 1rem; }
        .category-pills { gap: 0.4rem; padding: 1rem; }
        .pill { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
        .blog-sidebar { position: static; }
    }
    
    @media (max-width: 480px) {
        .blog-hero { padding: 3rem 0 4rem; }
        .blog-hero-inner { padding: 0 1rem; }
        .featured-post-content { padding: 1rem; }
        .featured-post-card h2 { font-size: 1.1rem; }
        .post-thumbnail-wrapper { height: 150px; }
        .post-body { padding: 1rem; }
        .post-title { font-size: 0.95rem; }
        .category-pills { 
            gap: 0.3rem; 
            margin-bottom: 1.5rem;
        }
        .blog-pagination { margin-top: 2rem; }
        .sidebar-widget { margin-bottom: 1.5rem; padding: 1.2rem; }
    }

    /* =============================
       CATEGORY FILTER PILLS
    ============================= */
    .category-pills {
        display: flex;
        gap: 0.7rem;
        flex-wrap: wrap;
        margin-bottom: 2.5rem;
        padding: 1.5rem 2rem;
        background: var(--glass-bg);
        backdrop-filter: blur(12px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        box-shadow: var(--glass-shadow);
    }
    .pill {
        padding: 0.5rem 1.2rem;
        border-radius: 50px;
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        text-decoration: none;
        border: 1.5px solid var(--bpa-border);
        color: var(--text-light);
        background: white;
    }
    .pill:hover, .pill.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3);
    }

    /* =============================
       FEATURED POST (TOP CARD)
    ============================= */
    .featured-post-card {
        background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary) 100%);
        color: white;
        border-radius: 24px;
        overflow: hidden;
        margin-bottom: 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 300px;
        box-shadow: 0 20px 50px rgba(30,60,114,0.25);
        transition: transform 0.3s, box-shadow 0.3s;
        position: relative;
    }
    .featured-post-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 30px 60px rgba(30,60,114,0.3);
    }
    @media (max-width: 768px) { .featured-post-card { grid-template-columns: 1fr; } }
    .featured-post-content {
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        z-index: 2;
    }
    .featured-label {
        background: var(--primary);
        color: white;
        padding: 0.3rem 0.9rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: inline-block;
        margin-bottom: 1rem;
        width: fit-content;
    }
    .featured-post-card h2 {
        font-size: 1.7rem;
        font-weight: 800;
        line-height: 1.3;
        margin-bottom: 1rem;
        color: white;
    }
    .featured-post-card p {
        opacity: 0.85;
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }
    .featured-post-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 0.85rem;
        opacity: 0.7;
        margin-bottom: 1.5rem;
    }
    .btn-read-more {
        background: var(--primary);
        color: white;
        padding: 0.75rem 1.8rem;
        border-radius: 30px;
        text-decoration: none;
        font-weight: bold;
        font-size: 0.95rem;
        width: fit-content;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    .btn-read-more:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
    }
    .featured-post-image {
        position: relative;
        overflow: hidden;
    }
    .featured-post-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s;
    }
    .featured-post-card:hover .featured-post-image img {
        transform: scale(1.05);
    }
    /* Fallback gradient thumbnail when no image */
    .featured-post-image .img-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(37, 99, 235, 0.4));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5rem;
        color: rgba(255,255,255,0.3);
    }

    /* =============================
       POST GRID (3 columns)
    ============================= */
    .posts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1.8rem;
    }
    .post-card {
        background: var(--glass-bg);
        backdrop-filter: blur(12px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: var(--glass-shadow);
        display: flex;
        flex-direction: column;
    }
    .post-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.12);
        border-color: rgba(245, 158, 11, 0.2);
    }
    .post-thumbnail {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }
    .post-card:hover .post-thumbnail { transform: scale(1.04); }
    .post-thumbnail-wrapper {
        overflow: hidden;
        position: relative;
    }
    /* Category label on image */
    .post-category-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: var(--primary);
        color: white;
        font-size: 0.72rem;
        font-weight: 700;
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    /* Gradient thumbnail fallback per category */
    .thumb-placeholder {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
    }
    .thumb-blue   { background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(37, 99, 235, .16)); color: var(--bpa-primary); }
    .thumb-orange { background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(245, 158, 11, .22)); color: var(--bpa-warning); }
    .thumb-green  { background: linear-gradient(135deg, rgba(34, 197, 94, .10), var(--bpa-success)); color: var(--bpa-success); }
    .thumb-purple { background: linear-gradient(135deg, rgba(124, 58, 237, .10), var(--bpa-secondary)); color: var(--bpa-secondary); }

    .post-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
    .post-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 0.82rem;
        color: var(--text-light);
        margin-bottom: 0.75rem;
    }
    .post-meta i { color: var(--primary); }
    .post-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-dark);
        line-height: 1.4;
        margin-bottom: 0.75rem;
        text-decoration: none;
        display: block;
        transition: color 0.2s;
    }
    .post-title:hover { color: var(--primary); }
    .post-excerpt {
        color: var(--text-light);
        font-size: 0.92rem;
        line-height: 1.6;
        flex: 1;
        margin-bottom: 1.2rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .post-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 1rem;
        border-top: 1px solid var(--bpa-bg);
    }
    .author-mini {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.85rem;
        color: var(--text-light);
    }
    .author-avatar-mini {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--bpa-primary), var(--bpa-secondary));
        color: white;
        font-weight: bold;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .read-link {
        color: var(--primary);
        font-size: 0.88rem;
        font-weight: 700;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: gap 0.2s;
    }
    .read-link:hover { gap: 8px; }
    .read-time {
        font-size: 0.8rem;
        color: var(--text-light);
        background: rgba(37, 99, 235, .08);
        padding: 0.25rem 0.7rem;
        border-radius: 20px;
    }

    /* =============================
       PAGINATION
    ============================= */
    .blog-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin-top: 3.5rem;
        flex-wrap: wrap;
    }
    .blog-pagination .page-numbers {
        width: 44px; height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
        transition: all 0.3s;
        border: 1.5px solid var(--bpa-border);
        color: var(--text-dark);
        background: white;
    }
    .blog-pagination .page-numbers:hover,
    .blog-pagination .page-numbers.current {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
        box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3);
    }

    /* =============================
       SIDEBAR
    ============================= */
    .blog-sidebar { position: sticky; top: 90px; }

    .sidebar-widget {
        background: var(--glass-bg);
        backdrop-filter: blur(12px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        padding: 1.8rem;
        margin-bottom: 2rem;
        box-shadow: var(--glass-shadow);
    }
    .widget-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 1.2rem;
        padding-bottom: 0.8rem;
        border-bottom: 2px solid var(--primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .widget-title i { color: var(--primary); }

    /* Popular posts in sidebar */
    .popular-post-item {
        display: flex;
        gap: 0.8rem;
        padding: 0.8rem 0;
        border-bottom: 1px solid var(--bpa-bg);
        align-items: flex-start;
        text-decoration: none;
        transition: all 0.2s;
    }
    .popular-post-item:last-child { border-bottom: none; }
    .popular-post-item:hover { transform: translateX(4px); }
    .pop-num {
        width: 28px; height: 28px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: white;
        font-size: 0.8rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .pop-title {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--text-dark);
        line-height: 1.4;
    }
    .pop-meta { font-size: 0.78rem; color: var(--text-light); margin-top: 0.2rem; }

    /* Tag cloud */
    .tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .tag-pill {
        padding: 0.35rem 0.9rem;
        border-radius: 20px;
        font-size: 0.82rem;
        font-weight: 600;
        background: var(--bpa-bg);
        color: var(--text-light);
        text-decoration: none;
        border: 1px solid var(--bpa-border);
        transition: all 0.3s;
    }
    .tag-pill:hover {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    /* CTA Widget */
    .cta-widget {
        background: linear-gradient(135deg, var(--secondary-dark), var(--secondary));
        color: white;
        border-radius: 20px;
        padding: 2rem;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .cta-widget::before {
        content: '';
        position: absolute;
        top: -30px; right: -30px;
        width: 120px; height: 120px;
        background: rgba(245, 158, 11, 0.15);
        border-radius: 50%;
    }
    .cta-widget h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.8rem; position: relative; z-index: 1; }
    .cta-widget p { font-size: 0.9rem; opacity: 0.85; margin-bottom: 1.5rem; line-height: 1.6; position: relative; z-index: 1; }
    .cta-widget a {
        display: inline-block;
        background: var(--primary);
        color: white;
        padding: 0.8rem 1.8rem;
        border-radius: 30px;
        font-weight: bold;
        font-size: 0.9rem;
        text-decoration: none;
        transition: all 0.3s;
        position: relative; z-index: 1;
    }
    .cta-widget a:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4); }

    /* No posts message */
    .no-posts {
        text-align: center;
        padding: 5rem 2rem;
        background: var(--glass-bg);
        border-radius: 24px;
        border: 1px solid var(--glass-border);
    }
    .no-posts i { font-size: 3.5rem; color: var(--bpa-border); margin-bottom: 1rem; }
    .no-posts h3 { font-size: 1.5rem; color: var(--text-dark); margin-bottom: 0.5rem; }
    .no-posts p { color: var(--text-light); }

    /* Animations */
    .fade-in-up { opacity: 0; transform: translateY(24px); transition: all 0.55s ease-out; }
    .fade-in-up.visible { opacity: 1; transform: translateY(0); }

    @media (max-width: 768px) {
        .blog-hero h1 { font-size: 2rem; }
        .posts-grid { grid-template-columns: 1fr; }
        .featured-post-card { grid-template-columns: 1fr; }
        .blog-container { grid-template-columns: 1fr; }
    }

/* ---- migrated from v3/css/mobile-responsive.css ---- */
/**
 * Mobile Responsive Styles
 * Comprehensive mobile support for BizPlan AI theme
 */

/* ============================================
   MOBILE HEADER & NAVIGATION
   ============================================ */

@media (max-width: 991.98px) {
    /* Mobile menu button */
    .mobile-menu-btn {
        display: block !important;
        position: relative;
        z-index: 1003;
    }
    
    /* Main navigation mobile styles */
    .main-navigation {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: white;
        z-index: 999;
        padding: 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        margin: 0;
    }
    
    .main-navigation.active {
        display: block !important;
    }
    
    .main-navigation .nav-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin: 0;
        padding: 0;
        list-style: none;
        justify-content: flex-start;
    }
    
    .main-navigation .nav-menu li {
        margin: 0 !important;
        border-bottom: 1px solid var(--bpa-border);
        width: 100%;
    }
    
    .main-navigation .nav-menu li:last-child {
        border-bottom: none;
    }
    
    .main-navigation .nav-menu li a {
        display: block !important;
        padding: 20px 0 !important;
        font-size: 18px !important;
        font-weight: 500;
        color: var(--bpa-text);
        text-decoration: none;
        width: 100%;
        border: none;
        position: relative;
    }
    
    .main-navigation .nav-menu li a:hover {
        color: var(--bpa-primary);
        background-color: rgba(49, 130, 206, 0.05);
    }
    
    .main-navigation .nav-menu li a::after {
        display: none !important;
    }
    
    /* Logo container mobile */
    .logo-container {
        max-width: 150px;
    }
    
    .header-container {
        padding: 10px 15px;
        min-height: 70px;
    }
    
    header {
        min-height: 70px;
    }
    
    /* Header actions mobile */
    .header-actions {
        gap: 10px;
    }
    
    .header-btn {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    .main-navigation {
        top: 60px;
        height: calc(100vh - 60px);
    }
    
    .header-container {
        min-height: 60px;
        padding: 10px 15px;
    }
    
    header {
        min-height: 60px;
    }
    
    .logo-container {
        max-width: 120px;
    }
    
    .logo-container .logo img {
        max-height: 40px;
    }
    
    .header-actions {
        gap: 8px;
    }
    
    .header-btn {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   MOBILE BLOG PAGE STYLES
   ============================================ */

@media (max-width: 991.98px) {
    /* Blog page container */
    .blog-section-page {
        margin-top: 0;
        padding: 2rem 0 4rem;
    }
    
    .page-container {
        padding: 0 1.5rem;
    }
    
    /* Blog hero section */
    .blog-section-hero {
        padding: 3rem 0 5rem;
    }
    
    .blog-section-hero-inner {
        padding: 0 1.5rem;
    }
    
    .blog-section-hero h1 {
        font-size: 2.2rem;
    }
    
    .blog-section-hero p {
        font-size: 1rem;
    }
    
    .hero-stats-strip {
        gap: 1.5rem;
        flex-wrap: wrap;
    }
    
    .hstat-num {
        font-size: 1.5rem;
    }
    
    .hstat-label {
        font-size: 0.7rem;
    }
    
    /* Section header */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .section-header h2 {
        font-size: 1.5rem;
    }
    
    .section-header p {
        font-size: 0.9rem;
    }
    
    /* Category tabs */
    .category-tabs {
        gap: 0.5rem;
    }
    
    .cat-tab {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    
    /* Featured post */
    .post-featured-big {
        grid-template-columns: 1fr;
        min-height: auto;
        margin-bottom: 1.5rem;
    }
    
    .pfb-content {
        padding: 1.5rem;
    }
    
    .pfb-content h2 {
        font-size: 1.4rem;
    }
    
    .pfb-excerpt {
        font-size: 0.95rem;
    }
    
    .pfb-meta {
        font-size: 0.8rem;
        gap: 1rem;
    }
    
    .pfb-read-btn {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* Posts row */
    .posts-row-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .post-card-h {
        flex-direction: column;
    }
    
    .pch-image {
        width: 100%;
        height: 180px;
    }
    
    .pch-body {
        padding: 1rem;
    }
    
    .pch-title {
        font-size: 1rem;
    }
    
    .pch-excerpt {
        font-size: 0.85rem;
    }
    
    /* Posts list strip */
    .posts-list-strip {
        border-radius: 20px;
    }
    
    .strip-header {
        padding: 1rem 1.5rem;
    }
    
    .strip-header h3 {
        font-size: 0.95rem;
    }
    
    .post-list-item {
        padding: 1rem 1.5rem;
        gap: 0.8rem;
    }
    
    .pli-num {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }
    
    .pli-thumb,
    .pli-thumb-placeholder {
        width: 52px;
        height: 46px;
    }
    
    .pli-title {
        font-size: 0.95rem;
    }
    
    .pli-meta {
        font-size: 0.75rem;
        gap: 0.8rem;
    }
    
    .read-time-pill {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
    
    /* Newsletter banner */
    .newsletter-banner {
        padding: 2rem 1.5rem;
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .nb-content h3 {
        font-size: 1.4rem;
    }
    
    .nb-content p {
        font-size: 0.95rem;
    }
    
    .nb-form .input-wrap {
        min-width: 100%;
    }
    
    .nb-form input {
        font-size: 0.95rem;
        padding: 0.7rem 1rem;
    }
    
    .nb-form button {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .blog-section-hero h1 {
        font-size: 1.8rem;
    }
    
    .blog-section-hero p {
        font-size: 0.95rem;
    }
    
    .pfb-content {
        padding: 1.2rem;
    }
    
    .pfb-content h2 {
        font-size: 1.2rem;
    }
    
    .pfb-excerpt {
        font-size: 0.9rem;
    }
    
    .pch-image {
        height: 160px;
    }
    
    .pch-body {
        padding: 0.9rem;
    }
    
    .pch-title {
        font-size: 0.95rem;
    }
    
    .post-list-item {
        padding: 0.9rem 1.2rem;
    }
    
    .pli-num {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
    
    .pli-thumb,
    .pli-thumb-placeholder {
        width: 48px;
        height: 42px;
    }
    
    .newsletter-banner {
        padding: 1.5rem 1rem;
    }
    
    .nb-content h3 {
        font-size: 1.2rem;
    }
    
    .nb-form input {
        padding: 0.6rem 0.8rem;
    }
    
    .nb-form button {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .blog-section-hero h1 {
        font-size: 1.5rem;
    }
    
    .blog-section-hero p {
        font-size: 0.9rem;
    }
    
    .hero-stats-strip {
        gap: 1rem;
    }
    
    .hstat-num {
        font-size: 1.2rem;
    }
    
    .pfb-content {
        padding: 1rem;
    }
    
    .pfb-content h2 {
        font-size: 1.1rem;
    }
    
    .pfb-excerpt {
        font-size: 0.85rem;
    }
    
    .pfb-read-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
    
    .pch-image {
        height: 140px;
    }
    
    .pch-body {
        padding: 0.8rem;
    }
    
    .pch-title {
        font-size: 0.9rem;
    }
    
    .pch-excerpt {
        font-size: 0.8rem;
    }
    
    .post-list-item {
        padding: 0.8rem 1rem;
        gap: 0.6rem;
    }
    
    .pli-num {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .pli-thumb,
    .pli-thumb-placeholder {
        width: 44px;
        height: 40px;
    }
    
    .pli-title {
        font-size: 0.85rem;
    }
    
    .newsletter-banner {
        padding: 1.2rem 0.8rem;
    }
    
    .nb-content h3 {
        font-size: 1.1rem;
    }
    
    .nb-content p {
        font-size: 0.85rem;
    }
}

/* ============================================
   MOBILE FOOTER STYLES
   ============================================ */

@media (max-width: 991.98px) {
    footer {
        padding: 50px 0 20px;
    }
    
    footer .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    footer .footer-column h3 {
        font-size: 1.1rem;
    }
    
    footer .footer-links li {
        margin-bottom: 10px;
    }
    
    footer .copyright {
        font-size: 0.85rem;
        padding: 20px 15px;
    }
}

@media (max-width: 768px) {
    footer {
        padding: 40px 0 20px;
    }
    
    footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    footer .footer-column {
        text-align: center;
    }
    
    footer .footer-column h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    footer .social-links {
        justify-content: center;
    }
    
    footer .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    footer .footer-links li {
        margin-bottom: 0;
    }
    
    footer .copyright {
        font-size: 0.8rem;
        padding: 15px 10px;
    }
}

@media (max-width: 480px) {
    footer {
        padding: 30px 0 15px;
    }
    
    footer .footer-grid {
        gap: 20px;
    }
    
    footer .footer-column h3 {
        font-size: 1rem;
    }
    
    footer .social-links a {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* ============================================
   TOUCH-FRIENDLY IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
    /* Increase touch targets */
    .nav-menu li a,
    .btn,
    .header-icon,
    .cat-tab,
    .view-all-btn,
    .pch-read,
    .pfb-read-btn {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-menu li a {
        justify-content: flex-start;
    }
    
    /* Improve tap spacing */
    .post-list-item {
        min-height: 60px;
    }
    
    .category-tabs {
        gap: 0.4rem;
    }
    
    /* Better mobile form inputs */
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevent iOS zoom */
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .fade-in-up {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* Simplify hover effects */
    .post-card-h:hover,
    .post-featured-big:hover,
    .post-list-item:hover {
        transform: none !important;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
    /* Better focus states for touch */
    a:focus,
    button:focus,
    input:focus {
        outline: 2px solid var(--bpa-primary);
        outline-offset: 2px;
    }
    
    /* Skip link for mobile */
    .skip-link:focus {
        left: 10px;
        top: 10px;
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* ---- migrated from v3/css/page-features.css ---- */
:root {
            --primary: var(--bpa-navy);
            --secondary: var(--bpa-navy);
            --accent: var(--bpa-primary);
            --light: rgba(37, 99, 235, .06);
            --dark: var(--bpa-navy);
            --success: var(--bpa-success);
            --error: var(--bpa-danger);
            --text: var(--bpa-text);
            --light-text: var(--bpa-text-muted);
            --border: var(--bpa-border);
            --background: var(--bpa-bg);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: inherit;
        }
        
        body {
            background-color: var(--background);
            color: var(--text);
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Hero Section */
        .features-hero {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 100px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .features-hero::before {
            content: "";
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            top: -100px;
            right: -100px;
        }
        
        .features-hero::after {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            bottom: -80px;
            left: -80px;
        }
        
        .features-hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .features-hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .features-hero p {
            font-size: 20px;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        /* Features Grid */
        .features-section {
            padding: 100px 0;
        }
        
        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 60px;
        }
        
        .section-header h2 {
            font-size: 36px;
            color: var(--primary);
            margin-bottom: 15px;
        }
        
        .section-header p {
            color: var(--light-text);
            font-size: 18px;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        
        .feature-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            width: 80px;
            height: 80px;
            background: var(--light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
        }
        
        .feature-icon i {
            font-size: 36px;
            color: var(--accent);
        }
        
        .feature-card h3 {
            font-size: 24px;
            margin-bottom: 15px;
            color: var(--primary);
        }
        
        .feature-card p {
            color: var(--light-text);
            margin-bottom: 20px;
        }
        
        .feature-link {
            display: inline-block;
            color: var(--accent);
            text-decoration: none;
            font-weight: 600;
            margin-top: 10px;
        }
        
        .feature-link:hover {
            text-decoration: underline;
        }
        
        /* Feature Categories */
        .feature-categories {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 50px;
        }
        
        .category-btn {
            padding: 10px 20px;
            background: white;
            border: 1px solid var(--border);
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .category-btn.active, .category-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* Feature Spotlight */
        .feature-spotlight {
            background: var(--light);
            padding: 80px 0;
            margin: 80px 0;
        }
        
        .spotlight-container {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .spotlight-content {
            flex: 1;
        }
        
        .spotlight-image {
            flex: 1;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-radius: 10px;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            padding: 20px;
        }
        
        .spotlight-content h2 {
            font-size: 32px;
            color: var(--primary);
            margin-bottom: 20px;
        }
        
        .spotlight-content ul {
            list-style: none;
            margin: 30px 0;
        }
        
        .spotlight-content ul li {
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
        }
        
        .spotlight-content ul li:last-child {
            border-bottom: none;
        }
        
        .spotlight-content ul li i {
            color: var(--success);
            margin-right: 15px;
            font-size: 20px;
        }
        
        /* Use Cases */
        .use-cases {
            margin: 80px 0;
        }
        
        .use-case-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }
        
        .use-case-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-left: 4px solid var(--accent);
        }
        
        .use-case-card h3 {
            font-size: 22px;
            margin-bottom: 15px;
            color: var(--primary);
        }
        
        .use-case-card p {
            color: var(--light-text);
            margin-bottom: 20px;
        }
        
        .use-case-stats {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }
        
        .stat-item {
            text-align: center;
            padding: 15px;
            background: var(--light);
            border-radius: 8px;
            flex: 1;
        }
        
        .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--accent);
        }
        
        .stat-label {
            font-size: 14px;
            color: var(--light-text);
        }
        
        /* CTA */
        .features-cta {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
            border-radius: 10px;
            margin: 80px 0;
        }
        
        .features-cta h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }
        
        .features-cta p {
            max-width: 700px;
            margin: 0 auto 30px;
            font-size: 18px;
            opacity: 0.9;
        }
        
        .btn {
            padding: 15px 35px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
        
        .btn-primary {
            background: white;
            color: var(--primary);
            border: 2px solid white;
        }
        
        .btn-primary:hover {
            background: transparent;
            color: white;
        }
        
        .btn-outline {
            background: transparent;
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.5);
            margin-left: 15px;
        }
        
        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        /* Responsive Design */
        @media (max-width: 992px) {
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .spotlight-container {
                flex-direction: column;
            }
            
            .use-case-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .features-hero h1 {
                font-size: 36px;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .features-cta .btn {
                display: block;
                width: 100%;
                margin-bottom: 15px;
            }
            
            .features-cta .btn-outline {
                margin-left: 0;
            }
        }

/* Add to existing styles */
.features-hero {
    display: flex;
    align-items: center;
    min-height: 80vh; /* Ensure minimum height for proper centering */
}

.features-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center; /* Horizontal centering */
    padding: 50px 0; /* Added vertical padding */
}

/* Optional: Adjust button spacing */
.hero-buttons {
    margin-top: 20px;
}

/* ---- migrated from v3/css/page-how-it-works.css ---- */
:root {
            --primary: var(--bpa-navy);
            --secondary: var(--bpa-navy);
            --accent: var(--bpa-primary);
            --light: rgba(37, 99, 235, .06);
            --dark: var(--bpa-navy);
            --success: var(--bpa-success);
            --error: var(--bpa-danger);
            --text: var(--bpa-text);
            --light-text: var(--bpa-text-muted);
            --border: var(--bpa-border);
            --background: var(--bpa-bg);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: inherit;
        }
        
        body {
            background-color: var(--background);
            color: var(--text);
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Hero Section */
        .how-hero {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 100px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .how-hero::before {
            content: "";
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            top: -100px;
            right: -100px;
        }
        
        .how-hero::after {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            bottom: -80px;
            left: -80px;
        }
        
        .how-hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .how-hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .how-hero p {
            font-size: 20px;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        /* Process Overview */
        .process-overview {
            padding: 100px 0;
            background: white;
        }
        
        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 60px;
        }
        
        .section-header h2 {
            font-size: 36px;
            color: var(--primary);
            margin-bottom: 15px;
        }
        
        .section-header p {
            color: var(--light-text);
            font-size: 18px;
        }
        
        .timeline {
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .timeline::after {
            content: '';
            position: absolute;
            width: 4px;
            background-color: var(--border);
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -2px;
        }
        
        .timeline-step {
            padding: 10px 40px;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }
        
        .timeline-step:nth-child(odd) {
            left: 0;
        }
        
        .timeline-step:nth-child(even) {
            left: 50%;
        }
        
        .timeline-step::after {
            content: '';
            position: absolute;
            width: 24px;
            height: 24px;
            background-color: white;
            border: 4px solid var(--accent);
            top: 32px;
            border-radius: 50%;
            z-index: 1;
        }
        
        .timeline-step:nth-child(odd)::after {
            right: -14px;
        }
        
        .timeline-step:nth-child(even)::after {
            left: -10px;
        }
        
        .step-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border);
        }
        
        .step-number {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 60px;
            font-weight: 800;
            color: var(--light);
            z-index: 0;
        }
        
        .step-icon {
            width: 80px;
            height: 80px;
            background: var(--light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
        }
        
        .step-icon i {
            font-size: 36px;
            color: var(--accent);
        }
        
        .step-card h3 {
            font-size: 24px;
            margin-bottom: 15px;
            color: var(--primary);
            position: relative;
            z-index: 1;
        }
        
        .step-card p {
            color: var(--light-text);
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }
        
        /* Demo Section */
        .demo-section {
            background: linear-gradient(to right, var(--primary) 50%, var(--secondary) 50%);
            padding: 100px 0;
            color: white;
        }
        
        .demo-container {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .demo-content {
            flex: 1;
        }
        
        .demo-video {
            flex: 1;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .play-button {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            z-index: 2;
        }
        
        .play-button i {
            font-size: 36px;
            color: white;
            margin-left: 5px;
        }
        
        .play-button:hover {
            transform: scale(1.1);
            background: rgba(255, 255, 255, 0.3);
        }
        
        .demo-content h2 {
            font-size: 32px;
            margin-bottom: 20px;
        }
        
        .demo-content ul {
            list-style: none;
            margin: 30px 0;
        }
        
        .demo-content ul li {
            padding: 12px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
        }
        
        .demo-content ul li:last-child {
            border-bottom: none;
        }
        
        .demo-content ul li i {
            margin-right: 15px;
            font-size: 20px;
            color: var(--accent);
        }
        
        /* FAQ Section */
        .faq-section {
            padding: 100px 0;
            background: white;
        }
        
        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }
        
        .faq-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .faq-card:hover {
            border-color: var(--accent);
        }
        
        .faq-card.active {
            border-color: var(--accent);
            box-shadow: 0 10px 30px rgba(49, 130, 206, 0.1);
        }
        
        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .faq-question h3 {
            font-size: 18px;
            color: var(--primary);
        }
        
        .faq-question i {
            color: var(--accent);
            transition: transform 0.3s ease;
        }
        
        .faq-card.active .faq-question i {
            transform: rotate(180deg);
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            color: var(--light-text);
            padding-top: 0;
        }
        
        .faq-card.active .faq-answer {
            max-height: 500px;
            padding-top: 20px;
        }
        
        /* CTA Section */
        .how-cta {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 100px 0;
            text-align: center;
            border-radius: 10px;
            margin: 50px 0;
        }
        
        .how-cta h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }
        
        .how-cta p {
            max-width: 700px;
            margin: 0 auto 30px;
            font-size: 18px;
            opacity: 0.9;
        }
        
        .btn {
            padding: 15px 35px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
        
        .btn-primary {
            background: white;
            color: var(--primary);
            border: 2px solid white;
        }
        
        .btn-primary:hover {
            background: transparent;
            color: white;
        }
        
        .btn-outline {
            background: transparent;
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.5);
            margin-left: 15px;
        }
        
        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        /* Responsive Design */
        @media (max-width: 992px) {
            .timeline::after {
                left: 31px;
            }
            
            .timeline-step {
                width: 100%;
                padding-left: 70px;
                padding-right: 25px;
            }
            
            .timeline-step:nth-child(even) {
                left: 0;
            }
            
            .timeline-step:nth-child(odd)::after,
            .timeline-step:nth-child(even)::after {
                left: 15px;
            }
            
            .demo-container {
                flex-direction: column;
            }
            
            .faq-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .how-hero h1 {
                font-size: 36px;
            }
            
            .how-cta .btn {
                display: block;
                width: 100%;
                margin-bottom: 15px;
            }
            
            .how-cta .btn-outline {
                margin-left: 0;
            }
        }

/* Add to existing styles */
.how-hero {
    display: flex;
    align-items: center;
    min-height: 80vh; /* Ensure minimum height for proper centering */
}

.how-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center; /* Horizontal centering */
    padding: 50px 0; /* Added vertical padding */
}

/* Optional: Adjust button spacing */
.hero-buttons {
    margin-top: 20px;
}

/* ---- migrated from v3/css/page-why-bizplan.css ---- */
:root {
            --primary: var(--bpa-navy);
            --secondary: var(--bpa-navy);
            --accent: var(--bpa-primary);
            --light: rgba(37, 99, 235, .06);
            --dark: var(--bpa-navy);
            --text: var(--bpa-text);
            --background: var(--bpa-bg);
        }
        body { background-color: var(--background); }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* Hero Section */
        .why-hero {
            background: url('https://bizplanaipro.in/wp-content/uploads/2025/08/why-bizplan-hero.png') no-repeat center center;
            background-size: cover;
            color: var(--bpa-surface);
            text-align: center;
            padding: 120px 20px;
            position: relative;
            overflow: hidden;
        }
        .why-hero::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(15, 23, 42, 0.7); /* Blue overlay for readability */
            z-index: 1;
        }
        .why-hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
        }
        .why-hero h1 { font-size: 48px; margin-bottom: 20px; line-height: 1.2; }
        .why-hero p { font-size: 20px; margin-bottom: 30px; opacity: 0.95; }
        .btn-primary {
            background: var(--accent);
            color: var(--bpa-surface);
            padding: 14px 32px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            margin-right: 15px;
            display: inline-block;
            transition: background 0.3s ease;
        }
        .btn-primary:hover { background: var(--bpa-primary); }
        .btn-outline {
            border: 2px solid var(--accent);
            color: var(--accent);
            padding: 14px 32px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            display: inline-block;
            transition: all 0.3s ease;
        }
        .btn-outline:hover {
            background: var(--accent);
            color: var(--bpa-surface);
        }

        /* Value Proposition */
        .why-section { padding: 80px 20px; text-align: center; }
        .why-section h2 { font-size: 36px; color: var(--primary); margin-bottom: 40px; }
        .value-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
        .value-card {
            flex: 1; min-width: 280px; background: var(--bpa-surface); padding: 30px; border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .value-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .value-card h3 { margin-bottom: 10px; color: var(--secondary); }

        /* Comparison Table */
        .comparison { background: var(--light); padding: 80px 20px; }
        .comparison table {
            width: 100%; border-collapse: collapse; background: var(--bpa-surface);
            border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        .comparison th { background: var(--dark); color: var(--bpa-surface); padding: 15px; text-align: left; font-size: 18px; }
        .comparison td { padding: 15px; text-align: center; border-bottom: 1px solid var(--bpa-bg); font-size: 16px; }
        .comparison tr:nth-child(even) { background: var(--bpa-surface); }

        /* CTA */
        .cta-section {
            background: var(--primary); color: var(--bpa-surface); text-align: center;
            padding: 80px 20px;
        }
        .cta-section h2 { font-size: 36px; margin-bottom: 20px; }
        .cta-section p { font-size: 20px; margin-bottom: 30px; }

/* ---- migrated from v3/css/page-blog-section.css ---- */
/* Blog Page Specific Styles - Scoped to avoid conflicts */
    .blog-page-wrapper {
        --blog-primary: var(--bpa-warning);
        --blog-primary-dark: var(--bpa-warning);
        --blog-secondary: var(--bpa-navy);
        --blog-secondary-dark: var(--bpa-navy);
        --blog-text-dark: var(--bpa-text);
        --blog-text-light: var(--bpa-text-muted);
        --blog-glass-bg: rgba(255,255,255,0.96);
        --blog-glass-border: rgba(255,255,255,0.6);
        --blog-glass-shadow: 0 8px 32px 0 rgba(31,38,135,0.1);
    }

    .blog-page-wrapper {
        position: relative;
        z-index: 1;
    }

    /* ============================================================
       SECTION HERO BANNER
       ============================================================ */
    .blog-section-hero {
        background: linear-gradient(135deg, var(--blog-secondary-dark) 0%, var(--blog-secondary) 55%, var(--bpa-primary) 100%);
        color: white;
        padding: 5rem 0 7rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    /* Animated blobs */
    .blob-1, .blob-2 {
        position: absolute;
        border-radius: 50%;
        filter: blur(70px);
        pointer-events: none;
    }
    .blob-1 {
        width: 420px; height: 420px;
        background: rgba(245, 158, 11, 0.13);
        top: -100px; right: -80px;
        animation: floatBlob 9s ease-in-out infinite;
    }
    .blob-2 {
        width: 320px; height: 320px;
        background: rgba(37, 99, 235, 0.15);
        bottom: -80px; left: -60px;
        animation: floatBlob 12s ease-in-out infinite reverse;
    }
    /* Wave divider at bottom */
    .hero-wave {
        position: absolute;
        bottom: -2px; left: 0; right: 0;
        line-height: 0;
    }
    .hero-wave svg { display: block; width: 100%; }
    @keyframes floatBlob {
        0%,100% { transform: translateY(0) scale(1); }
        50%      { transform: translateY(-25px) scale(1.06); }
    }
    .blog-section-hero-inner {
        position: relative; z-index: 2;
        max-width: 780px;
        margin: 0 auto;
        padding: 0 2rem;
    }
    .hero-badge {
        display: inline-flex; align-items: center; gap: 0.5rem;
        background: rgba(245, 158, 11, 0.2);
        border: 1px solid rgba(245, 158, 11, 0.35);
        color: rgba(245, 158, 11, .18);
        padding: 0.45rem 1.2rem;
        border-radius: 50px;
        font-size: 0.88rem; font-weight: 600;
        margin-bottom: 1.4rem;
    }
    .blog-section-hero h1 {
        font-size: 3rem; font-weight: 800;
        line-height: 1.2; margin-bottom: 1rem;
    }
    .blog-section-hero p {
        font-size: 1.15rem; opacity: 0.85;
        line-height: 1.7; margin-bottom: 2.5rem;
        max-width: 600px; margin-left: auto; margin-right: auto;
    }
    /* Stats strip inside hero */
    .hero-stats-strip {
        display: flex; justify-content: center;
        gap: 3rem; flex-wrap: wrap;
        padding-top: 2rem;
        border-top: 1px solid rgba(255,255,255,0.12);
    }
    .hstat { text-align: center; }
    .hstat-num {
        font-size: 1.9rem; font-weight: 800;
        color: white; line-height: 1;
        margin-bottom: 0.3rem;
    }
    .hstat-label {
        font-size: 0.78rem; opacity: 0.65;
        text-transform: uppercase; letter-spacing: 1.2px;
    }

    /* ============================================================
       PAGE BACKGROUND — dot grid (matches your pricing section)
       ============================================================ */
    .blog-section-page {
        background-color: var(--bpa-bg);
        background-image: radial-gradient(var(--bpa-border) 1.2px, transparent 1.2px);
        background-size: 28px 28px;
        padding: 3rem 0 6rem;
        width: 100%;
        position: relative;
    }

    .page-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        width: 100%;
    }

    /* ============================================================
       SECTION HEADER (reusable)
    ============================================================ */
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .section-header-left { display: flex; align-items: center; gap: 1rem; }
    .section-icon {
        width: 52px; height: 52px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--blog-primary), var(--blog-primary-dark));
        color: white;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.4rem;
        box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
        flex-shrink: 0;
    }
    .section-header h2 {
        font-size: 1.8rem; font-weight: 800;
        color: var(--blog-text-dark); line-height: 1.2;
    }
    .section-header h2 span { color: var(--blog-primary); }
    .section-header p { font-size: 0.95rem; color: var(--blog-text-light); margin-top: 0.2rem; }
    .view-all-btn {
        display: inline-flex; align-items: center; gap: 0.5rem;
        background: white;
        border: 2px solid var(--blog-primary);
        color: var(--blog-primary);
        padding: 0.65rem 1.6rem;
        border-radius: 30px;
        font-weight: 700; font-size: 0.9rem;
        text-decoration: none;
        transition: all 0.3s;
        white-space: nowrap;
    }
    .view-all-btn:hover {
        background: var(--blog-primary); color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
    }

    /* ============================================================
       POST 1 — BIG FEATURED CARD (full width)
    ============================================================ */
    .post-featured-big {
        background: linear-gradient(135deg, var(--blog-secondary-dark) 0%, var(--blog-secondary) 100%);
        border-radius: 28px;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        min-height: 340px;
        margin-bottom: 2rem;
        box-shadow: 0 24px 60px rgba(30,60,114,0.22);
        transition: transform 0.35s, box-shadow 0.35s;
        text-decoration: none;
        position: relative;
    }
    .post-featured-big:hover {
        transform: translateY(-6px);
        box-shadow: 0 35px 70px rgba(30,60,114,0.28);
    }
    @media (max-width: 768px) {
        .post-featured-big { grid-template-columns: 1fr; }
    }
    .pfb-content {
        padding: 3rem;
        display: flex; flex-direction: column;
        justify-content: center;
        position: relative; z-index: 2;
        color: white;
    }
    .pfb-badge {
        display: inline-flex; align-items: center; gap: 0.4rem;
        background: var(--blog-primary);
        color: white;
        padding: 0.3rem 0.9rem;
        border-radius: 20px;
        font-size: 0.75rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 1px;
        margin-bottom: 1.2rem; width: fit-content;
    }
    .pfb-content h2 {
        font-size: 1.75rem; font-weight: 800;
        line-height: 1.3; color: white;
        margin-bottom: 0.9rem;
    }
    .pfb-excerpt {
        font-size: 1rem; opacity: 0.82;
        line-height: 1.65; margin-bottom: 1.5rem;
    }
    .pfb-meta {
        display: flex; align-items: center;
        gap: 1.2rem; font-size: 0.82rem;
        opacity: 0.7; margin-bottom: 1.8rem;
        flex-wrap: wrap;
    }
    .pfb-meta i { color: rgba(245, 158, 11, .18); margin-right: 3px; }
    .pfb-read-btn {
        display: inline-flex; align-items: center; gap: 0.5rem;
        background: var(--blog-primary); color: white;
        padding: 0.8rem 2rem; border-radius: 30px;
        font-weight: 700; font-size: 0.95rem;
        text-decoration: none; width: fit-content;
        transition: all 0.3s;
        box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
    }
    .pfb-read-btn:hover {
        background: var(--blog-primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(245, 158, 11, 0.45);
    }
    .pfb-image {
        overflow: hidden; position: relative;
    }
    .pfb-image img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform 0.5s;
    }
    .post-featured-big:hover .pfb-image img { transform: scale(1.06); }
    .pfb-image-placeholder {
        width: 100%; height: 100%;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(37, 99, 235, 0.25));
        display: flex; align-items: center; justify-content: center;
        font-size: 6rem; color: rgba(255,255,255,0.15);
    }

    /* ============================================================
       POSTS 2 & 3 — HORIZONTAL LIST CARDS (medium)
    ============================================================ */
    .posts-row-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    @media (max-width: 768px) { .posts-row-2 { grid-template-columns: 1fr; } }

    .post-card-h {
        background: var(--blog-glass-bg);
        backdrop-filter: blur(14px);
        border: 1px solid var(--blog-glass-border);
        border-radius: 22px;
        overflow: hidden;
        display: flex;
        box-shadow: var(--blog-glass-shadow);
        transition: all 0.3s;
        text-decoration: none;
        color: inherit;
    }
    .post-card-h:hover {
        transform: translateY(-5px);
        box-shadow: 0 22px 50px rgba(0,0,0,0.11);
        border-color: rgba(245, 158, 11, 0.2);
    }
    .pch-image { width: 145px; flex-shrink: 0; overflow: hidden; position: relative; }
    .pch-image img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform 0.4s;
    }
    .post-card-h:hover .pch-image img { transform: scale(1.08); }
    .pch-placeholder {
        width: 100%; height: 100%;
        display: flex; align-items: center; justify-content: center;
        font-size: 2.2rem;
    }
    .pch-placeholder.blue   { background: linear-gradient(135deg,rgba(37, 99, 235, .08),rgba(37, 99, 235, .16)); color:var(--bpa-primary); }
    .pch-placeholder.orange { background: linear-gradient(135deg,rgba(245, 158, 11, .12),rgba(245, 158, 11, .22)); color:var(--bpa-warning); }
    .pch-placeholder.green  { background: linear-gradient(135deg,rgba(34, 197, 94, .10),var(--bpa-success)); color:var(--bpa-success); }
    .pch-placeholder.purple { background: linear-gradient(135deg,rgba(124, 58, 237, .10),var(--bpa-secondary)); color:var(--bpa-secondary); }
    .pch-placeholder.teal   { background: linear-gradient(135deg,rgba(239, 68, 68, .10),var(--bpa-text-muted)); color:var(--bpa-text-muted); }
    .pch-cat-badge {
        position: absolute; top: 10px; left: 10px;
        background: var(--blog-primary); color: white;
        font-size: 0.68rem; font-weight: 700;
        padding: 0.2rem 0.6rem; border-radius: 12px;
        text-transform: uppercase;
    }
    .pch-body {
        padding: 1.3rem 1.4rem;
        display: flex; flex-direction: column;
        justify-content: center; flex: 1;
    }
    .pch-meta {
        display: flex; align-items: center; gap: 0.8rem;
        font-size: 0.78rem; color: var(--blog-text-light);
        margin-bottom: 0.6rem;
    }
    .pch-meta i { color: var(--blog-primary); }
    .pch-title {
        font-size: 1.05rem; font-weight: 700;
        color: var(--blog-text-dark); line-height: 1.4;
        margin-bottom: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .pch-excerpt {
        font-size: 0.86rem; color: var(--blog-text-light);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .pch-read {
        margin-top: 0.8rem;
        font-size: 0.85rem; font-weight: 700;
        color: var(--blog-primary); display: inline-flex;
        align-items: center; gap: 4px;
        transition: gap 0.2s;
    }
    .pch-read:hover { gap: 8px; }

    /* ============================================================
       POSTS 4–10 — NUMBERED LIST STRIP (compact)
    ============================================================ */
    .posts-list-strip {
        background: var(--blog-glass-bg);
        backdrop-filter: blur(14px);
        border: 1px solid var(--blog-glass-border);
        border-radius: 24px;
        box-shadow: var(--blog-glass-shadow);
        overflow: hidden;
    }
    .strip-header {
        background: linear-gradient(135deg, var(--blog-secondary-dark), var(--blog-secondary));
        padding: 1.2rem 2rem;
        display: flex; align-items: center;
        justify-content: space-between;
    }
    .strip-header h3 {
        color: white; font-size: 1rem; font-weight: 700;
        display: flex; align-items: center; gap: 0.6rem;
    }
    .strip-header h3 i { color: rgba(245, 158, 11, .18); }
    .strip-count {
        background: var(--blog-primary);
        color: white; font-size: 0.78rem; font-weight: 700;
        padding: 0.3rem 0.8rem; border-radius: 20px;
    }

    .post-list-item {
        display: flex; align-items: center;
        gap: 1.2rem;
        padding: 1.1rem 2rem;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        text-decoration: none; color: inherit;
        transition: all 0.25s;
        position: relative;
    }
    .post-list-item:last-child { border-bottom: none; }
    .post-list-item:hover {
        background: rgba(245, 158, 11, 0.04);
        padding-left: 2.4rem;
    }
    /* Accent line on hover */
    .post-list-item::before {
        content: '';
        position: absolute; left: 0; top: 0; bottom: 0;
        width: 4px;
        background: var(--blog-primary);
        border-radius: 0 4px 4px 0;
        opacity: 0;
        transition: opacity 0.25s;
    }
    .post-list-item:hover::before { opacity: 1; }

    /* Rank number */
    .pli-num {
        width: 36px; height: 36px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.9rem; font-weight: 800;
        flex-shrink: 0;
        transition: all 0.3s;
    }
    /* top 3 get gradient, rest get grey */
    .pli-num.top { background: linear-gradient(135deg, var(--blog-primary), var(--blog-primary-dark)); color: white; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
    .pli-num.normal { background: var(--bpa-bg); color: var(--bpa-text-muted); }
    .post-list-item:hover .pli-num.normal { background: rgba(245, 158, 11, 0.1); color: var(--blog-primary); }

    /* Thumbnail in list */
    .pli-thumb { width: 62px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
    .pli-thumb-placeholder {
        width: 62px; height: 56px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.4rem; flex-shrink: 0;
    }

    .pli-body { flex: 1; min-width: 0; }
    .pli-cat {
        font-size: 0.72rem; font-weight: 700;
        color: var(--blog-primary); text-transform: uppercase;
        letter-spacing: 0.5px; margin-bottom: 0.2rem;
    }
    .pli-title {
        font-size: 0.97rem; font-weight: 700;
        color: var(--blog-text-dark); line-height: 1.4;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        transition: color 0.2s;
    }
    .post-list-item:hover .pli-title { color: var(--blog-primary); }
    .pli-meta {
        display: flex; align-items: center; gap: 1rem;
        font-size: 0.78rem; color: var(--blog-text-light);
        margin-top: 0.3rem;
    }
    .pli-meta i { color: var(--blog-primary); opacity: 0.7; }

    /* Right side arrow */
    .pli-arrow {
        color: var(--bpa-border); font-size: 0.85rem;
        transition: all 0.25s; flex-shrink: 0;
    }
    .post-list-item:hover .pli-arrow { color: var(--blog-primary); transform: translateX(4px); }

    /* Read-time pill */
    .read-time-pill {
        background: var(--bpa-bg);
        color: var(--blog-text-light);
        font-size: 0.75rem; font-weight: 600;
        padding: 0.2rem 0.7rem; border-radius: 20px;
        white-space: nowrap; flex-shrink: 0;
    }

    /* ============================================================
       NEWSLETTER CTA BANNER
    ============================================================ */
    .newsletter-banner {
        background: linear-gradient(135deg, var(--blog-secondary-dark) 0%, var(--blog-secondary) 60%, var(--bpa-primary) 100%);
        border-radius: 28px;
        padding: 3.5rem 4rem;
        color: white;
        display: flex; align-items: center;
        justify-content: space-between;
        gap: 3rem;
        margin-top: 3rem;
        position: relative; overflow: hidden;
        box-shadow: 0 20px 50px rgba(30,60,114,0.22);
    }
    .newsletter-banner::before {
        content: '';
        position: absolute; top: -50px; right: -50px;
        width: 220px; height: 220px;
        background: rgba(245, 158, 11, 0.12);
        border-radius: 50%; filter: blur(40px);
    }
    .newsletter-banner::after {
        content: '';
        position: absolute; bottom: -40px; left: 30%;
        width: 160px; height: 160px;
        background: rgba(255,255,255,0.06);
        border-radius: 50%;
    }
    .nb-content { position: relative; z-index: 2; }
    .nb-tag {
        background: var(--blog-primary);
        color: white; padding: 0.3rem 0.9rem;
        border-radius: 20px; font-size: 0.75rem;
        font-weight: 700; text-transform: uppercase;
        letter-spacing: 1px; display: inline-block;
        margin-bottom: 1rem;
    }
    .nb-content h3 { font-size: 1.7rem; font-weight: 800; margin-bottom: 0.6rem; }
    .nb-content p  { font-size: 1rem; opacity: 0.85; line-height: 1.6; }
    .nb-form { position: relative; z-index: 2; flex-shrink: 0; }
    .nb-form .input-wrap {
        background: rgba(255,255,255,0.12);
        border: 1.5px solid rgba(255,255,255,0.25);
        border-radius: 50px;
        display: flex; align-items: center;
        padding: 0.4rem; backdrop-filter: blur(10px);
        min-width: 360px;
    }
    .nb-form input {
        flex: 1; background: transparent; border: none;
        outline: none; color: white;
        font-size: 0.95rem; padding: 0.75rem 1rem;
    }
    .nb-form input::placeholder { color: rgba(255,255,255,0.55); }
    .nb-form button {
        background: var(--blog-primary); color: white;
        border: none; padding: 0.75rem 1.6rem;
        border-radius: 40px; font-weight: 700;
        font-size: 0.9rem; cursor: pointer;
        transition: all 0.3s; white-space: nowrap;
    }
    .nb-form button:hover {
        background: var(--blog-primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
    }
    @media (max-width: 900px) {
        .newsletter-banner { flex-direction: column; padding: 2.5rem 2rem; text-align: center; }
        .nb-form .input-wrap { min-width: unset; width: 100%; }
    }

    /* ============================================================
       CATEGORY TABS
    ============================================================ */
    .category-tabs {
        display: flex; gap: 0.6rem; flex-wrap: wrap;
        margin-bottom: 2rem;
    }
    .cat-tab {
        padding: 0.55rem 1.3rem;
        border-radius: 50px;
        font-size: 0.875rem; font-weight: 600;
        cursor: pointer; text-decoration: none;
        border: 1.5px solid var(--bpa-border);
        color: var(--blog-text-light); background: white;
        transition: all 0.3s;
    }
    .cat-tab:hover, .cat-tab.active {
        background: var(--blog-primary); color: white;
        border-color: var(--blog-primary);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(245, 158, 11, 0.28);
    }

    /* ============================================================
       ANIMATIONS
    ============================================================ */
    .fade-in-up {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .fade-in-up.visible { opacity: 1; transform: translateY(0); }

    /* Stagger delay for list items */
    .post-list-item:nth-child(1)  { transition-delay: 0.05s; }
    .post-list-item:nth-child(2)  { transition-delay: 0.10s; }
    .post-list-item:nth-child(3)  { transition-delay: 0.15s; }
    .post-list-item:nth-child(4)  { transition-delay: 0.20s; }
    .post-list-item:nth-child(5)  { transition-delay: 0.25s; }
    .post-list-item:nth-child(6)  { transition-delay: 0.30s; }
    .post-list-item:nth-child(7)  { transition-delay: 0.35s; }

    @media (max-width: 768px) {
        .blog-section-hero h1 { font-size: 2rem; }
        .pfb-content { padding: 2rem; }
        .pfb-content h2 { font-size: 1.4rem; }
        .pch-image { width: 100px; }
        .post-list-item { padding: 1rem 1.2rem; gap: 0.8rem; }
        .pli-thumb, .pli-thumb-placeholder { width: 48px; height: 42px; }
        .post-list-item:hover { padding-left: 1.6rem; }
        
        /* Additional mobile improvements */
        .blog-section-hero { padding: 3rem 0 5rem; }
        .blog-section-hero-inner { padding: 0 1.5rem; }
        .hero-stats-strip { gap: 1.5rem; }
        .hstat-num { font-size: 1.5rem; }
        .hstat-label { font-size: 0.7rem; }
        
        .page-container { padding: 0 1.5rem; }
        .section-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
        .section-header h2 { font-size: 1.4rem; }
        .section-header p { font-size: 0.85rem; }
        
        .category-tabs { gap: 0.4rem; }
        .cat-tab { padding: 0.45rem 1rem; font-size: 0.8rem; }
        
        .post-featured-big { min-height: auto; margin-bottom: 1.5rem; }
        .pfb-content { padding: 1.5rem; }
        .pfb-content h2 { font-size: 1.3rem; }
        .pfb-excerpt { font-size: 0.9rem; }
        .pfb-meta { font-size: 0.75rem; gap: 0.8rem; }
        .pfb-read-btn { padding: 0.6rem 1.5rem; font-size: 0.85rem; }
        
        .posts-row-2 { gap: 1rem; margin-bottom: 1.5rem; }
        .post-card-h { flex-direction: column; }
        .pch-image { width: 100%; height: 180px; }
        .pch-body { padding: 1rem; }
        .pch-title { font-size: 0.95rem; }
        .pch-excerpt { font-size: 0.8rem; }
        
        .posts-list-strip { border-radius: 18px; }
        .strip-header { padding: 1rem 1.5rem; }
        .strip-header h3 { font-size: 0.9rem; }
        .post-list-item { padding: 0.9rem 1.2rem; gap: 0.6rem; }
        .pli-num { width: 30px; height: 30px; font-size: 0.8rem; }
        .pli-thumb, .pli-thumb-placeholder { width: 50px; height: 44px; }
        .pli-title { font-size: 0.9rem; }
        .pli-meta { font-size: 0.7rem; gap: 0.6rem; }
        .read-time-pill { font-size: 0.7rem; padding: 0.15rem 0.5rem; }
        
        .newsletter-banner { padding: 2rem 1.5rem; flex-direction: column; text-align: center; }
        .nb-content h3 { font-size: 1.3rem; }
        .nb-content p { font-size: 0.9rem; }
        .nb-form .input-wrap { min-width: 100%; }
        .nb-form input { font-size: 0.9rem; padding: 0.6rem 0.8rem; }
        .nb-form button { padding: 0.6rem 1.2rem; font-size: 0.85rem; }
    }

    @media (max-width: 480px) {
        .blog-section-hero h1 { font-size: 1.6rem; }
        .blog-section-hero p { font-size: 1rem; }
        .hero-stats-strip { gap: 1rem; }
        .hstat-num { font-size: 1.3rem; }
        
        .pfb-content { padding: 1.2rem; }
        .pfb-content h2 { font-size: 1.1rem; }
        .pfb-excerpt { font-size: 0.85rem; }
        .pfb-read-btn { padding: 0.5rem 1.2rem; font-size: 0.8rem; }
        
        .pch-image { height: 150px; }
        .pch-body { padding: 0.8rem; }
        .pch-title { font-size: 0.85rem; }
        .pch-excerpt { font-size: 0.75rem; }
        
        .post-list-item { padding: 0.8rem 1rem; }
        .pli-num { width: 26px; height: 26px; font-size: 0.75rem; }
        .pli-thumb, .pli-thumb-placeholder { width: 42px; height: 38px; }
        .pli-title { font-size: 0.85rem; }
        
        .newsletter-banner { padding: 1.5rem 1rem; }
        .nb-content h3 { font-size: 1.1rem; }
        .nb-form input { padding: 0.5rem 0.7rem; }
        .nb-form button { padding: 0.5rem 1rem; font-size: 0.8rem; }
    }

    /* Footer mobile adjustments for blog page */
    @media (max-width: 768px) {
        footer .footer-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        
        footer .footer-column {
            text-align: center;
        }
        
        footer .footer-column h3::after {
            left: 50%;
            transform: translateX(-50%);
        }
        
        footer .social-links {
            justify-content: center;
        }
        
        footer .copyright {
            font-size: 0.85rem;
            padding: 1.5rem 1rem;
        }
    }

    @media (max-width: 480px) {
        footer .footer-grid {
            gap: 1.5rem;
        }
        
        footer .footer-column h3 {
            font-size: 1.1rem;
        }
        
        footer .footer-links li {
            margin-bottom: 0.6rem;
        }
    }

/* ---- migrated from v3/css/template-idea-analyzer.css ---- */
/* PSEO Dark Theme Override */
  body { font-family: var(--bpa-font); background-color: var(--bpa-navy); color: var(--bpa-border); margin: 0; padding: 0; }
  .text-gradient { background: linear-gradient(135deg, var(--bpa-primary) 0%, var(--bpa-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
  .card-dark { background: var(--bpa-navy); border: 1px solid var(--bpa-text); transition: transform 0.3s ease, border-color 0.3s ease; }
  .card-dark:hover { transform: translateY(-5px); border-color: var(--bpa-primary); }
  .section-pad { padding: 100px 20px; }
  /* New GEO Summary Block Styles */
  .geo-summary-block { border-left: 4px solid var(--bpa-primary); padding-left: 20px; margin: 30px 0; background: rgba(26, 34, 53, 0.6); padding: 20px; border-radius: 0 12px 12px 0; }

/* ---- migrated from v3/css/page-decision-maker.css ---- */
/* New Styles for AEO Elements */
    .aeo-direct-answer { background: rgba(239, 68, 68, .10); border-left: 5px solid var(--bpa-danger); padding: 20px; max-width: 1200px; margin: 30px auto; border-radius: 0 8px 8px 0; font-size: 16px; line-height: 1.7; color: var(--bpa-navy); box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
    .aeo-direct-answer strong { color: var(--bpa-danger); }
    .key-takeaways { background: white; border: 1px solid var(--bpa-bg); padding: 25px; border-radius: 12px; max-width: 1200px; margin: 0 auto 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .key-takeaways ul { list-style-type: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
    .key-takeaways li { padding-left: 30px; position: relative; color: var(--bpa-text-muted); line-height: 1.5; }
    .key-takeaways li::before { content: '✨'; position: absolute; left: 0; top: 0; }

/* ---- migrated from v3/css/gst-consultant-ai.css ---- */
/* Global & Original Styles preserved */
    .trust-badge-row { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 25px; font-size: 14px; opacity: 0.9; }
    .trust-item { display: flex; align-items: center; gap: 8px; }
    .faq-container { max-width: 800px; margin: 0 auto; }
    .faq-item { background: white; border: 1px solid var(--bpa-border); border-radius: 8px; margin-bottom: 15px; padding: 20px; cursor: pointer; transition: all 0.3s; }
    .faq-item:hover { border-color: #25D366; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
    .faq-q { font-weight: 600; font-size: 18px; color: var(--bpa-text); display: flex; justify-content: space-between; }
    .faq-a { color: var(--bpa-text-muted); margin-top: 10px; display: none; line-height: 1.6; border-top: 1px solid var(--bpa-bg); padding-top: 10px; }
    .faq-item.active .faq-a { display: block; }
    .faq-item.active .faq-q { color: #075E54; }
    .comp-table { width: 100%; border-collapse: collapse; margin-top: 30px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .comp-table th, .comp-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--bpa-bg); }
    .comp-table th { background: var(--bpa-bg); color: var(--bpa-text); font-weight: 700; }
    .comp-table .highlight { background: rgba(34, 197, 94, .10); color: #075E54; font-weight: bold; }
    .keyword-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; text-align: left; }
    .keyword-item { background: var(--bpa-surface); padding: 15px; border-radius: 8px; border-left: 4px solid #25D366; box-shadow: 0 2px 5px rgba(0,0,0,0.05); font-size: 15px; }
    
    /* AEO Direct Answer Styles */
    .aeo-direct-answer { background: rgba(34, 197, 94, .10); border-left: 5px solid #075E54; padding: 20px; max-width: 900px; margin: 30px auto; border-radius: 0 8px 8px 0; font-size: 16px; line-height: 1.7; color: var(--bpa-navy); }
    .aeo-direct-answer strong { color: #075E54; }

    @media (max-width: 768px) {
        .trust-badge-row { gap: 15px; flex-direction: column; align-items: center; }
        .comp-table { display: block; overflow-x: auto; }
    }

/* ---- migrated from v3/css/gst-packages.css ---- */
.trust-badge-row { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 25px; font-size: 14px; opacity: 0.9; }
  .trust-item { display: flex; align-items: center; gap: 8px; }
  .comp-table { width: 100%; border-collapse: collapse; margin-top: 30px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
  .comp-table th, .comp-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--bpa-bg); }
  .comp-table th { background: var(--bpa-bg); color: var(--bpa-text); font-weight: 700; }
  .comp-table .highlight { background: rgba(34, 197, 94, .10); color: #075E54; font-weight: bold; }
  .faq-container { max-width: 800px; margin: 0 auto; }
  .faq-item { background: white; border: 1px solid var(--bpa-border); border-radius: 8px; margin-bottom: 15px; padding: 20px; cursor: pointer; transition: all 0.3s; }
  .faq-item:hover { border-color: #25D366; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
  .faq-q { font-weight: 600; font-size: 18px; color: var(--bpa-text); display: flex; justify-content: space-between; }
  .faq-a { color: var(--bpa-text-muted); margin-top: 10px; display: none; line-height: 1.6; border-top: 1px solid var(--bpa-bg); padding-top: 10px; }
  .faq-item.active .faq-a { display: block; }
  .faq-item.active .faq-q { color: #075E54; }

  .gst-plans-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
  .gst-card {
    background: var(--bpa-surface); border: 2px solid var(--bpa-border); border-radius: 16px;
    padding: 32px 26px; width: 310px; position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s;
  }
  .gst-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(7,94,84,0.13); }
  .gst-card.popular { border-color: #075E54; background: rgba(34, 197, 94, .10); }
  .gst-popular-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: #075E54; color: var(--bpa-surface); font-size: 0.75rem; font-weight: 700;
    padding: 4px 18px; border-radius: 20px; white-space: nowrap;
  }
  .gst-card-icon { font-size: 2.2rem; margin-bottom: 10px; }
  .gst-card h3 { font-size: 1.2rem; font-weight: 700; color: #075E54; margin: 0 0 4px; }
  .gst-card .tagline { font-size: 0.85rem; color: var(--bpa-text-muted); margin-bottom: 14px; }
  .gst-price { font-size: 2.4rem; font-weight: 800; color: #128C7E; margin-bottom: 2px; }
  .gst-price .woocommerce-Price-amount { font-size: 2.4rem; font-weight: 800; color: #128C7E; }
  .gst-price-note { font-size: 0.8rem; color: var(--bpa-border); margin-bottom: 18px; }
  .gst-features { list-style: none; padding: 0; margin: 0 0 24px; }
  .gst-features li {
    font-size: 0.88rem; padding: 6px 0; color: var(--bpa-text);
    border-bottom: 1px solid var(--bpa-bg); display: flex; align-items: flex-start; gap: 8px;
  }
  .gst-features li:last-child { border-bottom: none; }
  .gst-features li::before { content: "✅"; font-size: 0.78rem; margin-top: 2px; flex-shrink: 0; }
  .gst-btn-primary {
    display: block; width: 100%; text-align: center;
    background: #25D366; color: white !important; padding: 14px 0;
    border-radius: 50px; font-weight: bold; font-size: 1rem;
    text-decoration: none !important; box-shadow: 0 4px 15px rgba(37,211,102,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .gst-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,0.45); color: white !important; }
  .gst-btn-outline {
    display: block; width: 100%; text-align: center;
    background: transparent; border: 2px solid #075E54;
    color: #075E54 !important; padding: 12px 0; border-radius: 50px;
    font-weight: bold; font-size: 1rem; text-decoration: none !important; transition: all 0.2s;
  }
  .gst-btn-outline:hover { background: #075E54; color: white !important; }

  .gst-addons-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
  .gst-addon-card { background: var(--bpa-surface); border: 2px dashed var(--bpa-text-muted); border-radius: 14px; padding: 26px 24px; width: 310px; }
  .gst-addon-card h4 { font-size: 1.05rem; font-weight: 700; color: #075E54; margin: 8px 0 4px; }
  .gst-addon-price { font-size: 1.7rem; font-weight: 800; color: #128C7E; margin: 6px 0 10px; }
  .gst-addon-price .woocommerce-Price-amount { font-size: 1.7rem; font-weight: 800; color: #128C7E; }
  .gst-addon-card p { font-size: 0.87rem; color: var(--bpa-text-muted); margin-bottom: 14px; line-height: 1.6; }

  @media (max-width: 768px) {
    .gst-card, .gst-addon-card { width: 100%; }
    .trust-badge-row { gap: 15px; flex-direction: column; align-items: center; }
    .comp-table { display: block; overflow-x: auto; }
  }

/* ---- migrated from v3/css/ai-financial-advisor-template.css ---- */
/* AI Financial Advisor — Dark Theme */
  body { font-family: var(--bpa-font); background-color: var(--bpa-navy); color: var(--bpa-border); margin: 0; padding: 0; }
  .text-gradient { background: linear-gradient(135deg, var(--bpa-success) 0%, var(--bpa-success) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .text-gradient-gold { background: linear-gradient(135deg, var(--bpa-warning) 0%, var(--bpa-warning) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .card-dark { background: var(--bpa-navy); border: 1px solid var(--bpa-text); transition: transform 0.3s ease, border-color 0.3s ease; }
  .card-dark:hover { transform: translateY(-5px); border-color: var(--bpa-success); }
  .section-pad { padding: 100px 20px; }
  .container { max-width: 1200px; margin: 0 auto; }
  .container-narrow { max-width: 900px; margin: 0 auto; }
  .btn-primary-fin { background: linear-gradient(135deg, var(--bpa-success) 0%, var(--bpa-success) 100%); color: var(--bpa-surface); padding: 16px 40px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 18px; box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4); display: inline-block; transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .btn-primary-fin:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5, 150, 105, 0.5); color: var(--bpa-surface); text-decoration: none; }
  .btn-outline-fin { background: transparent; color: var(--bpa-success); padding: 16px 40px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 18px; border: 2px solid var(--bpa-success); display: inline-block; transition: background 0.2s ease; }
  .btn-outline-fin:hover { background: rgba(52, 211, 153, 0.1); color: var(--bpa-success); text-decoration: none; }

  /* Score Card */
  .score-card { background: var(--bpa-navy); border: 1px solid var(--bpa-text); border-radius: 16px; padding: 32px; max-width: 460px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
  .score-badge { background: linear-gradient(135deg, var(--bpa-success), var(--bpa-success)); color: white; border-radius: 12px; padding: 12px 18px; text-align: center; min-width: 72px; }
  .score-badge .num { font-size: 2rem; font-weight: 800; line-height: 1; }
  .score-badge .lbl { font-size: 11px; opacity: 0.85; margin-top: 2px; }
  .kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
  .kpi-item { background: var(--bpa-text); border-radius: 10px; padding: 14px; }
  .kpi-item .k-lbl { font-size: 11px; color: var(--bpa-text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
  .kpi-item .k-val { font-size: 16px; font-weight: 700; color: var(--bpa-bg); }
  .kpi-item .k-val.pos { color: var(--bpa-success); }
  .insight-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--bpa-text-muted); }
  .insight-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bpa-success); margin-top: 5px; flex-shrink: 0; }

  /* Bar */
  .bar-row { margin-bottom: 18px; }
  .bar-lbl { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; color: var(--bpa-text-muted); }
  .bar-lbl span:last-child { font-weight: 700; color: var(--bpa-bg); }
  .bar-track { height: 8px; background: var(--bpa-text); border-radius: 9999px; overflow: hidden; }
  .bar-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--bpa-success), var(--bpa-success)); }
  .bar-fill.gold { background: linear-gradient(90deg, var(--bpa-warning), var(--bpa-warning)); }

/* ---- migrated from v3/css/template-arthshiksha-landing.css ---- */
/* ArthShiksha — Dark Theme based on AI Financial Advisor styling */
  body { font-family: var(--bpa-font); background-color: var(--bpa-navy); color: var(--bpa-border); margin: 0; padding: 0; }
  .text-gradient { background: linear-gradient(135deg, var(--bpa-success) 0%, var(--bpa-success) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .text-gradient-teal { background: linear-gradient(135deg, var(--bpa-text-muted) 0%, var(--bpa-text-muted) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .card-dark { background: var(--bpa-navy); border: 1px solid var(--bpa-text); transition: transform 0.3s ease, border-color 0.3s ease; height: 100%; box-sizing: border-box; }
  .card-dark:hover { transform: translateY(-5px); border-color: var(--bpa-success); }
  .section-pad { padding: 100px 20px; }
  .container { max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
  .container-narrow { max-width: 900px; margin: 0 auto; box-sizing: border-box; }
  .btn-primary-fin { background: linear-gradient(135deg, var(--bpa-success) 0%, var(--bpa-success) 100%); color: var(--bpa-surface); padding: 16px 40px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 18px; box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4); display: inline-block; transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .btn-primary-fin:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5, 150, 105, 0.5); color: var(--bpa-surface); text-decoration: none; }
  .btn-outline-fin { background: transparent; color: var(--bpa-success); padding: 16px 40px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 18px; border: 2px solid var(--bpa-success); display: inline-block; transition: background 0.2s ease; }
  .btn-outline-fin:hover { background: rgba(52, 211, 153, 0.1); color: var(--bpa-success); text-decoration: none; }

  /* App Mockup */
  .app-mockup { background: var(--bpa-navy); border: 1px solid var(--bpa-text); border-radius: 16px; padding: 0; max-width: 460px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); overflow: hidden; margin: 0 auto; }
  .app-header { background: var(--bpa-text); padding: 16px 20px; border-bottom: 1px solid var(--bpa-text); display: flex; align-items: center; gap: 12px; }
  .app-dots { display: flex; gap: 6px; }
  .app-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bpa-text-muted); }
  .app-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; background: var(--bpa-navy); }
  
  .chat-bubble { max-width: 85%; padding: 14px 16px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
  .chat-bot { background: var(--bpa-navy); color: var(--bpa-bg); align-self: flex-start; border-top-left-radius: 4px; border: 1px solid var(--bpa-text); }
  .chat-user { background: var(--bpa-success); color: var(--bpa-surface); align-self: flex-end; border-top-right-radius: 4px; }
  
  .lang-badge { display: inline-flex; align-items: center; justify-content: center; background: rgba(52, 211, 153, 0.1); color: var(--bpa-success); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 9999px; border: 1px solid rgba(52, 211, 153, 0.2); }

  /* Grid Layouts */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }
  .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }

/* ---- migrated from v3/css/page-gst-calculator.css ---- */
/* GST Calculator Styles */
.calculator-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.calc-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.calc-tab {
    background: var(--bpa-navy);
    color: var(--bpa-text-muted);
    border: 1px solid var(--bpa-text);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calc-tab:hover {
    background: var(--bpa-text);
    color: var(--bpa-border);
}

.calc-tab.active {
    background: var(--bpa-primary);
    color: var(--bpa-surface);
    border-color: var(--bpa-primary);
    box-shadow: 0 4px 15px rgba(129, 140, 248, 0.4);
}

.calc-view {
    display: none;
    animation: fadeIn 0.4s ease;
}

.calc-view.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.calc-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media (max-width: 768px) {
    .calc-layout {
        grid-template-columns: 1fr;
    }
}

.card-dark {
    background: var(--bpa-navy);
    border-radius: 16px;
    padding: 30px;
}

.highlight-border {
    border: 1px solid rgba(129, 140, 248, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.panel-title {
    font-size: 20px;
    color: var(--bpa-bg);
    margin-bottom: 24px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--bpa-text);
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: var(--bpa-border);
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

.form-group .help-text {
    font-size: 12px;
    color: var(--bpa-text-muted);
}

.form-group input[type="number"],
.form-group select {
    width: 100%;
    background: var(--bpa-navy);
    border: 1px solid var(--bpa-text);
    color: var(--bpa-bg);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.form-group input[type="number"]:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--bpa-primary);
}

.dual-input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Radio Group */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bpa-text-muted);
    cursor: pointer;
}

.radio-label input[type="radio"] {
    accent-color: var(--bpa-primary);
    width: 18px;
    height: 18px;
}

/* Results Styles */
.result-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed var(--bpa-text);
    color: var(--bpa-border);
    font-size: 16px;
}

.result-row:last-child {
    border-bottom: none;
}

.result-row strong {
    font-size: 18px;
    color: var(--bpa-bg);
}

.tax-breakdown {
    flex-direction: column;
    align-items: stretch;
    background: var(--bpa-navy);
    padding: 15px;
    border-radius: 8px;
    border: none;
}

.sub-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.sub-row:last-child {
    margin-bottom: 0;
}

.total-row {
    margin-top: 10px;
    background: rgba(129, 140, 248, 0.1);
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid rgba(129, 140, 248, 0.2);
}

.total-row span {
    font-weight: 600;
    color: var(--bpa-border);
}

.total-row strong {
    font-size: 24px;
}

/* Profit Margin Grid */
.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 10px;
}

.metric-box {
    background: var(--bpa-navy);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--bpa-text);
}

.metric-label {
    display: block;
    color: var(--bpa-text-muted);
    font-size: 14px;
    margin-bottom: 10px;
}

.metric-value {
    display: block;
    color: var(--bpa-bg);
    font-size: 24px;
}

.mt-4 { margin-top: 20px; }

/* ---- migrated from v3/css/page-msme-scheme-finder.css ---- */
/* MSME Scheme Finder Styles */

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--bpa-navy);
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--bpa-primary);
    transition: width 0.4s ease;
}

.quiz-step-indicator {
    text-align: right;
    font-size: 14px;
    color: var(--bpa-text-muted);
    margin-bottom: 30px;
}

.quiz-step {
    display: none;
    animation: fadeInRight 0.4s ease;
}

.quiz-step.active {
    display: block;
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.step-title {
    font-size: 24px;
    color: var(--bpa-bg);
    margin-bottom: 25px;
    text-align: center;
}

.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

@media (max-width: 600px) {
    .options-grid {
        grid-template-columns: 1fr;
    }
}

.option-btn {
    background: var(--bpa-navy);
    border: 2px solid var(--bpa-text);
    color: var(--bpa-border);
    padding: 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.option-btn i {
    font-size: 24px;
    color: var(--bpa-primary);
}

.option-btn:hover {
    border-color: var(--bpa-primary);
    background: var(--bpa-text);
    transform: translateY(-2px);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.check-option {
    background: var(--bpa-navy);
    border: 1px solid var(--bpa-text);
    padding: 15px 20px;
    border-radius: 8px;
    color: var(--bpa-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: background 0.2s;
}

.check-option:hover {
    background: var(--bpa-text);
}

.check-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--bpa-primary);
}

.nav-buttons {
    display: flex;
    justify-content: space-between;
}

.back-btn {
    background: transparent;
    border: none;
    color: var(--bpa-text-muted);
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.back-btn:hover {
    color: var(--bpa-border);
}

.next-btn {
    background: var(--bpa-primary);
    border: none;
    color: var(--bpa-surface);
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.next-btn:hover {
    background: var(--bpa-primary);
}

/* Results Styles */
.schemes-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.scheme-card {
    border: 1px solid var(--bpa-text);
    padding: 25px;
    position: relative;
    overflow: hidden;
}

.scheme-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.scheme-name {
    font-size: 22px;
    color: var(--bpa-primary);
    margin: 0;
}

.match-badge {
    background: rgba(34, 197, 94, 0.2);
    color: var(--bpa-success);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.scheme-desc {
    color: var(--bpa-border);
    margin-bottom: 20px;
    line-height: 1.6;
}

.scheme-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    background: var(--bpa-navy);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.meta-item {
    display: flex;
    flex-direction: column;
}

.meta-item strong {
    color: var(--bpa-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-item span {
    color: var(--bpa-bg);
    font-weight: 600;
}

.scheme-link {
    color: var(--bpa-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.scheme-link:hover {
    color: var(--bpa-primary);
    text-decoration: underline;
}

.cta-upsell-card {
    background: linear-gradient(135deg, var(--bpa-primary) 0%, var(--bpa-navy) 100%);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(129, 140, 248, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.cta-upsell-card h3 {
    color: var(--bpa-surface);
    font-size: 24px;
    margin-bottom: 15px;
}

.cta-upsell-card p {
    color: var(--bpa-border);
    margin-bottom: 25px;
    font-size: 16px;
}

.btn-primary {
    background: var(--bpa-primary);
    color: var(--bpa-surface);
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(129, 140, 248, 0.4);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--bpa-text-muted);
    color: var(--bpa-border);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: var(--bpa-navy);
    color: var(--bpa-bg);
}

.mt-5 { margin-top: 40px; }

/* ---- migrated from v3/css/template-company-structure.css ---- */
/* Company Structure Predictor Styles */

.quiz-step-indicator {
    text-align: center;
    font-size: 16px;
    color: var(--bpa-primary);
    margin-bottom: 25px;
    font-weight: 600;
}

.quiz-step {
    display: none;
    animation: fadeInUp 0.4s ease;
}

.quiz-step.active {
    display: block;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-title {
    font-size: 26px;
    color: var(--bpa-bg);
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.4;
}

.options-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.option-btn-wide {
    background: var(--bpa-navy);
    border: 2px solid var(--bpa-text);
    color: var(--bpa-border);
    padding: 20px 25px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
}

.option-btn-wide i {
    font-size: 24px;
    color: var(--bpa-primary);
    width: 30px;
    text-align: center;
}

.option-btn-wide:hover {
    border-color: var(--bpa-primary);
    background: var(--bpa-text);
    transform: translateX(5px);
}

.mt-3 { margin-top: 25px; }
.mb-4 { margin-bottom: 30px; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px dashed var(--bpa-text);
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.stat-box {
    background: var(--bpa-navy);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

.stat-label {
    display: block;
    color: var(--bpa-text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.stat-value {
    display: block;
    color: var(--bpa-bg);
    font-size: 18px;
}

/* Deep Dive Structure Grid */
.structure-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

@media (max-width: 768px) {
    .structure-grid {
        grid-template-columns: 1fr;
    }
}

.structure-card {
    border: 1px solid var(--bpa-text);
    transition: transform 0.2s;
}

.structure-card:hover {
    transform: translateY(-5px);
}

.structure-card h3 {
    color: var(--bpa-bg);
    font-size: 22px;
    margin-bottom: 10px;
}

.structure-card .desc {
    color: var(--bpa-text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

.structure-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.structure-card ul li {
    color: var(--bpa-border);
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.text-green { color: var(--bpa-success); margin-top: 4px; }
.text-red { color: var(--bpa-danger); margin-top: 4px; }

/* ---- migrated from v3/css/page-coach-assistant.css ---- */
/* AEO Elements & Tables */
    .aeo-direct-answer { background: var(--bpa-bg); border-left: 5px solid var(--bpa-warning); padding: 20px; max-width: 1200px; margin: 30px auto; border-radius: 0 8px 8px 0; font-size: 16px; line-height: 1.7; color: var(--bpa-text); box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
    .aeo-direct-answer strong { color: var(--bpa-warning); }
    .key-takeaways { background: white; border: 1px solid var(--bpa-border); padding: 25px; border-radius: 12px; max-width: 1200px; margin: 0 auto 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .key-takeaways ul { list-style-type: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
    .key-takeaways li { padding-left: 30px; position: relative; color: var(--bpa-text-muted); line-height: 1.5; }
    .key-takeaways li::before { content: '🎯'; position: absolute; left: 0; top: 0; }
    
    .comp-table { width: 100%; border-collapse: collapse; margin-top: 30px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .comp-table th, .comp-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--bpa-bg); }
    .comp-table th { background: green; color: black; font-weight: 700; }
    .comp-table .highlight { background: rgba(245, 158, 11, .12); color: var(--bpa-warning); font-weight: bold; }

/* ---- migrated from v3/css/page-business-calculators.css ---- */
/* Phase K1: this page used to redeclare the theme's own tokens here, which is
   how it drifted off the brand. It now points at the shared design tokens and
   keeps only the two helpers the page's own layout rules need. */
        :root {
            --primary: var(--bpa-navy);
            --secondary: var(--bpa-muted);
            --accent: var(--bpa-primary);
            --light: var(--bpa-surface);
            --dark: var(--bpa-navy);
            --text: var(--bpa-ink);
            --light-text: var(--bpa-muted);
            --border: var(--bpa-line);
            --background: var(--bpa-surface);
            --shadow: var(--bpa-shadow);
            --transition: all .2s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: var(--bpa-font);
            line-height: 1.6;
            color: var(--text);
            background-color: var(--background);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* SEO Content Sections */
        .hero-section {
            background: linear-gradient(135deg, var(--bpa-navy) 0%, var(--bpa-primary) 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
        }
        
        .hero-section h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .hero-section .lead-text {
            font-size: 1.3rem;
            margin-bottom: 40px;
            opacity: 0.9;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .value-proposition-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 60px;
        }
        
        .value-prop {
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            backdrop-filter: blur(10px);
        }
        
        .value-prop i {
            font-size: 3rem;
            margin-bottom: 20px;
            color: var(--light);
        }
        
        .value-prop h3 {
            font-size: 1.3rem;
            margin-bottom: 15px;
        }
        
        /* Calculator Grid */
        .calculators-section {
            padding: 80px 0;
            background: white;
        }
        
        .section-title {
            text-align: center;
            font-size: clamp(1.45rem, 2.4vw, 2rem);
            color: var(--bpa-navy);
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .section-subtitle {
            text-align: center;
            font-size: 1.05rem;
            color: var(--bpa-muted);
            margin-bottom: 60px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .calculator-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }
        
        .calculator-card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        
        .calculator-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        
        .calculator-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
        }
        
        .calculator-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
        }
        
        .calculator-icon i {
            font-size: 2rem;
            color: white;
        }
        
        .calculator-card h3 {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .calculator-card p {
            color: var(--light-text);
            margin-bottom: 25px;
            line-height: 1.6;
        }
        
        .calculator-btn {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            width: 100%;
        }
        
        .calculator-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.3);
        }
        
        /* Detailed Content Sections */
        .content-section {
            padding: 80px 0;
        }
        
        .content-section:nth-child(even) {
            background: var(--background);
        }
        
        .content-section h2 {
            font-size: 2.3rem;
            color: var(--primary);
            margin-bottom: 30px;
            text-align: center;
            font-weight: 700;
        }
        
        .detailed-calculator-grid {
            display: grid;
            gap: 40px;
            margin-top: 50px;
        }
        
        .calc-detail {
            background: white;
            padding: 40px;
            border-radius: 15px;
            border-left: 5px solid var(--accent);
            box-shadow: var(--shadow);
        }
        
        .calc-detail h3 {
            font-size: 1.6rem;
            color: var(--primary);
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .calc-detail p {
            margin-bottom: 20px;
            line-height: 1.7;
            color: var(--text);
        }
        
        .calc-detail ul {
            margin-bottom: 20px;
            padding-left: 0;
        }
        
        .calc-detail li {
            list-style: none;
            padding: 8px 0;
            padding-left: 30px;
            position: relative;
            color: var(--text);
        }
        
        .calc-detail li:before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--success);
            font-weight: bold;
        }
        
        /* Industry Examples */
        .industry-examples {
            padding: 80px 0;
            background: white;
        }
        
        .industry-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            margin-top: 50px;
        }
        
        .industry-example {
            background: var(--light);
            padding: 35px;
            border-radius: 15px;
            border-top: 4px solid var(--primary);
        }
        
        .industry-example h3 {
            color: var(--primary);
            font-size: 1.4rem;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .example-calculation {
            background: white;
            padding: 25px;
            border-radius: 10px;
            margin-top: 20px;
        }
        
        .example-calculation p {
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 15px;
        }
        
        .example-calculation ul {
            padding-left: 0;
        }
        
        .example-calculation li {
            list-style: none;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
        }
        
        .example-calculation li:last-child {
            border-bottom: none;
        }
        
        /* FAQ Section */
        .faq-section {
            padding: 80px 0;
            background: var(--background);
        }
        
        .faq-container {
            max-width: 900px;
            margin: 0 auto;
            margin-top: 50px;
        }
        
        .faq-item {
            background: white;
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        
        .faq-item h3 {
            background: var(--primary);
            color: white;
            padding: 25px;
            margin: 0;
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .faq-item p {
            padding: 25px;
            margin: 0;
            line-height: 1.7;
            color: var(--text);
        }
        
        /* Local SEO Section */
        .local-business-section {
            padding: 60px 0;
            background: white;
        }
        
        .location-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }
        
        .location-info {
            background: var(--light);
            padding: 35px;
            border-radius: 15px;
            border-left: 5px solid var(--accent);
        }
        
        .location-info h3 {
            color: var(--primary);
            font-size: 1.4rem;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .location-info p {
            margin-bottom: 20px;
            color: var(--text);
        }
        
        .location-info ul {
            padding-left: 0;
        }
        
        .location-info li {
            list-style: none;
            padding: 8px 0;
            padding-left: 25px;
            position: relative;
            color: var(--text);
        }
        
        .location-info li:before {
            content: '📍';
            position: absolute;
            left: 0;
        }
        
        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, var(--bpa-navy) 0%, var(--bpa-primary) 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
        }
        
        .cta-section h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .cta-section p {
            font-size: 1.2rem;
            margin-bottom: 40px;
            opacity: 0.9;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .cta-btn {
            background: white;
            color: var(--primary);
            padding: 18px 40px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-block;
        }
        
        .cta-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }
        
        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
        }
        
        .modal-content {
            background-color: white;
            margin: 2% auto;
            padding: 0;
            border-radius: 20px;
            width: 95%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
        }
        
        .modal-header {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: white;
            padding: 25px;
            border-radius: 20px 20px 0 0;
            position: relative;
        }
        
        .modal-header h2 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 600;
        }
        
        .close {
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 2rem;
            font-weight: bold;
            cursor: pointer;
            line-height: 1;
        }
        
        .close:hover {
            opacity: 0.7;
        }
        
        .modal-body {
            padding: 40px;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text);
        }
        
        .form-group input,
        .form-group select {
            width: 100%;
            padding: 15px;
            border: 2px solid var(--border);
            border-radius: 10px;
            font-size: 1rem;
            transition: var(--transition);
        }
        
        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
        }
        
        .calculate-btn {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: white;
            border: none;
            padding: 18px 35px;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: var(--transition);
        }
        
        .calculate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.3);
        }
        
        .result-section {
            margin-top: 30px;
            padding: 25px;
            background: var(--light);
            border-radius: 15px;
            border-left: 5px solid var(--success);
        }
        
        .result-section h3 {
            color: var(--primary);
            margin-bottom: 20px;
            font-size: 1.4rem;
        }
        
        .result-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .result-item:last-child {
            border-bottom: none;
        }
        
        .result-item .label {
            font-weight: 600;
            color: var(--text);
        }
        
        .result-item .value {
            font-weight: bold;
            color: var(--primary);
            font-size: 1.1rem;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-section h1 {
                font-size: 2rem;
            }
            
            .hero-section .lead-text {
                font-size: 1.1rem;
            }
            
            .value-proposition-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .calculator-grid {
                grid-template-columns: 1fr;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .industry-grid,
            .location-grid {
                grid-template-columns: 1fr;
            }
            
            .container {
                padding: 0 15px;
            }
            
            .modal-content {
                width: 98%;
                margin: 1% auto;
            }
            
            .modal-body {
                padding: 25px;
            }
        }
        
        @media (max-width: 480px) {
            .hero-section {
                padding: 50px 0;
            }
            
            .hero-section h1 {
                font-size: 1.8rem;
            }
            
            .content-section {
                padding: 50px 0;
            }
            
            .calculator-card,
            .calc-detail {
                padding: 25px;
            }
        }

/* Phase K1: the page's Arial body rule (and a stray 20px body margin)
   lived here and took the whole page out of the type system. Removed. */

/* ---- migrated from v3/css/page-pricing.css ---- */
/* Root Variables */
/* Reset & Typography */
body {
    font-family: var(--bpa-font);
    margin: 0;
    padding: 0;
    background: var(--bpa-surface);
    color: var(--primary);
}

/* Pricing Section */
.pricing {
    padding: 2.5rem 20px 4rem;
    background: var(--bpa-surface);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    border-radius: 10px;
    padding: 40px 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.pricing-card.popular {
    border: 2px solid var(--bpa-primary);
    transform: scale(1.05);
    z-index: 2;
}

.popular-tag {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bpa-primary);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.pricing-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--primary);
}

.price {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
}

.price span {
    font-size: 16px;
    color: var(--light-text);
    display: block;
}

.pricing-card p {
    font-size: 16px;
    margin-bottom: 25px;
    color: var(--light-text);
}

.pricing-features {
    list-style: none;
    margin: 30px 0;
    padding: 0;
    text-align: left;
    flex-grow: 1;
}

.pricing-features li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features li i {
    margin-right: 10px;
    min-width: 20px;
}

.pricing-features li .fa-check { color: var(--success); }
.pricing-features li .fa-times { color: var(--error); }

.btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--bpa-primary);
    color: white;
}

.btn-outline {
    border: 2px solid var(--bpa-primary);
    color: var(--bpa-primary);
    background: transparent;
}

.btn-primary:hover {
    background: var(--bpa-primary-dark);
}

.btn-outline:hover {
    background: var(--bpa-primary);
    color: white;
}

/* ---- migrated from v3/css/page-taxcopilot-landing.css ---- */
/* ---- Base ---- */
    .trust-badge-row { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 25px; font-size: 14px; opacity: 0.9; }
    .trust-item { display: flex; align-items: center; gap: 8px; }

    /* ---- FAQ: markup is now native details/summary in the shared .bpa-faq ---- */

    /* ---- Comparison Table ---- */
    .comp-table { width: 100%; border-collapse: collapse; margin-top: 30px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .comp-table th, .comp-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--bpa-line); }
    .comp-table th { background: var(--bpa-surface); color: var(--bpa-navy); font-weight: 700; }
    .comp-table .highlight { background: var(--bpa-surface); color: var(--bpa-navy); font-weight: bold; }

    /* ---- Keyword / Entity Grid ---- */
    .keyword-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; text-align: left; }
    .keyword-item { background: var(--bpa-surface); padding: 15px; border-radius: 8px; border-left: 4px solid var(--bpa-primary); box-shadow: 0 2px 5px rgba(0,0,0,0.05); font-size: 15px; }

    /* ---- AEO Direct Answer ---- */
    .aeo-direct-answer { background: var(--bpa-surface); border-left: 5px solid var(--bpa-navy); padding: 20px 24px; max-width: 900px; margin: 30px auto; border-radius: 0 8px 8px 0; font-size: 16px; line-height: 1.7; color: var(--bpa-ink); }
    .aeo-direct-answer strong { color: var(--bpa-navy); }

    /* ---- GEO Summary ---- */
    .geo-summary-box { background: var(--bpa-surface); border: 1px solid var(--bpa-line); border-radius: 12px; padding: 24px 28px; max-width: 900px; margin: 30px auto; font-size: 15px; line-height: 1.7; color: var(--bpa-ink); }
    .geo-summary-box h3 { color: var(--bpa-navy); font-size: 17px; margin: 0 0 10px; }

    /* ---- Stat Bar (new hero section addition) ---- */
    .stat-bar { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 30px; }
    .stat-item { text-align: center; }
    .stat-num  { font-size: 32px; font-weight: 800; color: var(--bpa-surface); }
    .stat-label { font-size: 13px; opacity: 0.8; margin-top: 2px; }

    /* ---- Compliance + ERP Section ---- */
    .entity-card { background: white; padding: 25px; border-radius: 12px; border: 1px solid var(--bpa-line); box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
    .entity-card h3 { color: var(--bpa-primary); font-size: 20px; margin-bottom: 10px; }
    .entity-card p { color: var(--bpa-muted); font-size: 15px; line-height: 1.6; margin: 0; }

    @media (max-width: 768px) {
        .trust-badge-row { gap: 15px; flex-direction: column; align-items: center; }
        .comp-table { display: block; overflow-x: auto; }
        .stat-bar { gap: 20px; }
    }

/* ---- migrated from v3/css/template-business-coach.css ---- */
/* Phase K1: brought onto the shared design tokens (was a page-local cyan system:
   var(--bpa-text-muted) / rgba(239, 68, 68, .10) / var(--bpa-navy) / var(--bpa-text-muted) / var(--bpa-bg)). The AEO answer and the
   key-takeaways box now use the shared .bpa-alert / .bpa-card look, so only
   the parts that are genuinely list-specific are styled here. */
.aeo-direct-answer,
.key-takeaways {
    max-width: 820px;
}
.key-takeaways h2,
.key-takeaways h3 {
    margin: 0 0 15px;
    color: var(--bpa-navy);
    font-size: 1.15rem;
}
.key-takeaways ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}
.key-takeaways li {
    padding-left: 30px;
    position: relative;
    color: var(--bpa-muted);
    line-height: 1.5;
}
.key-takeaways li::before {
    content: '
F4A1';
    position: absolute;
    left: 0;
    top: 0;
}

/* ---- migrated from v3/css/chatbot-page.css ---- */
body {
    margin: 0;
    font-family: var(--bpa-font);
    background-color: var(--bpa-bg);
    color: var(--bpa-navy);
    line-height: 1.6;
}
#chatbot-page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 900px;
    margin: 0 auto;
    background: white;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
}
#chatbot-header {
    background: linear-gradient(135deg, var(--bpa-navy) 0%, var(--bpa-navy) 100%);
    color: white;
    padding: 22px 30px;
    font-size: 1.7rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}
#chatbot-header small {
    display: block;
    margin-top: 8px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--bpa-border);
}
#chatbot-messages {
    flex: 1;
    padding: 25px;
    overflow-y: auto;
    background-color: var(--bpa-bg);
    scroll-behavior: smooth;
}
.message {
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.message.user {
    align-items: flex-end;
}
.message.bot {
    align-items: flex-start;
}
.bubble {
    max-width: 85%;
    padding: 18px 22px;
    border-radius: 20px;
    font-size: 1.05rem;
    line-height: 1.65;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
}
.message.bot .bubble {
    background-color: var(--bpa-surface);
    color: var(--bpa-navy);
    border-bottom-left-radius: 5px;
    border: 1px solid var(--bpa-border);
}
.message.user .bubble {
    background: linear-gradient(135deg, var(--bpa-navy) 0%, var(--bpa-navy) 100%);
    color: white;
    border-bottom-right-radius: 5px;
}
#chatbot-input-wrapper {
    padding: 18px;
    background-color: var(--bpa-bg);
    border-top: 1px solid var(--bpa-border);
    display: flex;
    gap: 12px;
    align-items: center;
}
#chatbot-text {
    flex: 1;
    padding: 14px 18px;
    font-size: 1.1rem;
    border: 1px solid var(--bpa-border);
    border-radius: 30px;
    outline: none;
    transition: all 0.2s;
    background: white;
}
#chatbot-text:focus {
    border-color: var(--bpa-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
#chatbot-send {
    padding: 14px 26px;
    background: linear-gradient(135deg, var(--bpa-navy) 0%, var(--bpa-navy) 100%);
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}
#chatbot-send:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.25);
}
#doc-upload {
    display: flex;
    gap: 12px;
    padding: 18px;
    border-top: 1px solid var(--bpa-border);
    align-items: center;
    background: var(--bpa-bg);
}
#biz-doc-file {
    flex: 1;
    padding: 12px;
    border: 1px dashed var(--bpa-border);
    border-radius: 8px;
    background: white;
    cursor: pointer;
}
#upload-doc-btn {
    padding: 12px 22px;
    background: white;
    color: var(--bpa-navy);
    border: 1px solid var(--bpa-border);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
#upload-doc-btn:hover {
    background: var(--bpa-bg);
    border-color: var(--bpa-primary);
}
#doc-upload-status {
    font-size: 0.95rem;
    color: var(--bpa-text-muted);
    font-weight: 500;
    min-width: 150px;
    text-align: center;
}

/* 🎯 Professional Report Styling */
.report-container {
    padding: 0;
}
.report-section {
    margin-bottom: 28px;
    border-bottom: 1px solid var(--bpa-bg);
    padding-bottom: 24px;
}
.report-section:last-child {
    border-bottom: none;
}
.report-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bpa-navy);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bpa-border);
}
.report-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bpa-navy);
    margin: 24px 0 14px;
}
.report-content {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--bpa-text);
}
.report-highlight {
    background: linear-gradient(120deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-left: 4px solid var(--bpa-primary);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 20px 0;
}
.report-list {
    padding-left: 26px;
    margin: 16px 0;
}
.report-list li {
    margin-bottom: 12px;
    position: relative;
}
.report-list li:before {
    content: "•";
    color: var(--bpa-primary);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}

/* 📊 Professional Table Styling */
.report-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 24px 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.report-table th {
    background: linear-gradient(135deg, var(--bpa-navy) 0%, var(--bpa-navy) 100%);
    color: white;
    font-weight: 600;
    padding: 16px 20px;
    text-align: left;
    font-size: 1.1rem;
}
.report-table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--bpa-bg);
    background: white;
    font-size: 1.05rem;
}
.report-table tr:last-child td {
    border-bottom: none;
}
.report-table tr:nth-child(even) td {
    background-color: var(--bpa-bg);
}
.report-table tr:hover td {
    background-color: var(--bpa-bg);
}

/* 🎨 Summary Box */
.summary-box {
    background: linear-gradient(135deg, rgba(37, 99, 235, .08) 0%, rgba(37, 99, 235, .08) 100%);
    border: 1px solid rgba(37, 99, 235, .08);
    border-radius: 12px;
    padding: 22px;
    margin: 24px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* 🖨️ Print Button */
.print-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--bpa-navy) 0%, var(--bpa-navy) 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
    margin-top: 20px;
}
.print-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

/* 🖨️ Print-specific styles */
@media print {
    body {
        background: white;
        padding: 1cm;
    }
    #chatbot-page-wrapper {
        box-shadow: none;
        border-radius: 0;
    }
    #chatbot-header,
    #doc-upload,
    #chatbot-input-wrapper,
    .print-btn {
        display: none !important;
    }
    #chatbot-messages {
        padding: 0;
        overflow: visible;
        height: auto;
    }
    .message {
        margin-bottom: 5mm;
    }
    .message .bubble {
        max-width: 100%;
        box-shadow: none;
        border: none !important;
        padding: 0 !important;
    }
    .report-container {
        padding: 0;
        margin: 0;
    }
    .report-title {
        font-size: 1.8rem;
    }
    .report-subtitle {
        font-size: 1.4rem;
    }
    .report-content {
        font-size: 1.1rem;
    }
    .report-highlight {
        page-break-inside: avoid;
    }
    .report-table {
        page-break-inside: avoid;
    }
}

@media print {
                    body {
                        background: white;
                        padding: 1cm;
                    }
                    #chatbot-page-wrapper {
                        box-shadow: none;
                        border-radius: 0;
                        margin: 0;
                        max-width: 100%;
                    }
                    #chatbot-header,
                    #doc-upload,
                    #chatbot-input-wrapper,
                    .print-btn {
                        display: none !important;
                    }
                    #chatbot-messages {
                        padding: 0;
                        overflow: visible;
                        height: auto;
                    }
                    .message {
                        margin-bottom: 5mm;
                    }
                    .message .bubble {
                        max-width: 100%;
                        box-shadow: none;
                        border: none !important;
                        padding: 0 !important;
                    }
                    .report-container {
                        padding: 0;
                        margin: 0;
                    }
                    .report-title {
                        font-size: 1.8rem;
                    }
                    .report-subtitle {
                        font-size: 1.4rem;
                    }
                    .report-content {
                        font-size: 1.1rem;
                    }
                    .report-highlight {
                        page-break-inside: avoid;
                    }
                    .report-table {
                        page-break-inside: avoid;
                    }
                }

.typing-indicator {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            height: 20px;
        }
        .typing-indicator span {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--bpa-text-muted);
            animation: typing 1.4s infinite ease-in-out;
        }
        .typing-indicator span:nth-child(1) { animation-delay: 0s; }
        .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
        .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
        
        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-5px); }
        }

/* ==========================================================================
   TYPOGRAPHY LOCK — asserted last on purpose.
   The migrated page stylesheets each declared their own `body { font-family: ... }`.
   Those are now rewritten to var(--bpa-font), but this final rule guarantees the
   theme typography wins regardless of anything a future page stylesheet adds.
   ========================================================================== */
html, body, button, input, select, textarea {
    font-family: var(--bpa-font);
}

/* ==========================================================================
   TOOL GRID HIERARCHY  (§9: "secondary tools do not visually overwhelm the
   primary six"). A visual review found the two grids indistinguishable — same
   shell, same icon size, same heading weight — so the secondary suite read as a
   duplicate of the primary six rather than a deeper list. The primary pillars are
   now given more presence and the secondary cards are tightened. Class-level only:
   no markup or content changed.
   ========================================================================== */
.bpa-card--pillar {
    padding: 1.75rem;
    box-shadow: var(--bpa-shadow-md);
    border-color: rgba(37, 99, 235, .16);
}
.bpa-card--pillar .bpa-card__icon {
    width: 56px; height: 56px; font-size: 1.35rem; border-radius: 14px;
}
.bpa-card--pillar .bpa-card__title { font-size: 1.1875rem; }
.bpa-card--pillar .bpa-card__link { font-size: .9375rem; }

.bpa-card--tool {
    padding: 1.35rem;
    box-shadow: none;
    background: var(--bpa-surface);
}
.bpa-card--tool .bpa-card__icon {
    width: 40px; height: 40px; font-size: 1rem; border-radius: 10px; margin-bottom: .75rem;
}
.bpa-card--tool .bpa-card__title { font-size: .9375rem; }
.bpa-card--tool .bpa-card__text { font-size: .875rem; line-height: 1.65; margin-bottom: .75rem; }
.bpa-card--tool .bpa-card__link { font-size: .8125rem; font-weight: 500; }

/* the denser secondary grid should not look like the primary row either */
.bpa-section--soft .bpa-grid--3 { gap: 1rem; }

@media (max-width: 767.98px) {
    .bpa-card--pillar { padding: 1.35rem; }
    .bpa-card--pillar .bpa-card__icon { width: 48px; height: 48px; font-size: 1.15rem; }
    .bpa-card--tool { padding: 1.15rem; }
}

/* ==========================================================================
   TOKEN ALIASES — 8 custom properties were referenced but never defined, so every
   declaration using them resolved to nothing. The visible effect was that cards,
   the hero panel, panels, plans and their hover states rendered with NO shadow at
   all (--bpa-shadow-sm/md/lg), and a few colours/borders silently fell back to
   inherited values (--bpa-ink, --bpa-muted, --bpa-line, --bpa-footer,
   --bpa-primary-dark). Found by auditing var() references against definitions,
   after a visual review reported the cards looking flat.
   ========================================================================== */
:root {
    --bpa-shadow-sm:   0 1px 2px rgba(17, 24, 39, .06), 0 2px 8px rgba(17, 24, 39, .07);
    --bpa-shadow-md:   0 2px 4px rgba(17, 24, 39, .06), 0 10px 24px rgba(17, 24, 39, .10);
    --bpa-shadow-lg:   0 4px 12px rgba(17, 24, 39, .08), 0 20px 44px rgba(17, 24, 39, .13);
    --bpa-ink:         var(--bpa-text);
    --bpa-muted:       var(--bpa-text-muted);
    --bpa-line:        var(--bpa-border);
    --bpa-footer:      var(--bpa-navy);
    --bpa-primary-dark: var(--bpa-primary-hover);
}

/* ==========================================================================
   QA FIXES — from the final visual review.
   ========================================================================== */

/* The hero input's placeholder is longer than the field, so it was clipped
   mid-word ("...in Banga"). The placeholder text is content and must not be
   edited, so it is truncated cleanly instead. */
.hero-form input[type="text"] {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Cards sat flat on the page: the shadow tokens had been undefined, and once
   defined the scale was too subtle to read as elevation. */
.bpa-card { box-shadow: var(--bpa-shadow-sm); }
.bpa-card--pillar { box-shadow: var(--bpa-shadow-md); }
.bpa-card--pillar:hover { box-shadow: var(--bpa-shadow-lg); transform: translateY(-3px); }
.bpa-card--tool { box-shadow: none; }
.bpa-card--tool:hover { box-shadow: var(--bpa-shadow-sm); }

/* ==========================================================================
   LEGACY COMPARISON TABLES — mobile scroll (§8).
   The theme wraps content tables via the bpa-table-wrap filter, but that runs on
   `the_content`. Comparison tables hardcoded inside templates (.comp-table) never
   pass through it, so at 390px their content was CLIPPED inside the box rather
   than scrollable — verified: table.scrollWidth > clientWidth with overflow
   visible. These get their own scroll container without touching the templates.
   ========================================================================== */
.comp-table,
.comparison-table:not(.bpa-table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.comp-table thead, .comparison-table thead { display: table-header-group; }
.comp-table tbody, .comparison-table tbody { display: table-row-group; }
.comp-table tr, .comparison-table tr { display: table-row; }

/* ==========================================================================
   HERO FLOAT CARDS vs PRODUCT MOCK - overlap fix.
   A visual review found the "GST & MSME aware" float sitting over the mock's bar
   chart, hiding it, and the "Priced in rupees" float over the mock's title area.
   The mock is shifted up and the lower float moved into the band beneath it, so
   both floats read as annotations beside the mock rather than covering it.
   ========================================================================== */
.bpa-hero__visual { align-items: flex-start; }
.bpa-mock { width: 62%; margin-top: 9%; }
.bpa-float--tl { top: 5%; left: -5%; }
.bpa-float--br { bottom: 5%; right: -5%; }

@media (max-width: 1100px) {
    .bpa-mock { width: 58%; margin-top: 10%; }
}
@media (max-width: 767.98px) {
    .bpa-mock { width: 66%; margin-top: 12%; }
    .bpa-float--tl { top: 2%; left: -3%; }
    .bpa-float--br { bottom: 2%; right: -3%; }
}
@media (max-width: 560px) {
    /* narrow: keep the mock clear above and let the floats sit in the lower band */
    .bpa-mock { width: 72%; margin-top: 14%; }
    .bpa-float { max-width: 168px; padding: .6rem .7rem; }
    .bpa-float strong { font-size: .6875rem; }
    .bpa-float span { font-size: .625rem; }
}

/* ==========================================================================
   HERO FLOAT OVERLAP - narrow-width pass.
   Measured intersection between .bpa-float--br and .bpa-mock__chart:
     1440px  none        (fixed by the previous pass)
      768px  60 x 11 px  (still covering the chart)
      390px  84 x 30 px  (still covering the chart)
   The mock is shortened further at tablet, and at phone width the lower float is
   dropped entirely - the mock is only ~300px wide there and the chart is the most
   informative part of it. Neither label carries information that is not also
   present elsewhere on the page (pricing and GST tool sections).
   ========================================================================== */
@media (max-width: 1100px) {
    .bpa-mock { width: 54%; margin-top: 14%; }
    .bpa-mock__chart { height: 46px; }
    .bpa-float--br { bottom: 2%; right: -4%; }
}
@media (max-width: 767.98px) {
    .bpa-mock { width: 66%; margin-top: 13%; }
    .bpa-float--br { display: none; }
}
@media (max-width: 560px) {
    .bpa-mock { width: 74%; margin-top: 14%; }
}

/* ==========================================================================
   PHASE K2.2 - FINAL VISUAL POLISH
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SUPPORT CHAT LAUNCHER (390px)
   The widget is a fixed launcher (`#biz-chat-toggle`, 145x50 at right:20px
   bottom:20px, z-index 100000) supplied by the [biz_live_support_chat]
   shortcode. Measured coverage across the page at 390px:
       scroll top     -> covers 0 elements
       scroll middle  -> covers 0 elements
       scroll bottom  -> covers 1 element: the footer disclaimer paragraph
   It never covers a CTA button or a footer link.

   The widget itself is NOT touched - no removal, no disabling, no change to its
   behaviour. Space is reserved beneath the footer bar instead, so the fixed
   launcher sits over empty padding rather than over text. This is a theme-side
   layout change only and is fully reversible.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .bpa-footer__bar { padding-bottom: 4.75rem; }
    .bpa-footer { padding-bottom: 1rem; }
}

/* --------------------------------------------------------------------------
   2. HERO FLOAT vs PRODUCT MOCK - 768px intersection
   Measured float<->chart intersection before this pass:
       1440px  none
       1024px  none
        768px  56 x 5 px   <- the reported 5px nick
        390px  none
   The lower float is nudged down and the mock's chart shortened at the tablet
   breakpoint. Layout/CSS positioning only - no hero text, content, copy, CTA
   destination or hero behaviour is changed.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .bpa-mock { width: 52%; margin-top: 15%; }
    .bpa-mock__chart { height: 40px; }
    .bpa-float--br { bottom: 1%; right: -3%; }
}
@media (max-width: 900px) and (min-width: 768px) {
    /* the tablet band is where the nick appeared */
    .bpa-mock { width: 50%; margin-top: 16%; }
    .bpa-float--br { bottom: 0; }
}

/* --------------------------------------------------------------------------
   3. HERO CONTENT HIERARCHY
   Three blocks sit above the CTA and each opens by defining the product, so they
   read as repetitive. All three are protected content and are kept in full with
   wording untouched; what changes is their RELATIVE visual weight:

       Executive Summary  -> primary card   (solid surface, accent bar, shadow)
       Direct answer      -> supporting     (quiet fill, hairline border, no bar)
       Intro paragraph    -> body copy      (smaller, more space above it)

   That gives one clear entry point and lets the product visual stay dominant,
   instead of three blocks competing at the same weight.
   -------------------------------------------------------------------------- */
.aeo-executive-summary {
    background: var(--bpa-surface);
    border: 1px solid var(--bpa-border);
    border-left: 4px solid var(--bpa-primary);
    border-radius: var(--bpa-radius);
    box-shadow: var(--bpa-shadow-sm);
    padding: 1.25rem 1.35rem 1.25rem 3.4rem;
    margin: 0 0 1rem;
    font-size: .9375rem;
    line-height: 1.72;
}
.aeo-executive-summary strong { font-weight: 700; color: var(--bpa-text); }

.direct-answer-block {
    background: var(--bpa-bg);
    border: 1px solid var(--bpa-border);
    border-left: 1px solid var(--bpa-border);
    box-shadow: none;
    border-radius: var(--bpa-radius);
    padding: .9rem 1.1rem .9rem 3.1rem;
    margin: 0 0 1.75rem;
    font-size: .875rem;
    line-height: 1.65;
    color: var(--bpa-text-muted);
}
.direct-answer-block strong { font-weight: 600; color: var(--bpa-text); }
.direct-answer-block > i { top: 1rem; font-size: .9rem; color: var(--bpa-text-muted); }

.hero-subtitle {
    font-size: 1.0625rem;
    line-height: 1.78;
    margin: 0 0 2.25rem;
}

@media (max-width: 767.98px) {
    .aeo-executive-summary { padding: 1.05rem 1.1rem 1.05rem 2.9rem; font-size: .9rem; }
    .direct-answer-block { padding: .85rem 1rem .85rem 2.75rem; font-size: .8438rem; }
    .hero-subtitle { font-size: 1rem; margin-bottom: 1.75rem; }
}

/* --------------------------------------------------------------------------
   1b. SUPPORT CHAT LAUNCHER - compact mobile footprint
   Reserving footer space removed the only overlap that sat on text at rest, but
   coverage is scroll-position dependent: a FIXED launcher necessarily overlays
   whatever scrolls beneath it. Eliminating that entirely would mean disabling or
   hiding the widget, which this phase forbids.

   So the footprint is reduced instead. The launcher keeps its label, its markup,
   its ids and its behaviour - only its presentation size/position changes, which
   is the "presentation/positioning" adjustment the phase asks for. Scoped to
   mobile widths so desktop is untouched.

   !important is used on presentation properties only: the widget injects its own
   stylesheet and this is the only way a theme rule can re-size it. No behaviour,
   event, markup or label is altered.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    #biz-chat-toggle {
        padding: .5rem .8rem !important;
        font-size: .8125rem !important;
        line-height: 1.2 !important;
        height: auto !important;
        width: auto !important;
        max-width: 40vw !important;
        right: 1rem !important;
        bottom: 1rem !important;
        border-radius: 999px !important;
    }
}
@media (max-width: 575.98px) {
    #biz-chat-toggle {
        padding: .55rem .7rem !important;
        font-size: .8125rem !important;
        right: .75rem !important;
        bottom: .75rem !important;
    }
    /* keep the panel inside the viewport if it is opened */
    #biz-chat-container {
        max-width: calc(100vw - 1.5rem) !important;
        right: .75rem !important;
    }
}

/* ==========================================================================
   SECTION HEAD - CENTRED VARIANT  (owner-reported defect)
   Symptom: on the homepage the "AI Business Tools" H2 rendered LEFT-aligned
   under a correctly centred subline. Measured: H2 glyph centre = 486px against a
   container centre of 712px, i.e. ~226px off.

   Two causes, both a cascade accident rather than a decision:
     1. `.bpa-head` is declared twice - once in the base layer as
        `display:flex; justify-content:space-between` (a heading + action-link
        row) and once as a centred block. Both applied, so the wrapper stayed a
        flex row and the H2 and subline sat BESIDE each other instead of stacked.
     2. `.bpa-head .bpa-h2 { text-align: left }` has specificity (0,2,0) and
        therefore outranked `.bpa-h2--center` at (0,1,0), silently discarding the
        centring intent even though the markup asked for it.

   Fixed by making the centred case explicit and self-consistent instead of
   relying on cascade order. `.bpa-head--center` sets display, alignment and the
   child heading selector together, so it cannot be half-applied.
   ========================================================================== */
.bpa-head--center {
    display: block;
    max-width: 44rem;
    margin: 0 auto 3rem;
    text-align: center;
}
.bpa-head--center .bpa-h2,
.bpa-head--center .bpa-h2--center,
.bpa-head--center h2 {
    text-align: center;
    margin-bottom: .75rem;
}
.bpa-head--center .bpa-lead,
.bpa-head--center .bpa-lead--center,
.bpa-head--center p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* the base flex header keeps its left-aligned heading, but only when the centred
   variant is NOT in play */
.bpa-head:not(.bpa-head--center) .bpa-h2 { text-align: left; }

@media (max-width: 767.98px) {
    .bpa-head--center { margin-bottom: 2rem; }
}



/* ==========================================================================
   PHASE K2.5 — FINAL VISUAL HARMONIZATION STYLES
   ========================================================================== */

/* 1. WPForms Contact Form Submit Button Normalization (/contact/) */
.wpforms-form button[type="submit"],
.wpforms-submit-container button,
.wpforms-submit,
input.wpforms-submit {
    background-color: var(--bpa-primary) !important;
    background: var(--bpa-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--bpa-radius) !important;
    padding: 0.875rem 1.75rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    transition: background-color 0.16s ease, transform 0.16s ease !important;
    cursor: pointer !important;
    box-shadow: var(--bpa-shadow-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.wpforms-form button[type="submit"]:hover,
.wpforms-submit-container button:hover,
.wpforms-submit:hover,
input.wpforms-submit:hover {
    background-color: var(--bpa-primary-hover) !important;
    background: var(--bpa-primary-hover) !important;
    color: #ffffff !important;
}

/* 2. Free Business Plan Generator & Tool Submit Button Normalization */
.tool-form button[type="submit"],
.tool-card button,
.page-id-1095 input[type="submit"],
.page-id-1095 button[type="submit"],
form.bpa-tool-form button[type="submit"] {
    background-color: var(--bpa-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--bpa-radius) !important;
    padding: 0.875rem 1.5rem !important;
    font-weight: 600 !important;
    box-shadow: var(--bpa-shadow-sm) !important;
}

/* 3. Legacy Article CTA Button Override (/150-small-business-ideas-for-2026/) */
.singular-content a.btn,
.singular-content a.button,
.singular-content .cta-button,
.singular-content a[style*="#3498DB"],
.singular-content a[style*="3498db"],
.entry-content a.btn,
.entry-content a.button,
.entry-content a[style*="#3498DB"],
.entry-content a[style*="3498db"] {
    background-color: var(--bpa-primary) !important;
    color: #ffffff !important;
    border-radius: var(--bpa-radius) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    display: inline-block !important;
    text-decoration: none !important;
    box-shadow: var(--bpa-shadow-sm) !important;
}

.singular-content a.btn:hover,
.singular-content a.button:hover,
.entry-content a.btn:hover,
.entry-content a.button:hover {
    background-color: var(--bpa-primary-hover) !important;
    color: #ffffff !important;
}

/* 4. Footer Surface & Wrapper Enforcement */
footer.bpa-footer,
.bpa-footer {
    background-color: var(--bpa-navy) !important;
    background: var(--bpa-navy) !important;
    color: var(--bpa-navy-ink) !important;
    position: relative !important;
    z-index: 10 !important;
}

/* 5. Pricing Page Component Harmonization (/pricing/) */
.pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.75rem !important;
    max-width: 1200px !important;
    margin: 2rem auto 3rem !important;
}

@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(1, 1fr) !important;
        max-width: 500px !important;
    }
}

.pricing-card {
    background: #ffffff !important;
    border: 1px solid var(--bpa-border) !important;
    border-radius: var(--bpa-radius-lg) !important;
    padding: 2.25rem 1.75rem !important;
    box-shadow: var(--bpa-shadow-sm) !important;
    text-align: center !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.pricing-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--bpa-shadow-hover) !important;
}

.pricing-card.popular {
    border: 2px solid var(--bpa-primary) !important;
    box-shadow: var(--bpa-shadow-hover) !important;
}

.popular-tag {
    position: absolute !important;
    top: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--bpa-gradient-cta) !important;
    color: #ffffff !important;
    padding: 4px 16px !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

.pricing-card h3 {
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: var(--bpa-text) !important;
    margin-bottom: 0.75rem !important;
}

.price {
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    color: var(--bpa-primary) !important;
    line-height: 1 !important;
    margin-bottom: 0.75rem !important;
}

.price span {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--bpa-text-muted) !important;
    display: inline-block !important;
    margin-left: 4px !important;
}

.pricing-card p {
    font-size: 0.9375rem !important;
    color: var(--bpa-text-muted) !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.5 !important;
}

.pricing-features {
    list-style: none !important;
    margin: 1.5rem 0 !important;
    padding: 0 !important;
    text-align: left !important;
    flex-grow: 1 !important;
}

.pricing-features li {
    font-size: 0.9375rem !important;
    color: var(--bpa-text) !important;
    margin-bottom: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
}

.pricing-features li i.fa-check {
    color: var(--bpa-secondary) !important;
}

.pricing-features li i.fa-times {
    color: #94a3b8 !important;
}

.pricing-card .btn-primary,
.pricing-card .btn.btn-primary {
    background-color: var(--bpa-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--bpa-radius) !important;
    padding: 0.875rem 1.5rem !important;
    font-weight: 700 !important;
    display: block !important;
    width: 100% !important;
    box-shadow: var(--bpa-shadow-sm) !important;
    text-decoration: none !important;
}

.pricing-card .btn-outline,
.pricing-card .btn.btn-outline {
    background-color: transparent !important;
    color: var(--bpa-primary) !important;
    border: 2px solid var(--bpa-primary) !important;
    border-radius: var(--bpa-radius) !important;
    padding: 0.875rem 1.5rem !important;
    font-weight: 700 !important;
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
}

.pricing-card .btn-outline:hover {
    background-color: var(--bpa-primary) !important;
    color: #ffffff !important;
}

/* 6. Business Plan Hub Visual Harmonization (/business-plan/) */
.page-id-1046 .entry-content,
.singular-container {
    max-width: 1200px;
    margin: 0 auto;
}



/* ==========================================================================
   10/10 SAAS DESIGN SYSTEM ARCHITECTURE & COMPONENTS
   ========================================================================== */

/* 1. Split-Hero Grid & Right-Column Product Mockup Container */
.bpa-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .bpa-hero__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
}

.bpa-hero__mockup {
    background: #ffffff;
    border: 1px solid var(--bpa-border);
    border-radius: var(--bpa-radius-lg);
    box-shadow: var(--bpa-shadow-hover);
    overflow: hidden;
    position: relative;
}

.bpa-mockup__header {
    background: #f1f5f9;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--bpa-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bpa-mockup__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.bpa-mockup__dot--red { background: #ef4444; }
.bpa-mockup__dot--yellow { background: #f59e0b; }
.bpa-mockup__dot--green { background: #10b981; }

.bpa-mockup__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bpa-text-muted);
    margin-left: 0.5rem;
}

.bpa-mockup__body {
    padding: 1.5rem;
    background: #fafafa;
}

/* Chat UI Mockup Inside Hero */
.bpa-chat-mock {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bpa-chat-msg {
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    font-size: 0.9375rem;
    line-height: 1.5;
    max-width: 88%;
}

.bpa-chat-msg--user {
    background: var(--bpa-primary);
    color: #ffffff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.bpa-chat-msg--ai {
    background: #ffffff;
    color: var(--bpa-text);
    border: 1px solid var(--bpa-border);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    box-shadow: var(--bpa-shadow-sm);
}

.bpa-chat-msg__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bpa-primary);
    margin-bottom: 0.375rem;
}

/* 2. Styled Icon Box Component (48x48px) */
.bpa-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #eff6ff;
    color: var(--bpa-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.bpa-icon-box--purple {
    background: #f3e8ff;
    color: var(--bpa-secondary);
}

.bpa-icon-box--green {
    background: #dcfce7;
    color: #15803d;
}

/* 3. Hero Trust Badge Strip */
.bpa-hero__trust {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bpa-border);
    flex-wrap: wrap;
}

.bpa-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bpa-text);
}

.bpa-trust-item i {
    color: var(--bpa-secondary);
}

/* 4. Collapsible SEO Accordion Container */
.bpa-seo-accordion {
    background: #ffffff;
    border: 1px solid var(--bpa-border);
    border-radius: var(--bpa-radius-lg);
    box-shadow: var(--bpa-shadow-sm);
    margin: 2rem 0;
    overflow: hidden;
}

.bpa-seo-accordion__header {
    padding: 1.25rem 1.5rem;
    background: #f8fafc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--bpa-text);
    border-bottom: 1px solid var(--bpa-border);
    user-select: none;
}

.bpa-seo-accordion__header:hover {
    background: #f1f5f9;
}

.bpa-seo-accordion__body {
    padding: 1.75rem;
    background: #ffffff;
}

/* 5. Generic Container Shell & Typography Locks */
.bpa-main-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

.bpa-reading-shell {
    max-width: 800px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}



/* ==========================================================================
   BULLET & LIST ICON HARMONIZATION FIX
   ========================================================================== */
.key-takeaways li {
    padding-left: 1.75rem !important;
    position: relative !important;
    color: var(--bpa-text) !important;
    line-height: 1.6 !important;
}

.key-takeaways li::before {
    content: "\f00c" !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    color: var(--bpa-primary) !important;
    font-size: 0.875rem !important;
}

/* Ensure standard unordered lists inside cards and content sections have clean bullets */
.bpa-card ul,
.bpa-read ul,
.singular-content ul,
.entry-content ul,
.bpa-seo-accordion ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.bpa-card ul li,
.bpa-read ul li,
.singular-content ul li,
.entry-content ul li,
.bpa-seo-accordion ul li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    color: var(--bpa-text);
}


/* ==========================================================================
   FOOTER ALIGNMENT & RECENT INSIGHTS STRIP STYLING
   ========================================================================== */
.bpa-footer__grid {
    display: grid !important;
    grid-template-columns: 1.4fr repeat(4, 1fr) !important;
    gap: 2.5rem !important;
    align-items: start !important;
}

.bpa-footer h2 {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid var(--bpa-primary) !important;
    display: inline-block !important;
}

.bpa-footer ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bpa-footer li {
    margin-bottom: 0.65rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

.bpa-footer__recent {
    margin-top: 3rem !important;
    padding: 1rem 1.5rem !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}

.bpa-footer__recent-label {
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.75rem !important;
    background: var(--bpa-primary) !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
}

.bpa-footer__recent ul {
    display: flex !important;
    gap: 1.75rem !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.bpa-footer__recent li {
    margin: 0 !important;
    font-size: 0.875rem !important;
}

.bpa-footer__recent a {
    color: var(--bpa-navy-ink) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.bpa-footer__recent a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

@media (max-width: 991.98px) {
    .bpa-footer__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }
}

@media (max-width: 575.98px) {
    .bpa-footer__grid {
        grid-template-columns: 1fr !important;
    }
    .bpa-footer__recent {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}


/* Center Footer Bar Copyright & Disclaimer */
.bpa-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 3rem !important;
    padding: 1.5rem 0 !important;
    font-size: var(--bpa-fs-meta) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
}

.bpa-footer__bar p {
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
}


/* ==========================================================================
   BLUE HERO & DARK SECTION PERFECT TEXT CONTRAST HARMONIZATION
   ========================================================================== */
.bpa-hero--blue,
.bpa-hero--dark {
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%) !important;
    color: #ffffff !important;
}

.bpa-hero--blue .bpa-h1,
.bpa-hero--blue .bpa-hero__title,
.bpa-hero--blue h1,
.bpa-hero--blue h2,
.bpa-hero--blue h3,
.bpa-hero--dark .bpa-h1,
.bpa-hero--dark .bpa-hero__title,
.bpa-hero--dark h1,
.bpa-hero--dark h2,
.bpa-hero--dark h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.bpa-hero--blue .bpa-lead,
.bpa-hero--blue .bpa-hero__lede,
.bpa-hero--blue .bpa-hero__lede p,
.bpa-hero--dark .bpa-lead,
.bpa-hero--dark .bpa-hero__lede,
.bpa-hero--dark .bpa-hero__lede p {
    color: rgba(255, 255, 255, 0.95) !important;
}

.bpa-hero--blue .bpa-badge,
.bpa-hero--dark .bpa-badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(4px) !important;
}

.bpa-hero--blue .bpa-trust-item,
.bpa-hero--dark .bpa-trust-item {
    color: #ffffff !important;
}

.bpa-hero--blue .bpa-trust-item strong,
.bpa-hero--dark .bpa-trust-item strong {
    color: #ffffff !important;
}

.bpa-hero--blue .bpa-hero__trust,
.bpa-hero--dark .bpa-hero__trust {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}


/* ==========================================================================
   LIGHT BACKGROUND HERO HARMONIZATION (HOMEPAGE MATCHING)
   ========================================================================== */
.bpa-hero,
.bpa-hero--blue {
    position: relative !important;
    padding: 3.5rem 0 4.5rem !important;
    overflow: hidden !important;
    background: radial-gradient(1100px 480px at 88% -8%, rgba(124, 58, 237, 0.08), transparent 62%),
                radial-gradient(900px 420px at 4% 4%, rgba(37, 99, 235, 0.08), transparent 58%),
                linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%) !important;
    color: var(--bpa-text) !important;
}

.bpa-hero .bpa-h1,
.bpa-hero .bpa-hero__title,
.bpa-hero h1,
.bpa-hero h2,
.bpa-hero h3,
.bpa-hero--blue .bpa-h1,
.bpa-hero--blue .bpa-hero__title,
.bpa-hero--blue h1,
.bpa-hero--blue h2,
.bpa-hero--blue h3 {
    color: #0F172A !important;
    text-shadow: none !important;
}

.bpa-hero .bpa-lead,
.bpa-hero .bpa-hero__lede,
.bpa-hero .bpa-hero__lede p,
.bpa-hero--blue .bpa-lead,
.bpa-hero--blue .bpa-hero__lede,
.bpa-hero--blue .bpa-hero__lede p {
    color: #4B5563 !important;
}

.bpa-hero .bpa-badge,
.bpa-hero--blue .bpa-badge {
    background: #EFF6FF !important;
    color: #2563EB !important;
    border: 1px solid #BFDBFE !important;
    backdrop-filter: none !important;
}

.bpa-hero .bpa-trust-item,
.bpa-hero--blue .bpa-trust-item {
    color: #1E293B !important;
}

.bpa-hero .bpa-trust-item strong,
.bpa-hero--blue .bpa-trust-item strong {
    color: #0F172A !important;
}

.bpa-hero .bpa-hero__trust,
.bpa-hero--blue .bpa-hero__trust {
    border-top: 1px solid #E2E8F0 !important;
}


/* ==========================================================================
   PRICING CARD BLUE BACKGROUND & TEXT CONTRAST HARMONIZATION
   ========================================================================== */
.pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    align-items: center !important;
    max-width: 1140px !important;
    margin: 1.5rem auto 2.5rem !important;
}

@media (max-width: 991.98px) {
    .pricing-grid {
        grid-template-columns: 1fr !important;
        max-width: 480px !important;
        gap: 2.5rem !important;
    }
    .pricing-card.popular {
        transform: scale(1) !important;
    }
}

/* Standard White Pricing Cards */
.pricing-card {
    background: #ffffff !important;
    border: 1px solid var(--bpa-border) !important;
    border-radius: var(--bpa-radius-lg) !important;
    padding: 2.5rem 1.75rem !important;
    box-shadow: var(--bpa-shadow) !important;
    text-align: center !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.pricing-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--bpa-shadow-hover) !important;
}

.pricing-card h3 {
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin-bottom: 0.75rem !important;
}

.pricing-card .price {
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    color: #2563EB !important;
    line-height: 1 !important;
    margin-bottom: 0.75rem !important;
}

.pricing-card .price span {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    display: inline-block !important;
    margin-left: 4px !important;
}

.pricing-card p {
    font-size: 0.9375rem !important;
    color: #4B5563 !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.5 !important;
}

.pricing-features {
    list-style: none !important;
    margin: 1.5rem 0 !important;
    padding: 0 !important;
    text-align: left !important;
    flex-grow: 1 !important;
}

.pricing-features li {
    font-size: 0.9375rem !important;
    color: #1E293B !important;
    margin-bottom: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
}

.pricing-features li i.fa-check {
    color: #22C55E !important;
}

.pricing-features li i.fa-times {
    color: #94A3B8 !important;
}

/* Featured / Popular Blue Pricing Card */
.pricing-card.popular,
.bpa-card--featured {
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%) !important;
    border: 2px solid #2563EB !important;
    color: #ffffff !important;
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.3) !important;
    transform: scale(1.04) !important;
    z-index: 2 !important;
}

.pricing-card.popular .popular-tag,
.bpa-card--featured .bpa-card__tag {
    position: absolute !important;
    top: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #ffffff !important;
    color: #1E3A8A !important;
    padding: 4px 18px !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
}

.pricing-card.popular h3,
.bpa-card--featured h3,
.bpa-card--featured .bpa-price__title {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
}

.pricing-card.popular .price,
.bpa-card--featured .price,
.bpa-card--featured .bpa-price {
    color: #ffffff !important;
    font-size: 3rem !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

.pricing-card.popular .price span,
.bpa-card--featured .price span,
.bpa-card--featured .bpa-price span,
.pricing-card.popular p,
.bpa-card--featured p,
.bpa-card--featured .bpa-price__note {
    color: rgba(255, 255, 255, 0.92) !important;
}

.pricing-card.popular .pricing-features li,
.bpa-card--featured .bpa-feature-list li {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.pricing-card.popular .pricing-features li i.fa-check,
.bpa-card--featured .bpa-feature-list .fa-check {
    color: #34D399 !important;
}

.pricing-card.popular .pricing-features li i.fa-times {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Button Contrast inside Blue Featured Pricing Card */
.pricing-card.popular .btn-primary,
.pricing-card.popular .btn.btn-primary,
.bpa-card--featured .bpa-btn,
.bpa-card--featured .bpa-btn--block {
    background-color: #ffffff !important;
    color: #1E3A8A !important;
    border: none !important;
    border-radius: var(--bpa-radius-btn) !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    display: block !important;
    width: 100% !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.pricing-card.popular .btn-primary:hover,
.bpa-card--featured .bpa-btn:hover {
    background-color: #F8FAFC !important;
    color: #1D4ED8 !important;
    transform: translateY(-2px) !important;
}

/* Button Contrast inside Standard White Pricing Card */
.pricing-card .btn-outline,
.pricing-card .btn.btn-outline {
    background-color: transparent !important;
    color: #2563EB !important;
    border: 2px solid #2563EB !important;
    border-radius: var(--bpa-radius-btn) !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.pricing-card .btn-outline:hover {
    background-color: #2563EB !important;
    color: #ffffff !important;
}


/* Fix .bpa-note text contrast on light background */
.bpa-note,
.bpa-note.bpa-card {
    background: #ffffff !important;
    border: 1px solid var(--bpa-border) !important;
    border-left: 4px solid var(--bpa-secondary) !important;
}

.bpa-note h3,
.bpa-note .bpa-h3,
.bpa-note h2,
.bpa-note h4 {
    color: #0F172A !important;
}

.bpa-note p,
.bpa-note .bpa-card__text,
.bpa-note span,
.bpa-note strong {
    color: #4B5563 !important;
}

.bpa-note strong {
    color: #0F172A !important;
}

.bpa-note a {
    color: #2563EB !important;
    text-decoration: underline !important;
}


/* ==========================================================================
   GLOBAL CARD CONTRAST HARMONIZATION FIX (WHITE CARDS vs BLUE CARDS)
   ========================================================================== */

/* Light Card Highlight Override */
.bpa-card--highlight {
    background: #ffffff !important;
    border: 1px solid var(--bpa-border) !important;
    box-shadow: var(--bpa-shadow) !important;
}

.bpa-card--highlight .bpa-card__title,
.bpa-card--highlight h2,
.bpa-card--highlight h3,
.bpa-card--highlight h4,
.bpa-card--highlight strong,
.bpa-card--highlight .gst-price,
.bpa-card--highlight .tagline {
    color: #0F172A !important;
}

.bpa-card--highlight .bpa-card__text,
.bpa-card--highlight p,
.bpa-card--highlight li,
.bpa-card--highlight div,
.bpa-card--highlight .gst-price-note {
    color: #4B5563 !important;
}

.bpa-card--highlight ul li {
    color: #1E293B !important;
}

/* Featured Blue Card Override */
.bpa-card--blue,
.bpa-card--gradient,
.gst-card.popular {
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%) !important;
    border: 2px solid #2563EB !important;
    color: #ffffff !important;
    box-shadow: 0 14px 35px rgba(37, 99, 235, 0.25) !important;
}

.gst-card.popular h3,
.gst-card.popular .gst-price,
.bpa-card--blue .bpa-card__title,
.bpa-card--blue h3,
.bpa-card--gradient .bpa-card__title,
.bpa-card--gradient h3 {
    color: #ffffff !important;
}

.gst-card.popular .tagline,
.gst-card.popular .gst-price-note,
.gst-card.popular ul li,
.bpa-card--blue .bpa-card__text,
.bpa-card--blue p,
.bpa-card--blue li,
.bpa-card--gradient .bpa-card__text,
.bpa-card--gradient p,
.bpa-card--gradient li {
    color: rgba(255, 255, 255, 0.95) !important;
}

.gst-card.popular ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.gst-card.popular .gst-btn-primary,
.bpa-card--blue .bpa-btn,
.bpa-card--gradient .bpa-btn {
    background: #ffffff !important;
    color: #1E3A8A !important;
    border: none !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
}



/* ==========================================================================
   HARMONIZED B2B SAAS CTA BANDS & ACTION GROUPS
   Unified Navy-Blue gradient (#1E3A8A -> #2563EB) across all CTA blocks,
   eliminating right-side background mismatches & box artifacts.
   ========================================================================== */
.bpa-cta, .bpa-cta-band, .bpa-cta-inline {
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%) !important;
    color: #FFFFFF !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.25) !important;
}

.bpa-cta h2, .bpa-cta h3, .bpa-cta-band__title, .bpa-cta-inline h2, .bpa-cta-inline h3 {
    color: #FFFFFF !important;
}

.bpa-cta p, .bpa-cta-band__text, .bpa-cta-inline p {
    color: #E0E7FF !important;
}

.bpa-cta-actions, .bpa-cta__action, .bpa-cta-side {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    gap: 1rem !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.bpa-cta .bpa-btn, .bpa-cta-band .bpa-btn, .bpa-cta-inline .bpa-btn {
    background: #FFFFFF !important;
    color: #1E3A8A !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.bpa-cta .bpa-btn:hover, .bpa-cta-band .bpa-btn:hover, .bpa-cta-inline .bpa-btn:hover {
    background: #F8FAFC !important;
    color: #1D4ED8 !important;
    transform: translateY(-1px) !important;
}

.bpa-cta .bpa-btn--ghost, .bpa-cta-band .bpa-btn--secondary, .bpa-cta-inline .bpa-btn--secondary {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.bpa-cta .bpa-btn--ghost:hover, .bpa-cta-band .bpa-btn--secondary:hover, .bpa-cta-inline .bpa-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
}



/* ==========================================================================
   SIDEBAR CTA WIDGET HARMONIZATION (FIXES SCREENSHOT_4 INVISIBLE TEXT & BLOB)
   ========================================================================== */
.cta-widget {
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%) !important;
    color: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 1.75rem 1.25rem !important;
    text-align: center !important;
    margin-bottom: 1.75rem !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.25) !important;
}

.cta-widget::before {
    display: none !important; /* Removes awkward circular blob artifact */
}

.cta-widget h3 {
    color: #FFFFFF !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.65rem !important;
    position: relative !important;
    z-index: 2 !important;
}

.cta-widget p {
    color: #E0E7FF !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
}

.cta-widget a, .cta-widget .bpa-btn {
    display: inline-block !important;
    background: #FFFFFF !important;
    color: #1E3A8A !important;
    padding: 0.65rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    z-index: 2 !important;
    border: none !important;
}

.cta-widget a:hover, .cta-widget .bpa-btn:hover {
    background: #F8FAFC !important;
    color: #1D4ED8 !important;
    transform: translateY(-1px) !important;
}