/* skinby.app home (third version). Bright futurism: ice-white canvas, deep-navy ink, one aqua scan line. Tokens follow src/design/palette.js (LIGHT). */
@font-face{font-family:"Sora";src:url(fonts/sora-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{
  --bg:#F7FBFC;--bg2:#EEF5F7;--ink:#08202A;--soft:#44576B;--line:rgba(8,32,42,.10);--line2:rgba(8,32,42,.16);
  --accent:#0098A8;--accentInk:#007C89;--accentFill:#007C89;--tint:rgba(0,152,168,.10);--tint2:rgba(0,152,168,.18);
  --redness:#C2410C;--pigment:#6B4A2B;--caution:#8A5A12;--cautionTint:rgba(183,121,31,.12);--ok:#1E7F5C;
  --navy:#08202A;--navy2:#0E2C38;
  --display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--wrap:1220px;--gut:clamp(16px,4vw,40px)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(0,152,168,.24);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:10px}
a{color:var(--accentInk);text-underline-offset:3px;text-decoration-thickness:1.5px}
input{caret-color:var(--accent)}
html{scrollbar-color:rgba(8,32,42,.28) transparent}
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--ink);text-wrap:balance;margin:0}
h2{font-size:clamp(32px,4.6vw,58px);line-height:1.04;letter-spacing:-.03em}
h3{font-size:21px;line-height:1.25;letter-spacing:-.015em}
p{margin:0;text-wrap:pretty}
.ic{width:20px;height:20px;flex:none}.ic.sm{width:16px;height:16px}.ic.xl{width:54px;height:54px}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px}.skip:focus{left:12px}
.fine{font-size:14px;line-height:1.5;color:var(--soft)}

/* buttons */
.btn{--h:52px;display:inline-flex;align-items:center;gap:10px;min-height:var(--h);padding:0 22px;border-radius:999px;font:600 16px/1 var(--text);text-decoration:none;border:0;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-color .3s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accentFill);color:#fff;box-shadow:0 10px 30px -10px rgba(0,124,137,.55),inset 0 0 0 1px rgba(255,255,255,.08);position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(122,240,240,.35) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 4.8s var(--ease) 1.2s infinite}
.btn-primary:hover{box-shadow:0 16px 38px -12px rgba(0,124,137,.7),inset 0 0 0 1px rgba(255,255,255,.12);transform:translateY(-1px)}
@keyframes sheen{0%{transform:translateX(-120%)}38%,100%{transform:translateX(120%)}}
.btn-ghost{background:rgba(255,255,255,.66);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:var(--navy2)}
.btn-sm{--h:40px;padding:0 16px;font-size:15px;background:var(--ink);color:#fff;white-space:nowrap}
.btn-store{background:#000;color:#fff;gap:10px;padding:0 20px 0 16px;text-align:left}
.btn-store .ic{width:24px;height:24px}
.btn-store span{display:flex;flex-direction:column;font:600 19px/1.05 var(--text);letter-spacing:-.01em}
.btn-store small{font:500 11px/1.2 var(--text);letter-spacing:.01em;opacity:.85}
.btn-store.is-soon{background:var(--accentFill);color:#fff;box-shadow:0 10px 30px -10px rgba(0,124,137,.55)}
.btn-store.is-soon:hover{filter:brightness(1.06)}
.btn-store.is-soon small{color:rgba(255,255,255,.8)}

/* header */
.bar{position:fixed;inset:12px 12px auto;z-index:30;display:flex;align-items:center;gap:20px;max-width:var(--wrap);margin:0 auto;padding:8px 8px 8px 18px;border-radius:999px;background:rgba(247,251,252,.62);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 8px 28px -14px rgba(8,32,42,.18),inset 0 0 0 1px rgba(255,255,255,.7);transition:background .4s,box-shadow .4s}
.bar.is-scrolled{background:rgba(247,251,252,.86)}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font:650 21px/1 var(--display);letter-spacing:-.03em}
.bar nav{display:flex;gap:4px;margin-left:auto}
.bar nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;padding:10px 12px;border-radius:999px;transition:background .25s}
.bar nav a:hover{background:var(--tint)}
@media (max-width:860px){.bar nav{display:none}.bar .btn-sm{margin-left:auto}}

/* the 3D stage: fixed behind the hero and the scan story, faded out after it */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--stage-o,1)}
.stage::before{content:"";position:absolute;inset:-10%;background:radial-gradient(46% 52% at var(--gx,68%) 46%,rgba(0,152,168,.16),rgba(0,152,168,.05) 45%,transparent 70%),radial-gradient(30% 40% at 12% 90%,rgba(8,32,42,.05),transparent 70%)}
.mesh{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;inset:0}
.hud-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;font:600 13px/1 var(--text);color:var(--ink);background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px -12px rgba(8,32,42,.25),inset 0 0 0 1px rgba(255,255,255,.8);opacity:0;transform:translateY(8px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--ease);white-space:nowrap}
.hud-chip i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,152,168,.18);animation:pulse 2.2s ease-in-out infinite}
.hud-chip.on{opacity:1;transform:none}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(0,152,168,0)}}

main{position:relative;z-index:1}
.hero,.story{position:relative;z-index:1}
.hero{min-height:100svh;display:grid;align-items:center;max-width:var(--wrap);margin:0 auto;padding:110px var(--gut) 60px}
.hero-copy{max-width:min(620px,50vw)}
.hero h1{font-size:clamp(44px,6.2vw,84px);line-height:1;letter-spacing:-.04em}
.hero h1 span{display:block;color:var(--accentInk)}
.lede{margin-top:24px;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--soft);max-width:34em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .fine{margin-top:14px}
.chips{list-style:none;padding:0;margin:36px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.chips li{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:20px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 10px 30px -22px rgba(8,32,42,.4);max-width:190px}
.chips b{font:700 26px/1 var(--display);letter-spacing:-.03em;color:var(--accentInk)}
.chips span{font-size:13px;line-height:1.3;color:var(--soft)}

/* the scan story */
.story{max-width:var(--wrap);margin:0 auto;padding:10vh var(--gut) 10vh}
.story-head{max-width:540px}
.story-head p{margin-top:14px;color:var(--soft);font-size:19px}
.steps{list-style:none;margin:8vh 0 0;padding:0 0 0 34px;max-width:500px;position:relative}
.steps::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:linear-gradient(transparent,var(--line2) 12%,var(--line2) 88%,transparent)}
.step{position:relative;min-height:50vh;display:flex;flex-direction:column;justify-content:center;padding:22px 0;opacity:.78;transition:opacity .6s var(--ease)}
.step.on{opacity:1}
.step-n{display:block;margin-bottom:8px;font:600 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--accentInk);opacity:.8}
.progress{position:fixed;top:0;left:0;z-index:31;width:100%;height:3px;background:linear-gradient(90deg,var(--accent),#2EE6D6);transform:scaleX(var(--sp,0));transform-origin:left;pointer-events:none}
.cta-note{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:14px;font-weight:500;color:var(--soft)}
.cta-note span{display:inline-flex;align-items:center;gap:6px}
.cta-note span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.step h3{position:relative;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.025em}
.step p{margin-top:10px;font-size:18px;color:var(--soft);max-width:30em}
.step-dot{position:absolute;left:-34px;top:.32em;width:14px;height:14px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line2);transition:box-shadow .5s var(--ease),background .5s}
.step.on .step-dot{background:var(--accent);box-shadow:0 0 0 6px rgba(0,152,168,.16)}
.pill-hint{display:inline-block;margin-top:16px;padding:10px 16px;border-radius:999px;background:rgba(8,32,42,.82);color:#fff;font-size:15px;font-weight:500}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pill-row b{padding:8px 14px;border-radius:999px;font-size:14px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line2)}
.pill-row b:first-child{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accentInk)}

/* the mark: an app-icon tile; sizes per use */
.mark{width:30px;height:30px;border-radius:8px;box-shadow:0 6px 14px -6px rgba(0,124,137,.6)}
.mark.sm{width:22px;height:22px;border-radius:6px;box-shadow:none}
.mark.lg{width:64px;height:64px;border-radius:16px}
.mark.xl{width:84px;height:84px;border-radius:21px;margin-bottom:26px;box-shadow:0 24px 50px -18px rgba(0,124,137,.65);animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(-2deg)}}
.badge{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 8px 24px -16px rgba(8,32,42,.35);font:600 13.5px/1 var(--text);color:var(--accentInk)}

/* everything after the story sits on an opaque canvas over the fixed stage */
.wipe-sec,.showcase,.science,.ways,.bento-sec,.pricing,.privacy,.faq,.close,.foot{position:relative;z-index:2}
.sec-pad{padding-left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));padding-right:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}

/* the app showcase: a list of six screens beside a turning deck of phones */
.showcase{background:linear-gradient(180deg,var(--bg),#E8F4F4 60%,var(--bg));padding:14vh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 12vh;overflow:hidden}
.show-head{max-width:640px}
.show-head p,.sci-head p{margin-top:14px;font-size:19px;color:var(--soft)}
.show{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,70px);align-items:center;margin-top:6vh}
.show-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.show-list button{position:relative;display:grid;grid-template-rows:auto 0fr;width:100%;text-align:left;padding:16px 18px 18px;border:0;border-radius:18px;background:transparent;color:var(--ink);cursor:pointer;overflow:hidden;transition:background .35s,grid-template-rows .5s var(--ease)}
.show-list b{display:block;font:600 18px/1.25 var(--display);letter-spacing:-.015em;color:var(--soft);transition:color .3s}
.show-list span{display:block;min-height:0;overflow:hidden;font-size:15px;color:var(--soft)}
.show-list button[aria-selected=true]{background:#fff;box-shadow:0 18px 40px -28px rgba(8,32,42,.45)}
.show-list button[aria-selected=true] b{color:var(--ink)}
.show-list button[aria-selected=true]{grid-template-rows:auto 1fr}
.show-list button[aria-selected=true] b{padding-bottom:6px}
.show-list button:hover b{color:var(--ink)}
.bar-fill{position:absolute;left:18px;right:18px;bottom:8px;height:3px;border-radius:2px;background:rgba(0,152,168,.14);opacity:0}
.show-list button[aria-selected=true] .bar-fill{opacity:1}
.bar-fill::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform:scaleX(0);transform-origin:left}
.show-list button.run .bar-fill::after{animation:barrun 5.2s linear forwards}
@keyframes barrun{to{transform:scaleX(1)}}
.deck{position:relative;height:clamp(560px,52vw,680px);perspective:1600px;touch-action:pan-y}
.deck .phone{--o:0;--a:0;position:absolute;left:50%;top:50%;width:300px;margin:0;transform:translate(-50%,-50%) translateX(calc(var(--o)*46%)) translateZ(calc(var(--a)*-180px)) rotateY(calc(var(--o)*-24deg));opacity:calc(1 - var(--a)*.12);z-index:calc(10 - var(--a));filter:saturate(calc(1 - var(--a)*.25)) brightness(calc(1 - var(--a)*.06));transition:transform .9s var(--ease),opacity .9s var(--ease),filter .9s;cursor:pointer}
.deck .phone.front{transform:translate(-50%,-50%) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .35s ease-out;cursor:default;box-shadow:0 70px 100px -40px rgba(8,32,42,.5),0 0 0 1.5px rgba(255,255,255,.08) inset,0 0 0 9px #0b1824 inset}
.deck .phone[style*="--a: 3"],.deck .phone[style*="--a:3"]{opacity:0;pointer-events:none}
.deck::after{content:"";position:absolute;left:15%;right:15%;bottom:2%;height:40px;border-radius:50%;background:radial-gradient(closest-side,rgba(8,32,42,.22),transparent);filter:blur(6px);z-index:0}

/* the phone shell (shared) */
.phone{width:min(300px,82vw);aspect-ratio:9/19.3;border-radius:50px;padding:11px;background:linear-gradient(150deg,#22384c,#08202A 40%,#05101b);box-shadow:0 60px 90px -40px rgba(8,32,42,.45),0 0 0 1.5px rgba(255,255,255,.08) inset,0 0 0 9px #0b1824 inset;position:relative}
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 30%);pointer-events:none}
.phone-glass{position:relative;height:100%;border-radius:40px;overflow:hidden;background:var(--bg)}
.island{position:absolute;top:10px;left:50%;width:31%;height:28px;transform:translateX(-50%);border-radius:20px;background:#05101b;z-index:3}
.screen{position:absolute;inset:0;padding:52px 16px 84px;overflow:hidden;font-size:13.5px;line-height:1.42}

/* the screens */
.sc{display:flex;flex-direction:column;gap:10px;height:100%}
.sc-date,.sc-label{font-size:12.5px;font-weight:600;color:var(--soft)}
.sc-label{color:var(--accentInk);letter-spacing:.02em}
.sc-hero{background:#fff;border-radius:20px;padding:12px;box-shadow:0 8px 24px -16px rgba(8,32,42,.3),inset 0 0 0 1px var(--line)}
.sc-hero .facemap{display:block;width:66%;margin:0 auto 4px}
.sc-title{font:600 20px/1.15 var(--display);letter-spacing:-.02em}
.sc-sub{margin-top:4px;font-size:12.5px;color:var(--soft)}
.sc-big{font:600 21px/1.15 var(--display);letter-spacing:-.02em;margin-bottom:4px}
.sc-row{padding:11px 12px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.sc-row.ok{background:var(--tint);box-shadow:none;color:var(--accentInk);font-weight:600}
.optrow{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.optrow i{font-style:normal;font-weight:500;font-size:12px;color:var(--soft)}
.optrow.on{box-shadow:inset 0 0 0 2px var(--accent);background:linear-gradient(135deg,#fff,#E9F8F8)}
.src{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--accentInk)}
.sc .verdict{align-self:flex-start;font-size:17px;padding:10px 16px}
.sc-scan{position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 42%,#1B3A4F,#08141F);display:grid;place-items:center;gap:0}
.scan-mesh{width:74%;height:auto;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.025) rotateY(6deg)}}
.scan-ring{position:absolute;left:50%;top:44%;width:86%;aspect-ratio:.8;transform:translate(-50%,-50%);border-radius:50%;background:rgba(95,227,227,.55);-webkit-mask:radial-gradient(closest-side,transparent 96%,#000 97%);mask:radial-gradient(closest-side,transparent 96%,#000 97%)} /* still, like the app's face-fit ring: it marks where to put your face; the dots below fill as each view is captured */
@keyframes ringspin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn)}}
.sc-scan::after{content:"";position:absolute;left:8%;right:8%;height:2px;top:20%;background:linear-gradient(90deg,transparent,#9FF5F2,transparent);box-shadow:0 0 18px 4px rgba(95,227,227,.45);animation:sweep 3.2s ease-in-out infinite alternate}
@keyframes sweep{to{top:72%}}
.scan-pill{position:absolute;bottom:118px;left:50%;transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-weight:600;font-size:14px;white-space:nowrap}
.scan-steps{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.scan-steps i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}.scan-steps i.on{background:#5FE3E3}
.spark{width:100%;height:auto;margin-top:6px}
.spark-line{stroke-dasharray:300;stroke-dashoffset:300}
.phone.front .spark-line{animation:draw 1.6s var(--ease) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.tl{display:flex;justify-content:space-between;font-size:11.5px;font-weight:600;color:var(--soft)}
.sample-tag{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--cautionTint);color:var(--caution);font-size:11.5px;font-weight:600;align-self:flex-start}
.sc-ask{justify-content:flex-end;padding-bottom:6px}
.bub{max-width:88%;padding:10px 13px;border-radius:16px;font-size:13px;line-height:1.4;margin:0}
.bub.me{align-self:flex-end;background:var(--accentFill);color:#fff;border-bottom-right-radius:5px}
.bub.them{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:5px;box-shadow:inset 0 0 0 1px var(--line)}
.bub .src{display:block;margin-top:6px}
.phone.front .bub.them{animation:answer2 .8s var(--ease) .5s both}
@keyframes answer2{from{opacity:0;transform:translateY(10px)}}

/* the app's tab bar, at the foot of every phone */
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:flex-end;justify-content:space-around;padding:8px 10px 16px;background:rgba(247,251,252,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--line)}
.tabbar span{display:flex;flex-direction:column;align-items:center;gap:3px;font:500 9.5px/1 var(--text);color:var(--soft)}
.tabbar span.on{color:var(--accentInk)}
.tabbar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar b{width:44px;height:44px;margin-top:-14px;border-radius:50%;display:grid;place-items:center;background:var(--accentFill);color:#fff;box-shadow:0 8px 18px -8px rgba(0,124,137,.7)}
.tabbar b svg{width:21px;height:21px}
.k{width:14px;height:14px;border-radius:4px;display:inline-block}
.k-red{background:linear-gradient(90deg,#FDD68C,#E8623E,#8C103A)}
.k-pig{background:radial-gradient(circle,rgba(84,52,28,.85) 1.3px,rgba(107,74,43,.12) 1.6px) 0 0/4px 4px}
.verdict{display:inline-block;padding:8px 14px;border-radius:999px;font:600 15px/1 var(--text)}
.v-care{background:var(--cautionTint);color:var(--caution)}.v-good{background:var(--tint);color:var(--accentInk)}.v-not{background:rgba(180,35,24,.1);color:#B42318}
.facemap .fm-ring{animation:ring 8s linear infinite;transform-origin:150px 188px}
@keyframes ring{to{stroke-dashoffset:-372}}

/* science: a gauge, a per-tone bar chart, three plain facts */
.science{background:var(--bg);padding:14vh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 10vh}
.sci-head{max-width:680px}
.sci-grid{display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(20px,3vw,40px);align-items:stretch;margin-top:6vh}
.gauge,.tonechart,.sci-facts{margin:0;background:#fff;border-radius:28px;padding:28px;box-shadow:0 24px 50px -36px rgba(8,32,42,.45)}
.gauge{position:relative;display:grid;place-items:center;width:clamp(240px,22vw,300px);background:radial-gradient(circle at 50% 40%,#fff,#ECF8F8)}
.gauge svg{width:100%;height:auto}
.gauge-arc{transition:stroke-dasharray 1.8s var(--ease)}
.js .gauge:not(.seen) .gauge-arc{stroke-dasharray:0 100}
.gauge figcaption{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:4px;padding:0 22%}
.gauge figcaption b{font:700 clamp(52px,5vw,72px)/1 var(--display);letter-spacing:-.05em;color:var(--ink)}
.gauge figcaption > span{font-size:13.5px;line-height:1.3;color:var(--soft)}
.tonechart figcaption{font:600 17px/1.3 var(--display);letter-spacing:-.01em}
.tonechart ol{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:18px}
.tonechart li{display:grid;grid-template-columns:120px minmax(0,1fr) 48px;align-items:center;gap:12px}
.tc-l{font-size:14.5px;font-weight:500;color:var(--ink)}
.tc-bar{position:relative;height:14px;border-radius:999px;background:rgba(8,32,42,.06);overflow:hidden}
.tc-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--v)*1%);border-radius:inherit;background:linear-gradient(90deg,#2EE6D6,#007C89);transform-origin:left;transition:transform 1.4s var(--ease);transition-delay:calc(var(--i)*120ms)}
.js .tonechart:not(.seen) .tc-bar i{transform:scaleX(0)}
.tc-bar::after{content:"";position:absolute;top:-3px;bottom:-3px;left:85%;width:2px;background:rgba(8,32,42,.25)}
.tonechart li b{font:700 18px/1 var(--display);color:var(--accentInk);text-align:right}
.sci-facts{list-style:none;display:grid;gap:18px;align-content:center;background:var(--navy);color:#C9DAE2}
.sci-facts li{display:grid;gap:2px}
.sci-facts b{font:700 34px/1 var(--display);letter-spacing:-.03em;color:#7EEDED}
.sci-facts span{font-size:14.5px;line-height:1.4}
.sci-fine{margin-top:24px;max-width:62em}

/* a slim ask between the proof and the rest: one line, one button, the three reassurances */
.cta-band{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 40px;align-items:center;margin:0 max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 6vh;padding:34px 40px;border-radius:30px;background:linear-gradient(120deg,#0E7C7B,#007C89 60%,#04403F);color:#fff;box-shadow:0 30px 60px -30px rgba(0,124,137,.7)}
.cta-band h2{color:#fff;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em}
.band-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;justify-self:end}
.band-row .btn-primary{background:#fff;color:var(--accentInk);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.band-row .cta-note{color:#CFF3F2;margin-top:0}.band-row .cta-note span::before{background:#7EEDED}
@media (max-width:860px){.cta-band{grid-template-columns:1fr;padding:28px}.band-row{justify-self:start}}

/* the old ways: four cards, the last one Skinby */
.ways{background:var(--bg2);padding:13vh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 10vh}
.ways-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:6vh 0 20px}
.way{position:relative;padding:26px;border-radius:26px;background:#fff;box-shadow:0 20px 40px -34px rgba(8,32,42,.4);color:var(--soft)}
.way h3{margin-top:18px;font-size:19px;color:var(--ink)}
.way p{margin-top:8px;font-size:15px}
.way-x{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;background:var(--bg2);color:rgba(8,32,42,.4)}
.way-x b{font:700 30px/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
.way-x small{display:block;font-size:11px;font-weight:600;color:var(--soft);margin-top:-10px}
.way-x:has(b){display:flex;flex-direction:column;justify-content:center}
.way:not(.way-me) h3{text-decoration:line-through;text-decoration-color:rgba(180,35,24,.55);text-decoration-thickness:2px}
.way-me{background:linear-gradient(150deg,#0E7C7B,#007C89 60%,#04403F);color:#CFF3F2;box-shadow:0 30px 60px -30px rgba(0,124,137,.75);transform:translateY(-10px)}
.way-me h3{color:#fff}
.way-me .way-x{background:transparent;width:auto;height:auto;justify-items:start}

/* bento: tiles of different sizes, each with its own small live picture */
.bento-sec{background:var(--bg);padding:12vh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 12vh}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(280px,auto);gap:16px;margin-top:6vh}
.tile{position:relative;border-radius:26px;padding:22px;background:#fff;box-shadow:0 20px 40px -32px rgba(8,32,42,.4);display:flex;flex-direction:column;overflow:hidden}
.tile.wide{grid-column:span 2}
.tile h3{padding-top:18px;font-size:22px}
.tile p{margin-top:6px;color:var(--soft);font-size:15.5px}
.tile-art{position:relative;min-height:150px;flex:1;border-radius:18px;background:var(--bg2);overflow:hidden}
.art{position:absolute;inset:0;padding:16px}
.art-chk .bars{position:absolute;left:8%;right:46%;top:20%;bottom:22%;display:flex;gap:2px;align-items:stretch}
.art-chk .bars i{flex:var(--w);background:var(--ink);border-radius:1px}
.art-chk .bars i:nth-child(3n){background:transparent}
.art-chk .laser{position:absolute;left:6%;right:44%;height:2px;top:20%;background:#E5484D;box-shadow:0 0 12px 2px rgba(229,72,77,.55);animation:laser 1.6s ease-in-out infinite alternate}
@keyframes laser{to{top:78%}}
.art-chk .verdict{position:absolute;left:60%;top:24%;animation:pop 3.2s var(--ease) infinite}
.art-chk .chk-why{position:absolute;left:60%;right:14px;top:calc(24% + 44px);font-size:12.5px;color:var(--soft);line-height:1.35;animation:pop 3.2s var(--ease) infinite}
@keyframes pop{0%,35%{opacity:0;transform:translateY(6px) scale(.96)}50%,100%{opacity:1;transform:none}}
.art-lib span{position:absolute;left:12%;right:12%;top:50%;padding:12px 14px;border-radius:14px;background:#fff;font-weight:600;font-size:14px;box-shadow:0 10px 24px -14px rgba(8,32,42,.4);opacity:0;animation:deal 12s var(--ease) infinite;animation-delay:calc(var(--i)*1.5s)}
@keyframes deal{0%{transform:translateY(-110%) scale(.94);opacity:0}4%,11%{transform:translateY(-50%) scale(1);opacity:1}16%,100%{transform:translateY(20%) scale(.94);opacity:0}}
.art-derm .streets{position:absolute;inset:0;width:100%;height:100%}
.art-derm .pin{position:absolute;width:16px;height:16px;margin:-16px 0 0 -8px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accentFill);animation:drop 3.4s var(--ease) infinite;animation-delay:calc(var(--i)*.35s)}
@keyframes drop{0%{opacity:0;translate:0 -14px}15%,80%{opacity:1;translate:0 0}100%{opacity:0}}
.art-derm .you{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#2F6FEB;box-shadow:0 0 0 0 rgba(47,111,235,.4);animation:you 2s ease-out infinite}
@keyframes you{to{box-shadow:0 0 0 22px rgba(47,111,235,0)}}

/* pricing */
.pricing{background:linear-gradient(180deg,var(--bg),#EAF5F5);padding:12vh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 12vh;text-align:center}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:6vh auto 22px;max-width:1080px;text-align:left;align-items:center}
.plan{position:relative;display:flex;flex-direction:column;padding:30px 28px;border-radius:30px;background:#fff;box-shadow:0 24px 50px -38px rgba(8,32,42,.5),inset 0 0 0 1px var(--line)}
.plan h3{font-size:18px;color:var(--soft)}
.plan-price{margin-top:12px;display:flex;align-items:baseline;gap:4px}
.plan-price b{font:700 52px/1 var(--display);letter-spacing:-.045em;color:var(--ink)}
.plan-price span{font-size:16px;color:var(--soft)}
.plan-note{margin-top:8px;font-size:14.5px;font-weight:600;color:var(--accentInk);min-height:1.5em}
.plan ul{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:11px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.plan li .ic{color:var(--accent);margin-top:3px}
.plan .btn{justify-content:center;margin-top:auto}
.plan.hot{padding:42px 30px;background:linear-gradient(165deg,#0B2A3D,#08202A 55%,#071521);color:#C9DAE2;box-shadow:0 40px 80px -36px rgba(0,124,137,.75),inset 0 0 0 1.5px rgba(95,227,227,.35)}
.plan.hot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang,0deg),transparent 0 60%,#5FE3E3 75%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:orbit 6s linear infinite;pointer-events:none}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes orbit{to{--ang:360deg}}
.plan.hot h3{color:#7EEDED}.plan.hot .plan-price b{color:#fff}.plan.hot .plan-note{color:#9FF5F2}.plan.hot li .ic{color:#5FE3E3}
.plan-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:linear-gradient(90deg,#2EE6D6,#0098A8);color:#04302F;font:700 12.5px/1 var(--text);letter-spacing:.02em;white-space:nowrap}

/* privacy: a compact navy band */
.privacy{background:radial-gradient(60% 80% at 20% 50%,rgba(0,152,168,.16),transparent 60%),var(--navy);color:#EAF4F6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,6vw,90px);align-items:center;padding:11vh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.privacy h2{color:#fff}
.ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:18px;color:#C9DAE2}
.ticks .ic{color:#5FE3E3;margin-top:4px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;margin-top:26px;color:#7EEDED;font-weight:600;text-decoration:none}
.link-arrow:hover{text-decoration:underline}
.field{position:relative;height:clamp(280px,34vw,420px)}
.field canvas{position:absolute;inset:0;width:100%;height:100%}
.field-label{position:absolute;left:8%;bottom:-2px;font:600 13px/1 var(--text);color:#7EEDED;letter-spacing:.02em}
.field-out{position:absolute;right:2%;top:50%;transform:translateY(-50%);color:rgba(234,244,246,.35)}

/* "Under the surface": the canonical face as three layers the visitor can turn (drag, or arrow keys); drawn by the hero's own renderer */
.layers-sec{position:relative;z-index:2;background:var(--bg);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,90px);align-items:center;padding:4vh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 14vh}
.layers-stage{position:relative;aspect-ratio:1;max-height:640px;border-radius:32px;background:radial-gradient(60% 55% at 50% 45%,rgba(0,152,168,.16),transparent 70%),linear-gradient(180deg,#F3F9FA,#E4F1F1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 40px 80px -50px rgba(8,32,42,.35);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;overflow:hidden}
.layers-stage.dragging{cursor:grabbing}
.layers-stage:focus-visible{box-shadow:inset 0 0 0 2.5px var(--accent)}
.layers-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.drag-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.88);font:600 13px/1 var(--text);color:var(--ink);box-shadow:0 8px 24px -14px rgba(8,32,42,.35);pointer-events:none;white-space:nowrap;transition:opacity .5s}
.layers-stage.turned .drag-hint{opacity:0}
.layer-key{position:absolute;right:16px;top:16px;list-style:none;margin:0;padding:0;display:grid;gap:6px;font-weight:600;font-size:13.5px;pointer-events:none}
.layer-key li{display:flex;align-items:center;gap:8px;padding:6px 11px 6px 7px;border-radius:999px;background:rgba(255,255,255,.84);box-shadow:0 6px 18px -12px rgba(8,32,42,.3)}
.layer-key i{width:14px;height:14px;border-radius:4px}
.k-surf{background:linear-gradient(135deg,#fff,#C9DDE4);box-shadow:inset 0 0 0 1px rgba(8,32,42,.18)}
.layer-key .k-red{background:linear-gradient(135deg,#F48C68,#96123A)}
.layer-key .k-pig{background:linear-gradient(135deg,#B08056,#482C18)}
.layers-copy>p{margin-top:18px;font-size:19px;color:var(--soft);max-width:30em}
.layers-copy .fine{margin-top:14px}
@media (max-width:980px){.layers-sec{grid-template-columns:1fr;padding-top:2vh}.layers-copy{order:-1;max-width:640px}.layers-stage{max-width:560px;width:100%;justify-self:center}}
@media (max-width:720px){.layer-key{font-size:12px;gap:4px}.layer-key li{padding:5px 9px 5px 6px}}

/* "When two look alike, it asks": a balance with a name on each pan; the answer tips it (the pans hang level), the result and the sourced "why" appear */
.settle{position:relative;z-index:2;background:linear-gradient(180deg,var(--bg),#EEF6F7);padding:10vh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 12vh}
.settle-head{max-width:640px}
.settle-head p{margin-top:14px;font-size:19px;color:var(--soft)}
.settle-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:5vh}
.settle-tabs button{min-height:44px;padding:0 16px;border-radius:999px;border:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line2);font:600 15px var(--text);color:var(--ink);cursor:pointer;transition:background .3s,color .3s}
.settle-tabs button[aria-selected=true]{background:var(--ink);color:#fff;box-shadow:none}
.pair{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;padding:32px;border-radius:32px;background:#fff;box-shadow:0 30px 60px -40px rgba(8,32,42,.4)}
.pair[hidden]{display:none}
.scale{position:relative;height:250px}
.beam{position:absolute;left:6%;right:6%;top:44px;height:8px;border-radius:4px;background:var(--ink);transform-origin:50% 50%;transition:transform .8s var(--ease)}
.beam.tilt-l{transform:rotate(-7deg)}.beam.tilt-r{transform:rotate(7deg)}
.pan{position:absolute;top:6px;width:42%;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;transition:transform .8s var(--ease)}
.pan.l{left:0}.pan.r{right:0}
.beam.tilt-l .pan{transform:rotate(7deg)}.beam.tilt-r .pan{transform:rotate(-7deg)}
.pan::before{content:"";width:2px;height:64px;background:var(--line2)}
.pan b{display:block;width:100%;padding:18px 12px;border-radius:18px;background:var(--bg2);text-align:center;font:600 clamp(16px,1.5vw,20px)/1.2 var(--display);letter-spacing:-.02em;transition:background .5s,color .5s,box-shadow .5s,opacity .5s}
.beam.tilt-l .pan.l b,.beam.tilt-r .pan.r b{background:var(--accentFill);color:#fff;box-shadow:0 22px 40px -20px rgba(0,124,137,.7)}
.beam.tilt-l .pan.r b,.beam.tilt-r .pan.l b{opacity:.4}
.pivot{position:absolute;left:50%;top:52px;width:28px;height:28px;margin-left:-14px;background:var(--ink);clip-path:polygon(50% 0,100% 100%,0 100%)}
.pivot::after{content:"";position:absolute;left:-30px;right:-30px;bottom:-6px;height:6px;border-radius:3px;background:var(--ink)}
.pq{font:600 clamp(20px,2vw,26px)/1.3 var(--display);letter-spacing:-.02em}
.pa{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pa button{min-height:46px;padding:0 20px;border-radius:999px;border:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line2);font:600 15px var(--text);color:var(--ink);cursor:pointer;transition:background .25s,color .25s}
.pa button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.pr{margin-top:16px;min-height:1.6em;font-weight:600;color:var(--accentInk)}
.pw{margin-top:12px;padding:14px 16px;border-radius:16px;background:var(--bg2);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.pair.answered .pw{opacity:1;transform:none}
.pw b{display:block;font:600 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--accentInk)}
.pw p{margin-top:8px;font-size:15px;line-height:1.5}
.pw .cn-src{display:inline-block;margin-top:8px}
@media (max-width:720px){.pair{grid-template-columns:1fr;padding:20px}.scale{height:200px}.beam{top:30px}.pivot{top:38px}.pan::before{height:50px}}
@media (prefers-reduced-motion:reduce){.beam,.pan,.pw{transition:none}}

/* three tiles from the app's own copy: the rest-day streak, the Home Screen widget, the opt-in reminders */
.art-streak{padding:18px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.wk span{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 12px var(--text);color:var(--soft)}
.wk i{width:34px;height:34px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 10px 18px -10px rgba(0,124,137,.6)}
.wk span.rest i{background:#fff;box-shadow:inset 0 0 0 2px var(--line2)}
.wk span.rest::after{content:"rest";position:absolute;top:-16px;padding:2px 7px;border-radius:999px;background:var(--ink);color:#fff;font-size:10px;letter-spacing:.04em}
.wk span.today i{background:#fff;box-shadow:inset 0 0 0 2.5px var(--accent)}
.sl{font:600 16px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.tagrow{display:flex;gap:6px;flex-wrap:wrap}
.tagrow span{padding:6px 11px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line2);font-size:12.5px;font-weight:600}
.tagrow span.on{background:var(--ink);color:#fff;box-shadow:none}
.art-widget{background:linear-gradient(160deg,#D9EEF1,#EDF2F8 55%,#F6E9E1)}
.hs{position:absolute;inset:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-content:start}
.hs i{aspect-ratio:1;border-radius:22%;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.wdg{position:absolute;left:14px;top:14px;width:calc(50% - 21px);aspect-ratio:1;border-radius:22px;padding:13px;background:#fff;box-shadow:0 20px 40px -24px rgba(8,32,42,.45);display:flex;flex-direction:column;gap:3px}
.wdg .mark{width:22px;height:22px;border-radius:6px;margin-bottom:2px}
.wdg b{font:600 12px var(--text);color:var(--soft)}
.wdg span{font-size:12.5px;color:var(--soft);line-height:1.3}
.wdg span:first-of-type{margin-top:auto;font:600 15px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.art-remind{background:linear-gradient(180deg,#0E1E30,#1B3350);padding:16px;display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:236px}
.ntf{width:min(100%,440px);margin:0 auto;display:grid;grid-template-columns:28px 1fr auto;gap:2px 10px;align-items:center;padding:11px 13px;border-radius:18px;background:rgba(255,255,255,.93);font-size:12.5px;color:var(--ink);box-shadow:0 12px 30px -16px rgba(0,0,0,.5);animation:ntf-in .9s var(--ease) both;animation-delay:calc(.2s + var(--i)*.3s)}
.ntf .mark{grid-row:span 2;width:28px;height:28px;border-radius:8px}
.ntf b{font-weight:600}.ntf em{font-style:normal;color:var(--soft);font-size:11.5px}
.ntf span{grid-column:2/4;color:var(--soft);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@keyframes ntf-in{from{opacity:0;transform:translateY(-14px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.ntf{animation:none}}

/* the request ledger in the privacy band: what the app itself records, shown like a receipt */
.ledger{border-radius:22px;padding:18px 18px 14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.lg-h{font:600 12px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:#7EEDED}
.ledger ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.ledger li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding-bottom:10px;border-bottom:1px dashed rgba(255,255,255,.16);font-size:14px}
.ledger li span{color:#fff;font-weight:600}
.ledger li i{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#9FB7C4;text-align:right;align-self:center}
.ledger li em{grid-column:1/3;font-style:normal;color:#9FB7C4;font-size:13px}
.ledger li.never span,.ledger li.never i{color:#7EEDED}
.lg-f{margin-top:12px;font-size:13px;color:#9FB7C4}

/* the colour wipe: mirror view vs measured view (canvas illustration, drag or keyboard) */
.wipe-sec{background:var(--bg);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,90px);align-items:center;padding:16vh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 12vh;border-radius:44px 44px 0 0;box-shadow:0 -30px 60px -40px rgba(8,32,42,.25)}
.wipe-copy>p{margin-top:18px;font-size:19px;color:var(--soft);max-width:30em}
.legend{list-style:none;padding:0;margin:22px 0 10px;display:flex;gap:22px;font-weight:600;font-size:15px}
.legend li{display:flex;align-items:center;gap:8px}.legend .k{margin:0;width:18px;height:18px}
.wipe{position:relative;aspect-ratio:4/3;border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(8,32,42,.45);touch-action:pan-y;cursor:ew-resize;background:#d9b49b}
.wipe-layer{position:absolute;inset:0;width:100%;height:100%;display:block}
.wipe-top{clip-path:inset(0 0 0 var(--x))}
.wipe-handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(8,32,42,.12);pointer-events:none}
.wipe-handle span{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;box-shadow:0 10px 24px -8px rgba(8,32,42,.45);display:grid;place-items:center}
.wipe-handle span::before{content:"";width:18px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%230B1F33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 1L1 5l4 4M13 1l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat}
.wipe-tag{position:absolute;top:16px;padding:7px 12px;border-radius:999px;font:600 13px/1 var(--text);background:rgba(255,255,255,.82);color:var(--ink);pointer-events:none}
.wipe-tag.l{left:16px}.wipe-tag.r{right:16px;background:var(--ink);color:#fff}
.wipe input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.wipe:focus-within .wipe-handle span{outline:2.5px solid var(--accent);outline-offset:3px}

/* faq */
.faq{background:var(--bg);padding:14vh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,90px)}
.faq-list{display:grid}
details{border-bottom:1px solid var(--line2)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:600 20px/1.3 var(--display);letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23065F5F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .4s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 24px;color:var(--soft);max-width:36em}

/* close: a slow aurora behind the last ask, the QR for desktop visitors */
.close{background:var(--bg);min-height:92vh;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;overflow:hidden;padding:14vh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.aurora{position:absolute;inset:0;filter:blur(60px) saturate(1.2);opacity:.85;pointer-events:none}
.aurora i{position:absolute;border-radius:50%}
.aurora i:nth-child(1){width:55vw;height:55vw;left:-10vw;top:-15vw;background:radial-gradient(circle,rgba(0,152,168,.42),transparent 65%);animation:a1 18s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:45vw;height:45vw;right:-8vw;top:10vh;background:radial-gradient(circle,rgba(126,200,255,.42),transparent 65%);animation:a2 22s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:50vw;height:50vw;left:30vw;bottom:-25vw;background:radial-gradient(circle,rgba(255,196,170,.45),transparent 65%);animation:a3 26s ease-in-out infinite alternate}
@keyframes a1{to{transform:translate(18vw,10vh) scale(1.15)}}@keyframes a2{to{transform:translate(-14vw,16vh) scale(.9)}}@keyframes a3{to{transform:translate(-10vw,-12vh) scale(1.2)}}
.qr-card{position:relative;align-self:end;justify-self:end;width:200px;padding:16px;border-radius:24px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 50px -30px rgba(8,32,42,.45);text-align:center}
.qr-card p{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px}
.qr{display:block;width:100%;height:auto;border-radius:10px}
.sticky-cta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:none;transform:translateY(140%);transition:transform .5s var(--ease)}
.sticky-cta .btn{width:100%;justify-content:center;box-shadow:0 18px 40px -14px rgba(0,124,137,.75)}
.sticky-cta.on{transform:none}
.close-copy{position:relative;max-width:min(560px,56vw)}
.close h2{font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-.045em}
.close-copy>p{margin-top:18px;font-size:19px;color:var(--soft)}
.wait{margin-top:36px;padding:22px;border-radius:24px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 20px 50px -30px rgba(8,32,42,.35),inset 0 0 0 1px rgba(255,255,255,.9)}
.wait label[for=email]{font-weight:600;font-size:15px}
.wait-row{display:flex;gap:8px;margin-top:10px}
.wait input[type=email]{flex:1;min-width:0;min-height:52px;padding:0 18px;border-radius:999px;border:0;background:#fff;font:16px var(--text);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2);transition:box-shadow .25s}
.wait input[type=email]:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.wait input::placeholder{color:#6B7E8F}
.age{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:15px;min-height:44px;cursor:pointer}
.age input{width:20px;height:20px;accent-color:var(--accentFill)}
.wait-msg{min-height:1.5em;margin-top:4px;font-weight:600;font-size:15px}
.wait-msg.ok{color:var(--ok)}.wait-msg.err{color:#B42318}
.wait-next{color:var(--accentInk);text-decoration:underline;text-underline-offset:3px}
.wait button[disabled]{opacity:.6;cursor:progress}

.foot{background:var(--bg);border-top:1px solid var(--line);padding:40px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 56px;color:var(--soft);font-size:14px}
.foot-row{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;margin-bottom:18px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot nav a{color:var(--ink);text-decoration:none;font-weight:500}
.foot nav a:hover{text-decoration:underline}

/* reveal: content is visible by default; with JS a short rise plays once */
.js .rise{transform:translateY(24px);opacity:.55;filter:blur(4px);transition:transform 1s var(--ease),opacity 1s var(--ease),filter 1s var(--ease)}
.js .rise.seen{transform:none;opacity:1;filter:none}

/* tablet and phone */
@media (max-width:980px){
  .wipe-sec{grid-template-columns:1fr;justify-items:center}
  .wipe-copy{max-width:640px}
  .show{grid-template-columns:1fr}.show-list{order:2}
  .sci-grid{grid-template-columns:1fr 1fr}.tonechart{grid-column:span 2;order:-1}.gauge{width:auto}
  .ways-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.way-me{transform:none}
  .plans{grid-template-columns:1fr;max-width:480px}
  .wipe{width:100%}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .privacy,.faq{grid-template-columns:1fr}
  .field{order:-1;height:300px}
  .close{grid-template-columns:1fr}.close-copy{max-width:none}.qr-card{display:none}
}
@media (max-width:720px){
  body{font-size:16px}
  .hero-copy{max-width:none}
  .hero{align-items:end;padding-top:40svh;padding-bottom:40px;min-height:100svh}
  .hero h1{font-size:clamp(40px,11.5vw,56px)}
  .lede{margin-top:16px}
  .ctas{margin-top:22px}
  .ctas .btn{flex:1 1 100%;justify-content:center}
  .chips{gap:8px}.chips li{flex:1 1 30%;padding:12px;max-width:none}.chips b{font-size:21px}.chips span{font-size:12px}
  .hud-chip{font-size:12px;padding:7px 11px}
  .hud-chip.c1,.hud-chip.c3{display:none}
  .story{padding-top:8vh}
  .steps{margin-top:40vh;padding-left:0}.steps::before{display:none}
  .step{min-height:auto;display:block;padding:20px 20px 20px 46px;border-radius:24px;background:rgba(247,251,252,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);opacity:1;margin-bottom:58vh}
  .step-dot{left:-28px}
  .wipe-sec{border-radius:32px 32px 0 0;padding-top:12vh}
  .deck{height:560px}.deck .phone{width:262px}
  .show-list button{padding:12px 14px 16px}.show-list b{font-size:16px}
  .sci-grid{grid-template-columns:1fr}.tonechart{grid-column:auto}.tonechart li{grid-template-columns:96px minmax(0,1fr) 42px}.gauge{max-width:300px;justify-self:center;width:100%}
  .ways-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}.tile.wide{grid-column:auto}
  .wait-row{flex-direction:column}
  .wait-row .btn{justify-content:center}
  .bar{inset:8px 8px auto}
  .sticky-cta{display:block}
  .foot{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js .rise{transform:none;opacity:1}
  .gauge-arc{stroke-dasharray:inherit}.tc-bar i{transform:none !important}.spark-line{stroke-dashoffset:0}
  .hud-chip{opacity:1;transform:none}
}

.art-uv{display:grid;place-items:center}
.sun{position:relative;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#FFE08A,#F5A524 70%);box-shadow:0 0 0 10px rgba(245,165,36,.14),0 0 0 22px rgba(245,165,36,.07);display:grid;place-items:center;font:700 34px/1 var(--display);color:#5A3A00}
.sun::before{content:"";position:absolute;inset:-26px;border-radius:50%;background:repeating-conic-gradient(rgba(245,165,36,.55) 0 6deg,transparent 6deg 30deg);-webkit-mask:radial-gradient(circle,transparent 58px,#000 59px,#000 72px,transparent 73px);mask:radial-gradient(circle,transparent 58px,#000 59px,#000 72px,transparent 73px);animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.uv-band{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:#fff;font:600 12.5px/1 var(--text);color:var(--ink);white-space:nowrap}
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:620px}
.chips li{max-width:none}
.chips b span,.gauge figcaption b span{font-size:inherit;color:inherit;line-height:inherit}
@media (max-width:720px){.chips{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the sculpted face map on the answer screen */
.sc-hero .facerender{width:78%;margin:0 auto 2px}
.facerender .fr-pin{animation:pinin .6s var(--ease) both;animation-delay:calc(var(--i)*180ms + .3s)}
@keyframes pinin{from{opacity:0;transform:translateY(-6px)}}
.facerender .fr-pulse{transform-box:fill-box;transform-origin:center;animation:frp 2.4s ease-out infinite}
@keyframes frp{from{transform:scale(1);opacity:.9}to{transform:scale(4.5);opacity:0}}
.sc-key{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;margin:2px 0 8px;font-size:11px;font-weight:600;color:var(--soft)}
.sc-key span{display:inline-flex;align-items:center;gap:5px}
.sc-key b{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--ink);color:#fff;font-size:9.5px}

/* "Sound familiar?": concern chips beside a drawn close-up and Skinby's answer */
.concerns{position:relative;z-index:2;background:var(--bg);border-radius:44px 44px 0 0;box-shadow:0 -30px 60px -40px rgba(8,32,42,.25);padding:14vh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 10vh}
.wipe-sec{border-radius:0;box-shadow:none}
.cn-head{max-width:640px}
.cn-head p{margin-top:14px;font-size:19px;color:var(--soft)}
.cn{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(20px,4vw,56px);margin-top:6vh;align-items:start}
.cn-chips{display:flex;flex-direction:column;gap:10px}
.cn-chips button{display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 20px;border:0;border-radius:18px;background:#fff;color:var(--ink);font:600 16.5px/1.3 var(--text);text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .3s,transform .45s var(--ease),background .3s}
.cn-chips button::before{content:"\201C";font:700 28px/1 var(--display);color:var(--accent);opacity:.55;margin-top:6px;transition:opacity .3s}
.cn-chips button:hover{transform:translateX(4px)}
.cn-chips button[aria-selected=true]{background:linear-gradient(135deg,#fff,#E7F7F7);box-shadow:inset 0 0 0 2px var(--accent),0 18px 40px -26px rgba(0,124,137,.6)}
.cn-chips button[aria-selected=true]::before{opacity:1}
.cn-stage{position:relative}
.cn-panel{display:flex;gap:clamp(20px,3vw,40px);align-items:center;padding:26px 28px;border-radius:30px;background:#fff;box-shadow:0 40px 80px -46px rgba(8,32,42,.5),inset 0 0 0 1px var(--line)}
.cn-side{flex:1 1 0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
.cn-side>*{min-width:0}
.cn-phone{flex:0 0 324px}
.cn-pickrow{padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,#F2FAFA,#fff);box-shadow:inset 0 0 0 1px var(--line)}
.cn-note{font-size:13.5px;color:var(--soft)}
.cn-phone{display:flex;justify-content:center}
.cn-phone .phone{width:300px;box-shadow:0 50px 80px -40px rgba(8,32,42,.5),0 0 0 1.5px rgba(255,255,255,.08) inset,0 0 0 9px #0b1824 inset}
.sc-ans .sc-hero .facemap{width:54%;margin-bottom:6px}
.sc-ans .sc-hero{padding:10px 12px 12px}
.sc-ans .sc-title{font-size:19px}
.sc-ans .sc-sub{font-size:12px}
.sc-qbox{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.sc-q{font-size:12px;line-height:1.35;color:var(--ink)}
.sc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.sc-chips button{min-height:30px;padding:0 11px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line2);font:600 12px var(--text);color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.sc-chips button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.sc-qres{margin-top:6px;font-size:12px;font-weight:600;color:var(--accentInk);min-height:1.3em}
.sc-why{display:none;margin-top:4px;font-size:11px;line-height:1.4;color:var(--soft)}
.sc-why b{color:var(--ink)}.sc-why .cn-src{font-size:11px}
.sc-qbox.answered .sc-why{display:block}
.sc-helps{padding:10px 12px;border-radius:14px;background:var(--tint)}
.sc-helps p{font-size:12px;line-height:1.4;margin-top:3px;color:var(--ink)}
.sc-helps .src{display:block;margin-top:4px;font-size:11px;font-weight:600;color:var(--accentInk)}
.pickface .pz-ring circle{opacity:0;transition:opacity .3s}.pickface .pz-ring.on circle{opacity:1}
@media (max-width:980px){.cn-panel{flex-direction:column;align-items:stretch;padding:20px}.cn-phone{order:-1;flex:none}}
.cn-panel.on{animation:cnin .7s var(--ease) both}
@keyframes cnin{from{opacity:0;transform:translateY(14px) scale(.985)}}
.cn-art{position:relative;aspect-ratio:16/8;overflow:hidden;background:#d9b49b}
.cn-skin{position:absolute;inset:0;width:100%;height:100%;display:block}
.cn-panel.on .cn-skin{animation:kb 14s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.08) translate(-1.5%,-1%)}}
.cn-tag{position:absolute;left:14px;bottom:14px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.86);font:600 12px/1 var(--text);color:var(--ink)}
.cn-answer{padding:24px 26px 26px;display:grid;gap:12px}
.cn-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accentInk)}
.cn-label .sample-tag{margin-left:auto}
.cn-answer h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em}
.cn-where{color:var(--ink);font-size:16.5px;margin-top:-4px}
.cn-row{display:grid;gap:4px;padding:14px 16px;border-radius:16px;background:var(--bg2)}
.cn-row b{font-size:12.5px;letter-spacing:.02em;color:var(--soft)}
.cn-row p{font-size:15.5px;line-height:1.5;color:var(--ink)}
.cn-row.helps{background:var(--tint)}
.cn-row.helps b{color:var(--accentInk)}
.cn-src{font-size:12.5px;font-weight:600;color:var(--accentInk);text-decoration:none}
.cn-src:hover{text-decoration:underline}
.cn-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:4px}
.btn-md{--h:48px;font-size:15.5px}
.link-more{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accentInk);text-decoration:none}
.link-more:hover{text-decoration:underline}
.cn-fine{margin-top:22px;max-width:62em}
@media (max-width:980px){.cn{grid-template-columns:1fr}.cn-chips{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin:0 calc(var(--gut)*-1);padding-left:var(--gut);padding-right:var(--gut);scrollbar-width:none}.cn-chips::-webkit-scrollbar{display:none}.cn-chips button{flex:none;max-width:250px;scroll-snap-align:start}.cn-chips button:hover{transform:none}}
@media (max-width:720px){.concerns{border-radius:32px 32px 0 0;padding-top:10vh}.cn-art{aspect-ratio:4/3}.cn-answer{padding:20px}}
@media (prefers-reduced-motion:reduce){.cn-panel.on .cn-skin{animation:none}}
.cn-panel[hidden]{display:none}

/* hero: the first line rotates through what people are dealing with */
.hero h1 .rot{display:grid;color:var(--ink)}
.hero h1 .rot i{grid-area:1/1;font-style:normal;opacity:0;transform:translateY(.32em);filter:blur(8px);transition:opacity .6s var(--ease),transform .7s var(--ease),filter .6s var(--ease)}
.hero h1 .rot i.on{opacity:1;transform:none;filter:none}
.hero h1 .rot i.out{opacity:0;transform:translateY(-.32em);filter:blur(8px)}
.hero h1 .h1-b{display:block;color:var(--accentInk)}
@media (prefers-reduced-motion:reduce){.hero h1 .rot i{transition:none}}

/* "Where do you see it?": a small face that lights the areas a visitor picks */
.cn-pick{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;align-items:center;padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,#F2FAFA,#fff);box-shadow:inset 0 0 0 1px var(--line)}
.cn-face{width:118px}
.pickface{display:block;width:100%;height:auto}
.pickface .pz{opacity:0;transition:opacity .45s var(--ease)}
.pickface .pz.on{opacity:1}
.pickface .pz-ring{opacity:0;transition:opacity .3s}
.pickface .pz-ring.on{opacity:.9;animation:ringdash 6s linear infinite}
@keyframes ringdash{to{stroke-dashoffset:-60}}
.cn-q{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.cn-areas{display:flex;flex-wrap:wrap;gap:6px}
.cn-areas button{min-height:36px;padding:0 13px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:600 13.5px/1 var(--text);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line2);transition:box-shadow .25s,background .25s,color .25s,transform .3s var(--ease)}
.cn-areas button:hover{transform:translateY(-1px)}
.cn-areas button[aria-pressed=true]{background:var(--accentFill);color:#fff;box-shadow:0 8px 18px -10px rgba(0,124,137,.7)}
.cn-where{transition:opacity .18s,transform .18s}
.cn-where.swap{opacity:0;transform:translateY(4px)}
@media (max-width:720px){.cn-pick{grid-template-columns:76px minmax(0,1fr);gap:12px}.cn-face{width:76px}}

/* the scan film: the first app screen plays a whole scan on a 13 s loop (camera, light check, turns, five steps, answer) */
.sc-film{overflow:hidden}
.sc-film .film-mesh{width:74%;perspective:500px;display:grid;place-items:center}
.sc-film .film-mesh .scan-mesh{width:100%;animation:filmturn 13s var(--ease) infinite}
@keyframes filmturn{0%,26%{transform:none}32%{transform:rotateY(-26deg)}38%{transform:rotateY(-26deg)}44%{transform:rotateY(24deg)}50%{transform:rotateY(24deg)}55%,100%{transform:none}}
.sc-film .fp{position:absolute;bottom:118px;left:50%;transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-weight:600;font-size:14px;white-space:nowrap;opacity:0}
.sc-film .fp b{color:#5FE3E3}
.sc-film .fp1{animation:fp1 13s infinite}.sc-film .fp2{animation:fp2 13s infinite}.sc-film .fp3{animation:fp3 13s infinite}.sc-film .fp4{animation:fp4 13s infinite}.sc-film .fp5{animation:fp5 13s infinite}
@keyframes fp1{0%,1%{opacity:0}3%,13%{opacity:1}15%,100%{opacity:0}}
@keyframes fp2{0%,15%{opacity:0}17%,26%{opacity:1}28%,100%{opacity:0}}
@keyframes fp3{0%,28%{opacity:0}30%,37%{opacity:1}39%,100%{opacity:0}}
@keyframes fp4{0%,39%{opacity:0}41%,49%{opacity:1}51%,100%{opacity:0}}
@keyframes fp5{0%,51%{opacity:0}53%,57%{opacity:1}59%,100%{opacity:0}}
.sc-film .scan-steps i{transition:none}
.sc-film .scan-steps .s1{animation:st1 13s infinite}.sc-film .scan-steps .s2{animation:st2 13s infinite}.sc-film .scan-steps .s3{animation:st3 13s infinite}
@keyframes st1{0%,26%{background:rgba(255,255,255,.25)}27%,100%{background:#5FE3E3}}
@keyframes st2{0%,38%{background:rgba(255,255,255,.25)}39%,100%{background:#5FE3E3}}
@keyframes st3{0%,50%{background:rgba(255,255,255,.25)}51%,100%{background:#5FE3E3}}
.sc-film .film-sheet{position:absolute;left:0;right:0;bottom:0;top:30%;padding:22px 20px 90px;border-radius:26px 26px 0 0;background:var(--bg);transform:translateY(105%);animation:sheet 13s var(--ease) infinite;z-index:3}
@keyframes sheet{0%,58%{transform:translateY(105%)}61%,79%{transform:none}82%,100%{transform:translateY(105%)}}
.fs-h{font:600 18px/1.2 var(--display);color:var(--ink);margin-bottom:14px}
.film-sheet ol{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.film-sheet li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink);opacity:.3}
.film-sheet li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line2)}
.film-sheet .fs0{animation:fs0 13s infinite}.film-sheet .fs1{animation:fs1 13s infinite}.film-sheet .fs2{animation:fs2 13s infinite}.film-sheet .fs3{animation:fs3 13s infinite}.film-sheet .fs4{animation:fs4 13s infinite}
.film-sheet li{--done:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E")}
.film-sheet li.fs0::before{animation:fd0 13s infinite}.film-sheet li.fs1::before{animation:fd1 13s infinite}.film-sheet li.fs2::before{animation:fd2 13s infinite}.film-sheet li.fs3::before{animation:fd3 13s infinite}.film-sheet li.fs4::before{animation:fd4 13s infinite}
@keyframes fs0{0%,61%{opacity:.3}62%,100%{opacity:1}}@keyframes fs1{0%,64%{opacity:.3}65%,100%{opacity:1}}@keyframes fs2{0%,67%{opacity:.3}68%,100%{opacity:1}}@keyframes fs3{0%,70%{opacity:.3}71%,100%{opacity:1}}@keyframes fs4{0%,73%{opacity:.3}74%,100%{opacity:1}}
@keyframes fd0{0%,63%{background:transparent}64%,100%{background:var(--accent) var(--done) center/10px no-repeat;box-shadow:none}}
@keyframes fd1{0%,66%{background:transparent}67%,100%{background:var(--accent) var(--done) center/10px no-repeat;box-shadow:none}}
@keyframes fd2{0%,69%{background:transparent}70%,100%{background:var(--accent) var(--done) center/10px no-repeat;box-shadow:none}}
@keyframes fd3{0%,72%{background:transparent}73%,100%{background:var(--accent) var(--done) center/10px no-repeat;box-shadow:none}}
@keyframes fd4{0%,75%{background:transparent}76%,100%{background:var(--accent) var(--done) center/10px no-repeat;box-shadow:none}}
.sc-film .film-answer{position:absolute;inset:0;padding:52px 18px 90px;background:var(--bg);display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;animation:fans 13s var(--ease) infinite;z-index:4}
@keyframes fans{0%,79%{opacity:0;transform:translateY(16px)}82%,97%{opacity:1;transform:none}100%{opacity:0}}
.film-answer .facemap{width:78%;height:auto}
.fa-t{font:600 22px/1.15 var(--display);color:var(--ink);margin-top:6px}
.fa-s{font-size:13px;color:var(--soft);margin-top:4px}
.phone:not(.front) .sc-film *, .phone:not(.front) .sc-film *::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.sc-film .film-answer{opacity:1;transform:none}}
.show-list li:first-child button.run .bar-fill::after{animation-duration:13s}

/* "Tired of guessing?" sub line */
.ways-sub{margin-top:12px;font-size:19px;color:var(--soft);max-width:36em}

/* feature tiles: routine, ingredient list by camera, under-eye check */
.art-routine{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
.rt-col{display:flex;flex-direction:column;gap:6px;position:relative}
.rt-col b{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--accentInk)}
.rt-col span{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:10px;background:#fff;font-size:12px;font-weight:600;box-shadow:0 6px 14px -12px rgba(8,32,42,.5)}
.rt-col span i{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.6px var(--line2);animation:rtick 7s infinite;animation-delay:calc(var(--i)*.55s)}
@keyframes rtick{0%,6%{background:transparent;box-shadow:inset 0 0 0 1.6px var(--line2)}10%,88%{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/9px no-repeat;box-shadow:none}100%{background:transparent}}
.rt-col em{margin-top:2px;padding:6px 8px;border-radius:9px;background:var(--cautionTint);color:var(--caution);font-style:normal;font-size:11px;font-weight:600;line-height:1.3;animation:pop 7s var(--ease) infinite}
.art-ocr{padding:14px}
.ocr-label{margin:0;padding:12px 14px;border-radius:12px;background:#FBF8F3;box-shadow:0 10px 24px -16px rgba(8,32,42,.5);font:600 11.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#3A3530;letter-spacing:.01em}
.ocr-label u{text-decoration:none;background:linear-gradient(transparent 55%,rgba(0,152,168,.35) 55%);animation:hl 6s infinite}
@keyframes hl{0%,30%{background-size:0 100%}45%,100%{background-size:100% 100%}}
.ocr-label u{background-repeat:no-repeat}
.ocr-frame{position:absolute;left:10px;right:10px;top:10px;height:34px;border:2px solid var(--accent);border-radius:10px;box-shadow:0 0 0 999px rgba(8,32,42,.06);animation:ocrscan 6s ease-in-out infinite}
@keyframes ocrscan{0%{top:10px}40%{top:calc(100% - 96px)}60%,100%{top:calc(100% - 96px);opacity:0}}
.ocr-chip{position:absolute;bottom:14px;padding:6px 10px;border-radius:999px;font-size:11.5px;font-weight:700;opacity:0;animation:chipin 6s var(--ease) infinite}
.ocr-chip.c1{left:14px;background:var(--tint);color:var(--accentInk);animation-delay:.2s}
.ocr-chip.c2{right:14px;background:var(--cautionTint);color:var(--caution);animation-delay:.5s}
@keyframes chipin{0%,48%{opacity:0;transform:translateY(6px)}56%,94%{opacity:1;transform:none}100%{opacity:0}}
.art-eye{display:grid;place-items:center;padding:0}
.art-eye svg{position:absolute;inset:0;width:100%;height:100%}
.art-eye .eye-scan{animation:dash 3s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
.eye-meter{position:absolute;left:16px;right:16px;bottom:40px;height:6px;border-radius:999px;background:rgba(255,255,255,.6)}
.eye-meter i{position:absolute;inset:0 auto 0 0;width:34%;border-radius:inherit;background:#3F3D6B;transform-origin:left;animation:meter 4s var(--ease) infinite}
@keyframes meter{0%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
.eye-word{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:#fff;font-size:11.5px;font-weight:700;color:#3F3D6B;white-space:nowrap}
.tile-art{min-height:196px}
.ocr-label{font-size:11px;line-height:1.5}
.rt-col span{padding:6px 8px;font-size:11.5px}
.rt-col em{font-size:10.5px}

/* the compact waitlist row under each "Sound familiar?" answer */
.wait.wait-mini{margin-top:6px;padding:14px 16px;border-radius:18px;background:var(--bg2);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.wait-mini label[for]{font-size:14px}
.wait-mini .wait-row input[type=email]{min-height:48px}
.wait-mini .age{margin-top:6px;min-height:40px;font-size:14px}
.wait-mini .wait-msg{font-size:14px}

/* concern pages (site/skin/<concern>.html): the visitor's own words, the panel, more from the sources */
.cnp{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:120px var(--gut) 40px}
.cnp-hero{max-width:760px}
.cnp-hero h1{font-size:clamp(38px,5.4vw,68px);line-height:1.02;letter-spacing:-.04em}
.cnp-hero .lede{margin-top:18px}
.concerns.cnp-panel{background:none;border-radius:0;box-shadow:none;padding:5vh 0 0;max-width:760px}
.cnp-more,.cnp-how,.cnp-other{margin-top:9vh;max-width:760px}
.cnp-more h2,.cnp-how h2,.cnp-other h2{font-size:clamp(26px,3vw,38px)}
.cnp-more ul{list-style:none;padding:0;margin:22px 0 18px;display:grid;gap:12px}
.cnp-more li{padding:16px 18px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cnp-more li p{font-size:16px;color:var(--ink);line-height:1.55}
.cnp-how ol{list-style:none;padding:0;margin:22px 0 26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cnp-how li{padding:20px;border-radius:22px;background:#fff;box-shadow:0 18px 40px -32px rgba(8,32,42,.45)}
.cnp-how li b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accentFill);color:#fff;font-size:14px}
.cnp-how li h3{margin-top:12px;font-size:18px}
.cnp-how li p{margin-top:6px;font-size:15px;color:var(--soft)}
.cnp-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cnp-links a{padding:12px 16px;border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;box-shadow:inset 0 0 0 1.5px var(--line2);transition:box-shadow .25s,transform .3s var(--ease)}
.cnp-links a:hover{box-shadow:inset 0 0 0 2px var(--accent);transform:translateY(-1px)}
.cnp-fine{margin-top:7vh;max-width:62em}
.cnp-body .foot{margin-top:6vh}
@media (max-width:720px){.cnp{padding-top:96px}.cnp-how ol{grid-template-columns:1fr}}
.cnp>*{margin-left:auto;margin-right:auto}

/* Trend check: a dark, cinematic band. Each card's illustration turns toward you and floats as it reaches the centre of the row.
   --p is the card's signed distance from the centre (-1..1) and --pa its absolute value, both set by home.js. No WebGL: transforms only. */
.trends{position:relative;z-index:2;padding:clamp(84px,11vw,150px) 0 clamp(72px,9vw,120px);background:radial-gradient(60% 50% at 50% 0%,rgba(0,152,168,.22),transparent 70%),radial-gradient(40% 40% at 90% 100%,rgba(123,92,224,.16),transparent 70%),var(--navy);color:#fff;overflow:hidden;overflow:clip}
.trends h2,.trends h3{color:#fff}
.tr-head{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.tr-head h2{max-width:13em}
.tr-head>p:last-child{margin-top:18px;max-width:34em;color:rgba(255,255,255,.72);font-size:clamp(17px,1.5vw,20px)}
.tr-kick{display:inline-flex;margin-bottom:18px;padding:7px 13px;border-radius:999px;font:600 13px/1 var(--text);color:#7AF0F0;background:rgba(0,152,168,.14);box-shadow:inset 0 0 0 1px rgba(122,240,240,.25)}
.tr-rail{position:relative;margin-top:clamp(36px,5vw,64px)}
.tr-row{--cw:clamp(268px,78vw,380px);list-style:none;margin:0;padding:24px calc(50vw - var(--cw) / 2) 40px;display:flex;gap:clamp(16px,2.4vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none;perspective:1200px}
.tr-row::-webkit-scrollbar{display:none}
.tr-row:focus-visible{box-shadow:inset 0 0 0 2px rgba(122,240,240,.6);border-radius:24px}
.tc{--p:0;--pa:0;--a:#0098A8;--b:#007C89;flex:none;width:var(--cw);scroll-snap-align:center;transform:scale(calc(1 - var(--pa) * .08));opacity:calc(1 - var(--pa) * .45);transition:transform .25s linear,opacity .25s linear}
.tc[data-hue="coral"],.trp-hero[data-hue="coral"]{--a:#E2694A;--b:#7A2E1C}
.tc[data-hue="rose"],.trp-hero[data-hue="rose"]{--a:#C2415E;--b:#5E1A2C}
.tc[data-hue="violet"],.trp-hero[data-hue="violet"]{--a:#7B5CE0;--b:#33246E}
.tc[data-hue="amber"],.trp-hero[data-hue="amber"]{--a:#E09A1E;--b:#6B4508}
.tc[data-hue="lime"],.trp-hero[data-hue="lime"]{--a:#9DB52E;--b:#46520F}
.tc-a{position:relative;display:flex;flex-direction:column;height:clamp(440px,62vh,540px);padding:24px 24px 22px;border-radius:32px;text-decoration:none;color:#fff;background:radial-gradient(90% 60% at 50% 38%,color-mix(in srgb,var(--a) 55%,transparent),transparent 70%),linear-gradient(170deg,color-mix(in srgb,var(--b) 70%,#08202A),#08202A 75%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px -30px rgba(0,0,0,.6);overflow:hidden;transition:box-shadow .4s var(--ease)}
.tc-a::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.10) 50%,transparent 65%);transform:translateX(calc(var(--p) * 60%));pointer-events:none}
.tc-a:hover,.tc-a:focus-visible{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a) 70%,#fff),0 34px 70px -30px rgba(0,0,0,.7)}
.tc-tag{font:650 clamp(26px,3vw,34px)/1 var(--display);letter-spacing:-.03em;color:color-mix(in srgb,var(--a) 45%,#fff)}
.tc-art{flex:1;display:grid;place-items:center;min-height:0}
.ta{width:min(78%,230px);height:auto;overflow:visible;filter:drop-shadow(0 28px 30px rgba(0,0,0,.45));transform:perspective(700px) rotateY(calc(var(--p) * -38deg)) rotateX(calc(var(--pa) * 10deg));animation:ta-float 7s ease-in-out infinite;animation-delay:calc(var(--n,0) * -1.1s)}
.ta line,.ta path{stroke-linecap:round}
.ta-l>*{transform-box:fill-box;transform-origin:center;animation:ta-breathe 5s ease-in-out infinite;animation-delay:calc(var(--d,0) * -.6s)}
@keyframes ta-float{0%,100%{translate:0 -6px}50%{translate:0 8px}}
@keyframes ta-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.02)}}
.tc h3{font-size:clamp(22px,2.2vw,26px);line-height:1.15;letter-spacing:-.02em}
.tc-what{margin-top:10px;font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.74)}
.tc-more{margin-top:16px;display:inline-flex;align-items:center;gap:6px;font:600 15px/1 var(--text);color:#7AF0F0}
.tr-nav{display:flex;justify-content:center;gap:12px;margin-top:4px}
.tr-nav button{width:48px;height:48px;border-radius:999px;border:0;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);cursor:pointer;transition:background .25s}
.tr-nav button:hover{background:rgba(255,255,255,.16)}
.tr-prev .ic{transform:rotate(180deg)}
.tr-check{max-width:var(--wrap);margin:clamp(48px,7vw,90px) auto 0;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:start}
.tr-check-h h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em}
.tr-check-h p{margin-top:14px;color:rgba(255,255,255,.72)}
@media (max-width:860px){.tr-check{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ta,.ta-l>*{animation:none}.ta{transform:none}.tc{transform:none;opacity:1}.tc-a::before{display:none}}

/* the paste checker (a light panel; the same on the home band, the trend pages and check.html) */
.chk{border-radius:28px;background:#fff;color:var(--ink);padding:clamp(18px,2.4vw,28px);box-shadow:0 30px 70px -40px rgba(8,32,42,.55),inset 0 0 0 1px var(--line)}
.chk-l{display:block;font:600 15px/1.3 var(--text);margin-bottom:10px}
.chk-ta{display:block;width:100%;min-height:128px;resize:vertical;border:0;border-radius:16px;padding:14px 16px;font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);background:var(--bg2);box-shadow:inset 0 0 0 1.5px var(--line2)}
.chk-ta:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.chk-opts{display:flex;flex-wrap:wrap;gap:4px 20px;margin:12px 0}
.chk-opts label{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;cursor:pointer}
.chk-opts input{width:20px;height:20px;accent-color:var(--accentFill)}
.chk-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:12px}
.chk-ex{min-height:44px;border:0;background:none;padding:0 4px;font:600 15px/1 var(--text);color:var(--accentInk);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.chk-out{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:14px;animation:chk-in .5s var(--ease)}
@keyframes chk-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chk-v{justify-self:start;padding:8px 14px;border-radius:999px;font:650 18px/1 var(--display);background:var(--tint2);color:var(--accentInk)}
.chk-v[data-k="care"]{background:var(--cautionTint);color:var(--caution)}
.chk-v[data-k="no"]{background:rgba(194,65,12,.12);color:var(--redness)}
.chk-n{font-size:14.5px;color:var(--soft)}
.chk-found b,.chk-pages b{display:block;font-size:14px;margin-bottom:6px}
.chk-found div{display:flex;flex-wrap:wrap;gap:8px}
.chk-chip{padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2)}
.chk-none{font-size:15px;color:var(--soft)}
.chk-r{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15.5px}
.chk-pages a{margin-right:12px;font-weight:600}
.chk-scan{display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:44px;font-weight:600;color:var(--accentInk);text-decoration:none}
.chk-scan[hidden],.chk-out[hidden]{display:none}
.chk-empty{color:var(--caution)}
@media (prefers-reduced-motion:reduce){.chk-out{animation:none}}

/* trend pages */
.trp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(20px,4vw,48px);align-items:center;max-width:980px}
.trp-art{--p:0;--pa:0;aspect-ratio:1;border-radius:36px;display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 40%,color-mix(in srgb,var(--a,#0098A8) 60%,transparent),transparent 72%),linear-gradient(170deg,color-mix(in srgb,var(--b,#007C89) 70%,#08202A),#08202A 80%);box-shadow:0 30px 60px -34px rgba(8,32,42,.6)}
.trp-art .ta{width:72%}
.trp-stat,.trp-check{margin-top:9vh;max-width:760px}
.trp-stat h2,.trp-check h2{font-size:clamp(26px,3vw,38px)}
.trp-stat p{margin-top:14px;font:600 clamp(19px,1.8vw,23px)/1.4 var(--display);letter-spacing:-.01em}
.trp-stat .cn-src{display:inline-block;margin-top:10px}
.trp-p{margin:12px 0 20px;color:var(--soft)}
.trp-check-solo{margin-top:5vh}
.trp-scan .wait-mini{margin-top:22px;max-width:520px}
.trp-grid{background:none;padding:6vh 0 0;color:var(--ink);overflow:visible}
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));overflow:visible;padding:0;perspective:none}
.tr-grid .tc{width:auto;transform:none;opacity:1}
@media (max-width:720px){.trp-hero{grid-template-columns:1fr}.trp-art{max-width:300px}}

/* desktop: the row is pinned and scrolling the page moves through the trends one by one (home.js adds .is-pinned only on tall screens
   with a mouse and no reduced-motion preference; phones keep a normal swipe row) */
.trends.is-pinned{padding-top:0}
.trends.is-pinned .tr-track{height:calc(100vh + var(--steps,5) * 62vh)}
.trends.is-pinned .tr-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 2vh}
.trends.is-pinned .tr-head h2{font-size:clamp(32px,3.4vw,46px)}
.trends.is-pinned .tr-head>p:last-child{margin-top:10px}
.trends.is-pinned .tr-rail{margin-top:2vh}
.trends.is-pinned .tr-row{scroll-snap-type:none;overflow-x:hidden;padding-bottom:16px}
.trends.is-pinned .tc{transition:none}
.trends.is-pinned .tc-a{height:min(500px,52vh)}
.trends.is-pinned .tr-nav{margin-top:0}
.tr-dots{display:flex;gap:8px;align-items:center;margin:0 6px}
.tr-dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.28);transition:background .3s}
.tr-dots i.on{width:22px;background:#7AF0F0}

/* 2026-10-21: the wait-time stat leads the "tired of guessing" row; product bank and ingredient bank tiles */
.way-stat{background:linear-gradient(160deg,#08202A,#0F3A4A);color:#C9DAE2}
.way-stat h3{color:#fff}
.way-stat .way-x{background:rgba(255,255,255,.08);width:96px;height:96px}
.way-stat .way-x b{font-size:44px;color:#5FE3E3}
.way-stat .way-x small{color:#9FD9DA}
.art-bank{display:grid;gap:8px;align-content:center;padding:18px}
.art-bank .bk{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 10px 24px -20px rgba(8,32,42,.5);opacity:0;transform:translateY(8px);animation:rise .6s var(--ease) forwards;animation-delay:calc(var(--i) * .12s)}
.art-bank .bk i{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.art-bank .bk b{font-size:13.5px;color:var(--ink)}
.art-bank .bk span{font-size:11px;color:var(--soft)}
.art-inci{display:flex;flex-wrap:wrap;gap:8px;align-content:center;padding:18px}
.art-inci .ic-chip{display:inline-grid;gap:1px;padding:8px 12px;border-radius:14px;background:#fff;box-shadow:0 10px 24px -20px rgba(8,32,42,.5);font-size:11px;color:var(--soft);opacity:0;animation:rise .6s var(--ease) forwards;animation-delay:calc(var(--i) * .12s)}
.art-inci .ic-chip b{font-size:13.5px;color:var(--ink)}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- trending products under the light (scripts/site/spotlight.mjs): a glowing crescent track, a beam on the centre product, the app's verdict beneath ---------- */
.spot{background:radial-gradient(70% 55% at 50% 0%,rgba(0,152,168,.26),transparent 70%),radial-gradient(40% 40% at 8% 100%,rgba(123,92,224,.18),transparent 70%),linear-gradient(180deg,#071521,#08202A 60%,#0A2434)}
.sp-rail{position:relative;isolation:isolate}
.sp-crescent{position:absolute;left:50%;top:58%;width:170vw;max-width:2200px;aspect-ratio:2.6;transform:translate(-50%,-22%);border-radius:50%;background:radial-gradient(50% 60% at 50% 0%,rgba(95,227,227,.55),rgba(0,152,168,.22) 45%,transparent 72%);-webkit-mask:radial-gradient(50% 50% at 50% 50%,transparent 60%,#000 61%,#000 72%,transparent 73%);mask:radial-gradient(50% 50% at 50% 50%,transparent 60%,#000 61%,#000 72%,transparent 73%);filter:blur(1px);opacity:.9;pointer-events:none;z-index:0}
.sp-crescent::after{content:"";position:absolute;inset:-6%;border-radius:inherit;background:radial-gradient(50% 55% at 50% 0%,rgba(95,227,227,.35),transparent 65%);filter:blur(28px)}
.sp-beam{position:absolute;left:50%;top:-14%;width:min(560px,70vw);height:84%;transform:translateX(-50%);background:radial-gradient(50% 100% at 50% 0%,rgba(159,245,242,.34),rgba(95,227,227,.1) 55%,transparent 75%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);pointer-events:none;z-index:0;animation:beam 6s ease-in-out infinite alternate}
@keyframes beam{to{opacity:.72;transform:translateX(-50%) scaleX(1.06)}}
.sp-row{position:relative;z-index:1;--cw:clamp(250px,64vw,320px);align-items:flex-end;padding-top:0}
.sp-card{--p:0;--pa:0;flex:none;width:var(--cw);scroll-snap-align:center;display:grid;gap:14px;transform:perspective(1200px) rotateY(calc(var(--p) * -28deg)) translateY(calc(var(--pa) * 26px)) scale(calc(1 - var(--pa) * .14));opacity:calc(1 - var(--pa) * .55);transition:transform .25s linear,opacity .25s linear;transform-style:preserve-3d}
.sp-stage{height:min(300px,36vh);display:grid;place-items:end center;perspective:900px;transform-style:preserve-3d}
.sp-card.lit .bt{animation:turn 9s ease-in-out infinite alternate}
.sp-card.lit .bt-body{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 30px 60px -22px rgba(95,227,227,.55),0 0 60px -10px rgba(95,227,227,.35)}
@keyframes turn{from{transform:rotateY(-16deg) translateY(0)}to{transform:rotateY(16deg) translateY(-6px)}}
/* the bottles: drawn, with the product's own name; one silhouette per form (dropper, tall, pump, tube) */
.bt{position:relative;width:118px;height:250px;display:grid;grid-template-rows:auto auto 1fr;justify-items:center;transform-style:preserve-3d;filter:drop-shadow(0 30px 30px rgba(0,0,0,.45))}
.bt-cap{display:block;width:34px;height:36px;border-radius:9px 9px 4px 4px;background:linear-gradient(90deg,color-mix(in srgb,var(--cap) 70%,#000),var(--cap) 40%,color-mix(in srgb,var(--cap) 60%,#fff) 70%,color-mix(in srgb,var(--cap) 75%,#000))}
.bt-neck{display:block;width:46px;height:12px;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.35),rgba(0,0,0,.18)),var(--tint);border-radius:2px}
.bt-body{position:relative;width:100%;border-radius:22px 22px 26px 26px;background:linear-gradient(90deg,color-mix(in srgb,var(--tint) 72%,#000) 0%,var(--tint) 28%,color-mix(in srgb,var(--tint) 85%,#fff) 46%,var(--tint) 62%,color-mix(in srgb,var(--tint) 70%,#000) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);display:grid;place-items:center;overflow:hidden;transition:box-shadow .4s var(--ease)}
.bt-gloss{position:absolute;left:16%;top:6%;width:14%;height:80%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.08));filter:blur(.6px)}
.bt-label{width:76%;padding:12px 8px;border-radius:8px;background:rgba(255,255,255,.86);color:#08202A;text-align:center;display:grid;gap:4px;box-shadow:0 2px 10px -6px rgba(0,0,0,.4)}
.bt-label b{font:700 12px/1.15 var(--display);letter-spacing:-.02em}
.bt-label span{font-size:10px;line-height:1.25;color:#415A6E}
.bt-shadow{position:absolute;left:10%;right:10%;bottom:-18px;height:18px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.5),transparent 70%)}
.bt-dropper .bt-cap{width:22px;height:54px;border-radius:11px 11px 6px 6px}
.bt-dropper .bt-body{border-radius:16px 16px 30px 30px}
.bt-tall{height:270px}.bt-tall .bt-body{border-radius:14px 14px 18px 18px}
.bt-pump .bt-cap{width:16px;height:30px;border-radius:4px;transform:translateX(16px)}
.bt-pump .bt-cap::after{content:"";position:absolute;left:-26px;top:0;width:30px;height:9px;border-radius:5px;background:inherit}
.bt-pump .bt-neck{width:30px;height:18px}
.bt-tube{height:236px}.bt-tube .bt-cap{width:44px;height:22px;border-radius:6px}.bt-tube .bt-neck{height:6px;width:40px}.bt-tube .bt-body{border-radius:12px 12px 36px 36px / 12px 12px 20px 20px}
/* the read-out under the product: the app's verdict */
.sp-read{display:grid;gap:8px;padding:16px 16px 14px;border-radius:22px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#DCE9EE;min-height:188px}
.sp-verdict{justify-self:start;padding:6px 12px;border-radius:999px;font:700 13px/1 var(--text);letter-spacing:.01em}
.v-good .sp-verdict{background:rgba(95,227,227,.18);color:#7AF0F0;box-shadow:inset 0 0 0 1px rgba(122,240,240,.4)}
.v-care .sp-verdict{background:rgba(255,196,92,.16);color:#FFD27A;box-shadow:inset 0 0 0 1px rgba(255,210,122,.4)}
.v-no .sp-verdict{background:rgba(255,120,120,.16);color:#FF9B9B;box-shadow:inset 0 0 0 1px rgba(255,155,155,.4)}
.v-unknown .sp-verdict{background:rgba(255,255,255,.1);color:#fff}
.sp-reason{font-size:14px;line-height:1.45;color:#EAF4F6}
.sp-matters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:#9FB7C4}
.sp-matters b{padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-weight:600;font-size:12px}
.sp-src{font-size:11px;color:#7F97A5}.sp-src a{color:#7AF0F0}
.sp-you{max-width:var(--wrap);margin:clamp(28px,4vw,48px) auto 0;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 40px;align-items:center}
.sp-profile{grid-column:1 / -1;font-size:15px;color:rgba(255,255,255,.72)}
.sp-knows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sp-knows li{display:grid;gap:4px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sp-knows b{color:#7AF0F0;font-size:14px}.sp-knows span{font-size:13.5px;line-height:1.4;color:#C9DAE2}
.sp-cta{justify-self:end}
.sp-fine{max-width:var(--wrap);margin:22px auto 0;padding:0 var(--gut);color:rgba(255,255,255,.5)}
.trends.is-pinned.spot .tr-track{height:calc(100vh + var(--steps,6) * 56vh)}
.trends.is-pinned.spot .sp-stage{height:min(280px,30vh)}
.trends.is-pinned.spot .tr-pin{padding-top:104px}
.spot .sp-you{margin-top:clamp(36px,5vw,64px)}
@media (max-width:860px){.sp-knows{grid-template-columns:1fr}.sp-you{grid-template-columns:1fr}.sp-cta{justify-self:start}.sp-crescent{top:62%}}
@media (prefers-reduced-motion:reduce){.sp-card.lit .bt,.sp-beam{animation:none}.sp-card{transform:none;opacity:1}}

.also{max-width:var(--wrap);margin:26px auto 0;padding:0 var(--gut);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.also-h{font:600 13px/1 var(--text);color:var(--soft);margin-right:6px}
.also ul{list-style:none;margin:0;padding:0;display:contents}
.also li{padding:8px 13px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(8,32,42,.08);font-size:13.5px;color:var(--ink)}

/* ---- inner pages (round 18): legal, help, accuracy and the skin library, in the home page's look ---- */
.doc-page{background:#fff}
.doc-wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bar nav a[aria-current="page"]{background:var(--tint);color:var(--accentInk)}
.doc-hero{padding:150px 0 48px;background:radial-gradient(70% 120% at 85% 0%,rgba(0,152,168,.14),transparent 60%),linear-gradient(180deg,var(--bg2),#fff)}
.doc-trail{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--soft);margin-bottom:18px}
.doc-trail a{color:var(--soft);text-decoration:none}.doc-trail a:hover{color:var(--accentInk)}
.doc-trail i{font-style:normal;opacity:.4}
.doc-hero h1{font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.04em;max-width:16ch}
.doc-lead{margin-top:20px;font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--soft);max-width:62ch}
.doc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.doc-chips span{font-size:13px;font-weight:600;color:var(--accentInk);background:var(--tint);padding:7px 12px;border-radius:999px}
.doc-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;padding-top:40px;padding-bottom:40px;align-items:start}
.doc-toc{position:sticky;top:110px;font-size:14px}
.doc-toc p{font:600 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:12px}
.doc-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.doc-toc li a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--soft);text-decoration:none;line-height:1.35}
.doc-toc li a:hover{color:var(--ink);border-left-color:var(--accent)}
.doc-article{max-width:720px}
.doc-key{background:linear-gradient(135deg,#064F66,#007C89);color:#EAF7F8;border-radius:26px;padding:30px 32px;margin-bottom:28px;box-shadow:0 30px 60px -36px rgba(6,79,102,.6)}
.doc-key h2{color:#fff;font-size:26px;margin-bottom:10px}
.doc-key p,.doc-key li{color:#EAF7F8}.doc-key a{color:#9FF5F2}
.doc-key .doc-list li::before{background:#9FF5F2}
.doc-key .doc-list li,.doc-key p{color:#EAF7F8}
.doc-sec{padding:30px 0;border-top:1px solid var(--line);scroll-margin-top:100px}
.doc-sec:first-of-type{border-top:0}
.doc-sec h2{font-size:clamp(24px,2.6vw,30px);line-height:1.15;letter-spacing:-.025em;margin-bottom:12px}
.doc-sec p{color:var(--soft);margin:10px 0;line-height:1.7}
.doc-list{list-style:none;margin:12px 0;padding:0}
.doc-list li{position:relative;padding:6px 0 6px 26px;color:var(--soft);line-height:1.65}
.doc-list li::before{content:"";position:absolute;left:4px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.doc-article table{border-collapse:collapse;width:100%;font-size:15px;margin:16px 0}
.doc-article .tw{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.doc-article th,.doc-article td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.doc-article th{font:600 13px/1.3 var(--text);color:var(--soft);background:var(--bg2)}
.doc-article tr:last-child td{border-bottom:0}
.doc-limits{margin-top:16px;padding:18px 20px;border-radius:16px;background:var(--cautionTint)}
.doc-limits-h{font:600 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--caution);margin-bottom:6px}
.doc-limits p{color:var(--ink);margin:6px 0}
.doc-cta{padding:30px 0 90px}
.doc-cta-card{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between;padding:40px;border-radius:30px;background:radial-gradient(80% 140% at 100% 0%,rgba(46,230,214,.25),transparent 60%),var(--navy);color:#EAF4F6}
.doc-cta-card h2{color:#fff;font-size:clamp(26px,3.2vw,38px);margin:14px 0 8px;max-width:20ch}
.doc-cta-card p{color:#B9CDD4;max-width:52ch}
.doc-foot .foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;margin-bottom:28px}
.doc-foot .foot-tag{margin-top:12px;color:var(--soft)}
.doc-foot .foot-h{font:600 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.doc-foot ul{list-style:none;margin:0;padding:0}.doc-foot li{margin:8px 0}
.doc-foot li a{color:var(--soft);text-decoration:none}.doc-foot li a:hover{color:var(--accentInk)}
.doc-foot .foot-note{border-top:1px solid var(--line);padding-top:20px;max-width:80ch}
/* library index */
.lib-tools{position:sticky;top:84px;z-index:5;padding:20px 0 14px;background:linear-gradient(#fff 80%,rgba(255,255,255,0))}
.lib-search input{width:100%;height:58px;border-radius:999px;border:0;padding:0 24px;font:500 17px var(--text);color:var(--ink);background:var(--bg2);box-shadow:inset 0 0 0 1.5px var(--line)}
.lib-search input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent);background:#fff}
.lib-chips{display:flex;gap:8px;overflow-x:auto;padding:14px 0 4px;scrollbar-width:none}
.lib-chips button{flex:none;border:0;cursor:pointer;font:600 14px/1 var(--text);color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1.5px var(--line2);padding:10px 16px;border-radius:999px;transition:background .2s,color .2s}
.lib-chips button.on{background:var(--ink);color:#fff;box-shadow:none}
.lib-grid{list-style:none;margin:10px 0 40px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lib-grid li[hidden]{display:none}
.lib-grid a{display:flex;flex-direction:column;gap:8px;height:100%;padding:22px;border-radius:22px;background:var(--bg2);text-decoration:none;color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s}
.lib-grid a:hover{transform:translateY(-3px);background:#fff;box-shadow:0 22px 40px -26px rgba(8,32,42,.35),inset 0 0 0 1.5px var(--line)}
.lib-grid b{font:600 20px/1.2 var(--display);letter-spacing:-.02em}
.lib-grid a>span:last-child{font-size:15px;line-height:1.5;color:var(--soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lib-tag{align-self:flex-start;font:600 11px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--tint);color:var(--accentInk)}
.lib-g-get-care-soon{background:rgba(192,38,45,.1);color:#9F1D22}
.lib-g-infections{background:rgba(124,58,237,.1);color:#5B21B6}
.lib-g-sun-and-color{background:rgba(217,119,6,.12);color:#8A4B06}
.lib-empty{padding:30px;text-align:center;color:var(--soft)}
/* library page */
.lib-wrap{padding-top:36px;padding-bottom:20px}.lib-wrap>*{max-width:760px}
.lib-short{padding:26px 28px;border-radius:24px;background:var(--tint);margin-bottom:22px}
.lib-short p:last-child{font:500 20px/1.5 var(--display);letter-spacing:-.01em;color:var(--ink)}
.lib-k{font:600 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--accentInk);margin-bottom:10px}
.lib-sec{padding:24px 26px;border-radius:24px;background:var(--bg2);margin:14px 0}
.lib-sec h2{display:flex;align-items:center;gap:12px;font-size:22px;letter-spacing:-.02em;margin-bottom:6px}
.lib-sec h2 small{margin-left:auto;font:600 13px/1 var(--text);color:var(--soft)}
.lib-ic{width:34px;height:34px;border-radius:11px;flex:none;background:var(--tint) center/18px no-repeat}
.lib-ic-dot{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23007C89'/%3E%3C/svg%3E")}
.lib-ic-check{background-color:rgba(11,122,83,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7A53' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.lib-ic-cross{background-color:rgba(138,90,18,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5A12' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")}
.lib-ic-alert{background-color:rgba(192,38,45,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0262D' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E")}
.lib-ic-pin{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007C89' stroke-width='2.2'%3E%3Cpath d='M12 21s7-6.2 7-11.5a7 7 0 10-14 0C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.lib-emergency{background:rgba(192,38,45,.06);box-shadow:inset 0 0 0 1.5px rgba(192,38,45,.2)}
.lib-sec ul{list-style:none;margin:0;padding:0}
.lib-sec li{position:relative;padding:14px 0 14px 30px;border-top:1px solid var(--line)}
.lib-sec li:first-child{border-top:0}
.lib-sec li::before{content:"";position:absolute;left:6px;top:23px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.lib-sec li.m-check::before{width:12px;height:7px;border-radius:0;background:none;border-left:2.6px solid #0B7A53;border-bottom:2.6px solid #0B7A53;transform:rotate(-45deg);left:4px;top:20px}
.lib-sec li.m-cross::before{background:#8A5A12;border-radius:2px;width:11px;height:2.6px;transform:rotate(45deg);top:25px}
.lib-sec li.m-alert::before{background:#C0262D}
.lib-sec li p{color:var(--ink);line-height:1.65}
.lib-src{display:inline-block;margin-top:6px;font:600 12px/1 var(--text);color:var(--soft);background:#fff;padding:5px 9px;border-radius:999px}
.lib-sources{padding:28px 0;border-top:1px solid var(--line);margin-top:20px}
.lib-sources h2{font-size:22px;margin-bottom:10px}
.lib-sources ul{margin:0;padding-left:18px;color:var(--soft)}.lib-sources li{margin:6px 0}
.lib-sources p{margin:10px 0;color:var(--soft)}
@media (max-width:980px){.doc-grid{grid-template-columns:1fr;gap:10px}.doc-toc{display:none}.lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.doc-foot .foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.lib-grid{grid-template-columns:1fr}.doc-hero{padding-top:120px}.doc-key{padding:24px}.doc-cta-card{padding:28px}.lib-sec{padding:20px}.doc-foot .foot-grid{grid-template-columns:1fr}}