:root {
  --ec-bg: #ffffff;
  --ec-surface: #f7f9fc;
  --ec-surface-2: #eef3ff;
  --ec-text: #0c1730;
  --ec-muted: #62708a;
  --ec-line: #dfe6f0;
  --ec-blue: #1769ff;
  --ec-blue-2: #5b7cff;
  --ec-navy: #091326;
  --ec-shadow: 0 30px 80px rgba(20, 46, 93, .10);
}

html {
  scroll-behavior: smooth;
}

.ec-shell {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
}

/* Header */
.ec-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(223,230,240,.8);
}

.ec-header-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.ec-brand {
  display: inline-flex;
  align-items: center;
}

.ec-brand img {
  width: 132px;
  height: auto;
  max-height: 40px;
  object-fit: contain;
}

.ec-nav-collapse {
  flex: 1;
  align-items: center;
}

@media (min-width: 992px) {
  .ec-nav-collapse {
    display: flex !important;
  }
}

.ec-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 0 auto;
}

.ec-nav a,
.ec-signin {
  color: #22304d;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.ec-nav a:hover,
.ec-signin:hover {
  color: var(--ec-blue);
}

.ec-header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ec-menu-toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: #f4f7fb;
  padding: 10px;
}

.ec-menu-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--ec-navy);
  border-radius: 999px;
}

/* Buttons */
.ec-btn {
  min-height: 52px;
  padding: 0 23px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: .2s ease;
}

.ec-btn:hover {
  transform: translateY(-2px);
}

.ec-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--ec-blue), var(--ec-blue-2));
  box-shadow: 0 12px 30px rgba(23,105,255,.24);
}

.ec-btn-primary:hover {
  color: #fff;
}

.ec-btn-secondary {
  color: #18304f;
  background: #fff;
  border-color: #dbe4ef;
  box-shadow: 0 10px 30px rgba(20,46,93,.07);
}

.ec-btn-small {
  min-height: 44px;
  padding: 0 19px;
}

/* Hero */
.ec-hero {
  position: relative;
  overflow: hidden;
  padding: 160px 0 130px;
  background:
    radial-gradient(circle at 78% 20%, rgba(80,111,255,.10), transparent 31%),
    radial-gradient(circle at 63% 58%, rgba(18,136,255,.07), transparent 32%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.ec-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  gap: 78px;
  align-items: center;
}

.ec-kicker {
  display: inline-flex;
  margin-bottom: 24px;
  padding: 8px 13px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2d62c7;
  font-size: 13px;
  font-weight: 700;
}

.ec-hero-copy h1 {
  margin: 0;
  color: #0a1630;
  font-family: "Jost", sans-serif;
  font-size: clamp(54px, 6vw, 82px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 700;
}

.ec-hero-lead {
  max-width: 650px;
  margin: 30px 0 0;
  color: var(--ec-muted);
  font-size: 19px;
  line-height: 1.7;
}

.ec-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.ec-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 30px;
  color: #6b7890;
  font-size: 13px;
  font-weight: 600;
}

.ec-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Network card */
.ec-network-card {
  min-height: 500px;
  padding: 22px;
  border-radius: 32px;
  border: 1px solid rgba(205,216,233,.9);
  background: rgba(255,255,255,.94);
  box-shadow: var(--ec-shadow);
}

.ec-network-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #59677e;
  font-size: 13px;
  padding-bottom: 18px;
}

.ec-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #2ac88e;
  box-shadow: 0 0 0 5px rgba(42,200,142,.10);
}

.ec-network-header strong {
  color: #208b68;
  background: #eaf9f4;
  border: 1px solid #d3f1e7;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
}

.ec-network-stage {
  min-height: 330px;
  display: grid;
  grid-template-columns: 1fr .72fr 1.1fr .72fr 1fr;
  align-items: center;
  gap: 8px;
}

.ec-network-node {
  min-height: 142px;
  padding: 18px 14px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e3e9f3;
  box-shadow: 0 16px 35px rgba(22,47,88,.07);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.ec-network-node strong {
  margin-top: 10px;
  color: #152442;
  font-size: 14px;
}

.ec-network-node small {
  margin-top: 4px;
  color: #8a96aa;
  font-size: 11px;
}

.ec-node-icon,
.ec-core-logo {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: #eff4ff;
  color: #316eea;
  font-size: 22px;
}

.ec-network-core {
  min-height: 176px;
  border-color: #cbd9fb;
  background: linear-gradient(180deg,#fff 0%,#f6f9ff 100%);
}

.ec-core-logo {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg,#1d6fff,#7258ff);
  font-size: 23px;
  font-weight: 800;
  box-shadow: 0 15px 32px rgba(64,89,240,.26);
}

.ec-network-route {
  position: relative;
  height: 96px;
}

.ec-network-route::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #a8bdec 15%,
    #6c91ee 50%,
    #a8bdec 85%,
    transparent
  );
}

.ec-packet {
  position: absolute;
  top: 28px;
  left: 0;
  padding: 5px 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dce5f4;
  box-shadow: 0 8px 18px rgba(34,67,120,.10);
  color: #52627d;
  font-size: 9px;
  font-weight: 700;
  animation: ec-packet 4.8s ease-in-out infinite;
}

.ec-packet-two,
.ec-packet-four {
  top: 58px;
  animation-delay: 2s;
}

.ec-network-bottom {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}

.ec-network-bottom > div {
  padding: 13px 14px;
  border-radius: 15px;
  background: #f7f9fd;
  border: 1px solid #e6ebf3;
}

.ec-network-bottom small,
.ec-network-bottom strong {
  display: block;
}

.ec-network-bottom small {
  color: #8b97aa;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.ec-network-bottom strong {
  margin-top: 4px;
  color: #263754;
  font-size: 13px;
}

@keyframes ec-packet {
  0%,10% {
    left: 0;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  90%,100% {
    left: calc(100% - 46px);
    opacity: 0;
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .ec-shell {
    width: min(100% - 40px,1240px);
  }

  .ec-menu-toggle {
    display: block;
  }

  .ec-nav-collapse {
    position: absolute;
    top: 72px;
    left: 20px;
    right: 20px;
    padding: 18px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e4eaf3;
    box-shadow: 0 20px 50px rgba(24,45,80,.12);
  }

  .ec-nav,
  .ec-header-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ec-nav {
    gap: 3px;
  }

  .ec-nav a,
  .ec-signin {
    padding: 11px 9px;
  }

  .ec-header-actions {
    gap: 8px;
    margin-top: 10px;
  }

  .ec-hero {
    padding: 135px 0 95px;
  }

  .ec-hero-grid {
    grid-template-columns: 1fr;
  }

  .ec-hero-copy {
    text-align: center;
  }

  .ec-hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .ec-hero-actions,
  .ec-trust-row {
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 680px) {
  .ec-shell {
    width: min(100% - 28px,1240px);
  }

  .ec-brand img {
    width: 118px;
  }

  .ec-hero {
    padding: 118px 0 78px;
  }

  .ec-hero-copy h1 {
    font-size: clamp(46px,15vw,64px);
  }

  .ec-hero-lead {
    font-size: 17px;
  }

  .ec-hero-actions {
    flex-direction: column;
  }

  .ec-btn {
    width: 100%;
  }

  .ec-network-card {
    min-height: auto;
    padding: 16px;
    border-radius: 24px;
  }

  .ec-network-stage {
    min-height: 280px;
    grid-template-columns: 1fr .42fr 1fr;
  }

  .ec-network-stage > :nth-child(4),
  .ec-network-stage > :nth-child(5) {
    display: none;
  }

  .ec-network-bottom {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Growth Paths
   ========================================================= */

.ec-growth {
  padding: 130px 0;
  background: #f7f9fd;
}

.ec-section-heading {
  max-width: 780px;
  margin-bottom: 64px;
}

.ec-section-kicker {
  display: inline-block;
  margin-bottom: 18px;
  color: #376ce0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ec-section-heading h2 {
  margin: 0;
  color: #0b1730;
  font-family: "Jost", sans-serif;
  font-size: clamp(46px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.ec-section-heading p {
  max-width: 680px;
  margin: 24px 0 0;
  color: #67758d;
  font-size: 18px;
  line-height: 1.7;
}

.ec-growth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.ec-growth-card {
  position: relative;
  overflow: hidden;
  min-height: 690px;
  padding: 42px;
  border-radius: 30px;
  border: 1px solid #e0e7f1;
  background: #fff;
}

.ec-growth-advertiser {
  background:
    radial-gradient(circle at 100% 0%, rgba(39,112,255,.11), transparent 35%),
    #fff;
}

.ec-growth-publisher {
  background:
    radial-gradient(circle at 100% 0%, rgba(107,80,255,.10), transparent 35%),
    #fff;
}

.ec-growth-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ec-card-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #3267d6;
  font-size: 13px;
  font-weight: 700;
}

.ec-card-label i {
  font-size: 16px;
}

.ec-card-number {
  color: #c6cedb;
  font-size: 13px;
  font-weight: 700;
}

.ec-growth-card h3 {
  max-width: 470px;
  margin: 34px 0 18px;
  color: #0d1932;
  font-family: "Jost", sans-serif;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.ec-growth-card > p {
  max-width: 500px;
  margin: 0;
  color: #69778e;
  font-size: 16px;
  line-height: 1.7;
}

.ec-feature-list {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.ec-feature-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #35445f;
  font-size: 14px;
  font-weight: 600;
}

.ec-feature-list i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf3ff;
  color: #376ce0;
  font-size: 13px;
}

.ec-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  color: #1769ff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
}

.ec-text-link span {
  transition: transform .2s ease;
}

.ec-text-link:hover {
  color: #1769ff;
}

.ec-text-link:hover span {
  transform: translateX(4px);
}

/* Mini dashboard cards */

.ec-growth-preview {
  position: absolute;
  left: 42px;
  right: 42px;
  bottom: -44px;
  min-height: 245px;
  padding: 20px;
  border-radius: 22px 22px 0 0;
  border: 1px solid #dfe7f3;
  background: rgba(255,255,255,.94);
  box-shadow: 0 25px 55px rgba(27,53,96,.10);
}

.ec-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid #edf0f5;
  color: #34435d;
  font-size: 12px;
  font-weight: 700;
}

.ec-preview-live {
  padding: 5px 8px;
  border-radius: 999px;
  background: #ecf8f3;
  color: #218d68;
  font-size: 9px;
  text-transform: uppercase;
}

.ec-preview-chart {
  height: 105px;
  padding-top: 24px;
}

.ec-chart-bars {
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ec-chart-bars span {
  flex: 1;
  min-height: 12px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #386fff, #7894ff);
}

.ec-earnings-line {
  height: 110px;
  margin-top: 15px;
}

.ec-earnings-line svg {
  width: 100%;
  height: 100%;
}

.ec-preview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 13px;
}

.ec-preview-stats div {
  padding: 11px;
  border-radius: 11px;
  background: #f6f8fc;
}

.ec-preview-stats small,
.ec-preview-stats strong {
  display: block;
}

.ec-preview-stats small {
  color: #929caf;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ec-preview-stats strong {
  margin-top: 3px;
  color: #2c3c58;
  font-size: 11px;
}


/* Responsive */

@media (max-width: 991.98px) {
  .ec-growth {
    padding: 95px 0;
  }

  .ec-growth-grid {
    grid-template-columns: 1fr;
  }

  .ec-growth-card {
    min-height: 670px;
  }
}

@media (max-width: 680px) {
  .ec-growth {
    padding: 78px 0;
  }

  .ec-section-heading {
    margin-bottom: 42px;
  }

  .ec-growth-card {
    min-height: 650px;
    padding: 28px;
    border-radius: 24px;
  }

  .ec-growth-card h3 {
    font-size: 32px;
  }

  .ec-growth-preview {
    left: 28px;
    right: 28px;
  }

  .ec-preview-stats {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Ad Formats
   ========================================================= */

.ec-formats {
  padding: 130px 0;
  background: #fff;
}

.ec-section-heading-center {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ec-format-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 42px 0 48px;
  flex-wrap: wrap;
}

.ec-format-tab {
  border: 1px solid #dfe6f1;
  background: #fff;
  color: #596982;
  padding: 11px 19px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ec-format-tab.active {
  background: #0f1b34;
  color: #fff;
  border-color: #0f1b34;
}

.ec-format-stage {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  align-items: center;
  padding: 54px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 85% 15%, rgba(73,104,255,.10), transparent 30%),
    #f7f9fd;
  border: 1px solid #e2e8f1;
}

.ec-format-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: #3570e9;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ec-format-copy h3 {
  margin: 0;
  color: #0b1730;
  font-family: "Jost", sans-serif;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.ec-format-copy p {
  margin: 22px 0 0;
  color: #68778f;
  font-size: 17px;
  line-height: 1.7;
}

.ec-format-points {
  display: grid;
  gap: 11px;
  margin-top: 26px;
  color: #33445f;
  font-size: 14px;
  font-weight: 600;
}

.ec-browser {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid #d9e2ef;
  background: #fff;
  box-shadow: 0 28px 60px rgba(29,53,96,.11);
}

.ec-browser-top {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 15px;
  border-bottom: 1px solid #edf1f6;
  background: #f9fbfd;
}

.ec-browser-top > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8deea;
}

.ec-browser-address {
  margin-left: 10px;
  flex: 1;
  padding: 7px 12px;
  border-radius: 8px;
  background: #fff;
  color: #9aa5b6;
  font-size: 10px;
}

.ec-browser-body {
  padding: 28px;
}

.ec-article-copy {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}

.ec-article-copy span {
  height: 9px;
  border-radius: 999px;
  background: #edf1f6;
}

.ec-article-copy span:nth-child(1) {
  width: 72%;
}

.ec-article-copy span:nth-child(2) {
  width: 94%;
}

.ec-article-copy span:nth-child(3) {
  width: 64%;
}

.ec-native-widget {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}

.ec-native-card {
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #e5eaf1;
  background: #fff;
}

.ec-native-image {
  height: 100px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(28,104,255,.16), rgba(111,87,255,.20)),
    #eef3ff;
}

.ec-native-lines {
  display: grid;
  gap: 7px;
  margin-top: 11px;
}

.ec-native-lines strong {
  color: #34445e;
  font-size: 10px;
}

.ec-native-lines span {
  height: 6px;
  border-radius: 999px;
  background: #e9edf4;
}

.ec-native-lines span:last-child {
  width: 68%;
}

@media (max-width: 991.98px) {
  .ec-formats {
    padding: 95px 0;
  }

  .ec-format-stage {
    grid-template-columns: 1fr;
    gap: 42px;
    padding: 38px;
  }
}

@media (max-width: 680px) {
  .ec-formats {
    padding: 78px 0;
  }

  .ec-format-stage {
    padding: 26px;
    border-radius: 24px;
  }

  .ec-format-copy h3 {
    font-size: 34px;
  }

  .ec-native-widget {
    grid-template-columns: 1fr;
  }
}


/* Interactive format previews */

#ecFormatPreview {
  transition: opacity .12s ease, transform .12s ease;
}

#ecFormatPreview.ec-format-changing {
  opacity: .15;
  transform: translateY(4px);
}

/* Display */

.ec-display-layout {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 20px;
}

.ec-display-header {
  width: 45%;
  height: 15px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: #e9edf4;
}

.ec-display-copy {
  height: 9px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #edf1f6;
}

.ec-display-copy.short {
  width: 64%;
}

.ec-display-copy.medium {
  width: 82%;
}

.ec-display-banner {
  height: 82px;
  margin: 25px 0;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg,#1769ff,#6c5cff);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.ec-display-rectangle {
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg,#eef3ff,#e7ebff);
  border: 1px solid #cfdbf6;
  color: #5973aa;
  font-size: 11px;
  font-weight: 700;
}

/* Video */

.ec-video-screen {
  position: relative;
  height: 240px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background:
    radial-gradient(circle at 70% 30%, rgba(104,91,255,.55), transparent 30%),
    linear-gradient(135deg,#07142d,#142b5f);
  overflow: hidden;
}

.ec-video-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  color: rgba(255,255,255,.7);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.ec-play-button {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #1769ff;
  font-size: 22px;
  box-shadow: 0 18px 35px rgba(0,0,0,.18);
}

.ec-video-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.ec-video-meta strong,
.ec-video-meta span {
  display: block;
}

.ec-video-meta strong {
  color: #273853;
  font-size: 13px;
}

.ec-video-meta span {
  margin-top: 3px;
  color: #8a96a9;
  font-size: 10px;
}

.ec-video-live {
  padding: 6px 9px;
  border-radius: 999px;
  background: #ebf8f3;
  color: #208b68;
  font-size: 9px;
  font-weight: 800;
}

/* High impact */

.ec-impact-preview {
  position: relative;
  min-height: 260px;
  overflow: hidden;
}

.ec-impact-site {
  padding: 8px;
}

.ec-impact-copy {
  width: 88%;
  height: 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #e9edf4;
}

.ec-impact-copy.short {
  width: 56%;
}

.ec-impact-content {
  height: 130px;
  margin-top: 24px;
  border-radius: 15px;
  background: #f1f4f9;
}

.ec-anchor-ad {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  min-height: 72px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
  background: linear-gradient(135deg,#1769ff,#7059ff);
  color: #fff;
  box-shadow: 0 18px 38px rgba(43,81,183,.24);
}

.ec-anchor-ad span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.ec-anchor-ad button {
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 680px) {
  .ec-display-layout {
    grid-template-columns: 1fr;
  }

  .ec-display-sidebar {
    display: none;
  }

  .ec-video-screen {
    height: 190px;
  }
}


/* =========================================================
   Advertiser Platform
   ========================================================= */

.ec-advertiser-platform {
  padding: 140px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(72,94,255,.18), transparent 30%),
    radial-gradient(circle at 15% 80%, rgba(0,131,255,.08), transparent 26%),
    #081326;
  color: #fff;
}

.ec-advertiser-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 86px;
  align-items: center;
}

.ec-dark-kicker {
  display: inline-block;
  margin-bottom: 20px;
  color: #8dabff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ec-advertiser-copy h2 {
  max-width: 560px;
  margin: 0;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: clamp(48px,5vw,68px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.ec-advertiser-copy > p {
  max-width: 555px;
  margin: 26px 0 0;
  color: #9baac2;
  font-size: 18px;
  line-height: 1.7;
}

.ec-dark-features {
  display: grid;
  gap: 22px;
  margin: 38px 0;
}

.ec-dark-features > div {
  display: flex;
  gap: 15px;
}

.ec-dark-feature-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(128,157,255,.28);
  border-radius: 11px;
  background: rgba(72,105,255,.10);
  color: #91aaff;
  font-size: 10px;
  font-weight: 800;
}

.ec-dark-features strong,
.ec-dark-features small {
  display: block;
}

.ec-dark-features strong {
  color: #fff;
  font-size: 15px;
}

.ec-dark-features small {
  max-width: 420px;
  margin-top: 4px;
  color: #8f9db4;
  font-size: 13px;
  line-height: 1.55;
}

.ec-btn-light {
  color: #10203d;
  background: #fff;
  box-shadow: 0 15px 35px rgba(0,0,0,.18);
}

.ec-btn-light:hover {
  color: #1769ff;
}


/* Dashboard */

.ec-dashboard-shell {
  position: relative;
}

.ec-dashboard-shell::before {
  content: "";
  position: absolute;
  inset: -50px -70px;
  border-radius: 50%;
  background: rgba(77,91,255,.10);
  filter: blur(55px);
}

.ec-dashboard-window {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(158,178,222,.20);
  border-radius: 28px;
  background: rgba(13,27,52,.92);
  box-shadow: 0 40px 100px rgba(0,0,0,.34);
}

.ec-dashboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ec-dashboard-top small,
.ec-dashboard-top strong {
  display: block;
}

.ec-dashboard-top small {
  color: #6f829f;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ec-dashboard-top strong {
  margin-top: 4px;
  color: #fff;
  font-size: 16px;
}

.ec-dashboard-status {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(40,195,142,.10);
  color: #55d6a7;
  font-size: 10px;
  font-weight: 700;
}

.ec-dashboard-nav {
  display: flex;
  gap: 7px;
  margin-top: 22px;
  padding: 5px;
  border-radius: 11px;
  background: rgba(255,255,255,.04);
}

.ec-dashboard-nav span {
  padding: 7px 11px;
  border-radius: 8px;
  color: #7486a2;
  font-size: 10px;
  font-weight: 700;
}

.ec-dashboard-nav span.active {
  background: rgba(82,112,255,.15);
  color: #b7c6ff;
}

.ec-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-top: 16px;
}

.ec-dashboard-stats > div {
  padding: 15px;
  border: 1px solid rgba(141,164,208,.11);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.ec-dashboard-stats small,
.ec-dashboard-stats strong,
.ec-dashboard-stats span {
  display: block;
}

.ec-dashboard-stats small {
  color: #637896;
  font-size: 9px;
  text-transform: uppercase;
}

.ec-dashboard-stats strong {
  margin-top: 5px;
  color: #fff;
  font-size: 15px;
}

.ec-dashboard-stats span {
  margin-top: 4px;
  color: #71839e;
  font-size: 9px;
}

.ec-dashboard-chart-card {
  margin-top: 14px;
  padding: 17px;
  border: 1px solid rgba(141,164,208,.11);
  border-radius: 17px;
  background: rgba(255,255,255,.035);
}

.ec-dashboard-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ec-dashboard-chart-head strong,
.ec-dashboard-chart-head small {
  display: block;
}

.ec-dashboard-chart-head strong {
  color: #dce5f6;
  font-size: 12px;
}

.ec-dashboard-chart-head small {
  margin-top: 3px;
  color: #647895;
  font-size: 9px;
}

.ec-dashboard-chart-head > span {
  color: #687b98;
  font-size: 9px;
}

.ec-dashboard-chart {
  height: 170px;
  margin-top: 15px;
}

.ec-dashboard-chart svg {
  width: 100%;
  height: 100%;
}

.ec-dashboard-table {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(141,164,208,.11);
  border-radius: 15px;
}

.ec-dashboard-table-head,
.ec-dashboard-row {
  display: grid;
  grid-template-columns: 1.5fr .8fr .6fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.ec-dashboard-table-head {
  background: rgba(255,255,255,.035);
  color: #617592;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ec-dashboard-row {
  border-top: 1px solid rgba(141,164,208,.08);
  color: #abb8cb;
  font-size: 10px;
}

.ec-status-active {
  width: max-content;
  padding: 4px 7px;
  border-radius: 999px;
  color: #58d8aa;
  background: rgba(49,199,145,.09);
}

.ec-status-paused {
  width: max-content;
  padding: 4px 7px;
  border-radius: 999px;
  color: #d8b15f;
  background: rgba(216,177,95,.09);
}


@media (max-width: 991.98px) {
  .ec-advertiser-platform {
    padding: 100px 0;
  }

  .ec-advertiser-grid {
    grid-template-columns: 1fr;
    gap: 58px;
  }
}

@media (max-width: 680px) {
  .ec-advertiser-platform {
    padding: 80px 0;
  }

  .ec-dashboard-window {
    padding: 16px;
    border-radius: 22px;
  }

  .ec-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .ec-dashboard-table-head,
  .ec-dashboard-row {
    grid-template-columns: 1.4fr .8fr;
  }

  .ec-dashboard-table-head span:nth-child(3),
  .ec-dashboard-row span:nth-child(3) {
    display: none;
  }
}


/* =========================================================
   V2 Advertiser Platform
   ========================================================= */

.ec-advertiser-platform {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background:
    radial-gradient(
      circle at 78% 28%,
      rgba(72,94,255,.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 15% 80%,
      rgba(0,131,255,.08),
      transparent 26%
    ),
    #081326;
  color: #fff;
}

.ec-advertiser-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 86px;
  align-items: center;
}


/* Left copy */

.ec-dark-kicker {
  display: inline-block;
  margin-bottom: 20px;
  color: #8dabff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ec-advertiser-copy h2 {
  max-width: 560px;
  margin: 0;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: clamp(48px,5vw,68px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.ec-advertiser-copy > p {
  max-width: 555px;
  margin: 26px 0 0;
  color: #9baac2;
  font-size: 18px;
  line-height: 1.7;
}


/* Advertiser features */

.ec-dark-features {
  display: grid;
  gap: 22px;
  margin: 38px 0;
}

.ec-dark-features > div {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.ec-dark-feature-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(128,157,255,.28);
  border-radius: 11px;
  background: rgba(72,105,255,.10);
  color: #91aaff;
  font-size: 10px;
  font-weight: 800;
}

.ec-dark-features strong,
.ec-dark-features small {
  display: block;
}

.ec-dark-features strong {
  color: #fff;
  font-size: 15px;
}

.ec-dark-features small {
  max-width: 420px;
  margin-top: 4px;
  color: #8f9db4;
  font-size: 13px;
  line-height: 1.55;
}

.ec-btn-light {
  color: #10203d;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 15px 35px rgba(0,0,0,.18);
}

.ec-btn-light:hover {
  color: #1769ff;
  background: #fff;
}


/* Dashboard glow */

.ec-dashboard-shell {
  position: relative;
}

.ec-dashboard-shell::before {
  content: "";
  position: absolute;
  inset: -50px -70px;
  border-radius: 50%;
  background: rgba(77,91,255,.10);
  filter: blur(55px);
}


/* Dashboard */

.ec-dashboard-window {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(158,178,222,.20);
  border-radius: 28px;
  background: rgba(13,27,52,.94);
  box-shadow: 0 40px 100px rgba(0,0,0,.34);
}

.ec-dashboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ec-dashboard-top small,
.ec-dashboard-top strong {
  display: block;
}

.ec-dashboard-top small {
  color: #6f829f;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ec-dashboard-top strong {
  margin-top: 4px;
  color: #fff;
  font-size: 16px;
}

.ec-dashboard-status {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(40,195,142,.10);
  color: #55d6a7;
  font-size: 10px;
  font-weight: 700;
}


/* Dashboard navigation */

.ec-dashboard-nav {
  display: flex;
  gap: 7px;
  margin-top: 22px;
  padding: 5px;
  border-radius: 11px;
  background: rgba(255,255,255,.04);
}

.ec-dashboard-nav span {
  padding: 7px 11px;
  border-radius: 8px;
  color: #7486a2;
  font-size: 10px;
  font-weight: 700;
}

.ec-dashboard-nav span.active {
  background: rgba(82,112,255,.15);
  color: #b7c6ff;
}


/* Dashboard stat cards */

.ec-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-top: 16px;
}

.ec-dashboard-stats > div {
  padding: 15px;
  border: 1px solid rgba(141,164,208,.11);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.ec-dashboard-stats small,
.ec-dashboard-stats strong,
.ec-dashboard-stats span {
  display: block;
}

.ec-dashboard-stats small {
  color: #637896;
  font-size: 9px;
  text-transform: uppercase;
}

.ec-dashboard-stats strong {
  margin-top: 5px;
  color: #fff;
  font-size: 15px;
}

.ec-dashboard-stats span {
  margin-top: 4px;
  color: #71839e;
  font-size: 9px;
}


/* Chart */

.ec-dashboard-chart-card {
  margin-top: 14px;
  padding: 17px;
  border: 1px solid rgba(141,164,208,.11);
  border-radius: 17px;
  background: rgba(255,255,255,.035);
}

.ec-dashboard-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ec-dashboard-chart-head strong,
.ec-dashboard-chart-head small {
  display: block;
}

.ec-dashboard-chart-head strong {
  color: #dce5f6;
  font-size: 12px;
}

.ec-dashboard-chart-head small {
  margin-top: 3px;
  color: #647895;
  font-size: 9px;
}

.ec-dashboard-chart-head > span {
  color: #687b98;
  font-size: 9px;
}

.ec-dashboard-chart {
  height: 170px;
  margin-top: 15px;
}

.ec-dashboard-chart svg {
  width: 100%;
  height: 100%;
}


/* Campaign table */

.ec-dashboard-table {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(141,164,208,.11);
  border-radius: 15px;
}

.ec-dashboard-table-head,
.ec-dashboard-row {
  display: grid;
  grid-template-columns: 1.5fr .8fr .6fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.ec-dashboard-table-head {
  background: rgba(255,255,255,.035);
  color: #617592;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ec-dashboard-row {
  border-top: 1px solid rgba(141,164,208,.08);
  color: #abb8cb;
  font-size: 10px;
}

.ec-status-active {
  width: max-content;
  padding: 4px 7px;
  border-radius: 999px;
  color: #58d8aa;
  background: rgba(49,199,145,.09);
}

.ec-status-paused {
  width: max-content;
  padding: 4px 7px;
  border-radius: 999px;
  color: #d8b15f;
  background: rgba(216,177,95,.09);
}


/* Tablet */

@media (max-width: 991.98px) {

  .ec-advertiser-platform {
    padding: 100px 0;
  }

  .ec-advertiser-grid {
    grid-template-columns: 1fr;
    gap: 58px;
  }

}


/* Mobile */

@media (max-width: 680px) {

  .ec-advertiser-platform {
    padding: 80px 0;
  }

  .ec-dashboard-window {
    padding: 16px;
    border-radius: 22px;
  }

  .ec-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .ec-dashboard-table-head,
  .ec-dashboard-row {
    grid-template-columns: 1.4fr .8fr;
  }

  .ec-dashboard-table-head span:nth-child(3),
  .ec-dashboard-row span:nth-child(3) {
    display: none;
  }

}


/* =========================================================
   V2 Publisher Platform
   ========================================================= */

.ec-publisher-platform {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(62,117,255,.07),
      transparent 27%
    ),
    #f7f9fc;
}

.ec-publisher-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 90px;
  align-items: center;
}


/* Publisher copy */

.ec-light-kicker {
  display: inline-block;
  margin-bottom: 20px;
  color: #2f6fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ec-publisher-copy h2 {
  max-width: 560px;
  margin: 0;
  color: #10203d;
  font-family: "Jost", sans-serif;
  font-size: clamp(48px,5vw,68px);
  line-height: 1.03;
  letter-spacing: -.04em;
}

.ec-publisher-copy > p {
  max-width: 550px;
  margin: 26px 0 0;
  color: #65738a;
  font-size: 18px;
  line-height: 1.7;
}


/* Benefits */

.ec-publisher-benefits {
  display: grid;
  gap: 22px;
  margin: 38px 0;
}

.ec-publisher-benefits > div {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.ec-publisher-benefits > div > span {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #dce6fa;
  border-radius: 11px;
  background: #fff;
  color: #3478ff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(31,64,129,.05);
}

.ec-publisher-benefits strong,
.ec-publisher-benefits small {
  display: block;
}

.ec-publisher-benefits strong {
  color: #172943;
  font-size: 15px;
}

.ec-publisher-benefits small {
  max-width: 420px;
  margin-top: 4px;
  color: #718097;
  font-size: 13px;
  line-height: 1.55;
}


/* Dashboard shell */

.ec-publisher-visual {
  position: relative;
}

.ec-publisher-visual::before {
  content: "";
  position: absolute;
  inset: -45px -40px;
  border-radius: 50%;
  background: rgba(55,117,255,.08);
  filter: blur(55px);
}

.ec-publisher-dashboard {
  position: relative;
  padding: 24px;
  border: 1px solid #e2e9f4;
  border-radius: 28px;
  background: rgba(255,255,255,.96);
  box-shadow:
    0 38px 90px rgba(40,65,110,.12),
    0 8px 30px rgba(40,65,110,.06);
}


/* Dashboard header */

.ec-publisher-dashboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ec-publisher-dashboard-top small,
.ec-publisher-dashboard-top strong {
  display: block;
}

.ec-publisher-dashboard-top small {
  color: #93a0b3;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ec-publisher-dashboard-top strong {
  margin-top: 4px;
  color: #172943;
  font-size: 16px;
}

.ec-publisher-connected {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eefaf5;
  color: #37a878;
  font-size: 10px;
  font-weight: 700;
}


/* Date ranges */

.ec-publisher-range {
  display: inline-flex;
  gap: 5px;
  margin-top: 22px;
  padding: 5px;
  border-radius: 11px;
  background: #f3f6fa;
}

.ec-publisher-range span {
  padding: 7px 11px;
  border-radius: 8px;
  color: #8391a5;
  font-size: 10px;
  font-weight: 700;
}

.ec-publisher-range span.active {
  background: #fff;
  color: #3478ff;
  box-shadow: 0 3px 9px rgba(36,67,120,.08);
}


/* Metrics */

.ec-publisher-metrics {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-top: 18px;
}

.ec-publisher-metric {
  padding: 16px;
  border: 1px solid #e8edf5;
  border-radius: 15px;
  background: #fbfcfe;
}

.ec-publisher-metric.featured {
  background:
    linear-gradient(
      135deg,
      rgba(51,119,255,.07),
      rgba(102,84,255,.03)
    ),
    #fff;
}

.ec-publisher-metric small,
.ec-publisher-metric strong,
.ec-publisher-metric span {
  display: block;
}

.ec-publisher-metric small {
  color: #98a4b5;
  font-size: 9px;
  text-transform: uppercase;
}

.ec-publisher-metric strong {
  margin-top: 5px;
  color: #182c49;
  font-size: 15px;
}

.ec-publisher-metric span {
  margin-top: 4px;
  color: #8290a4;
  font-size: 9px;
}


/* Chart */

.ec-publisher-chart-card {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid #e8edf5;
  border-radius: 17px;
  background: #fff;
}

.ec-publisher-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ec-publisher-chart-head strong,
.ec-publisher-chart-head small {
  display: block;
}

.ec-publisher-chart-head strong {
  color: #223653;
  font-size: 12px;
}

.ec-publisher-chart-head small {
  margin-top: 3px;
  color: #99a5b6;
  font-size: 9px;
}

.ec-publisher-chart-head > span {
  color: #9ca8b9;
  font-size: 9px;
}

.ec-publisher-chart {
  height: 180px;
  margin-top: 15px;
}

.ec-publisher-chart svg {
  width: 100%;
  height: 100%;
}


/* Publisher ad units */

.ec-publisher-units {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.ec-publisher-unit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid #edf1f6;
  border-radius: 12px;
  background: #fcfdff;
}

.ec-unit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3478ff;
  box-shadow: 0 0 0 5px rgba(52,120,255,.09);
}

.ec-publisher-unit strong,
.ec-publisher-unit small {
  display: block;
}

.ec-publisher-unit strong {
  color: #31425b;
  font-size: 10px;
}

.ec-publisher-unit small {
  margin-top: 2px;
  color: #9aa6b7;
  font-size: 8px;
}

.ec-unit-status {
  padding: 4px 7px;
  border-radius: 999px;
  background: #effaf5;
  color: #3ca778;
  font-size: 8px;
  font-weight: 700;
}


/* Tablet */

@media (max-width: 991.98px) {

  .ec-publisher-platform {
    padding: 100px 0;
  }

  .ec-publisher-grid {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .ec-publisher-copy {
    order: 1;
  }

  .ec-publisher-visual {
    order: 2;
  }

}


/* Mobile */

@media (max-width: 680px) {

  .ec-publisher-platform {
    padding: 80px 0;
  }

  .ec-publisher-dashboard {
    padding: 16px;
    border-radius: 22px;
  }

  .ec-publisher-metrics {
    grid-template-columns: 1fr;
  }

  .ec-publisher-chart {
    height: 145px;
  }

}


/* =========================================================
   V2 How It Works
   ========================================================= */

.ec-how-it-works {
  position: relative;
  padding: 130px 0;
  overflow: hidden;
  background: #fff;
}

.ec-how-heading {
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
}

.ec-how-heading h2 {
  margin: 0;
  color: #10203d;
  font-family: "Jost", sans-serif;
  font-size: clamp(46px,5vw,66px);
  line-height: 1.04;
  letter-spacing: -.04em;
}

.ec-how-heading p {
  max-width: 620px;
  margin: 22px auto 0;
  color: #718097;
  font-size: 18px;
  line-height: 1.7;
}


/* Grid */

.ec-how-grid {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 80px 1fr;
  gap: 0;
  align-items: stretch;
}


/* Cards */

.ec-how-card {
  position: relative;
  min-height: 355px;
  padding: 38px 34px 34px;
  border: 1px solid #e5ebf4;
  border-radius: 28px;
  background:
    linear-gradient(
      180deg,
      rgba(247,250,255,.95),
      rgba(255,255,255,1)
    );
  box-shadow: 0 20px 55px rgba(38,64,107,.055);
}

.ec-how-number {
  position: absolute;
  top: 26px;
  right: 28px;
  color: #c5cfdd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.ec-how-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 1px solid #dce6fa;
  border-radius: 19px;
  background:
    linear-gradient(
      135deg,
      rgba(48,111,255,.09),
      rgba(98,82,255,.04)
    ),
    #fff;
  color: #3478ff;
  box-shadow: 0 12px 30px rgba(52,120,255,.08);
}

.ec-how-icon svg {
  width: 34px;
  height: 34px;
}

.ec-how-card h3 {
  margin: 30px 0 0;
  color: #152945;
  font-family: "Jost", sans-serif;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.ec-how-card p {
  margin: 17px 0 0;
  color: #718097;
  font-size: 15px;
  line-height: 1.75;
}


/* Arrows */

.ec-how-arrow {
  display: grid;
  place-items: center;
}

.ec-how-arrow span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #e1e8f4;
  border-radius: 50%;
  background: #fff;
  color: #8ba0be;
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(34,61,102,.05);
}


/* Hover */

.ec-how-card {
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.ec-how-card:hover {
  transform: translateY(-5px);
  border-color: #d5e1f5;
  box-shadow: 0 28px 70px rgba(38,64,107,.09);
}


/* Tablet */

@media (max-width: 991.98px) {

  .ec-how-it-works {
    padding: 100px 0;
  }

  .ec-how-heading {
    margin-bottom: 55px;
  }

  .ec-how-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ec-how-arrow {
    height: 46px;
  }

  .ec-how-arrow span {
    transform: rotate(90deg);
  }

  .ec-how-card {
    min-height: auto;
  }

}


/* Mobile */

@media (max-width: 680px) {

  .ec-how-it-works {
    padding: 80px 0;
  }

  .ec-how-heading {
    margin-bottom: 42px;
  }

  .ec-how-card {
    padding: 30px 26px;
    border-radius: 23px;
  }

  .ec-how-card h3 {
    font-size: 27px;
  }

}


/* =========================================================
   V2 Integration Flow
   ========================================================= */

.ec-integration {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background:
    radial-gradient(
      circle at 82% 28%,
      rgba(63,118,255,.09),
      transparent 28%
    ),
    #f7f9fd;
}

.ec-integration-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 90px;
  align-items: center;
}


/* Copy */

.ec-integration-copy h2 {
  max-width: 580px;
  margin: 0;
  color: #10203d;
  font-family: "Jost", sans-serif;
  font-size: clamp(48px,5vw,68px);
  line-height: 1.03;
  letter-spacing: -.04em;
}

.ec-integration-copy > p {
  max-width: 540px;
  margin: 26px 0 0;
  color: #718097;
  font-size: 18px;
  line-height: 1.7;
}

.ec-integration-points {
  display: grid;
  gap: 21px;
  margin: 38px 0;
}

.ec-integration-points > div {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.ec-integration-points > div > span {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #dae5f8;
  border-radius: 11px;
  background: #fff;
  color: #3478ff;
  font-size: 10px;
  font-weight: 800;
}

.ec-integration-points strong,
.ec-integration-points small {
  display: block;
}

.ec-integration-points strong {
  color: #172943;
  font-size: 15px;
}

.ec-integration-points small {
  max-width: 420px;
  margin-top: 4px;
  color: #758399;
  font-size: 13px;
  line-height: 1.55;
}


/* Visual */

.ec-integration-visual {
  position: relative;
}

.ec-integration-visual::before {
  content: "";
  position: absolute;
  inset: -50px;
  border-radius: 50%;
  background: rgba(52,120,255,.07);
  filter: blur(60px);
}

.ec-integration-flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 54px 1fr 54px 1fr;
  align-items: center;
}


/* Steps */

.ec-flow-step {
  min-height: 285px;
  padding: 22px;
  border: 1px solid #e1e8f3;
  border-radius: 24px;
  background: rgba(255,255,255,.97);
  box-shadow:
    0 25px 60px rgba(39,65,107,.08),
    0 5px 18px rgba(39,65,107,.04);
}

.ec-flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ec-flow-badge {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #edf3ff;
  color: #3478ff;
  font-size: 10px;
  font-weight: 800;
}

.ec-flow-top small {
  color: #99a6b8;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.ec-flow-step > strong {
  display: block;
  margin-top: 24px;
  color: #1d304b;
  font-size: 16px;
}

.ec-flow-step > p {
  margin: 7px 0 0;
  color: #8592a6;
  font-size: 11px;
  line-height: 1.55;
}


/* Script window */

.ec-code-window {
  overflow: hidden;
  margin-top: 27px;
  border: 1px solid #dfe7f2;
  border-radius: 14px;
  background: #101b2e;
}

.ec-code-window-top {
  display: flex;
  gap: 5px;
  padding: 10px 11px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.ec-code-window-top span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
}

.ec-code-lines {
  display: grid;
  gap: 6px;
  padding: 19px 15px;
}

.ec-code-lines span {
  overflow: hidden;
  color: #90aaff;
  font-family: monospace;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* Connected */

.ec-connected-ring {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  margin: 32px auto 0;
  border-radius: 50%;
  background: #f0fbf6;
  color: #38ae7e;
  box-shadow: 0 0 0 12px rgba(56,174,126,.05);
}

.ec-connected-ring svg {
  width: 58px;
  height: 58px;
}

.ec-flow-connected {
  text-align: center;
}

.ec-flow-connected .ec-flow-top {
  text-align: left;
}


/* Earnings visual */

.ec-money-chart {
  height: 104px;
  margin-top: 34px;
  padding: 14px 13px 0;
  border: 1px solid #e4eaf3;
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      rgba(52,120,255,.04),
      rgba(255,255,255,0)
    );
}

.ec-money-bars {
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.ec-money-bars span {
  flex: 1;
  min-width: 0;
  border-radius: 5px 5px 2px 2px;
  background:
    linear-gradient(
      180deg,
      #4f85ff,
      #2f6fff
    );
}


/* Connectors */

.ec-flow-connector {
  display: grid;
  place-items: center;
}

.ec-flow-connector span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #dce5f2;
  border-radius: 50%;
  background: #fff;
  color: #91a1b8;
  box-shadow: 0 7px 18px rgba(43,70,112,.05);
}


/* Hover */

.ec-flow-step {
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.ec-flow-step:hover {
  transform: translateY(-5px);
  box-shadow:
    0 30px 70px rgba(39,65,107,.11),
    0 5px 18px rgba(39,65,107,.04);
}


/* Tablet */

@media (max-width: 1100px) {

  .ec-integration-grid {
    grid-template-columns: 1fr;
    gap: 65px;
  }

}

@media (max-width: 850px) {

  .ec-integration-flow {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .ec-flow-connector {
    height: 42px;
  }

  .ec-flow-connector span {
    transform: rotate(90deg);
  }

  .ec-flow-step {
    min-height: auto;
  }

}


/* Mobile */

@media (max-width: 680px) {

  .ec-integration {
    padding: 80px 0;
  }

  .ec-flow-step {
    padding: 20px;
    border-radius: 21px;
  }

}


/* =========================================================
   V2 Final CTA
   ========================================================= */

.ec-final-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0 135px;
  background: #fff;
}

.ec-final-cta-card {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  display: grid;
  place-items: center;
  padding: 80px 50px;
  border-radius: 38px;
  background:
    linear-gradient(
      135deg,
      #0c1a34 0%,
      #0c2149 48%,
      #122c67 100%
    );
  box-shadow: 0 40px 100px rgba(19,46,99,.18);
}

.ec-final-cta-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 37px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}


/* Glows */

.ec-final-cta-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}

.ec-final-cta-glow-one {
  width: 500px;
  height: 500px;
  top: -290px;
  right: -110px;
  background: rgba(60,97,255,.28);
}

.ec-final-cta-glow-two {
  width: 420px;
  height: 420px;
  left: -230px;
  bottom: -260px;
  background: rgba(24,142,255,.20);
}


/* CTA content */

.ec-final-cta-content {
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: auto;
  text-align: center;
}

.ec-final-kicker {
  display: inline-block;
  margin-bottom: 21px;
  color: #91adff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ec-final-cta h2 {
  max-width: 790px;
  margin: 0 auto;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: clamp(52px,6vw,78px);
  line-height: .99;
  letter-spacing: -.045em;
}

.ec-final-cta-content > p {
  max-width: 650px;
  margin: 26px auto 0;
  color: #a9b7ce;
  font-size: 18px;
  line-height: 1.7;
}


/* Buttons */

.ec-final-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 38px;
}

.ec-final-btn-primary {
  min-width: 205px;
  justify-content: center;
  color: #10203d;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 16px 35px rgba(0,0,0,.16);
}

.ec-final-btn-primary:hover {
  color: #1769ff;
  background: #fff;
}

.ec-final-btn-secondary {
  min-width: 220px;
  justify-content: center;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(8px);
}

.ec-final-btn-secondary:hover {
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.32);
}


/* Trust row */

.ec-final-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 13px 28px;
  margin-top: 32px;
}

.ec-final-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8799b5;
  font-size: 11px;
  font-weight: 600;
}

.ec-final-trust svg {
  width: 15px;
  height: 15px;
  color: #6f94ff;
}


/* Responsive */

@media (max-width: 991.98px) {

  .ec-final-cta {
    padding: 100px 0;
  }

  .ec-final-cta-card {
    min-height: 450px;
    padding: 70px 38px;
    border-radius: 32px;
  }

  .ec-final-cta-card::before {
    border-radius: 31px;
  }

}

@media (max-width: 680px) {

  .ec-final-cta {
    padding: 75px 0;
  }

  .ec-final-cta-card {
    min-height: auto;
    padding: 65px 24px;
    border-radius: 25px;
  }

  .ec-final-cta-card::before {
    border-radius: 24px;
  }

  .ec-final-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ec-final-actions .ec-btn {
    width: 100%;
    min-width: 0;
  }

  .ec-final-trust {
    display: grid;
    justify-content: center;
    text-align: left;
  }

}


/* =========================================================
   V2 Footer
   ========================================================= */

.ec-footer {
  position: relative;
  overflow: hidden;
  padding: 0 0 34px;
  background: #071225;
  color: #fff;
}


/* Newsletter */

.ec-footer-newsletter {
  position: relative;
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: 80px;
  align-items: center;
  padding: 85px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.ec-footer-newsletter::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  top: -280px;
  right: -100px;
  border-radius: 50%;
  background: rgba(51,100,255,.15);
  filter: blur(10px);
}

.ec-footer-kicker {
  display: inline-block;
  margin-bottom: 17px;
  color: #7f9eff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.ec-footer-newsletter h2 {
  margin: 0;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: clamp(38px,4vw,54px);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.ec-footer-newsletter-copy p {
  max-width: 520px;
  margin: 19px 0 0;
  color: #8798b2;
  font-size: 15px;
  line-height: 1.7;
}


/* Newsletter Form */

.ec-footer-newsletter-form {
  position: relative;
  z-index: 2;
}

.ec-footer-input-wrap {
  display: flex;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.06);
}

.ec-footer-input-wrap input {
  min-width: 0;
  flex: 1;
  height: 52px;
  padding: 0 16px;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-size: 14px;
}

.ec-footer-input-wrap input::placeholder {
  color: #71829d;
}

.ec-footer-input-wrap button {
  height: 52px;
  padding: 0 23px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: #3478ff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background .2s ease,
    transform .2s ease;
}

.ec-footer-input-wrap button:hover {
  background: #2469f2;
  transform: translateY(-1px);
}

.ec-footer-newsletter-form > small {
  display: block;
  margin-top: 11px;
  color: #62748f;
  font-size: 10px;
}


/* Main columns */

.ec-footer-main {
  display: grid;
  grid-template-columns: 1.6fr repeat(3,1fr);
  gap: 55px;
  padding: 72px 0 55px;
}

.ec-footer-logo {
  display: inline-block;
  color: #fff;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.045em;
}

.ec-footer-logo:hover {
  color: #fff;
}

.ec-footer-brand > p {
  margin: 20px 0 0;
  color: #d9e1ef;
  font-size: 15px;
  font-weight: 600;
}

.ec-footer-brand .ec-footer-brand-sub {
  max-width: 390px;
  margin-top: 12px;
  color: #73839d;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
}

.ec-footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ec-footer-column strong {
  margin-bottom: 22px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.ec-footer-column a {
  margin-bottom: 13px;
  color: #7f8fa8;
  font-size: 12px;
  transition:
    color .2s ease,
    transform .2s ease;
}

.ec-footer-column a:hover {
  color: #fff;
  transform: translateX(2px);
}


/* Contact row */

.ec-footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 23px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #6f809a;
  font-size: 11px;
}

.ec-footer-contact a {
  color: #8b9bb3;
}

.ec-footer-contact a:hover {
  color: #fff;
}

.ec-footer-contact-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #41516a;
}


/* Bottom */

.ec-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  color: #536680;
  font-size: 10px;
}

.ec-footer-bottom-links {
  display: flex;
  gap: 22px;
}

.ec-footer-bottom-links a {
  color: #647792;
}

.ec-footer-bottom-links a:hover {
  color: #fff;
}


/* Tablet */

@media (max-width: 991.98px) {

  .ec-footer-newsletter {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ec-footer-main {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  .ec-footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 15px;
  }

}


/* Mobile */

@media (max-width: 680px) {

  .ec-footer-newsletter {
    padding: 65px 0;
  }

  .ec-footer-input-wrap {
    display: block;
  }

  .ec-footer-input-wrap input {
    width: 100%;
  }

  .ec-footer-input-wrap button {
    width: 100%;
    margin-top: 5px;
  }

  .ec-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 42px 26px;
    padding: 55px 0 45px;
  }

  .ec-footer-brand {
    grid-column: 1 / -1;
  }

  .ec-footer-contact {
    display: grid;
    gap: 8px;
  }

  .ec-footer-contact-dot {
    display: none;
  }

  .ec-footer-bottom {
    display: grid;
    gap: 15px;
  }

}


/* =========================================================
   V2 Header + Navigation Polish
   ========================================================= */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

.ec-header {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(20,45,84,.08);
}

.ec-header-inner {
  min-height: 84px;
}

.ec-brand-text {
  display: inline-flex;
  align-items: center;
  color: #10203d;
  font-family: "Jost", sans-serif;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.055em;
  text-decoration: none;
}

.ec-brand-text:hover {
  color: #1769ff;
}

.ec-header .nav-link {
  position: relative;
  color: #21324d;
  font-weight: 600;
  transition: color .2s ease;
}

.ec-header .nav-link:hover {
  color: #1769ff;
}

.ec-header .nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: #3478ff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.ec-header .nav-link:hover::after {
  transform: scaleX(1);
}

.ec-header .ec-header-login {
  color: #21324d;
  font-weight: 600;
}

.ec-header .ec-header-login:hover {
  color: #1769ff;
}

.ec-header .ec-header-cta {
  box-shadow: 0 10px 24px rgba(52,120,255,.20);
}

.ec-header .ec-header-cta:hover {
  transform: translateY(-1px);
}


/* Make anchored sections stop below the header */

#advertise,
#monetize,
#ad-formats,
#solutions,
#resources,
#advertiser-platform,
#publisher-platform,
#how-it-works,
#integration,
#get-started {
  scroll-margin-top: 105px;
}


/* Mobile nav */

@media (max-width: 991.98px) {

  .ec-header-inner {
    min-height: 74px;
  }

  .ec-header .navbar-collapse {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid #e6ebf3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(34,58,99,.10);
  }

  .ec-header .nav-link {
    padding: 11px 6px;
  }

  .ec-header .nav-link::after {
    display: none;
  }

}


/* =========================================================
   V2 Global Consistency Pass
   ========================================================= */

:root {
  --ec-shell: 1240px;
  --ec-side: 32px;

  --ec-section-space: 120px;
  --ec-section-space-mobile: 78px;

  --ec-radius-lg: 28px;
  --ec-radius-md: 18px;

  --ec-text-dark: #10203d;
  --ec-text-body: #718097;
  --ec-border: #e5ebf4;
}


/* Global container */

.ec-shell {
  width: min(
    calc(100% - (var(--ec-side) * 2)),
    var(--ec-shell)
  );
  margin-left: auto;
  margin-right: auto;
}


/* Section rhythm */

.ec-growth,
.ec-formats,
.ec-advertiser-platform,
.ec-publisher-platform,
.ec-how-it-works,
.ec-integration {
  padding-top: var(--ec-section-space);
  padding-bottom: var(--ec-section-space);
}

.ec-final-cta {
  padding-top: 105px;
  padding-bottom: 120px;
}


/* Headings */

.ec-section-heading h2,
.ec-growth h2,
.ec-formats h2,
.ec-advertiser-copy h2,
.ec-publisher-copy h2,
.ec-how-heading h2,
.ec-integration-copy h2 {
  letter-spacing: -.04em;
  text-wrap: balance;
}

.ec-growth h2,
.ec-formats h2,
.ec-how-heading h2 {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}


/* Body copy */

.ec-section-heading p,
.ec-growth p,
.ec-formats p,
.ec-advertiser-copy > p,
.ec-publisher-copy > p,
.ec-how-heading p,
.ec-integration-copy > p {
  text-wrap: pretty;
}


/* Buttons */

.ec-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.ec-btn:hover {
  transform: translateY(-1px);
}


/* Standardized cards */

.ec-growth-card,
.ec-format-stage,
.ec-dashboard-window,
.ec-publisher-dashboard,
.ec-how-card,
.ec-flow-step {
  border-radius: var(--ec-radius-lg);
}


/* Softer shadows */

.ec-growth-card,
.ec-how-card,
.ec-flow-step {
  box-shadow: 0 20px 50px rgba(35,61,102,.06);
}


/* Improve section transitions */

.ec-growth {
  background: #f8faff;
}

.ec-formats {
  background: #fff;
}

.ec-publisher-platform {
  background: #f7f9fc;
}

.ec-how-it-works {
  background: #fff;
}

.ec-integration {
  background: #f7f9fd;
}


/* Make content sections breathe consistently */

.ec-growth-grid,
.ec-formats-stage,
.ec-advertiser-grid,
.ec-publisher-grid,
.ec-integration-grid {
  margin-top: 60px;
}


/* Prevent overly wide copy */

.ec-advertiser-copy,
.ec-publisher-copy,
.ec-integration-copy {
  max-width: 600px;
}


/* Card content spacing */

.ec-growth-card,
.ec-how-card,
.ec-flow-step {
  overflow: hidden;
}


/* Ad format tabs */

.ec-format-tabs {
  gap: 8px;
}

.ec-format-tab {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 10px;
  font-size: 12px;
}


/* Dashboard balance */

.ec-dashboard-window,
.ec-publisher-dashboard {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}


/* Final CTA sizing */

.ec-final-cta-card {
  min-height: 460px;
}

.ec-final-cta h2 {
  max-width: 760px;
}


/* Footer separation */

.ec-footer {
  margin-top: 0;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991.98px) {

  :root {
    --ec-side: 24px;
    --ec-section-space: 95px;
  }

  .ec-growth,
  .ec-formats,
  .ec-advertiser-platform,
  .ec-publisher-platform,
  .ec-how-it-works,
  .ec-integration {
    padding-top: var(--ec-section-space);
    padding-bottom: var(--ec-section-space);
  }

  .ec-growth-grid,
  .ec-formats-stage,
  .ec-advertiser-grid,
  .ec-publisher-grid,
  .ec-integration-grid {
    margin-top: 48px;
  }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 680px) {

  :root {
    --ec-side: 18px;
  }

  .ec-growth,
  .ec-formats,
  .ec-advertiser-platform,
  .ec-publisher-platform,
  .ec-how-it-works,
  .ec-integration {
    padding-top: var(--ec-section-space-mobile);
    padding-bottom: var(--ec-section-space-mobile);
  }

  .ec-final-cta {
    padding-top: 72px;
    padding-bottom: 78px;
  }

  .ec-growth-grid,
  .ec-formats-stage,
  .ec-advertiser-grid,
  .ec-publisher-grid,
  .ec-integration-grid {
    margin-top: 38px;
  }

  .ec-btn {
    min-height: 46px;
    padding-left: 17px;
    padding-right: 17px;
  }

  .ec-format-tabs {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 5px;
    scrollbar-width: none;
  }

  .ec-format-tabs::-webkit-scrollbar {
    display: none;
  }

  .ec-format-tab {
    flex: 0 0 auto;
  }

}


/* =========================================================
   V2 Mobile QA Pass
   ========================================================= */

@media (max-width: 767.98px) {

  body {
    overflow-x: hidden;
  }

  .ec-shell {
    width: calc(100% - 36px);
  }

  /* Header */
  .ec-header-inner {
    min-height: 72px;
  }

  .ec-brand-text {
    font-size: 22px;
  }

  .ec-header .navbar-toggler {
    padding: 7px 9px;
    border-radius: 10px;
  }

  /* Hero */
  .ec-hero {
    padding-top: 105px;
    padding-bottom: 80px;
  }

  .ec-hero-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .ec-hero-copy h1 {
    font-size: clamp(42px, 12vw, 58px);
    line-height: 1;
  }

  .ec-hero-copy > p {
    font-size: 16px;
    line-height: 1.65;
  }

  .ec-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ec-hero-actions .ec-btn {
    width: 100%;
  }

  .ec-hero-trust {
    gap: 10px 14px;
  }

  /* Growth cards */
  .ec-growth-grid {
    grid-template-columns: 1fr;
  }

  .ec-growth-card {
    padding: 26px;
  }

  /* Ad formats */
  .ec-format-stage {
    padding: 24px;
  }

  .ec-format-stage-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ec-format-preview {
    min-width: 0;
  }

  /* Advertiser */
  .ec-advertiser-copy h2,
  .ec-publisher-copy h2,
  .ec-integration-copy h2 {
    font-size: clamp(40px, 10vw, 54px);
  }

  .ec-dashboard-window,
  .ec-publisher-dashboard {
    width: 100%;
    max-width: 100%;
  }

  .ec-dashboard-nav {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .ec-dashboard-nav::-webkit-scrollbar {
    display: none;
  }

  .ec-dashboard-chart {
    height: 145px;
  }

  .ec-publisher-chart {
    height: 145px;
  }

  /* How it works */
  .ec-how-heading h2 {
    font-size: clamp(40px, 10vw, 54px);
  }

  .ec-how-card {
    min-height: 0;
  }

  /* Integration */
  .ec-integration-flow {
    width: 100%;
  }

  .ec-flow-step {
    width: 100%;
  }

  /* Final CTA */
  .ec-final-cta-card {
    padding: 54px 22px;
  }

  .ec-final-cta h2 {
    font-size: clamp(42px, 11vw, 60px);
  }

  .ec-final-cta-content > p {
    font-size: 16px;
  }

  /* Footer */
  .ec-footer-newsletter h2 {
    font-size: clamp(36px, 10vw, 48px);
  }

  .ec-footer-main {
    grid-template-columns: 1fr;
  }

  .ec-footer-brand {
    grid-column: auto;
  }

  .ec-footer-column {
    padding-top: 6px;
  }

}


/* =========================================================
   Very Small Phones
   ========================================================= */

@media (max-width: 430px) {

  .ec-shell {
    width: calc(100% - 28px);
  }

  .ec-hero-copy h1 {
    font-size: 40px;
  }

  .ec-growth-card,
  .ec-format-stage,
  .ec-dashboard-window,
  .ec-publisher-dashboard,
  .ec-how-card,
  .ec-flow-step {
    border-radius: 20px;
  }

  .ec-dashboard-stats {
    gap: 8px;
  }

  .ec-dashboard-chart-card,
  .ec-publisher-chart-card {
    padding: 13px;
  }

  .ec-footer-input-wrap {
    padding: 6px;
  }

}

/* Ad Formats header anchor alignment */
#ad-formats {
  scroll-margin-top: 15px;
}

/* =========================================================
   eClickZ Brand Wordmark
========================================================= */

.ec-brand-text {
  font-size: 44px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.045em;
}

@media (max-width: 767.98px) {
  .ec-brand-text {
    font-size: 34px;
  }
}