/* Puzzle homepage study v4 (/home-puzzle-v4). Loaded after puzzle-home.css and puzzle-home-v2.css, which v1 and v2 still use unchanged. */
.pv4-specialties,.pv4-clinic{--pz-orange:#F26327}

/* ---------- Hero: only Dr. Deb ---------- */
.pv4-hero .ph-layer{will-change:transform,opacity}
.pv4-cut{position:absolute;z-index:4;display:block;width:auto;max-width:none;pointer-events:none;transform-origin:50% 100%;visibility:hidden;opacity:0}
.pv4-treatment{height:90cqh;left:calc(50cqw - 25.7cqh);bottom:-4cqh}
@media(prefers-reduced-motion:reduce){.pv4-hero .ph-layer{will-change:auto}}

/* ---------- Who we treat ---------- */
.pv4-evidence .pz-bars a.label{display:inline-block;padding:7px 0;margin:-7px 0;color:var(--ink);white-space:nowrap;text-decoration:underline;text-decoration-color:rgba(10,10,10,.22);text-underline-offset:5px}
.pv4-evidence .pz-bars a.label:hover{text-decoration-color:currentColor}
.pv4-evidence .pz-bars a.label span{font-size:12px;margin-left:2px}
.pv4-complex .pz-stats p{color:var(--ink-soft)}
.pv4-complex .pz-stats strong{color:var(--ink)}
.pv4-complex .pz-tip{background:var(--ink);color:#fff}
/* Side by side, one height: the bars spread to the cloud card's height. */
@media(min-width:1050px){
  .pv4-evidence>.wrap{align-items:stretch}
  .pv4-evidence .pz-card{display:flex;flex-direction:column}
  .pv4-evidence .pz-bars{flex:1;display:flex;flex-direction:column;justify-content:space-between}
  .pv4-evidence .pz-bars li{grid-template-columns:228px minmax(0,1fr) 40px}
  .pv4-evidence .pz2-cloud{flex:1;height:auto;min-height:380px}
}

/* ---------- Areas of Specialty ----------
   Seven tiles. On phones the first runs the full width so the other six pair up; from 700px four sit above three.
   Every illustration keeps one size, set from the narrowest tile, so the wider tiles show more of their ground. */
.pv4-specialties{padding:28px 0 48px}
.pv4-specialties h2{margin:0 0 18px;font-size:28px;letter-spacing:-.8px}
.pv4-tiles{--cols:2;--gap:10px;--art-h:calc(((100cqw - (var(--cols) - 1)*var(--gap))/var(--cols) - 16px)*.8);container-type:inline-size;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.pv4-tile:first-child{grid-column:1/-1}
.pv4-tile{display:flex;flex-direction:column;gap:12px;padding:8px 8px 14px;border-radius:var(--radius-card);background:var(--white);color:var(--ink);text-decoration:none;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.pv4-tile:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.pv4-art{display:grid;place-items:center;height:var(--art-h);border-radius:10px;overflow:hidden;background:var(--bg) center/cover no-repeat}
.pv4-art img{height:calc(var(--art-h)*.59);width:auto;max-width:none;border-radius:8px;background:rgba(255,255,255,.62);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.pv4-name{font-size:14px;font-weight:500;line-height:1.3;padding:0 6px;letter-spacing:-.2px}
.pv4-name span{color:var(--ink-soft);font-size:12px}
@media(min-width:700px){
  .pv4-specialties{padding:40px 0 64px}
  .pv4-specialties h2{font-size:36px;letter-spacing:-1.2px;margin-bottom:24px}
  .pv4-tiles{--cols:4;--gap:14px;grid-template-columns:repeat(12,minmax(0,1fr))}
  .pv4-tile,.pv4-tile:first-child{grid-column:span 3}
  .pv4-tile:nth-child(n+5){grid-column:span 4}
  .pv4-name{font-size:15px}
}

/* ---------- The clinic: v1's two rooms on the page ground, v2's heading ---------- */
.pv4-clinic h2{font-size:30px;letter-spacing:-1px}
.pv4-clinic-head{align-items:flex-end}
.pv4-clinic-head p{margin:0;color:var(--ink-soft)}
/* Women Owned · LGBTQ+ · Neurodivergent-friendly: no pill, a line of type under the address; the seal moves along. */
.pv4-badges{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px}
.pv4-badges li{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;line-height:26px;color:var(--ink-soft);white-space:nowrap;transition:color var(--t-base) var(--ease)}
.pv4-badges li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:var(--border);transform:scale(.36);transition:transform var(--t-base) var(--ease)}
.pv4-badges li.is-active{color:var(--ink)}
.pv4-badges li.is-active::before{border-radius:0;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23F26327' d='M8 0l1.9 1.2 2.2-.3 1 2 2 1-.3 2.2L16 8l-1.2 1.9.3 2.2-2 1-1 2-2.2-.3L8 16l-1.9-1.2-2.2.3-1-2-2-1 .3-2.2L0 8l1.2-1.9-.3-2.2 2-1 1-2 2.2.3z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M5 8.2l2 2L11.2 6'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:699px){
  .pv4-badges{flex-direction:column;gap:0}
  .pv4-clinic-photos{grid-template-columns:1fr}
  .pv4-clinic-photos img{height:auto;aspect-ratio:4/3}
}
@media(min-width:700px){.pv4-clinic h2{font-size:36px;letter-spacing:-1.2px}}
@media(prefers-reduced-motion:reduce){.pv4-badges li,.pv4-badges li::before{transition:none}}

/* v2 story, expanded to a viewport-sized desktop split. */
.pv4-hero{padding-top:0;--pz-orange:#E16E37}
.pv4-hero .ph-step h1{font:500 26px/1.12 var(--display);letter-spacing:-.9px;margin:0 0 12px;max-width:19ch}
@media(min-width:700px){.pv4-hero .ph-step h1{font-size:32px}}
@media(min-width:960px){
  .pv4-hero .ph-story{--ph-h:calc(100svh - 70px);width:100%;max-width:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0}
  .pv4-hero .ph-panel{grid-column:2;grid-row:1;top:70px;border-radius:0;margin:0;height:var(--ph-h)}
  .pv4-hero .ph-steps{grid-column:1;grid-row:1;padding:0}
  .pv4-hero .ph-step,.pv4-hero .ph-step:first-child{min-height:var(--ph-h);padding:36px clamp(30px,5vw,100px)}
  .pv4-hero .ph-step :is(h1,h2){font-size:clamp(30px,2.65vw,48px);letter-spacing:-1.3px}
  .pv4-hero .ph-photo{width:100%;max-width:440px;margin-top:22px}
  .pv4-hero .ph-photo img{aspect-ratio:16/10}
  .pv4-hero .ph-faces{width:100%;max-width:440px}
  .pv4-hero .ph-next{padding-top:40px}
}
/* An editorial blog grid, aligned with the surrounding section headings. */
.pv4-blog{padding:72px 0 32px;text-align:left}
.pv4-blog .pv4-blog-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;margin-bottom:24px}
.pv4-blog h2{margin:0;text-align:left;font-size:36px;letter-spacing:-1.2px}
.pv4-blog .ph-link{margin:0;font-size:14px}
.pv4-blog .blogpanel{margin:0;padding:0;background:transparent;border-radius:0}
.pv4-blog .bgrid{gap:32px 24px}
.pv4-blog .bcard{background:var(--white);border-radius:var(--radius-card);padding:10px 10px 20px}
.pv4-blog .bcard .t,.pv4-blog .bcard .m{margin-left:10px;margin-right:10px}
.pv4-blog .bcard img{border-radius:10px}
.pv4-blog .bcard:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media(max-width:699px){
  .pv4-blog{padding-top:48px}
  .pv4-blog h2{font-size:30px;letter-spacing:-1px}
  .pv4-blog .bgrid{gap:20px}
}

/* Visit-page mobile revision; the word cloud alone carries the softer palette. */
.visit-refresh .pv4-complex .pz-stats strong{color:#E16E37}
.visit-cloud-key{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;padding:0;margin:18px 0 0;font-size:11px;line-height:1.5;color:var(--ink-soft)}
.visit-cloud-key li{display:inline-flex;align-items:center;gap:6px}
.visit-cloud-key li::before{content:"";width:7px;height:7px;border-radius:50%;background:#786B65}
.visit-cloud-key .nerve::before{background:#A95670}
.visit-cloud-key .mood::before{background:#497B75}
.visit-cloud-key .muscles::before{background:#B85C3A}
.visit-refresh .pz2-cloud{margin-top:12px}
.visit-refresh .pv4-specialties{padding-top:56px;padding-bottom:20px}
/* Reserve enough of the viewport to show the following episode's artwork. */
@media(max-width:699px){
  .visit-refresh .podcast-viewport{margin-inline:-30px}
  .visit-refresh .podcast-card{flex-basis:calc(100vw - 100px);width:calc(100vw - 100px)}
  .visit-refresh .podcast-card-link{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px;min-height:122px}
  .visit-refresh .podcast-art{width:72px;height:72px}
  .visit-refresh .podcast-copy h3{font-size:17px}
}
/* One full-width lead, then six equal tiles on every screen size. */
@media(min-width:700px){
  .visit-refresh .pv4-tiles{--cols:3;grid-template-columns:repeat(3,minmax(0,1fr))}
  .visit-refresh .pv4-tile,.visit-refresh .pv4-tile:nth-child(n+5){grid-column:auto}
  .visit-refresh .pv4-tile:first-child{grid-column:1/-1}
  .visit-refresh .pv4-tile:first-child .pv4-art{height:calc(var(--art-h)*1.18)}
}
/* Desktop: three equal cards above four equal cards, with readable artwork. */
@media(min-width:960px){
  .visit-refresh .pv4-specialties{padding-top:36px;padding-bottom:20px}
  .visit-refresh .pv4-specialties h2{font-size:30px;margin-bottom:18px}
  .visit-refresh .pv4-tiles{--cols:4;--gap:14px;--art-h:clamp(170px,14vw,200px);grid-template-columns:repeat(12,minmax(0,1fr))}
  .visit-refresh .pv4-tile{gap:10px;padding-bottom:12px}
  .visit-refresh .pv4-tile:nth-child(-n+3){grid-column:span 4}
  .visit-refresh .pv4-tile:nth-child(n+4){grid-column:span 3}
  .visit-refresh .pv4-tile:first-child .pv4-art{height:var(--art-h)}
  .visit-refresh .pv4-art img{height:calc(var(--art-h)*.75);max-width:88%;object-fit:contain}
}

/* Keep the two clinic panels together on tablets, with bars below their labels. */
@media(min-width:700px) and (max-width:1049px){
  .visit-refresh .pv4-evidence>.wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
  .visit-refresh .pv4-evidence .pz2-kicker{grid-column:1/-1;margin-bottom:0}
  .visit-refresh .pv4-evidence .pz-card{display:flex;flex-direction:column;margin:0;padding:24px 20px}
  .visit-refresh .pv4-evidence .pz-card h2{font-size:22px;min-height:2.4em}
  .visit-refresh .pv4-evidence .pz-bars{flex:1;display:flex;flex-direction:column;justify-content:space-between}
  .visit-refresh .pv4-evidence .pz-bars li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'label value' 'track track';gap:6px 10px}
  .visit-refresh .pv4-evidence .pz-bars .label{font-size:13px;white-space:normal}
  .visit-refresh .pv4-evidence .pz-bars .value{font-size:13px}
  .visit-refresh .pv4-evidence .pz-stats strong{font-size:40px}
  .visit-refresh .pv4-evidence .pz2-cloud{flex:1;height:auto;min-height:330px}
}