.explainer{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.explainer-stage{position:relative;background-image:radial-gradient(circle,#e8e8e8 1px,transparent 1px);background-size:16px 16px;border-radius:12px;border:1px solid var(--border);padding:18px;display:flex;flex-direction:column;gap:14px;align-items:stretch}.ex-node{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);padding:12px 14px;width:100%;transition:box-shadow .3s,border-color .3s}.ex-node.lit{box-shadow:var(--shadow-md);border-color:var(--ink)}.ex-node-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.ex-node-icon{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#fff;flex:0 0 auto}.ex-node.webhook .ex-node-icon{background:#0b7285}.ex-node.fields .ex-node-icon{background:var(--ink)}.ex-node.flow .ex-node-icon{background:var(--shopify-green)}.ex-node-title{font-size:13px;font-weight:600}.ex-node-sub{font-size:11px;color:var(--text-tertiary);margin-top:1px;font-family:var(--font-mono)}.ex-node-body{display:flex;flex-direction:column;gap:4px}.ex-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#f7f7f7;font-size:11.5px;font-family:var(--font-mono);transition:background .25s}.ex-row.lit{background:#ebebeb}.ex-row .swatch{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:0 0 auto}.ex-fieldslot{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#f7f7f7;font-size:11.5px;font-family:var(--font-mono);border:1px dashed transparent;transition:background .3s,border-color .3s;min-width:0}.ex-fieldslot.filled{background:#f0f0f0}.ex-fieldslot.flash{background:#fffae0;border-color:#f0d800}.ex-fieldslot .num{width:16px;height:16px;border-radius:4px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:700;flex:0 0 auto}.ex-fieldslot .label{font-weight:550;white-space:nowrap}.ex-fieldslot .src{color:var(--text-tertiary);margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ex-arrow{display:flex;justify-content:center;align-items:center;height:16px;color:#cfcfcf;transition:color .25s}.ex-arrow.lit{color:var(--ink)}.ex-arrow svg{animation:none}.ex-arrow.lit svg{animation:arrow-flow 1s ease-in-out infinite}@keyframes arrow-flow{0%,to{transform:translateY(-2px);opacity:.5}50%{transform:translateY(2px);opacity:1}}.ex-pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--success);flex:0 0 auto}.ex-pulse:after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--success);opacity:.5;animation:pulse-ring 1.8s ease-out infinite}.integrations-marquee{padding:56px 0;background:var(--bg-soft);border-block:1px solid var(--border);overflow:hidden}.marquee-track{display:flex;gap:48px;align-items:center;animation:marquee 28s linear infinite;width:max-content}.marquee-item{display:inline-flex;align-items:center;gap:12px;font-size:17px;font-weight:600;color:var(--text-secondary);letter-spacing:-.01em;padding:12px 22px;background:var(--bg);border:1px solid var(--border);border-radius:12px;white-space:nowrap}.marquee-item .swatch{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.hero{padding:80px 0 64px;background:radial-gradient(1200px 600px at 50% -200px,#f4f4f4 0%,transparent 60%);overflow:hidden;position:relative}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}.hero h1{margin-bottom:20px}.hero h1 .accent{position:relative;white-space:nowrap;isolation:isolate}.hero h1 .accent:after{content:"";position:absolute;inset:-1px -4px 1px;background:var(--ink);z-index:-1;border-radius:6px}.hero h1 .accent span{color:#fff;padding:0 6px}.hero .lead{font-size:clamp(17px,1.6vw,19px);margin-bottom:28px}.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:32px}.hero-meta{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.hero-meta-item{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--text-secondary)}.hero-meta-item svg{flex:0 0 14px;color:var(--shopify-green)}@media(max-width:920px){.hero-grid{grid-template-columns:1fr}}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.step{position:relative;padding:28px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);transition:transform .2s,box-shadow .2s}.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.step-num{width:36px;height:36px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;margin-bottom:16px}.step h3{margin-bottom:8px}.step p{color:var(--text-secondary);font-size:14.5px;margin:0 0 14px}.step-illustration{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}@media(max-width:760px){.steps{grid-template-columns:1fr}}.usecase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.usecase{padding:28px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);display:flex;gap:18px;align-items:flex-start;transition:transform .2s,box-shadow .2s}.usecase:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.usecase-icon{width:44px;height:44px;border-radius:12px;background:var(--bg-sunken);display:grid;place-items:center;flex:0 0 auto;color:var(--ink)}.usecase h4{margin-bottom:6px}.usecase p{color:var(--text-secondary);font-size:14px;margin:0}@media(max-width:760px){.usecase-grid{grid-template-columns:1fr}}.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}.compare-col{padding:28px;border-radius:var(--radius-lg)}.compare-col.before{background:var(--bg-soft);border:1px solid var(--border)}.compare-col.after{background:var(--ink);color:#fff}.compare-col h4{margin-bottom:14px;display:flex;align-items:center;gap:8px}.compare-col ul{margin:0;padding:0;list-style:none}.compare-col li{padding:8px 0;display:flex;align-items:flex-start;gap:10px;font-size:14.5px}.compare-col li svg{flex:0 0 18px;margin-top:2px}.compare-col.before li{color:var(--text-secondary)}.compare-col.after li{color:#d4d4d4}@media(max-width:760px){.compare{grid-template-columns:1fr}}.pricing-teaser{background:var(--ink);color:#fff;border-radius:var(--radius-xl);padding:56px 48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.pricing-teaser h2{color:#fff}.pricing-teaser p{color:#b4b4b4}.price-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px}.price-summary div{padding:14px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:10px}.price-summary .tier{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.06em;font-weight:600}.price-summary .amount{font-size:22px;font-weight:650;letter-spacing:-.02em;margin-top:4px}.price-summary .events{font-size:12px;color:#b4b4b4;margin-top:2px}@media(max-width:760px){.pricing-teaser{grid-template-columns:1fr;padding:36px 28px}}.final-cta{text-align:center;padding:96px 24px}.final-cta h2{margin-bottom:18px}.final-cta p{max-width:560px;margin:0 auto 28px}
