/* =========================================================
   CORE VARIABLES & RESET
   ========================================================= */
:root {

  --primary: #416180;
  --primary-dark: #2c455d;
  --primary-light: #d6ebff;
  --primary-glow: rgba(65, 97, 128, 0.15);
  --text-main: #0f172a;
  --text-muted: #64748b;
  --bg-white: #ffffff;
  --bg-off: #f8fafc;
  --border: #e2e8f0;
  --header-h: 44px;
  --subheader-h: 30px; /* item 1 (Jul 20): measured render height of .sub-header-tagline,
    which is position:fixed and was never accounted for anywhere -- that's why the hero
    section was starting UNDER it, not just with a small margin */
  --header-bg: #000e0e;
  --footer-bg: #000e0e;
  --logo-blue: #2563eb;
  --logo-purple: #7c3aed;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-xl: 0 30px 60px rgba(0,0,0,0.15);

  /* ── Newly cataloged (Jul 20 2026) -- colors already in real, repeated use across the
     stylesheet but never named. Definitions only for this tranche -- not replacing the
     literal hex values at their call sites yet, per Ram's instruction. ── */
  --brand-red: #e91418;        /* sampled from the logo's 'i', 1 flat value -- new this session */
  --text-dim-on-dark: #94a3b8; /* muted text color used specifically on dark backgrounds (18 uses) */
  --accent-teal: #5eead4;      /* bright teal accent -- badge dot/text (9 uses) */
  --panel-teal-1: #1e3535;     /* most common dark panel background tone (16 uses) */
  --panel-teal-2: #1a2e2e;     /* second most common dark panel background tone (8 uses) */

  --danger: #dc2626;
  --danger-mid: #ef4444;
  --danger-light: #f87171;
  --danger-bg: #fee2e2;

  --success: #16a34a;
  --success-light: #34d399;
  --success-bg: #dcfce7;

  --warning: #f59e0b;
  --warning-dark: #92400e;
  --warning-bg: #fef3c7;

  /* item 2 (Jul 20): viewport-height-relative spacing so the hero section adapts to
     actual available height on any device, instead of fixed px tuned to one screen. */
  --hero-v-gap-lg: clamp(14px, 2.2vh, 24px);
  --hero-v-gap-md: clamp(6px, 1vh, 12px);
  --hero-v-gap-sm: clamp(4px, 0.7vh, 8px);
  --hero-trailing-gap: clamp(8px, 1.3vh, 16px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Item 7: themed scrollbar for the main page, replacing the default white/grey OS chrome.
     Firefox via scrollbar-width/-color; Chrome/Edge/Safari via the ::-webkit-scrollbar rules
     below. Scoped to html specifically -- more specific selectors elsewhere (e.g. the
     fullscreen wrap's own scrollbar) still win regardless, this only sets the outer page. */
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--header-bg);
}
html::-webkit-scrollbar {
  width: 11px;
}
html::-webkit-scrollbar-track {
  background: var(--header-bg);
}
html::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 6px;
  border: 2px solid var(--header-bg);
}
html::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}
body {
  font-family: 'Barlow', sans-serif;
  color: var(--text-main);
  background: var(--bg-white);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

/* =========================================================
   HEADER
   ========================================================= */
/* Batch 23 item 2, root cause: .header-nav (position:absolute, top:var(--header-h)) is
   meant to drop down BELOW the header box on mobile, but its containing block is
   #site-header itself -- and overflow:hidden here (originally just to keep the sparkle
   ::before/::after streak contained) was clipping the ENTIRE dropdown to the header's own
   44px height. That's why the hamburger's X icon showed correctly (JS/class toggle was
   always firing) but no menu items ever appeared -- they were rendering, just clipped to
   zero visible height. Removed: #site-header already spans the full viewport width
   (left:0;right:0), so the sparkle's -50px/100% horizontal travel never actually risked
   overflowing the page even without this. */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: #fff;
  z-index: 500;
  border-bottom: 1px solid #afaab4;
}

/* Animated sparkle running along header bottom border — matches aivalue.in */
#site-header::before,
#site-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -50px;
  width: 50px;
  height: 1px;
  background: radial-gradient(circle, #ffd270 25%, transparent 50%);
  box-shadow:
    0 0 4px #ffd270,
    0 0 8px #ffd270,
    0 0 12px #ffd270;
  animation: sparkleFly 2s linear infinite;
}
#site-header::before { animation-delay: 0s; }
#site-header::after  { animation-delay: 1s; }

@keyframes sparkleFly {
  0%   { left: -50px; opacity: 0.7; }
  50%  { opacity: 1; }
  100% { left: 100%; opacity: 0.7; }
}

.header-inner {
  width: 100%;
  height: 100%;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  cursor: default;
}
.header-logo img { display: block; }
.header-vertical {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-left: 1px solid #afaab4;
  padding-left: 10px;
  line-height: 1;
}

/* Batch 26 item 2: margin-left:auto moved to .header-actions below -- .header-nav is now
   just the permanently-hidden #nav-dashboard link, and relying on ITS auto-margin was
   fragile (broke entirely on mobile, where a dead display:none rule removes it from
   the flex layout altogether). */
.header-nav {
  display: flex;
  gap: 0;
}
.header-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: #e2e8f0;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
  padding: 0 0.75rem;
  height: 70%;
  display: flex;
  align-items: center;
  position: relative;
}

.header-nav a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--logo-blue), var(--logo-purple));
  transition: width 0.3s ease;
}

.header-nav a:hover { color: #fff; }
.header-nav a:hover::after { width: 100%; }

.nav-permanent-hide {
  display: none !important;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.hbtn-ghost {
  font-size: 0.95rem;
  font-weight: 500;
  font-family: 'Barlow', sans-serif;
  color: #94a3b8;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
  padding: 0 0.75rem;
  height: 70%;
  display: flex;
  align-items: center;
}
.hbtn-ghost:hover { color: #fff; }
.hbtn-logout {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  color: #ef4444;
  background: transparent;
  border: 1px solid rgba(239,68,68,0.3);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hbtn-logout:hover {
  background: rgba(239,68,68,0.08);
  border-color: #ef4444;
}
.hbtn-primary {
  padding: 7px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  color: #030d0d;
  background: var(--primary);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.hbtn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }

/* User chip (authenticated) */
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(13,148,136,0.3);
  cursor: pointer;
  position: relative;
  font-size: 13px;
  color: #cbd5e1;
  transition: all 0.2s;
}
.user-chip:hover { border-color: var(--primary); color: #fff; }
.user-chip-dot {
  width: 7px; height: 7px;
  background: var(--primary);
  border-radius: 50%;
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #0a1f1f;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 12px;
  min-width: 200px;
  box-shadow: var(--shadow-xl);
  z-index: 600;
}
.user-dropdown-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  padding: 4px 8px;
}
.user-dropdown-expiry {
  font-size: 11px;
  color: #94a3b8;
  padding: 2px 8px 8px;
}
.user-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 6px 0;
}
.user-dropdown button {
  width: 100%;
  padding: 8px;
  background: none;
  border: none;
  color: #ef4444;
  font-size: 13px;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}
.user-dropdown button:hover { background: rgba(239,68,68,0.08); }

/* Batch 25 item 2: .hamburger/.nav-mobile-only removed entirely -- no hamburger anymore,
   .header-actions shows on mobile directly instead. */
.hbtn-mobile-login {
  display: none;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  color: #e2e8f0;
  background: transparent;
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 6px;
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  margin-left: 0;
  margin-right: 0;
}
.hbtn-mobile-login:hover { color: #fff; border-color: #fff; }

#trial-expired-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.trial-expired-box {
  background: #fff;
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--primary);
  padding: 36px 32px 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-xl);
}
.trial-expired-box--danger { border-top-color: var(--danger); }
.trial-expired-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--primary-glow);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.trial-expired-box--danger .trial-expired-icon { background: var(--danger-bg); color: var(--danger); }
.trial-expired-box h2 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text-main);
  line-height: 1.35;
}
.trial-expired-points {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trial-expired-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.trial-expired-points li i {
  color: var(--primary);
  font-size: 12px;
  margin-top: 3px;
  flex-shrink: 0;
}
.trial-expired-box--danger .trial-expired-points li i { color: var(--danger); }
.trial-expired-points li strong { color: var(--text-main); }
.trial-expired-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trial-expired-actions .hbtn-primary {
  width: 100%;
  padding: 12px 18px;
  font-size: 14.5px;
  border-radius: var(--radius-md);
}
.trial-expired-actions .hbtn-logout {
  width: 100%;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
}
.trial-expired-actions .hbtn-logout:hover { color: var(--text-main); background: var(--bg-off); }
.trial-expired-footnote {
  margin-top: 18px;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* =========================================================
   AUTH MODAL — light theme
   ========================================================= */
/* Batch 26 item 3, root cause: #lang-request-modal was never added to this selector,
   so it got none of the fixed/centered positioning and rendered in normal document flow
   (top-left of the page) instead. #plan-picker-modal added here directly, up front,
   specifically to not repeat that same mistake. */
#auth-modal, #confirm-modal, #lang-request-modal, #cancel-subscription-modal, #plan-picker-modal, #trial-form-modal, #demo-form-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
#auth-modal > .auth-box, #confirm-modal > .auth-box, #lang-request-modal > .auth-box, #cancel-subscription-modal > .auth-box, #plan-picker-modal > .plan-picker-box, #trial-form-modal > .auth-box, #demo-form-modal > .auth-box {
  margin: auto;
}
/* Batch 28 item 4, root cause: shared z-index (9000) put this BELOW .pex-fullscreen-overlay
   (9999) -- this modal specifically can be triggered from within the fullscreen demo (an
   unsupported language click), so it needs to render above it. */
#lang-request-modal {
  z-index: 10500;
}
/* Plan picker needs to stack ABOVE the trial-expired overlay (z-index 99999) -- it's
   triggered by clicking "Set up autopay" from underneath it, not by replacing it. This
   override MUST come after the shared selector block above, not before -- an earlier
   attempt placed it before that block, and since both target #plan-picker-modal's
   z-index with equal specificity, the LATER rule (the shared 9000 one) silently won,
   leaving the picker rendering correctly but invisibly behind the overlay on top of it.
   Confirmed exactly this via direct inspection, not guessed. */
#plan-picker-modal {
  z-index: 100000;
}
.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 13, 13, 0.7);
  backdrop-filter: blur(6px);
}
.auth-box {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 32px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  text-align: center;
  z-index: 1;
}
.auth-title {
  font-family: 'Barlow', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
  line-height: 1.3;
}
.auth-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.5;
}
/* Plan picker (Aug 2026), rebuilt compact -- was reusing .pricing-card-main/.pricing-sheet
   directly, tuned for the spacious marketing page, which made this modal tall enough to
   overflow a real browser viewport (confirmed live via screenshot, then reproduced and
   fixed via direct render testing). Dedicated compact classes instead, modeled on
   .action-modal-box's crisp convention (thin card, colored top border, no heavy
   ring/shadow) rather than the marketing cards. Side-by-side by default, wraps to
   stacked only on genuinely narrow phones. Confirmed via render test: fits fully within
   view with no scrolling needed on both a short desktop window and a phone screen.
   max-height/overflow kept as a silent safety net for a pathological short viewport --
   doesn't trigger at this size on a normal screen. */
.plan-picker-box {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--primary);
  padding: 32px 28px 26px;
  width: 100%;
  max-width: 640px;
  max-height: 95vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  text-align: center;
  z-index: 1;
}
.plan-picker-wrap {
  display: flex;
  gap: 14px;
  margin: 20px 0 22px;
  flex-wrap: wrap;
}
.plan-picker-card {
  flex: 1 1 240px;
  background: var(--text-main);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative;
  text-align: left;
}
.plan-picker-card:hover { transform: translateY(-2px); }
.plan-picker-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.2);
}
.plan-picker-card-highlight { border-color: rgba(13,148,136,0.35); }
.plan-picker-badge {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}
.plan-picker-name {
  font-family: 'Barlow Condensed', serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.plan-picker-price {
  font-family: 'Barlow Condensed', serif;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}
.plan-picker-period { font-size: 12px; font-weight: 400; color: #94a3b8; margin-left: 2px; }
.plan-picker-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: #94a3b8;
  padding: 5px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.plan-picker-row:first-of-type { border-top: none; }
.plan-picker-row strong { color: #fff; font-weight: 600; font-size: 12.5px; }
.plan-picker-confirm {
  width: 100%;
  max-width: 320px;
}
.plan-picker-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.action-modal-box {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--primary);
  padding: 32px 28px 26px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-xl);
  text-align: center;
  z-index: 1;
}
.action-modal-box--danger { border-top-color: var(--danger); }
.action-modal-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--primary-glow);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.action-modal-box--danger .action-modal-icon { background: var(--danger-bg); color: var(--danger); }
.action-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text-main);
  line-height: 1.35;
}
.action-modal-message {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 22px;
}
.action-modal-message strong { color: var(--text-main); }
.action-modal-points {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.action-modal-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.action-modal-points li i { color: var(--primary); font-size: 12px; margin-top: 3px; flex-shrink: 0; }
.action-modal-box--danger .action-modal-points li i { color: var(--danger); }
.action-modal-points li strong { color: var(--text-main); }
.action-modal-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  text-align: center;
  margin-bottom: 18px;
  outline: none;
  transition: border-color 0.2s;
}
.action-modal-input:focus { border-color: var(--primary); }
.action-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.action-modal-actions .hbtn-primary { width: 100%; padding: 12px 18px; font-size: 14.5px; border-radius: var(--radius-md); }
.action-modal-danger-btn {
  width: 100%;
  padding: 12px 18px;
  font-size: 14.5px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--danger);
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.action-modal-danger-btn:hover { background: #b91c1c; }
.action-modal-danger-btn:disabled {
  background: var(--danger-bg);
  color: var(--danger);
  cursor: not-allowed;
}
.action-modal-keep-btn {
  width: 100%;
  padding: 12px 18px;
  font-size: 14.5px;
  border-radius: var(--radius-md);
  border: none;
  background: #16a34a;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.action-modal-keep-btn:hover { background: #15803d; }
.action-modal-secondary-btn {
  width: 100%;
  padding: 12px 18px;
  font-size: 14.5px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.action-modal-secondary-btn:hover { color: var(--text-main); background: var(--bg-off); }

/* ── Billing: Plan & Subscription page (new, Chunk C) ── */
.billing-plan-line {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: var(--text-main);
  margin-bottom: 10px;
  line-height: 1.6;
}
.billing-plan-line:last-of-type { margin-bottom: 16px; }
.billing-plan-line i {
  position: absolute;
  left: 0;
  top: 3px; /* tuned to align with the first line of text at 14px/1.6 line-height */
  width: 18px;
  text-align: center;
}
.billing-plan-warning {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 10px 14px 10px 26px;
  border-radius: 8px;
}
.google-signin-wrap {
  display: flex;
  justify-content: center;
}
.google-signin-btn-el {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 10px 16px;
  background: #1f1f1f;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.google-signin-btn-el:hover { background: #303030; }
.google-signin-btn-el:disabled { opacity: 0.7; cursor: default; }
.google-signin-logo { flex-shrink: 0; }
.google-signin-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: google-signin-spin 0.7s linear infinite;
}
.google-signin-spinner.hidden { display: none; }
@keyframes google-signin-spin {
  to { transform: rotate(360deg); }
}
/* Fix: had no explicit size -- its entire clickable area came purely from the Font
   Awesome icon glyph's own rendered dimensions. Confirmed via direct render test: if the
   icon font is slow to load or fails, this collapses to a genuine 0x0 box -- present in
   the DOM, styled "visible", but with zero actual hit area, completely unclickable.
   Explicit size guarantees a real, always-present clickable target on every modal that
   uses this shared class, regardless of icon font load state. */
.auth-close-btn {
  position: absolute;
  top: 10px; right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.auth-close-btn:hover { color: var(--text-main); }
.auth-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.auth-title {
  font-family: 'Barlow Condensed', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  line-height: 1.3;
}
.auth-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.5;
}
.auth-field-group {
  text-align: left;
  margin-bottom: 14px;
}
.auth-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.auth-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: 'Barlow', sans-serif;
  color: var(--text-main);
  background: #fafafa;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.auth-primary-btn {
  width: 100%;
  padding: 12px 20px;
  background: var(--text-main);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
.auth-primary-btn:hover { background: var(--primary); transform: translateY(-1px); }
.auth-primary-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.auth-err {
  font-size: 13px;
  color: #dc2626;
  margin-top: 10px;
  padding: 8px 12px;
  background: #fef2f2;
  border-radius: 6px;
  border: 1px solid #fee2e2;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: #cbd5e1;
  font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-divider span { color: #94a3b8; }
.auth-link-btn {
  background: var(--bg-off);
  border: 1.5px solid var(--border);
  color: var(--text-main);
  font-size: 13px;
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  width: 100%;
  transition: all 0.2s;
  text-decoration: none;
}
.auth-link-btn:hover {
  background: var(--text-main);
  color: #fff;
  border-color: var(--text-main);
}

/* Success view */
.auth-success-icon {
  width: 52px; height: 52px;
  background: #d1fae5;
  color: #059669;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 16px;
}
.passphrase-reveal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
}
.passphrase-display {
  flex: 1;
  background: var(--bg-off);
  border: 1.5px dashed var(--primary);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: var(--primary-dark);
  letter-spacing: 0.05em;
  word-break: break-all;
  text-align: left;
}
.passphrase-copy-btn {
  padding: 10px 14px;
  background: var(--primary-light);
  color: var(--primary-dark);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.passphrase-copy-btn:hover { background: var(--primary); color: #fff; }
.copy-confirm {
  font-size: 12px;
  color: #059669;
  margin-bottom: 4px;
}
.auth-expiry-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}


/* =========================================================
   HERO SECTION
   ========================================================= */
.hero-section {
  /* item 1 (Jul 20): now the SAME variable driving the bottom padding below, so top and
     bottom headroom always match and both scale with actual viewport height. */
  margin-top: calc(var(--header-h) + var(--subheader-h) + var(--hero-v-gap-lg));
  /* item 2 (Jul 20): min-height removed entirely. It was fighting align-items:stretch --
     whenever actual content (cards / chat card) was shorter than one viewport, min-height
     became the dominant height source for BOTH columns instead of their real content,
     which is exactly what broke bottom-alignment. Verified by direct measurement: with
     min-height removed, pex-section's bottom lands within 0.02px of the 5th card's bottom.
     Trade-off: on a very tall screen with short content, the section may now render
     shorter than the full viewport (whitespace below it) rather than stretching to fill
     it -- correct alignment took priority over always-fill-the-screen. */
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  /* item 3 (Jul 19): stretch (grid's own default) instead of start -- both columns still
     share the same top either way, but stretch also makes .hero-visual's box fill the row
     track height, which #pex-section below fills in turn via height:100%. That's what
     replaces the JS measurement entirely -- native grid row-height matching, no JS needed. */
  align-items: stretch;
  gap: 60px;
  padding: var(--hero-v-gap-lg) 5% var(--hero-v-gap-lg);
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow-x: hidden; /* safety net -- wide unbreakable content in a column shouldn't be able to force the whole page to scroll sideways */
}
/* Real bug fix (Aug 11 2026): .hero-section's own display:grid !important
   above has EQUAL specificity to .hidden's display:none !important (both
   single-class selectors) -- with both using !important, source order
   decides the tie, and this file loads after chat.css (where .hidden is
   defined), so .hero-section always won and the marketing hero stayed
   visible after login regardless of openDashboard()'s hide-list correctly
   adding the .hidden class. A two-class compound selector has strictly
   higher specificity and wins outright, same pattern already used
   throughout this file for every other element with its own !important
   display rule (.google-signin-spinner.hidden, .agent-modal-overlay.hidden,
   etc.) -- this one was just missing. */
.hero-section.hidden { display: none !important; }
.hero-inner, .hero-visual {
  /* Grid items default to min-width:auto -- if either column's content is wider than its
     1fr share, it forces that track wider, breaking the 2-column layout. Same bug class
     already documented for flex children elsewhere in this file; identical fix. */
  min-width: 0;
}
.hero-inner { padding-top: 0; text-align: center; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0f172a;
  color: #5eead4;
  border: 1px solid rgba(13,148,136,0.35);
  padding: 9px 21px;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 0;
  margin-bottom: var(--hero-v-gap-md);
  box-shadow: 0 0 16px rgba(13,148,136,0.12);
  position: relative;
}
/* Small, secondary-feeling Explain button -- deliberately much smaller than the pill
   buttons used elsewhere (.hero-cards-explain-btn/.hiw-heading-explain-btn), since this
   one sits directly beside the hero badge and must read as a quiet "also, you can..."
   option, not compete with the badge for attention. */
.badge-explain-btn {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: var(--brand-red);
  border: 1px solid var(--brand-red);
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s;
}
.badge-explain-btn:hover { background: #cf1114; }
.hero-badge-dot {
  width: 8px; height: 8px;
  background: #5eead4;
  border-radius: 50%;
  animation: blink 2s infinite;
  box-shadow: 0 0 6px #5eead4;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.hero-title {
  font-family: 'Barlow Condensed', serif;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-top: 0;
  /* Item 1: deliberately its own value, not --hero-v-gap-md (shared with the badge above
     it) -- the badge-to-title gap and this title-to-cards gap were numerically identical
     (9px each, measured) but read as unequal because of the title's own visual weight
     sitting right above the gap. Bumped independently so it doesn't also change the
     badge's spacing. */
  margin-bottom: clamp(12px, 2vh, 20px);
}
.hero-title-line2-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hero-title-accent {
  color: var(--primary);
  position: relative;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
}
.hero-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 520px;
  margin-bottom: 36px;
  line-height: 1.7;
}
.hero-sub strong { color: var(--text-main); }
.hero-value-cards {
  display: flex;
  flex-direction: column;
  /* Item 1: reduced from --hero-v-gap-sm (a shared variable also used for each card's own
     internal padding and the button-row margin -- changing it directly would have shrunk
     those too) to a dedicated, smaller value, freeing up the space added to the title's
     margin-bottom above so the overall block height stays about the same. */
  gap: clamp(3px, 0.5vh, 6px);
  margin-bottom: var(--hero-trailing-gap);
  /* Fix for a real cross-browser overshoot bug: this and .hero-cards-controls below are
     both plain block children of .hero-inner and should always render at IDENTICAL
     widths, but without an explicit width/box-sizing pin, some browsers (confirmed
     Firefox, at some viewport widths) let one of the two compute a very slightly
     different content-box width than the other -- invisible most of the time, but
     enough at the boundary to make the Next button's right edge miss the cards' own
     right edge. Pinning both to width:100%; box-sizing:border-box explicitly removes
     any room for that divergence. */
  width: 100%;
  box-sizing: border-box;
}
/* Lightened a step from #0f172a/#133b37, plus a persistent soft highlight layered on top
   (separate from the existing animated .hero-card-sheen sweep -- that still runs, this
   just gives the card a constant glossy look between sweeps rather than only during
   them). Inset top-edge highlight also bumped up for a crisper glint. */
.hero-value-card {
  background: transparent;
  border: 1px solid rgba(29,31,32,0.16);
  border-radius: 0;
  padding: var(--hero-v-gap-sm) 14px;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  position: relative;
  overflow: visible;
  opacity: 0;
  transform: translateX(-12px);
  animation: heroCardSlideIn 0.5s ease forwards;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.hero-value-card > .corner {
  position: absolute; width: 11px; height: 11px;
  color: rgba(29,31,32,0.55);
}
.hero-value-card > .corner::before, .hero-value-card > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.hero-value-card > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.hero-value-card > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.hero-value-card > .corner.tl { top: -6px; left: -6px; }
.hero-value-card > .corner.tr { top: -6px; right: -6px; }
.hero-value-card > .corner.bl { bottom: -6px; left: -6px; }
.hero-value-card > .corner.br { bottom: -6px; right: -6px; }
.hero-card-sheen {
  position: absolute;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent);
  pointer-events: none;
  z-index: 2;
}
.hero-card-sheen.sheen-horizontal {
  top: 0; left: -60%;
  width: 50%; height: 100%;
  animation: heroCardSheenH 3.5s ease-in-out infinite;
}
.hero-card-sheen.sheen-vertical {
  top: -60%; left: 0;
  width: 100%; height: 50%;
  background: linear-gradient(210deg, transparent, rgba(255,255,255,0.28), transparent);
  animation: heroCardSheenV 3.5s ease-in-out infinite;
}
.hero-card-sheen.sheen-diagonal {
  top: -60%; left: -60%;
  width: 70%; height: 220%;
  transform: rotate(35deg);
  background: linear-gradient(200deg, transparent, rgba(255,255,255,0.28), transparent);
  animation: heroCardSheenD 3.5s ease-in-out infinite;
}
@keyframes heroCardSheenH {
  0% { left: -60%; }
  100% { left: 140%; }
}
@keyframes heroCardSheenV {
  0% { top: -60%; }
  100% { top: 140%; }
}
@keyframes heroCardSheenD {
  0% { left: -80%; top: -80%; }
  100% { left: 120%; top: 60%; }
}
.hero-value-card:nth-child(1) { animation-delay: 0.1s; }
.hero-value-card:nth-child(2) { animation-delay: 0.25s; }
.hero-value-card:nth-child(3) { animation-delay: 0.4s; }
.hero-value-card:nth-child(4) { animation-delay: 0.55s; }
.hero-value-card:nth-child(5) { animation-delay: 0.7s; }
@keyframes heroCardSlideIn {
  to { opacity: 1; transform: translateX(0); }
}
.hero-value-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.hero-value-icon {
  width: 26px; height: 26px;
  background: rgba(233,20,24,0.12); /* item 1/2 (Jul 20): swapped from teal to the logo's red --
    easy one-variable revert if it doesn't land well: change var(--brand-red) below back to #5eead4
    and this background back to rgba(94,234,212,0.15) */
  color: var(--brand-red);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.hero-value-card h4 {
  font-family: 'Barlow Condensed', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}
.hero-value-card p {
  width: 100%;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 3px;
  padding-left: 36px; /* aligns under the title, past the smaller icon */
  box-sizing: border-box;
}
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.hero-cta-btn {
  padding: 14px 28px;
  background: var(--text-main);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.2);
}
.hero-cta-btn:hover {
  background: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,148,136,0.3);
}
.hero-secondary-btn {
  padding: 14px 20px;
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.hero-secondary-btn:hover { border-color: var(--primary); color: var(--primary); }
.hero-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-trust span {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-trust i { color: var(--primary); }

/* Chat preview card */
/* Batch 19 item 1: badge is now a sibling of .pex-outer (moved out in HTML), so hero-visual
   needs to stack them vertically with a small gap instead of laying them out as flex row. */
.hero-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.chat-preview-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 360px;
  overflow: hidden;
}
.cp-header {
  background: var(--text-main);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cp-avatar {
  width: 36px; height: 36px;
  background: rgba(13,148,136,0.2);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 1px solid rgba(13,148,136,0.3);
  flex-shrink: 0;
}
.cp-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.cp-status {
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cp-dot {
  width: 6px; height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: blink 2s infinite;
}
.cp-messages {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  min-height: 240px;
}
.cp-msg {
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 85%;
  animation: fadeSlide 0.4s ease both;
}
.cp-msg.bot {
  background: #fff;
  color: var(--text-main);
  border-bottom-left-radius: 3px;
  box-shadow: var(--shadow-sm);
  align-self: flex-start;
}
.cp-msg.user {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 3px;
  align-self: flex-end;
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.cp-msg:nth-child(1) { animation-delay: 0.1s; }
.cp-msg:nth-child(2) { animation-delay: 0.3s; }
.cp-msg:nth-child(3) { animation-delay: 0.5s; }
.cp-msg:nth-child(4) { animation-delay: 0.7s; }
.cp-msg:nth-child(5) { animation-delay: 0.9s; }
.cp-msg:nth-child(6) { animation-delay: 1.1s; }
.cp-msg:nth-child(7) { animation-delay: 1.3s; }
.cp-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cp-languages {
  display: flex;
  gap: 6px;
}
.cp-languages span {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}
.cp-tagline {
  font-size: 10px;
  color: #94a3b8;
  letter-spacing: 0.05em;
}


/* =========================================================
   SHARED SECTION STYLES
   ========================================================= */
.section-pad {
  padding: 40px 5%;
}
.content-wrap {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.bg-off { background: var(--bg-off); }
/* Batch 23 item 7: section-label rebuilt to match .hero-badge's pill style exactly (dark
   fill, teal text, rounded, no blinking dot needed here since it's not "live status").
   display:flex + width:fit-content + margin:auto (not inline-flex + parent text-align)
   centers it independent of whatever the containing section does -- doesn't require every
   section's wrapper to also set text-align:center. */
.section-label {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #0f172a;
  color: #5eead4;
  border: 1px solid rgba(13,148,136,0.35);
  padding: 9px 21px;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 auto 16px;
  box-shadow: 0 0 16px rgba(13,148,136,0.12);
}
/* Batch 23 item 12: dot matches .hero-badge-dot exactly, same blink keyframe reused. */
.section-label-dot {
  width: 8px; height: 8px;
  background: #5eead4;
  border-radius: 50%;
  animation: blink 2s infinite;
  box-shadow: 0 0 6px #5eead4;
  flex-shrink: 0;
}
/* Batch 24 item 4: now matches .hero-title-line1 exactly (font-size, weight, nowrap) per
   Ram's request. white-space:nowrap is the hard guarantee of single-line display -- paired
   with shortened copy so it never needs to shrink awkwardly to fit. */
.section-title {
  font-family: 'Barlow Condensed', serif;
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-main);
  text-align: center;
  white-space: nowrap;
  margin-bottom: 16px;
}
/* Batch 26 item 6, root cause: max-width:600px with no margin:auto left the box itself
   flush-left once the parent exceeded 600px (any desktop viewport) -- text-align:center
   only centered text WITHIN that narrower box, not the box's own position. */
.section-sub {
  font-size: 1.05rem;
  color: var(--text-main);
  max-width: 600px;
  width: 100%;
  margin: 0 auto 24px;
  line-height: 1.7;
  text-align: center;
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */
/* Batch 23 item 8: switched from flex-row-with-connecting-arrows (only works cleanly for
   a single row) to a wrapping grid -- needed since the content rewrite went from 3 steps
   to 5, and 5 items with connecting arrows don't wrap to a second row cleanly. */
/* Batch 25 item 7 (corrected -- this belongs to How It Works, not the hero value cards):
   gap narrowed as much as reasonably possible, border darkened. */
/* Redesign: 2-column grid is now the universal default from the smallest phone up
   through 1149px -- explicit columns, not auto-fit, specifically so the 5th "Go Live"
   card's orphan position is predictable and can be reliably centered (see nth-child(5)
   rules below) instead of drifting between 2/3/4 columns depending on exact viewport
   width. Wide desktop (>=1150px) overrides to a single row of 5, same gap throughout --
   no special narrow-gap hack needed anymore, see the header-row note below. */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}
/* Card look is now permanent -- was hover-only (border/shadow only appeared on
   :hover); this is just the base state now, no :hover rule at all. Sizing uses
   clamp() throughout (padding, gap, badge diameter, both font-sizes) so nothing snaps
   abruptly at the 768px mobile boundary -- it scales continuously from phone to
   desktop instead. */
.step-card {
  background: transparent;
  border-radius: 0;
  padding: clamp(16px, 3vw, 30px) clamp(14px, 2.6vw, 26px);
  border: 1px solid rgba(29,31,32,0.16);
  box-shadow: none;
  position: relative;
  overflow: visible;
  /* Aug 2026: cards are now clickable (opens the Explain tour scoped to that step) --
     cursor + a small hover lift signal that, matching .hero-value-card's own pattern. */
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}
.step-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
}
.step-card > .corner {
  position: absolute; width: 11px; height: 11px;
  color: rgba(29,31,32,0.55);
}
.step-card > .corner::before, .step-card > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.step-card > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.step-card > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.step-card > .corner.tl { top: -6px; left: -6px; }
.step-card > .corner.tr { top: -6px; right: -6px; }
.step-card > .corner.bl { bottom: -6px; left: -6px; }
.step-card > .corner.br { bottom: -6px; right: -6px; }
.step-number {
  width: clamp(22px, 4vw, 40px);
  height: clamp(22px, 4vw, 40px);
  min-width: clamp(22px, 4vw, 40px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: clamp(11px, 1.6vw, 15px);
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -2px rgba(13,148,136,0.45);
}

/* Number badge stacks ABOVE the title now (was side-by-side) -- this is the actual
   fix for "Add Properties" wrapping to 2 lines at the wide 5-column layout: the title
   no longer competes with the badge for horizontal space, it gets the card's full
   width regardless of column count, so no gap/padding tightening is needed anywhere
   to make it fit (any such tightening from earlier attempts has been reverted). */
.step-header-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 1vw, 10px);
  margin-bottom: clamp(10px, 1.8vw, 18px);
}

.step-card h3 {
  font-family: 'Barlow Condensed', serif;
  font-size: clamp(13.5px, 2vw, 19px);
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0;
}
/* Scoped to step-card specifically -- .product-custom-list/li is shared with Customize
   Everything and Features, must not affect those sections' sizing. */
.step-card .product-custom-list {
  gap: clamp(4px, 0.8vw, 10px);
}
.step-card .product-custom-list li {
  font-size: clamp(11px, 1.4vw, 13.5px);
  line-height: 1.4;
}
.step-arrow {
  flex-shrink: 0;
  padding: 0 20px;
  padding-top: 60px;
  color: #cbd5e1;
  font-size: 18px;
}
/* Fix for a real centering bug: the previous .hiw-heading-row flex-wrapper centered the
   LABEL+BUTTON GROUP as a unit, which visibly shifted "How it works" left of true page
   center once the wider button sat beside it (the group's midpoint isn't the label's own
   midpoint). Scoped position:relative on just this section's label -- NOT the shared base
   .section-label rule, which stays untouched for Customize/Features/Pricing -- lets the
   button be positioned absolutely against the label's own box instead. An absolutely
   positioned child contributes zero width to its parent's layout, so .section-label's
   original unmodified margin:0 auto centering (see the base rule above) now centers
   correctly regardless of the button sitting beside it. */
.hiw-heading-explain-btn {
  /* !important on display/width/margin too, not just padding/font-size/gap below --
     this element also carries .hero-cards-explain-btn (for the shared red pill look),
     whose base rule sits later in the file and sets display:inline-flex with equal
     specificity. That silently won on the display property alone, and an inline-level
     box ignores margin:auto centering entirely -- which is why this was pinned to the
     left edge instead of centering, on both mobile and desktop. */
  display: flex !important;
  width: fit-content !important;
  margin: 10px auto 0 !important;
  white-space: nowrap;
  padding: 6px 14px !important;
  font-size: 13px !important;
  gap: 6px !important;
} 
/* Now always sits INSIDE the red .hero-cards-explain-btn pill (hero, How It Works, and
   Customize Everything all moved to this treatment) rather than below it on the white
   page -- color changed from muted-grey (tuned for a light background) to translucent
   white, matching .pex-autoplay-sublabel's own dark-background treatment. */
.explain-btn-label-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.explain-btn-main {
  font-size: inherit;
  font-weight: inherit;
}
.explain-btn-sublabel {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 1px;
  line-height: 1;
} 
/* How It Works "Explain" tour visual -- structured icon+label+description rows, revealed
   in two waves (see pexRevealHiwDetail1/2 in see-it-in-action.js) into the shared dark
   .hero-tour-stage (background: #142225), so text colors here are the light/dim-on-dark
   palette already used by .tour-bill-row for the same reason, not the light-page colors
   .step-card itself uses. Reuses .tour-row-in/tourRowIn (defined further down for the
   billing table) for the identical stagger-in animation -- no new keyframe needed. */
.hiw-detail-list {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hiw-detail-list.hero-tour-hidden { display: none !important; }
.hiw-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  opacity: 0;
  transform: translateY(6px);
}
.hiw-detail-row.tour-row-in {
  animation: tourRowIn 0.4s ease forwards;
}
.hiw-detail-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px -2px rgba(13,148,136,0.45);
  margin-top: 2px;
}
.hiw-detail-text h4 {
  font-family: 'Barlow Condensed', serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}
.hiw-detail-text p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim-on-dark);
  margin: 0;
}

/* "Go Live" (5th/last card) gets deliberately distinct styling -- dark gradient fill,
   inverted badge colors, light body text -- so the final step reads as a small premium
   payoff rather than identical to steps 1-4. Unconditional across all widths. */
.step-card:nth-child(5) {
  background: linear-gradient(135deg, #0f172a, #134e4a);
  border-color: rgba(94,234,212,0.35);
  box-shadow: 0 14px 32px -14px rgba(13,148,136,0.55);
}
.step-card:nth-child(5) h3 {
  color: #fff;
}
.step-card:nth-child(5) .step-number {
  background: #fff;
  color: var(--primary-dark);
  box-shadow: 0 4px 14px -2px rgba(0,0,0,0.35);
}
.step-card:nth-child(5) .product-custom-list li {
  color: rgba(255,255,255,0.85);
}
.step-card:nth-child(5) .product-custom-list li::before {
  color: #5eead4;
}
/* Shine sweep -- reuses the same diagonal-sheen technique already built for the hero
   value cards (see .hero-card-sheen/.sheen-diagonal), simplified to a static ::after
   since this is always exactly one fixed card (no JS random-variant picking needed
   the way the hero cards' randomized per-card sheen does). Marks Go Live as the
   premium final-step payoff. */
.step-card:nth-child(5)::after {
  content: '';
  position: absolute;
  top: -80%;
  left: -80%;
  width: 70%;
  height: 220%;
  transform: rotate(35deg);
  background: linear-gradient(200deg, transparent, rgba(255,255,255,0.22), transparent);
  pointer-events: none;
  z-index: 1;
  animation: heroCardSheenD 3.5s ease-in-out infinite;
}
/* Aug 2026: cards 2/3/4 now share card 4's EXACT styling instead of progressing through
   intermediate teal tones -- Ram found cards 2/3's in-between colors weren't reading
   well. Card 1 stays plain white, card 5 stays its own dark navy/teal, only 2 and 3
   were touched here (now identical to 4, not to each other via a separate calculation). */
.step-card:nth-child(2),
.step-card:nth-child(3),
.step-card:nth-child(4) {
  background: linear-gradient(135deg, #4b515f, #4e7a77);
}
.step-card:nth-child(2) h3,
.step-card:nth-child(2) .product-custom-list li,
.step-card:nth-child(3) h3,
.step-card:nth-child(3) .product-custom-list li,
.step-card:nth-child(4) h3,
.step-card:nth-child(4) .product-custom-list li {
  color: #f1f5f4;
}
.step-card:nth-child(2) .product-custom-list li::before,
.step-card:nth-child(3) .product-custom-list li::before,
.step-card:nth-child(4) .product-custom-list li::before {
  color: #5eead4;
}
/* Below 1150px the grid is always 2 columns (see .steps-grid above), so the 5th card
   of 5 is always alone on its own row -- span both columns then shrink-to-fit + center
   the card itself within that row, rather than either stretching full-bleed or sitting
   left-aligned in column 1. align-items (not justify-content) centers the header row
   now that it's a column flex, not a row flex. */
@media (max-width: 1149px) {
  .step-card:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: fit-content;
    max-width: 90%;
  }
  .step-card:nth-child(5) .step-header-row {
    align-items: center;
  }
}
/* Wide desktop: single row of 5, same gap as everywhere else -- no gap-tightening
   hack needed now that the header row stacks instead of competing for width. */
@media (min-width: 1150px) {
  .steps-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}


/* =========================================================
   FEATURES
   ========================================================= */
/* Batch 27 item 9: same trailing-gap fix as .product-custom-grid above. */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
  margin-bottom: var(--hero-trailing-gap);
}
.feature-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  border: 1px solid var(--border);
  transition: box-shadow 0.2s, transform 0.2s;
}
.feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.feature-card-cta {
  background: var(--text-main);
  border-color: transparent;
}
.feature-card-cta h3 { color: #fff !important; }
.feature-card-cta p { color: #94a3b8 !important; }
.feature-card-cta .feature-icon-wrap {
  background: rgba(255,255,255,0.08) !important;
  color: var(--primary) !important;
}
.feature-icon-wrap {
  width: 46px; height: 46px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 20px;
}
.feature-card h3 {
  font-family: 'Barlow Condensed', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}
.feature-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}
.feature-talk-btn {
  margin-top: 20px;
  padding: 9px 18px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.feature-talk-btn:hover { background: var(--primary-dark); }


/* =========================================================
   PRICING
   ========================================================= */
/* Batch 28 item 9, root cause: this was a 2-column grid (1.6fr/1fr) built for two cards
   -- .pricing-card-demo was removed at some point, leaving the lone .pricing-card-main
   stuck in the first column, flush left, with dead space where the second card used to be.
   Flex + centered + a sensible max-width replaces the leftover 2-column assumption. */
/* Aug 2026 rebuild: single lonely card -> two-card Pro/Pro Max comparison. Width now
   fills more of the section (was 70vw sized for one card; two cards need real room),
   capped so it doesn't run enormous on very wide monitors. */
.pricing-outer {
  max-width: 1100px;
  margin: 24px auto 0;
}
.pricing-wrap {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 28px;
}
.pricing-card-main {
  background: rgba(65,97,128,0.035);
  border: 1px solid rgba(29,31,32,0.16);
  border-radius: 0;
  padding: 40px 36px;
  position: relative;
  overflow: visible;
  flex: 1 1 380px;
  max-width: 460px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pricing-card-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(29,31,32,0.10);
  border-color: rgba(65,97,128,0.4);
}
.pricing-card-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 8px 0 0;
}
.pricing-card-main > .corner {
  position: absolute; width: 11px; height: 11px;
  color: rgba(29,31,32,0.55);
}
.pricing-card-main > .corner::before, .pricing-card-main > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.pricing-card-main > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.pricing-card-main > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.pricing-card-main > .corner.tl { top: -6px; left: -6px; }
.pricing-card-main > .corner.tr { top: -6px; right: -6px; }
.pricing-card-main > .corner.bl { bottom: -6px; left: -6px; }
.pricing-card-main > .corner.br { bottom: -6px; right: -6px; }

/* Corner registration marks removed from the wireframe look, kept but hidden --
   one rule overrides all four card types' .corner elements at once rather than
   touching each of the 8 markup insertion points individually. */
.corner { display: none; }
.pricing-card-highlight {
  border: 1.5px solid var(--primary);
}
.pricing-badge {
  position: absolute;
  top: 20px; right: 20px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}
.pricing-plan-name {
  font-family: 'Barlow Condensed', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}
/* Reconsidered from the earlier 15px tuning -- that fix was for a single lonely card
   where a big price read as an oversized, out-of-place headline with nothing else to
   balance it. Two side-by-side comparison cards is a different context: a legible,
   properly-sized price is the norm for this layout and won't reproduce the old
   complaint. Flag if you'd rather keep it small. */
.pricing-price {
  font-family: 'Barlow Condensed', serif;
  font-size: 34px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.pricing-currency {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}
.pricing-once {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
  font-family: 'Barlow', sans-serif;
}
.pricing-sheet {
  margin-bottom: 0;
}
.pricing-sheet-noborder { margin-bottom: 0; }
.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
}
.pricing-row-label {
  font-size: 13px;
  color: var(--text-muted);
}
.pricing-row-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  text-align: right;
}
/* Item 2 fix: label+value side-by-side wrapped awkwardly for longer "Best for" text --
   stacked layout (label above, value below, both left-aligned) instead of forcing it
   into the same row as the short numeric rows above it. */
.pricing-row-best {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(29,31,32,0.16);
}
.pricing-row-best .pricing-row-value {
  font-weight: 500;
  font-size: 13px;
  max-width: 100%;
  text-align: left;
}
.pricing-cta-btn {
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 22px;
  font-size: 12.5px;
  color: #fff;
  background: #0D1F3C;
  border-radius: 10px;
}
.pricing-cta-btn:hover { background: #08152a; color: #fff; }
.demo-consent-box {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
  background: rgba(29,31,32,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.demo-consent-check-row { margin-bottom: 16px; }
.demo-consent-check-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
}
.demo-consent-check-label input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  margin-top: 1px;
  flex-shrink: 0;
}
.overview-stat-card-warning {
  border: 1px solid #f59e0b;
  background: #fffbeb;
}
.billing-plan-switch { margin-top: 4px; }
.billing-switch-btn {
  font-size: 13px;
  padding: 6px 14px;
}
/* Item 1: shared feature list, sits once between the two cards and the footnotes
   instead of being duplicated inside each card. */
/* Item 1 (this round): shared box now matches the pricing cards' own dark theme
   (var(--text-main)) instead of a light off-white -- reads as one continuous family
   with the cards above it rather than a visually separate light strip. */
.pricing-shared {
  max-width: 948px;
  margin: 24px auto 0;
  background: transparent;
  border: 1px solid rgba(29,31,32,0.16);
  border-radius: 0;
  padding: 24px 32px;
}
.pricing-shared-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.pricing-shared-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}
.pricing-shared-list li {
  font-size: 14px;
  padding: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-muted);
}
.pricing-shared-list i { color: var(--primary); margin-top: 3px; flex-shrink: 0; }
/* Item 2 (this round): footnotes now matches .pricing-shared exactly (same
   var(--text-main) dark bg) instead of a separate near-black shade -- all three
   pieces (cards, shared list, footnotes) now share one consistent dark tone. */
/* Item 1 (this round): light + dull, in deliberate contrast to the dark cards/shared
   box above it -- a muted grey rather than --bg-off's near-white, so it reads as a
   quiet closing note rather than another bright panel. */
.pricing-footnotes {
  max-width: 948px;
  background: #e9ebea;
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  margin: 16px auto 0;
}
.pricing-list li {
  font-size: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #cbd5e1;
}
.pricing-card-main .pricing-list li:last-child { border-bottom: none; }
.pricing-list i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.pricing-main-btn {
  width: 100%;
  padding: 14px 24px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pricing-main-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }

.pricing-card-demo {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.pricing-demo-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.pricing-card-demo h3 {
  font-family: 'Barlow Condensed', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}
.pricing-demo-price {
  font-size: 28px;
  font-weight: 800;
  font-family: 'Barlow Condensed', serif;
  color: var(--primary);
  margin-bottom: 24px;
}
.pricing-card-demo .pricing-list li {
  color: var(--text-muted);
  border-bottom-color: var(--border);
}
.pricing-card-demo .pricing-list li:last-child { border-bottom: none; }
.pricing-demo-hint {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

/* Interest toast */
.interest-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-main);
  color: #fff;
  padding: 14px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 8000;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.interest-toast i { color: var(--primary); }

.sub-header-tagline {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 49;
  background: linear-gradient(90deg, #f8fafc 60%, #eef2f1 100%);
  border-bottom: 1px solid rgba(65,97,128,0.18);
  text-align: left;
  padding: 5px 1rem;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: var(--text-main);
  text-transform: none;
}
/* =========================================================
   FOOTER — dark, matches aivalue.in
   ========================================================= */
#site-footer {
  background: #fff;
  border-top: 1px solid #afaab4;
}
.footer-inline {
  width: 100%;
  padding-top: 6px;
  padding-bottom: 6px;
  color: var(--text-muted);
  box-sizing: border-box;
  align-items: center;
}
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
}
.footer-left {
  font-size: 0.85rem;
  font-weight: 400;
  text-align: left;
  flex: 1;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .section-title { font-size: clamp(1.4rem, 5vw, 1.9rem); }
  section, .footer-section {
    width: 100%;
    overflow-x: hidden;
  }
}

@media (max-width: 768px) {
  /* Batch 26 item 2: the .header-nav dropdown-positioning rules above were dead code --
     nothing has toggled .mobile-open since the hamburger was removed in Batch 25. Removed
     entirely. .header-actions right-alignment on mobile now comes from its own
     margin-left:auto (see base rule), not from anything mobile-specific here. */

  /* Stack hero into a single column */
  .hero-section {
    /* The desktop rule uses grid-template-columns: 1fr 1fr !important -- this override
       needs !important too, or it silently loses regardless of media query specificity.
       This was the entire root cause of mobile staying 2-column. */
    grid-template-columns: 1fr !important;
    gap: 32px;
    /* Batch 21: symmetric top/bottom padding (was 24px/40px) -- same "equal margins"
       principle applied to the pex-outer box back in Batch 20 item 1. */
    padding: 24px 5%;
    /* Batch 21: was missing --subheader-h -- only accounted for the fixed header, not the
       fixed tagline banner below it, which also needs subtracting for the min-height math
       below (on .hero-inner/.hero-visual) to be accurate against real available viewport. */
    margin-top: calc(var(--header-h) + var(--subheader-h) + 16px);
    min-height: auto;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
  }
  /* Batch 22: REVERTED. Forcing min-height:100vh on .hero-visual gave real leftover space
     to the pre-existing desktop-only flex:1 chain (#pex-section -> .pex-hero-card ->
     .pex-messages, built for desktop's column stretch-fill), which cascaded all the way
     down and inflated the empty message area on mobile. justify-content:center on
     .hero-inner then padded the hero content block out with dead space above/below since
     its real content was shorter than the forced min-height. Both of Ram's "big margin
     top/bottom" and "message area too tall" reports on Jul 20 traced back to this single
     addition. Mobile now goes back to natural content-driven height for both blocks --
     no artificial full-screen forcing. */
  .hero-inner, .hero-visual, .pex-badge-row, .pex-outer, .pex-hero-card, .pex-scenario-tabs, .pex-feature-badge {
    width: 100%;
    max-width: 100%;
    min-width: 0;   /* THE actual fix: .hero-visual/.pex-outer are CSS GRID items (children of
                       .hero-section), and grid items default to min-width:auto -- meaning even
                       with width:100% set, they refuse to shrink below whatever a descendant's
                       unshrinkable content needs. .hero-section's overflow-x:hidden then silently
                       CLIPS that excess instead of scrolling it -- that's the truncation. Fixing
                       only .pex-scenario-tabs (prior round) wasn't enough because the same
                       min-width:auto trap exists one and two levels further up this exact chain. */
    box-sizing: border-box;
  }
  .hero-visual { display: flex; justify-content: center; }
  .pex-outer { align-items: center; }

  /* Item 10: How It Works — grid/card/header-row sizing now lives entirely in the
     unconditional base rules above (clamp()-based, scales smoothly through this
     breakpoint instead of snapping; column-count and Go Live centering also handled
     there). Only the dead connector-arrow needs hiding here. */
  .step-arrow {
    display: none; /* horizontal connector arrows don't make sense stacked */
  }

  /* Item 8: hero value cards stack to 1 column on mobile */
  .hero-value-cards {
    grid-template-columns: 1fr;
  }

  /* Item 6: center "For Builders..." badge (was left-aligned inside block-flow .hero-inner)
     and bump both hero badges' size for visibility on mobile. */
  .hero-badge {
    display: flex;
    width: fit-content;
    margin: 0 auto 16px;
    font-size: 16px;
    padding: 9px 20px;
  }
  .pex-section-badge {
    font-size: 14px;
    padding: 8px 20px;
  }
}

@media (max-width: 480px) {
  .hero-title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .hero-title-accent { font-size: clamp(1.1rem, 5vw, 1.5rem); }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-btn, .hero-secondary-btn { text-align: center; justify-content: center; }
  /* Item 3: side-by-side instead of stacked -- needs a genuinely compact card variant
     (smaller padding/type), not the same card just squeezed to half-width, or content
     would overflow on narrow phones. flex-wrap on the price guards the narrowest
     screens (~360px) where currency+number+"/month" together could overflow a single
     line -- "/month" drops to its own line there instead of clipping. */
  .pricing-wrap { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .pricing-card-main { padding: 16px 14px; flex: 1 1 0; max-width: none; width: auto; margin: 0; min-width: 0; }
  .pricing-plan-name { font-size: 15px; margin-bottom: 6px; }
  .pricing-price { font-size: 24px; margin-bottom: 14px; gap: 2px; flex-wrap: wrap; }
  .pricing-currency { font-size: 14px; }
  .pricing-once { font-size: 10px; margin-left: 2px; }
  /* Item 2: label and value stacked onto two rows for the numeric rows (not just
     .pricing-row-best, which already stacks) -- side-by-side was too cramped at
     mobile card width. */
  .pricing-row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 0; }
  .pricing-row-label { font-size: 10.5px; }
  .pricing-row-value { font-size: 12.5px; text-align: left; }
  .pricing-row-best .pricing-row-value { font-size: 10.5px; }
  .pricing-badge { font-size: 9px; padding: 3px 8px; top: 12px; right: 12px; }
  .pricing-shared { max-width: 480px; padding: 20px 22px; }
  .pricing-shared-list { grid-template-columns: 1fr; }
  .pricing-footnotes { max-width: 480px; padding: 18px 22px; }
  #auth-modal {
    align-items: center;
    padding: 20px;
  }
  .auth-box { padding: 32px 20px; width: 100%; }
}

/* ── Agent Management ─────────────────────────────────────── */
.agents-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.btn-create-agent {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: opacity 0.2s;
}
.btn-create-agent:hover { opacity: 0.85; }

.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.agent-card {
  background: #0d1f1f;
  border: 1px solid #1e3535;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s;
}
.agent-card:hover { border-color: #2e5555; }
.agent-card.is-default {
  border-color: #2a4a3a;
  background: #0b1e17;
}

.agent-card-create {
  border: 1.5px dashed #2a4a4a;
  background: transparent;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}
.agent-card-create:hover { border-color: var(--primary); background: rgba(13,148,136,0.04); }
.agent-card-create-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.agent-card-create-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(13,148,136,0.1);
  border: 1px solid rgba(13,148,136,0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); font-size: 16px; transition: background 0.2s;
}
.agent-card-create:hover .agent-card-create-icon { background: rgba(13,148,136,0.2); }
.agent-card-create-label { font-size: 14px; font-weight: 600; color: #e2e8f0; }
.agent-card-create-sub { font-size: 12px; color: #64748b; line-height: 1.5; }

.agent-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.agent-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.3;
}

.agent-card-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  background: #1a3a2a;
  color: #4ade80;
  border: 1px solid #2a5a3a;
}
.agent-card-badge-custom {
  background: #1a2a3a;
  color: #60a5fa;
  border-color: #2a3a5a;
}
.btn-agent-delete:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.agent-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agent-card-meta-row {
  font-size: 12px;
  color: #8892a4;
  display: flex;
  gap: 6px;
}
.agent-card-meta-row span {
  color: #b0bec5;
}

.agent-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.btn-agent-configure,
.btn-agent-open,
.btn-agent-delete {
  flex: 1;
  border: none;
  border-radius: 7px;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: opacity 0.2s;
}
.btn-agent-configure {
  background: #1e3535;
  color: #a0c4c4;
  border: 1px solid #2e4545;
}
.btn-agent-configure:hover { opacity: 0.8; }
.btn-agent-open {
  background: linear-gradient(135deg, #00c6ff22, #0072ff33);
  color: #7dd3fc;
  border: 1px solid #1e4060;
}
.btn-agent-open:hover { opacity: 0.8; }
.btn-agent-delete {
  flex: 0 0 36px;
  background: #1e1010;
  color: #f87171;
  border: 1px solid #3e1e1e;
}
.btn-agent-delete:hover { opacity: 0.8; }

/* ── Agent Modal ──────────────────────────────────────────── */
.agent-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.agent-modal-overlay.hidden { display: none; }

.agent-modal {
  background: #0d1f1f;
  border: 1px solid #1e3535;
  border-radius: 14px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.agent-modal::-webkit-scrollbar {
  width: 6px;
}
.agent-modal::-webkit-scrollbar-track {
  background: transparent;
  margin: 14px;
}
.agent-modal::-webkit-scrollbar-thumb {
  background: #2e4545;
  border-radius: 3px;
}

.agent-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #1e3535;
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
}
.agent-modal-close {
  background: none;
  border: none;
  color: #8892a4;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
}
.agent-modal-close:hover { color: #e2e8f0; }

.agent-modal-body {
  padding: 20px 22px;
  flex: 1;
}
.agent-modal-body .dash-label {
  color: #e2e8f0;
}
.agent-modal-body .dash-section-label {
  color: #a0c4c4;
}
.agent-modal-body .dash-radio span {
  color: #e2e8f0;
}
.agent-modal-body .dash-radio {
  background: #1a2e2e;
  border-color: #2e4545;
  color: #e2e8f0;
}
.agent-modal-body .dash-radio:has(input:checked) {
  background: rgba(0,198,255,0.12);
  border-color: #00c6ff;
  color: #00c6ff;
}

.field-note {
  font-size: 11px;
  color: #6b7280;
  font-weight: 400;
}

.agent-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 22px 18px;
  border-top: 1px solid #1e3535;
}
.btn-modal-cancel {
  background: #1e2e2e;
  border: 1px solid #2e4545;
  color: #8892a4;
  border-radius: 7px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-modal-cancel:hover { color: #e2e8f0; }
.btn-modal-save {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  border: none;
  color: #fff;
  border-radius: 7px;
  padding: 9px 24px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-modal-save:hover { opacity: 0.85; }

/* ── Buy Now chip ─────────────────────────────────────────── */
.dash-user-bar-right {
  margin-left: auto;
}
.btn-buy-now {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.btn-buy-now:hover { opacity: 0.88; }

.btn-buy-now-card {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 7px;
}

/* ── Expiry warning bar ───────────────────────────────────── */
.dash-expiry-warning {
  background: #431407;
  border: 1px solid #7c2d12;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fed7aa;
}
.dash-expiry-warning i { color: #fb923c; flex-shrink: 0; }
.dash-expiry-cta {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Barlow', sans-serif;
  background: #fb923c;
  color: #431407;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.dash-expiry-cta:hover { background: #fdba74; }

/* =========================================================
   DASHBOARD SIDEBAR SHELL — Chunk A (Jul 2026)
   Replaces the old top-tab-bar dashboard chrome with a left nav.
   See SYSTEM-INSTRUCTIONS.md "Dashboard Redesign — Left Nav" for the
   locked nav tree/tokens this implements.
   ========================================================= */

/* #dashboard is an ID selector so this always wins over .section-pad's
   padding regardless of source order -- the app shell manages its own
   spacing, it isn't a marketing section. margin-top accounts for the fixed
   header+subheader, same pattern already used on .hero-section -- without
   it, #dashboard's content starts at y=0 in normal flow (fixed elements
   don't reserve document-flow space) and the sidebar's higher z-index
   renders it ON TOP of the header/subheader instead of below them. */
#dashboard { padding: 0; margin-top: calc(var(--header-h) + var(--subheader-h)); }

.dash-shell {
  display: grid;
  grid-template-columns: 240px 1fr; /* fixed width now that collapse mode is removed */
  width: 100%;
  /* No min-height here (deliberately, same tradeoff already made on
     .hero-section -- see PROJECT-KNOWLEDGE.md) -- grid's default
     align-items:stretch already makes both columns match whichever is
     taller, so the sidebar's dark background always looks correct
     alongside real content of any length, without ever forcing the page
     taller than its actual content and leaving a gap before the footer. */
}

.dash-sidebar-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 850;
}
.dash-sidebar-scrim.hidden { display: none; }

.dash-sidebar {
  width: 240px;
  background: var(--header-bg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: calc(var(--header-h) + var(--subheader-h));
  /* No explicit height -- the grid parent's default align-items:stretch
     makes this match .dash-main's real content height automatically (see
     .dash-shell above). An explicit height here would override stretch
     entirely and bring back the forced-viewport-height/footer-gap bug. */
  z-index: 860;
  transition: width 0.2s ease;
}
.dash-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Themed scrollbar -- Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--header-bg);
}
.dash-sidebar-nav::-webkit-scrollbar { width: 6px; }
.dash-sidebar-nav::-webkit-scrollbar-track { background: var(--header-bg); }
.dash-sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--panel-teal-1);
  border-radius: 3px;
}
.dash-sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--primary); }
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #a0c4c4;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.dash-nav-item i:first-child { width: 16px; text-align: center; flex-shrink: 0; font-size: 13px; }
.dash-nav-item span { overflow: hidden; text-overflow: ellipsis; }
.dash-nav-item:hover { background: var(--panel-teal-2); color: #e2e8f0; }
.dash-nav-item.active {
  background: var(--panel-teal-1);
  color: #fff;
  /* inset shadow, not an absolutely-positioned pseudo-element -- draws
     inside the button's own border box so it can never get clipped by
     .dash-sidebar-nav's overflow-y:auto (an omitted overflow-x computes
     to 'auto' too, which would silently clip anything positioned outside
     the box, e.g. a ::before at left:-10px). */
  box-shadow: inset 3px 0 0 var(--primary);
}
.dash-nav-item .tab-badge { margin-left: auto; }
.dash-nav-parent .dash-nav-chevron {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.dash-nav-group.expanded .dash-nav-parent .dash-nav-chevron { transform: rotate(90deg); }
.dash-nav-children {
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 26px;
  transition: max-height 0.25s ease;
}
.dash-nav-group.expanded .dash-nav-children { max-height: 260px; }
.dash-nav-child {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: #7d9c9c;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.dash-nav-child i { width: 14px; text-align: center; margin-right: 4px; }
.dash-nav-child:hover { background: var(--panel-teal-2); color: #e2e8f0; }
.dash-nav-child.active { background: var(--panel-teal-1); color: var(--accent-teal); }

.dash-mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.dash-topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 5%;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.dash-topbar-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-main);
}

.dash-main {
  min-width: 0; /* grid items default to min-width:auto too, which would let
    wide content (e.g. the invoices table) force the whole column wider */
  display: flex;
  flex-direction: column;
}
.dash-main .dash-expiry-warning { margin: 16px 5% 0; }
.dash-content-wrap {
  padding: 28px 5% 60px;
  max-width: 1200px;
  width: 100%;
}
.dash-page { width: 100%; }

/* Overview page header -- .dash-header/.dash-title/.dash-sub previously
   had zero base rule anywhere (only a mobile override existed), so this
   is a genuine base style, not a re-theme of something that worked. */
.dash-header { display: flex; align-items: center; margin-bottom: 20px; }
.dash-header-left { display: flex; align-items: center; gap: 12px; }
.dash-title { font-family: 'Barlow Condensed', serif; font-size: 22px; font-weight: 700; color: var(--text-main); }
.dash-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ── Overview stat cards + recent leads (new, Chunk A) ── */
.overview-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.overview-loading { color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px; grid-column: 1 / -1; }
.overview-stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.overview-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-bottom: 10px;
}
.overview-stat-value { font-family: 'Barlow Condensed', serif; font-size: 26px; font-weight: 700; color: var(--text-main); line-height: 1.1; }
.overview-stat-label { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 5px; }

.overview-recent-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.overview-recent-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.overview-recent-title i { color: var(--primary); width: 18px; text-align: center; }
.overview-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-main);
}
.overview-recent-row:last-child { border-bottom: none; }
.overview-recent-meta { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.overview-recent-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px 0; }

/* ── Overview: plan-status badge (new) + success/error toast (new) ── */
.overview-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 20px;
  background: var(--bg-off);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.overview-plan-badge.plan-trial   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.overview-plan-badge.plan-active  { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.overview-plan-badge.plan-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.overview-plan-badge.plan-danger  { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

.overview-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.overview-toast.hidden { display: none; }
.overview-toast.toast-danger { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

/* ── Placeholder pages (Widget & Embed / Customizations / Team / Account /
   Help & Support) -- real builds are Chunks B/D/E/F/G ── */
.dash-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-muted);
  text-align: center;
}
.dash-placeholder i { font-size: 30px; color: var(--primary-light); }
.dash-placeholder-title { font-weight: 700; font-size: 15px; color: var(--text-main); }
.dash-placeholder p { font-size: 13px; max-width: 380px; line-height: 1.6; margin: 0; }
/* Pre-launch demo gate variant -- amber icon signals "action needed", distinct from
   the plain grey "coming soon" tone used elsewhere in .dash-placeholder. */
.dash-placeholder-gate i { color: #d97706; }
.dash-gate-btn { margin-top: 4px; }

/* ── Widget & Embed page (new, Chunk B) ── */
.widget-info-card { margin-bottom: 16px; }
.widget-info-card:last-child { margin-bottom: 0; }
.widget-token-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.widget-token-value {
  flex: 1;
  min-width: 200px;
  background: var(--bg-off);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: monospace;
  font-size: 13px;
  color: var(--text-main);
  word-break: break-all;
}
.widget-info-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.widget-snippet-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  flex-wrap: wrap;
}
.widget-snippet-code {
  flex: 1;
  min-width: 200px;
  font-family: monospace;
  font-size: 12.5px;
  color: #ccfbf1;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.6;
}
.widget-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}
.widget-copy-btn:hover { background: var(--primary-dark); }
.widget-steps-list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.8;
}
.widget-steps-list code {
  background: var(--bg-off);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}
.widget-test-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: var(--text-main);
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 10px;
}
.widget-test-btn:hover { background: var(--primary); }
.widget-test-btn:disabled { pointer-events: none; opacity: 0.5; cursor: default; }

/* ── Widget Test Modal (95%-viewport iframe preview, new) ── */
.widget-test-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5vh 2.5vw;
}
.widget-test-overlay.hidden { display: none; }
.widget-test-iframe {
  width: 95vw;
  height: 95vh;
  border: none;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-xl);
}

/* ── Mobile: off-canvas drawer ── */
@media (max-width: 768px) {
  .dash-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .dash-sidebar.dash-sidebar-mobile-open { transform: translateX(0); }

  .dash-mobile-menu-btn { display: flex; align-items: center; }
  .dash-topbar { display: flex; }
  .dash-content-wrap { padding: 20px 5% 60px; }
  .overview-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.billing-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 280px;
  color: var(--text-muted);
  text-align: center;
}

.billing-invoices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.billing-invoices-table th {
  text-align: left;
  padding: 10px 12px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.billing-invoices-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.billing-invoices-table a { color: var(--primary); font-weight: 600; text-decoration: none; }
.billing-invoices-table a:hover { text-decoration: underline; }
.billing-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}
.billing-status-paid { background: var(--primary-light); color: var(--primary-dark); }
.billing-status-pending { background: #fef3c7; color: #92400e; }
.billing-status-other { background: #f1f5f9; color: var(--text-muted); }
.dash-label-hint { font-size: 11px; color: #94a3b8; margin-bottom: 8px; margin-top: -4px; }

/* ── Modal label colours ──────────────────────────────────── */
.agent-modal-body .dash-label { color: #e2e8f0; }
.agent-modal-body .dash-section-label { color: #a0c4c4; }
.agent-modal-body .dash-form-grid { grid-template-columns: 1fr; }
.agent-modal-body .dash-radio span { color: #e2e8f0; }

/* ── Empty state ──────────────────────────────────────────── */
.agents-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 20px;
  border: 1.5px dashed #1e3535;
  border-radius: 12px;
  color: #4a6a6a;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}
.agents-empty-state i { font-size: 28px; color: #2e5555; }

/* ── Buy Now success modal ────────────────────────────────── */
.buy-now-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.buy-now-overlay.hidden { display: none; }
.buy-now-modal {
  background: #0d1f1f;
  border: 1px solid #1e3535;
  border-radius: 16px;
  padding: 40px 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.buy-now-icon { font-size: 48px; color: #4ade80; }
.buy-now-modal h3 { font-size: 20px; font-weight: 700; color: #e2e8f0; }
.buy-now-modal p { font-size: 14px; color: #8892a4; line-height: 1.6; }
.btn-buy-now-close {
  margin-top: 8px;
  background: #1e3535;
  border: 1px solid #2e4545;
  color: #a0c4c4;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-buy-now-close:hover { color: #e2e8f0; }

/* ── Mobile — full interaction support ────────────────────── */
@media (max-width: 768px) {
.dash-user-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: hidden;
  }
  .dash-user-bar-name { flex: 1; text-align: left; }
  .dash-user-bar-mobile { margin-left: auto; text-align: right; }
  .dash-user-value,
  .dash-user-passphrase {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .dash-user-bar-right {
    width: auto;
    margin-left: 0;
    flex-shrink: 0;
  }
  .btn-buy-now {
    width: auto;
    padding: 7px 12px;
    font-size: 12px;
    border-radius: 6px;
  }

  .dash-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dash-title { font-size: 18px; }

  .agents-grid { grid-template-columns: 1fr; }
  .agents-toolbar { justify-content: stretch !important; }
  .btn-create-agent { width: 100%; justify-content: center; }

  .agent-card-actions { flex-wrap: nowrap; }
  .btn-agent-configure, .btn-agent-open { font-size: 11px; padding: 9px 4px; }
  .btn-agent-delete { flex: 0 0 40px; }

  .agent-modal-overlay { align-items: flex-end; padding: 0; }
  .agent-modal {
    border-radius: 14px;
    max-height: 92vh;
    width: 100%;
  }
  .agent-modal-header { padding: 16px 18px 12px; }
  .agent-modal-body { padding: 16px 18px; }
  .agent-modal-footer { padding: 12px 18px 24px; }

  .dash-form-grid { grid-template-columns: 1fr; }
  .dash-input { font-size: 16px; } /* prevents iOS zoom on focus */
  .dash-textarea { min-height: 90px; }

  .dash-radio-group { flex-wrap: wrap; gap: 8px; }
  .dash-radio { flex: 1 1 calc(50% - 4px); min-width: 80px; }

  .agent-modal-footer { flex-direction: column-reverse; }
  .btn-modal-save, .btn-modal-cancel { width: 100%; justify-content: center; padding: 13px; font-size: 14px; }

  .buy-now-modal { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .dash-inner { padding: 16px 12px 80px; }
  .dash-user-item { min-width: 40%; }
  .agent-card { padding: 14px; }
  .agent-card-name { font-size: 14px; }
}

/* Batch 29: .lead-capture-* rules removed entirely -- retired along with the HTML/JS.
   .buy-now-overlay/.buy-now-modal/etc. are untouched (still used by handleBuyNow's own,
   separate overlay). */

/* =========================================================
   PRODUCT SECTION
   ========================================================= */

/* Block title — section within the product page */
.product-block-title {
  font-family: 'Barlow Condensed', serif;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  font-weight: 800;
  color: var(--text-main);
  margin-top: 72px;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.product-block-sub {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 32px;
  line-height: 1.7;
  max-width: 620px;
  width: 100%;
}

/* ── CAPABILITIES GRID ── */
.product-caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.product-cap-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.product-cap-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.product-cap-icon {
  width: 42px; height: 42px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  margin-bottom: 16px;
}
.product-cap-card h4 {
  font-family: 'Barlow Condensed', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}
.product-cap-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ── "See It in Action" — final. .pex-hero-card reuses chat.css's chat-toolbar/
   bot-identity/avatar/msg/chat-lang-bar classes directly for the header, messages,
   and language bar, so it can never visually drift from the real widget. .pex-lang-btn
   is a deliberately DIFFERENT class from chat.css's .lang-btn -- chat.js wires click
   listeners onto every .lang-btn globally (initSTT, session state), so reusing that
   exact class here would let it attach to these display-only buttons too. ── */
.pex-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(29,31,32,0.16);
  border-radius: 0;
  /* Batch 20 item 1: symmetric top/bottom now that the badge lives outside this box (Batch
     19) -- top inner spacing (autoplay-row to this box's top) now equals bottom inner
     spacing (chat card to this box's bottom). This is purely INNER padding; the box's
     actual bottom position relative to the hero-value-cards column is handled separately
     below via #pex-section's margin-bottom, not this padding. */
  padding: 16px 20px;
  background: #fff;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.pex-outer > * {
  position: relative;
  z-index: 1; /* keep badge/tabs/card above both glow layers */
}
@keyframes pexOuterGlossyShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes pexOuterGlowMove {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
@keyframes pexOuterSheen {
  0% { left: -50%; }
  100% { left: 150%; }
}

/* Item 3: pill badge above the widget, styled identically to .hero-badge */
.pex-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--primary);
  border: 1px solid rgba(29,31,32,0.16);
  padding: 8px 21px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: none;
}
.pex-section-badge-dot {
  width: 8px; height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: blink 2s infinite;
  box-shadow: none;
}

/* Item 4: blink the demo widget's own status dot ONLY -- scoped to .pex-hero-card so the
   real live widget's status-dot (chat.css, used elsewhere on the page) is untouched. */
.pex-hero-card .status-dot { animation: blink 2s infinite; }

/* Item 5: wider container + shorter labels/padding so 10 tabs fit in ~2-3 rows instead of 5 */
.pex-scenario-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: min(460px, 100%);
}
.pex-tab {
  padding: 5px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-off);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.pex-tab i { margin-right: 4px; font-size: 9.5px; }
.pex-tab:hover { border-color: var(--primary); color: var(--primary); }
.pex-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Item 6: blink the feature badge to draw attention */
.pex-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 6px 14px;
  border-radius: 20px;
  text-align: center;
  max-width: min(420px, 100%);
  box-sizing: border-box;
  animation: pex-badge-bg-pulse 2s infinite; /* item 7: background only, text stays static */
}
.pex-feature-badge i { font-size: 10px; }
@keyframes pex-badge-bg-pulse {
  0%, 100% { background: var(--primary-light); box-shadow: none; }
  50% { background: #99f0e0; box-shadow: 0 0 12px rgba(13,148,136,0.35); }
}

.pex-hero-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: #fff;
  border: 1.5px solid rgba(29,31,32,0.16);
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  /* Batch 19 item 2: widened from 380px -- actual playback now happens in the 95%-viewport
     fullscreen modal, so the normal-mode card no longer needs to reserve much message space,
     but it can afford to sit wider since it's not fighting a tall message area anymore. */
  max-width: min(460px, 100%);
  overflow: hidden;
  box-sizing: border-box;
  transition: max-width 0.45s ease, box-shadow 0.45s ease;
}
/* Items 4 & 7: instead of absolute-positioning the card over the tabs (which broke
   .pex-outer's border containment -- an absolute child doesn't make its parent grow),
   collapse the tabs/feature-badge away in normal flow and let the card grow to fill
   that reclaimed space naturally. Badge + autoplay row stay untouched above it, and
   the border always wraps real, in-flow content. */
.pex-hero-card.pex-playing {
  max-width: 100%;
  width: 100%;
  box-shadow: var(--shadow-xl);
}
.pex-scenario-tabs {
  overflow: hidden;
}
.pex-outer.pex-playing-active .pex-scenario-tabs {
  display: none; /* only the tabs collapse now -- the standalone .pex-feature-badge div is gone;
                    #pex-toolbar-badge reuses that class purely for styling and must stay visible */
}

/* Mirrors #chat-messages in chat.css -- can't reuse the ID on a second element.
   Item 10: overflow hidden (no scrollbar) -- JS fades out the oldest message
   as new ones arrive instead of ever needing to scroll. */
.pex-messages {
  flex: 1;
  /* Batch 19 item 2: reduced from 120px -- normal (non-playing) mode is just a static
     preview now, actual playback happens in the fullscreen modal, so this area doesn't
     need to reserve room for real conversation content. */
  min-height: 64px;
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-off);
  transition: flex-basis 0.45s ease;
}

.pex-hero-card.pex-playing .pex-messages {
  flex-basis: 420px;
}

#pex-chat-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* item 2: start at top, fill downward */
  gap: 10px;
  overflow-y: auto; /* Batch 30 (round 5): real scrolling, matching chat.css's #chat-messages -- see pexScrollToBottom() for why the old overflow:hidden + fade-out trim system was retired */
  overflow-x: hidden;
  min-width: 0; /* item 1: allow shrinking below carousel's intrinsic content width */
}
#pex-chat-area::-webkit-scrollbar { width: 4px; } /* matches chat.css's #chat-messages scrollbar for visual parity */
#pex-chat-area::-webkit-scrollbar-track { background: transparent; }
#pex-chat-area::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }
#pex-chat-area .msg { min-width: 0; } /* item 1: let flex items shrink to max-width:88% instead of forcing width from carousel content */
.pex-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: pex-cursor-blink 0.8s step-end infinite;
}
@keyframes pex-cursor-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.pex-geo-map-wrap { margin-bottom: 4px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; transition: all 0.35s ease; }
.pex-geo-map-wrap.hidden { display: none; }
#pex-geo-map { width: 100%; height: 170px; }
.pex-map-badge { display: inline-block; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-right: 4px; text-transform: uppercase; letter-spacing: 0.03em; }

/* Copied 1:1 from chat.css's .lang-btn for visual parity -- deliberately a different
   class name, see note above. */
.pex-lang-btn {
  padding: 3px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.pex-lang-btn:hover { border-color: var(--primary); color: var(--primary); }
.pex-lang-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Batch 25 item 4: regional languages (everything except EN) get a dark selected state
   instead of teal -- unselected = white bg + dark border + dark text, selected = dark bg
   + white text. :not([data-lang="en"]) keeps EN on its original teal treatment. */
/* Batch 26 item 4: dark border reverted here -- Ram confirmed it was meant for
   .pex-script-pill only. Background/text colors unchanged, only border-color reverted
   to the original light default. */
.pex-lang-btn:not([data-lang="en"]) {
  background: #fff;
  color: #0f172a;
  border-color: var(--border);
}
.pex-lang-btn:not([data-lang="en"]):hover { border-color: var(--primary); color: #0f172a; }
.pex-lang-btn:not([data-lang="en"]).active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

/* ── Property carousel cards (rendered as a sibling block after a bot bubble,
   or standalone for carousel-only turns -- see Batch 30 engine change) ── */
.pex-carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 6px;
  margin-top: 6px;
  scrollbar-width: thin;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  width: 0;
  min-width: 100%;
  box-sizing: border-box;
}
/* Batch 30 fix (round 2): .pex-carousel is now a direct flex-item child of
   #pex-chat-area (a fixed-height column flex container with overflow:hidden). Flex items
   default to flex-shrink:1 -- text bubbles never visibly shrink because their own text
   content gives them a natural min-height floor, but the carousel has no equivalent
   protection, so as new messages arrive below and the column runs out of room, the
   carousel -- not the old messages -- was the thing getting compressed (confirmed via
   screenshots: full cards -> truncated cards -> fully collapsed to a thin sliver as later
   messages arrived). flex-shrink:0 stops it from shrinking at all; aging out OLD messages
   via pexTrimOldMessages() is what's supposed to reclaim space, not shrinking live content. */
#pex-chat-area > .pex-carousel {
  align-self: stretch;
  width: 100%;
  flex-shrink: 0;
}

.pex-carousel { 
  display: flex;
  gap: 12px;
  flex-wrap: wrap; /* Rule C: allows wrapping if total cards exceed row capacity at min-width */
  justify-content: flex-start;
  align-items: stretch; /* Cards stretch to matching equal heights per row */
  width: 100%;
  box-sizing: border-box;
}
.pex-carousel .prop-card {
  flex: 1 1 150px; /* Rule B: dynamically scales sizes between min and max widths to fit the row */
  min-width: 150px; /* Rule C: absolute minimum card width floor */
  max-width: 300px; /* Rule A: maximum bounds when there is abundant space (e.g., 2 cards) */
  font-size: 11px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.pex-carousel .prop-card img { 
  width: 100%;
  height: 90px; 
  object-fit: cover;
}
.pex-carousel .prop-info { padding: 8px; gap: 3px; display: flex; flex-direction: column; flex: 1; }
.pex-carousel .prop-title { font-size: 12px; }
.pex-carousel .prop-price { font-size: 12px; }
.pex-carousel .detail-btn { margin-top: auto; } /* Pins button to the bottom of each card uniformly */

/* ── Comparison table (inside a bot bubble) ── */
.pex-compare-table { 
  width: max-content; /* Rule D: auto-fits the column content width */
  max-width: 100%;
  margin: 8px auto 0; /* Centers the compact table horizontally within the bubble */
  background: #fff; /* Rule A: clean white background */
  border: 1px solid #cbd5e1; /* Rule A: grey border boundaries */
  border-collapse: separate;
  border-radius: 8px;
  overflow: hidden;
  font-size: 11px;
  box-shadow: var(--shadow-sm);
}
.pex-compare-table th { 
  text-align: center; /* Rule B: center-aligned headings */
  padding: 8px 12px; 
  background: #000e0e; /* Rule C: theme-matched dark header background */
  color: #fff; /* Rule C: white font */
  font-weight: 700;
  border: 1px solid #1e293b;
}
.pex-compare-table td { 
  text-align: center; /* Rule B: center-aligned contents */
  padding: 8px 12px; 
  border: 1px solid #e2e8f0; /* Grey border grids */
  color: var(--text-main);
}
.pex-compare-table td:first-child { 
  color: var(--text-muted); 
  font-weight: 600;
  white-space: nowrap; 
}

.pex-rerank-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 3px 9px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.pex-rerank-badge i { font-size: 9px; }

.pex-bot-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pex-audio-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--primary-light);
  color: var(--primary-dark);
  cursor: pointer;
  font-size: 11px;
  transition: background 0.2s;
}
.pex-audio-btn:hover { background: var(--primary); color: #fff; }

/* mobile pex sizing handled in the main mobile hero block below, not here */
.product-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pChat-bubble, .phat-cont {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 88%;
}
.pChat-user, .pChat-bubble.pChat-user {
  background: var(--primary);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  align-self: flex-end;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 88%;
}
.pChat-bot, .pChat-bubble.pChat-bot {
  background: var(--bg-off);
  color: var(--text-main);
  border-radius: 14px 14px 14px 4px;
  border: 1px solid var(--border);
  align-self: flex-start;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 88%;
}
/* Also handle the original class names used in first card */
.pChat-bubble.pChat-user { background: var(--primary); color: #fff; border-radius: 14px 14px 4px 14px; align-self: flex-end; }
.pChat-bubble.pChat-bot { background: var(--bg-off); color: var(--text-main); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; align-self: flex-start; }
.phat-highlight { font-weight: 700; color: var(--primary-dark); }

/* ── CUSTOMISATIONS ── */
/* Batch 23 item 10: reduced from 4 to 2 columns -- same half-width reasoning as
   .features-grid above. Paginated 4 groups/page (2x2) instead of showing all 8 at once. */
/* Batch 24 item 8: single column (was 2) -- only 2 cards per page now, stacked. */
/* Batch 27 item 9: trailing margin added -- was missing entirely, so once the controls
   moved below the cards (item 1) they sat flush against the last card. Same variable
   .hero-value-cards uses, for identical spacing across all three paired card sections. */
.product-custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 32px;
  margin-bottom: var(--hero-trailing-gap);
}
.product-custom-group {
  background: transparent;
  border: 1px solid rgba(29,31,32,0.16);
  border-radius: 0;
  padding: 24px 20px;
  min-height: 220px;
  box-sizing: border-box;
  box-shadow: none;
  position: relative;
  overflow: visible;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}
.product-custom-group:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
}
.product-custom-group > .corner {
  position: absolute; width: 11px; height: 11px;
  color: rgba(29,31,32,0.55);
}
.product-custom-group > .corner::before, .product-custom-group > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.product-custom-group > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.product-custom-group > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.product-custom-group > .corner.tl { top: -6px; left: -6px; }
.product-custom-group > .corner.tr { top: -6px; right: -6px; }
.product-custom-group > .corner.bl { bottom: -6px; left: -6px; }
.product-custom-group > .corner.br { bottom: -6px; right: -6px; }
.product-custom-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-main);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-custom-group-label i {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 4px 14px -2px rgba(13,148,136,0.45);
}
.product-custom-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Batch 25 item 7: dark text (was grey) -- this single rule covers Customize Everything,
   Features (reuses this exact markup), AND step-card (also reuses this markup now). */
.product-custom-list li {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.product-custom-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-size: 11px;
  top: 1px;
}

/* ── USAGE BILLING ── */
.product-billing-wrap {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 24px;
  margin-top: 32px;
  align-items: start;
}
.product-billing-free {
  background: var(--text-main);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
}
.product-billing-free-badge {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.product-billing-free-title {
  font-size: 15px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 24px;
}
.product-billing-free-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.product-billing-free-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.product-billing-free-num {
  font-family: 'Barlow Condensed', serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 4px;
}
.product-billing-free-label {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}
.product-billing-overage {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.product-billing-overage-title {
  font-family: 'Barlow Condensed', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 20px;
}
.product-billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.product-billing-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 12px 12px 0;
  border-bottom: 1px solid var(--border);
}
.product-billing-table td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  vertical-align: top;
}
.product-billing-table tbody tr:last-child td { border-bottom: none; }
.product-billing-table td:nth-child(2) {
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}
.product-billing-table td:nth-child(3) {
  color: var(--text-muted);
  font-size: 12.5px;
}
.product-billing-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  display: flex;
  gap: 8px;
}
.product-billing-note i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }

/* =============================================
   LEADS TAB — FULL REDESIGN
   ============================================= */

/* Tab badge */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 20px;
  padding: 0 5px;
  margin-left: 6px;
  vertical-align: middle;
  animation: badgePop 0.3s ease;
}
.tab-badge.hidden { display: none; }
@keyframes badgePop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* Inner nav */
.leads-inner-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #1e3535;
}

.leads-inner-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.leads-inner-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.leads-inner-tab:hover {
  background: #0d1f1f;
  color: #94a3b8;
  border-color: #1e3535;
}
.leads-inner-tab.active {
  background: #0d2a2a;
  color: #e2e8f0;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary)22;
}
.leads-inner-tab.analytics-tab.active {
  background: #1a1a3a;
  border-color: #a78bfa;
  color: #a78bfa;
}

.leads-inner-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: #1e3535;
  color: #64748b;
  min-width: 20px;
  text-align: center;
}
.leads-inner-tab.active .leads-inner-badge {
  background: var(--primary);
  color: #fff;
}
.leads-inner-badge.visit    { background: #1a3a2a; color: #34d399; }
.leads-inner-badge.callback { background: #1a2a3a; color: #60a5fa; }

/* Date filter */
.leads-date-filter { display: flex; align-items: center; }
.leads-date-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0a1818;
  border: 1px solid #1e3535;
  border-radius: 12px;
  padding: 7px 14px;
  transition: border-color 0.2s;
}
.leads-date-wrap:focus-within { border-color: var(--primary); }
.leads-date-icon { color: var(--primary); font-size: 13px; }
.leads-date-input {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  width: 115px;
}
.leads-date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.4) sepia(1) saturate(2) hue-rotate(130deg);
  cursor: pointer;
}
.leads-date-sep { color: #1e3535; font-size: 14px; font-weight: 300; }
.leads-date-clear {
  background: none;
  border: none;
  color: #f87171;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  display: flex;
  align-items: center;
}
.leads-date-clear.hidden { display: none; }

/* Panels */
.leads-panel { }
.leads-panel.hidden { display: none; }

/* Lead cards */
.leads-loading, .leads-empty {
  text-align: center;
  padding: 60px 24px;
  color: #64748b;
  font-size: 14px;
}
.leads-loading i, .leads-empty i {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
  color: #1e3535;
}

.lead-card {
  display: flex;
  align-items: stretch;
  background: #080f0f;
  border: 1px solid #1a2e2e;
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.lead-card:hover {
  border-color: #2e5555;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.lead-card-accent {
  width: 4px;
  flex-shrink: 0;
  border-radius: 14px 0 0 14px;
}
.lead-card-accent.visit    { background: linear-gradient(180deg, #34d399, #10b981); }
.lead-card-accent.callback { background: linear-gradient(180deg, #60a5fa, #3b82f6); }

.lead-card-body {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lead-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lead-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: 14px 16px 14px 8px;
  flex-shrink: 0;
}
.lead-card-cta {
  color: #1e3535;
  font-size: 12px;
  transition: color 0.2s;
}
.lead-card:hover .lead-card-cta { color: var(--primary); }

.lead-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.lead-type-badge.visit    { background: #0b2018; color: #34d399; border: 1px solid #1a4030; }
.lead-type-badge.callback { background: #0b1828; color: #60a5fa; border: 1px solid #1a3050; }

.lead-pipeline-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pipe-new         { background: #0f1e2e; color: #60a5fa; border: 1px solid #1e3555; }
.pipe-contacted   { background: #1e1a0a; color: #fbbf24; border: 1px solid #3a3010; }
.pipe-visit-done  { background: #100f2e; color: #a78bfa; border: 1px solid #2020508; }
.pipe-negotiation { background: #1e0f1e; color: #f472b6; border: 1px solid #3a1a3a; }
.pipe-won         { background: #0b2018; color: #34d399; border: 1px solid #1a4030; }
.pipe-lost        { background: #1e0f0f; color: #f87171; border: 1px solid #3a1a1a; }

.lead-phone {
  color: #94a3b8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  width: fit-content;
}
.lead-phone:hover { color: #34d399; }
.lead-phone i { color: #4a6a6a; font-size: 11px; }

.lead-property, .lead-booking-time, .lead-notes-preview {
  font-size: 12px;
  color: #4a6a7a;
  display: flex;
  align-items: center;
  gap: 7px;
}
.lead-property i, .lead-booking-time i, .lead-notes-preview i { width: 12px; text-align: center; }
.lead-notes-preview { font-style: italic; color: #3a5565; }

.lead-created-at {
  font-size: 11px;
  color: #2e4a4a;
  white-space: nowrap;
  margin-bottom: 4px;
}

/* Analytics grid */
.leads-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.analytics-chart-card {
  background: #080f0f;
  border: 1px solid #1a2e2e;
  border-radius: 14px;
  padding: 18px;
}
.analytics-chart-card.span-2 { grid-column: span 2; }
.analytics-chart-title {
  font-size: 11px;
  font-weight: 700;
  color: #4a6a7a;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.analytics-chart-title i { color: var(--primary); }

.funnel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.funnel-label { font-size: 11px; color: #64748b; width: 76px; flex-shrink: 0; }
.funnel-bar-wrap { flex: 1; }
.funnel-bar {
  font-size: 10px;
  font-weight: 700;
  color: #050e0e;
  padding: 4px 8px;
  border-radius: 5px;
  min-width: 24px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.funnel-pct { font-size: 10px; color: #2e4a4a; width: 30px; text-align: right; }

.dropoff-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.dropoff-stat {
  background: #0d1a1a;
  border: 1px solid #1a2e2e;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.dropoff-number { font-size: 28px; font-weight: 800; font-family: 'Barlow Condensed', serif; line-height: 1; margin-bottom: 4px; }
.dropoff-label  { font-size: 10px; color: #4a6a7a; text-transform: uppercase; letter-spacing: 0.06em; }
.dropoff-note   { font-size: 11px; color: #2e4a4a; display: flex; align-items: flex-start; gap: 6px; line-height: 1.5; }
.dropoff-note i { color: #1e3535; margin-top: 2px; flex-shrink: 0; }

/* Lead modal */
.lead-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lead-modal-overlay.hidden { display: none; }
.lead-modal {
  background: #080f0f;
  border: 1px solid #2e5555;
  border-radius: 18px;
  width: 100%;
  max-width: 460px;
  margin: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.lead-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #1a2e2e;
  font-weight: 700;
  font-size: 14px;
  color: #e2e8f0;
  letter-spacing: 0.02em;
}
.lead-modal-header button {
  background: #0d1f1f;
  border: 1px solid #1a2e2e;
  color: #4a6a6a;
  cursor: pointer;
  font-size: 13px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.lead-modal-header button:hover { color: #e2e8f0; border-color: #2e5555; }
.lead-modal-body { padding: 22px; }
.lead-modal-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.lead-modal-label {
  font-size: 11px;
  color: #2e4a4a;
  width: 88px;
  flex-shrink: 0;
  padding-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.lead-modal-value { font-size: 13px; color: #94a3b8; text-decoration: none; }
.lead-call-link { color: #34d399; font-weight: 600; }
.lead-call-link:hover { text-decoration: underline; }
.lead-modal-select {
  background: #0d1a1a;
  border: 1px solid #1a2e2e;
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 13px;
  padding: 8px 12px;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s;
}
.lead-modal-select:focus { outline: none; border-color: var(--primary); }
.lead-modal-notes-row { align-items: flex-start; }
.lead-modal-textarea {
  background: #0d1a1a;
  border: 1px solid #1a2e2e;
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 13px;
  padding: 10px 12px;
  width: 100%;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s;
  line-height: 1.6;
}
.lead-modal-textarea:focus { outline: none; border-color: var(--primary); }
.lead-modal-save-btn {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  background: linear-gradient(135deg, var(--primary), #0ea5e9);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.lead-modal-save-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.lead-modal-save-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

@media (max-width: 900px) {
  .leads-analytics-grid { grid-template-columns: 1fr; }
  .analytics-chart-card.span-2 { grid-column: span 1; }
}
@media (max-width: 600px) {
  .lead-card { flex-direction: column; }
  .lead-card-accent { width: 100%; height: 4px; border-radius: 14px 14px 0 0; }
  .lead-card-meta { flex-direction: row; padding: 0 16px 14px; }
  .leads-inner-nav { flex-direction: column; align-items: flex-start; }
  .leads-date-wrap { flex-wrap: wrap; }
}

/* Search query bars */
.search-query-list { display: flex; flex-direction: column; gap: 8px; }
.search-query-row  { display: flex; align-items: center; gap: 10px; }
.search-query-label { font-size: 11px; color: #8892a4; width: 90px; flex-shrink: 0; }
.search-query-bar-wrap { flex: 1; background: #0d1a1a; border-radius: 4px; height: 6px; }
.search-query-bar { height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--primary), #0ea5e9); transition: width 0.5s ease; }
.search-query-count { font-size: 11px; color: #4a6a7a; width: 20px; text-align: right; }

/* Drop-off progress */
.dropoff-progress-wrap { background: #0d1a1a; border-radius: 8px; height: 8px; margin-top: 12px; overflow: hidden; }
.dropoff-progress-bar  { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #34d399, #0ea5e9); transition: width 0.6s ease; }

/* ── Billing mobile cards ── */
.billing-cards-mobile { display: none; width: 100%; box-sizing: border-box; }

.billing-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

.billing-card-highlight {
  background: var(--primary-light);
  border-color: var(--primary);
}
.billing-card-when {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.billing-card-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 6px;
}
.billing-card-note {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .product-billing-table { display: none; }
  .billing-cards-mobile { display: block; margin-top: 16px; }
  .product-billing-overage { padding: 24px 16px; }
  .product-billing-wrap { grid-template-columns: 1fr; }
  .product-billing-note { font-size: 12px; }
}

@media (max-width: 768px) {
  .product-caps-grid { grid-template-columns: 1fr; }
  .product-examples-grid { grid-template-columns: 1fr; }
  .product-custom-grid { grid-template-columns: 1fr; }
  .product-billing-wrap { grid-template-columns: 1fr; }
  .product-billing-free-grid { grid-template-columns: 1fr; }
  .product-billing-overage { padding: 24px 16px; }
  .content-wrap { width: 100%; }
  .pricing-outer { width: 100%; }
  .pricing-card-demo { width: 100%; box-sizing: border-box; }
}

@media (max-width: 480px) {
  .product-custom-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PHASE 13 — PROPERTY MANAGEMENT
   ========================================================= */

.prop-mgmt-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.prop-search-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: 'Barlow', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.prop-search-input:focus { border-color: var(--primary); }
.prop-add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.prop-add-btn:hover { background: var(--primary-dark); }

/* Property Cards */
.prop-mgmt-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prop-mgmt-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: box-shadow 0.2s;
}
.prop-mgmt-card:hover { box-shadow: var(--shadow-md); }
.prop-mgmt-img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-off);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.prop-mgmt-img-placeholder { font-size: 24px; color: #cbd5e1; }
.prop-mgmt-info { flex: 1; min-width: 0; }
.prop-mgmt-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prop-mgmt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.prop-mgmt-meta span { display: flex; align-items: center; gap: 4px; }
.prop-mgmt-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.prop-action-btn {
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.prop-img-btn { color: var(--primary); border-color: var(--primary); }
.prop-img-btn:hover { background: var(--primary-light); }
.prop-edit-btn { color: #0ea5e9; border-color: #0ea5e9; }
.prop-edit-btn:hover { background: #f0f9ff; }
.prop-delete-btn { color: #ef4444; border-color: #ef4444; }
.prop-delete-btn:hover { background: #fef2f2; }

.prop-mgmt-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.prop-mgmt-empty i { font-size: 48px; margin-bottom: 16px; display: block; }

/* Form */
.prop-form-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.prop-form-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}
.prop-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-main);
  transition: all 0.2s;
}
.prop-back-btn:hover { border-color: var(--primary); color: var(--primary); }
.prop-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.prop-form-full { grid-column: 1 / -1; }
.prop-form-group { display: flex; flex-direction: column; gap: 6px; }
.prop-form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}
.prop-form-group input,
.prop-form-group select,
.prop-form-group textarea {
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: 'Barlow', sans-serif;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s;
  background: #fff;
}
.prop-form-group input:focus,
.prop-form-group select:focus,
.prop-form-group textarea:focus { border-color: var(--primary); }
.prop-form-group textarea { resize: vertical; }
.prop-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.prop-cancel-btn {
  padding: 10px 20px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
}
.prop-save-btn {
  padding: 10px 24px;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}
.prop-save-btn:hover { background: var(--primary-dark); }
.prop-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Image Manager */
.prop-image-upload-area {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}
.prop-upload-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.prop-upload-hint { font-size: 12px; color: var(--text-muted); }
.prop-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.prop-img-thumb {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg-off);
}
.prop-img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prop-img-primary-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.prop-img-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  background: rgba(239,68,68,0.9);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile */
@media (max-width: 768px) {
  .prop-mgmt-card { flex-wrap: wrap; }
  .prop-mgmt-actions { width: 100%; justify-content: flex-end; }
  .prop-form-grid { grid-template-columns: 1fr; }
  .prop-form-full { grid-column: 1; }
}

/* Amenities checkboxes */
.prop-amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.prop-amenity-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
}
.prop-amenity-check input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}
.prop-type-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

/* ── Excel Bulk Upload ─────────────────────────────────────────────────────── */
.prop-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.prop-template-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #fff;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-md);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.prop-template-btn:hover { background: var(--primary-light); }
.prop-import-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #16a34a;
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.prop-import-btn:hover { background: #15803d; }
.excel-summary { margin-bottom: 20px; }
.excel-parsing {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}
.excel-summary-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.excel-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
}
.excel-stat-valid   { background: #dcfce7; color: #16a34a; }
.excel-stat-invalid { background: #fee2e2; color: #dc2626; }
.excel-stat-total   { background: #f1f5f9; color: var(--text-main); }
.excel-error {
  padding: 16px;
  background: #fee2e2;
  border-radius: var(--radius-md);
  color: #dc2626;
  font-weight: 600;
}
.excel-preview-table {
  overflow-x: auto;
  margin-bottom: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.excel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.excel-table th {
  background: var(--text-main);
  color: #fff;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
}
.excel-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.excel-table tr:last-child td { border-bottom: none; }
.excel-table tr:hover td { background: #f8fafc; }
.excel-row-error td { background: #fff5f5; }
.excel-row-valid  { color: #16a34a; font-weight: 600; }
.excel-row-invalid { color: #dc2626; font-weight: 600; }
.excel-issues { color: #dc2626; font-size: 12px; white-space: normal !important; min-width: 160px; }

/* ── Bulk Upload Wizard ────────────────────────────────────────────────────── */
.prop-bulk-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #16a34a;
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.prop-bulk-btn:hover { background: #15803d; }

/* Resume banner */
.prop-resume-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fef3c7;
  border: 1.5px solid #f59e0b;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-size: 14px;
  color: #92400e;
  flex-wrap: wrap;
}
.prop-resume-banner button {
  padding: 6px 14px;
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.prop-resume-dismiss {
  background: transparent !important;
  color: #92400e !important;
  text-decoration: underline;
}

/* Wizard steps */
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-off);
  border-radius: 0;
  white-space: nowrap;
  position: relative;
}
.wizard-step:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.wizard-step:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.wizard-step span {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #cbd5e1;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.wizard-step.active {
  background: var(--primary-light);
  color: var(--primary-dark);
}
.wizard-step.active span { background: var(--primary); }
.wizard-step.done {
  background: #dcfce7;
  color: #16a34a;
}
.wizard-step.done span { background: #16a34a; }

/* Wizard panels */
.wizard-panel {
  padding: 8px 0;
}
.wizard-panel h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}
.wizard-panel p, .wizard-panel-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.7;
}
.wizard-panel-icon {
  font-size: 48px;
  color: var(--primary);
  margin-bottom: 16px;
}
.wizard-nav {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Specs form */
.spec-property-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  background: #fff;
}
.spec-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.spec-card-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.spec-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}
.spec-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.spec-card-status {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.spec-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.spec-optional-label {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Confirm summary */
.confirm-summary-list { margin-bottom: 20px; }
.confirm-prop-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.confirm-prop-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.confirm-prop-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}
.confirm-prop-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}
.confirm-prop-specs {
  font-size: 12px;
  color: var(--primary-dark);
  margin-top: 4px;
}
.confirm-total {
  font-size: 15px;
  color: var(--text-main);
  padding-top: 16px;
  text-align: right;
}

/* Excel table */
.excel-summary { margin-bottom: 20px; }
.excel-parsing {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}
.excel-summary-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.excel-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
}
.excel-stat-valid   { background: #dcfce7; color: #16a34a; }
.excel-stat-invalid { background: #fee2e2; color: #dc2626; }
.excel-stat-total   { background: #f1f5f9; color: var(--text-main); }
.excel-error {
  padding: 16px;
  background: #fee2e2;
  border-radius: var(--radius-md);
  color: #dc2626;
  font-weight: 600;
}
.excel-partial-choice {
  padding: 16px;
  background: #fef3c7;
  border-radius: var(--radius-md);
  border: 1.5px solid #f59e0b;
  margin-bottom: 16px;
  font-size: 14px;
  color: #92400e;
}
.excel-preview-table {
  overflow-x: auto;
  margin-bottom: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.excel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.excel-table th {
  background: var(--text-main);
  color: #fff;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
}
.excel-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.excel-table tr:last-child td { border-bottom: none; }
.excel-table tr:hover td { background: #f8fafc; }
.excel-row-error td { background: #fff5f5; }
.excel-row-valid  { color: #16a34a; font-weight: 600; }
.excel-row-invalid { color: #dc2626; font-weight: 600; }
.excel-issues { color: #dc2626; font-size: 12px; white-space: normal !important; min-width: 160px; }

@media (max-width: 768px) {
  .spec-fields-grid { grid-template-columns: 1fr; }
  .wizard-step { padding: 8px 10px; font-size: 11px; }
}

/* ── Wizard Image Upload Step ──────────────────────────────────────────────── */
.wizard-image-nudge {
  text-align: center;
  padding: 24px;
  background: var(--primary-light);
  border-radius: var(--radius-md);
  margin: 20px 0;
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.7;
}
.wizard-img-upload-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.wizard-img-upload-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.wizard-img-upload-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}
.wizard-img-upload-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.wizard-img-upload-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.wizard-img-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* =========================================================
   MAP PICKER
   ========================================================= */
.map-picker-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-off);
  border: 1.5px dashed var(--primary);
  border-radius: var(--radius-md);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  justify-content: center;
}
.map-picker-toggle:hover { background: var(--primary-light); }
.map-picker-toggle.active { background: var(--primary-light); border-style: solid; }
.map-picker-container { margin-top: 10px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); }
.map-picker-map { width: 100%; height: 320px; }
.map-picker-hint { padding: 6px 12px; font-size: 11px; color: var(--text-muted); background: var(--bg-off); border-top: 1px solid var(--border); text-align: center; }

#auth-pending-overlay { display: none; }
html.auth-pending #auth-pending-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--primary);
}
html.auth-pending body > *:not(#auth-pending-overlay) { display: none !important; }

/* Batch 31 (round 7): radial layout -- property fixed at center, POIs evenly spaced around
   it by real compass bearing, connected back by a thin arrow. See pexInitGeoMap /
   pexPositionGeoRadial for the geometry. Replaces the wedge/tail approach entirely. */
/* Batch 31 (round 9): reverted to a single property pin -- see pexInitGeoMap for why. */
/* UI fix (item 5): a REAL google.maps.Marker now renders the actual pin (standard Google
   teardrop, positioned by the Maps API itself -- no CSS math needed). This element is now
   ONLY the floating badge label -- no tail, no dot, just repositioned near the pin instead of
   dead-center on top of it (the real marker occupies dead-center now). */
.pex-property-pin {
  position: absolute;
  top: calc(50% - 17px); /* Aligns vertically with the visual body center of the standard teardrop pin */
  left: 50%;
  /* Shift 16px to the right of the physical Google Map center pin with vertical centering */
  transform: translate(16px, -50%);
  z-index: 3;
  pointer-events: none;
}
.pex-property-pin-label {
  background: linear-gradient(165deg, #18243f 0%, #0a0f1c 100%);
  color: #5eead4;
  font-size: 11px; /* Smaller, stylish elegant font size */
  font-weight: 600;
  padding: 5px 10px; /* Reduced badge height and padding for a sleek professional look */
  border-radius: 8px; /* Stylish tighter corner radius matching standard badges */
  white-space: nowrap;
  border: 1px solid rgba(94,234,212,0.28);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: blink 1.2s infinite;
}

.pex-badge-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pex-autoplay-row-container {
  display: flex;
  gap: 16px;
  width: 100%;
  justify-content: center;
  margin-bottom: 12px;
  flex-wrap: wrap; /* Safe wrapping on ultra-narrow mobile viewports */
}
.pex-autoplay-row-container .pex-autoplay-row {
  flex: 0 1 auto; /* Do not force stretching */
  width: max-content; /* Tightly auto-fits the text and play button */
  margin: 0;
  justify-content: center;
  gap: 10px; /* Clean spacing between label and play icon inside the button */
}
.pex-autoplay-row {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  background: var(--brand-red);
  border: 1px solid var(--brand-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.pex-autoplay-row:hover {
  background: #cf1114;
}
.pex-autoplay-label { font-size: 12px; color: #fff; font-weight: 700; white-space: nowrap; pointer-events: none; line-height: 1.1; }
.pex-autoplay-label-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.1;
  pointer-events: none;
}
.pex-autoplay-sublabel {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 2px;
  pointer-events: none;
  line-height: 1;
}
.pex-autoplay-row .pex-control-btn {
  width: auto;
  height: auto;
  background: transparent;
  color: #fff;
  font-size: 11px;
  pointer-events: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 480px) {
  .pex-autoplay-row-container {
    gap: 8px;
  }
  .pex-autoplay-row-container .pex-autoplay-row {
    padding: 6px 14px;
  }
}
@media (max-width: 360px) {
  .pex-autoplay-row-container {
    gap: 6px;
  }
  .pex-autoplay-row-container .pex-autoplay-row {
    padding: 5px 10px;
  }
  .pex-autoplay-label { font-size: 11px; }
  .pex-autoplay-sublabel { font-size: 8px; }
}
.pex-control-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #0f172a;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  transition: background 0.15s, opacity 0.15s;
}
.pex-control-btn:hover:not(:disabled) { background: rgba(15,23,42,0.08); }
.pex-control-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.pex-hero-card {
  position: relative; /* anchors the countdown overlay */
}
.pex-next-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pex-next-overlay.hidden { display: none; }

.pex-next-overlay-unit {
  display: grid;
  grid-template-columns: 140px 1fr; /* Left column for count, right column for text details */
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 28px;
  row-gap: 6px;
  
  /* Option D: Glassmorphic Panel Base Styles */
  background: rgba(10, 15, 28, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1.5px solid rgba(13, 148, 136, 0.28); /* Thin glowing teal outline */
  border-radius: 24px;
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.65), 
    0 0 25px rgba(13, 148, 136, 0.15), /* Outer ambient cyan-teal glow */
    inset 0 1px 0 rgba(255, 255, 255, 0.15); /* Top highlight rim */
  padding: 28px 36px;
  width: min(92%, 580px); /* Widescreen ratio */
  box-sizing: border-box;
}

.pex-next-overlay-count {
  grid-column: 1;
  grid-row: 1 / span 2;
  
  /* Option D: Cyberpunk Neon Typography */
  color: #00f2fe; /* Neon Electric Cyan */
  text-shadow: 
    0 0 10px rgba(0, 242, 254, 0.7),
    0 0 35px rgba(0, 242, 254, 0.4),
    0 0 60px rgba(0, 242, 254, 0.15);
  font-family: 'Barlow', sans-serif;
  font-size: clamp(75px, 14vw, 105px);
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Vertical dividing line between left and right panes (tinted to match teal theme) */
  border-right: 1.5px solid rgba(13, 148, 136, 0.2);
  padding-right: 28px;
}
.pex-next-overlay-count.pex-count-pulse {
  animation: pexCountPulse 1s ease-out;
}
@keyframes pexCountPulse {
  0% { transform: scale(1.5); opacity: 0.2; }
  35% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.8; }
}

.hero-title-line1 {
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  white-space: nowrap;
}
.hero-title-line2 {
  font-size: clamp(0.95rem, 2.2vw, 1.3rem);
  font-weight: 700;
}

/* Widescreen Right Panel Scenario Title */
.pex-next-overlay-scenario {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  
  color: #5eead4; /* Radiant Teal matching site accent */
  font-family: 'Barlow', sans-serif;
  font-size: clamp(16px, 4.5vw, 20px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(94, 234, 212, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.pex-next-overlay-scenario i { font-size: clamp(14px, 3.6vw, 18px); }

/* Widescreen Right Panel Value Badge */
.pex-next-overlay-badge {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  
  color: #94a3b8; /* Clean balanced slate text */
  font-weight: 500;
  font-size: clamp(12px, 3.5vw, 14.5px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 16px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.pex-next-overlay-badge i { font-size: clamp(14px, 3.6vw, 18px); }

/* Responsive Fallback: Collapse back to centralized stack layout on narrow phones */
@media (max-width: 480px) {
  .pex-next-overlay-unit {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    text-align: center;
    gap: 12px;
    padding: 24px;
  }
  .pex-next-overlay-count {
    grid-column: 1;
    grid-row: 2; /* Slide the number into the middle slot */
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(13, 148, 136, 0.2);
    padding-bottom: 12px;
    width: 100%;
  }
  .pex-next-overlay-scenario {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }
  .pex-next-overlay-badge {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
  }
}

/* ══════════════════════ Batch 12 (Jul 17 2026) ══════════════════════ */

/* Batch 21: the old "lock every variable-height child to 420px" premise (Batch 12) is
   obsolete. Both Play AND a manual scenario-tab click now ALWAYS route straight into the
   95%-viewport fullscreen modal (see pexEnterFullscreen calls in see-it-in-action.js) --
   the in-place card visible on the page never actually grows anymore, so there was never
   anything to jank-proof. The 420px lock had just been sitting there as permanent dead
   space, which is what was causing the mobile pex-section to massively overshoot the
   screen. Normal-mode preview now mirrors desktop -- small, static, real playback lives
   in the modal. */
@media (max-width: 768px) {
  /* Batch 22: Ram wants every tab visible like on desktop -- no horizontal scroll.
     flex-wrap:wrap replaces the scroll/mask approach from Batch 21. min-width:0 still
     needed so the tab row itself doesn't force the page wider than the viewport (same
     bug class as the earlier carousel-width issue). */
  .pex-scenario-tabs {
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  /* Batch 22: smaller pills so more fit per row before wrapping to the next line. */
  .pex-tab {
    padding: 4px 9px;
    font-size: 10.5px;
  }
  /* Batch 22: "Real Estate AI"/"Always Online" were wrapping onto multiple lines once the
     toolbar row got tight on mobile -- chat.css's .bot-name h3/.status have no white-space
     protection. Scoped to .pex-hero-card only, chat.css itself (shared with the real live
     widget) stays untouched. */
  .pex-hero-card .bot-identity {
    min-width: 0;
    flex-shrink: 1;
  }
  .pex-hero-card .bot-name {
    min-width: 0;
    overflow: hidden;
  }
  .pex-hero-card .bot-name h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pex-hero-card .status {
    white-space: nowrap;
  }
  .pex-hero-card .pex-toolbar-badge {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Batch 22 note superseded: bumped back up from 48px -- left .hero-inner (cards column)
     towering over this compact preview on mobile, a visual imbalance flagged directly.
     180px brings #pex-section to ~78% of .hero-inner's height at a 375px viewport
     (measured via headless render, not guessed) without fully matching it, since real
     playback still lives in the fullscreen modal -- this is still just a static preview. */
  .pex-messages {
    min-height: 180px;
  }
}

/* Item 2: 95%-viewport modal overlay for autoplay/manual playback (mobile & desktop).
   .pex-hero-card is physically reparented into #pex-fullscreen-mount on enter (see JS)
   and moved back on exit -- keeps every ID/handler intact, no duplicate DOM. */
/* Item 2: blur removed entirely -- the real page behind the modal needs to stay sharp
   and completely visible, not frosted. Just a plain dark tint now, no filter. */
.pex-fullscreen-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(6,10,12,0.55) !important;
padding: 2.5vh 2.5vw;
box-sizing: border-box;
/* Item 2/7 fix: no longer flex-centering a shrink-wrapped child -- that made
   #pex-fullscreen-mount hug its own content's natural size instead of filling the
   95% padded area, which is why the card kept growing/shrinking as messages arrived
   and why maximized carousel/map never actually reached 95%. */
}
.pex-fullscreen-overlay.hidden { display: none; }
/* Batch 23 item 5: position:relative so the close button (now a child of this element,
   see index.html) resolves its position:absolute against the mount's own bounds -- which
   are sized identically to the reparented .pex-hero-card -- instead of the overlay's
   outer edges (which sat in the padding gutter, outside the rounded card). */
#pex-fullscreen-mount {
  width: 100%;
  height: 100%;
  position: relative;
}
.pex-fullscreen-overlay .pex-hero-card {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.pex-fullscreen-overlay .pex-messages {
  max-height: none;
  flex-basis: auto;
  flex: 1 1 auto;
}
/* Batch 23 item 5: now positioned against #pex-fullscreen-mount (its new parent), not the
   overlay -- smaller offset since it needs to land just inside the card's own rounded
   border, not out in the overlay's padding gutter. */
.pex-fullscreen-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: #0f172a;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.pex-fullscreen-close:hover { background: #fff; }
body.pex-fs-open, html.pex-fs-open { overflow: hidden; } /* Batch 31 item 4: body-only wasn't enough to stop wheel-scroll on the root <html> scroller in every browser */

/* Item 4 (Jul 20): both script variants shown as pills, not a single toggle. Own row
   below .chat-lang-bar -- deliberately not sharing that row, since its layout comes from
   the real chat.css which isn't visible here, and I don't want to risk squeezing it. */
/* Scoped to .pex-hero-card specifically -- there are two separate .chat-lang-bar elements
   on this page (this demo one, and the real live widget's). This selector cannot match the
   real widget's, since it isn't nested under .pex-hero-card at all -- verified directly. */
.pex-hero-card .chat-lang-bar { position: relative; }
.pex-script-subselect {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 5;
}
.pex-script-subselect.hidden { display: none; }
/* UI fix 1/2: language buttons + script subselect are SELECTION controls -- only meaningful
   back in the hero section before entering fullscreen. Once .pex-hero-card is reparented into
   the fullscreen overlay, hide both entirely and show a display-only indicator instead (below)
   showing whichever language/script was already chosen. Scoped the same way the existing
   two-.chat-lang-bar-elements convention requires. */
.pex-fullscreen-overlay .pex-hero-card .chat-lang-bar .pex-lang-btn,
.pex-fullscreen-overlay .pex-hero-card .chat-lang-bar .pex-script-subselect {
  display: none;
}
.pex-fs-lang-display { display: none; }
.pex-fullscreen-overlay .pex-hero-card .chat-lang-bar .pex-fs-lang-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* UI fix: two-part "set" display, matching the look of the language button + script pill it
   stands in for -- a small rounded chip for the language abbreviation (EN/हिं/తె, same text
   the real button shows), plain bold text for the script name next to it (Hinglish/हिंदी/etc). */
.pex-fs-lang-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 4px 9px;
  border-radius: 20px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.pex-fs-lang-script {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
/* Batch 26 item 4: dark border applied here instead (was only on :hover/.active before --
   the base/unselected state still had the original light border). Only border changed,
   background/color left exactly as they were. */
.pex-script-pill {
  padding: 3px 10px;
  border-radius: 20px;
  border: 1.5px solid #0f172a;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
/* Batch 25 item 4: dark selected state, matching the language pills -- unselected =
   white bg + dark border + dark text (already the base rule's default), selected =
   dark bg + white text. */
.pex-script-pill:hover { border-color: #0f172a; color: #0f172a; }
.pex-script-pill.active { background: #0f172a; color: #fff; border-color: #0f172a; }

/* Item 7: expand/minimize control on the carousel and map, reusing the item-2 overlay
   mechanism. Deliberately does NOT touch .pex-carousel's flex-wrap/width rules (those
   are the hard-won bulletproof fix for the recurring carousel-width bug) -- maximized
   mode just enlarges the cards and lets the map fill available height instead. */
.pex-messages { position: relative; }
.pex-carousel, .pex-geo-map-wrap { position: relative; }
.pex-content-maximized {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #fff;
  margin: 0 !important;
  border-radius: 0;
  overflow: auto;
  padding: 12px;
  box-sizing: border-box;
}
.pex-content-maximized#pex-geo-map-wrap #pex-geo-map { height: 100% !important; }

/* Item 8: match .hero-value-card's bottom-anchored shadow depth so the "See It in
   Action" container's bottom edge reads as visually aligned, not just numerically
   equal in height (per the height-sync fix). */
.pex-outer {
  box-shadow: 0 0 0 1px rgba(13,148,136,0.06), 0 20px 40px -20px rgba(13,148,136,0.18), 0 8px 24px -6px rgba(0,0,0,0.35);
}

/* Batch 20 item 4, root cause finally isolated: this used to be height:calc(100% - gap),
   which worked fine when .pex-outer was the ONLY child of .hero-visual's flex column.
   Batch 19 moved .pex-badge-row into that same column ABOVE it -- so "100%" started
   measuring against the WHOLE column instead of the space actually remaining after the
   badge row + its gap, and #pex-section rendered taller than it should by roughly the
   badge's own height. Fix: no explicit height at all -- flex:1 lets it fill exactly
   whatever space is left after the badge row, and margin-bottom (not padding, so it's
   real box-external space, not counted inside the border) stops it exactly
   --hero-trailing-gap short of the column bottom -- the SAME variable
   .hero-value-cards uses for its own margin-bottom, so these two can never drift apart
   regardless of viewport. */
#pex-section {
  flex: 1;
  min-height: 0;
  margin-bottom: var(--hero-trailing-gap);
}

/* Controls above the cards, no dots, colors matching the brand red. Consolidated Jul 20 --
   this used to exist as two separate, partially-conflicting copies (a stale teal/dots-era
   block whose margin-top:10px kept silently applying because nothing ever redeclared it).
   One definition now, so future edits can't drift out of sync with a hidden duplicate. */
/* Item 1: Back/Next pinned to the extreme edges via space-between on the outer row
   (minimum margin left/right), See All/Explain grouped in their own wrapper that sits
   naturally centered in the remaining space -- with only 3 real flex children (Back,
   the mid group, Next) and Back/Next matched in width, space-between centers the middle
   group automatically. */
.hero-cards-controls {
  display: flex;
  align-items: center;
  /* Reverted back to space-between -- with 4 fixed-width, non-growing buttons, its 3
     internal gaps are already equal by construction (free space / 3, identically). The
     earlier switch to center traded away edge-pinning to solve a problem that wasn't
     actually there, breaking Back/Next's alignment with the card edges above them. */
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--hero-v-gap-sm); /* item 2: viewport-relative, finally landed */
}
/* .hero-cards-controls-mid removed -- buttons flattened back to 4 direct children of
   .hero-cards-controls so space-between distributes all 3 gaps equally, not just
   clustering See All/Explain together in the middle. */
/* Batch 20 item 2: equal-width columns for back/full-screen/explain/next, replacing the old
   2-item space-between (which only ever balanced "back" against a grouped "expand+next").
   Now 4 buttons instead of 3 -- padding/font-size tightened across all of them so all 4
   stay comfortably legible in the same row width. */
/* Item 2: Back/Next are now icon-only and compact (flex: 0 0 auto, fixed circle size) --
   See All and Explain are the two remaining flex:1 items, so they get more room, not less,
   now that only 2 items share it instead of 4. */
/* Item 1: these now live inside .hero-cards-controls-mid, not as direct children of
   .hero-cards-controls -- selector updated to match the new nesting. */
/* Item 1: back to direct children of .hero-cards-controls -- with 4 items and
   justify-content:space-between on the parent, the three gaps (Back-SeeAll, SeeAll-Explain,
   Explain-Next) compute equally, while Back/Next (first/last child) stay pinned flush to
   the row's own edges. */
/* Overshoot fix (see .hero-value-cards above for the width/box-sizing half of this fix):
   flex:0 1 140px + min-width:0 replaces the old flex:0 0 auto + width:140px -- 140px is
   still the normal/preferred size (flex-grow:0 means it never grows past that), but
   flex-shrink:1 now lets these two buttons give up width as a last resort instead of
   forcing the row to overflow if the two rows' widths were ever even a pixel apart. */
/* Aug 2026: Explain moved up to the hero badge -- this row is now Back/See All/Next
   (3 items). space-between still gives 2 equal gaps and pins Back/Next flush to the
   row's own edges automatically, same as before. */
.hero-cards-controls > .hero-cards-expand-btn,
.hero-cards-controls > .hero-cards-explain-btn {
  flex: 0 1 140px;
  min-width: 0;
  justify-content: center;
}
.hero-cards-controls > .hero-cards-nav-btn {
  flex: 0 0 auto;
}
/* Item 2: icon-only compact circle, no more "Back"/"Next" text -- a longer arrow glyph
   (fa-long-arrow-alt) does the job the word used to. */
.hero-cards-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 40px;
  padding: 0;
  border-radius: 50px;
  cursor: pointer;
  font-size: 15px;
  background: var(--brand-red);
  border: 1px solid var(--brand-red);
  color: #fff;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.hero-cards-nav-btn:hover { background: #cf1114; }
/* Batch 27 item 1: disabled Back/Next now dim instead of disappearing. */
.hero-cards-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.hero-cards-nav-btn:disabled:hover {
  background: var(--brand-red);
}
#hero-cards-next:hover { transform: translateX(1px); }

/* Batch 19 item 3: relabeled with "Full Screen" text, so it's now a pill matching the
   back/next buttons' shape instead of a bare round icon button -- lets all three fit
   horizontally in one row without one looking visually orphaned. */
/* height:40px explicit on both, matching .hero-cards-nav-btn -- previously all three sized
   by content, which is exactly why Explain (two-line label+sublabel) ended up taller than
   Back/Next/See All (single line). */
.hero-cards-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  background: var(--brand-red);
  border: 1px solid var(--brand-red);
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s;
}
.hero-cards-expand-btn:hover { background: #cf1114; }

/* Item 2: Explain now matches See All's brand-red theme instead of standing out in teal. */
.hero-cards-explain-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  background: var(--brand-red);
  border: 1px solid var(--brand-red);
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s;
}
.hero-cards-explain-btn:hover { background: #cf1114; }

/* Visibility driven purely by DOM position -- hidden by default, forced visible ONLY when
   actually inside the fullscreen overlay. JS never has to remember to toggle a class. */
/* Item 2 round 2, root cause of last round's fix reading as "not done": the overlay
   sitting BEHIND this wrap is already a dark, blurred, fairly opaque scrim of its own
   (rgba(6,10,12,0.72)) -- layering a similarly-dark translucent blur on top of another
   similarly-dark translucent blur has almost no visible daylight between them, no matter
   how correct the CSS is. A diagonal sheen gradient (classic glass-panel technique) plus a
   bright top inner-highlight makes the glossiness self-evident regardless of what colour
   happens to be behind it, rather than depending on background contrast that may not
   exist. */
/* Item 2 round 3: See All and Explain now genuinely differ, not just in content --
   See All keeps a fully solid, opaque background (no transparency at all). Explain's
   outer layer is translucent, with NO blur (the real page must stay sharp/visible through
   it), while its own inner box (.hero-tour-stage) stays solid regardless -- context is
   tracked via a class set by heroOpenFullscreenAll()/heroOpenExplain(), not by content,
   since both flows share this same element. */
.hero-cards-fullscreen-wrap {
display: none !important;
width: 100%;
height: 100%;
overflow-y: auto;
border-radius: 20px;
padding: 32px;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: var(--panel-teal-1) #0b1113;
}
.hero-cards-fullscreen-wrap.pex-context-seeall {
background: #0b1113;
}
.hero-cards-fullscreen-wrap.pex-context-explain {
background: transparent;
border: none;
padding: 0;
}
/* The outer wrap-level title is only for "See All" grid mode now -- Explain shows its own
   copy nested inside .hero-tour-stage instead, so its top gap and the payoff's bottom gap
   share the exact same padding chain (wrap + stage), giving true pixel symmetry. */
.hero-cards-fullscreen-wrap.pex-context-explain > .hero-cards-fullscreen-title {
display: none;
}
.hero-tour-window-title {
font-family: 'Barlow Condensed', serif;
color: #fff;
font-size: clamp(16px, 4vw, 22px);
margin: 0;
text-align: center;
white-space: nowrap;
}
@media (max-width: 768px) {
.hero-tour-window-title { white-space: normal; }
}
.hero-cards-fullscreen-wrap::-webkit-scrollbar {
width: 8px;
}
.hero-cards-fullscreen-wrap::-webkit-scrollbar-track {
background: #0b1113;
}
.hero-cards-fullscreen-wrap::-webkit-scrollbar-thumb {
background: var(--panel-teal-1);
border-radius: 4px;
border: 2px solid #0b1113;
}
.hero-cards-fullscreen-wrap::-webkit-scrollbar-thumb:hover {
background: var(--primary);
}
/* Show wrap ONLY when nested inside the active fullscreen overlay */
/* Item 4: flex column so the tour stage (flex:1) can stretch to fill whatever vertical
   space is left below the title, instead of sizing to its own content and leaving dead
   space between it and the wrap's bottom padding. The grid view isn't affected -- it has
   no flex-grow set, so it still just sizes to its own content exactly as before. */
.pex-fullscreen-overlay .hero-cards-fullscreen-wrap {
display: flex !important;
flex-direction: column;
}
/* Item 2: needs to paint ON TOP of the tour stage, since the stage now extends its solid
   background up to cover this title's screen position (see .hero-tour-stage below). */
.hero-cards-fullscreen-title {
font-family: 'Barlow Condensed', serif;
color: #fff;
font-size: clamp(16px, 4vw, 22px);
margin: 0 0 24px 0;
text-align: center;
white-space: nowrap;
position: relative;
z-index: 2;
}
.hero-cards-fullscreen-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
/* Aug 2026: cards in the See All grid reuse .hero-value-card's markup/styling for visual
   consistency, but have no click handler here (only the compact 5-at-a-time cards do,
   via heroOpenExplainCard) -- the inherited pointer cursor wrongly implied they were
   clickable. Scoped override, doesn't touch the compact view's real clickability. */
.hero-cards-fullscreen-grid .hero-value-card {
  cursor: default;
}
@media (min-width: 1025px) {
.hero-cards-fullscreen-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px;
}
}
@media (max-width: 768px) {
.hero-cards-fullscreen-title {
white-space: normal;
}
}

/* ── Guided Tour: entry button ── */
.hero-tour-btn-row {
text-align: center;
margin-bottom: 24px;
}
.hero-tour-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
background: var(--primary);
border: 1px solid var(--primary);
color: #fff;
border-radius: 20px;
cursor: pointer;
font-size: 13px;
font-weight: 700;
font-family: 'Barlow', sans-serif;
transition: all 0.2s;
}
.hero-tour-btn:hover {
background: var(--primary-dark);
transform: translateY(-1px);
}
.hero-tour-hidden { display: none !important; }

/* ── Guided Tour: presentation stage ── */
/* Items 3/4/5: flex:1 makes it stretch to fill the wrap (item 4). justify-content changed
   from center to flex-start -- with the stage now much taller, centering would have pushed
   the header row DOWN from the top instead of up against it, which is the opposite of what
   item 3 asked for; content now stacks from the top, any leftover space sits below the
   caption instead. Top padding cut way down (item 3) since the wrap's own title above
   already provides breathing room. Own background + border (item 5) so it reads as a
   distinct panel inset into the wrap, instead of blending into the wrap's identical dark
   background. */
/* Item 2: negative top margin pulls the stage's solid background up to also cover
   "Everything aiValue does for you" -- padding-top increased to compensate, so the
   stage's OWN internal content (the 1-of-25/title row) still starts below the covered
   title, not overlapping it. z-index:1 keeps it under the title (z-index:2) in paint
   order despite now occupying the same screen area. */
/* Item 1: pulled up less aggressively (-68px, was -80px) so the top margin (24px, measured)
   sits closer to the bottom margin (33px) -- true pixel-for-pixel symmetry would mean
   almost no buffer left above the title, so this is a deliberate middle ground, not a
   perfect match. Padding-top reduced to match (78px, was 90px) so the header row's own
   screen position stays where it was. */
.hero-tour-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 40px;
flex: 1;
min-height: 0;
padding: 20px 16px;
position: relative;
z-index: 1;
background: #142225;
border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--radius-lg);
}
.hero-tour-stage.hidden { display: none !important; }
/* Item 3: progress + title now share one row -- progress pinned to the left edge via
   absolute positioning against this relatively-positioned row, title centered across the
   FULL row width via the row's own flex justify-content:center (not squeezed into
   leftover space next to progress, which would visibly off-center it). */
.hero-tour-header-row {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.hero-tour-progress {
font-family: 'Barlow Condensed', serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--accent-teal);
text-transform: uppercase;
padding: 6px 16px;
border: 1px solid rgba(94,234,212,0.3);
border-radius: 50px;
background: rgba(13,148,136,0.1);
white-space: nowrap;
}
.hero-tour-card-title {
font-family: 'Barlow Condensed', serif;
font-size: clamp(20px, 4vw, 26px);
color: var(--text-dim-on-dark);
margin: 0;
text-align: center;
}
/* Item 6: now a vertical stack (compare-grid on top, savings banner below) instead of
   one replacing the other -- everything lives in one continuous view now. */
.hero-tour-visual {
width: 100%;
max-width: 760px;
--tour-panel-size: min(100%, 60vh, 480px);
flex: 1;
min-height: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
@media (max-height: 700px) {
.hero-tour-visual { --tour-panel-size: min(100%, 42vh, 380px); }
}
.hero-tour-visual.hero-tour-hidden { display: none !important; }
.hero-tour-header-row.hero-tour-hidden { display: none !important; }
/* Item 3: now lives inside .tour-savings-reveal (was a separate element below the visual
   area -- the savings box's own growing height was overlapping/hiding it). Fits the
   compact banner instead of assuming full standalone width. */
.hero-tour-caption {
max-width: 100%;
text-align: center;
font-size: 13px;
color: var(--text-dim-on-dark);
line-height: 1.5;
min-height: 20px;
margin: 8px 0 0 0;
overflow-wrap: break-word;
word-break: break-word;
}

/* Click-anywhere pause/resume -- reuses .pex-fs-pause-icon (already styled) for the
   "Resume" pill itself, same visual language as the chat demo's own pause overlay. */
.hero-tour-pause-overlay {
display: block;
position: absolute;
inset: 0;
z-index: 50;
cursor: pointer;
background: transparent;
}
@media (max-width: 768px) {
.hero-tour-pause-overlay {
position: fixed;
top: 2.5vh;
left: 2.5vw;
right: 2.5vw;
bottom: 2.5vh;
}
}
.hero-tour-pause-overlay.pex-fs-paused {
display: flex;
/* No dulling -- content stays exactly as it looked while playing, background removed
   entirely. Resume moves to the bottom-left corner instead of dead center so it never
   blocks the view of what's actually on screen. */
align-items: flex-end;
justify-content: flex-start;
padding: 20px;
background: transparent;
border-radius: var(--radius-lg);
}
.hero-tour-pause-overlay.pex-fs-paused .pex-fs-pause-icon {
display: flex;
}

/* ── Card 1 visual: "The Bill" ── */
/* Item 8: shows the actual hero-value-card (same class, so it's pixel-identical to what's
   in the hero section) large and centered, holds briefly, then zooms/fades out before the
   real explanation (header row + tables) takes over. hero-value-card-grid on it disables
   the card's own left-slide-in entrance animation, since this gets its own entrance here. */
/* Item 4 round 2: flex:1 so this fills the SAME available vertical space the header-row +
   tables would occupy (the stage itself is flex:1 inside the wrap) -- previously this only
   sized to its own small content+padding box, so the card centered within that tiny box
   rather than the full cards-display area, which read as "not really centered". */
.tour-compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
width: 100%;
align-items: stretch; /* item 4: both cards match height regardless of content differences */
position: relative;
}
.tour-compare-grid.hero-tour-hidden { display: none !important; }
@media (max-width: 640px) {
/* Same fix as .tour-visual-image below -- Card 1 uses a completely separate pair of
   elements (tour-compare-grid/tour-bill-*), so it never picked up that fix at all.
   Both sides now share one slot here too, swapped via a dedicated wipe element. */
.tour-compare-grid { grid-template-columns: 1fr; }
.tour-compare-grid > .tour-img-panel {
  grid-column: 1;
  grid-row: 1;
}
}
.tour-bill-card {
width: var(--tour-panel-size);
margin: 0 auto;
border-radius: var(--radius-lg);
padding: 18px 18px;
box-shadow: var(--shadow-lg);
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.tour-bill-old {
background: var(--panel-teal-1);
border: 1px solid rgba(255,255,255,0.08);
}
.tour-bill-new-card-visual {
background: linear-gradient(160deg, #113330, #0b2422);
border: 1px solid rgba(94,234,212,0.35);
box-shadow: 0 0 28px rgba(13,148,136,0.25), var(--shadow-lg);
}
@keyframes tourCardIn {
to { opacity: 1; transform: translateY(0); }
}
/* Card 1's two panels now reuse .tour-img-panel (same wrapper every image-type card uses)
   for identical badge placement, fade-in, and hide/show handling -- standardized. */
.tour-img-panel.tour-card-in {
animation: tourCardIn 0.5s ease forwards;
}
/* Item 4: descriptions only, no per-row amounts -- one shared row style for both cards,
   the right card's cross-mark span is simply absent on the left card's rows. */
/* Item 5: fixed-length line-height (not a unitless multiplier) so both the label span and
   the cross-mark span resolve to the SAME literal line box regardless of their own
   font-size -- a unitless value recomputes per child based on that child's font-size,
   which is why an earlier attempt at this (matching 1.3 on both) still left rows with a
   cross-mark ~2px taller than plain rows. Verified via direct measurement: all 6
   corresponding rows between the two tables now sit at 0px difference. */
.tour-bill-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 12.5px;
line-height: 16px;
min-height: 24px;
color: #e2e8f0;
padding: 7px 0;
opacity: 0;
transform: translateY(6px);
box-sizing: border-box;
}
.tour-bill-row.tour-row-in {
animation: tourRowIn 0.4s ease forwards;
}
@keyframes tourRowIn {
to { opacity: 1; transform: translateY(0); }
}
.tour-cross-mark {
color: #f87171;
font-weight: 700;
font-size: 14px;
/* deliberately no line-height here -- inherits the row's fixed 16px so both children
   resolve to the identical line box regardless of their own font-size. */
flex-shrink: 0;
}
.tour-bill-total {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.12);
font-size: 12.5px;
font-weight: 700;
color: #fff;
opacity: 0;
}
.tour-bill-total.tour-row-in {
animation: tourRowIn 0.5s ease forwards;
}
.tour-bill-total-amt {
font-family: 'Barlow Condensed', serif;
font-size: 15px;
color: #fbbf24;
white-space: nowrap;
}
.tour-bill-total-amt-new {
font-family: 'Barlow Condensed', serif;
font-size: 15px;
color: var(--accent-teal);
white-space: nowrap;
}
.tour-bill-total-label {
white-space: nowrap;
flex-shrink: 0;
}
/* Item 6: compact banner sitting below the tables (not a full-screen takeover anymore) --
   solid background per item 3 (inner boxes stay solid even though the outer window is now
   glossy/translucent). */
/* The wipe bar sweeps across the card; content underneath swaps at roughly its
   midpoint, timed in JS, so the swap itself is hidden behind the bar. */
.tour-bill-wipe {
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
background: linear-gradient(100deg, transparent 0%, var(--primary) 40%, var(--accent-teal) 50%, var(--primary) 60%, transparent 100%);
transform: translateX(-130%);
pointer-events: none;
opacity: 0;
z-index: 2;
}
.tour-bill-wipe.tour-wipe-play {
animation: tourWipe 0.9s ease-in-out forwards;
}
@keyframes tourWipe {
0% { transform: translateX(-130%); opacity: 1; }
100% { transform: translateX(130%); opacity: 1; }
}

/* ── Card 2+ visual: left/right photo comparison, Grok-generated, uploaded per card ── */
.tour-visual-image {
  width: 100%; max-width: 680px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  position: relative;
}
@media (max-width: 640px) {
  /* Mobile only: both panels now share the SAME grid cell (one slot, not a vertical
     stack) -- JS explicitly hides the left one before revealing the right, so only one is
     ever actually on screen at a time here. Desktop's side-by-side grid above is
     unaffected. */
  .tour-visual-image { grid-template-columns: 1fr; }
  .tour-visual-image .tour-img-panel {
    grid-column: 1;
    grid-row: 1;
  }
  .tour-img-swap-wipe {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(100deg, transparent 0%, var(--primary) 40%, var(--accent-teal) 50%, var(--primary) 60%, transparent 100%);
    transform: translateX(-130%);
    pointer-events: none;
    opacity: 0;
    z-index: 5;
  }
  .tour-img-swap-wipe.tour-wipe-play {
    animation: tourWipe 0.6s ease-in-out forwards;
  }
  /* Same class, second instance -- one lives in tour-compare-grid (Card 1), the other in
     tour-visual-image (cards 2-13). Both need position:relative on their parent, which
     tour-compare-grid now has above. */
}
.tour-img-panel {
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.tour-img-panel.tour-img-panel-in { opacity: 1; transform: translateY(0); }
.tour-img-photo-box {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
width: var(--tour-panel-size);
aspect-ratio: 1 / 1;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
@media (max-height: 700px) {
.hero-tour-stage { padding: 14px 16px; gap: 16px; }
}
.tour-img-panel-right .tour-img-photo-box { border: 1px solid rgba(94,234,212,0.35); box-shadow: 0 0 28px rgba(13,148,136,0.25), 0 10px 30px rgba(0,0,0,0.3); }
.tour-img-photo {
width: 100%; height: 100%; object-fit: cover; display: block;
opacity: 1;
transition: opacity 0.2s ease;
}
.tour-img-photo.tour-img-loading { opacity: 0; }
.tour-img-badge {
  align-self: center;
  font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 800;
  color: #fff; background: rgba(0,0,0,0.65);
  padding: 6px 18px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.15);
}
/* aiValue's badge gets a vibrant teal glow so it reads as the "premium" side of the
   comparison, using the same accent-teal/primary tokens the rest of the site already
   leans on -- not a new color, just more presence. */
.tour-img-badge-ai {
  background: linear-gradient(135deg, rgba(13,148,136,0.45), rgba(94,234,212,0.3));
  border: 1px solid rgba(94,234,212,0.65);
  box-shadow: 0 0 18px rgba(94,234,212,0.55), 0 0 4px rgba(94,234,212,0.8);
  text-shadow: 0 0 8px rgba(94,234,212,0.6);
}
/* ── Generic payoff banner, shared by cards 2-25 (card 1 keeps its own tour-savings-reveal) ── */
.tour-payoff-reveal {
width: 100%;
text-align: center;
opacity: 0;
margin-top: auto;
box-sizing: border-box;
}
.tour-payoff-reveal.hero-tour-hidden { display: none !important; }
.tour-payoff-reveal.tour-card-in { animation: tourCardIn 0.6s ease forwards; }
.tour-payoff-text {
font-family: 'Barlow Condensed', serif;
font-weight: 700;
font-size: clamp(15px, 3.4vw, 24px);
color: var(--accent-teal);
text-shadow: 0 0 16px rgba(94,234,212,0.3);
margin: 0;
white-space: nowrap;
}

/* Mobile Explain layout -- desktop's "stretch to fill height, then anchor payoff to the
   bottom" design only makes sense on a wide-short window. On a narrow-tall phone it leaves
   a large dead gap in the middle before the payoff line ever appears. Mobile instead flows
   top-to-bottom at natural content height with one consistent gap throughout, matching the
   desktop screenshot's overall rhythm rather than its exact pixel values. Nothing above
   this block is touched -- desktop is unaffected. */
@media (max-width: 768px) {
.hero-tour-stage {
flex: 1;
justify-content: flex-start;
overflow-y: auto;
gap: 20px;
padding: 20px 14px;
}
.hero-tour-visual {
flex: 1;
min-height: 0;
gap: 20px;
}
.tour-payoff-text {
font-size: clamp(20px, 4vw, 26px);
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
}

/* Landscape phones: dropped the CSS rotation-lock approach entirely -- it failed on two
   different real browsers (Chrome, then Firefox) for reasons that didn't fully resolve
   even after fixing the identifiable bugs, and iOS has no real orientation-lock API to
   fall back on either. Simple, reliable, on-brand rotate prompt instead: real content
   stays hidden (not destroyed -- audio/tour state keeps running quietly underneath, so
   rotating back to portrait resumes right where it was), replaced by an animated icon +
   message using the site's own teal/dark palette and type instead of a bare text block. */
@media (orientation: landscape) and (max-width: 926px) and (max-height: 500px) {
#pex-fullscreen-mount {
display: none;
}
.pex-fullscreen-overlay {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 22px;
text-align: center;
background: #0b1416 !important;
padding: 0;
}
.pex-fullscreen-overlay::before {
content: "\f3cd";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: min(64px, 14vh);
color: var(--accent-teal);
text-shadow: 0 0 28px rgba(94,234,212,0.45);
animation: pexRotateHint 1.8s ease-in-out infinite;
}
.pex-fullscreen-overlay::after {
content: "Please rotate your device back to portrait to continue";
font-family: 'Barlow', sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.6;
color: var(--text-dim-on-dark);
max-width: 320px;
padding: 0 20px;
}
@keyframes pexRotateHint {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(-90deg); }
}
}
.hero-value-card-grid {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 768px) {
  .hero-cards-controls { min-width: 0; gap: 8px; }
  .hero-cards-nav-btn { width: 48px; height: 38px; font-size: 12px; padding: 0; }
  .hero-cards-controls > .hero-cards-expand-btn,
  .hero-cards-controls > .hero-cards-explain-btn {
    flex: 0 1 104px;
    min-width: 0;
    height: 38px;
    padding: 0 8px;
    font-size: 11px;
  } 
}
/* item 3 (Jul 20): .hero-inner{text-align:center} correctly centers the badge/title, but
   it was also inherited by the card text -- fine for a short h4, but centers each wrapped
   line of the description paragraph, which reads badly. Explicit override, scoped to the
   cards only so the badge/title centering is untouched. */
.hero-value-card h4, .hero-value-card p { text-align: left; }

/* Batch 23 item 13: the default .interest-toast is white-space:nowrap (fine for its
   original short "Thanks!" message) -- the language-request message is longer, needs to
   wrap and stay readable. */
.interest-toast.pex-lang-toast {
  white-space: normal;
  max-width: 320px;
  text-align: center;
}

/* Batch 25 item 1: click-catch layer, active (clickable) ONLY inside the fullscreen
   modal -- invisible while playing, shows a centered play icon + dark scrim once paused. */
.pex-fs-pause-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.pex-fullscreen-overlay .pex-messages .pex-fs-pause-overlay {
  display: block;
  background: transparent;
}
/* Aug 2026: was align-items/justify-content:center (inherited from the base rule, never
   overridden here) -- Resume sat dead-center regardless of message content. Now matches
   the hero-tour/How It Works pause overlay exactly: bottom-left, pinned there because the
   overlay box itself is flex-driven to fill the fullscreen modal (not grown by content),
   so anchoring to its own corner keeps Resume in the same spot no matter how much
   conversation is behind it. */
.pex-fullscreen-overlay .pex-messages .pex-fs-pause-overlay.pex-fs-paused {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 20px;
  background: rgba(15,23,42,0.55);
}
.pex-fullscreen-overlay .pex-messages .pex-fs-pause-overlay.pex-fs-paused .pex-fs-pause-icon {
  display: flex;
}
/* Batch 26 item 1, root cause: no display:none default meant this always rendered
   top-left of its transparent parent regardless of pause state -- only the flex-centering
   was gated on .pex-fs-paused, never the visibility. Now hidden by default, and redesigned
   as a "Replay" pill (dark, matching the site's selected-pill theme) instead of a bare
   circle icon. */
.pex-fs-pause-icon {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 50px;
  background: #0f172a;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.pex-fs-pause-icon i { font-size: 12px; }

/* Batch 26 item 3: was referenced in index.html but never actually styled, hence
   "doesn't match the theme" -- matches the product-custom-group / pricing card aesthetic
   already used elsewhere, price highlighted in brand-red serif like the pricing card. */
.lang-request-details {
  background: var(--bg-off);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 20px;
  text-align: left;
}
.lang-request-details p {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.6;
  margin: 0 0 12px;
}
.lang-request-details p strong { color: var(--primary); }
.lang-request-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Batch 28 items 5/6/7 note superseded for How It Works specifically: it no longer
   shares the one-viewport-tall/centered treatment with Pricing and the paired
   Customize/Features row -- Ram flagged it as too long/dull with too much dead space
   (826px section height for ~280px of actual content at 1280px, measured). It's now
   content-driven + visually redesigned instead (see the new block below). Pricing and
   the paired grid keep the original one-viewport rhythm untouched. */
@media (min-width: 769px) {
  #pricing {
    min-height: calc(100vh - var(--header-h) - var(--subheader-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* Batch 28 item 10: had no CSS at all -- default browser paragraph styling, hence no width
   match or positioning relative to the card. Matches .pricing-card-main's new max-width
   exactly so it sits directly below, same width, centered. */
.pricing-footnote {
  max-width: none;
  margin: 0;
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.6;
  text-align: left;
}
.pricing-footnote + .pricing-footnote { margin-top: 10px; }
.pricing-footnote i { margin-right: 4px; color: var(--primary-dark); }

/* Batch 29 item 1: DM Sans (the inherited body font) apparently lacks a proper ₹ glyph,
   causing a fallback-font substitution that renders it oddly. Lora (used by Pricing's
   currency symbol) renders it correctly -- forcing just this character into Lora. */
.rupee-fix { font-family: 'Lora', serif; }

/* Batch 31 (round 8) item 4: guarantee this always renders above .pex-content-maximized
   (z-index: 20), whatever its base z-index was set to elsewhere -- otherwise pausing while
   the map is enlarged could show the pause overlay hidden behind it. */
.pex-fs-pause-overlay.pex-fs-paused { z-index: 21 !important; }

/* =========================================================
   SELECT LANGUAGE CALLOUT TOOLTIP & LANG BAR OPTIMIZATIONS
   ========================================================= */
.pex-lang-tooltip {
  position: absolute;
  bottom: 42px; /* Floats directly above the bottom language bar */
  left: 12px;   /* Starts directly above the first button (EN) */
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(29,31,32,0.16);
  color: var(--primary);
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none; /* Allows clicks to pass through to underlying card messages */
  
  /* GPU Accelerated combined Horizontal Glide and Vertical Bob animation */
  animation: pexTooltipScan 8s ease-in-out infinite;
}
.pex-lang-tooltip.hidden {
  display: none !important;
}

/* Tooltip pointing tail (aligned to the left edge of the bubble to act as a moving pointer) */
.pex-lang-tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 16px; /* Points cleanly near the left edge of the bubble, directly at the scanned button */
  width: 10px;
  height: 10px;
  background: #fff;
  border-right: 1px solid rgba(29,31,32,0.16);
  border-bottom: 1px solid rgba(29,31,32,0.16);
  transform: rotate(45deg);
}

.pex-lang-tooltip-dot {
  width: 5px;
  height: 5px;
  background: var(--primary);
  border-radius: 50%;
  animation: blink 1.5s infinite;
  box-shadow: none;
}

/* Pure Horizontal Scanning Glide Animation Cycle */
@keyframes pexTooltipScan {
  0%, 100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(165px); /* Reaches the rightmost language buttons smoothly */
  }
}

/* Auto-hide tooltip during active play or fullscreen modes to prevent visual overlaps */
.pex-playing .pex-lang-tooltip,
.pex-fullscreen-overlay .pex-lang-tooltip {
  display: none !important;
}

/* Scoped condensed Lang Bar layout adjustments */
.pex-hero-card .chat-lang-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 8px 10px !important;
  flex-wrap: nowrap !important; /* Forces single line containment */
  overflow: visible !important; /* Must be visible so absolutely-positioned script subselect can render above the bar */
}

.pex-hero-card .chat-lang-bar .pex-lang-btn {
  padding: 3px 6.5px !important; /* Narrower padding to accommodate all buttons */
  font-size: 11px !important;
  flex-shrink: 1 !important;
  min-width: 25px !important;
  text-align: center !important;
}

.pex-hero-card .chat-lang-bar .lang-bar-powered {
  margin-left: auto !important; /* Pin to the extreme right margin */
  font-size: 10px !important;
  white-space: nowrap !important;
  color: var(--text-muted) !important;
  opacity: 0.82 !important;
  padding-left: 6px !important;
}

/* Mobile responsive tight scaling */
@media (max-width: 375px) {
  .pex-hero-card .chat-lang-bar {
    gap: 3px !important;
    padding: 6px 6px !important;
  }
  .pex-hero-card .chat-lang-bar .pex-lang-btn {
    padding: 3px 4px !important;
    font-size: 10.5px !important;
    min-width: 22px !important;
  }
  .pex-hero-card .chat-lang-bar .lang-bar-powered {
    display: none !important; /* Hide powered branding on narrow viewports to preserve button spacing */
  }
}

/* =========================================================
   LANG REQUEST MODAL — CONSOLIDATED GLASSMORPHIC (OPTION C)
   ========================================================= */
#lang-request-modal .auth-box {
  background: rgba(10, 14, 23, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  border-radius: 24px;
  padding: 40px 32px 30px; /* Roomy, professional padding */
  width: min(92%, 540px) !important; /* Widened to 540px to comfortably hold the single-line text */
  max-width: none !important; /* Overrides the global auth-box 380px width cap */
  box-sizing: border-box;
}

#lang-request-modal .auth-title {
  color: #ffffff;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  background: linear-gradient(135deg, #ffffff 40%, #00f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 18px !important; /* Premium readable desktop font size */
  margin-bottom: 16px;
  text-align: center;
  
  /* Straight single-line display on desktop */
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

#lang-request-modal .lang-request-details {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 24px;
  text-align: center;
}

#lang-request-modal .lang-request-details p {
  color: #cbd5e1;
  font-size: 12.5px !important; /* Adjusted slightly to guarantee containment inside borders */
  line-height: 1.6;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  
  /* Straight single-line display on desktop */
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

#lang-request-modal .lang-request-details p strong {
  color: #00f2fe;
}

#lang-request-modal .lang-request-price {
  color: #ffffff;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 11px;
  background: rgba(0, 242, 254, 0.07);
  border: 1px solid rgba(0, 242, 254, 0.15);
  padding: 6px 14px;
  border-radius: 50px;
  width: 100%;
  box-sizing: border-box;

  /* Standard block text flow forces inline elements to cluster tightly at the center */
  display: block !important;
  text-align: center !important;
}

#lang-request-modal .lang-request-price .rupee-fix {
  color: #00f2fe;
  display: inline !important; /* inline flow is immune to flexbox stretching gaps */
  margin-right: 3px !important; /* tiny precise spacer gap before digits */
  position: static !important;
  float: none !important;
}

#lang-request-modal .google-signin-btn-el {
  background: #ffffff; /* Contrast white button */
  border: 1px solid #ffffff;
  border-radius: 50px;
  padding: 12px 18px;
  color: #0f172a;
  font-weight: 700;
  transition: transform 0.2s;
}

#lang-request-modal .google-signin-btn-el:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

#lang-request-modal .lang-request-cancel-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 14px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s;
}

#lang-request-modal .lang-request-cancel-btn:hover {
  color: #ffffff;
}

#lang-request-modal .auth-close-btn {
  color: rgba(255, 255, 255, 0.3);
}

#lang-request-modal .auth-close-btn:hover {
  color: #ffffff;
}

/* Mobile responsive fallback to prevent any clipping/truncation on narrow viewports */
@media (max-width: 540px) {
  #lang-request-modal .auth-box {
    padding: 32px 20px 24px !important; /* Compact mobile fit */
  }
  #lang-request-modal .auth-title {
    white-space: normal !important; /* Allows natural fluid wrapping on mobile */
    font-size: clamp(14px, 4.2vw, 16px) !important; /* Comfortable fluid mobile title scale */
    line-height: 1.4 !important;
  }
  #lang-request-modal .lang-request-details p {
    white-space: normal !important; /* Allows natural fluid wrapping on mobile */
    font-size: clamp(11px, 3.2vw, 13px) !important; /* Comfortable fluid mobile body scale */
    line-height: 1.5 !important;
  }
}

.share-fab-wrapper {
  position: fixed;
  top: calc(var(--header-h) + 16px);
  right: 28px;
  z-index: 550;
  display: flex;
  align-items: center;
  gap: 10px;
}
.share-fab-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,0.08);
  color: var(--text-main);
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.06);
  transition: all 0.25s;
  position: relative;
  cursor: pointer;
}
.share-fab-btn::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13,148,136,0.45), transparent 70%);
  opacity: 0;
  transition: opacity 0.25s;
  z-index: -1;
}
.share-fab-btn:hover {
  color: var(--primary);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 12px 28px rgba(13,148,136,0.3);
}
.share-fab-btn:hover::before { opacity: 1; }
.share-fab-tooltip {
  background: var(--text-main);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  padding: 6px 12px;
  border-radius: 6px;
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.2s;
  pointer-events: none;
  white-space: nowrap;
}
.share-fab-wrapper:hover .share-fab-tooltip {
  opacity: 1;
  transform: translateX(0);
}
@media (min-width: 769px) {
  .share-fab-wrapper { display: none; }
}
@media (max-width: 768px) {
  .share-fab-wrapper { top: calc(var(--header-h) + 10px); right: 14px; gap: 0; }
  .share-fab-btn { width: 42px; height: 42px; font-size: 17px; }
  .share-fab-tooltip { display: none; }
}

.header-share-wrap {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 14px;
}
.header-share-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(29,31,32,0.16);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.header-share-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(65,97,128,0.08);
}
@media (max-width: 768px) {
  .header-share-wrap { display: none; }
  /* .header-share-wrap normally carries the only margin-left:auto in the header row,
     pushing itself + header-actions to the right together. It's hidden on mobile, so
     header-actions lost its only right-alignment anchor -- Login was rendering in
     normal flow right after the logo instead of pushed right. Scoped to mobile only
     so desktop (where header-share-wrap is visible and already handles this) is
     untouched. */
  .header-actions { margin-left: auto; }
}

/* Ingestion Test Lab (admin-only) */
.ingest-vendor-col { background: var(--panel-teal-1); border-radius: 10px; padding: 16px; min-height: 200px; }
.ingest-vendor-col h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #fff; font-size: 15px; }
.ingest-vendor-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; font-weight: 600; }
.ingest-status-pending { background: #94a3b8; color: #1e293b; }
.ingest-status-success { background: var(--primary-light); color: var(--primary-dark); }
.ingest-status-failed { background: #fecaca; color: #991b1b; }
.ingest-venture-card { background: var(--panel-teal-2); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; font-size: 13px; color: #cbd5e1; line-height: 1.6; }
.ingest-prop-table { width: 100%; border-collapse: collapse; font-size: 12px; color: #cbd5e1; }
.ingest-prop-table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--panel-teal-2); color: #94a3b8; font-weight: 600; }
.ingest-prop-table td { padding: 6px 8px; border-bottom: 1px solid var(--panel-teal-2); }
@media (max-width: 900px) {
  #ingest-results { grid-template-columns: 1fr !important; }
}

.trial-field { margin-bottom: 16px; }
.trial-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.trial-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: 'Barlow', sans-serif;
  box-sizing: border-box;
}
.trial-input:focus { border-color: var(--primary); outline: none; }

/* ===========================================================
   Trial + Demo modal redesign (Sep 2026) — wider, two-column
   layout, navy header band pulling the exact color from the
   Data Security deck (#0D1F3C) + teal accent (#0B7A75), matching
   the aiValue brand deck rather than realdubai's own muted
   palette -- deliberate, since the goal here is a distinct,
   "premium" feel for these two specific CTAs. Scoped by ID so
   it never touches auth-modal/plan-picker-modal/etc, which keep
   their original look. Shared between trial + demo modals per
   Ram's explicit ask -- write once here, both modals inherit it.
   =========================================================== */
#trial-form-modal .auth-box, #demo-form-modal .auth-box {
  width: 100%;
  max-width: 640px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(13,31,60,0.35);
}
.demo-modal-header {
  background: #0D1F3C;
  padding: 28px 40px 22px;
  position: relative;
}
.demo-modal-header .auth-title {
  color: #fff;
  font-size: 22px;
  margin-bottom: 4px;
}
.demo-modal-header .auth-sub {
  color: rgba(255,255,255,0.65);
  margin-bottom: 0;
}
#trial-form-modal .auth-close-btn, #demo-form-modal .auth-close-btn {
  color: rgba(255,255,255,0.7);
  top: 16px; right: 16px;
  z-index: 5;
}
#trial-form-modal .auth-close-btn:hover, #demo-form-modal .auth-close-btn:hover {
  color: #fff;
}
.demo-modal-body {
  padding: 28px 40px 32px;
  max-height: calc(85vh - 90px);
  overflow-y: auto;
}
.demo-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.demo-field { margin-bottom: 16px; }
.demo-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.demo-input, .demo-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #B8C2CC;
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Barlow', sans-serif;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.demo-phone-row {
  display: flex;
  gap: 8px;
}
.demo-country-select {
  flex: 1 1 180px;
  padding: 11px 8px;
  border: 1.5px solid #B8C2CC;
  border-radius: 10px;
  font-size: 13px;
  font-family: 'Barlow', sans-serif;
  box-sizing: border-box;
  background: #fff;
  color: var(--text-main);
}
.demo-country-select:focus {
  border-color: #0B7A75;
  box-shadow: 0 0 0 3px rgba(11,122,117,0.15);
  outline: none;
}
.demo-isd-display {
  flex: 0 0 56px;
  padding: 11px 6px;
  border: 1.5px solid #B8C2CC;
  border-radius: 10px;
  font-size: 13px;
  font-family: 'Barlow', sans-serif;
  box-sizing: border-box;
  background: rgba(29,31,32,0.04);
  color: var(--text-main);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-phone-input { flex: 1 1 140px; min-width: 0; }
.demo-input:focus, .demo-textarea:focus {
  border-color: #0B7A75;
  box-shadow: 0 0 0 3px rgba(11,122,117,0.15);
  outline: none;
}
.demo-input.invalid {
  border-color: #D92D20;
}
.demo-field-error {
  display: block;
  font-size: 11.5px;
  color: #D92D20;
  margin-top: 4px;
  min-height: 14px;
}
.demo-consent-status {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(11,122,117,0.08);
  color: #0B7A75;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.demo-btn-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.demo-btn-consent {
  background: #0B7A75;
  color: #fff;
  border: none;
  padding: 11px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease;
}
.demo-btn-consent:disabled {
  background: #C7CDD3;
  color: #8A929A;
  cursor: not-allowed;
}
.demo-btn-consent:hover:not(:disabled) { background: #096a65; }
.demo-btn-submit {
  background: #0D1F3C;
  color: #fff;
  border: none;
  padding: 11px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.demo-btn-submit:hover:not(:disabled) { background: #08152a; }
.demo-btn-submit:disabled {
  background: #C7CDD3;
  color: #8A929A;
  cursor: not-allowed;
}
.demo-btn-back {
  background: none;
  border: 1.5px solid #B8C2CC;
  color: var(--text-muted);
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
}
.demo-consent-box {
  font-size: 12.5px;
  line-height: 1.6;
  color: #1D1F20;
  text-align: left;
  background: rgba(29,31,32,0.045);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.demo-datasource-block {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 6px;
  margin-bottom: 16px;
}
.demo-datasource-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}
.demo-datasource-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.demo-check-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
}
.demo-check-option input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: #0B7A75;
  flex-shrink: 0;
}
.demo-source-detail {
  background: rgba(13,31,60,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-top: 10px;
}
.demo-source-detail label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.demo-source-note {
  font-size: 13px;
  color: var(--text-main);
  margin: 0;
}
.demo-file-input {
  width: 100%;
  font-size: 13px;
  padding: 8px 0;
}
@media (max-width: 600px) {
  .demo-field-row, .demo-datasource-options { grid-template-columns: 1fr; }
  .demo-modal-header, .demo-modal-body { padding-left: 22px; padding-right: 22px; }
}

/* =========================================================
   realuae pixel-match pass — new hero (Design 2 replica)
   Fully namespaced under .rd2- — zero shared classes with the
   old header/hero CSS above, so nothing here can override or be
   overridden by it. Old hero hidden via .rd2-legacy-hidden, not
   deleted; see index.html comments at each insertion point.
   ========================================================= */
.rd2-legacy-hidden{ display:none !important; }

/* The real #site-header is a fixed 44px WHITE bar (see rule near the top of this file) --
   built for the old logo+share-button-only header, never meant to hold nav links + two
   buttons. Overriding here (same #site-header specificity, later in cascade = wins) rather
   than editing that original rule, so nothing about the old header's behavior changes if
   .rd2-legacy-hidden is ever removed and the old header brought back. Stays position:fixed
   (unchanged) -- .rd2-hero-grid below adds matching top clearance. */
#site-header{
  height:auto; min-height:76px;
  background:#04070d;
  border-bottom-color:rgba(255,255,255,0.08);
}
#site-header::before, #site-header::after{ display:none; } /* old gold sparkle streak — not in the reference design */
.rd2-header-inner{ padding:17px 40px; }

:root{
  --rd2-bg:#000610;
  --rd2-gold-1:#F0DDB0;
  --rd2-gold-2:#E3BD7B;
  --rd2-gold-3:#C99F63;
  --rd2-gold-on:#20160a;
  --rd2-white:#F7F7FA;
  --rd2-gray:#9BA3AF;
  --rd2-gray-dim:#6b7480;
  --rd2-card-bg:#0A1220;
  --rd2-bubble-bg:#101C2E;
  --rd2-online:#4ADE80;
  --rd2-font:'Plus Jakarta Sans','Barlow','Helvetica Neue',Arial,sans-serif;
}

.rd2-header-inner{
  display:flex; align-items:center; gap:28px;
  font-family:var(--rd2-font);
  width:100%;
}
.rd2-logo{font-size:24px; font-weight:600; white-space:nowrap;}
.rd2-logo-ai{font-weight:500; color:var(--rd2-gold-2);}
.rd2-logo-val{font-weight:700; color:var(--rd2-gold-2);}

.rd2-nav{display:flex; gap:clamp(18px,2.4vw,34px); margin-left:clamp(20px,6vw,80px);}
.rd2-nav a{font-size:14.5px; font-weight:400; color:var(--rd2-white); opacity:0.92; white-space:nowrap; text-decoration:none;}
.rd2-nav a:hover{opacity:1;}

.rd2-header-actions{display:flex; align-items:center; gap:12px; margin-left:auto;}
.rd2-btn-watch{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:9px 18px; border-radius:99px; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,0.22);
  font-family:var(--rd2-font); font-size:14px; font-weight:500; color:var(--rd2-white);
}
.rd2-watch-circle{
  width:16px; height:16px; border-radius:50%; border:1.4px solid var(--rd2-white); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:7px; line-height:1;
}
.rd2-btn-request{
  padding:9px 22px; border-radius:99px; cursor:pointer; border:none; white-space:nowrap;
  background:linear-gradient(180deg,var(--rd2-gold-1),var(--rd2-gold-3));
  color:var(--rd2-gold-on); font-family:var(--rd2-font); font-size:14px; font-weight:600;
}

.rd2-hero{
  position:relative; overflow:hidden; font-family:var(--rd2-font);
  background:var(--rd2-bg);
}
.rd2-hero-bg{
  position:absolute; inset:0;
  /* Local asset — download instructions given separately.
     "City skyline at dusk with warm orange sky" by Nejc Soklič, Dubai Marina —
     Unsplash License (free for commercial use, no attribution required). */
  background-image:
    linear-gradient(180deg, var(--rd2-bg) 0%, var(--rd2-bg) 32%, rgba(0,6,16,0.30) 50%, rgba(0,6,16,0.06) 62%, rgba(0,6,16,0.55) 78%, rgba(0,6,16,0.88) 100%),
    url('assets/hero/dubai-marina-dusk.jpg');
  background-size:cover;
  background-position:center 68%;
  background-repeat:no-repeat;
}
.rd2-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.18fr 1fr;
  gap:clamp(24px,3.5vw,40px); align-items:start;
  max-width:1360px; margin:0 auto; width:100%;
  padding:calc(76px + clamp(32px,4.5vh,48px)) clamp(24px,4vw,44px) clamp(56px,8vh,90px);
}

.rd2-badge{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:9px 20px; border-radius:99px;
  border:1px solid rgba(255,255,255,0.22); background:transparent;
  font-size:13.5px; color:var(--rd2-white);
  margin:0 0 clamp(18px,2.6vh,26px);
}
.rd2-sep{color:var(--rd2-gray-dim);}
.rd2-en{font-weight:600;}
.rd2-gold{color:var(--rd2-gold-2); font-weight:600;}

.rd2-h1{
  font-weight:700; font-size:clamp(30px,2.6vw,41px); line-height:1.18; letter-spacing:-0.3px;
  color:var(--rd2-white); margin:0 0 clamp(16px,2.4vh,26px);
}
.rd2-sub{
  font-size:clamp(15px,1.15vw,18px); line-height:1.5; color:var(--rd2-gray);
  max-width:460px; margin:0 0 clamp(20px,3vh,32px);
}

.rd2-cta-row{display:flex; align-items:center; gap:14px; margin-bottom:clamp(18px,2.6vh,28px); flex-wrap:wrap;}
.rd2-btn-primary{
  display:inline-flex; align-items:center; gap:11px; cursor:pointer; border:none; white-space:nowrap;
  padding:14px 24px; border-radius:11px; font-family:var(--rd2-font); font-size:15px; font-weight:600;
  background:linear-gradient(180deg,var(--rd2-gold-1),var(--rd2-gold-3)); color:var(--rd2-gold-on);
}
.rd2-btn-secondary{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; white-space:nowrap;
  padding:14px 24px; border-radius:11px; font-family:var(--rd2-font); font-size:15px; font-weight:500;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.20); color:var(--rd2-white);
}
.rd2-btn-secondary i{color:var(--rd2-white);}

.rd2-trust-row{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--rd2-gray); flex-wrap:wrap;}
.rd2-trust-row i{color:var(--rd2-gold-2); margin-right:7px; font-size:14px;}

.rd2-card-wrap{position:relative;}
.rd2-card{
  position:relative;
  background:var(--rd2-card-bg);
  border:1px solid rgba(230,190,120,0.35);
  border-radius:22px;
  padding:19px 20px 22px;
  box-shadow:0 0 60px rgba(220,175,100,0.14), 0 0 120px rgba(220,175,100,0.07), 0 22px 50px rgba(0,0,0,0.5);
}
.rd2-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.rd2-card-title{display:flex; align-items:center; gap:9px; font-size:18px; font-weight:700; color:var(--rd2-white);}
.rd2-spark{color:var(--rd2-gold-2); font-size:15px;}
.rd2-card-online{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--rd2-gray);}
.rd2-dot{width:7px; height:7px; border-radius:50%; background:var(--rd2-online); flex:none;}

.rd2-lang-row{display:flex; gap:8px; margin-bottom:14px;}
.rd2-lang-pill{font-size:12.5px; font-weight:700; padding:6px 15px; border-radius:99px;}
.rd2-lang-pill.active{background:linear-gradient(180deg,var(--rd2-gold-1),var(--rd2-gold-3)); color:var(--rd2-gold-on);}
.rd2-lang-pill.ghost{border:1px solid rgba(255,255,255,0.20); color:var(--rd2-white); font-weight:500;}

.rd2-msg-row{display:flex; margin-bottom:9px;}
.rd2-msg-row.user{justify-content:flex-end;}
.rd2-bubble{
  background:var(--rd2-bubble-bg); border:1px solid rgba(255,255,255,0.06);
  border-radius:13px 13px 13px 3px;
  padding:11px 14px; font-size:13.5px; line-height:1.48; color:var(--rd2-white);
  max-width:88%;
}
.rd2-bubble.user{
  border-radius:13px 13px 3px 13px;
  border:1.4px solid var(--rd2-gold-2); background:var(--rd2-bubble-bg);
  max-width:78%;
}
.rd2-bubble.hindi{
  border:1.4px solid var(--rd2-gold-2); background:var(--rd2-bubble-bg);
  border-radius:13px; max-width:100%;
}
.rd2-bubble ul{margin:6px 0; padding-left:18px;}
.rd2-bubble li{margin-bottom:3px;}
.rd2-ts{
  display:flex; justify-content:flex-end; align-items:center; gap:6px;
  font-size:11px; color:var(--rd2-gray-dim); margin-top:6px;
}
.rd2-ts i{font-size:9px;}
.rd2-hindi-label{color:var(--rd2-gold-2); font-weight:700; margin:0 0 6px; font-size:14px;}

@media (max-width:1000px){
  .rd2-hero-grid{grid-template-columns:1fr;}
  .rd2-nav{display:none;}
  .rd2-h1{white-space:normal;}
  .rd2-hero-content{margin-bottom:8px;}
}