/* ============================================================================
   MPloyChek — "Modern" design system (handoff 2A-T1)
   ---------------------------------------------------------------------------
   Every colour, size and spacing number in this file comes from the design
   hand-off package for issue #237. The three sets of numbers are:

     - the plain rules            -> the 390px mobile design
     - @media (min-width: 768px)  -> the 834px tablet design
     - @media (min-width: 1080px) -> the 1240px desktop design

   Each of those three was drawn by hand, so the numbers are not a scaled-up
   version of each other. Do not "tidy" them into a formula.

   Class names all start with "m-" so nothing here collides with the older
   "b-" styles in styles-b.css.
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
    --m-blue: #2F6BFF;
    --m-navy: #1B3A8B;
    --m-navy-deep: #0E1F4D;
    --m-navy-darkest: #0B1838;
    --m-body: #5A6480;
    --m-muted: #3A455F;
    --m-faint: #8A93AB;
    --m-faint-2: #9AA4BC;
    --m-border: #E8EDF7;
    --m-border-2: #EDF1F9;
    --m-border-3: #EAEFF8;
    --m-bg-offwhite: #FAFBFE;
    --m-bg-grey: #F4F6FB;
    --m-green: #16A34A;
    --m-green-dark: #15803D;
    --m-amber: #D97706;
    --m-purple: #7C3AED;

    --m-card-shadow: 0 6px 18px -12px rgba(14, 31, 77, .18);
    --m-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- animations ---------- */
@keyframes mBtnSheen {
    from { background-position: 0% 50%; }
    to   { background-position: 200% 50%; }
}

@keyframes mLogosBreathe {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.07) translateY(-8px); }
}

@keyframes mHeartBeat {
    0%        { transform: scale(1); }
    18%       { transform: scale(1.22); }
    34%       { transform: scale(1); }
    50%       { transform: scale(1.14); }
    66%, 100% { transform: scale(1); }
}

/* ---------- page shell ---------- */
body.m-page {
    margin: 0;
    background: var(--m-bg-grey);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* The default colour for a plain link. The "body.m-page" part is wrapped in
   :where() on purpose: :where() counts for nothing when the browser decides
   which rule wins, so this rule is only as strong as a bare "a". That is
   still enough to beat the link colour in styles-b.css (this file loads
   after it), but weak enough that any link given its own colour further down
   — a button, a menu item, a footer link — keeps that colour. Without this,
   white button text was being turned navy. */
:where(body.m-page) a { color: var(--m-navy); }
:where(body.m-page) a:hover { color: var(--m-blue); }
body.m-page a { text-decoration: none; }

.m-shell {
    max-width: 1240px;
    margin: 0 auto;
    background: #fff;
}

/* Inner width of a section. Mobile 18px, tablet 30px, desktop 44px. */
.m-section { padding: 32px 18px 36px; }
.m-section--alt { background: var(--m-bg-offwhite); border-top: 1px solid #EEF1F8; }
.m-section--bleed { padding-left: 0; padding-right: 0; }
.m-section--bleed > .m-bleed-pad { padding: 0 18px; }

.m-h2 {
    font: 800 25px/1.2 'Inter', sans-serif;
    letter-spacing: -.025em;
    color: var(--m-navy-deep);
    margin: 0;
}

.m-sub {
    font: 400 14px/1.7 'Inter', sans-serif;
    color: var(--m-body);
    margin: 10px 0 0;
}

/* ---------- buttons ---------- */
.m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border-radius: 12px;
    letter-spacing: -.005em;
    text-align: center;
    transition: transform 300ms var(--m-ease),
                box-shadow 300ms var(--m-ease),
                border-color 220ms ease,
                color 220ms ease,
                background-color 220ms ease;
}

.m-btn svg { flex-shrink: 0; }

.m-btn--primary {
    border: 1px solid transparent;
    color: #fff;
    background-image: linear-gradient(110deg, #2F6BFF 0%, #1B3A8B 42%, #2F6BFF 100%);
    background-size: 230% 100%;
    background-position: 0% 50%;
    box-shadow: 0 10px 22px -12px rgba(47, 107, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.m-btn--primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -14px rgba(47, 107, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .3);
    animation: mBtnSheen 2.8s linear infinite;
}

.m-btn--primary:active {
    transform: translateY(0) scale(.988);
    box-shadow: 0 6px 14px -10px rgba(47, 107, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.m-btn--outline {
    background: #fff;
    border: 1px solid #D9E1EF;
    color: var(--m-navy);
    box-shadow: 0 1px 2px rgba(14, 31, 77, .04);
}

.m-btn--outline:hover {
    transform: translateY(-2px);
    border-color: var(--m-blue);
    color: var(--m-blue);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .12), 0 12px 24px -16px rgba(14, 31, 77, .5);
}

.m-btn--outline:active {
    transform: translateY(0) scale(.988);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .16);
}

/* Outline button sitting on one of the dark navy bands. */
.m-btn--ghost {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .26);
    color: #fff;
}

.m-btn--ghost:hover {
    color: #fff;
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .6);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .1), 0 14px 26px -16px rgba(0, 0, 0, .7);
}

.m-btn--ghost:active { transform: translateY(0) scale(.988); }

/* Sizes */
.m-btn--lg    { font: 600 15px 'Inter', sans-serif; padding: 15px; width: 100%; }
.m-btn--md    { font: 600 14px 'Inter', sans-serif; padding: 13px; border-radius: 11px; width: 100%; }
.m-btn--sm    { font: 600 13px 'Inter', sans-serif; padding: 11px 17px; border-radius: 10px; }
.m-btn--outline.m-btn--lg { padding: 14px; }
.m-btn--outline.m-btn--md { padding: 13px; }
.m-btn--ghost.m-btn--lg   { padding: 14px; }

/* People tap with a fingertip, so nothing interactive goes below 44px tall. */
@media (max-width: 767px) {
    .m-btn { min-height: 44px; }
}

/* ---------- cards ---------- */
.m-card {
    display: block;
    background: #fff;
    border: 1px solid var(--m-border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--m-card-shadow);
}

.m-card-accent { width: 30px; height: 4px; border-radius: 2px; }
.m-card-title  { font: 700 15.5px 'Inter', sans-serif; color: var(--m-navy-deep); margin: 13px 0 0; }
.m-card-body   { font: 400 13px/1.65 'Inter', sans-serif; color: var(--m-body); margin: 7px 0 0; }

a.m-card { transition: box-shadow 300ms var(--m-ease), border-color 220ms ease; }
a.m-card:hover { box-shadow: 0 14px 30px -14px rgba(14, 31, 77, .28); border-color: #CFD8EC; }

/* =========================================================================
   HEADER
   ========================================================================= */
.m-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #fff;
    color: var(--m-navy);
    padding: 10px 14px;
    border-radius: 8px;
    z-index: 100;
    font: 600 13px 'Inter', sans-serif;
}
.m-skip:focus { left: 12px; top: 12px; }

.m-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--m-border-2);
}

.m-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 18px;
}

.m-logo { height: 22px; width: auto; display: block; flex-shrink: 0; }
.m-header-bar > a:first-child { flex-shrink: 0; display: block; }

.m-header-actions { display: flex; align-items: center; gap: 8px; }

/* Round icon buttons used for phone and menu on small screens. */
.m-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #E0E7F5;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
}

/* The desktop parts of the header are hidden until there is room for them.
   On phones the same links are shown in the drawer instead. */
.m-navpill, .m-header-desktop, .m-mega { display: none; }

/* ---- mobile drawer ---- */
.m-drawer {
    overflow: hidden;
    border-top: 1px solid var(--m-border-2);
    max-height: 0;
    opacity: 0;
    transition: max-height 420ms var(--m-ease), opacity 260ms ease;
}

.m-header.is-open .m-drawer { max-height: 80vh; opacity: 1; }

.m-drawer-inner { padding: 10px 18px 18px; max-height: 74vh; overflow-y: auto; }

.m-drawer-group { border-bottom: 1px solid #F1F4FA; }

.m-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 2px;
    background: none;
    border: 0;
    cursor: pointer;
    font: 600 15px 'Inter', sans-serif;
    color: var(--m-muted);
    text-align: left;
}

.m-drawer-group.is-open > .m-drawer-toggle { color: var(--m-navy); }
.m-drawer-toggle svg { opacity: .55; transition: transform 260ms ease; }
.m-drawer-group.is-open > .m-drawer-toggle svg { transform: rotate(180deg); }

.m-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 400ms var(--m-ease), opacity 240ms ease;
}

.m-drawer-group.is-open .m-drawer-links {
    max-height: 700px;
    opacity: 1;
    padding: 2px 0 12px;
}

.m-drawer-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 10px;
    margin-left: -10px;
    border-radius: 9px;
    font: 500 14px 'Inter', sans-serif;
    color: var(--m-muted);
}

.m-drawer-links a:hover { background: #F4F7FE; color: var(--m-navy); }

.m-drawer-cta { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }

/* =========================================================================
   HERO
   ========================================================================= */
.m-hero {
    padding: 30px 18px 34px;
    background:
        radial-gradient(130% 110% at 90% -10%, #E8EFFF 0%, rgba(232, 239, 255, 0) 58%),
        radial-gradient(90% 80% at 0% 100%, #EAFBF1 0%, rgba(234, 251, 241, 0) 55%);
    overflow: hidden;
}

.m-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #E0E7F5;
    font: 600 10.5px 'Inter', sans-serif;
    color: var(--m-navy);
    box-shadow: 0 1px 2px rgba(16, 30, 70, .05);
}

.m-dot-green {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--m-green);
    flex-shrink: 0;
}

.m-h1 {
    font: 800 33px/1.1 'Inter', sans-serif;
    letter-spacing: -.03em;
    color: var(--m-navy-deep);
    margin: 18px 0 0;
    text-wrap: pretty;
}

.m-h1 span { color: var(--m-blue); }

.m-hero-copy { font: 400 14.5px/1.7 'Inter', sans-serif; color: var(--m-body); margin: 14px 0 0; }

/* The last two sentences of the hero paragraph are only shown once there is
   room for them — the mobile and tablet designs both stop after the
   turnaround-time sentence. */
.m-hero-copy .m-hero-copy-long { display: none; }

.m-hero-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

/* ---- rotating photo panel ---- */
.m-hero-media { position: relative; margin-top: 26px; }

.m-hero-frame {
    position: relative;
    height: 300px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--m-navy-deep);
    box-shadow: 0 22px 44px -18px rgba(14, 31, 77, .4);
}

.m-hero-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 900ms ease;
}

.m-hero-frame img.is-active { opacity: 1; }

.m-hero-dashes { position: absolute; right: 12px; top: 12px; display: flex; gap: 5px; }

.m-hero-dashes span {
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: #fff;
    opacity: .35;
    transition: opacity 400ms ease;
}

.m-hero-dashes span.is-active { opacity: 1; }

/* On phones the quote sits inside the photo, over a dark fade. */
.m-hero-quote {
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(0deg, rgba(11, 24, 56, .86) 0%, rgba(11, 24, 56, 0) 100%);
}

.m-hero-quote-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 600 10.5px 'Inter', sans-serif;
    color: #7FE0A6;
}

.m-hero-quote-label > span:first-child {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #34D399;
}

.m-hero-quote-text { font: 400 12px/1.55 'Inter', sans-serif; color: #DCE6FA; margin-top: 5px; }

/* ---- avatar row ---- */
.m-hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.m-avatars { display: flex; flex-shrink: 0; }

.m-avatars img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}

.m-avatars img + img { margin-left: -9px; }
.m-hero-trust-text { font: 400 12px/1.6 'Inter', sans-serif; color: var(--m-body); }
.m-hero-trust-text b { font-weight: 600; color: var(--m-navy-deep); }

/* =========================================================================
   CLIENT LOGO ROW
   ========================================================================= */
.m-logos { position: relative; padding: 28px 18px 32px; border-top: 1px solid #EEF1F8; overflow: hidden; }

.m-logos-wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1400ms ease;
}

.m-logos-wash > div {
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(70% 140% at 50% 120%, #EAF1FF 0%, rgba(234, 241, 255, 0) 62%),
        radial-gradient(50% 120% at 12% -20%, #EAFBF1 0%, rgba(234, 251, 241, 0) 60%);
    transform-origin: 50% 100%;
}

.m-logos.is-hot .m-logos-wash { opacity: 1; }
.m-logos.is-hot .m-logos-wash > div { animation: mLogosBreathe 7200ms ease-in-out infinite; }

.m-logos-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 700 14px 'Inter', sans-serif;
    color: var(--m-navy-deep);
    margin: 0;
}

.m-heart { transform-origin: center; }
.m-heart path { fill: rgba(224, 82, 107, .16); transition: fill 700ms ease; }
.m-logos.is-hot .m-heart { animation: mHeartBeat 2600ms ease-in-out infinite; }
.m-logos.is-hot .m-heart path { fill: #E0526B; }

.m-logos-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 10px;
    margin-top: 20px;
    align-items: center;
}

.m-logos-cell {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 340ms var(--m-ease);
}

.m-logos-cell:hover { transform: translateY(-3px); }

.m-logos-cell img {
    max-width: 100%;
    max-height: 34px;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: grayscale(1);
    opacity: .72;
    transition: filter 600ms ease, opacity 600ms ease;
}

.m-logos.is-hot .m-logos-cell img { filter: grayscale(0); opacity: 1; }

/* =========================================================================
   DARK CALL-TO-ACTION BAND
   ========================================================================= */
.m-band { padding: 30px 18px 34px; background: var(--m-navy-deep); }
.m-band-h2 { font: 800 23px/1.22 'Inter', sans-serif; letter-spacing: -.02em; color: #fff; margin: 0; }
.m-band-sub { font: 400 13.5px/1.7 'Inter', sans-serif; color: #A9B7D6; margin: 9px 0 0; }
.m-band-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

/* =========================================================================
   CARD GRIDS ("why", "how it works", "tech")
   ========================================================================= */
.m-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }

.m-step { display: flex; gap: 14px; }

.m-step-num {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #EEF4FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 13px 'Inter', sans-serif;
    color: var(--m-blue);
}

.m-step h3 { font: 700 14.5px/1.35 'Inter', sans-serif; color: var(--m-navy-deep); margin: 0; }
.m-step p  { font: 400 13px/1.65 'Inter', sans-serif; color: var(--m-body); margin: 6px 0 0; }

.m-tech-title { font: 700 14.5px 'Inter', sans-serif; color: var(--m-navy-deep); margin: 0; }

.m-explore {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #D9E1EF;
    border-radius: 12px;
    font: 600 13.5px 'Inter', sans-serif;
    color: var(--m-navy);
    margin-top: 14px;
}

.m-explore-link { display: none; }

/* =========================================================================
   INDUSTRY PICKER
   ========================================================================= */
.m-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 20px;
}

.m-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 52px;
    padding: 10px 12px;
    border: 1px solid #E0E7F5;
    background: #fff;
    color: var(--m-muted);
    font: 600 12.5px/1.3 'Inter', sans-serif;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(14, 31, 77, .04);
    transition: transform 300ms var(--m-ease),
                box-shadow 300ms var(--m-ease),
                border-color 220ms ease,
                color 220ms ease,
                background-color 220ms ease;
}

.m-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .12), 0 12px 24px -16px rgba(14, 31, 77, .5);
}

.m-tab:active { transform: translateY(0) scale(.988); }

.m-tab[aria-selected="true"] {
    background: var(--m-navy);
    color: #fff;
    border-color: var(--m-navy);
    box-shadow: 0 10px 22px -14px rgba(27, 58, 139, .9);
}

.m-picker-grid { margin-top: 16px; }

/* On phones "suggested checks" and "typical roles" read as one card split by
   a hairline, so the two panels are joined: the top one loses its bottom
   corners and border, the bottom one loses its top ones. */
.m-picker-card {
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    padding-bottom: 16px;
    box-shadow: none;
}

.m-roles-card {
    background: #fff;
    border: 1px solid var(--m-border);
    border-top: 1px solid #EEF1F8;
    border-radius: 0 0 16px 16px;
    padding: 16px 18px 18px;
    box-shadow: var(--m-card-shadow);
}

.m-picker-h3 { font: 700 14.5px 'Inter', sans-serif; color: var(--m-navy-deep); margin: 0; }

.m-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.m-checks li {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 400 13.5px 'Inter', sans-serif;
    color: var(--m-muted);
    list-style: none;
}

.m-checks { margin-bottom: 0; padding-left: 0; }

.m-roles-label {
    font: 500 11px 'Inter', sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-faint);
}

.m-roles { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

.m-role {
    border: 1px solid var(--m-border);
    background: var(--m-bg-offwhite);
    border-radius: 999px;
    padding: 6px 12px;
    font: 500 12px 'Inter', sans-serif;
    color: var(--m-muted);
}

.m-cost-card {
    background: linear-gradient(180deg, #F7FAFF, #EEF4FF);
    border: 1px solid #E0E7F5;
    border-radius: 16px;
    padding: 18px;
    margin-top: 12px;
}

.m-cost {
    font: 800 27px 'Inter', sans-serif;
    letter-spacing: -.02em;
    color: var(--m-navy-deep);
    margin-top: 10px;
}

.m-cost-note { font: 400 12px/1.6 'Inter', sans-serif; color: var(--m-body); margin: 6px 0 0; }
.m-cost-actions { display: none; }

/* =========================================================================
   PRICING
   ========================================================================= */
.m-plan {
    background: #fff;
    border: 1px solid var(--m-border);
    border-radius: 18px;
    padding: 20px;
    margin-top: 12px;
    box-shadow: var(--m-card-shadow);
}

.m-plan--popular {
    position: relative;
    border: 1.5px solid var(--m-blue);
    margin-top: 26px;
    box-shadow: 0 14px 34px -18px rgba(47, 107, 255, .4);
}

.m-plan--dark {
    background: var(--m-navy-deep);
    border-color: transparent;
    box-shadow: 0 14px 34px -18px rgba(14, 31, 77, .6);
}

.m-plan-badge {
    position: absolute;
    top: -11px;
    left: 20px;
    background: var(--m-blue);
    color: #fff;
    font: 600 10px 'Inter', sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
}

.m-plan-badge--dark {
    position: static;
    display: inline-block;
    background: rgba(255, 255, 255, .1);
    color: #CDE0FF;
}

.m-plan h3 { font: 700 16px 'Inter', sans-serif; color: var(--m-navy-deep); margin: 0; }
.m-plan--dark h3 { color: #fff; margin: 13px 0 0; }

.m-plan-price {
    font: 800 28px 'Inter', sans-serif;
    letter-spacing: -.025em;
    color: var(--m-navy-deep);
    margin-top: 10px;
}

.m-plan-usage { font: 700 14px 'Inter', sans-serif; color: #7FA6FF; margin-top: 9px; }
.m-plan-note { font: 400 12.5px 'Inter', sans-serif; color: var(--m-body); margin: 5px 0 0; }
.m-plan--dark .m-plan-note { font: 400 12.5px/1.65 'Inter', sans-serif; color: #A9B7D6; margin: 7px 0 0; }

.m-plan-features {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font: 400 13px 'Inter', sans-serif;
    color: var(--m-muted);
}

.m-plan--dark .m-plan-features { color: #CDE0FF; }
.m-plan .m-btn { margin-top: 18px; }

.m-helper {
    background: #fff;
    border: 1px solid var(--m-border);
    border-radius: 16px;
    padding: 18px;
    margin-top: 20px;
}

.m-helper h3 { font: 700 15px 'Inter', sans-serif; color: var(--m-navy-deep); margin: 0; }
.m-helper p  { font: 400 13px/1.65 'Inter', sans-serif; color: var(--m-body); margin: 6px 0 0; }
.m-helper-actions { display: flex; gap: 9px; margin-top: 16px; }
.m-helper-actions .m-btn { flex: 1; }

/* =========================================================================
   TRUST & COMPLIANCE
   ========================================================================= */
.m-certs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 22px;
}

.m-cert {
    background: #fff;
    border: 1px solid var(--m-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--m-card-shadow);
}

.m-cert-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-cert-title { font: 700 13px/1.35 'Inter', sans-serif; color: var(--m-navy-deep); margin-top: 12px; }
.m-cert-scope { font: 400 11.5px/1.55 'Inter', sans-serif; color: var(--m-body); margin-top: 5px; }
.m-cert-meta  { font: 500 10px 'Inter', sans-serif; letter-spacing: .04em; color: var(--m-faint); margin-top: 9px; }

.m-cert-verify {
    grid-column: 1 / -1;
    display: block;
    background: linear-gradient(180deg, #F7FAFF, #EEF4FF);
    border: 1px solid #E0E7F5;
    border-radius: 16px;
    padding: 16px;
}

.m-cert-verify-title { font: 700 14px 'Inter', sans-serif; color: var(--m-navy-deep); }
.m-cert-verify-body  { font: 400 12px/1.6 'Inter', sans-serif; color: var(--m-body); margin-top: 5px; }
.m-cert-verify-cta   { font: 600 12px 'Inter', sans-serif; color: var(--m-blue); margin-top: 10px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.m-footer { background: var(--m-navy-darkest); padding: 34px 18px 22px; }
.m-footer-logo { height: 22px; filter: brightness(0) invert(1); }
.m-footer-tagline { font: 400 13px/1.7 'Inter', sans-serif; color: #A9B7D6; margin: 14px 0 0; }

.m-footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 26px;
}

.m-footer-col--wide { grid-column: 1 / -1; }

.m-footer-title {
    font: 600 11px 'Inter', sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7188B8;
}

.m-footer-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    font: 400 13px 'Inter', sans-serif;
}

.m-footer-links a,
.m-footer-legal a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: #CDE0FF;
}

.m-footer-links a:hover,
.m-footer-legal a:hover,
.m-footer-cities a:hover { color: #fff; }

.m-footer-cities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; font: 400 12.5px 'Inter', sans-serif; }

.m-footer-cities a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: #CDE0FF;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: 0 16px;
}

.m-footer-legal { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; font: 400 12px 'Inter', sans-serif; }

.m-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 20px;
    padding-top: 16px;
    font: 400 12px 'Inter', sans-serif;
    color: #7188B8;
}

.m-footer-bottom-links { display: none; }

/* =========================================================================
   STICKY BOTTOM BAR (phones only)
   ========================================================================= */
.m-sticky {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--m-border);
}

.m-sticky .m-btn { flex: 1; }

.m-sticky-wa {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #CFE9D8;
    background: #F1FBF5;
    border-radius: 12px;
}

/* =========================================================================
   TABLET — the 834px design
   ========================================================================= */
@media (min-width: 768px) {
    .m-section { padding: 44px 30px 50px; }
    .m-section--bleed { padding-left: 30px; padding-right: 30px; }
    .m-section--bleed > .m-bleed-pad { padding: 0; }

    .m-h2 { font: 800 28px/1.18 'Inter', sans-serif; letter-spacing: -.025em; }
    .m-sub { font: 400 14.5px/1.7 'Inter', sans-serif; margin: 11px 0 0; }

    /* ---- header ----
       A tablet keeps the menu drawer. The supplied tablet drawing puts all
       seven menu items in a row at 834px, but they do not actually fit there
       — the drawing simply hid what spilled over, which in a real browser
       means a word cut in half. The row of items therefore waits until 1080px
       (see below), and up to that width the menu button opens the same drawer
       a phone gets. What a tablet gains here is the call button and the
       "Try for free" button sitting in the bar. */
    .m-header { background: rgba(255, 255, 255, .9); }
    .m-header-bar { padding: 12px 22px; gap: 14px; }
    .m-logo { height: 24px; }

    .m-icon-btn { width: 36px; height: 36px; border-radius: 10px; }

    .m-header-desktop { display: flex; align-items: center; gap: 8px; flex-shrink: 0; order: 2; margin-left: auto; }
    .m-header-actions { order: 3; flex-shrink: 0; }
    .m-header-login { display: none; }
    .m-phone { display: none; }
    .m-header-desktop .m-btn { width: auto; min-height: 0; }
    .m-header-desktop .m-btn--outline { font: 600 12.5px 'Inter', sans-serif; padding: 10px 14px; border-radius: 10px; }
    .m-header-desktop .m-btn--primary { font: 600 12.5px 'Inter', sans-serif; padding: 11px 15px; border-radius: 10px; gap: 7px; }

    .m-navpill {
        position: relative;
        align-items: center;
        gap: 2px;
        padding: 4px;
        border: 1px solid var(--m-border-3);
        background: #F8FAFE;
        border-radius: 999px;
        white-space: nowrap;
    }

    .m-navpill-highlight {
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 4px;
        width: 0;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 2px 8px -4px rgba(14, 31, 77, .28);
        opacity: 0;
        transition: left 380ms var(--m-ease), width 380ms var(--m-ease), opacity 200ms ease;
    }

    .m-navitem {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 8px 13px;
        border-radius: 999px;
        cursor: pointer;
        color: var(--m-muted);
        font: 500 13.5px 'Inter', sans-serif;
        background: none;
        border: 0;
        transition: color 200ms ease;
    }

    .m-navitem:hover,
    .m-navitem.is-open { color: var(--m-navy); }
    .m-navitem svg { opacity: .55; transition: transform 180ms ease; }
    .m-navitem.is-open svg { transform: rotate(180deg); }

    /* A safety net only: if the labels ever grow (a translation, a new item),
       the row shrinks and can be swiped rather than pushing the buttons off
       the right edge. At the sizes shipped today it never kicks in. */
    .m-navpill {
        padding: 3px;
        flex: 0 1 auto;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .m-navpill::-webkit-scrollbar { display: none; }
    .m-navitem { flex-shrink: 0; }
    .m-navpill-highlight { top: 3px; bottom: 3px; left: 3px; }
    .m-navitem { padding: 8px 11px; font: 500 12.5px 'Inter', sans-serif; gap: 4px; }
    .m-navitem svg { width: 8px; height: 8px; }

    /* ---- mega menu ---- */
    .m-mega {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        border-top: 1px solid var(--m-border-2);
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 24px 48px -24px rgba(14, 31, 77, .28);
        overflow: hidden;
        transform-origin: top center;
        opacity: 0;
        transform: translateY(-6px);
        clip-path: inset(0 0 100% 0);
        pointer-events: none;
        transition: opacity 260ms var(--m-ease),
                    transform 320ms var(--m-ease),
                    clip-path 340ms var(--m-ease);
    }

    .m-mega.is-open { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0% 0); pointer-events: auto; }

    .m-mega-inner { padding: 22px; display: grid; gap: 20px; }
    .m-mega-inner[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
    .m-mega-inner[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
    .m-mega-inner[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

    .m-mega-coltitle {
        font: 600 9.5px 'Inter', sans-serif;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--m-faint-2);
    }

    .m-mega-links { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; }

    .m-mega-links a {
        display: block;
        padding: 6px 8px;
        margin-left: -8px;
        border-radius: 8px;
        font: 500 12.5px 'Inter', sans-serif;
        color: #2A3550;
    }

    .m-mega-links a:hover { background: #F4F7FE; color: var(--m-navy); }

    .m-mega-promo { background: linear-gradient(160deg, #0E1F4D, #1B3A8B); border-radius: 14px; padding: 18px; }

    .m-mega-promo-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .12);
        font: 600 10px 'Inter', sans-serif;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #9FC0FF;
    }

    .m-mega-promo-title { font: 700 14px/1.4 'Inter', sans-serif; color: #fff; margin-top: 12px; }
    .m-mega-promo-body  { font: 400 12px/1.6 'Inter', sans-serif; color: #A9B7D6; margin-top: 8px; }
    .m-mega-promo-cta   { font: 500 12.5px 'Inter', sans-serif; color: #7FA6FF; margin-top: 14px; display: block; }

    /* ---- hero ---- */
    .m-hero { padding: 44px 30px 50px; }
    .m-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: center; }
    .m-hero-badge { font: 600 11px 'Inter', sans-serif; padding: 6px 13px; }
    .m-h1 { font: 800 38px/1.08 'Inter', sans-serif; letter-spacing: -.03em; margin: 20px 0 0; }
    .m-hero-copy { margin: 16px 0 0; }
    .m-hero-actions { flex-direction: row; gap: 11px; margin-top: 26px; }
    .m-hero-actions .m-btn { width: auto; font: 600 14px 'Inter', sans-serif; padding: 13px 22px; }
    .m-hero-media { margin-top: 0; }
    .m-hero-frame { height: 340px; }
    .m-hero-dashes { right: 12px; top: 12px; }
    .m-hero-dashes span { width: 18px; }

    /* Tablet: the quote becomes a white card sitting under the photo. */
    .m-hero-quote {
        position: static;
        background: #fff;
        border: 1px solid var(--m-border);
        border-radius: 14px;
        padding: 13px 15px;
        margin-top: 12px;
        box-shadow: 0 14px 30px -16px rgba(14, 31, 77, .26);
    }
    .m-hero-quote-label { font: 600 11px 'Inter', sans-serif; color: var(--m-green-dark); gap: 7px; }
    .m-hero-quote-label > span:first-child { width: 6px; height: 6px; background: var(--m-green); }
    .m-hero-quote-text { font: 400 12px/1.6 'Inter', sans-serif; color: var(--m-muted); margin-top: 6px; }
    .m-avatars img { width: 34px; height: 34px; }
    .m-avatars img + img { margin-left: -10px; }
    .m-hero-trust { margin-top: 28px; }

    /* ---- logos ---- */
    .m-logos { padding: 36px 30px; }
    .m-logos-title { font: 700 14.5px 'Inter', sans-serif; }
    .m-logos-grid { grid-template-columns: repeat(5, 1fr); gap: 16px 14px; margin-top: 22px; }
    .m-logos-cell { height: 46px; }
    .m-logos-cell img { max-height: 38px; }

    /* ---- bands and grids ---- */
    .m-band { padding: 36px 30px; display: flex; align-items: center; gap: 24px; }
    .m-band-h2 { font: 800 24px/1.2 'Inter', sans-serif; }
    .m-band-sub { font: 400 13px/1.7 'Inter', sans-serif; margin: 10px 0 0; }
    .m-band-actions { flex-direction: row; margin: 0 0 0 auto; gap: 11px; flex-shrink: 0; }
    .m-band-actions .m-btn { width: auto; font: 600 14px 'Inter', sans-serif; padding: 13px 22px; }

    .m-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
    .m-stack--three { grid-template-columns: repeat(3, 1fr); }

    .m-card { border-radius: 16px; padding: 20px; }
    .m-card-title { font: 700 16px 'Inter', sans-serif; margin: 14px 0 0; }
    .m-card-body { font: 400 13px/1.7 'Inter', sans-serif; }
    .m-tech-title { font: 700 15px 'Inter', sans-serif; }

    .m-step { flex-direction: column; gap: 0; }
    .m-step-num { width: 32px; height: 32px; border-radius: 10px; font: 700 14px 'Inter', sans-serif; }
    .m-step h3 { font: 700 15.5px/1.35 'Inter', sans-serif; margin: 14px 0 0; }

    .m-explore { display: none; }
    .m-explore-link {
        display: block;
        margin-left: auto;
        font: 600 13.5px 'Inter', sans-serif;
        color: var(--m-blue);
        white-space: nowrap;
    }
    .m-section-head { display: flex; align-items: flex-end; gap: 20px; }

    /* ---- industry picker ---- */
    .m-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
    .m-tab { min-height: 0; padding: 10px 17px; font: 600 13px 'Inter', sans-serif; }

    .m-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; align-items: start; }
    .m-picker-side { display: flex; flex-direction: column; gap: 16px; }
    .m-picker-card {
        border: 1px solid var(--m-border);
        border-radius: 16px;
        padding: 20px;
        box-shadow: var(--m-card-shadow);
    }
    .m-roles-card {
        border: 1px solid var(--m-border);
        border-radius: 16px;
        padding: 20px;
    }
    .m-cost-card { margin-top: 0; padding: 20px; }

    /* ---- pricing ---- */
    .m-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; align-items: start; }
    .m-plan { margin-top: 0; padding: 22px; }
    .m-plan--popular { margin-top: 0; }
    .m-helper { display: flex; align-items: center; gap: 20px; padding: 20px 22px; }
    .m-helper-actions { margin: 0 0 0 auto; flex-shrink: 0; }
    .m-helper-actions .m-btn { flex: 0 0 auto; width: auto; padding: 12px 18px; }

    /* ---- certifications ---- */
    .m-certs { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
    .m-cert { padding: 18px; }
    .m-cert-icon { width: 38px; height: 38px; border-radius: 11px; }
    .m-cert-icon svg { width: 20px; height: 20px; }
    .m-cert-title { font: 700 13.5px/1.35 'Inter', sans-serif; margin-top: 13px; }
    .m-cert-scope { font: 400 11.5px/1.6 'Inter', sans-serif; margin-top: 6px; }
    .m-cert-meta { margin-top: 10px; }
    .m-cert-verify { display: flex; align-items: center; gap: 20px; padding: 18px 20px; }
    .m-cert-verify-title { font: 700 14px 'Inter', sans-serif; }
    .m-cert-verify-cta { margin: 0 0 0 auto; font: 600 12.5px 'Inter', sans-serif; white-space: nowrap; }

    /* ---- footer ---- */
    .m-footer { padding: 44px 30px 26px; }
    .m-footer-logo { height: 24px; }
    .m-footer-cols { grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; margin-top: 0; }
    .m-footer-col--wide { grid-column: auto; }
    .m-footer-brand { grid-column: 1 / -1; margin-bottom: 26px; }
    .m-footer-links { gap: 11px; margin-top: 16px; }
    .m-footer-links a { min-height: 0; }
    .m-footer-cities { flex-direction: column; gap: 11px; margin-top: 16px; font: 400 13.5px 'Inter', sans-serif; }
    .m-footer-cities a { min-height: 0; border: 0; padding: 0; }
    .m-footer-legal { gap: 14px; margin-top: 24px; font: 400 12.5px 'Inter', sans-serif; }
    .m-footer-legal a { min-height: 0; }
    .m-footer-bottom { display: flex; align-items: center; gap: 16px; }
    .m-footer-bottom-links { display: flex; gap: 12px; margin-left: auto; }
    .m-footer-bottom-links a { color: #CDE0FF; font: 500 12.5px 'Inter', sans-serif; }

    /* The sticky bottom bar is a phone-sized-screen idea only. */
    .m-sticky { display: none; }
}

/* =========================================================================
   DESKTOP — the 1240px design
   ========================================================================= */
@media (min-width: 1080px) {
    .m-section { padding: 64px 44px 74px; }
    .m-section--bleed { padding-left: 44px; padding-right: 44px; }

    .m-h2 { font: 800 30px/1.15 'Inter', sans-serif; letter-spacing: -.025em; }
    .m-sub { font: 400 15px/1.75 'Inter', sans-serif; margin: 12px 0 0; }

    /* ---- header ----
       This is the width where the row of seven menu items finally fits, so
       this is where it appears and the menu button goes away. The bar's full
       desktop sizing, and the written-out phone number, wait until 1200px —
       see the block at the end of this file. */
    .m-header { background: rgba(255, 255, 255, .86); }
    .m-header-login { display: inline-flex; }
    .m-navpill { display: flex; }
    .m-mega { display: block; }
    [data-m-drawer-toggle] { display: none; }
    .m-drawer { display: none; }
    .m-header-desktop { order: 3; margin-left: 0; }
    .m-header-actions { order: 2; margin-left: auto; }

    .m-mega-inner { padding: 26px 34px 28px; gap: 26px; }
    .m-mega-coltitle { font: 600 10.5px 'Inter', sans-serif; }
    .m-mega-links a { padding: 7px 9px; margin-left: -9px; font: 500 13.5px 'Inter', sans-serif; }
    .m-mega-promo { border-radius: 16px; padding: 20px; }
    .m-mega-promo-title { font: 700 15px/1.4 'Inter', sans-serif; margin-top: 14px; }
    .m-mega-promo-body { font: 400 12.5px/1.65 'Inter', sans-serif; }


    /* ---- hero ---- */
    .m-hero {
        padding: 72px 44px 78px;
        background:
            radial-gradient(120% 120% at 88% -10%, #E8EFFF 0%, rgba(232, 239, 255, 0) 55%),
            radial-gradient(90% 90% at 100% 100%, #EAFBF1 0%, rgba(234, 251, 241, 0) 50%);
    }

    .m-hero-grid { grid-template-columns: 1fr 1fr; gap: 52px; }
    .m-hero-badge { font: 600 12px 'Inter', sans-serif; gap: 8px; padding: 6px 13px; }
    .m-dot-green { width: 7px; height: 7px; }
    .m-h1 { font: 800 44px/1.07 'Inter', sans-serif; letter-spacing: -.03em; margin: 26px 0 0; }
    .m-hero-copy { font: 400 15px/1.75 'Inter', sans-serif; margin: 22px 0 0; max-width: 470px; }
    .m-hero-copy .m-hero-copy-long { display: inline; }
    .m-hero-actions { gap: 12px; margin-top: 34px; }
    .m-hero-actions .m-btn { font: 600 15px 'Inter', sans-serif; padding: 15px 26px; border-radius: 12px; }

    .m-hero-frame { height: 390px; border-radius: 20px; box-shadow: 0 28px 56px -18px rgba(14, 31, 77, .35); }
    .m-hero-dashes span { width: 22px; }

    /* Desktop: the quote hangs off the bottom-right corner of the photo. */
    .m-hero-quote {
        position: absolute;
        inset: auto -22px -26px auto;
        width: 330px;
        margin-top: 0;
        padding: 14px 16px;
    }

    .m-hero-quote-label { margin-bottom: 6px; }
    .m-hero-quote-text { font: 400 12.5px/1.6 'Inter', sans-serif; margin-top: 0; }

    .m-avatars img { width: 38px; height: 38px; }
    .m-avatars img + img { margin-left: -10px; }
    .m-hero-trust { gap: 16px; margin-top: 40px; }
    .m-hero-trust-text { font: 400 13px/1.65 'Inter', sans-serif; }

    /* ---- logos ---- */
    .m-logos { padding: 52px 44px 56px; }
    .m-logos-title { font: 700 15px 'Inter', sans-serif; gap: 9px; }
    .m-logos-grid { grid-template-columns: repeat(9, 1fr); gap: 14px; margin-top: 26px; }
    .m-logos-cell { height: 52px; }
    .m-logos-cell img { max-height: 44px; }

    /* ---- bands and grids ---- */
    .m-band { padding: 52px 44px; gap: 30px; }
    .m-band-h2 { font: 800 26px/1.2 'Inter', sans-serif; }
    .m-band-sub { font: 400 14px/1.7 'Inter', sans-serif; }
    .m-band-actions { gap: 12px; }
    .m-band-actions .m-btn { font: 600 15px 'Inter', sans-serif; padding: 15px 26px; border-radius: 12px; }

    .m-stack, .m-stack--three { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 38px; }
    .m-card { border-radius: 18px; padding: 24px; box-shadow: 0 6px 18px -10px rgba(14, 31, 77, .16); }
    .m-card-accent { width: 34px; }
    .m-card-title, .m-tech-title { font: 700 16px 'Inter', sans-serif; color: var(--m-navy-deep); margin: 16px 0 0; }
    .m-tech-title { margin: 0; }
    .m-card-body { font: 400 13.5px/1.7 'Inter', sans-serif; margin: 8px 0 0; }

    .m-step { padding: 26px; }
    .m-step-num { width: 34px; height: 34px; }
    .m-step h3 { font: 700 16px/1.35 'Inter', sans-serif; margin: 16px 0 0; }
    .m-step p { font: 400 13.5px/1.7 'Inter', sans-serif; margin: 8px 0 0; }

    .m-explore-link { font: 500 14px 'Inter', sans-serif; }

    /* ---- industry picker ---- */
    .m-tabs { gap: 10px; margin-top: 30px; }
    .m-tab { padding: 11px 20px; font: 600 13.5px 'Inter', sans-serif; letter-spacing: -.005em; }

    .m-picker-grid { grid-template-columns: 1.1fr .9fr .9fr; gap: 22px; margin-top: 30px; }
    .m-picker-side { display: contents; }
    .m-picker-h3 { font: 700 15px 'Inter', sans-serif; }
    .m-picker-card, .m-roles-card, .m-cost-card { border-radius: 18px; padding: 24px; }
    .m-picker-card, .m-roles-card { box-shadow: 0 6px 18px -10px rgba(14, 31, 77, .16); }
    .m-checks { gap: 11px; margin-top: 16px; }
    .m-roles-label { font: 500 12px 'Inter', sans-serif; }
    .m-roles { gap: 8px; margin-top: 16px; }
    .m-role { padding: 7px 13px; font: 500 12.5px 'Inter', sans-serif; }
    .m-cost { font: 800 30px 'Inter', sans-serif; margin-top: 14px; }
    .m-cost-note { font: 400 12.5px/1.65 'Inter', sans-serif; margin: 8px 0 0; }
    .m-cost-actions { display: flex; gap: 10px; margin-top: 20px; }

    /* ---- pricing ---- */
    .m-plans { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 38px; }
    .m-plan { border-radius: 18px; padding: 26px; box-shadow: 0 6px 18px -10px rgba(14, 31, 77, .16); }
    .m-plan--popular { box-shadow: 0 14px 34px -16px rgba(47, 107, 255, .35); }
    .m-plan--dark { box-shadow: 0 14px 34px -16px rgba(14, 31, 77, .5); }
    .m-plan-badge { left: 26px; font: 600 10.5px 'Inter', sans-serif; padding: 5px 11px; }
    .m-plan h3 { font: 700 17px 'Inter', sans-serif; }
    .m-plan--dark h3 { margin: 14px 0 0; }
    .m-plan-price { font: 800 32px 'Inter', sans-serif; margin-top: 12px; }
    .m-plan-usage { font: 700 15px 'Inter', sans-serif; margin-top: 10px; }
    .m-plan-note { font: 400 13px 'Inter', sans-serif; margin: 6px 0 0; }
    .m-plan--dark .m-plan-note { font: 400 13px/1.7 'Inter', sans-serif; margin: 8px 0 0; }
    .m-plan-features { gap: 10px; margin-top: 20px; font: 400 13.5px 'Inter', sans-serif; }
    .m-plan .m-btn { margin-top: 24px; font: 600 14px 'Inter', sans-serif; padding: 12px 21px; border-radius: 11px; }

    .m-helper { margin-top: 26px; border-radius: 18px; padding: 24px 26px; gap: 24px; }
    .m-helper h3 { font: 700 17px 'Inter', sans-serif; }
    .m-helper p { font: 400 13.5px/1.7 'Inter', sans-serif; }
    .m-helper-actions { gap: 10px; }
    .m-helper-actions .m-btn { font: 600 14px 'Inter', sans-serif; padding: 12px 21px; border-radius: 11px; }

    /* ---- certifications ---- */
    .m-certs { grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; }
    .m-cert { border-radius: 18px; padding: 22px; box-shadow: 0 6px 18px -10px rgba(14, 31, 77, .16); }
    .m-cert-icon { width: 42px; height: 42px; border-radius: 12px; }
    .m-cert-icon svg { width: 22px; height: 22px; }
    .m-cert-title { font: 700 14.5px 'Inter', sans-serif; margin-top: 16px; }
    .m-cert-scope { font: 400 12.5px/1.6 'Inter', sans-serif; margin-top: 6px; }
    .m-cert-meta { font: 500 11px 'Inter', sans-serif; margin-top: 12px; }

    .m-cert-verify {
        grid-column: auto;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 0;
        border-radius: 18px;
        padding: 22px;
    }

    .m-cert-verify-title { font: 700 14.5px 'Inter', sans-serif; }
    .m-cert-verify-body { font: 400 12.5px/1.6 'Inter', sans-serif; margin-top: 6px; }
    .m-cert-verify-cta { margin: 12px 0 0; font: 500 12.5px 'Inter', sans-serif; }

    .m-trust-cards { margin-top: 32px; }

    /* ---- footer ---- */
    .m-footer { padding: 56px 44px 34px; }
    .m-footer-logo { height: 26px; }
    .m-footer-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
    .m-footer-brand { grid-column: auto; margin-bottom: 0; }
    .m-footer-tagline { font: 400 13.5px/1.75 'Inter', sans-serif; margin: 18px 0 0; max-width: 280px; }
    .m-footer-title { font: 600 12px 'Inter', sans-serif; }
    .m-footer-links { gap: 11px; margin-top: 16px; font: 400 13.5px 'Inter', sans-serif; }
    .m-footer-cities { margin-top: 16px; }
    .m-footer-legal { margin-top: 20px; }
    .m-footer-bottom { margin-top: 38px; padding-top: 20px; font: 400 12.5px 'Inter', sans-serif; }
}

/* The phone number is only written out in full once the bar is wide enough to
   hold it next to the seven menu items. Below this width it stays as the small
   square call button, the same as on a tablet — otherwise the number squeezes
   the menu row until "Careers" is cut in half. */
@media (min-width: 1200px) {
    .m-header-bar { padding: 12px 28px 12px 34px; gap: 18px; }
    .m-logo { height: 26px; }

    .m-header-actions { display: none; }
    .m-header-desktop { margin-left: auto; gap: 10px; }
    .m-header-desktop .m-phone { display: flex; }
    .m-header-desktop .m-btn--outline,
    .m-header-desktop .m-btn--primary { font: 600 13px 'Inter', sans-serif; padding: 11px 17px; gap: 8px; }

    .m-navpill { padding: 4px; }
    .m-navpill-highlight { top: 4px; bottom: 4px; left: 4px; }
    .m-navitem { padding: 8px 13px; font: 500 13.5px 'Inter', sans-serif; gap: 5px; }
    .m-navitem svg { width: 9px; height: 9px; }
}

/* People who have asked their device to reduce motion get the layout without
   the movement. */
@media (prefers-reduced-motion: reduce) {
    .m-btn, .m-tab, .m-logos-cell, .m-navpill-highlight, .m-mega, .m-hero-frame img,
    .m-hero-dashes span, .m-drawer, .m-drawer-links, a.m-card {
        transition-duration: 1ms !important;
    }
    .m-btn--primary:hover, .m-logos.is-hot .m-logos-wash > div, .m-logos.is-hot .m-heart {
        animation: none !important;
    }
    .m-btn:hover, .m-tab:hover, .m-logos-cell:hover { transform: none; }
}