/* Motion homepage. Loaded only on "/". Tokens come from styles.css. */
.center { text-align: center; margin-left: auto; margin-right: auto; }
.tiny { font-size: .82rem; color: var(--n500); margin-top: 14px; }
.lg { display: inline-block; flex: none; }
.btn-shop { gap: 10px; }
.btn-shop .logo-shopify { width: 20px; height: 20px; }

/* ---------- Liquid glass system (Apple-style; CSS only, works over moving WebGL) ---------- */
:root { --glass-bg: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  --glass-border: rgba(255,255,255,.75); --glass-shadow: 0 1px 1px rgba(16,20,15,.04), 0 18px 50px -18px rgba(16,20,15,.22);
  --ease: cubic-bezier(.2,.8,.2,1); --r-xl: 32px; --r-lg: 24px; --r-md: 18px; }
.glass { position: relative; background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(16,20,15,.04), inset 0 0 24px rgba(255,255,255,.35), var(--glass-shadow); }
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.25) 100%);
  mix-blend-mode: soft-light; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255,255,255,.92); } }
.glass-pill { border-radius: 999px; }
.glass-btn { color: var(--ink); font-weight: 600; border-radius: 999px; }
.glass-btn:hover { transform: translateY(-1px); }

/* Type: Apple-like */
.h-hero h1, .story h2, .money2 h2, .ba h2, .bento-sec h2, .tour h2, .setup h2, .pains-sec h2 { letter-spacing: -0.045em; }

/* HERO */
.h-hero { position: relative; overflow: hidden; padding: 40px 0 0; }
@media (min-width: 900px) { .h-hero { padding: 72px 0 0; } }
.h-center { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.made-for { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; font-size: .9rem; font-weight: 600; color: var(--ink); margin: 0 0 26px; }
.made-for img { width: 22px; height: 22px; }
.h-hero h1 { font-size: clamp(2.5rem, 7.4vw, 5.4rem); line-height: 1.02; max-width: 13em; }
.h-lede { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--n700); margin: 24px auto 32px; max-width: 32em; }
.h-center .cta-row { justify-content: center; }
.hero-notes { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: .9rem; color: var(--n500); }
.hero-notes li { display: inline-flex; align-items: center; gap: 8px; }
.btn-shop { gap: 10px; } .btn-shop .logo-shopify { width: 20px; height: 20px; }

/* Hero B: money first. Ads Manager ROAS vs the money kept, as three fanned cards */
.h-hero { padding-bottom: 56px; }
.hb h1 { font-size: clamp(2.3rem, 5.6vw, 4.6rem); max-width: 13em; }
.hb h1 .ads { color: var(--n500); }
.hb h1 .bank { display: inline-block; }
.hb h1 .bank em { display: inline-block; font-style: normal; background: var(--lime); padding: 0 .12em; border-radius: .14em; }
.hb .h-lede { margin: 20px auto 28px; max-width: 34em; }
.hb .hero-wl { width: min(100%, 640px); }
.b-fan { position: relative; margin: 52px auto 0; width: 100%; max-width: 1080px; height: 450px; }
.b-card { position: absolute; top: 0; background: #fff; border: 1px solid #e2e5dc; border-radius: 26px; padding: 20px; text-align: left; box-shadow: 0 30px 70px -40px rgba(16,20,15,.4); }
.c-ads { left: 2%; width: 300px; top: 70px; transform: rotate(-6deg); }
.c-money { left: 50%; width: 400px; margin-left: -200px; z-index: 2; }
.c-do { right: 2%; width: 300px; top: 70px; transform: rotate(6deg); }
.card-k { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--n500); display: flex; align-items: center; gap: 8px; }
.card-k img { width: 18px; height: 18px; }
.c-ads .b-big { font-size: 4.2rem; font-weight: 800; letter-spacing: -0.06em; line-height: 1; margin-top: 18px; }
.c-ads .b-big small { font-size: 1.1rem; letter-spacing: 0; color: var(--n500); font-weight: 600; margin-left: 6px; }
.c-ads p { margin: 10px 0 0; font-size: .9rem; color: var(--n700); }
.c-ads .b-fine { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #d7dbcf; font-size: .82rem; color: var(--n500); }
.c-ads .b-fine b { color: var(--ink); }
.c-money .wf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.c-money .wf-head strong { font-size: 1.02rem; white-space: nowrap; }
.c-money .wf-head span { white-space: nowrap; }
.c-money .wf-head span { font-size: .78rem; color: var(--n500); }
.b-wf { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.b-wf li { display: grid; grid-template-columns: 100px 1fr 96px; gap: 10px; align-items: center; font-size: .88rem; }
.b-wf li > span:first-child { white-space: nowrap; }
.b-wf .t { height: 26px; border-radius: 8px; background: #f3f4ef; position: relative; overflow: hidden; }
.b-wf .t i { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: var(--ink); }
.b-wf .wf-lost .t i { background: var(--red); opacity: .9; }
.b-wf .wf-kept .t i { background: var(--lime); }
.b-wf li > span:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.b-wf .wf-lost > span:last-child { color: #b4232a; }
.b-verdict { margin-top: 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--ink); color: #fff; }
.b-verdict small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lime); }
.b-verdict p { margin: 4px 0 0; font-size: .86rem; color: #c9cfc2; }
.b-verdict b { font-size: 2.6rem; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.c-do ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.c-do li { padding: 12px; border-radius: 14px; background: #f5f6f1; font-size: .86rem; color: var(--n700); line-height: 1.45; }
.c-do li strong { display: block; color: var(--ink); font-size: .92rem; margin-bottom: 2px; }
.c-do .b-chip { display: inline-block; margin: 6px 4px 0 0; padding: 3px 8px; border-radius: 8px; background: #fdecec; color: #8f1d22; font-weight: 700; font-size: .74rem; }
.c-do .b-score { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fdecec; color: var(--red); font-weight: 800; float: right; margin-left: 8px; }
.b-illus { text-align: center; font-size: .74rem; color: var(--n500); margin: 10px 0 0; }
.hb-strip { margin: 36px auto 0; width: 100%; max-width: 1080px; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); text-align: left; padding: 0; }
@media (min-width: 900px) { .hb-strip { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.hb-strip li { list-style: none; background: #fff; border: 1px solid #e2e5dc; border-radius: 18px; padding: 14px 16px; font-size: .88rem; color: var(--n700); line-height: 1.45; }
.hb-strip li strong { display: block; color: var(--ink); font-size: .96rem; margin-bottom: 2px; }
.ads-inline { display: none; justify-content: space-between; align-items: center; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: #f5f6f1; font-size: .86rem; color: var(--n700); }
.ads-inline b { font-size: 1.3rem; color: var(--ink); letter-spacing: -0.03em; }
@media (max-width: 1000px) {
  .b-fan { height: auto; display: grid; gap: 14px; margin-top: 36px; max-width: 520px; }
  .b-card { position: relative; left: auto; right: auto; top: auto; width: auto; margin: 0; transform: none; }
  .c-ads, .c-do { display: none; }
  .c-money .ads-inline { display: flex; }
}
@media (max-width: 560px) {
  .c-money .wf-head { display: block; } .c-money .wf-head span { display: block; margin-top: 2px; }
  .b-wf li { grid-template-columns: 84px 1fr 84px; font-size: .82rem; }
  .b-verdict b { font-size: 2.1rem; }
  .hb-strip { grid-template-columns: minmax(0,1fr); }
}
/* WORKS WITH: app-icon tiles */
.works2 { padding: 8px 0 72px; position: relative; }
.works-title { text-align: center; font-size: .92rem; font-weight: 600; color: var(--n500); margin-bottom: 20px; }
.apps { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; max-width: 1020px; }
@media (min-width: 900px) { .apps { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; } }
.app { display: flex; align-items: center; gap: 14px; border-radius: var(--r-lg); padding: 14px; transition: transform .35s var(--ease); }
.app:hover { transform: translateY(-3px); }
.app b { display: block; color: var(--ink); font-size: 1rem; letter-spacing: -.01em; } .app small { color: var(--n500); font-size: .8rem; line-height: 1.35; display: block; }
.app-ic { width: 56px; height: 56px; flex: none; border-radius: 15px; display: grid; place-items: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 18px -8px rgba(16,20,15,.35); }
.ic-white { background: linear-gradient(180deg, #ffffff, #f2f3ee); border: 1px solid rgba(16,20,15,.06); }
.ic-wa { background: linear-gradient(180deg, #2fe274, #1fb855); }
.ic-ship svg { stroke: #6b4fd8; }
@media (max-width: 520px) { .app { flex-direction: column; align-items: flex-start; } }

/* PAINS: glass quote chips */
.pains-sec { position: relative; }
.pains-sec h2 { max-width: 17em; }
.pains { list-style: none; padding: 0; margin: 44px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1000px; }
.pain { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 12px 20px 12px 12px; font-weight: 500; color: var(--ink); font-size: .98rem; }
.pain-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex: none; }
.pain-ic svg { stroke: var(--lime); }
.pains-foot { color: var(--n500); max-width: 40em; margin-top: 30px; font-size: .95rem; }
@media (prefers-reduced-motion: no-preference) { .pain.on { animation: drift 6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.9s); } }
@keyframes drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 520px) { .pain { border-radius: 22px; } }

/* Section washes so glass cards have colour behind them */
.pains-sec::before, .story::before, .bento-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 15% 30%, rgba(217,249,157,.45), transparent 70%), radial-gradient(35% 45% at 85% 70%, rgba(186,230,253,.45), transparent 70%); }
.story, .bento-sec { position: relative; isolation: isolate; } .pains-sec { isolation: isolate; }
/* MONEY */
.money2 { background: var(--white); }
.money2-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; align-items: center; }
.money2-grid > * { min-width: 0; }
@media (min-width: 960px) { .money2-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 56px; } }
.m2-copy .lede { margin-top: 18px; }
.m2-card { background: linear-gradient(180deg,#fbfcf8,#f3f5ee); border-radius: var(--r-xl); padding: 24px; border: 1px solid var(--n200); box-shadow: inset 0 1px 0 #fff, var(--glass-shadow); }
.wf { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.wf li { display: grid; grid-template-columns: 130px minmax(0,1fr) 64px; align-items: center; gap: 12px; font-weight: 600; font-size: .95rem; }
.wf li i { display: block; height: 18px; border-radius: 6px; background: #cfd3c9; width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.wf.on li i { width: calc(var(--w) * 1%); }
.wf li.neg i { background: var(--amber); } .wf li.red i { background: var(--red); } .wf li.kept i { background: var(--lime); }
.wf li:nth-child(2) i { transition-delay: .25s; } .wf li:nth-child(3) i { transition-delay: .5s; } .wf li:nth-child(4) i { transition-delay: .75s; }
.wf b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.wf li.kept span, .wf li.kept b { font-size: 1.1rem; }
@media (max-width: 480px) { .wf li { grid-template-columns: 96px minmax(0,1fr) 54px; font-size: .86rem; } }
.roas-flip { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: center; margin-top: 24px; }
.rf { background: var(--white); border-radius: 18px; padding: 14px; border: 1px solid var(--n200); display: grid; gap: 4px; transition: transform .6s, opacity .6s; }
.rf span { font-size: .8rem; color: var(--n500); font-weight: 600; }
.rf b { justify-self: start; font-size: 2rem; letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.rf-old b { position: relative; }
.rf-old b::after { content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .6s .9s; }
.roas-flip.on .rf-old b::after { transform: scaleX(1); }
.rf-new { background: var(--ink); border-color: var(--ink); opacity: .25; transform: translateX(-8px); }
.rf-new span { color: rgba(255,255,255,.7); } .rf-new b { color: var(--lime); }
.roas-flip.on .rf-new { opacity: 1; transform: none; transition-delay: 1.3s; }
.rf-arrow { font-size: 1.4rem; color: var(--n500); }

/* STORY */
.story-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; margin-top: 44px; }
.story-grid > * { min-width: 0; }
@media (min-width: 960px) { .story-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 64px; } }
.story-stage { position: sticky; top: max(80px, calc(50vh - 230px)); z-index: 2; align-self: start; }
@media (max-width: 959px) { .story-stage { top: 64px; } }
.ss-card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.55)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,.85); border-radius: var(--r-xl); box-shadow: inset 0 1px 0 #fff, var(--glass-shadow); padding: 18px; min-height: 360px; overflow: hidden; }
@media (max-width: 959px) { .ss-card { min-height: 300px; padding: 14px; } }
.ss-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; padding-bottom: 14px; border-bottom: 1px solid var(--n100); }
.ss-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(46,158,106,.15); }
.ss-pill { background: var(--n100); border-radius: 999px; padding: 2px 9px; font-size: .78rem; font-weight: 600; }
.ss-city { margin-left: auto; color: var(--n500); font-size: .82rem; }
.ss-layer { position: absolute; left: 18px; right: 18px; top: 66px; bottom: 18px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px;
  opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .5s, transform .5s; pointer-events: none; }
.story-stage[data-step="1"] .l1, .story-stage[data-step="2"] .l2, .story-stage[data-step="3"] .l3, .story-stage[data-step="4"] .l4 { opacity: 1; transform: none; }
.ss-note { margin: 0; font-size: .86rem; color: var(--n500); text-align: center; }
.notif { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--n200); border-radius: 18px; padding: 14px 16px; position: relative; width: min(100%, 340px); }
.notif img { width: 30px; height: 30px; }
.notif b { display: block; color: var(--ink); } .notif small { color: var(--n500); }
.ping { position: absolute; right: 14px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
.story-stage[data-step="1"] .ping { animation: ping 1.4s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(205,245,71,.9); } 100% { box-shadow: 0 0 0 14px rgba(205,245,71,0); } }
.scan { display: flex; gap: 6px; } .scan span { width: 40px; height: 6px; border-radius: 4px; background: var(--n200); }
.story-stage[data-step="1"] .scan span { animation: scan 1.2s infinite; } .scan span:nth-child(2) { animation-delay: .2s !important; } .scan span:nth-child(3) { animation-delay: .4s !important; }
@keyframes scan { 0%,100% { background: var(--n200); } 50% { background: var(--lime); } }
.ring-wrap { position: relative; width: 132px; height: 132px; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--n100); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--amber); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.story-stage[data-step="2"] .ring-fg, .story-stage[data-step="3"] .ring-fg, .story-stage[data-step="4"] .ring-fg { stroke-dashoffset: 48; }
.ring-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-num b { font-size: 2.2rem; letter-spacing: -.04em; color: var(--ink); line-height: 1; } .ring-num small { color: var(--n500); font-size: .75rem; }
.reasons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 380px; }
.chip { font-size: .8rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--n100); color: var(--n700); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.chip.amber { background: #fff3d4; color: #7a5a00; }
.story-stage[data-step="2"] .chip { opacity: 1; transform: none; }
.story-stage[data-step="2"] .chip:nth-child(2) { transition-delay: .5s; } .story-stage[data-step="2"] .chip:nth-child(3) { transition-delay: .7s; } .story-stage[data-step="2"] .chip:nth-child(4) { transition-delay: .9s; } .story-stage[data-step="2"] .chip:nth-child(1) { transition-delay: .3s; }
.call { width: min(100%, 400px); background: var(--paper); border-radius: 18px; padding: 14px; border: 1px solid var(--n200); }
.call-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--ink); }
.script { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.script li { background: var(--white); border-radius: 12px; padding: 8px 11px; font-size: .85rem; color: var(--n700); opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .4s; }
.story-stage[data-step="3"] .script li { opacity: 1; transform: none; }
.story-stage[data-step="3"] .script li:nth-child(2) { transition-delay: .4s; } .story-stage[data-step="3"] .script li:nth-child(3) { transition-delay: .8s; }
.call-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.call-acts span { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; }
.wa { background: #e7f8ee; color: #136c3c; } .dial { background: var(--ink); color: #fff; }
.outcomes2 { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.o { font-size: .85rem; font-weight: 600; padding: 9px 14px; border-radius: 12px; background: var(--n100); color: var(--n700); }
.o-yes { transition: background .3s .5s, color .3s .5s, transform .3s .5s; }
.story-stage[data-step="4"] .o-yes { background: var(--green); color: #fff; transform: scale(1.06); }
.stamp { font-weight: 800; font-size: 1.3rem; color: var(--green); border: 3px solid var(--green); border-radius: 12px; padding: 6px 16px; letter-spacing: -.01em;
  transform: rotate(-6deg) scale(1.6); opacity: 0; transition: transform .35s 1s cubic-bezier(.2,1.4,.4,1), opacity .2s 1s; }
.story-stage[data-step="4"] .stamp { transform: rotate(-6deg) scale(1); opacity: 1; }
.ss-progress { height: 4px; border-radius: 4px; background: var(--n200); margin: 12px 18px 0; overflow: hidden; }
.ss-progress i { display: block; height: 100%; width: 25%; background: var(--ink); transition: width .4s; }
.story-stage[data-step="2"] .ss-progress i { width: 50%; } .story-stage[data-step="3"] .ss-progress i { width: 75%; } .story-stage[data-step="4"] .ss-progress i { width: 100%; }
.story-steps { list-style: none; margin: 0; padding: 0; }
.story-steps li { padding: 28px 0 28px 56px; position: relative; opacity: .35; transition: opacity .4s; border-left: 2px solid var(--n200); margin-left: 18px; padding-left: 38px; }
@media (min-width: 960px) { .story-steps li { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; } }
.story-steps li.on { opacity: 1; border-left-color: var(--ink); }
.story-steps .sn { position: absolute; left: -19px; top: 28px; width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 2px solid var(--n200); display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
@media (min-width: 960px) { .story-steps .sn { top: 50%; transform: translateY(-50%); } }
.story-steps li.on .sn { background: var(--lime); border-color: var(--ink); }
.story-steps h3 { font-size: 1.35rem; margin-bottom: 8px; }
.story-steps p { color: var(--n700); margin: 0; }

/* BEFORE / AFTER */
.ba { background: var(--white); }
.ba-sub { color: var(--n500); margin-top: 10px; }
.ba-box { position: relative; margin: 34px auto 0; max-width: 980px; border-radius: 28px; overflow: hidden; border: 1px solid var(--n200); box-shadow: var(--shadow);
  touch-action: pan-y; user-select: none; }
.ba-pane { padding: 22px; min-height: 360px; }
.ba-before { background: #fbf5f2; }
.ba-after { position: absolute; inset: 0; background: #f2f8e4; clip-path: inset(0 0 0 var(--pos)); }
.ba-label { font-weight: 700; color: var(--ink); margin-bottom: 14px; font-size: 1.05rem; }
.ba-after .ba-label { text-align: right; }
.ba-orders { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.ba-orders li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--white); border-radius: 12px; padding: 10px 12px; font-size: .88rem; }
.ba-orders li span { margin-right: auto; font-weight: 600; color: var(--ink); }
.ba-orders em { font-style: normal; font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.st-ship { background: var(--n100); color: var(--n700); } .st-rto { background: #fde4de; color: #a8321f; }
.st-call { background: #fff3d4; color: #7a5a00; } .st-ok { background: #ddf3e6; color: #166b41; }
.ba-kpi { background: var(--white); border-radius: 16px; padding: 14px; display: grid; gap: 2px; max-width: 320px; }
.ba-after .ba-kpi { margin-left: auto; }
.ba-kpi span { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--n500); }
.ba-kpi b { font-size: 2rem; letter-spacing: -.04em; color: var(--ink); line-height: 1.1; }
.ba-kpi small { color: var(--n500); font-size: .8rem; }
.ba-kpi.good b { color: var(--green); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 44px; margin-left: -22px; border: 0; background: transparent; cursor: ew-resize; padding: 0; }
.ba-handle::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.ba-handle span { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 6px rgba(205,245,71,.6); }
.ba-handle span::before, .ba-handle span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; margin-top: -6px; }
.ba-handle span::before { left: 7px; border-right-color: #fff; } .ba-handle span::after { right: 7px; border-left-color: #fff; }
@media (max-width: 640px) { .ba-box { display: grid; gap: 0; } .ba-after { position: relative; clip-path: none; border-top: 1px solid var(--n200); } .ba-after .ba-label { text-align: left; } .ba-after .ba-kpi { margin-left: 0; } .ba-handle, .ba-sub { display: none; }
  .ba-pane { padding: 14px; min-height: 0; } .ba-orders li { font-size: .78rem; } .ba-kpi b { font-size: 1.6rem; } }

/* BENTO */
.bento { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; margin-top: 40px; }
.bento > * { min-width: 0; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .bento { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .b-score { grid-column: span 3; } .b-call { grid-column: span 3; } .b-ads { grid-column: span 2; } .b-pin { grid-column: span 2; } .b-ret, .b-ship { grid-column: span 1; } }
@media (min-width: 1000px) { .b-ret, .b-ship { grid-column: span 1; } .bento { grid-template-areas: none; } }
.b { display: flex; flex-direction: column; text-decoration: none; background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.5)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, var(--glass-shadow); border-radius: var(--r-xl); padding: 20px; transition: transform .35s var(--ease), box-shadow .35s; }
.b:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.b h3 { margin-top: auto; padding-top: 16px; } .b p { color: var(--n700); font-size: .92rem; margin: 6px 0 0; }
.b-vis { height: 120px; border-radius: var(--r-md); background: rgba(246,246,242,.75); position: relative; overflow: hidden; }
.meter2 { display: flex; align-items: flex-end; gap: 8px; padding: 16px; }
.meter2 i { flex: 1; height: 8%; border-radius: 6px 6px 3px 3px; background: #cfd3c9; transition: height .9s cubic-bezier(.2,.8,.2,1); }
.meter2 i.hi { background: var(--amber); } .meter2 i.hot { background: var(--red); }
.b.on .meter2 i { height: var(--h); }
.rows { display: grid; gap: 6px; padding: 12px; align-content: center; }
.rows span { display: flex; align-items: center; gap: 8px; background: var(--white); border-radius: 10px; padding: 6px 10px; font-size: .8rem; font-weight: 600; transform: translateX(30px); opacity: 0; transition: transform .5s, opacity .5s; }
.rows span:nth-child(2) { transition-delay: .15s; } .rows span:nth-child(3) { transition-delay: .3s; }
.b.on .rows span { transform: none; opacity: 1; }
.rows em { margin-left: auto; font-style: normal; font-size: .72rem; color: #7a5a00; background: #fff3d4; padding: 2px 8px; border-radius: 999px; }
.rows i.r { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); } .rows i.r.h { background: var(--red); }
.rows span:nth-child(2) em { color: #a8321f; background: #fde4de; }
.grades { display: flex; align-items: center; justify-content: center; gap: 8px; }
.grades .lg { margin-right: 6px; }
.g { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; transform: rotateY(90deg); transition: transform .5s; }
.b.on .g { transform: none; } .gB { transition-delay: .12s; } .gD { transition-delay: .24s; } .gF { transition-delay: .36s; }
.gA { background: #ddf3e6; color: #166b41; } .gB { background: #eef8d2; color: #4f6b00; } .gD { background: #fff3d4; color: #7a5a00; } .gF { background: #fde4de; color: #a8321f; }
.pins span { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg) translateY(-30px); opacity: 0; background: var(--green); transition: transform .5s, opacity .5s; }
.pins span.bad { background: var(--red); }
.pins span:nth-child(2) { transition-delay: .1s; } .pins span:nth-child(3) { transition-delay: .2s; } .pins span:nth-child(4) { transition-delay: .3s; } .pins span:nth-child(5) { transition-delay: .4s; }
.b.on .pins span { transform: rotate(-45deg); opacity: 1; }
.pins em { position: absolute; right: 10px; top: 10px; font-style: normal; font-size: .72rem; font-weight: 700; background: var(--ink); color: #fff; padding: 4px 9px; border-radius: 999px; }
.loop, .truck { display: grid; place-items: center; }
.b.on .loop svg { animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(-360deg); } }
.truck i { position: absolute; left: 10%; right: 10%; bottom: 30px; height: 2px; background: repeating-linear-gradient(90deg, var(--n200) 0 10px, transparent 10px 18px); }
.b.on .truck svg { animation: roll 2.4s ease-in-out infinite; }
@keyframes roll { 0%,100% { transform: translateX(-24px); } 50% { transform: translateX(24px); } }
@media (min-width: 1000px) { .b-ret .b-vis, .b-ship .b-vis { height: 120px; } }

/* TOUR */
.tour-box { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 40px; }
.tour-box > * { min-width: 0; }
@media (min-width: 960px) { .tour-box { grid-template-columns: minmax(0,.36fr) minmax(0,1fr); gap: 28px; align-items: start; } }
.tour-tabs { display: grid; gap: 8px; }
@media (max-width: 959px) { .tour-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); } .tour-tabs span { display: none; } }
.tour-tabs button { text-align: left; font: inherit; background: var(--white); border: 1px solid var(--n200); border-radius: 18px; padding: 14px 16px; cursor: pointer; position: relative; overflow: hidden; }
.tour-tabs b { display: block; color: var(--ink); } .tour-tabs span { font-size: .85rem; color: var(--n500); }
.tour-tabs button[aria-selected="true"] { border-color: var(--ink); }
.tour-tabs i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--lime); }
.tour-tabs button[aria-selected="true"] i { animation: fill var(--dur, 5s) linear forwards; }
@keyframes fill { to { width: 100%; } }
.tour-screens { position: relative; background: linear-gradient(180deg,#ffffff,#f4f6ef); border: 1px solid var(--n200); border-radius: var(--r-xl); padding: 12px; box-shadow: inset 0 1px 0 #fff, var(--glass-shadow); }
.ts { margin: 0; display: none; } .ts.on { display: block; animation: tsin .5s ease; }
.ts img { border-radius: 18px; width: 100%; }
@keyframes tsin { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

/* SETUP */
.setup-line { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; position: relative; }
@media (min-width: 860px) { .setup-line { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
  .setup-line::before { content: ""; position: absolute; left: 8%; right: 8%; top: 27px; height: 2px; background: var(--n200); }
  .setup-line::after { content: ""; position: absolute; left: 8%; top: 27px; height: 2px; background: var(--ink); width: 0; transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
  .setup-line.on::after { width: 84%; } }
.setup-line li { position: relative; text-align: center; }
.sl-ic { width: 56px; height: 56px; border-radius: 18px; background: var(--white); border: 1px solid var(--n200); display: grid; place-items: center; margin: 0 auto 14px; position: relative; z-index: 1; box-shadow: var(--shadow); }
.sl-ic img { width: 26px; height: 26px; }
.setup-line p { color: var(--n700); font-size: .95rem; max-width: 22em; margin: 8px auto 0; }
.trust2 { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
@media (min-width: 720px) { .trust2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .trust2 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.trust2 li { display: flex; gap: 10px; align-items: flex-start; background: var(--white); border: 1px solid var(--n200); border-radius: 18px; padding: 14px; font-size: .9rem; color: var(--n700); }
.trust2 svg { flex: none; margin-top: 2px; } .trust2 b { color: var(--ink); }

/* reveal */
.js [data-reveal], .js [data-hero] { opacity: 0; transform: translateY(22px); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-hero] { opacity: 1 !important; transform: none !important; }
  .ss-layer, .chip, .script li, .rows span, .g, .pins span, .wf li i, .rf-new { transition: none !important; }
}

/* hero waitlist (prelaunch): one quiet row, email + store + button */
.hero-wl { width: 100%; max-width: 640px; margin-top: 30px; padding: 8px; border-radius: 22px; }
.hero-wl .wl-form { max-width: none; }
.hero-wl .wl-fields { display: grid; gap: 8px; grid-template-columns: 1fr; }
.hero-wl .wl-fields input:not(.wl-hp) { height: 48px; border-radius: 14px; border: 1px solid rgba(16,20,15,.1); background: rgba(255,255,255,.8); padding: 0 16px; font: inherit; font-size: 1rem; color: var(--ink); min-width: 0; width: 100%; }
.hero-wl .wl-fields input::placeholder { color: var(--n500); }
.hero-wl .wl-fields input:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--ink); }
.hero-wl .wl-fields .btn { height: 48px; border-radius: 14px; justify-content: center; margin: 0; }
.hero-wl .wl-msg { margin: 6px 8px 2px; font-size: .9rem; text-align: left; }
.hero-wl .wl-msg:empty { display: none; }
@media (min-width: 720px) {
  .hero-wl .wl-fields { grid-template-columns: 1.1fr 1.2fr auto; }
  .hero-wl .wl-fields .btn { padding: 0 22px; grid-column: auto; }
  .hero-wl .wl-hp { grid-column: auto; position: absolute; }
}