/* ============================================================
   site-demo.css — lead-capture demo layer (loads after inline page CSS)
   Uses the page's existing tokens: --primary, --accent, --font-*
   ============================================================ */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ── Demo pitch bar ─────────────────────────────────────────── */
.demo-bar {
  background: #0b1822; color: rgba(255,255,255,.78);
  font-size: var(--text-xs); padding: 7px var(--space-sm);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; text-align: center;
}
.demo-bar b { color: #fff; font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.demo-modes { display: inline-flex; border: 1px solid rgba(255,255,255,.25); border-radius: 100px; overflow: hidden; }
.demo-mode-btn { color: rgba(255,255,255,.8); font-size: var(--text-xs); font-weight: 600; padding: 4px 12px; min-height: 28px; }
.demo-mode-btn[aria-pressed="true"] { background: var(--accent); color: var(--primary-dark); }

/* ── Status banner (existing .emergency-banner) ─────────────── */
.emergency-banner { text-transform: none; letter-spacing: .01em; }
.emergency-banner strong { text-transform: uppercase; letter-spacing: .06em; }
[data-office="closed"] .emergency-banner { background: #f2b544; }

/* ── Hero: form column + compact stat strip ─────────────────── */
.hero-lead { animation: fadeInUp .8s .15s ease-out both; min-width: 0; }
@media (min-width: 1025px) {
  .hero-container { grid-template-columns: 1.05fr .95fr; gap: var(--space-lg); align-items: start; }
  .hero { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  .hero h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem); }
}
.hero-content .hero-visual { display: block; margin-top: var(--space-md); animation: none; }
.hero-content .hero-card { animation: none; padding: var(--space-sm) var(--space-md); }
.hero-content .hero-card-title { margin-bottom: var(--space-xs); }
.hero-content .hero-stat-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-md); }
@media (max-width: 1024px) { .hero-content .hero-visual { display: none; } }

.lead-card {
  background: #fff; color: var(--gray-dark); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); padding: var(--space-md); border-top: 5px solid var(--accent);
  scroll-margin-top: 90px;
}
.lead-card h2 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; color: var(--primary); margin-bottom: 6px; letter-spacing: -.01em; }
.lead-card .lead-sub { color: var(--gray); font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 10px;
}
.status-pill::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: pulseDot 2s ease-out infinite; }
.status-pill.is-open { background: #e3f6e8; color: #1d7a3a; }
.status-pill.is-closed { background: #fff1d6; color: #8a5a00; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-grid .full { grid-column: 1 / -1; }
.lead-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lead-field label { font-family: var(--font-display); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-dark); }
.lead-field input, .lead-field select {
  width: 100%; min-height: 46px; padding: 10px 12px; font-size: 16px; color: var(--gray-dark);
  background: var(--warm-white); border: 2px solid var(--gray-light); border-radius: var(--radius-md);
  -webkit-appearance: none; appearance: none;
}
.lead-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.lead-field input:focus, .lead-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); outline: none; }
.lead-field .is-invalid { border-color: var(--red-urgent); }
.lead-error { margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-md); background: rgba(192,57,43,.1); color: var(--red-urgent); font-weight: 600; font-size: var(--text-sm); }
.lead-submit { width: 100%; justify-content: center; margin-top: 12px; padding: 15px; min-height: 52px; }
.demo-note { text-align: center; font-size: .75rem; color: var(--gray); margin-top: 8px; }

/* success state */
.lead-success { text-align: left; }
.lead-success .check { width: 48px; height: 48px; border-radius: 50%; background: #e3f6e8; color: #1d7a3a; display: grid; place-items: center; margin-bottom: 8px; }
.lead-success h3 { font-family: var(--font-display); font-size: var(--text-xl); color: var(--primary); }
.ref-chip { display: inline-block; margin: 8px 0; font-family: 'Courier New', monospace; font-weight: 700; font-size: 1.25rem; letter-spacing: .08em; background: var(--primary); color: #fff; padding: 6px 14px; border-radius: var(--radius-md); }
.next-steps { list-style: decimal; padding-left: 1.2rem; display: grid; gap: 6px; font-size: var(--text-sm); margin: 8px 0 12px; }
.sms-preview { background: #eef1f4; border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 12px; }
.sms-preview small { display: block; color: var(--gray); font-size: .7rem; margin-bottom: 4px; }
.sms-bubble { background: #34c759; color: #04200c; border-radius: 16px 16px 4px 16px; padding: 9px 12px; font-size: var(--text-sm); margin-left: auto; max-width: 92%; width: fit-content; }
.lead-success .row { display: flex; flex-wrap: wrap; gap: 10px; }
.lead-success .row a, .lead-success .row button { font-weight: 700; font-family: var(--font-display); font-size: var(--text-sm); padding: 10px 16px; border-radius: var(--radius-md); min-height: 44px; display: inline-flex; align-items: center; }
.lead-success .row a { background: var(--primary); color: #fff; }
.lead-success .row button { border: 2px solid var(--gray-light); color: var(--gray-dark); }

/* ── Trust band ─────────────────────────────────────────────── */
.trust-band { background: var(--primary-dark); color: #fff; border-bottom: 3px solid var(--accent); }
.trust-band ul { max-width: 1200px; margin: 0 auto; padding: 14px var(--space-md); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.trust-band li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.trust-band svg { width: 20px; height: 20px; color: var(--accent-light); flex: none; }

/* ── Reviews placeholder ────────────────────────────────────── */
.reviews-section { background: var(--off-white); padding: var(--space-xl) var(--space-lg); }
.reviews-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.review-slot { background: #fff; border: 2px dashed #b9c4cc; border-radius: var(--radius-lg); padding: var(--space-md); text-align: center; min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.review-slot .stars { color: #c5ced5; letter-spacing: 4px; font-size: 1.3rem; }
.review-slot p { font-family: var(--font-display); font-weight: 700; color: var(--primary); }
.review-slot .skel { width: 70%; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #e6ebef, #f4f6f8, #e6ebef); background-size: 200% 100%; animation: shimmer 2.4s linear infinite; }
.reviews-summary { text-align: center; margin-top: var(--space-md); color: var(--gray); font-size: var(--text-sm); }

/* ── Owner inbox ────────────────────────────────────────────── */
.inbox-section { background: linear-gradient(180deg, #0d1f2d, #14334a); color: #fff; padding: var(--space-xl) var(--space-lg); scroll-margin-top: 70px; }
.inbox-wrap { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-lg); align-items: start; }
.inbox-copy h2 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -.02em; margin-bottom: var(--space-sm); }
.inbox-copy > p { color: rgba(255,255,255,.8); margin-bottom: var(--space-md); }
.inbox-steps { display: grid; gap: 14px; counter-reset: s; }
.inbox-steps li { counter-increment: s; position: relative; padding-left: 46px; color: rgba(255,255,255,.88); }
.inbox-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--primary-dark); font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; }
.inbox-steps b { display: block; color: #fff; }
.inbox-panel { background: #f4f7f9; color: var(--gray-dark); border-radius: 22px; box-shadow: var(--shadow-xl); overflow: hidden; min-width: 0; }
.inbox-head { background: #fff; padding: 14px 18px; border-bottom: 1px solid #e3e8ec; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.inbox-head h3 { font-family: var(--font-display); color: var(--primary); font-size: var(--text-lg); }
.inbox-head small { color: var(--gray); }
.inbox-summary { padding: 10px 18px; font-size: var(--text-sm); background: #e9eff3; display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.txt-urgent { color: var(--red-urgent); font-weight: 700; }
#inbox-clear { font-size: .75rem; text-decoration: underline; color: var(--gray); min-height: 32px; }
.inbox-list { padding: 12px; display: grid; gap: 10px; max-height: 560px; overflow-y: auto; }
.inbox-card { background: #fff; border-radius: var(--radius-lg); padding: 12px 14px; border-left: 5px solid var(--accent); box-shadow: var(--shadow-sm); }
.inbox-card.is-urgent { border-left-color: var(--red-urgent); }
.inbox-card.is-fresh { animation: slideInRight .5s ease-out both; }
.inbox-card.is-called { opacity: .6; }
.inbox-card-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.inbox-ref { font-family: 'Courier New', monospace; font-weight: 700; font-size: .8rem; color: var(--primary); }
.inbox-time { margin-left: auto; font-size: .72rem; color: var(--gray); }
.inbox-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 100px; font-family: var(--font-display); }
.inbox-badge--sample { background: #fff1d6; color: #8a5a00; }
.inbox-badge--new { background: #e3f6e8; color: #1d7a3a; }
.inbox-badge--urgent { background: var(--red-urgent); color: #fff; }
.inbox-card h4 { font-family: var(--font-display); color: var(--primary); font-size: var(--text-base); }
.inbox-card h4 small { font-weight: 400; color: var(--gray); font-family: var(--font-body); }
.inbox-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 8px 0; }
.inbox-card dt { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray); font-weight: 700; }
.inbox-card dd { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.inbox-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inbox-call, .inbox-done { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); padding: 9px 14px; border-radius: var(--radius-md); min-height: 42px; display: inline-flex; align-items: center; }
.inbox-call { background: var(--primary); color: #fff; }
.inbox-done { border: 2px solid var(--gray-light); color: var(--gray-dark); }

/* ── Chat widget ────────────────────────────────────────────── */
.chat-launcher {
  position: fixed; right: 18px; bottom: 18px; z-index: 450; display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-gradient); color: var(--primary-dark); font-family: var(--font-display); font-weight: 700;
  padding: 13px 20px; border-radius: 100px; box-shadow: var(--shadow-lg); animation: pulseGold 2.8s ease-in-out infinite;
}
.chat-launcher svg { width: 20px; height: 20px; }
.chat-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 600; width: 380px; max-width: calc(100vw - 24px);
  height: min(580px, calc(100vh - 36px)); background: #fff; border-radius: 20px; box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; overflow: hidden; animation: scaleIn .2s ease-out both;
}
.chat-head { background: var(--primary); color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.chat-head .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--primary-dark); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; flex: none; }
.chat-head div { flex: 1; min-width: 0; line-height: 1.2; }
.chat-head strong { display: block; font-family: var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head small { color: rgba(255,255,255,.75); }
.chat-head button { color: #fff; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f4f7f9; overscroll-behavior: contain; }
.msg { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: var(--text-sm); line-height: 1.4; animation: fadeInUp .25s ease-out both; overflow-wrap: anywhere; }
.msg--bot { background: #fff; align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.msg--user { background: var(--primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg--card { max-width: 96%; }
.chat-summary ul { list-style: none; display: grid; gap: 3px; margin: 6px 0; }
.chat-summary p { font-size: .8rem; color: var(--gray); }
.chat-ref { font-family: 'Courier New', monospace; font-weight: 700; background: var(--primary); color: #fff; display: inline-block; padding: 3px 10px; border-radius: 6px; }
.typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa8b2; animation: typingDot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-controls { padding: 10px 12px; border-top: 1px solid #e3e8ec; background: #fff; max-height: 42%; overflow-y: auto; min-height: 20px; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-chips button { border: 2px solid var(--accent); color: var(--primary); font-weight: 600; font-size: var(--text-sm); padding: 8px 14px; border-radius: 100px; min-height: 40px; background: #fff; }
.chat-chips button:hover { background: var(--accent); color: var(--primary-dark); }
.chat-input { display: flex; gap: 8px; }
.chat-input input { flex: 1; min-width: 0; min-height: 46px; padding: 8px 12px; font-size: 16px; border: 2px solid var(--gray-light); border-radius: var(--radius-md); }
.chat-input input.is-invalid { border-color: var(--red-urgent); }
.chat-input button { background: var(--accent); color: var(--primary-dark); font-weight: 700; padding: 0 18px; border-radius: var(--radius-md); min-height: 46px; }
.chat-foot { text-align: center; font-size: .68rem; color: var(--gray); padding: 0 8px 8px; background: #fff; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-lead { order: -1; }
  .inbox-wrap { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 768px) {
  body { padding-bottom: 92px; }
  .chat-launcher { display: none; }
  .mobile-toolbar { justify-content: space-between; gap: 4px; padding-left: 8px; padding-right: 8px; }
  .toolbar-btn { flex: 1 1 0; min-width: 0; padding: 6px 4px; text-align: center; }
  .toolbar-btn--call { color: var(--accent-light); }
  .hero-content { text-align: left; }
  .hero-badge { margin-left: 0; }
  .hero-cta-group { display: none; }
  .hero { min-height: 0; }
  .hero-subtitle { font-size: var(--text-base); margin-bottom: var(--space-md); }
  .hero h1 { margin-bottom: var(--space-sm); }
  .hero-container { gap: var(--space-md); }
  /* chat becomes a full-height sheet that stops above the toolbar */
  .chat-panel { left: 0; right: 0; bottom: 0; top: 0; width: auto; max-width: none; height: auto; border-radius: 0; }
  body.chat-open .mobile-toolbar { display: none; }
  .inbox-section, .reviews-section { padding-left: var(--space-sm); padding-right: var(--space-sm); }
}
@media (max-width: 480px) {
  .lead-grid { grid-template-columns: 1fr; }
  .lead-card { padding: var(--space-md) 14px; }
  .inbox-card dl { grid-template-columns: 1fr 1fr; }
  .toolbar-btn { font-size: .7rem; }
}

/* ── Flow pass: tighter hero (form fits the first screen), slimmer reviews + inbox ── */
@media (min-width: 1025px) {
  .hero { min-height: 0; padding-top: 28px; padding-bottom: 36px; }
  .hero h1 { font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.7rem); margin-bottom: var(--space-sm); }
  .hero-subtitle { font-size: var(--text-base); margin-bottom: var(--space-md); }
  .hero-content .hero-card { margin-top: 0; }
}
.lead-card { padding: 20px 22px 16px; }
.lead-card h2 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.85rem); }
.lead-card .lead-sub { margin-bottom: 12px; }
.lead-grid { gap: 10px 12px; }
.lead-field input, .lead-field select { min-height: 42px; padding: 8px 12px; }
.lead-submit { margin-top: 10px; padding: 12px; min-height: 48px; }
.status-pill { margin-bottom: 8px; }
.reviews-section { background: #fff; padding: var(--space-lg) var(--space-lg) var(--space-md); border-bottom: 1px solid var(--gray-light); }
.reviews-section .section-header { margin-bottom: var(--space-md); }
.reviews-section .section-header h2 { font-size: var(--text-xl); }
.reviews-section .section-header p { font-size: var(--text-base); margin-top: 8px; }
.review-slot { min-height: 0; padding: var(--space-sm) var(--space-md); gap: 8px; background: var(--warm-white); }
.inbox-section { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.inbox-list { max-height: 460px; }
@media (max-width: 768px) {
  .reviews-section { padding-top: var(--space-md); }
  .review-slot:nth-child(n+2) { display: none; }
  .reviews-grid { max-width: none; }
}

/* ── Demo notice (slim strip; hidden when SITE_CONFIG.demoMode is false) ── */
.demo-notice { background: #fff4cc; color: #3a2e00; border-top: 1px solid #e6cf7a; border-bottom: 1px solid #e6cf7a; padding: 10px var(--space-md); text-align: center; font-size: var(--text-sm); }
.demo-notice p { max-width: 1100px; margin: 0 auto; line-height: 1.4; }
.demo-notice-badge { display: inline-block; background: #3a2e00; color: #ffe27a; font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; padding: 2px 10px; border-radius: 100px; margin-right: 6px; vertical-align: 1px; }