:root{
  --ma-bg:#ffffff;
  --ma-panel:#fbfcfd;
  --ma-soft:#f5f7f9;
  --ma-line:#e5e9ee;
  --ma-text:#2c2d31;
  --ma-muted:#9ba2aa;
  --ma-cyan:#08a9c9;
  --ma-cyan-dark:#058cab;

  --ma-shadow-light:-9px -9px 20px rgba(255,255,255,.9);
  --ma-shadow-dark:14px 18px 34px rgba(43,52,62,.16);
  --ma-inner-shadow:
    inset 7px 7px 14px rgba(52,62,73,.08),
    inset -8px -8px 16px rgba(255,255,255,.9);

  --ma-neo-raised:
    -7px -7px 14px rgba(255,255,255,.96),
     7px 9px 16px rgba(43,52,62,.15);

  --ma-neo-raised-strong:
    -9px -9px 18px rgba(255,255,255,.98),
     10px 13px 24px rgba(43,52,62,.18);

  --ma-neo-pressed:
    inset -6px -6px 12px rgba(255,255,255,.95),
    inset 6px 6px 12px rgba(43,52,62,.14);

  --ma-radius:14px;
}

.ma-tip-section,
.ma-tip-section *{
  box-sizing:border-box;
}

.ma-tip-section{
  position:relative;
  isolation:isolate;
  z-index:2;

  /* Equal responsive space above and below */
  padding:
    clamp(3rem, 7vw, 6rem)
    18px
    clamp(3rem, 7vw, 6rem);

  background:#fff;
  color:var(--ma-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.ma-tip-section::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:url("../images/topology-background.svg") center/850px auto repeat;
  opacity:.60;
  pointer-events:none;
  z-index:0;
}

.ma-tip-section h1,
.ma-tip-section h2,
.ma-tip-section h3,
.ma-tip-section p{
  max-width:none;
  width:auto;
  text-wrap:balance;
}

.ma-tip-stage{
  position:relative;
  z-index:1;

  width:min(1080px,100%);
  min-height:590px;
  margin:0 auto;

  display:grid;
  grid-template-columns:1fr 188px;
  grid-template-rows:auto 1fr auto;
  gap:0 30px;

  padding:58px 58px 34px;

  background:linear-gradient(145deg,#fff,#f8fafc);
  border:1px solid #edf0f3;
  border-radius:14px;
  box-shadow:var(--ma-shadow-light),var(--ma-shadow-dark);
  overflow:visible;
}

.ma-top-icon{
  grid-column:1/-1;
  justify-self:center;
  width:56px;
  height:56px;
  color:var(--ma-cyan);
  filter:drop-shadow(0 8px 8px rgba(8,169,201,.08));
}

.ma-top-icon svg{
  width:100%;
  height:100%;
}

.ma-tip-centre{
  grid-column:1;
  grid-row:2;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.ma-tip-card{
  position:relative;
  width:min(680px,100%);
  min-height:320px;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding:46px 72px;

  background:linear-gradient(145deg,#ffffff,#f9fbfd);
  border:1px solid #eef1f4;
  border-radius:26px;
  box-shadow:var(--ma-shadow-light),var(--ma-shadow-dark);
  color:var(--ma-text);
  overflow:visible;

  transition:transform .25s ease;
}

.ma-tip-card:hover{
  transform:translateY(-2px);
}

.ma-tip-intro{
  max-width:500px;
}

.ma-large-icon{
  width:176px;
  height:112px;
  margin:0 auto 24px;
  border-radius:26px;
  background:#f7f9fb;
  box-shadow:var(--ma-inner-shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ma-cyan);
}

.ma-large-icon svg{
  width:90px;
  height:90px;
}

.ma-tip-intro h1{
  max-width:16ch;
  margin:0 auto;
  font-size:clamp(1.9rem,3vw,2.6rem);
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--ma-cyan);
}

.ma-tip-intro p{
  margin:14px 0 0;
  color:#59616b;
  font-size:1.08rem;
  font-weight:650;
}

.ma-kicker{
  margin:0 0 20px;
  text-transform:uppercase;
  font-size:clamp(1.55rem,3vw,2.5rem);
  font-weight:900;
  letter-spacing:.02em;

  color:#5a646e;
  background-image:linear-gradient(90deg,#5a646e 0%,#0c6980 55%,#5ce1e6 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.ma-tip-content h2{
  max-width:22ch;
  margin:0 auto 20px;
  font-size:clamp(1.7rem,3vw,2.35rem);
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--ma-text);
}

.ma-tip-text{
  max-width:560px;
  margin:0 auto;
  font-size:clamp(1.1rem,2vw,1.38rem);
  line-height:1.55;
  color:#202328;
}

.ma-tip-content hr{
  width:88%;
  margin:28px auto 18px;
  border:0;
  border-top:1px solid #dfe4e9;
}

.ma-tip-count{
  margin:0;
  color:var(--ma-cyan);
  font-weight:900;
  font-size:1.08rem;
}

.ma-tip-card.is-open .ma-tip-content{
  animation:tipIn .36s ease both;
}

@keyframes tipIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Buttons */

.ma-play-button,
.ma-side-button,
.ma-library-button{
  appearance:none;
  border:0;
  position:relative;
  overflow:hidden;

  background:#f8fafc;
  color:var(--ma-cyan);
  cursor:pointer;

  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.95),
    -5px -5px 10px rgba(255,255,255,.96),
     6px 7px 12px rgba(43,52,62,.16);

  transform:translateY(0);
  transition:
    box-shadow .16s ease,
    transform .16s ease,
    color .16s ease,
    background-color .16s ease;

  -webkit-tap-highlight-color:transparent;
}

.ma-play-button{
  width:70px;
  height:70px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
}

.ma-play-triangle{
  display:block;
  width:0;
  height:0;
  margin-left:5px;
  border-top:16px solid transparent;
  border-bottom:16px solid transparent;
  border-left:23px solid currentColor;
  transition:transform .18s ease;
}

.ma-side-button,
.ma-library-button{
  border:1px solid rgba(229,233,238,.75);
  border-radius:8px;
  font-weight:900;
  text-transform:uppercase;
}

.ma-side-button{
  min-height:48px;
  padding:0 16px;
}

.ma-side-button.is-icon{
  height:58px;
}

.ma-side-button svg{
  width:36px;
  height:36px;
  margin:auto;
  display:block;
}

.ma-library-button{
  min-width:292px;
  height:50px;
}

.ma-play-button:hover,
.ma-play-button:focus-visible,
.ma-side-button:hover,
.ma-side-button:focus-visible,
.ma-library-button:hover,
.ma-library-button:focus-visible{
  outline:0;
  transform:translateY(0);
  background:#f3f6f9;
  color:var(--ma-cyan-dark);

  box-shadow:
    inset 3px 3px 7px rgba(43,52,62,.15),
    inset -4px -4px 8px rgba(255,255,255,.96),
    1px 1px 2px rgba(43,52,62,.05);
}

.ma-play-button:active,
.ma-play-button.is-pressed,
.ma-play-button.is-reference-pressed,
.ma-side-button:active,
.ma-side-button.is-active,
.ma-side-button.is-reference-pressed,
.ma-library-button:active,
.ma-library-button.is-active,
.ma-library-button.is-reference-pressed{
  transform:translateY(1px);
  background:#eef2f6;
  color:var(--ma-cyan-dark);

  box-shadow:
    inset 5px 5px 10px rgba(43,52,62,.18),
    inset -6px -6px 12px rgba(255,255,255,.98);
}

.ma-play-button:hover .ma-play-triangle,
.ma-play-button:focus-visible .ma-play-triangle,
.ma-play-button:active .ma-play-triangle,
.ma-play-button.is-pressed .ma-play-triangle,
.ma-play-button.is-reference-pressed .ma-play-triangle{
  transform:translate(1px,1px) scale(.94);
}

.ma-side-button:hover svg,
.ma-side-button:focus-visible svg,
.ma-side-button:active svg,
.ma-side-button.is-active svg,
.ma-side-button.is-reference-pressed svg{
  transform:translate(1px,1px) scale(.96);
}

.ma-play-button.is-pressed{
  animation:none;
}

/* Side and bottom controls */

.ma-side-menu{
  grid-column:2;
  grid-row:2;
  align-self:center;
  display:grid;
  gap:16px;
}

.ma-side-button.is-active{
  pointer-events:auto;
}

.ma-bottom-controls{
  grid-column:1;
  grid-row:3;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:26px;
  margin-top:18px;
}

.ma-bottom-controls .ma-play-button{
  width:64px;
  height:64px;
}

.ma-bottom-controls .ma-play-triangle{
  border-top-width:14px;
  border-bottom-width:14px;
  border-left-width:20px;
}

.ma-powered{
  position:absolute;
  right:34px;
  bottom:26px;
  margin:0;
  color:#939aa3;
  font-size:13px;
}

.ma-powered strong{
  color:#2e3135;
}

/* Header topology overlay */



/* Responsive */

@media (max-width:900px){
  .ma-tip-section{
    padding:
      clamp(2.5rem, 7vw, 4.5rem)
      18px
      clamp(2.5rem, 7vw, 4.5rem);
  }

  .ma-tip-stage{
    width:min(680px,100%);
    min-height:auto;
    grid-template-columns:1fr;
    padding:38px 18px 28px;
  }

  .ma-tip-centre,
  .ma-side-menu,
  .ma-bottom-controls{
    grid-column:1;
  }

  .ma-side-menu{
    grid-row:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:min(430px,100%);
    margin:20px auto 0;
  }

  .ma-tip-card{
    min-height:310px;
    padding:34px 22px 40px;
  }

  .ma-bottom-controls{
    justify-content:center;
    margin-top:26px;
  }

  .ma-powered{
    position:static;
    grid-column:1;
    margin-top:16px;
    text-align:center;
  }
}

@media (max-width:560px){
  .ma-tip-section{
    padding:
      clamp(2rem, 8vw, 3.5rem)
      12px
      clamp(2rem, 8vw, 3.5rem);
  }

  .ma-tip-stage{
    padding-left:14px;
    padding-right:14px;
    border-radius:12px;
  }

  .ma-tip-card{
    border-radius:20px;
  }

  .ma-large-icon{
    width:142px;
    height:96px;
  }

  .ma-tip-intro h1{
    max-width:14ch;
    font-size:1.8rem;
  }

  .ma-tip-content h2{
    max-width:16ch;
  }

  .ma-tip-text{
    font-size:1.05rem;
  }

  .ma-side-menu{
    grid-template-columns:1fr;
  }

  .ma-library-button{
    min-width:0;
    width:100%;
  }

  .ma-bottom-controls{
    gap:14px;
  }

  .ma-bottom-controls .ma-play-button{
    flex:0 0 58px;
    width:58px;
    height:58px;
  }
}

@media (prefers-reduced-motion:reduce){
  .ma-tip-section *,
  .ma-tip-section *::before,
  .ma-tip-section *::after{
    animation:none!important;
    transition:none!important;
  }
}

/* Fix nav dropdown sitting behind hero */
/* Mobile nav display fix for tips page */
.site-header{
  position:sticky;
  top:0;
  z-index:99999 !important;
  overflow:visible !important;
}

.site-header::before,
.site-header::after{
  pointer-events:none;
  z-index:0;
}



@media (max-width:1120px){
  .site-nav{
    position:absolute;
    left:1rem;
    right:1rem;
    top:calc(100% + .5rem);
    z-index:99999 !important;

    display:none;
    flex-direction:column;
    align-items:stretch;

    max-height:calc(100vh - 110px);
    overflow-y:auto;

    padding:.8rem;
    background:rgba(10,16,24,.98);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    box-shadow:0 18px 44px rgba(24,34,28,.22);
  }

  .site-nav.open{
    display:flex;
  }

  .nav-dropdown{
    width:100%;
  }

  .nav-dropdown-menu{
    position:static;
    min-width:100%;
    margin-top:.35rem;
    padding:.35rem 0 0 .75rem;

    display:none;
    opacity:1;
    visibility:visible;
    transform:none;

    background:transparent;
    border:0;
    box-shadow:none;
  }

  .nav-dropdown.open .nav-dropdown-menu{
    display:flex;
  }

  .nav-dropdown-menu a{
    padding:.8rem 1rem;
    border-radius:14px;
    background:rgba(255,255,255,.06);
  }
}
.header-inner,
.site-nav,
.nav-dropdown{
  position:relative;
  z-index:10000;
}

.nav-dropdown-menu{
  z-index:10001 !important;
}



/* Hero lightbulb cursor for Tip of the Day page */
.hero-tip-cursor-link{
  position:relative;
  display:block;
  overflow:hidden;
  cursor:none;
  border:0;
  background:transparent !important;
  box-shadow:none !important;
  appearance:none;
  -webkit-appearance:none;
}

.hero-tip-cursor-link img{
  display:block;
  width:100%;
  height:auto;
}

.hero-tip-cursor-link::before,
.hero-tip-cursor-link::after{
  content:none !important;
  display:none !important;
}

.hero-cursor-lightbulb{
  position:absolute;
  left:50%;
  top:50%;
  width:30px;
  height:30px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, -50%);
  z-index:5;
  transition:opacity 160ms ease;
  will-change:left, top;
}

.hero-cursor-lightbulb svg{
  display:block;
  width:100%;
  height:100%;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

.hero-tip-cursor-link:focus-visible{
  outline:3px solid rgba(255,255,255,.88);
  outline-offset:6px;
}

@media (hover:none), (pointer:coarse){
  .hero-tip-cursor-link{
    cursor:pointer;
  }

  .hero-cursor-lightbulb{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-cursor-lightbulb{
    transition:none;
  }
}

/* Tips page nav fix — match homepage mobile dropdown */
.site-header{
  position:sticky;
  top:0;
  z-index:9999;
  overflow:visible;
}

.site-header::before,
.site-header::after{
  pointer-events:none;
}

.header-inner{
  position:relative;
  z-index:2;
}

@media (min-width:1121px){
  .site-nav{
    position:relative;
    z-index:3;
  }

  .nav-dropdown{
    position:relative;
  }

  .nav-dropdown-menu{
    z-index:10000;
  }
}

@media (max-width:1120px){
  .site-nav{
    position:absolute !important;
    left:1rem;
    right:1rem;
    top:calc(100% + .5rem);

    z-index:10000;
    display:none;
    flex-direction:column;
    align-items:stretch;

    padding:.8rem;
    background:rgba(10,16,24,.98);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    box-shadow:var(--shadow);

    max-height:calc(100vh - 110px);
    overflow-y:auto;
  }

  .site-nav.open{
    display:flex;
  }

  .nav-dropdown{
    position:relative;
    width:100%;
  }

  .nav-dropdown-menu{
    position:static;
    min-width:100%;
    margin-top:.35rem;
    padding:.35rem 0 0 .75rem;

    display:none;
    flex-direction:column;
    gap:.2rem;

    background:transparent;
    border:0;
    box-shadow:none;

    opacity:1;
    visibility:visible;
    transform:none;
  }

  .nav-dropdown.open .nav-dropdown-menu{
    display:flex;
  }

  .nav-dropdown-menu a{
    padding:.8rem 1rem;
    border-radius:14px;
    background:rgba(255,255,255,.06);
  }
}