/* Shared home guide: native disclosure, no autoplay, both Punchy themes. */
.home-use-guide { grid-area:guide; min-width:0; width:100%; margin:0; border:1px solid var(--p-line); border-radius:18px; background:var(--p-paper); color:var(--p-ink); overflow:hidden; }
.home-use-guide > summary { display:flex; align-items:center; gap:15px; min-height:94px; padding:14px 18px; cursor:pointer; list-style:none; }
.home-use-guide > summary::-webkit-details-marker { display:none; }
.home-use-guide > summary::marker { content:''; }
.ug-summary-image { width:92px; height:64px; flex:0 0 92px; object-fit:cover; border-radius:10px; background:var(--p-raised); }
.ug-summary-copy { display:flex; flex:1; flex-direction:column; gap:5px; min-width:0; }
.ug-summary-copy strong { font-size:17px; font-weight:750; letter-spacing:-.025em; line-height:1.45; }
.ug-summary-copy > span { color:var(--p-muted); font-size:12px; line-height:1.65; }
.ug-chevron { flex:0 0 20px; color:var(--p-accent); width:20px; height:20px; transition:transform .2s ease; }
.home-use-guide[open] .ug-chevron { transform:rotate(180deg); }
.home-use-guide > summary:focus-visible,.home-use-guide button:focus-visible { outline:3px solid var(--p-accent); outline-offset:-4px; }
.ug-body { padding:0 22px 22px; border-top:1px solid var(--p-line); }
.ug-scene { margin:22px 0 20px; }
.ug-scene > img { display:block; width:100%; max-width:840px; height:auto; margin-inline:auto; object-fit:contain; border-radius:13px; background:var(--p-raised); }
.ug-scene > figcaption { max-width:840px; margin-inline:auto; margin-top:7px; text-align:right; font-size:10px; color:var(--p-muted); line-height:1.6; }
.ug-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding:0; margin:0 0 24px; list-style:none; }
.ug-steps li { min-width:0; border-top:1px solid var(--p-line); padding-top:13px; }
.ug-step-top { display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.ug-step-number { font:650 11px/1 var(--p-font); letter-spacing:.06em; color:var(--p-accent); }
.ug-step-icon { width:28px; height:28px; color:var(--p-muted); fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.home-use-guide h3 { font-size:15px; font-weight:750; line-height:1.55; letter-spacing:-.025em; margin:0 0 7px; }
.home-use-guide p { font-size:12px; line-height:1.9; margin:0; color:var(--p-muted); }
.ug-screen-story { display:grid; grid-template-columns:150px minmax(0,1fr); gap:28px; align-items:center; padding:24px; background:var(--p-raised); border:1px solid var(--p-line); border-radius:15px; }
.ug-phone { position:relative; width:138px; max-width:100%; margin:auto; padding:7px 6px 15px; border-radius:21px; background:#1a2420; border:1px solid #546458; box-shadow:0 8px 20px #10251b21; }
.ug-phone::before { content:''; display:block; width:36px; height:4px; border-radius:3px; background:#637365; margin:0 auto 7px; }
.ug-phone::after { content:''; position:absolute; left:calc(50% - 20px); bottom:6px; width:40px; height:3px; border-radius:2px; background:#839080; }
.ug-phone-screen { position:relative; overflow:hidden; width:100%; aspect-ratio:3 / 4; border-radius:9px; background:#e7e3d8; }
.ug-phone-screen img { display:block; width:200%; max-width:none; height:100%; object-fit:cover; object-position:left center; }
.ug-screen-overlays { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ug-screen-label { position:absolute; inset:auto 4px 4px; padding:4px 3px; color:#f5f5e9; background:#152b24d9; border-radius:4px; text-align:center; font-size:8px; line-height:1.4; }
.ug-screen-copy { min-width:0; }
.ug-screen-copy h3 { font-size:19px; }
.home-use-guide .ug-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; max-width:100%; margin-top:13px; padding:10px 14px; border:1px solid var(--p-line); border-radius:9px; color:var(--p-ink); background:var(--p-paper); font:700 12px/1.5 var(--p-font); text-align:center; cursor:pointer; }
.ug-button > span[aria-hidden] { color:var(--p-accent); }
.home-use-guide .ug-hidden-video { margin-top:13px; font-size:10px; line-height:1.75; }
.ug-after { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:24px 0; }
.ug-after > section { min-width:0; padding-top:15px; border-top:1px solid var(--p-line); }
.ug-voice-example { display:inline-block; padding:9px 11px; margin:5px 0 10px; color:var(--p-accent); background:var(--p-raised); border-radius:10px 10px 10px 3px; font-size:13px; font-weight:650; }
.ug-camera-free { padding-top:18px; border-top:1px solid var(--p-line); }
.ug-free-actions { display:flex; flex-wrap:wrap; gap:9px; }
.ug-free-actions .ug-button { flex:1 1 auto; }
@media (max-width:600px) {
  .home-use-guide > summary { gap:10px; min-height:84px; padding:12px; }
  .ug-summary-image { width:76px; height:57px; flex-basis:76px; }
  .ug-summary-copy strong { font-size:15px; }
  .ug-summary-copy > span { font-size:11px; line-height:1.5; }
  .ug-chevron { width:16px; flex-basis:16px; }
  .ug-body { padding:0 15px 18px; }
  .ug-scene { margin-top:16px; }
  .ug-steps { grid-template-columns:1fr; gap:16px; }
  .ug-steps li { display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:9px; }
  .ug-step-top { grid-row:1/3; flex-direction:column; gap:7px; align-items:flex-start; }
  .ug-steps h3 { grid-column:2; }
  .ug-steps p { grid-column:2; }
  .ug-screen-story { grid-template-columns:1fr; gap:18px; padding:18px 14px; }
  .ug-phone { width:142px; }
  .ug-screen-copy h3 { font-size:17px; }
  .ug-after { grid-template-columns:1fr; gap:19px; }
  .ug-free-actions { flex-direction:column; gap:8px; margin-top:12px; }
  .ug-free-actions .ug-button { margin-top:0; }
}
@media (prefers-reduced-motion:reduce) { .ug-chevron { transition:none; } }