/* Skin diagnosis ([mp_diagnostic_peau]): guided flow. Uses the theme's tokens (v12.css) with fallbacks. */
.mp-skin{--sk-ink:var(--ink,#1C2B18);--sk-text:var(--text,#3B4536);--sk-green:var(--green-strong,#4A7A00);--sk-dark:var(--green-dark,#3D6100);--sk-logo:var(--green,#6DAC03);--sk-soft:var(--green-soft,#F1F7EC);--sk-soft2:var(--green-soft-2,#E4F4CC);--sk-border:var(--border,#E6EAE3);--sk-muted:var(--muted,#667062);--sk-r:var(--r-lg,16px);--sk-display:var(--display,inherit);--sk-ease:var(--ease,cubic-bezier(.2,.7,.2,1));max-width:1120px;margin:0 auto 56px;color:var(--sk-text)}
.mp-skin [hidden]{display:none!important}
.mp-skin svg{width:20px;height:20px;flex:none}
.mp-content>p:has(+ .mp-skin){display:none} /* The page's intro sentence: the landing says it. */
.sk-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sk-muted{color:var(--sk-muted)}
.sk-center{text-align:center;justify-content:center}
.mp-skin [tabindex="-1"]:focus{outline:none}
.mp-skin-admin{margin:0 0 16px;padding:12px 16px;border-radius:var(--r-md,8px);background:#FFF7E0;border:1px solid #E8C872;font-size:.875rem}

/* Landing */
.sk-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;background:linear-gradient(135deg,var(--sk-soft),#fff 70%);border:1px solid var(--sk-border);border-radius:24px;padding:40px;overflow:hidden}
.sk-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--sk-soft2);color:var(--sk-dark);font-size:.8125rem;font-weight:600;letter-spacing:.02em}
.sk-eyebrow svg{width:16px;height:16px;color:var(--sk-logo)}
.sk-title{margin:0 0 14px;font-family:var(--sk-display);font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.15;letter-spacing:-.02em;color:var(--sk-ink)}
.sk-lead{margin:0 0 20px;font-size:1.0625rem;line-height:1.6}
.sk-benefits{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:0 0 28px;padding:0;list-style:none}
.sk-benefits li{display:flex;align-items:flex-start;gap:8px;font-weight:500;color:var(--sk-ink);font-size:.9375rem}
.sk-benefits svg{color:var(--sk-green);margin-top:1px}
.sk-cta{min-height:56px;padding:16px 28px;font-size:1rem;font-weight:600;border-radius:999px}
.sk-cta svg{transition:transform .2s var(--sk-ease)}
.sk-cta:hover svg{transform:translateX(3px)}
.sk-reassure{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:.8125rem;color:var(--sk-muted)}
.sk-reassure svg{width:16px;height:16px}
.sk-hero-img{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 24px 48px -28px rgba(28,43,24,.45)}
.sk-hero-img img{width:100%;height:100%;object-fit:cover;object-position:56% 30%;display:block}
.sk-hero-img.is-custom img{object-position:50% 30%}
.sk-how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 0;padding:0;list-style:none;counter-reset:sk}
.sk-how li{counter-increment:sk;position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:start;padding:18px;border:1px solid var(--sk-border);border-radius:var(--sk-r);background:#fff}
.sk-how-ic{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--sk-soft);color:var(--sk-green)}
.sk-how strong{color:var(--sk-ink)}
.sk-how strong::before{content:counter(sk) ". ";color:var(--sk-green)}
.sk-how span:last-child{font-size:.875rem;color:var(--sk-muted)}

/* Flow shell */
.sk-flow{max-width:760px;margin:0 auto}
.sk-progress{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 16px;margin:0 0 16px}
.sk-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 12px 0 6px;border:0;border-radius:999px;background:none;color:var(--sk-text);font:inherit;font-weight:500;cursor:pointer}
.sk-back:hover{background:var(--sk-soft)}
.sk-back:focus-visible,.sk-link:focus-visible,.sk-opt input:focus-visible+span,.sk-shutter:focus-visible{outline:2px solid var(--sk-green);outline-offset:2px}
.sk-count{grid-column:2;margin:0;text-align:right;font-size:.875rem;font-weight:600;color:var(--sk-ink)}
.sk-back[hidden]+.sk-count{grid-column:1/-1;text-align:left}
.sk-bar{grid-column:1/-1;height:6px;border-radius:999px;background:var(--sk-soft2);overflow:hidden}
.sk-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--sk-logo),var(--sk-green));transition:width .5s var(--sk-ease)}
.sk-panel{background:#fff;border:1px solid var(--sk-border);border-radius:var(--sk-r);padding:32px;animation:sk-in .35s var(--sk-ease)}
.sk-flow:has([data-sk-step="result"]:not([hidden])){max-width:1120px}
.sk-panel-wide{padding:32px}
@keyframes sk-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sk-h{margin:0 0 6px;font-family:var(--sk-display);font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.2;color:var(--sk-ink)}
.sk-panel>.sk-muted{margin:0 0 20px}
.sk-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.sk-actions .btn{min-height:52px;border-radius:999px;padding:14px 24px;font-weight:600}
.sk-link{min-height:44px;padding:0 8px;border:0;background:none;color:var(--sk-muted);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sk-link:hover{color:var(--sk-ink)}
.sk-error{display:flex;gap:10px;margin:16px 0 0;padding:14px 16px;border-radius:12px;background:var(--sale-bg,#FDECEA);color:var(--sale,#B50700);font-weight:500}

/* Step 1: questions */
.sk-q{border:0;margin:0 0 22px;padding:0}
.sk-q legend{margin:0 0 10px;padding:0;font-weight:600;color:var(--sk-ink)}
.sk-q legend .sk-muted{font-weight:400}
.sk-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.sk-opt{position:relative;cursor:pointer}
.sk-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sk-opt span{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;min-height:56px;height:100%;padding:14px 16px;border:1.5px solid var(--sk-border);border-radius:14px;background:#fff;transition:border-color .15s,background .15s,box-shadow .15s}
.sk-opt span svg{grid-row:span 2;color:var(--sk-green)}
.sk-opt b{color:var(--sk-ink);font-weight:600}
.sk-opt small{color:var(--sk-muted);font-size:.8125rem}
.sk-opts-2 .sk-opt span{grid-template-columns:1fr;text-align:center}
.sk-opts-age{grid-template-columns:repeat(5,minmax(0,1fr))}
.sk-opts-age .sk-opt span{grid-template-columns:1fr;text-align:center;min-height:52px;padding:12px 8px}
.sk-opts-age .sk-opt b{font-size:.9375rem}
.sk-opt:hover span{border-color:var(--border-strong,#CFD6CA)}
.sk-opt input:checked+span{border-color:var(--sk-green);background:var(--sk-soft);box-shadow:0 0 0 1px var(--sk-green)}

/* Step 2: photo */
.sk-tips-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 20px;padding:0;list-style:none}
.sk-tips-grid li{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:var(--sk-soft);font-size:.8125rem;color:var(--sk-muted)}
.sk-tips-grid svg{width:22px;height:22px;color:var(--sk-green);margin-bottom:4px}
.sk-tips-grid b{color:var(--sk-ink);font-size:.875rem}
.sk-consent{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--sk-border);border-radius:14px;font-size:.875rem;line-height:1.5;cursor:pointer}
.sk-consent:has(input:checked){border-color:var(--sk-soft2);background:var(--sk-soft)}
.sk-consent input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--sk-green)}
.sk-file{position:relative;cursor:pointer}
.sk-file:focus-within{outline:2px solid var(--sk-green);outline-offset:2px}
.sk-stage{position:relative;max-width:380px;margin:20px auto 0;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#0d140b}
.sk-stage video,.sk-stage img{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)} /* Mirror, like a selfie camera. */
.sk-oval{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sk-oval-line{animation:sk-dash 12s linear infinite}
@keyframes sk-dash{to{stroke-dashoffset:-260}}
.sk-hint{position:absolute;left:12px;right:12px;bottom:14px;margin:0;padding:8px 12px;border-radius:999px;background:rgba(12,20,10,.6);color:#fff;font-size:.8125rem;text-align:center}
.sk-shutter{display:grid;place-items:center;width:76px;height:76px;padding:0;border:4px solid var(--sk-green);border-radius:50%;background:#fff;cursor:pointer;transition:transform .15s}
.sk-shutter i{display:block;width:56px;height:56px;border-radius:50%;background:var(--sk-green);transition:transform .15s}
.sk-shutter:hover i{transform:scale(.94)}
.sk-shutter:active{transform:scale(.95)}

/* Step 3: analysis */
.sk-scan .sk-scanline{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(180deg,rgba(109,172,3,0),rgba(109,172,3,.35) 85%,rgba(228,244,204,.95));border-bottom:2px solid #E4F4CC;animation:sk-scan 2.2s ease-in-out infinite}
.sk-scan img{filter:saturate(.85)}
@keyframes sk-scan{0%{transform:translateY(-100%)}100%{transform:translateY(340%)}}
.sk-checks{max-width:380px;margin:20px auto 0;padding:0;list-style:none;display:grid;gap:10px}
.sk-checks li{display:flex;align-items:center;gap:12px;color:var(--sk-muted);font-weight:500;transition:color .2s}
.sk-checks li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--sk-border);box-sizing:border-box}
.sk-checks li.is-on{color:var(--sk-ink)}
.sk-checks li.is-on::before{border-color:var(--sk-soft2);border-top-color:var(--sk-green);animation:sk-spin .8s linear infinite}
.sk-checks li.is-done{color:var(--sk-ink)}
.sk-checks li.is-done::before{border:0;background:var(--sk-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
@keyframes sk-spin{to{transform:rotate(360deg)}}

/* Results */
.sk-res{margin-top:20px}
.sk-res h3{margin:0 0 14px;font-family:var(--sk-display);font-size:1.25rem;color:var(--sk-ink)}
.sk-card{border:1px solid var(--sk-border);border-radius:var(--sk-r);background:#fff;padding:24px}
.sk-res-top{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px;align-items:start}
.sk-profile{display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(160deg,var(--sk-dark),#2A4400);border:0;color:#E4F4CC}
.sk-profile .sk-eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#E4F4CC}
.sk-type{margin:0 0 10px;font-family:var(--sk-display);font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;line-height:1.1;color:#fff}
.sk-summary{margin:0 0 18px;line-height:1.6;color:#E9F3DC}
.sk-chip{margin-top:auto!important;display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 14px;border-radius:999px;background:#fff;color:var(--sk-dark);font-size:.875rem;font-weight:600}
.sk-chip svg{width:16px;height:16px;color:var(--sk-logo)}
.sk-prio{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.sk-prio li{padding:14px 16px;border:1px solid var(--sk-border);border-radius:14px}
.sk-prio-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.sk-prio-head strong{color:var(--sk-ink)}
.sk-level{padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:700;white-space:nowrap}
.sk-level.is-1{background:var(--sk-soft);color:var(--sk-dark)}
.sk-level.is-2{background:#FFF3DC;color:#8A5300}
.sk-level.is-3{background:#FDECEA;color:#A11A12}
.sk-gauge{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.sk-gauge i{height:8px;border-radius:999px;background:var(--sk-border)}
.sk-gauge[data-level="1"] i:nth-child(1){background:var(--sk-logo)}
.sk-gauge[data-level="2"] i:nth-child(-n+2){background:#E3A21A}
.sk-gauge[data-level="3"] i{background:#D9473C}
.sk-obs{margin:10px 0 2px;font-size:.875rem;color:var(--sk-text)}
.sk-advice{margin:0;font-size:.8125rem;color:var(--sk-muted)}
.sk-alert{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:14px 16px;border-radius:14px;background:#FFF7E0;border:1px solid #E8C872;color:#5C4300}
.sk-tips{margin-top:16px}
.sk-tips ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.sk-tips li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--sk-soft);font-size:.9rem}
.sk-tips svg{color:var(--sk-green);margin-top:1px}
.sk-routine{margin-top:32px}
.sk-routine-head h3{margin-bottom:4px}
.sk-routine-head p{margin:0 0 18px}
.sk-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sk-step{padding:20px;border:1px solid var(--sk-border);border-radius:var(--sk-r);background:#fff}
.sk-step-head{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:start;margin-bottom:16px}
.sk-step-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sk-green);color:#fff;font-weight:700}
.sk-step h4{margin:4px 0 2px;font-size:1.0625rem;color:var(--sk-ink)}
.sk-why{margin:0;font-size:.875rem;color:var(--sk-muted)}
.sk-when{display:flex;gap:6px;margin:4px 0 0}
.sk-when span{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap}
.sk-when svg{width:14px;height:14px}
.sk-when .is-am{background:#FFF6DD;color:#7A5200}
.sk-when .is-pm{background:#ECEFFB;color:#33407A}
.sk-step .sk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mp-skin-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--sk-border);border-radius:12px;padding:12px;text-decoration:none;color:inherit}
.mp-skin-card img{width:100%;height:auto}
.sk-bundle{position:sticky;bottom:12px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:20px;padding:16px 20px;border-radius:18px;background:var(--sk-ink);color:#E4F4CC;box-shadow:0 18px 40px -20px rgba(28,43,24,.6)}
.sk-bundle strong{display:block;color:#fff}
.sk-bundle small{font-size:.8125rem}
.sk-bundle .btn{min-height:50px;border-radius:999px;font-weight:600}
.sk-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:24px;background:var(--sk-soft);border-color:var(--sk-soft2)}
.sk-help h3{margin-bottom:4px}
.sk-help p{margin:0}
.sk-help .sk-actions{margin-top:0}
.sk-legal{margin:16px 0 0;font-size:.8125rem;color:var(--sk-muted)}

@media (max-width:960px){
	.sk-hero{grid-template-columns:1fr;gap:24px;padding:28px}
	.sk-hero-img{order:-1;aspect-ratio:16/10}
	.sk-res-top{grid-template-columns:1fr}
	.sk-steps{grid-template-columns:1fr}
	.sk-tips-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
	.mp-skin{margin-bottom:40px}
	.sk-hero{padding:20px;border-radius:20px}
	.sk-benefits{grid-template-columns:1fr}
	.sk-cta{width:100%}
	.sk-how{grid-template-columns:1fr;gap:10px}
	.sk-panel,.sk-panel-wide{padding:20px 16px}
	.sk-opts{grid-template-columns:1fr}
	.sk-opts-2{grid-template-columns:1fr 1fr}
	.sk-opts-age{grid-template-columns:repeat(2,minmax(0,1fr))}
	.sk-opts-age .sk-opt:last-child{grid-column:1/-1}
	.sk-actions .btn{flex:1 1 100%}
	.sk-actions .sk-link{width:100%}
	/* Phones: each step's buttons stay at the bottom of the screen while the step scrolls (no long scroll to reach them). */
	.sk-panel>.sk-actions{position:sticky;bottom:0;z-index:6;gap:4px 12px;margin:20px -16px -20px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--sk-border);border-radius:0 0 var(--sk-r) var(--sk-r);box-shadow:0 -10px 24px -18px rgba(28,43,24,.35)}
	.sk-panel>.sk-actions .sk-link{min-height:36px}
	.sk-hero{overflow:clip} /* Not a scroll container: the start button below can stick. */
	.sk-cta{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));z-index:6;box-shadow:0 14px 30px -14px rgba(28,43,24,.55)}
	.sk-stage{max-width:100%}
	.sk-step{padding:16px}
	.sk-step-head{grid-template-columns:auto 1fr}
	.sk-when{grid-column:2}
	.sk-step .sk-grid{gap:10px}
	.sk-bundle{bottom:8px;padding:14px 16px}
	.sk-bundle .btn{width:100%}
	.sk-card{padding:18px}
}
@media (prefers-reduced-motion:reduce){
	.sk-panel,.sk-oval-line,.sk-scan .sk-scanline,.sk-checks li.is-on::before{animation:none}
	.sk-bar i{transition:none}
}