/* zima-dental-pod-review: page-only parts. Loads after site.css and article.css and reuses their tokens
   and the TIDY KIT (rc-tsec, rc-shead, rc-icards, rc-pc2, rc-pquote, rc-choose, rc-expand, rc-srcline, rc-rels).
   Page classes start with zpr-. */

.zpr-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

/* ---------- hero: the verdict box takes the cover's place ---------- */
.zpr-verdict{display:grid;gap:.85rem;padding:clamp(1rem,.8rem + .8vw,1.4rem);border-radius:var(--r-xl);background:linear-gradient(160deg,#fff 55%,var(--aqua-tint));border:1px solid var(--mist-2);box-shadow:var(--sh-2);scroll-margin-top:6rem}
.zpr-verdict__top{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:.85rem;align-items:center}
.zpr-verdict__art{display:grid;place-items:center;width:4.5rem;height:4.5rem;border-radius:16px}
.zpr-verdict__art>svg{width:94%;height:auto}
.zpr-verdict__kicker{font:700 .84rem/1.3 var(--body);color:var(--muted)}
.zpr-verdict__word{display:flex;align-items:center;gap:.45rem;margin-top:.15rem;font:600 clamp(1.2rem,1.05rem + .6vw,1.45rem)/1.2 var(--display);color:var(--ink)}
.zpr-verdict__word::before{content:"";flex:none;width:.7rem;height:.7rem;border-radius:999px;background:var(--lav);box-shadow:0 0 0 4px var(--lav-tint)}
.zpr-verdict__rows{display:grid;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);overflow:hidden}
.zpr-verdict__rows>div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.6rem;align-items:baseline;padding:.6rem .8rem}
.zpr-verdict__rows>div+div{border-top:1px solid var(--line)}
.zpr-verdict__rows dt{display:flex;align-items:center;gap:.4rem;font:600 .875rem/1.3 var(--display);color:var(--aqua-900)}
.zpr-verdict__rows dt .ic{flex:none;width:1rem;height:1rem;color:var(--aqua);stroke-width:2.6}
.zpr-verdict__rows dd{font-size:.94rem;line-height:1.45;color:var(--ink)}
.zpr-verdict__skip{background:var(--lav-tint)}
.zpr-verdict__skip dt{color:#4a3292}
.zpr-verdict__skip dt .ic{color:var(--lav)}
@media (max-width:359px){.zpr-verdict__rows>div{grid-template-columns:1fr;gap:.2rem}}
@media (max-width:479px){.zpr-verdict .zpr-actions .rc-btn{flex:1 1 9rem}}

/* ---------- how to use: numbered tiles ---------- */
.zpr-num{font:700 1.05rem var(--display);color:var(--aqua-800)}
/* 4 steps: 2 + 2 on phones and tablets, 4 across from 768; 8 spec tiles: 4 + 4 from 640 */
.zpr-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.zpr-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:640px){#specs .rc-keyspecs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zpr-duo{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}

/* ---------- tablets ---------- */
.zpr-ticks a{color:var(--aqua-800);font-weight:700}
.rc-tsec>.rc-more{justify-self:start;white-space:normal}

/* ---------- owners: photo beside two sample quotes ---------- */
.zpr-media{display:grid;gap:.75rem;align-items:start}
.zpr-photo{margin:0;display:grid;gap:.4rem}
.zpr-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-l);background:var(--mist)}
.zpr-photo figcaption{font-size:.8125rem;color:var(--muted);line-height:1.45}
.zpr-quotes{display:grid;gap:.65rem}
.zpr-pquote--con{border-left-color:var(--rasp-line)}
@media (min-width:768px){
  .zpr-media{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch}
  .zpr-photo{grid-template-rows:1fr auto}
  .zpr-photo img{height:100%;min-height:12rem;aspect-ratio:auto}
}

/* ---------- vs Pro ---------- */
.rc-choose__card .zpr-actions{margin-top:.2rem}
@media (max-width:479px){.rc-choose__card .zpr-actions .rc-btn{flex:1 1 9rem}}
.rc-choose__card>.rc-warnline{margin-top:.1rem}
/* the Pro's own spec rows (the Dental Pod's are the tiles in #specs) */
.zpr-prospecs{display:grid;gap:.25rem;padding:.75rem 1rem .5rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.zpr-prospecs__title{display:flex;align-items:center;gap:.45rem;font:600 .98rem/1.3 var(--display);color:var(--ink)}
.zpr-prospecs__title .ic{width:1.05rem;height:1.05rem;color:var(--lav)}
.zpr-prospecs .rc-specrows>div:last-child{border-bottom:0}
@media (min-width:640px){.zpr-prospecs .rc-specrows{grid-template-columns:repeat(2,minmax(0,1fr))}.zpr-prospecs .rc-specrows>div:nth-last-child(2):nth-child(odd){border-bottom:0}}

/* ---------- alternatives: compact cards ---------- */
.zpr-alts{display:grid;gap:.65rem}
.zpr-alt{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:.4rem .8rem;align-content:start;padding:.85rem .9rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.zpr-alt__art{display:grid;place-items:center;width:4rem;height:4rem;border-radius:14px}
.zpr-alt__art>svg{width:92%;height:auto}
.zpr-alt__body{display:grid;gap:.15rem;align-content:start}
.zpr-alt__need{font:700 .8125rem/1.3 var(--body);color:var(--lav)}
.zpr-alt h3{font:600 1.02rem/1.25 var(--display);color:var(--ink)}
.zpr-alt p{font-size:.9rem;line-height:1.45;color:var(--text)}
.zpr-alt__cta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem}
@media (max-width:479px){.zpr-alt__cta .rc-btn{flex:1 1 7rem}}
@media (min-width:768px){.zpr-alts{grid-template-columns:repeat(3,minmax(0,1fr))}.zpr-alt{display:flex;flex-direction:column;gap:.5rem}.zpr-alt__cta{margin-top:auto;align-self:stretch}.zpr-alt__cta .rc-btn{flex:1 1 6.5rem}}

/* ---------- one method line under the FAQ ---------- */
.zpr-method{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem;line-height:1.5;color:var(--muted)}
.zpr-method .ic{flex:none;width:1.05rem;height:1.05rem;margin-top:.12rem;color:var(--aqua)}
.zpr-method a{color:var(--aqua-800);font-weight:700}

/* ---------- related ---------- */
.zpr-taglinks{display:flex;flex-wrap:wrap;gap:.5rem}
.rc-rel__media.rc-art{display:grid;place-items:center}

/* ---------- related: 3 cards on one row from 768 (no card left alone); the heading never squeezes ---------- */
.rc-related__head{flex-wrap:wrap}
.rc-related__head h2{flex:none}
@media (min-width:768px){
  .rc-rels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rc-rel{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;gap:.6rem;padding:.5rem .5rem .85rem}
  .rc-rel__media{aspect-ratio:16/9}
  .rc-rel__media>svg{position:absolute;top:6%;left:50%;height:88%;width:auto;transform:translateX(-50%)}
  .rc-rel__body{padding-inline:.35rem}
}
