/* Opt-in explanations on five existing guides. Preserve the site's design. */
@media(max-width:400px){
 .guide-quality>nav{gap:12px;padding-inline:16px}
 .guide-quality>nav>.brand{flex-shrink:0}
 .guide-quality>nav>.btn{padding:12px;letter-spacing:.06em;white-space:nowrap;min-height:44px}
}
.guide-quality .guide-explainer{margin:32px 0 40px;padding:24px;background:#0c1721;border-left:3px solid #2b8bff;border-radius:0 12px 12px 0}
.guide-quality .guide-explainer figcaption{font-size:16px;line-height:1.6;color:#b1bbc8;margin:0 0 24px;max-width:65ch}
.guide-quality .guide-explainer figcaption strong{display:block;color:#f4f6fa;font-size:20px;margin-bottom:8px}
.guide-quality .guide-room-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0}
.guide-quality .guide-room-compare.guide-three-rooms{grid-template-columns:repeat(3,minmax(0,1fr))}
.guide-quality .guide-room-compare>div{min-width:0;padding-top:16px;border-top:1px solid #375064}
.guide-quality .guide-room-compare dt{font-size:18px;font-weight:700;color:#f4f6fa;margin:0 0 12px}
.guide-quality .guide-room-compare dd{font-size:16px;line-height:1.6;color:#b1bbc8;margin:0}
.guide-quality .guide-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;counter-reset:process;padding:0;margin:0}
.guide-quality .guide-process.guide-four-stages{grid-template-columns:repeat(4,minmax(0,1fr))}
.guide-quality .guide-process li{counter-increment:process;position:relative;padding:16px 0 0;border-top:2px solid #2b8bff;font-size:16px;line-height:1.6;color:#b1bbc8}
.guide-quality .guide-process li::before{content:counter(process);display:block;margin-bottom:12px;font:700 16px/1.5 'JetBrains Mono',monospace;color:#67e8ff}
.guide-quality .guide-process strong{display:block;font-size:18px;line-height:1.4;color:#f4f6fa;margin-bottom:8px}
.guide-quality .guide-process .process-shape{display:block;width:56px;height:56px;margin:0 0 16px;border:2px solid #67e8ff;border-radius:8px}
.guide-quality .guide-process .process-shape.stencil{border-radius:50%;background:radial-gradient(circle,#67e8ff 0 12px,transparent 13px)}
.guide-quality .guide-process .process-shape.projection{width:80px;transform:skewY(-8deg);background:radial-gradient(circle,#67e8ff 0 13px,transparent 14px)}
.guide-quality .guide-process .process-shape.platform{border-radius:50%;height:24px;margin-top:32px}
.guide-quality .guide-process .process-shape.camera{height:40px;margin-top:16px;background:radial-gradient(circle,transparent 0 8px,#67e8ff 9px 11px,transparent 12px)}
.guide-quality .guide-process .process-shape.phone{width:32px;border-radius:6px}
@media(max-width:760px){
 .guide-quality .guide-room-compare,.guide-quality .guide-room-compare.guide-three-rooms{grid-template-columns:1fr}
 .guide-quality .guide-process,.guide-quality .guide-process.guide-four-stages{grid-template-columns:1fr;gap:0}
 .guide-quality .guide-process li{padding:0 0 24px 40px;border-top:0;border-left:2px solid #2b8bff;margin-left:10px}
 .guide-quality .guide-process li::before{position:absolute;top:0;left:-14px;width:26px;text-align:center;background:#0c1721}
 .guide-quality .guide-process li:last-child{padding-bottom:0;border-left-color:transparent}
 .guide-quality .guide-process .process-shape{margin-top:0}
}