/* ═══════════════════════════════════════════════════════════════
   PAGE: WhatsApp | Namespace: au-* | File: /static/css/shell/mani-whatsapp-ltr.css
   Logical properties throughout → RTL-safe without overrides.
   ═══════════════════════════════════════════════════════════════ */

/* ── 01. Root ── */
.pg-automation {
    --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
    /* Blue, like every other app page. WhatsApp green was the ONE exception on the
       whole site, and it made this page read as WhatsApp's page rather than ours.
       The only green left is the WhatsApp brand mark itself, which has to stay green
       to still be the WhatsApp mark. */
    --app-accent: var(--blue);
    --au-accent: var(--blue);
    --au-accent-l: var(--blue-l);
    --acc-d: var(--blue-d);
    --acc-l: var(--blue-l);
    --acc-xl: var(--blue-xl);
    font-family: var(--sans);
    color: var(--ink);
    line-height: 1.6;
}
.pg-automation .appx-badge { background: var(--blue-l); border-color: var(--blue-xl); color: var(--blue-d); }
/* The secondary CTA, matching .hm-second-link in the home hero: a text link, not a
   second button, so the hero has exactly one thing to press. */
.pg-automation .appx-second { display: inline-block; margin-block-start: 12px;color: var(--slate); text-decoration: none; }
.pg-automation .appx-second:hover { color: var(--ink); }
.pg-automation a { text-decoration: none; color: inherit; }
.pg-automation img { max-width: 100%; display: block; }

/* ── 03. Hero ──
   Was a heavy flat green-l wash. Now the same subtle gradient the .appx pages use
   (accent at ~7% fading to white) so the page reads clean and consistent with the
   rest of the site — no solid green band. */
.au-hero { padding-block: 84px 64px; background: linear-gradient(180deg, color-mix(in srgb, var(--au-accent) 7%, var(--white)), var(--white)); border-block-end: 1px solid var(--mist); }

/* ── 07. Connect band ── */
.au-connect { background: var(--ink); color: var(--white); border-radius: 22px; padding: 40px; text-align: center; }
.au-connect h2 {font-weight: 800; margin: 0 0 10px; }
.au-connect p {color: var(--mist); margin: 0 auto; max-width: 640px; }
.au-connect-flow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-block-start: 24px; }
.au-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: var(--white);font-weight: 700; padding: 8px 14px; border-radius: 100px; }

/* ── Live simulation: 3 WhatsApp conversations, one per business type ── */
.au-sim3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; margin-inline: auto; }
.au-chat { background: var(--snow); border: 2px solid var(--mist); border-radius: var(--r-xl); box-shadow: var(--sh-l); overflow: hidden; display: flex; flex-direction: column; }
/* Chat header: neutral now, like the rest of the site. The ONLY green left on this
   page is the WhatsApp brand mark inside the header - a mark that is not green is not
   the mark. (Was: a light green tint with green
   text + the WhatsApp icon, so the card still reads as WhatsApp without a full
   solid-green block. */
.au-chat-top { background: var(--blue-l); color: var(--blue-d); font-weight: 700; font-size: var(--fs-body); padding: 12px 16px; display: flex; align-items: center; gap: 9px; border-block-end: 1px solid var(--blue-xl); }
.au-chat-top i { color: var(--green); }  /* the brand mark, deliberately still green */
.au-chat-body { padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; background: var(--snow); flex: 1; min-block-size: 250px; }
.au-msg { max-inline-size: 88%; padding: 9px 13px; border-radius: 15px; font-size: var(--fs-body); line-height: 1.5; box-shadow: var(--sh-xs); }
.au-msg--in { align-self: flex-start; background: var(--white); color: var(--ink); border-end-start-radius: 5px; }
.au-msg--out { align-self: flex-end; background: var(--blue-xl); color: var(--blue-d); border-end-end-radius: 5px; }
/* interactive list menu bubble (bot side) — the options the customer picks from */
.au-menu { align-self: flex-end; max-inline-size: 92%; background: var(--snow); border: 2px solid var(--mist); border-radius: var(--r-xl); padding: 0; overflow: hidden; box-shadow: var(--sh-xs); }
.au-menu-t { display: block; padding: 8px 12px; font-size: var(--fs-xs); font-weight: 700; color: var(--blue-d); background: var(--blue-xl); }
.au-menu-i { display: block; padding: 8px 12px; font-size: var(--fs-sm); color: var(--ink); border-block-start: 1px solid var(--mist); }
.au-sim3-foot { text-align: center; margin-block-start: 28px; font-size: var(--fs-lead); font-weight: 700; color: var(--ink); }
.au-sim3-foot span { color: var(--au-accent); }
/* reveal: bubbles rise in top-to-bottom, all 3 chats in parallel */
.au-sim.is-primed .au-msg { opacity: 0; transform: translateY(8px); }
.au-sim.is-running .au-chat-body .au-msg { animation: auReveal .4s ease forwards; }
.au-sim.is-running .au-chat-body .au-msg:nth-child(1) { animation-delay: .2s; }
.au-sim.is-running .au-chat-body .au-msg:nth-child(2) { animation-delay: .75s; }
.au-sim.is-running .au-chat-body .au-msg:nth-child(3) { animation-delay: 1.3s; }
.au-sim.is-running .au-chat-body .au-msg:nth-child(4) { animation-delay: 1.85s; }
@keyframes auReveal { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) { .au-sim3 { grid-template-columns: 1fr; max-width: 440px; } }
@media (prefers-reduced-motion: reduce) {
    .au-sim.is-primed .au-msg { opacity: 1; transform: none; }
    .au-sim.is-running .au-msg { animation: none; }
}


/* ── The shared-inbox infographic (.wg-*) ──
   One number, several agents, and a claim that makes a second reply impossible.
   The claim is the whole point of the drawing: it is the one thing here that a
   competitor cannot copy by writing a sentence. */
.wg { display: grid; grid-template-columns: 1fr 260px; gap: 26px; align-items: start; }
.wg__num { display: flex; align-items: center; gap: 10px; border: 1px solid var(--mist);
           border-radius: 14px; padding: 11px 14px; background: var(--snow); margin-block-end: 16px; }
.wg__num svg { width: 20px; height: 20px; color: var(--green); flex: none; }
.wg__num b { font-size: var(--fs-body); font-weight: 700; }
.wg__num span { font-size: var(--fs-xs); color: var(--silver); margin-inline-start: auto;
                font-family: ui-monospace, monospace; }
.wg__conv { padding: 11px 13px; margin-block-end: 9px; position: relative; }
.wg__conv.is-taken { border-color: var(--blue-xl); background: #fbfdff; }
.wg__conv.is-blocked { border-style: dashed; opacity: .85; }
.wg__top { display: flex; align-items: center; gap: 8px; margin-block-end: 7px; }
.wg__who { font-size: var(--fs-xs); font-weight: 700; color: var(--slate); }
.wg__time { margin-inline-start: auto; font-size: var(--fs-micro); color: var(--silver);
            font-family: ui-monospace, monospace; }
.wg__msg { font-size: var(--fs-xs); line-height: 1.6; color: var(--ink); background: var(--snow);
           border: 1px solid var(--mist); border-radius: 9px; padding: 6px 9px; display: inline-block;
           max-width: 100%; }
.wg__foot { margin-block-start: 8px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wg__hand { position: absolute; inset-inline-start: -8px; top: 50%; transform: translateY(-50%);
            width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
            font-size: var(--fs-micro); font-weight: 700; background: var(--blue-xl);
            color: var(--blue-d); border: 2px solid var(--white);
            box-shadow: var(--sh-xs); }
.wg__erp { padding: 14px; }
.wg__erph { display: flex; justify-content: space-between; align-items: center; margin-block-end: 9px; }
.wg__erph b { font-size: var(--fs-xs); font-weight: 700; }
.wg__erph span { font-size: var(--fs-micro); color: var(--silver); font-family: ui-monospace, monospace; }
.wg__row { display: flex; gap: 8px; padding: 5px 0; border-block-end: 1px solid var(--snow);
           font-size: var(--fs-micro); }
.wg__row:last-of-type { border-block-end: 0; }
.wg__row small { color: var(--silver); width: 46px; flex: none; }
.wg__row b { font-weight: 600; color: var(--slate); }
.wg__note { margin-block-start: 10px; background: var(--blue-l); border: 1px solid var(--blue-xl);
            border-radius: 9px; padding: 7px 9px; font-size: var(--fs-micro); color: var(--blue-d);
            display: flex; align-items: center; gap: 6px; }
.wg__after { text-align: center; font-size: var(--fs-micro); color: var(--silver); margin: 8px 0 0; }
@media (max-width: 820px) { .wg { grid-template-columns: 1fr; } }

/* ── "no second vendor" strip (.wv-*) ──
   Three things the merchant would otherwise buy, hire or forget: the Meta
   connection itself, the catalog, and the messages that have to go out on time. */
.wv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-block-start: 22px; }
.wv__c { border: 1px solid var(--mist); border-radius: 14px; padding: 14px 16px; background: var(--white); }
.wv__i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
         background: var(--blue-l); color: var(--blue-d); margin-block-end: 10px; }
.wv__c h4 { margin: 0 0 5px;font-weight: 700; color: var(--ink); }
.wv__c p { margin: 0;line-height: 1.85; color: var(--slate); }
.wv__c code { font-family: ui-monospace, monospace; background: var(--snow);
              border: 1px solid var(--mist); border-radius: 4px; padding: 0 4px; }
@media (max-width: 820px) { .wv { grid-template-columns: 1fr; } }