/* Fifteen restrained mobile refinements. Use existing fonts and colour tokens.
   Keep illustrations distinct from live data; empty roadmap cells stay honest. */
@media(max-width:768px){
 body.marketing-suite{--mobile-tint:color-mix(in srgb,var(--orange) 5%,var(--gray-bg));--mobile-line:color-mix(in srgb,var(--orange) 18%,var(--line))}
 /* 1. Branded phone header. */
 body.marketing-suite .phone-preview-brand{background:#f5f0ff;border-radius:8px;padding:6px;color:#1e2025}
 /* 2. A clear visual rail for the phone's key metric. */
 body.marketing-suite .phone-preview-metric{border-inline-start:3px solid #7c3aed}
 /* 3. Selected navigation reads as a deliberate control illustration. */
 body.marketing-suite .phone-preview-nav span{background:#f2ebff;padding:2px 5px;border-radius:4px}
 /* 4. Framed benefit icons. */
 body.marketing-suite .enterprise-benefits-grid i{border:1px solid var(--mobile-line);box-shadow:0 2px 8px #7c3aed0a}
 /* 5. Consistent section labels, with room to wrap. */
 body.marketing-suite .section-head>.eyebrow{width:fit-content;max-width:100%;padding:5px 10px;border-radius:6px;background:var(--mobile-tint);border:1px solid var(--mobile-line);line-height:1.6}
 /* 6. Quiet tinted stat tiles. */
 body.marketing-suite .info-stat{background:var(--mobile-tint);border:1px solid var(--mobile-line);border-radius:12px}
 /* 7. Resource cards gain a branded top edge. */
 body.marketing-suite .resource-card{border-top:3px solid var(--mobile-line);border-radius:12px;box-shadow:0 4px 16px #7c3aed08}
 /* 8. Readable category chips. */
 body.marketing-suite .article-tag{background:var(--mobile-tint);border-radius:5px;padding:4px 7px;line-height:1.5}
 /* 9. Separate FAQ questions into calmer cards. */
 body.marketing-suite .faq-item{border:1px solid var(--mobile-line);border-radius:10px;margin-bottom:10px;padding-inline:14px;background:var(--mobile-tint)}
 /* 10. Table headings create a clear starting point. */
 body.marketing-suite :is(.comparison-table,.role-table,.api-table) th{background:var(--mobile-tint);color:var(--ink);border-bottom:2px solid var(--mobile-line)}
 /* 11. Gentle zebra rows improve scanning. */
 body.marketing-suite :is(.comparison-table,.role-table,.api-table) tbody tr:nth-child(even){background:var(--mobile-tint)}
 /* 12. Cells have consistent spacing and separators. */
 body.marketing-suite :is(.comparison-table,.role-table,.api-table) :is(td,th){padding:12px 14px;border-bottom:1px solid var(--line);line-height:1.6}
 /* 13. Explicit empty states instead of an unexplained blank cell. */
 body.marketing-suite .roadmap-cell.status-empty{border:1px dashed var(--mobile-line);border-radius:10px;background:var(--mobile-tint);padding:20px;color:var(--muted);font-size:14px;line-height:1.6}
 /* 14. Image cards share a polished edge. */
 body.marketing-suite .gallery-grid>img{border-radius:12px;box-shadow:0 6px 20px #1e20250d}
 /* 15. Clear form focus without removing native keyboard outlines. */
 body.marketing-suite main :is(input,select,textarea):focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-color:var(--orange);box-shadow:0 0 0 4px var(--mobile-tint)}
 html[data-theme=dark] body.marketing-suite :is(.section-head>.eyebrow,.article-tag){color:color-mix(in srgb,var(--orange) 30%,var(--ink))}
}
@media(max-width:768px){body.marketing-suite .phone-preview-nav{flex-wrap:wrap;justify-content:flex-start;line-height:1.5;gap:5px 7px}}
@media(max-width:768px){html[data-theme=dark] body.marketing-suite .info-stat b{color:color-mix(in srgb,var(--orange) 30%,var(--ink))}}
/* Keep primary actions readable on the dark mobile surface. */
@media(max-width:768px){html[data-theme=dark] body.marketing-suite .btn-orange{background:#7c3aed;color:#fff!important;border-color:#7c3aed}}