/* Shared by the feature pages (/feature/*). Loaded after each page's own styles. */

/* Phone mockups: a slim, neutral phone (not a copy of any brand), with a status bar,
   WhatsApp chat and message bar. The status bar and message bar are added by /assets/feature.js. */
.phone{padding:6px !important;border-radius:36px !important;background:#1A1A1D !important;box-shadow:inset 0 0 0 1px #2E2E33,0 0 0 1px #D6D5D0,0 24px 50px rgba(17,17,17,.16) !important}
.phone .scr{border-radius:30px !important;overflow:hidden;display:flex;flex-direction:column}
.psb{position:relative;display:flex;align-items:center;justify-content:space-between;height:24px;padding:2px 18px 0 22px;background:#075E54;color:#fff;font-size:11px;font-weight:700;flex:none}
.pcam{position:absolute;left:50%;top:7px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#0B0B0D;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.psi{display:flex;align-items:center;gap:5px}
.phone .wah{padding-top:8px !important}
.pin{display:flex;align-items:center;gap:6px;padding:6px 8px 4px;flex:none}
.pbox{flex:1;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;background:#fff;color:#8696A0;font-size:13px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.pmic{flex:none;width:34px;height:34px;border-radius:50%;background:#22C55E;display:flex;align-items:center;justify-content:center}
.pnav{flex:none;width:96px;height:4px;margin:4px auto 6px;border-radius:2px;background:rgba(17,17,17,.35)}

@media (max-width:900px){
  /* one rhythm: tighter sections, every heading left-aligned like the text under it */
  .sec{padding:52px 0 !important}
  .secb{padding-top:44px !important;padding-bottom:44px !important}
  .sec .wrap>div[style*="text-align:center"]{text-align:left !important;margin:0 0 28px !important}
  .sec h2{font-size:30px !important;line-height:1.15 !important}
  .sec .lead{font-size:16px !important;line-height:1.55 !important}
  .phead{margin-bottom:24px !important}

  /* one level of card, smaller padding */
  .vsc,.acc,.oc,.abc,.anw,.kwin,.spec,.st2,.ied,.bacol{padding:18px !important;border-radius:20px !important}
  .vdemo,.accv,.lsum,.kd{padding:12px !important}
  .ucstage{padding:0 !important;background:none !important;border-radius:0 !important}

  /* AI agent: the five steps read as a short numbered list */
  .steps5{gap:0 !important}
  .s5{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;padding:16px 0;background:none;border:0;border-radius:0;border-bottom:1px solid #2A2A2A}
  .s5:last-child{border-bottom:0}
  .s5 .stn{grid-row:span 2;width:36px;height:36px;font-size:15px}
  .s5 h3{margin-top:4px;font-size:17px}.s5 p{margin-top:4px}

  /* AI agent hero: what it can reach as compact chips, two per row */
  .xnodes{grid-template-columns:1fr 1fr !important;gap:8px !important}
  .xn{grid-template-columns:28px minmax(0,1fr) !important;padding:9px 10px !important;gap:8px !important;border-radius:12px !important}
  .xn .ni{width:28px !important;height:28px !important;border-radius:8px}
  .xn .ni svg{width:15px;height:15px}
  .xn b{font-size:12.5px !important;line-height:1.25}
  .xn small,.xn .res{display:none !important}

  /* Chatbot: steps closer together, the four rules as compact numbered cards */
  .steps4{gap:32px !important}
  .st{display:grid !important;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start}
  .st .stn{grid-row:span 2}
  .st h3{margin-top:6px !important}.st>p{margin-top:4px !important}
  .stv{grid-column:1/-1;margin-top:14px !important}
  .chl>*:nth-child(n+4){display:none}
  .mlead{margin-top:-18px !important}
  .tips{gap:10px !important}
  .tip{display:grid !important;grid-template-columns:40px minmax(0,1fr);column-gap:12px;padding:18px !important;border-radius:18px !important}
  .tipn{grid-row:span 3;font-size:24px !important}
  .tip h3{margin-top:0 !important;font-size:17px}
  .tip p{margin-top:4px !important}
  .tip .ftag{margin-top:10px !important;justify-self:start}
  .kpis>*:last-child:nth-child(odd){grid-column:1/-1}
  .secb h2[style*="text-align:center"]{text-align:left !important}
}