.ws-showcase { min-width:0; }
.ws-compare { position:relative; overflow:hidden; isolation:isolate; width:100%; aspect-ratio:16/9; border:1px solid #dce1e0; border-radius:4px; background:#fff; color:#202523; }
.ws-compare * { box-sizing:border-box; }
.ws-layer { position:absolute; inset:0; overflow:hidden; }
.ws-sitebar { display:flex; justify-content:space-between; align-items:center; gap:20px; height:64px; padding:0 34px; border-bottom:1px solid #e4e8e7; background:#fff; color:#535e5a; }
.ws-sitebar > span { font-size:12px; line-height:1.5; }
.ws-amazonbar img { width:108px; height:36px; object-fit:contain; }
.ws-brandbar strong { color:#142821; font-size:25px; font-weight:700; }
.ws-brand { display:flex; flex-direction:column; background:#fff; }
.ws-brand-scene { position:relative; flex:1; min-height:0; overflow:hidden; }
.ws-brand-scene > img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.ws-brand-copy { position:absolute; left:5.5%; top:9%; color:#1a292c; }
.ws-brand-copy > span { font-size:12px; line-height:1.6; font-weight:600; }
.wr-section .ws-brand-copy h3 { margin:20px 0 14px; font-size:52px; line-height:1.2; font-weight:600; color:#142624; }
.wr-section .ws-brand-copy > p { font-size:16px; line-height:1.7; color:#263d3d; }
.ws-brand-spec { position:absolute; right:5%; top:9%; color:#142624; display:flex; flex-direction:column; }
.ws-brand-spec > span:first-child { font-size:26px; font-weight:600; line-height:1.3; }
.ws-brand-spec > span:first-child span { font-size:12px; margin-left:4px; }
.ws-brand-spec > span:last-child { font-size:12px; margin-top:4px; }
.ws-brand-strip { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 34px; height:64px; flex-shrink:0; background:#f5f7f4; border-top:1px solid #e2e8e1; }
.ws-brand-strip > span { display:flex; align-items:center; gap:12px; font-size:13px; line-height:1.5; }
.ws-brand-strip i { color:#077b79; font-size:16px; }
.ws-amazon { background:#fff; clip-path:inset(0 calc(100% - var(--ws-split)) 0 0); }
.ws-listing { height:calc(100% - 64px); display:grid; grid-template-columns:52% 48%; padding:28px 34px 30px; gap:0; }
.ws-listing-media { position:relative; display:flex; align-items:center; justify-content:center; min-height:0; padding:0 8% 24px; }
.ws-listing-media img { width:100%; height:100%; object-fit:contain; }
.ws-listing-media > span { position:absolute; bottom:0; color:#62706a; font-size:12px; }
.ws-listing-copy { padding:24px 20px 0 32px; }
.ws-listing-brand { color:#007185; font-size:13px; }
.wr-section .ws-listing-copy h3 { color:#202523; font-size:26px; line-height:1.55; font-weight:500; margin:14px 0 20px; }
.ws-listing-copy hr { border:0; border-top:1px solid #dfe4e2; margin:16px 0; }
.ws-listing-copy h4 { font-size:16px; font-weight:600; margin:0 0 14px; color:#202523; }
.ws-listing-copy ul { padding:0 0 0 20px; margin:0; list-style:disc; font-size:15px; line-height:2; }
.wr-section .ws-listing-note { font-size:12px; line-height:1.8; color:#66736d; margin-top:22px; }
.ws-divider { position:absolute; z-index:2; top:0; bottom:0; left:min(var(--ws-split),calc(100% - 2px)); width:2px; background:#fff; box-shadow:0 0 0 1px #17292325; pointer-events:none; }
.ws-handle { position:absolute; z-index:2; left:clamp(28px,var(--ws-split),calc(100% - 28px)); top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; gap:10px; width:56px; height:56px; border-radius:50%; border:3px solid #fff; background:#182622; color:#fff; box-shadow:0 2px 16px #0003; pointer-events:none; }
.ws-handle i { font-size:13px; color:#fff; }
.ws-range { position:absolute; z-index:3; inset:0; margin:0; width:100%; height:100%; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.ws-compare:has(.ws-range:focus-visible) { outline:3px solid var(--wr-teal); outline-offset:4px; }
.ws-compare:has(.ws-range:focus-visible) .ws-handle { box-shadow:0 0 0 4px #a6e33d; }
.ws-comparison-caption { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:16px; color:var(--wr-muted); font-size:13px; line-height:1.6; }
.ws-comparison-caption i { color:var(--wr-teal); }
.ws-showcase .wr-project-caption { margin-top:16px; border-top:1px solid var(--wr-line); padding-top:24px; }
.ws-showcase .wr-project-caption h3 { font-size:24px; font-weight:500; }
.ws-showcase .wr-project-caption p { max-width:740px; }
.ws-evidence { max-width:820px; }
.ws-evidence > div { border-top:1px dashed var(--wr-line); padding-top:16px; }
.wr-section .ws-evidence > div > p { font-size:12px; line-height:1.9; color:var(--wr-muted); margin-bottom:10px; }
.ws-source-links { display:flex; flex-wrap:wrap; gap:0 24px; }
.ws-source-links a { display:inline-flex; align-items:center; min-height:44px; font-size:12px; color:var(--wr-teal); text-decoration:underline; text-underline-offset:4px; }
@media (min-width:1800px) {
  .wr-section .ws-brand-copy h3 { font-size:64px; }
  .wr-section .ws-listing-copy h3 { font-size:30px; }
  .ws-listing-copy ul { font-size:17px; }
}
@media (max-width:1023px) {
  .ws-sitebar { height:52px; padding-inline:22px; }
  .ws-brandbar strong { font-size:22px; }
  .ws-amazonbar img { width:92px; height:32px; }
  .ws-listing { height:calc(100% - 52px); padding:20px; }
  .ws-listing-copy { padding:8px 8px 0 18px; }
  .wr-section .ws-listing-copy h3 { font-size:19px; margin:8px 0; }
  .ws-listing-copy h4 { font-size:14px; margin-bottom:8px; }
  .ws-listing-copy ul { font-size:13px; line-height:1.8; }
  .ws-listing-copy hr { margin:10px 0; }
  .wr-section .ws-listing-note { margin-top:10px; font-size:11px; }
  .wr-section .ws-brand-copy h3 { font-size:38px; margin-top:14px; }
  .ws-brand-strip { height:52px; padding-inline:22px; }
  .ws-brand-strip > span { font-size:11px; gap:8px; }
  .ws-brand-spec > span:first-child { font-size:22px; }
}
@media (max-width:600px) {
  .ws-compare { aspect-ratio:auto; height:480px; }
  .ws-sitebar { height:52px; padding-inline:16px; gap:8px; }
  .ws-sitebar > span { font-size:10px; }
  .ws-brandbar strong { font-size:20px; }
  .ws-amazonbar img { width:84px; height:30px; }
  .ws-listing { display:flex; flex-direction:column; padding:14px 20px 18px; }
  .ws-listing-media { height:236px; flex-shrink:0; padding:0 22px 18px; }
  .ws-listing-media > span { font-size:10px; }
  .ws-listing-copy { padding:12px 0 0; }
  .wr-section .ws-listing-copy h3 { font-size:16px; line-height:1.55; margin:4px 0 8px; }
  .ws-listing-brand { font-size:11px; }
  .ws-listing-copy h4, .ws-listing-copy ul, .ws-listing-note, .ws-listing-copy hr { display:none; }
  .ws-brand-scene > img { object-position:77% center; }
  .ws-brand-copy { top:6%; left:7%; }
  .ws-brand-copy > span { font-size:10px; }
  .wr-section .ws-brand-copy h3 { font-size:28px; margin:12px 0 8px; }
  .wr-section .ws-brand-copy > p { font-size:12px; }
  .ws-brand-spec { display:none; }
  .ws-brand-strip { height:54px; padding-inline:12px; gap:8px; }
  .ws-brand-strip > span { font-size:10px; display:block; max-width:88px; text-align:center; }
  .ws-brand-strip i { display:block; margin-bottom:5px; font-size:14px; }
  .ws-handle { width:48px; height:48px; gap:8px; }
  .ws-comparison-caption { font-size:11px; gap:8px; }
  .ws-showcase .wr-project-caption { padding-top:18px; margin-top:16px; }
  .ws-showcase .wr-project-caption h3 { font-size:20px; }
}