/* WhatsApp Automation page additions: same tokens and components as the approved pages */
:root{ --phone-bg:#F6F4FC; --phone-ink:#16122B; --phone-muted:#6B6785; --phone-line:#E3DEF0; --phone-in:#FFFFFF; --phone-out:#D9F3F1; --phone-head:#2A2160; }
.crumbs{font-size:.875rem; color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:28px}
.crumbs a{text-decoration:none; color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{color:var(--faint)}
.w-hero h1{font-size:clamp(2.5rem, 6vw, 4.25rem); letter-spacing:-0.045em; line-height:1; font-weight:600}
.w-hero h1 .l2{display:block; color:var(--violet-ink)}
.partner-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.partner-row .tag{margin:0}

/* Conversation demo */
.demo{margin:0; background:var(--console-bg); color:var(--console-ink); border-radius:var(--r-lg); border:1px solid var(--console-line); box-shadow:0 40px 80px -40px rgba(30,20,90,.55), 0 0 0 6px color-mix(in srgb, var(--violet) 7%, transparent); overflow:hidden; position:relative}
.demo::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:radial-gradient(60% 40% at 85% 0%, rgba(66,214,207,.14), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(174,159,247,.12), transparent 70%)}
.demo-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--console-line); position:relative; z-index:1}
.demo-body{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:16px}
@media (min-width:600px){ .demo-body{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} }
.phone{background:var(--phone-bg); color:var(--phone-ink); border-radius:22px; overflow:hidden; border:6px solid #0B0918; box-shadow:0 0 0 1px var(--console-line); display:flex; flex-direction:column; height:440px}
.phone-head{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--phone-head); color:#FFFFFF}
.phone-head .av{width:30px; height:30px; border-radius:50%; background:#FFFFFF; display:grid; place-items:center; flex:none}
.phone-head .av svg{width:20px; height:20px}
.phone-head b{display:block; font-size:.8438rem; line-height:1.2}
.phone-head small{display:block; font-size:.6875rem; opacity:.75}
.chat-log{position:relative; flex:1; overflow:hidden; -webkit-mask-image:linear-gradient(transparent 0, #000 36px); mask-image:linear-gradient(transparent 0, #000 36px); display:flex; flex-direction:column; justify-content:flex-end; gap:7px; padding:12px 10px}
.msg{max-width:84%; font-size:.8125rem; line-height:1.4; padding:8px 10px; border-radius:12px; border:1px solid var(--phone-line); background:var(--phone-in); align-self:flex-start; border-bottom-left-radius:4px; animation:pop .32s cubic-bezier(.2,.7,.2,1) both}
.msg.out{align-self:flex-end; background:var(--phone-out); border-color:#BFE8E5; border-bottom-left-radius:12px; border-bottom-right-radius:4px}
.msg .lbl{display:block; font-size:.625rem; font-weight:600; color:var(--phone-muted); margin-bottom:2px; letter-spacing:.01em}
.msg .btnrow{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px}
.msg .btnrow span{font-size:.7188rem; font-weight:600; color:#40328E; background:#F0EDFB; border:1px solid #DCD5F5; border-radius:8px; padding:4px 8px}
.msg .btnrow span.pick{background:#40328E; color:#FFFFFF; border-color:#40328E}
.msg .cta-btn{display:block; text-align:center; margin-top:8px; padding-top:7px; border-top:1px solid var(--phone-line); font-size:.75rem; font-weight:600; color:#0B7A75}
.sys{align-self:center; font-size:.6875rem; font-weight:600; color:var(--phone-muted); background:#ECE8F7; border-radius:999px; padding:3px 10px; animation:pop .3s ease both}
.sys.ok{background:#D9F3F1; color:#0B7A75}
.typing{align-self:flex-start; display:flex; gap:4px; padding:10px 12px; border-radius:12px; background:var(--phone-in); border:1px solid var(--phone-line)}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--phone-muted); animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25} 50%{opacity:1}}
@keyframes pop{from{opacity:0; transform:translateY(6px) scale(.98)} to{opacity:1; transform:none}}
.events{list-style:none; margin:0; padding:0; display:grid; gap:4px; align-content:start}
.ev{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; padding:8px 4px; transition:opacity .35s}
.ev .dot{width:22px; height:22px; border-radius:7px; display:grid; place-items:center; border:1px solid var(--console-line); background:var(--console-raised); color:var(--console-muted); margin-top:1px; transition:background-color .3s, border-color .3s, color .3s}
.ev .dot svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.ev .app{display:block; font-family:var(--mono); font-size:.6563rem; color:var(--console-muted)}
.ev b{display:block; font-size:.8438rem; font-weight:600; line-height:1.3}
.ev span.d{display:block; font-size:.75rem; color:var(--console-muted); line-height:1.35}
.ev[data-state="queued"]{opacity:.38}
.ev[data-state="active"] .dot{border-color:var(--console-teal); color:var(--console-teal); box-shadow:0 0 0 3px rgba(66,214,207,.15)}
.ev[data-state="done"] .dot{background:rgba(66,214,207,.14); border-color:rgba(66,214,207,.35); color:var(--console-teal)}
.stages{display:flex; flex-wrap:wrap; gap:4px; padding:12px 16px; border-top:1px solid var(--console-line); position:relative; z-index:1}
.stages span{font-family:var(--mono); font-size:.6563rem; padding:4px 8px; border-radius:999px; border:1px solid var(--console-line); color:var(--console-muted); transition:all .3s}
.stages span.on{color:#0A0815; background:var(--console-teal); border-color:var(--console-teal)}
.stages span.done{color:var(--console-ink); border-color:rgba(66,214,207,.35)}
.stages .lab{border:0; padding:4px 4px 4px 0; color:var(--console-muted)}
@media (max-width:599px){ .phone{height:400px} .events .ev:not([data-state="active"]):not(.keep) .d{display:none} }

/* Features */
.feat-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:700px){ .feat-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1080px){ .feat-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }
.feat{display:grid; gap:12px; align-content:start; padding:26px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); transition:border-color .25s, box-shadow .25s, transform .25s}
.feat:hover{border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-2px)}
.feat h3{font-size:1.1875rem; letter-spacing:-0.02em}
.feat p{color:var(--muted); font-size:.9688rem}
.src-note{margin-top:20px; font-size:.8125rem; color:var(--faint)}
.src-note a{color:var(--muted)}

/* Tabbed sets (use cases, method) */
.tabset{margin-top:48px; display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
.t-tabs{display:none}
.t-panel{padding:26px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; gap:14px; align-content:start}
.t-panel .num{font-family:var(--mono); font-size:.8125rem; color:var(--teal-ink)}
.t-panel h3{font-size:1.375rem; letter-spacing:-0.03em}
.t-panel p{color:var(--muted); font-size:1.0625rem; max-width:40em}
.t-panel .covers{display:flex; flex-wrap:wrap; gap:6px}
.t-panel .covers span{font-size:.8125rem; font-weight:500; padding:5px 10px; border-radius:8px; background:var(--surface); border:1px solid var(--line)}
.t-panel ul.how{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.t-panel ul.how li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; color:var(--ink); font-size:.9688rem}
.t-panel ul.how .icon{width:18px; height:18px; color:var(--teal-ink); margin-top:2px}
.sample{justify-self:start; max-width:30em; font-size:.9375rem; line-height:1.45; padding:12px 14px; border-radius:14px 14px 14px 4px; background:var(--surface); border:1px solid var(--line)}
.sample .lbl{display:block; font-size:.75rem; font-weight:600; color:var(--muted); margin-bottom:4px}
@media (min-width:960px){
  .tabset{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px; align-items:stretch}
  .t-tabs{display:grid; gap:4px; align-content:start}
  .t-tab{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:center; width:100%; text-align:left; font:inherit; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:var(--r); padding:12px 14px; cursor:pointer; transition:background-color .2s, border-color .2s, color .2s}
  .t-tab .n{font-family:var(--mono); font-size:.8125rem; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--muted); transition:background-color .2s, color .2s, border-color .2s}
  .t-tab .n .icon{width:18px; height:18px}
  .t-tab b{font-weight:600; font-size:1rem; letter-spacing:-0.01em}
  .t-tab:hover{background:var(--surface); color:var(--ink)}
  .t-tab[aria-selected="true"]{background:var(--raised); border-color:var(--line); box-shadow:var(--shadow); color:var(--ink)}
  .t-tab[aria-selected="true"] .n{background:var(--btn-bg); color:var(--btn-fg); border-color:transparent}
  .t-panel{padding:44px}
  .t-panel h3{font-size:2rem}
  .t-panel:not(.on){display:none}
  .t-panel.on{animation:fade .4s ease both}
}

/* Messaging rules */
.rules{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px; counter-reset:r}
@media (min-width:900px){ .rules{grid-template-columns:repeat(3, minmax(0,1fr))} }
.rule{position:relative; padding:26px; border-radius:var(--r-lg); background:var(--raised); border:1px solid var(--line); display:grid; gap:10px; align-content:start}
.rule .num{font-family:var(--mono); font-size:.8125rem; color:var(--teal-ink)}
.rule h3{font-size:1.1875rem; letter-spacing:-0.02em}
.rule p{color:var(--muted); font-size:.9688rem}
.window{height:8px; border-radius:8px; background:var(--surface); border:1px solid var(--line); overflow:hidden; margin-top:4px}
.window i{display:block; height:100%; border-radius:8px; background:linear-gradient(90deg, var(--violet), var(--teal))}

/* Integrations */
.int-wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:960px){ .int-wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} }
.int-main{padding:30px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; gap:16px; align-content:start}
.int-main .logos{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.int-main .logos .plus{color:var(--faint); font-weight:600}
.int-main .zc img{height:30px}
.int-main h3{font-size:1.5rem; letter-spacing:-0.03em}
.int-main ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.int-main li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; font-size:.9688rem}
.int-main li .icon{width:18px; height:18px; color:var(--teal-ink); margin-top:2px}
.int-side{padding:30px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; gap:14px; align-content:start}
.int-side h3{font-size:1.25rem; letter-spacing:-0.025em}
.int-side p{color:var(--muted); font-size:.9688rem}
.chips-lg{display:flex; flex-wrap:wrap; gap:8px}
.chips-lg span{font-size:.875rem; font-weight:500; padding:7px 12px; border-radius:999px; background:var(--raised); border:1px solid var(--line)}

/* FAQ + CTA */
.faq{margin-top:40px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; font-size:1.125rem; font-weight:600; letter-spacing:-0.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted); transition:transform .25s, background-color .2s}
.faq details[open] summary .pm{transform:rotate(45deg); background:var(--surface)}
.faq details p{color:var(--muted); padding:0 0 22px; max-width:46em}
.faq-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:24px}
@media (min-width:960px){ .faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:64px} .faq{margin-top:0} }
.cta-panel.slim{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){ .cta-panel.slim{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end} }
@media (prefers-reduced-motion: reduce){ .msg,.sys{animation:none} }