/* Lash Room academy: the same look as the Lash Room demo (built by build.js from template/base.css + themes/polish-rack.css + polish-sand.css + pop.css + pop-beauty.css + template/soft.css + ambient.css), copied as-is, then the shop/course components at the end. */
/* Shared structure for every client page. Theme files (themes/*.css) set the tokens and add their own decoration. */
:root{
  --bg:#fff; --surface:#fff; --ink:#1a1a1a; --muted:#5c5c5c; --line:#dcdcdc;
  --accent:#1a1a1a; --on-accent:#fff;
  --bar-bg:#1a1a1a; --bar-btn-bg:#fff; --bar-btn-fg:#1a1a1a; --call-bg:#444; --call-fg:#fff;
  --ph-a:#e4e4e4; --ph-b:#ececec; --ph-fg:#555;
  --f-display:system-ui, sans-serif; --f-body:system-ui, sans-serif;
  --radius:6px; --title-size:clamp(36px, 10vw, 56px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:inherit; text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.wrap{
  max-width:1080px; margin-inline:auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.ltr{direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums}

/* demo banner: stays until the client config sets "demo": false */
.demo-banner{background:#FFE27A; color:#2A2300; text-align:center; font-family:var(--f-body); font-size:14px; line-height:1.4; padding:6px 16px}

/* top bar */
.topbar{position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top, 0px)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px}
.logo{font-family:var(--f-display); font-size:28px; line-height:1; text-decoration:none}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px;
  border:2px solid transparent; border-radius:var(--radius);
  font-family:var(--f-body); font-size:16px; font-weight:700; line-height:1.2; text-decoration:none;
}
.btn svg{width:20px; height:20px; flex:none}
.btn-accent{background:var(--accent); color:var(--on-accent)}
.btn-line{border-color:currentColor}
.btn-sm{min-height:40px; padding:0 14px; font-size:15px}

/* photo placeholder */
.ph{
  display:grid; place-content:center; gap:2px; text-align:center; padding:16px;
  background:repeating-linear-gradient(135deg, var(--ph-a) 0 12px, var(--ph-b) 12px 24px);
  color:var(--ph-fg); font-weight:700;
}
.ph small{font-size:13px; font-weight:400}

/* hero */
.hero{padding-block:24px 36px}
.hero-grid{display:grid; gap:22px}
.hero-photo{position:relative}
.hero-photo > img, .hero-photo > .ph{width:100%; aspect-ratio:4/3; object-fit:cover}
.status{
  position:absolute; top:12px; inset-inline-start:12px;
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  background:var(--surface); color:var(--ink); border-radius:999px; font-size:14px; line-height:1.2;
}
.status:empty{display:none}
.status::before{content:""; width:9px; height:9px; border-radius:50%; background:#2E9E5B; flex:none}
.status[data-open="0"]::before{background:#C8352B}
.status b + span::before{content:"·"; margin-inline-end:6px}
.hero-text{display:grid; gap:16px; align-content:start}
.nameplate h1{font-family:var(--f-display); font-size:var(--title-size); line-height:1}
.address{color:var(--muted)}
.lede{font-size:18px; max-width:40ch}
.rating{justify-self:start; display:inline-flex; align-items:baseline; gap:10px; font-weight:800; font-size:18px; text-decoration:none}
.rating span{font-weight:400; font-size:15px; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px}

/* sections */
.section{padding-block:40px}
.section-title{font-family:var(--f-display); font-size:clamp(32px, 8vw, 44px); line-height:1; margin-bottom:20px}
.section-body{display:grid; gap:16px; max-width:640px}

/* price list */
.menu{display:grid}
.menu-row{display:flex; align-items:baseline; gap:16px; padding-block:10px; border-bottom:1px solid var(--line)}
.menu-name{flex:1; min-width:0}
.menu-name small{display:block; font-size:14px; color:var(--muted)}
.menu-dots{display:none}
.menu-price{font-weight:700; white-space:nowrap}
.menu-note{font-size:14px; color:var(--muted)}
.menu-group{margin:14px 0 2px; font-size:14px; font-weight:700; color:var(--muted)}
.menu-group:first-child{margin-top:0}
.by-appointment, .private-note{font-size:17px}
.private-note{color:var(--muted)}
.menu-ask{justify-self:start}

/* reviews: real Google rating + owner-approved quotes */
.score{display:flex; align-items:center; gap:18px}
.score-number{font-family:var(--f-display); font-size:clamp(64px, 18vw, 88px); line-height:.9; color:var(--accent)}
.score-text{display:grid; gap:2px}
.score-stars{color:var(--accent); font-size:22px; letter-spacing:.12em; line-height:1}
/* review cards scroll sideways in a loop; touching or hovering pauses them */
.marquee{
  overflow:hidden; margin-block:24px; padding-block:4px;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track{display:flex; align-items:flex-start; width:max-content; animation:marquee calc(var(--cards) * 7s) linear infinite}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track{animation-play-state:paused}
/* runtime.js takes over the motion when it can: no CSS animation, horizontal drags go to the script */
.marquee.is-scripted{touch-action:pan-y}
.marquee.is-scripted .marquee-track{animation:none; will-change:transform}
/* RTL: the next cards sit to the left, so the row travels right. Half the track = one full set of cards. */
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(50%)} }
.review-card{
  flex:none; width:min(300px, 78vw); margin:0; margin-inline-end:14px; padding:18px;
  display:grid; gap:10px; align-content:start;
  border:1.5px solid var(--line); border-radius:min(var(--radius), 14px); background:var(--surface);
}
.review-card blockquote{margin:0; font-size:16.5px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden}
.review-card figcaption{font-size:14px; color:var(--muted)}
.review-stars{color:var(--accent); letter-spacing:.1em; font-size:15px; line-height:1}
.review-card.is-placeholder{border-style:dashed; background:repeating-linear-gradient(135deg, var(--ph-a) 0 12px, var(--ph-b) 12px 24px); color:var(--ph-fg)}
.review-card.is-placeholder blockquote{font-weight:700}
.review-card.is-placeholder figcaption{color:var(--ph-fg)}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-mask-image:none; mask-image:none; padding-inline:16px}
  .marquee-track{animation:none}
  .marquee-track [aria-hidden="true"]{display:none}
  .review-card{scroll-snap-align:start}
}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px}
.gallery > img, .gallery > .ph{width:100%; aspect-ratio:1; object-fit:cover}
.gallery > .ph{font-size:14px}
.gallery-more{margin-top:16px; font-weight:700}
.gallery-credit{margin-top:10px; font-size:13px; color:var(--muted)}

/* hours */
.hours{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.hours th, .hours td{padding:10px 8px; border-bottom:1px solid var(--line); text-align:start; font-weight:400; vertical-align:top}
.hours td{text-align:end}
.hours tr.closed td{color:var(--muted)}
.hours tr.today th, .hours tr.today td{font-weight:800}
.today-badge{display:inline-block; margin-inline-start:8px; padding:1px 8px; border-radius:3px; background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:700; vertical-align:middle}
.hours-note{font-size:14px; color:var(--muted)}
.facts{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.facts li{padding:4px 14px; border:1.5px solid var(--line); border-radius:999px; font-size:15px; font-weight:600}

/* location */
.map{aspect-ratio:16/10; max-width:100%; background:var(--ph-a); border-radius:var(--radius); overflow:hidden}
.map iframe{display:block; width:100%; height:100%; border:0}
.nav-buttons{display:flex; flex-wrap:wrap; gap:10px}
.nav-buttons .btn{flex:1 1 140px}

/* footer */
.footer{padding-block:32px 28px; border-top:1px solid var(--line); font-size:15px; color:var(--muted)}
.footer .wrap{display:grid; gap:6px; justify-items:start}
.footer strong{font-family:var(--f-display); font-size:24px; font-weight:inherit; color:var(--ink)}
.credit{margin-top:14px; font-size:13px}

/* sticky booking bar (mobile: full width; desktop: floating) */
.bookbar{
  position:fixed; inset-inline:0; bottom:0; z-index:20; display:flex; gap:8px; background:var(--bar-bg);
  padding:8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.bookbar a{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 18px;
  border-radius:var(--radius); font-size:17px; font-weight:800; text-decoration:none;
}
.bookbar svg{width:22px; height:22px; flex:none}
.bookbar-main{flex:1; background:var(--bar-btn-bg); color:var(--bar-btn-fg)}
.bookbar-call{background:var(--call-bg); color:var(--call-fg)}

@media (max-width:899px){
  .hero-actions{display:none} /* the sticky booking bar already carries these on phones */
  .hero-photo > img, .hero-photo > .ph{aspect-ratio:3/2}
}
@media (min-width:700px){
  .gallery{grid-template-columns:repeat(3, 1fr)}
}
@media (min-width:900px){
  body{padding-bottom:0}
  .hero{padding-block:48px 64px}
  .hero-grid{grid-template-columns:1.1fr 1fr; gap:48px; align-items:center}
  .hero-photo > img, .hero-photo > .ph{aspect-ratio:5/4}
  .section{padding-block:64px}
  .split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
  .bookbar{inset-inline:auto 24px; bottom:24px; padding:8px; border-radius:calc(var(--radius) + 8px); box-shadow:0 10px 30px rgba(0,0,0,.18)}
}
/* three photos sit in one row instead of leaving one alone */
.gallery:has(> :nth-child(3):last-child){grid-template-columns:repeat(3, 1fr)}

/* ---- "upgrades" (only on sites whose config sets "upgrades": true) ---- */
/* one sticky booking button on phones: the bottom bar; the top-bar button shows on wide screens only */
@media (max-width:899px){ .has-upgrades .topbar .btn{display:none} }
/* after hours the call button steps aside and WhatsApp leads */
.bookbar.is-closed .bookbar-call{display:none}
/* quick answers under the rating */
.quick{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.quick li{padding:6px 14px; border-radius:999px; background:color-mix(in srgb, var(--accent) 14%, var(--surface)); color:var(--ink); font-size:15px; font-weight:600}
/* review actions: "all reviews" + pause button side by side */
.reviews-actions{display:flex; flex-wrap:wrap; gap:10px}
/* tap-to-load map */
.map-facade{display:grid; place-items:center; background:repeating-linear-gradient(135deg, var(--ph-a) 0 14px, var(--ph-b) 14px 28px)}
.map-facade .btn{background:var(--surface)}
/* FAQ */
.faq{gap:10px}
.faq details{background:var(--surface); border-radius:16px; padding:14px 18px; box-shadow:0 6px 18px color-mix(in srgb, var(--ink) 7%, transparent)}
.faq summary{cursor:pointer; font-weight:700; list-style-position:inside}
.faq details p{margin-top:8px; color:var(--muted)}

/* ---- landing layout ("layout": "landing") ---- */
.hero-landing{padding-block:30px 44px}
.hero-landing .hero-grid{gap:26px}
.hero-landing .hero-text{gap:16px}
.hero-brand{display:flex; flex-direction:column; gap:2px}
.brand-name{font-family:var(--f-display); font-size:24px; line-height:1.15}
.brand-place{font-size:14px; color:var(--muted)}
.hero-headline{font-family:var(--f-display); font-size:clamp(34px, 9.5vw, 60px); line-height:1.08; letter-spacing:-.01em; max-width:16ch}
.hero-sub{font-size:18px; line-height:1.6; color:var(--muted); max-width:42ch}
.hero-cta{display:flex}
.btn-cta{min-height:56px; padding:0 28px; font-size:18px}
.hero-landing .hero-photo > img, .hero-landing .hero-photo > .ph{aspect-ratio:4/5}
/* one orchestrated entrance for the hero copy; the resting state is fully visible */
.hero-landing .hero-text > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-landing .hero-text > :nth-child(2){animation-delay:.08s}
.hero-landing .hero-text > :nth-child(3){animation-delay:.16s}
.hero-landing .hero-text > :nth-child(4){animation-delay:.24s}
.hero-landing .hero-text > :nth-child(5){animation-delay:.32s}
.hero-landing .hero-text > :nth-child(n+6){animation-delay:.4s}
@keyframes rise{from{opacity:0; transform:translateY(10px)}}

.benefits{display:grid; gap:14px}
.benefit{display:grid; gap:8px; align-content:start; background:var(--surface); border-radius:22px; padding:22px}
.benefit h3{font-family:var(--f-display); font-size:22px; line-height:1.2}
.benefit p{color:var(--muted)}
.strip{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 10px; scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip > img, .strip > .ph{flex:0 0 72%; max-width:320px; aspect-ratio:4/5; object-fit:cover; border-radius:22px; scroll-snap-align:start}
.steps{display:grid; gap:12px; margin:0; padding:0; list-style:none}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:2px 16px; align-items:baseline; background:var(--surface); border-radius:22px; padding:18px 20px}
.step-num{grid-row:span 2; font-family:var(--f-display); font-size:32px; line-height:1; color:var(--accent)}
.steps h3{font-size:19px; font-weight:700}
.steps p{color:var(--muted)}
.final-cta{padding-block:56px 64px}
.final-cta .wrap{display:grid; gap:16px; justify-items:center; text-align:center}
.final-cta h2{font-family:var(--f-display); font-size:clamp(28px, 7vw, 44px); line-height:1.15; max-width:20ch}
.final-cta p{color:var(--muted); max-width:40ch}

/* scroll reveal: runtime.js only hides items that are still below the fold, so nothing flashes */
.will-reveal{opacity:0; transform:translateY(18px)}
.is-revealed{transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i, 0) * 90ms)}

@media (min-width:700px){
  .benefits{grid-template-columns:repeat(3, 1fr)}
  .steps{grid-template-columns:repeat(3, 1fr)}
  .strip > img, .strip > .ph{flex-basis:30%}
}
@media (prefers-reduced-motion:reduce){
  .hero-landing .hero-text > *{animation:none}
  .will-reveal{opacity:1; transform:none}
}
/* decorations (glow, swatch cards) may reach past the photo, but never past the screen */
.hero-landing{overflow-x:clip}
/* the top bar already shows the name on phones */
@media (max-width:899px){ .hero-landing .brand-name{display:none} }
/* landing hero on phones: the photo comes right after the headline; the rest follows below it */
@media (max-width:899px){
  .hero-landing .hero-grid{display:flex; flex-direction:column; gap:16px}
  .hero-landing .hero-text{display:contents}
  .hero-landing .hero-brand{order:1}
  .hero-landing .hero-headline{order:2}
  .hero-landing .scribble{order:3}
  .hero-landing .hero-photo{order:4; margin-block:4px 6px}
  .hero-landing .hero-sub{order:5}
  .hero-landing .rating{order:6}
  .hero-landing .quick{order:7}
  .hero-landing .hero-cta{order:8}
  .hero-landing .hero-photo > img, .hero-landing .hero-photo > .ph{aspect-ratio:5/4}
}

/* hand-drawn underline under the landing headline (themes with "scribble": true), drawn once on load */
.scribble{display:block; width:min(250px, 70%); height:18px; margin-top:-8px}
.scribble path{stroke-dasharray:330; stroke-dashoffset:330; animation:draw 1.2s .7s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){ .scribble path{animation:none; stroke-dashoffset:0} }

/* ---- sales page ("landing": { "sales": true }) ----
   A long page that keeps going: every section on its own color band (a pastel, then the page's base,
   alternating), and the button again after the problem, the testimonials and the highlight. Selectors start with .layout-sales so they win over the pop sheets. */
.hero-offer{margin:-4px 0 0; font-size:15px; color:var(--muted)}
@media (max-width:899px){ .hero-landing .hero-offer{order:9} }
/* the offer as a coupon ("landing.offer" given as {word, title, text}), first thing on the page:
   the word on a solid stub, a dashed tear line with two notches, the details beside it; tapping it
   opens the chat */
.offer-card{position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr; align-items:stretch; border-radius:22px; background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:0 16px 30px -20px color-mix(in srgb, var(--pop-btn, var(--accent)) 80%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--pop-btn, var(--accent)) 22%, transparent)}
.offer-word{position:relative; display:grid; place-items:center; padding:18px 26px; background:var(--pop-btn, var(--accent)); color:#fff; font-family:var(--f-display); font-size:40px; line-height:1; border-inline-end:2px dashed rgba(255,255,255,.75)}
.offer-word::before, .offer-word::after{content:""; position:absolute; inset-inline-end:-11px; width:20px; height:20px; border-radius:50%; background:var(--cream, var(--bg))}
.offer-word::before{top:-10px}
.offer-word::after{bottom:-10px}
.offer-text{display:grid; gap:2px; align-content:center; padding:14px 18px}
.offer-text strong{font-size:20px; line-height:1.3}
.offer-text span{font-size:15px; color:var(--muted)}
@media (max-width:899px){ .hero-landing .offer-card{order:1; margin-bottom:4px} }
/* the offer above the headline: a pill that opens the same WhatsApp chat as the main button */
.hero-badge{justify-self:start; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:var(--surface); color:var(--pop-btn, var(--accent)); box-shadow:inset 0 0 0 2px var(--pop-btn, var(--accent)); font-weight:800; font-size:16px; line-height:1.3; text-decoration:none}
.hero-badge::before{content:""; flex:none; width:9px; height:9px; border-radius:50%; background:currentColor}
@media (max-width:899px){ .hero-landing .hero-badge{order:1} }

.layout-sales{--band-a:var(--w-peach, color-mix(in srgb, var(--accent) 10%, var(--surface))); --band-b:var(--w-rose, var(--band-a)); --band-c:var(--w-lilac, var(--band-a))}
.layout-sales #pains, .layout-sales .final-cta{background:var(--band-a)}
.layout-sales #about{background:var(--band-b)}
.layout-sales #gallery{background:var(--band-c)}
.layout-sales #treatments, .layout-sales #reviews, .layout-sales #steps, .layout-sales #faq{background:var(--bg)}
.layout-sales #highlight{background:var(--w-lemon, var(--band-a)); text-align:center}
.layout-sales.is-pop :is(#pains, #about, #highlight, #faq){position:relative; border-radius:36px 36px 0 0; margin-top:-30px; padding-top:70px}
.layout-sales .final-cta .wrap{background:none}
.mid-cta{display:flex; margin-top:28px}
/* the coupon and the button right after the problem ("offer.position": "after-pains") */
.pains-offer{display:grid; gap:16px; margin-top:28px}
.layout-sales .pains-offer .offer-word::before, .layout-sales .pains-offer .offer-word::after{background:var(--band-a)}
/* the coupon opens the page: no name and place line above it (the top bar already shows the name) */
.layout-sales .hero-brand{display:none}

/* the problem as colored tiles, two by two: each a pastel square with a drawn icon in a white
   circle above the line; the turn is her answer, centered, under her round photo. The tiles pop in
   one after another (runtime.js reveals .pains like the other groups). */
.pains{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin:0; padding:0; list-style:none}
.pains li{display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 12px 18px; border-radius:24px; background:var(--w-rose, var(--surface)); text-align:center; font-size:17px; line-height:1.4; font-weight:600}
.pains li:nth-child(4n+2){background:var(--w-mint, var(--surface))}
.pains li:nth-child(4n+3){background:var(--w-lilac, var(--surface))}
.pains li:nth-child(4n+4){background:var(--w-lemon, var(--surface))}
.pain-icon{flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--surface); color:var(--pop-btn, var(--accent)); box-shadow:0 8px 16px -12px rgba(70,60,80,.5)}
.pain-icon svg{width:26px; height:26px}
.pain-dot{flex:none; width:12px; height:12px; border-radius:50%; background:var(--pop-btn, var(--accent))}
.pains-reply{display:grid; justify-items:center; gap:12px; margin-top:30px; text-align:center}
.pains-avatar{width:60px; height:60px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #fff, 0 10px 20px -12px rgba(70,60,80,.6)}
.pains-answer{margin:0; max-width:22ch; font-family:var(--f-display); font-size:clamp(22px, 6.2vw, 30px); line-height:1.3; color:var(--pop-btn, var(--accent))}
@media (min-width:800px){ .pains{grid-template-columns:repeat(4, 1fr)} }
@media (prefers-reduced-motion:no-preference){
  .pains li.will-reveal{transform:translateY(14px) scale(.92)}
  .pains li.is-revealed{transition-timing-function:cubic-bezier(.3,1.5,.5,1)}
}

/* who she is: her photo beside a few short paragraphs */
.about{display:grid; gap:22px}
.about img{width:min(100%, 340px); aspect-ratio:4/5; object-fit:cover; border-radius:28px}
.about-text{display:grid; gap:12px; align-content:start}
.about-text p{font-size:18px; line-height:1.65; max-width:44ch}
@media (min-width:800px){ .about{grid-template-columns:340px 1fr; align-items:center} }

/* what changes: a plain list with the icon beside the text, not centered cards */
.layout-sales .benefits{gap:22px; grid-template-columns:1fr}
.layout-sales .benefit{grid-template-columns:auto 1fr; column-gap:16px; row-gap:4px; background:none; box-shadow:none; padding:0}
.layout-sales .benefit::before{grid-row:span 2; align-self:start; margin:0}
.layout-sales .benefit h3{font-size:21px}

/* testimonials, stacked */
.quotes{display:grid; gap:14px}
.quotes .review-card{width:auto; margin:0}

/* the highlight band: a calm pastel; with "big" set, the figure sits in a round stamp in the button
   color with a dashed ring, tilted a little, above the title */
#highlight{padding-bottom:64px}
#highlight h2{display:grid; justify-items:center; gap:18px; margin-inline:auto; max-width:18ch}
.highlight-title{font-family:var(--f-display); font-size:clamp(28px, 8vw, 44px); line-height:1.15}
.seal{display:flex; flex-direction:column; align-items:center; justify-content:center; width:184px; height:184px; border-radius:50%; background:var(--pop-btn, var(--accent)); color:#fff; outline:2px dashed color-mix(in srgb, var(--pop-btn, var(--accent)) 55%, transparent); outline-offset:9px; rotate:-7deg; box-shadow:0 22px 40px -22px rgba(40,10,25,.6)}
.seal-pre{font-size:22px; font-weight:800; line-height:1}
.seal-big{font-family:var(--f-display); font-size:72px; line-height:1}
#highlight p{margin:14px auto 0; max-width:34ch; font-size:18px; color:var(--muted)}
#highlight .mid-cta{justify-content:center}
@media (prefers-reduced-motion:no-preference){
  #highlight.is-revealed .seal, #highlight .seal{animation:seal-in .9s cubic-bezier(.3,1.6,.5,1) .3s both}
}
@keyframes seal-in{from{scale:.4; rotate:-40deg; opacity:0}}

/* ---- clean page ("clean": true) ----
   Two colors only: a light tint of the site's button color and the page's base, alternating
   (page.js marks the sections band-a / band-b in turn). Clear white blocks, the benefit icon beside
   its text, plain photo frames, one chip color, no doodles mid-page. !important because the pop
   sheets color each section by id. */
.layout-clean{--tint:color-mix(in srgb, var(--pop-btn, var(--accent)) 9%, #fff)}
.layout-clean .band-a{background:var(--tint) !important}
.layout-clean .band-b{background:var(--bg) !important}
.layout-clean .final-cta .wrap{background:none}
.layout-clean .topbar-pop{background:var(--tint)}
.layout-clean .topbar-pop::after{background:var(--pop-btn, var(--accent)); height:2px; animation:none}
.layout-clean .quick li{background:var(--tint) !important}
.layout-clean :is(#treatments, #gallery, #steps, .final-cta)::after{display:none}
.layout-clean .benefit{grid-template-columns:auto 1fr; column-gap:16px; row-gap:4px; text-align:start}
.layout-clean .benefit::before{grid-row:span 2; align-self:start; margin:0}
.layout-clean .strip > img{padding:0 !important; background:none !important; rotate:0deg !important}
/* an empty photo slot keeps its plain striped look, not the pop frame color */
.layout-clean .strip > .ph{rotate:0deg !important; padding:0 !important; background:repeating-linear-gradient(135deg, var(--ph-a) 0 14px, var(--ph-b) 14px 28px) !important; box-shadow:none}

/* the reviews window on clean pages: one white panel, the rating on top, then the review rows;
   empty rows (demos) are dashed and greyed, with empty stars */
.rev-window{background:var(--surface); border-radius:26px; box-shadow:0 18px 36px -26px rgba(60,50,70,.55); overflow:hidden}
.rev-head{display:flex; align-items:center; gap:14px; padding:20px 22px; border-bottom:1px solid var(--line)}
.rev-score{margin:0; font-family:var(--f-display); font-size:46px; line-height:1}
.rev-head-text{display:grid; gap:2px; font-size:15px; color:var(--muted)}
.rev-head-text p{margin:0}
.rev-stars{color:#E9A93B; letter-spacing:2px; font-size:16px}
.rev-head-title{margin:0; font-weight:700; font-size:18px}
.rev-more{margin-inline-start:auto; font-size:15px; font-weight:700; color:var(--pop-btn, var(--accent)); white-space:nowrap}
.rev-list{display:grid; margin:0; padding:6px 0; list-style:none}
.rev{display:grid; grid-template-columns:auto 1fr; gap:12px; padding:16px 22px}
.rev + .rev{border-top:1px solid var(--line)}
.rev-avatar{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--tint, var(--surface)); color:var(--pop-btn, var(--accent)); font-weight:700}
.rev-body p{margin:0}
.rev-name{font-weight:700; font-size:16px}
.rev-row-stars{color:#C9C3CC; letter-spacing:2px; font-size:14px}
.rev-text{margin-top:4px !important; font-size:16px; line-height:1.55}
.rev.is-placeholder .rev-avatar{background:repeating-linear-gradient(135deg, var(--ph-a) 0 6px, var(--ph-b) 6px 12px)}
.rev.is-placeholder .rev-name, .rev.is-placeholder .rev-text{color:var(--ph-fg)}
.rev.is-placeholder .rev-text{border:1.5px dashed color-mix(in srgb, var(--ph-fg) 35%, transparent); border-radius:12px; padding:8px 12px; margin-top:8px !important}

/* Nails, "Polish Rack": a shelf of pastel polishes and a swatch fan, with handwritten notes. Welcomed;
   a hand-drawn underline is drawn under the headline, every treatment wears a color swatch, swatch cards fan out behind the photo. */
:root{
  --cream:#FBF8F4; --lilac:#DCD3EC; --lilac-deep:#6B5C8E; --peri:#A9B6DD; --blush:#EDD3D8; --nude:#E8D9CC; --sage:#CAD8CA; --ink4:#2F2B38;

  --bg:var(--cream); --surface:#FFFFFF; --ink:var(--ink4); --muted:#6F6979; --line:#E8E2EC;
  --accent:var(--lilac-deep); --on-accent:#fff;
  --bar-bg:var(--ink4); --bar-btn-bg:var(--lilac-deep); --bar-btn-fg:#fff; --call-bg:var(--cream); --call-fg:var(--ink4);
  --ph-a:#E9E3F1; --ph-b:#F1EDF6; --ph-fg:#6F6979;
  --f-display:"Suez One", "Alef", serif; --f-body:"Alef", system-ui, sans-serif;
  --radius:999px;
}
.logo{font-weight:400}
.hero-landing{background:linear-gradient(180deg, #F1ECF7 0%, var(--cream) 80%)}
.hero-headline{font-weight:400}
.brand-name{font-weight:400}

/* the hand-drawn underline, drawn once on load */
.scribble{display:block; width:min(250px, 70%); height:18px; margin-top:-8px; color:var(--peri)}
.scribble path{stroke-dasharray:330; stroke-dashoffset:330; animation:draw 1.2s .7s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* swatch cards fanned out behind the photo */
.hero-landing .hero-photo{isolation:isolate}
.hero-landing .hero-photo::before, .hero-landing .hero-photo::after{content:""; position:absolute; z-index:-1; width:46%; height:58%; border-radius:22px}
.hero-landing .hero-photo::before{bottom:-14px; inset-inline-end:-10px; background:var(--lilac); transform:rotate(7deg)}
.hero-landing .hero-photo::after{bottom:-20px; inset-inline-end:14%; background:var(--blush); transform:rotate(-5deg)}
.hero-landing .hero-photo > img, .hero-landing .hero-photo > .ph{border-radius:28px}

/* every treatment wears a swatch */
.menu-row{align-items:center}
.menu-row::before{content:""; flex:none; width:18px; height:18px; border-radius:50%; background:var(--sw, var(--lilac)); box-shadow:inset 0 0 0 1px rgba(47,43,56,.06)}
.menu-row:nth-of-type(5n+1){--sw:var(--lilac)}
.menu-row:nth-of-type(5n+2){--sw:var(--blush)}
.menu-row:nth-of-type(5n+3){--sw:var(--peri)}
.menu-row:nth-of-type(5n+4){--sw:var(--nude)}
.menu-row:nth-of-type(5n+5){--sw:var(--sage)}
.benefit::before{content:""; width:46px; height:28px; border-radius:9px; background:var(--sw, var(--lilac))}
.benefit:nth-child(2)::before{--sw:var(--blush)}
.benefit:nth-child(3)::before{--sw:var(--peri)}
.step-num{color:var(--lilac-deep)}
.final-cta .wrap{background:var(--lilac); border-radius:32px; padding-block:44px}
.final-cta p{color:var(--ink4)}
.review-stars, .score-stars{color:var(--lilac-deep)}
.score-number{color:var(--ink4)}

@media (prefers-reduced-motion:reduce){ .scribble path{animation:none; stroke-dashoffset:0} }

/* ---- more motion: playing with the polish shelf ---- */
@media (prefers-reduced-motion:no-preference){
  /* the swatch cards fan out from behind the photo */
  .hero-landing .hero-photo::before{animation:fanA 1s .5s cubic-bezier(.3,1.5,.5,1) both}
  .hero-landing .hero-photo::after{animation:fanB 1s .65s cubic-bezier(.3,1.5,.5,1) both}
  .hero-landing .quick li{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
  .hero-landing .quick li:nth-child(1){animation-delay:1s}
  .hero-landing .quick li:nth-child(2){animation-delay:1.12s}
  .hero-landing .quick li:nth-child(3){animation-delay:1.24s}
  .final-cta .btn-cta.is-revealed{animation:wiggle .9s .6s ease-in-out 2}
}
@keyframes fanA{from{transform:rotate(0) translate(-30%, -10%); opacity:0}}
@keyframes fanB{from{transform:rotate(0) translate(20%, -10%); opacity:0}}
@keyframes pop{from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1}}
@keyframes wiggle{0%,100%{transform:rotate(0)} 20%{transform:rotate(-3deg)} 40%{transform:rotate(3deg)} 60%{transform:rotate(-2deg)} 80%{transform:rotate(1deg)}}
.is-revealed{transition-timing-function:cubic-bezier(.3,1.4,.5,1)}
/* each price swatch drops onto its row */
.menu-row::before{transition:transform .55s cubic-bezier(.3,1.8,.5,1) .3s}
.menu > .will-reveal::before{transform:scale(0)}
/* each treatment's swatch is painted on in one brush stroke */
.benefit::before{transform-origin:100% 50%; transition:transform .7s cubic-bezier(.6,0,.2,1) .25s}
.benefit.will-reveal::before{transform:scaleX(0)}
.benefit.will-reveal{transform:translateY(20px) rotate(-2deg)}
/* work photos land like swatch cards, alternately tilted */
.strip > .will-reveal{transform:translateY(34px) rotate(-6deg)}
.strip > :nth-child(even).will-reveal{transform:translateY(34px) rotate(6deg)}
.steps li.will-reveal .step-num{transform:scale(.3)}
.step-num{display:inline-block; transition:transform .6s cubic-bezier(.3,1.7,.5,1) .25s}
/* Suez One figures read as letters ("o3"); numbers use the body face */
.step-num{font-family:var(--f-body); font-weight:700}
/* ambient opening colors */
:root{--amb-1:rgba(220,211,236,.95); --amb-2:rgba(237,211,216,.9); --amb-3:var(--peri)}
.ambient i:nth-of-type(2n){background:var(--blush)}
.ambient i:nth-of-type(3){background:var(--lilac-deep); opacity:.3}

/* the strong button color used by pop.css (unused by the older presets) */
:root{--pop-btn:#7A4FC9}

/* "Polish Rack" in sand: the same shelf of swatches, in sand, cocoa and soft rose. */
:root{
  --cream:#FBF8F3; --lilac:#EBDDCB; --lilac-deep:#7A5C48; --peri:#D8C2A8; --blush:#F1D9D2; --nude:#E7DED3; --sage:#D6DECF; --ink4:#33291F;
  --line:#EDE4D9; --muted:#76695E;
  --ph-a:#F0E7DC; --ph-b:#F6F0E8; --ph-fg:#76695E;
  --amb-1:rgba(235,221,203,.95); --amb-2:rgba(241,217,210,.8); --amb-3:var(--peri);
}
.hero-landing{background:linear-gradient(180deg, #F4ECE1 0%, var(--cream) 80%)}

/* the strong button color used by pop.css (unused by the older presets) */
:root{--pop-btn:#B8612F}

/* Pop: the base look for new demos (first made for Shira's nutrition site, 2026-10-18).
   Talia's soft, rounded look with more color and more play: each section sits on its own pastel
   "sheet", small doodles float around (never on the hero photo), and the buttons are one strong
   color that stands out on every pastel. Loaded after the colorway file (its --lilac / --blush /
   --peri tokens), then an optional family file (pop-nails.css, pop-beauty.css) that swaps the doodles.
   Slots: --d-hero, --d-a … --d-d (floating doodles), --d-icon1 … --d-icon3 (benefit icons),
   --pop-btn (button color; each colorway file sets its own). All motion stops under prefers-reduced-motion. */
:root{
  --w-mint:#EAF4EC; --w-lemon:#FFF4D6; --w-rose:#FBEDF1; --w-lilac:#F0EAF8; --w-peach:#FDEBE0;
  --w-mint-deep:#9FCFAE; --w-lemon-deep:#F4CF5D; --w-rose-deep:#EE93A4; --w-lilac-deep:#B9A6E0; --w-peach-deep:#F2AE8A;
  --doodle-lemon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='%23F4CF5D'/%3E%3Ccircle cx='32' cy='32' r='22' fill='%23FCEBA8'/%3E%3Cg stroke='%23F4CF5D' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M32 12v40M12 32h40M18 18l28 28M46 18L18 46'/%3E%3C/g%3E%3C/svg%3E");
  --doodle-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 56C8 24 28 8 58 6c-2 30-18 50-50 50z' fill='%239FCFAE'/%3E%3Cpath d='M13 51C25 38 37 26 51 13' stroke='%23F4FAF5' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --doodle-berry:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 58C14 46 8 30 14 20c6-8 30-8 36 0 6 10 0 26-18 38z' fill='%23EE93A4'/%3E%3Cpath d='M21 15c5 4 17 4 22 0l-5-7-6 4-6-4z' fill='%239FCFAE'/%3E%3Cg fill='%23FFE6EB'%3E%3Ccircle cx='26' cy='28' r='2'/%3E%3Ccircle cx='37' cy='26' r='2'/%3E%3Ccircle cx='31' cy='37' r='2'/%3E%3Ccircle cx='41' cy='37' r='2'/%3E%3Ccircle cx='23' cy='39' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --doodle-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 56S6 40 6 22a13 13 0 0 1 26-4 13 13 0 0 1 26 4c0 18-26 34-26 34z' fill='%23F2AE8A'/%3E%3C/svg%3E");
  --doodle-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4c3 17 11 25 28 28-17 3-25 11-28 28-3-17-11-25-28-28 17-3 25-11 28-28z' fill='%23B9A6E0'/%3E%3C/svg%3E");
}

/* ---- color: pastel sheets stacked like cards ---- */
#treatments, #gallery, #reviews, #steps, #prices, .final-cta{
  position:relative; border-radius:36px 36px 0 0; margin-top:-30px; padding-top:70px;
}
#treatments{background:var(--w-mint)}
#gallery{background:var(--w-lemon)}
#reviews{background:var(--w-rose)}
#steps{background:var(--w-lilac)}
#prices{background:var(--w-peach)}
.final-cta{background:var(--cream); padding-bottom:40px}

/* the quick chips under the headline, each its own color */
.quick li{border:0}
.quick li:nth-child(3n+1){background:var(--w-peach)}
.quick li:nth-child(3n+2){background:var(--w-mint)}
.quick li:nth-child(3n+3){background:var(--w-lilac)}

/* benefit cards: white on mint, each with a round colored icon */
.benefit{box-shadow:0 10px 26px -18px rgba(70,60,80,.35)}
.benefit::before{width:58px; height:58px; border-radius:50%; background:var(--w-peach) var(--d-icon1, var(--doodle-heart)) center/30px no-repeat}
.benefit:nth-child(3n+2)::before{background:var(--w-mint) var(--d-icon2, var(--doodle-leaf)) center/30px no-repeat}
.benefit:nth-child(3n+3)::before{background:var(--w-lilac) var(--d-icon3, var(--doodle-spark)) center/28px no-repeat}

/* gallery: photos in colored frames, slightly tilted ("rotate" so the reveal's transform still works) */
.strip > img, .strip > .ph{padding:8px; box-shadow:0 12px 26px -18px rgba(70,60,80,.45)}
.strip > :nth-child(4n+1){background:var(--w-peach-deep); rotate:-1.5deg}
.strip > :nth-child(4n+2){background:var(--w-mint-deep); rotate:1.5deg}
.strip > :nth-child(4n+3){background:var(--w-lilac-deep); rotate:-1deg}
.strip > :nth-child(4n+4){background:var(--w-rose-deep); rotate:1.2deg}
.strip{padding-block:14px 18px}

/* steps: numbers in colored circles */
.steps li{position:relative; box-shadow:0 10px 26px -18px rgba(70,60,80,.35)}
.step-num{display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--w-peach); color:var(--ink4); font-size:17px}
.steps li:nth-child(2) .step-num{background:var(--w-mint)}
.steps li:nth-child(3) .step-num{background:var(--w-lemon)}

/* buttons have to stand out on every pastel: a deep gradient (never fading into the background),
   white text and a soft colored shadow; secondary buttons are white with a colored outline */
/* Colors go through the theme variables: ambient.css paints a moving light streak as the
   background-image of these buttons, so a background gradient here would be wiped out. */
:root{--accent:var(--pop-btn, #C93A6B); --on-accent:#fff; --bar-btn-bg:var(--pop-btn, #C93A6B); --bar-btn-fg:#fff}
.btn-accent, .bookbar-main{
  background-color:var(--pop-btn, #C93A6B); color:#fff;
  box-shadow:0 10px 22px -10px color-mix(in srgb, var(--pop-btn, #C93A6B) 80%, transparent), inset 0 0 0 2px rgba(255,255,255,.35);
}
.btn-line{background:#fff; color:#6E3F58; box-shadow:inset 0 0 0 2px #6E3F58, 0 8px 18px -12px rgba(110,63,88,.5)}

/* final call to action: a colorful panel */
.final-cta .wrap{position:relative; z-index:1; background:linear-gradient(140deg, var(--w-rose) 0%, var(--w-peach) 50%, var(--w-lemon) 100%)}

/* FAQ markers in color */
.faq summary::marker{color:var(--w-rose-deep)}

/* ---- doodles: small fruit and leaves around the sections ---- */
.hero-landing .hero-text{position:relative}
.hero-landing .hero-text::before,
#treatments::after, #gallery::after, #steps::after, .final-cta::after{
  content:""; position:absolute; pointer-events:none; background:center/contain no-repeat; z-index:0;
}
.hero-landing .hero-text::before{width:44px; height:44px; top:-6px; inset-inline-end:4px; background-image:var(--d-hero, var(--doodle-lemon)); --r:-12deg}
#treatments::after{width:46px; height:46px; top:22px; inset-inline-start:22px; background-image:var(--d-a, var(--doodle-leaf)); --r:8deg}
#gallery::after{width:40px; height:40px; top:24px; inset-inline-start:30px; background-image:var(--d-b, var(--doodle-berry)); --r:-8deg}
#steps::after{width:36px; height:36px; top:26px; inset-inline-start:28px; background-image:var(--d-c, var(--doodle-spark)); --r:0deg}
.final-cta::after{width:42px; height:42px; top:18px; inset-inline-end:28px; background-image:var(--d-d, var(--doodle-heart)); --r:10deg; z-index:2}

@media (prefers-reduced-motion: no-preference){
  .hero-landing .hero-text::before, #treatments::after, #gallery::after, .final-cta::after{
    animation:w-float 5.5s ease-in-out infinite alternate;
  }
  #gallery::after{animation-duration:6.5s; animation-delay:-2s}
  .final-cta::after{animation-duration:4.8s; animation-delay:-1s}
  #steps::after{animation:w-twinkle 3.2s ease-in-out infinite}

  /* icons pop in when their card scrolls into view, then keep a gentle bob */
  .benefit::before{transform-origin:50% 50%; transition:transform .6s cubic-bezier(.3,1.8,.5,1) .2s}
  .benefit.will-reveal::before{transform:scale(0) rotate(-40deg)}
  .benefit.is-revealed::before{animation:w-bob 4s ease-in-out 1.2s infinite}
  .benefit:nth-child(2).is-revealed::before{animation-delay:1.6s}
  .benefit:nth-child(3).is-revealed::before{animation-delay:2s}

  /* step numbers bounce in with a soft ripple */
  .steps li.is-revealed .step-num{animation:w-ripple 1.4s ease-out .5s 1}

  /* gallery photos straighten and lift when touched */
  .strip > img, .strip > .ph{transition:rotate .35s cubic-bezier(.3,1.6,.5,1), translate .35s cubic-bezier(.3,1.6,.5,1), box-shadow .35s}
  .strip > img:hover, .strip > img:active{rotate:0deg; translate:0 -6px; box-shadow:0 18px 30px -18px rgba(70,60,80,.55)}

  /* chips land one after another */
  .quick li{animation:w-drop .6s cubic-bezier(.3,1.6,.5,1) both}
  .quick li:nth-child(1){animation-delay:.9s}
  .quick li:nth-child(2){animation-delay:1.05s}
  .quick li:nth-child(3){animation-delay:1.2s}
}

@keyframes w-float{
  from{transform:translateY(0) rotate(var(--r, 0deg))}
  to{transform:translateY(-12px) rotate(calc(var(--r, 0deg) + 14deg))}
}
@keyframes w-twinkle{0%,100%{transform:scale(.8) rotate(0); opacity:.7} 50%{transform:scale(1.15) rotate(45deg); opacity:1}}
@keyframes w-bob{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-5px) rotate(-6deg)}}
@keyframes w-ripple{0%{box-shadow:0 0 0 0 rgba(242,174,138,.55)} 100%{box-shadow:0 0 0 18px rgba(242,174,138,0)}}
@keyframes w-drop{from{transform:translateY(-14px) scale(.8); opacity:0}}

/* ---- top bar: pastel gradient, initial badge, name with tagline, round contact buttons ---- */
.topbar-pop{background:linear-gradient(100deg, var(--w-peach), var(--w-rose) 45%, var(--w-lilac)); border-bottom:0}
.topbar-pop::after{content:""; position:absolute; inset-inline:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--w-peach-deep), var(--w-rose-deep), var(--w-lilac-deep), var(--w-mint-deep), var(--w-peach-deep)); background-size:200% 100%}
.topbar-pop .wrap{min-height:66px}
.pop-brand{display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:inherit}
.pop-mono{flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:linear-gradient(140deg, var(--pop-btn, #C93A6B), var(--w-peach-deep)); color:#fff; font-family:var(--f-display); font-size:22px; line-height:1; box-shadow:0 6px 14px -8px var(--pop-btn, #C93A6B), inset 0 0 0 2px rgba(255,255,255,.55)}
.pop-brand-text{display:grid; min-width:0}
.topbar-pop .logo{font-size:22px}
.pop-tag{font-size:13px; line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pop-actions{display:flex; gap:8px; flex:none}
.pop-round{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#fff; color:var(--pop-btn, #C93A6B); box-shadow:0 6px 14px -10px rgba(70,60,80,.6)}
.pop-round svg{width:21px; height:21px}
.pop-round-book{background:var(--pop-btn, #C93A6B); color:#fff}

/* ---- footer: a colorful rounded panel with the badge, contact pills and doodles ---- */
.footer-pop{position:relative; overflow:hidden; margin-top:-30px; border-radius:36px 36px 0 0; color:var(--ink4);
  background:linear-gradient(160deg, var(--w-lilac), var(--w-rose) 55%, var(--w-peach));
  padding-block:48px calc(110px + env(safe-area-inset-bottom, 0px)); margin-bottom:calc(-80px - env(safe-area-inset-bottom, 0px))}
.footer-pop .wrap{position:relative; z-index:1; display:grid; gap:18px; justify-items:center; text-align:center}
.footer-pop .pop-brand{flex-direction:column; gap:10px}
.footer-pop .pop-mono{width:66px; height:66px; font-size:32px}
.footer-pop .logo{font-size:28px; color:var(--ink4)}
.footer-pop .pop-tag{white-space:normal; font-size:15px}
.pop-pills{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.pop-pill{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; background:#fff; color:var(--ink4); font-weight:700; font-size:15px; text-decoration:none; box-shadow:0 8px 18px -14px rgba(70,60,80,.6)}
.pop-pill svg{width:18px; height:18px; color:var(--pop-btn, #C93A6B)}
.pop-pill-main{background:var(--pop-btn, #C93A6B); color:#fff}
.pop-pill-main svg{color:#fff}
.pop-meta{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:0; font-size:14px; color:var(--muted)}
.footer-pop .credit{margin:0}
.footer-pop::before, .footer-pop::after{content:""; position:absolute; pointer-events:none; background:center/contain no-repeat}
.footer-pop::before{width:42px; height:42px; top:28px; inset-inline-start:24px; background-image:var(--d-a, var(--doodle-leaf)); --r:10deg}
.footer-pop::after{width:38px; height:38px; top:70px; inset-inline-end:26px; background-image:var(--d-hero, var(--doodle-lemon)); --r:-10deg}
@media (min-width:900px){ .footer-pop{margin-bottom:0; padding-bottom:56px} }

@media (prefers-reduced-motion: no-preference){
  .topbar-pop::after{animation:pop-shimmer 6s linear infinite}
  .pop-mono{animation:pop-in .7s cubic-bezier(.3,1.8,.5,1) .2s both}
  .footer-pop::before, .footer-pop::after{animation:w-float 5s ease-in-out infinite alternate}
  .footer-pop::after{animation-delay:-2.5s}
  .pop-round, .pop-pill{transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
  .pop-round:active, .pop-pill:active{transform:scale(.94)}
  .pop-round-book{animation:pop-nudge 4s ease-in-out 3s infinite}
}
@keyframes pop-shimmer{to{background-position:-200% 0}}
@keyframes pop-in{from{transform:scale(.3) rotate(-30deg); opacity:0}}
@keyframes pop-nudge{0%, 86%, 100%{transform:rotate(0)} 90%{transform:rotate(-12deg) scale(1.08)} 94%{transform:rotate(10deg) scale(1.08)}}

/* round badge with the owner's own photo (photos.avatar) instead of the initial */
.pop-avatar{overflow:hidden; padding:0; background:var(--w-peach)}
.pop-avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block}

/* pop pages have no sticky bottom bar (the owner asked to remove it): the round WhatsApp button in
   the top bar stays in view instead, so the page needs no space reserved at the bottom */
.is-pop{padding-bottom:0}
.is-pop .footer-pop{margin-bottom:0; padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px))}

/* Pop for brows, lashes, makeup and cosmetics: flowers, sparkles and hearts instead of food (see pop.css slots). */
:root{
  --beauty-flower:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23F5B8C8'%3E%3Ccircle cx='32' cy='15' r='11'/%3E%3Ccircle cx='48' cy='27' r='11'/%3E%3Ccircle cx='42' cy='46' r='11'/%3E%3Ccircle cx='22' cy='46' r='11'/%3E%3Ccircle cx='16' cy='27' r='11'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='8' fill='%23F4CF5D'/%3E%3C/svg%3E");
  --beauty-mirror:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='28' y='40' width='8' height='20' rx='4' fill='%23B9A6E0'/%3E%3Ccircle cx='32' cy='26' r='22' fill='%23F2AE8A'/%3E%3Ccircle cx='32' cy='26' r='16' fill='%23FDEBE0'/%3E%3Cpath d='M24 20a10 10 0 0 1 8-6' stroke='%23fff' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --d-hero:var(--beauty-flower);
  --d-a:var(--doodle-spark);
  --d-b:var(--beauty-mirror);
  --d-c:var(--doodle-spark);
  --d-d:var(--doodle-heart);
  --d-icon1:var(--beauty-flower);
  --d-icon2:var(--doodle-heart);
}

/* Soft layer: loaded after every theme. Rounder shapes and no hard dividers; content sits in rounded
   panels that flow into each other. Each theme keeps its colors, fonts and signature element. */
:root{
  --soft-r:20px;
  --soft-shadow:0 10px 28px color-mix(in srgb, var(--ink) 9%, transparent);
  --soft-tint:color-mix(in srgb, var(--ink) 7%, transparent);
}

/* no hard lines between areas */
.topbar{border-bottom-color:transparent}
.section, .split > .section + .section{border-top:0}
#reviews{border:0}
.footer{border-top:0}
.hero{border-bottom:0; border-end-start-radius:32px; border-end-end-radius:32px}

/* buttons: fully round; outline buttons become soft filled ones */
.btn, .bookbar a{border-radius:999px}
.btn-line{border-color:transparent; background:var(--soft-tint)}

/* photos, map */
.hero-photo > img, .hero-photo > .ph{border-radius:var(--soft-r); outline:0; border:0}
.gallery > img, .gallery > .ph{border-radius:16px}
.map{border:0; border-radius:var(--soft-r)}

/* price list in a soft panel, rows separated by space instead of lines */
body:not(.theme-barbershop) .menu{background:var(--surface); border:0; border-radius:var(--soft-r); padding:10px 20px; box-shadow:var(--soft-shadow)}
body:not(.theme-barbershop) .menu-row{border:0; padding-block:11px}
.menu-group{padding-top:6px}

/* hours and location as soft panels */
#hours .section-body, #find .section-body{background:var(--surface); border-radius:var(--soft-r); padding:20px; box-shadow:var(--soft-shadow)}
.hours{border:0}
.hours th, .hours td{border-bottom:0; padding-block:9px}
.hours tr.today th{box-shadow:none; border-start-start-radius:12px; border-end-start-radius:12px}
.hours tr.today td{border-start-end-radius:12px; border-end-end-radius:12px}
.facts li{border:0; background:color-mix(in srgb, var(--accent) 13%, var(--surface))}

/* reviews: borderless cards with a soft shadow */
.review-card, .hero-quote{border:0; border-radius:var(--soft-r); box-shadow:var(--soft-shadow)}
.marquee{padding-block:14px}

/* theme details that read as sharp */
.theme-barbershop .menu{border-width:6px; border-radius:16px}
.theme-barbershop .nameplate{border-radius:14px}
.theme-barber-classic .nameplate, .theme-beauty-classic .nameplate{border-bottom:0}
.theme-barber-classic .nameplate::after, .theme-beauty-classic .nameplate::after{content:""; display:block; width:56px; height:3px; margin:16px auto 0; border-radius:3px; background:currentColor; opacity:.45}
.theme-barber-studio .hero-photo > img, .theme-barber-studio .hero-photo > .ph{border-radius:0}
.theme-nails .hero-photo > img, .theme-nails .hero-photo > .ph{border-radius:50% 50% var(--soft-r) var(--soft-r) / 34% 34% var(--soft-r) var(--soft-r)}

@media (min-width:900px){
  .theme-barber-classic .nameplate::after, .theme-beauty-classic .nameplate::after{margin-inline:0}
}

/* body text: one calm, rounded, easy-to-read face on every site (headings keep each theme's own) */
:root{--f-body:"Rubik", system-ui, sans-serif}
body{line-height:1.65; letter-spacing:.005em}

/* Ambient opening (themes with "ambient": true). Calm motion that keeps going while the visitor reads the top
   of the page: soft color clouds drift behind everything, a few small drops float, the photo card hovers,
   the "open" dot pulses and the main button breathes, with a light passing over it now and then.
   Nothing touches the photo itself. Colors come from each theme's --amb-1/2/3. Off under reduced motion. */
.hero-landing.has-ambient{position:relative; isolation:isolate; overflow:hidden}
.ambient{position:absolute; inset:0; z-index:-1; pointer-events:none}
.ambient b{position:absolute; width:120vw; max-width:900px; aspect-ratio:1; border-radius:50%}
.ambient b:nth-child(1){top:-34%; inset-inline-end:-48%; background:radial-gradient(circle, var(--amb-1, rgba(255,255,255,.7)) 0, transparent 64%)}
.ambient b:nth-child(2){bottom:-30%; inset-inline-start:-52%; background:radial-gradient(circle, var(--amb-2, rgba(255,255,255,.6)) 0, transparent 64%)}
.ambient i{position:absolute; width:12px; height:12px; border-radius:50%; background:var(--amb-3, currentColor); opacity:.5}
.ambient i:nth-of-type(1){top:14%; left:10%; width:9px; height:9px}
.ambient i:nth-of-type(2){top:38%; right:6%; width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg)}
.ambient i:nth-of-type(3){top:62%; left:5%; width:7px; height:7px}
.ambient i:nth-of-type(4){top:84%; right:16%; width:11px; height:11px}
.ambient i:nth-of-type(5){top:24%; right:30%; width:6px; height:6px}

@media (prefers-reduced-motion:no-preference){
  .ambient b:nth-child(1){animation:amb-drift-a 16s ease-in-out infinite alternate}
  .ambient b:nth-child(2){animation:amb-drift-b 20s ease-in-out infinite alternate}
  .ambient i{animation:amb-float 13s ease-in-out infinite}
  .ambient i:nth-of-type(2){animation-name:amb-float-drop; animation-duration:15s; animation-delay:-4s}
  .ambient i:nth-of-type(3){animation-duration:11s; animation-delay:-7s}
  .ambient i:nth-of-type(4){animation-duration:16s; animation-delay:-2s}
  .ambient i:nth-of-type(5){animation-duration:12s; animation-delay:-9s}

  /* the photo card hovers once the opening has played */
  .has-ambient .hero-photo{animation:amb-hover 7s 1.8s ease-in-out infinite}
  /* the "open" dot pulses */
  .has-ambient .status:not([data-open="0"])::before{animation:amb-ping 2.2s ease-out infinite}
  /* the main button breathes, and a light passes over it every few seconds */
  .has-ambient .hero-cta .btn-cta{
    background-image:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.38) 50%, transparent 64%);
    background-size:260% 100%; background-repeat:no-repeat; background-position:160% 0;
    animation:amb-breathe 3.6s ease-in-out infinite, amb-shine 5.5s 2s ease-in-out infinite;
  }
}
@keyframes amb-drift-a{to{transform:translate(-14%, 12%) scale(1.15)}}
@keyframes amb-drift-b{to{transform:translate(16%, -12%) scale(1.1)}}
@keyframes amb-float{50%{transform:translate(14px, -34px)}}
@keyframes amb-float-drop{0%,100%{transform:rotate(-45deg)} 50%{transform:translate(-16px, -30px) rotate(-30deg)}}
@keyframes amb-hover{50%{transform:translateY(-9px)}}
@keyframes amb-ping{from{box-shadow:0 0 0 0 rgba(46,158,91,.55)} 70%, to{box-shadow:0 0 0 9px rgba(46,158,91,0)}}
@keyframes amb-breathe{
  0%, 100%{box-shadow:0 10px 24px -10px color-mix(in srgb, var(--accent) 55%, transparent)}
  50%{box-shadow:0 16px 36px -8px color-mix(in srgb, var(--accent) 85%, transparent)}
}
@keyframes amb-shine{0%, 62%{background-position:160% 0} 100%{background-position:-60% 0}}

/* the sticky booking button is always in view, so the light passes over it too */
@media (prefers-reduced-motion:no-preference){
  .bookbar-main{
    background-image:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.32) 50%, transparent 64%);
    background-size:260% 100%; background-repeat:no-repeat; background-position:160% 0;
    animation:amb-shine 5.5s 3s ease-in-out infinite;
  }
}
.ambient i{opacity:.6}


/* =====================================================================================
   Lash Room academy: courses, shop, student area and admin components.
   Everything below builds on the tokens above (pastels --w-*, --pop-btn, --f-display ...).
   ===================================================================================== */
/* a slightly deeper button color than the demo so white button text passes 4.5:1 */
:root{--pop-btn:#A8552A; --ok:#2F6B3F; --bad:#A12A22}
body{padding-bottom:0}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; inset-inline-start:12px; top:-80px; z-index:100; padding:10px 16px; border-radius:999px; background:var(--ink4); color:#fff; font-weight:700; text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--pop-btn); outline-offset:3px}
[hidden]{display:none !important}

/* header: sticky bar (badge, cart, WhatsApp) + a nav strip under it */
.topbar-pop .pop-tag{max-width:46vw}
.lr-cart-btn{position:relative; text-decoration:none}
.lr-badge{position:absolute; top:-4px; inset-inline-end:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--ink4); color:#fff; font-size:12px; font-weight:800; line-height:20px; text-align:center; box-shadow:0 0 0 2px #fff}
.lr-badge[data-n="0"]{display:none}
.lr-nav{background:linear-gradient(100deg, var(--w-peach), var(--w-rose) 45%, var(--w-lilac))}
.lr-nav ul{display:flex; justify-content:center; gap:6px; margin:0; padding:8px 0 12px; list-style:none; overflow-x:auto; scrollbar-width:none}
.lr-nav ul::-webkit-scrollbar{display:none}
.lr-nav a{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:999px; background:rgba(255,255,255,.7); color:var(--ink4); font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap}
.lr-nav a:hover{background:#fff}
.lr-nav a[aria-current="page"]{background:var(--ink4); color:#fff}
@media (max-width:380px){ .lr-nav a{padding:0 11px; font-size:14px} .lr-nav ul{gap:4px; justify-content:flex-start} }

/* pastel sheets stacked like cards (same as the demo's sections, as classes) */
.sheet{position:relative; border-radius:36px 36px 0 0; margin-top:-30px; padding-block:64px 64px}
.sheet-mint{background:var(--w-mint)}
.sheet-lilac{background:var(--w-lilac)}
.sheet-lemon{background:var(--w-lemon)}
.sheet-rose{background:var(--w-rose)}
.sheet-peach{background:var(--w-peach)}
.sheet-cream{background:var(--cream)}
.sheet::after{content:""; position:absolute; top:22px; inset-inline-start:24px; width:38px; height:38px; background:center/contain no-repeat; pointer-events:none}
.sheet-mint::after{background-image:var(--d-a, var(--doodle-spark))}
.sheet-lilac::after{background-image:var(--d-hero, var(--doodle-lemon)); --r:-10deg}
.sheet-lemon::after{background-image:var(--d-b, var(--doodle-berry))}
.sheet-rose::after{background-image:var(--d-d, var(--doodle-heart)); --r:8deg}
.sheet-peach::after{background-image:var(--doodle-spark)}
.sheet-cream::after, .sheet.no-doodle::after{display:none}
@media (prefers-reduced-motion:no-preference){ .sheet::after{animation:w-float 5.5s ease-in-out infinite alternate} }
.sheet .section-title{margin-bottom:10px}
.lead{color:var(--muted); font-size:17px; max-width:46ch; margin-bottom:22px}
.sheet-foot{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px}

/* page heads on inner pages */
.page-head{padding-block:26px 58px; background:linear-gradient(180deg, #F4ECE1 0%, var(--cream) 90%)}
.page-head h1{font-family:var(--f-display); font-size:clamp(30px, 8.5vw, 48px); line-height:1.12; max-width:20ch}
.page-head p{margin-top:10px; color:var(--muted); font-size:17px; max-width:46ch}
.crumb{display:inline-flex; align-items:center; gap:6px; margin-bottom:14px; font-size:15px; font-weight:700; color:var(--lilac-deep); text-decoration:none}
.crumb:hover{text-decoration:underline}

/* hero tweaks for the home page */
.hero-landing .rating, .hero-landing .quick, .hero-landing .hero-cta{align-self:flex-start}
.hero-cta{flex-wrap:wrap; gap:10px}
.g-rating{display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:#fff; color:var(--ink4); font-size:16px; font-weight:800; text-decoration:none; box-shadow:0 8px 18px -14px rgba(70,60,80,.6)}
.g-rating .stars{color:#B7791F; letter-spacing:.08em}
.g-rating .g-more{font-weight:500; text-decoration:underline; text-underline-offset:3px}

/* cards */
.cards{display:grid; gap:16px}
@media (min-width:700px){ .cards{grid-template-columns:repeat(2, 1fr)} }
@media (min-width:1000px){ .cards-3{grid-template-columns:repeat(3, 1fr)} }
.card{display:grid; gap:10px; align-content:start; background:var(--surface); border-radius:26px; padding:22px; box-shadow:0 12px 28px -20px rgba(70,60,80,.45)}
.card h3{font-family:var(--f-display); font-size:23px; line-height:1.25; font-weight:400}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline; text-underline-offset:4px}
.card > p{color:var(--muted)}
.tag{justify-self:start; display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; background:var(--w-peach); color:var(--ink4); font-size:13px; font-weight:700}
.tag-online{background:var(--w-lilac)}
.tag-inperson{background:var(--w-mint)}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.ticks li{position:relative; padding-inline-start:28px}
.ticks li::before{content:""; position:absolute; inset-inline-start:0; top:.3em; width:19px; height:19px; border-radius:50%; background:var(--w-peach-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.card-foot{display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; margin-top:6px; padding-top:16px; border-top:2px dashed var(--line)}
.card-foot .btn{flex:1 1 200px}
.price{font-weight:800; font-size:21px; direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; color:var(--ink4)}
.price-note{font-size:13px; color:var(--muted)}
.link-more{font-weight:700; color:var(--lilac-deep); text-underline-offset:3px}
.btn{cursor:pointer}
.btn:disabled, .btn[aria-disabled="true"]{background:#E4DDD5; color:#4A4038; box-shadow:none; cursor:not-allowed; animation:none}
.btn-block{width:100%}
.btn-cta-lg{min-height:60px; font-size:19px}
.btn-quiet{background:#fff; color:var(--ink4); box-shadow:0 8px 18px -14px rgba(70,60,80,.6)}
.btn-danger{background:#fff; color:var(--bad); box-shadow:inset 0 0 0 2px var(--bad)}

/* shop */
.products{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
@media (min-width:820px){ .products{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px} }
.product{display:grid; gap:8px; align-content:start; background:#fff; border-radius:22px; padding:10px 10px 14px; box-shadow:0 12px 28px -20px rgba(70,60,80,.45)}
.product .ph{aspect-ratio:1; border-radius:16px; font-size:14px; padding:10px}
.product h3{font-size:17px; font-weight:700; line-height:1.3; padding-inline:4px}
.product p{font-size:14px; color:var(--muted); padding-inline:4px}
.product .row{display:flex; align-items:center; justify-content:space-between; gap:6px; padding-inline:4px}
.product .price{font-size:18px}
.product .btn{min-height:44px; padding:0 10px; font-size:15px; width:100%}
.stock{font-size:13px; font-weight:700}
.stock-in{color:var(--ok)}
.stock-out{color:var(--bad)}

/* about */
.lr-about{display:grid; gap:22px; align-items:center}
.lr-about .ph{aspect-ratio:4/5; width:min(100%, 340px); border-radius:28px; box-shadow:0 14px 30px -20px rgba(70,60,80,.5)}
.lr-about-text{display:grid; gap:12px}
.lr-about-text p{font-size:18px; max-width:44ch}
.lr-about-text .fill-me{color:var(--muted); font-size:15px; border-inline-start:3px solid var(--w-peach-deep); padding-inline-start:12px}
@media (min-width:800px){ .lr-about{grid-template-columns:340px 1fr} }

/* contact */
.contact-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}

/* panels and notices */
.panel{background:#fff; border-radius:26px; padding:22px; box-shadow:0 12px 28px -20px rgba(70,60,80,.45)}
.panel + .panel{margin-top:16px}
.panel h2{font-family:var(--f-display); font-size:24px; font-weight:400; line-height:1.2; margin-bottom:12px}
.notice{border-radius:18px; padding:14px 18px; background:var(--w-lemon); color:var(--ink4)}
.notice-error{background:#FDECEC; color:#7A1C1C; box-shadow:inset 0 0 0 2px #F2B8B5}
.notice-ok{background:var(--w-mint)}
.notice a{font-weight:700}
.demo-box{display:grid; gap:12px; border:2px dashed #B08A00; background:#FFF6CC; border-radius:20px; padding:16px 18px}
.demo-box-label{font-size:14px; font-weight:800; color:#5A4700}
.loading{color:var(--muted); padding-block:10px}
.empty{display:grid; gap:12px; justify-items:start}
.narrow{max-width:620px}
.stack{display:grid; gap:16px}

/* forms */
.form{display:grid; gap:18px}
.field{display:grid; gap:6px}
.field > label, .legend{font-weight:700; font-size:16px}
.field input, .field textarea, .field select{width:100%; min-height:52px; padding:12px 16px; border:2px solid var(--line); border-radius:16px; background:#fff; color:var(--ink); font:inherit; font-size:17px}
.field textarea{min-height:96px; resize:vertical}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{outline:3px solid color-mix(in srgb, var(--pop-btn) 40%, transparent); outline-offset:1px; border-color:var(--pop-btn)}
.field input[dir="ltr"]{text-align:right}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{border-color:var(--bad)}
.hint{font-size:14px; color:var(--muted)}
.err-text{font-size:14px; font-weight:700; color:var(--bad)}
fieldset{border:0; margin:0; padding:0; display:grid; gap:10px; min-width:0}
legend{padding:0; margin-bottom:8px; font-weight:700; font-size:16px}
.choice{display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 16px; background:#fff; border:2px solid var(--line); border-radius:18px; cursor:pointer}
.choice:has(input:checked){border-color:var(--pop-btn); background:var(--w-peach)}
.choice input{width:22px; height:22px; margin:0; accent-color:var(--pop-btn); flex:none}
.choice span{flex:1}
.choice .price{flex:none; font-size:16px}
.check{display:flex; gap:12px; align-items:flex-start; cursor:pointer}
.check input{width:22px; height:22px; margin:2px 0 0; accent-color:var(--pop-btn); flex:none}
.check a{font-weight:700; color:var(--lilac-deep)}

/* cart and order summaries */
.lines{display:grid; gap:12px; list-style:none; margin:0; padding:0}
.line{display:grid; grid-template-columns:64px 1fr; gap:6px 14px; align-items:start; background:#fff; border-radius:22px; padding:12px; box-shadow:0 12px 28px -22px rgba(70,60,80,.5)}
.line .ph{width:64px; height:64px; padding:4px; border-radius:14px; font-size:11px; font-weight:700; grid-row:span 2}
.line-title{font-weight:700; line-height:1.35}
.line-meta{font-size:14px; color:var(--muted)}
.line-actions{grid-column:2; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.line .price{font-size:17px}
.qty{display:inline-flex; align-items:center; gap:2px; border-radius:999px; background:var(--soft-tint)}
.qty button{width:40px; height:40px; border:0; border-radius:50%; background:transparent; color:var(--ink); font:inherit; font-size:20px; font-weight:700; cursor:pointer}
.qty button:disabled{opacity:.35; cursor:default}
.qty output{min-width:26px; text-align:center; font-weight:800}
.link-btn{background:none; border:0; padding:8px 4px; font:inherit; font-size:15px; font-weight:700; color:var(--lilac-deep); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.summary{display:grid; gap:8px}
.sum-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.sum-row .price{font-size:17px}
.sum-total{margin-top:4px; padding-top:12px; border-top:2px dashed var(--line); font-weight:800; font-size:19px}
.sum-total .price{font-size:22px}
.two-col{display:grid; gap:18px; align-items:start}
@media (min-width:900px){ .two-col{grid-template-columns:minmax(0, 1fr) 360px} .two-col > aside{position:sticky; top:90px} }
.order-id{direction:ltr; unicode-bidi:isolate; font-family:ui-monospace, monospace; font-size:15px}

/* payment demo */
.pay-label{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:#FFF6CC; color:#5A4700; border:2px dashed #B08A00; font-size:14px; font-weight:800}
.pay-slot{display:grid; place-content:center; gap:4px; min-height:140px; padding:16px; text-align:center; border-radius:18px; background:repeating-linear-gradient(135deg, var(--ph-a) 0 12px, var(--ph-b) 12px 24px); color:var(--ph-fg); font-weight:700}
.pay-slot small{font-weight:400; font-size:13px}

/* student area */
.learn-grid{display:grid; gap:22px; align-items:start}
@media (min-width:900px){ .learn-grid{grid-template-columns:minmax(0, 1fr) 320px} .learn-grid > aside{position:sticky; top:90px} }
.player{position:relative; aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:#2B231D; box-shadow:0 18px 34px -22px rgba(40,30,20,.7)}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.player-ph{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; padding:16px; text-align:center; color:#fff; background:radial-gradient(circle at 30% 20%, #6B4E3B, #2B231D 70%); font-weight:700}
.player-ph svg{width:64px; height:64px; padding:18px; border-radius:50%; background:rgba(255,255,255,.16)}
.lesson-title{font-family:var(--f-display); font-weight:400; font-size:clamp(24px, 6.5vw, 34px); line-height:1.2; margin-top:18px}
.lesson-body{margin-top:12px; white-space:pre-line; font-size:17px; max-width:62ch}
.pager{display:flex; justify-content:space-between; gap:10px; margin-top:22px}
.pager .btn{flex:1 1 0; max-width:240px}
.lesson-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.lesson-list a{display:flex; align-items:center; gap:12px; min-height:52px; padding:10px 14px; border-radius:18px; background:#fff; color:var(--ink); text-decoration:none; box-shadow:0 8px 18px -16px rgba(70,60,80,.6)}
.lesson-list a:hover{background:var(--w-rose)}
.lesson-list a[aria-current="true"]{background:var(--w-peach); box-shadow:inset 0 0 0 2px var(--pop-btn)}
.lesson-n{flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--w-lilac); font-size:14px; font-weight:800; direction:ltr}
.lesson-list a[aria-current="true"] .lesson-n{background:var(--pop-btn); color:#fff}
.me-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px}
.me-email{direction:ltr; unicode-bidi:isolate; font-weight:700}

/* toast (after "add to cart") */
.toast{position:fixed; inset-inline:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:60; max-width:440px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 12px 18px; border-radius:20px; background:var(--ink4); color:#fff; box-shadow:0 18px 40px -16px rgba(30,20,10,.6); transform:translateY(160%); transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.toast.is-on{transform:none}
.toast a{flex:none; display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:999px; background:#fff; color:var(--ink4); font-weight:800; text-decoration:none}
@media (prefers-reduced-motion:reduce){ .toast{transition:none} }

/* legal drafts */
.draft-flag{display:inline-block; padding:6px 14px; border-radius:999px; background:#FFF6CC; border:2px dashed #B08A00; color:#5A4700; font-weight:800; font-size:14px}
.legal{display:grid; gap:10px; max-width:70ch}
.legal h2{font-family:var(--f-display); font-weight:400; font-size:24px; margin-top:18px}
.legal ul{margin:0; padding-inline-start:22px; display:grid; gap:6px}
.todo{background:#FFF6CC; padding:0 4px; border-radius:4px; font-weight:700}

/* footer extras */
.footer-pop .pop-meta a{color:var(--ink4)}
/* course page: on phones the price and buy button come right after the title */
@media (max-width:899px){ .buy-first > aside{order:-1} }
/* cards in a row line up their price and buttons at the bottom */
.card{display:flex; flex-direction:column}
.card > .tag{align-self:flex-start}
.card-foot{margin-top:auto}