/* Skynkod home page, on the validated art direction: plain mauve hero, big
   white logo, DM Sans light titles, black "Notify me" button, "Powered by
   KODA". One font on the site (DM Sans). The phones copy the app's real
   screens (app colours from utils/theme.js, system font as in the app). */
:root {
  --mauve: #C5A8BB;
  --mauve-soft: #E2C6DA;
  --plum: #8A6380;
  --ink: #1E1A1D;
  --ink-plum: #4A2F42;
  --deep: #33202E;
  --soft: #5E565C;
  --muted: #857C83;
  --bg: #FBF8FA;
  --surface: #F4EEF2;
  --card: #FFFFFF;
  --border: #EDE5EA;
  --primary-soft: #F1E8EE;
  --success: #3E9A6D;
  --success-soft: #E3F3EA;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --app: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.6; overflow-x: hidden; }
a { color: var(--plum); }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.small { font-size: 13px; color: var(--muted); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--plum); }
.kicker.center { justify-content: center; }
.kicker ion-icon { font-size: 16px; }
.kicker .k-logo { width: 18px; height: 18px; }
.prem { font-style: normal; display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0.6px; text-transform: none; font-size: 11px; color: #fff; background: var(--deep); border-radius: 999px; padding: 2px 9px 2px 7px; }
.prem ion-icon { font-size: 11px; color: var(--mauve-soft); }
h2 { font-weight: 300; font-size: clamp(30px, 4.2vw, 42px); line-height: 1.15; letter-spacing: -0.025em; margin: 0; }
.sub { font-size: 16px; line-height: 1.65; color: var(--soft); margin: 18px 0 0; max-width: 480px; }
.note { font-size: 13px; color: var(--muted); margin: 18px 0 0; }

/* ---------- The Skynkod face treatment (backgrounds only) ---------- */
.skinfx { position: relative; overflow: hidden; isolation: isolate; }
.skinfx img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.08); }
.skinfx::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(160deg, #E6CCDD 0%, #A07994 55%, #5B3A52 100%); mix-blend-mode: color; }

/* ======================= HERO ======================= */
.hero { position: relative; overflow: hidden; background: var(--mauve); color: #fff; }
/* A profile on the far right, mirrored so it looks towards the page; the
   phone sits to its left and never hides it. */
.hero-face { position: absolute; top: 0; right: 0; bottom: 0; width: 34%; background: var(--mauve); }
.hero-face img { mix-blend-mode: luminosity; opacity: 0.5; object-position: 35% 40%; transform: scaleX(-1); }
.hero-face::before { background: linear-gradient(90deg, var(--mauve) 0%, rgba(197,168,187,0.55) 35%, rgba(197,168,187,0.1) 100%); mix-blend-mode: normal; }
.nav { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; max-width: 1160px; margin: 0 auto; }
/* Language: both shown, the current one filled, so it's never confusing */
.lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,0.75); border-radius: 999px; padding: 3px; }
.lang-switch button { font: 600 12px var(--sans); letter-spacing: 1px; color: #fff; background: transparent; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: #fff; color: var(--ink-plum); }
.hero-inner { position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; padding: 32px 24px 24px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero-inner > .phone { justify-self: start; }
.hero-logo { width: min(420px, 80%); height: auto; display: block; margin-bottom: 36px; }
.hero h1 { font-weight: 300; font-size: clamp(36px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -0.03em; margin: 0; }
.lead { color: rgba(255,255,255,0.92); font-size: 17px; line-height: 1.55; font-weight: 300; letter-spacing: 0.01em; max-width: 440px; margin: 18px 0 32px; }

.waitlist { display: flex; flex-wrap: wrap; gap: 10px; max-width: 500px; }
.waitlist input { flex: 1 1 220px; min-width: 0; height: 52px; border-radius: 999px; border: 0; padding: 0 20px; font: 16px var(--sans); color: var(--ink); background: #fff; }
.waitlist input:focus { outline: 2px solid var(--plum); outline-offset: 1px; }
.waitlist button { flex: 0 0 auto; height: 52px; border: 0; border-radius: 999px; padding: 0 26px; background: #000; color: #fff; font: 600 15px var(--sans); letter-spacing: 0.3px; cursor: pointer; }
.waitlist button:disabled { opacity: 0.6; cursor: default; }
.consent { flex-basis: 100%; margin: 4px 6px 0; font-size: 12px; color: rgba(255,255,255,0.88); line-height: 1.5; }
.consent a { color: #fff; }
.message { flex-basis: 100%; margin: 4px 6px 0; font-size: 14px; font-weight: 600; color: #fff; }
.message:empty { display: none; }

/* Coming soon on the stores, in the brand's style */
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.store { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.75); border-radius: 14px; padding: 7px 16px 7px 12px; color: #fff; }
.store ion-icon { font-size: 24px; }
.store small { display: block; font-size: 10px; line-height: 1.1; opacity: 0.85; }
.store b { display: block; font-size: 15px; font-weight: 500; line-height: 1.2; }

.powered { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 24px 36px; }
.powered img { width: 24px; height: 24px; }
.powered span { display: block; color: rgba(255,255,255,0.85); font-size: 10px; font-weight: 500; }
.powered b { display: block; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 1.2px; margin-top: -1px; line-height: 1.1; }

/* ======================= PHONES: the app's real screens ======================= */
.phone { justify-self: center; position: relative; width: 300px; aspect-ratio: 330 / 680; background: #1E1A1D; border-radius: 52px; padding: 11px; box-shadow: 0 40px 80px rgba(74,47,66,0.3), inset 0 0 0 2px #3a3237; }
.screen { position: relative; height: 100%; border-radius: 42px; overflow: hidden; font-family: var(--app); }
.island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 90px; height: 26px; border-radius: 20px; background: #000; z-index: 5; }
.ios { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 0 26px; font-size: 12px; position: relative; z-index: 4; }
.ios span { display: flex; gap: 4px; font-size: 13px; }
.app { background: var(--bg); color: var(--ink); }
.app-body { padding: 14px 16px 0; }

/* Home (screens/TodayScreen.js) */
.h-top { display: flex; align-items: center; gap: 8px; }
.h-date { flex: 1; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; color: var(--plum); display: flex; align-items: center; gap: 3px; }
.h-bell { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.h-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--plum); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.h-hello { margin: 16px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; }
.h-name { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; display: flex; align-items: center; gap: 6px; }
.h-tip { margin: 8px 0 0; font-size: 10px; font-weight: 300; font-style: italic; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.h-section { margin: 16px 0 8px; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--muted); }
.h-search-row { display: flex; gap: 6px; }
.h-search { flex: 1; height: 38px; border-radius: 999px; border: 1px solid var(--border); background: #fff; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 11px; color: var(--muted); }
.h-scan { width: 38px; height: 38px; border-radius: 50%; background: var(--plum); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.h-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px; }
.h-log { display: flex; align-items: center; gap: 9px; padding-bottom: 6px; }
.h-log-i { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--plum); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.h-log b { display: block; font-size: 12px; } .h-log small { display: block; font-size: 10px; color: var(--soft); }
.h-log > div { flex: 1; }
.h-track { width: 34px; height: 5px; border-radius: 3px; background: var(--surface); overflow: hidden; }
.h-track i { display: block; height: 100%; width: 25%; background: var(--plum); border-radius: 3px; transition: width .3s; }
.h-step { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 0.5px solid var(--border); }
.h-step small { display: block; font-size: 8.5px; font-weight: 700; color: var(--muted); }
.h-step b { display: block; font-size: 11.5px; font-weight: 400; color: var(--plum); }
.h-check { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--border); flex: none; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.h-step.done .h-check { background: var(--plum); border-color: var(--plum); }
.h-step.done .h-check::after { content: '✓'; color: #fff; font-size: 11px; line-height: 1; }
.h-step.done b { text-decoration: line-through; }
.app-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; padding-bottom: 12px; background: #fff; border-top: 1px solid var(--border); display: flex; justify-content: space-around; align-items: center; color: var(--muted); font-size: 21px; }
.app-tabs ion-icon[name="home"] { color: var(--plum); }
.app-tabs img { width: 22px; height: 22px; filter: grayscale(1) opacity(0.6); }
.app-tabs .plus { width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; background: var(--mauve); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 8px 18px rgba(74,48,67,0.3); }

/* Product page (screens/ProductScreen.js) */
.back { font-size: 20px; color: var(--ink); }
.p-hero { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.p-img { width: 64px; height: 64px; border-radius: 12px; background: var(--surface); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; }
.p-hero small { display: block; font-size: 10px; color: var(--soft); font-weight: 500; }
.p-hero b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.2; }
.p-hero em { display: block; font-style: normal; font-size: 10px; color: var(--muted); text-transform: capitalize; margin-top: 2px; }
.p-match { background: var(--success-soft); border-radius: 16px; padding: 12px; margin-top: 14px; display: grid; gap: 6px; }
.p-head { display: flex; align-items: center; gap: 10px; }
.p-score { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--success); }
.p-head b { display: block; font-size: 12.5px; } .p-head small { display: block; font-size: 10px; color: var(--soft); }
.p-reason { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 10.5px; line-height: 1.35; }
.p-reason ion-icon { color: var(--success); flex: none; font-size: 13px; margin-top: 1px; }
.p-ing { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; margin-bottom: 6px; font-size: 11.5px; }
.badge { font-size: 9.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.badge.ok { background: var(--success-soft); color: var(--success); }

/* Dekod camera (screens/DekodScreen.js) */
.cam { background: #000; color: #fff; }
.cam-feed { position: absolute; inset: 0; }
.cam-feed img { opacity: 0.9; }
.scanline { position: absolute; left: 0; right: 0; height: 22%; z-index: 2; top: -25%; background: linear-gradient(180deg, transparent, rgba(226,198,218,0.25) 70%, rgba(255,255,255,0.6) 99%, transparent); animation: scan 4.5s ease-in-out infinite; }
@keyframes scan { 0% { top: -25%; } 60%, 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .scanline { display: none; } }
.cam-close { position: absolute; z-index: 4; top: 46px; left: 18px; font-size: 22px; }
.cam-oval { position: absolute; z-index: 3; left: 50%; top: 52%; width: 70%; height: 47%; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid rgba(255,255,255,0.85); }
.cam-hint { position: absolute; z-index: 3; left: 0; right: 0; top: 79%; text-align: center; margin: 0; font-size: 11.5px; font-weight: 600; }
.cam-shutter { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); width: 58px; height: 58px; border-radius: 50%; border: 3.5px solid #fff; display: flex; align-items: center; justify-content: center; }
.cam-shutter i { width: 45px; height: 45px; border-radius: 50%; background: #fff; }
.read-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.read-list span { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px 7px 10px; }
.read-list ion-icon { color: var(--plum); font-size: 16px; }
.read-list b { font-weight: 500; font-size: 14px; }

/* Rekod (screens/RekodScreen.js, plum Premium space) */
.plum { background: var(--deep); color: #fff; }
.pl-label { margin: 6px 0 12px; text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; color: var(--mauve-soft); display: flex; align-items: center; justify-content: center; gap: 4px; }
.rk-dash { display: flex; gap: 12px; align-items: center; }
.ring { position: relative; width: 78px; height: 78px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: rgba(226,198,218,0.16); stroke-width: 9; }
.ring .arc { stroke: var(--mauve-soft); stroke-linecap: round; stroke-dasharray: 298; stroke-dashoffset: 224; }
.ring b { font-size: 22px; line-height: 1; } .ring small { font-size: 8.5px; color: rgba(255,255,255,0.55); }
.pl-over { margin: 0; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; color: var(--mauve-soft); }
.rk-title { margin: 2px 0 0; font-size: 15px; font-weight: 700; line-height: 1.2; }
.pill { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 9.5px; font-weight: 700; color: var(--mauve-soft); background: rgba(226,198,218,0.16); border-radius: 999px; padding: 3px 8px; }
.rk-week { display: flex; justify-content: space-between; margin: 16px 0 8px; }
.rk-week span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rk-week i { font-style: normal; font-size: 9px; color: rgba(255,255,255,0.55); }
.rk-week em { width: 26px; height: 26px; border-radius: 50%; background: rgba(226,198,218,0.16); color: var(--mauve-soft); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.rk-week em.s { background: var(--mauve-soft); color: var(--deep); }
.rk-week em.now { box-shadow: 0 0 0 2px #fff; }
.pl-link { margin: 4px 0 0; text-align: center; font-size: 10px; font-weight: 700; color: var(--mauve-soft); display: flex; align-items: center; justify-content: center; gap: 4px; }
.banner { display: flex; align-items: center; gap: 8px; background: var(--mauve-soft); color: var(--deep); border-radius: 14px; padding: 9px 11px; margin-top: 12px; font-size: 11px; }
.banner b { flex: 1; }
.segment { display: flex; background: rgba(255,255,255,0.07); border-radius: 999px; padding: 3px; margin: 12px 0 8px; }
.segment span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; height: 26px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,0.55); }
.segment span.on { background: var(--mauve-soft); color: var(--deep); }
.pl-row { display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.07); border-radius: 14px; padding: 8px 10px; margin-bottom: 6px; }
.pl-row b { display: block; font-size: 11.5px; } .pl-row small { display: block; font-size: 9.5px; color: rgba(255,255,255,0.6); }
.ri { width: 30px; height: 30px; border-radius: 50%; background: rgba(226,198,218,0.16); color: var(--mauve-soft); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }

/* Koda (screens/KodaScreen-updated.js) */
.chat { display: flex; flex-direction: column; gap: 10px; }
.k-title { margin: 6px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.b-row { display: flex; align-items: flex-end; gap: 6px; }
.b-row.u { justify-content: flex-end; }
.k-av { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-soft); color: var(--plum); display: flex; align-items: center; justify-content: center; font-size: 11px; flex: none; }
.bubble { margin: 0; max-width: 80%; padding: 8px 11px; border-radius: 16px; font-size: 11.5px; line-height: 1.4; }
.bubble.k { background: #fff; border: 0.5px solid var(--border); border-bottom-left-radius: 5px; }
.bubble.u { background: var(--plum); color: #fff; border-bottom-right-radius: 5px; }
.quota { position: absolute; left: 0; right: 0; bottom: 64px; margin: 0; text-align: center; font-size: 9.5px; color: var(--muted); padding: 0 16px; }
.composer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; align-items: center; padding: 10px 14px 18px; border-top: 0.5px solid var(--border); background: var(--bg); }
.composer span { flex: 1; height: 34px; border-radius: 17px; border: 1px solid var(--border); background: #fff; display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: var(--muted); }
.composer i { width: 34px; height: 34px; border-radius: 50%; background: var(--plum); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-style: normal; }

/* ======================= FEATURES ======================= */
.feature { padding: 96px 0; }
.feature.alt { background: var(--surface); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feature-grid.reverse .feature-copy { order: 2; }
.points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink); }
.points ion-icon { flex: none; color: var(--success); font-size: 19px; margin-top: 2px; }

/* ======================= TRUST (the validated plum block) ======================= */
.trust { padding: 24px 0 96px; }
.trust .wrap { background: var(--ink-plum); color: #F6F1F4; border-radius: 36px; padding: 64px 48px 48px; }
.trust .kicker { color: var(--mauve); }
.trust h2 { margin-bottom: 40px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pillar { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; padding: 24px; }
.pillar-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(197,168,187,0.22); color: #F1E8EE; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.pillar h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin: 16px 0 6px; color: #fff; }
.pillar p { margin: 0; font-size: 14px; color: rgba(246,241,244,0.75); }
.trust-note { margin: 32px 0 0; font-size: 13px; color: rgba(246,241,244,0.6); text-align: center; }

/* ======================= FAQ ======================= */
.faq { padding: 24px 0 96px; }
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.faq-list { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 4px 24px; }
.faq details { border-bottom: 1px solid var(--border); padding: 18px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; line-height: 1; color: var(--plum); font-weight: 300; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 10px 0 0; font-size: 15px; color: var(--soft); }

/* ======================= FINAL ======================= */
.final { position: relative; overflow: hidden; background: var(--mauve); color: #fff; padding: 96px 0; text-align: center; }
.final-face { position: absolute; inset: 0; background: var(--mauve); }
.final-face img { mix-blend-mode: luminosity; opacity: 0.25; object-position: 60% 30%; }
.final-face::before { background: radial-gradient(circle at 50% 50%, rgba(197,168,187,0.7), rgba(197,168,187,0.3) 70%); mix-blend-mode: normal; }
.final-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.final-logo { width: 180px; height: auto; margin-bottom: 26px; }
.final h2 { max-width: 640px; }
.final .lead { margin: 14px 0 26px; }
.final .waitlist { justify-content: center; width: 100%; }
.final .stores { justify-content: center; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); text-align: center; padding: 40px 24px 48px; }
.footer-logo { height: 26px; width: auto; }
.footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin: 20px 0 12px; }
.footer a { color: var(--soft); text-decoration: none; font-size: 14px; }
.footer a:hover { color: var(--plum); }

@media (max-width: 1400px) and (min-width: 861px) { .hero-face { width: 30%; } .hero-face img { object-position: 22% 40%; } .hero-inner { grid-template-columns: 1.2fr 0.8fr; } }

/* ======================= PHONE ======================= */
@media (max-width: 860px) {
  .hero-face { width: 100%; opacity: 0.4; }
  .hero-inner > .phone { justify-self: center; }
  .hero-inner { grid-template-columns: 1fr; gap: 36px; padding-top: 12px; }
  .feature { padding: 64px 0; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-grid.reverse .feature-copy { order: 0; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  .nav { padding: 18px 16px; }
  .hero-inner { padding-left: 16px; padding-right: 16px; }
  .lead { font-size: 16px; }
  .waitlist button { flex-basis: 100%; }
  .phone { width: 280px; }
  .trust .wrap { padding: 48px 20px 32px; border-radius: 28px; margin: 0 12px; }
  .pillars { grid-template-columns: 1fr; }
}

/* ======================= MOTION =======================
   Calm, premium motion: cards come out of the phones, phones tilt in 3D with
   a glass light, content fades in on scroll, Dekod scans then validates.
   Everything is off for people who turned motion off. */
.phone { transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.phone::after { content: ''; position: absolute; inset: 11px; border-radius: 42px; pointer-events: none; z-index: 6;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 45%, transparent 60%);
  background-size: 250% 100%; background-position: var(--glare, 120%) 0; transition: background-position .6s; }

/* Cards that come out of the screens */
.pop { position: absolute; z-index: 8; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px;
  background: rgba(255,255,255,0.92); color: var(--ink); border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 24px 50px rgba(74,47,66,0.22), 0 2px 6px rgba(74,47,66,0.08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: var(--app);
  opacity: 0; transform: translate3d(0, 0, 0) scale(0.86); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.pop small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; color: var(--muted); }
.pop b { display: block; font-size: 13px; }
.pop-left { left: 0; top: 58%; }
.pop-right { right: 0; top: 14%; }
.pops-on .pop-left { opacity: 1; transform: translate3d(-165px, 0, 60px) scale(1); }
.pops-on .pop-right { opacity: 1; transform: translate3d(165px, 0, 60px) scale(1); }
.pop-check { width: 26px; height: 26px; border-radius: 8px; background: var(--plum); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.pop-score { background: var(--success-soft); }
.pop-score > b { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--success); }
.pop-ok ion-icon { color: var(--success); font-size: 20px; }
.pop-ok span { font-size: 12px; font-weight: 600; }
.pop-week { background: var(--deep); color: #fff; border-color: rgba(255,255,255,0.15); }
.pop-week small { color: var(--mauve-soft); }
.mini-ring { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--mauve-soft); border-right-color: rgba(226,198,218,0.2); border-bottom-color: rgba(226,198,218,0.2); display: flex; align-items: baseline; justify-content: center; padding-top: 7px; }
.mini-ring b { font-size: 14px; } .mini-ring small { font-size: 8px; color: rgba(255,255,255,0.6); }
.pop-koda { max-width: 230px; }
.pop-koda p { margin: 0; font-size: 12.5px; line-height: 1.35; }

/* Dekod: the scan passes, the oval turns green, the five points come out one by one */
.cam-oval { transition: border-color .5s, box-shadow .5s; }
.dekod-ok .cam-oval { border-color: #5BD08A; box-shadow: 0 0 0 4px rgba(91,208,138,0.25), 0 0 40px rgba(91,208,138,0.35); }
.dekod-ok .scanline { animation-play-state: paused; opacity: 0; }
.pop-stack { position: absolute; z-index: 8; right: -150px; top: 18%; display: grid; gap: 8px; pointer-events: none; }
.chip-pop { position: relative; padding: 9px 12px; border-radius: 14px; gap: 8px; font-size: 12px; font-weight: 600; min-width: 190px; }
.chip-pop ion-icon { color: var(--plum); font-size: 16px; }
.chip-pop span { flex: 1; }
.lvl { font-style: normal; font-size: 10px; font-weight: 700; border: 1px solid; border-radius: 999px; padding: 1px 8px; }
.lvl.none { color: var(--success); } .lvl.light { color: var(--plum); } .lvl.visible { color: #C98422; }
.dekod-ok .chip-pop { opacity: 1; transform: translate3d(0, 0, 60px) scale(1); }
.dekod-ok .chip-pop:nth-child(2) { transition-delay: .12s; } .dekod-ok .chip-pop:nth-child(3) { transition-delay: .24s; }
.dekod-ok .chip-pop:nth-child(4) { transition-delay: .36s; } .dekod-ok .chip-pop:nth-child(5) { transition-delay: .48s; }

/* Content fades in on scroll, one element after the other */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* The hero face drifts slowly with the scroll (depth) */
.hero-face img { will-change: transform; transform: scaleX(-1) translateY(var(--drift, 0px)); }

@media (max-width: 860px) {
  .pop-left { left: 10px; } .pop-right { right: 10px; }
  .pops-on .pop-left { transform: translate3d(-60px, 0, 0) scale(0.92); }
  .pops-on .pop-right { transform: translate3d(60px, 0, 0) scale(0.92); }
  .pop-stack { right: -16px; top: auto; bottom: 16%; }
  .chip-pop { min-width: 160px; font-size: 11px; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone, .pop, .js .reveal { transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .pop { opacity: 1; }
}

/* ======================= HERO MOTION ======================= */
/* Living light: three soft glows drifting slowly over the mauve */
.aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; }
.aurora i:nth-child(1) { width: 520px; height: 520px; left: -120px; top: -160px; background: radial-gradient(circle, #F4E6EF, transparent 70%); animation: drift1 18s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 460px; height: 460px; right: 18%; top: 30%; background: radial-gradient(circle, #FFFFFF, transparent 70%); opacity: 0.35; animation: drift2 22s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 600px; height: 600px; left: 30%; bottom: -320px; background: radial-gradient(circle, #A07994, transparent 70%); opacity: 0.35; animation: drift3 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(160px, 90px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-140px, -80px) scale(0.9); } }
@keyframes drift3 { to { transform: translate(-120px, -60px) scale(1.1); } }

/* Entrance: logo, title line by line, then the rest */
.hero-logo, .hero h1 .line, .hero .lead, .hero .waitlist, .hero .stores, .powered { opacity: 0; transform: translateY(22px); animation: rise 1s cubic-bezier(.2,.8,.2,1) forwards; }
.hero h1 .line { display: block; overflow: hidden; transform: none; opacity: 1; animation: none; }
.hero h1 .line > span { display: block; transform: translateY(105%); animation: lineup 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-logo { animation-delay: .1s; }
.hero h1 .line:nth-child(1) > span { animation-delay: .35s; }
.hero h1 .line:nth-child(2) > span { animation-delay: .5s; }
.hero .lead { animation-delay: .75s; }
.hero .waitlist { animation-delay: .9s; }
.hero .stores { animation-delay: 1.05s; }
.powered { animation-delay: 1.3s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes lineup { to { transform: none; } }
.hero-copy .reveal { opacity: 1 !important; transform: none !important; }

/* The Home phone rises in, then floats */
.hero-inner > .phone { animation: phoneIn 1.4s cubic-bezier(.2,.8,.2,1) .4s backwards; }
.hero-inner > .phone > .screen { animation: float 7s ease-in-out 1.8s infinite; }
@keyframes phoneIn { from { opacity: 0; transform: perspective(1400px) translateY(80px) rotateX(18deg) rotateY(-10deg); } }
@keyframes float { 50% { transform: translateY(-8px); } }
.hero .pop { animation: float 6s ease-in-out infinite; }
.hero .pop-right { transition-delay: .35s; }
.pop-uv ion-icon { color: #C98422; font-size: 22px; }
.pop-uv { top: 18%; }

/* Koda's sign breathes softly */
.powered img { animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(255,255,255,0.8)); } }

/* Scroll cue */
.scroll-cue { position: relative; z-index: 2; display: block; width: 24px; height: 38px; margin: 0 auto 6px; border: 1.5px solid rgba(255,255,255,0.8); border-radius: 14px; }
.scroll-cue span { position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .hero-inner > .phone, .hero-inner > .phone > .screen, .hero .pop, .powered img, .scroll-cue span { animation: none !important; }
  .hero-logo, .hero h1 .line > span, .hero .lead, .hero .waitlist, .hero .stores, .powered { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* "Coming soon" in the header, with a softly pulsing dot */
.soon-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,0.75); border-radius: 999px; padding: 7px 14px; background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; animation: rise 1s cubic-bezier(.2,.8,.2,1) .2s forwards; }
.soon-pill i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.7); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .soon-pill { animation: none; opacity: 1; } .soon-pill i { animation: none; } }

/* ======================= STICKY HEADER =======================
   Frosted glass bar that slides down once the hero is gone: the logo,
   "coming soon", the language and a compact "Notify me". */
.sticky { position: fixed; z-index: 50; top: 12px; left: 50%; width: min(1100px, calc(100% - 24px)); transform: translate(-50%, -140%);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s; opacity: 0; pointer-events: none; }
.sticky.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.sticky-inner { display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 20px; border-radius: 999px;
  background: rgba(251,248,250,0.72); border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 12px 40px rgba(74,47,66,0.14), inset 0 1px 0 rgba(255,255,255,0.7);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); }
.sticky-logo img { height: 20px; width: auto; display: block; }
.sticky-soon { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--plum); }
.sticky-soon i { width: 6px; height: 6px; border-radius: 50%; background: var(--plum); animation: pulseDark 2s ease-out infinite; }
@keyframes pulseDark { 0% { box-shadow: 0 0 0 0 rgba(138,99,128,0.5); } 100% { box-shadow: 0 0 0 8px rgba(138,99,128,0); } }
.sticky-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang-switch.dark { border-color: var(--border); background: #fff; }
.lang-switch.dark button { color: var(--soft); }
.lang-switch.dark button[aria-pressed="true"] { background: var(--ink-plum); color: #fff; }
.sticky-cta { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 999px; background: #000; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; }
.sticky-cta:hover { background: var(--ink-plum); }
@media (max-width: 600px) {
  .sticky { top: 8px; }
  .sticky-inner { padding: 8px 8px 8px 16px; gap: 10px; }
  .sticky-soon, .lang-switch.dark { display: none; }
  .sticky-cta { height: 36px; padding: 0 14px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }

/* ======================= APPLE-STYLE HEADER =======================
   --p goes from 0 (top of the page) to 1 (after ~220px of scroll): the bar
   narrows, lifts off the top, gets its frosted glass, the logo and the
   "Notify me" button. Colours switch from white to ink halfway (.solid). */
.sticky { display: none; }
.hero { padding-top: 76px; }
.topbar { --p: 0; position: fixed; z-index: 60; left: 50%; top: calc(var(--p) * 12px);
  width: calc(100% - var(--p) * (100% - min(1100px, 100% - 24px)));
  transform: translateX(-50%); pointer-events: none; }
.topbar-inner { pointer-events: auto; display: flex; align-items: center; gap: 16px;
  padding: calc(20px - var(--p) * 10px) calc(24px - var(--p) * 12px) calc(20px - var(--p) * 10px) calc(24px - var(--p) * 4px);
  border-radius: calc(var(--p) * 40px);
  background: rgba(251,248,250, calc(var(--p) * 0.74));
  border: 1px solid rgba(255,255,255, calc(var(--p) * 0.85));
  box-shadow: 0 12px 40px rgba(74,47,66, calc(var(--p) * 0.14));
  backdrop-filter: saturate(calc(100% + var(--p) * 60%)) blur(calc(var(--p) * 18px)); -webkit-backdrop-filter: saturate(calc(100% + var(--p) * 60%)) blur(calc(var(--p) * 18px)); }
.tb-logo { display: block; width: calc(var(--p) * 108px); overflow: hidden; opacity: var(--p); flex: none; }
.tb-logo img { height: 20px; width: auto; display: block; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tb-cta { display: inline-flex; align-items: center; gap: 6px; height: 40px; border-radius: 999px; background: #000; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden;
  max-width: calc(var(--p) * 180px); padding: 0 calc(var(--p) * 18px); opacity: var(--p); }
.tb-cta:hover { background: var(--ink-plum); }
.topbar .soon-pill, .topbar .lang-switch, .topbar .lang-switch button { transition: color .35s, background .35s, border-color .35s; }
.topbar.solid .soon-pill { color: var(--plum); border-color: transparent; background: transparent; padding-left: 6px; }
.topbar.solid .soon-pill i { background: var(--plum); animation-name: pulseDark; }
.topbar.solid .lang-switch { border-color: var(--border); background: #fff; }
.topbar.solid .lang-switch button { color: var(--soft); }
.topbar.solid .lang-switch button[aria-pressed="true"] { background: var(--ink-plum); color: #fff; }
@keyframes pulseDark { 0% { box-shadow: 0 0 0 0 rgba(138,99,128,0.5); } 100% { box-shadow: 0 0 0 8px rgba(138,99,128,0); } }
@media (max-width: 600px) {
  .topbar-inner { gap: 10px; }
  .topbar.solid .soon-pill, .topbar.solid .lang-switch { display: none; }
  .tb-cta { height: 36px; font-size: 13px; }
}

/* Same art direction as the hero, no glass: a solid mauve bar that only
   shrinks into a floating pill; white text all along. */
.topbar-inner { background: rgba(197,168,187, var(--p)); border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 14px 36px rgba(74,47,66, calc(var(--p) * 0.22)); }
.topbar.solid .soon-pill { color: #fff; border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.12); padding-left: 14px; }
.topbar.solid .soon-pill i { background: #fff; animation-name: pulse; }
.topbar.solid .lang-switch { border-color: rgba(255,255,255,0.75); background: transparent; }
.topbar.solid .lang-switch button { color: #fff; }
.topbar.solid .lang-switch button[aria-pressed="true"] { background: #fff; color: var(--ink-plum); }

/* Not a floating pill: a full-width bar stuck to the top that only gets
   shorter and turns solid mauve; content stays aligned with the page. */
.topbar { top: 0; width: 100%; }
.topbar-inner { border-radius: 0; max-width: none; padding-left: max(24px, calc((100% - 1160px) / 2 + 24px)); padding-right: max(24px, calc((100% - 1160px) / 2 + 24px));
  padding-top: calc(20px - var(--p) * 10px); padding-bottom: calc(20px - var(--p) * 10px);
  box-shadow: 0 1px 0 rgba(255,255,255, calc(var(--p) * 0.25)), 0 8px 24px rgba(74,47,66, calc(var(--p) * 0.12)); }
@media (max-width: 600px) { .topbar-inner { padding-left: 16px; padding-right: 12px; } }

/* Skin forecast (components/SkinForecast.js) */
.k-av img { width: 15px; height: 15px; }
.fc-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 12px; }
.fc-now { display: flex; align-items: center; gap: 8px; }
.fc-temp { flex: 1; display: flex; flex-direction: column; }
.fc-temp b { font-size: 20px; }
.fc-temp small { font-size: 8.5px; color: var(--plum); }
.fc-season { display: flex; align-items: center; gap: 3px; align-self: flex-start; background: var(--primary-soft); color: var(--plum); border-radius: 99px; padding: 3px 7px; font-size: 8.5px; font-weight: 600; }
.fc-days { display: flex; gap: 6px; margin-top: 10px; }
.fc-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--primary-soft); color: var(--plum); border-radius: 12px; padding: 6px 0; }
.fc-day small { font-size: 8px; }
.fc-day.on { background: var(--plum); color: #fff; }
.fc-head { display: block; font-size: 11px; margin-top: 10px; }
.fc-text { font-size: 9.5px; color: var(--ink-soft, #6E5A68); margin: 3px 0 0; line-height: 1.4; }
.fc-signal { display: flex; gap: 5px; font-size: 9px; color: var(--ink-soft, #6E5A68); border-top: 1px solid var(--border); margin: 8px 0 0; padding-top: 8px; line-height: 1.4; }
.fc-signal ion-icon { color: var(--plum); flex: none; font-size: 11px; margin-top: 1px; }
.pop-fc { top: 58%; }
.fc-mini { padding: 9px; border-radius: 14px; }
.fc-mini .fc-days { margin-top: 7px; }
.fc-mini .fc-temp b { font-size: 16px; }

/* And also (6 small cards) */
.also { padding: 96px 0; }
.also h2.center { max-width: 640px; margin-left: auto; margin-right: auto; }
.also-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.also-card { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 22px; }
.also-icon { width: 42px; height: 42px; border-radius: 14px; background: var(--primary-soft); color: var(--plum); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.also-card h3 { margin: 14px 0 6px; font-size: 17px; }
.also-card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted, #6E5A68); }

/* Free / Premium */
.plans { padding: 96px 0; background: var(--primary-soft); }
.plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.plan-col { background: #fff; border-radius: 24px; padding: 28px; border: 1px solid var(--border); }
.plan-col h3 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.plan-col.premium { background: #33202E; color: #fff; border-color: #33202E; }
.plan-col.premium h3 ion-icon { color: #E2C6DA; }
.plan-col.premium .points li { color: #fff; }
.plan-col.premium .points ion-icon { color: #E2C6DA; }
.plan-note { margin: 20px 0 0; font-size: 13px; color: #E2C6DA; }
@media (max-width: 860px) {
  .also-grid { grid-template-columns: 1fr 1fr; }
  .plans-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .also, .plans { padding: 64px 0; }
  .also-grid { grid-template-columns: 1fr; }
}

/* ---------- 6 · Buy less, buy better (Lita, 2026-10-24) ---------- */
.buy-card { background: #FBEFD9; border-radius: 16px; padding: 12px; margin-top: 14px; display: grid; gap: 4px; }
.buy-card small { font-size: 8px; font-weight: 800; letter-spacing: .8px; color: var(--muted); }
.buy-card b { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink); }
.buy-card b ion-icon { color: #D98A2B; font-size: 18px; }
.buy-card p { font-size: 10px; line-height: 1.45; color: var(--ink); margin: 0; }
.buy-card strong { font-size: 10px; color: #B96F12; }
.shelf-rows, .prog-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 6px 12px; }
.shelf-rows p, .prog-card > p { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink); margin: 0; padding: 6px 0; border-bottom: 1px solid var(--border); }
.shelf-rows p:last-child { border-bottom: 0; }
.shelf-rows p b, .prog-card > p b { margin-left: auto; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: #6BAA7F; } .dot.mid { background: #E3B35C; } .dot.stop { background: #D26A6A; } .dot.need { background: var(--plum); }
.dot.warn { background: #E39A4B; } .dot.red { background: #D26A6A; } .dot.blue { background: #7FA6C9; }

/* ---------- 7 · See what really works ---------- */
.prog-card { padding: 8px 12px 12px; }
.prog-card .down { color: #4E9A68; }
.prog-card small { display: block; font-size: 8px; color: var(--muted); margin-top: 6px; }
.prog-title { display: block; font-size: 11px; margin-top: 10px; color: var(--ink); }
.prog-insight { display: flex; gap: 6px; font-size: 10px; line-height: 1.4; color: var(--ink); margin: 4px 0 0; }
.prog-insight ion-icon { color: #4E9A68; flex: none; margin-top: 2px; }
.tl { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; padding: 5px 0; }
.tl span { font-size: 8px; font-weight: 700; color: var(--muted); }
.tl p { margin: 0; font-size: 10px; color: var(--ink); border-left: 2px solid var(--border); padding-left: 8px; }

/* ---------- 8 · Skin issues explained ---------- */
.issues { padding: 96px 0; background: var(--surface); }
.issues .sub.center { max-width: 640px; margin: 14px auto 0; text-align: center; }
.issue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.issue-grid figure { margin: 0; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); }
.issue-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.issue-grid figcaption { padding: 12px 14px; font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .issue-grid { grid-template-columns: 1fr 1fr; } }

.next-buy p { align-items: flex-start; gap: 10px; }
.next-buy .rank { margin-left: 0 !important; color: var(--plum); font-size: 14px; }
.next-buy span { display: grid; gap: 2px; }
.next-buy small { font-size: 9px; color: var(--muted); line-height: 1.35; }
.prog-card > p.prog-insight { display: flex; align-items: flex-start; border-bottom: 0; padding-bottom: 2px; }
.prog-insight span { flex: 1; }

/* ---------- Mockups following the app as of 2026-10-24 ---------- */
.decision-mini { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px; margin-top: 12px; display: grid; gap: 3px; }
.decision-mini small { font-size: 8px; font-weight: 800; letter-spacing: .8px; color: var(--muted); }
.decision-mini b { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink); }
.decision-mini b ion-icon { color: #3E9A6D; font-size: 16px; }
.decision-mini p { margin: 0; font-size: 9.5px; color: var(--soft); line-height: 1.4; }
.decision-mini .ask { display: flex; align-items: center; gap: 5px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 9.5px; font-weight: 700; color: var(--plum); }
.decision-mini .ask img { width: 12px; height: 12px; }
.water-mini { display: flex; align-items: center; gap: 10px; }
.water-mini div { flex: 1; } .water-mini b { display: block; font-size: 11px; } .water-mini small { display: block; font-size: 9px; color: var(--muted); }
.water-mini .plus1 { background: var(--plum); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 4px 9px; }
/* Rekod is light now, like the app (plum and the diamond as touches) */
.rekod-light .pl-label, .rekod-light .pl-over, .rekod-light .pl-link { color: #33202E; }
.rekod-light .ring circle { stroke: #F1E8EE; } .rekod-light .ring .arc { stroke: var(--plum); }
.rekod-light .ring b, .rekod-light .rk-title { color: var(--ink); } .rekod-light .ring small, .rekod-light .rk-week i { color: var(--muted); }
.rekod-light .pill { color: var(--plum); background: #F1E8EE; }
.rekod-light .rk-week em { background: #F1E8EE; color: var(--plum); } .rekod-light .rk-week em.s { background: var(--plum); color: #fff; } .rekod-light .rk-week em.now { box-shadow: 0 0 0 2px #33202E; }
.rekod-light .banner { background: var(--plum); color: #fff; }
.rekod-light .segment { background: #F1E8EE; } .rekod-light .segment span { color: var(--muted); } .rekod-light .segment span.on { background: #fff; color: var(--plum); }
.rekod-light .pl-row { background: #fff; border-color: var(--border); } .rekod-light .pl-row b { color: var(--ink); } .rekod-light .pl-row small { color: var(--muted); }
.rekod-light .ri { background: #F1E8EE; color: var(--plum); }

/* ---------- The simpler page (2026-10-24): one trust strip ---------- */
.trust-strip { padding: 56px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--card); }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; }
.trust-row span { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.trust-row ion-icon { font-size: 20px; color: var(--plum); }
.trust-row b { font-weight: 600; font-size: 15px; }

/* ---------- The Skynkod story (landing direction, 2026-10-24) ---------- */
.hero .support { margin: -6px 0 22px; font-size: 13px; letter-spacing: .4px; color: rgba(255,255,255,0.72); }
.step-num { font-weight: 800; color: var(--plum); margin-right: 6px; letter-spacing: 0; }
.problem { padding: 110px 0 90px; text-align: center; }
.problem-quote { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.4vw, 28px); color: var(--soft); max-width: 640px; margin: 0 auto 28px; line-height: 1.45; }
.problem .sub.center { max-width: 560px; margin: 12px auto 0; }
.loop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 44px; }
.loop span { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 10px 16px; }
.loop span ion-icon { color: var(--plum); font-size: 18px; } .loop b { font-weight: 600; color: var(--ink); }
.loop i { width: 22px; height: 2px; background: var(--mauve); border-radius: 2px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--plum); }
.flow span { background: var(--surface); border-radius: 999px; padding: 6px 12px; } .flow i { font-style: normal; color: var(--muted); }
.buyless { padding: 110px 0; background: var(--ink-plum); color: #fff; }
.buyless h2 { color: #fff; } .buyless .sub { color: rgba(255,255,255,0.78); } .buyless .kicker, .buyless .step-num { color: #E2C6DA; }
.save-title { margin: 26px 0 10px; font-weight: 700; color: #fff; }
.save-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.save-list li { position: relative; padding-left: 28px; color: rgba(255,255,255,0.88); }
.save-list li::before { content: '✕'; position: absolute; left: 0; top: 0; color: #E2C6DA; font-weight: 700; }
.save-end { margin: 22px 0 0; font-size: 18px; font-weight: 700; color: #fff; }
.indep { display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); }
.indep ion-icon { font-size: 26px; color: #E2C6DA; flex: none; } .indep b { display: block; color: #fff; font-size: 16px; } .indep span { color: rgba(255,255,255,0.75); font-size: 14px; }
.startfree { padding: 90px 0; text-align: center; background: var(--surface); }
.startfree .sub.center { max-width: 560px; margin: 12px auto 0; }
@media (max-width: 900px) { .loop i { display: none; } }

/* The four things Skynkod does, tiny, right under the hero button */
.hero-features { grid-column: 1 / -1; width: 100%; margin: 4px 0 0; font-size: 12px; letter-spacing: .3px; color: rgba(255,255,255,0.78); }

/* ---------- Phones drawn from the app's real screens (2026-10-24) ---------- */
.a-title { margin: 6px 0 0; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; }
.a-sub { margin: 0 0 10px; font-size: 10px; color: var(--muted); }
.a-tabs { display: flex; background: var(--surface); border-radius: 10px; padding: 3px; gap: 2px; }
.a-tabs span { flex: 1; text-align: center; font-size: 9px; font-weight: 700; color: var(--soft); padding: 6px 2px; border-radius: 8px; }
.a-tabs span.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.a-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px; }
.a-base { display: flex; align-items: center; gap: 10px; }
.a-base .wk { width: 42px; height: 42px; border-radius: 12px; background: #F1E8EE; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--plum); flex: none; }
.a-base .wk small { font-size: 7px; font-weight: 700; } .a-base .wk b { font-size: 16px; line-height: 1; }
.a-base b { display: block; font-size: 11px; color: var(--ink); } .a-base small { font-size: 9px; color: var(--soft); }
.a-hero { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.a-thumb { width: 52px; height: 52px; border-radius: 14px; background: #F4EEF2; display: flex; align-items: center; justify-content: center; flex: none; }
.a-hero small { font-size: 9px; color: var(--soft); } .a-hero b { display: block; font-size: 13px; color: var(--ink); line-height: 1.2; } .a-hero em { font-style: normal; font-size: 9px; color: var(--muted); text-transform: capitalize; }
.a-decision { margin-top: 12px; padding: 10px; }
.a-decision .buy { border-radius: 12px; padding: 10px; display: grid; gap: 3px; }
.a-decision .buy.ok { background: #E3F3EA; } .a-decision .buy.warn { background: #FBEFD9; }
.a-decision .buy small { font-size: 7.5px; font-weight: 800; letter-spacing: .7px; color: var(--muted); }
.a-decision .buy b { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--ink); }
.a-decision .buy.ok b ion-icon { color: #3E9A6D; font-size: 17px; } .a-decision .buy.warn b ion-icon { color: #C98422; font-size: 17px; }
.a-decision .buy p { margin: 0; font-size: 9.5px; line-height: 1.4; color: var(--ink); }
.a-decision .buy strong { font-size: 9.5px; color: #C98422; }
.a-decision .ask { display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 9.5px; font-weight: 700; color: var(--plum); }
.a-decision .ask img { width: 12px; height: 12px; }

/* ---------- After the landing audit (2026-10-24) ---------- */
.hero .eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: 2px; color: #fff; opacity: .92; }
.hero .consent { font-size: 11.5px; }
.proof { padding: 54px 0; background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.proof-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.proof-row b { display: block; font-size: 40px; font-weight: 800; color: var(--plum); letter-spacing: -1px; line-height: 1.1; }
.proof-row span { display: block; margin-top: 6px; font-size: 14px; color: var(--soft); }
.adapt { padding: 100px 0; }
.adapt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.adapt .k-logo { width: 22px; height: 22px; }
.buyless-inner { max-width: 720px; }
.mid-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; background: #fff; color: var(--ink); font-weight: 700; border-radius: 999px; padding: 14px 24px; text-decoration: none; }
.mid-cta:hover { transform: translateY(-1px); }
.trust-light .wrap { background: var(--surface) !important; color: var(--ink) !important; }
.trust-light h2, .trust-light h3 { color: var(--ink) !important; }
.trust-light p, .trust-light .kicker { color: var(--soft) !important; }
.trust-light .pillar { background: #fff !important; border-color: var(--border) !important; }
.trust-light .pillar-icon { background: #F1E8EE !important; color: var(--plum) !important; }
.trust-light .pillars { grid-template-columns: repeat(5, 1fr) !important; }
.prem-line { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--plum); }
.a-shelf { margin-top: 10px; display: grid; gap: 4px; }
.a-shelf .ov { font-size: 7.5px; font-weight: 800; letter-spacing: .7px; color: var(--plum); }
.a-shelf > b { font-size: 10.5px; line-height: 1.35; color: var(--ink); margin-bottom: 4px; }
.a-shelf p { display: flex; align-items: center; gap: 7px; margin: 0; padding: 4px 0; font-size: 10px; color: var(--ink); border-top: 1px solid var(--border); }
.a-shelf em { font-style: normal; font-weight: 700; margin-left: auto; }
.a-row { margin-top: 8px; display: grid; gap: 2px; }
.a-row small { font-size: 9px; color: var(--soft); } .a-row b { font-size: 11px; color: var(--ink); }
.stopline { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 9px; font-weight: 700; color: #CF4F57; }
@media (max-width: 900px) { .proof-row { grid-template-columns: 1fr 1fr; } .adapt-grid { grid-template-columns: 1fr; } .trust-light .pillars { grid-template-columns: 1fr 1fr !important; } }

.hero-pop { top: 78% !important; }
/* Narrow screens: bubbles sit on the phone's empty lower part, never on its content */
@media (max-width: 900px) {
  .feature .pop-right, .feature .pop-left { top: auto !important; bottom: 7%; }
  .hero-pop { top: auto !important; bottom: 6%; }
}
.hero .eyebrow { opacity: 0; transform: translateY(22px); animation: rise 1s cubic-bezier(.2,.8,.2,1) .2s forwards; }
@media (prefers-reduced-motion: reduce) { .hero .eyebrow { animation: none; opacity: .92; transform: none; } }

/* ---------- The teaser (2026-10-24) ---------- */
/* The phone decodes a product, then hides the verdict: "Your verdict is waiting". */
.dc-status { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 11px; color: var(--plum); }
.dc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--plum); animation: dcPulse 1.2s ease-in-out infinite; }
.dc-bar { height: 4px; border-radius: 2px; background: #F1E8EE; margin-top: 8px; overflow: hidden; }
.dc-bar i { display: block; height: 100%; width: 0; background: var(--plum); border-radius: 2px; animation: dcFill 6s ease-in-out infinite; }
.dc-list { margin-top: 10px; display: grid; gap: 5px; }
.dc-list p { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 7px 10px; background: #fff; border: 1px solid var(--border); border-radius: 10px; font-size: 10.5px; color: var(--ink); opacity: .35; animation: dcRow 6s ease-in-out infinite; }
.dc-list p i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--mauve); }
.dc-list p:nth-child(2) { animation-delay: .5s; } .dc-list p:nth-child(3) { animation-delay: 1s; } .dc-list p:nth-child(4) { animation-delay: 1.5s; } .dc-list p:nth-child(5) { animation-delay: 2s; } .dc-list p:nth-child(6) { animation-delay: 2.5s; }
.dc-verdict { position: relative; margin-top: 12px; }
.dc-blur { background: #FBEFD9; border-radius: 14px; padding: 12px; filter: blur(5px); display: grid; gap: 4px; }
.dc-blur small { font-size: 8px; font-weight: 800; letter-spacing: .8px; color: var(--muted); } .dc-blur b { font-size: 15px; color: #C98422; } .dc-blur p { margin: 0; font-size: 10px; color: var(--ink); }
.dc-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink); }
.dc-lock ion-icon { font-size: 15px; color: var(--plum); }
@keyframes dcPulse { 50% { opacity: .3; transform: scale(.8); } }
@keyframes dcFill { 0% { width: 0; } 70%, 100% { width: 100%; } }
@keyframes dcRow { 0% { opacity: .35; } 12%, 90% { opacity: 1; } 100% { opacity: .35; } }
@keyframes dcCheck { 0%, 10% { background: transparent; } 14%, 90% { background: var(--plum); border-color: var(--plum); } }
.dc-list p i { animation: dcCheck 6s ease-in-out infinite; animation-delay: inherit; }
/* One big sentence per screen, revealed on scroll */
.tease { min-height: 78vh; display: flex; align-items: center; padding: 80px 0; }
.tease-alt { background: var(--ink-plum); }
.tease-line { margin: 0 auto; max-width: 900px; text-align: center; font-size: clamp(30px, 5vw, 64px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; color: var(--ink); opacity: 0; transform: translateY(28px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.tease-alt .tease-line { color: #fff; }
.tease-line.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tease-line { opacity: 1; transform: none; } .dc-bar i, .dc-list p, .dc-list p i, .dc-dot { animation: none; opacity: 1; } .dc-bar i { width: 100%; } }

/* ---------- After the second landing review (2026-10-24) ---------- */
.shelf-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 40px; margin: 38px auto 10px; }
.shelf-stats p { margin: 0; display: flex; flex-direction: column; align-items: center; }
.shelf-stats b { font-size: clamp(40px, 6vw, 64px); font-weight: 800; color: var(--plum); letter-spacing: -1.5px; line-height: 1; }
.shelf-stats span { margin-top: 6px; font-size: 14px; color: var(--soft); max-width: 140px; text-align: center; }
.manager { margin: 34px 0 6px; text-align: center; font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.solution-intro { padding: 70px 0 30px; text-align: center; }
.solution-intro h2 { max-width: 760px; margin: 0 auto; }
.solution-intro .loop b { color: var(--plum); font-weight: 800; }
.tiktok { margin: 30px 0 0; }
.tiktok p { margin: 0; font-size: clamp(22px, 3vw, 30px); color: rgba(255,255,255,0.88); letter-spacing: -.01em; }
.tiktok b { display: inline-block; margin-top: 14px; font-size: 15px; letter-spacing: 2px; color: #E2C6DA; }
.examples { padding: 100px 0; }
.examples .sub.center { max-width: 560px; margin: 12px auto 0; }
.ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.ex-card { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 20px; display: grid; gap: 8px; align-content: start; box-shadow: 0 18px 40px rgba(74,47,66,0.08); }
.ex-card small { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.ex-card p { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.45; }
.ex-prod { color: var(--soft) !important; font-size: 13px !important; }
.ex-card b.warn { display: flex; align-items: center; gap: 6px; font-size: 20px; color: var(--ink); } .ex-card b.warn ion-icon { color: #C98422; }
.ex-card strong { color: #C98422; }
.ex-line { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); }
.ex-line em { margin-left: auto; font-style: normal; font-weight: 700; }
.ex-rank { display: flex; gap: 12px; } .ex-rank > b { font-size: 22px; color: var(--plum); } .ex-rank span { display: grid; gap: 2px; color: var(--soft) !important; font-size: 13px; } .ex-rank span b { color: var(--ink); font-size: 15px; }
.ex-dont { margin-top: 6px !important; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px !important; font-weight: 700; letter-spacing: .6px; color: var(--muted) !important; }
.ex-proof { margin: 32px auto 0; text-align: center; font-size: 14px; color: var(--soft); max-width: 760px; }
.trust-short { text-align: center; } .trust-short h2 { margin: 0 0 22px; }
.tr-link { display: inline-block; margin-top: 18px; font-size: 14px; color: var(--plum); font-weight: 600; }
.final-small { margin: 6px 0 0; font-size: 13px; color: rgba(255,255,255,0.75); }
.ctx { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ctx span { display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; font-weight: 700; color: var(--plum); background: #F1E8EE; border-radius: 999px; padding: 4px 7px; }
@media (max-width: 900px) { .ex-grid { grid-template-columns: 1fr; } }