/*
 * Meraki 365 Lab — main design stylesheet (header, homepage sections, footer).
 * Converted from the static index.html. All rules are scoped to .m365-page so they
 * never leak into Kadence/Elementor content elsewhere. Put your own overrides in the
 * child theme style.css (loaded after this file).
 */
:root {--deep-navy:   #082565;
    --royal-blue:  #0C3691;
    --cobalt-blue: #1152A8;
    --sky-blue:    #2C8CD8;
    --violet:      #6E58CC;
    --lavender:    #AA9BE6;
    --soft-orchid: #E0A6E9;
    --soft-pearl:  #E7D4E7;
    --teal:    var(--sky-blue);
    --teal-d:  var(--cobalt-blue);
    --orange:  var(--soft-orchid);
    --gold:    var(--lavender);
    --dark:    var(--deep-navy);
    --dark2:   var(--royal-blue);
    --cream:   #FBF8FD;
    --muted:   var(--soft-pearl);
    --text:    #101D43;
    --subtext: #5d6682;
    --white:   #ffffff;
    --radius:  14px;
    --shadow:  0 4px 24px rgba(8,37,101,0.12);}
.m365-page *,
.m365-page *::before,
.m365-page *::after {box-sizing: border-box; margin: 0; padding: 0;}
html {scroll-behavior: smooth; font-size: 16px;}
body.m365-site {font-family: 'Inter Variable', 'Inter', 'Noto Sans', sans-serif; background: var(--cream); color: var(--text); overflow-x: hidden; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.m365-page img {max-width: 100%; display: block;}
.m365-page a {color: inherit; text-decoration: none;}
.m365-page h1,
.m365-page h2,
.m365-page h3,
.m365-page h4 {font-family: 'Inter Variable', 'Inter', 'Noto Sans', sans-serif; line-height: 1.1;}
.m365-page h1 {font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800;}
.m365-page h2 {font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;}
.m365-page h3 {font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 700;}
.m365-page p {line-height: 1.7; color: var(--subtext);}
.m365-page nav {position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 5%;
    background: rgba(251,248,253,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(17,82,168,0.14);
    transition: box-shadow 0.3s;}
.m365-page nav.scrolled {box-shadow: var(--shadow);}
.m365-page .nav-logo {font-family: 'Inter Variable', 'Inter', 'Noto Sans', sans-serif;
    font-weight: 800; font-size: 1.25rem;
    display: flex; align-items: center; gap: 0.5rem;
    color: var(--dark);}
.m365-page .brand-logo {display: inline-flex; align-items: center; gap: 0.65rem;}
.m365-page .brand-logo img {width: 62px; height: 48px; object-fit: contain;}
.m365-page .nav-logo span {color: var(--teal);}
.m365-page .nav-links {display: flex; gap: 2rem; align-items: center;}
.m365-page .nav-links a {font-size: 0.9rem; font-weight: 500; color: var(--text);
    transition: color 0.2s;}
.m365-page .nav-links a:hover {color: var(--teal);}
.m365-page .nav-cta {background: var(--violet); color: var(--white) !important;
    padding: 0.55rem 1.3rem; border-radius: 50px;
    font-weight: 600; transition: background 0.2s, transform 0.2s !important;}
.m365-page .nav-cta:hover {background: var(--royal-blue) !important; transform: translateY(-1px);}
.m365-page .hamburger {display: none; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(17,82,168,0.12);
    background: rgba(255,255,255,0.72);
    align-items: center;
    position: relative;
    z-index: 130;}
.m365-page .hamburger span {width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: transform 0.3s, opacity 0.2s;}
.m365-page .hamburger.open span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
.m365-page .hamburger.open span:nth-child(2) {opacity: 0;}
.m365-page .hamburger.open span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}
.m365-page .menu-backdrop {position: fixed;
    inset: 0;
    background: rgba(2,13,43,0.52);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 110;}
.m365-page .menu-backdrop.open {opacity: 1;
    pointer-events: auto;}
.m365-page .mobile-menu {position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.2rem;
    background:
      radial-gradient(circle at 100% 0%, rgba(224,166,233,0.18), transparent 30%),
      var(--cream);
    border-left: 1px solid rgba(17,82,168,0.12);
    box-shadow: -24px 0 60px rgba(8,37,101,0.22);
    transform: translateX(105%);
    transition: transform 0.32s ease;
    overflow-y: auto;}
.m365-page .mobile-menu.open {transform: translateX(0);}
.m365-page .mobile-menu-head {display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid rgba(17,82,168,0.1);}
.m365-page .mobile-menu-brand {display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 900;
    color: var(--dark);}
.m365-page .mobile-menu-brand img {width: 54px;
    height: 42px;
    object-fit: contain;}
.m365-page .mobile-menu-close {border: none;
    background: rgba(17,82,168,0.08);
    color: var(--dark);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem;
    display: grid;
    place-items: center;}
.m365-page .mobile-menu a {font-weight: 800;
    color: var(--text);
    padding: 0.95rem 0.9rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;}
.m365-page .mobile-menu a:hover {background: rgba(44,140,216,0.08); color: var(--royal-blue);}
.m365-page .mobile-menu a::after {content: '›';
    color: var(--violet);
    font-size: 1.25rem;}
.m365-page .mobile-menu a.mobile-menu-cta {margin-top: 0.8rem;
    justify-content: center;
    color: var(--white);
    background: linear-gradient(135deg, var(--violet), var(--soft-orchid));
    box-shadow: 0 16px 36px rgba(110,88,204,0.24);}
.m365-page .mobile-menu a.mobile-menu-cta::after {display: none;}
body.menu-open {overflow: hidden;}
.m365-page .hero {min-height: 100vh;
    background:
      linear-gradient(120deg, rgba(231,212,231,0.12) 0 1px, transparent 1px 110px),
      linear-gradient(150deg, rgba(44,140,216,0.14) 0 1px, transparent 1px 130px),
      linear-gradient(135deg, var(--deep-navy) 0%, var(--royal-blue) 58%, var(--violet) 100%);
    display: flex; align-items: center;
    position: relative; overflow: hidden;
    padding: 120px 5% 72px;}
.m365-page .hero::after {content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
    background: linear-gradient(0deg, rgba(251,248,253,0.12), transparent);
    pointer-events: none;}
.m365-page .hero-inner {width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    position: relative;
    z-index: 2;}
.m365-page .hero-ripple {position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
    width: 650px; height: 650px; pointer-events: none;
    opacity: 0.55;}
.m365-page .ripple-ring {position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1.5px solid;
    transform: translate(-50%,-50%) scale(0);
    animation: rippleOut 5s ease-out infinite;}
.m365-page .ripple-ring:nth-child(1) {width:160px; height:160px; border-color: var(--sky-blue);   animation-delay: 0s;}
.m365-page .ripple-ring:nth-child(2) {width:280px; height:280px; border-color: var(--lavender);   animation-delay: 0.8s;}
.m365-page .ripple-ring:nth-child(3) {width:400px; height:400px; border-color: var(--soft-orchid); animation-delay: 1.6s;}
.m365-page .ripple-ring:nth-child(4) {width:530px; height:530px; border-color: var(--cobalt-blue); animation-delay: 2.4s; opacity:0.4;}
.m365-page .ripple-ring:nth-child(5) {width:650px; height:650px; border-color: var(--soft-pearl);  animation-delay: 3.2s; opacity:0.2;}
.m365-page .ripple-dot {position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width: 60px; height: 60px; border-radius: 50%;
    background: radial-gradient(circle, var(--sky-blue), var(--violet));
    box-shadow: 0 0 40px rgba(44,140,216,0.5);}
@keyframes rippleOut{
    0%  { transform: translate(-50%,-50%) scale(0); opacity: 0.9; }
    80% { opacity: 0.2; }
    100%{ transform: translate(-50%,-50%) scale(1); opacity: 0; }
  }
.m365-page .hero-content {position: relative; z-index: 2; max-width: 680px;}
.m365-page .hero-eyebrow {display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(231,212,231,0.16); border: 1px solid rgba(170,155,230,0.42);
    color: var(--soft-pearl); font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.4rem 1rem; border-radius: 50px; margin-bottom: 1.5rem;}
.m365-page .hero-eyebrow::before {content: '●'; font-size: 0.5rem; animation: pulse 1.5s ease infinite;}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:0.3} }
.m365-page .hero h1 {font-size: clamp(2.6rem, 5vw, 4rem);
    color: var(--white);
    margin-bottom: 0.3rem;
    max-width: 720px;
    text-wrap: balance;}
.m365-page .hero h1 em {color: var(--soft-pearl);
    font-style: normal;
    text-shadow: 0 0 24px rgba(224,166,233,0.28);}
.m365-page .hero-sub {font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: rgba(255,255,255,0.78);
    margin: 1.2rem 0 2.2rem;
    max-width: 600px;
    line-height: 1.6;}
.m365-page .hero-actions {display: flex; gap: 1rem; flex-wrap: wrap;}
.m365-page .btn-primary {background: linear-gradient(135deg, var(--violet), var(--soft-orchid)); color: var(--white);
    padding: 0.9rem 2rem; border-radius: 50px;
    font-family: 'Inter Variable', 'Inter', 'Noto Sans', sans-serif; font-weight: 700; font-size: 1rem;
    border: none; cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(110,88,204,0.35);}
.m365-page .btn-primary:hover {transform: translateY(-2px); box-shadow: 0 8px 28px rgba(110,88,204,0.45);}
.m365-page .btn-secondary {background: transparent; color: var(--white);
    padding: 0.9rem 2rem; border-radius: 50px;
    font-family: 'Inter Variable', 'Inter', 'Noto Sans', sans-serif; font-weight: 600; font-size: 1rem;
    border: 1.5px solid rgba(255,255,255,0.3); cursor: pointer; transition: all 0.2s;}
.m365-page .btn-secondary:hover {border-color: var(--teal); color: var(--teal);}
.m365-page .hero-stats {display: flex; gap: 2.5rem; margin-top: 3.5rem;
    padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1);
    flex-wrap: wrap;}
.m365-page .stat-val {font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-size:1.8rem; font-weight:800; color:var(--white);}
.m365-page .stat-val span {color: var(--gold);}
.m365-page .stat-label {font-size:0.78rem; color:rgba(255,255,255,0.5); margin-top:0.15rem; text-transform:uppercase; letter-spacing:0.06em;}
.m365-page .hero-visual {position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    cursor: pointer;
    border-radius: 24px;}
.m365-page .hero-visual:focus-visible {outline: 3px solid var(--soft-orchid);
    outline-offset: 6px;}
.m365-page .hero-visual:hover .hero-logo-stage {filter: drop-shadow(0 34px 40px rgba(2,13,43,0.46));}
.m365-page .hero-visual::before {content: '';
    position: absolute;
    inset: 9% 2% 4% 9%;
    border: 1px solid rgba(231,212,231,0.28);
    border-radius: 42% 58% 48% 52%;
    transform: rotate(-8deg);}
.m365-page .hero-logo-stage {position: relative;
    width: min(100%, 560px);
    z-index: 1;
    animation: heroFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 28px 34px rgba(2,13,43,0.38));
    transition: filter 0.25s;}
.m365-page .hero-logo-stage img {width: 100%;}
.m365-page .hero-chip {position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 16px;
    background: rgba(255,255,255,0.12);
    color: var(--white);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 44px rgba(2,13,43,0.18);}
.m365-page .hero-chip strong {display: block;
    font-size: 0.86rem;
    line-height: 1.2;}
.m365-page .hero-chip span {display: block;
    color: rgba(255,255,255,0.68);
    font-size: 0.72rem;
    margin-top: 0.12rem;}
.m365-page .hero-chip-icon {width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--sky-blue), var(--soft-orchid));
    font-size: 0.95rem;
    font-weight: 800;
    flex-shrink: 0;}
.m365-page .hero-chip-ai {left: 0; top: 15%;}
.m365-page .hero-chip-reach {right: 0; bottom: 18%;}
.m365-page .hero-chip-access {left: 8%; bottom: 5%;}
@keyframes heroFloat{
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50% { transform: translateY(-14px) rotate(1deg); }
  }
.m365-page section {padding: 90px 5%;}
.m365-page .section-label {display: inline-block;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--teal); margin-bottom: 0.75rem;}
.m365-page .section-intro {max-width: 620px; margin-bottom: 3.5rem;}
.m365-page .section-intro h2 {margin-bottom: 0.8rem; color: var(--dark);}
.m365-page .section-intro p {font-size: 1.05rem;}
.m365-page .pain-band {background:
      radial-gradient(circle at 18% 0%, rgba(224,166,233,0.28), transparent 30%),
      radial-gradient(circle at 82% 100%, rgba(44,140,216,0.18), transparent 34%),
      linear-gradient(180deg, var(--cream), #ffffff);
    padding: 64px 5%;
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 1rem;
    position: relative;}
.m365-page .pain-item {min-height: 190px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(17,82,168,0.12);
    border-radius: 18px;
    padding: 1.35rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 38px rgba(8,37,101,0.08);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;}
.m365-page .pain-item:hover {transform: translateY(-5px);
    border-color: rgba(110,88,204,0.28);
    box-shadow: 0 22px 48px rgba(8,37,101,0.13);}
.m365-page .pain-item::before {content: '';
    position: absolute;
    inset: auto -26px -40px auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(231,212,231,0.55);}
.m365-page .pain-kicker {display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 0.65rem;
    border-radius: 999px;
    background: rgba(44,140,216,0.1);
    color: var(--cobalt-blue);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;}
.m365-page .pain-icon {width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(44,140,216,0.12), rgba(224,166,233,0.2));
    font-size: 1.8rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;}
.m365-page .pain-item h3 {font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 0.45rem;
    position: relative;
    z-index: 1;}
.m365-page .pain-item p {font-size: 0.92rem;
    color: var(--subtext);
    line-height: 1.55;
    position: relative;
    z-index: 1;}
.m365-page .pain-divider {position: absolute;
    top: 50%;
    right: -19px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--white);
    color: var(--violet);
    border: 1px solid rgba(110,88,204,0.22);
    box-shadow: 0 10px 22px rgba(8,37,101,0.12);
    font-weight: 900;
    z-index: 4;}
.m365-page .pain-item-relief {background: linear-gradient(135deg, var(--deep-navy), var(--cobalt-blue) 58%, var(--violet));
    border-color: rgba(231,212,231,0.34);
    color: var(--white);}
.m365-page .pain-item-relief::before {background: rgba(224,166,233,0.18);}
.m365-page .pain-item-relief .pain-kicker {background: rgba(255,255,255,0.14);
    color: var(--soft-pearl);}
.m365-page .pain-item-relief .pain-icon {background: rgba(255,255,255,0.16);}
.m365-page .pain-item-relief h3,
.m365-page .pain-item-relief p {color: var(--white);}
.m365-page .pain-item-relief p {color: rgba(255,255,255,0.78);
    font-weight: 600;}
.m365-page .intro-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;}
.m365-page .intro-visual {background: linear-gradient(135deg, var(--deep-navy), var(--royal-blue));
    border-radius: 24px;
    padding: 3rem 2rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 360px;
    position: relative; overflow: hidden;}
.m365-page .intro-visual-mark {width: min(88%, 430px);
    border-radius: 18px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 18px 28px rgba(8,37,101,0.32));}
.m365-page .intro-visual-logo {font-family: 'Inter Variable', 'Inter', 'Noto Sans', sans-serif; font-size: 3.5rem; font-weight: 800;
    color: var(--white); line-height: 1;
    text-align: center;}
.m365-page .intro-visual-logo em {color: var(--teal); font-style: normal; display: block; font-size: 1.4rem; margin-top: 0.3rem;}
.m365-page .logo-ring-wrap {position: absolute; inset: 0; pointer-events: none;
    display: flex; align-items: center; justify-content: center;}
.m365-page .logo-ring {width: 100%; height: 100%; border-radius: 24px;
    background: conic-gradient(from 0deg, var(--sky-blue) 0%, var(--lavender) 33%, var(--soft-orchid) 66%, var(--sky-blue) 100%);
    mask: radial-gradient(transparent 60%, black 62%);
    -webkit-mask: radial-gradient(transparent 60%, black 62%);
    opacity: 0.2;
    animation: spinRing 12s linear infinite;}
@keyframes spinRing{ to { transform: rotate(360deg); } }
.m365-page .intro-text .tagline {font-family: 'Inter Variable', 'Inter', 'Noto Sans', sans-serif; font-size: 1.2rem; font-weight: 700;
    color: var(--orange); margin: 1rem 0;}
.m365-page .intro-text p {margin-bottom: 1rem;}
.m365-page .check-list {list-style: none; margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.7rem;}
.m365-page .check-list li {display: flex; gap: 0.75rem; align-items: flex-start;
    font-size: 0.95rem; color: var(--text);}
.m365-page .check-list a {color: var(--royal-blue);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;}
.m365-page .check-list li::before {content: '✓'; flex-shrink: 0;
    width: 22px; height: 22px; background: var(--teal);
    color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; margin-top: 1px;}
.m365-page .intro-community-link {display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding: 0.8rem 1.15rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--violet), var(--soft-orchid));
    color: var(--white);
    font-weight: 800;
    box-shadow: 0 14px 32px rgba(110,88,204,0.24);
    transition: transform 0.2s, box-shadow 0.2s;}
.m365-page .intro-community-link:hover {transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(110,88,204,0.32);}
.m365-page .pillars-section {background:
      radial-gradient(circle at 12% 18%, rgba(44,140,216,0.2), transparent 28%),
      radial-gradient(circle at 92% 82%, rgba(224,166,233,0.18), transparent 30%),
      linear-gradient(135deg, var(--deep-navy) 0%, #071f5b 48%, var(--royal-blue) 100%);
    position: relative;
    overflow: hidden;}
.m365-page .pillars-section::before {content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(120deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 120px),
      linear-gradient(35deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 150px);
    pointer-events: none;}
.m365-page .pillars-section > * {position: relative;
    z-index: 1;}
.m365-page .pillars-section .section-label {color: var(--gold);}
.m365-page .pillars-section h2 {color: var(--white);}
.m365-page .pillars-section .section-intro p {color: rgba(255,255,255,0.55);}
.m365-page .pillars-section .section-intro {max-width: 760px;}
.m365-page .pillars-frame {display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
    gap: 1.5rem;
    align-items: stretch;}
.m365-page .pillars-promise {min-height: 100%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 24px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 60px rgba(2,13,43,0.22);}
.m365-page .pillars-promise::after {content: '';
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    right: -90px;
    bottom: -95px;
    background: rgba(224,166,233,0.16);}
.m365-page .pillars-promise-mark {width: min(210px, 72%);
    margin-bottom: 2rem;
    filter: drop-shadow(0 18px 22px rgba(2,13,43,0.3));}
.m365-page .pillars-promise h3 {color: var(--white);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    margin-bottom: 0.85rem;
    max-width: 300px;}
.m365-page .pillars-promise p {color: rgba(255,255,255,0.68);
    font-size: 0.98rem;
    max-width: 330px;
    position: relative;
    z-index: 1;}
.m365-page .pillars-photo {position: relative;
    z-index: 1;
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    overflow: hidden;
    margin: 1.5rem 0 0;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 18px 42px rgba(2,13,43,0.2);}
.m365-page .pillars-photo img {width: 100%;
    height: 100%;
    object-fit: cover;}
.m365-page .pillars-photo::after {content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(8,37,101,0.1), rgba(110,88,204,0.25));}
.m365-page .pillars-promise-list {list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 2rem;
    position: relative;
    z-index: 1;}
.m365-page .pillars-promise-list li {border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: var(--soft-pearl);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.45rem 0.75rem;
    background: rgba(255,255,255,0.08);}
.m365-page .pillars-promise-list a {color: inherit;
    text-decoration: none;}
.m365-page .pillars-promise-list a:hover {text-decoration: underline;
    text-underline-offset: 3px;}
.m365-page .pillars-grid {display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;}
.m365-page .pillar-card {background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px;
    padding: 1.55rem;
    position: relative;
    overflow: hidden;
    min-height: 210px;
    transition: transform 0.25s, border-color 0.25s, background 0.25s;}
.m365-page .pillar-card::before {content: attr(data-n);
    position: absolute;
    right: 1rem;
    top: 0.7rem;
    font-size: 3.8rem;
    font-weight: 900;
    color: rgba(255,255,255,0.08);
    line-height: 1;}
.m365-page .pillar-card::after {content: '';
    position: absolute;
    left: 1.55rem;
    right: 1.55rem;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--sky-blue), var(--soft-orchid));
    transform: scaleX(0.32);
    transform-origin: left;
    transition: transform 0.25s;}
.m365-page .pillar-card:hover {transform: translateY(-5px);
    background: rgba(255,255,255,0.14);
    border-color: rgba(231,212,231,0.34);}
.m365-page .pillar-card:hover::after {transform: scaleX(1);}
.m365-page .pillar-icon {width: 52px; height: 52px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; margin-bottom: 1rem;
    position: relative;
    z-index: 1;}
.m365-page .pillar-icon i {line-height: 1; color: var(--white);}
.m365-page .pillar-card h3 {font-size: 1.15rem; color: var(--white); margin-bottom: 0.55rem; position: relative; z-index: 1;}
.m365-page .pillar-card p {font-size: 0.9rem; color: rgba(255,255,255,0.64); line-height: 1.6; position: relative; z-index: 1;}
.m365-page .pillar-card-wide {grid-column: 1 / -1;
    min-height: 170px;}
.m365-page .pillar-card:nth-child(1) .pillar-icon {background: rgba(44,140,216,0.15);}
.m365-page .pillar-card:nth-child(2) .pillar-icon {background: rgba(170,155,230,0.15);}
.m365-page .pillar-card:nth-child(3) .pillar-icon {background: rgba(224,166,233,0.15);}
.m365-page .pillar-card:nth-child(4) .pillar-icon {background: rgba(17,82,168,0.15);}
.m365-page .pillar-card:nth-child(5) .pillar-icon {background: rgba(110,88,204,0.15);}
.m365-page .resources-cta {max-width: 1180px;
    margin: 1.5rem auto 0;
    padding: 1.2rem 1.35rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 18px;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 18px 42px rgba(2,13,43,0.16);}
.m365-page .resources-cta-copy strong {display: block;
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 0.2rem;}
.m365-page .resources-cta-copy span {color: rgba(255,255,255,0.68);
    font-size: 0.88rem;
    line-height: 1.5;}
.m365-page .resources-cta-btn {display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.75rem 1.2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--violet), var(--soft-orchid));
    color: var(--white);
    font-weight: 800;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;}
.m365-page .resources-cta-btn:hover {transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(110,88,204,0.32);}
.m365-page .how-section {background:
      radial-gradient(circle at 5% 8%, rgba(224,166,233,0.18), transparent 24%),
      linear-gradient(180deg, var(--cream), #ffffff);}
.m365-page .how-layout {display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 2rem;
    align-items: stretch;}
.m365-page .how-visual {border-radius: 24px;
    overflow: hidden;
    min-height: 520px;
    position: relative;
    background: var(--dark);
    box-shadow: 0 24px 60px rgba(8,37,101,0.14);}
.m365-page .how-visual img {width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;}
.m365-page .how-visual::after {content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,37,101,0.05), rgba(8,37,101,0.78));}
.m365-page .how-visual-card {position: absolute;
    left: 1.4rem;
    right: 1.4rem;
    bottom: 1.4rem;
    z-index: 1;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 18px;
    padding: 1.3rem;
    color: var(--white);
    backdrop-filter: blur(16px);}
.m365-page .how-visual-card h3 {color: var(--white);
    margin-bottom: 0.45rem;}
.m365-page .how-visual-card p {color: rgba(255,255,255,0.72);
    font-size: 0.92rem;}
.m365-page .how-grid {display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    position: relative;}
.m365-page .how-step {background: var(--white); border-radius: var(--radius);
    padding: 1.3rem 1.3rem 1.3rem 5rem; box-shadow: var(--shadow);
    position: relative; overflow: hidden;
    transition: transform 0.25s, border-color 0.25s;
    border: 1px solid rgba(17,82,168,0.08);}
.m365-page .how-step:hover {transform: translateY(-3px);}
.m365-page .how-step::after {content: attr(data-n);
    position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 16px;
    display: grid; place-items: center;
    font-family: 'Inter Variable', 'Inter', 'Noto Sans', sans-serif; font-size: 1rem; font-weight: 900;
    color: var(--white); line-height: 1; pointer-events: none; user-select: none;
    background: linear-gradient(135deg, var(--sky-blue), var(--violet));}
.m365-page .step-dot {display: none;}
.m365-page .how-step h3 {font-size: 1rem; color: var(--dark); margin-bottom: 0.5rem;}
.m365-page .how-step p {font-size: 0.88rem; position: relative; z-index: 1;}
.m365-page .platform-strip {background: var(--white);
    padding: 36px 5%;
    border-top: 1px solid rgba(17,82,168,0.08);
    border-bottom: 1px solid rgba(17,82,168,0.08);}
.m365-page .platform-inner {max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    flex-wrap: wrap;}
.m365-page .platform-copy {color: var(--dark);
    font-weight: 800;
    max-width: 310px;}
.m365-page .platform-badges {display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;}
.m365-page .platform-badge {display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(17,82,168,0.12);
    background: var(--cream);
    color: var(--dark);
    border-radius: 999px;
    padding: 0.65rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 700;}
.m365-page .platform-badge i {color: var(--violet);}
.m365-page .amp-section {background: linear-gradient(135deg, var(--royal-blue) 0%, var(--cobalt-blue) 58%, var(--sky-blue) 100%);}
.m365-page .amp-section .section-label {color: rgba(255,255,255,0.6);}
.m365-page .amp-section h2 {color: var(--white); margin-bottom: 0.8rem;}
.m365-page .amp-section > p {color: rgba(255,255,255,0.75); max-width: 540px; margin-bottom: 3rem; font-size: 1.05rem;}
.m365-page .amp-flow {display: flex; gap: 0; align-items: stretch; flex-wrap: wrap;}
.m365-page .amp-step {flex: 1; min-width: 140px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 1.5rem 1.2rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    position: relative;
    transition: background 0.2s;}
.m365-page .amp-step:first-child {border-radius: var(--radius) 0 0 var(--radius);}
.m365-page .amp-step:last-child {border-radius: 0 var(--radius) var(--radius) 0;}
.m365-page .amp-step:hover {background: rgba(255,255,255,0.2);}
.m365-page .amp-arrow {position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
    background: var(--gold); color: var(--dark);
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700; z-index: 2;}
.m365-page .amp-step-num {font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-size:0.75rem; font-weight:700; color:var(--gold);}
.m365-page .amp-step h4 {font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-size:0.95rem; color:var(--white); font-weight:700;}
.m365-page .amp-step p {font-size:0.8rem; color:rgba(255,255,255,0.65); line-height:1.5;}
.m365-page .amp-reach {margin-top: 2.5rem;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;}
.m365-page .reach-num {font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-size: 3rem; font-weight: 800; color: var(--gold);
    line-height: 1;}
.m365-page .reach-text {color: rgba(255,255,255,0.85); font-size: 0.95rem;}
.m365-page .reach-text strong {color: var(--white); display: block; font-size: 1.1rem;}
.m365-page .pricing-section {background: var(--cream);}
.m365-page .pricing-tabs {display: inline-flex;
    gap: 0.45rem;
    padding: 0.4rem;
    margin: 0 0 2.25rem;
    border: 1px solid rgba(17,82,168,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 10px 30px rgba(8,37,101,0.08);}
.m365-page .pricing-tab {display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--subtext);
    font-family: 'Inter Variable','Inter','Noto Sans',sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;}
.m365-page .pricing-tab:hover {color: var(--royal-blue);}
.m365-page .pricing-tab.active {color: var(--white);
    background: linear-gradient(135deg, var(--violet), var(--soft-orchid));
    box-shadow: 0 8px 22px rgba(110,88,204,0.25);}
.m365-page .pricing-tab:focus-visible {outline: 3px solid rgba(44,140,216,0.32); outline-offset: 3px;}
.m365-page .pricing-panel {display: none;}
.m365-page .pricing-panel.active {display: block; animation: pricingPanelIn 0.3s ease;}
@keyframes pricingPanelIn{
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
.m365-page .pricing-panel-heading {display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;}
.m365-page .pricing-panel-copy {max-width: 720px;}
.m365-page .pricing-panel-copy h3 {color: var(--dark); margin-bottom: 0.55rem;}
.m365-page .pricing-panel-copy p {font-size: 0.96rem;}
.m365-page .pricing-grid.dfy-grid {grid-template-columns: repeat(4, minmax(0, 1fr));}
.m365-page .dfy-grid .price-card {position: relative;}
.m365-page .dfy-grid .price-badge {position: static;}
.m365-page .dfy-note {margin-top: 2rem;
    padding: 1.35rem 1.5rem;
    border: 1px dashed rgba(17,82,168,0.28);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.72);
    text-align: center;
    color: var(--subtext);
    font-size: 0.92rem;
    line-height: 1.65;}
.m365-page .dfy-note strong {color: var(--dark);}
.m365-page .pricing-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem;}
.m365-page .price-card {background: var(--white); border-radius: var(--radius);
    border: 2px solid var(--muted);
    padding: 2rem 1.75rem;
    display: flex; flex-direction: column;
    transition: all 0.25s;}
.m365-page .price-card:hover {border-color: var(--teal); box-shadow: var(--shadow); transform: translateY(-4px);}
.m365-page .price-card.featured {background: var(--dark); border-color: var(--teal);
    box-shadow: 0 8px 40px rgba(44,140,216,0.25);}
.m365-page .price-fit {display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--cobalt-blue);
    background: rgba(44,140,216,0.08);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 1rem;
    align-self: flex-start;}
.m365-page .price-card.featured .price-fit {color: var(--soft-pearl);
    background: rgba(255,255,255,0.1);}
.m365-page .price-badge {display: inline-block;
    background: var(--gold); color: var(--dark);
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.25rem 0.75rem; border-radius: 50px;
    margin-bottom: 1.2rem; align-self: flex-start;}
.m365-page .price-name {font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-size:1.05rem; font-weight:700; color:var(--dark); margin-bottom:0.4rem;}
.m365-page .price-name a {color: inherit; text-decoration: underline; text-underline-offset: 3px;}
.m365-page .price-card.featured .price-name {color: var(--white);}
.m365-page .price-amount {font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-size:2.6rem; font-weight:800; color:var(--dark); line-height:1;}
.m365-page .price-card.featured .price-amount {color: var(--gold);}
.m365-page .price-original {display: block;
    margin-bottom: 0.45rem;
    color: var(--subtext);
    font-size: 0.92rem;
    font-weight: 700;}
.m365-page .price-original s {opacity: 0.8;}
.m365-page .price-promo-note {margin-top: 0.5rem;
    color: var(--cobalt-blue);
    font-size: 0.78rem;
    font-weight: 800;}
.m365-page .price-freq {font-size:0.8rem; color:var(--subtext); margin-left:0.2rem;}
.m365-page .price-card.featured .price-freq {color: rgba(255,255,255,0.5);}
.m365-page .price-desc {font-size:0.9rem; color:var(--subtext); margin: 0.8rem 0 1.2rem; line-height:1.5;}
.m365-page .price-card.featured .price-desc {color:rgba(255,255,255,0.6);}
.m365-page .price-features {list-style:none; display:flex; flex-direction:column; gap:0.6rem; margin-bottom:2rem; flex:1;}
.m365-page .price-features li {display:flex; gap:0.6rem; align-items:flex-start;
    font-size:0.88rem; color:var(--text);}
.m365-page .price-card.featured .price-features li {color: rgba(255,255,255,0.75);}
.m365-page .price-features li::before {content:'✓'; flex-shrink:0;
    color: var(--teal); font-weight:700; font-size:0.85rem; margin-top:1px;}
.m365-page .price-btn {padding: 0.8rem 1.5rem; border-radius: 50px;
    font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-weight:700; font-size:0.95rem;
    border:none; cursor:pointer; transition:all 0.2s; text-align:center;
    background: var(--muted); color: var(--dark);}
.m365-page .price-btn:hover {background: var(--teal); color: var(--white);}
.m365-page .price-card.featured .price-btn {background: var(--violet); color: var(--white);}
.m365-page .price-card.featured .price-btn:hover {background: var(--royal-blue);}
.m365-page .pricing-starter {margin-top: 2rem;
    background: linear-gradient(90deg, rgba(44,140,216,0.08), rgba(224,166,233,0.14));
    border: 1px solid rgba(44,140,216,0.2);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;}
.m365-page .pricing-starter p {color: var(--text); font-size:0.95rem; max-width: 500px;}
.m365-page .pricing-starter strong {color: var(--dark);}
.m365-page .pricing-starter a {background: var(--teal); color: var(--white);
    padding: 0.7rem 1.5rem; border-radius: 50px;
    font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-weight:700; font-size:0.9rem;
    white-space: nowrap; transition: background 0.2s;}
.m365-page .pricing-starter a:hover {background: var(--teal-d);}
@media (max-width: 1100px){
.m365-page .pricing-grid.dfy-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 640px){
.m365-page .pricing-tabs {display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 18px;}
.m365-page .pricing-tab {padding-inline: 0.75rem; border-radius: 14px; font-size: 0.95rem;}
.m365-page .pricing-panel-heading {align-items: flex-start; flex-direction: column;}
.m365-page .pricing-grid.dfy-grid {grid-template-columns: 1fr;}
}
.m365-page .lead-section {background:
      radial-gradient(circle at 82% 20%, rgba(224,166,233,0.22), transparent 28%),
      linear-gradient(135deg, var(--deep-navy), var(--royal-blue));
    color: var(--white);
    position: relative;
    overflow: hidden;}
.m365-page .lead-grid {display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
    gap: 2rem;
    align-items: center;}
.m365-page .lead-section .section-label {color: var(--soft-pearl);}
.m365-page .lead-section h2 {color: var(--white); margin-bottom: 1rem;}
.m365-page .lead-section p {color: rgba(255,255,255,0.72);}
.m365-page .lead-actions {display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem;}
.m365-page .lead-card {background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 24px 60px rgba(2,13,43,0.22);}
.m365-page .lead-card img {width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
    margin-bottom: 1rem;}
.m365-page .lead-list {list-style: none;
    display: grid;
    gap: 0.7rem;
    margin-top: 1.3rem;}
.m365-page .lead-list li {display: flex;
    gap: 0.65rem;
    color: rgba(255,255,255,0.78);
    font-size: 0.92rem;}
.m365-page .lead-list i {color: var(--soft-orchid);}
.m365-page .proof-section {background: var(--white);}
.m365-page .proof-grid {display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;}
.m365-page .proof-card {border: 1px solid rgba(17,82,168,0.1);
    border-radius: 18px;
    padding: 1.5rem;
    background: linear-gradient(180deg, #ffffff, var(--cream));
    box-shadow: 0 14px 34px rgba(8,37,101,0.08);}
.m365-page .proof-stars {color: var(--violet);
    margin-bottom: 1rem;
    letter-spacing: 0.06em;}
.m365-page .proof-card blockquote {color: var(--dark);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 1.2rem;}
.m365-page .proof-person {display: flex;
    align-items: center;
    gap: 0.75rem;}
.m365-page .proof-avatar {width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--sky-blue), var(--soft-orchid));
    color: var(--white);
    font-weight: 900;}
.m365-page .proof-name {font-weight: 800; color: var(--dark); font-size: 0.9rem;}
.m365-page .proof-role {color: var(--subtext); font-size: 0.78rem; margin-top: 0.05rem;}
.m365-page .faq-section {background: var(--muted);}
.m365-page .faq-grid {max-width: 820px; display: flex; flex-direction: column; gap: 1rem;}
.m365-page .faq-item {background: var(--white); border-radius: var(--radius);
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;}
.m365-page .faq-q {width:100%; background:none; border:none; cursor:pointer;
    padding:1.4rem 1.75rem;
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
    font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-weight:700; font-size:1rem;
    color:var(--dark); text-align:left;}
.m365-page .faq-q:hover {color: var(--teal);}
.m365-page .faq-icon {flex-shrink:0; font-size:1.2rem; transition:transform 0.3s; color:var(--teal);}
.m365-page .faq-item.open .faq-icon {transform:rotate(45deg);}
.m365-page .faq-a {max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s;
    padding: 0 1.75rem;}
.m365-page .faq-item.open .faq-a {max-height: 300px; padding: 0 1.75rem 1.4rem;}
.m365-page .faq-a p {font-size:0.95rem;}
.m365-page .about-section {background: var(--white);}
.m365-page .about-inner {display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: center;}
.m365-page .about-card {background: var(--dark); border-radius: 24px;
    padding: 3rem 2rem; text-align: center;
    position: relative; overflow: hidden;}
.m365-page .founder-avatar {width: 110px; height: 110px; border-radius: 50%;
    background: linear-gradient(135deg, var(--sky-blue), var(--soft-orchid));
    margin: 0 auto 1.2rem;
    display: flex; align-items: center; justify-content: center;
    font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-size:2.5rem; font-weight:800; color:var(--white);}
.m365-page .founder-name {font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-size:1.3rem; font-weight:800; color:var(--white);}
.m365-page .founder-title {font-size:0.85rem; color:var(--teal); margin-top:0.3rem;}
.m365-page .about-quote {font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-size:1.05rem; font-style:italic;
    color:rgba(255,255,255,0.7); margin-top:1.2rem; line-height:1.6;}
.m365-page .about-text p {margin-bottom:1rem;}
.m365-page .about-text .big-quote {font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-size:1.4rem; font-weight:700;
    color:var(--dark); line-height:1.3; margin:1.5rem 0;
    border-left:4px solid var(--teal); padding-left:1rem;}
.m365-page .app-coming-soon {padding: 88px 5%;
    background:
      radial-gradient(circle at 12% 15%, rgba(44,140,216,0.16), transparent 30%),
      radial-gradient(circle at 88% 82%, rgba(224,166,233,0.22), transparent 32%),
      linear-gradient(180deg, #ffffff, var(--cream));}
.m365-page .app-coming-shell {max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding: clamp(2rem, 5vw, 4.2rem);
    border: 1px solid rgba(17,82,168,0.12);
    border-radius: 30px;
    background: rgba(255,255,255,0.82);
    box-shadow: 0 28px 70px rgba(8,37,101,0.12);
    overflow: hidden;
    position: relative;}
.m365-page .app-coming-shell::before {content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    right: -150px;
    top: -150px;
    background: rgba(170,155,230,0.16);
    pointer-events: none;}
.m365-page .app-status {display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem 0.85rem;
    border-radius: 999px;
    background: rgba(44,140,216,0.1);
    color: var(--royal-blue);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;}
.m365-page .app-status-dot {width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 0 6px rgba(110,88,204,0.12);
    animation: pulse 1.7s ease-in-out infinite;}
.m365-page .app-coming-copy h2 {color: var(--dark);
    max-width: 680px;
    margin-bottom: 1rem;}
.m365-page .app-coming-copy > p {max-width: 650px;
    font-size: 1.05rem;
    margin-bottom: 1.6rem;}
.m365-page .app-feature-list {display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.8rem;}
.m365-page .app-feature {display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 62px;
    padding: 0.8rem;
    border-radius: 14px;
    background: var(--cream);
    border: 1px solid rgba(17,82,168,0.1);
    color: var(--dark);
    font-size: 0.82rem;
    font-weight: 750;}
.m365-page .app-feature i {width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(44,140,216,0.16), rgba(224,166,233,0.24));
    color: var(--violet);
    font-size: 1rem;}
.m365-page .app-coming-actions {display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;}
.m365-page .app-coming-actions .btn-secondary {color: var(--dark);
    border-color: rgba(8,37,101,0.22);}
.m365-page .app-coming-actions .btn-secondary:hover {color: var(--violet);
    border-color: var(--violet);}
.m365-page .app-preview {min-height: 410px;
    position: relative;
    display: grid;
    place-items: center;}
.m365-page .app-preview-glow {position: absolute;
    inset: 12% 4%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(44,140,216,0.28), rgba(110,88,204,0.14) 48%, transparent 72%);
    filter: blur(8px);}
.m365-page .app-device {width: min(100%, 340px);
    min-height: 390px;
    border-radius: 30px;
    padding: 14px;
    background: linear-gradient(145deg, #071a4a, var(--royal-blue));
    box-shadow: 0 34px 65px rgba(8,37,101,0.28);
    transform: rotate(3deg);
    position: relative;
    z-index: 1;}
.m365-page .app-device-screen {min-height: 362px;
    border-radius: 21px;
    padding: 1.3rem;
    background:
      radial-gradient(circle at 85% 10%, rgba(224,166,233,0.3), transparent 26%),
      linear-gradient(180deg, #ffffff, #f5f1fb);
    overflow: hidden;}
.m365-page .app-device-head {display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.4rem;}
.m365-page .app-device-logo {color: var(--dark);
    font-weight: 900;
    letter-spacing: -0.03em;}
.m365-page .app-device-logo span {color: var(--violet);}
.m365-page .app-live-pill {padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: rgba(44,140,216,0.1);
    color: var(--royal-blue);
    font-size: 0.65rem;
    font-weight: 800;}
.m365-page .app-mock-title {font-size: 1.35rem;
    color: var(--dark);
    margin-bottom: 0.35rem;}
.m365-page .app-mock-sub {font-size: 0.78rem;
    line-height: 1.45;
    margin-bottom: 1.1rem;}
.m365-page .app-task {display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    background: #fff;
    border: 1px solid rgba(17,82,168,0.1);
    border-radius: 14px;
    margin-bottom: 0.7rem;
    box-shadow: 0 10px 24px rgba(8,37,101,0.06);}
.m365-page .app-task-icon {width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sky-blue), var(--violet));
    color: white;
    flex-shrink: 0;}
.m365-page .app-task strong {display: block;
    color: var(--dark);
    font-size: 0.78rem;
    margin-bottom: 0.15rem;}
.m365-page .app-task span {display: block;
    color: var(--subtext);
    font-size: 0.66rem;}
.m365-page .app-progress {margin-top: 1.1rem;
    padding: 0.95rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--deep-navy), var(--violet));
    color: white;}
.m365-page .app-progress-top {display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.72rem;
    font-weight: 800;
    margin-bottom: 0.6rem;}
.m365-page .app-progress-bar {height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    overflow: hidden;}
.m365-page .app-progress-bar span {display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sky-blue), var(--soft-orchid));}
@media (max-width: 900px){
.m365-page .app-coming-shell {grid-template-columns: 1fr;}
.m365-page .app-preview {min-height: 360px;}
}
@media (max-width: 640px){
.m365-page .app-coming-soon {padding: 64px 5%;}
.m365-page .app-coming-shell {padding: 1.5rem; border-radius: 22px;}
.m365-page .app-feature-list {grid-template-columns: 1fr;}
.m365-page .app-coming-actions a {width: 100%; text-align: center;}
.m365-page .app-device {width: min(90%, 320px);}
}
.m365-page .cta-section {background: linear-gradient(135deg, var(--deep-navy) 0%, var(--royal-blue) 58%, var(--violet) 100%);
    text-align: center; padding: 100px 5%;
    position: relative; overflow: hidden;}
.m365-page .cta-bg-glow {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:700px; height:400px;
    background: radial-gradient(ellipse, rgba(224,166,233,0.22) 0%, transparent 70%);
    pointer-events:none;}
.m365-page .cta-section .section-label {color: var(--gold);}
.m365-page .cta-section h2 {color: var(--white); margin-bottom:1rem;}
.m365-page .cta-section p {color: rgba(255,255,255,0.6); font-size:1.05rem; max-width:520px; margin:0 auto 2.5rem;}
.m365-page .cta-actions {display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}
.m365-page .cta-path {max-width: 880px;
    margin: 2.7rem auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;}
.m365-page .cta-path-step {background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 16px;
    padding: 1rem;
    text-align: left;}
.m365-page .cta-path-step i {color: var(--soft-pearl);
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
    display: inline-block;}
.m365-page .cta-path-step strong {display: block;
    color: var(--white);
    margin-bottom: 0.25rem;}
.m365-page .cta-path-step span {color: rgba(255,255,255,0.62);
    font-size: 0.84rem;
    line-height: 1.45;}
.m365-page .booking-section {background:
      radial-gradient(circle at 12% 0%, rgba(224,166,233,0.2), transparent 28%),
      linear-gradient(180deg, #ffffff, var(--cream));}
.m365-page .booking-shell {max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 0.45fr) minmax(0, 0.95fr);
    gap: 1.5rem;
    align-items: stretch;}
.m365-page .booking-copy {background: linear-gradient(135deg, var(--deep-navy), var(--royal-blue));
    color: var(--white);
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    overflow: hidden;}
.m365-page .booking-copy::after {content: '';
    position: absolute;
    right: -70px;
    bottom: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(224,166,233,0.18);}
.m365-page .booking-copy .section-label {color: var(--soft-pearl);}
.m365-page .booking-copy h2 {color: var(--white);
    margin-bottom: 1rem;}
.m365-page .booking-copy p {color: rgba(255,255,255,0.72);
    margin-bottom: 1.5rem;}
.m365-page .booking-list {list-style: none;
    display: grid;
    gap: 0.8rem;
    position: relative;
    z-index: 1;}
.m365-page .booking-list li {display: flex;
    gap: 0.65rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.92rem;}
.m365-page .booking-list i {color: var(--soft-orchid);}
.m365-page .booking-embed {background: var(--white);
    border: 1px solid rgba(17,82,168,0.1);
    border-radius: 24px;
    padding: 1rem;
    box-shadow: 0 24px 60px rgba(8,37,101,0.12);
    min-height: 720px;}
.m365-page .appointlet-inline {width: 100%;
    min-height: 690px;}
.m365-page .mobile-sticky-cta {position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--violet), var(--soft-orchid));
    color: var(--white);
    font-weight: 800;
    box-shadow: 0 18px 42px rgba(8,37,101,0.28);}
.m365-page .reviews-section {background:
      radial-gradient(circle at 15% 0%, rgba(224,166,233,0.22), transparent 28%),
      radial-gradient(circle at 90% 75%, rgba(44,140,216,0.16), transparent 30%),
      var(--white);
    padding: 86px 0;
    overflow: hidden;}
.m365-page .reviews-intro {max-width: 1180px;
    margin: 0 auto 2rem;
    padding: 0 5%;}
.m365-page .reviews-intro h2 {color: var(--dark);
    margin-bottom: 0.75rem;}
.m365-page .reviews-intro p {max-width: 640px;
    font-size: 1.02rem;}
.m365-page .reviews-slider {width: 100%;
    min-height: 220px;
    padding: 0 5%;}
.m365-page footer {background: #061b4d; padding: 3rem 5% 2rem;
    border-top: 1px solid rgba(255,255,255,0.05);}
.m365-page .footer-grid {display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem; margin-bottom:2.5rem;}
.m365-page .footer-brand .nav-logo {font-size:1.4rem; margin-bottom:0.8rem;}
.m365-page .footer-brand p {font-size:0.88rem; color:rgba(255,255,255,0.4); max-width:240px; line-height:1.6;}
.m365-page .footer-links h4 {font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.5); margin-bottom:1rem;}
.m365-page .footer-links ul {list-style:none; display:flex; flex-direction:column; gap:0.6rem;}
.m365-page .footer-links a {font-size:0.9rem; color:rgba(255,255,255,0.6); transition:color 0.2s;}
.m365-page .footer-links a:hover {color: var(--teal);}
.m365-page .footer-bottom {border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 1.5rem;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;}
.m365-page .footer-bottom p {font-size:0.8rem; color:rgba(255,255,255,0.3);}
.m365-page .footer-tagline {font-family:'Inter Variable','Inter','Noto Sans',sans-serif; font-size:0.8rem; color:rgba(255,255,255,0.3);}
.m365-page .reveal {opacity:0; transform:translateY(28px); transition:opacity 0.6s ease, transform 0.6s ease;}
.m365-page .reveal.visible {opacity:1; transform:translateY(0);}
@media (max-width: 900px){
.m365-page .intro-grid,
.m365-page .about-inner {grid-template-columns:1fr;}
.m365-page .intro-visual {min-height:220px;}
.m365-page .about-card {max-width:320px;}
.m365-page .hero {padding-top: 118px;}
.m365-page .hero-inner {grid-template-columns:1fr;}
.m365-page .hero-visual {min-height: 390px; order: -1;}
.m365-page .hero-logo-stage {width: min(82vw, 440px);}
.m365-page .hero-ripple {width:350px; height:350px; right:-10%; opacity:0.3;}
.m365-page .hero-chip {transform: scale(0.9);}
.m365-page .pain-band {grid-template-columns: repeat(2, minmax(0, 1fr));}
.m365-page .pain-item:nth-child(2) .pain-divider {display: none;}
.m365-page .pillars-frame {grid-template-columns: 1fr;}
.m365-page .pillars-promise {min-height: 360px;}
.m365-page .how-layout {grid-template-columns: 1fr;}
.m365-page .how-visual {min-height: 360px;}
.m365-page .lead-grid {grid-template-columns: 1fr;}
.m365-page .proof-grid {grid-template-columns: 1fr;}
.m365-page .cta-path {grid-template-columns: 1fr;}
.m365-page .booking-shell {grid-template-columns: 1fr;}
}
@media (max-width: 680px){
.m365-page .nav-links {display:none;}
.m365-page .hamburger {display:flex;}
.m365-page .hero {min-height: auto; padding: 112px 5% 56px;}
.m365-page .hero-visual {min-height: 310px;}
.m365-page .hero-visual::before {inset: 11% 6% 7%;}
.m365-page .hero-chip {display: none;}
.m365-page .hero-stats {gap: 1.2rem; margin-top: 2.4rem;}
.m365-page .stat-val {font-size: 1.55rem;}
.m365-page .pain-band {grid-template-columns: 1fr; padding: 48px 5%;}
.m365-page .pain-item {min-height: auto;}
.m365-page .pain-divider {top: auto;
      right: auto;
      left: 50%;
      bottom: -19px;
      transform: translateX(-50%) rotate(90deg);}
.m365-page .pain-item:nth-child(2) .pain-divider {display: grid;}
.m365-page .pillars-grid {grid-template-columns: 1fr;}
.m365-page .pillar-card-wide {grid-column: auto;}
.m365-page .pillar-card {min-height: auto;}
.m365-page .pillars-promise {min-height: auto; padding: 1.5rem;}
.m365-page .pillars-promise-mark {width: min(190px, 70%);}
.m365-page .platform-inner {align-items: flex-start;}
.m365-page .platform-badges {width: 100%;}
.m365-page .how-step {padding: 1.2rem 1.2rem 1.2rem 4.6rem;}
.m365-page .lead-actions {flex-direction: column;}
.m365-page .lead-actions .btn-primary,
.m365-page .lead-actions .btn-secondary {width: 100%; text-align: center;}
.m365-page .booking-copy {padding: 1.5rem;}
.m365-page .booking-embed {min-height: 680px; padding: 0.75rem;}
.m365-page .appointlet-inline {min-height: 650px;}
.m365-page .mobile-sticky-cta {display: flex;}
body.m365-site {padding-bottom: 76px;}
.m365-page .amp-step:first-child {border-radius:var(--radius) var(--radius) 0 0;}
.m365-page .amp-step:last-child {border-radius:0 0 var(--radius) var(--radius);}
.m365-page .amp-flow {flex-direction:column;}
.m365-page .amp-arrow {right:auto; bottom:-14px; top:auto; left:50%; transform:translateX(-50%) rotate(90deg);}
}
@media (prefers-reduced-motion: reduce){
.m365-page *,
.m365-page *::before,
.m365-page *::after {animation:none !important; transition:none !important;}
}
/* =====================================================================
   WORDPRESS / KADENCE / ELEMENTOR COMPATIBILITY LAYER
   Keeps the original design intact inside WordPress. Edit with care.
   ===================================================================== */

/* Base typography for every Meraki wrapper (header, sections, footer) */
.m365-page {
  font-family: 'Inter Variable', 'Inter', 'Noto Sans', sans-serif;
  font-size: 1rem;
  line-height: normal;
  color: var(--text);
}
/* Neutralise Kadence/Elementor element-level defaults inside the design */
.m365-page :where(h1, h2, h3, h4, h5, h6) { color: inherit; margin: 0; letter-spacing: normal; text-transform: none; }
.m365-page button,
.m365-page button:where(:hover, :focus) {
  font: inherit; line-height: normal; letter-spacing: normal; text-transform: none;
  box-shadow: none; border-radius: 0; background: none; color: inherit; padding: 0; border: 0; min-height: 0;
}
.m365-page :where(ul, ol) { margin: 0; padding: 0; }
.m365-page a:focus-visible, .m365-page button:focus-visible { outline: 3px solid var(--soft-orchid); outline-offset: 3px; }

/* Header links are anchors now (were divs in the static build) */
.m365-page a.nav-logo, .m365-page a.mobile-menu-brand { text-decoration: none; }

/* WP admin bar offset for the fixed header */
.admin-bar .m365-page nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .m365-page nav { top: 46px; } }
@media (max-width: 600px) { .admin-bar .m365-page nav { top: 0; } }

/* Space under the fixed header on pages that don't start with the hero */
.m365-nav-spacer { height: 82px; }

/* Menu dropdowns (only used if you add sub-items in Appearance > Menus) */
.m365-page .nav-links .m365-has-sub { position: relative; display: flex; align-items: center; }
.m365-page .nav-links .m365-has-sub > a::after { content: '▾'; font-size: .7em; margin-left: .35em; }
.m365-page .nav-links .m365-sub {
  position: absolute; top: 100%; left: -1rem; min-width: 210px; padding: .6rem;
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--white); border: 1px solid rgba(17,82,168,.12); border-radius: 14px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.m365-page .nav-links .m365-has-sub:hover .m365-sub,
.m365-page .nav-links .m365-has-sub:focus-within .m365-sub { opacity: 1; visibility: visible; transform: none; }
.m365-page .nav-links .m365-sub a { padding: .55rem .75rem; border-radius: 10px; }
.m365-page .nav-links .m365-sub a:hover { background: rgba(44,140,216,.08); }
.m365-page .mobile-menu .m365-sub { display: flex; flex-direction: column; padding-left: .9rem; }
.m365-page .mobile-menu .m365-sub a { font-weight: 600; padding: .7rem .9rem; }
.m365-page .nav-links a.is-current:not(.nav-cta) { color: var(--teal); }

/* Elementor: remove wrapper spacing around the HTML widgets that hold the design */
.elementor-widget-html:has(.m365-page),
.elementor-widget-html:has(.m365-inner) { margin: 0 !important; }
.elementor-widget-html:has(.m365-page) > .elementor-widget-container,
.elementor-widget-html:has(.m365-inner) > .elementor-widget-container { margin: 0; padding: 0; }
/* Elementor editor: show reveal-animated blocks immediately while editing */
body.elementor-editor-active .m365-page .reveal,
body.elementor-editor-preview .m365-page .reveal { opacity: 1 !important; transform: none !important; }
/* No-JS safety */
html.no-js .m365-page .reveal { opacity: 1; transform: none; }

/* Inner page helper text (was the inner footer line in the static build) */
.m365-inner .m365-inner-note { max-width: 1180px; margin: 0 auto; padding: 0 5% 36px; color: var(--subtext); font-size: .88rem; }

/* Mobile drawer brand is a link now — keep it looking like the static version */
.m365-page .mobile-menu a.mobile-menu-brand { padding: 0; border-radius: 0; justify-content: flex-start; font-weight: 900; color: var(--dark); background: none; }
.m365-page .mobile-menu a.mobile-menu-brand::after { display: none; }

/* Kadence paints .site white; let the cream page background show like the static site */
body.m365-site .site,
body.m365-site #inner-wrap { background: transparent; }