/* BTFLY v7: the sections that finish the master prototype (paths, FAQ, closing band, footer) plus the creature marks.
   Uses the master's tokens only. Radii 4 / 8 / 10 / 16. No pills. */
.wrapx{width:min(100% - 32px,1160px);margin:0 auto}
.paths,.faq{padding:clamp(72px,9vw,128px) 0}
.paths h2,.faq h2,.final h2{margin:0;font:600 clamp(40px,5vw,72px)/1 var(--serif);letter-spacing:-.035em;font-variation-settings:"opsz" 48;color:var(--ink)}
.paths h2 em,.final h2 em,.faq h2 em{font-style:italic;color:var(--em)}
.path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.path{display:flex;flex-direction:column;gap:12px;padding:26px 24px 24px;border-radius:16px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s}
.path:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1.5px var(--o2),0 30px 60px -36px rgba(22,5,0,.45)}
:root[data-theme=dark] .path{background:#17100b}
.path .pico{width:44px;height:36px;color:var(--o2)}
.path b{font:600 20px/1.3 var(--sans)}
.path span{font:400 15px/1.55 var(--sans);color:var(--ink-2)}
.path i{margin-top:auto;padding-top:8px;font:600 15px/1 var(--sans);font-style:normal;color:var(--o2)}
.path i::after{content:" \2192"}
.faq{background:color-mix(in srgb,var(--ink) 4%,var(--bg))}
:root[data-theme=dark] .faq{background:#120c08}
.faq-list{margin-top:32px;max-width:760px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font:600 17px/1.35 var(--sans);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);font:400 20px/1 var(--sans);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;max-width:62ch;font:400 16px/1.6 var(--sans);color:var(--ink-2)}
.faq-note{margin:20px 0 0;font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.faq-note a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--o2);text-underline-offset:4px}
.faq-toggle{display:none}
@media (max-width:700px){
  .faq .faq-more{display:none}
  .faq-list.show-all .faq-more{display:block}
  .faq-toggle{display:inline-flex;margin-top:16px;padding:0;border:0;background:none;font:600 15px/1 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--o2);text-underline-offset:5px;text-decoration-thickness:2px;cursor:pointer}
  .faq-toggle::after{content:" \2193"}
  .faq-list.show-all .faq-toggle{display:none}
}
/* closing band */
.final{position:relative;isolation:isolate;overflow:hidden;padding:clamp(96px,12vw,160px) 0;text-align:center;background:var(--bg)}
.final .atmo2{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;background:var(--field) 50% 50%/cover no-repeat,var(--waves) 50% 50%/cover no-repeat}
.final .wrapx{max-width:720px}
.final h2{text-wrap:balance}
.join-final{max-width:520px;margin:32px auto 0}
:root[data-theme=dark] .join-final{background:#17100b;border-color:rgba(251,246,238,.14)}
:root[data-theme=dark] .join-final input{color:var(--ink)}
:root[data-theme=dark] .join-final input::placeholder{color:#a89c92}
.join-final input{min-height:52px}
.fine2{margin:16px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-2)}
.fine2 a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--o2);text-underline-offset:4px}
.fine.alt{margin-top:10px;font:400 14px/1.5 var(--sans);color:var(--ink-2)}
.fine.alt a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--o2);text-underline-offset:4px}
/* footer */
.foot{background:#0a0604;color:#f6f5ee;padding:56px 0 28px}
.foot .wrapx{display:grid;grid-template-columns:1.2fr 2fr;gap:40px}
.foot-brand img{height:24px;width:auto}
.foot-brand p{margin:14px 0 0;max-width:24ch;font:600 16px/1.4 var(--sans)}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot h4{margin:0 0 10px;font:600 14px/1 var(--sans);color:#a89c92}
.foot-cols a{display:block;color:#f6f5ee;text-decoration:none;font:400 15px/2 var(--sans);opacity:.9}
.foot-cols a:hover{opacity:1;text-decoration:underline;text-decoration-color:var(--o2);text-underline-offset:4px}
.foot-legal{grid-column:1/-1;display:flex;justify-content:space-between;margin:32px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font:400 12px/1 var(--sans);color:#a89c92}
@media (max-width:1023px){
  .path-grid{grid-template-columns:1fr}
  .foot .wrapx{grid-template-columns:1fr;gap:28px}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .path-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:28px -16px 0;padding:0 16px 8px;scrollbar-width:none}
  .path-grid::-webkit-scrollbar{display:none}
  .path{flex:0 0 80%;scroll-snap-align:center}
}
/* creature marks in the story */
.mark{display:block;color:var(--o2);margin:0 0 14px}
.mark-cat{width:88px;height:44px}
.mark-pod{width:48px;height:62px}
.mark-bf{width:72px;height:60px}
.cocoon__head .mark{margin:0 0 8px}
.phases .pg,.cstrip .pg{width:22px;height:16px;vertical-align:-3px;margin-right:6px;color:currentColor}
.phases span[data-p="1"] .pg{width:12px;height:16px}
.phases span[data-p="2"] .pg{width:18px;height:16px}
@media (max-width:1023px){.mark-cat{width:72px;height:36px}.mark-pod{width:40px;height:52px}.mark-bf{width:60px;height:50px}}

/* v7.1: the monarch moved to the closing band */
.final .mv__bf{max-width:300px;margin:-24px auto 4px;order:0}
.final .mv__bf .glow{inset:-14%}
@media (max-width:1023px){.final .mv__bf{max-width:240px;margin:-16px auto 0}}
/* v7.1: lifecycle loop in the Metamorphosis intro. Crawl, pupate, emerge, fly, repeat. 16s. */
.lc{position:relative;width:100%;max-width:560px;aspect-ratio:600/400;justify-self:center;overflow:visible;--T:16s}
.lc svg{display:block;overflow:visible}
.lc-branch{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-opacity:.55;stroke-linecap:round}
.lc-cat,.lc-pod,.lc-bf,.lc-burst{position:absolute;color:var(--o2);will-change:transform,opacity}
.lc-cat{left:0;top:38.5%;width:15%;aspect-ratio:131/92;opacity:0;animation:lc-cat var(--T) linear infinite}
.lc-cat .inch{width:100%;height:100%;transform-origin:100% 100%;animation:lc-inch .72s ease-in-out infinite}
.lc-cat svg{width:100%;height:100%}
.lc-pod{left:50%;top:50%;width:9.5%;aspect-ratio:105/155;margin-left:-4.75%;transform-origin:50% 0;opacity:0;animation:lc-pod var(--T) ease-in-out infinite}
.lc-pod svg{width:100%;height:100%}
.lc-burst{left:50%;top:58%;width:0;height:0}
.lc-burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--o1);opacity:0;transform:rotate(var(--a)) translateX(0);animation:lc-burst var(--T) ease-out infinite}
.lc-bf{left:50%;top:58%;width:30%;aspect-ratio:1;margin:-15% 0 0 -15%;opacity:0;transform-origin:50% 50%;animation:lc-bf var(--T) ease-in-out infinite}
.lc-bf .hover{width:100%;height:100%;animation:lc-hover 2.4s ease-in-out infinite}
.lc-bf svg{width:100%;height:100%}
:root[data-theme=dark] .lc-bf .bd,:root[data-theme=dark] .lc-bf g[stroke]{fill:#d0560f;stroke:#d0560f}
:root[data-theme=dark] .lc-bf g[stroke]{fill:none}
@keyframes lc-inch{0%,100%{transform:scaleX(1) translateY(0)}50%{transform:scaleX(.84) translateY(-2%)}}
@keyframes lc-cat{
  0%{opacity:0;transform:translateX(-40%)}
  3%{opacity:1}
  28%{opacity:1;transform:translateX(260%) translateY(0) rotate(0)}
  31%{opacity:1;transform:translateX(265%) translateY(22%) rotate(28deg) scale(.9)}
  34%,100%{opacity:0;transform:translateX(265%) translateY(60%) rotate(60deg) scale(.5)}
}
@keyframes lc-pod{
  0%,31%{opacity:0;transform:scaleY(.3) scaleX(.6)}
  36%{opacity:1;transform:scale(1) rotate(0)}
  44%{transform:rotate(3deg)}52%{transform:rotate(-3deg)}58%{transform:rotate(2deg)}
  62%{opacity:1;transform:rotate(0) scale(1.06)}
  65%{opacity:1;transform:scale(1.1,.96)}
  69%,100%{opacity:0;transform:scale(.9,1.1)}
}
@keyframes lc-burst{
  0%,62%{opacity:0;transform:rotate(var(--a)) translateX(0)}
  64%{opacity:1}
  72%,100%{opacity:0;transform:rotate(var(--a)) translateX(90px)}
}
@keyframes lc-bf{
  0%,63%{opacity:0;transform:translate(0,0) scale(.15) rotate(0)}
  68%{opacity:1;transform:translate(0,0) scale(.7) rotate(0)}
  74%{opacity:1;transform:translate(0,-6%) scale(1) rotate(0)}
  80%{opacity:1;transform:translate(14%,-28%) scale(1) rotate(10deg)}
  88%{opacity:1;transform:translate(60%,-90%) scale(.9) rotate(22deg)}
  94%,100%{opacity:0;transform:translate(120%,-150%) scale(.75) rotate(30deg)}
}
@keyframes lc-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}
@media (max-width:1023px){.lc{max-width:360px;order:2;margin-top:8px}}
@media (prefers-reduced-motion:reduce){
  .lc *,.lc-cat .inch,.lc-bf .hover{animation:none!important}
  .lc-cat{opacity:1;transform:translateX(30%)}
  .lc-pod{opacity:1}
  .lc-bf{opacity:1;transform:translate(90%,-70%) scale(.9) rotate(18deg)}
}

/* v7.3: the five moves on phones are live blocks, not inverted screenshots. Same width before and after so the delta reads. */
.pair.live .crop{padding:16px 16px 18px;min-height:0}
.ex{display:flex;flex-direction:column;gap:6px;font-family:var(--sans)}
.ex-b{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#161616}
:root[data-theme=dark] .ex-b{color:#ece6df}
.ex-k{font:400 11px/1.3 inherit;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b}
:root[data-theme=dark] .ex-k{color:#a39a92}
.ex-t{font:400 22px/1.2 inherit}
.ex-b .ex-p{font:400 18px/1.3 inherit;margin-top:2px}
.ex-b .ex-s{font:400 12px/1.4 inherit;color:#6b6b6b}
:root[data-theme=dark] .ex-b .ex-s{color:#a39a92}
.ex-qty{display:inline-flex;align-items:center;width:132px;height:44px;margin-top:2px;border:1px solid #c9c9c9;font:400 16px/1 inherit}
.ex-qty i,.ex-qty b{flex:1;text-align:center;font-style:normal;font-weight:400}
:root[data-theme=dark] .ex-qty{border-color:#4a403a}
.ex-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 16px;font:400 15px/1 inherit}
.ex-btn.ghost{border:1px solid #161616}
:root[data-theme=dark] .ex-btn.ghost{border-color:#ece6df}
.ex-btn.solid{background:#5b4bd6;color:#fff}
.ex-a{color:var(--ink)}
.ex-h{margin:0;font:600 clamp(24px,6.6vw,30px)/1.02 var(--serif);letter-spacing:-.03em;font-variation-settings:"opsz" 48}
.ex-h em{font-style:italic;font-weight:500}
.ex-a .ex-s{font:400 13px/1.45 var(--sans);color:var(--ink-2)}
.ex-a .ex-p{font:600 20px/1.2 var(--sans);letter-spacing:-.01em}
.ex-a .ex-p s,.ex-opt em s{font-weight:400;color:var(--ink-2);text-decoration-color:var(--o2)}
.ex-stars{display:flex;align-items:center;gap:3px;color:var(--o2)}
.ex-stars svg{width:15px;height:15px;fill:currentColor}
.ex-stars small{margin-left:6px;font:600 12px/1 var(--sans);color:var(--ink)}
.ex-opt{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:10px;border:1px solid var(--line);font-family:var(--sans)}
.ex-opt.on{border-color:var(--o2);box-shadow:inset 0 0 0 1px var(--o2);background:color-mix(in srgb,var(--o1) 7%,transparent)}
.ex-opt span{display:flex;flex-direction:column;gap:3px;min-width:0}
.ex-opt b{font:600 14px/1.2 var(--sans)}
.ex-opt small{font:400 12px/1.4 var(--sans);color:var(--ink-2)}
.ex-opt em{font:600 15px/1.2 var(--sans);font-style:normal;text-align:right;white-space:nowrap}
.ex-opt em s{display:block;font-size:12px}
.ex-r{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink-2);box-sizing:border-box}
.ex-opt.on .ex-r{border:5px solid var(--o2)}
.ex-btn.bag{border-radius:10px;background:var(--ink);color:var(--bg);font:600 15px/1 var(--sans);min-height:50px;justify-content:center;position:relative}
.ex-btn.bag b{font-weight:600}
.ex-btn.bag svg{position:absolute;right:14px;width:18px;height:18px}
:root[data-theme=dark] .ex-btn.bag{background:#f6efe6;color:#160b05}
.ex-trust{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font:500 11px/1.3 var(--sans);color:var(--ink-2);text-align:center}
.ex-trust span{display:flex;align-items:center;gap:5px}
@media (max-width:360px){.ex-trust{flex-wrap:wrap}}

/* v7.4: the desktop story card carries the live BTFLY blocks */
.mv__before .bex .ex{gap:6px}
.mv__before .bex .ex-h{font-size:clamp(22px,1.8vw,28px)}
.mv__before.pop .bx.on{animation:bxin .5s var(--ease)}
@keyframes bxin{from{opacity:0;transform:translateY(8px)}}

.foot-legal .build,.foot-copy .build{font-style:normal;opacity:.55;margin-left:10px}

/* v7.6: discover. Found by people and by AI. */
.discover{padding:clamp(72px,9vw,128px) 0;background:color-mix(in srgb,var(--ink) 4%,var(--bg))}
:root[data-theme=dark] .discover{background:#120c08}
.discover__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.discover h2{margin:0;font:600 clamp(40px,5vw,72px)/1 var(--serif);letter-spacing:-.035em;font-variation-settings:"opsz" 48;color:var(--ink);text-wrap:balance}
.discover h2 em{font-style:italic;color:var(--em)}
.discover__lede{margin:22px 0 0;max-width:46ch;font:400 clamp(17px,1.3vw,19px)/1.5 var(--sans);color:var(--ink-2)}
.discover__note{margin:14px 0 0;max-width:46ch;font:500 15px/1.5 var(--sans);color:var(--ink)}
.discover__link{display:inline-block;margin-top:22px;font:600 16px/1 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--o2);text-underline-offset:5px;text-decoration-thickness:2px}
.discover__link::after{content:" \2192"}
.answer{position:relative;padding:22px;border-radius:16px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -48px rgba(22,5,0,.45)}
:root[data-theme=dark] .answer{background:#17100b;box-shadow:inset 0 0 0 1px rgba(244,237,227,.12),0 40px 80px -40px rgba(0,0,0,.8)}
.answer__chip{position:absolute;top:-32px;left:0}
.answer__ask{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 16px 14px;border-radius:10px;background:color-mix(in srgb,var(--ink) 5%,var(--bg));font:600 17px/1.3 var(--sans);color:var(--ink);min-height:54px;position:relative}
.answer__caret{position:absolute;right:14px;bottom:16px}
:root[data-theme=dark] .answer__ask{background:#211711}
.answer__you{flex:none;height:24px;padding:0 9px;border-radius:6px;background:var(--ink);color:var(--bg);font:600 11px/24px var(--sans);letter-spacing:.03em;text-transform:uppercase}
:root[data-theme=dark] .answer__you{background:#f4ede3;color:#160500}
.answer__caret{width:2px;height:18px;background:var(--o2);animation:blink 1s steps(2) infinite}
.answer.typed .answer__caret{display:none}
@keyframes blink{50%{opacity:0}}
.answer__reply{display:flex;gap:12px;align-items:flex-start;padding:18px 4px 6px;font:400 16px/1.55 var(--sans);color:var(--ink-2);opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.answer.typed .answer__reply{opacity:1;transform:none}
.answer__reply b{color:var(--ink);font-weight:600}
.answer__ai{flex:none;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--o1) 18%,transparent);display:grid;place-items:center;color:var(--o2)}
.answer__ai svg{width:18px;height:16px}
.answer__cite{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:5px 10px 5px 6px;border-radius:6px;background:color-mix(in srgb,var(--ink) 5%,var(--bg));box-shadow:inset 0 0 0 1px var(--line);font:600 13px/1 var(--sans);color:var(--ink)}
.answer__cite i{width:16px;height:16px;border-radius:50%;background:var(--o2);color:#160500;display:grid;place-items:center;font:700 10px/1 var(--sans);font-style:normal}
.answer__facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;opacity:0;transition:opacity .5s .25s}
.answer.typed .answer__facts{opacity:1}
.answer__facts span{padding:6px 10px;border-radius:6px;background:color-mix(in srgb,var(--o1) 10%,transparent);font:600 13px/1 var(--sans);color:var(--ink)}
.answer__where{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.answer__where small{width:100%;font:500 12px/1 var(--sans);color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.answer__where span{padding:6px 10px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line);font:600 13px/1 var(--sans);color:var(--ink-2)}
@media (max-width:1023px){.discover__grid{grid-template-columns:1fr;gap:56px}.answer{margin-top:8px}}
@media (max-width:700px){.answer{padding:16px}.answer__ask{font-size:15px}}