/* WINKOO guides: small additions for guide pages only (figures, wide table, hub list). Styling only. */
.prose .g-fig{margin:22px 0}
.prose .g-fig img{width:100%;margin:0}
.prose .g-fig.tall{max-width:440px}
.prose .g-cut{max-width:300px;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(255,255,255,.3),transparent 70%),#1d4a40;border-radius:var(--r);padding:26px 26px 20px}
.prose .g-cut img{width:auto;max-height:300px;margin:0 auto;border-radius:0;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35))}
.prose .g-pair{margin:18px 0 22px;max-width:640px}
.prose .g-pair img{margin:0}
.prose .g-scroll{overflow-x:auto;margin:16px 0;-webkit-overflow-scrolling:touch}
.prose .g-scroll table{margin:0;min-width:620px}
.prose .g-scroll tbody th{font-weight:600;white-space:nowrap}
.prose .page-intro .eyebrow a{color:inherit;text-decoration:none;font-weight:600}
.prose .page-intro .eyebrow a:hover{text-decoration:underline;text-underline-offset:4px}
.prose .g-list{list-style:none;padding:0;margin:0;display:grid;gap:0}
.prose .g-list li{padding:22px 0;border-bottom:1px solid var(--line)}
.prose .g-list h2{margin:0 0 8px}
.prose .g-list h2 a{font-weight:500;text-decoration:none}
.prose .g-list h2 a:hover{text-decoration:underline;text-underline-offset:4px}

/* v2 (3 Oct 2026): before/after slider, size finder, three-way switch. All work without JavaScript. */
.prose .g-ba{display:block;padding:0;margin:18px 0 22px}
.prose .g-ba .g-pair{margin:0 auto}
.prose .g-ba .pair.t3-compare{max-width:none}
.prose .g-tool{margin:18px 0 22px;padding:clamp(16px,3vw,24px);border-radius:var(--r);background:var(--panel)}
.prose .g-tool p{margin:0}
.prose .g-fallback{margin:0}
.prose .g-q{font-weight:600;color:var(--text);margin:0 0 8px}
.prose .g-opts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.prose .g-opts button{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--text);padding:11px 18px;min-height:44px}
.prose .g-opts button[aria-pressed="true"]{background:var(--blue);color:#fff;box-shadow:none}
.prose .g-opts button:focus-visible,.prose .g-res a.pill:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.prose .g-res{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:center;padding-top:16px;border-top:1px solid var(--line)}
.prose .g-stage{height:200px;border-radius:var(--r);display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:14px 12px;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(255,255,255,.28),transparent 70%),var(--g-bg,#7a3f2c)}
.prose .g-stage img{width:auto;margin:0;border-radius:0;filter:drop-shadow(0 10px 10px rgba(0,0,0,.35))}
.prose .g-res-size{font:500 clamp(24px,2.6vw,30px)/1.15 var(--head);color:var(--text);margin:0 0 6px}
.prose .g-res-why{margin:0 0 14px}
.prose .g-res a.pill{font-weight:600;color:#fff;text-decoration:none}
@media (max-width:520px){.prose .g-res{grid-template-columns:1fr}.prose .g-stage{height:180px}}
.prose .g-switch{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.prose .g-switch figure{margin:0}
.prose .g-switch img{width:100%;aspect-ratio:4/5;object-fit:cover;margin:0 0 10px;display:block}
.prose .g-switch figcaption{color:#4c443e}
.prose .g-switch.g-on{display:block;max-width:520px}
.prose .g-switch.g-on .g-opts{margin-bottom:14px}
.prose .g-switch.g-on figure[hidden]{display:none}

/* v3 (3 Oct 2026): sofa colour picker and pair builder. Additions only; both reuse the v2 tool styles above. */
.prose .g-opts button.g-dot{display:inline-flex;align-items:center;gap:8px}
.prose .g-opts button.g-dot::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--dot,#999);box-shadow:0 0 0 1.5px rgba(47,42,38,.35);flex:none}
.prose .g-opts button.g-dot[aria-pressed="true"]::before{box-shadow:0 0 0 1.5px #fff}
.prose .g-fallback li{margin-bottom:6px}