/* ============================================================
   DERMA MUSE | PDP v2
   Fork of succession/infra/whitelabel-pdp (wl-* pack), retokenised.
   Token budget extended 6 -> 9 (bg-alt, font-display, lilac split).
   All rules scoped under .dm-pdp, mirroring the wl- pack's CSS rule.
   ============================================================ */

.dm-pdp{
  /* --- the 9 tokens --- */
  --dm-brand:#3B1A45;          /* wl-brand   : aubergine, packaging barrel */
  --dm-accent:#7B5EC7;         /* wl-accent  : lilac, one accent per view  */
  --dm-ink:#1A1A1A;            /* wl-ink                                   */
  --dm-bg:#FFFFFF;             /* wl-bg                                    */
  --dm-bg-alt:#F9F6F4;         /* NEW: ivory alternating ground            */
  --dm-radius:16px;            /* wl-radius                                */
  --dm-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --dm-font-display:"Playfair Display",Georgia,"Times New Roman",serif; /* NEW */
  --dm-hairline:#E6E0E6;       /* NEW                                      */

  /* derived, not tokens */
  --dm-ink-mute:#5B5560;
  --dm-lilac-wash:#F1ECFB;
  --dm-shade-light:#F6E2C9;
  --dm-shade-natural:#E2BFA1;
  --dm-shade-medium:#C58F6A;
  --dm-shadow:0 10px 30px rgba(59,26,69,.08);
  --dm-shadow-lg:0 18px 48px rgba(59,26,69,.14);

  color:var(--dm-ink);
  background:var(--dm-bg);
  font-family:var(--dm-font);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
img{max-width:100%;display:block}

.dm-pdp .dm-wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
.dm-pdp .dm-narrow{max-width:820px;margin-inline:auto;padding-inline:20px}
.dm-pdp section{padding:64px 0}
.dm-pdp .dm-alt{background:var(--dm-bg-alt)}

/* ---------- type ---------- */
.dm-pdp h1,.dm-pdp h2,.dm-pdp h3{margin:0;font-weight:500}
.dm-pdp h1,.dm-pdp h2{font-family:var(--dm-font-display);color:var(--dm-brand);letter-spacing:-.01em}
.dm-pdp h2{font-size:clamp(26px,3.6vw,40px);line-height:1.15}
.dm-pdp h1{font-size:clamp(28px,3.4vw,38px);line-height:1.18}
.dm-pdp h3{font-family:var(--dm-font);font-size:19px;font-weight:600}
.dm-pdp .dm-em{font-style:italic;color:var(--dm-accent)}
.dm-pdp .dm-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dm-accent);margin:0 0 12px
}
.dm-pdp .dm-lede{font-size:18px;color:var(--dm-ink-mute);max-width:62ch;margin:14px 0 0}
.dm-pdp .dm-center{text-align:center}
.dm-pdp .dm-center .dm-lede{margin-inline:auto}
.dm-pdp .dm-micro{font-size:13px;color:var(--dm-ink-mute)}

/* ---------- buttons ---------- */
.dm-pdp .dm-btn{
  display:block;width:100%;border:0;cursor:pointer;text-align:center;text-decoration:none;
  border-radius:10px;background:var(--dm-brand);color:#fff;
  font:600 18px/1.2 var(--dm-font);padding:19px 22px;letter-spacing:.01em;
  transition:background .18s ease,transform .18s ease
}
.dm-pdp .dm-btn:hover{background:var(--dm-accent);transform:translateY(-1px)}
.dm-pdp .dm-btn--ghost{background:transparent;color:var(--dm-brand);border:1.5px solid var(--dm-brand)}
.dm-pdp .dm-btn--ghost:hover{background:var(--dm-brand);color:#fff}

/* ---------- pills / badges ---------- */
.dm-pdp .dm-pill{
  display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  border:1px solid var(--dm-accent);color:var(--dm-brand);background:transparent;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:7px 15px
}
.dm-pdp .dm-pill--fill{background:var(--dm-lilac-wash);border-color:transparent}
.dm-pdp .dm-spark{color:var(--dm-accent)}

/* ============ 1. promo bar (wl-promo-bar) ============ */
.dm-promo{background:var(--dm-brand);color:#fff;text-align:center;padding:11px 16px;font-size:14px;letter-spacing:.02em}
.dm-promo b{font-weight:600}
.dm-promo span{opacity:.75;margin-inline:8px}

/* --- header --- */
.dm-header{background:#fff;border-bottom:1px solid var(--dm-hairline)}
.dm-header-in{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:14px 0}
.dm-logo{
  font-family:var(--dm-font-display);font-size:23px;font-weight:500;letter-spacing:.01em;
  color:var(--dm-brand);text-decoration:none;white-space:nowrap
}
.dm-logo sup{font-size:9px;vertical-align:super;opacity:.65}
.dm-nav{display:flex;gap:26px;justify-self:center}
.dm-nav a{
  font-size:14px;font-weight:500;color:var(--dm-ink);text-decoration:none;
  padding-bottom:2px;border-bottom:1.5px solid transparent;transition:color .16s ease,border-color .16s ease
}
.dm-nav a:hover{color:var(--dm-brand);border-bottom-color:var(--dm-accent)}
.dm-nav a[aria-current="page"]{color:var(--dm-brand);border-bottom-color:var(--dm-brand)}
.dm-cart{
  position:relative;color:var(--dm-brand);display:grid;place-items:center;
  background:none;border:0;padding:6px;margin:-6px;cursor:pointer;transition:transform .16s ease
}
.dm-cart:hover{transform:translateY(-1px)}
.dm-cart-n{
  position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:9px;
  background:var(--dm-accent);color:#fff;font-size:10px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #fff
}
.dm-cart-n[hidden]{display:none}
.dm-cart.is-bumped{animation:dm-cart-bump .42s cubic-bezier(.3,1.4,.5,1)}
@keyframes dm-cart-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.dm-cart.is-bumped{animation:none}}
.dm-burger{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:6px 2px;cursor:pointer}
.dm-burger span{display:block;width:20px;height:1.8px;background:var(--dm-brand);border-radius:2px}

/* --- formula ticker --- */
.dm-ticker{background:var(--dm-lilac-wash);color:var(--dm-brand);padding:7px 0;overflow:hidden}
.dm-ticker-track{display:flex;gap:34px;width:max-content;animation:dm-scroll 34s linear infinite}
.dm-ticker span{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;display:flex;gap:34px;align-items:center
}
.dm-ticker i{color:var(--dm-accent);font-style:normal}
.dm-ticker--dark{background:var(--dm-brand);color:#fff}
.dm-ticker--dark i{color:#C48AF1}
.dm-ticker--dark .dm-ticker-track{animation-duration:42s;animation-direction:reverse}
@media (prefers-reduced-motion:reduce){.dm-ticker-track{animation:none}}

/* ---- survey stat bar (sits in a ticker slot, says more than one) ---- */
.dm-statbar{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(104deg,#2C1033 0%,var(--dm-brand) 46%,#4B2159 100%)
}
.dm-statbar::before{                                  /* one soft lilac bloom, keeps the slab from reading flat */
  content:"";position:absolute;left:8%;top:-70%;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(196,138,241,.30),transparent 66%);pointer-events:none
}
.dm-statbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,172,232,.5) 24%,rgba(196,172,232,.5) 76%,transparent)
}
.dm-statbar .dm-wrap{
  position:relative;display:flex;align-items:center;gap:15px;min-height:60px;padding-block:9px
}

.dm-statbar-ring{flex:none;position:relative;width:42px;height:42px;display:grid;place-items:center}
.dm-statbar-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.dm-statbar-ring circle{fill:none;stroke-width:2.4;stroke-linecap:round}
.dm-statbar-track{stroke:rgba(255,255,255,.20)}
.dm-statbar-arc{
  stroke:#fff;stroke-dasharray:91.1;stroke-dashoffset:91.1;
  transition:stroke-dashoffset .85s cubic-bezier(.3,.7,.3,1)
}
.dm-statbar-ring em{
  font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums
}

.dm-statbar-lines{
  position:relative;flex:1;min-width:0;list-style:none;margin:0;padding:0;
  display:grid;align-items:center
}
.dm-statbar-lines li{
  grid-area:1/1;font-size:14.5px;line-height:1.35;color:rgba(255,255,255,.94);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.3,.7,.3,1)
}
.dm-statbar-lines li.is-on{opacity:1;transform:none}

.dm-statbar-dots{flex:none;display:flex;gap:5px}
.dm-statbar-dots b{
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28);
  transition:background .3s ease,transform .3s ease
}
.dm-statbar-dots b.is-on{background:#fff;transform:scale(1.35)}

.dm-statbar-src{
  flex:none;padding-left:15px;border-left:1px solid rgba(255,255,255,.16);
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.58);max-width:230px;line-height:1.45
}

@media (max-width:900px){
  .dm-statbar .dm-wrap{gap:12px}
  .dm-statbar-lines li{font-size:13.5px}
  .dm-statbar-src{max-width:150px;font-size:8.5px;padding-left:12px}
}
@media (max-width:680px){
  .dm-statbar .dm-wrap{flex-wrap:wrap;gap:10px 12px;padding-block:11px}
  .dm-statbar-ring{width:36px;height:36px}
  .dm-statbar-ring em{font-size:11px}
  .dm-statbar-lines{flex:1 1 auto}
  .dm-statbar-lines li{font-size:13px}
  .dm-statbar-dots{order:3}
  .dm-statbar-src{
    order:4;flex:1 1 100%;padding-left:0;border-left:0;padding-top:8px;
    border-top:1px solid rgba(255,255,255,.14);max-width:none;font-size:8.5px
  }
}
@media (prefers-reduced-motion:reduce){
  .dm-statbar-arc,.dm-statbar-lines li,.dm-statbar-dots b{transition:none}
}

/* ============ 2. main: gallery + buybox (wl-pdp-main + wl-buybox) ============ */
/* ---- shade tone tint (experiment) ----
   Picking a shade family washes the main section in that family's tone. Two
   values per shade: --tone-wash for the section ground, --tone-edge for the
   surfaces that sit on it. Everything below the fold is untouched, and the
   tint fades to white before the section ends so the page reads unchanged.
   Kill the whole thing by removing data-tone from <body> (see dm-pdp.js). */
/* each pair is the real swatch hex lifted toward white: enough tint to read as
   a different room, not enough to fight the aubergine type on top of it */
.dm-pdp[data-tone="light"]   .dm-main{--tone-wash:#FAEFE0;--tone-edge:#F4E2C9}
.dm-pdp[data-tone="natural"] .dm-main{--tone-wash:#F5E7D8;--tone-edge:#EBD4BC}
.dm-pdp[data-tone="medium"]  .dm-main{--tone-wash:#EFDCCB;--tone-edge:#E2C4AC}

.dm-main{
  position:relative;padding-top:34px;
  background-color:var(--tone-wash,#fff);
  transition:background-color .55s cubic-bezier(.3,.7,.3,1)
}
/* white fade so the tint never reaches the next section's edge */
.dm-main::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:20%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff)
}
.dm-main > *{position:relative;z-index:1}
.dm-gallery .dm-stage,
.dm-thumbs button{
  transition:background-color .7s cubic-bezier(.3,.7,.3,1)
}
.dm-pdp[data-tone] .dm-gallery .dm-stage,
.dm-pdp[data-tone] .dm-thumbs button{background-color:var(--tone-edge)}
.dm-pdp[data-tone] .dm-gquote{
  background-color:var(--tone-edge);transition:background-color .55s cubic-bezier(.3,.7,.3,1)
}
/* The shade boxes stay white, including the selected one. A tone judgement
   needs a neutral surround: filling the card with the family colour puts the
   swatch circle on a version of itself and the eye cannot read it. Selection
   is carried by the ring and the halo instead. */
.dm-pdp[data-tone] .dm-swatch{background-color:#fff}
.dm-pdp[data-tone] .dm-swatch[aria-checked="true"]{
  background-color:#fff;
  box-shadow:0 0 0 3px var(--tone-edge),0 8px 22px -12px rgba(59,26,69,.5);
  transition:box-shadow .3s ease,border-color .16s ease
}
/* a thin tone ring around the circle, the only place the family colour lands */
.dm-pdp[data-tone] .dm-swatch[aria-checked="true"] i{
  box-shadow:0 0 0 4px var(--tone-wash)
}
/* Every surface the buyer decides on stays white. The tint lives in the space
   around them, not under the prices, shades or the per-stick pickers. */
.dm-pdp[data-tone] .dm-buybox .dm-tier,
.dm-pdp[data-tone] .dm-buybox .dm-subscribe[data-on="false"],
.dm-pdp[data-tone] .dm-buybox .dm-addon[data-on="false"],
.dm-pdp[data-tone] .dm-buybox .dm-shades,
.dm-pdp[data-tone] .dm-buybox .dm-srow-sel,
.dm-pdp[data-tone] .dm-buybox .dm-vthumb{background-color:#fff}
@media (prefers-reduced-motion:reduce){
  .dm-main,.dm-gallery .dm-stage,.dm-thumbs button,.dm-pdp[data-tone] .dm-gquote{transition:none}
}
.dm-main .dm-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:start}
.dm-gallery{position:sticky;top:24px}
.dm-gallery .dm-stage{
  position:relative;border-radius:var(--dm-radius);overflow:hidden;background:var(--dm-bg-alt);
  box-shadow:var(--dm-shadow)
}
.dm-gallery .dm-stage img{width:100%;aspect-ratio:1/1;object-fit:cover}
.dm-gallery .dm-stage .dm-stage-badge{position:absolute;left:16px;top:16px;background:#fff;box-shadow:var(--dm-shadow)}
/* --- actives strip, sits between the stage and the thumbs --- */
.dm-actives{
  position:relative;margin-top:20px;background:#fff;
  border:1px solid rgba(123,94,199,.17);border-radius:14px;
  box-shadow:0 1px 2px rgba(59,26,69,.045),inset 0 1px 0 #fff
}
.dm-actives-bar{
  position:relative;display:flex;align-items:center;width:100%;padding:13px 46px 12px;
  background:linear-gradient(180deg,#fff 0%,#FCFAFD 100%);border:0;border-radius:13px;
  cursor:pointer;text-align:center;transition:background .2s ease
}
.dm-actives[data-open="true"] .dm-actives-bar{border-radius:13px 13px 0 0}
.dm-actives-bar:hover{background:linear-gradient(180deg,#fff 0%,#F8F4FA 100%)}
.dm-actives-bar:focus-visible{outline:0;box-shadow:inset 0 0 0 2px rgba(123,94,199,.45)}
/* the label floats on the top edge, so the actives get the whole line */
.dm-actives-eyebrow{
  position:absolute;top:-9px;left:15px;z-index:2;
  display:flex;align-items:center;gap:5px;padding:3px 10px 3.5px;
  background:#fff;border:1px solid rgba(123,94,199,.24);border-radius:999px;
  box-shadow:0 1px 3px rgba(59,26,69,.07);
  font-size:8.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dm-ink-mute)
}
.dm-actives-eyebrow::before{content:"✦";font-size:8px;letter-spacing:0;color:var(--dm-accent);opacity:.8}
/* the actives carry the display face, which is where the premium reads */
.dm-actives-list{
  flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 9px
}
.dm-actives-list i{
  font-family:var(--dm-font-display);font-style:normal;font-weight:500;font-size:13.6px;
  letter-spacing:.005em;color:var(--dm-brand);white-space:nowrap
}
.dm-actives-list i + i::before{
  content:"";display:inline-block;width:1px;height:11px;margin-right:9px;vertical-align:-1px;
  background:linear-gradient(180deg,transparent,rgba(123,94,199,.42),transparent)
}
.dm-actives-cue{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(123,94,199,.22);color:var(--dm-accent);background:#fff;
  transition:background .2s ease,border-color .2s ease
}
.dm-actives-cue em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dm-actives-cue svg{width:13px;height:13px;transition:transform .26s cubic-bezier(.3,.7,.3,1)}
.dm-actives-bar:hover .dm-actives-cue{background:rgba(123,94,199,.09);border-color:rgba(123,94,199,.4)}
.dm-actives[data-open="true"] .dm-actives-cue{background:var(--dm-brand);border-color:var(--dm-brand);color:#fff}
.dm-actives[data-open="true"] .dm-actives-cue svg{transform:rotate(180deg)}
.dm-actives[data-open="true"] .dm-actives-bar{background:linear-gradient(180deg,#FCFAFD 0%,#F7F2F9 100%)}

.dm-actives-panel[hidden]{display:none}
.dm-actives-panel{
  padding:2px 16px 13px;border-top:1px solid var(--dm-hairline);border-radius:0 0 13px 13px;
  animation:dm-actives-in .3s ease
}
@keyframes dm-actives-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dm-actives-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.dm-actives-grid li{
  display:grid;grid-template-columns:26px 1fr;gap:0 10px;align-items:start;
  padding:11px 0;border-bottom:1px solid rgba(230,224,230,.7)
}
.dm-actives-grid li:nth-last-child(-n+2){border-bottom:0;padding-bottom:4px}
.dm-actives-ico{
  grid-row:span 2;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(160deg,#F6F1FB,#EDE4F5);color:var(--dm-brand);margin-top:2px;
  box-shadow:inset 0 0 0 1px rgba(123,94,199,.13)
}
.dm-actives-ico svg{width:14px;height:14px}
.dm-actives-grid b{
  font-family:var(--dm-font-display);font-weight:500;font-size:14px;letter-spacing:.005em;
  color:var(--dm-brand)
}
.dm-actives-grid span:not(.dm-actives-ico){font-size:11.5px;line-height:1.5;color:var(--dm-ink-mute);margin-top:3px}
.dm-actives-foot{
  margin:11px 0 0;padding-top:10px;border-top:1px solid var(--dm-hairline);
  font-size:11px;color:var(--dm-ink-mute)
}
.dm-actives-foot a{color:var(--dm-accent);font-weight:600;text-decoration:underline}
@media (prefers-reduced-motion:reduce){
  .dm-actives-panel{animation:none}
  .dm-actives-cue svg{transition:none}
}
@media (max-width:600px){
  .dm-actives-bar{padding:12px 40px 11px}
  .dm-actives-list i{font-size:12.4px}
  .dm-actives-list i + i::before{margin-right:7px}
  .dm-actives-grid{grid-template-columns:1fr}
  .dm-actives-grid li:nth-last-child(-n+2){border-bottom:1px solid rgba(230,224,230,.7);padding-bottom:11px}
  .dm-actives-grid li:last-child{border-bottom:0;padding-bottom:4px}
}

.dm-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}
.dm-thumbs button{
  padding:0;border:1.5px solid transparent;background:var(--dm-bg-alt);border-radius:10px;
  overflow:hidden;cursor:pointer;aspect-ratio:1/1
}
.dm-thumbs button img{width:100%;height:100%;object-fit:cover}
.dm-thumbs button[aria-current="true"]{border-color:var(--dm-brand)}

/* --- gallery testimonial (under the thumbs) --- */
.dm-gquote{
  display:grid;grid-template-columns:46px 1fr;gap:13px;align-items:start;
  margin:16px 0 0;padding:14px 15px;background:var(--dm-bg-alt);
  border:1px solid var(--dm-hairline);border-radius:12px
}
.dm-gquote-face{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.12)
}
.dm-gquote blockquote{
  margin:0;font-size:14px;line-height:1.5;color:var(--dm-ink);letter-spacing:-.002em
}
.dm-gquote figcaption{
  margin-top:9px;padding-top:8px;border-top:1px solid var(--dm-hairline);
  font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--dm-ink-mute)
}

/* buybox */
.dm-buybox .dm-rating{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:14px}

/* --- social proof strip --- */
.dm-vsp{display:flex;align-items:center;gap:9px;margin:0 0 9px}
.dm-vsp-avs{display:flex;flex:0 0 auto}
.dm-vsp-avs img{
  width:30px;height:30px;border-radius:50%;object-fit:cover;display:block;background:var(--dm-bg-alt);
  border:2px solid #fff;box-shadow:0 1px 3px rgba(59,26,69,.18);margin-left:-9px
}
.dm-vsp-avs img:first-child{margin-left:0}
.dm-vsp-txt{
  display:flex;align-items:center;gap:.32em;flex-wrap:wrap;min-width:0;
  font-size:13.5px;color:var(--dm-ink-mute);line-height:1.3
}
.dm-vsp-txt b{font-weight:700;color:var(--dm-brand)}
.dm-vsp-tick{width:15px;height:15px;flex:0 0 15px;color:var(--dm-accent);margin-left:-.16em}
.dm-stars{color:var(--dm-accent);letter-spacing:2px;font-size:15px}
.dm-buybox h1{margin:6px 0 10px}
.dm-buybox .dm-sub{color:var(--dm-ink-mute);margin:0 0 20px}
.dm-ticks{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px}
.dm-ticks li{display:flex;gap:11px;align-items:flex-start;font-size:16px}
.dm-ticks svg{flex:0 0 20px;margin-top:3px;color:var(--dm-accent)}

/* --- NEW MODULE A: shade selector --- */
.dm-shade{margin:0 0 24px}
.dm-shade-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.dm-shade-head .dm-label{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dm-ink-mute)}
.dm-shade-head .dm-picked{font-weight:600;color:var(--dm-brand)}
.dm-shade-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dm-swatch{
  cursor:pointer;border:1.5px solid var(--dm-hairline);border-radius:14px;background:#fff;
  padding:14px 10px 12px;text-align:center;transition:border-color .16s ease,box-shadow .16s ease
}
.dm-swatch:hover{border-color:var(--dm-accent)}
.dm-swatch[aria-checked="true"]{border-color:var(--dm-brand);box-shadow:0 0 0 3px var(--dm-lilac-wash)}
.dm-swatch i{display:block;width:44px;height:44px;border-radius:50%;margin:0 auto 9px;border:1px solid rgba(0,0,0,.06)}
.dm-swatch b{display:block;font-size:15px;font-weight:600;color:var(--dm-brand)}
.dm-swatch small{display:block;font-size:12px;color:var(--dm-ink-mute);line-height:1.4;margin-top:2px}
.dm-shade-note{
  margin:0 0 12px;background:var(--dm-lilac-wash);border-radius:12px;padding:12px 14px;
  font-size:14px;color:var(--dm-brand);line-height:1.5
}

/* --- buybox video thumb --- */
.dm-vthumb{
  display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;width:100%;
  margin:18px 0 0;padding:9px 13px 9px 9px;background:var(--dm-bg-alt);text-align:left;
  border:1px solid var(--dm-hairline);border-radius:12px;cursor:pointer;
  transition:border-color .16s ease,background .16s ease
}
.dm-vthumb:hover{border-color:var(--dm-brand);background:var(--dm-lilac-wash)}
.dm-vthumb:focus-visible{outline:2px solid var(--dm-accent);outline-offset:3px}
.dm-vthumb-img{position:relative;display:block;width:58px;height:58px;border-radius:9px;overflow:hidden}
.dm-vthumb-img img{width:100%;height:100%;object-fit:cover;display:block}
.dm-vthumb-play{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  background:rgba(59,26,69,.34);padding-left:2px
}
.dm-vthumb-txt b{display:block;font-size:14.5px;font-weight:600;color:var(--dm-brand);line-height:1.3}
.dm-vthumb-txt small{display:block;font-size:12.5px;color:var(--dm-ink-mute);margin-top:2px}
.dm-vthumb-arrow{color:var(--dm-ink-mute);flex:0 0 16px}

/* --- video popup --- */
.dm-vmodal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px}
.dm-vmodal[hidden]{display:none}
.dm-vmodal-scrim{position:absolute;inset:0;background:rgba(30,12,36,.62);backdrop-filter:blur(2px)}
.dm-vmodal-card{
  position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  width:min(940px,100%);max-height:min(88vh,700px);overflow:hidden;background:#fff;
  border-radius:var(--dm-radius);box-shadow:0 24px 70px rgba(30,12,36,.4)
}
.dm-vmodal-x{
  position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--dm-brand);cursor:pointer;
  box-shadow:0 1px 6px rgba(0,0,0,.18)
}
.dm-vmodal-video{background:#000}
.dm-vmodal-video{overflow:hidden}
.dm-vmodal-video video{display:block;width:100%;height:100%;max-height:min(88vh,700px);object-fit:cover}
.dm-vmodal-copy{padding:clamp(18px,3vh,28px) clamp(20px,2.4vw,30px);overflow:auto}
.dm-vmodal-copy h2{
  font-family:var(--dm-font-display);font-size:clamp(20px,2.9vh,27px);line-height:1.16;font-weight:500;
  color:var(--dm-brand);margin:10px 0 10px;letter-spacing:-.01em
}
.dm-vmodal-copy > p{font-size:clamp(13px,1.6vh,14.5px);line-height:1.55;color:var(--dm-ink-mute);margin:0 0 12px}
.dm-vmodal-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:clamp(6px,1.1vh,10px)}
.dm-vmodal-list li{
  font-size:clamp(12.5px,1.55vh,13.8px);line-height:1.5;color:var(--dm-ink-mute);
  padding-left:24px;position:relative
}
.dm-vmodal-list li::before{
  content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;
  background:var(--dm-lilac-wash);border:1.5px solid var(--dm-accent)
}
.dm-vmodal-list b{color:var(--dm-brand);font-weight:600}
.dm-vmodal-honest{
  font-size:clamp(11.8px,1.45vh,12.8px);line-height:1.5;color:var(--dm-ink-mute);background:var(--dm-bg-alt);
  border-left:3px solid var(--dm-hairline);border-radius:0 9px 9px 0;padding:9px 12px;margin:0 0 14px
}
.dm-vmodal-terms{text-align:center;font-size:11.5px;color:var(--dm-ink-mute);margin:8px 0 0;line-height:1.45}
body.dm-noscroll{overflow:hidden}

/* --- subscribe switch --- */
.dm-subscribe{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  border:1.5px solid var(--dm-hairline);border-radius:14px;background:#fff;
  padding:15px 16px;margin:0 0 12px;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease
}
.dm-subscribe[data-on="true"]{
  border-color:var(--dm-brand);background:var(--dm-lilac-wash);box-shadow:0 0 0 3px var(--dm-lilac-wash)
}
.dm-sub-switch{
  position:relative;width:46px;height:27px;flex:0 0 46px;border:0;border-radius:999px;
  background:#CFC8D3;cursor:pointer;padding:0;transition:background .18s ease
}
.dm-sub-switch[aria-checked="true"]{background:var(--dm-brand)}
.dm-sub-switch:focus-visible{outline:2px solid var(--dm-accent);outline-offset:3px}
.dm-sub-knob{
  position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s ease
}
.dm-sub-switch[aria-checked="true"] .dm-sub-knob{transform:translateX(19px)}
.dm-sub-txt b{display:block;font-size:15.5px;font-weight:600;color:var(--dm-brand)}
.dm-sub-txt small{display:block;font-size:13px;color:var(--dm-ink-mute);line-height:1.45;margin-top:3px}
.dm-sub-save{
  white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dm-brand);background:#fff;border:1px solid var(--dm-brand);border-radius:999px;padding:5px 11px
}
.dm-subscribe[data-on="false"] .dm-sub-save{display:none}
.dm-sub-terms{text-align:center;font-size:12.5px;color:var(--dm-ink-mute);margin:6px 0 0}
.dm-sub-terms[hidden]{display:none}

/* --- tier cards (wl-buybox tier blocks) --- */
.dm-tiers{display:grid;gap:12px;margin:0 0 20px}
.dm-tier{
  position:relative;display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:center;
  border:1.5px solid var(--dm-hairline);border-radius:14px;background:#fff;padding:18px 18px;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease
}
.dm-tier:hover{border-color:var(--dm-accent)}
.dm-tier[aria-checked="true"]{border-color:var(--dm-brand);box-shadow:0 0 0 3px var(--dm-lilac-wash)}
.dm-tier .dm-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid #C9C2CE;position:relative}
.dm-tier[aria-checked="true"] .dm-radio{border-color:var(--dm-brand)}
.dm-tier[aria-checked="true"] .dm-radio::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--dm-brand)
}
.dm-tier b{display:block;font-size:16px;font-weight:600;color:var(--dm-brand)}
.dm-tier small{display:block;font-size:13.5px;color:var(--dm-ink-mute);margin-top:2px}
.dm-tier .dm-save{font-weight:600;color:var(--dm-accent)}
.dm-tier .dm-price{text-align:right;white-space:nowrap}
.dm-tier .dm-price em{display:block;font-style:normal;font-weight:700;font-size:19px;color:var(--dm-ink)}
.dm-tier .dm-price s{display:block;font-size:13px;color:#9A93A0}
.dm-tier .dm-flag{
  position:absolute;top:-11px;right:16px;background:var(--dm-brand);color:#fff;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px
}

/* --- per-stick shades (2..N of the selected tier) --- */
.dm-shades{
  margin:-6px 0 20px;padding:11px 14px;background:var(--dm-bg-alt);
  border:1.5px solid var(--dm-hairline);border-radius:14px;transition:padding .16s ease
}
.dm-shades[data-open="true"]{padding:13px 16px 14px}
.dm-shades[hidden]{display:none}

/* whizz: one quick sheen across the bar when the shade choice is worth a second look */
.dm-shades{position:relative}
.dm-shades::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(102deg,
    transparent 36%,rgba(123,94,199,.16) 46%,rgba(255,255,255,.78) 51%,
    rgba(123,94,199,.16) 56%,transparent 66%);
  background-size:250% 100%;background-position:125% 0
}
.dm-shades.is-whizz::after{animation:dm-whizz .9s cubic-bezier(.35,0,.15,1)}
.dm-shades.is-whizz{animation:dm-whizz-ring .9s ease}
.dm-shades.is-whizz .dm-shades-toggle{animation:dm-whizz-link .9s ease}
/* on the way to the cart the whole card rocks, not just the sheen */
.dm-shades.is-whizz.is-move{animation:dm-whizz-ring .9s ease,dm-whizz-move .9s cubic-bezier(.36,.07,.19,.97)}
@keyframes dm-whizz{
  0%{opacity:0;background-position:125% 0}
  14%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;background-position:-25% 0}
}
@keyframes dm-whizz-ring{
  0%,100%{box-shadow:0 0 0 0 rgba(123,94,199,0);border-color:var(--dm-hairline)}
  35%{box-shadow:0 0 0 4px rgba(123,94,199,.13);border-color:rgba(123,94,199,.45)}
}
@keyframes dm-whizz-link{
  0%,100%{transform:none}
  32%{transform:translateX(-3px)}
  58%{transform:translateX(2px)}
}
@keyframes dm-whizz-move{
  0%  {transform:none}
  16% {transform:translateX(-7px) rotate(-.5deg)}
  34% {transform:translateX(6px)  rotate(.45deg)}
  52% {transform:translateX(-4px) rotate(-.28deg)}
  70% {transform:translateX(2.5px) rotate(.16deg)}
  85% {transform:translateX(-1px)}
  100%{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .dm-shades.is-whizz::after,.dm-shades.is-whizz,.dm-shades.is-whizz.is-move,
  .dm-shades.is-whizz .dm-shades-toggle{animation:none}
}
.dm-shades-summary{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.dm-shades-toggle{
  background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:600;
  color:var(--dm-accent);text-decoration:underline;cursor:pointer;white-space:nowrap
}
.dm-shades-toggle[hidden]{display:none}
.dm-shades-panel[hidden]{display:none}
.dm-shades-panel{margin-top:13px;padding-top:12px;border-top:1px solid var(--dm-hairline)}
.dm-shades-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}
.dm-shades-head .dm-label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dm-ink-mute)}
.dm-shades-reset{
  background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:600;
  color:var(--dm-accent);text-decoration:underline;cursor:pointer
}
.dm-shades-reset[hidden]{display:none}
.dm-shades-rows{display:grid;gap:8px}
.dm-srow{display:grid;grid-template-columns:26px 22px 1fr;gap:9px;align-items:center;cursor:pointer}
.dm-srow-n{font-size:13px;font-weight:600;color:var(--dm-ink-mute)}
.dm-srow-dot{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.08)}
.dm-srow-sel{
  font:inherit;font-size:14.5px;font-weight:600;color:var(--dm-brand);cursor:pointer;
  background:#fff;border:1.5px solid var(--dm-hairline);border-radius:10px;padding:8px 11px;width:100%
}
.dm-srow-sel:hover{border-color:var(--dm-accent)}
.dm-srow-sel:focus-visible{outline:2px solid var(--dm-accent);outline-offset:2px}
.dm-shades-note{font-size:13.5px;color:var(--dm-ink-mute);line-height:1.5}

/* keyboard focus stays in brand, not the browser default blue */
.dm-swatch:focus-visible,.dm-tier:focus-visible{
  outline:2px solid var(--dm-accent);outline-offset:3px
}

/* --- brush add-on --- */
.dm-addon{
  display:grid;grid-template-columns:auto auto 1fr auto;gap:13px;align-items:center;
  margin:16px 0 0;padding:11px 14px 11px 12px;background:#fff;
  border:1.5px solid var(--dm-hairline);border-radius:14px;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease
}
.dm-addon[data-on="true"]{
  border-color:var(--dm-brand);background:var(--dm-lilac-wash);
  box-shadow:0 0 0 3px var(--dm-lilac-wash)
}
.dm-addon-check{
  width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;cursor:pointer;padding:0;
  border:1.5px solid #C9C2CE;border-radius:7px;background:#fff;color:transparent;
  transition:background .16s ease,border-color .16s ease,color .16s ease
}
.dm-addon-check svg{width:14px;height:14px}
.dm-addon-check[aria-checked="true"]{background:var(--dm-brand);border-color:var(--dm-brand);color:#fff}
.dm-addon-check:focus-visible{outline:2px solid var(--dm-accent);outline-offset:3px}
.dm-addon-img{
  width:54px;height:54px;border-radius:10px;object-fit:cover;background:#fff;
  border:1px solid var(--dm-hairline)
}
.dm-addon-txt b{display:block;font-size:14.5px;font-weight:600;color:var(--dm-brand);line-height:1.25}
.dm-addon-txt small{display:block;font-size:12.5px;color:var(--dm-ink-mute);line-height:1.45;margin-top:3px}
.dm-addon-price{text-align:right;white-space:nowrap}
.dm-addon-price em{display:block;font-style:normal;font-weight:700;font-size:16px;color:var(--dm-ink)}
.dm-addon-price s{display:block;font-size:12px;color:#9A93A0}

.dm-atc-note{text-align:center;font-size:13.5px;color:var(--dm-ink-mute);margin:12px 0 0}
.dm-guarantee{
  display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:16px 18px;
  background:var(--dm-bg-alt);border-radius:14px
}
.dm-guarantee svg{flex:0 0 26px;color:var(--dm-brand)}
.dm-guarantee b{display:block;color:var(--dm-brand);font-size:15.5px}
.dm-guarantee p{margin:3px 0 0;font-size:14px;color:var(--dm-ink-mute)}
.dm-trustrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;text-align:center}
.dm-trustrow div{font-size:12.5px;color:var(--dm-ink-mute);line-height:1.4}
.dm-trustrow b{display:block;color:var(--dm-brand);font-size:13px;margin-bottom:2px}

/* accordions (wl-buybox accordion_item) */
.dm-acc{margin-top:26px;border-top:1px solid var(--dm-hairline)}
.dm-acc details{border-bottom:1px solid var(--dm-hairline)}
.dm-acc summary{
  list-style:none;cursor:pointer;padding:17px 0;font-weight:600;font-size:16px;color:var(--dm-brand);
  display:flex;justify-content:space-between;align-items:center;gap:16px
}
.dm-acc summary::-webkit-details-marker{display:none}
.dm-acc summary::after{content:"+";font-weight:400;font-size:22px;color:var(--dm-accent);line-height:1}
.dm-acc details[open] summary::after{content:"−"}
.dm-acc .dm-acc-body{padding:0 0 20px;font-size:15.5px;color:var(--dm-ink-mute)}
.dm-acc .dm-acc-body p{margin:0 0 10px}
.dm-acc .dm-acc-body ul{margin:0;padding-left:18px}
.dm-acc .dm-acc-body li{margin-bottom:7px}

/* ============ 3. marquee proof strip ============ */
.dm-marquee{background:var(--dm-brand);color:#fff;padding:15px 0;overflow:hidden}
.dm-marquee .dm-track{display:flex;gap:44px;width:max-content;animation:dm-scroll 32s linear infinite}
.dm-marquee span{font-size:14px;letter-spacing:.06em;white-space:nowrap;display:flex;gap:44px;align-items:center}
.dm-marquee i{color:#C48AF1;font-style:normal}
@keyframes dm-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.dm-marquee .dm-track{animation:none}}

/* ============ 4. NEW MODULE B: before / after ============ */
.dm-ba-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  margin:42px auto 0;text-align:left;align-items:start
}
/* every second pair drops half a beat, so the row reads as a spread
   rather than a filmstrip */
.dm-ba-card{margin:0}
.dm-ba-card:nth-child(even){margin-top:52px}
.dm-ba-card figcaption{padding:15px 2px 0;position:relative}
.dm-ba-idx{
  font-family:var(--dm-font-display);font-size:12px;font-weight:500;letter-spacing:.14em;
  color:var(--dm-accent);display:block;margin-bottom:4px
}
.dm-ba-card h3{
  font-family:var(--dm-font-display);font-size:19px;font-weight:500;line-height:1.22;
  color:var(--dm-brand);margin:0 0 6px
}
.dm-ba-card figcaption p{margin:0;font-size:13.5px;line-height:1.55;color:var(--dm-ink-mute)}
.dm-ba-foot{
  max-width:620px;margin:52px auto 0;text-align:center;font-size:14px;color:var(--dm-ink-mute)
}

.dm-ba-stage{
  position:relative;border-radius:var(--dm-radius);
  overflow:hidden;box-shadow:var(--dm-shadow-lg);user-select:none;touch-action:pan-y
}
/* both layers get identical box rules, so only the clip-path moves.
   Sizing the reveal with clip-path (not width) is what keeps the two faces
   pixel-aligned when the source pair is portrait rather than landscape. */
.dm-ba-stage img{width:100%;height:100%;display:block;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.dm-ba-after{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.dm-ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);
  box-shadow:0 0 0 1px rgba(59,26,69,.18);pointer-events:none
}
.dm-ba-handle::after{
  content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:#fff;color:var(--dm-brand);
  display:flex;align-items:center;justify-content:center;font-size:17px;letter-spacing:2px;
  box-shadow:var(--dm-shadow);transition:transform .18s ease
}
.dm-ba-stage:hover .dm-ba-handle::after{transform:translate(-50%,-50%) scale(1.08)}
.dm-ba-stage.is-hinting .dm-ba-handle::after{transform:translate(-50%,-50%) scale(1.12)}
.dm-ba-tag{
  position:absolute;bottom:14px;background:rgba(255,255,255,.94);color:var(--dm-brand);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;pointer-events:none
}
.dm-ba-tag--b{left:14px}
.dm-ba-tag--a{right:14px}
.dm-ba-range{position:absolute;inset:0;width:100%;opacity:0;cursor:ew-resize;margin:0}
.dm-ba-range:focus-visible{opacity:1;outline:2px solid var(--dm-accent);outline-offset:-3px}

/* ============ 6. why derma muse · orbit ============ */
/* the whole section is composed to land inside one desktop viewport, so every
   vertical value is tied to the viewport rather than to a fixed pixel scale */
.dm-orbit-sec{
  overflow:hidden;min-height:100svh;display:grid;align-content:center;
  padding:clamp(26px,4.6vh,58px) 0
}
.dm-orbit-sec h2{font-size:clamp(26px,3.2vw,38px)}
.dm-orbit-sec .dm-lede{margin-top:clamp(8px,1.4vh,14px);font-size:clamp(15px,1.6vh,17px)}
.dm-orbit{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.9fr) minmax(0,1fr);
  gap:clamp(30px,4vw,58px);align-items:center;
  margin-top:clamp(20px,3.4vh,42px);text-align:left
}
.dm-orbit-col{display:grid;gap:clamp(16px,2.4vh,28px)}
.dm-orbit-col--l{justify-items:end}
.dm-orbit-mid{position:relative;display:grid;place-items:center;padding:10px;perspective:1000px}
/* Backdrop is three offset washes rather than one purple disc: a cool lilac
   from the upper left, a warm blush from the lower right and a deep aubergine
   pooling at the base. Offsetting them is what gives it depth instead of glare. */
.dm-orbit-glow{
  position:absolute;top:47%;left:50%;width:min(132%,620px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:
    radial-gradient(closest-side at 38% 34%,rgba(123,94,199,.30),rgba(123,94,199,.10) 46%,transparent 72%),
    radial-gradient(closest-side at 68% 62%,rgba(214,158,190,.28),transparent 68%),
    radial-gradient(closest-side at 50% 84%,rgba(59,26,69,.20),transparent 62%);
  filter:blur(14px)
}
/* two hairline orbits, unblurred, sitting over the wash */
.dm-orbit-mid::before,.dm-orbit-mid::after{
  content:"";position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none
}
.dm-orbit-mid::before{
  width:min(96%,450px);aspect-ratio:1;border:1px solid rgba(123,94,199,.20)
}
.dm-orbit-mid::after{
  width:min(72%,340px);aspect-ratio:1;border:1px dashed rgba(123,94,199,.16)
}
/* the two ends of the stick, held apart in real 3D space. --rx/--ry are
   written by the pointer parallax, the float keeps it alive without one. */
.dm-orbit-3d{
  position:relative;width:100%;max-width:min(360px,42vh);aspect-ratio:1/1.15;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.22,.8,.3,1)
}
.dm-orbit-3d.is-tracking{transition:transform .12s linear}
.dm-piece{position:absolute;margin:0;transform-style:preserve-3d}
.dm-piece img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 22px 34px rgba(59,26,69,.34))
}
.dm-piece figcaption{
  position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);white-space:nowrap;
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dm-brand);background:rgba(255,255,255,.86);border-radius:999px;padding:4px 10px
}
/* balm end sits forward and left, brush end further back and right */
.dm-piece--balm{
  width:41%;left:6%;top:4%;
  transform:translateZ(70px) rotate(-9deg);
  animation:dm-float-a 7.5s ease-in-out infinite
}
.dm-piece--brush{
  width:38%;right:6%;top:20%;
  transform:translateZ(-40px) rotate(10deg);
  animation:dm-float-b 9s ease-in-out infinite
}
.dm-orbit-floor{
  position:absolute;left:50%;bottom:2%;width:58%;height:26px;transform:translateX(-50%) translateZ(-90px);
  background:radial-gradient(ellipse at 50% 50%,rgba(59,26,69,.22),transparent 70%);filter:blur(5px)
}
@keyframes dm-float-a{
  0%,100%{transform:translateZ(70px) rotate(-9deg) translateY(-10px)}
  50%    {transform:translateZ(70px) rotate(-9deg) translateY(10px)}
}
@keyframes dm-float-b{
  0%,100%{transform:translateZ(-40px) rotate(10deg) translateY(11px)}
  50%    {transform:translateZ(-40px) rotate(10deg) translateY(-9px)}
}

/* each card sits at its own offset and tilt, so the six read as scattered
   around the stick rather than stacked in two tidy columns */
.dm-ocard{
  position:relative;width:100%;max-width:var(--w,330px);overflow:hidden;
  background:linear-gradient(168deg,#fff 0%,#FFFDFE 42%,#FBF7FA 100%);
  border:1px solid rgba(123,94,199,.16);border-radius:18px;
  padding:clamp(14px,1.9vh,19px) clamp(16px,1.4vw,20px);
  box-shadow:0 1px 2px rgba(59,26,69,.04),0 14px 34px -18px rgba(59,26,69,.34);
  opacity:0;
  transform:translate(calc(var(--dx,0px) + var(--fx)),calc(var(--dy,0px) + var(--fy)))
            rotate(var(--rot,0deg)) scale(.965);
  transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1),
             box-shadow .35s ease,border-color .35s ease;
  transition-delay:calc(var(--i) * 110ms)
}
.dm-orbit.is-in .dm-ocard{
  opacity:1;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rot,0deg)) scale(1)
}
/* a slow sheen crossing the card on hover, the way light moves over lacquer */
.dm-ocard::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:55%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
  transform:skewX(-14deg);transition:left .75s cubic-bezier(.3,.7,.3,1)
}
/* on hover the card straightens up and lifts out of the scatter */
.dm-orbit.is-in .dm-ocard:hover{
  border-color:rgba(123,94,199,.42);
  box-shadow:0 1px 2px rgba(59,26,69,.05),0 26px 52px -20px rgba(59,26,69,.44);
  transform:translate(var(--dx,0px),calc(var(--dy,0px) - 6px)) rotate(0deg) scale(1.02);
  transition-delay:0s;z-index:2
}
.dm-ocard:hover::before{left:115%}

.dm-ocard-ico{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:var(--dm-brand);background:radial-gradient(circle at 34% 28%,#fff,var(--dm-lilac-wash) 78%);
  box-shadow:inset 0 0 0 1px rgba(123,94,199,.24),0 4px 12px -6px rgba(59,26,69,.4);
  margin-bottom:clamp(8px,1.1vh,12px)
}
.dm-ocard-ico svg{width:18px;height:18px}
/* the numeral is a watermark in the corner, not a label */
.dm-ocard-n{
  position:absolute;top:13px;right:16px;font-family:var(--dm-font-display);font-style:italic;
  font-size:23px;line-height:1;color:rgba(123,94,199,.24);letter-spacing:.01em
}
.dm-ocard h3{
  font-family:var(--dm-font-display);font-weight:500;font-size:clamp(17px,1.9vh,19px);line-height:1.18;
  color:var(--dm-brand);margin:0 0 7px;letter-spacing:-.005em;padding-bottom:7px;position:relative
}
.dm-ocard h3::after{
  content:"";position:absolute;left:0;bottom:0;width:26px;height:1px;
  background:linear-gradient(90deg,var(--dm-accent),transparent)
}
.dm-ocard p{margin:0;font-size:clamp(12.5px,1.45vh,13.5px);line-height:1.55;color:var(--dm-ink-mute)}
/* hairline reaching from each card toward the stick */
.dm-ocard::after{
  content:"";position:absolute;top:50%;width:26px;height:1px;background:var(--dm-hairline);
  opacity:0;transition:opacity .5s ease .5s
}
.dm-orbit.is-in .dm-ocard::after{opacity:1}
.dm-orbit-col--l .dm-ocard::after{right:-26px}
.dm-orbit-col--r .dm-ocard::after{left:-26px}
@media (prefers-reduced-motion:reduce){
  .dm-piece--balm{animation:none}
  .dm-piece--brush{animation:none}
  .dm-orbit-3d{transition:none}
  .dm-ocard{opacity:1;transform:none;transition:none}
}

/* ============ 5. 60-second timeline (wl-timeline) ============ */
.dm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;counter-reset:dm}
.dm-step{
  background:#fff;border-radius:var(--dm-radius);padding:0 24px 28px;box-shadow:var(--dm-shadow);
  position:relative;overflow:hidden
}
.dm-step-img{
  /* all three sources are padded to exactly 4:5, so cover crops nothing.
     max-width:none is required, the global img rule would clamp the bleed. */
  display:block;width:calc(100% + 48px);max-width:none;margin:0 -24px;aspect-ratio:4/5;
  object-fit:cover;object-position:center;background:var(--dm-bg-alt)
}
.dm-step .dm-daylabel{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--dm-brand);border-radius:999px;padding:5px 12px;margin:22px 0 14px
}
.dm-step h3{color:var(--dm-brand);margin-bottom:7px}
.dm-step p{margin:0;font-size:15.5px;color:var(--dm-ink-mute)}
.dm-callout{
  margin-top:30px;text-align:center;font-family:var(--dm-font-display);font-size:21px;color:var(--dm-brand)
}

/* ============ 6. video proof (wl-video-reviews) ============ */
.dm-videos{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:38px}
.dm-video{
  position:relative;border-radius:var(--dm-radius);overflow:hidden;background:var(--dm-brand);
  aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;color:#fff;box-shadow:var(--dm-shadow)
}
.dm-video::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(196,138,241,.34),transparent 62%)
}
.dm-video > *{position:relative}
.dm-video .dm-play{
  width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;
  margin-bottom:auto;font-size:19px
}
.dm-video b{display:block;font-family:var(--dm-font-display);font-size:22px;font-weight:500;margin-bottom:6px}
.dm-video p{margin:0;font-size:14.5px;opacity:.86}
.dm-video .dm-slot{
  position:absolute;top:20px;right:20px;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;background:rgba(255,255,255,.16);border-radius:999px;padding:6px 11px
}

/* ============ 7. ingredients (wl-pdp-main ingredient blocks) ============ */
.dm-ing{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:52px;align-items:center}
.dm-ing-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px}
.dm-ing-list li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--dm-hairline)}
.dm-ing-list li:last-child{border-bottom:0}
.dm-ing-list b{font-size:16px;color:var(--dm-brand);white-space:nowrap}
.dm-ing-list span{font-size:15.5px;color:var(--dm-ink-mute)}
.dm-ing figure{margin:0;border-radius:var(--dm-radius);overflow:hidden;box-shadow:var(--dm-shadow)}

/* ============ 8. why choose (wl-why-choose) ============ */
/* same language as the orbit section, but the two ends anchor the corners
   and the cards run as a single scattered row between them */
.dm-why{
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,1.6vw,24px);margin-top:clamp(34px,5vh,58px);
  padding:clamp(20px,4vh,46px) clamp(60px,7vw,120px);text-align:left
}
.dm-why-glow{
  position:absolute;inset:-4% -2%;pointer-events:none;
  background:
    radial-gradient(closest-side at 12% 22%,rgba(123,94,199,.24),transparent 70%),
    radial-gradient(closest-side at 88% 80%,rgba(214,158,190,.26),transparent 70%),
    radial-gradient(closest-side at 50% 108%,rgba(59,26,69,.12),transparent 62%);
  filter:blur(16px)
}
/* corner pieces, held in 3D so they tilt with the cursor like the orbit rig */
.dm-why-3d{
  position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.22,.8,.3,1)
}
.dm-why-3d.is-tracking{transition:transform .12s linear}
.dm-why-piece{
  position:absolute;width:auto;max-width:none;
  filter:drop-shadow(0 22px 34px rgba(59,26,69,.32))
}
.dm-why-piece--balm{
  height:clamp(150px,20vh,215px);left:-6px;top:-24px;
  transform:translateZ(60px) rotate(-16deg);
  animation:dm-wfloat-a 8s ease-in-out infinite
}
.dm-why-piece--brush{
  height:clamp(150px,20vh,215px);right:-6px;bottom:-26px;
  transform:translateZ(30px) rotate(15deg);
  animation:dm-wfloat-b 9.5s ease-in-out infinite
}
@keyframes dm-wfloat-a{
  0%,100%{transform:translateZ(60px) rotate(-16deg) translateY(-9px)}
  50%    {transform:translateZ(60px) rotate(-13deg) translateY(9px)}
}
@keyframes dm-wfloat-b{
  0%,100%{transform:translateZ(30px) rotate(15deg) translateY(10px)}
  50%    {transform:translateZ(30px) rotate(12deg) translateY(-8px)}
}

.dm-wcard{
  position:relative;overflow:hidden;z-index:1;
  background:linear-gradient(168deg,#fff 0%,#FFFDFE 42%,#FBF7FA 100%);
  border:1px solid rgba(123,94,199,.16);border-radius:18px;
  padding:clamp(16px,2vh,21px) clamp(15px,1.3vw,19px);
  box-shadow:0 1px 2px rgba(59,26,69,.04),0 14px 34px -18px rgba(59,26,69,.34);
  opacity:0;
  transform:translate(var(--dx,0px),calc(var(--dy,0px) + var(--fy))) rotate(var(--rot,0deg)) scale(.965);
  transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1),
             box-shadow .35s ease,border-color .35s ease;
  transition-delay:calc(var(--i) * 110ms)
}
.dm-why.is-in .dm-wcard{
  opacity:1;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rot,0deg)) scale(1)
}
.dm-wcard::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:55%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
  transform:skewX(-14deg);transition:left .75s cubic-bezier(.3,.7,.3,1)
}
.dm-why.is-in .dm-wcard:hover{
  border-color:rgba(123,94,199,.42);
  box-shadow:0 1px 2px rgba(59,26,69,.05),0 26px 52px -20px rgba(59,26,69,.44);
  transform:translate(var(--dx,0px),calc(var(--dy,0px) - 6px)) rotate(0deg) scale(1.02);
  transition-delay:0s;z-index:2
}
.dm-wcard:hover::before{left:115%}
.dm-wcard-ico{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:var(--dm-brand);background:radial-gradient(circle at 34% 28%,#fff,var(--dm-lilac-wash) 78%);
  box-shadow:inset 0 0 0 1px rgba(123,94,199,.24),0 4px 12px -6px rgba(59,26,69,.4);
  margin-bottom:clamp(8px,1.1vh,12px)
}
.dm-wcard-ico svg{width:18px;height:18px}
.dm-wcard h3{
  font-family:var(--dm-font-display);font-weight:500;font-size:clamp(17px,1.9vh,19px);line-height:1.18;
  color:var(--dm-brand);margin:0 0 7px;padding-bottom:7px;position:relative;letter-spacing:-.005em
}
.dm-wcard h3::after{
  content:"";position:absolute;left:0;bottom:0;width:26px;height:1px;
  background:linear-gradient(90deg,var(--dm-accent),transparent)
}
.dm-wcard p{margin:0;font-size:clamp(12.5px,1.45vh,13.5px);line-height:1.55;color:var(--dm-ink-mute)}
@media (prefers-reduced-motion:reduce){
  .dm-why-piece--balm,.dm-why-piece--brush{animation:none}
  .dm-why-3d{transition:none}
  .dm-wcard{opacity:1;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rot,0deg));transition:none}
}

/* ============ 9. review wall (wl-review-wall) ============ */
/* --- review tabs --- */
.dm-rtabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:26px
}
.dm-rtab{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:#fff;border:1.5px solid var(--dm-hairline);border-radius:999px;
  padding:9px 16px;font:600 13.5px var(--dm-font);color:var(--dm-brand);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease
}
.dm-rtab:hover{border-color:var(--dm-accent)}
.dm-rtab:focus-visible{outline:2px solid var(--dm-accent);outline-offset:2px}
.dm-rtab[aria-selected="true"]{
  background:var(--dm-brand);border-color:var(--dm-brand);color:#fff;
  box-shadow:0 8px 20px -10px rgba(59,26,69,.7)
}
.dm-rtab-n{
  font-size:11.5px;font-weight:700;line-height:1;padding:3px 7px;border-radius:999px;
  background:var(--dm-lilac-wash);color:var(--dm-brand)
}
.dm-rtab[aria-selected="true"] .dm-rtab-n{background:rgba(255,255,255,.22);color:#fff}
/* raw screenshots is the default view, so it sits mid-row and carries more weight */
.dm-rtab--raw{padding:12px 22px;font-size:15px;border-color:rgba(123,94,199,.42)}
.dm-rtab--raw .dm-rtab-n{font-size:12px;padding:3px 8px}
.dm-rnote{margin:14px 0 0;font-size:13px;color:var(--dm-ink-mute)}
.dm-review[hidden]{display:none}
/* cards ease in when a tab changes the set */
.dm-reviews.is-swapping .dm-review{opacity:0;transform:translateY(8px)}
.dm-review{transition:opacity .35s ease,transform .35s ease}

/* raw screenshot grid */
.dm-rraw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px}
.dm-rraw[hidden]{display:none}
.dm-rshot{
  padding:0;border:1px solid var(--dm-hairline);border-radius:14px;background:#fff;overflow:hidden;
  cursor:zoom-in;box-shadow:0 12px 30px -18px rgba(59,26,69,.5);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.dm-rshot:hover{transform:translateY(-3px);border-color:var(--dm-accent);box-shadow:0 20px 40px -20px rgba(59,26,69,.55)}
.dm-rshot:focus-visible{outline:2px solid var(--dm-accent);outline-offset:3px}
.dm-rshot img{display:block;width:100%;height:auto}
.dm-rraw-note{
  max-width:70ch;margin:18px auto 0;text-align:center;font-size:13px;color:var(--dm-ink-mute);line-height:1.55
}
.dm-rraw-note[hidden]{display:none}
.dm-lightbox{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:26px}
.dm-lightbox[hidden]{display:none}
.dm-lightbox-scrim{position:absolute;inset:0;background:rgba(30,12,36,.72)}
.dm-lightbox img{
  position:relative;max-width:min(560px,92vw);max-height:88vh;width:auto;height:auto;
  border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.5)
}
.dm-lightbox-x{
  position:absolute;top:18px;right:18px;z-index:2;width:38px;height:38px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--dm-brand);cursor:pointer
}

.dm-reviews{columns:3;column-gap:22px;margin-top:30px}
.dm-reviews[hidden]{display:none}
.dm-review{
  break-inside:avoid;background:#fff;border-radius:var(--dm-radius);padding:24px;margin-bottom:22px;
  box-shadow:var(--dm-shadow)
}
.dm-review .dm-stars{font-size:14px;margin-bottom:9px}
.dm-review h3{font-size:16px;color:var(--dm-brand);margin-bottom:7px}
.dm-review p{margin:0 0 14px;font-size:15.5px;color:var(--dm-ink-mute)}
.dm-review footer{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--dm-brand);font-weight:600}
.dm-review .dm-verified{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dm-accent);
  background:var(--dm-lilac-wash);border-radius:999px;padding:4px 9px
}
.dm-review .dm-meta{font-weight:400;color:var(--dm-ink-mute);font-size:12.5px}

/* ============ 10. comparison (wl-comparison) ============ */
.dm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dm-compare{
  max-width:840px;margin:clamp(30px,4vh,46px) auto 0;padding:0 8px 8px;
  background:linear-gradient(168deg,#fff 0%,#FFFDFE 46%,#FBF7FA 100%);
  border:1px solid rgba(123,94,199,.16);border-radius:22px;
  box-shadow:0 1px 2px rgba(59,26,69,.04),0 26px 60px -30px rgba(59,26,69,.45)
}
.dm-compare table{width:100%;border-collapse:separate;border-spacing:0;text-align:left}

/* --- head --- */
.dm-compare thead th{padding:20px 14px 16px;vertical-align:bottom;font-weight:500}
.dm-compare thead .dm-c-us,.dm-compare thead .dm-c-them{text-align:center;width:clamp(120px,17%,168px)}
.dm-c-mark{display:block;height:52px;margin-bottom:8px}
.dm-c-mark img{height:100%;width:auto;margin:0 auto;filter:drop-shadow(0 8px 14px rgba(59,26,69,.3))}
.dm-c-name{
  display:block;font-family:var(--dm-font-display);font-size:17px;line-height:1.2;color:var(--dm-brand)
}
.dm-c-them .dm-c-name{color:var(--dm-ink-mute);font-family:var(--dm-font);font-size:14.5px;font-weight:600}
.dm-c-sub{display:block;margin-top:3px;font-size:11.5px;color:#9A93A0;font-style:italic}
/* the brand column is a single lit panel running the height of the table */
.dm-compare thead .dm-c-us{
  background:linear-gradient(180deg,var(--dm-lilac-wash),rgba(241,236,251,.5));
  border:1px solid rgba(123,94,199,.2);border-bottom:0;border-radius:16px 16px 0 0
}
.dm-compare tbody td:nth-child(2){
  background:linear-gradient(180deg,rgba(241,236,251,.5),rgba(241,236,251,.85));
  border-left:1px solid rgba(123,94,199,.2);border-right:1px solid rgba(123,94,199,.2)
}
.dm-compare tbody tr:last-child td:nth-child(2){
  border-bottom:1px solid rgba(123,94,199,.2);border-radius:0 0 16px 16px
}

/* --- rows --- */
.dm-compare tbody th{
  padding:17px 16px;font-weight:500;font-size:15.5px;color:var(--dm-ink);
  border-top:1px solid rgba(123,94,199,.13)
}
.dm-compare tbody th em{
  display:block;margin-top:3px;font-style:normal;font-size:12.5px;color:var(--dm-ink-mute);line-height:1.45
}
.dm-c-cell{text-align:center;border-top:1px solid rgba(123,94,199,.13);padding:17px 10px}
.dm-compare tbody tr:first-child th,.dm-compare tbody tr:first-child .dm-c-cell{border-top:0}

/* marks: a filled seal for yes, a quiet dash for no. No harsh crosses. */
.dm-c-yes,.dm-c-no{display:inline-block;width:26px;height:26px;border-radius:50%;position:relative}
.dm-c-yes{
  background:var(--dm-brand);box-shadow:0 5px 12px -5px rgba(59,26,69,.75)
}
.dm-c-yes::after{
  content:"";position:absolute;left:8px;top:8.5px;width:9px;height:5px;
  border-left:1.7px solid #fff;border-bottom:1.7px solid #fff;transform:rotate(-45deg)
}
.dm-c-no{border:1px solid var(--dm-hairline);background:#fff}
.dm-c-no::after{
  content:"";position:absolute;left:7px;top:12px;width:11px;height:1.5px;
  background:#C6BFCB;border-radius:1px
}
.dm-c-them-row .dm-c-yes{background:#B7AFC0;box-shadow:none}

/* the honest divider */
.dm-c-divider td{
  padding:9px 16px 8px;border-top:1px solid rgba(123,94,199,.13);
  background:linear-gradient(90deg,rgba(249,246,244,0),rgba(249,246,244,.9) 30%,rgba(249,246,244,.9) 70%,rgba(249,246,244,0))
}
.dm-c-divider span{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9A93A0
}
.dm-c-foot{
  max-width:66ch;margin:20px auto 0;text-align:center;font-size:13.5px;
  color:var(--dm-ink-mute);line-height:1.6
}


/* ============ 12. how to use (wl-how-to-use) ============ */
.dm-how{
  position:relative;list-style:none;margin:clamp(38px,5vh,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);
  text-align:left;counter-reset:dmhow
}
/* the rail the four numerals sit on, drawn left to right on first view */
.dm-how-rail{
  position:absolute;left:6%;right:6%;top:23px;height:1px;pointer-events:none;
  background:rgba(123,94,199,.16)
}
.dm-how-rail i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,transparent,var(--dm-accent) 12%,var(--dm-accent) 88%,transparent);
  transition:width 1.4s cubic-bezier(.3,.7,.3,1) .15s
}
.dm-how.is-in .dm-how-rail i{width:100%}

.dm-how li{
  position:relative;padding-top:0;opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.8,.3,1);
  transition-delay:calc(var(--i) * 130ms + 250ms)
}
.dm-how.is-in li{opacity:1;transform:none}
.dm-how .dm-num{
  position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  margin:0 0 16px;background:#fff;border:1px solid rgba(123,94,199,.3);
  font-family:var(--dm-font-display);font-size:20px;font-weight:400;color:var(--dm-brand);
  box-shadow:0 6px 16px -8px rgba(59,26,69,.45)
}
.dm-how li:first-child .dm-num{background:var(--dm-brand);border-color:var(--dm-brand);color:#fff}
.dm-how h3{
  font-family:var(--dm-font-display);font-weight:500;font-size:clamp(17px,1.9vh,19px);line-height:1.2;
  color:var(--dm-brand);margin:0 0 7px;letter-spacing:-.005em
}
.dm-how p{margin:0;font-size:13.5px;line-height:1.6;color:var(--dm-ink-mute)}
.dm-how-tag{
  display:inline-block;margin-top:11px;padding:4px 10px;border-radius:999px;
  background:var(--dm-lilac-wash);color:var(--dm-brand);
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase
}
.dm-how-foot{
  max-width:62ch;margin:clamp(28px,4vh,40px) auto 0;text-align:center;
  font-family:var(--dm-font-display);font-size:17px;line-height:1.5;color:var(--dm-brand)
}
@media (prefers-reduced-motion:reduce){
  .dm-how li{opacity:1;transform:none;transition:none}
  .dm-how-rail i{width:100%;transition:none}
}

/* ============ 13. faq (wl-faq) ============ */
.dm-faq{max-width:820px;margin:34px auto 0}
.dm-faq details{background:#fff;border-radius:14px;margin-bottom:12px;box-shadow:var(--dm-shadow)}
.dm-faq summary{
  list-style:none;cursor:pointer;padding:20px 22px;font-weight:600;font-size:16.5px;color:var(--dm-brand);
  display:flex;justify-content:space-between;gap:16px;align-items:center
}
.dm-faq summary::-webkit-details-marker{display:none}
.dm-faq summary::after{content:"+";font-weight:400;font-size:22px;color:var(--dm-accent)}
.dm-faq details[open] summary::after{content:"−"}
.dm-faq .dm-a{padding:0 22px 22px;font-size:15.5px;color:var(--dm-ink-mute)}

/* ============ 13c. announcement bar ============ */
/* aubergine rule between the ivory guarantee and the white close band, so the
   offer reads once more before the final ask. Static, the tickers already move */
.dm-announce{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(90% 220% at 50% 0%,rgba(123,94,199,.42),transparent 62%),
    linear-gradient(90deg,#3B1A45 0%,#4A2158 52%,#3B1A45 100%)
}
.dm-announce{padding:15px 0}
.dm-announce-track{display:flex;width:max-content;animation:dm-scroll 46s linear infinite}
.dm-announce-track > span{
  display:flex;align-items:center;gap:36px;padding-right:36px;
  white-space:nowrap;font-size:14px;letter-spacing:.02em
}
.dm-announce b{font-weight:600}
.dm-announce i{color:#C48AF1;font-style:normal;font-size:12px}
@media (prefers-reduced-motion:reduce){.dm-announce-track{animation:none}}

/* ============ 14. close (wl-proof-cards) ============ */
/* light ground, full bleed: the ivory guarantee sits above and the aubergine
   footer below, so the close band stays paper-white with a lilac wash */
.dm-close{
  position:relative;text-align:center;
  border-top:1px solid var(--dm-hairline);
  background:
    radial-gradient(120% 76% at 50% 0%,var(--dm-lilac-wash),transparent 62%),
    var(--dm-bg);
  padding:clamp(74px,9vh,104px) 0 clamp(74px,9vh,100px)
}
.dm-close h2{color:var(--dm-brand)}
.dm-close .dm-lede{color:var(--dm-ink-mute);margin-inline:auto}
.dm-close .dm-btn{max-width:360px;margin:26px auto 0;box-shadow:0 14px 28px -16px rgba(59,26,69,.85)}
.dm-close .dm-closerow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px);
  max-width:820px;margin:clamp(32px,4vh,44px) auto 0;padding-top:clamp(24px,3vh,30px);
  border-top:1px solid rgba(123,94,199,.16)
}
.dm-close .dm-closerow > div{position:relative}
.dm-close .dm-closerow > div + div::before{
  content:"";position:absolute;left:calc(-1 * clamp(9px,1.5vw,17px));top:4px;bottom:4px;
  width:1px;background:linear-gradient(180deg,transparent,rgba(123,94,199,.22),transparent)
}
.dm-close .dm-closerow b{
  display:block;font-family:var(--dm-font-display);font-weight:500;font-size:26px;
  color:var(--dm-brand);margin-bottom:3px
}
.dm-close .dm-closerow span{font-size:13px;line-height:1.5;color:var(--dm-ink-mute)}

/* ============ sticky header banner ============ */
.dm-topbar{
  position:fixed;top:0;left:0;right:0;z-index:70;
  background:linear-gradient(104deg,#2C1033 0%,var(--dm-brand) 44%,#4B2159 100%);
  color:#fff;transform:translateY(-102%);
  transition:transform .34s cubic-bezier(.3,.7,.3,1);
  box-shadow:0 14px 34px -16px rgba(30,10,38,.72)
}
.dm-topbar::after{                                  /* one lit hairline, keeps the edge from reading flat */
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,172,232,.55) 22%,rgba(196,172,232,.55) 78%,transparent)
}
.dm-topbar.is-on{transform:translateY(0)}
.dm-topbar .dm-wrap{display:flex;align-items:center;gap:16px;height:56px}
.dm-tb-dot{
  flex:none;width:26px;height:26px;border-radius:50%;background:#F6E2C9;
  box-shadow:0 0 0 1px rgba(255,255,255,.42),0 0 0 5px rgba(255,255,255,.09),inset 0 -4px 7px rgba(0,0,0,.14);
  transition:background .45s cubic-bezier(.3,.7,.3,1)
}
.dm-tb-txt{flex:1;min-width:0}
.dm-tb-txt b{
  display:block;font-family:var(--dm-font-display);font-weight:500;font-size:16px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.dm-tb-txt small{
  display:block;margin-top:2px;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.dm-tb-price{
  flex:none;display:flex;align-items:baseline;gap:9px;
  padding-right:18px;margin-right:2px;border-right:1px solid rgba(255,255,255,.16)
}
.dm-tb-price s{font-size:13px;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.dm-tb-price em{font-style:normal;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dm-pdp .dm-tb-btn{
  width:auto;flex:none;background:#fff;color:var(--dm-brand);
  font-size:14px;font-weight:600;padding:11px 24px;border-radius:999px;letter-spacing:.01em
}
.dm-pdp .dm-tb-btn:hover{background:var(--dm-accent);color:#fff;transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.dm-topbar{transition:none}}

/* ============ 15. sticky atc (wl-sticky-atc) ============ */
.dm-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-top:1px solid var(--dm-hairline);
  box-shadow:0 -8px 28px rgba(59,26,69,.1);
  transform:translateY(110%);transition:transform .28s ease;padding:12px 0
}
.dm-sticky.is-on{transform:translateY(0)}
.dm-sticky .dm-wrap{display:flex;align-items:center;gap:18px}
.dm-sticky img{width:52px;height:52px;object-fit:cover;border-radius:10px;background:var(--dm-bg-alt)}
.dm-sticky .dm-s-txt{flex:1;min-width:0}
.dm-sticky b{display:block;font-size:15px;color:var(--dm-brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-sticky small{font-size:13px;color:var(--dm-ink-mute)}
.dm-sticky .dm-btn{width:auto;min-width:230px;padding:15px 26px;font-size:16px}

/* one bar at a time: banner on desktop, bottom bar on mobile where the thumb is */
@media (min-width:1001px){.dm-sticky{display:none}}
@media (max-width:1000px){.dm-topbar{display:none}}

/* ---------- footer note (prototype only) ---------- */

/* ============ responsive ============ */
@media (max-width:1000px){
  .dm-main .dm-grid{grid-template-columns:1fr;gap:34px}
  .dm-gallery{position:static}
  .dm-why{grid-template-columns:repeat(2,minmax(0,1fr));padding:26px 0 0}
  .dm-wcard{--dx:0px;--dy:0px;--rot:0deg}
  .dm-why-piece--balm{height:110px;left:-14px;top:-46px;opacity:.9}
  .dm-why-piece--brush{height:110px;right:-14px;bottom:-40px;opacity:.9}
  .dm-reviews{columns:2}
  .dm-rraw{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .dm-how{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
  .dm-how-rail{display:none}
  .dm-ing{grid-template-columns:1fr;gap:30px}
  .dm-gtee-terms{grid-template-columns:1fr;gap:22px}
  .dm-gtee-terms li + li::before{display:none}
  .dm-gtee-terms li + li{padding-top:20px;border-top:1px solid rgba(123,94,199,.14)}
  .dm-ba-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:32px}
  .dm-ba-card:nth-child(even){margin-top:40px}
  .dm-ba-card h3{font-size:20px}
  .dm-ba-card figcaption p{font-size:14px}
  .dm-ba-foot{margin-top:40px}
  .dm-steps{grid-template-columns:1fr}
  .dm-orbit-sec{min-height:0;display:block;padding:46px 0}
  .dm-orbit{grid-template-columns:1fr;gap:26px;margin-top:32px}
  .dm-orbit-mid{order:-1}
  .dm-orbit-mid::before,.dm-orbit-mid::after{display:none}
  .dm-orbit-3d{max-width:300px}
  .dm-orbit-col{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:stretch;gap:20px}
  /* scatter is a desktop composition, it turns into a mess in two columns */
  .dm-ocard{max-width:none;--dx:0px;--dy:0px;--rot:0deg}
  .dm-ocard::after{display:none}
  .dm-videos{grid-template-columns:1fr}
}
@media (max-width:640px){
  .dm-pdp{font-size:16px}
  .dm-pdp section{padding:46px 0}
  .dm-why{grid-template-columns:1fr}
  .dm-how{grid-template-columns:1fr;gap:0}
  .dm-how li{padding:0 0 24px 62px}
  .dm-how li:last-child{padding-bottom:0}
  .dm-how .dm-num{position:absolute;left:0;top:0;margin:0;width:42px;height:42px;font-size:18px}
  /* vertical rail, drawn per item so it stops at the last numeral */
  .dm-how li:not(:last-child)::before{
    content:"";position:absolute;left:21px;top:46px;bottom:6px;width:1px;
    background:rgba(123,94,199,.22)
  }
  .dm-how-foot{font-size:15.5px}
  .dm-why-3d{display:none}
  .dm-reviews{columns:1}
  .dm-rraw{grid-template-columns:1fr}
  .dm-rtabs{gap:7px}
  .dm-rtab{padding:8px 13px;font-size:12.5px}
  .dm-rtab--raw{padding:10px 16px;font-size:13.5px}
  .dm-thumbs{grid-template-columns:repeat(5,1fr)}
  .dm-gquote{grid-template-columns:42px 1fr;gap:11px;padding:13px 14px}
  .dm-gquote-face{width:42px;height:42px}
  .dm-gquote blockquote{font-size:13.5px}
  .dm-shade-row{grid-template-columns:1fr;gap:9px}
  .dm-swatch{display:grid;grid-template-columns:44px 1fr;gap:14px;text-align:left;align-items:center}
  .dm-swatch i{margin:0}
  .dm-header-in{grid-template-columns:auto 1fr auto;padding:11px 0}
  .dm-burger{display:flex}
  .dm-logo{font-size:20px;justify-self:center}
  .dm-nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:40;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--dm-hairline);box-shadow:0 12px 24px rgba(30,12,36,.08)
  }
  .dm-nav.is-open{display:flex}
  .dm-nav a{padding:14px 20px;border-bottom:1px solid var(--dm-hairline)}
  .dm-nav a[aria-current="page"]{border-bottom-color:var(--dm-hairline)}
  .dm-header{position:relative}
  .dm-ticker span{font-size:10.5px;letter-spacing:.11em;gap:26px}
  .dm-ticker-track{gap:26px}
  .dm-orbit-col{grid-template-columns:1fr}
  .dm-orbit-3d{max-width:250px}
  .dm-piece figcaption{font-size:9.5px;bottom:-22px;padding:3px 8px}
  .dm-gtee{padding:42px 18px 26px;border-radius:18px}
  .dm-seal{width:92px;height:92px}
  .dm-seal-core{width:60px;height:60px}
  .dm-seal-core b{font-size:24px}
  .dm-seal-core small{font-size:6.8px;margin-top:4px;padding-top:4px}
  .dm-seal-text{font-size:12px}
  .dm-ba-grid{grid-template-columns:1fr;gap:32px;margin-top:28px}
  .dm-ba-card:nth-child(even){margin-top:0}
  .dm-ba-foot{margin-top:32px}
  .dm-vmodal{padding:0}
  .dm-vmodal-card{grid-template-columns:1fr;max-height:100dvh;height:100dvh;border-radius:0;grid-template-rows:auto 1fr}
  .dm-vmodal-video{max-height:32dvh}
  .dm-vmodal-video video{height:32dvh;max-height:32dvh}
  .dm-vmodal-copy{padding:16px 16px 20px;overflow:auto}
  .dm-vmodal-copy h2{font-size:clamp(19px,2.6vh,23px)}
  .dm-subscribe{grid-template-columns:auto 1fr;row-gap:9px;padding:14px}
  .dm-addon{grid-template-columns:auto auto 1fr;row-gap:8px;padding:11px 12px}
  .dm-addon-price{grid-column:3;justify-self:end;text-align:right}
  .dm-sub-save{grid-column:2;justify-self:start}
  .dm-srow{grid-template-columns:24px 20px 1fr;gap:8px}
  .dm-srow-dot{width:20px;height:20px}
  .dm-close .dm-closerow{grid-template-columns:1fr;gap:18px}
  .dm-close .dm-closerow > div + div::before{display:none}
  .dm-announce{padding:12px 0}
  .dm-announce-track > span{font-size:13px;gap:26px;padding-right:26px}
  .dm-sticky .dm-s-txt small{display:none}
  .dm-sticky .dm-btn{min-width:0;flex:1}
  .dm-compare{padding:0 5px 5px;border-radius:18px}
  .dm-compare tbody th{padding:13px 11px;font-size:14px}
  .dm-compare tbody th em{font-size:11.5px}
  .dm-c-cell{padding:13px 6px}
  .dm-compare thead th{padding:15px 8px 12px}
  .dm-compare thead .dm-c-us,.dm-compare thead .dm-c-them{width:78px}
  .dm-c-mark{height:38px}
  .dm-c-name{font-size:13.5px}
  .dm-c-them .dm-c-name{font-size:12.5px}
  .dm-c-sub{display:none}
  .dm-c-yes,.dm-c-no{width:23px;height:23px}
  .dm-c-yes::after{left:6.6px;top:7px;width:8px;height:4.5px}
  .dm-c-no::after{left:5.6px;top:10.5px;width:10px}
}

/* ============ 13b. guarantee ============ */
.dm-gtee-sec{overflow:hidden}
.dm-gtee{
  /* the seal hangs ~52px above the panel, so the top margin has to clear the
     headline by that much again before the card starts */
  position:relative;max-width:920px;margin:clamp(76px,10vh,112px) auto 0;
  padding:clamp(46px,6vh,64px) clamp(26px,4vw,54px) clamp(30px,4vh,40px);
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(241,236,251,.75),transparent 58%),
    linear-gradient(168deg,#fff 0%,#FFFDFE 46%,#FBF7FA 100%);
  border:1px solid rgba(123,94,199,.22);border-radius:24px;text-align:left;
  box-shadow:0 1px 2px rgba(59,26,69,.04),0 30px 70px -34px rgba(59,26,69,.5)
}
/* engraved double frame, the way a certificate is printed */
.dm-gtee::before{
  content:"";position:absolute;inset:9px;border:1px solid rgba(123,94,199,.16);
  border-radius:17px;pointer-events:none
}
.dm-gtee-corner{
  position:absolute;width:16px;height:16px;pointer-events:none;
  border:0 solid rgba(123,94,199,.45)
}
.dm-gtee-corner--tl{top:17px;left:17px;border-top-width:1.5px;border-left-width:1.5px}
.dm-gtee-corner--tr{top:17px;right:17px;border-top-width:1.5px;border-right-width:1.5px}
.dm-gtee-corner--bl{bottom:17px;left:17px;border-bottom-width:1.5px;border-left-width:1.5px}
.dm-gtee-corner--br{bottom:17px;right:17px;border-bottom-width:1.5px;border-right-width:1.5px}

/* --- the seal --- */
.dm-seal{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  width:112px;height:112px;display:grid;place-items:center;color:var(--dm-brand)
}
.dm-seal-ring{
  position:absolute;inset:0;width:100%;height:100%;
  animation:dm-seal-spin 44s linear infinite
}
.dm-seal-text{
  font-family:var(--dm-font);font-size:13px;font-weight:600;letter-spacing:.22em;
  fill:var(--dm-brand);opacity:.55
}
.dm-seal-core{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 36% 26%,#5C2C6B,var(--dm-brand) 74%);color:#fff;
  box-shadow:0 8px 20px -8px rgba(59,26,69,.9),inset 0 1px 0 rgba(255,255,255,.3)
}
.dm-seal-core b{
  font-family:var(--dm-font-display);font-size:30px;font-weight:400;line-height:.86;
  letter-spacing:.01em;font-feature-settings:"lnum" 1
}
.dm-seal-core small{
  position:relative;margin-top:6px;padding-top:5px;
  font-size:7.5px;font-weight:600;letter-spacing:.24em;text-indent:.24em;
  text-transform:uppercase;opacity:.82
}
/* hairline rule between the numeral and the word, like a struck seal */
.dm-seal-core small::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:1px;background:rgba(255,255,255,.4)
}
@keyframes dm-seal-spin{to{transform:rotate(360deg)}}

/* --- terms --- */
.dm-gtee-terms{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,38px)
}
.dm-gtee-terms li{position:relative;padding-top:4px}
.dm-gtee-terms li + li::before{
  content:"";position:absolute;left:calc(-1 * clamp(10px,1.5vw,19px));top:6px;bottom:6px;
  width:1px;background:linear-gradient(180deg,transparent,rgba(123,94,199,.22),transparent)
}
.dm-gtee-n{
  display:block;font-family:var(--dm-font-display);font-style:italic;font-size:15px;
  color:var(--dm-accent);letter-spacing:.08em;margin-bottom:7px
}
.dm-gtee-terms h3{
  font-family:var(--dm-font-display);font-weight:500;font-size:19px;line-height:1.22;
  color:var(--dm-brand);margin:0 0 7px
}
.dm-gtee-terms p{margin:0;font-size:13.5px;line-height:1.6;color:var(--dm-ink-mute)}
.dm-gtee-terms a{color:var(--dm-accent);text-decoration:underline;text-underline-offset:2px}

.dm-gtee-fine{
  margin:clamp(22px,3vh,30px) 0 0;padding-top:18px;border-top:1px solid rgba(123,94,199,.16);
  font-size:12.5px;line-height:1.6;color:var(--dm-ink-mute)
}
.dm-gtee-sign{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:16px 0 0;font-size:12px;color:#9A93A0
}
.dm-gtee-sign span{
  font-family:var(--dm-font-display);font-style:italic;font-size:22px;color:var(--dm-brand)
}
@media (prefers-reduced-motion:reduce){.dm-seal-ring{animation:none}}

/* ============ 14b. footer ============ */
.dm-foot{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(120% 80% at 12% 8%,rgba(123,94,199,.34),transparent 56%),
    radial-gradient(90% 70% at 88% 20%,rgba(214,158,190,.20),transparent 60%),
    linear-gradient(168deg,#4A2158 0%,#3B1A45 46%,#2A1230 100%)
}
/* the two ends drift behind the type as a watermark, not a photo */
.dm-foot-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dm-foot-ghost{position:absolute;height:auto;opacity:.13;filter:blur(.4px)}
.dm-foot-ghost--l{width:190px;left:-46px;top:-30px;transform:rotate(-18deg)}
.dm-foot-ghost--r{width:180px;right:-44px;bottom:-56px;transform:rotate(14deg)}
.dm-foot-in{position:relative;z-index:1;padding:clamp(54px,7vh,84px) 20px clamp(26px,3vh,34px)}

.dm-foot-top{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(34px,5vw,64px);align-items:start}
.dm-foot-lead h3{
  font-family:var(--dm-font-display);font-weight:500;font-size:clamp(25px,2.9vw,36px);
  line-height:1.16;color:#fff;letter-spacing:-.01em;max-width:16ch;margin:0
}
.dm-foot-form{
  display:flex;align-items:center;margin-top:24px;max-width:430px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
  border-radius:60px;overflow:hidden;backdrop-filter:blur(4px)
}
.dm-foot-form input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;color:#fff;
  font:400 15px var(--dm-font);padding:15px 22px
}
.dm-foot-form input::placeholder{color:rgba(255,255,255,.62)}
.dm-foot-form button{
  flex:0 0 44px;width:44px;height:44px;margin:4px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:#fff;color:var(--dm-brand);
  transition:transform .2s ease,background .2s ease
}
.dm-foot-form button:hover{transform:translateX(2px);background:var(--dm-lilac-wash)}
.dm-foot-form button svg{width:19px;height:19px}
.dm-foot-form.is-done{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.14)}
.dm-foot-formnote{margin:11px 0 0;font-size:12px;color:rgba(255,255,255,.6);max-width:430px}
.dm-foot-note{
  margin-top:20px;max-width:460px;padding:16px 19px;font-size:12.5px;line-height:1.65;
  color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.24);border-radius:14px
}

.dm-foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.dm-foot-cols h5{
  margin:0 0 14px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#C48AF1
}
.dm-foot-cols a{
  display:block;padding:6px 0;font-size:14.5px;color:rgba(255,255,255,.86);
  text-decoration:none;overflow-wrap:anywhere;transition:color .16s ease
}
.dm-foot-cols a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.dm-foot-hours{display:block;padding:6px 0;font-size:12.5px;color:rgba(255,255,255,.55)}

.dm-foot-wordmark{
  text-align:center;font-family:var(--dm-font-display);font-weight:400;
  font-size:clamp(58px,13vw,168px);line-height:1;letter-spacing:-.02em;
  color:rgba(255,255,255,.96);padding:clamp(30px,5vh,54px) 0 clamp(10px,2vh,18px);
  user-select:none
}
.dm-foot-wordmark sup{font-size:.16em;vertical-align:super;opacity:.55}

.dm-foot-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  font-size:12.5px;color:rgba(255,255,255,.66)
}
.dm-foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.dm-foot-legal a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}
.dm-foot-legal a:hover{color:#fff}
.dm-foot-tag{font-family:var(--dm-font-display);font-style:italic;font-size:15px;color:rgba(255,255,255,.9)}

@media (max-width:1000px){
  .dm-foot-top{grid-template-columns:1fr;gap:34px}
  .dm-foot-ghost{display:none}
}
@media (max-width:640px){
  .dm-foot-cols{grid-template-columns:1fr 1fr;gap:14px 18px}
  .dm-foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .dm-foot-in{padding-bottom:96px}
}

.dm-vmodal-copy .dm-btn{padding:14px 20px;font-size:16px}