/* Shared laptop + phone frame; screen images are supplied by each case. */
.device-mockup { position:relative; width:100%; aspect-ratio:1.5; overflow:hidden; background:#f3efe7; border-radius:12px; isolation:isolate; }
.device-mockup .mock-laptop { position:absolute; left:6%; top:12%; width:78%; }
.device-mockup .mock-screen { padding:2.5% 2.2% 3%; border-radius:10px 10px 3px 3px; background:#382f25; box-shadow:0 8px 18px #382f2520; }
.device-mockup .mock-screen img { display:block; width:100%; height:auto; aspect-ratio:1.6; object-fit:cover; object-position:top; border-radius:2px; }
.device-mockup .mock-keyboard { position:relative; height:12px; width:110%; margin-left:-5%; border-radius:1px 1px 50% 50% / 1px 1px 100% 100%; background:linear-gradient(#ded8cf,#afa89d); }
.device-mockup .mock-keyboard::before { content:""; position:absolute; left:43%; top:0; width:14%; height:4px; border-radius:0 0 6px 6px; background:#8e877e; }
.device-mockup .mock-phone { position:absolute; width:23%; right:5%; bottom:12%; padding:1.2%; background:#382f25; border-radius:16px; box-shadow:0 8px 16px #382f2540; }
.device-mockup .mock-phone img { display:block; width:100%; height:auto; aspect-ratio:375/812; object-fit:cover; object-position:top; border-radius:10px; }
.device-mockup .mock-caption { position:absolute; bottom:3%; left:7%; color:#655c50; font:10px/1.3 sans-serif; letter-spacing:.14em; }
.work-image:has(.device-mockup) { background:transparent; border:0; overflow:visible; }
.work-image .device-mockup img { transform:none; }
.customer-voice { background:#f8f4ea; }
.voice-card { border:1px solid #e5ddcf; border-radius:16px; padding:32px; background:#fff; }
.voice-head { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-bottom:24px; border-bottom:1px solid #e5ddcf; }
.voice-head .voice-author { margin:0; font-size:14px; }
.voice-head .voice-author strong { display:block; margin-top:6px; font-size:20px; color:#382f25; }
.voice-rating { flex-shrink:0; text-align:center; color:#ba5900; }
.voice-rating small { display:block; color:#655c50; font-size:12px; }
.voice-stars { display:block; font-size:26px; letter-spacing:3px; line-height:1.4; }
.voice-rating b { font-size:26px; }
.voice-rating b span { font-size:14px; color:#655c50; }
.voice-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
.voice-item { min-width:0; padding-top:8px; }
.voice-item-wide { grid-column:1/-1; }
.customer-voice .voice-item h3 { font-size:15px; margin-top:24px; }
.customer-voice .voice-card blockquote { background:#f8f4ea; font-size:16px; margin-bottom:0; padding:18px 20px; }
.voice-tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.voice-tags li { background:#f8f4ea; border-radius:6px; padding:8px 12px; font-size:13px; color:#382f25; }
.voice-checks { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; list-style:none; padding:0; margin:0; }
.voice-checks li { position:relative; padding-left:22px; font-size:14px; }
.voice-checks li::before { content:"✓"; position:absolute; left:0; color:#ba5900; }
.voice-permission { margin-top:24px; padding-top:14px; border-top:1px solid #e5ddcf; font-size:12px; color:#655c50; }
.voice-permission summary { cursor:pointer; min-height:44px; }
.customer-voice .voice-source { font-size:12px; margin:20px 0 0; }
@media(max-width:600px) {
 .device-mockup .mock-phone { border-radius:10px; }.device-mockup .mock-phone img { border-radius:6px; }.device-mockup .mock-keyboard { height:7px; }
 .voice-card { padding:20px; }.voice-head { align-items:flex-start; flex-direction:column; gap:16px; }.voice-rating { text-align:left; }.voice-stars { font-size:24px; }
 .voice-grid,.voice-checks { grid-template-columns:1fr; }.customer-voice .voice-card blockquote { padding:14px; font-size:15px; }
}

.voice-details > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding-top:16px; color:#ba5900; font-size:15px; font-weight:600; cursor:pointer; list-style:none; }
.voice-details > summary::-webkit-details-marker { display:none; }
.voice-details > summary::after { content:"＋"; font-size:22px; font-weight:400; }
.voice-details[open] > summary::after { content:"−"; }
.voice-details > summary:focus-visible { outline:2px solid #ba5900; outline-offset:4px; }