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

/* ── 01. Root ── */
.pg-automation {
    --ink: #0b1120;
    --slate: #4b5563;
    --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
    --wa: #059669;
    --wa-l: #ecfdf5;
    --line: #e5e7eb;
    --r-m: 14px;
    --r-l: 18px;
    font-family: var(--sans);
    color: var(--ink);
    line-height: 1.6;
}
.pg-automation a { text-decoration: none; color: inherit; }
.pg-automation img { max-width: 100%; display: block; }

/* ── 02. Layout ── */
.au-mx { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.au-section { padding-block: 72px; }
.au-section--tint { background: #f8fafc; }
.au-head { max-width: 760px; margin-inline: auto; text-align: center; margin-block-end: 40px; }
.au-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--wa); margin-block-end: 10px; }
.au-h2 { font-size: 35px; font-weight: 700; line-height: 1.2; margin: 0 0 12px; }
.au-sub { font-size: 16px; font-weight: 500; color: var(--slate); margin: 0; }

/* ── 03. Hero ── */
.au-hero { padding-block: 84px 64px; background: linear-gradient(180deg, var(--wa-l), #fff); border-block-end: 1px solid var(--line); }
.au-hero-inner { max-width: 820px; margin-inline: auto; text-align: center; }
.au-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--green-xl, #d1fae5); color: var(--wa); font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 100px; margin-block-end: 18px; }
.au-h1 { font-size: 46px; font-weight: 800; line-height: 1.12; letter-spacing: -.5px; margin: 0 0 16px; }
.au-hero-sub { font-size: 19px; font-weight: 500; color: var(--slate); margin: 0 auto 28px; max-width: 620px; }
.au-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.au-hero-note { margin-block-start: 16px; font-size: 14px; color: var(--slate); }

/* ── 04. Steps (how it works) ── */
.au-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.au-step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; }
.au-step-n { width: 34px; height: 34px; border-radius: 10px; background: var(--wa-l); color: var(--wa); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-block-end: 14px; }
.au-step h3 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.au-step p { font-size: 15px; color: var(--slate); margin: 0; }

/* ── 05. Capabilities grid ── */
.au-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.au-cap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); padding: 22px; }
.au-cap i { color: var(--wa); font-size: 22px; margin-block-end: 12px; }
.au-cap h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.au-cap p { font-size: 14px; color: var(--slate); margin: 0; }

/* ── 06. Business types (flexibility) ── */
.au-biz { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.au-biz-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; border-inline-start: 4px solid var(--wa); }
.au-biz-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.au-biz-card p { font-size: 15px; color: var(--slate); margin: 0; }

/* ── 07. Connect band ── */
.au-connect { background: var(--ink); color: #fff; border-radius: 22px; padding: 40px; text-align: center; }
.au-connect h2 { font-size: 30px; font-weight: 800; margin: 0 0 10px; }
.au-connect p { font-size: 17px; color: #cbd5e1; 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: #fff; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 100px; }

/* ── 08. FAQ ── */
.au-faq { max-width: 760px; margin-inline: auto; }
.au-faq-item { border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 20px; margin-block-end: 12px; background: #fff; }
.au-faq-item h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.au-faq-item p { font-size: 15px; color: var(--slate); margin: 0; }

/* ── 09. CTA ── */
.au-cta { background: linear-gradient(135deg, var(--wa), #047857); color: #fff; border-radius: 22px; padding: 48px 32px; text-align: center; }
.au-cta h2 { font-size: 32px; font-weight: 800; margin: 0 0 10px; }
.au-cta p { font-size: 17px; color: #d1fae5; margin: 0 auto 24px; max-width: 560px; }

/* ── 10. Responsive ── */
@media (max-width: 860px) {
    .au-steps, .au-caps, .au-biz { grid-template-columns: 1fr; }
    .au-h1 { font-size: 34px; }
    .au-h2 { font-size: 28px; }
    .au-section { padding-block: 52px; }
}