/* =====================================================================
   DMS Landing Page — Clinical / Premium / Minimal
   Scoped under .lp to avoid clashing with homePage.css globals.
   Palette anchored on existing brand blue (#00A4E5) + clinical teal
   + a calm health-green accent. Bootstrap 5 compatible.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Noto+Sans:wght@400;500;600;700&display=swap');

.lp {
    --lp-primary: #00A4E5;
    --lp-primary-deep: #0077B6;
    --lp-teal: #0891B2;
    --lp-ink: #0A2A38;
    --lp-ink-soft: #43606C;
    --lp-muted: #6B8089;
    --lp-accent: #0FA968;        /* health green */
    --lp-accent-deep: #0B8A55;
    --lp-bg: #F3FAFD;
    --lp-bg-2: #EAF6FB;
    --lp-surface: #FFFFFF;
    --lp-border: #DCEAF0;
    --lp-border-strong: #C5DCE6;

    --lp-radius-sm: 12px;
    --lp-radius: 18px;
    --lp-radius-lg: 26px;

    --lp-shadow-xs: 0 1px 2px rgba(10, 42, 56, .06);
    --lp-shadow-sm: 0 4px 14px rgba(10, 42, 56, .07);
    --lp-shadow: 0 14px 38px rgba(9, 78, 99, .10);
    --lp-shadow-lg: 0 28px 60px rgba(9, 78, 99, .16);
    --lp-ring: 0 0 0 4px rgba(0, 164, 229, .28);

    background:
        radial-gradient(1100px 520px at 82% -8%, var(--lp-bg-2) 0%, rgba(234, 246, 251, 0) 60%),
        linear-gradient(180deg, #FFFFFF 0%, var(--lp-bg) 100%);
    color: var(--lp-ink);
    overflow-x: hidden;
}

/* Win the global `* { font-family: ... !important }` from homePage.css */
.lp, .lp * {
    font-family: 'Figtree', 'Noto Sans', 'IBM Plex Sans Arabic', 'Cairo', system-ui, -apple-system, sans-serif !important;
}
.lp[dir="rtl"], .lp [dir="rtl"], .lp [dir="rtl"] * {
    font-family: 'IBM Plex Sans Arabic', 'Cairo', 'Noto Sans', system-ui, sans-serif !important;
}

/* ---------- Layout primitives ---------- */
.lp-section { padding: 84px 0; position: relative; }
.lp-section--tight { padding: 56px 0; }
.lp-section--alt { background: var(--lp-surface); border-block: 1px solid var(--lp-border); }

.lp .lp-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .82rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--lp-teal);
    background: rgba(8, 145, 178, .08);
    border: 1px solid rgba(8, 145, 178, .18);
    padding: .4rem .8rem; border-radius: 999px;
}

.lp .lp-h1 {
    font-size: clamp(2.3rem, 5.2vw, 4rem);
    line-height: 1.05; font-weight: 800; letter-spacing: -.02em;
    color: var(--lp-ink); margin: 0;
}
.lp .lp-h1 .lp-accent-text { color: var(--lp-primary); }
.lp .lp-h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    line-height: 1.12; font-weight: 800; letter-spacing: -.018em;
    color: var(--lp-ink); margin: 0;
}
.lp .lp-h3 { font-size: 1.18rem; font-weight: 700; color: var(--lp-ink); margin: 0; }
.lp .lp-lead {
    font-size: clamp(1.02rem, 1.5vw, 1.22rem);
    line-height: 1.7; color: var(--lp-ink-soft); margin: 0;
}
.lp .lp-muted { color: var(--lp-muted); }
.lp .lp-section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.lp .lp-section-head .lp-lead { margin-top: 14px; }

/* ---------- Buttons ---------- */
.lp .lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-weight: 600; font-size: 1.02rem; line-height: 1;
    padding: .92rem 1.6rem; border-radius: 14px;
    border: 1px solid transparent; cursor: pointer;
    text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
    min-height: 52px;
}
.lp .lp-btn-primary {
    background: linear-gradient(180deg, var(--lp-primary) 0%, var(--lp-primary-deep) 100%);
    color: #fff !important; box-shadow: 0 12px 26px rgba(0, 119, 182, .28);
}
.lp .lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0, 119, 182, .34); color: #fff !important; }
.lp .lp-btn-accent {
    background: linear-gradient(180deg, var(--lp-accent) 0%, var(--lp-accent-deep) 100%);
    color: #fff !important; box-shadow: 0 12px 26px rgba(15, 169, 104, .26);
}
.lp .lp-btn-accent:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(15, 169, 104, .32); color: #fff !important; }
.lp .lp-btn-ghost {
    background: var(--lp-surface); color: var(--lp-ink) !important;
    border-color: var(--lp-border-strong); box-shadow: var(--lp-shadow-xs);
}
.lp .lp-btn-ghost:hover { transform: translateY(-2px); border-color: var(--lp-primary); color: var(--lp-primary-deep) !important; box-shadow: var(--lp-shadow-sm); }
.lp .lp-btn-lg { padding: 1.05rem 2rem; font-size: 1.08rem; min-height: 58px; }

.lp a:focus-visible, .lp button:focus-visible, .lp .lp-btn:focus-visible {
    outline: none; box-shadow: var(--lp-ring);
}

/* ---------- Hero ---------- */
.lp .lp-hero { padding: 56px 0 72px; }
.lp .lp-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.lp .lp-hero-trust {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
    margin-top: 26px; color: var(--lp-muted); font-size: .95rem;
}
.lp .lp-hero-trust .lp-check { color: var(--lp-accent); }
.lp .lp-hero-visual {
    position: relative; border-radius: var(--lp-radius-lg);
    background: linear-gradient(160deg, #E8F6FD 0%, #F6FCFE 100%);
    border: 1px solid var(--lp-border);
    box-shadow: var(--lp-shadow-lg);
    padding: 26px; overflow: hidden;
}
.lp .lp-hero-visual::before {
    content: ""; position: absolute; inset: -40% 40% auto -20%; height: 70%;
    background: radial-gradient(closest-side, rgba(0,164,229,.16), transparent 70%); pointer-events: none;
}
.lp .lp-hero-visual img { width: 100%; height: auto; display: block; border-radius: var(--lp-radius); }
.lp .lp-hero-chip {
    position: absolute; background: #fff; border: 1px solid var(--lp-border);
    box-shadow: var(--lp-shadow); border-radius: 14px; padding: .7rem .9rem;
    display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9rem;
}
.lp .lp-hero-chip i { font-size: 1.1rem; }
.lp .lp-hero-chip--tl { top: 16px; inset-inline-start: 16px; }
.lp .lp-hero-chip--br { bottom: 16px; inset-inline-end: 16px; }

/* ---------- Stats strip ---------- */
.lp .lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp .lp-stat {
    background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius); padding: 26px 22px; text-align: center;
    box-shadow: var(--lp-shadow-xs);
}
.lp .lp-stat-num { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; color: var(--lp-primary-deep); line-height: 1; }
.lp .lp-stat-label { margin-top: 8px; color: var(--lp-muted); font-size: .95rem; font-weight: 500; }

/* ---------- Cards / Features ---------- */
.lp .lp-card {
    height: 100%; background: var(--lp-surface);
    border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
    padding: 28px; box-shadow: var(--lp-shadow-xs);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lp .lp-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); border-color: var(--lp-border-strong); }
.lp .lp-ico {
    width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
    font-size: 1.5rem; margin-bottom: 18px;
    background: linear-gradient(160deg, rgba(0,164,229,.14), rgba(8,145,178,.10));
    color: var(--lp-primary-deep); border: 1px solid rgba(0,164,229,.18);
}
.lp .lp-ico--green { background: linear-gradient(160deg, rgba(15,169,104,.16), rgba(15,169,104,.08)); color: var(--lp-accent-deep); border-color: rgba(15,169,104,.20); }
.lp .lp-card p { margin: 10px 0 0; color: var(--lp-ink-soft); line-height: 1.65; }

/* ---------- Why / split feature rows ---------- */
.lp .lp-benefit { display: flex; gap: 14px; align-items: flex-start; }
.lp .lp-benefit .lp-benefit-ico {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(15,169,104,.12); color: var(--lp-accent-deep); font-size: 1.2rem;
}
.lp .lp-benefit h3 { font-size: 1.08rem; font-weight: 700; margin: 0; }
.lp .lp-benefit p { margin: 6px 0 0; color: var(--lp-ink-soft); line-height: 1.6; }

/* ---------- How it works ---------- */
.lp .lp-step { position: relative; text-align: center; padding: 10px; }
.lp .lp-step-num {
    width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; color: #fff;
    background: linear-gradient(180deg, var(--lp-primary), var(--lp-primary-deep));
    box-shadow: 0 12px 24px rgba(0,119,182,.28);
}
.lp .lp-step p { margin: 10px 0 0; color: var(--lp-ink-soft); line-height: 1.6; }

/* ---------- Pricing teaser ---------- */
.lp .lp-price-card {
    height: 100%; background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg); padding: 32px 28px; box-shadow: var(--lp-shadow-xs);
    display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease;
}
.lp .lp-price-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }
.lp .lp-price-card--featured {
    border: 2px solid var(--lp-primary); box-shadow: var(--lp-shadow);
    position: relative; transform: translateY(-6px);
}
.lp .lp-price-badge {
    position: absolute; top: -14px; inset-inline-start: 50%; transform: translateX(-50%);
    background: linear-gradient(180deg, var(--lp-primary), var(--lp-primary-deep));
    color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    padding: .35rem .9rem; border-radius: 999px; white-space: nowrap;
}
.lp[dir="rtl"] .lp-price-badge { transform: translateX(50%); }
.lp .lp-price-name { font-size: 1.25rem; font-weight: 800; color: var(--lp-ink); }
.lp .lp-price-clinics { color: var(--lp-teal); font-weight: 600; margin-top: 4px; }
.lp .lp-price-amount { margin-top: 16px; font-size: 2.1rem; font-weight: 800; color: var(--lp-ink); line-height: 1; }
.lp .lp-price-amount span { font-size: .95rem; font-weight: 600; color: var(--lp-ink-soft); }
.lp .lp-price-year { margin-top: 6px; font-size: .9rem; color: var(--lp-ink-soft); }
.lp .lp-price-save { color: var(--lp-accent); font-weight: 700; }
.lp .lp-price-list { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; }
.lp .lp-price-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--lp-ink-soft); line-height: 1.5; }
.lp .lp-price-list i { color: var(--lp-accent); margin-top: 3px; flex: 0 0 auto; }
.lp .lp-price-card .lp-btn { margin-top: auto; width: 100%; }

/* ---------- Testimonials ---------- */
.lp .lp-quote {
    height: 100%; background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius); padding: 28px; box-shadow: var(--lp-shadow-xs);
    display: flex; flex-direction: column;
}
.lp .lp-stars { color: #F5B301; font-size: 1rem; letter-spacing: 2px; margin-bottom: 14px; }
.lp .lp-quote p { color: var(--lp-ink); line-height: 1.7; font-size: 1.02rem; margin: 0 0 20px; }
.lp .lp-quote-author { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.lp .lp-avatar {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; color: #fff; background: linear-gradient(160deg, var(--lp-teal), var(--lp-primary-deep));
}
.lp .lp-quote-author strong { display: block; color: var(--lp-ink); font-size: .98rem; }
.lp .lp-quote-author span { color: var(--lp-muted); font-size: .86rem; }

/* ---------- FAQ ---------- */
.lp .lp-faq { max-width: 820px; margin: 0 auto; }
.lp .lp-faq .accordion-item { border: 1px solid var(--lp-border); border-radius: var(--lp-radius) !important; margin-bottom: 14px; overflow: hidden; background: var(--lp-surface); }
.lp .lp-faq .accordion-button { font-weight: 600; color: var(--lp-ink); background: var(--lp-surface); padding: 20px 22px; font-size: 1.05rem; }
.lp .lp-faq .accordion-button:not(.collapsed) { color: var(--lp-primary-deep); background: var(--lp-bg-2); box-shadow: none; }
.lp .lp-faq .accordion-button:focus { box-shadow: var(--lp-ring); }
.lp .lp-faq .accordion-body { color: var(--lp-ink-soft); line-height: 1.7; padding: 4px 22px 22px; }

/* ---------- CTA band ---------- */
.lp .lp-cta-band {
    background: linear-gradient(135deg, var(--lp-primary-deep) 0%, var(--lp-teal) 100%);
    border-radius: var(--lp-radius-lg); padding: clamp(36px, 5vw, 64px);
    color: #fff; text-align: center; box-shadow: var(--lp-shadow-lg); position: relative; overflow: hidden;
}
.lp .lp-cta-band::after {
    content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; height: 140%;
    background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent); pointer-events: none;
}
.lp .lp-cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; margin: 0; }
.lp .lp-cta-band p { color: rgba(255,255,255,.9); font-size: 1.12rem; margin: 16px auto 0; max-width: 620px; }
.lp .lp-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; position: relative; }
.lp .lp-cta-band .lp-btn-ghost { background: rgba(255,255,255,.12); color: #fff !important; border-color: rgba(255,255,255,.4); }
.lp .lp-cta-band .lp-btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff !important; }
.lp .lp-cta-band .lp-btn-onlight { background: #fff; color: var(--lp-primary-deep) !important; }

/* ---------- Problem / pain cards ---------- */
.lp .lp-pain {
    height: 100%; background: var(--lp-surface);
    border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
    padding: 26px; box-shadow: var(--lp-shadow-xs);
}
.lp .lp-pain > i {
    font-size: 1.7rem; color: #C2410C;
    background: rgba(234, 88, 12, .10); border: 1px solid rgba(234, 88, 12, .18);
    width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
}
.lp .lp-pain h3 { font-size: 1.08rem; font-weight: 700; color: var(--lp-ink); margin: 0; }
.lp .lp-pain p { margin: 8px 0 0; color: var(--lp-ink-soft); line-height: 1.6; }

/* ---------- Free trial / lead form ---------- */
.lp #trial { scroll-margin-top: 84px; }
.lp .lp-trust-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.lp .lp-trust-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--lp-ink); font-weight: 500; line-height: 1.5; }
.lp .lp-trust-list i { color: var(--lp-accent); font-size: 1.15rem; margin-top: 2px; flex: 0 0 auto; }

.lp .lp-form {
    background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg); padding: 32px; box-shadow: var(--lp-shadow);
    display: flex; flex-direction: column; gap: 16px;
}
.lp .lp-form-title { font-size: 1.4rem; font-weight: 800; color: var(--lp-ink); margin: 0 0 4px; }
.lp .lp-field { display: flex; flex-direction: column; gap: 7px; }
.lp .lp-field span { font-size: .9rem; font-weight: 600; color: var(--lp-ink-soft); }
.lp .lp-field input {
    width: 100%; min-height: 52px; padding: 12px 16px; font-size: 1rem;
    color: var(--lp-ink); background: var(--lp-bg); border: 1px solid var(--lp-border-strong);
    border-radius: 12px; transition: border-color .18s ease, box-shadow .18s ease;
}
.lp .lp-field input::placeholder { color: var(--lp-muted); }
.lp .lp-field input:focus { outline: none; border-color: var(--lp-primary); box-shadow: var(--lp-ring); background: #fff; }
.lp .lp-form .lp-btn { width: 100%; margin-top: 4px; }
.lp .lp-form-note { margin: 2px 0 0; font-size: .82rem; color: var(--lp-muted); line-height: 1.5; }

/* Honeypot — kept in the DOM for bots, hidden from real users & assistive tech */
.lp .lp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Inline submit status messages */
.lp .lp-form-status { margin: 0; font-size: .9rem; line-height: 1.5; }
.lp .lp-form-status:empty { display: none; }
.lp .lp-form-status.is-loading { color: var(--lp-muted); }
.lp .lp-form-status.is-ok {
    color: var(--lp-accent);
    background: rgba(15, 169, 104, .08);
    border: 1px solid rgba(15, 169, 104, .22);
    border-radius: var(--lp-radius);
    padding: 14px 16px;
    font-weight: 600;
}
.lp .lp-form-status.is-err {
    color: #b42318;
    background: rgba(180, 35, 24, .06);
    border: 1px solid rgba(180, 35, 24, .2);
    border-radius: var(--lp-radius);
    padding: 14px 16px;
}
.lp .lp-form-status.is-err a { color: #b42318; font-weight: 600; text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .lp .lp-stats { grid-template-columns: repeat(2, 1fr); }
    .lp .lp-hero { padding: 32px 0 48px; }
    .lp .lp-hero-visual { margin-top: 36px; }
    /* Stacked pricing: drop the desktop lift/overlap so the badge never clips the card above */
    .lp .lp-price-card--featured { transform: none; margin-top: 26px; }
    .lp .lp-price-card:hover,
    .lp .lp-price-card--featured:hover { transform: none; }
}
@media (max-width: 767px) {
    .lp-section { padding: 64px 0; }
    .lp-section--tight { padding: 44px 0; }
    .lp .lp-section-head { margin-bottom: 36px; }
    /* Comfortable single-column spacing for stat / why / feature / step grids */
    .lp .lp-step { padding: 0; }
    /* Keep the floating hero chips from crowding small images */
    .lp .lp-hero-chip { font-size: .82rem; padding: .55rem .7rem; }
    .lp .lp-hero-chip i { font-size: 1rem; }
}
@media (max-width: 575px) {
    .lp-section { padding: 56px 0; }
    .lp .lp-stats { grid-template-columns: 1fr; }
    /* Full-width, easy-to-tap primary actions */
    .lp .lp-hero-actions { gap: 12px; }
    .lp .lp-hero-actions .lp-btn,
    .lp .lp-cta-actions .lp-btn { width: 100%; }
    .lp .lp-cta-actions { gap: 12px; }
    .lp .lp-hero-visual { padding: 16px; }
    .lp .lp-card { padding: 22px; }
    .lp .lp-pain { padding: 20px; }
    .lp .lp-form { padding: 24px; }
    .lp .lp-price-card { padding: 26px 22px; }
    .lp .lp-faq .accordion-button { padding: 16px 18px; font-size: 1rem; }
    .lp .lp-faq .accordion-body { padding: 4px 18px 18px; }
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
    .lp * { transition: none !important; animation: none !important; }
}