/* generated by prep.py from mockup/body/preventive-dentistry.html */

.p-media .float .fi{width:56px;height:56px;border-radius:14px;background:var(--sun);color:var(--ink);display:grid;place-items:center;flex:none}
.p-media .float .fi :is(svg,.nsi){width:26px;height:26px}
.p-media .float{padding:14px 18px}

.vs5{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative}
.vs5::before{content:"";position:absolute;top:34px;left:6%;right:6%;height:3px;background:repeating-linear-gradient(90deg,var(--royal) 0 10px,transparent 10px 20px);opacity:.35}
.vs5 .vs .num{margin-bottom:18px}
.vs5 .vs:last-child .num{background:var(--ink);border-color:var(--ink);color:var(--sun)}
.tip{margin-top:40px;display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 22px;max-width:820px}
.tip :is(svg,.nsi){color:var(--royal);flex:none;width:22px;height:22px}
.tip p{font-size:15.5px;color:var(--muted)}

.signs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.signs .bt{border-top:4px solid var(--royal)}
.signs .bt .ic{background:#fdeceb;color:#b4423c}
.gum-note{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:24px;background:var(--cream);border:1px solid var(--cream-2);border-radius:var(--radius-sm);padding:18px 24px}
.gum-note p{font-weight:500}
.gum-note p a{color:var(--royal);font-weight:600}

.xr{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.xr h2{font-size:clamp(30px,3.4vw,44px);margin:14px 0 16px;color:#fff}
.xr p{color:#c3c6e2;margin-bottom:14px}
.xr-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.xr-stats div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:26px}
.xr-stats b{display:block;font:800 30px Poppins,"Poppins Fallback";color:var(--sun);margin-bottom:6px}
.xr-stats span:where(:not(.nsi)):where(:not(.nsi)):where(:not(.nsi)):where(:not(.nsi)):where(:not(.nsi)){color:#c3c6e2;font-size:15px}

.prot{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pc{background:#fff;border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:10px;box-shadow:0 14px 40px -30px rgba(6,0,47,.5)}
.pc .ic{width:52px;height:52px;border-radius:16px;background:var(--royal);color:var(--sun);display:grid;place-items:center;margin-bottom:6px}
.pc .ic :is(svg,.nsi){width:24px;height:24px}
.pc h3{font-size:19px}
.pc p{font-size:15px;color:var(--muted)}
.prot-foot{margin-top:24px;color:var(--muted)}
.prot-foot a{color:var(--royal);font-weight:600}

.home-care{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.home-care .ph-wrap{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.home-care .ph-wrap img{width:100%;aspect-ratio:4/3;object-fit:cover}
.home-care h2{font-size:clamp(30px,3.4vw,44px);margin:14px 0 20px}
.checks{list-style:none;display:grid;gap:12px}
.checks li{display:flex;gap:14px;align-items:center;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-weight:500}
.checks li i{width:30px;height:30px;border-radius:50%;background:var(--sun);display:grid;place-items:center;flex:none;font-style:normal}
.checks li i :is(svg,.nsi){width:16px;height:16px}

@media (max-width:980px){
  .vs5{grid-template-columns:1fr 1fr}
  .vs5::before{display:none}
  .signs,.prot{grid-template-columns:1fr 1fr}
  .xr,.home-care{grid-template-columns:1fr}
}
@media (max-width:560px){
  .vs5,.signs,.prot,.xr-stats{grid-template-columns:1fr}
}