/* skin.css — AI Skin Analysis page (skin-analysis.html). Care palette; classes scoped under .skin */
.skin{--ink:#1A1714;--muted:#6D6760;--amber:#C97B3E;--amber-dark:#9A5A1E;--amber-light:#F5E6D3;--amber-xlight:#FBF3EA;--cream:#FAF8F5;--cream-alt:#F2EEE8;--line:rgba(26,23,20,.08);--line-soft:rgba(26,23,20,.14);--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans','Helvetica Neue',Helvetica,Arial,sans-serif;background:var(--cream);padding:132px 0 64px;min-height:70vh;overflow-x:clip;font-family:var(--sans);color:var(--ink)}
.sk-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skin h1,.skin h2,.skin h3,.skin h4{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0}
.skin p{margin:0}
.sk-eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--amber);margin-bottom:10px}
.sk-lead{font-size:16px;line-height:1.65;color:var(--muted)}
.sk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:2px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .25s,color .25s,border-color .25s;border:1.5px solid transparent}
.sk-btn--primary{background:var(--ink);color:#FBF7F0}.sk-btn--primary:hover{background:var(--amber)}
.sk-btn--ghost{background:transparent;color:var(--ink);border-color:rgba(26,23,20,.3)}.sk-btn--ghost:hover{border-color:var(--ink);background:rgba(26,23,20,.04)}
.sk-btn:disabled{opacity:.55;cursor:default}
.sk-btns{display:flex;gap:10px;flex-wrap:wrap}
.sk-link{background:none;border:0;cursor:pointer;font:inherit;color:var(--muted);padding:0;text-decoration:underline;text-underline-offset:3px}
/* intro */
.sk-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.sk-intro__text h1{font-size:46px;line-height:1.08}.sk-intro__text h1 em{font-style:italic;color:var(--amber)}
.sk-intro__text .sk-lead{margin-top:16px;max-width:560px}
.sk-steps{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0;padding:0;list-style:none}
.sk-steps li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 8px;font-size:13.5px}
.sk-steps b{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.sk-steps span{color:var(--muted);font-size:12px}
.sk-privacy{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.6}
.sk-tips{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.sk-tips strong{width:100%;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sk-tips span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber);margin-right:7px;vertical-align:middle}
.sk-intro__media{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(26,23,20,.16);max-width:440px;justify-self:center;margin:0}
.sk-intro__media img{display:block;width:100%;height:auto}
.sk-intro__media figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);border-radius:999px;padding:6px 12px;font-size:11.5px}
/* camera */
.sk-cam{max-width:520px;margin:0 auto;text-align:center}
.sk-cam__frame{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#111;box-shadow:0 24px 60px rgba(26,23,20,.2)}
.sk-cam__frame video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.sk-oval{--p:0;position:absolute;left:50%;top:47%;width:64%;aspect-ratio:3/4;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 999px rgba(20,18,16,.45);border:3px solid rgba(255,255,255,.75);transition:border-color .2s}
.sk-oval::after{content:"";position:absolute;inset:-9px;border-radius:50%;background:conic-gradient(var(--amber) calc(var(--p) * 360deg),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
.sk-good .sk-oval{border-color:#9FD19A}
.sk-cam__msg{font-family:var(--serif);font-size:19px;margin:18px 0 14px;min-height:28px;transition:color .2s}
.sk-cam__msg.is-warn,.sk-lead.is-warn{color:#B23A3A;font-weight:600;font-family:var(--sans);font-size:17px}
.sk-good .sk-cam__msg{color:#3F7A3B;font-weight:600;font-family:var(--sans);font-size:17px}
.sk-cam .sk-btns{justify-content:center;align-items:center}
.sk-cam__hint{font-size:12.5px;color:var(--muted);margin-top:12px}
.sk-center{max-width:560px;margin:40px auto;text-align:center}
.sk-center h2{font-size:30px;margin-bottom:12px}.sk-center .sk-lead{margin:0 0 22px}
.sk-center .sk-btns{justify-content:center}
.sk-spinner{display:inline-block;width:34px;height:34px;border-radius:50%;border:3px solid var(--amber-light);border-top-color:var(--amber);animation:skspin .9s linear infinite;margin-bottom:12px}
@keyframes skspin{to{transform:rotate(360deg)}}
/* lead + processing */
.sk-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:44px;align-items:center;max-width:1000px;margin:0 auto}
.sk-photo{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(26,23,20,.16);max-width:420px;justify-self:center;width:100%}
.sk-photo img{display:block;width:100%;height:auto}
.sk-photo canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sk-photo__ok{position:absolute;left:12px;top:12px;background:#fff;color:#3F7A3B;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600}
.sk-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px}
.sk-form h2{font-size:28px;line-height:1.2;margin:4px 0 8px}
.sk-form .sk-muted{font-size:14px;color:var(--muted);margin-bottom:18px;line-height:1.6}
.sk-field{margin-bottom:14px}
.sk-field label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink);margin-bottom:6px}
.sk-field input{width:100%;height:46px;padding:0 14px;border:1px solid rgba(26,23,20,.22);border-radius:3px;background:#fff;font-size:15px;color:var(--ink);font-family:var(--sans)}
.sk-field input:focus{outline:none;border-color:var(--amber)}
.sk-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55;color:var(--muted);margin:12px 0}
.sk-check input{margin-top:3px;flex:0 0 auto;accent-color:var(--amber)}
.sk-check a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.sk-form .sk-btn{width:100%;margin-top:8px}
.sk-form-msg{font-size:13.5px;margin-top:12px;min-height:1em;line-height:1.5}.sk-form-msg.is-err{color:#B23A3A}
.sk-proc h2{font-size:28px;margin:4px 0 8px}.sk-proc .sk-muted{font-size:14px;color:var(--muted)}
.sk-proc__list{margin:18px 0 0;padding:0;list-style:none}
.sk-proc__list li{position:relative;padding:10px 0 10px 30px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted);transition:color .3s}
.sk-proc__list li::before{content:"";position:absolute;left:2px;top:13px;width:14px;height:14px;border-radius:50%;border:2px solid var(--amber-light);border-top-color:var(--amber);animation:skspin 1s linear infinite}
.sk-proc__list li.is-done{color:var(--ink)}
.sk-proc__list li.is-done::before{animation:none;border:0;background:var(--amber)}
.sk-proc__list li.is-done::after{content:"";position:absolute;left:7px;top:16px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* results */
.sk-res__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:26px;flex-wrap:wrap}
.sk-res__head h2{font-size:34px;line-height:1.15;margin:4px 0 8px}
.sk-res__head .sk-muted{font-size:14px;color:var(--muted)}
.sk-demo{font-size:12px;color:var(--amber-dark);background:var(--amber-xlight);display:inline-block;padding:4px 10px;border-radius:4px;margin-top:8px}
.sk-sum{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 22px}
.sk-ring{--v:0;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--amber) calc(var(--v) * 3.6deg),var(--cream-alt) 0);display:grid;place-items:center;position:relative;flex:0 0 92px}
.sk-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
.sk-ring b,.sk-ring span{position:relative;grid-area:1/1}
.sk-ring b{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;margin-top:-10px}
.sk-ring span{font-size:10.5px;color:var(--muted);margin-top:30px}
.sk-sum__meta p{font-size:13.5px;color:var(--muted);line-height:1.6}
.sk-sum__band{font-family:var(--serif);font-size:19px !important;color:var(--ink) !important}
.sk-viewer{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:32px;align-items:start}
.sk-viewer>*,.sk-grid2>*,.sk-split>*,.sk-intro>*{min-width:0}
.sk-view{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(26,23,20,.16)}
.sk-view img{display:block;width:100%;height:auto}
.sk-view__masks{position:absolute;inset:0;pointer-events:none}
.sk-view__masks .sk-view__mask{position:absolute;inset:0;width:100%;height:100%;animation:skfade .4s ease}
@keyframes skfade{from{opacity:0}to{opacity:1}}
.sk-view__pins{position:absolute;inset:0}
.sk-pin{--c:var(--amber);position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 30%,transparent),0 4px 10px rgba(0,0,0,.25);animation:skpop .35s ease}
.sk-pin--n{width:26px;height:26px;margin:-13px 0 0 -13px;color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.sk-pin--n em{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);white-space:nowrap;font-style:normal;font-size:11.5px;font-weight:600;color:#fff;background:rgba(26,23,20,.78);padding:3px 9px;border-radius:999px;animation:skfade .4s ease}
.sk-pin--n em.is-left{left:auto;right:calc(100% + 6px)}
@keyframes skpop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.sk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sk-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12.5px;padding:8px 12px;border-radius:999px;border:1px solid var(--line-soft);background:#fff;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s}
.sk-chip b{font-weight:600;color:var(--muted)}
.sk-chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}.sk-chip.is-on b{color:rgba(255,255,255,.75)}
.sk-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.sk-dot--great,.sk-bar__f--great,.sk-badge--great{background:#5C8A5A}.sk-dot--good,.sk-bar__f--good,.sk-badge--good{background:#8AA35E}.sk-dot--watch,.sk-bar__f--watch,.sk-badge--watch{background:#C9A24A}.sk-dot--priority,.sk-bar__f--priority,.sk-badge--priority{background:#C97B3E}
.sk-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;min-height:120px}
.sk-card__hint{color:var(--muted);font-size:14px;line-height:1.6}
.sk-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.sk-card__head h3{font-size:22px}
.sk-card__what{font-size:13px;color:var(--muted);margin-bottom:8px}
.sk-card p{font-size:14.5px;line-height:1.6}
.sk-card__tx{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.sk-card__tx span{font-size:12px;color:var(--muted)}
.sk-card__tx a{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--amber-dark);background:var(--amber-xlight);border-radius:999px;padding:7px 12px;text-decoration:none}
.sk-card__tx a:hover{background:var(--amber-light)}
.sk-badge{font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;white-space:nowrap;color:#fff}
.sk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:44px}
.sk-grid2 h3{font-size:24px;margin-bottom:16px}
.sk-pri{margin:0;padding:0;list-style:none}
.sk-pri li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.sk-pri__n{--c:var(--amber);flex:0 0 30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
.sk-pri h4{font-size:18px;margin-bottom:4px}.sk-pri h4 small{font-family:var(--sans);font-size:12px;color:var(--muted);margin-left:6px}
.sk-pri p{font-size:14px;line-height:1.6;color:var(--muted)}
.sk-plan{display:grid;gap:10px}
.sk-phase{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.sk-phase p{font-size:14px;line-height:1.6;color:var(--muted)}
/* routine */
.sk-routine{margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px}
.sk-routine__head h3{font-size:30px;line-height:1.15;margin-bottom:10px}
.sk-routine__head p{font-size:15px;line-height:1.65;color:var(--muted);max-width:720px}
.sk-prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:24px}
.sk-prod{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:14px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.sk-prod:hover{border-color:var(--amber);transform:translateY(-2px)}
.sk-prod img{width:64px;height:64px;object-fit:cover;border-radius:6px;flex:0 0 64px;background:#fff}
.sk-prod b{display:block;font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.25}
.sk-prod small{display:block;font-size:12px;color:var(--muted);margin:3px 0 6px}
.sk-prod p{font-size:12.5px;line-height:1.5;color:var(--muted)}
.sk-ampm{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.sk-ampm>div{background:var(--cream);border-radius:10px;padding:14px 18px}
.sk-ampm b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--amber);margin-bottom:6px}
.sk-ampm ol{margin:0;padding-left:18px;font-size:14px;line-height:1.8;color:var(--ink)}
.sk-routine__cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--line);font-size:15px}
.sk-routine__cta s{color:var(--muted);font-size:13px;margin-left:4px}.sk-routine__cta span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.sk-coupon{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--muted)}.sk-coupon b{color:var(--ink);letter-spacing:.06em}
.sk-all{margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px 22px}
.sk-all summary{cursor:pointer;padding:16px 0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;list-style:none}
.sk-all summary::-webkit-details-marker{display:none}
.sk-all ul{padding:0 0 14px;margin:0;list-style:none}
.sk-all li{display:grid;grid-template-columns:150px 1fr 40px;gap:14px;align-items:center;padding:7px 0;font-size:14px}
.sk-all li b{text-align:right;font-weight:600}
.sk-bar{height:8px;background:var(--cream-alt);border-radius:4px;overflow:hidden}.sk-bar__f{display:block;height:100%;border-radius:4px}
.sk-disclaimer{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--muted)}
/* FAQ */
.sk-faq{background:#fff;padding:60px 0;font-family:'DM Sans','Helvetica Neue',Helvetica,Arial,sans-serif;color:#1A1714;--line:rgba(26,23,20,.08);--amber:#C97B3E;--muted:#6D6760;--serif:'Playfair Display',Georgia,serif}
.sk-faq h2{font-family:var(--serif);font-weight:400;font-size:32px;margin:0 0 24px}
.sk-faq details{border-top:1px solid var(--line);padding:16px 0}.sk-faq details:last-child{border-bottom:1px solid var(--line)}
.sk-faq summary{cursor:pointer;font-family:var(--serif);font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.sk-faq summary::-webkit-details-marker{display:none}.sk-faq summary::after{content:"+";color:var(--amber);font-size:22px;line-height:1}.sk-faq details[open] summary::after{content:"–"}
.sk-faq details p{margin-top:10px;font-size:14.5px;line-height:1.7;color:var(--muted)}
@media (max-width:900px){
  .sk-intro,.sk-split,.sk-viewer,.sk-grid2,.sk-ampm{grid-template-columns:1fr;gap:26px}
  .skin{padding-top:104px}
  .sk-intro__media{max-width:260px}
  .sk-intro__text h1{font-size:34px}.sk-intro__text .sk-lead{font-size:15.5px;margin-top:10px}
  .sk-steps{margin:16px 0 18px;gap:6px}.sk-steps li{padding:6px 12px 6px 6px;font-size:12.5px}.sk-steps span{display:none}
  .sk-intro__text .sk-btns{flex-direction:column}.sk-intro__text .sk-btn{width:100%}
  .sk-photo{max-width:300px}.sk-form{padding:22px 18px}
  .sk-view{max-width:420px;margin:0 auto;width:100%}
  .sk-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.sk-chip{flex:0 0 auto}
  .sk-all li{grid-template-columns:110px 1fr 34px}
  .sk-routine{padding:22px 18px}.sk-routine__cta .sk-btns{width:100%}.sk-routine__cta .sk-btn{flex:1}
}