/* ══════════════════════════════════════
   DESIGN SYSTEM
   BeyondMolecule · Pure Monochrome · Apple Style
══════════════════════════════════════ */
:root{
  /* Monochrome palette */
  --bg:           #FFFFFF;
  --surface:      #F5F5F5;
  --surface-2:    #EBEBEB;
  --border:       #E0E0E0;
  --border-light: #F0F0F0;

  /* Dark */
  --dark-bg:      #000000;
  --dark-surface: #111111;
  --dark-surface-2:#1A1A1A;
  --dark-border:  rgba(255,255,255,.08);

  /* Typography */
  --ink:          #000000;
  --body:         #1A1A1A;
  --muted:        #6E6E6E;
  --stone:        #A0A0A0;
  --white:        #FFFFFF;

  /* Semantic (for scan/results UI — keeping these) */
  --sage:         #3D7A3D;
  --blush:        #B84A4A;
  --teal:         #2E7070;
  --gold:         #8A7000;

  /* Legacy aliases — keeps existing code working */
  --off:          #FFFFFF;
  --light:        #F5F5F5;
  --mist:         #E0E0E0;
  --warm:         #6E6E6E;
  --brown:        #444444;
  --dark:         #1A1A1A;
  --accent:       #000000;
  --accent-dark:  #222222;
  --accent-light: #E0E0E0;

  /* Fonts */
  --sans:         'Inter', sans-serif;
  --mono:         'DM Mono', monospace;

  /* Spacing */
  --section-pad:  160px;
  --content-max:  1200px;

  /* Shadows */
  --shadow-card:  0 1px 12px rgba(0,0,0,.06);
  --shadow-hover: 0 4px 32px rgba(0,0,0,.12);
  --shadow-nav:   0 1px 0 rgba(0,0,0,.08);

  /* Radius */
  --radius-card:  16px;
  --radius-md:    12px;
  --radius-btn:   100px;
  --radius-pill:  100px;
}
*, *::before, *::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{font-family:var(--sans);background:var(--bg);color:var(--body);overflow-x:hidden;line-height:1.6;}
::selection{background:#000;color:#fff;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
::-webkit-scrollbar-track{background:transparent;}

/* ══ BRAND LOGO ══ */
/* BeyondMolecule: Montserrat, Beyond=700, Molecule=400 */
.bm-logo{
  font-family:'Montserrat',sans-serif;
  font-size:inherit;
  color:var(--ink);
  letter-spacing:-0.5px;
  white-space:nowrap;
  transition:color .3s;
}
nav.nav-dark .bm-logo{color:#ffffff;}
.bm-beyond{font-weight:700;}
.bm-mol{font-weight:400;}

/* ══ NAV ══ */
/* ══ ANNOUNCEMENT BAR ══ */
.announce-bar{
  background:#0A0A0A;
  height:36px;
  overflow:hidden;
  position:fixed;
  top:0;left:0;right:0;
  z-index:201;
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.announce-track{
  width:100%;
  overflow:hidden;
}
.announce-content{
  display:flex;
  width:max-content;
  animation:announceTicker 35s linear infinite;
}
.announce-content span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:2px;
  color:rgba(255,255,255,.6);
  text-transform:uppercase;
  white-space:nowrap;
  padding-right:0;
}
@keyframes announceTicker{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.announce-bar:hover .announce-content{
  animation-play-state:paused;
}

nav{
  position:fixed;top:36px;left:0;right:0;z-index:200;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;height:52px;
  transition:background .4s,border-color .4s;
}
nav.nav-dark{
  background:rgba(0,0,0,.82);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-logo-wrap{font-size:17px;cursor:pointer;}
.nav-links{display:flex;gap:0;align-items:stretch;height:52px;}
.nav-links a{
  font-size:13px;color:var(--muted);text-decoration:none;
  letter-spacing:.2px;transition:color .2s;
  display:flex;align-items:center;padding:0 16px;
  position:relative;border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a.nl-active{color:var(--ink);font-weight:500;border-bottom:2px solid var(--ink);}
nav.nav-dark .nav-links a{color:rgba(255,255,255,.45);}
nav.nav-dark .nav-links a:hover{color:#fff;}
nav.nav-dark .nav-links a.nl-active{color:#fff;border-bottom-color:#fff;}
.nav-btns{display:flex;gap:10px;align-items:center;}
.btn-nav-outline{background:transparent;border:1.5px solid rgba(0,0,0,.18);color:var(--ink);border-radius:var(--radius-pill);padding:7px 18px;font-size:11px;font-weight:500;letter-spacing:.5px;cursor:pointer;transition:all .2s;font-family:var(--sans);}
.btn-nav-outline:hover{border-color:var(--ink);background:var(--ink);color:#fff;}
.btn-nav-fill{background:var(--ink);color:#fff;border:none;border-radius:var(--radius-pill);padding:8px 20px;font-size:11px;font-weight:500;letter-spacing:.5px;cursor:pointer;transition:all .2s;font-family:var(--sans);}
.btn-nav-fill:hover{background:#222;transform:scale(1.02);}
nav.nav-dark .btn-nav-outline{border-color:rgba(255,255,255,.25);color:#fff;}
nav.nav-dark .btn-nav-outline:hover{background:#fff;color:#000;border-color:#fff;}
nav.nav-dark .btn-nav-fill{background:#fff;color:#000;}
nav.nav-dark .btn-nav-fill:hover{background:#e0e0e0;}

/* ══ PAGE SECTIONS ══ */
.pg{display:none;}
.pg.on{display:block;}

/* ══ GLOBAL BUTTONS ══ */
.btn-blk{background:#000;color:#fff;border:none;border-radius:var(--radius-pill);padding:14px 32px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.3px;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);display:inline-block;}
.btn-blk:hover{background:#222;transform:scale(1.02);box-shadow:0 6px 24px rgba(0,0,0,.18);}
.btn-blk:active{transform:scale(.98);}
.btn-wht{background:transparent;color:#000;border:1.5px solid rgba(0,0,0,.16);border-radius:var(--radius-pill);padding:13px 30px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.3px;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);}
.btn-wht:hover{background:#000;color:#fff;border-color:#000;transform:scale(1.02);}
.btn-accent{background:#000;color:#fff;border:none;border-radius:var(--radius-pill);padding:14px 32px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.3px;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);display:inline-block;}
.btn-accent:hover{background:#222;transform:scale(1.02);box-shadow:0 6px 24px rgba(0,0,0,.18);}

/* ══════════════════ HOME ══════════════════ */
#pg-home{padding-top:0;}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:92vh;background:var(--off);}
.hero-l{display:flex;flex-direction:column;justify-content:center;padding:80px 60px 80px 80px;}
.hero-eye{font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--warm);text-transform:uppercase;margin-bottom:24px;}
.hero-h1{font-family:'Montserrat',sans-serif;font-size:clamp(36px,4vw,62px);font-weight:700;line-height:1.05;margin-bottom:20px;color:var(--ink);}
.hero-h1 span{font-weight:400;display:block;}
.hero-p{font-size:15px;font-weight:300;color:var(--warm);line-height:1.8;max-width:400px;margin-bottom:36px;}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap;}
.hero-r{background:var(--mist);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.hero-r-inner{text-align:center;padding:60px 40px;}
/* Three face ovals to show multi-shot concept */
.hero-ovals{display:flex;gap:-8px;justify-content:center;align-items:flex-end;margin-bottom:28px;gap:8px;}
.hero-oval{border-radius:50% 50% 46% 46%;border:1px solid var(--stone);background:var(--light);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.hero-oval.main{width:120px;height:148px;}
.hero-oval.side{width:80px;height:98px;opacity:.55;}
.hero-oval-lbl{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--warm);text-transform:uppercase;text-align:center;margin-top:6px;}
.hero-oval-group{text-align:center;}
.hero-oval::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--brown),transparent);animation:heroLine 2.4s ease-in-out infinite;opacity:.45;}
@keyframes heroLine{0%{top:10%;opacity:0}10%{opacity:.6}90%{opacity:.6}100%{top:90%;opacity:0}}
.hero-label{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--warm);text-transform:uppercase;margin-bottom:10px;}
.hero-sub{font-size:13px;color:var(--brown);}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--mist);border-bottom:1px solid var(--mist);}
.stat-it{padding:26px 0;text-align:center;border-right:1px solid var(--mist);}
.stat-it:last-child{border-right:none;}
.stat-n{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.stat-l{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--warm);text-transform:uppercase;}
.sec-hdr{text-align:center;padding:80px 40px 48px;}
.sec-eye{font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--warm);text-transform:uppercase;margin-bottom:14px;}
.sec-h2{font-family:'Montserrat',sans-serif;font-size:clamp(28px,3.5vw,44px);font-weight:700;color:var(--ink);line-height:1.1;}
.sec-h2 span{font-weight:400;}
.sec-p{font-size:14px;color:var(--warm);line-height:1.8;max-width:460px;margin:14px auto 0;}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--mist);border:1px solid var(--mist);}
.step-c{background:var(--white);padding:44px 28px;text-align:center;}
.step-no{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--stone);margin-bottom:18px;}
.step-ico{font-size:28px;margin-bottom:14px;}
.step-ttl{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.step-dsc{font-size:13px;color:var(--warm);line-height:1.7;}
.phil{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);}
.phil-l{padding:100px 80px;display:flex;flex-direction:column;justify-content:center;}
.phil-r{background:#111;display:flex;flex-direction:column;justify-content:center;padding:100px 60px;}
.phil-eye{font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--stone);text-transform:uppercase;margin-bottom:20px;}
.phil-h{font-family:'Montserrat',sans-serif;font-size:clamp(28px,3vw,40px);color:var(--white);font-weight:700;line-height:1.15;margin-bottom:18px;}
.phil-h span{font-weight:400;color:var(--stone);}
.phil-p{font-size:14px;color:var(--stone);line-height:1.85;}
.phil-tags{display:flex;flex-direction:column;gap:0;}
.pt{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.pt:last-child{border:none;}
.pt-ico{width:34px;height:34px;background:rgba(255,255,255,.06);border-radius:2px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;}
.pt-t{font-size:13px;font-weight:500;color:var(--white);margin-bottom:3px;}
.pt-d{font-size:11px;color:var(--stone);line-height:1.55;}
footer{background:var(--ink);color:var(--stone);padding:60px 80px 36px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;}
.ft-brand{font-size:18px;color:var(--white);margin-bottom:10px;}
.ft-d{font-size:12px;color:var(--warm);line-height:1.75;max-width:240px;}
.ft-ct{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--warm);text-transform:uppercase;margin-bottom:14px;}
.ft-lks{display:flex;flex-direction:column;gap:9px;}
.ft-lks a{font-size:12px;color:var(--stone);text-decoration:none;transition:color .2s;}
.ft-lks a:hover{color:var(--white);}
.ft-bot{border-top:1px solid rgba(255,255,255,.07);padding-top:18px;margin-top:36px;display:flex;justify-content:space-between;font-size:11px;color:var(--warm);grid-column:1/-1;}

/* ══════════════════ SCAN PAGE ══════════════════ */
#pg-scan{padding-top:88px;background:var(--off);min-height:100vh;}

/* ── Step indicator ── */
.scan-steps-bar{
  display:flex;align-items:center;justify-content:center;
  gap:0;padding:28px 40px;border-bottom:1px solid var(--mist);
  background:var(--white);
}
.ssb-item{display:flex;align-items:center;gap:10px;}
.ssb-num{
  width:36px;height:36px;border-radius:50%;
  border:1.5px solid var(--mist);
  display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;
  color:var(--warm);background:var(--white);transition:all .3s;flex-shrink:0;
}
.ssb-label{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--warm);text-transform:uppercase;transition:color .3s;white-space:nowrap;}
.ssb-divider{width:48px;height:1px;background:var(--mist);margin:0 12px;flex-shrink:0;}
.ssb-item.done .ssb-num{background:var(--ink);border-color:var(--ink);color:var(--white);}
.ssb-item.done .ssb-label{color:var(--ink);}
.ssb-item.active .ssb-num{background:var(--white);border-color:var(--ink);color:var(--ink);}
.ssb-item.active .ssb-label{color:var(--ink);}

/* ── Capture layout ── */
.capture-layout{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:calc(100vh - 64px - 90px);
}
.capture-guide{
  display:flex;flex-direction:column;justify-content:center;
  padding:60px 56px;background:var(--off);
}
.cg-step{font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--brown);text-transform:uppercase;margin-bottom:14px;}
.cg-title{font-family:'Montserrat',sans-serif;font-size:clamp(28px,3vw,44px);font-weight:700;line-height:1.1;margin-bottom:12px;color:var(--ink);}
.cg-title span{font-weight:400;color:var(--warm);}
.cg-desc{font-size:15px;color:var(--dark);line-height:1.8;max-width:360px;margin-bottom:28px;}
.cg-tips{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;}
.cg-tip{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--dark);}
.cg-tip-dot{width:5px;height:5px;border-radius:50%;background:var(--ink);flex-shrink:0;margin-top:5px;}

/* Face direction illustration */
/* Captured preview thumbnails */
.captured-row{display:flex;gap:10px;margin-bottom:28px;}
.cap-thumb{
  width:64px;height:80px;border-radius:4px;overflow:hidden;
  border:1.5px solid var(--mist);background:var(--light);
  display:flex;align-items:center;justify-content:center;position:relative;
  flex-shrink:0;
}
.cap-thumb img{width:100%;height:100%;object-fit:cover;}
.cap-thumb.done-thumb{border-color:var(--sage);}
.cap-thumb.active-thumb{border-color:var(--ink);border-width:2px;}
.cap-thumb-lbl{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--dark);margin-top:6px;text-align:center;}
.cap-thumb-grp{display:flex;flex-direction:column;align-items:center;}
.cap-check{position:absolute;top:3px;right:3px;width:16px;height:16px;background:var(--sage);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;}

/* ── Camera viewport ── */
.cam-wrap{
  position:relative;background:#0c0906;overflow:hidden;
  min-height:calc(100vh - 64px - 90px);
}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;transform:scaleX(-1);}

/* Dark mask — handled by oval-ring box-shadow */
.vm-mask{position:absolute;inset:0;pointer-events:none;z-index:5;}

/* Bottom shot name */
.cam-shot-name{
  font-family:'Montserrat',sans-serif;font-size:clamp(18px,3vw,26px);font-weight:700;
  color:#fff;letter-spacing:3px;text-transform:uppercase;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
  transition:opacity .25s;
}
.cam-shot-dir{opacity:.65;margin-right:4px;}

/* Step dots */
.cam-step-dots{display:flex;align-items:center;gap:10px;}
.csd-dot{
  width:7px;height:7px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);
  background:transparent;transition:all .3s;
}
.csd-dot.active{background:#fff;border-color:#fff;width:9px;height:9px;}
.csd-dot.done{background:var(--sage);border-color:var(--sage);}

/* HUD */
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);z-index:14;pointer-events:none;}
.hud-brand{font-family:'Montserrat',sans-serif;font-size:15px;color:rgba(255,255,255,.95);}
.hud-brand b{font-weight:700;}
.hud-live{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.9);text-transform:uppercase;}
.ldot{width:5px;height:5px;border-radius:50%;background:#fff;animation:ld 1.5s infinite;}
@keyframes ld{0%,100%{opacity:.8}50%{opacity:.2}}
.hud-btm{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 18px 24px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);z-index:14;}
.shot-counter{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.85);text-transform:uppercase;}

/* Shutter */
.shutter{
  width:72px;height:72px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;opacity:.4;
}
.shutter.live{opacity:1;border-color:rgba(255,255,255,.8);}
.shutter.live:hover{background:rgba(255,255,255,.18);transform:scale(1.05);}
.shutter:active{transform:scale(.92)!important;}
.shutter-c{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.25);transition:all .3s;}
.shutter.live .shutter-c{background:#fff;}

/* Flash effect */
.cam-flash{position:absolute;inset:0;background:#fff;z-index:20;opacity:0;pointer-events:none;transition:opacity .08s;}
.cam-flash.pop{opacity:.85;}

/* ══════════════════ ANALYSING ══════════════════ */
.analysing-screen{
  position:fixed;inset:0;
  background:#FAFAF7;
  z-index:500;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  overflow:hidden;
}
.analysing-screen.show{display:flex;}

/* Photos row */
#analysingPhotos img{
  width:52px;height:52px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--border);
  opacity:0;
  transform:translateY(8px);
  transition:all .4s ease;
}
#analysingPhotos img.visible{
  opacity:1;transform:translateY(0);
}

/* Ring animation */
.an-ring-wrap{
  position:relative;
  width:200px;height:200px;
  margin-bottom:40px;
  flex-shrink:0;
}
.an-ring-svg{
  position:absolute;
  top:0;left:0;
  width:200px;height:200px;
}
.an-pulse{display:none;}
.an-progress-inner{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.an-pct-wrap{
  display:flex;
  align-items:baseline;
  gap:2px;
}
.an-pct{
  font-family:'Montserrat',sans-serif;
  font-size:44px;font-weight:700;
  color:var(--ink);line-height:1;
  letter-spacing:-2px;
}
.an-pct-sign{
  font-family:'Montserrat',sans-serif;
  font-size:18px;font-weight:400;
  color:var(--stone);
  line-height:1;
}
#anArc{
  transition:stroke-dashoffset .3s ease;
}

/* Status text */
.an-status{
  font-family:'Montserrat',sans-serif;
  font-size:20px;font-weight:700;
  color:var(--ink);letter-spacing:-.5px;
  margin-bottom:6px;
  text-align:center;
  transition:opacity .3s;
}
.an-substatus{
  font-family:var(--mono);font-size:9px;
  letter-spacing:3px;color:var(--stone);
  text-transform:uppercase;
  margin-bottom:40px;
  text-align:center;
  transition:opacity .3s;
}

/* Steps list */
.an-steps{
  display:flex;flex-direction:column;gap:10px;
  width:100%;max-width:320px;
}
.an-step{
  display:flex;align-items:center;gap:12px;
  opacity:.3;
  transition:opacity .4s ease;
}
.an-step.active{opacity:1;}
.an-step.done{opacity:.5;}
.an-step-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--border);
  flex-shrink:0;
  transition:background .3s;
}
.an-step.active .an-step-dot{
  background:var(--ink);
  box-shadow:0 0 0 3px rgba(0,0,0,.08);
}
.an-step.done .an-step-dot{
  background:var(--stone);
}
.an-step-text{
  font-size:13px;font-weight:400;
  color:var(--ink);
}
.an-step.active .an-step-text{font-weight:600;}

/* ══ RESULTS PAGE ══ */
#pg-results{background:#FAFAF7;}

/* Hero section */
.res-hero{background:#fff;border-bottom:1px solid var(--border);padding:32px 0 0;}
.res-hero-inner{max-width:1100px;margin:0 auto;padding:0 52px;}
.res-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;}
.res-hero-label{font-family:var(--mono);font-size:9px;letter-spacing:4px;color:var(--stone);text-transform:uppercase;}
.res-hero-actions{display:flex;gap:10px;}

/* Score + photos row */
.res-hero-main{display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:center;padding-bottom:32px;border-bottom:1px solid var(--border);}

/* Photos */
.res-photos{display:flex;gap:8px;align-items:center;}
.res-photo{border-radius:50%;object-fit:cover;border:2px solid var(--border);}
.res-photo:nth-child(2){width:64px;height:64px;border-color:var(--ink);z-index:1;}
.res-photo:nth-child(1),.res-photo:nth-child(3){width:48px;height:48px;opacity:.7;}

/* Score */
.res-score-wrap{text-align:center;}
.res-score-ring-svg{width:120px;height:120px;}
.res-score-num{font-family:'Montserrat',sans-serif;font-size:40px;font-weight:700;color:var(--ink);letter-spacing:-2px;}
.res-score-denom{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:300;color:var(--stone);}
.res-score-grade{font-family:var(--mono);font-size:9px;letter-spacing:4px;color:var(--stone);text-transform:uppercase;margin-top:4px;}

/* Skin type + insight */
.res-hero-info{flex:1;}
.res-skin-type{font-family:'Montserrat',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:700;color:var(--ink);letter-spacing:-1px;margin-bottom:8px;line-height:1;}
.res-skin-subtype{font-size:14px;font-weight:300;color:var(--muted);margin-bottom:16px;line-height:1.6;}
.res-insight{font-size:15px;font-weight:300;color:var(--body);line-height:1.7;max-width:480px;font-style:italic;}

/* Quick metrics strip */
.res-metrics-strip{display:flex;gap:0;border-top:1px solid var(--border);}
.res-metric-item{flex:1;padding:16px 0;text-align:center;border-right:1px solid var(--border);}
.res-metric-item:last-child{border-right:none;}
.res-metric-val{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.res-metric-label{font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--stone);text-transform:uppercase;}

/* Main content */
.res-main{max-width:1100px;margin:0 auto;padding:48px 52px;display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start;}

/* Routine section */
.res-routine-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:24px;}
.res-routine-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.res-routine-title{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;color:var(--ink);}
.res-routine-tabs{display:flex;gap:4px;background:var(--surface);border-radius:100px;padding:3px;}
.res-tab{font-family:var(--sans);font-size:11px;font-weight:500;padding:6px 16px;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:100px;transition:all .2s;white-space:nowrap;}
.res-tab.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.res-routine-steps{padding:8px 0;}
.res-step{display:flex;gap:16px;padding:16px 24px;border-bottom:1px solid var(--border);transition:background .2s;}
.res-step:last-child{border:none;}
.res-step:hover{background:#FAFAF7;}
.res-step-num{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--stone);flex-shrink:0;margin-top:2px;}
.res-step-body{flex:1;}
.res-step-action{font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--stone);text-transform:uppercase;margin-bottom:3px;}
.res-step-product{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.res-step-yours{background:var(--ink);color:#fff;border-radius:100px;padding:2px 8px;font-family:var(--mono);font-size:7px;letter-spacing:1px;text-transform:uppercase;font-weight:400;flex-shrink:0;}
.res-step-why{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:6px;}
.res-step-meta{display:flex;align-items:center;gap:10px;}
.res-step-duration{font-family:var(--mono);font-size:8px;letter-spacing:1px;color:var(--stone);text-transform:uppercase;}
.res-step-ingredient{background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:2px 10px;font-family:var(--mono);font-size:8px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;}
.res-step-add{background:var(--ink);color:#fff;border:none;border-radius:100px;padding:6px 14px;font-size:11px;font-weight:500;cursor:pointer;font-family:var(--sans);transition:all .2s;margin-top:8px;display:inline-block;}
.res-step-add:hover{background:#333;}

/* Sidebar cards */
.res-sidebar-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:16px;}
.res-sidebar-header{padding:14px 20px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:8px;letter-spacing:3px;color:var(--stone);text-transform:uppercase;background:var(--surface);}
.res-concern-item{padding:12px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.res-concern-item:last-child{border:none;}
.res-concern-name{font-size:13px;font-weight:500;color:var(--ink);}
.res-concern-level{font-family:var(--mono);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:3px 10px;border-radius:100px;}
.res-concern-high{background:#FEF2F2;color:#991B1B;}
.res-concern-medium{background:#FFF7ED;color:#92400E;}
.res-concern-low{background:#F0FDF4;color:#166534;}

/* Zone analysis */
.res-zone-item{padding:12px 20px;border-bottom:1px solid var(--border);}
.res-zone-item:last-child{border:none;}
.res-zone-name{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.res-zone-concern{font-size:11px;color:var(--muted);line-height:1.5;margin-bottom:6px;}
.res-zone-track{height:2px;background:var(--border);border-radius:1px;overflow:hidden;}
.res-zone-fill{height:100%;background:var(--ink);border-radius:1px;transition:width 1s cubic-bezier(.16,1,.3,1);}

/* Ingredients */
.res-ing-wrap{padding:16px 20px;display:flex;flex-wrap:wrap;gap:6px;}
.res-ing-pill{border-radius:100px;padding:4px 12px;font-family:var(--mono);font-size:8px;letter-spacing:1px;text-transform:uppercase;}
.res-ing-use{background:#F0FDF4;border:1px solid #BBF7D0;color:#166534;}
.res-ing-avoid{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;}

/* Skin age badge */
.res-age-badge{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:6px 16px;font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;}

/* Responsive */
@media(max-width:900px){
  .res-main{grid-template-columns:1fr;padding:24px;}
  .res-hero-inner{padding:0 24px;}
  .res-hero-main{grid-template-columns:1fr;gap:24px;text-align:center;}
  .res-photos{justify-content:center;}
  .res-insight{margin:0 auto;}
  .res-metrics-strip{flex-wrap:wrap;}
  .res-metric-item{flex:0 0 33.333%;}
}

/* ══════════════════ SHOP ══════════════════ */
#pg-shop{padding-top:88px;}
.shop-hero{background:var(--light);padding:80px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.shop-h1{font-family:'Montserrat',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:700;color:var(--ink);line-height:1.05;margin-bottom:14px;}
.shop-h1 span{font-weight:400;}
.shop-p{font-size:14px;color:var(--warm);line-height:1.8;margin-bottom:24px;}
.pref-row{display:flex;gap:8px;flex-wrap:wrap;padding:20px 80px;border-bottom:1px solid var(--mist);}
.pref-lbl{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--dark);text-transform:uppercase;align-self:center;margin-right:4px;}
.active-chip{background:var(--ink);color:var(--white);border-radius:100px;padding:5px 12px;font-family:var(--mono);font-size:11px;letter-spacing:1px;display:inline-flex;align-items:center;gap:5px;}
.active-chip button{background:none;border:none;color:var(--white);cursor:pointer;font-size:11px;}
.add-pref-btn{background:transparent;border:1px solid var(--mist);border-radius:100px;padding:5px 12px;font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--warm);cursor:pointer;transition:all .2s;}
.add-pref-btn:hover{border-color:var(--ink);color:var(--ink);}
.concern-filter{display:flex;gap:7px;flex-wrap:wrap;padding:14px 80px;border-bottom:1px solid var(--mist);background:var(--off);}
.cf{padding:8px 16px;border:1px solid var(--mist);border-radius:100px;font-size:13px;color:var(--dark);cursor:pointer;background:var(--white);transition:all .2s;}
.cf.on{background:var(--ink);border-color:var(--ink);color:var(--white);}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--mist);padding-bottom:80px;}
.pc{background:var(--white);cursor:pointer;position:relative;transition:none;}
.pc-img{aspect-ratio:1;background:var(--light);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pc-emoji{font-size:68px;transition:transform .4s ease;}
.pc:hover .pc-emoji{transform:scale(1.06);}
.pc-body{padding:16px 18px 20px;}
.pc-cat{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--warm);text-transform:uppercase;margin-bottom:6px;}
.pc-name{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:3px;line-height:1.25;}
.pc-tag{font-size:13px;color:var(--dark);margin-bottom:10px;line-height:1.5;}
.pc-chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:11px;}
.pc-chip{background:var(--light);border-radius:100px;padding:4px 10px;font-family:var(--mono);font-size:9px;color:var(--warm);}
.pc-chip.match{background:rgba(122,140,114,.12);color:var(--sage);}
.pc-bot{display:flex;align-items:center;justify-content:space-between;}
.pc-price{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:var(--ink);}
.pc-add{background:var(--ink);color:var(--white);border:none;border-radius:2px;padding:7px 13px;font-family:var(--mono);font-size:11px;letter-spacing:1px;cursor:pointer;transition:background .2s;}
.pc-add:hover{background:#222;}
.pc-badge{position:absolute;top:10px;right:10px;background:var(--ink);color:var(--white);border-radius:100px;padding:3px 9px;font-family:var(--mono);font-size:10px;letter-spacing:1px;}

/* ══ PREFERENCE PANEL ══ */
.pref-panel{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.75);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;}
.pref-panel.open{display:flex;}
.pref-box{background:var(--white);width:min(540px,94vw);border-radius:4px;overflow:hidden;}
.pref-hdr{padding:28px 32px 20px;border-bottom:1px solid var(--mist);}
.pref-ttl{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.pref-sub{font-size:13px;color:var(--warm);}
.pref-body{padding:24px 32px;}
.pref-sec{margin-bottom:20px;}
.pref-sec-lbl{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--warm);text-transform:uppercase;margin-bottom:10px;}
.pref-chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{padding:7px 15px;border:1px solid var(--mist);border-radius:100px;font-size:12px;color:var(--warm);cursor:pointer;transition:all .2s;background:var(--white);}
.chip:hover{border-color:var(--ink);color:var(--ink);}
.chip.sel{background:var(--ink);border-color:var(--ink);color:var(--white);}
.pref-ftr{padding:16px 32px 24px;display:flex;justify-content:space-between;align-items:center;}
.pref-cancel{font-size:12px;color:var(--warm);cursor:pointer;text-decoration:underline;}


/* ══ ALIGN PILL ══ */
.align-pill{
  position:absolute;top:7%;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.65);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);border-radius:100px;
  padding:6px 16px;font-family:var(--mono);font-size:11px;letter-spacing:2px;
  color:rgba(255,255,255,.9);text-transform:uppercase;
  pointer-events:none;z-index:12;white-space:nowrap;
}

/* ══ SHOT LABEL ══ */
.cam-shot-label-wrap{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;
  color:#fff;letter-spacing:2px;
}
.cam-arrow-left,
.cam-arrow-right{
  font-size:22px;color:#fff;font-weight:400;
  opacity:0;transition:opacity .3s;
}
.cam-arrow-left.show,
.cam-arrow-right.show{opacity:1;}

/* ══ LIGHTING PILL ══ */
.light-pill{
  position:absolute;top:76px;left:50%;transform:translateX(-50%);
  padding:6px 14px;border-radius:100px;
  font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:#fff;z-index:15;white-space:nowrap;pointer-events:none;
  transition:opacity .4s;
}
.light-pill.warn{background:rgba(160,100,0,.88);}
.light-pill.good{background:rgba(70,120,80,.85);}

/* ══ DIST WARNING ══ */
.dist-warn{
  font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:rgba(255,200,80,1);
  text-transform:uppercase;text-align:center;margin-bottom:2px;
}

/* ══ SCAN INTRO ══ */
#scan-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;padding:48px 24px;text-align:center;}
.scan-intro-inner{max-width:480px;width:100%;}
.si-tag{font-family:var(--mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--warm);margin-bottom:20px;}
.si-title{font-family:'Montserrat',sans-serif;font-size:clamp(28px,5vw,44px);font-weight:800;color:var(--ink);line-height:1.1;margin-bottom:20px;}
.si-desc{font-size:14px;color:var(--warm);line-height:1.7;max-width:380px;margin:0 auto 28px;}
.si-metrics{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px;}
.si-pill{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);border-radius:20px;padding:6px 14px;}

/* ══ PRE-SCAN SCREEN ══ */
.prescan-item{display:flex;gap:16px;align-items:flex-start;text-align:left;}
.prescan-ico{font-size:22px;flex-shrink:0;margin-top:1px;}
.prescan-ttl{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.prescan-desc{font-size:12px;color:var(--warm);line-height:1.65;}

/* ══ FAQ PAGE ══ */
.faq-item{padding:32px 0;border-bottom:1px solid var(--mist);}
.faq-q{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:700;color:var(--ink);margin-bottom:12px;line-height:1.3;}
.faq-a{font-size:14px;color:var(--warm);line-height:1.85;}
.faq-a strong{color:var(--ink);font-weight:600;}

/* ══ INGREDIENT GUIDE PAGE ══ */
.ing-item{padding:36px 0;border-bottom:1px solid var(--mist);}
.ing-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;gap:16px;}
.ing-name{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.ing-aka{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--stone);text-transform:uppercase;}
.ing-badge{background:var(--ink);color:var(--white);border-radius:100px;padding:4px 12px;font-family:var(--mono);font-size:8px;letter-spacing:1px;white-space:nowrap;flex-shrink:0;}
.ing-targets{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--teal);text-transform:uppercase;margin-bottom:14px;}
.ing-desc{font-size:14px;color:var(--dark);line-height:1.85;margin-bottom:18px;}
.ing-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.ing-lbl{font-family:var(--mono);font-size:8px;letter-spacing:2px;text-transform:uppercase;margin-bottom:5px;}
.ing-lbl.works{color:var(--sage);}
.ing-lbl.caution{color:var(--blush);}
.ing-val{font-size:13px;color:var(--ink);line-height:1.6;}
@media(max-width:900px){
  .ing-row{grid-template-columns:1fr;}
  .faq-item,.ing-item{padding:24px 0;}
  #pg-faq div[style*="padding:60px 80px"],#pg-faq div[style*="padding:80px 80px"],
  #pg-ingredientguide div[style*="padding:60px 80px"],#pg-ingredientguide div[style*="padding:80px 80px"]{padding:40px 24px !important;}
}

/* ══ PRIVACY POLICY PAGE ══ */
.pp-section{padding:40px 0;border-bottom:1px solid var(--mist);}
.pp-no{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:4px;color:var(--stone);text-transform:uppercase;margin-bottom:8px;}
.pp-title{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:var(--ink);margin-bottom:16px;}
.pp-body p{font-size:14px;color:var(--warm);line-height:1.85;margin-bottom:12px;}
.pp-body p:last-child{margin-bottom:0;}
.pp-body strong{color:var(--ink);font-weight:600;}
.pp-list{margin:12px 0 12px 20px;display:flex;flex-direction:column;gap:8px;}
.pp-list li{font-size:14px;color:var(--warm);line-height:1.75;}
.pp-list li strong{color:var(--ink);}
.pp-details{background:var(--off);border-radius:4px;padding:20px;margin:16px 0;display:flex;flex-direction:column;gap:10px;}
.pp-detail-row{display:flex;gap:20px;font-size:13px;color:var(--warm);line-height:1.6;}
.pp-detail-lbl{font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--stone);text-transform:uppercase;min-width:90px;flex-shrink:0;padding-top:2px;}
.pp-table{border:1px solid var(--mist);border-radius:4px;overflow:hidden;margin:16px 0;}
.pp-table-row{display:grid;grid-template-columns:1fr 2fr 2fr;border-bottom:1px solid var(--mist);font-size:13px;}
.pp-table-row:last-child{border-bottom:none;}
.pp-table-row span{padding:12px 14px;color:var(--warm);line-height:1.6;border-right:1px solid var(--mist);}
.pp-table-row span:last-child{border-right:none;}
.pp-table-header{background:var(--off);}
.pp-table-header span{font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--stone);text-transform:uppercase;font-weight:400;}
@media(max-width:900px){
  #pg-privacy div[style*="padding:60px 80px"],#pg-privacy div[style*="padding:80px 80px"]{padding:40px 24px !important;}
  .pp-table-row{grid-template-columns:1fr;}
  .pp-table-row span{border-right:none;}
  .pp-detail-row{flex-direction:column;gap:4px;}
}

/* ══ CART DRAWER ══ */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;opacity:0;pointer-events:none;transition:opacity .3s;}
.cart-overlay.open{opacity:1;pointer-events:all;}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--white);z-index:301;transform:translateX(100%);transition:transform .35s ease;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.08);}
.cart-drawer.open{transform:translateX(0);}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--mist);}
.cart-title{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;}
.cart-badge{background:var(--ink);color:var(--white);border-radius:50%;width:20px;height:20px;font-size:11px;font-weight:700;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;}
.cart-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--warm);padding:4px;}
.cart-drawer-body{flex:1;overflow-y:auto;padding:0 24px;}
.cart-footer{padding:20px 24px;border-top:1px solid var(--mist);}
.cart-totals{display:flex;flex-direction:column;gap:8px;}
.ct-row{display:flex;justify-content:space-between;font-size:13px;color:var(--warm);}
.ct-total{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:var(--ink);padding-top:8px;border-top:1px solid var(--mist);}

/* ══ CART BADGE IN NAV ══ */
.nav-cart-btn{position:relative;background:transparent;border:1.5px solid rgba(0,0,0,.15);color:var(--ink);border-radius:var(--radius-pill);padding:7px 16px;font-size:11px;font-weight:500;letter-spacing:.4px;cursor:pointer;transition:all .2s;font-family:var(--sans);display:flex;align-items:center;gap:6px;}
.nav-cart-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
nav.nav-dark .nav-cart-btn{border-color:rgba(255,255,255,.2);color:#fff;}
nav.nav-dark .nav-cart-btn:hover{background:#fff;color:#000;border-color:#fff;}

/* ══ USER DROPDOWN ══ */
.nav-user-btn{
  display:flex;align-items:center;gap:8px;
  background:transparent;border:none;
  cursor:pointer;padding:4px 8px;
  border-radius:var(--radius-pill);
  transition:background .2s;
  font-family:var(--sans);
}
.nav-user-btn:hover{background:var(--surface);}
nav.nav-dark .nav-user-btn:hover{background:rgba(255,255,255,.08);}
.nav-user-avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;
  font-size:11px;font-weight:700;
  color:var(--ink);flex-shrink:0;overflow:hidden;
}
nav.nav-dark .nav-user-avatar{background:rgba(255,255,255,.12);color:#fff;}
.nav-user-avatar img{width:100%;height:100%;object-fit:cover;}
.nav-user-name{font-size:12px;font-weight:500;color:var(--ink);white-space:nowrap;}
nav.nav-dark .nav-user-name{color:#fff;}
.nav-user-chevron{font-size:9px;color:var(--stone);transition:transform .2s;}
nav.nav-dark .nav-user-chevron{color:rgba(255,255,255,.3);}
.nav-user-btn.open .nav-user-chevron{transform:rotate(180deg);}

.nav-dropdown{
  position:absolute;
  top:calc(100% + 8px);right:0;
  width:260px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
  overflow:hidden;
  opacity:0;
  transform:translateY(-8px) scale(.98);
  pointer-events:none;
  transition:all .2s cubic-bezier(.16,1,.3,1);
  z-index:300;
}
.nav-dropdown.open{
  opacity:1;transform:translateY(0) scale(1);pointer-events:all;
}
.nav-dd-header{
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.nav-dd-name{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:2px;}
.nav-dd-email{font-size:11px;color:var(--stone);}
.nav-dd-items{padding:6px 0;border-bottom:1px solid var(--border);}
.nav-dd-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;
  font-size:13px;color:var(--body);
  cursor:pointer;transition:background .15s;
  border:none;background:transparent;
  width:100%;text-align:left;
  font-family:var(--sans);
}
.nav-dd-item:hover{background:var(--surface);}
.nav-dd-item-icon{
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;color:var(--muted);
}
.nav-dd-signout{padding:6px 0;}
.nav-dd-signout-btn{
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;
  font-size:13px;color:var(--blush);
  cursor:pointer;transition:background .15s;
  border:none;background:transparent;
  width:100%;text-align:left;
  font-family:var(--sans);
}
.nav-dd-signout-btn:hover{background:#fff5f5;}
.nav-cart-count{background:var(--ink);color:var(--white);border-radius:50%;width:18px;height:18px;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;}

/* ══ CHECKOUT ══ */
.checkout-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:400;display:none;align-items:center;justify-content:center;padding:20px;}
.checkout-overlay.open{display:flex;}
.checkout-modal{background:var(--white);width:min(520px,100%);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;max-height:90vh;}
.co-header{padding:20px 24px;border-bottom:1px solid var(--mist);display:flex;align-items:center;justify-content:space-between;}
.co-back{background:none;border:none;font-size:13px;color:var(--warm);cursor:pointer;padding:0;}
.co-title{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:var(--ink);}
.co-step{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--stone);}
.co-body{flex:1;overflow-y:auto;padding:24px;}
.co-footer{padding:16px 24px;border-top:1px solid var(--mist);}
.co-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.co-field label{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--warm);text-transform:uppercase;}
.co-field input{border:1px solid var(--mist);border-radius:2px;padding:11px 14px;font-size:14px;font-family:var(--sans);color:var(--ink);outline:none;transition:border .2s;}
.co-field input:focus{border-color:var(--ink);}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* ══ SUCCESS ══ */
.success-overlay{position:fixed;inset:0;background:var(--white);z-index:500;display:none;align-items:center;justify-content:center;padding:20px;}
.success-overlay.open{display:flex;}
.success-modal{text-align:center;max-width:400px;width:100%;}

/* ══ PRODUCT DETAIL ══ */
.pd-thumb{width:72px;height:72px;border-radius:4px;overflow:hidden;border:1.5px solid var(--mist);cursor:pointer;background:var(--light);flex-shrink:0;transition:border-color .2s;}
.pd-thumb:hover{border-color:var(--stone);}
.pd-thumb.active{border-color:var(--ink);}
.pd-thumb img{width:100%;height:100%;object-fit:cover;}
.pd-benefit{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--dark);}
.pd-benefit-dot{width:5px;height:5px;border-radius:50%;background:var(--ink);flex-shrink:0;margin-top:5px;}

/* ══ LOGIN MODAL ══ */
.login-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:600;display:none;align-items:center;justify-content:center;padding:20px;}
.login-modal-overlay.open{display:flex;}
.login-modal-box{background:var(--white);width:min(400px,100%);border-radius:4px;padding:36px 32px;position:relative;}
.login-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:16px;cursor:pointer;color:var(--stone);}
.google-signin-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px 20px;border:1px solid var(--mist);border-radius:2px;background:var(--white);cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink);transition:all .2s;}
.google-signin-btn:hover{background:var(--light);border-color:var(--stone);}

/* ══ HISTORY ══ */
#historyContent{max-width:900px;margin:0 auto;padding:48px 80px;}
@media(max-width:700px){#historyContent{padding:32px 20px;}}
.hist-graph-wrap{background:#fff;border:1px solid var(--border);border-radius:6px;padding:24px;margin-bottom:32px;}
.hist-graph-label{font-family:var(--mono);font-size:9px;letter-spacing:3px;color:var(--stone);text-transform:uppercase;margin-bottom:12px;}
.hist-graph-svg{width:100%;height:auto;display:block;}
.hist-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
.hist-header>div{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:var(--ink);}
.hist-card{background:#fff;border:1px solid var(--border);border-radius:6px;margin-bottom:12px;overflow:hidden;}
.hist-card-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;cursor:pointer;gap:12px;transition:background .15s;}
.hist-card-head:hover{background:var(--off);}
.hist-card-left{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
.hist-card-date{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--stone);text-transform:uppercase;}
.hist-card-score{font-family:'Montserrat',sans-serif;font-size:28px;font-weight:700;color:var(--ink);line-height:1;}
.hist-card-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hist-badge{background:var(--off);border-radius:100px;padding:4px 12px;font-family:var(--mono);font-size:8px;letter-spacing:1px;color:var(--warm);text-transform:uppercase;}
.hist-card-chevron{font-size:18px;color:var(--stone);transition:transform .2s;flex-shrink:0;line-height:1;}
.hist-card-body{padding:0 24px 20px;border-top:1px solid var(--border);}
.hist-metrics{display:flex;flex-direction:column;gap:8px;padding-top:20px;margin-bottom:16px;}
.hist-metric{display:grid;grid-template-columns:100px 1fr 36px;align-items:center;gap:10px;}
.hist-metric-label{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--stone);text-transform:uppercase;}
.hist-metric-bar{background:var(--off);border-radius:4px;height:4px;overflow:hidden;}
.hist-metric-fill{height:100%;background:var(--ink);border-radius:4px;}
.hist-metric-val{font-family:var(--mono);font-size:9px;color:var(--warm);text-align:right;}
.hist-section-label{font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--stone);text-transform:uppercase;margin:12px 0 8px;}
.hist-pills{display:flex;flex-wrap:wrap;gap:6px;}
.hist-pill{background:var(--off);border:1px solid var(--border);border-radius:100px;padding:3px 10px;font-family:var(--mono);font-size:8px;color:var(--warm);}
.hist-pill-high{background:#fef2f2;border-color:#fecaca;color:#991b1b;}
.hist-pill-medium{background:#fffbeb;border-color:#fde68a;color:#92400e;}
.hist-pill-low{background:#f0fdf4;border-color:#bbf7d0;color:#166534;}
.hist-insight{padding:12px 14px;background:var(--off);border-radius:4px;font-size:12px;color:var(--warm);font-style:italic;line-height:1.6;margin-top:4px;}
.hist-cards{display:flex;flex-direction:column;gap:12px;}
.hist-graph-section{background:#fff;border:1px solid var(--border);border-radius:6px;padding:24px;margin-bottom:24px;}
.hist-graph-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.hist-graph-title{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;color:var(--ink);}
.hist-graph-sub{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--stone);text-transform:uppercase;margin-top:4px;}
.hist-score-now{text-align:right;}
.hist-score-val{font-family:'Montserrat',sans-serif;font-size:32px;font-weight:700;color:var(--ink);line-height:1;}
.hist-score-label{font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--stone);text-transform:uppercase;margin-top:4px;}
.hist-graph-insight{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.5;}

/* ══ NAV CART ICON (logged out) ══ */
.nav-cart-icon-btn{position:relative;background:transparent;border:1px solid var(--border);border-radius:var(--radius-pill);width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s;}
.nav-cart-icon-btn:hover{border-color:var(--ink);}
nav.nav-dark .nav-cart-icon-btn{border-color:rgba(255,255,255,.15);color:#fff;}
nav.nav-dark .nav-cart-icon-btn:hover{border-color:rgba(255,255,255,.5);}
nav.nav-dark .nav-cart-icon-btn svg path,
nav.nav-dark .nav-cart-icon-btn svg line{stroke:#fff;}

/* Nav dark mode — logged-in state */
nav.nav-dark [data-logged="true"] span[style*="color:var(--ink)"],
nav.nav-dark [data-logged="true"] span:not([style*="color"]){
  color:#fff !important;
}
nav.nav-dark [data-logged="true"] #navPlanLabel{
  color:rgba(255,255,255,.3) !important;
}
nav.nav-dark [data-logged="true"] button{
  color:rgba(255,255,255,.4) !important;
}
nav.nav-dark [data-logged="true"] button:hover{
  background:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.8) !important;
}
nav.nav-dark [data-logged="true"] div[style*="background:var(--border)"]{
  background:rgba(255,255,255,.1) !important;
  color:#fff !important;
}

/* ══ HERO EDITORIAL (right side) ══ */
.hero-editorial{display:flex;flex-direction:column;justify-content:center;padding:80px 72px;height:100%;background:var(--ink);position:relative;overflow:hidden;}
.hero-editorial::before{content:'';position:absolute;top:-60px;right:-60px;width:320px;height:320px;border-radius:50%;border:1px solid rgba(255,255,255,.04);pointer-events:none;}
.hero-editorial::after{content:'';position:absolute;bottom:-80px;left:-80px;width:400px;height:400px;border-radius:50%;border:1px solid rgba(255,255,255,.03);pointer-events:none;}
.hero-ed-no{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:6px;color:rgba(255,255,255,.2);text-transform:uppercase;margin-bottom:40px;}
.hero-ed-statement{margin-bottom:48px;}
.hero-ed-line{font-family:'Montserrat',sans-serif;font-size:clamp(28px,3.2vw,48px);font-weight:700;color:#fff;line-height:1.15;letter-spacing:-0.5px;display:block;}
.hero-ed-line--light{font-weight:400;color:rgba(255,255,255,.45);}
.hero-ed-divider{width:40px;height:1px;background:rgba(255,255,255,.2);margin-bottom:32px;}
.hero-ed-detail{display:flex;flex-direction:column;gap:14px;}
.hero-ed-detail-item{display:flex;align-items:center;gap:14px;}
.hero-ed-detail-no{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;color:rgba(255,255,255,.25);letter-spacing:2px;width:24px;flex-shrink:0;}
.hero-ed-detail-txt{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.5);text-transform:uppercase;}

/* ══ TOAST ══ */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--white);padding:10px 20px;border-radius:2px;font-size:12px;z-index:999;opacity:0;transition:opacity .3s;white-space:nowrap;max-width:90vw;pointer-events:none;}
.toast.on{opacity:1;}

/* ══ RESPONSIVE ══ */
@media(max-width:900px){
  nav{padding:0 20px;}
  .nav-links{display:none;}
  .hero{grid-template-columns:1fr;}.hero-r{display:none;}
  .hero-l{padding:48px 24px;}
  .capture-layout{grid-template-columns:1fr;}.capture-guide{padding:32px 24px;order:2;}
  .cam-wrap{min-height:calc(100svh - 64px);order:1;}
  .shop-hero{grid-template-columns:1fr;padding:48px 24px;}
  .pref-row,.concern-filter{padding:14px 20px;}
  footer{grid-template-columns:1fr;padding:40px 24px;}
  .stats-strip{grid-template-columns:1fr 1fr;}
  .steps-grid{grid-template-columns:1fr 1fr;}
  .phil{grid-template-columns:1fr;}
  .scan-steps-bar{gap:8px;padding:20px 16px;flex-wrap:wrap;justify-content:flex-start;}
  .ssb-divider{width:24px;}
}
/* ══ PRICING PAGE ══ */
.plan-card{background:var(--white);border:1px solid var(--mist);border-radius:4px;padding:24px;display:flex;flex-direction:column;transition:box-shadow .2s;}
.plan-card:hover{box-shadow:0 4px 24px rgba(0,0,0,.06);}
.plan-card-featured{background:var(--ink);border-color:var(--ink);}
.plan-badge-wrap{display:flex;align-items:center;margin-bottom:8px;}
.plan-badge{background:var(--gold);color:#fff;border-radius:100px;padding:3px 10px;font-family:var(--mono);font-size:8px;letter-spacing:1px;text-transform:uppercase;}
.plan-name{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--warm);text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;}
.plan-card-featured .plan-name{color:rgba(255,255,255,.5);}
.plan-price-wrap{display:flex;align-items:baseline;gap:6px;margin-bottom:4px;}
.plan-price{font-family:'Montserrat',sans-serif;font-size:32px;font-weight:700;color:var(--ink);line-height:1;}
.plan-card-featured .plan-price{color:#fff;}
.plan-period{font-size:12px;color:var(--warm);}
.plan-card-featured .plan-period{color:rgba(255,255,255,.5);}
.plan-gst-note{font-family:var(--mono);font-size:8px;letter-spacing:1px;color:var(--stone);text-transform:uppercase;margin-bottom:16px;}
.plan-card-featured .plan-gst-note{color:rgba(255,255,255,.3);}
.plan-divider{height:1px;background:var(--mist);margin-bottom:16px;}
.plan-card-featured .plan-divider{background:rgba(255,255,255,.1);}
.plan-features{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;flex:1;}
.plan-feature{font-size:12px;color:var(--dark);line-height:1.5;}
.plan-card-featured .plan-feature{color:rgba(255,255,255,.8);}
.plan-feature.muted{color:var(--stone);}
.plan-btn{width:100%;padding:13px;border-radius:2px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .2s;margin-bottom:8px;}
.plan-btn-fill{background:#fff;color:var(--ink);border:none;}
.plan-card:not(.plan-card-featured) .plan-btn-fill{background:var(--ink);color:#fff;}
.plan-btn-fill:hover{opacity:.85;}
.plan-btn-outline{background:transparent;color:var(--ink);border:1px solid var(--mist);}
.plan-btn-outline:hover{border-color:var(--ink);}
.plan-note{font-family:var(--mono);font-size:8px;letter-spacing:1px;color:var(--stone);text-align:center;text-transform:uppercase;}
.plan-card-featured .plan-note{color:rgba(255,255,255,.3);}
/* ══ DASHBOARD PAGES ══ */
.dash-header{background:var(--surface);border-bottom:1px solid var(--border);padding:60px 0 48px;}
.dash-header-inner{max-width:900px;margin:0 auto;padding:0 48px;}
.dash-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:4px;color:var(--stone);text-transform:uppercase;margin-bottom:12px;}
.dash-title{font-family:'Montserrat',sans-serif;font-size:clamp(28px,4vw,40px);font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-1px;}
.dash-sub{font-size:15px;color:var(--muted);font-weight:300;}
.dash-content{max-width:900px;margin:0 auto;padding:48px 48px 80px;}
.dash-section{margin-bottom:48px;}
.dash-section-title{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.5px;text-transform:uppercase;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.dash-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;}
.dash-row{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);font-size:14px;}
.dash-row:last-child{border-bottom:none;}
.dash-row-label{color:var(--muted);font-size:13px;font-weight:400;}
.dash-row-value{color:var(--ink);font-size:13px;font-weight:500;text-align:right;}
.dash-progress-wrap{padding:20px;}
.dash-progress-label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px;}
.dash-progress-label span:first-child{color:var(--muted);}
.dash-progress-label span:last-child{font-family:'Montserrat',sans-serif;font-weight:700;color:var(--ink);}
.dash-progress-track{height:4px;background:var(--surface);border-radius:2px;overflow:hidden;}
.dash-progress-fill{height:100%;background:var(--ink);border-radius:2px;transition:width 1s cubic-bezier(.16,1,.3,1);}
.dash-plan-badge{display:inline-flex;align-items:center;background:var(--ink);color:#fff;border-radius:var(--radius-pill);padding:4px 14px;font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;}
.dash-danger-zone{background:#fff5f5;border:1px solid #ffd5d5;border-radius:var(--radius-md);padding:24px;}
.dash-danger-title{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:var(--blush);margin-bottom:8px;}
.dash-danger-desc{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:16px;}
.dash-danger-btn{background:transparent;border:1px solid var(--blush);color:var(--blush);border-radius:var(--radius-pill);padding:9px 20px;font-size:12px;font-family:var(--sans);cursor:pointer;transition:all .2s;}
.dash-danger-btn:hover{background:var(--blush);color:#fff;}
@media(max-width:768px){
  .dash-header-inner,.dash-content{padding-left:24px;padding-right:24px;}
}

/* ══ ROUTINE BUILDER SECTION ══ */
.routine-section{
  background:#FFFFFF;
  padding:var(--section-pad) 0;
  border-bottom:1px solid var(--border);
}
.routine-inner{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 52px;
}
.routine-header{
  text-align:center;
  margin-bottom:64px;
}
.routine-eyebrow{
  font-family:var(--mono);font-size:10px;
  letter-spacing:4px;color:var(--stone);
  text-transform:uppercase;margin-bottom:16px;
}
.routine-headline{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(36px,5vw,64px);
  font-weight:700;line-height:1.0;
  color:var(--ink);letter-spacing:-2px;
  margin-bottom:16px;
}
.routine-sub{
  font-size:15px;color:var(--muted);
  line-height:1.75;font-weight:300;
  max-width:480px;margin:0 auto;
}
.routine-content{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:32px;
  align-items:start;
  margin-bottom:64px;
}
.routine-concerns{
  display:flex;flex-direction:column;gap:8px;
}
.concern-card{
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px 18px;
  cursor:pointer;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  background:var(--white);
}
.concern-card:hover{
  border-color:var(--ink);
  transform:translateX(4px);
}
.concern-card.active{
  background:var(--ink);
  border-color:var(--ink);
  transform:translateX(4px);
}
.cc-icon{
  font-size:16px;margin-bottom:6px;
  color:var(--muted);
  transition:color .2s;
}
.concern-card.active .cc-icon{color:rgba(255,255,255,.5);}
.cc-name{
  font-family:'Montserrat',sans-serif;
  font-size:13px;font-weight:700;
  color:var(--ink);margin-bottom:3px;
  transition:color .2s;
}
.concern-card.active .cc-name{color:#fff;}
.cc-desc{
  font-size:11px;color:var(--stone);
  line-height:1.5;
  transition:color .2s;
}
.concern-card.active .cc-desc{color:rgba(255,255,255,.4);}
.routine-display{
  background:var(--surface);
  border-radius:16px;
  padding:32px;
  min-height:500px;
  position:relative;
  overflow:hidden;
}
.routine-loading{
  position:absolute;inset:0;
  display:flex;align-items:center;
  justify-content:center;
  background:var(--surface);
  opacity:0;pointer-events:none;
  transition:opacity .2s;
}
.routine-loading.show{opacity:1;pointer-events:all;}
.routine-loading-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--stone);
  animation:dotPulse 1.2s ease-in-out infinite;
  margin:0 3px;
}
.routine-loading-dot:nth-child(2){animation-delay:.2s;}
.routine-loading-dot:nth-child(3){animation-delay:.4s;}
@keyframes dotPulse{
  0%,80%,100%{transform:scale(.6);opacity:.3;}
  40%{transform:scale(1);opacity:1;}
}
.routine-tabs{
  display:flex;gap:0;
  border-bottom:1px solid var(--border);
  margin-bottom:24px;
}
.routine-tab{
  padding:10px 20px;
  cursor:pointer;border:none;background:none;
  color:var(--stone);font-family:var(--sans);
  font-size:12px;font-weight:400;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:all .2s;
}
.routine-tab.active{
  color:var(--ink);font-weight:600;
  border-bottom-color:var(--ink);
}
.routine-steps{
  display:flex;flex-direction:column;gap:0;
}
.routine-step{
  display:flex;gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--border);
  opacity:0;
  transform:translateY(12px);
  transition:all .4s cubic-bezier(.16,1,.3,1);
}
.routine-step:last-child{border:none;}
.routine-step.visible{
  opacity:1;transform:translateY(0);
}
.rs-number{
  font-family:'Montserrat',sans-serif;
  font-size:11px;font-weight:700;
  color:var(--border);
  flex-shrink:0;width:24px;
  margin-top:2px;
}
.rs-body{flex:1;}
.rs-title{
  font-size:14px;font-weight:600;
  color:var(--ink);margin-bottom:3px;
  display:flex;align-items:center;gap:8px;
}
.rs-your-product{
  background:var(--ink);color:#fff;
  border-radius:100px;
  padding:2px 8px;
  font-family:var(--mono);font-size:7px;
  letter-spacing:1px;text-transform:uppercase;
  font-weight:400;
}
.rs-desc{
  font-size:12px;color:var(--muted);
  line-height:1.5;margin-bottom:6px;
}
.rs-ingredient{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:100px;
  padding:3px 10px;
  font-family:var(--mono);font-size:8px;
  letter-spacing:1px;color:var(--stone);
  text-transform:uppercase;
}
.rs-product-cta{
  margin-top:8px;
}
.rs-add-btn{
  background:var(--ink);color:#fff;border:none;
  border-radius:100px;
  padding:7px 16px;
  font-size:11px;font-weight:500;
  cursor:pointer;font-family:var(--sans);
  transition:all .2s;
  letter-spacing:.3px;
}
.rs-add-btn:hover{
  background:#333;
  transform:translateY(-1px);
}
.routine-cta{
  text-align:center;
  padding-top:16px;
}
.routine-cta-text{
  font-size:13px;color:var(--stone);
  line-height:1.7;margin-bottom:20px;
  max-width:460px;margin-left:auto;margin-right:auto;
}
@media(max-width:900px){
  .routine-content{
    grid-template-columns:1fr;
  }
  .routine-concerns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .concern-card:hover,
  .concern-card.active{
    transform:none;
  }
}
@media(max-width:600px){
  .routine-concerns{
    grid-template-columns:1fr;
  }
  .routine-inner{padding:0 24px;}
  .routine-display{padding:20px;}
}

/* ══ INVOICE OVERLAY ══ */
.invoice-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:700;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.invoice-overlay.open{display:flex;}
.invoice-modal{
  background:#fff;
  width:min(580px,100%);
  border-radius:var(--radius-md);
  overflow:hidden;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.25);
}
.invoice-actions{
  display:flex;gap:10px;
  padding:20px 24px;
  border-top:1px solid var(--border);
  background:var(--surface);
}
@media print{
  body > *:not(#invoicePrintArea){ display:none !important; }
  #invoicePrintArea{
    display:block !important;
    position:fixed;inset:0;
    background:#fff;z-index:9999;
    padding:40px;
  }
  .invoice-actions{ display:none !important; }
  .invoice-overlay{
    position:static !important;
    background:none !important;
    padding:0 !important;
  }
  .invoice-modal{
    box-shadow:none !important;
    max-height:none !important;
    border-radius:0 !important;
  }
}

/* ══ SUBSCRIPTION CHECKOUT ══ */
.sub-checkout-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:600;display:none;align-items:center;justify-content:center;padding:20px;}
.sub-checkout-overlay.open{display:flex;}
.sub-checkout-modal{background:var(--white);width:min(480px,100%);border-radius:var(--radius-card);overflow:hidden;max-height:90vh;overflow-y:auto;}

/* ══ SCROLL ANIMATIONS ══ */
.reveal-up{opacity:0;transform:translateY(40px);transition:opacity .72s cubic-bezier(.4,0,.2,1),transform .72s cubic-bezier(.4,0,.2,1);}
.reveal-up.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .72s cubic-bezier(.4,0,.2,1),transform .72s cubic-bezier(.4,0,.2,1);}
.reveal-left.visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .72s cubic-bezier(.4,0,.2,1),transform .72s cubic-bezier(.4,0,.2,1);}
.reveal-right.visible{opacity:1;transform:translateX(0);}
.reveal-scale{opacity:0;transform:scale(.96);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);}
.reveal-scale.visible{opacity:1;transform:scale(1);}
/* Legacy reveal class — keeps other pages working */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-delay-1,.d1{transition-delay:.1s;}
.reveal-delay-2,.d2{transition-delay:.2s;}
.reveal-delay-3,.d3{transition-delay:.3s;}
.reveal-delay-4,.d4{transition-delay:.4s;}
.d5{transition-delay:.5s;}

/* ══ HERO SECTION ══ */
/* ══ HERO V2 ══ */
.hero-section{
  background:#FAFAF7;
  min-height:100svh;
  padding-top:88px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.hero-section::after{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(
    ellipse at 70% 50%,
    #F2EFE8 0%,
    transparent 60%
  );
  pointer-events:none;
  z-index:0;
}
.hero-content{
  flex:1;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  max-width:var(--content-max);
  margin:0 auto;width:100%;
  padding:60px 52px;
  gap:60px;
  position:relative;z-index:1;
}
.hero-left{padding:0;position:relative;z-index:2;}
.hero-eyebrow{
  font-family:var(--mono);
  font-size:10px;letter-spacing:4px;
  color:var(--stone);
  text-transform:uppercase;
  margin-bottom:28px;
}
.hero-headline{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(56px,7vw,96px);
  line-height:.95;
  letter-spacing:-3px;
  color:var(--ink);
  margin-bottom:28px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.hero-headline span{display:block;}
.hero-hl-light{font-weight:300;}
.hero-hl-bold{font-weight:700;}
.hero-sub{
  font-size:17px;font-weight:300;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:40px;
  letter-spacing:.2px;
  max-width:400px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.hero-btn-primary{
  background:var(--ink);color:#fff;border:none;
  border-radius:var(--radius-pill);
  padding:14px 32px;
  font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.3px;
  cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  display:inline-flex;align-items:center;gap:8px;
}
.hero-btn-primary:hover{
  background:#222;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.hero-btn-ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:13px 28px;
  font-family:var(--sans);font-size:13px;font-weight:400;
  letter-spacing:.3px;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.hero-btn-ghost:hover{
  background:var(--ink);color:#fff;
  border-color:var(--ink);
  transform:translateY(-2px);
}
/* Hero right — demo card */
.hero-right{
  display:flex;align-items:center;
  justify-content:center;
}
/* ══ AI GRAPH CANVAS ══ */
.hero-ai-graph{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:520px;
}
.hero-ai-graph canvas{
  width:100%;
  max-width:580px;
  height:auto;
  display:block;
}
/* ══ TRUST SECTION ══ */
.trust-section{
  background:#FAFAF7;
  padding:var(--section-pad) 0;
  border-top:1px solid var(--border);
}
.trust-inner{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 52px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap:80px;
}
.trust-eyebrow{
  font-family:var(--mono);font-size:10px;
  letter-spacing:4px;color:var(--stone);
  text-transform:uppercase;margin-bottom:24px;
}
.trust-headline{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(36px,4vw,56px);
  font-weight:700;line-height:1.05;
  color:var(--ink);letter-spacing:-1.5px;
  margin-bottom:16px;
}
.trust-sub{
  font-size:16px;font-weight:300;
  color:var(--muted);line-height:1.7;
}
.trust-right{
  border-top:1px solid var(--border);
  padding-top:0;
}
.trust-item{
  display:flex;gap:24px;
  padding:28px 0;
  border-bottom:1px solid var(--border);
  align-items:flex-start;
}
.trust-item-marker{
  font-family:'Montserrat',sans-serif;
  font-size:11px;font-weight:700;
  color:var(--border);
  letter-spacing:1px;
  flex-shrink:0;
  margin-top:2px;
  width:24px;
}
.trust-item-content{flex:1;}
.trust-item-title{
  font-size:15px;font-weight:600;
  color:var(--ink);margin-bottom:6px;
}
.trust-item-desc{
  font-size:14px;font-weight:300;
  color:var(--muted);line-height:1.7;
}

@media(max-width:768px){
  .trust-inner{
    grid-template-columns:1fr;
    gap:40px;
    padding:0 24px;
  }
}


/* ══ STATS SECTION ══ */
.stats-section{background:#F2EFE8;border-bottom:1px solid var(--border);padding:52px 0;}
.stats-inner{max-width:var(--content-max);margin:0 auto;padding:0 80px;display:flex;align-items:center;}
.stat-item{flex:1;text-align:center;padding:0 32px;}
.stat-divider{width:1px;height:52px;background:var(--border);flex-shrink:0;}
.stat-num{font-family:'Montserrat',sans-serif;font-size:clamp(36px,4vw,52px);font-weight:700;color:#000;line-height:1;margin-bottom:6px;letter-spacing:-1px;}
.stat-label{font-family:var(--mono);font-size:9px;letter-spacing:3px;color:var(--stone);text-transform:uppercase;}

/* ══ PRODUCT SECTION ══ */
.product-section{background:#FFFFFF;padding:var(--section-pad) 0;border-bottom:1px solid var(--border);overflow:hidden;}
.product-inner{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;}
.product-img-wrap{aspect-ratio:1;background:var(--surface);border-radius:var(--radius-card);overflow:hidden;}
.product-img-wrap img{width:100%;height:100%;object-fit:cover;}
.product-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:4px;color:var(--stone);text-transform:uppercase;margin-bottom:20px;}
.product-h2{font-family:'Montserrat',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:700;line-height:1.0;color:#000;margin-bottom:16px;letter-spacing:-1.5px;}
.product-desc{font-size:16px;color:var(--muted);line-height:1.75;margin-bottom:24px;}
.product-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
.ptag{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:5px 14px;font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--stone);text-transform:uppercase;}
.product-price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:32px;}
.product-price{font-family:'Montserrat',sans-serif;font-size:36px;font-weight:700;color:#000;letter-spacing:-1px;}
.product-size{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--stone);text-transform:uppercase;}
.product-ctas{display:flex;gap:12px;flex-wrap:wrap;}

/* ══ AI SECTION ══ */
.ai-section{
  background:#FAFAF7;
  padding:var(--section-pad) 0;
  border-top:1px solid var(--border);
}
.ai-inner{
  max-width:var(--content-max);
  margin:0 auto;padding:0 52px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;gap:80px;
}
.ai-eyebrow{
  font-family:var(--mono);font-size:10px;
  letter-spacing:4px;color:var(--stone);
  text-transform:uppercase;margin-bottom:24px;
}
.ai-h2{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(36px,4vw,56px);
  font-weight:700;line-height:1.05;
  color:var(--ink);letter-spacing:-1.5px;
  margin-bottom:20px;
}
.ai-h2 em{
  font-style:normal;
  color:var(--muted);
  font-weight:300;
}
.ai-desc{
  font-size:16px;font-weight:300;
  color:var(--muted);
  line-height:1.75;margin-bottom:40px;
}
.ai-steps{
  display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--border);
}
.ai-step{
  display:flex;gap:20px;align-items:flex-start;
  padding:20px 0;
  border-bottom:1px solid var(--border);
}
.ai-step-no{
  font-family:'Montserrat',sans-serif;
  font-size:11px;font-weight:700;
  color:var(--border);
  letter-spacing:1px;flex-shrink:0;
  margin-top:2px;width:24px;
}
.ai-step-t{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.ai-step-d{font-size:13px;color:var(--muted);line-height:1.6;font-weight:300;}
.ai-card-wrap{width:100%;}
.ai-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:36px;
  box-shadow:0 4px 40px rgba(0,0,0,.06);
}
.ai-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;}
.ai-card-label{font-family:var(--mono);font-size:9px;letter-spacing:3px;color:var(--stone);text-transform:uppercase;}
.ai-card-score{font-family:'Montserrat',sans-serif;font-size:32px;font-weight:700;color:var(--ink);letter-spacing:-1px;}
.ai-bars{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
.ai-bar{display:flex;align-items:center;gap:12px;}
.ai-bar-lbl{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--stone);text-transform:uppercase;width:88px;flex-shrink:0;}
.ai-bar-track{flex:1;height:2px;background:var(--border);border-radius:1px;overflow:hidden;}
.ai-bar-fill{height:100%;border-radius:1px;background:var(--ink);transition:width 1.6s cubic-bezier(.4,0,.2,1);width:0%;}
.ai-bar-val{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:500;color:var(--stone);width:26px;text-align:right;flex-shrink:0;}
.ai-card-insight{font-size:12px;color:var(--stone);line-height:1.7;font-style:italic;border-top:1px solid var(--border);padding-top:20px;}

/* ══ HOW IT WORKS ══ */
.hiw-section{background:#FAFAF7;padding:var(--section-pad) 80px;border-top:1px solid var(--border);}
.hiw-inner{max-width:var(--content-max);margin:0 auto;}
.hiw-header{text-align:center;margin-bottom:80px;}
.hiw-eye{font-family:var(--mono);font-size:10px;letter-spacing:4px;color:var(--stone);text-transform:uppercase;margin-bottom:16px;}
.hiw-h2{font-family:'Montserrat',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:700;line-height:1.0;color:#000;letter-spacing:-1.5px;}
.hiw-h2 span{font-weight:400;color:var(--stone);}
.hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);border-radius:var(--radius-card);overflow:hidden;}
.hiw-step{background:#FFFFFF;padding:48px 32px;transition:background .3s;}
.hiw-step:hover{background:#FAFAF7;}
.hiw-step-no{
  font-family:'Montserrat',sans-serif;
  font-size:11px;font-weight:700;
  letter-spacing:2px;color:var(--border);
  margin-bottom:28px;
}
.hiw-step-icon{font-size:22px;margin-bottom:16px;color:#000;}
.hiw-step-title{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:700;color:#000;margin-bottom:12px;}
.hiw-step-desc{font-size:14px;color:var(--muted);line-height:1.7;}

/* ══ PHILOSOPHY ══ */
.phil-section{background:#FAFAF7;padding:var(--section-pad) 80px;border-top:1px solid var(--border);}
.phil-inner{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start;}
.phil-eyebrow{
  font-family:var(--mono);font-size:10px;
  letter-spacing:4px;color:var(--stone);
  text-transform:uppercase;margin-bottom:24px;
}
.phil-headline{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(32px,4vw,52px);
  font-weight:700;line-height:1.05;
  color:var(--ink);letter-spacing:-1.5px;
  margin-bottom:24px;
}
.phil-headline span{
  font-weight:300;color:var(--muted);
}
.phil-body{
  font-size:15px;font-weight:300;
  color:var(--muted);
  line-height:1.75;
}
.phil-right{
  border-top:1px solid var(--border);
}
.phil-item{
  display:flex;gap:20px;align-items:flex-start;
  padding:24px 0;
  border-bottom:1px solid var(--border);
}
.phil-item:last-child{border:none;}
.phil-item-icon{
  width:36px;height:36px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  display:flex;align-items:center;
  justify-content:center;
  font-size:14px;flex-shrink:0;
}
.phil-item-title{
  font-size:14px;font-weight:600;
  color:var(--ink);margin-bottom:5px;
}
.phil-item-desc{
  font-size:13px;font-weight:300;
  color:var(--muted);line-height:1.6;
}

/* ══ FOOTER ══ */
footer{
  background:#FAFAF7;
  color:var(--muted);
  padding:64px 52px 36px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:48px;
  border-top:1px solid var(--border);
}
.ft-brand{color:var(--ink);margin-bottom:12px;}
.ft-brand .bm-logo{color:var(--ink);}
.ft-d{
  font-size:13px;font-weight:300;
  color:var(--muted);
  line-height:1.7;max-width:280px;
}
.ft-ct{
  font-family:var(--mono);font-size:9px;
  letter-spacing:3px;
  color:var(--stone);
  text-transform:uppercase;margin-bottom:16px;
}
.ft-lks{display:flex;flex-direction:column;gap:10px;}
.ft-lks a{
  font-size:13px;font-weight:300;
  color:var(--muted);
  text-decoration:none;transition:color .2s;
}
.ft-lks a:hover{color:var(--ink);}
.ft-bot{
  border-top:1px solid var(--border);
  padding-top:20px;margin-top:24px;
  display:flex;justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:var(--stone);
  grid-column:1/-1;
}

/* ══ RESPONSIVE ══ */
@media(max-width:1100px){
  :root{--section-pad:120px;}
  .hero-left{padding:60px 40px 60px 60px;}
  .hero-right{padding:60px 60px 60px 0;}
  .product-section,.ai-section,.hiw-section,.phil-section{padding:var(--section-pad) 60px;}
}
@media(max-width:900px){
  :root{--section-pad:80px;}
  nav{padding:0 24px;}
  .nav-links{display:none;}
  .hero-section{grid-template-columns:1fr;min-height:auto;padding-bottom:80px;}
  .hero-left{padding:80px 32px 40px;}
  .hero-right{display:none;}
  .hero-h1{font-size:clamp(52px,13vw,72px);}
  .stats-inner{padding:0 32px;flex-wrap:wrap;gap:32px;}
  .stat-divider{display:none;}
  .stat-item{flex:0 0 40%;}
  .product-section,.ai-section,.hiw-section,.phil-section{padding:var(--section-pad) 32px;}
  .product-inner,.ai-inner,.phil-inner{grid-template-columns:1fr;gap:48px;}
  .hiw-steps{grid-template-columns:1fr 1fr;}
  footer{padding:60px 32px 32px;grid-template-columns:1fr 1fr;gap:40px;}
  .ft-d{max-width:100%;}
}
@media(max-width:600px){
  :root{--section-pad:60px;}
  .hero-ctas{flex-direction:column;}
  .btn-hero-primary,.btn-hero-ghost{width:100%;text-align:center;}
  .hiw-steps{grid-template-columns:1fr;}
  .stats-inner{padding:0 24px;}
  .stat-item{flex:0 0 100%;}
  footer{grid-template-columns:1fr;gap:32px;}
}
/* ══ CAMERA PERMISSION STATES ══ */
.cam-permission-screen{position:absolute;inset:0;background:#0A0A0A;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;z-index:10;}
.cam-permission-icon{font-size:48px;margin-bottom:24px;opacity:.4;}
.cam-permission-title{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#fff;margin-bottom:10px;}
.cam-permission-desc{font-size:14px;color:rgba(255,255,255,.4);line-height:1.7;margin-bottom:28px;max-width:320px;}
.cam-permission-steps{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px 20px;margin-bottom:24px;text-align:left;width:100%;max-width:340px;}
.cam-permission-step{font-size:12px;color:rgba(255,255,255,.5);line-height:1.8;}
.cam-upload-zone{border:1.5px dashed rgba(255,255,255,.2);border-radius:12px;padding:24px;cursor:pointer;transition:all .2s;width:100%;max-width:340px;}
.cam-upload-zone:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04);}
.cam-upload-zone input{display:none;}
.cam-upload-label{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.4);text-transform:uppercase;cursor:pointer;}
/* ══ CAMERA PERMISSION UX ══ */
.cam-pre-screen{position:absolute;inset:0;background:#0A0A0A;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px;text-align:center;z-index:20;border-radius:inherit;}
.cam-pre-icon{width:64px;height:64px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:24px;}
.cam-pre-title{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:-.3px;}
.cam-pre-desc{font-size:13px;color:rgba(255,255,255,.4);line-height:1.7;margin-bottom:24px;max-width:300px;}
.cam-pre-trust{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 20px;margin-bottom:28px;width:100%;max-width:300px;text-align:left;}
.cam-pre-trust-item{display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.45);line-height:1.6;padding:4px 0;}
.cam-pre-trust-icon{color:rgba(255,255,255,.3);font-size:13px;flex-shrink:0;}
.cam-enable-btn{background:#fff;color:#0A0A0A;border:none;border-radius:100px;padding:14px 36px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;width:100%;max-width:300px;margin-bottom:10px;}
.cam-enable-btn:hover{background:#e8e8e8;}
.cam-blocked-screen{position:absolute;inset:0;background:#0A0A0A;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 28px;text-align:center;z-index:20;border-radius:inherit;overflow-y:auto;}
.cam-blocked-title{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:700;color:#fff;margin-bottom:8px;}
.cam-blocked-desc{font-size:12px;color:rgba(255,255,255,.35);line-height:1.7;margin-bottom:20px;max-width:300px;}
.cam-steps-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:16px 20px;margin-bottom:16px;width:100%;max-width:320px;text-align:left;}
.cam-steps-title{font-family:var(--mono);font-size:8px;letter-spacing:3px;color:rgba(255,255,255,.25);text-transform:uppercase;margin-bottom:12px;}
.cam-step-item{display:flex;gap:10px;font-size:12px;color:rgba(255,255,255,.5);line-height:1.6;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.cam-step-item:last-child{border:none;}
.cam-step-num{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;color:rgba(255,255,255,.2);flex-shrink:0;width:16px;margin-top:2px;}
.cam-browser-tabs{display:flex;gap:6px;margin-bottom:20px;}
.cam-browser-tab{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:6px 16px;font-family:var(--mono);font-size:8px;letter-spacing:1px;color:rgba(255,255,255,.4);text-transform:uppercase;cursor:pointer;transition:all .2s;}
.cam-browser-tab.active{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.2);}
.cam-refresh-btn{background:#fff;color:#0A0A0A;border:none;border-radius:100px;padding:12px 32px;font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:10px;width:100%;max-width:320px;}
.cam-refresh-btn:hover{background:#e8e8e8;}
.cam-secondary-btn{background:transparent;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.35);border-radius:100px;padding:10px 24px;font-family:var(--sans);font-size:11px;cursor:pointer;transition:all .2s;width:100%;max-width:320px;}
.cam-secondary-btn:hover{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.6);}