/*
 * Merdigit AI public website ("st-*"): Home, Customer Support, Pricing, Contact, Products.
 * Loaded after components.public.theme, whose deep-purple tokens (--bg-app, --text-*, --border*) it uses.
 * Written with logical properties (inline-start / inline-end) only, so the Arabic (RTL) site needs no second sheet.
 */
:root {
    --st-surface: #ffffff;
    --st-raised: #f4ecfa;
    --st-line: #ece3f2;
    --st-accent: #c026d3;
    --st-accent-strong: #a821c4;
    --st-accent-text: #a821c4;
    --st-ok: #15803d;
    --st-ok-soft: rgba(22, 163, 74, 0.1);
    --st-wa: #25d366;
    --st-max: 1180px;
    /* Montserrat has no Arabic letters: Arabic text falls through to Cairo instead of a random system font. */
    --font-body: 'Montserrat', 'Cairo', sans-serif;
}
/* The Arabic site: Cairo first (it also has Latin letters, so mixed words stay in one typeface). */
:root:lang(ar) { --font-body: 'Cairo', 'Montserrat', sans-serif; }
:lang(ar) .st-eyebrow, :lang(ar) .st-plan-label, :lang(ar) .st-group-title, :lang(ar) .st-done-title, :lang(ar) .st-tag { letter-spacing: 0; text-transform: none; }
:lang(ar) .st-h1, :lang(ar) .st-title { letter-spacing: 0; line-height: 1.3; }

.st-page { overflow-x: clip; }
.st-inner { max-width: var(--st-max); margin-inline: auto; padding-inline: 24px; }
.st-sec { padding-block: 96px; }
.st-sec + .st-sec { border-top: 1px solid var(--st-line); }
.st-sec-tint { background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)); }

/* ── Section heads ── */
.st-head { max-width: 720px; display: grid; gap: 14px; margin-bottom: 48px; }
.st-head-center { margin-inline: auto; text-align: center; justify-items: center; }
.st-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--st-accent-text); }
.st-title { margin: 0; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; font-weight: 800; color: var(--text-1); text-wrap: balance; letter-spacing: -0.01em; }
.st-sub { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--text-2); max-width: 62ch; }

/* ── Buttons ── */
.st-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding-inline: 24px; border-radius: 12px; font: inherit; font-size: 15.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: filter .15s, background .15s, border-color .15s; }
.st-btn-primary { background: var(--st-accent-strong); color: #fff; border: 0; }
.st-btn-primary:hover { filter: brightness(1.12); }
.st-btn-ghost { background: transparent; color: var(--text-1); border: 1px solid var(--border-lg); }
.st-btn-ghost:hover { background: rgba(255,255,255,0.05); }
.st-btn:focus-visible { outline: 3px solid var(--st-accent-text); outline-offset: 3px; }
.st-btn svg { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .st-btn .st-arrow { transform: scaleX(-1); }
.st-note { font-size: 13.5px; color: var(--text-3); }

/* ── Hero ── */
.st-hero { padding-block: 72px 88px; position: relative; }
.st-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 78% 30%, rgba(192, 38, 211, 0.18), transparent 70%); }
.st-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.st-hero-page { padding-block: 64px 56px; }
.st-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(192, 38, 211, 0.14); border: 1px solid rgba(192, 38, 211, 0.35); color: var(--st-accent-text); font-size: 13px; font-weight: 600; }
.st-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st-ok); }
.st-h1 { margin: 20px 0 18px; font-size: clamp(36px, 5.2vw, 60px); line-height: 1.06; font-weight: 800; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
.st-h1 span { display: block; color: var(--st-accent-text); }
.st-lead { margin: 0 0 28px; font-size: 18px; line-height: 1.7; color: var(--text-2); max-width: 58ch; }
.st-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.st-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.st-points svg { width: 16px; height: 16px; color: var(--st-ok); flex: none; }

/* ── Chat demo (phone-like card) ── */
.st-demo { position: relative; display: grid; gap: 14px; }
.st-chat { background: #120420; border: 1px solid var(--st-line); border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,0.45); overflow: hidden; }
.st-chat-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: rgba(37, 211, 102, 0.1); border-bottom: 1px solid var(--st-line); font-size: 14px; font-weight: 700; color: var(--text-1); }
.st-chat-bar .st-tag { margin-inline-start: auto; }
.st-chat-bar svg { width: 20px; height: 20px; color: var(--st-wa); }
.st-chat-body { display: grid; gap: 10px; padding: 18px; }
.st-msg { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.6; color: var(--text-1); overflow-wrap: anywhere; }
.st-msg-in { justify-self: start; background: rgba(255,255,255,0.07); border-end-start-radius: 4px; }
.st-msg-out { justify-self: end; background: rgba(168, 33, 196, 0.35); border: 1px solid rgba(236, 178, 247, 0.2); border-end-end-radius: 4px; }
.st-msg-ai { display: inline-block; margin-block-end: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--st-accent-text); }
.st-voice { display: flex; align-items: center; gap: 10px; }
.st-voice-wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.st-voice-wave i { width: 3px; border-radius: 2px; background: var(--text-2); }
.st-voice-meta { font-size: 12.5px; color: var(--text-3); }
.st-voice-text { margin-top: 6px; font-size: 13px; color: var(--text-2); font-style: italic; }
.st-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--st-line); border-radius: 6px; padding: 2px 7px; }
.st-done { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; }
.st-done-title { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--st-ok); }
.st-done-row { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; }
.st-done-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--st-ok-soft); color: var(--st-ok); }
.st-done-icon svg { width: 16px; height: 16px; }
.st-done-name { font-size: 14px; font-weight: 700; color: var(--text-1); }
.st-done-detail { font-size: 12.5px; color: var(--text-3); }

/* ── Channels strip ── */
.st-channels { padding-block: 36px; border-block: 1px solid var(--st-line); background: rgba(0,0,0,0.12); }
.st-channels-title { text-align: center; font-size: 14px; font-weight: 600; color: var(--text-3); margin-bottom: 18px; }
.st-channel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.st-channel { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text-1); }
.st-channel-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.st-channel-icon svg { width: 20px; height: 20px; }
.st-ch-whatsapp { background: rgba(37,211,102,0.14); color: #25d366; }
.st-ch-web_chat { background: rgba(232,121,249,0.14); color: #e879f9; }
.st-ch-instagram { background: rgba(225,48,108,0.16); color: #ff5c93; }
.st-ch-messenger { background: rgba(10,124,255,0.16); color: #4ea3ff; }
.st-ch-telegram { background: rgba(41,169,235,0.16); color: #3fb8f5; }

/* ── Grids and cards ── */
.st-grid { display: grid; gap: 18px; }
.st-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-card { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 18px; padding: 26px; display: grid; gap: 10px; align-content: start; }
.st-card-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-1); line-height: 1.35; }
.st-card-text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.st-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(192, 38, 211, 0.16); color: var(--st-accent-text); margin-bottom: 6px; }
.st-icon svg { width: 22px; height: 22px; }

/* The pain points: plain, numbered by nothing - three facts side by side. */
.st-problems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--st-line); border-radius: 18px; overflow: hidden; }
.st-problem { padding: 28px; display: grid; gap: 8px; align-content: start; }
.st-problem + .st-problem { border-inline-start: 1px solid var(--st-line); }
.st-problem-title { font-size: 17px; font-weight: 800; color: var(--text-1); }
.st-problem-text { font-size: 15px; line-height: 1.65; color: var(--text-2); }

/* ── Steps (a real sequence, so numbered) ── */
.st-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--st-steps, 3), minmax(0, 1fr)); gap: 18px; counter-reset: st-step; }
.st-step { position: relative; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 18px; padding: 26px; display: grid; gap: 8px; align-content: start; counter-increment: st-step; }
.st-step::before { content: counter(st-step); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--st-accent-strong); color: #fff; font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.st-step-title { font-size: 17.5px; font-weight: 800; color: var(--text-1); }
.st-step-text { font-size: 15px; line-height: 1.65; color: var(--text-2); }

/* ── Split: text + product mock ── */
.st-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.st-checks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.st-checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; }
.st-checks svg { width: 22px; height: 22px; color: var(--st-ok); margin-top: 2px; }
.st-checks b { display: block; font-size: 16px; color: var(--text-1); margin-bottom: 2px; }
.st-checks span { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* Inbox mock */
.st-window { background: #150526; border: 1px solid var(--st-line); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.4); }
.st-window-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--st-line); font-size: 14px; font-weight: 700; color: var(--text-1); }
.st-window-bar .st-tag { margin-inline-start: auto; }
.st-dots { display: inline-flex; gap: 6px; margin-inline-end: 6px; }
.st-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.st-inbox-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--st-line); }
.st-inbox-row:last-child { border-bottom: 0; }
.st-inbox-name { font-size: 14.5px; font-weight: 700; color: var(--text-1); }
.st-inbox-text { font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-inbox-side { display: grid; gap: 6px; justify-items: end; }
.st-badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.st-badge-ai { background: var(--st-ok-soft); color: var(--st-ok); }
.st-badge-team { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.st-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(192, 38, 211, 0.16); color: var(--st-accent-text); }

/* Settings mock */
.st-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--st-line); }
.st-setting:last-child { border-bottom: 0; }
.st-setting-name { font-size: 15px; font-weight: 700; color: var(--text-1); }
.st-setting-detail { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.st-switch { position: relative; width: 44px; height: 24px; border-radius: 999px; background: rgba(255,255,255,0.14); flex: none; }
.st-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; }
.st-switch-on { background: var(--st-ok); }
.st-switch-on::after { inset-inline-start: 23px; }

/* ── Results list ── */
.st-results { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.st-result { border-top: 3px solid var(--st-accent); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.st-result-title { font-size: 16px; font-weight: 800; color: var(--text-1); }
.st-result-text { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* ── Industries ── */
.st-industry { display: grid; gap: 6px; padding: 22px 24px; border-radius: 16px; border: 1px solid var(--st-line); background: rgba(255,255,255,0.02); }
.st-industry b { font-size: 16.5px; color: var(--text-1); }
.st-industry span { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* ── Feature groups (product page) ── */
.st-group-title { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--st-accent-text); margin-bottom: 4px; }
.st-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.st-list svg { width: 18px; height: 18px; color: var(--st-ok); margin-top: 3px; }

/* Channel cards */
.st-channel-card { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 22px; border-radius: 16px; background: var(--st-surface); border: 1px solid var(--st-line); }
.st-channel-card .st-channel-icon { width: 44px; height: 44px; border-radius: 12px; }
.st-channel-card b { display: block; font-size: 16.5px; color: var(--text-1); margin-bottom: 4px; }
.st-channel-card span { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* ── Pricing ── */
.st-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; align-items: stretch; }
.st-plan { position: relative; display: flex; flex-direction: column; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 20px; padding: 30px; }
.st-plan-featured { border-color: rgba(236, 178, 247, 0.55); background: linear-gradient(180deg, rgba(192, 38, 211, 0.16), var(--st-surface) 45%); box-shadow: 0 20px 60px rgba(168, 33, 196, 0.18); }
.st-plan-flag { position: absolute; top: -13px; inset-inline-start: 30px; padding: 4px 12px; border-radius: 999px; background: var(--st-accent-strong); color: #fff; font-size: 12px; font-weight: 800; }
.st-plan-name { font-size: 21px; font-weight: 800; color: var(--text-1); }
.st-plan-desc { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); min-height: 46px; }
.st-plan-price { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.st-plan-amount { font-size: 42px; font-weight: 800; line-height: 1; color: var(--text-1); font-variant-numeric: tabular-nums; }
.st-plan-currency { font-size: 18px; font-weight: 700; color: var(--text-2); }
.st-plan-period { font-size: 15px; color: var(--text-3); }
.st-plan-yearly { margin-top: 8px; font-size: 13.5px; color: var(--text-3); }
.st-plan-yearly b { color: var(--st-ok); font-weight: 700; }
.st-plan-sale { display: inline-flex; gap: 6px; margin-top: 12px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--st-accent-text); background: color-mix(in srgb, var(--st-accent-text) 12%, transparent); }
.st-plan-sale span { font-weight: 500; }
.st-plan-was { margin-inline-start: 6px; font-size: 16px; color: var(--text-3); }
.st-plan-egp { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.st-plan-egp s { margin-inline-start: 4px; font-weight: 400; color: var(--text-3); }
.st-plan-usage { margin-top: 22px; padding: 16px; border-radius: 14px; background: rgba(0,0,0,0.18); display: grid; gap: 4px; }
.st-plan-usage-main { font-size: 17px; font-weight: 800; color: var(--text-1); }
.st-plan-usage-note { font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.st-plan-section { margin-top: 20px; }
.st-plan-label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.st-plan-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.st-plan-channels > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--st-line); font-size: 13px; color: var(--text-1); }
.st-plan-channels .st-channel-icon { width: 20px; height: 20px; border-radius: 6px; }
.st-plan-channels .st-channel-icon svg { width: 12px; height: 12px; }
.st-plan-actions { margin-top: auto; padding-top: 26px; display: grid; gap: 10px; }
.st-plan-actions .st-btn { width: 100%; }
.st-plan-hint { font-size: 12.5px; line-height: 1.5; color: var(--text-3); text-align: center; }
.st-plan-current { text-align: center; padding: 12px; border-radius: 12px; border: 1px dashed var(--border-lg); font-size: 14px; font-weight: 700; color: var(--text-1); }
.st-plan-group + .st-plan-group { margin-top: 72px; }
.st-plan-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin-bottom: 28px; }
.st-plan-group-title { margin: 0; font-size: 24px; font-weight: 800; color: var(--text-1); }
.st-plan-group-sub { flex-basis: 100%; margin: 0; font-size: 14.5px; color: var(--text-2); }
.st-status { font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.st-status-live { color: var(--st-ok); }

.st-included { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; list-style: none; margin: 0; padding: 0; }
.st-included li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15.5px; color: var(--text-1); }
.st-included svg { width: 20px; height: 20px; color: var(--st-ok); }

/* ── FAQ ── */
.st-faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }
.st-faq details { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 14px; }
.st-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-size: 16.5px; font-weight: 700; color: var(--text-1); }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--st-accent-text); flex: none; transition: transform .2s; }
.st-faq details[open] summary::after { transform: rotate(45deg); }
.st-faq summary:focus-visible { outline: 3px solid var(--st-accent-text); outline-offset: -3px; border-radius: 14px; }
.st-faq p { margin: 0; padding: 0 22px 20px; font-size: 15.5px; line-height: 1.7; color: var(--text-2); }

/* ── Pricing teaser / band ── */
.st-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 40px; border-radius: 24px; background: linear-gradient(120deg, rgba(168, 33, 196, 0.35), rgba(37, 8, 58, 0.9)); border: 1px solid rgba(236, 178, 247, 0.25); }
.st-band .st-title { font-size: clamp(24px, 3vw, 34px); }

/* ── Agents (more coming) ── */
.st-agents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.st-agent { display: grid; gap: 8px; padding: 24px; border-radius: 16px; border: 1px dashed var(--border-lg); text-decoration: none; }
a.st-agent:hover { background: rgba(255,255,255,0.03); }
.st-agent b { font-size: 17px; color: var(--text-1); }
.st-agent span { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.st-agent .st-status { font-size: 12.5px; }
.st-agent-featured { border-style: solid; border-color: rgba(236, 178, 247, 0.45); background: linear-gradient(135deg, rgba(192, 38, 211, 0.16), transparent 70%); grid-column: 1 / -1; }
.st-agent-cta { color: var(--st-accent-text) !important; font-weight: 700; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chips span { font-size: 12.5px !important; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--st-line); color: var(--text-1) !important; }

/* ── Contact ── */
.st-contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.st-ways { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.st-way { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--st-line); background: var(--st-surface); }
.st-way b { display: block; font-size: 16px; color: var(--text-1); }
.st-way span, .st-way a { font-size: 14.5px; color: var(--text-2); }
.st-way a { color: var(--st-accent-text); font-weight: 700; text-decoration: none; }
.st-way a:hover { text-decoration: underline; }
.st-help { margin-top: 28px; }

@media (max-width: 1080px) {
    .st-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .st-sec { padding-block: 72px; }
    .st-hero-grid, .st-split, .st-contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .st-grid-3, .st-included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-problems { grid-template-columns: minmax(0, 1fr); }
    .st-problem + .st-problem { border-inline-start: 0; border-top: 1px solid var(--st-line); }
}
@media (max-width: 640px) {
    .st-inner { padding-inline: 16px; }
    .st-sec { padding-block: 56px; }
    .st-hero { padding-block: 40px 56px; }
    .st-head { margin-bottom: 32px; }
    .st-grid-3, .st-grid-2, .st-steps, .st-included, .st-results, .st-agents { grid-template-columns: minmax(0, 1fr); }
    .st-lead { font-size: 16.5px; }
    .st-card, .st-step, .st-plan { padding: 22px; }
    .st-band { padding: 28px 22px; }
    .st-ctas .st-btn { flex: 1 1 100%; }
    .st-inbox-row { grid-template-columns: 36px minmax(0, 1fr); }
    .st-inbox-side { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; }
}
@media (prefers-reduced-motion: reduce) {
    .st-switch::after, .st-faq summary::after { transition: none; }
}

/* ── Right-to-left (Arabic) fixes for the older shared "mk-*" / "pub-*" components, which use left/right ── */
[dir="rtl"] .mk-step { padding: 0 34px 18px 0; }
[dir="rtl"] .mk-step::before { left: auto; right: 10px; }
[dir="rtl"] .mk-node { left: auto; right: 0; }
[dir="rtl"] .mk-fact b { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .mk-steps-line li::before { left: auto; right: 0; }
[dir="rtl"] .mk-principles li { padding-left: 0; padding-right: 16px; border-left: 0; border-right: 2px solid var(--border-lg); }
[dir="rtl"] .mk-legal-body ul { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .plan-period { margin-left: 0; margin-right: 3px; }
[dir="rtl"] .hero-trust span:not(:last-child)::after { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .mk-caps-control .mk-cap-title::after { margin-left: 0; margin-right: 8px; }
/* Arrows in the older buttons point the reading direction. */
[dir="rtl"] .cta-primary svg, [dir="rtl"] .cta-tertiary svg, [dir="rtl"] .mk-step-rec .mk-node svg { transform: scaleX(-1); }
[dir="rtl"] .cta-tertiary:hover svg { transform: scaleX(-1) translateX(2px); }
/* Latin-only labels (email, phone numbers) keep their own direction inside Arabic text. */
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }
[dir="rtl"] .pub-navbar-links a { letter-spacing: 0; }
@container (min-width: 620px) {
    [dir="rtl"] .mk-run-input { border-right: 0; border-left: 1px solid var(--border); }
}
@media (min-width: 960px) {
    [dir="rtl"] .mk-caps li + li { padding-left: 0; border-left: 0; padding-right: 20px; border-right: 1px solid var(--border); }
}
.pub-nav-link.pub-nav-lang, body .pub-navbar-links a.pub-nav-lang { text-transform: none; }

/* ══ Redesign (2026-10): dark hero, band and closing; light reading sections between them; one brand gradient;
   Arabic and English each with their own type scale (Cairo draws larger than Montserrat at the same size). ══ */
:root {
    --st-grad: linear-gradient(100deg, #D02EF4 0%, #9b1fb8 100%);
    --st-grad-text: linear-gradient(100deg, #e05cf7 0%, #f0607f 100%);
    --st-fs-h1: clamp(34px, 5vw, 58px);
    --st-fs-h2: clamp(26px, 3.2vw, 40px);
    --st-fs-h3: 18px;
    --st-fs-lead: clamp(17px, 1.5vw, 19px);
    --st-fs-body: 15.5px;
    --st-lh-head: 1.1;
    --st-lh-body: 1.65;
    --st-sec-y: clamp(40px, 4.6vw, 60px);
}
:root:lang(ar) {
    --st-fs-h1: clamp(29px, 4.1vw, 46px);
    --st-fs-h2: clamp(22px, 2.55vw, 30px);
    --st-fs-h3: 17px;
    --st-fs-lead: clamp(16px, 1.3vw, 17.5px);
    --st-fs-body: 15px;
    --st-lh-head: 1.4;
    --st-lh-body: 1.85;
}

/* Type */
.st-h1 { font-size: var(--st-fs-h1); line-height: var(--st-lh-head); margin: 16px 0 14px; }
.st-h1 span { background: var(--st-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-title { font-size: var(--st-fs-h2); line-height: var(--st-lh-head); }
.st-band .st-title { font-size: calc(var(--st-fs-h2) * .85); }
.st-lead, .st-sub { font-size: var(--st-fs-lead); line-height: var(--st-lh-body); }
.st-card-title, .st-step-title, .st-problem-title, .st-result-title, .st-plan-group-title { font-size: var(--st-fs-h3); }
.st-card-text, .st-step-text, .st-problem-text, .st-result-text, .st-industry span, .st-checks span, .st-channel-card span, .st-list li, .st-faq p { font-size: calc(var(--st-fs-body) - .5px); line-height: var(--st-lh-body); }
:lang(ar) .st-h1, :lang(ar) .st-title { line-height: var(--st-lh-head); }
:lang(ar) .st-eyebrow { font-size: 14px; }
:lang(ar) .st-faq summary { font-size: 15.5px; line-height: 1.6; }
:lang(ar) .st-plan-amount { font-family: 'Montserrat', 'Cairo', sans-serif; }

/* Spacing: sections breathe, but one screen shows more than one idea. */
.st-sec { padding-block: var(--st-sec-y); }
.st-sec + .st-sec { border-top: 0; }
.st-head { gap: 10px; margin-bottom: clamp(22px, 2.6vw, 32px); }
.st-hero { padding-block: clamp(36px, 5vw, 64px) clamp(32px, 4vw, 52px); }
.st-hero-page { padding-block: clamp(36px, 4.6vw, 56px) clamp(28px, 3.6vw, 44px); }
.st-channels { padding-block: 24px; }
.st-channels-title { margin-bottom: 14px; }
.st-plan-group + .st-plan-group { margin-top: 48px; }
.st-plan-group-head { margin-bottom: 22px; }

/* One brand gradient for the main action; no amber. */
.st-btn-primary { background: var(--st-grad); box-shadow: 0 10px 24px rgba(168, 33, 196, .22); color: #fff; }
.st-step::before, .st-plan-flag { background: var(--st-grad); }
.st-btn-ghost { color: var(--text-1); border-color: var(--border-md); background: #fff; }
.st-btn-ghost:hover { background: var(--bg-soft); }

/* ══ One light site (2026-10, like the customer dashboard): white and soft lavender sections, dark ink, the brand
   gradient only on the main action, the recommended plan's border and the hero accent. No dark sections. ══ */
body { background: #ffffff; color: var(--text-1); }
:root { --st-grad-text: linear-gradient(100deg, #b51fd6 0%, #8a1aa6 100%); }
.st-hero { background: radial-gradient(60% 90% at 88% 0%, #f5e6fb 0%, transparent 62%), radial-gradient(40% 60% at 0% 100%, #fbeff3 0%, transparent 60%), #ffffff; }
.st-hero::before { display: none; }
.st-pill { background: #f6ebfa; border-color: #ecd3f5; color: #8f1aa8; }
.st-channels { background: #ffffff; border-block: 1px solid var(--st-line); }
.st-sec { background: #f7f1fb; color: var(--text-1); }
.st-sec.st-sec-tint, .st-sec.st-sec-white { background: #ffffff; }
.st-sec.st-sec-dark { background: #f4ecfa; }
.st-sec .st-industry { background: #ffffff; }
.st-sec.st-sec-tint .st-industry, .st-sec.st-sec-tint .st-card, .st-sec.st-sec-tint .st-step, .st-sec.st-sec-tint .st-faq details { background: #faf6fd; }
.st-icon, .st-chip { background: #f4ecfa; }
.st-badge-team { background: rgba(79, 70, 229, .1); color: #4338ca; }

/* The older action buttons (closing section, sign-in) use the same gradient as the rest of the site. */
.cta-primary, .btn.cta-primary { background: var(--st-grad); border-color: transparent; color: #fff; }
.cta-primary:hover, .cta-primary:focus-visible { background: var(--st-grad); filter: brightness(1.06); }

/* components.css badges written for the dark UI. */
.badge-indigo { background: var(--accent-glow); color: #a821c4; border-color: #ecd3f5; }

/* Product mocks: light, like a phone in day mode. */
.st-chat, .st-window { background: #ffffff; border: 1px solid var(--st-line); box-shadow: 0 24px 60px rgba(27, 18, 38, .10); }
.st-chat-bar { background: #eaf8ef; }
.st-chat-body { background: #f8f5fb; }
.st-msg-in { background: #ffffff; border: 1px solid var(--st-line); }
.st-msg-out { background: #f6ebfa; border: 1px solid #ecd3f5; }
.st-voice-wave i { background: var(--text-3); }
.st-done { background: #ffffff; border: 1px solid #cfe9d8; box-shadow: 0 10px 30px rgba(27, 18, 38, .06); }
.st-dots i { background: #e3dbe9; }
.st-switch { background: #ddd5e6; }
.st-switch-on { background: var(--st-ok); }

/* Plans: every card white; the recommended one stands out by its gradient border, flag and a soft brand glow. */
.st-plan { background: #ffffff; box-shadow: 0 14px 40px rgba(27, 18, 38, .07); }
.st-plan-usage { background: var(--st-raised); }
.st-plan-featured { background: linear-gradient(#ffffff, #ffffff) padding-box, var(--st-grad) border-box; border: 2px solid transparent; box-shadow: 0 22px 54px rgba(168, 33, 196, .16); }

/* The price band: a white card with the gradient edge. */
.st-band { background: linear-gradient(#ffffff, #ffffff) padding-box, var(--st-grad) border-box; border: 1.5px solid transparent; padding: clamp(24px, 3vw, 36px); box-shadow: 0 18px 44px rgba(168, 33, 196, .10); }
.st-band-price { font: 800 clamp(26px, 3.2vw, 38px)/1.2 'Montserrat', 'Cairo', sans-serif; color: var(--text-1); }
:lang(ar) .st-band-price { font-family: 'Cairo', 'Montserrat', sans-serif; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.4; }

/* Proof band: honest numbers right after the hero. */
.st-proof { background: #ffffff; border-bottom: 1px solid #ece3f2; padding-block: clamp(24px, 3vw, 34px); color: #1b1226; }
.st-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.st-stat { display: grid; gap: 2px; align-content: start; }
.st-stat b { font: 800 clamp(24px, 2.8vw, 32px)/1.15 'Montserrat', 'Cairo', sans-serif; background: linear-gradient(100deg, #D02EF4, #9b1fb8); -webkit-background-clip: text; background-clip: text; color: transparent; }
:lang(ar) .st-stat b { font-family: 'Cairo', 'Montserrat', sans-serif; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; }
.st-stat span { font-size: 14px; line-height: 1.55; color: #574b66; }
.st-proof-note { margin-top: 14px; font-size: 12.5px; color: #6c6080; }

/* Plan comparison (pricing page). */
.st-compare-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--st-line); background: var(--st-surface); }
.st-compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; color: var(--text-1); }
.st-compare th, .st-compare td { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--st-line); }
.st-compare thead th { background: var(--st-raised); font-size: 14px; font-weight: 800; }
.st-compare thead th.st-compare-rec { background: var(--st-grad); color: #fff; }
.st-compare tbody th { font-weight: 600; color: var(--text-2); }
.st-compare tr:last-child > * { border-bottom: 0; }
.st-compare .st-yes { color: var(--st-ok); font-weight: 800; }
.st-compare .st-no { color: var(--text-3); }

@media (max-width: 960px) {
    .st-sec { padding-block: var(--st-sec-y); }
    .st-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
}
@media (max-width: 640px) {
    .st-sec { padding-block: 40px; }
    .st-hero { padding-block: 32px 36px; }
    .st-head { margin-bottom: 22px; }
}
/* The floating chat sits at the end of the line: bottom-left on the Arabic site, clear of the reading column. */
[dir="rtl"] .mk-wa-float { right: auto; left: 20px; }
@media (max-width: 640px) { [dir="rtl"] .mk-wa-float { left: 16px; } }