/* =============================================================
 * Sync Power Company — Theme Stylesheet
 * Enqueued via wp_enqueue_style in functions.php
 * ============================================================= */

/* ── Overlays ───────────────────────────────────────────────── */
.sync-hero-overlay   { background: linear-gradient(to right, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 100%); }
.sync-card-overlay   { background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%); }
.sync-banner-overlay { background: linear-gradient(to right, rgba(0,0,0,0.35) 20%, rgba(0,0,0,0.1) 100%); }
@media (max-width: 959px) {
    .sync-hero-overlay { background: rgba(0,0,0,0.55); }
}

/* ── Base layout / typography ──────────────────────────────── */
body {
    background-color: var(--wp--preset--color--cream);
    color: var(--wp--preset--color--warm-700);
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.6;
}
h1 { font-size: var(--wp--preset--font-size--5xl); font-weight: 700; line-height: 1.1; }
h2 { font-size: var(--wp--preset--font-size--4xl); font-weight: 700; line-height: 1.2; }
h3 { font-size: var(--wp--preset--font-size--2xl); font-weight: 600; line-height: 1.3; }
h4 { font-size: var(--wp--preset--font-size--lg);  font-weight: 600; }
a  { color: var(--wp--preset--color--primary); }
.wp-block-navigation { font-size: var(--wp--preset--font-size--sm); font-weight: 500; color: var(--wp--preset--color--warm-700); }

/* ── Constrained layout ────────────────────────────────────── */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.is-layout-constrained > .alignwide { max-width: 1280px; }
.is-layout-constrained > .alignfull { max-width: none; }
.sync-nav .sync-nav__cta { margin-left: 1.25rem; }
.sync-section {
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 4vw, 2.5rem);
    padding-right: clamp(1rem, 4vw, 2.5rem);
}
#get-started-inner { overflow: hidden; }

/* ── Pricing panel primary button (light green) ─────────────────── */
.sync-lgreen-btn {
    background-color: #D4E8C2;
    color: #3a5a2a;
    transition: background-color 150ms ease;
}
.sync-lgreen-btn:hover { background-color: #C1DEBE !important; }

/* ── Pricing panel buttons: side-by-side → stacked on mobile ─────── */
@media (max-width: 959px) {
    .sync-pp-buttons { flex-direction: column !important; }
    .sync-pp-buttons a { flex: unset !important; width: 100% !important; }
}

/* ── S2 button: desktop in header, mobile below card ─────────────── */
.sync-s2-btn-mobile { display: none !important; }
@media (max-width: 959px) {
    .sync-s2-btn-desktop { display: none !important; }
    .sync-s2-btn-mobile  { display: flex !important; }
    .s2-text-col { text-align: center; align-items: center; display: flex !important; flex-direction: column !important; width: 100% !important; }
    .s2-text-col .flex { justify-content: center; width: 100%; }
}

/* ── FAQ button: desktop in header, mobile below accordion ───────── */
.sync-ifaq-btn-mobile { display: none !important; }
@media (max-width: 959px) {
    .sync-ifaq-btn-desktop { display: none !important; }
    .sync-ifaq-btn-mobile  { display: flex !important; }
}

/* ── Rate context border: right on desktop, bottom when stacked ─── */
.sync-rc-border { border-right: 1px solid #E8E6E1; }
@media (max-width: 959px) {
    .sync-rc-border { border-right: none; border-bottom: 1px solid #E8E6E1; }
}

/* ── Testimonials button: desktop in header, mobile below slider ── */
.sync-tm-btn-mobile { display: none !important; }
@media (max-width: 959px) {
    .sync-tm-btn-desktop { display: none !important; }
    .sync-tm-btn-mobile  { display: flex !important; }
}

/* ── Value section button: desktop in header, mobile below cards ── */
.sync-val-btn-mobile { display: none !important; }
@media (max-width: 959px) {
    .sync-val-btn-desktop { display: none !important; }
    .sync-val-btn-mobile  { display: flex !important; width: 100%; justify-content: center; }
}

/* ── Dynamic grids — responsive ────────────────────────────── */
.sync-value-grid { grid-template-columns: 1fr !important; }
.sync-steps-grid { grid-template-columns: 1fr !important; }
.sync-two-col    { grid-template-columns: 1fr !important; }
@media (min-width: 640px) {
    .sync-value-grid { grid-template-columns: repeat(2,1fr) !important; }
    .sync-steps-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (min-width: 960px) {
    .sync-value-grid { grid-template-columns: repeat(var(--cols,3),1fr) !important; }
    .sync-steps-grid { grid-template-columns: repeat(var(--cols,3),1fr) !important; }
    .sync-two-col    { grid-template-columns: 1fr 1fr !important; }
}

/* ── Hover utilities (replace inline onmouseover) ───────────── */
.sync-outline-btn { background-color: transparent; transition: background-color .15s, color .15s, border-color .15s; }
.sync-outline-btn:hover { background-color: #27251F !important; color: #fff !important; border-color: #27251F !important; }
.sync-green-btn { transition: background-color .15s; }
.sync-green-btn:hover { background-color: #174a2e !important; }
.sync-hero-input { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(6px); }
.sync-hero-btn { transition: background-color .15s, color .15s; }
.sync-hero-btn:hover { background-color: #27251F !important; color: #fff !important; }
.sync-step-img { transition: transform .4s ease; display: block; }
.sync-step-img:hover { transform: scale(1.05); }
.sync-banner-link { transition: background-color .15s, color .15s; }
.sync-banner-link:hover { background-color: #fff !important; color: #27251F !important; }
.tm-prev, .tm-next { transition: background-color .15s, color .15s, border-color .15s; }
.tm-prev:hover, .tm-next:hover { background-color: #27251F !important; color: #fff !important; border-color: #27251F !important; }

/* ── Burger / offcanvas ─────────────────────────────────────── */
#sync-burger { display: none; position: absolute; top: 50%; right: clamp(1rem,4vw,2.5rem); transform: translateY(-50%); gap: 6px; flex-direction: column; align-items: center; justify-content: center; z-index: 100; background: none; border: none; cursor: pointer; padding: 6px; }
.sync-burger-bar { display: block; width: 22px; height: 2px; background: #3D3B34; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
#sync-burger.is-open .sync-burger-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#sync-burger.is-open .sync-burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
#sync-burger.is-open .sync-burger-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
#sync-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(3px); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
#sync-nav-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px,90vw); background: #FAFAF9; z-index: 9999; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0,0,0,.12); }
.sync-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; font-size: 1rem; font-weight: 500; color: #3D3B34; text-decoration: none; border-bottom: 1px solid #E8E6E1; transition: background-color .15s; }
.sync-nav-link:hover { background-color: #F5F4F2; }

/* ── Header responsive — hide desktop nav on mobile ─────────── */
@media (max-width: 1100px) {
    .sync-nav__inner > .wp-block-group:last-child { display: none !important; }
    #sync-burger { display: flex !important; }
}
@media (max-width: 639px) {
    .sync-provider-badge { transform: scale(0.8); transform-origin: left center; }
}
@media (min-width: 1101px) {
    #sync-burger { display: none !important; }
}

/* ── General responsive ─────────────────────────────────────── */
@media (max-width: 959px) {
    /* ── Section global ── */
    .sync-section { padding-top: 20px !important; padding-bottom: 20px !important; }
    .sync-section-header { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; }
    .sync-section-header .flex-shrink-0 { margin-top: 0 !important; }
    /* ── Typography ── */
    h1, .text-5xl { font-size: 2.25rem !important; line-height: 1.2 !important; }
    h2, .text-4xl { font-size: 1.75rem !important; }
    .text-3xl { font-size: 1.5rem !important; }
    .text-\[2\.5rem\] { font-size: 1.75rem !important; }
    .text-\[2\.75rem\] { font-size: 1.75rem !important; }
    /* ── Hero ── */
    .sync-hero-content { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; min-height: 0 !important; }
    .sync-hero-form { flex-direction: column !important; align-items: stretch !important; }
    .sync-hero-form > div, .sync-hero-form > button { max-width: 100% !important; width: 100% !important; }
    /* ── Value cards ── */
    .sync-val-content { padding: 1.25rem !important; min-height: 260px !important; }
    .value-card { min-height: 260px !important; }
    /* ── Rate context ── */
    .sync-rc-left { padding: 1.5rem !important; gap: 1.5rem !important; }
    .sync-rc-right { padding: 1rem !important; }
    .sync-rate-panel { padding: 1.25rem !important; gap: 1.5rem !important; }
    /* ── Testimonials ── */
    .tm-slide { padding-left: 2rem !important; padding-right: 2rem !important; }
    .tm-slide .max-w-\[660px\] { height: auto !important; max-height: 240px !important; }
    .tm-prev { left: -8px !important; }
    .tm-next { right: -8px !important; }
    /* ── Pricing panel ── */
    .sync-pricing-card { padding: 1.25rem !important; gap: 1rem !important; }
    /* ── Section 2 / HIW day-night cards ── */
    .s2-card, .sync-hiw-card { flex-direction: column !important; padding: 1.25rem !important; gap: 1.25rem !important; align-items: center !important; text-align: center !important; }
    .s2-card > div:first-child, .sync-hiw-card > div:first-child { width: 100% !important; display: flex !important; justify-content: center !important; }
    .sync-hiw-card > div:last-child { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
    .sync-hiw-card .flex { justify-content: center !important; }
    /* ── Steps grid ── */
    .sync-steps-grid { gap: 1.5rem !important; }
    /* ── Banner ── */
    .sync-banner-inner { padding: 2rem 1.5rem !important; min-height: 0 !important; max-width: 100% !important; }
    .sync-banner-outer { min-height: 0 !important; height: auto !important; }
    /* ── How It Works bill breakdown ── */
    .sync-bill-breakdown { padding: 1.25rem !important; }
    #sync-hiw-chart-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    #sync-hiw-chart { min-width: 768px !important; width: 100% !important; }
    /* ── Rate chart: scrollable on mobile ── */
    .sync-rate-chart-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .sync-rate-chart-wrap > div { min-width: 768px !important; }
    /* ── Rate chart tooltip: smaller on mobile ── */
    [id$="-tip"] { min-width: 140px !important; padding: 0.5rem !important; font-size: 0.75rem !important; }
    [id$="-tip"] p { font-size: 0.75rem !important; margin-bottom: 0.25rem !important; }
    /* ── Pie chart: scale down 20% on mobile ── */
    .sync-grid-pie { width: 80% !important; height: auto !important; display: block; margin: 0 auto; }
    .sync-provider-how-it-works-section .grid-cols-4 { grid-template-columns: repeat(2,1fr) !important; }
    /* ── Pricing section ── */
    .sync-pricing-guide { padding: 1.25rem !important; }
    .sync-pricing-guide-row { flex-direction: column !important; }
    .sync-pricing-guide-row > div:first-child { width: 100% !important; max-height: 220px !important; overflow: hidden !important; }
    .sync-pricing-guide-content { padding: 1.25rem 0 !important; }
    .sync-guide-grid { grid-template-columns: 1fr !important; }
    .sync-pricing-step-row { flex-direction: column !important; gap: 1rem !important; }
    .sync-pricing-step-row > div { width: 100% !important; }
    .sync-pricing-step-row > div img { width: 100% !important; height: auto !important; max-height: 160px !important; object-fit: cover !important; }
    /* ── Equipment grid ── */
    .sync-equip-card { padding: 1.25rem !important; }
    /* ── CTA buttons full width on mobile ── */
    .sync-fc-btn, .sync-ps-btn, .sync-pricing-btn, .sync-banner-link,
    .sync-hero-btn, .rc-btn, .sync-green-btn, .sync-lgreen-btn,
    .sync-equip-cta-btn { display: block !important; width: 100% !important; text-align: center !important; white-space: normal !important; }
    .sync-pp-buttons { flex-direction: column !important; }
    .sync-pp-buttons a { width: 100% !important; justify-content: center !important; }
    /* ── Rate comparison ── */
    .sync-rate-row { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; }
    .sync-rate-row > span { text-align: left !important; flex: unset !important; }
    .sync-rc-comparison-grid { grid-template-columns: 1fr !important; }
    /* ── Footer ── */
    .sync-site-footer .is-layout-flex { flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; text-align: center !important; }
    /* ── Get started section ── */
    #get-started-inner { flex-direction: column !important; height: 100svh !important; }
    #get-started-inner > div { width: 100% !important; flex: 1 !important; }
    #get-started-inner > div:not(.hidden) { display: flex !important; }
    #get-started-inner > div.hidden { display: none !important; }
    .sync-gs-inner { position: relative; background-image: url('/wp-content/uploads/2026/03/photo-1680212416648-a09b3ff9c423.jpeg'); background-size: cover; background-position: center; }
    .sync-gs-inner::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.55); z-index: 0; }
    .sync-gs-photo { display: none !important; }
    .sync-gs-heading-text { color: #fff !important; }
    .sync-gs-item { color: rgba(255,255,255,0.9) !important; }
    .sync-gs-item svg { color: #fff !important; }
    .sync-gs-meta { color: rgba(255,255,255,0.7) !important; }
    #section-get-started .sync-ms-disc { color: rgba(255,255,255,0.7) !important; }
    #section-get-started .sync-ms-back { color: #fff !important; }
    #section-get-started .sync-ms-err  { color: #fca5a5 !important; }
    /* Back links: full width on mobile */
    .sync-ms-back-wrap { justify-content: stretch !important; }
    .sync-ms-back { width: 100% !important; justify-content: flex-end !important; }
    /* Thank-you panel: visible, white, centered */
    #sync-gs-thankyou { align-items: center !important; justify-content: center !important; min-height: 100% !important; flex: 1 !important; }
    #sync-gs-thankyou > div:first-child { position: relative; z-index: 1; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; flex: 1 !important; }
    .sync-ty-text, .sync-ty-text * { color: #fff !important; }
    /* Thank-you standalone page: full-bleed image + overlay on mobile */
    #sync-ty-page { position: relative; background-size: cover !important; background-position: center !important; height: 100svh; align-items: center; justify-content: center; }
    #sync-ty-page::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.55); z-index: 0; }
    #sync-ty-page .sync-ty-text-col { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; }
    #sync-ty-page .sync-ty-text, #sync-ty-page .sync-ty-text * { color: #fff !important; }
}
@media (min-width: 960px) and (max-width: 1200px) {
    /* ── Get started only: stack input + button, keep photo ── */
    #section-get-started .sync-ms-step[data-step="1"].sync-ms-active,
    #section-get-started .sync-ms-step[data-step="1"].sync-ms-out {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #section-get-started .sync-ms-step[data-step="1"] .sync-ms-input-wrap {
        width: 100% !important;
        flex: none !important;
    }
    #section-get-started .sync-ms-step[data-step="1"] .sync-ms-btn {
        width: 100% !important;
    }
}
@media (max-width: 639px) {
    .sync-section { padding-left: 1rem !important; padding-right: 1rem !important; }
    h1, .text-5xl { font-size: 1.875rem !important; }
    h2, .text-4xl { font-size: 1.5rem !important; }
    .tm-slide { padding-left: 1rem !important; padding-right: 1rem !important; }
    .sync-hero-form button { font-size: 0.875rem !important; }
}

/* ── Nav item hover — pill background ──────────────────────── */
.sync-nav .wp-block-navigation-item__content {
    padding: 5px 12px;
    border-radius: 8px;
    transition: background-color 150ms ease;
}
.sync-nav .wp-block-navigation-item__content:hover {
    background-color: #F5F4F2;
}

/* ── Sync logo hover ────────────────────────────────────────── */
.sync-nav a[href="/"] > div,
.sync-nav a[href="#intro"] > div {
    transition: background-color 150ms ease;
}
.sync-nav a[href="/"]:hover > div,
.sync-nav a[href="#intro"]:hover > div {
    background-color: #F5F4F2;
}

/* ── Green button hover — across the whole site ─────────────── */
.bg-\[\#D4E8C2\] {
    transition: background-color 150ms ease, opacity 150ms ease;
}
.bg-\[\#D4E8C2\]:hover {
    background-color: #C1DEBE !important;
}
.refs-content a { color: #3a6f54; }

/* ── Provider select loading overlay ────────────────────────── */
@keyframes sync-spin {
    to { transform: rotate(360deg); }
}
@keyframes sync-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
#sync-provider-loading {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(242, 238, 232, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
#sync-provider-loading.is-visible {
    opacity: 1;
}
.sync-loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    animation: sync-fade-up 0.3s ease both;
}
.sync-loading-logo {
    border: 2px solid #3D3B34;
    border-radius: 6px;
    padding: 8px 18px;
}
.sync-loading-logo span {
    font-weight: 500;
    color: #3D3B34;
    font-size: 16px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-family: Inter, sans-serif;
}
.sync-loading-ring {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e0d8;
    border-top-color: #1E5C3A;
    border-radius: 50%;
    animation: sync-spin 0.75s linear infinite;
}
.sync-loading-label {
    font-size: 13px;
    color: #9ca3af;
    font-family: Inter, sans-serif;
    margin: 0;
    letter-spacing: 0.03em;
}

/* ── Multi-step CF7 form ─────────────────────────────────────── */

/* Step visibility + fade transitions */
.sync-ms-step                { display: none; }
.sync-ms-step.sync-ms-active { display: block; animation: sync-ms-in 600ms ease forwards; }

@keyframes sync-ms-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Fade-out state applied by JS before hiding */
.sync-ms-step.sync-ms-out {
    display: block;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
}
.sync-ms-step[data-step="1"].sync-ms-out { display: flex; }

/* Heading fade transitions */
[data-ms-heading]:not(.hidden) { animation: sync-ms-in 600ms ease forwards; }
[data-ms-heading].sync-ms-out  { opacity: 0; transition: opacity 180ms ease; }

/* Strip CF7/wpautop whitespace noise */
.sync-multistep-wrap .wpcf7-form p  { margin: 0; padding: 0; }
.sync-multistep-wrap .wpcf7-form br { display: none; }
.sync-multistep-wrap .wpcf7-response-output { display: none !important; }

/* ── Step 1: address input + button row */
.sync-ms-step[data-step="1"].sync-ms-active {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.sync-ms-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #D6D3CC;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
.sync-ms-pin {
    width: 1rem;
    height: 1rem;
    color: #A8A49B;
    flex-shrink: 0;
}
/* CF7 wrap span inside the address wrapper */
.sync-ms-input-wrap .wpcf7-form-control-wrap {
    flex: 1;
    min-width: 0;
    display: block;
}
/* The actual address <input> — no extra border, transparent */
.sync-ms-inner {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1rem;
    color: #3D3B34;
}
.sync-ms-inner::placeholder { color: #A8A49B; }

/* Step 1 button: auto-width, sits beside the input */
.sync-ms-step[data-step="1"] .sync-ms-btn {
    width: auto;
    max-width: none;
    flex-shrink: 0;
    white-space: nowrap;
    margin-bottom: 0;
}

/* Step 1 responsive: stack and go full-width on small screens */
@media (max-width: 640px) {
    .sync-ms-step[data-step="1"].sync-ms-active,
    .sync-ms-step[data-step="1"].sync-ms-out {
        flex-direction: column;
        align-items: stretch;
    }
    .sync-ms-step[data-step="1"] .sync-ms-input-wrap {
        width: 100%;
        flex: none;
    }
    .sync-ms-step[data-step="1"] .sync-ms-btn {
        width: 100%;
    }
}

/* ── Step 2: select dropdown */
.wpcf7-form-control-wrap[data-name="ms_avg_bill"] { display: block; }
.sync-ms-select {
    display: block;
    width: 100%;
    border: 1px solid #D6D3CC;
    border-radius: 0.75rem;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A8A49B' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 1.1rem;
    appearance: none;
    -webkit-appearance: none;
    font-size: 1rem;
    color: #3D3B34;
    outline: none;
    cursor: pointer;
    margin-bottom: 0.75rem;
}
.sync-ms-select:focus { border-color: #3a6f54; box-shadow: 0 0 0 3px rgba(58,111,84,.1); }

/* ── Step 3: text / tel / email inputs */
.wpcf7-form-control-wrap[data-name="ms_first_name"],
.wpcf7-form-control-wrap[data-name="ms_last_name"],
.wpcf7-form-control-wrap[data-name="ms_phone"],
.wpcf7-form-control-wrap[data-name="ms_email"] { display: block; }

.sync-ms-field {
    display: block;
    width: 100%;
    border: 1px solid #D6D3CC;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    background: #fff;
    font-size: 1rem;
    color: #3D3B34;
    outline: none;
    margin-bottom: 0.75rem;
}
.sync-ms-field::placeholder { color: #A8A49B; }
.sync-ms-field:focus { border-color: #3a6f54; box-shadow: 0 0 0 3px rgba(58,111,84,.1); }

/* Name row: two fields side by side */
.sync-ms-name-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0;
}
.sync-ms-name-row .wpcf7-form-control-wrap { flex: 1; min-width: 0; display: block; }
.sync-ms-name-row .sync-ms-field { margin-bottom: 0.75rem; }

/* ── Shared Next / Submit button */
.sync-ms-btn {
    display: block;
    width: 100%;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    background-color: #D4E8C2;
    color: #3a5a2a;
    transition: background-color 150ms ease;
}
.sync-ms-btn:hover { background-color: #C1DEBE; }

/* Hero root: overflow-clip clips visually without breaking backdrop-filter
   (overflow:hidden creates a BFC that traps backdrop-filter compositing) */
[id^="intro-"] { overflow: clip; }

/* ── Hero multistep overrides (dark bg) ───────────────────────── */

/* Backdrop blur lives on the wrapper — NOT on inputs or steps.
   Reason: .sync-ms-step animates opacity (0→1) which creates a stacking
   context that traps backdrop-filter inside it with nothing to blur.
   The wrapper is never opacity-animated so the blur composites correctly. */
.sync-hero-ms-wrap {
    position: relative;
}

/* Step 1: input wrap — blur only on the input, not the whole container */
.sync-hero-ms-wrap .sync-ms-input-wrap {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.sync-hero-ms-wrap .sync-ms-pin         { color: rgba(255,255,255,0.5); }
.sync-hero-ms-wrap .sync-ms-inner       { color: #fff; }
.sync-hero-ms-wrap .sync-ms-inner::placeholder { color: rgba(255,255,255,0.6); }

/* Step 1: button → white bg / dark text (matches existing hero button) */
.sync-hero-ms-wrap .sync-ms-step[data-step="1"] .sync-ms-btn {
    background-color: #fff;
    color: #27251F;
}
.sync-hero-ms-wrap .sync-ms-step[data-step="1"] .sync-ms-btn:hover {
    background-color: #27251F;
    color: #fff;
}

/* Steps 2 & 3: CF7 wrapper spans — block display only, blur from parent */
.sync-hero-ms-wrap .wpcf7-form-control-wrap[data-name="ms_avg_bill"],
.sync-hero-ms-wrap .wpcf7-form-control-wrap[data-name="ms_first_name"],
.sync-hero-ms-wrap .wpcf7-form-control-wrap[data-name="ms_last_name"],
.sync-hero-ms-wrap .wpcf7-form-control-wrap[data-name="ms_phone"],
.sync-hero-ms-wrap .wpcf7-form-control-wrap[data-name="ms_email"] {
    display: block;
}

/* Inputs / select themselves: blur only on the input elements */
.sync-hero-ms-wrap .sync-ms-select,
.sync-hero-ms-wrap .sync-ms-field {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.sync-hero-ms-wrap .sync-ms-select option { color: #27251F; background: #fff; }
.sync-hero-ms-wrap .sync-ms-field::placeholder { color: rgba(255,255,255,0.6); }

/* Steps 2 & 3: button → white bg / dark text */
.sync-hero-ms-wrap .sync-ms-step[data-step="2"] .sync-ms-btn,
.sync-hero-ms-wrap .sync-ms-step[data-step="3"] .sync-ms-btn {
    background-color: #fff;
    color: #27251F;
}
.sync-hero-ms-wrap .sync-ms-step[data-step="2"] .sync-ms-btn:hover,
.sync-hero-ms-wrap .sync-ms-step[data-step="3"] .sync-ms-btn:hover {
    background-color: #27251F;
    color: #fff;
}

/* Disclaimer + errors on dark bg */
.sync-hero-ms-wrap .sync-ms-disc { color: rgba(255,255,255,0.6); }
.sync-hero-ms-wrap .sync-ms-err  { color: #fca5a5; }

/* Thank you text paragraphs */
.sync-ty-text p:not(:last-child) { margin-bottom: 0.75rem; }

/* ── Back link (injected by JS into steps 2 & 3) */
.sync-ms-back-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}
.sync-ms-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    color: #78746A;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 150ms ease;
}
.sync-ms-back:hover { opacity: 1; }
.sync-hero-back-wrap .sync-ms-back {
    color: #fff;
    opacity: 1;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}
.sync-hero-back-wrap .sync-ms-back:hover {
    opacity: 0.75;
}

/* Disclaimer */
.sync-ms-disc {
    font-size: 0.875rem;
    color: #78746A;
    margin-bottom: 0.75rem !important;
}

/* Inline validation error */
.sync-ms-err {
    display: block;
    font-size: 0.875rem;
    color: #dc2626;
    min-height: 1.25rem;
    margin-top: 0.25rem;
    width: 100%; /* spans full row on step 1 flex layout */
    flex-basis: 100%;
}

/* CF7 validation error highlight */
.sync-ms-field.wpcf7-not-valid,
.sync-ms-select.wpcf7-not-valid,
.sync-ms-inner.wpcf7-not-valid {
    border-color: #dc2626 !important;
}
.wpcf7-not-valid-tip { font-size: 0.8rem; color: #dc2626; display: block; margin-top: 0.2rem; }
.sync-hero-ms-wrap .wpcf7-not-valid-tip { display: none; }

/* Spinner (CF7 default) */
.sync-multistep-wrap .wpcf7-spinner { margin-left: 0.5rem; vertical-align: middle; }

/* ── Nav menu gap (from header inline style) ─────────────────── */
.wp-block-navigation__container.sync-nav__menu { gap: 20px !important; }

/* ── State map SVG hover effects (from state-map/render.php) ─── */
.state-group circle { transition: fill 0.15s ease; }
.state-group { outline: none; }
.state-hi:hover circle { fill: #f3c787; }
.state-off:hover circle { fill: #b2b7c2; }

/* ── Provider FAQ section (from blocks/provider-faq-section/style.css) ── */
.sync-faq-groups { columns: 1; column-gap: 30px; }
.sync-faq-group  { break-inside: avoid; margin-bottom: 30px; }
@media (min-width: 960px) {
    .sync-faq-groups[data-columns="2"] { columns: 2; }
    .sync-faq-groups[data-columns="3"] { columns: 3; }
}
.sync-faq-item > summary::-webkit-details-marker { display: none; }
.sync-faq-chevron { transition: transform 0.22s ease; flex-shrink: 0; }
.sync-faq-item.is-open .sync-faq-chevron { transform: rotate(180deg); }

/* ── Blur overlay (provider sections gate) ───────────────────── */
.sync-blur-overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgb(255 255 255 / 62%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}
.sync-blur-overlay-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    background: #1E5C3A;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(30, 92, 58, 0.3);
    transition: background 0.15s ease;
}
.sync-blur-overlay-btn:hover { background: #174a2e !important; color: #fff; }
.sync-blur-overlay-btn svg   { width: 1rem; height: 1rem; flex-shrink: 0; }