/* Flat original screenshots replace device mockups and zoom galleries. */
.template-case .template-heading{margin:30px 0 27px}
.template-case .template-heading .eyebrow{margin-bottom:22px}
.template-case .template-heading h1{font-size:clamp(39px,4.2vw,59px);line-height:1.08;margin-bottom:20px}
.template-case .template-heading .intro{font-size:17px;line-height:1.8;margin:0;max-width:65ch}
.template-case .template-meta{grid-template-columns:1.15fr 1fr .8fr;border-bottom:1px solid var(--line);padding:23px 0;gap:20px}
.template-case .template-meta dd{font-size:14px}
.template-case .template-workspace{padding:34px 0 30px;scroll-margin-top:30px}
.template-case .template-workspace-heading{display:flex;align-items:baseline;justify-content:space-between;gap:22px;margin:0 0 23px}
.template-case .template-workspace-heading h2{font-size:27px;line-height:1.25;margin:0}
.template-case .template-workspace-heading p{font-size:12px;line-height:1.7;max-width:30ch;margin:0}
.template-case .template-layout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;align-items:start}
.template-case .template-layout-grid .template-screen-viewport{max-height:clamp(220px,25vw,320px)}
.template-case .template-variations{padding:30px 0 0}
.template-case .template-variations h2{font-size:25px;margin:0 0 20px}
.template-case .template-variation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:23px 16px;align-items:start}
.template-case .template-variation{margin:0;min-width:0}
.template-case .template-variation img{display:block;width:100%;height:auto;cursor:default}
.template-case .template-variation figcaption{font-size:12px;line-height:1.6;padding-top:8px}
.template-case .template-screen{width:100%;max-width:min(100%,var(--template-native-width));margin:0 auto}
.template-case .template-screen-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #d1d4cb;border-bottom:0;background:#eceee7;padding:12px 17px;border-radius:5px 5px 0 0}
.template-case .template-screen-bar strong{font-size:13px;font-weight:650}
.template-case .template-screen-bar span{font:12px/1.6 Consolas,monospace;white-space:nowrap}
.template-case .template-screen-viewport{display:block;position:relative;inset:auto;max-height:clamp(320px,58vh,600px);overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#a7ad9e #e8ebe3;outline-offset:-3px;border:1px solid #d1d4cb;background:var(--paper)}
.template-case .template-screen-viewport::-webkit-scrollbar{display:block;width:7px}
.template-case .template-screen-viewport::-webkit-scrollbar-thumb{background:#a7ad9e;border:1px solid #e8ebe3;border-radius:5px}
.template-case .template-screen-viewport img{display:block;width:100%;height:auto;max-width:none;max-height:none;flex:none;margin:0;object-fit:initial;object-position:top}
.template-case .template-screen figcaption{font-size:12px;line-height:1.7;padding-top:12px}
.template-case .template-archive-note{font-size:12px;line-height:1.8;padding-top:22px;margin:0 0 30px;border-top:1px solid var(--line)}
.xtnd-template-layouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;align-items:start}
.xtnd-template-layouts .template-screen-viewport{max-height:clamp(220px,25vw,320px)}
.xtnd-template-layouts>.template-embedded{min-width:0}
.xtnd-template-layouts>.xtnd-figure{max-width:500px}
@media(max-width:900px){.template-case .template-workspace-heading{display:block}.template-case .template-workspace-heading p{max-width:none;margin-top:10px}}
@media(max-width:600px){.template-case .template-heading{margin:26px 0}.template-case .template-heading h1{font-size:clamp(35px,9.5vw,45px)}.template-case .template-heading .intro{font-size:16px}.template-case .template-meta{grid-template-columns:1fr;gap:15px}.template-case .template-workspace{padding-top:28px}.template-case .template-workspace-heading h2{font-size:25px}.template-case .template-layout-grid,.xtnd-template-layouts{grid-template-columns:1fr;gap:26px}.template-case .template-variation-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 11px}.template-case .template-screen-bar{padding:11px 12px}.template-case .template-screen-viewport{max-height:62vh;scrollbar-width:thin}}