/* Macrocherry Design System v0.6 · Workflow pages (loaded after mc.css) */

/* ---- Hero: white, text left, video right ---- */
.wf-hero{display:grid;grid-template-columns:1fr 1.1fr;position:relative;}
.wf-hero .hero-left{padding:54px 48px 58px 64px;}
.wf-hero .hero-left h1{font-size:clamp(40px,4.7vw,72px);}
.wf-hero .hero-left h1 .serif{font-size:1.28em;}
.wf-hero .vbox{position:relative;display:flex;align-items:center;justify-content:center;padding:58px 56px 62px 44px;
  background:
    radial-gradient(420px 320px at 60% 50%, rgba(142,141,255,.30), transparent 70%),
    radial-gradient(320px 260px at 35% 70%, rgba(255,163,228,.22), transparent 70%);}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--ink);box-shadow:12px 12px 0 var(--ink);}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.hero .pill{margin-top:0;}
@media(max-width:960px){
  .wf-hero{grid-template-columns:1fr;}
  .wf-hero .hero-left{border-right:none;border-bottom:1px solid rgba(10,10,14,.75);padding:48px 24px 44px;}
  .wf-hero .vbox{padding:40px 24px 48px 18px;}
  .video-frame{box-shadow:8px 8px 0 var(--ink);}
}

/* ---- Offer strip ---- */
.offer-sec{padding:56px 32px 60px;border-top:none;}
.offer{border:1px solid rgba(255,255,255,.4);background:rgba(4,4,9,.74);}
.offer h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(18px,1.9vw,23px);line-height:1.04;
  background:var(--holo);color:var(--ink);padding:15px 28px 16px;border-bottom:1px solid rgba(255,255,255,.8);}
.offer .orow{display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap;padding:22px 28px 24px;}
.offer .otext{flex:1;min-width:240px;font-size:15px;color:var(--dim);}
.offer .otext strong{color:#fff;font-weight:600;}
.code-chip{cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.16em;
  color:#fff;border:1px dashed rgba(180,155,255,.9);padding:11px 18px;background:rgba(142,141,255,.10);
  transition:background .15s ease,box-shadow .2s ease;}
.code-chip:hover{background:rgba(142,141,255,.22);box-shadow:0 0 22px rgba(180,155,255,.45);}
.code-chip small{font-size:9.5px;font-weight:500;letter-spacing:.16em;color:var(--lilac);margin-left:10px;}
.offer .pill{margin-top:0;}

/* ---- Steps ---- */
.steps{display:grid;gap:22px;max-width:960px;}
.step{border:1px solid rgba(255,255,255,.4);background:rgba(4,4,9,.74);color:#fff;padding:26px 28px 28px;position:relative;
  transition:border-color .18s ease,background .18s ease;}
.step:hover{border-color:rgba(255,255,255,.8);background:rgba(0,0,0,.85);}
.step h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(19px,2vw,24px);line-height:1.04;
  display:flex;align-items:center;gap:16px;background:var(--holo);color:var(--ink);
  padding:14px 28px 15px;margin:-27px -29px 20px -29px;border-bottom:1px solid rgba(255,255,255,.8);}
.step h3 .n{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.1em;
  border:1px solid var(--ink);padding:5px 9px;line-height:1;}
.step .kicker{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lilac);margin-bottom:14px;display:block;}
.step p{font-size:15px;color:var(--dim);margin-bottom:12px;max-width:72ch;}
.step p:last-child{margin-bottom:0;}
.step p strong{color:#fff;font-weight:600;}
.step a.inline{color:#fff;text-decoration:none;border-bottom:1px solid var(--lilac);}
.step a.inline:hover{color:var(--lilac);}
.prompt{position:relative;cursor:pointer;margin:14px 0 4px;border:1px solid rgba(255,255,255,.35);background:#050409;padding:16px 18px 17px;
  transition:border-color .18s ease,box-shadow .2s ease;}
.prompt:hover{border-color:var(--lilac);box-shadow:0 0 0 1px var(--lilac),0 0 28px rgba(180,155,255,.35);}
.prompt .plabel{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);margin-bottom:9px;}
.prompt .plabel b{color:var(--lilac);font-weight:500;}
.prompt code{display:block;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.65;color:#E4DBFF;white-space:pre-wrap;}
.prompt.copied{border-color:var(--ice);box-shadow:0 0 0 1px var(--ice),0 0 28px rgba(155,216,255,.45);}
.protip{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:14px 16px;border:1px solid rgba(180,155,255,.45);background:rgba(142,141,255,.08);}
.protip img{width:16px;height:16px;margin-top:4px;flex-shrink:0;}
.protip p{margin:0!important;font-size:14px;}
.protip p b{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lilac);font-weight:500;margin-right:8px;}
.step .note{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--dimmer);margin-top:12px;}
.step .note strong{color:var(--dim);}

/* ---- Toast ---- */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(200%);visibility:hidden;
  background:var(--ice);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 24px;border-radius:999px!important;z-index:60;box-shadow:0 12px 30px rgba(0,0,0,.5);transition:transform .25s cubic-bezier(.2,.8,.2,1);}
#toast.show{visibility:visible;transform:translateX(-50%) translateY(0);}

@media(max-width:620px){
  .offer-sec{padding:40px 18px 44px;}
  .offer h3,.step h3{padding-left:18px;padding-right:18px;}
  .step{padding:22px 18px 22px;}
  .step h3{margin:-23px -19px 18px -19px;gap:12px;}
  .offer .orow{padding:18px;}
  .step p{font-size:14px;}
  .prompt code{font-size:11.5px;}
}

/* ---- v0.6.1: centered steps, plain heading, copy icons ---- */
.wf-steps .sec-head{text-align:center;margin-bottom:52px;}
.wf-steps{padding-top:44px;}
.wf-steps .sec-head .tag{margin-bottom:6px;}
.wf-steps .sec-head h2{text-align:center;color:#fff;font-size:clamp(33px,5.06vw,57px);}
.wf-steps .steps{margin:0 auto;}
.ico-copy{width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:6px;}
.prompt .plabel b{display:inline-flex;align-items:center;}
.code-chip small{display:inline-flex;align-items:center;}
.code-chip small .ico-copy{width:12px;height:12px;margin-right:5px;}

/* ---- bullet lists inside steps ---- */
.step ul.blist{list-style:none;margin:4px 0 14px;}
.step ul.blist li{position:relative;padding-left:22px;margin-bottom:8px;font-size:15px;color:var(--dim);}
.step ul.blist li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;background:var(--lilac);}
.step ul.blist li strong{color:#fff;font-weight:600;}
.prompt.long code{max-height:360px;overflow:auto;padding-right:6px;}
.prompt.long code::-webkit-scrollbar{width:7px;}
.prompt.long code::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);}

/* ---- copy-the-link box (shared boards that only open on desktop) ---- */
.offer.flow .orow{flex-direction:column;align-items:stretch;gap:12px;}
.flowlink{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;cursor:pointer;
  background:var(--ice);color:var(--ink);border:none;border-radius:999px!important;padding:17px 26px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(13px,1.6vw,17px);letter-spacing:-.005em;word-break:break-all;
  transition:background .15s ease,box-shadow .2s ease,transform .15s ease;}
.flowlink:hover{background:#C3E7FF;box-shadow:0 0 26px rgba(155,216,255,.55);transform:translateY(-1px);}
.flowlink.copied{background:var(--lilac);}
.flowlink .ico-copy{width:18px;height:18px;flex-shrink:0;}
.offer.flow .fnote{text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lilac);}
.offer.flow .otext{margin-top:6px;}

/* ---- interactive 3D (GLB) ---- */
.model-sec{padding:12px 32px 40px;border-top:none;}
.model-frame{position:relative;max-width:960px;margin:0 auto;border:1px solid rgba(255,255,255,.75);
  background:radial-gradient(520px 320px at 50% 100%, rgba(180,155,255,.22), transparent 70%),rgba(4,4,9,.74);
  box-shadow:12px 12px 0 rgba(180,155,255,.35);}
.model-frame model-viewer{width:100%;height:460px;display:block;background:transparent;--poster-color:transparent;}
.model-badge{position:absolute;top:14px;left:14px;z-index:2;pointer-events:none;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;background:var(--holo);color:var(--ink);padding:7px 14px;border-radius:999px!important;}
.model-cap{max-width:960px;margin:18px auto 0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);}
.model-cap strong{color:var(--lilac);font-weight:600;}
@media(max-width:620px){
  .model-sec{padding:8px 18px 30px;}
  .model-frame{box-shadow:8px 8px 0 rgba(180,155,255,.35);}
  .model-frame model-viewer{height:330px;}
  .flowlink{padding:15px 18px;border-radius:18px!important;}
  .step ul.blist li{font-size:13.5px;}
}

/* ---- two-click video poster (no YouTube request before the click) ---- */
.vposter{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden;display:block;}
.vposter .vstill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .6s ease,filter .3s ease;}
.vposter:hover .vstill{transform:scale(1.03);filter:brightness(.85);}
.vposter .vplay{position:absolute;left:50%;top:50%;width:150px;height:auto;transform:translate(-50%,-50%);
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.6));transition:transform .25s ease;animation:floatyplay 5.6s ease-in-out infinite;}
.vposter:hover .vplay{animation-play-state:paused;transform:translate(-50%,-50%) scale(1.08);}
@keyframes floatyplay{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-8px)}}
.vposter .vhint{position:absolute;left:14px;bottom:12px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.8);background:rgba(0,0,0,.55);padding:6px 10px;}
@media(max-width:620px){.vposter .vplay{width:96px;}.vposter .vhint{font-size:8.5px;}}

/* ---- hero variants ---- */
.video-frame.img{aspect-ratio:auto;background:#fff;}
.video-frame.img img{display:block;width:100%;height:auto;}
a.vposter{text-decoration:none;}
.offer.info .orow{padding-top:20px;}
.offer .orow.onote{padding-top:0;margin-top:-6px;}
.offer .fnote{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lilac);}
.step-shot{margin:16px auto 4px;max-width:420px;border:1px solid rgba(255,255,255,.35);line-height:0;}
.step-shot img{width:100%;height:auto;display:block;}
.wf-steps .video-frame{max-width:960px;margin:0 auto;}
.sec.light .video-frame{box-shadow:12px 12px 0 var(--ink);}
.subhero.light + .sec{border-top:2px solid rgba(255,255,255,.92);}
@media(max-width:620px){.step-shot{max-width:100%;}}
/* standard red YouTube play button (people recognise it), neutral play for other platforms */
.vposter .vplay{width:96px;height:auto;animation:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));}
.vposter .vplay.gen{width:78px;}
.vposter:hover .vplay{transform:translate(-50%,-50%) scale(1.08);}
@media(max-width:620px){.vposter .vplay{width:72px;}.vposter .vplay.gen{width:60px;}}