/* ===== T3w · web case modules (Wave 1, Design) · appended to r4-pages.css · premium showcase per ruling 27 Oct 3:18 PM ===== */
/* facts: a 4th column for "Built with" and the live-site link */
.cs-facts--web{grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,3fr) minmax(0,3fr)}
.wc-live{display:inline-flex;align-items:center;gap:.5em;margin-top:6px;color:var(--c-ink);text-decoration:none;font:400 15px/1.5 var(--f-text);border-bottom:1px solid var(--c-hair);min-height:44px}
.wc-live:hover{border-color:currentColor}
.wc-live svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.wc-credit{display:block;margin-top:6px;color:var(--c-500);font:400 15px/1.5 var(--f-text)}
.wc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* frames (CSS only: no stock or AI device mockups) */
.dv-browser{border-radius:clamp(8px,.9vw,14px);overflow:hidden;background:var(--c-white);box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.dv-bar{display:flex;align-items:center;gap:6px;height:clamp(18px,2.2vw,32px);padding:0 clamp(8px,1vw,14px);background:#ECECEE;border-bottom:1px solid #DCDCDF}
.dv-bar i{width:clamp(5px,.6vw,9px);aspect-ratio:1;border-radius:50%;background:#C3C4C8}
.dv-url{margin-left:clamp(6px,1vw,14px);flex:0 1 46%;height:62%;border-radius:999px;background:#FAFAF9;font:400 clamp(7px,.75vw,11px)/1 var(--f-text);color:#74757E;padding:0 1em;display:flex;align-items:center;white-space:nowrap;overflow:hidden}
.dv-shot{display:block;width:100%;height:auto;background:#E9E9EA}
.dv-tablet{border-radius:clamp(10px,1.6vw,26px);padding:clamp(4px,.55vw,9px);background:#16171B;box-shadow:0 30px 70px -25px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08)}
.dv-tablet .dv-shot{border-radius:clamp(6px,1vw,16px)}
.dv-phone{border-radius:clamp(12px,2.2vw,38px);padding:clamp(3px,.45vw,8px);background:#16171B;box-shadow:0 30px 70px -25px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08)}
.dv-phone .dv-shot{border-radius:clamp(9px,1.8vw,30px)}
.wc-cap{display:block;margin:clamp(14px,1.6vw,22px) 0 0;color:var(--c-400);white-space:normal;line-height:1.7}
/* 1 · composite hero: desktop + tablet + phone, one page, one moment */
.wc-comp{padding:clamp(18px,4vw,72px) clamp(14px,4vw,72px) clamp(18px,3vw,48px)}
.wc-stage{position:relative;aspect-ratio:16/9.6}
.wc-stage>*{position:absolute;margin:0}
.wc-c-desk{left:9%;top:0;width:74%}
.wc-c-tab{right:0;bottom:2%;width:21%}
.wc-c-ph{left:0;bottom:0;width:12%}
/* 2 · device pair: one page on desktop and phone */
.wc-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.27fr);gap:clamp(18px,3vw,48px);align-items:end;padding:clamp(24px,5vw,88px) clamp(16px,6vw,120px) clamp(24px,4vw,72px)}
.wc-pair .wc-cap{grid-column:1/-1}
/* 3 · scroll clip: silent, plays only while on screen, pausable, still poster under reduced motion */
.wc-clip{padding:clamp(24px,5vw,88px) clamp(16px,8vw,160px) clamp(24px,4vw,64px)}
.wc-clip .dv-shot{aspect-ratio:16/10;object-fit:cover}
.wc-clip-ctl{display:flex;align-items:center;gap:14px;margin-top:clamp(14px,1.6vw,22px)}
.wc-clip-ctl .wc-cap{margin:0}
.wc-play{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--c-700);background:none;color:var(--c-snow);display:grid;place-items:center;cursor:pointer}
.wc-play svg{width:16px;height:16px;fill:currentColor}
.wc-play .i-play{display:none}.wc-play[aria-pressed="false"] .i-play{display:block}.wc-play[aria-pressed="false"] .i-pause{display:none}
/* 4 · key pages: up to 3 named captures */
.wc-pages .cs-blk{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px)}
.wc-pages .cs-row{align-items:flex-start}
.wc-pages .cs-fig{overflow:visible;background:none;border-radius:0}
.wc-pages .cs-fig>img{border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--c-200)}
.wc-pages figcaption{position:static;display:block;margin-top:12px;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--c-500);white-space:normal}
/* 5 · results: only filed, sourced figures, each with window and source */
.wc-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--pad);margin:0 0 clamp(28px,3vw,44px);padding:0;list-style:none}
.wc-results li{display:grid;gap:8px;border-top:1px solid var(--c-200);padding-top:18px}
.wc-stat{font:var(--w-head) clamp(40px,4.4vw,68px)/1 var(--f-head)}
.wc-stat-k{font:400 15px/1.45 var(--f-text)}
.wc-stat-src{color:var(--c-500);white-space:normal;line-height:1.6}
/* /web/ rail at 4+ cases (ruled 27 Oct 3:18 PM item 1) */
.lp-tiles.lp-rail{grid-template-columns:none;gap:var(--gap);grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--gap)) / 3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:4px}
.lp-rail::-webkit-scrollbar{display:none}
.lp-rail>.lp-tile{scroll-snap-align:start;min-width:0}
.lp-rail .lp-tile-frame{aspect-ratio:4/5}
.lp-rail-nav{display:flex;align-items:center;gap:14px;margin-top:clamp(24px,3vw,40px)}
.lp-rail-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--c-700);background:none;color:var(--c-snow);display:grid;place-items:center;cursor:pointer}
.lp-rail-nav button:disabled{opacity:.35;cursor:default}
.lp-rail-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.lp-rail-count{color:var(--c-400);min-width:5.5em}
@media (max-width:1023px){.lp-tiles.lp-rail{grid-auto-columns:calc((100% - var(--gap)) / 2)}}
@media (max-width:899px){
  .cs-facts--web{grid-template-columns:minmax(0,1fr)}
  .wc-pair{grid-template-columns:minmax(0,1fr) minmax(0,.4fr);padding:20px}
  .wc-clip{padding:20px}
  .lp-tiles.lp-rail{grid-auto-columns:84%}
}
@media (max-width:599px){
  .wc-comp{padding:16px 12px 20px}
  .wc-stage{aspect-ratio:16/11}
  .wc-c-desk{left:6%;width:88%}
  .wc-c-tab{width:26%}
  .wc-c-ph{width:17%}
  .wc-pair{grid-template-columns:minmax(0,1fr)}
  .wc-pair .dv-phone{width:58%;justify-self:center;order:-1}
}
.wc-gal-credit{margin:0;padding:0 var(--pad);color:var(--c-500);white-space:normal}