/* ── Graftap Index / Landing Page ────────────────────────────────────────── */

/* Stats bar */
.stats-bar             { background: #070e18; border-top: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); }
.stats-bar-inner       { max-width: 960px; margin: 0 auto; padding: 0 5vw; display: grid; grid-template-columns: repeat(3,1fr); }
.stat-cell             { padding: 28px 24px; text-align: center; }
.stat-cell-border      { padding: 28px 24px; text-align: center; border-right: 0.5px solid var(--border); }
.stat-num              { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(36px,5vw,52px); font-weight: 900; color: var(--white); line-height: 1; }
.stat-desc             { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.5; max-width: 180px; margin-left: auto; margin-right: auto; }

/* Demo section */
.demo-section-inner    { max-width: 960px; margin: 0 auto; }
.demo-header           { text-align: center; margin-bottom: 48px; }
.demo-eyebrow          { font-family: 'DM Mono', monospace; font-size:12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: 12px; }
.demo-title            { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(28px,4vw,42px); font-weight: 900; text-transform: uppercase; color: var(--white); margin-bottom: 12px; }
.demo-sub              { font-size: 16px; color: var(--muted); max-width: 480px; margin: 0 auto; }
.demo-layout           { display: flex; justify-content: center; align-items: flex-start; gap: 48px; flex-wrap: wrap; }
.demo-phone-wrap       { flex-shrink: 0; }
.demo-phone-outer      { width: 280px; background: #1a1a1a; border-radius: 40px; padding: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.demo-phone-status     { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; margin-bottom: 4px; }
.demo-phone-inner      { background: #0b0b0b; border-radius: 30px; overflow: hidden; }
.demo-wa-header        { background: #075e54; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.demo-wa-avatar        { width: 32px; height: 32px; border-radius: 50%; background: #128c7e; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.demo-wa-info          { flex: 1; }
.demo-wa-name          { font-size: 13px; font-weight: 600; color: #fff; }
.demo-wa-status        { font-size:12px; color: rgba(255,255,255,.84); }
.demo-msgs             { background: #0b141a; border-radius: 12px; padding: 16px 12px; min-height: 200px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.demo-info-wrap        { flex: 1; min-width: 240px; max-width: 300px; }
.demo-info-note        { font-size: 12px; color: rgba(255,255,255,.75); margin-bottom: 16px; }
.demo-steps            { display: flex; flex-direction: column; gap: 8px; }
.demo-step             { display: flex; gap: 6px; margin-top: 8px; }
.demo-step-pill        { flex: 1; padding: 8px; border-radius: 6px; font-size: 12px; }
.demo-step-pill--in    { background: #1f2c34; border-top-left-radius: 2px; }
.demo-step-pill--out   { background: #005c4b; border-top-right-radius: 2px; }

/* WhatsApp message bubbles */
.wa-msg-out            { background: #005c4b; border-radius: 8px; border-top-right-radius: 2px; }
.wa-msg-in             { background: #1f2c34; border-radius: 8px; border-top-left-radius: 2px; }
.wa-typing-wrap        { background: #1f2c34; border-radius: 8px; border-top-left-radius: 2px; display: flex; align-items: center; justify-content: center; padding: 8px 12px; }
.wa-prefill-msg        { background: rgba(37,211,102,.08); border: 0.5px solid rgba(37,211,102,.2); border-radius: 8px; padding: 7px 11px; font-size:12px; color: #8696a0; max-width: 75%; align-self: flex-start; font-style: italic; margin-bottom: 4px; }
.wa-msg-meta           { display: flex; gap: 6px; margin-top: 8px; }
.wa-msg-time           { font-size:12px; color: #8696a0; }
.wa-msg-name           { font-size:12px; font-weight: 600; color: #fff; }
.wa-msg-role           { font-size:12px; color: rgba(255,255,255,.84); }
.wa-typing-bar         { width: 60px; height: 4px; background: #2a2a2a; border-radius: 2px; overflow: hidden; }
.wa-typing-fill        { height: 100%; background: #333; border-radius: 2px; }
.wa-battery-bar        { width: 80px; height: 6px; background: #2a2a2a; border-radius: 3px; overflow: hidden; }
.wa-signal-bar         { width: 80px; height: 4px; background: #333; border-radius: 2px; }
.wa-read-indicator     { height: 16px; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; }
.wa-lead-card          { background: #1f2c34; border-radius: 8px; border-top-left-radius: 2px; margin-top: 8px; }
.wa-lead-pre-msg       { background: #0b141a; border-radius: 8px; margin-top: 8px; padding: 16px 12px; }
.wa-lead-eyebrow       { font-size:12px; color: #8696a0; margin-bottom: 12px; text-align: center; }
.wa-lead-urgent        { font-size:12px; color: #f5a623; font-weight: 700; margin-bottom: 4px; }
.wa-lead-job           { font-size: 12px; color: #e9edef; line-height: 1.6; }
.wa-lead-note          { margin-top: 8px; color: #8696a0; font-size:12px; }
.wa-accepted-card      { width: 100%; background: #0A1520; color: #F5A623; border: 0.5px solid #F5A623; border-radius: 8px; padding: 10px; text-align: center; font-size: 13px; font-weight: 700; cursor: pointer; }
.wa-accepted-icon      { font-size: 20px; font-weight: 700; color: var(--white); }
.wa-accepted-sub       { font-size: 12px; color: rgba(255,255,255,.75); }
.wa-step-num           { width: 20px; height: 20px; border-radius: 50%; background: rgba(59,158,221,.2); color: var(--sky); font-size:12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wa-step-text          { font-size: 14px; font-weight: 600; color: var(--white); }
.wa-step-sub           { font-size: 12px; color: rgba(255,255,255,.75); }
.wa-toggle             { width: 48px; height: 26px; border-radius: 13px; background: #1db954; display: flex; align-items: center; padding: 3px; }
.wa-toggle-dot         { width: 20px; height: 20px; border-radius: 50%; background: #fff; margin-left: auto; }

/* Features / How it works */
.features-section-inner { max-width: 720px; margin: 0 auto; }
.features-header       { text-align: center; margin-bottom: 36px; }
.features-eyebrow      { font-family: 'DM Mono', monospace; font-size:12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: 12px; }
.features-title        { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(28px,4vw,42px); font-weight: 900; text-transform: uppercase; color: var(--white); margin-bottom: 12px; }
.features-sub          { font-size: 14px; color: var(--muted); }
.features-grid         { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; margin-bottom: 48px; }
.features-grid-nopad   { padding-top: 0; }

/* FAQ section */
.faq-section-inner     { max-width: 720px; margin: 0 auto; text-align: center; margin-bottom: 24px; }
.faq-section-eyebrow   { font-family: 'DM Mono', monospace; font-size:12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: 12px; }

/* Pricing section */
.pricing-section       { padding: 80px 5vw; background: #0A1520; position: relative; overflow: hidden; }
.pricing-section-inner { max-width: 960px; margin: 0 auto; }
.pricing-header        { max-width: 560px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.pricing-eyebrow       { font-family: 'DM Mono', monospace; font-size:12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: 12px; }
.pricing-title         { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(28px,4vw,42px); font-weight: 900; text-transform: uppercase; color: var(--white); margin-bottom: 12px; }
.pricing-sub           { font-size: 16px; color: var(--muted); line-height: 1.6; }
.pricing-bg-grad       { position: absolute; inset: 0; background-image: linear-gradient(135deg, rgba(59,158,221,.04) 0%, transparent 60%); pointer-events: none; }
.pricing-bg-radial     { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(59,158,221,.06) 0%, transparent 70%); pointer-events: none; }
.pricing-top-line      { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--sky), transparent); }
.pricing-toggle        { text-align: center; margin-top: 24px; }
.pricing-badge-green   { background: rgba(29,185,84,.15); color: #1db954; }

/* FAQ accordion */
.faq-items             { display: flex; flex-direction: column; gap: 12px; }
.faq-items-inner       { display: flex; flex-direction: column; gap: 12px; margin-top: 0; }
.faq-item-detail       { background: #0D1D2E; border: 0.5px solid rgba(255,255,255,.08); border-radius: 10px; }
.faq-summary           { font-size: 16px; font-weight: 600; color: var(--white); cursor: pointer; padding: 16px; list-style: none; }
.faq-answer            { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.6; padding: 0 16px 16px; }
.faq-answer-icon       { color: var(--amber); font-size: 20px; flex-shrink: 0; margin-right: 12px; }

/* Missed calls entry */
.mc-index-section-wrap { padding-top: 0; }
.ob-done-cta-note      { margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.75); }
.ob-done-share-note    { margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.75); }

/* Password input in ob */
.ob-pass-wrap          { padding-right: 44px; }

/* ── Additional index page classes ──────────────────────────────────────── */
.demo-phone-topbar { height:28px;display:flex;align-items:center;justify-content:center }
.wa-battery-wide { width:80px;height:6px;background:#2a2a2a;border-radius:10px }
.demo-wa-input-bar { background:#1f2c34;padding:8px 12px;display:flex;align-items:center;gap:8px }
.demo-wa-input { flex:1;background:#2a3942;border-radius:20px;padding:8px 14px;font-size:12px;color:rgba(255,255,255,.75) }
.demo-wa-send { width:32px;height:32px;background:#00a884;border-radius:50%;display:flex;align-items:center;justify-content:center }
.demo-phone-bar2 { height:20px;display:flex;align-items:center;justify-content:center;background:#0b0b0b }
.wa-signal-wide { width:80px;height:4px;background:#333;border-radius:4px }
.demo-phone-label { text-align:center;margin-top:12px;font-size:12px;color:rgba(255,255,255,.75) }
.wa-chat-label { font-size:12px;color:rgba(255,255,255,.75);margin-bottom:12px;text-align:center }
.demo-phone-sm { background:#1a1a1a;border-radius:28px;padding:10px;box-shadow:0 20px 60px rgba(0,0,0,.5) }
.demo-phone-sm-inner { background:#0b0b0b;border-radius:20px;overflow:hidden }
.wa-typing-bar-sm { width:60px;height:4px;background:#2a2a2a;border-radius:10px }
.demo-wa-avatar-sm { width:26px;height:26px;border-radius:50%;background:#128c7e;display:flex;align-items:center;justify-content:center;font-size:12px }
.anim-fade-up { opacity:0;transition:all .5s;transform:translateY(8px) }
.wa-msg-in-padded { background:#1f2c34;border-radius:8px;border-top-left-radius:2px;padding:10px 12px }
.demo-step-icon { width:36px;height:36px;border-radius:6px;background:#2a3942;display:flex;align-items:center;justify-content:center;font-size:18px }
.demo-step-pill--done { flex:1;padding:8px;border-radius:6px;font-size:12px;font-weight:700;text-align:center;background:#005c4b;color:#25d366;border-top-right-radius:2px }
.demo-status-strip { height:16px;background:#0b0b0b;display:flex;align-items:center;justify-content:center }
.wa-notch-bar { width:50px;height:3px;background:#333;border-radius:3px }
.success-note { margin-top:12px;background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.2);border-radius:8px;padding:10px 12px;font-size:12px;color:rgba(255,255,255,.84) }
.wa-convo-preview { background:#0b141a;border-radius:12px;padding:16px;max-width:340px;margin:0 auto }
.wa-msg-out-sm { background:#005c4b;border-radius:8px;border-top-right-radius:2px;padding:8px 12px }
.wa-lead-accent { margin-top:16px;background:#1f2c34;border-radius:8px;padding:12px;border-left:3px solid #f5a623 }
.wa-text-muted { color:#8696a0 }
.pricing-toggle-row { display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:28px }
.pricing-toggle-track { width:48px;height:26px;border-radius:13px;background:var(--sky);cursor:pointer;position:relative;display:inline-flex;align-items:center;flex-shrink:0;transition:background .2s }
.pricing-toggle-knob { width:20px;height:20px;border-radius:50%;background:#fff;position:absolute;top:3px;left:3px;transition:transform .2s;display:block }
.badge-saved { font-size:12px;background:rgba(29,185,84,.15);color:#1db954;padding:2px 8px;border-radius:20px;border:1px solid rgba(29,185,84,.3) }
.plan-grid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
.btn-green { background:#1db954;color:#0E1B2A }
.faq-icon { color:var(--amber);font-size:20px;flex-shrink:0;margin-left:12px }
.link-sky { font-size:14px;color:var(--sky);text-decoration:none }
.cta-section { padding:80px 5vw;background:#0A1520;position:relative;z-index:1;overflow:hidden }
.cta-inner { max-width:560px;margin:0 auto;text-align:center;position:relative;z-index:2 }
.cta-sub { font-size:16px;color:var(--muted);line-height:1.6;margin-bottom:32px }
.cta-social-card { background:#0D1D2E;border:1.5px solid rgba(245,166,35,.4);border-radius:16px;padding:24px;max-width:380px;margin:0 auto }
.cta-social-list { display:flex;flex-direction:column;gap:12px;margin-bottom:16px }
.cta-social-item { background:#071018;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px }
.wa-accepted-card-lg { width:100%;background:#0A1520;color:#F5A623;border:1.5px solid #F5A623;border-radius:8px;padding:10px;text-align:center;font-size:13px;font-weight:700;cursor:pointer }
.cta-social-name { font-size:20px;font-weight:700;color:var(--white);margin-bottom:8px }
.cta-social-body { font-size:14px;color:var(--muted);line-height:1.6 }

.text-amber            { color: #F5A623; font-style: normal; }
.link-sky              { color: var(--sky); text-decoration: none; }
.link-sky:hover        { text-decoration: underline; }
.input-padded-right    { padding-right: 44px; }

/* wa-pulse */

@keyframes wa-pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}60%{box-shadow:0 0 0 8px rgba(37,211,102,0)}}
.wa-pulse{animation:wa-pulse .9s ease 2}

.pricing-toggle-label { font-size:14px;color:var(--muted) }
.pricing-toggle-label-annual { font-weight:600;color:var(--white) }
.pricing-toggle-badge { font-size:12px;background:rgba(29,185,84,.2);color:#1db954;padding:2px 8px;border-radius:10px;margin-left:4px;font-weight:600 }