*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--primary:var(--brand-primary, #ec4899);--accent:var(--brand-accent, #ec4899);--primary-dark:var(--brand-primary-dark, #db2777);--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--radius:8px;--radius-lg:12px;--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 30px rgba(0,0,0,.12)}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;color:var(--gray-800);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.container{max-width:1120px;margin:0 auto;padding:0 1.5rem}

/* Header */
.site-header{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:100;transition:box-shadow .2s}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;gap:1rem}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--gray-900);text-decoration:none;white-space:nowrap}
.logo:hover{text-decoration:none}
.logo-icon{display:inline-flex;width:36px;height:36px;background:var(--primary);color:#fff;border-radius:8px;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;flex-shrink:0}
.logo-text{font-size:1.25rem}
.logo-img{height:32px;width:auto}
.footer-logo-img{height:28px;width:auto;margin-bottom:.5rem}

/* Mobile toggle */
.mobile-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px}
.mobile-toggle span{display:block;width:22px;height:2px;background:var(--gray-700);border-radius:2px;transition:all .2s}
.mobile-toggle.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.mobile-toggle.open span:nth-child(2){opacity:0}
.mobile-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* Nav */
.main-nav{display:flex;gap:1.75rem;align-items:center}
.main-nav a{color:var(--gray-600);font-size:.9rem;font-weight:500;padding:.25rem 0;border-bottom:2px solid transparent;transition:color .15s}
.main-nav a:hover,.main-nav a.active{color:var(--accent);text-decoration:none}
.main-nav a.active{border-bottom-color:var(--accent)}
.header-actions{display:flex;gap:.5rem;align-items:center}
.btn-outline-header{display:inline-flex;align-items:center;padding:.4rem 1rem;border-radius:var(--radius);font-weight:500;font-size:.875rem;color:var(--gray-700);border:1px solid var(--gray-300);background:#fff;transition:all .15s;text-decoration:none}
.btn-outline-header:hover{background:var(--gray-50);text-decoration:none}
.btn-primary-header{display:inline-flex;align-items:center;padding:.4rem 1rem;border-radius:var(--radius);font-weight:500;font-size:.875rem;background:var(--primary);color:#fff;transition:all .15s;text-decoration:none}
.btn-primary-header:hover{opacity:.9;text-decoration:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1.25rem;border-radius:var(--radius);font-weight:500;font-size:.875rem;border:none;cursor:pointer;transition:all .15s;text-decoration:none;line-height:1.4}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.btn-outline{background:transparent;border:1px solid var(--gray-300);color:var(--gray-700)}.btn-outline:hover{background:var(--gray-50);border-color:var(--gray-400)}
.btn-lg{padding:.75rem 2rem;font-size:1rem}
.btn-block{width:100%;justify-content:center}

/* Sections */
.section{padding:5rem 0}
.section-alt{background:var(--gray-50)}
.section-title{font-size:2rem;font-weight:700;text-align:center;margin-bottom:.75rem;color:var(--gray-900)}
.section-subtitle{text-align:center;color:var(--gray-500);font-size:1.05rem;max-width:600px;margin:0 auto 3rem}
.section-cta{text-align:center;margin-top:2.5rem}

/* Hero */
.hero{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:#fff;padding:6rem 0;text-align:center;position:relative;overflow:hidden}
body.page-home .hero{background-color:var(--bp-dark-bg,#1e2339);text-align:left;padding:6rem 0 6.5rem;min-height:560px;display:flex;align-items:center}
body.page-home .hero-split-inner{display:block;position:relative;z-index:2;width:100%}
body.page-home .hero-copy{max-width:540px;text-align:left;margin-left:0;margin-right:auto;padding:0}
body.page-home .hero h1{margin:0;text-align:left;font-size:3rem;line-height:1.08;letter-spacing:-.015em}
body.page-home .hero-sub{margin:1.1rem 0 0;color:rgba(255,255,255,.78);font-size:1.08rem;line-height:1.55}
body.page-home .hero-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
body.page-home .hero-actions{justify-content:flex-start;margin-top:1.75rem}
body.page-home .hero-actions .btn-primary{background:var(--bp-pill-bg,#fff);color:var(--bp-ink,#1e2339)}
body.page-home .hero-actions .btn-primary:hover{background:var(--bp-page-bg-soft,#f3f4f6)}
body.page-home .hero-actions .btn-outline{border-color:rgba(255,255,255,.35);color:var(--bp-hero-text,#fff);background:transparent}
body.page-home .hero-actions .btn-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}
@media(max-width:900px){
    body.page-home .hero{min-height:520px;padding:3.5rem 0;background-position:center,center!important;background-size:cover,cover!important}
    body.page-home .hero-copy{max-width:100%;padding-left:0}
    body.page-home .hero h1{font-size:2.1rem}
    body.page-home .hero-sub{font-size:1rem}
    body.page-home .hero-actions{flex-direction:column;align-items:stretch}
}
.hero-badge{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:9999px;padding:.35rem 1rem;font-size:.8rem;font-weight:500;margin-bottom:1.5rem}
.hero h1{font-size:3.25rem;font-weight:800;line-height:1.15;max-width:750px;margin:0 auto}
.hero-sub{font-size:1.2rem;opacity:.9;margin:1.5rem auto;max-width:600px;line-height:1.6}
.hero-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem}
.hero-actions .btn-primary{background:#fff;color:var(--primary);animation:none}.hero-actions .btn-primary:hover{background:rgba(255,255,255,.9)}
.hero-actions .btn-outline{border-color:rgba(255,255,255,.4);color:#fff}.hero-actions .btn-outline:hover{background:rgba(255,255,255,.1)}

/* Page Hero (inner pages) */
.page-hero{background:var(--bp-dark-bg,var(--dark-section-bg,#1e2339));color:var(--bp-hero-text,#fff);padding:5rem 0;text-align:center;position:relative}
.page-hero h1{font-size:2.75rem;font-weight:800;line-height:1.1;max-width:760px;margin:0 auto;letter-spacing:-.01em}
.page-hero .hero-sub{font-size:1.1rem;color:rgba(255,255,255,.7);margin:1rem auto 0;max-width:560px}
.page-hero .title-accent{background:linear-gradient(90deg,var(--accent-grad-start,#f16a87),var(--accent-grad-end,#fe6aa7));-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero-sm{padding:3rem 0}
.page-hero-sm h1{font-size:2rem}

/* ── Competitor comparisons ─────────────────────────────────────────────── */
.comparison-hero{padding:4.75rem 0}
.comparison-hero .breadcrumbs{justify-content:center;margin:0 0 1.4rem}
.comparison-eyebrow{display:inline-block;background:rgba(var(--bp-accent-rgb,241,106,135),.10);color:var(--bp-accent,#f16a87);font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.4rem .85rem;border-radius:9999px;border:1px solid rgba(var(--bp-accent-rgb,241,106,135),.30);margin:0 0 .85rem}
.comparison-hero .hero-sub{max-width:790px}
.comparison-hero .hero-actions .btn-primary,
.comparison-hero .hero-actions .btn-primary:hover{background:linear-gradient(135deg,var(--hl-start,#f16a87),var(--hl-end,#fe6aa7))!important;color:#fff!important;border:none!important;opacity:1}
.comparison-hero .hero-actions .btn-primary{box-shadow:0 14px 36px -10px rgba(var(--bp-primary-rgb,241,106,135),.45)}
.comparison-hero .hero-actions .btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 42px -10px rgba(var(--bp-primary-rgb,241,106,135),.55)}
.comparison-hero .hero-actions .btn-outline,
.comparison-hero .hero-actions .btn-outline:hover{background:#1e2339!important;color:#fff!important;border:1px solid #1e2339!important;opacity:1}
.comparison-hero .hero-actions .btn-outline:hover{background:#1f1f2c!important;border-color:#1f1f2c!important}
.comparison-disclosure{border-left:3px solid var(--primary);background:#fff7fa;color:var(--gray-700);padding:1rem 1.15rem;border-radius:0 var(--radius) var(--radius) 0;font-size:.92rem;line-height:1.65;margin:0 0 2.25rem}
.comparison-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.comparison-card{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:1.55rem;box-shadow:0 8px 24px rgba(30,35,57,.05);display:flex;flex-direction:column}
.comparison-card h2,.comparison-card h3{font-size:1.25rem;line-height:1.28;color:var(--gray-900);margin:0 0 .7rem}
.comparison-card p{font-size:.92rem;color:var(--gray-600);line-height:1.65;margin:0 0 1.25rem}
.comparison-card a{font-size:.9rem;font-weight:700;margin-top:auto}
.comparison-card-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:auto}
.comparison-card-kicker{font-size:.7rem!important;text-transform:uppercase;letter-spacing:.09em;color:var(--primary)!important;font-weight:800;margin:0 0 .55rem!important}
.comparison-card--velixa{background:#1e2339;border-color:#1e2339}.comparison-card--velixa h3{color:#fff}.comparison-card--velixa p{color:rgba(255,255,255,.72)}.comparison-card--velixa a{color:#fe6aa7}
[data-vx-section="alt"] .comparison-card--velixa h3{color:#fff}
[data-vx-section="alt"] .comparison-card--velixa p{color:rgba(255,255,255,.78)}
[data-vx-section="alt"] .comparison-card--velixa a{color:#fe6aa7}
.comparison-index-footer{max-width:750px;text-align:center;margin:4rem auto 0}.comparison-index-footer h2{font-size:1.7rem;color:var(--gray-900);margin-bottom:.7rem}.comparison-index-footer p{color:var(--gray-600);margin-bottom:1.4rem}
.comparison-index-footer .hero-actions .btn-primary,
.comparison-index-footer .hero-actions .btn-primary:hover,
.comparison-index-footer>.btn-primary,
.comparison-index-footer>.btn-primary:hover{background:linear-gradient(135deg,var(--hl-start,#f16a87),var(--hl-end,#fe6aa7))!important;color:#fff!important;border:none!important;opacity:1}
.comparison-index-footer .hero-actions .btn-outline,
.comparison-index-footer .hero-actions .btn-outline:hover{background:#1e2339!important;color:#fff!important;border:1px solid #1e2339!important;opacity:1}
.comparison-index-footer .hero-actions .btn-outline:hover{background:#1f1f2c!important;border-color:#1f1f2c!important}
.comparison-layout{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:3.5rem;align-items:start}
.comparison-article{max-width:800px}.comparison-article--wide{max-width:940px}
.comparison-article h2{font-size:1.65rem;line-height:1.25;color:var(--gray-900);margin:2.6rem 0 .8rem}.comparison-article h2:first-of-type{margin-top:0}
.comparison-article h3{font-size:1.08rem;color:var(--gray-900);margin:0 0 .45rem}
.comparison-article>p,.comparison-article li{color:var(--gray-600);line-height:1.78;margin:0 0 1rem}
.comparison-table-wrap{overflow-x:auto;border:1px solid var(--gray-200);border-radius:12px;margin:1.15rem 0 2.5rem}
.comparison-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:630px}.comparison-table th,.comparison-table td{padding:1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--gray-200);line-height:1.55}.comparison-table thead th{background:#1e2339;color:#fff;font-weight:700}.comparison-table tbody th{color:var(--gray-900);font-weight:700;background:#fafbfc}.comparison-table tr:last-child>*{border-bottom:0}
.comparison-sidebar{position:sticky;top:5.7rem}.comparison-side-card{padding:1.45rem;background:#1e2339;border-radius:14px;color:#fff;margin-bottom:1rem}.comparison-side-card h2{font-size:1.2rem;line-height:1.3;margin:.25rem 0 .65rem;color:#fff}.comparison-side-card p{font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.74);margin:0 0 1rem}.comparison-side-card .btn{background:linear-gradient(135deg,var(--hl-start,#f16a87),var(--hl-end,#fe6aa7));color:#fff;font-weight:700;border:0;box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}.comparison-side-card .btn:hover{background:linear-gradient(135deg,var(--hl-start,#f16a87),var(--hl-end,#fe6aa7));color:#fff;filter:brightness(.96);transform:translateY(-1px)}
[data-vx-section="alt"] .comparison-side-card h2{color:#fff}
[data-vx-section="alt"] .comparison-side-card p{color:rgba(255,255,255,.78)}
.comparison-side-links{padding:1.3rem;background:#fff;border:1px solid var(--gray-200);border-radius:14px}.comparison-side-links h2{font-size:1rem;color:var(--gray-900);margin:0 0 .75rem}.comparison-side-links a{display:block;padding:.42rem 0;border-top:1px solid var(--gray-100);font-size:.88rem;font-weight:600}
.comparison-faq details{border:1px solid var(--gray-200);background:#fff;border-radius:10px;padding:0 1rem;margin:.7rem 0}.comparison-faq summary{cursor:pointer;padding:1rem 1.2rem 1rem 0;font-weight:700;color:var(--gray-900);list-style:none}.comparison-faq summary::-webkit-details-marker{display:none}.comparison-faq summary::after{content:'+';float:right;font-size:1.25rem;color:var(--primary)}.comparison-faq details[open] summary::after{content:'–'}.comparison-faq details p{font-size:.92rem;margin:0 0 1rem}
.comparison-sources{margin-top:2.8rem;padding-top:1.75rem;border-top:1px solid var(--gray-200)}.comparison-sources ul{padding-left:1.2rem;margin:0 0 1.25rem}.comparison-sources li{margin:.35rem 0}.comparison-legal{font-size:.82rem!important;color:var(--gray-500)!important;line-height:1.65!important}
.comparison-commercial-models{margin:2.6rem 0 2.75rem}.comparison-commercial-models>p{margin-bottom:1.15rem}.comparison-model-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.comparison-model-list article{padding:1.15rem 1.25rem;background:#fff;border:1px solid var(--gray-200);border-radius:12px}.comparison-model-list h3{margin:0 0 .45rem}.comparison-model-list p{font-size:.9rem!important;margin:0!important;line-height:1.65!important}
.comparison-criteria{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.25rem 0 2.75rem}.comparison-criteria>div{padding:1.25rem;background:#fff;border:1px solid var(--gray-200);border-radius:12px}.comparison-criteria p{font-size:.9rem!important;margin:0!important;line-height:1.65!important}.comparison-checklist{padding-left:1.3rem;margin:1rem 0 2.5rem}
.comparison-cta{padding-top:1rem}
@media(max-width:900px){.comparison-card-grid,.comparison-criteria{grid-template-columns:repeat(2,1fr)}.comparison-layout{grid-template-columns:1fr}.comparison-sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.comparison-side-card{margin:0}}
@media(max-width:620px){.comparison-hero{padding:3.5rem 0}.comparison-hero h1{font-size:2.15rem}.comparison-card-grid,.comparison-criteria,.comparison-model-list,.comparison-sidebar{grid-template-columns:1fr}.comparison-article h2{font-size:1.4rem}.comparison-hero .hero-actions{flex-direction:column;align-items:stretch}.comparison-hero .hero-actions .btn{width:100%}}

/* Features Grid */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.features-grid-3{grid-template-columns:repeat(3,1fr)}
.feature-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:2rem;text-align:center;transition:all .2s}
.feature-card:hover{box-shadow:var(--shadow);border-color:var(--gray-300);transform:translateY(-2px)}
.feature-icon{font-size:2.5rem;margin-bottom:1rem}
.feature-card h3{font-size:1.05rem;font-weight:600;margin-bottom:.5rem;color:var(--gray-900)}
.feature-card p{color:var(--gray-500);font-size:.9rem;line-height:1.5}

/* Feature Detail (features page) */
.feature-detail{display:flex;gap:2.5rem;align-items:flex-start;padding:3rem 0;border-bottom:1px solid var(--gray-200)}
.feature-detail:last-child{border-bottom:none}
.feature-detail-alt{flex-direction:row-reverse}
.feature-detail-icon{font-size:3rem;flex-shrink:0;width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:var(--gray-50);border-radius:var(--radius-lg);border:1px solid var(--gray-200)}
.feature-detail-content h2{font-size:1.5rem;font-weight:700;margin-bottom:.75rem;color:var(--gray-900)}
.feature-detail-content p{color:var(--gray-600);margin-bottom:1rem}
.feature-list{list-style:none;padding:0}
.feature-list li{padding:.35rem 0 .35rem 1.5rem;position:relative;color:var(--gray-600);font-size:.95rem}
.feature-list li::before{content:"✓";position:absolute;left:0;color:var(--primary);font-weight:700}

/* Sectors */
.sectors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.sector-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1.5rem;text-align:center;transition:all .2s}
.sector-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.sector-icon{display:block;font-size:2rem;margin-bottom:.5rem}
.sector-name{font-weight:600;font-size:.95rem;color:var(--gray-800)}

/* Sector detail (sectors page) */
.sector-detail{padding:2.5rem 0;border-bottom:1px solid var(--gray-200)}
.sector-detail:last-child{border-bottom:none}
.sector-detail-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.sector-detail-icon{font-size:2rem}
.sector-detail-header h2{font-size:1.4rem;font-weight:700;color:var(--gray-900)}
.sector-detail-desc{color:var(--gray-600);margin-bottom:1rem;max-width:700px}
.sector-features{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.35rem .5rem}
.sector-features li{padding-left:1.5rem;position:relative;color:var(--gray-600);font-size:.9rem}
.sector-features li::before{content:"✓";position:absolute;left:0;color:var(--primary);font-weight:700}

/* Promo sections */
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.promo-grid-reverse{direction:rtl}.promo-grid-reverse>*{direction:ltr}
.promo-label{display:inline-block;background:color-mix(in srgb,var(--primary) 12%,#fff);color:var(--primary);font-size:.8rem;font-weight:600;padding:.25rem .75rem;border-radius:9999px;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}
.promo-content h2{font-size:1.75rem;font-weight:700;margin-bottom:1rem;color:var(--gray-900)}
.promo-content p{color:var(--gray-600);margin-bottom:1.5rem;line-height:1.7}

/* Mock browser */
.mock-browser-stage{background:#f1f3f5;border-radius:20px;padding:28px 28px 18px;display:flex;align-items:flex-start;justify-content:center}
.mock-browser-scroll{height:340px;overflow:hidden;position:relative}
.mock-browser-scroll img{width:100%;display:block;animation:mock-browser-scroll var(--mbs-dur,14s) ease-in-out infinite}
@keyframes mock-browser-scroll{0%,8%{transform:translateY(0)}45%,55%{transform:translateY(calc(-100% + 340px))}92%,100%{transform:translateY(0)}}
.mock-browser{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.mock-browser-bar{display:flex;gap:6px;padding:.75rem 1rem;background:var(--gray-50);border-bottom:1px solid var(--gray-200)}
.mock-browser-bar span{width:10px;height:10px;border-radius:50%;background:var(--gray-300)}
.mock-browser-content{padding:1.5rem}
.mock-browser-screenshot .mock-browser-image{display:block;width:100%;height:auto}
.mock-hero-block{height:80px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:8px;margin-bottom:1rem}
.mock-text-block{height:40px;background:var(--gray-100);border-radius:6px;margin-bottom:1rem}
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.mock-card{height:60px;background:var(--gray-100);border-radius:6px}
.mock-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1rem}
.mock-img{height:40px;background:var(--gray-200);border-radius:4px}

/* Mock widget */
.mock-widget{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-lg);max-width:320px;margin:0 auto}
.mock-widget-large{max-width:360px}
.mock-widget-header{height:20px;width:60%;background:var(--primary);border-radius:4px;margin-bottom:1.25rem;opacity:.8}
.mock-widget-service{margin-bottom:.75rem;padding:.75rem;background:var(--gray-50);border-radius:6px}
.mock-text-line{height:12px;width:80%;background:var(--gray-200);border-radius:3px;margin-bottom:.5rem}
.mock-text-short{height:10px;width:40%;background:var(--gray-200);border-radius:3px}
.mock-widget-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.25rem}
.mock-slot{height:36px;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--gray-500)}
.mock-slot.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.mock-widget-btn{height:40px;background:var(--primary);border-radius:var(--radius);opacity:.9}

/* Pricing */
.pricing-preview{text-align:center}
/* ── Unified wide pricing card (homepage preview + /pricing) ── */
.vx-plan-card{display:grid;grid-template-columns:minmax(240px,5fr) 7fr;border-radius:20px;overflow:hidden;box-shadow:0 20px 52px -12px rgba(0,0,0,.12),0 6px 20px -6px rgba(0,0,0,.07);border:1.5px solid rgba(var(--bp-primary-rgb,241,106,135),.18);margin-bottom:3rem}
.vx-plan-left{background:var(--bp-primary,#f16a87);background-image:linear-gradient(145deg,rgba(255,255,255,.07) 0%,rgba(0,0,0,.18) 100%);padding:3rem 2.5rem;display:flex;flex-direction:column;color:#fff;text-align:center;align-items:center}
.vx-plan-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:1.25rem}
.vx-plan-name{font-size:1.55rem;font-weight:800;line-height:1.25;margin-bottom:1.5rem}
.vx-plan-price{font-size:3.25rem;font-weight:900;line-height:1;display:flex;align-items:flex-start;justify-content:center;gap:.05rem;flex-wrap:wrap;max-width:100%;min-width:0}
.vx-plan-price>span{display:inline-flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;min-width:0;max-width:100%}
.vx-plan-price del{font-size:1.5rem;font-weight:600;opacity:.5;text-decoration:line-through;margin-right:.35rem;align-self:center}
.vx-plan-price small{font-size:.95rem;font-weight:500;opacity:.8;align-self:flex-end;margin-bottom:.35rem;margin-left:.15rem}
.vx-plan-meta{margin-top:.75rem;font-size:.875rem;opacity:.82;font-weight:500;line-height:1.6;min-height:2.8em}
.vx-plan-meta>span{display:block;max-width:100%;overflow-wrap:anywhere}
.vx-plan-tagline{margin-top:1.5rem;font-size:.92rem;opacity:.82;line-height:1.65;flex:1}
.vx-plan-cta{margin-top:2.25rem}
.vx-plan-cta .btn{display:block;width:100%;text-align:center;background:#fff;color:var(--bp-primary,#f16a87);border:none;font-weight:700;font-size:1rem;padding:.9rem 1.5rem;border-radius:999px;box-shadow:0 8px 22px -8px rgba(0,0,0,.22);transition:opacity .15s,transform .15s}
.vx-plan-cta .btn:hover{opacity:.93;transform:translateY(-1px);text-decoration:none}
.vx-plan-right{background:#fff;padding:3rem 2.5rem;display:flex;flex-direction:column}
.vx-plan-feat-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bp-text-mid,#64748b);margin-bottom:1.25rem}
.vx-plan-features{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;flex:1}
.vx-plan-features li{display:flex;align-items:flex-start;gap:.6rem;padding:.52rem 0;font-size:.9rem;color:var(--bp-text-strong,#1e2339);border-bottom:1px solid #f1f5f9;line-height:1.45;text-align:left}
.vx-plan-features li:last-child,.vx-plan-features li:nth-last-child(2):nth-child(odd){border-bottom:none}
.vx-plan-check{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;min-width:17px;margin-top:.13rem;background:#1e2339;border-radius:50%;color:#fff;font-size:.6rem;font-weight:900;line-height:1}
@media(max-width:900px){.vx-plan-card{grid-template-columns:1fr}}
@media(max-width:520px){
    .vx-plan-left{padding:2.25rem 1.25rem}
    .vx-plan-price{font-size:2.8rem;gap:0}
    .vx-plan-price del{font-size:1.15rem;margin-right:.25rem}
    .vx-plan-price small{font-size:.8rem;margin-left:.1rem}
    .vx-plan-meta{font-size:.8rem}
    .vx-plan-features{grid-template-columns:1fr}
}

/* Legacy narrow card styles (kept for backward-compat) */
.pricing-card-single{max-width:440px;margin:0 auto;background:#fff;border:2px solid var(--primary);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.pricing-header{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;padding:2rem}
.pricing-header h3{font-size:1.2rem;font-weight:500;margin-bottom:.5rem}
.pricing-amount{font-size:3rem;font-weight:800}
.pricing-amount span{font-size:1rem;font-weight:400;opacity:.8}
.pricing-features{list-style:none;padding:1.5rem 2rem;text-align:left}
.pricing-features li{padding:.5rem 0;border-bottom:1px solid var(--gray-100);color:var(--gray-700);font-size:.95rem}
.pricing-features li:last-child{border-bottom:none}
.pricing-card-single .btn{margin:0 2rem 2rem;width:calc(100% - 4rem)}
.pricing-grid{display:flex;justify-content:center;margin-bottom:4rem}
.pricing-card-main{max-width:480px;width:100%;background:#fff;border:2px solid var(--primary);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.pricing-card-header{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;padding:2.5rem;text-align:center}
.pricing-card-header h2{font-size:1.4rem;font-weight:500;margin-bottom:.5rem}
.pricing-tagline{font-size:.95rem;opacity:.85;margin-top:.5rem}
.pricing-feature-list{list-style:none;padding:2rem}
.pricing-feature-list li{padding:.6rem 0;display:flex;align-items:center;gap:.75rem;color:var(--gray-700);font-size:.95rem;border-bottom:1px solid var(--gray-100)}
.pricing-feature-list li:last-child{border-bottom:none}
.check{color:var(--primary);font-weight:700;font-size:1.1rem}
.pricing-card-main .btn{margin:0 2rem 2rem;width:calc(100% - 4rem)}

/* Fee explanation */
.fee-explanation{margin-top:3rem}
.fee-comparison{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:2rem 0}
.fee-col{display:flex;flex-direction:column;align-items:stretch}
.fee-col-arrow{display:flex;justify-content:center;align-items:center;padding:.25rem 0}
.fee-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:2rem;text-align:center}
.fee-card h3{font-size:1.1rem;font-weight:600;margin-bottom:.75rem;color:var(--gray-900)}
.fee-amount{font-size:2rem;font-weight:700;color:var(--primary);margin-bottom:.75rem}
.fee-amount__asterisk{font-size:.55em;line-height:0;vertical-align:super;margin-left:.08em}
.fee-amount--zero{color:var(--primary)}
.fee-card--highlight{background:#1e2339;border-color:rgba(255,255,255,.1)}
.fee-card--highlight h3{color:#fff}
.fee-card--highlight p{color:#fff!important}
.fee-card--highlight strong{color:#fff}
.fee-card p{color:var(--gray-500);font-size:.9rem}
.fee-minimum-note{max-width:760px;margin:.35rem auto 0;color:var(--gray-500);font-size:.78rem;line-height:1.5;text-align:center}
.fee-minimum-note strong{color:var(--gray-700);font-weight:600}
.fee-example{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:2rem;flex:1}
.fee-example h3{font-size:1rem;font-weight:600;margin-bottom:1rem;color:var(--gray-900);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.fee-example__tag{font-size:.75rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;background:var(--primary);color:#fff;letter-spacing:.02em}
.fee-example__tag--cash{background:var(--primary);color:#fff}
.fee-example--cash{background:#1e2339;border-color:rgba(255,255,255,.1)}
.fee-example--cash h3{color:#fff}
.fee-example--cash .fee-table td{color:rgba(255,255,255,.8)}
.fee-example--cash .fee-total td{color:#fff;border-top-color:rgba(255,255,255,.15)}
.fee-table{width:100%;border-collapse:collapse}
.fee-table td{padding:.5rem 0;font-size:.95rem;color:var(--gray-600)}
.fee-table td:last-child{text-align:right;font-weight:500}
.fee-table__zero{color:var(--primary)!important;font-weight:700!important}
.fee-total--cash td{color:#fff!important}
@media(max-width:640px){.fee-comparison{grid-template-columns:1fr}}
.fee-total td{border-top:1px solid var(--gray-200);font-weight:700;color:var(--gray-900)}

/* FAQ */
.faq-list{max-width:700px;margin:0 auto}
.faq-item{border:1px solid var(--gray-200);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden;background:#fff}
.faq-question{display:flex;justify-content:space-between;align-items:center;width:100%;padding:1rem 1.25rem;background:none;border:none;cursor:pointer;font-size:1rem;font-weight:500;color:var(--gray-800);text-align:left}
.faq-toggle{font-size:1.25rem;color:var(--gray-400);transition:transform .2s}
.faq-item.open .faq-toggle{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-answer{max-height:300px}
.faq-answer p{padding:0 1.25rem 1rem;color:var(--gray-600);font-size:.95rem;line-height:1.6}

/* Steps */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.step-card{text-align:center;padding:2rem}
.step-number{display:inline-flex;width:48px;height:48px;background:var(--primary);color:#fff;border-radius:50%;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;margin-bottom:1rem}
.step-card h3{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;color:var(--gray-900)}
.step-card p{color:var(--gray-500);font-size:.9rem}

/* CTA Section */
.cta-section{padding:5rem 0;text-align:center;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:#fff}
.cta-section h2{font-size:2rem;font-weight:700;margin-bottom:.75rem}
.cta-section p{font-size:1.1rem;opacity:.9;margin-bottom:2rem;max-width:500px;margin-left:auto;margin-right:auto}
.cta-actions{display:flex;gap:1rem;justify-content:center}
.cta-section .btn-primary{background:#fff;color:var(--primary);animation:none}.cta-section .btn-primary:hover{background:rgba(255,255,255,.9)}
.cta-section .btn-outline{border-color:rgba(255,255,255,.4);color:#fff}.cta-section .btn-outline:hover{background:rgba(255,255,255,.1)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:1.25rem}
.form-group{display:flex;flex-direction:column;gap:.375rem}
.form-group label{font-weight:500;font-size:.9rem;color:var(--gray-700)}
.form-input{padding:.6rem .75rem;border:1px solid var(--gray-300);border-radius:var(--radius);font-size:.95rem;font-family:inherit;transition:border-color .15s;color:var(--gray-800)}
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent)}
textarea.form-input{resize:vertical;min-height:120px}
.contact-info{display:flex;flex-direction:column;gap:1.25rem}
.contact-info-card{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1.5rem}
.contact-info-card h3{font-size:1rem;font-weight:600;margin-bottom:.5rem;color:var(--gray-900)}
.contact-info-card p{color:var(--gray-600);font-size:.9rem;line-height:1.5}

/* Alerts */
.alert{padding:1rem 1.25rem;border-radius:var(--radius);margin-bottom:1.5rem;font-size:.95rem}
.alert-success{background:#ecfdf5;border:1px solid #6ee7b7;color:#065f46}
.alert-error{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b}

/* Legal */
.legal-content{max-width:760px;margin:0 auto}
.legal-content h2{font-size:1.35rem;font-weight:700;margin:2rem 0 .75rem;color:var(--gray-900)}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{font-size:1.05rem;font-weight:600;margin:1.5rem 0 .5rem;color:var(--gray-900)}
.legal-content p{color:var(--gray-600);margin-bottom:1rem;line-height:1.7}
.legal-content ul,.legal-content ol{color:var(--gray-600);margin:0 0 1rem 1.5rem;line-height:1.7}
.legal-content li{margin-bottom:.4rem}
.legal-content table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-size:.9rem}
.legal-content table th,.legal-content table td{border:1px solid var(--gray-200);padding:.55rem .75rem;text-align:left;vertical-align:top}
.legal-content table th{background:var(--gray-100);color:var(--gray-900);font-weight:600}
.legal-form .vx-legal-select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:2.75rem;
  padding:.65rem 2.75rem .65rem .85rem;
  border:1px solid #d8dce5;
  border-radius:10px;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,transparent 50%,#f16a87 50%),
    linear-gradient(135deg,#f16a87 50%,transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  color:#1e2339;
  font-family:inherit;
  font-size:1rem;
  font-weight:500;
  line-height:1.35;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.legal-form .vx-legal-select:hover{border-color:#f3a1b7}
.legal-form .vx-legal-select:focus{
  outline:0;
  border-color:#f16a87;
  box-shadow:0 0 0 4px rgba(241,106,135,.12);
}
.legal-form .vx-legal-select option{color:#1e2339;background:#fff}
.legal-divider{border:0;border-top:1px solid var(--gray-200);margin:2rem 0 1.25rem}
.legal-meta{color:var(--gray-500);font-size:.85rem;line-height:1.6}
.legal-updated{margin-top:1rem;color:var(--gray-400);font-size:.8rem;font-style:italic}
.page-hero-sub{margin-top:.5rem;color:var(--gray-700);font-size:1rem}
.legal-tabs-section{padding:1.25rem 0 .5rem;background:transparent;border-bottom:1px solid var(--gray-100)}
.legal-tabs-section .vx-tabs{display:flex;flex-wrap:nowrap;gap:.35rem;justify-content:center;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.25rem .5rem}
.legal-tabs-section .vx-tabs::-webkit-scrollbar{display:none}
.legal-tabs-section .vx-tab{display:inline-block;flex:0 0 auto;padding:.45rem .85rem;border-radius:999px;font-size:.8rem;font-weight:600;color:#fff;background:#1e2339;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.legal-tabs-section .vx-tab:hover{background:#2a3150;color:#fff}
.legal-tabs-section .vx-tab.is-active,.legal-tabs-section .vx-tab.vx-tab-active{background:var(--vx-pal-accent,var(--bp-accent,#f16a87));color:var(--bp-button-text,#fff);box-shadow:0 1px 2px rgba(0,0,0,.12)}
@media (max-width:720px){.legal-tabs-section .vx-tabs{justify-content:flex-start}.legal-tabs-section .vx-tab{font-size:.78rem;padding:.4rem .75rem}}

/* Footer */
/* ── Footer ── */
.site-footer{background:#1e2339;color:rgba(255,255,255,.5);padding:4rem 0 0}
.footer-header{text-align:center;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:3rem}
.footer-wordmark{display:inline-flex;align-items:center;gap:.6rem;justify-content:center}
.footer-wordmark-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#f16a87,#fe6aa7);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;flex-shrink:0}
.footer-wordmark-name{font-size:1.3rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.footer-logo-img{height:32px;width:auto;display:inline-block}
.footer-main{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;padding-bottom:3.5rem}

/* Link columns */
.footer-col{display:flex;flex-direction:column}
.footer-col-heading{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#fff;margin-bottom:1.25rem}
.footer-col a{font-size:.875rem;color:rgba(255,255,255,.5);margin-bottom:.6rem;transition:color .15s;text-decoration:none}
.footer-col a:hover{color:#fff;text-decoration:none}

/* Contact column */
.footer-contact-link{font-size:.875rem;color:rgba(255,255,255,.5);margin-bottom:.6rem;transition:color .15s;text-decoration:none;display:block}
.footer-contact-link:hover{color:#fff}

/* Legal full-width row */
.footer-legal-row{border-top:1px solid rgba(255,255,255,.08);padding:2rem 0 2.5rem}
.footer-legal-row .footer-col-heading{margin-bottom:.75rem}
.footer-address{font-size:.78rem;color:rgba(255,255,255,.35);line-height:1.6}

/* Bottom bar */
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:1.5rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.footer-copy{font-size:.8rem;color:rgba(255,255,255,.35)}
.footer-social{display:flex;align-items:center;gap:.6rem}
.footer-social-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);transition:all .2s;text-decoration:none}
.footer-social-btn:hover{background:#fe6aa7;border-color:#fe6aa7;color:#fff;text-decoration:none}
.footer-social-btn:hover svg{fill:#fff;stroke:#fff}

/* Auth pages */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--gray-50);padding:2rem}
.auth-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:2.5rem;width:100%;max-width:420px;box-shadow:var(--shadow)}
.auth-logo{text-align:center;margin-bottom:2rem}
.auth-logo .logo-icon{width:48px;height:48px;font-size:1.4rem;margin-bottom:.75rem}
.auth-title{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:.5rem;color:var(--gray-900)}
.auth-subtitle{text-align:center;color:var(--gray-500);font-size:.9rem;margin-bottom:2rem}
.auth-form{display:flex;flex-direction:column;gap:1rem}
.auth-form .btn{margin-top:.5rem}
.auth-footer{text-align:center;margin-top:1.5rem;font-size:.9rem;color:var(--gray-500)}

/* Responsive */
@media(max-width:1024px){
    .features-grid{grid-template-columns:repeat(2,1fr)}
    .sectors-grid{grid-template-columns:repeat(3,1fr)}
    .promo-grid{grid-template-columns:1fr;gap:2.5rem}
    .promo-grid-reverse{direction:ltr}
    .footer-main{grid-template-columns:1fr 1fr}
    .contact-grid{grid-template-columns:1fr}
    .fee-comparison{grid-template-columns:1fr}
    .steps-grid{grid-template-columns:1fr}
}
@media(max-width:1024px){
    .header-inner{flex-wrap:wrap;row-gap:0}
    .mobile-toggle{display:flex;margin-left:auto}
    .main-nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;background:#fff;border-top:1px solid var(--gray-200);padding:.75rem 0 .25rem;gap:0;margin-top:.75rem}
    .main-nav.open{display:flex}
    .main-nav a{padding:.85rem .25rem;border-bottom:1px solid var(--gray-100);font-size:.95rem}
    .main-nav a:last-child{border-bottom:none}
    .header-actions{display:none}
    .main-nav.open ~ .header-actions{display:flex;flex-basis:100%;flex-direction:column;align-items:stretch;gap:.6rem;padding:.75rem 0 .5rem;border-top:1px solid var(--gray-100)}
    .main-nav.open ~ .header-actions .btn{width:100%;text-align:center;justify-content:center;padding:.75rem 1rem;font-size:.95rem}
    .site-header.scrolled .header-inner{flex-wrap:wrap;border-radius:18px;padding:.55rem 1rem}
    .site-header.scrolled .main-nav,.site-header.scrolled .main-nav.open ~ .header-actions{background:transparent}
}
@media(max-width:768px){
    .hero{padding:4rem 0}
    .hero h1{font-size:2rem}
    .hero-sub{font-size:1rem}
    .hero-actions{flex-direction:column;align-items:center;gap:.75rem}
    .page-hero h1{font-size:1.75rem}
    .section{padding:3rem 0}
    .section-title{font-size:1.5rem}
    .features-grid,.features-grid-3{grid-template-columns:1fr}
    .sectors-grid{grid-template-columns:repeat(2,1fr)}
    .sector-features{grid-template-columns:1fr}
    .feature-detail,.feature-detail-alt{flex-direction:column}
    .feature-detail-icon{width:60px;height:60px;font-size:2rem}
    .pricing-amount{font-size:2.5rem}
    .cta-actions{flex-direction:column;align-items:center}
    .footer-main{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
    .sectors-grid{grid-template-columns:1fr}
    .mock-cards{grid-template-columns:1fr}
    .mock-gallery{grid-template-columns:repeat(2,1fr)}
}

/* === Modern marketing additions === */
.title-accent{background:linear-gradient(90deg,var(--accent-grad-start,#f16a87),var(--accent-grad-end,#fe6aa7));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.section-eyebrow{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);margin-bottom:1rem;background:rgba(124,92,252,.08);padding:.4rem .9rem;border-radius:9999px}

/* Dark feature section (Fresha-style) */
.dark-section{background:var(--bp-dark-bg,var(--dark-section-bg,#1e2339));color:var(--bp-hero-text,#fff);padding:6rem 0}
.dark-section .section-title{color:#fff;text-align:left;font-size:2.75rem;line-height:1.1;max-width:680px;margin:0 0 1rem}
.dark-section .section-subtitle{color:rgba(255,255,255,.65);text-align:left;max-width:560px;margin:0 0 4rem;font-size:1.05rem}
.dark-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 4rem}
.dark-feature{color:#fff}
.dark-feature h3{font-size:1.05rem;font-weight:600;margin-bottom:.6rem;color:#fff}
.dark-feature p{color:rgba(255,255,255,.6);font-size:.92rem;line-height:1.55;margin:0}
.dark-feature-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(var(--bp-primary-rgb,124,92,252),.18);color:var(--bp-primary,#9b82ff);margin-bottom:1rem}
.dark-feature-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
@media(max-width:900px){.dark-feature-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem}.dark-section .section-title{font-size:2rem}}
@media(max-width:600px){.dark-feature-grid{grid-template-columns:1fr}.dark-section{padding:4rem 0}}

/* Modern soft-card grid (payments-style) */
.modern-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.modern-card{background:var(--gray-50,#f7f7f9);border-radius:1.25rem;padding:2rem 1.75rem;transition:transform .15s,box-shadow .15s}
.modern-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,15,30,.06)}
.modern-card-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(124,92,252,.1);color:var(--primary);margin-bottom:1.25rem}
.modern-card-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.modern-card h3{font-size:1.1rem;font-weight:700;margin-bottom:.5rem;color:var(--gray-900)}
.modern-card p{font-size:.92rem;color:var(--gray-600);line-height:1.55;margin:0}
@media(max-width:900px){.modern-card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.modern-card-grid{grid-template-columns:1fr}}

/* Bigger, bolder section titles */
.section-title-lg{font-size:2.75rem;line-height:1.1;font-weight:800;text-align:center;margin-bottom:1rem;max-width:780px;margin-left:auto;margin-right:auto}
@media(max-width:768px){.section-title-lg{font-size:1.85rem}}
.section-subtitle-lg{font-size:1.1rem;color:var(--gray-600);text-align:center;max-width:600px;margin:0 auto 3.5rem;line-height:1.55}

/* Industry image grid - Fresha-style category tiles */
/* Industries: continuous horizontal marquee. The track holds the
   industry list twice (rendered server-side); we translate it by
   -50% so the second copy seamlessly takes over from the first. */
.industry-marquee{position:relative;margin:2rem 0 1.5rem;overflow:hidden;
    /* Soft fade on left/right edges so cards don't slam into the
       container border — purely cosmetic, no layout impact. */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
/* Full-bleed variant: marquee escapes the .container constraint and
   spans the entire viewport width. The PHP markup places this
   variant OUTSIDE the .container so no negative-margin hacks are
   needed — width:100% of the section is already viewport-width. */
.industry-marquee--fullbleed{width:100%;margin-left:0;margin-right:0}
.industry-marquee-track{display:flex;gap:1rem;width:max-content;animation:industry-marquee-scroll 60s linear infinite;will-change:transform}
.industry-marquee:hover .industry-marquee-track{animation-play-state:paused}
@keyframes industry-marquee-scroll{
    from{transform:translateX(0)}
    to  {transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
    .industry-marquee-track{animation:none}
    .industry-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* Fixed card width so the track has a measurable length and the
   -50% translate lines up cleanly between the two passes. */
.industry-card{flex:0 0 240px;width:240px;display:block;text-decoration:none;color:inherit;border-radius:18px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.industry-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(15,23,42,.12)}
.industry-image{position:relative;width:100%;aspect-ratio:4/5;background:linear-gradient(135deg,#f3e8ff 0%,#fce7f3 50%,#fef3c7 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.industry-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.industry-emoji{font-size:4.5rem;line-height:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.08));z-index:1}
.industry-card:nth-child(8n+1) .industry-image:not(:has(img)){background:linear-gradient(135deg,#fce7f3,#fbcfe8)}
.industry-card:nth-child(8n+2) .industry-image:not(:has(img)){background:linear-gradient(135deg,#dbeafe,#c7d2fe)}
.industry-card:nth-child(8n+3) .industry-image:not(:has(img)){background:linear-gradient(135deg,#fef3c7,#fed7aa)}
.industry-card:nth-child(8n+4) .industry-image:not(:has(img)){background:linear-gradient(135deg,#d1fae5,#a7f3d0)}
.industry-card:nth-child(8n+5) .industry-image:not(:has(img)){background:linear-gradient(135deg,#e0e7ff,#c7d2fe)}
.industry-card:nth-child(8n+6) .industry-image:not(:has(img)){background:linear-gradient(135deg,#fee2e2,#fecaca)}
.industry-card:nth-child(8n+7) .industry-image:not(:has(img)){background:linear-gradient(135deg,#cffafe,#a5f3fc)}
.industry-card:nth-child(8n) .industry-image:not(:has(img)){background:linear-gradient(135deg,#fae8ff,#f5d0fe)}
.industry-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 55%);z-index:2}
.industry-label{position:absolute;left:1rem;right:1rem;bottom:1rem;color:#fff;font-weight:600;font-size:1.05rem;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.4)}
@media(max-width:640px){.industry-card{flex-basis:180px;width:180px}.industry-emoji{font-size:3.5rem}}

/* === Sectors page === */
.sectors-hero{position:relative;padding-bottom:0;overflow:hidden}
.sectors-hero h1{font-size:3rem;letter-spacing:-.025em}
.sectors-marquee{margin-top:3rem;padding:1.25rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);overflow:hidden;background:rgba(0,0,0,.15)}
.sectors-marquee-track{display:flex;gap:.85rem;width:max-content;animation:sectors-marquee 60s linear infinite;will-change:transform}
.sectors-marquee:hover .sectors-marquee-track{animation-play-state:paused}
.sectors-marquee-item{flex:0 0 auto;width:170px;height:115px;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.sectors-marquee-item img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes sectors-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.sectors-marquee-track{animation:none}}

.sectors-grid-section{padding:4rem 0}
.sector-card{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;margin-bottom:4.5rem;opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.sector-card.in-view{opacity:1;transform:translateY(0)}
.sector-card-flip{direction:rtl}
.sector-card-flip > *{direction:ltr}
.sector-card-media{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:5/4;box-shadow:0 18px 48px -18px rgba(15,15,30,.35);background:linear-gradient(135deg,var(--primary),var(--accent))}
.sector-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;will-change:transform}
.sector-card:hover .sector-card-media img{transform:scale(1.04)}
.sector-card-media-empty{position:absolute;inset:0;background:linear-gradient(135deg,var(--primary),var(--accent))}
.sector-card-icon{position:absolute;left:1.1rem;top:1.1rem;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;color:var(--primary);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.sector-card-icon svg{width:26px;height:26px}
.sector-card-body h2{font-size:2rem;font-weight:800;letter-spacing:-.02em;color:var(--gray-900);margin:0 0 .85rem}
.sector-card-desc{color:var(--gray-600);font-size:1.02rem;line-height:1.6;margin:0 0 1.25rem;max-width:540px}
.sector-card-body .sector-features{margin-bottom:1.5rem}
.sector-card-cta{display:inline-flex;align-items:center;gap:.4rem;color:var(--primary);font-weight:600;text-decoration:none;font-size:.95rem}
.sector-card-cta:hover{gap:.6rem;text-decoration:none}
@media(max-width:880px){
  .sector-card,.sector-card-flip{grid-template-columns:1fr;gap:1.5rem;margin-bottom:3rem;direction:ltr}
  .sector-card-media{aspect-ratio:16/10}
  .sector-card-body h2{font-size:1.5rem}
  .sectors-hero h1{font-size:2.1rem}
  .sectors-marquee-item{width:130px;height:88px}
}

/* ============== MODERN PAGE DESIGN SYSTEM ============== */
.m-section{padding:5.5rem 0;position:relative}
.m-section-alt{background:linear-gradient(180deg,#f9fafb 0%,#f3f4f6 100%)}
.m-section-dark{background:var(--bp-dark-bg,var(--dark-section-bg,#1e2339));color:#e2e8f0;position:relative}
.m-section-dark > .container{position:relative;z-index:1}
.m-section-dark .m-section-title{color:#fff}
.m-section-dark .m-section-sub{color:rgba(255,255,255,.7)}
/* Eyebrow pill on dark sections — transparent dark fill with a
   subtle hairline border, gradient text + gradient icon stroke.
   This matches the "FOUND ON GOOGLE" pill on the homepage and is
   the canonical dark-section eyebrow treatment site-wide.
   The text sits directly inside .m-eyebrow (not wrapped in a span)
   so we use background-clip:text on the pill itself and paint the
   pill background via a ::before pseudo so both effects coexist. */
.m-section-dark .m-eyebrow,
.dark-section .m-eyebrow{position:relative;isolation:isolate;background:linear-gradient(90deg,var(--hl-start,#f16a87),var(--hl-end,#fe6aa7));-webkit-background-clip:text;background-clip:text;color:transparent;border:1px solid rgba(255,255,255,.12)}
.m-section-dark .m-eyebrow::before,
.dark-section .m-eyebrow::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.04);z-index:-1}
.m-section-dark .m-eyebrow svg,
.dark-section .m-eyebrow svg{stroke:var(--hl-start,#f16a87);color:var(--hl-start,#f16a87)}
.m-section-dark .m-pillar,
.m-section-dark .m-step{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.m-section-dark .m-pillar:hover,
.m-section-dark .m-step:hover{border-color:rgba(var(--bp-primary-rgb,241,106,135),.4);background:rgba(255,255,255,.06);box-shadow:0 18px 40px -12px rgba(0,0,0,.5)}
.m-section-dark .m-pillar h3,
.m-section-dark .m-step h3{color:#fff}
.m-section-dark .m-pillar p,
.m-section-dark .m-step p{color:rgba(255,255,255,.7)}
/* Icon tile on dark sections — brand pink→cyan gradient with a
   white icon. Applies to pillar icons, step numbers and any
   generic icon container used inside a dark section, so every
   dark-section icon shares the same branded look. */
.m-section-dark .m-pillar-icon,
.dark-section .m-pillar-icon,
.dark-section .dark-feature-icon,
.m-section-dark .dark-feature-icon{background:linear-gradient(135deg,var(--hl-start,#f16a87),var(--hl-end,#fe6aa7));color:#fff;box-shadow:0 8px 22px -8px rgba(var(--bp-accent-rgb,241,106,135),.55)}
.m-section-dark .m-pillar-icon svg,
.dark-section .m-pillar-icon svg,
.dark-section .dark-feature-icon svg,
.m-section-dark .dark-feature-icon svg{color:#fff;stroke:#fff}
.m-section-dark .m-step-num{box-shadow:0 6px 16px -4px rgba(0,0,0,.6)}
.m-eyebrow-gradient{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);background-clip:padding-box}
.m-eyebrow-gradient .m-eyebrow-text{background:linear-gradient(90deg,var(--accent-grad-start,#f16a87),var(--accent-grad-end,#fe6aa7));-webkit-background-clip:text;background-clip:text;color:transparent}
.m-eyebrow-gradient svg{stroke:var(--accent-grad-start,#f16a87)}
.m-section-head{max-width:760px;margin:0 auto 3rem;text-align:center}
.m-section-head.m-left{margin-left:0;text-align:left}
.m-eyebrow{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .85rem;border-radius:999px;background:rgba(var(--bp-primary-rgb,241,106,135),.08);color:var(--bp-primary,#f16a87);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem}
.m-eyebrow svg{width:14px;height:14px;stroke-width:2}
.m-section-title{font-size:clamp(1.85rem,3.4vw,2.5rem);font-weight:800;line-height:1.15;color:#1e2339;margin:0 0 .85rem;letter-spacing:-.02em}
.m-section-sub{font-size:1.075rem;line-height:1.6;color:#64748b;margin:0}

/* Pillar grid (like fee cards on pricing) */
.m-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.m-pillar{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:1.75rem;transition:all .25s ease;overflow:hidden}
.m-pillar::before{content:"";position:absolute;inset:0;border-radius:18px;background:linear-gradient(135deg,var(--bp-primary,#f16a87),var(--bp-accent,#f16a87));opacity:0;transition:opacity .25s ease;z-index:0}
.m-pillar:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 18px 40px -12px rgba(15,23,42,.18)}
.m-pillar:hover::before{opacity:.04}
.m-pillar > *{position:relative;z-index:1}
.m-pillar-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,rgba(var(--bp-primary-rgb,241,106,135),.1),rgba(var(--bp-accent-rgb,241,106,135),.1));display:inline-flex;align-items:center;justify-content:center;color:var(--bp-primary,#f16a87);margin-bottom:1rem}
.m-pillar-icon svg{width:24px;height:24px}
.m-pillar h3{font-size:1.125rem;font-weight:700;color:#1e2339;margin:0 0 .5rem;letter-spacing:-.01em}
.m-pillar p{font-size:.95rem;line-height:1.55;color:#64748b;margin:0}

/* Split: text + visual side-by-side, alternating */
.m-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.m-split-reverse .m-split-content{order:2}
.m-split-reverse .m-split-visual{order:1}
.m-split-content h2{font-size:clamp(1.7rem,2.8vw,2.2rem);font-weight:800;color:#1e2339;line-height:1.2;letter-spacing:-.02em;margin:.5rem 0 1rem}
.m-split-content > p{font-size:1.05rem;line-height:1.65;color:#475569;margin:0 0 1.5rem}
.m-split-visual{position:relative}

/* Modern checklist */
.m-checklist{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.m-checklist li{display:flex;gap:.75rem;align-items:flex-start;font-size:.985rem;color:#1e293b;line-height:1.5}
.m-checklist li::before{content:"✓";flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--bp-primary,#f16a87);margin-top:1px;color:#fff;font-size:11px;font-weight:900;line-height:22px;text-align:center;display:inline-flex;align-items:center;justify-content:center}

/* Visual mock cards (showcase tile) */
.m-showcase{background:linear-gradient(135deg,rgba(var(--bp-primary-rgb,241,106,135),.08),rgba(241,106,135,.08));border-radius:24px;padding:2rem;position:relative;overflow:hidden}
.m-showcase::after{content:"";position:absolute;top:-40%;right:-20%;width:60%;height:120%;background:radial-gradient(circle,rgba(var(--bp-primary-rgb,241,106,135),.18),transparent 70%);pointer-events:none}
.m-showcase-card{background:#fff;border-radius:16px;box-shadow:0 24px 60px -20px rgba(15,23,42,.25);padding:1.25rem;position:relative}
.m-mock-bar{display:flex;gap:6px;margin-bottom:1rem}
.m-mock-bar span{width:10px;height:10px;border-radius:50%;background:#e2e8f0}
.m-mock-bar span:first-child{background:#fca5a5}
.m-mock-bar span:nth-child(2){background:#fcd34d}
.m-mock-bar span:nth-child(3){background:#86efac}
.m-mock-line{height:10px;border-radius:4px;background:linear-gradient(90deg,#e2e8f0,#f1f5f9);margin-bottom:.5rem}
.m-mock-line.short{width:60%}
.m-mock-line.tiny{width:40%;height:8px}
.m-mock-block{height:80px;border-radius:12px;background:linear-gradient(135deg,#ddd6fe,#fbcfe8);margin:.75rem 0}
.m-mock-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.75rem 0}
.m-mock-tile{aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,#e0e7ff,#fce7f3)}
.m-mock-pill-row{display:flex;gap:.4rem;flex-wrap:wrap;margin:.75rem 0}
.m-mock-pill{padding:.4rem .7rem;border-radius:8px;background:#f1f5f9;font-size:.7rem;color:#475569;font-weight:600}
.m-mock-pill.active{background:linear-gradient(135deg,var(--bp-primary,#f16a87),var(--bp-accent,#f16a87));color:#fff}
.m-mock-cta{margin-top:.85rem;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--bp-primary,#f16a87),var(--bp-accent,#f16a87))}

/* Numbered steps */
.m-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;position:relative}
.m-step{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:1.75rem 1.5rem 1.5rem;transition:all .2s}
.m-step:hover{box-shadow:0 18px 40px -12px rgba(15,23,42,.12);transform:translateY(-2px)}
.m-step-num{position:absolute;top:-18px;left:1.5rem;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--bp-primary,#f16a87),var(--bp-accent,#f16a87));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;box-shadow:0 6px 16px -4px rgba(var(--bp-primary-rgb,241,106,135),.4)}
.m-step h3{margin:.75rem 0 .5rem;font-size:1.1rem;font-weight:700;color:#1e2339}
.m-step p{margin:0;font-size:.95rem;color:#64748b;line-height:1.55}

/* Alternating split spacing helper */
.m-split-stack > * + *{margin-top:5rem}

/* Modern CTA card */
.m-cta-card{position:relative;background:var(--bp-dark-bg,var(--dark-section-bg,#1e2339));border-radius:28px;padding:3.5rem 2.5rem;text-align:center;overflow:hidden;color:var(--bp-cta-text,#fff)}
.m-cta-card > *{position:relative}
.m-cta-card h2{font-size:clamp(1.7rem,2.8vw,2.25rem);font-weight:800;margin:0 0 .75rem;color:#fff;letter-spacing:-.02em}
.m-cta-card p{font-size:1.05rem;color:rgba(255,255,255,.7);margin:0 0 1.75rem;max-width:580px;margin-left:auto;margin-right:auto}
.m-cta-card .title-accent{background:linear-gradient(90deg,var(--accent-grad-start,#f16a87),var(--accent-grad-end,#fe6aa7));-webkit-background-clip:text;background-clip:text;color:transparent}
.m-cta-card .btn{box-shadow:0 14px 36px -10px rgba(0,0,0,.5)}
.m-cta-card .cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.m-cta-card .btn-outline{border-color:rgba(255,255,255,.25);color:#fff;background:transparent}
.m-cta-card .btn-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}

/* Contact page modern */
.m-contact{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:start}
.m-contact-form{background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:2.5rem;box-shadow:0 24px 60px -28px rgba(15,23,42,.18)}
.m-contact-form h2{margin:0 0 .5rem;font-size:1.5rem;font-weight:800;color:#1e2339;letter-spacing:-.01em}
.m-contact-form > p.lead{color:#64748b;margin:0 0 1.5rem;font-size:.975rem}
.m-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.m-form-group{margin-bottom:1.1rem}
.m-form-group label{display:block;font-size:.85rem;font-weight:600;color:#334155;margin-bottom:.4rem}
.m-form-group input,.m-form-group textarea{width:100%;padding:.85rem 1rem;border:1px solid #e2e8f0;border-radius:12px;font-size:.975rem;font-family:inherit;transition:all .2s;background:#fafbfc}
.m-form-group input:focus,.m-form-group textarea:focus{outline:none;border-color:var(--bp-primary,#f16a87);background:#fff;box-shadow:0 0 0 4px rgba(var(--bp-primary-rgb,241,106,135),.08)}
.m-form-group textarea{resize:vertical;min-height:120px}
.m-contact-side{display:grid;gap:1rem}
.m-contact-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:1.5rem;display:flex;gap:1rem;align-items:flex-start;transition:all .2s}
.m-contact-card:hover{border-color:var(--bp-primary,#f16a87);box-shadow:0 16px 32px -16px rgba(var(--bp-primary-rgb,241,106,135),.18);transform:translateY(-2px)}
.m-contact-card-icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,rgba(var(--bp-primary-rgb,241,106,135),.1),rgba(var(--bp-accent-rgb,241,106,135),.1));color:var(--bp-primary,#f16a87);display:flex;align-items:center;justify-content:center}
.m-contact-card-icon svg{width:22px;height:22px}
.m-contact-card h3{margin:0 0 .35rem;font-size:1rem;font-weight:700;color:#1e2339}
.m-contact-card p{margin:0;font-size:.9rem;color:#64748b;line-height:1.5}
.m-contact-card a{color:var(--bp-primary,#f16a87);font-weight:600;text-decoration:none}
.m-contact-card a:hover{text-decoration:underline}

/* Stats strip */
.m-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;padding:2rem;background:#fff;border:1px solid #e5e7eb;border-radius:20px}
.m-stat{text-align:center}
.m-stat-num{font-size:2rem;font-weight:800;background:linear-gradient(135deg,var(--bp-primary,#f16a87),var(--bp-accent,#f16a87));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em;line-height:1}
.m-stat-label{font-size:.85rem;color:#64748b;margin-top:.4rem;font-weight:500}

@media (max-width:900px){
  .m-section{padding:3.5rem 0}
  .m-split{grid-template-columns:1fr;gap:2rem}
  .m-split-reverse .m-split-content{order:1}
  .m-split-reverse .m-split-visual{order:2}
  .m-contact{grid-template-columns:1fr}
  .m-form-row{grid-template-columns:1fr}
  .m-cta-card{padding:2.5rem 1.5rem}
  .m-split-stack > * + *{margin-top:3rem}
}

/* === Modern auth (login/signup) split layout === */
.m-auth-page{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1e2339}
.m-auth-aside{position:relative;overflow:hidden;padding:3rem 3.5rem;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:var(--bp-dark-bg,#1e2339)}
.m-auth-aside::before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 22% 18%,rgba(255,255,255,.04),transparent 55%),radial-gradient(circle at 82% 88%,rgba(255,255,255,.03),transparent 55%);pointer-events:none}
.m-auth-aside > *{position:relative;z-index:1}
.m-auth-brand{display:flex;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:#fff;text-decoration:none}
.m-auth-brand img{max-height:40px;max-width:180px;object-fit:contain}
.m-auth-aside-body{margin-top:auto;margin-bottom:auto;padding:2rem 0}
.m-auth-eyebrow{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .9rem;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.4rem;backdrop-filter:blur(8px)}
.m-auth-headline{font-size:clamp(1.85rem,3vw,2.4rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0 0 1rem;color:#fff}
.m-auth-headline .m-auth-grad{background:linear-gradient(135deg,var(--accent-grad-start,#f16a87) 0%,var(--accent-grad-end,#fe6aa7) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:brightness(1.1) saturate(1.05)}
.m-auth-lede{font-size:1rem;color:rgba(255,255,255,.78);max-width:460px;line-height:1.6;margin:0 0 2rem}
.m-auth-checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.85rem}
.m-auth-checklist li{display:flex;align-items:flex-start;gap:.75rem;font-size:.95rem;color:rgba(255,255,255,.92);line-height:1.5}
.m-auth-checklist li::before{content:"";flex:0 0 22px;height:22px;border-radius:999px;margin-top:1px;background:linear-gradient(135deg,#ff6aa8,#fd69a6);position:relative;box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.m-auth-checklist li::after{content:"";position:absolute;width:6px;height:10px;border:2px solid #fff;border-top:0;border-left:0;transform:translate(8px,4px) rotate(45deg)}
.m-auth-checklist li{position:relative}
.m-auth-foot{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:rgba(255,255,255,.55);margin-top:1.5rem}
.m-auth-foot a{color:rgba(255,255,255,.85);text-decoration:none}
.m-auth-foot a:hover{text-decoration:underline}

.m-auth-main{display:flex;align-items:center;justify-content:center;padding:3rem 2rem;background:var(--fb-log-page-bg,#fff)}
.m-auth-card{width:100%;max-width:460px;background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:2.5rem;box-shadow:0 25px 60px rgba(15,23,42,.06)}
.m-auth-card-head{margin-bottom:1.75rem}
.m-auth-card-head h2{font-size:1.65rem;font-weight:800;letter-spacing:-.02em;color:#1e2339;margin:0 0 .35rem}
.m-auth-card-head p{font-size:.9rem;color:#64748b;margin:0}
.m-auth-card-head .m-auth-back{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;color:#64748b;text-decoration:none;margin-bottom:.85rem;font-weight:600}
.m-auth-card-head .m-auth-back:hover{color:var(--bp-primary,#f16a87)}
.m-auth-form{display:flex;flex-direction:column;gap:1rem}
.m-auth-form label{display:block;font-size:.82rem;font-weight:600;color:#374151;margin-bottom:.4rem}
.m-auth-input,.m-auth-select{width:100%;padding:.8rem .95rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:11px;font-size:.95rem;color:#1e2339;transition:border-color .15s,box-shadow .15s,background .15s;font-family:inherit}
.m-auth-input:focus,.m-auth-select:focus{outline:0;border-color:var(--bp-primary,#f16a87);background:#fff;box-shadow:0 0 0 4px rgba(var(--bp-primary-rgb,241,106,135),.1)}
.m-auth-hint{display:block;font-size:.75rem;color:#9ca3af;margin-top:.35rem}
.m-auth-owner-staff{display:flex!important;align-items:flex-start;gap:.7rem;padding:.85rem .9rem;margin:0!important;border:1px solid #f0dce4;border-radius:.8rem;background:#fff7fa;cursor:pointer;line-height:1.35}
.m-auth-owner-staff input{flex:0 0 auto;width:1rem;height:1rem;margin:.16rem 0 0;accent-color:#f16a87}
.m-auth-owner-staff span{display:block}
.m-auth-owner-staff strong{display:block;font-size:.84rem;color:#1e2338}
.m-auth-owner-staff small{display:block;margin-top:.18rem;font-size:.75rem;font-weight:400;color:#6b7280}
.m-auth-submit{width:100%;padding:.95rem 1rem;border:0;border-radius:11px;background:var(--bp-primary,#f16a87);color:var(--bp-button-text,#fff);font-size:.95rem;font-weight:700;cursor:pointer;letter-spacing:.01em;box-shadow:0 8px 20px rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s,filter .15s;margin-top:.5rem}
.m-auth-submit:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.18);filter:brightness(1.05)}
.m-auth-card-foot{margin-top:1.5rem;text-align:center;font-size:.85rem;color:#64748b}
.m-auth-card-foot a{color:var(--bp-primary,#f16a87);font-weight:600;text-decoration:none}
.m-auth-card-foot a:hover{text-decoration:underline}
.m-auth-alert{padding:.8rem 1rem;border-radius:10px;background:#fef2f2;color:#991b1b;border:1px solid #fecaca;font-size:.85rem;margin-bottom:1.25rem}

@media (max-width:900px){
  .m-auth-page{grid-template-columns:1fr}
  .m-auth-aside{padding:2rem 1.5rem;min-height:auto}
  .m-auth-aside-body{padding:1.5rem 0}
  .m-auth-headline{font-size:1.6rem}
  .m-auth-lede{font-size:.92rem;margin-bottom:1.5rem}
  .m-auth-checklist li{font-size:.88rem}
  .m-auth-foot{display:none}
  .m-auth-main{padding:2rem 1.25rem}
  .m-auth-card{padding:1.75rem;border-radius:16px}
}

/* === Device mockups (dm-*) === */
.m-split-visual .dm-browser,.m-split-visual .dm-phone,.m-split-visual .dm-sec{transform:translateZ(0)}
.dm-browser{border-radius:14px;background:#fff;box-shadow:0 30px 80px -20px rgba(15,23,42,.45),0 0 0 1px rgba(15,23,42,.08);overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.dm-browser-bar{background:#f1f5f9;border-bottom:1px solid #e2e8f0;padding:.55rem .75rem;display:flex;align-items:center;gap:.7rem;min-height:30px}
.dm-browser-dots{display:flex;gap:5px}
.dm-browser-dots span{width:9px;height:9px;border-radius:50%;background:#cbd5e1}
.dm-browser-dots span:nth-child(1){background:#fca5a5}
.dm-browser-dots span:nth-child(2){background:#fcd34d}
.dm-browser-dots span:nth-child(3){background:#86efac}
.dm-browser-body{background:#f8fafc;color:#1e2339;min-height:340px}

.dm-app{display:grid;grid-template-columns:54px 1fr;min-height:340px}
.dm-sidebar{background:#1e2339;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.75rem 0}
.dm-sidebar-logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--bp-primary,#f16a87),var(--bp-accent,#f16a87));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;margin-bottom:.5rem}
.dm-sidebar-item{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5)}
.dm-sidebar-item svg{width:18px;height:18px}
.dm-sidebar-item.dm-active{background:rgba(255,255,255,.12);color:#fff}
.dm-main{padding:.85rem 1rem 1rem;background:#fff;display:flex;flex-direction:column;gap:.75rem;min-width:0}
.dm-toolbar{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.dm-toolbar-title{font-weight:700;font-size:.95rem;color:#1e2339}
.dm-toolbar-sub{color:#94a3b8;font-weight:500;font-size:.8rem}
.dm-toolbar-actions{display:flex;gap:.4rem}
.dm-chip{font-size:.7rem;padding:.3rem .6rem;border-radius:7px;background:#f1f5f9;color:#475569;font-weight:600;border:1px solid #e2e8f0}
.dm-chip-primary{background:linear-gradient(135deg,var(--bp-primary,#f16a87),var(--bp-accent,#f16a87));color:#fff;border:none}

/* Calendar */
.dm-cal{flex:1;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fff;display:flex;flex-direction:column;min-height:260px}
.dm-cal-headrow{display:grid;grid-template-columns:38px repeat(6,1fr);background:#f8fafc;border-bottom:1px solid #e2e8f0}
.dm-cal-headcell{text-align:center;font-size:.65rem;font-weight:700;color:#64748b;padding:.4rem 0}
.dm-cal-todayhead{color:var(--bp-primary,#f16a87)}
.dm-cal-bodyrow{display:grid;grid-template-columns:38px 1fr;flex:1;min-height:230px}
.dm-cal-times{display:grid;grid-template-rows:repeat(7,1fr);font-size:.6rem;color:#94a3b8;border-right:1px solid #e2e8f0}
.dm-cal-times>div{padding:.3rem .25rem;text-align:right;border-bottom:1px dashed #f1f5f9}
.dm-cal-grid{display:grid;grid-template-columns:repeat(6,1fr)}
.dm-cal-col{position:relative;border-right:1px solid #f1f5f9;min-height:230px}
.dm-cal-col:last-child{border-right:none}
.dm-cal-today{background:rgba(241,106,135,.04)}
.dm-evt{position:absolute;left:3px;right:3px;border-radius:6px;padding:.25rem .35rem;font-size:.55rem;font-weight:600;color:#fff;line-height:1.15;overflow:hidden}
.dm-evt small{font-weight:500;opacity:.85;font-size:.5rem;display:block;margin-top:1px}
.dm-evt-violet{background:linear-gradient(135deg,#5a2338,#f16a87)}
.dm-evt-pink{background:linear-gradient(135deg,#f16a87,#fe6aa7)}
.dm-evt-amber{background:linear-gradient(135deg,#f59e0b,#fbbf24)}

/* KPIs */
.dm-pay-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.dm-pay-kpis.dm-pay-kpis-4,.dm-app .dm-pay-kpis:has(.dm-kpi:nth-child(4)){grid-template-columns:repeat(4,1fr)}
.dm-kpi{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:.6rem .7rem}
.dm-kpi-lbl{font-size:.62rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.dm-kpi-val{font-size:1.05rem;font-weight:800;color:#1e2339;margin-top:.15rem}
.dm-kpi-delta{font-size:.62rem;color:#64748b;margin-top:.15rem;font-weight:600}
.dm-kpi-delta.dm-up{color:#10b981}

/* Table */
.dm-table{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}
.dm-tr{display:grid;grid-template-columns:1.2fr 1.2fr 1fr .8fr .8fr;align-items:center;gap:.5rem;padding:.55rem .75rem;font-size:.72rem;border-bottom:1px solid #f1f5f9;color:#334155}
.dm-tr:last-child{border-bottom:none}
.dm-th{background:#f8fafc;font-size:.6rem;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.dm-ta-right{text-align:right;font-weight:700;color:#1e2339}
.dm-badge{font-size:.6rem;font-weight:700;padding:.2rem .5rem;border-radius:6px;text-align:center;justify-self:start}
.dm-badge-ok{background:#e8eaf2;color:#1e2339}
.dm-badge-pending{background:#fde8f2;color:#c03a70}

/* Chart */
.dm-chart{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:.7rem .8rem .5rem}
.dm-chart-title{font-size:.72rem;font-weight:700;color:#475569;margin-bottom:.4rem}
.dm-chart-svg{width:100%;height:100px;display:block}
.dm-chart-axis{display:flex;justify-content:space-between;font-size:.55rem;color:#94a3b8;margin-top:.2rem;font-weight:600}

/* Site preview */
.dm-site{background:#fff;font-size:.72rem;color:#1e2339}
.dm-site-nav{display:flex;justify-content:space-between;align-items:center;padding:.65rem 1rem;border-bottom:1px solid #e2e8f0;background:#fff}
.dm-site-logo{font-weight:800;font-size:.85rem;letter-spacing:-.01em}
.dm-site-links{display:flex;gap:.85rem;align-items:center;font-weight:600;color:#475569;font-size:.65rem}
.dm-site-cta{background:linear-gradient(135deg,var(--bp-primary,#f16a87),var(--bp-accent,#f16a87));color:#fff;padding:.3rem .65rem;border-radius:6px;font-size:.65rem;font-weight:700}
.dm-site-cta-ghost{padding:.3rem .65rem;border-radius:6px;font-size:.65rem;font-weight:700;border:1px solid #cbd5e1;color:#334155}
.dm-site-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:1rem;padding:1.2rem 1rem;background:linear-gradient(135deg,#faf5ff,#fdf2f8)}
.dm-site-hero-copy h3{font-size:1rem;line-height:1.2;margin:.3rem 0 .35rem;color:#1e2339;font-weight:800}
.dm-site-hero-copy p{font-size:.65rem;color:#64748b;margin:0 0 .55rem;line-height:1.4}
.dm-site-eyebrow{font-size:.55rem;font-weight:700;color:var(--bp-primary,#f16a87);text-transform:uppercase;letter-spacing:.08em}
.dm-site-hero-actions{display:flex;gap:.4rem}
.dm-site-hero-img{border-radius:10px;background:linear-gradient(135deg,#a78bfa 0%,#f9a8d4 60%,#fbbf24 100%);min-height:90px;position:relative;overflow:hidden}
.dm-site-hero-img::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.45),transparent 60%)}
.dm-site-services{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;padding:.85rem 1rem 1rem}
.dm-svc{display:flex;justify-content:space-between;align-items:center;padding:.55rem .65rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}
.dm-svc-name{font-weight:700;font-size:.7rem;color:#1e2339}
.dm-svc-meta{font-size:.55rem;color:#94a3b8;margin-top:.1rem}
.dm-svc-price{font-weight:800;font-size:.8rem;color:var(--bp-primary,#f16a87)}

/* Team */
.dm-team{display:flex;flex-direction:column;gap:.45rem}
.dm-team-card{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;background:#fff;border:1px solid #e2e8f0;border-radius:10px}
.dm-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.7rem;flex-shrink:0;background:linear-gradient(135deg,var(--bp-primary,#f16a87),var(--bp-accent,#f16a87))}
.dm-av-violet{background:linear-gradient(135deg,#5a2338,#f16a87)}
.dm-av-pink{background:linear-gradient(135deg,#f16a87,#fe6aa7)}
.dm-av-amber{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.dm-av-teal{background:linear-gradient(135deg,#14b8a6,#06b6d4)}
.dm-team-info{flex:1;min-width:0}
.dm-team-name{font-weight:700;font-size:.78rem;color:#1e2339}
.dm-team-role{font-size:.6rem;color:#94a3b8;margin-top:.1rem}
.dm-team-tags{display:flex;gap:.25rem;margin-top:.3rem;flex-wrap:wrap}
.dm-team-tags span{font-size:.55rem;font-weight:600;background:#f1f5f9;color:#475569;padding:.15rem .4rem;border-radius:5px}

/* Phone */
.dm-phone{width:240px;max-width:100%;margin:0 auto;background:#1e2339;border-radius:34px;padding:9px;box-shadow:0 30px 80px -20px rgba(15,23,42,.55),0 0 0 1px rgba(15,23,42,.15)}
.dm-phone-screen{background:#fff;border-radius:26px;overflow:hidden;position:relative;min-height:430px}
.dm-phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:18px;background:#1e2339;border-radius:0 0 14px 14px;z-index:3}
.dm-phone-status{display:flex;justify-content:space-between;padding:.45rem .9rem .15rem;font-size:.55rem;font-weight:700;color:#1e2339;position:relative;z-index:1}
.dm-phone-status-icons{font-size:.5rem;letter-spacing:.1em;color:#475569}
.dm-phone-body{padding:.4rem .55rem .8rem;height:calc(100% - 22px)}

/* Mail */
.dm-mail{font-size:.7rem;color:#1e2339}
.dm-mail-head{padding:.5rem .25rem .65rem;border-bottom:1px solid #f1f5f9}
.dm-mail-from{display:flex;align-items:center;gap:.5rem;margin-bottom:.45rem}
.dm-mail-sender{font-weight:700;font-size:.7rem}
.dm-mail-meta{font-size:.55rem;color:#94a3b8}
.dm-mail-subject{font-weight:800;font-size:.85rem;line-height:1.2;color:#1e2339}
.dm-mail-body p{font-size:.62rem;color:#475569;line-height:1.5;margin:.55rem 0}
.dm-mail-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:.55rem .65rem;margin:.55rem 0}
.dm-mail-card-row{display:flex;justify-content:space-between;font-size:.62rem;padding:.2rem 0;border-bottom:1px dashed #e2e8f0}
.dm-mail-card-row:last-child{border-bottom:none}
.dm-mail-card-row strong{color:#1e2339;font-weight:700}
.dm-mail-card-row span{color:#94a3b8;font-weight:600}
.dm-mail-cta{margin:.75rem 0 .35rem;padding:.55rem;text-align:center;background:linear-gradient(135deg,var(--bp-primary,#f16a87),var(--bp-accent,#f16a87));color:#fff;border-radius:8px;font-weight:700;font-size:.7rem}
.dm-mail-foot{font-size:.55rem!important;color:#94a3b8!important}

/* Widget on phone */
.dm-widget{position:relative;height:100%}
.dm-widget-host{position:relative;background:linear-gradient(180deg,#fff 0%,#faf5ff 100%);margin:-.4rem -.55rem 0;padding:.55rem .75rem .85rem;border-bottom:1px solid #f1e9ff}
.dm-widget-host-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.dm-widget-host-logo{font-weight:800;font-size:.75rem;color:#1e2339;display:flex;align-items:baseline;letter-spacing:-.01em}
.dm-widget-host-logo span{font-weight:700}
.dm-widget-host-burger{display:flex;flex-direction:column;gap:3px}
.dm-widget-host-burger span{width:14px;height:2px;background:#475569;border-radius:1px}
.dm-widget-host-hero{padding:.4rem 0 .15rem}
.dm-widget-host-eyebrow{font-size:.5rem;font-weight:700;color:var(--bp-primary,#f16a87);text-transform:uppercase;letter-spacing:.08em}
.dm-widget-host-title{font-size:.95rem;font-weight:800;color:#1e2339;margin-top:.1rem;letter-spacing:-.01em}
.dm-widget-panel{margin:.55rem .15rem;background:#fff;border-radius:14px;padding:.7rem .75rem;box-shadow:0 18px 40px -10px rgba(15,23,42,.22),0 0 0 1px rgba(15,23,42,.06);font-size:.7rem;position:relative;z-index:2}
.dm-widget-foot{margin:.85rem .35rem 0;display:flex;flex-direction:column;gap:.4rem}
.dm-widget-foot-row{height:8px;border-radius:4px;background:#f1f5f9}
.dm-widget-foot-row.dm-short{width:55%}
.dm-widget-step{font-size:.55rem;font-weight:700;color:var(--bp-primary,#f16a87);text-transform:uppercase;letter-spacing:.06em}
.dm-widget-svc{margin:.35rem 0;font-size:.65rem;color:#475569}
.dm-widget-svc strong{color:#1e2339}
.dm-widget-date{font-weight:700;font-size:.7rem;margin:.3rem 0 .4rem;color:#1e2339}
.dm-widget-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem}
.dm-widget-slots span{padding:.4rem 0;text-align:center;font-size:.6rem;font-weight:700;border:1px solid #e2e8f0;border-radius:6px;color:#334155;background:#fff}
.dm-widget-slots span.dm-active{background:linear-gradient(135deg,var(--bp-primary,#f16a87),var(--bp-accent,#f16a87));color:#fff;border-color:transparent}
.dm-widget-slots span.dm-disabled{color:#cbd5e1;text-decoration:line-through;background:#f8fafc}
.dm-widget-cta{margin-top:.55rem;padding:.55rem;text-align:center;background:#1e2339;color:#fff;border-radius:8px;font-weight:700;font-size:.7rem}

/* Security */
.dm-sec{background:#fff;border-radius:14px;padding:1.4rem 1.4rem 1.6rem;box-shadow:0 30px 60px -20px rgba(15,23,42,.3),0 0 0 1px rgba(15,23,42,.06);text-align:center}
.dm-sec-shield{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--hl-start),var(--hl-end));display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-bottom:.75rem;box-shadow:0 12px 30px -8px rgba(var(--bp-primary-rgb,168,200,194),.6)}
.dm-sec-shield svg{width:32px;height:32px}
.dm-sec-title{font-weight:800;font-size:1.05rem;color:var(--ink);margin-bottom:.85rem}
.dm-sec-rows{display:flex;flex-direction:column;gap:.4rem;text-align:left}
.dm-sec-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem .75rem;background:var(--bg-page-2);border:1px solid rgba(var(--bp-primary-rgb,168,200,194),.25);border-radius:8px;font-size:.78rem;font-weight:600;color:var(--ink)}
.dm-tick{width:22px;height:22px;border-radius:50%;background:rgba(var(--bp-primary-rgb,168,200,194),.3);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem}

@media(max-width:780px){
    .dm-browser-body{min-height:auto}
    .dm-app{grid-template-columns:42px 1fr}
    .dm-pay-kpis{grid-template-columns:repeat(2,1fr)}
    .dm-tr{grid-template-columns:1fr 1fr .8fr;font-size:.65rem}
    .dm-tr>span:nth-child(3),.dm-tr>span:nth-child(5){display:none}
    .dm-site-hero{grid-template-columns:1fr}
    .dm-site-services{grid-template-columns:1fr}
}

/* ==========================================================

/* ==========================================================
   SKEDRAL BRAND v3 — pale lavender + transparent fixed nav + mint CTA
   ========================================================== */
:root{
  --primary:var(--bp-ink, var(--ink));
  --primary-2:var(--bp-ink, var(--ink));
  --accent:var(--bp-cta-bg, var(--accent));
  --accent-2:var(--bp-cta-bg-hover, var(--accent-2));
  --accent-pink:var(--bp-hl-end, var(--hl-end));
  --bg-page:var(--bp-page-bg, var(--bg-page));
  --bg-page-2:var(--bp-page-bg-soft, var(--bg-page-2));
  --bg-soft:var(--bp-page-bg, var(--bg-page));
  --bg-card:var(--bp-pill-bg, #ffffff);
  --ink:var(--bp-ink, var(--ink));
  --ink-soft:var(--bp-ink-soft, #4b3a73);
  --dark-section-bg:var(--bp-dark-bg, var(--ink));
  --hl-start:var(--bp-hl-start, #ec4899);
  --hl-end:var(--bp-hl-end, #fe6aa7);
  --cta-text:var(--bp-cta-bg-text, var(--ink));
}
html,body{background:var(--bg-page)}
body{color:var(--ink)}
body.page-home{background:linear-gradient(180deg,var(--bg-page) 0%,var(--bg-page) 480px,var(--bg-page-2) 900px,#ffffff 1500px,#ffffff 100%)}

/* --- Fixed transparent nav --- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;backdrop-filter:none;border:none;box-shadow:none;padding:0;transition:background .2s,backdrop-filter .2s}
.site-header.scrolled{background:transparent;backdrop-filter:none;box-shadow:none}
.header-inner{transition:background .35s ease,color .35s ease,border-radius .35s ease,padding .35s ease,margin .35s ease,box-shadow .35s ease,max-width .35s ease,border-color .35s ease}
.site-header.scrolled .header-inner{background:#ffffff;color:var(--ink);border-radius:9999px;padding:.55rem .55rem .55rem 1.5rem;max-width:1180px;margin:.6rem auto;box-shadow:0 12px 40px -10px rgba(15,10,61,.18),0 4px 14px -4px rgba(15,10,61,.1);border:1px solid rgba(15,10,61,.06);gap:1.25rem;width:calc(100% - 2rem)}
.site-header .logo{flex-shrink:0}
.site-header .logo-img,.site-header.scrolled .logo-img{height:30px;width:auto;flex-shrink:0;transition:none}
.site-header .logo-icon,.site-header.scrolled .logo-icon{flex-shrink:0;transition:none}
.site-header .logo-text,.site-header.scrolled .logo-text{flex-shrink:0;white-space:nowrap;transition:color .35s ease;color:var(--ink)}
.site-header.scrolled .main-nav a{color:var(--ink);opacity:.78;transition:color .15s,opacity .15s}
.site-header.scrolled .main-nav a:hover,.site-header.scrolled .main-nav a.active{color:var(--accent);opacity:1}
.site-header.scrolled .btn-outline-header{color:var(--ink);background:transparent;opacity:.85}
.site-header.scrolled .btn-outline-header:hover{background:rgba(15,10,61,.06);opacity:1}
.site-header.scrolled .btn-primary-header{background:var(--accent);color:var(--bp-button-text,#fff);box-shadow:none}
.site-header.scrolled .btn-primary-header:hover{background:var(--accent);color:var(--bp-button-text,#fff);filter:brightness(.92);box-shadow:none}
.header-inner{background:transparent;color:var(--ink);border-radius:0;padding:1.1rem 1.5rem;max-width:1240px;margin:0 auto;box-shadow:none;border:none;gap:1.5rem}
.site-header .logo{color:var(--ink);font-weight:700}
.site-header .logo:hover{color:var(--ink)}
.site-header .logo-text{color:var(--ink);font-size:1.2rem;letter-spacing:-.01em;font-weight:700}
.site-header .logo-icon{background:linear-gradient(135deg,var(--bp-hl-start,#f16a87) 0%,var(--bp-hl-end,#fe6aa7) 100%);color:var(--bp-button-text,#fff);width:32px;height:32px;font-size:1rem;border-radius:9px;box-shadow:0 4px 14px rgba(var(--bp-accent-rgb,241,106,135),.35)}
.site-header .logo-img{filter:none;height:30px}
.site-header .main-nav{gap:1.75rem}
.site-header .main-nav a{color:var(--ink);font-size:.92rem;font-weight:600;border-bottom:none;padding:.4rem .25rem;opacity:.85;transition:color .15s,opacity .15s}
.site-header .main-nav a:hover,.site-header .main-nav a.active{color:var(--accent);opacity:1;border-bottom:none}
.site-header .header-actions{gap:.5rem}
.site-header .btn-outline-header{background:transparent;border:none;color:var(--ink);border-radius:9999px;padding:.55rem .9rem;font-size:.9rem;font-weight:600;opacity:.85}
.site-header .btn-outline-header:hover{background:rgba(15,10,61,.06);opacity:1}
.site-header .btn-primary-header{background:var(--accent);color:var(--bp-button-text,#fff);border-radius:9999px;padding:.65rem 1.4rem;font-weight:700;font-size:.9rem;border:none;box-shadow:none}
.site-header .btn-primary-header:hover{background:var(--accent);color:var(--bp-button-text,#fff);filter:brightness(.92);opacity:1;transform:translateY(-1px);box-shadow:none}
.site-header .mobile-toggle span{background:var(--ink)}

/* Push body content down to clear fixed nav */
main{padding-top:0}
body:not(.page-home) main>*:first-child{padding-top:6rem}

/* --- Mobile navigation drawer --- */
.mobile-menu-backdrop,.mobile-menu-drawer{display:contents}
.mobile-menu-close{display:none}
.auth-mobile-header{display:none}
@media(max-width:1024px){
  body.mobile-menu-open{overflow:hidden}
  .mobile-menu-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(15,10,61,.34);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease,visibility .22s ease;
  }
  .mobile-menu-backdrop.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .mobile-menu-drawer{
    display:flex;
    position:absolute;
    top:0;
    right:0;
    width:min(88vw,390px);
    height:100dvh;
    max-height:100dvh;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:4.5rem 1.25rem 1.5rem;
    background:#fff;
    box-shadow:-18px 0 45px rgba(15,10,61,.18);
    transform:translateX(100%);
    transition:transform .24s ease;
  }
  .mobile-menu-backdrop.open .mobile-menu-drawer{transform:translateX(0)}
  .mobile-menu-close{
    display:flex;
    position:absolute;
    top:1.05rem;
    right:1.1rem;
    width:2.25rem;
    height:2.25rem;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--ink,#1e2339);
    cursor:pointer;
  }
  .mobile-menu-close span{
    position:absolute;
    width:1.45rem;
    height:2px;
    border-radius:2px;
    background:currentColor;
  }
  .mobile-menu-close span:first-child{transform:rotate(45deg)}
  .mobile-menu-close span:last-child{transform:rotate(-45deg)}
  .mobile-menu-drawer .main-nav{
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
  }
  .mobile-menu-drawer .main-nav a{
    display:flex;
    align-items:center;
    min-height:3.2rem;
    padding:.85rem 0;
    border-bottom:1px solid var(--gray-100,#f3f4f6);
    font-size:1rem;
    color:var(--ink,#1e2339);
  }
  .mobile-menu-drawer .main-nav a:last-child{border-bottom:0}
  .mobile-menu-drawer .nav-dd{display:block;width:100%}
  .mobile-menu-drawer .nav-dd-trigger{
    display:flex;
    justify-content:space-between;
    width:100%;
    padding:.85rem 0!important;
    border-bottom:1px solid var(--gray-100,#f3f4f6);
  }
  .mobile-menu-drawer .nav-dd-panel{
    position:static;
    min-width:0;
    margin:0;
    padding:0 0 .5rem .75rem;
    border:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
    background:transparent;
  }
  .mobile-menu-drawer .nav-dd-mega-grid{grid-template-columns:1fr;gap:0}
  .mobile-menu-drawer .nav-dd-tile{padding:.55rem 0;border-bottom:1px solid var(--gray-100,#f3f4f6);border-radius:0}
  .mobile-menu-drawer .nav-dd-mega-foot{text-align:left;margin-top:.5rem;padding-top:.5rem}
  .mobile-menu-drawer .header-actions{
    display:flex;
    flex:0 0 auto;
    flex-direction:column;
    align-items:stretch;
    gap:.6rem;
    margin-top:1rem;
    padding-top:1rem;
    border-top:1px solid var(--gray-200,#e5e7eb);
  }
  .mobile-menu-drawer .header-actions .btn{
    width:100%;
    justify-content:center;
    padding:.75rem 1rem;
    font-size:.95rem;
  }
}

@media(max-width:900px){
  .auth-mobile-header{
    display:flex;
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:20;
    align-items:center;
    justify-content:flex-end;
    min-height:4.25rem;
    padding:.85rem 1.25rem;
    pointer-events:none;
  }
  .auth-mobile-header .m-auth-brand{
    display:flex;
    align-items:center;
    min-width:0;
    margin-right:auto;
    color:#fff;
    pointer-events:auto;
  }
  .auth-mobile-header .m-auth-brand img{max-height:40px;max-width:180px}
  .auth-mobile-header .mobile-toggle{
    display:flex!important;
    visibility:visible;
    opacity:1;
    margin-left:auto;
    padding:.55rem;
    pointer-events:auto;
  }
  .auth-mobile-header .mobile-toggle{
    width:2.75rem;
    height:2.75rem;
    align-items:center;
    justify-content:center;
    color:#fff!important;
  }
  .auth-mobile-header .mobile-toggle span{
    height:2.5px;
    background:#fff!important;
    box-shadow:0 1px 3px rgba(0,0,0,.28);
    opacity:1!important;
  }
  .m-auth-aside > .m-auth-brand{display:none}
  .m-auth-aside{padding-top:4.75rem}
}

/* --- Home hero (matches reference) --- */
body.page-home .hero{background:transparent !important;background-color:transparent !important;background-image:none !important;color:var(--bp-ink,#1e2339) !important;text-align:center !important;padding:9rem 0 3.5rem !important;min-height:auto !important;display:block !important;align-items:initial !important;position:relative;overflow:visible}
body.page-home .hero h1{color:var(--bp-ink,#1e2339) !important}
body.page-home .hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 460px at 18% 30%, rgba(232,121,249,.18), transparent 65%),
  radial-gradient(700px 380px at 86% 22%, rgba(var(--bp-accent-rgb,241,106,135),.14), transparent 65%);
  z-index:0;pointer-events:none}
/* White fade at the bottom of the hero so the area between the
   mockup image and the next (white) section is also white — without
   this, the page's cream gradient shows through and creates a
   visible horizontal seam at the section boundary. */
body.page-home .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:340px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 75%,#fff 100%);
  z-index:1;pointer-events:none}
body.page-home .hero-split-inner{position:relative;z-index:2;text-align:center;display:block !important;width:100%}
body.page-home .hero-copy{max-width:820px;margin:0 auto !important;text-align:center !important;padding:0 1rem;float:none}
body.page-home .hero h1{color:var(--bp-ink,#1e2339) !important;text-align:center !important;font-size:3.7rem;font-weight:800;letter-spacing:-.025em;line-height:1.05;margin:0 auto !important;max-width:820px}
body.page-home .hero h1 .title-accent{background:linear-gradient(90deg,var(--accent-grad-start,var(--hl-start)) 0%,var(--accent-grad-end,var(--hl-end)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.page-home .hero-sub{color:var(--bp-ink-soft,#5a5a5a) !important;text-align:center;margin:1.4rem auto 0 !important;max-width:640px;font-size:1.15rem;line-height:1.55}
body.page-home .hero-badge{background:rgba(255,255,255,.75);border:1px solid rgba(var(--bp-accent-rgb,241,106,135),.22);color:var(--bp-ink,#3a1f8f);backdrop-filter:blur(10px);box-shadow:0 4px 14px rgba(15,10,61,.04);font-weight:600}
body.page-home .hero-actions{justify-content:center !important;margin-top:2.25rem;gap:.85rem}
body.page-home .hero-actions .btn-primary{background:var(--accent) !important;color:var(--bp-button-text,#fff) !important;border-radius:9999px;padding:.95rem 1.8rem;font-weight:700;font-size:.98rem;box-shadow:0 6px 16px rgba(0,0,0,.12);border:none}
body.page-home .hero-actions .btn-primary:hover{background:var(--accent) !important;color:var(--bp-button-text,#fff) !important;filter:brightness(.92);transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.15)}
body.page-home .hero-actions .btn-outline{background:var(--bp-ink,#1e2339) !important;border:none !important;color:var(--bp-button-text,#fff) !important;border-radius:9999px;padding:.95rem 1.8rem;font-weight:700;font-size:.98rem;box-shadow:0 8px 24px rgba(15,10,61,.18)}
body.page-home .hero-actions .btn-outline:hover{background:var(--bp-ink,#1e2339) !important;color:var(--bp-button-text,#fff) !important;filter:brightness(1.15);transform:translateY(-1px)}

/* Hero microcopy */
.hero-microcopy{margin-top:1rem;color:var(--ink-soft);font-size:.88rem;text-align:center;opacity:.75;font-weight:500}

/* Hero dashboard mockup */
.hero-mockup{max-width:1080px;margin:3.5rem auto 0;padding:0 1rem;position:relative;z-index:2}
.hero-mockup-frame{background:#fff;border-radius:18px 18px 0 0;border:1px solid rgba(15,10,61,.06);border-bottom:none;overflow:hidden;position:relative}
/* Fade the dashboard image down to pure white (matching the next
   section's background) instead of fading to transparent — fading
   to transparent reveals the hero's cream gradient and creates a
   visible seam against the white section below. The white overlay
   gradient sits on top of the image and meets the next section
   seamlessly. */
.hero-mockup-frame::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:75%;
    background:linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.55) 45%,
        rgba(255,255,255,.92) 75%,
        #fff 100%);
    pointer-events:none;
}
.hero-mockup-img{display:block;width:100%;height:auto;border-radius:18px}
body.page-home .hero{padding-bottom:5rem}
.hero-mockup-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;background:#faf7fb;border-bottom:1px solid rgba(15,10,61,.06)}
.hero-mockup-bar i{display:block;width:11px;height:11px;border-radius:50%;background:#e8dcec}
.hero-mockup-bar i:nth-child(1){background:#ff6b6b}.hero-mockup-bar i:nth-child(2){background:#ffd93d}.hero-mockup-bar i:nth-child(3){background:var(--accent)}
.hero-mockup-bar .url{margin-left:auto;margin-right:auto;background:#fff;border:1px solid rgba(15,10,61,.08);padding:.25rem .9rem;border-radius:8px;font-size:.78rem;color:#7a6b9a}
.hero-mockup-body{display:grid;grid-template-columns:200px 1fr;min-height:380px;background:#fcfbfe}
.mock-side{background:var(--ink);padding:1rem .75rem;color:#fff}
.mock-side-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;padding:.4rem .5rem;margin-bottom:1rem}
.mock-side-brand .dot{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--bp-hl-start,#f16a87),var(--bp-hl-end,#fe6aa7))}
.mock-side a{display:flex;align-items:center;gap:.55rem;padding:.55rem .75rem;border-radius:8px;font-size:.82rem;color:rgba(255,255,255,.7);margin-bottom:.15rem}
.mock-side a.on{background:rgba(158,229,180,.15);color:var(--accent)}
.mock-side a .ic{width:14px;height:14px;background:currentColor;opacity:.7;border-radius:3px}
.mock-main{padding:1.2rem 1.4rem}
.mock-main-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.mock-main-title{font-weight:700;color:var(--ink);font-size:1rem}
.mock-main-tabs{display:flex;gap:.4rem}
.mock-main-tabs span{padding:.3rem .7rem;border-radius:6px;font-size:.72rem;color:#7a6b9a;background:#f3eef5}
.mock-main-tabs span.on{background:var(--ink);color:#fff}
.mock-cal-grid{display:grid;grid-template-columns:60px repeat(5,1fr);gap:.4rem;font-size:.7rem;color:#7a6b9a}
.mock-cal-grid .h{font-weight:600;color:var(--ink);text-align:center;padding:.3rem 0;border-bottom:1px solid #eee}
.mock-cal-grid .t{padding:.3rem 0;text-align:right;color:#a99fbe}
.mock-cal-grid .b{background:linear-gradient(135deg,var(--bp-hl-start,#f16a87),var(--bp-hl-end,#fe6aa7));color:var(--bp-button-text,#fff);border-radius:5px;padding:.35rem .4rem;font-size:.65rem;line-height:1.2;font-weight:600}
.mock-cal-grid .b.g{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--ink)}
.mock-cal-grid .b.p{background:linear-gradient(135deg,#fda4af,#fb7185);color:#fff}
.mock-cal-grid .b.y{background:linear-gradient(135deg,#fde68a,#fbbf24);color:#7c2d12}

/* Inner page hero */
.page-hero{background:transparent;padding:9rem 0 4rem;color:var(--ink);position:relative}
.page-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;background:radial-gradient(1100px 600px at 20% 8%,rgba(201,168,255,.32),transparent 65%),radial-gradient(900px 500px at 85% 0%,rgba(255,158,199,.24),transparent 65%);pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.page-hero > *{position:relative;z-index:1}
.page-hero.has-vx-marketing-hero{overflow:hidden;isolation:isolate}
.page-hero.has-vx-marketing-hero>.vx-marketing-hero-image{position:absolute;inset:0;display:block;background-position:center;background-size:cover;background-repeat:no-repeat;filter:grayscale(1);z-index:0;pointer-events:none}
.page-hero.has-vx-marketing-hero::before{z-index:1}
.page-hero.has-vx-marketing-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.72) 72%,#fff 100%);pointer-events:none;z-index:1}
.page-hero.has-vx-marketing-hero>:not(.vx-marketing-hero-image){z-index:2}
.page-hero h1{color:var(--ink)}
 .page-hero .hero-sub{color:#1e2339}
.page-hero .title-accent{background:linear-gradient(90deg,var(--accent-grad-start,var(--hl-start)),var(--accent-grad-end,var(--hl-end)));-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero + .section,section.section + .section{background:transparent}
/* Feature-page hero CTAs — match the sector page hero treatment:
   primary stays the brand pink→cyan gradient on hover (the global
   .btn-primary:hover{opacity:.9} rule was fading it to grey on the
   light hero background), and the secondary becomes a solid black
   pill with white text so it reads cleanly on the pink-tinted hero. */
.page-hero-actions .btn-primary,
.page-hero-actions .btn-primary:hover{background:linear-gradient(135deg,var(--hl-start,#f16a87),var(--hl-end,#fe6aa7));color:#fff;border:none;opacity:1}
.page-hero-actions .btn-primary{box-shadow:0 14px 36px -10px rgba(var(--bp-primary-rgb,241,106,135),.45)}
.page-hero-actions .btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 42px -10px rgba(var(--bp-primary-rgb,241,106,135),.55)}
.page-hero-actions .btn-outline,
.page-hero-actions .btn-outline:hover{background:#1e2339;color:#fff;border:1px solid #1e2339;opacity:1}
.page-hero-actions .btn-outline:hover{background:#1f1f2c;border-color:#1f1f2c}
/* Feature-page "included in every subscription" addon badge —
   the previous markup used the raw m_icon() output which has no
   explicit width/height, so the sparkles SVG was rendering at the
   container's full block width. Constrain it to a sensible inline
   size and let the badge size from its content. */
.page-hero-addon{display:inline-flex;align-items:center;gap:.5rem;background:rgba(var(--bp-accent-rgb,241,106,135),.10);color:var(--bp-accent,#f16a87);padding:.4rem .9rem;border-radius:9999px;font-weight:600;font-size:.85rem;line-height:1}
.page-hero-addon-icon{display:inline-flex;width:16px;height:16px;flex:none}
.page-hero-addon-icon svg{width:16px;height:16px;stroke-width:2}
body:not(.page-home){background:linear-gradient(180deg,var(--bg-page) 0%,var(--bg-page-2) 320px,#ffffff 760px,#ffffff 100%)}

/* Auth pages — dark hero aside (matches .dark-section) */
.m-auth-aside{background:var(--fb-log-aside-bg,var(--dark-section-bg,#1e2339)) !important;background-image:radial-gradient(900px 420px at 92% 8%,rgba(var(--bp-primary-rgb,0,180,216),.18),transparent 60%),radial-gradient(700px 380px at 8% 95%,rgba(247,37,133,.10),transparent 65%) !important;color:#e8e8ea !important}
.m-auth-aside::before{background:none !important}
.m-auth-aside .m-auth-brand,.m-auth-aside .m-auth-brand:hover{color:#fff}
.m-auth-eyebrow{background:rgba(255,255,255,.08) !important;color:rgba(255,255,255,.85) !important;border:1px solid rgba(255,255,255,.14) !important}
.m-auth-headline{color:#fff !important}
.m-auth-headline .m-auth-grad{background:linear-gradient(135deg,var(--accent-grad-start,var(--hl-start)) 0%,var(--accent-grad-end,var(--hl-end)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:brightness(1.1) saturate(1.05)}
.m-auth-lede{color:rgba(255,255,255,.7) !important}
.m-auth-foot{color:rgba(255,255,255,.5) !important}
.m-auth-foot a{color:rgba(255,255,255,.7)}
.m-auth-foot a:hover{color:#fff}
.m-auth-checklist li{color:rgba(255,255,255,.85) !important}
/* Auth submit/primary buttons must follow the merchant brand colour
   (--bp-primary, sourced from platform_settings.brand_primary_color),
   NOT --accent — which is remapped above to --bp-cta-bg, the pastel
   green used for the marketing CTA pill. Without these overrides the
   "Send reset link" / "Sign in" buttons render in CTA green. */
.m-auth-submit{background:var(--bp-primary,#f16a87) !important;color:var(--bp-button-text,#fff) !important;box-shadow:0 6px 16px rgba(0,0,0,.18) !important}
.m-auth-submit:hover{background:var(--bp-primary,#f16a87) !important;color:var(--bp-button-text,#fff) !important;filter:brightness(.92) !important}
.m-auth-card .btn,.m-auth-card .btn-primary{background:var(--bp-primary,#f16a87) !important;color:var(--bp-button-text,#fff) !important;border-radius:9999px;font-weight:700;border:none;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.m-auth-card .btn-primary:hover{background:var(--bp-primary,#f16a87) !important;color:var(--bp-button-text,#fff) !important;filter:brightness(.92)}
.m-auth-checklist li::before{background:linear-gradient(135deg,#ff6aa8,#fd69a6) !important}
.m-auth-card-head .m-auth-back:hover,.m-auth-card-foot a{color:var(--ink)}
.auth-page{background:linear-gradient(180deg,var(--bg-page) 0%,var(--bg-page-2) 60%,#ffffff 100%)}

/* Dark section recolor */
.dark-section{background:var(--dark-section-bg,#1e2339);background-image:radial-gradient(900px 420px at 92% 8%,rgba(var(--bp-primary-rgb,0,180,216),.18),transparent 60%),radial-gradient(700px 380px at 8% 95%,rgba(247,37,133,.10),transparent 65%);color:#e8e8ea}
.dark-section h1,.dark-section h2,.dark-section h3{color:#fff}
.dark-section p{color:rgba(255,255,255,.7)}
.dark-section .title-accent{background:linear-gradient(90deg,var(--hl-start,var(--accent-grad-start,#ec4899)),var(--hl-end,#fe6aa7));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Soft section bg */
.section-alt{background:var(--bg-page-2)}
.section{background:transparent}

/* Buttons (global pill) */
.btn{border-radius:9999px}
.btn-primary{background:var(--accent);color:var(--bp-button-text,#fff)}.btn-primary:hover{background:var(--accent);color:var(--bp-button-text,#fff);filter:brightness(.92);opacity:1}
/* Inside the near-black CTA card, use a vibrant brand button so it pops against the dark panel */
.m-cta-card .btn-primary{background:linear-gradient(135deg,var(--hl-start),var(--hl-end));color:#fff;border:none;box-shadow:0 14px 36px -10px rgba(var(--bp-primary-rgb,0,180,216),.55),0 6px 18px -6px rgba(247,37,133,.35)}
.m-cta-card .btn-primary:hover{background:linear-gradient(135deg,var(--hl-start),var(--hl-end));color:#fff;transform:translateY(-1px);box-shadow:0 18px 42px -10px rgba(var(--bp-primary-rgb,0,180,216),.65),0 8px 22px -6px rgba(247,37,133,.45)}
.btn-outline{background:#fff;border:1px solid rgba(var(--bp-primary-rgb,168,200,194),.35);color:var(--ink)}
.btn-outline:hover{background:var(--bg-page-2);border-color:rgba(var(--bp-primary-rgb,168,200,194),.6)}

/* Cards/promo */
/* Solid brand-pink pill — white text for legibility on the saturated
   accent background (replaces the previous low-contrast tinted pill
   where dark ink sat on a light wash). Applies to every "BOOKING
   WIDGET / HOSTED WEBSITES" style eyebrow on the public site. */
.promo-label{background:var(--bp-accent,var(--accent,#ec4899))!important;color:#fff!important}
/* ============================================================
   Homepage: trust strip (sits directly under the hero).
   ============================================================ */
.trust-strip{padding:2.25rem 0;background:transparent;position:relative;z-index:2}
.trust-strip .container{max-width:1080px}
.trust-strip-items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:1.25rem;font-size:.84rem;color:var(--bp-ink-soft,#5a5a5a);font-weight:500}
.trust-strip-items li{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap}
.trust-strip-items .trust-dot{width:8px;height:8px;border-radius:50%;background:var(--bp-accent,#f16a87);box-shadow:0 0 0 4px rgba(var(--bp-accent-rgb,241,106,135),.12);flex:none}
@media(max-width:700px){.trust-strip-items{flex-wrap:wrap;gap:.75rem 1.25rem;font-size:.85rem}.trust-strip-items li{white-space:normal}}

/* ============================================================
   Homepage: grow revenue (memberships / packages / gift cards /
   loyalty stamps). White section with 4 cards in a single row.
   ============================================================ */
.grow-revenue-section{padding:5rem 0}
.grow-revenue-section .ets-header,.grow-revenue-section .grow-header{margin-bottom:3rem;text-align:center}
.grow-eyebrow{display:inline-block;background:var(--bp-accent,#f16a87);color:#fff;font-size:.72rem;font-weight:700;padding:.3rem .75rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem}
.grow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.grow-card{background:#fff;border:1px solid rgba(15,10,61,.08);border-radius:18px;padding:1.75rem 1.5rem;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.grow-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.07);border-color:rgba(var(--bp-accent-rgb,241,106,135),.35)}
.grow-card .grow-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,rgba(var(--bp-accent-rgb,241,106,135),.12),rgba(0,180,216,.10));color:var(--bp-accent,#f16a87);margin-bottom:1rem}
.grow-card .grow-icon svg{width:24px;height:24px}
.grow-card h3{margin:0 0 .4rem;font-size:1.05rem;font-weight:700;color:var(--bp-ink,#1e2339)}
.grow-card p{margin:0;font-size:.9rem;line-height:1.5;color:var(--bp-ink-soft,#5a5a5a)}
/* Dark variant: when grow_revenue is rendered as a dark-section,
   override the .dark-section default left-aligned title styles
   (the grow header is centred) and switch the cards to a
   translucent-on-dark glassy treatment so they still read clearly. */
.grow-revenue-section--dark{background:var(--bp-dark-bg,#1e2339);color:#fff}
.grow-revenue-section--dark .section-title-lg{color:#fff;text-align:center;margin:0 auto .9rem;max-width:820px}
.grow-revenue-section--dark .section-subtitle-lg{color:rgba(255,255,255,.7);text-align:center;margin:0 auto;max-width:680px}
/* Keep the dark revenue features open and editorial: the icon tile carries
   the visual anchor, while the feature content itself should not sit inside
   four separate bordered boxes. */
.grow-revenue-section--dark .grow-card{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.grow-revenue-section--dark .grow-card:hover{background:transparent;border-color:transparent;box-shadow:none;transform:none}
.grow-revenue-section--dark .grow-card h3{color:#fff}
.grow-revenue-section--dark .grow-card p{color:rgba(255,255,255,.65)}
/* Branded gradient icon tile + dark-pill eyebrow on the dark
   grow_revenue band — matches every other dark-section across
   the site (gradient pink→cyan tile, white SVG logo, transparent
   pill with gradient text). */
.grow-revenue-section--dark .grow-card .grow-icon{background:linear-gradient(135deg,var(--hl-start,#f16a87),var(--hl-end,#fe6aa7));color:#fff;box-shadow:0 8px 22px -8px rgba(var(--bp-accent-rgb,241,106,135),.55)}
.grow-revenue-section--dark .grow-card .grow-icon svg{color:#fff;stroke:#fff}
.grow-revenue-section--dark .grow-eyebrow{position:relative;isolation:isolate;background:linear-gradient(90deg,var(--hl-start,#f16a87),var(--hl-end,#fe6aa7));-webkit-background-clip:text;background-clip:text;color:transparent;border:1px solid rgba(255,255,255,.12)}
.grow-revenue-section--dark .grow-eyebrow::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.04);z-index:-1}
@media(max-width:1000px){.grow-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grow-grid{grid-template-columns:1fr}.grow-revenue-section{padding:3.5rem 0}}

/* ============================================================
   Homepage: mobile app section. Reuses .promo-section / .promo-grid
   layout — only the phone visual + bullet list are bespoke here.
   ============================================================ */
.mobile-app-points{list-style:none;padding:0;margin:1.25rem 0 1.5rem;display:grid;gap:.55rem}
.mobile-app-points li{display:flex;align-items:center;gap:.6rem;font-size:.95rem;color:var(--bp-ink,#1e2339)}
.mobile-app-tick{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(var(--bp-accent-rgb,241,106,135),.14);color:var(--bp-accent,#f16a87);font-size:.7rem;font-weight:800;flex:none}
.mobile-app-stores{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.mobile-app-store,.mobile-app-store:visited,.mobile-app-store:hover,.mobile-app-store:focus,.mobile-app-store:focus-visible{display:inline-flex;align-items:center;gap:.45rem;background:var(--bp-ink,#1e2339);color:#fff;border-radius:10px;padding:.65rem 1.1rem;font-weight:600;font-size:.88rem;text-decoration:none;transition:transform .15s ease,filter .15s ease}
.mobile-app-store:hover{transform:translateY(-1px);filter:brightness(1.15);color:#fff}
.mobile-app-store--google-play,.mobile-app-store--google-play:visited,.mobile-app-store--google-play:hover,.mobile-app-store--google-play:focus,.mobile-app-store--google-play:focus-visible{padding:0;background:transparent;border-radius:0;line-height:0;overflow:visible;filter:none}
.mobile-app-store--google-play:hover{transform:translateY(-1px);filter:brightness(1.07)}
.mobile-app-store--google-play img{display:block;width:auto;height:58px;max-width:100%}
/* Reuse the silver phone chassis from feature pages so the homepage app
   preview reads as a real device rather than an unframed screen capture. */
.mobile-app-mockup{width:100%;max-width:480px;margin:0 auto}
.mobile-app-mockup .fp-phone-wrap{max-width:480px}
@media(max-width:760px){.mobile-app-mockup .fp-phone-wrap{height:390px;padding:32px 28px 0}.mobile-app-mockup .fp-phone{width:238px}.mobile-app-mockup .fp-phone-screen{height:500px}.mobile-app-mockup .fp-screen-single-wrap{height:500px}.mobile-app-mockup .fp-screen-single{height:353px}}

.modern-card{background:#fff;border:1px solid rgba(var(--bp-primary-rgb,168,200,194),.25);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.modern-card:hover{box-shadow:0 14px 34px rgba(0,0,0,.08);border-color:rgba(var(--bp-primary-rgb,168,200,194),.5)}
.modern-card-icon{background:rgba(var(--bp-primary-rgb,168,200,194),.2);color:var(--ink)}

/* Footer */
.site-footer{background:var(--ink)}

/* Mobile */
@media(max-width:900px){
  .header-inner{padding:.85rem 1rem;gap:.5rem}
  .site-header .main-nav{position:absolute;top:calc(100% + 0px);left:.75rem;right:.75rem;background:#fff;border:1px solid rgba(15,10,61,.08);border-radius:14px;flex-direction:column;align-items:stretch;padding:.5rem;gap:0;box-shadow:0 14px 38px rgba(15,10,61,.18);display:none}
  .site-header .main-nav.open{display:flex}
  .site-header .main-nav a{padding:.75rem 1rem;border-radius:10px}
  .site-header .main-nav a:hover{background:#faf5ff;color:var(--accent)}
  body.page-home .hero{padding:6rem 0 2.5rem !important}
  body.page-home .hero h1{font-size:2.3rem}
  body.page-home .hero-sub{font-size:1rem}
  body.page-home .hero-actions{flex-direction:column;align-items:stretch}
  .hero-mockup-body{grid-template-columns:1fr}
  .mock-side{display:none}
  body:not(.page-home) main>*:first-child{padding-top:5rem}
}

/* "Every tool" hero — split layout + orbiting phone */
.every-tool-section{
    --ets-primary:var(--bp-primary);
    --ets-accent:var(--bp-accent);
    --ets-ink:var(--bp-ink);
    background:var(--bp-surface);
    overflow:hidden;
}
.every-tool-section .ets-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:4rem;
    align-items:start;
}
.every-tool-section .ets-header{width:100%;max-width:none;margin:0 0 3rem;text-align:center}
.every-tool-section .ets-copy{padding-right:1rem;min-height:560px}
.every-tool-section .ets-title{text-align:center;margin-left:auto;margin-right:auto;max-width:920px}
.every-tool-section .ets-sub{text-align:center;margin-left:auto;margin-right:auto;max-width:720px;margin-bottom:0}
.every-tool-section .ets-feature-list{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:1.1rem}
.every-tool-section .ets-feature-list li{display:flex;align-items:flex-start;gap:.95rem}
/* Selector intentionally specific (li span.ets-feat-icon) so it wins
   against the sibling rule `.ets-feature-list li span { display:block }`
   below, which would otherwise force the icon back to display:block and
   defeat the centring. */
.every-tool-section .ets-feature-list li span.ets-feat-icon{
    flex:0 0 44px;width:44px;height:44px;aspect-ratio:1;
    display:flex;align-items:center;justify-content:center;
    padding:0;line-height:0;
    border-radius:12px;
    background:#1e2339;
    color:#fff;
    box-shadow:0 8px 18px -8px rgba(0,0,0,.45),0 2px 6px -2px rgba(0,0,0,.18);
    margin-top:2px;
}
.every-tool-section .ets-feature-list li span.ets-feat-icon svg{
    width:24px;height:24px;
    display:block;margin:auto;
    stroke:#fff;flex:none;
    overflow:visible;
}
.every-tool-section .ets-feature-list li strong{display:block;font-size:1rem;font-weight:700;color:var(--bp-text-strong);margin-bottom:.15rem}
.every-tool-section .ets-feature-list li span{display:block;font-size:.92rem;color:var(--bp-text-mid);line-height:1.5}
.every-tool-section .ets-cta{margin-top:.5rem}

.every-tool-section .ets-phone-col{
    position:sticky;top:90px;align-self:start;
    display:flex;justify-content:center;align-items:center;
    min-height:560px;
}

.every-tool-section .ets-phone-stage{
    --stage-size:520px;--orbit-radius:215px;--card-size:96px;
    position:relative;width:var(--stage-size);height:var(--stage-size);
    max-width:100%;
}

.every-tool-section .ets-phone-rings{position:absolute;inset:0;pointer-events:none;z-index:0}
.every-tool-section .ets-ring{
    position:absolute;left:50%;top:50%;border-radius:50%;
    border:1px dashed rgba(var(--bp-primary-rgb),.18);
    transform:translate(-50%,-50%);
}
.every-tool-section .ets-ring--outer{width:calc(var(--orbit-radius) * 2 + 80px);height:calc(var(--orbit-radius) * 2 + 80px)}
.every-tool-section .ets-ring--inner{width:calc(var(--orbit-radius) * 2 - 40px);height:calc(var(--orbit-radius) * 2 - 40px);border-color:rgba(var(--bp-accent-rgb),.16)}
.every-tool-section .ets-spark{position:absolute;width:8px;height:8px;border-radius:50%;opacity:.55}
.every-tool-section .ets-spark--a{top:18%;left:9%;background:var(--ets-accent)}
.every-tool-section .ets-spark--b{bottom:14%;right:12%;background:var(--ets-primary)}
.every-tool-section .ets-spark--c{top:62%;left:6%;background:var(--ets-accent);width:6px;height:6px;opacity:.45}

.every-tool-section .ets-phone{
    position:absolute;left:50%;top:50%;
    width:230px;height:460px;transform:translate(-50%,-50%);
    background:var(--ets-ink);border-radius:38px;padding:10px;
    box-shadow:0 30px 70px -20px var(--bp-shadow-strong), 0 8px 22px -10px var(--bp-shadow-soft);
    z-index:2;
}
/* Silver fp-phone frame variant used inside the orbit hero */
.every-tool-section .ets-phone.fp-phone{
    background:linear-gradient(160deg,#f0f0f0 0%,#d6d6d6 100%);
    box-shadow:0 0 0 1px rgba(0,0,0,.09),0 0 0 2.5px rgba(255,255,255,.9) inset,0 32px 80px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.14);
    padding:5px;
}
.every-tool-section .ets-phone-notch{
    position:absolute;left:50%;top:14px;transform:translateX(-50%);
    width:90px;height:22px;background:var(--ets-ink);
    border-radius:0 0 14px 14px;z-index:3;
}
.every-tool-section .ets-phone-screen{
    position:relative;width:100%;height:100%;
    background:#fff;
    border-radius:30px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}
/* Tall Settings-screen capture used as a slow scrolling wallpaper.
   The image is rendered at full screen width (so columns line up
   with the phone frame) and is taller than the viewport, so we
   animate background-position-y between top (0%) and bottom (100%)
   to give a gentle "scrolling through the app" feel. */
.every-tool-section .ets-phone-screen::before{
    content:"";position:absolute;inset:0;
    background:url('/assets/images/phone-app-scroll.png?v=2') center top / 100% auto repeat-y;
    animation:ets-phone-scroll 57s ease-in-out infinite alternate;
    z-index:0;
}
/* Lighter tint than before: subtle dark wash with a hint of cyan so
   the screenshot still reads but recedes behind the orbiting cards. */
.every-tool-section .ets-phone-screen::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,
        rgba(11,11,20,.22) 0%,
        rgba(11,30,52,.14) 50%,
        rgba(11,11,20,.28) 100%),
        radial-gradient(120% 90% at 50% 50%, rgba(0,180,216,.10), rgba(0,180,216,0) 70%);
    pointer-events:none;z-index:1;
}
@keyframes ets-phone-scroll{
    0%   { background-position: center 0%; }
    100% { background-position: center 100%; }
}
@media (prefers-reduced-motion: reduce){
    .every-tool-section .ets-phone-screen::before{animation:none}
}
.every-tool-section .ets-phone-logo-img{position:relative;z-index:2}
.every-tool-section .ets-phone-logo{
    font-size:128px;font-weight:900;line-height:1;letter-spacing:-.06em;
    background:linear-gradient(135deg,var(--ets-ink) 35%,var(--ets-primary) 70%,var(--ets-accent) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.every-tool-section .ets-phone-logo-img{
    /* White rounded "app icon" tile so the centred Velixa mark stays
       legible against the busy Settings-screen wallpaper behind it. */
    width:54%;height:auto;max-width:120px;aspect-ratio:1/1;display:block;
    object-fit:contain;
    background:#fff;border-radius:22px;padding:14px;
    box-shadow:0 14px 28px rgba(15,10,61,.22), 0 4px 8px rgba(15,10,61,.14);
}

.every-tool-section .ets-orbit{
    position:absolute;left:50%;top:50%;width:0;height:0;
    transform:translate(-50%,-50%);z-index:3;
}
.every-tool-section .ets-orbit-slot{
    position:absolute;left:0;top:0;
    animation:ets-orbit-spin 28s linear infinite;
    animation-delay:var(--orbit-delay,0s);
}
.every-tool-section .ets-orbit-card{
    position:absolute;
    left:calc(var(--card-size, 96px) * -.5);
    top:calc(var(--orbit-radius, 215px) * -1 - var(--card-size, 96px) * .5);
    width:var(--card-size,96px);height:var(--card-size,96px);
    border-radius:18px;padding:10px 6px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    color:#fff;text-align:center;
    box-shadow:0 18px 40px -14px var(--bp-shadow-strong), 0 8px 18px -10px var(--bp-shadow-soft);
    animation:ets-orbit-counter 28s linear infinite;
    animation-delay:var(--orbit-delay,0s);
}
.every-tool-section .ets-orbit-card--dark{background:var(--bp-orbit-dark-bg,#1e2339)}
.every-tool-section .ets-orbit-card--dark .ets-orbit-icon{color:var(--bp-orbit-dark-icon,var(--bp-primary,#00b4d8))}
.every-tool-section .ets-orbit-card--pink{background:var(--ets-accent,var(--bp-accent,#f16a87))}
.every-tool-section .ets-orbit-card--pink .ets-orbit-icon{color:var(--bp-button-text,#fff)}
.every-tool-section .ets-orbit-icon{display:inline-flex;align-items:center;justify-content:center}
.every-tool-section .ets-orbit-icon svg{width:26px;height:26px;display:block}
.every-tool-section .ets-orbit-label{display:block;font-size:.7rem;font-weight:600;letter-spacing:.005em;color:#fff;white-space:nowrap;line-height:1;text-shadow:none}

@keyframes ets-orbit-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ets-orbit-counter{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

@media (prefers-reduced-motion: reduce){
    .every-tool-section .ets-orbit-slot,
    .every-tool-section .ets-orbit-card{animation-play-state:paused}
}

@media (max-width: 980px){
    .every-tool-section .ets-grid{grid-template-columns:1fr;gap:2.5rem}
    .every-tool-section .ets-copy{padding-right:0;min-height:0;order:2}
    .every-tool-section .ets-phone-col{position:static;min-height:0;padding-top:0;order:1;margin-bottom:.5rem}
    .every-tool-section .ets-phone-stage{--stage-size:400px;--orbit-radius:165px;--card-size:78px}
    .every-tool-section .ets-phone{width:180px;height:360px;border-radius:30px;padding:8px}
    .every-tool-section .ets-phone.fp-phone{padding:8px}
    .every-tool-section .ets-phone-screen{border-radius:22px}
    .every-tool-section .ets-phone-notch{width:72px;height:18px}
    .every-tool-section .ets-phone-logo{font-size:96px}
    .every-tool-section .ets-orbit-icon svg{width:22px;height:22px}
    .every-tool-section .ets-orbit-label{font-size:.62rem}
}
@media (max-width: 480px){
    .every-tool-section .ets-phone-stage{--stage-size:320px;--orbit-radius:130px;--card-size:64px}
    .every-tool-section .ets-phone{width:140px;height:280px;border-radius:24px;padding:6px}
    .every-tool-section .ets-phone.fp-phone{padding:6px}
    .every-tool-section .ets-phone-screen{border-radius:18px}
    .every-tool-section .ets-phone-notch{width:56px;height:14px}
    .every-tool-section .ets-phone-logo{font-size:72px}
    .every-tool-section .ets-orbit-card{padding:6px 4px;gap:3px}
    .every-tool-section .ets-orbit-icon svg{width:18px;height:18px}
    .every-tool-section .ets-orbit-label{font-size:.55rem}
}

/* Pricing card — gradient header + pink pill CTA */
.pricing-card-gradient{border:2px solid var(--bp-primary)}
.pricing-header-gradient{
    background:linear-gradient(135deg,var(--bp-primary) 0%,var(--bp-accent) 100%);
    color:var(--bp-surface);padding:2.25rem 2rem;text-align:center;
}
.pricing-header-gradient h3{font-size:1.15rem;font-weight:600;margin-bottom:.65rem;color:var(--bp-surface);letter-spacing:.005em}
.pricing-header-gradient .pricing-amount{font-size:3.25rem;font-weight:800;line-height:1;color:var(--bp-surface)}
.pricing-header-gradient .pricing-amount span{font-size:1.05rem;font-weight:500;opacity:.85;margin-left:.15rem}
.pricing-header-gradient .pricing-meta{margin-top:.85rem;font-size:.95rem;color:var(--bp-surface);opacity:.92;font-weight:500}

.btn-pink-pill{
    background:var(--bp-accent);color:var(--bp-surface);border-radius:9999px;
    padding:.85rem 2rem;font-weight:600;font-size:1rem;border:0;
    box-shadow:0 10px 24px -8px rgba(var(--bp-accent-rgb),.5);
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-pink-pill:hover{opacity:.94;transform:translateY(-1px);text-decoration:none;color:var(--bp-surface)}
.btn-pink-pill.btn-lg{padding:1rem 2.25rem;font-size:1.05rem}

.faq-section .faq-section-title{margin-bottom:2.5rem}
.faq-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;
    max-width:1080px;margin:0 auto;
}
.faq-grid .faq-col{display:flex;flex-direction:column}
.faq-grid .faq-item{
    background:transparent;border:0;border-bottom:1px solid var(--bp-divider);
    border-radius:0;margin:0;overflow:hidden;
}
.faq-grid .faq-item:first-child{border-top:1px solid var(--bp-divider)}
.faq-grid .faq-question{
    display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
    width:100%;padding:1.15rem 0;background:none;border:0;cursor:pointer;
    text-align:left;font-size:1rem;font-weight:600;color:var(--bp-text-strong);
    line-height:1.4;
}
.faq-grid .faq-q-text{flex:1 1 auto}
.faq-grid .faq-toggle{
    flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    position:relative;width:30px;height:30px;border-radius:50%;
    background:var(--bp-toggle-bg);color:var(--bp-toggle-fg);
    transition:background .15s ease, color .15s ease;
    margin-top:2px;
}
.faq-grid .faq-toggle-bar{position:absolute;background:currentColor;border-radius:2px;transition:transform .2s ease, opacity .2s ease}
.faq-grid .faq-toggle-bar--h{width:12px;height:2px;left:9px;top:14px}
.faq-grid .faq-toggle-bar--v{width:2px;height:12px;left:14px;top:9px}
.faq-grid .faq-item.open .faq-toggle{background:var(--bp-accent);color:var(--bp-surface)}
.faq-grid .faq-item.open .faq-toggle-bar--v{transform:scaleY(0)}
.faq-grid .faq-item.open .faq-q-text{color:var(--bp-accent)}
.faq-grid .faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease, padding .2s ease}
.faq-grid .faq-item.open .faq-answer{max-height:600px;padding:.25rem 0 1.1rem}
.faq-grid .faq-answer p{margin:0;font-size:.92rem;color:var(--bp-text-mid);line-height:1.6;padding-right:2rem}

@media (max-width: 820px){
    .faq-grid{grid-template-columns:1fr;gap:0;max-width:680px}
}

/* ============================================================
 * Task #158 — Header dropdown navigation (Features mega-menu
 * + Sectors flyout). Hover/focus on desktop, click-to-open on
 * mobile via .nav-dd.is-open toggled by public.js.
 * ============================================================ */
.nav-dd{position:relative;display:inline-flex;align-items:center}
.nav-dd-trigger{cursor:pointer;display:inline-flex;align-items:center;gap:.25rem}
.nav-dd-caret{font-size:.7rem;opacity:.7;transition:transform .15s}
.nav-dd:hover .nav-dd-caret,.nav-dd.is-open .nav-dd-caret{transform:rotate(180deg)}
.nav-dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--gray-200,#e5e7eb);border-radius:14px;box-shadow:0 18px 50px -12px rgba(15,10,61,.18),0 6px 16px -6px rgba(15,10,61,.1);padding:1rem;min-width:240px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .15s,transform .15s,visibility .15s;z-index:120;margin-top:.5rem}
.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel,.nav-dd.is-open .nav-dd-panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd-mega{min-width:680px;padding:1.25rem;left:50%;transform:translate(-50%,8px)}
.nav-dd:hover .nav-dd-mega,.nav-dd:focus-within .nav-dd-mega,.nav-dd.is-open .nav-dd-mega{transform:translate(-50%,0)}
.nav-dd-mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.nav-dd-tile{display:flex;align-items:flex-start;gap:.7rem;padding:.6rem .7rem;border-radius:10px;color:var(--gray-700,#334155);transition:background .15s}
.nav-dd-tile:hover{background:var(--gray-50,#f8fafc);text-decoration:none}
.nav-dd-tile-icon{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(241,106,135,.08);color:var(--bp-accent,#f16a87)}
.nav-dd-tile-icon svg{width:18px;height:18px}
.nav-dd-tile-text{display:flex;flex-direction:column;gap:.1rem;line-height:1.3}
.nav-dd-tile-text strong{font-weight:600;font-size:.92rem;color:var(--gray-800,#1e293b)}
.nav-dd-tile-text span{font-size:.78rem;color:var(--gray-500,#64748b)}
.nav-dd-mega-foot{margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--gray-100,#f1f5f9);text-align:right}
.nav-dd-mega-all{font-weight:600;font-size:.85rem;color:var(--bp-accent,#f16a87)}
.nav-dd-sectors{display:grid;grid-template-columns:1fr 1fr;min-width:440px;padding:.5rem;gap:0}
.nav-dd-sectors a{padding:.5rem .65rem;border-radius:8px;color:var(--gray-700,#334155);font-size:.88rem;display:flex;align-items:center;gap:.55rem;transition:background .15s}
.nav-dd-sectors a:hover{background:var(--gray-50,#f8fafc);text-decoration:none}
.nav-dd-emoji{font-size:1rem;width:1.3rem;text-align:center}
.nav-dd-sectors-all{grid-column:1/-1;margin-top:.35rem;padding-top:.65rem!important;border-top:1px solid var(--gray-100,#f1f5f9);font-weight:600;color:var(--bp-accent,#f16a87)!important}
.nav-dd-sector-icon{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;background:rgba(241,106,135,.08);color:var(--bp-accent,#f16a87)}
.nav-dd-sector-icon svg{width:15px;height:15px}

@media (max-width: 820px){
    .nav-dd{display:block;width:100%}
    .nav-dd-trigger{display:flex;justify-content:space-between;width:100%;padding:.85rem .25rem!important;border-bottom:1px solid var(--gray-100,#f1f5f9)}
    .nav-dd-panel{position:static;box-shadow:none;border:none;padding:0 0 .5rem .75rem;min-width:0;opacity:1;visibility:visible;transform:none;display:none;margin:0}
    .nav-dd.is-open .nav-dd-panel{display:block}
    .nav-dd-mega{min-width:0;left:auto;transform:none}
    .nav-dd:hover .nav-dd-panel{display:none}
    .nav-dd.is-open .nav-dd-panel{display:block}
    .nav-dd-mega-grid{grid-template-columns:1fr;gap:0}
    .nav-dd-tile{padding:.55rem .25rem;border-bottom:1px solid var(--gray-100,#f1f5f9);border-radius:0}
    .nav-dd-mega-foot{text-align:left;margin-top:.5rem;padding-top:.5rem}
}

/* Pricing — Optional add-ons + SMS note (Task #200) */
.addon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin:1.75rem 0 0}
.addon-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1.5rem 1.6rem;text-align:left;transition:box-shadow .2s,border-color .2s,transform .2s}
.addon-card:hover{box-shadow:var(--shadow);border-color:var(--gray-300);transform:translateY(-2px)}
.addon-card__title{font-size:1.05rem;font-weight:600;margin:0 0 .5rem;color:var(--gray-900)}
.addon-card__price{font-weight:700;color:var(--bp-accent,#f16a87);font-size:1.6rem;line-height:1.1;display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}
.addon-card__suffix{font-size:.85rem;font-weight:500;color:var(--gray-500)}
.addon-card__desc{margin:.6rem 0 0;color:var(--gray-600);font-size:.92rem;line-height:1.55}
.sms-note{margin-top:2.5rem;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1.75rem 1.9rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;justify-content:space-between}
.sms-note__body{flex:1 1 320px;min-width:0}
.sms-note__title{font-size:1.1rem;font-weight:600;margin:0 0 .4rem;color:var(--gray-900)}
.sms-note__text{margin:0;color:var(--gray-600);font-size:.95rem;line-height:1.55}
.sms-note__price{flex:0 0 auto;text-align:center;background:linear-gradient(135deg,var(--bp-primary,#f16a87),var(--bp-accent,#f16a87));color:#fff;padding:1rem 1.4rem;border-radius:var(--radius-md,10px);min-width:120px}
.sms-note__price-amount{font-size:1.85rem;font-weight:800;line-height:1}
.sms-note__price-label{font-size:.78rem;font-weight:500;opacity:.92;margin-top:.15rem;letter-spacing:.02em}
@media(max-width:520px){.sms-note{padding:1.4rem;gap:1rem}.sms-note__price{width:100%}}

/* ============================================================
   Sector landing pages (use-case.php) — rich Booksy/Fresha-style
   layout. All classes namespaced with `uc-` so they don't leak.
   ============================================================ */
/* Hero on /booking-software-for-{slug} sits on the LIGHT page-hero
   background (the later `.page-hero{background:transparent}` rule
   in this file resets the dark default), so all hero accents below
   need to be tuned for a light surface, not a dark one. */
.use-case-hero{padding-bottom:5rem}
.uc-breadcrumbs{font-size:.85rem;color:var(--bp-ink-soft,#5a5a5a);margin-bottom:1.25rem;text-align:center}
.uc-breadcrumbs a{color:inherit;text-decoration:none}
.uc-breadcrumbs a:hover{color:var(--bp-ink,#1e2339);text-decoration:underline}
.uc-breadcrumb-current{color:var(--bp-ink,#1e2339);font-weight:600}
.uc-hero-eyebrow{display:inline-block;background:rgba(var(--bp-accent-rgb,241,106,135),.10);color:var(--bp-accent,#f16a87);font-size:.78rem;font-weight:600;padding:.4rem .85rem;border-radius:9999px;letter-spacing:.04em;margin-bottom:1.1rem;border:1px solid rgba(var(--bp-accent-rgb,241,106,135),.30)}
.uc-hero-actions{display:flex;justify-content:center;gap:.85rem;margin-top:2.25rem;flex-wrap:wrap}
/* Primary CTA gets the brand pink→cyan gradient so the "Start your
   trial" button reads correctly on the light hero. The default
   .btn-primary is a flat var(--primary) which can muddle on the
   pink-tinted hero gradient. */
/* Primary stays the brand pink→cyan gradient on hover too —
   without these `background` + `opacity` overrides the global
   `.btn-primary:hover{opacity:.9}` rule fades the gradient into a
   dim grey-ish wash that makes the label hard to read. */
.uc-hero-actions .btn-primary,
.uc-hero-actions .btn-primary:hover{background:linear-gradient(135deg,var(--hl-start,#f16a87),var(--hl-end,#fe6aa7));color:#fff;border:none;opacity:1}
.uc-hero-actions .btn-primary{box-shadow:0 14px 36px -10px rgba(var(--bp-primary-rgb,241,106,135),.45)}
.uc-hero-actions .btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 42px -10px rgba(var(--bp-primary-rgb,241,106,135),.55)}
/* Secondary CTA: black pill with white text, matching the dark
   hero buttons used on /home etc. Stays readable on hover. */
.uc-hero-actions .btn-outline,
.uc-hero-actions .btn-outline:hover{background:#1e2339;color:#fff;border:1px solid #1e2339}
.uc-hero-actions .btn-outline:hover{background:#1f1f2c;border-color:#1f1f2c}
.uc-hero-foot{margin-top:1rem;font-size:.85rem;color:var(--bp-ink-soft,#5a5a5a);text-align:center}

.uc-intro{padding:3rem 0 1rem}
.uc-intro .container{max-width:820px}
.uc-intro p{font-size:1.08rem;line-height:1.65;color:var(--bp-ink,#1e2339);margin:0;text-align:center}

.uc-pitch{padding:4.5rem 0;border-top:1px solid var(--bp-divider,#eef0f3)}
.uc-pitch:first-of-type{border-top:none}
.uc-pitch-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.uc-pitch--reverse .uc-pitch-grid{direction:rtl}
.uc-pitch--reverse .uc-pitch-copy,.uc-pitch--reverse .uc-pitch-media{direction:ltr}
.uc-pitch-eyebrow{display:inline-block;background:var(--bp-accent,#f16a87);color:#fff;font-size:.72rem;font-weight:700;padding:.3rem .75rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem}
.uc-pitch h2{font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.18;margin:0 0 1rem;color:var(--bp-ink,#1e2339);letter-spacing:-.01em}
.uc-pitch-copy>p{font-size:1.02rem;line-height:1.65;color:var(--bp-ink-soft,#5a5a5a);margin:0 0 1.5rem}
.uc-pitch-bullets{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.uc-pitch-bullets li{display:flex;align-items:flex-start;gap:.7rem;font-size:.97rem;line-height:1.5;color:var(--bp-ink,#1e2339)}
.uc-pitch-bullets svg{flex:none;margin-top:.2rem;color:var(--bp-accent,#f16a87)}
.uc-pitch-media{display:flex;align-items:center;justify-content:center}
.uc-pitch-media-card{width:100%;max-width:440px;aspect-ratio:5/4;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;padding:2rem;position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(15,10,61,.10)}
.uc-pitch-media-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.45),transparent 60%);pointer-events:none}
.uc-pitch-media-glyph{width:120px;height:120px;border-radius:30px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.95);box-shadow:0 12px 30px rgba(0,0,0,.12);position:relative;z-index:1}
.uc-pitch-media-tag{position:relative;z-index:1;font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.25);padding:.35rem .85rem;border-radius:9999px}
.uc-pitch--pink .uc-pitch-media-card{background:linear-gradient(135deg,#fce7f3 0%,#fbcfe8 60%,#f9a8d4 100%)}
.uc-pitch--pink .uc-pitch-media-glyph{color:var(--bp-accent,#f16a87)}
.uc-pitch--cyan .uc-pitch-media-card{background:linear-gradient(135deg,#cffafe 0%,#a5f3fc 60%,#67e8f9 100%)}
.uc-pitch--cyan .uc-pitch-media-glyph{color:#0e7490}
.uc-pitch--pink-deep .uc-pitch-media-card{background:linear-gradient(135deg,#f9a8d4 0%,#ec4899 70%,#be185d 100%)}
.uc-pitch--pink-deep .uc-pitch-media-glyph{color:#9d174d}
.uc-pitch--pink-deep .uc-pitch-media-tag{background:rgba(0,0,0,.35)}
.uc-pitch--dark .uc-pitch-media-card{background:linear-gradient(135deg,#1e293b 0%,#1e2339 60%,#1e2339 100%)}
.uc-pitch--dark .uc-pitch-media-glyph{color:#1e2339}
/* Per-sector pitch photo: drop the gradient pad and let the photo fill
   the card cleanly. No colour tint — the photo speaks for itself. The
   eyebrow tag floats over the bottom of the photo with a subtle dark
   scrim so it stays legible regardless of what's underneath. */
.uc-pitch-media-card--photo{padding:0;background:#e5e7eb}
.uc-pitch-media-card--photo::before{display:none}
.uc-pitch-media-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.uc-pitch-media-card--photo .uc-pitch-media-tag{position:absolute;bottom:1rem;left:1rem;background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media(max-width:880px){
    .uc-pitch{padding:3rem 0}
    .uc-pitch-grid{grid-template-columns:1fr;gap:2rem}
    .uc-pitch--reverse .uc-pitch-grid{direction:ltr}
    .uc-pitch-media-card{max-width:380px;aspect-ratio:5/3}
    .uc-pitch-media-glyph{width:96px;height:96px}
}

.uc-section-title{text-align:center;font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 .5rem;color:var(--bp-ink,#1e2339);letter-spacing:-.01em}
.uc-section-sub{text-align:center;color:var(--bp-ink-soft,#5a5a5a);max-width:640px;margin:0 auto 2.5rem;line-height:1.55}

/* Dark "Everything you need" feature grid — use the open feature
   treatment from the homepage payment section. The icon, heading and
   copy carry the hierarchy; individual features do not need cards,
   borders or tinted boxes around them. */
.uc-features{padding:5rem 0;background:var(--bp-dark-bg,var(--dark-section-bg,#1e2339));color:#fff;position:relative;overflow:hidden}
.uc-features::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 15% 0%,rgba(var(--bp-accent-rgb,241,106,135),.18),transparent 60%),radial-gradient(700px 400px at 85% 100%,rgba(var(--bp-primary-rgb,0,180,216),.14),transparent 60%);pointer-events:none}
.uc-features > .container{position:relative;z-index:1}
.uc-features .uc-section-title{color:#fff}
/* Make the sector word in the dark feature heading pop with the
   brand pink → cyan/purple gradient — same gradient used by the
   pitch block titles ("Take payment the moment a slot is booked"). */
.uc-features .uc-section-title .title-accent{background:linear-gradient(90deg,var(--accent-grad-start,var(--hl-start,#00b4d8)),var(--accent-grad-end,var(--hl-end,#fe6aa7)));-webkit-background-clip:text;background-clip:text;color:transparent}
.uc-features .uc-section-sub{color:rgba(255,255,255,.65)}
.uc-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem 4rem;max-width:1100px;margin:0 auto}
.uc-feature-card{padding:0;background:transparent;border:0;border-radius:0;backdrop-filter:none}
/* Branded gradient icon tile on the sector dark feature grid —
   matches .m-pillar-icon / .dark-feature-icon so every dark-section
   icon across the site has the same pink→cyan gradient with a
   white logo on top. */
.uc-feature-icon{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--hl-start,#f16a87),var(--hl-end,#fe6aa7));color:#fff;margin-bottom:1rem;box-shadow:0 8px 22px -8px rgba(var(--bp-accent-rgb,241,106,135),.55)}
.uc-feature-icon svg{width:22px;height:22px;color:#fff;stroke:#fff}
.uc-feature-card h3{margin:0 0 .5rem;font-size:1.05rem;color:#fff;font-weight:700}
.uc-feature-card p{margin:0;color:rgba(255,255,255,.70);font-size:.95rem;line-height:1.55}
@media(max-width:900px){.uc-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}}
@media(max-width:600px){.uc-feature-grid{grid-template-columns:1fr;gap:2.25rem}}

.uc-faq{padding:4.5rem 0}
.uc-faq .uc-section-title{margin-bottom:2rem}
.uc-faq-item{background:#fff;border:1px solid var(--bp-divider,#e5e7eb);border-radius:14px;transition:background .25s,border-color .25s,box-shadow .25s}
.uc-faq-item.is-open{background:#1e2339;border-color:#1e2339;box-shadow:0 8px 24px rgba(15,10,61,.18)}
/* Button fills the full item — padding lives here so the entire question row is clickable */
.uc-faq-summary{cursor:pointer;font-weight:600;color:#1e2339;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;background:none;border:none;padding:1.1rem 1.25rem;text-align:left;transition:color .25s}
.uc-faq-item.is-open .uc-faq-summary{color:#ff6aa7}
.uc-faq-chev{color:#ff6aa7;font-weight:700;font-size:1.4rem;line-height:1;transition:transform .25s;flex-shrink:0}
.uc-faq-item.is-open .uc-faq-chev{transform:rotate(45deg)}
.uc-faq-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .32s ease,opacity .22s ease}
.uc-faq-item.is-open .uc-faq-body{max-height:600px;opacity:1}
.uc-faq-item p{margin:0;padding:.1rem 1.25rem 1.1rem;color:#5a5a5a;line-height:1.6;transition:color .25s}
.uc-faq-item.is-open p{color:#fff}
/* ≤6 items: single column capped at 820px; >6 items: 2-column grid */
.uc-faq-list{display:grid;gap:.75rem;max-width:820px;margin:0 auto;align-items:start}
.uc-faq-list--wide{max-width:1120px;display:flex;gap:.75rem;align-items:flex-start}
.uc-faq-col{display:flex;flex-direction:column;gap:.75rem;flex:1;min-width:0}
@media(max-width:640px){.uc-faq-list--wide{flex-direction:column}}

/* CTA: re-use the shared .m-cta-card; only the foot caption is
   sector-specific so we keep just that one rule here. The "Talk
   to a human" outline button is restyled to a solid black pill
   so it matches the hero's secondary CTA. */
.uc-cta{padding:1rem 0 5rem}
.uc-cta .m-cta-card .btn-outline,
.uc-cta .m-cta-card .btn-outline:hover{background:#1e2339;color:#fff;border:1px solid rgba(255,255,255,.20);opacity:1}
.uc-cta .m-cta-card .btn-outline:hover{background:#1f1f2c;border-color:rgba(255,255,255,.35)}
/* Use .m-cta-card .uc-cta-foot to beat the .m-cta-card p { margin:0 0 1.75rem }
   shorthand above (which would otherwise reset margin-top to 0 and crowd
   the caption against the buttons). */
.m-cta-card .uc-cta-foot{margin:2.25rem auto 0;font-size:.85rem;color:rgba(255,255,255,.55);text-align:center;max-width:none}
/* Give the sector-page CTA card extra bottom breathing room so the
   foot caption doesn't crowd the card edge. */
.uc-cta .m-cta-card{padding-bottom:3.25rem}

.uc-others{padding:3rem 0 5rem;border-top:1px solid var(--bp-divider,#e5e7eb)}
.uc-others-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem;max-width:960px;margin:0 auto}
.uc-others-pill{display:inline-block;padding:.55rem 1.05rem;border:1px solid var(--bp-divider,#e5e7eb);border-radius:9999px;background:#fff;color:var(--bp-ink,#1e2339);text-decoration:none;font-size:.88rem;font-weight:500;transition:background .15s,border-color .15s}
.uc-others-pill:hover{background:var(--bp-accent,#f16a87);color:#fff;border-color:var(--bp-accent,#f16a87);text-decoration:none}
.uc-others-links{text-align:center;margin-top:2.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem 3rem}
.uc-others-links a{color:var(--bp-accent,#f16a87);font-weight:600;text-decoration:none}
.uc-others-links a:hover{text-decoration:underline}

/* btn-ghost-light: subtle pale button used on dark CTA cards. */
.btn-ghost-light{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-ghost-light:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff}

/* ── Feature-page phone mockup (fp-*) ───────────────────────────── */
/* Split layout: phone + bullet grid */
.fp-features-section{padding:4.5rem 0}
.fp-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.fp-split.fp-phone-left .fp-phone-col{order:-1}
.fp-split.fp-phone-right .fp-phone-col{order:1}
.fp-split .fp-phone-col{display:flex;justify-content:center;align-items:flex-start}
@media(max-width:860px){.fp-split{grid-template-columns:1fr;gap:2.5rem}.fp-split.fp-phone-left .fp-phone-col,.fp-split.fp-phone-right .fp-phone-col{order:0}}
/* Bullets grid */
.fp-bullets-heading{font-size:1.45rem;font-weight:700;color:#1e2339;margin:0 0 1.4rem}
.fp-bullets-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 2rem}
@media(max-width:500px){.fp-bullets-grid{grid-template-columns:1fr}}
.fp-bullet{display:flex;gap:.65rem;align-items:flex-start}
.fp-bullet-check{flex-shrink:0;margin-top:.15rem}
.fp-bullet strong{display:block;font-size:.88rem;font-weight:700;color:#1e2339;margin-bottom:.15rem}
.fp-bullet p{font-size:.83rem;color:#475569;margin:0;line-height:1.5}
/* Phone mockup card — fixed height clips phone bottom so home bar never shows */
.fp-phone-wrap{background:#f0f0f3;border-radius:36px;padding:40px 36px 0;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;height:420px;width:100%;box-shadow:0 4px 24px rgba(0,0,0,.06)}
/* Phone device — silver metallic bezel, reduced radius, thin 5px pad */
.fp-phone{background:linear-gradient(160deg,#f0f0f0 0%,#d6d6d6 100%);border-radius:38px;padding:5px;box-shadow:0 0 0 1px rgba(0,0,0,.09),0 0 0 2.5px rgba(255,255,255,.9) inset,0 32px 80px rgba(0,0,0,.22),0 8px 24px rgba(0,0,0,.1);position:relative;width:270px;flex-shrink:0}
/* Left-side buttons: silent switch + vol up + vol down */
.fp-phone::before{content:'';position:absolute;left:-5px;top:80px;width:4px;height:20px;background:linear-gradient(to right,#b8b8b8,#d0d0d0);border-radius:3px 0 0 3px;box-shadow:0 38px 0 #c4c4c4,0 70px 0 #c4c4c4}
/* Right-side: power button */
.fp-phone::after{content:'';position:absolute;right:-5px;top:110px;width:4px;height:54px;background:linear-gradient(to left,#b8b8b8,#d0d0d0);border-radius:0 3px 3px 0}
/* Camera hole */
.fp-phone-island{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:12px;height:12px;background:#1a1a1a;border-radius:50%;z-index:10}
/* Screen — fixed height so phone always overflows card bottom cleanly */
.fp-phone-screen{background:#fff;border-radius:32px;overflow:hidden;height:530px;position:relative}
.fp-phone-screen--empty{display:flex;align-items:center;justify-content:center;color:#d1d5db;font-size:.78rem;height:530px}
/* Single image */
.fp-screen-single-wrap{height:530px;overflow:hidden}
/* Image height = visible screen area (wrap 420px - wrap padding-top 40px - phone padding 5px = 375px).
   object-position then correctly anchors top/center/bottom to the VISIBLE boundary. */
.fp-screen-single{width:100%;height:375px;object-fit:cover;object-position:top center;display:block}
.fp-screen-single-wrap.fp-pos-center .fp-screen-single{object-position:center center}
.fp-screen-single-wrap.fp-pos-bottom .fp-screen-single{object-position:bottom center}
/* Slideshow */
.fp-slideshow{position:relative;height:530px}
.fp-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease-in-out;overflow:hidden}
.fp-slide.fp-slide-active{opacity:1}
.fp-slide img{width:100%;height:375px;object-fit:cover;object-position:top center;display:block}
.fp-slide.fp-pos-center img{object-position:center center}
.fp-slide.fp-pos-bottom img{object-position:bottom center}
/* Scroll (continuous pan upward) */
@keyframes fp-auto-scroll{0%,8%{transform:translateY(0)}45%,55%{transform:translateY(calc(-100% + 530px))}92%,100%{transform:translateY(0)}}
.fp-scroll-inner{animation:fp-auto-scroll var(--fp-scroll-dur,14s) ease-in-out infinite}
.fp-scroll-inner img{width:100%;display:block}
/* ── Tap ripple overlay (slideshow touch indicator) ── */
@keyframes fp-tap-ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:.85}60%{transform:translate(-50%,-50%) scale(1);opacity:.5}100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}}
.fp-touch-ripple{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(241,106,135,.28);border:2.5px solid rgba(241,106,135,.75);pointer-events:none;z-index:20;animation:fp-tap-ripple .75s ease-out forwards}

/* Final mobile drawer overrides.
   These must come after the legacy responsive header rules so the drawer
   contents stay in normal document flow instead of being positioned below it. */
@media(max-width:1024px){
  .mobile-menu-backdrop .mobile-menu-drawer{
    justify-content:flex-start;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .main-nav,
  .mobile-menu-backdrop .mobile-menu-drawer .main-nav.open{
    position:static;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    display:flex!important;
    flex:0 0 auto;
    width:auto;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    transform:none;
    overflow:visible;
    order:2;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .main-nav a{
    display:flex;
    align-items:center;
    width:100%;
    min-height:3.2rem;
    padding:.85rem .5rem;
    border-bottom:1px solid var(--gray-100,#f3f4f6);
    border-radius:0;
    font-size:1rem;
    color:var(--ink,#1e2339);
  }
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-trigger{
    padding:.85rem .5rem!important;
    background:transparent!important;
    background-image:none!important;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-trigger:hover,
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-trigger:focus,
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-trigger.active,
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd.is-open > .nav-dd-trigger{
    background:transparent!important;
    background-image:none!important;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-caret{
    font-size:1rem;
    line-height:1;
    font-weight:700;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .header-actions{
    display:flex;
    flex:0 0 auto;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0 0 .25rem;
    padding:0 0 .25rem;
    border-top:0;
    border-bottom:1px solid var(--gray-200,#e5e7eb);
    order:1;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .header-actions .btn{
    width:100%;
    min-height:3.1rem;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:.85rem .5rem;
    border:0;
    border-radius:0;
    border-bottom:1px solid var(--gray-100,#f3f4f6);
    background:transparent;
    box-shadow:none;
    color:var(--ink,#1e2339);
    font-size:1rem;
    font-weight:600;
    text-align:left;
    transform:none;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .header-actions .btn:hover{
    background:transparent;
    box-shadow:none;
    transform:none;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .header-actions .btn:last-child{
    border-bottom:0;
    color:var(--accent,#f16a87);
  }
  /* The desktop mega menu is centered with a translate transform. On a
     mobile drawer that moves its expanded list beyond the left edge, so
     expanded lists must be contained in the drawer's normal flow. */
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-panel,
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd:hover .nav-dd-panel,
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd.is-open .nav-dd-panel{
    position:static;
    left:auto;
    right:auto;
    width:100%;
    min-width:0;
    max-width:100%;
    margin:0;
    padding:0 0 .5rem;
    transform:none;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-mega-grid,
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-sectors{
    width:100%;
    min-width:0;
    grid-template-columns:1fr;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-tile{
    min-width:0;
    width:100%;
    min-height:3.2rem;
    padding:.85rem .5rem;
    overflow-wrap:anywhere;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-sectors a{
    width:100%;
    min-height:3.2rem;
    padding:.85rem .5rem;
  }
  /* The final list row already supplies the divider. Do not add a second
     line above the “see all” link in either dropdown. */
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-mega-foot{
    width:100%;
    margin-top:0;
    padding-top:0;
    border-top:0;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-mega-all{
    display:flex;
    align-items:center;
    width:100%;
    min-height:3.2rem;
    padding:.85rem .5rem;
  }
  .mobile-menu-backdrop .mobile-menu-drawer .nav-dd-sectors-all{
    display:flex;
    align-items:center;
    width:100%;
    min-height:3.2rem;
    margin-top:0;
    padding:.85rem .5rem!important;
    border-top:0!important;
    border-bottom:0!important;
  }
}

/* Dark feature pillars are content columns, not cards. Keep the icon tiles,
   typography and grid spacing, but let the dark section show through behind
   the copy like the other feature grids. */
.m-section-dark .m-pillar{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  overflow:visible;
  box-shadow:none;
}
.m-section-dark .m-pillar::before{display:none}
.m-section-dark .m-pillar:hover{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  transform:none;
}