/* Digital Vitamins — shared kit product page (all five kit-*.html) */
.kitp{--tint:var(--yuzu)}
.kitp__hero{background:radial-gradient(90% 90% at 78% 30%,color-mix(in oklab,var(--tint) 55%,var(--mocha-hi)),var(--mocha) 50%,var(--mocha-lo))}
.kitp__hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(30px,5vw,80px);align-items:center;position:relative;z-index:1}
.kitp__type{color:var(--peach);margin-bottom:18px}
.kitp__who{font-size:16px!important;margin-top:18px!important}
.kitp__who .mono{display:block;opacity:.7;margin-bottom:6px}
.kitp__bottle{display:grid;place-items:center}
.vessel--xl{max-width:280px}
.vessel--xl .vessel__cap{height:48px}
.vessel--xl .vessel__label b{font-size:24px}
.vessel--sm{max-width:74px;margin:0;filter:drop-shadow(0 10px 12px rgba(74,55,45,.22))}
.vessel--sm .vessel__cap{height:14px;border-radius:5px 5px 2px 2px}
.vessel--sm .vessel__neck{height:4px}
.vessel--sm .vessel__body{border-radius:12px 12px 9px 9px;padding:5px}
.vessel--sm .vessel__label{padding:4px 5px;border-radius:4px}
.vessel--sm .vessel__label b{font-size:9px}
.vessel--sm .vessel__label small{font-size:5.5px;margin-top:2px}
.vessel--refill .vessel__cap{width:60%;border-radius:4px}
.vessel--refill .vessel__body{aspect-ratio:3/3.2;border-radius:10px 10px 16px 16px}
@media (max-width:820px){.kitp__hero-grid{grid-template-columns:1fr}.vessel--xl{max-width:200px}}

/* texture: sample mockup */
.tx{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
@media (max-width:1000px){.tx{grid-template-columns:1fr}}
.tx__stage{position:relative;--m-bg:#F6F0E9;--m-ink:#2B211C;--m-acc:var(--tint);--m-font:"Albert Sans",system-ui,sans-serif}
.tx__browser{border-radius:18px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(74,55,45,.45)}
.tx__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--rice-2);border-bottom:1px solid var(--line)}
.tx__bar i{width:9px;height:9px;border-radius:50%;background:rgba(43,33,28,.18)}
.tx__bar span{margin-left:10px;font-family:var(--mono);font-size:11px;color:var(--ink-2);background:var(--paper);padding:3px 12px;border-radius:99px}
.tx__site{background:var(--m-bg);color:var(--m-ink);font-family:var(--m-font);transition:background .5s var(--ease),color .5s}
.tx__browser .tx__site{padding:clamp(16px,2.4vw,30px);container-type:inline-size}
.tx__nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px}
.tx__nav nav{display:flex;gap:14px;margin-left:auto;opacity:.75}
.tx__logo{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:-.01em}
.tx__logo em{width:14px;height:14px;border-radius:4px;background:var(--m-acc);transition:background .5s}
.tx__btn{display:inline-block;padding:9px 16px;border-radius:99px;background:var(--m-acc);color:#fff;font-weight:600;font-size:13px;transition:background .5s}
.tx__btn--sm{padding:6px 12px;font-size:12px}
.tx__hero{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:stretch;margin-top:clamp(24px,4cqw,44px)}
.tx__h{font-size:clamp(24px,5.4cqw,44px);line-height:1.02;letter-spacing:-.03em;font-weight:700}
.tx__hero p{margin-top:14px;font-size:14px;opacity:.72;max-width:40ch}
.tx__ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:18px}
.tx__link{font-size:13px;border-bottom:1px solid var(--m-acc)}
.tx__art{border-radius:12px;min-height:170px;background:linear-gradient(150deg,var(--m-acc),color-mix(in oklab,var(--m-acc) 45%,#000));position:relative;transition:background .5s}
.tx__badge{position:absolute;left:10px;bottom:10px;right:10px;background:rgba(255,255,255,.9);color:#2B211C;font-size:11px;padding:7px 10px;border-radius:8px;font-family:var(--m-font)}
@media (max-width:560px){.tx__hero{grid-template-columns:1fr}.tx__nav nav{display:none}.tx__art{min-height:90px}}
.tx__phone{position:absolute;right:-10px;bottom:-34px;width:min(190px,38%);border-radius:24px;padding:8px;background:var(--ink);box-shadow:0 30px 50px -20px rgba(43,33,28,.5)}
.tx__samp{position:absolute;top:-22px;left:8px;font-size:9px;color:var(--ink-2)}
.tx__site--mini{border-radius:17px;padding:16px 14px 18px;display:grid;gap:10px}
.tx__site--mini .tx__h{font-size:17px}
.tx__site--mini p{font-size:11px;opacity:.7}
.tx__site--mini .tx__btn{justify-self:start;font-size:11px;padding:7px 12px}
@media (max-width:700px){.tx__phone{position:relative;right:auto;bottom:auto;margin:40px auto 0;width:200px}}
.tx__panel{display:grid;gap:22px}
.tx__cap{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;font-weight:500;line-height:1.2}
.tx__note{color:var(--ink-2);font-size:15px}
.seg--sw span{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px}
.sw{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);flex:none}
.sw--aa{display:grid;place-items:center;background:var(--rice-2);font-size:11px;font-weight:600;color:var(--ink)}
.seg--sw input:checked+span .sw--aa{background:var(--paper)}
.tx__fixed{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;color:var(--ink-2);padding-top:16px;border-top:1px solid var(--line)}
.tx__fixed .mono{font-size:10px;color:var(--ink)}
.tx__reset{justify-self:start}

/* ingredients */
.kit-ing{font-size:14px!important;color:var(--tint)!important;filter:saturate(1.4)}
.kitp__rows .row h3{font-weight:600}

/* not formulated for */
.kitp__not{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
.kitp__not .dash-list{font-size:clamp(17px,1.4vw,20px)}
.kitp__aside{padding:24px;border-radius:18px;background:var(--paper);box-shadow:0 0 0 1px var(--line);color:var(--ink-2)}
@media (max-width:860px){.kitp__not{grid-template-columns:1fr}}

/* sizes */
.size__top{display:flex;align-items:flex-end;gap:20px}
.size__price{font-size:clamp(40px,4.4vw,64px);font-weight:200;letter-spacing:-.05em;line-height:1;color:var(--ink)!important}
.size__price small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.size__dl{display:grid;border-top:1px solid var(--line);margin:6px 0 10px}
.size__dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.size__dl dt{color:var(--ink-2)}
.size__dl dd{font-weight:600;text-align:right}
.size .pill{align-self:flex-start;margin-top:auto}
.size--rent{background:color-mix(in oklab,var(--tint) 12%,var(--paper))}
.kitp__cross{margin-top:clamp(30px,4vw,50px);max-width:900px;font-size:clamp(18px,1.5vw,22px);font-weight:300;line-height:1.5}
.kitp__cross b{font-weight:700;color:var(--yuzu-lo)}

/* break-even */
.be{margin-top:clamp(30px,4vw,50px);border-radius:var(--r);padding:clamp(22px,3vw,40px);background:var(--mocha-lo);color:var(--rice);display:grid;gap:26px}
.be .mono{opacity:.65;margin-bottom:10px}
.be__head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.be__verdict{font-size:clamp(18px,1.6vw,22px);font-weight:500;max-width:36ch;color:var(--peach)}
.be__ctl{display:grid;grid-template-columns:1fr 1fr auto;gap:24px;align-items:end}
@media (max-width:820px){.be__ctl{grid-template-columns:1fr}}
.be .field>span{color:rgba(246,240,233,.7)}
.be output{color:var(--rice);font-weight:500}
.be input[type=range]{background:linear-gradient(90deg,var(--yuzu) var(--p,40%),rgba(246,240,233,.2) var(--p,40%))}
.be__chk{display:flex;gap:10px;align-items:center;font-size:14px;cursor:pointer}
.be__chk input{width:18px;height:18px;accent-color:var(--yuzu)}
.be__bars{display:grid;gap:12px}
.be__bar{display:grid;grid-template-columns:110px 1fr auto;gap:14px;align-items:center;font-size:14px}
.be__bar>div{height:14px;border-radius:99px;background:rgba(246,240,233,.12);overflow:hidden}
.be__fill{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;border-radius:inherit;transition:transform .5s var(--ease)}
.be__fill--buy{background:var(--peach)}
.be__fill--rent{background:var(--tint)}
.be__v{font-weight:700;font-variant-numeric:tabular-nums;min-width:7ch;text-align:right}
.be__note{font-size:14px;color:rgba(246,240,233,.7);max-width:760px}
@media (max-width:480px){.be__bar{grid-template-columns:1fr auto}.be__bar>div{grid-column:1/-1;grid-row:2}}

/* next band in next kit's tint */
.band.magnetic-band{background:linear-gradient(160deg,color-mix(in oklab,var(--next) 70%,#fff),var(--next) 55%,color-mix(in oklab,var(--next) 70%,var(--mocha-deep)));color:var(--ink)}
.band.magnetic-band .sec-idx{color:rgba(43,33,28,.7)}