/* /go showpiece screens: welcome card, scanning loaders, axis meters, the Skin ID ceremony,
   the 16-type grid, the birth-year picker and the continuous progress bar. Loads after
   funnel.css and experience.css and reuses their tokens (--green, --mint, --peach, --card). */

/* Progress: one segment per section */
.progress .segment i{transition:width .6s cubic-bezier(.2,.7,.2,1)}

/* Welcome */
.page[data-screen=welcome]{padding-top:10px}
.page[data-screen=welcome] .eyebrow{margin:0 0 2px;font-size:12px;letter-spacing:.08em;font-weight:600}
.page[data-screen=welcome] h1{margin:4px 0 8px;font-size:clamp(27px,7vw,36px);line-height:1.35}
.page[data-screen=welcome] h1+.lead{margin:0 0 16px;font-size:15px;line-height:1.7}
.page[data-screen=welcome] .lead{margin:0 0 6px;font-size:14px}
.phrase{display:inline-block}
.stage-bar{width:min(100%,280px);margin:18px auto 0}
.top .section-title{grid-column:2;justify-self:center;margin:0;font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--green);text-align:center}
.welcome-intro{margin:0 0 10px;font-size:15px;font-weight:600;line-height:1.55;color:var(--text)}
.id-card{position:relative;display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;padding:16px;margin:6px 4px 18px;border-radius:24px;background:linear-gradient(135deg,#fffdf8 0%,#f3eee3 100%);border:1px solid var(--line);box-shadow:0 18px 40px #1d4b3a1f,inset 0 1px 0 #fff;overflow:hidden;transform:rotate(-1.5deg)}
.id-shine{position:absolute;top:-60%;bottom:-60%;left:-30%;width:60%;background:linear-gradient(105deg,transparent 35%,#ffffff8c 50%,transparent 65%);transform:skewX(-12deg) translateX(-120%);animation:shine 4.2s ease-in-out 1s infinite;pointer-events:none}
@keyframes shine{0%{transform:skewX(-12deg) translateX(-120%)}45%,100%{transform:skewX(-12deg) translateX(320%)}}
.id-face{width:104px;height:104px;border-radius:50%;background:var(--mint);display:grid;place-items:center;overflow:hidden}
.id-face img{width:92px;height:92px;object-fit:contain}
.id-face.swap img{animation:faceIn .6s cubic-bezier(.2,.9,.2,1)}
@keyframes faceIn{from{opacity:0;transform:scale(.6) translateY(10px)}}
.id-body{display:grid;gap:3px;min-width:0}
.id-label{font-size:10px;letter-spacing:.22em;color:var(--muted);font-weight:700}
.id-name{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.id-tiles{margin:6px 0 0;justify-content:flex-start;gap:6px}
.id-tiles .tile{width:36px;height:40px;font-size:18px;border-radius:9px}
.id-tiles .tile.deal{animation:dealIn .5s cubic-bezier(.3,1.4,.5,1) backwards;background:var(--green);color:#fff}
@keyframes dealIn{from{opacity:.25;transform:scale(.6) rotate(-8deg)}}
.stats{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats li{display:grid;justify-items:center;gap:1px;padding:10px 6px;border-radius:14px;background:var(--card);border:1px solid var(--line);animation:optIn .4s ease-out backwards}
.stats strong{font-size:20px;color:var(--green);letter-spacing:-.02em;line-height:1.2}
.stats span{font-size:11px;color:var(--muted)}
.welcome-points{margin:10px 0 0}
.welcome-points .fact{font-size:14px}

/* Skin ID intro axes settle in one after another */

/* Stage loaders: scanning face + letters found so far */
.scan{position:relative;margin:2px auto 12px;max-width:250px}
.scan svg{display:block;width:100%;height:auto}
.scan-face{fill:#fbefe6;stroke:#d9b9a3;stroke-width:1.4}
.scan-line{fill:none;stroke:var(--peach-ink);stroke-width:1.6;stroke-linecap:round;opacity:.55}
.scan-grid path{fill:none;stroke:var(--green);stroke-width:.6;opacity:.16}
.scan-corners path{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round}
.scan-beam,.scan-edge{animation:beam 2.6s ease-in-out infinite}
.scan-edge{stroke:var(--green);stroke-width:2;opacity:.85}
@keyframes beam{0%{transform:translateY(0)}50%{transform:translateY(132px)}100%{transform:translateY(0)}}
.scan-dot{fill:var(--green);opacity:0;animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{opacity:0}12%{opacity:1}45%{opacity:.35}100%{opacity:0}}

/* Axis meter */
.meter{margin:16px 0 4px;animation:enter .5s ease-out both;animation-delay:var(--d,0s)}
.meter-bar{position:relative;height:10px;border-radius:8px;background:linear-gradient(90deg,#ecd9c7,#d7e8dc)}
.meter-dot{position:absolute;top:50%;left:50%;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;background:var(--green);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 4px 12px #1d4b3a33;transition:left 1.1s cubic-bezier(.3,1.25,.4,1)}
.meter-ends{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:12px;color:var(--muted)}
.meter-end{display:grid;gap:1px}.meter-end.right{text-align:right}
.meter-end b{font-size:14px}.meter-end.on{color:var(--green);font-weight:600}
.page[data-kind=reveal] .tiles{margin:22px 0 8px}

/* The ceremony */
.page[data-kind=ceremony]{text-align:center;padding-top:14px}
.page[data-kind=ceremony]>.eyebrow{font-weight:600;letter-spacing:.04em}
.page[data-kind=ceremony]>.ceremony-tiles{gap:6px;margin:14px 0 4px;animation:none}
.ceremony-cell{display:grid;gap:6px;justify-items:center;width:calc(25% - 5px);animation:enter .5s ease-out backwards;animation-delay:calc(.2s + var(--i) * .45s)}
.ceremony-cell .tile{width:64px;height:72px;font-size:30px}
.page[data-kind=ceremony] .tile.flip{animation-delay:calc(.3s + var(--i) * .45s)}
.ceremony-cell small{font-size:10px;color:var(--muted);line-height:1.3;letter-spacing:-.02em;max-width:100%}
.page[data-kind=ceremony]>.ceremony-hero{position:relative;width:220px;height:220px;margin:10px auto 0;animation:heroIn .9s cubic-bezier(.2,1.25,.3,1) 2.2s backwards}
.ceremony-hero::before{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,#fbefe6 0%,#e0eee5 52%,transparent 72%);animation:glow 3.2s ease-in-out 2.2s infinite}
.ceremony-img{position:relative;display:block;width:196px;height:196px;object-fit:contain;margin:12px auto}
@keyframes heroIn{from{opacity:0;transform:scale(.35) translateY(40px)}}
@keyframes glow{50%{transform:scale(1.07);opacity:.85}}
.spark{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--peach-ink);opacity:0;animation:spark 1.7s ease-out calc(2.5s + var(--t)) infinite}
.spark:nth-child(odd){background:var(--green);width:6px;height:6px;margin:-3px}
@keyframes spark{0%{opacity:0;transform:rotate(var(--a)) translateY(-62px) scale(.4)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-128px) scale(1)}}
.page[data-kind=ceremony]>.ceremony-name{animation:enter .6s ease-out 2.75s backwards}
.ceremony-label{margin:0;font-size:12px;color:var(--muted)}
.page[data-kind=ceremony] h1{margin:2px 0 4px;font-size:clamp(34px,9.5vw,46px);letter-spacing:-.03em;line-height:1.2}
.ceremony-intro{margin:8px auto 0;max-width:30em;font-size:15px;line-height:1.7;color:var(--text)}
.page[data-kind=ceremony]>.ceremony-axes{text-align:left;margin-top:18px;padding:16px 18px 8px;background:var(--card);border:1px solid var(--line);border-radius:20px;animation:enter .6s ease-out 3.2s backwards}
.ceremony-axes h2{margin:0 0 2px;font-size:15px}
.axis-row{display:grid;grid-template-columns:2.6em 1fr;gap:10px;align-items:start}
html[lang=en] .axis-row{grid-template-columns:5.2em 1fr}
html[lang=en] .axis-label{font-size:11px}
.axis-label{font-size:12px;font-weight:700;color:var(--green);padding-top:20px}
.axis-row .meter{margin:12px 0 0}
.axis-row .meter-ends{margin-top:8px;font-size:11px}
.page[data-kind=ceremony]>.goal-answer{text-align:left;margin:16px 0 0;padding:16px 18px;border-radius:20px;background:#fbefe6;border:1px solid #efd6c3;animation:enter .6s ease-out 3.4s backwards}
.goal-answer .goal-chip{margin:0}
.goal-answer-body{margin:10px 0 0;font-size:14px;line-height:1.8}
.goal-answer .disclaimer{margin:8px 0 0}
.page[data-kind=ceremony]>.disclaimer{text-align:left;animation:enter .6s ease-out 3.5s backwards}

/* Community: sixteen skins, one concern */
body:has(.page[data-screen=goal-education]) .progress,
body:has(.page[data-screen=community]) .progress,
body:has(.page[data-screen=reveal-email]) .progress,
body:has(.page[data-screen=moisture_stage_reveal]) .progress,
body:has(.page[data-screen=reactivity_stage_reveal]) .progress,
body:has(.page[data-screen=pigmentation_stage_reveal]) .progress,
body:has(.page[data-screen=aging-reveal]) .progress,
body:has(.page[data-screen=skin-id-reveal]) .progress{display:none}
.page[data-screen=goal-education]{text-align:left}
.page[data-screen=goal-education] h1{margin:0 0 8px;font-size:clamp(23px,6vw,29px)}
.page[data-screen=goal-education] .lead{margin:0 0 18px}
.type-marquee{overflow:hidden;margin:8px -24px 16px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.type-track{display:flex;width:max-content;animation:typeScroll 42s linear infinite}
.type-set{display:flex;gap:12px;flex:none;padding-right:12px}
.type-cell{flex:none;width:calc((100vw - 24px) / 3);max-width:176px;aspect-ratio:4/5;border-radius:22px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.type-cell img{width:100%;height:100%;aspect-ratio:4/5;object-fit:contain}
@keyframes typeScroll{to{transform:translateX(-50%)}}
.type-marquee:hover .type-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.type-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}.type-track{animation:none}}

/* Empathy: keep the closing line reachable above the dock on short screens */
.page[data-kind=empathy] .empathy-art{max-height:170px;object-position:center 22%}
.page[data-kind=empathy] h1{font-size:clamp(23px,6vw,28px);margin:10px 0 8px;line-height:1.45}
.page[data-kind=empathy] .lead{margin:0 0 4px}
.feel{padding:12px 14px}
@media(max-height:760px){.page[data-kind=empathy] .empathy-art{max-height:140px}}

/* Birth year: one snap wheel, selection held in the center band */
.page[data-kind=birth] h1,.page[data-kind=birth] .lead{text-align:center}
.page[data-kind=birth] h1{margin-bottom:8px}
.page[data-kind=birth] .lead{max-width:34em;margin:0 auto 6px;line-height:1.6}
.year-wheel{position:relative;max-width:280px;margin:18px auto 0}
.year-wheel::before{content:"";position:absolute;left:8px;right:8px;top:96px;height:48px;border-radius:16px;background:#e7f2ea;border:1px solid #c9ddd0;pointer-events:none}
.year-scroll{height:240px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;padding:96px 0;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.year-scroll::-webkit-scrollbar{display:none}
.year-row{display:flex;align-items:center;justify-content:center;width:100%;height:48px;margin:0;padding:0;border:0;background:transparent;color:#8d978f;font-size:20px;font-weight:560;letter-spacing:-.02em;scroll-snap-align:center;scroll-snap-stop:normal;border-radius:14px}
.year-row.on{color:var(--green);font-size:32px;font-weight:700}
.year-age{margin:12px 0 0;text-align:center;font-size:16px;font-weight:650;color:var(--green);line-height:1.4}

/* Payment page and email step reuse the skin card; give the personalised title room */
.page[data-kind=email] .skin-card{margin-top:10px}
.page[data-kind=paywall] h1{font-size:clamp(23px,6vw,30px)}

@media(prefers-reduced-motion:reduce){.meter-dot{transition:none}.id-shine,.scan-beam,.scan-edge,.scan-dot,.spark{animation:none}.scan-dot{opacity:.7}}

/* Recommended plan */
.page[data-kind=timeline90] .eyebrow{font-weight:600}
.days-big{margin:4px 0 0;line-height:1}
.days-big strong{font-size:clamp(44px,13vw,64px);font-weight:700;letter-spacing:-.04em;color:var(--green);font-variant-numeric:tabular-nums}
.page[data-kind=timeline90] h1{margin:6px 0 8px}
.page[data-kind=timeline90] .lead{margin:0 0 4px;font-size:17px;line-height:1.45;color:var(--text)}
.page[data-kind=timeline90] .rail{margin-top:28px}
.rail{list-style:none;margin:16px 0 0;padding:0;position:relative}
.rail::before{content:"";position:absolute;left:15px;top:18px;bottom:18px;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--peach),#e0eee5)}
.rail-item{position:relative;display:grid;grid-template-columns:34px 1fr;gap:12px;padding:0 0 18px;animation:enter .5s ease-out backwards;animation-delay:calc(.2s + var(--i) * .15s)}
.rail-dot{position:relative;width:34px;height:34px;border-radius:50%;background:var(--peach-ink);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center;border:3px solid var(--bg);box-shadow:0 0 0 2px var(--peach)}
.rail-text{display:grid;gap:2px;padding-top:4px}
.rail-when{font-size:12px;font-weight:700;color:var(--peach-ink)}
.rail-text strong{font-size:16px;line-height:1.4}
.rail-body{font-size:13px;color:var(--muted);line-height:1.7}

/* Now vs goal look */
.page[data-kind=look-compare] h1{margin:6px 0 10px}
.look-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin:18px 0 8px}
.look-label{margin:0 0 8px;text-align:center;font-size:13px;font-weight:700}
.look-col.now .look-label{color:var(--muted)}
.look-col.goal .look-label{color:var(--green)}
.look-photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;border-radius:16px;background:#fffdf8;border:1px solid var(--line)}
.look-chevron{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:1;width:28px;height:28px;border-radius:50%;background:#fffdf8;border:1px solid var(--line);color:var(--green);font-size:16px;font-weight:700;letter-spacing:-.14em;display:grid;place-items:center;box-shadow:0 4px 12px #1d4b3a14}
.look-metric{margin-top:12px}
.look-metric-name{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.look-metric strong{display:block;font-size:17px;line-height:1.2;margin-bottom:6px}
.look-bar{height:7px;border-radius:99px;background:#e8e6dc;overflow:hidden}
.look-bar i{display:block;height:100%;border-radius:99px;width:0;background:#c9b4a8}
.look-col.goal .look-bar i{background:var(--green)}
.look-col.now .look-metric strong{color:#8a5a4a}
.look-col.goal .look-metric strong{color:var(--green)}
@media(max-width:360px){.look-pair{gap:4px}.look-metric strong{font-size:15px}}

/* Customer voices */
.page[data-kind=voices]{padding-bottom:170px}
.page[data-kind=voices] h1{margin:6px 0 14px;font-size:clamp(22px,6vw,30px)}
.voice-quote,.voice-result{background:#fffdf8;border:1px solid var(--line);border-radius:20px;padding:14px 12px}
.voice-result{margin:0 0 12px}
.page[data-kind=voices] h2{margin:0 0 10px;font-size:18px}
.voice-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.voice-shot{position:relative;margin:0}
.voice-shot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 12%;border-radius:14px;background:#eeeae0}
.voice-shot-label{position:absolute;left:6px;top:6px;padding:3px 8px;border-radius:999px;background:#ffffffee;font-size:11px;font-weight:700;color:var(--text)}
.voice-who{margin:0 0 6px;font-size:15px;font-weight:700}
.voice-story{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.voice-quote{margin:0 0 12px}
.voice-quote-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.voice-quote-head strong{font-size:17px;letter-spacing:.02em}
.voice-verified{display:flex;align-items:center;gap:6px;color:var(--green);font-size:13px;font-weight:650}
.voice-verified .ic{background:#e7f0e4;color:var(--green)}
.voice-stars{margin:6px 0 8px;color:#e0b84c;letter-spacing:.12em;font-size:16px;line-height:1}
.voice-quote>p:last-child{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
@media(min-width:520px){.voice-quote,.voice-result{padding:18px 16px}.voice-shot-label{left:8px;top:8px}}