/* Public Messaging feature page (/features/messaging). */
.mp-page { color:var(--text); background:var(--surface); font-family:"Open Sans",Arial,sans-serif; }
.mp-page *, .mp-page *::before, .mp-page *::after { box-sizing:border-box; }
.mp-wrap { width:min(1140px,calc(100% - 64px)); margin-inline:auto; }
.mp-page [id] { scroll-margin-top:110px; }
.mp-page :is(h1,h2,h3,p,figure) { margin:0; }

/* Type */
.public-design #main-content .mp-page :is(h1,h2,h1 span,h2 span) { font:700 2.5rem/1.3 Poppins,"Open Sans",sans-serif!important; letter-spacing:-.02em; overflow-wrap:anywhere; }
.mp-page :is(h1,h2) span { color:var(--brand-purple-ink); }
.mp-page h2 { margin-bottom:8px; }
.public-design #main-content .mp-page h3 { font:700 1.25rem/1.4 "Open Sans",sans-serif; margin-bottom:8px; }
.public-design #main-content .mp-page p { font-size:1.125rem; line-height:1.55; }
.public-design #main-content .mp-page .mp-card p { font-size:1rem; line-height:1.5; color:var(--text-muted); }
.public-design #main-content .mp-page .mp-eyebrow { color:var(--link-ink); font:700 .875rem/1.5 "Open Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.public-design #main-content .mp-page .mp-fee { margin-top:10px; font-size:.875rem; font-style:italic; }

/* Links and buttons */
.mp-breadcrumb { display:flex; flex-wrap:wrap; gap:8px 12px; padding-top:24px; color:var(--text-muted); font-size:.875rem; line-height:1.5; }
.mp-breadcrumb a, .mp-breadcrumb > span { display:inline-flex; align-items:center; min-height:44px; }
.mp-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:24px; }
.mp-actions > a:not(.mp-primary), .mp-text-link { display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; line-height:1.5; font-weight:600; }
.mp-page .mp-primary { display:inline-flex; justify-content:center; align-items:center; min-height:36px; padding:8px 16px; background:var(--btn-primary-bg); color:var(--btn-primary-fg); border:1px solid transparent; border-radius:6px; font:700 .75rem/1.5 "Open Sans",sans-serif; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; transition:background-color .4s, color .4s; }
.mp-page .mp-primary:is(:hover,:focus-visible) { background:var(--btn-primary-hover); color:var(--btn-primary-hover-fg); }
.mp-page .mp-primary:active { background:var(--btn-product-press,#00A82D); }
.mp-page :is(a,button,summary):focus-visible { outline:2px solid var(--brand-purple-ink); outline-offset:4px; }

/* Hero */
.mp-hero { padding-block:32px 72px; }
.mp-hero-copy { max-width:760px; }
.mp-hero h1 { margin-bottom:16px; }
.mp-lead { color:var(--text-secondary); }
.mp-browser { margin-top:40px; overflow:hidden; border:1px solid var(--border); border-radius:12px; box-shadow:0 24px 60px rgba(15,23,42,.14); background:#fff; }
.mp-browser video { display:block; width:100%; height:auto; }

/* Sections */
.mp-section { padding-block:72px; }
.mp-band { background:var(--surface-canvas); }
.mp-heading { max-width:760px; margin-bottom:32px; }

/* Capability cards with real screens */
.mp-screen-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:24px; }
.mp-screen-card { grid-column:span 2; display:flex; flex-direction:column; background:#fff; border-radius:4px; box-shadow:0 1px 2px rgba(4,34,56,.06); overflow:hidden; }
.mp-screen-card:nth-child(-n+2) { grid-column:span 3; }
.mp-shot { display:flex; justify-content:center; align-items:flex-start; height:280px; overflow:hidden; padding:24px 24px 0; background:#E6EFFF; }
.mp-screen-card:nth-child(-n+2) .mp-shot { height:330px; }
.mp-shot[data-tone="mint"] { background:#E2FAF3; }
.mp-shot[data-tone="lime"] { background:#EEFAD6; }
.mp-shot[data-tone="pink"] { background:#FFEAFE; }
.mp-shot img { display:block; width:100%; max-width:320px; height:auto; border-radius:4px 4px 0 0; box-shadow:0 8px 24px rgba(4,34,56,.12); }
.mp-card-text { padding:20px 24px 24px; }

/* Capability cards with icons */
.mp-icon-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.mp-icon-card { display:flex; flex-direction:column; overflow:hidden; border:2px solid var(--border); border-radius:4px; background:#fff; }
.mp-card-art { display:block; width:100%; height:auto; aspect-ratio:5/3; object-fit:cover; border-bottom:1px solid var(--border); }
.mp-icon-body { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-items:start; padding:20px 24px 24px; }
.mp-icon-body > div { min-width:0; }
.mp-icon { width:48px; height:48px; }
.public-design #main-content .mp-page .mp-note { display:flex; align-items:flex-start; gap:10px; width:fit-content; max-width:100%; margin-top:32px; padding:12px 14px; border-radius:4px; background:#C9ECFF; color:#042238; font-size:.875rem; line-height:1.5; }

/* Questions */
.mp-faq { display:grid; grid-template-columns:1fr 1.3fr; gap:64px; }
.mp-questions { border-top:2px solid var(--border); }
.mp-questions details { border-bottom:2px solid var(--border); }
.mp-questions summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding:16px 0; font-size:1.0625rem; font-weight:600; line-height:1.5; list-style:none; cursor:pointer; }
.mp-questions summary::-webkit-details-marker { display:none; }
.mp-questions summary:is(:hover,:focus-visible) { color:var(--brand-purple-ink); }
.mp-chev { flex:0 0 12px; width:12px; height:12px; margin-right:6px; border-right:2px solid var(--brand-purple-ink); border-bottom:2px solid var(--brand-purple-ink); transform:rotate(45deg) translateY(-3px); transition:transform .2s; }
.mp-questions details[open] .mp-chev { transform:rotate(225deg) translateY(-3px); }
.public-design #main-content .mp-page .mp-questions p { padding-bottom:20px; font-size:1rem; line-height:1.5; color:var(--text-muted); }

/* Closing */
.mp-page .mp-closing { padding-block:80px; background:#042238; color:#fff; text-align:center; }
.public-design #main-content .mp-page .mp-closing :is(h2,p) { color:#fff; }
.public-design #main-content .mp-page .mp-closing .mp-eyebrow { color:#D1F48C; }
.public-design #main-content .mp-page .mp-closing p:not(.mp-eyebrow) { max-width:660px; margin:12px auto 28px; }
.mp-page .mp-closing .mp-primary:is(:hover,:focus-visible) { background:#2BE35F; color:#1B1C1A; }
.mp-page .mp-closing :focus-visible { outline-color:#D1F48C; }

@media (max-width:980px) {
  .mp-screen-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mp-screen-card, .mp-screen-card:nth-child(-n+2) { grid-column:span 1; }
  .mp-icon-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mp-faq { gap:32px; }
}
@media (max-width:700px) {
  .mp-wrap { width:calc(100% - 32px); }
  .public-design #main-content .mp-page :is(h1,h1 span) { font-size:2rem!important; }
  .public-design #main-content .mp-page :is(h2,h2 span) { font-size:1.75rem!important; }
  .mp-hero { padding-block:16px 48px; }
  .mp-browser { margin-top:28px; border-radius:8px; }
  .mp-section { padding-block:48px; }
  .mp-screen-grid, .mp-icon-grid, .mp-faq { grid-template-columns:minmax(0,1fr); }
  .mp-shot { height:240px; padding:20px 20px 0; }
  .mp-icon-body { padding:16px 20px 20px; }
  .mp-page .mp-closing { padding-block:56px; }
}
@media (pointer:coarse) { .mp-page .mp-primary { min-height:44px; font-size:.875rem; } }
@media (prefers-reduced-motion:reduce) { .mp-page .mp-primary, .mp-chev { transition:none; } }