:root{
  /* ── CMe Color System v3.0 LEAN PALETTE (2026-05-17 CD-approved) ── */
  --matte-white:#F8F9FA;
  --warm-ivory:#FDFBF7;      /* bg dominant 50% */
  --soft-peach:#FCEBE6;       /* warm bg 20% */
  --pastel-cloud:#D6E4F0;     /* cool bg 15% */
  --blue-lav-soft:#A8B5E8;    /* depth bridge 5% */
  --navy:#1B2A4A;             /* text/anchor 5% */
  --bronze-gold:#C9A84C;      /* 🌟 SIGNATURE 3% */
  --trust-blue:#1D92F4;       /* badge 2% */

  /* Dark Hero Tier (backbone) */
  --slate-deep:#0F172A;
  --indigo-deep:#1E1B4B;
  --indigo-mist:#8E9DC5;

  /* Accent extensions */
  --sakura:#F4B8C1;           /* sakura pink accent */
  --bronze-deep:#8B6F3E;      /* deep bronze (text on peach) */

  /* ── Aliases (backward compat — ALL pink mapped to v3.0 peach/gold/navy) ── */
  --hot-pink:var(--bronze-gold);
  --medium-pink:var(--soft-peach);
  --blush-rose:var(--soft-peach);
  --pale-sakura:var(--soft-peach);
  --blue-lavender:var(--blue-lav-soft);
  --near-white:var(--matte-white);
  --pearl:var(--matte-white);
  --pearl-soft:var(--matte-white);
  --dusty-rose:var(--bronze-gold);
  --dusty-rose-soft:var(--soft-peach);
  --champagne:var(--bronze-gold);
  --champagne-light:var(--bronze-gold);
  --champagne-deep:var(--bronze-gold);
  --alabaster:var(--matte-white);
  --bone:var(--matte-white);
  --charcoal:var(--navy);
  --indigo:var(--indigo-deep);
  --blue-lavender-light:var(--pastel-cloud);
  --blue-lavender-deep:var(--blue-lav-soft);
  --cyan-glow:var(--trust-blue);
  --cyan-light:var(--pastel-cloud);
  --lavender:var(--blue-lav-soft);
  --mint:var(--pastel-cloud);
  --serif-jp:'Cormorant Garamond',serif;

  /* ── Signature Gold Gradients (CMé DNA differentiator) ── */
  --signature-gold-text: linear-gradient(135deg,var(--bronze-gold) 0%,var(--soft-peach) 50%,var(--pastel-cloud) 100%);
  --signature-gold-warm: linear-gradient(135deg,var(--bronze-gold) 0%,var(--soft-peach) 100%);
  --signature-gold-cool: linear-gradient(135deg,var(--bronze-gold) 0%,var(--blue-lav-soft) 100%);
  --cme-peach-cool:      linear-gradient(135deg,var(--soft-peach) 0%,var(--pastel-cloud) 100%);
  --cme-peach-halo:      radial-gradient(circle,var(--soft-peach) 0%,var(--pastel-cloud) 70%,var(--blue-lav-soft) 100%);
  --cme-dark-hero:       linear-gradient(135deg,var(--slate-deep) 0%,var(--indigo-deep) 100%);

  /* ── Legacy gradient aliases → v3.0 ── */
  --irid-subtle: var(--cme-peach-cool);
  --irid-social: var(--cme-peach-halo);
  --irid-halo:   var(--cme-peach-halo);
  --lav-hero:    var(--cme-dark-hero);
  --lav-card:    var(--cme-dark-hero);
  --lav-deep:    var(--cme-dark-hero);
  --bg-dark:     var(--cme-dark-hero);
  --blush-gold:  var(--bronze-gold);
  --grad-blush-champ: var(--signature-gold-warm);
  --grad-blush-lav:   var(--signature-gold-cool);

  /* ── Text ── */
  --text-primary:var(--navy);
  --text-secondary:#4A5568;
  --text-tertiary:#94A3B8;
  --border-soft:#E5E7EB;

  /* ── Misc ── */
  --success:#10B981; --save:#C41E3A;
  --cream:var(--matte-white); --peach:var(--soft-peach); --gold:var(--bronze-gold);

  /* ── Typography ── */
  --serif-en:'Playfair Display','Cormorant Garamond',Georgia,serif;
  --sans-th:'Sarabun',system-ui,sans-serif;
  --sans-detail:'DM Sans',system-ui,sans-serif;

  /* ── Layout ── */
  --radius:16px; --radius-card:20px;
  --shadow-soft:  0 4px 20px rgba(27,42,74,.06);
  --shadow-card:  0 8px 32px rgba(192,208,242,.15);
  --shadow-luxury:0 20px 40px rgba(197,160,89,.10);
  --transition-luxury: all 0.5s cubic-bezier(0.16,1,0.3,1);
  --transition-btn: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  /* ── Motion Tokens (Group B) ── */
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-slow: 500ms;
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:var(--sans-th);background:var(--bone);color:var(--charcoal);min-height:100vh;padding:24px 16px}

.flow-header{max-width:1400px;margin:0 auto 24px;text-align:center}
.flow-header h1{font-family:var(--serif-en);font-size:26px;font-weight:300;letter-spacing:0.12em;text-transform:uppercase;color:var(--charcoal);margin-bottom:6px}
.flow-header p{font-family:var(--sans-detail);color:var(--text-secondary);font-size:11px;letter-spacing:0.1em;margin-bottom:12px}
.flow-header .src{font-size:11px;color:var(--text-tertiary);font-family:monospace;background:#fff;display:inline-block;padding:4px 10px;border-radius:6px;border:1px solid var(--border-soft);margin-bottom:14px}
.flow-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.flow-tabs button{background:var(--alabaster);border:1px solid var(--border-soft);padding:7px 14px;border-radius:50px;font-family:var(--sans-detail);font-size:10px;letter-spacing:0.08em;cursor:pointer;color:var(--text-secondary);transition:var(--transition-luxury)}
.flow-tabs button.active{background:linear-gradient(145deg,var(--champagne),var(--champagne-light));color:var(--slate-deep);border-color:transparent;box-shadow:0 4px 12px rgba(197,160,89,.3)}
.gallery{display:flex;gap:24px;overflow-x:auto;padding:8px calc(50vw - 250px) 24px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
@media (max-width:600px){.gallery{padding:8px 12px 24px}}
.screen-wrap{flex:0 0 auto;scroll-snap-align:start;transition:opacity 0.35s,transform 0.35s}
.screen-wrap.inactive{opacity:1}
/* Pause heavy animations on off-screen slides (GPU perf) */
.screen-wrap.inactive .sakura-petal,
.screen-wrap.inactive .gold-dust-p,
.screen-wrap.inactive [style*="s17-aura-spin"],
.screen-wrap.inactive [class*="wave-bar"],
.screen-wrap.inactive [class*="blob-"]{animation-play-state:paused}

/* ── CMe Motion v1 (cme-html-motion patterns) ── */
@keyframes screenEnter{from{opacity:0;transform:scale(0.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes sakuraFloat{0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}10%{opacity:.55}90%{opacity:.25}100%{transform:translateY(-120px) translateX(28px) rotate(200deg);opacity:0}}
@keyframes slideInBottom{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes statReveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.screen-wrap.entering .phone{animation:screenEnter .42s cubic-bezier(.22,1,.36,1) both}

/* Sakura petals — appended via JS to .app-bar.dark */
.sakura-petal{position:absolute;width:6px;height:8px;background:rgba(244,184,193,.65);border-radius:60% 0 60% 0;animation:sakuraFloat linear infinite;pointer-events:none;z-index:5;will-change:transform,opacity}

/* Stagger slide-in for section headings + eyebrows in new screens */
.motion-title{animation:slideInBottom .7s cubic-bezier(.22,1,.36,1) both}
.motion-sub{animation:slideInLeft .6s ease-out .18s both}
.motion-stat{animation:statReveal .8s cubic-bezier(.22,1,.36,1) both}
.screen-label{display:none}
.phone{width:440px;height:920px;background:#fff;border-radius:42px;overflow:hidden;box-shadow:0 20px 60px rgba(15,23,42,.18);position:relative;border:9px solid #0A0F1F}
.phone::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:110px;height:24px;background:#0A0F1F;border-radius:0 0 16px 16px;z-index:20}
.phone-inner{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.phone-inner::-webkit-scrollbar{width:0}

h1,h2,h3,h4{font-family:var(--serif-en);color:var(--charcoal);font-weight:500;letter-spacing:0.04em;line-height:1.2}
h1{font-weight:300;letter-spacing:0.08em;text-transform:uppercase}
h2{font-weight:400;letter-spacing:0.06em}
h3{font-weight:500;letter-spacing:0.04em}

.subtitle{font-family:var(--sans-detail);letter-spacing:0.2em;text-transform:uppercase;font-size:0.7rem;color:#888;font-weight:400}

/* APP BAR */
.app-bar{position:sticky;top:0;background:rgba(253,252,251,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:32px 18px 12px;display:flex;align-items:center;justify-content:space-between;z-index:10;border-bottom:1px solid rgba(232,230,225,.6)}
.app-bar.dark{background:var(--slate-deep);border-bottom:1px solid rgba(255,255,255,.08);min-height:113px;box-sizing:border-box}
.app-bar h4{display:none}
.app-bar.dark h4{display:none}
.app-bar .actions{display:flex;gap:10px;align-items:center}
.icon-btn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.6);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:visible}
[data-action="cart"]::before{content:'';position:absolute;top:-14px;right:3px;width:14px;height:14px;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(200,200,220,.4) 50%,transparent 70%);border-radius:50%;animation:chimney-smoke-a 2s ease-in-out infinite;pointer-events:none;z-index:10}
[data-action="cart"]::after{content:'';position:absolute;top:-18px;right:6px;width:11px;height:11px;background:radial-gradient(circle,rgba(255,255,255,.75) 0%,rgba(200,200,220,.3) 50%,transparent 70%);border-radius:50%;animation:chimney-smoke-b 2s ease-in-out infinite;pointer-events:none;z-index:10}
.app-bar.dark .icon-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
.cart-badge{position:absolute;top:-4px;right:-4px;background:var(--cyan-glow);color:var(--slate-deep);font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.back-btn{display:flex;align-items:center;gap:6px;color:var(--slate-deep);font-size:13px;font-weight:500;background:none;border:none;cursor:pointer;font-family:var(--sans-th)}
.app-bar.dark .back-btn{color:#fff}

/* GLASSMORPHISM */
.premium-card{
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 10px 40px rgba(0,0,0,.04);
  border-radius:16px;
}

/* LUXURY BUTTON */
.btn-luxury{
  background:linear-gradient(145deg,var(--champagne),var(--champagne-light));
  color:#fff;
  letter-spacing:0.1em;
  padding:14px 28px;
  border-radius:50px;
  border:none;
  cursor:pointer;
  font-family:var(--sans-detail);
  font-size:12px;
  font-weight:500;
  transition:var(--transition-btn);
  box-shadow:0 6px 20px rgba(197,160,89,.3);
}
.btn-luxury:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(197,160,89,.4)}
.btn-luxury:active{transform:scale(.97)}

/* MICRO-INTERACTIONS */
.showcase-card{transition:var(--transition-luxury)}
.showcase-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-luxury)}
.bundle-card{transition:var(--transition-luxury)}
.bundle-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-luxury)}
.proof-card{transition:var(--transition-luxury)}
.proof-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-luxury)}
.variant-card{transition:var(--transition-luxury)}
.variant-card:hover{transform:translateY(-2px)}
.quick-link{transition:var(--transition-luxury)}
.quick-link:hover{transform:translateY(-3px);box-shadow:var(--shadow-luxury)}
@keyframes shimmer-border{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.quick-link.member-cta{background:linear-gradient(135deg,var(--indigo-deep) 0%,var(--indigo) 60%,var(--blue-lavender) 100%);border:none;color:#fff;position:relative;overflow:hidden}
.quick-link.member-cta .label{color:#fff}
.quick-link.member-cta .label small{color:rgba(255,255,255,.7)}
.quick-link.member-cta .icon{border-color:rgba(255,255,255,.4);color:#fff}
.quick-link.member-cta .icon svg{stroke:#fff}
.quick-link.member-cta::after{content:'';position:absolute;inset:-2px;border-radius:6px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 80%,transparent 100%);background-size:200% 100%;opacity:0;transition:opacity .2s}
.quick-link.member-cta:active::after{opacity:1;animation:shimmer-border .6s ease}
.btn-add{transition:var(--transition-btn)}
.btn-add:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 25px rgba(197,160,89,.4)}

section{padding:60px 20px;position:relative}
section.dark{background:var(--bg-dark);color:#fff;overflow:hidden}
section.dark h1,section.dark h2,section.dark h3{color:#fff}
section.dark p{color:rgba(255,255,255,.85)}
section.cream{background:var(--alabaster)}

.eyebrow{font-family:var(--sans-detail);font-size:10px;letter-spacing:0.32em;color:var(--bronze-deep);font-weight:500;margin-bottom:12px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
section.dark .eyebrow{color:rgba(197,160,89,.9)}
.form-section .eyebrow,.proof-hero .eyebrow{color:var(--bronze-deep)}
/* VIDEO HERO */
.video-hero{position:relative;background:var(--bg-dark);padding:0;aspect-ratio:9/11;overflow:hidden}
.video-placeholder{position:absolute;inset:0;background:
  radial-gradient(circle at 30% 40%, var(--blue-lavender) 0%, transparent 50%),
  radial-gradient(circle at 70% 60%, var(--cyan-glow) 0%, transparent 50%),
  var(--bg-dark);display:flex;align-items:center;justify-content:center}
.video-placeholder::after{content:'▶';font-size:60px;color:rgba(255,255,255,.85);text-shadow:0 4px 24px rgba(0,0,0,.4)}
.video-overlay{position:absolute;bottom:0;left:0;right:0;top:0;padding:20px 20px 24px;background:linear-gradient(180deg, rgba(15,23,42,.45) 0%, rgba(15,23,42,.5) 40%, rgba(15,23,42,.92) 75%);color:#fff;z-index:2;display:flex;flex-direction:column;justify-content:flex-end}
.video-overlay h1{color:#fff;font-size:30px;font-weight:200;letter-spacing:0.10em;line-height:1.1;margin-bottom:8px;text-transform:uppercase}
.video-overlay h1 .accent{color:var(--cyan-glow)}
.video-overlay .jp-sub{font-family:var(--serif-jp);font-size:11px;color:rgba(255,255,255,.65);letter-spacing:.04em;margin-bottom:4px}
.video-overlay .sub{font-size:12px;color:rgba(255,255,255,.9)}
.video-chips{position:absolute;top:16px;left:16px;display:flex;gap:6px;z-index:3}
.video-chip{background:rgba(255,255,255,.18);backdrop-filter:blur(10px);color:#fff;font-size:10px;padding:5px 10px;border-radius:999px;font-weight:600;letter-spacing:.04em}
.video-chip.live{background:rgba(239,68,68,.9)}

/* 3-PRODUCT SHOWCASE — big media, beautiful */
.showcase{display:flex;flex-direction:column;gap:20px;padding:40px 20px 48px;background:var(--alabaster)}
.showcase-card{background:rgba(255,255,255,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-card);border:1px solid rgba(255,255,255,.5);position:relative;cursor:pointer}
/* Card style D — Soft Tint per step */
.showcase div.showcase-card:nth-of-type(1){background:linear-gradient(145deg,var(--matte-white),var(--pastel-cloud));backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(214,228,240,.5)}
.showcase div.showcase-card:nth-of-type(2){background:linear-gradient(145deg,var(--matte-white),var(--soft-peach));backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(252,235,230,.5)}
.showcase div.showcase-card:nth-of-type(3){background:linear-gradient(145deg,var(--matte-white),var(--blue-lav-soft));backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(168,181,232,.5)}
.showcase-media{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.showcase-media.cleanse{background:linear-gradient(135deg,var(--lavender) 0%,var(--blue-lavender-light) 100%)}
.showcase-media.serum{background:linear-gradient(135deg,var(--blush-rose) 0%,var(--medium-pink) 100%)}
.showcase-media.sun{background:linear-gradient(135deg,var(--pale-sakura) 0%,var(--blue-lavender) 100%)}
.showcase-media img{max-width:55%;max-height:90%;filter:drop-shadow(0 12px 24px rgba(15,23,42,.15));transition:transform 0.6s ease}
.showcase-media img:hover{transform:scale(1.05)}
.detail-hero img{transition:transform 0.6s ease}
.detail-hero img:hover{transform:scale(1.04)}
.sc-play{position:absolute;bottom:12px;right:12px;background:rgba(15,23,42,.7);color:#fff;font-size:10px;padding:5px 12px;border-radius:999px;font-weight:600;backdrop-filter:blur(8px);font-family:var(--sans-th);display:flex;align-items:center;gap:5px;transition:opacity .25s;cursor:pointer;z-index:3}
.sc-play svg{flex-shrink:0}
.showcase-body{padding:20px 18px 18px}
.showcase-body .name-en{font-family:var(--serif-en);font-size:17px;font-weight:300;letter-spacing:0.08em;color:var(--charcoal);margin-bottom:4px;text-transform:uppercase;line-height:1.2}
.showcase-body .name-th{font-size:11px;color:var(--text-tertiary);margin-bottom:0;letter-spacing:0.04em}
.showcase-row{display:flex;justify-content:space-between;align-items:center}
.showcase-link{display:inline-block;font-family:var(--sans-detail);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne);text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(197,160,89,.35);transition:color .25s,border-color .25s}
.showcase-link:hover{color:var(--bronze-deep);border-color:var(--bronze-deep)}
.showcase-price{font-family:var(--serif-en);font-size:20px;color:var(--champagne);font-weight:300;letter-spacing:0.04em}
.showcase-price .old{font-size:11px;color:var(--text-tertiary);text-decoration:line-through;font-family:var(--sans-th);font-weight:400;margin-right:4px}
.showcase-price small{font-size:10px;color:var(--text-tertiary);font-weight:400;font-family:var(--sans-th);letter-spacing:.02em;margin-left:4px}
.save-pill{font-size:10px;color:#fff;background:var(--save);padding:3px 8px;border-radius:999px;font-weight:700;letter-spacing:.04em;margin-left:6px;vertical-align:middle}
.btn-add{background:linear-gradient(145deg,var(--champagne),var(--champagne-light));color:var(--slate-deep);border:none;padding:10px 18px;border-radius:50px;font-size:11px;font-weight:500;letter-spacing:0.08em;cursor:pointer;font-family:var(--sans-detail);display:inline-flex;align-items:center;gap:6px;box-shadow:0 4px 14px rgba(197,160,89,.28)}
.btn-add:active{transform:scale(.97)}

/* QUICK LINKS */
.quick-links{padding:8px 20px 28px;background:var(--bone);display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}
.quick-link.skinfinder{width:calc(50% - 5px)}
.quick-link.bundle{width:calc(50% - 5px)}
.quick-link.member-cta{width:100%}
.quick-link{background:#fff;border:1px solid var(--border-soft);border-radius:16px;padding:13px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box}
.quick-link .icon{width:36px;height:36px;border:1.5px solid var(--champagne);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--champagne)}
.quick-link .icon svg{width:18px;height:18px;stroke:var(--champagne);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.quick-link .label{font-size:12px;color:var(--slate-deep);font-weight:600;line-height:1.3}
.quick-link .label small{display:block;color:var(--text-tertiary);font-weight:400;font-size:10px;margin-top:2px}
.quick-link.proof{background:linear-gradient(135deg,#fff 0%,var(--cyan-light) 200%);border-color:var(--cyan-glow)}
.quick-link.bundle{background:linear-gradient(135deg,#fff 0%,var(--peach) 200%);border-color:var(--champagne)}
.quick-link.refill{background:linear-gradient(135deg,#fff 0%,var(--mint) 200%);border-color:#A3D9B4}
.quick-link.trial{background:linear-gradient(135deg,#fff 0%,var(--peach) 200%);border-color:var(--blush-rose)}
.quick-link.skinfinder{background:linear-gradient(135deg,#fff 0%,var(--peach) 200%);border-color:var(--champagne)}
@keyframes labShimmer{0%{transform:translateX(-100%) skewX(-15deg)}60%,100%{transform:translateX(250%) skewX(-15deg)}}
.lab-banner{display:flex;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(135deg,var(--indigo-deep) 0%,var(--slate-deep) 100%);text-decoration:none;color:#fff;border-radius:14px;margin:0 12px 14px;overflow:hidden;position:relative}
.lab-banner::before{content:'';position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:labShimmer 2.8s ease-in-out infinite;pointer-events:none}
.lab-banner-icon{width:36px;height:36px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lab-banner-icon svg{width:18px;height:18px;stroke:#fff;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lab-banner-text{flex:1}
.lab-banner-text strong{display:block;font-family:var(--sans-detail);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:#fff;font-weight:700}
.lab-banner-text span{display:block;font-family:var(--sans-th);font-size:11px;color:rgba(255,255,255,.85);margin-top:2px;letter-spacing:0.02em}
.lab-banner-arrow{font-size:16px;color:rgba(255,255,255,.5)}

/* PROOF */
.proof-hero{padding:32px 20px 24px;background:var(--bone);text-align:center}
.proof-hero h2{font-size:22px;margin-bottom:12px;font-weight:300;letter-spacing:0.08em;text-transform:uppercase;line-height:1.15}
.proof-hero h2 .accent{color:var(--indigo);font-style:italic}
.proof-hero p{font-size:12px;color:var(--text-secondary);font-family:var(--sans-detail);letter-spacing:0.04em}
.proof-list{padding:0 20px 24px;background:var(--bone);display:flex;flex-direction:column;gap:10px}
.proof-card{background:rgba(255,255,255,.7);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:20px;padding:16px;border:1px solid rgba(255,255,255,.5);box-shadow:0 10px 30px rgba(0,0,0,.03);display:flex;gap:14px;align-items:center;cursor:pointer;overflow:hidden}
.proof-thumb{flex:0 0 52px;height:52px;background:rgba(255,255,255,.6);border-radius:50%;border:1.5px solid var(--champagne);display:flex;align-items:center;justify-content:center}
.proof-thumb svg{width:24px;height:24px;stroke:var(--champagne);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.proof-info{flex:1;min-width:0}
.proof-info .lab{font-size:10px;color:var(--indigo);letter-spacing:.12em;font-weight:600;text-transform:uppercase;margin-bottom:3px}
.proof-info h4{font-family:var(--sans-th);font-size:13px;color:var(--slate-deep);font-weight:700;margin-bottom:3px;line-height:1.35}
.proof-info .meta{font-size:10px;color:var(--text-secondary)}
.proof-stat{flex:0 0 auto;width:74px;height:74px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid var(--champagne);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9) 60%,rgba(197,160,89,.06) 100%)}
.proof-stat::before{content:'';position:absolute;inset:4px;border-radius:50%;border:0.5px dashed rgba(197,160,89,.35)}
.proof-stat::after{content:'';position:absolute;top:-3px;left:50%;width:1px;height:5px;background:var(--champagne);transform:translateX(-50%)}
.proof-stat .value{font-family:var(--serif-en);font-size:18px;color:var(--charcoal);font-weight:300;letter-spacing:0.02em;line-height:1;position:relative;z-index:2}
.proof-stat .label{font-size:10px;color:var(--bronze-deep);letter-spacing:.18em;text-transform:uppercase;margin-top:3px;font-weight:500;position:relative;z-index:2}
.gauge-ring{width:80px;height:80px;border:1.5px solid var(--champagne);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}
.gauge-ring .value{font-family:var(--serif-en);font-size:18px;color:var(--charcoal);font-weight:300;letter-spacing:0.02em;line-height:1}
.gauge-ring .label{font-size:10px;color:var(--text-tertiary);letter-spacing:0.16em;text-transform:uppercase;margin-top:3px}

/* PRODUCT DETAIL (full screen image + variant chooser) */
.detail-hero{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:24px}
.detail-hero.lav{background:linear-gradient(135deg,var(--lavender) 0%,var(--blue-lavender-light) 100%)}
.detail-hero img{max-width:70%;max-height:80%;filter:drop-shadow(0 20px 40px rgba(15,23,42,.2))}
/* PRODUCT IMAGE GALLERY */
.detail-gallery{position:relative;overflow:hidden}
.detail-gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.detail-gallery-track::-webkit-scrollbar{display:none}
.detail-gallery-slide{flex:0 0 100%;scroll-snap-align:start;background:#f0ece6}
.detail-gallery-slide .detail-hero{width:100%;box-sizing:border-box}
.detail-gallery-slide .gallery-banner{aspect-ratio:1/1;width:100%;object-fit:cover;display:block}
.gallery-dots{display:flex;justify-content:center;gap:6px;padding:8px 0 4px;background:var(--bone)}
.gallery-dot{width:6px;height:6px;border-radius:50%;background:var(--border-soft);transition:background .2s,width .2s}
.gallery-dot.active{background:var(--champagne);width:18px;border-radius:3px}
.detail-body{padding:28px 20px 32px;background:var(--bone)}
.detail-body h2{font-size:22px;margin-bottom:10px;font-weight:300;letter-spacing:0.08em;text-transform:uppercase;line-height:1.15}
.detail-body .price-big{font-family:var(--serif-en);font-size:28px;color:var(--champagne);font-weight:300;letter-spacing:0.04em;margin-bottom:20px}
.detail-body .price-big .old{font-size:14px;color:var(--text-tertiary);text-decoration:line-through;font-family:var(--sans-th);font-weight:400;margin-right:6px}
.detail-body .price-big small{font-size:12px;color:var(--text-tertiary);font-family:var(--sans-th);font-weight:400;letter-spacing:.02em;margin-left:6px}
.variant-label{font-family:var(--sans-detail);font-size:10px;color:var(--text-secondary);font-weight:500;letter-spacing:0.24em;text-transform:uppercase;margin-bottom:12px}
.variant-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.variant-card{background:var(--warm-ivory);border:1.5px solid var(--border-soft);border-radius:14px;padding:14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;position:relative}
.variant-card.active{border-color:var(--indigo);background:linear-gradient(135deg,var(--warm-ivory) 0%,var(--lavender) 300%)}
.variant-card .v-info h5{font-family:var(--sans-th);font-size:13px;color:var(--slate-deep);font-weight:700;margin-bottom:3px}
.variant-card .v-info p{font-size:11px;color:var(--text-secondary)}
.variant-card .v-price{text-align:right}
.variant-card .v-price .new{font-family:var(--serif-en);font-size:17px;color:var(--champagne);font-weight:300;letter-spacing:0.04em}
.variant-card .v-price .old{font-size:10px;color:var(--text-tertiary);text-decoration:line-through}
.variant-card .badge{position:absolute;top:-8px;left:14px;background:var(--cyan-glow);color:var(--slate-deep);font-size:10px;padding:3px 8px;border-radius:999px;font-weight:700;letter-spacing:.04em}
.proof-mini{background:linear-gradient(135deg,#fff 0%,var(--soft-peach) 300%);border:1px solid var(--bronze-gold);border-radius:12px;padding:13px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.proof-mini-info h6{font-family:var(--sans-th);font-size:12px;color:var(--slate-deep);font-weight:700;margin-bottom:2px}
.proof-mini-info p{font-size:10px;color:var(--text-secondary)}
.proof-mini-stat{font-family:var(--serif-en);font-size:18px;color:var(--bronze-gold);font-weight:700}

/* BUNDLE CARD OVERLAYS */
.bundle-card{position:relative}
.bundle-best{position:absolute;top:10px;right:10px;z-index:3;width:72px;height:72px;filter:drop-shadow(0 3px 12px rgba(197,160,89,.55)) drop-shadow(0 1px 4px rgba(0,0,0,.18))}
.bundle-official{position:absolute;bottom:10px;left:10px;z-index:3;font-size:8px;font-weight:800;letter-spacing:.15em;color:#fff;font-family:var(--sans-detail);text-shadow:0 1px 4px rgba(0,0,0,.6);text-transform:uppercase;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);padding:3px 8px;border-radius:4px}

/* BUNDLE SCREEN */
.bundle-banner{background:linear-gradient(135deg,var(--indigo-deep) 0%,var(--indigo) 60%,var(--blue-lavender) 100%);color:#fff;border-radius:16px;padding:18px;margin-bottom:16px;position:relative;overflow:hidden}
.bundle-banner .glow{position:absolute;width:120px;height:120px;background:radial-gradient(circle,var(--cyan-glow) 0%,transparent 70%);top:-30px;right:-30px;opacity:.4;filter:blur(20px)}
.bundle-banner h4{color:#fff;font-family:var(--serif-en);font-size:20px;font-weight:300;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px;position:relative;z-index:2;line-height:1.15;text-align:center}
.bundle-banner p{color:rgba(255,255,255,.85);font-size:12px;position:relative;z-index:2}
.bundle-list{display:flex;flex-direction:column;gap:12px}
.bundle-card{background:var(--warm-ivory);backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-soft);border:1px solid rgba(232,230,225,.8);position:relative;cursor:pointer}
.bundle-card.featured{border-color:transparent;background:linear-gradient(white,white) padding-box,linear-gradient(145deg,var(--champagne),var(--blue-lavender)) border-box;border:1.5px solid transparent}
.bundle-card .badge{position:absolute;top:12px;left:12px;background:var(--cyan-glow);color:var(--slate-deep);font-size:10px;padding:4px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;z-index:2}
.bundle-card .badge.gold{background:var(--gold);color:var(--slate-deep)}
.bundle-card .badge.member{background:var(--save);color:#fff}
.bundle-media{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;gap:6px;padding:14px}
.bundle-media.glow-bg{background:linear-gradient(135deg,var(--lavender) 0%,var(--mint) 100%)}
.bundle-media.protect-bg{background:linear-gradient(135deg,var(--lavender) 0%,var(--peach) 100%)}
.bundle-media.full-bg{background:linear-gradient(135deg,var(--lavender) 0%,var(--blue-lavender-light) 50%,var(--peach) 100%)}
.bundle-media img{max-height:80%;max-width:30%;filter:drop-shadow(0 8px 16px rgba(15,23,42,.18))}
.bundle-body{padding:14px 16px}
.bundle-body h5{font-family:var(--serif-en);font-size:20px;font-weight:300;letter-spacing:0.10em;text-transform:uppercase;color:var(--charcoal);margin-bottom:6px;line-height:1.15}
.bundle-body p{font-size:10px;font-family:var(--sans-detail);letter-spacing:0.06em;color:var(--text-secondary);margin-bottom:10px}
.bundle-body .row{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 10px;align-items:center;margin-bottom:2px}.bundle-body .row .price{grid-column:1;grid-row:1}.bundle-body .row .save-pill{grid-column:1;grid-row:2;margin-left:0;align-self:start}.bundle-body .row .bundle-add-btn{grid-column:2;grid-row:1/3;align-self:center}
.bundle-body .price{font-family:var(--serif-en);font-size:20px;color:var(--champagne);font-weight:300;letter-spacing:0.04em}
.bundle-body .price .old{font-size:12px;color:var(--text-tertiary);text-decoration:line-through;font-family:var(--sans-th);font-weight:400;margin-right:4px}

/* CART */
.cart-list{padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.cart-item{background:#fff;border-radius:14px;padding:12px;border:1px solid var(--border-soft);display:flex;gap:12px;align-items:center}
.cart-item img{width:54px;height:64px;object-fit:contain;background:var(--cream);border-radius:8px;padding:4px}
.cart-item .info{flex:1;min-width:0}
.cart-item .info h5{font-family:var(--sans-th);font-size:12px;color:var(--slate-deep);font-weight:600;margin-bottom:2px;line-height:1.3}
.cart-item .info .variant{font-size:10px;color:var(--text-secondary);margin-bottom:4px}
.cart-item .info .price{font-family:var(--serif-en);font-size:14px;color:var(--slate-deep);font-weight:700}
.qty-control{display:flex;align-items:center;gap:5px}
.qty-btn{width:22px;height:22px;border-radius:50%;border:1px solid var(--border-soft);background:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--slate-deep)}
.qty-val{font-size:12px;font-weight:600;min-width:16px;text-align:center}

.cart-summary{background:#fff;margin:0 20px 12px;padding:14px;border-radius:14px;border:1px solid var(--border-soft)}
.sum-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary);margin-bottom:6px}
.sum-row.total{border-top:1px solid var(--border-soft);padding-top:12px;margin-top:10px;font-size:17px;color:var(--champagne);font-weight:300;font-family:var(--serif-en);letter-spacing:0.04em}
.sum-row.discount{color:var(--success)}

/* FORM (member/checkout) */
.form-section{padding:20px}
.form-section h2{font-size:22px;margin-bottom:10px;font-weight:300;letter-spacing:0.08em;text-transform:uppercase;line-height:1.15}
.form-section h2 .accent{color:var(--indigo);font-style:italic}
.form-section > p{font-size:12px;color:var(--text-secondary);margin-bottom:18px}
.field{margin-bottom:12px}
.field label{display:block;font-size:10px;color:var(--slate-deep);font-weight:600;margin-bottom:5px;letter-spacing:.04em;text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1.5px solid var(--border-soft);border-radius:10px;font-family:var(--sans-th);font-size:13px;color:var(--slate-deep);background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--indigo)}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible,.icon-btn:focus-visible,.back-btn:focus-visible,.qty-btn:focus-visible{outline:2px solid var(--bronze-gold);outline-offset:2px;border-radius:4px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hint{font-size:10px;color:var(--text-tertiary);margin-top:3px}

.pay-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.pay-option{background:#fff;border:1.5px solid var(--border-soft);border-radius:16px;padding:15px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 6px rgba(0,0,0,.04)}
.pay-option:hover{border-color:rgba(101,113,221,.35);box-shadow:0 2px 12px rgba(101,113,221,.1)}
.pay-option.active{border-color:var(--indigo);background:linear-gradient(135deg,#fff 0%,var(--lavender) 300%);box-shadow:0 4px 16px rgba(101,113,221,.18)}
.pay-option .pay-icon{width:40px;height:40px;background:var(--cream);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.pay-option .pay-info{flex:1;min-width:0}
.pay-option .pay-info h5{font-family:var(--sans-th);font-size:13px;color:var(--slate-deep);font-weight:700;margin-bottom:3px}
.pay-option .pay-info p{font-size:10.5px;color:var(--text-secondary);margin:0}
.pay-radio{width:18px;height:18px;border:2px solid var(--border-soft);border-radius:50%;flex-shrink:0;position:relative}
.pay-option.active .pay-radio{border-color:var(--indigo)}
.pay-option.active .pay-radio::after{content:'';position:absolute;inset:3px;background:var(--indigo);border-radius:50%}

.stepper{display:flex;align-items:center;gap:6px;padding:14px 20px;background:var(--alabaster);border-bottom:1px solid var(--border-soft)}
.step-dot{flex:1;height:1px;background:var(--border-soft);position:relative}
.step-dot::before{content:'';position:absolute;top:-3px;left:50%;width:7px;height:7px;border:1px solid var(--border-soft);background:#fff;border-radius:50%;transform:translateX(-50%)}
.step-dot.done{background:var(--champagne)}
.step-dot.done::before{background:var(--champagne);border-color:var(--champagne)}
.step-dot.current{background:var(--champagne)}
.step-dot.current::before{width:11px;height:11px;top:-5px;border:1.5px solid var(--champagne);background:#fff}
.step-dot.current::after{content:'';position:absolute;top:-2px;left:50%;width:5px;height:5px;background:var(--champagne);border-radius:50%;transform:translateX(-50%)}
.step-num{font-family:var(--serif-en);font-size:11px;color:var(--bronze-deep);font-weight:400;padding:0 6px;letter-spacing:0.12em}

.bottom-bar{position:sticky;bottom:0;background:#FAF8F5;border-top:1px solid rgba(27,42,74,.09);box-shadow:0 -6px 20px rgba(0,0,0,.08);padding:10px 18px;display:flex;gap:10px;align-items:center;z-index:50}
.bottom-bar .price{flex:0 0 auto;font-family:var(--serif-en);font-weight:700;color:var(--slate-deep)}
.bottom-bar .price small{display:block;font-size:10px;color:var(--text-secondary);font-weight:400;letter-spacing:.04em;font-family:var(--sans-th)}
.bottom-bar .price .big{font-size:20px;color:var(--navy);font-weight:700;letter-spacing:0.02em}
.bottom-bar a, .bottom-bar button{flex:1;display:flex;align-items:center;justify-content:center;height:50px;box-sizing:border-box;padding:0 20px;background:linear-gradient(145deg,var(--navy),#243556);color:#fff;border-radius:50px;text-align:center;font-size:14px;font-weight:700;letter-spacing:0.08em;text-decoration:none;box-shadow:0 6px 18px rgba(27,42,74,.22);border:none;cursor:pointer;font-family:var(--sans-detail);transition:var(--transition-btn);position:relative;overflow:hidden}
.bottom-bar a:hover,.bottom-bar button:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 25px rgba(197,160,89,.4)}
.bottom-bar.cyan a, .bottom-bar.cyan button{background:linear-gradient(135deg,#C9A84C,#A8863E);color:var(--slate-deep);box-shadow:0 6px 20px rgba(180,140,50,.32);animation:bottom-glow 5s ease-in-out infinite}
.bottom-bar a,.bottom-bar button{animation:bottom-glow 5s ease-in-out infinite}
.bottom-bar.cyan a,.bottom-bar.cyan button{position:relative;overflow:hidden}
.bottom-bar.cyan a::after,.bottom-bar.cyan button::after{content:'';position:absolute;top:0;left:0;width:42%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),rgba(255,255,255,.88),rgba(255,255,255,.45),transparent);transform:translateX(-110%) skewX(-18deg);animation:bottom-beam 5s ease-in-out infinite;pointer-events:none;z-index:3;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.bottom-bar:not(.cyan) a::before,.bottom-bar:not(.cyan) button:not(.hold-btn)::before{content:'';position:absolute;top:0;left:0;width:42%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),rgba(255,255,255,.75),rgba(255,255,255,.35),transparent);transform:translateX(-110%) skewX(-18deg);animation:bottom-beam 5s ease-in-out infinite;pointer-events:none;z-index:3;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* Hold-to-confirm */
.bottom-bar button.hold-btn,.bottom-bar a.hold-btn{position:relative;overflow:hidden}
.bottom-bar button.hold-btn::before{content:'';position:absolute;left:0;top:0;height:100%;width:0%;background:rgba(255,255,255,.25);transition:width 0s;border-radius:inherit;pointer-events:none;z-index:2}
.bottom-bar button.hold-btn.holding::before{width:100%;transition:width 600ms linear}
@keyframes hold-btn-sweep{0%{transform:translateX(-130%) skewX(-18deg);opacity:0}8%{opacity:1}42%{opacity:.9}50%{transform:translateX(320%) skewX(-18deg);opacity:0}100%{transform:translateX(320%) skewX(-18deg);opacity:0}}
.bottom-bar button.hold-btn::after,.bottom-bar a.hold-btn::after{content:'';position:absolute;top:0;left:0;width:42%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),rgba(255,255,255,.92),rgba(255,255,255,.5),transparent);transform:translateX(-130%) skewX(-18deg);animation:hold-btn-sweep 5s ease-in-out infinite;pointer-events:none;z-index:3;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}

/* Shop Now charge bar — game power-gauge */
.shopnow-bar{padding:16px 16px calc(16px + env(safe-area-inset-bottom,0))}
@keyframes shopnow-beam{0%,55%{transform:translateX(-200%) skewX(-18deg);opacity:0}5%{opacity:1}45%{opacity:.85}56%{opacity:0}100%{transform:translateX(380%) skewX(-18deg);opacity:0}}
@keyframes shopnow-glow{0%,100%{box-shadow:0 8px 26px rgba(197,160,89,.4),0 0 0px rgba(197,160,89,0)}50%{box-shadow:0 14px 44px rgba(197,160,89,.8),0 0 28px rgba(197,160,89,.55),0 0 60px rgba(255,240,180,.18)}}
@keyframes bottom-glow{0%,100%{box-shadow:0 6px 20px rgba(180,140,50,.35),0 0 0px rgba(197,160,89,0)}50%{box-shadow:0 14px 42px rgba(197,160,89,.78),0 0 24px rgba(197,160,89,.48),0 0 56px rgba(255,240,180,.18)}}
@keyframes bottom-beam{0%{transform:translateX(-110%) skewX(-18deg);opacity:0}8%{opacity:1}88%{transform:translateX(180%) skewX(-18deg);opacity:.85}96%,100%{transform:translateX(220%) skewX(-18deg);opacity:0}}
.shopnow-btn{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;height:50px;box-sizing:border-box;padding:0 22px;border-radius:50px;text-decoration:none;cursor:pointer;font-family:var(--sans-detail);font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--slate-deep);background-image:linear-gradient(135deg,#C9A84C,#A8863E);animation:shopnow-glow 5s ease-in-out infinite!important;transition:transform .15s ease}
.shopnow-btn::before{content:'';position:absolute;top:0;left:0;width:42%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),rgba(255,255,255,.88),rgba(255,255,255,.45),transparent);transform:translateX(-110%) skewX(-18deg);animation:bottom-beam 5s ease-in-out infinite;pointer-events:none;z-index:3;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.shopnow-btn:active{transform:scale(.98)}
.shopnow-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(15,23,42,.10),rgba(15,23,42,.28));z-index:1;pointer-events:none}
.shopnow-label{position:relative;z-index:2;display:flex;align-items:center;gap:6px}
.shopnow-btn.charging{animation:none;background-image:linear-gradient(135deg,#C9A84C,#A8863E)}
.shopnow-btn.charging .shopnow-fill{width:100%;transition:width .62s cubic-bezier(.5,0,.2,1)}
.shopnow-btn.charging .shopnow-label::after{content:'';width:14px;height:14px;border-radius:50%;border:2px solid rgba(15,23,42,.35);border-top-color:var(--slate-deep);animation:spin .55s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Member signup form fields */
.signup-field{margin-bottom:12px}
.signup-field label{display:block;font-family:var(--sans-detail);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:5px}
.signup-field input{width:100%;box-sizing:border-box;padding:13px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;color:#fff;font-family:var(--sans-th);font-size:13px;outline:none;transition:border-color .2s}
.signup-field input::placeholder{color:rgba(255,255,255,.3)}
.signup-field input:focus{border-color:var(--bronze-gold)}
.signup-field input::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.5)}
.signup-field input.invalid{border-color:var(--sakura)}
@keyframes logoZoomIn{0%{transform:scale(.55);opacity:0;filter:blur(8px)}60%{opacity:1;filter:blur(0)}100%{transform:scale(1);opacity:1;filter:blur(0)}}
@keyframes founderShimmer{0%,50%{transform:translateX(-130%) skewX(-18deg)}75%,100%{transform:translateX(280%) skewX(-18deg)}}
@keyframes lockPulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.08);opacity:1}}
@keyframes tierFrameGlow{0%,100%{box-shadow:0 0 0 0 rgba(197,160,89,0)}50%{box-shadow:0 0 0 6px rgba(197,160,89,.18)}}
.reveal{opacity:0;transform:translateY(32px) scale(.94);filter:blur(8px);transition:opacity 1s cubic-bezier(0.16,1,0.3,1),transform 1s cubic-bezier(0.16,1,0.3,1),filter 1s cubic-bezier(0.16,1,0.3,1)}
.reveal.in-view{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
@keyframes sloganFadeUp{0%{transform:translateY(10px);opacity:0;letter-spacing:.32em}100%{transform:translateY(0);opacity:.85;letter-spacing:.22em}}

/* ── Contact Screen Animations (Screen 14) ── */
/* Green pulse ring — expands outward and fades: ~1.8s cycle */
@keyframes contact-pulse-ring{0%{transform:scale(1);opacity:.85}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
/* Liquid shine sweep on LINE CTA — left→right every 2.8s */
@keyframes contact-line-shine{0%,62%{transform:translateX(-170%) skewX(-20deg);opacity:0}7%{opacity:1}55%{opacity:.75}63%{opacity:0}100%{transform:translateX(270%) skewX(-20deg);opacity:0}}
/* Staggered pill entrance — slides up from 14px with fade */
@keyframes contact-pill-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
/* DBD badge shimmer — slow sweep every 4s */
@keyframes contact-dbd-shimmer{0%,68%{transform:translateX(-130%) skewX(-16deg);opacity:0}10%{opacity:.55}60%{opacity:.38}69%{opacity:0}100%{transform:translateX(230%) skewX(-16deg);opacity:0}}

/* Contact intent pill chip */
.contact-intent-pill{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 15px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background .3s ease,border-color .3s ease,transform .2s cubic-bezier(.34,1.56,.64,1);animation:contact-pill-in .55s cubic-bezier(.22,1,.36,1) both;-webkit-appearance:none}
.contact-intent-pill.active,.contact-intent-pill.was-active{background:rgba(197,160,89,.14);border-color:rgba(197,160,89,.4)}
.contact-intent-pill:active{transform:scale(.93)}

/* LINE CTA button with liquid shine */
.contact-line-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;border-radius:14px;border:none;cursor:pointer;
  background:linear-gradient(145deg,#06C755 0%,#04A843 60%,#038a39 100%);
  color:#fff;font-family:var(--sans-detail);font-size:13px;font-weight:700;letter-spacing:.08em;
  /* spring bounce on tap */
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s ease;
  box-shadow:0 8px 24px rgba(6,199,85,.3),0 2px 8px rgba(6,199,85,.2)}
/* Liquid shine strip — auto-plays via animation */
.contact-line-cta::after{content:'';position:absolute;top:0;left:0;width:38%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),rgba(255,255,255,.88),rgba(255,255,255,.45),transparent);transform:translateX(-170%) skewX(-20deg);animation:contact-line-shine 2.8s ease-in-out infinite;pointer-events:none;z-index:2}
.contact-line-cta:active{transform:scale(.96);box-shadow:0 4px 12px rgba(6,199,85,.2)}

/* Pulsing green "online" dot */
.contact-pulse-dot{position:relative;width:10px;height:10px;flex-shrink:0}
.contact-pulse-dot::before{content:'';position:absolute;inset:0;border-radius:50%;background:#10B981;z-index:1}
/* pulse ring layer */
.contact-pulse-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:rgba(16,185,129,.45);animation:contact-pulse-ring 1.8s ease-out infinite}

/* DBD badge dark card with shimmer */
.contact-dbd-badge{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--slate-deep),#0e1728);border:1px solid rgba(197,160,89,.28);border-radius:18px;padding:16px 18px;display:flex;align-items:center;gap:13px;box-shadow:0 8px 28px rgba(15,23,42,.2)}
.contact-dbd-badge::after{content:'';position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(197,160,89,.07),transparent);animation:contact-dbd-shimmer 4s ease-in-out infinite;pointer-events:none}

/* Monochromatic map container */
.contact-map{position:relative;overflow:hidden;border-radius:16px;height:108px;background:linear-gradient(135deg,#1B2A4A 0%,#0F172A 100%);border:1px solid rgba(197,160,89,.14);box-shadow:var(--shadow-soft)}

/* Intent reveal transition wrapper */
.contact-intent-reveal{overflow:hidden;max-height:0;opacity:0;transition:max-height .42s cubic-bezier(.22,1,.36,1),opacity .35s ease,padding .35s ease}
.brand-block{display:flex;flex-direction:column;align-items:flex-start;line-height:1;gap:10px}
.brand-block .logo-mark{height:56px;width:auto;object-fit:contain;object-position:left center;display:block;animation:logoZoomIn 1.4s cubic-bezier(.22,1,.36,1) both;transform-origin:left center}
.app-bar:has(.brand-block){padding-top:18px;padding-bottom:14px;align-items:center}
.brand-block .slogan-line{font-family:var(--sans-detail);font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding-left:2px;animation:sloganFadeUp 1.2s ease-out .55s both}
.app-bar.dark .brand-block .slogan-line{color:rgba(255,255,255,.7)}
.app-bar:not(.dark) .brand-block .slogan-line{color:var(--text-tertiary)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.02);opacity:1}100%{transform:scale(1);opacity:1}}
/* ── Minimal Luxury Animation System ── */
.scroll-reveal,.reveal-up{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(0.16,1,0.3,1),transform 1s cubic-bezier(0.16,1,0.3,1)}
.scroll-reveal.in-view,.reveal-up.active{opacity:1;transform:translateY(0)}
/* Stagger helpers — pair with .scroll-reveal / .reveal-up */
.stagger-1{transition-delay:0.1s}
.stagger-2{transition-delay:0.2s}
.stagger-3{transition-delay:0.3s}
.stagger-4{transition-delay:0.4s}
@keyframes cme-pulse{0%,100%{box-shadow:0 0 0 0 rgba(197,160,89,.6),0 0 18px rgba(197,160,89,.45),inset 0 0 10px rgba(252,235,230,.1)}60%{box-shadow:0 0 0 8px rgba(197,160,89,0),0 0 28px rgba(197,160,89,.7),inset 0 0 14px rgba(252,235,230,.15)}}
.brand-block{cursor:pointer}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes drawerOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
.cme-burger{position:fixed;top:16px;right:16px;z-index:9996;width:42px;height:42px;border-radius:50%;background:rgba(15,23,42,.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;box-shadow:0 8px 24px rgba(15,23,42,.25);transition:transform .2s}
.cme-burger:hover{transform:scale(1.05)}
.cme-burger span{display:block;width:18px;height:1.5px;background:#fff;border-radius:1px;transition:transform .3s,opacity .3s}
.cme-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.cme-burger.open span:nth-child(2){opacity:0}
.cme-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.cme-drawer{position:fixed;top:0;right:0;height:100vh;width:300px;max-width:85vw;background:linear-gradient(180deg,var(--slate-deep) 0%,var(--indigo-deep) 100%);z-index:9995;transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1);box-shadow:-16px 0 48px rgba(0,0,0,.4);display:flex;flex-direction:column;padding:80px 0 24px;overflow-y:auto}
.cme-drawer.open{transform:translateX(0)}
.cme-drawer-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);z-index:9994;opacity:0;pointer-events:none;transition:opacity .3s}
.cme-drawer-backdrop.open{opacity:1;pointer-events:auto}
.cme-drawer-item{display:flex;align-items:center;gap:14px;padding:13px 24px;background:none;border:none;color:rgba(255,255,255,.85);font-family:var(--sans-th);font-size:14px;text-align:left;cursor:pointer;border-left:3px solid transparent;transition:all .2s}
.cme-drawer-item:hover{background:rgba(255,255,255,.06);border-left-color:var(--bronze-gold);color:#fff}
.cme-drawer-item .num{font-family:var(--sans-detail);font-size:10px;letter-spacing:.16em;color:var(--bronze-gold);font-weight:600;min-width:24px}
.cme-drawer-divider{height:1px;background:rgba(255,255,255,.08);margin:12px 24px}
.cme-drawer-title{padding:0 24px 16px;font-family:var(--serif-en);font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:300}
.cme-drawer-group{border-bottom:1px solid rgba(255,255,255,.07)}
.cme-drawer-group-header{display:flex;align-items:center;gap:12px;width:100%;padding:16px 24px;background:none;border:none;color:rgba(255,255,255,.85);font-family:var(--sans-th);font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:background .2s}
.cme-drawer-group-header:hover{background:rgba(255,255,255,.05)}
.cme-drawer-group-header .group-icon{font-size:16px;flex-shrink:0}
.cme-drawer-group-header .group-label{flex:1}
.cme-drawer-group-header .group-chevron{font-size:16px;color:var(--bronze-gold);transition:transform .3s;font-style:normal;line-height:1}
.cme-drawer-group.open .group-chevron{transform:rotate(90deg)}
.cme-drawer-group-items{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.22,1,.36,1)}
.cme-drawer-group.open .cme-drawer-group-items{max-height:300px}
.bsh{display:flex;align-items:center;gap:8px;padding:22px 0 12px;font-family:var(--serif-en);font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase}.bsh::before,.bsh::after{content:'';flex:1;height:1px}.bsh-public{color:#4a7c59}.bsh-public::before,.bsh-public::after{background:rgba(74,124,89,.2)}.bsh-line{color:#00A651}.bsh-line::before,.bsh-line::after{background:rgba(0,166,81,.25)}.bsh-member{color:#C5A029}.bsh-member::before,.bsh-member::after{background:rgba(197,160,41,.3)}.badge-public{background:rgba(74,124,89,.15)!important;color:#4a7c59!important}.badge-line{background:#00A651!important;color:#fff!important}.badge-member{background:linear-gradient(135deg,#B8960C,#D4AF37)!important;color:#fff!important}
/* Member Gold Glow */
@keyframes goldPulse{0%,100%{box-shadow:0 0 22px rgba(212,175,55,.18),0 2px 8px rgba(212,175,55,.1),0 6px 24px rgba(0,0,0,.08)}50%{box-shadow:0 0 38px rgba(212,175,55,.32),0 2px 14px rgba(212,175,55,.2),0 8px 32px rgba(0,0,0,.1)}}
.bundle-card.member-glow{border:1.5px solid rgba(212,175,55,.55)!important;border-radius:18px!important;animation:goldPulse 3.2s ease-in-out infinite}
/* Lock Row — Modern Luxury Member Banner */
@keyframes lockShake{0%,100%{transform:translateY(-50%) translateX(0) rotate(0deg)}8%{transform:translateY(-50%) translateX(-4px) rotate(-8deg)}16%{transform:translateY(-50%) translateX(4px) rotate(8deg)}24%{transform:translateY(-50%) translateX(-3px) rotate(-5deg)}32%{transform:translateY(-50%) translateX(3px) rotate(5deg)}40%{transform:translateY(-50%) translateX(-2px) rotate(-3deg)}48%{transform:translateY(-50%) translateX(0) rotate(0deg)}}
.lock-row{position:relative;margin-top:13px;padding:13px 104px 13px 46px;border:1.5px solid rgba(242,232,236,.8);border-radius:13px;background:#F2E8EC;overflow:hidden}
.lock-row .li{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:18px;animation:lockShake 2s ease-in-out infinite}
.lock-row .lp{font-family:var(--serif-en);font-size:21px;font-weight:600;color:#1B2A4A;letter-spacing:.04em;user-select:none}
.lock-row .ll{font-family:var(--sans-detail);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(27,42,74,.5);margin-top:3px}
.lock-row .lb{position:absolute;right:9px;top:50%;transform:translateY(-50%);background:#1B2A4A;color:#fff;border:none;border-radius:18px;padding:7px 13px;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer;font-family:var(--sans-detail);text-transform:uppercase;white-space:nowrap}
/* Bundle Typography */
.bundle-body h5{font-family:var(--serif-en)!important;font-size:17px!important;font-weight:400!important;letter-spacing:.07em!important;color:var(--navy)!important;line-height:1.3!important}
.bundle-body p{font-family:var(--sans-detail)!important;font-size:10px!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--text-tertiary)!important;margin:5px 0 3px!important}
.bundle-body h5 span{font-family:var(--sans-detail)!important;font-size:11px!important;font-weight:400!important;opacity:.55;letter-spacing:normal!important;text-transform:none!important;color:var(--text-tertiary)}
/* ─── Bundle v2 · 2-group luxury minimal ─── */
.bundle-list{gap:14px}
.bundle-card{background:var(--warm-ivory)!important;border:1px solid rgba(27,42,74,.09)!important;box-shadow:0 3px 16px rgba(27,42,74,.06)!important;border-radius:16px!important}
.bundle-card.featured,.bundle-card.member-glow{animation:none!important}
.bundle-media{aspect-ratio:16/9!important;background-size:cover!important;background-position:center!important;padding:0!important;display:block!important;border-radius:0!important}
.bsh-routine{color:var(--navy)}
.bsh-routine::before,.bsh-routine::after{background:rgba(27,42,74,.16)}
.bundle-body .save-pill{background:transparent;color:var(--save);border:1px solid currentColor;font-weight:600}
.bundle-card.tall .bundle-media{aspect-ratio:3/2!important}
@keyframes chimney-smoke-a{
  0%,55%{opacity:0;transform:translateY(0) scale(.2)}
  65%{opacity:.85;transform:translateY(-3px) scale(.65)}
  80%{opacity:.4;transform:translateY(-7px) scale(1.1)}
  100%{opacity:0;transform:translateY(-13px) scale(1.7)}
}
@keyframes chimney-smoke-b{
  0%,65%{opacity:0;transform:translateY(0) scale(.2)}
  76%{opacity:.6;transform:translateY(-2px) scale(.5)}
  89%{opacity:.22;transform:translateY(-6px) scale(.95)}
  100%{opacity:0;transform:translateY(-11px) scale(1.4)}
}
.smoke-a{animation:chimney-smoke-a 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center center}
.smoke-b{animation:chimney-smoke-b 2s ease-in-out infinite .35s;transform-box:fill-box;transform-origin:center center}
@keyframes cart-vroom{
  0%,50%{transform:translateX(0) rotate(0deg)}
  62%{transform:translateX(9px) rotate(-4deg)}
  72%{transform:translateX(15px) rotate(0deg)}
  82%{transform:translateX(13px)}
  100%{transform:translateX(0) rotate(0deg)}
}
@keyframes cart-smoke{
  0%,48%{opacity:0;transform:translateX(2px) scaleX(.1);filter:blur(1px)}
  62%{opacity:.55;transform:translateX(-4px) scaleX(.9);filter:blur(3px)}
  78%{opacity:.28;transform:translateX(-10px) scaleX(1.3);filter:blur(5px)}
  100%{opacity:0;transform:translateX(-14px) scaleX(.7);filter:blur(6px)}
}
.bundle-add-btn{flex-shrink:0;width:50px;height:50px;padding:0;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;overflow:visible}
.bundle-add-btn img{border-radius:0!important;animation:cart-vroom 2s ease-in-out infinite}
.bundle-add-btn::after{content:'';position:absolute;bottom:11px;left:6px;width:20px;height:9px;background:radial-gradient(ellipse,rgba(160,160,170,.75) 0%,transparent 70%);border-radius:50%;animation:cart-smoke 2s ease-in-out infinite;pointer-events:none}
.bundle-add-btn.member-mode .bag-body{fill:#C9A227}
.bundle-add-btn.member-mode .bag-handle{stroke:#C9A227}
.cme-in-bag{position:absolute;width:12px;height:12px;object-fit:contain;top:63%;left:50%;transform:translate(-50%,-50%);filter:brightness(0) invert(1)}
.sv-strip{display:flex;align-items:center;justify-content:center;padding:10px 0 0;margin-top:10px;border-top:1px solid rgba(255,255,255,.15)}
.sv-item{display:flex;flex-direction:column;align-items:center;flex:1;padding:0 8px}
.sv-num{font-family:var(--serif-en);font-size:15px;font-weight:400;color:#E8C84A;letter-spacing:.04em}
.sv-label{font-family:var(--sans-detail);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:2px}
.sv-sep{width:1px;height:28px;background:rgba(255,255,255,.15);flex-shrink:0}
/* ── Trust Strip (Group C) ── */
.trust-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 20px;background:linear-gradient(135deg,var(--soft-peach),var(--pastel-cloud));border-bottom:1px solid var(--border-soft);scrollbar-width:none}
.trust-strip::-webkit-scrollbar{display:none}
.trust-strip span{flex-shrink:0;scroll-snap-align:start;font-family:var(--sans-detail);font-size:11px;font-weight:600;color:var(--navy);letter-spacing:.04em;white-space:nowrap}
/* ── Founder Micro (Group C) ── */
.founder-micro{display:flex;align-items:center;gap:14px;padding:20px 20px;background:var(--soft-peach);border-top:1px solid var(--border-soft)}
.founder-micro img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--bronze-gold)}
.founder-micro p{font-family:var(--serif-en);font-size:13px;font-style:italic;color:var(--navy);line-height:1.5;margin-bottom:4px}
.founder-micro span{font-family:var(--sans-detail);font-size:10px;color:var(--text-secondary);display:block;margin-bottom:6px}
.founder-micro a{font-family:var(--sans-detail);font-size:11px;color:var(--bronze-gold);font-weight:600;cursor:pointer;text-decoration:none}
/* ── Ritual Tagline (Group C) ── */
.ritual-tagline{text-align:center;padding:12px 20px 8px;font-family:var(--serif-en);font-size:13px;font-weight:400;color:var(--text-secondary);letter-spacing:.06em;font-style:italic}
/* ── Price Anchor (Group D) ── */
.price-anchor{padding:12px 20px 16px;background:transparent;border-top:none}
.cert-badge-img{width:80px;height:80px;object-fit:contain}
.cert-free-pill{display:inline-flex;align-items:center;justify-content:center;background:#1B2A4A;color:#fff;font-family:var(--sans-detail);font-size:8px;font-weight:900;letter-spacing:.12em;padding:4px 10px;border-radius:20px;white-space:nowrap}
.price-original{font-family:var(--sans-th);font-size:12px;color:var(--text-tertiary);text-decoration:line-through;margin-right:8px}
.price-member{font-family:var(--serif-en);font-size:22px;font-weight:600;color:var(--navy)}
.price-save{display:block;font-family:var(--sans-th);font-size:11px;color:var(--save);font-weight:600;margin-top:2px}
.price-daily{display:block;font-family:var(--sans-th);font-size:10px;color:var(--text-secondary);margin-top:1px}
/* ── SPF Badge (Group D) ── */
.spf-badge-overlay{display:inline-flex;flex-direction:column;align-items:flex-start;background:var(--navy);color:#fff;border-radius:12px;padding:8px 10px;text-align:center;margin-bottom:6px;box-shadow:0 4px 12px rgba(27,42,74,.3)}
.spf-number{display:block;font-family:var(--serif-en);font-size:22px;font-weight:700;color:var(--bronze-gold);line-height:1}
.spf-label{display:block;font-family:var(--sans-detail);font-size:9px;font-weight:700;color:#fff;letter-spacing:.1em;margin-top:2px}
.spf-sub{display:block;font-family:var(--sans-th);font-size:9px;color:rgba(255,255,255,.6);margin-top:1px}
/* ── Shipping Progress (Group E) ── */
.shipping-progress{padding:10px 20px 14px;background:#fff}
.shipping-bar{background:var(--border-soft);border-radius:999px;height:6px;overflow:hidden;margin-bottom:6px}
.shipping-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--bronze-gold),var(--trust-blue));transition:width .4s var(--ease-luxury)}
#shipping-msg{font-family:var(--sans-th);font-size:11px;color:var(--text-secondary)}
/* ── Founder Arc (Group G) ── */
.founder-arc{padding:0 20px 20px;display:flex;flex-direction:column;gap:12px}
.arc-item{background:#fff;border-radius:16px;padding:16px;border-left:3px solid var(--border-soft)}
.arc-item.arc-turning{border-left-color:var(--bronze-gold);background:var(--soft-peach)}
.arc-phase{display:inline-block;font-family:var(--sans-detail);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:6px}
.arc-item.arc-turning .arc-phase{color:var(--bronze-deep)}
.arc-item p{font-family:var(--serif-en);font-size:13px;font-style:italic;color:var(--navy);line-height:1.6}
/* ── Quiz Result (Group H) ── */
#quiz-result{padding:20px}
.result-cta{display:flex;align-items:center;justify-content:center;width:100%;height:52px;background:linear-gradient(145deg,var(--navy),#243556);color:#fff;border:none;border-radius:16px;font-family:var(--sans-th);font-size:14px;font-weight:700;cursor:pointer;margin-top:12px;box-shadow:0 6px 18px rgba(27,42,74,.22)}
/* ── Dark Mode (Group B) — OS auto ── */
@media (prefers-color-scheme:dark){
  :root{--matte-white:#0D1825;--soft-peach:#1A1018;--navy:#8BAAD4;--charcoal:#E8E0D4;--text-secondary:#A0A8B8;--text-tertiary:#6B7280;--border-soft:rgba(197,160,89,.12);--shadow-soft:0 4px 16px rgba(0,0,0,.3)}
  .phone{background:#131E2E}
  .cert-card,.lab-card{background:#fff!important}
}
/* ── Dark Mode — Manual override ── */
html[data-theme="dark"]{--matte-white:#0D1825;--soft-peach:#1A1018;--navy:#8BAAD4;--charcoal:#E8E0D4;--text-secondary:#A0A8B8;--text-tertiary:#6B7280;--border-soft:rgba(197,160,89,.12);--shadow-soft:0 4px 16px rgba(0,0,0,.3)}
html[data-theme="dark"] .phone{background:#131E2E}
html[data-theme="dark"] .cert-card,html[data-theme="dark"] .lab-card{background:#fff!important}
html[data-theme="dark"] body{background:#0A1120}
html[data-theme="dark"] .flow-header h1{color:#E8E0D4}
html[data-theme="dark"] .flow-tabs button{background:#1A2840;border-color:rgba(197,160,89,.18);color:#A0A8B8}
html[data-theme="dark"] .flow-tabs button.active{background:linear-gradient(145deg,var(--champagne),var(--champagne-light));color:var(--slate-deep)}
/* ── Light Mode — Force override (beats OS dark) ── */
html[data-theme="light"]{--matte-white:#FAFAF8;--soft-peach:#FDF4EE;--navy:#1B2A4A;--charcoal:#2D3142;--text-secondary:#6B7280;--text-tertiary:#9CA3AF;--border-soft:rgba(27,42,74,.1);--shadow-soft:0 4px 16px rgba(15,23,42,.08)}
html[data-theme="light"] .phone{background:#F8F6F2}
html[data-theme="light"] body{background:#F2EFE8}
html[data-theme="light"] .flow-header h1{color:#2D3142}
html[data-theme="light"] .flow-tabs button{background:#fff;border-color:rgba(27,42,74,.12);color:#6B7280}
/* ── Theme Toggle ── */
#themeToggle{display:inline-flex;align-items:center;gap:6px;background:var(--slate-deep);color:#fff;border:none;border-radius:50px;padding:8px 18px;font-family:var(--sans-detail);font-size:11px;font-weight:600;letter-spacing:.1em;cursor:pointer;box-shadow:0 4px 16px rgba(15,23,42,.2);transition:var(--transition-luxury);margin-bottom:12px}
html[data-theme="dark"] #themeToggle{background:linear-gradient(145deg,var(--champagne),var(--champagne-light));color:var(--slate-deep)}
#themeToggle .toggle-icon{font-size:14px;transition:transform .4s var(--ease-spring)}
#themeToggle:active .toggle-icon{transform:rotate(30deg) scale(1.2)}
/* ── Light Mode Bokeh / Sparkle ── */
@keyframes bokehRise{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:1}80%{opacity:.5}100%{transform:translateY(-90px) translateX(var(--bx,0px)) scale(.4);opacity:0}}
@keyframes sparkleIn{0%{transform:scale(0) rotate(0deg);opacity:0}40%{opacity:1}100%{transform:scale(1.4) rotate(120deg);opacity:0}}
.bokeh-dot{position:absolute;border-radius:50%;pointer-events:none;z-index:3;animation:bokehRise linear forwards}
.sparkle-star{position:absolute;pointer-events:none;z-index:3;animation:sparkleIn ease-out forwards;font-size:10px;user-select:none}

@keyframes sakuraDrift{0%{transform:translateY(-10px) translateX(0) rotate(0)}100%{transform:translateY(120vh) translateX(40px) rotate(360deg)}}
      .sakura-petal{position:absolute;width:8px;height:8px;background:radial-gradient(ellipse 60% 100% at 50% 50%,rgba(251,60,140,.18) 0%,transparent 70%);border-radius:50% 50% 50% 0;pointer-events:none;animation:sakuraDrift linear infinite;opacity:0}
      .signup-input:focus{border-color:rgba(201,168,76,.55)!important;background:rgba(201,168,76,.08)!important;box-shadow:0 0 0 3px rgba(201,168,76,.08)}
      #su-dob{color:#fff!important;color-scheme:dark}
      #su-dob::-webkit-calendar-picker-indicator{filter:brightness(0) invert(1);opacity:1!important;cursor:pointer;display:block!important;color:#fff}
      #su-dob::-webkit-datetime-edit{color:#fff}
      #su-dob::-webkit-datetime-edit-fields-wrapper{color:#fff}
      #su-dob::-webkit-datetime-edit-text{color:rgba(255,255,255,.5)}
      #su-dob::-webkit-datetime-edit-day-field,
      #su-dob::-webkit-datetime-edit-month-field,
      #su-dob::-webkit-datetime-edit-year-field{color:#fff}
      @keyframes ctaPulse{0%,100%{box-shadow:0 8px 24px rgba(201,168,76,.28),0 0 0 0 rgba(201,168,76,.4)}50%{box-shadow:0 8px 24px rgba(201,168,76,.35),0 0 0 8px rgba(201,168,76,0)}}
      @keyframes powerCharge{0%{left:-60%;opacity:0}4%{opacity:1}60%{left:110%;opacity:.85}65%{left:110%;opacity:0}66%,100%{left:-60%;opacity:0}}
      @keyframes doneZoomIn{0%{opacity:0;transform:scale(.72)}60%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
      @keyframes doneFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
      @keyframes powerFlash{0%,62%,100%{box-shadow:0 8px 24px rgba(201,168,76,.28),0 0 0 0 rgba(255,255,255,0)}63%{box-shadow:0 8px 40px rgba(255,255,255,.6),0 0 0 6px rgba(255,255,255,.15)}67%{box-shadow:0 8px 24px rgba(201,168,76,.28),0 0 0 0 rgba(255,255,255,0)}}
      .cta-luxury{animation:powerFlash 2.5s ease-in-out infinite;position:relative;overflow:hidden}
      .cta-luxury:hover{transform:translateY(-1px);filter:brightness(1.05)}
      @keyframes logoZoomIn-signup{0%{transform:scale(.68);opacity:0;filter:drop-shadow(0 0 0 rgba(201,168,76,0))}55%{transform:scale(1.06)}100%{transform:scale(1);opacity:1;filter:drop-shadow(0 0 24px rgba(201,168,76,.55)) drop-shadow(0 6px 18px rgba(201,168,76,.35))}}
      @keyframes logoGlowPulse{0%,100%{filter:drop-shadow(0 0 18px rgba(201,168,76,.45)) drop-shadow(0 4px 12px rgba(201,168,76,.3))}50%{filter:drop-shadow(0 0 30px rgba(201,168,76,.7)) drop-shadow(0 6px 20px rgba(201,168,76,.5))}}

@keyframes tierShimmer{0%{left:-120%}100%{left:220%}}
      @keyframes goldBannerAura{0%,100%{box-shadow:0 0 18px rgba(255,215,0,.55),0 0 36px rgba(255,215,0,.3),0 0 64px rgba(212,175,55,.18)}50%{box-shadow:0 0 32px rgba(255,215,0,1),0 0 60px rgba(255,215,0,.65),0 0 100px rgba(212,175,55,.4)}}
      @keyframes auroraHue{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(20deg)}}
      .tier-track::-webkit-scrollbar{display:none}
      .tier-card{transition:transform .3s cubic-bezier(.22,1,.36,1)}

#sf-root {
      --ivory:    #FDFBF7;
      --champ:    #FAF6ED;
      --pearl:    #FAF8F5;
      --navy:     #1B2A4A;
      --navy-dk:  #243557;
      --navy-70:  rgba(27,42,74,.70);
      --navy-45:  rgba(27,42,74,.45);
      --navy-25:  rgba(27,42,74,.25);
      --gold:     #C9A84C;
      --gold-dk:  #A8893C;
      --sakura:   #F4B8C1;
      --ease:     cubic-bezier(0.16,1,0.3,1);
      --r:        20px;
    }
    
    #sf-root{height:100%;overflow-x:hidden;color:var(--navy)}
    #sf-root ::-webkit-scrollbar{display:none}

    /* Progress */
    #pt{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(27,42,74,.08);z-index:10}
    #pf{height:100%;background:linear-gradient(90deg,var(--sakura),var(--gold));border-radius:0 2px 2px 0;transition:width .55s var(--ease);width:0%}

    /* Slides */
    #slides{position:relative;overflow:hidden;height:100%}
    .slide{
      position:absolute;inset:0;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      padding:28px 22px 36px;max-width:100%;margin:0 auto;height:100%;
      transition:transform .55s var(--ease),opacity .42s ease;will-change:transform;
    }
    .slide.active{transform:translateX(0);opacity:1;pointer-events:auto}
    .slide.out-left{transform:translateX(-100%);opacity:0;pointer-events:none}
    .slide.out-right{transform:translateX(100%);opacity:0;pointer-events:none}

    .back-btn{
      position:absolute;top:20px;left:18px;width:36px;height:36px;border-radius:50%;
      border:none;background:rgba(27,42,74,.07);cursor:pointer;font-size:17px;
      color:var(--navy);transition:background .2s;display:flex;align-items:center;justify-content:center;
    }
    .back-btn:hover{background:rgba(27,42,74,.13)}

    .tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:6px}
    .q-head{
      font-family:'Playfair Display',serif;font-size:21px;font-weight:500;
      line-height:1.45;color:var(--navy);text-align:center;margin-bottom:26px;
    }

    /* Answer cards — 3 per question */
    .answers{width:100%;display:flex;flex-direction:column;gap:10px}
    .ac{
      width:100%;padding:16px 18px;
      background:rgba(255,255,255,.75);border:1.5px solid rgba(27,42,74,.09);
      border-radius:var(--r);cursor:pointer;text-align:left;
      display:flex;align-items:flex-start;gap:14px;
      transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .28s ease,background .2s ease;
      backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
      box-shadow:0 4px 18px rgba(27,42,74,.05),inset 0 1px 0 rgba(255,255,255,.85);
      font-family:'Sarabun',sans-serif;
    }
    .ac:hover{transform:translateY(-2px) scale(1.012);box-shadow:0 10px 32px rgba(27,42,74,.11);border-color:rgba(201,168,76,.38)}
    .ac.sel{background:rgba(244,184,193,.18);border-color:rgba(201,168,76,.6);transform:scale(1.01)}
    .ac-ico{font-size:20px;flex-shrink:0;padding-top:1px}
    .ac-t{font-size:14px;font-weight:500;color:var(--navy);line-height:1.4}
    .ac-s{font-size:11px;color:var(--navy-45);margin-top:3px;line-height:1.5}
    .ac-ck{margin-left:auto;flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid rgba(27,42,74,.15);display:flex;align-items:center;justify-content:center;font-size:11px;transition:all .25s ease;margin-top:2px}
    .ac.sel .ac-ck{background:var(--gold);border-color:var(--gold);color:#fff}

    /* Processing */
    .ring{width:68px;height:68px;border-radius:50%;border:3px solid rgba(201,168,76,.18);border-top-color:var(--gold);animation:spin 1.1s linear infinite;margin:0 auto 26px}
    @keyframes spin{to{transform:rotate(360deg)}}
    .ps{font-size:12px;color:var(--navy-25);display:flex;align-items:center;gap:8px;justify-content:center;transition:color .4s,opacity .4s;opacity:0;margin-bottom:8px}
    .ps.lit{opacity:1;color:var(--navy-45)}.ps.done{color:var(--gold)}
    .pd{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}

    /* Result scroll area */
    .rscroll{width:100%;max-width:400px;overflow-y:auto;padding-bottom:28px;-webkit-overflow-scrolling:touch}
    @keyframes rv{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
    .rv{animation:rv .5s var(--ease) both}
    .d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.27s}
    .d4{animation-delay:.38s}.d5{animation-delay:.49s}.d6{animation-delay:.6s}

    .badge{font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:20px;font-weight:600}
    .bg-gold{background:rgba(201,168,76,.14);color:var(--gold-dk)}
    .bg-ok{background:rgba(52,199,89,.12);color:#2a9c44}

    .rhead{font-family:'Playfair Display',serif;font-size:19px;font-weight:500;line-height:1.5;color:var(--navy);margin-bottom:8px}
    .rbody{font-size:13px;line-height:1.8;color:var(--navy-70);margin-bottom:20px}

    /* Profile card */
    .pcard{background:rgba(255,255,255,.82);border:1.5px solid rgba(27,42,74,.07);border-radius:var(--r);padding:20px;margin-bottom:13px;box-shadow:0 6px 22px rgba(27,42,74,.06)}
    .pcard-lbl{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px}
    .pcard-head{font-family:'Playfair Display',serif;font-size:14px;font-weight:500;color:var(--navy);margin-bottom:8px}
    .pcard-body{font-size:12px;line-height:1.75;color:var(--navy-70);margin-bottom:10px}
    .sci-chip{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:rgba(255,255,255,.9);border:1px solid rgba(201,168,76,.18);border-radius:12px;margin-bottom:8px}
    .sci-chip-ico{font-size:18px;flex-shrink:0;line-height:1.3}
    .sci-chip-name{font-size:12px;font-weight:600;color:var(--navy);margin-bottom:2px}
    .sci-chip-benefit{font-size:11px;color:#A8893C;font-weight:500;line-height:1.4}
    .sci-chip-latin{font-size:9px;color:rgba(27,42,74,.3);letter-spacing:.04em;margin-top:2px}
    .warn-badge{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:#FDF2F2;border:1px solid rgba(198,40,40,.1);border-left:3px solid #e57373;border-radius:12px;margin-bottom:8px}
    .warn-badge-ico{font-size:14px;flex-shrink:0;margin-top:1px}
    .warn-badge-name{font-size:11px;font-weight:600;color:#c62828;margin-bottom:2px}
    .warn-badge-verdict{font-size:10px;color:rgba(198,40,40,.78);line-height:1.55}
    .manifesto-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
    .manifesto-body.open{max-height:600px}
    .manifesto-toggle{font-size:11px;color:#A8893C;background:none;border:none;cursor:pointer;padding:6px 0;font-family:'Sarabun',sans-serif;letter-spacing:.04em}

    /* AI Chat Box */
    .chat-box{
      background:var(--champ);border:1.5px solid rgba(201,168,76,.22);
      border-radius:var(--r);padding:20px;margin-bottom:14px;
      box-shadow:0 6px 22px rgba(27,42,74,.05);
    }
    .chat-hdr{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:4px}
    .chat-sub{font-size:12px;line-height:1.7;color:var(--navy-70);margin-bottom:10px}
    /* Product tabs */
    .prod-tabs{display:flex;gap:5px;margin-bottom:10px;background:rgba(27,42,74,.04);padding:4px;border-radius:14px}
    .prod-tab{
      flex:1;padding:8px 6px;border-radius:10px;border:none;cursor:pointer;
      font-family:'Sarabun',sans-serif;font-size:11px;font-weight:500;
      color:var(--navy-45);background:transparent;transition:all .2s;
      text-align:center;line-height:1.3;
    }
    .prod-tab.active{background:var(--navy);color:#fff;box-shadow:0 2px 6px rgba(27,42,74,.18)}
    .prod-tab:not(.active):hover{background:rgba(255,255,255,.5);color:var(--navy)}
    /* FAQ chips */
    .faq-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;min-height:32px}
    .faq-chip{
      font-size:11px;padding:6px 12px;border-radius:20px;
      border:1.5px solid rgba(201,168,76,.35);background:rgba(255,255,255,.8);
      color:var(--gold-dk);cursor:pointer;font-family:'Sarabun',sans-serif;
      transition:background .2s,border-color .2s;line-height:1.3;text-align:left;
    }
    .faq-chip:hover{background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.6)}
    .faq-chip.used{opacity:.4;cursor:default;pointer-events:none}
    .faq-empty{font-size:11px;color:var(--navy-25);font-style:italic;padding:6px 0}
    .chat-mode-label{font-size:10px;color:var(--navy-25);margin-bottom:8px;letter-spacing:.04em}
    .chat-msgs{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;max-height:260px;overflow-y:auto}
    .msg{font-size:12px;line-height:1.7;padding:10px 13px;border-radius:14px;max-width:92%}
    .msg-u{background:var(--navy);color:#fff;align-self:flex-end;border-radius:14px 14px 4px 14px}
    .msg-a{background:rgba(255,255,255,.9);color:var(--navy);align-self:flex-start;border:1px solid rgba(27,42,74,.08);border-radius:14px 14px 14px 4px}
    .msg-a em{font-style:italic;color:var(--gold)}
    .msg-dot{display:flex;gap:4px;align-items:center;padding:10px 13px}
    .msg-dot span{width:5px;height:5px;border-radius:50%;background:rgba(27,42,74,.3);animation:blink 1.2s infinite}
    .msg-dot span:nth-child(2){animation-delay:.2s}.msg-dot span:nth-child(3){animation-delay:.4s}
    @keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
    .chat-input-row{display:flex;gap:8px}
    .chat-inp{
      flex:1;padding:11px 14px;border-radius:12px;
      border:1.5px solid rgba(27,42,74,.12);background:#fff;
      font-family:'Sarabun',sans-serif;font-size:13px;color:var(--navy);
      outline:none;transition:border-color .2s;
    }
    .chat-inp:focus{border-color:var(--gold)}
    .chat-inp::placeholder{color:var(--navy-25)}
    .chat-send{
      padding:11px 16px;border-radius:12px;border:none;
      background:var(--navy);color:#fff;cursor:pointer;font-size:16px;
      transition:background .2s,transform .15s;flex-shrink:0;
    }
    .chat-send:hover{background:var(--gold);transform:translateY(-1px)}
    .chat-send:disabled{background:rgba(27,42,74,.3);cursor:not-allowed;transform:none}

    /* Welcome */
    .w-logo{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
    .w-h1{font-family:'Playfair Display',serif;font-size:34px;font-weight:500;line-height:1.2;color:var(--navy);margin-bottom:8px}
    .w-div{width:40px;height:2px;margin:0 auto 24px;background:linear-gradient(90deg,var(--sakura),var(--gold));border-radius:2px}
    .w-card{background:rgba(255,255,255,.72);border:1.5px solid rgba(255,255,255,.8);border-radius:var(--r);padding:24px;margin-bottom:22px;width:100%;text-align:left;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 6px 24px rgba(27,42,74,.07),inset 0 1px 0 rgba(255,255,255,.9)}
    .w-title{font-family:'Playfair Display',serif;font-size:18px;font-weight:500;line-height:1.45;color:var(--navy);margin-bottom:10px}
    .w-body{font-size:13px;line-height:1.8;color:var(--navy-70);margin-bottom:14px}
    .w-bullet{display:flex;align-items:center;gap:9px;margin-bottom:5px;font-size:12px;color:var(--navy-45)}
    .wdot{width:6px;height:6px;border-radius:50%;background:var(--sakura);flex-shrink:0}
    .slogan{font-family:'Playfair Display',serif;font-size:12px;font-style:italic;color:var(--gold);opacity:.8;text-align:center;margin-top:14px}

    .btn-primary{
      width:100%;padding:15px;border-radius:16px;border:none;cursor:pointer;
      font-family:'Sarabun',sans-serif;font-size:14px;font-weight:600;letter-spacing:.03em;
      background:linear-gradient(135deg,var(--navy),var(--navy-dk));color:#fff;
      box-shadow:0 6px 20px rgba(27,42,74,.28);transition:transform .2s,box-shadow .2s;margin-bottom:10px;
    }
    .btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(27,42,74,.36)}
    .btn-line{
      width:100%;padding:12px;border-radius:14px;border:1.5px solid rgba(27,42,74,.12);
      background:transparent;font-family:'Sarabun',sans-serif;font-size:13px;color:var(--navy-70);
      cursor:pointer;transition:border-color .2s;margin-bottom:8px;
    }
    .btn-line:hover{border-color:rgba(27,42,74,.28)}

    @keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
    .fu{animation:fu .6s var(--ease) both}
    .fd1{animation-delay:.1s}.fd2{animation-delay:.24s}.fd3{animation-delay:.38s}

/* === About CMe — Minimal Luxury Design System === */
      .abt-page { background:#FBF9F6; color:#2C2C2C; }
      .abt-page * { box-sizing:border-box; }

      /* Hero */
      .abt-hero {
        background:#FBF9F6;
        min-height:72vh;
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        text-align:center; padding:60px 28px 48px;
        animation:abt-fade-in .9s cubic-bezier(.22,1,.36,1) both;
      }
      @keyframes abt-fade-in { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

      /* Section shared */
      .abt-section { padding:56px 24px 48px; }
      .abt-section.ivory { background:#FBF9F6; }
      .abt-section.white { background:#FFFFFF; }
      .abt-section.oat   { background:#F3F0EA; }

      /* Typography */
      .abt-eyebrow {
        font-family:var(--sans-detail);
        font-size:9px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
        color:#C5B39B; display:block; margin-bottom:14px;
      }
      .abt-h1 {
        font-family:'Playfair Display',Georgia,serif;
        font-size:28px; font-weight:400; font-style:italic;
        line-height:1.35; letter-spacing:.01em; color:#2C2C2C; margin:0;
      }
      .abt-h2 {
        font-family:'Playfair Display',Georgia,serif;
        font-size:22px; font-weight:400;
        line-height:1.35; letter-spacing:.02em; color:#2C2C2C; margin:0 0 16px;
      }
      .abt-body {
        font-family:var(--sans-th);
        font-size:13px; line-height:1.8; letter-spacing:.02em; color:#555;
        margin:0 0 16px;
      }
      .abt-body em { font-style:italic; color:#2C2C2C; }
      .abt-body strong { color:#2C2C2C; font-weight:600; }

      /* Gold divider */
      .abt-divider {
        width:32px; height:1px; background:#C5B39B;
        margin:0 auto 24px;
      }
      .abt-divider.left { margin:0 0 20px; }

      /* Blockquote */
      .abt-quote {
        font-family:'Playfair Display',Georgia,serif;
        font-size:16px; font-style:italic; font-weight:400;
        color:#2C2C2C; line-height:1.6;
        margin:20px 0;
        padding:16px 0 16px 18px;
        border-left:2px solid #C5B39B;
      }

      /* Timeline */
      .abt-timeline { position:relative; padding-left:20px; margin:0 0 8px; }
      .abt-timeline::before {
        content:''; position:absolute; top:6px; bottom:6px; left:0;
        width:1px; background:linear-gradient(180deg,#C5B39B 0%,rgba(197,179,155,.2) 100%);
      }
      .abt-timeline-node {
        position:relative; padding-left:20px; margin-bottom:24px;
      }
      .abt-timeline-node::before {
        content:''; position:absolute; left:-24px; top:7px;
        width:6px; height:6px; border-radius:50%;
        background:#C5B39B; box-shadow:0 0 0 3px rgba(197,179,155,.2);
      }

      /* Comparison cards */
      .abt-compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0 24px; }
      .abt-compare-card {
        border-radius:16px; padding:18px 14px;
        background:#F3F0EA;
        box-shadow:0 2px 12px rgba(44,44,44,.06);
      }
      .abt-compare-card.chosen {
        background:#FFFBF3;
        box-shadow:0 4px 20px rgba(197,179,155,.2);
        border:1px solid rgba(197,179,155,.4);
      }

      /* Pillar cards */
      .abt-pillars { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:20px 0; }
      .abt-pillar {
        background:#fff; border-radius:16px; padding:18px 10px;
        text-align:center;
        box-shadow:0 2px 12px rgba(44,44,44,.06);
        border:1px solid rgba(197,179,155,.25);
        transition:transform .3s ease,box-shadow .3s ease;
      }
      .abt-pillar:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(44,44,44,.1); }

      /* Proof rows */
      .abt-proof-row {
        background:#fff; border-radius:14px; padding:14px;
        display:flex; align-items:center; gap:12px; margin-bottom:10px;
        box-shadow:0 2px 8px rgba(44,44,44,.05);
        border:1px solid rgba(197,179,155,.2);
      }

      /* CTA button */
      .abt-cta-btn {
        position:relative; overflow:hidden;
        display:inline-block;
        background:#2C2C2C; color:#FBF9F6;
        font-family:var(--sans-detail); font-size:11px; font-weight:600;
        letter-spacing:.18em; text-transform:uppercase;
        padding:14px 32px; border-radius:100px; border:none; cursor:pointer;
        transition:background .3s ease, transform .2s ease;
        text-decoration:none;
        box-shadow:0 4px 18px rgba(44,44,44,.25);
      }
      .abt-cta-btn:hover { background:#1a1a1a; transform:translateY(-2px); box-shadow:0 8px 24px rgba(44,44,44,.35); }
      @keyframes abt-shimmer{0%{transform:translateX(-130%) skewX(-18deg);opacity:0}8%{opacity:1}42%{opacity:.85}50%{transform:translateX(320%) skewX(-18deg);opacity:0}100%{transform:translateX(320%) skewX(-18deg);opacity:0}}
      .abt-cta-btn::after{content:'';position:absolute;top:0;left:0;width:38%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),rgba(255,255,255,.72),rgba(255,255,255,.3),transparent);transform:translateX(-130%) skewX(-18deg);animation:abt-shimmer 5s ease-in-out infinite;pointer-events:none;}

      /* Scroll reveal */
      .abt-reveal { opacity:0; transform:translateY(24px); transition:opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1); }
      .abt-reveal.visible { opacity:1; transform:none; }

.faq2-cat-label{font-family:var(--sans-detail);font-size:9px;letter-spacing:.22em;font-weight:600;color:#C5B39B;text-transform:uppercase;margin-bottom:10px}
      .faq2-item{border-bottom:1px solid rgba(0,0,0,.07)}
      .faq2-item:last-child{border-bottom:none}
      .faq2-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 0;background:none;border:none;cursor:pointer;text-align:left;gap:12px}
      .faq2-q{font-family:var(--sans-th);font-size:13.5px;font-weight:500;color:#2C2C2C;line-height:1.5;flex:1}
      .faq2-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:1px solid rgba(197,179,155,.6);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:300;color:#C5B39B;transition:transform .4s ease-in-out,background .3s}
      .faq2-body{max-height:0;overflow:hidden;transition:max-height .4s ease-in-out}
      .faq2-a{padding:0 0 16px;font-family:var(--sans-th);font-size:13px;color:#4A4A4A;line-height:1.8}
      .faq2-section{margin-bottom:40px}

/* Pearl Aura: pink breathe pulse */
@keyframes s17-breathe{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:.62;transform:scale(1.11)}}
@keyframes s17-breathe2{0%,100%{opacity:.15;transform:scale(1) rotate(0deg)}50%{opacity:.5;transform:scale(1.06) rotate(180deg)}}
/* Conic aura slow-spin */
@keyframes s17-aura-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Pearl outer glow pulse */
@keyframes s17-pearl-glow{0%,100%{box-shadow:0 0 18px 4px rgba(251,60,140,.22),0 0 40px 10px rgba(251,60,140,.08)}50%{box-shadow:0 0 32px 8px rgba(251,60,140,.38),0 0 64px 18px rgba(251,60,140,.14)}}
/* Shimmer sweep: liquid light across progress bar */
@keyframes s17-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(520%)}}
/* Shimmer text: gold gradient scroll */
@keyframes s17-shimmer{0%{background-position:0% center}100%{background-position:200% center}}
/* Staggered entrance */
@keyframes s17-fade-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
/* Status dot pulses */
@keyframes s17-pulse-g{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}}
@keyframes s17-pulse-a{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.55)}70%{box-shadow:0 0 0 7px rgba(251,191,36,0)}}
/* Gold CTA breathe glow */
@keyframes s17-glow-gold{0%,100%{box-shadow:0 0 14px rgba(197,160,89,.32),0 4px 22px rgba(197,160,89,.18)}50%{box-shadow:0 0 28px rgba(197,160,89,.55),0 6px 36px rgba(197,160,89,.28)}}
/* Ticket shimmer */
@keyframes s17-ticket-shimmer{0%,100%{border-color:rgba(197,160,89,.3)}50%{border-color:rgba(197,160,89,.6)}}
/* Decorative sparkle spin */
@keyframes s17-sparkle-spin{from{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.25)}to{transform:rotate(360deg) scale(1)}}
/* Tooltip pop-in */
@keyframes s17-tip-in{from{opacity:0;transform:translateX(-50%) translateY(5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* Float micro-animation */
@keyframes s17-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Stagger delay classes */
.s17-s1{animation:s17-fade-up .65s cubic-bezier(.16,1,.3,1) .06s both}
.s17-s2{animation:s17-fade-up .65s cubic-bezier(.16,1,.3,1) .14s both}
.s17-s3{animation:s17-fade-up .65s cubic-bezier(.16,1,.3,1) .22s both}
.s17-s4{animation:s17-fade-up .65s cubic-bezier(.16,1,.3,1) .30s both}
.s17-s5{animation:s17-fade-up .65s cubic-bezier(.16,1,.3,1) .38s both}
.s17-s6{animation:s17-fade-up .65s cubic-bezier(.16,1,.3,1) .46s both}
.s17-s7{animation:s17-fade-up .65s cubic-bezier(.16,1,.3,1) .54s both}

/* Liquid Gold shimmer text (Radiance label) */
.s17-radiance-label{
  background:linear-gradient(90deg,#c5a059 0%,#fff5d6 28%,#ffd700 50%,#e8c87a 72%,#c5a059 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:s17-shimmer 3.5s linear infinite;
}

/* Progress bar shimmer pseudo-element */
.s17-bar-fill{position:relative;overflow:hidden;border-radius:999px}
.s17-bar-fill::after{
  content:'';
  position:absolute;inset:0;
  width:32%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);
  /* Sweep timing: 2.4s per pass, easeInOut feel */
  animation:s17-sweep 2.4s ease-in-out infinite;
  border-radius:999px;
}

/* 3D Coupon tilt on hover — CSS perspective trick */
.s17-coupon{
  cursor:pointer;
  transition:transform .38s cubic-bezier(.16,1,.3,1), box-shadow .38s;
}
.s17-coupon:hover{
  /* rotateX(-3deg) rotateY(6deg) = subtle 3D lift */
  transform:perspective(700px) rotateX(-3deg) rotateY(6deg) scale(1.016);
}

/* Milestone tooltip — light theme */
.s17-tip{
  display:none;
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background:rgba(255,255,255,.97);
  border:1px solid rgba(197,160,89,.38);
  border-radius:11px;
  padding:9px 13px;
  min-width:152px;
  text-align:center;
  pointer-events:none;
  z-index:40;
  backdrop-filter:blur(24px);
  box-shadow:0 8px 24px rgba(27,42,74,.12);
  animation:s17-tip-in .22s cubic-bezier(.16,1,.3,1) both;
}
.s17-milestone:hover .s17-tip{display:block}

/* Tier tab state — light brand */
.s17-tier-tab{
  cursor:pointer;
  border:1px solid rgba(27,42,74,.12);
  border-radius:12px;
  padding:10px 5px;
  background:rgba(27,42,74,.04);
  font-family:var(--sans-th);
  font-size:11px;
  color:rgba(255,255,255,.55);
  font-weight:600;
  transition:all .28s cubic-bezier(.16,1,.3,1);
}
.s17-tier-tab.s17-active{
  background:rgba(197,160,89,.1);
  border-color:rgba(197,160,89,.5);
  color:#a87c30;
}

/* Gold CTA glowing pulse animation */
.s17-stack-btn{
  animation:s17-glow-gold 2.6s ease-in-out infinite;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .2s;
}
.s17-stack-btn:active{transform:scale(.97);opacity:.9}

@keyframes goldDustFall{0%{transform:translateY(-8px) translateX(0) scale(1);opacity:0}7%{opacity:1}88%{opacity:0.45}100%{transform:translateY(108vh) translateX(var(--dx,15px)) scale(0.5);opacity:0}}.gold-dust-p{position:absolute;border-radius:50%;pointer-events:none;animation:goldDustFall linear infinite}

/* ═══ About CMe — Interactions ═══ */
.pillar-card{cursor:default}
.pillar-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(27,42,74,.12)}
.review-card{transition:transform .3s var(--ease-luxury),box-shadow .3s var(--ease-luxury)}
.review-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(27,42,74,.1)}
.lab-badge{transition:transform .25s var(--ease-luxury),border-color .25s var(--ease-luxury)}
.lab-badge:hover{transform:translateY(-2px);border-color:var(--bronze-gold)}
.stat-discover{transition:transform .35s var(--ease-luxury)}
.stat-discover:hover{transform:scale(1.015)}
.founder-signoff{transition:transform .35s var(--ease-luxury),box-shadow .35s var(--ease-luxury)}
.founder-signoff:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(197,160,89,.15)}
@media (prefers-reduced-motion: reduce){
  .pillar-card:hover,.review-card:hover,.lab-badge:hover,.stat-discover:hover,.founder-signoff:hover{transform:none}
}
/* ── Member Modal — Minimal Luxury ── */
@keyframes cme-pop-in{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
#cme-member-modal{position:fixed;inset:0;background:rgba(44,44,44,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:99999;display:none;align-items:center;justify-content:center;padding:24px}
#cme-member-modal.open{display:flex}
#cme-member-modal.open .cme-modal-card{animation:cme-pop-in .5s cubic-bezier(.16,1,.3,1) forwards}
.cme-modal-card{width:100%;max-width:550px;background:#FCF9F5;border-radius:24px;padding:3.5rem 3rem;box-shadow:0 20px 40px rgba(0,0,0,.06);text-align:center;opacity:0}
.cme-modal-privilege{font-family:var(--sans-detail);font-size:.85rem;letter-spacing:.1em;color:#BD9B6D;font-weight:600;margin-bottom:18px;display:block}
.cme-modal-logo-wrap{width:80px;height:80px;border-radius:50%;background:#1B2A4A;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 4px 16px rgba(27,42,74,.15)}
.cme-modal-logo{width:52px;height:52px;object-fit:contain;display:block;filter:brightness(0) invert(1)}
.cme-modal-title{font-family:var(--sans-th);font-size:19px;font-weight:600;color:#2C2C2C;line-height:1.5;margin-bottom:12px}
.cme-modal-sub{font-family:var(--sans-th);font-size:13.5px;color:#5A5A5A;line-height:1.6;letter-spacing:.01em;margin-bottom:28px}
.cme-modal-accept{display:block;width:100%;padding:16px 24px;border-radius:50px;border:none;cursor:pointer;font-family:var(--sans-th);font-size:14px;font-weight:600;letter-spacing:.03em;color:#fff;background:#BD9B6D;margin-bottom:16px;transition:filter .2s ease,transform .15s ease}
.cme-modal-accept:hover{filter:brightness(1.08);transform:scale(1.015)}
.cme-modal-accept:active{transform:scale(.98)}
.cme-modal-skip{display:inline-block;background:none;border:none;cursor:pointer;font-family:var(--sans-th);font-size:13px;color:#8A8A8A;padding:4px 0;border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease}
.cme-modal-skip:hover{color:#2C2C2C;border-bottom-color:#2C2C2C}