@media(max-width:380px){.stats{grid-template-columns:1fr}.button-row{display:grid}.button-row .btn{width:100%}.container{width:min(100% - 22px,var(--container))}}
/* =========================================================
   CLICKRONIX
   FINAL TABLET + MOBILE RESPONSIVE OVERRIDES
   Paste at END of responsive.css
   ========================================================= */


/* =========================================================
   GLOBAL RESPONSIVE SAFETY
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

main,
section,
header,
footer {
    width: 100%;
    max-width: 100%;
}

.container {
    width: min(100% - 48px, 1540px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* Stop grid/flex children from forcing overflow */

main *,
section *,
header *,
footer * {
    min-width: 0;
}


/* Long text protection */

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a,
span {
    overflow-wrap: break-word;
}


/* =========================================================
   TABLET
   1100px and below
   ========================================================= */

@media (max-width: 1100px) {

    .container {
        width: min(100% - 40px, 1000px);
    }


    /* ---------- Headings ---------- */

    h1 {
        font-size: clamp(2.7rem, 6vw, 4.5rem);
    }

    h2 {
        font-size: clamp(2.2rem, 5vw, 3.5rem);
    }


    /* ---------- Generic 2-column layouts ---------- */

    .split-panel,
    .flow-grid,
    .cluster-layout,
    .curve-grid,
    .ring-layout,
    .checkout-grid,
    .device-layout,
    .plan-comparison-panel,
    .google-purpose-panel,
    .contact-form-layout,
    .projection-board,
    .hex-architecture,
    .method-hex-shell,
    .testimonial-cta {
        grid-template-columns: 1fr !important;
    }


    /* ---------- 4-column sections ---------- */

    .pricing-grid-4,
    .documentation-hub,
    .data-use-map,
    .company-facts,
    .value-matrix {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }


    /* ---------- 3-column sections ---------- */

    .triple-focus,
    .glow-bars,
    .api-top,
    .trust-links,
    .method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }


    /* ---------- Buttons ---------- */

    .button-row {
        flex-wrap: wrap;
    }


    /* ---------- Workflow / Magnet section ---------- */

    .workflow-magnet-section {
        overflow: hidden;
    }

    .workflow-magnet-card,
    .platform-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    .platform-panel {
        grid-template-columns: 1fr !important;
    }

    .platform-panel__copy,
    .platform-panel__visual {
        width: 100%;
        max-width: 100%;
    }


    /* ---------- Fixed desktop diagrams ---------- */

    .clickronix-expansion-container {
        grid-template-columns: 1fr !important;
    }

    .clickronix-expansion-chart {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* ---------- About timeline ---------- */

    .cx-page-about-us .cx-journey-section .container {
        overflow-x: hidden !important;
    }

    .cx-page-about-us .cx-journey-timeline {
        min-width: 0 !important;
        width: 100% !important;
    }


    /* ---------- CTA ---------- */

    .cta-band {
        padding: 38px 32px !important;
    }

}


/* =========================================================
   MOBILE
   767px and below
   ========================================================= */

@media (max-width: 767px) {

    /* ---------- Global ---------- */

    html,
    body {
        overflow-x: hidden !important;
    }

    .container,
    .site-footer .container {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    section {
        overflow: hidden;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    header,
    .header,
    .site-header {
        width: 100%;
        max-width: 100%;
    }

    header .container,
    .header .container,
    .site-header .container {
        width: calc(100% - 28px) !important;
    }

    .site-logo,
    .header-logo,
    header .logo,
    header img {
        max-width: 150px;
        height: auto;
    }


    /* =====================================================
       TYPOGRAPHY
       ===================================================== */

    h1 {
        font-size: clamp(2.35rem, 10vw, 3.6rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.045em;
    }

    h2 {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        line-height: 1.08 !important;
    }

    h3 {
        line-height: 1.2;
    }

    p,
    li {
        font-size: 1rem;
        line-height: 1.65;
    }


    /* =====================================================
       PAGE / HOME HERO
       ===================================================== */

    .hero,
    .page-hero,
    [class*="hero"] {
        min-height: auto !important;
    }

    .hero .container,
    .page-hero .container {
        width: calc(100% - 32px) !important;
    }

    .hero h1,
    .page-hero h1 {
        max-width: 100% !important;
    }

    .hero p,
    .page-hero p,
    .hero .lead,
    .page-hero .lead {
        max-width: 100% !important;
    }


    /* =====================================================
       BUTTONS
       ===================================================== */

    .button-row {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .button-row .btn,
    .button-row a,
    .btn {
        max-width: 100%;
    }

    .hero .button-row .btn,
    .page-hero .button-row .btn,
    .cta-band .button-row .btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center;
    }


    /* =====================================================
       HERO FEATURE PILLS
       Fast setup / Traffic quality / etc.
       ===================================================== */

    .hero .feature-list,
    .hero .trust-row,
    .hero .hero-tags,
    .hero .hero-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }


    /* =====================================================
       GENERAL GRID RESPONSIVENESS
       ===================================================== */

    .grid-2,
    .grid-3,
    .grid-4,
    .split-panel,
    .flow-grid,
    .triple-focus,
    .testimonial-cta,
    .device-layout,
    .cluster-layout,
    .glow-bars,
    .api-top,
    .checkout-grid,
    .future-timeline,
    .ring-layout,
    .curve-grid,
    .callout-grid,
    .value-matrix,
    .pricing-grid-4,
    .documentation-hub,
    .data-use-map,
    .method-grid,
    .trust-links,
    .company-facts,
    .comparison-features,
    .compliance-columns,
    .contact-form-layout,
    .projection-board,
    .success-roadmap__head,
    .success-track,
    .hex-architecture,
    .method-hex-shell {
        grid-template-columns: 1fr !important;
    }


    /* =====================================================
       CARDS
       ===================================================== */

    .card,
    .premium-price-card,
    .doc-card,
    .focus-card,
    .method-card,
    .value-pill,
    .api-card,
    .mini-stat,
    .callout-box {
        width: 100%;
        max-width: 100%;
    }


    /* =====================================================
       WORKFLOW / DRAG PLATFORM MAGNET SECTION
       This is the section in your screenshot
       ===================================================== */

    .workflow-magnet-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }

    .workflow-magnet-section > .container {
        width: calc(100% - 32px) !important;
    }

    .workflow-magnet-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 20px;
    }

    .platform-panel {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .platform-panel__copy,
    .platform-panel__visual {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .platform-panel__copy {
        padding: 28px 22px !important;
    }

    .platform-panel__copy h2 {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
    }

    .platform-panel__copy p {
        max-width: 100% !important;
    }

    .platform-panel__visual {
        min-height: 360px !important;
        height: auto !important;
        padding: 24px 16px !important;
        overflow: hidden !important;
    }


    /* Any draggable platform/logo items */

    .platform-panel__visual img,
    .platform-panel__visual svg {
        max-width: 100%;
    }


    /* =====================================================
       CLICKRONIX EXPANSION CHART
       REMOVE 780 / 820 PX MOBILE WIDTH
       ===================================================== */

    body.cx-page-how-it-works
    .clickronix-expansion-section {
        overflow-x: hidden !important;
        padding: 58px 0 !important;
    }

    body.cx-page-how-it-works
    .clickronix-expansion-container {
        display: grid;
        grid-template-columns: 1fr !important;
        width: 100%;
        gap: 30px;
    }

    body.cx-page-how-it-works
    .clickronix-expansion-chart,
    .clickronix-expansion-chart {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 420px;
        overflow: hidden !important;
    }


    /* =====================================================
       ABOUT US JOURNEY
       REMOVE 1000px MIN WIDTH
       ===================================================== */

    .cx-page-about-us .cx-journey-section .container {
        overflow: hidden !important;
    }

    .cx-page-about-us .cx-journey-timeline {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    .cx-page-about-us .cx-journey-item {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 120px;
    }

    .cx-page-about-us .cx-journey-copy {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
    }

    .cx-page-about-us .cx-journey-item::before {
        display: none !important;
    }


    /* =====================================================
       CLUSTER / ABSOLUTE DIAGRAM
       ===================================================== */

    .cluster-panel {
        padding: 22px !important;
    }

    .cluster-canvas {
        min-height: auto !important;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cluster-node,
    .cluster-node.center,
    .cluster-node.n1,
    .cluster-node.n2,
    .cluster-node.n3 {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 90px;
    }


    /* =====================================================
       HEX DIAGRAMS
       ===================================================== */

    .hex-map,
    .method-hex-map {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        gap: 14px;
    }

    .hex-map::before,
    .hex-map::after {
        display: none !important;
    }

    .hex-node,
    .hex-center,
    .method-hex,
    .method-hex-core {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }


    /* =====================================================
       DATA / GRAPH / CHART
       ===================================================== */

    .projection-chart {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        padding: 18px 10px 14px 34px !important;
    }

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


    /* =====================================================
       RINGS
       ===================================================== */

    .rings {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        gap: 18px;
    }

    .ring {
        --size: 125px !important;
    }

    .ring.small {
        --size: 115px !important;
    }


    /* =====================================================
       TABLES
       ===================================================== */

    .table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        max-width: none;
    }


    /* =====================================================
       CTA
       ===================================================== */

    .cta-band {
        padding: 30px 22px !important;
        border-radius: 22px;
    }

    .cta-band .button-row {
        min-width: 0 !important;
        width: 100%;
    }


    /* =====================================================
       CONTACT
       ===================================================== */

    .contact-media-card {
        min-height: 440px !important;
    }

    .contact-media-content {
        padding: 24px !important;
    }

    .contact-premium-form {
        padding: 24px !important;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .footer-top {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .footer-brand {
        grid-column: auto !important;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .footer-legal {
        justify-content: flex-start;
    }

}


/* =========================================================
   SMALL MOBILE
   480px and below
   ========================================================= */

@media (max-width: 480px) {

    .container,
    .site-footer .container {
        width: calc(100% - 24px) !important;
    }


    /* ---------- Hero ---------- */

    h1,
    .hero h1,
    .page-hero h1 {
        font-size: clamp(2.15rem, 10.5vw, 2.9rem) !important;
        line-height: 1.03 !important;
    }

    h2 {
        font-size: clamp(1.85rem, 8vw, 2.5rem) !important;
    }


    /* ---------- Buttons ---------- */

    .btn {
        min-height: 52px;
        padding-left: 18px;
        padding-right: 18px;
        font-size: 0.95rem;
    }


    /* ---------- Workflow section ---------- */

    .workflow-magnet-section > .container {
        width: calc(100% - 24px) !important;
    }

    .workflow-magnet-card {
        border-radius: 18px;
    }

    .platform-panel__copy {
        padding: 24px 18px !important;
    }

    .platform-panel__visual {
        min-height: 300px !important;
        padding: 20px 12px !important;
    }


    /* ---------- General card padding ---------- */

    .card,
    .premium-price-card,
    .doc-card,
    .focus-card,
    .method-card,
    .value-pill,
    .api-card {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }


    /* ---------- Ring visuals ---------- */

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


    /* ---------- Footer ---------- */

    .site-footer {
        padding-top: 45px !important;
    }

}