/* BTFLY v12: the 50 point pass. Loaded last, so these rules win. */
:root{--fs-h2:clamp(38px,4.6vw,68px);--sec:clamp(88px,10vw,140px)}

/* 9. one heading scale for every section headline (the Metamorphosis title stays a display size) */
.stores h2,.cmp-head h2,.vs h2,.discover h2,.faq h2,.final h2{font-size:var(--fs-h2)!important;line-height:1.02!important}

/* 10. one vertical rhythm */
section.cmp{padding-top:calc(var(--sec)*.6);padding-bottom:var(--sec)}
section.vs{padding-top:var(--sec);padding-bottom:calc(var(--sec)*.45)}
section.discover{padding-top:calc(var(--sec)*.3);padding-bottom:var(--sec)}
section.faq{padding-top:var(--sec);padding-bottom:var(--sec)}

/* 4. nav: where you are, and how far down */
.bar__prog{position:absolute;left:30px;right:30px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,#ff7a2e,#ff5a06);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:3;pointer-events:none;opacity:.95}
.bar .links a.on{opacity:1;text-decoration:underline;text-decoration-color:#ff6a1f;text-decoration-thickness:2px;text-underline-offset:7px}
@media (max-width:900px){.bar__prog{left:22px;right:22px;bottom:3px}}

/* 2. phone: a slim join bar after the hero, out of the way near the forms and the pinned walkthrough */
.dock{display:none}
@media (max-width:700px){
  .dock{display:flex;position:fixed;z-index:90;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;border-radius:16px;background:#160500;color:#fbf6ee;font:500 13px/1.3 var(--sans);transform:translateY(calc(100% + 24px));opacity:0;transition:transform .45s var(--ease),opacity .3s}
  .dock span{max-width:15em}
  .dock .btn{flex:none}
  .dock.show{transform:none;opacity:1}
  :root[data-theme=dark] .dock{background:#fbf6ee;color:#160500}
}

/* 3. skip link */
.mv__skip{display:inline-block;margin-top:18px;font:600 14.5px/1.2 var(--sans);color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--o2,#ff5a06);text-decoration-thickness:2px;text-underline-offset:5px}
.mv__skip:hover{color:var(--ink)}

/* 22. why each move sells */
.step .why{margin:14px 0 0;max-width:24em;padding-left:14px;border-left:2px solid #ff5a06;font:500 16px/1.5 var(--sans);color:var(--ink)}
@media (max-width:899px){.step .why{font-size:15px;margin-top:10px}}

/* 14. stage glyphs on the tabs */
.phases .pg{display:inline-block;width:18px;height:12px;margin-right:7px;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.phases span[data-p="0"] .pg circle{fill:currentColor;stroke:none}
.phases span[data-p="1"] .pg{width:10px;height:14px;vertical-align:-2px}
.phases span[data-p="2"] .pg{width:18px;height:14px;vertical-align:-2px}
@media (max-width:899px){.phases .pg{width:15px;margin-right:5px}.phases span[data-p="1"] .pg{width:9px}}

/* 31. the BTFLY cursor */
.mvcur{position:absolute;z-index:6;left:60%;top:30%;opacity:0;pointer-events:none;transform:scale(calc(1 / var(--zs,1)));transform-origin:0 0;transition:left .55s var(--ease),top .55s var(--ease),opacity .3s}
.mv__stage.st-m .mvcur{opacity:1}
.mvcur svg{display:block;width:20px;height:24px;fill:#160500;stroke:#fff;stroke-width:1.4;stroke-linejoin:round;transform-origin:3px 3px}
.mvcur span{position:absolute;left:15px;top:19px;padding:4px 7px;border-radius:6px;background:linear-gradient(180deg,#ff7a2e,#ff5a06);color:#160500;font:700 11px/1 var(--sans);letter-spacing:.02em;white-space:nowrap}
.mvcur span{opacity:0}
.mvcur.tap svg{animation:curTap .34s var(--ease)}
.mvcur.tap span{animation:curTag 1.5s var(--ease) both}
@keyframes curTag{0%{opacity:0;transform:translateY(-4px)}15%,70%{opacity:1;transform:none}100%{opacity:0}}
@keyframes curTap{50%{transform:scale(.8)}}

/* 32. the scan edge that leads each rebuild */
.mvedge{position:absolute;z-index:5;left:var(--ex0,0);top:var(--ey,0);height:var(--eh,100%);width:calc(2px / var(--zs,1));background:#ff5a06;opacity:0;pointer-events:none}
.mvedge::before{content:"";position:absolute;right:100%;top:0;bottom:0;width:calc(70px / var(--zs,1));background:linear-gradient(90deg,transparent,rgba(255,106,31,.2))}
.mvedge.run{animation:edgeRun .9s var(--ease) .5s both}
@keyframes edgeRun{0%{left:var(--ex0);opacity:1}90%{opacity:1}100%{left:var(--ex1);opacity:0}}

/* 36. counter tick */
.mv__count.tick{animation:tick .4s var(--ease)}
@keyframes tick{from{transform:translateY(7px);opacity:0}}

/* 12 + 13. calmer glow on phones, and a deliberate surface behind the zoomed out page */
@media (max-width:899px){
  .mv__atmo{opacity:.4}
  .mvscreen{background:radial-gradient(circle at 1px 1px,rgba(22,5,0,.13) 1px,transparent 1.5px) 0 0/12px 12px,#efebe3!important}
  :root[data-theme=dark] .mvscreen{background:radial-gradient(circle at 1px 1px,rgba(251,246,238,.12) 1px,transparent 1.5px) 0 0/12px 12px,#1a130e!important}
  /* 33. scan line on the phone Crawl too */
  .mvz .scanline{display:block!important}
}

/* 34. the phone Fly moment */
.flyb{display:block;width:46px;height:38px;margin:0 0 10px}
.flyb svg{display:block;width:100%;height:100%;fill:#ff6a1f;overflow:visible}
.flyb .b{fill:none;stroke:#a83a04;stroke-width:2.4;stroke-linecap:round}
.flyb.go{animation:flyLift 1.8s var(--ease) both}
.flyb.go svg{animation:flap .42s ease-in-out 5}
@keyframes flyLift{0%{transform:translate(-14px,22px) rotate(-8deg);opacity:0}30%{opacity:1}100%{transform:none}}
@keyframes flap{50%{transform:scaleX(.35)}}

/* 15. comparison table becomes stacked cards on phones */
@media (max-width:700px){
  .vs-table{display:grid;gap:10px}
  .vs-row.vs-top{display:none!important}
  .vs-row{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-areas:"k k" "o b";gap:10px 8px;padding:16px!important;border:1px solid var(--line)!important;border-radius:14px;background:var(--bg)}
  .vs-row>span{padding:0!important}
  .vs-row .vs-k{grid-area:k;font:600 16px/1.35 var(--sans)!important;color:var(--ink)}
  .vs-row .vs-o,.vs-row .vs-b{grid-area:auto;justify-content:flex-start!important;align-items:center;gap:8px;padding:9px 12px!important;border-radius:10px;font:500 13px/1 var(--sans)!important}
  .vs-row .vs-o{grid-area:o;background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink-2)}
  .vs-row .vs-b{grid-area:b;background:color-mix(in srgb,#ff6a1f 12%,transparent)!important;color:var(--ink)}
  .vs-row .vs-o::before{content:"AI builders";order:2}
  .vs-row .vs-b::before{content:"BTFLY";order:2;font-weight:700}
  .vs-row .vs-y,.vs-row .vs-x{width:18px;height:18px;order:1}
}

/* 16. logo grid comes alive on hover and tap */
.stackx__logos li{transition:background .25s var(--ease)}
.stackx__logos li svg{transition:opacity .25s var(--ease),transform .25s var(--ease)}
.stackx__logos li:hover,.stackx__logos li:active{background:color-mix(in srgb,#ff6a1f 7%,var(--bg))}
.stackx__logos li:hover svg,.stackx__logos li:active svg{opacity:1;transform:translateY(-2px)}

/* 17 + 18. store tiles: name on hover, tap for a closer look. No shadows behind store shots */
.tile{box-shadow:none!important;outline:1px solid var(--line);outline-offset:-1px}
.stores__art{z-index:0!important}
.stores__scrim{z-index:1!important}
.stores__in{position:relative;z-index:2;pointer-events:none}
.stores__in>*{pointer-events:auto}
.stores__art .tile{cursor:zoom-in}
.tlabel{position:fixed;z-index:80;pointer-events:none;padding:6px 10px;border-radius:8px;background:#160500;color:#fbf6ee;font:600 13px/1.2 var(--sans);opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s}
.tlabel.on{opacity:1;transform:none}
.tlabel small{display:block;font-weight:500;opacity:.7;margin-top:2px}
@media (max-width:700px){.lane__track{animation-duration:calc(var(--dur,70s) * 1.7)}}
.qv{width:min(1040px,calc(100vw - 32px));max-height:calc(100svh - 48px);padding:0;border:0;border-radius:18px;background:var(--bg);color:var(--ink);overflow:auto}
.qv::backdrop{background:rgba(15,8,4,.62)}
.qv-in{position:relative;padding:clamp(20px,3vw,32px)}
.qv h3{margin:0;font:600 clamp(26px,3vw,36px)/1.05 var(--serif);letter-spacing:-.02em}
.qv-cat{margin:6px 0 0;font:500 15px/1.4 var(--sans);color:var(--ink-2)}
.qv-shots{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:20px}
.qv-shots img{display:block;width:100%;height:auto;border-radius:10px;outline:1px solid var(--line);outline-offset:-1px}
.qv-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);font:400 26px/1 var(--sans);cursor:pointer}
@media (max-width:700px){.qv-shots{grid-template-columns:1fr 1fr}.qv-shots .qv-d{grid-column:1/-1}}

/* 19. one button feel everywhere */
.btn{transition:transform .15s var(--ease),filter .2s,box-shadow .2s}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px) scale(.98)}
a:focus-visible,button:focus-visible,summary:focus-visible,[role=tab]:focus-visible,input:focus-visible{outline:2px solid #ff5a06;outline-offset:3px}

/* 20. footer in one clean row on desktop */
@media (min-width:901px){
  .foot .wrapx{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:64px}
  .foot-legal{grid-column:1/-1}
}

/* 8. the beta status chip */
.seats{display:flex;width:max-content;max-width:100%;align-items:center;gap:9px;margin:0 auto 22px;padding:8px 15px;border-radius:999px;background:color-mix(in srgb,#ff6a1f 12%,transparent);font:600 13.5px/1.3 var(--sans);color:var(--ink)}
.seats i{flex:none;width:8px;height:8px;border-radius:50%;background:#ff5a06;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(255,90,6,0)}0%,100%{box-shadow:0 0 0 0 rgba(255,90,6,.45)}}

/* 37. one entrance for every section */
.rv2{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.rv2.in{opacity:1;transform:none}

/* 40. form success: the button checks, a small butterfly lifts off */
.join{position:relative}
.join.ok button[type=submit]{color:transparent!important;position:relative}
.join.ok button[type=submit]::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:9px;border-left:3px solid #160500;border-bottom:3px solid #160500;transform:translate(-50%,-70%) rotate(-45deg);animation:chk .35s var(--ease) both}
@keyframes chk{from{transform:translate(-50%,-70%) rotate(-45deg) scale(.3);opacity:0}}
.join .lift{position:absolute;right:28px;top:-6px;width:30px;height:26px;pointer-events:none;animation:liftOff 1.2s var(--ease) both}
.join .lift svg{width:100%;height:100%;fill:#ff6a1f;animation:flap .3s ease-in-out 4}
@keyframes liftOff{0%{transform:translate(0,10px) scale(.6);opacity:0}25%{opacity:1}100%{transform:translate(40px,-90px) rotate(14deg);opacity:0}}
.join input[aria-invalid=true]{box-shadow:inset 0 0 0 2px #d93a00}

/* 41. reduced motion: everything new sits still */
@media (prefers-reduced-motion:reduce){
  .mvcur,.mvedge,.mv__count.tick,.flyb.go,.flyb.go svg,.join .lift,.join .lift svg,.seats i,.dock{animation:none!important;transition:none!important}
  .mvedge{display:none}
  .rv2{opacity:1;transform:none;transition:none}
  .lane__track{animation-play-state:paused}
}

/* v13: the walkthrough runs on the real phone pages everywhere. Desktop shows them in a phone sized window */
.mvz .sa,.mvz .sb,.mvz .col:not(.pcol),.finds:not(.pfinds){display:none!important}
.mvz .pa{display:block!important;position:relative;inset:auto;width:100%;height:auto}
.mvz .pb{display:block!important;position:absolute;inset:0 auto auto 0;width:100%;height:auto;opacity:0;transition:opacity .8s var(--ease)}
.mv__stage[data-k=fly] .mvz .pb{opacity:1}
.mvz .pcol{display:block!important;position:absolute;left:0;top:50.92%!important;width:100%;height:49.08%!important}
.pfinds{display:block!important}
.mvscreen{background:radial-gradient(circle at 1px 1px,rgba(22,5,0,.13) 1px,transparent 1.5px) 0 0/12px 12px,#efebe3}
:root[data-theme=dark] .mvscreen{background:radial-gradient(circle at 1px 1px,rgba(251,246,238,.12) 1px,transparent 1.5px) 0 0/12px 12px,#1a130e}
@media (min-width:900px){
  .mv__stage{width:min(420px,calc((100vh - 300px) * .6));margin:0 auto;padding-left:0}
  .phases{left:0;gap:20px}
  .mv__tag{left:0}
  .fly-d{left:-130px;right:-130px}
  .mvwin{max-width:none!important;width:100%}
  .mvscreen{aspect-ratio:390/500}
  .mvscreen .mvz{inset:auto;top:0;left:0;width:100%;height:auto}
}

/* stores: say the tiles open */
.stores__hint{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:8px 14px 8px 11px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent);font:600 14px/1.2 var(--sans);color:var(--ink)}
.stores__hint svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;animation:hintTap 2.4s var(--ease) infinite}
@keyframes hintTap{0%,70%,100%{transform:none}80%{transform:translateY(2px) scale(.92)}}
@media (prefers-reduced-motion:reduce){.stores__hint svg{animation:none}}
@media (max-width:700px){.cmp-frame[data-k=doughbriks] .cmp-a,.cmp-frame[data-k=doughbriks] .cmp-b{object-position:100% 0}}

/* v14 order: hero / stores / Metamorphosis / why different / found by AI / before and after / your stack / FAQ / join */
section.cmp{padding-top:calc(var(--sec)*.5)}
section.proof{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(8px,2vw,24px)}
.cmp-cta{margin-top:24px}