/* =====================================================
   ARGUS SENTINEL — ANDROID ENDPOINTS PAGE
   Navbar, footer, .container, .eyebrow, .section-head, the
   contact band and the phone mockup (.phoneShell / .threatPanel /
   .tp-*) all come from general.css. Only rules unique to this
   page live here.
   ===================================================== */

.mobile-page {
    /* .pim-page in general.css supplies --navy --blue --cyan --green --red
       --muted --border etc. Only the extras this page needs are declared. */
    --ink: #17236f;
    --rust: #b5542e;
    --hair: rgba(23, 35, 111, 0.12);
    --card: rgba(255, 255, 255, 0.72);
    --warm: #f1efe7;
}

/*===================SECTION SHELL=====================*/
.ms-section {
    position: relative;
    padding: 96px 0;
    background: #f7f8f4;
}

/*===================SHARED TYPE=====================*/
.mobile-page .section-head {
    max-width: 720px;
    margin-bottom: 46px;
}

.mobile-page .section-head.is-centred {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}

.mobile-page .section-head.is-centred .eyebrow {
    margin-inline: auto;
}

.mobile-page h2 {
    font-size: clamp(30px, 3.1vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.ms-lead {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

/*===================01 · ANDROID ENDPOINTS=====================*/
.ms-hero {
    padding-top: 60px;
    padding-bottom: 40px;
}

.ms-hero-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(400px, 0.92fr);
    align-items: center;
    gap: 72px;
}

/* the eyebrow and the availability tag share one baseline */
.ms-kicker-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 2rem;
}

.ms-kicker-row .eyebrow {
    margin-bottom: 0 !important;
}

.ms-tag {
    padding: 4px 13px;
    border: 1px solid rgba(10, 162, 113, 0.35);
    border-radius: 999px;
    color: var(--green);
    background: rgba(10, 162, 113, 0.08);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ms-hero h1 {
    margin-top: 0;
    color: var(--ink);
    font-size: clamp(40px, 4.4vw, 58px);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.ms-hero .ms-lead {
    margin-top: 24px;
    font-size: 16px;
}

/* three feature rows under the lead */
.ms-points {
    margin-top: 34px;
    display: grid;
    gap: 14px;
}

.ms-points li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    border: 1px solid var(--hair);
    border-radius: 12px;
    background: var(--card);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ms-points li:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 167, 196, 0.4);
    box-shadow: 0 14px 30px rgba(26, 38, 93, 0.07);
}

.ms-points img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.mobile-page .ms-points b {
    display: block;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.35;
}

.ms-points small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.6;
}

/* dark preview panel */
.ms-preview {
    padding: 24px 26px 10px;
    border: 1px solid rgba(114, 217, 238, 0.16);
    border-radius: 16px;
    background: linear-gradient(150deg, #202b80, #17236f 74%);
    box-shadow: 0 28px 70px rgba(23, 35, 111, 0.22);
}

.ms-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-page .ms-preview-head b {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
}

.ms-preview-head img {
    width: 20px;
    height: 20px;
}

.ms-preview-head small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ms-preview-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ms-preview-rows li:last-child {
    border-bottom: 0;
}

.ms-preview-rows span {
    color: rgba(255, 255, 255, 0.86);
    font-size: 12.5px;
}

.ms-preview-rows i {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ms-preview-rows .is-green {
    color: #4adea1;
}

.ms-preview-rows .is-cyan {
    color: #72d9ee;
}

.ms-preview-rows .is-red {
    color: #ff8a8f;
}

/*===================02 · DEMO (SHARED PHONE MOCKUP)=====================*/
.ms-demo-section {
    padding: 0;
}

/* copy stacked above the handset, everything centred on one axis.
   .threatPanel resets itself to text-align:left, so the phone screen is
   unaffected by the centring here. */
.ms-demo {
    margin: 72px auto;
    display: grid;
    justify-items: center;
    gap: 56px;
    padding: 64px 72px 72px;
    border-radius: 30px;
    background: linear-gradient(125deg, #202b80, #17236f 72%);
    box-shadow: 0 28px 70px rgba(23, 35, 111, 0.18);
    text-align: center;
}

.ms-demo-copy {
    max-width: 760px;
}

.mobile-page .ms-demo-copy h2,
.ms-demo-copy p,
.mobile-page .ms-demo-copy b {
    color: #ffffff;
}

.ms-demo-copy .eyebrow {
    margin-inline: auto;
}

.ms-demo-copy > p {
    max-width: 620px;
    margin: 16px auto 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.75;
}

/*===================PHONE SCREENS (this page only)=====================*/
/* The handset chrome and the threat-detail screen come from general.css.
   The multi-screen mechanics and the detection-overview screen live here
   because only this page uses them — js/phone-screens.js swaps .is-active. */
.tp-screen {
    flex: 1 1 auto;
    min-height: 0;
    display: none;
    flex-direction: column;
}

.tp-screen.is-active {
    display: flex;
}

/* ---- launch blocked screen ---- */
/* The dark page bleeds over the panel's own side and bottom padding so it fills
   the screen the way a real full screen block does. The handset bezel is the
   .phoneShell around this and is left alone. */
.threatPanel:has(> .tp-screen[data-screen="blocked"].is-active) {
    background: #0b1330;
}

.threatPanel:has(> .tp-screen[data-screen="blocked"].is-active) .tp-status {
    color: #e6ebff;
}

.threatPanel:has(> .tp-screen[data-screen="blocked"].is-active) .tp-dot {
    background: #e6ebff;
}

.tp-blocked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 -11px -11px;
    padding: 24px 22px 22px;
    background: radial-gradient(circle at 50% 14%, #182452, #0b1330 66%);
    text-align: center;
    overflow: hidden;
}

.tpb-mark {
    margin-bottom: 18px;
    color: #ffffff;
    line-height: 0;
}

.threatPanel .tp-blocked h4 {
    margin: 0 0 6px;
    color: #ff4d5a;
    font-size: 19px;
    font-weight: 800;
}

.threatPanel .tp-blocked b {
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
}

.tp-blocked p {
    margin: 12px 0 0;
    color: rgba(226, 233, 255, 0.66);
    font-size: 11.5px;
    line-height: 1.65;
}

.tpb-actions {
    display: grid;
    gap: 10px;
    width: 100%;
    margin-top: 26px;
}

.tpb-actions button {
    width: 100%;
    padding: 13px 10px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.tpb-primary {
    border: 0;
    color: #ffffff;
    background: #2440c8;
}

.tpb-primary:hover {
    background: #2c4ae0;
}

.tpb-danger {
    border: 1px solid #7a2230;
    color: #ff6470;
    background: #3d1119;
}

.tpb-danger:hover {
    border-color: #a12e3f;
    background: #4d1620;
}

.threatPanel .tp-back {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.tpd-gear {
    color: #14162a;
    line-height: 0;
}

/* ---- threat banner ---- */
.tpd-alert {
    margin-bottom: 11px;
    padding: 14px 12px 13px;
    border-radius: 12px;
    background: #f9b9b9;
    text-align: center;
}

.tpd-alert-icons {
    display: flex;
    justify-content: center;
    gap: 8px;
    color: #0f9d63;
}

.threatPanel .tpd-alert h4 {
    margin: 7px 0 3px;
    color: #14162a;
    font-size: 15px;
    font-weight: 800;
}

.threatPanel .tpd-alert p {
    margin: 0 0 10px;
    color: #5d5f6d;
    font-size: 9px;
    line-height: 1.4;
}

.tpd-alert-flag {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    background: #a9e5c5;
    color: #0d6b45;
    font-size: 11px;
    font-weight: 700;
}

/* ---- scan buttons ---- */
.tpd-scan {
    margin-bottom: 13px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.tpd-scan button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.tpd-scan-apk {
    background: #3a49d6;
}

.tpd-scan-app {
    background: #21c082;
}

/* ---- section headings ---- */
.threatPanel .tpd-h {
    margin: 0 0 8px;
    color: #14162a;
    font-size: 12.5px;
    font-weight: 800;
}

.tpd-h-row {
    margin-top: 13px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.tpd-h-row .tpd-h {
    margin-bottom: 8px;
}

.tpd-viewall {
    color: #14162a;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- monitoring tiles ---- */
.tpd-tiles {
    margin-bottom: 13px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.tpd-tile {
    padding: 13px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: 1px solid #e8e9ee;
    border-radius: 11px;
    background: #ffffff;
    color: #3a49d6;
    text-align: center;
}

.tpd-tile.is-good {
    border-color: #b6e7cd;
    background: #dff5e8;
    color: #0f9d63;
}

.threatPanel .tpd-tile b {
    color: #14162a;
    font-size: 12px;
    font-weight: 700;
}

.tpd-tile.is-good b {
    color: #0f9d63;
}

.tpd-tile small {
    color: #6f7280;
    font-size: 9px;
}

.tpd-tile.is-good small {
    color: #0f9d63;
}

/* ---- server report ---- */
.tpd-server {
    margin-bottom: 4px;
    padding: 12px 11px;
    border: 1px solid #cfe0f5;
    border-radius: 12px;
    background: #f2f7fe;
}

/* mark + text on the left, status badge held to the right of the same row */
.tpd-server-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.tpd-server-mark {
    color: #3a49d6;
    line-height: 0;
}

.threatPanel .tpd-server-head b {
    display: block;
    color: #14162a;
    font-size: 12px;
    font-weight: 700;
}

.tpd-server-head small {
    display: block;
    margin-top: 2px;
    color: #6f7280;
    font-size: 8px;
    line-height: 1.45;
}

.tpd-badge {
    flex-shrink: 0;
    padding: 4px 9px;
    border: 1px solid #b9d4f2;
    border-radius: 7px;
    background: #e3eefc;
    color: #2a5fa8;
    font-size: 9px;
    font-weight: 700;
}

.tpd-log {
    margin: 10px 0 0;
    display: grid;
    gap: 4px;
}

.threatPanel .tpd-log li {
    position: relative;
    padding-left: 13px;
    color: #4a4c5c;
    font-size: 8px;
    line-height: 1.45;
    word-break: break-all;
}

.tpd-log li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3a86e8;
}

.tpd-log li.is-warn::before {
    background: #f0b429;
}

.tpd-chips {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tpd-chips span {
    padding: 4px 11px;
    border: 1px solid #cfd8e6;
    border-radius: 999px;
    background: #ffffff;
    color: #4a4c5c;
    font-size: 9px;
    font-weight: 700;
}

.tpd-chips .is-on {
    border-color: #2c3ccc;
    background: #2c3ccc;
    color: #ffffff;
}

.tpd-reset {
    margin-top: 9px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: #ef4b5c;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

/* ---- flagged app / recent activity rows ---- */
.tpd-item {
    width: 100%;
    margin-bottom: 8px;
    padding: 11px 10px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border: 1px solid #e8e9ee;
    border-radius: 11px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tpd-item.is-static {
    cursor: default;
}

button.tpd-item:hover {
    border-color: #c3c7d4;
    box-shadow: 0 4px 12px rgba(20, 22, 42, 0.08);
}

.tpd-item-icon {
    line-height: 0;
}

.tpd-item-icon.is-warn {
    color: #f07a1e;
}

.tpd-item-icon.is-ok {
    color: #21b877;
}

.threatPanel .tpd-item-main b {
    display: block;
    color: #14162a;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
}

.tpd-item-main small {
    display: block;
    color: #9a9cab;
    font-size: 8.5px;
    line-height: 1.45;
}

.tpd-pill {
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 8.5px;
    font-weight: 700;
    text-align: center;
}

.tpd-pill.is-bad {
    background: #fbd5d9;
    color: #b3283a;
}

.tpd-pill.is-ok {
    background: #cdf0dd;
    color: #0d7a4f;
}

/* ---- bottom sheet ----
   negative margins cancel .threatPanel's 11px side / 11px bottom padding so
   the sheet spans the full screen width and sits flush on the bottom edge;
   the lower corners follow the screen radius, the upper ones stay sheet-like */
.tpd-tabbar {
    flex: 0 0 auto;
    margin: 9px -11px -11px;
    padding: 13px 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 16px 16px 24px 24px;
    background: #14162a;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 -6px 18px rgba(20, 22, 42, 0.16);
}

/* the grab handle that makes it read as a sheet rather than a tab bar */
.tpd-tabbar::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.32);
    transform: translateX(-50%);
}

.tpd-tabbar {
    position: relative;
}

/* ---- coach marks on the clickable elements ---- */
.tpd-hint {
    position: relative;
    z-index: 2;
    display: block;
    width: fit-content;
    margin: 0 0 9px auto;
    padding: 6px 12px;
    border-radius: 30px;
    background: #17236f;
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

/* tail pointing down at the card below it */
.tpd-hint::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 18px;
    border: 5px solid transparent;
    border-top-color: #17236f;
    border-bottom: 0;
}

/* variant that hangs under its target instead of above it */
.tpd-back-wrap {
    position: relative;
    display: inline-flex;
}

.tpd-hint.is-below {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    margin: 0;
}

.tpd-hint.is-below::after {
    top: auto;
    bottom: 100%;
    right: 12px;
    border: 5px solid transparent;
    border-bottom-color: #17236f;
    border-top: 0;
}

/* ---- bottom sheet ----
   negative margins cancel .threatPanel's 11px side / 11px bottom padding so
   the sheet spans the full screen width and sits flush on the bottom edge;
   the lower corners follow the screen radius, the upper ones stay sheet-like */
.tpd-tabbar {
    flex: 0 0 auto;
    margin: 9px -11px -11px;
    padding: 13px 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 16px 16px 24px 24px;
    background: #14162a;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 -6px 18px rgba(20, 22, 42, 0.16);
}

/* the grab handle that makes it read as a sheet rather than a tab bar */
.tpd-tabbar::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.32);
    transform: translateX(-50%);
}

.tpd-tabbar {
    position: relative;
}

/* ---- coach marks on the clickable elements ---- */
.tpd-hint {
    position: relative;
    z-index: 2;
    display: block;
    width: fit-content;
    margin: 0 0 9px auto;
    padding: 6px 12px;
    border-radius: 30px;
    background: #17236f;
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

/* tail pointing down at the card below it */
.tpd-hint::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 18px;
    border: 5px solid transparent;
    border-top-color: #17236f;
    border-bottom: 0;
}

/* variant that hangs under its target instead of above it */
.tpd-back-wrap {
    position: relative;
    display: inline-flex;
}

.tpd-hint.is-below {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    margin: 0;
}

.tpd-hint.is-below::after {
    top: auto;
    bottom: 100%;
    right: 12px;
    border: 5px solid transparent;
    border-bottom-color: #17236f;
    border-top: 0;
}

/*===================IMMERSIVE HANDSET (PHONES ONLY)=====================*/
/* On a phone the handset takes over the whole viewport as it scrolls into
   view, then hands the screen back on the way out. Position can't animate
   from static to fixed, so js/phone-immersive.js pins it first and plays the growth as a
   transform: it starts small and low, then eases up to full size. */
.ms-phone-stage {
    display: flex;
    justify-content: center;
    width: 100%;
}

.mobile-page .phoneShell {
    transition: opacity 0.3s ease;
}

/* the navbar gets out of the way for the same reason, and by the same means */
.site-header {
    transition: opacity 0.3s ease;
}

body.phone-immersive .site-header {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 620px) {
    /* .is-flat is also matched further down this file at the same weight, so
       the takeover has to carry both classes to win the width back */
    .mobile-page .phoneShell.is-immersive,
    .mobile-page .phoneShell.is-flat.is-immersive {
        position: fixed;
        inset: 0;
        z-index: 900;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none;
        transform-origin: 50% 64%;
        transition:
            transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
            opacity 0.4s ease;
    }

    /* the small, low starting point — played forwards on the way in and
       backwards on the way out */
    .mobile-page .phoneShell.is-immersive.is-shrunk,
    .mobile-page .phoneShell.is-flat.is-immersive.is-shrunk {
        transform: scale(0.72) translateY(70px);
        opacity: 0;
        /* it is still pinned over the page while it shrinks away — let the
           scroll that dismissed it carry straight through */
        pointer-events: none;
    }

    /* one frame with transitions off, so the starting point is *committed*
       rather than transitioned into — otherwise the growth animation plays
       from full size and reads as a wobble */
    .mobile-page .phoneShell.is-instant {
        transition: none !important;
    }

    /* once the app owns the screen, running out of app content has to hand the
       scroll back to the page — otherwise the reader is trapped inside the
       handset with no way to reach the rest of the site */
    .mobile-page .phoneShell.is-immersive .tp-scroll {
        overscroll-behavior: auto;
    }

    .mobile-page .phoneShell.is-immersive::after {
        border-radius: 0;
    }

    .mobile-page .phoneShell.is-immersive .threatPanel {
        height: 100%;
        border-radius: 0;
        padding: max(12px, env(safe-area-inset-top)) 14px
                 max(11px, env(safe-area-inset-bottom));
    }

    /* the bottom sheet keeps hugging the screen edge at full size */
    .mobile-page .phoneShell.is-immersive .tpd-tabbar {
        margin: 9px -14px calc(-1 * max(11px, env(safe-area-inset-bottom)));
        border-radius: 16px 16px 0 0;
    }
}

/* an immersive takeover is motion the user did not ask for */
@media (prefers-reduced-motion: reduce) {
    .mobile-page .phoneShell,
    .site-header {
        transition: none;
    }
}

/*===================ALERT ANSWERS=====================*/
/* sits inside the dark demo card, under the handset, so everything here is
   the light-on-navy variant of the standard card treatment */
.ms-answers {
    width: 100%;
    margin-top: 16px;
    padding-top: 52px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-page .ms-answers h2 {
    color: #ffffff;
    font-size: clamp(26px, 2.6vw, 34px);
}

.ms-answers .ms-lead {
    max-width: 620px;
    margin: 14px auto 0;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
}

.ms-answers-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    text-align: left;
}

.ms-answers-grid article {
    padding: 24px 22px 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.ms-answers-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(114, 217, 238, 0.35);
}

/* the icons are drawn for light backgrounds, so each keeps its own pale tile */
.ms-answer-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 16px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
}

.ms-answer-icon img {
    width: 22px;
    height: 22px;
}

.mobile-page .ms-answers-grid b {
    display: block;
    margin-bottom: 9px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.3;
}

.ms-answers-grid p {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12.5px;
    line-height: 1.7;
}

.ms-answers-grid article ul {
    display: grid;
    gap: 7px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ms-answers-grid article li {
    position: relative;
    padding-left: 15px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 11.5px;
    line-height: 1.55;
}

.ms-answers-grid article li::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #72d9ee;
}

/*===================03 · WHY IT MATTERS=====================*/
.ms-gap {
    background: var(--warm);
}

.ms-gap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ms-gap-grid article {
    padding: 26px 24px 28px;
    border: 1px solid var(--hair);
    border-radius: 14px;
    background: #ffffff;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ms-gap-grid article:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(26, 38, 93, 0.08);
}

.ms-gap-grid small {
    display: block;
    margin-bottom: 16px;
    color: var(--cyan);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.mobile-page .ms-gap-grid b {
    display: block;
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.3;
}

.ms-gap-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.7;
}

/*===================04 · HOW IT WORKS=====================*/
.ms-steps {
    margin: 0 0 64px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    list-style: none;
}

.ms-steps li {
    padding: 24px 22px 26px;
    border: 1px solid var(--hair);
    border-radius: 14px;
    background: var(--card);
}

.ms-steps span {
    width: 30px;
    height: 30px;
    margin-bottom: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.mobile-page .ms-steps b {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 15px;
}

.ms-steps p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

/* this section runs dark, so the shared step cards need light variants */
.ms-howitworks {
    color: #ffffff;
    background: linear-gradient(150deg, #202b80, #17236f 74%);
}

.mobile-page .ms-howitworks h2 {
    color: #ffffff;
}

.ms-howitworks .ms-lead {
    color: rgba(255, 255, 255, 0.72);
}

.ms-howitworks .ms-steps li {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.ms-howitworks .ms-steps span {
    color: #06231a;
    background: #4adea1;
}

.mobile-page .ms-howitworks .ms-steps b {
    color: #ffffff;
}

.ms-howitworks .ms-steps p {
    color: rgba(255, 255, 255, 0.7);
}

/* the four one-word promises under the steps */
.ms-traits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ms-traits article {
    padding: 22px 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}

.mobile-page .ms-traits b {
    display: block;
    margin-bottom: 7px;
    color: #4adea1;
    font-size: 20px;
    letter-spacing: -0.03em;
}

.ms-traits small {
    display: block;
    color: rgba(255, 255, 255, 0.66);
    font-size: 11.5px;
    line-height: 1.6;
}

/*===================05 · CAPABILITIES=====================*/
/* flex rather than grid: five cards leave a gap in the last row of a
   three-column grid, and flex-wrap lets that short row centre itself */
.ms-cap-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.ms-cap-grid article {
    flex: 0 1 calc((100% - 40px) / 3);
    padding: 28px 26px 30px;
    border: 1px solid var(--hair);
    border-radius: 16px;
    background: var(--card);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ms-cap-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(16, 167, 196, 0.4);
    box-shadow: 0 16px 34px rgba(26, 38, 93, 0.08);
}

.ms-cap-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    border: 1px solid var(--hair);
    border-radius: 11px;
    background: #ffffff;
}

.ms-cap-icon img {
    width: 26px;
    height: 26px;
}

.mobile-page .ms-cap-grid b {
    display: block;
    margin-bottom: 9px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.3;
}

.ms-cap-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.7;
}

/*===================06 · PRIVACY FIRST=====================*/
.ms-privacy {
    background: var(--warm);
}

.ms-privacy .ms-why h2 {
    margin: 15px 0 18px;
}

.ms-correlation {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 56px;
}

/* dark correlated-finding card */
.ms-finding {
    padding: 22px 22px 24px;
    border: 1px solid rgba(114, 217, 238, 0.16);
    border-radius: 16px;
    background: linear-gradient(150deg, #202b80, #17236f 74%);
    box-shadow: 0 24px 60px rgba(23, 35, 111, 0.2);
}

.ms-finding-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-page .ms-finding-head b {
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
}

.ms-finding-head small {
    padding: 4px 10px;
    border: 1px solid rgba(114, 217, 238, 0.3);
    border-radius: 6px;
    color: #72d9ee;
    background: rgba(16, 167, 196, 0.14);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ms-finding ul {
    margin-top: 16px;
    display: grid;
    gap: 8px;
}

.ms-finding li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
}

.ms-finding li span {
    color: rgba(255, 255, 255, 0.86);
    font-size: 11.5px;
    line-height: 1.45;
}

.ms-finding li i {
    flex-shrink: 0;
    color: #9fb2c8;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ms-finding li .is-network {
    color: #72d9ee;
}

.ms-finding li .is-persistence {
    color: var(--orange, #eba928);
}

.ms-finding li .is-guidance {
    color: #4adea1;
}

/* explanation beside the card */
.mobile-page .ms-why h3 {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 19px;
    letter-spacing: -0.02em;
}

.ms-why > p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.75;
}

.ms-why ul {
    display: grid;
    gap: 11px;
}

.ms-why li {
    position: relative;
    padding-left: 26px;
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.6;
}

.ms-why li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--green);
    font-weight: 800;
}

/*===================DYNAMIC LAYOUT=====================*/
@media (max-width: 1100px) {
    .ms-hero-grid,
    .ms-correlation {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .ms-demo {
        margin: 66px auto;
        gap: 48px;
        padding: 52px 44px 60px;
    }

    .ms-steps,
    .ms-traits {
        grid-template-columns: repeat(2, 1fr);
    }

    .ms-answers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* .ms-cap-grid is a flex row — grid columns do nothing to it */
    .ms-cap-grid article {
        flex-basis: calc((100% - 20px) / 2);
    }
}

@media (max-width: 820px) {
    .ms-section {
        padding: 66px 0;
    }

    .ms-hero {
        padding-top: 34px;
        padding-bottom: 70px;
    }

    .ms-demo-section {
        padding: 0;
    }

    .ms-gap-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .ms-hero-grid,
    .ms-correlation {
        gap: 38px;
    }

    .ms-kicker-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ms-hero h1 {
        font-size: 34px;
    }

    .ms-preview {
        padding: 20px 20px 6px;
    }

    .ms-demo {
        margin: 48px auto;
        padding: 38px 24px 46px;
        border-radius: 22px;
    }

    .ms-steps,
    .ms-traits,
    .ms-answers-grid {
        grid-template-columns: 1fr;
    }

    /* one card per row, each spanning the full width, rather than two
       columns narrow enough to break the copy onto a word per line */
    .ms-cap-grid article {
        flex-basis: 100%;
    }

    .ms-steps {
        margin-bottom: 46px;
    }

    .ms-answers {
        padding-top: 36px;
    }

    .ms-finding li {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* general.css shrinks the handset to 251px on phones — this page keeps it
       at full size, with its own inner scroll, exactly as on desktop */
    .mobile-page .phoneShell,
    .mobile-page .phoneShell.is-flat {
        width: min(100%, 348px);
        margin: 0 auto;
    }

    .mobile-page .threatPanel {
        height: 620px;
    }

    /* room for the full-size handset inside the demo block */
    .ms-demo {
        padding-inline: 14px;
    }
}


/*===================HEADER GAP=====================*/
/* One consistent distance between the sticky header and the first line of the
   page, matching Home. Appended last so it settles the several earlier rules
   that were each setting this differently. */
.ms-hero {
    padding-top: 48px;
}

@media (max-width: 820px) {
    .ms-hero {
        padding-top: 26px;
    }
}

@media (max-width: 620px) {
    /* .container picks up margin-top: 1rem here, which covers most of the gap */
    .ms-hero {
        padding-top: 4px;
    }
}