/* Mobile fabrication guide; shared video dialog behavior with the desktop guide. */
.quick-guide { width:100%; background:#fff; color:#171b20; padding:48px 20px 44px; box-sizing:border-box; }
.quick-guide-inner { max-width:620px; margin:0 auto; }
#quick-guide-title { margin:0; font-size:clamp(28px,7.6vw,40px); line-height:1.16; letter-spacing:-.035em; font-weight:400; }
#quick-guide-title strong { font-weight:750; }
.quick-guide-intro { margin:18px 0 24px; color:#7b8289; font-size:14px; line-height:1.65; word-break:keep-all; }
.quick-guide-watch { display:block; position:relative; width:100%; padding:0; border:0; background:#eaf0f5; color:#171b20; cursor:pointer; text-align:left; font-family:inherit; overflow:hidden; }
.quick-guide-cover { display:block; width:100%; height:clamp(220px,65vw,340px); object-fit:cover; object-position:44% center; }
.quick-guide-watch-bar { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:12px; padding:15px; background:rgba(255,255,255,.55); }
.quick-guide-youtube { display:grid; place-items:center; flex-shrink:0; width:36px; height:26px; border-radius:6px; background:#ed1610; color:#fff; font-size:15px; }
.quick-guide-instruction { display:block; font-size:10px; font-weight:600; letter-spacing:.12em; color:#65707a; }
.quick-guide-watch-label { display:block; margin-top:4px; font-size:14px; font-weight:600; }
.quick-guide-watch-arrow { margin-left:auto; font-size:23px; }
.quick-guide-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; list-style:none; padding:0; margin:26px 0 0; }
.quick-guide-steps li { position:relative; min-width:0; }
.quick-guide-step-image { aspect-ratio:240/148; overflow:hidden; }
.quick-guide-step-image img { display:block; width:100%; height:100%; object-fit:cover; }
.quick-guide-steps li:not(:last-child)::after { content:'›'; position:absolute; right:-12px; top:clamp(13px,5vw,35px); font-size:20px; color:#8d9eac; }
.quick-guide-steps p { margin:10px 0 7px; line-height:1.3; }
.quick-guide-steps p span { display:block; color:#89939c; font-size:10px; letter-spacing:.06em; margin-bottom:4px; }
.quick-guide-steps strong { font-size:clamp(12px,3.4vw,16px); font-weight:650; white-space:nowrap; }
.quick-guide-steps small { display:block; font-size:12px; line-height:1.5; color:#81878d; word-break:keep-all; }
.quick-guide-dialog { position:fixed; inset:0; margin:auto; width:calc(100vw - 24px); max-width:720px; max-height:90dvh; padding:0; border:1px solid #ffffff33; border-radius:14px; background:#000; color:#fff; box-shadow:0 24px 80px #0006; overflow:hidden; }
.quick-guide-dialog::backdrop { background:rgba(9,18,28,.8); }
.quick-guide-dialog-heading { position:absolute; top:6px; right:6px; z-index:2; }
#quick-guide-video-title { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.quick-guide-close { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:#0009; color:#fff; font-size:26px; cursor:pointer; }
.quick-guide-video-frame { aspect-ratio:16/9; }
.quick-guide-video-frame iframe { display:block; width:100%; height:100%; border:0; }
.quick-guide-watch:focus-visible,.quick-guide-close:focus-visible { outline:3px solid #007fff; outline-offset:3px; }
.quick-guide .qg-reveal { opacity:0; transform:translateY(10px); transition:opacity .6s ease,transform .6s ease; transition-delay:var(--qg-delay,0ms); }
.quick-guide .qg-reveal.is-visible { opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce) { .quick-guide .qg-reveal { opacity:1; transform:none; transition:none; } }

/* Edge-to-edge cover, with copy and process captions kept on the page inset. */
.quick-guide-watch { width:100vw; margin-left:calc((100% - 100vw) / 2); }
.quick-guide-instruction { font-size:12px; letter-spacing:.1em; color:#303940; }
.quick-guide-steps p { display:flex; align-items:baseline; gap:5px; }
.quick-guide-steps p span { display:inline; flex-shrink:0; margin:0; }
.quick-guide-steps strong { font-size:clamp(11px,3.1vw,16px); }

/* Readable vertical process: larger image and caption in each row. */
.quick-guide-steps { grid-template-columns:minmax(0,1fr); gap:32px; margin-top:32px; }
.quick-guide-steps li { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto auto; column-gap:18px; row-gap:7px; }
.quick-guide-step-image { grid-column:1; grid-row:1 / 3; align-self:center; }
.quick-guide-steps p { grid-column:2; grid-row:1; align-self:end; margin:0; gap:8px; }
.quick-guide-steps p span { font-size:12px; }
.quick-guide-steps strong { font-size:clamp(16px,4.3vw,22px); }
.quick-guide-steps small { grid-column:2; grid-row:2; align-self:start; font-size:14px; line-height:1.55; }
.quick-guide-steps li:not(:last-child)::after { content:'↓'; top:auto; bottom:-25px; right:auto; left:calc((100% - 18px) * .2674); transform:translateX(-50%); font-size:18px; line-height:20px; color:#a0adb8; }
@media(min-width:600px) { .quick-guide-steps li { column-gap:28px; } .quick-guide-steps small { font-size:16px; } }