/* ==========================================================================
   Medspa_Theme — Treatment Process Layouts (20)
   Token-driven tones. GROUND RULE enforced. Spacing token is --gap.
   ========================================================================== */
.msvc-process{position:relative;
  --p-bg:var(--cream); --p-fg:var(--ink); --p-fg2:var(--body); --p-fg3:var(--muted);
  --p-line:var(--border); --p-accent:var(--coral-ink); --p-card:#fff;
  background:var(--p-bg);color:var(--p-fg2);padding-block:var(--gap);
  display:block;grid-template-columns:none}
.msvc-process.t-white{--p-bg:var(--white)}
.msvc-process.t-cream{--p-bg:var(--cream)}
.msvc-process.t-sand {--p-bg:var(--sand)}
/* BLUSH RULE: --coral-ink 4.18:1 and --muted 4.11:1 FAIL on blush. */
.msvc-process.t-blush{--p-bg:var(--blush); --p-accent:var(--coral-dk); --p-fg3:var(--body)}
.msvc-process.t-ink{--p-bg:var(--ink); --p-fg:#fff; --p-fg2:var(--on-dark-2); --p-fg3:var(--on-dark-2);
  --p-line:var(--border-lt); --p-accent:var(--nude); --p-card:var(--dark)}

.msvc-process .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.msvc-process .msvc-eyebrow{color:var(--p-accent)}
.msvc-process h2{color:var(--p-fg)}
.msvc-process h3{color:var(--p-fg);font-size:.95rem;font-weight:700;margin:0 0 7px;line-height:1.35}
.msvc-process p{color:var(--p-fg2);font-size:.84rem;line-height:1.6;margin:0}
.msvc-process .num{font-family:var(--fd);font-size:1.4rem;line-height:1;
  color:var(--p-accent);margin-bottom:12px}
.msvc-process .ph{display:grid;place-items:center;background:var(--sand);color:var(--muted);
  border-radius:var(--rl);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.msvc-process img{border-radius:var(--rl);display:block}
.pr-head{margin-bottom:clamp(28px,3.5vw,48px)}
.pr-head.ctr{text-align:center;max-width:720px;margin-inline:auto}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.pr-card{border-radius:var(--rl);padding:24px}
/* 1 · rule + number */
.pr1-i{padding-top:18px;border-top:2px solid var(--p-accent)}
/* 2 · horizontal timeline */
.pr2-t{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:24px;padding-top:42px}
.pr2-rail{position:absolute;left:6%;right:6%;top:15px;height:2px;background:var(--p-line)}
.pr2-i{position:relative}
.pr2-i .d{position:absolute;top:-42px;left:0;width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;background:var(--p-accent);color:#fff;font-size:.8rem;font-weight:700;
  box-shadow:0 0 0 4px var(--p-bg)}
/* 3 · alternating */
.pr3-t{position:relative;display:grid;gap:6px}
.pr3-t::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--p-line);transform:translateX(-50%)}
.pr3-i{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-block:16px}
.pr3-i .b{grid-column:1}
.pr3-i.r .b{grid-column:2}
.pr3-i .d{position:absolute;left:50%;top:18px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--p-accent);color:#fff;font-size:.78rem;font-weight:700;
  transform:translateX(-50%);box-shadow:0 0 0 4px var(--p-bg);z-index:2}
/* 4 · vertical rail */
.pr4-t{position:relative;display:grid;padding-left:56px}
.pr4-t::before{content:'';position:absolute;left:18px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(var(--p-accent),var(--p-line))}
.pr4-i{position:relative;padding-block:18px}
.pr4-i .d{position:absolute;left:-56px;top:14px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--p-accent);color:#fff;
  font-family:var(--fd);font-size:1rem;z-index:2}
/* 5 · dark cards — owns its ground */
.msvc-process.pr-5{--p-bg:var(--ink); --p-fg:#fff; --p-fg2:var(--on-dark-2); --p-fg3:var(--on-dark-2);
  --p-line:var(--border-lt); --p-accent:var(--nude)}
.pr5-c{--p-fg:#fff; --p-fg2:var(--on-dark-2); --p-accent:var(--nude);
  background:var(--dark);border:1px solid var(--border-lt)}
/* 6 · duration-led */
.pr6-l{display:grid}
.pr6-i{display:grid;grid-template-columns:180px 1fr;gap:28px;padding-block:22px;
  border-bottom:1px solid var(--p-line);align-items:baseline}
.pr6-i:first-child{border-top:1px solid var(--p-line)}
.pr6-i .t{font-family:var(--fd);font-size:1.4rem;color:var(--p-accent);line-height:1.1}
.pr6-tot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:22px;
  padding:18px 22px;border-radius:var(--rl);background:var(--p-card);border:1px solid var(--p-line)}
.pr6-tot span{font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--p-fg3)}
.pr6-tot strong{font-family:var(--fd);font-size:1.4rem;font-weight:400;color:var(--p-fg)}
/* 7 · appointment schedule */
.pr7-l{display:grid;border-top:1px solid var(--p-line)}
.pr7-i{display:grid;grid-template-columns:110px 1fr;gap:24px;padding-block:20px;
  border-bottom:1px solid var(--p-line);align-items:start}
.pr7-i .tm{font-family:var(--fd);font-size:1.15rem;color:var(--p-accent);
  padding-top:1px;font-variant-numeric:tabular-nums}
.pr7-i .dur{margin-top:8px;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--p-fg3)}
/* 8 · photo per step */
.pr8-c{--p-fg:var(--ink); --p-fg2:var(--body); --p-accent:var(--coral-ink);
  background:#fff;border:1px solid var(--border);padding:0;overflow:hidden}
.pr8-c img,.pr8-c .ph{border-radius:0}
.pr8-c .b{padding:20px}
.pr8-c .num{font-size:1.1rem;margin-bottom:8px}
/* 9 · sticky heading */
.pr9-g{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,60px);align-items:start}
.pr9-s{position:sticky;top:96px}
.pr9-s .pr-head{margin-bottom:0}
.pr9-l{list-style:none;margin:0;padding:0;display:grid}
.pr9-l li{display:flex;gap:20px;padding-block:20px;border-bottom:1px solid var(--p-line)}
.pr9-l li:first-child{border-top:1px solid var(--p-line)}
.pr9-l .n{font-family:var(--fd);font-size:1.2rem;color:var(--p-accent);flex:none;min-width:34px}
/* 10 · accordion */
.pr10-w{border-top:1px solid var(--p-line);max-width:900px;margin-inline:auto}
.pr10-i{border-bottom:1px solid var(--p-line)}
.pr10-i summary{cursor:pointer;padding:18px 0;list-style:none;display:flex;gap:18px;align-items:baseline}
.pr10-i summary::-webkit-details-marker{display:none}
.pr10-i summary::after{content:'+';margin-left:auto;color:var(--p-accent);font-size:1.2rem;line-height:1}
.pr10-i[open] summary::after{content:'–'}
.pr10-i .n{font-family:var(--fd);font-size:1rem;color:var(--p-accent);flex:none;min-width:30px}
.pr10-i .t{font-size:.95rem;font-weight:700;color:var(--p-fg)}
.pr10-i .d{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--p-fg3);margin-left:14px}
.pr10-i p{padding:0 0 18px 48px;max-width:70ch}
/* 11 · stepper with checkmarks */
.pr11-t{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:24px;padding-top:44px}
.pr11-rail{position:absolute;left:6%;right:6%;top:16px;height:2px;background:var(--p-line)}
.pr11-i{position:relative}
.pr11-i .k{position:absolute;top:-44px;left:0;width:33px;height:33px;border-radius:50%;
  display:grid;place-items:center;background:var(--p-accent);color:#fff;font-size:.85rem;font-weight:700;
  box-shadow:0 0 0 4px var(--p-bg)}
/* 12 · table */
.pr12-w{overflow-x:auto}
.pr12-t{width:100%;border-collapse:collapse;text-align:left;min-width:600px}
.pr12-t th,.pr12-t td{padding:15px 16px;border-bottom:1px solid var(--p-line);font-size:.84rem;vertical-align:top}
.pr12-t thead th{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--p-fg3);font-weight:700}
.pr12-t tbody th{font-weight:700;color:var(--p-fg);width:28%}
.pr12-t tbody th span{color:var(--p-accent);font-family:var(--fd);
  font-size:.95rem;margin-right:9px;font-weight:400}
.pr12-t td{color:var(--p-fg2)}
.pr12-t td.d{color:var(--p-accent);white-space:nowrap;width:15%;font-weight:700;font-size:.78rem}
/* 13 · zigzag */
.pr13-w{display:grid;gap:clamp(24px,3vw,44px)}
.pr13-r{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);align-items:center}
.pr13-r.rev .pr13-i{order:2}
/* 14 · staircase */
.pr14-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;align-items:start}
.pr14-c{--p-fg:var(--ink); --p-fg2:var(--body); --p-accent:var(--coral-ink);
  background:#fff;border:1px solid var(--border);margin-top:calc(var(--i,0) * 22px)}
/* 15 · duration donut */
.pr15-g{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.pr15-d{position:relative;width:210px;height:210px;border-radius:50%;flex:none}
.pr15-d::after{content:'';position:absolute;inset:52px;border-radius:50%;background:var(--p-bg)}
/* The hole is filled with --p-bg (the section's own ground), so the centre text
   correctly inherits the section's tokens. Declaring --p-fg:var(--p-fg) here was a
   cyclic reference — invalid, and it would have made the token resolve to nothing. */
.pr15-d .c{position:absolute;inset:52px;border-radius:50%;display:grid;place-items:center;
  align-content:center;z-index:2}
.pr15-d strong{font-family:var(--fd);font-size:1.5rem;font-weight:400;color:var(--p-fg);line-height:1}
.pr15-d small{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p-fg3);margin-top:5px}
.pr15-l{display:grid}
.pr15-i{display:flex;gap:14px;padding-block:14px;border-bottom:1px solid var(--p-line);align-items:flex-start}
.pr15-i:first-child{border-top:1px solid var(--p-line)}
.pr15-i .sw{flex:none;width:11px;height:11px;border-radius:3px;background:var(--p-accent);margin-top:4px}
.pr15-i:nth-child(2) .sw{opacity:.78}
.pr15-i:nth-child(3) .sw{opacity:.56}
.pr15-i:nth-child(n+4) .sw{opacity:.34}
.pr15-i .d{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--p-accent);margin-top:5px}
/* 16 · ghost numerals */
.pr16-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px}
.pr16-i{position:relative;padding-top:32px}
.pr16-i .g{position:absolute;top:-16px;left:-6px;font-family:var(--fd);
  font-size:4rem;line-height:1;color:var(--p-fg);opacity:.09}
.pr16-i .b{position:relative;z-index:1}
/* 17 · we do / you feel */
.pr17-t{display:grid;border-top:1px solid var(--p-line)}
.pr17-r{display:grid;grid-template-columns:.75fr 1.15fr 1.1fr;gap:24px;padding-block:20px;
  border-bottom:1px solid var(--p-line);align-items:start}
.pr17-k{font-size:.9rem;font-weight:700;color:var(--p-fg)}
.pr17-k span{display:block;font-family:var(--fd);font-size:.95rem;font-weight:400;
  color:var(--p-accent);margin-bottom:5px}
.pr17-a,.pr17-b{display:grid;gap:6px}
.pr17-t .lb{font-size:.63rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.pr17-a .lb{color:var(--p-fg3)}
.pr17-b .lb{color:var(--p-accent)}
/* 18 · fanned deck */
.pr18-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;align-items:start}
.pr18-c{--p-fg:var(--ink); --p-fg2:var(--body); --p-accent:var(--coral-ink);
  background:#fff;border:1px solid var(--border);
  transform:rotate(calc((var(--i,0) - (var(--n,4) - 1) / 2) * 1.4deg));
  box-shadow:0 12px 34px rgba(0,0,0,.09);transition:transform .25s}
.pr18-c:hover{transform:rotate(0) translateY(-4px)}
@media(prefers-reduced-motion:reduce){.pr18-c{transition:none}}
/* 19 · two-tone split — owns its ground */
.msvc-process.pr-19{--p-bg:var(--cream)}
.pr19-g{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px;align-items:stretch}
.pr19-p{--p-fg:#fff; --p-fg2:var(--on-dark-2); --p-fg3:var(--on-dark-2); --p-accent:var(--nude);
  background:var(--ink);border-radius:var(--rl);padding:clamp(24px,3vw,40px);display:flex;align-items:center}
.pr19-p .pr-head{margin-bottom:0}
.pr19-l{display:grid;padding-left:8px}
.pr19-i{display:flex;gap:18px;padding-block:18px;border-bottom:1px solid var(--p-line)}
.pr19-i:first-child{border-top:1px solid var(--p-line)}
.pr19-i .d{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--p-accent);color:#fff;font-size:.78rem;font-weight:700}
/* 20 · notched frame */
.pr20-fr{--p-fg:var(--ink); --p-fg2:var(--body); --p-fg3:var(--muted); --p-accent:var(--coral-ink);
  --p-line:var(--border);
  background:#fff;border:1px solid var(--ink);padding:clamp(24px,3.5vw,48px);
  clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,40px 100%,0 calc(100% - 40px))}

@media(max-width:900px){
  .pr9-g,.pr13-r,.pr19-g,.pr15-g{grid-template-columns:1fr}
  .pr6-i,.pr7-i,.pr17-r{grid-template-columns:1fr;gap:8px}
  .pr3-t::before{left:5px}
  .pr3-i{grid-template-columns:1fr;padding-left:44px}
  .pr3-i .b,.pr3-i.r .b{grid-column:1}
  .pr3-i .d{left:15px}
  .pr13-r.rev .pr13-i{order:0}
  .pr9-s{position:static}
  .pr14-c{margin-top:0}
  .pr18-c{transform:none}
  .pr10-i p{padding-left:0}
  .pr15-d{margin-inline:auto}
}


/* 2.53.17 — Responsive stepper correction.
   Layout 11 uses markers above a horizontal rail on desktop. Once the grid
   collapses, absolutely positioned markers would sit over the previous step's
   paragraph. On tablet/mobile, turn every step into a normal icon/content row. */
@media(max-width:900px){
  .msvc-process.pr-11 .pr11-t{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding-top:0;
  }
  .msvc-process.pr-11 .pr11-rail{display:none}
  .msvc-process.pr-11 .pr11-i{
    position:relative;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:14px;
    align-items:start;
    padding-block:18px;
    border-bottom:1px solid var(--p-line);
    min-width:0;
  }
  .msvc-process.pr-11 .pr11-i:first-of-type{
    border-top:1px solid var(--p-line);
  }
  .msvc-process.pr-11 .pr11-i .k{
    position:static;
    inset:auto;
    width:38px;
    height:38px;
    margin:0;
    box-shadow:none;
    flex:none;
  }
  .msvc-process.pr-11 .pr11-i .b{
    min-width:0;
    padding:0;
  }
  .msvc-process.pr-11 .pr11-i h3{
    margin-top:1px;
  }
}

@media(max-width:480px){
  .msvc-process.pr-11 .pr11-i{
    grid-template-columns:38px minmax(0,1fr);
    gap:12px;
    padding-block:16px;
  }
  .msvc-process.pr-11 .pr11-i .k{
    width:34px;
    height:34px;
    font-size:.8rem;
  }
}

/* 21 · stacked full-width cards, dark number block */
.pr21-l{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.pr21-i{display:grid;grid-template-columns:76px 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;transition:box-shadow .25s ease}
.pr21-i:hover{box-shadow:var(--sh)}
.pr21-n{display:grid;place-items:center;background:var(--ink);color:var(--nude);font-family:var(--fd);font-size:1.6rem;line-height:1}
.pr21-b{padding:24px 28px}
.msvc-process .pr21-b h3{color:var(--ink);font-size:1.25rem;font-weight:600;margin:0 0 6px}
.msvc-process .pr21-b p{color:var(--body);font-size:.95rem;line-height:1.65}
.msvc-process.t-ink .pr21-i{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.msvc-process.t-ink .pr21-n{background:rgba(255,255,255,.08)}
.msvc-process.t-ink .pr21-b h3{color:#fff}
.msvc-process.t-ink .pr21-b p{color:var(--on-dark-2)}
@media (max-width:600px){.pr21-i{grid-template-columns:56px 1fr}.pr21-n{font-size:1.25rem}.pr21-b{padding:18px}}
@media (prefers-reduced-motion:reduce){.pr21-i{transition:none}}