/* =========================================================
   FaceUpper — product pages (Starter, Platinum, Elite, Reset 7,
   Express Routine, Face & Body Glow, 360°).
   Ported from the claude.ai/design project on 2026-09-20.

   NOTE on the :root block below: it repeats the Aga Nowak kit with
   slightly different tints from css/branding-kit.css, and crucially
   sets --fu-bone-50 to cream (#F5F2EB) rather than white, which is
   what makes .card / .pan read cream on these pages. It is kept as
   designed so the pages render exactly as approved. Reconciling it
   with branding-kit.css is a follow-up — see .design-sync/NOTES.md.
   ========================================================= */
:root{--pad:clamp(18px,4vw,56px);
 /* Aga Nowak branding kit */
 --fu-bloom-50:#FBF3F0;--fu-bloom-100:#F6E5DF;--fu-bloom-200:#EFCEC4;--fu-bloom-300:#E1AA9A;--fu-bloom-400:#C6867C;--fu-bloom-500:#764248;--fu-bloom-600:#5E353A;--fu-bloom-700:#4A2A2E;
 --fu-bg:#F5F2EB;--fu-bone-50:#F5F2EB;--fu-bone-100:#EFEBE2;--fu-surface:#FFFFFF;--fu-accent:#764248;--fu-clay-500:#A48B66}
.vid{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--fu-radius-xl);overflow:hidden;background:var(--fu-ink-900);box-shadow:var(--fu-shadow-md)}
.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid__p{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;background:rgba(255,255,255,.92);transition:transform 200ms var(--fu-ease-out)}
.vid__p::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:13px 0 13px 20px;border-color:transparent transparent transparent var(--fu-bloom-500)}
.vid:hover .vid__p{transform:scale(1.07)}
.vid__l{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fu-bg);color:var(--fu-text);font-family:var(--fu-font-sans)}
main{overflow-x:hidden}
a{color:var(--fu-ink-900);text-decoration:none}
a:hover{color:var(--fu-bloom-600)}
:focus-visible{outline:2px solid var(--fu-bloom-500);outline-offset:3px;border-radius:8px}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--fu-font-display);font-weight:400;margin:0;letter-spacing:-.015em}
h1 em,h2 em,h3 em{font-style:italic}
p{text-wrap:pretty}
.eyebrow{font-family:var(--fu-font-sans);font-size:var(--fu-text-3xs);letter-spacing:.22em;text-transform:uppercase;color:var(--fu-bloom-600);margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:820px}
/* hero */
.phero{position:relative;min-height:min(760px,100svh);display:grid;place-items:center;overflow:hidden;isolation:isolate;background:var(--fu-cream-100)}
.phero__bg{position:absolute;inset:-6%;z-index:-2}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;animation:pdrift 22s ease-in-out infinite alternate;will-change:transform}
@keyframes pdrift{from{transform:scale(1.04) translate3d(-1%,.5%,0)}to{transform:scale(1.11) translate3d(1.2%,-1.4%,0)}}
.phero.paused .phero__bg img{animation-play-state:paused}
.veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(64% 52% at 50% 52%,rgba(250,247,244,.9),rgba(250,247,244,.56) 60%,rgba(250,247,244,.3) 82%),linear-gradient(to bottom,rgba(250,247,244,.6),rgba(250,247,244,.1) 30%,rgba(250,247,244,.2) 62%,rgba(250,247,244,.86) 96%)}
.phero__in{position:relative;z-index:2;text-align:center;padding:clamp(104px,13vh,152px) var(--pad) clamp(92px,12vh,140px);max-width:900px}
.phero h1{margin:16px auto 0;font-size:clamp(38px,4.6vw,70px);line-height:1.05;max-width:16ch}
.lede{margin:20px auto 0;max-width:50ch;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.62;color:var(--fu-ink-700)}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.facts span{display:inline-flex;align-items:center;height:32px;padding:0 14px;border:1px solid var(--fu-border-strong);border-radius:var(--fu-radius-pill);background:rgba(250,247,244,.76);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fu-ink-800)}
.cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:30px}
.cta .fu-btn{transition:transform 180ms var(--fu-ease-out),box-shadow 180ms var(--fu-ease-out),background 180ms var(--fu-ease-out),color 180ms var(--fu-ease-out)}
.cta .fu-btn:hover{transform:translateY(-2px);box-shadow:var(--fu-shadow-md)}
.cta .fu-btn--primary:hover,.cta .fu-btn--primary:focus-visible,.cta .fu-btn--primary:active{color:var(--fu-text-invert)}
.btn-soft{background:rgba(250,247,244,.86);border:1px solid var(--fu-border-strong);color:var(--fu-ink-900);backdrop-filter:blur(6px)}
.btn-soft:hover{background:var(--fu-bone-50);color:var(--fu-bloom-600)}
.price{margin:18px 0 0;font-family:var(--fu-font-sans);font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:.08em;color:var(--fu-ink-700)}
.price b{font-weight:500;color:var(--fu-ink-900)}
.btn-buy{background:var(--fu-bloom-500);border-color:var(--fu-bloom-500);color:var(--fu-text-invert)}
.btn-buy:hover,.btn-buy:focus-visible,.btn-buy:active{background:var(--fu-bloom-600);border-color:var(--fu-bloom-600);color:var(--fu-text-invert)}
.motion{position:absolute;right:var(--pad);bottom:clamp(96px,11vw,150px);z-index:4;height:34px;padding:0 14px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.curve{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(52px,7vw,112px);display:block;z-index:3}
/* sections */
.sec{padding:clamp(52px,6.5vw,96px) 0}
.sec--band{background:var(--fu-bloom-50)}
.sec--cream{background:var(--fu-cream-100)}
.sec--mist{background:var(--fu-mist-200)}
.sec[id]{scroll-margin-top:80px}
.head{max-width:760px}
.head--c{margin-left:auto;margin-right:auto;text-align:center}
.head h2{margin:14px 0 0;font-size:clamp(28px,3vw,48px);line-height:1.08}
.head p{margin:18px 0 0;max-width:58ch;color:var(--fu-ink-700);font-size:clamp(15px,1.05vw,16.5px);line-height:1.62}
.head--c p{margin-left:auto;margin-right:auto}
.prose{max-width:62ch;margin:clamp(24px,3vw,40px) 0 0;display:grid;gap:16px}
.head--c+.prose{margin-left:auto;margin-right:auto}
.prose p{margin:0;color:var(--fu-ink-700);font-size:clamp(15px,1.05vw,16.5px);line-height:1.68}
.prose p strong{color:var(--fu-ink-900);font-weight:500}
/* split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,34px);align-items:stretch;margin-top:clamp(28px,3.6vw,52px)}
.split--flip>.media{order:2}
.media{border-radius:clamp(26px,3vw,44px);overflow:hidden;min-height:clamp(260px,26vw,380px);background:var(--fu-cream-100)}
.media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 900ms var(--fu-ease-out)}
.media.in img{transform:scale(1)}
/* A video in the split keeps its 16:9 frame instead of stretching to the text column, so nothing is cropped. */
.media--video{min-height:0;align-self:center;aspect-ratio:16/9;background:var(--fu-ink-900)}
.media video{display:block;width:100%;height:100%;object-fit:cover}
.pan{border-radius:clamp(26px,3vw,44px);padding:clamp(24px,2.8vw,42px);display:flex;flex-direction:column;justify-content:center;background:var(--fu-bone-50);border:1px solid var(--fu-border)}
.pan--bloom{background:var(--fu-bloom-50);border-color:transparent}
.pan--sage{background:var(--fu-sage-100);border-color:transparent}
.pan h3{font-size:clamp(21px,1.9vw,30px);margin:10px 0 0}
.pan p{margin:14px 0 0;color:var(--fu-ink-700);font-size:15.5px;line-height:1.64}
.pan__cta{margin-top:clamp(22px,2.4vw,30px)}
.pan__cta .fu-btn{transition:transform 180ms var(--fu-ease-out),box-shadow 180ms var(--fu-ease-out)}
.pan__cta .fu-btn:hover{transform:translateY(-2px);box-shadow:var(--fu-shadow-md)}
/* lists */
.checks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.checks li{position:relative;padding-left:26px;color:var(--fu-ink-700);font-size:15.5px;line-height:1.55}
.checks li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--fu-bloom-400)}
.checks--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px clamp(18px,2vw,32px)}
/* cards */
.cards{display:grid;gap:clamp(14px,1.8vw,24px);margin-top:clamp(28px,3.6vw,52px)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:flex;flex-direction:column;border-radius:clamp(22px,2.4vw,34px);overflow:hidden;background:var(--fu-bone-50);border:1px solid var(--fu-border)}
.card--tint{background:var(--fu-bloom-50);border-color:transparent}
.card--cream{background:var(--fu-cream-100);border-color:transparent}
.card__media{aspect-ratio:4/3;overflow:hidden;background:var(--fu-mist-200)}
.card__media img{width:100%;height:100%;object-fit:cover;object-position:var(--photo-position,50% 50%)}
.card__media--sq{aspect-ratio:1/1}
.cards--tiles .checks{gap:6px;margin-top:12px}
.cards--tiles .checks li{font-size:14.5px}
.card__in{padding:clamp(20px,2.1vw,30px);display:flex;flex-direction:column;flex:1 1 auto}
.card h3{font-size:clamp(19px,1.5vw,24px);margin:9px 0 0}
.card p{margin:11px 0 0;color:var(--fu-ink-700);font-size:15px;line-height:1.6}
.card .num{font-family:var(--fu-font-display);font-size:13px;letter-spacing:.14em;color:var(--fu-bloom-600)}
.card__cta{margin-top:auto;padding-top:clamp(16px,1.8vw,22px);display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
/* steps */
.steps{display:grid;gap:clamp(10px,1.2vw,16px);margin-top:clamp(28px,3.6vw,52px)}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,30px);align-items:start;padding:clamp(18px,2vw,28px);border-radius:clamp(20px,2.2vw,30px);background:var(--fu-bone-50);border:1px solid var(--fu-border)}
.step__n{font-family:var(--fu-font-display);font-size:clamp(22px,2.2vw,32px);line-height:1;color:var(--fu-bloom-500);min-width:2.4ch}
.step h3{font-size:clamp(18px,1.5vw,23px)}
.step p{margin:9px 0 0;color:var(--fu-ink-700);font-size:15.5px;line-height:1.62;max-width:62ch}
/* quote */
.quote,.product-quote{margin:clamp(28px,3.6vw,52px) auto 0;max-width:46ch;text-align:center;font-family:var(--fu-font-display);font-size:clamp(21px,2.1vw,31px);line-height:1.32;color:var(--fu-ink-900)}
.quote small,.product-quote small{display:block;margin-top:16px;font-family:var(--fu-font-sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fu-text-muted)}
/* testimonials */
.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-top:clamp(28px,3.6vw,52px)}
.tgrid img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--fu-radius-xl);border:1px solid var(--fu-border);background:var(--fu-bone-50)}
/* access */
.access{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px);margin-top:clamp(26px,3vw,42px)}
.access div{display:grid;gap:12px;justify-items:center;text-align:center}
.access img{width:52px;height:52px;object-fit:contain;opacity:.85}
.access p{margin:0;font-size:15px;line-height:1.55;color:var(--fu-ink-700);max-width:26ch}
/* faq */
.faq{max-width:820px;margin:clamp(26px,3vw,44px) auto 0;display:grid;gap:8px}
.faq details{border:1px solid var(--fu-border);border-radius:var(--fu-radius-xl);background:var(--fu-bone-50);padding:0 clamp(18px,2vw,26px)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--fu-font-display);font-size:clamp(17px,1.4vw,21px);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--fu-font-sans);font-size:19px;color:var(--fu-bloom-500);transition:transform 200ms var(--fu-ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 20px;color:var(--fu-ink-700);font-size:15.5px;line-height:1.64;max-width:64ch}
.pc__ex{font-size:14px;color:var(--fu-bloom-500);text-decoration:none}
.pc__ex:hover{color:var(--fu-bloom-600)}
/* closing */
.end{text-align:center}
.end h2{font-size:clamp(30px,3.3vw,52px);line-height:1.06;margin:14px 0 0}
.end p{margin:18px auto 0;max-width:52ch;color:var(--fu-ink-700);font-size:clamp(15px,1.1vw,17px);line-height:1.62}
/* footer */
.ft{border-top:1px solid var(--fu-border);padding:clamp(34px,4vw,56px) 0 calc(clamp(44px,5vw,72px) + 84px);background:var(--fu-bg)}
.ft__in{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:baseline;justify-content:space-between}
.ft a{font-size:14px;color:var(--fu-ink-700)}
.ft a:hover{color:var(--fu-bloom-600)}
.ft nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.ft small{display:block;margin-top:20px;font-size:12.5px;line-height:1.6;color:var(--fu-text-muted)}
/* sticky buy bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,24px);padding:12px var(--pad);background:rgba(250,247,244,.94);backdrop-filter:blur(10px);border-top:1px solid var(--fu-border);transform:translateY(110%);transition:transform 260ms var(--fu-ease-out)}
.bar.show{transform:none}
.bar__t{font-family:var(--fu-font-display);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar__p{font-variant-numeric:tabular-nums;font-size:14.5px;color:var(--fu-ink-700);white-space:nowrap}
.bar .fu-btn{white-space:nowrap}
.bar .fu-btn--primary:hover,.bar .fu-btn--primary:focus-visible{color:var(--fu-text-invert)}
/* reveals */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity 760ms var(--fu-ease-out),transform 760ms var(--fu-ease-out),filter 760ms var(--fu-ease-out)}
.js .rv--blur{filter:blur(7px)}
.js .rv.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1!important;transform:none!important;filter:none!important}.phero__bg img{animation:none}}
@media (max-width:1080px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}.cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}.crow{grid-template-columns:minmax(0,1fr) auto;gap:8px 18px}.crow p{grid-column:1/-1}}
@media (max-width:760px){
.split,.cards--2,.cards--3,.cards--4,.access,.checks--2{grid-template-columns:1fr}
.split--flip>.media{order:0}
.media{min-height:230px}
.media--video{min-height:0}
.phero__in{padding-top:118px}
.motion{left:50%;right:auto;transform:translateX(-50%)}
.motion:hover{transform:translateX(-50%) translateY(-1px)}
.step{grid-template-columns:1fr;gap:6px}
.bar__t{display:none}
.cta .fu-btn,.pan__cta .fu-btn{width:100%;justify-content:center}
.ft__in{flex-direction:column}
}

/* Inline intro video (owned asset) — replaces the click-through thumbnail. */
video.vid { width: 100%; height: auto; }
.vid__credit { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--fu-text-muted); }
.vid__credit a { color: var(--fu-bloom-600); border-bottom: 1px solid var(--fu-border-strong); }
/* Square photo tiles (Pro · Star programmes): four-up on desktop; below that each tile turns into a
   small square photo beside its list, two-up on tablets and one-up on phones */
@media (max-width:1080px){.cards--tiles .card{flex-direction:row}.cards--tiles .card__media{flex:0 0 38%;align-self:flex-start}.cards--tiles .card__in{padding:16px 18px}.cards--tiles .card h3{margin-top:4px}}
@media (max-width:760px){.cards.cards--tiles{grid-template-columns:1fr}.cards--tiles .card__media{flex-basis:36%}}