/* ---------- Base reset (replaces Tailwind preflight) ---------- */
*,::before,::after{box-sizing:border-box;border:0 solid;margin:0;padding:0}
:root{--font-space:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--font-fragment:'Fragment Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--font-sans:var(--font-space);--font-mono:var(--font-fragment);color-scheme:light}
html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:var(--font-sans);height:auto}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
b,strong{font-weight:bolder}
small{font-size:80%}
ol,ul,menu{list-style:none}
img,svg,video{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;background-color:transparent;border-radius:0}
[hidden]{display:none!important}
.font-sans{font-family:var(--font-sans)}.font-mono{font-family:var(--font-mono)}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.text-balance{text-wrap:balance}.text-pretty{text-wrap:pretty}

:root { --background:#FFFFFF; --foreground:#1A1A20; --primary:#7A1257; --accent:#C13A8E; --card:#FFFFFF; --muted:#F7F5F8; --muted-foreground:#5B5B66; --border:#E8E4EC; --radius:.875rem; --deep:#141419; --ink-line:#33333C; --action:linear-gradient(115deg,#3D0A31,#7A1257 62%,#B42C7E); --app-connector:#0E7C68; --app-dash:#2A4FD8; --app-returns:#A85F12; --app-reviews:#7327C4; --app-loyalty:#967016; --app-crm:#B42C7E; }
*{box-sizing:border-box;border-color:var(--border)}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--foreground);background:var(--background);font-size:15px;line-height:1.6}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;line-height:1.12;letter-spacing:-.055em}h2{font-size:clamp(36px,4vw,53px)}h2 span{color:var(--primary)}h3{font-size:25px;letter-spacing:-.035em}p{color:var(--muted-foreground)}.container{width:min(1200px,calc(100% - 112px));margin-inline:auto}.site-header{height:95px;background:var(--background);border-bottom:1px solid var(--border)}.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:5px;color:var(--primary);line-height:1;font-size:30px;font-weight:700;letter-spacing:-1.6px}.brand>svg{width:39px;height:46px;transform:rotate(5deg)}.brand-sub{display:block;font-family:var(--font-fragment);font-size:9px;letter-spacing:4px;text-align:right;margin-top:6px}.site-header nav{display:flex;gap:35px;font-size:14px}.site-header nav a:hover{color:var(--primary)}.nav-plus{margin-left:6px;color:var(--primary)}.button{display:inline-flex;align-items:center;justify-content:center;gap:19px;background:var(--primary);color:var(--card);padding:15px 22px;border:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);font-size:14px;font-weight:500;transition:background .2s,transform .2s}.button:hover{background:var(--foreground);transform:translateY(-2px)}.button-small{padding:11px 20px}.text-link{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:500;background:none;border:0;color:var(--primary);padding:0}.eyebrow{font-family:var(--font-fragment);font-size:11px;letter-spacing:1.35px;color:var(--primary);display:flex;align-items:center;gap:9px;margin-bottom:24px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary)}.hero{position:relative;overflow:hidden;background:repeating-linear-gradient(132deg,transparent,transparent 17px,color-mix(in srgb,var(--primary) 2.5%,transparent) 17px,color-mix(in srgb,var(--primary) 2.5%,transparent) 18px)}.hero-grid{display:grid;grid-template-columns:1.03fr 1fr;align-items:center;gap:35px;padding-block:68px 53px}.hero h1{font-size:clamp(48px,5.6vw,75px);line-height:1.04;letter-spacing:-4px}.hero h1 span{color:var(--primary)}.hero-description{margin-top:25px;font-size:19px;line-height:1.5;color:var(--foreground)}.hero-support{font-size:15px;margin-top:15px;line-height:1.7}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:30px}.hero-visual{align-self:center;padding-top:10px}.scene-heading{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.6px;color:var(--muted-foreground)}.live-label{display:flex;align-items:center;gap:5px;font-family:var(--font-fragment);font-size:9px}.connection-scene{height:304px;position:relative;display:flex;align-items:center;justify-content:space-between;padding-inline:17px}.scene-note{position:absolute;top:29px;left:90px;color:var(--primary);font-size:16px;transform:rotate(-5deg)}.platform-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:137px;height:131px;flex-shrink:0;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:0 12px 25px color-mix(in srgb,var(--primary) 6%,transparent);z-index:1}.platform-card>svg{width:31px;height:31px;margin-bottom:12px}.platform-card strong{font-size:15px;font-weight:600}.platform-card span{font-size:10px;color:var(--muted-foreground);margin-top:5px}.tiktok-card{transform:rotate(-7deg)}.partner-card{transform:rotate(7deg);animation:appear .35s ease}.lightning-hub{width:80px;height:80px;flex-shrink:0;display:grid;place-items:center;background:var(--primary);color:var(--card);border:7px solid color-mix(in srgb,var(--primary) 9%,var(--card));border-radius:22px;box-shadow:0 0 0 13px color-mix(in srgb,var(--primary) 4%,transparent);z-index:1;transform:rotate(-8deg)}.lightning-hub svg{width:48px;height:48px}.connection-track{height:2px;flex:1;background:repeating-linear-gradient(90deg,var(--accent) 0,var(--accent) 4px,transparent 4px,transparent 9px);min-width:12px}.floating-note{position:absolute;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);padding:8px 11px;border-radius:7px;font-size:10px;box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 4%,transparent);z-index:2}.note-top{top:74px;right:4px;transform:rotate(5deg)}.note-bottom{bottom:27px;left:57px;transform:rotate(-5deg)}.floating-note svg{color:var(--accent)}.tiny-bolt{position:absolute;right:68px;bottom:27px;color:var(--accent);transform:rotate(13deg)}.scene-result{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--border);padding:18px;border-radius:12px;box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 3%,transparent)}.product-icon{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:var(--muted);color:var(--primary)}.scene-result .font-mono{font-size:9px;color:var(--primary);letter-spacing:1px}.scene-result p{font-size:12px;line-height:1.55;margin-top:4px}.scene-result a{margin-left:auto;color:var(--primary)}.scene-caption{display:flex;justify-content:center;align-items:center;gap:7px;font-size:10px;margin-top:16px;color:var(--muted-foreground)}.problem-bar{display:flex;align-items:center;gap:30px;padding-block:24px 30px;border-top:1px solid var(--border)}.problem-label{flex-shrink:0}.problem-label span{font-size:10px;letter-spacing:1px;color:var(--primary)}.problem-label p{font-size:12px;margin-top:4px}.problem-options{display:flex;flex-wrap:wrap;gap:9px}.problem-options button{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--muted-foreground);font-size:11px;transition:all .2s}.problem-options button[aria-pressed=true]{background:color-mix(in srgb,var(--primary) 7%,var(--card));border-color:color-mix(in srgb,var(--primary) 55%,var(--card));color:var(--primary)}.platform-strip{display:flex;align-items:center;gap:55px;padding-block:35px 40px;border-bottom:1px solid var(--border)}.platform-strip>p{font-size:12px;flex-shrink:0;line-height:1.7}.platform-strip strong{font-weight:500;color:var(--foreground)}.platform-names{display:flex;align-items:center;justify-content:space-between;gap:25px;width:100%;color:color-mix(in srgb,var(--foreground) 70%,var(--card));font-size:22px;font-weight:600;letter-spacing:-1px}.shopify-word{font-style:italic}.loop-mark{padding-left:4px}.power-word{font-size:16px;letter-spacing:-.8px}.yotpo-word{position:relative;font-size:25px}.coming{position:absolute;top:31px;left:3px;font-size:6px;letter-spacing:1px;font-family:var(--font-fragment);font-weight:400}.salesforce-word{font-size:18px;letter-spacing:-.6px}.klaviyo-word{font-size:26px;letter-spacing:-1.5px}.section{padding-block:100px}.story-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px}.section-description{margin-top:24px;font-size:17px}.story-copy{display:flex;flex-direction:column;gap:19px;padding-top:40px}.story-copy .story-lead{font-size:22px;line-height:1.5;color:var(--foreground);letter-spacing:-.5px}.story-copy>p{font-size:15px}.founder-details{border-top:1px solid var(--border);padding-top:20px}.founder-details summary{display:flex;align-items:center;justify-content:space-between;color:var(--primary);cursor:pointer;font-size:14px}.founder-placeholder{display:flex;align-items:center;gap:20px;background:var(--muted);padding:20px;margin-block:20px}.founder-placeholder svg{flex-shrink:0}.founder-placeholder strong{font-size:14px}.founder-placeholder p{font-size:13px;margin-top:8px}.small-note{font-size:12px;line-height:1.6;color:var(--muted-foreground)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px}.section-heading>p{font-size:15px;max-width:300px}.ecosystem-section{background:var(--muted);border-block:1px solid var(--border)}.ecosystem-layout{display:grid;grid-template-columns:1.4fr 1fr;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--card)}.ecosystem-map{padding:45px 35px;text-align:center;background:repeating-linear-gradient(135deg,transparent,transparent 16px,color-mix(in srgb,var(--accent) 3%,transparent) 16px,color-mix(in srgb,var(--accent) 3%,transparent) 17px)}.map-source{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--primary);font-size:26px;font-weight:600;letter-spacing:-1px}.map-source span{font-size:13px;font-weight:400;color:var(--muted-foreground);letter-spacing:0}.map-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-block:38px 24px}.map-node{display:flex;flex-direction:column;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:23px 10px;color:var(--muted-foreground);position:relative;transition:transform .2s,border .2s}.map-node[aria-pressed=true]{border-color:var(--primary);color:var(--primary);background:var(--muted);transform:translateY(-4px);box-shadow:0 8px 16px color-mix(in srgb,var(--primary) 7%,transparent)}.map-node strong{font-size:14px}.map-node span{font-size:10px}.ecosystem-detail{border-left:1px solid var(--border);padding:40px;display:flex;flex-direction:column;align-items:flex-start;gap:19px}.product-icon.large{width:49px;height:49px}.ecosystem-detail .eyebrow{margin:0;font-size:10px}.ecosystem-detail h3{font-size:31px}.ecosystem-detail p{font-size:14px}.flow-label{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--primary);background:var(--muted);padding:9px 12px;border-radius:5px}.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:24px}.demo-card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:24px;scroll-margin-top:30px}.demo-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.demo-top strong{font-size:12px;color:var(--primary)}.sample-label{font-size:8px;letter-spacing:.4px;color:var(--muted-foreground)}.demo-card h3{font-size:23px;margin-block:23px;min-height:52px}.demo-interface{background:var(--muted);border:1px solid var(--border);padding:15px;border-radius:8px;min-height:170px}.metric-row{display:flex;justify-content:space-between;font-size:11px;padding-block:7px;gap:10px}.metric-row strong{font-weight:500}.metric-row.total{border-top:1px solid var(--border);color:var(--primary)}.demo-record{display:flex;align-items:center;gap:12px}.record-icon{color:var(--primary)}.record-icon>span{font-size:9px}.demo-record strong{font-size:11px}.demo-record p{font-size:10px}.demo-state{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--primary);border-top:1px dashed var(--border);padding-top:17px;margin-top:25px}.demo-result{font-size:12px;line-height:1.65;color:var(--muted-foreground);min-height:110px;padding-top:20px}.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:8px}.demo-controls .text-link{font-size:11px;gap:7px;text-align:left}.icon-button{display:grid;place-items:center;border:0;background:none;color:var(--muted-foreground);padding:6px}.guide-link{display:block;margin-top:15px;font-size:11px}.check-label{display:flex;align-items:center;gap:7px;font-size:10px;margin-top:12px}.check-label input{accent-color:var(--primary)}.finder-section{background:var(--muted)}.finder-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:80px}.finder-layout h2{font-size:43px}.finder-layout p{margin-top:23px}.finder-layout>div>.text-link{margin-top:28px}.finder-form{display:flex;flex-direction:column;gap:13px}.finder-form label{font-size:13px}.finder-form select,.search-input,.platform-filter{background:var(--card);color:var(--foreground);border:1px solid var(--border);padding:14px 15px;border-radius:7px;min-width:0;width:100%;font-size:14px}.finder-form select{margin-bottom:9px}.finder-form .button{align-self:flex-start}.finder-results{display:flex;flex-direction:column;gap:10px}.finder-results a{background:var(--card);border:1px solid var(--border);padding:15px;border-radius:8px;display:flex;flex-direction:column;gap:6px}.finder-results strong{display:flex;align-items:center;justify-content:space-between;color:var(--primary)}.finder-results span{font-size:12px;color:var(--muted-foreground)}.closing{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}.closing .eyebrow{margin:0}.closing h2{font-size:60px}.closing-bolt{display:grid;place-items:center;width:55px;height:55px;background:var(--muted);border-radius:14px;color:var(--primary);transform:rotate(-8deg)}.closing-bolt svg{width:35px;height:35px}.closing-actions{display:flex;align-items:center;gap:28px}.footer{display:flex;align-items:center;gap:25px;flex-wrap:wrap;border-top:1px solid var(--border);padding-block:32px;font-size:11px}.footer .brand{font-size:22px}.footer .brand>svg{width:29px;height:34px}.footer .brand-sub{font-size:6px;letter-spacing:3px}.footer p{margin-right:auto}.footer>span{width:100%;color:var(--muted-foreground);font-size:10px}.learn-hero{padding-block:76px 45px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}.learn-hero .eyebrow{margin:0}.learn-hero h1{font-size:62px}.learn-hero p{font-size:17px}.search-bar{width:min(650px,100%);display:flex;align-items:center;gap:12px;margin-top:9px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding-left:20px;color:var(--primary)}.search-input{border:0;background:transparent;padding:19px 15px}.hub-filters{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:25px;border-block:1px solid var(--border)}.category-links{display:flex;flex-wrap:wrap;gap:9px}.category-links a{padding:7px 11px;border:1px solid var(--border);border-radius:6px;font-size:12px;background:var(--card)}.category-links a.active{background:var(--primary);color:var(--card)}.platform-filter{width:185px;padding:9px;font-size:12px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-block:40px}.guide-card{display:flex;flex-direction:column;align-items:flex-start;gap:20px;border:1px solid var(--border);border-radius:12px;padding:26px;background:var(--card);transition:transform .2s}.guide-card:hover{transform:translateY(-4px);border-color:var(--accent)}.guide-card h2{font-size:27px}.guide-card p{font-size:13px}.guide-card .text-link{margin-top:auto}.guide-layout{display:grid;grid-template-columns:220px 1fr;gap:65px;padding-block:50px 85px}.guide-sidebar{display:flex;flex-direction:column;gap:14px;align-items:flex-start}.guide-sidebar a{font-size:13px;color:var(--muted-foreground)}.guide-sidebar strong{font-size:12px;color:var(--primary)}.guide-article h1{font-size:49px;margin-block:22px}.guide-article>p{margin-block:20px}.guide-article h2{font-size:27px;margin-block:34px 16px}.guide-article li{margin-bottom:9px;color:var(--muted-foreground)}.guide-article ol,.guide-article ul{padding-left:23px}.guide-article details{border-bottom:1px solid var(--border);padding-block:16px}.guide-article summary{cursor:pointer;font-weight:500;font-size:14px}.guide-article details p{padding-top:12px;font-size:14px}.walkthrough{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:30px;margin-block:30px}.walkthrough-progress{display:flex;gap:8px;margin-bottom:25px}.walkthrough-progress span{height:4px;border-radius:4px;flex:1;background:var(--border)}.walkthrough-progress span.done{background:var(--primary)}.walkthrough h3{margin-block:17px}.walkthrough p{font-size:14px;margin-bottom:25px}.walkthrough-actions{display:flex;align-items:center;gap:24px}.documentation-banner{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:30px;background:var(--muted);border-radius:12px;margin-block:20px 70px}.documentation-banner h2{font-size:25px}.documentation-banner p{font-size:13px;margin-top:9px}.empty-state{padding:60px;text-align:center;grid-column:1/-1}.empty-state button{margin-top:20px}.breadcrumb{font-size:12px;color:var(--primary)}@keyframes appear{from{opacity:.3;translate:0 6px}to{opacity:1;translate:0 0}}
@media(min-width:1450px){.hero-grid{padding-block:85px 65px}.hero h1{font-size:80px}}
@media(max-width:1100px){.container{width:calc(100% - 64px)}.hero-grid{gap:20px}.hero h1{font-size:60px}.hero-actions{gap:15px}.hero-actions .text-link{font-size:12px}.platform-card{width:110px;height:120px}.scene-heading{font-size:8px}.story-layout{gap:50px}.platform-strip{gap:30px}.platform-names{gap:15px}.demo-grid{grid-template-columns:repeat(2,1fr)}.problem-bar{gap:20px}.scene-note{left:30px}.ecosystem-detail{padding:30px}.finder-layout{gap:40px}}
@media(max-width:760px){.container{width:calc(100% - 40px)}.site-header{height:80px}.brand{font-size:25px}.brand>svg{width:31px;height:37px}.brand-sub{font-size:7px;letter-spacing:3px}.site-header nav{gap:15px}.site-header nav a{font-size:12px}.site-header nav a:nth-child(-n+2){display:none}.site-header .button{font-size:11px;padding:10px 13px;gap:10px}.hero-grid{grid-template-columns:1fr;gap:45px;padding-block:42px 30px}.hero h1{font-size:61px;letter-spacing:-3.5px}.hero .eyebrow{font-size:9px;margin-bottom:22px}.hero-description{font-size:18px}.hero-support{font-size:14px}.hero-actions{gap:20px}.hero-actions .button{font-size:12px;padding:14px 17px;gap:12px}.hero-visual{padding-top:0;max-width:500px;width:100%;margin-inline:auto}.connection-scene{height:265px;padding-inline:10px}.scene-note{left:43px;top:20px;font-size:14px}.platform-card{width:117px;height:120px}.lightning-hub{width:65px;height:65px;border-width:5px;border-radius:17px}.lightning-hub svg{width:38px;height:38px}.note-top{top:60px;right:0;font-size:9px}.note-bottom{bottom:15px;left:30px;font-size:9px}.tiny-bolt{bottom:15px;right:32px}.scene-heading{font-size:8px}.live-label{font-size:8px}.scene-result p{font-size:11px}.scene-caption{font-size:9px}.problem-bar{align-items:flex-start;flex-direction:column;gap:14px;padding-block:25px}.problem-label{display:flex;align-items:center;gap:15px}.problem-label p{margin:0;font-size:11px}.problem-label span{font-size:9px}.problem-options{gap:8px}.problem-options button{font-size:10px;padding:9px}.platform-strip{flex-direction:column;gap:22px;padding-block:28px}.platform-strip>p{text-align:center}.platform-names{flex-wrap:wrap;justify-content:center;column-gap:28px;row-gap:26px}.platform-names>span{font-size:20px}.platform-names .power-word{font-size:14px}.section{padding-block:65px}.story-layout,.finder-layout{grid-template-columns:1fr;gap:30px}.story-copy{padding:0}.story-copy .story-lead{font-size:21px}.section-heading{flex-direction:column;align-items:flex-start;gap:23px;margin-bottom:30px}.section-heading>p{font-size:14px}.ecosystem-layout{grid-template-columns:1fr}.ecosystem-map{padding:30px 20px}.map-branches{gap:12px}.map-node{padding:17px 8px}.map-node span{font-size:9px}.ecosystem-detail{border-left:0;border-top:1px solid var(--border);padding:28px}.demo-grid{grid-template-columns:1fr}.demo-card h3{min-height:0}.demo-result{min-height:90px}.demo-interface{min-height:140px}.finder-layout h2{font-size:36px}.closing h2{font-size:45px}.closing-actions{flex-direction:column;gap:23px}.footer{gap:23px}.footer p{width:100%;order:2}.footer>span{order:3}.learn-hero{padding-block:50px 35px}.learn-hero h1{font-size:43px}.learn-hero p{font-size:15px}.hub-filters{align-items:flex-start;flex-direction:column}.category-links{gap:7px}.category-links a{font-size:11px;padding:7px 10px}.guide-grid{grid-template-columns:1fr}.documentation-banner{align-items:flex-start;flex-direction:column}.guide-layout{grid-template-columns:1fr;gap:30px}.guide-sidebar{flex-direction:row;flex-wrap:wrap;gap:13px}.guide-sidebar strong{width:100%}.guide-article h1{font-size:38px}.walkthrough{padding:23px}.walkthrough-actions{gap:15px}.walkthrough-actions .button{font-size:12px}.flow-label{font-size:11px}}
.stage-footnote{position:absolute;bottom:4px;left:45px;font-size:9px;letter-spacing:.08em;color:var(--muted-foreground)}.motion-toggle{position:absolute;bottom:0;right:0;border:1px solid var(--border);background:var(--card);color:var(--primary);padding:8px;border-radius:50%;display:grid;place-items:center}.motion-toggle svg{width:15px;height:15px}.journey-intro{font-size:10px;font-family:var(--font-fragment);display:flex;align-items:center;gap:14px}.journey-steps button{display:flex;flex-direction:column;gap:8px;min-width:98px}.journey-steps button .font-mono{font-size:10px}.journey-description{max-width:280px}.sample-order{display:flex;align-items:center;gap:12px;background:var(--muted);padding:14px;border-radius:6px}.sample-order img{width:45px;height:55px;object-fit:cover;border-radius:4px}.sample-order>div{flex:1}.sample-order strong{font-size:13px;display:block}.sample-order span{font-size:11px}.workflow-steps{display:flex;flex-direction:column;gap:12px}.workflow-steps>div{display:flex;align-items:center;gap:12px;font-size:13px}.workflow-steps>div>span{width:24px;height:24px;border-radius:50%;background:var(--muted);display:grid;place-items:center}.workflow-steps>div.complete,.workflow-steps>div.done{animation:rise-in .5s both;color:var(--primary)}.workflow-steps svg{width:14px}.demo-feedback{font-size:12px;color:var(--primary);background:var(--muted);padding:12px;min-height:48px}.demo-actions{display:flex;align-items:center;gap:15px}.demo-actions .reset{background:transparent;color:var(--muted-foreground);padding:8px}.payout-table>div{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);font-size:14px}.payout-table>div:last-child{color:var(--primary);font-size:18px;font-weight:600}.launch-copy{min-width:0}@media(max-width:760px){.launch-grid{grid-template-columns:minmax(0,1fr)!important}.launch-copy h1{font-size:clamp(62px,18.5vw,83px)!important}.launch-copy .hero-actions{flex-wrap:wrap!important}.commerce-stage{transform:scale(.59)!important}.journey-steps{width:100%;overflow:auto}.journey-steps button{min-width:73px}.journey-description{max-width:100%}.stage-footnote{bottom:0}.demo-toolbar .font-mono{font-size:7px}.demo-actions{flex-wrap:wrap}.platform-strip{display:flex}}
:root{--accent:#C13A8E;--background:#FFFFFF}
em{font-style:normal;color:var(--primary)}
.launch-hero{overflow:hidden;background:var(--background)}.hero-topline{display:flex;justify-content:space-between;padding-block:24px;font-family:var(--font-fragment);font-size:11px;letter-spacing:.1em}.launch-grid{display:grid;grid-template-columns:1fr 1.12fr;align-items:center;min-height:630px;padding-block:28px 58px;gap:24px}.launch-copy{position:relative;z-index:2}.launch-copy h1{font-size:clamp(70px,7.8vw,118px);line-height:.96;letter-spacing:-.075em;animation:rise-in .9s both}.launch-copy>p{font-size:21px;line-height:1.5;margin-block:28px;animation:rise-in .9s .15s both}.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.play-link{display:flex;align-items:center;gap:9px;font-size:14px}.play-link>span{display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;width:30px;height:30px}.commerce-stage{height:560px;position:relative;isolation:isolate}.stage-grid{position:absolute;inset:0 -70px;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:45px 45px;mask-image:radial-gradient(ellipse,black,transparent 70%);opacity:.6}.stage-caption{position:absolute;top:5px;left:70px;font-size:10px;letter-spacing:.15em}.social-frame{width:240px;height:385px;position:absolute;left:54px;top:67px;border:7px solid var(--card);border-radius:22px;overflow:hidden;box-shadow:0 20px 60px color-mix(in srgb,var(--foreground) 15%,transparent);transform:rotate(-9deg);animation:phone-enter 1.1s both}.social-frame>img{width:100%;height:100%;object-fit:cover}.social-top,.social-bottom,.social-side{position:absolute;color:var(--card)}.social-top{top:16px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:14px}.social-side{right:12px;top:140px;display:flex;flex-direction:column;gap:16px}.social-bottom{bottom:16px;left:14px;right:14px}.social-bottom strong{font-size:16px}.social-bottom p{color:var(--card);font-size:12px}.social-bottom button{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:var(--card);color:var(--foreground);padding:10px;margin-top:10px;font-size:11px;border-radius:5px}.order-slip{position:absolute;left:0;top:405px;z-index:3;display:flex;align-items:center;gap:12px;padding:16px;background:var(--card);border:1px solid var(--border);box-shadow:0 12px 30px color-mix(in srgb,var(--foreground) 8%,transparent);transform:rotate(-3deg);animation:slip-float 5s ease-in-out infinite}.order-slip .font-mono{font-size:8px;letter-spacing:.08em}.order-slip strong{display:block;font-size:14px}.order-slip p{font-size:12px}.slip-icon{background:var(--muted);padding:10px;border-radius:50%;color:var(--primary)}.stage-hub{position:absolute;top:242px;left:320px;width:76px;height:76px;border-radius:20px;display:grid;place-items:center;background:var(--primary);color:var(--card);box-shadow:0 0 0 10px var(--background);z-index:3;animation:hub-breathe 4s infinite}.stage-hub svg{width:44px;height:44px}.orbit-node{position:absolute;z-index:2;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:14px 18px;box-shadow:0 10px 22px color-mix(in srgb,var(--foreground) 5%,transparent);border-radius:9px;animation:rise-in 1s both}.orbit-node>svg{color:var(--primary);width:21px}.orbit-node strong{display:block;font-size:14px}.orbit-node span{font-size:10px;color:var(--muted-foreground)}.node-one{top:99px;right:-12px;transform:rotate(5deg)}.node-two{top:255px;right:-58px;transform:rotate(-3deg)}.node-three{top:398px;right:-18px;transform:rotate(4deg)}.orbit-line{position:absolute;border:1px dashed var(--primary);opacity:.3;left:358px;right:70px;z-index:0}.line-one{top:148px;height:132px;border-bottom:0;border-right:0}.line-two{top:280px;right:0}.line-three{top:280px;height:154px;border-top:0;border-right:0}.paused *{animation-play-state:paused!important}.step-1 .node-one,.step-2 .node-two,.step-3 .node-three{outline:2px solid var(--primary);box-shadow:0 0 0 7px var(--accent)}
#journey{border-top:1px solid var(--border);padding-block:24px;display:flex;align-items:center;justify-content:space-between;gap:24px}#journey button{border:0;background:transparent;color:var(--muted-foreground);text-align:left;padding:10px}#journey button[aria-pressed=true]{color:var(--primary)}#journey strong{font-size:17px}#journey p{font-size:13px}.journey-steps,.moment-controls,.journey-controls{display:flex;align-items:center;gap:12px}.journey-steps button,.moment-controls button{border-bottom:2px solid var(--border)!important}.journey-steps button[aria-pressed=true]{border-color:var(--primary)!important}
.platform-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding-block:35px}.platform-names{display:flex;align-items:center;justify-content:space-between;flex:1;gap:25px}.platform-names span{font-size:25px;font-weight:600;letter-spacing:-1px}.platform-strip>p{font-size:13px}.platform-strip strong{font-weight:500;color:var(--foreground)}.reveal{opacity:1;transition:opacity .8s,transform .8s}.reveal.visible{animation:rise-in .8s both}.eyebrow{display:block;font-family:var(--font-fragment);font-size:11px;letter-spacing:.08em;margin-bottom:25px}.tension-section{padding-block:115px;background:var(--card)}.tension-grid{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}.tension-grid h2{font-size:48px}.tension-grid p{max-width:450px;margin-top:24px;font-size:16px}.tension-grid .text-link{margin-top:24px}.reality-board{background:var(--background);padding:30px;border:1px solid var(--border);border-radius:6px;min-height:385px}.board-label{font-size:10px;letter-spacing:.1em;margin-bottom:30px}.reality-ticket{display:flex;align-items:center;gap:12px;background:var(--card);padding:15px;border:1px solid var(--border);margin-block:12px;transition:transform .7s,background .7s}.reality-ticket strong{font-size:13px;font-weight:500;flex:1}.reality-ticket>span:last-child{font-size:10px;color:var(--muted-foreground)}.ticket-symbol{color:var(--primary)}.ticket-0{transform:rotate(-4deg) translateX(-20px)}.ticket-1{transform:rotate(3deg) translateX(12px)}.ticket-2{transform:rotate(-2deg) translateX(-5px)}.ticket-3{transform:rotate(3deg) translateX(18px)}.connected .reality-ticket{transform:none;background:var(--muted)}.board-footer{display:flex;align-items:center;gap:10px;margin-top:27px;color:var(--primary);font-size:12px}.product-section{padding-block:110px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:30px}.section-heading p{font-size:15px}.product-tabs{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);gap:8px}.product-tabs button{display:flex;align-items:center;gap:10px;padding:20px 12px;background:transparent;border:0;border-bottom:3px solid transparent;font-size:15px}.product-tabs button>svg:last-child{opacity:0}.product-tabs button:hover>svg:last-child{opacity:1}.product-tabs button[aria-selected=true]{border-color:var(--primary);color:var(--primary)}.app-feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;padding-block:55px 10px;align-items:center}.app-story{animation:rise-in .5s both}.app-story .eyebrow{font-size:10px}.pain-line{text-decoration:line-through;text-decoration-color:var(--primary);font-size:15px;margin-bottom:16px}.app-story h3{font-size:39px;line-height:1.15;margin-bottom:22px}.app-story>p:not(.pain-line){font-size:15px}.feature-details{display:flex;flex-direction:column;gap:10px;margin-block:25px}.feature-details>span{display:flex;gap:9px;align-items:center;font-size:13px}.feature-details svg{color:var(--primary)}.app-demo{border:1px solid var(--border);background:var(--card);box-shadow:16px 16px 0 var(--muted);min-height:390px;border-radius:8px;overflow:hidden}.demo-toolbar{display:flex;justify-content:space-between;align-items:center;padding:18px;border-bottom:1px solid var(--border);gap:10px}.demo-toolbar>span:first-child{display:flex;align-items:center;gap:8px;font-weight:600}.demo-toolbar .font-mono{font-size:8px}.demo-body{padding:30px;animation:rise-in .5s both}.demo-title{display:flex;align-items:center;gap:12px;font-size:15px;margin-bottom:25px}.demo-title svg{color:var(--primary)}.demo-body button{border:0;background:var(--primary);color:var(--card);padding:12px 18px;display:inline-flex;align-items:center;gap:12px;margin-top:20px;border-radius:4px}.demo-body p{font-size:13px}.demo-body label{display:flex;gap:9px;font-size:13px;margin-block:15px}.demo-body input{accent-color:var(--primary)}.demo-body li{padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}.demo-body ul,.demo-body ol{padding-left:20px}.demo-body>div:not(.demo-title){margin-block:15px}.demo-disclaimer,.demo-note{font-size:10px!important;color:var(--muted-foreground);padding:15px 25px;border-top:1px solid var(--border)}
.origin-section{background:var(--foreground);color:var(--card);padding-block:100px;overflow:hidden}.origin-heading{text-align:center}.origin-heading .eyebrow{color:var(--accent)}.origin-heading h2{font-size:55px}.origin-heading em{color:var(--accent)}.origin-heading p{color:var(--card);opacity:.65;margin-top:22px}.origin-columns{display:grid;grid-template-columns:1fr 60px 1fr;gap:35px;align-items:center;margin-top:75px}.origin-columns article{border-top:1px solid color-mix(in srgb,var(--card) 25%,transparent);padding-top:26px}.origin-label{font-size:11px;letter-spacing:.13em;color:var(--accent)}.origin-columns h3{font-size:32px;display:flex;justify-content:space-between;margin-block:22px}.origin-columns p{color:var(--card);opacity:.65;font-size:15px;line-height:1.8}.origin-cross{font-size:55px;color:var(--accent);text-align:center}.origin-art{height:120px;display:flex;align-items:center;justify-content:center;gap:15px;margin-top:25px;background:color-mix(in srgb,var(--card) 5%,transparent)}.engineering{flex-direction:column;gap:6px}.engineering span{display:flex;gap:12px;font-family:var(--font-fragment);font-size:12px}.engineering svg{color:var(--accent)}.operations{gap:10px;font-family:var(--font-fragment);font-size:10px}.operations svg{width:16px;color:var(--accent)}.origin-conclusion{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:70px}.origin-conclusion svg{width:45px;height:55px;color:var(--accent)}.origin-conclusion p{color:var(--card);font-size:20px}.origin-conclusion strong{font-weight:500;color:var(--accent)}.finder-section{padding-block:110px;display:grid;grid-template-columns:1fr 1fr;gap:80px}.finder-section>div>p{margin-top:24px}.finder-choices>div{border-bottom:1px solid var(--border)}.finder-choices button{background:none;border:0;width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:22px 0;font-size:15px;gap:15px}.finder-choices button[aria-expanded=true]{color:var(--primary)}.finder-answer{padding-bottom:24px;animation:rise-in .4s both}.finder-answer p{font-size:14px;margin-block:10px 15px}.closing{text-align:center;background:var(--accent);color:var(--foreground);padding:85px 0 0;overflow:hidden}.closing h2{font-size:clamp(44px,5vw,76px)}.closing p{margin-block:25px}.closing-word{font-size:clamp(90px,20vw,300px);font-weight:700;letter-spacing:-.085em;line-height:1;display:flex;align-items:center;justify-content:center;margin-top:50px;transform:translateY(20%);color:var(--primary)}.closing-word svg{width:14vw;height:17vw}.closing .eyebrow{color:var(--primary)}
@keyframes rise-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes phone-enter{from{opacity:0;transform:translateY(50px) rotate(0)}to{opacity:1;transform:translateY(0) rotate(-9deg)}}@keyframes slip-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(-2deg)}}@keyframes hub-breathe{0%,100%{box-shadow:0 0 0 10px var(--background)}50%{box-shadow:0 0 0 16px color-mix(in srgb,var(--accent) 35%,transparent)}}
@media(max-width:1100px){.launch-copy h1{font-size:85px}.commerce-stage{transform:scale(.82);transform-origin:center}.launch-grid{grid-template-columns:1fr 1fr;min-height:570px}.tension-grid,.app-feature{gap:35px}.product-tabs button{padding:15px 5px;font-size:13px}.product-tabs button>svg:last-child{display:none}.origin-columns{gap:20px}.hero-topline{font-size:9px}}
@media(max-width:760px){.launch-grid{grid-template-columns:1fr;padding-block:24px 10px;gap:0}.launch-copy h1{font-size:83px}.launch-copy>p{font-size:18px}.hero-topline{font-size:8px;padding-block:20px}.hero-topline>span:last-child{display:none}.launch-copy .hero-actions{gap:18px}.commerce-stage{height:500px;width:540px;max-width:none;transform:scale(.67);transform-origin:top left;margin-top:45px;margin-bottom:-150px}.hero-actions .button{font-size:12px}.stage-caption{font-size:11px}.launch-copy h1 br:nth-child(2){display:none}.launch-copy h1 em{display:block}.tension-grid,.app-feature,.finder-section{grid-template-columns:1fr;gap:40px}.tension-section,.product-section,.finder-section{padding-block:65px}.tension-grid h2{font-size:37px}.tension-grid p{font-size:15px}.reality-board{padding:23px}.product-tabs{overflow-x:auto;justify-content:flex-start}.product-tabs button{flex-shrink:0;padding:15px 12px}.app-story h3{font-size:34px}.section-heading{align-items:flex-start;gap:24px;margin-bottom:30px}.section-heading h2{font-size:39px}.section-heading p{font-size:14px}.app-feature{padding-top:35px}.app-demo{box-shadow:7px 7px 0 var(--muted)}.demo-body{padding:23px}.origin-section{padding-block:65px}.origin-heading h2{font-size:36px}.origin-columns{grid-template-columns:1fr;gap:25px;margin-top:45px}.origin-cross{line-height:1}.origin-conclusion{margin-top:45px;gap:15px}.origin-conclusion p{font-size:17px}.origin-columns h3{font-size:30px}.closing{padding-top:65px}.closing h2{font-size:43px}#journey{flex-wrap:wrap;gap:10px}#journey strong{font-size:14px}#journey p{font-size:12px}.platform-names span{font-size:22px}.eyebrow{font-size:9px}.finder-choices button{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.container{width:min(1180px,calc(100% - 56px))}h1,h2{font-weight:700;letter-spacing:-.028em}h2{font-size:36px;line-height:1.15}h3{font-weight:500}em{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.site-header{height:64px;position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--card) 93%,transparent);backdrop-filter:blur(12px)}.brand{font-size:23px;letter-spacing:-1px;gap:7px}.brand>svg{width:32px;height:38px;transform:none}.brand-sub{display:inline;font-family:var(--font-space);font-weight:400;color:var(--muted-foreground);font-size:23px;letter-spacing:-1px;margin:0}.button,.demo-body button{border-radius:10px 10px 0 10px;clip-path:polygon(0 0,100% 0,100% calc(100% - 3px),calc(100% - 10px) 100%,0 100%);background:var(--action);background-size:180% 180%;animation:action-shift 7s ease infinite;min-height:44px;font-size:14px;font-weight:500;transition:filter .15s,transform .25s}.button:hover,.demo-body button:hover{background:var(--action);filter:brightness(1.16);transform:translateY(-2px)}.site-header .button{background:var(--foreground);min-height:40px}.text-link{color:var(--primary)}.text-link svg{transition:transform .15s}.text-link:hover svg{transform:translateX(4px)}.eyebrow{font-size:11px;letter-spacing:.14em}.launch-grid{grid-template-columns:470px minmax(0,1fr);min-height:690px;padding-block:40px 64px;gap:55px}.launch-copy h1{font-size:52px;line-height:1.06;letter-spacing:-.028em}.launch-copy h1 em{color:var(--foreground)}.launch-copy>p{font-size:17px;line-height:1.6}.launch-copy .hero-actions{gap:20px}.play-link{border:0;background:none;color:var(--primary);padding:0;font-size:14px}.hero-topline{font-size:11px;color:var(--muted-foreground)}.hero-narration{margin-top:34px;max-width:405px;min-height:193px;padding:20px 22px;background:var(--muted);border:1px solid var(--border);border-radius:14px;animation:rise-in .45s both}.hero-narration>.font-mono{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground)}.hero-narration h3{font-size:18px;line-height:1.3;letter-spacing:-.015em;margin-block:10px}.hero-narration p{font-size:14px;line-height:1.6}.narration-controls{display:flex;justify-content:space-between;margin-top:14px}.narration-controls button{border:0;background:none;color:var(--primary);font-size:13px;padding:0;display:flex;gap:8px;align-items:center}.narration-controls button:disabled{opacity:.42;cursor:default}.commerce-stage{height:560px}.stage-hub{background:var(--foreground);color:var(--card);border-radius:24px;animation:none;box-shadow:0 0 0 10px var(--background)}.stage-hub svg{color:var(--card)}.orbit-node{color:var(--foreground);border-radius:14px;text-align:left;transition:transform .25s,box-shadow .25s}.orbit-node:hover{transform:translateY(-5px);box-shadow:0 18px 44px color-mix(in srgb,var(--foreground) 12%,transparent)}.orbit-node>span{font-size:14px}.node-one>svg{color:var(--app-connector)}.node-two>svg{color:var(--app-dash)}.node-three>svg{color:var(--app-loyalty)}.step-1 .node-one,.step-2 .node-two,.step-3 .node-three{outline:1px solid var(--primary);box-shadow:0 18px 48px color-mix(in srgb,var(--foreground) 12%,transparent)}.orbit-line{border-color:var(--border);opacity:1}.order-slip{border-radius:14px}.slip-icon{color:var(--foreground)}.social-frame{box-shadow:0 18px 48px color-mix(in srgb,var(--foreground) 12%,transparent)}.stage-caption{font-size:11px}.stage-footnote{font-size:10px}.platform-strip{padding-block:44px;margin-top:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;gap:48px}.platform-strip>p{font-size:14px;min-width:200px}.platform-names span{font-family:var(--font-space);font-size:18px;font-weight:500;letter-spacing:-.03em}.tension-section{background:var(--muted);padding-block:96px}.tension-grid h2{font-size:36px;line-height:1.15}.tension-grid em{color:var(--foreground)}.reality-board{background:var(--card);border-radius:24px;box-shadow:0 18px 48px color-mix(in srgb,var(--foreground) 7%,transparent)}.reality-ticket{border-radius:12px}.connected .reality-ticket{background:var(--muted)}.ticket-symbol,.board-footer{color:var(--foreground)}.product-section{padding-block:96px}.section-heading{align-items:flex-start}.section-heading h2{font-size:36px;line-height:1.15;max-width:760px}.section-heading em{color:var(--muted-foreground)}.section-heading>p{max-width:235px;font-size:15px}.product-tabs{padding:8px;background:var(--muted);border:1px solid var(--border);border-radius:14px;gap:6px}.product-tabs button{border:0;border-radius:8px;flex:1;text-transform:lowercase;justify-content:center;padding:14px 10px;transition:background .15s}.product-tabs button[aria-selected=true]{background:var(--card);color:var(--foreground);box-shadow:0 1px 2px color-mix(in srgb,var(--foreground) 8%,transparent)}.product-tabs button:nth-child(1)>svg:first-child{color:var(--app-connector)}.product-tabs button:nth-child(2)>svg:first-child{color:var(--app-dash)}.product-tabs button:nth-child(3)>svg:first-child{color:var(--app-returns)}.product-tabs button:nth-child(4)>svg:first-child{color:var(--app-reviews)}.product-tabs button:nth-child(5)>svg:first-child{color:var(--app-loyalty)}.product-tabs button:nth-child(6)>svg:first-child{color:var(--app-crm)}.app-story h3{font-size:30px;letter-spacing:-.025em}.app-demo{border-radius:24px;box-shadow:0 1px 2px color-mix(in srgb,var(--foreground) 4%,transparent),0 18px 48px color-mix(in srgb,var(--foreground) 7%,transparent)}.demo-toolbar{padding:20px 24px;background:var(--muted)}.feature-details svg,.demo-title svg{color:var(--foreground)}.demo-feedback{color:var(--foreground);border-radius:14px}.demo-body p{font-size:14px}.closing{background:var(--muted);color:var(--foreground);border-top:1px solid var(--border);padding-top:96px}.closing h2{font-size:36px}.closing em{color:var(--foreground)}.closing-word{color:var(--foreground);opacity:.07}.finder-section h2{font-size:36px}.finder-section em{color:var(--foreground)}
.ecosystem-trigger{display:flex;align-items:center;gap:8px;border:0;background:none;padding:0;color:var(--foreground);font-size:14px}.ecosystem-trigger svg{transition:transform .2s}.ecosystem-trigger[aria-expanded=true] svg{transform:rotate(180deg)}.mega-menu{position:absolute;top:64px;left:0;right:0;background:var(--card);box-shadow:0 24px 60px color-mix(in srgb,var(--foreground) 14%,transparent);border-bottom:1px solid var(--border);animation:menu-in .25s both}.mega-layout{display:grid;grid-template-columns:300px 1fr;gap:48px;padding-block:36px}.mega-intro h2{font-size:26px;line-height:1.2}.mega-intro p{font-size:14px;margin-block:16px}.mega-intro .eyebrow{margin-bottom:18px}.mega-apps{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}.mega-app{display:flex;align-items:center;gap:14px;border-radius:14px;padding:15px 10px;transition:background .15s,transform .25s}.mega-app:hover{background:var(--muted);transform:translateY(-3px)}.mega-app strong{font-size:15px;font-weight:500;display:block}.mega-app small{display:block;font-size:13px;color:var(--muted-foreground);margin-top:4px}.mega-app>svg:last-child{margin-left:auto;color:var(--muted-foreground)}.app-icon{width:46px;height:46px;flex-shrink:0;border-radius:14px;background:var(--muted);display:grid;place-items:center}.app-connector .app-icon{color:var(--app-connector)}.app-dash .app-icon{color:var(--app-dash)}.app-returns .app-icon{color:var(--app-returns)}.app-reviews .app-icon{color:var(--app-reviews)}.app-loyalty .app-icon{color:var(--app-loyalty)}.app-crm .app-icon{color:var(--app-crm)}.mega-bottom{border-top:1px solid var(--border);display:flex;justify-content:space-between;padding-block:18px;font-size:13px;color:var(--muted-foreground)}
.origin-section{background:var(--deep);color:var(--card);padding-block:96px}.origin-title{display:flex;flex-direction:column;align-items:center;text-align:center}.origin-title h2{font-size:36px}.origin-title>.eyebrow{color:var(--card);opacity:.6}.origin-title>p{color:var(--card);opacity:.6;margin-top:20px;font-size:15px}.origin-selector{display:flex;border:1px solid var(--ink-line);border-radius:14px;margin-top:44px;padding:6px;gap:6px}.origin-selector button{flex:1;display:flex;align-items:center;gap:16px;padding:18px;border:0;border-radius:10px;background:transparent;color:var(--card);font-size:15px;text-align:left}.origin-selector button .font-mono{font-size:11px;opacity:.5}.origin-selector button svg{margin-left:auto;opacity:.5}.origin-selector button[aria-selected=true]{background:var(--card);color:var(--foreground)}.origin-experience{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;padding-block:55px;align-items:center;min-height:420px}.origin-text{animation:rise-in .5s both}.origin-company{font-size:14px;opacity:.55}.origin-text h3{font-size:30px;line-height:1.2;letter-spacing:-.025em;margin-block:18px}.origin-text p{color:var(--card);opacity:.7;font-size:15px;line-height:1.7}.origin-next{display:flex;align-items:center;gap:18px;color:var(--card);background:transparent;border:0;border-bottom:1px solid var(--ink-line);padding:12px 0;margin-top:25px;font-size:14px}.origin-next:hover svg{transform:translateX(5px)}.origin-machine{background:var(--foreground);border:1px solid var(--ink-line);border-radius:24px;padding:28px;animation:rise-in .6s both}.machine-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;opacity:.55}.machine-route{display:flex;align-items:center;justify-content:space-between;margin-block:30px;gap:12px}.machine-route>span{font-size:12px;max-width:90px;text-align:center}.machine-core{display:grid;place-items:center;width:64px;height:64px;border-radius:14px;border:1px solid var(--ink-line);flex-shrink:0}.machine-core svg{width:32px;height:32px}.machine-connector{flex:1;height:1px;background:var(--ink-line);position:relative;overflow:hidden}.machine-connector:after{content:'';position:absolute;left:0;width:35%;height:1px;background:var(--card);animation:data-flow 2s ease-in-out infinite}.machine-events{display:flex;flex-direction:column;gap:8px}.machine-events>div{display:flex;gap:12px;align-items:center;border:1px solid var(--ink-line);padding:13px;border-radius:12px;font-size:13px;animation:rise-in .5s both}.machine-events>div>span:last-child{margin-left:auto;opacity:.4;font-size:10px}.machine-footer{border-top:1px solid var(--ink-line);display:flex;gap:10px;align-items:center;padding-top:18px;margin-top:22px;font-size:12px;opacity:.6}.origin-signoff{display:flex;justify-content:center;align-items:center;gap:22px;border-top:1px solid var(--ink-line);padding-top:32px;font-size:15px}.origin-signoff>span:nth-child(2){opacity:.4}.origin-signoff strong{font-weight:500}.origin-signoff>svg{width:20px;opacity:.5}@keyframes action-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes data-flow{from{transform:translateX(-100%)}to{transform:translateX(400%)}}@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.launch-grid{grid-template-columns:420px minmax(0,1fr);gap:12px}.commerce-stage{transform:scale(.75);transform-origin:left center}.hero-actions{flex-wrap:wrap}.site-header nav{gap:20px}.mega-layout{grid-template-columns:240px 1fr;gap:24px}.origin-experience{gap:32px}.brand,.brand-sub{font-size:20px}.platform-names{flex-wrap:wrap}.platform-strip{gap:24px}.section-heading{flex-direction:column}}
@media(max-width:760px){.container{width:calc(100% - 40px)}.brand,.brand-sub{font-size:17px;letter-spacing:-.7px}.brand>svg{width:24px;height:32px}.brand-sub{display:none}.site-header nav>a{display:none!important}.site-header nav{display:flex}.ecosystem-trigger{font-size:12px;gap:5px}.site-header .button{font-size:12px;min-height:36px;padding:8px 12px}.site-header .button svg{display:none}.mega-menu{max-height:calc(100dvh - 64px);overflow:auto}.mega-layout{grid-template-columns:1fr;padding-block:24px;gap:20px}.mega-intro h2{font-size:24px}.mega-intro p,.mega-intro .text-link{display:none}.mega-apps{grid-template-columns:1fr;gap:3px}.mega-app{padding:10px}.mega-bottom{font-size:12px}.mega-bottom>span:last-child{display:none}.launch-grid{grid-template-columns:minmax(0,1fr);padding-block:30px 24px;gap:0;min-height:0}.launch-copy h1{font-size:52px!important;line-height:1.06}.launch-copy h1 br:nth-child(2){display:block}.launch-copy h1 em{display:inline}.hero-topline{font-size:9px}.launch-copy>p{font-size:17px;margin-block:20px}.hero-narration{margin-top:24px;min-height:210px}.commerce-stage{width:540px;transform:scale(.59)!important;transform-origin:left top;height:560px;margin-top:25px;margin-bottom:-220px}.platform-strip{padding-block:30px;gap:24px;flex-direction:column}.platform-names{justify-content:center;gap:18px}.platform-names span{font-size:16px}.tension-grid h2,.section-heading h2,.origin-title h2,.finder-section h2,.closing h2{font-size:30px}.tension-section,.product-section,.origin-section,.finder-section{padding-block:64px}.product-tabs{overflow:auto}.product-tabs button{min-width:112px;font-size:14px}.app-story h3{font-size:26px}.app-demo{box-shadow:0 18px 48px color-mix(in srgb,var(--foreground) 7%,transparent)}.origin-selector{gap:4px;padding:4px;margin-top:30px}.origin-selector button{font-size:12px;padding:12px 8px;flex-direction:column;align-items:flex-start;gap:8px}.origin-selector button svg{display:none}.origin-experience{grid-template-columns:1fr;gap:30px;padding-block:30px;min-height:0}.origin-text h3{font-size:26px}.origin-machine{padding:20px}.origin-signoff{flex-wrap:wrap;gap:14px;font-size:13px}.closing{padding-top:64px}.machine-events>div{font-size:12px}.stage-footnote{font-size:10px}.section-heading>p{max-width:none}}
.finder-section{box-shadow:0 0 0 100vmax var(--muted);clip-path:inset(0 -100vmax)}
@media(max-width:760px){.mega-menu{height:calc(100dvh - 64px);max-height:none;overflow-y:auto;overscroll-behavior:contain}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- Hero: one sale, seven beats ---------- */
@property --beat { syntax: '<color>'; inherits: true; initial-value: #1a1a20; }
.xh { position: relative; overflow: hidden; background: var(--background); padding-block: 36px 64px; transition: --beat .8s ease; }
.xh-grid { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 56px; align-items: center; min-height: min(720px, calc(100dvh - 100px)); }
.xh-copy { display: flex; flex-direction: column; min-width: 0; }
.xh-copy h1 { font-size: 64px; line-height: 1; letter-spacing: -.04em; font-weight: 700; animation: xh-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.xh-em { background: var(--action); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xh-lede { margin-top: 22px; font-size: 17px; line-height: 1.55; color: var(--muted-foreground); max-width: 400px; animation: xh-rise .9s .1s both; }
.xh-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; flex-wrap: wrap; animation: xh-rise .9s .2s both; }
.xh-play { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: var(--foreground); font-size: 14px; font-weight: 500; cursor: pointer; }
.xh-play > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); color: var(--primary); }

.xh-narration { position: relative; margin-top: 36px; padding: 22px 24px 18px; border-radius: 16px; background: var(--muted); border: 1px solid var(--border); overflow: hidden; min-height: 236px; display: flex; flex-direction: column; animation: xh-rise .9s .3s both; }
.xh-narration::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--beat); }
.xh-meta { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .12em; color: var(--muted-foreground); }
.xh-narration-text { flex: 1; margin-top: 12px; animation: xh-text .55s cubic-bezier(.2,.7,.2,1) both; }
.xh-app { font-size: 13px; font-weight: 600; color: var(--beat); }
.xh-narration h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; margin-top: 4px; font-weight: 600; }
.xh-narration p { font-size: 14px; line-height: 1.6; color: var(--muted-foreground); margin-top: 8px; }
.xh-controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.xh-controls button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 13px; cursor: pointer; transition: border-color .2s, transform .2s; }
.xh-controls button:hover { border-color: var(--beat); transform: translateY(-1px); }

.xh-stage { position: relative; height: 600px; }
.xh-photo { position: absolute; left: 0; top: 10px; width: 340px; height: 450px; border-radius: 22px; overflow: hidden; background: var(--muted); box-shadow: 0 30px 80px -20px color-mix(in srgb, var(--foreground) 35%, transparent); animation: xh-photo-in 1.1s cubic-bezier(.2,.7,.2,1) both; }
.xh-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .9s ease, transform 6s ease-out; }
.xh-photo img.on { opacity: 1; transform: scale(1); }
.xh-photo-top { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: var(--foreground); }
.xh-photo-top > span { padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(8px); }

.xh-card { position: absolute; left: 230px; top: 300px; width: 300px; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 24px 60px -18px color-mix(in srgb, var(--foreground) 30%, transparent); animation: xh-card .7s cubic-bezier(.2,.8,.2,1) both; }
.xh-card::before { content: ''; position: absolute; left: 16px; right: 16px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--beat); }
.xh-card-head { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.xh-card-head strong { display: block; font-size: 14px; }
.xh-card-head span { font-size: 12px; color: var(--muted-foreground); }
.xh-card-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--beat) 12%, var(--card)); color: var(--beat); }
.xh-card-body { display: flex; flex-direction: column; gap: 9px; padding-top: 12px; font-size: 13px; }
.xh-card-body > * { animation: xh-text .5s both; }
.xh-card-body > *:nth-child(2) { animation-delay: .12s; } .xh-card-body > *:nth-child(3) { animation-delay: .24s; } .xh-card-body > *:nth-child(4) { animation-delay: .36s; }
.xh-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.xh-row.muted { color: var(--muted-foreground); font-size: 12px; }
.xh-row .ok { display: inline-flex; align-items: center; gap: 4px; color: var(--beat); font-weight: 600; }
.xh-row.total { border-top: 1px dashed var(--border); padding-top: 9px; }
.xh-row.total strong { font-size: 18px; color: var(--beat); }
.xh-pill { align-self: flex-start; font-size: 11px; padding: 4px 9px; border-radius: 999px; background: var(--muted); }
.xh-sync { display: flex; align-items: center; gap: 8px; font-size: 11px; font-family: var(--font-fragment); color: var(--muted-foreground); }
.xh-sync i { flex: 1; height: 2px; background: linear-gradient(90deg, var(--beat) 50%, transparent 50%) 0 0 / 12px 2px; animation: xh-dash .8s linear infinite; }
.xh-track { display: flex; gap: 6px; }
.xh-track span { flex: 1; font-size: 11px; padding-top: 7px; border-top: 3px solid var(--border); color: var(--muted-foreground); }
.xh-track span.on { border-color: var(--beat); color: var(--foreground); }
.xh-stars { display: flex; gap: 3px; color: var(--beat); }
.xh-stars svg { fill: currentColor; animation: xh-pop .4s both; }
.xh-quote { font-size: 15px; font-weight: 500; line-height: 1.4; }
.xh-points { display: flex; justify-content: space-between; align-items: baseline; }
.xh-points .font-mono { font-size: 11px; letter-spacing: .12em; color: var(--muted-foreground); }
.xh-points strong { font-size: 22px; color: var(--beat); }
.xh-points .was { color: var(--muted-foreground); font-weight: 400; font-size: 16px; }
.xh-meter { height: 6px; border-radius: 6px; background: var(--muted); overflow: hidden; }
.xh-meter i { display: block; height: 100%; width: 62%; background: var(--beat); border-radius: 6px; animation: xh-meter 1.2s .3s cubic-bezier(.2,.7,.2,1) both; }
.xh-flow { display: flex; flex-direction: column; gap: 6px; }
.xh-flow span { position: relative; padding: 8px 10px 8px 26px; border-radius: 9px; background: var(--muted); font-size: 12px; }
.xh-flow span::before { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; border-radius: 50%; translate: 0 -50%; background: var(--muted-foreground); }
.xh-flow span.on { background: color-mix(in srgb, var(--beat) 12%, var(--card)); color: var(--beat); font-weight: 600; }
.xh-flow span.on::before { background: var(--beat); box-shadow: 0 0 0 4px color-mix(in srgb, var(--beat) 22%, transparent); }

.xh-rail { position: absolute; right: 0; top: 18px; display: flex; flex-direction: column; gap: 6px; width: 170px; list-style: none; margin: 0; padding: 0; }
.xh-rail::before { content: ''; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: var(--border); }
.xh-rail li { position: relative; animation: xh-text .6s both; }
.xh-rail li:nth-child(n) { animation-delay: calc(.4s + var(--d, 0s)); }
.xh-rail button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px 6px 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--muted-foreground); overflow: hidden; border-radius: 10px; }
.xh-node { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--card); border: 1px solid var(--border); transition: background .4s, color .4s, border-color .4s, transform .4s; }
.xh-rail li.done .xh-node { color: var(--c); border-color: color-mix(in srgb, var(--c) 40%, var(--border)); }
.xh-rail li.on .xh-node { background: var(--c); color: var(--card); border-color: var(--c); transform: scale(1.08); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 16%, transparent); }
.xh-rail-label { display: flex; flex-direction: column; line-height: 1.25; }
.xh-rail-label strong { font-size: 13px; font-weight: 500; text-transform: capitalize; }
.xh-rail-label span { font-size: 11px; }
.xh-rail li.on .xh-rail-label strong { color: var(--foreground); font-weight: 600; }
.xh-rail button:hover .xh-rail-label strong { color: var(--foreground); }
.xh-timer { position: absolute; left: 52px; right: 8px; bottom: 2px; height: 2px; background: var(--c); transform-origin: left; animation: xh-timer linear both; }
.xh-foot { position: absolute; left: 0; bottom: 34px; display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .1em; color: var(--muted-foreground); }

@keyframes xh-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes xh-text { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
@keyframes xh-card { from { opacity: 0; transform: translate(-24px, 18px) scale(.94); filter: blur(6px); } }
@keyframes xh-photo-in { from { opacity: 0; transform: translateY(30px) rotate(-3deg); } }
@keyframes xh-dash { to { background-position: 12px 0; } }
@keyframes xh-pop { from { opacity: 0; transform: scale(.2) rotate(-30deg); } }
@keyframes xh-meter { from { width: 48%; } }
@keyframes xh-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Aftershock: scroll from chaos to connected ---------- */
.xa { position: relative; height: 320vh; background: var(--deep); color: var(--card); --p: 0; --k: clamp(0, calc((var(--p) - .5) * 4), 1); }
.xa-sticky { position: sticky; top: 64px; height: calc(100dvh - 64px); display: flex; align-items: center; overflow: hidden; }
.xa-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 56px; align-items: center; }
.xa .eyebrow { color: color-mix(in srgb, var(--card) 60%, transparent); }
.xa-swap { display: grid; margin-top: 14px; }
.xa-swap h2 { grid-area: 1 / 1; font-size: 44px; line-height: 1.05; letter-spacing: -.035em; transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1), filter .5s; }
.xa-swap em { font-style: normal; color: var(--accent); }
.xa-after em { text-decoration: line-through; text-decoration-thickness: 4px; text-decoration-color: var(--card); }
.xa-before em { background: none; color: var(--accent); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: transparent; transition: text-decoration-color .4s; }
.xa[data-connected='true'] .xa-before, .xa[data-connected='false'] .xa-after { opacity: 0; transform: translateY(-14px); filter: blur(6px); }
.xa[data-connected='false'] .xa-after { transform: translateY(14px); }
.xa-body { margin-top: 20px; font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--card) 70%, transparent); min-height: 104px; }
.xa-counter { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ink-line); font-size: 14px; color: color-mix(in srgb, var(--card) 70%, transparent); }
.xa-count { font-size: 56px; line-height: 1; color: var(--card); min-width: 44px; transition: color .4s; }
.xa[data-connected='true'] .xa-count { color: var(--accent); }

.xa-stage { position: relative; width: 100%; aspect-ratio: 1 / .82; }
.xa-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xa-lines line { stroke: var(--c); stroke-width: .35; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); opacity: calc(var(--k) * .8); }
.xa-hub { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 4px; background: var(--action); color: var(--card); transform: scale(var(--k)); box-shadow: 0 0 0 calc(var(--k) * 14px) color-mix(in srgb, var(--accent) 16%, transparent), 0 0 0 calc(var(--k) * 34px) color-mix(in srgb, var(--accent) 7%, transparent); }
.xa-hub svg { width: 40px; height: 40px; }
.xa-hub span { font-size: 9px; letter-spacing: .18em; }
.xa-piece { --in: clamp(0, calc((var(--p) - var(--i) * .065) * 12), 1); position: absolute; left: calc(var(--x) + var(--sx) * (1 - var(--k))); top: calc(var(--y) + var(--sy) * (1 - var(--k))); width: 31%; display: grid; border-radius: 14px; opacity: var(--in); transform: translate(-50%, -50%) rotate(calc(var(--sr) * (1 - var(--k)))) scale(calc(.75 + .25 * var(--in))); will-change: left, top, transform; z-index: calc(10 - var(--i)); }
.xa-pain, .xa-fix { grid-area: 1 / 1; padding: 16px 18px; border-radius: 14px; }
.xa-pain { background: var(--card); color: var(--foreground); opacity: calc(1 - var(--k)); box-shadow: 0 18px 40px -10px rgb(0 0 0 / .55); }
.xa-pain span { font-size: 10px; letter-spacing: .14em; color: var(--accent); }
.xa-pain p, .xa-fix p { margin-top: 6px; font-size: 15px; line-height: 1.35; font-weight: 500; }
.xa-fix p { color: var(--card); }
.xa-fix { background: color-mix(in srgb, var(--c) 14%, var(--deep)); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); opacity: var(--k); }
.xa-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--c) 55%, var(--card)); }
.xa-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink-line); }
.xa-progress i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--action); }

/* ---------- Origin: two halves of one bolt ---------- */
.xo { position: relative; height: 260vh; background: var(--muted); --p: 0; --a: clamp(0, calc(var(--p) * 3.2), 1); --b: clamp(0, calc((var(--p) - .28) * 2.6), 1); --j: clamp(0, calc((var(--p) - .62) * 4), 1); }
.xo-sticky { position: sticky; top: 64px; height: calc(100dvh - 64px); display: flex; align-items: center; overflow: hidden; }
.xo-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.xo-head h2 { margin-top: 12px; font-size: 40px; line-height: 1.1; letter-spacing: -.03em; }
.xo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); grid-template-areas: 'left center right'; gap: 28px; align-items: center; }
.xo-side { padding: 28px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); opacity: calc(.15 + .85 * var(--a)); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--foreground) 25%, transparent); }
.xo-left { grid-area: left; --tone: var(--primary); transform: translateX(calc((1 - var(--a)) * -55%)) rotate(calc((1 - var(--a)) * -4deg)); }
.xo-right { grid-area: right; --tone: var(--accent); transform: translateX(calc((1 - var(--a)) * 55%)) rotate(calc((1 - var(--a)) * 4deg)); }
.xo-side-head { display: flex; align-items: center; gap: 12px; }
.xo-side-head strong { display: block; font-size: 16px; }
.xo-side-head .font-mono { font-size: 10px; letter-spacing: .14em; color: var(--tone); }
.xo-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--tone) 10%, var(--card)); color: var(--tone); }
.xo-side h3 { margin-top: 20px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.xo-side p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--muted-foreground); }
.xo-side ul { margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.xo-side li { position: relative; padding-left: 18px; font-size: 13px; }
.xo-side li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 2px; background: var(--tone); }
.xo-center { grid-area: center; display: flex; flex-direction: column; align-items: center; text-align: center; }
.xo-bolt { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.xo-bolt svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.xo-top, .xo-bottom { transform-box: fill-box; transform-origin: center; }
.xo-top { fill: var(--primary); transform: translate(calc((1 - var(--b)) * -34px), calc((1 - var(--b)) * -6px)) rotate(calc((1 - var(--b)) * -28deg)); }
.xo-bottom { fill: var(--accent); transform: translate(calc((1 - var(--b)) * 34px), calc((1 - var(--b)) * 6px)) rotate(calc((1 - var(--b)) * 28deg)); }
.xo-flash { position: absolute; inset: 10%; border-radius: 50%; border: 1px solid var(--accent); opacity: calc(var(--j) * (1 - var(--j)) * 4); transform: scale(calc(.6 + var(--j) * .8)); }
.xo-labels { display: flex; justify-content: space-between; width: 100%; font-size: 10px; letter-spacing: .16em; color: var(--muted-foreground); opacity: calc(1 - var(--j)); margin-top: -8px; }
.xo-join { margin-top: 6px; opacity: var(--j); transform: translateY(calc((1 - var(--j)) * 16px)); }
.xo-join strong { font-size: 22px; letter-spacing: -.03em; background: var(--action); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xo-join p { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--muted-foreground); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .xh-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .xh-copy { max-width: 620px; }
  .xh-stage { width: 640px; max-width: 100%; margin-inline: auto; }
  .xa-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
  .xa-swap h2 { font-size: 36px; }
  .xo-layout { grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); gap: 18px; }
  .xo-side { padding: 22px; }
  .xo-bolt { width: 140px; height: 140px; }
}
@media (max-width: 760px) {
  .xh { padding-block: 24px 48px; }
  .xh-copy h1 { font-size: 46px; }
  .xh-narration { min-height: 0; margin-top: 28px; }
  .xh-stage { height: auto; display: flex; flex-direction: column; }
  .xh-photo { position: relative; top: 0; width: 100%; height: 400px; }
  .xh-card { position: relative; left: auto; top: auto; width: auto; margin: -110px 14px 0; }
  .xh-rail { position: relative; top: auto; right: auto; width: auto; flex-direction: row; overflow-x: auto; margin-top: 18px; padding-bottom: 6px; scrollbar-width: none; }
  .xh-rail::before { display: none; }
  .xh-rail button { flex-direction: column; gap: 6px; padding: 4px; width: 76px; text-align: center; align-items: center; }
  .xh-rail-label span { display: none; }
  .xh-rail-label strong { font-size: 11px; }
  .xh-timer { left: 10px; right: 10px; }
  .xh-foot { position: static; margin-top: 12px; }

  .xa { height: 300vh; }
  .xa-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .xa-swap h2 { font-size: 30px; }
  .xa-body { display: none; }
  .xa-counter { margin-top: 14px; padding-top: 12px; }
  .xa-count { font-size: 36px; }
  .xa-stage { aspect-ratio: 1 / 1.12; }
  .xa-piece { width: 44%; left: calc(var(--x) * .76 + 12% + var(--sx) * (1 - var(--k))); }
  .xa-pain, .xa-fix { padding: 10px 12px; }
  .xa-pain p, .xa-fix p { font-size: 12px; }
  .xa-tag { font-size: 10px; }
  .xa-hub { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
  .xa-hub svg { width: 28px; height: 28px; }
  .xa-hub span { display: none; }
}
@media (max-width: 900px) {
  .xo { height: auto; --a: 1; --b: 1; --j: 1; }
  .xo-sticky { position: relative; top: 0; height: auto; padding-block: 72px; }
  .xo-head h2 { font-size: 30px; }
  .xo-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'left' 'center' 'right'; }
  .xo-center { padding-block: 8px; }
  .xo-labels { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xa, .xo { height: auto; --p: 1 !important; }
  .xa-sticky, .xo-sticky { position: relative; top: 0; height: auto; padding-block: 80px; }
  .xh-photo img { transition: opacity .2s; transform: none; }
  .xh *, .xh-card, .xh-narration-text { animation-duration: .01ms !important; }
}

/* ---------- Phone safe areas ---------- */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(100px + env(safe-area-inset-top,0px))}
body{background:#FFFFFF}
.site-header{top:env(safe-area-inset-top,0px)}
.xa-sticky,.xo-sticky{top:calc(64px + env(safe-area-inset-top,0px))}
@media(prefers-reduced-motion:reduce){.xa-sticky,.xo-sticky{top:0}}

/* ==========================================================
   FIXES + REQUESTED CHANGES (Oct 4)
   ========================================================== */

/* ---- Hero rail: active ring was clipped by the button's overflow,
   so a stray half-ring showed up beside the icon. ---- */
.xh-rail::before { left: 27px; }
.xh-rail button { overflow: visible; padding: 6px 8px; }
.xh-rail li.on .xh-node { transform: scale(1.06); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 16%, transparent); }
.xh-timer { left: 60px; right: 8px; bottom: 0; border-radius: 2px; }
@media (max-width: 760px) {
  .xh-rail { padding: 8px 6px 10px; }
  .xh-rail button { padding: 4px; }
  .xh-timer { left: 10px; right: 10px; }
}

/* ---- Platform strip: real partner logos ---- */
.platform-logos { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex: 1; }
.platform-logos img { display: block; width: auto; height: var(--h, 30px); max-width: none; }
.platform-logos .lg-shopify { --h: 34px; }
.platform-logos .lg-loop { --h: 28px; }
.platform-logos .lg-powerreviews { --h: 40px; }
.platform-logos .lg-salesforce { --h: 50px; }
.platform-logos .lg-klaviyo { --h: 31px; }
@media (max-width: 1100px) { .platform-logos { flex-wrap: wrap; justify-content: flex-start; row-gap: 22px; } }
@media (max-width: 760px) {
  .platform-logos { justify-content: center; gap: 22px 30px; }
  .platform-logos .lg-shopify { --h: 26px; } .platform-logos .lg-loop { --h: 22px; }
  .platform-logos .lg-powerreviews { --h: 31px; } .platform-logos .lg-salesforce { --h: 40px; } .platform-logos .lg-klaviyo { --h: 20px; }
}

/* ---- Aftershock: bigger cards in both states, same motion ---- */
.xa-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 48px; }
.xa-stage { aspect-ratio: 1 / .8; }
.xa-piece { width: 37%; transform: translate(-50%, -50%) rotate(calc(var(--sr) * (1 - var(--k)))) scale(calc(.86 + .14 * var(--in))); }
.xa-pain, .xa-fix { padding: 20px 22px; border-radius: 16px; }
.xa-pain span { font-size: 11px; }
.xa-pain p { color: var(--foreground); }
.xa-pain p, .xa-fix p { font-size: 18px; line-height: 1.3; margin-top: 8px; }
.xa-tag { font-size: 13px; }
@media (max-width: 1100px) {
  .xa-grid { grid-template-columns: 290px minmax(0, 1fr); gap: 28px; }
  .xa-pain p, .xa-fix p { font-size: 16px; }
}
@media (max-width: 760px) {
  .xa-grid { grid-template-columns: minmax(0, 1fr); }
  .xa-stage { aspect-ratio: 1 / 1.25; }
  .xa-piece { width: 46%; left: calc(var(--x) * .74 + 13% + var(--sx) * (1 - var(--k))); }
  .xa-pain, .xa-fix { padding: 12px 13px; border-radius: 12px; }
  .xa-pain p, .xa-fix p { font-size: 13.5px; }
  .xa-tag { font-size: 11px; }
}

/* ---- Design review switch (remove before launch) ---- */
.review-switch { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--card); border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--foreground) 25%, transparent); }
.review-switch > span { font-size: 12px; color: var(--muted-foreground); padding: 0 8px 0 6px; }
.review-switch button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; font-size: 13px; color: var(--muted-foreground); cursor: pointer; }
.review-switch button[aria-checked="true"] { background: var(--foreground); color: var(--card); }
.review-switch-row { display: flex; justify-content: center; margin-bottom: 22px; }
@media (max-width: 760px) { .review-switch { flex-wrap: wrap; justify-content: center; } .review-switch > span { width: 100%; text-align: center; padding: 4px 0; } }

/* ==========================================================
   ECOSYSTEM: live product demos (ported from lightning-commerce-light)
   ========================================================== */
.eco-panel { padding-top: 40px; }
.eco-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: end; animation: rise-in .5s both; }
.eco-story .pain-line { margin-bottom: 12px; }
.eco-story h3 { font-size: 34px; line-height: 1.12; letter-spacing: -.03em; font-weight: 600; }
.eco-story-r > p { font-size: 15px; }
.eco-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0; }
.eco-checks span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--foreground); }
.eco-checks svg { color: var(--app); }
.eco-try { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 13px; color: var(--foreground); }
.eco-try > svg { color: var(--app); flex-shrink: 0; }
.eco-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* window chrome */
.app-window { --ink: #141419; --raise: #1D1D25; --raise2: #24242E; --line: #2E2E39; --t: #F7F7FA; --t-mut: rgba(247,247,250,.74); --t-dim: rgba(247,247,250,.5);
  --ok: #3DD6B5; --warn: #F2B14C; --bad: #F07A7E; --hue: color-mix(in srgb, var(--app) 52%, #fff);
  margin-top: 18px; background: var(--ink); color: var(--t); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 90px -40px rgb(20 20 25 / .65), 0 2px 4px rgb(20 20 25 / .08); }
.app-window *, .app-window *::before, .app-window *::after { border-color: var(--line); }
.app-window p { color: inherit; }
.app-window h4 { font-weight: 600; }
.aw-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.aw-url { font-family: var(--font-mono); font-size: 12px; background: var(--raise); color: var(--t-mut); padding: 6px 12px; border-radius: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-tag { margin-left: auto; font-size: 12px; color: var(--t-dim); white-space: nowrap; }
.aw-reset { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: none; color: var(--t-mut); padding: 6px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; }
.aw-reset:hover { color: var(--t); border-color: var(--t-dim); }
.aw-body { display: grid; grid-template-columns: 184px minmax(0, 1fr); min-height: 560px; }
.aw-side { border-right: 1px solid var(--line); padding: 20px 12px; display: flex; flex-direction: column; gap: 3px; }
.aw-lock { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; line-height: 1.1; letter-spacing: -.03em; margin: 0 8px 18px; }
.aw-lock svg { color: var(--hue); flex-shrink: 0; }
.aw-lock span { display: block; font-weight: 400; color: var(--t-dim); }
.aw-nav { text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; color: var(--t-mut); cursor: pointer; display: flex; align-items: center; gap: 9px; }
.aw-nav:hover { color: var(--t); background: color-mix(in srgb, var(--raise) 60%, transparent); }
.aw-nav[aria-current="page"] { background: var(--raise2); color: var(--t); }
.aw-nav[aria-current="page"] svg { color: var(--hue); }
.aw-main { padding: 26px 30px 30px; min-width: 0; }
.aw-pane { animation: xh-text .45s both; }
.aw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.aw-h { font-size: 21px; letter-spacing: -.02em; line-height: 1.2; }
.aw-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--t-dim); margin-top: 6px; }
.aw-label { display: block; font-size: 12px; color: var(--t-dim); margin: 0 0 10px; }
.aw-pills { display: inline-flex; gap: 4px; padding: 3px; border-radius: 11px; background: var(--raise); }
.aw-pill { border: 0; background: none; color: var(--t-mut); font-size: 12.5px; padding: 6px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.aw-pill[aria-pressed="true"] { background: var(--t); color: var(--ink); font-weight: 600; }
.aw-pill small { font-size: 10px; opacity: .7; }
.aw-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--t); color: var(--ink); font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 10px; cursor: pointer; transition: transform .15s, opacity .2s; }
.aw-btn:hover:not(:disabled) { transform: translateY(-1px); }
.aw-btn:disabled { opacity: .38; cursor: not-allowed; }
.aw-btn.ghost { background: transparent; color: var(--t); border: 1px solid var(--line); }
.aw-btn.hue { background: var(--hue); }
.aw-select { background: var(--raise); color: var(--t); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; max-width: 100%; }
.aw-hint { font-family: var(--font-mono); font-size: 11.5px; color: var(--t-dim); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; background: var(--raise2); color: var(--t-mut); }
.chip.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.chip.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.chip.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.chip.hue { background: color-mix(in srgb, var(--hue) 16%, transparent); color: var(--hue); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.aw-table-wrap { overflow-x: auto; }
.aw-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.aw-table th { font-weight: 500; color: var(--t-dim); font-size: 11.5px; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.aw-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.aw-table td.r, .aw-table th.r { text-align: right; }
.aw-table tbody tr { animation: xh-text .4s both; }
.aw-log { background: #0D0D11; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; height: 150px; overflow: auto; color: var(--t-mut); }
.aw-log > div { padding: 3px 0; animation: xh-text .35s both; }
.aw-log .lt { color: var(--t-dim); margin-right: 10px; }
.aw-log .ok { color: var(--ok); } .aw-log .warn { color: var(--warn); } .aw-log .bad { color: var(--bad); } .aw-log .hue { color: var(--hue); }
.aw-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.aw-kpi { background: var(--raise); border-radius: 14px; padding: 14px 16px; }
.aw-kpi > span { display: block; font-size: 12px; color: var(--t-dim); }
.aw-kpi > strong { display: block; font-family: var(--font-mono); font-size: 24px; font-weight: 400; margin-top: 6px; letter-spacing: -.02em; }
.aw-kpi > em { display: block; font-size: 12px; margin-top: 4px; color: var(--t-dim); }
.aw-kpi > em.up { color: var(--ok); } .aw-kpi > em.down { color: var(--warn); }
.aw-prog { height: 4px; border-radius: 4px; background: var(--raise2); overflow: hidden; }
.aw-prog i { display: block; height: 100%; width: 0; background: var(--hue); transition: width .5s ease; }
.aw-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aw-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.aw-card { background: var(--raise); border-radius: 16px; padding: 18px; min-width: 0; }
.aw-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--t-mut); margin-bottom: 14px; }
.aw-card-h strong { color: var(--t); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.aw-card-h img { height: 18px; width: auto; }
.aw-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t-mut); cursor: pointer; user-select: none; }
.aw-toggle input { appearance: none; width: 34px; height: 20px; border-radius: 20px; background: var(--raise2); border: 1px solid var(--line); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
.aw-toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--t-mut); transition: transform .2s, background .2s; }
.aw-toggle input:checked { background: var(--hue); border-color: var(--hue); }
.aw-toggle input:checked::after { transform: translateX(14px); background: var(--ink); }

/* --- connector --- */
.cn-ov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.cn-kicker { display: block; font-size: 12px; color: var(--t-dim); margin-bottom: 6px; }
.cn-lead { font-size: 15px; color: var(--t-mut); margin-bottom: 14px; }
.cn-lead b { color: var(--t); font-weight: 600; font-family: var(--font-mono); }
.cn-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; margin-bottom: 10px; background: var(--raise); }
.cn-bar i { display: block; flex-basis: 0; transition: flex-grow 1s cubic-bezier(.2,.7,.2,1); }
.cn-legend { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 16px; font-size: 12px; color: var(--t-mut); margin: 0 0 22px; }
.cn-legend > div { display: flex; justify-content: space-between; gap: 8px; }
.cn-legend dt { display: flex; align-items: center; gap: 7px; }
.cn-legend dt i { width: 10px; height: 4px; border-radius: 2px; }
.cn-legend dd { margin: 0; font-family: var(--font-mono); color: var(--t); }
.cn-chart { width: 100%; height: 140px; display: block; overflow: visible; }
.cn-chart .gl line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cn-chart .ln { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; transition: d .8s ease; }
.cn-chart .ln-rev { stroke: var(--hue); stroke-dashoffset: 0; transition: d .8s ease, stroke-dashoffset 1.2s ease; }
.cn-chart .ln-units { stroke: rgba(247,247,250,.35); stroke-dasharray: 4 4; }
.cn-chart .ar { fill: color-mix(in srgb, var(--hue) 14%, transparent); transition: d .8s ease, opacity .8s; }
.cn-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--t-dim); margin-top: 8px; }
.cn-top { margin-top: 26px; }
.cn-top li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) 50px 90px; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 10px; transition: background .5s; }
.cn-top li.hit { background: color-mix(in srgb, var(--hue) 12%, transparent); }
.cn-top .nm { font-size: 13.5px; min-width: 0; }
.cn-top .nm em { display: block; font-size: 11.5px; color: var(--t-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-top .tr { height: 6px; border-radius: 6px; background: var(--raise2); overflow: hidden; }
.cn-top .tr i { display: block; height: 100%; background: var(--hue); border-radius: 6px; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.cn-top .od, .cn-top .rv { font-family: var(--font-mono); font-size: 12.5px; text-align: right; }
.cn-gov { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cn-cells { display: flex; gap: 3px; }
.cn-cells i { width: 14px; height: 22px; border-radius: 4px; background: var(--raise2); transition: background .3s; }
.cn-cells i.on { background: var(--hue); }
.cn-cells i.burst { background: var(--warn); }
.cn-ord tr.rc { cursor: pointer; }
.cn-ord tr.rc:hover td { background: color-mix(in srgb, var(--raise) 70%, transparent); }
.cn-ord .chev { width: 24px; color: var(--t-dim); transition: transform .2s; }
.cn-ord tr.open .chev svg { transform: rotate(90deg); }
.cn-ord .chev svg { transition: transform .2s; }
.cn-ord .oid { font-family: var(--font-mono); }
.cn-ord .och { font-size: 11.5px; color: var(--t-dim); margin-top: 2px; }
.cn-ord .raw { font-family: var(--font-mono); font-size: 11px; color: var(--t-dim); margin-right: 8px; }
.cn-det td { padding: 0 !important; background: color-mix(in srgb, var(--raise) 55%, transparent); }
.cn-det[hidden] { display: none !important; }
.cn-det-in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; padding: 18px 20px 20px 44px; animation: xh-text .35s both; }
.cn-tl li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 5px 0; color: var(--t-dim); }
.cn-tl li svg { color: var(--t-dim); opacity: .5; }
.cn-tl li.hit { color: var(--t); }
.cn-tl li.hit svg { color: var(--ok); opacity: 1; }
.cn-tl li span { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--t-dim); }
.cn-kv { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; padding: 6px 0; color: var(--t-dim); }
.cn-kv b { color: var(--t); font-weight: 500; text-align: right; }

/* --- dash --- */
.ds-chart-card { position: relative; background: var(--raise); border-radius: 16px; padding: 16px 16px 10px; margin: 16px 0; }
.ds-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--t-mut); margin-bottom: 10px; }
.ds-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ds-legend i { width: 14px; height: 3px; border-radius: 2px; }
.ds-chart { width: 100%; height: 190px; display: block; cursor: crosshair; }
.ds-chart path { transition: d .7s ease; }
.ds-tip { position: absolute; pointer-events: none; background: #0D0D11; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; white-space: nowrap; }
.ds-tip .p { color: var(--hue); } .ds-tip .q { color: var(--warn); }
.ds-wf { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 18px; }
.ds-wf-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 110px; align-items: center; gap: 16px; font-size: 13.5px; }
.ds-wf-row .bar { position: relative; height: 26px; border-radius: 7px; background: var(--raise); overflow: hidden; }
.ds-wf-row .bar i { position: absolute; top: 0; bottom: 0; left: var(--l, 0%); width: 0; border-radius: 7px; transition: width .7s cubic-bezier(.2,.7,.2,1), left .7s cubic-bezier(.2,.7,.2,1); }
.ds-wf-row.gross .bar i { background: rgba(247,247,250,.55); }
.ds-wf-row.ded .bar i { background: var(--warn); }
.ds-wf-row.net .bar i { background: var(--hue); }
.ds-wf-row .v { font-family: var(--font-mono); text-align: right; }
.ds-wf-row.net { font-weight: 600; }
.ds-callout { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--t-mut); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; }
.ds-callout b { color: var(--warn); font-family: var(--font-mono); }

/* --- reviews --- */
.rv-conf { width: 90px; height: 6px; border-radius: 6px; background: var(--raise2); overflow: hidden; }
.rv-conf i { display: block; height: 100%; background: var(--ok); border-radius: 6px; transition: width .5s, background .3s; }
.rv-conf i.low { background: var(--warn); }
.rv-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }

/* --- returns / loyalty / crm: buyer phone + system card --- */
.ph { background: #0B0B0E; border: 1px solid var(--line); border-radius: 26px; padding: 14px; min-width: 0; }
.ph-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--t-dim); margin-bottom: 12px; padding: 0 4px; }
.ph-top img { height: 18px; width: auto; }
.ph-item { display: flex; gap: 12px; align-items: center; background: var(--raise); border-radius: 14px; padding: 10px; }
.ph-item img { width: 46px; height: 56px; object-fit: cover; border-radius: 8px; }
.ph-item strong { display: block; font-size: 13.5px; }
.ph-item span { font-size: 12px; color: var(--t-dim); }
.ph-item .pr { margin-left: auto; font-family: var(--font-mono); font-size: 13px; }
.ph-body { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ph-status { background: var(--raise); border-radius: 14px; padding: 12px 14px; font-size: 13px; animation: xh-text .4s both; }
.ph-status strong { display: block; font-size: 14px; margin-bottom: 2px; }
.ph-status span { color: var(--t-dim); font-size: 12.5px; }
.ph-status.ok strong { color: var(--ok); } .ph-status.bad strong { color: var(--bad); } .ph-status.hue strong { color: var(--hue); }
.ph-btn { width: 100%; justify-content: center; }
.sys-rows { display: flex; flex-direction: column; gap: 8px; }
.sys-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; background: var(--raise2); border-radius: 10px; padding: 10px 12px; animation: xh-text .4s both; }
.sys-row .k { color: var(--t-dim); }
.sys-empty { font-size: 13px; color: var(--t-dim); padding: 18px 4px; }
.ly-meter { height: 8px; border-radius: 8px; background: var(--raise2); overflow: hidden; margin-top: 10px; }
.ly-meter i { display: block; height: 100%; width: 0; background: var(--hue); border-radius: 8px; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.ly-bal { display: flex; align-items: baseline; gap: 10px; }
.ly-bal strong { font-family: var(--font-mono); font-size: 30px; font-weight: 400; letter-spacing: -.02em; }
.ly-bal span { font-size: 12px; color: var(--t-dim); }
.ly-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ly-actions .aw-btn { justify-content: center; padding: 10px 8px; font-size: 12.5px; }
.crm-flow { display: flex; flex-direction: column; gap: 8px; }
.crm-step { display: flex; align-items: center; gap: 12px; background: var(--raise2); border-radius: 12px; padding: 11px 13px; font-size: 13px; transition: background .3s, color .3s; color: var(--t-mut); }
.crm-step svg { flex-shrink: 0; color: var(--t-dim); }
.crm-step.run { background: color-mix(in srgb, var(--hue) 16%, var(--raise2)); color: var(--t); }
.crm-step.run svg { color: var(--hue); }
.crm-step.done { color: var(--t); } .crm-step.done svg { color: var(--ok); }
.crm-step.stop { color: var(--t); } .crm-step.stop svg { color: var(--bad); }
.crm-step select { margin-left: auto; padding: 5px 8px; font-size: 12px; }
.crm-mail { background: #FBF8FA; color: #1A1A20; border-radius: 14px; overflow: hidden; }
.crm-mail-h { padding: 10px 14px; border-bottom: 1px solid #ECE6EE; font-size: 12px; color: #5B5B66; }
.crm-mail-h b { color: #1A1A20; font-weight: 600; }
.crm-mail-b { padding: 16px 14px; display: flex; gap: 14px; align-items: center; }
.crm-mail-b img { width: 64px; height: 78px; object-fit: cover; border-radius: 10px; }
.crm-mail-b strong { display: block; font-size: 16px; letter-spacing: -.02em; line-height: 1.25; }
.crm-mail-b p { color: #5B5B66; font-size: 12.5px; margin-top: 6px; }
.crm-mail-b .cta { display: inline-block; margin-top: 10px; background: #1A1A20; color: #fff; font-size: 12px; padding: 7px 12px; border-radius: 8px; }
.crm-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--hue); background: color-mix(in srgb, var(--hue) 12%, transparent); padding: 6px 10px; border-radius: 8px; }

@media (max-width: 1100px) {
  .eco-story { grid-template-columns: minmax(0,1fr); gap: 18px; align-items: start; }
  .aw-body { grid-template-columns: 150px minmax(0,1fr); }
  .cn-ov, .aw-split { grid-template-columns: minmax(0,1fr); }
  .ds-wf-row { grid-template-columns: 150px minmax(0,1fr) 96px; }
}
@media (max-width: 760px) {
  .eco-panel { padding-top: 28px; }
  .eco-story h3 { font-size: 26px; }
  .app-window { border-radius: 16px; margin-inline: -8px; }
  .aw-tag { display: none; }
  .aw-body { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .aw-side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; gap: 4px; }
  .aw-lock { display: none; }
  .aw-nav { white-space: nowrap; }
  .aw-main { padding: 18px 16px 20px; }
  .aw-kpis, .rv-res { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .cn-top li { grid-template-columns: minmax(0,1fr) 44px 80px; }
  .cn-top .tr { display: none; }
  .cn-det-in { grid-template-columns: minmax(0,1fr); padding: 14px; }
  .ds-wf-row { grid-template-columns: minmax(0,1fr) 92px; gap: 6px 12px; }
  .ds-wf-row .bar { grid-column: 1 / -1; grid-row: 2; }
  .ly-actions { grid-template-columns: minmax(0,1fr); }
}

/* ==========================================================
   ORIGIN: three treatments for the two sides (bolt animation unchanged)
   ========================================================== */
.xo .review-switch-row { margin-bottom: 18px; }
.xo-side { transition: none; }

/* ---------- C: Devices (code editor + LIVE phone) ---------- */
.xo[data-variant="devices"] .xo-side { background: none; border: 0; box-shadow: none; padding: 0; }
.dv-editor { background: #141419; color: #E9E7EE; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -30px rgb(20 20 25 / .6); }
.dv-bar { display: flex; justify-content: space-between; padding: 10px 14px; font-family: var(--font-mono); font-size: 11px; color: rgb(233 231 238 / .55); background: #1D1D25; }
.dv-code { margin: 0; padding: 14px 16px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; white-space: pre-wrap; }
.dv-code > span { display: block; opacity: clamp(0, calc(var(--a) * 7 - var(--n)), 1); transform: translateX(calc((1 - clamp(0, calc(var(--a) * 7 - var(--n)), 1)) * -8px)); }
.dv-code .c { color: #8C8A99; } .dv-code .k { color: #E58BC4; } .dv-code .s { color: #9FD8C8; }
.dv-text { margin-top: 14px; }
.xo[data-variant="devices"] .xo-head { margin-bottom: 26px; }
.dv-text .who { display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: 15px; }
.dv-text .who small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--tone); font-weight: 400; }
.dv-text h3 { margin-top: 8px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.dv-text p { margin-top: 8px; font-size: 14px; line-height: 1.6; }
.dv-phone { position: relative; width: min(100%, 230px); aspect-ratio: 9 / 13.5; margin-left: auto; border-radius: 30px; border: 7px solid #141419; overflow: hidden; background: #2a1520 center / cover no-repeat; box-shadow: 0 30px 60px -30px rgb(20 20 25 / .6); }
.dv-phone::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgb(0 0 0 / .62)); }
.dv-live { position: absolute; z-index: 1; top: 12px; left: 12px; display: flex; gap: 6px; align-items: center; font-family: var(--font-mono); font-size: 10.5px; color: #fff; }
.dv-live b { background: #FE2C55; padding: 3px 7px; border-radius: 5px; font-weight: 400; letter-spacing: .1em; }
.dv-comments { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 64px; display: flex; flex-direction: column; gap: 6px; }
.dv-comments div { align-self: flex-start; max-width: 92%; font-size: 11.5px; line-height: 1.35; color: #fff; background: rgb(0 0 0 / .42); backdrop-filter: blur(6px); padding: 6px 9px; border-radius: 12px; opacity: clamp(0, calc(var(--a) * 6 - var(--n)), 1); transform: translateY(calc((1 - clamp(0, calc(var(--a) * 6 - var(--n)), 1)) * 12px)); }
.dv-comments div b { display: block; font-size: 10px; opacity: .7; font-weight: 500; }
.dv-shop { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; align-items: center; background: #fff; color: #141419; border-radius: 10px; padding: 8px 10px; font-size: 12px; font-weight: 600; }
.dv-shop span { white-space: nowrap; font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: #FE2C55; }
.xo-right .dv-text { text-align: right; }
.xo-right .dv-text .who { justify-content: flex-end; }

@media (max-width: 900px) {
  .dv-phone { margin-inline: auto; }
  .xo-right .dv-text { text-align: left; } .xo-right .dv-text .who { justify-content: flex-start; }
}

/* ==========================================================
   FINDER: three replacements for the accordion
   ========================================================== */
#finder.finder-v { display: block; }
.fv { animation: rise-in .5s both; }
.fv h2 { font-size: 44px; line-height: 1.04; letter-spacing: -.035em; }
.fv h2 em { color: var(--primary); }
.fv-lede { margin-top: 16px; font-size: 16px; max-width: 420px; }
.fv-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.fv-ghost { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); padding: 11px 16px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.fv-ghost:hover { border-color: var(--foreground); }

/* ---- F2: Build your stack ---- */
.fv-stack { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 44px; align-items: center; }
.fs-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.fs-tool { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--card); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; position: relative; }
.fs-tool img { height: var(--h); width: auto; filter: grayscale(1); opacity: .55; transition: filter .25s, opacity .25s; }
.fs-tool:hover img { opacity: .85; }
.fs-tool[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent); }
.fs-tool[aria-pressed="true"] img { filter: none; opacity: 1; }
.fs-tool .tick { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; transform: scale(0); transition: transform .25s cubic-bezier(.2,.8,.2,1.4); }
.fs-tool[aria-pressed="true"] .tick { transform: scale(1); }
.fs-summary { margin-top: 26px; min-height: 120px; }
.fs-summary h3 { font-size: 20px; letter-spacing: -.02em; font-weight: 600; }
.fs-summary p { font-size: 14px; margin-top: 6px; }
.fs-apps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fs-apps span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--card)); padding: 6px 11px; border-radius: 9px; animation: xh-text .4s both; }
.fs-diagram { position: relative; aspect-ratio: 1.25 / 1; border-radius: 28px; background: var(--card); border: 1px solid var(--border); overflow: hidden; }
.fs-diagram svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-diagram svg.lines path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; transition: stroke .3s, opacity .3s; }
.fs-diagram svg.lines path.off { stroke: var(--border); stroke-dasharray: 3 5; }
.fs-diagram svg.lines path.on { stroke: var(--c); stroke-dasharray: 8 6; animation: fs-flow 1s linear infinite; }
@keyframes fs-flow { to { stroke-dashoffset: -14; } }
.fs-node { position: absolute; translate: -50% -50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--foreground) 35%, transparent); transition: opacity .3s, transform .3s, border-color .3s; }
.fs-node.tt { width: 74px; height: 74px; border-radius: 20px; }
.fs-node.tt img { height: 38px; width: auto; }
.fs-node.hub { width: 84px; height: 84px; border-radius: 50%; background: var(--action); color: #fff; border: 0; }
.fs-node.hub svg { width: 38px; height: 38px; }
.fs-node.tool { width: 128px; height: 50px; opacity: .45; }
.fs-node.tool img { height: calc(var(--h) * .8); width: auto; filter: grayscale(1); }
.fs-node.tool.on { opacity: 1; border-color: var(--c); }
.fs-node.tool.on img { filter: none; }
.fs-pill { position: absolute; translate: -50% -50%; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--c); background: var(--card); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--border)); padding: 4px 9px; border-radius: 8px; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; }
.fs-pill.on { opacity: 1; transform: scale(1); }
.fs-cap { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12px; color: var(--muted-foreground); }

@media (max-width: 1100px) { .fv-stack { grid-template-columns: minmax(0,1fr); gap: 28px; } }
@media (max-width: 760px) {
  .fv h2 { font-size: 34px; }
  .fs-node.tool { width: 76px; height: 38px; left: 82% !important; } .fs-node.tt { width: 56px; height: 56px; } .fs-node.tt img { height: 28px; } .fs-node.hub { width: 62px; height: 62px; } .fs-node.hub svg { width: 28px; height: 28px; }
  .fs-pill { font-size: 10px; padding: 3px 6px; }
  .fs-diagram { aspect-ratio: 1 / 1.1; } .fs-cap { display: none; }
}

.xo-side .dv-code { margin: 0; }

/* Origin: sides slide in on entry, bolt joins while pinned (vars set by JS) */
.xo { height: 230vh; --a: 0; --b: 0; --j: 0; }
.xo-center { position: relative; }
.xo-center::before, .xo-center::after { content: ''; position: absolute; top: 95px; height: 2px; width: calc(50% - 30px); z-index: 0; transform: scaleX(var(--b)); }
.xo-center::before { left: -28px; transform-origin: left; background: linear-gradient(90deg, transparent, var(--primary)); }
.xo-center::after { right: -28px; transform-origin: right; background: linear-gradient(270deg, transparent, var(--accent)); }
.xo-top { transform: translate(calc((1 - var(--b)) * -60px), calc((1 - var(--b)) * -18px)) rotate(calc((1 - var(--b)) * -34deg)); }
.xo-bottom { transform: translate(calc((1 - var(--b)) * 60px), calc((1 - var(--b)) * 18px)) rotate(calc((1 - var(--b)) * 34deg)); }
.xo-bolt svg { filter: drop-shadow(0 0 calc(var(--j) * 18px) color-mix(in srgb, var(--accent) 60%, transparent)); }
.xo-cue { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--muted-foreground); opacity: calc(var(--a) * (1 - var(--b) * 3)); }
.xo-cue svg { animation: xo-nudge 1.4s ease-in-out infinite; }
@keyframes xo-nudge { 50% { transform: translateY(3px); } }
.xo-join { margin-top: -18px; }
.dv-editor, .dv-phone { transition: box-shadow .3s; }
.xo[data-variant="devices"] .xo-left .dv-editor { box-shadow: 0 30px 60px -30px rgb(20 20 25 / .6), 0 0 0 calc(var(--j) * 3px) color-mix(in srgb, var(--primary) 55%, transparent); }
.xo[data-variant="devices"] .xo-right .dv-phone { box-shadow: 0 30px 60px -30px rgb(20 20 25 / .6), 0 0 0 calc(var(--j) * 3px) color-mix(in srgb, var(--accent) 60%, transparent); }
.xo-left { transform: translateX(calc((1 - var(--a)) * -55% + var(--b) * 10px)) rotate(calc((1 - var(--a)) * -4deg)); }
.xo-right { transform: translateX(calc((1 - var(--a)) * 55% - var(--b) * 10px)) rotate(calc((1 - var(--a)) * 4deg)); }
@media (max-width: 1100px) { .xo-center::before, .xo-center::after { top: 70px; } }
@media (max-width: 900px) { .xo { height: auto; } .xo-center::before, .xo-center::after, .xo-cue { display: none; } .xo-join { margin-top: 6px; } }
@media (prefers-reduced-motion: reduce) { .xo { height: auto; } .xo-cue { display: none; } }

/* Stack builder now stands alone */
#stack { display: block; padding-block: 104px; }
@media (max-width: 760px) { #stack { padding-block: 64px; } }

/* ==========================================================
   FAQ: searchable help desk
   ========================================================== */
.faq-section { padding-block: 104px; background: var(--background); }
.fq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.fq-head h2 { font-size: 44px; line-height: 1.04; letter-spacing: -.035em; }
.fq-head p { font-size: 16px; max-width: 360px; }
.fq-search { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 32px; padding: 6px 10px 6px 22px; background: var(--card); border: 1.5px solid var(--border); border-radius: 20px; box-shadow: 0 24px 60px -36px color-mix(in srgb, var(--primary) 55%, transparent); transition: border-color .2s, box-shadow .2s; }
.fq-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 12%, transparent), 0 24px 60px -36px color-mix(in srgb, var(--primary) 55%, transparent); }
.fq-search > svg { color: var(--primary); flex-shrink: 0; }
.fq-search input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 20px; padding: 16px 0; color: var(--foreground); }
.fq-search input::placeholder { color: color-mix(in srgb, var(--muted-foreground) 75%, transparent); }
.fq-clear { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--muted); color: var(--muted-foreground); cursor: pointer; }
.fq-sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fq-sugg button { border: 0; background: none; color: var(--muted-foreground); font-size: 13.5px; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; margin-right: 14px; }
.fq-sugg button:hover { color: var(--primary); text-decoration-color: currentColor; }
.fq-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.fq-topics button { border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); font-size: 13px; padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.fq-topics button:hover { color: var(--foreground); border-color: var(--foreground); }
.fq-topics button[aria-pressed="true"] { background: var(--foreground); color: var(--card); border-color: var(--foreground); }
.fq-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; margin-top: 26px; align-items: start; }
.fq-list { display: flex; flex-direction: column; gap: 4px; max-height: 560px; overflow: auto; padding: 4px; margin: -4px; scrollbar-width: thin; }
.fq-list button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid transparent; background: none; padding: 11px 12px; border-radius: 14px; font-size: 15px; color: var(--foreground); cursor: pointer; animation: xh-text .3s both; transition: background .15s, border-color .15s; }
.fq-list button:hover { background: var(--muted); }
.fq-list button[aria-selected="true"] { background: var(--card); border-color: color-mix(in srgb, var(--c) 45%, var(--border)); box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--c) 70%, transparent); }
.fq-ic { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: color-mix(in srgb, var(--c) 11%, var(--card)); color: var(--c); }
.fq-list mark, .fq-ans-in mark { background: color-mix(in srgb, var(--accent) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.fq-none { font-size: 14px; color: var(--muted-foreground); padding: 14px 12px; }
.fq-answer { position: sticky; top: calc(88px + env(safe-area-inset-top, 0px)); }
.fq-ans-in { padding: 32px 34px; border-radius: 26px; background: color-mix(in srgb, var(--c) 6%, var(--card)); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--border)); animation: xh-text .4s both; }
.fq-app { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--c); }
.fq-ans-in h3 { margin-top: 14px; font-size: 28px; line-height: 1.15; letter-spacing: -.03em; font-weight: 600; }
.fq-ans-in > p { margin-top: 14px; font-size: 16px; line-height: 1.7; color: color-mix(in srgb, var(--foreground) 82%, transparent); max-width: 60ch; }
.fq-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.fq-ask { font-size: 14px; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--border); }
.fq-ask:hover { color: var(--primary); }
.fq-rel { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fq-rel span { font-size: 12.5px; color: var(--muted-foreground); }
.fq-rel button { border: 0; background: none; padding: 0; font-size: 14.5px; color: var(--foreground); text-align: left; cursor: pointer; }
.fq-rel button:hover { color: var(--c); }
@media (max-width: 900px) {
  .fq-body { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .fq-answer { position: static; order: -1; scroll-margin-top: 80px; }
  .fq-list { max-height: 380px; }
}
@media (max-width: 760px) {
  .faq-section { padding-block: 64px; }
  .fq-head h2 { font-size: 34px; }
  .fq-search { padding-left: 14px; } .fq-search input { font-size: 16px; padding: 13px 0; }
  .fq-topics { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  .fq-topics button { flex-shrink: 0; }
  .fq-ans-in { padding: 22px 20px; border-radius: 20px; } .fq-ans-in h3 { font-size: 22px; }
}

/* ==========================================================
   HERO: scroll-driven sale
   ========================================================== */
.xh-pin { position: relative; }
.xh.is-pinned { height: calc(100dvh + 7 * 46vh); padding-block: 0; }
.xh.is-pinned .xh-pin { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); height: calc(100dvh - 64px); display: flex; align-items: center; }
.xh.is-pinned .xh-grid { min-height: 0; width: min(1180px, calc(100% - 56px)); }
.xh-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted-foreground); transition: opacity .4s; }
.xh-hint svg { color: var(--primary); }
.xh.is-pinned .xh-hint svg { animation: xo-nudge 1.4s ease-in-out infinite; }
.xh-hint.gone { opacity: 0; }
.xh-timer { animation: none !important; transform: scaleX(0); transition: transform .12s linear; display: none; }
.xh.is-pinned .xh-timer { display: block; }
.xh-skip { display: none; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 2px; color: var(--primary); font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent); transition: text-decoration-color .2s, color .2s; }
.xh-skip span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, transparent); animation: xh-skipbob 1.4s ease-in-out infinite; }
.xh-skip:hover { color: #9A1A6D; text-decoration-color: currentColor; }
.xh-skip:hover span { background: var(--primary); color: #fff; }
@keyframes xh-skipbob { 50% { transform: translateY(4px); } }
.xh.is-pinned .xh-skip { display: inline-flex; }
.xh-hint { margin-top: 14px; }
.xh-progress { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--border); }
.xh-progress i { display: block; height: 100%; width: calc(var(--hp, 0) * 100%); background: var(--action); }
.xh.is-pinned .xh-progress { display: block; }

/* ==========================================================
   CLOSING: three options (the cut-off wordmark stays in all three)
   ========================================================== */
.closing { position: relative; padding: 70px 0 0; text-align: center; overflow: hidden; }
.closing .review-switch-row { position: relative; z-index: 3; }
.cl-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.cl-kick { font-size: 18px; font-weight: 500; color: var(--primary); }
.closing .cl-inner h2 { margin-top: 10px; font-size: clamp(44px, 6vw, 84px); line-height: .98; letter-spacing: -.045em; font-weight: 700; }
.closing .cl-sub { margin-top: 18px; font-size: 18px; color: var(--muted-foreground); }
.cl-cta { margin-top: 28px; transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .15s; }
.cl-word { position: relative; z-index: 1; }
.cl-word > span { display: flex; align-items: center; justify-content: center; }
.cl-word svg { width: 14vw; height: 17vw; }

/* A: Charge up */
.closing[data-variant="charge"] { background: var(--deep); color: #fff; border-top: 0; }
.closing[data-variant="charge"] .cl-kick { color: var(--accent); }
.closing[data-variant="charge"] .cl-sub { color: rgb(255 255 255 / .7); }
.closing[data-variant="charge"] h2 em { color: #fff; background: var(--action); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: brightness(1.6); }
.closing[data-variant="charge"] .cl-word { opacity: 1; color: rgb(255 255 255 / .06); }
.closing[data-variant="charge"] .cw-fill { position: absolute; inset: 0; color: transparent; background: linear-gradient(100deg, #7A1257, #C13A8E 55%, #FF7AC6); -webkit-background-clip: text; background-clip: text; clip-path: inset(0 calc((1 - var(--ch, 0)) * 100%) 0 0); }
.closing[data-variant="charge"] .cw-fill svg { color: #FF7AC6; }
.cl-flash { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 100%, rgb(255 122 198 / .55), transparent 70%); opacity: 0; }
.closing.zapped .cl-flash { animation: cl-flash 1.2s ease-out; }
@keyframes cl-flash { 0% { opacity: 0; } 12% { opacity: 1; } 22% { opacity: .2; } 32% { opacity: .85; } 100% { opacity: 0; } }
@keyframes cl-glow { 0%, 100% { filter: none; } 20% { filter: drop-shadow(0 0 30px #FF7AC6) brightness(1.4); } }
.closing[data-variant="charge"] .review-switch { background: #fff; }

/* B: Live wire */
.closing[data-variant="wire"] { background: var(--muted); }
.closing[data-variant="wire"] h2 em { color: var(--primary); }
.cw-bands { position: relative; z-index: 2; margin: 56px 0 -40px; }
.cw-band { overflow: hidden; padding: 10px 0; background: var(--card); border-block: 1px solid var(--border); transform: rotate(-3deg); box-shadow: 0 20px 40px -30px color-mix(in srgb, var(--foreground) 40%, transparent); }
.cw-band.rev { transform: rotate(2deg); margin-top: -6px; background: var(--foreground); border-color: var(--foreground); }
.cw-track { display: flex; gap: 12px; width: max-content; animation: cw-move 38s linear infinite; }
.cw-band.rev .cw-track { animation-direction: reverse; animation-duration: 44s; }
.cw-bands:hover .cw-track { animation-play-state: paused; }
.cw-ev { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 15px; font-weight: 500; padding: 9px 16px; border-radius: 12px; background: color-mix(in srgb, var(--c) 9%, var(--card)); color: var(--foreground); }
.cw-ev svg { color: var(--c); }
.cw-band.rev .cw-ev { background: rgb(255 255 255 / .07); color: #fff; }
.cw-band.rev .cw-ev svg { color: color-mix(in srgb, var(--c) 50%, #fff); }
@keyframes cw-move { to { transform: translateX(-50%); } }
.closing[data-variant="wire"] .cl-word { color: var(--foreground); opacity: .07; }

/* C: Spotlight */
.closing[data-variant="field"] { background: radial-gradient(120% 90% at 50% 0%, #9A1A6D, #5A0D41 55%, #2A0620); color: #fff; }
.closing[data-variant="field"] .cl-kick { color: #FFB3DE; }
.closing[data-variant="field"] .cl-sub { color: rgb(255 255 255 / .75); }
.closing[data-variant="field"] h2 em { color: #FFD3EC; }
.closing[data-variant="field"] .cl-cta { background: #fff; color: var(--primary); animation: none; }
.closing[data-variant="field"] .cl-word { opacity: 1; color: rgb(255 255 255 / .09); }
.closing[data-variant="field"] .cw-lit { position: absolute; inset: 0; color: #fff; -webkit-mask-image: radial-gradient(circle 18vw at var(--wx, 50%) var(--wy, 45%), #000 0 38%, transparent 62%); mask-image: radial-gradient(circle 18vw at var(--wx, 50%) var(--wy, 45%), #000 0 38%, transparent 62%); }
.closing[data-variant="field"]::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle 30vw at var(--mx, 50%) var(--my, 80%), rgb(255 179 222 / .22), transparent 70%); }

@media (max-width: 760px) {
  .closing { padding-top: 48px; }
  .cl-kick { font-size: 15px; } .closing .cl-sub { font-size: 16px; }
  .cw-ev { font-size: 13px; padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) { .cw-track { animation: none !important; } }
.xh.is-pinned { overflow: clip; }
.xh.is-pinned .xh-copy h1 { font-size: 56px; }
.xh.is-pinned .xh-lede { margin-top: 16px; }
.xh.is-pinned .xh-actions { margin-top: 22px; }
.xh.is-pinned .xh-narration { margin-top: 24px; min-height: 212px; }
@media (max-height: 820px) { .xh.is-pinned .xh-copy h1 { font-size: 48px; } .xh.is-pinned .xh-lede { font-size: 15.5px; } .xh.is-pinned .xh-narration { min-height: 196px; padding-block: 16px 14px; } }

/* ==========================================================
   APP PICKER (ecosystem tabs): three options
   ========================================================== */
#ecosystem .pt-switch { justify-content: flex-start; margin-bottom: 16px; }
.pt-hint { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted-foreground); margin-bottom: 14px; }
.pt-hint svg { color: var(--primary); }
.pt { position: relative; }
.pt button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; }
.pt-ic { display: grid; place-items: center; flex-shrink: 0; }
.pt-tx strong { display: block; font-weight: 600; }
.pt-tx small { display: block; }
.pt-live { display: none; }
.pt-ind { position: absolute; pointer-events: none; }
.pt.attract button { animation: pt-attract .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--n) * 90ms + .2s); }
@keyframes pt-attract { 40% { transform: translateY(-6px); } }

/* A: Power rail. Dark bar, a lit block slides to the app you pick */
[data-tabs="rail"] .pt { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 20px; background: var(--deep); box-shadow: 0 24px 50px -30px rgb(20 20 25 / .7); }
[data-tabs="rail"] .pt-ind { top: 6px; bottom: 6px; left: var(--ix, 6px); width: var(--iw, 0); border-radius: 15px; background: linear-gradient(135deg, color-mix(in srgb, var(--ic) 82%, #fff), var(--ic)); box-shadow: 0 0 28px -2px color-mix(in srgb, var(--ic) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / .35); transition: left .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1), background .35s, box-shadow .35s; overflow: hidden; }
[data-tabs="rail"] .pt-ind::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%); transform: translateX(-120%); }
[data-tabs="rail"] .pt.zap .pt-ind::after { animation: pt-sweep .8s ease-out .25s; }
@keyframes pt-sweep { to { transform: translateX(120%); } }
[data-tabs="rail"] .pt button { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 10px; border-radius: 15px; color: rgb(255 255 255 / .72); font-size: 15px; transition: color .2s, background .2s; }
[data-tabs="rail"] .pt button:hover:not([aria-selected="true"]) { background: rgb(255 255 255 / .07); color: #fff; }
[data-tabs="rail"] .pt-ic { width: 32px; height: 32px; border-radius: 10px; background: rgb(255 255 255 / .08); color: color-mix(in srgb, var(--c) 45%, #fff); transition: background .2s, color .2s; }
[data-tabs="rail"] .pt-tx small { display: none; }
[data-tabs="rail"] .pt button[aria-selected="true"] { color: #fff; }
[data-tabs="rail"] .pt button[aria-selected="true"] .pt-ic { background: rgb(255 255 255 / .22); color: #fff; }

/* B: App dock. Each app is a choice with the problem it solves */
[data-tabs="dock"] .pt { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
[data-tabs="dock"] .pt-ind { display: none; }
[data-tabs="dock"] .pt button { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 18px; background: var(--card); border: 1.5px solid var(--border); transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .25s, background .2s; }
[data-tabs="dock"] .pt button:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 55%, var(--border)); box-shadow: 0 18px 34px -24px color-mix(in srgb, var(--c) 80%, transparent); }
[data-tabs="dock"] .pt-ic { width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c) 11%, var(--card)); color: var(--c); transition: background .2s, color .2s; }
[data-tabs="dock"] .pt-tx strong { font-size: 16px; letter-spacing: -.01em; }
[data-tabs="dock"] .pt-tx small { margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--muted-foreground); }
[data-tabs="dock"] .pt-live { position: absolute; top: 14px; right: 14px; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--c); padding: 3px 7px; border-radius: 6px; }
[data-tabs="dock"] .pt button[aria-selected="true"] { background: color-mix(in srgb, var(--c) 7%, var(--card)); border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent), 0 22px 40px -26px color-mix(in srgb, var(--c) 90%, transparent); }
[data-tabs="dock"] .pt button[aria-selected="true"] .pt-ic { background: var(--c); color: #fff; }
[data-tabs="dock"] .pt button[aria-selected="true"] .pt-live { display: block; }

/* C: Switchboard. Six nodes on a live wire; the charge runs to the one you pick */
[data-tabs="board"] .pt { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 22px 18px 18px; border-radius: 24px; background: var(--deep); overflow: hidden; }
[data-tabs="board"] .pt::before { content: ''; position: absolute; left: 40px; right: 40px; top: 46px; height: 2px; background: rgb(255 255 255 / .12); }
[data-tabs="board"] .pt-ind { left: 40px; top: 45px; height: 4px; border-radius: 4px; width: max(0px, calc(var(--ix, 0px) + var(--iw, 0px) / 2 - 40px)); background: linear-gradient(90deg, var(--primary), var(--ic)); box-shadow: 0 0 16px var(--ic); transition: width .6s cubic-bezier(.2,.8,.2,1), background .3s; }
[data-tabs="board"] .pt-ind::after { content: ''; position: absolute; right: -6px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #fff, var(--ic) 45%, transparent 70%); opacity: 0; }
[data-tabs="board"] .pt.zap .pt-ind::after { animation: pt-spark .7s ease-out .45s; }
@keyframes pt-spark { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.6); } 100% { opacity: 0; transform: scale(2.4); } }
[data-tabs="board"] .pt button { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 4px 4px; color: rgb(255 255 255 / .7); }
[data-tabs="board"] .pt-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--deep); border: 1.5px solid rgb(255 255 255 / .18); color: color-mix(in srgb, var(--c) 50%, #fff); transition: transform .25s, background .25s, border-color .25s, box-shadow .25s; }
[data-tabs="board"] .pt button:hover .pt-ic { transform: scale(1.08); border-color: color-mix(in srgb, var(--c) 60%, #fff); }
[data-tabs="board"] .pt-tx strong { font-size: 15px; }
[data-tabs="board"] .pt-tx small { margin-top: 2px; font-size: 12px; color: rgb(255 255 255 / .45); }
[data-tabs="board"] .pt button[aria-selected="true"] { color: #fff; }
[data-tabs="board"] .pt button[aria-selected="true"] .pt-ic { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 25%, transparent), 0 0 30px var(--c); animation: pt-pulse 2.2s ease-in-out infinite; }
@keyframes pt-pulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--c) 12%, transparent), 0 0 40px var(--c); } }

@media (max-width: 1100px) {
  [data-tabs="dock"] .pt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-tabs="rail"] .pt button { flex-direction: column; gap: 6px; font-size: 13.5px; }
}
@media (max-width: 760px) {
  [data-tabs="rail"] .pt, [data-tabs="board"] .pt { display: flex; overflow-x: auto; scrollbar-width: none; }
  [data-tabs="rail"] .pt button { flex: 0 0 auto; min-width: 104px; }
  [data-tabs="board"] .pt button { flex: 0 0 auto; min-width: 104px; }
  [data-tabs="board"] .pt-ind, [data-tabs="board"] .pt::before { display: none; }
  [data-tabs="dock"] .pt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  [data-tabs="dock"] .pt button { padding: 12px; gap: 8px; }
  [data-tabs="dock"] .pt-ic { width: 34px; height: 34px; }
  [data-tabs="dock"] .pt-live { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .pt.attract button, [data-tabs="board"] .pt button[aria-selected="true"] .pt-ic { animation: none !important; } }

/* Origin balance: both frames share one size, both texts left-aligned, beams meet both frame edges */
.xo[data-variant="devices"] .xo-layout { align-items: start; }
.xo[data-variant="devices"] .dv-editor, .dv-live-win { height: 250px; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #141419; }
.xo[data-variant="devices"] .dv-code { flex: 1; }
.dv-live-win { box-shadow: 0 30px 60px -30px rgb(20 20 25 / .6), 0 0 0 calc(var(--j) * 3px) color-mix(in srgb, var(--accent) 60%, transparent); }
.dv-stream { position: relative; flex: 1; background: #2a1520 center 35% / cover no-repeat; }
.dv-stream::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .55), transparent 60%); }
.dv-stream .dv-live { top: 10px; left: 12px; }
.dv-stream .dv-comments { left: 12px; right: auto; width: 62%; bottom: 10px; top: auto; gap: 5px; }
.dv-stream .dv-shop { left: auto; right: 10px; bottom: 10px; width: auto; gap: 10px; font-size: 11.5px; padding: 6px 9px; }
.xo-right .dv-text, .xo-right .dv-text .who { text-align: left; justify-content: flex-start; }
.xo[data-variant="devices"] .xo-center { margin-top: 30px; }
.xo-center::before, .xo-center::after { top: 95px; }
@media (max-width: 1100px) { .xo[data-variant="devices"] .xo-center { margin-top: 55px; } .xo-center::before, .xo-center::after { top: 70px; } }
@media (max-width: 900px) { .xo[data-variant="devices"] .xo-center { margin-top: 0; } }

/* Closing A: thunder glow behind the wordmark */
.cl-storm { position: absolute; left: 0; right: 0; bottom: 0; height: 75%; z-index: 0; pointer-events: none; }
.cl-storm::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 100%, rgb(193 58 142 / calc(.12 + var(--ch, 0) * .38)), transparent 70%); }
.cl-storm i { position: absolute; bottom: 0; left: var(--x, 50%); width: 70vw; height: 100%; translate: -50% 25%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 190 232 / .95), rgb(193 58 142 / .55) 40%, transparent 75%); filter: blur(30px); opacity: 0; }
.cl-storm i.flick { animation: cl-thunder 1.3s ease-out; }
.cl-storm i.flick2 { animation: cl-thunder2 1.6s ease-out; }
@keyframes cl-thunder { 0% { opacity: 0; } 8% { opacity: .9; } 18% { opacity: .15; } 30% { opacity: .55; } 100% { opacity: 0; } }
@keyframes cl-thunder2 { 0% { opacity: 0; } 6% { opacity: 1; } 12% { opacity: .1; } 20% { opacity: .85; } 28% { opacity: .25; } 40% { opacity: .7; } 100% { opacity: 0; } }
.closing.rumble .cw-fill { animation: cl-wordflash 1.4s ease-out; }
@keyframes cl-wordflash { 0%, 100% { filter: none; } 8% { filter: brightness(1.7) drop-shadow(0 0 28px rgb(255 122 198 / .8)); } 18% { filter: brightness(1.05); } 30% { filter: brightness(1.45) drop-shadow(0 0 18px rgb(255 122 198 / .6)); } }
.closing.rumble .cw-base { animation: cl-baseflash 1.4s ease-out; }
@keyframes cl-baseflash { 8% { color: rgb(255 255 255 / .22); } 30% { color: rgb(255 255 255 / .14); } }
.closing[data-variant="charge"].zapped .cw-fill svg { animation: cl-boltglow 2.6s ease-in-out infinite; }
@keyframes cl-boltglow { 0%, 100% { filter: drop-shadow(0 0 6px #FF7AC6); } 50% { filter: drop-shadow(0 0 22px #FF7AC6) brightness(1.3); } }
.closing[data-variant="charge"].zapped .cl-cta { animation: action-shift 7s ease infinite, cl-ctaglow 2.6s ease-in-out infinite; }
@keyframes cl-ctaglow { 50% { box-shadow: 0 0 34px 2px rgb(255 122 198 / .45); } }
@media (prefers-reduced-motion: reduce) { .cl-storm i { display: none; } }

/* FAQ list scrollbar in brand plum */
.fq-list { scrollbar-width: thin; scrollbar-color: var(--primary) color-mix(in srgb, var(--primary) 8%, transparent); }
.fq-list::-webkit-scrollbar { width: 8px; }
.fq-list::-webkit-scrollbar-track { background: color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 8px; }
.fq-list::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 8px; }
.fq-list::-webkit-scrollbar-thumb:hover { background: #5A0D41; }

@media (max-width: 520px) { .dv-stream .dv-shop { display: none; } .dv-stream .dv-comments { width: 80%; } }

/* ==========================================================
   ECOSYSTEM ON ONE DARK CANVAS
   The picker, the story and the demo window now share a deep plum
   background, so there's no white strip between two dark pieces.
   ========================================================== */
html, body { overflow-x: clip; }
#ecosystem { position: relative; isolation: isolate; color: #fff; padding-block: 104px; }
#ecosystem::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0;
  background: radial-gradient(70% 45% at 85% 0%, rgb(193 58 142 / .28), transparent 70%), radial-gradient(60% 40% at 0% 55%, rgb(122 18 87 / .35), transparent 70%), linear-gradient(180deg, #1B0A17, #12070F 60%, #170913); }
#ecosystem .section-heading h2 { color: #fff; }
#ecosystem .section-heading em { color: rgb(255 255 255 / .55); }
#ecosystem .section-heading > p, #ecosystem .eco-story-r > p { color: rgb(255 255 255 / .7); }
#ecosystem .eyebrow { color: #FF8FCF; }
#ecosystem .pt-hint { color: rgb(255 255 255 / .7); }
#ecosystem .pt-hint svg, #ecosystem .eco-try > svg { color: #FF8FCF; }
#ecosystem .eco-story h3 { color: #fff; }
#ecosystem .pain-line { color: rgb(255 255 255 / .5); text-decoration-color: #FF8FCF; }
#ecosystem .eco-checks span, #ecosystem .eco-try { color: rgb(255 255 255 / .85); }
#ecosystem .eco-checks svg { color: color-mix(in srgb, var(--app) 50%, #fff); }
#ecosystem .text-link { color: #FF8FCF; }
#ecosystem .ecosystem-note, #ecosystem .ecosystem-note p { color: rgb(255 255 255 / .7); }
#ecosystem .ecosystem-note strong { color: #fff; }
#ecosystem .ecosystem-note svg { color: #FF8FCF; }
#ecosystem .app-window { background: #0F0F14; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 50px 100px -40px rgb(0 0 0 / .8), 0 0 80px -30px color-mix(in srgb, var(--app) 60%, transparent); }
/* picker surfaces become glass on the dark canvas */
#ecosystem[data-tabs="rail"] .pt { background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); }
#ecosystem[data-tabs="board"] .pt { background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); }
#ecosystem[data-tabs="board"] .pt-ic { background: #1B0A17; }
@media (max-width: 760px) { #ecosystem { padding-block: 64px; } }

/* ==========================================================
   ORIGIN: three layouts (same animation)
   ========================================================== */
.xo-center::before, .xo-center::after { display: none !important; }
.xo-layout { position: relative; }
.xo-beams { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.xo-beams path { fill: none; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--b)); }
.xo-beams .l { stroke: var(--primary); }
.xo-beams .r { stroke: var(--accent); }
.xo-beams path { filter: drop-shadow(0 0 calc(var(--j) * 6px) var(--accent)); }
.xo-side, .xo-center { position: relative; z-index: 1; }
.xo-name { display: none; margin-top: -10px; font-size: 22px; letter-spacing: -.03em; background: var(--action); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: var(--j); transform: translateY(calc((1 - var(--j)) * 12px)); }
.xo-titles { display: grid; }
.xo-t1, .xo-t2 { grid-area: 1 / 1; }
.xo-t2 { display: none; }
.xo .xo-join strong { font-size: 24px; letter-spacing: -.03em; }
.xo .xo-join p { font-size: 15px; line-height: 1.65; }
.xo[data-variant="devices"] .xo-layout { grid-template-areas: none; }

/* A: Diagonal. Silk top-left, Overcast bottom-right, the name in the middle,
   the shared story tucked into the open bottom-left corner */
.xo[data-layout="diagonal"] .xo-layout { grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; gap: 0 26px; }
.xo[data-layout="diagonal"] .xo-left { grid-column: 1; grid-row: 1; }
.xo[data-layout="diagonal"] .xo-right { grid-column: 3; grid-row: 1 / span 2; margin-top: 170px; }
.xo[data-layout="diagonal"] .xo-center { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0 !important; }
.xo[data-layout="diagonal"] .xo-name { display: block; }
.xo[data-layout="diagonal"] .xo-join { grid-column: 1; grid-row: 2; margin-top: 22px; text-align: left; max-width: 400px; }
.xo[data-layout="diagonal"] .xo-join strong { display: none; }
.xo[data-layout="diagonal"] .dv-editor, .xo[data-layout="diagonal"] .dv-live-win { height: 210px; }
.xo[data-layout="diagonal"] .dv-code { font-size: 12px; line-height: 1.6; }
.xo[data-layout="diagonal"] .xo-head { margin-bottom: 18px; }
.xo[data-layout="diagonal"] .dv-text p { font-size: 13.5px; }
.xo[data-layout="diagonal"] .xo-join p { font-size: 14px; color: var(--muted-foreground); }

/* B: Name below. Only the bolt sits in the middle; the joined name and story land under the row */
.xo[data-layout="below"] .xo-layout { grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr); grid-template-areas: "left center right" "join join join"; align-items: start; }
.xo[data-layout="below"] .xo-left { grid-area: left; } .xo[data-layout="below"] .xo-right { grid-area: right; }
.xo[data-layout="below"] .xo-center { grid-area: center; margin-top: 30px !important; }
.xo[data-layout="below"] .xo-join { grid-area: join; margin: 30px auto 0; max-width: 620px; text-align: center; }
.xo[data-layout="below"] .xo-join strong { font-size: 28px; }

/* C: Headline swap. The middle stays clean; the section title itself turns into the joined name */
.xo[data-layout="headline"] .xo-layout { grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr); grid-template-areas: "left center right"; align-items: start; }
.xo[data-layout="headline"] .xo-left { grid-area: left; } .xo[data-layout="headline"] .xo-right { grid-area: right; }
.xo[data-layout="headline"] .xo-center { grid-area: center; margin-top: 30px !important; }
.xo[data-layout="headline"] .xo-join { display: none; }
.xo[data-layout="headline"] .xo-t2 { display: block; }
.xo[data-layout="headline"] .xo-t1 { opacity: calc(1 - var(--j)); transform: translateY(calc(var(--j) * -14px)); filter: blur(calc(var(--j) * 4px)); }
.xo[data-layout="headline"] .xo-t2 { opacity: var(--j); transform: translateY(calc((1 - var(--j)) * 14px)); }
.xo-t2 h2 span { background: var(--action); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xo-t2 p { margin: 10px auto 0; max-width: 620px; font-size: 15px; line-height: 1.6; color: var(--muted-foreground); }

@media (max-width: 1100px) {
  .xo[data-layout] .xo-layout { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .xo[data-layout] .xo-layout { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; gap: 24px; }
  .xo[data-layout] .xo-left, .xo[data-layout] .xo-right, .xo[data-layout] .xo-center, .xo[data-layout] .xo-join { grid-column: 1 !important; grid-row: auto !important; grid-area: auto !important; margin-top: 0 !important; }
  .xo[data-layout] .xo-join { display: block !important; text-align: center; margin-inline: auto; }
  .xo[data-layout] .xo-join strong { display: block !important; }
  .xo[data-layout] .xo-name, .xo[data-layout] .xo-t2, .xo-beams { display: none !important; }
  .xo[data-layout] .xo-t1 { opacity: 1 !important; transform: none !important; filter: none !important; }
}
.xo-name { white-space: nowrap; }
.xo[data-layout="diagonal"] .xo-layout { grid-template-columns: minmax(0, 1fr) 250px minmax(0, 1fr); }
.xo[data-layout="below"] .dv-editor, .xo[data-layout="below"] .dv-live-win { height: 210px; }
.xo[data-layout="below"] .dv-code { font-size: 12px; line-height: 1.6; }
.xo[data-layout="below"] .dv-text p { font-size: 13.5px; }
.xo[data-layout="below"] .xo-center { margin-top: 10px !important; }
.xo[data-layout="below"] .xo-join { margin-top: 18px; }
.xo[data-layout="below"] .xo-join strong { font-size: 24px; }
.xo[data-layout="below"] .xo-join p { font-size: 14px; }
.xo[data-layout="below"] .xo-head { margin-bottom: 20px; }
@media (max-width: 1100px) { .xo[data-layout="diagonal"] .xo-layout { grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); } }

/* Skip sits under the whole hero, centered and large */
.xh-skiprow { display: none; }
.xh.is-pinned .xh-pin { flex-direction: column; justify-content: center; }
.xh.is-pinned .xh-skiprow { display: flex; justify-content: center; width: 100%; padding: 6px 0 18px; }
.xh.is-pinned .xh-skip { display: inline-flex; align-items: center; gap: 14px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--primary); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: color-mix(in srgb, var(--primary) 30%, transparent); padding: 8px 4px; }
.xh.is-pinned .xh-skip span { width: 44px; height: 44px; background: var(--primary); color: #fff; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary) 80%, transparent); }
.xh.is-pinned .xh-skip:hover { text-decoration-color: currentColor; }
.xh.is-pinned .xh-skip:hover span { background: #5A0D41; }
.xh.is-pinned .xh-stage { height: 560px; }
@media (max-height: 820px) { .xh.is-pinned .xh-stage { height: 500px; } .xh.is-pinned .xh-skip { font-size: 21px; } .xh.is-pinned .xh-skip span { width: 38px; height: 38px; } .xh.is-pinned .xh-skiprow { padding-bottom: 12px; } }

/* Ecosystem story: one centered column, the how-to lives inside the demo window */
#ecosystem .eco-story { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; max-width: 760px; margin: 0 auto; }
#ecosystem .eco-story .pain-line { margin: 0 0 10px; font-size: 14px; }
#ecosystem .eco-story h3 { font-size: 38px; line-height: 1.08; letter-spacing: -.035em; }
#ecosystem .eco-desc { margin-top: 14px; font-size: 16px; line-height: 1.6; color: rgb(255 255 255 / .7); max-width: 600px; }
.eco-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; margin-top: 18px; }
.eco-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: rgb(255 255 255 / .85); text-transform: capitalize; }
.eco-chk svg { color: color-mix(in srgb, var(--app) 50%, #fff); }
.aw-hintbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; color: var(--t-mut); background: color-mix(in srgb, var(--hue) 9%, transparent); border-bottom: 1px solid var(--line); }
.aw-hintbar svg { color: var(--hue); flex-shrink: 0; }
.aw-hintbar b { color: var(--t); font-weight: 600; }
#ecosystem .eco-panel { padding-top: 44px; }
@media (max-width: 760px) { #ecosystem .eco-story h3 { font-size: 27px; } .eco-meta { gap: 8px 16px; } }

/* ==========================================================
   PHONE AND TABLET PASS (Oct 9)
   ========================================================== */

/* ---------- Hero: the sale plays as you scroll on phones too ---------- */
.xh-mtrack { display: none; }
.xh.is-m { overflow: clip; padding-block: 20px 0; }
.xh.is-m .xh-grid { min-height: 0; gap: 0; }
.xh.is-m .xh-copy h1 { font-size: clamp(40px, 11vw, 60px); }
.xh.is-m .xh-hint { margin-top: 16px; }
.xh.is-m .xh-hint.gone { opacity: 1; }
.xh.is-m .xh-mtrack { display: block; position: relative; margin-top: 12px; height: calc(100svh - var(--hh, 64px) + 7 * 60svh); }
.xh.is-m .xh-mpin { position: sticky; top: var(--hh, 64px); height: calc(100svh - var(--hh, 64px)); display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 10px 20px 16px; max-width: 640px; margin-inline: auto; }
.xh.is-m .xh-stage { position: relative; width: 100%; height: auto; display: flex; flex-direction: column; margin: 0; }
.xh.is-m .xh-photo { position: relative; top: 0; left: 0; width: 100%; height: clamp(150px, 28svh, 320px); border-radius: 18px; animation: none; }
.xh.is-m .xh-photo-top { top: 10px; left: 12px; right: 12px; font-size: 12px; }
.xh.is-m .xh-card { position: relative; left: auto; top: auto; width: auto; margin: -44px 12px 0; padding: 12px 14px; animation: none; }
.xh.is-m .xh-card-head { padding-bottom: 8px; }
.xh.is-m .xh-card-body { padding-top: 8px; gap: 6px; font-size: 12.5px; }
.xh.is-m .xh-rail { position: relative; top: auto; right: auto; width: auto; display: flex; flex-direction: row; justify-content: space-between; overflow: visible; margin: 14px 0 0; padding: 0; }
.xh.is-m .xh-rail::before { display: block; left: 18px; right: 18px; top: 18px; bottom: auto; width: auto; height: 1px; }
.xh.is-m .xh-rail li { flex: 0 0 auto; }
.xh.is-m .xh-rail button { width: auto; padding: 0; flex-direction: column; gap: 0; }
.xh.is-m .xh-node { width: 36px; height: 36px; }
.xh.is-m .xh-rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.xh.is-m .xh-timer { display: block; position: absolute; left: 2px; right: 2px; bottom: -7px; top: auto; height: 3px; border-radius: 3px; background: var(--c); transform-origin: left; }
.xh.is-m .xh-narration { margin: 0; min-height: 0; padding: 12px 16px 14px; animation: none; }
.xh.is-m .xh-meta, .xh.is-m .xh-controls { display: none; }
.xh.is-m .xh-narration-text { margin-top: 0; }
.xh.is-m .xh-narration h2 { font-size: 19px; margin-top: 2px; }
.xh.is-m .xh-narration p { font-size: 13.5px; line-height: 1.5; margin-top: 4px; }
.xh.is-m .xh-skiprow { display: flex; justify-content: center; padding: 2px 0 0; }
.xh.is-m .xh-skip { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, var(--primary) 30%, transparent); padding: 6px 2px; }
.xh.is-m .xh-skip span { width: 36px; height: 36px; background: var(--primary); color: #fff; }
.xh.is-m .xh-progress { display: block; left: 20px; right: 20px; bottom: 6px; border-radius: 3px; overflow: hidden; }
@media (max-height: 620px) {
  .xh.is-m .xh-photo { height: 120px; }
  .xh.is-m .xh-card-body > :nth-child(n+3) { display: none; }
  .xh.is-m .xh-narration p { display: none; }
}

/* ---------- Six apps after the video: a column under the hub on phones ---------- */
@media (max-width: 760px) {
  .xa-sticky { height: calc(100svh - 64px); align-items: flex-start; padding-top: 18px; }
  .xa .eyebrow, .xa-body { display: none; }
  .xa-swap { margin-top: 0; }
  .xa-swap h2 { font-size: 30px; }
  .xa-counter { margin-top: 12px; padding-top: 12px; }
  .xa-count { font-size: 40px; }
  .xa-grid { gap: 14px; }
  .xa-stage { aspect-ratio: auto; height: min(470px, calc(100svh - 64px - 190px)); }
  .xa-lines { display: none; }
  .xa-stage::after { content: ''; position: absolute; left: 50%; top: 13%; bottom: 6%; width: 2px; margin-left: -1px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 10%, transparent)); transform-origin: top; transform: scaleY(var(--k)); opacity: var(--k); }
  .xa-hub { top: 6%; width: 56px; height: 56px; margin: -28px 0 0 -28px; box-shadow: 0 0 0 calc(var(--k) * 8px) color-mix(in srgb, var(--accent) 18%, transparent); z-index: 12; }
  .xa-hub svg { width: 24px; height: 24px; }
  .xa-hub span { display: none; }
  .xa-piece { width: 92%; left: calc(50% + var(--msx) * (1 - var(--k))); top: calc(var(--my) + var(--msy) * (1 - var(--k))); }
  .xa-pain, .xa-fix { padding: 10px 14px; border-radius: 12px; }
  .xa-fix { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; background: color-mix(in srgb, var(--c) 16%, var(--deep)); }
  .xa-fix .xa-tag { font-size: 11px; white-space: nowrap; }
  .xa-pain p, .xa-fix p { font-size: 13.5px; line-height: 1.3; margin-top: 2px; }
  .xa-fix p { margin-top: 0; }
  .xa-pain span { font-size: 10px; }
}
@media (max-width: 380px) { .xa-fix { grid-template-columns: minmax(0, 1fr); } }

/* ---------- App picker: all six fit, nothing hidden off the edge ---------- */
@media (max-width: 760px) {
  #ecosystem[data-tabs="board"] .pt { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 16px 6px 14px; overflow: visible; }
  #ecosystem[data-tabs="board"] .pt::before { display: block; left: 8.33%; right: 8.33%; top: 37px; }
  #ecosystem[data-tabs="board"] .pt-ind { display: block; left: 8.33%; top: 36px; width: max(0px, calc(var(--ix, 0px) + var(--iw, 0px) / 2 - 8.33%)); }
  #ecosystem[data-tabs="board"] .pt button { min-width: 0; gap: 8px; padding: 0 1px; }
  #ecosystem[data-tabs="board"] .pt-ic { width: 42px; height: 42px; }
  #ecosystem[data-tabs="board"] .pt-ic svg { width: 17px; height: 17px; }
  #ecosystem[data-tabs="board"] .pt-tx strong { font-size: 12px; letter-spacing: -.01em; }
  #ecosystem[data-tabs="board"] .pt-tx small { display: none; }
  #ecosystem .pt-hint { font-size: 13.5px; }
}
@media (max-width: 360px) { #ecosystem[data-tabs="board"] .pt-ic { width: 36px; height: 36px; } #ecosystem[data-tabs="board"] .pt-tx strong { font-size: 11px; } }

/* ---------- Two companies: vertical, joins as you scroll ---------- */
@media (max-width: 900px) {
  .xo[data-layout] .xo-layout { gap: 0 !important; }
  .xo[data-layout] .xo-beams { display: block !important; }
  .xo-beams path { stroke-width: 3; }
  .xo[data-layout] .xo-left { margin-bottom: 0 !important; }
  .xo[data-layout] .xo-center { display: flex; flex-direction: column; align-items: center; padding: 56px 0 18px; margin: 0 !important; }
  .xo[data-layout] .xo-bolt { width: 130px; height: 130px; }
  .xo[data-layout] .xo-cue { display: inline-flex !important; opacity: calc(1 - var(--b) * 1.6); margin-top: 6px; }
  .xo[data-layout] .xo-name { display: block !important; margin-top: 4px; font-size: 24px; }
  .xo[data-layout] .xo-labels { display: none; }
  .xo[data-layout] .xo-right { margin-top: 40px !important; }
  .xo[data-layout] .xo-join strong { display: none !important; }
  .xo[data-layout] .xo-join { margin-top: 26px !important; text-align: left; }
  .xo[data-layout] .xo-left, .xo[data-layout] .xo-right { transform: none; }
  .xo-left .dv-editor { box-shadow: 0 30px 60px -30px rgb(20 20 25 / .6), 0 0 0 calc(var(--j) * 3px) color-mix(in srgb, var(--primary) 55%, transparent) !important; }
}

/* ---------- Stack builder: the wiring sits right above the tool buttons on phones ---------- */
@media (max-width: 1100px) {
  .fv-stack { display: flex; flex-direction: column; gap: 0; }
  .fv-stack > div:first-child { display: contents; }
  .fv-stack h2 { order: 1; }
  .fv-stack .fv-lede { order: 2; }
  .fv-stack .fs-diagram { order: 3; margin-top: 22px; }
  .fv-stack .fs-tools { order: 4; margin-top: 14px; }
  .fv-stack .fs-summary { order: 5; margin-top: 20px; min-height: 0; }
}
@media (max-width: 760px) {
  .fs-diagram { aspect-ratio: 1 / .78 !important; border-radius: 20px; }
  .fs-tools { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fs-tool { height: 50px; padding: 0 8px; }
  .fs-tool img { max-width: 100%; height: calc(var(--h) * .82); object-fit: contain; }
}

/* ---------- FAQ topics: wrap instead of hiding off the edge ---------- */
@media (max-width: 760px) {
  .fq-topics { flex-wrap: wrap !important; overflow: visible !important; margin-inline: 0 !important; padding-inline: 0 !important; gap: 6px; }
  .fq-topics button { padding: 7px 12px; font-size: 13px; }
}
.xh.is-m .xh-mpin { gap: 10px; }
.xh.is-m .xh-photo { height: clamp(120px, 22svh, 300px); }
.xh.is-m .xh-card { margin-top: -38px; }
.xh.is-m .xh-narration { overflow: visible; }
.xh.is-m .xh-narration p { font-size: 13px; }
.xh.is-m .xh-flow span, .xh.is-m .xh-card-body .xh-flow > * { padding-block: 7px; }
@media (max-width: 1100px) { .fv-stack .fs-diagram { width: 100%; align-self: stretch; } .fv-stack h2, .fv-stack .fv-lede, .fv-stack .fs-tools, .fv-stack .fs-summary { align-self: stretch; } }
@media (max-width: 760px) { .fs-pill[data-p] { left: 55% !important; } }
@media (max-width: 900px) { .xo[data-layout] .xo-cue { margin-top: 22px; } }
/* tablet header: keep it on one line */
.site-header nav a, .site-header nav button, .site-header .button { white-space: nowrap; }
@media (max-width: 1000px) { .site-header nav > a { display: none; } }
/* tablet hero: use the extra height for a bigger photo */
@media (min-width: 600px) and (min-height: 800px) { .xh.is-m .xh-photo { height: 34svh; } .xh.is-m .xh-mpin { gap: 16px; } }