/* Responsive case-study slides: four templates (intro, gaps, value, detail). */
.slide{--s-bg:#FBFCFF;--s-line:#DDE3EF;--s-eyebrow:#5A4488;--s-title:#1D2330;--s-sub:#5B6472;--s-body:#334155;--s-card:#FFFFFF;
  --s-out:#EAF3EC;--s-out-line:#C9E2D1;--s-green:#276B43;
  position:relative;background:var(--s-bg);color:var(--s-title);border:1px solid var(--s-line);border-radius:14px;overflow:hidden;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;container-type:inline-size;text-align:left}
.slide::before{content:"";display:block;height:6px;background:linear-gradient(90deg,#5A4488,#2B6CB0 33%,#2F7D4F 66%,#9A3B2E)}
.s-in{padding:clamp(18px,4.5cqw,56px) clamp(18px,5cqw,64px) clamp(16px,3cqw,32px)}
.s-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--s-eyebrow);padding-bottom:8px;border-bottom:1px solid var(--s-eyebrow);margin-bottom:clamp(14px,2.5cqw,28px)}
.s-eyebrow{font-size:clamp(11px,1.2cqw,14px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--s-eyebrow);margin:0 0 6px}
.s-title{font-family:'Lora',Georgia,serif;font-weight:700;font-size:clamp(28px,5.6cqw,68px);line-height:1.05;letter-spacing:-.01em;margin:0 0 10px;color:var(--s-title)}
.s-title .arr{font-family:'Inter',sans-serif;font-weight:400;padding:0 .08em}
.s-sub{font-size:clamp(15px,1.7cqw,20px);line-height:1.45;color:var(--s-sub);margin:0 0 clamp(16px,3cqw,32px);max-width:62em}
.s-foot{margin-top:clamp(16px,3cqw,32px);padding-top:10px;border-top:1px solid var(--s-line);font-size:12px;font-weight:600;color:var(--s-sub)}

/* Intro: three cards + callout */
.s-cards{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch}
.s-card{background:var(--s-card);border:1px solid var(--s-line);border-radius:12px;padding:clamp(14px,1.8cqw,20px)}
.s-card .lab{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--s-title);margin:0 0 4px}
.s-card h4{font-family:'Lora',Georgia,serif;font-weight:700;font-size:clamp(18px,1.9cqw,22px);margin:0 0 8px;color:var(--s-title)}
.s-card p{font-size:clamp(14px,1.35cqw,15px);line-height:1.5;color:var(--s-sub);margin:0 0 8px}
.s-card.out{background:var(--s-out);border-color:var(--s-out-line)}
.s-card.out .lab,.s-card.out h4{color:var(--s-green)}
.s-card.out p{color:var(--s-body);font-weight:600}
.s-arrow{align-self:center;color:#9AA3B2;font-size:22px}
.s-callout{margin-top:clamp(14px,2.5cqw,24px);border:1px solid var(--s-green);border-left-width:4px;padding:clamp(12px,1.8cqw,18px) clamp(14px,2.2cqw,24px)}
.s-callout strong{display:block;font-size:clamp(16px,1.9cqw,22px);line-height:1.35;color:var(--s-title)}
.s-callout span{display:block;margin-top:6px;font-size:clamp(13px,1.3cqw,15px);color:var(--s-sub)}

/* Gaps / value: text + overlapping screenshots */
.s-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3cqw,40px);align-items:start}
.s-split.rev .s-text{order:2}
.s-text .lead{font-weight:600;font-size:clamp(16px,1.75cqw,20px);line-height:1.5;margin:0 0 8px;color:var(--s-title)}
.s-text ul{margin:0;padding-left:1.2em}
.s-text li{font-size:clamp(15px,1.6cqw,19px);line-height:1.55;color:var(--s-body);margin:0 0 6px}
.s-text li b{color:var(--s-title)}
.s-shots{position:relative;display:grid;grid-template-columns:repeat(12,1fr)}
.s-shots img{width:100%;height:auto;display:block;border:1px solid var(--s-line);border-radius:6px;box-shadow:0 8px 22px rgba(15,23,42,.14);background:#fff}
.s-shots .a{grid-column:1/10;grid-row:1}
.s-shots .b{grid-column:7/13;grid-row:1;margin-top:18%;z-index:1}
.s-shots .b.phone{grid-column:9/13}

/* Detail: two captioned figures */
.s-figs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3cqw,40px);align-items:start}
.s-figs figure{margin:0}
.s-figs img{width:100%;height:auto;max-height:min(70vh,560px);object-fit:cover;object-position:top;display:block;border:1px solid var(--s-line);border-radius:6px;box-shadow:0 8px 22px rgba(15,23,42,.12);background:#fff}
.s-figs figcaption{font-size:clamp(14px,1.5cqw,18px);line-height:1.45;color:var(--s-body);margin-top:10px}

/* Narrow: stack everything */
@container (max-width:720px){
  .s-top span:last-child{display:none}
  .s-cards{grid-template-columns:1fr}
  .s-arrow{justify-self:center;transform:rotate(90deg);line-height:1}
  .s-split{grid-template-columns:1fr}
  .s-split.rev .s-text{order:0}
  .s-figs{gap:12px}
  .s-figs figcaption{font-size:13px}
}