:root {
  --ink: #1d1d22;
  --muted: #6b6872;
  --paper: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #f0eee8;
  --line: #dfddd7;
  --brand: #533c73;
  --brand-dark: #322344;
  --brand-soft: #eee8f5;
  --coral: #e86847;
  --coral-soft: #fff0ea;
  --mint: #2fa778;
  --mint-soft: #e7f7f0;
  --amber: #b8780f;
  --amber-soft: #fff5db;
  --danger: #bf3f49;
  --danger-soft: #fdebed;
  --blue: #3976b9;
  --blue-soft: #eaf2fb;
  --shadow-sm: 0 1px 2px rgba(31, 27, 38, .06), 0 4px 14px rgba(31, 27, 38, .04);
  --shadow-md: 0 18px 44px rgba(31, 27, 38, .12);
  --radius: 14px;
  --radius-lg: 22px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); overflow-x: clip; }
body, button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
.icon { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 15px; height: 15px; }
.icon.lg { width: 22px; height: 22px; }

.skip-link { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

.btn { border: 0; border-radius: 10px; padding: 10px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-weight: 650; min-height: 40px; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 7px 18px rgba(29,29,34,.15); }
.btn-primary:hover { background: #000; }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--surface); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; padding: 8px 10px; }
.btn-ghost:hover { background: rgba(83,60,115,.08); }
.btn-sm { min-height: 34px; padding: 7px 11px; font-size: 13px; border-radius: 8px; }
.btn-icon { width: 38px; padding: 0; }
.btn-danger { color: var(--danger); background: var(--danger-soft); }

.wordmark { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 760; letter-spacing: -.5px; }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; position: relative; overflow: hidden; }
.brand-mark::before, .brand-mark::after { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 50%; position: absolute; }
.brand-mark::before { transform: translateX(-4px); }
.brand-mark::after { transform: translateX(4px); opacity: .62; }
[dir="rtl"] .brand-mark::before { transform: translateX(4px); }
[dir="rtl"] .brand-mark::after { transform: translateX(-4px); }
.eyebrow { margin: 0 0 14px; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 780; color: var(--coral); }
.muted { color: var(--muted); }
.fine { color: var(--muted); font-size: 12px; }
.good { color: var(--mint); }
.warning { color: var(--amber); }
.danger { color: var(--danger); }

/* Marketing */
.marketing { background: #f7f5f0; min-height: 100vh; }
.marketing-nav { height: 72px; display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: auto; padding: 0 24px; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 14px; color: #53505a; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.lang-toggle { border: 1px solid var(--line); background: rgba(255,255,255,.7); border-radius: 999px; padding: 7px 11px; cursor: pointer; font-weight: 650; min-width: 42px; }
.mobile-cta-label { display: none; }
.marketing-hero { max-width: 1180px; padding: 88px 24px 76px; margin: auto; display: grid; grid-template-columns: 1.04fr .96fr; gap: 68px; align-items: center; }
.hero-copy h1 { font-size: clamp(48px, 5.1vw, 76px); line-height: 1.02; letter-spacing: -.055em; margin: 0; max-width: 760px; font-weight: 725; }
[dir="rtl"] .hero-copy h1 { letter-spacing: -.025em; line-height: 1.14; }
.hero-copy h1 .accent { color: var(--brand); }
.hero-copy > p { font-size: 19px; line-height: 1.65; color: #5d5964; max-width: 620px; margin: 24px 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.hero-note { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 23px; color: #6b6872; font-size: 12px; }
.hero-note span { display: flex; align-items: center; gap: 6px; }
.hero-note i { width: 5px; height: 5px; background: var(--mint); border-radius: 50%; }
.hero-demo { position: relative; min-height: 570px; }
.demo-shell { border: 1px solid #d8d4cd; background: #ebe8e2; border-radius: 26px; padding: 10px; box-shadow: 0 30px 70px rgba(53,42,65,.17); transform: rotate(1.25deg); }
[dir="rtl"] .demo-shell { transform: rotate(-1.25deg); }
.demo-window { background: var(--surface); border-radius: 18px; overflow: hidden; min-height: 500px; }
.demo-bar { height: 45px; background: #232328; color: #fff; display: flex; align-items: center; gap: 7px; padding: 0 15px; font-size: 11px; }
.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: #6b6872; }
.demo-app { display: grid; grid-template-columns: 122px 1fr; height: 455px; }
.demo-side { background: #f5f4f0; padding: 16px 10px; border-inline-end: 1px solid var(--line); }
.demo-side .mini-mark { height: 22px; width: 72px; background: var(--brand); border-radius: 7px; margin-bottom: 22px; opacity: .88; }
.demo-side span { display: block; height: 8px; margin: 16px 5px; border-radius: 10px; background: #dbd8d1; }
.demo-side span.active { background: #9077ac; width: 76%; }
.demo-main { padding: 22px; overflow: hidden; }
.demo-heading { height: 13px; width: 130px; border-radius: 8px; background: #302d35; margin-bottom: 18px; }
.demo-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.demo-metric { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.demo-metric b { display: block; font-size: 17px; margin-top: 8px; }
.demo-metric span { display: block; height: 6px; background: #ddd9d4; width: 58%; border-radius: 10px; }
.demo-content { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10px; margin-top: 10px; }
.mini-panel { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.mini-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #eeece7; }
.mini-row:last-child { border: 0; }
.mini-avatar { width: 25px; height: 25px; border-radius: 8px; background: var(--brand-soft); }
.mini-lines { flex: 1; }
.mini-lines i { display: block; height: 5px; background: #d8d5cf; border-radius: 8px; margin: 4px 0; }
.mini-lines i:first-child { width: 65%; background: #b7b2bc; }
.message-pop { position: absolute; inset-inline-start: -45px; bottom: 20px; width: 270px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 15px; box-shadow: var(--shadow-md); transform: rotate(-2deg); }
[dir="rtl"] .message-pop { transform: rotate(2deg); }
.message-pop .channel { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.wa-dot { background: var(--mint); color: #fff; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; font-size: 11px; font-weight: 800; }
.message-pop p { font-size: 13px; line-height: 1.5; margin: 10px 0; }
.message-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.message-actions span { background: var(--mint-soft); color: #197655; border-radius: 7px; padding: 7px; font-size: 11px; text-align: center; font-weight: 700; }
.revenue-pop { position: absolute; inset-inline-end: -20px; top: -18px; background: var(--ink); color: #fff; padding: 14px 16px; border-radius: 14px; box-shadow: var(--shadow-md); }
.revenue-pop small { display: block; color: #bcb8c2; font-size: 10px; }
.revenue-pop b { font-size: 20px; }
.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.5); }
.trust-inner { max-width: 1180px; margin: auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #6b6872; font-size: 12px; }
.trust-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; font-weight: 750; color: #3d3942; }
.section { max-width: 1180px; margin: auto; padding: 110px 24px; }
.section-head { max-width: 720px; margin-bottom: 46px; }
.section-head h2 { font-size: clamp(36px, 4vw, 54px); letter-spacing: -.045em; line-height: 1.08; margin: 0; }
[dir="rtl"] .section-head h2 { letter-spacing: -.02em; line-height: 1.2; }
.section-head p { color: var(--muted); line-height: 1.7; font-size: 17px; }
.wedge-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; min-height: 270px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.feature-card:nth-child(1) { grid-column: span 7; background: var(--brand-dark); color: #fff; }
.feature-card:nth-child(2) { grid-column: span 5; }
.feature-card:nth-child(3), .feature-card:nth-child(4), .feature-card:nth-child(5) { grid-column: span 4; }
.feature-card .feature-num { font-size: 12px; color: var(--coral); font-weight: 800; letter-spacing: .12em; }
.feature-card h3 { margin: 42px 0 10px; font-size: 23px; letter-spacing: -.025em; }
.feature-card p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 460px; }
.feature-card:nth-child(1) p { color: #cfc6db; }
.feature-visual { position: absolute; inset-inline-end: 22px; top: 20px; display: flex; gap: 5px; }
.signal { width: 8px; border-radius: 8px; background: var(--coral); align-self: end; opacity: .88; }
.signal:nth-child(1) { height: 19px; }.signal:nth-child(2) { height: 30px; }.signal:nth-child(3) { height: 42px; }.signal:nth-child(4) { height: 34px; }
.comparison { background: #ece9e3; }
.comparison-inner { max-width: 1180px; margin: auto; padding: 110px 24px; }
.stack-table { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-sm); }
.stack-row { display: grid; grid-template-columns: 1.1fr .9fr 1fr; border-bottom: 1px solid var(--line); }
.stack-row:last-child { border: 0; }
.stack-row > div { padding: 18px 22px; }
.stack-row > div:not(:last-child) { border-inline-end: 1px solid var(--line); }
.stack-row.head { background: #f4f2ed; font-size: 11px; font-weight: 760; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stack-name { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.stack-icon { width: 27px; height: 27px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-size: 11px; }
.native-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.native-list { border-top: 1px solid var(--line); }
.native-item { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; gap: 12px; }
.native-item b { display: block; margin-bottom: 6px; }
.native-item p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }
.native-index { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.cta-band { max-width: 1180px; margin: 0 auto 70px; background: var(--coral); color: #211914; border-radius: 28px; padding: 60px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.cta-band h2 { max-width: 650px; margin: 0; font-size: clamp(32px, 4vw, 54px); line-height: 1.08; letter-spacing: -.04em; }
.cta-band p { max-width: 500px; line-height: 1.6; }
.marketing-footer { max-width: 1180px; margin: auto; padding: 34px 24px 44px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* Embedded admin */
.admin-body { background: #efefec; min-height: 100vh; }
.shopify-bar { height: 44px; background: #252528; color: #e9e7ea; display: grid; grid-template-columns: 250px minmax(220px, 540px) 1fr; align-items: center; padding: 0 14px; gap: 16px; position: sticky; top: 0; z-index: 50; }
.shopify-home { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 13px; }
.shopify-bag { width: 22px; height: 24px; border-radius: 5px 5px 7px 7px; background: #95bf47; position: relative; color: #14210a; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.shopify-bag::before { content: ""; width: 9px; height: 7px; border: 2px solid #95bf47; border-bottom: 0; border-radius: 8px 8px 0 0; position: absolute; top: -5px; }
.admin-search { height: 30px; border: 1px solid #59585e; background: #38373c; border-radius: 8px; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: #bdbac2; font-size: 12px; }
.shopify-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
.top-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: transparent; border: 0; color: #dbd8df; cursor: pointer; }
.top-icon:hover { background: #3d3c41; }
.conversation .top-icon, .customer-sidecar .top-icon, .drawer .top-icon { color: var(--muted); }
.merchant-pill { display: flex; align-items: center; gap: 8px; background: #38373c; padding: 4px 8px 4px 4px; border-radius: 9px; font-size: 12px; }
[dir="rtl"] .merchant-pill { padding: 4px 4px 4px 8px; }
.merchant-avatar { width: 24px; height: 24px; border-radius: 7px; background: #d9b468; color: #2a2111; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.admin-layout { min-height: calc(100vh - 44px); display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.admin-sidebar { position: sticky; top: 44px; height: calc(100vh - 44px); background: #f4f4f1; border-inline-end: 1px solid #d7d6d1; padding: 14px 10px; overflow: auto; }
.sidebar-scrim { display: none; }
.admin-brand { display: flex; align-items: center; gap: 9px; padding: 7px 8px 16px; font-weight: 760; }
.admin-brand .brand-mark { width: 28px; height: 28px; border-radius: 8px; }
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav button { border: 0; width: 100%; border-radius: 8px; background: transparent; display: flex; align-items: center; gap: 10px; padding: 9px 10px; color: #58565e; cursor: pointer; font-size: 13px; text-align: start; }
.app-nav button:hover { background: #e9e8e4; color: var(--ink); }
.app-nav button.active { background: #e5e0ea; color: #38284e; font-weight: 700; }
.app-nav .nav-badge { margin-inline-start: auto; min-width: 20px; height: 19px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; background: #e0ded9; font-size: 10px; }
.app-nav button.active .nav-badge { background: var(--brand); color: #fff; }
.nav-section-label { text-transform: uppercase; letter-spacing: .09em; font-size: 10px; font-weight: 750; color: #99959f; padding: 20px 10px 7px; }
.sidebar-foot { margin-top: 22px; padding: 10px 8px; border-top: 1px solid var(--line); }
.sync-state { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }
.admin-main { min-width: 0; }
.app-frame { max-width: 1440px; margin: auto; padding: 24px 28px 60px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-title h1 { font-size: 22px; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 5px; }
.page-title p { margin: 0; color: var(--muted); font-size: 13px; }
.page-actions { display: flex; align-items: center; gap: 8px; }
.date-select { background: var(--surface); border: 1px solid #ceccc6; border-radius: 9px; padding: 8px 11px; font-size: 12px; color: #55525a; }
.card { background: var(--surface); border: 1px solid #d9d7d2; border-radius: 12px; box-shadow: 0 1px 1px rgba(28,26,31,.03); }
.card-header { padding: 16px 18px; border-bottom: 1px solid #e5e3de; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.card-header h2, .card-header h3 { margin: 0; font-size: 14px; }
.card-body { padding: 18px; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.metric-card { padding: 16px; position: relative; overflow: hidden; }
.metric-label { color: var(--muted); font-size: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-value { font-size: 25px; letter-spacing: -.035em; font-weight: 720; margin: 12px 0 6px; }
.metric-delta { font-size: 11px; display: flex; align-items: center; gap: 4px; }
.metric-spark { height: 34px; width: 92px; position: absolute; inset-inline-end: 9px; bottom: 7px; opacity: .86; }
.metric-spark svg { width: 100%; height: 100%; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.8fr); gap: 14px; }
.dashboard-column { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.recovery-card { min-height: 325px; }
.recovery-chart { height: 190px; display: flex; gap: 10px; align-items: flex-end; padding: 10px 4px 0; position: relative; }
.recovery-chart::before, .recovery-chart::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed #e6e3dd; }
.recovery-chart::before { top: 34%; }.recovery-chart::after { top: 68%; }
.chart-group { height: 100%; flex: 1; display: flex; align-items: end; justify-content: center; gap: 3px; position: relative; z-index: 1; }
.bar { width: min(13px,42%); border-radius: 4px 4px 2px 2px; background: #bcaecd; min-height: 8px; }
.bar.dark { background: var(--brand); }
.chart-labels { display: flex; padding: 5px 3px 0; color: var(--muted); font-size: 10px; }
.chart-labels span { flex: 1; text-align: center; }
.chart-legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); }
.legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-inline-end: 5px; background: #bcaecd; }
.legend-dot.dark { background: var(--brand); }
.queue-list { display: flex; flex-direction: column; }
.queue-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #ebe9e4; }
.queue-item:last-child { border: 0; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 760; flex: 0 0 auto; }
.avatar.coral { background: var(--coral-soft); color: var(--coral); }.avatar.green { background: var(--mint-soft); color: var(--mint); }.avatar.amber { background: var(--amber-soft); color: var(--amber); }
.queue-copy b { font-size: 12px; display: block; }.queue-copy span { font-size: 11px; color: var(--muted); }
.queue-value { text-align: end; }.queue-value b { display: block; font-size: 12px; }.queue-value span { font-size: 10px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 999px; background: var(--surface-2); color: #5c5961; font-size: 10px; font-weight: 680; white-space: nowrap; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .72; }
.badge.good { background: var(--mint-soft); color: #177754; }.badge.warning { background: var(--amber-soft); color: #95600b; }.badge.danger { background: var(--danger-soft); color: #ab3440; }.badge.blue { background: var(--blue-soft); color: #316aa8; }.badge.purple { background: var(--brand-soft); color: var(--brand); }
.automation-list { display: flex; flex-direction: column; }
.automation-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 13px 18px; border-bottom: 1px solid #ebe9e4; }
.automation-row:last-child { border: 0; }
.flow-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--mint-soft); color: var(--mint); display: grid; place-items: center; }
.automation-copy b { display: block; font-size: 12px; }.automation-copy span { color: var(--muted); font-size: 10px; }
.progress { width: 74px; height: 5px; background: #ebe9e4; border-radius: 10px; overflow: hidden; margin-top: 5px; }
.progress i { display: block; height: 100%; background: var(--mint); border-radius: inherit; }
.automation-value { text-align: end; }.automation-value b { font-size: 12px; }.automation-value span { display: block; color: var(--muted); font-size: 10px; }
.insight-card { background: var(--brand-dark); color: #fff; padding: 18px; position: relative; overflow: hidden; }
.insight-card::after { content: ""; position: absolute; width: 130px; height: 130px; border: 24px solid rgba(255,255,255,.06); border-radius: 50%; inset-inline-end: -48px; bottom: -65px; }
.insight-label { display: flex; align-items: center; gap: 6px; color: #d1c7dc; font-size: 11px; }
.insight-card h3 { font-size: 16px; line-height: 1.45; margin: 14px 0 8px; max-width: 340px; }.insight-card p { color: #bfb3cd; font-size: 12px; line-height: 1.55; margin: 0; max-width: 390px; }

/* Data tables */
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.search-field { background: var(--surface); border: 1px solid #d2d0cb; border-radius: 9px; min-height: 38px; display: flex; align-items: center; padding: 0 10px; gap: 8px; flex: 1; max-width: 360px; }
.search-field input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 12px; }
.tabs { display: flex; gap: 3px; background: #e5e3de; padding: 3px; border-radius: 9px; width: fit-content; }
.tab { border: 0; background: transparent; border-radius: 7px; padding: 6px 10px; font-size: 11px; cursor: pointer; color: var(--muted); }
.tab.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 680; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { text-align: start; background: #faf9f6; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 13px 14px; border-bottom: 1px solid #eceae5; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: #faf9f6; }
.customer-cell { display: flex; align-items: center; gap: 9px; }.customer-cell b { display: block; font-size: 12px; }.customer-cell span { color: var(--muted); font-size: 10px; }
.money { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* Conversations */
.inbox-shell { height: calc(100vh - 113px); min-height: 650px; display: grid; grid-template-columns: 300px minmax(330px,1fr) 330px; overflow: hidden; }
.inbox-list, .conversation, .customer-sidecar { min-width: 0; }
.inbox-list { border-inline-end: 1px solid var(--line); background: #faf9f6; display: flex; flex-direction: column; }
.inbox-head { padding: 12px; border-bottom: 1px solid var(--line); }
.inbox-head .search-field { max-width: none; background: #fff; }
.conversation-list { overflow: auto; }
.conversation-item { padding: 13px 12px; display: grid; grid-template-columns: 36px 1fr auto; gap: 9px; border-bottom: 1px solid #e8e6e1; cursor: pointer; }
.conversation-item:hover { background: #f4f1ed; }.conversation-item.active { background: #eee8f5; }
.conversation-item .name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; }.conversation-item p { margin: 4px 0 0; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 165px; }
.conversation-meta { text-align: end; font-size: 9px; color: var(--muted); }.unread { width: 17px; height: 17px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; margin: 7px 0 0 auto; font-size: 9px; }
.conversation { display: flex; flex-direction: column; background: #f6f5f1; }
.conversation-head { height: 59px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: space-between; }
.conversation-person { display: flex; align-items: center; gap: 9px; }.conversation-person b { font-size: 13px; display: block; }.conversation-person span { color: var(--muted); font-size: 10px; }
.conversation-actions { display: flex; gap: 4px; }
.messages { flex: 1; overflow: auto; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.day-label { align-self: center; font-size: 9px; color: var(--muted); background: #e9e7e1; border-radius: 99px; padding: 4px 8px; }
.message { max-width: 75%; font-size: 12px; line-height: 1.55; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #dfddd7; box-shadow: var(--shadow-sm); }
.message.out { align-self: flex-end; background: #e5f5ee; border-color: #cce8db; }
[dir="rtl"] .message.out { align-self: flex-start; }
[dir="rtl"] .message.in { align-self: flex-end; }
.message small { color: var(--muted); display: block; font-size: 9px; margin-top: 5px; text-align: end; }
.event-card { align-self: center; width: min(440px,90%); border: 1px solid #dedbd5; background: #fff; border-radius: 11px; padding: 11px 12px; display: flex; gap: 9px; align-items: center; font-size: 11px; }
.event-card .event-icon { width: 29px; height: 29px; background: var(--amber-soft); color: var(--amber); display: grid; place-items: center; border-radius: 8px; }.event-card b { display: block; }.event-card span { color: var(--muted); }
.reply-box { margin: 0 14px 14px; border: 1px solid #cfcdc7; background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); }
.reply-box textarea { width: 100%; border: 0; outline: 0; resize: none; min-height: 65px; padding: 12px; background: transparent; font-size: 12px; }
.reply-tools { border-top: 1px solid #eceae6; padding: 7px; display: flex; justify-content: space-between; align-items: center; }
.reply-tools-left { display: flex; gap: 2px; }
.customer-sidecar { background: #fff; border-inline-start: 1px solid var(--line); overflow: auto; }
.sidecar-head { padding: 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }.sidecar-head .avatar { width: 40px; height: 40px; }.sidecar-head b { font-size: 13px; }.sidecar-head span { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.sidecar-section { padding: 14px; border-bottom: 1px solid var(--line); }.sidecar-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }.sidecar-title h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin: 0; color: var(--muted); }.sidecar-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }.sidecar-kpi { background: #f6f4f0; border-radius: 8px; padding: 8px; }.sidecar-kpi span { display: block; color: var(--muted); font-size: 9px; }.sidecar-kpi b { font-size: 12px; margin-top: 3px; display: block; }
.order-mini { border: 1px solid var(--line); border-radius: 9px; padding: 10px; margin-top: 8px; }.order-mini-head { display: flex; justify-content: space-between; align-items: center; }.order-mini b { font-size: 11px; }.order-mini p { margin: 8px 0; color: var(--muted); font-size: 10px; }.order-mini-foot { display: flex; justify-content: space-between; align-items: center; }.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.quick-actions .btn { font-size: 10px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: 9px; background: #efede8; border-radius: 6px; padding: 4px 7px; color: #625f67; }

/* Automations and reports */
.automation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.automation-card { padding: 16px; }
.automation-card-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }.automation-card h3 { margin: 14px 0 5px; font-size: 14px; }.automation-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; min-height: 34px; }.automation-card-bottom { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }.automation-stat span { display: block; color: var(--muted); font-size: 9px; }.automation-stat b { font-size: 12px; }
.switch { width: 34px; height: 19px; border-radius: 99px; background: #c9c6c0; border: 0; position: relative; cursor: pointer; }.switch::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #fff; top: 2px; inset-inline-start: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: inset .2s; }.switch.on { background: var(--mint); }.switch.on::after { inset-inline-start: 17px; }
.flow-builder { margin-top: 14px; padding: 18px; overflow: auto; }.flow-canvas { min-width: 760px; display: flex; align-items: center; gap: 24px; padding: 16px 6px; }.flow-node { width: 165px; flex: 0 0 auto; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; position: relative; }.flow-node:not(:last-child)::after { content: ""; position: absolute; width: 24px; border-top: 1px solid #a9a5ae; top: 50%; inset-inline-end: -25px; }.flow-node-label { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }.flow-node b { display: block; font-size: 11px; margin-top: 6px; }.flow-node.trigger { border-color: #b8dcca; background: var(--mint-soft); }.flow-node.condition { border-color: #ead59d; background: var(--amber-soft); }.flow-node.action { border-color: #cec0dd; background: var(--brand-soft); }
.report-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.7fr); gap: 14px; }.donut-card { padding: 18px; }.donut-wrap { display: flex; align-items: center; gap: 24px; }.donut { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(var(--brand) 0 43.4%, var(--coral) 43.4% 82.3%, var(--mint) 82.3% 96.6%, #d6d2cb 96.6% 100%); position: relative; flex: 0 0 auto; }.donut::after { content: ""; position: absolute; inset: 28px; border-radius: 50%; background: #fff; }.donut-center { position: absolute; inset: 0; display: grid; place-content: center; z-index: 1; text-align: center; }.donut-center b { font-size: 19px; }.donut-center span { font-size: 9px; color: var(--muted); }.report-legend { flex: 1; }.report-legend-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #eceae5; font-size: 11px; }.report-legend-row:last-child { border: 0; }.report-source { display: flex; align-items: center; gap: 7px; }.source-color { width: 8px; height: 8px; border-radius: 3px; }

/* Drawer and toast */
.scrim { position: fixed; inset: 44px 0 0; background: rgba(31,29,35,.38); z-index: 80; animation: fadeIn .18s ease; }
.drawer { position: fixed; top: 44px; bottom: 0; inset-inline-end: 0; width: min(470px,100%); background: #fff; z-index: 90; box-shadow: -18px 0 50px rgba(30,28,33,.16); display: flex; flex-direction: column; animation: slideIn .22s ease; }
[dir="rtl"] .drawer { box-shadow: 18px 0 50px rgba(30,28,33,.16); }
.drawer-head { padding: 17px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }.drawer-head h2 { margin: 0; font-size: 16px; }.drawer-body { padding: 20px; overflow: auto; flex: 1; }.drawer-foot { padding: 13px 20px; border-top: 1px solid var(--line); display: flex; justify-content: end; gap: 8px; }
.field { margin-bottom: 16px; }.field label { display: block; font-size: 11px; font-weight: 680; margin-bottom: 6px; }.field input, .field select, .field textarea { width: 100%; border: 1px solid #cac7c1; border-radius: 9px; padding: 10px 11px; outline: 0; background: #fff; font-size: 12px; }.field textarea { min-height: 110px; resize: vertical; }.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.toast-region { position: fixed; z-index: 200; bottom: 20px; inset-inline-end: 20px; display: flex; flex-direction: column; gap: 8px; }.toast { background: #252329; color: #fff; border-radius: 10px; padding: 11px 14px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 9px; font-size: 12px; animation: toastIn .25s ease; }.toast .toast-check { width: 20px; height: 20px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; font-size: 11px; }
.mobile-nav-button { display: none; }
.empty-state { text-align: center; padding: 70px 24px; }.empty-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin: auto; }.empty-state h3 { margin: 14px 0 5px; }.empty-state p { color: var(--muted); font-size: 12px; }

@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideIn { from { transform: translateX(28px); opacity: 0; } }
[dir="rtl"] .drawer { animation-name: slideInRtl; }
@keyframes slideInRtl { from { transform: translateX(-28px); opacity: 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1120px) {
  .inbox-shell { grid-template-columns: 270px minmax(330px,1fr); }
  .customer-sidecar { display: none; }
  .automation-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .marketing-hero { grid-template-columns: 1fr; padding-top: 55px; }
  .hero-copy { text-align: center; }
  .hero-copy > p { margin-inline: auto; }
  .hero-actions, .hero-note { justify-content: center; }
  .hero-demo { width: min(620px,100%); margin: auto; }
  .feature-card:nth-child(n) { grid-column: span 6; }
  .feature-card:nth-child(1) { grid-column: span 12; }
  .native-section { grid-template-columns: 1fr; gap: 24px; }
  .metrics-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid, .report-layout { grid-template-columns: 1fr; }
  .shopify-bar { grid-template-columns: 200px 1fr auto; }
  .merchant-pill > span:last-child { display: none; }
}

@media (max-width: 720px) {
  .btn-sm, .top-icon, .lang-toggle, .tab { min-height: 40px; }
  .marketing-nav { padding: 0 16px; height: 64px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-secondary { display: none; }
  .marketing-hero { padding: 38px 18px 62px; gap: 44px; }
  .hero-copy h1 { font-size: clamp(40px, 11.5vw, 50px); }
  .hero-copy > p { font-size: 16px; line-height: 1.55; }
  .hero-demo { min-height: 420px; }
  .demo-shell, [dir="rtl"] .demo-shell { transform: none; }
  .demo-window { min-height: 385px; }
  .demo-app { height: 340px; grid-template-columns: 82px 1fr; }
  .demo-side { padding: 12px 7px; }
  .demo-main { padding: 14px; }
  .demo-metric { padding: 8px; }
  .demo-content { grid-template-columns: 1fr; }
  .demo-content .mini-panel:last-child { display: none; }
  .message-pop { inset-inline-start: 10px; bottom: -32px; }
  .revenue-pop { inset-inline-end: 3px; top: -22px; }
  .trust-inner { align-items: flex-start; flex-direction: column; }
  .trust-logos { gap: 14px 18px; }
  .section, .comparison-inner { padding: 70px 18px; }
  .section-head { margin-bottom: 32px; }
  .section-head h2 { font-size: clamp(34px, 9vw, 42px); }
  .section-head p { font-size: 16px; }
  .wedge-grid { display: block; }
  .feature-card { min-height: 220px; margin-bottom: 12px; padding: 24px; }
  .stack-table { border: 0; box-shadow: none; background: transparent; overflow: visible; }
  .stack-row.head { display: none; }
  .stack-row { display: block; min-width: 0; margin-bottom: 12px; padding: 8px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
  .stack-row > div { padding: 11px 0; border-inline-end: 0 !important; border-bottom: 1px solid #eceae5; }
  .stack-row > div:last-child { border-bottom: 0; }
  .stack-row > div::before { content: attr(data-label); display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
  .stack-name { align-items: flex-start; }
  .cta-band { border-radius: 0; margin-bottom: 32px; padding: 46px 22px; flex-direction: column; align-items: flex-start; }
  .cta-band .btn { width: 100%; }
  .marketing-footer { padding: 24px 18px 36px; flex-direction: column; align-items: flex-start; gap: 14px; }

  .shopify-bar { grid-template-columns: auto minmax(38px,1fr) auto; padding: 0 8px; gap: 6px; }
  .shopify-home > span:last-child { display: none; }
  .admin-search { justify-content: center; min-width: 38px; padding: 0; }
  .admin-search span { display: none; }
  .shopify-actions { gap: 2px; }
  .admin-layout { display: block; }
  .admin-sidebar { position: fixed; z-index: 72; top: 44px; bottom: 0; height: auto; width: min(82vw,280px); inset-inline-start: min(-84vw,-290px); transition: inset-inline-start .22s ease; box-shadow: 12px 0 30px rgba(0,0,0,.16); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  [dir="rtl"] .admin-sidebar { box-shadow: -12px 0 30px rgba(0,0,0,.16); }
  .admin-sidebar.open { inset-inline-start: 0; }
  .sidebar-scrim { display: block; visibility: hidden; opacity: 0; position: fixed; z-index: 71; inset: 44px 0 0; border: 0; background: rgba(29,29,34,.34); transition: opacity .2s ease, visibility .2s ease; }
  .sidebar-scrim.visible { visibility: visible; opacity: 1; }
  .mobile-nav-button { display: grid; }
  .app-frame { padding: 18px 12px calc(38px + env(safe-area-inset-bottom)); }
  .page-header { align-items: flex-start; margin-bottom: 16px; }
  .page-title { min-width: 0; }
  .page-title p { display: none; }
  .page-actions { flex: 0 1 auto; min-width: 0; }
  .page-actions .date-select { display: none; }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric-card { padding: 13px; min-width: 0; }
  .metric-label { font-size: 11px; }
  .metric-value { font-size: 20px; overflow-wrap: anywhere; }
  .metric-spark { display: none; }
  .card-header { padding: 14px; align-items: flex-start; }
  .card-body { padding: 14px; }
  .toolbar { flex-wrap: wrap; align-items: stretch; }
  .toolbar .search-field { flex: 1 0 100%; max-width: none; }
  .toolbar .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .toolbar > .btn { margin-inline-start: auto; }

  .mobile-table-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .mobile-table { min-width: 0; display: block; }
  .mobile-table thead { display: none; }
  .mobile-table tbody { display: grid; gap: 10px; }
  .mobile-table tr { display: block; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
  .mobile-table td { display: grid; grid-template-columns: minmax(94px,.75fr) minmax(0,1.25fr); gap: 12px; align-items: center; padding: 9px 13px; border-bottom: 1px solid #efede8; overflow-wrap: anywhere; }
  .mobile-table td:last-child { border-bottom: 0; }
  .mobile-table td::before { content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; }
  .mobile-table .mobile-select, .mobile-table .mobile-chevron { display: none; }
  .mobile-table .mobile-action { display: block; }
  .mobile-table .mobile-action::before { display: none; }
  .mobile-table .mobile-action .btn { width: 100%; }
  .mobile-table .customer-cell { min-width: 0; }
  .mobile-table .customer-cell > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .mobile-table .badge { white-space: normal; width: fit-content; }

  .automation-grid { grid-template-columns: 1fr; }
  .flow-builder { padding: 14px; }
  .flow-canvas { min-width: 0; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 0 !important; }
  .flow-node { width: 100%; }
  .flow-node:not(:last-child)::after { width: 0; height: 14px; border-top: 0; border-inline-start: 1px solid #a9a5ae; top: auto; bottom: -15px; inset-inline-end: auto; inset-inline-start: 50%; }

  .conversation-page { padding: 12px 0 0 !important; }
  .conversation-page .page-header { padding-inline: 12px; }
  .inbox-shell { height: calc(100vh - 117px); height: calc(100dvh - 117px); min-height: 480px; grid-template-columns: 1fr; border-inline: 0; border-radius: 0; }
  .inbox-list { display: none; }
  .inbox-shell.show-list .inbox-list { display: flex; }
  .inbox-shell.show-list .conversation { display: none; }
  .inbox-back { display: grid !important; }
  .conversation-list { overscroll-behavior: contain; }
  .messages { overscroll-behavior: contain; }
  .donut-wrap { flex-direction: column; align-items: center; }
  .report-legend { width: 100%; }
  .drawer { top: 44px; width: 100%; }
  .drawer-body { padding: 16px; }
  .drawer-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .field input, .field select, .field textarea { font-size: 16px; }
  .toast-region { inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .toast { width: 100%; }
}

@media (max-width: 480px) {
  .marketing-nav .wordmark { font-size: 18px; gap: 7px; }
  .marketing-nav .brand-mark { width: 29px; height: 29px; }
  .desktop-cta-label { display: none; }
  .mobile-cta-label { display: inline; }
  .nav-actions .btn-primary { padding-inline: 10px; }
  .hero-copy h1 { font-size: clamp(36px, 11vw, 44px); }
  .hero-actions .btn { width: 100%; }
  .hero-note { gap: 10px 16px; }
  .hero-demo { min-height: 382px; }
  .demo-app { grid-template-columns: 62px 1fr; }
  .demo-side .mini-mark { width: 43px; }
  .demo-main { padding: 12px 8px; }
  .demo-metrics { gap: 5px; }
  .demo-metric b { font-size: 13px; }
  .message-pop { width: min(245px,76vw); }
  .revenue-pop { padding: 10px 12px; }
  .revenue-pop b { font-size: 16px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-actions { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content,1fr); overflow-x: auto; padding-bottom: 1px; }
  .page-actions .btn { width: 100%; }
  .queue-item { padding: 12px; }
  .opportunity-item { grid-template-columns: 36px minmax(0,1fr); align-items: start; }
  .opportunity-item .queue-value { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: start; }
  .opportunity-item .queue-value .btn { margin-top: 0 !important; }
  .automation-row { grid-template-columns: 30px minmax(0,1fr); }
  .automation-value { grid-column: 2; display: flex; align-items: center; justify-content: space-between; text-align: start; }
  .chart-legend { flex-direction: column; gap: 4px; }
  .chart-labels span:nth-child(even) { display: none; }
  .conversation-page .page-actions .btn-secondary { display: none; }
  .conversation-head { padding: 8px; }
  .conversation-person { min-width: 0; }
  .conversation-person > div { min-width: 0; }
  .conversation-person b .badge { display: none; }
  .conversation-person > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .messages { padding: 14px 10px; }
  .message { max-width: 88%; }
  .reply-box { margin: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  .reply-box textarea { min-height: 54px; font-size: 16px; }
  .reply-tools-left .btn { width: 36px; min-height: 36px; }
  .sidecar-kpis { grid-template-columns: 1fr; }
  .drawer-foot .btn { flex: 1; }
}

@media (max-width: 360px) {
  .marketing-nav { padding-inline: 12px; }
  .marketing-nav .wordmark > span:last-child { display: none; }
  .lang-toggle { min-width: 38px; padding-inline: 8px; }
  .mobile-table td { grid-template-columns: minmax(80px,.7fr) minmax(0,1.3fr); padding-inline: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}