/* ============================================================
   SOLUTION PAGES — /bulk-sms-jordan and /otp-sms-api (views/solution_page.html).
   Builds on scene-base.css (tokens, header, buttons), landing3.css (wrap, code block, loader) and
   login3.css (page shell, footer).
   ============================================================ */

.lp3-sol__main {
    flex: 1 0 auto;
    padding: clamp(6.5rem, 14vh, 8.5rem) 0 clamp(3rem, 8vh, 5rem);
}

/* ---------- Breadcrumb ---------- */
.lp3-sol__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
}
.lp3-sol__crumbs a { color: inherit; text-decoration: none; }
.lp3-sol__crumbs a:hover { color: var(--lp3-pink-ink); text-decoration: underline; }

/* ---------- Hero ---------- */
.lp3-sol__hero { padding: clamp(2rem, 6vh, 3.5rem) 0 0; max-width: 60rem; }
.lp3-sol__hero .eyebrow { color: var(--lp3-pink-ink); }
.lp3-sol__title {
    margin: 1rem 0 0;
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: var(--ink);
}
.lp3-sol__lead {
    margin: 1.5rem 0 2rem;
    max-width: 52ch;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    color: var(--ink-soft);
}

/* ---------- Sections ---------- */
.lp3-sol__section { padding-top: clamp(3.5rem, 9vh, 6rem); }
.lp3-sol__h2 {
    margin: 0 0 1.75rem;
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--ink);
}

.lp3-sol__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1rem;
}
.lp3-sol__card,
.lp3-sol__steps li {
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-lg);
}
.lp3-sol__card h3,
.lp3-sol__steps h3 { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.lp3-sol__card p,
.lp3-sol__steps p { margin: 0; line-height: 1.6; color: var(--ink-soft); }

.lp3-sol__steps {
    counter-reset: sol-step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
}
.lp3-sol__steps li { counter-increment: sol-step; }
.lp3-sol__steps li::before {
    content: counter(sol-step, decimal-leading-zero);
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--lp3-pink-ink);
}

/* ---------- API ---------- */
.lp3-sol__dev {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}
.lp3-sol__dev > div { flex: 1 1 320px; }
.lp3-sol__dev p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }
.lp3-sol__dev .lp3-code { font-size: 13px; }

/* ---------- FAQ ---------- */
.lp3-sol__faq { display: grid; gap: 0.75rem; max-width: 900px; }
.lp3-sol__faq details {
    background: var(--card);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.4rem;
}
.lp3-sol__faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink);
    list-style-position: outside;
}
.lp3-sol__faq summary:focus-visible { outline: 2px solid var(--lp3-pink); outline-offset: 4px; border-radius: 4px; }
.lp3-sol__faq details p { margin: 0.75rem 0 0; line-height: 1.7; color: var(--ink-soft); }

/* ---------- Closing CTA ---------- */
.lp3-sol__band {
    margin-top: clamp(3.5rem, 9vh, 6rem);
    padding: clamp(1.75rem, 5vw, 3rem);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-2);
    border: 1px solid var(--ink-line);
    border-radius: 36px;
}
.lp3-sol__band .lp3-sol__h2 { margin-bottom: 0.5rem; }
.lp3-sol__band p { margin: 0; color: var(--ink-soft); }

/* ---------- Related pages ---------- */
.lp3-sol__related { margin-top: 3rem; }
.lp3-sol__related h2 {
    margin: 0 0 0.75rem;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.lp3-sol__related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.lp3-sol__related a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lp3-sol__related a:hover { color: var(--lp3-pink-ink); }

/* ---------- Arabic ---------- */
:root[dir="rtl"] .lp3-sol__title,
:root[dir="rtl"] .lp3-sol__h2 { letter-spacing: 0; line-height: 1.3; }
:root[dir="rtl"] .lp3-sol__crumbs,
:root[dir="rtl"] .lp3-sol__related h2 { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; }
:root[dir="rtl"] .lp3-sol__steps li::before { font-family: var(--font-sans); }