/* A real pit stop leads into the merchant's journey. */
body[data-page=home]{background:#fff;overflow-x:clip}
body[data-page=home] .header.zid-header{position:absolute;inset:0 0 auto;background:transparent;border:0;color:white;z-index:30}
body[data-page=home] .zid-header .header-inner{width:min(1340px,calc(100% - 88px));height:82px}
body[data-page=home] .zid-header .brand img{width:auto;height:34px}
body[data-page=home] .zid-header .header-help{background:#160c24a8;border:1px solid #ffffff80;color:#fff;border-radius:7px}
body[data-page=home] .zid-header .header-help:hover{background:white;color:#260a3e}
.pit-film{position:relative;min-height:100svh;background:#160d20;color:#fff;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.pit-film-media,.pit-film-overlay{position:absolute;inset:0;pointer-events:none}
.pit-film-media{z-index:-1}
.pit-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%}
.pit-film-overlay{background:linear-gradient(0deg,#10091bf0 0%,#10091b80 32%,#10091b0d 67%,#10091b70 100%),linear-gradient(270deg,#1e0a3270,transparent 64%)}
.film-content{position:relative;padding-top:155px;padding-bottom:120px;z-index:1}
.film-kicker,.story-eyebrow{display:flex;align-items:center;gap:10px;color:#dfc9f4;font-size:12px;font-weight:600}
.film-kicker span,.story-eyebrow span{width:7px;height:7px;border-radius:50%;background:#e8cc82;box-shadow:0 0 0 5px #e8cc8222}
.film-content h1{font-family:var(--font-display);font-weight:900;font-size:clamp(34px,3.5vw,52px);line-height:1.45;margin:22px 0 12px;max-width:680px}
.film-content h1 em{font-style:normal;color:#e4c9ff}
.film-content>p:not(.film-kicker){font-size:16px;line-height:1.9;color:#f0e9f4;max-width:500px}
.film-cta{display:inline-flex;align-items:center;gap:16px;margin-top:24px;min-height:46px;padding:9px 21px;background:white;color:#220d32;border-radius:6px;font-size:13px;font-weight:600;transition:transform .2s,background .2s}
.film-cta:hover{background:#ede2f9;transform:translateY(-2px)}
.film-cta .icon{width:16px;height:16px}
.film-bottom{z-index:2;position:absolute;left:0;right:0;bottom:25px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.film-scroll{display:flex;align-items:center;gap:12px;font-size:11px;color:#eee5f5;min-height:44px}
.film-scroll i{width:48px;height:1px;background:#e9ca72}
.film-control{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;min-height:40px;border:1px solid #ffffff60;border-radius:6px;background:#1a1027a0;color:#fff;font-size:10px}
.film-control-icon{font-size:14px}
.story-intro{background:#1c0d29;color:#fff;overflow:hidden;position:relative;isolation:isolate}
.story-intro:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 8% 100%,#5c307a75,transparent 50%)}
.story-inner{padding:clamp(90px,12vw,170px) 0}
.story-eyebrow{color:#d3b4e8}
.story-inner h2{font-size:clamp(42px,5.2vw,74px);line-height:1.55;margin:28px 0 45px;max-width:1050px}
.story-inner h2>span{color:#d2b0ec}
.story-inner h2 em{color:#fff;font-style:normal}
.story-bottom{display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px}
.story-bottom>p{font-size:17px;line-height:2;color:#e3d4ec;max-width:530px}
.story-actions{justify-content:flex-start;gap:10px}
.story-actions .button{min-height:52px;border-radius:7px;font-size:13px;padding:11px 20px}
.story-primary{background:white;color:#230d34}
.story-primary:hover{background:#efe5f8}
.story-secondary{background:#ffffff08;color:#fff;border-color:#ffffff70}
.story-secondary:hover{background:#ffffff1b}
.story-chapter{display:flex;align-items:center;gap:16px;padding-top:66px;font-size:11px;font-weight:500;color:#856b96}
.story-chapter>span{color:#643d89;direction:ltr;letter-spacing:.09em}
.story-chapter>i{height:1px;width:38px;background:#d6c9df}
.story-chapter-light{padding-top:26px}
body[data-page=home] .difference{padding-top:34px;padding-bottom:55px}
body[data-page=home] .proof.section-pad{background:#1c0d29;color:#fff;padding:72px 0}
body[data-page=home] .proof .eyebrow{color:#e1c8f3}
body[data-page=home] .proof .section-head h2>span{color:#c8a8e8}
body[data-page=home] .proof .preview-notice{color:#d0c1da}
body[data-page=home] .case-card{background:#2a1739;border-color:#ffffff20;color:#fff}
body[data-page=home] .case-card:nth-child(2){background:#48305b;border-color:#ffffff20}
body[data-page=home] .case-card .case-store,body[data-page=home] .case-card .case-stat>span{color:#d9c7e4}
body[data-page=home] .case-voice{border-color:#ffffff30}
body[data-page=home] .merchant-changes li::before,body[data-page=home] .case-card:nth-child(2) .merchant-changes li::before{color:#edcf71}
body[data-page=home] .start-section{background:#210d32;border-radius:12px;margin-bottom:45px}
.story-reveal{transition:opacity .65s ease,transform .65s ease}
.js-ready .story-reveal:not(.is-visible){opacity:0;transform:translateY(25px)}
@media(max-width:760px){
 body[data-page=home] .zid-header .header-inner{height:68px;width:calc(100% - 36px)}
 body[data-page=home] .zid-header .brand img{height:29px}
 body[data-page=home] .zid-header .header-help{font-size:11px;min-height:42px;padding:8px 12px}
 .pit-film{min-height:100svh}
 .pit-film video{object-position:52% center}
 .pit-film-overlay{background:linear-gradient(0deg,#10091bf5,#10091b9e 39%,#10091b24 72%,#10091b8c)}
 .film-content{padding-top:130px;padding-bottom:115px}
 .film-content h1{font-size:clamp(29px,7.5vw,42px);line-height:1.55;margin:18px 0 10px}
 .film-content>p:not(.film-kicker){font-size:13px;line-height:1.9;max-width:290px}
 .film-cta{font-size:12px;margin-top:18px;min-height:46px}
 .film-bottom{bottom:18px}
 .story-inner{padding:88px 0 95px}
 .story-inner h2{font-size:clamp(33px,8.6vw,46px);line-height:1.7;margin:23px 0 30px}
 .story-bottom{display:block}
 .story-bottom>p{font-size:13px;line-height:2;max-width:340px}
 .story-actions{margin-top:22px;flex-wrap:nowrap}
 .story-actions .button{flex:1;min-height:48px;font-size:11px;padding:10px 8px;gap:6px;white-space:nowrap}
 .story-actions .button .icon{width:15px;height:15px}
 .story-chapter{padding-top:44px;font-size:10px;gap:10px}
 .story-chapter-light{padding-top:16px}
 body[data-page=home] .difference{padding-top:22px;padding-bottom:35px}
 body[data-page=home] .proof.section-pad{padding:40px 0}
 body[data-page=home] .start-section{margin-bottom:26px}
}
@media(max-width:360px){.film-content h1{font-size:28px}.story-inner h2{font-size:31px}.story-actions .button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.story-reveal{transition:none!important;opacity:1!important;transform:none!important}}
.pit-film video{transform:translateY(var(--film-shift,0px)) scale(1.08);will-change:transform}
.story-inner h2{transform:translateY(var(--story-shift,0px));opacity:var(--story-opacity,1);will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.pit-film video,.story-inner h2{transform:none!important;opacity:1!important;will-change:auto}}

/* One restrained purple grade ties the moving footage to the Zid palette. */
.pit-film video{filter:grayscale(1) contrast(1.08) brightness(.93)}
.pit-film-media::after{content:"";position:absolute;inset:0;background:#7544a1;mix-blend-mode:color;opacity:.9;pointer-events:none}
.pit-film-overlay{z-index:1}
.story-inner{padding:clamp(70px,8vw,115px) 0}
.story-inner h2{margin:0 0 28px}
body[data-page=home] .difference{padding-top:70px}
@media(max-width:760px){.story-inner{padding:64px 0 70px}.story-inner h2{margin:0 0 22px}body[data-page=home] .difference{padding-top:48px}}
/* The story lives on the film; the results lead directly into the examples. */
.film-content h1{font-size:clamp(38px,4.7vw,68px);line-height:1.5;max-width:850px}
.film-content>p:not(.film-kicker){font-size:16px}
body[data-page=home] .proof.section-pad{padding:54px 0 58px}
body[data-page=home] .proof .section-head{margin-bottom:20px}
body[data-page=home] .proof .section-head h2{font-size:clamp(28px,3vw,40px);margin:0}
body[data-page=home] .case-grid{gap:10px}
body[data-page=home] .case-card{padding:17px;border-radius:14px}
body[data-page=home] .case-card h3{display:none}
body[data-page=home] .case-card-top{gap:8px}
body[data-page=home] .case-stat strong{font-size:38px}
body[data-page=home] .case-stat>span{font-size:10px}
body[data-page=home] .case-voice{margin-top:10px}
body[data-page=home] .start-section{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 38px}
body[data-page=home] .start-section h2{font-size:30px}
@media(max-width:760px){
 .film-content h1{font-size:clamp(29px,7.2vw,40px);line-height:1.55}
 .film-content>p:not(.film-kicker){font-size:13px}
 body[data-page=home] .proof.section-pad{padding:35px 0 40px}
 body[data-page=home] .proof .section-head h2{font-size:25px}
 body[data-page=home] .case-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 body[data-page=home] .case-card{padding:13px 12px}
 body[data-page=home] .case-card-top{display:block}
 body[data-page=home] .case-stat strong{font-size:30px}
 body[data-page=home] .case-stat>span{font-size:9px}
 body[data-page=home] .start-section{display:block;padding:25px 20px}
 body[data-page=home] .start-section h2{font-size:25px;margin-bottom:16px}
 body[data-page=home] .start-actions{display:flex;gap:8px;flex-wrap:nowrap}
 body[data-page=home] .start-actions .button{flex:1;min-width:0;padding:9px 8px;font-size:11px;gap:6px}
}
body[data-page=home] .start-section{display:grid;grid-template-columns:1fr minmax(280px,480px);gap:36px;align-items:center;padding:38px}
.start-copy p{margin-top:8px;color:#e4d5ee;font-size:15px}
.end-lead-form label{display:block;color:#eee2f5;font-size:12px;margin-bottom:8px}
.end-form-row{display:flex;gap:9px;align-items:stretch}
.end-form-row .phone-field{flex:1;min-width:0}
.end-form-row .phone-field input{font-size:16px}
.end-form-row .phone-field>span{font-size:14px;padding:12px}
.end-form-row .button{min-height:52px;white-space:nowrap;font-size:13px}
.end-lead-form .form-status{color:#e5d3f4;margin-top:8px}
.end-lead-form .form-status.is-error{color:#ffb9c9}
@media(max-width:760px){body[data-page=home] .start-section{display:block;padding:26px 20px}.start-copy p{font-size:13px;margin-top:5px}.end-lead-form{margin-top:20px}.end-form-row .button{font-size:12px;padding-inline:13px}.end-form-row .phone-field input{padding:12px 8px;font-size:15px}.end-form-row .phone-field>span{padding:12px 8px;font-size:12px}}
/* Make the comparison controls clearly tappable and show the selected state. */
.compare-prompt{color:#725985;font-size:12px;font-weight:600;margin-top:22px}
body[data-page=home] .before-after{width:max-content;max-width:100%;margin:8px 0 18px;padding:5px;gap:5px;background:#e7deef;border:1px solid #d2bedf;border-radius:13px}
body[data-page=home] .before-after button{min-width:91px;min-height:48px;justify-content:center;padding:9px 19px;font-size:15px;font-weight:700;color:#49225f;border:1px solid transparent;border-radius:9px;animation:none;transition:background .2s,color .2s,box-shadow .2s}
body[data-page=home] .before-after button[aria-pressed=true]{background:#321348;color:#fff;box-shadow:0 3px 10px #32134830}
body[data-page=home] .before-after button[aria-pressed=false]{background:#fff;border-color:#d6c5e2;animation:compare-attention 2.8s ease-in-out infinite}
@keyframes compare-attention{0%,65%,100%{box-shadow:0 0 0 0 #ae72ff00}78%{box-shadow:0 0 0 5px #ae72ff4a}}
@media(max-width:760px){.compare-prompt{font-size:11px;margin-top:17px}body[data-page=home] .before-after button{min-width:82px;min-height:46px;font-size:14px}}
@media(prefers-reduced-motion:reduce){body[data-page=home] .before-after button{animation:none!important}}
body[data-page=home] .proof.section-pad{padding:36px 0 40px}
body[data-page=home] .proof .section-head{margin-bottom:15px}
body[data-page=home] .proof .section-head h2{font-size:clamp(25px,2.5vw,34px);line-height:1.35}
body[data-page=home] .case-card{padding:13px 15px}
body[data-page=home] .case-card-top{gap:4px}
body[data-page=home] .case-stat strong{font-size:34px;line-height:1.2}
body[data-page=home] .case-voice{margin-top:6px}
@media(max-width:760px){body[data-page=home] .proof.section-pad{padding:29px 0 30px}body[data-page=home] .proof .section-head h2{font-size:23px}body[data-page=home] .case-card{padding:10px 12px}body[data-page=home] .case-stat strong{font-size:28px}body[data-page=home] .case-voice{margin-top:4px}}
/* A light Zid lavender canvas gives the merchants' results room to breathe. */
body[data-page=home] .proof.section-pad{background:#f5effa;color:#210d32}
body[data-page=home] .proof .section-head h2>span{color:#8053a5}
body[data-page=home] .proof .case-card,body[data-page=home] .proof .case-card:nth-child(2){background:#fff;border:1px solid #e4d8ec;color:#210d32}
body[data-page=home] .proof .case-card .case-store,body[data-page=home] .proof .case-card .case-stat>span{color:#675570}
body[data-page=home] .proof .case-voice{border-color:#e9deef}
body[data-page=home] .proof .merchant-changes li::before,body[data-page=home] .proof .case-card:nth-child(2) .merchant-changes li::before{color:#8650b2}
/* Zid's deep purple anchors the page; softer surfaces keep the results easy to read. */
body[data-page=home] .proof.section-pad{background:#f5f4f6;color:#1f0433}
body[data-page=home] .proof .section-head h2>span{color:#704794}
body[data-page=home] .proof .case-card,body[data-page=home] .proof .case-card:nth-child(2){background:#fff;border-color:#e8e4eb;box-shadow:0 5px 18px #1f043308}
body[data-page=home] .proof .case-stat strong{color:#3c1c54}
body[data-page=home] .demo-workbench{background:#f8f6fa;border-color:#e8e4eb}
body[data-page=home] .demo-tabs button[aria-selected=true],body[data-page=home] .before-after button[aria-pressed=true]{background:#3c1c54;color:#fff}
body[data-page=home] .before-after{background:#eee8f3;border-color:#ddd0e8}
body[data-page=home] .difference .section-head h2>span{color:#8155a1}
body[data-page=home] .start-section{background:#3c1c54}
body[data-page=home] .film-content h1 em{color:#e3caff}

/* A compact, balanced comparison on narrow screens. */
@media(max-width:760px){
 body[data-page=home] .demo-workbench{border-radius:18px}
 body[data-page=home] .demo-topbar{padding:10px;background:#fff}
 body[data-page=home] .demo-tabs{display:flex;flex-wrap:wrap;gap:6px}
 body[data-page=home] .demo-tabs button{flex:1 1 calc((100% - 12px)/3);min-width:0;min-height:45px;padding:8px 5px;border:1px solid #e8e0ee;background:#f9f7fb;color:#3c1c54;font-size:11px;font-weight:600;white-space:normal;line-height:1.5}
 body[data-page=home] .demo-tabs button[aria-selected=true]{background:#3c1c54;color:#fff;border-color:#3c1c54}
 body[data-page=home] .demo-tabs button[aria-selected=false]{background:#f9f7fb;border-color:#e8e0ee}
 body[data-page=home] .demo-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 8px;padding:18px 15px 0}
 body[data-page=home] .demo-explanation{grid-column:1/-1}
 body[data-page=home] .demo-explanation h3{font-size:20px;line-height:1.6;margin:0}
 body[data-page=home] .compare-prompt{margin:0;font-size:11px}
 body[data-page=home] .demo-copy .before-after{width:auto;min-width:0;margin:0}
 body[data-page=home] .before-after button{min-width:64px;min-height:44px;padding:8px 12px;font-size:13px}
 body[data-page=home] .change-recap{grid-column:1/-1;margin:0;font-size:11px}
 body[data-page=home] .demo-stage,body[data-page=home] .demo-stage[data-topic=banner],body[data-page=home] .demo-stage[data-topic=options]{padding:15px 10px}
 body[data-page=home] .demo-bottom{padding:10px}
}