@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ============================================================
   chat.css — IncogChat random chat
   - Light/dark via CSS vars (theme switch is instant)
   - Top bar carries brand (left) + online count + theme toggle (right)
   - Bottom bar is slim (mode pill) only on the chat page
   - Video tiles have a FIXED aspect ratio + max size — they DO NOT
     stretch to the user's webcam resolution
   - Mobile-first responsive
   ============================================================ */

:root {
  --bg:        #f4f5f8;
  --panel:     #ffffff;
  --panel-2:   #f7f8fb;
  --text:      #0e1116;
  --text-2:    #4b5563;
  --muted:     #6b7280;
  --border:    #e5e7eb;
  --primary:   #228891;
  --primary-2: #006c74;
  --primary-fg:#ffffff;
  --accent:      #ff5470;
  --surface-alt: #e8f5f6;
  --danger:    #c0392b;
  --success:   #4CAF50;
  --tile-bg:   #d9dde3;
  --shadow:    0 6px 22px rgba(15,23,42,.08);
  --radius:    14px;
  --topbar-h:  60px;
}
:root[data-theme="dark"] {
  --bg:        #0e1116;
  --panel:     #161b22;
  --panel-2:   #1d242d;
  --text:      #e6e9ef;
  --text-2:    #c9d1d9;
  --muted:     #8b95a3;
  --border:    #232a33;
  --primary:   #4ab3bd;
  --primary-2: #228891;
  --primary-fg:#0e1116;
  --tile-bg:   #1d242d;
  --surface-alt: #0e2226;
  --shadow:    0 6px 22px rgba(0,0,0,.45);
}

/* ==================== 18+ AGE GATE MODAL ==================== */
.age-gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  backdrop-filter: blur(3px);
  animation: ageGateFadeIn 0.35s ease;
}
.age-gate-overlay[hidden] {
  display: none;
}
@keyframes ageGateFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.age-gate-modal {
  background: var(--panel);
  border-radius: 18px;
  padding: 48px 40px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
  text-align: center;
  animation: ageGateSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ageGateSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.age-gate-icon {
  font-size: 56px;
  margin-bottom: 20px;
  display: block;
  line-height: 1;
}
.age-gate-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.age-gate-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0 0 32px;
  font-weight: 500;
}
.age-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.age-gate-btn {
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.3px;
}
.age-gate-btn-confirm {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--primary-fg);
  box-shadow: 0 8px 24px rgba(34, 136, 145, 0.25);
  order: 1;
}
.age-gate-btn-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(34, 136, 145, 0.35);
}
.age-gate-btn-confirm:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(34, 136, 145, 0.2);
}
.age-gate-btn-cancel {
  background: var(--panel-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  order: 2;
}
.age-gate-btn-cancel:hover {
  background: var(--border);
  color: var(--text);
  border-color: var(--text-2);
}
.age-gate-btn-cancel:active {
  background: var(--panel-2);
}

/* Mobile responsive */
@media (max-width: 640px) {
  .age-gate-modal {
    max-width: 85vw;
    padding: 40px 28px;
    border-radius: 16px;
  }
  .age-gate-title {
    font-size: 28px;
  }
  .age-gate-text {
    font-size: 15px;
    margin-bottom: 28px;
  }
  .age-gate-icon {
    font-size: 48px;
    margin-bottom: 16px;
  }
  .age-gate-btn {
    padding: 13px 20px;
    font-size: 15px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "Nunito", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100dvh;
}
a { color: var(--primary-2); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ==================== TOP BAR ==================== */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 8px 18px; min-height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky; top: 0; z-index: 50;
}
.topbar-center {
  display: flex; justify-content: center;
}
.brand, .brand:hover, .brand:focus, .brand:active {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 22px; color: var(--text);
  letter-spacing: -0.01em;
  text-decoration: none !important;
}
.brand .brand-text, .brand:hover .brand-text {
  display: inline-block;
  text-decoration: none !important;
}
.brand img { width: 36px; height: 36px; border-radius: 10px; }
/* Dark mode (default): white logo */
.brand img { content: url('/images/incogchat_white.webp'); }
/* Light mode: black logo */
:root[data-theme="light"] .brand img { content: url('/images/incogchat.webp'); }
.topbar-right {
  display: flex; align-items: center; gap: 14px;
  justify-self: end;
}
.online {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--primary);
  font-size: 14px; white-space: nowrap;
}
.online .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(76,175,80,.18);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(76,175,80,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(76,175,80,0);   }
  100% { box-shadow: 0 0 0 0   rgba(76,175,80,0);   }
}

/* Theme toggle (circular icon button — sun/moon SVG) */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--panel-2); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); flex-shrink: 0;
  transition: background .2s, border-color .2s, transform .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle:active { transform: scale(.88); }
.theme-toggle-spinning { transform: rotate(180deg) scale(0.8) !important; }

/* ── Hamburger menu ──────────────────────────────────────────────────────── */
.ham-wrap { position: relative; flex-shrink: 0; }
.ham-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--panel-2); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text);
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ham-btn:hover { background: var(--border); }
.ham-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  min-width: 210px;
  z-index: 200;
  overflow: hidden;
  transform-origin: top right;
  animation: hamIn .15s ease;
}
@keyframes hamIn {
  from { opacity: 0; transform: scale(.94) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.ham-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: background .1s;
}
.ham-item:hover { background: var(--panel-2); text-decoration: none; }
.ham-sep { height: 1px; background: var(--border); margin: 2px 0; }
.ham-store {
  display: flex; align-items: center; gap: 10px;
  margin: 6px;
  border-radius: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--primary-fg) !important;
  text-decoration: none;
  transition: opacity .15s;
}
.ham-store:hover { opacity: .88; text-decoration: none; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.ham-store strong { display: block; font-size: 13px; font-weight: 800; }
.ham-store span   { display: block; font-size: 11px; opacity: .82; margin-top: 1px; }

/* Hamburger social — small icon-only row at the bottom of the menu.
   Instagram + WhatsApp links rendered as compact icon buttons. */
.ham-social {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px 10px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
.ham-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  color: var(--text-2);
  background: var(--panel-2);
  text-decoration: none;
  transition: background .15s, color .15s, transform .1s;
  font-size: 0;            /* hides the trailing text label */
}
.ham-social-btn:hover { background: var(--panel); text-decoration: none; }
.ham-social-btn svg { width: 14px; height: 14px; display: block; }
.ham-social-btn.ig:hover { color: #e1306c; }
.ham-social-btn.wa:hover { color: #25d366; }

/* Hamburger extras used by the landing menu (theme row + language label).
   `.ham-item` is also used as a <button> here, so reset native button chrome. */
button.ham-item {
  background: none; border: 0; width: 100%;
  text-align: left; cursor: pointer; font: inherit;
}
.ham-ico { display: inline-flex; width: 15px; height: 15px; flex-shrink: 0; }
.ham-ico svg { width: 15px; height: 15px; display: block; }
.ham-label {
  padding: 8px 16px 4px; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

/* ── Landing topbar: desktop keeps online + language + theme inline;
   the hamburger is mobile-only. Scoped to .topbar-landing so the
   text/video page topbars are untouched. ─────────────────────────────── */
.topbar-landing .ham-wrap { display: none; }
.topbar-landing .ham-menu { max-height: calc(100dvh - 64px); overflow-y: auto; }
@media (max-width: 640px) {
  .topbar-landing .online,
  .topbar-landing .lang-picker,
  .topbar-landing .theme-toggle { display: none; }
  .topbar-landing .ham-wrap { display: block; }
}

/* ── App Feature Hint — contextual, non-ad pattern ────────────────────────
   Looks like a product feature note, NOT an advertisement.
   No stats grid. No marketing copy. No prominent banner.
   Single-row: icon · feature name · "App only" tag · sub · CTA button.
   .cp-compact = tighter padding while chatting (just hides subtitle line).
   ─────────────────────────────────────────────────────────────────────── */
.chat-promo {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  /* very subtle primary tint — matches the product palette, not an ad insert */
  background: color-mix(in srgb, var(--primary) 7%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
  padding: 10px 14px 10px 12px;
  margin-bottom: 2px;
  transition: padding .18s;
}
.chat-promo.cp-hidden { display: none; }

/* ── App icon ── */
.cp-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ── Text block ── */
.cp-body { flex: 1; min-width: 0; }
.cp-title {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.2;
}
.cp-tag {
  /* "App only" badge — small product label, not a marketing badge */
  background: var(--primary); color: var(--primary-fg);
  font-size: 9px; font-weight: 800; letter-spacing: .05em;
  padding: 1px 5px; border-radius: 4px;
  text-transform: uppercase; flex-shrink: 0;
}
.cp-sub {
  display: block; font-size: 11px;
  color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Inline CTA — small pill, no "GET IT ON" theatrics ── */
.cp-get {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--primary); color: var(--primary-fg);
  font-size: 11px; font-weight: 800; letter-spacing: .01em;
  padding: 6px 11px; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(34,136,145,.28);
  transition: background .12s, transform .1s, box-shadow .1s;
  margin-right: 26px; /* leave space for ×  */
}
.cp-get:hover {
  background: var(--primary-2); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34,136,145,.38);
  text-decoration: none; color: var(--primary-fg);
}
.cp-get svg { flex-shrink: 0; }

/* ── Close button ── */
.cp-close {
  position: absolute; top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  background: transparent; border: none;
  color: var(--muted); font-size: 14px; line-height: 1;
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
  padding: 0;
}
.cp-close:hover { background: var(--border); color: var(--text); }

/* ── Compact (while chatting) — just hide subtitle ── */
.chat-promo.cp-compact { padding: 6px 14px 6px 12px; }
.chat-promo.cp-compact .cp-sub { display: none; }
.chat-promo.cp-compact .cp-icon { width: 24px; height: 24px; border-radius: 6px; }
.chat-promo.cp-compact .cp-title { font-size: 11.5px; }
.chat-promo.cp-compact .cp-get { font-size: 10px; padding: 4px 9px; }

/* ── Gender icon pills — ♀ pink / ♂ blue circles before "Filter by gender" ── */
.cp-genders {
  display: inline-flex; gap: 3px; align-items: center;
  margin-right: 3px; vertical-align: middle; flex-shrink: 0;
}
.cp-gf, .cp-gm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 900; line-height: 1;
}
.cp-gf { background: #f48fb1; color: #fff; }
.cp-gm { background: #81d4fa; color: #01579b; }
.chat-promo.cp-compact .cp-gf,
.chat-promo.cp-compact .cp-gm { width: 15px; height: 15px; font-size: 9px; }

/* ==================== LANDING (index.html) ==================== */
.hero {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 56px 18px 40px;
  background:
    radial-gradient(ellipse at top, rgba(34,136,145,.18), transparent 60%),
    var(--bg);
}
.hero h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  margin: 0 0 14px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); max-width: 800px;
}
.hero h1 .accent { color: var(--primary); }
.hero p.lead {
  font-size: clamp(15px, 2vw, 18px); color: var(--text-2);
  max-width: 620px; margin: 0 auto 26px; line-height: 1.55;
  text-align: center;
}
.hero .cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: var(--primary-fg);
  border: none; cursor: pointer;
  font-size: 18px; font-weight: 800;
  padding: 16px 36px; border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(34,136,145,.45);
  transition: transform .1s, box-shadow .15s;
}
.hero .cta:hover { transform: translateY(-2px); text-decoration: none; }
.hero .cta small { font-size: 12px; opacity: .85; font-weight: 600; }
.hero .cta .ico-svg { display: inline-block; vertical-align: middle; }
.hero .cta-alt {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(15,23,42,.10);
}
.hero .cta-row {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.hero .age-line {
  margin-top: 18px; color: var(--muted); font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
}
.hero .age-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #c0392b; color: #fff; font-size: 11px; font-weight: 800;
}

.hero-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; max-width: 720px; width: 100%; margin: 36px auto 0;
}
.hero-grid .card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; text-align: left;
  box-shadow: var(--shadow);
}
.hero-grid .card .ico { font-size: 22px; margin-bottom: 6px; }
.hero-grid .card h3 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
.hero-grid .card p  { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.4; }
@media (max-width: 640px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ==================== APP STAGE (random/index.html) ==================== */
/* Two-column stage: video column on the left, chat on the right.
   Video column contains two PORTRAIT (9:16) tiles side-by-side at the top
   (peer left, self right) and an action-row below with Start/Stop + gender
   filter pills. Each tile is sized so both tiles plus the action row
   exactly fit the stage height (no scroll, no wasted space). */
.app {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px;
  max-width: 1480px; width: 100%; margin: 0 auto;
  --stage-h:    calc(100dvh - var(--topbar-h) - 30px);
  --action-h:   90px;                                      /* height of action row below tiles */
  --tile-h:     calc(var(--stage-h) - var(--action-h) - 12px); /* tiles fill remaining height */
  --tile-w:     var(--tile-h);                             /* SQUARE 1:1 tile (was 9:16 portrait) */
  min-height: var(--stage-h);
}
@media (min-width: 980px) {
  /* Wider video column (square tiles), thinner chat column. */
  .app {
    grid-template-columns: 3fr 1fr;
    align-items: stretch;
  }
  body[data-mode="text"] .app,
  .app:has(.video-col[style*="display: none"]) {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
  }
}
@media (min-width: 1280px) {
  body[data-mode="text"] .app,
  .app:has(.video-col[style*="display: none"]) {
    grid-template-columns: minmax(0, 860px);
  }
}

/* ---- Video column ---- vertical: tiles row on top, action row below. */
.video-col {
  position: relative;
  height: var(--stage-h);
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
}
.video-col .tiles-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-height: 0;
  align-items: stretch;
}
@media (min-width: 980px) {
  .video-col .tile.partner,
  .video-col .tile.self {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;             /* SQUARE tiles (was 9:16 portrait) */
    max-height: var(--tile-h);
    justify-self: center;
  }
}

/* ---- Action row (Start/Stop + filter pills) below the tiles ---- */
.action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--action-h);
  padding: 0 4px;
  flex-wrap: wrap;
}
.action-row .start-btn {
  flex: 1;
  height: 72px;
  padding: 0 20px;
  font-size: 17px;
  min-width: 0;
  justify-content: center;
}
.action-row .filter-row {
  display: flex;
  gap: 8px;
  padding: 0;
  flex: 1;
  flex-wrap: nowrap;
}
.action-row .filter-pill {
  height: 72px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.tile {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--tile-bg);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  min-height: 0; min-width: 0;
}
/* Mobile (<980px): umingle-style — big partner tile with a small self PiP
   overlay in the TOP-RIGHT corner, then chat below.
   Scoped to body:not(.m-on) so these rules cannot bleed into the mobile
   stage — the mobile UI owns <=979px when body.m-on is set. */
@media (max-width: 979px) {
  body:not(.m-on) .video-col {
    display: block;
    height: auto;
    gap: 0;
  }
  body:not(.m-on) .video-col .tile.partner {
    position: relative;
    aspect-ratio: 4 / 3;
    height: auto;
    width: 100%;
  }
  body:not(.m-on) .video-col .tile.self {
    position: absolute;
    top: 10px; right: 10px;
    left: auto; bottom: auto;
    width: clamp(80px, 22vw, 110px);
    height: auto;
    aspect-ratio: 3 / 4;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.45);
    z-index: 4;
  }
  body:not(.m-on) .video-col .tile.self .tile-tag,
  body:not(.m-on) .video-col .tile.self .tile-status,
  body:not(.m-on) .video-col .tile.self .tile-volume,
  body:not(.m-on) .video-col .tile.self .tile-flag,
  body:not(.m-on) .video-col .tile.self .tile-brand,
  body:not(.m-on) .video-col .tile.self .tile-controls,
  body:not(.m-on) .video-col .tile.self .device-menu { display: none !important; }
}
.video-col[data-vlayout="pip"] { display: block; }
.video-col[data-vlayout="pip"] .tile.self {
  position: absolute;
  right: 14px; bottom: 14px;
  width: clamp(120px, 22%, 220px);
  height: auto;
  aspect-ratio: 4 / 3;
  z-index: 4;
  border: 2px solid var(--panel);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  border-radius: 12px;
}
.tile video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* Tile is sized to stream aspect (—partner-ar), so cover fills with no crop. */
  background: #000;
}
.tile.self video { transform: scaleX(-1); }
.tile.self.no-mirror video { transform: none; }
/* Stranger video mirrored for natural selfie feel. */
.tile.partner video { transform: scaleX(-1); }
.tile.partner.no-mirror video { transform: none; }

/* ── Face-gate: partner video is hidden until first face is detected ──────── */
/* Phase 1 — PENDING: video in DOM, playing, but invisible. */
.tile.partner video.pending-reveal {
  opacity: 0;
}
/* Phase 2 — REVEALED: smooth fade-in once face confirmed. */
.tile.partner video.face-revealed {
  opacity: 1;
  transition: opacity 0.6s ease;
}
/* Mobile: adopt() in mobile/chat.js moves the video from #tilePartner to
   #mPartner — mirror the same pending/reveal transitions there. */
#mPartner video.pending-reveal {
  opacity: 0;
}
#mPartner video.face-revealed {
  opacity: 1;
  transition: opacity 0.6s ease;
}
/* Phase 3 — POST-REVEAL blur overlay (face disappeared after first reveal). */
.face-blur-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #fff;
  font-size: 14px; font-weight: 600;
  text-align: center;
  z-index: 5;
  pointer-events: auto;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.face-blur-overlay.visible { opacity: 1; }
.face-blur-overlay .fbo-icon { font-size: 28px; line-height: 1; }
.face-blur-overlay .fbo-msg  { font-size: 13px; opacity: 0.9; padding: 0 16px; }
.face-blur-overlay .fbo-bypass-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 7px 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.18s, border-color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.face-blur-overlay .fbo-bypass-label:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.55); }
/* Custom checkbox — hide native, draw pill-style square */
.face-blur-overlay .fbo-bypass-chk {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.6);
  background: transparent;
  flex: 0 0 auto;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.face-blur-overlay .fbo-bypass-chk:checked {
  background: #228891;
  border-color: #228891;
}
.face-blur-overlay .fbo-bypass-chk:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 5px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.face-blur-overlay .fbo-bypass-note {
  opacity: 0.6;
  font-size: 10px;
  font-weight: 400;
  white-space: nowrap;
}

.tile .tile-tag {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(0,0,0,.55); color: #fff;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  pointer-events: none; z-index: 2;
}
/* Omegle-style watermark on the partner tile: "IncogChat" big + ".club" small,
   bottom-left, white text with a black stroke outline (like the screenshot). */
.tile .tile-brand {
  position: absolute; left: 18px; bottom: 16px;
  color: #fff;
  font-size: 0; /* hide the literal text node, glyphs come via ::before / ::after */
  pointer-events: none; z-index: 2;
  line-height: 1;
}
.tile .tile-brand::before {
  content: "IncogChat";
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.5);
  font-family: inherit;
}
.tile .tile-brand::after {
  content: ".xyz";
  font-size: 18px; font-weight: 500;
  margin-left: 1px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
@media (max-width: 640px) {
  .tile .tile-brand { left: 12px; bottom: 12px; }
  .tile .tile-brand::before,
  .tile .tile-brand::after { font-size: 14px; }
}
/* Report flag: bottom-right, big plain grey flag, no pill background */
.tile .tile-flag {
  position: absolute; right: 14px; bottom: 12px;
  width: 52px; height: 52px;
  background: transparent; border: none; cursor: pointer; z-index: 6;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(220,220,220,.85);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  transition: color .15s, transform .1s;
  padding: 0;
}
.tile .tile-flag:hover { color: #fff; transform: scale(1.08); }
.tile .tile-flag svg { display: block; width: 30px; height: 30px; }
@media (max-width: 640px) {
  .tile .tile-flag { width: 44px; height: 44px; right: 10px; bottom: 10px; }
  .tile .tile-flag svg { width: 26px; height: 26px; }
}
/* NSFW toggle: top-right corner of partner tile, sits opposite the report flag. */
.tile .tile-nsfw {
  position: absolute; right: 14px; top: 12px; left: auto; bottom: auto;
  width: auto; height: 36px; padding: 0 12px 0 8px;
  background: rgba(0,0,0,.55); color: rgba(220,220,220,.9);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.tile .tile-nsfw .nsfw-label { line-height: 1; }
.tile .tile-nsfw svg { width: 18px; height: 18px; }
.tile .tile-nsfw:hover { color: #fff; transform: scale(1.04); }
.tile .tile-nsfw.on {
  background: linear-gradient(135deg, #ff4d6d, #c9184a);
  color: #fff; border-color: rgba(255,255,255,.5);
}
@media (max-width: 640px) {
  .tile .tile-nsfw { right: 10px; top: 10px; height: 32px; padding: 0 10px 0 6px; }
  .tile .tile-nsfw svg { width: 16px; height: 16px; }
}
/* Report modal — last-5 peer screenshot picker */
#reportModal .report-peer-section { margin: 4px 0 10px; }
#reportModal .report-peer-hint { margin: 0 0 6px; font-size: 12px; color: rgba(0,0,0,.6); }
#reportModal .report-peer-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
#reportModal .report-peer-tile {
  position: relative; padding: 0; border: 2px solid transparent;
  border-radius: 8px; overflow: hidden; cursor: pointer;
  background: #111; aspect-ratio: 1 / 1; min-width: 0;
}
#reportModal .report-peer-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: blur(2px);
}
#reportModal .report-peer-tile .report-peer-noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); background: #222; font-size: 20px;
}
#reportModal .report-peer-tile.selected {
  border-color: #ff4d6d; box-shadow: 0 0 0 2px rgba(255,77,109,.35);
}
#reportModal .report-peer-flag {
  position: absolute; top: 4px; left: 4px;
  font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 4px;
  background: rgba(0,0,0,.65); color: #fff;
}
#reportModal .report-peer-when {
  position: absolute; bottom: 4px; right: 4px;
  font-size: 10px; padding: 2px 5px; border-radius: 4px;
  background: rgba(0,0,0,.65); color: #fff;
}
#reportModal .report-peer-loading { grid-column: 1 / -1; padding: 12px; color: rgba(0,0,0,.5); font-size: 12px; }
@media (max-width: 480px) {
  #reportModal .report-peer-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }
}
/* Volume slider on the partner tile (top centre, on hover) */
.tile .tile-volume {
  position: absolute; left: 50%; top: 12px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.55); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; z-index: 6;
  opacity: 0; transition: opacity .18s;
  pointer-events: none;
}
.tile:hover .tile-volume,
.tile:focus-within .tile-volume,
.tile .tile-volume:hover { opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .tile .tile-volume { opacity: 1; pointer-events: auto; }
}
.tile .tile-volume input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 110px; height: 4px; background: rgba(255,255,255,.35);
  border-radius: 999px; outline: none; cursor: pointer; margin: 0;
}
.tile .tile-volume input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff;
}
.tile .tile-volume input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff;
}
.tile.placeholder { color: var(--muted); font-size: 14px; }
/* Brand stays visible on placeholder; only flag + volume slider hide. */
.tile.placeholder .tile-flag,
.tile.placeholder .tile-volume { display: none; }
/* Force [hidden] to win over inline-flex on input-row buttons. */
.input-row [hidden] { display: none !important; }
/* Hide tile-status overlay once a real partner video is attached */
.tile:not(.placeholder) .tile-status { display: none; }
.tile .tile-status {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; pointer-events: none;
  color: var(--muted); font-size: 14px; text-align: center; padding: 12px;
}
/* Play Store CTA shown in the idle partner tile, below the status text */
.tile-status-cta {
  pointer-events: auto;
}
/* Hide Play Store badge when searching/connecting (spinner is shown) */
.tile-spinner:not([hidden]) ~ .tile-status-cta { display: none; }

/* Google Play badge — shared by tile CTA and gender panel */
.gplay-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #000; color: #fff !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; padding: 8px 16px;
  text-decoration: none !important;
  transition: opacity .15s;
  cursor: pointer;
}
.gplay-badge:hover { opacity: .82; }
.gplay-ic { flex-shrink: 0; display: block; }
.gplay-text { display: flex; flex-direction: column; gap: 0; }
.gplay-getit { font-size: 10px; font-weight: 400; letter-spacing: .06em; line-height: 1.2; color: #fff; }
.gplay-store { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; color: #fff; }
.tile-spinner {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(74, 179, 189, 0.15);
  box-shadow: inset 0 0 24px rgba(74, 179, 189, 0.05);
}

.tile-spinner::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--primary), 0 0 24px var(--primary);
  z-index: 2;
}

.tile-spinner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(74, 179, 189, 0.35) 0deg, rgba(74, 179, 189, 0) 180deg);
  animation: radarScan 2s linear infinite;
  z-index: 1;
}

.radar-ripple-1, .radar-ripple-2, .radar-ripple-3 {
  position: absolute;
  border: 1.5px solid var(--primary);
  border-radius: 50%;
  opacity: 0;
  width: 100%; height: 100%;
  animation: radarRipple 3s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
  pointer-events: none;
  z-index: 0;
}
.radar-ripple-2 {
  animation-delay: 1s;
}
.radar-ripple-3 {
  animation-delay: 2s;
}

@keyframes radarScan {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes radarRipple {
  0% { transform: scale(0.1); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ── Blurred partner preview shown during LiveKit ICE handshake ─────────────
   Injected as <img class="partner-preview"> behind the tile-status overlay
   (z-index:0) so the spinner stays visible on top (tile-status z-index:1).
   Scale(1.15) hides the blur fringe at tile edges.                           */
.partner-preview {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* Natural upscale blur: 160×90 JPEG stretched to full tile — no extra filter needed.
     Mirror matches how partner video is displayed (.tile.partner video scaleX(-1)). */
  filter: brightness(0.7) saturate(0.7);
  transform: scaleX(-1);
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 0;
  pointer-events: none;
}
.partner-preview.partner-preview-fade { opacity: 0; }
/* Speed up the ring when we have an actual partner (connecting vs searching) */
.tile-status.status-connecting .tile-spinner { animation-duration: 0.45s; }

/* ---- Chat column ---- */
.chat-col {
  display: flex; flex-direction: column;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  height: var(--stage-h);
  min-height: 0;
}
.chat-msgs {
  flex: 1; overflow-y: auto;
  padding: 50px 18px 8px; /* extra top so first-msg action bar isn't clipped */
  display: flex; flex-direction: column; gap: 8px;
}
.welcome { padding: 4px 2px 12px; }
.welcome h2 {
  font-size: 22px; margin: 0 0 14px; font-weight: 800; color: var(--text);
  letter-spacing: -0.01em;
}
.welcome .age-line {
  color: var(--primary); font-weight: 800; margin: 6px 0 8px;
  display: flex; align-items: center; gap: 8px; font-size: 16px;
}
.welcome .age-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #c0392b; color: #fff; font-size: 11px; font-weight: 800;
}
.welcome ul { margin: 0; padding-left: 0; list-style: none; color: var(--text-2); }
.welcome ul li { padding: 3px 0; font-size: 15px; }

.msg {
  max-width: 78%; padding: 8px 12px; border-radius: 14px;
  font-size: 14px; line-height: 1.4; word-wrap: break-word;
}
.msg.me   { align-self: flex-end;  background: var(--primary); color: var(--primary-fg); border-bottom-right-radius: 4px; }
.msg.them { align-self: flex-start; background: var(--panel-2); color: var(--text); border-bottom-left-radius: 4px; }
.msg.sys  { align-self: center; background: transparent; color: var(--muted); font-size: 12px; font-style: italic; }

/* ---- Input row: C:\IncogChat inspired pill input panel ---- */
.input-row {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--panel);
  align-items: center;
}
.chat-input-panel {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 5px 6px 5px 12px;
  gap: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  min-width: 0;
}
.chat-input-panel:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 16px rgba(34, 136, 145, 0.25);
}
.start-btn {
  flex: 0 0 auto;
  background: var(--primary); color: var(--primary-fg);
  border: none; border-radius: 14px;
  padding: 24px 36px;
  min-width: 130px;            /* prevent width jump between Skip and Really? */
  font-size: 18px; font-weight: 800;
  cursor: pointer;
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(34,136,145,.35);
  transition: transform .08s, box-shadow .12s, opacity .12s, background-color .12s;
}
.start-btn small { font-size: 12px; opacity: .65; font-weight: 600; }
.start-btn:hover { transform: translateY(-1px); }
.start-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.start-btn.stop  { background: var(--danger); box-shadow: 0 6px 14px rgba(192,57,43,.35); }
.start-btn.stop-btn { background: var(--danger); box-shadow: 0 6px 14px rgba(192,57,43,.35); }
.start-btn.next  { background: var(--success); box-shadow: 0 6px 14px rgba(76,175,80,.35); }
/* Stack label + sub-text vertically for Skip/(Esc) and Really?/tap again */
.start-btn.next,
.start-btn.confirm {
  flex-direction: column;
  gap: 2px;
}
.start-btn.next small,
.start-btn.confirm small {
  display: block;
  font-size: 12px;
  opacity: 0.7;
  line-height: 1;
}

.input-emoji-btn {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 50%;
  font-size: 19px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, opacity .15s ease, color .15s ease;
  padding: 0;
}
.input-emoji-btn:hover {
  color: var(--primary);
  transform: scale(1.12);
  background: rgba(255, 255, 255, 0.06);
}
.input-emoji-btn:active {
  transform: scale(0.92);
}
.input-icebreaker-btn {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 50%;
  font-size: 17px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
  padding: 0;
}
.input-icebreaker-btn:hover {
  transform: scale(1.18) rotate(12deg);
  filter: brightness(1.2);
  background: rgba(255, 255, 255, 0.06);
}
.input-icebreaker-btn:active {
  transform: scale(0.92);
}
.text-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  height: 42px;
  padding: 0 4px;
  font-size: 15px; outline: none;
  min-width: 0;
  line-height: 1.4;
}
.text-input:focus { border: none; outline: none; box-shadow: none; }
.send-btn {
  flex: 0 0 auto;
  background: var(--primary); border: none; cursor: pointer;
  color: var(--primary-fg);
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(34,136,145,.35);
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.send-btn:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: scale(1.06);
}
.send-btn:active:not(:disabled) {
  transform: scale(0.94);
}
.send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.send-btn:hover { transform: translateY(-1px); }
.send-btn:disabled { opacity: .45; cursor: not-allowed; background: var(--panel-2); color: var(--muted); box-shadow: none; transform: none; }

/* ---- Gender filter row (legacy styles — actual placement is now inside .action-row above) ---- */
.filter-row {
  display: flex; gap: 6px; padding: 8px 12px 0;
}
.filter-pill {
  flex: 0 0 auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.filter-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
}
.filter-pill:not(.active):hover {
  border-color: var(--primary);
  color: var(--text);
}

/* ---- Filter panels (country picker / gender coming-soon) ---- */
.action-row { position: relative; overflow: visible; }
.fpanel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 340px;
}
.fpanel[hidden] { display: none; }
.fpanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fpanel-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
  transition: color .1s;
}
.fpanel-close:hover { color: var(--text); }
.fpanel-search {
  padding: 9px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  width: 100%;
  flex-shrink: 0;
}
.fpanel-search::placeholder { color: var(--muted); }
.fpanel-list { overflow-y: auto; flex: 1; }
.fpanel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background .1s;
  user-select: none;
}
.fpanel-item:hover { background: var(--panel-2); }
.fpanel-item.selected { color: var(--primary); background: var(--surface-alt); }
.fpanel-item-flag { font-size: 22px; flex-shrink: 0; line-height: 1; }
.fpanel-item-name { flex: 1; }
.fpanel-item-check { color: var(--primary); font-weight: 700; margin-left: auto; opacity: 0; }
.fpanel-item.selected .fpanel-item-check { opacity: 1; }
/* Gender coming-soon variant */
.fpanel--gender { width: 320px; }
.fpanel-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 24px;
}
.fpanel-cs-icon { font-size: 40px; line-height: 1; }
.fpanel-coming-soon strong { font-size: 15px; color: var(--text); }
.fpanel-coming-soon p { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.5; }
.fpanel-cs-btn {
  margin-top: 6px;
  align-self: center;
}
.fpanel-cs-btn:hover { opacity: .85; }

/* ==================== BOTTOM MODE PILL (chat page) ==================== */
.modebar {
  display: flex; justify-content: center;
  padding: 8px 12px;
  background: transparent;
}
.mode-pill {
  display: inline-flex; background: var(--panel);
  border-radius: 999px; padding: 4px; gap: 2px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.mode-pill button {
  border: none; background: transparent; color: var(--muted);
  padding: 8px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.mode-pill button.active { background: var(--primary); color: var(--primary-fg); }

/* ==================== INTEREST INPUT ==================== */
.interest-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.interest-bar .label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.interest-bar input {
  flex: 1; min-width: 120px; background: transparent; border: none;
  color: var(--text); padding: 4px 6px; font-size: 13px; outline: none;
}
.chip {
  background: var(--primary); color: var(--primary-fg);
  font-size: 12px; padding: 3px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}
.chip button { background: none; border: none; color: var(--primary-fg); cursor: pointer; padding: 0; font-size: 14px; line-height: 1; }

/* ==================== 18+ inline gate ==================== */
.gate-inline {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px; margin-top: 12px;
}
.gate-inline h3 { margin: 0 0 8px; color: var(--text); font-size: 16px; }
.gate-inline p { margin: 0 0 12px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.gate-inline .row { display: flex; gap: 8px; flex-wrap: wrap; }
.gate-inline button {
  border: none; padding: 10px 16px; border-radius: 10px;
  font-weight: 700; cursor: pointer; font-size: 14px;
}
.gate-inline .agree { background: var(--primary); color: var(--primary-fg); }
.gate-inline .leave { background: var(--panel); color: var(--muted); border: 1px solid var(--border); }

/* ==================== REPORT MODAL ==================== */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none;
  align-items: center; justify-content: center; z-index: 900; padding: 20px;
}
.modal.active { display: flex; }
.modal-card {
  background: var(--panel); color: var(--text);
  border-radius: 14px; padding: 22px; max-width: 400px; width: 100%;
  box-shadow: var(--shadow);
}
.modal-card h3 { margin: 0 0 14px; }
.modal-card label { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--text-2); font-size: 14px; }
.modal-card .actions { margin-top: 16px; display: flex; gap: 8px; justify-content: flex-end; }
.modal-card .actions button {
  border: none; padding: 10px 16px; border-radius: 10px; font-weight: 700; cursor: pointer;
}
.modal-card .send { background: var(--danger); color: #fff; }
.modal-card .cancel { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }

/* ==================== TOAST ==================== */
.toast {
  position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: 10px;
  font-size: 14px; z-index: 1100; display: none;
  box-shadow: var(--shadow);
}
.toast.active,
.toast.show { display: block; }

/* ==================== SEO SECTIONS ==================== */
.seo {
  background: var(--panel-2);
  padding: 40px 18px;
  border-top: 1px solid var(--border);
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}
.seo .wrap { max-width: 980px; margin: 0 auto; }
.seo h2 { font-size: clamp(22px, 3.5vw, 28px); color: var(--text); margin: 0 0 16px; text-align: center; }
.seo p, .seo li { color: var(--text-2); line-height: 1.55; font-size: 15px; }
.seo strong { color: var(--text); }
.seo aside, .seo [style*="surface-alt"] { color: var(--text); }
.seo-intro { padding-top: 16px; padding-bottom: 16px; }
.seo-intro .wrap { max-width: 720px; text-align: center; }
.seo-intro p { font-size: 16px; }
.faq details { background: var(--panel); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--text); }
.faq p { margin: 8px 0 0; }
.compare-tbl { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 12px; overflow: hidden; font-size: 14px; }
.compare-tbl th, .compare-tbl td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.compare-tbl th:not(:first-child), .compare-tbl td:not(:first-child) { text-align: center; white-space: nowrap; }
.compare-tbl th { background: var(--panel-2); color: var(--text); }
.compare-tbl td.yes { color: var(--success); font-weight: 700; }
.compare-tbl td.no  { color: var(--danger);  font-weight: 700; }

/* ==================== SITE FOOTER ==================== */
footer.site-foot {
  text-align: center; padding: 22px 16px; color: var(--muted); font-size: 13px;
  border-top: 1px solid var(--border); background: var(--panel);
}
footer.site-foot .links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px; margin-bottom: 10px;
}
footer.site-foot .links a { color: var(--muted); }

/* ==================== MOBILE TWEAKS ==================== */
@media (max-width: 640px) {
  .topbar { padding: 8px 12px; min-height: 52px; }
  :root { --topbar-h: 52px; }
  .brand { font-size: 17px; }
  .brand img { width: 30px; height: 30px; }
  .topbar-right { gap: 10px; }
  .online { font-size: 13px; }

  .hero { padding: 36px 16px 28px; }
  .hero .cta { padding: 14px 28px; font-size: 16px; }

  .app {
    padding: 8px; gap: 8px;
    /* On mobile we let the page scroll naturally so the chat input is
       always reachable above the on-screen keyboard. */
    --stage-h: auto;
    min-height: 0;
  }
  .video-col {
    height: auto;
    grid-template-rows: auto;
    display: block;
    position: relative;
  }
  .tile { height: auto; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; }
  .tile.self {
    position: absolute; right: 8px; bottom: 8px;
    width: 38%; max-width: 160px; height: auto;
    z-index: 3; border: 2px solid var(--panel);
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
  }
  .chat-col { height: auto; min-height: 320px; max-height: none; }
  .chat-msgs { padding: 14px; }
  .welcome h2 { font-size: 18px; }
  .input-row { padding: 10px; gap: 8px; }
  .start-btn { padding: 20px 22px; font-size: 16px; min-width: 110px; }
  .text-input { padding: 11px 12px; font-size: 14px; }
}

/* ============================================================
   Additions: typing indicator, hover tile controls, device menu,
   theme-toggle sun/moon icons
   ============================================================ */

/* Typing indicator (bouncing dots in a "them" bubble) */
.msg.typing {
  display: inline-flex; gap: 4px;
  padding: 10px 12px; align-items: center;
}
.msg.typing .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.msg.typing .dot:nth-child(2) { animation-delay: .15s; }
.msg.typing .dot:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0);   opacity: .4; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

/* Hover controls on the self tile (camera/mic selectors) */
.tile-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 6px; justify-content: center;
  padding: 6px;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
  opacity: 0; transition: opacity .18s;
  pointer-events: none;
  z-index: 5;
}
.tile.self:hover .tile-controls,
.tile.self:focus-within .tile-controls,
.tile-controls:hover { opacity: 1; pointer-events: auto; }
/* Always show on touch devices (no hover). */
@media (hover: none) {
  .tile-controls { opacity: 1; pointer-events: auto; background: rgba(0,0,0,.4); }
}
.tile-ctrl {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255,255,255,.95); color: #111;
  font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: transform .1s;
}
.tile-ctrl:hover { transform: scale(1.08); }

/* Popup menu listing devices */
.device-menu {
  position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 4px; min-width: 180px; max-width: 240px;
  z-index: 10;
}
.device-menu .menu-item {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent; color: var(--text);
  padding: 8px 10px; font-size: 13px; border-radius: 6px;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.device-menu .menu-item:hover { background: var(--panel-2); }
.device-menu .menu-item.active { background: var(--primary); color: var(--primary-fg); }
.device-menu .menu-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }

/* Theme toggle: sun/moon glyphs, knob slides between */
/* Landing brand sizing — bigger and bolder, shrinks on scroll */
.brand.brand-lg { font-size: 38px; font-weight: 900; gap: 16px; transition: font-size .28s, gap .28s; }
.brand.brand-lg img { width: 60px; height: 60px; border-radius: 14px; transition: width .28s, height .28s, border-radius .28s; }
/* Dark mode (default): white logo for large brand */
.brand.brand-lg img { content: url('/images/incogchat_white.webp'); }
/* Light mode: black logo */
:root[data-theme="light"] .brand.brand-lg img { content: url('/images/incogchat.webp'); }
.brand .brand-text { letter-spacing: -0.025em; }

/* Landing topbar: panel bg always, border/shadow revealed on scroll */
.topbar-landing {
  border-bottom-color: transparent;
  box-shadow: none;
  transition: border-color .28s, box-shadow .28s;
}
.topbar-landing.topbar-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
}
.topbar-landing.topbar-scrolled .brand.brand-lg { font-size: 22px; gap: 10px; }
.topbar-landing.topbar-scrolled .brand.brand-lg img { width: 36px; height: 36px; border-radius: 10px; }
.topbar-landing .online { font-size: 16px; font-weight: 800; }
.topbar-landing .online .dot { width: 11px; height: 11px; }
@media (max-width: 640px) {
  .brand.brand-lg { font-size: 28px; gap: 12px; }
  .brand.brand-lg img { width: 46px; height: 46px; }
  .topbar-landing .online { font-size: 14px; }
}

/* ==================== LANGUAGE PICKER ==================== */
.lang-picker { position: relative; }

.lang-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 10px;
  border: 1.5px solid var(--border);
  background: transparent; cursor: pointer;
  color: var(--text); font-size: 13px; font-weight: 700;
  font-family: inherit; white-space: nowrap; line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.lang-btn:hover,
.lang-btn:focus-visible {
  background: var(--panel-2); border-color: var(--primary);
  color: var(--primary); outline: none;
}
.lang-btn[aria-expanded="true"] {
  background: var(--panel-2); border-color: var(--primary); color: var(--primary);
}
.lgi { opacity: .75; flex-shrink: 0; }
.lgc { opacity: .6; flex-shrink: 0; transition: transform .2s; }
.lang-btn[aria-expanded="true"] .lgc { transform: rotate(180deg); }

.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 178px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.16);
  list-style: none; margin: 0; padding: 5px;
  z-index: 300; display: none;
  transform-origin: top right;
}
.lang-menu.open {
  display: block;
  animation: lgIn .16s cubic-bezier(.16,1,.3,1) both;
}
@keyframes lgIn {
  from { opacity: 0; transform: scale(.95) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.lang-menu li { margin: 0; padding: 0; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--text); font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background .1s, color .1s;
}
.lang-menu a:hover,
.lang-menu a:focus-visible {
  background: var(--panel-2); color: var(--primary);
  outline: none; text-decoration: none;
}
.lang-menu a.active { color: var(--primary); background: var(--panel-2); }
.lang-menu a.active::after { content: "✓"; margin-left: auto; font-weight: 900; font-size: 13px; }
.lf { font-size: 18px; line-height: 1.1; flex-shrink: 0; }

/* RTL: open to left side */
[dir="rtl"] .lang-menu { right: auto; left: 0; transform-origin: top left; }

@media (max-width: 500px) {
  .lang-btn { padding: 6px 8px; gap: 4px; }
  #langCode, .lgc { display: none; }
}

/* Welcome screen: small lead line under the greeting */
.welcome .welcome-lead {
  margin: 6px 0 14px; font-size: 15px; color: var(--text-2);
}
.welcome h2 { font-size: 24px; margin: 0 0 6px; }

/* Modern SVG icons inside hero CTAs */
.hero .cta { gap: 10px; }
.hero .cta .ico-svg { width: 22px; height: 22px; }
.hero-grid .card .ico svg { display: block; color: var(--primary); }

/* ============ "Less is more" landing tweaks ============ */
/* Tighter hero copy */
.hero h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 8px; }
.hero p.lead { font-size: 15px; margin-bottom: 22px; max-width: 480px; text-align: center; margin-left: auto; margin-right: auto; }

/* Minimal feature cards: icon top-centre, single title, no subtitle */
.hero-grid.hero-grid-min .card {
  text-align: center;
  padding: 18px 14px;
}
.hero-grid.hero-grid-min .card .ico {
  display: flex; justify-content: center;
  margin: 0 0 8px;
}
.hero-grid.hero-grid-min .card .ico svg {
  color: var(--primary);
}
.hero-grid.hero-grid-min .card h3 {
  margin: 0; font-size: 15px; font-weight: 700;
}
.hero-grid.hero-grid-min .card p { display: none; }

/* Tighter SEO + FAQ blocks */
.seo { padding: 28px 18px; }
.seo h2 { font-size: clamp(20px, 3vw, 24px); margin-bottom: 12px; }
.faq details { padding: 10px 14px; }
.faq summary { font-size: 14px; }
.faq p { font-size: 14px; }
.compare-tbl { font-size: 13px; }
.compare-tbl th, .compare-tbl td { padding: 8px 10px; }

/* ============ Landing Split-Screen Layout ============ */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 90px 32px 80px;
  background:
    radial-gradient(ellipse 70% 60% at 80% 10%, rgba(34,136,145,.20), transparent),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(74,179,189,.10), transparent),
    var(--bg);
  position: relative;
  min-height: 88vh;
}

.hero-grid-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  align-items: center;
  text-align: left;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}

.hero-left h1 {
  font-size: clamp(36px, 4.8vw, 58px);
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.035em;
  color: var(--text);
}

.hero-left h1 .accent {
  background: linear-gradient(135deg, var(--primary), #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34,136,145,0.08);
  border: 1px solid rgba(34,136,145,0.25);
  padding: 7px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  width: fit-content;
}

.hero-live-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 12px #22c55e;
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0% { transform: scale(0.9); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.5; }
  100% { transform: scale(0.9); opacity: 1; }
}

/* Mode select tiles layout */
.mode-select-tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0;
  width: 100%;
}

.mode-tile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 1.5px solid var(--border);
  padding: 14px 18px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  position: relative;
  overflow: hidden;
  color: var(--text);
  font-family: inherit;
}

/* Subtle left accent strip on active */
.mode-tile-card.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), #38bdf8);
  border-radius: 99px 0 0 99px;
}

.mode-tile-card:hover {
  border-color: rgba(34,136,145,0.5);
  background: rgba(34,136,145,0.05);
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(34,136,145,0.08);
}

.mode-tile-card.active {
  border-color: rgba(34,136,145,0.6);
  background: rgba(34,136,145,0.08);
  box-shadow: 0 4px 24px rgba(34,136,145,0.14);
  transform: translateX(4px);
}

.mode-tile-icon-wrap {
  width: 46px;
  height: 46px;
  background: var(--panel-2);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: all 0.22s ease;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.mode-tile-card.active .mode-tile-icon-wrap {
  background: linear-gradient(135deg, var(--primary), #38bdf8);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(34,136,145,0.35);
}

.mode-tile-card:hover .mode-tile-icon-wrap {
  color: var(--primary);
  border-color: rgba(34,136,145,0.3);
}

.mode-tile-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.mode-tile-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.mode-tile-desc {
  font-size: 12.5px;
  color: var(--text-2);
  font-weight: 500;
}

/* Chevron arrow on active tile */
.mode-tile-card::after {
  content: '›';
  position: absolute;
  right: 18px;
  font-size: 22px;
  color: var(--border);
  font-weight: 300;
  line-height: 1;
  transition: color 0.2s, transform 0.2s;
}

.mode-tile-card.active::after,
.mode-tile-card:hover::after {
  color: var(--primary);
  transform: translateX(3px);
}

/* Start Button styling */
.cta-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, #38bdf8 100%);
  color: #fff;
  border: none;
  font-size: 17px;
  font-weight: 800;
  padding: 17px 40px;
  border-radius: 14px;
  text-decoration: none;
  width: 100%;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 32px rgba(34,136,145,.40), 0 2px 8px rgba(34,136,145,.20);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.cta-start::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
  pointer-events: none;
}

.cta-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(34,136,145,.50), 0 4px 12px rgba(34,136,145,.25);
  text-decoration: none;
  color: #fff;
}

/* Right column: live match animations */
.hero-right {
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  width: 100%;
  align-self: stretch;
}

.mode-anim-stage {
  background: linear-gradient(145deg, var(--panel) 0%, rgba(34,136,145,0.04) 100%);
  border: 1px solid rgba(34,136,145,0.15);
  border-radius: 28px;
  width: 100%;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(34,136,145,0.08), 0 20px 60px rgba(0,0,0,0.12);
  position: relative;
}

/* Inner glow ring */
.mode-anim-stage::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(34,136,145,0.15), transparent 50%, rgba(56,189,248,0.08));
  pointer-events: none;
  z-index: 0;
}

/* Animations wrapper */
.m-anim {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 340px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  gap: 24px;
  z-index: 1;
}

.m-anim.active {
  display: flex;
  animation: fadeInStage 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInStage {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Premium SVG Hero Animations ── */
.hero-svg {
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 300px;
}

/* TEXT ANIMATION: Neural message network */
.conn-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLine 3s ease-in-out infinite;
}
.conn-line:nth-child(1) { animation-delay: 0s; }
.conn-line:nth-child(2) { animation-delay: 0.5s; }
.conn-line:nth-child(3) { animation-delay: 1s; }
.conn-line:nth-child(4) { animation-delay: 1.5s; }

@keyframes drawLine {
  0%, 100% { stroke-dashoffset: 200; opacity: 0.2; }
  50% { stroke-dashoffset: 0; opacity: 0.6; }
}

.flow-particle {
  animation: flowAlongPath 2s linear infinite;
}
.flow-particle.p1 { animation-delay: 0s; }
.flow-particle.p2 { animation-delay: 0.5s; }
.flow-particle.p3 { animation-delay: 1s; }
.flow-particle.p4 { animation-delay: 1.5s; }

@keyframes flowAlongPath {
  0% { cx: 80; cy: 150; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: 320; cy: 150; opacity: 0; }
}

.msg-bubble {
  animation: bubbleFloat 3s ease-in-out infinite;
}
.msg-bubble.b1 { animation-delay: 0s; }
.msg-bubble.b2 { animation-delay: 0.7s; }
.msg-bubble.b3 { animation-delay: 1.4s; }
.msg-bubble.b4 { animation-delay: 2.1s; }

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-8px); opacity: 1; }
}

.text-line {
  animation: textFlicker 2s ease-in-out infinite;
}
.text-line.tl1 { animation-delay: 0s; }
.text-line.tl2 { animation-delay: 0.2s; }
.text-line.tl3 { animation-delay: 0.4s; }
.text-line.tl4 { animation-delay: 0.6s; }

@keyframes textFlicker {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

.typing-dot {
  animation: typingPulse 1.4s ease-in-out infinite;
}
.typing-dot.td1 { animation-delay: 0s; }
.typing-dot.td2 { animation-delay: 0.2s; }
.typing-dot.td3 { animation-delay: 0.4s; }

@keyframes typingPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* VOICE ANIMATION: 3D spherical soundwave */
.ripple {
  animation: rippleExpand 2s ease-out infinite;
}
.ripple.r1 { animation-delay: 0s; }
.ripple.r2 { animation-delay: 0.6s; }
.ripple.r3 { animation-delay: 1.2s; }

@keyframes rippleExpand {
  0% { r: 30; opacity: 0.8; }
  100% { r: 120; opacity: 0; }
}

.mic-glow {
  animation: micGlowPulse 2s ease-in-out infinite;
}

@keyframes micGlowPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.wbar {
  animation: waveBarMove 1.2s ease-in-out infinite alternate;
}
.wl1 { animation-delay: 0.0s; }
.wl2 { animation-delay: 0.1s; }
.wl3 { animation-delay: 0.2s; }
.wl4 { animation-delay: 0.3s; }
.wr1 { animation-delay: 0.4s; }
.wr2 { animation-delay: 0.5s; }
.wr3 { animation-delay: 0.6s; }
.wr4 { animation-delay: 0.7s; }

@keyframes waveBarMove {
  0% { height: 20px; opacity: 0.4; }
  100% { height: 80px; opacity: 1; }
}

.orbit-particle {
  animation: orbitAround 4s linear infinite;
}
.op1 { animation-delay: 0s; }
.op2 { animation-delay: 1s; }
.op3 { animation-delay: 2s; }
.op4 { animation-delay: 3s; }

@keyframes orbitAround {
  0% { transform: rotate(0deg) translateX(60px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

/* VIDEO ANIMATION: Holographic portal */
.portal-circle {
  animation: portalRotate 20s linear infinite;
}

@keyframes portalRotate {
  to { transform: rotate(360deg); }
}

.portal-circle-inner {
  animation: portalPulse 3s ease-in-out infinite;
}

@keyframes portalPulse {
  0%, 100% { opacity: 0.2; r: 100; }
  50% { opacity: 0.5; r: 105; }
}

.screen-frame {
  animation: screenFloat 4s ease-in-out infinite;
}
.screen-left { animation-delay: 0s; }
.screen-right { animation-delay: 0.5s; }

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

.live-dot {
  animation: liveBlink 1s ease-in-out infinite;
}

@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.swave {
  animation: audioWave 0.8s ease-in-out infinite alternate;
}
.sw1 { animation-delay: 0.0s; }
.sw2 { animation-delay: 0.1s; }
.sw3 { animation-delay: 0.2s; }
.sw4 { animation-delay: 0.3s; }
.sw5 { animation-delay: 0.4s; }

@keyframes audioWave {
  0% { height: 6px; opacity: 0.4; }
  100% { height: 18px; opacity: 1; }
}

.beam-rect {
  animation: beamPulse 1.5s ease-in-out infinite;
}

@keyframes beamPulse {
  0%, 100% { opacity: 0.4; height: 20px; }
  50% { opacity: 0.8; height: 30px; }
}

.beam-particle {
  animation: beamTravel 1.2s linear infinite;
}
.bp1 { animation-delay: 0s; }
.bp2 { animation-delay: 0.6s; }

@keyframes beamTravel {
  0% { cy: 140; opacity: 0; }
  50% { opacity: 1; }
  100% { cy: 160; opacity: 0; }
}

.onode {
  animation: nodeOrbit 5s linear infinite;
}
.on1 { animation-delay: 0s; }
.on2 { animation-delay: 1.25s; }
.on3 { animation-delay: 2.5s; }
.on4 { animation-delay: 3.75s; }

@keyframes nodeOrbit {
  0% { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

.mesh-node {
  animation: meshPulse 3s ease-in-out infinite;
}
.mn1 { animation-delay: 0s; }
.mn2 { animation-delay: 0.5s; }
.mn3 { animation-delay: 1s; }
.mn4 { animation-delay: 1.5s; }
.mn5 { animation-delay: 2s; }

@keyframes meshPulse {
  0%, 100% { r: 3; opacity: 0.4; }
  50% { r: 5; opacity: 1; }
}

/* ── Text: glowing node mesh ── */
.ma-nodes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  position: relative;
}

.ma-node {
  width: 16px;
  height: 16px;
  background: var(--primary);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 20px var(--primary), 0 0 40px rgba(34,136,145,0.3);
  animation: nodePulse 3s ease-in-out infinite;
}

.ma-node:nth-child(2) { animation-delay: 0.5s; }
.ma-node:nth-child(3) { animation-delay: 1.0s; }
.ma-node:nth-child(4) { animation-delay: 1.5s; }
.ma-node:nth-child(5) { animation-delay: 0.75s; }
.ma-node:nth-child(6) { animation-delay: 0.25s; }

@keyframes nodePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 16px var(--primary), 0 0 32px rgba(34,136,145,0.25); }
  50% { transform: scale(1.3); box-shadow: 0 0 28px var(--primary), 0 0 56px rgba(34,136,145,0.5); }
}

.ma-node::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1.5px dashed rgba(34,136,145,0.4);
  border-radius: 50%;
  animation: rotateNode 8s linear infinite;
}

@keyframes rotateNode {
  to { transform: rotate(360deg); }
}

.ma-text-line {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ── Voice: scaled equalizer bars with subtle glow & background particles ── */
.ma-eq-waves {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 160px;
  width: 100%;
  max-width: 320px;
  padding: 0 10px;
  z-index: 2;
}

/* Pulsing background glow behind equalizer */
.ma-eq-waves::before {
  content: '';
  position: absolute;
  inset: -20px -40px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 15%, transparent) 0%, transparent 70%);
  filter: blur(16px);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: voiceGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes voiceGlowPulse {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.1); opacity: 1.1; }
}

/* Voice Background Floating Particles */
.voice-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0.25;
  filter: blur(1px);
  animation: vpFloat 6s ease-in-out infinite alternate;
  z-index: 1;
}
.voice-particle.vp1 { top: 20%; left: 15%; animation-delay: 0s; }
.voice-particle.vp2 { bottom: 25%; left: 20%; animation-delay: 1.5s; }
.voice-particle.vp3 { top: 30%; right: 18%; animation-delay: 0.8s; }
.voice-particle.vp4 { bottom: 20%; right: 22%; animation-delay: 2.3s; }

@keyframes vpFloat {
  0% { transform: translateY(0) scale(0.8); opacity: 0.15; }
  50% { opacity: 0.35; }
  100% { transform: translateY(-15px) scale(1.3); opacity: 0.25; }
}

.eq-wave {
  flex: 1;
  min-width: 6px;
  max-width: 10px;
  height: 100%;
  background: linear-gradient(180deg, #38bdf8, var(--primary));
  border-radius: 99px;
  animation: voiceWave 1.4s ease-in-out infinite alternate;
  box-shadow: 0 0 10px rgba(34,136,145,0.45);
}

.eq-wave:nth-child(1)  { animation-delay: 0.05s; }
.eq-wave:nth-child(2)  { animation-delay: 0.15s; }
.eq-wave:nth-child(3)  { animation-delay: 0.30s; }
.eq-wave:nth-child(4)  { animation-delay: 0.10s; }
.eq-wave:nth-child(5)  { animation-delay: 0.45s; }
.eq-wave:nth-child(6)  { animation-delay: 0.20s; }
.eq-wave:nth-child(7)  { animation-delay: 0.35s; }
.eq-wave:nth-child(8)  { animation-delay: 0.08s; }
.eq-wave:nth-child(9)  { animation-delay: 0.50s; }
.eq-wave:nth-child(10) { animation-delay: 0.25s; }
.eq-wave:nth-child(11) { animation-delay: 0.40s; }
.eq-wave:nth-child(12) { animation-delay: 0.12s; }
.eq-wave:nth-child(13) { animation-delay: 0.30s; }
.eq-wave:nth-child(14) { animation-delay: 0.05s; }
.eq-wave:nth-child(15) { animation-delay: 0.45s; }
.eq-wave:nth-child(16) { animation-delay: 0.18s; }
.eq-wave:nth-child(17) { animation-delay: 0.35s; }
.eq-wave:nth-child(18) { animation-delay: 0.10s; }
.eq-wave:nth-child(19) { animation-delay: 0.50s; }

@keyframes voiceWave {
  0%   { height: 12px;   opacity: 0.35; transform: scaleY(0.9); }
  100% { height: 160px; opacity: 1; transform: scaleY(1.05); }
}

/* ── Video: radar telemetry ── */
.ma-radar-circles {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(34,136,145,0.15);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Center core dot */
.ma-radar-circles::after {
  content: '';
  width: 14px;
  height: 14px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--primary), 0 0 40px rgba(34,136,145,0.5);
  animation: nodePulse 2s ease-in-out infinite;
}

.radar-c1, .radar-c2, .radar-c3 {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  animation: radarWave 4s infinite ease-out;
  opacity: 0;
}

.radar-c1 { width: 25%; height: 25%; }
.radar-c2 { width: 55%; height: 55%; animation-delay: 1.3s; }
.radar-c3 { width: 85%; height: 85%; animation-delay: 2.6s; }

@keyframes radarWave {
  0%   { transform: scale(0.85); opacity: 0; }
  20%  { opacity: 0.6; }
  100% { transform: scale(1.1);  opacity: 0; }
}

.radar-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #38bdf8;
  border-radius: 50%;
  box-shadow: 0 0 12px #38bdf8;
  animation: particleGlow 2.5s infinite alternate;
}

.radar-particle.rp1 { top: 18%; left: 28%; animation-delay: 0.0s; }
.radar-particle.rp2 { bottom: 22%; right: 18%; animation-delay: 0.8s; }
.radar-particle.rp3 { top: 58%; left: 72%; animation-delay: 1.6s; }

@keyframes particleGlow {
  0%   { transform: scale(0.7); opacity: 0.3; }
  100% { transform: scale(1.4); opacity: 1.0; }
}

/* FaceTime-style Video Mockup styling */
.vcs-pip-mock {
  display: block !important;
  position: relative;
  width: 100%;
  height: 100%;
}

.vcs-vm-partner-fullscreen {
  width: 100% !important;
  height: 100% !important;
  position: relative;
}

.vcs-mock-video-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #152227, #0e1619);
  position: relative;
}

.vcs-mock-video-bg::after {
  content: '👤';
  font-size: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.35;
}

.vcs-mock-self-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #253840, #152227);
  position: relative;
}

.vcs-mock-self-bg::after {
  content: '🤳';
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.45;
}

.vcs-vm-self-pip {
  position: absolute !important;
  right: 12px;
  bottom: 12px;
  width: 80px !important;
  height: 106px !important;
  border-radius: 12px !important;
  border: 2px solid var(--panel) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  z-index: 5;
  overflow: hidden;
}

.vcs-mock-audio-status {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  gap: 3px;
}

.vcs-mock-wave {
  width: 3px;
  height: 12px;
  background: var(--primary);
  border-radius: 2px;
  animation: mockVoice 1s ease-in-out infinite alternate;
}

.vcs-mock-wave:nth-child(2) { animation-delay: 0.2s; }
.vcs-mock-wave:nth-child(3) { animation-delay: 0.4s; }

@keyframes mockVoice {
  0% { height: 4px; }
  100% { height: 16px; }
}

.vcs-chat-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  margin-bottom: 8px;
  line-height: 1.4;
  position: relative;
  word-wrap: break-word;
}

.vcs-chat-bubble.them {
  background: var(--panel-2);
  color: var(--text);
  align-self: flex-start;
}

.vcs-chat-bubble.me {
  background: var(--primary);
  color: #fff;
  align-self: flex-end;
}

.vcs-bubble-react {
  position: absolute;
  bottom: -6px;
  right: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 1px 4px;
  font-size: 10px;
}

/* Trust Stat Cards Styling */
.trust-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.trust-stat-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow);
}

.trust-stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 12px 30px rgba(34,136,145,0.15);
}

.tsc-icon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.tsc-category {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 0.08em;
}

.tsc-title {
  font-size: 18px;
  color: var(--text);
  margin: 0 0 12px 0;
  line-height: 1.35;
  font-weight: 700;
}

.tsc-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}

.tsc-title a:hover {
  color: var(--primary);
}

.tsc-excerpt {
  color: var(--text-2);
  font-size: 14px;
  margin: 0 0 20px 0;
  line-height: 1.5;
  flex-grow: 1;
}

.tsc-metric-box {
  background: var(--panel-2);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 18px;
}

.tsc-metric-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
}

.tsc-metric-label span {
  color: var(--text-2);
  font-weight: 600;
}

.tsc-metric-label strong {
  color: var(--text);
  font-weight: 800;
}

.tsc-progress-track {
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.tsc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border-radius: 99px;
}
.tsc-progress-fill.pct-76 { width: 76%; }
.tsc-progress-fill.pct-99 { width: 99%; }
.tsc-progress-fill.pct-94 { width: 94%; }

.tsc-link {
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.15s;
}

.tsc-link:hover {
  opacity: 0.85;
}

/* Two-column FAQ styling */
.faq-two-col-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.faq-details {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-details[open] {
  border-color: var(--primary);
}

.faq-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-index {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  opacity: 0.8;
}

.faq-q-text {
  font-size: 15px;
  color: var(--text);
  flex: 1;
}

.faq-answer-wrap {
  padding: 0 22px 18px 50px;
}

.faq-answer-wrap p {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .hero-grid-split {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .hero-left {
    align-items: center;
  }
  .faq-two-col-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 40px 16px 30px;
  }
  /* Cardless mobile hero */
  .hero-grid-split {
    gap: 30px;
  }
  .mode-select-tiles {
    width: 100%;
  }
  .cta-start {
    width: 100%;
  }
}

/* Stop button: white card style, sits next to Skip.
 * Inherits the column-stacked layout from .start-btn so it matches Skip's
 * full height (Skip = label + "(Esc)" small line). */
.start-btn.stop-btn {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  flex-direction: column;
  min-width: 130px;
  font-weight: 800;
}
.start-btn.stop-btn .sb-ico { display: none; }
.start-btn.stop-btn small {
  font-size: 12px; opacity: .65; font-weight: 600;
}
.start-btn.stop-btn:hover { background: var(--panel-2); }

/* Bold "you're now connected" banner above chat messages */
.chat-connected-bar {
  padding: 10px 14px; margin: 0;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.chat-connected-bar strong { color: var(--primary); font-weight: 800; }
.chat-connected-bar .cb-flag { font-size: 22px; vertical-align: middle; margin-left: 4px; line-height: 1; }

/* Skip-confirm state on the primary button */
.start-btn.confirm,
.start-btn.next.confirm,
.start-btn.stop.confirm {
  background: #c0392b !important;
  color: #fff !important;
  border-color: #c0392b !important;
  box-shadow: 0 6px 14px rgba(192,57,43,.35) !important;
}
.start-btn.confirm small { display: block; color: rgba(255,255,255,.85); }

/* Mobile-specific UI tweaks (umingle-style polish) */
@media (max-width: 979px) {
  /* Hide mode pill in topbar — page is already /video/ */
  .topbar-center { display: none; }
  .topbar { grid-template-columns: 1fr auto; padding: 6px 12px; }
  /* Tighter app padding on mobile */
  .app { padding: 8px; gap: 8px; --stage-h: auto; min-height: 0; }
  .chat-col { height: auto; min-height: 180px; }
  .chat-msgs { padding: 14px 14px 6px; }
  /* Hide overlay controls on mobile (volume, self-tile tag) */
  .tile .tile-volume { display: none !important; }
  .video-col .tile.self .tile-tag { display: none; }
  /* Compact Stop button → small square next to Skip, icon only */
  .input-row { padding: 10px; gap: 8px; }
  .start-btn { min-width: 120px; padding: 22px 26px; font-size: 17px; }
  .start-btn small { display: none; }
  .start-btn.stop-btn {
    min-width: 0; width: 64px; padding: 0;
    aspect-ratio: 1 / 1;
    justify-content: center;
    font-size: 0;          /* hide the "Stop" text node */
  }
  .start-btn.stop-btn .sb-ico { width: 16px; height: 16px; font-size: 0; }
  .text-input { padding: 10px 12px; font-size: 16px; border-radius: 10px; }
}

/* ============================================================
   APP DOWNLOAD UI — Smart App Banner + Play Store badge
   Used across all SEO landing pages and blog posts to drive
   Play Store installs (boosts both web ranking and ASO).
   ============================================================ */

/* Smart app banner — sticky thin bar, mobile-only */
.smart-app-banner {
  display: none;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  position: relative;
  z-index: 60;
}
.smart-app-banner img {
  width: 36px; height: 36px; border-radius: 8px; flex: 0 0 auto;
}
.smart-app-banner .sab-text { flex: 1; line-height: 1.2; }
.smart-app-banner .sab-text strong { display: block; font-weight: 800; }
.smart-app-banner .sab-text span { color: var(--muted); font-size: 11px; }
.smart-app-banner .sab-cta {
  background: var(--primary); color: var(--primary-fg);
  padding: 6px 12px; border-radius: 999px;
  font-weight: 700; font-size: 12px;
  text-decoration: none;
}
.smart-app-banner .sab-close {
  background: transparent; border: 0; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 4px;
}
@media (max-width: 720px) {
  .smart-app-banner { display: flex; }
  .smart-app-banner.is-hidden { display: none; }
}

/* Play Store badge (inline, used in heroes, blog footers, etc.) */
.play-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: 12px;
  text-decoration: none; font-weight: 700;
  transition: transform .12s, box-shadow .12s;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.play-badge:hover {
  transform: translateY(-2px); text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.play-badge svg { flex: 0 0 auto; }
.play-badge .pb-text { display: flex; flex-direction: column; line-height: 1.05; }
.play-badge .pb-small { font-size: 10px; opacity: .8; font-weight: 600; }
.play-badge .pb-big { font-size: 15px; font-weight: 800; letter-spacing: .01em; }

/* App callout — bigger banner block for blog post bodies */
.app-callout {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: var(--primary-fg);
  border-radius: 14px; padding: 18px 22px; margin: 28px 0;
}
.app-callout .ac-icon {
  width: 56px; height: 56px; border-radius: 14px; flex: 0 0 auto;
  background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
}
.app-callout .ac-icon img { width: 40px; height: 40px; border-radius: 10px; }
.app-callout .ac-body { flex: 1 1 240px; }
.app-callout .ac-body strong { display: block; font-size: 17px; margin-bottom: 4px; }
.app-callout .ac-body p { margin: 0; opacity: .92; font-size: 14px; line-height: 1.4; }
.app-callout .play-badge { background: #fff; color: #111; }

/* AI-friendly TL;DR answer block (top of long-form posts) */
.tldr {
  background: var(--panel-2);
  border-left: 4px solid var(--primary);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 18px 0 24px;
  font-size: 15px; line-height: 1.55; color: var(--text);
}
.tldr strong { color: var(--primary); display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }

/* ==========================================================================
   v2 — May 2026 — Full hero overhaul: animation, live count, CTA hierarchy,
   trust bar, FAQ chevrons, footer grid, comparison table enhancements.
   ========================================================================== */

/* ── Custom property additions ── */
:root        { --warn: #d97706; }
:root[data-theme="dark"] { --warn: #fbbf24; }

/* ── 1. Hero connection animation ── */
/* ═══════════════════════════════════════════
   Logo spinner — replaces two-person anim
   Outer rings spin at different speeds with
   a comet-tail gradient effect. Core pulses.
   ═══════════════════════════════════════════ */
.logo-spinner {
  position: relative;
  width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 26px;
}
.logo-spinner::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 24px;
  border: 1.5px solid rgba(34,136,145,.22);
  background: rgba(34,136,145,.05);
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="dark"] .logo-spinner::before {
  border-color: rgba(74,179,189,.2);
  background: rgba(74,179,189,.04);
}
/* Three concentric spinning rings */
.ls-ring {
  position: absolute; border-radius: 50%;
  border: 3px solid transparent;
}
.ls-ring-a {
  inset: 0;
  border-top-color: var(--primary);
  border-right-color: rgba(34,136,145,.35);
  animation: lsSpin 2.6s linear infinite;
  filter: drop-shadow(0 0 5px rgba(34,136,145,.55));
}
.ls-ring-b {
  inset: 9px;
  border-bottom-color: rgba(34,136,145,.28);
  border-left-color: rgba(74,179,189,.18);
  animation: lsSpin 3.8s linear infinite reverse;
}
.ls-ring-c {
  inset: 18px;
  border-top-color: rgba(34,136,145,.15);
  border-right-color: rgba(34,136,145,.08);
  animation: lsSpin 6s linear infinite;
}
/* Inner teal core — pulsing glow */
.ls-core {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  animation: lsGlow 2.1s ease-in-out infinite;
}
.ls-text {
  font-family: "Nunito", sans-serif;
  font-size: 16px; font-weight: 900;
  color: #fff; letter-spacing: -.03em; line-height: 1;
  user-select: none;
}
@keyframes lsSpin {
  to { transform: rotate(360deg); }
}
@keyframes lsGlow {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(34,136,145,.55), 0 4px 18px rgba(34,136,145,.28);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(34,136,145,0), 0 8px 30px rgba(34,136,145,.52);
    transform: scale(1.07);
  }
}

/* ═══════════════════════════════════════════
   Mode animations (Text / Voice / Video)
   One eye-catching micro-illustration per
   chat mode. Only the .active one is shown,
   swapped in sync with the mode selector.
   ═══════════════════════════════════════════ */
.mode-anim-stage {
  position: relative;
  width: 100%;
  height: 130px;
  margin: 0 auto 52px;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  contain: layout style paint;  /* isolate animation repaints from the CTA */
}
.m-anim {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.94) translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.m-anim.active {
  opacity: 1; transform: none;
}

/* ── TEXT animation: stacked chat bubbles popping in alternately ── */
.m-anim-text {
  flex-direction: column; gap: 6px; padding: 4px 0;
}
.ma-text-row {
  width: 100%; display: flex;
  opacity: 0; transform: translateY(8px) scale(.92);
  animation: maTextPop 4.2s ease-in-out infinite;
}
.ma-text-l { justify-content: flex-start; padding-left: 18%; }
.ma-text-r { justify-content: flex-end;   padding-right: 18%; }
.m-anim-text .ma-text-row:nth-child(1) { animation-delay: 0s; }
.m-anim-text .ma-text-row:nth-child(2) { animation-delay: .7s; }
.m-anim-text .ma-text-row:nth-child(3) { animation-delay: 1.4s; }
.ma-bubble {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 14px;
  max-width: 70%; line-height: 1.1;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.ma-bubble-l {
  background: rgba(34,136,145,.12);
  color: var(--primary);
  border-bottom-left-radius: 4px;
}
.ma-bubble-r {
  background: var(--primary);
  color: var(--primary-fg);
  border-bottom-right-radius: 4px;
}
.ma-typing { gap: 3px; padding: 9px 12px; }
.ma-typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .35;
  animation: maTypeDot 1.2s ease-in-out infinite;
}
.ma-typing i:nth-child(2) { animation-delay: .18s; }
.ma-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes maTextPop {
  0%, 8%   { opacity: 0; transform: translateY(8px) scale(.92); }
  16%, 70% { opacity: 1; transform: translateY(0)   scale(1); }
  88%,100% { opacity: 0; transform: translateY(-4px) scale(.96); }
}
@keyframes maTypeDot {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-2px); }
}
:root[data-theme="dark"] .ma-bubble-l {
  background: rgba(74,179,189,.18); color: var(--primary-2);
}

/* ── VOICE animation: mic + sonar rings + equalizer ── */
.m-anim-voice { gap: 18px; }
.ma-mic-wrap {
  position: relative; width: 78px; height: 78px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ma-mic {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary); color: var(--primary-fg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(34,136,145,.32);
  animation: maMicBob 1.6s ease-in-out infinite;
  position: relative; z-index: 2;
}
.ma-mic svg { width: 26px; height: 26px; }
.ma-ring {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0;
  animation: maSonar 2.2s ease-out infinite;
}
.ma-ring-2 { animation-delay: .55s; }
.ma-ring-3 { animation-delay: 1.1s; }
@keyframes maMicBob {
  0%, 100% { transform: translateY(0)   scale(1); }
  50%      { transform: translateY(-3px) scale(1.04); }
}
@keyframes maSonar {
  0%   { opacity: .6; transform: scale(.7); }
  80%  { opacity: 0;  transform: scale(2.1); }
  100% { opacity: 0;  transform: scale(2.1); }
}
.ma-eq {
  display: flex; align-items: center; gap: 4px;
  height: 60px;
}
.ma-eq span {
  display: block; width: 4px;
  background: var(--primary); border-radius: 2px;
  opacity: .85;
  animation: maEqBar 1.1s ease-in-out infinite;
}
.ma-eq-l span:nth-child(1) { height: 10px; animation-delay: .00s; }
.ma-eq-l span:nth-child(2) { height: 22px; animation-delay: .12s; }
.ma-eq-l span:nth-child(3) { height: 34px; animation-delay: .24s; }
.ma-eq-l span:nth-child(4) { height: 22px; animation-delay: .36s; }
.ma-eq-l span:nth-child(5) { height: 12px; animation-delay: .48s; }
.ma-eq-r span:nth-child(1) { height: 12px; animation-delay: .55s; }
.ma-eq-r span:nth-child(2) { height: 24px; animation-delay: .67s; }
.ma-eq-r span:nth-child(3) { height: 36px; animation-delay: .79s; }
.ma-eq-r span:nth-child(4) { height: 22px; animation-delay: .91s; }
.ma-eq-r span:nth-child(5) { height: 10px; animation-delay: 1.03s; }
@keyframes maEqBar {
  0%, 100% { transform: scaleY(.35); opacity: .55; }
  50%      { transform: scaleY(1);   opacity: 1;   }
}

/* ── VIDEO animation: two tiles + connection beam ── */
.m-anim-video { gap: 6px; }
.ma-tile {
  position: relative;
  width: 80px; height: 100px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(34,136,145,.18), rgba(34,136,145,.05));
  border: 1.5px solid rgba(34,136,145,.25);
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  box-shadow: 0 8px 22px rgba(34,136,145,.18);
}
.ma-tile-a { animation: maTileFloatA 3.4s ease-in-out infinite; }
.ma-tile-b { animation: maTileFloatB 3.4s ease-in-out infinite; }
.ma-avatar {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.ma-avatar svg { width: 70%; height: 70%; }
.ma-avatar-a svg { fill: var(--primary); }
.ma-avatar-b svg { fill: var(--primary-2); }
.ma-rec {
  position: absolute; top: 8px; left: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.55);
  animation: maRecPulse 1.6s ease-out infinite;
}
.ma-cam {
  position: absolute; top: 7px; right: 7px;
  color: var(--primary-fg);
  background: var(--primary);
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.ma-cam svg { width: 13px; height: 13px; }
.ma-beam {
  position: relative;
  width: 44px; height: 3px;
  background: linear-gradient(90deg,
    rgba(34,136,145,.0)  0%,
    rgba(34,136,145,.55) 50%,
    rgba(34,136,145,.0)  100%);
  border-radius: 3px;
  overflow: hidden;
}
.ma-beam-pulse {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 14px; margin-top: -7px; margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary) 0%, rgba(34,136,145,0) 70%);
  animation: maBeamMove 1.6s ease-in-out infinite;
}
@keyframes maTileFloatA {
  0%, 100% { transform: translateY(0)    rotate(-1.5deg); }
  50%      { transform: translateY(-4px) rotate(-2.5deg); }
}
@keyframes maTileFloatB {
  0%, 100% { transform: translateY(-2px) rotate(1.5deg); }
  50%      { transform: translateY(2px)  rotate(2.5deg); }
}
@keyframes maRecPulse {
  0%   { box-shadow: 0 0 0 0   rgba(239,68,68,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0);   }
  100% { box-shadow: 0 0 0 0   rgba(239,68,68,0);   }
}
@keyframes maBeamMove {
  0%   { left: 0%;   opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Below-card grouped block: trust pills + lead text as a tight column */
.hero-below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 12px auto 0;
  max-width: 560px;
  padding: 0 16px;
  text-align: center;
}
.trust-bar-below {
  margin: 0;
  justify-content: center;
}
.hero-below .lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  opacity: .8;
}

@media (max-width: 640px) {
  .mode-anim-stage { height: 110px; margin-bottom: 52px; }
  .ma-mic-wrap { width: 64px; height: 64px; }
  .ma-mic { width: 46px; height: 46px; }
  .ma-mic svg { width: 22px; height: 22px; }
  .ma-ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .ma-eq { height: 50px; }
  .ma-tile { width: 66px; height: 86px; border-radius: 12px; }
  .ma-beam { width: 32px; }
  .ma-bubble { font-size: 11.5px; padding: 6px 10px; }
  .ma-text-l { padding-left: 8%; }
  .ma-text-r { padding-right: 8%; }
}

/* ── 2. Hero live count ── */
.hero-live {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(34,136,145,.08); border: 1px solid rgba(34,136,145,.2);
  border-radius: 999px; padding: 6px 16px;
  font-size: 13px; font-weight: 700; color: var(--primary);
  margin-bottom: 16px; cursor: default; user-select: none;
}
:root[data-theme="dark"] .hero-live {
  background: rgba(74,179,189,.1); border-color: rgba(74,179,189,.25);
}
.hero-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  animation: heroDotPulse 2s ease-in-out infinite;
}
@keyframes heroDotPulse {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,.65); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0);   }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0);   }
}

/* ── 3. Hierarchical CTAs ── */
.cta-stack {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 340px; margin: 0 auto;
}
.cta-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--primary); color: var(--primary-fg);
  border: 2.5px solid var(--primary);
  padding: 17px 0; border-radius: 14px;
  font-size: 19px; font-weight: 900; font-family: inherit; letter-spacing: -.01em;
  cursor: pointer; text-decoration: none; width: 100%;
  box-shadow: 0 10px 30px rgba(34,136,145,.28);
  transition: transform .12s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.cta-primary:hover {
  transform: translateY(-2px); box-shadow: 0 16px 40px rgba(34,136,145,.42);
  text-decoration: none; color: var(--primary-fg);
}
.cta-primary:active { transform: translateY(0); }
.cta-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--text-2);
  border: 2px solid var(--border);
  padding: 11px 28px; border-radius: 12px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.cta-secondary:hover {
  border-color: var(--primary); color: var(--primary);
  background: rgba(34,136,145,.06); text-decoration: none;
}
.btn-lbl { pointer-events: none; }

/* ── 4. Inline trust bar ── */
.trust-bar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 10px;
  font-size: 12px; font-weight: 700; color: var(--text-2);
  opacity: .8; margin-top: 14px;
}
.trust-bar span:not(.tb-sep) { white-space: nowrap; }
.tb-sep { opacity: .3; }

/* ── 5. Play wrap ── */
.play-wrap { margin-top: 20px; display: flex; justify-content: center; }

/* ── 6. Mod pill at bottom of hero card ── */
.hero-card .mod-pill { margin-top: 16px; }

/* ── 7. FAQ — animated chevron + open state highlight ── */
.faq details {
  background: var(--panel); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 8px;
  border: 1px solid var(--border); transition: border-color .18s, background .18s;
}
.faq details[open] { border-color: var(--primary); background: var(--panel-2); }
.faq summary {
  cursor: pointer; font-weight: 700; color: var(--text);
  font-size: 15px; line-height: 1.4;
  padding-right: 28px; position: relative;
  list-style: none; user-select: none; transition: color .15s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 8px; height: 8px;
  border-right: 2.5px solid var(--text-2); border-bottom: 2.5px solid var(--text-2);
  transform: translateY(-72%) rotate(45deg);
  transition: transform .22s, border-color .15s; border-radius: 1px;
}
.faq details[open] summary { color: var(--primary); }
.faq details[open] summary::after {
  transform: translateY(-22%) rotate(-135deg); border-color: var(--primary);
}
.faq p { margin: 10px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.65; }

/* ── 8. Comparison table partial/warn class ── */
.compare-tbl td.partial { color: var(--warn); font-weight: 700; }
.compare-tbl tr:last-child td { border-bottom: none; }
.compare-note {
  font-size: 13px; color: var(--text-2);
  margin-top: 10px; text-align: center;
}
.compare-note a { color: var(--primary); font-weight: 700; }

/* ── 9. Footer grid ── */
footer.site-foot {
  background: var(--panel-2); border-top: 1px solid var(--border);
  padding: 52px 24px 32px; margin-top: 64px; text-align: center;
  content-visibility: auto;
  contain-intrinsic-size: 0 320px;
}

/* ── Sticky footer for static pages (Terms / Privacy) and blog posts ── */
/* Uses :has() to scope layout so footer always sits at the bottom */
body:has(.privacy-content),
body:has(.blog-post-page) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body:has(.privacy-content) .privacy-content,
body:has(.blog-post-page) .blog-post-page {
  flex: 1 0 auto;
}
body:has(.privacy-content) footer.site-foot,
body:has(.blog-post-page) footer.site-foot {
  margin-top: 0;
  flex-shrink: 0;
}
.foot-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 28px 36px; max-width: 920px;
  margin: 0 auto 40px; text-align: left;
}
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-head {
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); margin: 0 0 5px;
}
.foot-col a {
  font-size: 13px; color: var(--text-2); text-decoration: none;
  transition: color .12s; line-height: 1.35;
}
.foot-col a:hover { color: var(--primary); text-decoration: none; }
.foot-bottom {
  border-top: 1px solid var(--border); padding-top: 22px;
  font-size: 13px; color: var(--text-2);
}
.foot-bottom p { margin: 0 0 8px; font-weight: 700; color: var(--text); }
.foot-bottom small { font-size: 11px; color: var(--muted); line-height: 1.55; display: block; }

@media (max-width: 700px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  footer.site-foot { padding: 36px 16px 28px; margin-top: 48px; }
}

/* ── 10. Hero card mobile: tighter so primary CTA is above fold ── */
@media (max-width: 640px) {
  .hero-card { padding: 28px 18px 26px; border-radius: 22px; }
  .hero-anim { margin-bottom: 14px; }
  .ha-face { width: 44px; height: 44px; }
  .ha-line { padding: 0 10px; gap: 5px; }
  .ha-dot { width: 7px; height: 7px; }
  .cta-primary { font-size: 17px; padding: 15px 0; }
  .cta-secondary { font-size: 14px; padding: 10px 20px; }
  .hero-live { font-size: 12px; padding: 5px 12px; margin-bottom: 12px; }
  .trust-bar { font-size: 11px; }
  .play-wrap { margin-top: 16px; }

  /* Landing on phones: the hero card alone fills the first screen
     (knot.chat-style). Nothing below the card peeks above the fold. */
  .hero { min-height: calc(100dvh - var(--topbar-h)); justify-content: center; padding: 20px 16px; }
  .hero-below { display: none; }
}

/* ── 11. Mode selector: segmented control + gradient Start CTA ── */

@keyframes mode-activate {
  from { transform: scale(0.88); opacity: 0.5; }
  to   { transform: scale(1);    opacity: 1;   }
}

/* ── Segmented control: full-width to match CTA button ── */
.mode-select {
  display: flex; align-items: center; gap: 4px;
  background: var(--panel-2); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  margin: 0 auto 14px;
  width: 100%; max-width: 340px;
}

/* ── Each button: flex-1 so all fill equal space, taller to match CTA ── */
.mode-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 18px 10px; border-radius: 10px;
  border: none; background: transparent;
  color: var(--muted); font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; line-height: 1;
  transition: background .2s cubic-bezier(.4,0,.2,1), color .18s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.mode-btn svg { flex-shrink: 0; transition: stroke .18s; }
.mode-btn:hover:not(.active) {
  background: rgba(34,136,145,.09); color: var(--primary);
}
.mode-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 3px 10px rgba(34,136,145,.32);
  animation: mode-activate .22s cubic-bezier(.34,1.56,.64,1) both;
}
.mode-btn.active svg { stroke: #fff; }

/* ── Big gradient Start Chatting button ── */
.cta-start {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 380px; margin: 0 auto;
  padding: 26px 52px; border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 22px; font-weight: 900;
  font-family: inherit; letter-spacing: -.02em; text-decoration: none;
  box-shadow: 0 12px 36px rgba(34,136,145,.46);
  transition: opacity .15s, transform .12s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.cta-start:hover {
  opacity: .93; transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(34,136,145,.55);
  text-decoration: none; color: #fff;
}
.cta-start:active { transform: translateY(0); }

@media (max-width: 640px) {
  .mode-select { max-width: 100%; }
  .mode-btn { padding: 20px 6px; font-size: 14px; gap: 5px; }
  .mode-btn svg { width: 16px; height: 16px; }
  .cta-start { font-size: 18px; padding: 22px 0; max-width: 100%; border-radius: 14px; }
}

/* prefers-reduced-motion: kill all hero/mode animations for accessibility
   and low-end device battery — zero JS needed */
@media (prefers-reduced-motion: reduce) {
  .mode-anim-stage * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-live-dot, .ma-typing i { animation: none !important; }
}

/* prefers-reduced-motion: stop all hero / mode animations for accessibility
   and low-end device battery — zero JS needed */
@media (prefers-reduced-motion: reduce) {
  .mode-anim-stage * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-live-dot, .ma-typing i { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   12. Hero product preview — two phone frames in the card
   ══════════════════════════════════════════════════════════ */
.hero-preview {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 22px auto 0; width: 100%; max-width: 320px;
}
.hp-frame {
  position: relative; width: 110px;
  background: var(--panel); border: 1.5px solid var(--border);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  flex-shrink: 0;
}
.hp-frame-b { transform: translateX(-8px); z-index: 0; opacity: .82; }
.hp-frame-a { z-index: 1; }
.hp-status-bar {
  display: flex; gap: 4px; padding: 8px 10px 4px;
  justify-content: flex-end;
}
.hp-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border);
}
.hp-video {
  height: 120px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hp-video-a {
  background: linear-gradient(135deg, #1a6b74 0%, #228891 50%, #2ab0bd 100%);
}
.hp-video-b {
  background: linear-gradient(135deg, #1a3a74 0%, #22558c 50%, #4285f4 100%);
}
.hp-avatar-ring {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
}
.hp-label {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text-2); padding: 5px 0 8px;
}
/* pulsing connection dots between frames */
.hp-connect-pulse {
  display: flex; flex-direction: column; gap: 4px; z-index: 2;
  margin: 0 -4px;
}
.hp-connect-pulse span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  animation: hpPulse 1.4s ease-in-out infinite;
}
.hp-connect-pulse span:nth-child(2) { animation-delay: .2s; }
.hp-connect-pulse span:nth-child(3) { animation-delay: .4s; }
@keyframes hpPulse {
  0%, 100% { opacity: .3; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════
   13. App promo section — English story + Google Play
   ══════════════════════════════════════════════════════════ */
.app-promo {
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 72px 24px;
  content-visibility: auto;
  contain-intrinsic-size: 0 420px;
}
.ap-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 60px;
}
.ap-text { flex: 1; min-width: 0; }
.ap-stat {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px;
}
.ap-num {
  font-size: 52px; font-weight: 900; line-height: 1;
  color: var(--primary);
}
.ap-label {
  font-size: 18px; font-weight: 700; color: var(--text-2);
}
.ap-heading {
  font-size: 28px; font-weight: 900; line-height: 1.25;
  color: var(--text); margin: 0 0 14px;
}
.ap-body {
  font-size: 16px; color: var(--text-2); line-height: 1.65;
  margin: 0 0 28px; max-width: 440px;
}
.ap-play-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #01875f; color: #fff;
  border-radius: 12px; padding: 12px 22px;
  text-decoration: none; font-family: inherit;
  box-shadow: 0 4px 14px rgba(1,135,95,.32);
  transition: background .15s, transform .12s, box-shadow .15s;
}
.ap-play-btn:hover { background: #016d4c; transform: translateY(-1px); text-decoration: none; color: #fff;
  box-shadow: 0 8px 22px rgba(1,135,95,.42); }
.ap-play-btn .pb-text { display: flex; flex-direction: column; line-height: 1.15; }
.ap-play-btn .pb-small { font-size: 10px; font-weight: 600; opacity: .75; letter-spacing: .05em; }
.ap-play-btn .pb-big { font-size: 16px; font-weight: 900; }

/* ── Two overlapping phone mockups ── */
.ap-phones {
  flex-shrink: 0; position: relative; width: 220px; height: 340px;
}
.ap-phone {
  position: absolute; bottom: 0;
  width: 155px; height: 280px; border-radius: 26px; overflow: hidden;
  border: 2px solid var(--border);
  box-shadow: 0 16px 48px rgba(0,0,0,.14);
  background: var(--panel-2);
}
.ap-phone-back {
  right: 0; top: 40px; transform: rotate(4deg);
  z-index: 0; opacity: .78;
}
.ap-phone-front {
  left: 0; bottom: 0; z-index: 1;
}
.ap-ph-notch {
  width: 60px; height: 10px; background: var(--border);
  border-radius: 0 0 8px 8px; margin: 0 auto;
}
.ap-ph-screen { padding: 8px 10px 12px; }
/* front phone: video frame */
.ap-ph-video-frame {
  height: 160px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, #1a6b74 0%, #228891 50%, #2ab0bd 100%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; position: relative;
}
.ap-ph-av {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
}
.ap-ph-self-cam {
  width: 44px; height: 56px; border-radius: 10px;
  background: linear-gradient(135deg, #1a3a74, #4285f4);
  position: absolute; bottom: 8px; right: 8px;
  border: 1.5px solid rgba(255,255,255,.3);
}
.ap-ph-controls {
  display: flex; gap: 8px; justify-content: center; padding-top: 4px;
}
.ap-ph-ctrl {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.ap-ph-red { background: #ff4757; color: #fff; }
.ap-ph-teal { background: var(--primary); color: #fff; }
/* back phone: chat bubbles */
.ap-ph-chat {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 0;
}
.ap-ph-bubble {
  max-width: 85%; font-size: 11px; font-weight: 600;
  padding: 7px 10px; border-radius: 12px; line-height: 1.4;
}
.ap-ph-r {
  background: var(--primary); color: #fff;
  border-bottom-right-radius: 3px; align-self: flex-end;
}
.ap-ph-l {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 3px; align-self: flex-start;
}

@media (max-width: 860px) {
  .ap-inner { gap: 32px; }
  .ap-num { font-size: 42px; }
  .ap-heading { font-size: 22px; }
}
@media (max-width: 640px) {
  .app-promo { padding: 48px 20px; }
  .ap-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  /* On mobile: side-by-side phones in a fixed-size container */
  .ap-phones {
    width: 260px; height: 310px; margin: 0 auto;
  }
  .ap-phone { width: 140px; }
  .ap-phone-back { top: 30px; right: 0; }
  .ap-phone-front { left: 0; bottom: 0; }
  .ap-speak-screen { padding: 6px 8px 10px; gap: 0; }
  .ap-speak-icon-wrap { width: 46px; height: 46px; margin-bottom: 7px; }
  .ap-speak-title { font-size: 13px; }
  .ap-speak-sub { font-size: 8.5px; margin-bottom: 8px; }
  .ap-gf-pill { font-size: 8.5px; padding: 5px 2px; }
  .ap-start-call-ui { font-size: 10px; padding: 8px 6px; }
  .ap-num { font-size: 40px; }
  .ap-heading { font-size: 20px; }
  /* hero preview: smaller on mobile */
  .hero-preview { max-width: 240px; }
  .hp-frame { width: 86px; }
  .hp-video { height: 90px; }
}


/* ══════════════════════════════════════════════════════════
   14. Video page splash preview (vc-splash)
   ══════════════════════════════════════════════════════════ */
.vc-splash {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
  background: var(--bg);
  transition: opacity .35s ease, transform .35s ease;
}
.vc-splash.vc-splash-out {
  opacity: 0; transform: scale(.97); pointer-events: none;
}
.vc-splash-frames {
  display: flex; gap: 12px; align-items: flex-end;
}
.vc-sf {
  position: relative; border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  flex-shrink: 0;
}
.vc-sf-a { width: 220px; height: 165px; }
.vc-sf-b { width: 160px; height: 120px; transform: translateY(10px); }
.vc-sf-blur {
  position: absolute; inset: 0;
  filter: blur(28px) brightness(.6);
  transform: scale(1.15);
}
.vc-sf-a .vc-sf-blur {
  background: linear-gradient(135deg, #1a6b74 0%, #228891 55%, #2ab0bd 100%);
}
.vc-sf-b .vc-sf-blur {
  background: linear-gradient(135deg, #1a3a74 0%, #22558c 55%, #4285f4 100%);
}
.vc-sf-av {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
}
.vc-sf-av svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.vc-sf-tag {
  position: absolute; bottom: 8px; left: 10px;
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.35); border-radius: 6px; padding: 2px 7px;
}
.vc-splash-cta {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.vc-splash-hint {
  font-size: 13px; color: var(--muted); margin: 0;
}
.vc-splash-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 32px; border-radius: 14px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 17px; font-weight: 900;
  font-family: inherit; letter-spacing: -.01em;
  box-shadow: 0 8px 28px rgba(34,136,145,.42);
  transition: opacity .15s, transform .12s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.vc-splash-btn:hover {
  opacity: .91; transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(34,136,145,.55);
}
.vc-splash-btn:active { transform: translateY(0); }
/* The splash must be inside a positioned parent */
.app { position: relative; }

/* ══════════════════════════════════════════════════════════
   15. Accurate "Speak Freely" phone mockups (ap-phones)
   ══════════════════════════════════════════════════════════ */
.ap-ph-light {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.10) !important;
}
.ap-ph-dark {
  background: #152227 !important;
  border-color: #253840 !important;
  box-shadow: 0 20px 56px rgba(0,0,0,.40) !important;
}
.ap-ph-notch {
  width: 54px; height: 10px; border-radius: 0 0 8px 8px;
  margin: 0 auto;
}
.ap-ph-notch-light { background: #e5e7eb; }
.ap-ph-notch-dark  { background: #253840; }

.ap-speak-screen {
  padding: 8px 10px 12px;
  display: flex; flex-direction: column; align-items: center;
  gap: 0; height: calc(100% - 20px);
}
.ap-online-badge {
  align-self: flex-end;
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; margin-bottom: 10px;
}
.ap-online-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4CAF50; flex-shrink: 0;
}
.ap-online-light { color: #228891; }
.ap-online-teal  { color: #4ab3bd; }

.ap-speak-icon-wrap {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.ap-icon-light { background: rgba(34,136,145,.10); }
.ap-icon-dark  { background: rgba(74,179,189,.12); }

.ap-speak-title {
  font-size: 15px; font-weight: 900; margin: 0 0 5px; text-align: center;
}
.ap-speak-dark-text  { color: #0e1116; }
.ap-speak-light-text { color: #e6e9ef; }

.ap-speak-sub {
  font-size: 9.5px; text-align: center; line-height: 1.5;
  margin: 0 0 12px;
}
.ap-sub-dark  { color: rgba(0,0,0,.5); }
.ap-sub-light { color: rgba(255,255,255,.55); }

.ap-connect-label {
  font-size: 10px; font-weight: 700; align-self: flex-start;
  margin-bottom: 6px;
}
.ap-cl-dark  { color: rgba(0,0,0,.45); }
.ap-cl-light { color: rgba(255,255,255,.45); }

.ap-gender-row {
  display: flex; gap: 5px; width: 100%; margin-bottom: 10px;
}
.ap-gf-pill {
  flex: 1; text-align: center; font-size: 9.5px; font-weight: 800;
  padding: 7px 4px; border-radius: 9px; cursor: default;
}
.ap-gf-active { background: #228891; color: #fff; }
.ap-gf-light  { border: 1.5px solid rgba(0,0,0,.15); color: rgba(0,0,0,.6); }
.ap-gf-dark   { border: 1.5px solid rgba(255,255,255,.18); color: rgba(255,255,255,.65); }

.ap-start-call-ui {
  width: 100%; padding: 10px 8px; border-radius: 13px;
  background: #228891; color: #fff;
  font-size: 11.5px; font-weight: 900;
  text-align: center; letter-spacing: .01em;
  margin-top: auto;
}

/* ══════════════════════════════════════════════════════════
   16. Speak Freely story section
   ══════════════════════════════════════════════════════════ */
.speak-story {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 72px 24px;
}
.ss-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 60px;
}
.ss-text { flex: 1; min-width: 0; }
.ss-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(34,136,145,.1); color: var(--primary);
  border: 1px solid rgba(34,136,145,.25);
  border-radius: 999px; padding: 5px 14px;
  font-size: 12px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 14px;
}
.ss-heading {
  font-size: 28px; font-weight: 900; line-height: 1.25;
  color: var(--text); margin: 0 0 14px;
}
.ss-body {
  font-size: 16px; color: var(--text-2); line-height: 1.65;
  margin: 0 0 20px; max-width: 440px;
}
.ss-features {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ss-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--text-2); font-weight: 600;
}
.ss-check {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(34,136,145,.15); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; flex-shrink: 0;
}
.ss-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 26px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 15px; font-weight: 800;
  font-family: inherit; text-decoration: none;
  box-shadow: 0 6px 20px rgba(34,136,145,.32);
  transition: opacity .15s, transform .12s;
}
.ss-cta:hover { opacity: .9; transform: translateY(-1px); text-decoration: none; color: #fff; }
/* 4-stat grid */
.ss-visual {
  flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; width: 280px;
}
.ss-stat-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  text-align: center;
}
.ss-sc-num {
  font-size: 30px; font-weight: 900; color: var(--primary);
  line-height: 1; margin-bottom: 5px;
}
.ss-sc-label {
  font-size: 11px; font-weight: 700; color: var(--text-2);
  line-height: 1.4;
}
@media (max-width: 860px) {
  .ss-inner { gap: 32px; }
  .ss-heading { font-size: 22px; }
  .ss-visual { width: 220px; gap: 10px; }
  .ss-sc-num { font-size: 24px; }
}
@media (max-width: 640px) {
  .speak-story { padding: 48px 20px; }
  .ss-inner { flex-direction: column; }
  .ss-visual { width: 100%; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .ss-stat-card { padding: 14px 10px; }
  .ss-sc-num { font-size: 20px; }
  .ss-sc-label { font-size: 9px; }
  .ss-heading { font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════
   VIDEO CHAT STORY — image left, text right
   ══════════════════════════════════════════════════════════ */
.vidchat-story {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 72px 24px;
  content-visibility: auto;
  contain-intrinsic-size: 0 360px;
}
.vcs-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; gap: 60px;
}

/* ── Left: browser mockup ── */
.vcs-preview-wrap {
  flex-shrink: 0; width: 400px;
}
.vcs-browser {
  border-radius: 16px; overflow: hidden;
  border: 1.5px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
  background: var(--panel);
}
.vcs-chrome {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.vcs-dots { display: flex; gap: 5px; flex-shrink: 0; }
.vcs-dots span { width: 11px; height: 11px; border-radius: 50%; }
.vcs-dots span:nth-child(1) { background: #ff5f57; }
.vcs-dots span:nth-child(2) { background: #ffbd2e; }
.vcs-dots span:nth-child(3) { background: #28ca41; }
.vcs-url {
  flex: 1; text-align: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 12px;
  font-size: 11px; font-weight: 600; color: var(--text-2);
}
.vcs-screen {
  background: var(--bg);
  padding: 14px 14px 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}

/* ── App-layout mock (actual /video chat UI) ── */
.vcs-app-mock {
  display: flex; overflow: hidden;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  min-height: 190px;
}
.vcs-vm-vcol {
  width: 38%; flex-shrink: 0; background: var(--panel-2);
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px;
}
.vcs-vm-tile {
  position: relative; flex: 1; border-radius: 8px; overflow: hidden;
}
.vcs-vm-self { flex: 0 0 36%; }
.vcs-vm-ccol {
  flex: 1; background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.vcs-vm-msgs {
  flex: 1; padding: 8px 10px; overflow: hidden;
}
.vcs-vm-promo {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.vcs-vm-promo-orb { width: 18px !important; height: 18px !important; border-radius: 4px; object-fit: contain; flex-shrink: 0; }
.vcs-vm-promo-name { font-size: 8px; font-weight: 800; color: var(--text); }
.vcs-vm-promo-sub { font-size: 7px; color: var(--muted); margin-top: 1px; }
.vcs-vm-irow {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 7px;
  border-top: 1px solid var(--border);
}
.vcs-vm-start {
  background: var(--primary); color: var(--primary-fg, #fff);
  font-size: 9px; font-weight: 800;
  padding: 5px 10px; border-radius: 6px; flex-shrink: 0; white-space: nowrap;
}
.vcs-vm-input {
  flex: 1; height: 20px; display: block;
  background: var(--panel-2); border-radius: 6px;
  border: 1px solid var(--border);
}
.vcs-vm-send {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); color: var(--primary-fg, #fff);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; flex-shrink: 0;
}
.vcs-topbar {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.vcs-tb-logo {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 800; color: var(--text);
}
.vcs-tb-logo-img {
  width: 20px; height: 20px; border-radius: 4px;
  object-fit: contain; flex-shrink: 0;
}
.vcs-tb-orb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cta-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: #fff; letter-spacing: -.03em;
}
.vcs-tb-mode {
  display: flex; gap: 2px;
  background: var(--panel-2);
  border-radius: 999px; padding: 3px;
  font-size: 11px; font-weight: 700;
}
.vcs-tb-mode span { padding: 4px 12px; border-radius: 999px; color: rgba(255,255,255,.45); }
.vcs-tp-active { background: var(--primary); color: var(--primary-fg, #fff) !important; }

/* The two overlapping video frames */
.vcs-frames {
  display: flex; align-items: flex-end; gap: 10px;
  width: 100%; justify-content: center;
}
.vcs-frame {
  position: relative; border-radius: 14px; overflow: hidden;
  flex-shrink: 0;
}
.vcs-fa { width: 50%; padding-top: 37%; }
.vcs-fb { width: 36%; padding-top: 27%; transform: translateY(10px); }
.vcs-blur {
  position: absolute; inset: -10%; border-radius: 14px;
  filter: blur(20px);
}
.vcs-blur-a {
  background: linear-gradient(135deg, #0f3625 0%, #149e6b 50%, #3ecf8e 100%);
}
.vcs-blur-b {
  background: linear-gradient(135deg, #0a251e 0%, #131c16 50%, #149e6b 100%);
}
.vcs-av {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.vcs-tag {
  position: absolute; bottom: 7px; left: 9px;
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.36); border-radius: 5px; padding: 2px 7px;
}
.vcs-hint {
  font-size: 11.5px; color: rgba(255,255,255,.42); text-align: center;
}
.vcs-start-mock {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #228891, #006c74);
  color: #fff; font-size: 13px; font-weight: 800;
  padding: 11px 28px; border-radius: 10px;
  box-shadow: 0 6px 22px rgba(34,136,145,.45);
  letter-spacing: -.01em;
}

/* ── Right: story text ── */
.vcs-text { flex: 1; min-width: 0; }
.vcs-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(34,136,145,.1); color: var(--primary);
  border: 1px solid rgba(34,136,145,.22);
  border-radius: 999px; padding: 5px 14px;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 14px;
}
.vcs-heading {
  font-size: 28px; font-weight: 900; line-height: 1.25;
  color: var(--text); margin: 0 0 14px;
}
.vcs-body {
  font-size: 16px; color: var(--text-2); line-height: 1.65;
  margin: 0 0 22px;
}
.vcs-features {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.vcs-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--text-2); font-weight: 600;
}
.vcs-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: rgba(34,136,145,.12); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; margin-top: 1px;
}
.vcs-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 28px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 16px; font-weight: 800;
  font-family: inherit; text-decoration: none;
  box-shadow: 0 6px 22px rgba(34,136,145,.32);
  transition: opacity .15s, transform .12s;
}
.vcs-cta:hover {
  opacity: .9; transform: translateY(-2px);
  text-decoration: none; color: #fff;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .vcs-inner { gap: 36px; }
  .vcs-preview-wrap { width: 310px; }
  .vcs-heading { font-size: 23px; }
}
@media (max-width: 640px) {
  .vidchat-story { padding: 48px 20px; }
  .vcs-inner { flex-direction: column; }
  .vcs-preview-wrap { width: 100%; }
  .vcs-heading { font-size: 20px; }
  .vcs-body { font-size: 15px; }
  .vcs-cta { width: 100%; justify-content: center; }
}

/* ── Logo spinner mobile ── */
@media (max-width: 640px) {
  .logo-spinner { width: 76px; height: 76px; }
  .ls-core { width: 44px; height: 44px; }
  .ls-text { font-size: 14px; }
}

/* ============================================================
   MESSAGE INTERACTIONS — Reply + Emoji Reactions
   Industry-standard patterns: iMessage / Telegram / WhatsApp UX.
   ============================================================ */

/* ── Message row wrapper ─────────────────────────────────── */
.msg-row {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  position: relative;
  /* gap between reply-quote + bubble */
}
.msg-row.me   { align-self: flex-end;  align-items: flex-end; }
.msg-row.them { align-self: flex-start; align-items: flex-start; }
.msg-row.sys  { align-self: center; max-width: 100%; }

/* ── Update existing .msg to live inside .msg-row ── */
.msg-row .msg {
  align-self: unset;  /* row handles alignment */
  max-width: 100%;    /* bubble fills row width */
  position: relative;
}

/* ── Reply quote block (inside the bubble) ────────────────── */
.msg-reply-quote {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 6px;
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
  cursor: pointer;
  transition: opacity .15s;
}
.msg-reply-quote:hover { opacity: .82; }
.msg-reply-quote .rq-bar {
  width: 3px;
  flex-shrink: 0;
  background: rgba(255,255,255,.55);
  border-radius: 2px 0 0 2px;
}
.msg-row.them .msg-reply-quote .rq-bar {
  background: var(--primary);
}
.msg-reply-quote .rq-body {
  flex: 1; min-width: 0;
  background: rgba(0,0,0,.18);
  padding: 5px 9px;
  border-radius: 0 8px 8px 0;
}
.msg-row.them .msg-reply-quote .rq-body {
  background: rgba(34,136,145,.1);
}
.rq-who {
  font-size: 10.5px; font-weight: 800; margin-bottom: 2px;
  color: rgba(255,255,255,.85);
}
.msg-row.them .rq-who {
  color: var(--primary);
}
.rq-text {
  font-size: 11.5px; color: rgba(255,255,255,.72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-row.them .rq-text { color: var(--text-2); }

/* ── Hover action bar ─────────────────────────────────────── */
/* Positioned ABOVE the bubble so it never overflows the horizontal bounds
   of .chat-msgs (which has overflow-y:auto that also clips on X). */
.msg-actions {
  position: absolute;
  bottom: calc(100% + 4px); /* float above bubble */
  top: auto;
  transform: none;
  display: flex; gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 5px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  z-index: 10;
  opacity: 0; pointer-events: none;
  transition: opacity .14s;
  white-space: nowrap;
}
/* Bridge the 4px gap between the action bar bottom edge and the bubble top.
   Without this, the mouse briefly leaves both elements while crossing the gap
   and the action bar disappears before the cursor reaches it. */
.msg-actions::after {
  content: '';
  position: absolute;
  left: -8px; right: -8px;
  top: 100%;
  height: 12px; /* covers the 4px gap + 8px of bubble overlap */
}
/* Align to the same edge as the bubble */
.msg-row.me   .msg-actions { right: 0; left: auto; }
.msg-row.them .msg-actions { left: 0; right: auto; }

.msg-row:hover .msg-actions,
.msg-row:focus-within .msg-actions {
  opacity: 1; pointer-events: auto;
}
/* Touch: show on tap via .actions-open class toggled by JS */
.msg-row.actions-open .msg-actions {
  opacity: 1; pointer-events: auto;
}

.msg-action-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-2);
  font-size: 15px; line-height: 1;
  transition: background .12s, color .12s, transform .1s;
  padding: 0;
}
.msg-action-btn:hover {
  background: var(--panel-2); color: var(--primary);
  transform: scale(1.1);
}
.msg-action-btn svg { display: block; width: 14px; height: 14px; }

/* ── Emoji picker popup ───────────────────────────────────── */
/* position:fixed is set by JS so the picker is never clipped by
   any overflow:auto ancestor. The CSS just controls appearance. */
.emoji-picker-popup {
  position: fixed; /* JS overrides top/left/transform */
  z-index: 9999;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  padding: 8px 10px;
  display: flex; gap: 4px;
  animation: emojiPickerIn .16s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes emojiPickerIn {
  from { opacity: 0; transform: scale(.82) translateY(6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.ep-emoji-btn {
  width: 36px; height: 36px; border-radius: 8px;
  border: none; background: transparent;
  font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .1s, transform .1s;
  padding: 0;
}
.ep-emoji-btn:hover {
  background: var(--panel-2); transform: scale(1.18);
}

/* ── Reactions strip below bubble ─────────────────────────── */
.msg-reactions {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.msg-reaction-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .1s;
  user-select: none;
}
.msg-reaction-badge.mine {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--panel-2));
}
.msg-reaction-badge:hover { transform: scale(1.08); }
.msg-reaction-badge .rc-count {
  font-size: 11px; font-weight: 700; color: var(--text-2);
}
.msg-reaction-badge.mine .rc-count { color: var(--primary); }

/* ── Reply preview bar (above the input) ─────────────────── */
.reply-preview-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--panel-2));
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  animation: replyBarIn .18s ease both;
}
@keyframes replyBarIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reply-preview-bar .rp-content { flex: 1; min-width: 0; }
.reply-preview-bar .rp-label {
  font-size: 11px; font-weight: 800; color: var(--primary);
  margin-bottom: 2px;
}
.reply-preview-bar .rp-text {
  font-size: 12px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reply-preview-bar .rp-cancel {
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.reply-preview-bar .rp-cancel:hover {
  background: var(--border); color: var(--text);
}

/* ── Mobile: persistent quick-react button + tap-toggle action bar ── */
/* A small emoji button is always visible at the corner of each bubble
   so users don't need to discover long-press. */
.msg-quick-react {
  display: none; /* desktop: hidden (hover action bar is used) */
}
@media (hover: none) {
  /* On touch devices hover never fires — rely on tap-toggle only. */
  .msg-row:hover .msg-actions { opacity: 0; pointer-events: none; }
  .msg-row.actions-open .msg-actions { opacity: 1; pointer-events: auto; }
  .msg-action-btn { width: 34px; height: 34px; font-size: 18px; }
  .ep-emoji-btn   { width: 40px; height: 40px; font-size: 22px; }

  /* Always-visible quick-react button sits below the bubble, same side */
  .msg-quick-react {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    margin-top: 3px;
    transition: background .12s, transform .1s;
    flex-shrink: 0;
    /* position it inline under the bubble so it doesn't overflow */
  }
  .msg-quick-react:active { transform: scale(.9); }
  /* Place it on the message's own side */
  .msg-row.me   .msg-quick-react { align-self: flex-end; }
  .msg-row.them .msg-quick-react { align-self: flex-start; }
}

/* Emoji picker on mobile: bottom-anchored — handled by JS (position:fixed) */


/* ============================================================
   Premium / pre-start additions for /text (Razorpay gender filter).
   Loaded via /css/shared/premium.css; these are desktop-specific
   layout glue on top of the shared primitives.
   ============================================================ */

/* Logo-only brand on /text (and forthcoming /video, /stationtalk). */
.brand.brand-logo-only { gap: 0; font-size: 0; }
.brand.brand-logo-only img { width: 44px; height: 44px; border-radius: 9px; }
/* Dark mode (default): white logo for logo-only brand */
.brand.brand-logo-only img { content: url('/images/incogchat_white.webp'); }
/* Light mode: black logo */
:root[data-theme="light"] .brand.brand-logo-only img { content: url('/images/incogchat.webp'); }

/* ── Gender bottom-sheet modal (mirrors stationtalk UX) ──────────────────── */
/* Backdrop */
#preStart {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
}
#preStart[hidden] { display: none !important; }

/* Sheet */
.ps-sheet {
  width: 100%; max-width: 520px;
  background: var(--bg, #f5f7fa);
  border-radius: 28px 28px 0 0;
  padding: 32px 24px calc(40px + env(safe-area-inset-bottom, 0px));
  transform: translateY(0);
  transition: transform .26s cubic-bezier(.32,1,.55,1);
}

/* Centered card on desktop */
@media (min-width: 768px) {
  #preStart { align-items: center; }
  .ps-sheet { border-radius: 28px; max-width: 420px; padding-bottom: 32px; }
}

.ps-title {
  font-size: 26px; font-weight: 900;
  letter-spacing: -.03em;
  color: var(--text, #0e1116);
  margin-bottom: 6px;
}
.ps-sub {
  font-size: 14px; color: var(--muted, #6b7280);
  margin-bottom: 24px; line-height: 1.5;
}

/* Big emoji gender buttons */
.ps-gender-row { display: flex; gap: 14px; }
.ps-gender-btn {
  flex: 1; padding: 26px 16px;
  background: var(--panel, #fff);
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 20px;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  cursor: pointer;
  transition: border-color .15s, background .12s, transform .08s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ps-gender-btn:hover { border-color: var(--primary, #228891); background: var(--panel-2, #f0fafa); }
.ps-gender-btn:active { transform: scale(.96); }
.ps-gender-emoji { font-size: 42px; line-height: 1; display: block; }
.ps-gender-label {
  font-size: 16px; font-weight: 700;
  color: var(--text, #0e1116); letter-spacing: -.01em;
}

/* Warning text */
.ps-warn {
  margin-top: 18px;
  font-size: 12.5px; color: var(--muted, #6b7280);
  line-height: 1.5; text-align: center;
}

/* Google Play link */
.ps-play {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  background: var(--panel, #fff);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 99px;
  font-size: 14px; font-weight: 600;
  color: var(--text, #0e1116);
  text-decoration: none;
  transition: border-color .15s, background .12s;
  width: 100%;
  justify-content: center;
}
.ps-play:hover { border-color: var(--primary, #228891); text-decoration: none; }

/* Dark mode */
[data-theme="dark"] .ps-sheet { background: var(--panel, #1a1d23); }
[data-theme="dark"] .ps-gender-btn { background: var(--panel-2, #22262e); }

/* In-chat utility row (gender filter chip lives here) */
.chat-utility {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px 0;
    border-bottom: 0;
}

/* Composer Next button — only used on mobile (left of the input).
 * Desktop already has the big Skip button in .input-row, so this small
 * inline ⏭ is redundant and confusing — hide it on desktop. */
.send-btn.next-btn {
    background: var(--panel-2, #f7f8fb);
    color: var(--text, #0e1116);
    border: 1.5px solid var(--border, #e5e7eb);
    font-size: 14px;
    width: 38px; height: 38px;
    margin-right: 4px;
}
.send-btn.next-btn:hover {
    border-color: var(--primary, #228891);
    color: var(--primary, #228891);
}
@media (min-width: 980px) {
    .send-btn.next-btn { display: none !important; }
}

/* =========================================================================
 * Phase 1 — Safe Mode (NSFW filter) toggle pill + warning modal
 * ========================================================================= */
.filter-pill.safe-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.filter-pill.safe-mode-pill .sm-icon {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.filter-pill.safe-mode-pill.safe-on {
    background: linear-gradient(135deg, var(--primary, #228891), #1a6e75);
    color: #fff;
    border-color: transparent;
}
.filter-pill.safe-mode-pill.safe-off {
    background: rgba(160, 160, 160, 0.15);
    color: var(--text-mute, #888);
    border: 1px dashed rgba(180, 180, 180, 0.55);
}
.filter-pill.safe-mode-pill.safe-off .sm-label {
    text-decoration: line-through;
    text-decoration-color: rgba(220, 80, 80, 0.85);
    text-decoration-thickness: 2px;
}
.filter-pill.safe-mode-pill:hover { transform: translateY(-1px); }
.filter-pill.safe-mode-pill:active { animation: btn-tap 0.18s ease; }

/* Safe Mode confirmation modal */
.safe-mode-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.62);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    animation: sm-fade-in 0.18s ease;
}
.safe-mode-modal {
    width: min(92vw, 420px);
    background: var(--panel, #1a1d24);
    color: var(--text, #f1f1f1);
    border-radius: 18px;
    padding: 26px 24px 22px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    text-align: center;
    animation: sm-pop-in 0.22s cubic-bezier(.34,1.56,.64,1);
}
.safe-mode-modal .sm-warn-icon {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 8px;
}
.safe-mode-modal h3 {
    margin: 6px 0 12px;
    font-size: 1.15rem;
    font-weight: 700;
}
.safe-mode-modal p {
    margin: 6px 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-mute, #c8c8c8);
}
.safe-mode-modal p.sm-warn-age {
    color: #ff8a8a;
    font-size: 0.88rem;
    margin-top: 10px;
}
.safe-mode-modal .sm-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.safe-mode-modal .sm-btn {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.18s ease;
}
.safe-mode-modal .sm-btn:active { transform: scale(0.96); }
.safe-mode-modal .sm-cancel {
    background: var(--primary, #228891);
    color: #fff;
}
.safe-mode-modal .sm-confirm {
    background: rgba(220, 80, 80, 0.18);
    color: #ff8a8a;
    border: 1px solid rgba(220, 80, 80, 0.6);
}
.safe-mode-modal .sm-confirm:hover { background: rgba(220, 80, 80, 0.28); }
@keyframes sm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes sm-pop-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* =========================================================================
 * Phase 4 — Tap animations for Skip / Stop / Send buttons (desktop)
 * ========================================================================= */
@keyframes btn-tap {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.93); }
    100% { transform: scale(1); }
}
.start-btn:active,
.stop-btn:active,
.send-btn:active,
.next-btn:active {
    animation: btn-tap 0.18s ease;
}
.send-btn:active {
    filter: brightness(1.15);
}

/* ── Gender modal: selected state + confirm button ───────────────────────── */
.ps-gender-btn.selected {
  border-color: var(--primary, #228891);
  background: rgba(34,136,145,.10);
  transform: scale(.98);
}
[data-theme="dark"] .ps-gender-btn.selected {
  background: rgba(34,136,145,.18);
}
.ps-confirm-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 16px;
  background: var(--primary, #228891);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  font-family: inherit;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: opacity .15s, transform .08s;
  -webkit-tap-highlight-color: transparent;
}
.ps-confirm-btn:hover  { opacity: .88; }
.ps-confirm-btn:active { transform: scale(.97); }
.ps-confirm-btn:disabled {
  opacity: .32;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================================
 * /text WhatsApp-style onboarding bubbles
 * Lives inside #chatMsgs (desktop) or #mMsgs (mobile). System bubbles align
 * left, user-response bubbles align right. Actions render as pill buttons
 * directly under the prompting bubble (like a template message).
 * ========================================================================= */
.ot-onb-host { padding: 12px 10px 18px; }
.ot-onb-row {
  display: flex;
  margin: 4px 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}
.ot-onb-row.ot-onb-in { opacity: 1; transform: translateY(0); }
.ot-onb-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--panel, #fff);
  color: var(--text, #111);
  font-size: 15px;
  line-height: 1.4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
  border: 1px solid var(--border, rgba(0, 0, 0, .07));
  margin-right: auto;
}
.ot-onb-bubble.from-me {
  margin-left: auto;
  margin-right: 0;
  background: linear-gradient(135deg, #228891, #1a6b73);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
  border-color: transparent;
}
.ot-onb-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  min-width: 56px;
}
.ot-onb-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-2, rgba(0, 0, 0, .35));
  animation: ot-onb-blink 1.2s infinite ease-in-out;
}
.ot-onb-typing span:nth-child(2) { animation-delay: .15s; }
.ot-onb-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes ot-onb-blink {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}
.ot-onb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 2px;
  padding-left: 4px;
}
.ot-onb-actions.ot-onb-row { display: flex; }
.ot-onb-action {
  appearance: none;
  border: 1px solid var(--border, rgba(0, 0, 0, .15));
  background: var(--panel, #fff);
  color: var(--text, #111);
  border-radius: 999px;
  padding: 9px 16px;
  font: 600 14px/1 'Nunito', sans-serif;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.ot-onb-action:hover { background: rgba(34, 136, 145, .08); border-color: #228891; color: #228891; }
.ot-onb-action:active { transform: scale(.96); }
.ot-onb-action.is-primary {
  background: linear-gradient(135deg, #228891, #1a6b73);
  color: #fff;
  border-color: transparent;
  padding: 11px 22px;
  font-size: 15px;
  box-shadow: 0 3px 10px rgba(34, 136, 145, .25);
}
.ot-onb-action.is-primary:hover { background: linear-gradient(135deg, #1a6b73, #155a61); color: #fff; }

[data-theme="dark"] .ot-onb-bubble { background: var(--panel, #1a1d23); color: #e8eaed; border-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .ot-onb-action { background: rgba(255, 255, 255, .04); color: #e8eaed; border-color: rgba(255, 255, 255, .12); }

/* ============================================================
   Premium modal styling lives ONLY in /css/shared/premium.css
   (theme-aware, loaded after this file). The old transition/opacity
   overrides here conflicted with it and were removed for a single
   source of truth.
   ============================================================ */

/* Individual Blog Post Styles */
.post {
    max-width: 720px;
    margin: 24px auto;
    padding: 0 20px;
    color: var(--text-2);
    line-height: 1.65;
    font-size: 17px;
}

.post h1 {
    font-size: 32px;
    color: var(--text);
    margin: 12px 0 8px;
    line-height: 1.2;
}

.post .meta {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 24px;
}

.post h2 {
    color: var(--text);
    margin: 28px 0 8px;
    font-size: 22px;
}

.post h3 {
    color: var(--text);
    margin: 20px 0 6px;
    font-size: 18px;
}

.post p,
.post li {
    margin: 0 0 12px;
}

.post a {
    color: var(--primary);
}

.post a:hover {
    color: var(--primary-hover);
}

.cta-box {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    margin: 24px 0;
    text-align: center;
}

.cta-box p {
    color: var(--text) !important;
}

.cta-box a {
    display: inline-block;
    background: var(--primary);
    color: var(--primary-fg);
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
}

.cta-box a:hover {
    background: var(--primary-hover);
}

.post-foot {
    text-align: center;
    padding: 18px;
    color: var(--muted);
    font-size: 13px;
    border-top: 1px solid var(--border);
    margin-top: 24px;
}

.post-foot a {
    color: var(--muted);
}

.post-nav-link {
    color: var(--text-2);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.post-nav-link:hover {
    color: var(--primary);
}

.post-nav-link.active {
    color: var(--primary);
}

.post details {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 10px;
    background: var(--panel);
}

.post details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
}

.post details p {
    margin: 10px 0 0;
}