/* ================================================================
 * /start (paid_ad_landing_page_start) — self-contained stylesheet
 *
 * All class names are `ad-*` prefixed to avoid collision with the
 * shared landing.css + mz-v2.css that mz_landing already loads.
 * Base tokens (colors, fonts) inherit from mz-v2.css where possible;
 * page-local overrides live here.
 * ================================================================ */

/* ------------------------------------------------------------------
 * Inter self-host (variable font). Layout mz_landing still loads
 * Google Fonts CSS; because these @font-face declarations arrive
 * later in cascade order and reference the same font-family with a
 * matching unicode-range, browsers on /start resolve Inter from the
 * local woff2 (skipping the fetch to fonts.gstatic.com). Nothing
 * else in the CSS or blade changes; every non-/start page is
 * completely untouched. unicode-range values copied verbatim from
 * Google's own CSS so latin/latin-ext coverage stays byte-for-byte
 * identical (includes TR ğ,ı,ş,ü,ö,ç,İ via latin-ext).
 * ------------------------------------------------------------------ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/web/assets/fonts/inter/Inter-VF-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/web/assets/fonts/inter/Inter-VF-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DM Sans — variable font. unicode-range copied verbatim from Google's
   CSS so cascade behaves identically. */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/web/assets/fonts/dm-sans/DM-Sans-VF-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/web/assets/fonts/dm-sans/DM-Sans-VF-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Plus Jakarta Sans — variable font. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/web/assets/fonts/plus-jakarta-sans/Plus-Jakarta-Sans-VF-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/web/assets/fonts/plus-jakarta-sans/Plus-Jakarta-Sans-VF-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope — variable font. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/web/assets/fonts/manrope/Manrope-VF-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/web/assets/fonts/manrope/Manrope-VF-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tajawal — static font (Google's Google Fonts CSS ships per-weight
   files, not a VF). Six blocks = 3 weights × 2 subsets. Arabic subset
   is what actually renders on /ar/start body/hero — latin here is
   fallback coverage for mixed-script content. */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/web/assets/fonts/tajawal/Tajawal-Regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/web/assets/fonts/tajawal/Tajawal-Regular-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/web/assets/fonts/tajawal/Tajawal-Medium-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/web/assets/fonts/tajawal/Tajawal-Medium-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/web/assets/fonts/tajawal/Tajawal-Bold-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/web/assets/fonts/tajawal/Tajawal-Bold-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Inter Fallback — a system-font (Arial) declared as a synthetic
   'Inter Fallback' family with metric overrides that make its
   x-height, ascent, descent and line-gap match Inter byte-for-byte.
   Purpose: eliminate the layout shift that fires when the real Inter
   woff2 loads and paragraph text re-lays-out with different metrics.
   Values sourced from Malte Ubl's Inter metric override table.
   Chrome 92+/Firefox 89+/Safari 17+ honor these descriptors; older
   browsers ignore them and get vanilla Arial fallback — no regression.
   Only /start uses this cascade; other pages load landing.css only
   and their font stack is untouched. */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    size-adjust: 107.4%;
    ascent-override: 90%;
    descent-override: 22.4%;
    line-gap-override: 0%;
}

:root {
    /* Override landing.css --font / --font-display cascade so 'Inter
       Fallback' sits directly after 'Inter'. Before the real font
       loads, text is painted using Arial with Inter's metrics — swap
       is invisible, no CLS, no LCP re-paint. */
    --font: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
}

:root {
    --ad-bg:          #ffffff;
    --ad-bg-soft:     #f8fafc;
    --ad-ink:         #0f172a;
    --ad-text:        #334155;
    --ad-text-muted:  #475569;
    --ad-text-mute-2: #64748b;
    --ad-line:        #e2e8f0;
    --ad-line-2:      #cbd5e1;
    --ad-indigo:      #4f46e5;
    --ad-indigo-2:    #4338ca;
    --ad-violet:      #7c3aed;
    --ad-blue:        #2563eb;
    --ad-pink:        #ec4899;
    --ad-cyan:        #06b6d4;
    --ad-amber:       #f59e0b;
    --ad-amber-soft:  #fef3c7;
    --ad-success:     #16a34a;
    --ad-radius:      16px;
    --ad-radius-lg:   24px;
    --ad-container:   1140px;
}

/* 'Inter Fallback' sits directly after 'Inter' so text painted before
   the woff2 arrives uses Arial-with-Inter-metrics → font swap causes
   zero layout shift, zero CLS, zero LCP re-paint. See @font-face
   'Inter Fallback' declaration above. */
body { font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
html[lang="ar"] body { font-family: 'Tajawal', 'Inter', 'Inter Fallback', sans-serif; }

.ad-container {
    width: 100%;
    max-width: var(--ad-container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ------------------------------- TOP BAR --------------------------------- */
.ad-landing-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
}
.ad-landing-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.ad-landing-brand img { display: block; height: 24px; width: auto; }

/* ------------------------------- SECTIONS -------------------------------- */
.ad-section        { padding: 72px 0; position: relative; }
.ad-section-alt    { background: var(--ad-bg-soft); }

/* Global helpers */
.ad-lead {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ad-text-muted);
    max-width: 720px;
    margin: 0 auto 26px auto;
}
.ad-micro {
    font-size: 13px;
    color: var(--ad-text-mute-2);
    margin-top: 12px;
}
.ad-eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
    padding: 8px 18px 8px 12px;
    background: linear-gradient(135deg, var(--ad-blue), var(--ad-violet));
    border-radius: 999px;
    margin: 0 0 22px 0;
    box-shadow: 0 6px 18px rgba(79, 70, 229, .28);
}
.ad-eyebrow-pill::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .28);
    animation: adEyebrowDot 2s ease-in-out infinite;
}
@keyframes adEyebrowDot {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.28); }
    50%      { box-shadow: 0 0 0 8px rgba(255,255,255,.10); }
}
.ad-eyebrow-amber {
    background: linear-gradient(135deg, #b45309, var(--ad-amber));
    box-shadow: 0 6px 18px rgba(217, 119, 6, .28);
}

/* Reusable H2 dual-line with gradient shine on line 2 */
.ad-h2-line-1 { display: block; color: var(--ad-ink); }
.ad-h2-line-2 {
    display: block;
    background: linear-gradient(120deg, var(--ad-blue) 0%, var(--ad-indigo) 35%, var(--ad-violet) 65%, var(--ad-pink) 100%);
    background-size: 260% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: adShine 7s ease-in-out infinite alternate;
    padding-inline: 2px;
}
@keyframes adShine { to { background-position: 100% 50%; } }

/* Buttons */
.ad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: all 200ms ease;
    cursor: pointer;
    white-space: nowrap;
}
.ad-btn-lg { padding: 15px 30px; font-size: 16px; border-radius: 12px; }
.ad-btn-primary {
    background: linear-gradient(135deg, var(--ad-blue) 0%, var(--ad-indigo) 55%, var(--ad-violet) 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.28);
}
/* color:#fff pinned in hover because the parent layout has a global
   `a:hover { color: <dark>; }` cascade that otherwise turned CTA text
   near-black on hover, killing contrast against the gradient. */
.ad-btn-primary:hover,
.ad-btn-primary:focus,
.ad-btn-primary:active {
    color: #fff;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.36);
    transform: translateY(-1px);
}
.ad-btn-outline {
    background: rgba(255, 255, 255, 0.72);
    color: var(--ad-ink);
    border-color: var(--ad-line-2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ad-btn-outline:hover,
.ad-btn-outline:focus,
.ad-btn-outline:active {
    background: #ffffff;
    border-color: var(--ad-indigo);
    color: var(--ad-indigo);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.10);
}

/* Trailing arrow — filled chevron-right that nudges 3px on hover so
   the click target feels directional ("something happens when you press
   this"). SVG is placed inline in the blade so stroke inherits color and
   the button gap:8px handles spacing. */
.ad-btn-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 200ms ease;
}
.ad-btn:hover .ad-btn-arrow,
.ad-btn:focus .ad-btn-arrow { transform: translateX(3px); }
.ad-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 20px 0;
}
.ad-cta-row--center { justify-content: center; }

/* -------------------------------- HERO ---------------------------------- */
.ad-hero {
    padding: 88px 0 72px;
    text-align: center;
    position: relative;
    background:
        radial-gradient(ellipse 720px 380px at 50% 30%, rgba(79, 70, 229, .12), transparent 60%),
        radial-gradient(ellipse 480px 240px at 15% 10%, rgba(219, 39, 119, .06), transparent 55%),
        radial-gradient(ellipse 480px 240px at 85% 12%, rgba(6, 182, 212, .06), transparent 55%);
    isolation: isolate;
    overflow: hidden;
}
.ad-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(79,70,229,.22) 0.9px, transparent 1.6px);
    background-size: 22px 22px;
    background-position: 0 0;
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
    opacity: 0.6;
    pointer-events: none;
    z-index: -1;
}
.ad-hero > .ad-container { position: relative; z-index: 1; text-align: center; }
/* Eyebrow — quiet informational badge. Kept intentionally flat so it
   never competes with the CTA buttons (which stay gradient-loud). */
.ad-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ad-indigo);
    padding: 6px 14px 6px 12px;
    background: rgba(79, 70, 229, 0.07);
    border: 1px solid rgba(79, 70, 229, 0.15);
    border-radius: 999px;
    margin: 0 0 22px 0;
    box-shadow: none;
}
.ad-hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ad-indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
    animation: adEyebrowDot 2s ease-in-out infinite;
}
.ad-hero-h1 {
    font-size: clamp(30px, 5.2vw, 58px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.032em;
    margin: 0 0 22px 0;
    color: var(--ad-ink);
    max-width: 1080px;
    margin-inline: auto;
}
.ad-hero-h1 .ad-hero-h1-line-1 { display: block; color: var(--ad-ink); }
.ad-hero-h1 .ad-hero-h1-line-2 {
    display: block;
    background: linear-gradient(120deg, var(--ad-blue) 0%, var(--ad-indigo) 35%, var(--ad-violet) 65%, var(--ad-pink) 100%);
    background-size: 260% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: adShine 7s ease-in-out infinite alternate;
    padding-inline: 2px;
}
.ad-hero-lead {
    max-width: 720px;
    margin: 0 auto 26px auto;
    font-size: 17px;
    color: var(--ad-text-muted);
    line-height: 1.6;
}
.ad-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 26px 0;
}
.ad-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ad-text-mute-1);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.ad-hero-chip::before {
    content: '◐';
    color: var(--ad-indigo);
    font-size: 14px;
    line-height: 1;
}
.ad-hero .ad-cta-row { justify-content: center; }
.ad-hero-micro { margin: 8px 0 0 0; font-size: 13px; color: var(--ad-text-mute-2); }

/* Soft amber hairline between the CTA cluster (above) and the
   chip capability strip (below). Fades from transparent → amber → transparent
   so it reads as an on-brand breather, not a hard rule. */
.ad-hero-divider {
    border: 0;
    height: 1px;
    width: 240px;
    max-width: 60%;
    margin: 28px auto 22px auto;
    background: linear-gradient(90deg,
        rgba(245, 158, 11, 0)   0%,
        rgba(245, 158, 11, 0.55) 50%,
        rgba(245, 158, 11, 0)   100%);
}

/* Mobile: eyebrow pulled up (-40px total vs desktop) so the hero opens
   tighter to the top-bar and the primary CTA + "Talk to an expert"
   both fall inside the first viewport before the sticky bar reveals.
   Chips collapse to a SINGLE horizontal-scroll row so vertical space
   is minimal. */
@media (max-width: 640px) {
    .ad-hero { padding-top: 48px; }         /* was 88px desktop, was 68px earlier — shave another 20px */
    .ad-hero-eyebrow { margin-top: 0; }     /* rely on hero padding, no negative margin drift */

    .ad-hero-chips {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-inline: 0;
        padding: 6px 0;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .ad-hero-chips::-webkit-scrollbar { display: none; }
    .ad-hero-chip { white-space: nowrap; scroll-snap-align: start; flex-shrink: 0; }
    .ad-hero .ad-cta-row .ad-btn { width: 100%; }
    .ad-hero-h1 { font-size: 28px; }
    .ad-hero-divider { width: 180px; margin: 20px auto 16px auto; }
}

/* ---------------------------- COUNTRIES STAT ---------------------------- */
.ad-countries {
    padding: 72px 0;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-top: 1px solid #bfdbfe;
    border-bottom: 1px solid #bfdbfe;
    position: relative;
    overflow: hidden;
}
.ad-countries .ad-container { position: relative; z-index: 2; }
.ad-countries-globe {
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    width: 520px;
    height: 520px;
    opacity: 0.4;
    z-index: 1;
    pointer-events: none;
}
.ad-countries-globe svg { width: 100%; height: 100%; display: block; }
html[dir="rtl"] .ad-countries-globe { right: auto; left: -80px; }
.ad-stat-wrap { text-align: center; max-width: 780px; margin: 0 auto; }
.ad-stat-number {
    font-size: 90px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--ad-indigo), var(--ad-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
    filter: drop-shadow(0 4px 20px rgba(67, 56, 202, 0.20));
}
.ad-stat-label {
    font-size: 25px;
    color: var(--ad-ink);
    font-weight: 700;
    margin: 0 0 14px 0;
    line-height: 1.3;
}
.ad-stat-disclaimer { font-size: 15px; color: #475569; margin: 0; }
@media (max-width: 640px) {
    .ad-countries { padding: 56px 0; }
    .ad-countries-globe { width: 320px; height: 320px; right: -140px; opacity: 0.25; }
    html[dir="rtl"] .ad-countries-globe { left: -140px; }
    .ad-stat-number { font-size: 64px; margin-bottom: 12px; }
    .ad-stat-label { font-size: 20px; }
    .ad-stat-disclaimer { font-size: 13px; }
}

/* ----------------------------- DASHBOARD PREVIEW ------------------------
   Locale-aware screenshot of the actual /my dashboard. Sits between the
   Countries stat and the Pain Mirror so cold ad traffic sees what they
   are signing up for before the pain narrative starts. Frame carries the
   entire visual weight — subtle border, big shadow, generous padding on
   larger screens; edge-to-edge on phones.
   ---------------------------------------------------------------------- */
.ad-dashboard {
    padding: 72px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
}
.ad-dashboard-title {
    text-align: center;
    margin: 0 0 36px 0;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    color: var(--ad-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.ad-dashboard-frame {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.09) 0%, rgba(6, 182, 212, 0.09) 100%);
    border-radius: 20px;
    box-shadow:
        0 24px 60px -12px rgba(79, 70, 229, 0.18),
        0 8px 24px -6px rgba(15, 23, 42, 0.10);
}
.ad-dashboard-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    background: #fff;
}

@media (max-width: 640px) {
    .ad-dashboard { padding: 48px 0; }
    .ad-dashboard-title { margin-bottom: 24px; font-size: 24px; }
    .ad-dashboard-frame { padding: 6px; border-radius: 14px; }
    .ad-dashboard-img { border-radius: 8px; }
}

/* ------------------------------ PAIN MIRROR ----------------------------- */
.ad-pain-title { text-align: center; margin: 0 0 40px 0; font-size: 32px; font-weight: 800; color: var(--ad-ink); letter-spacing: -0.015em; }
.ad-pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ad-pain-card {
    background:
        radial-gradient(ellipse 340px 240px at 92% 110%, rgba(245, 158, 11, 0.14), transparent 62%),
        radial-gradient(ellipse 260px 200px at 8% -10%, rgba(217, 119, 6, 0.09), transparent 60%),
        #ffffff;
    border: 1px solid rgba(217, 119, 6, 0.15);
    border-inline-start: 3px solid var(--ad-amber);
    border-radius: var(--ad-radius);
    padding: 24px;
    box-shadow: 0 1px 2px rgba(217, 119, 6, 0.04), 0 4px 20px rgba(217, 119, 6, 0.09);
    transition: box-shadow 250ms ease, transform 250ms ease;
}
.ad-pain-card:hover {
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.10), 0 8px 32px rgba(217, 119, 6, 0.16);
    transform: translateY(-2px);
}
.ad-pain-quote {
    font-size: 17px;
    font-weight: 700;
    color: var(--ad-ink);
    margin: 0 0 12px 0;
    line-height: 1.4;
    font-style: italic;
}
.ad-pain-quote::before { content: "\201C"; margin-inline-end: 2px; }
.ad-pain-quote::after  { content: "\201D"; margin-inline-start: 2px; }
.ad-pain-answer { font-size: 15px; color: var(--ad-text-muted); margin: 0; line-height: 1.5; }
@media (max-width: 640px) {
    .ad-pain-grid { grid-template-columns: 1fr; gap: 12px; }
    .ad-pain-card { padding: 20px; }
    .ad-pain-quote { font-size: 16px; }
    .ad-pain-title { font-size: 24px; }
}

/* ------------------------------ AUDIENCE -------------------------------- */
.ad-audience-header { max-width: 820px; margin: 0 auto 40px auto; text-align: center; }
.ad-audience-header h2 {
    font-size: clamp(28px, 4.6vw, 46px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.028em;
    margin: 0 0 16px 0;
}
.ad-audience-header .ad-lead { margin: 0 auto; }
.ad-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.ad-audience-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid rgba(79, 70, 229, 0.10);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ad-ink);
    line-height: 1.35;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.04), 0 3px 12px rgba(79, 70, 229, 0.05);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.ad-audience-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(79, 70, 229, 0.12);
    border-color: rgba(79, 70, 229, 0.28);
}
.ad-audience-emoji { font-size: 26px; line-height: 1; flex-shrink: 0; }
@media (max-width: 640px) {
    .ad-audience-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ad-audience-item { padding: 14px; font-size: 13px; gap: 10px; }
    .ad-audience-emoji { font-size: 22px; }
}

/* ------------------------------- TIMELINE ------------------------------- */
.ad-timeline-header { max-width: 900px; margin: 0 auto 56px auto; text-align: center; }
.ad-timeline-header h2 {
    font-size: clamp(30px, 5vw, 52px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 auto 20px auto;
    max-width: 820px;
}
.ad-timeline-header .ad-lead { margin: 0 auto 20px auto; }
.ad-timeline-header .ad-micro { margin: 0 auto; max-width: 640px; }
.ad-timeline-wrap {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding-inline-start: 56px;
}
.ad-progress-track {
    position: absolute;
    inset-inline-start: 20px;
    top: 12px;
    bottom: 12px;
    width: 4px;
    background: var(--ad-line);
    border-radius: 2px;
    overflow: hidden;
}
.ad-progress-fill {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, var(--ad-indigo) 0%, #6366f1 40%, var(--ad-cyan) 100%);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(79, 70, 229, 0.55);
    transition: height 120ms linear;
}
.ad-progress-fill::after {
    content: "";
    position: absolute;
    inset-inline-start: -6px;
    bottom: -6px;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, var(--ad-cyan), transparent 70%);
    border-radius: 50%;
    filter: blur(3px);
    animation: adNeonPulse 1.8s ease-in-out infinite;
}
@keyframes adNeonPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.25); }
}
.ad-timeline-step { position: relative; margin-bottom: 40px; padding-block: 8px; }
.ad-timeline-step:last-child { margin-bottom: 0; }
.ad-milestone-dot {
    position: absolute;
    inset-inline-start: -44px;
    top: 20px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--ad-line-2);
    z-index: 2;
    transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ad-milestone-dot.reached {
    background: linear-gradient(135deg, var(--ad-indigo), var(--ad-cyan));
    border-color: transparent;
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.5), 0 0 0 4px rgba(79, 70, 229, 0.15);
}
.ad-milestone-dot.reached::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ad-indigo), var(--ad-cyan));
    filter: blur(6px);
    opacity: 0.5;
    z-index: -1;
}
.ad-step-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid rgba(67, 56, 202, 0.10);
    border-radius: var(--ad-radius);
    padding: 24px 28px;
    box-shadow: 0 1px 2px rgba(67, 56, 202, 0.04), 0 4px 16px rgba(67, 56, 202, 0.06);
    transition: box-shadow 300ms ease, border-color 300ms ease, background 300ms ease;
}
.ad-step-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 20px;
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.19) 0%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}
.ad-step-card > * { position: relative; }
.ad-step-card.reached {
    background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
    border-color: rgba(67, 56, 202, 0.28);
    box-shadow: 0 4px 20px rgba(67, 56, 202, 0.10), 0 8px 36px rgba(67, 56, 202, 0.14);
}
.ad-step-card.reached::before { opacity: 1; }
.ad-step-card.reached:has(.ad-step-when-warn)::before {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.21) 0%, transparent 100%);
}
.ad-step-when {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ad-indigo);
    background: rgba(79, 70, 229, 0.08);
    padding: 6px 12px;
    border-radius: 100px;
    margin-bottom: 12px;
    transition: background 350ms ease, box-shadow 350ms ease, color 350ms ease;
}
.ad-step-when-warn { color: #b45309; background: var(--ad-amber-soft); }
.ad-step-card.reached .ad-step-when {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.18), rgba(6, 182, 212, 0.14));
    color: var(--ad-indigo);
    box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.28), 0 0 14px rgba(79, 70, 229, 0.28);
}
.ad-step-card.reached .ad-step-when-warn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.18));
    color: #92400e;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.40), 0 0 14px rgba(245, 158, 11, 0.40);
}
.ad-step-title { font-size: 22px; font-weight: 800; color: var(--ad-ink); margin: 0 0 8px 0; line-height: 1.25; }
.ad-step-body  { font-size: 15px; color: var(--ad-text-muted); margin: 0 0 12px 0; line-height: 1.55; }
.ad-step-bullets { list-style: none; padding: 0; margin: 0; }
.ad-step-bullets li {
    position: relative;
    padding-inline-start: 22px;
    font-size: 14px;
    color: var(--ad-text);
    margin-bottom: 6px;
    line-height: 1.5;
}
.ad-step-bullets li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ad-indigo), var(--ad-cyan));
}
@media (max-width: 640px) {
    .ad-timeline-wrap { padding-inline-start: 40px; }
    .ad-progress-track { inset-inline-start: 12px; }
    .ad-milestone-dot { inset-inline-start: -32px; width: 20px; height: 20px; top: 16px; }
    .ad-step-card { padding: 20px; }
    .ad-step-title { font-size: 19px; }
}

/* ---------------------------- TRAP ($25K IRS) --------------------------- */
.ad-trap { background: var(--ad-bg-soft); }
.ad-trap-wrap { max-width: 820px; margin: 0 auto; text-align: center; }
.ad-trap-wrap h2 { font-size: clamp(24px, 4vw, 38px); font-weight: 800; margin: 0 0 20px 0; color: var(--ad-ink); letter-spacing: -0.015em; }
.ad-trap-body { font-size: 17px; color: var(--ad-text); line-height: 1.65; margin: 0 auto 32px auto; max-width: 720px; }
.ad-trap-amber {
    border: 2px solid var(--ad-amber);
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    padding: 20px 28px;
    border-radius: var(--ad-radius);
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: start;
}
.ad-trap-amber-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--ad-amber);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
.ad-trap-amber-text strong { display: block; font-size: 15px; color: #78350f; margin-bottom: 2px; }
.ad-trap-amber-text span { font-size: 14px; color: #78350f; line-height: 1.5; }
@media (max-width: 640px) { .ad-trap-amber { flex-direction: column; text-align: center; padding: 16px 20px; } }

/* ------------------------------- PRICING -------------------------------- */
.ad-pricing-title { text-align: center; margin: 0 0 16px 0; font-size: clamp(24px, 3.5vw, 34px); font-weight: 800; color: var(--ad-ink); letter-spacing: -0.015em; }
.ad-pricing-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px auto;
    font-size: 17px;
    color: var(--ad-text-muted);
    line-height: 1.6;
}
.ad-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.ad-price-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid rgba(67, 56, 202, 0.10);
    border-radius: var(--ad-radius-lg);
    padding: 32px 28px;
    box-shadow: 0 2px 8px rgba(67, 56, 202, 0.06), 0 8px 32px rgba(67, 56, 202, 0.08);
    display: flex;
    flex-direction: column;
}
.ad-price-card--featured {
    background: linear-gradient(180deg, #ffffff 0%, #f2f4ff 100%);
    border: 2px solid var(--ad-indigo);
    transform: scale(1.02);
    box-shadow: 0 8px 40px rgba(67, 56, 202, 0.20);
}
.ad-price-badge {
    position: absolute;
    top: -12px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: var(--ad-indigo);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(67, 56, 202, 0.3);
}
.ad-price-name { font-size: 14px; font-weight: 600; color: var(--ad-indigo); letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 8px 0; }
.ad-price-amount { font-size: 40px; font-weight: 800; color: var(--ad-ink); line-height: 1.1; margin: 0 0 6px 0; }
.ad-price-amount span { font-size: 15px; font-weight: 500; color: var(--ad-text-muted); }
.ad-price-yearly { font-size: 14px; color: var(--ad-text-muted); margin: 0 0 8px 0; }
.ad-price-tag { font-size: 15px; font-weight: 600; color: var(--ad-ink); margin: 16px 0 8px 0; }
.ad-price-bullets { list-style: none; padding: 0; margin: 12px 0 20px 0; flex-grow: 1; }
.ad-price-bullets li {
    position: relative;
    padding-inline-start: 24px;
    font-size: 14px;
    color: var(--ad-text);
    margin-bottom: 8px;
    line-height: 1.5;
}
.ad-price-bullets li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    color: var(--ad-indigo);
    font-weight: 800;
    font-size: 14px;
}
.ad-pricing-shared { text-align: center; font-size: 12px; color: var(--ad-text-mute-2); margin-top: 24px; }
.ad-pricing-cta { text-align: center; margin-top: 32px; }
.ad-pricing-cta-secondary { display: block; margin-top: 12px; font-size: 14px; color: var(--ad-text-muted); }
.ad-pricing-cta-secondary a { color: var(--ad-indigo); text-decoration: underline; text-underline-offset: 3px; margin-inline-start: 4px; }
@media (max-width: 1024px) {
    .ad-pricing-grid { grid-template-columns: 1fr; gap: 16px; }
    .ad-price-card--featured { transform: none; }
}

/* ---------------------------- FEATURES TABLE ---------------------------- */
.ad-features-title { text-align: center; margin: 0 0 40px 0; font-size: clamp(24px, 3.5vw, 34px); font-weight: 800; color: var(--ad-ink); letter-spacing: -0.015em; }
.ad-features-cat { margin-bottom: 32px; }
.ad-features-cat-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ad-indigo);
    border-bottom: 1px solid var(--ad-line);
    padding-bottom: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ad-features-cat-emoji { font-size: 16px; }
.ad-feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}
.ad-feature-row:last-child { border-bottom: none; }
.ad-feature-name {
    font-size: 15px;
    color: var(--ad-ink);
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ad-feature-emoji { display: inline-block; opacity: 0.9; }
.ad-feature-pills { display: flex; gap: 6px; flex-shrink: 0; }
.ad-fpill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 60px;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: #f1f5f9;
    color: #64748b;
}
.ad-fpill--on {
    background: #ecfdf5;
    color: #065f46;
    font-weight: 700;
    border: 1px solid #a7f3d0;
}
.ad-fpill--on::before { content: "✓"; color: var(--ad-success); font-weight: 800; font-size: 13px; }
/* WCAG AA — `--ad-line-2` (#cbd5e1, slate-300) failed contrast on white.
   Bumped to `--ad-text-mute-2` (#64748b, slate-500) → ~4.65:1 vs white. */
.ad-fpill--off { background: transparent; color: var(--ad-text-mute-2); }
.ad-fpill--off::before { content: "—"; color: var(--ad-text-mute-2); font-weight: 400; }
@media (max-width: 640px) {
    .ad-feature-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 0; }
    .ad-feature-pills { width: 100%; justify-content: space-between; }
    .ad-fpill { flex: 1; min-width: 0; }
}

/* ---------------------------- OBJECTIONS FAQ ---------------------------- */
.ad-obj-title { text-align: center; margin: 0 0 40px 0; font-size: clamp(24px, 3.5vw, 34px); font-weight: 800; color: var(--ad-ink); letter-spacing: -0.015em; }
.ad-obj-list { max-width: 820px; margin: 0 auto; }
.ad-obj-item {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid rgba(67, 56, 202, 0.10);
    border-radius: var(--ad-radius);
    padding: 24px 28px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(67, 56, 202, 0.04), 0 4px 14px rgba(67, 56, 202, 0.05);
}
.ad-obj-q { font-size: 17px; font-weight: 700; color: var(--ad-ink); margin: 0 0 10px 0; line-height: 1.4; }
.ad-obj-q::before {
    content: "Q";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(67, 56, 202, 0.1);
    color: var(--ad-indigo);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    margin-inline-end: 10px;
    vertical-align: middle;
}
.ad-obj-a { font-size: 15px; color: var(--ad-text-muted); margin: 0; line-height: 1.6; padding-inline-start: 32px; }

/* ------------------------------ FINAL CTA -------------------------------
   Two soft cloud blooms bracket the section: warm rose-orange bottom-left,
   cool cyan-indigo top-right. They frame the CTA without competing with
   the H2 (mid-section stays quiet, gradients fade to transparent by 60%).
   Isolation + z-index ensures ::before layers stay behind buttons. */
.ad-final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 60% at 8% 88%,  rgba(236, 72, 153, 0.28), transparent 62%),
        radial-gradient(ellipse 55% 60% at 92% 12%, rgba(6, 182, 212, 0.28),  transparent 62%),
        radial-gradient(ellipse 90% 80% at 50% 100%, rgba(79, 70, 229, 0.09), transparent 70%),
        linear-gradient(135deg, #fafbff 0%, #eef2ff 100%);
    text-align: center;
    padding: 96px 0;
}
/* Second cloud layer — a lower-opacity violet+amber pair anchored to the
   opposite corners. Keeps the field feeling "atmospheric" (never a flat
   two-blob poster). */
.ad-final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 45% at 20% 15%, rgba(139, 92, 246, 0.18), transparent 65%),
        radial-gradient(ellipse 45% 40% at 80% 85%, rgba(251, 191, 36, 0.15), transparent 65%);
    pointer-events: none;
    z-index: -1;
}
/* Fine indigo dot grid, faded from top, adds tactile texture without noise. */
.ad-final-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(79,70,229,.18) 0.8px, transparent 1.4px);
    background-size: 24px 24px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 60%, transparent 100%);
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}
.ad-final-cta > .ad-container { position: relative; z-index: 1; }
.ad-final-cta h2 { font-size: clamp(28px, 4.5vw, 42px); max-width: 720px; margin: 0 auto 20px auto; font-weight: 800; color: var(--ad-ink); letter-spacing: -0.02em; }
.ad-final-cta .ad-lead { max-width: 560px; margin: 0 auto 32px auto; }
@media (max-width: 640px) { .ad-final-cta { padding: 72px 0; } }

/* ------------------------------ FOOTER ---------------------------------- */
/* `.footer` (landing.css) ships a full-width `border-top` that reads as a
   dangling hairline on /start because the CTA cluster above it already
   provides its own separator. Combined selector out-specificity the
   shared rule; landing.css untouched (used by ~40 other pages). */
.footer.ad-landing-footer {
    background: #fff;
    padding: 40px 0 96px 0;
    text-align: center;
    border-top: 0;
}

/* WCAG AA overrides for /start:
   - `.footer-legal h4/p` in landing.css uses `color: var(--muted); opacity: 0.7`
     which drops contrast well below AA against white. Kept the small
     visual footprint (10px, uppercase) but pinned the color to slate-500
     (#64748b) with full opacity so the disclaimer is readable.
   - blade element is `<h2>` for accessible heading order — CSS mirrors the
     shared `.footer-legal h4` size/case so visuals stay identical. */
.ad-landing-footer .footer-legal h2 {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 1;
}
.ad-landing-footer .footer-legal p {
    color: #64748b;
    opacity: 1;
}
/* ---- Inline cookie consent (single line, micro buttons, no off-page link) */
.ad-cookie-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    max-width: 720px;
    margin: 0 auto 20px auto;
    padding: 10px 14px;
    background: #fffdf4;
    border: 1px solid #f3e6c0;
    border-radius: 100px;
    font-size: 12.5px;
    color: #78350f;
    line-height: 1.4;
}
.ad-cookie-text { font-weight: 500; }
.ad-cookie-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.ad-cookie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid #f3e6c0;
    background: transparent;
    color: #78350f;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease;
}
.ad-cookie-btn:hover { background: #fef3c7; }
.ad-cookie-btn-primary {
    background: var(--ad-indigo);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.24);
}
.ad-cookie-btn-primary:hover { background: var(--ad-indigo-2); box-shadow: 0 4px 10px rgba(79, 70, 229, 0.32); }
@media (max-width: 640px) {
    .ad-cookie-notice { border-radius: 14px; padding: 10px 12px; font-size: 12px; }
    .ad-cookie-actions { width: 100%; justify-content: center; }
    .ad-cookie-btn { flex: 1 1 auto; }
}

/* --------------------------- STICKY MOBILE BAR -------------------------- */
.ad-sticky-bar {
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--ad-line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) 16px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: opacity 300ms ease, transform 300ms ease;
}
.ad-sticky-bar.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.ad-sticky-btns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.ad-sticky-btns .ad-btn { padding: 12px 14px; font-size: 14px; border-radius: 10px; }
@media (min-width: 1024px) { .ad-sticky-bar { display: none; } }

/* --------------------------- H2 dual-line specifics --------------------- */
.ad-audience .ad-h2-line-1,
.ad-audience .ad-h2-line-2,
.ad-timeline-header .ad-h2-line-1,
.ad-timeline-header .ad-h2-line-2 {
    display: block;
}

/* -------- Cold-ad-landing UX override — hide floating consent shell -----
   Rationale: mobile IG traffic sees the fixed .mz-consent-banner cover
   the hero form / pricing CTA area (~200px). The inline .ad-cookie-notice
   in the footer above already carries the informational disclosure so a
   modal shell adds only friction. Scope: start.css only loads on /start,
   so every other page keeps the full consent banner behavior unchanged. */
.mz-consent-banner { display: none !important; }

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}