/* 08-cleanse.css — The cleanse builder and its day-by-day strip. */

/* ---------- cleanse builder ---------- */
.cleanse{background:var(--paper-2)}
.cleanse-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.plan{
  width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr auto;
  gap:18px;align-items:center;padding:22px 24px;border-radius:6px;
  border:1.5px solid var(--line);background:transparent;
  transition:border-color .2s,background .2s,transform .2s;margin-bottom:14px;
}
.plan:hover{border-color:var(--line-strong);transform:translateX(3px)}
.plan[aria-pressed="true"]{border-color:var(--accent);background:rgba(255,255,255,.55)}
.plan-dot{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line-strong);transition:.2s}
.plan[aria-pressed="true"] .plan-dot{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 4px var(--paper-2)}
.plan-name{font-family:var(--display);font-size:21px;line-height:1.2}
.plan-note{font-size:14px;opacity:.7;margin-top:3px;display:block}
.plan-price{font-size:20px;font-weight:600;white-space:nowrap}
.daystrip{margin-top:30px}
.daystrip h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin:0 0 16px;font-weight:600}
.day{margin-bottom:18px}
.day-label{font-size:13.5px;opacity:.6;margin-bottom:8px}
.day-row{display:flex;gap:7px;flex-wrap:wrap}
.slot{
  flex:1;min-width:52px;border-radius:5px;padding:9px 6px 10px;text-align:center;
  font-size:11px;letter-spacing:.06em;line-height:1.3;
  animation:slotin .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes slotin{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.slot b{display:block;font-size:12.5px;font-weight:600;margin-top:3px;letter-spacing:0}
.summary{
  border:1px solid var(--line);border-radius:8px;padding:28px;background:var(--paper);
  position:sticky;top:110px;
}
.summary-row{display:flex;justify-content:space-between;gap:16px;font-size:15px;padding:9px 0;align-items:center}
.summary-row.total{border-top:1px solid var(--line);margin-top:10px;padding-top:16px;font-size:21px;font-weight:600}
.summary .btn{width:100%;justify-content:center;margin-top:20px}
.stepper{display:flex;align-items:center;gap:2px;border:1.5px solid var(--line-strong);border-radius:999px;overflow:hidden}
.stepper button{width:32px;height:30px;font-size:17px;line-height:1}
.stepper button:hover{background:rgba(22,36,31,.08)}
.stepper span{min-width:26px;text-align:center;font-size:15px;font-weight:600}