/* Puzzle homepage study v2 (/home-puzzle-v2). Loaded after puzzle-home.css, which v1 still uses unchanged. */
.pz2-clinic{--pz-orange:#F26327;--pz-blue:#1A5FD7;--pz-navy:#2D3142}

/* ---------- Hero: a real photograph in every chapter ---------- */
.ph-photo{margin:18px 0 6px;max-width:440px}
.ph-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.ph-step[data-step="0"] .ph-photo img{object-position:50% 38%}
.ph-faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 6px;max-width:440px}
.ph-faces img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
.ph-face-1{object-position:50% 30%}
.ph-face-2{object-position:48% 40%}
.ph-face-3{object-position:44% 40%}

/* ---------- Clinic records ---------- */
.pz2-kicker{margin-bottom:18px}
.pz2-evidence .pz-card h2{font-size:24px;letter-spacing:-.6px;line-height:1.2;margin:0}
.pz2-evidence .pz-complex h2{color:#fff}
.pz2-evidence .pz-bars{margin-top:24px}
.pz2-evidence .pz-card.pz-complex{background:
  radial-gradient(90% 55% at 50% 72%,rgba(26,95,215,.42),transparent 70%),
  radial-gradient(45% 30% at 50% 74%,rgba(242,99,39,.22),transparent 72%),
  var(--pz-navy)}
.pz2-cloud{position:relative;height:380px;margin-top:22px;touch-action:pan-y}
.pz2-cloud svg{display:block;width:100%;height:100%;overflow:visible}
.pz2-cloud text{font-family:var(--display);font-weight:500;cursor:default;opacity:0;transform:translateY(8px);transform-box:fill-box;transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.pz2-cloud.is-in text{opacity:var(--o,1);transform:none}
.pz2-cloud.is-in[data-focus] text{opacity:.16;transition-delay:0s!important;transition-duration:.25s}
.pz2-cloud.is-in[data-focus] text.is-on{opacity:1}
@media(min-width:700px){
  .pz2-evidence .pz-bars li{grid-template-columns:230px minmax(0,1fr) 44px}
  .pz2-cloud{height:430px}
}
@media(min-width:1050px){
  .pz2-kicker{grid-column:1/-1;margin-bottom:6px}
  .pz2-evidence .pz-bars li{grid-template-columns:205px minmax(0,1fr) 40px;gap:14px}
  .pz2-cloud{height:450px}
}
@media(prefers-reduced-motion:reduce){.pz2-cloud text{transition:none!important;transform:none}}

/* ---------- The clinic: three real rooms, and who it is for ---------- */
.pz2-clinic{padding:72px 0 40px}
.pz2-clinic-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 24px;margin-bottom:18px}
.pz2-clinic-head h2{margin:0;font-size:30px;letter-spacing:-1px}
.pz2-clinic-head p{margin:0;font-size:14px;color:var(--ink-soft)}
.pz2-clinic-head a{color:var(--ink);display:inline-flex;min-height:44px;align-items:center;text-underline-offset:4px}
.pz2-clinic-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:20px;padding:16px 10px 10px;
  background:linear-gradient(180deg,#F26327 0%,#C2459A 52%,#1A5FD7 100%);
  background:linear-gradient(in oklch 180deg,#F26327 0%,#F26327 18%,#1A5FD7 100%)}
.pz2-clinic-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.16) 10px,rgba(255,255,255,0) 20px)}
.pz2-badges{width:max-content;max-width:100%;box-sizing:border-box;margin:0 auto 14px;padding:6px 14px 6px 10px;gap:4px 10px}
.pz2-badges span{font-size:14px;line-height:24px;gap:10px}
.pz2-badges span::before{width:18px;height:18px}
.pz2-clinic-photos{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;border-radius:16px;background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.pz2-clinic-photos img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;aspect-ratio:1}
.pz2-clinic-photos .pz2-lead{grid-column:1/-1;aspect-ratio:3/2}
@media(min-width:700px){
  .pz2-clinic-head h2{font-size:36px;letter-spacing:-1.2px}
  .pz2-clinic-stage{padding:30px}
  .pz2-badges{margin-bottom:24px;padding:8px 16px 8px 12px}
  .pz2-badges span{font-size:16px;line-height:27px;gap:14px}
  .pz2-badges span::before{width:20px;height:20px}
  .pz2-clinic-photos{grid-template-columns:1.55fr 1fr;grid-template-rows:1fr 1fr;height:min(520px,52vw);padding:10px;gap:10px;border-radius:22px}
  .pz2-clinic-photos img,.pz2-clinic-photos .pz2-lead{aspect-ratio:auto;border-radius:14px}
  .pz2-clinic-photos .pz2-lead{grid-column:1;grid-row:1/3}
}