/* ============ DESIGN TOKENS (extracted from Figma) ============ */
:root{
    /* type colors */
    --ink:            #12233d;   /* headings, primary text */
    --text:           #26364e;   /* nav links, list copy */
    --muted:          #4b5563;   /* card/step copy */
    --muted-2:        #3d4a5c;   /* hero lead, before/after copy */
    --soft:           #5d6b7e;   /* logo-strip label */

    --blue:           #1877f2;   /* primary action color */
    --blue-link:      #4c9bff;   /* links on dark bg */
    --green:          #00b779;   /* accent on light bg */

    --bg-section:     #f7f7f2;   /* hero / before-after / pricing bg */
    --navy-section:   #031738;   /* supplier section bg */
    --navy-footer:    #0a2350;   /* footer bg */
    --navy-card:      #12336b;   /* before-card text / after badge */

    --border:         #e6e6e0;
    --border-soft:    #e9e9e4;
    --border-hair:    #eee;
    --border-divider: #ecece6;
    --border-pill:    #e3e3dd;
    --border-outline: #d9d9d2;

    --shadow-card:    0 6px 22px rgba(0,0,0,0.06);
    --shadow-pill:    0 3px 5px rgba(0,0,0,0.05);
    --shadow-pricing: 0 4px 10px rgba(0,0,0,0.04);

    --font-head: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --container: 1300px;

    /* extended palette */
    --white:          #ffffff;
    --blue-hover:     #1366e6;
    --muted-dark:     #94a3b8;   /* muted text on dark backgrounds */
    --border-line:    #cbd5e1;   /* steps progress line */
    --navy-deep:      #011b40;   /* hero visual card chrome */
    --footer-text:    #c8d5e8;
    --footer-highlight: #e4ecf8;
    --white-a04:      rgba(255,255,255,0.04);
    --white-a12:      rgba(255,255,255,0.12);
    --white-a25:      rgba(255,255,255,0.25);
    --white-a30:      rgba(255,255,255,0.3);
    --blue-a12:       rgba(24,119,242,0.12);
    --blue-a45:       rgba(24,119,242,0.45);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    font-family: var(--font-body);
    color: var(--text);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-head); font-weight:600; }

.wrap{
    max-width: var(--container);
    margin:0 auto;
    padding:0 50px;
}

/* ============ CHECK ICON ============ */
.check{
    width:18px; height:18px; flex-shrink:0;
    border:1.5px solid var(--green);
    border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    line-height:1;
}
.check.lg{ width:20px; height:20px; border-radius:50%; }

/* ============ BUTTONS ============ */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:500;
    padding:14px 26px;
    border-radius:8px;
    border:1px solid transparent;
    white-space:nowrap;
    transition:background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn-primary{ background:var(--blue); color:var(--white); }
.btn-primary:hover{ opacity:.92; background:var(--blue-hover); }
.btn-white{ background:var(--white); color:var(--ink); }
.btn-white:hover{ opacity:.85; }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--border-outline); }
.btn-outline:hover{ border-color:var(--soft); }
.btn-block{ width:100%; }
.btn-sm{ padding:12px 22px; font-size:15px; }

/* ============ HEADER / NAV ============ */
.site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:var(--bg-section);
}
.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:88px;
}
.logo-img{ height:3.125rem; width:auto; }

.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{ font-size:15px; color:var(--text); display:flex; align-items:center; gap:5px; }
.nav-links a:hover{ color:var(--blue); }
.caret{ font-size:10px; }
.nav-login-mobile{ display:none; }
@media (min-width:1025px){
    .nav-links a.nav-login-mobile{ display:none; }
}

.nav-right{ display:flex; align-items:center; gap:28px; }
.nav-right .login{ font-size:15px; font-weight:500; color:var(--ink); transition:color .15s ease; }
.nav-right .login:hover{ color:var(--blue); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

/* ============ HERO ============ */
.hero{
    background:var(--bg-section);
    padding:48px 0 60px;
    overflow:hidden;
    position:relative;
    min-height:640px;
}
.hero-inner{
    display:grid;
    grid-template-columns: 540px 1fr;
    gap:40px;
    align-items:start;
    position:relative;
}
.hero-copy{ padding:20px 0 40px; max-width:540px; }
.eyebrow{
    text-transform:uppercase;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:1.4px;
    color:var(--green);
    margin:0 0 22px;
}
.hero h1{
    font-size:47px;
    line-height:1.16;
    letter-spacing:-1px;
    font-weight:700;
    color:var(--ink);
    margin:0 0 22px;
}
.hero h1 .accent{ color:var(--green); }
.hero .lead{
    font-size:17px;
    line-height:1.62;
    color:var(--muted-2);
    max-width:440px;
    margin:0 0 26px;
}
.hero-ctas{
    display:flex;
    align-items:center;
    gap:26px;
    flex-wrap:wrap;
    margin-bottom:26px;
}
.play-link{ display:inline-flex; align-items:center; gap:12px; font-size:15px; font-weight:500; color:var(--ink); }
.play-link:hover{ opacity:.85; }
.play-circle{
    width:38px; height:38px; border-radius:50%;
    background:var(--ink); color:var(--white);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:12px; flex-shrink:0;
}
.hero-trust{ display:flex; gap:32px; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
.hero-trust li{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:400; color:var(--muted-2); }

/* ---- hero visual ---- */
.hero-visual{
    position:relative;
    width:100%;
    height:100%;
    min-height:520px;
    padding-top:20px;
}
.hero-visual-card{
    position:absolute;
    top:70px;
    left:0;
    width:1250px;
    max-width:none;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(1, 27, 64, 0.18), 0 4px 16px rgba(0,0,0,0.08);
    transform:rotate(-6.5deg);
    transform-origin:top left;
    background:var(--navy-deep);
    border:1px solid var(--white-a12);
    z-index:1;
}
.hero-visual-card img{
    width:100%;
    height:auto;
    display:block;
}
.url-pill{
    position:absolute;
    left:-20px;
    top:-24px;
    background:var(--white);
    border:1px solid var(--border-pill);
    border-radius:6px;
    box-shadow:0 6px 16px rgba(0,0,0,0.08);
    padding:12px 20px;
    font-size:13px;
    color:var(--muted);
    white-space:nowrap;
    z-index:3;
}
.hero-arrow{
    position:absolute;
    left:310px;
    top:-18px;
    width:76px;
    height:auto;
    z-index:2;
}

/* ============ LOGO STRIP ============ */
.logo-strip{
    padding:40px 0;
    border-bottom:1px solid var(--border-hair);
}
.logo-strip .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:44px;
    flex-wrap:wrap;
}
.logo-strip-label{
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.8px;
    text-transform:uppercase;
    color:var(--soft);
    line-height:1.5;
    max-width:130px;
    flex-shrink:0;
}
.brand-logos{
    display:flex;
    align-items:center;
    gap:44px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.brand-logos img{ height:auto; }

/* ============ SECTION HEADINGS ============ */
.section{ padding:64px 0; }

/* ============ HOW IT WORKS / STEPS ============ */
.steps-section{
    padding:72px 0 80px;
    background:var(--white);
    width:100%;
}
.steps-progress{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:36px;
    margin-bottom:28px;
}
.steps-progress-line{
    position:absolute;
    top:13px;
    left:13px;
    right:-15px;
    height:1.5px;
    background:var(--border-line);
    z-index:1;
}
.steps-progress-arrow{
    position:absolute;
    right:-15px;
    top:13px;
    transform:translateY(-50%);
    z-index:2;
    color:var(--muted);
    font-size:14px;
    font-weight:700;
    display:none;
}
.dot-col{
    position:relative;
    z-index:2;
}
.step-dot{
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--green);
    color:var(--white);
    font-size:12.5px;
    font-weight:700;
    font-family:var(--font-head);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 0 4px var(--white);
}
.steps{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:36px;
    align-items:start;
}
.step{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.step h3{
    font-family:var(--font-head);
    font-weight:400;
    font-size:15.5px;
    color:var(--ink);
    margin:0 0 10px;
    line-height:1.3;
}
.step p{
    font-size:12.5px;
    line-height:1.55;
    color:var(--muted);
    max-width:250px;
    margin:0 0 24px;
}
.step-card{
    background:var(--white);
    border:1px solid var(--border-soft);
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    padding:12px;
    width:100%;
    overflow:hidden;
}
.step-card img{
    width:100%;
    height:auto;
    display:block;
    border-radius:8px;
    border:1px solid transparent;
}

/* ============ BEFORE / AFTER ============ */
.before-after{
    background:var(--bg-section);
    padding:72px 0 80px;
    width:100%;
}
.ba-grid{
    display:grid;
    grid-template-columns: 320px 1fr;
    gap:44px;
    align-items:center;
}
.ba-eyebrow{
    text-transform:uppercase;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:1.4px;
    color:var(--blue);
    margin:0 0 16px;
}
.ba-copy h2{
    font-size:27px;
    line-height:1.2;
    letter-spacing:-0.8px;
    font-weight:700;
    color:var(--ink);
    margin:0 0 18px;
}
.ba-copy > p{
    font-size:15px;
    line-height:1.6;
    color:var(--muted-2);
    max-width:320px;
    margin:0 0 28px;
}
.ba-list{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.ba-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:14px;
    line-height:1.5;
    font-weight:500;
    color:var(--text);
    text-align:left;
}
.ba-list li .check{
    flex-shrink:0;
    margin-top:1.5px;
}
.ba-list li > span:not(.check){
    flex:1;
}

.ba-visual{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
}
.ba-before{
    background:var(--white);
    border:1px solid var(--border-soft);
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
    padding:20px;
    font-size:12.5px;
    line-height:1.75;
    color:var(--muted-2);
    width:250px;
    flex-shrink:0;
}
.ba-before .quote-name{
    font-size:14px;
    font-weight:700;
    color:var(--ink);
    margin:12px 0 6px;
}
.ba-before .block{ margin-bottom:10px; }
.ba-arrow{ font-size:24px; color:var(--muted); flex-shrink:0; }
.ba-after{ display:flex; flex-direction:column; gap:10px; flex:1; min-width:0; width:100%; }
.ba-badge{
    align-self:flex-start;
    background:var(--blue);
    color:var(--white);
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    padding:4px 10px;
    border-radius:4px;
    text-transform:uppercase;
}
.ba-after-images{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:10px;
    width:100%;
}
.ba-after-main{
    flex:2.2;
    min-width:0;
    background:var(--white);
    border-radius:12px;
    box-shadow:0 12px 35px rgba(0,0,0,0.08);
    border:1px solid var(--border-soft);
    overflow:hidden;
}
.ba-after-main img{
    width:100%;
    height:auto;
    display:block;
    border-radius:12px;
}
.ba-after-panel{
    flex:1;
    min-width:0;
    background:var(--white);
    border-radius:12px;
    box-shadow:0 12px 35px rgba(0,0,0,0.08);
    border:1px solid var(--border-soft);
    overflow:hidden;
}
.ba-after-panel img{
    width:100%;
    height:auto;
    display:block;
    border-radius:12px;
}

/* ============ TESTIMONIAL ============ */
.testimonial{ padding:64px 0; }
.testimonial .wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:44px;
    flex-wrap:wrap;
}
.quote-mark{
    font-family:var(--font-head);
    font-weight:700;
    font-size:52px;
    color:var(--green);
    line-height:0.6;
}
.testimonial blockquote{
    margin:0;
    max-width:520px;
    font-size:16px;
    line-height:1.95;
    color:var(--text);
}
.testimonial-author{ display:flex; align-items:center; gap:16px; }
.testimonial-avatar{
    width:64px; height:64px; border-radius:50%;
    object-fit:cover;
}
.testimonial-author .name{ font-size:14px; color:var(--ink); margin:0; }
.testimonial-author .role{ font-size:12.5px; line-height:1.7; color:var(--muted); margin: 0; }

/* ============ SUPPLIER (dark) ============ */
.supplier{
    background:var(--navy-section);
    color:var(--white);
    padding:72px 0 80px;
    width:100%;
}
.supplier-top{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:center;
    margin-bottom:56px;
}
.supplier-eyebrow{
    text-transform:uppercase;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:1.3px;
    color:var(--green);
    margin:0 0 16px;
}
.supplier-copy h2{
    font-size:34px;
    line-height:1.22;
    letter-spacing:-0.6px;
    font-weight:700;
    color:var(--white);
    margin:0 0 18px;
}
.supplier-copy > p{
    font-size:15px;
    line-height:1.6;
    color:var(--muted-dark);
    max-width:460px;
    margin:0 0 28px;
}
.supplier-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

.flow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
}
.flow-node{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    font-size:13.5px;
    font-weight:500;
    color:var(--white);
    flex-shrink:0;
    text-align:center;
}
.flow-circle{
    width:76px;
    height:76px;
    border-radius:50%;
    border:1px solid var(--white-a25);
    background:var(--white-a04);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:transform .2s ease;
}
.flow-circle img{ width:32px; height:32px; object-fit:contain; }
.flow-node.active .flow-circle,
.flow-circle.active{
    width:104px;
    height:104px;
    border:2px solid var(--blue);
    background:var(--blue-a12);
    box-shadow:0 0 28px var(--blue-a45);
}
.flow-node.active .flow-circle img,
.flow-circle.active img{ width:48px; height:48px; }
.flow-node.active label,
.flow-node.active span{ font-size:14.5px; font-weight:700; }
.flow-dashed-arrow{
    flex-shrink:0;
    margin:-22px 2px 0;
    overflow:visible;
}

.supplier-features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:32px 24px;
    border-top:1px solid var(--white-a12);
    padding-top:48px;
}
.feature-item{ display:flex; gap:14px; align-items:flex-start; }
.feature-icon{ width:32px; height:auto; flex-shrink:0; }
.supplier-features h4{
    font-family:var(--font-head);
    font-weight:600;
    font-size:15px;
    color:var(--green);
    margin:0 0 8px;
    line-height:1.3;
}
.supplier-features p{
    font-size:13.5px;
    line-height:1.55;
    color:var(--muted-dark);
    margin:0;
}

/* ============ PRICING ============ */
.pricing{ background:var(--bg-section); padding:64px 0 90px; text-align:center; }
.pricing h2{
    font-size:29px;
    letter-spacing:-0.4px;
    color:var(--ink);
    margin:0 0 12px;
}
.pricing .subtitle{ font-size:14px; color:var(--muted); margin:0 0 40px; }
.price-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    max-width:855px;
    margin:0 auto;
    text-align:left;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:var(--shadow-pricing);
    overflow:hidden;
}
.price-card{ padding:34px 32px; display:flex; flex-direction:column; }
.price-card + .price-card{ border-left:1px solid var(--border-divider); }
.price-card h3{ font-size:19px; margin:0 0 16px; }
.price-amount{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-bottom:2px; }
.price-amount .num{ font-size:31px; }
.price-amount .from{ font-size:13px; font-family:var(--font-body); font-weight:400; color:var(--muted); order:-1; }
.price-amount .per{ font-size:13px; font-family:var(--font-body); font-weight:400; color:var(--muted); }
.price-note{ font-size:13px; color:var(--muted); margin:0 0 22px; }
.price-feats{ margin-bottom:16px; flex:1; }
.price-feats li{
    display:flex; gap:9px; align-items:center;
    font-size:12.5px; color:var(--text);
    margin-bottom:10px;
}
.price-feats .tick{ color:var(--blue); font-size:11px; flex-shrink:0; width:11px; }
.price-card .btn-block{ margin-top:auto; }

/* ============ FOOTER ============ */
.site-footer{
    background:var(--navy-footer);
    color:var(--footer-text);
    padding:44px 0 40px;
    width:100%;
}
.footer-need{
    text-align:center;
    font-size:14.5px;
    color:var(--footer-highlight);
    margin:0 0 32px;
}
.footer-need a{
    color:var(--blue-link);
    font-weight:500;
    text-decoration:underline;
    text-underline-offset:3px;
}
.footer-need a:hover{ color:var(--white); }
.footer-bottom{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    grid-template-areas:"left center right";
    align-items:center;
    gap:20px;
    padding-top:24px;
    border-top:1px solid var(--white-a12);
}
.footer-logo{
    grid-area:left;
    height:32px;
    width:auto;
    filter:brightness(0) invert(1);
    justify-self:start;
}
.footer-copy{
    grid-area:center;
    font-size:13px;
    color:var(--muted-dark);
    margin:0;
    text-align:center;
    justify-self:center;
}
.footer-links{
    grid-area:right;
    display:flex;
    align-items:center;
    gap:24px;
    justify-self:end;
}
.footer-links a{
    font-size:13px;
    color:var(--muted-dark);
    transition:color .15s ease;
}
.footer-links a:hover{ color:var(--white); }

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
    .wrap{ padding:0 32px; }
    .hero{ min-height:auto; padding:48px 0 40px; text-align:center; }
    .hero-inner{ grid-template-columns: 1fr; gap:0; }
    .hero-copy{ max-width:100%; margin:0 auto; padding:0; text-align:center; }
    .eyebrow{ margin:0 auto 16px; display:inline-block; }
    .hero h1{ font-size:38px; line-height:1.18; margin:0 auto 20px; max-width:100%; }
    .hero .lead{ font-size:16.5px; line-height:1.58; margin:0 auto 26px; max-width:680px; }
    .hero-ctas{ display:flex; justify-content:center; align-items:center; gap:20px; margin-bottom:32px; width:100%; flex-wrap:wrap; }
    .play-link{ justify-content:center; }
    .hero-trust{ display:flex; justify-content:center; align-items:center; gap:16px 24px; flex-wrap:wrap; margin:0 auto; }
    .hero-trust li{ justify-content:center; }
    .hero-visual{ display:none !important; }
    .url-pill, .hero-arrow{ display:none !important; }

    .steps{ grid-template-columns:1fr; gap:40px; max-width:420px; margin:0 auto; }
    .steps-progress{ display:none; }
    .step p, .step-card, .step-card.card-1, .step-card.card-3{ max-width:100%; }
    .ba-grid{ grid-template-columns:1fr; gap:40px; text-align:center; }
    .ba-copy{ max-width:680px; margin:0 auto; text-align:center; }
    .ba-eyebrow{ margin:0 auto 14px; display:inline-block; }
    .ba-copy h2{ font-size:28px; max-width:100%; margin:0 auto 16px; }
    .ba-copy > p{ max-width:100%; margin:0 auto 24px; }
    .ba-list{ margin:0 auto; width:fit-content; max-width:100%; text-align:left; }
    .ba-list li{ justify-content:flex-start; text-align:left; }

    .ba-visual{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:16px;
        width:100%;
        max-width:680px;
        margin:0 auto;
    }
    .ba-before{
        width:100%;
        max-width:480px;
        margin:0 auto;
        text-align:left;
    }
    .ba-arrow{
        transform:rotate(90deg);
        font-size:24px;
        margin:4px 0;
        text-align:center;
    }
    .ba-after{
        width:100%;
        max-width:680px;
        margin:0 auto;
    }
    .ba-after-composite{
        width:100%;
    }

    .supplier-top{ grid-template-columns:1fr; gap:44px; }
    .supplier-copy{ max-width:680px; margin:0 auto; text-align:center; }
    .supplier-eyebrow{ margin:0 auto 16px; display:inline-block; }
    .supplier-copy h2{ max-width:100%; margin:0 auto 18px; }
    .supplier-copy > p{ max-width:100%; margin:0 auto 28px; }
    .supplier-ctas{ justify-content:center; }
    .supplier-features{ grid-template-columns:repeat(2,1fr); }
    .logo-strip .wrap{ justify-content:center; text-align:center; gap:28px; }
    .brand-logos{ justify-content:center; }
}

@media (max-width:1024px){
    .nav{ position:relative; }
    .nav-links{ display:none; }
    .nav-right .login, .nav-right .btn-primary, .nav-right .btn{ display:none; }
    .nav-toggle{ display:flex; position:relative; z-index:101; }
    .nav-toggle span{ transition:transform .2s ease, opacity .2s ease; }

    .site-header.nav-open .nav-links{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:var(--bg-section);
        border-top:1px solid var(--border-hair);
        box-shadow:0 12px 24px rgba(0,0,0,0.1);
        padding:8px 20px 12px;
        z-index:99;
    }
    .site-header.nav-open .nav-links a{
        width:100%;
        padding:14px 0;
        border-bottom:1px solid var(--border-hair);
    }
    .site-header.nav-open .nav-links a.nav-login-mobile{
        display:flex;
    }
    .site-header.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
    .site-header.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

@media (max-width:768px){
    .wrap{ padding:0 20px; }
    .hero h1{ font-size:32px; margin-bottom:16px; }
    .hero .lead{ font-size:15.5px; margin-bottom:24px; }
    .hero-ctas{ flex-direction:column; align-items:center; gap:14px; }
    .hero-ctas .btn-primary{ width:100%; max-width:340px; justify-content:center; }
    .hero-trust{ gap:12px 18px; }

    .section, .steps-section, .before-after, .testimonial, .pricing{ padding:44px 0; }
    .logo-strip .wrap{ flex-direction:column; gap:20px; }
    .brand-logos{ gap:20px; }
    .price-grid{ grid-template-columns:1fr; }
    .price-card + .price-card{ border-left:none; border-top:1px solid var(--border-divider); }
    .supplier-features{ grid-template-columns:1fr; }
    .supplier-ctas{ flex-direction:column; align-items:center; gap:14px; }
    .supplier-ctas .btn{ width:100%; max-width:340px; justify-content:center; }
    .flow{ flex-direction:column; align-items:center; justify-content:center; gap:8px; }
    .flow-dashed-arrow{ transform:rotate(90deg); margin:10px 0; }
    .flow-connector{ display:none; }
    .footer-bottom{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
    .footer-logo, .footer-copy, .footer-links{ grid-area:auto; justify-self:auto; }
    .footer-copy{ text-align:center; }
    .footer-links{ justify-content:center; gap:20px; flex-wrap:wrap; }
    .testimonial .wrap{ flex-direction:column; text-align:center; }
    .testimonial-author{ flex-direction:column; text-align:center; }
}

@media (max-width:768px){
    .ba-after-images{ display:flex; flex-direction:row; align-items:flex-start; gap:6px; }
}

@media (max-width:430px){
    .url-pill{ white-space:normal; max-width:100%; font-size:12px; word-break:break-all; }
}

/* ============ EDITOR-ONLY BLOCK SPACING ============ */
.editor-styles-wrapper .wp-block[data-type^="acf/"]{ margin-top:0; margin-bottom:0; }