.product-visual { margin:2rem 0; min-width:0; }
.product-shot { display:block; position:relative; overflow:hidden; border:1px solid #394151; border-radius:8px; background:#101828; cursor:zoom-in; }
.product-shot img { display:block; width:100%; height:auto; }
.screen-enlarge { position:absolute; bottom:.8rem; right:.8rem; padding:.5rem .7rem; background:#080808ed; border:1px solid #746039; border-radius:4px; color:#e7c159; font-size:.74rem; }
.product-visual figcaption { display:flex; flex-direction:column; gap:.35rem; margin-top:1rem; }
.product-visual figcaption strong { color:var(--heading); font-size:1rem; font-weight:500; }
.product-visual figcaption > span { color:var(--text-secondary); font-size:.78rem; line-height:1.6; max-width:900px; }
.visual-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; padding:1.2rem 0 0; margin:1.2rem 0 0; border-top:1px solid var(--border-light); list-style:none; }
.visual-notes strong { display:block; color:var(--accent-bright); font-size:.85rem; margin-bottom:.35rem; font-weight:500; }
.visual-notes span { display:block; color:var(--text-secondary); font-size:.85rem; line-height:1.65; }
.visual-details { border-top:1px solid var(--border-light); padding:1rem 0; }
.visual-details summary { cursor:pointer; color:var(--accent-bright); font-size:.9rem; }
.feature-copy-wide { max-width:900px; }
.explain-visual { margin:2.5rem 0; padding:2rem; background:#101218; border-top:2px solid var(--accent); border-bottom:1px solid #33343b; }
.explain-visual figcaption { display:flex; flex-direction:column; gap:.75rem; margin-bottom:1.7rem; }
.explain-visual figcaption > strong { font-size:clamp(1.2rem,2.5vw,1.6rem); font-weight:500; color:var(--heading); max-width:750px; line-height:1.4; }
.explain-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.8rem; padding:0; list-style:none; }
.explain-flow li { position:relative; min-width:0; }
.explain-flow li:not(:last-child)::after { content:'→'; position:absolute; top:.45rem; right:-2rem; color:var(--accent); font-size:1.4rem; }
.flow-number { display:grid; place-items:center; width:2.5rem; height:2.5rem; border:1px solid #66552f; border-radius:50%; color:var(--accent-bright); font-family:monospace; font-size:.8rem; margin-bottom:1rem; }
.explain-flow strong { display:block; color:var(--heading); font-size:1rem; font-weight:500; }
.explain-visual .explain-flow p { color:var(--text-secondary); font-size:.88rem; line-height:1.7; margin:.6rem 0 0; }
.explain-visual .explain-foot { color:var(--text-secondary); font-size:.8rem; margin:1.5rem 0 0; padding-top:1.2rem; border-top:1px solid #33343b; max-width:none; }
.product-shot:focus-visible,.visual-details summary:focus-visible { outline:2px solid var(--accent-bright); outline-offset:5px; }
.screen-dialog { width:min(96vw,1600px); max-width:96vw; max-height:94vh; margin:auto; padding:0; border:1px solid #66552f; border-radius:8px; background:#101218; color:#ecebe8; }
.screen-dialog::backdrop { background:#000d; }
.screen-dialog-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.25rem; }
.screen-dialog h2 { font-size:1rem; line-height:1.4; margin:0; }
.screen-dialog button { cursor:pointer; padding:.6rem 1rem; border:1px solid #746039; border-radius:4px; background:#171817; color:#e7c159; font:inherit; white-space:nowrap; }
.screen-dialog-image { display:block; width:100%; height:auto; }
.screen-dialog-footer { padding:1rem 1.25rem; margin:0; font-size:.85rem; }
.screen-dialog-footer a { color:#e7c159; }
.screen-dialog :focus-visible { outline:2px solid #e7c159; outline-offset:3px; }
html:has(.screen-dialog[open]) { overflow:hidden; }
@media(max-width:700px) {
  .visual-notes,.explain-flow { grid-template-columns:1fr; gap:1.2rem; }
  .visual-notes { gap:1rem; }
  .explain-visual { padding:1.3rem; }
  .explain-flow li { padding-left:3.5rem; padding-bottom:1rem; }
  .flow-number { position:absolute; left:0; top:0; }
  .explain-flow li:not(:last-child)::after { content:'↓'; top:auto; bottom:-.8rem; right:auto; left:.85rem; }
  .screen-enlarge { position:static; display:block; text-align:right; border:0; border-top:1px solid #394151; border-radius:0; }
  .screen-dialog-header { align-items:flex-start; padding:.8rem; }
}

.cost-visual .explain-flow li:not(:last-child)::after { content:"+"; }

.routing-image { scroll-margin-top:90px; }
.routing-image figcaption { margin-bottom:1rem; }
.routing-image figcaption strong { font-size:clamp(1.2rem,2.5vw,1.6rem); }
.routing-image picture { display:block; }
.screen-zoom-controls:not([hidden]) { display:flex; align-items:center; gap:1rem; padding:0 1.25rem 1rem; }
.screen-zoom-controls span { color:var(--text-secondary); font-size:.78rem; }
.screen-dialog-stage:has(.screen-dialog-image) { overflow:auto; }
.screen-dialog:has(.screen-zoom-controls:not([hidden])) .screen-dialog-stage { max-height:60vh; }
.screen-dialog-stage.is-zoomed .screen-dialog-image { width:200%; max-width:none; }