/* Shade Studio (teeth whitening) — route-local composition (signature system). Shared smile-scene states live in system.css. */
.ls-explorer--whitening{position:relative;background:linear-gradient(160deg,#14263a 0%,#1a2b3b 58%,#1c2f41 100%);color:#fff;padding:clamp(28px,5vw,64px) clamp(18px,4vw,56px) clamp(24px,3vw,40px);overflow:hidden}
.ls-explorer--whitening::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60vw;height:60vw;max-width:820px;max-height:820px;border-radius:50%;background:radial-gradient(closest-side,rgba(159,179,164,.16),rgba(159,179,164,0));pointer-events:none}
.ls-explorer--whitening .ls-hero{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"copy stage" "panel stage";gap:28px clamp(24px,4vw,56px);max-width:1240px;margin:0 auto;align-items:start}
.ls-explorer--whitening .ls-hero-copy{grid-area:copy}
.ls-explorer--whitening .ls-stage{grid-area:stage;display:grid;gap:14px;position:sticky;top:88px}
.ls-explorer--whitening .ls-panel{grid-area:panel;background:var(--ls-paper);color:var(--ls-ink);border-radius:20px;padding:22px 22px 24px;min-height:300px}
.ls-explorer--whitening .ls-eyebrow{color:rgba(255,255,255,.66)}
.ls-explorer--whitening h1{margin:0 0 18px;font:400 clamp(36px,4.2vw,56px)/1.04 var(--ls-serif);letter-spacing:-.025em;color:#fff;max-width:14ch}
.ls-explorer--whitening h1 i{font-style:italic;color:#d7dfe6}
.ls-explorer--whitening .ls-deck{color:rgba(255,255,255,.84);margin:0}
.ls-explorer--whitening .ls-disclosure{max-width:1240px;margin:22px auto 0}
.ls-explorer--whitening .ls-modes{justify-self:start;max-width:100%}
.ls-explorer--whitening .ls-figure{padding:10px}
.ls-explorer--whitening .ls-notes--stages h2{font-size:22px}
.ls-explorer--whitening .ls-journey-strip{margin-top:0}
/* the host page (.ws) sets its own paragraph, heading and button rules */
.ls-explorer--whitening p{margin:0}
.ls-explorer--whitening .ls-panel-hint{margin:0 0 14px}
.ls-explorer--whitening .ls-panel-copy{margin:14px 0 0}
.ls-explorer--whitening .ls-notes p{margin:0 0 8px}
.ls-explorer--whitening .ls-notes h2{margin:0 0 6px;font:400 23px/1.1 var(--ls-serif);letter-spacing:-.02em;color:var(--ls-navy)}
.ls-explorer--whitening .ls-ask{margin-top:12px}
.ls-explorer--whitening .ls-chips button,.ls-explorer--whitening .ls-ghost,.ls-explorer--whitening .ls-modes [role="tab"],.ls-explorer--whitening .ls-steps button{font-family:var(--ls-sans)}
.ls-explorer--whitening .ls-button{color:var(--ls-navy)}
.ls-explorer--whitening .ls-inline-link{color:var(--ls-accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ls-explorer--whitening .sm-control{display:grid;gap:6px;margin:0 0 12px;font:600 13px/1.2 var(--ls-sans)}
.ls-explorer--whitening .sm-control input[type="range"]{width:100%;height:44px;margin:0;accent-color:var(--ls-accent);cursor:pointer}
.ls-explorer--whitening .sm-control-ends{display:flex;justify-content:space-between;font:400 12px/1.2 var(--ls-sans);color:rgba(31,42,58,.62)}
.ls-explorer--whitening .sm-toggles{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.ls-explorer--whitening .sm-toggles button{appearance:none;border:1px solid var(--ls-line);background:#fff;color:var(--ls-ink);font:500 13.5px/1.1 var(--ls-sans);padding:0 14px;min-height:44px;border-radius:999px;cursor:pointer;transition:border-color var(--ls-fast) ease,background var(--ls-fast) ease,color var(--ls-fast) ease}
.ls-explorer--whitening .sm-toggles button:hover{border-color:var(--ls-accent)}
.ls-explorer--whitening .sm-toggles button[aria-pressed="true"]{background:var(--ls-navy);border-color:var(--ls-navy);color:#fff}
.ls-explorer--whitening .sm-toggles button:focus-visible{outline:2px solid var(--ls-accent);outline-offset:2px}
/* facts strip under the hero (shared look with the implant page) */
.whitening-page .ls-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;padding:14px clamp(18px,4vw,56px);background:#fff;border-bottom:1px solid var(--ls-line)}
.whitening-page .ls-facts p{margin:0;display:flex;align-items:center;gap:10px;font:500 13.5px/1.3 var(--ls-sans);color:var(--ls-ink)}
.whitening-page .ls-facts p span{font:400 14px/1 var(--ls-serif);color:var(--ls-accent)}
@media (max-width:1100px){.ls-explorer--whitening .ls-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "stage" "panel"}.ls-explorer--whitening .ls-stage{position:static}}
@media (max-width:720px){.ls-explorer--whitening{padding:26px 16px 22px}.ls-explorer--whitening h1{font-size:34px}.ls-explorer--whitening .ls-figure{padding:8px;border-radius:14px}.ls-explorer--whitening .ls-panel{padding:18px 16px 20px;border-radius:14px}.ls-explorer--whitening .ls-notes h2{font-size:21px}.whitening-page .ls-facts{grid-template-columns:1fr;gap:8px}}