/* ============================================================
   Landing pages — shared styles
   Used by: index, pricing, how-it-works, faq, contact, shops.
   Tokens: --color-primary (Souq Teal), --color-accent (Honey Amber),
           --color-text/-secondary/-muted, --color-bg/-subtle/-muted,
           --color-border/-strong, --color-surface, --teal-*, --amber-*.
   ============================================================ */

.landing {
    background: var(--color-bg);
    color: var(--color-text);
}

.landing .signup-flow {
    background: var(--color-bg-subtle);
}

/* ---- Section frame (reusable across landing pages) ---- */
.lp-section { padding: 72px 0; }
.lp-section--tight { padding: 48px 0; }

.lp-section-head { text-align: center; margin-bottom: 48px; }
.lp-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 12px;
}
.lp-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 16px;
    max-width: 22ch;
    margin-inline: auto;
}
.lp-subtitle {
    font-size: 17px;
    color: var(--color-text-secondary);
    line-height: 1.65;
    max-width: 60ch;
    margin: 0 auto;
}

/* ---- Page hero (smaller than the home hero) ---- */
.lp-page-hero {
    position: relative;
    padding: 80px 0 56px;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, var(--teal-50) 0%, transparent 70%),
        var(--color-bg);
    text-align: center;
    overflow: hidden;
}
.lp-page-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 20px; }
.lp-page-hero h1 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 14px 0 16px;
}
.lp-page-hero p {
    font-size: 18px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 56ch;
}

/* ---- Arabic heading typography ----
   Landing headings are tuned for Latin display type: tight line-height and
   negative letter-spacing. Both break Arabic — it is a connected script (so
   negative tracking crushes the letter joins) with taller glyphs and tashkeel
   (so tight leading makes stacked lines collide, e.g. the shadda in "أوّل").
   The base RTL fixes live on `body[dir="rtl"]`, but landing pages put dir on
   <html>, so they never match here. Scope the correction to [dir="rtl"] and
   reset tracking + relax leading; the LTR rendering is untouched. */
[dir="rtl"] .hero-title,
[dir="rtl"] .lp-page-hero h1,
[dir="rtl"] .lp-title,
[dir="rtl"] .lp-subtitle,
[dir="rtl"] .lp-feature-title,
[dir="rtl"] .lp-pillar-title,
[dir="rtl"] .lp-step-title,
[dir="rtl"] .lp-section-head h2,
[dir="rtl"] .lp-cta-title {
    letter-spacing: normal;
    line-height: 1.4;
}
[dir="rtl"] .hero-title,
[dir="rtl"] .lp-page-hero h1 {
    line-height: 1.45;
}

/* ---- Trust bar ---- */
.lp-trust {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 24px 0;
}
.lp-trust-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: center;
    text-align: center;
}
.lp-trust-stat {
    font-size: 14px;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.lp-trust-stat strong { color: var(--color-text); font-weight: 800; font-size: 17px; margin-inline-end: 4px; }
.lp-trust-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    justify-content: center;
    align-items: center;
    color: var(--color-text-secondary);
    font-size: 13px;
}
.lp-trust-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-weight: 600;
    background: var(--color-bg-subtle);
}
.lp-trust-logo svg { color: var(--color-primary); }

@media (min-width: 768px) {
    .lp-trust-inner { grid-template-columns: auto 1fr; text-align: start; gap: 32px; }
    .lp-trust-logos { justify-content: flex-end; }
}

/* ---- Pillars (3-up value props) ---- */
.lp-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 768px)  { .lp-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-pillars { grid-template-columns: repeat(3, 1fr); } }

.lp-pillar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.lp-pillar:hover {
    transform: translateY(-4px);
    border-color: var(--teal-300);
    box-shadow: 0 16px 32px rgba(6,51,47,.08);
}
.lp-pillar-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid; place-items: center;
    background: var(--color-primary-tint);
    color: var(--color-primary);
}
.lp-pillar-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -.01em;
}
.lp-pillar-body {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin: 0;
}
.lp-pillar-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    margin-block-start: auto;
}
.lp-pillar-link:hover { gap: 8px; }
[dir="rtl"] .lp-pillar-link svg { transform: scaleX(-1); }

/* ---- Product showcase (browser frame) ---- */
.lp-showcase {
    position: relative;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, var(--teal-50) 0%, transparent 70%),
        var(--color-bg);
    padding: 72px 0;
    overflow: hidden;
}
.lp-showcase-wrap { max-width: 1120px; margin: 0 auto; position: relative; }
.lp-showcase-frame {
    background: var(--color-surface);
    border-radius: 20px;
    border: 1px solid var(--color-border);
    box-shadow:
        0 1px 2px var(--color-border),
        0 32px 80px color-mix(in srgb, var(--color-primary) 15%, transparent),
        0 12px 28px rgba(6,51,47,.10);
    overflow: hidden;
}
.lp-showcase-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
}
.lp-showcase-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-border-strong); }
.lp-showcase-dot--red    { background: #fb7185; }
.lp-showcase-dot--yellow { background: #fbbf24; }
.lp-showcase-dot--green  { background: #34d399; }
.lp-showcase-url {
    margin-inline-start: auto;
    margin-inline-end: auto;
    font-size: 12px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.lp-showcase-img {
    width: 100%;
    display: block;
    background: var(--color-bg-subtle);
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* ---- Alternating feature rows ---- */
.lp-feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
}
@media (min-width: 900px) {
    .lp-feature { grid-template-columns: 1fr 1fr; gap: 64px; }
    .lp-feature--reverse .lp-feature-visual { order: 2; }
    .lp-feature--reverse .lp-feature-copy { order: 1; }
}
.lp-feature + .lp-feature { margin-top: 80px; }
.lp-feature-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-tint);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.lp-feature-title {
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0 0 14px;
}
.lp-feature-desc {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 18px;
}
.lp-feature-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.lp-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--color-text);
}
.lp-feature-list svg { flex-shrink: 0; color: var(--color-primary); margin-top: 4px; }

.lp-feature-visual {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--color-bg-muted);
    aspect-ratio: 4 / 3;
}
.lp-feature-visual img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s ease;
}
.lp-feature-visual:hover img { transform: scale(1.03); }

/* ---- Inline CTA / link ---- */
.lp-inline-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    padding: 10px 18px;
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    transition: border-color .15s, color .15s, transform .15s;
}
.lp-inline-cta:hover { border-color: var(--color-primary); transform: translateY(-1px); }
[dir="rtl"] .lp-inline-cta svg { transform: scaleX(-1); }

/* ---- Numbered steps ---- */
.lp-howit { background: var(--color-bg-subtle); }
.lp-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    counter-reset: step;
}
@media (min-width: 768px) { .lp-steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.lp-step {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 28px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lp-step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-size: 13px;
    font-weight: 800;
    color: var(--color-primary);
    background: var(--color-primary-tint);
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    font-variant-numeric: tabular-nums;
}
.lp-step-title { font-size: 18px; font-weight: 700; color: var(--color-text); margin: 0; letter-spacing: -.01em; }
.lp-step-desc  { font-size: 14px; color: var(--color-text-secondary); line-height: 1.65; margin: 0; }
.lp-step-meta  { font-size: 12px; font-weight: 600; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 4px; }

/* ---- Pricing cards ---- */
.lp-pricing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 880px;
    margin: 0 auto;
}
@media (min-width: 768px) { .lp-pricing { grid-template-columns: 1fr 1fr; gap: 24px; } }
.lp-price-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.lp-price-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(6,51,47,.08); }
.lp-price-card--featured {
    border-width: 2px;
    border-color: var(--color-primary);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.lp-price-card--featured::before {
    content: attr(data-badge);
    position: absolute;
    top: -12px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-text-on-brand);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
[dir="rtl"] .lp-price-card--featured::before { transform: translateX(50%); }
.lp-price-plan { font-size: 14px; font-weight: 700; color: var(--color-text-secondary); letter-spacing: .04em; text-transform: uppercase; }
.lp-price-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-text);
}
.lp-price-num   { font-size: 48px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lp-price-unit  { font-size: 15px; color: var(--color-text-secondary); }
.lp-price-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-price-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--color-text);
}
.lp-price-list svg { flex-shrink: 0; color: var(--color-primary); margin-top: 3px; }
.lp-price-cta { margin-top: auto; }

/* ---- Pricing comparison table ---- */
.lp-compare-wrap { max-width: 880px; margin: 0 auto; }
.lp-compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-surface);
}
.lp-compare th, .lp-compare td {
    padding: 14px 18px;
    text-align: start;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
    color: var(--color-text);
}
.lp-compare th {
    background: var(--color-bg-subtle);
    font-weight: 700;
    color: var(--color-text);
    font-size: 13px;
}
.lp-compare tr:last-child td { border-bottom: none; }
.lp-compare td.center, .lp-compare th.center { text-align: center; }
.lp-compare td.muted { color: var(--color-text-muted); }
.lp-compare .yes { color: var(--success-text); font-weight: 700; }
.lp-compare .no  { color: var(--color-text-muted); }

/* ---- Buttons (lp-btn) ---- */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s, transform .15s, box-shadow .15s, color .15s, border-color .15s;
    width: 100%;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn--primary {
    background: var(--color-primary);
    color: var(--color-text-on-brand);
    border-color: var(--color-primary);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.lp-btn--primary:hover { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.lp-btn--secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
.lp-btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.lp-btn--accent {
    background: var(--color-accent);
    color: var(--color-accent-text);
}
.lp-btn--accent:hover { background: var(--amber-500); }
.lp-btn--lg { height: 52px; padding: 0 28px; font-size: 16px; }
.lp-btn--auto { width: auto; }
[dir="rtl"] .lp-btn svg { transform: scaleX(-1); }

/* ---- Testimonials ---- */
.lp-testis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px)  { .lp-testis { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-testis { grid-template-columns: repeat(3, 1fr); } }
.lp-testi {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lp-testi-rating { color: var(--color-accent); font-size: 16px; letter-spacing: 2px; }
.lp-testi-quote {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
    font-style: normal;
}
.lp-testi-quote::before { content: '"'; color: var(--color-primary); font-size: 26px; font-weight: 800; margin-inline-end: 2px; }
.lp-testi-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.lp-testi-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    display: grid; place-items: center;
    font-weight: 800;
    font-size: 15px;
}
.lp-testi-name { font-size: 14px; font-weight: 700; color: var(--color-text); line-height: 1.2; }
.lp-testi-role { font-size: 12px; color: var(--color-text-muted); }

/* ---- FAQ accordion ---- */
.lp-faq {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-faq-item {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color .15s;
}
.lp-faq-item:hover { border-color: var(--color-border-strong); }
.lp-faq-item[open] { border-color: var(--color-primary); }
.lp-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
    content: '';
    width: 20px; height: 20px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    transition: transform .2s ease;
    flex-shrink: 0;
}
.lp-faq-item[open] summary::after { transform: rotate(180deg); }
.lp-faq-body {
    padding: 0 22px 20px;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

/* ---- FAQ category groups ---- */
.lp-faq-group { margin-block-end: 36px; }
.lp-faq-group-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 12px;
    padding-inline-start: 4px;
}

/* ---- Final CTA band ---- */
.lp-final {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--teal-700) 100%);
    color: var(--color-text-on-brand);
    position: relative;
    overflow: hidden;
    padding: 64px 0;
    text-align: center;
}
.lp-final::before, .lp-final::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.lp-final::before {
    width: 360px; height: 360px;
    background: rgba(255,255,255,.12);
    top: -120px; inset-inline-end: -100px;
}
.lp-final::after {
    width: 300px; height: 300px;
    background: color-mix(in srgb, var(--color-accent) 28%, transparent);
    bottom: -120px; inset-inline-start: -80px;
}
.lp-final-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 20px; }
.lp-final-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.lp-final-sub { font-size: 17px; opacity: .9; margin: 0 0 28px; line-height: 1.6; }
.lp-final .lp-btn--accent { width: max-content; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.lp-final-ctas { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lp-final .lp-btn--secondary {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.2);
}
.lp-final .lp-btn--secondary:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); color: #fff; }
.lp-final-trust {
    margin-top: 22px;
    display: inline-flex; flex-wrap: wrap; gap: 16px; justify-content: center;
    font-size: 13px;
    color: rgba(255,255,255,.78);
}
.lp-final-trust span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- 2-col split with sidebar (used by Contact) ---- */
.lp-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
@media (min-width: 900px) { .lp-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; } }
.lp-form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.lp-side-card {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.lp-side-item { display: flex; gap: 12px; align-items: flex-start; }
.lp-side-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    display: grid; place-items: center;
}
.lp-side-label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px; }
.lp-side-value { font-size: 14px; font-weight: 600; color: var(--color-text); margin: 0; line-height: 1.5; }
.lp-side-value a { color: inherit; text-decoration: none; }
.lp-side-value a:hover { color: var(--color-primary); }

/* ---- Shop card (Shops page) ---- */
.lp-shops {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 640px)  { .lp-shops { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-shops { grid-template-columns: repeat(3, 1fr); } }
.lp-shop-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.lp-shop-card:hover {
    transform: translateY(-4px);
    border-color: var(--teal-300);
    box-shadow: 0 16px 32px rgba(6,51,47,.10);
}
.lp-shop-thumb {
    aspect-ratio: 16 / 10;
    background: var(--color-bg-subtle);
    overflow: hidden;
    display: grid; place-items: center;
    color: var(--color-text-muted);
}
.lp-shop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-shop-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.lp-shop-cat {
    font-size: 11px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-primary);
}
.lp-shop-name { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0; line-height: 1.3; }
.lp-shop-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.55; margin: 0; }
.lp-shop-meta {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700;
    color: var(--color-primary);
    margin-block-start: 6px;
}
[dir="rtl"] .lp-shop-meta svg { transform: scaleX(-1); }

/* ---- Language switcher — pill button + dropdown ---- */
.lang-switch {
    position: relative;
    display: inline-block;
}
.lang-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
    line-height: 1;
}
.lang-switch-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.lang-switch-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 25%, transparent);
}
.lang-switch[data-open="true"] .lang-switch-btn {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
    color: var(--color-primary);
}
.lang-switch-icon {
    width: 16px; height: 16px;
    color: currentColor;
    flex-shrink: 0;
}
.lang-switch-current {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.lang-switch-caret {
    width: 12px; height: 12px;
    color: currentColor;
    opacity: .65;
    transition: transform .2s ease;
}
.lang-switch[data-open="true"] .lang-switch-caret { transform: rotate(180deg); }

.lang-switch-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 180px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(6,51,47,.12), 0 4px 12px rgba(6,51,47,.06);
    padding: 6px;
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 100;
}
.lang-switch[data-open="true"] .lang-switch-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.lang-switch-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    text-align: start;
    transition: background-color .12s;
}
.lang-switch-opt:hover { background: var(--color-bg-subtle); }
.lang-switch-opt.is-active {
    color: var(--color-primary);
    background: var(--color-primary-tint);
}
.lang-switch-flag {
    display: inline-grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.lang-switch-opt.is-active .lang-switch-flag {
    background: var(--color-primary);
    color: var(--color-text-on-brand);
}
.lang-switch-name {
    flex: 1;
    min-width: 0;
}
.lang-switch-name small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-block-start: 1px;
}
.lang-switch-check {
    width: 16px; height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .lang-switch-menu, .lang-switch-caret { transition: none; }
}


/* ---- Reveal on scroll (kept for compat with existing JS in landing/base.html) ---- */
.reveal, .reveal-scale {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal-scale { transform: translateY(20px) scale(.97); }
.reveal.visible, .reveal-scale.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-scale { opacity: 1; transform: none; transition: none; }
}


/* =========================================================================
   Pricing — monthly/yearly toggle, anchor display, 3-tier grid
   ========================================================================= */

/* Cycle toggle pill */
.lp-cycle-toggle {
    display: inline-flex;
    background: var(--color-bg-subtle, #f1f5f9);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    margin: 0 auto 32px;
    display: flex;
    justify-content: center;
    max-width: max-content;
}
.lp-cycle-toggle__btn {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}
.lp-cycle-toggle__btn:hover { color: var(--color-text); }
.lp-cycle-toggle__btn.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(6,51,47,.08);
}
.lp-cycle-toggle__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.lp-cycle-toggle__save {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-success, #15803d);
    background: color-mix(in srgb, var(--color-success, #15803d) 12%, transparent);
    padding: 2px 8px;
    border-radius: 999px;
}

/* 3-tier pricing grid (Solo / Basic / Pro) */
.lp-pricing--3 {
    grid-template-columns: 1fr;
    max-width: 1140px;
}
@media (min-width: 768px) {
    .lp-pricing--3 { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (min-width: 1100px) {
    .lp-pricing--3 { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
}

/* Tagline below plan name */
.lp-price-tagline {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
    min-height: 2.4em; /* keep cards visually aligned even with short taglines */
}

/* Anchor row (strikethrough + launch tag) */
.lp-price-anchor {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: -4px;
}
.lp-price-original {
    font-size: 15px;
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    font-variant-numeric: tabular-nums;
}
.lp-price-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent, var(--color-primary)) 14%, transparent);
    color: var(--amber-700);
}
.lp-price-tag--soft {
    background: var(--color-bg-subtle, #f1f5f9);
    color: var(--color-text-secondary);
}

/* Amount block (one per billing cycle) */
.lp-price-amount-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-price-amount-block[hidden] { display: none; }

/* Yearly meta line (monthly-equivalent + savings) */
.lp-price-yearly-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--color-text-secondary);
}
.lp-price-savings {
    font-weight: 700;
    color: var(--color-success, #15803d);
}

/* Footnote + disclaimer */
.lp-price-footnote {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
    margin-top: 24px;
}
.lp-price-disclaimer {
    max-width: 720px;
    margin: 12px auto 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.6;
}

/* CTA: hide non-active cycle, prevent layout shift */
.lp-price-cta a[hidden] { display: none; }

/* =========================================================================
   Pricing page polish — header chips, two-line CTA, trust strip,
   comparison table, alt section, launch-info disclosure, mobile card order.
   These additions implement the senior UX review (see /ui-ux-polish output).
   ========================================================================= */

/* Accessibility — visually-hidden text for screen readers (used to expose the
   CSS-only "Most popular" badge to AT). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Header row: plan name + optional inline tag (used by Solo). */
.lp-price-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* Accent variant of the price tag — explicit alias so the template intent is
   readable. Visuals match the default tag (which is already accent-coloured). */
.lp-price-tag--accent {
    background: color-mix(in srgb, var(--color-accent, var(--color-primary)) 14%, transparent);
    color: var(--amber-700);
}

/* Small clarifier text under the price ("per store, billed monthly" /
   "Billed X JOD yearly"). Reduces ambiguity without competing with the price. */
.lp-price-clarifier {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.45;
}

/* Two-line CTA: main label ("Start 30-day free trial") + plan-name sub. */
.lp-btn--stacked {
    flex-direction: column;
    height: auto;
    padding: 12px 20px;
    gap: 2px;
    line-height: 1.2;
}
.lp-cta-main {
    font-size: 15px;
    font-weight: 700;
}
.lp-cta-sub {
    font-size: 12px;
    font-weight: 500;
    opacity: .85;
    letter-spacing: .01em;
}

/* Soft cycle transition — fade the now-visible amount block in. */
.lp-price-amount-block:not([hidden]) {
    animation: lpFadeIn 180ms ease-out;
}
@keyframes lpFadeIn {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Trust strip — sits under the cards. The "no nasty surprises" message that
   closes skeptics. Previously buried in 13px muted footnote text. */
.lp-trust-strip {
    list-style: none;
    padding: 0;
    margin: 28px auto 0;
    max-width: 920px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    color: var(--color-text-secondary);
    font-size: 13px;
}
.lp-trust-strip li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lp-trust-strip svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Launch-pricing disclosure — collapsed by default to keep the page calm. */
.lp-launch-info {
    max-width: 720px;
    margin: 16px auto 0;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted);
}
.lp-launch-info summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    list-style: none;
}
.lp-launch-info summary::-webkit-details-marker { display: none; }
.lp-launch-info[open] summary { margin-bottom: 8px; }
.lp-launch-info p {
    margin: 0;
    line-height: 1.6;
    text-align: center;
}

/* Alt section background — gives the comparison table its own canvas so it
   doesn't visually merge with the cards above. */
.lp-section--alt {
    background: var(--color-bg-subtle, #f7faf9);
}

/* Comparison table — uses the existing .lp-compare base styles (already
   defined earlier in this file at ~line 404). Adds group rows and yes/no
   cell content treatment, plus mobile overflow handling. */
.lp-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.lp-compare th[scope="row"] {
    background: transparent;
    text-align: start;
    font-weight: 500;
    color: var(--color-text);
}
.lp-compare-group th {
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-subtle, #f1f5f9));
    color: var(--color-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 10px 18px;
    text-align: start;
}
.lp-compare-yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}
.lp-compare-no {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1;
}
@media (max-width: 640px) {
    .lp-compare { min-width: 520px; }
}

/* Mobile card order: lead with the featured plan so the recommended option
   anchors expectations instead of being buried at the bottom.
   Solo (1) → Basic (2) → Pro (3, featured) becomes Pro → Basic → Solo
   on narrow screens. From 768px up, source order is restored. */
@media (max-width: 767px) {
    .lp-pricing--3 .lp-price-card { order: 2; }
    .lp-pricing--3 .lp-price-card--featured { order: 1; }
}