/* ==========================================================================
   Mobile Message — site design layer
   Loaded after styles.min.css (vendor theme) so it wins on equal specificity.
   Owns: section rhythm, hero treatment, CTA badge, icon lockups.
   ========================================================================== */

:root{
    --mm-teal:#1bc5ba;
    --mm-teal-dark:#0FA396;
    --mm-blue:#1494ba;
    --mm-navy:#1d293f;
    --mm-rhythm:3.5rem;
    --mm-rhythm-sm:2rem;
    --mm-nav-clear:9rem;
}

/* --------------------------------------------------------------------------
   1. Vertical rhythm
   Every top-level section gets an identical band above and below, so no
   section is ever spaced differently on its two sides. Theme utilities
   (py-3/py-5/pt-50/mt-10 etc.) are deliberately overridden — they were the
   source of the asymmetric spacing.
   -------------------------------------------------------------------------- */
.page > section{
    padding-top:var(--mm-rhythm)!important;
    padding-bottom:var(--mm-rhythm)!important;
    margin-top:0!important;
    margin-bottom:0!important;
}

/* Some pages drop a bare .container between sections instead of wrapping it
   in one — give those the same rhythm so they don't break the cadence. */
.page > div.container{
    padding-top:var(--mm-rhythm)!important;
    padding-bottom:var(--mm-rhythm)!important;
}

/* The first section on a page must clear the fixed nav. Replaces the
   copy-pasted inline style="margin-top: 100px" on hero-less pages. */
.page > section:first-of-type{
    padding-top:var(--mm-nav-clear)!important;
}

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */
.page > section.hero-section{
    background:var(--mm-navy)!important;
    overflow:hidden;
    padding-top:var(--mm-nav-clear)!important;
    padding-bottom:var(--mm-rhythm)!important;
}
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section p,
.hero-section li{color:#fff;}
.hero-section .hero-10-txt h3{color:#dbe3ee;}

/* Outline buttons need a light border on navy, not the theme's dark one. */
.hero-section .btn-tra-black{
    color:#fff;
    border-color:rgba(255,255,255,.55);
    background-color:transparent;
}
.hero-section .btn-tra-black:hover{
    color:var(--mm-navy);
    background-color:#fff;
    border-color:#fff;
}
/* Plain text links inside a hero */
.hero-section a:not(.btn){color:#cfe0f0;}
.hero-section a:not(.btn):hover{color:#fff;}

/* --------------------------------------------------------------------------
   3. CTA rows — the orange sticker badge is retired; the offer is stated as a
   line under the buttons instead (.mm-offer below).
   -------------------------------------------------------------------------- */
.btns-group{margin-bottom:.5rem;}

/* Signup offer, stated as a line rather than a sticker on the button. */
.mm-offer{font-size:.9rem;font-weight:600;margin:1rem 0 0;color:#b8c7d9;}
.mm-offer .tick{color:var(--mm-teal);}
:not(.hero-section) > * > .mm-offer,
:not(.hero-section) .mm-offer{color:#4b5768;}
.hero-section .mm-offer{color:#b8c7d9;}

/* --------------------------------------------------------------------------
   4. Icon lockup — navy squircle on a soft teal disc.
   Used for feature tiles. Markup:
     <span class="mm-ic"><span class="mm-ic-disc"></span>
       <span class="mm-ic-tile"><svg .../></span></span>
   -------------------------------------------------------------------------- */
.mm-ic{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:176px;height:176px;
    margin-bottom:1.8rem;
}
.mm-ic-disc{
    position:absolute;inset:0;
    border-radius:50%;
    background:rgba(27,197,186,.12);
}
.mm-ic-disc::after{
    content:"";
    position:absolute;right:8px;top:13px;
    width:21px;height:21px;
    border-radius:50%;
    background:rgba(20,148,186,.35);
}
.mm-ic-tile{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:114px;height:114px;
    border-radius:34px;
    background:var(--mm-navy);
    box-shadow:0 12px 26px rgba(29,41,63,.20);
}
.mm-ic-tile svg{width:58px;height:58px;color:#fff;}

/* Small inline icon for checklist rows */
.mm-ic-sm{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:60px;height:60px;
}
.mm-ic-sm svg{width:44px;height:44px;color:var(--mm-teal-dark);}

/* --------------------------------------------------------------------------
   5. Stats band
   -------------------------------------------------------------------------- */
.statistic-number{color:var(--mm-teal);}
.statistic-block p{max-width:260px;margin-left:auto;margin-right:auto;}
@media (min-width:576px){
    .stats-row .col + .col{border-left:1px solid rgba(20,148,186,.25);}
}

/* --------------------------------------------------------------------------
   6. Mobile
   -------------------------------------------------------------------------- */
@media (max-width:991px){
    .page > section{
        padding-top:var(--mm-rhythm-sm)!important;
        padding-bottom:var(--mm-rhythm-sm)!important;
    }
    .page > section:first-of-type,
    .page > section.hero-section{padding-top:8rem!important;}
    .mm-ic{width:150px;height:150px;}
    .mm-ic-tile{width:98px;height:98px;border-radius:29px;}
    .mm-ic-tile svg{width:50px;height:50px;}
}
@media (max-width:575px){
    .hero-section .btns-group .btn{display:block;width:100%;margin-right:0!important;}
    .hero-section .btns-group .btn + .btn{margin-top:.75rem;}
}

/* --------------------------------------------------------------------------
   7. Review carousel (shared include — 21 pages)
   -------------------------------------------------------------------------- */
section#PR-reviews{background:#f2fafa;}
#PR-reviews .card{border:0;}
/* The carousel and badge rows carry their own trailing padding; zero it so the
   section's own symmetric band is what you actually see above and below. */
#PR-reviews .carousel .row.pb-4{padding-bottom:0!important;}
#PR-reviews > .text-center.py-2{padding-top:0!important;}
#PR-reviews div#PR-reviews .py-3{padding-top:0!important;padding-bottom:0!important;}
/* Give the rating badges room to breathe under the review cards. */
#PR-reviews div#PR-reviews.container{margin-top:2.25rem!important;}
@media (max-width:991px){ #PR-reviews div#PR-reviews.container{margin-top:1.5rem!important;} }
#PR-reviews .rv-avatar{
    width:34px;height:34px;border-radius:50%;
    color:#fff;font-weight:700;font-size:.8rem;
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* --------------------------------------------------------------------------
   8. Numbered list markers
   -------------------------------------------------------------------------- */
.use-num{
    display:inline-flex;align-items:center;justify-content:center;
    width:1.7rem;height:1.7rem;border-radius:50%;
    background:var(--mm-teal);color:#fff;
    font-size:.95rem;font-weight:700;
    margin-right:.6rem;flex-shrink:0;
}
#content-5 h5.mb-0{display:flex;align-items:center;margin-top:1.6rem;}
#content-5 h5.mb-0 + p{margin-left:2.3rem;margin-top:.35rem;}

/* --------------------------------------------------------------------------
   9. In-table offer badges (pricing tables) — same brand treatment as .promo-text
   -------------------------------------------------------------------------- */
.promo-text-table{
    background-color:var(--mm-teal)!important;
    color:#fff!important;
    font-size:11px;
    font-weight:600;
    padding:3px 10px;
    border-radius:12px;
    white-space:nowrap;
    box-shadow:none!important;
}

/* --------------------------------------------------------------------------
   10. Comparison-table badges — keep the good/bad reading, drop the stock
   Bootstrap red/green/amber which sit outside the brand palette.
   -------------------------------------------------------------------------- */
.badge.bg-success{background-color:var(--mm-teal)!important;color:#fff!important;}
.badge.bg-danger{background-color:#8a94a6!important;color:#fff!important;}
.badge.bg-warning{background-color:#e8edf2!important;color:var(--mm-navy)!important;}
/* comparison-table column headers */
th.bg-success{background-color:var(--mm-teal-dark)!important;color:#fff!important;}
th.bg-secondary{background-color:#8a94a6!important;color:#fff!important;}
table .table-dark, thead.table-dark{--bs-table-bg:var(--mm-navy);}

/* --------------------------------------------------------------------------
   11. Bootstrap-icon badges (contact page) recoloured into the brand system
   -------------------------------------------------------------------------- */
.bs-icon{background:rgba(27,197,186,.12)!important;color:var(--mm-teal-dark)!important;border-radius:18px!important;}
.bs-icon svg{color:var(--mm-teal-dark);}

/* --------------------------------------------------------------------------
   12. Page header — the compact navy opening for pages without a full hero.
   Shares .hero-section so it inherits the navy band and white type, but sits
   shorter and drops the bottom band to a half-beat before the content.
   -------------------------------------------------------------------------- */
.page > section.page-header{
    padding-top:var(--mm-nav-clear)!important;
    padding-bottom:var(--mm-rhythm)!important;
}
.page-header .p-lg{color:#b8c7d9;}
@media (max-width:991px){
    .page > section.page-header{padding-top:8rem!important;padding-bottom:var(--mm-rhythm-sm)!important;}
}

/* --------------------------------------------------------------------------
   13. Before/after comparison card (replaces the old "VS" cartoon images)
   -------------------------------------------------------------------------- */
.mm-vs{display:flex;align-items:stretch;gap:0;border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(29,41,63,.08);text-align:left;}
.mm-vs-col{flex:1;padding:1.6rem 1.4rem;}
.mm-vs-col h5{font-size:1rem;font-weight:700;margin-bottom:.5rem;}
.mm-vs-col p{font-size:.92rem;margin-bottom:0;line-height:1.5;}
.mm-vs-before{background:#eef1f4;color:#5a6473;}
.mm-vs-before h5{color:#5a6473;}
.mm-vs-after{background:var(--mm-navy);color:#c8d4e4;}
.mm-vs-after h5{color:#fff;}
.mm-vs-mark{align-self:center;flex-shrink:0;width:38px;height:38px;margin:0 -19px;z-index:2;border-radius:50%;
    background:var(--mm-teal);color:#fff;font-size:.8rem;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(29,41,63,.18);}
@media (max-width:575px){
    .mm-vs{flex-direction:column;}
    .mm-vs-mark{margin:-19px auto;}
}

/* --------------------------------------------------------------------------
   14. Hero product screenshot (shared include) — moved out of index.php so
   every hero page renders it identically.
   -------------------------------------------------------------------------- */
.hero-shot{position:relative;max-width:600px;margin:0 auto;}
.hero-browser{background:#fff;border-radius:14px;box-shadow:0 24px 48px rgba(29,41,63,.22);overflow:hidden;}
.hero-browser-bar{display:flex;align-items:center;gap:6px;background:#eef1f4;padding:9px 14px;}
.hero-browser-bar .dot{width:10px;height:10px;border-radius:50%;background:#cfd6dd;display:inline-block;}
.hero-browser-bar .hero-url{margin-left:10px;background:#fff;border-radius:20px;font-size:.72rem;color:#687881;padding:2px 14px;line-height:1.4;}
.hero-browser img{display:block;width:100%;height:auto;}
.hero-sms{position:absolute;left:-26px;bottom:-30px;width:262px;background:#fff;border-radius:14px;box-shadow:0 14px 34px rgba(29,41,63,.25);padding:.8rem .9rem;text-align:left;}
.hero-sms-head{font-size:.72rem;font-weight:700;color:#687881;letter-spacing:.02em;margin-bottom:.4rem;}
.hero-sms-bubble{background:#e9ebee;color:#1d293f;border-radius:14px;border-bottom-left-radius:4px;padding:.55rem .7rem;font-size:.8rem;line-height:1.4;}
.hero-sms-status{font-size:.7rem;color:var(--mm-teal);font-weight:600;margin-top:.45rem;}
/* Oversize the shot slightly beyond its column for depth, but by a fixed
   amount so it can never poke past the viewport in the 5-col layout. */
@media (min-width:992px){ .hero-shot{max-width:none;width:calc(100% + 48px);margin-left:-24px;} }
@media (max-width:991px){
    .hero-shot{margin-top:2.5rem;}
    .hero-sms{position:static;width:min(320px,92%);margin:1rem auto 0;}
}

/* --------------------------------------------------------------------------
   15. Hero consistency
   Hero height was being driven by whatever art a page happened to use, so the
   band ranged 567-712px and the text sat at a different height on every page.
   Cap standalone hero art to the same height as the framed product screenshot,
   and stop the text column adding variable trailing space.
   -------------------------------------------------------------------------- */
.hero-section img:not(.hero-browser img){max-height:340px;width:auto;}
/* Pin the text column (always first) to the top of the row so the h1 sits at
   the same height on every hero, even when the art column is taller. */
@media (min-width:768px){
    .hero-section .row > .col:first-of-type{align-self:flex-start;}
}
.hero-section .hero-10-txt > *:last-child,
.hero-section .justify-content-evenly > *:last-child{margin-bottom:0!important;}
.hero-section .btns-group{margin-bottom:0;}
.hero-section .mm-offer{margin-bottom:0;}
@media (max-width:991px){
    .hero-section img:not(.hero-browser img){max-height:260px;}
}
/* Long hero subheadlines read oversized at the standard h3 size; pages whose
   sub runs past a single short sentence carry this class. */
.hero-section .hero-sub-long{font-size:1.5rem!important;line-height:1.55!important;}
/* Hero CTA pattern: one primary button plus one text link (was scoped to the
   homepage's #hero-10; every hero now uses it). */
.hero-section .hero-link{color:#cfe0f0;text-decoration:underline;font-weight:600;}
.hero-section .hero-link:hover{color:#fff;}

/* --------------------------------------------------------------------------
   15a-2. Developer hero art — editor card with the API request, delivered SMS
   floating below (used on /api and /sms-gateway).
   -------------------------------------------------------------------------- */
.mm-code-wrap{position:relative;max-width:560px;margin:0 auto;}
.mm-code{background:#131c2b;border-radius:14px;box-shadow:0 24px 48px rgba(9,14,24,.5);overflow:hidden;text-align:left;}
.mm-code-bar{display:flex;align-items:center;gap:6px;background:#0d1520;padding:9px 14px;}
.mm-code-bar .dot{width:10px;height:10px;border-radius:50%;background:#2a3648;display:inline-block;}
.mm-code-file{margin-left:10px;font-size:.72rem;color:#8294ab;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
/* Big bottom padding keeps the last code lines clear of the floating SMS card */
.mm-code pre{margin:0;padding:1.15rem 1.3rem 5.5rem;font-size:.8rem;line-height:1.7;color:#dbe3ee;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;}
@media (max-width:991px){ .mm-code pre{padding-bottom:1.35rem;} }
.mm-code .c-k{color:#7dd3fc;}
.mm-code .c-s{color:#6ee7b7;}
.mm-code .c-m{color:#94a3b8;}
@media (max-width:991px){ .mm-code-wrap{margin-top:2.5rem;} }

/* --------------------------------------------------------------------------
   15a-3. Integration logo constellation — platform tiles connected to a
   central Mobile Message tile (used on /integrations).
   -------------------------------------------------------------------------- */
.mm-cloud{position:relative;width:520px;max-width:100%;height:440px;margin:0 auto;}
.mm-cloud svg.mm-cloud-lines{position:absolute;inset:0;width:100%;height:100%;}
.mm-cloud-lines line{stroke:rgba(27,197,186,.35);stroke-width:2;stroke-dasharray:5 6;}
.mm-cloud-tile{position:absolute;transform:translate(-50%,-50%);background:#fff;border-radius:20px;
    box-shadow:0 12px 28px rgba(9,14,24,.35);display:flex;align-items:center;justify-content:center;}
.mm-cloud-tile img{width:62%;height:62%;object-fit:contain;}
.mm-cloud-hub{box-shadow:0 16px 36px rgba(9,14,24,.5);outline:3px solid var(--mm-teal);outline-offset:-3px;}
.mm-cloud-hub img{width:64%;height:64%;}
@media (max-width:575px){ .mm-cloud{height:380px;} } — a CSS phone showing a two-way conversation,
   used where the story is replies and dedicated numbers.
   -------------------------------------------------------------------------- */
.mm-phone-wrap{display:flex;justify-content:center;}
.mm-phone{width:320px;background:#fff;border-radius:38px;padding:1rem 1rem 1.4rem;
    box-shadow:0 24px 48px rgba(29,41,63,.28);border:6px solid #101828;}
.mm-phone-head{display:flex;flex-direction:column;align-items:center;gap:.3rem;
    padding:.5rem 0 .8rem;border-bottom:1px solid #eef1f4;margin-bottom:.9rem;}
.mm-phone-avatar{width:44px;height:44px;border-radius:50%;background:#e9edf2;color:#5a6473;
    display:flex;align-items:center;justify-content:center;}
.mm-phone-avatar svg{width:26px;height:26px;}
.mm-phone-name{font-size:.95rem;font-weight:700;color:var(--mm-navy);}
.mm-phone-thread{display:flex;flex-direction:column;gap:.55rem;}
.mm-ph-in,.mm-ph-out{max-width:85%;padding:.6rem .85rem;font-size:.9rem;line-height:1.45;text-align:left;}
.mm-ph-in{align-self:flex-start;background:#e9edf2;color:#1d293f;border-radius:16px 16px 16px 4px;}
.mm-ph-out{align-self:flex-end;background:var(--mm-teal);color:#fff;border-radius:16px 16px 4px 16px;}
.mm-ph-status{align-self:flex-start;font-size:.75rem;font-weight:600;color:var(--mm-teal-dark);margin-top:-.2rem;}

/* --------------------------------------------------------------------------
   15a. Pricing hero card — the pricing page's hero art: a floating rate card
   instead of the shared product screenshot.
   -------------------------------------------------------------------------- */
.mm-price-card{position:relative;max-width:400px;margin:0 auto;background:#fff;border-radius:22px;
    box-shadow:0 24px 48px rgba(29,41,63,.28);padding:2.1rem 2.3rem 1.9rem;text-align:center;color:var(--mm-navy);}
.mm-price-card .mm-price-label{font-size:1rem;font-weight:600;color:#5a6473;margin-bottom:.2rem;}
.mm-price-card .mm-price-big{font-size:4.4rem;font-weight:800;line-height:1.05;color:var(--mm-navy);}
.mm-price-card .mm-price-big sup{font-size:2rem;font-weight:700;top:-1.6rem;}
.mm-price-card .mm-price-per{font-size:1rem;color:#5a6473;margin-bottom:1.2rem;}
.mm-price-card hr{margin:0 0 1.1rem;opacity:.12;}
.mm-price-card .mm-price-row{display:flex;align-items:center;gap:.6rem;text-align:left;
    font-size:.95rem;font-weight:500;margin-bottom:.55rem;}
.mm-price-card .mm-price-row .tick{color:var(--mm-teal-dark);font-weight:800;flex-shrink:0;}
.mm-price-card .mm-price-note{position:absolute;right:-24px;bottom:-26px;background:var(--mm-teal);color:#fff;
    border-radius:14px;padding:.6rem .95rem;font-size:.85rem;font-weight:700;
    box-shadow:0 10px 24px rgba(29,41,63,.30);}
@media (max-width:575px){.mm-price-card .mm-price-note{right:8px;}}

/* --------------------------------------------------------------------------
   15b. Example-message cards — SMS bubbles echoing the hero's floating card,
   used on industry pages for the "what businesses send" examples.
   -------------------------------------------------------------------------- */
.mm-msg{background:#fff;border-radius:18px;box-shadow:0 8px 22px rgba(29,41,63,.10);padding:1.1rem 1.2rem;}
.mm-msg-bubble{background:#e9edf2;color:#1d293f;border-radius:18px 18px 18px 4px;
    padding:.85rem 1.05rem;font-size:.95rem;line-height:1.5;}
.mm-msg-status{margin-top:.55rem;font-size:.8rem;font-weight:600;color:var(--mm-teal-dark);}

/* --------------------------------------------------------------------------
   15b-2. Integration pair — one app tile linked to the Mobile Message tile,
   used on individual /integrations/app/* heroes.
   -------------------------------------------------------------------------- */
.mm-pair{display:flex;align-items:center;justify-content:center;}
.mm-pair-tile{width:120px;height:120px;background:#fff;border-radius:26px;flex-shrink:0;
    box-shadow:0 16px 36px rgba(9,14,24,.4);display:flex;align-items:center;justify-content:center;}
.mm-pair-tile img{width:64%;height:64%;object-fit:contain;}
.mm-pair-tile.mm-pair-hub{outline:3px solid var(--mm-teal);outline-offset:-3px;}
.mm-pair-line{width:74px;border-top:2px dashed rgba(27,197,186,.5);}

/* --------------------------------------------------------------------------
   15c. Integration category jump-nav chips
   -------------------------------------------------------------------------- */
.mm-cat-nav{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;}
.mm-cat-nav button{display:inline-block;padding:.4rem .95rem;border-radius:20px;background:#eef1f4;
    color:#1d293f;font-size:.85rem;font-weight:600;border:none;cursor:pointer;}
.mm-cat-nav button:hover{background:#dde3e9;}
.mm-cat-nav button.active{background:var(--mm-teal);color:#fff;}
/* Groups stay hidden until their chip is selected */
.mm-cat-group{display:none;}
.mm-cat-group.open{display:block;}

/* Visible secondary button for light card backgrounds (theme's outline-secondary
   is near-invisible until hover) */
.btn-mm-outline{border:2px solid var(--mm-navy)!important;color:var(--mm-navy)!important;
    background:transparent!important;font-weight:600;}
.btn-mm-outline:hover{background:var(--mm-navy)!important;color:#fff!important;}

/* --------------------------------------------------------------------------
   16. Review carousel — bootstrap's .carousel-inner clips overflow for the
   slide animation, which was cutting the card shadows at the edges. Pad the
   clip box outward so shadows render, cancelling the layout shift with
   negative margins.
   -------------------------------------------------------------------------- */
#PR-reviews .carousel-inner{padding:1rem 0 1.75rem;margin:-1rem 0 -1.75rem;}

/* --------------------------------------------------------------------------
   16b. Mobile fixes from the design review
   -------------------------------------------------------------------------- */
/* The theme stretches #cta-* sections with -15px margins for old 15px container
   gutters; with Bootstrap 5's 12px gutters that left text at (or past) the
   screen edge. Kill the negative margins so content keeps a 12px inset. */
@media (max-width:479.95px){
    #cta-1,#cta-11,#cta-5{margin-left:0!important;margin-right:0!important;}
}
/* Button pairs on phones had no gap: the theme's mb-2 is only 2px, and the
   me-sm-4 horizontal margin doesn't apply below 576px. */
@media (max-width:575px){
    .btns-group .btn,.cta-section .btn,#cta-11 .btn{margin-bottom:.6rem;}
    .btns-group .btn:not(:last-child),.cta-section .btn:not(:last-child),
    #cta-11 .btn:not(:last-child){margin-right:.6rem;}
}
/* Code samples: wrap on phones instead of clipping/scrolling off-screen. */
@media (max-width:767px){
    #code-sample pre{white-space:pre-wrap!important;word-break:break-word;}
}

/* --------------------------------------------------------------------------
   17. Feature-card sections — the theme's mb-40 on every card stacks with the
   section's 56px bottom padding on the last visual row, so sections read
   bottom-heavy. Zero it on the final row only.
   -------------------------------------------------------------------------- */
@media (min-width:768px){
    .features-section .row-cols-md-3 > .col:nth-last-child(-n+3) > .fbox-8,
    .features-section .row-cols-md-3 > .col:nth-last-child(-n+3) > .fbox,
    .features-section .row-cols-md-2 > .col:nth-last-child(-n+2) > .fbox-4,
    .features-section .row-cols-md-2 > .col:nth-last-child(-n+2) > .fbox-8{margin-bottom:0!important;}
}
@media (max-width:767px){
    .features-section .row > .col:last-child > .fbox-8,
    .features-section .row > .col:last-child > .fbox,
    .features-section .row > .col:last-child > .fbox-4{margin-bottom:0!important;}
}