/* ============================================================
   Q SYSTEMS · shared Apple-style design system
   Used by index.html + per-app pages + privacy.html
   ============================================================ */

:root{
  --text:        #1d1d1f;
  --text-2:      #6e6e73;
  --bg:          #ffffff;
  --bg-2:        #f5f5f7;
  --hair:        #d2d2d7;
  --link:        #0066cc;
  --blue:        #0071e3;
  --blue-hover:  #0077ed;

  --dark-bg:     #000000;
  --dark-text:   #f5f5f7;
  --dark-text-2: #86868b;

  /* per-app accents (overridden per page via body.theme-*) */
  --accent:      #0071e3;
  --accent-deep: #0066cc;
  --accent-soft: #eef4ff;

  --nav-h: 44px;
  --maxw: 980px;
  --maxw-wide: 1024px;

  --sans: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease: cubic-bezier(.28,.11,.32,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.47;
  letter-spacing:-.01em;
}

/* Skinmetrics — one flat wash everywhere (html → hero) */
html:has(body.theme-derma){ background:#eef3ee; }
body.theme-derma{
  --accent:#6f8c74; --accent-deep:#4f6654; --accent-soft:#eef3ee; --wash:#eef3ee;
  background:#eef3ee; min-height:100vh;
}
body.theme-derma::before{
  content:""; position:fixed; inset:0; background:#eef3ee; z-index:-1; pointer-events:none;
}
body.theme-derma .section:not(.gray):not(.wash):not(.dark):not(.statement-band){ background:var(--bg); }
body.theme-derma main,
body.theme-derma .derma-hero,
body.theme-derma .promo.derma-hero{ background:#eef3ee; }

/* legal subpages — white, no green gaps between sections */
html:has(body.theme-derma.has-float-back){ background:#fff; }
body.theme-derma.has-float-back{ background:#fff; }
body.theme-derma.has-float-back::before{ background:#fff; }
body.theme-derma.has-float-back main{ background:#fff; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.wide{ max-width:var(--maxw-wide); }

/* ---------------- GLOBAL NAV (apple chrome bar) ---------------- */
.gnav{
  position:sticky; top:0; z-index:9000;
  height:var(--nav-h);
  background:rgba(251,251,253,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.gnav-in{ max-width:1024px; margin:0 auto; height:100%; padding:0 22px; display:flex; align-items:center; justify-content:center; gap:38px; }
.gnav a{ font-size:12px; color:rgba(29,29,31,.86); opacity:.9; transition:opacity .2s; white-space:nowrap; }
.gnav a:hover{ opacity:1; color:#000; }
.gnav .gn-logo{ font-weight:600; font-size:15px; letter-spacing:-.02em; opacity:1; display:flex; align-items:center; gap:6px; }
.gnav .gn-logo b{ color:#000; }
.gnav .gn-logo .dot{ width:16px; height:16px; border-radius:5px; background:linear-gradient(150deg,#1d1d1f,#6e6e73); display:inline-block; }
.gnav a.active{ color:#000; opacity:1; }

/* ---------------- FLOATING GLASS NAV (single bar, liquid glass) -- */
.has-float-nav main{ padding-top:0; background:#eef3ee; }
.float-nav{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  z-index:9000; width:min(calc(100% - 32px),960px); pointer-events:none;
  padding-top:16px;
}
.float-pill{
  pointer-events:auto; display:flex; align-items:center; gap:18px;
  padding:10px 12px 10px 24px; border-radius:980px;
  background:linear-gradient(135deg,rgba(238,243,238,.42),rgba(228,236,228,.28));
  backdrop-filter:blur(52px) saturate(160%);
  -webkit-backdrop-filter:blur(52px) saturate(160%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 8px 32px rgba(79,102,84,.1),0 1px 4px rgba(60,74,61,.05),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.float-logo{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--accent-deep); white-space:nowrap; flex-shrink:0; padding-right:6px; }
.float-logo .dot{ width:17px; height:17px; border-radius:5px; background:linear-gradient(150deg,#4f6654,#6f8c74); flex-shrink:0; }
.float-logo b{ font-weight:600; color:var(--accent-deep); }
.float-seg{ display:inline-flex; align-items:center; gap:3px; flex-shrink:0;
  background:rgba(111,140,116,.1); padding:4px; border-radius:980px; }
.float-seg-site{ flex-shrink:0; }
.float-seg-page{ flex:1 1 auto; min-width:0; }
.float-link{ font-size:13px; font-weight:500; color:rgba(79,102,84,.82); white-space:nowrap; flex-shrink:0; padding:10px 14px; border-radius:980px; transition:color .2s var(--ease),background .2s var(--ease); }
.float-link:hover{ color:var(--accent-deep); background:rgba(255,255,255,.35); }
.float-seg a{ flex:1 1 0; min-width:0; text-align:center; font-size:13px; font-weight:500; color:rgba(79,102,84,.82);
  padding:10px 18px; border-radius:980px; white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease); }
.float-seg a:hover{ color:var(--accent-deep); }
.float-seg a.active{ background:rgba(255,255,255,.55); color:var(--accent-deep);
  box-shadow:0 1px 2px rgba(60,74,61,.08),inset 0 0 0 .5px rgba(255,255,255,.45); }
.float-seg-site a.active{ background:rgba(255,255,255,.55); }
.float-buy{ background:rgba(111,140,116,.82); color:#fff; padding:11px 24px; border-radius:980px;
  font-size:13px; font-weight:500; white-space:nowrap; flex-shrink:0;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 2px 10px rgba(111,140,116,.22); transition:background .2s var(--ease); }
.float-buy:hover{ background:var(--accent-deep); color:#fff; }

/* back link — legal / sub pages */
.has-float-back main{ padding-top:72px; }
.float-back{
  position:fixed; top:16px; left:22px; z-index:9000;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px 10px 14px; border-radius:980px;
  font-size:14px; font-weight:500; color:var(--accent-deep);
  background:linear-gradient(135deg,rgba(238,243,238,.42),rgba(228,236,228,.28));
  backdrop-filter:blur(52px) saturate(160%);
  -webkit-backdrop-filter:blur(52px) saturate(160%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 8px 32px rgba(79,102,84,.1),inset 0 1px 0 rgba(255,255,255,.35);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.float-back .ic{ width:18px; height:18px; stroke-width:2.2; }
.float-back:hover{ background:linear-gradient(135deg,rgba(238,243,238,.58),rgba(228,236,228,.42)); transform:translateX(-2px); }

/* ---------------- TYPOGRAPHY ---------------- */
.eyebrow{ font-size:clamp(18px,2.2vw,21px); font-weight:600; color:var(--accent-deep); letter-spacing:0; }
h1,h2,h3,h4{ font-weight:600; letter-spacing:-.015em; line-height:1.06; }
.display{ font-size:clamp(40px,7.2vw,80px); font-weight:600; line-height:1.04; letter-spacing:-.02em; }
.headline{ font-size:clamp(32px,5.2vw,56px); font-weight:600; line-height:1.07; letter-spacing:-.018em; }
.title{ font-size:clamp(26px,3.4vw,40px); font-weight:600; letter-spacing:-.015em; }
.sub{ font-size:clamp(19px,2.2vw,28px); font-weight:400; color:var(--text-2); line-height:1.32; letter-spacing:0; }
.sub-sm{ font-size:clamp(17px,1.8vw,21px); color:var(--text-2); font-weight:400; line-height:1.4; }
.grad-accent{ background:linear-gradient(120deg,var(--accent),var(--accent-deep)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------------- LINKS & BUTTONS (apple) ---------------- */
.link{ color:var(--link); font-size:clamp(17px,1.8vw,21px); display:inline-flex; align-items:center; }
.link::after{ content:"\00a0›"; transition:transform .2s var(--ease); }
.link:hover{ text-decoration:underline; }
.link:hover::after{ transform:translateX(3px); }
.links-row{ display:flex; gap:28px; flex-wrap:wrap; align-items:center; justify-content:center; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--blue); color:#fff; font-size:17px; font-weight:400; padding:12px 23px; border-radius:980px; border:0; cursor:pointer; transition:background .2s, transform .2s var(--ease); }
.btn:hover{ background:var(--blue-hover); color:#fff; }
.btn:active{ transform:scale(.97); }
.btn-ghost{ background:transparent; color:var(--link); border:1px solid rgba(0,0,0,.18); }
.btn-ghost:hover{ background:rgba(0,0,0,.04); color:var(--link); }
.btn-lg{ font-size:19px; padding:14px 28px; }

/* ---------------- SECTION SHELL ---------------- */
.section{ padding:90px 0; text-align:center; position:relative; }
.section.tight{ padding:64px 0; }
.section.dark{ background:var(--dark-bg); color:var(--dark-text); }
.section.dark .sub, .section.dark .sub-sm{ color:var(--dark-text-2); }
.section.dark .link{ color:#2997ff; }
.section.gray{ background:var(--bg-2); }
.section.wash{ background:var(--accent-soft); }
.section .container > .eyebrow{ display:block; margin-bottom:8px; }
.section .lead-copy{ max-width:720px; margin:0 auto; }
.section-cta{ margin-top:34px; }

/* legal doc pages — compact top spacing, no gnav bar (desktop + mobile) */
body.legal-doc .gnav{ display:none; }
body.theme-derma.has-float-back.legal-doc main{ padding-top:56px; }
body.theme-derma.has-float-back.legal-doc main .section.legal-hero{
  padding:0 0 24px;
  text-align:left;
}
@media (max-width:640px){
  body.theme-derma.has-float-back.legal-doc main{ padding-top:50px; }
  body.theme-derma.has-float-back.legal-doc main .section.legal-hero{ padding:0 0 20px; }
}

/* full-bleed promo unit (apple home tiles) */
.promo{ min-height:580px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:64px 22px 0; overflow:hidden; position:relative; }
.promo.dark{ background:#000; color:#f5f5f7; }
.promo.dark .sub{ color:#a1a1a6; }
.promo .promo-copy{ position:relative; z-index:3; }
.promo .display{ margin-bottom:6px; }
.promo .links-row{ margin-top:16px; }
.promo .promo-art{ margin-top:30px; position:relative; z-index:2; width:100%; max-width:1100px; padding:0 22px 0; }
.hero-shot{ margin:0; width:100%; }
.hero-shot img{ width:100%; height:auto; display:block; }

/* Skinmetrics hero — real simulator shots, transparent background */
.derma-hero{ min-height:auto; padding-bottom:0; padding-top:calc(88px + 64px); background:#eef3ee; }
.derma-hero .promo-art{ max-width:1200px; padding:0 22px 56px; margin-top:52px; }
.derma-hero .hero-shot img{
  max-width:100%;
  margin:0 auto;
  filter:drop-shadow(0 28px 48px rgba(60,74,61,.14));
}

/* statement band — two-part headline side by side, lead below same width */
body.theme-derma .statement-band{
  padding:80px 0 96px;
  background:var(--accent-soft);
  text-align:center;
}
.statement-inner{
  max-width:min(100%,820px);
  margin:0 auto;
}
.statement-headline{
  margin:0;
  color:#3c4a3d;
  font-size:clamp(30px,4.6vw,52px);
  line-height:1.12;
  letter-spacing:-.018em;
  text-align:center;
}
.statement-headline-in{
  display:inline;
  text-wrap:balance;
}
.statement-headline .type-line1,
.statement-headline .type-line2{
  display:inline;
  white-space:normal;
}
.statement-headline .type-line1{
  color:#3c4a3d;
}
.statement-headline .type-line2{
  letter-spacing:-.022em;
}
.statement-headline:not(.typing-line2) .statement-break,
.statement-headline:not(.typing-line2) .type-line2{
  display:none;
}
.statement-headline .type-cursor{
  display:inline-block;
  width:2px;
  height:.92em;
  margin-left:2px;
  vertical-align:text-bottom;
  background:var(--accent-deep);
  opacity:.85;
  animation:type-cursor 1s step-end infinite;
}
.statement-headline.is-done .type-cursor{ display:none; }
.statement-band .statement-lead{
  width:100%;
  max-width:100%;
  margin:20px auto 0;
  color:#5a6e5e;
  font-size:clamp(17px,2.1vw,21px);
  line-height:1.5;
  text-wrap:pretty;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.statement-band .statement-lead.is-visible{
  opacity:1;
  transform:none;
}
@keyframes type-cursor{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .statement-headline .type-cursor{ display:none; }
  .statement-band .statement-lead{ opacity:1; transform:none; }
}

/* feature row (text + mockup, alternating) */
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; text-align:left; max-width:1024px; margin:0 auto; }
.frow.flip .frow-copy{ order:2; }
.frow-copy .eyebrow{ margin-bottom:10px; }
.frow-copy .title{ margin-bottom:16px; }
.frow-copy p{ font-size:19px; color:var(--text-2); line-height:1.45; margin-bottom:18px; }
.section.dark .frow-copy p{ color:#a1a1a6; }
.frow-art{ display:flex; justify-content:center; }

/* ---------------- PRIVACY / CHECK LIST ---------------- */
.checks{ list-style:none; display:grid; gap:14px; max-width:640px; margin:0 auto; text-align:left; }
.checks li{ display:flex; gap:14px; align-items:flex-start; font-size:18px; line-height:1.4; }
.checks li .ck{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:14px; margin-top:1px; }
.section.dark .checks li{ color:#f5f5f7; }

/* ---------------- COMPARISON TABLE ---------------- */
.ctable-wrap{ max-width:1024px; margin:0 auto; overflow-x:auto; border-radius:20px; }
.ctable{ width:100%; border-collapse:collapse; font-size:16px; text-align:left; background:var(--bg-2); border-radius:20px; overflow:hidden; }
.ctable th,.ctable td{ padding:18px 20px; border-bottom:1px solid rgba(0,0,0,.08); vertical-align:middle; }
.ctable thead th{ font-size:19px; font-weight:600; }
.ctable thead th span{ display:block; font-size:12px; font-weight:400; color:var(--text-2); margin-top:2px; }
.ctable td:first-child,.ctable th:first-child{ color:var(--text-2); font-weight:400; width:30%; }
.ctable tbody tr:last-child td{ border-bottom:0; }
.ctable .yes{ color:#1d8a3a; font-weight:500; }
.ctable .no{ color:#b1442f; font-weight:500; }
.ctable .opt{ color:#9a6b12; font-weight:500; }
.cval{ display:inline-flex; align-items:center; gap:8px; }
.cval .d{ width:7px; height:7px; border-radius:50%; }
.cfoot{ max-width:1024px; margin:16px auto 0; font-size:13px; color:var(--text-2); text-align:left; }

/* ---------------- RATING + REVIEWS ---------------- */
.rating{ display:flex; align-items:center; justify-content:center; gap:36px; flex-wrap:wrap; margin:0 auto 40px; }
.rating .rv-big{ font-size:72px; font-weight:600; letter-spacing:-.02em; line-height:.9; }
.rating .stars{ color:#f5a623; font-size:22px; letter-spacing:2px; }
.rating .rsub{ font-size:14px; color:var(--text-2); margin-top:6px; }
.rating .rdiv{ width:1px; height:62px; background:var(--hair); }
.rating .rcol .n{ font-size:34px; font-weight:600; letter-spacing:-.01em; }
.rating .rcol .l{ font-size:13px; color:var(--text-2); }

.reviews{ columns:3; column-gap:18px; max-width:1024px; margin:0 auto; text-align:left; }
.review{ break-inside:avoid; background:#fff; border-radius:12px; padding:18px 20px; margin-bottom:18px; border:1px solid rgba(0,0,0,.08); box-shadow:0 1px 2px rgba(60,74,61,.06); display:flex; flex-direction:column; }
.section.dark .review{ background:#1d1d1f; border-color:rgba(255,255,255,.08); }
.review .rev-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.review .who{ display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto; margin-top:0; }
.review .rev-meta{ min-width:0; text-align:left; }
.review .stars{ color:#fbbc04; font-size:13px; letter-spacing:.5px; margin:0; flex:none; line-height:1; white-space:nowrap; padding-top:2px; }
.review p{ font-size:15px; line-height:1.45; color:var(--text); margin:0; }
.section.dark .review p{ color:#f5f5f7; }
.review .av{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:600; font-size:15px; flex:none; background:var(--accent); }
.review .rn{ font-size:14px; font-weight:600; line-height:1.25; color:var(--text); }
.review .rd{ font-size:12px; color:var(--text-2); margin-top:2px; line-height:1.3; }

/* ---------------- FAQ ---------------- */
.faq-wrap{ max-width:820px; margin:0 auto; text-align:left; padding:0 22px; }
.faq{ border-top:1px solid var(--hair); }
.faq:last-child{ border-bottom:1px solid var(--hair); }
.faq-head{
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  border:0;
  background:none;
  width:100%;
  list-style:none;
  cursor:pointer;
  padding:26px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font-size:21px;
  font-weight:600;
  letter-spacing:-.01em;
  text-align:left;
  font-family:inherit;
  color:inherit;
}
.faq-head .pm{
  font-size:28px;
  font-weight:300;
  color:var(--text-2);
  flex:none;
  transition:transform .12s ease;
  -webkit-transition:transform .12s ease;
}
.faq.faq-open .faq-head .pm{
  transform:rotate(45deg);
  transition-duration:.65s;
  -webkit-transition-duration:.65s;
  transition-timing-function:cubic-bezier(.62,0,.2,1);
  -webkit-transition-timing-function:cubic-bezier(.62,0,.2,1);
}
.faq .ans{
  height:0;
  padding:0 4px;
  overflow:hidden;
  transition:height .65s cubic-bezier(.62,0,.2,1);
  -webkit-transition:height .65s cubic-bezier(.62,0,.2,1);
}
.faq .ans-inner{
  padding-bottom:0;
  font-size:17px;
  color:var(--text-2);
  line-height:1.5;
  max-width:64ch;
}
.faq.faq-open .ans-inner{ padding-bottom:28px; }

/* ---------------- DEVICE MOCKUPS (pure CSS) ---------------- */
.phone{
  width:clamp(244px,30vw,300px);
  aspect-ratio:9/19.3;
  background:#0c0c0e;
  border-radius:46px;
  padding:11px;
  box-shadow:0 2px 0 2px #2a2a2e inset, 0 38px 70px -22px rgba(0,0,0,.4), 0 8px 26px rgba(0,0,0,.14);
  position:relative;
}
.phone.lg{ width:clamp(280px,34vw,360px); }
.screen{ width:100%; height:100%; border-radius:36px; overflow:hidden; position:relative; background:#fff; display:flex; flex-direction:column; font-size:11px; }
.island{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:34%; height:22px; background:#0c0c0e; border-radius:14px; z-index:20; }
.statusbar{ height:40px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 20px 5px; font-size:11px; font-weight:700; z-index:5; flex:none; }
.statusbar .sb-r{ display:flex; gap:5px; align-items:center; font-size:10px; }
.sbatt{ width:18px; height:9px; border:1.3px solid currentColor; border-radius:3px; position:relative; opacity:.9; }
.sbatt::after{ content:""; position:absolute; inset:1.5px; right:5px; background:currentColor; border-radius:1px; }
.sbatt::before{ content:""; position:absolute; right:-3px; top:2.5px; width:1.6px; height:4px; background:currentColor; border-radius:1px; }
.tabbar{ flex:none; height:54px; display:flex; align-items:center; justify-content:space-around; border-top:1px solid rgba(0,0,0,.07); background:rgba(255,255,255,.9); padding-bottom:6px; backdrop-filter:blur(8px); }
.tab{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:8.5px; color:#b3ada0; font-weight:600; }
.tab .ti{ font-size:16px; }
.tab.on{ color:var(--accent); }
.scr-body{ flex:1; overflow:hidden; padding:6px 14px 10px; display:flex; flex-direction:column; gap:11px; }

/* Skinmetrics screen */
.s-derma{ background:linear-gradient(180deg,#f6f8f5,#eef2ec); color:#2a3329; }
.s-derma .statusbar{ color:#2a3329; }
.s-derma .tab.on{ color:#6f8c74; }
.dhead{ display:flex; align-items:center; justify-content:space-between; padding-top:2px; }
.dhead .hi{ font-size:17px; font-weight:700; color:#3c4a3d; }
.dhead .hi small{ display:block; font-size:9.5px; color:#7d8a7e; font-weight:600; }
.streak{ background:#fff; border:1px solid #e2e8df; border-radius:999px; padding:5px 10px; font-size:11px; font-weight:700; color:#c0703d; box-shadow:0 4px 10px rgba(0,0,0,.05); }
.streak.green{ color:#4a6741; }
.ring-card{ background:#fff; border-radius:22px; padding:18px; text-align:center; box-shadow:0 8px 22px rgba(60,74,61,.10); }
.ring{ width:118px; height:118px; border-radius:50%; margin:2px auto 10px; position:relative; background:conic-gradient(#6f8c74 0% 82%, #e6ece4 82% 100%); display:grid; place-items:center; }
.ring::after{ content:""; position:absolute; inset:13px; background:#fff; border-radius:50%; box-shadow:inset 0 2px 6px rgba(0,0,0,.05); }
.ring .rv2{ position:relative; z-index:2; font-size:34px; font-weight:800; color:#3c4a3d; line-height:1; }
.ring .rl{ position:relative; z-index:2; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:#8a978b; margin-top:3px; }
.delta{ font-size:11px; font-weight:700; color:#4f6654; }
.delta b{ background:#eef3ee; padding:2px 8px; border-radius:999px; }
.dbtn{ background:#6f8c74; color:#fff; border-radius:14px; padding:12px; text-align:center; font-weight:700; font-size:12.5px; box-shadow:0 8px 18px rgba(111,140,116,.4); }
.drow{ display:flex; gap:9px; }
.dcard{ flex:1; background:#fff; border-radius:15px; padding:11px; box-shadow:0 5px 14px rgba(60,74,61,.07); }
.dcard .dt{ font-size:9px; color:#8a978b; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.dcard .dn{ font-size:13px; font-weight:700; color:#3c4a3d; margin-top:4px; }
.dcard .db{ height:5px; border-radius:3px; background:#eceee9; margin-top:8px; overflow:hidden; }
.dcard .db i{ display:block; height:100%; background:#6f8c74; border-radius:3px; }

/* device caption */
.cap{ font-size:13px; color:var(--text-2); margin-top:14px; }

/* ---------------- FOOTER (apple) ---------------- */
footer{ background:var(--bg-2); color:var(--text-2); font-size:12px; line-height:1.5; }
.foot-in{ max-width:1024px; margin:0 auto; padding:0 22px; }
.foot-top{ padding:18px 0; border-bottom:1px solid var(--hair); }
.foot-top p{ font-size:12px; color:var(--text-2); }
.foot-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding:30px 0; border-bottom:1px solid var(--hair); }
.foot-cols h4{ font-size:12px; font-weight:600; color:var(--text); margin-bottom:10px; }
.foot-cols a{ display:block; color:var(--text-2); padding:4px 0; }
.foot-cols a:hover{ color:var(--text); text-decoration:underline; }
.foot-bottom{ padding:18px 0 28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

.ba-ai-mark{
  position:absolute; top:10px; left:0; z-index:7;
  width:clamp(84px, 26%, 112px); height:auto;
  opacity:.5; pointer-events:none;
}

/* ---------------- REVEAL ---------------- */
.rev{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rev.in{ opacity:1; transform:none; }
.d1{ transition-delay:.07s } .d2{ transition-delay:.14s } .d3{ transition-delay:.21s }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } .rev{ opacity:1; transform:none } }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px){
  .frow{ grid-template-columns:1fr; gap:30px; text-align:center; }
  .frow.flip .frow-copy{ order:0; }
  .frow-art{ order:-1; }
  .frow-copy .eyebrow,.frow-copy p{ text-align:center; }
  .reviews{ columns:2; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .gnav-in{ gap:20px; overflow-x:auto; justify-content:flex-start; }
}
@media (max-width:740px){
  .float-seg-page a:nth-child(2){ display:none; }
  .float-pill{ gap:12px; padding:9px 10px 9px 18px; }
  .float-seg a{ padding:9px 14px; font-size:12px; }
}
@media (max-width:640px){
  .container{ padding:0 18px; }
  .faq-wrap{ padding:0 18px; }
  .faq-head{ font-size:18px; padding:22px 4px; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px){
  .reviews{ columns:1; }
  .rating{ gap:20px; } .rating .rdiv{ display:none; }
  .foot-cols{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
}

/* ============================================================
   INTERACTIVE MODULES
   ============================================================ */

/* 3D tilt */
.tilt{ transform-style:preserve-3d; transition:transform .25s var(--ease); will-change:transform; }

/* animated count-up */
.count{ font-variant-numeric:tabular-nums; }

/* segmented control (apple) + feature explorer */
.explorer{ max-width:1160px; margin:0 auto; }
.explorer-wrap{ margin-top:clamp(32px,5vw,48px); max-width:1160px; }
.explorer-tabs{ display:flex; width:100%; max-width:min(100%,calc(var(--maxw)*.9)); margin:0 auto clamp(24px,3.5vw,36px); }
.seg{ display:flex; gap:2px; width:100%; background:rgba(120,120,128,.1); padding:2px; border-radius:980px; margin:0; flex-wrap:nowrap; }
.section.dark .seg{ background:rgba(255,255,255,.1); }
.seg button{ flex:1 1 0; min-width:0; border:0; background:transparent; cursor:pointer; font:inherit; font-size:13px; font-weight:500; color:var(--text-2); padding:6px 16px; border-radius:980px; transition:color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease); white-space:nowrap; line-height:1.25; text-align:center; }
.seg-short{ display:none; }
.section.dark .seg button{ color:#a1a1a6; }
.seg button:hover{ color:var(--text); }
.seg button[aria-selected="true"]{ background:#fff; color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.04); }
.section.dark .seg button[aria-selected="true"]{ background:#48484a; color:#fff; box-shadow:none; }

.xp-panels{ position:relative; min-height:clamp(560px,72vh,760px); }
.xp-panel{ display:none; }
.xp-panel.on{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:clamp(52px,6.5vw,96px); width:100%; text-align:left; animation:xpfade .55s var(--ease); -webkit-animation:xpfade .55s var(--ease); }
@keyframes xpfade{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@-webkit-keyframes xpfade{ from{ opacity:0; -webkit-transform:translateY(14px) } to{ opacity:1; -webkit-transform:none } }
.xp-copy{ flex:0 1 380px; max-width:380px; min-width:0; margin-left:0; }
.xp-copy .eyebrow{ margin-bottom:10px; display:block; }
.xp-panel h3{ font-size:clamp(24px,3vw,34px); font-weight:600; letter-spacing:-.015em; margin-bottom:14px; }
.xp-panel p{ font-size:17px; color:var(--text-2); line-height:1.5; }
.section.dark .xp-panel p{ color:#a1a1a6; }
.xp-art{ display:flex; flex:0 0 auto; align-items:center; margin-left:3cm; }
.feature-shot{ margin:0; height:clamp(560px,72vh,760px); width:auto; display:flex; justify-content:center; align-items:center; flex-shrink:0; }
.feature-shot img{ height:100%; width:auto; display:block; object-fit:contain; filter:drop-shadow(0 28px 52px rgba(60,74,61,.2)); }
@media (max-width:900px){
  .explorer-tabs{ margin-bottom:20px; padding:0 2px; }
  .seg{ padding:1px; gap:1px; }
  .seg button{ padding:5px 5px; font-size:11px; letter-spacing:-.02em; }
  .xp-panels{ min-height:0; }
  .xp-panel.on{ flex-direction:column; text-align:center; gap:24px; }
  .xp-art{ order:-1; flex:0 0 auto; margin-left:0; }
  .xp-copy{ flex:0 1 auto; max-width:none; margin:0 auto; margin-left:auto; }
  .xp-panel p,.xp-copy .eyebrow{ text-align:center; }
  .feature-shot{ height:clamp(480px,78vw,620px); }
  .feature-shot img{ max-width:100%; }
}
@media (max-width:480px){
  .seg button{ padding:4px 3px; font-size:10px; white-space:normal; line-height:1.15; display:flex; align-items:center; justify-content:center; }
}

/* before / after — same crop + proportions as OnboardingWelcomeStepView (286pt tall) */
.ba{ position:relative; width:min(100%,377px); aspect-ratio:377/286; margin:0 auto; border-radius:22px; overflow:hidden; cursor:ew-resize; user-select:none; touch-action:none;
  box-shadow:0 18px 36px -16px rgba(79,102,84,.34); }
.ba::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:6;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), inset 0 0 0 2px rgba(111,140,116,.18); }
.ba-stage{ position:absolute; inset:0; }
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; display:block; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.ba-after{ position:absolute; inset:0; clip-path:inset(0 0 0 var(--p,48%)); }
/* glass tags, bottom corners */
.ba-tag{ position:absolute; bottom:14px; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:980px;
  font-size:12.5px; font-weight:700; color:#4f6654; background:rgba(255,255,255,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.72);
  box-shadow:0 6px 16px rgba(0,0,0,.08); z-index:3; }
.ba-tag .ic{ width:14px; height:14px; }
.ba-tag.l{ left:14px; } .ba-tag.r{ right:14px; }
/* divider + circular handle */
.ba-handle{ position:absolute; top:-4px; bottom:-4px; left:var(--p,48%); width:1.5px; transform:translateX(-50%); z-index:4;
  background:rgba(255,255,255,.55); border-radius:2px; box-shadow:0 0 2px rgba(0,0,0,.18); }
.ba-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.55); box-shadow:0 8px 22px rgba(0,0,0,.22); display:grid; place-items:center;
  color:#4f6654; transition:transform .24s cubic-bezier(.28,.11,.32,1); }
.ba.dragging .ba-knob{ transform:translate(-50%,-50%) scale(.92); opacity:.4; }
.ba-knob .ic{ width:20px; height:20px; stroke-width:2.2; }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:5; margin:0; }

/* reviews marquee — endless CSS keyframe loop, duplicated set.
   Shift distance is set in px via --rev-shift (JS) because Safari/WebKit
   mis-calculates translate(-50%) on max-content flex tracks, leaving a blank
   gap after the last card before the duplicate set re-enters. */
.rev-marquee{ position:relative; overflow:hidden; margin-top:38px; padding:6px 0 22px; }
.rev-marquee::before, .rev-marquee::after{ content:""; position:absolute; top:0; bottom:0; width:64px; z-index:2; pointer-events:none; }
.rev-marquee::before{ left:0; background:linear-gradient(to right, var(--bg), transparent); }
.rev-marquee::after{ right:0; background:linear-gradient(to left, var(--bg), transparent); }
.section.gray .rev-marquee::before{ background:linear-gradient(to right, var(--bg-2), transparent); }
.section.gray .rev-marquee::after{ background:linear-gradient(to left, var(--bg-2), transparent); }
.rev-track{ display:flex; gap:0; width:max-content; transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  animation:rev-scroll var(--rev-dur, 40s) linear infinite;
  -webkit-animation:rev-scroll var(--rev-dur, 40s) linear infinite;
  animation-play-state:paused; -webkit-animation-play-state:paused; }
.rev-marquee.is-visible .rev-track{
  will-change:transform;
  animation-play-state:running; -webkit-animation-play-state:running;
}
.rev-marquee.is-visible:hover .rev-track{ animation-play-state:paused; -webkit-animation-play-state:paused; }
.rev-set{ display:flex; flex:0 0 auto; flex-wrap:nowrap; gap:18px; padding-right:18px; width:max-content; }
.rev-marquee .review{
  flex:0 0 320px; width:320px; min-width:320px; max-width:320px;
  margin:0; min-height:168px; box-sizing:border-box; overflow-wrap:anywhere;
}
@media (max-width:560px){ .rev-marquee::before, .rev-marquee::after{ width:36px; } }
@keyframes rev-scroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(calc(var(--rev-shift, 0px) * -1),0,0); } }
@-webkit-keyframes rev-scroll{ from{ -webkit-transform:translate3d(0,0,0); } to{ -webkit-transform:translate3d(calc(var(--rev-shift, 0px) * -1),0,0); } }

/* mobile review stack — hidden on desktop */
.rev-mobile-stack{ display:none; }

/* stat band */
.statband{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; max-width:1024px; margin:0 auto; }
.statband .s .n{ font-size:clamp(38px,5vw,60px); font-weight:600; letter-spacing:-.02em; line-height:1; }
.statband .s .l{ font-size:15px; color:var(--dark-text-2); margin-top:10px; }
@media (max-width:740px){ .statband{ grid-template-columns:1fr 1fr; gap:36px 20px; } }

/* pill list (specs) */
.pills{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:760px; margin:0 auto; }
.pills span{ font-size:14px; font-weight:500; padding:9px 16px; border-radius:980px; background:var(--bg-2); color:var(--text); border:1px solid var(--hair); }
.section.dark .pills span{ background:#1d1d1f; border-color:#2a2a2c; color:#f5f5f7; }

/* scroll progress bar */
#prog{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:9999; transition:width .1s linear; }

/* ---- SVG icon system (replaces emoji) ---- */
.ic{ display:inline-block; width:1em; height:1em; vertical-align:-.14em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ic-fill{ fill:currentColor; stroke:none; }
/* context sizes */
.ti .ic{ width:18px; height:18px; vertical-align:0; }
.bemoji .ic{ width:34px; height:34px; stroke-width:1.6; }
.streak .ic{ width:13px; height:13px; vertical-align:-2px; }
.badge .ic{ width:30px; height:30px; }
.pl .ic{ width:26px; height:26px; }
.task .wd .ic, .wd .ic{ width:15px; height:15px; vertical-align:-2px; }
.dk-praise .ic{ width:18px; height:18px; vertical-align:-3px; }
.btn .ic{ width:1.05em; height:1.05em; vertical-align:-.18em; margin-right:.12em; }
.checks .ck .ic{ width:15px; height:15px; }
.arrow .ic{ width:16px; height:16px; }
.ic-mood{ width:26px; height:26px; }

/* ============================================================
   PRIVACY CARDS (clean, light, apple white-space)
   ============================================================ */
.privc{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1024px; margin:0 auto; text-align:left; }
.privc .card{ background:var(--bg-2); border-radius:28px; padding:40px 36px; }
.privc .card .ic-badge{ width:48px; height:48px; border-radius:14px; background:#fff; display:grid; place-items:center; margin-bottom:24px; box-shadow:0 1px 3px rgba(0,0,0,.07); color:var(--accent-deep); }
.privc .card .ic-badge .ic{ width:24px; height:24px; }
.privc .card h3{ font-size:22px; font-weight:600; letter-spacing:-.015em; margin-bottom:10px; }
.privc .card p{ font-size:15.5px; color:var(--text-2); line-height:1.5; }
.privc .card p b{ color:var(--text); font-weight:600; }
@media (max-width:820px){ .privc{ grid-template-columns:1fr; gap:14px; } .privc .card{ padding:32px 30px; } }

/* privacy section — visual layout (index) */
.priv-trust{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:760px; margin:32px auto 0; padding:0 22px; }
.priv-trust span{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; padding:9px 16px; border-radius:980px; background:#fff; color:var(--text); border:1px solid var(--hair); box-shadow:0 1px 2px rgba(0,0,0,.04); }
.priv-trust .ic{ width:16px; height:16px; color:var(--accent-deep); stroke-width:2; }

.priv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:1024px; margin:0 auto; text-align:left; }
.priv-grid .cell{ background:#fff; border-radius:24px; padding:36px 32px; min-height:200px; display:flex; flex-direction:column; border:1px solid rgba(0,0,0,.04); box-shadow:0 1px 3px rgba(0,0,0,.04); }
.priv-grid .cell .bemoji{ color:var(--accent-deep); margin-bottom:16px; }
.priv-grid .cell h3{ font-size:21px; font-weight:600; margin-bottom:8px; letter-spacing:-.01em; }
.priv-grid .cell p{ font-size:16px; color:var(--text-2); line-height:1.45; }

@media (max-width:820px){
  .priv-grid{ grid-template-columns:1fr; }
  .priv-grid .cell{ padding:28px 24px; min-height:auto; }
}


/* ============================================================
   SMALL SCREENS — the hand-set line breaks are part of the layout,
   so keep them and scale the type down instead. The old floors
   (40px display / 32px headline) pushed the longest lines past a
   390px viewport and made the whole page scroll sideways.
   ============================================================ */
@media (max-width:640px){
  .display{ font-size:clamp(25px,6.9vw,42px); }
  .headline{ font-size:clamp(23px,6.3vw,34px); }
  .title{ font-size:clamp(21px,5.6vw,30px); }
  .sub{ font-size:clamp(16px,4.4vw,20px); }
  .promo{ min-height:auto; padding:52px 22px 0; }
  .lenscard{ padding:20px 18px; }
  .plan{ padding:24px 20px; }
  .strip{ padding:22px; }
}

/* mobile-only blocks — hidden on desktop */
.mobile-only{ display:none; }

/* ============================================================
   SKINMETRICS — Mobile (≤640px)
   ============================================================ */
@media (max-width:640px){
  .mobile-only{ display:block; }
  .mobile-only-flex{ display:flex; }

  /* hide desktop chrome on mobile */
  .desktop-nav,
  .desktop-rev-head,
  .mobile-hide-statement,
  .priv-trust,
  .rev-marquee,
  #prog{ display:none !important; }

  /* green hero wash (pre-v0) */
  html:has(body.theme-derma){ background:#eef3ee; }
  body.theme-derma,
  body.theme-derma::before,
  body.theme-derma main,
  body.theme-derma .derma-hero,
  body.theme-derma .promo.derma-hero,
  body.has-float-nav main{ background:#eef3ee; }

  /* ── mobile nav — floating pill, offset from hero ── */
  .mobile-nav{
    display:flex;
    position:fixed;
    top:max(12px, env(safe-area-inset-top, 0px));
    left:16px;
    right:16px;
    width:auto;
    z-index:9000;
    height:48px;
    padding:0 16px;
    align-items:center;
    justify-content:space-between;
    border-radius:980px;
    border:1px solid rgba(255,255,255,.5);
    background:rgba(238,243,238,.92);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    box-shadow:0 8px 28px rgba(79,102,84,.14),0 1px 3px rgba(60,74,61,.06);
  }
  .mobile-nav::after{ display:none; }
  .mobile-nav-name{ font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--accent-deep); }
  .mobile-nav-link{
    font-size:13px;
    color:#fff;
    font-weight:500;
    background:var(--accent);
    padding:8px 16px;
    border-radius:980px;
  }

  body.has-float-nav main{
    padding-top:calc(76px + env(safe-area-inset-top, 0px));
  }

  /* section backgrounds — alternate like desktop */
  .section{ padding:76px 22px; text-align:center; background:var(--bg); }
  .section.gray{ background:var(--bg-2); }
  .section.wash{ background:var(--accent-soft); }
  .container{ padding:0; max-width:none; }
  .container.wide{ max-width:none; }
  .eyebrow{ font-size:14px; color:var(--accent-deep); }

  /* ── hero: one headline, button, then phones ── */
  .derma-hero{
    padding:20px 22px 0;
    min-height:auto;
    text-align:center;
  }
  .derma-hero .display{
    font-size:clamp(44px,12vw,64px);
    margin-bottom:0;
    color:#3c4a3d;
  }
  .derma-hero .hero-subtitle{ display:none; }
  .derma-hero .section-cta{ margin-top:20px; }
  .derma-hero .promo-art{
    display:block;
    margin-top:28px;
    margin-left:-22px;
    margin-right:-22px;
    padding:0 0 40px;
    width:calc(100% + 44px);
    max-width:none;
  }
  .derma-hero .hero-shot{ width:100%; margin:0; }
  .derma-hero .hero-shot img{
    width:100%;
    height:auto;
    filter:drop-shadow(0 28px 52px rgba(60,74,61,.22));
    box-shadow:none;
  }

  /* section headings — v0 centered, no eyebrow (except datenschutz) */
  #funktionen > .container > .eyebrow,
  #tracking > .container > .eyebrow{ display:none; }
  #funktionen > .container > .headline,
  #tracking > .container > .headline{
    font-size:clamp(30px,8.4vw,36px);
    max-width:26ch;
    margin:0 auto;
    text-wrap:balance;
  }
  #tracking > .container > .lead-copy{
    margin-top:14px;
    font-size:19px;
    max-width:32ch;
  }

  /* datenschutz — wide card grid like desktop */
  #datenschutz.section{ padding-left:12px; padding-right:12px; }
  #datenschutz > .container.wide{ margin-top:32px; padding:0 6px; }
  #datenschutz .priv-grid .cell{
    border-radius:20px;
    padding:28px 24px;
    border:1px solid rgba(111,140,116,.12);
    box-shadow:0 2px 8px rgba(60,74,61,.06);
  }
  #datenschutz .priv-grid .cell .bemoji{ color:var(--accent-deep); }

  /* ── feature explorer — tabs, title, phone, compact detail ── */
  .explorer-wrap{ margin-top:0; padding:0; overflow:visible; }
  .explorer{ overflow:visible; }
  .explorer-tabs{
    margin:28px auto 0;
    max-width:340px;
    padding:0;
    position:relative;
    z-index:2;
  }
  .seg{
    border-radius:9px;
    background:rgba(111,140,116,.12);
    padding:2px;
    gap:2px;
  }
  .seg button{
    font-size:13px;
    padding:7px 4px;
    border-radius:7px;
    white-space:nowrap;
  }
  .seg-long{ display:none; }
  .seg-short{ display:inline; }
  .seg button[aria-selected="true"]{
    box-shadow:0 3px 8px rgba(60,74,61,.12),0 1px 1px rgba(60,74,61,.06);
    color:var(--accent-deep);
  }
  .xp-panels{
    min-height:0;
    overflow:visible;
    padding-top:8px;
  }
  .xp-panel.on{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
    overflow:visible;
  }
  .xp-copy{ display:contents; }
  .xp-copy .eyebrow{
    display:block;
    order:1;
    margin:14px 0 6px;
    font-size:13px;
    text-align:center;
  }
  .xp-panel.on h3{
    order:2;
    margin:0 0 18px;
    font-size:18px;
    letter-spacing:-.02em;
    line-height:1.25;
    max-width:26ch;
    text-align:center;
  }
  .xp-panel.on p{ display:none; }
  .xp-art{
    order:3;
    margin:0;
    width:100%;
    overflow:visible;
    flex:0 0 auto;
  }
  .feature-shot{
    height:clamp(440px,96vw,620px);
    width:100%;
    overflow:visible;
    margin:0 auto;
    display:flex;
    justify-content:center;
    align-items:flex-start;
  }
  .feature-shot img{
    height:100%;
    width:auto;
    max-width:min(100%,360px);
    object-fit:contain;
    object-position:top center;
    filter:drop-shadow(0 20px 40px rgba(60,74,61,.18));
  }

  /* ── before / after (v0) ── */
  .ba{
    width:100%;
    aspect-ratio:4/3;
    border-radius:14px;
    box-shadow:none;
    margin-top:40px;
  }
  .ba::after{ display:none; }
  .ba-ai-mark{ top:auto; bottom:8px; left:0; width:clamp(72px, 24%, 96px); }
  .ba-cap{ margin-top:12px; font-size:12px; padding:0 8px; }
  .ba-tag{
    top:14px; bottom:auto;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:0;
    box-shadow:none;
    padding:0;
    font-size:12px;
    font-weight:500;
    color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.45);
  }
  .ba-tag .ic{ display:none; }
  .ba-handle{
    top:0; bottom:0;
    width:1px;
    background:rgba(255,255,255,.9);
    box-shadow:none;
  }
  .ba-knob{
    width:34px; height:34px;
    background:#fff;
    border:0;
    box-shadow:0 1px 6px rgba(0,0,0,.28);
    color:var(--text);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .ba-knob .ic{ width:16px; height:16px; stroke-width:2; }
  .ba.dragging .ba-knob{ opacity:1; }
  .ba-cap{
    margin-top:14px;
    font-size:13px;
    color:#86868b;
    text-align:center;
  }

  /* ── reviews — card boxes like desktop ── */
  .mobile-rev-head{ text-align:center; padding:0 16px; }
  .m-rev-stars{ font-size:13px; letter-spacing:1.5px; color:#f5a623; }
  .m-rev-big{
    font-size:clamp(48px,14vw,64px);
    font-weight:600;
    letter-spacing:-.03em;
    line-height:1;
    margin-top:8px;
    color:#3c4a3d;
  }
  .m-rev-sub{ margin-top:10px; font-size:16px; color:var(--text-2); }
  .rev-mobile-stack{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:32px;
    padding:0 12px 24px;
    border-top:0;
    text-align:left;
  }
  .rev-mobile-stack .review{
    background:#fff;
    border-radius:16px;
    padding:20px;
    border:1px solid rgba(111,140,116,.14);
    box-shadow:0 2px 8px rgba(60,74,61,.06);
    text-align:left;
    display:flex;
    flex-direction:column;
  }
  .rev-mobile-stack .rev-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
    flex-direction:row;
  }
  .rev-mobile-stack .who{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:0;
  }
  .rev-mobile-stack .who .av{
    display:grid;
    width:40px;
    height:40px;
    font-size:15px;
    background:var(--accent);
  }
  .rev-mobile-stack .rev-meta .rn{
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--text);
  }
  .rev-mobile-stack .rev-meta .rd{
    display:block;
    font-size:12px;
    color:var(--text-2);
    margin-top:2px;
  }
  .rev-mobile-stack .rev-meta .rd::before{ content:none; }
  .rev-mobile-stack .stars{
    color:#fbbc04;
    font-size:13px;
    letter-spacing:.5px;
    margin:0;
    flex:none;
    order:unset;
  }
  .rev-mobile-stack p{
    font-size:15px;
    line-height:1.45;
    margin:0;
    color:var(--text);
  }
  .rev-mobile-stack .review.rev-more{ display:none; }
  .rev-mobile-stack.is-expanded .review.rev-more{ display:flex; }
  .rev-expand-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:center;
    margin-top:8px;
    padding:12px 24px;
    border:1px solid rgba(111,140,116,.35);
    border-radius:980px;
    background:#fff;
    color:var(--accent-deep);
    font-size:16px;
    font-weight:500;
  }
  .rev-expand-btn:hover{ background:var(--accent-soft); }
  .rev-mobile-stack.is-expanded .rev-expand-btn{ display:none; }

  /* ── FAQ (v0) ── */
  .faq-wrap{ padding:0; margin-top:40px; border-top:1px solid #e3e3e5; }
  .faq-head{
    padding:22px 0;
    font-size:17px;
    font-weight:500;
    letter-spacing:-.018em;
    line-height:1.35;
    align-items:flex-start;
  }
  .faq-head .pm{
    font-size:0;
    width:15px; height:15px;
    position:relative;
    margin-top:5px;
    color:#86868b;
    transform:none;
  }
  .faq-head .pm::before,
  .faq-head .pm::after{
    content:"";
    position:absolute;
    background:currentColor;
    left:50%; top:50%;
    transition:transform .12s ease;
    -webkit-transition:transform .12s ease;
  }
  .faq-head .pm::before{ width:15px; height:1.5px; transform:translate(-50%,-50%); }
  .faq-head .pm::after{ width:1.5px; height:15px; transform:translate(-50%,-50%); }
  .faq.faq-open .faq-head .pm{ transform:none; }
  .faq.faq-open .faq-head .pm::after{
    transform:translate(-50%,-50%) rotate(90deg);
    transition-duration:.65s;
    -webkit-transition-duration:.65s;
    transition-timing-function:cubic-bezier(.62,0,.2,1);
    -webkit-transition-timing-function:cubic-bezier(.62,0,.2,1);
  }
  .faq .ans{
    padding:0 4px;
    transition:height .65s cubic-bezier(.62,0,.2,1);
    -webkit-transition:height .65s cubic-bezier(.62,0,.2,1);
  }
  .faq .ans-inner{ font-size:15px; max-width:40ch; }
  .faq.faq-open .ans-inner{ padding-bottom:24px; }
  .section.gray:has(.faq-wrap){ background:var(--bg-2); }

  /* ── CTA — desktop green style ── */
  .section.cta-close{
    background:var(--bg);
    color:var(--text);
    padding:64px 22px;
  }
  .section.cta-close .headline{ color:#3c4a3d; font-size:clamp(28px,7.5vw,40px); }
  .section.cta-close .lead-copy{ color:var(--text-2); font-size:17px; }
  .section.cta-close .btn{
    background:var(--blue);
    color:#fff;
    font-weight:400;
    margin-top:24px;
  }
  .section.cta-close .btn:hover{ background:var(--blue-hover); color:#fff; }
  .section.cta-close .cap{
    margin-top:22px;
    font-size:12px;
    line-height:1.55;
    color:var(--text-2);
    max-width:34ch;
  }

  /* ── footer (v0 slim) ── */
  footer{ padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px)); }
  .foot-top,
  .foot-cols{ display:none; }
  .mobile-foot-nav{
    display:flex;
    flex-direction:column;
    gap:2px;
    border-bottom:1px solid #e3e3e5;
    padding-bottom:20px;
    margin-bottom:20px;
  }
  .mobile-foot-nav a{
    padding:8px 0;
    color:var(--text-2);
    font-size:13px;
  }
  .foot-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:0;
  }
  .foot-bottom span:last-child{ display:none; }
  .foot-bottom span:first-child{ font-size:13px; color:#86868b; }
}

/* ============================================================
   REAL DEVICE SCREENSHOTS inside the CSS phone frame.
   Captured on the iPhone 17 simulator, so the shot already
   contains the status bar and the Dynamic Island — these frames
   therefore omit the .island element the mock screens draw.
   ============================================================ */
.phone.shot .screen{ background:#000; display:block; }
.phone.shot .screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; }