:root {
  --bg: #faf6f2;
  --bg-alt: #ddb9a3;
  --bg-2: #fff3ec;
  --surface: #ffffff;
  --surface-2: #fff8f4;
  --line: rgba(42, 22, 80, 0.12);
  /* High-contrast text so it's easy to read for everyone */
  --text: #000000;
  --text-2: #2e2a31;
  --text-3: #45404a;
  --brand: #6b2fd0;
  --brand-hover: #5a22b8;
  --brand-soft: #eadcfb;
  --brand-ink: #2a1650;
  --link: #6b2fd0;
  --teal: #1d9e75;
  --amber: #ef9f27;
  --coral: #f0997b;
  --radius: 999px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--link); }
a:hover { color: var(--text); }
button, input { font: inherit; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(250, 246, 242, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -0.5px; }
.brand img { width: auto; height: 26px; }
.brand .sym { height: 32px; }
.brand .word { height: 24px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: var(--radius);
  border: 0; cursor: pointer; text-decoration: none; font-weight: 600; font-size: 15px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-block { width: 100%; height: 48px; }
.btn svg { width: 18px; height: 18px; }

/* Hero */
.hero { min-height: calc(100vh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 0 32px; }
.hero-mark { width: 150px; height: 150px; margin-bottom: 16px; animation: bob 3.6s ease-in-out infinite; filter: drop-shadow(0 18px 24px rgba(42, 22, 80, 0.18)); }
.hero h1 { margin: 0 0 14px; font-size: clamp(38px, 6.5vw, 64px); line-height: 1.05; letter-spacing: -1.8px; font-weight: 800; max-width: 680px; }
.hero .sub { margin: 0 0 32px; color: var(--text-2); font-size: 18px; max-width: 460px; }
.hero-title { display: flex; flex-direction: column; align-items: center; margin-bottom: 36px; }
.hero-title .line { display: block; white-space: nowrap; }
@media (max-width: 420px) { .hero h1.hero-title { font-size: 34px; } }
/* Profile-picture style avatar inside the headline */
.mark-chip { display: inline-flex; align-items: center; justify-content: center; width: 1.12em; height: 1.12em; border-radius: 50%; background: #fff; vertical-align: -0.18em; overflow: hidden; box-shadow: 0 0 0 0.05em #fff, 0 6px 18px rgba(42, 22, 80, 0.18); }
.mark-chip img { width: 88%; height: 88%; object-fit: contain; margin-top: 8%; }
button.mark-chip { border: 0; padding: 0; font: inherit; cursor: pointer; transition: transform 0.2s ease; }
button.mark-chip:hover { transform: scale(1.06) rotate(-4deg); }
button.mark-chip:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
/* Avatar swap: old Ervo spins out, new one pops in */
.mark-chip img { transition: transform 0.28s cubic-bezier(.4, 0, .2, 1), opacity 0.28s ease; }
.mark-chip img.out { transform: scale(0.4) rotate(-25deg); opacity: 0; }
.mark-chip img.in { transform: scale(0.4) rotate(25deg); opacity: 0; transition: none; }

/* Rotating word: old word slides up and out, new one slides up from below */
.rot { display: inline-flex; justify-content: center; height: 1.2em; overflow: hidden; vertical-align: bottom; color: var(--text); transition: width 0.6s cubic-bezier(.2, .8, .2, 1); white-space: nowrap; }
.rot-item { display: inline-block; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1), opacity 0.5s ease, filter 0.5s ease; }
.rot-item.leave { transform: translateY(-100%); opacity: 0; filter: blur(4px); }
.rot-item.enter { transform: translateY(100%); opacity: 0; filter: blur(4px); transition: none; }
.inline-chip { display: inline-flex; align-items: center; justify-content: center; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--brand-soft); vertical-align: -0.12em; margin: 0 0.06em; }
.inline-chip img { width: 78%; height: 78%; }
.inline-icon { display: inline-block; width: 0.95em; height: 0.95em; vertical-align: -0.1em; margin-left: 0.12em; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Auth card */
.auth { width: 100%; max-width: 410px; }
.auth-title { color: var(--text-2); margin: 0 0 14px; font-size: 16px; }
/* Input boxes are the opposite of the page: dark in light mode, white in dark mode */
.field { width: 100%; height: 54px; border-radius: 16px; border: 1px solid #231d2b; background: #231d2b; color: #ffffff; padding: 0 18px; font-size: 16px; outline: none; }
.field::placeholder { color: #cfc8d8; }
.field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(107, 47, 208, 0.25); }
.field.code { letter-spacing: 10px; text-align: center; font-size: 22px; font-weight: 700; }
.fine { color: var(--text-3); font-size: 12.5px; margin: 10px 0 18px; }
.error { color: #b42318; font-size: 13.5px; margin: 8px 0 0; min-height: 20px; text-align: left; }
.auth-step { display: none; }
.auth-step.active { display: block; animation: rise 0.35s ease both; }
.link-btn { background: none; border: 0; color: var(--link); cursor: pointer; padding: 8px; font-size: 14px; }
.link-btn:hover { color: var(--text); }
.demo-note { display: inline-block; margin-top: 12px; font-size: 12px; color: #7a4a00; background: rgba(239, 159, 39, 0.22); padding: 4px 10px; border-radius: 999px; }
.welcome-owl { width: 72px; height: 72px; margin: 0 auto 12px; }

.learn-more { margin-top: 56px; }

/* Personal / Business switch in sign-up */
.seg { display: grid; grid-template-columns: 1fr 1fr; background: #231d2b; border: 1px solid #231d2b; border-radius: 999px; padding: 4px; margin-bottom: 12px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 999px; font-weight: 700; font-size: 15px; color: #ffffff; transition: background 0.2s, color 0.2s; }
.seg input:checked + span { background: #b89cff; color: #12091f; }
.seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(107, 47, 208, 0.35); }

/* Pick your Ervo */
.btn-dark { background: var(--text); color: #fff; }
.btn-dark:hover { background: #3c2470; color: #fff; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.plan-card.biz { background: #2a1650; color: #fff; border-color: transparent; }
.plan-tag { align-self: flex-start; font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; padding: 5px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
.biz .plan-tag { background: #ffe6d9; color: #2a1650; }
.plan-card h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.plan-card h3 img { width: auto; height: 30px; }
.plan-for { margin: 0; color: var(--text-2); }
.biz .plan-for { color: #d9cdf2; }
.plan-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.does li::before { content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.biz .does li::before { background: #5dcaa5; color: #04342c; }
.wont { flex: 1; }
.wont li { color: var(--text-2); font-size: 14px; }
.biz .wont li { color: #d9cdf2; }
.wont li::before { content: "✕"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #f7d7d0; color: #993c1d; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.biz .wont li::before { background: #4a2a7a; color: #f0997b; }
.plan-card .btn { margin-top: 8px; }
.biz .btn-dark { background: #ffe6d9; color: #2a1650; }
.biz .btn-dark:hover { background: #fff; color: #2a1650; }

.both { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; }
.both span { background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14px; }
.both .both-label { background: none; border: 0; color: var(--text-2); font-weight: 800; padding-left: 0; }

.same-ask { margin-top: 28px; }
.same-title { text-align: center; margin: 0 0 12px; color: var(--text-2); font-weight: 600; }
.same-title b { color: var(--text); }
.ask-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ask-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.ask-card small { font-weight: 800; color: var(--brand); }
.ask-card.biz small { color: var(--text); }
.ask-card .q { margin: 6px 0 4px; font-weight: 700; }
.ask-card .a { margin: 0; color: var(--text-2); font-size: 14.5px; }
.stores { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 28px 0 0; }
.stores p { margin: 0; text-align: center; color: var(--text-2); font-size: 14px; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Sections */
section.block { padding: 72px 0; }
/* Every band below the hero is the same height, content centered */
section.block, section.cta { min-height: 620px; display: flex; flex-direction: column; justify-content: center; }
/* Every other section sits on clay so the page has rhythm */
.alt { background: var(--bg-alt); }
.alt .app.fade { background: #c7a793 !important; }
.alt .feature, .alt .ask-card, .alt .both span { background: #fff6f1; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.section-head h2 { margin: 0 0 12px; font-size: clamp(28px, 4.5vw, 40px); letter-spacing: -1px; line-height: 1.15; font-weight: 700; }
.section-head p { margin: 0; color: var(--text-2); font-size: 17px; }

/* Always white and purple, in light and dark mode, with black text */
.statement {
  background: linear-gradient(165deg, #ffffff 50%, #e9defc 100%);
  color: #000; border-radius: 28px; padding: clamp(32px, 5vw, 56px) 24px;
  text-align: center; font-weight: 700; font-size: clamp(28px, 4.6vw, 48px); line-height: 1.15; letter-spacing: -1.2px;
}
.statement .badge-icon { display: inline-flex; width: 1.1em; height: 1.1em; vertical-align: -0.18em; margin: 0 0.08em; }
.statement .inline-chip { background: #fff; box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(42, 22, 80, 0.18); }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; margin-top: 16px; }
.feature { background: var(--bg-2); border-radius: 20px; padding: 24px; height: 100%; }
.feature .ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); margin-bottom: 16px; }
.feature .ico svg { width: 22px; height: 22px; }
.feature h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; }
.feature p { margin: 0; color: var(--text-2); }

.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split h2 { margin: 0 0 16px; font-size: clamp(28px, 4.5vw, 40px); letter-spacing: -1px; line-height: 1.15; font-weight: 700; }
.split p { margin: 0; color: var(--text-2); font-size: 17px; }

.panel { background: #16131c; border-radius: 28px; padding: 24px; max-width: 360px; justify-self: center; width: 100%; }
.panel-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; font-weight: 600; color: #fff; }
.panel-head .shield { width: 60px; height: 60px; border-radius: 16px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; }
.panel-head .shield svg { width: 30px; height: 30px; }
.rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; font-size: 14px; }
.rule small { display: block; color: var(--text-3); font-size: 12.5px; }
.toggle { position: relative; width: 46px; height: 28px; flex: none; }
.toggle input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.toggle span { position: absolute; inset: 0; border-radius: 999px; background: #e3d3cb; transition: background 0.2s; pointer-events: none; }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.toggle input:checked + span { background: var(--brand); }
.toggle input:checked + span::after { transform: translateX(18px); }
.toggle input:focus-visible + span { box-shadow: 0 0 0 3px rgba(107, 47, 208, 0.35); }

/* iPhone-style chat mockup. Screen colors come from --ph-* so it follows light/dark mode */
.phone {
  --ph-bg: #ffffff; --ph-text: #000000; --ph-sub: #3c3c43; --ph-them: #e9e9eb; --ph-head: #f7f7f9; --ph-line: #e4e4e8; --ph-card: #ffffff;
  position: relative; justify-self: center; width: 304px; max-width: calc(100% - 12px); aspect-ratio: 9 / 18.6;
  border-radius: 52px; padding: 12px;
  background: linear-gradient(145deg, #4b4b50 0%, #1f1f22 30%, #2e2e33 70%, #55555b 100%);
  box-shadow: 0 0 0 1px #0d0d0f, inset 0 0 0 3px #111113, 0 34px 70px rgba(31, 18, 53, 0.28);
}
.phone .side { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #2a2a2e, #5a5a60); }
.phone .action { left: -3px; top: 104px; height: 26px; }
.phone .vol-up { left: -3px; top: 148px; height: 48px; }
.phone .vol-down { left: -3px; top: 206px; height: 48px; }
.phone .power { right: -3px; top: 168px; height: 74px; background: linear-gradient(90deg, #5a5a60, #2a2a2e); }
.phone .screen { position: relative; height: 100%; background: var(--ph-bg); color: var(--ph-text); border-radius: 41px; overflow: hidden; display: flex; flex-direction: column; font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif; }
.phone .status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 11px 20px 2px; font-size: 14.5px; font-weight: 600; }
.phone .time { text-align: center; }
.phone .island { width: 96px; height: 28px; background: #000; border-radius: 20px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; }
.phone .cam { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3b3f73 0%, #10121f 60%); box-shadow: 0 0 0 1.5px #16161c; }
.phone .icons { display: flex; gap: 5px; align-items: center; justify-content: center; }
.phone .icons svg { height: 11px; width: auto; fill: currentColor; }
.chat-top-bar { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; padding: 4px 8px 8px; border-bottom: 1px solid var(--ph-line); background: var(--ph-head); }
.chat-top-bar .back, .chat-top-bar .facetime { color: #0a7cff; display: flex; align-items: center; gap: 4px; }
.chat-top-bar .back svg { width: 10px; height: 18px; }
.chat-top-bar .back b { background: #0a7cff; color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 7px; }
.chat-top-bar .facetime { justify-content: flex-end; padding-right: 6px; }
.chat-top-bar .facetime svg { width: 24px; height: 15px; }
.chat-top-bar .who { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.chat-top-bar .avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(180deg, #e9e3f5, #d6cbe9); display: flex; align-items: center; justify-content: center; }
.chat-top-bar .avatar img { width: 36px; height: 36px; }
.chat-top-bar .who b { font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 3px; }
.chat-top-bar .who b svg { width: 5px; height: 9px; color: var(--ph-sub); }
.thread { flex: 1; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.stamp { align-self: center; font-size: 10.5px; color: var(--ph-sub); margin-bottom: 2px; }
.stamp b { font-weight: 600; }
.ios { max-width: 78%; padding: 7px 12px; border-radius: 18px; font-size: 13.5px; line-height: 1.33; }
.ios.me { align-self: flex-end; background: #0a7cff; color: #fff; border-bottom-right-radius: 5px; }
.ios.them { align-self: flex-start; background: var(--ph-them); color: var(--ph-text); border-bottom-left-radius: 5px; }
.receipt { align-self: flex-end; font-size: 10.5px; color: var(--ph-sub); margin: -3px 4px 0 0; font-weight: 500; }
.ios-card { align-self: flex-start; display: flex; gap: 10px; align-items: center; background: var(--ph-card); border: 1px solid var(--ph-line); border-radius: 16px; padding: 8px 14px 8px 8px; font-size: 13px; }
.ios-card small { display: block; color: var(--ph-sub); font-size: 11.5px; }
.ios-card .stars { color: #e08a00; font-size: 10.5px; }
.ios-emoji { width: 38px; height: 38px; border-radius: 10px; background: #fff3ec; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.composer { display: flex; align-items: center; gap: 8px; padding: 6px 12px 26px; }
.composer .plus { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ph-them); color: var(--ph-sub); display: flex; align-items: center; justify-content: center; }
.composer .plus svg { width: 13px; height: 13px; }
.composer .field-ios { flex: 1; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--ph-line); border-radius: 18px; padding: 6px 10px 6px 12px; font-size: 13px; color: var(--ph-sub); }
.composer .field-ios svg { width: 10px; height: 14px; }
.phone .home-bar { position: absolute; left: 50%; bottom: 8px; width: 118px; height: 5px; border-radius: 3px; background: var(--ph-text); transform: translateX(-50%); }

/* Goals and ideas cards */
.flip-split > :first-child { order: 2; }
.ideas { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 0; }
.ideas-card { background: #fff; border-radius: 26px; padding: 20px; box-shadow: 0 20px 50px rgba(31, 18, 53, 0.16); color: #000; }
.ideas-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.goals { width: 230px; margin-top: 40px; margin-right: -12px; padding-right: 24px; position: relative; z-index: 1; }
.goals label { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14.5px; font-weight: 600; border-top: 1px solid #eee6e0; }
.goals input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }
.tips { width: 320px; position: relative; z-index: 2; }
.idea { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid #eee6e0; }
.idea > span { font-size: 22px; line-height: 1; }
.idea b { display: block; font-size: 14.5px; }
.idea small { display: block; color: var(--text-2); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }

/* 5x5 app wall: 9 clear icons in the middle, a blurred ring of apps around them */
.apps { display: grid; grid-template-columns: repeat(5, 64px); gap: 18px; justify-content: center; }
.app { width: 64px; height: 64px; border-radius: 22.5%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 6px 16px rgba(31, 18, 53, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.15); transition: transform 0.2s; }
.app.light { box-shadow: 0 6px 16px rgba(31, 18, 53, 0.14), inset 0 0 0 1px rgba(31, 18, 53, 0.08); }
.app.blur { filter: blur(4px); opacity: 0.55; transform: scale(0.94); box-shadow: none; }
.app:not(.blur):hover { transform: translateY(-3px) scale(1.05); }
.app svg { width: 34px; height: 34px; }
.app.fade { background: #f3e4dc !important; filter: blur(2px); }

.usecases { max-width: 760px; margin: 0 auto; }
.usecase { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--line); }
.usecase:last-child { border-bottom: 1px solid var(--line); }
.usecase .check { color: var(--teal); flex: none; width: 24px; height: 24px; margin-top: 2px; }
.usecase h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.usecase p { margin: 0; color: var(--text-2); }

.cta { text-align: center; padding: 88px 0; }
/* Ervo waving hello */
.hello-owl { animation: bob 3.6s ease-in-out infinite; }
.cta h2 { margin: 0 0 28px; font-size: clamp(30px, 5vw, 44px); letter-spacing: -1px; font-weight: 700; }
.cta .stack { display: flex; flex-direction: column; gap: 12px; max-width: 280px; margin: 0 auto; }

.site-footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--text); font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; gap: 20px; }
.site-footer a { color: var(--text); text-decoration: none; font-weight: 600; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }
.foot-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.foot-brand img { height: 22px; width: auto; }
.foot-brand .word { height: 17px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .plans, .ask-row { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .flip-split > :first-child { order: 0; }
  .ideas { flex-direction: column; align-items: center; }
  .goals { margin: 0 0 -20px; width: min(300px, 100%); }
  .tips { width: min(340px, 100%); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .apps { grid-template-columns: repeat(5, 52px); gap: 12px; }
  .app { width: 52px; height: 52px; }
  .app svg { width: 28px; height: 28px; }
  section.block { padding: 72px 0; }
  section.block, section.cta { min-height: 0; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .statement { border-radius: 20px; letter-spacing: -1px; }
  .site-header .btn { padding: 0 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Dark mode ----------
   theme.js sets data-theme="dark" or "light" on <html>: it follows the visitor's
   computer or phone setting until they pick one with the header switch. */
[data-theme="dark"] {
  --bg: #000000; --bg-alt: #0c0c0e; --bg-2: #151517; --surface: #1c1c1e; --surface-2: #2c2c2e;
  --line: rgba(255, 255, 255, 0.1); --text: #ffffff; --text-2: #e5e5ea; --text-3: #aeaeb2;
  --brand-soft: #241a3a; --link: #c4a8ff; --glow: rgba(140, 92, 255, 0.22);
  color-scheme: dark;
}
[data-theme="dark"] .site-header { background: rgba(0, 0, 0, 0.82); }
[data-theme="dark"] .alt .feature, [data-theme="dark"] .alt .ask-card, [data-theme="dark"] .alt .both span { background: var(--bg-2); }
[data-theme="dark"] .plan-tag, [data-theme="dark"] .feature .ico, [data-theme="dark"] .does li::before { color: #dcc9ff; }
[data-theme="dark"] .btn-dark { background: #fff; color: #000; }
[data-theme="dark"] .panel { border: 1px solid rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .toggle span { background: #4a4152; }
[data-theme="dark"] .app.fade { background: #151517 !important; }
[data-theme="dark"] .alt .app.fade { background: #1b1426 !important; }
[data-theme="dark"] .demo-note { color: #ffd38a; }
[data-theme="dark"] .error { color: #ff9b91; }
[data-theme="dark"] .ideas-card { background: #221a2f; color: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
[data-theme="dark"] .goals label, [data-theme="dark"] .idea { border-top-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .phone { --ph-bg: #000000; --ph-text: #ffffff; --ph-sub: #a1a1aa; --ph-them: #262629; --ph-head: #121214; --ph-line: #2c2c30; --ph-card: #1c1c1f; box-shadow: 0 0 0 1px #4a4a50, inset 0 0 0 3px #111113, 0 34px 70px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .ios-emoji { background: #2e2722; }
/* Avatars keep a white circle so the purple owl never blends into the dark.
   The padding keeps the whole owl (ears and waving wing) inside the circle. */


/* Readable labels: dark text on light tags, light text on dark ones */
[data-theme="dark"] .plan-tag { background: #dcc9ff; color: #1a1030; }
[data-theme="dark"] .biz .plan-tag { background: #ffe6d9; color: #2a1650; }
[data-theme="dark"] .ask-card small { color: #d4c2ff; }
[data-theme="dark"] .ask-card.biz small { color: #ffffff; }

/* Brighter buttons with dark text, so they pop on the dark background */
[data-theme="dark"] .btn-primary { background: #7a4be0; color: #ffffff; }
[data-theme="dark"] .btn-primary:hover { background: #6a3bd0; color: #ffffff; }
[data-theme="dark"] .seg input:checked + span { background: #7a4be0; color: #ffffff; }
[data-theme="dark"] .big-play { background: #7a4be0; color: #ffffff; }
[data-theme="dark"] .doc a.btn-primary, [data-theme="dark"] .doc a.btn-primary:hover { color: #ffffff; }

/* White input boxes with dark text, clearly different from the background */
[data-theme="dark"] .field { background: #ffffff; color: #000; border-color: #ffffff; }
[data-theme="dark"] .field::placeholder { color: #55505c; }
[data-theme="dark"] .seg { background: #ffffff; border-color: #ffffff; }
[data-theme="dark"] .seg span { color: #2e2a31; }

/* Privacy and Terms are always dark, with soft light text that's easy on the eyes */
.theme-dark {
  --bg: #000000; --bg-alt: #0c0c0e; --bg-2: #151517; --surface: #1c1c1e; --surface-2: #2c2c2e;
  --line: rgba(255, 255, 255, 0.1); --text: #ffffff; --text-2: #e5e5ea; --text-3: #aeaeb2;
  --brand-soft: #241a3a; --link: #c4a8ff; --glow: rgba(140, 92, 255, 0.22);
}
.theme-dark .site-header { background: rgba(0, 0, 0, 0.82); }

/* Light/dark switch in the header */
.head-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

/* "Pick your Ervo" cards look the same in both modes: white Personal, purple Business */
[data-theme="dark"] .plan-card:not(.biz) { background: #ffffff; color: #000000; border-color: transparent; }
[data-theme="dark"] .plan-card:not(.biz) .plan-for, [data-theme="dark"] .plan-card:not(.biz) .wont li { color: #2e2a31; }
[data-theme="dark"] .plan-card:not(.biz) .plan-tag { background: #eadcfb; color: #5a22b8; }
[data-theme="dark"] .plan-card:not(.biz) .does li::before { background: #eadcfb; color: #6b2fd0; }
[data-theme="dark"] .plan-card:not(.biz) .btn-primary { background: #7a4be0; color: #ffffff; }
[data-theme="dark"] .plan-card:not(.biz) .btn-primary:hover { background: #5a22b8; color: #ffffff; }
[data-theme="dark"] .biz .does li::before { background: #5dcaa5; color: #04342c; }
[data-theme="dark"] .biz .btn-dark { background: #ffe6d9; color: #2a1650; }
[data-theme="dark"] .biz .btn-dark:hover { background: #ffffff; color: #2a1650; }

/* Dark mode: Ervo's permissions flips to an off-white panel with dark text, so it contrasts */
[data-theme="dark"] .panel { background: #faf6f2; border-color: transparent; }
[data-theme="dark"] .panel-head { color: #000000; }
[data-theme="dark"] .panel .rule { background: #16131c; color: #ffffff; box-shadow: none; }
[data-theme="dark"] .panel .rule small { color: #ddd7e3; }
[data-theme="dark"] .panel .toggle span { background: #4a4152; }
[data-theme="dark"] .panel .toggle input:checked + span { background: #6b2fd0; }

/* White buttons with black text stay the same in dark mode */
[data-theme="dark"] .btn-ghost, [data-theme="dark"] .doc a.btn-ghost { background: #ffffff; color: #000000; box-shadow: none; }
[data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] .doc a.btn-ghost:hover { background: #ece6f2; color: #000000; }/* The header button flips with the mode: white in light mode, dark in dark mode */
[data-theme="dark"] .site-header .btn-ghost { background: var(--surface); color: #ffffff; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="dark"] .site-header .btn-ghost:hover { background: var(--surface-2); color: #ffffff; }
/* Download now box: always a dark card with a white QR tile, in light and dark mode */
.download { width: min(380px, 100%); margin: 32px auto 0; background: #1c1a21; color: #fff; border-radius: 26px; padding: 20px; text-align: center; box-shadow: 0 20px 50px rgba(31, 18, 53, 0.2); }
[data-theme="dark"] .download { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.download h3 { margin: 0 0 14px; font-size: 20px; font-weight: 800; }
.dl-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #2c2a32; border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.dl-tabs button { min-height: 40px; border: 0; border-radius: 999px; background: none; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.dl-tabs button[aria-selected="true"] { background: #4a4752; }
.dl-tabs button:focus-visible { outline: 3px solid #c9b3ff; outline-offset: 2px; }
.dl-panel .qr { width: 188px; height: 188px; margin: 0 auto 14px; background: #fff; border-radius: 22px; display: flex; align-items: center; justify-content: center; }
.dl-panel .qr img { width: 168px; height: 168px; }
.dl-panel p { margin: 0 0 14px; color: #d6d2dd; font-size: 14px; line-height: 1.5; }
.dl-panel p b { color: #fff; }
.download .dl-btn { background: #2c2a32; color: #fff; min-height: 44px; }
.download .dl-btn:hover { background: #3a3741; color: #fff; }
.dl-note { margin: 14px 0 0; font-size: 12.5px; color: #b7b1c0; }

/* Download dropdown in the header */
.dl-menu { position: relative; }
.dl-trigger .chev { width: 16px; height: 16px; transition: transform 0.2s; }
.dl-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dl-menu .download { position: absolute; right: 0; top: calc(100% + 12px); margin: 0; width: 340px; z-index: 30; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); animation: dl-in 0.18s ease both; }
@keyframes dl-in { from { transform: translateY(-6px); } to { transform: none; } }
@media (max-width: 560px) {
  .site-header .btn-ghost .lbl { display: none; }
  .site-header .dl-trigger .lbl { display: inline; }
  .site-header .btn-ghost { padding: 0 12px; }
  .dl-menu { position: static; }
  .dl-menu .download { position: fixed; left: 16px; right: 16px; top: 72px; width: auto; }
}

[data-theme="dark"] .dl-menu .download { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 24px 60px rgba(0, 0, 0, 0.5); }


/* ---------- 2026-11 refresh ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Dark mode: a soft violet glow behind the hero and the video */
[data-theme="dark"] .hero { background: radial-gradient(60% 45% at 50% 30%, var(--glow), transparent 70%); }
[data-theme="dark"] section.how { background: radial-gradient(55% 50% at 50% 55%, rgba(140, 92, 255, 0.14), transparent 70%), var(--bg-alt); }
[data-theme="dark"] .plan-card.biz { background: linear-gradient(160deg, #2c1858, #1a0f33); box-shadow: 0 0 0 1px rgba(196, 168, 255, 0.18); }

/* Look picker: tap Ervo in the headline */
.hero { position: relative; }
.look-picker { position: absolute; z-index: 20; top: 300px; left: 0; right: 0; margin: 0 auto; width: min(560px, calc(100vw - 32px)); background: var(--surface); color: var(--text); border-radius: 26px; padding: 18px; box-shadow: 0 0 0 1px var(--line), 0 30px 70px rgba(20, 10, 40, 0.3); animation: dl-in 0.18s ease both; text-align: left; }
.look-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 4px 12px; }
.look-head b { font-size: 17px; }
.look-head span { font-size: 13px; color: var(--text-2); }
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; max-height: min(52vh, 420px); overflow-y: auto; padding: 2px; }
.look { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; color: var(--text); cursor: pointer; padding: 6px 2px; border-radius: 16px; }
.look span { width: 62px; height: 62px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--line); transition: transform 0.15s; }
.look img { width: 86%; height: 86%; object-fit: contain; margin-top: 8%; }
.look small { font-size: 12px; font-weight: 600; }
.look:hover span { transform: scale(1.06); }
.look[aria-pressed="true"] span { box-shadow: 0 0 0 3px var(--brand); }
.look:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
@media (max-width: 480px) { .look-picker { top: 240px; } }

/* Sign-up: drawn like the app's own sign-in screen */
.auth.app-look { text-align: left; }
.auth.app-look .auth-title { text-align: center; }
.hint { color: var(--text-2); font-size: 13.5px; margin: 0 6px 12px; min-height: 20px; text-align: center; }
.fine { text-align: center; }
.auth .btn-primary:disabled { opacity: 0.6; cursor: progress; }
.auth .link-btn { display: block; margin: 6px auto 0; }
.auth-title strong { color: var(--text); }
.done-title { margin: 0 0 4px; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.done-who { margin: 0 0 16px; text-align: center; color: var(--text-2); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.done-who b { color: var(--text); }
.plan-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 12px; }
.plan-pill.biz { background: #2a1650; color: #fff; }
[data-theme="dark"] .plan-pill { background: #dcc9ff; color: #1a1030; }
[data-theme="dark"] .plan-pill.biz { background: #ffe6d9; color: #2a1650; }
.welcome-owl { object-fit: contain; animation: bob 3.6s ease-in-out infinite; }
.get-app { background: #1c1a21; color: #fff; border-radius: 26px; padding: 16px; text-align: center; }
.get-app .qr { width: 188px; height: 188px; margin: 0 auto 12px; background: #fff; border-radius: 22px; display: flex; align-items: center; justify-content: center; padding: 10px; }
.get-app .qr svg, .get-app .qr img { width: 168px; height: 168px; display: block; }
.get-how { margin: 0 0 12px; color: #d6d2dd; font-size: 13.5px; line-height: 1.5; }
.get-how b { color: #fff; }
[data-theme="dark"] .get-app { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }

/* Personal vs Business */
.cmp { max-width: 980px; margin: 0 auto; }
.cmp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px; max-width: 520px; margin: 0 auto 22px; }
.cmp-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 999px; background: none; color: var(--text); font-weight: 800; font-size: 15px; cursor: pointer; }
.cmp-tabs img { width: 30px; height: 30px; border-radius: 50%; background: #fff; object-fit: contain; }
.cmp-tabs button[aria-selected="true"] { background: var(--brand); color: #fff; }
#compare.is-biz .cmp-tabs button[aria-selected="true"] { background: #2a1650; }
[data-theme="dark"] #compare.is-biz .cmp-tabs button[aria-selected="true"] { background: #ffe6d9; color: #2a1650; }
.cmp-tabs button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.cmp-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.tries { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.try { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; transition: transform 0.12s, background 0.15s; }
.try span { font-size: 17px; }
.try:hover { transform: translateY(-2px); }
.try[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: transparent; }
#compare.is-biz .try[aria-pressed="true"] { background: #2a1650; }
[data-theme="dark"] #compare.is-biz .try[aria-pressed="true"] { background: #ffe6d9; color: #2a1650; }
.try:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* The example chat uses the app's own colors: blue for you, gray for Ervo */
.cmp-chat { background: #fff; color: #000; border-radius: 26px; padding: 18px; min-height: 210px; display: flex; flex-direction: column; gap: 8px; font-family: system-ui, -apple-system, Roboto, "Segoe UI", sans-serif; box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(31, 18, 53, 0.12); }
[data-theme="dark"] .cmp-chat { background: #000; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.cmp-me, .cmp-them { max-width: 82%; padding: 9px 13px; border-radius: 19px; font-size: 15px; line-height: 1.35; }
.cmp-me { align-self: flex-end; background: #0a7cff; color: #fff; border-bottom-right-radius: 6px; }
.cmp-them { align-self: flex-start; background: #e9e9eb; color: #000; border-bottom-left-radius: 6px; }
[data-theme="dark"] .cmp-them { background: #262629; color: #fff; }
.cmp-typing { align-self: flex-start; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; background: #e9e9eb; }
[data-theme="dark"] .cmp-typing { background: #262629; }
.cmp-typing img { width: 34px; height: 34px; border-radius: 50%; background: #fff; object-fit: contain; }
.cmp-typing b { display: block; font-size: 13.5px; }
.cmp-typing small { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.75; }
.cmp-typing em { font-style: normal; }
.spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(10, 124, 255, 0.25); border-top-color: #0a7cff; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.pop { animation: rise 0.25s ease both; }
.only { background: var(--bg-2); border: 1px solid var(--line); border-radius: 26px; padding: 20px 22px; }
.only h3 { margin: 0 0 10px; font-size: 17px; font-weight: 800; }
.only ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.only li { font-size: 14.5px; color: var(--text-2); }
.cmp-note { text-align: center; color: var(--text-3); font-size: 13px; margin: 16px 0 0; }
@media (max-width: 860px) { .cmp-panel { grid-template-columns: minmax(0, 1fr); } .tries { justify-content: flex-start; } }
@media (max-width: 480px) { .cmp-tabs button { font-size: 13.5px; } .cmp-tabs img { width: 24px; height: 24px; } }

/* Phone: the real app's chat screen, on iPhone or Android */
.same-phones { margin-top: 14px !important; font-weight: 600; color: var(--text) !important; }
.phone .screen { font-family: system-ui, -apple-system, Roboto, "Segoe UI", sans-serif; }
.app-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 4px 10px 8px; border-bottom: 1px solid var(--ph-line); }
.app-head .hd-btn { color: #0a7cff; display: flex; justify-content: center; }
.app-head .hd-btn svg { width: 20px; height: 20px; }
.app-head .dots { flex-direction: column; align-items: center; gap: 2.5px; }
.app-head .dots i { width: 4px; height: 4px; border-radius: 50%; background: #0a7cff; }
.app-head .who { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.app-head .avatar { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--ph-line); }
.app-head .avatar img { width: 86%; height: 86%; object-fit: contain; margin-top: 8%; }
.app-head .who b { font-size: 13px; }
.app-head .pill { font-size: 9.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ph-them); color: var(--ph-sub); }
.phone .thread { gap: 5px; padding: 8px 10px; }
.phone .m { max-width: 80%; padding: 6px 10px; border-radius: 16px; font-size: 11.5px; line-height: 1.33; }
.phone .m.me { align-self: flex-end; background: #0a7cff; color: #fff; border-bottom-right-radius: 5px; }
.phone .m.them { align-self: flex-start; background: var(--ph-them); color: var(--ph-text); border-bottom-left-radius: 5px; }
.phone .m u { color: #0a7cff; text-decoration: none; font-weight: 600; }
.typing-card { align-self: flex-start; display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--ph-them); font-size: 10.5px; }
.typing-card img { width: 24px; height: 24px; border-radius: 50%; background: #fff; object-fit: contain; }
.typing-card b { display: block; font-size: 10.5px; }
.typing-card small { display: flex; align-items: center; gap: 4px; color: var(--ph-sub); font-size: 9.5px; }
.typing-card .spin { width: 8px; height: 8px; border-width: 1.5px; }
.pcard { align-self: flex-start; width: 78%; background: var(--ph-them); border-radius: 14px; padding: 8px 10px; font-size: 11.5px; }
.pcard b { display: block; }
.pcard small { display: block; color: var(--ph-sub); font-size: 10px; margin: 2px 0 6px; }
.pbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pb { text-align: center; padding: 5px 0; border-radius: 999px; background: var(--ph-bg); color: #0a7cff; font-weight: 700; font-size: 10.5px; }
.pb.main { background: #0a7cff; color: #fff; }
.phone .chips { display: flex; gap: 5px; overflow: hidden; padding: 4px 10px; }
.phone .chips span { flex: none; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--ph-line); color: #0a7cff; font-size: 10px; font-weight: 500; }
.phone .composer { padding: 4px 10px 24px; }
.phone .composer .field-ios { background: var(--ph-bg); }
/* Android frame: punch-hole camera, flat sides, Android status icons */
.phone { transition: border-radius 0.3s ease; }
#compare [hidden] { display: none !important; }

/* 2026-11 phone mock: a friendly example chat (not a copy of the app screen) */
.phone.mock { --mk-bg: linear-gradient(180deg, #f6f2ff 0%, #ffffff 46%); --mk-them: #ffffff; --mk-line: rgba(60, 40, 110, 0.12); --mk-sub: #6b6680; --mk-me: linear-gradient(135deg, #7c4dff, #b44dff); }
:root[data-theme="dark"] .phone.mock, .theme-dark .phone.mock { --ph-text: #f3f1f8; --mk-bg: linear-gradient(180deg, #1a1328 0%, #050507 50%); --mk-them: #1c1c1e; --mk-line: rgba(255, 255, 255, 0.1); --mk-sub: #a59fb8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone.mock { --ph-text: #f3f1f8; --mk-bg: linear-gradient(180deg, #1a1328 0%, #050507 50%); --mk-them: #1c1c1e; --mk-line: rgba(255, 255, 255, 0.1); --mk-sub: #a59fb8; } }
.phone.mock .screen { background: var(--mk-bg); }
.mk-head { display: flex; align-items: center; gap: 9px; margin: 6px 10px 4px; padding: 8px 10px; border-radius: 18px; background: var(--mk-them); border: 1px solid var(--mk-line); box-shadow: 0 6px 18px rgba(60, 30, 120, 0.08); }
.mk-head > div { flex: 1; min-width: 0; line-height: 1.2; }
.mk-head b { font-size: 13px; }
.mk-head small { display: block; font-size: 10px; color: var(--mk-sub); }
.mk-av { position: relative; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #ece4ff, #ffe4f1); display: flex; align-items: center; justify-content: center; flex: none; }
.mk-av img { width: 84%; height: 84%; object-fit: contain; margin-top: 10%; }
.mk-av i { position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 2px var(--mk-them); }
.mk-tag { font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(124, 77, 255, 0.14); color: #7c4dff; }
.mk-thread { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 6px 12px; overflow: hidden; }
.mk-day { align-self: center; font-size: 9.5px; font-weight: 600; color: var(--mk-sub); padding: 2px 9px; border-radius: 999px; background: var(--mk-them); border: 1px solid var(--mk-line); }
.mk-m { max-width: 82%; padding: 7px 11px; font-size: 11.5px; line-height: 1.38; border-radius: 18px; }
.mk-m.them { align-self: flex-start; background: var(--mk-them); border: 1px solid var(--mk-line); border-top-left-radius: 6px; }
.mk-m.me { align-self: flex-end; background: var(--mk-me); color: #fff; border-top-right-radius: 6px; box-shadow: 0 6px 14px rgba(124, 77, 255, 0.25); }
.mk-plan { align-self: flex-start; width: 86%; display: flex; flex-direction: column; gap: 5px; padding: 10px 11px; border-radius: 16px; background: var(--mk-them); border: 1px solid var(--mk-line); font-size: 11px; }
.mk-plan b { font-size: 12px; margin-bottom: 1px; }
.mk-plan .ok { display: flex; gap: 6px; align-items: center; color: var(--ph-text); }
.mk-plan .ok::before { content: "✓"; flex: none; width: 15px; height: 15px; border-radius: 50%; background: #2ecc71; color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mk-btns { display: flex; gap: 6px; margin-top: 3px; }
.mk-btns span { flex: 1; text-align: center; padding: 5px 0; border-radius: 999px; font-weight: 700; font-size: 10.5px; border: 1px solid var(--mk-line); }
.mk-btns .main { background: var(--mk-me); color: #fff; border-color: transparent; }
.mk-chips { display: flex; gap: 5px; padding: 4px 12px; overflow: hidden; }
.mk-chips span { flex: none; padding: 5px 9px; border-radius: 999px; background: var(--mk-them); border: 1px solid var(--mk-line); font-size: 10px; font-weight: 600; }
.mk-composer { display: flex; align-items: center; gap: 8px; margin: 4px 10px 26px; padding: 5px 5px 5px 13px; border-radius: 999px; background: var(--mk-them); border: 1px solid var(--mk-line); font-size: 11px; color: var(--mk-sub); }
.mk-composer span { flex: 1; }
.mk-composer i { width: 26px; height: 26px; border-radius: 50%; background: var(--mk-me); color: #fff; display: flex; align-items: center; justify-content: center; }
.mk-composer svg { width: 14px; height: 14px; }
/* Messages pop in one by one when the phone scrolls into view */
.phone.mock.in .mk-m, .phone.mock.in .mk-plan { animation: mk-in 0.5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 0.55s + 0.3s); }
@keyframes mk-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .phone.mock.in .mk-m, .phone.mock.in .mk-plan { animation: none; } }

/* True Black dark mode: a soft purple glow behind boxes, the video and the phone, kept faint so it's easy on the eyes */
[data-theme="dark"] .feature, [data-theme="dark"] .plan-card, [data-theme="dark"] .panel, [data-theme="dark"] .cmp-chat, [data-theme="dark"] .only,
[data-theme="dark"] .ideas-card, [data-theme="dark"] .ask-card {
  border-color: rgba(160, 120, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(160, 120, 255, 0.1), 0 0 42px rgba(122, 75, 224, 0.13);
}
[data-theme="dark"] .stage { box-shadow: 0 0 0 1px rgba(160, 120, 255, 0.14), 0 0 70px rgba(122, 75, 224, 0.2); }
/* Video controls sit right on the page: no box behind them, just a faint purple glow on the buttons */
[data-theme="dark"] .controls { background: transparent; border: 0; box-shadow: none; }
[data-theme="dark"] .ctrl { background: transparent; box-shadow: inset 0 0 0 1px rgba(160, 120, 255, 0.28), 0 0 18px rgba(122, 75, 224, 0.28); }
[data-theme="dark"] .ctrl:hover { background: rgba(122, 75, 224, 0.12); }
[data-theme="dark"] .bar { background: rgba(255, 255, 255, 0.08); box-shadow: none; }
[data-theme="dark"] .volume input { filter: drop-shadow(0 0 6px rgba(122, 75, 224, 0.45)); }
[data-theme="dark"] .phone { box-shadow: 0 0 0 1px #0d0d0f, inset 0 0 0 3px #111113, 0 0 80px rgba(122, 75, 224, 0.22); }
[data-theme="dark"] .block.alt { background: radial-gradient(60% 50% at 50% 0%, rgba(122, 75, 224, 0.07), transparent 70%), var(--bg-alt); }
@media (prefers-reduced-transparency: reduce) { [data-theme="dark"] .feature, [data-theme="dark"] .plan-card, [data-theme="dark"] .player { box-shadow: none; } }

/* Permissions: a mock of the app's Settings screen */
.perm-mock { justify-self: center; width: 100%; max-width: 380px; padding: 16px 16px 20px; border-radius: 30px; background: #f2f2f7; color: #000; box-shadow: 0 24px 60px rgba(31, 18, 53, 0.16); }
.pm-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 14px; margin-bottom: 14px; }
.pm-back { color: #7a4be0; font-weight: 600; font-size: 13px; }
.pm-hero { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #7c4dff, #b44dff); color: #fff; font-weight: 700; box-shadow: 0 10px 26px rgba(124, 77, 255, 0.3); }
.pm-hero small { display: block; font-weight: 500; opacity: 0.85; font-size: 12px; }
.pm-shield { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; flex: none; }
.pm-shield svg { width: 22px; height: 22px; }
.pm-label { margin: 16px 6px 6px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #6e6e73; }
.pm-group { background: #fff; border-radius: 16px; overflow: hidden; }
.pm-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; font-size: 14px; font-weight: 600; }
.pm-row + .pm-row { border-top: 1px solid rgba(60, 60, 67, 0.12); }
.pm-row > div { flex: 1; min-width: 0; }
.pm-row small { display: block; font-size: 12px; font-weight: 500; color: #6e6e73; }
.pm-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--c); display: flex; align-items: center; justify-content: center; flex: none; }
.pm-ico svg { width: 18px; height: 18px; }
.perm-mock .toggle input:checked + span { background: #7a4be0; }
[data-theme="dark"] .perm-mock { background: #0c0c0e; color: #fff; border: 1px solid rgba(160, 120, 255, 0.18); box-shadow: 0 0 0 1px rgba(160, 120, 255, 0.08), 0 0 60px rgba(122, 75, 224, 0.22); }
[data-theme="dark"] .pm-group { background: #1c1c1e; }
[data-theme="dark"] .pm-row + .pm-row { border-top-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .pm-row small, [data-theme="dark"] .pm-label { color: #98989f; }
[data-theme="dark"] .pm-back { color: #b79bf0; }
[data-theme="dark"] .perm-mock .toggle span { background: #3a3a3c; }

/* Goals and Ideas cards: the same purple glow as Ervo's chat bubbles */
[data-theme="dark"] .ideas-card { border: 1px solid rgba(180, 140, 255, 0.22); box-shadow: 0 0 0 1px rgba(160, 120, 255, 0.08), 0 12px 44px rgba(124, 77, 255, 0.3); }

/* "Ready to meet Ervo?": a soft purple glow behind the owl and the buttons */
[data-theme="dark"] .cta { background: radial-gradient(42% 55% at 50% 42%, rgba(122, 75, 224, 0.2), transparent 72%), var(--bg-alt); }
[data-theme="dark"] .cta .hello-owl { filter: drop-shadow(0 0 28px rgba(140, 92, 255, 0.45)); }
[data-theme="dark"] .cta .btn-primary { box-shadow: 0 0 26px rgba(124, 77, 255, 0.45); }
[data-theme="dark"] .cta .btn-ghost { box-shadow: 0 0 22px rgba(160, 120, 255, 0.22); }
.split .perm-mock p.pm-label { margin: 16px 6px 6px; font-size: 11.5px; line-height: 1.3; font-weight: 600; color: #6e6e73; max-width: none; }
[data-theme="dark"] .split .perm-mock p.pm-label { color: #98989f; }
/* Permissions box: a brighter purple background in dark mode */
[data-theme="dark"] .perm-mock { background: linear-gradient(180deg, #2b1b4f 0%, #1d1238 100%); border-color: rgba(190, 150, 255, 0.3); box-shadow: 0 0 0 1px rgba(160, 120, 255, 0.12), 0 0 70px rgba(122, 75, 224, 0.32); }
[data-theme="dark"] .pm-group { background: rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .pm-row + .pm-row { border-top-color: rgba(255, 255, 255, 0.09); }
[data-theme="dark"] .pm-row small, [data-theme="dark"] .split .perm-mock p.pm-label { color: #c4b6e3; }
[data-theme="dark"] .perm-mock .toggle span { background: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .perm-mock .toggle input:checked + span { background: #9b6bff; }
[data-theme="dark"] .pm-hero { background: linear-gradient(135deg, #8a5cff, #c45cff); }
/* Permission rows: gray glass on the purple box */
[data-theme="dark"] .pm-group { background: linear-gradient(180deg, rgba(58, 58, 64, 0.72), rgba(36, 36, 40, 0.72)); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 18px rgba(0, 0, 0, 0.25); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
[data-theme="dark"] .pm-row small { color: #b8b8c0; }

/* Plan cards: glass texture. Light mode gets soft color blobs behind them so the glass has something to blur */
#choose .plans { position: relative; isolation: isolate; }
#choose .plans::before { content: ""; position: absolute; inset: -40px -20px; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 46% at 22% 40%, rgba(122, 75, 224, 0.22), transparent 70%), radial-gradient(34% 44% at 80% 62%, rgba(255, 159, 120, 0.2), transparent 70%); filter: blur(10px); }
.plan-card { position: relative; overflow: hidden; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.plan-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0) 55%); }
.plan-card > * { position: relative; z-index: 1; }
:root:not([data-theme="dark"]) .plan-card:not(.biz) { background: rgba(196, 196, 206, 0.78); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 44px rgba(40, 30, 70, 0.12); }
:root:not([data-theme="dark"]) .plan-card.biz { background: rgba(42, 22, 80, 0.88); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 44px rgba(42, 22, 80, 0.3); }
:root:not([data-theme="dark"]) .plan-card.biz::after { background: linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 35%, rgba(255, 255, 255, 0) 55%); }
[data-theme="dark"] .plan-card::after { background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 35%, rgba(255, 255, 255, 0) 55%); }
[data-theme="dark"] #choose .plans::before { background: radial-gradient(40% 50% at 50% 50%, rgba(122, 75, 224, 0.16), transparent 70%); }

/* Compare section in light mode: dark boxes so they stand out from the light page */
:root:not([data-theme="dark"]) .cmp-tabs { background: #1c1a22; border-color: transparent; box-shadow: 0 10px 30px rgba(31, 18, 53, 0.18); }
:root:not([data-theme="dark"]) .cmp-tabs button { color: #fff; }
:root:not([data-theme="dark"]) #compare.is-biz .cmp-tabs button[aria-selected="true"] { background: #ffe6d9; color: #2a1650; }
:root:not([data-theme="dark"]) .try { background: #1c1a22; color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(31, 18, 53, 0.14); }
:root:not([data-theme="dark"]) #compare.is-biz .try[aria-pressed="true"] { background: #ffe6d9; color: #2a1650; }
:root:not([data-theme="dark"]) .cmp-chat { background: #121116; color: #fff; box-shadow: 0 18px 44px rgba(31, 18, 53, 0.22); }
:root:not([data-theme="dark"]) .cmp-them, :root:not([data-theme="dark"]) .cmp-typing { background: #2a2830; color: #fff; }
:root:not([data-theme="dark"]) .only { background: #2a1650; border-color: transparent; color: #fff; box-shadow: 0 18px 44px rgba(42, 22, 80, 0.25); }
:root:not([data-theme="dark"]) .only li { color: #e2d8f5; }
/* Light mode chat box: white again, with a purple outline and glow so it stands out from the page */
:root:not([data-theme="dark"]) .cmp-chat { background: #ffffff; color: #000; border: 1.5px solid rgba(122, 75, 224, 0.45); box-shadow: 0 0 0 4px rgba(122, 75, 224, 0.1), 0 18px 44px rgba(91, 50, 180, 0.2); }
:root:not([data-theme="dark"]) .cmp-them, :root:not([data-theme="dark"]) .cmp-typing { background: #e9e9eb; color: #000; }
/* Feature cards in dark mode: brighter gray glass with a light sheen, so they stand out from the black page */
[data-theme="dark"] .feature, [data-theme="dark"] .alt .feature { position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(70, 66, 84, 0.62), rgba(38, 36, 46, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(160, 120, 255, 0.1), 0 0 42px rgba(122, 75, 224, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
[data-theme="dark"] .feature::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 35%, rgba(255, 255, 255, 0) 60%); }
[data-theme="dark"] .feature > * { position: relative; z-index: 1; }
/* Goals and Ideas cards in dark mode: the same gray glass as the feature cards, keeping their purple glow */
[data-theme="dark"] .ideas-card { overflow: hidden;
  background: linear-gradient(160deg, rgba(70, 66, 84, 0.66), rgba(38, 36, 46, 0.66)) !important;
  border: 1px solid rgba(190, 160, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(160, 120, 255, 0.08), 0 12px 44px rgba(124, 77, 255, 0.3);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
[data-theme="dark"] .ideas-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 35%, rgba(255, 255, 255, 0) 60%); }
[data-theme="dark"] .ideas-card > * { position: relative; z-index: 1; }
/* Permissions box in light mode: a darker gray so it stands out from the light page */
:root:not([data-theme="dark"]) .perm-mock { background: linear-gradient(180deg, #cbc8d6 0%, #bdb9ca 100%); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 4px rgba(122, 75, 224, 0.08), 0 22px 54px rgba(60, 40, 110, 0.24); }
:root:not([data-theme="dark"]) .split .perm-mock p.pm-label { color: #4a4658; }
:root:not([data-theme="dark"]) .pm-group { background: rgba(255, 255, 255, 0.82); }
:root:not([data-theme="dark"]) .perm-mock .toggle span { background: #c7c4d0; }
:root:not([data-theme="dark"]) .pm-back { color: #5a22b8; }
:root:not([data-theme="dark"]) .perm-mock .toggle input:checked + span { background: #7a4be0; }

/* Light mode Goals and Ideas cards: frosted white glass over the peach background */
:root:not([data-theme="dark"]) .ideas-card { overflow: hidden; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(122, 75, 224, 0.06), 0 22px 50px rgba(90, 50, 30, 0.2);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
:root:not([data-theme="dark"]) .ideas-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.15) 35%, rgba(255, 255, 255, 0) 60%); }
:root:not([data-theme="dark"]) .ideas-card > * { position: relative; z-index: 1; }

/* Dark mode compare section: brighter gray glass so it doesn't blend into the black page */
[data-theme="dark"] .cmp-tabs, [data-theme="dark"] .try:not([aria-pressed="true"]), [data-theme="dark"] .cmp-chat, [data-theme="dark"] .only { background: linear-gradient(160deg, rgba(70, 66, 84, 0.6), rgba(38, 36, 46, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(160, 120, 255, 0.1), 0 0 36px rgba(122, 75, 224, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
[data-theme="dark"] .cmp-chat, [data-theme="dark"] .only { position: relative; overflow: hidden; }
[data-theme="dark"] .cmp-chat::after, [data-theme="dark"] .only::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 35%, rgba(255, 255, 255, 0) 60%); }
[data-theme="dark"] .cmp-chat > *, [data-theme="dark"] .only > * { position: relative; z-index: 1; }
[data-theme="dark"] .cmp-them, [data-theme="dark"] .cmp-typing { background: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .try:not([aria-pressed="true"]):hover { background: linear-gradient(160deg, rgba(90, 84, 108, 0.7), rgba(48, 45, 58, 0.7)); }

/* Compare section, light mode: light gray glass (darker than the page) with purple highlights */
:root:not([data-theme="dark"]) .cmp-tabs, :root:not([data-theme="dark"]) .try:not([aria-pressed="true"]), :root:not([data-theme="dark"]) .only {
  background: linear-gradient(160deg, rgba(198, 194, 211, 0.86), rgba(176, 171, 192, 0.86)); color: #16141c;
  border: 1px solid rgba(122, 75, 224, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 3px rgba(122, 75, 224, 0.08), 0 10px 28px rgba(91, 50, 180, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
:root:not([data-theme="dark"]) .cmp-tabs button:not([aria-selected="true"]) { color: #16141c; }
:root:not([data-theme="dark"]) .only { position: relative; overflow: hidden; }
:root:not([data-theme="dark"]) .only::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 35%, rgba(255, 255, 255, 0) 60%); }
:root:not([data-theme="dark"]) .only > * { position: relative; z-index: 1; }
:root:not([data-theme="dark"]) .only li { color: #3a3548; }
:root:not([data-theme="dark"]) .try:not([aria-pressed="true"]):hover { border-color: rgba(122, 75, 224, 0.6); }

/* Compare section, dark mode: purple highlights on the glass */
[data-theme="dark"] .cmp-tabs, [data-theme="dark"] .try:not([aria-pressed="true"]), [data-theme="dark"] .cmp-chat, [data-theme="dark"] .only {
  border-color: rgba(170, 130, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 3px rgba(122, 75, 224, 0.1), 0 0 36px rgba(122, 75, 224, 0.24); }

/* "Both can" chips and the "refund" cards, light mode: the same darker gray glass with purple highlights */
:root:not([data-theme="dark"]) .both span:not(.both-label), :root:not([data-theme="dark"]) .ask-card {
  background: linear-gradient(160deg, rgba(198, 194, 211, 0.86), rgba(176, 171, 192, 0.86)); color: #16141c;
  border: 1px solid rgba(122, 75, 224, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 3px rgba(122, 75, 224, 0.08), 0 10px 28px rgba(91, 50, 180, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
:root:not([data-theme="dark"]) .ask-card { position: relative; overflow: hidden; }
:root:not([data-theme="dark"]) .ask-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 35%, rgba(255, 255, 255, 0) 60%); }
:root:not([data-theme="dark"]) .ask-card > * { position: relative; z-index: 1; }
:root:not([data-theme="dark"]) .ask-card .a { color: #3a3548; }
:root:not([data-theme="dark"]) .ask-card small { color: #5a22b8; }
:root:not([data-theme="dark"]) .ask-card.biz small { color: #16141c; }

/* Dark mode: gray glass with purple highlights on the "Both can" chips and "refund" cards */
[data-theme="dark"] .both span:not(.both-label), [data-theme="dark"] .ask-card, [data-theme="dark"] .alt .ask-card, [data-theme="dark"] .alt .both span:not(.both-label) {
  background: linear-gradient(160deg, rgba(70, 66, 84, 0.6), rgba(38, 36, 46, 0.6));
  border: 1px solid rgba(170, 130, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 3px rgba(122, 75, 224, 0.1), 0 0 30px rgba(122, 75, 224, 0.2);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
[data-theme="dark"] .ask-card { position: relative; overflow: hidden; }
[data-theme="dark"] .ask-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 35%, rgba(255, 255, 255, 0) 60%); }
[data-theme="dark"] .ask-card > * { position: relative; z-index: 1; }

/* Dark mode plan cards: Personal is a softer frosted light gray instead of bright white; both get a purple edge */
[data-theme="dark"] .plan-card:not(.biz) { background: linear-gradient(160deg, rgba(214, 211, 224, 0.94), rgba(188, 184, 200, 0.94)); border: 1px solid rgba(190, 160, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 3px rgba(122, 75, 224, 0.12), 0 0 46px rgba(122, 75, 224, 0.22); }
[data-theme="dark"] .plan-card:not(.biz)::after { background: linear-gradient(155deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.06) 32%, rgba(255, 255, 255, 0) 55%); }
[data-theme="dark"] .plan-card.biz { background: linear-gradient(160deg, rgba(64, 38, 120, 0.82), rgba(30, 18, 58, 0.86)); border: 1px solid rgba(190, 160, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 3px rgba(122, 75, 224, 0.12), 0 0 46px rgba(122, 75, 224, 0.26); }
[data-theme="dark"] .plan-card:not(.biz) .plan-tag { background: rgba(122, 75, 224, 0.18); }
/* "Ervo for Business" label on the refund card: the Business peach color, so it differs from Personal's purple */
[data-theme="dark"] .ask-card.biz small { color: #ffb38f; }
:root:not([data-theme="dark"]) .ask-card.biz small { color: #b4532a; }

/* Mock result cards in the comparison chat */
.cmp-card { align-self: stretch; max-width: 92%; margin-top: 2px; }
.cmp-card[hidden] { display: none !important; }
.cmp-card.pop { animation: mc-in 0.45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mc-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.cmp-card { --mc-bg: #f4f3f7; --mc-line: rgba(60, 50, 90, 0.12); --mc-sub: #6b6680; --mc-btn: #ffffff; }
[data-theme="dark"] .cmp-card { --mc-bg: rgba(255, 255, 255, 0.07); --mc-line: rgba(255, 255, 255, 0.12); --mc-sub: #a8a3b8; --mc-btn: rgba(255, 255, 255, 0.1); }
.mc { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--mc-bg); border: 1px solid var(--mc-line); font-size: 14px; }
.mc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-main b { font-size: 15px; }
.mc-sub { font-size: 12px; color: var(--mc-sub); }
.mc-pic, .mc-photo, .mc-avatar { flex: none; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(145deg, var(--g1), var(--g2)); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.mc-pic.round, .mc-avatar { border-radius: 50%; }
.mc-pic img, .mc-photo img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2)); }
.mc-avatar { font-weight: 800; font-size: 22px; color: #fff; }
.mc-big { font-size: 26px !important; letter-spacing: -0.5px; }
.mc-big small { font-size: 13px; }
.mc-actions { display: flex; gap: 8px; margin-top: 8px; }
.mc-actions.tight { margin-top: 6px; gap: 5px; }
.mc-btn { flex: 1; min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--mc-line); background: var(--mc-btn); color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease; }
.mc-actions.tight .mc-btn { min-height: 32px; font-size: 11.5px; padding: 0 6px; }
.mc-btn:active { transform: scale(0.96); }
.mc-btn.main { background: #7a4be0; border-color: transparent; color: #fff; }
.mc-btn.danger { color: #e5484d; }
.mc-btn.done { background: #22a06b; border-color: transparent; color: #fff; }
.mc-btn:focus-visible, .mc-switch:focus-visible, .mc-gift:focus-visible { outline: 3px solid #7a4be0; outline-offset: 2px; }
.mc-switch { flex: none; width: 46px; height: 28px; border-radius: 999px; border: 0; background: rgba(120, 120, 128, 0.32); position: relative; cursor: pointer; transition: background 0.2s ease; }
.mc-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; }
.mc-switch.on { background: #7a4be0; }
.mc-switch.on::after { transform: translateX(18px); }
.mc-bar { align-self: stretch; width: 5px; border-radius: 3px; background: #0a84ff; flex: none; }
.mc-bar.pink { background: #ec4899; }
.mc-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; text-align: center; font-size: 11px; color: var(--mc-sub); }
.mc-week span { padding: 6px 0; border-radius: 10px; background: var(--mc-bg); }
.mc-week i { display: block; font-style: normal; font-weight: 700; font-size: 13px; color: inherit; }
.mc-week span.on { background: #0a84ff; color: #fff; }
.mc-shop, .mc-gifts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mc-item, .mc-gift { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 16px; background: var(--mc-bg); border: 1px solid var(--mc-line); font-size: 12px; text-align: left; color: inherit; font-family: inherit; }
.mc-item b, .mc-gift b { font-size: 12.5px; line-height: 1.2; }
.mc-item > span, .mc-gift > span:last-child { color: var(--mc-sub); }
.mc-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 12px; margin-bottom: 4px; }
.mc-photo img { width: 58%; height: 58%; }
.mc-gift { cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease; }
.mc-gift.on { border-color: #7a4be0; box-shadow: 0 0 0 2px rgba(122, 75, 224, 0.35); }
.mc-gift.on b::after { content: " ✓"; color: #7a4be0; }
.mc-gifts + .mc { margin-top: 8px; }
.mc-note { margin: 8px 2px 0; font-size: 12px; color: var(--mc-sub); }
.mc-link { font-size: 12px; color: #0a84ff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-receipt, .mc-bills, .mc-ticket { flex-direction: column; align-items: stretch; gap: 8px; }
.mc-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.mc-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-row.head b { font-size: 15px; }
.mc-row.struck span, .mc-row.struck b { text-decoration: line-through; color: var(--mc-sub); }
.mc-row.total { border-top: 1px dashed var(--mc-line); padding-top: 8px; }
.mc-pill { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.mc-pill.ok { background: rgba(34, 160, 107, 0.16); color: #1a8a5c; }
.mc-pill.warn { background: rgba(245, 158, 11, 0.18); color: #b45309; }
[data-theme="dark"] .mc-pill.ok { color: #4ade80; }
[data-theme="dark"] .mc-pill.warn { color: #fbbf24; }
.mc-track { height: 6px; border-radius: 3px; background: var(--mc-line); overflow: hidden; }
.mc-track i { display: block; height: 100%; width: 35%; background: linear-gradient(90deg, #22a06b, #4ade80); border-radius: inherit; animation: mc-track 1.4s ease-out both; }
@keyframes mc-track { from { width: 0; } }
.mc-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.5px; font-size: 14px !important; }
.mc-checks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.mc-checks li::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 7px; border-radius: 50%; background: #22a06b; color: #fff; font-size: 10px; font-weight: 800; }
.mc-main .mc-checks { margin-top: 6px; }
.mc-main .mc-pill { align-self: flex-start; }
.mc-amt { font-weight: 800; white-space: nowrap; }
.mc-doc { align-items: stretch; }
.mc-page { flex: none; width: 96px; border-radius: 12px; padding: 8px; background: linear-gradient(160deg, #ffffff, #ece9f3); border: 1px solid var(--mc-line); display: flex; flex-direction: column; gap: 5px; }
.mc-page .mc-url { font-size: 8.5px; color: #6b6680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-page i { height: 5px; border-radius: 3px; background: #d6d1e2; }
.mc-page i.short { width: 60%; }
.mc-who { display: flex; align-items: center; gap: 10px; }
.mc-who .mc-pic { width: 40px; height: 40px; }
.mc-who > div { display: flex; flex-direction: column; }
.mc-summary { margin: 0; font-size: 13px; line-height: 1.4; padding: 9px 11px; border-radius: 12px; background: var(--mc-btn); border: 1px solid var(--mc-line); }
.mc-event.slim { padding: 10px 12px; }
@media (max-width: 480px) { .mc-shop, .mc-gifts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .mc-item, .mc-gift { padding: 6px; } .cmp-card { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cmp-card.pop, .mc-track i { animation: none; } }
.mc-actions.tight { flex-direction: column; }
.mc-actions.tight .mc-btn { flex: none; width: 100%; min-height: 30px; white-space: nowrap; }
.mc-btn { white-space: nowrap; }