/* The "show" study: options for the section straight after the hero. Shared by every design.
   The shop's own tokens (--green, --forest, --line, --muted, --serif, --radius) and classes (.wrap, .button, .text-button) are used as they are. */
.shw{background:#fff;border-top:1px solid var(--line);padding:72px 0 76px;overflow:hidden}
.shw-head h2{font-size:36px;letter-spacing:-.032em}
.shw-head p{font-size:18px;line-height:1.5;color:var(--muted);margin-top:12px;max-width:600px}
/* A sheet of paper on white: the hero's own border and crisp offset shadow. */
.shw-paper{border:1px solid #c4d5c8;box-shadow:4px 6px 0 #d8e6dc;border-radius:3px;background:#fff;overflow:hidden}
/* The same sheet on a forest surface. */
.shw-paper.on-forest{border:0;box-shadow:3px 4px 0 #00260f}
.shw-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px 24px;margin-top:26px}
.shw-note{font-size:14px;line-height:1.5;color:var(--muted)}
/* What it costs, in reading size: blind readers looked for the price in every version. */
.shw-facts{font-size:16px;line-height:1.45;color:var(--ink);margin-top:22px}
.shw-facts .price{font-size:inherit}
.shw-facts+.shw-actions{margin-top:12px}
.shw-tour .icon{width:17px;height:17px}
/* The one quiet control on anything that moves by itself. */
.shw-pause{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 2px;background:none;color:var(--muted);font-size:14px}
.shw-pause .icon{width:15px;height:15px}
.shw-pause:hover{color:var(--forest)}
@media(max-width:600px){
 .shw{padding:40px 0 44px}
 .shw-head h2{font-size:28px;letter-spacing:-.028em}
 .shw-head p{font-size:16px;margin-top:10px}
 .shw-actions{margin-top:22px}
}
@media(prefers-reduced-motion:reduce){.shw-pause{display:none}}

/* Dev panel group, added only on the comparison host page. */
.dev-show select{width:100%;min-height:44px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;padding:8px 10px;font-size:14px}
/* While the chosen design's files load, the shop's own carousel keeps its room but is not shown (show-kit.js, inShop). */
html[data-show-pending] #main>.showcase,html[data-show-pending] #main>.sx{visibility:hidden}