/* ============================================================
   LANDING 3 — "Conversation" layout. Sits on scene-base.css tokens
   (colors, fonts, header, footer, buttons) and scene-pricing.css.
   ============================================================ */

body { background: var(--bg); }

.lp3-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}

.lp3-accent { color: #bf4b8f; }
#pricing .section-head__title em,
.lp3 .pr-ent__title em { color: #bf4b8f; }
.lp3 .pr-card__vol { color: #bf4b8f; }
.lp3 .nav__links a::after { background: #bf4b8f; }
.lp3 .pr-scale__val,
.lp3 .pr-scale__val i,
.lp3 .pr-addon__icon { color: #bf4b8f; }
.lp3 .pr-addon__flag--offer {
    color: #bf4b8f;
    border-color: rgba(191, 75, 143, 0.42);
    background: rgba(191, 75, 143, 0.14);
}
.lp3 .pr-econ__tag {
    color: #bf4b8f;
    border-color: rgba(191, 75, 143, 0.42);
}
.lp3 .pr-card:not(.pr-card--featured)::before { background: linear-gradient(90deg, transparent, #bf4b8f, transparent); }
.lp3 .pr-card:hover {
    border-color: #bf4b8f;
    box-shadow: 0 24px 60px -30px rgba(191, 75, 143, 0.45);
}
.lp3 .pr-addon--offer::before { background: linear-gradient(180deg, #bf4b8f, transparent); }
.lp3 .pr-addon--offer:hover { border-color: #bf4b8f; }
.lp3 .pr-econ__bar-fill,
.lp3 .pr-econ__bar-fill--flat { background: #bf4b8f; }
.lp3 .social-tile-v2__mark,
.lp3 .contact-pill-v2 .label { color: #bf4b8f; }
.lp3 .pr-card__price,
.lp3 .pr-card__price .pr-card__amt,
.lp3 .pr-card__price .pr-card__cur { color: #bf4b8f; }
.lp3 .pr-switch__thumb {
    background: #bf4b8f;
    box-shadow: 0 6px 24px -6px rgba(191, 75, 143, 0.6);
}
/* On phones the thumb is hidden and the selected tab carries the color instead. */
@media (max-width: 700px) {
    .lp3 .pr-switch__btn[aria-selected="true"] {
        background: #bf4b8f;
        box-shadow: 0 6px 20px -8px rgba(191, 75, 143, 0.6);
    }
}

.lp3-btn { border-radius: 999px; padding: 1rem 1.6rem; font-size: 1rem; }
.lp3 .btn--primary { background: #bf4b8f; }
.lp3 .btn--primary:hover { background: #a63e7b; }

/* ---------- Hero ---------- */
.lp3-hero { padding: clamp(8rem, 18vh, 11rem) 0 0; position: relative; z-index: 2; }
.lp3-hero .eyebrow { margin-bottom: 1.75rem; }
.lp3-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 9vw, 8rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.05em;
    color: var(--ink);
}
.lp3-hero__title > span { display: block; }
:root[dir="rtl"] .lp3-hero__title { letter-spacing: 0; line-height: 1.15; }
.lp3-hero__foot {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 4rem;
    align-items: flex-end;
    justify-content: space-between;
}
.lp3-hero__lead {
    flex: 1 1 360px;
    max-width: 46ch;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    color: var(--ink-soft);
}
.lp3-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- Live delivery panel ---------- */
.lp3-live-wrap { position: relative; z-index: 2; margin-top: 3.5rem; }
.lp3-live {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 3rem;
    align-items: center;
    padding: clamp(1.75rem, 4.5vw, 3.5rem);
    border-radius: 36px;
    background: #bf4b8f;
    border: 1px solid transparent;
}
/* thin brand line along the top edge + a soft glow behind the feed */
.lp3-live::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #713cfa, rgba(113, 60, 250, 0));
}
.lp3-live::after {
    content: "";
    position: absolute;
    width: 560px; height: 560px;
    inset-inline-end: -180px;
    top: -200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(113, 60, 250, 0.45), rgba(113, 60, 250, 0) 70%);
    pointer-events: none;
}

.lp3-live__stat {
    position: relative;
    z-index: 1;
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    container-type: inline-size;
}
.lp3-live__channels { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.lp3-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}
.lp3-chip svg { width: 15px; height: 15px; }

/* the count */
.lp3-count__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}
.lp3-count__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
    animation: lp3-blink 1.6s ease-in-out infinite;
}
@keyframes lp3-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.lp3-count__value {
    font-family: var(--font-serif);
    font-size: clamp(4rem, 11vw, 9rem);
    /* Shrink long numbers to fit the column: ~0.6em per character (--chars is set by the template). */
    font-size: max(2rem, min(clamp(4rem, 11vw, 9rem), calc(100cqi / (var(--chars, 6) * 0.6))));
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
    color: #fff;
}
:root[dir="rtl"] .lp3-count__value { text-align: right; }
.lp3-count__sub { font-size: 15px; color: rgba(255, 255, 255, 0.9); }

/* ---------- Phone mockups (WhatsApp + SMS) ---------- */
.lp3-phones {
    position: relative;
    z-index: 1;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    gap: 32px;
    justify-content: flex-end;
    align-items: flex-start;
}
.lp3-phones__item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.lp3-phones__item--offset { margin-top: 48px; }

/* "Delivered" under each phone: a white pill so the green reads on the pink card */
.lp3-note__status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #15803d;
    white-space: nowrap;
}
.lp3-note__status svg { width: 16px; height: 16px; }

/* Shared frame. The screens keep their own light UI in both site themes. */
.lp3-phone {
    width: 300px;
    height: 620px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 46px;
    background: #16121C;
    box-shadow: 0 30px 60px -20px rgba(60, 10, 50, 0.45);
}
.lp3-phone__screen {
    width: 100%;
    height: 100%;
    border-radius: 37px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    color: #111;
    text-align: start;
}
.lp3-phone__status {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 20px 0 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
    direction: ltr;
}
.lp3-phone__island {
    position: absolute;
    left: 50%;
    top: 9px;
    width: 92px;
    height: 26px;
    margin-left: -46px;
    border-radius: 20px;
    background: #000;
}
.lp3-phone__icons { display: inline-flex; align-items: center; gap: 5px; }
.lp3-phone__signal { width: 17px; height: 11px; display: block; }
.lp3-phone__wifi { width: 15px; height: 11px; display: block; }
.lp3-phone__battery { width: 25px; height: 12px; display: block; }
.lp3-phone__back { width: 22px; height: 22px; flex: 0 0 22px; }
:root[dir="rtl"] .lp3-phone__back { transform: scaleX(-1); }

/* iPhone home indicator */
.lp3-phone__screen { position: relative; }
.lp3-phone__home {
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 120px;
    height: 5px;
    margin-left: -60px;
    border-radius: 3px;
    background: #111;
}

/* WhatsApp — iOS light theme */
.lp3-phone--wa .lp3-phone__screen { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-sans); }
:root[dir="rtl"] .lp3-phone--wa .lp3-phone__screen { font-family: var(--font-sans); }
.lp3-phone--wa .lp3-phone__status { background: #F6F6F6; color: #000; }
.lp3-wa__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px 8px;
    padding-inline: 6px 14px;
    background: #F6F6F6;
    border-bottom: 0.5px solid #D1D1D6;
    color: #000;
}
.lp3-wa__avatar {
    position: relative;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #070b1f;
}
/* Crop the wordmark PNG to its "R" (x 38–211, y 7–295 of 1418×367) and center it in the circle */
.lp3-wa__avatar img {
    /* square "R" mark: the full wordmark cropped to a circle read as a cut-off "Ro" */
    display: block;
    width: 100%;
    height: 100%;
    padding: 3px;              /* keeps the signal waves inside the circle; the tile matches the avatar background */
    box-sizing: border-box;
    object-fit: contain;
}
.lp3-wa__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.lp3-wa__who strong { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; }
.lp3-wa__who > span { font-size: 11.5px; color: #8696A0; }
.lp3-wa__verified {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #25D366;
    color: #fff;
}
.lp3-wa__verified svg { width: 9px; height: 9px; }
.lp3-wa__hicon { width: 22px; height: 22px; flex: 0 0 22px; margin-inline-start: 10px; }

.lp3-wa__chat {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: flex-end;
    padding: 10px 12px;
    background-color: #EFEAE2;
    /* faint doodle wallpaper */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d9cfc1' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M40 8l6 6M46 8l-6 6'/%3E%3Cpath d='M8 44c4-4 8 4 12 0'/%3E%3Crect x='38' y='38' width='10' height='8' rx='2'/%3E%3Cpath d='M28 28l2-4 2 4'/%3E%3C/g%3E%3C/svg%3E");
}
.lp3-wa__pill {
    align-self: center;
    max-width: 92%;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.lp3-wa__pill--day { background: #fff; color: #54656F; font-weight: 500; }
.lp3-wa__pill--secure { display: inline-flex; gap: 5px; align-items: flex-start; background: #FFEECD; color: #54656F; }
.lp3-wa__pill--secure svg { width: 11px; height: 11px; flex: 0 0 11px; margin-top: 2px; }
.lp3-wa__bubble {
    position: relative;
    align-self: flex-start;
    max-width: 84%;
    box-sizing: border-box;
    padding: 6px 8px 5px;
    margin-top: 4px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    font-size: 14px;
    line-height: 1.35;
    color: #111B21;
}
/* WhatsApp's tail: a small wedge at the top outer corner */
.lp3-wa__bubble--tail { border-start-start-radius: 0; }
.lp3-wa__bubble--tail::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: -7px;
    width: 8px;
    height: 13px;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
:root[dir="rtl"] .lp3-wa__bubble--tail::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.lp3-wa__time {
    float: inline-end;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-inline-start: 8px;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1;
    color: #667781;
}
.lp3-wa__time svg { width: 16px; height: 16px; color: #25D366; }
.lp3-wa__bubble--media { width: 84%; padding: 3px; }
.lp3-wa__media {
    height: 120px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #7C3AED, #BE4D8C);
    color: #fff;
}
.lp3-wa__media svg { width: 40px; height: 40px; }
.lp3-wa__text { padding: 6px 6px 4px; display: flow-root; }
.lp3-wa__footer { display: block; margin-top: 4px; font-size: 12px; color: #667781; }
.lp3-wa__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 -3px;
    padding: 8px;
    border-top: 0.5px solid #E9EDEF;
    color: #00A5F4;
    font-weight: 500;
    font-size: 14px;
}
.lp3-wa__cta:last-child { margin-bottom: -3px; }
.lp3-wa__cta svg { width: 15px; height: 15px; }
.lp3-wa__input {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 12px 26px;
    background: #F6F6F6;
    border-top: 0.5px solid #D1D1D6;
    color: #000;
}
.lp3-wa__ticon { width: 22px; height: 22px; flex: 0 0 22px; }
.lp3-wa__field {
    flex: 1 1 auto;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-inline: 10px;
    border-radius: 999px;
    border: 0.5px solid #D1D1D6;
    background: #fff;
    color: #8696A0;
}
.lp3-wa__field svg { width: 18px; height: 18px; }

/* SMS — iOS Messages */
.lp3-phone--sms .lp3-phone__screen { background: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-sans); }
:root[dir="rtl"] .lp3-phone--sms .lp3-phone__screen { font-family: var(--font-sans); }
.lp3-phone--sms .lp3-phone__status { background: #F6F6F6; color: #000; }
.lp3-sms__header {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 12px 8px;
    background: #F6F6F6;
    border-bottom: 0.5px solid #D1D1D6;
}
.lp3-sms__back { position: absolute; inset-inline-start: 8px; top: 14px; width: 26px; height: 26px; color: #007AFF; }
.lp3-sms__avatar {
    flex: 0 0 46px;
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(180deg, #A5ABB8, #858994);
    color: #fff;
}
.lp3-sms__avatar svg { display: block; width: 100%; height: 100%; }
.lp3-sms__name { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; color: #000; }
.lp3-sms__name svg { width: 10px; height: 10px; color: #8E8E93; }
:root[dir="rtl"] .lp3-sms__name svg { transform: scaleX(-1); }
.lp3-sms__thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: flex-end;
    padding: 12px 14px;
}
.lp3-sms__meta {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 6px 0 4px;
    font-size: 11px;
    line-height: 1.35;
    color: #8E8E93;
}
.lp3-sms__meta strong { font-weight: 600; }
.lp3-sms__bubble {
    position: relative;
    align-self: flex-start;
    max-width: 76%;
    padding: 7px 12px;
    border-radius: 18px;
    background: #E9E9EB;
    color: #000;
    font-size: 15px;
    line-height: 1.3;
}
/* the classic Messages tail on the last bubble of a group */
.lp3-sms__bubble--tail { margin-bottom: 6px; }
.lp3-sms__bubble--tail::before,
.lp3-sms__bubble--tail::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 18px;
}
.lp3-sms__bubble--tail::before {
    inset-inline-start: -7px;
    width: 20px;
    background: #E9E9EB;
    border-end-end-radius: 16px 14px;
}
.lp3-sms__bubble--tail::after {
    inset-inline-start: -26px;
    width: 26px;
    background: #fff;
    border-end-end-radius: 10px;
}
:root[dir="rtl"] .lp3-sms__bubble--tail::before { border-end-end-radius: 0; border-end-start-radius: 16px 14px; }
:root[dir="rtl"] .lp3-sms__bubble--tail::after { border-end-end-radius: 0; border-end-start-radius: 10px; }
.lp3-sms__notice {
    align-self: center;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: #8E8E93;
    text-align: center;
}
.lp3-sms__junk { color: #007AFF; }
.lp3-sms__input {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 26px;
}
.lp3-sms__plus {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #E9E9EB;
    color: #8E8E93;
}
.lp3-sms__plus svg { width: 18px; height: 18px; }
.lp3-sms__field {
    flex: 1 1 auto;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 14px 10px;
    border: 1px solid #C7C7CC;
    border-radius: 999px;
    color: #C7C7CC;
    font-size: 15px;
}
.lp3-sms__field svg { width: 18px; height: 18px; color: #8E8E93; }

/* Tablet: shrink the phones (zoom shrinks the layout box too, unlike transform) */
@media (max-width: 1024px) {
    .lp3-phones { flex: 1 1 auto; justify-content: center; }
    .lp3-phones__item { zoom: 0.85; }
}
/* Phone: stat on top, phones scroll sideways */
@media (max-width: 768px) {
    /* nowrap: a wrapping column grows to its widest item, so the sideways phone strip would widen the panel and clip the copy */
    .lp3-live { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2rem; }
    /* in a column the 320px basis becomes height, leaving an empty gap under the chips */
    .lp3-live__stat { flex: 0 0 auto; }
    .lp3-phones {
        flex: 0 0 auto;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        margin-inline: calc(-1 * clamp(1.75rem, 4.5vw, 3.5rem));
        padding-inline: clamp(1.75rem, 4.5vw, 3.5rem);
        scrollbar-width: none;
    }
    .lp3-phones::-webkit-scrollbar { display: none; }
    .lp3-phones__item { scroll-snap-align: center; }
    .lp3-phones__item--offset { margin-top: 0; }
}

/* ---------- Sections ---------- */
.lp3-section { position: relative; z-index: 2; padding: clamp(5rem, 12vh, 8rem) 0 0; }
.lp3-section--flush { padding-top: clamp(3rem, 8vh, 5rem); }
.lp3-h2 {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--ink);
    max-width: 16ch;
}
:root[dir="rtl"] .lp3-h2 { letter-spacing: 0; line-height: 1.2; }

/* ---------- Glass card tokens, shared by "How it works" and the capabilities bento ---------- */
.lp3-steps,
.lp3-bento {
    --st-accent: #bf4b8f;
    --st-tint: #e08cbc;
    --st-shade: #8f2f68;
    --st-soft: rgba(191, 75, 143, 0.16);
    --st-on-grad: #3a0d27;      /* text on the pink gradient: white fails contrast on the #e08cbc end */
    --st-grad: linear-gradient(135deg, #bf4b8f, #e08cbc);
    --st-accent-ink: #e08cbc;   /* brand-colored text on dark glass */
    --st-warn: #fbbf24;
    --st-glass: rgba(22, 29, 45, 0.55);
    --st-border: rgba(255, 255, 255, 0.09);
    --st-glow: 0 28px 70px -34px rgba(191, 75, 143, 0.6), 0 0 40px -18px rgba(191, 75, 143, 0.25);
    --st-panel: rgba(255, 255, 255, 0.035);
    --st-line: rgba(255, 255, 255, 0.08);
    --st-row: rgba(255, 255, 255, 0.04);
    --st-chip: rgba(255, 255, 255, 0.06);
    --st-track: rgba(255, 255, 255, 0.08);
    --st-ok: #4ade80;
    --st-bad: #f87171;
    --st-bubble: rgba(37, 211, 102, 0.12);
    --st-bubble-line: rgba(37, 211, 102, 0.24);
}

/* ---------- How it works: glass step cards with product mockups ---------- */
.lp3-steps {
    position: relative;
    isolation: isolate;
    margin-top: 3.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    grid-auto-rows: 1fr;
    gap: 1.5rem;
}
:root[data-theme="light"] .lp3-steps,
:root[data-theme="light"] .lp3-bento {
    --st-accent-ink: #8f2f68;
    --st-warn: #b45309;
    --st-bad: #b91c1c;
    --st-glass: rgba(255, 255, 255, 0.55);
    --st-border: rgba(191, 75, 143, 0.18);
    --st-glow: 0 28px 70px -36px rgba(191, 75, 143, 0.45), 0 0 40px -20px rgba(191, 75, 143, 0.2);
    --st-panel: rgba(255, 255, 255, 0.7);
    --st-line: rgba(6, 11, 32, 0.08);
    --st-row: rgba(6, 11, 32, 0.03);
    --st-chip: rgba(6, 11, 32, 0.05);
    --st-track: rgba(6, 11, 32, 0.08);
    --st-ok: #15803d;
    --st-bad: #dc2626;
    --st-bubble: rgba(37, 211, 102, 0.14);
    --st-bubble-line: rgba(22, 163, 74, 0.25);
}
/* stacked on phones: let each card hug its copy instead of matching the tallest */
@media (max-width: 680px) {
    .lp3-steps { grid-auto-rows: auto; }
}
/* soft color behind the glass so the blur has something to catch */
.lp3-steps::before {
    content: "";
    position: absolute;
    inset: 12% 8%;
    z-index: -1;
    background:
        radial-gradient(40% 60% at 25% 40%, rgba(191, 75, 143, 0.35), transparent 70%),
        radial-gradient(40% 60% at 78% 60%, rgba(191, 75, 143, 0.3), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.lp3-step {
    background: var(--st-glass);
    border: 1px solid var(--st-border);
    border-radius: 18px;
    box-shadow: var(--st-glow);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.lp3-step--strong {
    background: linear-gradient(160deg, rgba(191, 75, 143, 0.18), rgba(191, 75, 143, 0.08)), var(--st-glass);
    border-color: rgba(191, 75, 143, 0.32);
}

.lp3-step__copy {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0 0.25rem 0.25rem;
}
.lp3-step__n {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--st-accent);
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(191, 75, 143, 0.7);
}
.lp3-step h3 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}
:root[dir="rtl"] .lp3-step h3 { letter-spacing: 0; }
.lp3-step p { grid-column: 1 / -1; color: var(--ink-soft); line-height: 1.55; }

/* ---- mockup shell (same height in every card so the titles line up) ---- */
.lp3-mock {
    container-type: inline-size;
    height: 252px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: var(--st-panel);
    border: 1px solid var(--st-line);
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ink);
    overflow: hidden;
    user-select: none;
}
.lp3-mock strong { font-variant-numeric: tabular-nums; }
.lp3-ltr { direction: ltr; unicode-bidi: isolate; }
.lp3-mock__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
}
.lp3-mock__file,
.lp3-mock__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp3-mock__file svg { width: 16px; height: 16px; flex: none; color: #22a35a; }
.lp3-mock__tag {
    flex: none;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--st-chip);
    color: var(--ink-soft);
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
}
.lp3-mock__foot {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--st-line);
    color: var(--ink-soft);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* step 1 — spreadsheet rows */
.lp3-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.lp3-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 9px;
    background: var(--st-row);
    border: 1px solid transparent;
}
.lp3-row--bad { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.28); }
.lp3-row__av {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, hsl(var(--av, 265deg) 70% 62%), hsl(calc(var(--av, 265deg) + 35deg) 72% 52%));
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
}
.lp3-row__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp3-row__phone { color: var(--ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp3-row--bad .lp3-row__phone { color: var(--st-bad); text-decoration: underline wavy rgba(239, 68, 68, 0.6); text-underline-offset: 3px; }
.lp3-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.lp3-badge svg { width: 11px; height: 11px; }
.lp3-badge--ok { color: var(--st-ok); background: rgba(34, 197, 94, 0.13); }
.lp3-badge--bad { color: #fff; background: #ef4444; box-shadow: 0 4px 12px -4px rgba(239, 68, 68, 0.7); }
@container (max-width: 250px) {
    .lp3-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
    .lp3-row__phone { display: none; }
}

/* step 2 — filter chips + reachable count */
.lp3-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp3-fchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--st-chip);
    border: 1px solid var(--st-line);
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}
.lp3-fchip--on {
    background: var(--st-accent);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(191, 75, 143, 0.8);
}
.lp3-fchip i { font-style: normal; opacity: 0.75; line-height: 1; }
.lp3-reach {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 11px;
    background: var(--st-row);
    border: 1px solid var(--st-line);
}
.lp3-reach__label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 11px; }
.lp3-reach__count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: var(--ink-soft); }
.lp3-reach__count strong {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
}

/* step 3 — live campaign */
.lp3-mock__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.13);
    color: var(--st-ok);
    font-size: 10.5px;
    font-weight: 600;
}
.lp3-live-dot {
    position: relative;
    flex: none;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
}
.lp3-live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: lp3-pulse 1.8s ease-out infinite;
}
.lp3-live-dot--brand { background: #bf4b8f; }
@keyframes lp3-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(3); opacity: 0; }
}
.lp3-promo {
    align-self: flex-start;
    max-width: 92%;
    padding: 9px 11px;
    border-radius: 12px;
    border-start-start-radius: 3px;
    background: var(--st-bubble);
    border: 1px solid var(--st-bubble-line);
    font-size: 12px;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
}
.lp3-promo__time {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 9.5px;
}
.lp3-promo__time svg { width: 13px; height: 13px; color: #53bdeb; }
.lp3-promo__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 7px -11px -9px;
    padding: 6px;
    border-top: 1px solid var(--st-bubble-line);
    color: #53bdeb;
    font-weight: 600;
    font-size: 11.5px;
}
:root[data-theme="light"] .lp3-promo__cta { color: #0a84c6; }
.lp3-promo__cta svg { width: 13px; height: 13px; }
.lp3-progress { display: flex; flex-direction: column; gap: 5px; }
.lp3-progress__label { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 10.5px; }
.lp3-progress__label strong { color: var(--ink); font-weight: 600; }
.lp3-tiles { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lp3-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-radius: 10px;
    background: var(--st-row);
    border: 1px solid var(--st-line);
    min-width: 0;
}
.lp3-tile strong { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
.lp3-tile:first-child strong { color: var(--st-accent); }
.lp3-tile span { color: var(--ink-soft); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* shared progress bar — fills from the inline start, animates in with the card */
.lp3-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--st-track);
    overflow: hidden;
}
.lp3-bar > span {
    display: block;
    height: 100%;
    width: var(--p, 0%);
    border-radius: inherit;
    background: var(--st-accent);
    box-shadow: 0 0 12px rgba(191, 75, 143, 0.55);
    transition: width 1.2s cubic-bezier(.2, .7, .2, 1) 0.35s;
}
.lp3-step.reveal:not(.is-in) .lp3-bar > span { width: 0; }

/* ---------- Capabilities: glass bento with product mockups ---------- */
.lp3-bento {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.25rem;
}
.lp3-bento::before {
    content: "";
    position: absolute;
    inset: 15% 10%;
    z-index: -1;
    background:
        radial-gradient(35% 45% at 70% 25%, rgba(191, 75, 143, 0.3), transparent 70%),
        radial-gradient(35% 45% at 25% 75%, rgba(224, 140, 188, 0.22), transparent 70%);
    filter: blur(48px);
    pointer-events: none;
}
.lp3-bcard--lg { grid-column: span 3; }
.lp3-bcard--sm { grid-column: span 2; }
.lp3-bcard--wide { grid-column: span 4; }

.lp3-bcard {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.1rem;
    background: var(--st-glass);
    border: 1px solid var(--st-border);
    border-radius: 22px;
    box-shadow: var(--st-glow);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    /* .reveal owns opacity/transform; the hover lift uses `translate` so the two never fight */
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2, .7, .2, 1),
                translate 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0s, 0s, 0s;
}
.lp3-bento .lp3-bcard:hover {
    translate: 0 -4px;
    border-color: rgba(191, 75, 143, 0.5);
    box-shadow: 0 30px 70px -30px rgba(191, 75, 143, 0.65), 0 0 0 1px rgba(191, 75, 143, 0.12);
}
.lp3-bcard__copy { padding: 0 0.3rem 0.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.lp3-bcard h3 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}
:root[dir="rtl"] .lp3-bcard h3 { letter-spacing: 0; }
.lp3-bcard p { color: var(--ink-soft); line-height: 1.5; }

/* mockup shell */
.lp3-bmock {
    flex: 1 1 auto;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px;
    border-radius: 16px;
    background: var(--st-panel);
    border: 1px solid var(--st-line);
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ink);
    overflow: hidden;
    user-select: none;
}
.lp3-bcard--lg .lp3-bmock { min-height: 236px; }
:root[dir="rtl"] .lp3-flip { transform: scaleX(-1); }

/* status badges: green / amber are reserved for these */
.lp3-sbadge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.lp3-sbadge svg { width: 11px; height: 11px; }
.lp3-sbadge--ok { color: var(--st-ok); background: rgba(34, 197, 94, 0.14); }
.lp3-sbadge--warn { color: var(--st-warn); background: rgba(245, 158, 11, 0.15); }
.lp3-sbadge--bad { color: var(--st-bad); background: rgba(239, 68, 68, 0.14); font-variant-numeric: tabular-nums; }

/* optional "New" tag: top inline-end corner (top-right in LTR, top-left in RTL).
   Remove the <span class="lp3-new"> from a card and its mockup spacing goes back to normal. */
.lp3-new {
    position: absolute;
    z-index: 1;
    inset-block-start: 1.6rem;
    inset-inline-end: 1.6rem;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--st-soft);
    border: 1px solid rgba(191, 75, 143, 0.4);
    color: var(--st-accent-ink);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
}
.lp3-bcard:has(> .lp3-new) .lp3-bmock { padding-block-start: 40px; }
/* brand pill */
.lp3-pill {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--st-soft);
    color: var(--st-accent-ink);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.lp3-pill--grad { background: var(--st-grad); color: var(--st-on-grad); }

/* WhatsApp template */
.lp3-tpl { display: flex; flex-direction: column; gap: 10px; width: min(100%, 360px); margin-inline: auto; }
.lp3-tpl__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp3-tpl__name { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.lp3-tpl__msg {
    border-radius: 14px;
    border-start-start-radius: 4px;
    background: var(--st-row);
    border: 1px solid var(--st-line);
    overflow: hidden;
}
.lp3-tpl__media {
    position: relative;
    display: grid;
    place-items: center;
    height: 74px;
    margin: 6px 6px 0;
    border-radius: 10px;
    background: var(--st-grad);
    color: #fff;
}
.lp3-tpl__media svg { width: 26px; height: 26px; }
.lp3-tpl__mtag {
    position: absolute;
    inset-block-end: 6px;
    inset-inline-start: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 9.5px;
    font-weight: 500;
}
.lp3-tpl__body { padding: 9px 11px 10px; font-size: 12.5px; line-height: 1.9; color: var(--ink); }
.lp3-param {
    display: inline-block;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--st-soft);
    border: 1px solid rgba(191, 75, 143, 0.35);
    color: var(--st-accent-ink);
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.6;
}
.lp3-tpl__btns { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--st-line); }
.lp3-tpl__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    color: var(--st-accent-ink);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.lp3-tpl__btn + .lp3-tpl__btn { border-inline-start: 1px solid var(--st-line); }
.lp3-tpl__btn svg { width: 13px; height: 13px; flex: none; }

/* dashboard */
.lp3-dash { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; height: 100%; }
.lp3-dash__chart {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 10px 0;
    border-radius: 12px;
    background: var(--st-row);
    border: 1px solid var(--st-line);
    overflow: hidden;
}
.lp3-dash__label { color: var(--ink-soft); font-size: 11px; }
.lp3-dash__svg { display: block; width: calc(100% + 20px); margin-inline: -10px; flex: 1 1 auto; min-height: 120px; }
:root[dir="rtl"] .lp3-dash__svg { transform: scaleX(-1); }  /* time runs right-to-left in Arabic */
.lp3-dash__grid { fill: none; stroke: var(--st-line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.lp3-dash__tiles { display: flex; flex-direction: column; gap: 10px; min-width: 118px; }
.lp3-dash__tile {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--st-row);
    border: 1px solid var(--st-line);
}
.lp3-dash__tile strong {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.lp3-dash__tile:first-child strong { color: var(--st-accent-ink); }
.lp3-dash__tile span { color: var(--ink-soft); font-size: 11px; }

/* sender names + roles rows */
.lp3-blist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp3-bitem {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 11px;
    background: var(--st-row);
    border: 1px solid var(--st-line);
    min-width: 0;
}
.lp3-bitem__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--st-soft);
    color: var(--st-accent-ink);
}
.lp3-bitem__icon svg { width: 15px; height: 15px; }
:root[dir="rtl"] .lp3-bitem__icon svg { transform: scaleX(-1); }
.lp3-bitem__name { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; }
.lp3-bitem__name--plain { font-family: var(--font-sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.lp3-bitem__av {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--st-grad);
    color: var(--st-on-grad);
    font-size: 10.5px;
    font-weight: 700;
}
.lp3-bitem__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lp3-bitem__who strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp3-bitem__who span { color: var(--ink-soft); font-size: 10.5px; }

/* notification toast */
.lp3-bmock--center { align-items: center; }
.lp3-toast-stack { position: relative; width: min(100%, 290px); animation: lp3-float 4s ease-in-out infinite; }
.lp3-toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--st-glass);
    border: 1px solid var(--st-border);
    box-shadow: 0 16px 30px -18px rgba(191, 75, 143, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.lp3-toast--ghost {
    position: absolute;
    inset: 10px 14px -10px;
    padding: 0;
    opacity: 0.5;
    box-shadow: none;
}
.lp3-toast__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--st-grad);
    color: #fff;
}
.lp3-toast__icon svg { width: 16px; height: 16px; }
.lp3-toast__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lp3-toast__text strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp3-toast__text span { color: var(--ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
@keyframes lp3-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* scheduling: week strip */
.lp3-bmock { gap: 10px; }
.lp3-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.lp3-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    border-radius: 9px;
    background: var(--st-row);
    border: 1px solid var(--st-line);
    min-width: 0;
}
.lp3-day span { color: var(--ink-soft); font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; }
.lp3-day strong { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp3-day--on { background: var(--st-accent); border-color: transparent; box-shadow: 0 8px 18px -8px rgba(191, 75, 143, 0.8); }
.lp3-day--on span,
.lp3-day--on strong { color: #fff; }

/* personalization + opt-out bubbles */
.lp3-vars { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--ink); }
.lp3-vars__arrow { display: grid; place-items: center; color: var(--st-accent-ink); opacity: 0.8; }
.lp3-vars__arrow svg { width: 16px; height: 16px; }
.lp3-bubble {
    align-self: flex-start;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 14px;
    border-end-start-radius: 4px;
    background: var(--st-soft);
    border: 1px solid rgba(191, 75, 143, 0.3);
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.4;
}

/* campaign reports: centred funnel */
.lp3-funnel { display: flex; flex-direction: column; gap: 10px; }
.lp3-funnel__row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 56px; align-items: center; gap: 12px; }
.lp3-funnel__label { color: var(--ink-soft); font-size: 12px; }
.lp3-funnel__track { display: flex; justify-content: center; height: 26px; }
.lp3-funnel__bar {
    width: var(--w, 100%);
    height: 100%;
    border-radius: 8px;
    background: var(--st-grad);
    transition: width 1.1s cubic-bezier(.2, .7, .2, 1) 0.3s;
}
.lp3-funnel__row + .lp3-funnel__row .lp3-funnel__bar { opacity: 0.85; }
.lp3-funnel__row:last-child .lp3-funnel__bar { opacity: 0.7; }
.lp3-bcard.reveal:not(.is-in) .lp3-funnel__bar { width: 0; }
.lp3-funnel__val { text-align: end; font-family: var(--font-serif); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
:root[dir="rtl"] .lp3-funnel__val { text-align: start; } /* .lp3-ltr flips "end" to the left; keep it on the outer edge */

/* Arabic + English: two mini panels */
.lp3-langs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 8px;
}
.lp3-lang {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
    border-radius: 12px;
    background: var(--st-row);
    border: 1px solid var(--st-line);
    text-align: start;
    min-width: 0;
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}
.lp3-lang--ar { font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif; }
.lp3-lang__tag {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--st-soft);
    color: var(--st-accent-ink);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
}
.lp3-lang__hello { padding-inline-end: 28px; font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.lp3-lang--ar .lp3-lang__hello { letter-spacing: 0; }
.lp3-lang__text { color: var(--ink-soft); font-size: 11.5px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.lp3-lang__cta {
    margin-top: 2px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--st-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* tablet: two columns. `dense` lets Sender names fill the gap left beside Opt-out control */
@media (max-width: 960px) {
    .lp3-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
    .lp3-bcard--lg,
    .lp3-bcard--wide,
    .lp3-bcard--sm:last-child { grid-column: 1 / -1; }
    .lp3-bcard--sm { grid-column: span 1; }
}
/* phone: one column */
@media (max-width: 640px) {
    .lp3-bento { grid-template-columns: minmax(0, 1fr); }
    .lp3-bcard--sm:last-child { grid-column: auto; }
    .lp3-dash { grid-template-columns: minmax(0, 1fr); }
    .lp3-dash__tiles { flex-direction: row; }
    .lp3-funnel__row { grid-template-columns: 70px minmax(0, 1fr) 48px; gap: 8px; }
}

.lp3-dev {
    background: var(--bg-2);
    border: 1px solid var(--ink-line);
    border-radius: 36px;
    padding: clamp(1.75rem, 5vw, 4rem);
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: center;
}
.lp3-dev__copy { flex: 1 1 340px; display: flex; flex-direction: column; gap: 1rem; }
.lp3-dev__copy p { font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }
.lp3-code {
    flex: 1 1 460px;
    min-width: 0;
    margin: 0;
    background: #060b20;
    color: #ece8e1;
    border: 1px solid rgba(236, 232, 225, 0.11);
    border-radius: 24px;
    padding: 1.75rem;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.7;
    overflow-x: auto;
    text-align: left;
}
.lp3-code .m { color: #a98bff; }
.lp3-code .k { color: #ff7aa8; }
.lp3-code .ok { color: #14c5e1; }

/* ---------- Final CTA (inside the existing contact section) ---------- */
.lp3-cta {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    margin-bottom: 4rem;
}
.lp3-cta__title {
    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 7vw, 6rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.055em;
    color: var(--ink);
}
.lp3-cta__title > span { display: block; }
:root[dir="rtl"] .lp3-cta__title { letter-spacing: 0; line-height: 1.2; }
.lp3-cta .lp3-actions { justify-content: center; }

/* Pricing keeps its own styles; drop the old phase counters that no longer match. */
.lp3 .section-head__phase { display: none; }

@media (prefers-reduced-motion: reduce) {
    .lp3-count__dot { animation: none; }
    .lp3-live-dot::after { animation: none; }
    .lp3-step.reveal .lp3-bar > span { width: var(--p, 0%); transition: none; }
    .lp3-toast-stack { animation: none; }
    .lp3-bcard.reveal .lp3-funnel__bar { width: var(--w, 100%); transition: none; }
    .lp3-bcard { transition: box-shadow 0.2s ease, border-color 0.2s ease; }
    .lp3-bento .lp3-bcard:hover { translate: none; }
}

/* ============================================================
   Contact form, footer and chat button
   ============================================================ */
.lp3 {
    --lp3-pink: #bf4b8f;
    --lp3-pink-ink: #e08cbc;            /* pink text on dark surfaces (AA on --bg) */
    --lp3-ok: #4ade80;
    --lp3-err: #f87171;
}
:root[data-theme="light"] .lp3 {
    --lp3-pink-ink: #8f2f68;            /* #bf4b8f is below 4.5:1 on the light background for small text */
    --lp3-ok: #15803d;
    --lp3-err: #b91c1c;
}
.lp3 [hidden] { display: none !important; }
.lp3 .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
:where(.lp3) :where(a, button, summary, select, input, textarea):focus-visible {
    outline: 2px solid var(--lp3-pink);
    outline-offset: 3px;
}

/* ---------- Live panel without the public counter ---------- */
.lp3-live__title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #fff;
    max-width: 14ch;
}
:root[dir="rtl"] .lp3-live__title { letter-spacing: 0; line-height: 1.25; }
.lp3-live__lead { max-width: 40ch; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }

/* ---------- Contact form ---------- */
.lp3 .contact-card-v2 .lp3-form p { margin: 0; }
.lp3-form { color-scheme: dark; }
:root[data-theme="light"] .lp3-form { color-scheme: light; }
.lp3-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.lp3-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.lp3-field--full { grid-column: 1 / -1; }
.lp3-field label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.lp3-field__opt { font-weight: 400; color: var(--ink-mute); }
.lp3-field input,
.lp3-field select,
.lp3-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lp3-field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.lp3-field ::placeholder { color: var(--ink-mute); opacity: 1; }
.lp3-field input:focus,
.lp3-field select:focus,
.lp3-field textarea:focus {
    outline: 2px solid var(--lp3-pink);
    outline-offset: 1px;
    border-color: var(--lp3-pink);
}
.lp3-field [aria-invalid="true"] { border-color: var(--lp3-err); }
:root[dir="rtl"] .lp3-field input[dir="ltr"] { text-align: right; }
.lp3 .contact-card-v2 .lp3-field__hint { font-size: 12.5px; color: var(--ink-mute); }
.lp3 .contact-card-v2 .lp3-field__error { font-size: 13px; font-weight: 500; color: var(--lp3-err); }

.lp3-form__bundle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label clear" "value clear";
    align-items: center;
    gap: 0.2rem 0.75rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.6rem;
    padding-inline-start: 0.95rem;
    border: 1px solid rgba(191, 75, 143, 0.42);
    border-radius: var(--radius-lg);
    background: rgba(191, 75, 143, 0.1);
}
.lp3-form__bundle-label {
    grid-area: label;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
:root[dir="rtl"] .lp3-form__bundle-label { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; }
.lp3-form__bundle strong { grid-area: value; font-weight: 600; color: var(--ink); }
.lp3-form__bundle-clear {
    grid-area: clear;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}
.lp3-form__bundle-clear:hover { background: rgba(191, 75, 143, 0.16); color: var(--ink); }
.lp3-form__bundle-clear svg { width: 18px; height: 18px; }

/* Honeypot: off-screen for people, still in the DOM for bots. Clipped rather than shifted so RTL never scrolls. */
.lp3-hp {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.lp3-form__status {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-lg);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink);
}
.lp3-form__status:focus { outline: none; }
.lp3-form__status.is-success { border-color: var(--lp3-ok); background: color-mix(in oklab, var(--lp3-ok) 12%, transparent); }
.lp3-form__status.is-error { border-color: var(--lp3-err); background: color-mix(in oklab, var(--lp3-err) 12%, transparent); }

.lp3-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.lp3-form__actions .btn:disabled { opacity: 0.7; cursor: progress; }
.lp3 .contact-card-v2 .lp3-form__alt { margin: 1.25rem 0 0; font-size: 14px; color: var(--ink-mute); }
.lp3-form__alt a { color: var(--lp3-pink-ink); font-weight: 500; text-underline-offset: 3px; }

/* Grid items default to their min-content width; the long interest options would push the card past 360px. */
.lp3 .contact-v2 > * { min-width: 0; }
.lp3-field select { max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 900px) { .lp3 .contact-v2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
    .lp3-form__grid { grid-template-columns: minmax(0, 1fr); }
    .lp3-form__actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Footer ---------- */
.lp3 .site-footer__col h4 { color: #bf4b8f; }
.lp3 .site-footer__row { color: var(--ink-mute); }   /* --ink-faint is below AA for text */
.lp3-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.lp3-footer__address {
    margin-top: 1.1rem;
    display: grid;
    gap: 0.2rem;
    font-style: normal;
    font-size: 14px;
    color: var(--ink-mute);
}
.lp3-footer__address strong { font-weight: 600; color: var(--ink); }
@media (max-width: 820px) {
    .lp3-footer__grid { grid-template-columns: 1fr 1fr; }
    .lp3-footer__grid .site-footer__brand { grid-column: 1 / -1; }
}

/* ---------- Floating WhatsApp button ----------
   Sits on the inline-end corner above the safe area. A cookie banner or bottom bar added later should set
   --lp3-fab-lift on .lp3 to its height so the two never overlap. Hidden while the mobile menu is open. */
.lp3-fab {
    position: fixed;
    z-index: 40;
    inset-inline-end: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--lp3-fab-lift, 0px));
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 52px;
    padding: 0.8rem 1.15rem;
    border-radius: 999px;
    background: var(--lp3-pink);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 16px 40px -14px rgba(191, 75, 143, 0.75);
    transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease, visibility 0.2s;
}
.lp3-fab:hover { background: #a63e7b; transform: translateY(-2px); }
.lp3-fab svg { width: 22px; height: 22px; flex: none; }
.lp3:has(#siteNav.is-open) .lp3-fab { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 480px) {
    .lp3-fab { padding: 0; width: 52px; justify-content: center; }
    .lp3-fab__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lp3-fab { transition: none; }
    .lp3-fab:hover { transform: none; }
}

/* ---------- Contact + Follow cards as collapsed accordions ---------- */
.lp3 .contact-v2 { align-items: start; }   /* a closed card should not stretch to its neighbour's height */
.lp3 .lp3-acc { display: block; padding: 0; }
.lp3-acc__summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.75rem;
    cursor: pointer;
    border-radius: var(--radius-lg);
}
.lp3-acc__summary::-webkit-details-marker { display: none; }
.lp3-acc__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.lp3 .lp3-acc__head h3 { margin: 0; }
.lp3-acc__icon {
    flex: none;
    width: 22px; height: 22px;
    color: var(--lp3-pink-ink);
    transition: transform 0.2s ease;
}
.lp3-acc__details[open] .lp3-acc__icon { transform: rotate(45deg); }
.lp3-acc__summary:hover .lp3-acc__icon { color: var(--lp3-pink); }
.lp3-acc__body { padding: 0 1.75rem 1.75rem; }
@media (max-width: 560px) {
    .lp3-acc__summary { padding: 1.25rem 1.1rem; }
    .lp3-acc__body { padding: 0 1.1rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .lp3-acc__icon { transition: none; } }

/* ============================================================
   Page loader + hero entrance
   html.lp3-js       JavaScript is running (set in <head>), so hidden states are safe to apply
   html.lp3-loading  first load: overlay visible, hero waiting
   html.lp3-ready    loaded: overlay fades out, hero plays in
   html.lp3-leaving  refresh / navigation away: overlay fades back in
   ============================================================ */
.lp3-loader {
    position: fixed;
    inset: 0;
    z-index: 1000;              /* above the fixed header (50) and the chat button (40) */
    display: grid;
    place-items: center;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.lp3-loading .lp3-loader,
.lp3-leaving .lp3-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s;
}
.lp3-loading body { overflow: hidden; }
/* The mark, waves and progress bar themselves are drawn by page_loader.css (shared with the app pages). */

/* Hero entrance: header drops in, then eyebrow, title lines, lead and buttons rise in turn. */
.lp3-js .site-header,
.lp3-js .lp3-hero .eyebrow,
.lp3-js .lp3-hero__title > span,
.lp3-js .lp3-hero__lead,
.lp3-js .lp3-hero .lp3-actions {
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1);
}
.lp3-js:not(.lp3-ready) .site-header { opacity: 0; transform: translateY(-16px); }
.lp3-js:not(.lp3-ready) .lp3-hero .eyebrow,
.lp3-js:not(.lp3-ready) .lp3-hero__title > span,
.lp3-js:not(.lp3-ready) .lp3-hero__lead,
.lp3-js:not(.lp3-ready) .lp3-hero .lp3-actions { opacity: 0; transform: translateY(28px); }
.lp3-ready .lp3-hero .eyebrow { transition-delay: 0.1s; }
.lp3-ready .lp3-hero__title > span:nth-child(1) { transition-delay: 0.18s; }
.lp3-ready .lp3-hero__title > span:nth-child(2) { transition-delay: 0.28s; }
.lp3-ready .lp3-hero__title > span:nth-child(3) { transition-delay: 0.38s; }
.lp3-ready .lp3-hero__lead { transition-delay: 0.5s; }
.lp3-ready .lp3-hero .lp3-actions { transition-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
    .lp3-js:not(.lp3-ready) .site-header,
    .lp3-js:not(.lp3-ready) .lp3-hero .eyebrow,
    .lp3-js:not(.lp3-ready) .lp3-hero__title > span,
    .lp3-js:not(.lp3-ready) .lp3-hero__lead,
    .lp3-js:not(.lp3-ready) .lp3-hero .lp3-actions { transform: none; }
}

/* ============================================================
   Responsive fixes (all devices)
   ============================================================ */

/* Notched phones in landscape: keep content clear of the camera cut-out and rounded corners */
.lp3 .lp3-wrap,
.lp3 .site-header .container {
    padding-left: max(clamp(1.25rem, 3vw, 2.5rem), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(1.25rem, 3vw, 2.5rem), env(safe-area-inset-right, 0px));
}

/* RTL header on small screens: scene-base squeezes the brand into 20% of the row, pushing the logo off-screen */
@media (max-width: 980px) {
    :root[dir="rtl"] .lp3 .brand { width: auto; flex: 0 0 auto; }
    :root[dir="rtl"] .lp3 .nav { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* Code sample: smaller type on phones so more of each line fits; the rest still scrolls sideways */
@media (max-width: 560px) {
    .lp3-code { padding: 1.1rem 1rem; font-size: 12px; line-height: 1.65; border-radius: 18px; -webkit-overflow-scrolling: touch; }
}

/* Very small phones */
@media (max-width: 360px) {
    .lp3 .lp3-wrap,
    .lp3 .site-header .container { padding-left: max(0.9rem, env(safe-area-inset-left, 0px)); padding-right: max(0.9rem, env(safe-area-inset-right, 0px)); }
    .lp3 .brand__logo .rc-logo-lockup { width: 100px; }
    .lp3 .nav__utilities { gap: 0.4rem; }
}

/* How it works: three cards on two columns would orphan the last one, so on tablets it spans the row, mockup beside copy */
@media (min-width: 690px) and (max-width: 1009px) {
    .lp3-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
    .lp3-steps > .lp3-step:nth-child(3):last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; }
    .lp3-steps > .lp3-step:nth-child(3):last-child > .lp3-mock { flex: 1 1 55%; min-width: 0; }
    .lp3-steps > .lp3-step:nth-child(3):last-child > .lp3-step__copy { flex: 1 1 45%; }
}

/* Small laptops / tablets in landscape: the full desktop header barely fits, so tighten it instead of wrapping the buttons */
.lp3 .nav__actions .btn { white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1280px) {
    .lp3 .brand__sub { display: none; }
    .lp3 .nav,
    .lp3 .nav__panel { gap: 1rem; }
    .lp3 .nav__links { gap: 1.1rem; }
    .lp3 .nav__actions { gap: 0.5rem; }
    .lp3 .nav__actions .btn { padding: 0.6rem 1rem; font-size: 14px; }
}

/* Wide screens: pricing, contact, footer and header use .container, which has no max width, so they ran edge to edge
   while the hero and features stopped at 1280px. One shared measure keeps every section on the same edges. */
.lp3 .container { max-width: 1280px; margin-inline: auto; }
@media (min-width: 1600px) {
    .lp3 .container,
    .lp3 .lp3-wrap { max-width: 1440px; }
}

/* Follow tiles: 1fr columns can't shrink below the longest label, which pushed the last tile off a 320px screen */
.lp3 .social-grid-v2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp3 .social-tile-v2 { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 360px) {
    .lp3 .social-tile-v2 { padding: 0.85rem 0.6rem; }
}