.use-first{padding:26px 30px;background:#eee8dc;border-left:3px solid #ac8b50;border-radius:0 16px 16px 0;margin:34px 0 60px}.use-first strong{font-size:23px}.use-first p{max-width:980px;color:#53606a}.use-guide{padding:64px 0;border-top:1px solid #d9ccb5;scroll-margin-top:24px}.use-guide header>p{max-width:850px;color:#53606a;font-size:21px}.use-step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:34px 0 26px}.use-step-media{position:relative;margin-bottom:22px}.use-step-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}.use-step-media img[src$=".svg"]{object-fit:contain;background:#eee8dc}.use-step-media img[src*="catalog-"]{object-fit:contain;background:#172125}.use-step-media span{position:absolute;top:12px;left:12px;width:40px;height:40px;display:grid;place-items:center;background:#faf6ed;color:#80643a;border:1px solid #cdb88e;border-radius:50%;font-size:16px}.h2-explainer .use-step-grid h3{font:600 21px/1.3 Arial,sans-serif;letter-spacing:0}.use-step-grid p{font-size:16px;line-height:1.65;color:#53606a}.use-detail{display:inline-block;margin-top:12px}@media(max-width:1100px){.use-step-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}@media(max-width:600px){.use-step-grid{grid-template-columns:1fr;gap:32px}.use-guide{padding:40px 0}.use-first{padding:20px}.use-guide header>p{font-size:18px}.use-step-media img{aspect-ratio:4/3}}
.device-use-inline{padding:0}.device-use-inline .use-guide{padding-bottom:48px}

/* Appliance-only photographic sequences. Each frame is one third of a triptych. */
.use-step-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.use-photo-panel{aspect-ratio:1;overflow:hidden;border-radius:16px}.use-photo-panel img{position:absolute;top:0;width:300%;max-width:none!important;height:100%;aspect-ratio:auto;object-fit:fill;border-radius:0}.use-photo-panel .photo-panel-0{left:0}.use-photo-panel .photo-panel-1{left:-100%}.use-photo-panel .photo-panel-2{left:-200%}@media(max-width:700px){.use-step-grid{grid-template-columns:1fr}.use-photo-panel img{aspect-ratio:auto}}

/* Four Spa steps form balanced pairs, with a shared square photo frame. */
.use-step-grid:is(.spa-four-steps,.air-four-steps){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;row-gap:48px}
:is(.spa-four-steps,.air-four-steps)>li{min-width:0;display:grid;grid-template-rows:auto auto 1fr;align-content:start}
:is(.spa-four-steps,.air-four-steps) .use-step-media{width:100%;aspect-ratio:1;overflow:hidden;border-radius:16px;margin-bottom:22px}
:is(.spa-immersion,.air-cannula) img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
:is(.spa-four-steps,.air-four-steps) h3{min-height:1.3em}
@media(max-width:700px){.use-step-grid:is(.spa-four-steps,.air-four-steps){grid-template-columns:1fr;row-gap:34px}}

/* Reduce Spa photo cards by 10%, keeping the gap and two-column balance. */
.use-step-grid:is(.spa-four-steps,.air-four-steps){width:calc(90% + 3.6px);margin-left:auto;margin-right:auto}
@media(max-width:700px){.use-step-grid:is(.spa-four-steps,.air-four-steps){width:90%}}
/* Matching medium-size photos for every device guide. */
.use-guide .use-step-grid,
.use-guide .use-step-grid:is(.spa-four-steps,.air-four-steps){width:100%;max-width:930px;margin:34px auto 26px;grid-template-columns:repeat(2,minmax(0,450px));justify-content:center;gap:36px 30px}
.use-guide .use-step-grid>li{min-width:0;display:grid;grid-template-rows:auto auto 1fr;align-content:start}
.use-guide .use-step-grid>li:last-child:nth-child(odd){grid-column:1 / -1;width:calc((100% - 30px) / 2);justify-self:center}
.use-guide .use-step-media{width:100%;aspect-ratio:1;margin-bottom:18px;overflow:hidden;border-radius:16px}
.use-guide .use-step-media:not(.use-photo-panel) img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
@media(max-width:700px){.use-guide .use-step-grid,.use-guide .use-step-grid:is(.spa-four-steps,.air-four-steps){max-width:450px;grid-template-columns:minmax(0,450px);gap:32px}.use-guide .use-step-grid>li:last-child:nth-child(odd){grid-column:auto;width:100%}}

/* Four full-bathtub photographs share one square sprite. */
.use-guide .spa-bath-panel img{position:absolute;inset:auto;width:200%;height:200%;max-width:none!important;aspect-ratio:auto;object-fit:fill;border-radius:0}
.use-guide .spa-bath-0 img{left:0;top:0}.use-guide .spa-bath-1 img{left:-100%;top:0}.use-guide .spa-bath-2 img{left:0;top:-100%}.use-guide .spa-bath-3 img{left:-100%;top:-100%}