/* ============================================================
   INDUSTRY PAGES — FULL RESPONSIVE STYLESHEET
   Covers: Legal, Accounting, HR, SaaS, Healthcare,
           Retail, Logistics, Manufacturing
   Breakpoints:
     Mobile  S : max-width 575px
     Mobile  L : max-width 767px
     Tablet    : 768px – 991px
     Laptop    : 992px – 1199px
     Desktop   : 1200px+
   ============================================================ */

/* ============================================================
   GLOBAL BASE — all industry pages
   ============================================================ */
.legal-hero-section,
.accounting-hero-section,
.hr-hero-section,
.saas-hero,
.hls-hero,
.retail-hero,
.log-hero,
.mfg-hero {
    overflow: hidden;
}

/* Fix for sticky font render on gradient text */
.hero-title .gradient-word,
.hero-title .gw,
.section-title .accent,
.impact-number,
.stat-num,
.acc-stat-num {
    background-clip: text;
    -webkit-background-clip: text;
}

/* ── Desktop ≥1200px ─────────────────────────────────────── */
@media (min-width: 1200px) {
    .hero-title {
        font-size: clamp(2.8rem, 4vw, 4.2rem);
    }

    .section-title {
        font-size: 2.6rem;
    }

    .overview-section,
    .features-section,
    .table-section,
    .interactive-section,
    .benefits-section {
        padding: 100px 0;
    }

    .cta-section {
        padding: 120px 0;
    }
}

/* ── Laptop 992px–1199px ─────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-title {
        font-size: clamp(2.2rem, 4vw, 3.2rem);
    }

    .hero-subtitle {
        font-size: 1.05rem;
    }

    .legal-hero-section,
    .accounting-hero-section,
    .hr-hero-section,
    .saas-hero,
    .hls-hero,
    .retail-hero,
    .log-hero,
    .mfg-hero {
        padding: 110px 0 70px;
    }

    .overview-section,
    .features-section,
    .table-section,
    .interactive-section,
    .benefits-section {
        padding: 80px 0;
    }

    .cta-section {
        padding: 80px 0;
    }

    .section-title {
        font-size: 2.2rem;
    }

    .legal-dashboard,
    .accounting-dashboard,
    .hr-dashboard {
        padding: 20px;
    }

    .capability-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-card,
    .module-card {
        padding: 24px 22px;
    }

    .overview-highlight-card {
        padding: 24px;
    }

    .impact-card {
        padding: 24px;
    }

    .impact-number {
        font-size: 2.2rem;
    }

    .benefit-item {
        padding: 20px;
    }
}

/* ============================================================
   TABLET — 768px–991px
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {

    /* ── Hero Sections ────────────────────────────────────── */
    .legal-hero-section,
    .accounting-hero-section,
    .hr-hero-section,
    .saas-hero,
    .hls-hero,
    .retail-hero,
    .log-hero,
    .mfg-hero {
        min-height: auto;
        padding: 110px 0 56px;
    }

    /* Hide right dashboard column on tablet */
    .legal-hero-section .row > .col-lg-6:last-child,
    .accounting-hero-section .row > .col-lg-6:last-child,
    .hr-hero-section .row > .col-lg-6:last-child,
    .saas-hero .row > .col-lg-6:last-child,
    .hls-hero .row > .col-lg-6:last-child,
    .retail-hero .row > .col-lg-6:last-child,
    .log-hero .row > .col-lg-6:last-child,
    .mfg-hero .row > .col-lg-6:last-child {
        display: none !important;
    }

    /* Hero left full width + centred */
    .legal-hero-section .row > .col-lg-6:first-child,
    .accounting-hero-section .row > .col-lg-6:first-child,
    .hr-hero-section .row > .col-lg-6:first-child,
    .saas-hero .row > .col-lg-6:first-child,
    .hls-hero .row > .col-lg-6:first-child,
    .retail-hero .row > .col-lg-6:first-child,
    .log-hero .row > .col-lg-6:first-child,
    .mfg-hero .row > .col-lg-6:first-child {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    /* ── Hero Typography ─────────────────────────────────── */
    .hero-title {
        font-size: clamp(2rem, 4.5vw, 2.8rem);
        text-align: center;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1rem;
        text-align: center;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-badge {
        margin-bottom: 20px;
    }

    /* ── Hero interaction elements ───────────────────────── */
    .hero-highlights {
        grid-template-columns: 1fr 1fr;
        justify-content: center;
    }

    .hero-buttons,
    .hero-cta-group {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .hero-stats-bar {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px 32px;
        margin-top: 28px;
    }

    /* ── Section Typography ──────────────────────────────── */
    .section-title {
        font-size: clamp(1.75rem, 3.5vw, 2.2rem);
    }

    .section-desc {
        font-size: 0.95rem;
    }

    /* ── Section Spacing ─────────────────────────────────── */
    .overview-section,
    .features-section,
    .table-section,
    .interactive-section,
    .benefits-section {
        padding: 70px 0;
    }

    .cta-section {
        padding: 70px 0;
    }

    .industry-detail,
    .industry-detail1,
    .industry-detail.alt {
        padding: 60px 0;
    }

    /* ── Page Header ────────────────────────────────────────── */
    .page-header {
        padding: 110px 0 50px;
    }

    .page-header h1 {
        font-size: clamp(1.8rem, 4vw, 2.5rem);
    }

    .page-header p {
        font-size: 0.95rem;
        max-width: 600px;
        margin: 0 auto;
    }

    /* ── Industry Section Headings ────────────────────────── */
    .industry-detail h2 {
        font-size: clamp(1.5rem, 3.5vw, 2rem);
        margin-bottom: 12px;
    }

    .industry-detail .lead {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    /* ── Industry Icon ────────────────────────────────────── */
    .industry-icon-lg {
        width: 72px;
        height: 72px;
        font-size: 1.75rem;
        margin-bottom: 18px;
    }

    /* ── Industry Benefits ────────────────────────────────── */
    .industry-benefits {
        margin-top: 24px;
    }

    .benefit-item {
        flex-direction: column;
        gap: 12px;
        padding: 14px 0;
    }

    .benefit-item i {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }

    .benefit-item h4 {
        font-size: 0.95rem;
    }

    .benefit-item p {
        font-size: 0.85rem;
    }

    /* ── Industry Stats Card ───────────────────────────────── */
    .industry-stats-card {
        padding: 24px;
        margin-top: 24px;
    }

    .industry-stats-card h3 {
        font-size: 1.1rem;
        margin-bottom: 18px;
    }

    /* ── Stats Grid ────────────────────────────────────────── */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stat-box {
        padding: 16px 12px;
    }

    .stat-num {
        font-size: 1.75rem;
    }

    .stat-text {
        font-size: 0.75rem;
    }

    /* ── Section CTA ────────────────────────────────────────── */
    .section-cta {
        text-align: center;
        margin-top: 48px;
    }

    .section-cta h3 {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }

    .section-cta p {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

    .section-cta .btn-primary-custom {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}

    .page-content {
        padding: 0 0 50px;
    }

    /* ── Cards ───────────────────────────────────────────── */
    .feature-card {
        padding: 24px;
    }

    .module-card {
        padding: 28px;
    }

    .overview-highlight-card {
        padding: 24px;
    }

    .impact-card {
        padding: 24px;
    }

    .impact-number {
        font-size: 2rem;
    }

    .benefit-item {
        padding: 18px;
        gap: 14px;
    }

    .capability-card {
        padding: 22px;
    }

    .capability-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* ── Tables ──────────────────────────────────────────── */
    .styled-table-wrap,
    .legal-table-container,
    .accounting-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .styled-table,
    .legal-table,
    .accounting-table {
        min-width: 640px;
        font-size: 0.88rem;
    }

    .styled-table th,
    .styled-table td {
        padding: 14px 16px;
    }

    /* ── Workflow ─────────────────────────────────────────── */
    .workflow-container {
        display: none !important;
    }

    .legal-pipeline-mobile,
    .accounting-pipeline-mobile,
    .hr-pipeline-mobile {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        margin: 24px 0;
    }

    /* ── CTA ─────────────────────────────────────────────── */
    .cta-title {
        font-size: clamp(1.75rem, 3.5vw, 2.4rem);
    }

    .cta-btn-group {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .cta-inner {
        text-align: center;
        padding: 48px 32px;
    }

    /* ── Stat boxes (legal/accounting/hr) ────────────────── */
    .stat-num,
    .acc-stat-num {
        font-size: 2rem;
    }

    /* ── Intro cards ─────────────────────────────────────── */
    .intro-card,
    .intro-card-acc {
        padding: 32px !important;
    }

    /* ── Sandbox ─────────────────────────────────────────── */
    .sandbox-container {
        padding: 24px;
    }

    .upload-zone {
        padding: 32px 20px;
    }

    /* ── Section CTA (legal/acc/hr) ──────────────────────── */
    .section-cta {
        text-align: center;
    }
}

/* ============================================================
   MOBILE LARGE — max-width 767px
   ============================================================ */
@media (max-width: 767px) {

    /* ── Hero Sections ────────────────────────────────────── */
    .legal-hero-section,
    .accounting-hero-section,
    .hr-hero-section,
    .saas-hero,
    .hls-hero,
    .retail-hero,
    .log-hero,
    .mfg-hero {
        min-height: auto;
        padding: 100px 0 48px;
    }

    /* ── HIDE hero right column (dashboard/visual) ───────── */
    .legal-hero-section .row > .col-lg-6:last-child,
    .accounting-hero-section .row > .col-lg-6:last-child,
    .hr-hero-section .row > .col-lg-6:last-child,
    .saas-hero .row > .col-lg-6:last-child,
    .hls-hero .row > .col-lg-6:last-child,
    .retail-hero .row > .col-lg-6:last-child,
    .log-hero .row > .col-lg-6:last-child,
    .mfg-hero .row > .col-lg-6:last-child {
        display: none !important;
    }

    /* ── Hero left column full width ─────────────────────── */
    .legal-hero-section .row > .col-lg-6:first-child,
    .accounting-hero-section .row > .col-lg-6:first-child,
    .hr-hero-section .row > .col-lg-6:first-child,
    .saas-hero .row > .col-lg-6:first-child,
    .hls-hero .row > .col-lg-6:first-child,
    .retail-hero .row > .col-lg-6:first-child,
    .log-hero .row > .col-lg-6:first-child,
    .mfg-hero .row > .col-lg-6:first-child {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    /* ── Hero Badge ──────────────────────────────────────── */
    .hero-badge {
        font-size: 0.78rem;
        padding: 6px 14px;
        margin-bottom: 18px;
    }

    /* ── Hero Title ──────────────────────────────────────── */
    .hero-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
        line-height: 1.2;
        margin-bottom: 14px;
        text-align: center;
    }

    .hero-title br {
        display: none;
    }

    /* ── Hero Subtitle ───────────────────────────────────── */
    .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.7;
        text-align: center;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 24px;
    }

    /* ── Hero Highlights ─────────────────────────────────── */
    .hero-highlights {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: left;
        margin-bottom: 20px;
    }

    .highlight-item {
        font-size: 0.875rem;
    }

    /* ── Hero CTA Buttons ────────────────────────────────── */
    .hero-buttons,
    .hero-cta-group {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-buttons .btn,
    .hero-cta-group .btn-primary-custom,
    .hero-cta-group .btn-outline-custom,
    .hero-cta-group .btn-p,
    .hero-cta-group .btn-o {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 13px 20px;
        font-size: 0.95rem;
    }

    /* ── Hero Stats Bar ──────────────────────────────────── */
    .hero-stats-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 20px;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--border-subtle);
    }

    .hero-stat-item,
    .hero-stats-bar > div {
        text-align: center;
        min-width: 80px;
    }

    .hero-stat-value,
    .hsv {
        font-size: 1.4rem;
        font-weight: 700;
    }

    .hero-stat-label,
    .hsl {
        font-size: 0.72rem;
    }

    /* ── Section Headings ────────────────────────────────── */
    .section-title,
    h2.section-title {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
        line-height: 1.25;
    }

    .section-label {
        font-size: 0.75rem;
        padding: 5px 12px;
        margin-bottom: 14px;
    }

    .section-desc {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    /* ── Section Spacing ─────────────────────────────────── */
    .overview-section,
    .features-section,
    .table-section,
    .interactive-section,
    .benefits-section {
        padding: 52px 0;
    }

    .cta-section {
        padding: 52px 0;
    }

    .industry-detail,
    .industry-detail1,
    .industry-detail.alt {
        padding: 48px 0;
    }

    /* ── Page Header ────────────────────────────────────────── */
    .page-header {
        padding: 100px 0 44px;
    }

    .page-header h1 {
        font-size: clamp(1.7rem, 6vw, 2.2rem);
        margin-bottom: 8px;
    }

    .page-header p {
        font-size: 0.9rem;
        line-height: 1.6;
        max-width: 100%;
    }

    /* ── Industry Section Text ─────────────────────────────── */
    .industry-detail h2 {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
        margin-bottom: 10px;
    }

    .industry-detail .lead {
        font-size: 0.95rem;
        line-height: 1.65;
        margin-bottom: 18px;
    }

    .industry-detail > .container > .row > .col-lg-6:first-child p:nth-child(4) {
        font-size: 0.88rem;
        line-height: 1.65;
    }

    /* ── Industry Icon ────────────────────────────────────── */
    .industry-icon-lg {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-bottom: 16px;
    }

    /* ── Industry Benefits ────────────────────────────────── */
    .industry-benefits {
        margin-top: 20px;
    }

    .benefit-item {
        flex-direction: row;
        gap: 14px;
        padding: 14px 0;
    }

    .benefit-item:hover {
        transform: none;
    }

    .benefit-item i {
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
        flex-shrink: 0;
    }

    .benefit-item h4 {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }

    .benefit-item p {
        font-size: 0.82rem;
    }

    /* ── Industry Stats Card ───────────────────────────────── */
    .industry-stats-card {
        padding: 20px;
        margin-top: 20px;
    }

    .industry-stats-card h3 {
        font-size: 1rem;
        margin-bottom: 16px;
    }

    /* ── Stats Grid ────────────────────────────────────────── */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .stat-box {
        padding: 14px 10px;
    }

    .stat-num {
        font-size: 1.6rem;
    }

    .stat-text {
        font-size: 0.72rem;
    }

    /* ── Section CTA ────────────────────────────────────────── */
    .section-cta {
        text-align: center;
        padding: 36px 16px;
        margin-top: 48px;
    }

    .section-cta h3 {
        font-size: 1.25rem;
        margin-bottom: 8px;
    }

    .section-cta p {
        font-size: 0.875rem;
        margin-bottom: 16px;
    }

    .section-cta .btn-primary-custom {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        padding: 13px 20px;
        font-size: 0.9rem;
    }

    .section-cta .btn-primary-custom i {
        display: none;
    }

    /* ── Alternative rows (order-lg-2 / order-lg-1) ─────────── */
    .industry-detail.alt .row {
        flex-direction: column;
    }

    .industry-detail.alt .order-lg-2,
    .industry-detail.alt .order-lg-1 {
        order: unset;
    }

    .page-content {
        padding: 0 0 40px;
    }

    /* ── Overview Highlight Cards ────────────────────────── */
    .overview-highlight-card {
        padding: 20px 18px;
        border-radius: 16px;
    }

    .overview-card-title {
        font-size: 0.95rem;
    }

    .overview-card-desc {
        font-size: 0.85rem;
    }

    .overview-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    /* ── Feature Cards ───────────────────────────────────── */
    .feature-card {
        padding: 22px 18px;
    }

    .feature-card h4 {
        font-size: 1rem;
    }

    .feature-card p {
        font-size: 0.875rem;
    }

    .feature-icon {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
        margin-bottom: 14px;
    }

    .feature-tag {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    /* ── Tables ──────────────────────────────────────────── */
    .styled-table-wrap,
    .legal-table-container,
    .accounting-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }

    .styled-table,
    .legal-table,
    .accounting-table {
        min-width: 560px;
        font-size: 0.83rem;
    }

    .styled-table th,
    .styled-table td {
        padding: 12px 14px;
        white-space: nowrap;
    }

    .legal-table th,
    .legal-table td,
    .accounting-table th,
    .accounting-table td {
        padding: 12px 12px;
        font-size: 0.85rem;
    }

    /* ── Module Cards (SaaS interactive) ─────────────────── */
    .module-card {
        padding: 24px 20px;
    }

    .module-title {
        font-size: 1rem;
    }

    .module-desc {
        font-size: 0.85rem;
        margin-bottom: 18px;
    }

    .module-icon {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }

    .roi-result-value {
        font-size: 1.7rem;
    }

    /* ── Churn list items ─────────────────────────────────── */
    .churn-item {
        padding: 10px 0;
        gap: 10px;
    }

    .churn-company {
        font-size: 0.85rem;
    }

    .churn-detail {
        font-size: 0.75rem;
    }

    .churn-risk {
        font-size: 0.72rem;
        padding: 3px 8px;
        white-space: nowrap;
    }

    /* ── Revenue Metrics ─────────────────────────────────── */
    .rev-value {
        font-size: 0.95rem;
    }

    .rev-label {
        font-size: 0.78rem;
    }

    /* ── Benefit Items ───────────────────────────────────── */
    .benefit-item {
        padding: 16px 14px;
        gap: 12px;
        margin-bottom: 12px;
    }

    .benefit-item:hover {
        transform: none;
    }

    .benefit-icon-wrap {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .benefit-content h5 {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }

    .benefit-content p {
        font-size: 0.83rem;
    }

    /* ── Impact Cards ────────────────────────────────────── */
    .impact-card {
        padding: 22px 16px;
        border-radius: 16px;
    }

    .impact-number {
        font-size: 1.8rem;
        margin-bottom: 6px;
    }

    .impact-label {
        font-size: 0.8rem;
    }

    /* ── CTA Section ─────────────────────────────────────── */
    .cta-inner {
        padding: 40px 20px;
        text-align: center;
    }

    .cta-title {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
        margin-bottom: 14px;
    }

    .cta-desc {
        font-size: 0.9rem;
        margin-bottom: 24px;
    }

    .cta-btn-group {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cta-btn-group a,
    .cta-btn-group .btn-primary-custom,
    .cta-btn-group .btn-outline-custom {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
    }

    /* ── Workflow Animation ──────────────────────────────── */
    .workflow-container {
        display: none !important;
    }

    .legal-pipeline-mobile,
    .accounting-pipeline-mobile,
    .hr-pipeline-mobile {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 14px;
        margin: 20px 0;
    }

    .pipeline-step-legal,
    .pipeline-step-acc {
        flex: 0 0 calc(50% - 8px);
        min-width: 0;
    }

    .pipeline-step-legal .step-circle,
    .pipeline-step-acc .step-circle-acc {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .step-label {
        font-size: 0.78rem;
    }

    /* ── Section CTA (legal/acc/hr pages) ────────────────── */
    .section-cta {
        text-align: center;
        padding: 40px 20px;
        margin-top: 60px !important;
    }

    .section-cta h3 {
        font-size: 1.35rem;
        margin-bottom: 10px;
    }

    .section-cta p {
        font-size: 0.9rem;
        margin-bottom: 18px;
    }

    .section-cta .btn-primary-custom {
        width: 100%;
        max-width: 360px;
        justify-content: center;
    }

    /* ── Capability Grid ─────────────────────────────────── */
    .capability-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 24px;
    }

    .capability-card {
        padding: 20px 16px;
    }

    .capability-card h3 {
        font-size: 1rem;
    }

    /* ── Agent Cards (accounting) ────────────────────────── */
    .agent-card {
        padding: 18px;
    }

    .agent-card h3 {
        font-size: 1rem;
    }

    .agent-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    /* ── Stat Boxes (legal/acc/hr) ───────────────────────── */
    .stat-box,
    .acc-stat-box {
        padding: 16px 12px;
    }

    .stat-num,
    .acc-stat-num {
        font-size: 1.8rem;
    }

    .stat-text,
    .acc-stat-text {
        font-size: 0.8rem;
    }

    /* ── Intro Cards ─────────────────────────────────────── */
    .intro-card,
    .intro-card-acc {
        padding: 24px !important;
        border-radius: 16px;
    }

    .intro-card h2,
    .intro-card-acc h2 {
        font-size: 1.4rem;
    }

    .intro-card .lead,
    .intro-card-acc .lead {
        font-size: 0.9rem;
    }

    .intro-box,
    .acc-intro-box {
        padding: 16px;
        font-size: 0.875rem;
    }

    .acc-feature-box {
        padding: 12px 14px;
        font-size: 0.875rem;
    }

    /* ── Upload Zone (legal sandbox) ─────────────────────── */
    .sandbox-container {
        padding: 20px;
    }

    .upload-zone {
        padding: 28px 16px;
    }

    .upload-icon {
        width: 58px;
        height: 58px;
        font-size: 1.4rem;
    }

    .upload-zone h5 {
        font-size: 0.95rem;
    }

    .heat-map-container {
        grid-template-columns: repeat(5, 1fr);
    }

    /* ── Feature Cards (legal/acc/hr) ────────────────────── */
    .feature-card-legal,
    .feature-card-acc {
        padding: 18px;
    }

    .feature-card-legal h4,
    .feature-card-acc h4 {
        font-size: 0.95rem;
    }

    .feature-icon-legal,
    .feature-icon-acc {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }

    /* ── Floating icons — hide on mobile ─────────────────── */
    .floating-icon,
    .floating-acc-icon {
        display: none !important;
    }

    /* ── Glow orbs — scale down ──────────────────────────── */
    .legal-glow,
    .accounting-glow,
    .hr-glow,
    .saas-glow-orb,
    .hls-orb,
    .log-orb {
        width: 250px !important;
        height: 250px !important;
    }

    /* ── Pipeline rows (SaaS dashboard area) ─────────────── */
    .pipeline-row {
        padding: 10px 12px;
        font-size: 0.82rem;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .pipeline-row-text {
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }

    /* ── Industry detail sections ────────────────────────── */
    .industry-detail .row.g-5,
    .industry-detail1 .row.g-5 {
        --bs-gutter-y: 1.5rem;
    }

    /* ── h2 general ──────────────────────────────────────── */
    h2 {
        font-size: clamp(1.4rem, 5.5vw, 2rem);
    }
}

/* ============================================================
   MOBILE SMALL — max-width 575px
   ============================================================ */
@media (max-width: 575px) {

    /* Containers */
    .legal-hero-section .container,
    .accounting-hero-section .container,
    .hr-hero-section .container,
    .saas-hero .container,
    .hls-hero .container,
    .retail-hero .container,
    .log-hero .container,
    .mfg-hero .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* ── Hero ─────────────────────────────────────────────── */
    .legal-hero-section,
    .accounting-hero-section,
    .hr-hero-section,
    .saas-hero,
    .hls-hero,
    .retail-hero,
    .log-hero,
    .mfg-hero {
        padding: 88px 0 40px;
    }

    .hero-title {
        font-size: clamp(1.55rem, 8vw, 2.2rem);
    }

    .hero-subtitle {
        font-size: 0.875rem;
        margin-bottom: 18px;
    }

    .hero-badge {
        font-size: 0.72rem;
        padding: 5px 11px;
        margin-bottom: 14px;
    }

    .hero-stat-value,
    .hsv {
        font-size: 1.25rem;
    }

    .hero-stat-label,
    .hsl {
        font-size: 0.68rem;
    }

    /* ── Section headings ─────────────────────────────────── */
    .section-title,
    h2.section-title {
        font-size: clamp(1.35rem, 6.5vw, 1.75rem);
    }

    h2 {
        font-size: clamp(1.3rem, 6vw, 1.75rem);
    }

    /* ── Sections spacing ─────────────────────────────────── */
    .overview-section,
    .features-section,
    .table-section,
    .interactive-section,
    .benefits-section {
        padding: 40px 0;
    }

    .cta-section {
        padding: 44px 0;
    }

    /* ── Overview highlight cards ─────────────────────────── */
    .overview-highlight-card {
        padding: 16px 14px;
    }

    /* ── Feature cards ────────────────────────────────────── */
    .feature-card {
        padding: 18px 16px;
    }

    .feature-icon {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    /* ── Module cards ─────────────────────────────────────── */
    .module-card {
        padding: 20px 16px;
    }

    .roi-result-value {
        font-size: 1.5rem;
    }

    /* ── Table ────────────────────────────────────────────── */
    .styled-table {
        font-size: 0.78rem;
    }

    .styled-table th,
    .styled-table td {
        padding: 10px 10px;
    }

    /* ── Benefit items ────────────────────────────────────── */
    .benefit-item {
        padding: 14px 12px;
        gap: 10px;
    }

    .benefit-content h5 {
        font-size: 0.85rem;
    }

    .benefit-content p {
        font-size: 0.8rem;
    }

    /* ── Impact cards ─────────────────────────────────────── */
    .impact-card {
        padding: 18px 12px;
    }

    .impact-number {
        font-size: 1.6rem;
    }

    .impact-label {
        font-size: 0.75rem;
    }

    /* ── CTA ──────────────────────────────────────────────── */
    .cta-inner {
        padding: 32px 14px;
    }

    .cta-title {
        font-size: clamp(1.3rem, 6.5vw, 1.75rem);
    }

    /* ── Capability grid ──────────────────────────────────── */
    .capability-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* ── Stat boxes ───────────────────────────────────────── */
    .stat-num,
    .acc-stat-num {
        font-size: 1.6rem;
    }

    /* ── Pipeline steps ───────────────────────────────────── */
    .pipeline-step-legal,
    .pipeline-step-acc {
        flex: 0 0 calc(50% - 6px);
    }

    .pipeline-step-legal .step-circle,
    .pipeline-step-acc .step-circle-acc {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    /* ── Intro card ───────────────────────────────────────── */
    .intro-card,
    .intro-card-acc {
        padding: 18px !important;
    }

    /* ── Heat map ─────────────────────────────────────────── */
    .heat-map-container {
        grid-template-columns: repeat(4, 1fr);
    }

    /* ── Feature list ─────────────────────────────────────── */
    .feature-list li {
        font-size: 0.85rem;
        padding: 10px 0;
    }

    /* ── Section CTA ──────────────────────────────────────── */
    .section-cta {
        padding: 32px 14px;
        margin-top: 44px !important;
    }

    .section-cta h3 {
        font-size: 1.2rem;
    }

    /* ── Agent cards ──────────────────────────────────────── */
    .agent-card {
        padding: 14px;
    }

    .agent-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* ── Industry icon ────────────────────────────────────── */
    .industry-icon-lg {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
        margin-bottom: 12px;
    }

    /* ── Row gutters ──────────────────────────────────────── */
    .industry-detail .row.g-5,
    .industry-detail1 .row.g-5,
    .overview-section .row.g-5,
    .interactive-section .row.g-5 {
        --bs-gutter-y: 1.25rem;
        --bs-gutter-x: 0.75rem;
    }

    /* ── Page Header ────────────────────────────────────────── */
    .page-header {
        padding: 90px 0 36px;
    }

    .page-header h1 {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    .page-header p {
        font-size: 0.875rem;
    }

    /* ── Industry Section ────────────────────────────────────── */
    .industry-detail,
    .industry-detail1,
    .industry-detail.alt {
        padding: 40px 0;
    }

    .industry-detail h2 {
        font-size: clamp(1.3rem, 5.5vw, 1.6rem);
    }

    .industry-detail .lead {
        font-size: 0.9rem;
    }

    .industry-detail > .container > .row > .col-lg-6:first-child p:nth-child(4) {
        font-size: 0.83rem;
    }

    /* ── Industry Icon ────────────────────────────────────── */
    .industry-icon-lg {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
        margin-bottom: 14px;
    }

    /* ── Industry Benefits ────────────────────────────────── */
    .industry-benefits {
        margin-top: 16px;
    }

    .benefit-item {
        flex-direction: row;
        gap: 12px;
        padding: 12px 0;
    }

    .benefit-item i {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .benefit-item h4 {
        font-size: 0.875rem;
        margin-bottom: 2px;
    }

    .benefit-item p {
        font-size: 0.8rem;
    }

    /* ── Industry Stats Card ───────────────────────────────── */
    .industry-stats-card {
        padding: 18px 14px;
        margin-top: 16px;
    }

    .industry-stats-card h3 {
        font-size: 0.95rem;
        margin-bottom: 14px;
    }

    /* ── Stats Grid ────────────────────────────────────────── */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .stat-box {
        padding: 12px 8px;
    }

    .stat-num {
        font-size: 1.4rem;
    }

    .stat-text {
        font-size: 0.7rem;
    }

    /* ── Section CTA ────────────────────────────────────────── */
    .section-cta {
        padding: 28px 14px;
        margin-top: 36px;
    }

    .section-cta h3 {
        font-size: 1.15rem;
    }

    .section-cta p {
        font-size: 0.85rem;
        margin-bottom: 14px;
    }

    .section-cta .btn-primary-custom {
        padding: 12px 18px;
        font-size: 0.875rem;
    }

    /* ── Alternative rows (order-lg-2 / order-lg-1) ─────────── */
    .industry-detail.alt .row {
        flex-direction: column;
    }

    .industry-detail.alt .order-lg-2,
    .industry-detail.alt .order-lg-1 {
        order: unset;
    }
}

/* ============================================================
   EXTRA SMALL — max-width 375px
   ============================================================ */
@media (max-width: 375px) {

    .hero-title {
        font-size: 1.45rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 0.83rem;
    }

    .section-title,
    h2.section-title,
    h2 {
        font-size: 1.3rem;
    }

    .cta-title {
        font-size: 1.3rem;
    }

    .capability-grid {
        grid-template-columns: 1fr;
    }

    .hero-buttons .btn,
    .hero-cta-group .btn-primary-custom,
    .hero-cta-group .btn-outline-custom,
    .hero-cta-group .btn-p,
    .hero-cta-group .btn-o {
        padding: 12px 16px;
        font-size: 0.875rem;
    }

    .impact-number {
        font-size: 1.4rem;
    }

    .stat-num,
    .acc-stat-num {
        font-size: 1.4rem;
    }

    /* ── Industry Sections (375px) ─────────────────────────── */
    .page-header {
        padding: 80px 0 30px;
    }

    .page-header h1 {
        font-size: 1.4rem;
    }

    .page-header p {
        font-size: 0.83rem;
    }

    .industry-detail,
    .industry-detail1,
    .industry-detail.alt {
        padding: 36px 0;
    }

    .industry-detail h2 {
        font-size: 1.25rem;
    }

    .industry-detail .lead {
        font-size: 0.875rem;
    }

    .industry-icon-lg {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    .benefit-item {
        gap: 10px;
        padding: 10px 0;
    }

    .benefit-item i {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    .benefit-item h4 {
        font-size: 0.85rem;
    }

    .benefit-item p {
        font-size: 0.78rem;
    }

    .industry-stats-card {
        padding: 16px 12px;
        margin-top: 14px;
    }

    .stats-grid {
        gap: 6px;
    }

    .stat-box {
        padding: 10px 6px;
    }

    .stat-num {
        font-size: 1.25rem;
    }

    .stat-text {
        font-size: 0.68rem;
    }

    .section-cta {
        padding: 24px 12px;
        margin-top: 28px;
    }

    .section-cta h3 {
        font-size: 1.1rem;
    }

    .section-cta p {
        font-size: 0.8rem;
    }

    .section-cta .btn-primary-custom {
        padding: 11px 16px;
        font-size: 0.83rem;
    }

    /* ── Alt rows on 375px ─────────────────────────────────── */
    .industry-detail.alt .row {
        flex-direction: column;
    }

    .industry-detail.alt .order-lg-2,
    .industry-detail.alt .order-lg-1 {
        order: unset;
    }
}

/* ============================================================
   PAGE-SPECIFIC: Newer pages (SaaS, HLS, Retail, Log, Mfg)
   ov-card, layer-card, ctl-tower, architecture, etc.
   ============================================================ */

/* ── Tablet + Mobile ─────────────────────────────────────── */
@media (max-width: 991px) {
    /* Overview cards (manufacturing/logistics) */
    .ov-card {
        padding: 22px 18px;
    }

    .ov-icon {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
        margin-bottom: 14px;
    }

    .ov-title {
        font-size: 0.95rem;
    }

    /* Layer cards (manufacturing architecture) */
    .layer-card {
        padding: 20px 20px 20px 64px;
    }

    /* Architecture section */
    .architecture-section {
        padding: 60px 0;
    }

    /* Control tower (logistics) */
    .control-tower {
        margin-top: 0;
    }

    /* Asset dashboard (manufacturing) */
    .asset-dashboard {
        padding: 20px;
    }

    .asset-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Clinical dashboard (healthcare) */
    .clinical-dashboard {
        padding: 20px;
    }

    .vitals-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Retail dashboard */
    .retail-dashboard {
        padding: 20px;
    }
}

/* ── Mobile Large ────────────────────────────────────────── */
@media (max-width: 767px) {

    /* ov-card (overview cards) */
    .ov-card {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .ov-title {
        font-size: 0.9rem;
    }

    .ov-desc {
        font-size: 0.82rem;
    }

    /* Layer cards (manufacturing architecture section) */
    .layer-card {
        padding: 16px 16px 16px 52px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .layer-desc {
        font-size: 0.82rem;
    }

    .architecture-section {
        padding: 48px 0;
    }

    /* Asset cards */
    .asset-card {
        padding: 12px;
    }

    .asset-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Vitals grid (healthcare) */
    .vitals-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Route map SVG (logistics) */
    .route-map {
        padding: 10px 0;
    }

    .route-svg {
        width: 100%;
        height: auto;
    }

    /* Control tower */
    .control-tower,
    .clinical-dashboard,
    .asset-dashboard,
    .saas-dashboard,
    .retail-dashboard,
    .log-dashboard {
        padding: 18px;
    }

    /* CT KPI row */
    .ct-kpi-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ct-kpi {
        flex: 0 0 calc(50% - 5px);
    }

    .ct-kpi-val {
        font-size: 1.2rem;
    }

    /* Module cards for logistics (negotiation/twin) */
    .module-card.m-nego,
    .module-card.m-twin,
    .module-card.m-route {
        padding: 20px 16px;
    }

    /* twin-node visualization */
    .twin-node-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Negotiation tracker rows */
    .nego-row {
        padding: 10px 0;
        font-size: 0.82rem;
    }

    /* Stats bar on tablet-wide heroes of logistics/mfg */
    .hero-stats-bar {
        padding-top: 18px;
        margin-top: 20px;
    }
}

/* ── Mobile Small ────────────────────────────────────────── */
@media (max-width: 575px) {

    /* ov-card */
    .ov-card {
        padding: 14px 12px;
    }

    /* Layer card */
    .layer-card {
        padding: 14px 12px 14px 44px;
    }

    .layer-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    /* Asset grid 1 column */
    .asset-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* CT KPI */
    .ct-kpi-val {
        font-size: 1.1rem;
    }

    .ct-kpi-lbl {
        font-size: 0.72rem;
    }

    /* Vitals grid */
    .vitals-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Architecture section */
    .architecture-section {
        padding: 36px 0;
    }

    /* Overview icon smaller */
    .ov-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 10px;
    }

    /* Route SVG */
    .route-map {
        overflow-x: auto;
    }

    /* Benefits section row gap */
    .benefits-section .row.g-4 {
        --bs-gutter-y: 1rem;
    }

    /* Interactive section */
    .interactive-section .row.g-4 {
        --bs-gutter-y: 1rem;
    }
}