/* Auto-generated by split-monolith-css.js per ADR-0044. */
/* DO NOT hand-edit — re-run the splitter with an updated SECTION_TO_MODULE table instead. */

/* ========================================
   FABSOFT ADS LANDING PAGE STYLES
   Modern conversion-focused design for paid-ads landing pages.
   Uses the FabSoft design system variables from fabsoft-product-layout.css.
   ======================================== */


/* ============================================
   MOBILE OVERFLOW FIX (box-sizing reset)
   No border-box reset existed for the LP, so full-width sections (width:100%
   + 24px side padding) rendered at viewport+48px on phones → horizontal scroll
   and clipped hero text (438px on a 390px screen). Scope border-box to every
   LP region + descendants (the static sections render OUTSIDE .ads-landing, so
   each is listed). Brings mobile width to the site baseline; verified headless.
   ============================================ */
.ads-landing, .ads-landing *, .ads-landing *::before, .ads-landing *::after,
.ads-comparison, .ads-comparison *,
.ads-security-section, .ads-security-section *,
.ads-pricing-section, .ads-pricing-section *,
.aifp-showcase, .aifp-showcase * {
    box-sizing: border-box;
}


/* ============================================
   PARENT LAYOUT OVERRIDES
   MasterHome.cshtml wraps content in home-wrapper > home-border + home-mainContent
   which constrains width. These overrides break out for full-width ads pages.
   Selectors target both .ads-landing wrapper AND .ads-hero (fallback when
   content is injected without the wrapper div).
   ============================================ */
.home-wrapper:has(.ads-landing),
.home-wrapper:has(.ads-hero) ,
.home-wrapper:has(.fabsoft-page-wrapper) ,
.home-wrapper:has(.fabsoft-product-hero) {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.home-wrapper:has(.ads-landing) > .home-border,
.home-wrapper:has(.ads-hero) > .home-border ,
.home-wrapper:has(.fabsoft-page-wrapper) > .home-border ,
.home-wrapper:has(.fabsoft-product-hero) > .home-border {
    display: none !important;
}
.home-mainContent:has(.ads-landing),
.home-mainContent:has(.ads-hero) ,
.home-mainContent:has(.fabsoft-page-wrapper) ,
.home-mainContent:has(.fabsoft-product-hero) {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
#main-content:has(.ads-landing),
#main-content:has(.ads-hero) ,
#main-content:has(.fabsoft-page-wrapper) ,
#main-content:has(.fabsoft-product-hero) {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.home-wrapper:has(.ads-landing) .nav-section,
.home-wrapper:has(.ads-hero) .nav-section ,
.home-wrapper:has(.fabsoft-page-wrapper) .nav-section ,
.home-wrapper:has(.fabsoft-product-hero) .nav-section {
    display: block !important;
    max-width: 100% !important;
}
.home-wrapper:has(.ads-landing) .nav-section .home-gutter,
.home-wrapper:has(.ads-hero) .nav-section .home-gutter ,
.home-wrapper:has(.fabsoft-page-wrapper) .nav-section .home-gutter ,
.home-wrapper:has(.fabsoft-product-hero) .nav-section .home-gutter {
    display: none !important;
}
.home-wrapper:has(.ads-landing) .nav-content,
.home-wrapper:has(.ads-hero) .nav-content ,
.home-wrapper:has(.fabsoft-page-wrapper) .nav-content ,
.home-wrapper:has(.fabsoft-product-hero) .nav-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.home-wrapper:has(.ads-landing) .home-heroHrContainer,
.home-wrapper:has(.ads-hero) .home-heroHrContainer ,
.home-wrapper:has(.fabsoft-page-wrapper) .home-heroHrContainer ,
.home-wrapper:has(.fabsoft-product-hero) .home-heroHrContainer {
    display: none !important;
}

/* Hide the legacy blue top nav (.primarynav-container). The design-target
   AI File Pro product page renders only the current white nav (primarynav2);
   the paid-LP master template still injects the old primarynav, stacking a
   second header above it. Suppress it for minimal chrome (ADR-0059). */
.home-wrapper:has(.ads-landing) .primarynav-container,
.home-wrapper:has(.ads-hero) .primarynav-container ,
.home-wrapper:has(.fabsoft-page-wrapper) .primarynav-container ,
.home-wrapper:has(.fabsoft-product-hero) .primarynav-container {
    display: none !important;
}

.home-wrapper:has(.ads-landing) .home-footer,
.home-wrapper:has(.ads-landing) .home-footerBar,
.home-wrapper:has(.ads-landing) .products-footerButton,
.home-wrapper:has(.ads-hero) .home-footer,
.home-wrapper:has(.fabsoft-page-wrapper) .home-footer,
.home-wrapper:has(.fabsoft-product-hero) .home-footer,
.home-wrapper:has(.ads-hero) .home-footerBar,
.home-wrapper:has(.fabsoft-page-wrapper) .home-footerBar,
.home-wrapper:has(.fabsoft-product-hero) .home-footerBar,
.home-wrapper:has(.ads-hero) .products-footerButton ,
.home-wrapper:has(.fabsoft-page-wrapper) .products-footerButton ,
.home-wrapper:has(.fabsoft-product-hero) .products-footerButton {
    display: none !important;
}


/* ============================================
   CRITICAL: Override case-* flex layout from site.min.css
   Both .ads-landing wrapper and unwrapped ads-hero content
   ============================================ */
.ads-landing {
    display: block !important;
    width: 100% !important;
}
.ads-landing .case-section,
.case-section:has(.ads-hero) ,
.case-section:has(.fabsoft-page-wrapper) ,
.case-section:has(.fabsoft-product-hero) {
    display: block !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
}
.ads-landing .case-pageContent,
.case-pageContent:has(.ads-hero) ,
.case-pageContent:has(.fabsoft-page-wrapper) ,
.case-pageContent:has(.fabsoft-product-hero) {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
.ads-landing .case-articleBody,
.case-articleBody:has(.ads-hero) ,
.case-articleBody:has(.fabsoft-page-wrapper) ,
.case-articleBody:has(.fabsoft-product-hero) {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}
.ads-landing .case-articleBody article,
.case-articleBody:has(.ads-hero) article ,
.case-articleBody:has(.fabsoft-page-wrapper) article ,
.case-articleBody:has(.fabsoft-product-hero) article {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ads-landing .case-title,
.ads-landing .blogs-postAuthor,
.case-pageContent:has(.ads-hero) > .case-title,
.case-pageContent:has(.fabsoft-page-wrapper) > .case-title,
.case-pageContent:has(.fabsoft-product-hero) > .case-title,
.case-pageContent:has(.ads-hero) > .blogs-postAuthor ,
.case-pageContent:has(.fabsoft-page-wrapper) > .blogs-postAuthor ,
.case-pageContent:has(.fabsoft-product-hero) > .blogs-postAuthor {
    display: none !important;
}
.ads-landing .solutionsPost-hero,
.home-wrapper:has(.ads-hero) .solutionsPost-hero ,
.home-wrapper:has(.fabsoft-page-wrapper) .solutionsPost-hero ,
.home-wrapper:has(.fabsoft-product-hero) .solutionsPost-hero {
    display: none !important;
}


/* ============================================
   SCROLL REVEAL ANIMATION
   ============================================ */
/* Progressive enhancement (ADR-0060): content is VISIBLE BY DEFAULT. The
   hide-then-fade-in animation is opted into only when JS is confirmed present —
   an inline <head> snippet adds `js` to <html> before paint, so `.js .ads-reveal`
   activates the opacity:0 start state. No-JS / blocked-Rocket-Loader / proxy /
   crawler visitors never hit opacity:0, so they see the page instead of a blank
   surface. FabSoftAdsLanding.js (adds `.visible` on scroll) must carry
   data-cfasync="false" so Rocket Loader executes it. */
.js .ads-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .ads-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .js .ads-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ============================================
   MID-PAGE CTA
   ============================================ */
.ads-midpage-cta {
    padding: 64px 24px;
    background: var(--fabsoft-bg, #F6F6F8);
    text-align: center;
    width: 100%;
}
.ads-midpage-cta-inner {
    max-width: 640px;
    margin: 0 auto;
}
.ads-midpage-cta h3 {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--fabsoft-text, #1D1D1F);
}
.ads-midpage-cta p {
    color: var(--fabsoft-text-muted, #86868B);
    font-size: 16px;
    margin-bottom: 24px;
}


/* ============================================
   AUDIENCE / TRUST (legacy compat)
   ============================================ */
.ads-audience {
    padding: 64px 24px;
    background: var(--fabsoft-bg, #F6F6F8);
    text-align: center;
    width: 100%;
}
.ads-audience-inner {
    max-width: 700px;
    margin: 0 auto;
}
.ads-audience p {
    font-size: 17px;
    color: var(--fabsoft-text-muted, #86868B);
    line-height: 1.6;
}
.ads-audience-trust {
    font-size: 15px;
    font-weight: 600;
    color: var(--fabsoft-text, #1D1D1F);
    margin-bottom: 8px;
}


/* ============================================
   FINAL CTA SECTION
   ============================================ */
.ads-final-cta {
    background: var(--fabsoft-dark, #1D1D1F);
    color: #fff;
    padding: 80px 24px;
    text-align: center;
    width: 100%;
}
.ads-final-cta-inner {
    max-width: 640px;
    margin: 0 auto;
}
.ads-final-cta h2 {
    font-family: var(--fabsoft-font, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif);
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    color: #fff;
}
.ads-final-cta p {
    color: rgba(255,255,255,0.7);
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 32px;
}
.ads-final-cta .ads-ctas { margin-bottom: 24px; }
.ads-final-cta .ads-trust-badges span {
    color: rgba(255,255,255,0.5);
}
.ads-final-cta .ads-trust-badges span::before {
    color: var(--fabsoft-green, #34C759);
}

.ads-bottom-cta {
    padding: 64px 24px;
    background: #fff;
    text-align: center;
    width: 100%;
}
.ads-bottom-cta-inner {
    max-width: 640px;
    margin: 0 auto;
}
.ads-bottom-cta h3 {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--fabsoft-text, #1D1D1F);
}
.ads-bottom-cta p {
    color: var(--fabsoft-text-muted, #86868B);
    font-size: 16px;
    margin-bottom: 24px;
}


/* ============================================
   LLM CLASS-NAME COMPATIBILITY LAYER
   The LLM sometimes generates inner element classes without the "ads-"
   prefix. These scoped rules ensure the design system applies regardless
   of whether the LLM emits "feature-card" or "ads-feature-card".
   ============================================ */

/* ── Hero badge ── */
.ads-hero .product-badge {
    display: inline-block;
    background: var(--fabsoft-blue, #0071E3);
    color: #fff;
    padding: 8px 20px;
    border-radius: 980px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
}

/* ── Feature grid & cards ── */
.ads-features .features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 640px) {
    .ads-features .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .ads-features .features-grid { grid-template-columns: repeat(3, 1fr); }
}
.ads-features .feature-card {
    background: var(--fabsoft-bg, #F6F6F8);
    border-radius: 16px;
    padding: 28px 24px;
    border: 1px solid var(--fabsoft-border, #D2D2D7);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
}
.ads-features .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.ads-features .feature-icon {
    font-size: 28px;
    margin-bottom: 12px;
    display: block;
}
.ads-features .feature-card h3,
.ads-features .ads-feature-card h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--fabsoft-text, #1D1D1F) !important;
    margin: 0 0 8px !important;
    text-align: left !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
}
.ads-features .feature-card p {
    font-size: 15px;
    color: var(--fabsoft-text-muted, #86868B);
    line-height: 1.5;
    margin: 0;
}
.ads-features .feature-badge {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fabsoft-blue, #0071E3);
    background: rgba(0,113,227,0.08);
    padding: 4px 12px;
    border-radius: 980px;
}

/* ── Role tabs (non-prefixed) ── */
.ads-role-section .role-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.ads-role-section .role-tab {
    padding: 12px 24px;
    background: #fff;
    border: 2px solid var(--fabsoft-border, #D2D2D7);
    border-radius: 980px;
    font-size: 15px;
    font-weight: 500;
    color: var(--fabsoft-text-muted, #86868B);
    cursor: pointer;
    transition: all 0.2s;
}
.ads-role-section .role-tab:hover {
    border-color: var(--fabsoft-blue, #0071E3);
    color: var(--fabsoft-blue, #0071E3);
}
.ads-role-section .role-tab.active {
    background: var(--fabsoft-blue, #0071E3);
    border-color: var(--fabsoft-blue, #0071E3);
    color: #fff;
}
.ads-role-section .role-panel {
    display: none;
}
.ads-role-section .role-panel.active {
    display: block;
}
.ads-role-section .role-panel h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--fabsoft-text, #1D1D1F) !important;
    margin: 0 0 12px !important;
    text-align: left !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
}
.ads-role-section .role-panel p {
    font-size: 15px;
    color: var(--fabsoft-text-muted, #86868B);
    line-height: 1.6;
    text-align: left;
}
.ads-role-section .role-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
    padding: 20px;
    background: var(--fabsoft-bg, #F6F6F8);
    border-radius: 12px;
}
.ads-role-section .role-stats .stat {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--fabsoft-blue, #0071E3);
}
.ads-role-section .role-benefits {
    text-align: left;
    margin: 16px 0;
}
.ads-role-section .role-benefits ul {
    padding-left: 20px;
    margin: 0;
}
.ads-role-section .role-benefits li {
    font-size: 15px;
    color: var(--fabsoft-text-muted, #86868B);
    line-height: 1.6;
    padding: 4px 0;
}
.ads-role-section .role-testimonial {
    border-left: 3px solid var(--fabsoft-blue, #0071E3);
    padding-left: 16px;
    margin-top: 20px;
    text-align: left;
}
.ads-role-section .role-testimonial blockquote {
    font-style: italic;
    font-size: 15px;
    color: var(--fabsoft-text-muted, #86868B);
    margin: 0 0 8px;
    line-height: 1.6;
}
.ads-role-section .role-testimonial cite {
    font-size: 14px;
    font-weight: 600;
    color: var(--fabsoft-text, #1D1D1F);
    font-style: normal;
}
.ads-role-section .role-panels {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid var(--fabsoft-border, #D2D2D7);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    text-align: left;
}

/* ── Role tabs: tab-button / tab-panels / tab-panel compat ── */
.ads-role-section .tab-button {
    padding: 12px 24px;
    background: #fff;
    border: 2px solid var(--fabsoft-border, #D2D2D7);
    border-radius: 980px;
    font-size: 15px;
    font-weight: 500;
    color: var(--fabsoft-text-muted, #86868B);
    cursor: pointer;
    transition: all 0.2s;
}
.ads-role-section .tab-button:hover {
    border-color: var(--fabsoft-blue, #0071E3);
    color: var(--fabsoft-blue, #0071E3);
}
.ads-role-section .tab-button.active {
    background: var(--fabsoft-blue, #0071E3);
    border-color: var(--fabsoft-blue, #0071E3);
    color: #fff;
}
.ads-role-section .tab-panels,
.ads-role-section .role-content {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid var(--fabsoft-border, #D2D2D7);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    text-align: left;
}
.ads-role-section .tab-panel {
    display: none;
}
.ads-role-section .tab-panel.active {
    display: block;
}
.ads-role-section .tab-panel h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--fabsoft-text, #1D1D1F) !important;
    margin: 0 0 12px !important;
    text-align: left !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
}
.ads-role-section .tab-panel p {
    font-size: 15px;
    color: var(--fabsoft-text-muted, #86868B);
    line-height: 1.6;
    text-align: left;
}

/* ── FAQ compat (non-prefixed item/answer wrappers) ── */
.ads-faq-section .faq-categories {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.ads-faq-section .faq-category h3 {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--fabsoft-blue, #0071E3) !important;
    margin-bottom: 12px !important;
    text-align: left !important;
    line-height: 1.3 !important;
}
.ads-faq-section .faq-item {
    border-bottom: 1px solid var(--fabsoft-border, #D2D2D7);
}
.ads-faq-section .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.ads-faq-section .faq-answer p {
    padding: 0 0 18px;
    font-size: 15px;
    color: var(--fabsoft-text-muted, #86868B);
    line-height: 1.6;
    text-align: left;
    margin: 0;
}
.ads-faq-section .faq-item.active .faq-answer {
    max-height: 500px;
}

/* ── FAQ faq-list wrapper (LLM omits ads- prefix from ads-faq-list) ── */
.ads-faq-section .faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── FAQ faq-icon span (LLM adds explicit icon; ads-faq-question::after already provides one) ── */
.ads-faq-question .faq-icon {
    display: none;
}

/* ── FAQ unwrapped layout (LLM omits ads-faq-item wrapper; button + answer are siblings) ── */
.ads-faq-section .faq-list > .ads-faq-question,
.ads-faq-section .faq-category > .ads-faq-question {
    border-bottom: 1px solid var(--fabsoft-border, #D2D2D7);
}
.ads-faq-section .ads-faq-question[aria-expanded="true"] + .faq-answer {
    max-height: 500px;
}

/* ── FAQ grid alias (LLM outputs ads-faq-grid instead of ads-faq-list) ── */
.ads-faq-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Role BEM --active modifiers (LLM uses ads-role-tab--active instead of .ads-role-tab.active) ── */
.ads-role-tab--active {
    background: var(--fabsoft-blue, #0071E3);
    border-color: var(--fabsoft-blue, #0071E3);
    color: #fff;
}
.ads-role-panel--active {
    display: block;
}

/* ── Steps compat ── */
.ads-steps-section .steps-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.ads-steps-section .step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    text-align: left;
}
.ads-steps-section .step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--fabsoft-blue, #0071E3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}
.ads-steps-section .step h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 6px !important;
    color: var(--fabsoft-text, #1D1D1F) !important;
    text-align: left !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
}
.ads-steps-section .step p {
    font-size: 15px;
    color: var(--fabsoft-text-muted, #86868B);
    line-height: 1.5;
    margin: 0 0 8px;
}
.ads-steps-section .step-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--fabsoft-blue, #0071E3);
    background: rgba(0,113,227,0.08);
    padding: 4px 12px;
    border-radius: 980px;
    display: inline-block;
}
.ads-steps-section .step-content {
    flex: 1;
}

/* ── step-card (LLM uses step-card instead of ads-step or step) ── */
.ads-steps-section .step-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    text-align: left;
}
.ads-steps-section .step-card h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 8px !important;
    color: var(--fabsoft-text, #1D1D1F) !important;
    text-align: left !important;
    line-height: 1.3 !important;
}
.ads-steps-section .step-card p {
    font-size: 15px;
    color: var(--fabsoft-text-muted, #86868B);
    line-height: 1.6;
    margin: 0 0 8px;
}

/* ── steps-cta (LLM uses bare steps-cta instead of ads-steps-cta) ── */
.ads-steps-section .steps-cta {
    text-align: center;
    margin-top: 32px;
}
.ads-steps-section .steps-cta p {
    font-size: 14px;
    color: var(--fabsoft-text-muted, #86868B);
    margin-top: 8px;
}
.ads-steps-section .steps-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 980px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    background: var(--fabsoft-blue, #0071E3);
    color: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}
.ads-steps-section .steps-cta .btn-primary:hover {
    background: var(--fabsoft-blue-hover, #0077ED);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,113,227,0.3);
    color: #fff;
    text-decoration: none;
}

/* ── Testimonials compat ── */
.ads-landing .testimonial-card,
.ads-landing .testimonial {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid var(--fabsoft-border, #D2D2D7);
    text-align: left;
}
.ads-landing .testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .ads-landing .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Nuclear h3 override inside .case-articleBody ── */
.ads-landing .case-articleBody h3 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.3;
}
.ads-landing .case-articleBody section > div > h2,
.ads-landing .case-articleBody .ads-features > div > h2,
.ads-landing .case-articleBody .ads-role-section > div > h2,
.ads-landing .case-articleBody .ads-faq-section > div > h2,
.ads-landing .case-articleBody .ads-steps-section > div > h2,
.ads-landing .case-articleBody .ads-comparison > div > h3 {
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 16px;
}

/* ── Responsive compat ── */
@media (max-width: 480px) {
    .ads-role-section .role-stats { grid-template-columns: 1fr; }
    .ads-role-section .role-panels { padding: 24px 16px; }
    .ads-steps-section .step { flex-direction: column; }
    .ads-steps-section .step-card { flex-direction: column; }
}


/* ============================================
   RESPONSIVE TWEAKS
   ============================================ */
@media (max-width: 480px) {
    .ads-hero { padding: 80px 16px 48px; }
    .ads-ctas { flex-direction: column; align-items: center; }
    .ads-btn { width: 100%; max-width: 320px; }
    .ads-features { padding: 48px 16px; }
    .ads-final-cta { padding: 48px 16px; }
    .ads-showcase { padding: 48px 16px; }
    .ads-role-section { padding: 48px 16px; }
    .ads-role-card { padding: 24px 16px; }
    .ads-role-card-header { flex-direction: column; }
    .ads-role-stats-row { grid-template-columns: 1fr; }
    .ads-comparison { padding: 48px 16px; }
    .ads-pricing-section { padding: 48px 16px; }
    .ads-faq-section { padding: 48px 16px; }
    .ads-steps-section { padding: 48px 16px; }
    .ads-security-section { padding: 48px 16px; }
    .ads-testimonials-section { padding: 48px 16px; }
}


/* ============================================
   LLM CLASS-NAME VARIANCE COMPAT LAYER
   The LLM generates plausible but slightly different
   class names than the canonical CSS. These rules
   ensure visual parity regardless of minor naming
   differences (missing base class, different suffix,
   missing BEM modifier, etc.).
   ============================================ */

/* ── Standalone button classes (LLM omits .ads-btn base) ── */
a.ads-btn-primary,
a.ads-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    font-size: 17px;
    font-weight: 500;
    border-radius: 980px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}
a.ads-btn-primary {
    background: var(--fabsoft-blue, #0071E3);
    color: #fff;
}
a.ads-btn-primary:hover {
    background: var(--fabsoft-blue-hover, #0077ED);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,113,227,0.3);
    color: #fff;
    text-decoration: none;
}
a.ads-btn-secondary {
    background: transparent;
    color: var(--fabsoft-blue, #0071E3);
    border: 2px solid var(--fabsoft-blue, #0071E3);
}
a.ads-btn-secondary:hover {
    background: var(--fabsoft-blue, #0071E3);
    color: #fff;
    text-decoration: none;
}

/* ── CTA wrapper variant ── */
.ads-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 32px;
}

/* ── Problem columns without BEM modifier ── */
.ads-problem-grid > .ads-problem-column:first-child {
    background: #FFF5F5;
    border: 1px solid #FED7D7;
}
.ads-problem-grid > .ads-problem-column:first-child h3 { color: #C53030; }
.ads-problem-grid > .ads-problem-column:last-child {
    background: #F0FFF4;
    border: 1px solid #C6F6D5;
}
.ads-problem-grid > .ads-problem-column:last-child h3 { color: #276749; }

/* ── Problem/solution item icons (emoji spans) ── */
.ads-problem-icon,
.ads-solution-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

/* ── Solution column (LLM variant of problem-column--with) ── */
.ads-solution-column {
    padding: 32px;
    border-radius: 16px;
    text-align: left;
    background: #F0FFF4;
    border: 1px solid #C6F6D5;
}
.ads-solution-column h3 { color: #276749; }

/* ── Problem/solution items ── */
.ads-problem-item,
.ads-solution-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    text-align: left;
}
.ads-problem-item:last-child,
.ads-solution-item:last-child {
    border-bottom: none;
}
.ads-problem-item h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
}
.ads-problem-item p,
.ads-solution-item p {
    font-size: 14px;
    line-height: 1.5;
    color: #4A5568;
    margin: 0;
}
.ads-solution-item h4 {
    font-size: 15px;
    font-weight: 600;
    color: #276749;
    margin: 0 0 4px;
}

/* ── Product badge (LLM variant of ads-hero-badge) ── */
.ads-product-badge {
    display: inline-block;
    background: var(--fabsoft-blue, #0071E3);
    color: #fff;
    padding: 8px 20px;
    border-radius: 980px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
}

/* ── Stats number (LLM uses ads-stat-number vs ads-stat-num) ── */
.ads-stat-number {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    color: var(--fabsoft-blue, #0071E3);
    display: block;
    line-height: 1.2;
}

/* ── Step number (LLM uses ads-step-number vs ads-step-num) ── */
.ads-step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--fabsoft-blue, #0071E3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Role stats (LLM uses ads-role-stats vs ads-role-stats-row) ── */
.ads-role-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
    padding: 20px;
    background: var(--fabsoft-bg, #F6F6F8);
    border-radius: 12px;
}

/* ── Role benefits (LLM uses ads-role-benefits vs ads-role-benefits-grid) ── */
.ads-role-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
    text-align: left;
}
@media (min-width: 640px) {
    .ads-role-benefits { grid-template-columns: 1fr 1fr; }
}

/* ── Benefit item (LLM uses ads-benefit vs ads-role-benefit) ── */
.ads-benefit {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 10px;
    transition: background 0.2s;
    text-align: left;
}
.ads-benefit:hover {
    background: var(--fabsoft-bg, #F6F6F8);
}

/* ── Testimonials section (LLM uses ads-testimonials vs ads-testimonials-section) ── */
.ads-testimonials {
    padding: 80px 24px;
    background: var(--fabsoft-bg, #F6F6F8);
    width: 100%;
}
.ads-testimonials-inner {
    max-width: 1000px;
    margin: 0 auto;
}
.ads-testimonials h2,
.ads-testimonials h3 {
    font-family: var(--fabsoft-font, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif);
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 48px;
    color: var(--fabsoft-text, #1D1D1F);
}

/* ── Testimonial card (within LLM's ads-testimonials section) ── */
.ads-testimonial {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid var(--fabsoft-border, #D2D2D7);
    text-align: left;
    display: flex;
    flex-direction: column;
}
.ads-testimonial blockquote {
    font-size: 15px;
    color: var(--fabsoft-text, #1D1D1F);
    line-height: 1.6;
    font-style: italic;
    margin: 0 0 16px;
    flex-grow: 1;
    border: none;
    padding: 0;
}
.ads-testimonial-author {
    font-size: 14px;
    font-weight: 600;
    color: var(--fabsoft-text, #1D1D1F);
}

/* ── Steps CTA (LLM adds a CTA block inside steps section) ── */
.ads-steps-cta {
    text-align: center;
    margin-top: 32px;
}
.ads-steps-cta p {
    font-size: 14px;
    color: var(--fabsoft-text-muted, #86868B);
    margin-top: 8px;
}

/* ── Role panel inner content (LLM uses flat .ads-role-panel) ── */
.ads-role-panel {
    text-align: left;
}
.ads-role-panels {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid var(--fabsoft-border, #D2D2D7);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.ads-role-panel h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--fabsoft-text, #1D1D1F) !important;
    margin: 0 0 12px !important;
    text-align: left !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
}
.ads-role-panel p {
    font-size: 15px;
    color: var(--fabsoft-text-muted, #86868B);
    line-height: 1.6;
    text-align: left;
}

/* ── Unprefixed role-* classes (LLM drops "ads-" prefix entirely) ── */
.ads-role-section .role-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.ads-role-section .role-tab {
    padding: 12px 24px;
    border: 2px solid var(--fabsoft-border, #D2D2D7);
    border-radius: 100px;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--fabsoft-text, #1D1D1F);
    transition: all 0.2s;
}
.ads-role-section .role-tab:hover { border-color: var(--fabsoft-blue, #0071E3); }
.ads-role-section .role-tab.active {
    background: var(--fabsoft-blue, #0071E3);
    color: #fff;
    border-color: var(--fabsoft-blue, #0071E3);
}
.ads-role-section .role-panels {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid var(--fabsoft-border, #D2D2D7);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.ads-role-section .role-panel { display: none; text-align: left; }
.ads-role-section .role-panel.active { display: block; }
.ads-role-section .role-panel h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--fabsoft-text, #1D1D1F) !important;
    margin: 0 0 12px !important;
    text-align: left !important;
}
.ads-role-section .role-panel p {
    font-size: 15px;
    color: var(--fabsoft-text-muted, #86868B);
    line-height: 1.6;
    text-align: left;
}
.ads-role-section .role-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}
.ads-role-section .role-stat { text-align: center; }
.ads-role-section .role-stat .stat-number {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
    color: var(--fabsoft-blue, #0071E3);
    display: block;
}
.ads-role-section .role-stat .stat-label,
.ads-role-section .role-stat small {
    font-size: 13px;
    color: var(--fabsoft-text-muted, #86868B);
    display: block;
    margin-top: 4px;
}
.ads-role-section .role-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 24px 0;
}
@media (min-width: 640px) {
    .ads-role-section .role-benefits { grid-template-columns: 1fr 1fr; }
}
.ads-role-section .benefit,
.ads-role-section .role-benefit {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--fabsoft-text, #1D1D1F);
    padding: 6px 0;
    text-align: left;
}
.ads-role-section .benefit:hover,
.ads-role-section .role-benefit:hover {
    background: var(--fabsoft-bg, #F6F6F8);
}
@media (max-width: 480px) {
    .ads-role-section .role-stats { grid-template-columns: 1fr; }
    .ads-role-section .role-panels { padding: 24px 16px; }
}

/* ── Security quote ── */
.ads-security-quote {
    text-align: center;
    font-style: italic;
    color: rgba(255,255,255,0.5);
    font-size: 15px;
    max-width: 700px;
    margin: 32px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* ── Feature title/text (LLM may use h4 inside feature-card) ── */
.ads-feature-card h4 {
    font-size: 17px;
    font-weight: 600;
    color: var(--fabsoft-text, #1D1D1F);
    margin: 0 0 8px;
}

/* ── Mobile responsive compat ── */
@media (max-width: 480px) {
    .ads-cta-buttons { flex-direction: column; align-items: center; }
    a.ads-btn-primary,
    a.ads-btn-secondary { width: 100%; max-width: 320px; text-align: center; }
    .ads-role-stats { grid-template-columns: 1fr; }
    .ads-role-panels { padding: 24px 16px; }
}


/* ============================================
   PROBLEM-COMPARISON / PROBLEM-SOLUTION COMPAT
   LLM sometimes generates non-ads-prefixed
   before/after comparison sections. These rules
   ensure they match the ads-problem-* design.
   ============================================ */
.problem-comparison,
.problem-solution-grid {
    padding: 0;
    background: #fff;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto -48px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .problem-comparison,
    .problem-solution-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.problem-comparison > h2,
.problem-solution-grid > h2 {
    grid-column: 1 / -1;
    font-family: var(--fabsoft-font, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif);
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 16px;
    color: var(--fabsoft-text, #1D1D1F);
}

.without-column,
.problem-comparison > div:first-of-type {
    padding: 32px;
    border-radius: 16px;
    background: #FFF5F5;
    border: 1px solid #FED7D7;
    text-align: left;
}
.with-column,
.problem-comparison > div:last-of-type {
    padding: 32px;
    border-radius: 16px;
    background: #F0FFF4;
    border: 1px solid #C6F6D5;
    text-align: left;
}

.without-column h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #C53030;
    display: flex;
    align-items: center;
    gap: 8px;
}
.without-column h3::before {
    content: '\26A0';
    font-size: 22px;
}
.with-column h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #276749;
    display: flex;
    align-items: center;
    gap: 8px;
}
.with-column h3::before {
    content: '\2713';
    font-size: 22px;
}

.problem-list,
.solution-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.problem-list li,
.solution-list li {
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.problem-list li::before {
    content: '\2717';
    color: #C53030;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}
.solution-list li::before {
    content: '\2713';
    color: #276749;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.problem-item,
.solution-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.problem-item:last-child,
.solution-item:last-child {
    border-bottom: none;
}
.problem-item h4 {
    font-size: 15px;
    font-weight: 600;
    color: #C53030;
    margin: 0 0 4px;
}
.problem-item p {
    font-size: 14px;
    line-height: 1.5;
    color: #4A5568;
    margin: 0;
}
.solution-item h4 {
    font-size: 15px;
    font-weight: 600;
    color: #276749;
    margin: 0 0 4px;
}
.solution-item p {
    font-size: 14px;
    line-height: 1.5;
    color: #4A5568;
    margin: 0;
}


/* ============================================
   ADS-COMPARISON-GRID / ADS-WITHOUT / ADS-WITH
   COMPAT LAYER  (LLM variant of problem section)
   ============================================ */
.ads-comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .ads-comparison-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.ads-without {
    padding: 32px;
    border-radius: 16px;
    background: #FFF5F5;
    border: 1px solid #FED7D7;
    text-align: left;
}
.ads-with {
    padding: 32px;
    border-radius: 16px;
    background: #F0FFF4;
    border: 1px solid #C6F6D5;
    text-align: left;
}
.ads-without h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #C53030;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ads-without h3::before {
    content: '\26A0';
    font-size: 22px;
}
.ads-with h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #276749;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ads-with h3::before {
    content: '\2713';
    font-size: 22px;
}
.ads-without ul,
.ads-with ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ads-without li,
.ads-with li {
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.ads-without li::before {
    content: '\2717';
    color: #C53030;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}
.ads-with li::before {
    content: '\2713';
    color: #276749;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}


/* ============================================
   PROBLEM-SIDE / SOLUTION-SIDE COMPAT LAYER
   ============================================ */
.problem-side {
    padding: 32px;
    border-radius: 16px;
    background: #FFF5F5;
    border: 1px solid #FED7D7;
    text-align: left;
}
.solution-side {
    padding: 32px;
    border-radius: 16px;
    background: #F0FFF4;
    border: 1px solid #C6F6D5;
    text-align: left;
}
.problem-side h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #C53030;
    display: flex;
    align-items: center;
    gap: 8px;
}
.problem-side h3::before {
    content: '\26A0';
    font-size: 22px;
}
.solution-side h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #276749;
    display: flex;
    align-items: center;
    gap: 8px;
}
.solution-side h3::before {
    content: '\2713';
    font-size: 22px;
}
.problem-side .problem-item h4 {
    font-size: 15px;
    font-weight: 600;
    color: #C53030;
    margin: 0 0 4px;
}
.solution-side .solution-item h4,
.solution-side .problem-item h4 {
    font-size: 15px;
    font-weight: 600;
    color: #276749;
    margin: 0 0 4px;
}

/* Also handle before-after and ads-before-after compat */
.ads-before-after {
    padding: 80px 24px;
    max-width: 1000px;
    margin: 0 auto;
}
.ads-before-after .ads-before,
.ads-before-after .ads-after {
    padding: 32px;
    border-radius: 16px;
    margin-bottom: 20px;
}
.ads-before-after .ads-before {
    background: #FFF5F5;
    border: 1px solid #FED7D7;
}
.ads-before-after .ads-after {
    background: #F0FFF4;
    border: 1px solid #C6F6D5;
}
.ads-before-after .ads-before h3 {
    color: #C53030;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
}
.ads-before-after .ads-after h3 {
    color: #276749;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
}
.ads-before-after li {
    padding: 6px 0;
    font-size: 15px;
    line-height: 1.5;
}

/* ads-problem-before / ads-problem-after — LLM variant of
   ads-problem-column--without / ads-problem-column--with */
.ads-problem-before,
.ads-problem-after {
    padding: 32px;
    border-radius: 16px;
    text-align: left;
}
.ads-problem-before {
    background: linear-gradient(135deg, #FFF5F5, #FFE8E8);
    border-left: 4px solid #FF3B30;
    box-shadow: 0 4px 20px rgba(255, 59, 48, 0.08);
}
.ads-problem-after {
    background: linear-gradient(135deg, #F0FFF4, #E0FFE8);
    border-left: 4px solid #34C759;
    box-shadow: 0 4px 20px rgba(52, 199, 89, 0.08);
}
.ads-problem-before h3 {
    color: #C53030;
    font-family: var(--fabsoft-font, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ads-problem-after h3 {
    color: #276749;
    font-family: var(--fabsoft-font, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ads-problem-before ul,
.ads-problem-after ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ads-problem-before ul li,
.ads-problem-after ul li {
    padding: 10px 0;
    font-size: 15px;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ads-problem-before ul li:last-child,
.ads-problem-after ul li:last-child {
    border-bottom: none;
}
.ads-problem-before ul li::before {
    content: '\2717';
    color: #C53030;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 16px;
}
.ads-problem-after ul li::before {
    content: '\2713';
    color: #276749;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 16px;
}

/* ── ads-hero-ctas (LLM variant of ads-ctas in hero) ── */
.ads-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
}

/* ── ads-hero-trust (LLM variant of trust badges in hero) ── */
.ads-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 20px;
    font-size: 14px;
    color: #86868B;
}

/* ── ads-stats-grid (LLM variant nested inside ads-stats-inner) ── */
.ads-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    grid-column: 1 / -1;
    width: 100%;
}
@media (min-width: 640px) {
    .ads-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.ads-stats-inner:has(.ads-stats-grid) {
    display: block;
}

/* ── ads-stat plain-text variant (LLM omits ads-stat-num / ads-stat-label split) ── */
.ads-stats-bar .ads-stat {
    text-align: center;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    color: var(--fabsoft-blue, #0071E3);
    padding: 8px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    line-height: 1.3;
    position: relative;
}

/* ── Non-canonical stat classes (LLM uses stat-item, stats-container, stats-row) ── */
.ads-stats-bar .stats-container,
.ads-stats-bar .stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
    max-width: 960px;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .ads-stats-bar .stats-container,
    .ads-stats-bar .stats-row { grid-template-columns: repeat(4, 1fr); }
    .ads-stats-bar .stats-container > * + *,
    .ads-stats-bar .stats-row > * + * { border-left: 1px solid rgba(0, 113, 227, 0.15); }
}
.ads-stats-bar .stat-item,
.ads-stats-bar .stat {
    text-align: center;
    padding: 8px 0;
    background: transparent;
    border-radius: 0;
    border: none;
    position: relative;
}
.ads-stats-bar .stat-item .stat-number,
.ads-stats-bar .stat .stat-number {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    color: var(--fabsoft-blue, #0071E3);
    display: block;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.ads-stats-bar .stat-item .stat-label,
.ads-stats-bar .stat .stat-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--fabsoft-text-muted, #86868B);
    margin-top: 6px;
    display: block;
    letter-spacing: 0.01em;
}
/* ── bare cta-buttons (LLM omits ads- prefix from ads-ctas) ── */
.ads-hero .cta-buttons,
.ads-final-cta .cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 32px;
}

/* ── bare btn-primary / btn-secondary (LLM omits ads-btn base class entirely) ── */
.ads-hero .btn-primary,
.ads-hero .btn-secondary,
.ads-final-cta .btn-primary,
.ads-final-cta .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 980px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}
.ads-hero .btn-primary,
.ads-final-cta .btn-primary {
    background: var(--fabsoft-blue, #0071E3);
    color: #fff;
}
.ads-hero .btn-primary:hover,
.ads-final-cta .btn-primary:hover {
    background: var(--fabsoft-blue-hover, #0077ED);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,113,227,0.3);
    color: #fff;
    text-decoration: none;
}
.ads-hero .btn-secondary,
.ads-final-cta .btn-secondary {
    background: transparent;
    color: var(--fabsoft-blue, #0071E3);
    border: 2px solid var(--fabsoft-blue, #0071E3);
}
.ads-hero .btn-secondary:hover,
.ads-final-cta .btn-secondary:hover {
    background: var(--fabsoft-blue, #0071E3);
    color: #fff;
    text-decoration: none;
}

/* ── bare trust-badges (LLM omits ads- prefix from ads-trust-badges) ── */
.ads-hero .trust-badges,
.ads-final-cta .trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 20px;
    font-size: 14px;
    color: #86868B;
}

/* ── ads-cta-primary / ads-cta-secondary (LLM invents BEM variant instead of ads-btn) ── */
.ads-cta-primary,
.ads-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 980px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}
.ads-cta-primary {
    background: var(--fabsoft-blue, #0071E3);
    color: #fff;
}
.ads-cta-primary:hover {
    background: var(--fabsoft-blue-hover, #0077ED);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,113,227,0.3);
    color: #fff;
    text-decoration: none;
}
.ads-cta-secondary {
    background: transparent;
    color: var(--fabsoft-blue, #0071E3);
    border: 2px solid var(--fabsoft-blue, #0071E3);
}
.ads-cta-secondary:hover {
    background: var(--fabsoft-blue, #0071E3);
    color: #fff;
    text-decoration: none;
}

/* ── Mobile responsive for bare hero classes ── */
@media (max-width: 480px) {
    .ads-hero .cta-buttons,
    .ads-final-cta .cta-buttons { flex-direction: column; align-items: center; }
    .ads-hero .btn-primary,
    .ads-hero .btn-secondary,
    .ads-final-cta .btn-primary,
    .ads-final-cta .btn-secondary,
    .ads-cta-primary,
    .ads-cta-secondary { width: 100%; max-width: 320px; text-align: center; }
}

.ads-problem-pain {
    padding: 32px;
    border-radius: 16px;
    background: #FFF5F5;
    border: 1px solid #FED7D7;
}
.ads-problem-pain h3,
.ads-problem-pain h4 {
    color: #C53030;
    font-weight: 600;
    margin-bottom: 12px;
}
.ads-problem-pain li {
    padding: 6px 0;
    font-size: 15px;
    line-height: 1.5;
}


/* ADR-0223 chassis: Without/With + trust stats stay side-by-side (not stacked). */
.paid-ad-body .fabsoft-problem-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
.paid-ad-body .fabsoft-product-trust-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 720px) {
.fabsoft-problem-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.fabsoft-product-trust-stats { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.fabsoft-testimonials-metrics { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.fabsoft-pricing-tiers { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.fabsoft-getting-started-steps { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.fabsoft-usecases-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.fabsoft-role-benefits-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.fabsoft-pricing-explainer-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.fabsoft-pricing-addon-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.fabsoft-security-container { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.fabsoft-security-badges { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-column: auto; grid-row: auto; }
.fabsoft-security-features { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-column: auto; grid-row: auto; }
.fabsoft-security-header { grid-column: auto; grid-row: auto; }
.fabsoft-security-quote { grid-column: auto; grid-row: auto; }
.fabsoft-role-tabs { flex-wrap: wrap !important; }
.fabsoft-video-carousel-section { max-width: 100% !important; width: 100% !important; overflow-x: hidden !important; }
}