/* ============================================================
   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;
}

/* ---- 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(--color-accent, var(--color-primary));
}
.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(--color-accent, var(--color-primary));
}

/* 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; }
}