/* =============================================================
   POLARIS ERP — World-class landing CSS
   System: Inter Tight (display) · Inter (body) · Instrument Serif (editorial)
   Light theme · brand-aligned · RTL-aware · WCAG AA · 60fps
   ============================================================= */

/* ---------- Design Tokens ---------- */
:root {
    /* Brand */
    --brand-50:  #eef2fb;
    --brand-100: #dde4f5;
    --brand-200: #b9c6e8;
    --brand-300: #8ea3d4;
    --brand-400: #5d78b8;
    --brand-500: #3a5ba8;
    --brand-600: #274188;   /* primary */
    --brand-700: #1f3470;
    --brand-800: #182857;
    --brand-900: #111d40;
    --primary:        var(--brand-600);
    --primary-hover:  var(--brand-500);
    --primary-press:  var(--brand-700);

    /* Gold accent */
    --gold-50:  #fffaeb;
    --gold-100: #fff2c7;
    --gold-200: #ffe488;
    --gold-300: #ffd24a;
    --gold-400: #f5b400;
    --gold-500: #d99500;
    --gold-600: #b07700;
    --gold:           var(--gold-400);

    /* Neutrals (Zinc-tuned, warm-cool balanced) */
    --n-0:   #ffffff;
    --n-25:  #fbfbfd;
    --n-50:  #f6f7f9;
    --n-75:  #eff1f4;
    --n-100: #e6e8ee;
    --n-150: #d6dae3;
    --n-200: #c2c8d3;
    --n-300: #9aa1b0;
    --n-400: #6e7585;
    --n-500: #4e5462;
    --n-600: #353a45;
    --n-700: #232730;
    --n-800: #161922;
    --n-900: #0b0d14;

    /* Semantic */
    --bg:           var(--n-0);
    --bg-elev:      var(--n-25);
    --bg-soft:      var(--n-50);
    --bg-mute:      var(--n-75);
    --surface:      var(--n-0);
    --border:       var(--n-100);
    --border-strong:var(--n-150);
    --text:         var(--n-700);
    --text-strong:  var(--n-900);
    --text-mute:    var(--n-500);
    --text-dim:     var(--n-400);

    --success:      #08875d;
    --success-soft: #e3f6ed;
    --danger:       #b42318;
    --danger-soft:  #fdecec;
    --warn:         #b45309;

    /* Radii */
    --r-xs: 6px;
    --r-sm: 10px;
    --r:    14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-2xl:36px;
    --r-full:999px;

    /* Shadows — multi-layer for honest depth */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow:    0 4px 8px -2px rgba(16, 24, 40, 0.06), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
    --shadow-lg: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
    --shadow-xl: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
    --shadow-2xl:0 32px 64px -12px rgba(16, 24, 40, 0.20);
    --shadow-brand: 0 10px 30px -6px rgba(39, 65, 136, 0.35);
    --shadow-gold:  0 10px 30px -6px rgba(245, 180, 0, 0.45);
    --ring-brand: 0 0 0 4px rgba(39, 65, 136, 0.12);
    --ring-gold:  0 0 0 4px rgba(245, 180, 0, 0.22);

    /* Motion */
    --ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;
    --dur-4: 500ms;

    /* Layout */
    --container:      1200px;
    --container-wide: 1320px;
    --gutter: clamp(20px, 4vw, 32px);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    font-family: 'Inter', 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    font-optical-sizing: auto;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
[dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Inter', sans-serif; }
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; transition: color var(--dur-2) var(--ease); }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--brand-100); color: var(--brand-800); }
:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 3px; border-radius: 8px; }

/* Subtle film grain to kill banding (tiny base64 noise) */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .55;
    mix-blend-mode: multiply;
}

/* ---------- Background field ---------- */
.bg-canvas {
    position: fixed; inset: 0; z-index: -1; overflow: hidden;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(39, 65, 136, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 20%, rgba(245, 180, 0, 0.06), transparent 60%),
        radial-gradient(ellipse 70% 50% at 0% 60%, rgba(39, 65, 136, 0.05), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
}
.bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(39, 65, 136, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(39, 65, 136, 0.045) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 70%);
}
.bg-aurora { display: none; }

/* ---------- Typography system ---------- */
h1, h2, h3, h4 {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-strong);
    text-wrap: balance;
}
h1 { font-weight: 800; letter-spacing: -0.035em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    letter-spacing: -0.005em;
    line-height: 1.25;
}
p { text-wrap: pretty; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--brand-600);
    padding: 6px 12px;
    border-radius: var(--r-full);
    background: var(--brand-50);
    border: 1px solid rgba(39, 65, 136, 0.10);
    margin-bottom: 1.25rem;
}
.eyebrow::before {
    content: ""; width: 6px; height: 6px;
    background: var(--brand-500);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(39, 65, 136, 0.18);
}

/* Editorial italic accent — Instrument Serif */
.grad, .serif-accent {
    font-family: 'Instrument Serif', 'Inter Tight', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--brand-600);
    background: linear-gradient(135deg, var(--brand-600) 10%, var(--gold-500) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-inline: 0.04em;
}
[dir="rtl"] .grad, [dir="rtl"] .serif-accent {
    font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    font-style: normal;
    font-weight: 800;
}

em { font-style: normal; color: var(--brand-700); font-weight: 600; }
strong { font-weight: 700; color: var(--text-strong); }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); position: relative; z-index: 1; }
.container-wide { max-width: var(--container-wide); }
section { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 4rem; }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: 1rem; }
.section-head p { color: var(--text-mute); font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6; }

/* ---------- Buttons ---------- */
.btn {
    --btn-h: 48px;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--btn-h);
    padding-inline: 22px;
    border-radius: 10px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.97rem;
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
    transition:
        transform var(--dur-2) var(--ease),
        box-shadow var(--dur-2) var(--ease),
        background var(--dur-2),
        color var(--dur-2),
        border-color var(--dur-2);
    will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-lg { --btn-h: 56px; padding-inline: 28px; font-size: 1.02rem; border-radius: 12px; }
.btn-block { width: 100%; }

.btn-primary {
    background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-600) 100%);
    color: #fff;
    box-shadow:
        var(--shadow-brand),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -6px rgba(39, 65, 136, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.20); }

.btn-gold {
    background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-400) 100%);
    color: #2a1f00;
    box-shadow:
        var(--shadow-gold),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(180, 120, 0, 0.25);
}
.btn-gold:hover { transform: translateY(-1px); }

.btn-ghost {
    background: var(--n-0);
    color: var(--text-strong);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-50); }

.btn .arrow { transition: transform var(--dur-2) var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .btn:hover .arrow { transform: translateX(-3px); }

.link-arrow {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--brand-700);
    font-weight: 600;
    font-size: 0.96rem;
    position: relative;
    padding-bottom: 2px;
}
.link-arrow::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: currentColor; opacity: .4;
    transform-origin: left;
    transition: opacity var(--dur-2);
}
.link-arrow:hover { color: var(--brand-800); }
.link-arrow:hover::after { opacity: 1; }

/* ---------- Urgency strip ---------- */
.urgency {
    position: relative; z-index: 100;
    background: linear-gradient(90deg, var(--brand-700) 0%, var(--brand-600) 50%, var(--brand-700) 100%);
    color: #fff;
    text-align: center;
    padding: 11px 20px;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.urgency a {
    color: var(--gold-200);
    font-weight: 700;
    margin-inline-start: 10px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 226, 136, 0.5);
}
.urgency a:hover { color: #fff; text-decoration-color: #fff; }
.urgency strong { color: #fff; font-weight: 700; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 90;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(16, 24, 40, 0.06);
    padding: 14px 0;
    transition: padding var(--dur-3) var(--ease), background var(--dur-3);
}
.site-header .inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 700;
    color: var(--brand-700);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.brand img { height: 32px; width: auto; transition: transform var(--dur-3) var(--ease); }
.brand:hover img { transform: scale(1.03); }

.nav-links { display: none; gap: 32px; font-weight: 500; }
.nav-links a { color: var(--text-mute); font-size: 0.94rem; position: relative; }
.nav-links a:hover { color: var(--text-strong); }
@media (min-width: 960px) { .nav-links { display: flex; } }

.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-toggle {
    padding: 8px 13px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-mute);
    background: var(--n-0);
    transition: all var(--dur-2) var(--ease);
}
.lang-toggle:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
.btn-cta-sm {
    height: 38px; padding-inline: 16px;
    border-radius: 9px;
    font-size: 0.88rem; font-weight: 600;
    background: var(--brand-600); color: #fff;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all var(--dur-2) var(--ease);
}
.btn-cta-sm:hover { background: var(--brand-500); transform: translateY(-1px); box-shadow: var(--shadow); }

/* ---------- HERO ---------- */
.hero {
    padding: clamp(60px, 8vw, 110px) 0 clamp(64px, 9vw, 130px);
    position: relative;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .hero-visual { order: 2; }
}

.hero-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px 7px 12px;
    border-radius: var(--r-full);
    background: rgba(8, 135, 93, 0.08);
    border: 1px solid rgba(8, 135, 93, 0.18);
    color: var(--success);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-bottom: 1.5rem;
}
.hero-badge .dot {
    width: 7px; height: 7px;
    background: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(8, 135, 93, 0.18);
    animation: pulse-soft 2.4s ease-in-out infinite;
}
@keyframes pulse-soft {
    0%, 100% { box-shadow: 0 0 0 4px rgba(8, 135, 93, 0.18); }
    50% { box-shadow: 0 0 0 7px rgba(8, 135, 93, 0.06); }
}

.hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 1.02;
    margin-bottom: 1.4rem;
    max-width: 16ch;
}
[dir="rtl"] .hero h1 { line-height: 1.2; max-width: 22ch; }
.hero h1 .sub-line {
    display: block;
    color: var(--text-mute);
    font-weight: 500;
    font-size: 0.55em;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin-top: 0.6em;
}
.hero .lede {
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    color: var(--text-mute);
    line-height: 1.55;
    max-width: 56ch;
    margin-bottom: 2rem;
}

.hero-cta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 14px 20px;
    margin-bottom: 2.5rem;
}
.hero-cta-primary {
    flex-direction: column;
    gap: 2px;
    --btn-h: 64px;
    padding-inline: 28px;
    padding-block: 10px;
}
.hero-cta-primary .sub-label {
    font-size: 0.74rem;
    font-weight: 500;
    opacity: .8;
    letter-spacing: 0.01em;
}

.hero-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 32px;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.hero-trust .item {
    display: flex; align-items: flex-start; gap: 8px;
    color: var(--text-mute);
    font-size: 0.9rem;
    line-height: 1.4;
}
.hero-trust .item::before {
    content: ""; width: 16px; height: 16px;
    flex-shrink: 0; margin-top: 3px;
    background: var(--success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308875d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
    border-radius: 50%;
    border: 1px solid rgba(8, 135, 93, 0.20);
}

/* ---------- Hero visual: layered glass dashboard ---------- */
.hero-visual { position: relative; perspective: 1800px; }
.hero-stage { position: relative; isolation: isolate; }
.hero-visual::before {
    /* radial halo behind dashboard */
    content: ""; position: absolute;
    inset: -10% -8% -10% -8%;
    background:
        radial-gradient(50% 50% at 50% 50%, rgba(39, 65, 136, 0.22) 0%, transparent 60%),
        radial-gradient(40% 40% at 80% 20%, rgba(245, 180, 0, 0.18) 0%, transparent 60%);
    filter: blur(40px);
    z-index: 0;
    opacity: .8;
}

/* Floating ALERT TOAST (top-left of dashboard) */
.hero-toast {
    position: absolute;
    z-index: 4;
    top: -18px;
    inset-inline-start: -28px;
    display: flex; align-items: center; gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--danger);
    border-radius: var(--r-lg);
    padding: 10px 14px 10px 12px;
    min-width: 220px;
    box-shadow:
        0 18px 38px -10px rgba(20, 30, 60, 0.22),
        0 0 0 1px rgba(16, 24, 40, 0.04);
    transform: translate3d(0, 0, 50px) rotate(-3deg);
    animation: toast-float 5s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
[dir="rtl"] .hero-toast { transform: translate3d(0, 0, 50px) rotate(3deg); }
.hero-toast .toast-icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--danger-soft);
    color: var(--danger);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}
.hero-toast .toast-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.hero-toast .toast-meta {
    font-size: 0.72rem;
    color: var(--text-mute);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Floating VAT-ready RECEIPT sliver (bottom-left of dashboard) */
.hero-receipt {
    position: absolute;
    z-index: 4;
    bottom: -32px;
    inset-inline-start: -36px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    min-width: 200px;
    box-shadow:
        0 20px 44px -12px rgba(20, 30, 60, 0.24),
        0 0 0 1px rgba(16, 24, 40, 0.04);
    transform: translate3d(0, 0, 60px) rotate(2.5deg);
    animation: receipt-float 6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
    font-family: 'Inter Tight', sans-serif;
    font-variant-numeric: tabular-nums;
}
[dir="rtl"] .hero-receipt { transform: translate3d(0, 0, 60px) rotate(-2.5deg); }
.hero-receipt .receipt-row {
    display: flex; justify-content: space-between;
    font-size: 0.84rem;
    color: var(--text);
    font-weight: 500;
    padding: 3px 0;
}
.hero-receipt .receipt-row.dim { color: var(--text-mute); font-size: 0.76rem; }
.hero-receipt .receipt-row.total {
    border-top: 1px dashed var(--border-strong);
    padding-top: 8px;
    margin-top: 4px;
    font-weight: 700;
    color: var(--text-strong);
}
.hero-receipt .receipt-stamp {
    position: absolute;
    top: 10px; inset-inline-end: 10px;
    background: var(--success-soft);
    color: var(--success);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 3px 7px;
    border-radius: var(--r-full);
    transform: rotate(8deg);
}
[dir="rtl"] .hero-receipt .receipt-stamp { transform: rotate(-8deg); }

@keyframes toast-float {
    0%, 100% { transform: translate3d(0, 0, 50px) rotate(-3deg); }
    50%      { transform: translate3d(0, -6px, 50px) rotate(-2deg); }
}
@keyframes receipt-float {
    0%, 100% { transform: translate3d(0, 0, 60px) rotate(2.5deg); }
    50%      { transform: translate3d(0, -8px, 60px) rotate(3.2deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-toast, .hero-receipt { animation: none; }
}
@media (max-width: 960px) {
    .hero-toast { inset-inline-start: 0; top: -10px; min-width: 0; transform: none; animation: none; }
    .hero-receipt { display: none; } /* keep mobile clean */
}

.dashboard-mock {
    position: relative; z-index: 1;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(247, 248, 251, 0.85) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 0 0 1px rgba(16, 24, 40, 0.04),
        0 30px 60px -20px rgba(20, 30, 60, 0.25),
        0 20px 30px -15px rgba(20, 30, 60, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-radius: var(--r-xl);
    padding: 22px;
    transform: perspective(2000px) rotateY(-7deg) rotateX(6deg);
    transform-style: preserve-3d;
    transition: transform 600ms var(--ease);
}
[dir="rtl"] .dashboard-mock { transform: perspective(2000px) rotateY(7deg) rotateX(6deg); }
.dashboard-mock:hover { transform: perspective(2000px) rotateY(-3deg) rotateX(3deg); }
[dir="rtl"] .dashboard-mock:hover { transform: perspective(2000px) rotateY(3deg) rotateX(3deg); }
@media (max-width: 960px) {
    .dashboard-mock, .dashboard-mock:hover { transform: none; }
}

/* Floating side cards */
.dashboard-mock::after {
    content: "↑ 18.4% revenue";
    position: absolute;
    top: -18px; inset-inline-end: -24px;
    background: var(--n-0);
    color: var(--success);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(8, 135, 93, 0.12);
    transform: translateZ(40px);
}

.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kpi-card {
    background: var(--n-0);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 13px;
    text-align: start;
}
.kpi-label { font-size: 0.66rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 4px; }
.kpi-value { font-family: 'Inter Tight', sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--text-strong); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-delta {
    display: inline-flex; align-items: center;
    margin-top: 6px;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--success-soft);
    color: var(--success);
}
.kpi-delta.neg { background: var(--danger-soft); color: var(--danger); }

.chart-bars {
    display: flex; align-items: flex-end; gap: 7px;
    height: 130px; padding: 14px;
    background: var(--n-0);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.chart-bars .bar {
    flex: 1;
    background: linear-gradient(180deg, var(--brand-400) 0%, var(--brand-600) 100%);
    border-radius: 4px 4px 0 0;
    min-height: 12%;
    animation: bar-grow 1.1s var(--ease-spring) backwards;
}
.chart-bars .bar:nth-child(1) { height: 35%; animation-delay: .05s; }
.chart-bars .bar:nth-child(2) { height: 48%; animation-delay: .10s; }
.chart-bars .bar:nth-child(3) { height: 42%; animation-delay: .15s; }
.chart-bars .bar:nth-child(4) { height: 62%; animation-delay: .20s; }
.chart-bars .bar:nth-child(5) { height: 55%; animation-delay: .25s; }
.chart-bars .bar:nth-child(6) { height: 78%; animation-delay: .30s; }
.chart-bars .bar:nth-child(7) { height: 72%; animation-delay: .35s; }
.chart-bars .bar:nth-child(8) {
    height: 95%;
    animation-delay: .40s;
    background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-400) 100%);
    box-shadow: 0 -4px 12px rgba(245, 180, 0, 0.3);
}
@keyframes bar-grow { from { transform: scaleY(0); transform-origin: bottom; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chart-bars .bar { animation: none; } }

/* ---------- Marquee ---------- */
.marquee-section {
    padding: 36px 0;
    background: var(--bg-soft);
    border-block: 1px solid var(--border);
}
.marquee-section .label {
    text-align: center;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-dim);
    font-weight: 600;
    margin-bottom: 22px;
}
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.marquee-track {
    display: flex;
    gap: 60px;
    width: max-content;
    animation: marquee 40s linear infinite;
    align-items: center;
}
[dir="rtl"] .marquee-track { animation-direction: reverse; }
.marquee-track span {
    font-family: 'Inter Tight', sans-serif;
    color: var(--text-dim);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    white-space: nowrap;
    opacity: 0.7;
    transition: opacity var(--dur-2);
}
.marquee-track span:hover { opacity: 1; color: var(--brand-700); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Micro testimonials ---------- */
.micro-tests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
@media (max-width: 820px) { .micro-tests { grid-template-columns: 1fr; } }
.micro-test {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-xs);
    transition: all var(--dur-3) var(--ease);
}
.micro-test:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.micro-test .stars { color: var(--gold-400); margin-bottom: 12px; font-size: 0.95rem; letter-spacing: 2px; }
.micro-test blockquote {
    font-size: 1rem;
    color: var(--text-strong);
    font-weight: 500;
    line-height: 1.55;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}
.micro-test cite {
    display: flex; flex-direction: column;
    font-style: normal;
    font-size: 0.86rem;
    color: var(--text-mute);
}
.micro-test cite strong { color: var(--text-strong); font-weight: 600; }

/* ---------- Pain wall ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 32px; }
@media (max-width: 820px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pain-grid { grid-template-columns: 1fr; } }
.pain-card {
    --ring: rgba(39, 65, 136, 0);
    text-align: start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 22px 22px 22px 22px;
    transition: all var(--dur-2) var(--ease);
    position: relative;
    box-shadow: 0 0 0 0 var(--ring);
}
.pain-card:hover { border-color: var(--brand-300); transform: translateY(-2px); box-shadow: var(--shadow); }
.pain-card[data-checked="true"] {
    --ring: rgba(39, 65, 136, 0.10);
    border-color: var(--brand-500);
    background: linear-gradient(160deg, var(--brand-50), #fff 70%);
    box-shadow: 0 0 0 4px var(--ring);
}
/* Hand-crafted SVG illustration container (replaces emoji) */
.pain-card .illus {
    width: 72px; height: 72px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-50) 0%, #fff 100%);
    border: 1px solid var(--brand-100);
    border-radius: 16px;
    margin-bottom: 18px;
    color: var(--brand-700);
    transition: all var(--dur-3) var(--ease-spring);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 6px rgba(39, 65, 136, 0.06);
    position: relative;
    overflow: hidden;
}
.pain-card .illus::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(245, 180, 0, 0.18), transparent 55%);
    opacity: 0;
    transition: opacity var(--dur-3);
    pointer-events: none;
}
.pain-card .illus svg {
    width: 44px; height: 44px;
    color: var(--brand-700);
    transition: transform var(--dur-3) var(--ease-spring);
    position: relative; z-index: 1;
}
.pain-card:hover .illus { border-color: var(--brand-300); transform: rotate(-3deg) scale(1.05); }
.pain-card:hover .illus svg { transform: scale(1.08); }
.pain-card[data-checked="true"] .illus {
    background: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-50) 100%);
    border-color: var(--brand-300);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 6px 14px rgba(39, 65, 136, 0.14);
}
.pain-card[data-checked="true"] .illus::before { opacity: 1; }
.pain-card[data-checked="true"] .illus svg { color: var(--brand-800); }
/* Hide the old emoji span if still present anywhere */
.pain-card .emoji { display: none !important; }
.pain-card h4 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 4px;
}
.pain-card p { font-size: 0.91rem; color: var(--text-mute); line-height: 1.5; }
.pain-card::after {
    content: ""; position: absolute;
    top: 18px; inset-inline-end: 18px;
    width: 22px; height: 22px;
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    transition: all var(--dur-2);
}
.pain-card[data-checked="true"]::after {
    background: var(--brand-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
    border-color: var(--brand-600);
}
.pain-counter {
    text-align: center;
    padding: 18px 22px;
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, var(--brand-600), var(--brand-700));
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    max-width: 720px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(8px);
    transition: all var(--dur-3) var(--ease);
    pointer-events: none;
    box-shadow: var(--shadow-brand);
}
.pain-counter strong { color: var(--gold-300); font-weight: 700; }
.pain-counter.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---------- Money card ---------- */
.money-card {
    background: linear-gradient(160deg, #fff 0%, #fff8f8 100%);
    border: 1px solid rgba(180, 35, 24, 0.16);
    border-radius: var(--r-xl);
    padding: clamp(28px, 4vw, 48px);
    max-width: 760px;
    margin: 0 auto;
    box-shadow: var(--shadow-lg);
}
.money-card h3 {
    text-align: center;
    color: var(--danger);
    margin-bottom: 1.8rem;
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    letter-spacing: -0.02em;
}
.money-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0;
    gap: 16px;
    border-bottom: 1px dashed rgba(180, 35, 24, 0.16);
}
.money-row:last-of-type { border-bottom: 0; }
.money-row .label { color: var(--text); font-weight: 500; font-size: 0.96rem; }
.money-row .value {
    color: var(--danger);
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.money-total {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 2px solid rgba(180, 35, 24, 0.22);
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.02em;
}
.money-total .value { color: var(--danger); font-size: 1.7rem; }
.money-annual {
    margin-top: 14px;
    text-align: center;
    color: var(--text-mute);
    font-size: 0.98rem;
}
.money-annual strong { color: var(--danger); font-weight: 700; font-size: 1.15rem; }
.money-cta { text-align: center; margin-top: 28px; }

/* ---------- Tools grid ---------- */
.tools-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
@media (max-width: 920px) { .tools-grid { grid-template-columns: 1fr; } }
.tool-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 30px;
    display: flex; flex-direction: column; gap: 14px;
    transition: all var(--dur-3) var(--ease);
    box-shadow: var(--shadow-xs);
    position: relative;
    overflow: hidden;
}
.tool-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-300), transparent);
    opacity: 0; transition: opacity var(--dur-3);
}
.tool-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.tool-card:hover::before { opacity: 1; }
.tool-card.featured {
    background: linear-gradient(160deg, var(--brand-700) 0%, var(--brand-900) 100%);
    color: rgba(255, 255, 255, 0.85);
    border: 0;
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(39, 65, 136, 0.3);
    position: relative;
}
.tool-card.featured::before { display: none; }
.tool-card.featured::after {
    content: ""; position: absolute;
    top: -50%; right: -20%; width: 60%; height: 100%;
    background: radial-gradient(circle, rgba(245, 180, 0, 0.18) 0%, transparent 60%);
    pointer-events: none;
}
.tool-card.featured h3 { color: #fff; }
.tool-card.featured p { color: rgba(255, 255, 255, 0.75); }
.tool-card.featured .ribbon {
    position: absolute;
    top: 16px; inset-inline-end: 16px;
    background: var(--gold-400);
    color: #2a1f00;
    padding: 4px 10px;
    border-radius: var(--r-full);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 12px rgba(245, 180, 0, 0.35);
    z-index: 1;
}
.tool-card .icon-wrap {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--brand-50);
    color: var(--brand-600);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    border: 1px solid var(--brand-100);
}
.tool-card.featured .icon-wrap {
    background: rgba(255, 255, 255, 0.10);
    color: var(--gold-300);
    border-color: rgba(255, 255, 255, 0.14);
}
.tool-card h3 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.tool-card p { color: var(--text-mute); font-size: 0.95rem; line-height: 1.55; }
.tool-card .btn { margin-top: auto; align-self: flex-start; }
.tool-card.featured .btn-primary { background: var(--gold-400); color: #2a1f00; box-shadow: 0 8px 22px rgba(245, 180, 0, 0.35); }
.tool-card.featured .btn-primary:hover { background: var(--gold-300); }

/* ---------- Outcomes ---------- */
.outcomes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 920px;
    margin: 0 auto;
}
@media (max-width: 720px) { .outcomes { grid-template-columns: 1fr; } }
.outcome {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
    transition: all var(--dur-2) var(--ease);
}
.outcome:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.outcome .check-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--success-soft);
    color: var(--success);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px rgba(8, 135, 93, 0.06);
}
.outcome h4 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 3px;
}
.outcome p { color: var(--text-mute); font-size: 0.9rem; line-height: 1.5; }

/* ---------- Case studies ---------- */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 920px) { .cases-grid { grid-template-columns: 1fr; } }
.case {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-xs);
    transition: all var(--dur-3) var(--ease);
}
.case:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.case .head { padding: 22px 24px 16px; border-bottom: 1px solid var(--border); }
.case .stars { color: var(--gold-400); margin-bottom: 8px; font-size: 0.92rem; letter-spacing: 2px; }
.case .name { font-family: 'Inter Tight', sans-serif; font-weight: 700; color: var(--text-strong); font-size: 1.06rem; letter-spacing: -0.015em; }
.case .city { color: var(--text-mute); font-size: 0.86rem; }
.case .ba { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.case .ba > div { padding: 16px 18px; }
.case .ba .before { background: var(--danger-soft); border-inline-end: 1px solid var(--border); }
.case .ba .after  { background: var(--success-soft); }
.case .ba .label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 700;
    margin-bottom: 4px;
}
.case .ba .before .label { color: var(--danger); }
.case .ba .after  .label { color: var(--success); }
.case .ba .num {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    color: var(--text-strong);
    font-size: 1.04rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.case .saving {
    text-align: center;
    padding: 14px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    color: var(--brand-700);
    background: var(--brand-50);
    border-bottom: 1px solid var(--border);
    letter-spacing: -0.01em;
}
.case blockquote {
    padding: 20px 24px;
    color: var(--text-mute);
    font-size: 0.94rem;
    font-style: italic;
    flex: 1;
    line-height: 1.55;
}

/* ---------- Video ---------- */
.video-wrap {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-xl);
    overflow: hidden;
    background:
        linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%),
        radial-gradient(ellipse at 30% 30%, rgba(245, 180, 0, 0.2) 0%, transparent 50%);
    box-shadow: var(--shadow-2xl);
    cursor: pointer;
}
.video-wrap::before {
    content: ""; position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 96px; height: 96px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 0 0 rgba(255, 255, 255, 0.4);
    transition: all var(--dur-3) var(--ease-spring);
    z-index: 2;
    animation: video-pulse 2.5s ease-out infinite;
}
.video-wrap::after {
    content: ""; position: absolute;
    top: 50%; left: 50%;
    transform: translate(-30%, -50%);
    width: 0; height: 0;
    border-left: 22px solid var(--brand-700);
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    z-index: 3;
}
.video-wrap:hover::before { transform: translate(-50%, -50%) scale(1.08); }
@keyframes video-pulse {
    0% { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(255, 255, 255, 0.5); }
    100% { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 30px rgba(255, 255, 255, 0); }
}

/* ---------- Guarantee — see canonical block in §HOME GUARANTEE below ---------- */

/* ---------- Final paths ---------- */
.final-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 0 auto; }
@media (max-width: 720px) { .final-paths { grid-template-columns: 1fr; gap: 36px; } }
.path {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: clamp(30px, 4vw, 44px);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--dur-3) var(--ease);
}
.path:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.path.highlight {
    background: linear-gradient(160deg, var(--brand-700) 0%, var(--brand-900) 100%);
    color: rgba(255, 255, 255, 0.85);
    border: 0;
    box-shadow: var(--shadow-xl);
    position: relative;
}
.path.highlight::before {
    content: attr(data-badge);
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: var(--gold-400);
    color: #2a1f00;
    padding: 6px 16px;
    border-radius: var(--r-full);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(245, 180, 0, 0.4);
}
.path h3 { font-size: 1.4rem; margin-bottom: 0.6rem; letter-spacing: -0.025em; }
.path.highlight h3 { color: #fff; }
.path > p { color: var(--text-mute); margin-bottom: 1.6rem; }
.path.highlight > p { color: rgba(255, 255, 255, 0.78); }
.path ul { list-style: none; text-align: start; margin-bottom: 1.8rem; }
.path li {
    padding: 7px 0;
    padding-inline-start: 28px;
    position: relative;
    color: var(--text-mute);
    font-size: 0.94rem;
}
.path li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0; top: 11px;
    width: 16px; height: 16px;
    background: var(--success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308875d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
    border-radius: 50%;
}
.path.highlight li { color: rgba(255, 255, 255, 0.9); }
.path.highlight li::before {
    background: rgba(245, 180, 0, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd24a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}
.path .btn-primary { width: 100%; }
.path.highlight .btn-primary { background: linear-gradient(180deg, var(--gold-300), var(--gold-400)); color: #2a1f00; box-shadow: 0 12px 28px rgba(245, 180, 0, 0.4); }
.path.highlight .btn-primary:hover { background: linear-gradient(180deg, var(--gold-200), var(--gold-300)); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-list details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: all var(--dur-2) var(--ease);
}
.faq-list details[open] {
    border-color: var(--brand-200);
    box-shadow: var(--shadow-sm), 0 0 0 4px rgba(39, 65, 136, 0.04);
}
.faq-list summary {
    padding: 20px 24px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: -0.015em;
    color: var(--text-strong);
    cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    list-style: none;
    transition: color var(--dur-2);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--brand-700); }
.faq-list summary::after {
    content: "";
    width: 24px; height: 24px;
    background: var(--brand-50);
    color: var(--brand-600);
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23274188' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    transition: transform var(--dur-3) var(--ease);
}
.faq-list details[open] summary::after {
    transform: rotate(45deg);
    background-color: var(--brand-600);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.faq-list .a {
    padding: 0 24px 22px;
    color: var(--text-mute);
    line-height: 1.65;
    font-size: 0.97rem;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--n-900);
    color: #c2c8d3;
    padding: 90px 0 30px;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: ""; position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 80%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 180, 0, 0.3), transparent);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 48px;
    margin-bottom: 56px;
}
@media (max-width: 920px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand { color: #fff; }
.site-footer .brand img {
    height: 36px;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.site-footer h4, .site-footer h5 {
    font-family: 'Inter Tight', sans-serif;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 18px;
}
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.site-footer a { color: #9aa1b0; font-size: 0.92rem; transition: color var(--dur-2); }
.site-footer a:hover { color: var(--gold-300); }
.footer-tag {
    color: #6e7585;
    font-size: 0.92rem;
    line-height: 1.65;
    margin-block: 16px 20px;
    max-width: 320px;
}
.footer-contact {
    font-size: 0.88rem;
    color: #9aa1b0;
    line-height: 1.7;
}
.footer-contact a { color: #c2c8d3; }
.footer-contact a:hover { color: var(--gold-300); }
.footer-badges {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 18px;
}
.footer-badges span {
    padding: 5px 11px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.04);
    color: #9aa1b0;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: 0.04em;
}
.footer-bar {
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    color: #6e7585;
    font-size: 0.85rem;
}

/* ---------- WhatsApp float ---------- */
.wa-float {
    position: fixed;
    bottom: 24px; inset-inline-end: 24px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
    z-index: 80;
    transition: transform var(--dur-2) var(--ease-spring);
}
.wa-float:hover { transform: scale(1.10); }
.wa-float::after {
    content: ""; position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid #25d366;
    opacity: 0;
    animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
    0% { opacity: .8; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* ---------- Sticky bottom CTA ---------- */
.sticky-cta {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 70;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -10px 30px rgba(20, 30, 60, 0.08);
    padding: 14px 18px;
    transform: translateY(110%);
    transition: transform var(--dur-4) var(--ease);
    display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .left {
    font-weight: 500;
    color: var(--text);
    font-size: 0.92rem;
}
.sticky-cta .left strong { color: var(--brand-700); font-weight: 700; }
.sticky-cta .actions { display: flex; gap: 8px; }
@media (max-width: 600px) { .sticky-cta .left { display: none; } .sticky-cta .actions { flex: 1; } .sticky-cta .actions .btn { flex: 1; } }

/* ---------- Modal ---------- */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(11, 13, 20, 0.6);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none; /* don't intercept clicks while invisible */
    transition: opacity var(--dur-3) var(--ease);
}
/* Respect the `hidden` HTML attribute — our explicit display:flex above
   would otherwise win over the UA default `[hidden] { display: none }`,
   leaving an invisible full-screen overlay that swallows every click. */
.modal-backdrop[hidden] { display: none !important; }
.modal-backdrop.show { opacity: 1; pointer-events: auto; }
.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: clamp(28px, 4vw, 40px);
    max-width: 480px;
    width: 100%;
    box-shadow: var(--shadow-2xl);
    transform: scale(0.96) translateY(10px);
    transition: transform var(--dur-3) var(--ease-spring);
    position: relative;
}
.modal-backdrop.show .modal { transform: scale(1) translateY(0); }
.modal .close {
    position: absolute;
    top: 14px; inset-inline-end: 14px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-mute);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    transition: all var(--dur-2);
}
.modal .close:hover { background: var(--danger-soft); color: var(--danger); }
.modal h3 { font-size: 1.5rem; margin-bottom: 0.4rem; letter-spacing: -0.025em; }
.modal p { color: var(--text-mute); margin-bottom: 1.5rem; line-height: 1.55; }
.modal form { display: flex; flex-direction: column; gap: 12px; }
.modal .field { display: flex; flex-direction: column; gap: 6px; }
.modal label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
}
.modal input, .modal textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border-strong);
    background: var(--n-0);
    transition: all var(--dur-2) var(--ease);
}
.modal input:focus, .modal textarea:focus {
    outline: 0;
    border-color: var(--brand-500);
    box-shadow: var(--ring-brand);
}
.modal .hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.modal .decline {
    margin-top: 10px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.84rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.modal .decline:hover { color: var(--text-mute); }

/* ---------- Reveal animation ---------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ============================================================
   MARKUP BRIDGE — styles the actual class names used by index.php
   ============================================================ */

/* Hero dashboard topbar */
.dashboard-mock .topbar {
    display: flex; align-items: center; gap: 6px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.dashboard-mock .topbar .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--n-150);
}
.dashboard-mock .topbar .dot:nth-child(1) { background: #ff5f57; }
.dashboard-mock .topbar .dot:nth-child(2) { background: #ffbd2e; }
.dashboard-mock .topbar .dot:nth-child(3) { background: #28c940; }
.dashboard-mock .topbar .title {
    margin-inline-start: 10px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Hero KPI cards (actual markup uses .kpi .l .v .d) */
.dashboard-mock .kpi {
    background: var(--n-0);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px 14px;
    text-align: start;
}
.dashboard-mock .kpi .l {
    font-size: 0.66rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 4px;
}
.dashboard-mock .kpi .v {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.dashboard-mock .kpi .d {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.dashboard-mock .kpi .d.up   { background: var(--success-soft); color: var(--success); }
.dashboard-mock .kpi .d.down { background: var(--success-soft); color: var(--success); } /* cost down = good */

/* Chart block (with title + live badge) */
.dashboard-mock .chart {
    position: relative;
    margin-top: 14px;
    background: var(--n-0);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 14px 12px;
}
.dashboard-mock .chart-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-mute);
    letter-spacing: -0.005em;
    margin-bottom: 12px;
}
.dashboard-mock .live-badge {
    position: absolute;
    top: 12px; inset-inline-end: 12px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px 3px 7px;
    border-radius: var(--r-full);
    background: rgba(180, 35, 24, 0.08);
    color: var(--danger);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.dashboard-mock .live-badge::before {
    content: ""; width: 6px; height: 6px;
    background: var(--danger);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18);
    animation: pulse-soft 1.8s ease-in-out infinite;
}

/* Chart bars (actual markup is <span> with inline height) */
.dashboard-mock .chart-bars {
    display: flex; align-items: flex-end; gap: 8px;
    height: 100px;
    padding: 0;
    background: transparent;
    border: 0;
    margin-top: 6px;
}
.dashboard-mock .chart-bars span {
    flex: 1;
    background: linear-gradient(180deg, var(--brand-400) 0%, var(--brand-600) 100%);
    border-radius: 4px 4px 0 0;
    min-height: 12%;
    animation: bar-grow 1.1s var(--ease-spring) backwards;
}
.dashboard-mock .chart-bars span:last-child {
    background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-400) 100%);
    box-shadow: 0 -3px 12px rgba(245, 180, 0, 0.35);
}

/* Logos / marquee section (actual class is .logos with <div class="logo">) */
.logos {
    padding: 56px 0 32px;
    background: var(--bg-soft);
    border-block: 1px solid var(--border);
}
.logos h3 {
    text-align: center;
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-dim);
    font-weight: 600;
    margin-bottom: 24px;
}
.logos .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logos .marquee-track {
    display: flex; gap: 56px;
    width: max-content;
    animation: marquee 42s linear infinite;
    align-items: center;
    padding-block: 8px;
}
[dir="rtl"] .logos .marquee-track { animation-direction: reverse; }
.logos .marquee-track .logo {
    flex: 0 0 auto;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.78;
    transition: opacity var(--dur-2), filter var(--dur-2), transform var(--dur-2);
    /* Desaturate so colorful brand marks read as a calm row, brighten on hover */
    filter: grayscale(0.35) contrast(0.95);
}
.logos .marquee-track .logo img {
    height: 100%;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}
.logos .marquee-track .logo:hover {
    opacity: 1;
    filter: grayscale(0) contrast(1);
    transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) { .logos .marquee-track { animation: none; } }

/* Micro-testimonials (actual class names) */

/* Section heading inside .logos (testimonials sub-block) */
.testimonials-head {
    text-align: center;
    margin-top: 72px;
    margin-bottom: 28px;
}
@media (max-width: 640px) { .testimonials-head { margin-top: 56px; } }

/* Trust strip above the grid */
.trust-strip {
    list-style: none;
    margin: 0 auto 36px;
    padding: 16px 20px;
    max-width: var(--container);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 40px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2, var(--surface)) 100%);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-xs);
}
.trust-strip li {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--text-mute);
    position: relative;
}
.trust-strip li + li::before {
    content: "";
    position: absolute;
    inset-inline-start: -20px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--border-strong);
    transform: translateY(-50%);
}
.trust-strip strong {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    color: var(--text-strong);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
@media (max-width: 640px) {
    .trust-strip { border-radius: 18px; gap: 10px 24px; }
    .trust-strip li + li::before { inset-inline-start: -14px; }
    .trust-strip strong { font-size: 0.98rem; }
}

.micro-testimonials {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 8px;
    max-width: var(--container);
    margin-inline: auto;
}
/* Hero card spans 2 columns on desktop */
.micro-testimonial.is-hero { grid-column: span 2; }
@media (max-width: 1080px) {
    .micro-testimonials { grid-template-columns: repeat(2, 1fr); }
    .micro-testimonial.is-hero { grid-column: span 2; }
}
@media (max-width: 640px)  {
    .micro-testimonials { grid-template-columns: 1fr; }
    .micro-testimonial.is-hero { grid-column: span 1; }
}

/* ─── Auto-activates a clean 3×3 grid when 9+ testimonials are present ───
   Trigger: .micro-testimonials contains a 9th .micro-testimonial child.
   Effect: drops the 4-col + hero pattern in favor of a uniform 3×3.
   Falls back gracefully on browsers without :has() (Firefox <121: keeps 4-col). */
.micro-testimonials:has(> .micro-testimonial:nth-child(9)) {
    grid-template-columns: repeat(3, 1fr);
}
.micro-testimonials:has(> .micro-testimonial:nth-child(9)) .micro-testimonial.is-hero {
    grid-column: span 1;
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
}
.micro-testimonials:has(> .micro-testimonial:nth-child(9)) .micro-testimonial.is-hero .quote { font-size: 1.02rem; }
.micro-testimonials:has(> .micro-testimonial:nth-child(9)) .micro-testimonial.is-hero .t-metric { font-size: 0.95rem; }
@media (max-width: 1080px) {
    .micro-testimonials:has(> .micro-testimonial:nth-child(9)) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .micro-testimonials:has(> .micro-testimonial:nth-child(9)) { grid-template-columns: 1fr; }
}

.micro-testimonial {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-xs);
    transition: all var(--dur-3) var(--ease);
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
}
.micro-testimonial:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); }

/* Hero card visual emphasis */
.micro-testimonial.is-hero {
    background: linear-gradient(160deg, var(--brand-50, var(--surface)) 0%, var(--surface) 55%);
    border-color: var(--brand-200, var(--border-strong));
    box-shadow: var(--shadow);
}
.micro-testimonial.is-hero .quote { font-size: 1.18rem; }
.micro-testimonial.is-hero .t-metric { font-size: 1.05rem; }

/* Strategic-partner badge (top corner) */
.micro-testimonial .t-badge {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-700, #1a5edb);
    background: var(--brand-50, #eef4ff);
    border: 1px solid var(--brand-200, #cfddf9);
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
}

/* Outcome metric — the "trophy" line */
.micro-testimonial .t-metric {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--brand-700, #1a5edb);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border);
    line-height: 1.3;
}

.micro-testimonial .quote {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.02rem;
    color: var(--text-strong);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.015em;
    margin: 0 0 18px;
    position: relative; z-index: 1;
    flex: 1;
}
.micro-testimonial .quote .qmark {
    font-family: 'Instrument Serif', serif;
    color: var(--brand-300, var(--brand-100));
    opacity: 0.7;
    font-size: 1.4em;
    line-height: 0;
    vertical-align: -0.2em;
    margin: 0 2px;
}

/* Footer: avatar + name/role/company */
.micro-testimonial .t-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: auto;
}
.micro-testimonial .avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border), var(--shadow-xs);
    flex-shrink: 0;
}
.micro-testimonial .avatar.is-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    user-select: none;
    background-color: #1a5edb;
}
.micro-testimonial .t-who { min-width: 0; flex: 1; }
.micro-testimonial .name {
    font-weight: 600;
    color: var(--text-strong);
    font-size: 0.94rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.micro-testimonial .verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-600, #2563eb);
    line-height: 0;
}
.micro-testimonial .role {
    color: var(--text-mute);
    font-size: 0.82rem;
    margin-top: 2px;
}
.micro-testimonial .company {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    color: var(--text-strong);
    font-size: 0.85rem;
    letter-spacing: -0.01em;
    margin-top: 2px;
}

/* CTA strip below the grid */
.testimonials-cta {
    margin: 40px auto 0;
    max-width: var(--container);
    padding: 22px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    box-shadow: var(--shadow-xs);
}
.testimonials-cta p {
    margin: 0;
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: -0.01em;
}
.testimonials-cta .btn { flex-shrink: 0; }
@media (max-width: 640px) {
    .testimonials-cta { flex-direction: column; align-items: stretch; text-align: center; padding: 20px; }
    .testimonials-cta .btn { width: 100%; justify-content: center; }
}

/* Pain wall — actual markup uses .text and .check */
.pain-card .text {
    display: block;
    font-family: 'Inter Tight', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-strong);
    line-height: 1.4;
    letter-spacing: -0.01em;
    padding-inline-end: 32px;
}
.pain-card .text strong { color: var(--brand-700); font-weight: 700; }
.pain-card .check { display: none; } /* checkbox indicator handled by ::after */

.pain-cta { text-align: center; margin-top: 40px; }

/* Money card — actual markup */
.money-card .caption {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    margin-bottom: 18px;
}
.money-foot { margin-top: 28px; text-align: center; }
.money-foot p { color: var(--text-mute); margin-bottom: 18px; font-size: 0.95rem; }

/* Tools — actual markup */
.tool-card .tag {
    align-self: flex-start;
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--r-full);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 4px;
}
.tool-card.featured .tag {
    background: var(--gold-400);
    color: #2a1f00;
    box-shadow: 0 4px 12px rgba(245, 180, 0, 0.35);
}
.tool-card .icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--brand-50);
    color: var(--brand-600);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    border: 1px solid var(--brand-100);
}
.tool-card.featured .icon {
    background: rgba(255, 255, 255, 0.10);
    color: var(--gold-300);
    border-color: rgba(255, 255, 255, 0.14);
}
.tool-card .desc { color: var(--text-mute); font-size: 0.95rem; line-height: 1.55; }
.tool-card.featured .desc { color: rgba(255, 255, 255, 0.78); }
.tool-card .meta {
    font-size: 0.82rem;
    color: var(--text-dim);
    font-weight: 500;
    padding-block: 2px;
}
.tool-card.featured .meta { color: rgba(255, 255, 255, 0.65); }
.tools-foot {
    text-align: center;
    margin-top: 40px;
    color: var(--text-mute);
    font-size: 1rem;
}
.tools-foot strong { color: var(--text-strong); font-weight: 700; }

/* Outcomes — h3 in actual markup (I had h4) */
.outcome h3 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 4px;
}

/* Cases — actual markup */
.case {
    padding-top: 0;
}
.case .stars { margin: 22px 24px 6px; color: var(--gold-400); font-size: 0.92rem; letter-spacing: 2px; }
.case h3 {
    margin: 0 24px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    color: var(--text-strong);
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}
.case .city { margin: 0 24px 18px; color: var(--text-mute); font-size: 0.88rem; }
.case .ba {
    display: block;
    border-top: 1px solid var(--border);
    border-bottom: 0;
    padding: 16px 24px;
}
.case .ba.before { background: var(--danger-soft); }
.case .ba.after  { background: var(--success-soft); border-top: 1px solid var(--border); }
.case .ba .h {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin-bottom: 8px;
}
.case .ba.before .h { color: var(--danger); }
.case .ba.after  .h { color: var(--success); }
.case .ba ul {
    list-style: none;
    display: flex; flex-direction: column; gap: 4px;
}
.case .ba li {
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.45;
    padding-inline-start: 16px;
    position: relative;
}
.case .ba li::before {
    content: ""; position: absolute;
    inset-inline-start: 0; top: 9px;
    width: 5px; height: 5px;
    border-radius: 50%;
}
.case .ba.before li::before { background: var(--danger); }
.case .ba.after  li::before { background: var(--success); }
.case .saving {
    text-align: center;
    padding: 14px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    color: var(--brand-700);
    background: var(--brand-50);
    border-block: 1px solid var(--border);
    letter-spacing: -0.01em;
    font-size: 0.95rem;
}
.case blockquote.quote {
    padding: 18px 24px 6px;
    color: var(--text);
    font-family: 'Instrument Serif', 'Inter Tight', serif;
    font-size: 1.08rem;
    font-style: italic;
    line-height: 1.5;
    letter-spacing: -0.01em;
    flex: 1;
}
[dir="rtl"] .case blockquote.quote {
    font-family: 'Tajawal', sans-serif;
    font-style: normal;
    font-weight: 500;
}
.case .author {
    padding: 0 24px 22px;
    color: var(--text-mute);
    font-size: 0.86rem;
    font-weight: 500;
}
.cases-cta { text-align: center; margin-top: 48px; }

/* ---------- Benchmark band (anonymized aggregate ranges) ---------- */
.benchmark { padding: 96px 0; background: var(--surface-alt, #fafbfc); }
.benchmark .section-head { margin-bottom: 52px; text-align: center; }
.benchmark-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}
@media (max-width: 980px) { .benchmark-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .benchmark-grid { grid-template-columns: 1fr; } }

.bench-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 26px 24px 24px;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}
.bench-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-500, #2563eb), var(--brand-700, #1d4ed8));
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease);
}
.bench-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}
.bench-card:hover::before { opacity: 1; }

.bench-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50, #eff4ff);
    color: var(--brand-700, #1d4ed8);
    margin-bottom: 4px;
}
.bench-metric {
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.65rem, 2.6vw, 2rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-strong);
}
.bench-label {
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text-strong);
    letter-spacing: -0.01em;
}
.bench-detail {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-mute);
    margin: 0;
}

.benchmark-methodology {
    max-width: 880px;
    margin: 40px auto 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 20px;
    border-radius: var(--r-md, 10px);
    background: var(--surface);
    border: 1px dashed var(--border);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-mute);
}
.benchmark-methodology svg { flex-shrink: 0; margin-top: 3px; color: var(--text-mute); }
.benchmark-methodology span { display: block; }

[dir="rtl"] .bench-card::before {
    background: linear-gradient(270deg, var(--brand-500, #2563eb), var(--brand-700, #1d4ed8));
}

/* Video — actual markup uses .play .play-btn (no ::before/::after) */
.video-wrap { display: block; padding: 0; border: 0; width: 100%; }
.video-wrap::before, .video-wrap::after { content: none; display: none; }
.video-wrap .play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
}
.video-wrap .play-btn {
    width: 92px; height: 92px;
    background: #fff;
    color: var(--brand-700);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    padding-inline-start: 8px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 0 0 rgba(255, 255, 255, 0.5);
    transition: transform var(--dur-3) var(--ease-spring);
    animation: video-pulse 2.5s ease-out infinite;
    position: relative;
    z-index: 2;
}
.video-wrap:hover .play-btn { transform: scale(1.08); }

/* ──────────────────────────────────────────────────────────────
   §HOME GUARANTEE — canonical card used on index.php
   Markup: <section class="guarantee">
             <div class="guarantee-card">
               <div class="guarantee-seal">90<br>DAYS</div>
               <span class="eyebrow"/> <h2/> <p.body/> <p.note/> <p.signed/>
             </div>
           </section>
   ────────────────────────────────────────────────────────────── */

/* ── Demo video section ─────────────────────────────────────── */
.demo-video { padding: clamp(56px, 8vw, 100px) 0; background: var(--surface-alt, #fafbfc); }
.demo-video .section-head { margin-bottom: 44px; text-align: center; }
.video-embed { max-width: 860px; margin: 0 auto; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.13); }
.video-ratio { position: relative; padding-bottom: 56.25%; height: 0; }
.video-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder { cursor: pointer; aspect-ratio: 16/9; position: relative; background: var(--primary); border-radius: 20px; overflow: hidden; }
.vp-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vp-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary) 0%, #1a3a7a 60%, #0e2550 100%); opacity: .96; }
.vp-overlay { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.vp-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; color: #fff; padding: 24px; }
.vp-play { transition: transform .2s; }
.video-placeholder:hover .vp-play, .video-placeholder:focus .vp-play { transform: scale(1.12); }
.vp-label strong { display: block; font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; }
.vp-label span { font-size: .95rem; opacity: .8; }
[dir="rtl"] .vp-label strong, [dir="rtl"] .vp-label span { font-family: 'Tajawal', sans-serif; }
.video-cta { text-align: center; margin-top: 40px; }
.video-cta p { font-size: 1.1rem; font-weight: 600; color: var(--text-mute); margin-bottom: 18px; }
.video-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 520px) { .video-cta-btns { flex-direction: column; align-items: stretch; } }

.guarantee { padding: clamp(48px, 7vw, 96px) 0; }
.guarantee-card {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(245, 180, 0, 0.10), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, var(--gold-50, #fffbe8) 100%);
    border: 1px solid rgba(245, 180, 0, 0.35);
    border-radius: var(--r-xl);
    padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px) clamp(36px, 4vw, 48px);
    text-align: center;
    box-shadow:
        0 30px 70px -28px rgba(180, 122, 0, 0.28),
        0 0 0 6px rgba(245, 180, 0, 0.05);
    overflow: visible;
}
.guarantee-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg, rgba(245, 180, 0, 0.55), rgba(245, 180, 0, 0) 55%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.guarantee-card .eyebrow {
    color: var(--gold-700, #b07a00);
    background: rgba(245, 180, 0, 0.10);
    border: 1px solid rgba(245, 180, 0, 0.32);
    margin: 0 auto 1.25rem;
}
.guarantee-card h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.45rem, 2.8vw, 2.05rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--n-900, #0c1226);
    margin: 0 auto 1.25rem;
    max-width: 22ch;
    font-weight: 700;
}
.guarantee-card .body {
    font-size: clamp(1rem, 1.4vw, 1.08rem);
    color: var(--text, #1b2236);
    max-width: 60ch;
    margin: 0 auto 1rem;
    line-height: 1.6;
}
.guarantee-card .note {
    color: var(--text-mute, #5b6478);
    font-size: 0.94rem;
    max-width: 56ch;
    margin: 0 auto 1.6rem;
    line-height: 1.55;
}
.guarantee-card .note::before,
.guarantee-card .note::after {
    content: '';
    display: inline-block;
    width: 28px; height: 1px;
    background: rgba(0, 0, 0, 0.18);
    vertical-align: middle;
    margin: 0 14px;
}
.guarantee-card .signed {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--brand-700, #274188);
    margin: 0;
}
[dir="rtl"] .guarantee-card .signed { font-family: 'Tajawal', sans-serif; font-style: normal; font-weight: 600; }

/* Seal — floating gold medallion */
.guarantee-seal {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%) rotate(-6deg);
    width: 96px; height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%,
        var(--gold-200, #ffe27a) 0%,
        var(--gold-400, #ffc83d) 55%,
        var(--gold-500, #f5b400) 100%);
    color: #2a1f00;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    box-shadow:
        0 14px 30px rgba(245, 180, 0, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.6),
        inset 0 -4px 8px rgba(180, 120, 0, 0.28);
    border: 4px solid #fff;
}
.guarantee-seal .num { font-size: 1.85rem; line-height: 1; }
.guarantee-seal .lbl { font-size: 0.6rem; letter-spacing: 0.18em; margin-top: 4px; opacity: 0.9; font-weight: 800; }
[dir="rtl"] .guarantee-seal { transform: translateX(50%) rotate(6deg); left: auto; right: 50%; }

@media (max-width: 720px) {
    .guarantee-card { padding-top: 72px; }
    .guarantee-seal { width: 84px; height: 84px; top: -28px; }
    .guarantee-seal .num { font-size: 1.6rem; }
    .guarantee-card .note::before,
    .guarantee-card .note::after { display: none; }
}
/* ────────────────────────────────────────────────────────────── */

/* Final paths — actual markup has .tag, .desc, .foot */
.path {
    position: relative;
    display: flex; flex-direction: column; gap: 12px;
}
.path .tag {
    align-self: center;
    display: inline-block;
    padding: 5px 14px;
    border-radius: var(--r-full);
    background: var(--bg-soft);
    color: var(--text-mute);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.path.highlight .tag {
    background: var(--gold-400);
    color: #2a1f00;
    box-shadow: 0 6px 18px rgba(245, 180, 0, 0.4);
}
.path .desc { color: var(--text-mute); font-size: 0.97rem; margin-bottom: 4px; }
.path.highlight .desc { color: rgba(255, 255, 255, 0.78); }
.path .foot {
    color: var(--text-dim);
    font-size: 0.84rem;
    margin-top: 4px;
}
.path.highlight .foot { color: rgba(255, 255, 255, 0.55); }

.final-whatsapp { text-align: center; margin-top: 36px; }
.final-whatsapp a {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--brand-700);
    font-weight: 600;
    border-bottom: 1px dashed var(--brand-300);
    padding-bottom: 3px;
    font-size: 0.95rem;
}
.final-whatsapp a:hover { color: var(--brand-800); }

/* FAQ — actual markup uses .a (not .faq-body) */
.faq-list .a {
    padding: 0 24px 22px;
    color: var(--text);
    line-height: 1.65;
    font-size: 0.97rem;
}
.faq-list .a strong { color: var(--text-strong); }

/* Footer — actual markup classes */
.footer-brand .tagline { /* legacy class, but markup uses .footer-tag — keep both */ }
.site-footer .footer-col h4 {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 18px;
    font-family: 'Inter Tight', sans-serif;
}

/* Hero CTA — actual markup wraps text in <span> */
.hero-cta-primary span:first-child {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.02rem;
}
.hero-cta-primary .sub-label {
    font-size: 0.74rem;
    font-weight: 500;
    opacity: .82;
    letter-spacing: 0.005em;
}

/* ============================================================
   WHATSAPP BUTTON (.btn-wa) — primary lead channel for UAE owners
   ============================================================ */
.btn-wa {
    background: linear-gradient(180deg, #2bd96f 0%, #1bb45c 100%);
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow:
        0 8px 20px -6px rgba(37, 211, 102, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: all var(--dur-2) var(--ease-spring);
}
.btn-wa:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 28px -8px rgba(37, 211, 102, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #fff;
}
.btn-wa svg { flex-shrink: 0; }
.btn-wa.btn-lg { padding: 12px 22px; font-size: 1rem; }
.hero-cta-tertiary { margin-inline-start: 4px; }

/* ============================================================
   LIVE ROI CALCULATOR  (#roi-calc / .roi)
   ============================================================ */
.roi {
    padding: clamp(60px, 9vw, 110px) 0;
    background:
        radial-gradient(60% 60% at 20% 0%, rgba(39, 65, 136, 0.06), transparent 70%),
        radial-gradient(50% 50% at 85% 100%, rgba(245, 180, 0, 0.08), transparent 70%),
        linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
}

.roi-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    box-shadow:
        0 0 0 1px rgba(16, 24, 40, 0.04),
        0 30px 70px -25px rgba(20, 30, 60, 0.22),
        0 14px 24px -16px rgba(20, 30, 60, 0.12);
    overflow: hidden;
}
@media (max-width: 880px) {
    .roi-card { grid-template-columns: 1fr; }
}

/* ----- LEFT: inputs ----- */
.roi-inputs {
    padding: clamp(28px, 4vw, 42px);
    display: flex; flex-direction: column; gap: 28px;
    background: #fff;
}
.roi-field { display: block; }
.roi-field-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 10px;
}
.roi-label {
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: -0.005em;
}
.roi-output {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--brand-700);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.roi-scale {
    display: flex; justify-content: space-between;
    font-size: 0.7rem; color: var(--text-mute);
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}

/* Custom range slider — brand gradient track w/ live --fill from JS */
.roi-range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--brand-600) 0%, var(--brand-600) var(--fill, 30%),
        var(--n-200) var(--fill, 30%), var(--n-200) 100%);
    outline: none;
    cursor: pointer;
    transition: filter var(--dur-1);
}
[dir="rtl"] .roi-range {
    background: linear-gradient(270deg,
        var(--brand-600) 0%, var(--brand-600) var(--fill, 30%),
        var(--n-200) var(--fill, 30%), var(--n-200) 100%);
}
.roi-range:hover { filter: brightness(1.04); }
.roi-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--brand-600);
    box-shadow:
        0 4px 10px rgba(39, 65, 136, 0.28),
        0 0 0 6px rgba(39, 65, 136, 0.06);
    cursor: grab;
    transition: transform var(--dur-1) var(--ease-spring);
}
.roi-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.roi-range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.18); }
.roi-range::-moz-range-thumb {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--brand-600);
    box-shadow:
        0 4px 10px rgba(39, 65, 136, 0.28),
        0 0 0 6px rgba(39, 65, 136, 0.06);
    cursor: grab;
}
.roi-range:focus-visible::-webkit-slider-thumb {
    box-shadow:
        0 0 0 4px var(--gold-400),
        0 4px 10px rgba(39, 65, 136, 0.28);
}

.roi-assumptions {
    margin-top: 4px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    font-size: 0.78rem;
    color: var(--text-mute);
    line-height: 1.5;
}

/* ----- RIGHT: live result panel ----- */
.roi-result {
    position: relative;
    background:
        radial-gradient(80% 60% at 20% 0%, rgba(245, 180, 0, 0.14), transparent 60%),
        linear-gradient(160deg, var(--brand-800) 0%, var(--brand-600) 100%);
    color: #fff;
    overflow: hidden;
}
.roi-result::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(40% 30% at 80% 100%, rgba(255, 255, 255, 0.1), transparent 60%);
    pointer-events: none;
}
.roi-result-inner {
    position: relative;
    padding: clamp(28px, 4vw, 42px);
    display: flex; flex-direction: column; gap: 18px;
}
.roi-result-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    opacity: .8;
}
.roi-result-big {
    display: flex; align-items: baseline; gap: 8px;
    font-family: 'Inter Tight', sans-serif;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.035em;
}
.roi-currency {
    font-size: 1.1rem;
    font-weight: 600;
    opacity: .85;
    letter-spacing: 0.04em;
}
.roi-leak-num {
    font-size: clamp(2.8rem, 6vw, 4.2rem);
    font-weight: 800;
    background: linear-gradient(180deg, #fff 0%, #ffd766 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 6px 30px rgba(245, 180, 0, 0.18);
}
.roi-per {
    font-size: 1rem;
    opacity: .65;
    font-weight: 500;
}
.roi-result-breakdown {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-md);
    backdrop-filter: blur(8px);
}
.roi-row {
    display: flex; justify-content: space-between;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}
.roi-row > span:first-child { opacity: .78; }
.roi-row > span:last-child { font-weight: 700; }

.roi-recover {
    margin-top: 4px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(245, 180, 0, 0.22), rgba(245, 180, 0, 0.06));
    border: 1px solid rgba(245, 180, 0, 0.32);
    border-radius: var(--r-md);
}
.roi-recover-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: #ffd766;
    margin-bottom: 6px;
}
.roi-recover-num {
    display: flex; align-items: baseline; gap: 6px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}
.roi-recover-num .roi-currency { color: #ffd766; opacity: 1; }
.roi-recover-num #roiRecover {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    color: #fff;
}
.roi-recover-sub {
    font-size: 0.78rem;
    opacity: .75;
    margin-top: 6px;
}

.roi-cta {
    margin-top: 6px;
    justify-content: center;
    box-shadow:
        0 12px 28px -8px rgba(37, 211, 102, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.roi-cta:hover {
    box-shadow:
        0 18px 34px -8px rgba(37, 211, 102, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.roi-trust-row {
    display: flex; flex-wrap: wrap; gap: 14px 18px;
    justify-content: center;
    font-size: 0.76rem;
    opacity: .85;
    margin-top: 4px;
}
.roi-alt-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur-1) var(--ease-spring), transform var(--dur-1);
}
.roi-alt-link:hover {
    color: #ffd766;
    transform: translateX(2px);
}
[dir="rtl"] .roi-alt-link:hover { transform: translateX(-2px); }

/* ============================================================
   BOOK-DEMO PAGE
   ============================================================ */
.page-book,
.page-thanks {
    background: var(--n-50);
    min-height: 100vh;
}
.site-header--minimal {
    border-bottom: 1px solid var(--n-200);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(140%) blur(8px);
}
.site-header--minimal .lang-toggle {
    border: 1px solid var(--n-200);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .82rem;
    color: var(--n-700);
    text-decoration: none;
    transition: all var(--dur-1) var(--ease-spring);
}
.site-header--minimal .lang-toggle:hover {
    background: var(--n-100);
    color: var(--brand-700);
}

.book {
    padding: 56px 0 96px;
}
.book-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
    gap: 48px;
    align-items: start;
}
@media (max-width: 960px) {
    .book-grid { grid-template-columns: 1fr; gap: 32px; }
}
.book-form-wrap {
    background: #ffffff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-xl);
    padding: 40px 44px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.book-form-wrap::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-600), var(--gold-500) 70%, var(--brand-600));
}
@media (max-width: 640px) { .book-form-wrap { padding: 28px 22px; } }

.book-title {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: clamp(1.6rem, 3.6vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    color: var(--n-900);
    margin: 10px 0 12px;
    font-weight: 700;
}
.book-sub {
    color: var(--n-600);
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0 0 26px;
    max-width: 56ch;
}

.book-leak-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, rgba(245, 180, 0, 0.10), rgba(245, 180, 0, 0.04));
    border: 1px solid rgba(245, 180, 0, 0.42);
    color: var(--n-800);
    padding: 14px 16px;
    border-radius: var(--r-md);
    font-size: .94rem;
    line-height: 1.45;
    margin-bottom: 22px;
}
.book-leak-banner svg { color: #b07a00; flex-shrink: 0; margin-top: 2px; }
.book-leak-banner b { color: #8a5b00; font-weight: 800; }

.book-form { display: flex; flex-direction: column; gap: 18px; }
.book-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 560px) { .book-row { grid-template-columns: 1fr; } }

.book-form .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.book-form label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--n-700);
    letter-spacing: .01em;
}
.book-form input[type="text"],
.book-form input[type="email"],
.book-form input[type="tel"],
.book-form select,
.book-form textarea {
    width: 100%;
    background: var(--n-50);
    border: 1.5px solid var(--n-200);
    border-radius: var(--r-md);
    padding: 12px 14px;
    font: 500 .98rem 'Inter', system-ui, sans-serif;
    color: var(--n-900);
    transition: border-color var(--dur-1) var(--ease-spring), background var(--dur-1), box-shadow var(--dur-1);
}
.book-form textarea {
    resize: vertical;
    min-height: 80px;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.5;
}
.book-form input::placeholder,
.book-form textarea::placeholder { color: var(--n-400); }
.book-form input:focus,
.book-form select:focus,
.book-form textarea:focus {
    outline: 0;
    background: #fff;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(39, 65, 136, 0.16);
}
.book-form input:invalid:not(:placeholder-shown) {
    border-color: #d33a3a;
}
.book-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23556680'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-inline-end: 38px;
}
[dir="rtl"] .book-form select {
    background-position: left 12px center;
}

.slot-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
@media (max-width: 480px) { .slot-group { grid-template-columns: 1fr; } }
.slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 8px;
    background: var(--n-50);
    border: 1.5px solid var(--n-200);
    border-radius: var(--r-md);
    font-size: .88rem;
    font-weight: 600;
    color: var(--n-700);
    cursor: pointer;
    text-align: center;
    transition: all var(--dur-1) var(--ease-spring);
}
.slot input[type="radio"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}
.slot:hover {
    border-color: var(--brand-400);
    background: #fff;
}
.slot:has(input:checked) {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    border-color: var(--brand-600);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(39, 65, 136, 0.5);
}
.slot:has(input:focus-visible) {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}

/* Honeypot — visually hidden but not display:none (so bots fill it) */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.book-form .btn-primary {
    margin-top: 6px;
    position: relative;
}
.btn-spinner {
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.btn.is-loading .btn-label { visibility: hidden; }
.btn.is-loading .btn-spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.book-microcopy {
    text-align: center;
    color: var(--n-500);
    font-size: .78rem;
    margin: 4px 0 0;
}

.book-or {
    text-align: center;
    margin: 26px 0 18px;
    position: relative;
    color: var(--n-400);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.book-or::before,
.book-or::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 32px);
    height: 1px;
    background: var(--n-200);
}
.book-or::before { left: 0; }
.book-or::after  { right: 0; }
.book-or span { background: #fff; padding: 0 12px; }

/* RIGHT SIDE — Trust panel */
.book-side-card {
    background: #ffffff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-xl);
    padding: 32px 30px;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 100px;
}
@media (max-width: 960px) {
    .book-side-card { position: static; }
}
.book-side-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.avatar-stack { display: flex; }
.avatar-stack .av {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    display: grid; place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    margin-inline-start: -10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.avatar-stack .av:first-child { margin-inline-start: 0; }
.avatar-stack img.av { object-fit: cover; display: block; }
.book-side-name { font-weight: 700; color: var(--n-900); font-size: .96rem; }
.book-side-role { color: var(--n-500); font-size: .82rem; }

.book-side-title {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 1.08rem;
    color: var(--n-900);
    margin: 0 0 14px;
    font-weight: 700;
}
.book-steps {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.book-steps li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.step-num {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    display: grid; place-items: center;
    margin-top: 1px;
}
.book-steps strong { display: block; color: var(--n-900); font-size: .94rem; }
.book-steps p { color: var(--n-600); font-size: .85rem; margin: 2px 0 0; line-height: 1.45; }

.book-trust {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
    background: var(--n-50);
    border-radius: var(--r-md);
    margin-bottom: 22px;
}
.bt-row {
    display: flex; align-items: center; gap: 10px;
    font-size: .86rem;
    color: var(--n-700);
}
.bt-icon {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--brand-600);
    color: #fff;
    display: grid; place-items: center;
    font-size: .68rem;
    font-weight: 800;
}

.book-quote {
    margin: 0;
    padding: 16px 18px;
    border-inline-start: 3px solid var(--gold-500);
    background: linear-gradient(135deg, rgba(245, 180, 0, 0.05), transparent);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
[dir="rtl"] .book-quote { border-radius: var(--r-md) 0 0 var(--r-md); }
.book-quote blockquote {
    margin: 0 0 8px;
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    color: var(--n-800);
    font-size: 1rem;
    line-height: 1.45;
}
[dir="rtl"] .book-quote blockquote {
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
    font-style: normal;
}
.book-quote figcaption {
    font-size: .78rem;
    color: var(--n-500);
}
.book-quote figcaption strong { color: var(--n-800); }

/* ============================================================
   THANK-YOU PAGE
   ============================================================ */
.thanks {
    padding: 60px 0 100px;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 88px);
}
.thanks-wrap {
    display: flex;
    justify-content: center;
}
.thanks-card {
    width: 100%;
    max-width: 640px;
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-xl);
    padding: 56px 48px;
    box-shadow: var(--shadow-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.thanks-card::before {
    content: '';
    position: absolute;
    top: -120px; left: 50%;
    transform: translateX(-50%);
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(27, 180, 92, 0.18), transparent 65%);
    pointer-events: none;
}
@media (max-width: 560px) { .thanks-card { padding: 40px 24px; } }

.thanks-check {
    width: 84px; height: 84px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1bb45c, #0f8a44);
    color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 14px 32px -8px rgba(27, 180, 92, 0.55);
    position: relative;
    animation: thanks-pop .6s var(--ease-spring) both;
}
@keyframes thanks-pop {
    0% { transform: scale(.6); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
.thanks-check svg { width: 44px; height: 44px; }

.thanks-title {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    color: var(--n-900);
    margin: 8px 0 12px;
    letter-spacing: -.02em;
    font-weight: 700;
    line-height: 1.16;
}
.thanks-sub {
    color: var(--n-600);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 48ch;
    margin: 0 auto 22px;
}
.thanks-ref {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--n-50);
    border: 1px dashed var(--n-300);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .82rem;
    color: var(--n-600);
    margin-bottom: 22px;
}
.thanks-ref code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--brand-700);
    font-weight: 700;
    letter-spacing: .06em;
}
.thanks-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.thanks-rule {
    border: 0;
    border-top: 1px solid var(--n-200);
    margin: 28px 0 22px;
}
/* 3-step onboarding */
.thanks-steps h3, .thanks-referral h3, .thanks-community h3 {
    font-size: 1rem;
    color: var(--n-900);
    margin: 0 0 16px;
    font-weight: 700;
}
.thanks-steps { display: flex; flex-direction: column; gap: 0; }
.thanks-step {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--n-100);
    align-items: flex-start;
    text-align: start;
}
.thanks-step:last-child { border-bottom: 0; }
.step-badge {
    flex-shrink: 0;
    background: var(--primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 6px;
    padding: 4px 8px;
    line-height: 1.3;
    white-space: nowrap;
    margin-top: 2px;
}
.step-body strong { display: block; font-size: .95rem; color: var(--n-900); margin-bottom: 4px; }
.step-body p { font-size: .86rem; color: var(--text-mute); margin: 0 0 6px; }
.link-arrow { font-size: .88rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
/* Referral */
.thanks-referral { text-align: start; }
.thanks-referral p { font-size: .9rem; color: var(--text-mute); margin: 0 0 12px; }
.referral-box {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}
.referral-box input {
    flex: 1;
    padding: 10px 12px;
    font-size: .85rem;
    border: 1px solid var(--n-300);
    border-radius: 8px;
    background: var(--n-50);
    color: var(--n-900);
    min-width: 0;
}
.referral-box button {
    flex-shrink: 0;
    padding: 10px 16px;
    background: var(--primary);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.referral-box button:hover { background: var(--primary-d); }
/* Community */
.thanks-community p { font-size: .9rem; color: var(--text-mute); margin: 0 0 14px; text-align: start; }
.community-links { display: flex; gap: 10px; flex-wrap: wrap; }
/* RTL overrides for steps/referral/community */
[dir="rtl"] .thanks-step { flex-direction: row-reverse; text-align: end; }
[dir="rtl"] .referral-box { flex-direction: row-reverse; }
    font-size: 1rem;
    color: var(--n-900);
    margin: 0 0 14px;
    font-weight: 700;
}
.thanks-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: start;
}
.thanks-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-700);
    font-size: .94rem;
    font-weight: 600;
    text-decoration: none;
}
.thanks-links a:hover { color: var(--brand-800); }

/* ============================================================
   PRICING PAGE
   ============================================================ */
.page-pricing { background: var(--n-50); }

.pricing-hero {
    padding: 56px 0 28px;
    text-align: center;
}
.pricing-hero .eyebrow { display: inline-block; margin-bottom: 14px; }
.pricing-h1 {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    color: var(--n-900);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 700;
    margin: 0 0 16px;
}
.pricing-sub {
    color: var(--n-600);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    max-width: 58ch;
    margin: 0 auto 28px;
    line-height: 1.55;
}

.billing-toggle {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: 999px;
    padding: 5px;
    box-shadow: var(--shadow-sm);
    gap: 4px;
}
.bt-opt {
    border: 0;
    background: transparent;
    padding: 10px 22px;
    border-radius: 999px;
    font: 600 .94rem 'Inter', system-ui, sans-serif;
    color: var(--n-600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--dur-1) var(--ease-spring);
}
.bt-opt:hover { color: var(--n-900); }
.bt-opt.is-active {
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(39, 65, 136, 0.4);
}
.bt-save {
    background: var(--gold-500);
    color: #1a1a1a;
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: .02em;
}
.bt-opt.is-active .bt-save { background: #ffe082; color: #1a1a1a; }

/* ----- TIER CARDS ----- */
.pricing-tiers { padding: 24px 0 64px; }
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
    margin-bottom: 56px;
}
@media (max-width: 980px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}

.ptier {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-xl);
    padding: 32px 28px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
}
.ptier:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.ptier--featured {
    border: 2px solid var(--brand-600);
    box-shadow: 0 20px 50px -12px rgba(39, 65, 136, 0.32);
    background:
        linear-gradient(180deg, rgba(39, 65, 136, 0.025), transparent 200px),
        #fff;
    transform: translateY(-8px);
}
@media (max-width: 980px) { .ptier--featured { transform: none; } }
.ptier--featured:hover { transform: translateY(-12px); }
@media (max-width: 980px) { .ptier--featured:hover { transform: translateY(-4px); } }

.ptier-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold-500), #d99800);
    color: #1a1a1a;
    font: 700 .76rem 'Inter Tight', sans-serif;
    padding: 6px 16px;
    border-radius: 999px;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px -6px rgba(245, 180, 0, 0.5);
}

.ptier-head { margin-bottom: 18px; }
.ptier-name {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 1.4rem;
    color: var(--n-900);
    margin: 0 0 6px;
    letter-spacing: -.015em;
    font-weight: 700;
}
.ptier-tag {
    color: var(--n-600);
    font-size: .92rem;
    line-height: 1.45;
    margin: 0;
    min-height: 2.6em;
}

.ptier-price { margin-bottom: 22px; min-height: 116px; }
.ptier-was {
    height: 22px;
    margin-bottom: 2px;
}
.ptier-strike {
    color: var(--n-400);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    font-size: 1rem;
    font-weight: 500;
}
.ptier-amount-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: nowrap;
}
.ptier-currency {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--n-600);
}
.ptier-amount {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 800;
    color: var(--n-900);
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.ptier-amount-text {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: clamp(2.2rem, 3.6vw, 2.8rem);
    color: var(--n-900);
    font-weight: 400;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
}
[dir="rtl"] .ptier-amount-text {
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
    font-style: normal;
    font-weight: 700;
}
.ptier-unit {
    color: var(--n-500);
    font-size: 1rem;
    font-weight: 500;
}
.ptier-note {
    color: var(--n-500);
    font-size: .82rem;
    margin: 6px 0 0;
}

.ptier-cta {
    margin-bottom: 18px;
}
.ptier--featured .ptier-cta {
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
}

.ptier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
}
.ptier-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .92rem;
    color: var(--n-700);
    line-height: 1.45;
}
.fchk {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(39, 65, 136, 0.10);
    color: var(--brand-700);
    display: grid; place-items: center;
    font-size: .7rem;
    font-weight: 800;
    margin-top: 2px;
}
.ptier--featured .fchk {
    background: rgba(245, 180, 0, 0.20);
    color: #8a5b00;
}

.ptier-wa-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #1bb45c;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    padding: 8px;
    border-radius: var(--r-sm);
    transition: background var(--dur-1) var(--ease-spring);
}
.ptier-wa-link:hover {
    background: rgba(27, 180, 92, 0.08);
    color: #0f8a44;
}

/* ----- TRUST BAND ----- */
.pricing-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-xl);
    margin-bottom: 28px;
}
@media (max-width: 760px) { .pricing-trust { grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px; } }
.pt-item {
    text-align: center;
}
.pt-item strong {
    display: block;
    font-family: 'Inter Tight', sans-serif;
    font-size: 2rem;
    color: var(--brand-700);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}
.pt-item span {
    display: block;
    color: var(--n-600);
    font-size: .84rem;
    margin-top: 6px;
    line-height: 1.35;
}

.pricing-pay {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 12px;
    color: var(--n-500);
    font-size: .82rem;
}
.pp-label { font-weight: 600; color: var(--n-700); margin-inline-end: 4px; }
.pp-method {
    background: #fff;
    border: 1px solid var(--n-200);
    color: var(--n-700);
    padding: 5px 11px;
    border-radius: 6px;
    font-weight: 600;
    font-size: .82rem;
}

/* ----- COMPARE TABLE ----- */
.pricing-compare { padding: 64px 0; }
.pricing-compare .section-head { text-align: center; margin-bottom: 32px; }
.pricing-compare h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--n-900);
    margin: 8px 0 0;
    letter-spacing: -.02em;
    font-weight: 700;
}

.compare-wrap {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
@media (max-width: 720px) { .compare-wrap { overflow-x: auto; } }

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.compare-table thead th {
    background: var(--n-50);
    color: var(--n-700);
    padding: 18px 16px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid var(--n-200);
    font-size: .96rem;
}
.compare-table .th-feature { text-align: start; color: var(--n-500); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.compare-table .th-featured {
    background: linear-gradient(180deg, rgba(39, 65, 136, 0.08), transparent);
    color: var(--brand-700);
    position: relative;
}
.compare-table .th-featured::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-500), var(--gold-500));
}

.compare-table tbody td,
.compare-table tbody th {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid var(--n-100);
}
.compare-table tbody .cmp-name {
    text-align: start;
    color: var(--n-700);
    font-weight: 500;
    font-size: .9rem;
}
.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th { border-bottom: 0; }
.cmp-cat-row { background: var(--n-50); }
.cmp-cat {
    text-align: start;
    padding: 12px 16px !important;
    color: var(--n-500);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.compare-table .td-featured {
    background: rgba(39, 65, 136, 0.025);
}
.cmp-yes {
    color: var(--brand-700);
    font-weight: 800;
    font-size: 1.1rem;
}
.cmp-no { color: var(--n-300); font-weight: 600; }
.cmp-val { color: var(--n-800); font-weight: 600; font-size: .88rem; }

/* ----- GUARANTEE (Pricing-page variant — scoped) ----- */
.pricing-guarantee { padding: 32px 0 64px; }
.pricing-guarantee .guarantee-card {
    background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
    color: #fff;
    border-radius: var(--r-xl);
    padding: 48px 52px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 36px;
    align-items: center;
    position: relative;
    overflow: hidden;
    text-align: start;
    max-width: none;
    border: 0;
    box-shadow: 0 30px 60px -16px rgba(39, 65, 136, 0.45);
}
.pricing-guarantee .guarantee-card::before {
    content: '';
    position: absolute;
    inset: -50% -20% auto auto;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(245, 180, 0, 0.18), transparent 60%);
    pointer-events: none;
    border-radius: 0;
    padding: 0;
    -webkit-mask: none;
            mask: none;
}
@media (max-width: 720px) {
    .pricing-guarantee .guarantee-card { grid-template-columns: 1fr; padding: 36px 28px; text-align: center; gap: 20px; }
    .pricing-guarantee .guarantee-seal { margin: 0 auto; }
}
.pricing-guarantee .guarantee-seal {
    position: relative;
    top: auto; left: auto; right: auto;
    transform: none;
    width: 130px;
    height: 130px;
    color: var(--gold-500);
    background: transparent;
    border: 0;
    box-shadow: none;
    display: block;
}
[dir="rtl"] .pricing-guarantee .guarantee-seal { transform: none; }
.pricing-guarantee .guarantee-seal svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 24px rgba(245, 180, 0, 0.35)); }
.pricing-guarantee .guarantee-days {
    position: absolute;
    inset: 0;
    display: grid; place-items: center;
    font-family: 'Inter Tight', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    margin-top: 4px;
    letter-spacing: -.04em;
}
.pricing-guarantee .guarantee-body .eyebrow {
    color: var(--gold-500);
    background: rgba(245, 180, 0, 0.12);
    border-color: rgba(245, 180, 0, 0.3);
    margin-bottom: 12px;
}
.pricing-guarantee .guarantee-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -.02em;
    line-height: 1.18;
    font-weight: 700;
}
.pricing-guarantee .guarantee-body p {
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0;
    max-width: 56ch;
}

/* ----- FAQ ----- */
.pricing-faq { padding: 64px 0; }
.pricing-faq .section-head { text-align: center; margin-bottom: 32px; }
.pricing-faq h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--n-900);
    margin: 8px 0 0;
    letter-spacing: -.02em;
    font-weight: 700;
}
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--dur-1) var(--ease-spring);
}
.faq-item[open] {
    border-color: var(--brand-300);
    box-shadow: var(--shadow-sm);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-weight: 600;
    color: var(--n-900);
    font-size: 1.02rem;
    line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; display: none; }
.pricing-faq .faq-list summary::after { content: none; display: none; }
.faq-icon {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--n-100);
    color: var(--n-600);
    display: grid; place-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    transition: transform var(--dur-2) var(--ease-spring), background var(--dur-1), color var(--dur-1);
}
.faq-item[open] .faq-icon {
    transform: rotate(45deg);
    background: var(--brand-600);
    color: #fff;
}
.faq-body {
    padding: 0 22px 20px;
    color: var(--n-600);
    line-height: 1.6;
    font-size: .96rem;
    max-width: 64ch;
}

/* ----- FINAL CTA ----- */
.pricing-final { padding: 32px 0 96px; }
.final-card {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-xl);
    padding: 52px 48px;
    text-align: center;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.final-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(245, 180, 0, 0.07), transparent 50%),
        radial-gradient(circle at 80% 100%, rgba(39, 65, 136, 0.05), transparent 50%);
    pointer-events: none;
}
.final-card h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    color: var(--n-900);
    margin: 0 0 12px;
    letter-spacing: -.02em;
    line-height: 1.16;
    font-weight: 700;
    position: relative;
}
.final-card p {
    color: var(--n-600);
    font-size: 1.04rem;
    max-width: 52ch;
    margin: 0 auto 24px;
    line-height: 1.55;
    position: relative;
}
.final-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    position: relative;
}

/* ============================================================
   PRODUCT TOUR PAGE
   ============================================================ */
.page-product { background: var(--n-50); }

/* HERO */
.product-hero {
    padding: 56px 0 36px;
    text-align: center;
}
.product-h1 {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    color: var(--n-900);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 700;
    margin: 14px 0 16px;
}
.product-sub {
    color: var(--n-600);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    max-width: 62ch;
    margin: 0 auto 28px;
    line-height: 1.55;
}
.product-hero-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* STICKY ANCHOR NAV */
.product-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-block: 1px solid var(--n-200);
    margin-bottom: 8px;
}
.product-nav-inner {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 0;
}
.product-nav-inner::-webkit-scrollbar { display: none; }
.product-nav a {
    flex-shrink: 0;
    padding: 8px 18px;
    color: var(--n-600);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    border-radius: 999px;
    transition: all var(--dur-1) var(--ease-spring);
    white-space: nowrap;
}
.product-nav a:hover { background: var(--n-100); color: var(--n-900); }

/* MODULE SECTION */
.product-module {
    padding: 72px 0;
}
.product-module--alt { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.6)); }

.pm-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
    align-items: center;
}
.pm-grid--reverse > .pm-copy { order: 2; }
.pm-grid--reverse > .pm-visual { order: 1; }
@media (max-width: 880px) {
    .pm-grid, .pm-grid--reverse { grid-template-columns: 1fr; gap: 36px; }
    .pm-grid--reverse > .pm-copy, .pm-grid--reverse > .pm-visual { order: 0; }
}

.pm-copy .eyebrow { margin-bottom: 14px; }
.pm-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--n-900);
    line-height: 1.15;
    letter-spacing: -.022em;
    margin: 0 0 16px;
    font-weight: 700;
}
.pm-body {
    color: var(--n-600);
    font-size: 1.06rem;
    line-height: 1.6;
    max-width: 52ch;
    margin: 0 0 22px;
}
.pm-body--center { text-align: center; margin-inline: auto; }
.pm-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pm-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--n-800);
    font-size: .98rem;
    line-height: 1.5;
}

/* MOCK WINDOW (browser chrome) */
.mock-window {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    overflow: visible;
    position: relative;
    box-shadow: 0 24px 60px -18px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.06);
}
.mock-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--n-50);
    border-bottom: 1px solid var(--n-200);
    border-top-left-radius: var(--r-lg);
    border-top-right-radius: var(--r-lg);
}
.mw-dot { width: 11px; height: 11px; border-radius: 50%; }
.mw-r { background: #ff5f57; } .mw-y { background: #febc2e; } .mw-g { background: #28c840; }
.mw-url {
    margin-inline-start: 12px;
    background: #fff;
    border: 1px solid var(--n-200);
    color: var(--n-600);
    font: 500 .76rem 'JetBrains Mono', ui-monospace, monospace;
    padding: 4px 12px;
    border-radius: 999px;
    flex: 1;
    text-align: center;
    max-width: 320px;
}
.mock-body { padding: 20px 22px; }

.mock-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.mock-h3 { font: 700 1.05rem 'Inter Tight', sans-serif; color: var(--n-900); margin: 0; letter-spacing: -.01em; }
.mock-chip {
    font: 700 .72rem 'Inter', sans-serif;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .03em;
}
.mock-chip-live { background: rgba(34,197,94,0.12); color: #16a34a; }
.mock-chip-warn { background: rgba(245,158,11,0.14); color: #b45309; }
.mock-chip-bad  { background: rgba(239,68,68,0.12);  color: #b91c1c; }
.mock-chip-info { background: rgba(39,65,136,0.10);  color: var(--brand-700); }

/* Dashboard KPIs */
.mock-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.mock-kpi {
    background: var(--n-50);
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    padding: 12px;
}
.mock-kpi-label { color: var(--n-500); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.mock-kpi-value { font: 800 1.5rem 'Inter Tight', sans-serif; color: var(--n-900); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.mock-kpi-delta { font: 600 .72rem 'Inter', sans-serif; margin-top: 6px; }
.mock-up { color: #16a34a; }
.mock-down { color: #16a34a; } /* dropping cost is good */
.mock-chart { width: 100%; height: 90px; display: block; }

/* Recipe table */
.mock-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 14px; }
.mock-table th { text-align: start; padding: 8px; color: var(--n-500); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--n-200); }
.mock-table td { padding: 8px; color: var(--n-800); border-bottom: 1px solid var(--n-100); }
.mock-table td:last-child, .mock-table th:last-child { text-align: end; font-variant-numeric: tabular-nums; }
.mock-summary { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.mock-sum-row { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--n-50); border-radius: var(--r-sm); color: var(--n-700); font-size: .92rem; }
.mock-sum-row strong { font: 800 1rem 'Inter Tight', sans-serif; color: var(--n-900); font-variant-numeric: tabular-nums; }
.mock-sum-bad { background: rgba(239,68,68,0.08); color: #b91c1c; }
.mock-sum-bad strong { color: #b91c1c; }
.mock-sum-good { background: rgba(34,197,94,0.10); color: #15803d; }
.mock-sum-good strong { color: #15803d; }

/* Leaks feed */
.leak-feed { display: flex; flex-direction: column; gap: 10px; }
.leak-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--n-50);
    border: 1px solid var(--n-200);
}
.leak-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; }
.leak-bad  { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.25); }
.leak-bad  .leak-icon { background: #dc2626; }
.leak-warn { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.25); }
.leak-warn .leak-icon { background: #d97706; }
.leak-info { background: rgba(39,65,136,0.05); border-color: rgba(39,65,136,0.18); }
.leak-info .leak-icon { background: var(--brand-700); }
.leak-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leak-text strong { color: var(--n-900); font-size: .94rem; font-weight: 700; }
.leak-text span { color: var(--n-600); font-size: .82rem; }
.leak-time { color: var(--n-500); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Supplier compare cards */
.sup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 480px) { .sup-grid { grid-template-columns: 1fr; } }
.sup-card {
    position: relative;
    background: var(--n-50);
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    padding: 14px 12px;
}
.sup-best {
    background: linear-gradient(180deg, rgba(34,197,94,0.06), var(--n-50));
    border-color: rgba(34,197,94,0.3);
}
.sup-badge {
    position: absolute; top: -8px; inset-inline-end: 10px;
    background: #16a34a; color: #fff;
    font: 700 .66rem 'Inter', sans-serif;
    padding: 2px 8px; border-radius: 999px; letter-spacing: .05em;
}
.sup-name { font: 700 .9rem 'Inter Tight', sans-serif; color: var(--n-900); margin-bottom: 6px; }
.sup-price { font: 800 1.15rem 'Inter Tight', sans-serif; color: var(--n-900); font-variant-numeric: tabular-nums; }
.sup-price .sup-unit { font-size: .76rem; color: var(--n-500); font-weight: 500; margin-inline-start: 2px; }
.sup-meta { color: var(--n-500); font-size: .76rem; margin-top: 4px; }
.mock-bottom-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 14px; background: var(--brand-50, rgba(39,65,136,0.05));
    border-radius: var(--r-md);
    color: var(--brand-700); font-size: .9rem; font-weight: 600;
    flex-wrap: wrap;
}
.mock-btn { border: 0; border-radius: var(--r-sm); padding: 8px 14px; font: 700 .82rem 'Inter', sans-serif; cursor: pointer; }
.mock-btn-primary { background: var(--brand-700); color: #fff; }

/* Annotated pins */
.ann-pin {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
[dir="rtl"] .ann-pin { transform: translate(50%, -50%); }
.ann-num {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--gold-500);
    color: #1a1a1a;
    font: 800 .9rem 'Inter Tight', sans-serif;
    box-shadow: 0 0 0 4px rgba(245,180,0,0.25), 0 6px 16px -4px rgba(245,180,0,0.55);
    animation: pinPulse 2.6s ease-in-out infinite;
}
@keyframes pinPulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(245,180,0,0.25), 0 6px 16px -4px rgba(245,180,0,0.55); }
    50%     { box-shadow: 0 0 0 10px rgba(245,180,0,0.10), 0 6px 16px -4px rgba(245,180,0,0.55); }
}
.ann-tip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: #0f172a;
    color: #fff;
    font: 600 .82rem 'Inter', sans-serif;
    line-height: 1.4;
    padding: 10px 14px;
    border-radius: 10px;
    width: max-content;
    max-width: 240px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-spring), transform var(--dur-2) var(--ease-spring);
    z-index: 10;
}
.ann-tip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #0f172a;
}
.ann-pin:hover .ann-tip,
.ann-pin:focus-visible .ann-tip,
.ann-pin.is-open .ann-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* INTEGRATIONS GRID */
.product-module--integrations { background: #fff; }
.pm-int-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.int-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    max-width: 920px;
    margin: 0 auto;
}
.int-card {
    background: var(--n-50);
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    padding: 16px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform var(--dur-1) var(--ease-spring), border-color var(--dur-1);
}
.int-card:hover { transform: translateY(-2px); border-color: var(--brand-300, var(--brand-500)); }
.int-mark {
    width: 36px; height: 36px; border-radius: 9px;
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    color: #fff;
    display: grid; place-items: center;
    font: 800 1rem 'Inter Tight', sans-serif;
    flex-shrink: 0;
}
.int-name { font: 700 .9rem 'Inter Tight', sans-serif; color: var(--n-900); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-status { font: 600 .68rem 'Inter', sans-serif; color: #16a34a; white-space: nowrap; flex-shrink: 0; }
.int-foot { text-align: center; color: var(--n-600); margin: 28px 0 0; font-size: .96rem; }
.int-foot a { color: var(--brand-700); text-decoration: none; font-weight: 700; margin-inline-start: 6px; }
.int-foot a:hover { text-decoration: underline; }

/* PHONE MOCKUP */
.pm-visual--phone { display: flex; justify-content: center; }
.phone-frame {
    width: 290px;
    background: #0f172a;
    border-radius: 38px;
    padding: 14px;
    box-shadow: 0 36px 72px -22px rgba(15,23,42,0.45), 0 0 0 1px rgba(15,23,42,0.06);
    position: relative;
}
.phone-notch {
    position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
    width: 88px; height: 22px; background: #000; border-radius: 999px; z-index: 2;
}
.phone-screen {
    background: linear-gradient(180deg, var(--brand-800), var(--brand-600));
    border-radius: 26px;
    padding: 44px 18px 22px;
    color: #fff;
    position: relative;
}
.ph-statusbar { display: flex; justify-content: space-between; font: 600 .72rem 'Inter', sans-serif; opacity: .8; margin-bottom: 18px; }
.ph-greet { font: 600 .82rem 'Inter', sans-serif; opacity: .75; margin-bottom: 2px; }
.ph-net { font: 500 .76rem 'Inter', sans-serif; opacity: .65; text-transform: uppercase; letter-spacing: .08em; margin-top: 16px; }
.ph-net-val { font: 800 2.2rem 'Inter Tight', sans-serif; letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.ph-net-delta { font: 600 .82rem 'Inter', sans-serif; color: #4ade80; margin-bottom: 18px; }
.ph-card {
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.ph-card-h { font: 700 .8rem 'Inter Tight', sans-serif; opacity: .85; margin-bottom: 8px; }
.ph-list { display: flex; flex-direction: column; gap: 6px; }
.ph-row { display: flex; justify-content: space-between; font: 600 .82rem 'Inter', sans-serif; }
.ph-up { color: #4ade80; } .ph-down { color: #fca5a5; }
.ph-alert {
    background: rgba(245,180,0,0.16);
    border: 1px solid rgba(245,180,0,0.4);
    color: #ffd66e;
    border-radius: 12px;
    padding: 10px 12px;
    font: 600 .8rem 'Inter', sans-serif;
    display: flex; flex-direction: column; gap: 2px;
}
.ph-alert strong { color: #ffe082; font-size: .76rem; letter-spacing: .04em; }

.store-badges { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.store-badge {
    background: #0f172a;
    color: #fff;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    font: 700 .82rem 'Inter Tight', sans-serif;
    letter-spacing: .02em;
}

/* OUTCOME STATS */
.product-outcomes { padding: 56px 0; background: #fff; border-block: 1px solid var(--n-200); }
.po-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
@media (max-width: 760px) { .po-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.po-num {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(2.4rem, 4.5vw, 3.4rem);
    font-weight: 800;
    color: var(--brand-700);
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.po-num span {
    font-size: .9rem;
    font-weight: 600;
    color: var(--n-500);
    margin-inline-start: 4px;
    letter-spacing: 0;
}
.po-label { color: var(--n-600); font-size: .92rem; margin-top: 8px; line-height: 1.4; }

/* FINAL CTA */
.product-final { padding: 64px 0 96px; }
.pf-card {
    background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
    color: #fff;
    border-radius: var(--r-xl);
    padding: 56px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 64px -18px rgba(39,65,136,0.45);
}
.pf-card::before {
    content: '';
    position: absolute;
    inset: -50% -20% auto auto;
    width: 70%; height: 200%;
    background: radial-gradient(ellipse at center, rgba(245,180,0,0.16), transparent 60%);
    pointer-events: none;
}
.pf-card h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -.02em;
    line-height: 1.16;
    font-weight: 700;
    position: relative;
}
.pf-card p {
    color: rgba(255,255,255,0.84);
    max-width: 56ch;
    margin: 0 auto 24px;
    font-size: 1.04rem;
    line-height: 1.55;
    position: relative;
}
.pf-actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    margin-bottom: 18px;
}
.pf-card .btn-primary {
    background: var(--gold-500);
    color: #1a1a1a;
    box-shadow: 0 8px 24px -6px rgba(245,180,0,0.5);
}
.pf-card .btn-primary:hover { background: #d99800; }
.btn-whatsapp {
    background: #1bb45c;
    color: #fff !important;
    padding: 12px 22px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--dur-1) var(--ease-spring);
}
.btn-whatsapp:hover { background: #15a04f; }
.pf-trust { position: relative; color: rgba(255,255,255,0.72); font-size: .86rem; margin-top: 4px; }

/* Minimal footer used on subpages */
.site-footer--minimal {
    padding: 28px 0;
    border-top: 1px solid var(--n-200);
    background: #fff;
}
.site-footer--minimal .container {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
}
.site-footer--minimal p { margin: 0; color: var(--n-500); font-size: .88rem; }
.site-footer--minimal nav { display: flex; gap: 18px; }
.site-footer--minimal nav a { color: var(--n-700); text-decoration: none; font-weight: 600; font-size: .9rem; }
.site-footer--minimal nav a:hover { color: var(--brand-700); }

/* ============================================================
   ROI CALCULATOR PAGE
   ============================================================ */
.page-roi { background: var(--n-50); }

/* ── Hero ─────────────────────────────────────────────── */
.roi-hero { padding: 64px 0 28px; text-align: center; }
.roi-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--brand-50); color: var(--brand-700);
    border: 1px solid var(--brand-100, #d6def0);
    padding: 7px 14px; border-radius: 999px;
    font: 600 .82rem 'Inter Tight', sans-serif;
    letter-spacing: .02em;
}
.roi-hero .eyebrow-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-500, #f5b400); }
.roi-h1 {
    font: 800 clamp(2rem, 4.6vw, 3.6rem)/1.05 'Inter Tight', sans-serif;
    letter-spacing: -0.02em; color: var(--n-900);
    margin: 18px auto 14px; max-width: 880px;
}
.roi-h1 .grad {
    background: linear-gradient(120deg, var(--brand-700) 0%, var(--brand-500) 50%, var(--gold-500, #f5b400) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-family: 'Instrument Serif', 'Tajawal', serif;
    font-style: italic; font-weight: 400;
}
.roi-sub {
    max-width: 720px; margin: 0 auto 18px;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.6; color: var(--n-700);
}
.roi-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.rt-pill {
    background: #fff; border: 1px solid var(--n-200);
    padding: 7px 14px; border-radius: 999px;
    font: 600 .82rem 'Inter', sans-serif; color: var(--n-700);
}

/* ── Calculator grid ──────────────────────────────────── */
.roi-calc { padding: 32px 0 64px; }
.roi-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 980px) { .roi-grid { grid-template-columns: 1fr; } }

.roi-form {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-xl, 18px);
    padding: 28px;
    box-shadow: var(--shadow-sm, 0 4px 14px rgba(15,23,42,.04));
}
.roi-step { margin-bottom: 22px; position: relative; padding-inline-start: 38px; }
.roi-step:last-child { margin-bottom: 0; }
.roi-step-num {
    position: absolute; inset-inline-start: 0; top: 0;
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    color: #fff;
    display: grid; place-items: center;
    font: 800 .82rem 'Inter Tight', sans-serif;
}
.roi-label {
    display: flex; justify-content: space-between; align-items: baseline;
    font: 700 .94rem 'Inter Tight', sans-serif;
    color: var(--n-900); margin-bottom: 10px;
}
.roi-out {
    font: 700 .94rem 'JetBrains Mono', monospace;
    color: var(--brand-700);
    background: var(--brand-50); padding: 4px 10px; border-radius: 8px;
}

.roi-pills { display: flex; gap: 8px; flex-wrap: nowrap; }
.roi-pills--wrap { flex-wrap: wrap; }
.roi-pill {
    appearance: none; cursor: pointer;
    background: var(--n-50); border: 1px solid var(--n-200);
    color: var(--n-700);
    padding: 9px 14px; border-radius: 10px;
    font: 600 .88rem 'Inter Tight', sans-serif;
    transition: all .18s var(--ease, ease);
    white-space: nowrap;
}
.roi-pill:hover { border-color: var(--brand-400, #6c7eb8); color: var(--brand-700); }
.roi-pill.is-active {
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(39,65,136,.4);
}

/* Sliders */
.roi-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
    outline: none; cursor: pointer;
}
.roi-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 3px solid var(--brand-600, var(--brand-700));
    box-shadow: 0 4px 10px rgba(39,65,136,.3);
    cursor: grab;
}
.roi-slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 3px solid var(--brand-600, var(--brand-700));
    box-shadow: 0 4px 10px rgba(39,65,136,.3); cursor: grab;
}
.roi-tickrow {
    display: flex; justify-content: space-between;
    margin-top: 6px;
    font: 500 .72rem 'Inter', sans-serif; color: var(--n-500, #94a3b8);
}
.roi-hint { font-size: .82rem; color: var(--n-600, #64748b); margin-top: 8px; line-height: 1.5; }
.roi-cite { color: var(--n-500); }
.roi-cite a { color: var(--brand-700); text-decoration: none; border-bottom: 1px dotted var(--brand-400); }

/* ── Results column ──────────────────────────────────── */
.roi-results { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 18px; }
@media (max-width: 980px) { .roi-results { position: static; } }

.roi-result-card {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-xl, 18px);
    padding: 26px;
    box-shadow: var(--shadow-md, 0 10px 30px rgba(15,23,42,.06));
}
.rrc-head { display: flex; justify-content: space-between; align-items: center; }
.rrc-eyebrow { font: 700 .78rem 'Inter Tight', sans-serif; color: var(--n-600); text-transform: uppercase; letter-spacing: .08em; }
.rrc-info {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--n-300); background: #fff;
    color: var(--n-600); font: 700 .8rem 'Inter Tight', sans-serif;
    cursor: help;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    position: relative;
}
.rrc-info:hover,
.rrc-info:focus-visible,
.rrc-info.is-open {
    background: var(--brand-700, #274188);
    border-color: var(--brand-700, #274188);
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(39,65,136,.28);
    outline: none;
}
/* Inline variant used inside label spans (breakdown rows, KPI labels) */
.rrc-info--inline {
    width: 18px; height: 18px;
    font-size: .68rem;
    margin-inline-start: 6px;
    vertical-align: middle;
    line-height: 1;
}
/* Allow labels containing the inline info button to wrap nicely */
.rrc-bar-label,
.rcv-label,
.rcv-meta-lbl { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.rcv-meta-lbl { justify-content: center; }
.rrc-big {
    margin: 8px 0 4px;
    font: 800 clamp(2.2rem, 4.5vw, 3.2rem)/1 'Inter Tight', sans-serif;
    color: #b91c1c; /* alarming red */
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.rrc-cur { font-size: .55em; color: var(--n-600); margin-inline-end: 8px; vertical-align: 0.2em; font-weight: 700; }
.rrc-sub { color: var(--n-700); font-size: .92rem; }
.rrc-sub strong { color: var(--n-900); margin-inline-start: 6px; font-variant-numeric: tabular-nums; }

.rrc-bars { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.rrc-bar { font-size: .9rem; }
.rrc-bar-row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.rrc-bar-label { color: var(--n-700); font-weight: 500; }
.rrc-bar-val { color: var(--n-900); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rrc-bar-track {
    height: 7px; border-radius: 999px; background: var(--n-100);
    overflow: hidden;
}
.rrc-bar-fill {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
    transition: width .5s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
    border-radius: 999px;
}
.rrc-bar[data-key="zatca"] .rrc-bar-fill { background: linear-gradient(90deg, #b45309, #d97706); }
.rrc-bar-cite { font-size: .72rem; color: var(--n-500); margin-top: 4px; }
.rrc-bar-cite a { color: var(--brand-600, var(--brand-700)); text-decoration: none; border-bottom: 1px dotted; }

/* Recovery card */
.roi-recovery {
    background: linear-gradient(155deg, #f0f7ff 0%, #fff 60%);
    border: 1px solid #c7d8f5;
    border-radius: var(--r-xl, 18px);
    padding: 24px;
}
.rcv-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; gap: 12px; flex-wrap: wrap; }
.rcv-row + .rcv-row { border-top: 1px dashed var(--n-200); }
.rcv-label { color: var(--n-700); font-size: .92rem; flex: 1; }
.rcv-row strong { font: 800 1.05rem 'Inter Tight', sans-serif; color: var(--n-900); font-variant-numeric: tabular-nums; }
.rcv-good { color: #059669 !important; }
.rcv-tag {
    background: var(--brand-700); color: #fff;
    font: 700 .72rem 'Inter Tight', sans-serif;
    padding: 3px 9px; border-radius: 999px;
    margin-inline-start: 8px;
}
.rcv-row--total { border-top: 2px solid var(--brand-700) !important; padding-top: 14px; margin-top: 6px; }
.rcv-row--total .rcv-label { font-weight: 700; color: var(--n-900); }
.rcv-net { color: #059669 !important; font-size: 1.4rem !important; }

.rcv-meta {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-top: 18px;
    background: #fff; border: 1px solid var(--n-200);
    border-radius: var(--r-md, 12px); padding: 14px;
}
.rcv-meta-cell { text-align: center; }
.rcv-meta-num {
    display: block; font: 800 1.5rem 'Inter Tight', sans-serif;
    color: var(--brand-700); font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.rcv-meta-lbl { font: 500 .72rem 'Inter', sans-serif; color: var(--n-600); }
.rcv-foot { margin-top: 14px; font-size: .82rem; color: var(--n-600); line-height: 1.5; }
.rcv-foot a { color: var(--brand-700); font-weight: 600; }

/* Email gate */
.roi-gate {
    background: linear-gradient(145deg, var(--brand-800, #1e3a8a), var(--brand-700));
    border-radius: var(--r-xl, 18px);
    padding: 26px; color: #fff;
    box-shadow: 0 18px 40px -8px rgba(39,65,136,.4);
}
.rg-title { font: 800 1.4rem 'Inter Tight', sans-serif; margin: 0 0 6px; color: #fff; }
.rg-sub { font-size: .92rem; opacity: .88; margin: 0 0 18px; line-height: 1.55; }
.rg-form { display: flex; flex-direction: column; gap: 10px; }
.rg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .rg-row { grid-template-columns: 1fr; } }
.rg-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rg-form input[type="text"], .rg-form input[type="email"], .rg-form input[type="tel"] {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    padding: 12px 14px; border-radius: 10px;
    font: 500 .94rem 'Inter', sans-serif;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    width: 100%;
    box-sizing: border-box;
}
.rg-form input::placeholder { color: rgba(255,255,255,.55); }
.rg-form input:focus {
    outline: none;
    border-color: var(--gold-500, #f5b400);
    background: rgba(255,255,255,.16);
}
/* Invalid field — red border, soft glow, micro-shake on first error. */
.rg-field.is-invalid input {
    border-color: #fca5a5;
    background: rgba(254, 202, 202, .08);
    box-shadow: 0 0 0 3px rgba(252, 165, 165, .18);
    animation: rgShake .35s ease;
}
.rg-field.is-invalid input:focus {
    border-color: #fca5a5;
    box-shadow: 0 0 0 3px rgba(252, 165, 165, .28);
}
.rg-field-error {
    min-height: 0;
    color: #fecaca;
    font: 600 .78rem 'Inter', sans-serif;
    line-height: 1.4;
    padding: 0 2px;
    transition: min-height .18s ease;
}
.rg-field.is-invalid .rg-field-error { min-height: 1.1em; }
@keyframes rgShake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-3px); }
    50%     { transform: translateX(3px); }
    75%     { transform: translateX(-2px); }
}

/* Non-field error banner (network / rate-limit / CSRF / server). */
.rg-error-banner {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(239, 68, 68, .14);
    border: 1px solid rgba(252, 165, 165, .45);
    color: #fee2e2;
    padding: 11px 13px;
    border-radius: 10px;
    font: 600 .86rem 'Inter', sans-serif;
    line-height: 1.45;
}
.rg-error-banner[hidden] { display: none; }
.rg-error-banner-icon {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fca5a5; color: #7f1d1d;
    display: grid; place-items: center;
    font: 800 .82rem 'Inter Tight', sans-serif;
}
.rg-error-banner-text { flex: 1; }
[dir="rtl"] .rg-error-banner { text-align: right; }

.rg-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; height: 0; }
.rg-submit { margin-top: 6px; }
.rg-fineprint { font-size: .76rem; opacity: .72; margin: 10px 0 0; line-height: 1.5; }

.rg-success { text-align: center; }
.rg-check {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--gold-500, #f5b400); color: #1e293b;
    display: grid; place-items: center; margin: 0 auto 14px;
    font: 800 1.6rem 'Inter Tight', sans-serif;
}
.rg-success h4 { font: 800 1.3rem 'Inter Tight', sans-serif; margin: 0 0 6px; }
.rg-success p { opacity: .86; margin: 0 0 16px; }
.rg-success-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rg-success-cta .btn-ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.rg-success-cta .btn-ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; }

/* ── Methodology ──────────────────────────────────────── */
.roi-method { padding: 80px 0 60px; background: #fff; border-block: 1px solid var(--n-200); }
.rm-head { text-align: center; margin-bottom: 40px; max-width: 760px; margin-inline: auto; }
.rm-head .eyebrow {
    display: inline-block; background: var(--brand-50); color: var(--brand-700);
    border: 1px solid var(--brand-100, #d6def0);
    padding: 6px 14px; border-radius: 999px;
    font: 600 .82rem 'Inter Tight', sans-serif;
    letter-spacing: .02em;
}
.rm-h2 {
    font: 800 clamp(1.6rem, 3.4vw, 2.6rem)/1.15 'Inter Tight', sans-serif;
    letter-spacing: -.02em; color: var(--n-900);
    margin: 14px 0 12px;
}
.rm-h2 .grad {
    background: linear-gradient(120deg, var(--brand-700), var(--gold-500, #f5b400));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-family: 'Instrument Serif', 'Tajawal', serif;
    font-style: italic; font-weight: 400;
}
.rm-sub { color: var(--n-700); font-size: 1rem; line-height: 1.6; }

.rm-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.rm-card {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg, 14px);
    padding: 22px;
    transition: transform .25s var(--ease-spring, ease), box-shadow .25s ease, border-color .25s ease;
}
.rm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 14px 30px rgba(15,23,42,.08)); border-color: var(--brand-300, #a5b8e0); }
.rm-card header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.rm-num {
    font: 800 1.6rem 'Inter Tight', sans-serif;
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: -.02em;
}
.rm-card h3 { font: 700 1rem 'Inter Tight', sans-serif; color: var(--n-900); margin: 0; }
.rm-card p { color: var(--n-700); font-size: .9rem; line-height: 1.6; margin: 0 0 12px; }
.rm-card--ksa { border-color: #fde68a; background: linear-gradient(140deg, #fffbeb, #fff); }
.rm-card--ksa .rm-num { background: linear-gradient(135deg, #b45309, #d97706); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-src {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
    border-top: 1px dashed var(--n-200); padding-top: 10px;
}
.rm-src li { font-size: .76rem; color: var(--n-600); }
.rm-src a { color: var(--brand-700); text-decoration: none; border-bottom: 1px dotted var(--brand-400); }

/* ── Worldwide proof ──────────────────────────────────── */
.roi-proof { padding: 80px 0 60px; background: var(--n-50); }
.rp-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.rp-card {
    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg, 14px);
    padding: 24px;
    display: flex; flex-direction: column; gap: 10px;
    transition: transform .25s var(--ease-spring, ease), box-shadow .25s ease;
}
.rp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 12px 28px rgba(15,23,42,.08)); }
.rp-tag {
    align-self: flex-start;
    background: var(--brand-50); color: var(--brand-700);
    padding: 4px 10px; border-radius: 6px;
    font: 700 .72rem 'JetBrains Mono', monospace;
    letter-spacing: .04em;
}
.rp-card h3 { font: 800 1.1rem 'Inter Tight', sans-serif; color: var(--n-900); line-height: 1.3; margin: 0; }
.rp-card p { color: var(--n-700); font-size: .9rem; line-height: 1.6; margin: 0; flex: 1; }
.rp-link {
    align-self: flex-start; color: var(--brand-700);
    font: 700 .86rem 'Inter Tight', sans-serif;
    text-decoration: none; padding-top: 6px;
    border-bottom: 1px dotted var(--brand-400);
}
.rp-link:hover { color: var(--brand-800, var(--brand-700)); border-bottom-style: solid; }

/* ── FAQ ──────────────────────────────────────────────── */
.roi-faq { padding: 80px 0 60px; background: #fff; border-top: 1px solid var(--n-200); }
.container--narrow { max-width: 780px; }
.rfaq {
    background: var(--n-50);
    border: 1px solid var(--n-200);
    border-radius: var(--r-md, 12px);
    margin-bottom: 12px;
    transition: border-color .2s ease;
}
.rfaq:hover { border-color: var(--brand-300, #a5b8e0); }
.rfaq summary {
    cursor: pointer; padding: 16px 20px;
    font: 700 1rem 'Inter Tight', sans-serif;
    color: var(--n-900);
    display: flex; align-items: center; justify-content: space-between;
    list-style: none;
}
.rfaq summary::-webkit-details-marker { display: none; }
.rfaq summary::after {
    content: '+'; color: var(--brand-700);
    font: 800 1.4rem 'Inter Tight', sans-serif;
    transition: transform .2s ease;
}
.rfaq[open] summary::after { transform: rotate(45deg); }
.rfaq p {
    padding: 0 20px 18px;
    color: var(--n-700); font-size: .94rem; line-height: 1.65; margin: 0;
}

/* ── Final CTA ────────────────────────────────────────── */
.roi-final { padding: 80px 0; background: var(--n-50); }
.rf-card {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--brand-800, #1e3a8a) 0%, var(--brand-700) 50%, var(--brand-600, #2d4ea8) 100%);
    border-radius: var(--r-2xl, 24px);
    padding: 56px 36px;
    text-align: center; color: #fff;
    box-shadow: 0 24px 60px -12px rgba(39,65,136,.5);
}
.rf-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(245,180,0,.25), transparent 70%);
    pointer-events: none;
}
.rf-card h2 {
    position: relative;
    font: 800 clamp(1.8rem, 3.6vw, 2.6rem)/1.15 'Inter Tight', sans-serif;
    letter-spacing: -.02em; margin: 0 0 12px;
    color: #FFFFFF;
}
.rf-card p { position: relative; font-size: 1.05rem; opacity: .92; max-width: 620px; margin: 0 auto 28px; line-height: 1.6; }
.rf-actions { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rf-card .btn-primary {
    background: linear-gradient(180deg, var(--gold-300, #ffd76b) 0%, var(--gold-500, #f5b400) 100%) !important;
    color: #1e293b !important;
    box-shadow: 0 14px 30px -6px rgba(245,180,0,.5) !important;
    border: 0;
}
.rf-card .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -6px rgba(245,180,0,.6) !important; }
.rf-trust { position: relative; font-size: .92rem; opacity: .82; margin-top: 22px !important; }

/* RTL: numerals stay LTR for legibility */
[dir="rtl"] .rrc-big, [dir="rtl"] .rcv-meta-num, [dir="rtl"] .rcv-row strong,
[dir="rtl"] .rrc-bar-val, [dir="rtl"] .roi-out, [dir="rtl"] #totalYr {
    direction: ltr; unicode-bidi: isolate;
    display: inline-block;
}
[dir="rtl"] .rrc-big { display: flex; justify-content: flex-end; gap: 8px; }

/* ============================================================
   RECIPE COST SIMULATOR  ( /recipe-simulator )
   Builds on .page-roi tokens; only adds builder-specific UI.
   ============================================================ */
.page-recipe { background: var(--n-50, #f6f7fb); }

/* Calc grid */
.recipe-calc { padding: 32px 0 80px; }
.recipe-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 980px) { .recipe-grid { grid-template-columns: 1fr; } }

/* Builder card */
.recipe-builder {
    background: #fff;
    border: 1px solid rgba(39,65,136,.08);
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 12px 40px -20px rgba(39,65,136,.18);
}
.rb-section { margin-bottom: 22px; }
.rb-section:last-child { margin-bottom: 0; }

.rb-presets {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.roi-out--ghost { background: transparent !important; color: #64748b; font-weight: 500; }

.rb-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid rgba(39,65,136,.14);
    border-radius: 12px;
    font: 600 15px var(--font-body, system-ui);
    color: #0f172a;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.rb-input:focus { outline: 0; border-color: #274188; box-shadow: 0 0 0 3px rgba(39,65,136,.12); }

/* Ingredient rows table */
.rb-rows-head, .rb-row {
    display: grid;
    grid-template-columns: minmax(0,1.7fr) minmax(0,1.1fr) 64px minmax(0,90px) 36px;
    gap: 10px;
    align-items: center;
}
.rb-rows-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    padding: 0 4px 8px;
    border-bottom: 1px dashed rgba(39,65,136,.14);
    margin-bottom: 8px;
}
.rb-rows { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.rb-row {
    background: #f8fafc;
    border: 1px solid rgba(39,65,136,.08);
    border-radius: 12px;
    padding: 8px;
    transition: border-color .15s, transform .15s;
}
.rb-row:hover { border-color: rgba(39,65,136,.22); }

.rr-pick {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid rgba(39,65,136,.14);
    border-radius: 9px;
    font: 500 13px var(--font-body, system-ui);
    background: #fff;
    color: #0f172a;
    cursor: pointer;
}
.rr-pick:focus { outline: 0; border-color: #274188; }

.rr-qtybox {
    display: flex; align-items: center;
    background: #fff;
    border: 1px solid rgba(39,65,136,.14);
    border-radius: 9px;
    overflow: hidden;
}
.rr-qty {
    flex: 1; min-width: 0;
    padding: 9px 8px;
    border: 0;
    font: 600 13px 'JetBrains Mono', ui-monospace, monospace;
    color: #0f172a;
    background: transparent;
    text-align: end;
}
.rr-qty:focus { outline: 0; }
.rr-unit {
    padding: 0 10px;
    font: 600 11px var(--font-body, system-ui);
    color: #64748b;
    border-inline-start: 1px solid rgba(39,65,136,.14);
    line-height: 1;
}

.rr-yield {
    text-align: center;
    font: 600 12px 'JetBrains Mono', ui-monospace, monospace;
    color: #475569;
    direction: ltr; unicode-bidi: isolate;
}

.rr-cost {
    text-align: end;
    font: 700 14px 'JetBrains Mono', ui-monospace, monospace;
    color: #0f172a;
    direction: ltr; unicode-bidi: isolate;
}

.rr-del {
    width: 30px; height: 30px;
    border: 0; border-radius: 8px;
    background: rgba(239,68,68,.08);
    color: #ef4444;
    font-size: 18px; line-height: 1;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.rr-del:hover { background: #ef4444; color: #fff; transform: scale(1.05); }

.rb-add {
    margin-top: 10px;
    width: 100%;
    padding: 12px;
    border: 1.5px dashed rgba(39,65,136,.28);
    border-radius: 12px;
    background: rgba(39,65,136,.03);
    color: #274188;
    font: 600 14px var(--font-body, system-ui);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.rb-add:hover { background: rgba(39,65,136,.07); border-color: #274188; border-style: solid; }
.rb-add span { font-size: 16px; font-weight: 800; }

/* Knobs grid */
.rb-knobs {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
}
@media (max-width: 640px) { .rb-knobs { grid-template-columns: 1fr; } }
.rb-knob { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 540px) {
    .rb-rows-head { display: none; }
    .rb-row {
        grid-template-columns: 1fr 90px 36px;
        grid-template-areas:
            "pick pick del"
            "qty  yield cost";
        gap: 8px;
    }
    .rr-pick   { grid-area: pick; }
    .rr-qtybox { grid-area: qty; }
    .rr-yield  { grid-area: yield; text-align: end; }
    .rr-cost   { grid-area: cost; }
    .rr-del    { grid-area: del; }
}

/* ─── Results column ─── */
.recipe-results {
    position: sticky; top: 18px;
    display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 980px) { .recipe-results { position: static; } }

.rrc-card {
    background: #fff;
    border: 1px solid rgba(39,65,136,.08);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 8px 28px -20px rgba(39,65,136,.18);
}

/* Plate cost hero */
.rrc-plate-card {
    background: linear-gradient(135deg, #1d3166 0%, #274188 60%, #3a5ba8 100%);
    color: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 14px 40px -18px rgba(39,65,136,.55);
}
.rrc-plate-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; opacity: .8;
}
.rrc-plate-big {
    margin-top: 10px;
    display: flex; align-items: baseline; gap: 10px;
    font: 800 44px 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: -.02em;
    direction: ltr; unicode-bidi: isolate;
}
.rrc-plate-big .rrc-cur { font-size: 18px; opacity: .85; font-weight: 700; color: #ffd66b; }
[dir="rtl"] .rrc-plate-big { display: flex; justify-content: flex-end; }

.rrc-plate-stack {
    margin-top: 18px;
    display: flex;
    height: 12px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,.1);
    gap: 2px;
}
.rrc-stk { display: block; transition: flex-grow .35s cubic-bezier(.34,1.4,.6,1); min-width: 2px; }
.rrc-stk--ing { background: linear-gradient(135deg, #f5b400, #ffd66b); }
.rrc-stk--ovh { background: linear-gradient(135deg, #06b6d4, #67e8f9); }
.rrc-stk--lbr { background: linear-gradient(135deg, #a78bfa, #c4b5fd); }

.rrc-plate-legend {
    margin-top: 14px;
    display: flex; flex-wrap: wrap; gap: 16px 22px;
    font-size: 12px; font-weight: 500; opacity: .92;
}
.rrc-plate-legend i.lg {
    display: inline-block; width: 9px; height: 9px;
    border-radius: 3px; margin-inline-end: 6px;
    vertical-align: middle;
}
.rrc-plate-legend .lg--ing { background: #f5b400; }
.rrc-plate-legend .lg--ovh { background: #06b6d4; }
.rrc-plate-legend .lg--lbr { background: #a78bfa; }
.rrc-plate-legend b {
    margin-inline-start: 4px;
    font: 700 13px 'JetBrains Mono', ui-monospace, monospace;
    direction: ltr; unicode-bidi: isolate;
}

/* Mini cards: shared label + foot */
.rrc-mini-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #64748b;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.rrc-cite a {
    text-transform: none; letter-spacing: 0;
    font-size: 11px; font-weight: 600;
    color: #94a3b8; text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.rrc-cite a:hover { color: #274188; }
.rrc-mini-foot { margin-top: 12px; font-size: 11.5px; }
.rrc-mini-foot a { color: #94a3b8; text-decoration: none; border-bottom: 1px dashed currentColor; }
.rrc-mini-foot a:hover { color: #274188; }
.rrc-mini-foot--note { font-weight: 600; color: #475569; border: 0; }

.rrc-row-top {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
    margin-bottom: 14px;
}
.rrc-fc-num {
    margin-top: 4px;
    font: 800 32px 'JetBrains Mono', ui-monospace, monospace;
    color: #0f172a;
    line-height: 1;
    direction: ltr; unicode-bidi: isolate;
}
.rrc-fc-tag {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(16,185,129,.12); color: #047857;
    white-space: nowrap;
}
.rrc-fc-tag[data-state="warn"]  { background: rgba(245,158,11,.14); color: #b45309; }
.rrc-fc-tag[data-state="bad"]   { background: rgba(239,68,68,.14);  color: #b91c1c; }
.rrc-fc-tag[data-state="good"]  { background: rgba(6,182,212,.14);  color: #0e7490; }
.rrc-fc-tag[data-state="great"] { background: rgba(16,185,129,.18); color: #065f46; }

/* Gauge */
.rrc-gauge { margin-top: 4px; }
.rrc-gauge-track {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #d1fae5 0%, #fef3c7 50%, #fee2e2 100%);
    overflow: hidden;
}
.rrc-gauge-zone {
    position: absolute; top: 0; bottom: 0;
    background: rgba(16,185,129,.32);
    border-inline-start: 2px dashed rgba(5,150,105,.7);
    border-inline-end:   2px dashed rgba(5,150,105,.7);
    pointer-events: none;
}
.rrc-gauge-target {
    position: absolute; top: -4px; bottom: -4px;
    width: 2px; margin-inline-start: -1px;
    background: #047857;
    pointer-events: none;
}
.rrc-gauge-bar {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: rgba(15,23,42,.85);
    border-radius: 999px;
    transition: width .45s cubic-bezier(.34,1.4,.6,1);
    mix-blend-mode: multiply;
}
.rrc-gauge-bar[data-state="great"] { background: rgba(5,150,105,.85); }
.rrc-gauge-bar[data-state="good"]  { background: rgba(14,116,144,.85); }
.rrc-gauge-bar[data-state="warn"]  { background: rgba(180,83,9,.85); }
.rrc-gauge-bar[data-state="bad"]   { background: rgba(185,28,28,.85); }
.rrc-gauge-axis {
    margin-top: 6px;
    display: flex; justify-content: space-between;
    font: 600 10px 'JetBrains Mono', ui-monospace, monospace;
    color: #94a3b8;
    direction: ltr;
}

/* Suggested price */
.rrc-card--suggest { background: linear-gradient(135deg, #fff 0%, #fffbeb 100%); border-color: rgba(245,180,0,.25); }
.rrc-suggest-row {
    margin-top: 10px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.rrc-suggest-num {
    font: 800 30px 'JetBrains Mono', ui-monospace, monospace;
    color: #0f172a;
    direction: ltr; unicode-bidi: isolate;
}
.rrc-suggest-num .rrc-cur { font-size: 14px; opacity: .55; font-weight: 600; margin-inline-end: 6px; }
.rrc-suggest-delta {
    padding: 6px 12px;
    border-radius: 999px;
    font: 700 13px 'JetBrains Mono', ui-monospace, monospace;
    background: rgba(100,116,139,.12); color: #475569;
    direction: ltr;
}
.rrc-suggest-delta[data-state="up"]   { background: rgba(239,68,68,.12);  color: #b91c1c; }
.rrc-suggest-delta[data-state="down"] { background: rgba(16,185,129,.14); color: #047857; }

/* Menu engineering matrix */
.rrc-card--matrix { padding: 20px 20px 22px; }
.rrc-matrix {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    aspect-ratio: 16/9;
    max-width: 360px;
}
.rrc-q {
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    background: #f8fafc;
    color: #94a3b8;
    border: 1.5px solid transparent;
    transition: all .25s;
    line-height: 1.3;
}
.rrc-q b { font-size: 13px; color: #475569; }
.rrc-q.is-active {
    transform: scale(1.04);
    box-shadow: 0 8px 24px -10px rgba(39,65,136,.35);
    color: #0f172a;
    background: #fff;
}
.rrc-q--star.is-active   { background: linear-gradient(135deg, #fef9c3, #fde68a); border-color: #f5b400; }
.rrc-q--puzzle.is-active { background: linear-gradient(135deg, #ddd6fe, #c4b5fd); border-color: #8b5cf6; }
.rrc-q--plow.is-active   { background: linear-gradient(135deg, #fed7aa, #fdba74); border-color: #f97316; }
.rrc-q--dog.is-active    { background: linear-gradient(135deg, #fecaca, #fca5a5); border-color: #ef4444; }
.rrc-q.is-active b { color: #0f172a; }

.rrc-me-verdict {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f1f5f9;
    border-inline-start: 3px solid #274188;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    color: #1e293b;
}

/* Sensitivity */
.rrc-sens { margin-top: 12px; min-height: 24px; }
.rrc-sens-zero { font-size: 12.5px; color: #94a3b8; font-style: italic; }
.rrc-sens-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.rrc-sens-k {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #64748b;
}
.rrc-sens-v {
    margin-top: 4px;
    font: 700 16px 'JetBrains Mono', ui-monospace, monospace;
    color: #0f172a;
    direction: ltr; unicode-bidi: isolate;
}
.rrc-sens-v i { font-style: normal; font-size: 11px; color: #64748b; font-weight: 500; margin-inline-start: 4px; }
.rrc-sens-v--bad { color: #b91c1c; }

/* Annual contribution */
.rrc-card--annual {
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%);
    border-color: rgba(6,182,212,.2);
}
.rrc-annual-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    text-align: center;
}
.rrc-annual-k {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #64748b;
}
.rrc-annual-v {
    margin-top: 4px;
    font: 700 15px 'JetBrains Mono', ui-monospace, monospace;
    color: #0f172a;
    direction: ltr; unicode-bidi: isolate;
}
.rrc-annual-v .rrc-cur { font-size: 11px; opacity: .55; font-weight: 600; margin-inline-end: 4px; }
.rrc-annual-big { font-size: 22px !important; color: #047857 !important; }

.rrc-lift {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(245,180,0,.12);
    border-radius: 10px;
    font-size: 12.5px;
    color: #1e293b;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    line-height: 1.5;
}
.rrc-lift b { font: 800 14px 'JetBrains Mono', ui-monospace, monospace; color: #b45309; direction: ltr; unicode-bidi: isolate; }
.rrc-lift-arrow { color: #b45309; font-size: 12px; }

/* Page-recipe specific RTL polishing */
[dir="rtl"] .rrc-plate-big,
[dir="rtl"] .rrc-fc-num,
[dir="rtl"] .rrc-suggest-num,
[dir="rtl"] .rrc-annual-v {
    display: flex; justify-content: flex-end; gap: 6px;
}
[dir="rtl"] .rrc-gauge-axis { direction: ltr; }
[dir="rtl"] .rb-add span { transform: rotate(0); }

/* ============================================================
   RESTAURANT HEALTH AUDIT  ( /restaurant-audit )
   Builds on .page-roi tokens; adds scorer/radar/band UI.
   ============================================================ */
.page-audit { background: var(--n-50, #f6f7fb); }

.audit-calc { padding: 32px 0 80px; }
.audit-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 980px) { .audit-grid { grid-template-columns: 1fr; } }

/* Form (left) */
.audit-form {
    background: #fff;
    border: 1px solid rgba(39,65,136,.08);
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 12px 40px -20px rgba(39,65,136,.18);
}

.audit-section {
    padding: 22px 0;
    border-bottom: 1px dashed rgba(39,65,136,.12);
}
.audit-section:first-child { padding-top: 0; }
.audit-section:last-child  { padding-bottom: 0; border-bottom: 0; }

.audit-sec-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.audit-sec-num {
    flex: 0 0 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #274188, #3a5ba8);
    color: #fff;
    font: 800 14px 'JetBrains Mono', ui-monospace, monospace;
    display: flex; align-items: center; justify-content: center;
}
.audit-sec-title {
    flex: 1;
    margin: 0;
    font: 700 18px var(--font-display, 'Inter Tight', system-ui);
    color: #0f172a;
}
.audit-sec-ctx {
    font: 600 13px var(--font-body, system-ui);
    color: #94a3b8;
    margin-inline-start: 6px;
}
.audit-sec-weight {
    font: 700 12px 'JetBrains Mono', ui-monospace, monospace;
    color: #64748b;
    padding: 4px 10px;
    background: rgba(39,65,136,.06);
    border-radius: 999px;
    direction: ltr;
}

.audit-q { margin-bottom: 16px; }
.audit-q:last-child { margin-bottom: 0; }
.audit-q-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font: 600 13.5px var(--font-body, system-ui);
    color: #1e293b;
    margin-bottom: 10px;
    line-height: 1.45;
}
.audit-q-val {
    font: 700 14px 'JetBrains Mono', ui-monospace, monospace;
    color: #274188;
    direction: ltr; unicode-bidi: isolate;
    padding: 3px 10px;
    background: rgba(39,65,136,.08);
    border-radius: 999px;
}

.audit-radios {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.audit-radios--wrap { gap: 6px; }
.audit-radio {
    flex: 1; min-width: 0;
    padding: 9px 12px;
    border: 1.5px solid rgba(39,65,136,.14);
    border-radius: 10px;
    background: #fff;
    color: #475569;
    font: 600 13px var(--font-body, system-ui);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    text-align: center;
}
.audit-radios--wrap .audit-radio { flex: 0 1 auto; }
.audit-radio:hover { border-color: #274188; color: #274188; }
.audit-radio.is-active {
    background: linear-gradient(135deg, #274188, #3a5ba8);
    color: #fff;
    border-color: #274188;
    box-shadow: 0 6px 16px -8px rgba(39,65,136,.5);
}

.audit-slider {
    width: 100%;
    -webkit-appearance: none; appearance: none;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #fee2e2 0%, #fef3c7 50%, #d1fae5 100%);
    outline: 0;
    cursor: pointer;
    margin: 4px 0 8px;
}
.audit-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #274188;
    box-shadow: 0 4px 12px -4px rgba(39,65,136,.5);
    cursor: pointer;
    transition: transform .15s;
}
.audit-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.audit-slider::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #274188;
    box-shadow: 0 4px 12px -4px rgba(39,65,136,.5);
    cursor: pointer;
}
.audit-bench {
    font-size: 11.5px;
    color: #94a3b8;
    font-style: italic;
    margin-top: 4px;
    line-height: 1.4;
}

/* ─── Results column ─── */
.audit-results {
    position: sticky; top: 18px;
    display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 980px) { .audit-results { position: static; } }

/* Score gauge */
.audit-score-card {
    background: linear-gradient(135deg, #1d3166 0%, #274188 60%, #3a5ba8 100%);
    color: #fff;
    border-radius: 22px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 14px 40px -18px rgba(39,65,136,.55);
}
.audit-score-ring {
    position: relative;
    width: 180px; height: 180px;
    margin: 0 auto 14px;
}
.audit-score-ring svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.asr-bg {
    fill: none;
    stroke: rgba(255,255,255,.12);
    stroke-width: 9;
}
.asr-fill {
    fill: none;
    stroke: #fbbf24;
    stroke-width: 9;
    stroke-linecap: round;
    transition: stroke-dashoffset .5s cubic-bezier(.34,1.4,.6,1), stroke .3s;
}
.asr-fill[data-band="critical"]    { stroke: #ef4444; }
.asr-fill[data-band="risk"]        { stroke: #fbbf24; }
.asr-fill[data-band="operational"] { stroke: #06b6d4; }
.asr-fill[data-band="elite"]       { stroke: #10b981; }

.audit-score-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1;
}
.audit-score-num {
    font: 800 56px 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: -.04em;
    direction: ltr; unicode-bidi: isolate;
}
.audit-score-of {
    margin-top: 6px;
    font-size: 11px;
    opacity: .65;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.audit-score-band {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 999px;
    font: 700 13px var(--font-body, system-ui);
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgba(255,255,255,.14);
    color: #fff;
}
.audit-score-band[data-band="critical"]    { background: rgba(239,68,68,.85); }
.audit-score-band[data-band="risk"]        { background: rgba(251,191,36,.85); color: #1e293b; }
.audit-score-band[data-band="operational"] { background: rgba(6,182,212,.85); }
.audit-score-band[data-band="elite"]       { background: rgba(16,185,129,.85); }
.audit-score-tag {
    margin-top: 12px;
    font-size: 12.5px;
    opacity: .85;
    line-height: 1.5;
}

/* Radar */
.audit-radar-card {
    background: #fff;
    border: 1px solid rgba(39,65,136,.08);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 8px 28px -20px rgba(39,65,136,.18);
}
.audit-radar-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
    gap: 10px;
    flex-wrap: wrap;
}
.audit-radar-title {
    font: 700 13px var(--font-display, 'Inter Tight', system-ui);
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.audit-radar-legend {
    display: flex; align-items: center; gap: 14px;
    font-size: 11.5px;
    color: #64748b;
}
.audit-radar-legend .lg {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
    margin-inline-end: 5px;
    vertical-align: middle;
}
.audit-radar-legend .lg--you   { background: rgba(39,65,136,.7); border: 1.5px solid #274188; }
.audit-radar-legend .lg--bench { background: rgba(212,162,74,.3); border: 1.5px dashed #d4a24a; }

.audit-radar {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    height: auto;
    aspect-ratio: 1;
    overflow: visible;
    direction: ltr;
}
.ar-ring {
    fill: none;
    stroke: rgba(39,65,136,.08);
    stroke-width: 1;
}
.ar-ring--outer { stroke: rgba(39,65,136,.2); }
.ar-axis {
    stroke: rgba(39,65,136,.1);
    stroke-width: 1;
}
.ar-bench {
    fill: rgba(212,162,74,.18);
    stroke: #d4a24a;
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    transition: all .45s cubic-bezier(.34,1.4,.6,1);
}
.ar-you {
    fill: rgba(39,65,136,.32);
    stroke: #274188;
    stroke-width: 2;
    transition: all .45s cubic-bezier(.34,1.4,.6,1);
}
.ar-label {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-body, system-ui);
    fill: #475569;
}

/* Per-section bars */
.audit-bars {
    margin-top: 12px;
    display: flex; flex-direction: column; gap: 9px;
}
.audit-bar-row {
    display: grid;
    grid-template-columns: 90px 1fr 32px;
    align-items: center;
    gap: 12px;
}
.audit-bar-k {
    font: 600 12px var(--font-body, system-ui);
    color: #475569;
}
.audit-bar-track {
    height: 8px;
    background: rgba(39,65,136,.08);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.audit-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .45s cubic-bezier(.34,1.4,.6,1);
    background: #94a3b8;
}
.audit-bar-fill[data-state="great"] { background: linear-gradient(90deg, #10b981, #34d399); }
.audit-bar-fill[data-state="good"]  { background: linear-gradient(90deg, #06b6d4, #67e8f9); }
.audit-bar-fill[data-state="warn"]  { background: linear-gradient(90deg, #fbbf24, #fcd34d); }
.audit-bar-fill[data-state="bad"]   { background: linear-gradient(90deg, #ef4444, #f87171); }
.audit-bar-v {
    font: 700 13px 'JetBrains Mono', ui-monospace, monospace;
    color: #0f172a;
    text-align: end;
    direction: ltr; unicode-bidi: isolate;
}

/* Weak spots list */
.audit-weak {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: aw;
    display: flex; flex-direction: column; gap: 10px;
}
.audit-weak li {
    counter-increment: aw;
    padding: 12px 14px 12px 44px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(245,180,0,.25);
    position: relative;
}
[dir="rtl"] .audit-weak li { padding: 12px 44px 12px 14px; }
.audit-weak li::before {
    content: counter(aw);
    position: absolute;
    top: 12px; inset-inline-start: 12px;
    width: 22px; height: 22px;
    background: linear-gradient(135deg, #f5b400, #ffd66b);
    color: #1e293b;
    border-radius: 50%;
    font: 800 12px 'JetBrains Mono', ui-monospace, monospace;
    display: flex; align-items: center; justify-content: center;
}
.aw-row {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    margin-bottom: 4px;
}
.aw-prob {
    font: 600 13px var(--font-body, system-ui);
    color: #1e293b;
    line-height: 1.35;
}
.aw-score {
    font: 700 12px 'JetBrains Mono', ui-monospace, monospace;
    color: #b91c1c;
    padding: 2px 8px;
    background: rgba(239,68,68,.1);
    border-radius: 999px;
    direction: ltr; unicode-bidi: isolate;
}
.aw-fix {
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
}

/* Action card (segmented by band) */
.audit-action {
    background: #fff;
    border: 1.5px solid rgba(39,65,136,.1);
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    transition: all .3s;
}
.audit-action[data-band="critical"]    { background: linear-gradient(135deg, #fef2f2, #ffffff); border-color: rgba(239,68,68,.4); }
.audit-action[data-band="risk"]        { background: linear-gradient(135deg, #fffbeb, #ffffff); border-color: rgba(251,191,36,.4); }
.audit-action[data-band="operational"] { background: linear-gradient(135deg, #ecfeff, #ffffff); border-color: rgba(6,182,212,.4); }
.audit-action[data-band="elite"]       { background: linear-gradient(135deg, #ecfdf5, #ffffff); border-color: rgba(16,185,129,.45); }
.audit-action-icon { font-size: 38px; line-height: 1; margin-bottom: 10px; }
.audit-action-title {
    margin: 0 0 8px;
    font: 800 18px var(--font-display, 'Inter Tight', system-ui);
    color: #0f172a;
}
.audit-action-body {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.55;
}
.audit-action-ctas {
    display: flex; flex-direction: column; gap: 8px;
}
.audit-action-ctas .btn { width: 100%; justify-content: center; }

/* RTL number isolation */
[dir="rtl"] .audit-score-num,
[dir="rtl"] .audit-q-val,
[dir="rtl"] .audit-bar-v,
[dir="rtl"] .aw-score {
    display: inline-flex; justify-content: flex-end;
}

/* Compact bars on small screens */
@media (max-width: 540px) {
    .audit-bar-row { grid-template-columns: 75px 1fr 28px; gap: 8px; }
    .audit-radio { padding: 8px 10px; font-size: 12px; }
}

/* ============================================================
   PRICING REDESIGN — v2.9 (cost-of-inaction, outlet slider,
   add-ons, vs-competitors, mobile sticky bar)
   ============================================================ */

/* ─── Cost-of-inaction widget ─── */
.pcw {
    margin: 48px auto 0;
    max-width: 920px;
    background: linear-gradient(180deg, rgba(239,68,68,0.04), rgba(239,68,68,0.01));
    border: 1px solid rgba(239,68,68,0.18);
    border-radius: 24px;
    padding: 36px 32px;
    box-shadow: 0 10px 40px rgba(239,68,68,0.06);
    text-align: start;
}
.pcw-eyebrow {
    display: inline-block;
    font: 700 11px/1 "Inter Tight", sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--danger);
    background: rgba(239,68,68,0.10);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.pcw-title {
    font: 700 clamp(22px, 3vw, 30px)/1.2 "Inter Tight", sans-serif;
    color: var(--ink, #111);
    margin: 0 0 24px;
}
.pcw-title .grad {
    background: linear-gradient(90deg, #EF4444, #F97316);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.pcw-label {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; margin-bottom: 10px;
    font: 600 14px/1.4 "Inter Tight", sans-serif;
    color: #555;
}
.pcw-rev-out {
    font-family: "JetBrains Mono", monospace;
    font-size: 18px; font-weight: 700; color: var(--primary);
    direction: ltr; unicode-bidi: isolate;
}
.pcw-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, #10B981 0%, #F59E0B 50%, #EF4444 100%);
    outline: none; cursor: pointer; margin: 8px 0;
}
.pcw-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; border: 3px solid var(--primary);
    box-shadow: 0 4px 12px rgba(39,65,136,0.3);
    cursor: grab;
}
.pcw-slider::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; border: 3px solid var(--primary);
    box-shadow: 0 4px 12px rgba(39,65,136,0.3);
    cursor: grab;
}
.pcw-slider-marks {
    display: flex; justify-content: space-between;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; color: #888;
    margin-bottom: 24px;
    direction: ltr; unicode-bidi: isolate;
}
.pcw-result {
    background: #fff;
    border: 1px solid rgba(239,68,68,0.20);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.pcw-result-line {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; padding: 8px 0;
}
.pcw-result-line + .pcw-result-line {
    border-top: 1px dashed rgba(239,68,68,0.20);
    margin-top: 4px; padding-top: 12px;
}
.pcw-result-label { font: 500 14px/1.4 "Inter Tight", sans-serif; color: #555; }
.pcw-bleed {
    font-family: "JetBrains Mono", monospace;
    font-size: clamp(22px, 3vw, 32px); font-weight: 800;
    color: var(--danger);
    direction: ltr; unicode-bidi: isolate;
    transition: transform 120ms ease;
}
.pcw-bleed-year {
    font-family: "JetBrains Mono", monospace;
    font-size: 18px; font-weight: 700; color: #B91C1C;
    direction: ltr; unicode-bidi: isolate;
}
.pcw-paybacks {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin-bottom: 16px;
}
.pcw-pay {
    background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
    transition: transform 200ms ease, border-color 200ms ease;
}
.pcw-pay:hover { transform: translateY(-2px); border-color: var(--primary); }
.pcw-pay-name  { font: 700 13px/1 "Inter Tight", sans-serif; color: var(--primary); }
.pcw-pay-price {
    font-family: "JetBrains Mono", monospace;
    font-size: 15px; font-weight: 700; color: #111;
    direction: ltr; unicode-bidi: isolate;
}
.pcw-pay-roi {
    font: 600 12px/1.3 "Inter Tight", sans-serif;
    color: var(--success);
}
.pcw-foot {
    font: 400 13px/1.6 "Inter Tight", sans-serif;
    color: #6B7280; margin: 0;
}
.pcw-foot a { color: var(--primary); font-weight: 700; }
@media (max-width: 640px) {
    .pcw { padding: 24px 18px; border-radius: 18px; }
    .pcw-paybacks { grid-template-columns: 1fr; }
    .pcw-result-line { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ─── Plan card additions ─── */
.ptier-outcome {
    margin: 8px 0 0;
    font: 500 13.5px/1.5 "Inter Tight", sans-serif;
    color: #4B5563;
    border-inline-start: 3px solid var(--accent-gold, #D4A24A);
    padding-inline-start: 10px;
}
.ptier-bestfor {
    margin: 12px 0 0;
    font: 600 12px/1.4 "Inter Tight", sans-serif;
    color: #6B7280;
    display: flex; align-items: center; gap: 6px;
}
.ptier-bf-dot {
    color: var(--success);
    font-size: 14px; line-height: 1;
}
.ptier--featured .ptier-outcome { border-inline-start-color: #fff; color: rgba(255,255,255,0.92); }
.ptier--featured .ptier-bestfor { color: rgba(255,255,255,0.78); }

/* ─── Outlet slider in Standard tier ─── */
.ptier-outlets {
    margin-top: 16px;
    padding: 14px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
}
.ptier:not(.ptier--featured) .ptier-outlets {
    background: #F9FAFB;
    border-color: #E5E7EB;
}
.ptier-outlets-label {
    display: flex; justify-content: space-between; align-items: baseline;
    font: 600 12.5px/1.3 "Inter Tight", sans-serif;
    margin-bottom: 8px;
    color: inherit;
}
.ptier-outlets-out {
    font-family: "JetBrains Mono", monospace;
    font-weight: 700; font-size: 16px;
    direction: ltr; unicode-bidi: isolate;
}
.ptier-outlets-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,0.30);
    cursor: pointer; outline: none;
}
.ptier:not(.ptier--featured) .ptier-outlets-slider { background: #D1D5DB; }
.ptier-outlets-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 2px solid var(--accent-gold, #D4A24A);
    cursor: grab;
}
.ptier-outlets-slider::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 2px solid var(--accent-gold, #D4A24A);
    cursor: grab;
}
.ptier-outlets-total {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.20);
}
.ptier:not(.ptier--featured) .ptier-outlets-total { border-top-color: #E5E7EB; }
.ptier-outlets-total-label { font: 500 12px/1 "Inter Tight", sans-serif; opacity: 0.85; }
.ptier-outlets-total-amt {
    font-family: "JetBrains Mono", monospace;
    font-weight: 800; font-size: 18px;
    direction: ltr; unicode-bidi: isolate;
}

/* ─── Add-ons grid ─── */
.pricing-addons { padding: 64px 0 32px; }
.addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 32px;
}
.addon-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 22px 20px;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.addon-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: 0 12px 32px rgba(39,65,136,0.10);
}
.addon-name {
    font: 700 16px/1.3 "Inter Tight", sans-serif;
    color: var(--primary);
    margin: 0 0 8px;
}
.addon-desc {
    font: 400 13px/1.5 "Inter Tight", sans-serif;
    color: #6B7280;
    margin: 0 0 16px;
    min-height: 40px;
}
.addon-price {
    display: flex; align-items: baseline; gap: 4px;
    direction: ltr; unicode-bidi: isolate;
}
.addon-currency { font: 600 12px/1 "Inter Tight", sans-serif; color: #6B7280; }
.addon-amount   {
    font-family: "JetBrains Mono", monospace;
    font-size: 26px; font-weight: 800;
    color: var(--ink, #111);
}
.addon-unit { font: 500 13px/1 "Inter Tight", sans-serif; color: #6B7280; }
[dir="rtl"] .addon-card { text-align: right; }

/* ─── VS competitors table ─── */
.pricing-vs { padding: 64px 0; background: linear-gradient(180deg, #FAFBFC, #fff); }
.vs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 32px; }
.vs-table {
    width: 100%; min-width: 720px;
    border-collapse: separate; border-spacing: 0;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.vs-th {
    padding: 18px 14px;
    text-align: center;
    font: 700 14px/1.3 "Inter Tight", sans-serif;
    color: #1F2937;
    background: #F9FAFB;
    border-bottom: 2px solid #E5E7EB;
}
.vs-th-feat { text-align: start; min-width: 220px; }
.vs-th-polaris {
    background: var(--primary);
    color: #fff;
    position: relative;
}
.vs-th-polaris::after {
    content: "★";
    position: absolute; top: 6px; right: 8px;
    color: var(--accent-gold, #D4A24A); font-size: 14px;
}
.vs-brand { display: block; font-size: 16px; font-weight: 800; margin-bottom: 2px; }
.vs-tag   { display: block; font-size: 11px; font-weight: 500; opacity: 0.78; }
.vs-cat-row td {
    background: #F3F4F6;
    font: 700 11px/1 "Inter Tight", sans-serif;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 14px 18px;
    border-bottom: 1px solid #E5E7EB;
}
.vs-name {
    padding: 14px 18px;
    font: 500 14px/1.4 "Inter Tight", sans-serif;
    color: #111827;
    border-bottom: 1px solid #F3F4F6;
}
.vs-cell {
    padding: 14px 12px;
    text-align: center;
    border-bottom: 1px solid #F3F4F6;
    font: 600 13px/1.3 "Inter Tight", sans-serif;
}
.vs-cell--polaris { background: rgba(39,65,136,0.04); }
.vs-yes {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(16,185,129,0.12); color: var(--success);
    font-weight: 800;
}
.vs-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(239,68,68,0.10); color: var(--danger);
    font-weight: 800;
}
.vs-partial {
    display: inline-block;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(245,158,11,0.12); color: #B45309;
    font: 600 11px/1.2 "Inter Tight", sans-serif;
}
.vs-val {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px; font-weight: 700;
    color: #1F2937;
    direction: ltr; unicode-bidi: isolate;
}
.vs-foot {
    margin-top: 16px;
    font: 400 12.5px/1.6 "Inter Tight", sans-serif;
    color: #6B7280;
    text-align: center;
}

/* ─── Mobile sticky bar ─── */
.psm {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: none;
    align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.10);
    transform: translateY(100%);
    transition: transform 220ms ease;
}
.psm.is-visible { transform: translateY(0); }
.psm-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.psm-plan {
    font: 700 12px/1.2 "Inter Tight", sans-serif;
    color: var(--primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.psm-price {
    font-family: "JetBrains Mono", monospace;
    font-size: 18px; font-weight: 800; color: #111;
    direction: ltr; unicode-bidi: isolate;
}
.psm-price small { font-size: 11px; font-weight: 600; color: #6B7280; margin-inline-start: 2px; }
.psm-actions { display: flex; gap: 8px; }
.psm-actions .btn-sm { padding: 8px 14px; font-size: 13px; }

@media (max-width: 768px) {
    .psm { display: flex; }
    body { padding-bottom: 72px; }
}

/* ─── RTL fine-tuning ─── */
[dir="rtl"] .vs-th-polaris::after { right: auto; left: 8px; }
[dir="rtl"] .pcw { text-align: right; }

/* ============================================================
   BOOK-DEMO  ·  elite sections (v2.10.0)
   Agenda · Cal.com embed · Show-Up Pact · Objection FAQ
   ============================================================ */
.bf-hint{
    margin:.55rem 0 0;
    font-size:.86rem;
    line-height:1.45;
    color:var(--text-muted,#5b6680);
    padding:.55rem .75rem;
    background:rgba(39,65,136,.06);
    border:1px solid rgba(39,65,136,.18);
    border-radius:10px;
    animation:bf-hint-in .25s ease-out both;
}
.bf-hint.is-vip{
    color:#7a5500;
    background:linear-gradient(135deg,rgba(212,162,74,.14),rgba(212,162,74,.06));
    border-color:rgba(212,162,74,.45);
    font-weight:600;
}
@keyframes bf-hint-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.bd-section-head{ max-width:780px; margin:0 auto 2.5rem; text-align:center; }
.bd-section-title{
    font-family:'Inter Tight',Inter,system-ui,sans-serif;
    font-size:clamp(1.7rem,3.4vw,2.6rem);
    line-height:1.15;
    letter-spacing:-.02em;
    margin:.5rem 0 .75rem;
    color:var(--text,#0e1530);
}
[dir="rtl"] .bd-section-title{ font-family:'IBM Plex Sans Arabic','Tajawal',system-ui,sans-serif; letter-spacing:0; }
.bd-section-sub{
    font-size:1.05rem; line-height:1.65; color:var(--text-muted,#5b6680); margin:0;
}

/* ── Agenda ─────────────────────────────────────────────── */
.bd-agenda{ padding:5rem 0 4rem; position:relative; }
.bd-timeline{
    list-style:none; margin:0 auto; padding:0;
    max-width:880px;
    display:flex; flex-direction:column; gap:1rem;
    counter-reset:bdtl;
}
.bd-tl-item{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:1.5rem;
    align-items:stretch;
    background:#fff;
    border:1px solid rgba(39,65,136,.10);
    border-radius:18px;
    padding:1.3rem 1.6rem;
    box-shadow:0 1px 2px rgba(15,28,75,.04), 0 6px 18px -8px rgba(15,28,75,.08);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position:relative;
}
.bd-tl-item:hover{ transform:translateY(-2px); box-shadow:0 4px 6px rgba(15,28,75,.05), 0 16px 32px -10px rgba(15,28,75,.14); border-color:rgba(39,65,136,.25); }
.bd-tl-item.is-hot{
    border-color:rgba(212,162,74,.45);
    background:linear-gradient(135deg,#fffaf0 0%,#fff 60%);
}
.bd-tl-item.is-hot::before{
    content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
    box-shadow:0 0 0 1px rgba(212,162,74,.25), 0 8px 24px -8px rgba(212,162,74,.35);
}
.bd-tl-time{
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    padding-inline-end:1.2rem;
    border-inline-end:1px dashed rgba(39,65,136,.18);
}
.bd-tl-time span{
    font-family:'JetBrains Mono','Inter Tight',monospace;
    font-size:1.7rem; font-weight:700; line-height:1;
    color:var(--primary,#274188);
    letter-spacing:-.02em;
    direction:ltr; unicode-bidi:isolate;
}
.bd-tl-time small{
    text-transform:uppercase; letter-spacing:.12em;
    font-size:.7rem; font-weight:600; color:var(--text-muted,#5b6680);
    margin-top:.35rem;
}
.bd-tl-body h3{
    font-family:'Inter Tight',Inter,system-ui,sans-serif;
    font-size:1.12rem; font-weight:700; margin:0 0 .35rem; color:var(--text,#0e1530);
}
[dir="rtl"] .bd-tl-body h3{ font-family:'IBM Plex Sans Arabic',sans-serif; }
.bd-tl-body p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--text-muted,#5b6680); }
@media (max-width:640px){
    .bd-tl-item{ grid-template-columns:1fr; gap:.5rem; padding:1.1rem 1.2rem; }
    .bd-tl-time{ flex-direction:row; align-items:baseline; gap:.6rem; padding:0 0 .5rem; border-inline-end:0; border-bottom:1px dashed rgba(39,65,136,.18); }
    .bd-tl-time span{ font-size:1.35rem; }
    .bd-tl-time small{ margin-top:0; }
}

/* ── Cal.com self-serve embed ───────────────────────────── */
.bd-cal{ padding:4rem 0; background:linear-gradient(180deg,transparent 0,rgba(39,65,136,.03) 60%,transparent 100%); }
.bd-cal-frame{
    max-width:1100px; margin:2rem auto 0;
    background:#fff;
    border:1px solid rgba(39,65,136,.12);
    border-radius:20px;
    box-shadow:0 12px 40px -12px rgba(15,28,75,.18);
    overflow:hidden;
    aspect-ratio: 16 / 11;
    min-height:680px;
}
.bd-cal-frame iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:640px){
    .bd-cal-frame{ aspect-ratio:auto; min-height:760px; border-radius:14px; }
}

/* ── Show-Up Pact ───────────────────────────────────────── */
.bd-pact{ padding:4rem 0 5rem; }
.bd-pact-card{
    max-width:980px; margin:0 auto;
    display:grid; grid-template-columns:auto 1fr; gap:2rem;
    align-items:flex-start;
    background:linear-gradient(135deg,#0e1530 0%,#1d3166 60%,#274188 100%);
    color:#fff;
    padding:2.5rem 2.5rem 2.25rem;
    border-radius:24px;
    position:relative; overflow:hidden;
    box-shadow:0 20px 50px -15px rgba(15,28,75,.45);
}
.bd-pact-card::before{
    content:""; position:absolute; inset:0;
    background:
        radial-gradient(60% 60% at 100% 0%, rgba(212,162,74,.22) 0%, transparent 60%),
        radial-gradient(50% 50% at 0% 100%, rgba(255,255,255,.06) 0%, transparent 60%);
    pointer-events:none;
}
.bd-pact-stamp{
    color:var(--accent-gold,#D4A24A);
    flex:0 0 auto;
    position:relative;
    filter:drop-shadow(0 4px 10px rgba(212,162,74,.4));
}
.bd-pact-body{ position:relative; }
.bd-pact-body .eyebrow{
    color:var(--accent-gold,#D4A24A);
    text-transform:uppercase; letter-spacing:.16em;
    font-size:.78rem; font-weight:700;
}
.bd-pact-title{
    font-family:'Inter Tight',Inter,system-ui,sans-serif;
    font-size:clamp(1.4rem,2.6vw,2rem);
    line-height:1.25; letter-spacing:-.015em;
    margin:.6rem 0 .85rem; color:#fff;
}
[dir="rtl"] .bd-pact-title{ font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:0; }
.bd-pact-title em{ font-style:normal; color:var(--accent-gold,#D4A24A); }
.bd-pact-title .grad{
    background:linear-gradient(120deg,#fff 0%,#ffe9b8 50%,var(--accent-gold,#D4A24A) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bd-pact-sub{ color:rgba(255,255,255,.82); font-size:1rem; line-height:1.65; margin:0 0 1.25rem; max-width:64ch; }
.bd-pact-list{
    list-style:none; padding:0; margin:0;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem 1.5rem;
}
.bd-pact-list li{ font-size:.92rem; color:rgba(255,255,255,.92); display:flex; gap:.55rem; align-items:flex-start; line-height:1.45; }
.bd-pact-list li strong{ color:var(--accent-gold,#D4A24A); font-weight:700; flex:0 0 auto; }
@media (max-width:720px){
    .bd-pact-card{ grid-template-columns:1fr; padding:2rem 1.5rem; gap:1.25rem; }
    .bd-pact-stamp{ margin:0 auto; }
    .bd-pact-list{ grid-template-columns:1fr; }
}

/* ── Objection FAQ ──────────────────────────────────────── */
.bd-faq{ padding:4rem 0 5.5rem; background:linear-gradient(180deg,transparent,rgba(39,65,136,.04)); }
.bd-faq-wrap{ max-width:820px; }
.bd-faq-list{ display:flex; flex-direction:column; gap:.75rem; margin-top:2rem; }
.bd-faq-item{
    background:#fff;
    border:1px solid rgba(39,65,136,.12);
    border-radius:14px;
    padding:0;
    overflow:hidden;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.bd-faq-item[open]{
    border-color:rgba(39,65,136,.32);
    box-shadow:0 6px 20px -8px rgba(15,28,75,.14);
}
.bd-faq-item > summary{
    cursor:pointer;
    list-style:none;
    padding:1.15rem 1.4rem;
    font-family:'Inter Tight',Inter,system-ui,sans-serif;
    font-weight:600;
    font-size:1.02rem;
    color:var(--text,#0e1530);
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    transition:color .15s ease;
}
[dir="rtl"] .bd-faq-item > summary{ font-family:'IBM Plex Sans Arabic',sans-serif; }
.bd-faq-item > summary::-webkit-details-marker{ display:none; }
.bd-faq-item > summary::after{
    content:"+";
    font-family:'JetBrains Mono',monospace;
    font-weight:400;
    font-size:1.4rem;
    color:var(--primary,#274188);
    transition:transform .25s ease;
    flex:0 0 auto;
}
.bd-faq-item[open] > summary::after{ content:"−"; transform:rotate(180deg); }
.bd-faq-item > summary:hover{ color:var(--primary,#274188); }
.bd-faq-a{
    padding:0 1.4rem 1.25rem;
    color:var(--text-muted,#5b6680);
    line-height:1.7;
    font-size:.97rem;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .urgency, .site-header, .wa-float, .sticky-cta, .modal-backdrop, .psm, body::before { display: none !important; }
    body { background: #fff; color: #000; }
    .bd-cal, .bd-pact, .bd-faq { display:none !important; }
}


/* ============================================================
   ICP-FIT (who this is / is NOT for) — filter-funnel section
   ============================================================ */
.icp-fit { padding: 88px 0; background: var(--surface, #ffffff); }
.icp-fit .section-head { text-align: center; margin-bottom: 48px; max-width: 720px; margin-left: auto; margin-right: auto; }
.icp-fit .section-head p { color: var(--text-mute, #5b6680); font-size: 1.05rem; }
.icp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto;
}
@media (max-width: 820px) { .icp-grid { grid-template-columns: 1fr; } }

.icp-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.icp-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08); }
.icp-fit-yes { border-top: 3px solid #16a34a; }
.icp-fit-no  { border-top: 3px solid #dc2626; background: #fafbfc; }

.icp-card-head { display: flex; align-items: center; gap: 12px; }
.icp-card-head h3 { font-size: 1.25rem; margin: 0; color: var(--primary, #0f172a); }
.icp-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    font-weight: 700; font-size: 1.05rem; line-height: 1;
    flex: 0 0 auto;
}
.icp-fit-yes .icp-mark { background: #dcfce7; color: #15803d; }
.icp-fit-no  .icp-mark { background: #fee2e2; color: #b91c1c; }

.icp-card ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.icp-card ul li {
    position: relative; padding-left: 22px;
    color: var(--text, #1f2937); line-height: 1.55; font-size: 0.97rem;
}
.icp-card ul li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 8px; height: 8px; border-radius: 50%;
}
.icp-fit-yes ul li::before { background: #16a34a; }
.icp-fit-no  ul li::before { background: #dc2626; opacity: 0.55; }
.icp-card ul li strong { color: var(--primary, #0f172a); font-weight: 700; }
[dir="rtl"] .icp-card ul li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .icp-card ul li::before { left: auto; right: 0; }

.icp-cta {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 0.98rem;
    color: var(--brand-500, #2563eb);
    text-decoration: none;
    padding-top: 8px;
}
.icp-cta:hover { text-decoration: underline; }
.icp-cta-quiet { color: var(--text-mute, #5b6680); }

/* ============================================================
   PRICING — transparent 3-tier (Starter / Growth / Enterprise)
   ============================================================ */
.pricing { padding: 96px 0; background: var(--surface-alt, #fafbfc); }
.pricing .section-head { text-align: center; margin-bottom: 52px; max-width: 720px; margin-left: auto; margin-right: auto; }
.pricing .section-head p { color: var(--text-mute, #5b6680); font-size: 1.05rem; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
    align-items: stretch;
}
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; } }

.pricing-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 36px 28px 32px;
    display: flex; flex-direction: column; gap: 20px;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10); }
.pricing-card.is-recommended {
    border: 2px solid var(--brand-500, #2563eb);
    box-shadow: 0 14px 40px rgba(37, 99, 235, 0.14);
    transform: translateY(-6px);
}
@media (max-width: 980px) { .pricing-card.is-recommended { transform: none; } }

.pricing-badge {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: var(--brand-500, #2563eb);
    color: #fff;
    font: 700 0.78rem/1 "Inter Tight", sans-serif;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 8px 16px; border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.30);
}
[dir="rtl"] .pricing-badge { left: auto; right: 50%; transform: translateX(50%); }

.pricing-head { display: flex; flex-direction: column; gap: 6px; }
.pricing-name { font-size: 1.35rem; margin: 0; color: var(--primary, #0f172a); }
.pricing-for { font-size: 0.92rem; color: var(--text-mute, #5b6680); margin: 0; }

.pricing-price {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
    padding: 14px 0; border-top: 1px solid #F1F5F9; border-bottom: 1px solid #F1F5F9;
}
.pricing-from { font-size: 0.85rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; width: 100%; margin-bottom: -4px; }
.pricing-currency { font-size: 1rem; font-weight: 600; color: var(--text-mute); }
.pricing-amount {
    font: 800 2.6rem/1 "Inter Tight", sans-serif;
    color: var(--primary, #0f172a);
    font-variant-numeric: tabular-nums;
}
.pricing-period { font-size: 0.92rem; color: var(--text-mute); }

.pricing-features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
    flex: 1;
}
.pricing-features li {
    position: relative; padding-left: 24px;
    font-size: 0.95rem; color: var(--text, #1f2937); line-height: 1.5;
}
.pricing-features li::before {
    content: "\2713"; position: absolute; left: 0; top: 0;
    color: #16a34a; font-weight: 700;
}
.pricing-features li.pricing-feature-lead { font-weight: 600; color: var(--primary, #0f172a); }
[dir="rtl"] .pricing-features li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .pricing-features li::before { left: auto; right: 0; }

.pricing-cta {
    margin-top: 8px;
    text-align: center;
}
.btn-block { display: block; width: 100%; }

.pricing-foot {
    text-align: center;
    margin-top: 40px;
    display: flex; flex-direction: column; gap: 6px;
}
.pricing-guarantee {
    font-weight: 600; color: var(--primary, #0f172a);
    font-size: 1rem;
}
.pricing-note { color: var(--text-mute, #5b6680); font-size: 0.88rem; margin: 0; }


/* ============================================================
   ICP-FIT (who this is / is NOT for) — filter-funnel section
   ============================================================ */
.icp-fit { padding: 88px 0; background: var(--surface, #ffffff); }
.icp-fit .section-head { text-align: center; margin-bottom: 48px; max-width: 720px; margin-left: auto; margin-right: auto; }
.icp-fit .section-head p { color: var(--text-mute, #5b6680); font-size: 1.05rem; }
.icp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto;
}
@media (max-width: 820px) { .icp-grid { grid-template-columns: 1fr; } }

.icp-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.icp-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08); }
.icp-fit-yes { border-top: 3px solid #16a34a; }
.icp-fit-no  { border-top: 3px solid #dc2626; background: #fafbfc; }

.icp-card-head { display: flex; align-items: center; gap: 12px; }
.icp-card-head h3 { font-size: 1.25rem; margin: 0; color: var(--primary, #0f172a); }
.icp-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    font-weight: 700; font-size: 1.05rem; line-height: 1;
    flex: 0 0 auto;
}
.icp-fit-yes .icp-mark { background: #dcfce7; color: #15803d; }
.icp-fit-no  .icp-mark { background: #fee2e2; color: #b91c1c; }

.icp-card ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.icp-card ul li {
    position: relative; padding-left: 22px;
    color: var(--text, #1f2937); line-height: 1.55; font-size: 0.97rem;
}
.icp-card ul li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 8px; height: 8px; border-radius: 50%;
}
.icp-fit-yes ul li::before { background: #16a34a; }
.icp-fit-no  ul li::before { background: #dc2626; opacity: 0.55; }
.icp-card ul li strong { color: var(--primary, #0f172a); font-weight: 700; }
[dir="rtl"] .icp-card ul li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .icp-card ul li::before { left: auto; right: 0; }

.icp-cta {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 0.98rem;
    color: var(--brand-500, #2563eb);
    text-decoration: none;
    padding-top: 8px;
}
.icp-cta:hover { text-decoration: underline; }
.icp-cta-quiet { color: var(--text-mute, #5b6680); }

/* ============================================================
   PRICING — transparent 3-tier (Starter / Growth / Enterprise)
   ============================================================ */
.pricing { padding: 96px 0; background: var(--surface-alt, #fafbfc); }
.pricing .section-head { text-align: center; margin-bottom: 52px; max-width: 720px; margin-left: auto; margin-right: auto; }
.pricing .section-head p { color: var(--text-mute, #5b6680); font-size: 1.05rem; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
    align-items: stretch;
}
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; } }

.pricing-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 36px 28px 32px;
    display: flex; flex-direction: column; gap: 20px;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10); }
.pricing-card.is-recommended {
    border: 2px solid var(--brand-500, #2563eb);
    box-shadow: 0 14px 40px rgba(37, 99, 235, 0.14);
    transform: translateY(-6px);
}
@media (max-width: 980px) { .pricing-card.is-recommended { transform: none; } }

.pricing-badge {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: var(--brand-500, #2563eb);
    color: #fff;
    font: 700 0.78rem/1 "Inter Tight", sans-serif;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 8px 16px; border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.30);
}
[dir="rtl"] .pricing-badge { left: auto; right: 50%; transform: translateX(50%); }

.pricing-head { display: flex; flex-direction: column; gap: 6px; }
.pricing-name { font-size: 1.35rem; margin: 0; color: var(--primary, #0f172a); }
.pricing-for { font-size: 0.92rem; color: var(--text-mute, #5b6680); margin: 0; }

.pricing-price {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
    padding: 14px 0; border-top: 1px solid #F1F5F9; border-bottom: 1px solid #F1F5F9;
}
.pricing-from { font-size: 0.85rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; width: 100%; margin-bottom: -4px; }
.pricing-currency { font-size: 1rem; font-weight: 600; color: var(--text-mute); }
.pricing-amount {
    font: 800 2.6rem/1 "Inter Tight", sans-serif;
    color: var(--primary, #0f172a);
    font-variant-numeric: tabular-nums;
}
.pricing-period { font-size: 0.92rem; color: var(--text-mute); }

.pricing-features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
    flex: 1;
}
.pricing-features li {
    position: relative; padding-left: 24px;
    font-size: 0.95rem; color: var(--text, #1f2937); line-height: 1.5;
}
.pricing-features li::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: #16a34a; font-weight: 700;
}
.pricing-features li.pricing-feature-lead { font-weight: 600; color: var(--primary, #0f172a); }
[dir="rtl"] .pricing-features li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .pricing-features li::before { left: auto; right: 0; }

.pricing-cta {
    margin-top: 8px;
    text-align: center;
}
.btn-block { display: block; width: 100%; }

.pricing-foot {
    text-align: center;
    margin-top: 40px;
    display: flex; flex-direction: column; gap: 6px;
}
.pricing-guarantee {
    font-weight: 600; color: var(--primary, #0f172a);
    font-size: 1rem;
}
.pricing-note { color: var(--text-mute, #5b6680); font-size: 0.88rem; margin: 0; }


/* ============================================================
   GUARANTEE PAGE  (/guarantee)
   Signature-ready public addendum.
   ============================================================ */
.page-guarantee main { padding-bottom: 0; }

.g-back {
    display: inline-block;
    margin-bottom: 28px;
    color: var(--text-mute, #5b6680);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
}
.g-back:hover { color: var(--brand-500, #2563eb); }

.g-hero { padding: 64px 0 32px; }
.g-hero .eyebrow {
    display: inline-block;
    background: #eef2ff;
    color: #4338ca;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.g-title {
    font: 800 clamp(1.9rem, 4vw, 2.85rem)/1.18 "Inter Tight", sans-serif;
    color: var(--primary, #0f172a);
    margin: 0 0 18px;
    max-width: 900px;
}
[dir="rtl"] .g-title { font-family: "Tajawal", "IBM Plex Sans Arabic", sans-serif; line-height: 1.4; }
.g-sub {
    font-size: 1.08rem;
    color: var(--text-mute, #5b6680);
    max-width: 760px;
    line-height: 1.65;
    margin: 0 0 32px;
}

.g-hero-row {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid #E5E7EB;
}
.g-stat { display: flex; flex-direction: column; gap: 2px; }
.g-stat-value {
    font: 800 1.8rem/1 "Inter Tight", sans-serif;
    color: var(--brand-500, #2563eb);
    font-variant-numeric: tabular-nums;
}
.g-stat-label { font-size: 0.88rem; color: var(--text-mute, #5b6680); }
.g-hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-left: auto; }
[dir="rtl"] .g-hero-cta { margin-left: 0; margin-right: auto; }

/* TL;DR */
.g-tldr { padding: 16px 0 8px; }
.g-tldr-card {
    background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
    border: 1px solid #DBEAFE;
    border-radius: 14px;
    padding: 22px 26px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.g-tldr-label {
    flex: 0 0 auto;
    background: #1e3a8a;
    color: #fff;
    font: 700 0.75rem/1 "Inter Tight", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 10px;
    border-radius: 6px;
    margin-top: 3px;
}
.g-tldr-card p { margin: 0; flex: 1; min-width: 260px; color: var(--primary, #0f172a); line-height: 1.65; font-size: 1.02rem; }

/* Body sections */
.g-body { padding: 32px 0 48px; }
.g-section {
    padding: 28px 0;
    border-bottom: 1px solid #F1F5F9;
}
.g-section:last-child { border-bottom: 0; }
.g-section-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 14px;
}
.g-section-num {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--primary, #0f172a);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 0.95rem/1 "JetBrains Mono", monospace;
    align-self: flex-start;
    margin-top: 4px;
}
.g-section h2 {
    font: 700 1.35rem/1.35 "Inter Tight", sans-serif;
    color: var(--primary, #0f172a);
    margin: 0;
}
[dir="rtl"] .g-section h2 { font-family: "Tajawal", "IBM Plex Sans Arabic", sans-serif; }

.g-section-body, .g-section-after {
    color: var(--text, #1f2937);
    line-height: 1.7;
    font-size: 1rem;
    margin: 0 0 14px;
    padding-left: 52px;
}
.g-section-after { color: var(--text-mute, #5b6680); font-size: 0.95rem; margin-top: 14px; }
[dir="rtl"] .g-section-body,
[dir="rtl"] .g-section-after { padding-left: 0; padding-right: 52px; }

.g-list {
    list-style: none;
    padding: 0 0 0 52px;
    margin: 0;
    display: flex; flex-direction: column;
    gap: 10px;
}
[dir="rtl"] .g-list { padding: 0 52px 0 0; }
.g-list li {
    position: relative;
    padding-left: 22px;
    line-height: 1.65;
    color: var(--text, #1f2937);
    font-size: 0.98rem;
}
.g-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 9px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand-500, #2563eb);
}
[dir="rtl"] .g-list li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .g-list li::before { left: auto; right: 0; }
.g-list li strong { color: var(--primary, #0f172a); font-weight: 700; }
.g-list li a { color: var(--brand-500, #2563eb); text-decoration: underline; }

.g-formula {
    margin: 14px 0 14px 52px;
    background: #0f172a;
    color: #e2e8f0;
    padding: 18px 20px;
    border-radius: 10px;
    font: 500 0.85rem/1.6 "JetBrains Mono", monospace;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}
[dir="rtl"] .g-formula { margin: 14px 52px 14px 0; }
.g-formula code { color: inherit; background: none; padding: 0; }

/* Foot CTA */
.g-footcta { padding: 48px 0 80px; background: var(--surface-alt, #fafbfc); }
.g-footcta-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 36px 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
}
@media (max-width: 820px) { .g-footcta-card { grid-template-columns: 1fr; } }
.g-footcta-card h2 {
    font: 700 1.45rem/1.3 "Inter Tight", sans-serif;
    color: var(--primary, #0f172a);
    margin: 0 0 8px;
}
.g-footcta-card p { color: var(--text-mute, #5b6680); margin: 0; line-height: 1.65; }
.g-footcta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }

.g-version {
    margin-top: 28px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-mute, #5b6680);
    line-height: 1.6;
}

/* Print: hide chrome, render addendum cleanly */
@media print {
    .site-header, .site-footer, .wa-float, .bg-canvas,
    .g-back, .g-hero-cta, .g-footcta, .g-tldr-label { display: none !important; }
    .page-guarantee { background: #fff; color: #000; }
    .g-formula { background: #f5f5f5; color: #000; }
    .g-section { page-break-inside: avoid; }
}



/* ============================================================
   DAY-1 PILOT FUNNEL  (hero + how-the-pilot-works)
   ============================================================ */

/* anonymous-customer proof line under hero sub */
.hero-proof {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 4px 0 26px;
    max-width: 100%;
}
.hero-proof-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .18);
    flex: 0 0 auto;
    animation: heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, .18); }
    50%      { box-shadow: 0 0 0 8px rgba(16, 185, 129, .05); }
}

/* secondary hero CTA: low-weight scroll link to pilot section */
.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-mute, #5b6680);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    padding: 12px 4px;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s, transform .15s;
}
.hero-cta-secondary:hover {
    color: var(--brand-500, #2563eb);
    border-color: var(--brand-500, #2563eb);
    transform: translateY(2px);
}

/* primary hero CTA: green WhatsApp pilot qualifier */
.hero-cta-primary {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-color: #128C7E;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    box-shadow: 0 8px 24px -8px rgba(18, 140, 126, .55);
}
.hero-cta-primary:hover {
    background: linear-gradient(135deg, #20bf5a 0%, #0f7a6e 100%);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(18, 140, 126, .65);
}
.hero-cta-primary .sub-label {
    display: block;
    width: 100%;
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.92;
    margin-top: 2px;
    text-align: start;
}

/* ─────────── 60-day pilot section ─────────── */
.pilot-works {
    padding: 88px 0 96px;
    background: linear-gradient(180deg, #0b1220 0%, #111b30 100%);
    color: #e2e8f0;
    position: relative;
    overflow: hidden;
}
.pilot-works::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 18% 30%, rgba(37, 211, 102, .12) 0%, transparent 45%),
        radial-gradient(circle at 82% 70%, rgba(99, 102, 241, .14) 0%, transparent 45%);
    pointer-events: none;
}
.pilot-works > .container { position: relative; z-index: 1; }
.pilot-works .section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.pilot-works .eyebrow {
    display: inline-block;
    background: rgba(37, 211, 102, .12);
    color: #6ee7b7;
    border: 1px solid rgba(110, 231, 183, .3);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.pilot-works h2 {
    font: 800 clamp(1.7rem, 3.4vw, 2.5rem)/1.22 "Inter Tight", sans-serif;
    color: #fff;
    margin: 0 0 14px;
}
[dir="rtl"] .pilot-works h2 { font-family: "Tajawal", "IBM Plex Sans Arabic", sans-serif; line-height: 1.5; }
.pilot-works .section-head p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0;
}

.pilot-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 48px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    counter-reset: pilot;
    position: relative;
}
.pilot-steps::before {
    content: "";
    position: absolute;
    top: 38px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(110, 231, 183, .25) 12%, rgba(110, 231, 183, .25) 88%, transparent 100%);
    z-index: 0;
}
[dir="rtl"] .pilot-steps::before { left: 8%; right: 8%; }

.pilot-step {
    background: rgba(15, 23, 42, .65);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 16px;
    padding: 24px 22px 26px;
    position: relative;
    backdrop-filter: blur(8px);
    transition: transform .25s, border-color .25s, background .25s;
    opacity: 0;
    transform: translateY(18px);
    animation: pilotIn .55s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: calc(var(--i, 0) * 110ms + 50ms);
}
.pilot-step:hover {
    transform: translateY(-4px);
    border-color: rgba(110, 231, 183, .45);
    background: rgba(15, 23, 42, .85);
}
@keyframes pilotIn { to { opacity: 1; transform: translateY(0); } }

.pilot-step-num {
    display: inline-block;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #fff;
    font: 700 0.78rem/1 "JetBrains Mono", monospace;
    letter-spacing: 0.03em;
    padding: 7px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.pilot-step-title {
    font: 700 1.18rem/1.3 "Inter Tight", sans-serif;
    color: #fff;
    margin: 0 0 10px;
}
[dir="rtl"] .pilot-step-title { font-family: "Tajawal", "IBM Plex Sans Arabic", sans-serif; }
.pilot-step-body {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.pilot-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.pilot-cta .btn-primary {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-color: #128C7E;
    color: #fff !important;
    box-shadow: 0 10px 28px -8px rgba(18, 140, 126, .65);
}
.pilot-cta .btn-primary:hover {
    background: linear-gradient(135deg, #20bf5a 0%, #0f7a6e 100%);
    transform: translateY(-2px);
}
.pilot-cta .link-arrow {
    color: #93c5fd;
    text-decoration: none;
    font-weight: 600;
}
.pilot-cta .link-arrow:hover { color: #fff; text-decoration: underline; }

.pilot-foot {
    margin-top: 28px;
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.6;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 920px) {
    .pilot-steps { grid-template-columns: repeat(2, 1fr); }
    .pilot-steps::before { display: none; }
}
@media (max-width: 560px) {
    .pilot-works { padding: 64px 0 72px; }
    .pilot-steps { grid-template-columns: 1fr; gap: 14px; }
    .hero-proof { font-size: 0.85rem; padding: 7px 13px; }
}

/* ═══════════════════════════════════════════════════════════════
   DAY-2 PILOT FUNNEL — case study page, pricing pilot banner,
   form-hint tweaks. Append-only; no overrides of existing rules.
   ═══════════════════════════════════════════════════════════════ */

/* ── form: required-field marker + hint copy ─────────────────── */
.field-req { color:#e7493c; font-weight:700; margin-inline-start:4px; }
.field-hint {
    margin:6px 0 0;
    font-size:12.5px;
    color:#6b7585;
    line-height:1.45;
}
.book-row--single { grid-template-columns:1fr; }

/* ── pricing-pilot-hero (above-the-fold pilot offer) ─────────── */
.pricing-pilot-hero {
    padding:48px 0 24px;
    background:linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}
.ppilot-card {
    position:relative;
    max-width:980px;
    margin:0 auto;
    padding:38px 36px 32px;
    border-radius:20px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(27,180,92,.10), transparent 55%),
        radial-gradient(140% 160% at 100% 100%, rgba(39,65,136,.10), transparent 55%),
        #ffffff;
    border:1px solid rgba(39,65,136,.12);
    box-shadow:0 30px 80px -40px rgba(20,30,60,.20), 0 2px 6px rgba(20,30,60,.04);
}
.ppilot-pin {
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    background:linear-gradient(135deg, #1bb45c, #0f8a44);
    color:#fff;
    margin-bottom:14px;
    letter-spacing:.2px;
}
.ppilot-h1 {
    font-family:'Inter Tight', system-ui, sans-serif;
    font-size:clamp(28px, 4.2vw, 42px);
    line-height:1.15;
    font-weight:800;
    color:#0f1730;
    margin:0 0 14px;
    letter-spacing:-.02em;
}
.ppilot-sub {
    font-size:17px;
    line-height:1.6;
    color:#445065;
    margin:0 0 22px;
    max-width:780px;
}
.ppilot-sub strong { color:#0f1730; font-weight:700; }
.ppilot-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px 16px;
    align-items:center;
}
.ppilot-skip {
    margin-inline-start:auto;
    font-size:14px;
    color:#6b7585;
    text-decoration:none;
    font-weight:500;
}
.ppilot-skip:hover { color:#274188; text-decoration:underline; }
@media (max-width:640px) {
    .ppilot-card { padding:28px 22px 26px; }
    .ppilot-skip { margin-inline-start:0; width:100%; padding-top:4px; }
}

/* ═══════════════════════════════════════════════════════════════
   CASE STUDY PAGE
   ═══════════════════════════════════════════════════════════════ */

.page-case { background:#fbfcfe; }
.case .container { max-width:1180px; }
.case-narrow { max-width:780px; }

/* hero */
.case-hero {
    padding:56px 0 36px;
    background:linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
    border-bottom:1px solid rgba(39,65,136,.08);
}
.g-back {
    display:inline-block;
    font-size:14px;
    color:#6b7585;
    text-decoration:none;
    margin-bottom:18px;
    font-weight:500;
}
.g-back:hover { color:#274188; }
.case-eyebrow {
    display:inline-block;
    padding:5px 11px;
    border-radius:999px;
    background:rgba(27,180,92,.10);
    color:#0f8a44;
    font-size:12px;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
    margin-bottom:18px;
}
.case-title {
    font-family:'Inter Tight', system-ui, sans-serif;
    font-size:clamp(30px, 4.6vw, 48px);
    line-height:1.12;
    font-weight:800;
    color:#0f1730;
    margin:0 0 16px;
    max-width:1000px;
    letter-spacing:-.025em;
}
.case-num {
    background:linear-gradient(135deg, #1bb45c 0%, #0f8a44 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-feature-settings:'tnum' 1;
    white-space:nowrap;
}
.case-sub {
    font-size:17px;
    line-height:1.65;
    color:#445065;
    max-width:780px;
    margin:0 0 32px;
}

/* stats row */
.case-stats {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
    margin-top:28px;
}
.case-stat {
    padding:18px 18px 16px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid rgba(39,65,136,.10);
    box-shadow:0 8px 24px -16px rgba(20,30,60,.15);
}
.case-stat-value {
    font-family:'Inter Tight', system-ui, sans-serif;
    font-size:26px;
    font-weight:800;
    color:#0f1730;
    line-height:1;
    margin-bottom:6px;
    letter-spacing:-.015em;
}
.case-stat-value small {
    font-size:13px;
    font-weight:600;
    color:#6b7585;
    margin-inline-start:3px;
}
.case-stat-label {
    font-size:13px;
    color:#6b7585;
    line-height:1.4;
}
@media (max-width:760px) {
    .case-stats { grid-template-columns:repeat(2, 1fr); }
}

/* narrative sections */
.case-section { padding:56px 0; }
.case-section--alt { background:#f7fbff; }
.case-section h2 {
    font-family:'Inter Tight', system-ui, sans-serif;
    font-size:clamp(22px, 2.8vw, 30px);
    line-height:1.25;
    font-weight:800;
    color:#0f1730;
    margin:8px 0 20px;
    letter-spacing:-.015em;
}
.case-section p {
    font-size:16.5px;
    line-height:1.75;
    color:#3a455a;
    margin:0 0 16px;
}
.case-section p em { color:#274188; font-style:normal; font-weight:600; }
.case-section p strong { color:#0f1730; }
.case-section-tag {
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:.6px;
    color:#274188;
    text-transform:uppercase;
    margin-bottom:6px;
}
.case-h3 {
    font-family:'Inter Tight', system-ui, sans-serif;
    font-size:20px;
    font-weight:700;
    color:#0f1730;
    margin:32px 0 16px;
}

/* quote */
.case-quote {
    margin:24px 0;
    padding:22px 26px;
    border-inline-start:4px solid #1bb45c;
    background:#ffffff;
    border-radius:0 12px 12px 0;
    box-shadow:0 6px 20px -12px rgba(20,30,60,.12);
}
[dir="rtl"] .case-quote { border-radius:12px 0 0 12px; }
.case-quote p {
    font-family:'Instrument Serif', Georgia, serif;
    font-size:21px;
    line-height:1.45;
    color:#0f1730;
    margin:0 0 8px;
    font-style:italic;
}
[dir="rtl"] .case-quote p { font-family:'Tajawal','IBM Plex Sans Arabic',sans-serif; font-style:normal; }
.case-quote footer {
    font-size:13.5px;
    color:#6b7585;
    font-weight:500;
}

/* timeline table */
.case-timeline {
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    margin:18px 0 8px;
    border:1px solid rgba(39,65,136,.12);
    border-radius:12px;
    overflow:hidden;
    font-size:15px;
    background:#fff;
}
.case-timeline thead th {
    text-align:start;
    padding:12px 16px;
    background:#f4f8ff;
    font-weight:700;
    color:#0f1730;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.4px;
    border-bottom:1px solid rgba(39,65,136,.12);
}
.case-timeline tbody td {
    padding:14px 16px;
    border-bottom:1px solid rgba(39,65,136,.06);
    color:#3a455a;
}
.case-timeline tbody tr:last-child td { border-bottom:none; }
.case-timeline tbody tr:last-child td:nth-child(2) { color:#0f8a44; font-weight:700; }
.case-tl-fc {
    font-family:'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-weight:600;
    color:#274188;
}

/* breakdown list */
.case-breakdown {
    list-style:none;
    padding:0;
    margin:18px 0 0;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.case-breakdown li {
    display:grid;
    grid-template-columns:90px 1fr;
    gap:18px;
    padding:18px 20px;
    border:1px solid rgba(39,65,136,.10);
    border-radius:12px;
    background:#fff;
    align-items:start;
}
.case-breakdown-val {
    font-family:'Inter Tight', system-ui, sans-serif;
    font-size:22px;
    font-weight:800;
    color:#0f8a44;
    line-height:1.1;
    letter-spacing:-.01em;
}
.case-breakdown li strong {
    display:block;
    font-size:16px;
    color:#0f1730;
    margin-bottom:4px;
    font-weight:700;
}
.case-breakdown li p {
    font-size:14.5px;
    line-height:1.6;
    color:#445065;
    margin:0;
}
@media (max-width:560px) {
    .case-breakdown li { grid-template-columns:1fr; gap:6px; }
}

/* anonymity block */
.case-anon {
    padding:22px 26px;
    border-radius:14px;
    background:#fff;
    border:1px dashed rgba(39,65,136,.25);
}
.case-anon h3 {
    margin:0 0 10px;
    font-family:'Inter Tight', system-ui, sans-serif;
    font-size:17px;
    font-weight:700;
    color:#0f1730;
}
.case-anon p {
    margin:0;
    font-size:14.5px;
    line-height:1.65;
    color:#445065;
}

/* CTA section */
.case-cta-section {
    padding:64px 0 88px;
    background:linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
}
.case-cta-card {
    max-width:760px;
    margin:0 auto;
    padding:42px 36px;
    border-radius:20px;
    text-align:center;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(27,180,92,.12), transparent 55%),
        radial-gradient(140% 160% at 100% 100%, rgba(39,65,136,.10), transparent 55%),
        #ffffff;
    border:1px solid rgba(39,65,136,.10);
    box-shadow:0 30px 80px -40px rgba(20,30,60,.20);
}
.case-cta-card h2 {
    font-family:'Inter Tight', system-ui, sans-serif;
    font-size:clamp(22px, 2.8vw, 30px);
    font-weight:800;
    color:#0f1730;
    margin:0 0 12px;
    letter-spacing:-.015em;
    line-height:1.2;
}
.case-cta-card p {
    font-size:16px;
    color:#445065;
    line-height:1.65;
    margin:0 0 24px;
}
.case-cta-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:14px 22px;
}
.case-cta-actions .link-arrow {
    color:#274188;
    font-weight:600;
    text-decoration:none;
    font-size:15px;
}
.case-cta-actions .link-arrow:hover { text-decoration:underline; }
@media (max-width:560px) {
    .case-cta-card { padding:30px 22px; }
}


/* ============================================================
   v2.11.0 — Conversion/UX polish (May 2026)
   - Section rhythm (alternating backgrounds)
   - Stagger reveals
   - Hero CTA hierarchy refinement
   - Pain-card gold hover accent
   - RTL line-height polish
   - Lang-toggle visibility
   - ROI email-capture card
   - Mobile sticky-CTA / wa-float coexistence
   ============================================================ */

/* ---- #11 Section rhythm: alternate light surfaces ---- */
.logos      { background: var(--surface-alt, #fafbfc); }
.money      { background: linear-gradient(180deg, #fff 0%, #fafbfc 100%); }
.tools      { background: var(--surface-alt, #fafbfc); }
.guarantee  { background: linear-gradient(180deg, #fafbfc 0%, #fff 100%); }
.faq        { background: var(--surface-alt, #fafbfc); }

/* ---- #12 Stagger reveals for grid children ---- */
.pain-grid > .pain-card.reveal,
.final-paths > .path.reveal,
.faq-list > .faq-item.reveal { transition-delay: 0ms; }
.pain-grid > .pain-card:nth-child(1).reveal,
.final-paths > .path:nth-child(1).reveal,
.faq-list > .faq-item:nth-child(1).reveal { transition-delay: 0ms; }
.pain-grid > .pain-card:nth-child(2).reveal,
.final-paths > .path:nth-child(2).reveal,
.faq-list > .faq-item:nth-child(2).reveal { transition-delay: 70ms; }

/* ─────────────────────────────────────────────────────────────
   .rrc-tip — credibility tooltip for ROI result info buttons
   (driven by JS in public/roi-calculator.php)
   ───────────────────────────────────────────────────────────── */
.rrc-tip {
    position: fixed;
    z-index: 1000;
    width: min(340px, calc(100vw - 24px));
    background: #fff;
    color: var(--n-800, #1f2937);
    border: 1px solid var(--n-200, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 24px 60px -12px rgba(15,23,42,.28), 0 8px 20px -8px rgba(15,23,42,.12);
    padding: 16px 18px 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(.98);
    transform-origin: top center;
    transition: opacity .18s ease, transform .22s cubic-bezier(.34,1.4,.64,1), visibility .18s;
    pointer-events: none;
    font: 400 .9rem/1.5 'Inter', system-ui, sans-serif;
}
.rrc-tip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.rrc-tip::before {
    content: '';
    position: absolute;
    left: var(--arrow-x, 50%);
    width: 14px; height: 14px;
    background: #fff;
    border: 1px solid var(--n-200, #e5e7eb);
    transform: translateX(-50%) rotate(45deg);
}
.rrc-tip[data-pos="top"]::before    { bottom: -8px; border-top: none;    border-left: none;  }
.rrc-tip[data-pos="bottom"]::before { top: -8px;    border-bottom: none; border-right: none; }
.rrc-tip-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.rrc-tip-badge {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500, #4f6bd1), var(--brand-700, #274188));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font: 800 .85rem 'Inter Tight', sans-serif;
    box-shadow: 0 4px 10px rgba(39,65,136,.3);
}
.rrc-tip-title {
    font: 700 .95rem/1.3 'Inter Tight', sans-serif;
    color: var(--n-900, #0f172a);
    margin: 0;
}
.rrc-tip-body {
    color: var(--n-700, #374151);
    font-size: .88rem;
    line-height: 1.55;
    margin: 0 0 10px;
}
.rrc-tip-cite {
    display: flex; align-items: center; gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--n-200, #e5e7eb);
    font-size: .76rem;
    color: var(--n-600, #4b5563);
}
.rrc-tip-cite::before {
    content: '\2713'; /* check */
    flex: 0 0 auto;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #059669;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 800;
}
.rrc-tip-cite a {
    color: var(--brand-700, #274188);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dotted currentColor;
}
.rrc-tip-cite a:hover { color: var(--brand-500, #4f6bd1); }
[dir="rtl"] .rrc-tip { font-family: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif; }
[dir="rtl"] .rrc-tip-title { font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif; }
@media (max-width: 480px) {
    .rrc-tip { padding: 14px 16px 12px; }
}

.pain-grid > .pain-card:nth-child(3).reveal,
.final-paths > .path:nth-child(3).reveal,
.faq-list > .faq-item:nth-child(3).reveal { transition-delay: 140ms; }
.pain-grid > .pain-card:nth-child(4).reveal,
.faq-list > .faq-item:nth-child(4).reveal { transition-delay: 210ms; }
.pain-grid > .pain-card:nth-child(5).reveal,
.faq-list > .faq-item:nth-child(5).reveal { transition-delay: 280ms; }
.pain-grid > .pain-card:nth-child(6).reveal,
.faq-list > .faq-item:nth-child(6).reveal { transition-delay: 350ms; }
.faq-list > .faq-item:nth-child(n+7).reveal { transition-delay: 420ms; }
@media (prefers-reduced-motion: reduce) {
    .pain-grid > .pain-card.reveal, .final-paths > .path.reveal, .faq-list > .faq-item.reveal { transition-delay: 0ms !important; }
}

/* ---- #4 Hero CTA hierarchy: single primary, ghost secondary, plain-text WA link ---- */
.hero-cta-secondary {
    flex-direction: column;
    gap: 0;
    --btn-h: 64px;
    padding-inline: 24px;
    padding-block: 10px;
    font-weight: 600;
}
.hero-cta-wa-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: #128c4f;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 4px;
    border-radius: 8px;
    transition: color var(--dur-2);
    flex-basis: 100%;
}
.hero-cta-wa-link:hover { color: #0f6a3c; }
.hero-cta-wa-link svg { flex-shrink: 0; }
@media (min-width: 700px) {
    .hero-cta-wa-link { flex-basis: auto; margin-inline-start: 4px; }
}

/* ---- #15 Pain card hover: gold accent ---- */
.pain-card { transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2); }
.pain-card:hover {
    border-color: var(--gold, #f5b400);
    box-shadow: 0 14px 32px -10px rgba(245, 180, 0, 0.30), var(--shadow);
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
}
.pain-card:hover .illus { border-color: var(--gold, #f5b400) !important; box-shadow: 0 0 0 4px rgba(245, 180, 0, 0.12); }

/* ---- #16 Arabic RTL: looser line-height + tracking ---- */
[dir="rtl"] body { line-height: 1.65; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.3; }
[dir="rtl"] .eyebrow { letter-spacing: 0; font-weight: 700; }
[dir="rtl"] .lede, [dir="rtl"] p { line-height: 1.75; }
[dir="rtl"] .btn, [dir="rtl"] .btn-cta-sm { letter-spacing: 0; }
[dir="rtl"] .hero-trust .item { font-size: 0.95rem; line-height: 1.6; }

/* ---- #19 Lang toggle visibility ---- */
.lang-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    height: 38px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-700);
    background: var(--brand-50, #eef2fb);
    border: 1px solid var(--brand-200, #cdd6ed);
}
.lang-toggle .lang-globe { opacity: .85; }
.lang-toggle .lang-toggle-full { display: none; }
.lang-toggle:hover { background: var(--brand-100, #dfe6f5); border-color: var(--brand-400); color: var(--brand-800); }
@media (min-width: 720px) {
    .lang-toggle .lang-toggle-full { display: inline; }
}

/* ---- #14 ROI email-gated PDF card ---- */
.roi-email-card {
    margin-top: 18px;
    padding: 18px 18px 16px;
    border: 1px dashed var(--brand-300, #b3c0e0);
    border-radius: var(--r-lg, 12px);
    background: linear-gradient(180deg, rgba(39,65,136,0.04) 0%, rgba(39,65,136,0.01) 100%);
}
.roi-email-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.roi-email-ico {
    width: 32px; height: 32px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-600); color: #fff; border-radius: 8px; font-size: 1.05rem;
}
.roi-email-head strong { display: block; font-size: 0.98rem; color: #fff !important; line-height: 1.3; }
.roi-email-head span { display: block; font-size: 0.84rem; color: var(--text-mute); margin-top: 2px; }
#roiEmailForm { display: flex; gap: 8px; flex-wrap: wrap; }
#roiEmailForm input[type=email] {
    flex: 1 1 200px;
    height: 44px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 9px;
    font-size: 0.95rem; background: #fff;
    transition: border-color var(--dur-2);
}
#roiEmailForm input[type=email]:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(39,65,136,0.15); }
#roiEmailForm button {
    height: 44px; padding: 0 20px;
    background: var(--brand-500); color: #fff;
    border: 0; border-radius: 9px;
    font-weight: 600; font-size: 0.92rem;
    cursor: pointer;
    transition: background var(--dur-2), transform var(--dur-2);
}
#roiEmailForm button:hover { background: var(--brand-500); transform: translateY(-1px); }
#roiEmailForm button:disabled { opacity: .6; cursor: wait; transform: none; }
.roi-email-foot { margin: 10px 0 0; font-size: 0.78rem; color: var(--text-mute); }
.roi-email-success { text-align: center; padding: 8px 0; }
.roi-email-success strong { display: block; color: var(--success, #08875d); font-size: 1.05rem; margin-bottom: 4px; }
.roi-email-success p { margin: 0; font-size: 0.9rem; color: var(--text-mute); }

/* ---- Optional-field marker (book-demo) ---- */
.field .opt { font-size: 0.78rem; color: var(--text-mute); font-weight: 500; margin-inline-start: 4px; }

/* ---- Mobile: don't stack wa-float + sticky-cta ---- */
@media (max-width: 600px) {
    .sticky-cta.show ~ .wa-float,
    body:has(.sticky-cta.show) .wa-float { opacity: 0; pointer-events: none; transition: opacity var(--dur-2); }
    .wa-float { bottom: 84px; }   /* fallback lift so it never overlaps the bar */
}

/* ============================================================================
   v2.12.0 — Pricing page: annual-only billing polish (2026-05)
   ============================================================================ */

/* Old monthly/annual toggle no longer used — hide defensively */
.billing-toggle { display:none !important; }

/* Centred billing-note pill (replaces toggle) */
.billing-note {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px;
    max-width:780px;
    margin:0 auto 36px;
    padding:14px 22px;
    background:linear-gradient(135deg, rgba(39,65,136,.06), rgba(27,180,92,.07));
    border:1px solid rgba(39,65,136,.14);
    border-radius:14px;
    font-size:14px;
    color:#1a2547;
    text-align:center;
    line-height:1.55;
}
.billing-note::before {
    content:"✓";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#1bb45c;
    color:#fff;
    font-size:13px;
    font-weight:800;
    flex-shrink:0;
}
.billing-note strong { color:#0f1730; font-weight:700; }
[dir="rtl"] .billing-note { text-align:center; }

/* Save pill next to strike-through was-price */
.ptier-was {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
    flex-wrap:wrap;
}
.ptier-strike {
    color:#8a93ad;
    text-decoration:line-through;
    font-size:15px;
    font-weight:600;
}
.ptier-save-pill {
    display:inline-block;
    padding:3px 10px;
    background:#fff4d6;
    color:#8a5a00;
    border:1px solid #f0d480;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.2px;
    white-space:nowrap;
}

/* Annual total line under main price */
.ptier-billed {
    font-size:12.5px;
    color:#5a6685;
    margin:4px 0 0;
    line-height:1.45;
    font-weight:500;
}
.ptier-billed strong { color:#0f1730; font-weight:700; }

/* Risk-reversal chip strip below CTA */
.ptier-risk {
    list-style:none;
    margin:14px 0 0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;
    justify-content:center;
}
.ptier-risk li {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:12px;
    font-weight:600;
    color:#274188;
    background:rgba(39,65,136,.06);
    padding:5px 10px;
    border-radius:999px;
    line-height:1.3;
    white-space:nowrap;
}
.ptier-risk .rchk {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#1bb45c;
    color:#fff;
    font-size:9px;
    font-weight:800;
    flex-shrink:0;
}

/* Annual total line under outlet slider */
.ptier-outlets-year {
    margin-top:6px;
    font-size:12.5px;
    color:#5a6685;
    font-style:italic;
    text-align:center;
}

/* Featured (dark) plan card overrides for readability */
.ptier.is-featured .ptier-billed,
.ptier.is-featured .ptier-outlets-year { color:rgba(255,255,255,.78); }
.ptier.is-featured .ptier-billed strong { color:#fff; }
.ptier.is-featured .ptier-strike { color:rgba(255,255,255,.55); }
.ptier.is-featured .ptier-save-pill {
    background:rgba(255, 220, 100, .22);
    color:#ffe9a8;
    border-color:rgba(255, 220, 100, .42);
}
.ptier.is-featured .ptier-risk li {
    background:rgba(255,255,255,.10);
    color:rgba(255,255,255,.92);
}

/* Mobile tightening */
@media (max-width: 600px) {
    .billing-note { font-size:13px; padding:12px 16px; margin-bottom:24px; }
    .ptier-risk { gap:5px 7px; }
    .ptier-risk li { font-size:11.5px; padding:4px 8px; }
    .ptier-save-pill { font-size:11px; padding:2px 8px; }
}


/* =====================================================================
   Home-page polish patches (added 2026-05-24)
   ===================================================================== */

/* ---------- Free tools cards: chunkier, well-padded CTA buttons ------ */
.tool-card .btn,
.path .btn {
    height: auto;
    min-height: 52px;
    padding-block: 14px;
    padding-inline: 24px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    align-self: stretch;
}
.path .btn-lg { min-height: 56px; padding-block: 16px; }
.tool-card.featured .btn-primary,
.tool-card .btn-ghost {
    font-weight: 700;
}
/* Subtle hover lift on the CTA itself inside the card link */
.tool-card .btn-ghost:hover { background: var(--brand-50); border-color: var(--brand-300); }
.tool-card.featured .btn-primary:hover { transform: translateY(-1px); }

/* ---------- Testimonials: mobile collapse (4 + show more) ------------ */
@media (max-width: 640px) {
    .micro-testimonials > .micro-testimonial:nth-child(n+5) { display: none; }
    .micro-testimonials.is-expanded > .micro-testimonial:nth-child(n+5) { display: flex; }
    .testimonials-more-wrap { display: flex; justify-content: center; margin-top: 18px; }
    .testimonials-more {
        appearance: none;
        background: var(--surface);
        border: 1px solid var(--border-strong);
        color: var(--text-strong);
        font-family: 'Inter Tight', sans-serif;
        font-weight: 600;
        font-size: 0.92rem;
        padding: 10px 18px;
        border-radius: 999px;
        cursor: pointer;
        transition: all var(--dur-2) var(--ease);
    }
    .testimonials-more:hover { background: var(--brand-50); border-color: var(--brand-400); color: var(--brand-700); }
}
@media (min-width: 641px) { .testimonials-more-wrap { display: none; } }

/* ---------- ROI: lighter email-card heading + WA CTA alignment ------- */
.roi-email-head strong {
    color: var(--brand-700) !important;
    font-weight: 700;
}

#roiWaCta {
    height: auto;
    min-height: 56px;
    padding: 14px 22px;
    white-space: normal;       /* allow wrap on narrow mobile */
    text-align: center;
    line-height: 1.3;
    align-items: center;       /* keep SVG vertically centred when text wraps */
    flex-wrap: nowrap;
}
#roiWaCta svg {
    flex-shrink: 0;
    align-self: center;
    float: left;
}

/* =====================================================================
   §MOBILE POLISH — iPhone 13-class viewports (added 2026-05-24)
   Goal: kill horizontal scroll, tighten vertical rhythm, scale hero,
         full-width CTAs, stack floating UI, never let rotated/absolute
         elements push past the viewport edge.
   ===================================================================== */

/* Hard guard: nothing can cause horizontal scroll, including off-canvas
   decorative elements or 3D-rotated dashboards. */
html, body { max-width: 100%; overflow-x: clip; }
.hero-stage, .dashboard-mock, .hero-visual { max-width: 100%; }

/* Decorative floating badge on hero dashboard — keep inside the card on
   small screens (was inset-inline-end: -24px, overflowing the viewport). */
@media (max-width: 960px) {
    .dashboard-mock::after { inset-inline-end: 8px; top: -16px; }
}

/* ----- ≤ 640px : phones (iPhone SE → 13 Pro Max portrait) -------- */
@media (max-width: 640px) {
    :root { --gutter: 18px; }

    section { padding: clamp(48px, 12vw, 72px) 0; }
    .section-head { margin-bottom: 2.4rem; max-width: 100%; }
    .section-head h2 { font-size: clamp(1.75rem, 7.4vw, 2.25rem); }
    .section-head p  { font-size: 1rem; line-height: 1.55; }

    /* Urgency strip */
    .urgency { font-size: 0.78rem; padding: 9px 14px; line-height: 1.4; }
    .urgency a { margin-inline-start: 6px; }

    /* Header */
    .site-header { padding: 10px 0; }
    .brand img { height: 28px; }
    .header-actions { gap: 8px; }
    .lang-toggle { padding: 6px 10px; font-size: 0.78rem; }
    .btn-cta-sm { height: 36px; padding-inline: 12px; font-size: 0.82rem; }

    /* HERO ------------------------------------------------------- */
    .hero { padding: 36px 0 56px; }
    .hero h1 {
        font-size: clamp(1.95rem, 9vw, 2.6rem);
        line-height: 1.1;
        letter-spacing: -0.03em;
        max-width: none;
    }
    [dir="rtl"] .hero h1 { line-height: 1.22; max-width: none; }
    .hero h1 .sub-line { font-size: 0.58em; margin-top: 0.5em; }
    .hero .lede { font-size: 1rem; margin-bottom: 1.5rem; }

    .hero-cta { gap: 12px; margin-bottom: 1.75rem; }
    .hero-cta .btn { width: 100%; }
    .hero-cta-primary { --btn-h: 60px; padding-block: 8px; padding-inline: 18px; }
    .hero-cta-primary span:first-child { font-size: 0.98rem; }
    .hero-cta-wa-link { width: 100%; justify-content: center; }

    .hero-trust { gap: 10px 16px; padding-top: 1.2rem; grid-template-columns: 1fr; }
    .hero-trust .item { font-size: 0.88rem; }

    /* HERO dashboard mockup ------------------------------------- */
    .hero-visual { padding-top: 22px; }
    .dashboard-mock { padding: 16px; border-radius: 18px; }
    .dashboard-mock::after {
        top: -14px;
        font-size: 0.74rem;
        padding: 7px 11px;
    }
    .hero-toast {
        top: -8px;
        inset-inline-start: 4px;
        padding: 8px 11px;
        min-width: 0;
        max-width: calc(100% - 8px);
    }
    .hero-toast .toast-title { font-size: 0.78rem; }
    .hero-toast .toast-meta  { font-size: 0.68rem; }

    .kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .kpi-row .kpi:nth-child(3) { grid-column: span 2; }
    .dashboard-mock .kpi { padding: 10px 12px; }
    .dashboard-mock .kpi .v { font-size: 1.18rem; }
    .dashboard-mock .chart-bars { height: 78px; gap: 6px; }

    /* Logos marquee — slow down a touch so single logos read */
    .logos { padding: 40px 0 24px; }
    .logos h3 { font-size: 0.74rem; margin-bottom: 18px; }
    .logos .marquee-track .logo { height: 44px; }
    .logos .marquee-track .logo img { max-width: 140px; }

    /* Money card ------------------------------------------------ */
    .money-card { padding: 24px 18px; border-radius: var(--r-lg); }
    .money-card h3 { font-size: 1.15rem; margin-bottom: 1.2rem; }
    .money-row { padding: 11px 0; gap: 10px; }
    .money-row .label { font-size: 0.88rem; line-height: 1.35; }
    .money-row .value { font-size: 0.92rem; }
    .money-total { font-size: 1rem; padding-top: 18px; margin-top: 18px; }
    .money-total .value { font-size: 1.35rem; }
    .money-annual { font-size: 0.92rem; }

    /* Pain wall counter */
    .pain-counter { font-size: 0.94rem; padding: 14px 18px; }

    /* ROI card -------------------------------------------------- */
    .roi { padding: 48px 0 56px; }
    .roi-card { border-radius: var(--r-xl); }
    .roi-inputs, .roi-result-inner { padding: 22px 18px; }
    .roi-leak-num { font-size: clamp(2.4rem, 11vw, 3.2rem); }
    .roi-trust-row { gap: 10px 14px; font-size: 0.72rem; }

    /* Tools / paths / cases -------------------------------------- */
    .tool-card, .path { padding: 24px 20px; }
    .path h3 { font-size: 1.25rem; }

    .case .head { padding: 20px 20px 14px; }
    .case .stars, .case h3, .case .city { margin-inline: 20px; }
    .case .ba { padding: 14px 20px; }
    .case blockquote.quote { padding: 16px 20px 4px; font-size: 1rem; }
    .case .author { padding: 0 20px 20px; }

    /* Benchmark */
    .benchmark { padding: 56px 0; }
    .bench-card { padding: 22px 20px; }
    .bench-metric { font-size: 1.55rem; }

    /* Final paths */
    .final-paths { gap: 28px; }

    /* Guarantee — already had its own ≤720 block, just polish text */
    .guarantee-card .body { font-size: 0.98rem; }
    .guarantee-card .note { font-size: 0.88rem; }

    /* FAQ */
    .faq-list summary { padding: 16px 18px; font-size: 0.97rem; gap: 12px; }
    .faq-list .a { padding: 0 18px 18px; font-size: 0.93rem; }

    /* Footer */
    .site-footer { padding: 60px 0 26px; margin-top: 56px; }
    .footer-grid { gap: 28px; margin-bottom: 36px; }
    .footer-bar { font-size: 0.78rem; gap: 10px; }

    /* Sticky CTA + WhatsApp float ------------------------------- */
    .wa-float {
        width: 52px; height: 52px;
        bottom: 18px; inset-inline-end: 16px;
        box-shadow: 0 8px 22px rgba(37, 211, 102, .42);
        transition: bottom var(--dur-3) var(--ease);
    }
    /* Modern Safari/Chrome: lift the WA float above sticky-cta when shown */
    body:has(.sticky-cta.show) .wa-float { bottom: 84px; }
    .sticky-cta { padding: 10px 14px; gap: 8px; }
    .sticky-cta .actions { gap: 8px; width: 100%; }
    .sticky-cta .actions .btn { flex: 1; height: 44px; font-size: 0.9rem; padding-inline: 12px; }
}

/* ----- ≤ 380px : iPhone SE / mini-class ------------------------- */
@media (max-width: 380px) {
    :root { --gutter: 14px; }
    .hero h1 { font-size: clamp(1.7rem, 9vw, 2rem); }
    .hero-cta-primary { --btn-h: 56px; }
    .hero-cta-primary .sub-label { font-size: 0.7rem; }
    .kpi-row { grid-template-columns: 1fr; }
    .kpi-row .kpi:nth-child(3) { grid-column: auto; }
    .dashboard-mock::after { display: none; }
    .hero-toast { display: none; }
    .money-row { flex-wrap: wrap; }
    .money-row .label { flex: 1 0 60%; }
}

/* Fallback for browsers without :has() — keep wa-float reachable even
   when sticky CTA is shown. */
@supports not selector(:has(*)) {
    @media (max-width: 640px) {
        .wa-float { bottom: 84px; }
    }
}

.roi-email-head-text strong, .roi-email-head-text span, .roi-gate h3{
    color: #FFFFFF !important;
}

.roi-email-head-text strong::selection{
    color: #FFFFFF !important;
}

.roi-email-foot, .roi-email-foot::selection{
    color: #FFFFFF !important;
}

.rg-success h4{
    color: #FFFFFF !important;
}

.rg-error-banner-text{
    color: #000000 !important;
}
/* ─────────────────────────────────────────────────────────────
   VARIANT B (index-b.php) — Pain+Money merged "cost reveal"
   Single big-number block after pain grid, replaces full
   .money-card row breakdown for tighter scroll.
   ─────────────────────────────────────────────────────────── */
.pain-money .cost-reveal {
    margin: 48px auto 0;
    max-width: 760px;
    padding: 36px 28px;
    text-align: center;
    background: linear-gradient(180deg, rgba(180, 28, 14, 0.04) 0%, rgba(180, 28, 14, 0.08) 100%);
    border: 1px solid rgba(180, 28, 14, 0.18);
    border-radius: var(--r-lg, 18px);
}
.pain-money .cost-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--danger, #b41c0e);
    margin: 0 0 12px;
}
.pain-money .cost-headline {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: clamp(1.25rem, 2.4vw, 1.65rem);
    font-weight: 700;
    color: var(--text, #0e1426);
    margin: 0 0 18px;
    line-height: 1.25;
}
.pain-money .cost-big {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4ch;
    flex-wrap: wrap;
    margin: 0 0 14px;
}
.pain-money .cost-num {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: clamp(2.6rem, 7vw, 4.5rem);
    font-weight: 800;
    color: var(--danger, #b41c0e);
    line-height: 1;
    letter-spacing: -0.02em;
}
.pain-money .cost-curr {
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 700;
    color: var(--danger, #b41c0e);
}
.pain-money .cost-per {
    font-size: 1rem;
    color: var(--text-mute, #5a6480);
    font-weight: 500;
}
.pain-money .cost-caption {
    color: var(--text-mute, #5a6480);
    font-size: 0.95rem;
    margin: 0 0 24px;
}
.pain-money .pain-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}
.pain-money .pain-cta .hero-cta-wa-link {
    font-size: 0.92rem;
}

/* Variant B trust block: guarantee card sitting under demo video */
.demo-trust .guarantee-card {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 640px) {
    .pain-money .cost-reveal { padding: 28px 20px; margin-top: 36px; }
    .pain-money .cost-headline { font-size: 1.1rem; }
}
.btn-wa svg{
    float: left;
    margin-right: 10px;
}