/*
 * ms-standard-page.css  v3.0.0
 * page-standard.php — standard mode + landing mode bands
 * Microsmith: #0E3441 navy · #00B4D8 cyan · #fff · body #1a2332
 *
 * v3.0.0 — Creative Direction: "Signal & Depth"
 *   Complete redesign. Away from stacked equal boxes.
 *   Design language: dark authority, surgical precision, confident whitespace.
 *   - Hero: diagonal clip-path + large faded device mark + left-anchored type
 *   - Stat bar: floating glass strip overlapping hero/content boundary
 *   - Intro: asymmetric editorial split — wide lead + side detail
 *   - Cards band: asymmetric feature panel (1 large + 2-3 stacked) not equal grid
 *   - Process section: horizontal numbered timeline rail
 *   - Brands: accent-left editorial panels, not boxes
 *   - CTA: oversized type-as-hero moment, not a box
 *   - FAQ: sidebar compositional split
 *   - Links: dark grid with icon cells
 *   - Texture: subtle noise/grain on dark sections via CSS
 */

/* ══════════════════════════════════════════════════════════ RESET + WRAPPER */

.ms-std-hero *, .ms-std-body *, .ms-std-related *,
.ms-lp-band * { box-sizing: border-box; margin: 0; padding: 0; }

body.page-template-page-standard {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #1a2332;
    background: #f0f4f6;
}

.ms-std-wrap,
.ms-lp-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}


/* ══════════════════════════════════════════════════════════ HERO */

.ms-std-hero {
    background: #0E3441;
    position: relative;
    overflow: hidden;
    padding: 0;
    /* Diagonal slash: navy left, deeper navy right */
    background: linear-gradient(108deg, #0E3441 62%, #0a2530 62%);
}

/* Fine diagonal line grid — subtle depth texture */
.ms-std-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.025) 0px,
        rgba(255,255,255,0.025) 1px,
        transparent 1px,
        transparent 28px
    );
    pointer-events: none;
    z-index: 0;
}

/* Large abstract device silhouette — far right, faded */
.ms-std-hero::after {
    content: '';
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 460px;
    height: 460px;
    background:
        radial-gradient(ellipse 60% 80% at 60% 50%,
            rgba(0,180,216,0.08) 0%,
            rgba(0,180,216,0.04) 40%,
            transparent 70%),
        radial-gradient(ellipse 40% 60% at 50% 50%,
            rgba(255,255,255,0.04) 0%,
            transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Cyan top accent line */
.ms-std-hero-top-bar {
    height: 4px;
    background: linear-gradient(90deg, #00B4D8, rgba(0,180,216,0.3) 70%, transparent);
}

.ms-std-hero-inner {
    position: relative;
    z-index: 1;
    padding: 56px 0 80px;  /* extra bottom padding — stat bar overlaps from below */
}

/* Left-anchored content — not centred */
.ms-std-hero-content {
    max-width: 680px;
}

/* Breadcrumb */
.ms-std-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.40);
    margin-bottom: 28px;
    flex-wrap: wrap;
    letter-spacing: 0.03em;
}
.ms-std-breadcrumb a {
    color: rgba(255,255,255,0.40);
    text-decoration: none;
    transition: color .15s;
}
.ms-std-breadcrumb a:hover { color: #00B4D8; }

/* Service category badge — not a pill, a sharp label */
.ms-std-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.ms-std-hero-badge-dot {
    width: 6px;
    height: 6px;
    background: #00B4D8;
    flex-shrink: 0;
    animation: ms-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes ms-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,180,216,0.6); }
    50%       { box-shadow: 0 0 0 6px rgba(0,180,216,0); }
}
.ms-std-hero-badge-text {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #00B4D8;
}

/* H1 — large, left-aligned, high contrast */
.ms-std-h1 {
    font-size: clamp(36px, 5vw, 64px) !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 8px !important;
    font-family: 'Oswald', 'Arial Black', sans-serif !important;
}

/* Accent underline on H1 */
.ms-std-h1-underline {
    display: block;
    width: 64px;
    height: 4px;
    background: #00B4D8;
    margin: 16px 0 24px;
    border-radius: 2px;
}

.ms-std-lead {
    font-size: 18px;
    line-height: 1.75;
    color: rgba(255,255,255,0.75);
    margin: 0 0 36px;
    max-width: 560px;
}

/* Hero buttons */
.ms-std-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.ms-std-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #00B4D8;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    transition: background .18s, transform .12s;
    position: relative;
    overflow: hidden;
}
.ms-std-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
    pointer-events: none;
}
.ms-std-btn-primary:hover {
    background: #009AB8;
    transform: translateY(-1px);
}

.ms-std-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: rgba(255,255,255,0.80) !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 24px;
    border: 1.5px solid rgba(255,255,255,0.22);
    border-radius: 3px;
    transition: border-color .18s, color .18s;
}
.ms-std-btn-secondary:hover {
    border-color: rgba(255,255,255,0.50);
    color: #fff !important;
}


/* ══════════════════════════════════════════════════════════ FLOATING STAT BAR */
/*
 * Overlaps the hero/content boundary — creates genuine Z-axis depth.
 * Sticky to bottom of hero, overlaps by 32px.
 */
.ms-std-trust-float {
    position: relative;
    z-index: 10;
    margin-top: -32px;
    margin-bottom: 0;
    padding: 0 28px;
}

.ms-std-trust-inner {
    max-width: 1180px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow:
        0 4px 24px rgba(14,52,65,0.12),
        0 1px 4px rgba(14,52,65,0.06);
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.ms-std-trust-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-right: 1px solid #e2e8f0;
    transition: background .15s;
}
.ms-std-trust-item:last-child { border-right: none; }
.ms-std-trust-item:hover { background: #f7fbfc; }

.ms-std-trust-icon {
    width: 38px;
    height: 38px;
    background: rgba(0,180,216,0.10);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #00B4D8;
}

.ms-std-trust-text {
    font-size: 13.5px;
    font-weight: 600;
    color: #0E3441;
    line-height: 1.3;
}


/* ══════════════════════════════════════════════════════════ STANDARD MODE */

.ms-std-body {
    padding: 56px 0 72px;
}

.ms-std-content-card {
    background: #fff;
    border-radius: 8px;
    padding: 48px 52px;
    box-shadow: 0 2px 12px rgba(14,52,65,0.07);
}
.ms-std-content-card h2 { color: #0E3441 !important; font-size: 26px !important; font-weight: 800 !important; margin: 32px 0 14px !important; }
.ms-std-content-card h3 { color: #0E3441 !important; font-size: 20px !important; font-weight: 700 !important; margin: 24px 0 10px !important; }
.ms-std-content-card p  { color: #1a2332; font-size: 17px; line-height: 1.75; margin: 0 0 18px; }
.ms-std-content-card ul,
.ms-std-content-card ol { padding-left: 24px; margin: 0 0 18px; }
.ms-std-content-card li { color: #1a2332; font-size: 17px; line-height: 1.7; margin-bottom: 6px; }
.ms-std-content-card a  { color: #00B4D8; }


/* ══════════════════════════════════════════════════════════ LANDING: INTRO */
/*
 * Not a centred box. Asymmetric editorial split:
 * large left column (main statement) + right accent column (quick facts/promise)
 */

.ms-lp-band--intro {
    background: #ffffff;
    padding: 72px 0 64px;
    margin-top: 32px; /* offset from overlapping trust bar */
}

.ms-lp-intro-inner {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 64px;
    align-items: start;
}

/* Left: all content from post that's not in an <aside> or last <ul> */
.ms-lp-intro-main { }
.ms-lp-intro-main h2 {
    font-size: clamp(26px, 3vw, 38px) !important;
    font-weight: 800 !important;
    color: #0E3441 !important;
    line-height: 1.15 !important;
    margin: 0 0 20px !important;
    letter-spacing: -0.02em !important;
}
.ms-lp-intro-main p {
    font-size: 17px;
    line-height: 1.8;
    color: #3a4a56;
    margin: 0 0 18px;
}
.ms-lp-intro-main ul {
    padding-left: 0;
    list-style: none;
    margin: 0 0 18px;
}
.ms-lp-intro-main ul li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: 16px;
    color: #1a2332;
    border-bottom: 1px solid #f0f4f6;
}
.ms-lp-intro-main ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: #00B4D8;
}

/* Right: accent column — a floating card */
.ms-lp-intro-aside {
    background: #0E3441;
    border-radius: 8px;
    padding: 32px 28px;
    color: #fff;
    position: sticky;
    top: 24px;
}
.ms-lp-intro-aside h3 {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #00B4D8 !important;
    margin: 0 0 20px !important;
}
.ms-lp-intro-aside ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ms-lp-intro-aside ul li {
    font-size: 14px;
    color: rgba(255,255,255,0.80);
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 10px;
}
.ms-lp-intro-aside ul li:last-child { border-bottom: none; }
.ms-lp-intro-aside ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #00B4D8;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Fallback: if content doesn't have the 2-col structure, render as single wide col */
.ms-lp-intro-single .ms-lp-intro-inner {
    grid-template-columns: 1fr;
    max-width: 760px;
}


/* ══════════════════════════════════════════════════════════ LANDING: CARDS */
/*
 * Dark band. Kill the equal 3-column grid.
 * Layout: 1 large feature panel LEFT + 2-3 smaller items stacked RIGHT.
 * Every other cards band uses light variant.
 */

.ms-lp-band--cards {
    background: #0E3441;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Noise texture on dark bands */
.ms-lp-band--cards::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    pointer-events: none;
    opacity: 0.5;
    z-index: 0;
}
.ms-lp-band--cards > * { position: relative; z-index: 1; }

/* Section header */
.ms-lp-section-hdr {
    text-align: center;
    margin-bottom: 48px;
}
.ms-lp-band--cards .ms-lp-section-hdr h2 {
    font-size: clamp(24px, 2.8vw, 36px) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}
.ms-lp-band--cards .ms-lp-section-hdr h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: #00B4D8;
    margin: 14px auto 0;
    border-radius: 2px;
}

/* Asymmetric grid: first card = large feature, rest = stack */
.ms-lp-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 2px;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    overflow: hidden;
}

/* First card is large — spans 2 rows */
.ms-lp-card:first-child {
    grid-row: span 2;
    background: rgba(255,255,255,0.07);
    padding: 44px 40px;
    border-right: 2px solid rgba(255,255,255,0.06);
}
.ms-lp-card {
    background: rgba(255,255,255,0.04);
    padding: 32px 36px;
    transition: background .18s;
}
.ms-lp-card:hover {
    background: rgba(0,180,216,0.07);
}

/* Cyan number label instead of generic icon */
.ms-lp-card-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #00B4D8;
    margin-bottom: 16px;
}

.ms-lp-card-icon {
    display: none; /* replaced by num label in dark bands */
}

.ms-lp-card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 12px !important;
    line-height: 1.25 !important;
}
.ms-lp-card:first-child .ms-lp-card-title {
    font-size: 26px !important;
}

.ms-lp-card-body {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    line-height: 1.75;
}
.ms-lp-card:first-child .ms-lp-card-body {
    font-size: 16px;
    color: rgba(255,255,255,0.72);
}
.ms-lp-card-body p { margin: 0 0 10px; }
.ms-lp-card-body ul { padding-left: 18px; }
.ms-lp-card-body li { margin-bottom: 5px; }

/* LIGHT variant — white background, different aesthetic */
.ms-lp-band--cards-light {
    background: #f7f9fb;
    padding: 80px 0;
}
.ms-lp-band--cards-light::before { display: none; }
.ms-lp-band--cards-light .ms-lp-cards-grid {
    background: transparent;
    gap: 16px;
    border-radius: 0;
}
.ms-lp-band--cards-light .ms-lp-section-hdr h2 {
    color: #0E3441 !important;
}
.ms-lp-band--cards-light .ms-lp-section-hdr h2::after {
    margin: 14px auto 0;
}
.ms-lp-band--cards-light .ms-lp-card:first-child {
    background: #0E3441;
    border-right: none;
    border-radius: 8px;
}
.ms-lp-band--cards-light .ms-lp-card:first-child .ms-lp-card-title {
    color: #fff !important;
}
.ms-lp-band--cards-light .ms-lp-card:first-child .ms-lp-card-body {
    color: rgba(255,255,255,0.72);
}
.ms-lp-band--cards-light .ms-lp-card:first-child .ms-lp-card-num {
    color: #00B4D8;
}
.ms-lp-band--cards-light .ms-lp-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
}
.ms-lp-band--cards-light .ms-lp-card:hover {
    border-color: #00B4D8;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,180,216,0.10);
}
.ms-lp-band--cards-light .ms-lp-card-title {
    color: #0E3441 !important;
}
.ms-lp-band--cards-light .ms-lp-card-body {
    color: #4a5568;
}
.ms-lp-band--cards-light .ms-lp-card-num {
    color: #00B4D8;
}


/* ══════════════════════════════════════════════════════════ LANDING: BRANDS */
/*
 * Not a row of boxes.
 * Left: large editorial section label + intro text.
 * Right: stack of brand panels with strong left accent bar.
 */

.ms-lp-band--brands {
    background: #ffffff;
    padding: 80px 0;
    border-top: 1px solid #e8edf0;
    border-bottom: 1px solid #e8edf0;
}

.ms-lp-brands-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
    align-items: start;
}

.ms-lp-brands-sidebar {}
.ms-lp-brands-sidebar-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #00B4D8;
    margin-bottom: 12px;
}
.ms-lp-brands-sidebar h2 {
    font-size: clamp(22px, 2.5vw, 30px) !important;
    font-weight: 800 !important;
    color: #0E3441 !important;
    line-height: 1.2 !important;
    margin: 0 0 20px !important;
    letter-spacing: -0.02em !important;
}
.ms-lp-brands-sidebar p {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.7;
}

.ms-lp-brands-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ms-lp-brand-card {
    padding: 24px 28px;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #f0f4f6;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 24px;
    align-items: center;
    transition: border-left-color .18s, background .18s;
}
.ms-lp-brand-card:last-child { border-bottom: none; }
.ms-lp-brand-card:hover {
    border-left-color: #00B4D8;
    background: #f9fbfc;
}

.ms-lp-brand-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0E3441 !important;
    margin: 0 0 4px !important;
}
.ms-lp-brand-body {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    grid-column: 1;
}
.ms-lp-brand-body p { margin: 0; }

.ms-lp-brand-link {
    grid-row: 1 / 3;
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #0E3441;
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 4px;
    transition: border-color .15s, color .15s;
    align-self: center;
}
.ms-lp-brand-link:hover {
    border-color: #00B4D8;
    color: #00B4D8;
}


/* ══════════════════════════════════════════════════════════ LANDING: CTA */
/*
 * The CTA is not a box. It's a moment.
 * Full-bleed dark section, oversized headline IS the CTA.
 * The button is secondary to the type energy.
 */

.ms-lp-band--cta {
    background: #0E3441;
    background: linear-gradient(135deg, #0a2530 0%, #0E3441 40%, #0d3040 100%);
    padding: 96px 0 88px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Diagonal stripe texture */
.ms-lp-band--cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(0,180,216,0.03) 0px,
        rgba(0,180,216,0.03) 1px,
        transparent 1px,
        transparent 40px
    );
    pointer-events: none;
}

/* Large background "ghost text" for depth */
.ms-lp-band--cta::after {
    content: 'REPAIR';
    position: absolute;
    bottom: -20px;
    right: -10px;
    font-size: 200px;
    font-weight: 900;
    color: rgba(255,255,255,0.025);
    letter-spacing: -0.05em;
    pointer-events: none;
    line-height: 1;
    font-family: 'Oswald', 'Arial Black', sans-serif;
}

.ms-lp-cta-inner {
    position: relative;
    z-index: 1;
}

.ms-lp-cta-heading {
    font-size: clamp(32px, 5vw, 64px) !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 8px !important;
    font-family: 'Oswald', 'Arial Black', sans-serif !important;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Cyan slash underline */
.ms-lp-cta-heading::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #00B4D8;
    margin: 20px auto 0;
    border-radius: 2px;
}

.ms-lp-cta-body {
    font-size: 17px;
    color: rgba(255,255,255,0.65);
    max-width: 500px;
    margin: 24px auto 40px !important;
    line-height: 1.7;
}

.ms-lp-cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.ms-lp-cta-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #00B4D8;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 36px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    transition: background .18s, transform .12s;
    box-shadow: 0 4px 24px rgba(0,180,216,0.35);
}
.ms-lp-cta-btn-primary:hover {
    background: #009AB8;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,180,216,0.45);
}

.ms-lp-cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: rgba(255,255,255,0.75) !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 600;
    padding: 15px 28px;
    border: 1.5px solid rgba(255,255,255,0.22);
    border-radius: 3px;
    transition: border-color .18s, color .18s;
}
.ms-lp-cta-btn-secondary:hover {
    border-color: rgba(255,255,255,0.55);
    color: #fff !important;
}


/* ══════════════════════════════════════════════════════════ LANDING: FAQ */
/*
 * Compositional sidebar split — not a grid of equal boxes.
 * Left: large faded "?" mark as design element + section context.
 * Right: Q&A list with clear visual hierarchy.
 */

.ms-lp-band--faq {
    background: #0E3441;
    padding: 88px 0;
    position: relative;
    overflow: hidden;
}

/* Large decorative element */
.ms-lp-band--faq::before {
    content: '?';
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 400px;
    font-weight: 900;
    color: rgba(255,255,255,0.02);
    line-height: 1;
    font-family: 'Oswald', 'Arial Black', sans-serif;
    pointer-events: none;
}

.ms-lp-faq-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 72px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.ms-lp-faq-sidebar {}
.ms-lp-faq-sidebar-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #00B4D8;
    margin-bottom: 12px;
}
.ms-lp-faq-title {
    font-size: clamp(22px, 2.5vw, 30px) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin: 0 0 20px !important;
}
.ms-lp-faq-sidebar p {
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    line-height: 1.7;
}

.ms-lp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ms-lp-faq-item {
    padding: 24px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ms-lp-faq-item:last-child { border-bottom: none; }

.ms-lp-faq-q {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
}
.ms-lp-faq-q-num {
    font-size: 11px;
    font-weight: 700;
    color: #00B4D8;
    letter-spacing: 0.08em;
    flex-shrink: 0;
    padding-top: 3px;
    min-width: 24px;
}
.ms-lp-faq-q-text {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.4;
}
.ms-lp-faq-a {
    font-size: 15px;
    color: rgba(255,255,255,0.58);
    line-height: 1.75;
    padding-left: 38px;
}
.ms-lp-faq-a p { margin: 0 0 8px; }
.ms-lp-faq-a p:last-child { margin-bottom: 0; }


/* ══════════════════════════════════════════════════════════ LANDING: LINKS */
/*
 * Dark navy grid. Not cards — more like a navigation panel.
 * Each service = cell with icon + label + arrow.
 */

.ms-lp-band--links {
    background: #07232e;
    padding: 72px 0;
}

.ms-lp-links-hdr {
    text-align: center;
    margin-bottom: 40px;
}
.ms-lp-links-hdr h2 {
    font-size: clamp(20px, 2.5vw, 28px) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.ms-lp-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
}

.ms-lp-link-cell {
    background: rgba(255,255,255,0.03);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    transition: background .18s;
    color: inherit;
}
.ms-lp-link-cell:hover {
    background: rgba(0,180,216,0.08);
    text-decoration: none;
}

.ms-lp-link-icon {
    width: 44px;
    height: 44px;
    background: rgba(0,180,216,0.10);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00B4D8;
}

.ms-lp-link-label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    flex: 1;
}
.ms-lp-link-arrow {
    font-size: 12px;
    color: rgba(255,255,255,0.25);
    transition: color .15s;
}
.ms-lp-link-cell:hover .ms-lp-link-arrow {
    color: #00B4D8;
}


/* ══════════════════════════════════════════════════════════ LANDING: PLAIN */

.ms-lp-band--plain {
    background: #ffffff;
    padding: 64px 0;
}
.ms-lp-plain-inner {
    max-width: 760px;
}
.ms-lp-plain-inner h2 { color: #0E3441 !important; font-size: 26px !important; font-weight: 800 !important; margin: 0 0 16px !important; }
.ms-lp-plain-inner h3 { color: #0E3441 !important; font-size: 20px !important; font-weight: 700 !important; margin: 24px 0 10px !important; }
.ms-lp-plain-inner p  { color: #3a4a56; font-size: 17px; line-height: 1.8; margin: 0 0 18px; }


/* ══════════════════════════════════════════════════════════ RELATED FOOTER */

.ms-std-related {
    background: #07232e;
    padding: 64px 0 56px;
}
.ms-std-related-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 32px !important;
}
.ms-std-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    overflow: hidden;
}
.ms-std-related-item {
    background: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px;
    text-decoration: none;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.ms-std-related-item:hover {
    background: rgba(0,180,216,0.08);
    color: #fff;
}
.ms-std-related-icon {
    width: 36px;
    height: 36px;
    background: rgba(0,180,216,0.10);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00B4D8;
    flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════ RESPONSIVE */

@media (max-width: 900px) {
    .ms-std-trust-inner {
        flex-wrap: wrap;
    }
    .ms-std-trust-item {
        flex: 1 1 50%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    .ms-std-trust-item:nth-child(odd) {
        border-right: 1px solid #e2e8f0;
    }
    .ms-lp-intro-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ms-lp-intro-aside {
        position: static;
    }
    .ms-lp-brands-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .ms-lp-faq-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ms-lp-band--faq::before {
        display: none;
    }
    .ms-lp-cards-grid {
        grid-template-columns: 1fr;
    }
    .ms-lp-card:first-child {
        grid-row: auto;
    }
    .ms-lp-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ms-std-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ms-std-hero-inner { padding: 44px 0 64px; }
    .ms-std-trust-item { flex: 1 1 100%; border-right: none; }
    .ms-lp-brand-card {
        grid-template-columns: 1fr;
    }
    .ms-lp-brand-link {
        grid-row: auto;
        grid-column: auto;
        align-self: auto;
        width: fit-content;
    }
    .ms-lp-links-grid { grid-template-columns: 1fr 1fr; }
    .ms-std-related-grid { grid-template-columns: 1fr 1fr; }
    .ms-lp-band--cta::after { display: none; }
}


/* ══════════════════════════════════════════════════════════ ICON COLOURING */
/*
 * Icons use stroke="currentColor" — control colour via CSS `color` on container.
 * On dark backgrounds: white icons. On light: navy. Icon containers tint cyan.
 */

/* Dark bands: white icons */
.ms-lp-band--cards .ms-lp-card-icon-wrap,
.ms-lp-band--faq .ms-lp-faq-sidebar-icons span,
.ms-lp-band--cta .ms-lp-cta-deco-icon,
.ms-lp-band--links .ms-lp-link-icon,
.ms-std-hero-device {
    color: rgba(255,255,255,0.90);
}

/* Light band icons: navy */
.ms-lp-band--cards-light .ms-lp-card-icon-wrap {
    color: #0E3441;
}
.ms-lp-band--brands .ms-lp-brand-card-icon {
    color: #0E3441;
}

/* Trust bar: navy icons */
.ms-std-trust-icon {
    color: #00B4D8;
}

/* ══ Card icon container ══ */
.ms-lp-card-icon-wrap {
    width: 56px;
    height: 56px;
    background: rgba(0,180,216,0.10);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
    transition: background .2s, transform .2s;
}
.ms-lp-card:hover .ms-lp-card-icon-wrap {
    background: rgba(0,180,216,0.20);
    transform: scale(1.08);
}
.ms-lp-band--cards-light .ms-lp-card-icon-wrap {
    background: rgba(0,180,216,0.08);
}
.ms-lp-band--cards-light .ms-lp-card:hover .ms-lp-card-icon-wrap {
    background: rgba(0,180,216,0.18);
}

/* ══ Brand card icon ══ */
.ms-lp-brand-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0 16px;
    align-items: center;
    padding: 20px 24px;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #f0f4f6;
    transition: border-left-color .18s, background .18s;
}
.ms-lp-brand-card:last-child { border-bottom: none; }
.ms-lp-brand-card:hover {
    border-left-color: #00B4D8;
    background: #f9fbfc;
}
.ms-lp-brand-card-icon {
    width: 44px;
    height: 44px;
    background: rgba(14,52,65,0.06);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, transform .2s;
}
.ms-lp-brand-card:hover .ms-lp-brand-card-icon {
    background: rgba(0,180,216,0.10);
    transform: scale(1.06);
}
.ms-lp-brand-card-content {
    min-width: 0;
}
.ms-lp-brand-title { margin-bottom: 4px !important; }
.ms-lp-brand-body { font-size: 14px; }
.ms-lp-brand-body p { margin: 0; }

/* ══ CTA deco icons ══ */
.ms-lp-cta-icon-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 32px;
}
.ms-lp-cta-deco-icon {
    width: 52px;
    height: 52px;
    background: rgba(0,180,216,0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,180,216,0.25);
    transition: background .2s, transform .2s;
}
.ms-lp-cta-deco-icon:hover {
    background: rgba(0,180,216,0.22);
    transform: translateY(-2px);
}

/* ══ FAQ sidebar icons ══ */
.ms-lp-faq-sidebar-icons {
    display: flex;
    gap: 10px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.ms-lp-faq-sidebar-icons span {
    width: 40px;
    height: 40px;
    background: rgba(0,180,216,0.10);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.ms-lp-faq-sidebar-icons span:hover {
    background: rgba(0,180,216,0.22);
}

/* ══ Links grid icon ══ */
.ms-lp-link-icon {
    width: 48px;
    height: 48px;
    background: rgba(0,180,216,0.10);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, transform .2s;
}
.ms-lp-link-cell:hover .ms-lp-link-icon {
    background: rgba(0,180,216,0.22);
    transform: scale(1.08);
}

/* ══ Hero device icon ══ */
.ms-std-hero-device {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.08;
    pointer-events: none;
    animation: ms-float 6s ease-in-out infinite;
    z-index: 0;
}
.ms-std-hero-device svg {
    width: 180px;
    height: 180px;
}

@keyframes ms-float {
    0%, 100% { transform: translateY(-50%) translateY(0px);   }
    50%       { transform: translateY(-50%) translateY(-8px);  }
}

/* Ensure hero content sits above device icon */
.ms-std-hero-content { position: relative; z-index: 1; }


/* ══════════════════════════════════════════════════════════ SCROLL REVEAL */

.ms-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.ms-reveal.ms-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero items don't need reveal — they're above fold */
.ms-std-hero .ms-reveal,
.ms-std-trust-float .ms-reveal {
    opacity: 1;
    transform: none;
}


/* ══════════════════════════════════════════════════════════ CARD HOVER LIFT */

.ms-lp-card {
    transition: background .18s, transform .18s, box-shadow .18s;
}
.ms-lp-card:hover {
    transform: translateY(-3px);
}
.ms-lp-band--cards-light .ms-lp-card:hover {
    box-shadow: 0 8px 32px rgba(14,52,65,0.10);
    transform: translateY(-3px);
}

/* Link cell hover lift */
.ms-lp-link-cell {
    transition: background .18s, transform .18s;
}
.ms-lp-link-cell:hover {
    transform: translateY(-2px);
}

/* Trust item hover */
.ms-std-trust-item {
    transition: background .15s;
    cursor: default;
}


/* ══════════════════════════════════════════════════════════ BUTTON PULSE */

/* Primary CTA button — subtle shimmer on hover */
.ms-std-btn-primary,
.ms-lp-cta-btn-primary {
    position: relative;
    overflow: hidden;
}
.ms-std-btn-primary::before,
.ms-lp-cta-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transition: left 0.4s ease;
    pointer-events: none;
}
.ms-std-btn-primary:hover::before,
.ms-lp-cta-btn-primary:hover::before {
    left: 150%;
}


/* ══════════════════════════════════════════════════════════ RESPONSIVE ICON */

@media (max-width: 800px) {
    .ms-std-hero-device {
        width: 120px;
        height: 120px;
        right: 16px;
        opacity: 0.06;
    }
    .ms-std-hero-device svg { width: 110px; height: 110px; }
}
@media (max-width: 600px) {
    .ms-std-hero-device { display: none; }
}