/* ============================================================
   TasKey — Design System v2
   RTL Hebrew · Taskey brand font · TasKey Blue palette
   ============================================================ */

/* Taskey — the purchased brand font (same cuts as the main app).
   Weight mapping: 200-300 ultralight · 400 light · 500 regular ·
   600 demibold · 700-800 bold · 900 black */
@font-face {
    font-family: 'Taskey';
    src: url('../fonts/taskey-ultralight.woff2') format('woff2'),
         url('../fonts/taskey-ultralight.woff') format('woff');
    font-weight: 200 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Taskey';
    src: url('../fonts/taskey-light.woff2') format('woff2'),
         url('../fonts/taskey-light.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Taskey';
    src: url('../fonts/taskey-regular.woff2') format('woff2'),
         url('../fonts/taskey-regular.woff') format('woff');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Taskey';
    src: url('../fonts/taskey-demibold.woff2') format('woff2'),
         url('../fonts/taskey-demibold.woff') format('woff');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Taskey';
    src: url('../fonts/taskey-bold.woff2') format('woff2'),
         url('../fonts/taskey-bold.woff') format('woff');
    font-weight: 700 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Taskey';
    src: url('../fonts/taskey-black.woff2') format('woff2'),
         url('../fonts/taskey-black.woff') format('woff');
    font-weight: 900; font-style: normal; font-display: swap;
}

:root {
    --navy:       #0F1F4D;
    --navy-2:     #1A2E6B;
    --navy-deep:  #0A1535;
    --cyan:       #5BC8F2;
    --blue:       #3A7CFF;
    --indigo:     #5856E0;
    --green:      #25D366;
    --text:       #1e293b;
    --text-muted: #5b6b84;
    --bg:         #ffffff;
    --bg-alt:     #f4f7fd;
    --border:     #e3e9f5;
    --radius:     18px;
    --radius-sm:  12px;
    --shadow-sm:  0 1px 3px rgba(15, 31, 77, 0.06);
    --shadow-md:  0 10px 30px rgba(15, 31, 77, 0.09);
    --shadow-lg:  0 24px 60px rgba(15, 31, 77, 0.16);
    --glow-blue:  0 10px 30px rgba(58, 124, 255, 0.35);
    --gradient:   linear-gradient(135deg, var(--cyan) 0%, var(--blue) 50%, var(--indigo) 100%);
    --gradient-soft: linear-gradient(135deg, rgba(91,200,242,0.12), rgba(58,124,255,0.10), rgba(88,86,224,0.12));

    /* v2 tokens (2026-09): accent אחד, צללים בגוון הנייבי, רדיוסים ועקומות תנועה. משמשים את הניווט,
       הכפתורים ובלוק HOME v2 (hv-*). */
    --accent:        #2f6df6;
    --accent-ink:    #1d4fd1;
    --accent-soft:   #e6eeff;
    --surface:       #ffffff;
    --surface-2:     #eef2fa;
    --page-bg:       #f6f8fc;
    --line:          rgba(15, 31, 77, 0.09);
    --line-strong:   rgba(15, 31, 77, 0.16);
    --shadow-soft:   0 1px 2px rgba(15, 31, 77, 0.04), 0 12px 40px -12px rgba(15, 31, 77, 0.14);
    --shadow-float:  0 2px 4px rgba(15, 31, 77, 0.05), 0 32px 80px -24px rgba(15, 31, 77, 0.28);
    --shadow-accent: 0 8px 24px -8px rgba(47, 109, 246, 0.55);
    --r-xl: 28px; --r-lg: 22px; --r-md: 16px;
    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* clip (not hidden) — hidden would create a scroll container and break position:sticky */
html, body { margin: 0; padding: 0; overflow-x: clip; }
body {
    font-family: "Taskey", "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 820px; }

.grad-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.eyebrow, .hero-eyebrow {
    display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
    color: var(--blue);
    background: rgba(58, 124, 255, 0.09);
    border: 1px solid rgba(58, 124, 255, 0.18);
    padding: 6px 16px; border-radius: 999px;
    margin-bottom: 18px;
}

/* ---------- Reveal-on-scroll (JS adds .js to <html>) ---------- */
html.js .reveal {
    opacity: 0; transform: translateY(22px); filter: blur(6px);
    transition: opacity .75s var(--ease-out), transform .75s var(--ease-out), filter .75s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 80ms); /* style="--d:N" על האלמנט = השהיה מדורגת */
}
html.js .reveal.is-visible { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============ NAV (v2: גלולה צפה) ============ */
.nav-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.site-nav { position: sticky; top: 0; z-index: 50; padding: 14px 20px 0; pointer-events: none; }
.nav-inner {
    pointer-events: auto;
    max-width: 1180px; margin: 0 auto; height: 64px;
    display: flex; align-items: center; gap: 24px;
    padding: 0 22px 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid var(--line);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, var(--shadow-soft);
    transition: box-shadow 300ms var(--ease-out);
}
.site-nav.is-scrolled .nav-inner { box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, var(--shadow-float); }
.nav-logo { display: flex; align-items: center; padding: 6px 10px; }
.nav-logo:hover { text-decoration: none; }
.nav-logo-img { height: 40px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav-links a {
    padding: 8px 13px; border-radius: 999px;
    color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap;
    transition: background-color 180ms ease, color 180ms ease;
}
.nav-links a:hover { background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; }
.nav-links a.is-active { color: var(--accent-ink); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-login { color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap; }
.nav-login:hover { color: var(--accent-ink); text-decoration: none; }
.nav-toggle {
    display: none; margin-inline-start: auto;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--line-strong); background: #fff; cursor: pointer; position: relative; padding: 0;
}
.nav-toggle span {
    position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--navy);
    transition: transform 300ms var(--ease-in-out), top 300ms var(--ease-in-out);
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.nav-menu {
    position: fixed; inset: 0; z-index: 45;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    padding: 100px 24px 40px;
    opacity: 0; transition: opacity 300ms var(--ease-out);
}
.nav-menu[hidden] { display: none; }
.nav-menu.is-open { opacity: 1; }
.nav-menu > a {
    color: var(--navy); font-size: 28px; font-weight: 800; padding: 8px 20px;
    opacity: 0; transform: translateY(16px);
    transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 50ms + 80ms);
}
.nav-menu > a:hover { text-decoration: none; }
.nav-menu.is-open > a { opacity: 1; transform: none; }
.nav-menu > a.btn { font-size: 20px; margin-top: 16px; }

/* ============ BUTTONS (v2: גלולה, אייקון בתוך עיגול, לחיצה פיזית) ============ */
.btn {
    --btn-bg: #fff; --btn-fg: var(--navy);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
    padding: 12px 18px 12px 12px; border-radius: 999px;
    background: var(--btn-bg); color: var(--btn-fg);
    font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: transform 160ms var(--ease-out), box-shadow 220ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.btn i {
    display: grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: 50%; font-size: 16px;
    background: rgba(255, 255, 255, 0.18);
    transition: transform 220ms var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn > span:only-child, .btn:not(:has(i)) { padding-inline: 20px; }
.btn-primary { --btn-bg: var(--accent); --btn-fg: #fff; box-shadow: var(--shadow-accent); }
.btn-ghost { --btn-bg: #fff; border-color: var(--line-strong); }
.btn-ghost i { background: var(--accent-soft); color: var(--accent-ink); }
.btn-light { --btn-bg: #fff; --btn-fg: var(--navy); }
.btn-light i { background: var(--accent-soft); color: var(--accent-ink); }
.btn-outline { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,0.3); }
.btn-outline i { background: rgba(255,255,255,0.12); }
.btn-lg { padding: 14px 22px 14px 14px; font-size: 17px; }
.btn-lg i { width: 34px; height: 34px; }
.btn-xl { padding: 16px 26px 16px 16px; font-size: 18px; }
.btn-xl i { width: 36px; height: 36px; }
.btn-sm { padding: 9px 14px 9px 9px; font-size: 15px; }
.btn-sm i { width: 26px; height: 26px; font-size: 14px; }
.btn-block { display: flex; width: 100%; }
@media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: translateY(-1px); }
    .btn-primary:hover { box-shadow: 0 12px 28px -8px rgba(47, 109, 246, 0.6); color: #fff; }
    .btn-ghost:hover { border-color: var(--accent); color: var(--navy); }
    .btn:hover i.ph-arrow-left { transform: translateX(-3px); }
}
@media (max-width: 540px) { .btn-xl { width: 100%; font-size: 16.5px; } }

/* ============================================================
   LANDING PAGE (lp-*)
   ============================================================ */

/* ---------- 1. Hero ---------- */
.lp-hero {
    position: relative; overflow: hidden;
    padding: 88px 0 96px;
    background:
        radial-gradient(55% 60% at 85% -5%, rgba(91, 200, 242, 0.20), transparent 70%),
        radial-gradient(45% 50% at 10% 0%, rgba(88, 86, 224, 0.14), transparent 70%),
        linear-gradient(180deg, #f6f9ff 0%, #fff 85%);
}
.lp-hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 56px; align-items: center; }
.lp-hero h1 {
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.12; margin: 0 0 22px; color: var(--navy); font-weight: 900;
    letter-spacing: -0.01em;
}
.lp-hero-sub { font-size: 19px; color: var(--text-muted); max-width: 560px; margin: 0 0 32px; line-height: 1.75; }
.lp-hero-ctas { margin-bottom: 14px; }
.lp-hero-fineprint { color: var(--text-muted); font-size: 14px; margin: 0; }

/* Hero proof-badges — concrete numbers/guarantees under the CTA */
.lp-hero-badges { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 4px 0 18px; }
.lp-hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(58,124,255,0.07); color: var(--navy);
    border: 1px solid rgba(58,124,255,0.22); border-radius: 999px;
    padding: 6px 13px; font-size: 13px; font-weight: 700; line-height: 1.2;
}
.lp-hero-badge b { color: var(--blue); font-weight: 800; }

/* App mockup */
.lp-hero-visual { position: relative; }
.lp-app {
    background: #fff; border: 1px solid var(--border); border-radius: 22px;
    box-shadow: var(--shadow-lg); overflow: hidden;
    transform: rotate(-1.2deg);
}
.lp-app-bar {
    display: flex; align-items: center; gap: 6px;
    background: var(--navy); padding: 12px 18px;
}
.lp-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.lp-app-title { color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600; margin-right: 10px; }
.lp-app-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; padding: 18px; background: var(--bg-alt); }

.lp-chat { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.lp-chat-head { font-size: 12.5px; font-weight: 700; color: var(--green); margin-bottom: 2px; }
.lp-msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.lp-msg-in { background: var(--bg-alt); color: var(--text); align-self: flex-start; border-bottom-right-radius: 3px; }
.lp-msg-out { background: #DCF8C6; color: #1a2e05; align-self: flex-end; border-bottom-left-radius: 3px; }
.lp-chat-note {
    align-self: center; font-size: 11.5px; color: var(--blue); font-weight: 600;
    background: rgba(58,124,255,0.08); border: 1px dashed rgba(58,124,255,0.35);
    padding: 5px 12px; border-radius: 999px; margin-top: 4px;
}

.lp-cal { display: flex; flex-direction: column; gap: 10px; }
.lp-cal-head { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.lp-cal-event {
    background: #fff; border: 1px solid var(--border); border-right: 4px solid var(--blue);
    border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
    box-shadow: var(--shadow-sm);
}
.lp-cal-event strong { color: var(--navy); font-size: 14.5px; }
.lp-cal-event span { color: var(--text-muted); font-size: 12.5px; }
.lp-cal-reminder {
    background: rgba(37, 211, 102, 0.10); border: 1px solid rgba(37, 211, 102, 0.25);
    color: #15803d; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; font-weight: 600;
    line-height: 1.5;
}

.lp-float {
    position: absolute; background: #fff; border: 1px solid var(--border);
    border-radius: 999px; padding: 10px 18px; font-size: 13.5px; font-weight: 700;
    color: var(--navy); box-shadow: var(--shadow-md);
    animation: lp-bob 4.5s ease-in-out infinite;
}
.lp-float-lead { bottom: -18px; right: 8%; }
@keyframes lp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .lp-float { animation: none; } }

/* ---------- 2. Pain ---------- */
.lp-pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.lp-pain-item {
    display: flex; flex-direction: column; gap: 14px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.lp-pain-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lp-pain-item > p { margin: 0; font-size: 15.5px; color: var(--text); padding: 0 6px 4px; line-height: 1.6; }
@media (max-width: 980px) { .lp-pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .lp-pain-grid { grid-template-columns: 1fr; } }

/* --- vignettes (hand-crafted mini-mockups) --- */
.vg {
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 104px;
    justify-content: center; font-size: 12.5px; overflow: hidden;
}
.vg-fade { opacity: .45; }
.vg-avatar {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: #c7d8ff; color: var(--navy); font-weight: 800; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
}
.vg-avatar--b { background: #fde2c8; }
.vg-avatar--c { background: #d3f5d8; }

.vg-chatrow { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow-sm); }
.vg-chatlines { flex: 1; display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.vg-chatlines strong { color: var(--navy); font-size: 12.5px; }
.vg-chatlines span { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-badge {
    background: #22c55e; color: #fff; font-weight: 800; font-size: 11px;
    border-radius: 999px; padding: 2px 7px;
}
.vg-time { color: #dc2626; font-size: 10.5px; font-weight: 600; white-space: nowrap; }

.vg-cal-line { display: flex; align-items: center; gap: 8px; }
.vg-cal-time { color: var(--text-muted); font-size: 11px; font-weight: 600; width: 34px; }
.vg-cal-slot {
    flex: 1; border-radius: 8px; padding: 7px 10px; font-weight: 600; font-size: 12px;
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.vg-cal-slot--missed { background: #fee2e2; color: #991b1b; text-decoration: line-through; }
.vg-cal-slot--missed em { font-style: normal; text-decoration: none; font-size: 10.5px; font-weight: 800; }
.vg-cal-slot--empty { background: #fff; border: 1.5px dashed var(--border); color: var(--text-muted); justify-content: center; font-size: 11px; }

.vg-sheet { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.vg-sheet-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--text); }
.vg-sheet-row:last-child { border-bottom: 0; }
.vg-sheet-head { background: var(--bg-alt); font-weight: 700; color: var(--text-muted); font-size: 10.5px; }
.vg-cold { color: #2563eb; font-weight: 600; }

.vg-collide { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vg-avatar--rep { width: auto; height: auto; border-radius: 999px; padding: 5px 10px; font-size: 11px; background: #e0e9ff; }
.vg-collide-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.vg-collide-lead { background: #fff; border: 1.5px solid #fca5a5; border-radius: 999px; padding: 4px 12px; font-weight: 700; color: var(--navy); font-size: 12px; }
.vg-collide-mid em { font-style: normal; color: #dc2626; font-size: 10px; font-weight: 700; }
.vg-collide-skip { text-align: center; font-size: 11.5px; color: var(--text-muted); background: #fff; border-radius: 8px; padding: 6px 8px; }
.vg-collide-skip strong { color: #dc2626; }

.vg-report { display: flex; align-items: center; gap: 14px; }
.vg-report-q {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px;
    background: #fff; border: 1.5px dashed var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 900; color: var(--text-muted);
}
.vg-report-lines { display: flex; flex-direction: column; gap: 5px; }
.vg-report-lines span { font-size: 11.5px; color: var(--text-muted); position: relative; padding-right: 14px; }
.vg-report-lines span::before { content: "✕"; position: absolute; right: 0; color: #dc2626; font-weight: 800; font-size: 10px; }

.vg-night { display: flex; align-items: center; gap: 14px; }
.vg-clock {
    background: var(--navy-deep); color: #fff; border-radius: 12px;
    padding: 10px 14px; font-weight: 800; font-size: 14px; white-space: nowrap;
}
.vg-todo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }

/* --- capability card visuals --- */
.cap-vis {
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px;
    min-height: 118px; justify-content: center; font-size: 12.5px;
}
.cap-confirm {
    align-self: center; font-size: 11px; color: var(--blue); font-weight: 700;
    background: rgba(58,124,255,0.08); border: 1px dashed rgba(58,124,255,0.35);
    padding: 4px 10px; border-radius: 999px;
}
.cap-wa-msg {
    background: #DCF8C6; border-radius: 12px; border-bottom-left-radius: 3px;
    padding: 8px 12px; font-size: 12.5px; color: #1a2e05; max-width: 95%;
    position: relative; line-height: 1.5;
}
.cap-wa-msg strong { display: block; color: #128C4A; font-size: 11px; }
.cap-wa-ticks { color: #34B7F1; font-size: 11px; margin-right: 6px; }
.cap-chat-in {
    background: #fff; border-radius: 12px; border-bottom-right-radius: 3px;
    padding: 7px 12px; font-size: 12.5px; align-self: flex-end; box-shadow: var(--shadow-sm);
}
.cap-chat-in span { color: var(--text-muted); font-size: 10px; margin-right: 6px; }
.cap-chat-bot {
    background: #DCF8C6; border-radius: 12px; border-bottom-left-radius: 3px;
    padding: 7px 12px; font-size: 12.5px; align-self: flex-start; max-width: 92%; line-height: 1.5;
}
.cap-flow { display: flex; align-items: center; gap: 10px; }
.cap-flow-fb {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: #1877F2;
    color: #fff; font-weight: 900; font-size: 22px; font-family: Georgia, serif;
    display: flex; align-items: center; justify-content: center;
}
.cap-flow-arrow { color: var(--blue); font-weight: 800; font-size: 18px; }
.cap-flow-lead { background: #fff; border: 1.5px solid rgba(58,124,255,0.4); border-radius: 10px; padding: 7px 12px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.cap-flow-lead strong { color: var(--navy); font-size: 12.5px; }
.cap-flow-lead span { color: var(--text-muted); font-size: 10.5px; }
.cap-dash { display: flex; align-items: stretch; gap: 10px; }
.cap-kpi {
    background: #fff; border-radius: 10px; padding: 8px 12px; text-align: center;
    display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow-sm);
}
.cap-kpi strong { color: var(--navy); font-size: 20px; font-weight: 900; line-height: 1.1; }
.cap-kpi span { color: var(--text-muted); font-size: 10.5px; }
.cap-bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; background: #fff; border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow-sm); min-height: 70px; }
.cap-bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--gradient); opacity: .85; }
.cap-task { background: #fff; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-sm); }
.cap-task--done { color: #16a34a; }
.cap-task--auto { color: var(--navy); border: 1.5px solid rgba(58,124,255,0.4); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cap-task--auto em { font-style: normal; font-size: 10px; color: var(--blue); font-weight: 800; background: rgba(58,124,255,0.08); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.cap-team { display: flex; flex-direction: column; gap: 7px; }
.cap-team-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--navy); }
.cap-team-row .vg-avatar { width: 26px; height: 26px; font-size: 11.5px; }
.cap-team-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--border); position: relative; overflow: hidden; }
.cap-team-bar::after { content: ""; position: absolute; inset: 0; left: auto; width: var(--w, 50%); background: var(--gradient); border-radius: 999px; }
.cap-team-row b { color: var(--text-muted); font-weight: 600; font-size: 10.5px; white-space: nowrap; }
.lp-pain-bridge {
    text-align: center; font-size: clamp(18px, 2.5vw, 22px); color: var(--navy);
    max-width: 720px; margin: 48px auto 0; line-height: 1.7;
}

/* ---------- 3. What is TasKey (navy band) ---------- */
.section-navy {
    background:
        radial-gradient(60% 80% at 80% 20%, rgba(58,124,255,0.25), transparent 70%),
        radial-gradient(40% 60% at 15% 80%, rgba(88,86,224,0.30), transparent 70%),
        var(--navy-deep);
    color: rgba(255,255,255,0.85);
}
.lp-what-inner { text-align: center; max-width: 780px; margin: 0 auto; }
.lp-what-inner--after { margin-top: 32px; }
.lp-what h2 { font-size: clamp(28px, 4vw, 42px); color: #fff; font-weight: 900; margin: 0 0 24px; line-height: 1.25; }
.lp-what p { font-size: 18px; line-height: 1.85; margin: 0 0 16px; }
.lp-what-small { font-size: 15px; opacity: .65; }
.lp-what-explain {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin: 44px auto 0; max-width: 1080px; text-align: right;
}
.lp-what-card {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius); padding: 26px 24px;
    transition: background .25s, border-color .25s, transform .25s;
}
.lp-what-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(91,200,242,0.4); transform: translateY(-3px); }
/* designed mini-mockups inside the navy explainer cards */
.what-vis {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px; padding: 12px; margin-bottom: 16px;
    display: flex; flex-direction: column; gap: 8px; min-height: 108px; justify-content: center;
    font-size: 12.5px;
}
.what-search {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border-radius: 999px; padding: 7px 14px;
    color: var(--navy); font-weight: 600; font-size: 12.5px;
}
.what-search i {
    width: 2px; height: 14px; background: var(--blue); border-radius: 2px;
    animation: what-caret 1.1s step-end infinite;
}
@keyframes what-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .what-search i { animation: none; } }
.what-result {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 10px; padding: 8px 12px; box-shadow: var(--shadow-sm);
}
.what-result-lines { flex: 1; display: flex; flex-direction: column; line-height: 1.4; min-width: 0; text-align: right; }
.what-result-lines strong { color: var(--navy); font-size: 12.5px; }
.what-result-lines span { color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.what-result em {
    font-style: normal; color: #16a34a; font-weight: 800; font-size: 10.5px;
    background: rgba(34,197,94,0.12); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.what-lead-head { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px 10px 0 0; padding: 9px 12px; }
.what-lead-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--border); border-radius: 0 0 10px 10px; overflow: hidden;
}
.what-lead-tabs span {
    background: var(--bg-alt); color: var(--navy); font-weight: 600; font-size: 11px;
    padding: 7px 8px; display: flex; align-items: center; justify-content: space-between; gap: 4px;
}
.what-lead-tabs b { color: var(--blue); font-weight: 800; }
.what-pipeline { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.what-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.what-step em { font-style: normal; color: rgba(255,255,255,0.65); font-size: 10px; font-weight: 600; white-space: nowrap; }
.what-src { display: flex; gap: 3px; }
.what-src b {
    width: 26px; height: 26px; border-radius: 8px; background: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.what-src-fb { color: #1877F2; font-family: Georgia, serif; font-weight: 900; font-size: 16px !important; }
.what-chip {
    background: #fff; color: var(--navy); border-radius: 999px; padding: 5px 10px;
    font-weight: 700; font-size: 11px; white-space: nowrap; box-shadow: var(--shadow-sm);
}
.what-arrow { color: var(--cyan); font-weight: 800; font-size: 15px; flex-shrink: 0; }
.lp-what-card h3 { color: #fff; margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.lp-what-card p { color: rgba(255,255,255,0.72) !important; margin: 0 !important; font-size: 14.5px !important; line-height: 1.75 !important; }
@media (max-width: 900px) { .lp-what-explain { grid-template-columns: 1fr; } }
/* phones: keep the mini-mockups inside the card so nothing clips off the (RTL) left edge */
@media (max-width: 540px) {
    .what-vis { padding: 11px; font-size: 12px; }
    .what-pipeline { gap: 6px; }
    .what-pipeline .what-step { flex: 1 1 0; min-width: 0; }
    .what-chip { white-space: normal; font-size: 9.5px; padding: 5px 7px; line-height: 1.25; }
    .what-arrow { font-size: 13px; }
    .what-src { gap: 2px; }
    .what-src b { width: 21px; height: 21px; font-size: 11px; }
    .what-src-fb { font-size: 13px !important; }
    .what-lead-tabs span { font-size: 10px; padding: 6px; }
    .what-result-lines strong, .what-result-lines span { font-size: 10.5px; }
}

.lp-what-shot {
    margin: 48px auto 0; max-width: 920px;
    border-radius: 18px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(91,200,242,0.10), 0 0 60px rgba(58,124,255,0.25);
}
.lp-what-shot-bar {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.07); padding: 11px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lp-what-shot img { width: 100%; display: block; }

/* ---------- 4. Capabilities ---------- */
.lp-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lp-cap-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 30px 28px; transition: transform .25s, box-shadow .25s, border-color .25s;
    display: flex; flex-direction: column;
}
.lp-cap-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(58,124,255,0.35); }
.lp-cap-icon {
    width: 54px; height: 54px; border-radius: 16px; background: var(--gradient-soft);
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    margin-bottom: 18px;
}
.lp-cap-card h3 { margin: 0 0 10px; color: var(--navy); font-size: 19px; font-weight: 800; line-height: 1.35; }
.lp-cap-pain {
    margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #b45309;
    background: rgba(245, 158, 11, 0.10); border-radius: 8px; padding: 4px 10px;
    align-self: flex-start;
}
.lp-cap-card p { color: var(--text-muted); margin: 0; font-size: 15px; line-height: 1.7; }
.lp-cap-card p + p { margin-top: 6px; }
.lp-cap-card--more { background: var(--gradient-soft); border-style: dashed; }
.lp-cap-link { margin-top: auto; padding-top: 14px; font-weight: 700; font-size: 15px; }

/* ---------- 4.5 AI world ---------- */
.eyebrow--ondark { background: rgba(91,200,242,0.12); border-color: rgba(91,200,242,0.3); color: var(--cyan); }
.eyebrow-spark { vertical-align: -2px; margin-left: 4px; }
.lp-ai .section-head { margin-bottom: 56px; }
.lp-ai-title { color: #fff !important; }
.lp-ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto; }
.lp-ai-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius); padding: 30px 28px;
    transition: transform .25s, background .25s, border-color .25s;
}
.lp-ai-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.08); border-color: rgba(91,200,242,0.4); }
.lp-ai-icon {
    width: 54px; height: 54px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(91,200,242,0.25), rgba(88,86,224,0.30));
    border: 1px solid rgba(91,200,242,0.25);
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    margin-bottom: 18px;
}
.lp-ai-card h3 { color: #fff; margin: 0 0 10px; font-size: 19px; font-weight: 800; }
.lp-ai-card p { color: rgba(255,255,255,0.72); margin: 0; font-size: 15px; line-height: 1.75; }
@media (max-width: 900px) { .lp-ai-grid { grid-template-columns: 1fr; } }

/* ---------- capabilities extras ---------- */
.lp-cap-more { text-align: center; margin: 36px auto 0; color: var(--text-muted); font-size: 15.5px; max-width: 680px; }
.lp-cap-more a { font-weight: 700; }

/* ---------- 5.3 Without the fine print ---------- */
.lp-without-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
.lp-without-card {
    display: flex; align-items: flex-start; gap: 16px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px 26px; box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.lp-without-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lp-without-x, .lp-without-v {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800;
}
.lp-without-x { background: rgba(239, 68, 68, 0.10); color: #dc2626; }
.lp-without-v { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.lp-without-card strong { display: block; color: var(--navy); font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.lp-without-card p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.7; }
.lp-without-card--yes { border-color: rgba(34, 197, 94, 0.35); background: linear-gradient(135deg, #fff, rgba(34,197,94,0.04)); }
@media (max-width: 700px) { .lp-without-grid { grid-template-columns: 1fr; } }

/* ---------- 5.35 compact pricing (home) ---------- */
.lp-price-sub { color: var(--text-muted); font-size: 16px; margin: 14px 0 0; }
.lp-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto; align-items: stretch; }
.lp-price-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 28px 26px; display: flex; flex-direction: column; position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.lp-price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(58,124,255,0.35); }
.lp-price-card--featured { border: 2px solid var(--blue); box-shadow: var(--shadow-md); }
.lp-price-badge {
    position: absolute; top: -13px; right: 24px;
    background: var(--gradient); color: #fff;
    font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 14px;
}
.lp-price-card h3 { margin: 0 0 4px; color: var(--navy); font-size: 20px; font-weight: 900; }
.lp-price-card > p { margin: 0 0 16px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.lp-price-amount { display: flex; align-items: baseline; gap: 5px; margin-bottom: 12px; }
.lp-price-amount em { font-style: normal; color: var(--text-muted); font-size: 13px; }
.lp-price-amount strong { color: var(--navy); font-size: 34px; font-weight: 900; line-height: 1; }
.lp-price-amount span { color: var(--text-muted); font-size: 13px; }
.lp-price-card .check-list { margin: 0 0 16px; flex: 1; }
.lp-price-card .check-list li { padding: 5px 0 5px 0; padding-right: 28px; font-size: 14px; }
.lp-price-card .check-list li::before { top: 5px; }
.lp-price-card .price-tiers { margin: 0 0 18px; }
.lp-price-note { text-align: center; color: var(--text-muted); font-size: 14.5px; margin: 28px 0 0; }
.lp-price-note a { font-weight: 700; }
@media (max-width: 900px) { .lp-price-grid { grid-template-columns: 1fr; max-width: 440px; } }

/* ---------- 5.4 Built-in manager alerts ---------- */
.lp-alerts { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.lp-alerts-text h2 { font-size: clamp(28px, 4vw, 40px); color: var(--navy); font-weight: 900; margin: 0 0 18px; line-height: 1.25; }
.lp-alerts-text > p { color: var(--text-muted); font-size: 16.5px; line-height: 1.8; margin: 0 0 8px; }
.lp-alerts-custom {
    margin-top: 22px !important; padding: 16px 18px;
    background: var(--gradient-soft); border: 1px dashed rgba(58,124,255,0.5);
    border-radius: var(--radius-sm); color: var(--text) !important; font-size: 15px !important;
}
.lp-alerts-custom a { font-weight: 700; white-space: nowrap; }
.lp-alerts-visual { display: flex; justify-content: center; }
.alerts-phone {
    width: 100%; max-width: 360px;
    background: #ECE5DD; border-radius: 22px; padding: 16px;
    display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}
.alerts-phone-head {
    text-align: center; font-size: 12px; font-weight: 700; color: #128C4A;
    background: rgba(255,255,255,0.7); border-radius: 999px; padding: 5px 12px;
    align-self: center;
}
.alerts-phone .cap-wa-msg { max-width: 100%; }
@media (max-width: 900px) { .lp-alerts { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- 5.45 Dashboard in a click ---------- */
.lp-dash { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.lp-dash-text h2 { font-size: clamp(28px, 4vw, 40px); color: var(--navy); font-weight: 900; margin: 0 0 18px; line-height: 1.25; }
.lp-dash-text > p { color: var(--text-muted); font-size: 16.5px; line-height: 1.8; margin: 0 0 8px; }
.dash-board {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 12px;
}
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-head strong { color: var(--navy); font-size: 14.5px; font-weight: 800; }
.dash-sync {
    display: inline-flex; align-items: center; gap: 6px;
    color: #15803d; font-size: 11.5px; font-weight: 700;
    background: rgba(34,197,94,0.10); border-radius: 999px; padding: 4px 10px;
}
.dash-sync i {
    width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
    animation: dash-pulse 1.8s ease-in-out infinite;
}
@keyframes dash-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dash-sync i { animation: none; } }
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dash-kpis .cap-kpi { padding: 10px 6px; }
.dash-kpis .cap-kpi strong { font-size: 17px; }
.cap-kpi--hot strong { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.dash-charts { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
.dash-chart-main, .dash-chart-side {
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.dash-chart-title { font-size: 11px; font-weight: 700; color: var(--text-muted); display: flex; justify-content: space-between; gap: 6px; }
.dash-chart-title b { font-size: 11px; }
.dash-chart-main svg { width: 100%; height: 86px; display: block; }
.dash-chart-side { align-items: center; }
.dash-donut { width: 84px; height: 84px; }
.dash-chart-side .dash-chart-title { align-self: stretch; }
.dash-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; }
.dash-legend span { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.dash-legend i { width: 8px; height: 8px; border-radius: 50%; }
.dash-mini {
    display: inline-block; vertical-align: middle; width: 46px; height: 5px;
    background: var(--border); border-radius: 999px; margin-right: 6px;
    position: relative; overflow: hidden;
}
.dash-mini b { position: absolute; inset: 0; left: auto; width: var(--w, 50%); background: var(--gradient); border-radius: 999px; }

.dash-table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dash-row {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 6px;
    padding: 8px 12px; font-size: 12.5px; color: var(--text);
    border-bottom: 1px solid var(--border); align-items: center;
}
.dash-row:last-child { border-bottom: 0; }
.dash-row--head { background: var(--bg-alt); font-weight: 700; color: var(--text-muted); font-size: 11px; }
.dash-good { color: #15803d; font-weight: 800; }
.dash-warn { color: #b45309; font-weight: 800; }
.lp-dash .cap-confirm { align-self: center; }
@media (max-width: 900px) { .lp-dash { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- 5.47 WhatsApp center ---------- */
.lp-wacenter { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.lp-wacenter-text h2 { font-size: clamp(28px, 4vw, 40px); color: var(--navy); font-weight: 900; margin: 0 0 18px; line-height: 1.25; }
.lp-wacenter-text > p { color: var(--text-muted); font-size: 16.5px; line-height: 1.8; margin: 0 0 8px; }
.wac {
    display: grid; grid-template-columns: 200px 1fr;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-lg); min-height: 300px;
}
.wac-list { border-left: 1px solid var(--border); background: var(--bg-alt); display: flex; flex-direction: column; }
.wac-chat {
    display: flex; align-items: center; gap: 8px; padding: 11px 12px;
    border-bottom: 1px solid var(--border); font-size: 12px;
}
.wac-chat--active { background: #fff; box-shadow: inset 4px 0 0 var(--green); }
.wac-chat .vg-avatar { width: 30px; height: 30px; font-size: 12px; }
.wac-chat-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.wac-chat-lines strong { color: var(--navy); font-size: 12px; }
.wac-chat-lines span { color: var(--text-muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wac-status { font-style: normal; font-size: 9.5px; font-weight: 800; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.wac-status--new { background: rgba(58,124,255,0.10); color: var(--blue); }
.wac-status--open { background: rgba(245,158,11,0.12); color: #b45309; }
.wac-status--done { background: rgba(34,197,94,0.12); color: #15803d; }
.wac-main { display: flex; flex-direction: column; }
.wac-main-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.wac-main-head strong { color: var(--navy); font-size: 13px; }
.wac-lead-btn {
    font-size: 11px; font-weight: 700; color: var(--blue);
    background: rgba(58,124,255,0.08); border: 1px solid rgba(58,124,255,0.25);
    border-radius: 999px; padding: 4px 10px;
}
.wac-msgs {
    flex: 1; display: flex; flex-direction: column; gap: 8px;
    padding: 14px; background: #ECE5DD; font-size: 12.5px;
}
.wac-scheduled {
    align-self: center; font-size: 11px; font-weight: 700; color: #b45309;
    background: rgba(245,158,11,0.14); border: 1px dashed rgba(245,158,11,0.5);
    border-radius: 999px; padding: 4px 12px; margin-top: 2px;
}
.wac-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px; border-top: 1px solid var(--border); background: #fff;
}
.wac-status-select {
    font-size: 11.5px; font-weight: 700; color: var(--navy);
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: 8px; padding: 5px 10px;
}
.wac-rep { font-size: 11px; color: var(--text-muted); font-weight: 600; }
@media (max-width: 900px) {
    .lp-wacenter { grid-template-columns: 1fr; gap: 36px; }
    .lp-wacenter-visual, .wac, .wac-main, .wac-msgs { min-width: 0; max-width: 100%; }
    .wac { grid-template-columns: 1fr; }
    .wac-list { flex-direction: row; border-left: 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
    .wac-chat { border-bottom: 0; border-left: 1px solid var(--border); flex-shrink: 0; }
    .wac-actions { flex-wrap: wrap; }
}

/* ---------- 5.48 Retainers ---------- */
.lp-ret { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.lp-ret-text h2 { font-size: clamp(28px, 4vw, 40px); color: var(--navy); font-weight: 900; margin: 0 0 18px; line-height: 1.25; }
.lp-ret-text > p { color: var(--text-muted); font-size: 16.5px; line-height: 1.8; margin: 0 0 8px; }
.dash-kpis--3 { grid-template-columns: repeat(3, 1fr); }
.ret-pay { font-size: 11px !important; font-weight: 700; color: var(--navy); white-space: nowrap; }
@media (max-width: 900px) { .lp-ret { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- 5.49 Projects & tasks ---------- */
.lp-proj { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.lp-proj-text h2 { font-size: clamp(28px, 4vw, 40px); color: var(--navy); font-weight: 900; margin: 0 0 18px; line-height: 1.25; }
.lp-proj-text > p { color: var(--text-muted); font-size: 16.5px; line-height: 1.8; margin: 0 0 8px; }
.proj-progress {
    font-size: 11.5px; font-weight: 800; color: #fff;
    background: var(--gradient); border-radius: 999px; padding: 4px 12px;
    box-shadow: var(--glow-blue); white-space: nowrap;
}
.proj-money {
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.proj-money-bar { height: 9px; border-radius: 999px; background: var(--border); overflow: hidden; position: relative; }
.proj-money-bar i { position: absolute; inset: 0; left: auto; width: var(--w, 50%); background: var(--gradient); border-radius: 999px; }
.proj-money .dash-kpis { gap: 8px; }
.proj-money .cap-kpi { padding: 8px 6px; }
.proj-money .cap-kpi strong { font-size: 15px; }
.proj-kpi-good { color: #15803d !important; }
.proj-kpi-warn { color: #b45309 !important; }
.proj-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.proj-links span {
    font-size: 10.5px; font-weight: 700; color: var(--navy); text-align: center;
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: 999px; padding: 5px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proj-tasks {
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
    padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.proj-task {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 8px; padding: 8px 12px;
    font-size: 12.5px; box-shadow: var(--shadow-sm);
}
.proj-task b { flex-shrink: 0; font-size: 13px; }
.proj-task > span { flex: 1; color: var(--navy); font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-task em { font-style: normal; color: var(--text-muted); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.proj-task--auto { border: 1.5px solid rgba(58,124,255,0.35); }
.proj-tag {
    color: var(--blue) !important; background: rgba(58,124,255,0.08);
    border-radius: 999px; padding: 2px 8px; font-weight: 800 !important;
}
.proj-tag--warn { color: #b45309 !important; background: rgba(245,158,11,0.12); }
.proj-auto { color: var(--blue); }
@media (max-width: 900px) { .lp-proj { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- 5.495 Digital signature ---------- */
.lp-sign { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.lp-sign-text h2 { font-size: clamp(28px, 4vw, 40px); color: var(--navy); font-weight: 900; margin: 0 0 18px; line-height: 1.25; }
.lp-sign-text > p { color: var(--text-muted); font-size: 16.5px; line-height: 1.8; margin: 0 0 8px; }
.sign-doc {
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.sign-doc-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sign-doc-title strong { color: var(--navy); font-size: 13.5px; font-weight: 800; }
.sign-doc-title em {
    font-style: normal; font-size: 10.5px; font-weight: 800;
    color: var(--blue); background: rgba(58,124,255,0.08);
    border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.sign-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.sign-var {
    font-size: 10.5px; font-weight: 800; color: var(--blue);
    background: rgba(58,124,255,0.07); border: 1px dashed rgba(58,124,255,0.4);
    border-radius: 6px; padding: 3px 8px;
}
.sign-lines { display: flex; flex-direction: column; gap: 7px; }
.sign-lines i { display: block; height: 8px; border-radius: 999px; background: var(--border); }
.sign-pad {
    background: #fff; border: 1.5px dashed rgba(58,124,255,0.45); border-radius: 8px;
    padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.sign-pad > span:last-child { font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
.sign-mark {
    font-family: 'Segoe Script', 'Bradley Hand', cursive;
    font-size: 30px; color: var(--navy); line-height: 1; transform: rotate(-4deg);
}
.lp-sign .cap-confirm { align-self: center; }
@media (max-width: 900px) { .lp-sign { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- 5.5 Business types ---------- */
.lp-biz-sub { color: var(--text-muted); font-size: 17px; margin: 14px 0 0; line-height: 1.75; }
.lp-biz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-biz-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px 24px; transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex; flex-direction: column; gap: 6px;
}
.lp-biz-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(58,124,255,0.35); }
.lp-biz-card strong { color: var(--navy); font-size: 17px; font-weight: 800; }
.biz-vis {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px; min-height: 52px;
}
.biz-tag {
    background: #fff; border: 1px solid var(--border); border-radius: 999px;
    padding: 3px 10px; font-size: 11px !important; font-weight: 700; color: var(--navy);
    white-space: nowrap;
}
.biz-tag--lead { border-color: rgba(58,124,255,0.5); color: var(--blue); }
.biz-arrow { color: var(--blue); font-weight: 800; font-size: 13px !important; }
.biz-kpi {
    margin-right: auto; font-size: 10.5px; font-weight: 800; color: var(--blue);
    background: rgba(58,124,255,0.08); border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.biz-kpi--ok { color: #15803d; background: rgba(34,197,94,0.10); }
.biz-vis .vg-avatar { width: 24px; height: 24px; font-size: 11px !important; margin-right: -6px; border: 2px solid #fff; }
.biz-vis .vg-avatar:first-of-type { margin-right: 0; }
.biz-vis .cap-team-bar { flex: 1; min-width: 40px; }
.biz-grow { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.biz-grow i { width: 9px; border-radius: 3px 3px 0 0; background: var(--gradient); }
.lp-biz-card p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.65; }
@media (max-width: 900px) { .lp-biz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lp-biz-grid { grid-template-columns: 1fr; } }

/* ---------- 5.7 Integrations ---------- */
.lp-int-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px;
    max-width: 1080px; margin: 0 auto;
}
.lp-int-card {
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    padding: 18px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lp-int-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(58,124,255,0.4); }
.lp-int-card img { height: 36px; width: auto; max-width: 90%; object-fit: contain; }
.lp-int-card span { font-size: 12.5px; font-weight: 600; color: var(--navy); text-align: center; line-height: 1.3; }
.lp-int-rest {
    height: 36px; display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 17px !important; letter-spacing: .05em;
    background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.lp-int-note { text-align: center; color: var(--text-muted); font-size: 14.5px; margin: 28px 0 0; }
@media (max-width: 1024px) { .lp-int-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 768px) { .lp-int-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 540px) { .lp-int-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }

/* ---------- 5. Compare ---------- */
.lp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lp-compare-text h2 { font-size: clamp(28px, 4vw, 40px); color: var(--navy); font-weight: 900; margin: 0 0 20px; line-height: 1.25; }
.lp-compare-text p { color: var(--text-muted); font-size: 16.5px; line-height: 1.8; margin: 0 0 14px; }
.lp-compare-table table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-md); font-size: 15px;
}
.lp-compare-table th, .lp-compare-table td { padding: 15px 18px; text-align: right; border-bottom: 1px solid var(--border); }
.lp-compare-table tr:last-child td { border-bottom: 0; }
.lp-compare-table thead th { background: var(--bg-alt); color: var(--navy); font-weight: 800; font-size: 14.5px; }
.lp-compare-table td:first-child { font-weight: 600; color: var(--navy); }
.lp-compare-table td:not(.lp-col-taskey):not(:first-child) { color: var(--text-muted); }
.lp-col-taskey { background: rgba(58, 124, 255, 0.06); color: var(--blue) !important; font-weight: 800; }
thead .lp-col-taskey { background: var(--blue) !important; color: #fff !important; }

/* ---------- 5.9 Our story ---------- */
.lp-story { max-width: 760px; margin: 0 auto; position: relative; padding-right: 8px; }
.lp-story::before {
    content: ""; position: absolute; top: 8px; bottom: 8px; right: 17px; width: 3px;
    background: linear-gradient(180deg, var(--cyan), var(--blue), var(--indigo));
    border-radius: 3px; opacity: .35;
}
.lp-story-item { display: flex; gap: 22px; padding: 0 0 36px; position: relative; }
.lp-story-item:last-child { padding-bottom: 0; }
.lp-story-dot {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 4px solid var(--blue); margin-top: 2px;
    box-shadow: 0 0 0 4px rgba(58,124,255,0.12); z-index: 1;
}
.lp-story-dot--now { background: var(--gradient); border-color: transparent; box-shadow: var(--glow-blue); }
.lp-story-item h3 { margin: 0 0 6px; color: var(--navy); font-size: 19px; font-weight: 800; }
.lp-story-item p { margin: 0; color: var(--text-muted); font-size: 15.5px; line-height: 1.8; }

.lp-story-banner {
    max-width: 820px; margin: 48px auto 0; text-align: center;
    background:
        radial-gradient(70% 120% at 80% 0%, rgba(91,200,242,0.18), transparent 60%),
        linear-gradient(135deg, var(--navy-deep), var(--navy-2));
    border-radius: var(--radius); padding: 36px 40px;
    box-shadow: var(--shadow-lg);
}
.lp-story-banner p { color: rgba(255,255,255,0.85); font-size: 17px; line-height: 1.85; margin: 0 0 14px; }
.lp-story-banner strong { color: #fff; }
.lp-story-punch {
    font-size: 19px !important; font-weight: 800; margin: 0 !important;
    background: var(--gradient); -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
}

/* ---------- 6. Proof ---------- */
.lp-stats { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; margin-bottom: 56px; }
.lp-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lp-stat strong {
    font-size: 44px; font-weight: 900; line-height: 1;
    background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-stat span { color: var(--text-muted); font-size: 15px; font-weight: 500; }

.lp-clients { margin-top: 64px; }
.lp-clients-title { text-align: center; color: var(--navy); font-size: 22px; font-weight: 800; margin: 0 0 28px; }

/* ---------- 7. Steps ---------- */
.lp-steps { display: flex; align-items: stretch; justify-content: center; gap: 18px; max-width: 980px; margin: 0 auto; }
.lp-step {
    flex: 1; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 30px 26px; text-align: center; box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s;
}
.lp-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.lp-step-num {
    width: 52px; height: 52px; border-radius: 50%; background: var(--gradient);
    color: #fff; font-weight: 900; font-size: 22px; display: flex;
    align-items: center; justify-content: center; margin: 0 auto 16px;
    box-shadow: var(--glow-blue);
}
.lp-step h3 { margin: 0 0 8px; color: var(--navy); font-size: 19px; font-weight: 800; }
.lp-step p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.7; }
.lp-step-arrow { align-self: center; color: var(--blue); font-size: 28px; font-weight: 800; opacity: .5; }
.lp-mid-cta { text-align: center; margin-top: 52px; }

/* ---------- 9. Closing ---------- */
.lp-closing {
    background:
        radial-gradient(70% 100% at 50% 0%, rgba(91,200,242,0.25), transparent 70%),
        linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-2) 60%, var(--indigo) 130%);
    padding: 110px 0;
}
.lp-closing-inner { text-align: center; max-width: 720px; }
.lp-closing h2 { color: #fff; font-size: clamp(30px, 4.5vw, 46px); font-weight: 900; margin: 0 0 16px; }
.lp-closing p { color: rgba(255,255,255,0.8); font-size: 18.5px; margin: 0 0 36px; }
.lp-closing-soft { margin: 26px 0 0 !important; font-size: 15px !important; }
.lp-closing-soft a { color: var(--cyan); font-weight: 700; }

/* ============ SECTIONS (shared) ============ */
.section { padding: 92px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.section-head h2 {
    font-size: clamp(28px, 4vw, 42px); color: var(--navy);
    margin: 0; font-weight: 900; line-height: 1.25; letter-spacing: -0.01em;
}
.section-head .eyebrow + h2, .section-head .hero-eyebrow + h2 { margin-top: 4px; }

/* ============ PAGE HERO (inner pages) ============ */
.page-hero {
    background:
        radial-gradient(60% 50% at 30% 0%, rgba(91, 200, 242, 0.16), transparent 70%),
        radial-gradient(50% 40% at 80% 10%, rgba(88, 86, 224, 0.12), transparent 70%),
        linear-gradient(180deg, #f6f9ff 0%, #fff 100%);
    padding: 76px 0 56px;
    position: relative; overflow: hidden;
}
.page-hero--sm { padding: 60px 0 40px; }
.page-hero > .container { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.page-hero h1, .page-hero h2 {
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.15; margin: 0 0 18px; color: var(--navy); font-weight: 900;
}
.hero-sub { font-size: 18px; color: var(--text-muted); max-width: 580px; margin: 0 0 28px; line-height: 1.75; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.hero-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 14px 24px; color: var(--text-muted); font-size: 14px; font-weight: 500; }

.hero-visual { position: relative; min-height: 380px; }
.hero-card {
    position: absolute; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow-md);
    display: flex; flex-direction: column; gap: 6px; min-width: 200px;
}
.hero-card strong { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.hero-card .big-num { color: var(--navy); font-size: 32px; font-weight: 800; }
.hero-card .trend { font-size: 13px; font-weight: 600; }
.hero-card .trend.up { color: #16a34a; }
.hero-card-1 { top: 0; right: 8%; }
.hero-card-2 { top: 130px; left: 0; }
.hero-card-3 { top: 240px; right: 18%; }

/* ============ STATS STRIP (legacy) ============ */
.stats-bar-section { background: var(--navy-deep); padding: 44px 0; color: #fff; }
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stats-strip .stat-item { display: flex; flex-direction: column; gap: 4px; }
.stats-strip .stat-item strong { font-size: 38px; font-weight: 900; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.stats-strip .stat-item span { font-size: 14px; opacity: 0.8; }
@media (max-width: 600px) { .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 28px; } .stats-strip .stat-item strong { font-size: 28px; } }

/* ============ WHATSAPP BLOCK (features page) ============ */
.whatsapp-block { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.whatsapp-eyebrow { background: rgba(37, 211, 102, 0.10); color: #16a34a; border-color: rgba(37, 211, 102, 0.25); }
.whatsapp-text h2 { color: var(--navy); font-size: clamp(28px, 4vw, 40px); line-height: 1.25; margin: 12px 0 18px; font-weight: 900; }
.whatsapp-text p { color: var(--text-muted); font-size: 16px; line-height: 1.8; }
.whatsapp-visual { display: flex; justify-content: center; }
.wa-chat {
    background: #ECE5DD; border-radius: 20px; padding: 18px; max-width: 360px; width: 100%;
    display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-lg);
}
.wa-msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.wa-in { background: #fff; color: #111; align-self: flex-end; border-bottom-right-radius: 2px; }
.wa-out { background: #DCF8C6; color: #111; align-self: flex-start; border-bottom-left-radius: 2px; }
.wa-system {
    align-self: center; font-size: 12px; color: var(--blue); font-weight: 600;
    background: rgba(58,124,255,0.08); padding: 6px 12px; border-radius: 999px;
    border: 1px dashed rgba(58,124,255,0.3);
}
@media (max-width: 900px) { .whatsapp-block { grid-template-columns: 1fr; } }

/* ============ STEPS GRID (legacy) ============ */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-item {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 28px; position: relative; transition: transform .25s, box-shadow .25s;
}
.step-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-num {
    width: 46px; height: 46px; border-radius: 14px; background: var(--gradient);
    color: #fff; font-weight: 800; font-size: 20px; display: flex;
    align-items: center; justify-content: center; margin-bottom: 16px;
    box-shadow: var(--glow-blue);
}
.step-item h3 { margin: 0 0 8px; color: var(--navy); font-size: 18px; font-weight: 800; }
.step-item p { margin: 0; color: var(--text-muted); font-size: 15px; }
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; } }

/* ============ AUDIENCE / PILLS ============ */
.audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.audience-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px 16px; text-align: center; transition: transform .2s, border-color .2s, box-shadow .2s;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.audience-card:hover { transform: translateY(-3px); border-color: rgba(58,124,255,0.4); box-shadow: var(--shadow-sm); }
.audience-card span { font-size: 32px; }
.audience-card strong { color: var(--navy); font-size: 15px; }
@media (max-width: 700px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }

.integrations-grid {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
    max-width: 920px; margin: 0 auto;
}
.integration-pill {
    background: #fff; border: 1.5px solid var(--border); border-radius: 999px;
    padding: 10px 20px; color: var(--navy); font-weight: 600; font-size: 14px;
    transition: border-color .15s, transform .15s, box-shadow .2s;
}
.integration-pill:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ============ FEATURES GRID ============ */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 30px 28px; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(58,124,255,0.35); }
.feature-icon {
    font-size: 26px; margin-bottom: 14px;
    width: 54px; height: 54px; border-radius: 16px; background: var(--gradient-soft);
    display: flex; align-items: center; justify-content: center;
}
.feature-card h3 { margin: 0 0 8px; color: var(--navy); font-size: 18px; font-weight: 800; }
.feature-card p { color: var(--text-muted); margin: 0; font-size: 15px; line-height: 1.7; }

/* ============ FEATURES PAGE (ft-*) — "סיור במערכת" ============ */

/* hero */
.ft-hero .container { text-align: center; }
.ft-hero .hero-sub { margin-left: auto; margin-right: auto; }
.ft-hero .lp-hero-badges { justify-content: center; margin-bottom: 26px; }
.ft-hero .hero-ctas { justify-content: center; margin-bottom: 14px; }

/* module index grid */
.ft-index { padding: 8px 0 56px; background: linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%); }
.ft-index-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.ft-tile {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    padding: 12px 14px; color: var(--text);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ft-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(58,124,255,0.45); text-decoration: none; }
.ft-tile-ic {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
    background: var(--gradient-soft); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
}
.ft-tile-ic svg { width: 20px; height: 20px; }
.ft-tile:hover .ft-tile-ic { color: var(--indigo); }
.ft-tile div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.ft-tile strong { color: var(--navy); font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-tile span { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-tile i { font-style: normal; color: var(--blue); font-weight: 800; opacity: 0; transform: translateX(4px); transition: opacity .2s, transform .2s; }
.ft-tile:hover i { opacity: 1; transform: none; }
@media (max-width: 1100px) { .ft-index-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .ft-index-grid { grid-template-columns: repeat(2, 1fr); } .ft-tile span { display: none; } .ft-tile-ic { width: 34px; height: 34px; } .ft-tile-ic svg { width: 17px; height: 17px; } }

/* sticky scrollspy module rail */
.ft-rail {
    position: sticky; top: 78px; z-index: 40;
    background: rgba(255,255,255,0.88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 6px 18px rgba(15,31,77,0.05);
}
.ft-rail-inner {
    display: flex; gap: 4px; overflow-x: auto;
    max-width: 1200px; margin: 0 auto; padding: 9px 24px;
    scrollbar-width: none;
}
.ft-rail-inner::-webkit-scrollbar { display: none; }
.ft-rail a {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap;
    transition: background .2s, color .2s;
}
.ft-rail a b { font-size: 10px; font-weight: 900; color: var(--blue); opacity: .65; }
.ft-rail a:hover { color: var(--blue); background: rgba(58,124,255,0.07); text-decoration: none; }
.ft-rail a.is-active { background: var(--navy); color: #fff; }
.ft-rail a.is-active b { color: var(--cyan); opacity: 1; }
@media (max-width: 540px) { .ft-rail { top: 62px; } .ft-rail-inner { padding: 8px 16px; } }

/* module sections */
.ft-mod { padding: 72px 0; scroll-margin-top: 132px; }
.ft-midcta { padding: 56px 0; }
.ft-num {
    font-weight: 900; font-size: 11.5px; letter-spacing: .08em;
    margin-left: 6px; padding-left: 8px;
    border-left: 1px solid rgba(58,124,255,0.3);
}
.ft-more { display: inline-block; margin-top: 18px; font-weight: 700; font-size: 15px; }
.ft-hot { color: var(--blue); font-weight: 700; }
.ft-won { color: #15803d; font-weight: 700; }
.feature-visual { align-self: center; }

.feature-block { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; border-bottom: 1px dashed var(--border); scroll-margin-top: 130px; }
.feature-block:last-child { border-bottom: 0; }
.feature-block .cap-vis { min-height: 200px; gap: 10px; }
.feature-block.reverse { direction: ltr; }
.feature-block.reverse > * { direction: rtl; }
.feature-block h2 { color: var(--navy); font-size: 28px; margin: 12px 0 16px; font-weight: 800; }
.feature-block p { color: var(--text-muted); font-size: 16px; line-height: 1.8; }
/* inside a dedicated module section (features page) the section supplies the spacing */
.ft-mod .feature-block { padding: 0; border-bottom: 0; }

/* app-window frame for module visuals */
.ft-window {
    background: #fff; border: 1px solid var(--border); border-radius: 18px;
    overflow: hidden; box-shadow: var(--shadow-lg);
}
.ft-window-bar { display: flex; align-items: center; gap: 6px; background: var(--navy); padding: 11px 16px; }
.ft-window-body {
    padding: 16px; background: var(--bg-alt); color: var(--text);
    display: flex; flex-direction: column; gap: 10px;
    min-height: 220px; justify-content: center; font-size: 12.5px;
}
.ft-window .cap-confirm { align-self: center; }
.ft-window .lp-cal-event strong { font-size: 13.5px; }

/* navy module (07 reports) */
.ft-mod--navy h2 { color: #fff; }
.ft-mod--navy .feature-block p { color: rgba(255,255,255,0.78); }
.ft-mod--navy .check-list li { color: rgba(255,255,255,0.85); }
.ft-mod--navy .check-list li::before { background: rgba(91,200,242,0.18); color: var(--cyan); }
.ft-mod--navy .ft-more { color: var(--cyan); }
.ft-mod--navy .ft-window {
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 60px rgba(58,124,255,0.25);
}
.ft-mod--navy .ft-num { border-color: rgba(91,200,242,0.35); }

/* integrations mini logo-grid inside the window */
.ft-int-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ft-int-logos .lp-int-card { padding: 10px 6px; gap: 6px; border-radius: 12px; }
.ft-int-logos .lp-int-card img { height: 24px; }
.ft-int-logos .lp-int-card span { font-size: 10.5px; }

/* incoming-call chip (telephony module) */
.ft-call-chip {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: #fff; box-shadow: var(--shadow-sm); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
}
.ft-call-chip svg { width: 18px; height: 18px; }

/* phone mockup (mobile-app module) — bezel + screen, like a real device */
.ft-phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ft-phone {
    width: 100%; max-width: 280px;
    background: var(--navy-deep); border-radius: 44px; padding: 12px;
    box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,0.08);
}
.ft-phone-screen {
    background: var(--bg-alt); border-radius: 33px;
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px 12px 10px; font-size: 12.5px; overflow: hidden;
    min-height: 545px;
}
.ft-phone-main { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.ft-phone-tabs {
    display: flex; justify-content: space-around; align-items: center;
    background: #fff; border: 1px solid var(--border); border-radius: 16px;
    padding: 9px 8px; color: var(--text-muted);
}
.ft-phone-tabs svg { width: 19px; height: 19px; display: block; }
.ft-phone-tabs .is-active { color: var(--blue); }
.ft-phone-status {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 8px 0; color: var(--navy); font-size: 11px;
}
.ft-phone-status b { font-weight: 800; }
.ft-phone-status span { font-size: 8.5px; letter-spacing: 1px; opacity: .7; }
.ft-phone-push {
    background: var(--navy); color: rgba(255,255,255,0.92);
    border-radius: 14px; padding: 10px 14px; font-size: 12.5px; line-height: 1.5;
}
.ft-phone-push strong { display: block; font-size: 10.5px; font-weight: 800; color: var(--cyan); margin-bottom: 2px; }
.ft-phone .cap-task { border: 1px solid var(--border); box-shadow: none; }
.ft-phone-clock {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 9px 14px; font-size: 12.5px; font-weight: 700; color: var(--navy);
}
.ft-phone-clock b { color: #15803d; font-size: 11px; white-space: nowrap; }
.ft-phone .cap-confirm { align-self: center; }
.ft-phone-home { width: 86px; height: 4px; border-radius: 999px; background: var(--border); margin: 2px auto 0; }

/* WhatsApp-screen variant (manager alerts) */
.ft-phone--wa { margin: 0 auto; }
.ft-phone--wa .ft-phone-screen { background: #ECE5DD; }
.ft-phone--wa .ft-phone-status { color: #3b3b3b; }
.ft-phone--wa .cap-wa-msg { max-width: 100%; }
.ft-phone--wa .alerts-phone-head { margin-bottom: 2px; }
.ft-phone--wa .ft-phone-home { background: rgba(0,0,0,0.18); }

/* status-pill row (customization module) */
.ft-status-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ft-status-row .wac-status { font-size: 11px; padding: 4px 11px; }

/* Google Play badge (shared: features, home hero, footer) */
.gp-badge {
    display: inline-flex; align-items: center; gap: 11px;
    background: var(--navy); color: #fff;
    border: 1px solid transparent; border-radius: 12px; padding: 8px 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .2s;
}
.gp-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; text-decoration: none; }
.gp-badge svg { width: 22px; height: 22px; flex-shrink: 0; }
.gp-badge span { display: flex; flex-direction: column; text-align: right; line-height: 1.2; }
.gp-badge small { font-size: 9.5px; opacity: .72; }
.gp-badge strong { font-size: 14.5px; font-weight: 800; }
.gp-badge--light { background: #fff; color: var(--navy); border-color: var(--border); }
.gp-badge--light:hover { color: var(--navy); }
.lp-hero-store { margin-top: 16px; }
.site-footer .gp-badge { margin-top: 16px; }

.check-list { list-style: none; padding: 0; margin: 16px 0 0; }
.check-list li { padding: 8px 0; padding-right: 30px; position: relative; color: var(--text); }
.check-list li::before {
    content: "✓"; position: absolute; right: 0; top: 7px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(58,124,255,0.10); color: var(--blue);
    font-weight: 800; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
}

/* ============ CLIENTS GRID ============ */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.client-logo {
    padding: 16px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, box-shadow .2s;
    /* רקע לבן — חלק מהלוגואים לא נראים טוב על רקע אפרפר */
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
}
.client-logo:hover { box-shadow: var(--shadow-sm); }
.client-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.65;
    transition: filter .25s, opacity .25s, transform .25s;
}
.client-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}
.client-logo-darkbg {
    background: var(--navy);
    border-radius: 10px;
    padding: 14px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}
.client-logo-darkbg img { filter: grayscale(100%); opacity: 0.85; }
.client-logo:hover .client-logo-darkbg img { filter: grayscale(0%); opacity: 1; transform: scale(1.08); }
@media (max-width: 900px) {
    .clients-grid { grid-template-columns: repeat(4, 1fr); }
    .client-logo { height: 100px; padding: 12px; }
}
@media (max-width: 600px) {
    .clients-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .client-logo { height: 85px; padding: 8px; }
}

/* ============ TESTIMONIALS ============ */
.testimonials-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
    grid-auto-flow: row dense;
    max-width: 980px; margin: 0 auto;
}
.testimonial {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 30px; display: flex; flex-direction: column; gap: 14px;
    transition: transform .25s, box-shadow .25s; position: relative;
    box-shadow: var(--shadow-sm);
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial--featured {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #fff 0%, #f0f5ff 100%);
    border: 1.5px solid rgba(58,124,255,0.45); box-shadow: var(--shadow-md);
}
.testimonial--featured::before {
    content: "“"; position: absolute; top: 8px; left: 22px;
    font-family: Georgia, serif; font-size: 72px; line-height: 1;
    color: var(--blue); opacity: 0.14; font-weight: 700;
}
.testimonial--featured footer strong { color: var(--blue); }

.stars { color: #fbbf24; font-size: 18px; letter-spacing: 2px; }
.testimonial blockquote { margin: 0; font-size: 15.5px; line-height: 1.85; color: var(--text); flex: 1; }
.testimonial footer { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.testimonial footer div { display: flex; flex-direction: column; gap: 2px; }
.testimonial footer strong { color: var(--navy); font-size: 16px; font-weight: 800; }
.testimonial footer span { color: var(--text-muted); font-size: 13px; }
.testimonial-logo {
    height: 40px; max-width: 90px; width: auto; object-fit: contain;
    background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 4px 8px;
}
.testimonial-avatar {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #fff; font-weight: 800; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
}
.testimonial-avatar--b { background: linear-gradient(135deg, var(--blue), var(--indigo)); }
.testimonial-photo {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; border: 2px solid #fff; box-shadow: var(--shadow-sm);
}
.testimonial-avatar--c { background: linear-gradient(135deg, #f59e0b, #ef4444); }
@media (max-width: 900px) {
    .testimonials-grid { grid-template-columns: 1fr; }
}

/* ============ PROMISES (pricing) ============ */
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.promise-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 28px 24px; display: flex; flex-direction: column; gap: 8px;
    position: relative; overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.promise-card::before {
    content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px;
    background: var(--gradient); opacity: 0; transition: opacity .2s;
}
.promise-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(58,124,255,0.35); }
.promise-card:hover::before { opacity: 1; }
.promise-icon {
    width: 52px; height: 52px; border-radius: 16px; background: var(--gradient-soft);
    display: flex; align-items: center; justify-content: center; font-size: 25px;
    margin-bottom: 6px;
}
.promise-card strong { color: var(--navy); font-size: 17px; font-weight: 800; }
.promise-card p { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.7; }
@media (max-width: 900px) { .promise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .promise-grid { grid-template-columns: 1fr; } }

/* security vignettes (features page) */
.sec-vis {
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px; margin-bottom: 14px; min-height: 96px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    font-size: 12px; width: 100%;
}
.sec-db { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sec-db-disk {
    width: 54px; height: 10px; border-radius: 999px;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    box-shadow: var(--shadow-sm);
}
.sec-db--other .sec-db-disk { background: #cbd5e1; }
.sec-db em { font-style: normal; color: var(--text-muted); font-size: 10px; font-weight: 700; margin-top: 2px; }
.sec-divider { width: 80%; height: 0; border-top: 2px dashed #fca5a5; position: relative; }
.sec-vis .sec-db { flex-direction: row; align-items: center; gap: 4px; }
.sec-url {
    display: flex; align-items: center; gap: 6px; direction: ltr;
    background: #fff; border-radius: 999px; padding: 7px 14px;
    color: var(--navy); font-weight: 600; font-size: 11.5px; box-shadow: var(--shadow-sm);
    font-family: Consolas, monospace;
}
.sec-https { color: #16a34a; font-weight: 800; }
.sec-lock { font-size: 12px; }
.sec-chip {
    background: rgba(34,197,94,0.10); color: #15803d; border: 1px dashed rgba(34,197,94,0.4);
    border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: 10.5px;
}
.sec-backup {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: #fff; border-radius: 10px; padding: 8px 12px; box-shadow: var(--shadow-sm);
    color: var(--text-muted); font-size: 10.5px; font-weight: 600;
}
.sec-backup b { color: #16a34a; font-size: 11px; white-space: nowrap; }
.sec-backup span { white-space: nowrap; }
.sec-bar { flex: 1; height: 7px; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #16a34a); }
.sec-perm {
    width: 100%; background: #fff; border-radius: 8px; padding: 5px 10px;
    font-weight: 700; font-size: 11.5px; box-shadow: var(--shadow-sm);
}
.sec-perm--ok { color: #15803d; }
.sec-perm--no { color: #b91c1c; opacity: .75; text-decoration: line-through; }

/* ============ FAQ — open cards (home) ============ */
.faq-cards { columns: 3; column-gap: 20px; max-width: 1100px; margin: 0 auto; }
.faq-card {
    break-inside: avoid; margin-bottom: 20px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px 24px; box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative; overflow: hidden;
}
.faq-card::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px;
    background: var(--gradient); opacity: .55;
}
.faq-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(58,124,255,0.3); }
.faq-card h3 { margin: 0 0 8px; color: var(--navy); font-size: 16px; font-weight: 800; line-height: 1.45; }
.faq-card p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.75; }
.faq-card a { font-weight: 700; }
@media (max-width: 1000px) { .faq-cards { columns: 2; } }
@media (max-width: 640px) { .faq-cards { columns: 1; } }

/* ============ FAQ — accordion (inner pages) ============ */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.faq-item[open] { border-color: rgba(58,124,255,0.5); box-shadow: var(--shadow-sm); }
.faq-item summary {
    list-style: none; cursor: pointer; padding: 19px 24px;
    font-weight: 700; color: var(--navy); font-size: 16.5px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+"; font-size: 26px; color: var(--blue); font-weight: 400;
    transition: transform .2s; line-height: 1; flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 24px 22px; color: var(--text); line-height: 1.8; }
.faq-body a { color: var(--blue); font-weight: 600; }

/* ============ CTA BANNER (shared) ============ */
.cta-banner {
    background:
        radial-gradient(70% 120% at 80% 0%, rgba(91,200,242,0.35), transparent 60%),
        linear-gradient(135deg, var(--blue), var(--indigo));
    color: #fff; padding: 56px;
    border-radius: 28px; display: flex; align-items: center; justify-content: space-between;
    gap: 32px; flex-wrap: wrap; box-shadow: var(--shadow-lg);
}
.cta-banner h2 { color: #fff; margin: 0 0 8px; font-size: 32px; font-weight: 900; }
.cta-banner p { margin: 0; opacity: .9; font-size: 16.5px; }
.cta-banner .btn-primary { background: #fff; color: var(--navy); box-shadow: 0 12px 30px rgba(0,0,0,0.20); }
.cta-banner .btn-primary:hover { color: var(--blue); }

/* ============ PRICING ============ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 34px 30px; display: flex; flex-direction: column; gap: 16px; position: relative;
    box-shadow: var(--shadow-sm);
}
.price-card.featured {
    border: 2px solid var(--blue); transform: scale(1.03);
    box-shadow: var(--shadow-lg);
}
.price-badge {
    position: absolute; top: -14px; left: 24px;
    background: var(--gradient); color: #fff; padding: 6px 16px;
    border-radius: 999px; font-size: 12px; font-weight: 800;
    box-shadow: var(--glow-blue);
}
.price-card h3 { margin: 0; color: var(--navy); font-size: 22px; font-weight: 900; }
.price { display: flex; align-items: baseline; gap: 6px; }
.price .amount { font-size: 40px; font-weight: 900; color: var(--navy); }
.price .per { color: var(--text-muted); font-size: 14px; }
.price-desc { color: var(--text-muted); font-size: 14px; margin: 0; }
.price-card .check-list { flex: 1; margin: 8px 0; }
.pricing-footnote { text-align: center; color: var(--text-muted); margin: 32px 0 0; font-size: 14px; }
.pricing-footnote a { color: var(--blue); font-weight: 600; }

.price-note { color: var(--text-muted); font-size: 13px; margin: -4px 0 8px; }

/* user-count calculator on price cards */
.calc {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 14px; margin: 2px 0 6px;
}
.calc-label { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.calc-controls { display: flex; align-items: center; gap: 14px; }
.calc-btn {
    width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--border);
    background: #fff; color: var(--navy); font-size: 18px; font-weight: 700;
    cursor: pointer; line-height: 1; transition: border-color .15s, color .15s, transform .1s;
    display: flex; align-items: center; justify-content: center;
}
.calc-btn:hover { border-color: var(--blue); color: var(--blue); }
.calc-btn:active { transform: scale(0.92); }
.calc-users { color: var(--navy); font-size: 18px; min-width: 26px; text-align: center; }

.price-trial { margin: 4px 0 8px; }
.trial-tag {
    display: inline-block; background: var(--gradient-soft);
    color: var(--blue); border: 1px dashed rgba(58,124,255,0.6); border-radius: 999px;
    padding: 4px 14px; font-size: 13px; font-weight: 800;
}

.price-tiers { margin-top: 20px; padding: 16px; background: var(--bg-alt); border-radius: var(--radius-sm); font-size: 13px; }
.price-tiers strong { display: block; color: var(--navy); margin-bottom: 8px; font-size: 13px; }
.price-tiers ul { list-style: none; padding: 0; margin: 0; }
.price-tiers li {
    display: flex; justify-content: space-between; padding: 4px 0;
    color: var(--text-muted); border-bottom: 1px dashed var(--border);
}
.price-tiers li:last-child { border-bottom: 0; }
.price-tiers li span:last-child { color: var(--navy); font-weight: 700; }

/* ============ HELP CENTER ============ */
/* Knowledge-base layout: compact top bar, sticky category sidebar,
   dense card grid (5-across on wide screens). */

.hc-top {
    background: linear-gradient(180deg, #f6f9ff 0%, #fff 100%);
    border-bottom: 1px solid var(--border);
    padding: 22px 0;
}
.hc-top-inner {
    max-width: 1480px; margin: 0 auto; padding: 0 28px;
    display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap;
}
.hc-top-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hc-top h1 { margin: 0; font-size: 26px; color: var(--navy); font-weight: 900; line-height: 1.2; }
.hc-top-sub { margin: 0; color: var(--text-muted); font-size: 14px; }

.hc-search { position: relative; flex: 1; min-width: 240px; max-width: 540px; margin-inline-start: auto; }
.hc-search svg {
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--text-muted); pointer-events: none;
}
.hc-search input {
    width: 100%; padding: 11px 42px 11px 16px; font: inherit; font-size: 14.5px; font-weight: 500;
    border: 1.5px solid var(--border); border-radius: 12px; background: #fff;
    transition: border-color .15s, box-shadow .2s;
}
.hc-search input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(58,124,255,0.13); }

/* --- two-column shell --- */
.hc-layout {
    max-width: 1480px; margin: 0 auto; padding: 24px 28px 70px;
    display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 30px;
    align-items: start;
}

/* sidebar */
.hc-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; }
.hc-nav {
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.hc-pill {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: right;
    background: transparent; border: 0; border-radius: 9px;
    padding: 8px 10px; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: background .12s, color .12s; line-height: 1.35;
}
.hc-pill svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-muted); transition: color .12s; }
.hc-pill small {
    margin-inline-start: auto; flex-shrink: 0;
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    background: var(--bg-alt); border-radius: 999px; padding: 1px 8px;
}
.hc-pill:hover { background: var(--bg-alt); color: var(--navy); }
.hc-pill.is-active { background: rgba(58,124,255,0.10); color: var(--blue); }
.hc-pill.is-active svg { color: var(--blue); }
.hc-pill.is-active small { background: rgba(58,124,255,0.15); color: var(--blue); }

.hc-side-help {
    background: var(--gradient-soft); border: 1px solid var(--border); border-radius: 14px;
    padding: 16px; text-align: center;
}
.hc-side-help strong { display: block; color: var(--navy); font-size: 14px; margin-bottom: 2px; }
.hc-side-help p { color: var(--text-muted); font-size: 12.5px; margin: 0 0 10px; line-height: 1.5; }
.hc-side-btn { font-size: 13px; padding: 8px 18px; width: 100%; }

/* main column */
.hc-noresults { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.hc-noresults h3 { color: var(--navy); margin: 0 0 8px; }

.hc-category { margin-bottom: 36px; scroll-margin-top: 100px; }
.hc-category-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hc-cat-ic {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
    background: rgba(58,124,255,0.09); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
}
.hc-cat-ic svg { width: 18px; height: 18px; }
.hc-category-head h2 { color: var(--navy); margin: 0; font-size: 18px; font-weight: 800; }
.hc-cat-count { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; }
.hc-category-head::after { content: ""; flex: 1; height: 1px; background: var(--border); margin-inline-start: 6px; }

/* dense card grid — 5-across on wide screens.
   minmax(0,1fr): don't let wide cover images inflate the tracks */
.hc-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1360px) { .hc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1060px) { .hc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hc-card {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    transition: transform .18s, border-color .18s, box-shadow .18s;
    display: flex; flex-direction: column; color: var(--text);
    position: relative; overflow: hidden;
}
.hc-card:hover { transform: translateY(-3px); border-color: rgba(58,124,255,0.45); text-decoration: none; box-shadow: var(--shadow-md); }

.hc-card-cover {
    aspect-ratio: 15 / 8; overflow: hidden; background: var(--bg-alt);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.hc-card-cover img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.hc-card:hover .hc-card-cover img { transform: scale(1.05); }

.hc-card-cover-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--gradient-soft); color: var(--blue);
    transition: transform .35s ease;
}
.hc-card-cover-placeholder svg { width: 40px; height: 40px; }
.hc-card:hover .hc-card-cover-placeholder { transform: scale(1.05); }

.hc-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.hc-card-body h3 {
    margin: 0; font-size: 13.5px; color: var(--navy); line-height: 1.4; font-weight: 700;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hc-card:hover .hc-card-body h3 { color: var(--blue); }

.hc-cta {
    margin-top: 14px; padding: 22px 26px;
    background: var(--gradient-soft);
    border: 1px solid var(--border); border-radius: 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    text-align: right;
}
.hc-cta h3 { color: var(--navy); margin: 0 0 2px; font-size: 17px; font-weight: 800; }
.hc-cta p { color: var(--text-muted); margin: 0; font-size: 14px; }

/* responsive: sidebar becomes a horizontal chip bar */
@media (max-width: 900px) {
    .hc-top-inner, .hc-layout { padding-left: 20px; padding-right: 20px; }
    .hc-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 16px; }
    .hc-side { position: static; }
    .hc-nav {
        flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding: 6px; gap: 4px; scrollbar-width: none;
    }
    .hc-nav::-webkit-scrollbar { display: none; }
    .hc-pill { width: auto; white-space: nowrap; padding: 7px 12px; }
    .hc-pill small { margin-inline-start: 4px; }
    .hc-side-help { display: none; }
    .hc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hc-search { max-width: none; }
}
@media (max-width: 360px) {
    .hc-cards { grid-template-columns: 1fr; }
}

/* ============ DOCS ARTICLE ============ */
.docs-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px;
    padding: 32px 24px 80px; align-items: start;
}
/* Sticky sidebar with its own scroll on long guides */
.docs-sidebar {
    display: flex; flex-direction: column; gap: 16px; align-self: start;
    position: sticky; top: 92px;
    max-height: calc(100vh - 110px); overflow-y: auto;
    scrollbar-width: thin; padding-bottom: 4px;
}

/* full cover image at the top of a guide */
.docs-cover {
    margin: 4px 0 30px; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--border); box-shadow: var(--shadow-md);
    aspect-ratio: 21 / 8; background: var(--bg-alt);
}
.docs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* prev/next pager */
.docs-pager {
    display: flex; justify-content: space-between; gap: 16px;
    margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border);
    max-width: 760px;
}
.docs-pager-link {
    display: flex; flex-direction: column; gap: 3px; padding: 14px 18px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--navy); flex: 1; max-width: 48%;
    transition: border-color .15s, box-shadow .15s;
}
.docs-pager-link.next { text-align: left; margin-inline-start: auto; }
.docs-pager-link:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); text-decoration: none; }
.docs-pager-link small { color: var(--text-muted); font-size: 12px; }
.docs-pager-link strong { font-size: 14.5px; font-weight: 700; }
.docs-sidebar-title { font-size: 13px; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; letter-spacing: .05em; font-weight: 700; }

/* sidebar panels — on a soft non-white background */
.docs-panel {
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 18px 16px;
}
.docs-toc ul { list-style: none; padding: 0; margin: 0; border-right: 2px solid var(--border); }
.docs-toc li a {
    display: block; padding: 5px 12px; color: var(--text-muted);
    font-size: 13.5px; border-right: 2px solid transparent; margin-right: -2px;
    line-height: 1.5;
}
.docs-toc li a:hover { color: var(--blue); text-decoration: none; }
.docs-toc li a.is-active { color: var(--blue); border-right-color: var(--blue); font-weight: 700; }

/* related guides — small thumb + short title */
.docs-related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.docs-related-list li + li { border-top: 1px solid var(--border); }
.docs-related-list a {
    display: flex; align-items: center; gap: 10px; padding: 8px 2px;
    color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.4;
    transition: color .15s;
}
.docs-related-list a:hover { color: var(--blue); text-decoration: none; }
.docs-related-list img, .docs-related-thumb {
    flex-shrink: 0; width: 52px; height: 34px; object-fit: cover;
    border-radius: 7px; border: 1px solid var(--border); background: #fff;
    display: flex; align-items: center; justify-content: center;
    color: var(--blue);
}
.docs-related-thumb svg { width: 16px; height: 16px; }
.docs-all-link { display: block; margin-top: 12px; font-weight: 700; font-size: 13.5px; }

.docs-help-card { text-align: center; }
.docs-help-card strong { display: block; color: var(--navy); font-size: 15px; margin-bottom: 4px; }
.docs-help-card p { color: var(--text-muted); font-size: 12.5px; margin: 0 0 12px; line-height: 1.6; }
.docs-help-card .btn { font-size: 13.5px; padding: 10px 16px; }

.docs-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }
.docs-breadcrumb a { color: var(--text-muted); }
.docs-breadcrumb .current { color: var(--navy); font-weight: 600; }

.docs-title { font-size: 36px; color: var(--navy); margin: 0 0 8px; font-weight: 900; }
.docs-lead { font-size: 18px; color: var(--text-muted); margin: 0 0 32px; }
.docs-content { font-size: 16px; line-height: 1.8; max-width: 760px; }
.docs-content h2 { color: var(--navy); margin-top: 44px; font-size: 26px; font-weight: 800; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.docs-content h3 { color: var(--navy); margin-top: 32px; font-size: 20px; font-weight: 800; }
.docs-content p { margin: 16px 0; }
.docs-content code { background: var(--bg-alt); padding: 2px 6px; border-radius: 4px; font-size: 0.92em; color: var(--indigo); }
.docs-content pre {
    background: var(--navy-deep); color: #e6ecff; padding: 18px;
    border-radius: var(--radius-sm); overflow-x: auto; direction: ltr; text-align: left;
}
.docs-content pre code { background: transparent; color: inherit; padding: 0; }
.docs-content blockquote {
    border-right: 4px solid var(--blue); margin: 16px 0; padding: 10px 18px;
    background: var(--bg-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-muted);
}
.docs-content ul, .docs-content ol { padding-right: 24px; }
.docs-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.docs-content th, .docs-content td { padding: 10px 14px; border: 1px solid var(--border); text-align: right; }
.docs-content th { background: var(--bg-alt); font-weight: 700; }
.docs-content img { border-radius: var(--radius-sm); box-shadow: var(--shadow-md); margin: 18px 0; border: 1px solid var(--border); }
.docs-content img.img-sm { max-width: min(340px, 100%); }
.docs-content img.img-md { max-width: min(520px, 100%); }

/* ============ API DOCS SYSTEM (green-api style, dedicated) ============ */
.apidocs { background: var(--bg-alt); }
.apidocs-shell {
    display: grid; grid-template-columns: 280px minmax(0, 1fr) 220px;
    gap: 40px; align-items: start;
    max-width: 1400px; margin: 0 auto; padding: 0 24px 80px;
}

/* RIGHT sidebar (first DOM child → rightmost in RTL) */
.apidocs-nav {
    position: sticky; top: 76px; align-self: start;
    max-height: calc(100vh - 90px); overflow-y: auto;
    padding: 24px 4px 24px 0;
}
.apidocs-brand {
    display: flex; align-items: center; gap: 10px; font-weight: 800;
    color: var(--navy); font-size: 16px; margin-bottom: 16px;
}
.apidocs-brand:hover { text-decoration: none; color: var(--navy); }
.apidocs-brand-badge {
    background: var(--gradient); color: #fff; font-size: 12px; font-weight: 800;
    padding: 3px 9px; border-radius: 7px; letter-spacing: .04em;
}
.apidocs-search-wrap { margin-bottom: 18px; }
.apidocs-search {
    width: 100%; padding: 9px 14px; border: 1px solid var(--border);
    border-radius: 10px; font-family: inherit; font-size: 13.5px; background: #fff;
}
.apidocs-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(58,124,255,0.12); }

.apidocs-nav-group { margin-bottom: 22px; }
.apidocs-nav-group-title {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted); font-weight: 800; margin: 0 6px 8px;
}
.apidocs-nav-group ul { list-style: none; padding: 0; margin: 0; }
.apidocs-nav-link {
    display: flex; align-items: center; gap: 8px; padding: 7px 10px;
    border-radius: 9px; color: var(--text); font-size: 13.5px; font-weight: 600;
    line-height: 1.4; transition: background .14s, color .14s;
}
.apidocs-nav-link:hover { background: #eef2ff; color: var(--navy); text-decoration: none; }
.apidocs-nav-link.is-active { background: var(--gradient); color: #fff; }
.apidocs-nav-link.is-active .apidocs-method { background: rgba(255,255,255,0.22); color: #fff; }
.apidocs-nav-text { flex: 1; }

/* method badges */
.apidocs-method {
    flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .03em;
    padding: 2px 7px; border-radius: 6px; line-height: 1.5; min-width: 38px; text-align: center;
}
.apidocs-method.is-get  { background: #dcfce7; color: #15803d; }
.apidocs-method.is-post { background: #dbeafe; color: #1d4ed8; }
.apidocs-method.is-other{ background: #fef3c7; color: #b45309; }
.apidocs-method--lg { font-size: 12.5px; padding: 4px 12px; border-radius: 8px; min-width: 0; }

.apidocs-nav-help {
    margin-top: 8px; padding: 16px; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-sm); text-align: center;
}
.apidocs-nav-help strong { display: block; color: var(--navy); font-size: 13.5px; margin-bottom: 10px; }
.apidocs-nav-help .btn { font-size: 13px; padding: 9px 14px; }

/* main content */
.apidocs-main { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 40px; margin-top: 24px; min-width: 0; }
.apidocs-mcp-callout {
    display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 12px 16px;
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--navy); font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
.apidocs-mcp-callout:hover { text-decoration: none; border-color: var(--blue); box-shadow: var(--shadow-sm); }
.apidocs-mcp-badge { flex-shrink: 0; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.apidocs-mcp-text { flex: 1; min-width: 0; color: var(--text-muted); }
.apidocs-mcp-text strong { color: var(--navy); }
.apidocs-mcp-callout i { font-style: normal; color: var(--blue); font-weight: 700; }
.apidocs-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-muted); font-size: 13px; margin-bottom: 18px; }
.apidocs-breadcrumb a { color: var(--text-muted); }
.apidocs-breadcrumb .current { color: var(--navy); font-weight: 600; }
.apidocs-head { border-bottom: 1px solid var(--border); padding-bottom: 22px; margin-bottom: 8px; }
.apidocs-head-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.apidocs-auth {
    font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 8px;
    background: var(--bg-alt); color: var(--text-muted); border: 1px solid var(--border);
}
.apidocs-title { font-size: 32px; color: var(--navy); margin: 0 0 8px; font-weight: 900; }
.apidocs-lead { font-size: 17px; color: var(--text-muted); margin: 0; line-height: 1.6; }
.apidocs-content { max-width: none; }

/* pager */
.apidocs-pager {
    display: flex; justify-content: space-between; gap: 16px;
    margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border);
}
.apidocs-pager-link {
    display: flex; flex-direction: column; gap: 3px; padding: 14px 18px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--navy); flex: 1; max-width: 48%; transition: border-color .15s, box-shadow .15s;
}
.apidocs-pager-link.next { text-align: left; }
.apidocs-pager-link:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); text-decoration: none; }
.apidocs-pager-link small { color: var(--text-muted); font-size: 12px; }
.apidocs-pager-link strong { font-size: 14.5px; font-weight: 700; }

/* on-page TOC (left in RTL) */
.apidocs-toc { align-self: start; position: sticky; top: 76px; padding-top: 24px; }
.apidocs-toc-inner h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 800; margin: 0 0 10px; }
.apidocs-toc-inner ul { list-style: none; padding: 0; margin: 0; border-right: 2px solid var(--border); }
.apidocs-toc-inner li a {
    display: block; padding: 5px 12px; color: var(--text-muted); font-size: 13px;
    border-right: 2px solid transparent; margin-right: -2px; line-height: 1.5;
}
.apidocs-toc-inner li a:hover { color: var(--blue); text-decoration: none; }
.apidocs-toc-inner li a.is-active { color: var(--blue); border-right-color: var(--blue); font-weight: 700; }

@media (max-width: 1080px) {
    .apidocs-shell { grid-template-columns: 260px minmax(0, 1fr); }
    .apidocs-toc { display: none; }
}
@media (max-width: 760px) {
    .apidocs-shell { grid-template-columns: 1fr; gap: 0; padding: 0 16px 60px; }
    .apidocs-nav {
        position: static; max-height: none; overflow: visible;
        border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 8px;
    }
    .apidocs-main { padding: 24px 18px; }
    .apidocs-pager-link { max-width: none; }
}

/* ============ CONTACT ============ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
.contact-info h2 { color: var(--navy); margin-top: 0; font-weight: 800; }
.contact-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: 16px; }
.contact-icon { font-size: 20px; color: var(--blue); }
.contact-form { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; display: grid; gap: 16px; box-shadow: var(--shadow-sm); }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--navy); font-size: 14px; }
.contact-form input, .contact-form textarea {
    border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px;
    font: inherit; color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(58,124,255,0.12);
}
.contact-note {
    background: rgba(58,124,255,0.08); border-right: 4px solid var(--blue);
    padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 16px 0;
    font-size: 14px; color: var(--text); line-height: 1.6;
}
.contact-form select {
    border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px;
    font: inherit; color: var(--text); background: #fff;
}
.contact-form select:focus {
    outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(58,124,255,0.12);
}
.contact-info h3 { color: var(--navy); margin-top: 28px; font-weight: 800; }

/* ============ LOGIN ============ */
.login-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 34px; box-shadow: var(--shadow-md);
}
.login-label { display: flex; flex-direction: column; gap: 8px; color: var(--navy); font-weight: 600; margin-bottom: 20px; }
.login-label input {
    border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 16px;
    font: inherit; font-size: 17px; color: var(--text); direction: ltr; text-align: right;
    transition: border-color .15s, box-shadow .15s;
}
.login-label input:focus {
    outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(58,124,255,0.12);
}
.login-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; padding: 12px 16px; border-radius: 10px; margin-top: 14px; font-size: 14px; }
.contact-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; padding: 12px 16px; border-radius: 10px; margin-top: 14px; font-size: 15px; font-weight: 600; }
.login-results h3 { color: var(--navy); margin: 0 0 16px; }
.systems-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.system-link {
    display: block; padding: 14px 18px; background: var(--bg-alt);
    border: 1.5px solid var(--border); border-radius: 12px;
    color: var(--navy); font-weight: 600; transition: all .15s;
    direction: ltr; text-align: right;
}
.system-link:hover { border-color: var(--blue); background: rgba(58,124,255,0.06); transform: translateY(-1px); text-decoration: none; }
.login-help { margin-top: 24px; padding: 20px; background: var(--bg-alt); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-muted); line-height: 1.7; }
.login-help p { margin: 0 0 10px; }
.login-help p:last-child { margin: 0; }
.btn-spinner { display: inline-block; }

/* ============ SIGNUP ============ */
.signup-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 36px; box-shadow: var(--shadow-md);
}
.signup-section-title { color: var(--navy); font-size: 16px; font-weight: 800; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.signup-section-title:not(:first-child) { margin-top: 28px; }
.signup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .signup-row { grid-template-columns: 1fr; } }
.signup-label { display: flex; flex-direction: column; gap: 6px; color: var(--navy); font-weight: 600; font-size: 14px; margin-bottom: 16px; }
.signup-label input {
    border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px;
    font: inherit; font-size: 16px; color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.signup-label input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(58,124,255,0.12); }

.plan-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 600px) { .plan-options { grid-template-columns: 1fr; } }
.plan-option {
    display: block; cursor: pointer; position: relative;
    border: 2px solid var(--border); border-radius: 14px; padding: 16px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.plan-option input { position: absolute; opacity: 0; pointer-events: none; }
.plan-option:hover { border-color: var(--blue); }
.plan-option:has(input:checked) {
    border-color: var(--blue); background: rgba(58,124,255,0.05);
    box-shadow: 0 0 0 4px rgba(58,124,255,0.10);
}
.plan-content { display: flex; flex-direction: column; gap: 4px; }
.plan-content strong { color: var(--navy); font-size: 17px; }
.plan-price { color: var(--blue); font-weight: 700; font-size: 15px; }
.plan-content small { color: var(--text-muted); font-size: 13px; }
.plan-badge {
    position: absolute; top: -10px; left: 12px; background: var(--gradient); color: #fff;
    font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
}
.plan-option--featured { border-color: rgba(58,124,255,0.4); }

/* users stepper on signup */
.users-picker {
    background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: 14px;
    padding: 16px 18px; margin-bottom: 4px;
}
.users-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.users-picker-label { font-weight: 700; color: var(--navy); font-size: 15px; }
.users-picker .calc-users { font-size: 22px; min-width: 32px; }
.users-picker .calc-btn { width: 38px; height: 38px; font-size: 20px; box-shadow: var(--shadow-sm); }
.users-picker-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
    font-size: 13.5px; color: var(--text-muted);
}
.users-peruser { color: var(--blue); font-weight: 700; }

.trial-summary {
    background: var(--gradient-soft);
    border: 1px dashed rgba(58,124,255,0.6); border-radius: 12px; padding: 14px 18px;
    margin: 16px 0 20px; display: flex; justify-content: space-between; align-items: center;
    font-size: 15px; color: var(--navy);
}
.trial-summary strong { color: var(--blue); font-size: 16px; }

.signup-fineprint { color: var(--text-muted); font-size: 12px; text-align: center; margin: 16px 0 0; line-height: 1.6; }
.signup-fineprint a { color: var(--blue); }

.signup-trust {
    display: flex; justify-content: center; gap: 28px; margin-top: 24px;
    flex-wrap: wrap; color: var(--text-muted); font-size: 13px;
}
.trust-item { display: flex; align-items: center; gap: 6px; }
.trust-item span { font-size: 18px; }

/* ============ LEGAL ============ */
.legal-content { max-width: 820px; }
.legal-content h2 { color: var(--navy); margin-top: 36px; font-size: 22px; font-weight: 800; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--text); line-height: 1.85; }
.legal-content ul { padding-right: 24px; }
.legal-content h3 { color: var(--navy); margin-top: 26px; font-size: 17px; font-weight: 700; }
.legal-content hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

/* Bilingual legal documents — both languages live at the same url */
.legal-lang { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 28px; background: var(--surface, #f4f6fb); border: 1px solid var(--border); border-radius: 999px; }
.legal-lang-btn { padding: 7px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-muted); transition: background .15s, color .15s; }
.legal-lang-btn:hover { text-decoration: none; color: var(--navy); }
.legal-lang-btn.is-active { background: var(--navy); color: #fff; }
.legal-table { width: 100%; border-collapse: collapse; margin: 18px 0 6px; font-size: 14px; }
.legal-table th, .legal-table td { border: 1px solid var(--border); padding: 11px 13px; text-align: inherit; vertical-align: top; line-height: 1.65; }
.legal-table th { background: var(--bg-alt); color: var(--navy); font-weight: 700; font-size: 13px; white-space: nowrap; }
.legal-table td code { background: var(--bg-alt); border-radius: 5px; padding: 2px 6px; font-size: 12.5px; direction: ltr; display: inline-block; }
.legal-table-sub { display: block; color: var(--text-muted); font-size: 12px; direction: ltr; }
/* the table is the one wide block in a legal document — let it scroll rather than break the page */
.legal-content .legal-table { display: block; overflow-x: auto; }
@media (max-width: 700px) { .legal-table th, .legal-table td { padding: 9px 10px; font-size: 13px; } }

.legal-hero--ltr { text-align: left; }
.legal-body--ltr { text-align: left; }
.legal-body--ltr ul { padding-right: 0; padding-left: 24px; }

/* ============ COOKIE NOTICE ============ */
.cookie-notice {
    position: fixed; inset: auto 0 0 0; z-index: 900;
    background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 -10px 30px rgba(15, 31, 77, 0.10);
    animation: cookie-rise .32s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes cookie-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cookie-notice { animation: none; } }
.cookie-notice-inner {
    max-width: 1160px; margin: 0 auto; padding: 18px 24px;
    display: flex; align-items: center; gap: 24px;
}
.cookie-notice-text { flex: 1; min-width: 0; }
.cookie-notice-text strong { display: block; color: var(--navy); font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.cookie-notice-text p { margin: 0; max-width: 880px; color: var(--text-muted); font-size: 13.5px; line-height: 1.7; text-wrap: pretty; }
.cookie-notice-text a { color: var(--blue); font-weight: 600; white-space: nowrap; }
.cookie-notice-ok { flex-shrink: 0; padding: 11px 32px; font-size: 15px; }
@media (max-width: 760px) {
    .cookie-notice-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; }
    .cookie-notice-ok { width: 100%; }
}

/* ============ EMPTY STATE ============ */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state h3 { color: var(--navy); margin: 0 0 8px; }

/* ============ FOOTER ============ */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.72); padding: 68px 0 24px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer-logo { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 20px; margin-bottom: 8px; }
.footer-logo-img { height: 44px; width: auto; margin-bottom: 12px; filter: brightness(0) invert(1); }
.footer-tagline { margin: 0; opacity: .7; font-size: 14px; }
.footer-note { display: block; font-size: 12px; opacity: .55; margin-top: 8px; line-height: 1.5; }
.footer-col h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }
.footer-col a { display: block; color: rgba(255,255,255,0.7); padding: 4px 0; font-size: 14px; transition: color .15s; }
.footer-col a:hover { color: var(--cyan); text-decoration: none; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1); margin-top: 44px; padding-top: 20px;
    display: flex; justify-content: space-between; font-size: 13px; opacity: .6; flex-wrap: wrap; gap: 12px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .lp-cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
    .nav-links, .nav-actions { display: none; }
    .nav-toggle { display: block; }
}
@media (max-width: 900px) {

    .section { padding: 68px 0; }

    .lp-hero { padding: 56px 0 72px; }
    .lp-hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .lp-app { transform: none; }
    .lp-pain-grid { grid-template-columns: 1fr; }
    .lp-compare { grid-template-columns: 1fr; gap: 36px; }
    .lp-steps { flex-direction: column; max-width: 460px; }
    .lp-step-arrow { transform: rotate(-90deg); margin: -6px 0; }
    .lp-stats { gap: 40px; }

    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { min-height: 300px; }
    .features-grid, .pricing-grid { grid-template-columns: 1fr; }
    .feature-block { grid-template-columns: 1fr; }
    .price-card.featured { transform: none; }

    .docs-layout { grid-template-columns: minmax(0, 1fr); }
    .docs-sidebar { position: static; max-height: none; overflow: visible; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .cta-banner { text-align: center; flex-direction: column; padding: 40px 28px; }
}
@media (max-width: 640px) {
    .lp-cap-grid { grid-template-columns: 1fr; }
    .lp-app-body { grid-template-columns: 1fr; }
    .lp-float { position: static; display: inline-flex; margin-top: 14px; }

    /* headings: drop forced line breaks that overflow narrow screens */
    .lp-ai-title br,
    .lp-what h2 br,
    .lp-alerts-text h2 br,
    .lp-dash-text h2 br,
    .lp-wacenter-text h2 br,
    .lp-sign-text h2 br,
    .lp-closing h2 br { display: none; }
    .section-head h2 { font-size: 26px; }
    .lp-ai-title { font-size: 26px !important; }

    /* dense data mockups → 2-column layouts */
    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .dash-kpis--3 { grid-template-columns: repeat(3, 1fr); }
    .proj-links { grid-template-columns: repeat(2, 1fr); }
    .dash-charts { grid-template-columns: 1fr; }
    .lp-stats { gap: 24px; }
    .lp-stat strong { font-size: 32px; }

    /* tables inside mockups: allow horizontal scroll instead of pushing the page */
    .lp-compare-table { overflow-x: auto; }
    .dash-row { font-size: 11.5px; padding: 7px 8px; }
    .dash-mini { display: none; }
}
@media (max-width: 540px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WEBINAR (wb-*) — Task #220: auto webinar page + live chat
   ============================================================ */
.wb-stage { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: stretch; }

/* video */
.wb-video { display: flex; flex-direction: column; gap: 12px; }
.wb-video-frame {
    position: relative; background: var(--navy-deep); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9;
}
.wb-video-frame video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
.wb-video-placeholder {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.wb-video-placeholder::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(10,21,53,0.82), rgba(15,31,77,0.72));
}
.wb-video-placeholder.is-playing { background-image: none !important; }
.wb-video-placeholder.is-playing::before { background: var(--navy-deep); }
.wb-play-btn {
    position: relative; z-index: 1; width: 78px; height: 78px; border-radius: 50%;
    border: 0; cursor: pointer; background: var(--gradient); box-shadow: var(--glow-blue);
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s, box-shadow .2s;
}
.wb-play-btn:hover { transform: scale(1.06); box-shadow: 0 16px 40px rgba(58,124,255,0.5); }
.wb-play-tri {
    width: 0; height: 0; margin-right: -6px;
    border-top: 15px solid transparent; border-bottom: 15px solid transparent;
    border-right: 24px solid #fff;
}
.wb-soon-badge {
    position: relative; z-index: 1; color: #fff; font-size: 13.5px; font-weight: 600;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px; padding: 7px 16px; backdrop-filter: blur(4px);
}
.wb-video-meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }
.wb-live-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #ef4444;
    animation: wb-pulse 1.6s ease-in-out infinite;
}
@keyframes wb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .wb-live-dot { animation: none; } }
.wb-live-label { color: var(--navy); font-weight: 700; }
.wb-viewers { color: var(--text-muted); }

/* chat */
.wb-chat {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-md); overflow: hidden; min-height: 460px;
}
.wb-chat-head {
    padding: 14px 18px; border-bottom: 1px solid var(--border);
    background: var(--bg-alt); display: flex; flex-direction: column; gap: 2px;
}
.wb-chat-head strong { color: var(--navy); font-size: 15.5px; font-weight: 800; }
.wb-chat-sub { color: var(--text-muted); font-size: 12.5px; }
.wb-chat-feed {
    flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
    background: #fbfcfe; max-height: 520px;
}
.wb-msg { max-width: 86%; display: flex; flex-direction: column; gap: 2px; }
.wb-msg-author { font-size: 11.5px; font-weight: 700; color: var(--blue); }
.wb-msg-body { font-size: 14px; line-height: 1.55; padding: 8px 12px; border-radius: 12px; }
.wb-msg--guest { align-self: flex-start; }
.wb-msg--guest .wb-msg-body { background: var(--bg-alt); color: var(--text); border-bottom-right-radius: 3px; }
.wb-msg--bot { align-self: flex-start; }
.wb-msg--bot .wb-msg-author { color: var(--green); }
.wb-msg--bot .wb-msg-body {
    background: rgba(58,124,255,0.08); border: 1px solid rgba(58,124,255,0.18);
    color: var(--navy); border-bottom-right-radius: 3px;
}
.wb-msg--me { align-self: flex-end; align-items: flex-end; }
.wb-msg--me .wb-msg-author { color: var(--text-muted); }
.wb-msg--me .wb-msg-body { background: #DCF8C6; color: #1a2e05; border-bottom-left-radius: 3px; }
.wb-msg--sys {
    align-self: center; font-size: 12px; color: var(--text-muted);
    background: rgba(15,31,77,0.05); border-radius: 999px; padding: 4px 12px; max-width: 92%;
}
.wb-chat-typing { display: flex; gap: 4px; padding: 4px 18px 0; }
.wb-chat-typing[hidden] { display: none; }
.wb-chat-typing span {
    width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); opacity: .5;
    animation: wb-typing 1s infinite ease-in-out;
}
.wb-chat-typing span:nth-child(2) { animation-delay: .15s; }
.wb-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wb-typing { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-4px); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .wb-chat-typing span { animation: none; } }
.wb-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.wb-chat-form input {
    flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 999px;
    padding: 10px 16px; font-family: inherit; font-size: 14px; color: var(--text);
    transition: border-color .15s;
}
.wb-chat-form input:focus { outline: none; border-color: var(--blue); }
.wb-chat-form button {
    flex-shrink: 0; width: 42px; height: 42px; border: 0; border-radius: 50%;
    background: var(--gradient); color: #fff; font-size: 18px; font-weight: 800;
    cursor: pointer; box-shadow: var(--glow-blue); transition: transform .15s;
}
.wb-chat-form button:hover { transform: translateY(-1px); }
.wb-chat-form button:disabled { opacity: .5; cursor: default; transform: none; }
.wb-chat-note { text-align: center; font-size: 11.5px; color: var(--text-muted); margin: 0 0 12px; padding: 0 12px; }

/* CTA */
.wb-cta {
    text-align: center; margin: 44px auto 0; max-width: 680px;
    background: var(--gradient-soft); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 40px 32px;
}
.wb-cta h2 { color: var(--navy); font-size: clamp(24px, 3.5vw, 34px); font-weight: 900; margin: 0 0 10px; }
.wb-cta p { color: var(--text-muted); font-size: 16.5px; margin: 0 0 24px; }

@media (max-width: 900px) {
    .wb-stage { grid-template-columns: 1fr; }
    .wb-chat { min-height: 0; }
    .wb-chat-feed { max-height: 360px; }
}

/* Inline SVG icons in guide content — the :icon-name: shortcode (lib/icons.php).
   Monochrome line icons that inherit text color; replace emoji in guides. */
.md-ic { display: inline-flex; width: 1.05em; height: 1.05em; vertical-align: -0.15em; color: var(--blue); flex-shrink: 0; }
.md-ic svg { width: 100%; height: 100%; }
h2 .md-ic, h3 .md-ic, h4 .md-ic { margin-inline-end: .3em; color: var(--blue); }
li .md-ic, td .md-ic { margin-inline-end: .25em; }
blockquote .md-ic { color: inherit; }
/* Per-icon colors for do/don't lists (green ✓ / red ✗ / amber ⚠) */
.md-ic-check, h2 .md-ic-check, h3 .md-ic-check, h4 .md-ic-check { color: #16a34a; }
.md-ic-x, h2 .md-ic-x, h3 .md-ic-x, h4 .md-ic-x { color: #dc2626; }
.md-ic-warning, h2 .md-ic-warning, h3 .md-ic-warning, h4 .md-ic-warning { color: #d97706; }