/* Maid Affordable, light airy palette */
:root{
  --ma-pink:#ff52a8;        /* hot pink */
  --ma-pinkLight:#ffd1e6;   /* light pink */
  --ma-blue:#9fd8ff;        /* baby blue */
  --ma-blueLight:#d9f2ff;   /* light baby blue */
  --ma-ink:#111111;         /* black */
  --ma-charcoal:#2a2a2a;    /* dark grey */
  --ma-white:#ffffff;
  --ma-line: rgba(17,17,17,0.10);
  --ma-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

*{ box-sizing:border-box; }

body{
  margin:0;
}

/* Page background */
.ma-book{
  background: linear-gradient(180deg, rgba(217,242,255,0.55), rgba(255,255,255,1));
  padding: 8px 0 18px !important;
}

/* Remove platform-added top spacing (common in Marketing360) */
.pageTitleContainer,
.pageTitleContent,
h1.pageTitle{
  margin:0 !important;
  padding:0 !important;
}
.pageTitleContainer{
  display:none !important;
}

/* HERO: airy */
#sa-hub .hero,
#sa-hub #madHero,
.hero{
  background:
    radial-gradient(900px 520px at 12% 12%, rgba(255,209,230,0.45), rgba(255,255,255,0) 70%),
    radial-gradient(900px 520px at 88% 22%, rgba(217,242,255,0.85), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, rgba(217,242,255,0.75), rgba(255,255,255,0.96));
  border-top: 1px solid var(--ma-line);
  border-bottom: 1px solid var(--ma-line);
  padding: 6px 0 12px !important;
  min-height: 0 !important;
}

/* Typography */
#sa-hub, .ma-container{
  color: var(--ma-charcoal);
  font-family: Tahoma, Arial, sans-serif;
}
#sa-hub h1, #sa-hub h2, #sa-hub h3{
  color: var(--ma-ink);
  letter-spacing: -0.3px;
  margin-top: 0;
}
#sa-hub p, #sa-hub li{
  color: rgba(42,42,42,0.92);
}

/* Buttons */
#sa-hub .btn,
#sa-hub .madButton{
  background: var(--ma-pink);
  border: 1px solid rgba(0,0,0,0.10);
  color: var(--ma-white);
  font-weight: 800;
  border-radius: 999px;
  box-shadow: var(--ma-shadow);
}
#sa-hub .btn.secondary{
  background: var(--ma-pinkLight);
  color: var(--ma-ink);
  box-shadow:none;
}

#sa-hub a{ color: var(--ma-ink); }
#sa-hub a:hover{ opacity: 0.9; }

/* White cards */
#sa-hub .card,
#sa-hub .ma-card,
#sa-hub .madServiceTile,
#sa-hub .accordion-content{
  background: var(--ma-white);
  border: 1px solid var(--ma-line);
  border-radius: 18px;
  box-shadow: var(--ma-shadow);
}

/* Hero layout */
div#madHero{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:16px;
}
#madHeroContent,
#madFormContainer{
  flex:1 1 480px;
  width:auto;
}

/* Reduce extra margins that create “mystery space” */
.section{ padding: 12px 0 !important; }
.section .wrap{ padding-top:0 !important; padding-bottom:0 !important; }
.wrap{ margin-top:0 !important; }

/* FIX, enforce 16:9 on the actual class Marketing360 is using */
.videoRatio{
  position: relative !important;
  width: 100% !important;

  /* kill the padding trick */
  padding: 0 !important;
  height: auto !important;

  /* use modern ratio */
  aspect-ratio: 16 / 9 !important;

  overflow: hidden !important;
  border-radius: 18px !important;
  background: #fff !important;
}

/* Make the iframe fill the box */
.videoRatio iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;